@charset "UTF-8";
/* ==========================================================================
   共通スタイル（theme_yutaka）
   出典: Figma 右レーン確定デザイン（context.md §10-0）・値は全て 2026-09-11 全ノードJSON実測
   方針: モバイルファースト（基底=SP・PCは @media (min-width: 769px)）。片媒体の値は必ず @media 内。
   ========================================================================== */
/* --- 館パレット（CSS カスタムプロパティ。body.is-site-<key> で切替） --- */
body.is-site-newyutaka {
  --color-main: #c71801;
  --color-strong: #a31300;
  --color-bg-light: #fdebe7;
  --color-tint: #f7c2b8;
  --color-band: #fdebe7;
  --color-reserve-btn: #a31300;
}

body.is-site-sunplus {
  --color-main: #9c5466;
  --color-strong: #9c5466;
  --color-bg-light: #f5eded;
  --color-tint: #cca11f;
  --color-band: #f7f3f1;
  --color-reserve-btn: #cca11f;
}

body.is-site-wing {
  --color-main: #123a63;
  --color-strong: #167cc1;
  --color-bg-light: #e9f2fa;
  --color-tint: #f69233;
  --color-band: #e9f2fa;
  --color-reserve-btn: #f69233;
}

/* 館クラスが無い場合（group 等・未確定）の暫定値＝ニューユタカと同じ。グループTOP確定時に専用値へ */
:root {
  /* canvas 縮尺（🔒 Firefox 対策・NEXT #30）
     Firefox は calc() 内で 長さ÷長さ（100vw / 390px）を書くと transform 宣言ごと無効化する
     （computed が none ＝ scale も translateX も失われる）。そのため CSS で縮尺を計算せず、
     JS（initCanvasScale）が「単位なしの数値」をこの変数に入れる。既定値 1 ＝ JS 前でも等倍で崩れない。 */
  --canvas-scale-sp: 1;
  --canvas-scale-pc: 1;
  --color-main: #c71801;
  --color-strong: #a31300;
  --color-band: #fdebe7;
  --color-bg-light: #fdebe7;
  --color-tint: #f7c2b8;
  --color-reserve-btn: #a31300;
}

/* --- ベース --- */
html {
  font-size: 100%;
}

body {
  color: #525252;
  font-family: "Noto Sans", "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0;
  background: #ffffff;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
}

/* ドロワー展開中は後ろのページをスクロールさせない（JS が付与） */
html.is-drawer-open {
  overflow: hidden;
}

/* --- レイアウト --- */
.l-main {
  display: block;
  overflow-x: clip; /* 装飾のはみ出しで横スクロールを出さない（hidden だと sticky が死ぬため clip） */
}

.l-inner {
  width: min(100% - 20px, 880px);
  margin-inline: auto;
}

/* PC/SP で片方だけ出す要素（改行・画像の出し分け用） */
.u-pc {
  display: none;
}

.u-sp {
  display: inline;
}

/* PC だけ明示改行する <br>（Figma PC に \n があり SP は自然折返しの文言） */
.u-br-pc {
  display: none;
}

@media (min-width: 769px) {
  .u-pc {
    display: inline;
  }
  .u-sp {
    display: none;
  }
  .u-br-pc {
    display: inline;
  }
}
/* ==========================================================================
   c-btn-reserve  予約ボタン（ヘッダー）
   実測 PC 541:2869: 166×40 r80 塗り strong／アイコン24 (1296,24) + gap4 + 文字 Noto Sans 700 16 lh21.8 白＝中身92 中央
   実測 SP 541:1888: 114×33 角丸なし／中身 92×24 (gap4) 中央
   ホバー: 指示書「全てのアニメーションは同じでOK・ふわっと動く」＝不透明度と僅かな浮き
   ========================================================================== */
