@charset "UTF-8";
@import url("layout.css");
@import url("component.css");

:root {
	--current-header-h: 0px; /* JSで上書きされるまでのフォールバック */
	--font-family-Zen-Go: YakuHanJP, "Zen Kaku Gothic New", sans-serif;
	--font-family-Zen-Maru-Go: YakuHanJP, "Zen Maru Gothic", sans-serif;
	--font-family-Zen-Mi: YakuHanMP, "Zen Old Mincho", serif;
	--font-family-Jost: YakuHanJP, "Jost", sans-serif;
	--font-family-Noto-Sans: YakuHanJP, "Noto Sans JP", sans-serif;
	--font-family-Noto-Serif: YakuHanMP, "Noto Serif JP", serif;


	--font-size-xl: clamp(2.4rem, 1.943rem + 0.95vw, 2.8rem);
	--font-size-lg: clamp(2rem, 1.114rem + 1.43vw, 2.4rem);
	--font-size-md: clamp(1.6rem, 1.143rem + 0.95vw, 2rem);
	--font-size-base: clamp(1.4rem, 1.171rem + 0.48vw, 1.6rem);
	--font-size-sm: clamp(1.3rem, 1.186rem + 0.24vw, 1.4rem);
	--font-size-xs: ;
	--font-size-xxs: ;

	--color-orange: #FF5611;
	--color-green: #2EB6AA;
	--color-sand: #FFFCEB;
	--color-beige: #F0ECCD;
	--color-navy: #0B2E5E;
	--color-miffy: #FFC80B;
	--color-white: #fff;
	--color-black: #000;
	--color-dialog-menu-btn: #fff;
	--color-dialog-menu-bg: #fff;
	--color-dialog-menu-link: #fff;

	--color-htb-ticket: #ff5611;
	--color-htb-enjoy: #42ab6a;
	--color-htb-event: #3399cc;
	--color-htb-gourmet: ;
	--color-htb-shopping: ;
	--color-htb-hotels: #2eb6aa;
	--color-htb-background: #fbf9ef;

	/*--align--*/
	--align-center: center;
	--align-center-sp: center;
	--align-left: left;
	--align-left-sp: left;

	--layout-space-section: 6rem;
	/*section縦の余白*/
	--layout-space-base-horizontal: 2.4rem;
	/*横の余白*/
	--layout-space-base-vrtical: 4.8rem;
	/*縦の余白*/
	--layout-space: 1.2rem;
}

@media screen and (min-width: 1025px) {
	:root {
		--layout-space: 2.4rem;
		--layout-space-base-horizontal: 4.8rem;
	}
}


/******************
l-  Layout
c-  Component
p-  Project
u-  Utility
******************/

@media screen and (max-width: 1024px) {
  body .h-header__cta {
    display:none!important;
  }
}


.l-wrapper {
  position: relative;
}

.l-section {
  position: relative;
  	font-family: var(--font-family-Zen-Go);
  --section-padding:clamp(1rem, -0.143rem + 2.38vw, 2rem);
  --section-font-size-hedding:clamp(2.4rem, 0.343rem + 4.29vw, 4.2rem);
  --section-font-size-title:clamp(2.4rem, 1.029rem + 2.86vw, 3.6rem);
  --section-font-size-name:clamp(2rem, 1.086rem + 1.9vw, 2.8rem);
  --section-font-size-p:clamp(1.3rem, 0.957rem + 0.71vw, 1.6rem);
  --section-font-size-notice:clamp(1rem, 0.771rem + 0.48vw, 1.2rem);
  --section-font-size-btn:clamp(1.6rem, 1.371rem + 0.48vw, 1.8rem);
  
}

.c-section-body {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	flex-direction: column;
	padding: 0 0 calc(var(--section-padding) * 6);
	gap: calc(var(--section-padding) * 4);
}
.c-section-inner {
	width: 100%;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	padding:0 calc(var(--section-padding) * 2);
}

.c-header{
	width: 100%;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: calc(var(--section-padding) * 1.5);
}
.l-section h2{
	font-family: var(--font-family-Zen-Mi);
	font-size:var(--section-font-size-title);
	position: relative;
	font-weight:500;
	text-align: center;
}
.l-section h2 em{
	font-size:140%;
}
.l-section h2 small{
	font-size:70%;
}
.l-section h3{
	font-family: var(--font-family-Zen-Mi);
	position: relative;
  text-wrap: pretty;
  word-break: auto-phrase;
  @supports not (word-break: auto-phrase) {
    word-break: keep-all;
    overflow-wrap: anywhere; 
  }
}
.l-section p{
	font-size:var(--section-font-size-p);
	font-weight: 500;
}
.l-section .notice{
	font-size:var(--section-font-size-notice);
	font-weight: 500;
}

