@charset "utf-8";
/* CSS Document */

/* =============================================================================
   Variables
   ========================================================================== */
:root {
	--base-bg-color: #ffffff;
	--base-font-color: #111111;
	--accent-1-color: #fea503;
	--accent-2-color: #ec4d00;

	--base-sp-ui-color: #000000;
	--base-hover-inverse-font-color: var(--accent-1-color);

	--ttl-en-font-color: var(--accent-1-color);

	--sp-fixed-bottom-navi: var(--accent-1-color);

	--header-headtag-bg: transparent;
	--header-headtag-font-color: var(--base-font-color);


	--contents-link-color: #000000;
	--contents-link-hover-color: #ec4d00;


	--header-data-font-color: #41342f;


	--header-btn-bg: linear-gradient(to right, var(--accent-1-color), #ec4d00);
	--header-hover-btn-bg: linear-gradient(to right, #ec4d00, var(--accent-1-color));
	--header-txt-color: #ffffff;
	--header-hover-txt-color: #ffffff;


	--nav-bg-color: var(--accent-1-color);
	--nav-hover-bg-color: #f8be53;
	--nav-font-color: #ffffff;
	--nav-hover-font-color: #ffffff;


	--btn-more-font-color: #ffffff;
	--btn-hover-more-font-color: #ffffff;
	--btn-more-bg-color: #ec4d00;
	--btn-hover-more-bg-color: #ff732d;
	--btn-more-border-color: #ec4d00;
	--btn-hover-more-border-color: #ec4d00;


	--footer-bg-color: var(--accent-1-color);
	--footer-base-font-color: #ffffff;


	--footer-base-2-font-color: #ffffff;
	--scrollup-btn-bg-color: #ec4d00;
	--scrollup-hover-btn-bg-color: #ff8649;


	--section-1-bg-color: #f5c1cd;
	--section-news-bg-color: #b2b8f2;


	--news-contents-accent-color: #ff8649;
	
	
	--voice-contents-accent-color: #ec4d00;
	--voice-contents-box-bg-color: #ffffff;


	--money-contents-accent-color: #f8be53;


	--question-contents-accent-1-color: var(--accent-1-color);
	--question-contents-accent-2-color: #ffffff;
	--question-contents-accent-3-color: var(--accent-1-color);
}


/* =============================================================================
   Base
   ========================================================================== */

body {
	background-color: var(--base-bg-color);
	color: var(--base-font-color);
}

/* 共通タイトル アルファベット表記 */
.ttl .en {
	color: var(--ttl-en-font-color);
	line-height: 1.8;
}

/* 共通タイトル 日本語表記 */
/* .ttl .jp {} */

/* もっと見るボタン */
.btn_more span {
  /* color: var(--base-font-color); */
}

.btn_more:after {
	color: var(--btn-more-font-color);
}

.btn_more:hover::after {
	color: var(--btn-hover-more-font-color);
}

.btn_more a {
    color: var(--btn-more-font-color) !important;
	background-color: var(--btn-more-bg-color);
	border: 1px solid var(--btn-more-border-color);
}

.btn_more a:hover {
	color: var(--btn-hover-more-font-color) !important;
    background-color: var(--btn-hover-more-bg-color);
	border: 1px solid var(--btn-hover-more-border-color);
}

/* =============================================================================
   Header
   ========================================================================== */

#header {
	background: url(../img/header_bg.png) repeat-x;
	background-color: #ffffff;
}

/* PC版 ヘッダ 電話番号など */
#data a {
	color: var(--header-data-font-color);
}

/* PC版 ヘッダ ご応募ボタン */
.bn_contact {
	position: relative;
	z-index: 10;
}
#data .bn_contact::before,
#data .bn_contact::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	display: block;
	width: 100%;
	height: 100%;
	background: var(--header-btn-bg);
	transition: all 0.3s ease-out;
}
#data .bn_contact::after {
	opacity: 0;
	background: var(--header-hover-btn-bg);
}

#data .bn_contact:hover::before {
	opacity: 0;
}
#data .bn_contact:hover::after {
	opacity: 1;
}


#data .bn_contact a {
	color: var(--header-txt-color);
}

