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

/*********************************************************

					　　　　初期設定

**********************************************************/

html{
	font-size: 62.5%; /*1rem=10px*/
	box-sizing: border-box;
	scroll-behavior: smooth;
}

body{
	line-height: 1.5;
	margin: 0 auto;
	width: 100%;
	display: block;
	font-family: "Zen Kaku Gothic New", serif;
	font-weight: 400;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	color: #333;
}

.pc{display: block;}

.sp{display: none;}

.eng{
	font-family: "Barlow Condensed", serif;
	font-weight: 400;
	font-style: normal;
}

.header{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	padding: 15px 0;
	z-index: 100;
}

.header.active{
	background: #fff;
	box-shadow: 0 10px 10px rgba(0,0,0,0.1)
}

.header .inner,
.page-header .inner{
	position: relative;
	width: 96%;
	max-width: 1920px;
	margin: 0 auto;
}

.header-wrap{
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.header-wrap img{
	height: 50px; 
	width: auto;
}

.logo-a,
.logo-b{
	position: relative;
	z-index: 2;
}

.logo-a{display: none;}
.page .logo-a{display: block;}
.page .logo-b{display: none;}

.header.active .logo-a{display: block;}
.header.active .logo-b{display: none;}

.global-menu{
	font-size: 16px;
	color: #fff;
	width: calc(100% - 400px);
}

.header.active .global-menu{
	color: #000;
}

.global-menu ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.5em 2em;
}

.global-menu ul li{
	position: relative;
	font-weight: 600;
	line-height: 1;
	padding-bottom: 0.3em;
}

.global-menu ul li::after{
	content: '';
	width: 100%;
	height: 1px;
	position: absolute;
	left: 0;
	bottom: 0;
	display: block;
	background: #fff;
	transform-origin: bottom right;
	transform: scale(0,1);
	transition:transform 0.3s ease;
}

.header.active .global-menu ul li::after{
	background: #111;
}

.global-menu ul li:hover::after{
	transform-origin: bottom left;
	transform: scale(1,1);
}

.page .global-menu{
	color: #111;
}

.page .global-menu ul li::after{
	background: #111;
}

.page .header-wrap{
	align-items: center;
}

.readtext{
	font-size: 16px;
	line-height: 1.8;
	text-align: justify;
	margin-top: 1em;
}

.subtitle{
	position: relative;
	font-size: 32px;
	font-weight: 600;
	line-height: 1.5;
	padding-left: 0.5em;
	transform: translateX(99.5%);
	transition: ease-in-out 1s 0.3s;
}
.subtitle span,.subtitle2 span{
	display: inline-block;
}

.subtitle2{
	font-size: 32px;
	font-weight: 600;
	line-height: 1.5;
	padding-left: 0.5em;
	border-left: solid 0.25em #FFBB1C;
	margin-top: 1.2em;
}

.subtitle-wrap{
	transform: translateX(-99.5%);
	display: block;
	transition: ease-in-out 1s 0.3s;
	overflow: hidden;
	margin-top: 1.2em;
}

.subtitle::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 0.25em;
	width: 0.5%;
	height: 100%;
	background: #ffbb1c;
}

.subtitle-wrap.active{
	transform: translateX(0);
}

.subtitle-wrap.active .subtitle{
	transform: translateX(0);
}

.sec-title-wrap{
	width: 100%;
	font-size: 30px;
}

.sec-title-wrap h2{
	font-size: 2em;
	line-height: 1.2;
	font-weight: 800;
}

.sec-title-wrap h3{
	font-weight: 600;
}

.sec{
	position: relative;
	z-index: 2;
	padding: 160px 0 0;
	width: 100%;
}

.form{
	position: relative;
	z-index: 2;
	padding: 160px 0 0;
	width: 100%;
	overflow: hidden;
}

.sec.massage{z-index: 15;}

.inner02{
	width: 90%;
	max-width: 1200px;
	margin: 0 auto;
}

.backtext{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 36em;
	display: block;
	z-index: -1;
	overflow: hidden;
}

.backtext2{
	font-size: 10px;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	aspect-ratio: 1/1;
	display: block;
	z-index: -1;
	overflow: hidden;
}

.backtext::before,
.backtext2::before{
	position: absolute;
	top: 25px;
	left: 15%;
	font-size: 26em;
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.05em;
	white-space: nowrap;
	color: #668CF2;
	display: block;
	opacity: 0.1;
	z-index: -1;
	transform-origin: left bottom;
	transform: scale(0.9,1) skewX(-10deg);
}

.career::before{content: 'CAREER PATH';}
.massage::before{content: 'TOP MESSAGE';}
.company::before{content: 'COMPANY PROFILE';}
.job::before{content: 'MAIN JOB';}
.work::before{content: 'WORK STYLE';}
.interview::before{content: 'INTERVIEW';}
.place::before{content: 'WORKING PLACE';}
.faq::before{content: 'FAQ';}
.recruitment::before{content: 'RECRUITMENT REQUIREMENTS';}
.ss::before{content: 'SERVICE STATION'; mix-blend-mode: multiply;}
.cs::before{content: 'CAR CARE CENTER'; mix-blend-mode: multiply;}
.pr::before{content: 'PROFESSION'; mix-blend-mode: multiply;}

.page .interview::before{content: '';}

.btn-fixed{
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
	position: fixed;
	top: 1em;
	right: 0;
	z-index: 20;
	background: #FFBB1C;
	color: #fff;
	padding: 0.3em 1em;
	border-radius: 0.5em 0.5em 0 0;
	transform-origin: right bottom;
	transform: rotate(-90deg) translateY(101%);
	transition:ease-in-out 0.3s;
}

.btn-fixed.active{
	position: fixed;
	transform: rotate(-90deg) translateY(0);
}

.btn-fixed:hover{
	color: #FFBB1C;
	background-color: #333;
}

.ex.fuwa{
	transform: translateY(3vw);
	opacity: 0;
	transition: ease-in-out 0.5s;
}

.ex.active.fuwa{
	transform: translateY(0);
	opacity: 1;
}

.index-wrap{
	position: absolute;
	bottom: 0;
	left: 0.5%;
	font-size: 16px;
	z-index: 16;
}
.index-wrap.fixed{
	position: fixed;
}

.index-wrap a{
	background: #FFBB1C;
	color: transparent;
	font-weight: 800;
	line-height: 2;
	width: 100%;
	height: 2em;
	padding: 0;
	color: #fff;
	text-align: center;
	display: block;
	opacity: 0;
	transition: 0s
}

.index-wrap.fixed li,
.index-wrap.fixed li a{
	background: #ccc;
}

.index-wrap li{
	position: relative;
	width: 2em;
	height: 2em;
	border-radius: 2em;
	overflow: hidden;
	background: #FFBB1C;
	margin-bottom: 0.5em;
	transition: ease-in-out 0.3s;
}

.index-wrap li::before{
	content: '1';
	position: absolute;
	top: 50%;
	left: 50%;
	font-size: 1em;
	line-height: 1;
	font-weight: 700;
	color: #fff;
	transform: translate(-50%,-55%);
	display: inline-block;
}
.index-wrap li:nth-of-type(2):before{content: '2';}
.index-wrap li:nth-of-type(3):before{content: '3';}
.index-wrap li:nth-of-type(4):before{content: '4';}
.index-wrap li:nth-of-type(5):before{content: '5';}
.index-wrap li:nth-of-type(6):before{content: '6';}
.index-wrap li:nth-of-type(7):before{content: '7';}
.index-wrap li:nth-of-type(8):before{content: '8';}
.index-wrap li:nth-of-type(9):before{content: '9';}