/* 空室ボタン：白背景ピル型 */
.l-section .c-btn {
	background-color: var(--color-navy);
	border-color: var(--color-navy);
	color: var(--color-white);
	padding: 1.8rem 2rem 1.8rem 2.4rem;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	font-family: var(--font-family-Zen-Mi);
	max-width: 70%;
	min-width: 280px;
	margin: 0 auto;
	font-size: var(--section-font-size-btn);
	overflow: hidden;
}

.c-btn.c-btn-cta{
	background-color: transparent !important;
	border-color: var(--color-navy);
}

.c-btn.c-btn-cta::before {
	content: "";
	position: absolute;
	width: 100%;
	height:50%;
	top:0;
	left:0;
	background: var(--color-navy);
	animation: rotate 4s linear infinite;
	z-index: -2;
	opacity: 0.8;
}
.c-btn.c-btn-cta::after {
	content: "";
	position: absolute;
	inset: 2px;
	background: linear-gradient(to bottom, #27272a, #09090b);
	background:var(--color-navy);
	z-index: -1;
	border-radius: 9999px;
}
/* Keyframes: 回転アニメーション */
@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}



.l-section .c-btn.c-btn-text {
	background: none;
	border: none;
	color: var(--color-black);
	padding: 0.5rem 0rem;
	box-shadow: unset;
	max-width: unset;
	margin: 0 auto;
	border-bottom: 1px solid;
	border-radius: 0;
	font-size: calc(var(--section-font-size-btn) * 0.9);
	max-width: none;
	min-width: auto;
}

.l-section .c-btn span {
	justify-content: center;
	gap: 10px;
	font-weight: 600;
	letter-spacing: 0.08em;
}

.icon-calendar {
	display: inline-block;
	width: 20px;
	height: 20px;
	background-color: currentColor;
	mask-image: url(../images/icon/calc.svg);
	mask-repeat: no-repeat;
	mask-size: contain;
	mask-position: center;
	-webkit-mask-image: url(../images/icon/calc.svg);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	-webkit-mask-position: center;
	flex-shrink: 0;
}
.icon-air {
	display: inline-block;
	width: 20px;
	height: 20px;
	background-color: currentColor;
	mask-image: url(../images/icon/air.svg);
	mask-repeat: no-repeat;
	mask-size: contain;
	mask-position: center;
	-webkit-mask-image: url(../images/icon/air.svg);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	-webkit-mask-position: center;
	flex-shrink: 0;
}

.pretty-text {
  text-wrap: pretty;
  word-break: auto-phrase;
  @supports not (word-break: auto-phrase) {
    word-break: keep-all;
    overflow-wrap: anywhere; 
  }
}

body .h-hotels__cta {
	transition: all 0.4s;
	z-index:3;
	bottom: -100px;
}

body.scroll .h-hotels__cta {
	position: fixed;
	bottom: 0;
	  width: 100%;
	display: block;
}
body.scroll .h-hotels__cta .c-btn {
	background-color: var(--color-navy);
	border-color: var(--color-navy);
	border-radius: 2rem 2rem 0 0;
	font-family: var(--font-family-Zen-Mi);
	font-size: var(--section-font-size-btn);
	margin:0 1rem;
	padding: 2.2rem 3rem 1.8rem;
	overflow: hidden;
	  background-color: transparent;
}
/*
body.scroll .h-hotels__cta .c-btn::after {
	animation: 3s 0s shine linear infinite;
	background: linear-gradient(to right, rgba(255,255,255,0) 25%, rgba(255,255,255,.6) 50%, rgba(255, 255, 255, 0) 75%);
	content: '';
	height: 100%;
	left: -100%;
	position: absolute;
	top: 0;
	transform: skewX(-15deg);
	width: 100%;
}
body.scroll .h-hotels__cta .c-btn::before{
	content: '';
	position: absolute;
	width: 100%;
	height: 120%;
	border-bottom: 0;
	border-radius: 1.5rem 1.5rem 0 0;
	top: 2px;
	left: auto;
	right: auto;
	margin: 0 auto;
	display: block;
	outline: 2px solid rgb(255, 255, 255);
	outline-offset: -2px;
	opacity: 0.8;
}
*/
body.scroll .h-hotels__cta .c-btn::before {
	content: "";
	position: absolute;
	width: 100%;
	height:50%;
	top:0;
	left:0;
	background: var(--color-navy);
	animation: rotate 4s linear infinite;
	z-index: -2;
	opacity: 0.8;
}
body.scroll .h-hotels__cta .c-btn::after {
	content: "";
	height: 120%;
	position: absolute;
	inset: 2px;
	background: linear-gradient(to bottom, #27272a, #09090b);
	background:var(--color-navy);
	z-index: -1;
	  border-radius: 2rem 2rem 0 0;
}
/* Keyframes: 回転アニメーション */
@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}



