/* --------------------------------------------
HTML
--------------------------------------------- */
html , body{
	height : 100dvh;
	overflow-x : clip;
	overflow-y : auto;
}
body{
	background-color : white;
}

/* --------------------------------------------
SETTINGS
--------------------------------------------- */
@media screen and ( width <= 686px ){
	:root{
		font-size : calc( 10 * 100vw / var( --breakPoint ) );
	}
}
@media screen and ( 686px < width < 696px ){
	:root{
		font-size : calc( 10 * 100vw / var( --breakPoint ) );
	}
}
@media print , screen and ( width >= 696px ){
	:root{
		font-size : 10px;
	}
}

/* --------------------------------------------
STATE
--------------------------------------------- */
@media print , screen and ( width > 686px ){
	.is-sp{
		display : none;
	}
}
@media screen and ( width <= 686px ){
	.is-pc{
		display : none;
	}
}

/* --------------------------------------------
ACCESSIBILITY
--------------------------------------------- */
.visuallyhidden{
	position : absolute;
	width : 1px;
	height : 1px;
	overflow : hidden;
	clip : rect( 0 0 0 0 );
	clip-path : inset( 50% );
	white-space : nowrap;
}
[hidden]{
	display : none;
}

/* --------------------------------------------
COMMON MODULES
--------------------------------------------- */
.full{
	width : 100%;
	height : auto;
}
@media screen and ( width <= 686px ){
	.full-sp{
		width : 100%;
		height : auto;
	}
}
@media print , screen and ( width > 686px ){
	.full-pc{
		width : 100%;
		height : auto;
	}
}
[data-before]::before{
	white-space : pre;
	content : attr( data-before );
}
[data-after]::after{
	white-space : pre;
	content : attr( data-after );
}
@media screen and ( width <= 686px ){
	[data-before-sp]::before{
		white-space : pre;
		content : attr( data-before-sp );
	}
}
[data-both]{
	&::before , &::after{
		white-space : pre;
		content : attr( data-both );
	}
}
@media screen and ( width <= 686px ){
	[data-after-sp]::after{
		white-space : pre;
		content : attr( data-after-sp );
	}
	[data-both-sp]{
		&::before , &::after{
			white-space : pre;
			content : attr( data-both );
		}
	}
}
@media print , screen and ( width > 686px ){
	[data-before-pc]::before{
		white-space : pre;
		content : attr( data-before-pc );
	}
	[data-after-pc]::after{
		white-space : pre;
		content : attr( data-after-pc );
	}
	[data-both-pb]{
		&::before , &::after{
			white-space : pre;
			content : attr( data-both );
		}
	}
}

/* --------------------------------------------
LH NAGATIVE MARGIN
--------------------------------------------- */
.lh-up{
	margin-top : calc( ( 1em - 1lh )  / 2 );
}
@media screen and ( width <= 686px ){
	.lh-up-sp{
		margin-top : calc( ( 1em - 1lh )  / 2 );
	}
}
@media print , screen and ( width > 686px ){
	.lh-up-pc{
		margin-top : calc( ( 1em - 1lh )  / 2 );
	}
}

