/* base.css に移植したい */
.g3-init:where(ul, ol){
	list-style-type: none;
	margin-block: initial;
	padding-inline-start: initial;
}
/* base.css に移植したい */



/* @ utility */
.lp-article-width{
	max-width: 83.333%;
	margin-inline: auto;
}



/* @ section */
.lp-sect{
	position: relative;
	z-index: 0;
	padding-block: 120px;
}
.lp-sect:where(#unisex){
	background: linear-gradient(#F6F2ED, #FFFFEF);
}
.lp-sect:where(#womens){
	background: #fff;
}
.lp-sect:where(#mens){
	background: linear-gradient(#E8F4FB, #E9F3EF);
}
.lp-sect::before{
	content: "";
	display: block;
	position: absolute;
	z-index: -1;
	inset: 0 0 auto;
	height: 3rem;
	background: linear-gradient(black, transparent);
	filter: opacity(.1);
}
.lp-sect-stack > *{
	margin-block: initial;
}
.lp-sect-stack > * + *{
	margin-top: 2.5rem;
}
.lp-sect__head > *{
	margin-block: initial;
}
.lp-sect__head > * + *{
	margin-block-start: 4.5rem;
}
.lp-sect__head p{
	line-height:150%;
	}
@media (min-width: 769px){
	.lp-sect__head p{
	text-align:center;
	line-height:150%;
	}
}
.lp-sect__title{
	font-size: 1.5rem;
	font-weight: normal;
	text-align: center;
}



/* @ intro */
.lp-intro__title{
	line-height: 1.5;
	font-size: 1.5em;
	font-weight: normal;
	
	color: #fff;
	background: #AA9C93 url(./img/hero.jpg) no-repeat center / cover;
	background-blend-mode: multiply;
	
	height: 20em;
	display: flex;
	flex-direction: column;
	place-items: center;
	place-content: center;
	gap: .5em;
}
.lp-intro__title::after{
	content: "";
	background: url(./img/nos.svg) no-repeat center / contain;
	width: 12.90375em;
	height: 1.58175em;
}
.lp-intro-grid{
	display: grid;
	align-items: center;
	gap: 2rem;
	padding-block: 3.33rem;
}
@media (min-width: 769px){
	.lp-intro-grid{
		grid-template-columns: auto 1fr;
	}
}
.lp-intro-grid__image{
	justify-self: center;
}
.lp-intro__icon{
	width: 14.360625rem;
	border-radius: 1.125rem;
	box-shadow: 10px 12px 45px rgba(0, 0, 0, .1);
}



/* @ caution */
.lp-caution{
	text-align: center;
	border-block: 1px solid;
	padding-block: 1rem;
}
.lp-caution > *{
	margin-block: initial;
}
.lp-caution > * + *{}
.lp-caution__note{}
.lp-caution__list{
	line-height: 1.5;
	font-size: .75rem;
}



/* @ online */
.lp-online{
	text-align: center;
}
.lp-btn-online{
	border-radius: 99rem;
	overflow: hidden;
}
.lp-with-icon--online > img{
	max-width: 2rem;
}



/* @ amenities */
.lp-amenities{
	display: grid;
	/* grid-template-columns: repeat(auto-fill, minmax(12em, 1fr)); */
	grid-template-columns: repeat(auto-fit, minmax(12em, min-content));
	justify-content: center;
	gap: 1em;
}
.lp-amenities__item{
	line-height: 1.5;
	font-size: .9375rem;
	background: #fff;
	border-radius: .5em;
	box-shadow: .5em 1em 2em rgba(0, 0, 0, .1);
	
	display: grid;
	justify-items: center;
	gap: 1em;
	
	padding: 1.5em;
}
.lp-amenities__item > *{
	margin-block: 0;
}
.lp-amenities__desc .stxt{
	font-size:0.5em;
	}
.lp-amenities__image{
	width: 6em;
}
.lp-amenities__name{
	font-size: 1em;
	text-align: center;
}
.lp-amenities__desc{
	font-size: .8em;
}

/* & animation */
.lp-amenities__item.js3-in{
	transform-origin: 0 0;
}
.lp-amenities__item.js3-in:not(.js3-in--active){
	outline: 3px solid red;
}
.lp-amenities__item.js3-in:is(.js3-in--active){
	animation: lp-jsin 999ms ease;
}
@keyframes lp-jsin{
	from {
		opacity: 0;
		transform: skewY(15deg) translateY(2.5em);
	}
	to   {}
}
/*
.js3-in:not(.js3-in--active){
	visibility: hidden;
}
.js3-in.js3-in--active{
	animation: js3-in 666ms both cubic-bezier(0.65, 0, 0.35, 1);
}

@keyframes js3-in{
	from{
		opacity: 0;
		transform: translateY(1rem);
	}
}
*/