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

	Main Visual

--------------------------------------------------*/
#mv {overflow: hidden;padding-bottom: 5vw;}
#mv .container {position: relative;padding-bottom: 6vw;background: linear-gradient(90deg, #fff 30%, #000 30%);}
#mv .container::after {
	content: '';
	position: absolute;
	right: 9%;
	bottom: -5vw;
	z-index: 1;
	transform: translateX(50%);
	width: 55vw;
	height: 100%;
	background: url(../img/front/mv/bg_ZERO.svg) no-repeat right bottom / 100%;
}
#mv .mv_wrap {position: relative;z-index: 2;width: 80%;}
#mv .mv_wrap .image-crossfader {position: relative;z-index: -2;width: 100%;margin-left: auto;padding-top: 56.4%;overflow: hidden;}
#mv .mv_wrap .image-crossfader-inner {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	opacity: 0;
	transform: scale(1.2);
	transition:
	opacity 1.5s cubic-bezier(0.455, 0.03, 0.515, 0.955),
	transform 3.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
	background-size: cover;
	background-position: center;
}
#mv .mv_wrap .image-crossfader-inner:nth-of-type(1) {background-image: url("../img/front/mv/img_main.webp");}
#mv .mv_wrap .image-crossfader-inner.is-visible {z-index: 1;opacity: 1;transform: scale(1.02);}
#mv .txt_wrap {position: absolute;bottom: 12%;right: 3vw;z-index: 2;transform: translateY(-50%);width: 70%;}
#mv .txt_wrap h1 {margin-bottom: 2%;color: #fff;font-weight: 600;font-size: 2.5vw;line-height: 1.4;text-align: right;}
#mv .txt_wrap p {margin-right: 4vw;color: #fff;font-weight: 600;font-size: 1vw;text-align: right;}
@media only screen and ( max-width : 767px ) {
	#mv {padding-bottom: 0;}
	#mv .mv_wrap {position: relative;z-index: 2;width: 100%;}
	#mv .mv_wrap .image-crossfader {padding-top: 80vh;}
	#mv .txt_wrap {bottom: 2%;right: 2vw; width: 100%;}
	#mv .txt_wrap h1 {font-size: 6.5vw;}
	#mv .txt_wrap p {font-size: 4vw;}
	#mv .container {padding-bottom: 0;}
	#mv .container::after {background: none;}
	#mv .mv_wrap .image-crossfader-inner:nth-of-type(1) {background-image: url("../img/front/mv/sp_main.webp");}
	#mv .block {position: initial;transform: none;width: 90%;margin: 0 auto;padding: 0;}
	#mv .block figure {display: none;}
}
/*-------------------------------------------------

	About Us │ 当社について

--------------------------------------------------*/
#about_us {overflow: hidden;}
#about_us .container {flex-direction: row-reverse;}
#about_us .container figure {width: 32vw;margin: 0 calc(50% - 50vw);}
#about_us .container .wrap {width: 65%;gap: clamp(40px, calc(40px + 80 * ((100vw - 375px) / 1545)), 120px);}
#about_us .container .wrap .content {flex: 1;}
#about_us .container .wrap .content h3 {
	margin-bottom: clamp(30px, calc(30px + 20 * ((100vw - 375px) / 1545)), 50px);
	font-weight: 600;
	font-size: clamp(22px, calc(22px + 2 * ((100vw - 375px) / 1545)), 24px);
}
#about_us .container .wrap .content p {margin-bottom: clamp(40px, calc(40px + 130 * ((100vw - 375px) / 1545)), 170px);font-weight: 600;}
@media only screen and ( max-width : 1024px ) {
	#about_us .container .wrap {justify-content: center;gap: 0;}
	#about_us .container .wrap .content {flex: initial;width: 100%;}
}
@media only screen and ( max-width : 767px ) {
	#about_us .container figure {width: 100vw;margin-bottom: 30px;}
	#about_us .container .wrap {width: 100%;}
}
/*-------------------------------------------------

	Business │ 事業内容

--------------------------------------------------*/
#business {position: relative;padding-top: clamp(120px, calc(120px + 50 * ((100vw - 375px) / 1545)), 170px);background: linear-gradient(#fff 10%, #000 10%);}
#business::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 70%;
	height: 100%;
	background: url(../img/front/business/bg.webp) no-repeat top left / 100%;
}
#business .title_common h2 {color: #fff;}
#business .title_common p {color: #fff;}
#business .pr_wrap p {color: #fff;}
#business ul {margin-bottom: clamp(70px, calc(70px + 60 * ((100vw - 375px) / 1545)), 130px);}
#business ul li {position: relative;width: 50%;}
#business ul li:nth-child(1)::before {background-image: url(../img/front/business/thumbnail01.webp);}
#business ul li:nth-child(2)::before {background-image: url(../img/front/business/thumbnail02.webp);}
#business ul li a {display: block;padding-top: 50%;}
#business ul li a span {
	position: absolute;
	bottom: 10%;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	padding-top: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);
	color: #fff;
	font-weight: 600;
	font-size: clamp(22px, calc(22px + 2 * ((100vw - 375px) / 1545)), 24px);
	text-align: center;
}
#business ul li a span::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: clamp(7px, calc(7px + 6 * ((100vw - 375px) / 1545)), 13px);
	height: clamp(7px, calc(7px + 6 * ((100vw - 375px) / 1545)), 13px);
	background: #fff;
}
#business .view {text-align: center;}
@media only screen and ( max-width : 767px ) {
	#business ul li {width: 100%;}
}
/*-------------------------------------------------

	Company │ 会社概要

--------------------------------------------------*/
#company {position: relative;z-index: 2;padding-bottom: clamp(70px, calc(70px + 154 * ((100vw - 375px) / 1545)), 224px);overflow: hidden;}
#company .container figure {width: 32vw;margin: 0 calc(50% - 50vw);}
#company .container .wrap {width: 65%;gap: clamp(40px, calc(40px + 80 * ((100vw - 375px) / 1545)), 120px);}
#company .container .wrap .content {flex: 1;}
#company .container .wrap .content h3 {
	margin-bottom: clamp(30px, calc(30px + 20 * ((100vw - 375px) / 1545)), 50px);
	font-weight: 600;
	font-size: clamp(22px, calc(22px + 2 * ((100vw - 375px) / 1545)), 24px);
}
#company .container .wrap .content p {margin-bottom: clamp(40px, calc(40px + 130 * ((100vw - 375px) / 1545)), 170px);font-weight: 600;}
@media only screen and ( max-width : 1024px ) {
	#company .container .wrap {justify-content: center;gap: 0;}
	#company .container .wrap .content {flex: initial;width: 100%;}
}
@media only screen and ( max-width : 767px ) {
	#company .container figure {width: 100vw;margin-bottom: 30px;}
	#company .container .wrap {width: 100%;}
}
/*-------------------------------------------------

	Group Company │ グループ会社

--------------------------------------------------*/
#group_company {position: relative;background: #000;}
#group_company .bg {position: absolute;bottom: 0;left: 0;z-index: -1;}
#group_company .inner {max-width: 1108px;}
#group_company .title_common h2 {color: #fff;}
#group_company .title_common p {color: #fff;}
#group_company .container figure {width: 38%;}
#group_company .container .wrap {width: 50%;}
#group_company .container .wrap h3 {
	margin-bottom: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);
	color: #fff;
	font-weight: 600;
	font-size: clamp(22px, calc(22px + 6 * ((100vw - 375px) / 1545)), 28px);
}
#group_company .container .wrap .content {margin-bottom: clamp(20px, calc(40px + 20 * ((100vw - 375px) / 1545)), 40px);}
#group_company .container .wrap .content p {color: #fff;font-weight: 600;}
#group_company .container .wrap .content p:nth-of-type(1) {
	margin-bottom: 18px;
	font-weight: 400;
}
#group_company .container .wrap .content p span {
	margin-right: 15px;
	padding: 5px 24px;
	border: 1px solid #fff;
	border-radius: 5px;
	font-weight: 600;
	font-size: clamp(15px, calc(15px + 3 * ((100vw - 375px) / 1545)), 18px);
	text-align: center;
}
@media only screen and ( max-width : 767px ) {
	#group_company .container figure {width: 100%;margin-bottom: 30px;}
	#group_company .container .wrap {width: 100%;}
	#group_company .container .wrap .content p:nth-of-type(1) {margin-left: 0;}
	#group_company .container .wrap .content p span {display: inline-block;margin-bottom: 5px;}
}
/*-------------------------------------------------

	Recruit │ 採用情報

--------------------------------------------------*/
#recruit {overflow: hidden;background: #EFF1F2;}
#recruit .container {flex-direction: row-reverse;}
#recruit .container figure {width: 32vw;margin: 0 calc(50% - 50vw);}
#recruit .container .wrap {width: 65%;gap: clamp(40px, calc(40px + 80 * ((100vw - 375px) / 1545)), 120px);}
#recruit .container .wrap .content {flex: 1;}
#recruit .container .wrap .content h3 {
	margin-bottom: clamp(30px, calc(30px + 20 * ((100vw - 375px) / 1545)), 50px);
	font-weight: 600;
	font-size: clamp(22px, calc(22px + 2 * ((100vw - 375px) / 1545)), 24px);
}
#recruit .container .wrap .content p {margin-bottom: clamp(40px, calc(40px + 130 * ((100vw - 375px) / 1545)), 170px);font-weight: 600;}
@media only screen and ( max-width : 1024px ) {
	#recruit .container .wrap {justify-content: center;gap: 0;}
	#recruit .container .wrap .content {flex: initial;width: 100%;}
}
@media only screen and ( max-width : 767px ) {
	#recruit .container figure {width: 100vw;margin-bottom: 30px;}
	#recruit .container .wrap {width: 100%;}
}
/*-------------------------------------------------

	News

--------------------------------------------------*/
#news .title_common h2 {border-bottom: 1px solid #707070;}
#news .inner {max-width: 1156px;}
#news ul {
	gap: clamp(40px, calc(40px + 30 * ((100vw - 375px) / 1545)), 70px) 0;
	margin-bottom: clamp(40px, calc(40px + 20 * ((100vw - 375px) / 1545)), 60px);
}
#news ul li {position: relative;width: 40%;}
#news ul li dl dt {display: flex;align-items: center;gap: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);margin-bottom: 20px;}
#news ul li dl dt time {font-size: clamp(16px, calc(16px + 3 * ((100vw - 375px) / 1545)), 19px);}
#news ul li dl dt span {
	padding: 2px 20px 0;
	border: 1px solid #403733;
	font-size: clamp(12px, calc(12px + 2 * ((100vw - 375px) / 1545)), 14px);
	line-height: 1.4;
}
#news ul li dl dd {font-size: clamp(15px, calc(15px + 3 * ((100vw - 375px) / 1545)), 18px);}
@media only screen and ( max-width : 767px ) {
	#news ul li {width: 100%;}
}