.o-img{
	max-width: 100%;
	vertical-align: middle;
}
.o-img-fill{
	width: 100%;
}



.o-title{
	line-height: 1.33;
	margin: 0 0 .66em;
}
.o-title--margin0{
	margin: 0;
}
.o-title1{
	font-size: 1.75em;
}
.o-title2{
	font-size: 1.33em;
}
.o-title3{
	font-size: 1em;
}
.o-jump{
	font-size: 1.42em;
}
.o-color--green{
	color: #7BA026;
}
.o-color--red{
	color: #ED989B;
}
.o-color-blue1{
	color: #5294BF;
}
.o-color-blue2{
	color: #95B9D7;
}



.note-center{
	text-align: center;
}



.o-button{
	text-align: center;
	text-decoration: none;
	color: inherit;
	
	display: grid;
	grid-gap: .5em;
	grid-template-columns: 1fr auto;
	align-items: center;
	
	border-radius: 8px;
	padding: 1em;
}
.o-button::after{
	content: "";
	width: 1.25em;
	height: 1.25em;
}
.o-button--icon{
	grid-template-columns: 2em 1fr auto;
}
.o-button1{
	background: #ccc;
	padding: 1.25em 1.75em;
}
.o-button1::after{
	background: url(./img/i-arrow1.png) no-repeat center center / contain;
}

.o-button2{
	border: 1px solid #ccc;
}
.o-button2::after{
	background: url(./img/i-arrow2.png) no-repeat center center / contain;
}

@media (max-width: 768px){
.o-button1{ width:50%;
	margin:0 auto;
}
.o-button1 img{ width:70%;
}
}

.o-sect{
	margin: 8.75em 0;
}
.o-sect2{
	margin: 8.375em 0;
}
.o-sect3{
	margin: 2.1875em 0;
}
.o-sect4{
	margin: 1em 0;
}
.o-sect5{
	margin: .5em 0;
}
@media (max-width: 768px){
	.o-sect{
		margin: 4.375em 1.2em;
	}
	.o-sect2{
		margin: 4.1875em 0;
	}
	.o-sect3{
		margin: 1.09375em 0;
	}
	.o-sect4{
		margin: 0.5em 0;
	}
	.o-sect5{
		margin: 0.25em 0;
	}
}



@media (min-width: 769px){
	.o-card{
		display: flex;
		flex-flow: wrap;
		
		margin: 0 0 0 -3.68%;
	}
	.o-card__item{
		flex: 0 0 46.32%;
		margin: 0 0 0 3.68%;
	}
}
@media (max-width: 768px){
	.o-card{}
	.o-card__item:not(:last-child){
		margin-bottom: 2em;
	}
}




.o-fig-grid{
	margin: 0 0 1em;
}
@media (min-width: 769px){
	.o-fig-grid{
		display: flex;
		gap: 3.68%;
	}
	.o-fig-grid__item{
		flex: 1 1 auto;
		width: 0%;
	}
}
@media (max-width: 768px){
	.o-fig-grid__item:not(:last-child){
		margin-bottom: 1em;
	}
}



.o-unit-grid__image,
.o-unit-grid__body{
	box-sizing: border-box;
}
@media (min-width: 769px){
	.o-unit-grid{
		display: flex;
		align-items: center;
	}
	.o-unit-grid--reverse{
		flex-flow: row-reverse;
	}
	.o-unit-grid__image{
		flex: 0 0 auto;
		max-width: 50%;
		margin-right: 3.68%;
	}
	.o-unit-grid--reverse .o-unit-grid__image{
		margin-left: 3.68%;
		margin-right: 0;
	}
	.o-unit-grid__body{}
}
@media (max-width: 768px){
	.o-unit-grid{}
	.o-unit-grid__image{
		margin:0 auto 2em auto;
		width:80%;
	}
	.o-unit-grid__body{ text-align:center;}
}



.o-unit{}
.o-unit__image{
	margin: 0 0 1em;
}
.o-unit__note{
	margin: 2em 0 .66em 0;
}
.o-unit__notice{
	line-height: 1.5;
	font-size: .75em;
	display: inline-block;
}



.o-unit__image--ornament{
	position: relative;
	z-index: 0;
}
.o-unit__ornament{
	position: absolute;
}




/* @ lp wrapper */
.o-family{
	/* font-family: "Kokoro"; */
	font-family: 'Noto Serif JP', serif;
	overflow: hidden;
}



/* @ family header */
.o-family-head{}
.o-family-head__title{
	margin: 0;
}



/* @ sleep */
.o-sect--sleep{
	margin-top: 0;
}



/* @ safe */
.o-unit--safe{
	text-align: center;
}
@media (min-width: 769px){
	.o-unit--safe{
		height: 100%;
		display: flex;
		flex-flow: column;
	}
	.o-unit--safe .o-unit__image{
		order: 1;
		margin-top: auto;
	}
}

/* @ lounge */
.o-unit__ornament--lounge{
	width: 31.84%;
	right: 0;
	bottom: 0;
	transform: translate(20%, 20%);
}
.o-unit__image--lounge{
	text-align: center;
	margin-bottom: 1.5em;
}



/* @ secret base */
.o-unit-grid--secret-base{
	justify-content: center;
}


/* @ ism */
.o-button1--movie{
	background: #7AACBB;
}
.o-button1--bar{
	background: #28323C;
}



/* @ bar */
.o-unit__ornament--bar{
	width: 45.24%;
	right: 0;
	bottom: 0;
	transform: translate(5%, 27.5%);
}



/* @ bath */
.o-bath{
	text-align: center;
}
.o-title--spa{
	line-height: 1.75;
}



/* @ hotel list */
.o-title--center{
	text-align: center;
}
.o-notice{
	line-height: 1.5;
	font-size: .875em;
	text-align: center;
}

.o-table{
	min-width: 100%;
	border-collapse: collapse;
	
	& tr > *{
		text-align: left;
		border: 1px solid;
		padding: .5em 1em;
	}
	
	& th{
		font-weight: normal;
		background: #f3f4ef;
		/* width: 40%; */
	}
}

.o-hotels{
	list-style: none;
	margin: 0;
	padding: 0;
	
	& :where(:any-link){
		color: inherit;
		&:hover{
			text-decoration: none;
		}
	}
}