/* --------------------------------------------
RESERVATION
--------------------------------------------- */
#reservation{
	padding-block : calc( 44 var( --remBase ) );
	container-type : inline-size;
	h1{
		font-size : calc( 24 var( --remBase ) );
		font-weight : 500;
		line-height : calc( 46 / 32 );
	}
	form{
		margin-top : calc( 40 var( --remBase ) );
	}
	.splide__slide{
		> p{
			font-size : calc( 14 var( --remBase ) );
			line-height : 1.7;
			+ fieldset{
				margin-top : calc( 40 var( --remBase ) );
			}
		}
	}
	legend{
		display : grid;
		align-items : center;
		justify-content : start;
		width : 100%;
		padding-bottom : calc( 6 var( --remBase ) );
		font-size : calc( 20 var( --remBase ) );
		line-height : 1.7;
		border-bottom : solid 1px var( --black );
		&::before{
			display : block;
			width : auto;
			font-size : 0;
			content : "";
			background-repeat : no-repeat;
			background-position : left center;
			background-size : contain;
		}
		+ p{
			margin-top : calc( 16 var( --remBase ) );
			font-size : calc( 14 var( --remBase ) );
			line-height : 1.7;
		}
	}
	select{
		height : calc( 45 var( --remBase ) );
		padding-inline : calc( 16 var( --remBase ) );
		font-size : calc( 14 var( --remBase ) );
		line-height : calc( 23 / 16 );
		background-color : var( --gray );
		background-image : url( "../../images/ui/arrow/down01.svg" );
		background-repeat : no-repeat;
		background-position : right calc( 14.5 var( --remBase ) ) top 50%;
		background-size : auto calc( 16 var( --remBase ) );
		margin-right: .5em;
	}

	fieldset + fieldset{
		margin-top : calc( 40 var( --remBase ) );
	}
	.buttons{
		display : grid;
		grid-auto-rows : calc( 40 var( --remBase ) );
		grid-auto-flow : column;
		column-gap : calc( 16 var( --remBase ) );
		align-items : start;
		justify-content : center;
		button{
			display : grid;
			grid-template-columns : auto auto;
			column-gap : calc( 12 var( --remBase ) );
			align-items : center;
			justify-content : center;
			width : 100%;
			height : 100%;
			font-size : calc( 14 var( --remBase ) );
			color : white;
			background-color : var( --black02 );
			&[disabled]{
				pointer-events : none;
				cursor : not-allowed;
				filter : grayscale( 100% ) contrast( .8 ) brightness( 1.2 );
				opacity : .5;
			}
		}
		.prev{
			&::before{
				display : block;
				width : auto;
				height : calc( 12.5 var( --remBase ) );
				aspect-ratio : 7.37/12.5;
				font-size : 0;
				content : "";
				background-image : url( "../../images/ui/arrow/prev01.svg" );
				background-repeat : no-repeat;
				background-position : left center;
				background-size : contain;
			}
		}
		.next{
			&::after{
				display : block;
				width : auto;
				height : calc( 12.5 var( --remBase ) );
				aspect-ratio : 7.37/12.5;
				font-size : 0;
				content : "";
				background-image : url( "../../images/ui/arrow/next01.svg" );
				background-repeat : no-repeat;
				background-position : left center;
				background-size : contain;
			}
		}
	}
	@media screen and ( width <= 686px ){
		padding-inline : calc( 15 var( --viewportBase ) );
		legend{
			grid-template-columns : calc( 54 var( --percentBase ) ) 1fr;
		}
		.buttons{
			grid-auto-columns : calc( 140 var( --percentBase ) );
		}
	}
	@media print , screen and ( width > 686px ){
		width : 100%;
		max-width : 620px;
		margin-inline : auto;
		legend{
			grid-template-columns : calc( 56 var( --percentBase ) ) 1fr;
		}
		.buttons{
			grid-auto-columns : calc( 195 var( --percentBase ) );
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	.buttons{
		transition : opacity var( --transitionBase ) filter var( --transitionBase ) ;
	}
}

/* --------------------------------------------
STEP01
--------------------------------------------- */
.step01{
	.rooms{
		legend{
			&::before{
				height : calc( 38 var( --remBase ) );
				aspect-ratio : 1;
				background-image : url( "../../images/ui/icon/room.svg" );
			}
		}
	}
	select{
		width : calc( 266 var( --percentBase ) );
		margin-top : calc( 16 var( --remBase ) );
	}
	.schedules{
		visibility : hidden;
		opacity : 0;
		&.is-show{
			visibility : visible;
			opacity : 1;
		}
		legend{
			&::before{
				height : calc( 40.14 var( --remBase ) );
				aspect-ratio : 40/40.14;
				background-image : url( "../../images/ui/icon/calendar.svg" );
			}
		}
	}
	.buttons{
		margin-top : calc( 60 var( --remBase ) );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	.schedules{
		transition : opacity var( --transitionBase ) , visibility var( --transitionBase );
	}
}

/* --------------------------------------------
STEP02
--------------------------------------------- */
.step02{
	legend{
		display: block !important;

		&::before{
			display: none !important;
		}
	}
	ul{
		margin-top : calc( 32 var( --remBase ) );
	}
	li{
		display : grid;
		grid-template-rows : auto auto auto;
		row-gap : calc( 8 var( --remBase ) );
		padding-bottom : calc( 24 var( --remBase ) );
		border-bottom : solid 1px #999;
		+ li{
			margin-top : calc( 24 var( --remBase ) );
		}
	}
	picture{
		grid-row : 1/-1;
		grid-column : 1;
		align-self : start;
		height : auto;
		aspect-ratio : 1;
		overflow : hidden;
		border-radius : calc( 8 var( --remBase ) );
		img{
			width : 100%;
			height : 100%;
			object-fit : cover;
			object-position : center;
		}
	}
	label{
		grid-row : 1;
		grid-column : 3/-1;
		line-height : 1.7;
	}
	li p{
		grid-row : 2;
		font-size : calc( 14 var( --remBase ) );
		line-height : 1.7;
	}
	a{
		grid-row : 2;
		font-size : calc( 16 var( --remBase ) );
		line-height : 1.7;
		-webkit-text-decoration : underline;
		text-decoration : underline;
	}
	select{
		grid-row : 3;
	}
	.buttons{
		margin-top : calc( 36 var( --remBase ) );
	}
	@media screen and ( width <= 686px ){
		li{
			grid-template-columns : calc( 100 var( --percentBase ) ) calc( 16 var( --percentBase ) ) 1fr calc( 16 var( --percentBase ) ) auto;
		}
		label{
			font-size : calc( 16 var( --remBase ) );
		}
		li p{
			grid-column : 3;
		}
		a{
			grid-column : 5;
		}
		select{
			grid-column : 3 / -1;
		}
	}
	@media print , screen and ( width > 686px ){
		li{
			grid-template-columns : calc( 100 var( --percentBase ) ) calc( 16 var( --percentBase ) ) calc( 266 var( --percentBase ) ) 1fr calc( 16 var( --percentBase ) ) auto;
		}
		label{
			font-size : calc( 18 var( --remBase ) );
		}
		li p{
			grid-column : 3/5;
		}
		a{
			grid-column : -1;
		}
		select{
			grid-column : 3;
		}
	}
}
.step03{
	legend{
		display: block !important;

		&::before{
			display: none !important;
		}
	}
	fieldset > dl{
		margin-top : calc( 32 var( --remBase ) );
		> dt , > dd{
			font-size : calc( 16 var( --remBase ) );
			line-height : 1.7;
		}
	}
	li{
		display : flex;
		flex-wrap : wrap;
		column-gap : 1em;
	}
	h4{
		font-weight : 500;
	}
	.confirmChecks{
		display : grid;
		grid-template-columns : auto auto auto;
		column-gap : calc( 8 var( --remBase ) );
		align-items : end;
		justify-content : start;
		&::before{
			grid-row : 1;
			grid-column : 2;
			content : "→";
		}
		dt{
			font-size : calc( 14 var( --remBase ) );
			line-height : 1.7;
		}
	}
	#confirmOptions{
		> dl{
			> div{
				font-size : 0;
			}
			> div + div{
				margin-top : calc( 8 var( --remBase ) );
			}
			dt , dd{
				display : inline;
				font-size : calc( 16 var( --remBase ) );
				line-height : 1.7;
			}
			dt{
				padding-right : 1em;
			}
		}
	}
	dl{
		h4 , p{
			font-size : calc( 12 var( --remBase ) );
			line-height : 1.7;
			color : var( --red );
		}
		h4{
			margin-top : calc( 8 var( --remBase ) );
		}
	}
	.buttons{
		margin-top : calc( 36 var( --remBase ) );
	}
	@media screen and ( width <= 686px ){
		fieldset > dl{
			> dd + dt{
				padding-top : calc( 16 var( --remBase ) );
				margin-top : calc( 16 var( --remBase ) );
				border-top : solid 1px #ccc;
			}
			> dd{
				margin-top : calc( 8 var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width > 686px ){
		fieldset > dl{
			display : grid;
			grid-template-columns : calc( 168 var( --percentBase ) ) 1fr;
			row-gap : calc( 16 var( --remBase ) );
			align-items : start;
			justify-content : start;
		}
	}
}
#schedule{
	position : relative;
	z-index : 1;
	padding-top : calc( 24 var( --remBase ) );
	margin-top : calc( 16 var( --remBase ) );
	.daterangepicker{
		position : static ! important;
		z-index : auto ! important;
		width : 100%;
		margin-top : 0;
		border : 0;
		&::before{
			content : none;
		}
	}
	.ranges{
		display : none;
		margin-top : 0;
	}
	.drp-calendar{
		float : none;
		max-width : 100%;
		padding : 0;
	}
	.calendar-table{
		padding : 0;
	}
	:is( .prev ,  .next ){
		width : auto;
		height : auto;
		font-size : 0;
		line-height : 1;
		border : 0;
		border-radius : 0;
		span{
			width : auto;
			height : calc( 14 var( --remBase ) );
			aspect-ratio : 1;
			padding : 0;
			border : 0;
			transform : none;
		}
	}
	.table-condensed{
		thead{
			tr:first-of-type{
				th{
					height : auto;
				}
			}
			tr:nth-of-type( 2 ){
				th{
					padding-block : calc( ( 4 + 22 ) var( --remBase ) );
					font-size : calc( 10 var( --remBase ) );
					font-weight : 400;
					line-height : 1.2;
				}
			}
		}
	}
	.daterangepicker td.no-select{
		pointer-events : none;
		cursor : not-allowed;
		background-color : #eee ! important;
		opacity : .3;
	}
	.prev{
		span{
			background : url( "../../images/ui/arrow/prev02.svg" ) center / contain no-repeat;
		}
	}
	.next{
		span{
			background : url( "../../images/ui/arrow/next02.svg" ) center / contain no-repeat;
		}
	}
	.month{
		height : auto;
		font-size : calc( 14 var( --remBase ) );
		font-weight : 500;
		line-height : 1;
		border-radius : 0;
	}
	.table-condensed{
		tbody{
			tr:not( :last-of-type ){
				td{
					height : calc( ( 30 + 8 ) var( --remBase ) );
					border-bottom : white solid calc( 8 var( --remBase ) );
				}
			}
			tr:last-of-type{
				td{
					height : calc( 30 var( --remBase ) );
				}
			}
			td{
				width : auto;
				min-width : inherit;
				height : auto;
				font-size : calc( 16 var( --remBase ) );
				line-height : calc( 18 / 16 );
				border : 0;
				border-radius : 0;
				&.off{
					color : #d8dbdd;
				}
				&.disabled{
					-webkit-text-decoration : none;
					text-decoration : none;
				}
				&.available{
					color : var( --base );
				}
				&.available{
					&.active , &.in-range{
						background-color : #f2e724;
					}
				}
				&.today{
				}
			}
		}
	}
	.drp-buttons{
		display : grid;
		align-items : center;
		padding : 0;
		line-height : 1;
		border : 0;
	}
	.drp-selected{
		display: none;
		grid-row : 1;
		justify-self : end;
		padding : 0;
	}
	.applyBtn , .cancelBtn{
		display : grid;
		place-items : center;
		padding : 0;
		margin : 0;
		font-weight : 500;
		outline-width : 1px;
		outline-style : solid;
		outline-offset : -1px;
	}
	.applyBtn{
		color : white;
		background-color : black;
		outline-color : black;
	}
	.cancelBtn{
		color : color-mix( in sRGB , black 100% , transparent );
		outline-color : color-mix( in sRGB , black 100% , transparent );
	}
}
@media screen and ( width <= 686px ){
	#schedule{
		.daterangepicker{
			display : block ! important;
		}
		.daterangepicker .drp-calendar.right{
			display : none ! important;
		}
		.drp-buttons{
			row-gap : calc( 8 var( --remBase ) );
			margin-top : calc( 16 var( --remBase ) );
		}
		.drp-selected{
			grid-column : 1/-1;
			font-size : calc( 16 var( --remBase ) );
			line-height : calc( 18 / 16 );
		}
		.applyBtn , .cancelBtn{
			grid-row : 2;
			height : calc( 30 var( --remBase ) );
			font-size : calc( 16 var( --remBase ) );
		}
	}
}
@media print , screen and ( width > 686px ){
	#schedule{
		.daterangepicker{
			display : grid ! important;
			grid-template-columns : repeat( 2 , calc( 290 var( --percentBase ) ) );
			row-gap : calc( 40 var( --remBase ) );
			justify-content : space-between;
			column-gap: calc( 20 var( --remBase ) );
		}
		.left{
			grid-row : 1;
			grid-column : 1;
		}
		.right{
			grid-row : 1;
			grid-column : 2;
		}
		.drp-buttons{
			grid-row : 2;
			grid-column : 1/-1;
			justify-content : end;
		}
		.drp-selected{
			grid-column : 1;
			font-size : calc( 20 var( --remBase ) );
		}
		.applyBtn , .cancelBtn{
			grid-row : 1;
			height : calc( 32 var( --remBase ) );
			font-size : calc( 14 var( --remBase ) );
		}
	}
}
.step01 #schedule{
	@media screen and ( width <= 686px ){
		.drp-buttons{
			grid-template-columns : auto  calc( 80 var( --percentBase ) ) calc( 4 var( --percentBase ) ) calc( 80 var( --percentBase ) );
		}
		.applyBtn{
			grid-column : 2;
		}
		.cancelBtn{
			grid-column : 4;
		}
	}
	@media print , screen and ( width > 686px ){
		.drp-buttons{
			grid-template-columns : auto calc( 20 * 100% / 620 ) calc( 100 * 100% / 620 ) calc( 8 * 100% / 620 ) calc( 100 * 100% / 620 );
		}
		.applyBtn{
			grid-column : 3;
		}
		.cancelBtn{
			grid-column : 5;
		}
	}
}
/*
.step01:has( .buttons .next:not( [disabled] ) ) #schedule{
	.applyBtn{
		opacity : 0;
	}
	.applyBtn{
		z-index : -1;
		pointer-events : none;
	}
	@media screen and ( width <= 686px ){
		.drp-buttons{
			grid-template-columns : auto calc( 60 var( --percentBase ) );
		}
		.cancelBtn , .applyBtn{
			grid-column : 2;
		}
	}
	@media print , screen and ( width > 686px ){
		.drp-buttons{
			grid-template-columns : auto calc( 20 * 100% / 620 ) calc( 100 * 100% / 620 );
		}
		.cancelBtn , .applyBtn{
			grid-column : 3;
		}
	}
}
*/
@media ( hover : hover ){
	#schedule .table-condensed td{
		&.available{
			&:hover{
				background-color : #f2e724;
			}
		}
	}
	#schedule .applyBtn:hover{
		color : var( --base );
		background-color : white;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#schedule .table-condensed td{
		&.available{
			transition : background-color var( --transitionBase );
		}
	}
	#schedule .applyBtn{
		transition : background var( --transitionBase ) color var( --transitionBase ) , opacity var( --transitionBase );
	}
}


fieldset dl dt .caution {
	@media screen and ( width <= 686px ){
		font-size: calc( 12 var( --remBase ) );
	}
	@media print , screen and ( width > 686px ){
		font-size: calc( 12 var( --remBase ) );
	}
}

/*---チェックイン不可・チェックアウト可な日----*/
.available-from-previous-day{
    color: #d8dbdd !important;
}