.c-btn-reserve {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 114px;
  height: 33px;
  /* 🔴 2026-09-18 是正（ユーザー指摘・サンプラスの色がデザインと違う）:
     Figma の予約ボタン地色は PC/SP とも 3館すべて `tint` と一致する ＝
       ニュー  SP 541:1888 / PC 541:2869 → #a31300（tint=#f7c2b8 ではなく strong と同値＝偶然）
       サンプラス SP 541:1429 / PC 541:2341 → #cca11f（tint）※strong=#9c5466 で不一致だった
       ウィング  SP 541:973  / PC 541:458  → #f69233（tint）※strong=#167cc1 で不一致だった
     ⚠️ニューだけ strong と一致していたため当方が strong を選び、他2館で色が化けていた
     （9/15 ドロワー色と同型＝Figmaに値があるものを当方のトークン判断で置き換えた）。
     ∴ 館別に直値を当てる（ニューは strong と同値だがデザイン値として明示） */
  background: var(--color-reserve-btn);
  color: #ffffff;
  font-family: "Noto Sans", "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.375;
  white-space: nowrap;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.c-btn-reserve__icon {
  display: block;
  width: 24px;
  height: 24px;
}

.c-btn-reserve:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

@media (min-width: 769px) {
  .c-btn-reserve {
    width: 166px;
    height: 40px;
    border-radius: 80px;
  }
}
/* ==========================================================================
   c-btn-line  枠線ボタン（rooms 541:2702「客室一覧をみる」213.7×37 r46.1 枠1px 内側・pad 4px 39px・文字 Noto Sans 500 16 lh27.2 + gap17 + 矢印4.7×8.6）
   色は文脈で変える（rooms=#525252 / フッター=白）。ホバー＝塗りと文字を反転（ふわっと）
   ========================================================================== */
.c-btn-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 17px;
  height: 37px;
  padding: 4px 39px;
  border: 1px solid currentColor;
  border-radius: 46.1px;
  color: #525252;
  font-family: "Noto Sans", "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6875;
  white-space: nowrap;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.c-btn-line__arrow {
  width: 4.7px;
  height: 8.6px;
  filter: brightness(0) saturate(100%) invert(32%); /* 白矢印SVG → #525252 相当 */
}

.c-btn-line:hover {
  background: #525252;
  color: #ffffff;
}

/* 文字を Zen Kaku Gothic New にする変種（access 541:2587「送迎スケジュールをみる」） */
.c-btn-line--ui {
  font-family: "Zen Kaku Gothic New", sans-serif;
}

/* 白地の変種（meeting 541:2660: 261.7×37・白地） */
.c-btn-line--white {
  background: #ffffff;
}

/* 高さ35の変種（service 541:2669: 227.7×35・白地。Figma の内側1px枠は外形に含まれる＝padding を 1px 詰めて外形を合わせる） */
.c-btn-line--h35 {
  height: 35px;
  padding: 4px 38px;
  background: #ffffff;
}

.c-btn-line:hover .c-btn-line__arrow {
  filter: none;
}

/* 館色の線ボタン（ウィング 541:313 ほか: 枠・文字・矢印＝#123a63(main)） */
.c-btn-line--main {
  color: var(--color-main);
}

.c-btn-line--main:hover {
  background: var(--color-main);
  color: #ffffff;
}

/* inline SVG の矢印（currentColor。img 版の filter を使わない） */
.c-btn-line__arrow--svg {
  display: block;
  width: 4.7px;
  height: 8.6px;
  filter: none;
}

/* 塗りボタン（サンプラス 541:2193 ほか: 高さ35・padding 4 39・gap17・r46.11・館色地に白文字＋白矢印 4.7×8.6） */
.c-btn-fill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 17px;
  height: 35px;
  padding: 4px 39px;
  border-radius: 46.1px;
  background: var(--color-main);
  color: #ffffff;
  font-family: "Noto Sans", "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6875;
  white-space: nowrap;
  transition: opacity 0.3s ease;
}

.c-btn-fill__arrow {
  width: 4.7px;
  height: 8.6px;
}

.c-btn-fill:hover {
  opacity: 0.8;
}

/* 「＋」飾り（サンプラスの見出し左: Next Line Group 42.6 角・線2px #d9d9d9。横線 y22.7 / 縦線 x22 ＝ 中心からわずかにずれた実測値） */
.c-plus {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 42.6px;
  height: 42.6px;
}

.c-plus::before,
.c-plus::after {
  position: absolute;
  background: #d9d9d9;
  content: "";
}

.c-plus::before {
  top: 21.7px;
  left: 0;
  width: 100%;
  height: 2px;
}

.c-plus::after {
  top: 0;
  left: 21px;
  width: 2px;
  height: 100%;
}

/* 小（27 角・横線 y14.4 / 縦線 x13.9: pickup 541:1345・ROOMS 541:1273・service 541:1222） */
.c-plus--s {
  width: 27px;
  height: 27px;
}

.c-plus--s::before {
  top: 13.4px;
}

.c-plus--s::after {
  left: 12.9px;
}

/* ==========================================================================
   c-header  白バー（PC 1440×74 / SP 390×63）
   実測 PC 541:2827: ハンバーガー(45,30)28×20 線2px 間隔7／ロゴ 館別／Language y29／予約(1259,16)
   実測 SP 541:1847: 行 y0.7 h35（ハンバーガー(15,8.2)・ロゴ(59,0.7)・カレンダー(214,6.2)・予約(262,1.7)）
      アナウンスバー(0,47)390×49 は c-announce（下）。SP の白い帯は FV 上端 y63 まで（FV フレーム y=63）
   ========================================================================== */
.c-header {
  position: relative;
  z-index: 100;
  background: #ffffff;
  color: var(--color-main);
}

/* 2026-09-21 flex 化（先方依頼 9/19）: バーガー／ロゴ／言語／予約 を座標指定から横並びへ（3館共通）。
   SP＝4つとも上下中央（実測: バーガー21.5・ロゴ14・言語19.5・予約15 は、いずれも (63−高さ)/2）。
        左から バーガー(x15) → ロゴ(16あけて x59)、右から 予約(右14) ← 言語(13あけて)。言語は右寄せ（ロゴ幅が館で違っても x214 固定）
   PC＝縦位置が要素ごとに違う（Figma 実測）ので上詰め＋上余白。ロゴ前後の間隔は館ごとに違う＝変数で持つ
   言語メニュー（.c-header__lang-menu）は開閉式で absolute のまま＝並びに影響しない */
.c-header__bar {
  --hdr-logo-mt: 13px; /* PC ロゴの上余白（ニュー y13／サンプラス y8／ウィング y14） */
  --hdr-logo-ml: 35px; /* PC バーガー右端73 → ロゴ（ニュー108／サンプラス100／ウィング93） */
  --hdr-lang-ml: 26px; /* PC ロゴ右端 → 言語（ニュー240→266／サンプラス181.3→195／ウィング197→217） */
  position: relative;
  display: flex;
  align-items: center;
  height: 63px; /* 実測: SP FV 上端 y63 ＝ 白帯の高さ */
  padding: 0 14px 0 15px;
}

/* ハンバーガー（3館同値: 28×20・線2px・間隔7・色 main） */
.c-header__burger {
  display: flex;
  flex: none;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 20px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.c-header__burger-line {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-main);
}

/* 開いている間は三本線を出さない（閉じる操作はドロワーの×に一本化） */
.c-header__burger[aria-expanded=true] {
  visibility: hidden;
}

