.page-title{
	text-align: center;
}
.title1--hotels{
	margin: 0;
	padding: 0;
}





/* .filter{
	padding-block: 1.875em;
	background-color: #F6AB00;
}
.filter__title{
	margin: 0;
	padding: 0;
	margin-bottom: 1em;
	
	font-size: 1.125em;
}
.filter__items{
	margin: 0;
	padding: 0;
	list-style: none;
	
	display: flex;
}
.filter__item{}
.filter__option{
	display: none;
}

.filter-button{}
.filter-button__label{
	display: block;
	text-align: center;
	background-color: #fff;
	border: 1px solid #ccc;
	
	cursor: pointer;
}
.filter-button__label:hover{
	border: 1px solid #000;
}

.filter__option:checked + .filter-button__label{
	color: #fff;
	background-color: #eca514;
}

.filter__more{
	display: block;
	
	color: inherit;
	text-decoration: inherit;
	
	background-color: #fff;
	border: 1px solid #ccc;
}
.filter__more:hover{
	background-color: #ddd;
}

@media (min-width: 769px){
	.filter{
		text-align: center;
	}
	.filter__items{
		flex-wrap: wrap;
		justify-content: center;
		
		margin-left: -1em;
	}
	.filter__item{
		margin-left: 1em;
		margin-bottom: 1em;
	}
	.filter-button__label{
		padding: 0 .5em;
	}
	.filter__more{
		padding: 0 .5em;
	}
}
@media (max-width: 768px){
	.filter__items{
		overflow: auto;
		position: relative;
	}
	.filter__item{
		white-space: nowrap;
		flex: 1 0 25%;
	}
	.filter__item:not(:first-child){
		margin-left: 1em;
	}
	.filter-button__label{
		padding: .5em 1em;
	}
	.filter__more{
		padding: .5em 1em;
	}
} */



.filter{
	padding-block: 1.875em;
	background-color: #F6AB00;
}



/* filter area */
.filter-area{
	list-style: none;
	margin-block: 0;
	/* padding: 0 0 1em; */
	padding: 0;
	
	overflow: auto;
	display: flex;
	gap: .625em;
}
.filter-area:has(+ *){
	padding-bottom: 1em;
}
.filter-area__item{
	display: contents;
}
.filter-area__more{
	text-align: center;
	text-decoration: none;
	color: inherit;
	background: white;
	border-radius: .25em;
	padding: .5em;
	flex: 1 1 0;
	
	&:where(button){
		border: 0;
	}
}
.filter-area__item--is-current .filter-area__more{
	pointer-events: none;
	color: #F6AB00;
	border-radius: .25em .25em 0 0;
	box-shadow: 0 1em white;
}

.filter-area-option-custom{
	display: grid;
}
.filter-area-option-custom::after,
.filter-area-option-custom > *{
	grid-area: 1 / 1;
}
.filter-area-option-custom::after{
	content: "▼";
	font-size: .5em;
	color: #999;
	margin-right: 1em;
	align-self: center;
	justify-self: end;
}
.filter-area-option-custom:has(~ .filter-pref){
	margin-bottom: 1em;
}
.filter-area-option{
	cursor: pointer;
	background: white;
	border: 0;
	padding: .5em 1em;
	
	box-sizing: border-box;
	width: 100%;
	
	
	-webkit-appearance: none;
	appearance: none;
}




/* filter pref */
.filter-pref{
	background: #fff;
	padding:  1em;
	
	display: grid;
	grid-template-columns: auto auto;
	justify-content: center;
	gap: 1em 3.75em;
	
	& > *{
		margin-block: 0;
	}
}
@media (max-width: 768px){
	.filter-pref{
		text-align: center;
		grid-template-columns: none;
	}
}
.filter-pref__name{
	font-size: 1em;
	font-weight: normal;
	/* border-bottom: 1px solid; */
}
.filter-pref__more{
	color: inherit;
	
	&:hover{
		text-decoration: none;
	}
}
.filter-pref__more--is-current{
	pointer-events: none;
	color: #F6AB00;
	text-decoration: none;
}
.filter-pref__result{
	line-height: 1;
	font-size: 1.6em;
	font-weight: bold;
	/* margin-left: .5em; */
}