.index-wrap li:hover::before{ opacity: 0; }
.index-wrap li:hover{ width: 11.5em;}

.index-wrap li:hover a{ opacity: 1; transition: ease-in-out 0.15s 0.25s;}

.outlink{
	position: relative;
}

.outlink::after{
	content: '';
	width: 0.8em;
	height: 0.8em;
	background: url(../img/icon-outlink-b.webp)no-repeat center / contain;
	display: inline-block;
	margin-left: 0.3em;
}

.outlink.top::after{
	background: url(../img/icon-outlink-a.webp)no-repeat center / contain;
}

.active .outlink.top::after{
	background: url(../img/icon-outlink-b.webp)no-repeat center / contain;
}

.gototop{
	position: fixed;
	right: 1%;
	bottom: 1vw;
	line-height: 1;
	padding: 15px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
	z-index: 10;
	transform: translateY(20%);
	opacity: 0;
	transition: ease-in-out 0.5s;
	visibility: hidden;
}

.gototop img{
	width: 20px;
	height: 20px;
	line-height: 1;
}

.gototop.active {
	transform: translateY(0);
	opacity: 1;
	visibility: visible;
}

/*********************************************************

					ここからsec01

**********************************************************/

.sec01{
	position: relative;
	width: 100%;
	height: 100vh;
	pointer-events: none;
	background: #000;
	overflow: hidden;
	pointer-events: all;
}

.sec01 h1{
	position: absolute;
	top: 0;
	left: 0;
	transform: translateY(-200%);
}

.sec01-movie{
	position: relative;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#opening.sec01::before{
	content: '';
	width: 100%;
	height: 100%;
	background: #000000;
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	z-index: 2;
	opacity: 0.5;
	transition: ease-in-out 0.3s 1.3s;
}


#opening2{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
}

.svg-wrap{
	width: 100%;
}

.svg-wrap svg{
	position: relative;
	width: 88%;
	height: 88%;
	margin-left: 6%;
	transform: rotate(-10deg);
}

.svg-wrap svg.active{
	animation: drop-shadow 0.3s ease-in-out 1.3s 1 forwards;
}

@keyframes drop-shadow {
	0%   { filter: drop-shadow(10px 10px 7px rgba(0,0,0,0)); }
	100% { filter: drop-shadow(10px 10px 7px rgba(0,0,0,0.5)); }
}





/*********************************************************

					ここからcareer

**********************************************************/

.career-wrap{
	width: 100%;
	margin-top: 60px;
}

.career-boxtext{
	font-size: 18px;
	line-height: 1.2;
	padding: 0.6em 0.6em 0.5em 0.6em;
	border: solid 1px #999;
	display: inline-block;
	margin-top: 1.5em;
	align-content: center;
	vertical-align: middle;
}

.career-boxtext.mt2{margin-top: 3em;}

.career-boxtext span{
	font-size: 0.8em;
	align-content: center;
	display: inline-block;
	vertical-align: middle;
	align-content: center;
	margin-bottom: 0.4em;
}

.career-flex{
	font-size: min(1.55vw,16px);
	width: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 1em;
	margin-top: 1em;
}

.career-flex-wrap{
	width: calc(100% / 4.5);
}

.career-boxtext2{
	font-size: 1.5em;
	font-weight: 600;
	background: #668CF2;
	border: solid 0.3em #668CF2;
	color: #fff;
	text-align: center;
	box-sizing: border-box;
	border-radius: 0.3em;
}

.career-boxtext2 span{
	font-size: 0.8em;
	background: #fff;
	padding: 0.2em 0;
	margin-top: 0.2em;
	color: #668CF2;
	width: 100%;
	display: block;
	border-radius: 0.2em;
}

.career-flex-text{
	font-size: 1em;
	margin-top: 0.5em;
}

.career-flex .career-flex-wrap:first-of-type .career-boxtext2{
	background: #FFBB1C;
	border: solid 0.3em #FFBB1C;
}

.career-flex .career-flex-wrap:first-of-type .career-boxtext2 span{
	color: #FFBB1C;
}

.career-flex2{
	position: relative;
	font-size: min(1.55vw,16px);
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 1em;
	margin-top: 0.6em;
}

.career-flex2::before{
	content: '';
	position: absolute;
	top: calc(50% - 0.15em);
	left: 10%;
	width: 87%;
	height: 0.3em;
	background: #668CF2;
}

.career-flex2::after{
	content: '';
	position: absolute;
	right: 0;
	top: calc(50% + 0.15em);
	transform: translateY(-50%);
	width: 6%;
	height: auto;
	aspect-ratio: 2 / 1;
	background: url(../img/career-arrow.png)no-repeat center / contain;
}

.career-circle{
	position: relative;
	width: calc(100% / 4.5);
	text-align: center;
	font-size: 1.8em;
	line-height: 1;
	font-weight: 500;
	color: #668CF2;
	height: 3em;
	align-content: center;
	z-index: 1;
}

.career-circle span{
	font-size: 0.7em;
}

.career-circle::before{
	content: '';
	z-index: -1;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	background: #e0e8fc;
	height: 100%;
	width: auto;
	aspect-ratio: 1/1;
	border-radius: 50%;
	border: solid 0.1em #668CF2;
}

.career-flex2 .career-circle:first-of-type{
	color: #FFBB1C;
	font-size: 1.4em;
	height: 3.85em;
}
.career-flex2 .career-circle:first-of-type::before{
	background: #fff1d1;
	border: solid 0.1em #FFBB1C;
}





/*********************************************************

					ここからmassage

**********************************************************/

.massage-img01{
	position: relative;
	margin-top: 40px;
	margin-left: calc(50% - 50vw);
	width: 100vw;
	height: auto;
	display: block
}

.sec03-img01 img:nth-of-type(1){
	width: 100%;
	height: auto;
}

.massage-wrap-ex{
	position: relative;
	font-size: 16px;
	width: 100%;
	height: auto;
}

.massage-wrap{
	position: relative;
	width: 100%;
	height: auto;
	display: flex;
	align-items: center;
	gap: 5%;
	padding: 15em 0 0;
}

.massage-wrap-ex.end .massage-wrap{
	height: auto;
	padding: 0;
}

.massage-textbox{
	transform: translateY(50%);
	opacity: 0;
	transition: ease-in-out 0.5s;
	width: 60%;
}

.massage-wrap-ex.end .massage-textbox{
	width: 100%;
}

.massage-imgbox{
	width: 35%;
	height: auto;
	aspect-ratio: 1/1;
	background: #ccc;
	z-index: -1;
	transition: ease-in-out  0.5s 0.2s;
	transform: translate(25%,0);
	opacity: 0;
}

.massage-imgbox.i01{ background: url(../img/massage-img01.webp)no-repeat center / cover;}
.massage-imgbox.i02{ background: url(../img/massage-img02.webp)no-repeat center / cover;}
.massage-imgbox.i03{ background: url(../img/massage-img03.webp)no-repeat center / cover;}
.massage-imgbox.i04{ background: url(../img/massage-img04.webp)no-repeat center / cover;}
.massage-imgbox.i05{ background: url(../img/massage-img05.webp)no-repeat center / cover;}
.massage-imgbox.i06{ background: url(../img/massage-img06.webp)no-repeat center / cover;}