#data .bn_contact:hover a {
	color: var(--header-hover-txt-color);
}

/* H1 背景 */
#base {
	color: var(--header-headtag-font-color);
	background: var(--header-headtag-bg);
}
#base a {
	color: var(--header-headtag-font-color);
}

/* =============================================================================
   Footer
   ========================================================================== */

#footer {
    background-color: var(--footer-bg-color);
}

#footer a {
	color: var(--base-bg-color);
}

#footer a::after, .texteffect a::after {
	background-color: var(--footer-base-font-color);
}

#footer a::after {
	background-color: var(--footer-base-2-font-color);
}

a:link, a:visited {
	color: var(--contents-link-color);
}

a:hover {
	color: var(--contents-link-hover-color);
}

/* スクロールボタン */
#scrollUp a {
	color: var(--footer-base-2-font-color);
	background: var(--scrollup-btn-bg-color);
}

#scrollUp a:hover {
	background: var(--scrollup-hover-btn-bg-color);
}

/* =============================================================================
   Navi
   ========================================================================== */

#gnavi {
    background: var(--nav-bg-color);
}

#gnavi li a {
    color: var(--nav-font-color);
}

#gnavi li a:hover {
	background-color: var(--nav-hover-bg-color);
}

#gnavi li.current a {
	color: var(--nav-hover-font-color);
	background-color: var(--nav-hover-bg-color);
}

#gnavi .texteffect a::after {
	background-color: var(--nav-hover-font-color);
}

.overlay {
	background:url(../img/overlay_bg.jpg) no-repeat center top / cover;
}

.overlay ul li a {
	color: var(--base-sp-ui-color);
}

/* .overlay ul li a:hover,
.overlay ul li a:focus {
	color: var(--base-hover-inverse-font-color);
} */

#navi {
    background: url("../img/nv_bg.png") no-repeat right center / cover ;
}

#navi span {
    background-color: var(--base-sp-ui-color);
}

#navi .menu {
	color: var(--nav-font-color);
}

#nav-menu {
	color: var(--nav-font-color);
    background-color: var(--nav-bg-color);
}

#nav-menu a:link {
	color: var(--nav-font-color);
}

/* =============================================================================
   花の背景　共通
   ========================================================================== */
/* フリーページ */
#top .free,
#top #about_box,
#free #main,
#question #main,
#money #main,
#about #main {

}

#top .free,
#money #main,
#about #main,
#free #main {
	background: url(../img/body_bg_01.jpg) repeat left top;
}

#top .news_box,
#news #main {
	background: url(../img/body_bg_02.jpg) repeat center / cover;
}
#news #main {
	background-attachment: fixed;
}

#top #about_box {
	background: url(../img/body_bg_03.jpg) repeat-y left top;
}

.salary_box {
	background: url(../img/salary_bg.png) no-repeat center top / cover;
	color: var(--voice-contents-box-bg-color);
}

@media screen and (max-width: 768px) {
	#top .free,
	#top #about_box,
	#free #main,
	#question #main,
	#money #main,
	#about #main {

	}

	#free #main,
	#money #main,
	#question #main,
	#about #main {

	}

	#free #main {

	}

	#top #about_box,
	#question #main {
		background-position: 100% 0;
		background-size: 220% auto; 
	}

	/* SP表示時は下層ページはスクロールなしの固定位置(::afterで)　*/
	#news #main {
		background: none;
	}
	#news #main::after {
		content: "";
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
		display: block;
		width: 100%;
		height: 100vh;
		background: url(../img/body_bg_02.jpg) repeat center / cover;
	}
}

@media all and (min-width: 767px) and (max-width: 1365px) {
	#top .free,
	#top #about_box,
	#free #main,
	#money #main,
	#about #main {

	}
}


/* 新着情報 */
#top .news_box,
#news #main {

}

#top .news_box > .container,
#news #main > .container {

}

#top .news_box > .container::before,
#top .news_box > .container::after,
#news #main > .container::before,
#news #main > .container::after {
    content: "";
}
#top .news_box > .container::before,
#news #main > .container::before {

}
#top .news_box > .container::after,
#news #main > .container::after {

}

#top .news_box > .container > .ttl,
#news #main > .container > .ttl {

}

