@CHARSET "UTF-8";

/* COMMON */
body{margin:0;font-family:"Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;color:#333;line-height:1.6;font-weight:bold;}
a{text-decoration:none!important;color:inherit;}
ul{list-style:none;padding:0;}
figure{margin:0;line-height:0;text-align:center;}
img{height:auto;max-width:100%;}
p,th,td,li,dt,dd,a,figcaption{line-height:2;}
p{margin:0 0 20px;}
p:last-of-type{margin:0;}

/* HEADER ACTION */
.site-header.f-color{ background-color:transparent; }

.inner{
	margin:auto;
	max-width:1200px;}
.btn-title{
	margin:0 0 35px;}
.btn-title .title-en{
	margin:0;
	font-size:60px;
	text-shadow:6px 6px 0 rgba(53, 164, 200, 0.2);}
.btn-title .title-jp{
	font-size:24px;
	margin:-20px 0 0;}
.btn-dft{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	margin-left:auto;
	margin-right:auto;
	color:#FFF;
	background:#a6df00;
	max-width:240px;
	height:64px;
	padding:0 30px 0 0;
	box-sizing:border-box;
	transition:0.3s;
	box-shadow:8px 8px 8px 0 rgba(0, 0, 0, 0.2);}
.btn-dft::after{
	content:'';
	position:absolute;
	top:0;
	bottom:0;
	right:15px;
	margin:auto;
	width:30px;
	height:30px;
	background-repeat:no-repeat;
	background-image:url('../other/arrow.svg');}
.btn-dft:hover{
	color:#FFF!important;
	background:#6ca400;}
.left-content{
	z-index:2;
	position:relative;}
.left-textbox{
	overflow:hidden;
	width:80%;
	margin:0 0 0 auto;}
.left-textbox .btn-title .title-en{
	text-shadow:6px 6px 0 rgba(53, 164, 200, 0.5);}
@media only screen and (min-width:768px){
	.btn-title .title-en{
		font-size:90px;}
	.btn-title .title-jp{
		font-size:28px;}
}
@media only screen and (min-width:1024px){
	.btn-title .title-en{
		font-size:85px;}
	.btn-title .title-jp{
		font-size:32x;}
	.left-textbox{
		width:50%;}
}
@media only screen and (min-width:1300px){
	.btn-title .title-en{
		font-size:110px;}
}
@media only screen and (max-width:1024px){
	.btn-title .title-en{
		font-size:75px;}
	.btn-title .title-jp{
		font-size:25px;}
}
@media only screen and (max-width:500px){
	.btn-title .title-en{
		font-size:46px;}
	.btn-title .title-jp{
		font-size:20px;}
	.left-content p{
		text-shadow:0 0 4px rgb(12 113 137);
		padding:5px;
		font-size:14px;}
}

/* HERO HEADER */
.hero-header{
	width:100%;
	height:770px;
	position:relative;
	background-position:center;
	background-size:cover;
	background-image:url("../image/mv_bg.webp");}
.hero-container{
	display:flex;
	height:100%;
	width:100%;
	margin:0 auto;
	position:relative;}
.hero-visual{
	flex:1;
	position:relative;
	z-index:1;}
.hero-car{
	position:absolute;
	top:0;
	left:0;
	height:calc(100% + 55px);}
.hero-content{
	flex:1;
	display:flex;
	flex-wrap:wrap;
	flex-direction:column;
	justify-content:center;
	align-items:flex-start;
	margin:auto 0 0;
	padding:0 60px 0 0;
	z-index:2;
	color:#fff;
	height:500px;}
.text-wrapper{
	margin:0 0 0 auto;}
.payment-methods{
	margin:30px 0 0 auto;}
.hero-title{
	font-size:4.5rem;
	font-weight:bold;
	line-height:1.2;
	text-shadow:2px 2px 10px rgba(0,0,0,0.3);}
.hero-title img{
	width:700px;}
.hero-title .sub-title{
	display:block;
	font-size:1rem;
	text-align:right;
	letter-spacing:0.1em;
	margin-top:10px;}
.payment-methods img{
	height:auto;}
.scroll-indicator{
	position:absolute;
	bottom:20px;
	left:20px;
	color:#fff;
	writing-mode:vertical-rl;
	font-size:16px;
	letter-spacing:0.2em;
	z-index:10;
	padding:0 0 15px;}
.scroll-indicator::before{
	content:'';
	width:10px;
	height:10px;
	border-top:2px solid #94c3d2;
	border-right:2px solid #94c3d2;
	-webkit-transform:rotate(135deg);
	-ms-transform:rotate(135deg);
	transform:rotate(135deg);
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
	-webkit-transition:all .3s ease 0s;
	-o-transition:all .3s ease 0s;
	transition:all .3s ease 0s;}
@media (max-width:1023px){
	.hero-header{
		height:750px;}
	.hero-container{
		flex-direction:column;}
	.hero-visual{
		height:100%;
		width:100%;
		order:2;
		position:absolute;
		top:0;
		bottom:0;
		margin:auto;}
	.hero-content{
		padding:60px 0;
		width:auto;
		margin:auto;
		height:100%;
		order:1;
		align-items:center;
		padding-left:0;
		text-align:center;
		max-width:570px;
		justify-content:space-between;}
	.text-wrapper{
		margin:20px;}
	.hero-title{
		font-size:2.5rem;}
	.hero-title img{
		width:330px;}
	.hero-car{
		width:auto;
		height:450px;
		top:0;
		bottom:0;
		right:0;
		margin:auto;}
	.payment-methods{
		margin:0 0 10px;}
	.scroll-indicator{
		left:50%;
		transform:translateX(-50%);
		writing-mode:horizontal-tb;}
}

/* NEWS */
.news-section{
	padding:50px 20px;
	background-repeat:no-repeat;
	background-image:url(../image/news_bg.webp);
	background-size:cover;
	background-position:bottom;}
.news-section .title-en{
	color:#1595bf;}
.news-section .btn-dft{
	margin:0 0 0 auto;}
.news-list-area{
	max-width:710px;
	width:100%;}
.news{
	margin:0 0 60px;}
.news dt{
	display:flex;
	align-items:center;}
.news dt .news-date{
	font-size:15px;}
.news dt .news-category{
	display:inline-block;
	text-align:center;
	line-height:1.8;
	padding:5px;
	width:8rem;
	transform:scale(0.8);
	background:#2a95bf;
	color:#FFF;}
.news dd{
	margin:0 0 15px;
	padding:0 0 15px;
	border-bottom:1px solid #e0e0e0;}
.news dd:last-of-type{
	margin:0;
	padding:0;
	border-bottom:none;}
@media only screen and (min-width:1024px){
	.news-section{
		padding:140px 20px 85px;}
	.news-wrapper{
		display:flex;
		justify-content:space-between;
		gap:60px;}
	.news{
		display:grid;
		grid-template-columns:auto 1fr;}
	.news dt,
	.news dd{
		padding:30px 0;}
	.news dt{
		border-bottom:1px solid #e0e0e0;
		gap:25px;}
	.news dd{
		margin:0;
		display:flex;
		align-items:center;}
	.news dt:last-of-type,
	.news dd:last-of-type{
		padding:30px 0;}
	.news dt:last-of-type{
		border-bottom:none;}
	.news dd a{
		margin:0 0 0 25px;}
	.news dt .news-category{
		width:110px;
		padding:5px 2rem;}
}

/* PLAN */
.plan-section{
	color:#FFF;
	background:linear-gradient(45deg,rgba(22,150,191,1) 0%, rgba(83, 197,190,1) 100%);
	padding:100px 20px;}
.plan-section .inner{
	position:relative;}
.plan-image{
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
	position:absolute;
	clip-path:polygon(0 0, 100% 0%, 75% 100%, 0% 100%);
	height:65%;
	width:75%;
	left:-30px;
	top:0;
	bottom:auto;
	margin:auto;
	z-index:1;}
.plan-section .left-textbox{
	padding:20px 20px 20px 0;}
.plan-section .btn-dft{
	margin:0 0 0 auto;}
@media only screen and (min-width:1024px){
	.plan-section{
		padding:100px 20px;}
	.plan-image{
		clip-path:polygon(25% 0%, 100% 0%, 80% 100%, 0% 100%);
		height:100%;
		width:75%;
		bottom:0;
		left:0;}
	.plan-section .left-textbox{
		padding:75px 20px 75px 0;}
}
@media only screen and (max-width:500px){
	.plan-image{
		clip-path:polygon(0 0, 100% 0%, 55% 100%, 0% 100%);
		height:50%;
		width:80%;}
}

/* LINEUP CARDS */
.lineup-section{
	padding:70px 20px;
	background-position:right top;
	background-repeat:no-repeat;
	background-image:url(../image/lineup.webp);}
.lineup-section .title-en{
	color:#1595bf;}
.lineup-section .swiper-wrapper{
	transition-timing-function:linear!important;}
.lineup-grid.swiper{
	padding:0;}
.lineup-grid .swiper-slide{
	width:auto;}
.lineup-scrollbar{
	margin:45px auto 0;
	padding:0 0 20px;
	max-width:1200px;
	position:relative;}
.lineup-grid .swiper-scrollbar{
	position:relative;
	max-width:300px;
	margin:auto;
	width:100%;
	overflow:hidden;
	height:4px;
	border-radius:0;}
.lineup-grid .swiper-scrollbar-drag{
	background:#1ea1c6;}
.lineup-grid .card{
	overflow:hidden;
	box-shadow:8px 8px 8px rgba(0, 0, 0, 0.2);
	position:relative;
	margin:0 0 30px;}
.lineup-grid .card:last-child{
	margin:0;}
.lineup-section .btn-dft{
	width:100%;
	background:#e1f5fa;
	color:#1595bf;
	margin-top:45px;
	max-width:780px;}
.lineup-section .btn-dft::after{
	background-image:url(../other/arrow_blue.svg);}
.lineup-section .btn-dft:hover{
	color:#1595bf!important;
	transform:translateY(2px);
	box-shadow:none;}
.card-img img{
	height:350px;
	object-fit:cover;
	object-position:top;}
.card-body{
	position:absolute;
	bottom:0;
	padding:20px 20px 55px;
	background:linear-gradient(0deg,rgba(17, 143, 192, 1) 0%, rgba(17, 143, 192, 0) 100%);
	color:#333;
	width:100%;}
.card-body h4{
	margin:0 0 10px;
	color:#FFF;
	font-size:20px;}
.card-body p{
	margin:0;
	color:#FFF;
	height:calc(1em * 2 * 3);
	overflow:hidden;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:3;}
.arrow-link{
	position:absolute;
	bottom:20px;
	right:20px;
	width:30px;
	height:30px;
	display:flex;
	align-items:center;
	justify-content:center;
	background-repeat:no-repeat;
	background-image:url('../other/arrow.svg');
	color:#FFF;}
.card-link{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;}
.card-link span{
	display:none;}
@media only screen and (min-width:1024px){
	.lineup-section{
		padding:140px 20px;}
	.lineup-grid .card{
		margin:0;}
	.lineup-grid .swiper-scrollbar{
		margin:0;}
	.lineup-section .btn-dft{
		font-size:1.5em;
		margin-top:85px;}
	.card-img img{
		height:400px;}
	.card-body{
		padding:20px 20px 60px;}
	.card-body h4{
		font-size:25px;}
	.arrow-link{
		width:40px;
		height:40px;}
}
@media screen and (min-width:1460px) and (max-width:1690px){
	.card-body h4.card-adjust{
		font-size:23px;}
}
@media screen and (min-width:1440px) and (max-width:1459px){
	.card-body h4.card-adjust{
		font-size:20px;}
}
@media screen and (min-width:1024px) and (max-width:1440px){
	.card-body h4.card-adjust{
		font-size:20px;}
}
@media only screen and (max-width:450px){
	.card-body h4.card-adjust{
		font-size:18px;}
}

/* COMPANY */
.company-section{
	color:#FFF;
	position:relative;
	overflow:hidden;
	background:#FFF;
	padding:100px 20px;}
.company-section::after{
	content:'';
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:90%;
	background:linear-gradient(45deg,rgba(83,197,190,1) 0%, rgba(22,150,191,1) 100%);}
.company-section .btn-dft{
	text-shadow:none;
	margin:0;}
.company-image{
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
	position:absolute;
	clip-path:polygon(0 0, 75% 0, 100% 100%, 0% 100%);
	height:45%;
	width:70%;
	left:0;
	top:0;
	z-index:1;}
.company-section .left-textbox{
	padding:0 0 20px;}
@media only screen and (min-width:1024px){
	.company-section{
		padding:145px 20px;}
	.company-image{
		clip-path:polygon(0 0, 85% 0, 100% 100%, 0% 100%);
		width:60%;
		height:80%;}
}
@media only screen and (max-width:500px){
	.company-image{
		clip-path:polygon(0 0, 55% 0, 100% 100%, 0% 100%);
		height:60%;
		width:80%;}
	.company-image::after{
		content:'';
		position:absolute;
		bottom:0;
		left:0;
		width:100%;
		height:100%;
		background-color:rgb(45 92 129 / 30%);}
}

/* RECRUIT */
.recruit-section{
	color:#FFF;
	position:relative;
	padding:80px 20px;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center top 15%;}
.recruit-section::after{
	box-sizing:border-box;
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.5);}
.recruit-section .btn-title .title-en{
	text-shadow:6px 6px 0 rgba(56, 56, 56, 0.5);}
.recruit-section .inner{
	position:relative;
	z-index:1;}
.recruit-text-box{
	max-width:745px;
	margin:0 0 0 auto;}
.catch-copy{
	font-size:25px;
	margin:0 0 20px;
	display:flex;
	align-items:center;
	gap:15px;}
.catch-copy img{
	width:82px;
	height:117px;}
.description{
	margin:0 0 35px;}
@media only screen and (min-width:1024px){
	.recruit-section{
		padding:175px 20px;}
	.catch-copy{
		font-size:50px;}
	.recruit-content .btn-dft{
		margin:0 0 0;}
}
@media only screen and (max-width:480px){
	.catch-copy{
		font-size:20px;
		gap:10px;}
	.catch-copy img{
		width:35px;
		height:50px;}
}

/* CONTACT */
.contact-section{
	padding:80px 20px;
	text-align:center;
	background-repeat:no-repeat;
	background-image:url('../image/contact_bg.webp');
	background-size:cover;
	background-position:bottom;
	position:relative;}
.contact-title{
	font-size:25px;
	max-width:730px;
	width:calc(100% - 40px);
	margin:0 auto 10%;
	position:relative;
	z-index:1;}
.contact-ttl-txt{
	position:relative;
	z-index:1;}
.contact-bg{
	position:absolute;
	margin:auto;
	top:0;
	bottom:0;
	left:0;
	right:0;}
.contact-btns{
	margin-top:30px;}
.contact-btns a{
	position:relative;
	box-sizing:border-box;
	display:block;
	color:#FFF;
	padding:25px 20px;
	width:100%;
	transition:0.3s;
	box-shadow:8px 8px 8px 0 rgba(0, 0, 0, 0.2);}
.contact-btns a::after{
	content:'';
	position:absolute;
	top:0;
	bottom:0;
	right:15px;
	margin:auto;
	width:30px;
	height:30px;
	background-repeat:no-repeat;
	background-image:url('../other/arrow.svg');}
.btn-blue-outline{
	margin:0 0 20px;
	background-color:#5dbce2;}
.btn-blue-outline:hover{
	background:#4285a0;}
.btn-green-full{
	background-color:#a6df00;}
.btn-green-full:hover{
	background:#6ca400;}
@media only screen and (min-width:1024px){
	.contact-section{
		padding:160px 20px;}
	.contact-title{
		font-size:50px;
		margin:0 auto 70px;}
	.contact-btns{
		display:flex;
		justify-content:center;
		gap:60px;
		margin-top:60px;}
	.contact-btns a{
		font-size:30px;
		padding:40px 20px;}
	.contact-btns a::after{
		right:40px;
		width:40px;
		height:40px;}
	.btn-blue-outline{
		margin:0;
		background-color:#5dbce2;}
}
@media only screen and (max-width:400px){
	.contact-desc{
		font-size:13px;}
}