@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);
--privilege-color:#c3931e;
--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.4rem, 0.943rem + 0.95vw, 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.6rem 2rem 1.6rem 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);
}

.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; 
  }
}

.c-miffy_w:after {
	content: "";
	background-image: url(../images/privilege/mercisbv_w.png);
	background-color: transparent;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	width: 70px;
	height: 15px;
	display: block;
	position: absolute;
	top: 3px;
	left: 3px;
	z-index: 1;
}


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;
}

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



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

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

#hero {
	position: relative;
}

/* ヒーロー上にグラデーションオーバーレイ */
#hero::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100%;
	background-image: linear-gradient(135deg, var(--privilege-color) 40px, transparent 0),
	            linear-gradient(-135deg, var(--privilege-color) 40px, transparent 0);
	opacity: 0.5;
}
#hero .c-section-body {
	justify-content: center;
	flex-direction: column;
	padding:0;
}

/* テキストコンテンツ：下部中央 */
.h-hero__content {
	padding: calc(var(--section-padding) * 6) calc(var(--section-padding) * 2) calc(var(--section-padding) * 0);
	text-align: center;
	color: var(--color-black);
	font-family: var(--font-family-Zen-Mi);
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap:calc(var(--section-padding) * 1.5);
}

.h-hero__content h1 {
	font-size: calc(var(--section-font-size-hedding) * 1.2);
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.4;
	margin: 0 0 12px;
	text-wrap: pretty;
	word-break: auto-phrase;
	color: var(--privilege-color);
}

.icon-line {
color: var(--privilege-color);
  display: inline-block;
  width: 200px;
  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/line.svg);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  flex-shrink: 0;}

.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;
}




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

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

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


#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{
	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 figure .layer{
	position: absolute;
	top: 0;
	left: 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);
	width: calc(100% - calc(var(--section-padding) * 7));
}
#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.nextday figure picture img {
  width: 65%;
  margin: 0 2.6rem 0 0;
  object-fit: contain;
  object-position: left center;
}

#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 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 {
  justify-content: flex-start;
}
#privilege .p-card:nth-child(even) figure {
    justify-content: flex-end;
  }
#privilege .p-card figure picture {
  width: calc(100% - calc(var(--section-padding) * 6));
  aspect-ratio: 76 / 50;
}
#privilege .p-card-header {
  background: #fff;
  margin-top:calc(var(--section-padding) * -1.6);
  z-index: 1;
  width:calc(100% - calc(var(--section-padding) * 4));
  padding:calc(var(--section-padding) * 2);
    position: relative;
}
#privilege .p-card-header:before {
	content: "";
	border-top: 1px var(--privilege-color) solid;
	border-right: 1px var(--privilege-color)solid;
	position: absolute;
	top: 0;
	right: 0;
	width: 30%;
	height: 100%;
}
#privilege .p-card:nth-child(even) .p-card-header:before {
	transform: scale(-1, 1);
	right:auto;
	left: 0;
}

.p-card-attention {
	font-size: var(--section-font-size-p);
	line-height: 1.6;
	font-weight: 500;
	padding: 0 calc(var(--section-padding) * 2) 0;
	border: 1px solid #ddd;
	margin-top:calc(var(--section-padding) * 2);
}
.p-card-attention dt {
	cursor: pointer;
	padding: 1rem;
	text-align: center;
	position: relative;
	font-weight: 700;
  
}
.p-card-attention dt::before {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 14px;
  height: 2px;
  background-color: currentColor;
  transform: translateY(-50%);
  border-radius: 2px;
}

