:root {
  /* 最大550pxでのサイズを基準に */
  --max-container: 550px;
  --font-root: clamp(0px, calc(16 / 375 * 100vw), calc(var(--max-container) * (16 / 375)));

  --font-xxl: clamp(0px, calc(56 / 375 * 100vw), calc(var(--max-container) * (56 / 375)));
  --font-xl: clamp(0px, calc(32 / 375 * 100vw), calc(var(--max-container) * (32 / 375)));
  --font-ll: clamp(0px, calc(24 / 375 * 100vw), calc(var(--max-container) * (24 / 375)));
  --font-l: clamp(0px, calc(20 / 375 * 100vw), calc(var(--max-container) * (20 / 375)));
  --font-m: clamp(0px, calc(16 / 375 * 100vw), calc(var(--max-container) * (16 / 375)));
  --font-s: clamp(0px, calc(14 / 375 * 100vw), calc(var(--max-container) * (14/ 375)));
  --font-xs: clamp(0px, calc(10 / 375 * 100vw), calc(var(--max-container) * (10 / 375)));

  --color-base: #1a1a1b;
  --color-primary: #ff1b7b;
  --color-boundary:#333333;
  --color-main: #eeeeee;
  --color-narration: #cccccc;     /* 語り文用の落ち着いた明るさ */
  --color-subtle: #888888;
  --color-silent: #555555;
  --color-alert: #ff3b30;

  --font-hero: "Anton", sans-serif;
  --font-sub: "M PLUS 1p", sans-serif;
  --font-copy: "Noto Sans JP", sans-serif;
  --font-title: "Montserrat", sans-serif;
  --font-main: "Noto Sans JP", sans-serif;
  --font-meta: "Noto Sans JP", sans-serif;
  --font-calendar: "Montserrat", sans-serif;

  --space-description-inline: 1.5rem;
  --space-content: 2rem;      /* コンテンツ間の余白 */
  --space-section: 4rem;      /* セクション間の余白 */
  --space-heading: 1.5rem;    /* 見出しと本文の余白 */
  --space-button: 1rem;       /* ボタン周辺の余白 */
  --space-paragraph: 1.2rem;  /* 段落間の余白 */
}

html{
 font-size: var(--font-root);
 scrollbar-gutter: stable; /* メニュー表示時のスクロールバー分の表示ズレ対策 */
}

body {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background-color: var(--color-base);
  color: var(--color-main);
  font-family: var(--font-main);
  font-size: var(--font-m);
  letter-spacing: 0.05em;
  line-height: 1.8em;
}


body.loading {
  opacity: 0;
  pointer-events: none;
}

body.loaded {
  opacity: 1;
  transition: opacity 0.5s ease-in;
  pointer-events: auto;
}

.main-container {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  max-width: var(--max-container);
  background-color: transparent;
  padding:0;
  margin: 0 auto;
}

/* セクション */

section {
  margin-block: 4.4rem;
  padding-bottom: 2.4rem;
  scroll-margin-top: 4rem; /* ヘッダー分の高さなど */
}

.section-title {
 font-family: var(--font-title);
 font-size: var(--font-ll);
 color: var(--color-main);
 font-optical-sizing: auto;
 font-weight: 700;
 font-style: normal;
 text-align: center;
 margin:0;
}

.section-title-sub {
 display: block;
 margin-top: 0.5em; /* ここを小さくして余白を狭くする。0にすれば隙間ゼロ */
 font-family: var(--font-sub);
 font-size: var(--font-xs);
 color: var(--color-subtle);
}

.subsection-title {
 font-family: var(--font-title);
 font-size: var(--font-l);
 color: var(--color-main);
 font-optical-sizing: auto;
 font-weight: 600;
 font-style: normal;
 text-align: center;
 margin:0;
 padding-top: 2rem;
 padding-bottom: 1rem;
}

.content-title {
 font-family: var(--font-title);
 font-size: var(--font-l);
 color: var(--color-main);
 font-optical-sizing: auto;
 font-weight: 600;
 font-style: normal;
 text-align: center;
 margin: 0;
}

.content-main {
  font-size: var(--font-m);
  font-family: var(--font-main);
  color: var(--color-subtle);
  font-weight: 400;
  line-height: 1.8em;
  letter-spacing: 0.05em;
  margin: 0;
}