.button:hover {
	color: #fff;
}
@keyframes shine {
	20% {
		left: 100%;
	}
	100% {
		left: 100%;
	}
}


@media screen and (min-width: 1025px) {
	.c-header {
	  flex-direction: column;
	}



	body .h-hotels__cta {
		display:none!important;
	}
}

/*---------------
#hero{}
---------------*/

#hero {
	position: relative;
}

/* ヒーロー上にグラデーションオーバーレイ */
#hero::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.45) 100%);
	z-index: 1;
	pointer-events: none;
}
#hero .c-section-body {
	justify-content: center;
	align-items: flex-end;
	flex-direction: column;
	padding:0;
}

/* テキストコンテンツ：下部中央 */
.h-hero__content {
	position: absolute;
	z-index: 2;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 0 var(--layout-space-base-horizontal) 24px;
	text-align: center;
	color: var(--color-white);
	font-family: var(--font-family-Zen-Mi);
}

.h-hero__content h1 {
	font-size: var(--section-font-size-hedding);
	font-weight: 400;
	letter-spacing: 0.2em;
	line-height: 1.5;
	margin: 0 0 12px;
	text-wrap: pretty;
	word-break: auto-phrase;
}

.h-hero__content p {
	font-size: var(--section-font-size-p);
	line-height: 1.8;
	letter-spacing: 0.06em;
	margin: 0 0 24px;
	text-wrap: pretty;
	word-break: auto-phrase;
}

/* 空室ボタン：白背景ピル型 */
#hero .c-btn {
	background-color: var(--color-white);
	border-color: var(--color-white);
	color: var(--color-navy);
	max-width: 70%;
}

#hero .c-btn.c-btn-cta{
	border-color: var(--color-white);
}
#hero .c-btn.c-btn-cta::before {
	background-color: var(--color-white);
}
#hero .c-btn.c-btn-cta::after {
	background-color: var(--color-white);
}

#hero .hero-swiper {
	height: calc(100vh - var(--current-header-h));
	height: calc(100svh - var(--current-header-h));
	overflow: hidden;
}

#hero .hero-swiper .swiper-wrapper {
	height: 100%;
}

#hero .hero-swiper .swiper-slide {
	height: 100%;
}

#hero .hero-swiper .swiper-slide .swiper-img {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

#hero .hero-swiper .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: bottom;
}

@keyframes zoomUp {
	0% {
		transform: scale(1);
	}

	100% {
		transform: scale(1.15);
	}
}

.hero-swiper .swiper-slide-active .swiper-img,
.hero-swiper .swiper-slide-duplicate-active .swiper-img,
.hero-swiper .swiper-slide-prev .swiper-img {
	animation: zoomUp 7s linear 0s normal both;
}


/*---------------
Scroll インジケーター
---------------*/

.h-hero__scroll {
	position: absolute;
	right: 12px;
	bottom: 24px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.h-hero__scroll-text {
	writing-mode: vertical-rl;
	font-family: var(--font-family-Jost);
	font-size: 1.1rem;
	font-weight: 300;
	letter-spacing: 0.15em;
	color: var(--color-white);
	text-transform: uppercase;
}

.h-hero__scroll-line {
	display: block;
	width: 1px;
	height: 40px;
	position: relative;
	overflow: hidden;
	background-color: rgba(255, 255, 255, 0.25);
}

.h-hero__scroll-line::after {
	content: "";
	display: block;
	width: 1px;
	height: 100%;
	background-color: var(--color-white);
	position: absolute;
	top: 0;
	left: 0;
	animation: scrollDown 2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes scrollDown {
	0% {
		transform: translateY(-100%);
	}
	50% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(100%);
	}
}


@media screen and (min-width: 1025px) {
	.h-hero__content {
	  bottom: 10%;
	}
	#hero .c-btn {
	  max-width: 380px;
	}

}