/* ロゴ（SVG インライン・currentColor＝館色）。SP: (59,0.7) 88×35（ニュー）／48.7×34.8（サンプラス）／73×36.4（ウィング） */
.c-header__logo {
  display: block;
  flex: 0 1 auto; /* 320px 幅では元から言語ボタンと 3px 重なる設計＝ロゴの箱だけ縮め、横にはみ出させない */
  min-width: 0;
  margin-left: 16px; /* バーガー右端43 → 59 */
  line-height: 0;
}

.c-header__logo-pc {
  display: none;
}

.c-header__logo-sp {
  display: block;
}

.c-header__logo-svg {
  display: block;
  width: 88px; /* 実測 ニューSP 541:1861 88×35.02（書き出しSVGは整数丸めのため幅・高さとも明示） */
  height: 35px;
}

.c-header--sunplus .c-header__logo-svg {
  width: 48.7px; /* 実測 541:1399 48.7×34.8 */
  height: 34.8px;
}

.c-header--wing .c-header__logo-svg {
  width: 73px; /* 実測 541:945 73×36.4 */
  height: 36.4px;
  color: var(--color-strong); /* ロゴ全パス #167cc1（541:464/945 実測）＝main ではなく strong */
}

/* ウィング SP のハンバーガー線は #333333（541:942〜944 実測・館色ではない） */
.c-header--wing .c-header__burger-bar {
  background: #333333;
}

/* Language（SP: カレンダー24 + ▼8 のみ・文字なし。(214,6.2) 35×24） */
.c-header__lang {
  display: flex;
  flex: none;
  margin-left: auto; /* 右寄せ（実測 x214〜249） */
  align-items: center;
  gap: 3px; /* 実測: アイコン右端238 → ▼ 241 */
  height: 24px;
  color: var(--color-main);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4375;
}

/* 2026-09-21: a → button にしたための初期化（見た目・箱は従来どおり） */
button.c-header__lang {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

/* 言語メニュー（2026-09-21 先方指示: 参考＝現行 hotelyutaka.com 右上・1行40px の縦並び／背景は白）。
   位置は common.js initLangMenu がボタンの真下に合わせる（館ごとにボタン位置が違うため CSS に座標を持たない）。
   ⚠️ Figma に無い部品＝枠線・文字サイズ・ホバー色は当方の仮値（既存トークンのみ使用） */
.c-header__lang-menu {
  position: absolute;
  z-index: 10;
  min-width: 148px;
  margin: 0;
  padding: 0;
  border: 1px solid #d9d9d9;
  background: #ffffff;
  list-style: none;
}

.c-header__lang-menu[hidden] {
  display: none;
}

.c-header__lang-link {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  color: #525252;
  font-family: "Noto Sans", "Noto Sans JP", sans-serif; /* 5言語を同じ太さで見せるため本文書体（Noto Sans / Noto Sans JP）。$font-ui は英字・ハングルを持たず行ごとに太さが変わった */
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 0.3s ease;
}

.c-header__lang-link:hover,
.c-header__lang-link:focus-visible {
  background: var(--color-bg-light);
}

.c-header__lang-link[aria-current=true] {
  font-weight: 700;
}

.c-header__lang-icon {
  display: block;
  width: 24px;
  height: 24px;
}

.c-header__lang-text {
  display: none;
}

.c-header__lang-caret {
  display: block;
  width: 8px;
  height: 8px;
}

/* 予約ボタン SP (262,1.7) 114w → 右端 376＝右 14（390 未満の端末で右にはみ出さないよう right 基準） */
.c-header__reserve {
  flex: none;
  margin-left: 13px; /* 言語右端249 → 262 */
}

@media (min-width: 769px) {
  .c-header__bar {
    align-items: flex-start;
    width: min(100%, 1440px);
    height: 74px;
    margin-inline: auto;
    padding: 0 15px 0 45px; /* 左＝バーガー x45／右＝1440 − 予約右端1425 */
  }
  .c-header__burger {
    margin-top: 30px;
  }
  /* ロゴ PC（館別実測＝変数） */
  .c-header__logo {
    flex: none;
    margin: var(--hdr-logo-mt) 0 0 var(--hdr-logo-ml);
  }
  .c-header__logo-pc {
    display: block;
  }
  .c-header__logo-sp {
    display: none;
  }
  .c-header__logo-svg {
    width: 132px; /* 実測 541:2838 132×52.52 */
    height: 52.5px;
  }
  .c-header--sunplus .c-header__bar {
    --hdr-logo-mt: 8px;
    --hdr-logo-ml: 27px;
    --hdr-lang-ml: 13.7px;
  }
  .c-header--sunplus .c-header__logo-svg {
    width: 81.3px; /* 実測 541:2347 81.3×58.2 */
    height: 58.2px;
  }
  .c-header--wing .c-header__bar {
    --hdr-logo-mt: 14px;
    --hdr-logo-ml: 20px;
    --hdr-lang-ml: 20px;
  }
  .c-header--wing .c-header__logo-svg {
    width: 104px; /* 実測 541:464 104×51.9 */
    height: 51.9px;
  }
  /* Language PC: y29 h25・アイコン24 (x) + gap4.2 + 文字69 + gap2.8 + ▼8 ＝ 108 */
  .c-header__lang {
    margin: 29px 0 0 var(--hdr-lang-ml);
    gap: 4.2px;
    height: 25px;
  }
  .c-header__lang-icon {
    margin-top: 1px; /* 実測: アイコン y30（グループ y29） */
  }
  .c-header__lang-text {
    display: block;
  }
  .c-header__lang-caret {
    margin-left: -1.4px; /* 実測: 文字右端363.2 → ▼366 ＝ 2.8（gap4.2 との差） */
  }
  .c-header__reserve {
    margin: 16px 0 0 auto; /* 右寄せ（右 15＝バーの右余白） */
  }
}
/* ==========================================================================
   ドロワー（ハンバーガーメニュー）
   実測 378:2009: 1440×1089 白地（2026-09-14・全ノードJSON）。固定構図のため footer と同じ canvas scale 方式。
   ⚠️ Figma 名は「(WING)」だがデザインは1枚＝3館共通。色は館トークン（main/strong/tint）で出す。
   ========================================================================== */
/* ⚠️ overflow-x は hidden（縦スクロールバー 15px 分だけ内容幅が減り、1440 キャンバスが
   はみ出して横スクロールが出る＝clientW 1425 < canvas 1440 を実測。描画は中央のままクリップする） */
.c-header__drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  overflow-x: hidden;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.4);
}