.filter-pref-list{
	display: flex;
	flex-wrap: wrap;
	gap: 1.5em;
	
	list-style: none;
	padding-left: 0;
}
.filter-pref-list__item{
	
}



.filter-button{
	cursor: pointer;
	color: inherit;
	
	&:has(:checked){
		font-weight: bold;
		color: #F6AB00;
	}
	&:has(:not(:checked)){
		text-decoration: underline;
	}
	&:hover{
		text-decoration: none;
	}
}
.filter-button--is-current{
	pointer-events: none;
	text-decoration: none;
	font-weight: bold;
}
.filter-button__option{
	display: none;
}


.filter-toggle-btn{
	line-height: 1;
	text-align: center;
	font-weight: bold;
	
	background: #ccc;
	border: 0;
	border-radius: .5em;
	padding: .5em .75em;
}



.hotels{}



.prefecture{
	margin-top: 5em;
	margin-bottom: 5em;
}
.prefecture__name{
	font-size: 2em;
	font-weight: normal;
	text-align: center;
	
	margin: 0 0 1.5em;
	padding: 0;
}
@media (max-width: 768px){
	.prefecture{}
	.prefecture__name{
		position: sticky;
		top: 54px;
		background-color: #fff;
	}
}






/* hotel list */
.hotel-list{
	
	list-style: none;
	margin-block: 0;
	padding-left: 0;
	
	
	display: grid;
	grid-template-columns: [hotels-start] repeat(2, 1fr) [hotels-end];
	gap: 3em min(5%, 3em);
}
@media (max-width: 768px){
	.hotel-list{
		grid-template-columns: none;
	}
}
.hotel-list__item{
	background: #F5F5F5;
	border-radius: .5em;
	overflow: hidden;
	
	display: grid;
}
@media (min-width: 769px){
	.hotel-list__item--notfound{
		grid-column: hotels-start / hotels-end;
	}
}
.hotel-list__item--notfound{
	text-align: center;
	padding: 3.75em 1em;
}



.hotel__more{
	line-height: 1.5;
	color: inherit;
	text-decoration: inherit;
	
	display: block;
	/* padding: 1em 1em 1.5em; */
	padding: 1em;
	
	& > * + *{
		margin-top: 1rem;
	}
}
.hotel__name{
	font-size: 1.5em;
	font-weight: normal;
}
.hotel__name[data-ruby]::after{
	content: attr(data-ruby);
	font-size: .5em;
	color: #A9A6A6;
	display: block;
}
.hotel__image{
	border-radius: .5em;
}
.hotel__body{
	font-style: normal;
	
	& > *{
		margin-block: 0;
	}
}
.hotel__access{
	text-align: center;
	background: white;
	/* box-shadow: 0 .125em .125em color-mix(in srgb, transparent, currentcolor 25%); */
	border-radius: .5em;
	margin-top: 1em;
	padding: 1em;
}

.hotel-header{
	display: grid;
	grid-template-columns: 25% 1fr;
	gap: 1em;
}
@media (max-width: 768px){
	.hotel-header{
		/* grid-template-columns: none; */
		grid-template-columns: repeat(2, 1fr);
		grid-template-columns: 33.3% 1fr;
	}
}
.hotel-header__image{
	position: relative;
	z-index: 0;
}
@media (width < 769px){
	.hotel-header__image{
		width: 42.5%;
		margin-inline: auto;
	}
}
@media (max-width: 768px){
	.hotel-header__image{
		width: auto;
		margin-inline: auto;
	}
}
.hotel-header__label{
	font-size: .75em;
	color: white;
	background: #F6AB00;
	box-shadow: 2px 2px 4px color-mix(in srgb, transparent, black 25%);
	padding: .5em .5lh;
	
	position: absolute;
	inset: 0 auto auto 0;
	
	&[data-icon]{
		display: grid;
		grid-template-columns: auto 1fr;
		gap: .25em;
	}
	&[data-icon]::before{
		content: attr(data-icon);
	}
}
.hotel-header__body{
	align-self: center;
	
	& > *{
		margin-block: 0;
	}
	& > * + *{
		margin-top: 1rem;
	}
}

.hotel-footer{
	margin-top: auto;
}

