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

/*==============================*/
/* Main Visual */
/*==============================*/
section.mainVisual{
	--parallax-y: 0px;
	position: relative;
	width: 100%;
	height: 760px;
	aspect-ratio: 2100 / 795;
	overflow: hidden;
	background: #aaa;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		section.mainVisual{
			height: 560px;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		section.mainVisual{
			aspect-ratio: auto;
			height: 560px;
		}
	}


/*---------------------------------
	Parallax
---------------------------------*/
div.mainVisual-parallax{
	position: absolute; top: -50%; left: 0;
	width: 100%;
	height: 200%;
	transform: translate3d(0, var(--parallax-y), 0);
	will-change: transform;
}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.mainVisual-parallax{
			top: 0;
			height: 100%;
			transform: none;
			will-change: auto;
		}
	}


/*---------------------------------
	Movie
---------------------------------*/
div.mainVisual-movie{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #aaa url("/common/img/main/movie-cover.webp") center / cover no-repeat;
	pointer-events: none;
	container-type: size;
}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.mainVisual-movie{
			display: none;
		}
	}

div.mainVisual-movie iframe{
	position: absolute; top: 50%; left: 50%;
	width: max(100cqw, 177.7778cqh);
	height: max(100cqh, 56.25cqw);
	border: none;
	transform: translate(-50%, -50%);
	pointer-events: none;
}


/*---------------------------------
	Slider設定
---------------------------------*/
div.mainVisual-slider{
	display: none;
}
div.mainVisual-slider figure{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	transition: opacity 1s ease-in-out;
}
div.mainVisual-slider figure img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.mainVisual-slider{
			position: absolute;
			inset: 0;
			display: block;
			width: 100%;
			height: 100%;
			overflow: hidden;
			background: #aaa;
		}
		div.mainVisual-slider figure:first-child{ opacity: 1; }
		div.mainVisual-slider figure.active{ opacity: 1;}
		div.mainVisual-slider figure.fade-out{ opacity: 0;}
	}


/*---------------------------------
	Content
---------------------------------*/
div.mainVisual-content{
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
	padding: 0 17.4%;
	box-sizing: border-box;
	pointer-events: none;
	z-index: 10;
}
div.mainVisual-content div.mainVisual-box{
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	padding: 0 0 0 80px;
	box-sizing: border-box;
	pointer-events: auto;
}
div.mainVisual-content div.mainVisual-box::before{
	position: absolute; top: 50%; left: 0;
	content: "";
	width: 264px;
	aspect-ratio: 1;
	background: rgba(255,255,255,0.7);
	transform: translateY(-50%);
	z-index: -1;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.mainVisual-content{ padding: 0 12%;}
		div.mainVisual-content div.mainVisual-box{
			padding: 0 0 0 56px;
		}
		div.mainVisual-content div.mainVisual-box::before{ width: 200px;}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.mainVisual-content{ padding: 0 8%;}
		div.mainVisual-content div.mainVisual-box{
			padding: 0;
		}
		div.mainVisual-content div.mainVisual-box::before{
			position: absolute; top: 50%; left: 50%;
			width: 200px;
			transform: translateY(-50%) translateX(-50%);
		}
	}


/*-- Title
------------------------- */
div.mainVisual-box h1{
	color: #333;
	font-size: clamp(28px, 3vw, 44px);
	font-weight: 300;
	font-family: "Jost", sans-serif;
	line-height: 1.3em;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.mainVisual-box h1{
			font-size: 34px;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.mainVisual-box h1{
			font-size: 20px;
			text-align: center;
		}
	}


/*---------------------------------
	Reduced Motion
---------------------------------*/
@media (prefers-reduced-motion: reduce) {
	div.mainVisual-parallax{
		transform: none;
		will-change: auto;
	}

	div.mainVisual-slider figure{
		transition: none;
	}
}





/*==============================*/
/* Catchcopy */
/*==============================*/
div.topCatchcopy{
	text-align: center;
}
div.topCatchcopy h2{
	margin-bottom: 28px;
	padding-bottom: 14px;
	border-bottom: 1px solid #b3b3b3;
	font-size: 30px;
	font-weight: 600;
	font-family: "A1 Mincho", serif;
	line-height: 1.618em;
}
div.topCatchcopy p:nth-child(2){
	position: relative;
	margin-bottom: 40px;
}

div.topCatchcopy p:nth-child(2)::after{
	position: absolute; bottom: -24px; left: 50%;
	content: "";
	width: 12px;
	height: 12px;
	background: #40496A;
	border-radius: 50%;
	transform: translateX(-50%);
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.topCatchcopy{
			text-align: center;
		}
		div.topCatchcopy h2{
			margin-bottom: 28px;
			padding-bottom: 20px;
			font-size: 24px;
			line-height: 1.414em;
		}
		
		div.topCatchcopy p{
			font-size: 14px;
			letter-spacing: 0.01em;
		}
		
		div.topCatchcopy p:nth-child(2){ margin-bottom: 40px;}
	}



/*==============================*/
/* Service Visual */
/*==============================*/
section.serviceVisual{
	padding: 80px 0;
	background: #F2F2F2;
	overflow: hidden;
}

div.serviceBox{
	--image-offset: 48px;
	position: relative;
	display: flex;
	min-height: calc(50vw * 752 / 948 + 80px);
	padding-top: var(--image-offset);
	box-sizing: border-box;
}
div.serviceBox:not(:last-child){ margin-bottom: 72px;}


	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		section.serviceVisual{ padding: 64px 0;}
		
		div.serviceBox{
			--image-offset: 48px;
			min-height: calc(50vw * 752 / 948 + 48px);
		}
		div.serviceBox:not(:last-child){ margin-bottom: 64px;}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		section.serviceVisual{ padding: 48px 24px;}
		
		div.serviceBox{
			display: flex;
			flex-direction: column;
			min-height: 0;
			padding-top: 0;
		}
		div.serviceBox:not(:last-child){ margin-bottom: 20px;}
	}



