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

	Main Visual

--------------------------------------------------*/
#mv {position: relative;z-index: 2;}
/*#mv::before {content: '';position: absolute;top: 100%;left: 0;width: 100%;height: 1vw;background: #004DA0}*/
#mv .mv_container {position: relative;}
.image-crossfader {position: relative;z-index: -2;width: 100%;margin-left: auto;padding-top: 46.4%;overflow: hidden;}
.image-crossfader::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 60%;
	height: 100%;
	background: linear-gradient(90deg, #fff 30%, transparent);
}
.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;
}
.image-crossfader-inner:nth-of-type(1) {background-image: url("../img/mv/slide01.webp");}
.image-crossfader-inner:nth-of-type(2) {background-image: url("../img/mv/slide02.webp");}
.image-crossfader-inner:nth-of-type(3) {background-image: url("../img/mv/slide03.webp");}
.image-crossfader-inner.is-visible {z-index: 1;opacity: 1;transform: scale(1.02);}
#mv .mv_container .wrap {position: absolute;top: 50%;left: 6%;z-index: 2;transform: translateY(-50%);width: 70%;}
#mv .mv_container .wrap p {margin-bottom: 1%;font-weight: 600;font-size: 1.4vw;}
#mv .mv_container .wrap p.title {margin-bottom: 1%;font-weight: 600;font-size: 3vw;line-height: 1.4; text-align: left;}
#mv .mv_container .wrap h1 {margin-top: 5vw; font-weight: 400;font-size: 2vw;line-height: 1.4;}
#mv .mv_container .wrap small {display: block;font-size: 1.2vw;line-height: 1.5; margin-top:30px; }
#mv .block {
	align-items: center;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 10;
	transform: translateY(45%);
	width: 100%;
	padding-right: 4vw;
}
#mv .block figure {width: 35%;}
@media only screen and ( max-width : 767px ) {
	#mv .block {position: initial;transform: none;width: 90%;margin: 0 auto;padding: 0;}
	#mv .block figure {display: none;}
	#mv .mv_container {
		display: flex;
		flex-direction: column;
	}
	#mv .mv_container .wrap {
		order: 1;
		position: static;
		transform: none;
		width: 100%;
		padding: 20px 5vw;
	}
	.image-crossfader {
		order: 2;
		padding-top: 85%; /* SP時の画像の高さ調整 */
	}
	/* グラデーションを削除または調整 */
	.image-crossfader::before {
		display: none; /* SP時はグラデーションを非表示 */
	}
	.image-crossfader-inner:nth-of-type(1) {background-image: url("../img/mv/sp-slide01.webp");}
	.image-crossfader-inner:nth-of-type(2) {background-image: url("../img/mv/sp-slide02.webp");}
	.image-crossfader-inner:nth-of-type(3) {background-image: url("../img/mv/sp-slide03.webp");}
	#mv .mv_container .wrap {position: initial;transform: none;width: 100%;padding: 25vw 5vw 10vw;}
	#mv .mv_container .wrap p {margin-bottom: 2%;font-size: 3.4vw;}
	#mv .mv_container .wrap p.title {margin-bottom: 5%;font-size: 6vw;}
	#mv .mv_container .wrap h1 {margin-bottom: 1%;font-weight: 600;font-size: 3vw;line-height: 1.4;}
	#mv .mv_container .wrap small {font-size: 3.2vw;}
}
/*--------------------------------------------------

	ABOUT US

--------------------------------------------------*/
#about_us {position: relative;overflow: hidden;}
#about_us::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	z-index: -1;
	width: 50%;
	height: calc(50% - 350 * (100% - 320px)/1200);
	border-radius: 0 20px 20px 0;
	background: #f2fbff;
}
#about_us .inner {max-width: 1477px;}
#about_us .container figure {width: 45%;}
#about_us h3 {font-size: 22px; font-weight:bold; margin-bottom: 40px; line-height: 1.6;}
#about_us h3 span {display: block; font-size: 14px; margin-top: 20px; line-height: 1.6;}
#about_us .container .wrap {align-items: center;width: 44%;}
#about_us .container .wrap .content p {margin-bottom: calc(20px + 10 * ((100vw - 320px) / 1600));}
#about_us .container .wrap .content p:last-child {margin-bottom: 0;}
@media only screen and ( max-width : 767px ) {
	#about_us::before {top: 27%;width: 100%;height: 40%;border-radius: 0;}
	#about_us .container figure {width: 100%;margin-bottom: 30px;}
	#about_us .container .wrap {width: 100%;}
}
/*--------------------------------------------------

	WORK STYLE

--------------------------------------------------*/
#work_style {background: #f2fbff;}
#work_style ul li {position: relative;margin-bottom: clamp(50px, calc(50px + 100 * ((100vw - 375px) / 1545)), 150px);}
#work_style ul li:nth-child(2) {flex-direction: row-reverse;}
#work_style ul li:last-child {margin-bottom: 0;}
#work_style ul li figure {width: 50%;}
#work_style ul li .wrap {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	width: 54%;
}
#work_style ul li:nth-child(2) .wrap {right: initial;left: 0;}
#work_style ul li .wrap .content {
	padding: clamp(20px, calc(20px + 20 * ((100vw - 375px) / 1545)), 40px);
	background: #fff;
}
#work_style ul li .wrap .content dl {
	display: flex;
	align-items: center;
	margin-bottom: clamp(15px, calc(15px + 10 * ((100vw - 375px) / 1545)), 25px);
}
#work_style ul li .wrap dl dt {
	margin-right: clamp(15px, calc(15px + 10 * ((100vw - 375px) / 1545)), 25px);
	color: #004DA0;
	font-size: clamp(38px, calc(38px + 10 * ((100vw - 375px) / 1545)), 48px);
}
#work_style ul li .wrap dl dd {
	flex: 1;
	font-weight: bold;
	font-size: clamp(16px, calc(16px + 4 * ((100vw - 375px) / 1545)), 20px);
}
@media only screen and ( max-width : 767px ) {
	#work_style ul li figure {width: 100%;}
	#work_style ul li .wrap {position: initial;transform: none;width: 100%;}
}
/*--------------------------------------------------

	MERIT

--------------------------------------------------*/
#merit ul li {width: 26%;}
#merit ul li figure {margin-bottom: 20px;}
#merit ul li .wrap h3 {
	margin-bottom: clamp(10px, calc(10px + 7 * ((100vw - 375px) / 1545)), 17px);
	font-weight: bold;
	font-size: clamp(16px, calc(16px + 2 * ((100vw - 375px) / 1545)), 18px);
	text-align: center;
}
#merit ul li .wrap p {font-size: clamp(12px, calc(12px + 2 * ((100vw - 375px) / 1545)), 14px);}
@media only screen and ( max-width : 767px ) {
	#merit ul li {width: 48%;margin-bottom: 30px;}
	#merit ul li:last-child {margin-bottom: 0;}
}
@media only screen and ( max-width : 500px ) {
	#merit ul li {width: 100%;}
}

