@charset "utf-8";


/* ----------------------------------------------------------------------
  採用情報（TOP）
---------------------------------------------------------------------- */
#recruit_top {

	background:var(--recruit-base-color); padding:240px 120px 0px;

	#page_header_headline { color:#1e1f21; margin-bottom:80px; }

	@media (max-width: 1400px) {
		padding:240px 80px 0px;
	}
	@media (max-width: 1200px) {
		padding:160px 60px 0px;
		#page_header_headline { margin-bottom:70px; }
	}
	@media (max-width: 900px) {
		padding:160px 30px 0px;
	}
	@media (max-width: 767px) {
		padding:130px 15px 0px;
	}
	
}




/* ----------------------------------------------------------------------
  採用情報（TOP）　画像スライダー
---------------------------------------------------------------------- */
#recruit_image_carousel_wrap {

	margin:0 -120px 80px;

	.item { width:476px; height:auto; aspect-ratio:476 / 320; border-radius:15px; overflow:hidden; position:relative; }
	.item img { width:100%; height:100%; position:absolute; top:0; left:0; object-fit:cover; }

	@media (max-width: 1400px) {
		margin:0 -80px 80px;
		.item { width:420px; }
	}
	@media (max-width: 1200px) {
		margin:0 -60px 80px;
		.item { width:380px; }
	}
	@media (max-width: 900px) {
		margin:0 -30px 80px;
		.item { width:300px; border-radius:10px; }
	}	
	@media (max-width: 767px) {
		margin:0 -15px 50px;
		.item { width:250px; }
	}	

}




/* ----------------------------------------------------------------------
  採用情報（TOP）　代表者のメッセージ
---------------------------------------------------------------------- */
#recruit_ceo {

	max-width:1520px; margin:0 auto 240px; padding:0 80px;

	display:flex; flex-wrap:wrap; align-items:center;
	
	.image_area { width:30%; background:var(--tcd-base-color); padding:40px; border-radius:15px; }
	.image_area .image { margin-bottom:25px; }
	.image_area .position { font-size:clamp(16px, 1vw, 20px); line-height:1.4; margin-bottom:10px; }
	.image_area .name { font-size:clamp(24px, 2vw, 32px); line-height:1.3; }
	.content_area { width:70%; padding-left:120px; }
	.content_area .catch { font-size:clamp(30px, 2.5vw, 48px); line-height:1.3; }
	.content_area .desc { font-size:clamp(20px, 1.9vw, 32px); line-height:1.3; margin-top:40px; }

	@media (max-width: 1500px) {
		padding:0 40px;
		.image_area { padding:35px;}
		.content_area { width:70%; padding-left:80px; }
	}
	@media (max-width: 1200px) {
		padding:0; margin-bottom:180px;
		.image_area { padding:25px; }
		.image_area .position { font-size:15px; }
		.image_area .name { font-size:24px; }
		.content_area { padding-left:60px; }
	}
	@media (max-width: 900px) {
		flex-direction:column; flex-direction:column-reverse; gap:50px 0;
		.image_area { width:auto; max-width:360px; }
		.content_area { width:auto; padding:0; }
		.content_area .catch { font-size:clamp(25px, 8vw, 32px); }
		.content_area .desc { font-size:clamp(20px, 1.9vw, 24px); }
	}
	@media (max-width: 767px) {
		margin-bottom:120px;
		.image_area .image { margin-bottom:15px; }
		.image_area .position { margin-bottom:4px; }
		.content_area .catch { font-size:27px; }
		.content_area .desc { font-size:18px; margin-top:30px; }
	}
	
}




