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

	MAIN VISUAL │ メインビジュアル

--------------------------------------------------*/
#mv {position: relative;overflow: hidden;}
#mv h1 {
    position: absolute;
    top: 8%;
    left: 4vw;
    color: #fff;
    font-weight: bold;
    font-size: 4vw;
    margin: 0;
    z-index: 1;
}
#mv h1 span {display: inline-block;position: relative;overflow: hidden;line-height: 1.5;}
.char {
    display: inline-block;
    opacity: 0;
    transform: translateY(100px) rotateX(-90deg);
    transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
}
.char.animate {opacity: 1;transform: translateY(0) rotateX(0deg);}
.char.glow {
    text-shadow: 
        0 0 5px rgba(255, 255, 255, 0.8),
        0 0 10px rgba(255, 255, 255, 0.6),
        0 0 15px rgba(255, 255, 255, 0.4),
        0 0 20px rgba(135, 206, 250, 0.8),
        0 0 35px rgba(135, 206, 250, 0.6);
}
.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1);
    border-radius: 50%;
    pointer-events: none;
    animation: particle-float 3s ease-out forwards;
}
@keyframes particle-float {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-100px) scale(0);
    }
}
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        45deg,
        rgba(255, 107, 107, 0.1) 0%,
        rgba(78, 205, 196, 0.1) 50%,
        rgba(69, 183, 209, 0.1) 100%
    );
    opacity: 0;
    transition: opacity 2s ease;
}
.overlay.active {opacity: 1;}
#mv h1:hover .char {animation: bounce 0.6s ease;}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-10px);}
    60% {transform: translateY(-5px);}
}
@media only screen and (max-width: 767px) {
	#mv h1 {top: 5%;left: 5vw;font-size: 6vw;}
	#mv h1 span {line-height: 1.2;}
}
/*--------------------------------------------------

	MESSAGE │ メッセージ

--------------------------------------------------*/
#message {
	padding-top: clamp(50px, calc(50px + 40 * ((100vw - 375px) / 1545)), 90px);
	padding-bottom: clamp(100px, calc(100px + 70 * ((100vw - 375px) / 1545)), 170px);
}
#message p.ttl {
	margin-bottom: clamp(40px, calc(40px + 20 * ((100vw - 375px) / 1545)), 60px);
	color: #0E6981;
	font-size: clamp(14px, calc(14px + 2 * ((100vw - 375px) / 1545)), 16px);
	letter-spacing: .2em;
}
#message .container h2 {width: 35%;}
#message .container .txt_wrap {align-items: center;width: 45%;}
#message .container .txt_wrap h3 {
	margin-bottom: clamp(20px, calc(20px + 8 * ((100vw - 375px) / 1545)), 28px);
	font-weight: bold;
	font-size: clamp(18px, calc(18px + 10 * ((100vw - 375px) / 1545)), 28px);
}
#message .container .txt_wrap p {font-size: clamp(15px, calc(15px + 2 * ((100vw - 375px) / 1545)), 17px);}
#message .container .txt_wrap p span{display: inline-block;border-top:solid 1px #222;width:2em; padding:0 2px 0.3em;}
@media only screen and ( max-width : 767px ) {
	#message .container h2 {width: 98%;margin-bottom: 30px;}
	#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);
}
#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 {
	color: #fff;
	font-size: clamp(14px, calc(14px + 3 * ((100vw - 375px) / 1545)), 17px);
	text-align: center;
}
#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 .en {
	position: absolute;
	bottom: 9%;
	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-top:50px;
	margin-bottom: 50px;
	font-weight: bold;
	font-size: clamp(18px, calc(18px + 16 * ((100vw - 375px) / 1545)), 34px);
	text-align: center;
	line-height: 1.7;
}
#business .info_block h2 span.small{font-size: .7em;}
#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 .info_block .container {align-items: flex-end;max-width: 895px;margin: 0 auto;}
#business .info_block .container ul {width: 37%;}
#business .info_block .container ul li {position: relative;border-radius: 10px;}
#business .info_block .container ul li:nth-child(1) {margin-bottom: 50px;padding: 15px 25px 25px;background: #FDC000;}
#business .info_block .container ul li:nth-child(1)::before {
	content: '';
	position: absolute;
	top: 0;
	left: 97%;
	z-index: -1;
	width: 60px;
	height: 100%;
	background: url(../img/front/business/info/Icon_arrowR.svg) no-repeat center / 100%;
}
#business .info_block .container ul li:nth-child(2) {padding: 17px 20px 15px;background: #184999;}
#business .info_block .container ul li h3 {font-weight: bold;font-size: 1.6rem;text-align: center;}
#business .info_block .container ul li:nth-child(1) h3 {margin-bottom: 26px;}
#business .info_block .container ul li:nth-child(2) h3 {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 4%;
	position: absolute;
	top: -9%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	margin-bottom: 5px;
	color: #184999;
	line-height: 1.3;
}
#business .info_block .container ul li:nth-child(2) h3 img {width: 15%;}
#business .info_block .container ul li:nth-child(2) figure {width: 33%;margin: 0 auto 5px;}
#business .info_block .container ul li .content p {color: #fff;font-weight: bold;font-size: 1.6rem;text-align: center;}
#business .info_block .container .wrap {position: relative;width: 57%;border: 5px solid #FDC000;border-radius: 10px;}
#business .info_block .container .wrap h3 {
	position: absolute;
	top: 3%;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	font-weight: bold;
	font-size: 1.6rem;
	text-align: center;
}
#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:nth-of-type(1) li.item {
	position: relative;
	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: #0D6A81;
	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 li.item .wrap {
	padding: clamp(10px, calc(10px + 10 * ((100vw - 375px) / 1545)), 20px);
	padding-bottom: clamp(25px, calc(25px + 10 * ((100vw - 375px) / 1545)), 35px);
	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: 30px;
}
#business .job_block ul.list li.item ul li::before {
	content: '';
	position: absolute;
	top: .3em;
	left: 0;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #0E6981;
}
#business .job_block ul.list:nth-of-type(1) li.item .wrap p.read {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: clamp(15px, calc(15px + 10 * ((100vw - 375px) / 1545)), 25px);
	color: #0E6981;
}
#business .job_block ul.list:nth-of-type(1) li.item .wrap 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 : 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 .block {position: relative;}
#map .block figure {width: 100%;border: 1px solid #707070;}
#map .block .pin {position: absolute;width:1.5%;}
#map .block .pin.modal01 {top:15.5%;left:37%;}
#map .block .pin.modal02 {top:16.2%;left:39%;}
#map .block .pin.modal03 {top:16.2%;left:45%;}
#map .block .pin.modal04 {top:17%;left:49.5%;}
#map .block .pin.modal05 {top:18.5%;left:31%;}
#map .block .pin.modal06 {top:19.5%;left:29%;}
#map .block .pin.modal07 {top:19.5%;left:34%;}
#map .block .pin.modal08 {top:24%;left:35%;}
#map .block .pin.modal09 {top:26%;left:30.5%;}
#map .block .pin.modal10 {top:26%;left:26%;}
#map .block .pin.modal11 {top:27%;left:27.5%;}
#map .block .pin.modal12 {top:37.5%;left:28.5%;}
#map .block .pin.modal13 {top:39%;left:43.5%;}
#map .block .pin.modal14 {top:39.5%;left:21%;}
#map .block .pin.modal15 {top:42%;left:18.8%;}
#map .block .pin.modal16 {top:80%;left:37%;}
#map .block .pin.modal17 {top:81%;left:40.5%;}
@media only screen and ( max-width : 1200px ) {
	#map .block .modal .wrap h3 {font-size: 1.2vw;}
	#map .block .modal .wrap .content p {font-size: 1.1vw;}
}
@media only screen and ( max-width : 767px ) {
	#map .block .pin{position: absolute;width:3.8%;}
	#map .block .pin.modal01{top:15.6%;left:59.5%;}
	#map .block .pin.modal02{top:16.2%;left:63.5%;}
	#map .block .pin.modal03{top:16.2%;left:80%;}
	#map .block .pin.modal04{top:17%;left:91%;}
	#map .block .pin.modal05{top:18%;left:43%;}
	#map .block .pin.modal06{top:19.5%;left:38%;}
	#map .block .pin.modal07{top:19.5%;left:50%;}
	#map .block .pin.modal08{top:24%;left:54%;}
	#map .block .pin.modal09{top:26%;left:42%;}
	#map .block .pin.modal10{top:26.5%;left:30.5%;}
	#map .block .pin.modal11{top:27%;left:34.5%;}
	#map .block .pin.modal12{top:38%;left:36.5%;}
	#map .block .pin.modal13{top:39%;left:75.5%;}
	#map .block .pin.modal14{top:40%;left:16.5%;}
	#map .block .pin.modal15{top:43%;left:12%;}
	#map .block .pin.modal16{top:82.5%;left:59.5%;}
	#map .block .pin.modal17{top:83.5%;left:67%;}
}
/*--------------------------------------------------

	ENVIRONMENT │ 環境を知る

--------------------------------------------------*/
#environment {overflow: hidden;background: #F6F6F6;}
#environment .container {flex-direction: row-reverse;}
#environment .container .title_common {width: 30%;}
#environment .container ul {width: 70%;margin: 0 calc(50% - 50vw);}
#environment .container ul li {margin-bottom: clamp(60px, calc(60px + 40 * ((100vw - 375px) / 1545)), 100px);}
#environment .container ul li:last-child {margin-bottom: 0;}
#environment .container ul li figure {width: 48%;}
#environment .container ul li .wrap {width: 50%;}
#environment .container ul li .wrap h3 {
	display: inline-block;
	margin-bottom: clamp(20px, calc(20px + 20 * ((100vw - 375px) / 1545)), 40px);
	padding: 2px 30px;
	background: #0E6981;
	color: #fff;
	font-weight: bold;
	font-size: clamp(16px, calc(16px + 5 * ((100vw - 375px) / 1545)), 21px);
}
#environment .container ul li .wrap .graph {
	margin-top: clamp(15px, calc(15px + 10 * ((100vw - 375px) / 1545)), 25px);
	padding: 20px;
	background: #fff;
}
@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 .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_wrap {margin-bottom: clamp(50px, calc(50px + 40 * ((100vw - 375px) / 1545)), 90px);}
#training .title_wrap p {
	margin-bottom: clamp(5px, calc(5px + 5 * ((100vw - 375px) / 1545)), 10px);
	color: #fff;
	font-size: clamp(14px, calc(14px + 2 * ((100vw - 375px) / 1545)), 16px);
	letter-spacing: .2em;
	text-align: center;
}
#training .title_wrap h2 {
	color: #fff;
	font-weight: bold;
	font-size: clamp(30px, calc(30px + 20 * ((100vw - 375px) / 1545)), 50px);
	text-align: center;
}
#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: #D5F6FF;}
#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: #0E6981;
	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: #0E6981;
}
#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: #98CDDB;}
#voice .splide__pagination li button.is-active {border-color: #0E6981;}
#voice .splide__arrow {background-image: url(../img/front/voice/Icon_arrowR.svg);}
@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 p.en {color: #fff;}
#numbers .title_common h2 {
	color: #fff;
	font-weight: bold;
	font-size: clamp(71px, calc(71px + 50 * ((100vw - 375px) / 1545)), 121px);
}
#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 .title_wrap {margin-bottom: clamp(50px, calc(50px + 40 * ((100vw - 375px) / 1545)), 90px);}
#person .title_wrap p {
	margin-bottom: clamp(5px, calc(5px + 5 * ((100vw - 375px) / 1545)), 10px);
	color: #0E6981;
	letter-spacing: .2em;
	text-align: center;
}
#person .title_wrap h2 {
	font-weight: bold;
	font-size: clamp(24px, calc(24px + 26 * ((100vw - 375px) / 1545)), 50px);
	text-align: center;
}
#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: #0E6981;
	color: #fff;
	font-weight: bold;
	font-size: clamp(14px, calc(14px + 8 * ((100vw - 375px) / 1545)), 22px);
	line-height: 1.4;
	text-align: center;
}
#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 .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: 3em;display: block;}
#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;}
}