/*---------------
#privilege{}
---------------*/

#privilege .c-section-body {
	--privilege-color:#c3931e;
	gap: calc(var(--section-padding) * 4);
	padding: calc(var(--section-padding) * 4) 0;
	background: #fffaf0;
	border-radius: 0 0 2rem 2rem;
	margin-bottom:calc(var(--section-padding) * 6);
}

#privilege .c-header h2{
	font-size: calc(var(--section-font-size-title) * 1.3);
	font-weight: 400;
	line-height: 1.4;
}
#privilege .c-header h2 small{
	font-size:55%;
}
#privilege .c-header h2 em span {
  z-index: 1;
  position: relative;
}
#privilege .c-header h2 em{
	position: relative;
	font-weight: 600;
	font-size:100%;
	display: block;
}
#privilege .c-header h2 em:before{
  content: "";
  width: 100%;
  height: 30%;
  background: var(--privilege-color);
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0.5;
}

#privilege .p-card:before{
	content: attr(data-number);
	position: absolute;
	top: -2rem;
	top: calc(clamp(2rem, -0.286rem + 4.76vw, 4rem) * -1);
	left: 0;
	opacity: 0.8;
	color: var(--privilege-color);
	z-index: 2;
	font-size:clamp(3rem, -0.429rem + 7.14vw, 6rem);
	font-family: var(--font-family-Zen-Mi);
	line-height: 1;
}

#privilege .p-card figure .layer{
	position: absolute;
	top: 0;
	right: 0;
	/*
	background-image: linear-gradient(90deg, transparent 10%, var(--color-navy) 40%);
	*/
	display: flex;
	width: 100%;
	height: 100%;
	align-items: flex-end;
	justify-content: center;
	flex-direction: column;
	padding: 0 calc(var(--section-padding) * 1);
}
#privilege .p-card figure .layer p{
	width:70%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: calc(var(--section-padding) * 0.5);
	font-family: var(--font-family-Zen-Mi);
	font-size:clamp(1.4rem, 0.257rem + 2.38vw, 2.2rem);
	line-height: 1.4;
	color:#fff;
}
#privilege .p-card figure .layer p span:first-child{
	background: #fff;
	color:var(--color-navy);
	padding: 0 0.5rem;
	white-space: nowrap;
}


#privilege .p-card:first-child figure picture img{
  object-fit: contain;
  object-position: left;
  height: 100%;
}

#privilege .p-card figure .layer p span:nth-of-type(2){
  color: #ffe100;
  font-weight: 600;
  text-decoration: underline;
  	white-space: nowrap;
}
#privilege .p-card figure .layer p span:nth-of-type(3){
	font-size:140%;
		white-space: nowrap;
}
#privilege .p-card figure .layer p span em{
  font-weight:900;
	font-size:140%;
  color: #ffe100;
}
#privilege .p-card figure .layer p:last-child,
#privilege .p-card figure .layer p small,
#privilege .p-card figure .layer p sup{
	font-size:60%;
}
#privilege .p-card figure .layer p:last-child{}


#privilege .p-card figure picture{
	    aspect-ratio: 660 / 439;
}


@media screen and (max-width: 1024px) {
	#privilege .p-card:first-child figure picture {
		aspect-ratio: 16 / 8;
	}
	#privilege .p-card:nth-child(n+3){
	  width: calc(100% / 2 - calc(var(--section-padding) * 1));
	}


	#privilege .p-card:nth-child(2){
		/*
		display: grid;
		width: 100%;
		grid-template-columns: 1.5fr 1fr;
		align-items: start;
		align-content: start;
		*/
	}

	#privilege .p-card:nth-child(n+2){
		display: grid;
		width: 100%;
		grid-template-columns: 1fr 1fr;
		align-items: start;
		align-content: start;
	}
	#privilege .p-card:nth-child(n+2) figure {
	  align-items: stretch;
	}
	#privilege .p-card:nth-child(n+2) figure picture{
	  aspect-ratio: unset;
	  display: flex;
	  aspect-ratio: 660 / 439;
	}
	#privilege .p-card:nth-child(n+2) figure picture img{
		object-fit: cover;
	}
	#privilege .p-card:nth-child(n+2) h3{
		font-size: calc(var(--section-font-size-name) * 0.8);
	}
	#privilege .p-card:nth-child(n+2) p{
		font-size: calc(var(--section-font-size-p) * 0.8);
	}
}

