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

	Main Visual

--------------------------------------------------*/
#mv {position: relative;z-index: 2;}
#mv .movie {overflow: hidden;margin-left: auto;}
#mv .movie .youtube {position: relative;width: 60%;margin: -12vw 0 -11.1vw auto;padding-top: 56.25%;}
#mv .movie .youtube iframe {position: absolute;top: 0;right: 0;width: 100%;height: 100%;}
#mv .wrap {position: absolute;top: 50%;left: 9%;z-index: 2;transform: translateY(-50%);}
#mv .wrap p {margin-bottom: 4%;color: #ccc;font-size: 1vw;letter-spacing: .1em;}
#mv .wrap h1 {display: block;font-size: 2.2vw;line-height: 1.7;letter-spacing: .2em;}
@media only screen and ( max-width : 1024px ) {
	#mv {display: flex;flex-direction: column-reverse;}
	#mv .movie {margin: 0;}
	#mv .movie .youtube {width: 100%;margin: 0;}
	#mv .wrap {position: initial;transform: none;width: 90%;margin: 100px auto 5%;}
	#mv .wrap p {font-size: 2vw;}
	#mv .wrap h1 {font-size: 4.2vw;}
}
@media only screen and ( max-width : 500px ) {
	#mv .wrap p {font-size: 2.5vw;}
	#mv .wrap h1 {font-size: 5.2vw;}
}
/*--------------------------------------------------

	MESSAGE │ メッセージ

--------------------------------------------------*/
#message {position: relative;margin-top: -5%;background: url(../img/front/message/bg.webp) no-repeat top center / cover;}
#message::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../img/front/message/bg_illust.webp) no-repeat bottom center / 100%;
}
#message .inner {max-width: 1242px;}
#message .message_container {
	margin-bottom: clamp(40px, calc(40px + 30 * ((100vw - 375px) / 1545)), 70px);
	padding: 20px;
	background: #fff;
}
#message .message_container h2 {
	position: relative;
	color: #003F97;
	font-size: clamp(28px, calc(28px + 17 * ((100vw - 375px) / 1545)), 45px);
	letter-spacing: .1em;
	text-align: center;
}
#message .message_container h2::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 100%;
	height: 1px;
	background: #003F97;
}
#message .message_container h2 span {position: relative;z-index: 1;padding: 0 8px;background: #fff;}
#message .message_container ul {
	align-items: center;
	padding-top: clamp(40px, calc(40px + 30 * ((100vw - 375px) / 1545)), 70px);
	padding-bottom: clamp(40px, calc(40px + 60 * ((100vw - 375px) / 1545)), 100px);
	border-bottom: 1px solid #003F97;
}
#message .message_container ul li:nth-child(1) {
	width: 45%;
	padding-left: clamp(20px, calc(20px + 20 * ((100vw - 375px) / 1545)), 40px);
	font-size: clamp(28px, calc(28px + 12 * ((100vw - 375px) / 1545)), 40px);
	line-height: 1.7;
}
#message .message_container ul li:nth-child(2) {width: 55%;}
#message .message_container ul li h3 {
	margin-bottom: clamp(30px, calc(30px + 20 * ((100vw - 375px) / 1545)), 50px);
	font-size: clamp(18px, calc(18px + 7 * ((100vw - 375px) / 1545)), 25px);
}
#message .message_container ul li .content p {margin-bottom: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);}
#message .message_container ul li .content p:last-child {margin-bottom: 0;}
#message .movie_container {max-width: 925px;margin: 0 auto;}
#message .movie_container h2 {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 35px;
	margin-bottom: 30px;
	font-size: clamp(18px, calc(18px + 4 * ((100vw - 375px) / 1545)), 22px);
	letter-spacing: .1em;
	text-align: center;
}
#message .movie_container h2 img {width: clamp(38px, calc(38px + 10 * ((100vw - 375px) / 1545)), 48px);}
#message .movie_container .wrap {
	padding: clamp(20px, calc(20px + 20 * ((100vw - 375px) / 1545)), 40px) 2vw;
	background: rgba(255, 255, 255, 49%);
}
#message .movie_container .wrap .content {max-width: 676px;margin: 0 auto;}
#message .movie_container .wrap .content .youtube {position: relative;width: 100%;padding-top: 56.25%;}
#message .movie_container .wrap .content .youtube iframe {position: absolute;top: 0;right: 0;width: 100%;height: 100%;}
@media only screen and ( max-width : 767px ) {
	#message .message_container ul li:nth-child(1) {width: 100%;margin-bottom: 40px;padding-left: 0;}
	#message .message_container ul li:nth-child(2) {width: 100%;}
}
/*--------------------------------------------------

	BUSINESS │ 事業紹介

--------------------------------------------------*/
#business {position: relative;}
#business::before,
#business::after {content: '';position: absolute;bottom: 0;height: 100%;background: no-repeat bottom / 100%;}
#business::before {
	left: 7%;
	width: clamp(131px, calc(131px + 78 * ((100vw - 375px) / 1545)), 209px);
	background-image: url(../img/front/business/img_woman.webp);
}
#business::after {
	right: 7%;
	width: clamp(100px, calc(100px + 68 * ((100vw - 375px) / 1545)), 168px);
	background-image: url(../img/front/business/img_man.webp);
}
#business .inner {max-width: 1125px;}
#business .container .wrap {width: 45%;}
#business .container .wrap h3 {margin-bottom: clamp(30px, calc(30px + 20 * ((100vw - 375px) / 1545)), 50px);}
#business .container .wrap h3 span {
	padding: 4px 20px;
	background: #003F97;
	color: #fff;
	font-weight: bold;
	font-size: clamp(18px, calc(18px + 6 * ((100vw - 375px) / 1545)), 24px);
	text-align: center;
}
#business .container .wrap figure {margin-bottom: clamp(30px, calc(30px + 20 * ((100vw - 375px) / 1545)), 50px);}
#business .container .wrap ul {margin-bottom: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);}
#business .container .wrap ul li {
	position: relative;
	padding-left: 30px;
	font-size: clamp(13px, calc(13px + 2 * ((100vw - 375px) / 1545)), 15px);
}
#business .container .wrap ul li::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 20px;
	height: 100%;
	background: url(../img/front/business/Icon_anchor.svg) no-repeat top left / 100%;
}
#business .container .wrap p {font-size: clamp(13px, calc(13px + 2 * ((100vw - 375px) / 1545)), 15px);}
@media only screen and ( max-width : 767px ) {
	#business .block {padding-bottom: 200px;}
	#business .container {gap: 50px;}
	#business .container .wrap {width: 100%;}
}
/*--------------------------------------------------

	JOB │ 働くポイント

--------------------------------------------------*/
#job {overflow: hidden;}
#job .map_container {position: relative;margin-bottom: -13vw;}
#job .map_container .wrap {position: absolute;top: 12%;left: 50%;transform: translateX(-50%);}
#job .map_container .wrap h3 {margin-bottom: 6%;color: #003F97;font-size: 1.5vw;text-align: center;}
#job .map_container .wrap p {font-size: .8vw;line-height: 2.2;text-align: center;}
#job .map_container .item {position: absolute;top: 0;width: 5.6vw;}
#job .map_container .item:nth-of-type(1) {top: 32%;left: 8.4%;}
#job .map_container .item:nth-of-type(2) {top: 20%;left: 11.5%;}
#job .map_container .item:nth-of-type(3) {top: 32%;left: 14.6%;}
#job .map_container .item:nth-of-type(4) {top: 41%;left: 31.8%;}
#job .map_container .item:nth-of-type(5) {top: 51%;left: 47.5%;}
#job .map_container .item:nth-of-type(6) {top: 50.2%;right: 38.3%;}
#job .map_container .item:nth-of-type(7) {top: 36%;right: 27.3%;}
#job .map_container .item:nth-of-type(8) {top: 46.4%;right: 13.3%;}
#job .map_container .item a {width: 5.6vw;height: 5.6vw;border-radius: 50%;}
#job .point_container {background: url(../img/front/job/point/bg.webp) no-repeat center bottom / cover;}
#job .point_container ul li {margin-bottom: clamp(40px, calc(40px + 80 * ((100vw - 375px) / 1545)), 120px);}
#job .point_container ul li:nth-child(1) {align-items: flex-end;}
#job .point_container ul li:nth-child(2) {flex-direction: row-reverse;align-items: center;}
#job .point_container ul li:last-child {margin-bottom: 0;}
#job .point_container ul li figure {width: 42%;}
#job .point_container ul li .wrap {width: 54%;}
#job .point_container ul li .wrap p.num {
	width: clamp(100px, calc(100px + 48 * ((100vw - 375px) / 1545)), 148px);
	margin-bottom: 20px;
}
#job .point_container ul li .wrap h3 {
	margin-bottom: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);
	color: #003F97;
	font-size: clamp(20px, calc(20px + 6 * ((100vw - 375px) / 1545)), 26px);
}
#job .point_container ul li .wrap p {font-size: clamp(13px, calc(13px + 2 * ((100vw - 375px) / 1545)), 15px);}
@media only screen and ( max-width : 767px ) {
	#job .point_container ul li figure {width: 100%;margin-bottom: 30px;}
	#job .point_container ul li .wrap {width: 100%;}
}
/*--------------------------------------------------

	INTERVIEW │ インタビュー

--------------------------------------------------*/
#interview ul.list {
	justify-content: center;
	gap: 60px 7%;
	max-width: 1022px;
	margin: 0 auto clamp(55px, calc(55px + 20 * ((100vw - 375px) / 1545)), 75px);
	background: url(../img/front/interview/bg.webp) no-repeat center / 100%;
}
#interview ul.list li {position: relative;width: 28%;padding: 10px 10px 55px;border: 1px solid #707070;background: #fff;}
#interview ul.list li figure {margin-bottom: 20px;}
#interview ul.list li .wrap {padding: 0 10px;}
#interview .block .container {
	position: relative;
	z-index: 1;
	padding-top: clamp(80px, calc(80px + 37 * ((100vw - 375px) / 1545)), 117px);
	padding-bottom: clamp(80px, calc(80px + 37 * ((100vw - 375px) / 1545)), 117px);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 16%);
	background: #F0FCFF;
	transition: .3s;
}
#interview .block .container::before,
#interview .block .container::after {content: '';position: absolute;top: 0;left: 0;z-index: -1;width: 100%;height: 100%;}
#interview .block .container::before {background: url(../img/front/interview/staff06/bgL.webp) no-repeat bottom left / 45%;}
#interview .block .container::after {background: url(../img/front/interview/staff06/bgR.webp) no-repeat top right / 100%;}
#interview .block .container:hover {box-shadow: 0 2px 2px rgba(0, 0, 0, 16%);}
#interview .block h3 {
	margin-bottom: clamp(30px, calc(30px + 10 * ((100vw - 375px) / 1545)), 40px);
	color: #003F97;
	font-size: clamp(18px, calc(18px + 18 * ((100vw - 375px) / 1545)), 36px);
	text-align: center;
}
#interview .block .container .wrap {flex-direction: row-reverse;align-items: center;width: 90%;max-width: 720px;margin: 0 auto;}
#interview .block .container .wrap figure {width: 35%;}
#interview .block .container .wrap .content {width: 55%;}
#interview .block .container .wrap .content h4 {
	margin-bottom: clamp(10px, calc(10px + 10 * ((100vw - 375px) / 1545)), 20px);
	color: #003F97;
	font-weight: bold;
	font-size: clamp(18px, calc(18px + 6 * ((100vw - 375px) / 1545)), 24px);
}
#interview .block .container .wrap .content dl {margin-bottom: 15px;}
#interview .block .container .wrap .content dl dt {border-bottom: 1px solid #333;}
/* common */
#interview .content dl dt {
	margin-bottom: clamp(4px, calc(4px + 4 * ((100vw - 375px) / 1545)), 8px);
	font-size: clamp(30px, calc(30px + 10 * ((100vw - 375px) / 1545)), 40px);
	line-height: 1.4;
	letter-spacing: .1em;
}
#interview .content dl dd {font-size: clamp(12px, calc(12px + 2 * ((100vw - 375px) / 1545)), 14px);letter-spacing: .1em;}
#interview .arrow span {
	position: absolute;
	top: 60%;
	left: 0;
	transform: translate(-50%, -50%);
	width: 20px;
    height: 1px;
    border-bottom: 1px solid #333;
    transition: .3s;
}
#interview ul.list li:hover .arrow span,
#interview .block .container:hover .wrap .content .arrow span {left: 40%;}
#interview .arrow {position: relative;width: 30px;height: 30px;margin-left: auto;border: 1px solid #333;border-radius: 50%;}
#interview ul.list li .wrap .arrow {position: absolute;right: 20px;bottom: 20px;}
#interview .arrow span::after {
    content: '';
	position: absolute;
    right: 3px;
    bottom: -2px;
    transform: rotate(-45deg);
	width: 1px;
    height: 8px;
    border-right: 1px solid #333;
}
@media only screen and ( max-width : 767px ) {
	#interview ul.list {gap: 30px 4%;}
	#interview ul.list li {width: 48%;}
	#interview .block .container .wrap figure {width: 100%;margin-bottom: 30px;}
	#interview .block .container .wrap .content {width: 100%;}
}
@media only screen and ( max-width : 500px ) {
	#interview ul.list {gap: 20px;}
	#interview ul.list li {display: flex;align-items: center;gap: 15px;width: 100%;padding-bottom: 10px;}
	#interview ul.list li figure {width: 40%;margin-bottom: 0;}
	#interview ul.list li .wrap {padding: 0;}
	#interview ul.list li .wrap .arrow {right: 10px;bottom: 10px;}
	#interview .block .container {padding: 40px 0;}
}
/*--------------------------------------------------

	IDEAL CANDIDATE PROFILE │ 求める人物像

--------------------------------------------------*/
#ideal {background: url(../img/front/ideal/bg.webp) no-repeat center / cover;}
#ideal ul {display: grid;grid-template-columns: repeat(4, 1fr);gap: 20px 17px;}
#ideal ul li {padding: 15px 10px 30px;border-radius: 10px;background: #fff;}
#ideal ul li .ttl_wrap p {
	margin-bottom: 10px;
	color: #003F97;
	font-size: clamp(32px, calc(32px + 6 * ((100vw - 375px) / 1545)), 38px);
	letter-spacing: .05em;
	text-align: center;
}
#ideal ul li .ttl_wrap h3 {margin-bottom: clamp(30px, calc(30px + 10 * ((100vw - 375px) / 1545)), 40px);text-align: center;}
#ideal ul li figure {
	height: 90px;
	margin-bottom: clamp(30px, calc(30px + 20 * ((100vw - 375px) / 1545)), 50px);
	text-align: center;
}
#ideal ul li:nth-child(1) figure img {width: 50%;max-width: 129px;}
#ideal ul li:nth-child(2) figure img {width: 40%;max-width: 106px;}
#ideal ul li:nth-child(3) figure img {width: 60%;max-width: 145px;}
#ideal ul li:nth-child(4) figure img {width: 55%;max-width: 126px;}
#ideal ul li p.txt {width: 80%;margin: 0 auto;font-size: clamp(12px, calc(12px + 2 * ((100vw - 375px) / 1545)), 14px);}
@media only screen and ( max-width : 1024px ) {
	#ideal ul {grid-template-columns: repeat(2, 1fr);}
}
@media only screen and ( max-width : 500px ) {
	#ideal ul {grid-template-columns: repeat(1, 1fr);}
}
/*--------------------------------------------------

	JOB INFO │ 募集要項

--------------------------------------------------*/
.tab_group {padding: clamp(15px, calc(15px + 25 * ((100vw - 375px) / 1545)), 40px);border: 1px solid #707070;}
.ChangeElem_Btn_Content {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px 37px;
	max-width: 946px;
	margin: 0 auto clamp(30px, calc(30px + 80 * ((100vw - 375px) / 1545)), 110px);
}
.ChangeElem_Btn_Content button {
	position: relative;
	padding: 15px 0;
	border: none;
	background: #BBB;
	color: #fff;
	font-weight: bold;
	font-size: clamp(14px, calc(14px + 4 * ((100vw - 375px) / 1545)), 18px);
	transition: .3s;
}
.ChangeElem_Btn_Content button.is-active {background: #003F97;}
#job_info table {width: 90%;max-width: 1040px;margin: 0 auto;}
#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 #BBB;
}
#job_info table tr:first-child {padding-top: 0;}
#job_info table tr:last-child {padding-bottom: 0;border-bottom: none;}
#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 {letter-spacing: .1em;}
#job_info table tr td .wrap {margin-bottom: clamp(25px, calc(25px + 10 * ((100vw - 375px) / 1545)), 35px);}
#job_info table tr td .wrap:last-child {margin-bottom: 0;}
#job_info table tr td dl {display: flex;}
#job_info table tr td dl dd {flex: 1;}
#job_info table tr td h3.square,
#job_info table tr td ul.square li {position: relative;padding-left: 16px;}
#job_info table tr td h3.square::before,
#job_info table tr td ul.square li::before {
	content: '';
	position: absolute;
	top: .3em;
	left: 0;
	width: 13px;
	height: 13px;
	background: #333;
}
#job_info table tr td ul.square li::before {top: .4em;}
#job_info table tr td ul.star li {position: relative;padding-left: 18px;}
#job_info table tr td ul.star li::before {content: '★';position: absolute;left: 0;}
#job_info table tr td ul.double li {position: relative;padding-left: 18px;}
#job_info table tr td ul.double li::before {content: '◎';position: absolute;left: 0;}
#job_info table tr td ul.dia {margin-left: 5px;}
#job_info table tr td ul.dia li {position: relative;padding-left: 15px;}
#job_info table tr td ul.dia li::before {
	content: '';
	position: absolute;
	top: .45em;
	left: 0;
	transform: rotate(45deg);
	width: 10px;
	height: 10px;
	background: #333;
}
@media only screen and ( max-width : 1024px ) {
	.ChangeElem_Btn_Content {grid-template-columns: repeat(2, 1fr);gap: 10px;}
	.ChangeElem_Btn_Content button {padding: 10px 0;}
}
@media only screen and ( max-width : 767px ) {
	.ChangeElem_Btn_Content {grid-template-columns: repeat(1, 1fr);}
	#job_info table {width: 100%;}
	#job_info table tr th {display: block;width: 100%;margin-bottom: 5px;}
	#job_info table tr td {display: block;}
}