@media screen and (max-width: 768px) {
	#top .news_box,
	#news #main {

	}

	#top .news_box > .container::after,
	#news #main > .container::before,
	#news #main > .container::after {

	}

	#top .news_box > .container::before,
	#news #main > .container::before {

	}
	#top .news_box > .container::after,
	#news #main > .container::after {

	}

	#top .news_box > .container::before,
	#news #main > .container::before {

	}
	#top .news_box > .container::after,
	#news #main > .container::after {

	}

	#news #main > .container::after {
		top: 20px;
	}

	#top .news_box > .container > .inner,
	#news #main > .container > .inner {

	}

	#top .news_box .thum,
	#top .news_box .thumr,
	#news #main .thum,
	#news #main .thumr {
		/* box-sizing: border-box; */
	}

	#top .news_box > .container > .ttl,
	#news #main > .container > .ttl {

	}
}

@media all and (min-width: 767px) and (max-width: 1365px) {
	#top .news_box > .container::before,
	#news #main > .container::before {

	}
	#top .news_box > .container::after,
	#news #main > .container::after {

	}

	#top .news_box > .container > .inner .thumr,
	#news #main > .container > .inner .thumr {

	}

	#top .news_box .thum,
	#news #main .thum {

	}
}

@media all and (min-width: 1921px) {
	#news {

	}

	#top .news_box,
	#news #main {

	}

	#top .news_box::after,
	#news #main::after {
		content: "";
	}

	#top .news_box > .container,
	#news #main > .container {

	}
}


#top #voice_box,
#voice #main,
#contact #main {
	position: relative;
	background: var(--accent-1-color);
}

#top #voice_box::before,
#top #voice_box::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 80px;
	display: block;
	clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
	background: var(--accent-1-color);
}
#top #voice_box::before {
	top: -6%;
	transform: scale(-1);
}
#top #voice_box::after {
	bottom: -6%;
}

#voice_box .ttl .en,
#voice_box .ttl .jp,
#voice .ttl .en,
#voice .ttl .jp,
#contact .ttl .en,
#contact .ttl .jp  {
	color: #ffffff;
}


#voice_box .btn_more:after {
	color: #ec4d00;
}

#voice_box .btn_more:hover::after {
	color: var(--btn-hover-more-font-color);
}

#voice_box .btn_more a {
  color: #ec4d00 !important;
	background-color: #ffffff;
	border: 1px solid #ec4d00;
}

#voice_box .btn_more a:hover {
	color: var(--btn-hover-more-font-color) !important;
  background-color: var(--btn-hover-more-bg-color);
	border: 1px solid var(--btn-hover-more-border-color);
}

/* 先輩の声 / お問い合わせ */
@media screen and (max-width: 768px) {
	#top #voice_box,
	#voice #main,
	#contact #main {

	}

	#top #voice_box::before,
	#top #voice_box::after {
		clip-path: polygon(0% 0%, 100% 0%, 0% 60%);
	}

	#top #voice_box::before {
		top: -80px;
	}
	#top #voice_box::after {
		bottom: -80px;
	}
}

@media all and (min-width: 767px) and (max-width: 1365px) {
	#top #voice_box,
	#voice #main,
	#contact #main {

	}
}


/* =============================================================================
   Top
   ========================================================================== */

#top #main {
	overflow: hidden;
	padding: 0;
}

/* フリーページ */
/* #top .free {} */


/* 新着情報 */
#top .news_box > .container > .inner {

}

#top .news_box .title {
	color:var(--news-contents-accent-color);
}

#top .news_box .btn_more {

}


/* 新着情報2 */
#top .moved {
	color: #ffffff;
}

#top .moved a {
	color: #ffffff !important;
}

#top .moved figure {
	background: #271C09;
}

.moved figure:after {
	background: #ffffff;
}

#top .news_box .moved .title {
	color: #ffffff;
}


/* 先輩の声 */
#top #voice_box li {
	background: var(--voice-contents-box-bg-color);
}

#top #voice_box .name_box {
	border-bottom:2px dotted var(--voice-contents-accent-color);
}

#top #voice_box .name{
	color: var(--voice-contents-accent-color);
}