/*---------------------------------
	Image
---------------------------------*/
div.serviceBox figure{
	position: absolute; top: 0; left: 0;
	z-index: 2;
	width: 50%;
	aspect-ratio: 948 / 752;
	margin: 0;
}
div.serviceBox:nth-child(even) figure{
	left: auto;
	right: 0;
}
div.serviceBox figure img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.serviceBox figure,
		div.serviceBox:nth-child(even) figure{
			position: relative;
			top: auto;
			left: auto;
			right: auto;
			width: 100%;
			aspect-ratio: 4 / 2.8;
		}

		div.serviceBox figure img{
			position: absolute;
			inset: 0;
		}
	}


/*---------------------------------
	Content
---------------------------------*/
div.serviceBox div.serviceContent{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: calc(100% - 176px);
	min-height: 360px;
	margin: 0 88px;
	padding: 48px 0;
	background: #fff;
	box-sizing: border-box;
}
div.serviceBox:nth-child(even) div.serviceContent{ justify-content: flex-start;}

/* テキストエリア */
div.serviceBox div.serviceContent > div{
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: calc(50vw - 88px);
	min-width: 0;
	padding: 0 max(24px, 5%);
	box-sizing: border-box;
}

div.serviceBox:nth-child(odd) div.serviceContent > div{ text-align: right;}
div.serviceBox:nth-child(even) div.serviceContent > div{ text-align: left;}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.serviceBox div.serviceContent{
			width: calc(100% - 96px);
			min-height: 300px;
			margin: 0 48px;
			padding: 40px 0;
		}
		div.serviceBox div.serviceContent > div{
			width: calc(50vw - 48px);
			padding: 0 5%;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.serviceBox div.serviceContent,
		div.serviceBox:nth-child(even) div.serviceContent{
			position: relative;
			z-index: 3;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			min-height: 0;
			margin: 0;
			padding:0;
		}

		div.serviceBox div.serviceContent > div{
			width: 100%;
			padding: 28px;
		}
		div.serviceBox:nth-child(odd) div.serviceContent > div,
		div.serviceBox:nth-child(even) div.serviceContent > div{ text-align: left;}
	}


/*-- Title
------------------------- */
div.serviceBox div.serviceContent  div.serviceBox-title{
	margin-bottom: 28px;
	padding-bottom: 26px;
	border-bottom: 1px solid #999;
}
div.serviceBox div.serviceContent  div.serviceBox-title h2{
	margin-bottom: 16px;
	color: #999;
	font-size: 32px;
	font-weight: 300;
	font-family: "Jost", sans-serif;
	line-height: 1.5em;
}
div.serviceBox div.serviceContent  div.serviceBox-title p.name{
	font-size: 17px;
	line-height: 1.414em;
	vertical-align: baseline;
}
div.serviceBox div.serviceContent  div.serviceBox-title p.name span{
	position: relative; top: 2px;
	margin-left: 12px;
	color: #000;
	font-size: 24px;
	font-weight: 500;
	vertical-align: baseline;
}

div.serviceBox div.serviceContent  div.serviceBox-title p.company-name{ margin-bottom: 6px;}

