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

	MAIN VISUAL │ メインビジュアル

--------------------------------------------------*/
#mv {
	position: relative;
	margin-top: clamp(100px, calc(100px + 100 * ((100vw - 375px) / 1545)), 200px);
	padding-bottom: clamp(50px, calc(50px + 20 * ((100vw - 375px) / 1545)), 70px);
}
#mv::before {
	content: '';
	position: absolute;
	top: 1%;
	right: 0;
	z-index: -1;
	width: 60%;
	height: 73%;
	border-radius: 20px 0 0 20px;
	background: #D6FBFF;
}
#mv::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: -1;
	width: 35%;
	height: 60%;
	border-radius: 0 20px 20px 0;
	background: #FFFAAE;
}
#mv .wrap {margin: 0 6vw 3% 6vw;}
#mv .wrap p {color: #ccc;font-size: 1vw;letter-spacing: .1em;}
#mv .wrap h1 {margin-bottom: 2%;font-weight: bold;font-size: 2.4vw;line-height: 1.6;letter-spacing: .2em;}
#mv .wrap h1 span {line-height: 1.7;}
@media only screen and ( max-width : 767px ) {
	#mv .wrap p {font-size: 2vw;}
	#mv .wrap h1 {font-size: 5vw;}
}
/*--------------------------------------------------

	MESSAGE │ メッセージ

--------------------------------------------------*/
#message {padding-top: clamp(100px, calc(100px + 140 * ((100vw - 375px) / 1545)), 240px);overflow: hidden;}
#message .inner {position: relative;max-width: 1536px;padding: 100px 0 50px;}
#message .inner::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100%;
	margin: 0 calc(50% - 50vw);
	background: #F7F7F7;
}
#message .title_common {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -20%);
	width: 100%;
}
#message .container {align-items: center;}
#message .container figure {width: 45%;}
#message .container .wrap {align-items: center;width: 44%;}
#message .container .wrap .content p {margin-bottom: calc(20px + 10 * ((100vw - 320px) / 1600));}
#message .container .wrap .content p:last-child {margin-bottom: 0;}
@media only screen and ( max-width : 767px ) {
	#message::before {top: 27%;width: 100%;height: 40%;border-radius: 0;}
	#message .container figure {width: 100%;margin-bottom: 30px;}
	#message .container .wrap {width: 100%;}
}
/*--------------------------------------------------

	WORK STYLE │ 働くポイント

--------------------------------------------------*/
#work_style .inner {max-width: 1152px;}
#work_style ul.list {margin-bottom: clamp(50px, calc(50px + 30 * ((100vw - 375px) / 1545)), 80px);}
#work_style ul.list li {
	align-items: center;
	position: relative;
	margin-bottom: clamp(50px, calc(50px + 100 * ((100vw - 375px) / 1545)), 150px);
}
#work_style ul.list li::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: -1;
	transform: translate(-50%, -50%);
	width: 20vw;
	height: 20vw;
	border-radius: 50%;
	background: #FFFAAE;
}
#work_style ul.list li:nth-child(2) {flex-direction: row-reverse;}
#work_style ul.list li:last-child {margin-bottom: 0;}
#work_style ul.list li figure {width: 50%;}
#work_style ul.list li .wrap {width: 46%;}
#work_style ul.list li .wrap h3 {
	display: flex;
	align-items: center;
	margin-bottom: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);
}
#work_style ul.list li .wrap h3 span.en {
	margin-right: clamp(10px, calc(10px + 15 * ((100vw - 375px) / 1545)), 25px);
	color: #54EDFF;
	font-size: clamp(38px, calc(38px + 10 * ((100vw - 375px) / 1545)), 48px);
	line-height: 1.4;
}
#work_style ul.list li .wrap h3 span.jp {
	flex: 1;
	font-weight: bold;
	font-size: clamp(18px, calc(18px + 12 * ((100vw - 375px) / 1545)), 30px);
	line-height: 1.4;
}
#work_style .container h3 {
	margin-bottom: clamp(40px, calc(40px + 10 * ((100vw - 375px) / 1545)), 50px);
	font-weight: bold;
	font-size: clamp(18px, calc(18px + 12 * ((100vw - 375px) / 1545)), 30px);
	text-align: center;
}
#work_style .container ul li {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: relative;
	width: 20vw !important;
	margin-bottom: 20px;
	padding: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);
	border-radius: 20px;
	background: #E9FDFF;
}
#work_style .container ul li:nth-child(even) {background: #C7F5FF;}
#work_style .container ul li::before {
	content: '';
	position: absolute;
	top: 100%;
	right: 5%;
	border-right: 20px solid #E9FDFF;
	border-bottom: 20px solid transparent;
}
#work_style .container ul li:nth-child(even)::before {border-right-color: #C7F5FF;}
#work_style .container ul li .wrap p {font-size: clamp(12px, calc(12px + 3 * ((100vw - 375px) / 1545)), 15px);}
#work_style .container ul li h4 {
	position: relative;
	margin-top: clamp(20px, calc(20px + 20 * ((100vw - 375px) / 1545)), 40px);
	padding-top: 8px;
	padding-left: clamp(25px, calc(25px + 15 * ((100vw - 375px) / 1545)), 40px);
	border-top: 1px solid #707070;
	font-weight: bold;
	font-size: clamp(13px, calc(13px + 5 * ((100vw - 375px) / 1545)), 18px);
}
#work_style .container ul li h4::before {
	content: '';
	position: absolute;
	left: 0;
	width: clamp(18px, calc(18px + 12 * ((100vw - 375px) / 1545)), 30px);
	height: clamp(18px, calc(18px + 12 * ((100vw - 375px) / 1545)), 30px);
	background: url(../img/front/work_style/Icon_shop.svg) no-repeat center / 100%;
}
@media only screen and ( max-width : 1300px ) {
	#work_style .container ul li {width: 30vw !important;}
}
@media only screen and ( max-width : 767px ) {
	#work_style ul.list li::before {width: 50vw;height: 50vw;}
	#work_style ul.list li figure {width: 100%;margin-bottom: 30px;}
	#work_style ul.list li .wrap {position: initial;transform: none;width: 100%;}
	#work_style .container ul li {width: 40vw !important;}
}
@media only screen and ( max-width : 500px ) {
	#work_style .container ul li {width: 70vw !important;}
}
/*--------------------------------------------------

	INTERVIEWE │ インタビュー

--------------------------------------------------*/
#interview {background: repeating-linear-gradient(-45deg, #fff, #fff 3px, #F7F7F7 3px, #F7F7F7 13px);}
#interview ul {display: grid;grid-template-columns: repeat(5, 1fr);gap: 90px 30px;}
#interview ul li {position: relative;transition: .3s;}
#interview ul li p {position: absolute;bottom: 10%;left: 50%;transform: translate(-50%, -50%);width: 100%;}
#interview ul li p span {
	display: block;
	position: relative;
	width: 70%;
	margin: 0 auto;
	padding: .7em 0;
	border-radius: .5em;
	background: #54EDFF;
	font-weight: bold;
	font-size: clamp(14px, calc(14px + 4 * ((100vw - 375px) / 1545)), 18px);
	line-height: 1.2;
	text-align: center;
}
#interview ul li p span::before {
	content: '';
	position: absolute;
	top: 99%;
	left: 50%;
	transform: translateX(-50%);
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 10px solid #54EDFF;
}
#interview ul li .mic {position: absolute;bottom: -10%;left: 50%;transform: translateX(-50%);}
#interview ul li .mic span {
	display: block;
	width: 4.3vw;
	max-width: 80px;
	height: 4.3vw;
	max-height: 80px;
	border-radius: 50%;
	background: #54EDFF url(../img/front/interview/Icon_mic.svg) no-repeat center / 30%;
	transition: .3s;
}
#interview ul li:hover .mic span {background-color: #E8C91A;}
@media only screen and ( max-width : 1500px ) {
	#interview ul li p span {font-size: 1vw;}
}
@media only screen and ( max-width : 1024px ) {
	#interview ul {grid-template-columns: repeat(4, 1fr);gap: 50px 20px;}
	#interview ul li p span {font-size: 1.2vw;}
	#interview ul li .mic span {width: 6vw;height: 6vw;}
}
@media only screen and ( max-width : 767px ) {
	#interview ul {grid-template-columns: repeat(3, 1fr);}
	#interview ul li p {bottom: 8%;}
	#interview ul li p span {font-size: 1.8vw;}
	#interview ul li .mic span {width: 7vw;height: 7vw;}
}
@media only screen and ( max-width : 500px ) {
	#interview ul {grid-template-columns: repeat(2, 1fr);}
	#interview ul li p {bottom: 5%;}
	#interview ul li p span {font-size: 2.7vw;}
	#interview ul li .mic span {width: 10vw;height: 10vw;}
}
/*--------------------------------------------------

	IN NUMBERS │ 数字で見る

--------------------------------------------------*/
#numbers ul {display: flex;flex-wrap: wrap;gap: 20px 2%;}
#numbers ul li {width: 32%;padding: 30px;border-radius: 30px;background: #F7F7F7;}
#numbers ul li:nth-child(1) {width: 60%;}
#numbers ul li:nth-child(2) {width: 38%;}
#numbers ul li h3 {
	margin-bottom: clamp(10px, calc(10px + 10 * ((100vw - 375px) / 1545)), 20px);
	font-weight: bold;
	font-size: clamp(16px, calc(16px + 14 * ((100vw - 375px) / 1545)), 30px);
	letter-spacing: .15em;
	text-align: center;
}
#numbers ul li h3 span {font-size: clamp(12px, calc(12px + 6 * ((100vw - 375px) / 1545)), 18px);}
#numbers ul li .container {justify-content: space-between;}
#numbers ul li .container figure:nth-child(1) {width: 58%;}
#numbers ul li .container figure:nth-child(2) {width: 36%;}
#numbers ul li:nth-child(4) figure {width: 95%;margin: 0 auto;}
#numbers ul li:nth-child(5) figure {width: 75%;margin: 0 auto;}
#numbers ul li dl {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: clamp(10px, calc(10px + 10 * ((100vw - 375px) / 1545)), 20px);
	margin-top: 10px;
}
#numbers ul li dl dt {
	font-size: clamp(12px, calc(12px + 8 * ((100vw - 375px) / 1545)), 20px);
	letter-spacing: .15em;
}
#numbers ul li dl dd {
	font-weight: bold;
	font-size: clamp(18px, calc(18px + 12 * ((100vw - 375px) / 1545)), 30px);
}
#numbers ul li dl dd span.big {font-size: 1.5em;}
#numbers ul li dl dd span.med {font-size: 1.25em;}
@media only screen and ( max-width : 1024px ) {
	#numbers ul li {width: 48%;}
	#numbers ul li:nth-child(1) {width: 100%;}
	#numbers ul li:nth-child(2) {width: 48%;}
	#numbers ul li:nth-child(2) .container {gap: 30px;}
	#numbers ul li:nth-child(2) .container figure:nth-child(1) {width: 100%;}
	#numbers ul li:nth-child(2) .container figure:nth-child(2) {width: 50%;margin: 0 auto;}
}
@media only screen and ( max-width : 500px ) {
	#numbers ul {gap: 20px;}
	#numbers ul li {width: 100%;}
	#numbers ul li:nth-child(2) {width: 100%;}
	#numbers ul li:nth-child(1) .container {gap: 30px;}
	#numbers ul li:nth-child(1) .container figure:nth-child(1) {width: 100%;}
	#numbers ul li:nth-child(1) .container figure:nth-child(2) {width: 70%;margin: 0 auto;}
}
/*--------------------------------------------------

	IDEAL CANDIDATE │ 求める人物像

--------------------------------------------------*/
#ideal .inner {max-width: 1450px;}
#ideal ul {display: grid;grid-template-columns: repeat(4, 1fr);gap: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);}
#ideal ul li {
	padding: 20px 20px 30px;
	border-radius: 30px;
	background: #F7F7F7;
}
#ideal ul li figure {
	display: flex;
	align-items: flex-end;
	height: clamp(100px, calc(100px + 112 * ((100vw - 375px) / 1545)), 212px);
	margin-bottom: clamp(20px, calc(20px + 15 * ((100vw - 375px) / 1545)), 35px);
}
#ideal ul li:nth-child(3) figure {margin-bottom: clamp(15px, calc(15px + 5 * ((100vw - 375px) / 1545)), 20px);}
#ideal ul li:nth-child(4) figure {margin-bottom: clamp(15px, calc(15px + 5 * ((100vw - 375px) / 1545)), 20px);}
#ideal ul li h3 {
	margin-bottom: clamp(10px, calc(10px + 10 * ((100vw - 375px) / 1545)), 20px);
	font-weight: bold;
	font-size: clamp(16px, calc(16px + 2 * ((100vw - 375px) / 1545)), 18px);
	text-align: center;
}
@media only screen and ( max-width : 1024px ) {
	#ideal ul {grid-template-columns: repeat(2, 1fr);}
	#ideal ul li figure {height: auto;}
	#ideal ul li:nth-child(1) {padding-top: 66px;}
	#ideal ul li:nth-child(2) {padding-top: 26px;}
	#ideal ul li:nth-child(3) {padding-top: 45px;}
	#ideal ul li:nth-child(4) {padding-top: 26px;}
}
@media only screen and ( max-width : 500px ) {
	#ideal ul {grid-template-columns: 1fr;}
}
/*--------------------------------------------------

	REQUIREMENT │ 募集要項

--------------------------------------------------*/
#requirement .inner {max-width: 1152px;}
#requirement 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;
}
#requirement table tr:first-child {border-top: 1px solid #aaa;}
#requirement table tr th {
	width: 200px;
	font-weight: bold;
	font-size: clamp(16px, calc(16px + 2 * ((100vw - 375px) / 1545)), 18px);
}
#requirement table tr td .wrap {margin-bottom: clamp(20px, calc(20px + 20 * ((100vw - 375px) / 1545)), 40px);}
#requirement table tr td .wrap:last-child {margin-bottom: 0;}
#requirement table tr td .wrap a {text-decoration: underline;}
#requirement table tr td .wrap p.round {position: relative;padding-left: 15px;}
#requirement table tr td .wrap p.round::before {
	content: '';
	position: absolute;
	top: .35em;
	left: 0;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #222;
}
#requirement table tr td .wrap ul li {position: relative;padding-left: 15px;}
#requirement table tr td .wrap ul li::before {
	content: '';
	position: absolute;
	top: .5em;
	left: 0;
	width: 10px;
	height: 10px;
	background: #222;
}
#requirement 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);}
	#requirement table tr th {display: block;width: 100%;}
	#requirement table tr td {display: block;}
}