/* ----------------------------------------------------------------------
  採用情報（TOP）　職種
---------------------------------------------------------------------- */
#recruit_job {

	margin-bottom:240px;
	
	.headline {
		text-align:center; line-height:1; margin-top:-0.15em; padding-bottom:0.1em;
		font-family:var(--tcd-font-headline); font-size:clamp(80px, 8vw, var(--job-headline-font-size-pc));
	}
	.sub_headline { font-size:24px; line-height:1.5; text-align:center; margin-bottom:calc(0.5em - 0.5lh); }
	.no_job { text-align:center; font-weight:600; margin-top:180px; font-size:clamp(20px, 1.6vw, 32px); }
	
	.job_list {

		display:flex; flex-wrap:wrap; gap:85px 40px; margin:90px auto 0; max-width:1680px;
		&:not(:has(.item:nth-child(4))) { justify-content:center; }
		
		.item { width:calc((100% - (40px * 3)) / 4); display:flex; flex-direction:column; }
		.content { background:var(--tcd-base-color); padding:45px 40px; border-radius:15px; flex-grow:1; display:flex; flex-direction:column; justify-content:flex-start; }
		.title { font-size:clamp(18px, 1.25vw, 21px); line-height:1.5; margin-bottom:25px; }
		.desc { font-size:16px; line-height:1.6; margin-bottom:70px; }
		.meta { margin-top:auto; display:flex; flex-direction:column; gap:15px 0; }
		.meta dt { position:relative; padding-left:25px; font-size:15px; }
		.meta dd { line-height:1.4; font-size:13px; margin-top:-8px; }
		.job_type:before { content:''; mask:var(--tcd-icon--bag) no-repeat center / contain; width:1em; height:1em; background:#000; position:absolute; top:-3px; left:0px; font-size:22px; z-index:2; }
		.job_location:before { content:''; mask:var(--tcd-icon--pin) no-repeat center / contain; width:1em; height:1em; background:#000; position:absolute; top:-2px; left:0px; font-size:22px; z-index:2; }
		.design_button { margin-top:20px; width:100%; }

	}

	@media (max-width: 1500px) {
		.job_list {
			gap:70px 30px;
			.item { width:calc((100% - (30px * 3)) / 4); }
			.content { padding:35px 30px; }
			.meta { font-size:14px; }
			.job_type:before { top:-4px;}
			.job_location:before { top:-3px;}
		}
	}
	@media (max-width: 1300px) {
		.job_list {
			gap:85px 40px;
			.item { width:calc((100% - 40px) / 2); }
			.content { padding:45px 40px; }
			.title { font-size:clamp(18px, 2vw, 21px); }
		}
	}
	@media (max-width: 1200px) {
		margin-bottom:180px;
		.no_job { margin-top:90px; }
	}
	@media (max-width: 1000px) {
		.job_list {
			gap:60px 30px;
			.item { width:calc(50% - 15px); }
			.item { width:calc((100% - 30px) / 2); }
		}
	}
	@media (max-width: 767px) {
		margin-bottom:120px;
		.headline { font-size:clamp(50px, 10vw, var(--job-headline-font-size-sp)); }
		.sub_headline { font-size:20px; }
		.no_job { margin-top:75px; }
		.job_list {
			flex-direction:column; gap:50px 0; margin-top:60px;
			.item { width:auto; }
			.content { border-radius:10px; padding:35px 30px; }
			.desc { font-size:15px; margin-bottom:40px; }
		}
	}
	
}




/* ----------------------------------------------------------------------
  採用情報（TOP）　仕事場の環境
---------------------------------------------------------------------- */
#recruit_work_space {
	
	margin-bottom:120px;

	.headline {
		text-align:center; line-height:1; margin-top:-0.15em; padding-bottom:0.1em;
		font-family:var(--tcd-font-headline); font-size:clamp(80px, 8vw, var(--work-space-headline-font-size-pc));
	}
	.sub_headline { font-size:24px; line-height:1.5; text-align:center; margin-bottom:calc(0.5em - 0.5lh); }
	.header_desc { font-size:clamp(20px, 1.6vw, 32px); line-height:1.5; text-align:center; margin-bottom:calc(0.5em - 0.5lh); margin-top:180px; font-weight:600; }

	.featured_list {
	
		display:flex; flex-wrap:wrap; gap:85px 40px; margin:170px auto 0; max-width:1500px;
		
		.item { width:calc((100% - (40px * 2)) / 3); flex:0 0 auto; }
		.num { display:block; line-height:1; margin-top:-0.15em; padding-bottom:0.1em; font-family:var(--tcd-font-headline); font-size:clamp(45px, 3.1vw, 60px); margin-bottom:20px; }
		.title { font-size:clamp(24px, 1.6vw, 32px); line-height:1.3; margin-top:calc(0.5em - 0.5lh); margin-bottom:calc(0.5em - 0.5lh);}
		.desc { font-size:17px; line-height:1.6; margin-bottom:calc(0.5em - 0.5lh); margin-top:25px; }

	}

	@media (max-width: 1300px) {
		.featured_list .item { width:calc((100% - (40px * 1)) / 2); }
	}
	@media (max-width: 1200px) {
		.header_desc { margin-top:90px; }
		.featured_list { margin-top:90px; }
	}
	@media (max-width: 767px) {
		margin-bottom:60px;
		.header_desc { margin-top:75px; text-align:left; }
		.headline { font-size:clamp(50px, 10vw, var(--work-space-headline-font-size-sp)); }
		.sub_headline { font-size:20px; }
		.featured_list {
			flex-direction:column; gap:60px 0; margin-top:80px;
			.item { width:auto; }
			.num { font-size:56px; }
			.desc { font-size:15px; margin-top:12px; }
		}
	}
	
}