/*--------------------------------------------------

	INTERVIEW

--------------------------------------------------*/
#interview .inner {max-width: 1000px;}
#interview .flexbox a {position: relative;width: 42%;}
#interview .flexbox a figure {
	width: 300px;
	height: 300px;
	border-radius: 50%;
	margin: 0 auto;
	overflow: hidden;
}
#interview .flexbox a figure img {transition: transform .3s linear;}
#interview .flexbox a:hover figure img {transform: scale(1.08);}
#interview .flexbox a .content {
	position: relative;
	z-index: -1;
	margin-top: -20%;
	padding: 35px 30px 90px;
	background: #F5F5F5;
}
#interview .flexbox a .content p.num {color: #004DA0;font-size: 3.4rem;letter-spacing: .1em;}
#interview .flexbox a .content h3 {margin-bottom: 20px; font-size: 2rem; font-weight: bold; line-height: 1.1;}
#interview .flexbox a .content h4 {font-size: 1.6rem;}
#interview .flexbox a .content h4 span {font-size:  2rem;}
#interview .flexbox a .content h4 span.small {font-size: 1.4rem; margin-right: 20px;}
#interview .flexbox a .content p.read {
	display: inline-block;
	position: absolute;
	bottom: 30px;
	left: 50%;
	transform: translate(-50%, 0);
	width: 100%;
	max-width: 144px;
	padding: .7em 1.5em;
	overflow: hidden;
	border: 1px solid #222;
	border-radius: 2em;
	background: #fff;
	line-height: 1;
	text-align: center;
	transition: .5s;
}
#interview .flexbox a .content p.read::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	width: 50px;
	height: 50px;
	background-color: #004DA0;
	border-radius: 50%;
	z-index: -1;
	transform: scale(0);
	transition: 1s;
}
#interview .flexbox a:hover .content p.read {border-color: #004DA0; color: #fff;}
#interview .flexbox a:hover .content p.read::before {transition: 1.5s;transform: scale(10);}
@media only screen and ( max-width : 1024px ) {
	#interview .flexbox a {width: 48%;margin-bottom: 20px;}
	#interview .flexbox a:nth-of-type(3),
	#interview .flexbox a:last-child {margin-bottom: 0;}
	#interview .flexbox a .content h4 span {font-size:  1.6rem;}
	#interview .flexbox a .content h3 {font-size: 20px;}
}
@media only screen and ( max-width : 500px ) {
	#interview .flexbox a {width: 100%;}
	#interview .flexbox a:nth-of-type(3) {margin-bottom: 20px;}
	#interview .flexbox a .content {padding: 35px 10px 90px;}
	#interview .flexbox a .content h3 {font-size: 19px;}
}
/*--------------------------------------------------

	JOB INFO

--------------------------------------------------*/
#job_info .inner {max-width: 960px;}
.ChangeElem_Btn_Content {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	max-width: 976px;
	margin: 0 auto clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);
}
.ChangeElem_Btn_Content button {
	position: relative;
	padding: 15px 0;
	border: 1px solid #aaa;
	background: #fff;
	transition: .3s;
}
.ChangeElem_Btn_Content button.is-active {border-color: #004DA0;background: #004DA0;color: #fff;}
#job_info table tr {
	display: block;
	padding-top: clamp(10px, calc(10px + 10 * ((100vw - 375px) / 1545)), 20px);
	padding-bottom: clamp(10px, calc(10px + 10 * ((100vw - 375px) / 1545)), 20px);
	border-bottom: 1px solid #aaa;
}
#job_info table tr:first-child {border-top: 1px solid #aaa;}
#job_info table tr th {
	width: 170px;
	font-weight: bold;
	font-size: clamp(16px, calc(16px + 2 * ((100vw - 375px) / 1545)), 18px);
}
#job_info table tr td .wrap {margin-bottom: 20px;}
#job_info table tr td .wrap:last-child {margin-bottom: 0;}
#job_info table tr td .wrap a {
	margin-top: 5px;
	padding: 4px 3vw;
	background: #004DA0;
	color: #fff;
	letter-spacing: .1em;
	text-align: center;
}
#job_info table tr td .wrap p.square {position: relative;padding-left: 15px;}
#job_info table tr td .wrap p.square::before {
	content: '';
	position: absolute;
	top: .5em;
	left: 0;
	width: 10px;
	height: 10px;
	background: #222;
}
#job_info table tr td .wrap ol {margin-left: 15px;}
#job_info table tr td .wrap ol li {list-style-type: decimal;}
#job_info table tr td .wrap ul.dia {margin-left: 5px;}
#job_info table tr td .wrap ul li {position: relative;padding-left: 15px;}
#job_info table tr td .wrap ul li::before {
	content: '';
	position: absolute;
	top: .5em;
	left: 0;
	width: 10px;
	height: 10px;
	background: #222;
}
#job_info table tr td .wrap ul.dia li::before {transform: rotate(45deg);}
@media only screen and ( max-width : 767px ) {
	.ChangeElem_Btn_Content {grid-template-columns: repeat(1, 1fr);}
	#job_info table tr th {display: block;width: 100%;}
	#job_info table tr td {display: block;}
}
/*--------------------------------------------------

	COMPANY

--------------------------------------------------*/
#company {background: #f6fdff;}
#company .container {
	padding: clamp(20px, calc(20px + 60 * ((100vw - 375px) / 1545)), 80px);
	padding-top: clamp(50px, calc(50px + 20 * ((100vw - 375px) / 1545)), 70px);
	padding-bottom: clamp(50px, calc(50px + 50 * ((100vw - 375px) / 1545)), 100px);
	background: #fff;
}
#company .container table tr {
	display: block;
	padding-top: clamp(15px, calc(15px + 10 * ((100vw - 375px) / 1545)), 25px);
	padding-bottom: clamp(15px, calc(15px + 10 * ((100vw - 375px) / 1545)), 25px);
	border-top: 1px solid #AAA;
}
#company .container table tr:last-child {border-bottom: 1px solid #AAA;}
#company .container table tr th {
	width: clamp(100px, calc(100px + 60 * ((100vw - 375px) / 1545)), 160px);
	vertical-align: middle;
	font-weight: bold;
	font-size: clamp(16px, calc(16px + 2 * ((100vw - 375px) / 1545)), 18px);
}
#company .container .map-container {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 40px auto 0;
    padding: 0 15px;
}
#company .container .map-responsive {
    position: relative;
    padding-bottom: 75%; /* アスペクト比 4:3 */
    height: 0;
    overflow: hidden;
}
#company .container .map-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
@media screen and (max-width: 768px) {
		#company .container .map-container {
        padding: 0 10px;
    }
    
		#company .container .map-responsive {
        padding-bottom: 100%; /* モバイルでは正方形に近い比率に */
    }
}