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

	MAIN VISUAL │ メインビジュアル

--------------------------------------------------*/
#mv {position: relative;overflow: hidden;}
#mv .title_wrap {position: absolute;top: 8%;left: 4vw;z-index: 1;}
#mv .title_wrap h1 {color: #fff;font-weight: bold;font-size: 3.22vw;}
#mv .title_wrap h1 span {display: inline-block;position: relative;overflow: hidden;line-height: 1.3;}
#mv .title_wrap h1 small{display:inline-block;font-size:1.1vw;letter-spacing:1px; line-height: 1;position: absolute;bottom: -1vw;}
@media only screen and (max-width: 767px) {
	#mv .title_wrap {top: 5%;left: 5vw;}
	#mv .title_wrap h1 {font-size: 6vw;}
	#mv .title_wrap h1 small{font-size:2vw;line-height: 1.5;bottom: -6vw;}
}
/*--------------------------------------------------

	MESSAGE │ メッセージ

--------------------------------------------------*/
#message {
	padding-top: clamp(50px, calc(50px + 50 * ((100vw - 375px) / 1545)), 100px);
	padding-bottom: clamp(70px, calc(70px + 46 * ((100vw - 375px) / 1545)), 116px);
}
#message p.ttl {color: #EB1734;font-size: clamp(14px, calc(14px + 2 * ((100vw - 375px) / 1545)), 16px);letter-spacing: .2em;}
#message .container h2 {width: 30%;margin-top: clamp(40px, calc(40px + 20 * ((100vw - 375px) / 1545)), 60px);}
#message .container .txt_wrap {align-items: center;width: 45%;}
#message .container .txt_wrap h3 { 
	margin-bottom: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);
	font-weight: bold;
	font-size: clamp(20px, calc(20px + 4 * ((100vw - 375px) / 1545)), 24px);
}
#message .container .txt_wrap h3 span {color: #EB1734;}
#message .container .txt_wrap .content p:not(:last-child) {margin-bottom: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);}
@media only screen and ( max-width : 767px ) {
	#message .container h2 {width: 88%;margin-bottom: 40px;}
	#message .container .ttl_wrap {width: 100%;margin-bottom: 30px;}
	#message .container .txt_wrap {width: 100%;}
}
/*--------------------------------------------------

	What’s “Kōei Kyōgi” │ 公営競技って何？

--------------------------------------------------*/
#whats {
	position: relative;
	z-index: 1;
	padding-top: clamp(50px, calc(50px + 30 * ((100vw - 375px) / 1545)), 80px);
	padding-bottom: 50px;
	overflow: hidden;
	background: #222;
}
#whats .racing_block .title_wrap {margin-bottom: clamp(30px, calc(30px + 20 * ((100vw - 375px) / 1545)), 50px);text-align: center;}
#whats .racing_block .title_wrap h2 {
	margin-bottom: 5px;
	color: #fff;
	font-weight: bold;
	font-size: clamp(22px, calc(22px + 16 * ((100vw - 375px) / 1545)), 38px);
}
#whats .racing_block .title_wrap h2 span span {margin-left: 5px;font-size: 1.5em;letter-spacing: -.12em;}
#whats .racing_block .title_wrap p {
	color: #fff;
	font-size: clamp(10px, calc(10px + 3 * ((100vw - 375px) / 1545)), 13px);
	letter-spacing: .2em;
	text-align: center;
}
#whats .racing_block .container {
	position: relative;
	margin-bottom: 60px;
	padding-top: clamp(50px, calc(50px + 20 * ((100vw - 375px) / 1545)), 70px);
	padding-right: clamp(30px, calc(30px + 30 * ((100vw - 375px) / 1545)), 60px);
	padding-bottom: clamp(55px, calc(55px + 20 * ((100vw - 375px) / 1545)), 75px);
	flex-direction: row-reverse;
	background: #FDC000 url(../img/front/whats/img_racing.webp) no-repeat center left / contain;
}
#whats .racing_block .container::before {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: solid transparent clamp(30px, calc(30px + 20 * ((100vw - 375px) / 1545)), 50px);
	border-right: solid transparent clamp(30px, calc(30px + 20 * ((100vw - 375px) / 1545)), 50px);
	border-top: solid #FDC000 clamp(20px, calc(20px + 20 * ((100vw - 375px) / 1545)), 40px);
}
#whats .racing_block .container .wrap {width: 43%;}
#whats .racing_block .container .wrap h3 {
	margin-bottom: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);
	font-weight: bold;
	font-size: clamp(18px, calc(18px + 10 * ((100vw - 375px) / 1545)), 28px);
}
#whats .racing_block .container .wrap .content p {
	margin-bottom: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);
	font-size: clamp(14px, calc(14px + 3 * ((100vw - 375px) / 1545)), 17px);
}
#whats .racing_block .container .wrap .content p:last-child {margin-bottom: 0;}
#whats .racing_block .subtitle_wrap {
	max-width: 900px;
	margin: 0 auto clamp(50px, calc(50px + 30 * ((100vw - 375px) / 1545)), 80px);
	text-align: center;
}
#whats .racing_block .subtitle_wrap h4 {
	margin-bottom: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);
	color: #fff;
	font-weight: bold;
	font-size: clamp(18px, calc(18px + 10 * ((100vw - 375px) / 1545)), 28px);
	text-align: center;
}
#whats .racing_block .subtitle_wrap p {
	display: inline-block;
	color: #fff;
	font-size: clamp(14px, calc(14px + 3 * ((100vw - 375px) / 1545)), 17px);
}
#whats .achievement_block .title_wrap {
	display: flex;
	justify-content: center;
	gap: clamp(10px, calc(10px + 10 * ((100vw - 375px) / 1545)), 20px);
	margin-bottom: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);
}
#whats .achievement_block .title_wrap h2 {color: #fff;font-size: clamp(12px, calc(12px + 3 * ((100vw - 375px) / 1545)), 15px);}
#whats .achievement_block .title_wrap h2 span {
	display: block;
	margin-bottom: 10px;
	color: #fff;
	font-weight: bold;
	font-size: clamp(24px, calc(24px + 14 * ((100vw - 375px) / 1545)), 38px);
}
#whats .achievement_block .title_wrap a {width: 164px;}
#whats .achievement_block .title_wrap a:hover {opacity: .5;}
#whats .achievement_block .splide {max-width: 1406px;margin: 0 auto;}
#whats .achievement_block .splide__slide {padding-top: 2.5em;}
#whats .achievement_block .splide__slide figure {transform: scale(.7);margin-bottom: 15%;transition: .7s;}
#whats .achievement_block .splide__slide.is-active figure {transform: scale(1.2);padding: .6em;background: #FDC000;}
#whats .achievement_block .splide__slide .wrap {opacity: 0;text-align: center;transition: .3s;}
#whats .achievement_block .splide__slide.is-active .wrap {opacity: 1;}
#whats .achievement_block .splide__slide .wrap h2 {
	margin-bottom: clamp(15px, calc(15px + 5 * ((100vw - 375px) / 1545)), 20px);
	color: #fff;
}
#whats .achievement_block .splide__slide .wrap h2 span {
	margin-right: clamp(15px, calc(15px + 10 * ((100vw - 375px) / 1545)), 25px);
	padding-right: clamp(15px, calc(15px + 10 * ((100vw - 375px) / 1545)), 25px);
	border-right: 1px solid #fff;
	font-weight: 500;
	font-size: clamp(18px, calc(18px + 6 * ((100vw - 375px) / 1545)), 23px);
	line-height: 1.4;
}
#whats .achievement_block .splide__slide .wrap .content {margin-bottom: clamp(30px, calc(30px + 20 * ((100vw - 375px) / 1545)), 50px);}
#whats .achievement_block .splide__slide .wrap .content p {margin-bottom: clamp(10px, calc(10px + 10 * ((100vw - 375px) / 1545)), 20px);color: #fff;
}
#whats .achievement_block .splide__slide .wrap .content p:last-child {margin-bottom: 0;}
#whats .achievement_block .splide__slide .wrap a {
	padding: 17px clamp(30px, calc(30px + 40 * ((100vw - 375px) / 1545)), 70px);
	border: 1px solid #FDC000;
	border-radius: 40px;
	background: #FDC000;
	font-size: clamp(15px, calc(15px + 2 * ((100vw - 375px) / 1545)), 17px);
	letter-spacing: .1em;
	text-align: center;
}
#whats .achievement_block .splide__slide .wrap a:hover {background: #222;color: #FDC000;}
#whats .button_wrap {position: absolute;top: 34%;right: 5%;}
#whats .button_wrap .splide__arrow {background: url(../img/front/whats/Icon_arrowR.svg) no-repeat center / 100%;}
#whats .en {
	position: absolute;
	bottom: -3vw;
	left: 50%;
	z-index: -1;
	transform: translateX(-50%);
	width: 100vw;
	color: rgba(246, 246, 246, 11%);
	font-size: 12vw;
	line-height: 1;
	letter-spacing: .1em;
	text-align: center;
}
@media only screen and ( max-width : 1024px ) {
	#whats .racing_block .container {padding: 30px 20px;background-image: none;}
	#whats .racing_block .container figure {margin-bottom: 30px;}
	#whats .racing_block .container .wrap {width: 100%;}
	#whats .achievement_block .splide__slide figure {margin-bottom: 26%;}
	#whats .achievement_block .splide__slide.is-active figure {transform: scale(1.1);}
	#whats .button_wrap {top: 63vw;right: 50%;transform: translateX(50%);}
}
@media only screen and ( max-width : 500px ) {
	#whats .achievement_block .splide__slide figure {margin-bottom: 35%;transform: scale(.8);}
	#whats .achievement_block .splide__slide.is-active figure {padding: .6em;}
	#whats .button_wrap {top: 66vw;}
}
/*--------------------------------------------------

	BUSINESS │ 仕事を知る

--------------------------------------------------*/
#business {background: #F6F6F6;}
#business .info_block {margin-bottom: clamp(70px, calc(70px + 30 * ((100vw - 375px) / 1545)), 100px);}
#business .info_block h2 {
	margin-bottom: 50px;
	font-weight: bold;
	font-size: clamp(18px, calc(18px + 10 * ((100vw - 375px) / 1545)), 28px);
	text-align: center;
	line-height: 1.7;
}
#business .info_block h2 span.yellow {background: linear-gradient(transparent 50%, #FDC000 50%);}
#business .info_block h2 span.blue {background: linear-gradient(transparent 50%, #C3D9FF 50%);}
#business .info_block figure {max-width: 900px;margin: 0 auto;}
#business .job_block .title_common {display: block;}
#business .job_block ul.list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(30px, calc(30px + 40 * ((100vw - 375px) / 1545)), 70px);
}
#business .job_block ul.list:nth-of-type(1) {margin-bottom: clamp(30px, calc(30px + 40 * ((100vw - 375px) / 1545)), 70px);}
#business .job_block ul.list li.item {position: relative;}
#business .job_block ul.list:nth-of-type(1) li.item {
	position: relative;
	padding-bottom: clamp(70px, calc(70px + 40 * ((100vw - 375px) / 1545)), 110px);
	box-shadow: 3px 3px 15px rgba(0, 0, 0, 16%);
	background: #fff;
	transition: .3s;
}
#business .job_block ul.list:nth-of-type(1) li.item:hover {box-shadow: 0px 0px 4px rgba(0, 0, 0, 16%);}
#business .job_block ul.list li.item h3 {
	padding: 10px;
	background: #EB1734;
	color: #fff;
	font-weight: 500;
	font-size: clamp(16px, calc(16px + 4 * ((100vw - 375px) / 1545)), 20px);
	text-align: center;
}
#business .job_block ul.list:nth-of-type(2) li.item h3 {margin-bottom: clamp(15px, calc(15px + 10 * ((100vw - 375px) / 1545)), 25px);}
#business .job_block ul.list figure {margin-bottom: 20px;}
#business .job_block ul.list li.item .wrap {padding: 0 clamp(10px, calc(10px + 10 * ((100vw - 375px) / 1545)), 20px);background: #fff;}
#business .job_block ul.list li.item ul li {
	position: relative;
	margin-bottom: clamp(15px, calc(15px + 10 * ((100vw - 375px) / 1545)), 25px);
	padding-left: clamp(25px, calc(25px + 5 * ((100vw - 375px) / 1545)), 30px);
}
#business .job_block ul.list li.item ul li:last-child {margin-bottom: 0;}
#business .job_block ul.list li.item ul li::before {
	content: '';
	position: absolute;
	top: .3em;
	left: 0;
	width: clamp(13px, calc(13px + 3 * ((100vw - 375px) / 1545)), 16px);
	height: clamp(13px, calc(13px + 3 * ((100vw - 375px) / 1545)), 16px);
	border-radius: 50%;
	background: #EB1734;
}
#business .job_block ul.list li.item p.read {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: clamp(15px, calc(15px + 10 * ((100vw - 375px) / 1545)), 25px);
	position: absolute;
	bottom: clamp(25px, calc(25px + 10 * ((100vw - 375px) / 1545)), 35px);
	right: clamp(10px, calc(10px + 10 * ((100vw - 375px) / 1545)), 20px);
	color: #EB1734;
}
#business .job_block ul.list li.item p.read img {width: clamp(35px, calc(35px + 20 * ((100vw - 375px) / 1545)), 55px);}
@media only screen and ( max-width : 1024px ) {
	#business .info_block h2 {margin-bottom: 10%;}
	#business .info_block .container ul {display: flex;flex-direction: row-reverse;justify-content: space-between;width: 100%;margin-bottom: 6.5%;}
	#business .info_block .container ul li {width: 49%;}
	#business .info_block .container ul li:nth-child(1) {margin-bottom: 0;padding: 3% 4% 4%;}
	#business .info_block .container ul li:nth-child(1)::before {top: 60%;left: 50%;transform: translateX(-50%) rotate(90deg);width: 15%;}
	#business .info_block .container ul li:nth-child(2) {padding: 4%;}
	#business .info_block .container ul li:nth-child(1) h3 {margin-bottom: 7%;font-size: 2.3vw;}
	#business .info_block .container ul li:nth-child(2) h3 {font-size: 2.3vw;}
	#business .info_block .container ul li .content {position: absolute;top: 55%;left: 50%;transform: translate(-50%, -50%);width: 100%;}
	#business .info_block .container ul li .content p {font-size: 2.3vw;}
	#business .info_block .container .wrap {width: 100%;}
	#business .info_block .container .wrap h3 {font-size: 2.3vw;}
	#business .job_block ul.list {grid-template-columns: repeat(2, 1fr);}
}
@media only screen and ( max-width : 767px ) {
	#business .job_block ul.list:nth-of-type(1) {grid-template-columns: repeat(1, 1fr);}
}
@media only screen and ( max-width : 500px ) {
	#business .job_block ul.list {grid-template-columns: repeat(1, 1fr);}
}
/*--------------------------------------------------

	COMPANY MAP │ 地図

--------------------------------------------------*/
#map .inner {width: 80%;max-width: 1200px;}
#map h2 {
	padding: 12px 0;
	border-top: 1px solid #222;
	font-size: clamp(16px, calc(16px + 8 * ((100vw - 375px) / 1545)), 24px);
	text-align: center;
}
#map .viewport {position: relative;overflow: hidden;border: 1px solid #707070;background: #B5DFEA;}
#map .viewport ul {position: absolute;top: 2.88%;left: 1.8%;z-index: 1;}
#map .viewport ul li {display: flex;align-items: center;gap: .75vw;margin-bottom: 5%;font-weight: 500;font-size: clamp(.8vw, 1.06cqw, 16px);}
#map .viewport ul li:last-child {margin-bottom: 0;}
#map .viewport ul li img {width: 12%;}
#map .viewport .page {position: absolute;inset: 0;opacity: 0;pointer-events: none; transition: opacity 420ms ease;}
#map .viewport .page.is-active {position: relative;opacity: 1;pointer-events: auto;}
#map .viewport .page .block figure {width: 100%;}
/* 太平洋エリア */
#map .viewport .page .block .pin {position: absolute;width: 2%;}
#map .viewport .page .block .pin.gifu01 {top: 18.5%;left: 43.9%;}
#map .viewport .page .block .pin.gifu02 {top: 30.3%;left: 37%;}
#map .viewport .page .block .pin.mie01 {top: 46.35%;left: 40.5%;}
#map .viewport .page .block .pin.mie02 {top: 70.3%;left: 34%;}
#map .viewport .page .block .pin.mie03 {top: 85.3%;left: 35%;}
#map .viewport .page .block .pin.aichi01 {top: 44.3%;left: 43.9%;}
#map .viewport .page .block .pin.aichi02 {top: 42.5%;left: 46.3%;}
#map .viewport .page .block .pin.aichi03 {top: 40.5%;left: 48.7%;width: 1.8%;}
#map .viewport .page .block .pin.aichi04 {top: 61%;left: 47.8%;}
#map .viewport .page .block .pin.aichi05 {top: 58.6%;left: 51.8%;}
#map .viewport .page .block .pin.aichi06 {top: 62.5%;left: 59.6%;}
#map .viewport .page .block .pin.shizuoka01 {top: 72.3%;left: 73.3%;}
/* 日本海エリア */
#map .viewport .page .block .pin.ishikawa01 {top: 49.1%;left: 35%;}
#map .viewport .page .block .pin.toyama01 {top: 49%;left: 51.9%;}
#map .viewport .page button {
    position: absolute;
    right: 3.01%;
    bottom: 2.45%;
    transform: skewX(-28.1deg);
    width: 12.8em;
    padding: 1.33em 1.55em 1.18em 0;
    border: 0;
    background: #EB1734;
    color: #fff;
    font-weight: 600;
    font-size: clamp(.9vw, 1.16cqw, 18px);
}
#map .viewport .page button span {display: flex;justify-content: flex-end;align-items: center;gap: 1.4em;transform: skewX(28.1deg);}
#map .viewport .page button span img {width: .56em;}
@media only screen and ( max-width : 767px ) {
	#map .viewport ul {top: 1.88%;left: 2.8%;}
	#map .viewport ul li {gap: .95vw;margin-bottom: 6%;font-size: 2.71vw;}
	#map .viewport ul li img {width: 15%;}
	/* 太平洋エリア */
	#map .viewport .page .block .pin {position: absolute;width: 4.4%;}
	#map .viewport .page .block .pin.gifu01 {top: 25%;left: 30.3%;}
	#map .viewport .page .block .pin.gifu02 {top: 33.7%;left: 17.8%;}
	#map .viewport .page .block .pin.mie01 {top: 46.2%;left: 22.8%;}
	#map .viewport .page .block .pin.mie02 {top: 65.7%;left: 9.3%;}
	#map .viewport .page .block .pin.mie03 {top: 75.6%;left: 13.5%;}
	#map .viewport .page .block .pin.aichi01 {top: 44.6%;left: 30.4%;}
	#map .viewport .page .block .pin.aichi02 {top: 43.4%;left: 35.2%;}
	#map .viewport .page .block .pin.aichi03 {top: 41.6%;left: 40.3%;width: 3.9%;}
	#map .viewport .page .block .pin.aichi04 {top: 56.6%;left: 37.4%;}
	#map .viewport .page .block .pin.aichi05 {top: 56.1%;left: 46.5%;}
	#map .viewport .page .block .pin.aichi06 {top: 58.7%;left: 61.4%;}
	#map .viewport .page .block .pin.shizuoka01 {top: 66.4%;left: 88.2%;}
	/* 日本海エリア */
	#map .viewport .page .block .pin.ishikawa01 {top: 49.89%;left: 31.8%;}
	#map .viewport .page .block .pin.toyama01 {top: 47.75%;left: 70.8%;}
	#map .viewport .page button {right: 5.8%;bottom: 1.9%;width: 10.8em;padding: 1em 1.12em .93em 0;font-size: 3.05vw;}
	#map .viewport .page button span {gap: .67em;}
	#map .viewport .page button span img {width: .5em;}
}
/*--------------------------------------------------

	ENVIRONMENT │ 環境を知る

--------------------------------------------------*/
#environment {overflow: hidden;background: #F6F6F6;}
#environment .container {flex-direction: row-reverse;}
#environment .container .title_common {width: 30%;}
#environment .container .title_common h2 span span {
	background: linear-gradient(45deg, #FF6F4A, #EB1734);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
#environment .container ul {width: 79%;margin: 0 calc(50% - 50vw);}
#environment .container ul li {align-items: flex-start;margin-bottom: clamp(40px, calc(40px + 40 * ((100vw - 375px) / 1545)), 80px);}
#environment .container ul li:last-child {margin-bottom: 0;}
#environment .container ul li figure {width: 45%;}
#environment .container ul li figure.graph {padding: 2vw;background: #fff;}
#environment .container ul li .wrap {width: 52%;}
#environment .container ul li .wrap h3 {
	display: inline-block;
	margin-bottom: clamp(20px, calc(20px + 20 * ((100vw - 375px) / 1545)), 40px);
	padding: 2px 30px;
	background: #EB1734;
	color: #fff;
	font-weight: bold;
	font-size: clamp(19px, calc(19px + 2 * ((100vw - 375px) / 1545)), 21px);
}
#environment .container ul li .wrap h4 {
	margin-bottom: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);
	font-weight: 600;
	font-size: clamp(18px, calc(18px + 2 * ((100vw - 375px) / 1545)), 20px);
}
@media only screen and ( max-width : 1024px ) {
	#environment .container {flex-direction: column;}
	#environment .container ul {width: 95vw;}
}
@media only screen and ( max-width : 767px ) {
	#environment .container .title_common {width: 100%;}
	#environment .container ul {width: 100%;margin: 0 auto;}
	#environment .container ul li figure {width: 100vw;margin: 0 calc(50% - 50vw) 30px;}
	#environment .container ul li figure.graph {padding: 4vw;}
	#environment .container ul li .wrap {width: 100%;}
}
/*--------------------------------------------------

	TRAINING │ 研修制度

--------------------------------------------------*/
#training {position: relative;z-index: 1;overflow: hidden;background: url(../img/front/training/bg.webp) no-repeat center / cover;}
#training .en {
	position: absolute;
	top: 9%;
	left: 53%;
	z-index: -1;
	transform: translateX(-50%);
	width: 100vw;
	color: rgba(255, 255, 255, 35%);
	font-size: 8.7vw;
	letter-spacing: 1em;
	text-align: center;
	word-break: keep-all;
}
#training .title_common2 h2 {color: #fff;}
#training .title_common2 p.jp {color: #fff;}
#training ul {position: relative;margin-bottom: clamp(40px, calc(40px + 10 * ((100vw - 375px) / 1545)), 50px);padding-bottom: 30px;}
#training ul::before {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border-top: solid #fff clamp(18px, calc(18px + 5 * ((100vw - 375px) / 1545)), 23px);
	border-right: solid transparent clamp(25px, calc(25px + 5 * ((100vw - 375px) / 1545)), 30px);
	border-left: solid transparent clamp(25px, calc(25px + 5 * ((100vw - 375px) / 1545)), 30px);
}
#training ul li {
	position: relative;
	padding: clamp(35px, calc(35px + 30 * ((100vw - 375px) / 1545)), 65px);
	padding-right: clamp(30px, calc(30px + 50 * ((100vw - 375px) / 1545)), 80px);
	padding-left: clamp(30px, calc(30px + 50 * ((100vw - 375px) / 1545)), 80px);
}
#training ul li:nth-child(1) {width: 60%;background: #FFE0E0;}
#training ul li:nth-child(2) {width: 40%;background: #F6F6F6;}
#training ul li:nth-child(2)::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	transform: translateX(-50%);
	width: 10%;
	height: 100%;
	background: url(../img/front/training/Icon_plus.svg) no-repeat center / 100%;
}
#training ul li h3 {
	margin-bottom: clamp(15px, calc(15px + 15 * ((100vw - 375px) / 1545)), 30px);
	padding: 10px;
	border-radius: 30px;
	background: #FFF2C6;
	font-weight: 500;
	font-size: clamp(16px, calc(16px + 8 * ((100vw - 375px) / 1545)), 24px);
	letter-spacing: .2em;
	text-align: center;
}
#training ul li figure {width: 105%;margin: -5% 0 0 -5%;}
#training ul li .wrap:nth-of-type(1) {margin-bottom: clamp(20px, calc(20px + 20 * ((100vw - 375px) / 1545)), 40px);}
#training ul li .wrap h4 {
	margin-bottom: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);
	padding: 10px;
	background: #EB1734;
	color: #fff;
	font-weight: bold;
	font-size: clamp(16px, calc(16px + 6 * ((100vw - 375px) / 1545)), 22px);
	text-align: center;
}
#training ul li .wrap p {
	position: relative;
	padding-left: clamp(25px, calc(25px + 5 * ((100vw - 375px) / 1545)), 30px);
	font-weight: 500;
	font-size: clamp(14px, calc(14px + 8 * ((100vw - 375px) / 1545)), 22px);
}
#training ul li .wrap p::before {
	content: '';
	position: absolute;
	top: 8%;
	left: 0;
	border-top: solid transparent clamp(7px, calc(7px + 5 * ((100vw - 375px) / 1545)), 12px);
	border-bottom: solid transparent clamp(7px, calc(7px + 5 * ((100vw - 375px) / 1545)), 12px);
	border-left: solid #222 clamp(15px, calc(15px + 5 * ((100vw - 375px) / 1545)), 20px);
}
#training ul li:nth-child(2) img {position: absolute;right: 5%;bottom: -5%;width: 30%;}
#training h5 {
	color: #fff;
	font-weight: bold;
	font-size: clamp(18px, calc(18px + 10 * ((100vw - 375px) / 1545)), 28px);
	text-align: center;
}
#training h5 span {font-weight: 900;font-size: 1.8em;}
@media only screen and ( max-width : 1024px ) {
	#training ul li:nth-child(1) {width: 100%;}
	#training ul li:nth-child(2) {width: 100%;padding-bottom: 15%;}
	#training ul li:nth-child(2)::before {left: 50%;transform: translate(-50%, -50%);width: 8%;}
	#training ul li:nth-child(2) img {width: 25%;}
}
/*--------------------------------------------------

	VOICE │ 人物を知る

--------------------------------------------------*/
#voice .splide__track {padding-right: 10% !important;padding-left: 19% !important;text-align: right;}
#voice .splide__list {align-items: flex-end;margin-bottom: clamp(60px, calc(60px + 40 * ((100vw - 375px) / 1545)), 100px);}
#voice .splide__list .splide__slide {display: flex;align-items: flex-end;transform: skewX(-8.5deg);height: 38vw;overflow: hidden;}
#voice .splide__list .splide__slide .wrap {position: relative;width: 80%;margin: 0 auto;overflow: hidden;transition: .7s;}
#voice .splide__list .splide__slide.is-active .wrap {width: 100%;}
#voice .splide__list .splide__slide .wrap figure {transform: skewX(8.5deg);width: 125%;margin: 0 -13%;transition: .7s;}
#voice .splide__list .splide__slide.is-active .wrap figure {transition: .7s;}
#voice .splide__list .splide__slide .wrap dl {
	display: flex;
	align-items: center;
	gap: 3%;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: .5vw 1vw .5vw 1.5vw;
	background: #EB1734;
}
#voice .splide__list .splide__slide .wrap dl dt {transform: skewX(8.5deg);color: #fff;font-size: 2.3vw;letter-spacing: .1em;transition: .7s;}
#voice .splide__list .splide__slide.is-active .wrap dl dt {font-size: 3.3vw;}
#voice .splide__list .splide__slide .wrap dl dd {flex: 1;transform: skewX(8.5deg);color: #fff;font-size: .7vw;letter-spacing: .1em;transition: .7s;}
#voice .splide__list .splide__slide.is-active .wrap dl dd {font-size: .9vw;}
#voice .splide__list .splide__slide .wrap dl dd span {display: block;font-weight: bold;line-height: 1.7;}
#voice .button_wrap {display: inline-block;}
#voice .splide__pagination li button {width: 10px;border-color: #FF98A8;}
#voice .splide__pagination li button.is-active {border-color: #EB1734;}
@media only screen and ( max-width : 767px ) {
	#voice .splide__track {padding-right: 4.5% !important;}
	#voice .splide__list .splide__slide {height: 61vw;}
	#voice .splide__list .splide__slide .wrap dl {padding: .5vw 3vw;}
	#voice .splide__list .splide__slide .wrap dl dt {font-size: 4vw;}
	#voice .splide__list .splide__slide.is-active .wrap dl dt {font-size: 6vw;}
	#voice .splide__list .splide__slide .wrap dl dd {font-size: 1.1vw;}
	#voice .splide__list .splide__slide.is-active .wrap dl dd {font-size: 1.5vw;}
}
/*--------------------------------------------------

	IN NUMBERS │ 数字で見る

--------------------------------------------------*/
#numbers {background: url(../img/front/in_numbers/bg.webp) no-repeat top center / cover;text-align: center;}
#numbers .title_common {display: block;}
#numbers .title_common h2 {color: #fff;}
#numbers .title_common p.jp {background: #fff;background-clip: text;-webkit-text-fill-color: transparent;}
#numbers ul {display: grid;grid-template-columns: repeat(3, 1fr);gap: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);}
@media only screen and ( max-width : 767px ) {
	#numbers ul {grid-template-columns: repeat(2, 1fr);}
}
/*--------------------------------------------------

	THE KIND OF PERSON WE SEEK │ 求める人物像

--------------------------------------------------*/
#person {
	position: relative;
	z-index: 1;
	padding-bottom: clamp(100px, calc(100px + 80 * ((100vw - 375px) / 1545)), 180px);
	overflow: hidden;
	background: #F6F6F6;
}
#person .inner {max-width: 1300px;}
#person ul li {width: 30%;}
#person ul li figure {margin-bottom: -1em;}
#person ul li p {text-align: center;}
#person ul li p span {
	display: inline-block;
	padding: 10px 14px;
	background: #EB1734;
	color: #fff;
	font-weight: bold;
	font-size: clamp(14px, calc(14px + 8 * ((100vw - 375px) / 1545)), 22px);
	text-align: center;
}
#person ul li p span:first-child {margin-bottom: -10px;}
#person .en {position: absolute;bottom: 4%;left: 50%;z-index: -1;transform: translateX(-50%);width: 100vw;color: #fff;font-size: 6.7vw;text-align: center;}
@media only screen and ( max-width : 1024px ) {
	#person ul {justify-content: center;gap: 30px 5%;}
	#person ul li {width: 40%;}
}
@media only screen and ( max-width : 767px ) {
	#person ul li {width: 80%;}
	#person .en {bottom: 0;}
}
/*--------------------------------------------------

	RECRUIT │ 募集要項

--------------------------------------------------*/
#recruit .title_common3 {background-image: url(../img/front/recruit/bg_title.webp);}
#recruit .inner {max-width: 1040px;}
#recruit table tr {
	display: block;
	padding-top: clamp(10px, calc(10px + 5 * ((100vw - 375px) / 1545)), 15px);
	padding-bottom: clamp(10px, calc(10px + 5 * ((100vw - 375px) / 1545)), 15px);
	border-bottom: 1px solid #bbb;
}
#recruit table tr:last-child {border-bottom: none;}
#recruit table tr th {
	width: 205px;
	font-weight: bold;
	font-size: clamp(14px, calc(14px + 2 * ((100vw - 375px) / 1545)), 16px);
	letter-spacing: .1em;
}
#recruit table tr td {font-size: clamp(14px, calc(14px + 2 * ((100vw - 375px) / 1545)), 16px);letter-spacing: .1em;}
#recruit table tr td .wrap {margin-bottom: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);}
#recruit table tr td .wrap:last-child {margin-bottom: 0;}
#recruit table tr td dl dt {float: left;}
#recruit table tr td dl dd {padding-left: 105px;}
#recruit table tr td p.square,
#recruit table tr td ul li {position: relative;padding-left: 20px;}
#recruit table tr td p.square::before,
#recruit table tr td ul li::before {position: absolute;top: 0;left: 0;}
#recruit table tr td p.square::before,
#recruit table tr td ul.square li::before {content: '';top: .37em;width: 15px;height: 15px;background: #333;}
#recruit table tr td ul.crystal li::before {content: '※';}
#recruit table tr td ul.double li::before {content: '◎';}
@media only screen and ( max-width : 767px ) {
	#recruit table tr th {display: block;width: 100%;}
	#recruit table tr td {display: block;}
}