.c-header__drawer[hidden] {
  display: none;
}

/* 🔒 構造の原則（2026-09-14）:
   ① 基底＝SP の縦積み（モバイルファースト・規約 §2）。SPデザインは未提供のため従来の簡易パネルを維持する
   ② 1440 キャンバスの絶対配置は **全て** `min-width: 769px` の中に置く
   ⚠️ 逆（基底に絶対配置を置き SP で打ち消す）にすると、後勝ちで SP 側が負ける。
      実際に一度そう書いて SP で nav 32px のまま・バナー表示・drawer が横 1407px にスクロールした（実測）。 */
.c-header__drawer-canvas {
  display: flex;
  max-width: 640px;
  flex-direction: column;
  gap: 16px;
  margin-inline: auto;
  padding: 32px 24px;
  position: relative;
  background: #ffffff;
  color: #525252;
}

.c-header__drawer-nav {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.c-header__drawer-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: opacity 0.3s ease;
}

.c-header__drawer-item:hover {
  opacity: 0.7;
}

.c-header__drawer-item-text {
  color: #123a63;
  font-family: "Noto Sans", "Noto Sans JP", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.3625;
  white-space: nowrap;
}

/* 丸矢印 28×28（円=strong・シェブロン白。icon-circle-arrow-fill は円が currentColor） */
.c-header__drawer-item-arrow {
  display: block;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  color: #167cc1; /* 378:2116 実測 #167cc1・館で変えない */
}

.c-header__drawer-reserve {
  display: flex;
  width: 100%;
  height: 48px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: 80px;
  background: #f69233; /* 378:2106 実測 #f69233・館で変えない */
  transition: opacity 0.3s ease;
}

.c-header__drawer-reserve:hover {
  opacity: 0.8;
}

.c-header__drawer-reserve-text {
  color: #ffffff;
  font-family: "Noto Sans", "Noto Sans JP", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3625;
  white-space: nowrap;
}

/* 白丸28（378:2109）＋ tint のシェブロン（378:2110: 7.1×13） */
.c-header__drawer-reserve-arrow {
  display: flex;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #ffffff;
  color: #f69233; /* 378:2110 実測 #f69233 */
}

.c-header__drawer-reserve-chev {
  display: block;
  width: 7.1px;
  height: 13px;
}

.c-header__drawer-topics {
  margin: 0;
  color: #123a63;
  font-family: "Buenard", serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.4;
}

/* SP では出さない（SPデザイン未提供＝勝手に作らない。PC 側で display を戻す）
   ⚠️ TOPICS 見出しも含める。バナーだけ隠すと「中身のない見出し」が残る（2026-09-14 実見で検出） */
.c-header__drawer-topics,
.c-header__drawer-rule,
.c-header__drawer-banner,
.c-header__drawer-logo,
.c-header__drawer-hotels {
  display: none;
}

.c-header__drawer-banner img {
  display: block;
  width: 550px;
  height: 208px;
  object-fit: cover;
}

.c-header__drawer-logo-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* 館名 13px 700 lh23.4 ＋ 下線（Heading 4 の 1px stroke・箱高33）。色は Figma 378:2040 実測 #525252 */
.c-header__drawer-hotel-name {
  margin: 0;
  padding-bottom: 9px;
  border-bottom: 1px solid #525252;
  color: #525252;
  font-family: "Noto Sans JP", "Noto Sans", sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.8;
}

/* 住所 11px 400 lh19.8（箱 y800・文字 y812 ＝ 上に12）。色は 378:2042 実測 #525252 */
.c-header__drawer-hotel-address {
  margin: 12px 0 0;
  color: #525252;
  font-family: "Noto Sans JP", "Noto Sans", sans-serif;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.8;
}

.c-header__drawer-hotel-btn {
  display: flex;
  width: 114px;
  height: 27px;
  align-items: center;
  justify-content: center;
  gap: 16px;
  border: 1px solid #525252;
  border-radius: 46.11px;
  color: #525252; /* 378:2045 実測 #525252 */
  transition: background-color 0.3s ease, color 0.3s ease;
}

.c-header__drawer-hotel-btn:hover {
  background: #525252;
  color: #ffffff;
}

.c-header__drawer-hotel-btn-text {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.7;
}

.c-header__drawer-hotel-btn-arrow {
  display: block;
  width: 4.7px;
  height: 8.6px;
}

/* ×ボタン（SP は簡易・PC で Figma 実測へ） */
.c-header__drawer-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.c-header__drawer-close:hover {
  opacity: 0.8;
}

.c-header__drawer-close span::before,
.c-header__drawer-close span::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 2px;
  background: #167cc1;
  content: "";
}

.c-header__drawer-close span::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.c-header__drawer-close span::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* ==========================================================================
   PC（769px〜）: 設計 1440×1089 のキャンバスを実測座標で再現
   縮尺は JS が単位なし数値を入れる（Firefox 対策・NEXT #30）
   ========================================================================== */