#privilege .p-card:nth-child(n+3) h3{
	font-size: calc(var(--section-font-size-name) * 0.8);
}
#privilege .p-card:nth-child(n+3) p{
	font-size: calc(var(--section-font-size-p) * 0.8);
}

@media screen and (min-width: 1025px) {
	#privilege .c-section-inner {
	  max-width: 1440px;
	}
	#privilege .p-card {
	  width: calc(100% / 2 - calc(var(--section-padding) * 1));
	}
	#privilege .p-card:nth-child(n+3){
	  width: calc(100% / 3 - calc(var(--section-padding) * 1.4));
	}
	#privilege .p-card:nth-child(6){
	  display: none;
	}
	#privilege .p-card figure .layer p {
	  width: 60%;
	}
}



.p-card-wrapper {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: calc(var(--section-padding) * 4);
  column-gap: calc(var(--section-padding) * 2);
  align-items: flex-start;
}
.p-card {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: calc(var(--section-padding) * 1.6);
  width: 100%;
}
.p-card figure{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	width: 100%;
}
.p-card figure picture{
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	width: 100%;
}
.p-card-header{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: calc(var(--section-padding) * 1);
}
.p-card-header h3{
	font-size: var(--section-font-size-name);
	font-weight:700;
	line-height: 1.4;
	text-align: center;
	color:var(--privilege-color);
	text-wrap: pretty;
	word-break: auto-phrase;
}

.p-card-header sup{
	font-size:60%;
}
.p-card-header p {
	font-size: var(--section-font-size-p);
	line-height: 1.6;
	font-weight: 500;
}



/* ベースとなる上辺（水平線）の設定 */
.trapezoid-arch {
  position: relative;
  width: 85%;
  max-width:85%;
  height: 1px;
  background-color:#dddddd; 
  border-radius: 2px; 
  margin-bottom: 15px; 
  max-width: 1100px;
}
.trapezoid-arch::before,
.trapezoid-arch::after {
  content: "";
  position: absolute;
  top: 0;
  width: 15px; 
  height: 100%;
  background-color: inherit;
  border-radius: inherit;
}
.trapezoid-arch::before {
  left: 0;
  transform-origin: left center;
  transform: rotate(130deg);
}
.trapezoid-arch::after {
  right: 0;
  transform-origin: right center;
  transform: rotate(-130deg);
}
.trapezoid-arch.bottom {
	transform: rotate(180deg);
}


/*---------------
#fivehotels{}
---------------*/


#fivehotels .c-header p{
  padding: 0 calc(var(--section-padding) * 2);
  text-align: center;
}

#fivehotels .c-section-inner.fivehotels {
padding: calc(var(--section-padding) * 2) 0;
}

#fivehotels .p-card-wrapper {
  gap: calc(var(--section-padding) * 6);
}

#fivehotels .p-card{}
#fivehotels .p-card figure {
	justify-content: flex-start;
}
#fivehotels .p-card figure:before {
	content: "";
	width: 70px;
	height: 100px;
	position: absolute;
	top: calc(var(--section-padding) * -1);
	right: 0;
	background: #000;
}
@media screen and (max-width: 1024px) {
	#fivehotels .p-card:nth-child(even) figure {
		justify-content: flex-end
	}
	#fivehotels .p-card:nth-child(even) figure:before  {
		right:auto;
		left: 0;
	}
}	

#fivehotels #he.p-card figure:before {
	background: #3d240d;
}
#fivehotels #ha.p-card figure:before {
	background: #012962;
}
#fivehotels #hd.p-card figure:before {
	background: #01517b;
}
#fivehotels #fv.p-card figure:before {
	background: #004e3f;
}
#fivehotels #hr.p-card figure:before {
	background: #ffe100;
}


#fivehotels .p-card figure picture{
    width:calc(100% - calc(var(--section-padding) * 2));
    aspect-ratio: 76 / 50;
}
#fivehotels .p-card figure picture img{
	height: 100%;
}

