@charset "utf-8";
.flex{display: flex;}
h3{font-size: 20px; font-family: 'Noto-Sans-JP-Medium'; line-height: 160%;}
h3 span{font-size: 115px; font-family: "alternate-gothic-no-3-d", sans-serif; font-weight: 400; font-style: normal;}

main{padding: 100px 0 0;}

.link_btn{width: 360px; height: auto;}
.link_btn a{display: block; background: #000; position: relative; color: #fff; text-align: center; font-size: 18px; font-family: 'Noto-Sans-JP-Medium'; line-height: 145%; padding: 21px 0;}
.link_btn a:before{content: ""; display: block; position: absolute; right: 21px; top: 50%; transform: translateY(-50%); width: 8px; height: 15px; background: url(../images/common/aro_icn.svg) no-repeat center center; background-size: 100%;}
/* ----------------------------- #fv ------------------------------- */
#fv{background: url(../images/top/fv_bg.jpg?var=1234567) no-repeat top center #000; background-size: cover; position: relative; width: 100%; padding: 448px 50px 82px;}
#fv h2{font-family: "alternate-gothic-no-3-d", sans-serif; font-weight: 400; font-style: normal; color: #fff; letter-spacing: 0.03em; font-size: 34px; line-height: 153%;}
#fv h2 span{letter-spacing: 0; font-size: 81px; font-family: 'Noto-Sans-JP-Bold'; color: #fff; line-height: 121%; display: inline-block; padding: 0px 0 20px;}
#fv p{font-family: neue-haas-grotesk-display, sans-serif; font-weight: 500; font-style: normal; color: #fff; font-size: 12px;transform: rotateZ(-90deg) translateY(-50%); top: 50%; right: -50px; position: absolute;}

/* ----------------------------- #about ------------------------------- */
#about{background: url(../images/top/about_bg.jpg?var=1234567) no-repeat center center; background-size: cover; padding: 150px 0 164px;}
#about .box{width: 541px; margin: 0 0 0 auto; text-align: left:}
#about .box h3{color: #fff;}
#about .box .text_box{color: #fff; padding: 43px 0 0;}
#about .box .text_box h4{font-family: 'Noto-Sans-JP-Bold'; font-size: 32px; line-height: 188%;}
#about .box .text_box p{font-size: 16px; line-height: 225%; padding: 16px 0 0;}

/* ----------------------------- #service ------------------------------- */
#service{padding: 138px 0 0;}
#service h3{text-align: center;}
#service h3 span{font-size: 105px; }
#service .flex{justify-content: space-between; padding: 69px 0 0;}
#service .flex .box{width: 380px; height: auto; background: url(../images/top/service_bg.jpg?var=1234567) no-repeat center center; background-size: cover; position: relative; padding: 67px 45px 44px;}
#service .flex .box .service_logo{transform: translateX(-50%); left: 50%; top: -26px; position: absolute;}
#service .flex .box h4{text-align: center; font-size: 27px; font-family: 'Noto-Sans-JP-Bold'; line-height: 160%;}
#service .flex .box .service_img{text-align: center; width: 100%; padding: 34px 0 0;}
#service .flex .box .service_img img{display: inline-block;}
#service .flex .box p{ line-height: 188%; padding: 46px 0 0;}
#service .link_btn{margin: 63px auto 0; }

/* ----------------------------- #company ------------------------------- */
#company{padding: 129px 0 0;}
#company .company_box{padding: 0 50px;}
#company .company_box .flex{align-items: center;}
#company .company_box .flex .company_img{width: 50%; height: auto;}
#company .company_box .flex .box{width: 50%; height: auto;}
#company .company_box .flex .box .text_box{width: 473px; margin: 0 0 0 auto;}
#company .company_box .flex .box .text_box h3 span{font-size: 100px; }
#company .company_box .flex .box .text_box p{font-size: 16px; line-height: 225%; padding: 28px 0 0;}
#company .company_box .flex .box .text_box .link_btn{margin: 52px 0 0; }

/* ----------------------------- #recruit ------------------------------- */
#recruit{position: relative; padding: 146px 0 0;}
#recruit:before{content: ""; display: block; width: calc(100% - 50px); height: 486px; position: absolute; left: 0px; bottom: 0px; background: #F5F5F5;}
#recruit .recruit_box{align-items: flex-end; justify-content: space-between; max-width: 1600px; margin: 0 auto; padding: 0 113px 47px 0; position: relative; z-index: 1;}
#recruit .recruit_box .box{width: 360px; padding: 0 0 82px; margin: 0 0 0 114px;}
#recruit .recruit_box .box h3 span{font-size: 100px;}
#recruit .recruit_box .box p{padding: 24px 0 0; font-size: 16px; line-height: 188%;}
#recruit .recruit_box .box .link_btn{margin: 55px 0 0; }
#recruit .recruit_box .img_box{max-width: 1013px; height: 505px; overflow: hidden;}
#recruit .recruit_box .img_box img{width: 100%; height: 100%; object-fit: cover;}

/* ----------------------------- #contact ------------------------------- */
#contact{padding: 104px 0 106px;}
#contact .contact_box{width: 100%; height: auto; background: #F7F7F7; }
#contact .contact_box .flex{padding: 63px 50px 67px 47px; align-items: center;}
#contact .contact_box .flex h3 span {font-size: 87px; display: block;}
#contact .contact_box .flex .text{ width: 434px; margin: 0 0 0 auto;}
#contact .contact_box .flex .text h4{font-size: 29px; line-height: 160%; font-family: 'Noto-Sans-JP-Bold';}
#contact .contact_box .flex .text p{font-size: 16px; line-height: 188%; padding: 15px 0 0;}
#contact .contact_box .flex .link_btn{width: 308px; margin:0 0 0 54px;}


@media only screen and (max-width: 768px) {
	.flex{display: block;}
	h3{font-size: 16px; line-height: 160%;}
	h3 span{font-size: 60px; }
	
	main{padding: 58px 0 0;}
	
	.link_btn{width: 82.35%; height: auto;}
	.link_btn a{font-size: 16px; line-height: 150%; padding: 9px 0;}
	.link_btn a:before{right: 21px; width: 8px; height: 15px;}
	/* ----------------------------- #fv ------------------------------- */
	#fv{background: url(../images/top/fv_bg_sp_2.jpg?var=1234567) no-repeat center center; background-size: cover; height: calc(100dvh - 58px); position: relative; padding: 0px;}
	#fv h2{font-size: 20px; line-height: 100%; position: absolute; bottom: 5%; left: 5%;}
	#fv h2 span{font-size: 37px; line-height: 122%; padding: 0px 0 20px;}
	#fv p{display: none;}
	
	/* ----------------------------- #about ------------------------------- */
	#about{background: url(../images/top/about_bg_sp.jpg?var=1234567) no-repeat center center; background-size: cover; padding: 60px 0 38px;}
	#about .box{width: 100%; margin: 0 0 0 auto; text-align: left:}
	#about .box .text_box{padding: 15px 0 0;}
	#about .box .text_box h4{font-size: 22px; line-height: 160%;}
	#about .box .text_box p{font-size: 14px; line-height: 200%; padding: 62px 0 0;}
	
	/* ----------------------------- #service ------------------------------- */
	#service{padding: 62px 0 0;}
	#service h3 span{font-size: 60px; }
	#service .flex{padding: 30px 0 0;}
	#service .flex .box{width: 100%; height: auto; background: url(../images/top/service_bg_sp.jpg?var=1234567) no-repeat center center; background-size: cover; padding: 18px 30px 28px 26px;}
	#service .flex .box:not(:first-child){margin: 27px 0 0 ;}
	#service .flex .box .service_logo{ top: -7px; width: 52px; height: auto; transform: none; left: 15px;}
	#service .flex .box h4{font-size: 19px; line-height: 160%;}
	#service .flex .box .service_img{width: 128px; padding: 16px 0 0; margin: 0 auto;}
	#service .flex .box p{ line-height: 172%; padding: 11px 0 0; font-size: 14px;}
	#service .link_btn{margin: 18px auto 0; }
	
	/* ----------------------------- #company ------------------------------- */
	#company{padding: 80px 0 0;}
	#company .company_box{padding: 30px 0 0;}
	#company .company_box .flex{align-items: center;}
	#company .company_box .flex .company_img{width: 81.5%; margin: 0 auto;}
	#company .company_box .flex .box{width: 100%; height: auto;}
	#company .company_box .flex .box .text_box{width: 100%; margin: 0 0 0 auto;}
	#company h3{text-align: center;}
	#company h3 span{font-size: 60px; text-align: center; }
	#company .company_box .flex .box .text_box p{font-size: 14px; line-height: 200%; padding: 28px 0 0;}
	#company .company_box .flex .box .text_box .link_btn{margin: 30px auto 0; }
	
	/* ----------------------------- #recruit ------------------------------- */
	#recruit{ padding: 80px 0 0;}
	#recruit:before{width: calc(100% - 75px); height: auto; left: auto; right: 0px; padding: 47.45% 0 0; bottom: auto; top: 148px;}
	#recruit .recruit_box{ padding: 0 0 0; }
	#recruit .recruit_box .box{width: 90%; padding: 15px 0 0px; margin: 0 auto;}
	#recruit .recruit_box .box h3{text-align: center;}
	#recruit .recruit_box .box h3 span{font-size: 60px;}
	#recruit .recruit_box .box p{padding: 20px 0 0; font-size: 14px; line-height: 200%;}
	#recruit .recruit_box .box .link_btn{margin: 30px auto 0; }
	#recruit .recruit_box .img_box{max-width: 95%; height: auto; }
	#recruit .recruit_box .img_box img{width: 100%; height: auto; object-fit: cover;}
	
	/* ----------------------------- #contact ------------------------------- */
	#contact{padding: 60px 0;}
	#contact .contact_box{width: 100%; height: auto; }
	#contact .contact_box .flex{padding: 40px 5% 40px;}
	#contact .contact_box .flex h3{text-align: center;}
	#contact .contact_box .flex h3 span {font-size: 60px; margin: 0 0 0;}
	#contact .contact_box .flex .text{margin: 0; width: 100%;}
	#contact .contact_box .flex .text h4{font-size: 18px; line-height: 160%; text-align: center; padding: 30px 0 0;}
	#contact .contact_box .flex .text p{font-size: 14px; line-height: 200%; padding: 5px 0 0;}
	#contact .contact_box .flex .link_btn{width: 82.35%; margin: 40px auto 0;}

}