@charset "utf-8";

/* @ rule */
html{
	scroll-behavior: smooth !important;
}
.g-main :is([name], [id]){
	scroll-margin-top: var(--g3-header-height);
}
.init:where(ul, ol){
	list-style: none;
	margin-block: 0;
	padding-inline-start: 0;
}

.center{
	text-align: center;
}

:is(
	.l-stack-cont,
	.l-stack-note
) > *{
	margin-block: 0;
}
.l-stack-cont > * + *{
	margin-block-start: 3.75rem !important;
}
.l-stack-note > * + *{
	margin-block-start: 1.5rem !important;
}
.l-notstack-block,
.l-notstack-block + *{
	margin-top: 0 !important;
}



/* @ components */
.heading1{
	text-align: center;
}
.heading1::before{
	content: "";
	display: block;
	border:  2px dashed;
	max-width: 12rem;
	margin: 0 auto 2.5rem;
}
.note--notice{
	color: #AE3F3F;
	font-weight: bold;
}



/* @ main visual */
.mv{
	display: grid;
}
.mv > *{
	grid-area: 1 / 1;
}
.mv__title{
	
}
.mv__banner{
	width: 100%;
	max-height: 738px;
	object-fit: cover;
}
.mv__btn-login{
	align-self: end;
	justify-self: center;
	display: grid;
	grid-template-columns: repeat(2, auto);
	align-items: center;
	gap: .666em;
	
	font-size: min(1.75em, 4.615vw);
	font-weight: bold;
	color: #395982;
	background: #fff;
	box-shadow:
		0 0 0 .3125em,
		0 calc(.3125em + 3px) 3px 0 rgba(0, 0, 0, .25);
	border-radius: .375em;
	box-sizing: border-box;
	max-width: 92vw;
	padding: 1em 2em;
	transform: translateY(15%);
}
.mv__btn-login:not(:hover){
	text-decoration: none;
}
.mv__btn-login::after{
	content: "";
	width: 1em;
	height: 1em;
	background: url(../img/2023/arrow1.svg) no-repeat center / contain;
}



/* @ dialog box */

.dialog-box{
	font-size: 1.25em;
	background: #FCE2E2;
	border-radius: 1em;
	padding: 1em 1lh;
}
.dialog-box :any-link{
	color: inherit;
}
.dialog-box :any-link:hover{
	text-decoration: none;
}



/* @ benefits */
.benefits{}
.benefits__title{
	font-size: 1.75em;
	font-weight: bold;
}
.benefits__title[data-number]{
	text-align: left;
	width: fit-content;
	margin-inline: auto;
}
.benefits__title[data-number]::before{
	content: attr(data-number);
	font-weight: normal;
	font-style: italic;
	color: #395982;
	display: block;
	margin-block-end: .333rem;
}
.benefits__desc{}

.benefit-list{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9.375rem, 1fr));
	gap: 2.5rem;
}
.benefit-list__item{
	line-height: 1.5;
	text-align: center;
	position: relative;
	z-index: 0;
	padding: 1em 2em;
}
.benefit-list__item::after,
.benefit-list__item::before{
	content: "/";
	line-height: 1;
	font-size: 3.5rem;
	color: #ccc;
	display: block;
	position: absolute;
	z-index: -1;
}
.benefit-list__item::after{
	inset: auto 0 0 auto;
}
.benefit-list__item::before{
	inset: 0 auto auto 0;
}
.benefit-list__item > *{
	margin-block: 0;
}
.benefit-list__item > * + *{
	margin-block-start: 1.5rem;
}




/* @ functions */
.functions{
	
}
.functions__title{
	font-size: 1.5em;
	color: #EAB42D;
}
.functions__desc{
	
}
.function-list{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 1.5em;
}
.function-list__item{
	line-height: 1.5;
	border: 3px solid;
	border-radius: .625em;
	position: relative;
	z-index: 0;
	padding: 1rem 1.5rem;
}
.function-list__item::before{
	content: "";
	display: block;
	width: 2.25rem;
	aspect-ratio: 1;
	position: absolute;
	inset: 0 auto auto 1rem;
	transform: translateY(-50%);
	
	background: url(../img/2023/functions-icon.svg) no-repeat center / contain;
}
.function-list__item > *{
	margin-block: 0;
}
.function-list__item > * + *{
	margin-block-start: .5rem;
}