.content-description {
  font-size: var(--font-s);
  font-family: var(--font-main);
  color: var(--color-subtle);
  font-weight: 400;
  line-height: 1.8em;
  letter-spacing: 0.05em;
}

.narration-main {
  font-size: var(--font-m);
  font-family: var(--font-main);
  color: var(--color-narration);
  font-weight: 400;
  line-height: 2em;
  letter-spacing: 0.05em;
  margin: 0;
  margin-inline: 1rem;
}

.mess-main {
 font-family: var(--font-title);
 font-size: var(--font-l);
 color: var(--color-main);
 font-optical-sizing: auto;
 font-weight: 600;
 font-style: normal;
 text-align: center;
 margin: 0;
}


/* ブロック */
.title-block {
  display: flex;
  position: relative;
  background-color: inherit;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem; /* 等間隔の余白 */
  margin-inline: 1.2rem;
  margin-block: 2.4rem;
}

.center-block {
  display: flex;
  position: relative;
  background-color: inherit;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem; /* 等間隔の余白 */
  margin-block: 0;
}

.flex-block {
  display: flex;
  position: relative;
  background-color: inherit;
  align-items: center;
  gap: 1rem; /* 等間隔の余白 */
  margin-block: 0;
}

.text-block {
  position: relative;
  margin-inline: 1.2rem;
  margin-bottom: 2.4rem;
}

.mess-block {
    width: 90%;
    margin-block: 3.2rem;
    margin-inline: auto;
    text-align: left;
    box-sizing: border-box;
}

.button-block {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-block:1.6rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 共通ボタン */

.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font-main);
  text-decoration: none;
  border: none;
  cursor: pointer;
  box-sizing: border-box;
  text-align: center;
  position: relative;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-main);
  font-size: var(--font-s);
  font-weight: bold;
  min-width: 6rem;
  min-height: 2.4rem;
  padding: 0.2em 2.4em; /* 詩的な余白を保ちつつ、整列しやすい比率 */
  border: none;
}

.btn-secondary{
  background: transparent;
  color: var(--color-main);
  font-size: var(--font-s);
  font-weight: bold;
  min-width: 6rem;
  min-height: 2.4rem;
  padding: 0.2em 2.4em; /* 詩的な余白を保ちつつ、整列しやすい比率 */
  border: 0.024em solid var(--color-main);
}

.btn-tertiary {
  position: relative;
  background: transparent;
  color: var(--color-main);
  font-size: var(--font-s);
  font-weight: bold;
  min-width: 6rem;
  min-height: 2.4rem;
  padding: 0.2em 1em 0.2em 1em;
  border: none;
  text-decoration: none;
}

/* 下線＋矢印 */
.btn-tertiary::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.4em;
  width: 100%;
  height: 1px;
  background-color: var(--color-main);
}

/* 矢印の先端 */
.btn-tertiary::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0.4em;
  width: 0.5em;
  height: 1px;
  background-color: var(--color-main);
  transform: rotate(45deg);
  transform-origin: right bottom;
}

.btn-silent {
  background: var(--color-silent);
  color: var(--color-base);
  display: inline-flex;
  position: relative;
  justify-content: center;
  align-items: center;
  font-family: var(--font-main);
  font-size: var(--font-xs); 
  font-weight: normal;
  padding: 0.02em 0.4em;
  text-decoration: none;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
  text-align: center;
}

.btn-wide {
  width: 60%; /* 好きな幅に */
}

.btn:hover {
  filter: brightness(1.2); /* ← 1以上で明るくなる */
}

.btn:active {
  transform: scale(0.98);
  filter: brightness(0.8); /* ← 1以上で明るくなる */
}

/* Form 内の送信ボタン無効化 */
form button[type="submit"]:disabled {
  cursor: not-allowed;
  opacity: 0.2;
}


/* ここから下、アスペクト比維持と最大幅追従のための修正 */
iframe,
.room_image {
  width: 100%;
  /* メインコンテナ幅基準で最大サイズ */
  max-width: var(--max-container);
  display: block;
  margin-left: auto;
  margin-right: auto;
}

iframe {
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}