.hotel-nav{
	
	
	list-style: none;
	padding-left: 0;
	
	
	display: flex;
	flex-wrap: wrap;
}
.hotel-nav__item{
	display: contents;
}
.hotel-nav__more{
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	color: inherit;
	
	padding: 1em;
	
	display: grid;
	grid-template-columns: repeat(2, auto);
	justify-content: center;
	align-items: center;
	gap: .5em;
	
	flex: 1 1 0;
	
	&:hover{
		opacity: .64;
	}
}
@media (width < 769px){
	.hotel-nav__more{
		box-sizing: border-box;
		flex: 1 1 50%;
	}
}
.hotel-nav__more--detail{
	color: white;
	background: #F6AB00;
}
.hotel-nav__more--access{
	background: #f5f5f5;
	border: 1px solid #999;
}
.hotel-nav__more--booking{
	color: white;
	background: #113881;
}
.hotel-nav__more::before{
	content: "";
	width: 1.5em;
	height: 1.5em;
}
.hotel-nav__more--detail::before{
	background: url(../_img3/hotel-list/icon-information.svg) no-repeat center / contain;
}
.hotel-nav__more--access::before{
	background: url(../_img3/hotel-list/icon-pin.svg) no-repeat center / contain;
}
.hotel-nav__more--booking::before{
	background: url(../_img3/hotel-list/icon-calendar.svg) no-repeat center / contain;
}




/* hotel facility */
.hotel-facility{
	display: flex;
	flex-wrap: wrap;
	gap: .5em;
	
	list-style: none;
	padding-left: 0;
}
.hotel-facility__item{
	font-size: .75em;
	font-weight: bold;
	color: white;
	background: black;
	border-radius: 2em;
	padding: .5em 1.5em;
}


/* .hotel__outer{
	margin-bottom: .5em;
}
.hotel__thumb{
	width: 100%;
}
.hotel__name{
	font-size: 1em;
	font-weight: bold;
	
	margin: 0;
	padding: 0;
}
.hotel__address{
	font-style: normal;
	
	margin: 0;
	padding: 0;
}


.hotel-icon{
	font-size: .75em;
	
	margin: 0;
	padding: 0;
	list-style: none;
	
	display: flex;
	flex-wrap: wrap;
	
	margin-left: -.5em;
	
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}
.hotel-icon__item{
	color: #fff;
	background-color: #ccc;
	
	padding: 0 1em;
	
	margin-left: .5em;
	margin-bottom: .5em;
}
.hotel-icon__item:before{
	content: "●";
	margin-right: .5em;
}
.hotel-icon__item--spa					{ background-color: #DA6525; }
.hotel-icon__item--bath					{ background-color: #DA6525; }
.hotel-icon__item--carbonated			{ background-color: #DA6525; }

.hotel-icon__item--spa:before			{ content: "♨"; }
.hotel-icon__item--bath:before			{ content: "ゆ"; }
.hotel-icon__item--carbonated:before	{ content: "ゆ"; } */






.is-hide{
	display: none;
}



/* about prefecture */
.about-prefecture{
	/* display: grid;
	grid-template-columns: 25% 1fr;
	gap: 2em; */
}
* + .about-prefecture{
	margin-top: 5em;
}
@media (max-width: 768px){
	.about-prefecture{
		grid-template-columns: none;
	}
}
@media (max-width: 768px){
	.about-prefecture__image{
		margin-inline: -2.63%;
	}
}
.about-prefecture__fit-image{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media (max-width: 768px){
	.about-prefecture__fit-image{
		max-height: 200px;
	}
}
.about-prefecture__body{
	& > *{
		margin-block: 0;
	}
	& > * + *{
		margin-top: 1rem;
		margin-top: 1rlh;
	}
}
.about-prefecture__title{
	font-size: 1.6em;
	font-weight: normal;
	
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 1em;
}
.about-prefecture__title::after{
	content: "";
	border-bottom: 1px solid;
}
.about-prefecture__note{
	
}



/* area search */
.search-area{
	background: #F5F5F5;
	margin-top: 5em;
	padding-block: 5em;
}
.search-area__title{
	text-align: center;
	font-size: 2em;
	font-weight: normal;
	margin-block: 0;
}
.search-area__title[data-ruby]::before{
	content: attr(data-ruby);
	font-size: .75em;
	display: block;
	margin-bottom: .5em;
}
.search-area-list{
	list-style: none;
	margin: 3.75em 0 0;
	padding-left: 0;
	
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(20em, 100%), 1fr));
	gap: 3.75em;
}
@media (max-width: 768px){
	.search-area-list{
		gap: 1.5em;
	}
}
.search-area-list__item{
	& > *{
		margin-block: 0;
	}
	& > * + *{
		margin-top: 1rem;
	}
}
.search-area-list__title{
	font-size: 1.5em;
	font-weight: normal;
}
@media (min-width: 769px){
	.search-area-list__title{
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;
		gap: 1em;
	}
	.search-area-list__title::after{
		content: "";
		border-bottom: 1px solid;
	}
}
.search-area-hotels{
	padding-left: 0;
	list-style: none;
	
	display: flex;
	flex-wrap: wrap;
	gap: 0 1em;
}
.search-area-hotels__item{
	
}
.search-area-hotels__more{
	color: inherit;
	padding: .25em;
}
.search-area-hotels__more:not(:hover){
	text-decoration: none;
}
@media (max-width: 768px){
	.search-area-hotels__more:where(.search-area-list__title > *){
		pointer-events: none;
	}
}