/* @ reserve steps */
.reserve-steps{
	position: relative;
	z-index: 0;
	
	padding-bottom: 5.625rem;
}
.reserve-steps::before{
	content: "";
	display: block;
	
	position: absolute;
	z-index: -1;
	inset: 4.75rem 0 0;
	
	--bg-color: #f0f0f0;
	border-image: linear-gradient(var(--bg-color), var(--bg-color)) 1 fill;
}
.reserve-steps__title{
	margin-left: calc((100vw - min(68.75rem, 92vw)) / 2);
}
.reserve-steps__note{
	display: grid;
}
.reserve-steps__note[data-step]::before{
	content: attr(data-step);
	font-weight: bold;
	color: #EAB42D;
}
.reserve-steps__fig{
	width: 100%;
}

.reserve-step-list:where(ul, ol){
	list-style: none;
	margin-block: 0;
	padding-inline-start: 0;
}
.reserve-step-list{}
.reserve-step-list__item{}
.reserve-step-list__item > *{
	margin: 0;
}
.reserve-step-list__item > * + *{
	margin-top: 1.5rem;
}



.reserve-steps__grid{
	display: grid;
	grid-template-areas: "title pager" "gallery gallery";
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 0 1em;
}
.reserve-step-list{
	display: contents;
}
.reserve-steps__grid > h2{
	grid-area: title;
}
.reserve-steps__grid .slick-list{
	grid-area: gallery;
}
.reserve-steps__grid .slick-dots{
	grid-area: pager;
}
.reserve-steps__grid .slick-arrow{
	grid-area: gallery;
}

.slick-arrow{
	align-self: center;
	z-index: 1;
}
.slick-prev{
	justify-self: start;
	margin-left: calc((100vw - min(68.75rem, 92vw)) / 2);
}
.slick-next{
	justify-self: end;
	margin-right: calc((100vw - min(68.75rem, 92vw)) / 2);
}

/* & slick */
.js-reserve-flow .slick-dots:where(ul, ol){
	list-style: none;
	margin-block: 0;
	padding-inline-start: 0;
}
.js-reserve-flow .slick-dots{
	display: flex;
	gap: 1em;
	margin-right: 4vw;
}
.js-reserve-flow .slick-dots button{
	font-weight: bold;
	color: #7B7A7A;
	background: none;
	border: 0;
	padding: 0;
}
@media (min-width: 769px){
	.js-reserve-flow .slick-dots .slick-active button{
		color: #EAB42D;
	}
	.js-reserve-flow .slick-dots button::before{
		content: "STEP";
	}
}
@media (max-width: 768px){
	.js-reserve-flow .slick-dots button{
		color: #EAB42D;
		border: 1px solid;
		text-indent: -99em;
		overflow: hidden;
		width: 1em;
		aspect-ratio: 1;
		border-radius: 99em;
	}
	.js-reserve-flow .slick-dots .slick-active button{
		background: currentcolor;
	}
	.js-reserve-flow .slick-dots{
		gap: .666em;
	}
}
.js-reserve-flow .slick-arrow{
	text-indent: -99em;
	overflow: hidden;
	width: 3em;
	aspect-ratio: 1 / 1.618;
	
	border: 0;
	background: none;
	position: relative;
}
.js-reserve-flow .slick-arrow::after{
	content: "aiueo";
	display: block;
	position: absolute;
	inset: 0;
	background: currentcolor;
	clip-path: polygon(0 0, 100% 50%, 0 100%, 0 calc(100% - 2px), calc(100% - 2px * 1.25) 50%, 0 calc(0% + 2px));
}
.js-reserve-flow .slick-prev::after{
	transform: scale(-1);
}
.js-reserve-flow .slick-slide:not(.slick-active){
	filter: opacity(.5);
}
.js-reserve-flow .slick-track{
	display: flex;
	gap: 5.625rem;
}
.js-reserve-flow .slick-track > *{
	float: none;
	flex-basis: min(630px, 92vw);
}



/* @ users voice */
.users-voice{}
.user-voice-list{
	line-height: 1.5;
	
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 1.5em;
}
.user-voice-list__item{
	border: 1px solid #395982;
	border-radius: .625em;
	padding: 1em 1.25em;
}
.user-voice-list__item[data-user-icon]{
	display: grid;
	grid-template-columns: repeat(2, auto);
	gap: 1em;
}
.user-voice-list__item[data-user-icon]::before{
	content: "";
	display: block;
	width: 3.75em;
	aspect-ratio: 1;
	transform: translateY(-2rem);
}
.user-voice-list__item[data-user-icon=man1]::before		{ background: url(../img/2023/user-icon-man1.svg) no-repeat center / contain; }
.user-voice-list__item[data-user-icon=man2]::before		{ background: url(../img/2023/user-icon-man2.svg) no-repeat center / contain; }
.user-voice-list__item[data-user-icon=woman1]::before	{ background: url(../img/2023/user-icon-woman1.svg) no-repeat center / contain; }