#fivehotels .p-card .p-card-header{
	padding: 0 calc(var(--section-padding) * 3.2);
}
#fivehotels .p-card-header h3 {
  font-size:calc(var(--section-font-size-name) * 1.2);
}

#fivehotels .p-card-header p {
  font-size: calc(var(--section-font-size-p) * 0.9);
  line-height: 1.8;
}

#fivehotels .p-card .c-btn-text{
	margin: 0 0 0 auto;
}



.reservation-wrapper{
	position: relative;
	width: 100%;
	padding: 0 calc(var(--section-padding) * 2);
	margin:calc(var(--section-padding) * 2) auto 0;
}
.reservation-wrapper:before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 1px;
  background: #b3b3b3;
  top: 50%;
  transform: translateY(-50%);
  display:none;
}

.reservation-link{
	display: grid;
	grid-template-columns:auto auto;
	border-radius: 999px;
	border: 1px solid;
	align-items: center;
	position: relative;
	justify-content: center;
	color:#b3b3b3;
	background:var(--color-white);
	  background: var(--color-navy);
	overflow: hidden;
}
.reservation-link a:nth-child(2):before{
  content: "";
  position: absolute;
  left: 0;
  left: 0;
  height: 50%;
  width: 1px;
  background: #b3b3b3;
  margin: 0 auto;
}

.reservation-link a {
  color: var(--color-navy);
  color: var(--color-white);
  padding: 1.6rem 1rem;
  font-family: var(--font-family-Zen-Mi);
  font-size: calc(var(--section-font-size-btn) * 0.9);
  transition: all 0.4s;
	position: relative;
}

.reservation-link a span{
  line-height: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-weight: 600;
  letter-spacing: 0em;
}
.reservation-link a span:after {
  content: "";
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  background-color: currentColor;
  background-repeat: no-repeat;
  background-position: center;
  width: 15px;
  height: 15px;
  display: block;
  mask-image: url(data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20123.93%20123.93%22%3E%20%3Cg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1-2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%201%22%3E%20%3Cpath%20d%3D%22M61.97%2C0C27.74%2C0%2C0%2C27.74%2C0%2C61.97s27.74%2C61.97%2C61.97%2C61.97%2C61.97-27.74%2C61.97-61.97S96.19%2C0%2C61.97%2C0ZM81.11%2C65.62l-23.24%2C23.24c-1.01%2C1.01-2.33%2C1.51-3.65%2C1.51s-2.64-.5-3.65-1.51c-2.02-2.02-2.02-5.29%2C0-7.3l19.59-19.59-19.59-19.59c-2.02-2.02-2.02-5.29%2C0-7.3s5.29-2.02%2C7.3%2C0l23.24%2C23.24c2.02%2C2.02%2C2.02%2C5.29%2C0%2C7.3Z%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E);
}

.reservation-link a:hover {
  color:var(--color-navy);
  background: var(--color-white);
}


@media screen and (min-width: 1025px) {

	#fivehotels .p-card-wrapper {
	  max-width: 1440px;
	}
	#fivehotels .p-card {
	  display: grid;
	  grid-template-columns: 2fr 1fr;
	      place-items: normal;
	}
	#fivehotels .p-card figure {
	  grid-row: 1 / 3;
	}

	#fivehotels .p-card .p-card-header {
		padding: 0;
		justify-content: flex-end;
	}
	.reservation-wrapper {
	  padding:0;
	  margin:0 auto 0;
	}
	.reservation-link {
	  grid-template-columns:1fr 1fr;
	}
	#fivehotels .p-card figure:before {
	  width: 200px;
	  height: 50%;
	  right: calc(var(--section-padding) * 1);
	}
}
/*---------------
#news{}
---------------*/
#news .c-header h2:before {
  content: "";
  width: 100px;
  height: 5px;
  background: var(--color-navy);
  display: block;
  margin: 0 auto 1rem;
}




.htb-information__content-scroll {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  height: 140px;
}
.htb-information__content-scroll::-webkit-scrollbar {
    width: 6px;
}
.htb-information__content-scroll::-webkit-scrollbar-thumb {
    background: rgba(138, 171, 217, 1);
    border-radius: 6px;
}
.htb-information__content-scroll::-webkit-scrollbar-track {
    background: rgba(138, 171, 217,.0);
    border-radius: 6px;
}