.massage-wrap.active .massage-imgbox{
	transform: translate(0,0);
	opacity: 1;
}

.massage-wrap-ex.end .massage-imgbox{
	display: none;
}

.massage-wrap.active .massage-textbox{
	transform: translateY(0);
	opacity: 1;
}








/*********************************************************

					ここからsec04

**********************************************************/

.sec04::before{
	content: 'WORK STYLE';
	position: absolute;
	top: 55px;
	left: 15%;
	font-size: 26em;
	font-weight: 900;
	line-height: 1;
	white-space: nowrap;
	color: #668CF2;
	display: block;
	opacity: 0.2;
	z-index: -1;
}

.sec02-flex-box2-flex-wrap{
	width: 47.5%;
}

.sec02-flex-box2-flex02{
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: space-between;
}

.sec02-bar{
	display: block;
	height: 100%;
	width: 2px;
	background: #fff;
	border-radius: 1px;
}








/*********************************************************

					ここからjob

**********************************************************/

.job-wrap{
	position: relative;
	width: 100%;
	height: auto;
	aspect-ratio: 105 / 47;
	margin-top: 40px;
	background: url(../img/job-img.webp)no-repeat center / cover;
}

.job-linkbtn01{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 38.6%;
}
.job-linkbtn02{
	position: absolute;
	top: 0;
	left: 27.6%;
	height: 100%;
	width: 44.5%;
}
.job-linkbtn03{
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 39.0%;
}

.job-linkbtn01 a{
	position: relative;
	z-index: 2;
	display: block;
	width: 100%;
	height: 100%;
	background: #fff;
	clip-path: polygon(0%0%,100%0%,67%100%,0%100%);
	opacity: 0;
}

.job-linkbtn02 a{
	position: relative;
	z-index: 2;
	display: block;
	width: 100%;
	height: 100%;
	background: #fff;
	clip-path: polygon(28%0%,72%0%,100%100%,0%100%);
	opacity: 0;
}

.job-linkbtn03 a{
	position: relative;
	z-index: 2;
	display: block;
	width: 100%;
	height: 100%;
	background: #fff;
	clip-path: polygon(0%0%,100%0%,100%100%,32%100%);
	opacity: 0;
}

.job-linkbtn01:hover a,
.job-linkbtn02:hover a,
.job-linkbtn03:hover a{
	opacity: 0.3;
}

.job-arrow{
	position: absolute;
	left: 1em;
	bottom: 1em;
	font-size: min(1.55vw,16px);
	line-height: 1.2;
	font-weight: 600;
	color: #fff;
	padding: 0.4em 2em 0.4em 0.5em;
	border: solid 2px #fff;
	z-index: 2;
}

.job-linkbtn02 .job-arrow{
	left: auto;
	right: 3em;
}

.job-linkbtn03 .job-arrow{
	left: 35%;
}

.job-arrow::after{
	content: '';
	position: absolute;
	right: -2em;
	top: 50%;
	transform: translate(0,-50%);
	display: block;
	width: auto;
	height: 0.8em;
	aspect-ratio: 16 / 5;
	background: url(../img/job-arrow.webp)no-repeat center / contain;
	animation: arrow 1.5s linear infinite;
}

@keyframes arrow {
	0%   { transform: translate(0%, -50%); }
	50%  { transform: translate(-25%, -50%); }
	100% { transform: translate(0%, -50%); }
}

.job-text{
	position: absolute;
	color: #fff;
	font-size: min(1.55vw,18px);
	line-height: 1.5;
	font-weight: 600;
	padding-left: 1em;
}

.job-text span{
	margin-left: -1em;
	margin-bottom: 0.4em;
	display: block;
	border-bottom: 1px solid #fff;
}

.job-linkbtn01 .job-text{
	position: absolute;
	top: 25%;
	right: 15%;
}

.job-linkbtn02 .job-text{
	position: absolute;
	top: 55%;
	right: 15%;
}

.job-linkbtn03 .job-text{
	position: absolute;
	top: 20%;
	left: 18%;
}



/*********************************************************

					ここからcompany

**********************************************************/

.company-flex{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.company-flex#company-target{
	max-height: 0;
	overflow: hidden;
	transition: max-height ease 0.5s;
}

.company-flex-box{
	font-size: min(2.4vw,32px);
	width: calc(94% / 3);
	aspect-ratio: 1/1;
	background: #668CF2;
	border-radius: 1vw;
	margin-top: 1.2em;
	text-align: center;
	padding: 0.7em;
	box-sizing: border-box;
}

.company-flex-box2{
	font-size: min(2.4vw,32px);
	width: 100%;
	aspect-ratio: 3 / 1;
	background: #668CF2;
	border-radius: 1vw;
	margin-top: 1.2em;
	text-align: center;
	padding: 0.7em;
	box-sizing: border-box;
}

.company-subtitle{
	font-weight: 600;
	margin-bottom: 0.7em;
	color: #fff;
	line-height: 1.3;
}

.company-subtitle02{
	color: #fff;
	font-weight: 600;
	line-height: 1;
	padding: 0.4em;
	border: solid 1px #fff;
	display: inline-block;
	margin-bottom: 0.5em;
}

.company-icon{
	width: auto;
	height: 4.2em;
	margin-bottom: 0.5em;
}

.company-icon02{
	width: auto;
	height: 6.7em;
	margin-bottom: 0.8em;
}

.company-icon03{
	width: auto;
	height: 4em;
	margin-bottom: 0.4em;
}

.company-icon03a{
	width: auto;
	height: 4.4em;
	margin-bottom: 0.4em;
}

.company-icon03b{
	width: auto;
	height: 5.4em;
	margin-bottom: 0.4em;
}

.company-icon04{
	width: auto;
	height: 3em;
	margin-bottom: 0.55em;
}

.company-text01{
	font-size: 1em;
	line-height: 1;
	letter-spacing: 0.1em;
	font-weight: 600;
	color: #fff;
	margin-bottom: 0.3em;
}
.company-text01 span{
	font-size: 3em;
	line-height: 0.8;
	font-weight: 800;
}

.company-text01.small{
	font-size: 0.8em;
	line-height: 1.3;
}

.company-text02{
	font-size: 0.6em;
	line-height: 1.5;
	font-weight: 500;
	color: #fff;
}
.company-text02.mb2{
	margin-bottom: 1.2em;
}


.company-text03{
	font-size: 0.7em;
	line-height: 1.6;
	font-weight: 600;
	color: #fff;
	text-align: left;
}

.company-text04{
	font-size: 0.6em;
	line-height: 1.7;
	font-weight: 600;
	color: #fff;
	text-align: left;
}

.company-flex-box-flex{
	display: flex;
	justify-content: center;
	gap: 1em;
}

.company-flex-box2-flex{
	display: flex;
	justify-content: space-between;
}

#company-trigger{
	position: relative;
   	font-size: min(2.4vw, 32px);
    font-weight: 700;
    color: #668CF2;
    background: #fff;
	border: solid 2px #668CF2;
    display: block;
    text-align: center;
    width: 100%;
	max-width: 500px;
    padding: 0.3em 0 0.4em;
    border-radius: 0.3em;
    margin: 1.5em auto 0;
}

#company-trigger::before,
#company-trigger::after{
	content: '';
	position: absolute;
	top: 50%;
	right: 0.5em;
	width: 1em;
	height: 2px;
	background: #668CF2;
	transform: translateY(-50%);
	transition: ease-in 0.5s;
}

