@charset "utf-8";
/* ----------------------------- 共通 ------------------------------- */
.btns button{width: 215px; margin: 37px auto 0; background: #fff; text-align: center; font-size: 16px; padding: 23px 0; line-height: 150%; display: block; border-radius: 100px;}


/* ----------------------------- #fv ------------------------------- */
#fv{position: relative; padding: 40px 0 0;}
#fv:before{content: ""; display:block; background: url(../images/index/fv_bg_1.svg) no-repeat center center; background-size: cover; padding: 30% 0 0; position: absolute; top: 0px; left: 50%; transform: translateX(-50%);width: 100%;}
#fv .flex_slider{position: relative; z-index: 1; margin: 0px;padding: 0 0 33px;}
#fv .flex_slider img{margin: 0 35px 0 0; box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);}
#fv .slider_btn{width: 715px; position: absolute; transform: translateX(-50%); left: 50%; bottom: 34%; z-index: 10; display: flex; justify-content: space-between;}
#fv .flex_slider .slick-track{padding: 20px 0;}
#fv .flex_slider .slick-dots{bottom: 0px;}
#fv .flex_slider .slick-dots li{width: 12px; height: 12px;margin: 0;}
#fv .flex_slider .slick-dots li:not(:last-child){margin: 0 53px 0 0;}
#fv .flex_slider .slick-dots li button{background: #DDDDDD; width: 100%; height: 100%; border-radius: 100px;}
#fv .flex_slider .slick-dots li.slick-active button{background: linear-gradient(135deg, #B3B3EB, #64ACEA);}
#fv .flex_slider .slick-dots li button:before{display: none;}
#fv .slider_btn button.slick-arrow{border: 1px solid #000; background: #FFFFFF; width: 44px; height: 44px; border-radius: 1000px;position: relative; left: auto;right: auto; transform: translate(0); }
#fv .slider_btn button.slick-arrow:before{content: ""; display: block; width: 12px; height: 12px; border-bottom: 1px solid #000; border-right: 1px solid #000; top: 50%; left: 55%; transform: translate(-50%,-50%) rotateZ(135deg); position: absolute;}
#fv .slider_btn button.slick-next:before{ transform: translate(-50%,-50%) rotateZ(-45deg); left: 45%;}

/* ----------------------------- #topics ------------------------------- */
#topics{padding: 73px 0 0;}
#topics ul.topics_list{padding: 50px 0 0; width: 975px; margin: 0 auto;}
#topics ul.topics_list li{border-bottom: 1px solid #000; padding: 36px 0;}
#topics ul.topics_list li:first-child{border-top: 1px solid #000;}
#topics ul.topics_list li .flex{align-items: flex-start;}
#topics ul.topics_list li .flex p.deta_box{font-family: "Helvetica Neue", "Helvetica", serif; font-size: 18px; letter-spacing: 0.05em; line-height: 160%; font-weight: 700; padding: 0 16px 0 0;}
#topics ul.topics_list li .flex p.deta_box span{text-align: center; display: inline-block; padding: 2px 0 3px; letter-spacing: 0.05em; font-size: 12px; width: 116px; margin: 0 0 0 30px; line-height: 160%;}
#topics ul.topics_list li .flex p.deta_box span.pink{background: #FFD9FC;}
#topics ul.topics_list li .flex p.deta_box span.yellow{background: #FFEE93;}
#topics ul.topics_list li .flex p.text{font-family: 'Noto-Sans-JP-Light';line-height: 200%; letter-spacing: 0.05em; width: 643px; height: auto; transition: 0.5s;overflow: hidden;}

#topics ul.topics_list li .flex p.text.clos_tt{transition: 0.5s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 32px; }

#topics ul.topics_list li .flex p.clos_btn{width: 50px; height: 50px; border: 1px solid #000; position: relative;margin: 0 0 0 auto;}
#topics ul.topics_list li .flex p.clos_btn:before{content: ""; display: block; width: 22px; height: 1px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-bottom: 1px solid #000;}
#topics ul.topics_list li .flex p.clos_btn:after{content: ""; display: block; width: 22px; height: 1px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotateZ(90deg); border-bottom: 1px solid #000;transition: 0.5s;}
#topics ul.topics_list li .flex p.clos_btn.btn_active:after{transition: 0.5s; transform: translate(-50%, -50%) rotateZ(0deg);}

/* ----------------------------- #about ------------------------------- */
#about{ position: relative; padding: 60px 0; overflow: hidden;}
#about h2{ padding: 0 0 80px; }
#about .text_box{width: 504px; margin: 0 0px 0 auto; text-align: center; padding: 16px 0 48px;}
#about .item{position: absolute; left: calc(50% - 900px); top: 65%; transform: translate(0,-50%); }
#about .item.sp{ display: none; }
#about .text_box p{font-size: 22px; letter-spacing: 0.05em; text-align: center; line-height: 200%;}
#about .text_box p:not(:last-child){margin: 0 0 40px;}
#about .text_box p span.bg_tag{clip-path: polygon(3% 0, 100% 0%, 97% 100%, 0% 100%); background: linear-gradient( 75deg,#64ACEB,#F1BBE0); color: #fff; display: inline-block; padding: 6px 17px;}

/* ----------------------------- #talent_wanted ------------------------------- */
#talent_wanted{padding: 93px 0 0;}
#talent_wanted .talent_wanted_bg{background: linear-gradient(135deg, #64ACEB, #F1BBE0); padding: 98px 0 99px;}
#talent_wanted .talent_wanted_bg h2{color: #fff; line-height: 200%;}
#talent_wanted .talent_wanted_bg h2 span{background: none; color: #fff; -webkit-text-fill-color: #FFF; font-size: 68px;}
#talent_wanted .talent_wanted_bg .flex{ flex-direction: row-reverse; justify-content: space-between;}
#talent_wanted .talent_wanted_bg .flex .text p{text-align: center; font-size: 22px; line-height: 200%; color: #fff; letter-spacing: 0.04em; padding: 51px 0 0;}
#talent_wanted .talent_wanted_bg .flex .text a{background: #fff; width: 322px; display: block; padding: 19px 0 20px; margin: 63px auto 0; box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);}
#talent_wanted .talent_wanted_bg .flex .text a span{background: linear-gradient(to left,#F1BBE0,#64ACEB); font-family: 'Noto-Sans-JP-Bold'; font-size: 29px; line-height: 110%; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
#talent_wanted .talent_wanted_bg .flex .img_box{position: relative; width: 483px; }
#talent_wanted .talent_wanted_bg .flex .img_box img{ width: 100%; height: auto; }

/* ----------------------------- #manager_wanted ------------------------------- */
#manager_wanted{padding: 80px 0 0;}
#manager_wanted .flex{align-items: center;justify-content: space-between; padding: 53px 0 0;}
#manager_wanted .flex .text_box{}
#manager_wanted .flex .text_box p{font-size: 22px; letter-spacing: 0.05em; line-height: 200%; text-align: center;}
#manager_wanted .flex .text_box p:not(:last-child){padding: 0 0 50px;}

/* ----------------------------- #outline ------------------------------- */
#outline{padding: 109px 0 0;}
#outline .table_box{width: 941px; margin: 52px auto 0;}
#outline .table_box table{width: 100%;}
#outline .table_box table tr th,
#outline .table_box table tr td{border-bottom: 1px solid #000;font-family: 'Noto-Sans-JP-Regular'; line-height: 200%; text-align: left; padding: 30px 0;}
#outline .table_box table tr:first-child th,
#outline .table_box table tr:first-child td{border-top: 1px solid #000;}
#outline .table_box table tr th{width: 242px; height: auto}

/* ----------------------------- #contact ------------------------------- */
#contact{padding: 100px 0 128px;}
#contact .contact_bg{padding: 79px 0 81px; background: linear-gradient(140deg,#64ACEB,#F1BBE0); }
#contact .contact_bg h2{color: #fff;}
#contact .contact_bg h2 span{background: none; color: #fff; -webkit-text-fill-color: #FFF; font-size: 80px;}
#contact .contact_bg .intro{text-align: center; padding: 60px 0 0;font-family: 'Noto-Sans-JP-Regular';line-height: 207%;}
#contact .contact_bg .intro span{color: #FF0000;font-family: 'Noto-Sans-JP-Regular';}
#contact .contact_bg form{width: 901px; margin: 67px auto 0;}

#contact .contact_bg form table tr:not(:last-child) th,
#contact .contact_bg form table tr:not(:last-child) td{padding: 0 0 30px;}
#contact .contact_bg form table tr th{line-height: 200%; text-align: left; width: 231px; height: auto; line-height: 160%;}
#contact .contact_bg form table tr th span{color: #FF0000; }
#contact .contact_bg form table tr td{ width: 671px; height: auto; font-size: 14px; line-height: 200%; font-family: 'Noto-Sans-JP-Light';}
#contact .contact_bg form table tr td select{padding: 17px 25px; color: #000; font-size: 17px; width: 474px; border: 1px solid #D0D0D0; font-family: 'Noto-Sans-JP-Medium';}
#contact .contact_bg form table tr.slt td div{position: relative; display: inline-block;}
#contact .contact_bg form table tr.slt td div:before{content: ""; display: block; position: absolute; top: 50%; transform: translateY(-50%) rotateZ(45deg); width: 10px; height: 10px; border-right: 2px solid #707070; border-bottom: 2px solid #707070; right: 43px;}
#contact .contact_bg form table tr td input{width: 100%; height: auto; padding: 17px 25px; color: #000; font-size: 17px; border: 1px solid #D0D0D0; background: #FAFAFA; font-family: 'Noto-Sans-JP-Medium';}
#contact .contact_bg form table tr.top th{vertical-align: top; padding: 20px 0 30px;}
#contact .contact_bg form table tr.top td textarea{width: 671px; height: 248px;resize: none;}

#contact .contact_bg form .btns{ margin: 40px 0 0; }




@media only screen and (max-width: 768px) {
	

/* ----------------------------- #fv ------------------------------- */
	#fv { padding: 20px 0 0; }
	#fv .slider_btn{ width: 100%; }
	#fv .flex_slider img{ margin: 0 10px; width: 300px; }

	#fv .slider_btn button.slick-arrow{ width: 30px; height: 30px; }
	#fv .slider_btn { transform: translate(-50%,-50%); bottom: initial; top: 50%; }
	
	#fv .flex_slider{ padding: 0 0 20px; }
	#fv .flex_slider .slick-dots li{ width: 9px; height: 9px; margin: 0 20px!important; }

/* ----------------------------- #topics ------------------------------- */
	#topics{ padding: 50px 0 0; }
	#topics ul.topics_list{ width: 100%; padding-top: 20px; }
	#topics ul.topics_list li{ padding: 25px 0; border-bottom: 1px solid #000; }
	#topics ul.topics_list li .flex{ display: grid; grid-template-columns: 1fr auto; column-gap: 12px; }
	#topics ul.topics_list li .flex p.deta_box{ font-size: 17px; }
	#topics ul.topics_list li .flex p.deta_box span{ display: inline-block; margin-left: 14px; padding: 1px 10px 3px; min-width: auto; width: 115px; font-size: 12px; }
	#topics ul.topics_list li .flex p.deta_box span.pink{ background: #FFD9FC; }
	#topics ul.topics_list li .flex p.deta_box span.yellow{ background: #FFEE93; }
	#topics ul.topics_list li .flex p.text{ width: 90%; font-size: 12px; }
	#topics ul.topics_list li .flex p.text.clos_tt{ height: 27px; }
	#topics ul.topics_list li .flex p.clos_btn{ grid-column: 2 / 3; grid-row: 1 / 2; width: 38px; height: 38px; }
	#topics ul.topics_list li .flex p.clos_btn:before, #topics ul.topics_list li .flex p.clos_btn:after{ width: 15px; }

/* ----------------------------- #about ------------------------------- */
	#about{ padding: 50px 0; }
	#about h2{ padding-bottom: 14px; }
	#about .item{ position: relative; left: 50%; top: auto; transform: translateX(-50%); width: 100vw; max-width: 100vw; }
	#about .item.pc{ display: none; }
	#about .item.sp{ display: block; }
	#about .text_box{ width: 100%; padding: 30px 0 0; }
	#about .text_box p{ font-size: 14px; }
	#about .text_box p:not(:last-child){ margin-bottom: 23px; }
	#about .text_box p .bg_tag{ font-size: 14px; }
	
/* ----------------------------- #talent_wanted ------------------------------- */
	#talent_wanted{ padding: 0; }
	#talent_wanted .talent_wanted_bg{ padding: 50px 0; }
	#talent_wanted .talent_wanted_bg .flex{ flex-direction: column; align-items: stretch; }
	#talent_wanted .talent_wanted_bg h2{ padding: 0 0 20px; }
	#talent_wanted .talent_wanted_bg h2 span{ font-size: 37px; }
	#talent_wanted .talent_wanted_bg .flex .img_box{ width: 100%; }
	#talent_wanted .talent_wanted_bg .flex .text p{ font-size: 14px; padding: 20px 0 0; text-align: left; }
	#talent_wanted .talent_wanted_bg .flex .text a{ width: 90%; margin: 28px auto 0; padding: 22px 0; }
	#talent_wanted .talent_wanted_bg .flex .text a span{ font-size: 24px; }

/* ----------------------------- #manager_wanted ------------------------------- */
	#manager_wanted{ padding: 40px 0 0; }
	#manager_wanted h2 span{ font-size: 31px; }
	#manager_wanted .flex{ flex-direction: column; padding: 25px 0 0; }
	#manager_wanted .flex > img{ width: 100%; height: auto; }
	#manager_wanted .flex .text_box{ padding: 25px 0 0; }
	#manager_wanted .flex .text_box p{ font-size: 16px; text-align: left; }
	#manager_wanted .flex .text_box p:not(:last-child){ padding-bottom: 5px; }

/* ----------------------------- #outline ------------------------------- */
	#outline{ padding: 60px 0 50px; }
	#outline .table_box{ width: 100%; }
	#outline .table_box table tr th, #outline .table_box table tr td{ padding: 20px 0; font-size: 12px; }
	#outline .table_box table tr th{ width: 29%; }
	#outline .table_box{ margin: 20px auto 0; }

/* ----------------------------- #contact ------------------------------- */
	#contact{ padding: 40px 0 50px; background: linear-gradient(140deg,#64ACEB,#F1BBE0); }
	#contact .contact_bg{ background: none; padding: 0; }
	#contact .contact_bg h2 span{ font-size: 50px; }
	#contact .contact_bg .intro{ padding-top: 20px; font-size: 14px; line-height: 190%; text-align: left; }
	#contact .contact_bg form{ width: 100%; margin-top: 30px; }
	
	#contact .contact_bg form table tr, 
	#contact .contact_bg form table tr th, 
	#contact .contact_bg form table tr td{ display: block; width: 100%; }
	#contact .contact_bg form table tr th{ font-size: 14px; }
	
	#contact .contact_bg form table tr:not(:last-child) th{ padding-bottom: 5px; }
	#contact .contact_bg form table tr:not(:last-child) td{ padding-bottom: 11px; }
	#contact .contact_bg form table tr td{ font-size: 14px; line-height: 190%; }
	
	#contact .contact_bg form table tr td input, 
	#contact .contact_bg form table tr td select{ padding: 14px 16px; font-size: 12px; width: 100%; }
	
	#contact .contact_bg form table tr.slt td div{ width: 100%; }
	#contact .contact_bg form table tr.slt td div:before{ right: 16px; width: 8px; height: 8px; }
	#contact .contact_bg form table tr.top th{ padding: 8px 0 10px; }
	#contact .contact_bg form table tr.top td textarea{ width: 100%; height: 220px; }
	
	#contact .contact_bg form table tr:last-child td{ font-size: 11px; }
	.btns button{ width: 73%; padding: 21px 0 22px; margin: 35px auto 0; }



}