div.serviceBox div.serviceContent  div.serviceBox-title p.cross{
	width: min(242px,100%);
	text-align: center;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.serviceBox div.serviceContent  div.serviceBox-title{
			margin-bottom: 28px;
			padding-bottom: 26px;
			text-align: center;
		}
		div.serviceBox div.serviceContent  div.serviceBox-title h2{
			margin-bottom: 12px;
			font-size: 20px;
		}
		div.serviceBox div.serviceContent  div.serviceBox-title p.name{
			font-size: 16px;
			line-height: 1.414em;
			vertical-align: baseline;
		}
		div.serviceBox div.serviceContent  div.serviceBox-title p.name span{
			position: relative; top: 2px;
			margin-left: 11px;
			font-size: 22px;
		}

		div.serviceBox div.serviceContent  div.serviceBox-title p.company-name{ margin-bottom: 4px;}
		div.serviceBox div.serviceContent  div.serviceBox-title p.cross{ width: 100%;}
		
		
	}


/*-- Text
------------------------- */
div.serviceBox div.serviceContent p.serviceBox-text{
	margin-bottom: 28px;
	font-size: 15px;
	line-height: 1.8em;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.serviceBox div.serviceContent p.serviceBox-text{ display: none;}
	}


/*-- Btn
------------------------- */
div.serviceBox p.serviceBox-btn{
	width: min(240px,100%);
	margin-top: auto;
}
div.serviceBox:nth-child(odd) p.serviceBox-btn{ margin-left: auto;}


div.serviceBox p.serviceBox-btn a{
	position: relative;
	display: block;
	padding: 12px 0 12px 12px;
	border: 1px solid #b3b3b3;
	text-align: center;
	font-size: 15px;
}
div.serviceBox p.serviceBox-btn a::before{
	position: absolute;  top: 24px; left: 50%;
    content: "";
    width: 8px;
    height: 8px;
    border-top: 1px solid #969696;
    border-right: 1px solid #969696;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
	margin-left: -64px;
}
div.serviceBox p.serviceBox-btn a:hover{
	background: #e6e6e6;
	color: #fff;
}
div.serviceBox p.serviceBox-btn a:hover::before{
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.serviceBox p.serviceBox-btn{
			width: min(216px,100%);
			margin: 0 auto;
		}
		div.serviceBox p.serviceBox-btn a{
			padding: 11px 0 11px 12px;
			font-size: 14px;
		}
		div.serviceBox p.serviceBox-btn a::before{
			position: absolute;  top: 22px; left: 50%;
			margin-left: -60px;
		}
	}




/*==============================*/
/* パララックス MS */
/*==============================*/
div.section-ms{
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 520px;
	padding: 0px 24px;
	box-sizing: border-box;
	background-image: url("/recruit/common/img/page-visual/visual-ms.jpg");
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
}
div.section-ms h2{
	position: relative;
	display: flex;
	align-items: center;
	gap: 20px;
	z-index: 1;
	color: #fff;
	text-align: center;
	font-size: 52px;
	font-weight: 300;
	font-family: "Jost", sans-serif;
	line-height: 0.8em;
}
div.section-ms h2 span{
	color: #4D4D4D;
	font-size: 112px;
	font-weight: 600;
	line-height: inherit;
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.section-ms{
			min-height: 400px;
			padding: 0px 24px;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.section-ms{
			min-height: 280px;
			padding: 40px 24px;
			container-type: inline-size;
		}
		div.section-ms h2{
			gap: 16px;
			font-size: 7cqw;
		}
		div.section-ms h2 span{ font-size: 19cqw;}
	}



/*==============================*/
/* ページリンク */
/*==============================*/
div.topLink{
	margin-top: -120px;
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
}
div.topLink div.topLink-box{
	display: flex;
	flex-direction: column;
	width: calc(calc(100% - 0px * 1) / 2);
	background: #fff;
	color: #fff;
}
div.topLink div.topLink-box:nth-child(1){ background: #909BB1;}
div.topLink div.topLink-box:nth-child(2){ background: #A7AEBE; margin-top: 64px;}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.topLink div.topLink-box{
			width: calc(calc(100% - 0px * 1) / 2);
		}
		div.topLink div.topLink-box:nth-child(2){ margin-top: 56px;}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.topLink{
			flex-direction: column;
			gap: 20px;
		}
		div.topLink div.topLink-box{ width: 100%;}
		div.topLink div.topLink-box:nth-child(2){ margin-top: 0px;}
	}


/*---------------------------------
   
---------------------------------*/
div.topLink div.topLink-box figure{}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.topLink div.topLink-box figure img{
			width: 100%;
			aspect-ratio: 4 / 2.5;
			object-fit: cover;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
	}


/*---------------------------------
   
---------------------------------*/
div.topLink div.topLink-box div{
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 56px 64px 80px 64px;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.topLink div.topLink-box div{
			padding: 44px 36px 40px 36px;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.topLink div.topLink-box div{ padding: 26px 24px 26px 24px;}
	}



/*-- 
------------------------- */
div.topLink div.topLink-box div h2{
	margin-bottom: 22px;
	padding-bottom: 20px;
	font-size: 18px;
	font-weight: 400;
	letter-spacing: 0.02em;
	border-bottom: 1px solid #fff;
}

#top div.topLink div.topLink-box div h2 span{
	display: block;
	margin-bottom: 8px;
	font-size: 32px;
	font-weight: 300;
	font-family: "Jost", sans-serif;
	line-height: 1em;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.topLink div.topLink-box div h2{
			margin-bottom: 20px;
			padding-bottom: 19px;
			font-size: 17px;
		}
		#top div.topLink div.topLink-box div h2 span{
			margin-bottom: 6px;
			font-size: 28px;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.topLink div.topLink-box div h2{
			margin-bottom: 20px;
			padding-bottom: 19px;
			font-size: 19px;
		}
		#top div.topLink div.topLink-box div h2 span{
			margin-bottom: 6px;
			font-size: 15px;
		}
	}

