@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');


/*
	Components
*/

.lp-box{
	border: 2px dotted #311973;
	border-radius: .625em;
	padding: 1.875em;
}

.lp-btnlist{
	text-align: center;
}

.lp-img{
	border-radius: .5em;
	
	&:where(.lp-img--usage){
		border-radius: 100vmax;
	}
}

@media (max-width: 768px){
	.lp-img--usage{
		max-width: 64%;
	}
}

.lp-label{
	font-size: .875em;
	text-align: center;
	border-radius: .25em;
	padding: .25em .5em;
	background: #ccc;
}

.lp-note{
	line-height: 1.875;
	
	&:where(.lp-note--notice){
		color: #666;
	}
}

.lp-split{
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: 1.875em;
	
	&:where(.lp-split--usage){
		gap: 3.75em;
	}
	
	&:where(.lp-split--benefit){
		grid-template-columns: 4fr 6fr;
	}
	
	&:where(.lp-split--enquete){
		gap: 0 1.875em;
		
		& > *{
			display: grid;
			grid-template-rows: subgrid;
			grid-row: span 2;
			gap: 0;
		}
	}
	
}

@media (max-width: 768px){
	.lp-split{
		grid-auto-flow: row;
		grid-template-columns: auto;
	}
}

.lp-ttl{
	line-height: 1.5;
	font-size: 1em;
	font-family: "Noto Serif JP", serif;
	font-weight: bold;
	
	&:where(.lp-ttl--section){
		font-size: calc(2em * var(--device-ratio, 1));
	}
	
	&:where(.lp-ttl--content){
		font-size: calc(1.5em * var(--device-ratio, 1));
		align-self: end;
	}
	
}

.lp-ttl--reserve-cta{
	font-size: calc(1.25em * var(--device-ratio, 1));
	text-align: center;
}



/*
	Project
*/

/* wrap */
.lp-sunday-resetstay{
	--device-ratio: 1;
	
	& > * + *{
		margin-block: 5.625em 0;
	}
}

@media (max-width: 768px){
	.lp-sunday-resetstay{
		--device-ratio: .75;
	}
}

/* hero */
.lp-hero{
	color: white;
	background: linear-gradient(#011161, #5C1F82);
	padding-block: 3.75em;
}

.lp-hero__title{
	text-align: center;
	margin-block: 0;
}

.lp-hero__logo{
	max-width: 64%;
}

/* overview */
.lp-overview{
	text-align: center;
	
	& :where(.lp-ttl){
		color: #311973;
	}
	
	& :where(.lp-ttl--section){
		font-size: 1.5em;
		
		&::before{
			content: "";
			
			background: url(./img/icon-star-p.png) no-repeat center / contain;
			display: block;
			height: 1em;
			aspect-ratio: 1;
			margin-inline: auto;
		}
	}
	
	& :where(.lp-ttl--content){
		font-size: 1.25em;
	}
}

/* facility */
.lp-facility{
	color: white;
	background: linear-gradient(#02061E, #011161, #5C1F82);
	box-shadow: 0 .25em .25em rgb(0 0 0 / .25);
	padding-block: 3.75em;
	
	position: relative;
	z-index: 0;
	
	&::after{
		content: "";
		background: #5C1F82;
		
		display: block;
		position: absolute;
		inset: calc(100% - 1px) 0 auto;
		width: 1.5em;
		height: 1em;
		clip-path: polygon(0 0, 50% 100%, 100% 0);
		margin-inline: auto;
	}
	
	& :where(.lp-ttl--section){
		font-size: max(3em * var(--device-ratio, 1), 1em);
		text-align: center;
		
		&::before{
			content: "";
			background: url(./img/icon-star-w.png) no-repeat center / contain;
			display: block;
			width: 1em;
			height: 1em;
			margin-inline: auto;
		}
	}
	
	& :where(.lp-ttl--content){
		font-size: max(1.75em * var(--device-ratio, 1), 1em);
	}
	
	& :where(.lp-img--facility){
		border-radius: 0;
	}
	
}

@media (max-width: 768px){
	.lp-img--facility{
		max-width: 64vw;
		display: block;
		margin-inline: auto;
	}
}

@media (min-width: 769px){
	.lp-facility{
		& :where(.lp-split--facility){
			
			/* todo : flexに戻したい */
			/* border: 9px solid lime; */
			/*  */
			/* grid-template-columns: auto 1fr; */
			/* align-items: safe center; */
			/*  */
			/* &:where(:nth-child(even)){ */
			/* 	direction: rtl; */
			/* 	text-align: left; */
			/* } */
			
			
			display: flex;
			align-items: safe center;
			
			&:where(:nth-child(even)){
				flex-flow: row-reverse;
			}
			
			& > *{
				flex: 1 1 0;
				
				&:where(:first-child){
					flex: 0 1 auto;
					max-width: 50%;
				}
			}
		}
	}
}

@media (max-width: 768px){
	.lp-facility{
		& :where(.lp-split--facility){
			* + &{
				margin-top: 1.875em;
			}
		}
	}
}

/* benefit */
.lp-benefit{
	& :where(.lp-ttl){
		color: #311973;
	}
	
	& :where(.lp-ttl--section){
		font-size: 1.5em;
	}
	
	& :where(.lp-ttl--content){
		font-size: 1.25em;
		
		display: flex;
		align-items: center;
		gap: .5em;
	}
	
	& :where(.lp-label){
		color: white;
		background: #311973;
		
		flex: 0 0 auto;
		align-self: flex-start;
		display: flex;
		align-items: center;
		
		&::before{
			content: "";
			width: 1em;
			aspect-ratio: 1;
			background: url(./img/icon-star-w.png) no-repeat left center / contain;
		}
	}
}

/* usage */
.lp-usage{
	& :where(.lp-img){
		display: block;
		margin-inline: auto;
	}
	& :where(.lp-ttl--section){
		font-size: 1.5em;
		text-align: center;
	}
}

/* spec */
.tbl-spec{
	border-block: 1px dotted;
	padding: 1em;
	
	max-width: fit-content;
	margin-inline: auto;
	
	& :where(dd){
		margin-left: 0;
	}
}
	
@media (min-width: 769px){
	.tbl-spec{
		display: grid;
		grid-template-columns: auto 1fr;
		
		& :where(dd){
			margin-left: 1em;
			
			display: list-item;
			list-style: "：";
		}
	}
}

@media (max-width: 768px){
	.tbl-spec{
		& :where(dt){
			font-weight: bold;
			
			* + &{
				margin-top: .5em;
			}
		}
	}
}