@media (min-width: 769px) {
  /* ⚠️ position:absolute で流れから抜く。relative のままだと縦スクロールバー(15px)で
     内容幅が 1425 に減り、1440 の layout box が scrollWidth を押し広げて横スクロールが出る
     （overflow-x:hidden では消えない＝子の layout box は scrollWidth に効くため。2026-09-14 実測） */
  .c-header__drawer-canvas {
    position: absolute;
    top: 0;
    left: 50%;
    display: block;
    width: 1440px;
    max-width: none;
    height: 1089px;
    margin-inline: 0;
    padding: 0;
    transform: translateX(-50%) scale(var(--canvas-scale-pc));
    transform-origin: top center;
  }
  /* メニュー 8項目（378:2111 の実測座標を各要素の --x/--y/--w で持つ） */
  .c-header__drawer-nav {
    display: block;
  }
  .c-header__drawer-item {
    position: absolute;
    top: var(--y);
    left: var(--x);
    width: var(--w);
    height: 44px;
  }
  .c-header__drawer-item-text {
    font-size: 32px;
  }
  /* 予約ボタン（378:2106: 515×64 r80・tint 地） */
  .c-header__drawer-reserve {
    position: absolute;
    top: 299px;
    left: 143px;
    width: 515px;
    height: 64px;
    gap: 26px;
  }
  .c-header__drawer-reserve-text {
    font-size: 32px;
  }
  /* TOPICS（378:2071 Buenard 400 40 lh72）
     🔒 display を戻すのを忘れない（基底で display:none にしているため。忘れると PC で見出しが消える＝2026-09-14 実見で検出） */
  .c-header__drawer-topics {
    position: absolute;
    top: 383px;
    left: 150px;
    display: block;
    font-size: 40px;
    line-height: 1.8;
  }
  /* 罫線（378:2105 x294→1290 y423） */
  .c-header__drawer-rule {
    position: absolute;
    top: 423px;
    left: 294px;
    display: block;
    width: 996px;
    height: 1px;
    background: #d9d9d9;
  }
  /* バナー2枚（550×208・写真と装飾は書き出し済み WebP に焼き込み） */
  .c-header__drawer-banner {
    position: absolute;
    top: 465px;
    left: var(--x);
    display: block;
    width: 550px;
    height: 208px;
    line-height: 0;
    transition: opacity 0.3s ease;
  }
  .c-header__drawer-banner:hover {
    opacity: 0.8;
  }
  /* 378:2011 実測 200×152。🔒 色は teal 単色で SVG に焼き込み済み＝館色トークンを当てない
     （フッターの logo-footer は白文字＋館色の灰地用アセットで別物） */
  .c-header__drawer-logo {
    position: absolute;
    top: 774px;
    left: 150px;
    display: block;
    width: 200px;
    height: 152px;
    line-height: 0;
  }
  .c-header__drawer-hotels {
    display: block;
    list-style: none;
  }
  /* 館3列 x=646(179) / 857(196) / 1085(188)・y=762 */
  .c-header__drawer-hotel {
    position: absolute;
    top: 762px;
  }
  .c-header__drawer-hotel--newyutaka {
    left: 646px;
    width: 179px;
  }
  .c-header__drawer-hotel--sunplus {
    left: 857px;
    width: 196px;
  }
  .c-header__drawer-hotel--wing {
    left: 1085px;
    width: 188px;
  }
  /* HPボタン 114×27 r46.11 枠1px（y889 ＝ 館ブロック上端 762 + 127） */
  .c-header__drawer-hotel-btn {
    position: absolute;
    top: 127px;
    left: 0;
  }
  /* ×ボタン（378:2065: 円74.8 at(1332,38) 塗り=main／線 4.53px 白・±25°） */
  .c-header__drawer-close {
    top: 38px;
    left: 1332px;
    right: auto;
    width: 74.8px;
    height: 74.8px;
    border-radius: 50%;
    background: #167cc1; /* 378:2066 実測 #167cc1 */
  }
  .c-header__drawer-close span::before,
  .c-header__drawer-close span::after {
    width: 52.3px;
    height: 4.53px;
    background: #ffffff;
  }
  /* relativeTransform の cos/sin 実測 = ±25°（45° ではない） */
  .c-header__drawer-close span::before {
    transform: translate(-50%, -50%) rotate(25deg);
  }
  .c-header__drawer-close span::after {
    transform: translate(-50%, -50%) rotate(-25deg);
  }
}
/* ==========================================================================
   c-announce  アナウンスバー（スライダー）
   実測 SP 541:1848: (0,47) 390×49 白80%／中身 (44,60) h23: アイコン25×23 main + gap12 + 文字 Noto Sans 500 16 lh21.8 #525252 (w240) ／ 矢印7.1×13 右端 342.6
   実測 PC 541:2821: FV 上端 1440×67 白80%／中身 中央 361×32 (539,20): アイコン34.1×31.9 + gap27 + 文字 18px 500 lh24.5 (w270) + gap23 + 矢印7.1×13
   位置: SP＝ヘッダー白帯(63)の中から FV へ 33px 重なる（y47〜96）。PC＝FV 上端（y74〜141）
   ========================================================================== */
.c-announce {
  position: absolute;
  top: 47px;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 49px;
  background: rgba(255, 255, 255, 0.8);
}