/* @ sticky contact */
.sticky-contact{
	position: sticky;
	bottom: 1em;
	width: fit-content;
	margin-inline: auto 1rem;
	
	height: 0;
	display: flex;
	align-items: flex-end;
}
@media (max-width: 768px){
	.sticky-contact{
		bottom: calc(1em + var(--g3-footer-psnmenu-height));
	}
}
.contact-icon{
	width: min(155px, 19.871vw);
}



/* @ contact form */
.contact-form{
	position: relative;
	z-index: 0;
	padding-bottom: 5.625rem;
}
.contact-form::before{
	content: "";
	display: block;
	position: absolute;
	z-index: -1;
	inset: 2.75em 0 0;
	--bg-color: #EBF1F9;
	border-image: linear-gradient(var(--bg-color), var(--bg-color)) 1 fill;
}
.contact-form__title{
	font-size: 1.25em;
	text-align: center;
	color: #38577E;
	border: 5px solid;
	background: #fff;
	max-width: 30em;
	box-sizing: border-box;
	margin-inline: auto;
	padding: 1.02em;
}



/* @ contact : grid */
.contact-grid{
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 1.75rem 1rem;
}
.contact-grid::after{
	content: "";
	border: 0 dashed #B5B4B4;
	border-width: 2px 0 0 2px;
}
.contact-grid__item:last-child{
	order: 1;
}
.contact-grid__item > *{
	margin-block: 0;
}
.contact-grid__item > * + *{
	margin-block-start: 1.875rem !important;
}
@media (max-width: 768px){
	.contact-grid{
		grid-template-columns: 1fr;
	}
}



/* @ contact : field */
.contact-field:where(fieldset){
	border: 0;
	padding: 0;
}
.contact-field{
	display: grid;
	grid-template-areas: "name dialog" "field field";
	grid-template-columns: auto 1fr;
	gap: .25em 1em;
}
.contact-field > *{
	margin-block: 0;
}
.contact-field > .contact-field__name{
	grid-area: name;
}
.contact-field > .contact-field__input{
	grid-area: field;
}
.contact-field > .dialog{
	grid-area: dialog;
}

.contact-field__name{
	font-weight: bold;
}
.contact-field__require{
	color: #395982;
	margin-left: .5em;
}
.contact-field__input{
	line-height: 1.5;
	border: 2px solid;
	border-radius: .375em;
	padding: .333em .666em;
	box-sizing: border-box;
}
.contact-field__input:invalid{
	border-color: #AE3F3F;
}
.contact-field__input:where(textarea){
	height: 36em;
}
.contact-field__input:where(select){
	background: #fff;
	
	/* for safari */
	height: 3em;
	padding-block: 0;
	/* for safari */
	
}
.contact-field__input::placeholder{
	opacity: .4;
	font-size: .875em;
}
.contact-field__input:focus::placeholder{
	opacity: .1;
}
.contact-field__input:is(.is-error){
	background: #FFEAEA;
}

.dialog{}
.dialog--error{
	font-weight: bold;
	color: #DE5656;
}



.g-recaptcha{
	max-width: fit-content;
	margin-inline: auto;
}



.buttons{
	display: grid;
	grid-template-columns: repeat(auto-fit, min(18em, 100%));
	justify-content: center;
	gap: 1rem;
}



.contact-btn{
	font-size: 1.2em;
	font-weight: bold;
	text-decoration: none;
	color: #fff;
	background: #ccc;
	
	display: block;
	
	border: 0;
	border-radius: 99em;
	padding: .666em 1.666em;
}
.contact-btn:where(button){
	width: 100%;
}
.contact-btn--send{
	background: #38577E;
}
.contact-btn--back{
	color: #000;
	background: #ccc;
}



/* recaptcha */
.js-recaptcha-send[disabled]{
	opacity: .5;
	cursor: default;
}



/* loading */
.js-loading-target:is(.is-active){
	position: relative;
	z-index: 0;
}
.js-loading-target:is(.is-active)::after,
.js-loading-target:is(.is-active)::before{
	content: "";
	display: block;
	position: absolute;
	z-index: 1;
	inset: 0;
	margin: auto;
}
.js-loading-target:is(.is-active)::before{
	background: #ebf1f9;
	filter: opacity(.9);
}
.js-loading-target:is(.is-active)::after{
	font-size: 3em;
	color: #38577E;
	border:6px dotted transparent;
	border-top-color: currentcolor;
	border-radius: 99em;
	width: 1em;
	aspect-ratio: 1;
	animation: loading 1s steps(15) infinite;
}
@keyframes loading{
	from	{ transform: rotate(1deg); }
	to		{ transform: rotate(360deg); }
	
}