/* ----------------------------------------------------------------------
  採用情報（TOP）　インタビュー・動画
---------------------------------------------------------------------- */
#recruit_interview_video {

	background:#171918; margin:0 -120px; padding:120px 120px; 
	
	.headline {
		text-align:center; line-height:1; margin-top:-0.15em; padding-bottom:0.1em; margin-bottom:20px;
		color:var(--recruit-base-color); font-family:var(--tcd-font-headline);
	}
	.interview_area .headline { font-size:clamp(100px, 8vw, var(--interview-headline-font-size-pc)); }
	.interview_area { margin-bottom:120px; }
	.video_area .headline { font-size:clamp(100px, 8vw, var(--video-headline-font-size-pc)); }

	@media (max-width: 1400px) {
		padding:120px 80px; margin:0 -80px;
	}
	@media (max-width: 1200px) {
		padding:120px 60px; margin:0 -60px;
	}
	@media (max-width: 900px) {
		padding:120px 30px; margin:0 -30px;
	}	
	@media (max-width: 767px) {
		padding:60px 15px; margin:0 -15px;
		.headline { margin-bottom:40px; }
		.interview_area .headline { font-size:clamp(50px, 10vw, var(--interview-headline-font-size-sp)); }
		.interview_area { margin-bottom:80px; }
		.video_area .headline { font-size:clamp(50px, 10vw, var(--video-headline-font-size-sp)); }
	}	

	
	/* インタビュー */
	.interview_list {

		max-width:1250px; margin:auto;

		.item { border-radius:15px; overflow:hidden; background:#35393c; }
		.item a { display:block; }
		.item .image { display:block; width:100%; height:auto; aspect-ratio:600 / 800; position:relative; overflow:hidden; }
		.item .image img { display:block; position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease; transform:scale(1); }
		.item .content { padding:30px 40px; }
		.item .job { font-size:15px; line-height:1.4; color:var(--recruit-base-color); margin-top:calc(0.5em - 0.5lh); transition:color 0.3s ease; }
		.item .catch { font-size:20px; line-height:1.4; color:var(--tcd-base-color); margin-bottom:calc(0.5em - 0.5lh); margin-top:10px; transition:color 0.3s ease; }
		
		@media(hover: hover) {
			.item a:hover .image img { transform:scale(1.05); }
			.item a:hover .job { color:var(--tcd-hover-color); }
			.item a:hover .catch { color:var(--tcd-hover-color); }
		}
		@media (max-width: 1100px) {
			.item .content { padding:35px 30px; }
			.item .job { font-size:14px; }
			.item .catch { font-size:17px; }
		}
		@media (max-width: 900px) {
			.splide__track { overflow:visible !important; }
			.item { width:277px !important; border-radius:10px; }
			.item .content { padding:25px 20px; }
			.item .image { aspect-ratio:1 /1; }
			.item .job { font-size:13px; }
			.item .catch { font-size:15px; }
		}

	}

	
	/* 動画 */
	.video_list {

		max-width:1335px; margin:auto;

		.item { border-radius:15px; overflow:hidden; background:#35393c; }
		.item a { display:block; position:relative; }
		.item .image { display:block; width:100%; height:auto; aspect-ratio:1000 / 563; position:relative; overflow:hidden; }
		.item .image img { display:block; position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease; transform:scale(1); }
		.item .image:before { content:''; display:block; width:70px; height:70px; background:var(--recruit-base-color); border-radius:100%; position:absolute; z-index:2; left:50%; top:50%; transform: translate(-50%, -50%); transition:background-color 0.3s ease; }
		.item .image:after { content:''; display:block; width:23px; height:30px; clip-path: polygon(100% 50%, 0% 0%, 0% 100%); background:#171918; transform: rotate(0deg); position:absolute; z-index:3; left:calc(50% + 2px); top:calc(50% + 2px); transform: translate(-50%, -50%); transition:background-color 0.3s ease; }
		.item .content { padding:30px 40px; }
		.item .product_name { font-size:15px; line-height:1.4; color:var(--recruit-base-color); margin-top:calc(0.5em - 0.5lh); transition:color 0.3s ease; }
		.item .title { font-size:20px; line-height:1.4; color:var(--tcd-base-color); margin-bottom:calc(0.5em - 0.5lh); margin-top:10px; transition:color 0.3s ease; }
		
		@media(hover: hover) {
			.item a:hover .image img { transform:scale(1.05); }
			.item a:hover .product_name { color:var(--tcd-hover-color); }
			.item a:hover .title { color:var(--tcd-hover-color); }
			.item a:hover .image:before { background:var(--tcd-hover-color); }
			.item a:hover .image:after { background:var(--tcd-base-color); }
		}
		@media (max-width: 900px) {
			.splide__track { overflow:visible !important; }
			.item { width:calc(50vw - 20px) !important; min-width:310px ; border-radius:10px; }
			.item .content { padding:25px 20px; }
			.item .product_name { font-size:13px; }
			.item .title { font-size:15px; }
			.item .image:before { width:30px; height:30px; }
			.item .image:after { width:9px; height:11px; left:calc(50% + 1px); top:50%; }
		}

	}
		
	.splide__arrows { height:100%; }
	.splide__arrow { background:#35393c; }
	.splide__arrow:before { background:var(--tcd-base-color); }
	.splide__arrow--prev { left:-100px; }
	.splide__arrow--next { right:-100px; }
	@media(hover: hover) {
		.splide__arrow:hover { background:var(--tcd-hover-color); }
		.design_button:hover:after { background:var(--tcd-hover-color); }
	}
	@media (max-width: 900px) {
		.splide__arrows { display:none; }
		.splide_scrollbar_mobile_only { display:block; }
	}

}




/* ----------------------------------------------------------------------
  採用情報（TOP）　FAQ
---------------------------------------------------------------------- */
#recruit_faq {
	
	padding:120px 0; display:flex; flex-wrap:wrap; max-width:1500px; margin:auto;

	.headline_area {

		width:50%;

		.headline {
			line-height:1; margin-top:-0.15em; padding-bottom:0.1em; margin-bottom:70px;
			font-family:var(--tcd-font-headline); font-size:clamp(100px, 8vw, var(--faq-headline-font-size-pc)); 
		}
		.desc { margin-bottom:20px; font-size:clamp(20px, 1.2vw, 24px); line-height:1.5; margin-top:calc(0.5em - 0.5lh); }
		.design_button { margin:0; }

	}
	.faq_area {

		width:50%;
	
		.faq_headline { font-size:24px; line-height:1; margin-bottom:30px; }
		.message { padding-top:25px; line-height:1.6; border-top:1px solid #171918; }

	}
	@media (max-width: 1100px) {
		flex-direction:column; gap:120px 0;
		.headline_area { width:auto; }
		.faq_area { width:auto; }
	}
	@media (max-width: 767px) {
		padding:60px 0; gap:80px 0;
		.headline_area  {
			.headline { font-size:clamp(50px, 10vw, var(--faq-headline-font-size-sp)); margin-bottom:40px; }
			.desc { font-size:18px; }
		}
		.faq_area {
			.faq_headline { font-size:20px; }
		}
	}	

}
#recruit_footer_image { width:auto; margin:0 -120px; overflow:hidden; position:relative; }
#recruit_footer_image img { width:100%; height:auto; }




/* ----------------------------------------------------------------------
  インタビュー
---------------------------------------------------------------------- */
#interview_single {

	background:var(--recruit-base-color); padding:100px 120px 120px;
	.post_content { background:var(--tcd-base-color); max-width:820px; margin:auto; padding:85px 80px; border-radius:15px; }
	.design_button.reverse { margin-top:80px; }
	
	@media (max-width: 1450px) {
		padding:100px 80px 120px;
	}
	@media (max-width: 1200px) {
		padding:50px 60px 120px;
	}
	@media (max-width: 900px) {
		padding:50px 30px 120px;
	}
	@media (max-width: 767px) {
		padding:50px 15px 60px;
		.post_content { padding:60px 15px; margin:0 -15px; border-radius:10px; }
		.design_button.reverse { margin-top:40px; }
	}
	
}
#interview_header {
	
	max-width:1160px; margin:120px auto 80px; display:flex; flex-wrap:nowrap;

  .content { width:75%; padding-right:90px; }
	.headline { font-size:20px; line-height:1; margin-bottom:25px; }
	.catch { font-size:clamp(27px, 2.5vw, 38px); line-height:1.3; font-weight:600; margin:0 0 75px 0; }
	.name { font-size:clamp(24px, 2vw, 32px); line-height:1; }
	.job { font-size:20px; line-height:1.4; margin-top:10px; }
	.desc { font-size:17px; line-height:1.6; margin-top:25px; }
	.image { width:25%; display:block; }
	.image img { border-radius:15px; }

	@media (max-width: 1200px) {
		.headline { font-size:18px; }
		.job { font-size:18px; }
		.desc { font-size:16px; }
	}
	@media (max-width: 1000px) {
		.content { width:70%; padding-right:50px; }
		.image { width:30%; }
	}
	@media (max-width: 767px) {
		flex-direction:column; gap:40px 0; margin:35px 0 60px;
		.content { width:auto; padding:0; }
		.image { width:auto; max-width:320px; margin:auto; }
		.image img { border-radius:10px; }
		.headline { font-size:16px; margin-bottom:10px; }
		.catch { margin-bottom:35px; }
		.job { font-size:16px; }	
		.desc { font-size:15px; }
	}
	
}




/* ----------------------------------------------------------------------
  職種
---------------------------------------------------------------------- */
#job_single {

	background:var(--recruit-base-color); padding:100px 120px 120px;
	.page_breadcrumb { margin-bottom:120px; }
	.mobile_button_area { display:none; }
	
	@media (max-width: 1450px) {
		padding:100px 80px 120px;
	}
	@media (max-width: 1200px) {
		padding:50px 60px 120px;
	}
	@media (max-width: 900px) {
		padding:50px 30px 120px;
	}
	@media (max-width: 767px) {
		padding:50px 15px 60px;
		.page_breadcrumb { margin-bottom:30px; }
		.mobile_button_area { display:block; margin-top:40px; }
	}

	@media (min-width: 768px) {
		#recruit_image_carousel_wrap {
			width:auto; margin:0 0 120px;
			#recruit_image_carousel { visibility:visible; }
			.splide__list { display:flex; flex-wrap:nowrap; gap:0 40px; }
			.item { width:calc((100% - (40px * 2)) / 3); height:auto; aspect-ratio:476 / 320; border-radius:15px; overflow:hidden; position:relative; }
			.item img { width:100%; height:100%; position:absolute; top:0; left:0; object-fit:cover; }
		}
	}
	@media (min-width: 768px) and (max-width: 1200px) {
		#recruit_image_carousel_wrap {
			.splide__list { gap:0 30px; }
			.item { width:calc((100% - (30px * 2)) / 3) };
		}
	}
	
}
#job_image_list {

	display:flex; flex-wrap:nowrap; gap:0 40px; margin:0 auto 120px; max-width:1500px; 

	img { border-radius:15px; display:block; }

}
#split_content {

	display:flex; flex-wrap:nowrap; position:relative; max-width:1500px; margin:auto;

	.information {
		.meta { margin-top:auto; display:flex; flex-direction:column; gap:20px 0; }
		.meta dt { position:relative; font-size:17px; padding-left:30px; font-weight:600; }
		.meta dd { font-size:15px; line-height:1.4; margin-top:-10px;}
		.job_type:before { content:''; mask:var(--tcd-icon--bag) no-repeat center / contain; width:1em; height:1em; background:#000; position:absolute; top:-3px; left:0px; font-size:24px; z-index:2; }
		.job_location:before { content:''; mask:var(--tcd-icon--pin) no-repeat center / contain; width:1em; height:1em; background:#000; position:absolute; top:-2px; left:0px; font-size:24px; z-index:2; }
		.job_num:before { content:''; mask:var(--tcd-icon--people) no-repeat center / contain; width:1em; height:1em; background:#000; position:absolute; top:-3px; left:0px; font-size:24px; z-index:2; }
		.job_time:before { content:''; mask:var(--tcd-icon--clock) no-repeat center / contain; width:1em; height:1em; background:#000; position:absolute; top:-2px; left:0px; font-size:24px; z-index:2; }
		.design_button { margin:70px 0 0 0; }
	}

	@media (max-width: 767px) {
		.information {
			.meta { gap:15px 0; margin-top:40px; }
			.meta dt { font-size:15px; padding-left:25px; }
			.meta dd { font-size:13px; }
			.job_type:before { font-size:20px; }
			.job_location:before { font-size:20px; }
			.job_num:before { font-size:20px; }
			.job_time:before { font-size:20px; }
			.design_button { display:none; }
		}
	}

}




/* END TRIGGER recruit.css */