#company-trigger::after{
	transform: translateY(-50%) rotate(90deg);
}

#company-trigger.active::after{
	transform: translateY(-50%) rotate(0);
}

/*********************************************************

					ここからInterview

**********************************************************/

.interview-flex{
	font-size: min(2.4vw, 32px);
	width: 90%;
	height: auto;
	aspect-ratio: 5 / 3;
	display: flex;
	margin-top: 1.2em;
	margin: 1.2em auto 0;
	transform: skewX(-10deg);
}

.interview-flex-wrap{
	position: relative;
	width: 10%;
	height: 100%;
	cursor: pointer;
	transition: ease-in-out 0.5s;
	overflow: hidden;
	padding: 1.5em 2.3em 1.5em 1.5em;
}

.interview-flex-wrap.w1,.interview-flex-wrap-sp.w1{background: #001191;}
.interview-flex-wrap.w2,.interview-flex-wrap-sp.w2{background: #0F6943;}
.interview-flex-wrap.w3,.interview-flex-wrap-sp.w3{background: #AC1191;}
.interview-flex-wrap.w4,.interview-flex-wrap-sp.w4{background: #DDA700;}

.interview-flex-wrap.active{
	width: 70%;
}

.interview-flex-textbox01{
	position: absolute;
	right: 0;
	top: 0;
	width: 3em;
	height: 100%;
	padding: 1em;
	display: flex;
	align-items: center;
	justify-content: end;	
}

.interview-flex-textbox01 .case{
	font-size: 0.63em;
	font-weight: 600;
	color: #fff;
	transform-origin: center;
	transform: rotate(-90deg);
	white-space: nowrap;
	width: 10em;
	display: block;
	margin-top: 12em;
	margin-left: 1.2em;
	text-align: right;
}

.interview-flex-textbox01 .eng{
	position: absolute;
	bottom: 10%;
	right: -38%;
	transform-origin: center;
	transform: rotate(-90deg);
	font-size: 1.8em;
	line-height: 1;
	font-weight: 800;
	color: #fff;
	width: auto;
	display: inline-block;
	margin: 0;
}

.interview-flex .interview-flex-wrap:not(:first-of-type) .eng{
	bottom: 10%;
	right: -43%;
}

.interview-imgbox{
	width: 100%;
	height: 100%;
	background: #ccc;
	overflow: hidden;
}

.interview-imgbox img{
	width: auto;
	height: 120%;
	object-fit: cover;
	transform: skewX(10deg) translate(-25%,-7%);
}

.interview-text{
	position: absolute;
	left: 1.2em;
	bottom: 1.2em;
	font-size: 1.8em;
	font-weight: 800;
	letter-spacing: -0.1em;
	color: #fff;
	line-height: 1.1;
	filter: drop-shadow(0.1em 0.1em 0.1em rgba(0,0,0,0.5));
	width: 0;
	overflow: hidden;
	opacity: 0;
}
.active .interview-text{
	width: 100%;
	transition-delay: 0.3s;
	opacity: 1;
}
.interview-text span{
	color: #FFBB1C;
}







/*********************************************************

					ここからplace

**********************************************************/


.sec.place{
	padding: 160px 0 0;
}

.place-mv-wrap{
	position: relative;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	margin-top: 60px;
}

.place-mv-wrap video{
	width: 100%;
	height: 100%;
	object-fit: cover;
	cursor: pointer;
}

.place-mv-wrap label{
	position: absolute;
	left: 10px;
	bottom: 6px;
}

.controls {
	position: absolute;
	left: 10px;
	bottom: 6px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.controls .muteBtn img{
	height: 16px;
	width: auto;
	vertical-align: baseline;
}

.volume {
  -webkit-appearance: none;
  width: 100px;
  height: 4px;
  background: #ccc;
  border-radius: 2px;
  cursor: pointer;
  transition: height 0.2s;
}

/* ホバーしたら少し太く */
.volume:hover {
  height: 6px;
}

/* Chrome / Safari */
.volume::-webkit-slider-runnable-track {
  height: 100%;
  background: linear-gradient(to right, #ff0000 var(--val, 50%), #ccc var(--val, 50%));
  border-radius: 2px;
}
.volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  background: #ff0000;
  border-radius: 50%;
  margin-top: -4px; /* つまみ位置調整 */
  cursor: pointer;
}

/* Firefox */
.volume::-moz-range-track {
  height: 100%;
  background: #ccc;
  border-radius: 2px;
}
.volume::-moz-range-progress {
  background: #ff0000;
  height: 100%;
  border-radius: 2px;
}
.volume::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: #ff0000;
  border-radius: 50%;
  cursor: pointer;
}

.place-mv-wrap label input{
	transform: translate(5%,-18%);
}

.page .place-mv-wrap label input{
	transform: translate(5%,0);
}

.seek-bar {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 5px;
	background-color: #ccc;
	cursor: pointer;
}

.seek-bar-fill {
	height: 100%;
	background-color: #668CF2;
	width: 0;
}

.mv-icon{
	position: absolute;
	top: 50%;
	left: 50%;
	font-size: 90px;
	line-height: 0.8;
	padding-bottom: 0.1em;
	width: 1.85em;
	height: 1.85em;
	text-align: center;
	align-content: center;
	transform: translate(-50%,-50%);
	color: #FFBB1C;
	border: 0.2em solid #FFBB1C;
	border-radius: 50%;
	pointer-events: none;
	opacity: 1;
}







/*********************************************************

				　　ここからFAQページ

**********************************************************/

.sec.faq{
	padding: 160px 0 0;
}

.faq-table{
	width: 100%;
	display: block;
	font-size: min(1.3vw,16px);
	margin-top: 1.5em;
}

.faq-table tbody{width: 100%;display: block;}

.faq-table tr{
	position: relative;
	width: 100%;
	border-bottom: 1px solid #ccc;
	display: block;
	cursor: pointer;
}

.faq-table tr:first-of-type{border-top: 1px solid #ccc;}

.faq-table th,
.faq-table td{
	position: relative;
	width: 100%;
	display: block;
}

.faq-table th{
	font-size: 1.8em;
	padding: 0.6em 0 0 2em;
}

.faq-table td{
	font-size: 1.4em;
	font-weight: 500;
	height: 0;
	margin-bottom: 1em;
	overflow: hidden;
	transition: ease 0.3s;
	padding-left: 2.5em;
}

.faq-table .active td{
	margin-top: 0.5em;
	height: auto;
}

.faq-table th::before{
	content: 'Q.';
	position: absolute;
	left: 0;
	top: 60%;
	transform: translateY(-50%);
	font-size: 1.5em;
}

.faq-table tr::after{
	content: '';
	position: absolute;
	right: 0; 
	top: 1.8em;
	width: 1.5em;
	height: 1px;
	background: #999;
}

.faq-table tr::before{
	content: '';
	position: absolute;
	right: 0; 
	top: 1.8em;
	width: 1.5em;
	height: 1px;
	background: #999;
	transform: rotate(90deg);
	transition: ease 0.3s;
}

.faq-table tr.active::before{
	transform: rotate(0);
}

.faq-table td::before{
	content: 'A.';
	position: absolute;
	left: 1%;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.2em;
}

.faq-table .active tr::before{
	transform: rotate(0);
}






/*********************************************************

				ここからrecruitmentページ

**********************************************************/

.sec.rec{
	padding: 160px 0;
}

.sec.rec .inner02{
	font-size: 16px;
	font-size: min(1.8vw,16px);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.subtitle-box{
	width: 100%;
	text-align: center;
	font-size: 1.8em;
	font-weight: 700;
	color: #fff;
	background: #668CF2;
	border-radius: 0.3em;
	padding: 0.2em 0 0.3em;
	margin-top: 3em;
}

.subtitle-box.mt{
	margin-top: 1.5em;
}

.recruitment-wrap{
	width: auto;
	display: inline-block;
	margin-top: 1em;
}

.recruitment-wrap dt{
	font-size: 1.8em;
	font-weight: 800;
	margin-top: 0.8em;
	margin-bottom: 0.15em;
}

.recruitment-wrap dd{
	font-size: 1em;
	line-height: 1.8;
}

.entry-btn{
	position: relative;
	font-size: 1.8em;
	font-weight: 700;
	color: #fff;
	background: #FFBB1C;
	display: block;
	text-align: center;
	width: 16em;
	padding: 0.3em 0 0.4em;
	border-radius: 0.3em;
	margin: 1em auto 0;
}
.entry-btn::after{
	content: '';
	position: absolute;
	right: 1em;
	top: 50%;
	transform: translateY(-50%);
	width: 1em;
	height: 1em;
	background: url(../img/arrow-entry.webp)no-repeat center / contain;
}



/*********************************************************

					ここからfooter

**********************************************************/

.last-mv{
	position: relative;
	width: 100%;
	height: 90vh;
	overflow: hidden;
	background: #000;
}

.end-movie{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#footer-entry{
	position: absolute;
	bottom: 5em;
	left: 50%;
	font-size: min(2.6vw,30px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.05em;
	color: transparent;
	transform: translateX(-50%) scale(1);
	background: transparent;
	padding: 0.5em 4em 0.6em;
	border-radius: 0.3em;
	border: solid #FFBB1C 0px;
}

#footer-entry::after{
	content: '';
	position: absolute;
	right: 1em;
	top: 50%;
	transform: translateY(-50%);
	width: 1em;
	height: 1em;
	background: url(../img/arrow-entry.webp)no-repeat center / contain;
	opacity: 0;
	transition: ease-in-out 0.3s 18.5s;
}

#footer-entry.active{
	animation: entry-btn 0.75s ease-in-out 18s 1 forwards;
}

#footer-entry.active::after{
	opacity: 1;
}
  
@keyframes entry-btn {
	0%   { border: solid #FFBB1C 0px;}
	33% { border: solid #FFBB1C 2px;}
	66% { border: solid #FFBB1C 2px; background: #FFBB1C;}
	100% { border: solid #FFBB1C 2px; background: #FFBB1C; color: #fff; }
}

.copyright{
	color: #111;
	text-align: center;
	font-size: 12px;
	background: #fff;
	padding: 0.5em 0;
}




/*********************************************************

					ここから下層ページ

**********************************************************/

.page-header{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding: 10px 0;
	z-index: 2;
}

.page-header img{
	width: auto;
	height: 60px;
	opacity: 1;
}

.page .sec01{
	position: relative;
	width: 100%;
	height: 100vh;
	background: #fff;
}

.page-sec01-wrap{
	position: absolute;
	top: 50%;
	left: 50%;
	font-size: 10vw;
	transform-origin: center;
	transform: translate(-50%,-50%) scale(1.3,1);
}

.page .sec01 h1{
	position: relative;
	font-weight: 600;
	line-height: 1;
	font-style: italic;
	color: #333;
	transform-origin: center;
	transform: none;
}

.page .sec01 h1 span{
	color: #FFBB1C;
}

.page .sec01 p{
	font-size: 0.2em;
	line-height: 1;
	margin-top: 0.5em;
	color: #333;
	font-weight: 500;
	transform-origin: left;
	transform:scale(0.8,1);
}

.page .sec{
	padding: 0;
}

.inner-l,
.inner-r{
	font-size: 5vw;
	position: relative;
	width: 90%;
	margin: 0;
	padding: 0.7em 0 0;
	z-index: 1;
	margin-top: 80px;
	background: #FFBB1C;
}
.inner-l.s1{margin-top: 80px;}

.inner-l{ border-radius: 0 2vw 2vw 0;}
.inner-r{ border-radius: 2vw 0 0 2vw; margin: 80px 0 0 auto;}


.inner-l .inner,
.inner-r .inner{
	width: 90%;
	max-width: 1000px;
	margin: 0 auto;
}

.sh{
	position: relative;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 1.2;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}


.s1 .sh{background: url(../img/interview01-img01.webp)no-repeat top right / cover; right: 0;}
.s2 .sh{background: url(../img/interview02-img01.webp)no-repeat top right / cover; left: 0;}
.s3 .sh{background: url(../img/interview03-img01.webp)no-repeat top right / cover; right: 0;}
.s4 .sh{background: url(../img/interview04-img01.webp)no-repeat top right / cover; left: 0;}

.s1 .sh::after{background: url(../img/interview01-img01.webp)no-repeat top right / cover; right: 0;}
.s2 .sh::after{background: url(../img/interview02-img01.webp)no-repeat top right / cover; left: 0;}
.s3 .sh::after{background: url(../img/interview03-img01.webp)no-repeat top right / cover; right: 0;}
.s4 .sh::after{background: url(../img/interview04-img01.webp)no-repeat top right / cover; left: 0;}

.sh::before{
	font-family: "Barlow Condensed", serif;
	font-size: 1.2em;
	font-weight: 600;
	line-height: 1;
	font-style: italic;
	position: absolute;
	top: 0;
	left: 5%;
	z-index: 2;
	color: #fff;
	opacity: 0.7;
	transform: translateY(-60%);
}

.s2 .sh::before,
.s4 .sh::before{
	left: 5vw;
}
.s1 .sh::before{ content: 'Interview 01';}
.s2 .sh::before{ content: 'Interview 02';}
.s3 .sh::before{ content: 'Interview 03';}
.s4 .sh::before{ content: 'Interview 04';}

.profile{
	position: absolute;
	right: 1em;
	bottom: 1em;
	color: #fff;
	background: rgba(0,0,0,0.7);
	font-size: max(0.25em , 14px);
	font-weight: 600;
	line-height: 1.4;
	padding: 0.6em;
}

.profile span{font-size: 1.5em; letter-spacing: -0.1em; line-height: 1.2;}

.sh h2 span{
	color: #FFBB1C;
}

.sh .h2-wrap{
	display: inline-block;
	line-height: 1.2;
	margin-left: 5%;
}

.sh .h2-wrap .cover{
	display: inline-block;
	transform: translateX(-101%);
	overflow: hidden;
	transition: ease 0.3s;
}

.sh .h2-wrap .cover h2{
	position: relative;
	font-size: 1em;
	font-weight: 800;
	letter-spacing: -0.05em;
	white-space: nowrap;
	color: #fff;
	display: inline-block;
	padding: 0 0.2em 0.2em 0;
	filter: drop-shadow(0.1em 0.1em 0.1em rgba(0,0,0,0.5));
	transform: translateX(101%);
	transition: ease 0.3s;
}

.sh .h2-wrap .cover h2::after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: #FFBB1C;
	transform-origin: right;
	transform: scale(1,1);
	transition: ease 0.3s 0.3s;
}

.sh .h2-wrap .cover:nth-of-type(2),
.sh .h2-wrap .cover:nth-of-type(2) h2{
	transition: ease 0.3s 0.3s;
}

.sh .h2-wrap .cover:nth-of-type(2) h2::after{
	transition: ease 0.3s 0.6s;
}

.sh.active .h2-wrap .cover{
	transform: translateX(0);
}

.sh.active .h2-wrap .cover h2{
	transform: translateX(0);
}

.sh.active .h2-wrap .cover h2::after{
	transform: scale(0,1);
}



.interview-mv-wrap{
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	background: #ccc;
}

.page .interview-wrap{
	width: 100%;
	padding: 60px 0;
}


.page .interview-wrap .inner{
	font-size: 18px;
	width: 90%;
	margin: 0 auto;
	max-width: 1000px;
}

.page .interview-wrap .inner .place-mv-wrap{margin: 0;}

.ques{
	position: relative;
	font-size: 1.4em;
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
	color: #333;
	margin-top: 1.8em;
	border-bottom: solid 1px #333;
	padding-bottom: 0.2em;
	padding-left: 1.5em;
}
.ques::before{
	content: 'Q.';
	position: absolute;
	left: 0;
	top: 0;
}

.interview-text-flex01 .ques,
.interview-border .ques{margin-top: 0;}

.ans{
	font-weight: 500;
	line-height: 1.8;
	color: #fff;
	color: #333;
	margin-top: 1.0em;
	width: 100%;
	text-align: justify;
}
.interview-border .ans{width: calc(100% - 7em);}

.interview-text-flex01{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 3em;
}

.interview-flex-imgbox{
	width: 27%;
	height: auto;
	aspect-ratio: 1 / 1;
	background: #eee;
	border-radius: 1em;
}

.interview-flex-imgbox.i01a{background: url(../img/interview01-img02.webp)no-repeat center top/ cover;}
.interview-flex-imgbox.i01b{background: url(../img/interview01-img03.webp)no-repeat center top/ cover;}
.interview-flex-imgbox.i02a{background: url(../img/interview02-img02.webp)no-repeat center top/ cover;}
.interview-flex-imgbox.i02b{background: url(../img/interview02-img03.webp)no-repeat center top/ cover;}
.interview-flex-imgbox.i03a{background: url(../img/interview03-img02.webp)no-repeat center top/ cover;}
.interview-flex-imgbox.i03b{background: url(../img/interview03-img03.webp)no-repeat center top/ cover;}
.interview-flex-imgbox.i04a{background: url(../img/interview04-img02.webp)no-repeat center / cover;}
.interview-flex-imgbox.i04b{background: url(../img/interview04-img03.webp)no-repeat center top/ cover;}

.interview-text-flex01 .textbox{
	width: 68%;
}

.interview-border{
	position: relative;
	border: solid 1px #fff;
	background: #ffeec6;
	margin-top: 3em;
	padding: 2em;
	border-radius: 1em;
}

.interview-border::after{
	content: '';
	position: absolute;
	right: -1em;
	bottom: -1em;
	width: 9em;
	height: auto;
	aspect-ratio: 100 / 59;
	background: url(../img/interview00-img01.webp)no-repeat center / contain;
}

.footer2{
	position: relative;
	width: 100%;
	border-top: 1px solid #ccc;
	padding: 40px 0 10px;
	font-size: 16px;
	z-index: 20;
}

.footer2 .inner{
	width: 90%;
	max-width: 1000px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.footer2 .inner img{
	height: 3em;
	width: auto;
}

.footer-nav{
	display: flex;
	flex-wrap: wrap;
	gap: 2em;
}

.cr{
	font-size: 12px;
	line-height: 1;
	text-align: center;
	margin-top: 2em;
}

.sec.mainjob{
	position: relative;
	width: 100%;
	padding: 160px 0;
	z-index: 1;
	font-size: 18px;
}

.ss::after,
.cs::after,
.pr::after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 150%;
	height: auto;
	aspect-ratio: 1 / 1;
	background: #1969F2;
	transform: skewX(-35deg) translateX(-100%);
	opacity: 0.1;
	z-index: -2;
}

.sec.ss::before,
.sec.cs::before,
.sec.pr::before{
	font-size: 14.44em;
}

.ss-imgbox{
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 1;
	background: #eee;
	margin-top: 40px;
}

.ss-imgbox.i01{background: url(../img/page-job-img01.webp)no-repeat center / cover;}
.ss-imgbox.i02{background: url(../img/page-job-img02.webp)no-repeat center / cover;}
.ss-imgbox.i03{background: url(../img/page-job-img03.webp)no-repeat center / cover;}

.sec.mainjob .readtext{
	font-size: 1em;
}

.sec.mainjob .readtext-sub{
	font-size: 1em; 
	padding-left: 1em; 
	margin-top: 1em; 
	line-height: 1.8;
}

.ss-boxtext{
	font-size: 32px;
	font-weight: 600;
	line-height: 1;
	color: #fff;
	background: #1969F2;
	padding: 0.3em 0 0.45em;
	text-align: center;
	margin-top: 60px;
}

.page span#id1,
.page span#id2,
.page span#id3,
.page span#id4{
	display: block;
	width: 100%;
	height: 1px;
}


.form .inner02{
	font-size: min(8.75vw,42px);
	max-width: 800px;
}

.form .inner02 h2{
	font-size: 1em;
    line-height: 1.2;
    font-weight: 800;
	text-align: center;
	margin-bottom: 1em;
}

.form .inner02 .text01{
	text-align: justify;
	font-size: 0.5em;
	line-height: 1.8;
	margin-bottom: 1em;
}

.form .inner02 .text02{
	text-align: justify;
	font-size: 0.5em;
	line-height: 1;
	font-weight: 500;
	margin-bottom: 0.2em;
}

.form .inner02 .text02.mb0{
	margin-bottom: 0;
}

.form .inner02 input,
.form .inner02 textarea{
	width: 100%;
	font-size: 0.5em;
	padding: 0.3em 0.5em;
    box-sizing: border-box;
	border: solid 1px #ccc;
	margin-bottom: 1em;
	border-radius: 0.3em;
}

.form .inner02 textarea{
	height: 5.5em;
}

.form .inner02 .flex{
	width: 100%;
	display: flex;
	align-items: center;
	margin-bottom: 0.1em;
	justify-content: space-between;
}

.form .inner02 .mail_number{
	width: 10em;
}

.form .inner02 .flex input{
	margin-bottom: 0;
}

.form .inner02 .flex select{
	width: calc(100% - 13em);
	font-size: 0.5em;
	padding: 0.5em;
    box-sizing: border-box;
	border: solid 1px #ccc;
	border-radius: 0.3em;
}

.form .inner02 label{
	display: flex;
	font-size: 0.5em;
	justify-content: flex-start;
	align-items: center;
	font-weight: 500;
	margin-left: 0.2em;
}


.form .inner02 label input{
	width: 1.1em;
    height: 1.1em;
	margin: 0 1em 0 0;
    vertical-align: middle;
    transform: scale(1.5);
}

.form .inner02 .send{
	margin-top: 1em;
	margin-bottom: 2em;
	text-align: center;
}

.form .inner02 .send .btn{
	width: 100%;
	max-width: 500px;
	background: #FFBB1C;
	font-size: 0.7em;
	font-weight: 600;
	color: #fff;
	border: 0;
}

    
/*********************************************************

			ここからメディアクエリ(タブレット）

**********************************************************/

@media screen and (max-width: 1250px){
	.inner-l, 
	.inner-r{
		width: 95%;
	}
}
	
/*********************************************************

			   ここからメディアクエリ(SP）

**********************************************************/

@media screen and (max-width: 768px){
	.pc{display: none;}
	.sp{display: block;}

	.index-wrap{display: none;}

	.btn-fixed{
		font-size: min(5.625vw,32px);
		top: 35px;
	}

	.header{
		padding: 10px 0;
	}

	.header .inner{
		width: calc(100% - 20px);
	}

	.header .inner a{
		display: contents;
	}

	.header-wrap{
		align-items: center;
	}

	.header-wrap .logo-a,
	.header-wrap .logo-b{
		height: auto;
		width: calc(100% - 55px);
		max-width: 400px;
	}

	.menu-active .header-wrap .logo-a{ display: none;}
	.menu-active .header-wrap .logo-b{ display: block;}

	.sp-menu-btn{
		position: relative;
		width: 36px;
		height: 36px;
		display: block;
		z-index: 5;
	}

	.sp-menu-btn span{
		position: absolute;
		left: 0;
		top: 16px;
		width: 100%;
		height: 5px;
		background: #fff;
		display: block;
	}
	.sp-menu-btn span::before,
	.sp-menu-btn span::after{
		content: '';
		position: absolute;
		left: 0;
		width: 100%;
		height: 5px;
		background: #fff;
		display: block;
	}
	.sp-menu-btn span::before{top: -14px;}
	.sp-menu-btn span::after{bottom: -14px;}

	.page .sp-menu-btn span,
	.page .sp-menu-btn span::before,
	.page .sp-menu-btn span::after{
		background: #111;
	}

	.active .sp-menu-btn span,
	.active .sp-menu-btn span::before,
	.active .sp-menu-btn span::after{
		background: #111;
	}

	.menu-active .sp-menu-btn span::before,
	.menu-active .sp-menu-btn span::after{
		background: #fff!important;
	}

	.menu-active .sp-menu-btn span{
		background: transparent;
	}

	.menu-active .sp-menu-btn span::before{
		top: 0;
		transform: rotate(45deg);
	}

	.menu-active .sp-menu-btn span::after{
		bottom: 0;
		transform: rotate(-45deg);
	}


	.global-menu{
		font-size: 20px;
		position: absolute;
		top: -15px;
		right: -2%;
		transform: translateX(101%);
		transition: ease-in-out 0.3s;
		width: 100vw;
		height: 100%;
	}
	.global-menu::before{
		content: '';
		position: absolute;
		width: 100%;
		height: 100vh;
		background: #000;
		opacity: 0.7;
	}

	.header.active .global-menu{
		color: #fff;
	}

	.global-menu ul{
		display: block;
		margin: 0 auto;
		width: 11em;
		padding: 80px 0 2em;
		padding-top: calc(80px + 5vw);
	}

	.global-menu ul li{
		margin-bottom: 1em;
	}

	.page .global-menu ul{
		width: 12em;
	}

	.global-menu ul li:hover::after{
		transform: scale(0,1);
	}

	.global-menu ul li a{
		position: relative;
		padding-bottom: 0.2em;
		border-bottom: 1px solid #fff;
		display: block;
	}

	.global-menu ul li a::after{
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		width: 1em;
		height: 1em;
		background: url(../img/arrow-entry.webp)no-repeat center / contain;
	}

	.page .global-menu ul li a{
		color: #fff;
	}

	.global-menu.active{
		transform: translateX(0);
	}

	.readtext{
		font-size: min(4.375vw,16px);
	}

	.sec{
		padding: 16vw 0 0;
	}

	.sec#btn{
		padding: 16vw 0;
	}

	.sec.mainjob{
		padding: 16vw 0;
	}

	.backtext::before,
	.backtext2::before{
		top: 9vw;
		left: 10%;
		font-size: min(27vw,180px);
	}

	.backtext2::after{
		transform: skewX(-35deg) translateX(-113%);
	}

	.sec-title-wrap h2{
		font-size: min(10vw,2em);
	}

	.sec-title-wrap h2 span{
		display: inline-block;
	}

	.sec-title-wrap h3{
		font-size: min(5vw,30px);
	}

	.subtitle,.subtitle2{
		font-size: min(5.1vw,32px);
	}
	.subtitle::before{
		width: 0.25em;
	}

	.subtitle{
		transform: translateX(98%);
	}

	.subtitle-wrap{
		transform: translateX(-98%);
		margin-top: 5vw;
	}

	.massage-img01{
		margin-top: 5vw;
	}

	.career-wrap{
		margin-top: 9.375vw;
	}

	.career-boxtext{
		font-size: min(4.375vw,18px);
	}

	.career-spwrap{
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: flex-start;
		gap: 5%;
	}

	.career-flex{
		width: 70%;
		max-width: 350px;
		display: block;
		font-size: min(3.75vw,16px);
		margin-top: 0;
	}

	.career-flex2{
		width: 23%;
		max-width: 90px;
		display: block;
		font-size: min(3.75vw,16px);
		margin-top: 0;
	}

	.career-flex-wrap{
		width: 100%;
		margin-top: 3.2em;
	}

	.career-flex .career-flex-wrap:first-of-type{margin-top: 1.5em;}

	.career-boxtext2{margin-top: 0;}

	.career-flex-wra .career-boxtext2:first-of-type{margin-top: 1em;}

	.career-flex-text{height: 3em;}

	.career-circle{
		width: 100%;
		height: auto;
		aspect-ratio: 1/1;
		/* background: #eee; */
		font-size: 1.5em;
		margin-top: 0.5em;
	}

	.career-flex2 .career-circle:first-of-type{height: auto; margin-top: 0.2em; font-size: 1em;}

	.career-flex2::before{
		top: 4em;
		left: calc(50% - 1px);
		width: 2px;
		height: 97%;
	}

	.career-flex2::after{
		width: 80%;
		transform: rotate(90deg);
		top: auto;
		bottom: -3.5em;
		right: auto;
		left: 10%;
	}

	.massage-wrap{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		height: auto;
		padding: 5vw 0 0;
		box-sizing: border-box;
	}

	.massage-wrap-ex.end .massage-wrap{
		height: auto;
		margin: 0;
		padding: 5vw 0 0;
	}

	.massage-textbox{
		width: 100%;
		transform: translateY(10vw);
	}

	.massage-imgbox{
		position: static;
		width: 100%;
		right: 0;
		width: 100%;
		height: auto;
		max-height: none;
		aspect-ratio: 16/9;
		transform: translate(101vw,0);
		margin-top: 2.5vw;
	}

	.massage-wrap.active .massage-imgbox{
		transform: translate(0,0);
	}

	.company-flex{
		width: 100%;
		max-width: 520px;
		margin: 0 auto;
	}

	.company-flex-box{width: 100%;}

	.company-flex-box2,.company-flex-box{
		font-size: min(3.9vw,20px);
		padding: 5vw;
		border-radius: 3vw;
	}

	.company-flex-box2-flex{
		display: block;
		margin: 0 auto;
		text-align: left;
	}

	.company-text03{
		font-size: 1em;
		display: inline-block;
		text-align: left;
	}

	.company-text03 span{display: inline-block; padding-left: 1em;}

	.company-subtitle{
		font-size: 2em;
	}

	.company-icon{height: 33vw; margin-bottom: 3vw;}

	.company-text01 {font-size: 1.5em;}
	.company-text01.small {font-size: 1.6em;}

	.company-text01 span{font-size: 4em;}

	.company-text02{font-size: 1em;}

	.company-icon03{height: 9.2em;}
	.company-icon03a{height: 9.4em;}
	.company-icon03b{height: 11.4em;}

	.company-text04{font-size: 1.2em;}

	#company-trigger{
		font-size: min(5.625vw, 32px);
	}

	.interview-flex-sp{
		width: 100%;
		margin-top: 5vw;
	}

	.interview-flex-wrap-sp{
		width: 100%;
		padding: 4vw 5vw 5vw;
		font-size: min(4.375vw,28px);
		cursor: pointer;
	}

	.interview-flex-wrap-sp a{pointer-events: none;}

	.active.interview-flex-wrap-sp a{pointer-events: all;}

	.interview-imgbox-sp{
		position: relative;
		width: 100%;
		height: 0;
		aspect-ratio: 4/3;
		overflow: hidden;
		margin-top: 0;
		background: #eee;
		transition: ease-in-out 0.3s;
	}

	.active .interview-imgbox-sp{
		height: auto;
		margin-top: 3vw;
	}

	.interview-imgbox-sp img{
		width: 100%;
		height: 100%;
		object-fit: cover;
	}


	.interview-flex-textbox01-sp .eng{
		color: #fff;
		font-size: 2em;
		font-weight: 800;
		line-height: 1.1;
	}

	.interview-flex-textbox01-sp .case{
		color: #fff;
		font-size: 0.85em;
		font-weight: 600;
	}

	.interview-text{
		font-size: 1.8em;
		left: 0.25em;
		bottom: 0.25em;
	}

	.place-mv-wrap{
		margin-top: 7.8vw;
	}

	.sec.place,.sec.faq{
		padding: 16vw 0 0;
	}

	.sec.rec{
		padding: 16vw 0;
	}

	.mv-icon{
		font-size: 15vw;
	}

	.faq-table{
		font-size: min(3.75vw,16px);
	}

	.faq-table td{
		font-size: 1em;
	}

	.faq-table th{
		font-size: 1.3em;
		padding: 0.6em 2em 0;
	}

	.faq-table th::before{
		font-size: 1.2em;
		top: 0.3em;
		transform: none;
	}

	.sec.rec .inner02{
		font-size: min(4.375vw,18px);
	}

	.recruitment-wrap dd{text-align: justify;}

	.recruitment-wrap dt{font-size: 1.5em;}

	.recruitment-wrap dt span{display: inline-block;}

	.recruitment-wrap{margin-top: 0;}

	.subtitle-box{
		margin-top: 10vw;
		font-size: 1.2em;
	}

	.subtitle-box.mt{
		margin-top: 5vw;
	}

	.entry-btn{
		font-size: 1.5em;
		max-width: 100%;
		padding-right: 1em;
	}

	.last-mv{
		position: relative;
		width: 100%;
		height: auto;
		aspect-ratio: 1/1;
	}

	.last-mv .end-movie{
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	#footer-entry{
		bottom: 7vw;
	}

	#footer-menu{
		font-size: 12px;
		gap: 0.1em 1em;
	}

	.job-wrap{
		background: none;
		margin-top: 5vw;
	}

	.job-wrap a img{
		width: 100%;
		height: auto;
	} 

	.job-linkbtn01,
	.job-linkbtn02,
	.job-linkbtn03{
		position: relative;
		left: 0;
		width: 100%;
		height: auto;
		margin-top: 2.5vw;
		display: block;
	}

	.job-linkbtn01 a,
	.job-linkbtn02 a,
	.job-linkbtn03 a{
		clip-path: none;
		width: 100%;
		height: auto;
		position: static;
		background: none;
		opacity: 1;
	}

	.job-linkbtn01 a:hover,
	.job-linkbtn02 a:hover,
	.job-linkbtn03 a:hover{
		opacity: 1;
	}

	.job-wrap span .job-text{
		font-size: min(3.75vw,24px);
		position: absolute;
		top: 1em;
		right: 1em;
		left: auto;
	}

	.job-wrap span .job-arrow{
		left: 0.5em;
		bottom: 0.5em;
		right: auto;
		font-size: min(3.43vw,20px);
		padding: 0.2em 2em 0.2em 0.5em;
		border: solid 1px #fff;
	}

	.page-sec01-wrap{
		font-size: 16vw;
		white-space: nowrap;
	}

	.page .sec01 p{
		font-size: 0.3em;
	}

	.page .sec01{
		aspect-ratio: 1/1;
	}

	.ss-imgbox{
		margin-top: 5vw;
		aspect-ratio: 3/2;
	}

	.ss-boxtext{
		margin-top: 10vw;
		font-size: min(5.714vw,32px);
		padding: 0.4em 0;
	}

	.sec.mainjob .readtext{
		font-size: min(4.375vw,16px);
		margin-top: 0.7em;
	}

	.sec.mainjob .readtext-sub{
		font-size: min(4.375vw,16px);
		margin-top: 0.7em;
	}


	.page .sec.interview{
		padding: 0 0 20vw;
	}


	.inner-l.s1,
	.inner-r.s2,
	.inner-r.s3,
	.inner-r.s4{
		width: 100%;
	}

	.sh::after{
		width: 100%;
	}

	.inner-l, .inner-r{
		padding-top: 5vw;
		border-radius: 0;
		width: 100%;
		margin-top: 25vw;
	}


	.sh{
		aspect-ratio: 16/7;
		font-size: 7.5vw;
	}

	.s3 .sh{font-size: 7vw;}

	.profile{
		right: 0;
		left: auto;
		top: calc(100% - 2em);
		bottom: auto;
		width: auto;
		display: inline-block;
		font-size: min(3.75vw,18px);
		text-align: right;
		padding: 0.6em 1em;
	}

	.s2 .profile, .s4 .profile{
		right: 0;
	}

	.page .interview-wrap{padding: 20vw 0 0;}
	.page .interview-wrap.s4{padding: 25vw 0 0;}

	.interview-text-flex01{
		margin-top: 0;
		flex-wrap: wrap;
	}

	.interview-text-flex01 .ques,
	p.ques{
		margin-top: 40px;
	}

	.interview-text-flex01 .textbox{
		width: 100%;
	}

	.interview-flex-imgbox{
		order: 2;
		width: 100%;
		margin-top: 3vw;
		aspect-ratio: 16 / 7;
		border-radius: 3vw;
	}

	.ques{
		font-size: min(5.625vw,24px);
		line-height: 1.3;
	}

	.ans{
		font-size: min(4.375vw,18px);
		margin-top: 0.5em;
	}

	.interview-border{
		padding: 5vw 5vw 15vw;
		border-radius: 3vw;
		margin-top: 40px;
	}

	.interview-border .ques{
		margin-top: 0;
	}

	.interview-border .ans{
		width: 100%;
	}

	.interview-border::after{
		right: -5vw;
		bottom: -15vw;
		bottom: 0;
		transform: translateY(50%);
	}

	.footer2{
		padding: 5vw 0 10px;
	}

	.footer2 .inner{
		display: block;
	}

	.footer2 .inner img{
		height: auto;
		width: 300px;
	}

	.footer2 .footer-nav{
		width: 100%;
		margin-top: 2vw;
		justify-content: center;
		font-size: 14px;
		gap: 0.3em 1em;
	}




}