.room_image {
  aspect-ratio: 4 / 3;
  /* 必要に応じて比率変更 */
  height: auto;
  object-fit: cover;
  filter: sepia(0.2) contrast(1.1) brightness(0.95) saturate(0.8);
}

/* 部屋タイトル */
.image-wrapper {
  position: relative;
  display: inline-block;
}

.overlay-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
  text-align: center;
}

.room-title {
 font-family: var(--font-title);
 font-size: var(--font-l);
 color: var(--color-main);
 font-optical-sizing: auto;
 font-weight: 600;
 font-style: normal;
 text-align: center;
 margin: 0;
 white-space: nowrap;
text-shadow:
  0 0 0.1rem rgba(0, 0, 0, 0.9),  /* 輪郭の芯（くっきり） */
  0 0 0.3rem rgba(0, 0, 0, 0.8),   /* 中間の広がり */
  0 0 0.6rem rgba(0, 0, 0, 0.6),   /* 外側の余韻① */
  0 0 0.9rem rgba(0, 0, 0, 0.4);   /* 外側の余韻② */
}

/* ローディングスピナー */
.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.6rem;
  aspect-ratio: 1/1;
  border: 0.25em solid var(--color-main);
  border-top: 0.25em solid var(--color-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  transform: translate(-50%, -50%);
  z-index: 9999;
  background: transparent;
}

.loader.hidden {
  display: none !important;
}

/* Safari対応キーフレーム */
@keyframes spin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
  }
}

.scroll-up {
  opacity: 0; /* 初期状態は透明 */
  transition: opacity 1.5s ease; /* アニメーションの設定 */
}
.scroll-up.visible {
  opacity: 1; /* 表示 */
}

/* JavaScriptが無効化されている場合に、.scroll-upを付けた要素が非表示になってしまうのを防ぐ*/

/* 共通ヘッダー、フッター*/
#site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 4rem;
  background: var(--color-base);
  background-color: var(--color-base);
  color: var(--color-main);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 640ms cubic-bezier(.2,.8,.2,1);
  will-change: transform;
  z-index: 999;
}


/* 非表示状態 */
#site-header.hide {
  transform: translateY(-100%);
}

#site-footer{
  width:100%;
  height: 12rem;
  background-color: var(--color-boundary);
}

footer {
  width: 100%;
  background: var(--color-base);
  /* 余白などは要件に応じて */
  display: flex;
  justify-content: center;
  /* 中央寄せ */
  align-items: center;
  padding: 0;
  /* ラッパーに任せる場合 */
  border: none;
}

.header-container{
  width: 100%;
/*max-width: var(--max-container); */
  aspect-ratio: 10 / 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0 auto; /* ← 左右中央寄せ */
}

.footer-container {
  width: 100%;
  max-width: var(--max-container);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin:0 auto;
  }

nav{
  width:100%;
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  width: 100%;
  position: relative;
}

.nav-container .checkbox {
  opacity: 0;
}

.nav-container .hamburger-lines {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 60%;
  pointer-events: none; /* チェックボックスにイベントが届くように */
}

.nav-container .checkbox,
.nav-container .hamburger-lines {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  aspect-ratio: 1.3 / 1;
  width: 1.4rem; /* ビューポートに応じて伸縮 */
  height: auto;
  cursor: pointer;
  z-index: 1000;
  margin-right: 1.2rem;
}

.nav-container .hamburger-lines .line {
  width: 100%;
  height: 0.096rem; /* 線の太さを比率指定 */
  background: var(--color-main);
  transition: transform 0.2s ease-in-out;
}

.nav-container .hamburger-lines .line1 {
  transform-origin: 0% 0%;
  transition: transform 0.2s ease-in-out;
}

.nav-container .hamburger-lines .line2 {
  transition: transform 0.2s ease-in-out;
}

.nav-container .hamburger-lines .line3 {
  transform-origin: 0% 100%;
  transition: transform 0.2s ease-in-out;
}

/*--- menu-slider: フェードインモーダル風に変更 ---*/
.menu-slider {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--color-base);
  transform: translateX(-100%);
  transition: transform 0.3s ease-out;
  z-index: 990;
  overflow-y: auto;
  padding-top: var(--header-height, 60px); /* ヘッダーの高さ分余白 */
}