/* search area grid */
.search-area-grid{
	
}
.search-area-grid__summary{
	& > *{
		margin-block: 0;
	}
}
.search-area-grid__body{
	& > *{
		margin-block: 0;
	}
	& > * + *{
		margin-top: 1rem;
	}
}

@media (max-width: 768px){
	.search-area-grid{
		background: white;
		border-radius: 1em;
		overflow: hidden;
		
		display: grid;
		grid-template-rows: auto 1fr;
		transition: 333ms ease-out;
		
		&:not(:has(:checked)){
			grid-template-rows: auto 0fr;
		}
	}
	.search-area-grid__summary{
		cursor: pointer;
		/* padding: .75em 1em; */
		padding: 1em 1.5em;
		
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		gap: .5em;
		
		&:has(:checked){
			color: white;
			background: #F6AB00;
		}
		&::after{
			content: "";
			border-style: solid;
			border-width: 0 2px 2px 0;
			width: .75em;
			height: .75em;
			rotate: 45deg;
		}
		&:has(:checked)::after{
			rotate: 225deg;
			translate: 0 33.3%;
		}
	}
	.search-area-grid__body{
		padding: 1em;
		overflow: hidden;
		transition: 333ms ease-out;
		
		&:where(.search-area-grid:not(:has(:checked)) *){
			padding-block: 0;
		}
	}
}

.search-result{
	text-align: center;
	/* border-bottom: 1px solid; */
	max-width: fit-content;
	margin-inline: auto;
}
.search-result__more{
	color: inherit;
	
	&:hover{
		text-decoration: none;
	}
}
.search-result__score{
	font-size: 1.5em;
	font-weight: bold;
	/* margin-left: .25em; */
}


[name="search-area"]{
	display: none;
}
@media (min-width: 769px){
	.search-result{
		display: none;
	}
}
@media (max-width: 768px){
	
}



/* CTA Button */
.l3-cta-button{
	line-height: 1.33;
	font-weight: bold;
	text-align: center;
	text-decoration: inherit;
	color: #fff;
	background: linear-gradient(#F6AB00, #EF8400);
	box-shadow: 0 2px 4px rgba(0,0,0,.5);
	border-radius: .625rem;
	position: relative;
	z-index: 0;
	max-width: fit-content;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-inline: auto;
	padding: 1em 2.5em;
	
	transition: transform 333ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.l3-cta-button:hover{
	transform: scale(1.05);
}
.l3-cta-button::after{
	content: "";
	border: solid;
	border-width: .25em .25em 0 0;
	transform: rotate(45deg);
	position: absolute;
	top: 0;
	right: 1em;
	bottom: 0;
	width: .5em;
	height: .5em;
	margin: auto 0;
}
.l3-cta-button__lead{
	font-size: .75em;
	color: #EF8600;
	background: #fff;
	border-radius: .5rem;
	position: absolute;
	top: 0;
	transform: translateY(-50%);
	padding: .5em 1em;
}
@media (min-width: 769px){
	.l3-cta-button{
		font-size: 1.75rem;
	}
}
@media (max-width: 768px){
	.l3-cta-button{
		font-size: 1.25rem;
	}
}