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

	MAIN VISUAL

--------------------------------------------------*/
#mv {margin-bottom: 20vw;padding-top: 9.5vw;}
#mv .bgL,#mv .bgR {position: absolute;z-index: -1;top: 2%;width: 100%;}
#mv .bgL {left: 10%;transform: translate(-50%, -50%);}
#mv .bgR {right: 0;transform: translateX(50%);}
#mv figure {width: 90%;}
#mv .wrap {margin: 0 0 4vw 11vw;}
#mv .wrap p {margin-bottom: 1vw; color: #FC9000;font-size: .9vw;letter-spacing: .1em;}
#mv .wrap h1 {font-size: 2.5vw;line-height: 1.4;letter-spacing: .05em;}
#mv .wrap h1 span {position: relative;margin: 0 2vw 0 1vw;color: #FC9000;letter-spacing: -.2em;}
#mv .wrap h1 span::before,
#mv .wrap h1 span::after {
	content: '';
	position: absolute;
	top: 55%;
	z-index: -1;
	transform: translateY(-50%);
	width: 1.7em;
	height: 1.7em;
	border-radius: 50%;
	background: #fff;
}
#mv .wrap h1 span::before {left: -.5vw;}
#mv .wrap h1 span::after {right: -1.4vw;}
@media only screen and ( max-width : 1024px ) {
	#mv {padding-top: 13.5vw;}
	#mv .bgL, #mv .bgR {top: 9%;}
}
@media only screen and ( max-width : 767px ) {
	#mv {margin-bottom: 28vw;padding-top: 20.5vw;}
	#mv .bgL {top: 5%;width: 205%;}
	#mv .bgR {top: 80%;}
	#mv .wrap p {font-size: 2.5vw;}
	#mv .wrap h1 {font-size: 5.5vw;}
}
/*--------------------------------------------------

	MESSAGE │ メッセージ

--------------------------------------------------*/
#message .bg {top: 31%;left: 12.2%;width: 63%;}
#message .inner {max-width: 1456px;}
#message .container {align-items: center;}
#message .container figure {width: 38%;}
#message .container .wrap {width: 55%;}
#message .container .wrap p {margin-bottom: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);}
#message .container .wrap p:last-child {margin-bottom: 0;}
@media only screen and ( max-width : 767px ) {
	#message .bg {top: 20%;left: 19%;width: 100%;}
	#message .container figure {width:70%;margin: 0 auto 30px;}
	#message .container .wrap {width: 100%;}
}
/*--------------------------------------------------

	ABOUT US │ 会社情報

--------------------------------------------------*/
#about_us .bg {top: 70%;right: 7%;transform: translate(50%, -50%);width: 70%;}
#about_us .inner {max-width: 1440px;}
#about_us .container {flex-direction: row-reverse;justify-content: flex-end;align-items: center;gap: 2%;}
#about_us .container figure {width: 40%;}
#about_us .container .wrap {width: 50%;}
#about_us .container .wrap p {margin-bottom: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);}
#about_us .container .wrap p:last-child {margin-bottom: 0;}
@media only screen and ( max-width : 767px ) {
	#about_us .bg {top: 30%;right: 11.5%;width: 100%;}
	#about_us .container figure {width:70%;margin: 0 auto 30px;}
	#about_us .container .wrap {width: 100%;}
}
/*--------------------------------------------------

	WORK STYLE │ 働くポイント

--------------------------------------------------*/
#work_style .bg {top: 55%;left: 4%;width: 177%;}
#work_style ul li {align-items: flex-start;margin-bottom: clamp(50px, calc(50px + 90 * ((100vw - 375px) / 1545)), 140px);}
#work_style ul li:nth-child(even) {flex-direction: row-reverse;}
#work_style ul li:last-child {margin-bottom: 0;}
#work_style ul li figure {width: 48%;}
#work_style ul li .wrap {width: 49%;}
#work_style ul li .wrap dl {display: flex;align-items: center;margin-bottom: 10px;}
#work_style ul li .wrap dl dt {
	margin-right: clamp(10px, calc(10px + 10 * ((100vw - 375px) / 1545)), 20px);
	color: #FC9000;
	font-size: clamp(38px, calc(38px + 10 * ((100vw - 375px) / 1545)), 48px);
	line-height: 1.4;
}
#work_style ul li .wrap dl dd {
	flex: 1;
	font-weight: bold;
	font-size: clamp(18px, calc(18px + 12 * ((100vw - 375px) / 1545)), 30px);
	line-height: 1.4;
}
@media only screen and ( max-width : 767px ) {
	#work_style .bg {top: 42%;width: 300%;}
	#work_style ul li figure {width: 100%;margin-bottom: 20px;}
	#work_style ul li .wrap {width: 100%;}
}
/*--------------------------------------------------

	IN NUMBERS │ 数字で見る

--------------------------------------------------*/
#numbers ul.list {display: grid;grid-template-columns: repeat(3, 1fr);gap: 46px 38px;}
#numbers ul.list li.item {position: relative;background: #F5F5F5;}
#numbers ul.list li.item:nth-of-type(even) {background: #FEE9D9;}
#numbers ul.list li.item::before {content: '';display: block;padding-top: 100%;}
#numbers ul.list li.item .wrap {
	display: flex;
    flex-direction: column;
    justify-content: space-between;
	position: absolute;
	top: 8%;
	left: 50%;
	transform: translateX(-50%);
	width: 80%;
	height: 83%;
}
#numbers ul.list li.item .wrap h3 {
	font-weight: 600;
	font-size: clamp(15px, calc(15px + 4 * ((100vw - 375px) / 1545)), 19px);
	text-align: center;
}
#numbers ul.list li.item:nth-child(1) .wrap h3,
#numbers ul.list li.item:nth-child(2) .wrap h3,
#numbers ul.list li.item:nth-child(4) .wrap h3 {margin-bottom: 10%;}
#numbers ul.list li.item:nth-child(5) .wrap h3,
#numbers ul.list li.item:nth-child(6) .wrap h3,
#numbers ul.list li.item:nth-child(10) .wrap h3 {margin-bottom: 5%;}
#numbers ul.list li.item .wrap figure {width: 55%;margin: 0 auto -2.5%;}
#numbers ul.list li.item:nth-child(2) .wrap figure {width: 65%;margin-bottom: -4.5%;}
#numbers ul.list li.item:nth-child(3) .wrap figure {width: 90%;}
#numbers ul.list li.item:nth-child(4) .wrap figure {width: 88%;}
#numbers ul.list li.item:nth-child(5) .wrap figure {margin-bottom: -12.5%;}
#numbers ul.list li.item:nth-child(6) .wrap figure {width: 76%;}
#numbers ul.list li.item:nth-child(10) .wrap figure {width: 68%;margin-bottom: -11.5%;}
#numbers ul.list li.item .wrap p.num {position: relative;width: fit-content;margin: 0 auto;}
#numbers ul.list li.item .wrap p.num .txt {
	position: absolute;
	bottom: 22%;
	left: 108%;
	font-weight: 600;
	font-size: clamp(16px, calc(16px + 6 * ((100vw - 375px) / 1545)), 22px);
	text-align: center;
}
#numbers ul.list li.item:nth-child(2) .wrap p.num .txt {left: 125%;width: 3em;}
#numbers ul.list li.item .wrap .orange {color: #FC9000;font-weight: 600;font-size: 6.5rem;letter-spacing: -.03em;}
#numbers ul.list li.item .wrap small {
	font-weight: 600;
	font-size: clamp(12px, calc(12px + 3 * ((100vw - 375px) / 1545)), 15px);
	text-align: center;
}
#numbers ul.list li.item:nth-child(1) .wrap small {
	margin-top: -4%;
	font-size: clamp(16px, calc(16px + 3 * ((100vw - 375px) / 1545)), 19px);
}
#numbers ul.list li.item .wrap .content {display: flex;justify-content: center;align-items: baseline;gap: 15px;}
#numbers ul.list li.item .wrap .content p {font-weight: 600;text-align: center;}
#numbers ul.list li.item .wrap .content p .counter {display: block;margin-bottom: -35%;text-align: center;}
@media only screen and (max-width: 1024px) {
	#numbers ul.list li.item .wrap h3 {font-size: 1.5vw;}
	#numbers ul.list li.item .wrap .orange {font-size: 6vw;}
	#numbers ul.list li.item .wrap p.num .txt {font-size: 1.7vw;}
	#numbers ul.list li.item .wrap small {font-size: 1vw;}
	#numbers ul.list li.item:nth-child(1) .wrap small {font-size: 1.5vw;}
	#numbers ul.list li.item .wrap .content p {font-size: 1.3vw;}
	#numbers ul.list li.item .wrap .content .orange {font-size: 6vw;}
}
@media only screen and (max-width: 767px) {
		#numbers ul.list {
			grid-template-columns: repeat(2, 1fr);
			gap: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);
		}
		#numbers ul.list li.item .wrap h3 {font-size: 2.5vw;}
		#numbers ul.list li.item .wrap .orange {font-size: 10vw;}
		#numbers ul.list li.item .wrap p.num .txt {font-size: 2.7vw;}
		#numbers ul.list li.item .wrap small {font-size: 2vw;}
		#numbers ul.list li.item:nth-child(1) .wrap small {font-size: 2.5vw;}
		#numbers ul.list li.item .wrap .content p {font-size: 2.3vw;}
		#numbers ul.list li.item .wrap .content .orange {font-size: 10vw;}
}
/*--------------------------------------------------

	INTERVIEW │ インタビュー

--------------------------------------------------*/
#interview .bg {top: 39vw;right: 2.5%;transform: translate(50%, -50%);width: 164%;}
#interview .inner {max-width: 1224px;}
#interview .title {margin-bottom: clamp(170px, calc(170px + 30 * ((100vw - 375px) / 1545)), 200px);}
#interview ul {justify-content: center;gap: clamp(40px, calc(40px + 30 * ((100vw - 375px) / 1545)), 70px) 3%;}
#interview ul li {position: relative;width: 31%;background: linear-gradient(#FFEDA5, #FEE9D9);}
#interview ul li figure {
	position: absolute;
	top: -15%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 60%;
	max-width: 220px;
	margin: 0 auto;
}
#interview ul li .wrap {padding: 30px 20px 90px clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);}
#interview ul li .wrap p.num {
	margin-bottom: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);
	color: #FC9000;
	font-size: clamp(38px, calc(38px + 10 * ((100vw - 375px) / 1545)), 48px);
	line-height: 1;
	letter-spacing: .05em;
}
#interview ul li .wrap h3 {
	margin-bottom: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);
	font-weight: bold;
	font-size: clamp(18px, calc(18px + 2 * ((100vw - 375px) / 1545)), 20px);
	line-height: 1.7;
}
#interview ul li .wrap dl {display: flex;align-items: flex-start;}
#interview ul li .wrap dl dt {margin-right: 12px;font-weight: 600;font-size: 2.8rem;line-height: 1;}
#interview ul li .wrap dl dd {flex: 1;font-size: 1.4rem;}
#interview ul li .wrap p.read {
	display: inline-block;
	position: absolute;
	bottom: 30px;
	left: 50%;
	transform: translate(-50%, 0);
	width: 100%;
	max-width: 144px;
	padding: .9em 0 .7em;
	overflow: hidden;
	border-radius: 2em;
	background: #fff;
	color: #FC9000;
	line-height: 1;
	letter-spacing: .1em;
	text-align: center;
	transition: .5s;
}
#interview ul li .wrap p.read::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	width: 50px;
	height: 50px;
	background: #FC9000;
	border-radius: 50%;
	z-index: -1;
	transform: scale(0);
	transition: 1s;
}
#interview ul li:hover .wrap p.read {border-color: #FC9000;color: #fff;}
#interview ul li:hover .wrap p.read::before {transition: 1.5s;transform: scale(10);}
@media only screen and (max-width: 1024px) {
	#interview ul {gap: 180px 4%;}
	#interview ul li {width: 46%;}
}
@media only screen and (max-width: 767px) {
	#interview .inner {max-width: 360px;}	
	#interview .bg {top: 82vw;width: 250%;}
	#interview ul {grid-template-columns: repeat(1, 1fr);}
	#interview ul li {width: 100%;}
}
/*--------------------------------------------------

	IDEAL CANDIDATE │ 求める人物

--------------------------------------------------*/
#ideal_candidate .inner {max-width: 1020px;}
#ideal_candidate ul {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(20px, calc(20px + 35 * ((100vw - 375px) / 1545)), 55px);
}
#ideal_candidate ul li {position: relative;width: 100%;height: 100%;background: #FEE9D9;border-radius: 50%;}
#ideal_candidate ul li::before {content: '';display: block;padding-top: 100%;}
#ideal_candidate ul li .wrap {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 100%;}
#ideal_candidate ul li .wrap h3 {
	margin-bottom: 1%;
	color: #FC9000;
	font-weight: bold;
	font-size: clamp(38px, calc(38px + 10 * ((100vw - 375px) / 1545)), 48px);
	line-height: 1;
	letter-spacing: .05em;
	text-align: center;
}
#ideal_candidate ul li .wrap p {
	margin-bottom: 5%;
	font-weight: 600;
	font-size: clamp(16px, calc(16px + 6 * ((100vw - 375px) / 1545)), 22px);
	text-align: center;
}
#ideal_candidate ul li .wrap figure {width: 65%;margin: 0 auto;}
#ideal_candidate ul li:nth-child(2) .wrap figure {width: 50%;}
#ideal_candidate ul li:nth-child(3) .wrap figure {width: 59%;}
#ideal_candidate ul li:nth-child(4) .wrap figure {width: 70%;}
@media only screen and (max-width: 1024px) {
	#ideal_candidate ul li .wrap h3 {font-size: 4vw;}
	#ideal_candidate ul li .wrap p {font-size: 1.8vw;}
}
@media only screen and (max-width: 767px) {
	#ideal_candidate ul {gap: 10px;}
	#ideal_candidate ul li .wrap h3 {font-size: 6vw;}
	#ideal_candidate ul li .wrap p {margin-bottom: 5%;font-size: 2.2vw;line-height: 1.4;}
}
@media only screen and (max-width: 500px) {
	#ideal_candidate ul {gap: 30px;grid-template-columns: repeat(1, 1fr);width: 70%;margin: 0 auto;}
	#ideal_candidate ul li .wrap h3 {font-size: 7vw;}
	#ideal_candidate ul li .wrap p {font-size: 3.2vw;}
}
/*--------------------------------------------------

	REQUIREMENT │ 募集要項

--------------------------------------------------*/
#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: 600;font-size: clamp(14px, calc(14px + 4 * ((100vw - 375px) / 1545)), 18px);}
#requirement table tr td {padding: 15px 5px;}
#requirement table tr td .wrap {margin-bottom: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);}
#requirement table tr td .wrap:last-child {margin-bottom: 0;}
#requirement table tr td ul {position: relative;}
#requirement table tr td ul:last-child {margin-bottom: 0;}
#requirement table tr td p.square,
#requirement table tr td ul li {position: relative;padding-left: 18px;}
#requirement table tr td p.square::before,
#requirement table tr td ul.square li::before {
	content: '';
	position: absolute;
	top: 6px;
	left: 3px;
	width: 13px;
	height: 13px;
	background: #222;
}
#requirement table tr td ul.dot li::before {content: '・';position: absolute;left: 0;}
#requirement table tr td ul.star li::before {content: '★';position: absolute;left: 0;}
#requirement table tr td ul.asterisk li::before {content: '※';position: absolute;left: 0;}
#requirement table tr td ul li p {position: relative;padding-left: 20px;}
#requirement table tr td ul li p::before {content: '※';position: absolute;left: 0;}
@media only screen and ( max-width : 767px ) {
	#requirement table tr {padding: 0;}
	#requirement table tr th {display: block;width: 100%;padding: 10px;border-bottom: 1px solid #AAA;background: #eee;}
	#requirement table tr td {display: block;}
}