.menu-slider.active {
  transform: translateX(0);
}

/* メニュー項目はヘッダーの下から始まる */
.menu-items {
  width: 80%;
  margin: 0 auto;
  margin-bottom: 4rem;
  padding: 2em 1em 1em;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 左寄せ */
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

/* メニュー開いたとき：フェードイン */
.nav-container input[type="checkbox"]:checked ~ .menu-slider .menu-items {
  opacity: 1;
  pointer-events: auto;
}

.menu-items li {
  list-style: none;
  margin-bottom: 0.5rem;
  z-index: 800;
}

.menu-items a {
  text-decoration: none;
  font-family: var(--font-title);
  color: var(--color-main);
  font-weight: 700;
  font-size: var(--font-l);
  padding: 0.7rem 0;
}

.menu-reservation {
  color: var(--color-primary) !important;
}

.menu-item-sub {
  margin-left: 0.8em;
  font-family: var(--font-sub);
  font-size: var(--font-xs);
  color: var(--color-subtle);
}

.menu-items a:hover {
  transform: scaleX(1);
}

/* メニュー内リンク左寄せ */
.menu-items .menu-item {
  width: 100%;
  display: flex;
  justify-content: flex-start;
}

.menu-items .menu-item a {
  text-align: left;
}



nav ul {
  list-style: none;
  padding: 0;
  /* margin-top: 10px; */
  margin-top: 2%;
  display: flex;
  justify-content: center;
}

.header-logo {
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* ← 左寄せ */
  margin-left: 1.2rem;
  z-index: 1000;
  transition: opacity 0.4s ease;
  transition-delay: 0s, 0.2s; /* transform 0秒後、opacity 0.2秒後 → 遅れて表示 */
  opacity: 1;
}

/* メニューが開いたとき（＝チェックが入ったとき） */
.nav-container input[type="checkbox"]:checked ~ .header-logo {
  opacity: 0;
  transition: opacity 0.4s ease;
  transition-delay: 0.2s, 0s; /* transform 0.2秒後、opacity 即時 → 先にフェードアウト */
}

/* メニュー開いているとき、ロゴを左にスライドアウト */
.nav-container input[type="checkbox"]:checked ~ .header-logo {
  transform: translateX(-100vw);
  opacity: 0;
}

.logo-link{
  display: flex;         /* 親のflexに合わせる */
  align-items: center;   /* 垂直方向中央揃え */
  height: 100%;          /* 親の高さに合わせる */
}

.header-logo img {
  height: 50%;
  width: auto;
  object-fit: contain;
}

.nav-container input[type="checkbox"]:checked ~ .menu-items {
  transform: translateX(0);
}

.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
  transform: rotate(45deg);
}

.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
  transform: scaleY(0);
}

.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
  transform: rotate(-45deg);
}

/* チェック時に表示 */
.checkbox:checked ~ .menu-slider {
  opacity: 1;
  visibility: visible;
}
.checkbox:checked ~ .menu-slider .menu-items {
  opacity: 1;
}

.sns-icon-group {
  text-align: center;
  width:100%;
}

.sns-label {
  font-size: var(--font-s);
  color: var(--color-subtle);
  margin-bottom: 0.5rem;
}

.sns-icon {
  display: flex;
  justify-content: center; /* 水平方向に中央寄せ */
  align-items: center;      /* 垂直方向に中央寄せ（高さに応じて） */
  gap: 3rem;                 /* アイコンの間隔。お好みで調整OK！ */
  margin-top: 2.4em;
  padding: 1rem 0;           /* 上下に余白。必要に応じて */
  list-style: none;
}

.footer-items, .sns-icon-group, .footer-container {
  margin: 0;
  padding: 0;
}

.sns-icon a {
  margin: 0;
  padding: 0;
}

.sns-icon i {
  display: inline-block; /* 横並びにする */
  margin: 0 0;
  font-size: var(--font-l);
  color: var(--color-main);
}

.copyright {
  margin-top: 1rem; /* SNSとの距離感調整 */
  margin-bottom: 3rem;
  font-family: var(--font-meta);
  font-size: var(--font-s);
  color: var(--color-subtle);
}