.p-card-attention dt::after {
  content: '';
  position: absolute;
  right: 6px;
  top: 50%;
  width: 2px;
  height: 14px;
  background-color: currentColor;
  border-radius: 2px;
  transform: translateY(-50%) rotate(0deg);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.p-card-attention.is-open dt::after {
  transform: translateY(-50%) rotate(90deg);
  opacity: 0;
}

.p-card-attention dd {
  height: 0;
  opacity: 0;
  overflow: hidden;
  transition: height 0.3s ease-out, opacity 0.3s ease-out;

}

.p-card-attention.is-open dd {
  opacity: 1;
	padding: 0 0 calc(var(--section-padding) * 2) ;
}

#privilege .p-card-attention ul.asterisk {
	font-size: calc(var(--section-font-size-p) * 0.9);
	font-weight: 500;
	padding:calc(var(--section-padding) * 0.5) 0 calc(var(--section-padding) * 1);
}

#privilege .p-card-attention dd .c-btn-text {
  display: inline-block;
}


@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(even) figure {
  justify-content: unset;
}
	#privilege .p-card:nth-child(even) .p-card-header:before {
	  transform: unset;
	  right: 0;
	  left: auto;
	}

}

@media screen and (min-width: 768px) {
	*:has(.p-card-attention.is-open) {
	z-index: 100;
	/* もし親要素に position 指定がなければ relative を付与して z-index を有効化する */
	/* ※既存のレイアウト（absolute等）を壊さないよう、初期値(static)の場合のみ適用 */
	}

	/* 直近のコンテナでpositionがstaticの場合に備えた安全策 */
	*:has(> .p-card-attention.is-open) {
	position: relative; 
	}
  /* 1. 親要素を基準点に設定 */
  .p-card-attention {
    position: relative;
        width: 100%;
        z-index: 1;
  }
.p-card-attention.is-open {
    z-index: 100; 
  }
  /* 2. ポップアップとしてのスタイリング */
  .p-card-attention dd {
    /* 絶対配置にして他要素の上に重ねる */
    position: absolute;
    top: 100%; /* dt要素のすぐ下から開始 */
    left: 0;
    z-index: 100;
    
    /* ポップアップの見た目（背景、枠、影、余白） */
    width: 100%; /* 親と同じ幅。任意のピクセルに変更可能 */
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    padding: 16px;
    box-sizing: border-box;

    /* 3. JSのインラインスタイル（高さ制御）を強制的に打ち消す */
    /* !important を使って、JSが付与する height: 0px 等を無視し、中身に応じた高さにする */
    height: auto !important; 
    
    /* 開閉は「高さ」ではなく「透明度」と「クリックの可否」だけで制御する */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px); /* 少し上からフワッと降りてくるアニメーション用 */
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
  }

  /* 4. PCで開いた状態（is-open）のとき */
  .p-card-attention.is-open dd {
    opacity: 1;
    visibility: visible;
    transform: translateY(8px); /* dt要素との隙間を8px空けて配置 */
    padding:calc(var(--section-padding) * 1.5);
  }
}

.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);
}
.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 figure picture img{
	height: 100%;
	object-position: bottom;
}

.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,
.p-card-header small{
	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: 100%;
  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);
}

/*---------------
#official {}
---------------*/

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

/* テキストコンテンツ：下部中央 */
#official .h-hero__content {
	padding: calc(var(--section-padding) * 0) calc(var(--section-padding) * 2) calc(var(--section-padding) * 0);
	text-align: center;
	color: var(--color-black);
	font-family: var(--font-family-Zen-Mi);
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap:calc(var(--section-padding) * 1.5);
}
/*---------------
#officialhotels{}
---------------*/

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

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

#officialhotels .c-btn {
  background-color: var(--color-white);
  border: 1px solid;
  border-color: var(--color-navy);
  color: var(--color-navy);
  max-width: 70%;
    box-shadow:none;
    margin-top:calc(var(--section-padding) * 2);
}
#officialhotels  figure figcaption {
  position: absolute;
  bottom: 0;
  right: 0;
  color: #fff;
  font-size: 10px;
}

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

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

	#officialhotels .p-card-wrapper {
	  max-width: 1440px;
	}
	#officialhotels .p-card {
	width: calc(100% / 3 - calc(var(--section-padding) * 1.4));
	}

}