/* 募集概要 */
#top #about_box dl {
	/* border-bottom: 2px dotted #ffffff; */
}


/* =============================================================================
   News
   ========================================================================== */

#news #main > .container .detail {

}

#news #main li {
	/* border-bottom: 2px dotted #6270e4; */
}

#news #main li a:hover {
	color: var(--contents-link-hover-color);
}

#news #profile_box dl {
	border-bottom: 2px dotted var(--news-contents-accent-color);
}

#profile_box a:hover {
    color: var(--contents-link-hover-color);
}

#news .detail .title {
	color: var(--news-contents-accent-color);
}

#news #page li {
	/* color: #999; */
}

#profile_box .container {
	/* position: relative;
	z-index: 100; */
}

#news.news2 #main > .container:not(:first-child)::before,
#news.news2 #main > .container:not(:last-child)::after {
	/* content: inherit; */
}

/* =============================================================================
   Voice
   ========================================================================== */
#voice #main .inner ul > li {
	background: var(--voice-contents-box-bg-color);
}

#voice #main .name_box {
	border-bottom:2px dotted var(--voice-contents-accent-color);
}

#voice .name {
	color: var(--voice-contents-accent-color);
}

/* =============================================================================
   Money
   ========================================================================== */

#money #main dl {
	border-bottom: 2px dotted var(--money-contents-accent-color);
}

#money #main dl a:hover {
	color: var(--money-contents-accent-color);
}

/* =============================================================================
   Question
   ========================================================================== */

#question #title_box li {
	background: var(--question-contents-accent-1-color);
	border: 1px solid var(--question-contents-accent-1-color);
}

#question #title_box li a {
	/* color:#ffffff; */
}

#question #title_box li a:hover {
	color: var(--question-contents-accent-1-color);
	background: var(--question-contents-accent-2-color);
}

#question .group_ttl {
	color: var(--question-contents-accent-3-color);
	/* background: #ffffff; */
	background: url(../img/body_bg_01.jpg) repeat center top;
}

#question .title {
	color: var(--question-contents-accent-3-color);
}

/* =============================================================================
   About
   ========================================================================== */

#about #main dl {
	/* border-bottom: 2px dotted #ffffff; */
}

#about #main dl a:hover {
	color: var(--contents-link-hover-color);
}

/* =============================================================================
   Contact
   ========================================================================== */

#contact #main .container {
	/* background: rgba(255, 255, 255, 0.8); */
}

.required {
  /* background: #f5b2c1; */
}

.text,
input[type=text] {
  border: 1px solid #cccccc;
	-webkit-tap-highlight-color : rgba(0,0,0,0);
}

.select{
	border: 1px solid #cccccc;
}

.select,
input[type=select] {
  -webkit-tap-highlight-color : rgba(0,0,0,0);
}

.textarea {
    border: 1px solid #cccccc;
}

.textarea,
input[type=textarea] {
    -webkit-tap-highlight-color : rgba(0,0,0,0);
}

.button {
    color: var(--btn-more-font-color) !important;
    background-color: var(--btn-more-bg-color);
    border: 1px solid var(--btn-more-border-color);
}
.button:hover {
	color: var(--accent-2-color) !important;
  background-color: var(--base-bg-color);
	border: 1px solid var(--btn-hover-more-border-color);
}

.error {
	color: #ff0000;
}

/* =============================================================================
   Device
   ========================================================================== */
@media screen and (min-width: 768px) {
  #top .news_box ul.list {
		/* margin: 4% 0;
		max-width: 70%;
		margin: auto; */
	}
}

@media screen and (max-width: 767px) {
	#header #logo {
		width: 65%;
	}

	#base {
		--header-headtag-bg: #ffffff;
	}

	.overlay .overlay-close {
		filter: invert(1);
	}

	#footer li {
		border-bottom:1px solid rgba(255,255,255,0.3);
	}
	/* スマホ版 追従メニュー */
	#bottomNavi {
		background-color: var(--sp-fixed-bottom-navi);
	}
	#bottomNavi li a {
		/* color: #333333; */
	}

	/* News (staff blog) */
	#news.news2 #main {
		/* padding-bottom: 30%; */
	}
}