.htb-information__txt {
border-bottom: 1px #dddddd dotted;
  padding: 10px 10px 10px 0;
  margin-right: 10px;
  position: relative;
  color: #000;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.6rem;
  align-items: center;
}
.htb-information__txt:after {
  content: "";
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  background-color: currentColor;
  background-repeat: no-repeat;
  background-position: center;
  width: 15px;
  height: 15px;
  display: block;
  mask-image: url(data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20123.93%20123.93%22%3E%20%3Cg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1-2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%201%22%3E%20%3Cpath%20d%3D%22M61.97%2C0C27.74%2C0%2C0%2C27.74%2C0%2C61.97s27.74%2C61.97%2C61.97%2C61.97%2C61.97-27.74%2C61.97-61.97S96.19%2C0%2C61.97%2C0ZM81.11%2C65.62l-23.24%2C23.24c-1.01%2C1.01-2.33%2C1.51-3.65%2C1.51s-2.64-.5-3.65-1.51c-2.02-2.02-2.02-5.29%2C0-7.3l19.59-19.59-19.59-19.59c-2.02-2.02-2.02-5.29%2C0-7.3s5.29-2.02%2C7.3%2C0l23.24%2C23.24c2.02%2C2.02%2C2.02%2C5.29%2C0%2C7.3Z%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E);
}

.htb-information__txt p {
	line-height: 1.6;
}
.htb-information__txt a {
  color:#000;
  text-decoration: none;
}
.htb-information__txt a:hover {
  opacity: 0.7;
}


@media screen and (min-width: 1025px) {
	.htb-information__content-scroll {
	  height: 200px;
	  min-width: 1100px;
	}

}
/*---------------
#hot-spring{}
---------------*/
#hot-spring .p-card {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  align-content: start;
  background: #8c6f53;
  color: #fff;
  padding: calc(var(--section-padding) * 1);
}

#hot-spring .p-card figure {
  align-items: stretch;
}
#hot-spring .p-card figure picture {
  aspect-ratio: unset;
  display: flex;
}

#hot-spring .p-card-header h3 {
	font-size: calc(var(--section-font-size-name) * 1);
	text-align: left;
	width: 100%;
}
#hot-spring .p-card-header p {
  font-size:calc(var(--section-font-size-p) * 0.8);
}
#hot-spring .c-btn.c-btn-text {
	font-size: calc(var(--section-font-size-btn) * 0.8);
	margin: 0 0 0 auto;
	color: #fff;
}


@media screen and (min-width: 1025px) {
	#hot-spring .p-card {
		max-width: 1100px;
		grid-template-columns: 1.8fr 1fr;
	}
	#hot-spring .p-card-header {
	  align-items: flex-start;
	}
}


/*---------------
#officialhotels{}
---------------*/
#officialhotels .c-header h2:before {
  content: "";
  width: 100px;
  height: 5px;
  background: var(--color-navy);
  display: block;
  margin: 0 auto 1rem;
}


#officialhotels .p-card {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  align-content: start;
}

#officialhotels .p-card figure {
  align-items: stretch;
}
#officialhotels .p-card figure picture {
  aspect-ratio: unset;
  display: flex;
}

#officialhotels .p-card-header h3 {
	font-size: calc(var(--section-font-size-name) * 0.8);
	text-align: left;
	width: 100%;
}
#officialhotels .p-card-header p {
  font-size:calc(var(--section-font-size-p) * 0.8);
}
#officialhotels .c-btn.c-btn-text {
  font-size: calc(var(--section-font-size-btn) * 0.8);
  margin: 0 0 0 auto;
}

#officialhotels .p-card:nth-child(2) figure {
  order: 1;
}


@media screen and (min-width: 1025px) {

	#officialhotels .c-header p {
	  text-align: center;
	}

	#officialhotels .p-card-wrapper {
	  max-width: 960px;
	}
	#officialhotels .p-card {
		grid-template-columns: 1.8fr 1fr;
		    grid-template-columns: 1fr;
		        width: calc(100% / 2 - 2rem);
	}
	/*
	#officialhotels .p-card:nth-child(2) {
		grid-template-columns: 1fr 1.8fr;
	}
	*/
	#officialhotels .p-card:nth-child(2) figure {
	  order: unset;
	}
	#officialhotels .p-card-header h3 {
	  text-align: center;
	}

}