.c-announce__item {
  position: absolute;
  /* 🔴 2026-09-18 是正（ユーザー指摘）: 画素走査で判明＝`.c-announce` は 47〜96 に敷かれているが
     47〜63 は下がヘッダーの白なので白く見え、**実際に青（水色）に見えているのは FV に重なる 63〜96（h33）**。
     中身は 60〜83 にあり、見えている青帯から上に 17px はみ出して白帯に食い込んでいた。
     → 見えている青帯 63〜96 の上下中央へ: 63 + (33 − 23) / 2 = 68 ＝ .c-announce 起点で 21px */
  top: 21px;
  left: 44px;
  right: 47.4px; /* 実測: 390 − 342.6 */
  display: flex;
  align-items: center;
  /* 🔴 2026-09-18 是正（ユーザー指摘＋Figma画像）: Figma 541:1850 は
     アイコン25 + gap12 + 文字枠240 + 矢印7.1 の一群が帯の中で中央に来る設計
     （実測 x44〜342.6 ＝ 左44 / 右47.4 でほぼ対称）。
     以前は .c-announce__text の flex:1 が残り幅を全部食い、文字が左端に貼り付いていた */
  justify-content: center;
  gap: 12px;
  height: 23px;
  color: #525252;
  font-family: "Noto Sans", "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.375;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

.c-announce__item.is-active {
  opacity: 1;
  pointer-events: auto;
}

.c-announce__icon {
  flex-shrink: 0;
  display: block;
  color: var(--color-main);
}

.c-announce__icon--pc {
  display: none;
}

/* 🔁2026-09-25 1枚ずつ横に送る（common.js initAnnounceSlider が .is-step を付けた時だけ・先方 9/23）。
   各お知らせを帯と同じ幅・高さの枠（.c-announce__slide）に入れて横一列に並べ、列（.c-announce__track）ごと1枚分動かす。
   お知らせの位置は枠の中で従来と同じ（SP top21・左44/右47.4 の中央寄せ／PC top20・中央）＝9/18 に直した位置を保つ */
.c-announce.is-step {
  overflow: hidden;
}

.c-announce__track {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  height: 100%;
}

.c-announce__slide {
  position: relative; /* .c-announce__item（absolute）の基準＝帯そのものと同じ大きさ */
  flex: 0 0 100%;
  height: 100%;
}

.c-announce.is-step .c-announce__item {
  opacity: 1;
  transition: none;
  pointer-events: auto;
}

/* ウィングのアナウンスアイコンは #167cc1（541:434 実測）＝strong */
.c-header--wing .c-announce__icon {
  color: var(--color-strong);
}

.c-announce__icon--sp {
  width: 25px;
  height: 23px;
}

.c-announce__text {
  /* Figma 541:1852 の文字枠は w240。flex:1 で伸ばすと左寄せに見えるため
     自然幅＋上限240px にする（240超の省略は 9/18「現状維持」で裁定済み） */
  min-width: 0;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.c-announce__arrow {
  flex-shrink: 0;
  width: 7.1px;
  height: 13px;
}

@media (min-width: 769px) {
  .c-announce {
    top: 74px;
    height: 67px;
  }
  .c-announce__item {
    top: 20px;
    left: 50%;
    right: auto;
    gap: 27px;
    width: auto; /* 実測 541:2823 は 361.1（15文字のダミー文）＝文言長で伸縮させ中央に置く。上限は内側幅 */
    max-width: 880px;
    height: 32px;
    transform: translateX(-50%);
    font-size: 18px;
    line-height: 1.3888888889;
  }
  .c-announce__icon--pc {
    display: block;
    width: 34.1px;
    height: 31.9px;
  }
  .c-announce__icon--sp {
    display: none;
  }
  .c-announce__text {
    /* SP基底の max-width:240px（Figma SP 541:1852 の枠 w240）を PC では解除する。
       PC 541:2821 の文字枠は w270 で、かつ .c-announce__item が「文言長で伸縮させ中央に置く」
       設計のため、ここで縛ると PC の文字が 240px に縮む
       （🔴 2026-09-18: SPの中央寄せ是正を入れた直後、PCで縮む退行を実測して発見） */
    max-width: none;
  }
  .c-announce__arrow {
    margin-left: -4px; /* 実測: 文字右端870 → 矢印893 ＝ 23（gap27 との差） */
  }
}
/* ==========================================================================
   c-footer  固定構図（PC 1440×695 / SP 390×951）を canvas scale で再現
   ========================================================================== */
.c-footer {
  position: relative;
  height: min(951px, 243.8461538462vw); /* 設計高で上限（設計幅より広い端末では固定px・中央） */
  overflow: hidden;
  /* 🔴 2026-09-18 是正（ユーザー指示「フッター背景の薄紫はほかセクションと同じ色の
     白い背景に統一してください」）:
     ⚠️以前は Figma の `Footer Background` 541:2372 の #d9d9d9 をそのまま地にしていたが、
     Figma ではその上の図形 `Vector 4`(541:2373) が x-214.7〜1440.0 ＝ フレーム右端まで
     塗り切っており、**#d9d9d9 は図形の下に完全に隠れて画面には出ない色**だった。
     実装ではキャンバスが 1440px 固定・中央寄せのため両脇に露出し、灰色/薄紫に見えていた。
     ∴ 地は body と同じ白（$color-white）に統一する。
     （1440 超の露出そのものは下の PC MQ で縮尺の上限を外して解消済み＝図形が全面を覆う） */
  background: #ffffff;
  color: #ffffff;
}

.c-footer__canvas {
  position: absolute;
  top: 0;
  left: 50%;
  width: 390px;
  height: 951px;
  transform: translateX(-50%) scale(var(--canvas-scale-sp));
  transform-origin: top center;
}

/* 斜め図形（inline SVG）: 塗り=currentColor(strong)・縁=bg-light（書き出しSVGの2番目のパス） */
.c-footer__shape {
  position: absolute;
  display: block;
  color: var(--color-strong);
  pointer-events: none;
}

.c-footer__shape path:last-child {
  fill: var(--color-bg-light);
}

/* SP: 実測 541:1449 578.9×941 at (-54.9,10)・フレーム x-48 → 表示域基準 left -102.9（書き出しは縁込み +2）
   🔴 2026-09-18 是正（ユーザー指摘「SP幅でフッター上部が少しだけ切れて表示される」）:
   縁パス(2番目・#f5eded)の実bboxは y=-8.1839 まで伸びるが、書き出しSVGの viewBox 上端は
   y=-1.0 だった＝**上端 7.18px 分が SVG のキャンバス外で描画されなかった**
   （`.c-footer` の overflow:hidden ではなく SVG 自身の枠が原因）。
   → SVG の viewBox を上へ 7.4px 広げ(-1.0→-8.4 / h 943.0461→950.4461)、
     CSS も同率で height 943→950.4・top 9→1.6 に合わせる。
     ∴ **1px あたりのスケールは不変＝波の位置・形・他要素は一切動かない**。 */
.c-footer__shape--sp {
  top: 1.6px;
  left: -103.9px;
  width: 581px;
  height: 950.4px;
}

.c-footer__shape--pc {
  display: none;
}

.c-footer__title {
  position: absolute;
  top: 98px;
  left: 23px;
  width: 336px;
  font-family: "Zen Old Mincho", serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4583333333;
  white-space: nowrap;
}

.c-footer__desc {
  position: absolute;
  top: 150px;
  left: 34px;
  width: 306px;
  font-family: "Noto Sans", "Noto Sans JP", sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.7777777778;
  text-align: center;
}

/* 白箱（SP: 予約行 352×50 y248 ／ フォーム行 352×52 y307） */
.c-footer__box {
  position: absolute;
  left: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 352px;
  background: #ffffff;
  color: var(--color-strong);
  font-family: "Noto Sans", "Noto Sans JP", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.36;
  white-space: nowrap;
  transition: opacity 0.3s ease;
}

.c-footer__box:hover {
  opacity: 0.85;
}

.c-footer__box--reserve {
  top: 248px;
  height: 50px;
}

.c-footer__box--form {
  top: 307px;
  height: 52px;
}

.c-footer__box-icon {
  display: block;
  width: 28px;
  height: 22px;
}

.c-footer__logo {
  position: absolute;
  top: 428px;
  left: 35px;
  width: 134.4px;
  color: var(--color-strong); /* ロゴ内の館色パーツ（白部分は固定） */
  line-height: 0;
}

.c-footer__logo-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* 館情報（SP: ニュー(207.5,402)w151／サンプラス(17,573)w176.5／ウィング(207.5,573)w168.5 ＝ Figma SP 541:1478/541:1469 の配置どおり・正解PNGで実見確認 9/11） */
/* 2026-09-21 flex 化（先方依頼 9/19）: 館3つを1つずつ座標で置くのをやめ、一覧（ul）を1か所に置いて中で並べる。
   SP＝2列の grid（左列 17〜193.5／すき間14／右列 207.5〜）。1段目の左はロゴの場所なので、ニューは右列へ。段のすき間＝573−(402+154)＝17
   PC＝横一列（すき間 32＝796→828・1039→1071）。各館の幅（＝館名の下線の長さ）は Figma 実測のまま
   フッター全体は、背景の斜め図形（高さ固定）に重ねる構図＝台紙・見出し・説明・白箱・ロゴは absolute のまま */
.c-footer__hotels {
  position: absolute;
  top: 402px;
  left: 17px;
  display: grid;
  grid-template-columns: 176.5px auto;
  gap: 17px 14px;
  justify-items: start;
  align-items: start;
  list-style: none;
}

.c-footer__hotel {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.c-footer__hotel--newyutaka {
  grid-area: 1/2;
  width: 151px;
}

.c-footer__hotel--sunplus {
  grid-area: 2/1;
  width: 176.5px;
}

.c-footer__hotel--wing {
  grid-area: 2/2;
  width: 168.5px;
}

.c-footer__hotel-name {
  padding-bottom: 8px;
  border-bottom: 1px solid #ffffff;
  font-family: "Noto Sans", "Noto Sans JP", sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.8461538462;
  white-space: nowrap;
}

.c-footer__hotel-address {
  padding: 12px 0;
  font-family: "Noto Sans", "Noto Sans JP", sans-serif;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.8181818182;
  white-space: nowrap;
}

/* HP ボタン 114×27 r46.1 枠1px 白（4px 39px 内側）: 「HP」Zen Kaku Gothic New 500 16 + gap17 + 矢印4.7×8.6 */
.c-footer__hotel-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 17px;
  width: 114px;
  height: 27px;
  border: 1px solid #ffffff;
  border-radius: 46.1px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 17px; /* 実測: ボタン内の文字箱 h17（フォント指定 lh27.2 は残骸） */
  transition: background-color 0.3s ease, color 0.3s ease;
}

.c-footer__hotel-btn:hover {
  background: #ffffff;
  color: var(--color-strong);
}

.c-footer__hotel-btn-arrow {
  width: 4.7px;
  height: 8.6px;
}

.c-footer__hotel-btn:hover .c-footer__hotel-btn-arrow {
  filter: invert(1) brightness(0.4); /* 白矢印を館色寄りに反転 */
}

/* リンク（SP: 2段・座標は Figma 実測 −48）
   2026-09-21 flex 化: 9個を1つずつ座標で置くのをやめ、すき間 20（実測: 全部 20）で並べて折り返す。
   SP＝x12・y790 から幅 378（右端 390）。4個目の右端 358＋20＋5個目 44＝422 ＞ 378 なので 4個で折り返す。段のすき間＝825−(790+20)＝15
   項目の文言・件数が変わっても重ならない。
   リンクとコピーライトは1つのまとまり（.c-footer__bottom）＝リンクが3段に増えたらコピーライトが下がる（座標固定だと 13px 食い込むのを実測） */
.c-footer__bottom {
  position: absolute;
  top: 790px;
  left: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px; /* リンク下端845 → コピーライト867 */
  width: 378px;
}

.c-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 15px 20px;
  list-style: none;
}

.c-footer__link {
  font-family: "Noto Sans", "Noto Sans JP", sans-serif;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.8181818182;
  white-space: nowrap;
}

.c-footer__link a {
  transition: opacity 0.3s ease;
}

.c-footer__link a:hover {
  opacity: 0.7;
}

.c-footer__copy {
  width: 216px;
  margin-left: 70px; /* x82（実測）− まとまりの左端12 */
  font-family: "Noto Sans", "Noto Sans JP", sans-serif;
  font-size: 11px;
  line-height: 1.8181818182;
  white-space: nowrap;
}

@media (min-width: 769px) {
  /* 🔴 2026-09-18 是正（ユーザー指摘「背景が灰色/薄紫になっている」「1440では問題ないが
     大きい画面幅だと右端が切れて崩れて見える」→ユーザー指示「1440px以上、フッターを
     1440pxの正しい表示の状態で画面幅に応じて拡大する」）:
     🔑 原因は2つとも同じ＝**キャンバスが 1440px 固定・中央寄せ**だったこと。
     1440 超では両脇に地の #d9d9d9 が露出し（実測 1920px で左右 240px ずつ）、
     そこで図形の塗りと縁が途切れて縦線が入っていた。
     ⚠️ 地をベタ塗りで隠す案は**SP/PCの本来の表示まで崩すため撤回**（ユーザー指摘）。
     ∴ **フッターだけ縮尺の上限 1 を外す**（`--canvas-scale-footer` = 100vw/1440・JS 側で算出）。
     1440 以下は従来と同値（w/1440 < 1）なので**見た目は一切変わらない**。
     高さも同じ倍率で伸ばす（min() の上限を外す）＝図形が常に全面を覆う。 */
  .c-footer {
    height: 48.2638888889vw;
  }
  .c-footer__canvas {
    width: 1440px;
    height: 695px;
    transform: translateX(-50%) scale(var(--canvas-scale-footer, var(--canvas-scale-pc)));
  }
  .c-footer__shape--sp {
    display: none;
  }
  /* PC: 図形パス右端 1656.18 ↔ 1440・下端 678.98 ↔ 695（書き出し 1658×680） */
  .c-footer__shape--pc {
    display: block;
    top: 16px;
    left: -216.2px;
    width: 1658px;
    height: 680px;
  }
  .c-footer__title {
    top: 87px;
    left: 496px;
    width: 448px;
    font-size: 32px;
    line-height: 1.4375;
  }
  .c-footer__desc {
    top: 163px;
    left: 550px;
    width: 340px;
    font-size: 20px;
    line-height: 1.8;
  }
  .c-footer__box {
    top: 271px;
    width: 525px;
    height: 62px;
  }
  .c-footer__box--form {
    left: 180px;
  }
  .c-footer__box--reserve {
    left: 735px;
  }
  .c-footer__logo {
    top: 402px;
    left: 180px;
    width: 200px;
  }
  /* 館3列（PC は Figma PC の順: ニュー x617 / サンプラス x828 / ウィング x1071・y403）＝横一列・すき間 32 */
  .c-footer__hotels {
    top: 403px;
    left: 617px;
    display: flex;
    gap: 32px;
  }
  .c-footer__hotel--newyutaka {
    width: 179px;
  }
  .c-footer__hotel--sunplus {
    width: 211px;
  }
  .c-footer__hotel--wing {
    width: 188px;
  }
  /* リンク: 1行 x541〜 gap20（実測 x: 541/660/746/821/907/971/1035/1099/1163）。右端 1440−541＝899 まで使い、あふれたら折り返す */
  /* PC＝コピーライト（x119）→ リンク（x541〜）の横並び。DOM は リンク→コピーライト の順なので order で入れ替える */
  .c-footer__bottom {
    top: 622px;
    left: 119px;
    flex-direction: row;
    gap: 0;
    width: 1321px; /* 1440 − 119 */
  }
  .c-footer__links {
    flex: 1;
    min-width: 0;
    margin-left: 206px; /* コピーライト右端335 → 541 */
  }
  .c-footer__copy {
    order: -1;
    flex: none;
    margin-left: 0;
  }
}
/* ==========================================================================
   ウィングのみ: ボタンは角丸なし（ピル型にしない）
   🔴 2026-09-18 是正（ユーザー指摘「本来四角で囲われるはずのものが丸くピル型に
   なってしまっている部分が多々ある」／「いいえ、ウィングだけです」）:
   ⚠️当方は共通クラスに `border-radius: 46.1px` を一律で当てていたため、
   高さ 33〜40px のボタンが完全なピル型に化けていた。
   ✅ Figma 実読（ウィング確定フレーム PC `541:2` / SP `541:495`）＝**cornerRadius なし（=0）**:
      予約する PC `541:458`(166×40) / SP `541:973`(114×33)
      一覧を見る PC `541:209` / SP `541:714`（181.7×37）
      施設の詳細をみる PC `541:280` / SP `541:762`（227.7×35）
      客室一覧をみる PC `541:313` / SP `541:825`（213.7×37）
   📌 **HP ボタン（`.c-footer__hotel-btn` 114×27）はウィングでも r=46.11 が正**
      （`541:66`/`541:536` 実測）＝ここは対象外にする。
   🔒 他2館（ニュー r=46.11 / サンプラス r=20 等）は Figma の値が違うため一切触らない
      ＝`body.is-site-wing` でウィングだけにスコープする。 */
body.is-site-wing .c-btn-line,
body.is-site-wing .c-btn-fill,
body.is-site-wing .c-btn-reserve {
  border-radius: 0;
}