/*-- Text
------------------------- */
div.topLink div.topLink-box div p.topLink-text{
	margin-bottom: 36px;
	font-size: 15px;
	font-weight: 300;
	line-height: 1.7em;
	letter-spacing: 0.04em;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.topLink div.topLink-box div p.topLink-text br{ display: none;}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.topLink div.topLink-box div p.topLink-text{
			margin-bottom: 20px;
			font-size: 14px;
			line-height: 1.7em;
		}
		div.topLink div.topLink-box div p.topLink-text br{ display: none;}
	}


/*-- Btn
------------------------- */
div.topLink div.topLink-box div p.topLink-btn{ margin-top: auto;}
div.topLink div.topLink-box div p.topLink-btn a{
	position: relative;
	display: block;
	width: min(224px,100%);
	padding: 12px 0 12px 16px;
	border: 1px solid #fff;
	text-align: center;
	font-size: 15px;
}
div.topLink div.topLink-box div p.topLink-btn a::before{
	position: absolute;  top: 23px; left: 50%;
    content: "";
    width: 8px;
    height: 8px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
	margin-left: -62px;
}
div.topLink div.topLink-box div p.topLink-btn a:hover{ 	background: #fff;}

div.topLink div.topLink-box:nth-child(1) div p.topLink-btn a:hover{ color: #909BB1;}
div.topLink div.topLink-box:nth-child(2) div p.topLink-btn a:hover{ color: #A7AEBE;}

div.topLink div.topLink-box:nth-child(1) div p.topLink-btn a:hover::before{ border-color: #909BB1;}
div.topLink div.topLink-box:nth-child(2) div p.topLink-btn a:hover::before{ border-color: #A7AEBE;}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.topLink div.topLink-box div p.topLink-btn a{
			width: min(200px,100%);
			padding: 11px 0 11px 18px;
			font-size: 14px;
			font-weight: 300;
		}
		div.topLink div.topLink-box div p.topLink-btn a::before{
			position: absolute;  top: 21px; left: 50%;
			margin-left: -56px;
		}
	}




/*==============================*/
/* リンクリスト */
/*==============================*/
ul.top-linList{
	display: flex;
	gap: 48px;
}
ul.top-linList li{
	width: calc(calc(100% - 48px * 2) / 3);
}
ul.top-linList li a{
	position: relative;
	display: block;
	padding: 0 0 18px 28px;
	font-size: 20px;
	border-bottom: 3px solid #333;
}
ul.top-linList li a::before{
	position: absolute;  top: 9px; left: 0;
    content: "";
    width: 10px;
    height: 10px;
    border-top: 1px solid #333;
    border-right: 1px solid #333;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
ul.top-linList li.externalLink a::after{
	position: absolute; top: 6px; left: 120px;
	content: "";
	width: 21px;
	aspect-ratio: 21/19.5;
	background: url("/common/img/share/icon-link.svg") no-repeat;
	background-size: contain;
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		ul.top-linList{ gap: 32px;}
		ul.top-linList li{ width: calc(calc(100% - 32px * 2) / 3);}
		ul.top-linList li a{
			padding: 0 0 16px 27px;
			font-size: 18px;
			border-bottom: 2px solid #333;
		}
		ul.top-linList li a::before{ position: absolute;  top: 9px; left: 0;}
		ul.top-linList li.externalLink a::after{
			position: absolute; top: 7px; left: 109px;
			width: 19px;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		ul.top-linList{
			flex-direction: column;
			gap: 16px;
		}
		ul.top-linList li{ width: 100%;}
		ul.top-linList li a{
			padding: 0 0 16px 24px;
			font-size: 18px;
			border-bottom: 2px solid #333;
		}
		ul.top-linList li a::before{ position: absolute;  top: 9px; left: 0;}
		ul.top-linList li.externalLink a::after{
			position: absolute; top: 6px; left: 104px;
			width: 19px;
		}
	}