/* ==========================================================
   夕陽ヶ丘ホテル — main stylesheet
   Figmaから取得した正確な数値で実装。
   - 1920px(>1680): 01_index_A をピクセル単位で再現
   - 1024-1680: 01_index_1440px ベース(画像と要素間余白のみ縮小)
   - <=1023: SP独立レイアウト
   ========================================================== */

/* SP横オーバーフロー対策(2026-06-28): 100vwフルブリード要素(写真スライダー/固定ヘッダー等)＋
   縦スクロールバーで生じる16pxの横はみ出し→横スクロール(=スライダーが右に寄って見える)を root で clip。
   body だけの overflow-x:hidden では position:fixed のヘッダー等が escape するため html に付与。 */
/* text-size-adjust(2026-07-02): iOS Safari は横はみ出し等を検知すると本文を自動拡大し(既定 auto)、
   はみ出しを増幅させるため無効化。reset.css には同宣言があるが本体ページ群は未読込だった。 */
html { overflow-x: hidden; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ----------------------------------------------------------
   0. Design tokens — Figma取得値
   ---------------------------------------------------------- */
:root {
  /* Color — Figmaから直接取得 */
  --c-primary: #ec7d5f;             /* 97:1781 phone, 97:3197 price, etc. */
  --c-primary-light: #ffb09b;       /* gradient end — 97:1813 */
  --c-text: #222;                   /* 97:1785 main text */
  --c-text-sub: #333;               /* 97:3437 description */
  --c-text-muted: #888;             /* 97:3201 fine print */
  --c-cream: #f0ebde;               /* 97:4082 hero text */
  --c-bg-cream: #fef7e7;            /* I97:3652 access bg */
  --c-bg-soft: #f2f6fa;             /* 97:3189 plan filter bg */
  --c-blue: #339dc1;                /* port labels */
  --c-blue-soft: #81cddc;           /* 瀬戸内海 label */
  --c-gray-line: #ddd;              /* button border 97:3250 */
  --c-gray-line-2: #aaa;            /* footer border */
  --c-gray-line-3: #707070;         /* card border */
  --c-gray-line-4: #bbb;            /* language separator */
  --c-white: #ffffff;
  --c-black: #111;

  /* Typography (XD→Figma 取り込み崩れの修正版)
     - 基本ゴシック: 游ゴシック Medium
     - 見出し明朝: Shippori Mincho B1 Medium
     - 装飾英数字: Cormorant Infant Medium */
  --font-jp-mincho: "Shippori Mincho B1", "Noto Serif JP", "Yu Mincho", "YuMincho", serif;
  --font-jp-serif: "Noto Serif JP", "Yu Mincho", "YuMincho", serif;
  --font-jp-sans: "Yu Gothic Medium", YuGothic, "游ゴシック Medium", "游ゴシック体", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;
  --font-en-serif: "Cormorant Infant", "Cormorant Garamond", "Times New Roman", serif;
  --font-script: "Allura", "Cormorant Infant", cursive;

  /* Layout */
  --inner-max: 1680px;
  --inner-pad: 60px;
  --frame-w: 1920px;
}

/* ----------------------------------------------------------
   1. Global / Inner container
   ---------------------------------------------------------- */
.l-inner {
  width: 100%;
  max-width: var(--inner-max);
  margin: 0 auto;
  padding: 0 var(--inner-pad);
  box-sizing: border-box;
}

.u-sp { display: none; }
.u-pc { display: block; }
.u-spbr { display: none; }   /* SP のみ表示する <br>（PC は改行しない） */
.u-pcbr { display: inline; }   /* PC のみ表示する <br>（SP は折返しに任せる）。2026-06-25 全ページ共通化（旧: 各下層インライン定義） */
@media (max-width: 767px) { .u-pcbr { display: none; } }   /* SP は PC専用改行 <br class="u-pcbr"> を消す */
.u-nb { white-space: nowrap; }   /* 語中・文節途中での折返しを防ぐ（2026-06-22 クライアント指摘の不自然な改行対策） */

/* 見出しは語中で折り返さない（2026-06-22 改行調整）。改行は <br>/<wbr>/スペースの明示点のみで起き、
   カタカナ語や文節の途中で割れない。※長文タイトル（news-card-title / p-plan__card-title）は
   自然折返しを許容するため除外。
   overflow-wrap(2026-07-02): iOS Safari の keep-all は全角括弧・読点・中黒でも改行できず
   (Chromeは改行できる=実機だけ見出しが右に見切れる)、明示改行点の無い長い見出しが画面外へ
   はみ出すため、枠を超える場合に限り語中改行を許可する安全網。通常の折返し位置は変わらない。 */
.sub-hero-title,
.heading-lg,
.onsen-section-heading-ja,
.feature-block-title,
.detail-card-title,
.spot-card-title,
.route-card-title,
.info-card-title { word-break: keep-all; overflow-wrap: break-word; }

/* ----------------------------------------------------------
   2. Header (Figma: 97:3865 「コンポーネント 184 – 1」 1680×100)
   ---------------------------------------------------------- */
.l-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  pointer-events: none;
}

.l-header__inner {
  position: relative;
  width: 1680px;
  height: 100px;
  margin: 0 auto;
  background: var(--c-white);
  border-radius: 0 0 6px 6px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  pointer-events: auto;
}

/* Logo: inset 10px from header left, vertically centered (97:1780) */
.l-header__logo {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 325px;
  height: 83px;
  display: block;
}
.l-header__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}

/* Nav (97:2084) — top 40px, items spaced with 36px gap, font 16px */
.l-header__nav {
  position: absolute;
  top: 40px;
  left: 433px;
}
.l-header__nav-list {
  display: flex;
  gap: 30px;
  align-items: center;
}
/* 下層ページCSSの body { line-height: 1.875 } が li に継承されるのを断つ
   （2段折り返し時の段の高さがトップ 61px / 下層 73px とズレ、下層だけヘッダーからはみ出していた。
   SAGYO_FORM_WEB-956）。`> li` なのでドロップダウン(subnav)には影響しない */
.l-header__nav-list > li { line-height: 1; }
.l-header__nav-list li a {
  font-family: var(--font-jp-mincho);
  font-weight: 500;
  font-size: 1rem;             /* ナビ本文: 16px */
  line-height: 1;
  color: var(--c-text);
  letter-spacing: 0.04em;
  white-space: nowrap;
  display: inline-block;
  padding: 4px 0;
  transition: color 0.2s ease;
}
.l-header__nav-list li a:hover { color: var(--c-primary); }

/* PC nav dropdown — CSS hover + focus-within (SP は使わずハンバーガーoverlayへ・JS不要) */
.l-header__nav-list > li { position: relative; }
.l-header__nav-item--has-sub > a::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 7px;
  border-right: 1.2px solid currentColor;
  border-bottom: 1.2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.25s ease;
}
.l-header__nav-item--has-sub:hover > a::after,
.l-header__nav-item--has-sub:focus-within > a::after {
  transform: translateY(1px) rotate(225deg);
}
.l-header__subnav {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  margin: 0;
  padding: 8px 0;
  list-style: none;
  width: max-content;
  min-width: 200px;
  background: var(--c-white);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 200;
  /* show は即可視・hide は 0.2s 後に visibility を落とす(フェードアウト用) */
  transition: opacity 0.2s ease, transform 0.25s ease, visibility 0s linear 0.2s;
}
.l-header__nav-item--has-sub:hover > .l-header__subnav,
.l-header__nav-item--has-sub:focus-within > .l-header__subnav {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.2s ease, transform 0.25s ease, visibility 0s linear 0s;
}
.l-header__subnav li { margin: 0; }
.l-header__subnav li + li { border-top: 1px solid #ececec; }
/* 既存 .l-header__nav-list li a (0,1,2) に勝つよう特異性を上げる */
.l-header__nav-list .l-header__subnav a {
  display: block;
  padding: 12px 22px;
  font-family: var(--font-jp-mincho);
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--c-text);
  white-space: nowrap;
  text-align: left;
  transition: color 0.2s ease, background 0.2s ease;
}
.l-header__nav-list .l-header__subnav a:hover {
  color: var(--c-primary);
  background: var(--c-bg-cream);
}

/* 関連コンテンツ カードラベルのタイポを全ページ共通化(客室基準・各ページ inline より高詳細度で上書き) */
.related-section .related-card-label .en {
  font-size: 1.875rem;        /* 30px・客室基準(英字を大きく) */
  letter-spacing: 0.25em;
}
.related-section .related-card-label .ja {
  font-size: clamp(0.875rem, 0.45rem + 0.88vw, 1rem);   /* 16/14 */
  letter-spacing: 0.08em;
}

/* CTA (宿泊予約) — 97:2083, 130×40, gradient, top 31px / left 1097px (right 453) */
.l-header__cta {
  position: absolute;
  top: 31px;
  left: 1097px;
  width: 130px;
  height: 40px;
  background: linear-gradient(to bottom, var(--c-primary), var(--c-primary-light));
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-jp-mincho);
  font-weight: 500;
  font-size: 1.0625rem;        /* CTAボタン: 17px (PC固定) */
  line-height: 26px;
  color: var(--c-white);
  letter-spacing: 1.36px;
  white-space: nowrap;
  transition: filter 0.2s ease;
}
.l-header__cta:hover { filter: brightness(1.05); }

/* Burger button (97:2082) — 40×40, top 31px / left 1251px (right 389) */
.l-header__burger {
  position: absolute;
  top: 31px;
  left: 1251px;
  width: 40px;
  height: 40px;
  background: var(--c-text);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
}
.l-header__burger span {
  display: block;
  width: 18px;
  height: 1px;
  background: var(--c-white);
}

/* Language block (97:2080) — wrapper for trigger button + dropdown menu */
.l-header__lang {
  position: absolute;
  top: 39.24px;
  left: 1323px;
}
/* Trigger button: flex container with globe + text + chevron + horizontal underline */
.l-header__lang-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 0 8px 0;
  margin: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--c-gray-line-4);
  font: inherit;
  color: inherit;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  line-height: 1;
  transition: color 0.25s, border-color 0.25s;
}
.l-header__lang-trigger:focus { outline: none; }
.l-header__lang-trigger:focus-visible {
  outline: 2px solid var(--c-primary, #d97056);
  outline-offset: 2px;
}
.l-header__lang-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: block;
}
.l-header__lang-text {
  font-family: var(--font-en-serif);
  font-weight: 600;
  font-size: clamp(0.6875rem, 0.58rem + 0.46vw, 1.125rem);   /* 言語切替: SP11px→PC18px */
  line-height: 1;
  color: var(--c-text);
  white-space: nowrap;
}
/* Language text variants (default = full) */
.l-header__lang-text--full { display: inline; }
.l-header__lang-text--short { display: none; }
/* Chevron icon next to language text - rotates when open */
.l-header__lang-chevron {
  width: 10px;
  height: 5px;
  flex-shrink: 0;
  margin-left: 2px;
  display: block;
  transition: transform 0.25s;
}
.l-header__lang.is-open .l-header__lang-chevron {
  transform: rotate(180deg);
}
/* Dropdown menu */
.l-header__lang-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  margin: 0;
  padding: 4px 0;
  min-width: 160px;
  list-style: none;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  z-index: 200;
  transition: opacity 0.2s, transform 0.25s, visibility 0.2s;
}
.l-header__lang.is-open .l-header__lang-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.l-header__lang-menu li {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #ECECEC;
}
.l-header__lang-menu li:last-child {
  border-bottom: none;
}
.l-header__lang-menu a {
  display: block;
  padding: 13px 20px;
  color: var(--c-text);
  text-align: center;
  font-family: var(--font-jp-mincho, var(--font-jp-serif, serif));
  font-size: 0.875rem;         /* 言語メニュー項目: 14px */
  font-weight: 500;
  letter-spacing: 0.05em;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s, background-color 0.2s;
}
.l-header__lang-menu a:hover,
.l-header__lang-menu a:focus-visible {
  color: var(--c-primary, #d97056);
  background: #FAF6F3;
  outline: none;
}

/* Tel block (97:2077) — top 19px / right 39.54px / left 1474.46px */
.l-header__tel {
  position: absolute;
  top: 19px;
  left: 1474.46px;
  width: 166px;
  text-align: center;
}
.l-header__tel-num {
  display: block;
  font-family: var(--font-en-serif);
  font-weight: 500;
  font-size: 2rem;             /* 電話番号(大): 32px (PC固定) */
  line-height: 36px;
  color: var(--c-primary);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.l-header__tel-hours {
  display: block;
  margin-top: 2px;
  font-family: var(--font-jp-mincho);
  font-weight: 500;
  font-size: 0.875rem;         /* 受付時間(注釈): 14px */
  line-height: 1;
  color: var(--c-text);
  white-space: nowrap;
}

/* ----------------------------------------------------------
   3. Hero (Figma frame 0~1000, text frame 97:4082)
   ---------------------------------------------------------- */
.p-hero {
  position: relative;
  width: 100%;
  height: 1000px;
  margin: 0 auto;
  overflow: hidden;
  background: #2a2624;
  /* clip-path で position:fixed の子を .p-hero の境界内に閉じ込める
     → 背景は viewport 固定 / 上のテキストはスクロール → reveal型パララックス */
  clip-path: inset(0);
}

.p-hero__slider {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 0;
  will-change: transform;
}
.p-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.6s ease-in-out;
  z-index: 1;
}
.p-hero__slide.is-active {
  opacity: 1;
  z-index: 2;
}
.p-hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.05);
  will-change: transform;
  /* transition なし — 解除時の逆方向アニメーションを完全に禁止 */
}
/* Ken Burns: アクティブ時のみ前進ズーム。解除時はJSで現在transformをinline凍結 */
.p-hero__slide.is-active img {
  animation: kenburns 12s ease-out forwards;
}
@keyframes kenburns {
  from { transform: scale(1.05); }
  to   { transform: scale(1.22); }
}
@media (prefers-reduced-motion: reduce) {
  .p-hero__slide img,
  .p-hero__slide.is-active img {
    transform: scale(1.05);
    animation: none;
  }
}

/* Hero copy: positioned at frame x=200 / y=422 (97:4082) */
.p-hero__copy {
  position: absolute;
  left: 200px;
  top: 422px;
  width: 571px;
  color: var(--c-cream);
  z-index: 3; /* fixed slider(z:0) より上 */
}
.p-hero__title {
  font-family: var(--font-jp-mincho);
  font-weight: 500;
  font-size: clamp(1.625rem, 1.47rem + 0.65vw, 2.25rem);   /* ヒーロー見出し: SP26px→PC36px */
  line-height: 1.7;
  letter-spacing: 12.6px;
  white-space: nowrap;
}
.p-hero__title span { display: block; }
/* "小豆島・" prefix wrapper: PCではinline (span 1 内の通常テキスト扱い)、
   SP では block 化して3行構成 ("小豆島・"/"夕陽の特等席で、"/"心が満ちる島時間。") を実現。
   <b> のデフォルト bold をリセット。 */
.p-hero__title-prefix { font-weight: inherit; }
.p-hero__title-en {
  margin-top: 16px;
  font-family: var(--font-en-serif);
  font-weight: 400;
  font-size: clamp(1rem, 0.81rem + 0.78vw, 1.75rem);   /* ヒーロー英字: SP16px→PC28px */
  line-height: 1;
  letter-spacing: 1.4px;
  white-space: nowrap;
}
.p-hero__lead {
  margin-top: 28px;
  width: 394px;
  font-family: var(--font-jp-sans);
  font-weight: 400;
  font-size: 1rem;             /* ヒーロー本文: 16px */
  line-height: 27px;
  letter-spacing: 0.04em;
}

/* Right side fixed menu (Figma 97:3847) — body直下配置 / 全画面の最前面に固定 */
.l-sidemenu {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 80px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 9999;
  pointer-events: auto;
}
.l-sidemenu__btn {
  width: 80px;
  height: 80px;
  border-radius: 4px 0 0 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-decoration: none;
  color: var(--c-white);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  transition: filter .2s ease, transform .2s ease;
  overflow: hidden;          /* ラベルが幅 80px を超えた場合に viewport へ突き抜けるのを防ぐ */
}
.l-sidemenu__btn:hover { filter: brightness(1.06); transform: translateX(-2px); }
.l-sidemenu__btn--plan   { background: linear-gradient(to bottom, #3b69ac, #5486d1); }
.l-sidemenu__btn--search { background: linear-gradient(to bottom, #2a88b2, #48a0c8); }
.l-sidemenu__btn--faq    { background: linear-gradient(to bottom, #40ab67, #63c286); }
.l-sidemenu__icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  /* Figma書き出しがどの色でも白に強制 */
  filter: brightness(0) invert(1);
}
.l-sidemenu__label {
  font-family: var(--font-jp-sans);
  font-weight: 500;
  font-size: 0.875rem;         /* サイドメニュー小ラベル: 13px→14px */
  line-height: 15px;
  text-align: center;
  letter-spacing: 0.05em;
}
.l-sidemenu__label > span { display: block; }

/* Hero slider counter (97:4076) — at (255.31, 932) 275×77 */
.p-hero__counter {
  position: absolute;
  left: 200px;               /* p-hero__copy と左端を揃える */
  bottom: 0;
  width: auto;
  height: 77px;
  display: flex;
  align-items: center;
  gap: 1.5em;
  z-index: 5;
}
.p-hero__counter-num {
  font-family: var(--font-jp-serif);
  font-weight: 500;
  font-size: 1rem;             /* スライダーカウンタ: 15px→16px */
  line-height: 18px;
  letter-spacing: 0.75px;
  color: var(--c-cream);
}
/* prev/next を白丸背景に (デザイン特徴)。配置は prev → 1/4 → next */
.p-hero__counter-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.88);
  border-radius: 50%;
  color: var(--c-text);
  flex-shrink: 0;
  transition: background .2s ease;
}
.p-hero__counter-btn:hover { background: rgba(255,255,255,0.6); }

/* ----------------------------------------------------------
   4. Notice banner (Figma: 97:4038 — 1052×60 at (748, 940))
   ---------------------------------------------------------- */
.p-notice {
  position: relative;
  width: 100%;
  margin-top: -60px;
  z-index: 6;
  pointer-events: none;   /* 全幅の透明帯が hero counter のクリック/hover を奪うため素通しに */
}
.p-notice__inner { pointer-events: auto; }   /* 白枠リンク部分だけ受ける */
.p-notice__inner {
  position: relative;
  width: 1052px;
  height: 60px;
  margin: 0 0 0 auto;
  margin-right: calc((100% - 1800px) / 2);
  background: var(--c-white);
  border-radius: 12px 12px 0 0;
  display: flex;
  align-items: center;
  padding: 0 60px 0 30.07px;
  box-sizing: border-box;
  transition: opacity .2s ease;
}
.p-notice__inner:hover { opacity: 0.95; }
.p-notice__icon {
  width: 28.87px;
  height: 29.33px;
  background: var(--c-primary);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  position: relative;
  margin-right: 6px;
}
.p-notice__icon::after {
  content: "!";
  position: absolute;
  left: 50%;
  top: 56%;
  transform: translate(-50%, -50%);
  font-family: var(--font-jp-serif);
  font-weight: 600;
  font-size: 1rem;             /* お知らせ「!」マーク: 16px */
  line-height: 1;
  color: var(--c-white);
}
.p-notice__label {
  font-family: var(--font-jp-serif);
  font-weight: 600;
  font-size: 1rem;             /* お知らせラベル: 16px */
  line-height: 1;
  color: var(--c-primary);
  letter-spacing: 0.05em;
  margin-right: 28px;
  white-space: nowrap;
}
.p-notice__date {
  font-family: var(--font-en-serif);
  font-weight: 500;
  font-size: 1.125rem;         /* お知らせ日付(英字): 18px (PC固定) */
  line-height: 1;
  color: var(--c-text);
  margin-right: 20px;
  white-space: nowrap;
}
.p-notice__text {
  font-family: var(--font-jp-sans);
  font-size: 1rem;             /* お知らせ本文: 16px */
  line-height: 1;
  color: var(--c-text);
  white-space: nowrap;
}
.p-notice__arrow {
  position: absolute;
  right: 34px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: auto;
  z-index: 2;
  pointer-events: none;       /* クリックは下の枠全体リンクへ */
  transition: transform .2s ease;
}
.p-notice__inner:hover .p-notice__arrow { transform: translateY(-50%) translateX(4px); }   /* hoverで右矢印を少し右へ */
.p-notice__arrow img { width: 100%; height: auto; max-width: 10px; display: block; }
.p-notice__link { position: absolute; inset: 0; z-index: 1; }   /* 枠全体をリンク(href="nolink") */

/* Workaround: align notice 144px from the right edge of the 1920 frame */
@media (min-width: 1681px) {
  .p-notice__inner { margin-right: 144px; }
}

/* ----------------------------------------------------------
   5. Sunset Service Info + Topics (Figma 97:3575 — 1800×368 at (120, 1120))
   ---------------------------------------------------------- */
.p-topics {
  position: relative;
  width: 100%;
  padding: 120px 0 0;
}
.p-topics__inner {
  position: relative;
  width: 1800px;
  max-width: calc(100vw - 120px);
  margin: 0 auto;
  height: 368px;
}
@media (min-width: 1921px) {
  .p-topics__inner { max-width: 1800px; }
}

/* Sunset Service card — left part of the row */
.p-sunset {
  position: absolute;
  top: 12px;
  left: 0;
  width: 532px;
  height: 356px;
  background: var(--c-white);
  border-radius: 6px;
  box-shadow: 0 3px 24px 0 rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
.p-sunset__head {
  height: 100px;
  padding: 0 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;     /* 和文+英字の2行をまとめて縦中央 */
  background: linear-gradient(to bottom, var(--c-primary), var(--c-primary-light));
  color: var(--c-white);
  box-sizing: border-box;
}
.p-sunset__head-jp {
  font-family: var(--font-jp-mincho);
  font-weight: 500;
  font-size: clamp(1.125rem, 1.05rem + 0.33vw, 1.4375rem);   /* サンセット見出し: SP18px→PC23px */
  line-height: 1.5;
  letter-spacing: 1.15px;
  white-space: nowrap;         /* 「サンセットドリンクサービス」13文字実測249px=360px端末でも1行 */
}
@media (max-width: 350px) {
  .p-sunset__head-jp { font-size: 0.875rem; letter-spacing: 0.3px; }   /* 極小画面保険 */
}
.p-sunset__head-btn {
  margin-top: 8px;
  align-self: flex-start;
  padding: 5px 18px 6px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 999px;
  color: var(--c-white);
  text-decoration: none;
  font-family: var(--font-jp-sans);
  font-size: clamp(0.6875rem, 0.65rem + 0.15vw, 0.8125rem);   /* 詳しくはこちら: SP11px→PC13px */
  letter-spacing: 0.08em;
  line-height: 1.4;
  transition: background-color 0.3s, color 0.3s;
}
.p-sunset__head-btn:hover { background-color: var(--c-white); color: var(--c-primary); }
.p-sunset__body {
  position: relative;
  padding: 22px 32px 0 32px;   /* 本文域を広げ lead を3行に収める(左右40→32) */
}
.p-sunset__time-row {
  display: flex;
  align-items: baseline;
  gap: 28px;
  margin-top: 22px;
}
.p-sunset__time-label {
  font-family: var(--font-jp-mincho);
  font-weight: 500;
  font-size: clamp(1rem, 0.87rem + 0.52vw, 1.5rem);   /* 日の入り時刻ラベル: SP16px→PC24px */
  line-height: 50px;
  letter-spacing: 0.05em;
  color: var(--c-text);
}
.p-sunset__time-label .is-mark { color: var(--c-primary); }
.p-sunset__time {
  font-family: var(--font-en-serif);
  font-weight: 500;
  font-size: clamp(3.5rem, 3.12rem + 1.57vw, 5rem);   /* 日の入り時刻(特大数字): SP56px→PC80px */
  line-height: 1;
  letter-spacing: 4px;
  color: var(--c-text);
}
.p-sunset__lead {
  margin-top: 22px;
  font-family: var(--font-jp-sans);
  font-weight: 400;
  font-size: clamp(0.875rem, 0.86rem + 0.07vw, 0.9375rem);   /* サンセット本文lead: SP14px→PC15px */
  line-height: 30px;
  color: var(--c-text);
  letter-spacing: 0.02em;
  text-wrap: pretty;          /* 最終行「す。」だけ落ちる孤立を回避 */
}

/* Topics title + slider buttons */
.p-topics__head {
  position: absolute;
  top: 17px;
  left: 612px;                 /* サンセットカード(532px)右に80px余白 */
  display: flex;
  align-items: baseline;
  gap: 18px;
  z-index: 2;
}
.p-topics__title-en {
  font-family: var(--font-en-serif);
  font-weight: 500;
  font-size: clamp(2.25rem, 2.03rem + 0.92vw, 3.125rem);   /* TOPICS英字見出し: SP36px→PC50px */
  line-height: 1;
  color: var(--c-text);
  letter-spacing: 2px;
}
.p-topics__title-jp {
  font-family: var(--font-jp-mincho);
  font-weight: 500;
  font-size: 1.125rem;         /* TOPICS和文見出し: 18px (PC/SP共通) */
  color: var(--c-text);
  letter-spacing: 0.1em;
}

/* Topics slider arrows — right side at left 1599.72 (relative to frame, so within 1800 inner ≈ right 200) */
.p-topics__nav {
  position: absolute;
  top: 33px;
  right: 60px;   /* サイドの固定ボタン(宿泊プラン/空室検索/よくある質問)との重なり回避(旧 right:0) */
  display: flex;
  align-items: center;
  gap: 32px;
  z-index: 5;
}
.p-topics__nav button {
  width: 28px;
  height: 28px;
  color: var(--c-text);
  display: flex;
  align-items: center;
  justify-content: center;
}
.p-topics__nav button svg { width: 11px; height: 18px; }   /* 矢印が小さすぎて見えなかったため拡大 (N2) */
.p-topics__nav button.is-prev svg { transform: rotate(180deg); }
.p-topics__counter {
  font-family: var(--font-jp-serif);
  font-weight: 500;
  font-size: 1rem;             /* TOPICSカウンタ: 15px→16px */
  line-height: 18px;
  color: var(--c-text);
  letter-spacing: 0.75px;
}

/* Topics cards row — starts at 552px (628-120 offset to inner) , 4 cards × (340 + 32 gap) */
.p-topics__rail {
  position: absolute;
  top: 88px;
  left: 552px;
  display: flex;
  gap: 32px;
  width: calc(100% - 552px);
  overflow: hidden;
}

/* ===== Topics Banner Slider (replaces topics cards rail) =====
   - 自動ステップ右→左 / 1-2-3-1-2-3 無限ループ
   - はみ出し領域は viewport overflow:hidden で見えなくなる */
.p-topicsBnr {
  position: absolute;
  top: 88px;
  left: 612px;                 /* サンセットカード(532px)右に80px余白 */
  right: 0;
  height: 280px;
  z-index: 1;
}
.p-topicsBnr__viewport {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.p-topicsBnr__track {
  display: flex;
  gap: 24px;
  height: 100%;
  transition: transform 0.7s cubic-bezier(.4,0,.2,1);
  will-change: transform;
  touch-action: pan-y;                   /* 横ドラッグはJSで処理、縦スクロールはブラウザに委譲 */
}
.p-topicsBnr__slide {
  flex: 0 0 340px;
  height: 280px;
  display: block;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16);
  transition: opacity .25s ease;
}
.p-topicsBnr__slide:hover {
  opacity: 0.8;
}
.p-topicsBnr__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (prefers-reduced-motion: reduce) {
  .p-topicsBnr__track { transition: none; }
}

.p-topics__card {
  position: relative;
  flex: 0 0 340px;
  width: 340px;
  height: 280px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
}
.p-topics__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.p-topics__card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Card variation: Star watching */
.p-topics__card--star .p-topics__card-jp {
  font-family: var(--font-jp-mincho);
  font-weight: 600;
  color: var(--c-white);
  letter-spacing: 4.5px;
  line-height: 40px;
}
.p-topics__card--star .p-topics__card-jp .lg { font-size: clamp(1.375rem, 1.25rem + 0.52vw, 1.875rem); }   /* SP22px→PC30px */
.p-topics__card--star .p-topics__card-jp .sm { font-size: clamp(1rem, 0.9rem + 0.39vw, 1.375rem); letter-spacing: 3.3px; }   /* SP16px→PC22px */
.p-topics__card--star .p-topics__card-en {
  margin-top: 50px;
  font-family: var(--font-en-serif);
  font-weight: 500;
  font-size: 1.25rem;          /* カード英字ラベル: 20px (固定) */
  line-height: 1;
  letter-spacing: 1.6px;
  color: var(--c-white);
}

/* Card variation: Raku-Raku island trip */
.p-topics__card--raku { background: linear-gradient(134.5deg, #ffd2d2 2.6%, #f4f8bd 46.5%, #75e5fc 95.5%); }
.p-topics__card--raku .p-topics__card-overlay { padding-top: 90px; }
.p-topics__card--raku-sub {
  font-family: var(--font-jp-sans);
  font-size: 1.1875rem;        /* カードサブ: 19px (固定) */
  color: #333;
  margin-bottom: 16px;
}
.p-topics__card--raku-main {
  font-family: var(--font-jp-sans);
  font-size: clamp(1.75rem, 1.62rem + 0.52vw, 2.25rem);   /* カード主見出し: SP28px→PC36px */
  letter-spacing: 2.88px;
  font-weight: 700;
}
.p-topics__card--raku-main span:nth-child(odd) { color: #99e886; }
.p-topics__card--raku-main span:nth-child(even) { color: #f4ff60; }
.p-topics__card--raku-en {
  margin-top: 16px;
  font-family: "Inter", sans-serif;
  font-size: 1.25rem;          /* カード英字: 20px (固定) */
  color: #333;
}

/* Card variation: Bar Lounge */
.p-topics__card--bar .p-topics__card-overlay {
  align-items: flex-start;
  padding: 19px 0 0 17px;
  text-align: left;
}
.p-topics__card--bar-jp {
  font-family: var(--font-jp-mincho);
  font-weight: 400;
  font-size: 1.125rem;         /* カード和文: 18px (固定) */
  line-height: 30px;
  letter-spacing: 9px;
  color: var(--c-white);
}
.p-topics__card--bar-en {
  margin-top: 36px;
  font-family: var(--font-en-serif);
  font-weight: 400;
  font-size: clamp(3.5rem, 3.12rem + 1.57vw, 5rem);   /* カード特大英字: SP56px→PC80px */
  line-height: 1;
  color: var(--c-white);
}
.p-topics__card--bar-en span { display: block; }

/* ----------------------------------------------------------
   6. Three Ways title (Figma: 97:4039 at (120, 1674))
   ---------------------------------------------------------- */
.p-ways {
  position: relative;
  padding: 160px 0 80px;
}
.p-ways__head {
  width: min(1680px, 87.5vw);   /* 左右ガター6.25vw (1920:120 / 1440:90、Figma両アートボード一致) */
  height: 108px;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}
.p-ways__title {
  font-family: var(--font-jp-mincho);
  font-weight: 500;
  font-size: clamp(1.5rem, 1.37rem + 0.52vw, 2rem);   /* 見出し: SP24px→PC32px */
  line-height: 64px;
  color: var(--c-text);
  letter-spacing: 0.1em;
}
.p-ways__title em {
  font-style: normal;
  color: var(--c-primary);
  font-size: clamp(1.75rem, 1.62rem + 0.52vw, 2.25rem);   /* 見出し強調: SP28px→PC36px */
}
.p-ways__sub {
  margin-top: 13px;
  font-family: var(--font-en-serif);
  font-weight: 400;
  font-size: clamp(1rem, 0.87rem + 0.52vw, 1.5rem);   /* 英字サブ見出し: SP16px→PC24px */
  line-height: 1;
  color: var(--c-text);
  letter-spacing: 0.04em;
}

/* Cards (97:4073) — 3 columns, 流体グリッド。
   Figma 1920: col520/gap60/ガター120、1440: col400/gap30/ガター90 →
   ガター6.25vw一定・列は最大520で幅流体・gapは 6.25vw-60px (1920:60→1440:30、最小20) */
.p-ways__row {
  position: relative;
  width: min(1680px, 87.5vw);
  margin: 80px auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 520px));
  grid-template-rows: repeat(5, auto);   /* col-head / main / lead / links / sub-imgs の5行を3列で共有 (subgrid) */
  gap: 0 clamp(20px, 6.25vw - 60px, 60px);   /* row-gap 0 (縦は各要素の margin で管理) */
  justify-content: space-between;
}
/* 列を subgrid 化: lead の折返し行数が列ごとに違っても、行高が3列で共有され
   サブ写真の上端が常に揃う (lead 高さ違いによる 02/03 とのズレ防止) */
.p-ways__col {
  position: relative;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 5;   /* head/main/lead/links/sub-imgs (リンク行を追加) */
}
.p-ways__num {
  font-family: var(--font-en-serif);
  font-weight: 400;
  font-size: clamp(2rem, 1.87rem + 0.52vw, 2.5rem);   /* 番号(大文字): SP32px→PC40px */
  line-height: 1.2;
  color: var(--c-text);
  letter-spacing: 2px;
}
.p-ways__heading {
  display: inline-block;
  margin-left: 24px;
  font-family: var(--font-jp-mincho);
  font-weight: 500;
  font-size: clamp(1.25rem, 1.19rem + 0.26vw, 1.5rem);   /* 見出し: SP20px→PC24px */
  line-height: 1;
  color: var(--c-text);
  letter-spacing: 1.2px;
  vertical-align: 6px;
}
.p-ways__main {
  position: relative;
  margin-top: 20px;
  width: 100%;
  /* 高さはデザイン準拠で1440まで520固定(幅だけ縮んで縦長化=1440版と同じ)、
     1440未満は440まで緩やかに縮める (1280:489 / 1024:440) */
  height: clamp(440px, 19vw + 246px, 520px);
  border-radius: 6px;
  overflow: hidden;
}
.p-ways__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(.4,0,.2,1);
}
.p-ways__main:hover img { transform: scale(1.05); }   /* マウスオーバーで写真をちょっと拡大 */
.p-ways__script {
  position: absolute;
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.37rem + 0.52vw, 2rem);   /* 装飾スクリプト: SP24px→PC32px */
  line-height: 38px;
  color: var(--c-cream);
  letter-spacing: 1.6px;
  white-space: nowrap;   /* 狭幅でも2行に落とさない */
  pointer-events: none;
  text-shadow: 0 2px 12px rgba(0,0,0,.2);
}
/* 位置は%指定(流体化対応)。
   col--1 (03 夕陽ふたり旅): 白字・Figmaデザイン値(130.7/520, 84/520)=グラス左の夕焼け空
   col--2 (01 家族三世代): 男性の顔より上(髪にかかるのはOK)
   col--3 (02 夏を遊びつくす): 中央寄せで上部の青い海の帯に */
.p-ways__col--1 .p-ways__script { top: 25.2%; left: 16.2%; color: var(--c-white); }
.p-ways__col--2 .p-ways__script { top: 7.3%; left: 55.8%; color: var(--c-text); text-shadow: none; }
.p-ways__col--3 .p-ways__script { top: 10%; left: 50%; transform: translateX(-50%); color: var(--c-white); }

.p-ways__lead {
  margin-top: 34px;
  font-family: var(--font-jp-sans);
  font-weight: 400;
  font-size: clamp(0.875rem, 0.45rem + 0.88vw, 1rem);   /* 本文lead: SP14px→PC16px */
  line-height: 30px;
  color: var(--c-text);
  letter-spacing: 0.04em;
}
.p-ways__col--3 .p-ways__lead { color: var(--c-text-sub); }

/* lead 下のテキストリンク (下線黒字 + 共通 arrow_right.webp) — 横並び 1〜2個 */
.p-ways__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 34px;
  margin-top: 22px;
}
.p-ways__link {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-jp-sans);
  font-size: 0.9375rem;            /* 15px */
  color: var(--c-text);
  text-decoration: none;
  letter-spacing: 0.04em;
}
.p-ways__link span {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.p-ways__link::after {              /* 右矢印: 共通 arrow_right.webp。ボタンの::after矢印とサイズを揃える */
  content: "";
  display: inline-block;
  width: 15px;
  height: 9px;
  margin-left: 8px;
  background: url(/assets/images/icons/arrow_right.webp) no-repeat center / contain;
  transition: transform 0.25s ease;
}
.p-ways__link:hover span { text-decoration-color: var(--c-primary); }
.p-ways__link:hover::after { transform: translateX(4px); }

.p-ways__sub-imgs {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* 幅流体(1920:250 / 1440:190)。gap20と高さ150はデザイン共通固定 */
  gap: 20px;
  margin-top: 37px;
}
.p-ways__sub-img {
  width: 100%;
  height: 150px;
  border-radius: 6px;
  overflow: hidden;
}
.p-ways__sub-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* テキスト列が縮む帯 (≤1799px) は lead の固定改行が二重折返しを生むため自然折返しに
   (1920 デザインの行構成は満幅でしか成立しない。subgrid で行高は揃うが見た目優先)。
   landscape の段落区切り <br class="u-parabr"><br class="u-parabr"> だけ残す
   (※ br + br や :has(+ br) はテキストノードを無視して全brにマッチするため使えない)。
   cuisine は対象外: 最長行382px＝最小列幅460でも収まり、固定改行のままなら
   本文がクラスタ左端(copy起点+365px)を越えない=丸画像と被らない (デザインPNG準拠) */
@media (max-width: 1799px) and (min-width: 1024px) {
  .p-ways__lead br,
  .p-landscape__lead br { display: none; }
  .p-landscape__lead br.u-parabr { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  .p-ways__main img { transition: none; }
  .p-ways__main:hover img { transform: none; }
}

/* ----------------------------------------------------------
   7. Instagram strip (97:3783 at (0, 2916.5))
   ---------------------------------------------------------- */
.p-insta {
  position: relative;
  margin-top: 80px;
  padding: 0;
}
.p-insta__head {
  width: min(1680px, 87.5vw);   /* p-ways と同じ流体ガター。旧 padding:0 120px はガター二重取りで
                                   1681px境界の位置ジャンプと p-ways との左端ズレの原因だった */
  margin: 0 auto;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  box-sizing: border-box;
}
.p-insta__title {
  display: flex;
  align-items: center;
  gap: 24px;                   /* Figma: アイコン右端147→文字171 */
  font-family: var(--font-en-serif);
  font-weight: 400;            /* Figma: Cormorant Infant Regular */
  font-size: clamp(1.75rem, 1.56rem + 0.78vw, 2.5rem);   /* 見出し: SP28px→PC40px */
  line-height: 64px;
  color: var(--c-text);
  letter-spacing: 0.04em;
}
.p-insta__title svg {
  width: 26px;                 /* Figma: 26×26 */
  height: 26px;
}
.p-insta__handle {
  margin-left: 29px;           /* Figma: タイトル右端335→handle 364 */
  font-family: "Playfair Display", "Cormorant Infant", serif;   /* Figma: Playfair Display Regular */
  font-size: 1.125rem;         /* @handle: 18px (Figma)。SP は SPブロックで 14px に上書き */
  font-weight: 400;
  color: var(--c-primary);     /* デザイン準拠: ブランド橙 #ec7d5f */
  letter-spacing: 0.05em;
}
/* "あなただけの島時間" + 装飾(Figma パス 23294) */
.p-insta__sub-wrap {
  display: flex;
  align-items: flex-end;
  gap: 40px;            /* Figma: テキスト右端1600.8→装飾左端1641 */
  margin-right: -16px;  /* Figma: 装飾右端はコンテンツ右端(1800)から16.5pxはみ出す */
  position: relative;
}
.p-insta__sub {
  font-family: var(--font-jp-mincho);  /* Figma: Shippori Mincho B1 Medium */
  font-weight: 500;
  font-size: clamp(1rem, 0.9rem + 0.39vw, 1.375rem);   /* 見出し: SP16px→PC22px */
  line-height: 64px;
  color: var(--c-text);
  letter-spacing: 15.4px;
  white-space: nowrap;
}
/* 見出し右の曲線装飾 (デザイン書き出し PNG: insta_left.png)。
   「あなただけの島時間」の右から右上へ伸びる曲線＋丸。height:auto で PNG 本来の比率を維持。
   Figma実寸175.5×84: 丸の上端がテキスト行より約50px上(セクション上端)に抜ける。
   margin-top の負値で行高64px内に収め、subの縦位置に影響させない (-50+85+29=64) */
.p-insta__deco {
  width: 176px;   /* デザイン2倍書き出し(PNG実寸352×170) → 表示は半分の176px */
  height: auto;
  flex-shrink: 0;
  display: block;
  margin-bottom: 29px;
  margin-top: -50px;
  user-select: none;
  pointer-events: none;
}
/* ===== Instagram Marquee (full-bleed, slow right→left infinite scroll) =====
   - 5枚 originals + 5 clones = 10タイル
   - nth-child(odd)=DOWN(下) / nth-child(even)=UP(上) で Figma の交互配置を再現
   - 各タイル右下に + アイコン(白丸+黒い十字グリフ)*/
.p-insta__marquee {
  width: 100%;
  margin-top: 105px;
  overflow: hidden;
  --tile-w: 280px;
  --tile-gap: 80px;
  --tile-count: 5;          /* originals (clones in HTML are duplicate of these) */
  --marquee-duration: 60s;  /* slow */
  --tile-stagger: 80px;     /* Figma: 297.5 - 217.5 = 80 上下差 */
}
.p-insta__track {
  display: flex;
  gap: var(--tile-gap);
  width: max-content;
  height: calc(var(--tile-w) + var(--tile-stagger));
  animation: insta-marquee var(--marquee-duration) linear infinite;
  align-items: stretch;
}
.p-insta__track:hover { animation-play-state: paused; }
/* /api/insta の取得が決着するまで静的フォールバック(フリー素材)を見せない (リロード時のチラ見え防止)。
   解除は main.js (成否どちらでも)。JS無効時は index.html の noscript が打ち消し、4秒の保険タイマーもあり */
.p-insta__track.is-pending { visibility: hidden; }
@keyframes insta-marquee {
  to { transform: translateX(calc(-1 * (var(--tile-w) + var(--tile-gap)) * var(--tile-count))); }
}
.p-insta__tile {
  position: relative;
  flex: 0 0 var(--tile-w);
  width: var(--tile-w);
  height: var(--tile-w);
  border-radius: 6px;
  overflow: visible; /* + アイコン を tile外に少しはみ出してOKにする */
  display: block;
  transition: opacity .25s ease;
}
.p-insta__tile > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 6px;
}
.p-insta__tile:hover { opacity: 0.92; }
/* スタガー: 奇数=下 / 偶数=上 (Figma reproduction) */
.p-insta__tile:nth-child(odd)  { align-self: flex-end; }
.p-insta__tile:nth-child(even) { align-self: flex-start; }

/* + アイコン: 半透明の白丸ボタン + 黒い十字 */
.p-insta__plus {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.78);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  display: block;
  backdrop-filter: blur(2px);
}
.p-insta__plus::before,
.p-insta__plus::after {
  content: '';
  position: absolute;
  background: #222;
  top: 50%;
  left: 50%;
}
.p-insta__plus::before {
  width: 12px;
  height: 1.5px;
  transform: translate(-50%, -50%);
}
.p-insta__plus::after {
  width: 1.5px;
  height: 12px;
  transform: translate(-50%, -50%);
}

@media (prefers-reduced-motion: reduce) {
  .p-insta__track { animation: none; }
}

/* ----------------------------------------------------------
   8. Cuisine (97:4059 at (0, 3654)) — left text + right images
   ---------------------------------------------------------- */
.p-cuisine {
  position: relative;
  margin-top: 160px;
  background: transparent;
  padding: 0;
  /* 流体寸法 (1920↔1024 線形補間): メイン画像だけが縮むのを避け、
     テキスト列幅・要素間の余白も少しずつ詰めて画像幅を確保する */
  --cu-copy-left: clamp(90px, 4.5vw + 44px, 130px);   /* テキスト列左起点 1920:130 / 1024:90 */
  --cu-copy-w: clamp(460px, 15.6vw + 300px, 600px);   /* テキスト列幅 1920:600 / 1024:460 */
  --cu-gap: clamp(50px, 7.8vw - 30px, 120px);         /* テキスト〜画像の間隔 1920:120 / 1024:50 */
}
/* 灰色bg は擬似要素で描画。余白はデザイン仕様で「白60+グレー60を維持 →
   収まらない幅(≤1680)でフルブリード」のステップ式 (contents_1681/1440.png 確認 2026-06-12)。
   ≤1680 はタブレットブロックの !important (left/right:0) が全面化を担当 */
.p-cuisine::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 60px;
  bottom: 0;
  background: #f2f6fa;
  z-index: 0;
  pointer-events: none;
}
.p-cuisine__inner {
  position: relative;
  width: 100%;               /* セクション全幅。左コンテンツ=左寄せ、右ガター固定、料理画像=幅可変 */
  margin: 0;
  height: 652px;
  z-index: 1;
}
.p-cuisine__vertical {
  position: absolute;
  top: 124px;
  left: 40px;                /* 左寄せ(1681サンプル準拠) */
  width: 27px;
  height: auto;              /* 1列の自然長 */
  font-family: var(--font-en-serif);
  font-weight: 500;
  font-size: clamp(0.875rem, 0.45rem + 0.88vw, 1rem);   /* 縦書き装飾ラベル: SP14px→PC16px */
  line-height: 1;
  color: var(--c-text);
  letter-spacing: 0.4em;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  white-space: nowrap;       /* 2列折返しを防ぎ1列に */
}
.p-cuisine__copy {
  position: absolute;
  top: 135px;
  left: var(--cu-copy-left);
  width: var(--cu-copy-w);
  z-index: 3;                /* 装飾より前面(文字を読めるように) */
}
.p-cuisine__title {
  font-family: var(--font-jp-mincho);
  font-weight: 500;
  font-size: clamp(1.375rem, 1.22rem + 0.65vw, 2rem);   /* 見出し: SP22px→PC32px */
  line-height: 46px;
  color: var(--c-text);
  letter-spacing: 0.1em;
}
.p-cuisine__lead {
  margin-top: 26px;
  font-family: var(--font-jp-sans);
  font-weight: 400;
  font-size: clamp(0.875rem, 0.45rem + 0.88vw, 1rem);   /* 本文lead: SP14px→PC16px */
  line-height: 30px;
  color: var(--c-text-sub);
  letter-spacing: 0.04em;
}
.p-cuisine__img-main {
  position: absolute;
  top: 50px;
  left: calc(var(--cu-copy-left) + var(--cu-copy-w) + var(--cu-gap));   /* テキスト列+gap の右 */
  right: 120px;              /* 右ガター=白60+グレー60 を維持 (≤1680 はタブレット側で 0=フルブリード) */
  height: 540px;             /* 縦サイズは固定 */
  z-index: 1;
  border-radius: 6px;
  overflow: hidden;
}
.p-cuisine__img-main img { width: 100%; height: 100%; object-fit: cover; }

/* Sub-images cluster (97:4058) */
.p-cuisine__cluster {
  position: absolute;
  /* lead 最長行(約365px)の右に固定し本文に重ねない (1920:495≒旧500)。
     狭幅では列が詰まるぶん料理写真の縁に丸が乗るが、散りばめ装飾として許容 */
  left: calc(var(--cu-copy-left) + 365px);
  top: 75px;
  width: 309px;
  height: 322px;
  z-index: 2;                /* テキストの下・料理画像の上 */
  pointer-events: none;
}
.p-cuisine__cluster img { position: absolute; border-radius: 50%; object-fit: cover; }
.p-cuisine__cluster-1 { width: 111px; height: 110px; left: 0;   top: 0;   }
.p-cuisine__cluster-2 { width: 129px; height: 127px; left: 53px; top: 124px; }
/* 天ぷら: 旧 152×171/left209/top151 は XD→Figma 変換ズレの値で、XD書き出しPNG (contents_1920.png 実測
   2026-06-12) ではステーキの右隣・ほぼ同じ高さ・皿径135px。アセット(160×210)の皿(154px)を135pxに
   合わせた縮小 (×0.877)。border-radius:50% は葉のはみ出しを楕円に切ってしまうため解除 (透過webp) */
.p-cuisine__cluster-3 { width: 120px; height: auto; left: 140px; top: -30px; }   /* hoshi 手動最終調整 (2026-06-12) */
.p-cuisine__cluster img.p-cuisine__cluster-3 { border-radius: 0; }   /* .p-cuisine__cluster img (0-1-1) より強く */
.p-cuisine__cluster-4 { width: 122px; height: 95px;  left: 156px; top: 368px; }

/* ----------------------------------------------------------
   共通ボタン p-common__btn — 丸角枠線ボタン（白背景 → hover #ec7d5f）
   トップ: CUISINE / LANDSCAPE / ROOMS / NEWS で共用。
   下層 btn-outline とも色・hover を統一。
   幅・余白など配置依存の差分は各 .p-xxx__btn 側で個別指定。
   ---------------------------------------------------------- */
.p-common__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  border: 1px solid var(--c-text);
  border-radius: 5px;
  font-family: var(--font-jp-mincho);
  font-weight: 500;
  font-size: 0.875rem;         /* ボタン文字: 14px */
  letter-spacing: 0.08em;
  color: var(--c-text);
  background: var(--c-white);
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.p-common__btn::after {
  content: "";
  margin-left: 16px;
  display: inline-block;
  width: 10px;
  height: 10px;
  background: url(/assets/images/icons/arrow_right.webp) no-repeat center / contain;
  transition: transform 0.25s ease, filter 0.25s ease;
}
.p-common__btn:hover {
  background: var(--c-primary);     /* #ec7d5f */
  border-color: var(--c-primary);
  color: var(--c-white);
}
.p-common__btn:hover::after {
  filter: invert(1);                /* 黒矢印 → 白 */
  transform: translateX(4px);       /* hover で右へ */
}

/* CUISINE ボタン（幅・余白のみ。見た目は p-common__btn）*/
.p-cuisine__btn { margin-top: 37px; width: 245px; }

/* ----------------------------------------------------------
   9. Landscape (97:4056 at (60, 4386))
   ---------------------------------------------------------- */
.p-landscape {
  position: relative;
  width: 100%;
  margin-top: 80px;
  padding: 0;
  background: transparent;
  /* 流体寸法 (cuisine のミラー): テキスト列幅・余白も少しずつ詰めて画像幅を確保 */
  --ld-copy-right: clamp(90px, 4.5vw + 44px, 130px);   /* テキスト列右起点 1920:130 / 1024:90 */
  --ld-copy-w: clamp(460px, 15.6vw + 300px, 600px);    /* テキスト列幅 1920:600 / 1024:460 */
  --ld-gap: clamp(50px, 7.8vw - 30px, 120px);          /* 画像〜テキストの間隔 1920:120 / 1024:50 */
}
/* 余白はステップ式: 左ガター60維持 → ≤1680 でフルブリード (タブレット側 !important が担当) */
.p-landscape::before {
  content: '';
  position: absolute;
  top: 0;
  left: 60px;
  right: 0;
  bottom: 0;
  background: #f2f6fa;
  z-index: 0;
  pointer-events: none;
}
.p-landscape__inner {
  position: relative;
  width: 100%;               /* セクション全幅。右コンテンツ=右ガター固定、景観画像=幅可変 */
  margin: 0;
  height: 652px;
  z-index: 1;
}
.p-landscape__img {
  position: absolute;
  top: 56px;
  left: 120px;               /* 左ガター=白60+グレー60 を維持 (≤1680 はタブレット側で 0=フルブリード) */
  right: calc(var(--ld-copy-right) + var(--ld-copy-w) + var(--ld-gap));   /* テキスト列+gap の左 */
  height: 540px;             /* 縦サイズは固定 */
  z-index: 1;
  border-radius: 6px;
  overflow: hidden;
}
.p-landscape__img img { width: 100%; height: 100%; object-fit: cover; }
.p-landscape__copy {
  position: absolute;
  top: 122px;
  left: auto;
  right: var(--ld-copy-right);
  width: var(--ld-copy-w);
  z-index: 3;                /* 装飾より前面 */
}
.p-landscape__title {
  font-family: var(--font-jp-mincho);
  font-weight: 500;
  font-size: clamp(1.375rem, 1.22rem + 0.65vw, 2rem);   /* 見出し: SP22px→PC32px */
  line-height: 46px;
  color: var(--c-text);
  letter-spacing: 0.06em;
}
.p-landscape__title em {
  font-style: normal;
  font-size: clamp(1.5rem, 1.31rem + 0.78vw, 2.25rem);   /* 見出し強調: SP24px→PC36px */
  letter-spacing: 0.04em;
}
.p-landscape__lead {
  margin-top: 32px;
  font-family: var(--font-jp-sans);
  font-weight: 400;
  font-size: clamp(0.875rem, 0.45rem + 0.88vw, 1rem);   /* 本文lead: SP14px→PC16px */
  line-height: 30px;
  color: var(--c-text-sub);
  letter-spacing: 0.04em;
}
/* LANDSCAPE ボタン（幅・余白のみ。見た目は p-common__btn）*/
.p-landscape__btn { margin-top: 40px; width: 245px; }
.p-landscape__map {
  float: right;              /* コピー内で右に浮かせ、lead テキストを左へ回り込ませる(本文に被らない) */
  width: clamp(170px, 4.5vw + 124px, 210px);   /* テキスト列の縮小に合わせて少し縮む 1920:210 / 1024:170 */
  height: auto;
  margin: 4px 0 8px 24px;    /* 回り込むテキストとの間隔 */
  /* 枠・影・テキスト重ねは無し。enmap.png 画像のみ表示 */
}
.p-landscape__map img { width: 100%; height: auto; display: block; }
.p-landscape__vertical {
  position: absolute;
  top: 100px;
  left: auto;
  right: 40px;               /* 縦ラベル=最も右(cuisine vertical left:40 のミラー) */
  width: 27px;
  height: auto;              /* 1列の自然長 */
  font-family: var(--font-en-serif);
  font-weight: 500;
  font-size: clamp(0.875rem, 0.45rem + 0.88vw, 1rem);   /* 縦書き装飾ラベル: SP14px→PC16px */
  letter-spacing: 0.4em;
  writing-mode: vertical-rl;
  color: var(--c-text);
  white-space: nowrap;       /* 2列折返しを防ぎ1列に */
}

/* ----------------------------------------------------------
   10. Rooms & Onsen (97:4053 at (60, 5118), card 1800×652)
   ---------------------------------------------------------- */
.p-rooms {
  position: relative;
  margin-top: 80px;
  padding: 0;
  background: transparent;
  overflow: hidden;   /* inner を 1800px 固定にしたとき、はみ出す左右画像を viewport 端で対称にクリップ */
}
/* 余白はステップ式: 左右ガター60維持 → ≤1680 でフルブリード (タブレット側 !important が担当) */
.p-rooms::before {
  content: '';
  position: absolute;
  top: 0;
  left: 60px;
  right: 60px;
  bottom: 0;
  background: #f2f6fa;
  z-index: 0;
  pointer-events: none;
}
/* 左右写真は fluid 幅: 外側マージン = 120px(白60+グレー60)を維持し、≤1680 はタブレット側で 0=フルブリード
   (デザイン仕様のステップ式、contents_1681/1440.png 確認 2026-06-12)。
   内側は中央コピーからの距離固定 (≥1681:280 / ≤1680:250)。写真幅だけが左右対称に縮む */
.p-rooms__inner {
  position: relative;
  width: 100%;
  margin: 0 auto;
  height: 652px;
  z-index: 1;
}
.p-rooms__img-l {
  position: absolute;
  top: 56px;
  left: 120px;
  right: calc(50% + 280px);
  width: auto;
  height: 540px;
  border-radius: 6px;
  overflow: hidden;
  z-index: 1;
}
.p-rooms__img-r {
  position: absolute;
  top: 56px;
  left: calc(50% + 280px);
  right: 120px;
  width: auto;
  height: 540px;
  border-radius: 6px;
  overflow: hidden;
  z-index: 1;
}
.p-rooms__img-l img,
.p-rooms__img-r img { width: 100%; height: 100%; object-fit: cover; }
.p-rooms__copy {
  position: absolute;
  top: 144px;
  left: 50%;
  transform: translateX(-50%);   /* 常に中央 (旧 left:705px は1800inner前提) */
  width: 352px;
  text-align: left;
  z-index: 3;        /* 画像より前面。中央テキストは常に見える */
}
.p-rooms__title {
  font-family: var(--font-jp-mincho);
  font-weight: 500;
  font-size: clamp(1.375rem, 1.22rem + 0.65vw, 2rem);   /* 見出し: SP22px→PC32px */
  line-height: 46px;
  color: var(--c-text);
  letter-spacing: 0.1em;
  text-align: left;
}
.p-rooms__lead {
  margin-top: 28px;
  font-family: var(--font-jp-sans);
  font-weight: 400;
  font-size: clamp(0.875rem, 0.45rem + 0.88vw, 1rem);   /* 本文lead: SP14px→PC16px */
  line-height: 30px;
  color: var(--c-text-sub);
  letter-spacing: 0.04em;
}
.p-rooms__btns {
  margin-top: 36px;
  display: flex;
  gap: 12px;
  justify-content: flex-start;
}
/* ROOMS ボタン（幅・矢印余白のみ。見た目は p-common__btn）*/
.p-rooms__btn { width: 164px; }
.p-rooms__btn::after { margin-left: 12px; }
.p-rooms__vertical {
  position: absolute;
  top: 131px;
  left: calc(50% + 190px);   /* 中央コピーの右隣 (≤1680 はタブレット側で +182) */
  width: 27px;
  height: auto;              /* 1列の自然長 */
  font-family: var(--font-en-serif);
  font-weight: 500;
  font-size: clamp(0.875rem, 0.45rem + 0.88vw, 1rem);   /* 縦書き装飾ラベル: SP14px→PC16px */
  letter-spacing: 0.4em;
  writing-mode: vertical-rl;
  color: var(--c-text);
  white-space: nowrap;       /* 2列折返しを防ぎ1列に */
}

/* Rooms & Onsen の fluid 化は base に一本化済 (旧 ≥1681 専用ブロックは v43 で base へ統合。
   1024〜1920+ 全幅で外マージン 0〜120px / 写真幅が左右対称に可変。≤1023 は SP ルールが担当) */

/* ----------------------------------------------------------
   11. Plan section (97:4033 at (120, 5930))
   ---------------------------------------------------------- */
.p-plan {
  position: relative;
  padding: 100px 0 0;   /* 上余白(旧160px) */
}
.p-plan__inner {
  width: 1680px;
  max-width: calc(100vw - 120px);
  margin: 0 auto;
  position: relative;
}
.p-plan__head {
  display: flex;
  align-items: baseline;
  gap: 24px;
}
.p-plan__title-en {
  font-family: var(--font-en-serif);
  font-weight: 500;
  font-size: clamp(3.5rem, 3.12rem + 1.57vw, 5rem);   /* 特大英字見出し: SP56px→PC80px */
  line-height: 1;
  color: var(--c-text);
  letter-spacing: 0.02em;
}
.p-plan__title-jp {
  font-family: var(--font-jp-mincho);
  font-weight: 500;
  font-size: clamp(1.125rem, 1.03rem + 0.39vw, 1.5rem);   /* 見出し和文: SP18px→PC24px */
  line-height: 50px;
  color: var(--c-text);
  letter-spacing: 0.1em;
}
.p-plan__title-jp em { font-style: normal; color: var(--c-primary); }
.p-plan__nav {
  position: absolute;
  top: 65.5px;
  right: 60px;   /* サイドの固定ボタンとの重なり回避(旧 right:8px) */
  width: 140px;
  height: 21px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.p-plan__nav button {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text);
}
.p-plan__nav button svg { width: 11px; height: 18px; }    /* TOPICS と同じ大きさに(旧 8×14) */
.p-plan__nav button svg path { stroke-width: 1.2; }        /* TOPICS と同じ濃さ(線幅、旧 1) */
.p-plan__nav-counter {
  font-family: var(--font-jp-serif);
  font-weight: 500;
  font-size: 1rem;             /* カウンタ: 15px→16px */
  letter-spacing: 0.75px;
  color: var(--c-text);
}

.p-plan__grid {                          /* ビューポート: トラックのはみ出しを画面右端でクリップ */
  margin-top: 65px;
  overflow: hidden;
  margin-right: calc(50% - 50vw);        /* 右端を画面端まで伸ばし、4枚目以降を画面外へ(TOPICS同様) */
}
.p-plan__track {                         /* トラック: transform で横移動(JS制御)。クローン込みで横一列・無限ループ */
  display: flex;
  gap: 53px;
  will-change: transform;
  touch-action: pan-y;                   /* 横ドラッグはJSで処理、縦スクロールはブラウザに委譲 */
}
.p-plan__card { flex: 0 0 380px; width: 380px; position: relative; transition: opacity .25s ease; }   /* カード全体リンクの基準 */
.p-plan__card:hover { opacity: 0.8; }   /* TOPICSバナーと同じホバー透過 */
.p-plan__card-link { position: absolute; inset: 0; z-index: 2; }        /* カード全体をクリック可能に(href="nolink") */
.p-plan__card-img {
  width: 380px;
  height: 380px;
  border-radius: 6px;
  overflow: hidden;
}
.p-plan__card-img img { width: 100%; height: 100%; object-fit: cover; }
.p-plan__card-title {
  margin-top: 21px;
  font-family: var(--font-jp-mincho);
  font-weight: 500;
  font-size: clamp(0.875rem, 0.81rem + 0.26vw, 1.125rem);   /* プランカード見出し: SP14px→PC18px */
  line-height: 32px;
  color: var(--c-text);
  letter-spacing: 0.05em;
}
.p-plan__card-price-row {
  margin-top: 15px;
  display: flex;
  align-items: baseline;
  gap: 22px;
  position: relative;
}
.p-plan__card-price {
  font-family: var(--font-jp-serif);
  font-weight: 500;
  font-size: clamp(1.25rem, 1.19rem + 0.26vw, 1.5rem);   /* 価格(強調): SP20px→PC24px */
  line-height: 32px;
  color: var(--c-primary);
  letter-spacing: 0.02em;
}
.p-plan__card-cap {
  font-family: var(--font-jp-sans);
  font-size: 0.875rem;         /* 価格補足(注釈): 13px→14px */
  line-height: 32px;
  color: var(--c-text-muted);
  letter-spacing: 0.04em;
}
.p-plan__card-arrow {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background: url(/assets/images/icons/arrow_right.webp) no-repeat center / contain;
}

/* Filter row (97:4032 at top 6733, full width 1043) */
.p-plan__filter {
  margin-top: 80px;
  width: 1679px;
  max-width: calc(100vw - 120px);
  margin-left: auto;
  margin-right: auto;
  height: 112px;
  background: #fff7f5;   /* 薄グレー→薄ピンク (hoshi指定 2026-06-17) */
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  padding: 0;
  box-sizing: border-box;
}
.p-plan__filter-label {
  font-family: var(--font-jp-mincho);
  font-weight: 500;
  font-size: clamp(1.0625rem, 1.01rem + 0.2vw, 1.25rem);   /* フィルタ見出し: SP17px→PC20px */
  line-height: 32px;
  color: var(--c-text);
  letter-spacing: 0.05em;
  margin-left: 315px;
  margin-right: 48px;
}
.p-plan__filter-btn {
  width: 260px;
  height: 56px;
  border-radius: 5px;
  font-family: var(--font-jp-mincho);
  font-weight: 500;
  font-size: 1.0625rem;        /* フィルタボタン: 17px (固定) */
  letter-spacing: 0.85px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: filter 0.2s ease;
}
.p-plan__filter-btn::after {
  content: "";
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background: url(/assets/images/icons/arrow_right.webp) no-repeat center / contain;
}
.p-plan__filter-btn--primary::after { filter: invert(1); }
.p-plan__filter-btn--primary {
  background: linear-gradient(to bottom, var(--c-primary), var(--c-primary-light));
  color: var(--c-white);
}
.p-plan__filter-btn--primary:hover { filter: brightness(1.05); }
.p-plan__filter-btn--ghost {
  background: var(--c-white);
  border: 1px solid var(--c-gray-line);
  color: var(--c-text);
}
.p-plan__filter-btn--ghost:hover { background: #fafafa; }

/* ----------------------------------------------------------
   12. Access section (97:3652 at (0, 6937), 1920×804) — bg #fef7e7
   重なり順 (z-index): 背景cream < マップ(1) < 円形写真(2) < テキスト・ボタン(3)
   マップ webp (2410×1050, ratio 2.295) はラベル/港アイコン/★ピン/ホテルロゴ吹き出しを内蔵
   ---------------------------------------------------------- */
.p-access {
  position: relative;
  width: 100%;
  /* 2026-06-10: 804px固定 → マップ縮小(83.68%帯)に追従して下余白を常に163pxに保つ。
     ≥1440 はマップ525px固定なので min() で従来どおり 804px (116 + 525 + 163) */
  height: min(804px, calc(279px + 36.46vw));
  background: var(--c-bg-cream);
  margin-top: 120px;
  overflow: hidden;
}
.p-access__inner {
  position: relative;
  width: 1920px;
  max-width: 100%;
  height: 100%;
  margin: 0 auto;
}

/* マップ: 最下層 — design PNG 実測 (2026-06-10, 01_index_A / 01_index_1440px の港アイコン4点から算出):
   ・1920 と 1440 で表示幅は同一 ≈1205px (scale 0.50)、top 116 固定
   ・右inset は 1920→61px / 1440→0px の線形補間
   ・1440 未満は design なし → 83.68% (=1205/1440) で緩やかに比例縮小
     (旧 calc(100% - 660px) は 1px:1px で縮み、狭幅でマップが急激に小さくなる NG だった) */
.p-access__map {
  position: absolute;
  /* 2026-06-10 hoshi 指示: top:116px 固定 → 下基準アンカーに変更。
     ロゴ吹き出しが円写真に重ならないようマップを下に逃がす (≥1581px: bottom 10vw) */
  top: auto;
  bottom: 10vw;
  right: clamp(0px, calc((100% - 1440px) * 0.127), 61px);
  left: auto;
  width: min(1205px, 83.68%);
  aspect-ratio: 2410 / 1050;
  height: auto;
  z-index: 1;
}
.p-access__map img {   /* > img → img: 2026-06-10 picture 要素化(PC/SP画像出し分け)に伴い子孫セレクタへ */
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 円形写真: 中層 — マップの上に浮かぶ */
.p-access__circle {
  position: absolute;
  width: 182px;
  height: 182px;
  border-radius: 6px;
  overflow: hidden;
  z-index: 2;
}
.p-access__circle img { width: 100%; height: 100%; object-fit: cover; }
.p-access__circle--1 { top: 86px; left: 501px; }   /* top 177→86: design PNG (01_index_A) 実測 2026-06-10 */
.p-access__circle--2 { top: 86px; left: 703px; }

/* テキスト・ボタン: 最上層 */
.p-access__title-en {
  position: absolute;
  top: 202px;   /* 224→202: design PNG インク上端 216 − フォントオフセット14 (2026-06-10 実測) */
  left: 120px;
  z-index: 3;
  font-family: var(--font-en-serif);
  font-weight: 500;
  font-size: clamp(3.5rem, 3.12rem + 1.57vw, 5rem);   /* 特大英字見出し: SP56px→PC80px */
  line-height: 1;
  color: var(--c-text);
  letter-spacing: 0.02em;
}
.p-access__title-jp {
  position: absolute;
  top: 283px;
  left: 120px;
  z-index: 3;
  font-family: var(--font-jp-mincho);
  font-weight: 500;
  font-size: clamp(1.25rem, 1.19rem + 0.26vw, 1.5rem);   /* 見出し和文: SP20px→PC24px */
  line-height: 50px;
  color: var(--c-text);
  letter-spacing: 0.1em;
}
.p-access__title-jp em { font-style: normal; color: var(--c-primary); }
.p-access__lead {
  position: absolute;
  top: 360px;
  left: 120px;
  z-index: 3;
  font-family: var(--font-jp-sans);
  font-weight: 400;
  font-size: clamp(0.875rem, 0.45rem + 0.88vw, 1rem);   /* 本文lead: SP14px→PC16px */
  line-height: 30px;
  color: var(--c-text);
  letter-spacing: 0.04em;
}
.p-access__btn {
  position: absolute;
  top: 584px;
  left: 120px;
  z-index: 3;
  width: 400px;
  height: 57px;
  border-radius: 5px;
  background: linear-gradient(to bottom, var(--c-primary), var(--c-primary-light));
  font-family: var(--font-jp-mincho);
  font-weight: 500;
  font-size: 1.0625rem;        /* アクセスCTAボタン: 17px (固定) */
  letter-spacing: 0.85px;
  color: var(--c-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: filter 0.2s ease;
}
.p-access__btn::after {
  content: "";
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background: url(/assets/images/icons/arrow_right.webp) no-repeat center / contain;
  filter: invert(1);
}
.p-access__btn:hover { filter: brightness(1.05); }

/* SP-only wrapper — on PC it must not affect layout; children are absolute */
.p-access__circles-row { display: contents; }

/* Footer sub-nav (97:5860) — PC: 右カラム下部 3 アウトラインボタン (Kasai 底辺 411px と揃えて top: 363) */
.l-footer__subnav {
  position: absolute;
  top: 363px;
  left: 614px;
  display: flex;
  gap: 16px;
}
.l-footer__subnav a {
  width: 180px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-gray-line-2);
  border-radius: 4px;
  background: var(--c-white);
  font-family: var(--font-jp-mincho);
  font-weight: 500;
  font-size: 0.875rem;         /* フッターsubnav: 14px */
  letter-spacing: 0.05em;
  color: var(--c-text);
  text-decoration: none;
  transition: filter 0.2s ease;
}
.l-footer__subnav a:hover { filter: brightness(0.96); }

/* ----------------------------------------------------------
   13. News strip (97:3542 at (120, 7861) — 1680×436)
   ---------------------------------------------------------- */
.p-news {
  padding: 120px 0;
}
.p-news__inner {
  width: min(1680px, 87.5vw);   /* p-ways__row と同じ流体ガター (6.25vw)。旧タブレット1260px固定は撤去 */
  margin: 0 auto;
  display: grid;
  grid-template-columns: 480px 1fr;
  gap: 90px;                    /* hoshi 指定 (2026-06-12、旧60) */
}
.p-news__list-head {
  font-family: var(--font-jp-mincho);
  font-weight: 500;
  font-size: clamp(1.125rem, 1rem + 0.52vw, 1.625rem);   /* 見出し: SP18px→PC26px */
  line-height: 56px;
  letter-spacing: 0.05em;
  color: var(--c-text);
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 14px;
}
/* Figma 準拠の NEWS バッジ風アイコン (26×29) */
.p-news__list-head-icon {
  display: inline-block;
  width: 26px;
  height: 29px;
  flex-shrink: 0;
}
.p-news__list-head-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.p-news__list { border-top: none; }
.p-news__item {
  display: block;
  position: relative;
  padding: 0 40px 10px 0;     /* 右に矢印アイコン用の余白 */
  border-bottom: 1px solid #aaa;
  margin-bottom: 14px;
}
.p-news__item::after {          /* 右矢印アイコン(デザイン準拠 arrow_right.webp) */
  content: '';
  position: absolute;
  right: 4px;
  bottom: 20px;
  width: 10px;
  height: 10px;
  background: url(/assets/images/icons/arrow_right.webp) no-repeat center / contain;
}
.p-news__item-link {            /* microCMS 連携: date+title を包む記事詳細リンク (/news/detail.html?id=) */
  display: block;
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.p-news__item-link:hover { opacity: 0.7; }
.p-news__date {
  display: block;
  font-family: var(--font-en-serif);
  font-weight: 500;
  font-size: clamp(0.875rem, 0.81rem + 0.26vw, 1.125rem);   /* 日付(英字): SP14px→PC18px */
  line-height: 38px;
  color: var(--c-text);
  letter-spacing: 0.05em;
}
.p-news__title {
  display: block;
  margin-top: -4px;
  font-family: var(--font-jp-sans);
  font-size: clamp(0.875rem, 0.45rem + 0.88vw, 1rem);   /* お知らせ見出し本文: SP14px→PC16px */
  line-height: 36px;
  color: var(--c-text);
}
/* 左カラムを縦 flex にして、お知らせ一覧へボタンを下端に押し下げる
   これで grid item の高さいっぱいまで広がり、右カラムと底辺が揃う */
.p-news__list-wrap {
  display: flex;
  flex-direction: column;
  min-width: 500px;          /* hoshi 指定 (2026-06-12)。狭幅でもお知らせ一覧の幅を確保 (SP は min-width:0 に戻す) */
}
.p-news__list { flex: 0 0 auto; }
/* NEWS「お知らせ一覧へ」ボタン（配置・寸法のみ。見た目は p-common__btn）*/
.p-news__more {
  margin-top: auto;          /* 残りスペースを上に押し上げ、ボタンを下端へ */
  align-self: flex-start;    /* ボタンは左寄せ維持 */
  width: 200px;
  height: 42px;
  border-radius: 4px;
}
.p-news__more::after { margin-left: 10px; }
/* バナーエリア: 大1 (上段) + 小カルーセル (下段、3枚自動ループ)
   Figma 実比率: 大バナー 804×106 / 小バナー 350×160
   justify-content: space-between で大バナーを上端、カルーセルを下端に配置 →
   左カラム (お知らせ) と底辺が揃う */
.p-news__banners {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;   /* 旧 space-between。ナビ追加で carousel↔nav が空きすぎるため変更 */
  gap: 0;                        /* 大⇔小の間隔は .p-news__carousel の margin-top:auto で確保 */
  min-width: 0;          /* grid item の min-width:auto を解除し、子の overflow:hidden を効かせる */
}
.p-news__banner {
  position: relative;
  display: block;
  border-radius: 6px;
  overflow: hidden;
  background: #ddd;
}
.p-news__banner--lg {
  width: 100%;
  max-width: 800px;             /* Figma 約 804px 相当、右に余白を残す */
  aspect-ratio: 800 / 106;      /* Figma 比率 ≒ 7.55:1 (細長) */
}
.p-news__banner--sm {
  flex: 0 0 350px;              /* カルーセル内で固定 350px */
  width: 350px;
  aspect-ratio: 350 / 160;      /* Figma 比率 ≒ 2.19:1 */
  transition: opacity .25s ease;
}
.p-news__banner--sm:hover { opacity: 0.85; }
.p-news__banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p-news__bnr-nav {                 /* 小バナーページャー: 全幅で中央下に表示(デザイン準拠、旧:PC非表示) */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-top: 16px;
}
.p-news__bnr-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--c-text);
  cursor: pointer;
  padding: 0;
}
.p-news__bnr-btn svg { width: 11px; height: 18px; }
.p-news__bnr-counter {
  font-family: var(--font-en-serif);
  font-size: 1rem;
  letter-spacing: 0.1em;
  color: var(--c-text);
  min-width: 36px;
  text-align: center;
}

/* カルーセル: 自動ステップ右→左 / 1-2-3-1-2-3 無限ループ (TOPICS と同じ方式)
   ビューポートは右カラム全幅、はみ出した部分は overflow:hidden で見切れる */
.p-news__carousel {
  position: relative;
  width: 100%;
  margin-top: auto;     /* lg バナーとの間を広く取りつつ、小バナー+ページャーを下寄せ */
}
.p-news__carousel-viewport {
  width: 100%;
  overflow: hidden;
}
.p-news__carousel-track {
  display: flex;
  gap: 20px;
  transition: transform 0.7s cubic-bezier(.4,0,.2,1);
  will-change: transform;
  touch-action: pan-y;                   /* 横ドラッグはJSで処理、縦スクロールはブラウザに委譲 */
}
@media (prefers-reduced-motion: reduce) {
  .p-news__carousel-track { transition: none; }
}

/* ----------------------------------------------------------
   14. Footer hero (97:4017 at (0, 8417), 1920×654)
   ---------------------------------------------------------- */
.p-footerHero {
  position: relative;
  width: 100%;
  height: 654px;
  overflow: hidden;
  /* clip-path で fixed子要素を境界内に閉じ込める */
  clip-path: inset(0);
}
/* 背景画像はviewportに固定 — テキストはその上をスクロール */
.p-footerHero img {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  object-fit: cover;
  z-index: 0;
}
.p-footerHero__copy {
  position: absolute;
  top: 262px;
  right: 219.2px;
  width: 508px;
  color: var(--c-cream);
  z-index: 2; /* fixed bg(z:0) より上 */
}
.p-footerHero__title {
  font-family: var(--font-jp-mincho);
  font-weight: 500;
  font-size: clamp(1.375rem, 1.22rem + 0.65vw, 2rem);   /* 見出し: SP22px→PC32px */
  line-height: 46px;
  letter-spacing: 0.3em;
  color: var(--c-cream);
}
.p-footerHero__title span { display: block; }
.p-footerHero__title-en {
  margin-top: 18px;
  font-family: var(--font-en-serif);
  font-weight: 400;
  font-size: clamp(0.875rem, 0.75rem + 0.52vw, 1.375rem);   /* 英字サブ見出し: SP14px→PC22px */
  letter-spacing: 0.06em;
}

/* ----------------------------------------------------------
   15. Footer (97:3734 at (0, 9071), 1920×657)
   ---------------------------------------------------------- */
.l-footer {
  position: relative;
  background: var(--c-white);
  padding: 72px 0 0;
  height: 657px;
  box-sizing: border-box;
}
.l-footer__inner {
  position: relative;
  width: 1440px;          /* Figma 133:13791: content area 240→1562 (asymmetric in 1920 frame、240+1440=1680) */
  max-width: calc(100vw - 120px);
  margin: 0 auto;
  height: 505px;
}
.l-footer__lede {
  font-family: var(--font-jp-mincho);
  font-weight: 500;
  font-size: 1rem;             /* フッターlede本文: 16px */
  line-height: 40px;
  letter-spacing: 0.05em;
  color: var(--c-text);
}
.l-footer__logo {
  /* Figma: 親 lede 行ボックス (line 40) に対し logo top 32 → 負マージンでオーバーラップ (lede の実テキスト 16px とは視覚衝突しない) */
  margin-top: -8px;
  width: 443px;
  height: 113px;
}
.l-footer__logo img { width: 100%; height: 100%; object-fit: contain; }
.l-footer__name {
  margin-top: 8px;        /* Figma: logo bottom 145 → name top 153 = 8px */
  font-family: var(--font-jp-mincho);
  font-weight: 500;
  font-size: clamp(1rem, 0.97rem + 0.13vw, 1.125rem);   /* 施設名: SP16px→PC18px */
  line-height: 40px;
  letter-spacing: 0.05em;
  color: var(--c-text);
}
.l-footer__addr {
  margin-top: 6px;        /* Figma: name bottom 193 → addr top 199 = 6px */
  font-family: var(--font-jp-sans);
  font-size: clamp(0.875rem, 0.45rem + 0.88vw, 1rem);   /* 住所本文: SP14px→PC16px */
  line-height: 24px;      /* Figma leading-[normal] ≒ 1.5 → 24px */
  color: var(--c-text);
}
.l-footer__addr p { line-height: 24px; }

/* Kasai (Figma 133:12984): 221×82 ボックス (ロゴのみ内蔵) + テキストはボックス外側下 */
.l-footer__kasai {
  position: absolute;
  left: 0;
  top: 293px;             /* Figma frame top 365 - inner offset 72 = 293 */
  width: 220px;
  text-align: center;
}
.l-footer__kasai-frame {
  border: 1px solid var(--c-gray-line-3);
  background: var(--c-white);
  padding: 13px 0;        /* 13 + 55(img) + 14 = 82 (Figma 高さ) */
}
.l-footer__kasai img { display: inline-block; margin: 0 auto; height: 55px; }
.l-footer__kasai-text {
  margin-top: 6px;        /* Figma: box bottom 447 → text top 450 = 3px、視覚的に少し離して 6px */
  font-family: var(--font-jp-sans);
  font-size: 0.875rem;         /* Kasai注記: 14px */
  color: var(--c-black);
  line-height: 30px;
}
.l-footer__sns {
  position: absolute;
  top: 8px;
  left: 614px;
  display: flex;
  gap: 24px;
}
.l-footer__sns img { width: 32px; height: 32px; }
.l-footer__nav {
  position: absolute;
  top: 94px;
  left: 614px;
  font-family: var(--font-jp-mincho);
  font-weight: 500;
  font-size: clamp(0.875rem, 0.45rem + 0.88vw, 1rem);   /* フッターナビ: SP14px→PC16px */
  line-height: 30px;
  letter-spacing: 0.05em;
  color: var(--c-text);
  white-space: nowrap;
}
.l-footer__cta-title {
  position: absolute;
  top: 163px;
  left: 614px;
  font-family: var(--font-jp-mincho);
  font-weight: 500;
  font-size: clamp(1.125rem, 1.09rem + 0.13vw, 1.25rem);   /* フッターCTA見出し: SP18px→PC20px */
  line-height: 40px;
  letter-spacing: 0.05em;
  color: var(--c-text);
}
.l-footer__cta-row {
  position: absolute;
  top: 214px;
  left: 614px;
  display: flex;
  gap: 24px;
}
.l-footer__cta-btn {
  width: 220px;
  height: 56px;
  border-radius: 5px;
  font-family: var(--font-jp-mincho);
  font-weight: 500;
  font-size: 1.0625rem;        /* フッターCTAボタン: 17px (固定) */
  letter-spacing: 0.85px;
  color: var(--c-white);
  background: linear-gradient(to bottom, var(--c-primary), var(--c-primary-light));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: filter 0.2s ease;
}
.l-footer__cta-btn::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background: url(/assets/images/icons/arrow_right.webp) no-repeat center / contain;
  filter: invert(1);
  transition: transform 0.2s ease;
}
.l-footer__cta-btn--ghost::after { filter: none; }
.l-footer__cta-btn--ghost {
  color: var(--c-text);
  background: var(--c-white);
  border: 1px solid var(--c-gray-line-2);
}
.l-footer__cta-btn:hover { filter: brightness(1.05); }
.l-footer__cta-btn:hover::after { transform: translateY(-50%) translateX(4px); }   /* hover で矢印を右へ */
.l-footer__sublinks {
  position: absolute;
  top: 299px;
  left: 614px;
  display: flex;
  gap: 24px;
  font-family: var(--font-jp-mincho);
  font-weight: 500;
  font-size: clamp(0.875rem, 0.86rem + 0.07vw, 0.9375rem);   /* フッター補助リンク: SP14px→PC15px */
  letter-spacing: 0.75px;
  color: var(--c-text);
}
.l-footer__sublinks a { text-decoration: underline; }
.l-footer__copy {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(to bottom, var(--c-primary), var(--c-primary-light));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-en-serif);
  font-weight: 500;
  font-size: clamp(0.875rem, 0.45rem + 0.88vw, 1rem);   /* コピーライト: SP14px→PC16px */
  line-height: 32px;
  color: var(--c-white);
  letter-spacing: 0.05em;
}

/* ==========================================================
   B. Tablet 1024–1680 — based on Figma node 97:4086 (01_index_1440px)
   フレーム1440×9728。値はすべてFigmaから直接取得。
   ガター90px(content 1260)、ヘッダー1440幅
   ========================================================== */
@media (max-width: 1680px) and (min-width: 1024px) {
  :root {
    --inner-pad: 90px;        /* 1440設計のガター */
    --inner-max: 1260px;      /* content area = 1440 - 2*90 */
    --frame-w: 1440px;
  }

  /* CUISINE / EXPLORE / ROOMS: 1440設計では全て full bleed (Figma 97:5006/97:5002/97:4998) */
  .p-cuisine::before,
  .p-landscape::before,
  .p-rooms::before {
    left: 0 !important;
    right: 0 !important;
  }

  .l-inner {
    max-width: 1260px;
    padding: 0 0;
    width: calc(100vw - 180px);
  }

  /* --- Header (133:15106) - 1440基準/responsive 1024-1680 ---
     仕様 (Figma 133:15106 / 133:17172 / 133:17253 ベース):
     - inner: 100% 幅(白背景バーをビューポート横100%で表示)
     - 右側要素は定数 right offset で anchor (Figma 1024/1200/1440 全て同じ値)
       Tel: right=31.55, Lang: right=222 (w=82), Burger: right=328, CTA: right=392
       → Nav-right: 534 (= 392+110+32)
     - Nav は right-anchor + max-content (= items 単位幅) + max-width で改行制御
       → 右端は CTA から 32 固定、左端は items 幅と viewport によって伸縮(=logo との隙間が可変)
     - Logo width は piecewise 線形補間 (CSS変数 --logo-w)
       1024-1199: rapid scale (162→273.5)
       1200-1440: slow scale (274.167→325)
       1440+: 固定 325
     - Logo height は aspect-ratio: 325/83 で width に追従
     - Nav 折り返し制御の最小 logo-nav gap も piecewise (24→21 で線形補間)
     - Lang テキスト "Lang" を表示 (full hidden) */
  .l-header__inner {
    width: 100%;
    max-width: none;
    margin: 0;
    /* 1200-1440 セグメント (1440+ は clamp で 325 固定) */
    --logo-w: clamp(274.167px, calc(274.167px + (100vw - 1200px) * 50.833 / 240), 325px);
    /* 最小 logo-nav gap (max-width 計算用):
       Figma 想定値は 21-24px だが、browser 実描画では items が ~4% 広いため
       Figma 通りの wrap 分岐 (1024:4+3 / 1200:5+2 / 1440:単一行) を維持するには
       gap-min を縮小する必要がある (1024:13 / 1440:3 で線形補間)。
       実視認の logo-nav 余白も同値に圧縮されるトレードオフあり。 */
    --gap-min: clamp(3px, calc(13px - (100vw - 1024px) * 10 / 416), 13px);
  }

  /* Logo: width に変数を使用、height は aspect-ratio で計算 */
  .l-header__logo {
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: var(--logo-w);
    height: auto;
    aspect-ratio: 325 / 83;
  }

  /* Nav: right-anchor (CTA から 32 固定), max-content (items単位幅), max-width で改行制御 */
  .l-header__nav {
    left: auto;
    right: 534px;
    top: 41px;
    width: max-content;
    max-width: calc(100vw - var(--logo-w) - var(--gap-min) - 534px);
  }
  .l-header__nav-list {
    gap: 24px;
    row-gap: 13px;
    flex-wrap: wrap;
    align-items: center;
  }
  /* .l-header__nav-list li a の font-size は base 1rem で1本化 */

  /* 右側要素 - 定数 right offset (1024/1200/1440 共通) */
  .l-header__cta {
    left: auto;
    right: 392px;
    top: 32px;
    width: 110px; height: 40px;
    letter-spacing: 1.36px;     /* font-size は base 1.0625rem で1本化 */
  }
  .l-header__burger {
    left: auto;
    right: 328px;
    top: 32px;
    width: 40px; height: 40px;
  }
  /* Lang block (Figma 133:15096) - wrapper position only
     trigger (133:14274 範囲) コンテンツ内訳:
       padding-left:1 + globe(20) + 8 + Lang(~37) + 5 + chevron(10) = 81 (right 1余白) */
  .l-header__lang {
    left: auto;
    right: 222px;
    top: 38.234px;
  }
  /* Trigger gets [C]-tight metrics (override default gap:10) */
  .l-header__lang-trigger {
    width: 82px;
    gap: 0;
    padding: 0 0 8px 1px;
  }
  /* テキストを Lang に切替 */
  .l-header__lang-text--full { display: none; }
  .l-header__lang-text--short { display: inline; margin-right: 5px; }
  .l-header__lang-icon { width: 20px; height: 20px; margin-right: 8px; flex-shrink: 0; }
  .l-header__lang-text { line-height: 18px; }   /* font-size は base の clamp で1本化 */
  .l-header__lang-chevron { margin-left: 0; }
  .l-header__tel {
    left: auto;
    right: 31.55px;
    top: 20px;
    width: 166px; text-align: center;
  }
  .l-header__tel-num { line-height: 36px; }   /* font-size は base 2rem で1本化 */
  /* .l-header__tel-hours の font-size は base 0.875rem で1本化 */

  /* 1024-1199 narrow override: rapid scale (162→273.5 over 175px range) */
  @media (max-width: 1199px) {
    .l-header__inner {
      --logo-w: calc(162px + (100vw - 1024px) * 112.167 / 176);
    }
  }

  /* --- Hero (97:4925) - text at (130, 412) --- */
  .p-hero { height: 1000px; }
  .p-hero__copy {
    left: 130px; top: 412px;
    width: 571px;
  }
  .p-hero__title {
    letter-spacing: 12.6px;     /* font-size は base の clamp で1本化 */
  }
  .p-hero__title-en {
    letter-spacing: 1.4px;      /* font-size は base の clamp で1本化 */
  }
  .p-hero__lead { width: 394px; }

  /* Counter (97:4953) at (185.31, 932) - "1/3" since 3 visible at 1440 */
  .p-hero__counter { left: 130px; bottom: 0; }   /* p-hero__copy と左端を揃える */

  /* --- Notice (97:4924) - 840×60 at (600, 940) --- */
  .p-notice__inner {
    width: 840px;
    margin-right: calc((100vw - 1440px) / 2);
  }
  /* For viewport between 1024 and 1440, fallback */
  @media (max-width: 1440px) {
    .p-notice__inner { margin-right: 0; }
  }

  /* --- Sunset Service + Topics (97:4624 'コンポーネント 185 – 3') 1800×368 at (90,1120) --- */
  .p-topics__inner {
    width: 1800px;
    max-width: calc(100vw - 180px);   /* ≤1680 は左右90pxガター */
    margin: 0 auto;
    box-sizing: border-box;
  }

  /* --- Three Ways (97:4926/1440版) ---
     旧: 1260px固定+translateX センター(1280px未満で左右見切れ) → base の流体グリッドに一本化。
     幅・gap・ガターは base の min(1680px,87.5vw)/clamp が 1440 デザイン値(400/30/90)と一致する */
  .p-ways__row { margin-top: 60px; }   /* 1440デザイン: 見出し〜カードの余白は60 (1920は80) */
  .p-ways__heading { margin-left: 19px; }   /* num/heading の font-size は base の clamp で1本化 */
  /* lead の <br> 無効化は base 側の @media (max-width:1799px) に一本化済 */

  /* 筆記体: 01 (col--2) のみ中央寄せに切替 (列幅<520で base の left55.8% だと右端クリップ。
     顔の上=髪にかかる位置はOK)。02/03 は base の%指定を継承 */
  .p-ways__col--2 .p-ways__script { left: 50%; transform: translateX(-50%); }

  /* 列幅が縮む帯ではサブ写真の高さ150固定だと正方形化するため、比率(250:150)維持に切替 */
  @media (max-width: 1280px) {
    .p-ways__sub-img { height: auto; aspect-ratio: 5 / 3; }
  }

  /* --- Instagram (97:4995) - cards 280×280 alternate ---
     PC同様の自動マーキー(基底CSS)に統一。旧 .p-insta__tiles の絶対配置指定は
     実HTML(.p-insta__marquee/.p-insta__track)に存在しないクラスで、かつ
     .p-insta__tile:nth-child の left/top が relative 配置のタイルをずらして
     崩していたため撤去。上下スタガーは基底の align-self(odd=下/even=上)で再現される。
     見出し(.p-insta__head)は base の流体ガターに一本化 (旧 1260px固定+padding90 は
     p-ways と左端がズレ、1681px境界の位置ジャンプの原因だった) */

  /* --- Cuisine / Landscape: ≤1680 は画像を画面端フルブリードに (余白ステップ式の下段。
     グレー帯はこのブロック冒頭の !important が全面化) --- */
  .p-cuisine__title { line-height: 46px; }   /* font-size は base の clamp で1本化 */
  .p-cuisine__lead { line-height: 30px; }   /* font-size は base の clamp で1本化 */
  .p-cuisine__img-main { right: 0; }         /* 料理画像を右端へ */
  /* 丸クラスタ: contents_1440.png 実測 (2026-06-12) = 円は1920比 約0.91倍・画像はクラスタを
     避けて開始 (1440で画像左端760)。max() の右項 653 = クラスタ右端(365+0.91×267)+余白45 */
  .p-cuisine__cluster { transform: scale(0.91); transform-origin: top left; }
  .p-cuisine__cluster-4 { top: 423px; }      /* 苺の高さはデザインでは縮小せずほぼ同位置 (0.91×423=実測rel385) */
  .p-cuisine__img-main {
    left: calc(var(--cu-copy-left) + max(var(--cu-copy-w) + var(--cu-gap), 653px));
  }
  .p-landscape__title { line-height: 46px; }   /* title/em は base の clamp で1本化 */
  .p-landscape__lead { line-height: 30px; }   /* font-size は base の clamp で1本化 */
  .p-landscape__img { left: 0; }               /* 景観画像を左端へ */

  /* --- Rooms & Onsen (97:4998) - 1440 full bleed - 470×540 + 470×540 --- */
  /* rooms ≤1680: 写真を画面端フルブリードに (余白ステップ式の下段)。
     内側オフセットは 250 (1440 で旧固定値 img470/copy534/vertical902 と同値) */
  .p-rooms__img-l { left: 0; right: calc(50% + 250px); }
  .p-rooms__img-r { left: calc(50% + 250px); right: 0; }
  .p-rooms__title { line-height: 46px; }   /* font-size は base の clamp で1本化 */
  .p-rooms__lead { line-height: 30px; }   /* font-size は base の clamp で1本化 */
  .p-rooms__btns { gap: 12px; }
  .p-rooms__btn { width: 164px; height: 46px; }
  .p-rooms__vertical { top: 131px; height: 202px; left: calc(50% + 182px); }

  /* --- Plan (97:5017) - 1261 wide at (90, 5930), 4 cards but only 3 visible --- */
  /* .p-plan__inner は base(width:1680px / max-width:calc(100vw-120px)=ガター60px)を流用。
     旧 width:1260px / max-width:calc(100vw-180px)(ガター90px)指定を撤去し、
     1680px 境界で inner 幅・ガターが変わって表示がカクつく問題を解消(≥1681 と連続)。 */
  .p-plan__title-jp { line-height: 50px; }   /* title-en/jp は base の clamp で1本化 */
  .p-plan__nav { right: 60px; top: 65.5px; }   /* サイドボタン重なり回避(旧 8px) */

  /* .p-plan__grid(ビューポート) / .p-plan__track(transformトラック) は base を流用。
     タブレットも 4枚左寄せ・右は画面外・無限ループ(JS)。カード幅のみ下で指定。 */

  .p-plan__card,
  .p-plan__card-img {
    width: 380px;
  }
  .p-plan__card-img { height: 380px; }

  .p-plan__filter {
    width: 1260px;
    max-width: calc(100vw - 180px);
    height: 112px;
    padding: 0;
  }
  .p-plan__filter-label { margin-left: 109px; margin-right: 48px; }   /* font-size は base の clamp で1本化 */
  .p-plan__filter-btn { width: 260px; height: 56px; }                 /* font-size は base 1.0625rem で1本化 */

  /* --- Access: 2026-06-10 hoshi 指示でタブレット切替を 1680→1580 に変更。
     ルールはこのブロック直後の専用 @media (max-width:1580px) へ移動 (このブロックの他セクションは 1680 のまま)。
     1581〜1680px は base (1920 design) の見た目になる。 --- */

  /* --- News: 旧 1260px固定+380px/40px は撤去 (v47)。base の流体 (min(1680px,87.5vw)/480px/gap90)
     に一本化し、左カラムは .p-news__list-wrap の min-width:500px が下限を担保 --- */

  /* --- Footer hero (97:4087) 1440×654 --- */
  .p-footerHero__copy {
    right: calc((100vw - 1440px) / 2 + 156px);
    width: 508px;
  }
  @media (max-width: 1440px) {
    .p-footerHero__copy { right: 156px; }
  }

  /* --- Footer (97:4845) コンポーネント 188 – 3 - 1440×657 --- */
  .l-footer__inner {
    width: 1260px;
    max-width: calc(100vw - 180px);
  }
}

/* ==========================================================
   B-1b. ヘッダーナビが2段になる帯の調整 (SAGYO_FORM_WEB-956 / 2026-08-19)
   ナビは 1024〜1463px で2段に折り返す。上のブロックは top:41px 固定なので
   2段目がヘッダー白帯(100px)からはみ出しメイン写真に重なっていた。
   - top:50% + translateY(-50%) = ヘッダー内で上下中央。1段/2段どちらでも収まるので
     折り返し境界(1463px)とこのメディアクエリ上限(1466px)のズレで破綻しない
   - --gap-min は Figma 想定値の 24px へ戻す（上のブロックでは 3〜13px まで圧縮していた。
     li の line-height を 1 に統一して2段が崩れなくなったため戻せる。1024px幅で3段になる境界は
     29px と実測済み＝5px の余裕あり）
   - 横位置 right:534px（CTA から 32px）は設計定数なので触らない
   ========================================================== */
@media (min-width: 1024px) and (max-width: 1466px) {
  .l-header__inner {
    --gap-min: 24px;
  }
  .l-header__nav {
    top: 50%;
    transform: translateY(-50%);
  }
}

/* ==========================================================
   B-2. Access 専用タブレット帯 (2026-06-10 hoshi 指示で 1680→1580 に変更。
   他セクションは上の 1680 ブロックのまま。1581〜1680px の ACCESS は base=1920 design)
   ========================================================== */
@media (max-width: 1580px) and (min-width: 1024px) {
  /* --- Access (97:4453+97:5036) - bg 1440×804 at (0,6937), content at (90, 7161) --- */
  .p-access {
    width: 100%;
  }
  .p-access__inner {
    width: 1440px;
    max-width: 100%;
    margin: 0 auto;
    height: 100%;
  }
  .p-access__title-en {
    left: 90px; top: 202px;   /* 224→202: design PNG (01_index_1440px) 実測 2026-06-10 */
    /* font-size は base の clamp で1本化 */
  }
  .p-access__title-jp {
    left: 90px; top: 283px;
    line-height: 50px;          /* font-size は base の clamp で1本化 */
  }
  .p-access__lead {
    left: 90px; top: 360px;
    line-height: 30px;          /* font-size は base の clamp で1本化 */
  }
  .p-access__btn {
    left: 90px; top: 584px;
    width: 400px; height: 57px;
  }

  /* Circles 143×143 at (432/591, 7062 = 125 from access top) */
  .p-access__circle { width: 143px; height: 143px; }
  .p-access__circle--1 { left: 432px; top: 125px; }
  .p-access__circle--2 { left: 591px; top: 125px; }

  /* Map: 幅/right は base の fluid ルールを継承。下基準アンカーだけタブレット帯用に上書き
     (2026-06-10 hoshi 指示: ロゴ吹き出しと円写真の重なり回避) */
  .p-access__map {
    top: auto;
    bottom: 6.8vw;
  }
}

/* ==========================================================
   B-3. Footer 中間幅 1024–1480 — 線形化(はみ出し防止)
   ・base/タブレットの footer 右カラム(sns/nav/cta/sublinks/subnav)は
     1440設計の position:absolute; left:614px 固定座標。inner が ~1322px 未満
     (viewport ≲1480)で右へはみ出すため、この帯は SP 同様に中央寄せ1カラムへ
     線形化する。≥1481 は2カラム維持・≤1023 は SP レイアウトのまま。
   ========================================================== */
@media (min-width: 1024px) and (max-width: 1480px) {
  .l-footer { height: auto; padding: 64px 0 0; }
  .l-footer__inner {
    width: auto;
    max-width: calc(100vw - 120px);
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .l-footer__logo { margin-left: auto; margin-right: auto; }
  .l-footer__kasai,
  .l-footer__sns,
  .l-footer__nav,
  .l-footer__cta-title,
  .l-footer__cta-row,
  .l-footer__sublinks,
  .l-footer__subnav {
    position: static;
    left: auto;
    top: auto;
  }
  .l-footer__sns { margin: 36px auto 0; justify-content: center; }
  .l-footer__nav { margin: 28px auto 0; white-space: normal; }
  .l-footer__cta-title { margin: 28px auto 0; }
  .l-footer__cta-row { margin: 16px auto 0; justify-content: center; flex-wrap: wrap; }
  .l-footer__sublinks { margin: 22px auto 0; justify-content: center; flex-wrap: wrap; }
  .l-footer__subnav { margin: 28px auto 0; justify-content: center; }
  .l-footer__kasai { order: 99; margin: 40px auto 0; }
  .l-footer__copy { position: static; margin-top: 56px; }
}

/* ==========================================================
   C. SP — based on Figma node 97:5045 (sp_index)
   フレーム390×9384。値はすべてFigmaから直接取得。
   ========================================================== */
@media (max-width: 1023px) {
  :root {
    --inner-pad: 25px;
    --inner-max: 100vw;
    /* SP design baseline = 390px。1 design-px = (1/390 * 100)vw。
       Figma の任意px値 N は calc(N * var(--sp-vw)) で viewport 連動値に変換 */
    --sp-vw: calc(100vw / 390);
  }

  /* CUISINE / EXPLORE / ROOMS: SP も full bleed */
  .p-cuisine::before,
  .p-landscape::before,
  .p-rooms::before {
    left: 0 !important;
    right: 0 !important;
  }

  .u-pc { display: none !important; }
  .u-sp { display: block; }

  /* SP 全体幅の正常化:
     ベース(PC)の各セクション内側に効いている max-width: calc(100vw - 120px / -60px)
     + margin:0 auto が SP でもリセットされず、390px より広い端末で
     コンテンツが中央に寄って左右に余白が出ていた。SP は各セクションの
     padding で内側余白を取り、コンテナは全幅にする。 */
  .p-topics__inner,
  .p-ways__head,
  .p-ways__row,
  .p-insta__head,
  .p-rooms__inner,
  .p-plan__inner,
  .p-plan__filter,
  .p-news__inner,
  .l-footer__inner {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  body {
    /* Push body down to clear bottom CTA bar */
    padding-bottom: 56px;
  }

  /* --- Header (sp_index 129:11043 group, 56×390 baseline) ---
     Figma 構造: x=0-220 ロゴ白 (rounded-br:6) / x=220-278 透明 / x=278-334 ティール#465b64 (rounded-bl:6) / x=334-390 MENU白
     flex 構造 + margin-left:auto で fluid 化:
       [logo: 220] ━━ flex spacer ━━ [LANG: 56, order:1] [MENU: 56, order:2]
     全寸法 calc(N * var(--sp-vw)) で viewport 連動 (Figma 390基準) */
  .l-header { position: fixed; top: 0; }
  .l-header__inner {
    position: static;
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    height: calc(56 * var(--sp-vw));
    margin: 0;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }
  .l-header__logo {
    position: static;
    flex: 0 0 calc(220 * var(--sp-vw));
    width: calc(220 * var(--sp-vw));
    height: calc(56 * var(--sp-vw));
    transform: none;
    background: var(--c-white);
    border-bottom-right-radius: calc(6 * var(--sp-vw));
  }
  .l-header__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: calc(12 * var(--sp-vw)) center;
    padding: calc(4 * var(--sp-vw)) 0;
  }
  .l-header__nav { display: none; }
  .l-header__cta { display: none; }
  .l-header__tel { display: none; }

  /* LANG パネル (Figma 長方形 2506: x=278, w=56可視, h=56, bg #465b64, rounded-bl:6)
     margin-left:auto で右寄せ、order:1 で MENU の左隣 */
  .l-header__lang {
    position: static;
    flex: 0 0 calc(56 * var(--sp-vw));
    width: calc(56 * var(--sp-vw));
    height: calc(56 * var(--sp-vw));
    order: 1;
    margin-left: auto;
    background: #465b64;
    border-bottom-left-radius: calc(6 * var(--sp-vw));
  }
  .l-header__lang-trigger {
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    /* Figma: icon@y=10.375 (top=10.375), text@y=33 (gap=33-10.375-20=2.625), text bottom=33+16=49 (bottom余白=7) */
    padding: calc(10.375 * var(--sp-vw)) 0 0 0;
    gap: calc(2.625 * var(--sp-vw));
    margin: 0;
    border-bottom: none;
  }
  .l-header__lang-icon {
    width: calc(20 * var(--sp-vw));
    height: calc(20 * var(--sp-vw));
    /* language.webp(濃色globe) を SP の濃色 LANG ボックスで白く見せる (旧SVG白strokeの代替) */
    filter: brightness(0) invert(1);
  }
  /* SP で表示する短縮テキスト "Lang" → CSSで大文字化して "LANG" 表示 */
  .l-header__lang-text--full { display: none; }
  .l-header__lang-text--short {
    display: inline;
    margin: 0;
  }
  .l-header__lang-text {
    font-family: var(--font-en-serif);
    font-weight: 500;
    /* font-size は base の clamp で1本化(SP=11px) */
    line-height: calc(16 * var(--sp-vw));
    letter-spacing: calc(0.55 * var(--sp-vw));
    color: var(--c-white);
    text-transform: uppercase;
  }
  .l-header__lang-chevron { display: none; }

  /* SP も Language dropdown を表示 (PC と同じ動作)
     base の left:50%; transform:translateX(-50%) は SP では右端ボタンが
     画面外にはみ出るので、右端揃え (right:0) に変更。
     親 .l-header__lang は position:static (上で設定) のままだと
     absolute の基準にならないので、ここで relative に上書きする。
     ⚠ position:relative にすると PC ベース (.l-header__lang { top: 39.24px; left: 1323px; })
     の top/left が "相対オフセット" として効いてしまい LANG ボタンが画面外へ飛ぶ。
     よって top/left/right も auto で明示的に打ち消す必要がある。 */
  .l-header__lang {
    position: relative;        /* base の static を上書きして dropdown の基準に */
    top: auto;                 /* PC ベース top:39.24px を打ち消し */
    left: auto;                /* PC ベース left:1323px を打ち消し (これが無いと flex 位置 + 1323 にズレる) */
    right: auto;
  }
  .l-header__lang-menu {
    display: block;            /* 上書き済 base の display:none を打ち消す */
    top: calc(100% + 1px);     /* LANG ボタン直下 (header の下端) */
    left: auto;                /* base の left:50% を打ち消す */
    right: 0;                  /* LANG ボタンの右端に揃える */
    transform: translateY(-6px);  /* base の translateX(-50%) を含む値を打ち消す */
    min-width: calc(160 * var(--sp-vw));
    border-radius: calc(4 * var(--sp-vw));
    padding: calc(4 * var(--sp-vw)) 0;
  }
  .l-header__lang.is-open .l-header__lang-menu {
    transform: translateY(0);  /* base の translateX(-50%) translateY(0) を打ち消す */
  }
  .l-header__lang-menu a {
    padding: calc(13 * var(--sp-vw)) calc(20 * var(--sp-vw));
    /* font-size は base 0.875rem で1本化 */
  }

  /* Burger/MENU (Figma 長方形 2505: x=334, w=56, h=56, bg白) order:2 で右端
     内身: 3本バー (22×1 #333, y=14/20/26 = gap 5px) + "MENU" text (Cormorant Infant 12px #333, y=33) */
  .l-header__burger {
    position: static;
    flex: 0 0 calc(56 * var(--sp-vw));
    width: calc(56 * var(--sp-vw));
    height: calc(56 * var(--sp-vw));
    top: auto;
    left: auto;
    order: 2;
    background: var(--c-white);
    border-radius: 0;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 0;
    padding: calc(14 * var(--sp-vw)) 0 0 0;
  }
  .l-header__burger span {
    background: var(--c-text-sub); /* #333 */
    width: calc(22 * var(--sp-vw));
    height: calc(1 * var(--sp-vw));
    margin: 0 0 calc(5 * var(--sp-vw)) 0;
  }
  .l-header__burger span:last-of-type {
    margin-bottom: calc(6 * var(--sp-vw)); /* バー3本目→"MENU"テキスト間 */
  }
  .l-header__burger::after {
    content: "MENU";
    font-family: var(--font-en-serif);
    font-weight: 500;
    font-size: 0.875rem;          /* MENUラベル(装飾英字): 12px→14px */
    line-height: calc(17 * var(--sp-vw));
    color: var(--c-text-sub);
    letter-spacing: 0.05em; /* relative to font-size, auto-scales */
    margin: 0;
  }


  /* --- Hero (sp_index 129:10089, 390×700 baseline) ---
     Figma: copy@(37, 374) / title 3行 26px ls 9.1px line-height 38 (114h=3×38)
            title-en@(37, 495) 16px ls 0.8px / lead@(38, 538) 15px line-height 25 / counter@(92, 617) 276×77
     全寸法 calc(N * var(--sp-vw)) で viewport 連動 (Figma 390基準)。Hero高さも幅連動で
     アスペクト比 (390:700) 保持。Hero copy/counter は overlay (重なり) として position:absolute 維持。 */
  .p-hero {
    width: 100%;
    height: calc(700 * var(--sp-vw));   /* フォールバック (svh 非対応ブラウザ) */
    /* 縦が短い端末でも counter まで見えるよう viewport 高さでキャップ (下部CTAバー56px分を確保) */
    height: min(calc(700 * var(--sp-vw)), calc(100svh - 56px));
    padding-top: calc(56 * var(--sp-vw));
    box-sizing: border-box;
  }
  .p-hero__slider, .p-hero__slide {
    height: calc(700 * var(--sp-vw));
  }

  /* Hero copy overlay: width:auto + left/right で content領域画定。
     Figma 想定 right=37 では Browser 実描画で lead "遮るもの〜瞬間、" (自然幅 327.61px) が
     折り返してしまうため、right=18 に圧縮して 21文字を1行に収める (font も vw連動なので vw=390 で完全一致) */
  .p-hero__copy {
    left: calc(37 * var(--sp-vw));
    right: calc(18 * var(--sp-vw));
    /* copy も counter と同じ下端基準にして「セット」で固定。
       縦短端末で hero が svh キャップされても copy↔counter の間隔が一定＝かぶらない */
    top: auto;
    bottom: calc(98 * var(--sp-vw));   /* counter(下端13 + 高70 = 83)の上に gap15 */
    width: auto;
  }
  .p-hero__title {
    /* font-size は base の clamp で1本化(SP=26px) */
    line-height: calc(38 * var(--sp-vw)); /* Figma 3行で 114px (38×3) */
    letter-spacing: calc(9.1 * var(--sp-vw));
    white-space: normal;
  }
  /* SP は3行構成 ("小豆島・"/"夕陽の特等席で、"/"心が満ちる島時間。)
     <b class="p-hero__title-prefix"> を block 化して span 1 を 2行に分割 */
  .p-hero__title-prefix { display: block; }
  .p-hero__title-en {
    margin-top: calc(7 * var(--sp-vw)); /* Figma: title 終端 y=488 → en@y=495 = 7px */
    /* font-size は base の clamp で1本化(SP=16px) */
    line-height: calc(19 * var(--sp-vw));
    letter-spacing: calc(0.8 * var(--sp-vw));
    white-space: normal;
  }
  .p-hero__lead {
    margin-top: calc(23 * var(--sp-vw)); /* Figma: en 終端 y≈515 → lead@y=538 = 23px */
    width: 100%;
    font-size: 0.9rem;        /* SP: 本文を少し小さく (hoshi 指定 2026-06-17) */
    line-height: calc(25 * var(--sp-vw));
  }

  /* Side menu hidden on SP (bottom CTA bar takes over) */
  .l-sidemenu { display: none; }

  /* Counter (Figma グループ 49856: x=92.32, y=617, w=276, h=77) */
  .p-hero__counter {
    left: calc(37 * var(--sp-vw));    /* p-hero__copy(left:37) の頭に左寄せ揃え (PCと同様) */
    top: auto;
    bottom: calc(13 * var(--sp-vw));  /* 下端基準: hero を svh でキャップしても counter が必ず見える */
    width: auto;
    height: calc(70 * var(--sp-vw));
  }
  .p-hero__counter-num {
    color: var(--c-cream);
    /* font-size は base 1rem で1本化(SP 15px→16px) */
    line-height: calc(18 * var(--sp-vw));
    letter-spacing: calc(0.75 * var(--sp-vw));
  }

  /* --- Bottom CTA bar (97:5997) - fixed 390×56 - お電話/日程/プラン --- */
  .p-spcta {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: 56px;
    display: flex;
    z-index: 99;
  }
  .p-spcta__btn {
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 2px;
    color: var(--c-white);
    font-family: var(--font-jp-mincho);
    font-weight: 500;
    font-size: 1rem;             /* SP底CTAボタン: 15px→16px */
    letter-spacing: 0.75px;
  }
  .p-spcta__btn--tel {
    flex: 0 0 80px;
    width: 80px;
    background: linear-gradient(to bottom, #ec7d5f, #ffb09b);
    font-family: var(--font-jp-sans);
    font-size: 0.875rem;         /* SP底CTA「お電話」: 11px→14px */
    letter-spacing: 0.55px;
    line-height: 22px;
  }
  .p-spcta__btn--tel svg { width: 20px; height: 27px; }
  .p-spcta__btn--date {
    flex: 1;
    background: linear-gradient(to bottom, #2a88b2, #48a0c8);
  }
  .p-spcta__btn--plan {
    flex: 1;
    background: linear-gradient(to bottom, #3b69ac, #5486d1);
  }

  /* --- Notice card (sp_index 129:10122) — 358×127 at (16, 685), 全角丸 r=6 ---
     Hero と 15px overlap (Hero h=700, notice top y=685)
     Figma 構造: row1 icon+label を card 中央に、row2 date と row3 text は左 22px 寄せ
     全寸法 calc(N * var(--sp-vw)) で viewport 連動。
     内部要素は overlay (decorative) として position: absolute (Figma 相対座標) */
  .p-notice {
    position: relative;
    margin-top: calc(-15 * var(--sp-vw));
    padding: 0 calc(16 * var(--sp-vw));
    z-index: 6;
  }
  .p-notice__inner {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    height: calc(127 * var(--sp-vw));
    padding: 0;
    border-radius: calc(6 * var(--sp-vw));
    background: var(--c-white);
    box-shadow: 0 calc(3 * var(--sp-vw)) calc(24 * var(--sp-vw)) rgba(0, 0, 0, 0.08);
  }
  .p-notice__icon {
    position: absolute;
    left: calc(103.07 * var(--sp-vw));   /* Figma x=119.07 − card x=16 */
    top: calc(18 * var(--sp-vw));        /* Figma y=703 − card y=685 */
    width: calc(28.868 * var(--sp-vw));
    height: calc(29.333 * var(--sp-vw));
    margin: 0;
  }
  .p-notice__icon::after {
    /* font-size は base 1rem で1本化 */
    letter-spacing: 0.05em;
    /* base の top:56% / left:50% / transform translate を維持 (視覚中心調整) */
  }
  .p-notice__label {
    position: absolute;
    left: calc(138 * var(--sp-vw));      /* Figma x=154 − 16 */
    top: calc(19 * var(--sp-vw));        /* Figma y=704 − 685 */
    margin: 0;
    /* font-size は base 1rem で1本化 */
    line-height: calc(23 * var(--sp-vw));
    letter-spacing: 0.05em;
    flex-basis: auto;
    white-space: nowrap;
  }
  .p-notice__date {
    position: absolute;
    left: calc(22 * var(--sp-vw));       /* Figma x=38 − 16 */
    top: calc(54 * var(--sp-vw));        /* Figma y=739 − 685 */
    margin: 0;
    /* font-size は base 1.125rem で1本化(SP=18px) */
    line-height: calc(22 * var(--sp-vw));
    letter-spacing: 0;
    color: #111;
    flex-basis: auto;
    white-space: nowrap;
  }
  .p-notice__text {
    position: absolute;
    left: calc(22 * var(--sp-vw));
    top: calc(83 * var(--sp-vw));        /* Figma y=768 − 685 */
    margin: 0;
    /* font-size は base 1rem で1本化 */
    line-height: calc(19 * var(--sp-vw));
    letter-spacing: 0;
    color: #111;
    flex-basis: auto;
    white-space: nowrap;
  }
  .p-notice__arrow {
    display: none;
  }

  /* --- Sunset Service card (97:5853) - 358×272 at (16, 844) --- */
  .p-topics { padding-top: 0; }
  .p-topics__inner {
    width: 100%;
    height: auto;
    padding: 0;
  }
  .p-sunset {
    position: relative; top: auto; left: auto;
    width: calc(100% - 32px);
    height: auto;
    margin: 32px 16px 0;   /* notice との間に余白 (CB1) */
    border-radius: 6px;
  }
  .p-sunset__head {
    height: auto;          /* 固定76pxだと和文2行時に英字サブが隠れる → auto で両方表示 (CB1) */
    min-height: 76px;
    padding: 14px 25.75px 16px;
  }
  .p-sunset__head-jp { line-height: 24px; }                  /* font-size は base の clamp で1本化(SP=18px) */
  .p-sunset__body { padding: 24px 24px; }
  .p-sunset__time-row {
    gap: 16px;
    margin-top: 0;
    align-items: center;
  }
  .p-sunset__time-label {
    line-height: 20px;          /* font-size は base の clamp で1本化(SP=16px) */
    width: auto;
    white-space: nowrap;   /* 改行は <br class="u-spbr"> のみ。語中での折返しを防ぐ */
  }
  .u-spbr { display: inline; }   /* SP: 「4月の」/「日の入り時刻」で改行 */
  .p-sunset__time { line-height: 1; letter-spacing: 2.8px; }   /* font-size は base の clamp で1本化(SP=56px) */
  .p-sunset__lead {
    margin-top: 18px;
    line-height: 22px;          /* font-size は base の clamp で1本化(SP 13px→14px) */
  }

  /* --- Topics (97:5990) - 798 wide at (25,1161), cards 250×206 --- */
  .p-topics__head {
    position: relative;
    top: auto; left: auto;
    margin: 50px 0 0;
    padding: 0 25px;
    align-items: baseline;
    gap: 12px;
  }
  .p-topics__title-en { line-height: 1; }   /* title-en/jp の font-size は base(clamp/1.125rem)で1本化 */

  /* TOPICS バナーカルーセル: PC は absolute(left:552px) で見出しの右に置く配置。
     SP ではリセットして見出し下に全幅で流す（横スクロール自動カルーセル、次カードが右に覗く）。 */
  .p-topicsBnr {
    position: relative;
    top: auto; left: auto; right: auto;
    width: 100%;
    height: auto;
    margin-top: 24px;
    padding-left: 25px;
    box-sizing: border-box;
  }
  .p-topicsBnr__viewport, .p-topicsBnr__track { height: auto; }
  /* PC(340:280)と同じ表示比率に。固定200pxだと画像上下が切れていた (CB2) */
  .p-topicsBnr__slide { flex: 0 0 300px; height: auto; aspect-ratio: 340 / 280; }
  .p-topics__nav {
    position: relative;
    top: auto; right: auto;
    margin: 30px auto 0;
    padding: 0 25px;
    justify-content: center;
  }
  .p-topics__rail {
    position: relative;
    top: auto; left: auto;
    width: 100%;
    margin: 16px 0 0;
    padding: 0 25px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 24px;
    scrollbar-width: none;
  }
  .p-topics__rail::-webkit-scrollbar { display: none; }
  .p-topics__card { flex: 0 0 250px; width: 250px; height: 206px; }
  /* topics カードの font-size(lg/sm/raku-main/bar-en) は base の clamp で1本化 */

  /* --- Three Ways title (97:5968) - 305×132 at (25, 1533) - 3 lines --- */
  .p-ways { padding: 60px 0 40px; }
  .p-ways__head {
    width: 100%;
    padding: 0 25px;
    height: auto;
  }
  .p-ways__title {
    line-height: 36px;          /* font-size は base の clamp で1本化 */
    letter-spacing: 0.05em;
  }
  .p-ways__sub {
    margin-top: 28px;           /* font-size(em/sub) は base の clamp で1本化 */
  }

  /* --- 3 Ways content (sp_index_02) - VERTICAL STACK (縦積み)。
     旧: 横スクロールカルーセル(340px×3) → デザイン準拠で縦積みに変更 (2026-06-08)。
     順番は DOM のまま 01家族三世代 / 02大人の島時間 / 03ペットと泊まる。 --- */
  .p-ways__row {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 32px 0 0;
    padding: 0 25px;
    grid-template-columns: none;
    gap: 48px;
    overflow: visible;
  }
  .p-ways__col {
    flex: none;
    width: 100%;
  }
  .p-ways__heading { margin-left: 18px; }   /* num/heading の font-size は base の clamp で1本化 */
  .p-ways__main {
    width: 100%; height: 220px;
    margin-top: 16px;
  }
  .p-ways__lead {
    margin-top: 22px;
    width: 100%;
    line-height: 26px;          /* font-size は base 1rem で1本化(SP 14px→16px) */
  }
  .p-ways__col--3 .p-ways__lead { color: var(--c-text-sub); }

  .p-ways__sub-imgs {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 18px;
  }
  .p-ways__sub-img { width: 100%; height: 105px; }

  .p-ways__col--1 .p-ways__script { top: 40px; left: 8vw; color: var(--c-cream); text-shadow: 0 1px 4px rgba(0,0,0,0.2); }
  .p-ways__col--2 .p-ways__script { top: 8px; left: unset; right: 6vw; color: var(--c-cream); text-shadow: 0 1px 4px rgba(0,0,0,0.2); }
  .p-ways__col--3 .p-ways__script { top: 33px; left: 13vw; transform: none; color: var(--c-white); }   /* transform:none = base の中央寄せ translateX を打ち消し。font-size は base の clamp で1本化 */

  /* --- Instagram (97:5967) - title at (25, 2322), 1776 wide overflow scroll --- */
  .p-insta { margin-top: 0; padding: 24px 0 0; }   /* base の margin-top:75.5px を打ち消し、過ごし方との余白を詰める */
  /* SP見出し: 「Instagram」/「@handle」2段 → 「あなただけの島時間」+曲線ライン を独立行 (デザイン準拠) */
  .p-insta__head {
    width: 100%;
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 25px;
    gap: 16px;
  }
  .p-insta__title {
    line-height: 1.15;           /* 行高を詰めて「Instagram」と「@handle」の間隔を縮める。font-size は base の clamp で1本化 */
    flex-wrap: wrap;             /* @handle を Instagram の下段へ */
  }
  .p-insta__title svg { width: 20px; height: 20px; }
  .p-insta__handle {
    flex-basis: 100%;
    margin-left: 0;
    margin-top: 2px;
    font-size: 0.875rem;        /* SP は 14px 維持 (base はデザイン準拠で 18px に変更済) */
  }
  .p-insta__sub-wrap {
    width: calc(100% + 25px);    /* head の右padding(25px)を食って画面右端まで広げる */
    align-items: center;
    gap: 14px;
    margin-right: 0;             /* base の -16px(PC装飾はみ出し)を打ち消し */
    /* overflow:hidden は装飾の丸の上端まで切ってしまうため外す。
       装飾右端は body 幅(390)で自然に収まるのでクリップ不要 */
  }
  .p-insta__sub {
    flex-basis: auto;
    margin-top: 0;
    letter-spacing: 0.2em;       /* font-size は base の clamp で1本化(SP=16px) */
    white-space: nowrap;
    flex-shrink: 0;
  }
  .p-insta__deco {
    width: 150px;
    height: auto;
    flex-shrink: 0;
    margin-bottom: 0;
    margin-top: 0;                 /* base の -50px(PC用持ち上げ)を打ち消し */
    margin-left: auto;             /* sub の右余白を吸収し、装飾を画面右端へ寄せる */
    transform: translateY(-24px);  /* デザイン(insta_sp)に合わせ、丸を「あなただけの島時間」より上へ持ち上げる */
  }

  /* Instagram: SP も PC 同様に右→左へゆっくり自動マーキー (2026-06-08, hoshi 指示)。
     旧: 手動スワイプの横スクロール帯 → 自動マーキーに戻す。タイルは小さめ＋上下段差。
     クローン(aria-hidden)はシームレスループに必須なので表示する。
     keyframe insta-marquee は (--tile-w + --tile-gap) × --tile-count 進むので、
     SP 用に --tile-w / --tile-gap / --tile-stagger を上書きすれば移動量も自動で揃う。 */
  .p-insta__marquee {
    margin-top: 24px;
    overflow: hidden;
    --tile-w: 240px;
    --tile-gap: 16px;
    --tile-stagger: 40px;
  }
  .p-insta__track {
    animation: insta-marquee var(--marquee-duration) linear infinite;
    width: max-content;
    height: calc(var(--tile-w) + var(--tile-stagger));
    gap: var(--tile-gap);
    padding: 0;
    overflow: visible;
    align-items: stretch;
  }
  .p-insta__tile {
    position: relative;
    flex: 0 0 var(--tile-w);
    width: var(--tile-w);
    height: var(--tile-w);
    left: auto;
    top: auto;
    border-radius: 8px;
  }
  /* 上下段差 (奇数=下/偶数=上、デザイン準拠) */
  .p-insta__tile:nth-child(odd)  { align-self: flex-end; }
  .p-insta__tile:nth-child(even) { align-self: flex-start; }

  /* --- Cuisine (97:5948) - 390×668 full bleed at (-22, 2787) --- */
  .p-cuisine { padding: 0; margin-top: 60px; }
  .p-cuisine::before { right: 0; }   /* SP は薄グレー背景を全幅に(PCは右60pxガター) */
  /* SP: 写真上→テキスト下 (PNG準拠)。DOM順は copy→cluster→img-main なので
     flex + order で並べ替え (DOM不変・PC不変)。cluster は写真下端右に straddle させ本文に重ねない。 */
  .p-cuisine__inner {
    width: 100%;
    height: auto;
    padding: 0 0 40px;   /* ボタン下に余白 */
    background: transparent;   /* 薄グレーの ::before を見せる(白で隠していたのを解除) */
    display: flex;
    flex-direction: column;
  }
  .p-cuisine__vertical {
    position: absolute;
    top: 270px; left: 0;
    width: 22px; height: 197px;
    /* font-size は base の clamp で1本化(SP=14px) */
  }
  /* Image at (0, 2787 = 0 from top) */
  .p-cuisine__img-main {
    position: relative;
    top: auto; left: auto; right: auto;   /* PCのright:120を打ち消し→全幅化(右余白解消) */
    width: 100%; height: 251px;
    margin: 0;
    border-radius: 0;
    order: 1;
  }
  .p-cuisine__copy {
    position: relative;
    top: auto; left: auto;
    width: calc(100% - 90px);
    margin: 30px 0 0 45px;
    order: 2;
  }
  .p-cuisine__title { line-height: 32px; }   /* font-size は base の clamp で1本化 */
  .p-cuisine__lead {
    margin-top: 32px;
    line-height: 26px;          /* font-size は base の clamp で1本化(SP=14px) */
  }
  .p-cuisine__btn {
    width: 199px; height: 46px;
    margin-top: 32px;
  }
  /* SP: 丸サムネは「いちご(cluster-4)」のみを「お食事の詳細を見る」ボタンの右に円形で配置 (PNG準拠)。
     steak/fish/tempura は非表示。本文には重ねない */
  .p-cuisine__cluster {
    position: absolute;
    left: auto; right: 25px;
    top: auto; bottom: 40px;   /* お食事ボタン行の右へ(旧 top:205px=写真下端) */
    width: 88px; height: 88px;
  }
  .p-cuisine__cluster img { border-radius: 50%; }
  .p-cuisine__cluster-1,
  .p-cuisine__cluster-2,
  .p-cuisine__cluster-3 { display: none; }
  .p-cuisine__cluster-4 {
    width: 88px; height: 88px;
    left: 0; top: 0;
  }

  /* --- Landscape (97:5944) - 390×760 at (-22, 3479) --- */
  .p-landscape { padding: 0; margin-top: 40px; }   /* SP 上余白を詰める(PCは80px) */
  /* SP: ①の全体幅正常化の漏れ。base の margin:0 0 0 60px が残り inner が右にずれて
     本文が右端に達していた → margin/max-width をSPでリセット */
  .p-landscape__inner {
    width: 100%;
    max-width: 100%;
    height: auto;
    padding: 0 0 40px;   /* ボタン下に余白 */
    margin: 0;
  }
  .p-landscape__img {
    position: relative;
    top: auto; left: auto; right: auto;   /* PCのright:850を打ち消し→画像が画面左外(-850)へ消えるのを解消 */
    width: 100%; height: 251px;
    border-radius: 0;
  }
  .p-landscape__copy {
    position: relative;
    top: auto; left: auto; right: auto;   /* PCのright:130を打ち消し→本文の左クリップ(-85)と縦ラベル重なりを解消 */
    width: calc(100% - 90px);
    margin: 24px 0 0 45px;
  }
  .p-landscape__title { line-height: 32px; }   /* title/em の font-size は base の clamp で1本化 */
  .p-landscape__lead {
    margin-top: 32px;
    line-height: 26px;          /* font-size は base の clamp で1本化(SP=14px) */
  }
  .p-landscape__btn {
    width: 190px; height: 46px;   /* SP: enmap と矢印の重なり回避(短文「施設案内を見る」に最適化) */
    margin-top: 32px;
  }
  .p-landscape__map {
    position: absolute;
    top: auto; bottom: -10px; right: -5vw; left: auto;   /* copy基準で右下=ボタン行の右側へ(デザイン準拠)。旧right:-200px=画面外を解消 */
    width: 104px; height: 74px;
  }
  .p-landscape__vertical {
    right: auto; left: 0;
    top: 270px;
    width: 22px; height: 239px;
    /* font-size は base の clamp で1本化(SP=14px) */
  }

  /* --- Rooms & Onsen (97:5940) - 390×630 at (-22, 4263) --- */
  .p-rooms { padding: 0; margin-top: 40px; }   /* SP 上余白を詰める(PCは80px) */
  .p-rooms__inner {
    width: 100%;
    height: auto;
    padding: 0;   /* 下余白を撤去(旧32px) */
    background: #f3f3f1;
    border-radius: 0;
  }
  .p-rooms__img-l {
    position: relative;
    top: auto; left: auto; right: auto;   /* base(v43 fluid)の right:calc(50%+…) を打ち消し(残すと relative で左へ-437pxズレ) */
    width: 100%; height: 251px;
    border-radius: 0;
  }
  .p-rooms__copy {
    position: relative;
    top: auto; left: auto;
    transform: none;   /* base の中央寄せ translateX を打ち消し */
    width: calc(100% - 100px);
    margin: 32px auto 0;
    text-align: left;
  }
  .p-rooms__title {
    line-height: 32px;          /* font-size は base の clamp で1本化 */
    text-align: left;
  }
  .p-rooms__lead {
    margin-top: 16px;
    line-height: 26px;          /* font-size は base の clamp で1本化(SP=14px) */
  }
  .p-rooms__btns {
    margin-top: 24px;
    flex-direction: column;        /* SP: 縦積み */
    gap: 12px;
    align-items: flex-start;
  }
  .p-rooms__btn { width: 220px; height: 46px; }   /* cuisine/landscape と同等サイズ */
  .p-rooms__vertical {
    left: 0; top: 270px;
    width: 22px; height: 165px;
    /* font-size は base の clamp で1本化(SP=14px) */
  }
  .p-rooms__img-r {
    position: relative;
    right: auto; top: auto; left: auto;
    width: 100%; height: 251px;
    margin-top: 32px;
    border-radius: 0;
  }

  /* --- Plan (97:5937) - HORIZONTAL SCROLL, 4 cards 260×470 each at (25, 5313) --- */
  .p-plan { padding: 60px 0 0; }
  /* SP: ページャー(nav)をカード(grid)の下に。DOM順 head→nav→grid→filter を
     flex+order で head→grid→nav→filter に (PNG準拠・DOM不変・PC不変) */
  .p-plan__inner {
    width: 100%;
    padding: 0 25px;
    display: flex;
    flex-direction: column;
  }
  .p-plan__head {
    flex-direction: column;
    gap: 8px;
    order: 1;
  }
  .p-plan__title-jp { line-height: 36px; }   /* title-en/jp の font-size は base の clamp で1本化 */
  .p-plan__nav {
    position: relative;
    top: auto; right: auto;
    margin: 16px auto 0;
    width: 140px;
    order: 3;
  }

  .p-plan__grid {
    margin-top: 32px;
    overflow: hidden;        /* ビューポート(base同様)。横スクロール廃止→JS transform 無限ループに */
    order: 2;
  }
  .p-plan__track { gap: 32px; }   /* SP は gap 32(base 53 を上書き) */
  .p-plan__card {
    flex: 0 0 260px;
    width: 260px;
  }
  .p-plan__card-img {
    width: 260px; height: 260px;
  }
  .p-plan__card-title {
    margin-top: 16px;
    line-height: 24px;          /* font-size は base の clamp で1本化 */
  }
  /* card-price/card-cap の font-size は base(clamp/0.875rem)で1本化 */
  .p-plan__card-price-row {
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
  }

  /* Filter (97:5936) - 340×282 vertical stacked buttons */
  .p-plan__filter {
    width: 100%;
    height: auto;
    margin: 40px auto;
    padding: 21px 30px 30px;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
    order: 4;
  }
  .p-plan__filter-label {
    padding-left: 0; margin: 0 0 8px;
    /* font-size は base の clamp で1本化(SP=17px) */
    text-align: left;
  }
  .p-plan__filter-btn {
    width: 100%; height: 56px;
  }

  /* --- Access (97:5922) - 390×821 at (0, 6196) ---
     2026-06-10 sp_index_04.png ピクセル実測準拠に全面改修:
     順序 = 丸写真(先頭・右寄せ・上に-44pxはみ出し) → title → jp → lead → btn → 地図。
     地図は幅140.26%・左35.56% crop(右も僅かにbleed)で ★/ロゴ吹き出しをほぼ中央に。 */
  .p-access {
    height: auto;
    margin-top: 44px;    /* 2026-06-10 hoshi 指示: 上が詰まっていたので余白追加 (丸写真の-44pxはみ出し分とちょうど対) */
    padding: 0;
    background: var(--c-bg-cream);
    overflow: visible;   /* 丸写真の上はみ出し(-44px)を見せる。地図のbleedは __map 側の overflow:hidden でクリップ */
  }
  .p-access__inner {
    width: 100%;
    height: auto;
    padding: 0;
    display: flex;
    flex-direction: column;
  }

  /* Two circles 88×88 — 先頭・右端から25px・セクション上端を44pxまたぐ (design実測: top-44/right25/gap10) */
  .p-access__circles-row {
    display: flex;
    gap: 10px;
    position: relative;
    z-index: 2;
    margin: -44px 25px 0 auto;
    justify-content: flex-end;
    order: 1;
  }
  .p-access__circle {
    position: relative;
    top: auto; left: auto;
    width: 88px; height: 88px;
  }

  .p-access__title-en, .p-access__title-jp,
  .p-access__lead, .p-access__btn {
    position: relative;
    top: auto; left: auto;
  }
  .p-access__title-en {
    margin: 30px 0 0 25px;      /* design: タイトルink上端 84 (丸写真下端44 + 30 + フォントオフセット10) */
    /* font-size は base の clamp で1本化(SP=56px) */
    order: 2;
  }
  .p-access__title-jp {
    margin: 0 0 0 25px;         /* design: ink 139.5 → css top 130 = en下端ピッタリ */
    line-height: 36px;          /* font-size は base の clamp で1本化(SP=20px) */
    order: 3;
  }
  .p-access__lead {
    margin: 11px 25px 0;        /* design: ink 184.5 */
    line-height: 28.5px;        /* design実測 (旧26px) */
    order: 4;
  }
  .p-access__lead br { display: none; }   /* design は <br> 無視の自然折返し(7行) */
  .p-access__btn {
    margin: 24px auto 0;        /* design: top 401 */
    display: flex;
    width: calc(100% - 50px);
    max-width: 340px;
    height: 57px;
    font-size: clamp(0.875rem, 4.1vw, 1rem);   /* design≈16px。1行厳守 (旧17pxは狭幅で2行化) */
    letter-spacing: 0.03em;
    white-space: nowrap;
    order: 5;
  }
  .p-access__btn::after { right: 20px; }   /* design実測 (PCは30px) */

  /* Map: SP は専用画像 setouchi-map_sp.webp (picture で出し分け、hoshi が表示領域crop+ロゴ拡大済み) を 100% 表示。
     旧 140.26%/-35.56% の CSS crop は画像側 crop に役目を移して撤去 (2026-06-10) */
  .p-access__map {
    position: relative;
    top: auto; bottom: auto; left: auto; right: auto;   /* base の bottom:10vw を SP では無効化 (relative だと上にズレるため) */
    width: 100%; height: auto;
    aspect-ratio: auto;
    margin-top: 34px;           /* design: btn下端458 → 地図上端491.5 */
    padding-bottom: 2em;        /* 2026-06-10 hoshi 指示: マップ下の余白 */
    overflow: hidden;
    order: 6;
  }
  .p-access__map img {
    position: static;
    width: 100%;
    max-width: none;
    height: auto;
    margin-left: 0;
    object-fit: contain;
  }

  /* --- News (97:5892) - 340×411 at (25, 7051) --- */
  .p-news { padding: 60px 0 48px; }   /* 下余白が詰まりすぎていたため追加 (N4) */
  /* SP: inner が幅266/left53 にずれて見出しが折返していた → 全幅化。line-height も PC値56px残りを修正 */
  .p-news__inner {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0 25px;
    grid-template-columns: 1fr;
    gap: 60px;
  }
  .p-news__list-head {
    line-height: 1.5;           /* font-size は base の clamp で1本化(SP=18px) */
    margin-bottom: 0.25em;
  }
  .p-news__list-wrap { min-width: 0; }   /* base の min-width:500px (PC用) を打ち消し */
  .p-news__item {
    grid-template-columns: 90px 1fr;
    gap: 12px;
    padding: 14px 24px 14px 0;
    margin-bottom: 0;
  }
  .p-news__item::after {        /* SP: 右矢印 10×10、位置を bottom:32px に */
    bottom: 32px;
    width: 10px;
    height: 10px;
  }
  .p-news__date { font-size: 1.125rem; }                       /* SP 拡大(旧 base clamp ~14px → 18px) */
  .p-news__title { font-size: 1rem; line-height: 28px; }       /* SP 拡大(→16px) */
  .p-news__more { width: 199px; height: 46px; margin: 24px auto 0; align-self: center; }   /* SP は中央寄せ */

  /* Banners (PNG: 大バナー全幅・横長 → 小バナー2枚 → ページャー) を縦積みに */
  .p-news__banners {
    grid-template-columns: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: visible;
  }
  .p-news__banner { border-radius: 4px; }
  .p-news__banner--lg {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 800 / 106;
  }
  .p-news__carousel { width: 100%; }
  .p-news__banner--sm {
    flex: 0 0 calc(50% - 10px);
    width: calc(50% - 10px);
    aspect-ratio: 350 / 160;
  }
  /* 小バナーカルーセルのページャー (‹ 1/3 ›) */
  .p-news__bnr-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    margin-top: 4px;
  }
  .p-news__bnr-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;            /* 円形ボーダーを除去し他ナビと統一 (N4) */
    background: none;
    color: var(--c-text);
    cursor: pointer;
    padding: 0;
  }
  .p-news__bnr-btn svg { width: 11px; height: 18px; }
  .p-news__bnr-counter {
    font-family: var(--font-en-serif);
    font-size: 0.875rem;         /* バナーページャー数字(注釈): 14px */
    letter-spacing: 0.1em;
    color: var(--c-text);
    min-width: 36px;
    text-align: center;
  }

  /* --- Footer hero (97:5879) - 390×440 at (0, 7745) --- */
  .p-footerHero { height: 440px; }
  /* SP: タイトルを中央寄せ。左45px/幅321pxだと letter-spacing で「で、」が折落ちするため
     左右0+padding20pxで実効幅を広げ中央寄せ (PNG準拠) */
  .p-footerHero__copy {
    top: 177px; right: 0; left: 0;
    width: auto;
    padding: 0 20px;
    text-align: center;
  }
  .p-footerHero__title {
    line-height: 32px;          /* font-size は base の clamp で1本化(SP=22px) */
    letter-spacing: 0.3em;
  }
  .p-footerHero__title-en {
    margin-top: 24px;
    /* font-size は base の clamp で1本化(SP=14px) */
    letter-spacing: 0.04em;
  }

  /* --- Footer (97:5876) - 390×1199 --- */
  .l-footer { padding: 38px 0 0; height: auto; }
  /* SP: Kasaiを最下部へ。DOMでは住所直後(5番目)だが、PNGでは copyright 直前。
     inner を flex 化し kasai に大きい order を与えて末尾に (DOM不変・PC不変) */
  .l-footer__inner {
    width: 100%;
    height: auto;
    padding: 0;
    display: flex;
    flex-direction: column;
  }
  .l-footer__lede {
    width: 300px;
    margin: 0 auto;
    text-align: center;
    line-height: 28px;          /* font-size は base 1rem で1本化 */
    letter-spacing: 0.08em;
  }
  .l-footer__logo {
    margin: 28px auto 0;
    width: 340px; height: 87px;
    text-align: center;
  }
  .l-footer__logo img {
    width: 100%; height: 100%;
    object-fit: contain;
  }
  .l-footer__name {
    margin: 32px 20px 0;
    line-height: 32px;          /* font-size は base の clamp で1本化(SP=16px) */
    white-space: nowrap;
    text-align: center;
  }
  .l-footer__addr {
    margin: 8px 42px 0;
    line-height: 23px;          /* font-size は base の clamp で1本化(SP 13px→14px) */
  }

  /* SNS (97:5871) at (141, 8513) */
  .l-footer__sns {
    position: relative;
    top: auto; left: auto;
    margin: 56px auto 0;
    justify-content: center;
    gap: 40px;
  }
  .l-footer__sns img { width: 40px; height: 40px; }

  /* Nav (97:5867) at (40.5, 8579) */
  .l-footer__nav {
    position: relative;
    top: auto; left: auto;
    margin: 36px 0 0;
    text-align: center;
    line-height: 28px;          /* font-size は base の clamp で1本化(SP=14px) */
    white-space: normal;
    padding: 0 25px;
  }
  .l-footer__cta-title {
    position: relative;
    top: auto; left: auto;
    margin: 32px auto 0;
    text-align: center;
    /* font-size は base の clamp で1本化(SP=18px) */
  }

  /* CTA row (97:5865) at (55, 8716) - 280×56 stacked */
  .l-footer__cta-row {
    position: relative;
    top: auto; left: auto;
    margin: 16px auto 0;
    flex-direction: column;
    gap: 12px;
    width: 280px;
  }
  .l-footer__cta-btn { width: 280px; height: 56px; }

  /* Sublinks (97:5861) at (93, 8945) */
  .l-footer__sublinks {
    position: relative;
    top: auto; left: auto;
    margin: 36px auto 0;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 8px;
    font-size: 1rem;   /* ハンバーガーメニュー準拠 (hoshi 2026-06-20) */
  }
  /* 予約確認・変更・キャンセル=1行目フル幅 / 会員登録・会員ログイン=2行目で横並び */
  .l-footer__sublinks a:first-child { flex-basis: 100%; text-align: center; }

  /* Sub-nav buttons (97:5860) at (30, 9038) — SP は塗りボタン 2 カラム grid */
  .l-footer__subnav {
    position: relative;
    top: auto; left: auto;
    margin: 36px 30px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .l-footer__subnav a {
    width: auto;
    height: 48px;
    background: var(--c-bg-soft);
    border: none;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-jp-mincho);
    /* font-size は base 0.875rem で1本化(SP 13px→14px) */
    color: var(--c-text);
  }

  /* Kasai card (97:5856) at (88, 9176), 212×104 */
  .l-footer__kasai {
    position: relative;
    top: auto; left: auto;
    width: 240px;
    margin: 40px auto 0;
    padding: 14px 0;
    border-radius: 4px;
    order: 99;
  }
  .l-footer__kasai-frame { padding: 15px 0 6px; }
  .l-footer__kasai img { height: 51px; width: 153px; }
  .l-footer__kasai-text { margin-top: 12px; }   /* font-size は base 0.875rem で1本化 */

  /* Copyright bar (97:5854) - 370×66 at (0, 9318) - 2 lines */
  .l-footer__copy {
    position: relative;
    bottom: auto; left: auto;
    width: 100%;
    height: 66px;
    margin-top: 38px;
    line-height: 20px;          /* font-size は base の clamp で1本化(SP 13px→14px) */
    text-align: center;
    padding: 0 16px;
  }

}

/* ==========================================================
/* ==========================================================
   OVERLAY MENU (3段階レスポンシブ対応)  Figma: 97:6470 / 118:6147
   - ハンバーガーボタンから展開する全画面オーバーレイ
   - z-index: 10000 (既存サイドメニュー 9999 より上)
   - 開閉アニメ: bg fade(.3s) + panel fade+slide-up(.4s, 50ms delay)
   ----------------------------------------------------------
   Breakpoints:
   [A] >=1921px       : 1920デザイン完全固定
   [B] 1681px-1920px  : 1920基準で「画像幅・パネル幅・メニュー左端」を線形補間
   [C] 1024px-1680px  : 1440デザイン (画像なし、メニュー1000幅 中央配置)
   [D] <=1023px       : SP別実装 (別フェーズ・対象外)

   --menu-x: メニュー部分1000幅のpanel基準left を CSS変数で集約
   各要素は calc(var(--menu-x) + 相対px) で配置
   ========================================================== */

/* オーバーレイ全体 (背景の暗転 + 縦スクロール対応のflex親) */
.l-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(34, 34, 34, 0.8);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease-out, visibility 0s linear .3s;
  /* viewport が縦に短い時、はみ出た部分をスクロールで見えるように
     align-items:flex-start + padding + panel margin:auto で「viewport大なら中央配置 / viewport小なら上から overflow scroll」 */
  overflow-y: auto;
  display: flex;
  align-items: flex-start;       /* center だと上方向 overflow がスクロール不可 */
  justify-content: center;
  padding: 20px 0;               /* 上下に最小余白 */
}
.l-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .3s ease-out, visibility 0s linear 0s;
}

/* body スクロール固定 */
body.is-overlay-open {
  overflow: hidden;
}

/* 白パネル (1920デフォルト: 1840×741, br10、 flex内 中央配置 / overflow時は上から) */
.l-overlay__panel {
  position: relative;
  width: 1840px;
  height: 741px;
  background: #fff;
  border-radius: 10px;
  flex-shrink: 0;          /* 縦短い時に縮まない (overflowスクロール) */
  margin: auto 0;          /* viewport > panel: auto margin で縦中央 / viewport < panel: 0 になり上から始まる */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .4s ease-out .05s, transform .4s ease-out .05s;
}
.l-overlay.is-open .l-overlay__panel {
  opacity: 1;
  transform: translateY(0);
}

/* === メニュー画面 専用 === */

/* メニュー画面 panel: --menu-x をCSS変数として集約 */
.l-overlay--menu .l-overlay__panel {
  --menu-x: 692px;  /* デフォルト1920基準: メニュー左端 panel基準 = 732-40 */
}

/* === 内部要素 === */

/* 左ヒーロー画像 (1920デフォルト: 596×741、左上=panel原点、左側角丸10) */
.p-omenu__hero {
  position: absolute;
  top: 0;
  left: 0;
  width: 596px;
  height: 741px;
  border-radius: 10px 0 0 10px;
  overflow: hidden;
}
.p-omenu__hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ナビ列 共通 (Shippori Mincho B1 Medium 17px / lh 42 / track 0.85 / #111) */
.p-omenu__col {
  position: absolute;
  font-family: "Shippori Mincho B1", "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 1.0625rem;        /* オーバーレイ ナビ項目: 17px */
  line-height: 42px;
  letter-spacing: 0.85px;
  color: #111;
  white-space: nowrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.p-omenu__col li { margin: 0; padding: 0; }
.p-omenu__col a {
  color: inherit;
  text-decoration: none;
  transition: opacity .2s ease;
}
.p-omenu__col a:hover { opacity: .55; }

/* 1〜3列ラッパー (2026-06-24 hoshi: 列間の余白を均等に = 固定幅を3等分) */
.p-omenu__nav-group {
  position: absolute;
  left: var(--menu-x);
  top: 95px;
  width: auto;               /* 内容幅に縮め、列間は gap で均等化 (2026-06-25 hoshi) */
  display: flex;
  align-items: flex-start;
  gap: 72px;                 /* 1〜3列の「間」の余白を均等に */
}
.p-omenu__nav-group > .p-omenu__col {
  position: static;          /* base の absolute を打ち消し flex 子要素に */
  flex: 0 0 auto;            /* 各列を内容幅に = 列間 gap が一定に揃う */
}
/* PC のみ: 1列目「ホーム」を1行ぶん上段に出し、客室/アクセス/ワンちゃんと一緒 の頭を揃える */
@media (min-width: 1024px) {
  .p-omenu__nav-group > .p-omenu__col--2,
  .p-omenu__nav-group > .p-omenu__col--3 {
    margin-top: 42px;        /* line-height 1行分 ＝ ホームの高さ */
  }
}

/* 1列目 (メニュー部分内 relative: 0) */
.p-omenu__col--1 {
  left: var(--menu-x);
  top: 95px;
}

/* 2列目 (relative: 204 = 936-732) */
.p-omenu__col--2 {
  left: calc(var(--menu-x) + 204px);
  top: 137px;
}

/* 3列目 (relative: 462 = 1194-732) */
.p-omenu__col--3 {
  /* 2026-06-24: サブ項目(・いちご狩り等)構造を廃止しフラットリスト化 = col-2/4 と同じ流し込み */
  left: calc(var(--menu-x) + 462px);
  top: 137px;
}

/* 4列目 (relative: 767 = 1499-732) */
.p-omenu__col--4 {
  left: calc(var(--menu-x) + 767px);
  top: 137px;
}

/* SP 専用アコーディオンナビ: PC では非表示 (PC は上の 4 列ナビを使用) */
.p-omenu__acc { display: none; }

/* 垂直区切り線 (relative: 728 = 1460-732, 1×206 #aaa) */
.p-omenu__divider {
  position: absolute;
  left: calc(var(--menu-x) + 728px);
  top: 140px;
  width: 1px;
  height: 206px;
  background: #aaa;
  display: block;
}

/* 宿泊予約バー (relative: 0) 1000×104 #f3f3f3 br6 */
.p-omenu__resv {
  position: absolute;
  left: var(--menu-x);
  top: 394px;
  width: 1000px;
  height: 104px;
  background: #fff7f5;   /* 薄グレー→薄ピンク (hoshi指定 2026-06-17) */
  border-radius: 6px;
}

/* 「宿泊予約」見出し (.p-omenu__resv 基準で left:48) */
.p-omenu__resv-title {
  position: absolute;
  left: 48px;
  top: 30px;
  margin: 0;
  font-family: "Shippori Mincho B1", "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 1.125rem;         /* 「宿泊予約」見出し: 18px */
  line-height: 40px;
  letter-spacing: 0.9px;
  color: #222;
  white-space: nowrap;
}

/* 予約系ボタン 共通 (220×56, br5, 17px Shippori Mincho B1 Medium) */
.p-omenu__resv-btn {
  position: absolute;
  top: 24px;
  width: 220px;
  height: 56px;
  border-radius: 5px;
  font-family: "Shippori Mincho B1", "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 1.0625rem;        /* 予約ボタン: 17px */
  letter-spacing: 0.85px;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  transition: opacity .2s ease, filter .2s ease;
}
.p-omenu__resv-btn:hover { filter: brightness(1.05); opacity: .92; }
.p-omenu__resv-btn::after {
  content: '';
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background: url(/assets/images/icons/arrow_right.webp) no-repeat center / contain;
}
.p-omenu__resv-btn--plan::after,
.p-omenu__resv-btn--room::after { filter: invert(1); }   /* オレンジグラデ背景 → 白矢印 */

/* プランから探す (.resv 基準 left:171, グラデオレンジ) */
.p-omenu__resv-btn--plan {
  left: 171px;
  background: linear-gradient(to bottom, #ec7d5f, #ffb09b);
  color: #fff;
}
/* お部屋から探す (.resv 基準 left:407) */
.p-omenu__resv-btn--room {
  left: 407px;
  background: linear-gradient(to bottom, #ec7d5f, #ffb09b);
  color: #fff;
}
/* 空室カレンダー (.resv 基準 left:643, white bg / aaa border) */
.p-omenu__resv-btn--cal {
  left: 643px;
  background: #fff;
  border: 1px solid #aaa;
  color: #222;
}

/* 会員リンク (relative: 0) 15px Noto Serif JP Medium / underline */
.p-omenu__memberlink {
  position: absolute;
  left: var(--menu-x);
  top: 519px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 32px;
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 1rem;             /* 会員リンク: 15px→16px */
  letter-spacing: 0.75px;
  white-space: nowrap;
}
.p-omenu__memberlink a {
  color: #222;
  text-decoration: underline;
  transition: opacity .2s ease;
}
.p-omenu__memberlink a:hover { opacity: .65; }

/* お問い合わせ等のフッターリンク (relative: 0) 15px Shippori Mincho */
.p-omenu__footlink {
  position: absolute;
  left: var(--menu-x);
  top: 604px;
  margin: 0;
  font-family: "Shippori Mincho B1", "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 1rem;             /* フッターリンク: 15px→16px */
  line-height: 46px;
  letter-spacing: 0.75px;
  color: #111;
  white-space: nowrap;
}
.p-omenu__footlink a {
  color: inherit;
  text-decoration: none;
  transition: opacity .2s ease;
}
.p-omenu__footlink a:hover { opacity: .55; text-decoration: underline; }

/* SNSアイコン (relative: 510 = 1242-732) Instagram + Facebook 32×32 */
.p-omenu__sns {
  position: absolute;
  left: calc(var(--menu-x) + 510px);
  top: 606px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 32px;
}
.p-omenu__sns a {
  display: block;
  width: 32px;
  height: 32px;
  transition: opacity .2s ease;
}
.p-omenu__sns a:hover { opacity: .7; }
.p-omenu__sns img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ロゴ (relative: 835 = 1567-732) Figmaのマスク再現:
   元画像 322×228 を 165×99 のマスクで切り抜き表示
   マスク位置: panel基準 (1486, 607) → mask枠 (1567, 669) との差 (81, 62) */
.p-omenu__logo {
  position: absolute;
  /* 広い画面は従来位置、狭い中間幅(〜約1155px)では右端24px余白でクリップ回避 (2026-06-10) */
  left: min(calc(var(--menu-x) + 835px), calc(100% - 240px - 24px));
  top: 536px;          /* p-omenu__resv の下 ~50px (hoshi指定 2026-06-17) */
  width: 240px;
  height: auto;
  display: block;
  overflow: visible;
}
.p-omenu__logo img {
  position: static;
  width: 167px;        /* PC オーバーレイ右下ロゴ実寸 (hoshi指定) */
  height: 100px;
  max-width: none;
  display: block;
}

/* 閉じる × ボタン (panel の外、 .l-overlay 直下に配置)
   panel が縦スクロールしても × は常に表示される
   - top: viewport大きい時は panel top + 50 に追従、小さい時は viewport 上から 50px 固定
   - right: BP別 (panel右マージン + 50.41) */
.p-omenu__close {
  position: fixed;
  /* × top = panel top edge + 50:
     viewport大 (vh > 781): panel center 配置で panel top = (vh-741)/2 → × top = vh/2 - 320.5
     viewport小 (vh ≤ 781): panel が padding20 から始まる → × top = 20 + 50 = 70 (固定) */
  top: max(70px, calc(50% - 320.5px));
  right: calc(50vw - 869.59px);                  /* デフォルト [A] >=1921: panel中央配置で × right edge は vw/2 + 869.59 */
  width: 41px;
  height: 41px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  appearance: none;
  z-index: 1;
}
.l-overlay--menu .p-omenu__close {
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease-out, visibility 0s linear .3s;
}
.l-overlay--menu.is-open .p-omenu__close {
  opacity: 1;
  visibility: visible;
  transition: opacity .3s ease-out .1s, visibility 0s linear 0s;
}
.p-omenu__close::before,
.p-omenu__close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 2px;
  background: #222;
  transform-origin: center center;
  transition: background .2s ease;
}
.p-omenu__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.p-omenu__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.p-omenu__close:hover::before,
.p-omenu__close:hover::after {
  background: #555;
}
.p-omenu__close:focus-visible {
  outline: 2px solid #222;
  outline-offset: 4px;
}

/* === レスポンシブ media query (デフォルト規則を上書きするため最後尾に配置) === */

/* [B] 1681-1920px : 1920基準 + 線形補間 (画像幅・パネル幅・メニューleft) */
@media (max-width: 1920px) and (min-width: 1681px) {
  .l-overlay--menu .l-overlay__panel {
    --menu-x: calc(100vw - 1228px);   /* 1920→692, 1681→453 */
    width: calc(100% - 80px);          /* 1920→1840, 1681→1601 (左右マージン40固定)。v36: 100vw→100% (スクロールバー幅除外、plan と同修正) */
  }
  .p-omenu__hero {
    width: calc(100vw - 1324px);       /* 1920→596, 1681→357 */
  }
  /* × ボタン: panel左右余白40 + 50.41 = 90.41px (vw非依存・固定) */
  .p-omenu__close {
    right: 90.41px;
  }
}

/* [C] 1024-1680px : 1440基準 (画像なし、 panel左右余白20px、 4角br10、 メニュー中央配置) */
@media (max-width: 1680px) and (min-width: 1024px) {
  .l-overlay--menu .l-overlay__panel {
    /* メニュー panel基準 left: max() で 1024-1040範囲のはみ出し防止 */
    --menu-x: max(0px, calc(50vw - 520px));
    /* panel幅: 左右20px余白、 ただし min 1000(メニュー幅)で 1024-1040 でも収まる。v36: 100vw→100% */
    width: max(1000px, calc(100% - 40px));
    border-radius: 10px;
  }
  .p-omenu__hero {
    display: none;
  }
  /* × ボタン: panel左右余白20 + 50.41 = 70.41px */
  .p-omenu__close {
    right: 70.41px;
  }
}

/* ==========================================================
   [D] OVERLAY MENU — SP 全画面 (Figma sp_menu 133:16167, 390×1633)
   ----------------------------------------------------------
   ⚠ 重要: PC ベース規則 (.p-omenu__logo, .p-omenu__col--1, .p-omenu__resv 等)
   と specificity 0,1,0 で同じため、source order を後にして上書きする必要がある。
   そのため [B] [C] media queries の "後ろ" に [D] を配置している。
   設計方針:
     - panel = 全画面 (100% × 1633vw scale), border-radius/shadow なし
     - 内部要素は overlay 用途として position: absolute (Figma 相対座標)
     - 全寸法 calc(N * var(--sp-vw)) で viewport 連動 (390基準)
     - PC 用 .p-omenu__col / .p-omenu__resv 等の絶対座標は SP で完全上書き
   座標は全て Figma sp_menu 内の panel 相対 (= absolute) px
   ========================================================== */
@media (max-width: 1023px) {
  .l-overlay--menu {
    /* SP: padding なしでフル画面を panel に占有させる (base align-items: flex-start を継承) */
    padding: 0;
  }
  .l-overlay--menu .l-overlay__panel {
    width: 100%;
    max-width: 100%;
    height: auto;                       /* 2026-06-24: 固定1633→コンテンツ高 (単一カラム化) */
    min-height: 100%;
    margin: 0;
    border-radius: 0;
    --menu-x: 0px;             /* SP は menu-x 不要 (PC 用 CSS変数の上書き) */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: calc(40 * var(--sp-vw)) 0 calc(56 * var(--sp-vw));
    box-sizing: border-box;
  }

  /* 1. Hero 画像非表示 (PC 専用) */
  .p-omenu__hero { display: none; }

  /* 2. 閉じる × ボタン (Figma 133:16349 — 24×24 at (350, 25), 中央バー 32.77×1.17 #222 ±45deg)
        position: fixed で viewport 右上に固定 (panel をスクロールしても × は常に表示)
        Figma 座標 (panel 内 350) を SP では viewport 右端から 16px (= 390-350-24) で再現 */
  .l-overlay--menu .p-omenu__close {
    position: fixed;
    top: calc(25 * var(--sp-vw));
    right: calc(16 * var(--sp-vw));
    left: auto;
    width: calc(24 * var(--sp-vw));
    height: calc(24 * var(--sp-vw));
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    z-index: 10001;
  }
  .l-overlay--menu .p-omenu__close::before,
  .l-overlay--menu .p-omenu__close::after {
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    width: calc(32.77 * var(--sp-vw));
    height: calc(1.17 * var(--sp-vw));
    background: #222;
    transform-origin: center;
  }
  .l-overlay--menu .p-omenu__close::before { transform: translate(-50%, -50%) rotate(45deg); }
  .l-overlay--menu .p-omenu__close::after  { transform: translate(-50%, -50%) rotate(-45deg); }

  /* 3. ロゴ (Figma 133:16370 — 165×99 at (113, 32))
        画像は元 322×228 で、マスク窓 165×99 を image (81, 62) に合わせて表示する。
        PC 実装と同じ「container overflow:hidden + img absolute negative offset」方式 */
  .p-omenu__logo {
    position: static;
    order: -1;                          /* パネル先頭へ */
    align-self: center;
    width: calc(165 * var(--sp-vw));
    height: auto;
    margin: 0 0 calc(28 * var(--sp-vw));
    padding: 0;
    display: block;
    overflow: visible;
  }
  .p-omenu__logo img {
    position: static;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    max-width: none;
    object-fit: contain;
    display: block;
  }

  /* 4-6. ナビ = アコーディオン型 (サイトマップ分類・全項目) [2026-06-29 hoshi]
     PC の 4 列ナビ (.p-omenu__nav-group / col--4 / divider) は SP では非表示にし、
     代わりに .p-omenu__acc (<details> 群) を表示する。様式は /sitemap/ に準拠。 */
  .p-omenu__nav-group,
  .p-omenu__col--4,
  .p-omenu__divider { display: none; }

  .p-omenu__acc {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0 calc(20 * var(--sp-vw));
    box-sizing: border-box;
    font-family: var(--font-jp-mincho);
  }

  /* カテゴリ (details) */
  .p-omenu__acc-cat { border-bottom: 1px solid #e4e4e4; }
  .p-omenu__acc-cat:first-child { border-top: 1px solid #e4e4e4; }

  /* 見出し (summary) = EN + JP + 右シェブロン (sitemap-block-head 準拠) */
  .p-omenu__acc-head {
    display: flex;
    align-items: baseline;
    gap: calc(12 * var(--sp-vw));
    padding: calc(16 * var(--sp-vw)) calc(4 * var(--sp-vw));
    cursor: pointer;
    list-style: none;                 /* デフォルト三角を消す (FF) */
    -webkit-tap-highlight-color: transparent;
  }
  .p-omenu__acc-head::-webkit-details-marker { display: none; }  /* Safari/旧Chrome */
  .p-omenu__acc-en {
    font-family: var(--font-en-serif);
    font-size: 0.8125rem;             /* 13px */
    letter-spacing: 0.2em;
    color: var(--c-primary);
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1;
  }
  .p-omenu__acc-jp {
    font-family: var(--font-jp-mincho);
    font-size: 1.125rem;              /* 18px */
    font-weight: 500;
    letter-spacing: 0.06em;
    color: #222;
    line-height: 1.3;
  }
  /* 右シェブロン (閉=下向き / 開=上向き) */
  .p-omenu__acc-head::after {
    content: '';
    margin-left: auto;
    align-self: center;
    flex-shrink: 0;
    width: calc(8 * var(--sp-vw));
    height: calc(8 * var(--sp-vw));
    border-right: 1.5px solid #b5b5b5;
    border-bottom: 1.5px solid #b5b5b5;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.25s ease;
  }
  .p-omenu__acc-cat[open] > .p-omenu__acc-head::after {
    transform: translateY(2px) rotate(225deg);
  }

  /* 項目リスト */
  .p-omenu__acc-list {
    list-style: none;
    margin: 0;
    padding: 0 0 calc(10 * var(--sp-vw));
  }
  .p-omenu__acc-list li { margin: 0; padding: 0; }
  .p-omenu__acc-list a {
    display: flex;
    align-items: center;
    gap: calc(10 * var(--sp-vw));
    padding: calc(9 * var(--sp-vw)) calc(4 * var(--sp-vw));
    font-size: 1rem;                  /* 16px (sitemap と同じ) */
    color: #333;
    letter-spacing: 0.04em;
    text-decoration: none;
    line-height: 1.5;
  }
  /* 先頭シェブロン (›) = sitemap-list 準拠 */
  .p-omenu__acc-list a::before {
    content: '';
    flex-shrink: 0;
    width: calc(6 * var(--sp-vw));
    height: calc(6 * var(--sp-vw));
    border-right: 1.5px solid var(--c-primary);
    border-bottom: 1.5px solid var(--c-primary);
    transform: rotate(-45deg);
  }

  /* サブリスト (アンカー・周辺スポット等) = 左罫線でインデント */
  .p-omenu__acc-sub {
    list-style: none;
    margin: calc(2 * var(--sp-vw)) 0 calc(6 * var(--sp-vw)) calc(8 * var(--sp-vw));
    padding-left: calc(14 * var(--sp-vw));
    border-left: 1px solid #e4e4e4;
  }
  .p-omenu__acc-sub a {
    font-size: 0.9375rem;             /* 15px */
    color: #555;
    padding: calc(7 * var(--sp-vw)) calc(4 * var(--sp-vw));
    gap: calc(9 * var(--sp-vw));
  }
  .p-omenu__acc-sub a::before {
    width: calc(5 * var(--sp-vw));
    height: calc(5 * var(--sp-vw));
  }

  /* 小見出し (ロケ地ガイド / 島内・周辺の観光スポット) = リンクでない見出し */
  .p-omenu__acc-sublabel {
    font-family: var(--font-jp-mincho);
    font-size: 0.9375rem;             /* 15px */
    color: #222;
    letter-spacing: 0.05em;
    padding: calc(10 * var(--sp-vw)) calc(4 * var(--sp-vw)) calc(2 * var(--sp-vw));
    line-height: 1.5;
  }

  /* 外部 / 別タブで開くリンク = 先頭マークを「別タブ」アイコンに差し替え (sitemap 準拠) */
  .p-omenu__acc a[target="_blank"]::before {
    width: calc(13 * var(--sp-vw));
    height: calc(13 * var(--sp-vw));
    border: 0;
    transform: none;
    background-color: var(--c-primary);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3z'/%3E%3Cpath d='M19 19H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7h-2z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3z'/%3E%3Cpath d='M19 19H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7h-2z'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  /* 7. 宿泊予約カード (Figma 133:16337 — 340×254 at (25, 798.5), bg #f3f3f3, br 6) */
  .p-omenu__resv {
    position: relative;                 /* 2026-06-24: フロー化 (内側ボタンの配置基準は relative で維持) */
    top: auto;                          /* PC base の top:394px を SP で打ち消す (フロー位置からのズレ防止) */
    align-self: center;
    margin: calc(32 * var(--sp-vw)) 0 0;
    width: calc(340 * var(--sp-vw));
    height: calc(254 * var(--sp-vw));
    padding: 0;
    background: #fff7f5;   /* 薄グレー→薄ピンク (hoshi指定 2026-06-17) */
    border-radius: calc(6 * var(--sp-vw));
    box-sizing: border-box;
  }
  /* 「宿泊予約」見出し (Figma 133:16223 — center x=195.15, y=811.5, font 18 Mincho 500, lh 40, ls 0.05em) */
  .p-omenu__resv-title {
    position: absolute;
    top: calc((811.5 - 798.5) * var(--sp-vw));         /* = 13 (relative to card top) */
    left: 0;
    right: 0;
    margin: 0;
    text-align: center;
    font-family: var(--font-jp-mincho);
    font-weight: 500;
    font-size: 1.125rem;         /* SP「宿泊予約」見出し: 18px */
    line-height: calc(40 * var(--sp-vw));
    letter-spacing: 0.05em;
    color: #111;
    text-decoration: none;
  }
  /* 3 ボタン: 280×50, x=55, br 5
       プランから探す: y=858.5 (orange grad)
       お部屋から探す: y=920.5 (orange grad)
       空室カレンダー: y=982.5 (white bg, border #aaa) */
  .p-omenu__resv-btn {
    position: absolute;
    left: calc((55 - 25) * var(--sp-vw));               /* = 30 (relative to card left) */
    width: calc(280 * var(--sp-vw));
    height: calc(50 * var(--sp-vw));
    border-radius: calc(5 * var(--sp-vw));
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-family: var(--font-jp-mincho);
    font-weight: 500;
    font-size: 1rem;             /* SP予約ボタン: 16px */
    line-height: 1;
    letter-spacing: 0.05em;
    box-sizing: border-box;
  }
  .p-omenu__resv-btn::after {
    /* 矢印を arrow_right.webp に統一 (PCと揃える / 旧10×5 chevron を置換) */
    content: '';
    position: absolute;
    right: calc(20 * var(--sp-vw));
    top: 50%;
    transform: translateY(-50%);
    width: calc(12 * var(--sp-vw));
    height: calc(12 * var(--sp-vw));
    background: url(/assets/images/icons/arrow_right.webp) no-repeat center / contain;
    border: 0;
  }
  .p-omenu__resv-btn--plan {
    top: calc((858.5 - 798.5) * var(--sp-vw));          /* = 60 */
    background: linear-gradient(to bottom, #ec7d5f, #ffb09b);
    color: #fff;
  }
  .p-omenu__resv-btn--room {
    top: calc((920.5 - 798.5) * var(--sp-vw));          /* = 122 */
    background: linear-gradient(to bottom, #ec7d5f, #ffb09b);
    color: #fff;
  }
  .p-omenu__resv-btn--cal {
    top: calc((982.5 - 798.5) * var(--sp-vw));          /* = 184 */
    background: #fff;
    color: #222;
    border: 1px solid #aaa;
  }

  /* 8. 会員リンク (Figma 133:16331 — 195×66 at (97.5, 1074.5))
        HTML 構造: <ul class="p-omenu__memberlink"><li>予約確認・変更・キャンセル</li><li>会員登録</li><li>会員ログイン</li></ul>
        Figma 配置:
          row1 y=1074.5 center x=195: 予約確認・変更・キャンセル (font 15 Noto Serif Medium underline)
          row2 y=1115.5: 会員登録 (left center x=130.5) | 会員ログイン (right center x=245.5)
        全て underline, color #222, line-height 25 */
  .p-omenu__memberlink {
    position: static;                   /* 2026-06-24: フロー化 */
    width: 100%;
    margin: calc(32 * var(--sp-vw)) 0 0;
    padding: 0;
    list-style: none;
    display: block;          /* PC ベースの display:flex を打ち消す */
    gap: 0;                  /* PC ベースの gap:32px を打ち消す */
    font-family: var(--font-jp-serif);
    font-weight: 500;
    font-size: 1rem;             /* SP会員リンク: 15px→16px */
    line-height: calc(25 * var(--sp-vw));
    letter-spacing: 0.05em;
    color: #222;
    text-align: center;
    white-space: normal;     /* PC ベースの white-space:nowrap を打ち消す (会員ログインが折り返せるように) */
  }
  .p-omenu__memberlink li {
    margin: 0;
    padding: 0;
  }
  .p-omenu__memberlink li:nth-child(1) {
    /* 予約確認・変更・キャンセル: row 1 */
    text-align: center;
  }
  .p-omenu__memberlink li:nth-child(2),
  .p-omenu__memberlink li:nth-child(3) {
    /* 会員登録 / 会員ログイン: row 2, 横並び center */
    display: inline-block;
    margin-top: calc(16 * var(--sp-vw));               /* y=1115.5 - y=1074.5 = 41px。lh 25 + 16 gap */
    margin-left: calc(20 * var(--sp-vw));
    margin-right: calc(20 * var(--sp-vw));
  }
  .p-omenu__memberlink a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }

  /* 9. お問い合わせフッターリンク (Figma 133:16206 — 248×72 at (40, 1178.5), font 14 Mincho lh 36)
        Figma は w=248 (狭い) なので 2 行で折り返し:
          line1: お問い合わせ ／ 当ホテルについて ／
          line2: 採用情報 ／ サイトマップ
        PC ベースの white-space:nowrap を打ち消して自然折り返しに戻す */
  /* SP: フッターリンクは INFORMATION/INQUIRY カテゴリに集約済のため非表示 (PC は基底ルールで従来表示) 2026-06-29 hoshi */
  .p-omenu__footlink { display: none; }
  .p-omenu__footlink a {
    color: inherit;
    text-decoration: none;
  }

  /* 10. LANG box (Figma 133:16328 — 310×54 at (40, 1290.5), border 1 #707070, br 4)
         Globe icon at (64, 1307.5) 20×20
         "LANGUAGE" text at (100, 1308.5), Cormorant Infant Medium 19px #333 ls 0.05em
         Down chevron at (325, 1314.88) 10×5 */
  .p-omenu__lang {
    position: relative;                 /* 2026-06-24: フロー化 (内側アイコン/ラベルの基準は relative で維持) */
    align-self: center;
    margin: calc(34 * var(--sp-vw)) 0 0;
    width: calc(310 * var(--sp-vw));
    height: calc(54 * var(--sp-vw));
    background: transparent;
    border: 1px solid #707070;
    border-radius: calc(4 * var(--sp-vw));
    cursor: pointer;
    padding: 0;
    /* 旧 margin:0 が上の margin-top:34*sp-vw を打ち消し SNS と密着していた → 除去 (2026-06-29 hoshi) */
    box-sizing: border-box;
    display: flex;
    align-items: center;
  }
  .p-omenu__lang-icon {
    position: absolute;
    left: calc((64 - 40) * var(--sp-vw));               /* = 24 (relative) */
    top: calc((1307.5 - 1290.5) * var(--sp-vw));        /* = 17 */
    width: calc(20 * var(--sp-vw));
    height: calc(20 * var(--sp-vw));
    flex-shrink: 0;
  }
  .p-omenu__lang-icon circle,
  .p-omenu__lang-icon ellipse,
  .p-omenu__lang-icon line {
    stroke: #333;
    stroke-width: 1.2;
  }
  .p-omenu__lang-label {
    position: absolute;
    left: calc((100 - 40) * var(--sp-vw));              /* = 60 */
    top: calc((1308.5 - 1290.5) * var(--sp-vw));        /* = 18 */
    margin: 0;
    font-family: var(--font-en-serif);
    font-weight: 500;
    font-size: 1.1875rem;        /* SP LANGUAGE ラベル: 19px */
    line-height: calc(23 * var(--sp-vw));
    letter-spacing: 0.05em;
    color: #333;
    white-space: nowrap;
  }
  .p-omenu__lang-chevron {
    position: absolute;
    left: calc((325 - 40) * var(--sp-vw));              /* = 285 */
    top: calc((1314.88 - 1290.5) * var(--sp-vw));       /* = 24.38 */
    width: calc(10 * var(--sp-vw));
    height: calc(5 * var(--sp-vw));
    transition: transform 0.25s;
  }
  .p-omenu__lang[aria-expanded="true"] .p-omenu__lang-chevron {
    transform: rotate(180deg);
  }
  /* LANG dropdown menu — PC と同様の小白パネル下に展開 */
  .p-omenu__lang-menu {
    position: static;                   /* 2026-06-24: フロー化 (アコーディオン展開) */
    align-self: center;
    width: calc(310 * var(--sp-vw));
    margin: calc(6 * var(--sp-vw)) 0 0;
    padding: 0;
    list-style: none;
    background: #fff;
    border: 0 solid #ddd;
    border-radius: calc(4 * var(--sp-vw));
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    z-index: 20;
    transition: max-height 0.25s ease, opacity 0.2s, border-width 0.2s, padding 0.2s;
  }
  .p-omenu__lang.is-open + .p-omenu__lang-menu {
    max-height: calc(420 * var(--sp-vw));
    opacity: 1;
    border-width: 1px;
    padding: calc(4 * var(--sp-vw)) 0;
  }
  .p-omenu__lang-menu li {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #ECECEC;
  }
  .p-omenu__lang-menu li:last-child {
    border-bottom: none;
  }
  .p-omenu__lang-menu a {
    display: block;
    padding: calc(13 * var(--sp-vw)) calc(20 * var(--sp-vw));
    font-family: var(--font-jp-mincho);
    font-weight: 500;
    font-size: 1rem;             /* SP言語メニュー項目: 14px→16px (hoshi指定で拡大) */
    line-height: 1.4;
    letter-spacing: 0.05em;
    color: var(--c-text);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s, background-color 0.2s;
  }
  .p-omenu__lang-menu a:hover,
  .p-omenu__lang-menu a:focus-visible {
    color: var(--c-primary);
    background: #FAF6F3;
    outline: none;
  }

  /* 11. SNS icons (Figma 133:16324 — 128×40 at (131, 1384.5))
         Instagram: 40×40 at (131, 1384.5)
         Facebook:  40×40 at (219, 1384.5)
         gap = 219 - 131 - 40 = 48px */
  .p-omenu__sns {
    position: static;                   /* 2026-06-24: フロー化 */
    align-self: center;
    width: calc(128 * var(--sp-vw));
    height: calc(40 * var(--sp-vw));
    margin: calc(34 * var(--sp-vw)) 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    gap: calc(48 * var(--sp-vw));
  }
  .p-omenu__sns li {
    margin: 0;
    padding: 0;
    width: calc(40 * var(--sp-vw));
    height: calc(40 * var(--sp-vw));
  }
  .p-omenu__sns a {
    display: block;
    width: 100%;
    height: 100%;
  }
  .p-omenu__sns img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  /* 12. Tel section (Figma 133:16313 — 229×98 at (80.82, 1466.5))
         "お電話でのご予約は" center x=196.4, y=1466.5, Mincho 18 #333 lh 22 ls 0.05em
         "0879-65-2311"     center x=195.32, y=1503.5, Cormorant Infant Medium 40 #ec7d5f ls 0.05em
         "受付時間 9:00～18:00" left x=105, y=1542.5, Mincho 16 #333 lh 22 ls 0.05em */
  .p-omenu__tel {
    position: static;                   /* 2026-06-24: フロー化 */
    width: 100%;
    margin: calc(34 * var(--sp-vw)) 0 0;
    padding: 0;
    text-align: center;
  }
  .p-omenu__tel-lead {
    margin: 0;
    font-family: var(--font-jp-mincho);
    font-weight: 500;
    font-size: 1.125rem;         /* SP電話リード: 18px */
    line-height: calc(22 * var(--sp-vw));
    letter-spacing: 0.05em;
    color: #333;
    text-align: center;
  }
  .p-omenu__tel-num {
    display: block;
    margin-top: calc(15 * var(--sp-vw));               /* y=1503.5 - y=1466.5 - 22 = 15px */
    font-family: var(--font-en-serif);
    font-weight: 500;
    font-size: 2.5rem;           /* SP電話番号(大): 40px */
    line-height: 1;
    letter-spacing: 0.05em;
    color: #ec7d5f;
    text-align: center;
    text-decoration: none;
  }
  .p-omenu__tel-hours {
    margin: calc(15 * var(--sp-vw)) 0 0 0;             /* y=1542.5 - 1503.5 - 40*1 ≈ -1, 視覚調整で 15 */
    font-family: var(--font-jp-mincho);
    font-weight: 500;
    font-size: 1rem;             /* SP受付時間: 16px */
    line-height: calc(22 * var(--sp-vw));
    letter-spacing: 0.05em;
    color: #333;
    text-align: center;
  }
}


/* prefers-reduced-motion: アニメ抑制 */
@media (prefers-reduced-motion: reduce) {
  .l-overlay,
  .l-overlay__panel {
    transition-duration: .01ms !important;
  }
}
/* ==========================================================
   OVERLAY VACANT (空室検索画面)  Figma: 122:6335 / 122:6871  1920×1000 / 1440×1000
   - 右サイド「空室検索」(.l-sidemenu__btn--search) から展開
   - 489ban 外部スクリプトが <form name="searchForm489ban"> を生成、外側CSSで装飾
   - z-index/開閉アニメは .l-overlay 共通基盤を流用
   ----------------------------------------------------------
   Breakpoints (1920基準のみ先行実装、 [B] [C] は後続追加)
   [A] >=1921px       : 1920デザイン完全固定
   [B] 1681px-1920px  : 1920基準で線形補間 (panel幅・検索ボタン位置)
   [C] 1024px-1680px  : 1440デザイン (パネル小さく・2行レイアウト)
   [D] <=1023px       : SP別実装 (別フェーズ)
   ----------------------------------------------------------
   座標系メモ (1920基準):
   - panel: left=40, top=268, w=1840, h=465
   - グレー帯 (panel基準): left=80, top=164, w=1680, h=168
   - 各「セル」(縦罫線+ラベル+値+下罫線+矢印) の panel基準 left:
       date(宿泊日)  : 200    : セル幅 ~430(日付未定込)
       stay(泊数)    : 670    : セル幅 174
       room(部屋数)  : 884    : セル幅 192
       person(大人)  : 1116   : セル幅 174
       person(子供)  : 1330   : セル幅 174
   - 検索ボタン (panel基準): left=1504, top=220, 160×56
   - 下部リンク (panel基準): top=369
   ========================================================== */

/* === パネル: メニュー画面とサイズが違うのでオーバーライド === */
.l-overlay--vacant .l-overlay__panel {
  width: 1840px;
  height: 465px;
}

/* === タイトル「空室検索」(panel中央, top 77) === */
.l-overlay--vacant .p-vacant__title {
  position: absolute;
  top: 77px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
  font-size: clamp(1.375rem, 1.25rem + 0.52vw, 1.875rem);   /* 空室検索 見出し: SP22px→PC30px */
  line-height: 50px;
  letter-spacing: 3px;
  color: #333;
  white-space: nowrap;
}

/* === × ボタン (viewport基準 fixed, panel右上 50/50) ===
   panel高さ465 / 2 = 232.5、 panel top + 50 → top 50%-(232.5-50)=50%-182.5
   viewport小: 70px に固定
   right: panel幅1840/2 = 920、 ×ボタンleft = 1748.59、 そのrightは 50vw-(920-1748.59-41) */
.l-overlay--vacant .p-vacant__close {
  position: fixed;
  top: max(70px, calc(50% - 182.5px));
  right: calc(50vw - 869.59px);
  width: 41px;
  height: 41px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity .3s ease-out .1s;
}
.l-overlay--vacant .p-vacant__close::before,
.l-overlay--vacant .p-vacant__close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 2px;
  background: #222;
}
.l-overlay--vacant .p-vacant__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.l-overlay--vacant .p-vacant__close::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.l-overlay--vacant.is-open .p-vacant__close { opacity: 1; }

/* === グレー帯 (panel基準 80/164, 1680×168) === */
.l-overlay--vacant .p-vacant__form-wrap {
  position: absolute;
  top: 164px;
  left: 80px;
  width: 1680px;
  height: 168px;
  background: #f3f3f3;
  border-radius: 6px;
}

/* === 489ban フォーム外装 ===
   form 直下の dl/div を absolute 配置するため、 form 自体を position:relative で起点に */
.l-overlay--vacant #search_489ban {
  position: relative;
  width: 100%;
  height: 100%;
}
.l-overlay--vacant form[name="searchForm489ban"] {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

/* inbox_489ban (泊数+部屋数 / 大人+子供 のラッパ) を「無効化」して dl を form直下扱いに */
.l-overlay--vacant form[name="searchForm489ban"] .inbox_489ban {
  display: contents;
}

/* === 各 dl (セル) 共通スタイル === */
.l-overlay--vacant form[name="searchForm489ban"] dl {
  position: absolute;
  height: 50px;
  margin: 0;
  padding: 0;
  /* CSS変数: 値の罫線(下線)の left/width を セル毎にオーバーライド */
  --val-left: 70px;
  --val-width: 70px;
}

/* 縦罫線 (オレンジ 2×50, br2) — dl::before */
.l-overlay--vacant form[name="searchForm489ban"] dl::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 50px;
  background: #ec7d5f;
  border-radius: 2px;
  pointer-events: none;
}

/* === ラベル (dt + 内側 label) === */
.l-overlay--vacant form[name="searchForm489ban"] dt {
  position: absolute;
  top: 9px;
  left: 18px;
  margin: 0;
  padding: 0;
  font-family: 'Shippori Mincho B1', serif;
  font-weight: 400;
  font-size: 1.125rem;         /* 空室検索フォーム ラベル/単位: 18px */
  line-height: 26px;
  color: #000;
  white-space: nowrap;
  pointer-events: none;
}
.l-overlay--vacant form[name="searchForm489ban"] dt label {
  display: inline;
  font: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

/* === dd (値の枠) === */
.l-overlay--vacant form[name="searchForm489ban"] dd {
  position: relative;
  height: 50px;
  margin: 0;
  padding: 0;
}

/* 値の下罫線 (dd::after) - 70 or 214 幅 */
.l-overlay--vacant form[name="searchForm489ban"] dd::after {
  content: '';
  position: absolute;
  top: 49px;
  left: var(--val-left);
  width: var(--val-width);
  height: 1px;
  background: #222;
  pointer-events: none;
}

/* 下向き ∨ 矢印 (dd::before, SVG埋込, #222) - 値の罫線右端の上 */
.l-overlay--vacant form[name="searchForm489ban"] dd::before {
  content: '';
  position: absolute;
  top: 21px;
  left: calc(var(--val-left) + var(--val-width) - 16px);
  width: 16px;
  height: 8px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='8' viewBox='0 0 16 8' fill='none'><path d='M1 1L8 7L15 1' stroke='%23222' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
  pointer-events: none;
}

/* === select.digits (泊数/部屋数/大人/子供) === */
.l-overlay--vacant form[name="searchForm489ban"] select.digits {
  position: absolute;
  top: 0;
  left: var(--val-left);
  width: var(--val-width);
  height: 50px;
  padding: 0;
  border: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-family: 'Cormorant Infant', serif;
  font-weight: 400;
  font-size: 2rem;             /* 空室検索 数値入力(泊数/部屋数等): 32px */
  line-height: 39px;
  letter-spacing: 1.6px;
  color: #222;
  text-align: left;
  cursor: pointer;
  outline: none;
  /* select の標準矢印を消す (IE/Edge) */
}
.l-overlay--vacant form[name="searchForm489ban"] select.digits::-ms-expand {
  display: none;
}
.l-overlay--vacant form[name="searchForm489ban"] select.digits option {
  font-family: 'Cormorant Infant', serif;
  font-size: 1rem;             /* select option: 16px */
  color: #222;
  background: #fff;
}

/* === 単位 span (室/名) — 各 dd の値罫線右端の右隣 (Figma: 値罫線右端 + 16px) === */
.l-overlay--vacant form[name="searchForm489ban"] dd span {
  position: absolute;
  top: 9px;
  left: calc(var(--val-left) + var(--val-width) + 16px);
  font-family: 'Shippori Mincho B1', serif;
  font-weight: 400;
  font-size: 1.125rem;         /* 空室検索フォーム ラベル/単位: 18px */
  line-height: 26px;
  color: #000;
  white-space: nowrap;
  pointer-events: none;
}

/* === 「泊」の単位 (stay_489ban には 489ban が <span> を出してくれない → ::after で補う) ===
   位置式は 他のセル dd span と同じ: dl基準 left = var(--val-left) + var(--val-width) + 16 */
.l-overlay--vacant form[name="searchForm489ban"] .stay_489ban::after {
  content: '泊';
  position: absolute;
  top: 9px;
  left: calc(var(--val-left) + var(--val-width) + 16px);
  font-family: 'Shippori Mincho B1', serif;
  font-weight: 400;
  font-size: 1.125rem;         /* 空室検索フォーム ラベル/単位: 18px */
  line-height: 26px;
  color: #000;
  white-space: nowrap;
  pointer-events: none;
}

/* === セル個別: 位置 + 値罫線(--val-left/--val-width) === */

/* date_489ban (宿泊日) - panel基準 left=200, グレー帯ローカル left=80
   ラベル「宿泊日」(54幅), 値罫線 left=88, w=214 */
.l-overlay--vacant form[name="searchForm489ban"] .date_489ban {
  left: 80px;
  top: 59px;
  width: 430px;     /* セル+日付未定込 */
  --val-left: 88px;
  --val-width: 214px;
}

/* stay_489ban (泊数) - panel基準 left=670, グレー帯 left=550
   ラベル「泊数」(36幅), 値罫線 left=70, w=70 */
.l-overlay--vacant form[name="searchForm489ban"] .stay_489ban {
  left: 550px;
  top: 59px;
  width: 174px;     /* 縦罫線 ~ 「泊」の右端 */
  --val-left: 70px;
  --val-width: 70px;
}

/* room_489ban (部屋数) - panel基準 left=884, グレー帯 left=764
   ラベル「部屋数」(54幅), 値罫線 left=88, w=70 */
.l-overlay--vacant form[name="searchForm489ban"] .room_489ban {
  left: 764px;
  top: 59px;
  width: 192px;
  --val-left: 88px;
  --val-width: 70px;
}

/* person_489ban (大人) - panel基準 left=1116, グレー帯 left=996 */
.l-overlay--vacant form[name="searchForm489ban"] .person_489ban:has(#adult) {
  left: 996px;
  top: 59px;
  width: 174px;
  --val-left: 70px;
  --val-width: 70px;
}

/* person_489ban (子供) - panel基準 left=1330, グレー帯 left=1210 */
.l-overlay--vacant form[name="searchForm489ban"] .person_489ban:has(#children) {
  left: 1210px;
  top: 59px;
  width: 174px;
  --val-left: 70px;
  --val-width: 70px;
}

/* === 宿泊日 input[type="date"] === */
.l-overlay--vacant form[name="searchForm489ban"] input[type="date"] {
  position: absolute;
  top: 0;
  left: var(--val-left);
  width: var(--val-width);
  height: 50px;
  padding: 0;
  border: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-family: 'Cormorant Infant', serif;
  font-weight: 400;
  font-size: 2rem;             /* 空室検索 数値入力(泊数/部屋数等): 32px */
  line-height: 39px;
  letter-spacing: 1.6px;
  color: #222;
  cursor: pointer;
  outline: none;
}
/* iOS Safari/Chrome の date picker indicator を消し、 dd::before の自前矢印を使う */
.l-overlay--vacant form[name="searchForm489ban"] input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.l-overlay--vacant form[name="searchForm489ban"] input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
}

/* === 「日付未定」 チェックボックス + ラベル ===
   Figma 1920: chk x=526(panel基準486), top=505(panel基準237) / グレー帯ローカル left=406, top=73
   label x=558(panel基準518) / グレー帯ローカル left=438, top=68
   date_489ban の left=80 を起点とすると、 セル基準 chk left=326, label left=358 */
.l-overlay--vacant form[name="searchForm489ban"] .date_489ban dd > label {
  position: absolute;
  top: 9px;
  left: 326px;          /* セル左端から chkまで */
  display: inline-flex;
  align-items: center;
  gap: 12px;            /* chk(20) + gap → label開始 358 = 326+20+12 */
  margin: 0;
  padding: 0;
  font-family: 'Shippori Mincho B1', serif;
  font-weight: 400;
  font-size: 1.125rem;         /* 「日付未定」ラベル: 18px */
  line-height: 26px;
  color: #000;
  cursor: pointer;
  white-space: nowrap;
}
/* チェックボックス本体 (20×20, br2, border #707070, 白背景) */
.l-overlay--vacant form[name="searchForm489ban"] .date_489ban input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  background: #fff;
  border: 1px solid #707070;
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  vertical-align: middle;
}
.l-overlay--vacant form[name="searchForm489ban"] .date_489ban input[type="checkbox"]:checked {
  background: #ec7d5f;
  border-color: #ec7d5f;
}
.l-overlay--vacant form[name="searchForm489ban"] .date_489ban input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 6px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* === 検索ボタン (panel基準 left=1504, top=220, 160×56, br5) === */
.l-overlay--vacant form[name="searchForm489ban"] button[name="searchButton489ban"] {
  position: absolute;
  /* グレー帯ローカル: Figma x=1544, グレー帯 x=120 → 1544-120=1424 / Figma y=488, グレー帯 y=432 → 488-432=56 */
  left: 1424px;
  top: 56px;
  width: 160px;
  height: 56px;
  /* テキストを縦中央に配置 (Figmaがズレているため添付PNGに準拠) */
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 5px;
  background: linear-gradient(to bottom, #ec7d5f, #ffb09b);
  font-family: 'Shippori Mincho B1', serif;
  font-weight: 500;
  font-size: 1.125rem;         /* 検索ボタン: 18px */
  line-height: 26px;
  letter-spacing: 0.9px;
  color: #fff;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: opacity .2s ease;
}
.l-overlay--vacant form[name="searchForm489ban"] button[name="searchButton489ban"]:hover {
  opacity: 0.9;
}
.l-overlay--vacant form[name="searchForm489ban"] button[name="searchButton489ban"]::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background: url(/assets/images/icons/arrow_right.webp) no-repeat center / contain;
  filter: invert(1);   /* オレンジグラデ背景 → 白矢印 (他ボタンと統一) */
}

/* === 下部リンク (3つ, panel基準 top=369) ===
   Figma 1920(panel基準): 予約確認 left=709, 会員登録 left=945, 会員ログイン left=1039
   各 li の left は絶対指定 (Figma 数値ベース、 文字幅変動の影響を受けないため) */
.l-overlay--vacant .p-vacant__links {
  position: absolute;
  top: 369px;
  left: 0;
  width: 100%;
  height: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.l-overlay--vacant .p-vacant__links li {
  position: absolute;
  top: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.l-overlay--vacant .p-vacant__links li:nth-child(1) { left: 709px; }   /* 予約確認 749-40 */
.l-overlay--vacant .p-vacant__links li:nth-child(2) { left: 945px; }   /* 会員登録 985-40 */
.l-overlay--vacant .p-vacant__links li:nth-child(3) { left: 1039px; }  /* 会員ログイン 1079-40 */

.l-overlay--vacant .p-vacant__links a {
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
  font-size: 1rem;             /* 空室検索 下部リンク: 15px→16px */
  line-height: 22px;
  letter-spacing: 0.75px;
  color: #222;
  text-decoration: underline;
  white-space: nowrap;
}
.l-overlay--vacant .p-vacant__links a:hover {
  opacity: 0.7;
}

/* ==========================================================
   OVERLAY VACANT [C] 1024-1680px : Figma 1440基準 (2行レイアウト) + 線形補間
   - panel: max(1264px, calc(100vw - 40px))   余白20維持
   - 1024-1304: panel 1264 固定 (中身ぴったり)
   - 1305-1680: panel = vw-40 (余白20で拡大縮小)
   - 中身は panel center 基準で対称配置 (Figma 1440版が左右対称構造のため)
   - 各 dl: max(固定値, 50vw基準calc) で 1024 でも収まるよう min 値を設定
   ========================================================== */
@media (max-width: 1680px) and (min-width: 1024px) {
  /* パネル */
  .l-overlay--vacant .l-overlay__panel {
    width: max(1264px, calc(100% - 40px));   /* v36: 100vw→100% (スクロールバー幅除外)。min 1264 はフォーム固定配置の都合で維持 */
    height: 625px;
  }

  /* × ボタン: panel center 配置 → viewport-right 距離は 70.41 固定 */
  .l-overlay--vacant .p-vacant__close {
    top: max(70px, calc(50% - 262.5px));
    right: 70.41px;
  }

  /* グレー帯: panel - 160 (左右80余白) */
  .l-overlay--vacant .p-vacant__form-wrap {
    width: calc(100% - 160px);
    height: 326px;
  }

  /* === 各 dl: panel center 基準で対称配置 (panel.center.viewport = 50vw) ===
     1305-1680: form基準 left = 50vw - X (X は dl 毎の固定値)
     1024-1304: form基準 left = 固定値 (panel 1264 固定なので)
     → max() で両方カバー
     基準値: 1440 viewport で Figma の form基準 left に一致
     - stay/date: 50vw - 517 (1440 で 203)
     - room: 50vw - 303 (1440 で 417, +214)
     - adult: 50vw - 71 (1440 で 649, +446)
     - child: 50vw + 143 (1440 で 863, +660)
     min 値 (1264 panel での値, panel.center=632, form.left=panel.left+80, viewport基準で計算後 form基準に変換):
     - stay/date: 135
     - room: 349
     - adult: 581
     - child: 795
  */
  .l-overlay--vacant form[name="searchForm489ban"] .date_489ban {
    left: max(135px, calc(50vw - 517px));
    top: 50px;
  }
  .l-overlay--vacant form[name="searchForm489ban"] .stay_489ban {
    left: max(135px, calc(50vw - 517px));
    top: 140px;
  }
  .l-overlay--vacant form[name="searchForm489ban"] .room_489ban {
    left: max(349px, calc(50vw - 303px));
    top: 140px;
  }
  .l-overlay--vacant form[name="searchForm489ban"] .person_489ban:has(#adult) {
    left: max(581px, calc(50vw - 71px));
    top: 140px;
  }
  .l-overlay--vacant form[name="searchForm489ban"] .person_489ban:has(#children) {
    left: max(795px, calc(50vw + 143px));
    top: 140px;
  }

  /* === 検索ボタン: panel center 配置 320×56 ===
     1440 viewport で form基準 left=460 (= 50vw - 260)
     1264 panel での form基準 left = 392
  */
  .l-overlay--vacant form[name="searchForm489ban"] button[name="searchButton489ban"] {
    left: max(392px, calc(50vw - 260px));
    top: 230px;
    width: 320px;
  }

  /* === 下部リンク: panel center 基準 ===
     panel基準 1440版: 予約確認 left=489, 会員登録 left=725, 会員ログイン left=819
     panel center=700 → offset: 予約確認=-211, 会員登録=+25, 会員ログイン=+119
     viewport基準: 50vw + offset
     min 値 (panel 1264 固定時, panel.center.viewport=vw/2 だが panel.left は変動なし、 結果として固定値)
  */
  .l-overlay--vacant .p-vacant__links {
    top: 529px;
  }
  .l-overlay--vacant .p-vacant__links li:nth-child(1) { left: max(421px, calc(50vw - 231px)); }   /* 予約確認 */
  .l-overlay--vacant .p-vacant__links li:nth-child(2) { left: max(657px, calc(50vw + 5px)); }     /* 会員登録 */
  .l-overlay--vacant .p-vacant__links li:nth-child(3) { left: max(751px, calc(50vw + 99px)); }    /* 会員ログイン */
}

/* ==========================================================
   OVERLAY VACANT [B] 1681-1920px : 1920基準 + 線形補間で縮小
   - panel = calc(100vw - 80px)   余白40維持 (1920→1840, 1681→1601)
   - 中身は1920基準そのまま、 ただし dl 間の隙間 g を線形補間
     1920基準: g = 40 (Figma)
     1681基準: g = 7.7 (グレー帯1441 - 80(左) - 1144(5dl) - 160(btn) - 18.5(右余白) = 38.5 → 各 g=7.7)
     右余白 96 → 18.5 で連動 (g/(g+r) 比固定)
   - 各 dl の left は 1920基準値 + g の倍数で線形補間
   ========================================================== */
@media (max-width: 1920px) and (min-width: 1681px) {
  /* パネル: 余白40維持。v36: 100vw→100% (スクロールバー幅除外、plan と同修正) */
  .l-overlay--vacant .l-overlay__panel {
    width: calc(100% - 80px);
  }

  /* × ボタン: panel center 配置 → viewport-right距離は 90.41 固定 */
  .l-overlay--vacant .p-vacant__close {
    right: 90.41px;
  }

  /* グレー帯: panel - 160 (左右80余白) */
  .l-overlay--vacant .p-vacant__form-wrap {
    width: calc(100% - 160px);
  }

  /* === 各 dl 間の隙間 g: 1920→40px / 1681→7.7px で線形補間 ===
     g = 13.5vw - 219.2px  (1920vw → 40 / 1681vw → 7.74≈7.7)
     date.right(80+430=510) を起点に g 倍積算で各 dl を配置 */
  .l-overlay--vacant form[name="searchForm489ban"] {
    --g: calc(13.5vw - 219.2px);
  }
  /* date は 80px 固定 (左余白) */
  .l-overlay--vacant form[name="searchForm489ban"] .stay_489ban {
    left: calc(510px + var(--g));               /* date.right + g */
  }
  .l-overlay--vacant form[name="searchForm489ban"] .room_489ban {
    left: calc(684px + var(--g) * 2);           /* stay.right(510+g+174=684+g) + g */
  }
  .l-overlay--vacant form[name="searchForm489ban"] .person_489ban:has(#adult) {
    left: calc(876px + var(--g) * 3);           /* room.right(684+2g+192=876+2g) + g */
  }
  .l-overlay--vacant form[name="searchForm489ban"] .person_489ban:has(#children) {
    left: calc(1050px + var(--g) * 4);          /* adult.right + g */
  }
  .l-overlay--vacant form[name="searchForm489ban"] button[name="searchButton489ban"] {
    left: calc(1224px + var(--g) * 5);          /* child.right + g */
  }

  /* === 下部リンク: panel center 追従 ===
     panel基準 1920版: 予約確認 left=709, 会員登録 left=945, 会員ログイン left=1039
     panel center=920 → offset: -211, +25, +119
     panel.width = 100vw - 80, panel.center.viewport = 50vw
     リンク panel基準 left = 50vw - 40 + offset = 50vw - 251 / 50vw - 15 / 50vw + 79 */
  .l-overlay--vacant .p-vacant__links li:nth-child(1) { left: calc(50vw - 251px); }
  .l-overlay--vacant .p-vacant__links li:nth-child(2) { left: calc(50vw - 15px); }
  .l-overlay--vacant .p-vacant__links li:nth-child(3) { left: calc(50vw + 79px); }
}

/* ==========================================================
   OVERLAY VACANT [D] <=1023px : SP 全画面 (v38 新規、デザインPNG準拠 390基準)
   - 上下左右の余白なし・全画面白背景 (menu [D] と同方式)
   - PC の absolute 配置を縦積み(static/relative)に戻し、
     セル内部の仕組み (dl::before 縦罫線 / --val-left / --val-width / dd::after 下線 /
     dd::before ∨矢印 / 単位 span) はそのまま流用
   - レイアウト: タイトル中央 → グレー箱(左右25余白)内に
     宿泊日(+日付未定 下段) / 泊数 / 部屋数 / 大人 / 子供 を縦積み → 検索ボタン中央
     → 箱の下に 予約確認(1行目) + 会員登録・会員ログイン(2行目) 中央
   ========================================================== */
@media (max-width: 1023px) {
  .l-overlay--vacant {
    padding: 0;
  }
  .l-overlay--vacant .l-overlay__panel {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 100%;
    margin: 0;
    border-radius: 0;
    padding: 0 0 40px;
  }

  /* タイトル: 静的フローで中央 */
  .l-overlay--vacant .p-vacant__title {
    position: static;
    transform: none;
    padding-top: 44px;
    text-align: center;
    line-height: 32px;
  }

  /* ×: 右上固定 (plan SP と同じ 41px ボタン + 34px 線) */
  .l-overlay--vacant .p-vacant__close {
    top: 15px;
    right: 15px;
  }
  .l-overlay--vacant .p-vacant__close::before,
  .l-overlay--vacant .p-vacant__close::after {
    width: 34px;
  }

  /* グレー箱: 静的フロー、左右25余白 */
  .l-overlay--vacant .p-vacant__form-wrap {
    position: static;
    width: auto;
    height: auto;
    margin: 28px 25px 0;
    padding: 33px 0 32px;
  }
  .l-overlay--vacant #search_489ban,
  .l-overlay--vacant form[name="searchForm489ban"] {
    height: auto;
  }

  /* セル共通: 縦積み。値列は全セル統一 (--val-left: 80) */
  .l-overlay--vacant form[name="searchForm489ban"] dl {
    position: relative;
    margin: 0 0 32px 30px;
  }
  .l-overlay--vacant form[name="searchForm489ban"] dt {
    left: 11px;
  }
  .l-overlay--vacant form[name="searchForm489ban"] .date_489ban {
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    min-height: 50px;
    padding-bottom: 84px;   /* 日付未定 行ぶんの場所 (下の dd > label が absolute で入る) */
    margin-bottom: 0;       /* 84px が次セルとの間隔を兼ねる */
    --val-left: 80px;
    --val-width: min(198px, calc(100vw - 192px));   /* 390で198、狭幅でも箱内に収まる */
  }
  .l-overlay--vacant form[name="searchForm489ban"] .stay_489ban,
  .l-overlay--vacant form[name="searchForm489ban"] .room_489ban,
  .l-overlay--vacant form[name="searchForm489ban"] .person_489ban:has(#adult),
  .l-overlay--vacant form[name="searchForm489ban"] .person_489ban:has(#children) {
    left: auto;
    top: auto;
    width: auto;
    --val-left: 80px;
    --val-width: 70px;
  }

  /* 日付未定: 宿泊日セルの下段 */
  .l-overlay--vacant form[name="searchForm489ban"] .date_489ban dd > label {
    top: 75px;
    left: 77px;
  }

  /* 検索ボタン: 中央 159×56 */
  .l-overlay--vacant form[name="searchForm489ban"] button[name="searchButton489ban"] {
    position: relative;
    left: auto;
    top: auto;
    margin: 4px auto 0;
    width: 159px;
    height: 56px;
  }

  /* 下部リンク: 1行目=予約確認(全幅中央) / 2行目=会員登録・会員ログイン */
  .l-overlay--vacant .p-vacant__links {
    position: static;
    height: auto;
    margin: 28px 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 44px;
  }
  .l-overlay--vacant .p-vacant__links li {
    position: static;
  }
  .l-overlay--vacant .p-vacant__links li:nth-child(1) {
    flex-basis: 100%;
    text-align: center;
  }
}

/* ==========================================================
   p-plan__filter: 中間幅(1024〜1346px)の崩れ対策
   ラベルを1行化して独立行に、ボタン3つは折返さず下段中央に整列。
   (1347px以上は1行レイアウト維持 / 1023px以下は縦積みSPレイアウト)
   ※閾値1346: 1行レイアウト必要幅 ≈ 109+ラベル158+48+gap72+ボタン780 = 1167px。
     タブレット帯の container = 100vw-180px が 1167 を割るのは 1347px 未満
     (旧1320では 1321〜1346px の帯でラベル改行+空室カレンダーはみ出しが発生) */
@media (max-width: 1346px) and (min-width: 1024px) {
  .p-plan__filter {
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    gap: 14px 18px;
    height: auto;
    min-height: 112px;
    padding: 18px 24px;
  }
  .p-plan__filter-label {
    flex-basis: 100%;
    margin: 0;
    text-align: center;
    white-space: nowrap;
  }
  .p-plan__filter-btn {
    width: 240px;
    flex-shrink: 0;
  }
}

/* ==========================================================
   OVERLAY PLAN (おすすめの宿泊プラン画面) — v35 新規
   - 右サイド「宿泊プラン」(.l-sidemenu__btn--plan) から展開
   - 中身はトップ .p-plan と同一マークアップ (overlay-plan.html partial)。
     カード/見出し/フィルターの見た目は既存 .p-plan__* スタイルをそのまま流用し、
     ここは「パネル内に収める」ための差分オーバーライドのみ
   - z-index / 開閉アニメは .l-overlay 共通基盤、×ボタンは vacant と同じ見た目
   - スライダーのはみ出しは画面右端ではなく「パネル右端」までとし、
     パネル右端でクリップ (トップと同じ「右へはみ出ていく」見え方をパネル内で再現)
   ========================================================== */

/* === パネル: 幅は vacant と同じ余白ルール (1920で1840 = 余白40×2)、高さはコンテンツ依存
   ※ 100vw ではなく 100% (.l-overlay の content box 基準) を使う:
     panel が縦に長く .l-overlay が縦スクロールする時、100vw はスクロールバー幅を含むため
     横はみ出し(横スクロールバー)が出る。% なら scrollbar を除いた実効幅 === */
.l-overlay--plan .l-overlay__panel {
  width: calc(100% - 80px);
  max-width: 1840px;
  height: auto;
  min-height: 0;
}

/* === セクション余白: トップの padding:100px 0 0 をパネル用に上下バランスへ === */
.l-overlay--plan .p-plan {
  padding: 70px 0 80px;
}

/* === フィルター帯はパネル内 inner 幅いっぱい === */
.l-overlay--plan .p-plan__filter {
  width: 100%;
  max-width: none;
}

/* === ×ボタン (vacant と同じ見た目: 41px・56px線・#222。panel スクロール時も見えるよう fixed)
   right: パネル右端からの内側オフセット ≈50px。
     1920以上: panel 1840 中央 → 50vw - 870 (1920でちょうど 90px)
     1681-1920: panel = 100vw-80 (余白40) → 90px 固定
   top: パネル想定高さ ≈1000px の縦中央配置から +50 → 50vh - 450、viewport が低い時は 70px 固定 === */
.l-overlay--plan .p-planov__close {
  position: fixed;
  top: max(70px, calc(50vh - 450px));
  right: max(90px, calc(50vw - 870px));
  width: 41px;
  height: 41px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity .3s ease-out .1s;
}
.l-overlay--plan .p-planov__close::before,
.l-overlay--plan .p-planov__close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 2px;
  background: #222;
}
.l-overlay--plan .p-planov__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.l-overlay--plan .p-planov__close::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.l-overlay--plan.is-open .p-planov__close { opacity: 1; }

/* === PC: inner はパネル基準の左右80余白、グリッドはパネル右端までブリード === */
@media (min-width: 1024px) {
  .l-overlay--plan .p-plan__inner {
    width: auto;
    max-width: none;
    margin: 0 80px;
  }
  .l-overlay--plan .p-plan__grid {
    margin-right: -80px;   /* inner の右余白80を打ち消してパネル右端まで(50%-50vw は使わない) */
  }
}

/* === 1024-1680px: vacant [C] と同じ余白20ルール === */
@media (max-width: 1680px) and (min-width: 1024px) {
  .l-overlay--plan .l-overlay__panel {
    width: calc(100% - 40px);
  }
  .l-overlay--plan .p-planov__close {
    right: 70px;
  }
  .l-overlay--plan .p-plan__inner {
    margin: 0 60px;
  }
  .l-overlay--plan .p-plan__grid {
    margin-right: -60px;
  }
}

/* === SP (<=1023px): SP底固定 CTA「プランを探す」(.p-spcta__btn--plan) から展開 ===
   v38: 上下左右の余白なし・全画面白背景 (空室検索SPデザイン・menu [D] と同方式)。
   inner / カード / nav / filter は SP base (head→grid→nav→filter の order 構成) を流用。
   グリッドだけ画面右端までブリード。×はパネルがスクロールしても見えるよう fixed */
@media (max-width: 1023px) {
  .l-overlay--plan {
    padding: 0;
  }
  .l-overlay--plan .l-overlay__panel {
    width: 100%;
    max-width: 100%;
    min-height: 100%;
    margin: 0;
    border-radius: 0;
  }
  .l-overlay--plan .p-plan {
    padding: 56px 0 0;   /* 上は × ぶん確保 / 下は filter の margin-bottom 40px が余白になる */
  }
  .l-overlay--plan .p-plan__grid {
    margin-right: -25px;   /* SP inner の右 padding 25px を打ち消して画面右端まで */
  }
  .l-overlay--plan .p-planov__close {
    position: fixed;       /* パネル縦スクロール時も右上に常時表示 */
    top: 15px;
    right: 15px;
  }
  .l-overlay--plan .p-planov__close::before,
  .l-overlay--plan .p-planov__close::after {
    width: 34px;
  }
}

/* ==========================================================
   OVERLAY ROOM (客室詳細画面)  v52 新規
   - お部屋タイプカード (.detail-card) クリックで展開 (rooms ページのみ)
   - z-index / 暗幕 / 白パネル角丸10 / フェード+slide-up は .l-overlay 共通基盤を流用
     (vacant / plan と同じ見た目に統一)
   - × ボタンは vacant / plan と同じ 細線×・fixed
   - 中身は main.js「4d. Overlay room」が流し込む。予約ボタンは共通 .p-common__btn
   ========================================================== */

/* --- カードをクリック可能に (rooms / .detail-card 全般) --- */
.detail-card.is-clickable { cursor: pointer; display: flex; flex-direction: column; }
.detail-card.is-clickable:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 3px; }
/* カード本文を縦フレックスにして「客室の詳細を見る ＋」をカード下端へ揃える */
.detail-card.is-clickable .detail-card-body { flex: 1 1 auto; display: flex; flex-direction: column; }
/* 「客室の詳細を見る ＋」アフォーダンス (.detail-card-body 末尾に main.js が追加)
   ・margin-top:auto でカード下端に揃える / hover では動かさない
   ※ .detail-card のホバーズーム/translateY は rooms 既存CSSが持つため重複させない */
.detail-card-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;                /* カード下端へ揃える */
  padding-top: 16px;               /* 直上 specs との最小間隔 */
  font-family: var(--font-jp-mincho);
  font-size: 0.9375rem;            /* 15px */
  letter-spacing: 0.06em;
  color: var(--c-primary);
}
.detail-card-more i { font-style: normal; font-size: 17px; line-height: 1; }

/* === パネル: vacant の左右余白ルールを踏襲しつつ 最大1080・高さコンテンツ依存 === */
.l-overlay--room .l-overlay__panel {
  width: calc(100% - 80px);
  max-width: 1240px;               /* PC: もっと横幅を取る */
  height: min(88vh, 680px);        /* 矩形パネル。左=写真(元比率) / 右=長い内容は内部スクロール */
  max-height: 92vh;
  min-height: 0;
  overflow: hidden;                /* 左メディア画像をパネル角丸でクリップ */
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
}

/* === × ボタン (vacant / plan と同じ見た目: 41px・56px線・#222。fixed で常時表示) === */
.l-overlay--room .p-room__close {
  position: fixed;
  top: max(28px, calc(50vh - 316px));
  right: max(28px, calc(50vw - 596px));
  width: 41px;
  height: 41px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity .3s ease-out .1s;
}
.l-overlay--room .p-room__close::before,
.l-overlay--room .p-room__close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 2px;
  background: #222;
}
.l-overlay--room .p-room__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.l-overlay--room .p-room__close::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.l-overlay--room.is-open .p-room__close { opacity: 1; }

/* === 左: メディア(スライダー) — 明るい地色で dev トーンに統一 === */
.p-room__media {
  display: flex;
  flex-direction: column;
  justify-content: center;         /* 写真を元比率で表示→上下に均等なマット */
  min-height: 0;
  overflow: hidden;
  background: var(--c-bg-soft);    /* #f2f6fa */
}
.p-room__stage {
  position: relative;
  flex: none;
  aspect-ratio: 7 / 5;             /* 写真を元サイズ比率(≒780×560)で全体表示する枠 */
  overflow: hidden;
  background: var(--c-bg-soft);
  touch-action: pan-y;             /* 横スワイプ(写真送り)はJSで処理、縦スクロールはブラウザに委譲 */
}
.p-room__main {
  width: 100%;
  height: 100%;
  object-fit: contain;             /* 元サイズの比率で全体表示(トリミングしない) */
  display: block;
  opacity: 0;
  transition: opacity .35s ease;
}
.p-room__main.is-ready { opacity: 1; }
.p-room__main.is-contain { object-fit: contain; background: #fff; }   /* 間取り図 */

.p-room__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: #333;
  font-size: 24px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
  transition: background .2s ease, color .2s ease;
}
.p-room__nav:hover { background: var(--c-primary); color: #fff; }
.p-room__nav--prev { left: 14px; }
.p-room__nav--next { right: 14px; }

.p-room__counter {
  position: absolute;
  right: 14px;
  bottom: 12px;
  z-index: 3;
  background: rgba(34, 34, 34, 0.6);
  color: #fff;
  font-family: var(--font-en-serif);
  font-size: 13px;
  letter-spacing: 0.06em;
  padding: 4px 11px;
  border-radius: 20px;
}
.p-room__caption {
  position: absolute;
  left: 14px;
  bottom: 12px;
  z-index: 3;
  background: rgba(34, 34, 34, 0.6);
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 4px;
}
.p-room__thumbs {
  display: flex;
  gap: 8px;
  padding: 12px;
  background: #fff;
  overflow-x: auto;
}
.p-room__thumb {
  flex: 0 0 auto;
  width: 74px;
  height: 56px;
  border-radius: 3px;
  overflow: hidden;
  opacity: 0.55;
  border: 2px solid transparent;
  transition: opacity .2s ease, border-color .2s ease;
  padding: 0;
}
.p-room__thumb img { width: 100%; height: 100%; object-fit: cover; }
.p-room__thumb.is-active { opacity: 1; border-color: var(--c-primary); }

/* === 右: 情報 === */
.p-room__info {
  padding: clamp(28px, 3vw, 44px);
  min-height: 0;
  overflow-y: auto;                /* 長いアメニティ等は右カラム内でスクロール */
}
.p-room__en {
  display: inline-block;           /* カードの .detail-card-tag と統一 (英字+下線) */
  font-family: var(--font-en-serif);
  font-size: 0.875rem;             /* 14px */
  letter-spacing: 0.15em;
  color: var(--c-primary);
  padding-bottom: 2px;
  border-bottom: 1px solid var(--c-primary);
  margin-bottom: 12px;
}
.p-room__title {
  font-family: var(--font-jp-mincho);
  font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);   /* 22 → 28 */
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--c-text);
  margin-bottom: 18px;
}
.p-room__desc {
  font-size: 0.9375rem;            /* 15px */
  line-height: 2;
  letter-spacing: 0.04em;
  color: var(--c-text-sub);
  margin-bottom: 26px;
}
.p-room__spec {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 28px;
  font-size: 0.875rem;             /* 14px */
}
.p-room__spec th,
.p-room__spec td {
  display: block;                  /* th/td を縦積み (ラベル上・値下) */
  width: auto;
  text-align: left;
  vertical-align: top;
}
.p-room__spec th {
  font-family: var(--font-jp-mincho);
  font-weight: 500;
  background: var(--c-bg-cream);
  color: var(--c-text);
  padding: 10px 14px;
  line-height: 1.6;
}
.p-room__spec td {
  padding: 10px 14px 16px;
  line-height: 1.8;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--c-gray-line);
  color: var(--c-text-sub);
}
.p-room__spec .muted { color: var(--c-text-muted); font-size: 12px; }

.p-room__cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* 予約ボタンは共通 .p-common__btn を全幅で (白bg→hover #ec7d5f+白文字+矢印) */
.p-room__cta .p-common__btn { width: 100%; }
/* CTA「このお部屋に泊まれるプラン」= ピンクグラデ (トップのアクセスCTAと同タイプ) */
.p-room__plan-btn {
  width: 100%;
  height: 56px;
  border-radius: 5px;
  background: linear-gradient(to bottom, var(--c-primary), var(--c-primary-light));
  font-family: var(--font-jp-mincho);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.06em;
  color: var(--c-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: filter 0.2s ease;
}
.p-room__plan-btn::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background: url(/assets/images/icons/arrow_right.webp) no-repeat center / contain;
  filter: invert(1);
}
.p-room__plan-btn:hover { filter: brightness(1.05); }
.p-room__note {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--c-text-muted);
}
/* SP用テキスト閉じる: PC は隠す (下の @media で SP のみ表示) */
.p-room__close-text { display: none; }

/* === 1024-1680px: vacant / plan [C] と同じ 左右余白20ルール === */
@media (max-width: 1680px) and (min-width: 1024px) {
  .l-overlay--room .l-overlay__panel {
    width: calc(100% - 40px);
  }
}

/* === SP (<=1023px): 全画面白・縦積み (plan [D] と同方式) === */
@media (max-width: 1023px) {
  .l-overlay--room {
    padding: 0;
  }
  .l-overlay--room .l-overlay__panel {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    min-height: 100%;
    margin: 0;
    border-radius: 0;
    grid-template-columns: 1fr;
  }
  .p-room__stage { flex: none; aspect-ratio: 7 / 5; min-height: 0; }
  .p-room__info { padding: 28px 20px 40px; overflow: visible; }
  /* SP: 予約ボタンの下に控えめなテキスト閉じるを表示 */
  .p-room__close-text {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 12px;
    background: none;
    border: none;
    text-align: center;
    font-size: 0.875rem;
    letter-spacing: 0.08em;
    color: var(--c-text-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .l-overlay--room .p-room__close {
    top: 15px;
    right: 15px;
  }
  .l-overlay--room .p-room__close::before,
  .l-overlay--room .p-room__close::after {
    width: 34px;
  }
}

/* ============================================================
   15. SP タッチ&可読性 微調整 (2026-06-16)
   ・本文 14px → 15px の底上げ / カルーセル操作の当たり判定 44px 確保 /
     見出しの語中・1文字孤立改行を解消 / フッター補助リンクのタップ間隔確保。
   ・既存ルールは変更せず、SP(≤1023px)限定の上書きのみを追加。
   ============================================================ */
/* SP限定の改行 <br class="u-brsp"> — PCでは無効 */
.u-brsp { display: none; }

@media (max-width: 1023px) {
  /* --- 本文の底上げ: clamp 下限の 14px を SP のみ 15px へ --- */
  .p-ways__lead,
  .p-cuisine__lead,
  .p-landscape__lead,
  .p-rooms__lead,
  .p-access__lead,
  .p-sunset__lead {
    font-size: 0.9375rem;            /* 15px */
  }
  /* 客室詳細オーバーレイの仕様表も 14→15px (SPでの可読性) */
  .p-room__spec {
    font-size: 0.9375rem;            /* 15px */
  }

  /* --- カルーセル/送り操作: 見た目はそのまま、当たり判定だけ 44px に拡張 --- */
  .p-topics__nav button,
  .p-plan__nav button,
  .p-news__bnr-btn,
  .p-hero__counter-btn {
    position: relative;
  }
  .p-topics__nav button::after,
  .p-plan__nav button::after,
  .p-news__bnr-btn::after,
  .p-hero__counter-btn::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }

  /* --- 見出しの折返しを均す (語中・1文字孤立を回避) --- */
  /* 風景見出し: SPのみ「22万平米の敷地で / 楽しむ、 / 絶景さんぽ。」と語句単位で改行 */
  .u-brsp { display: inline; }
  /* サンセット見出しは語間スペースで改行 (サンセットサービス / インフォメーション) */
  .p-sunset__head-jp {
    word-break: keep-all;
  }
  /* フッターヒーロー見出し: SP は字間を詰めて「特等席で、」を1行に収める */
  .p-footerHero__title {
    letter-spacing: 0.12em;
    text-wrap: balance;
  }

  /* --- 本文leadの手動改行をSPで解除: 細かい改行→自然な連続フロー --- */
  /* PCの<br>はSPだと1文字孤立(「幸、」等)を生むため無効化。段落区切りu-parabrは維持 */
  .p-cuisine__lead br,
  .p-ways__lead br,
  .p-landscape__lead br,
  .p-rooms__lead br,
  .p-access__lead br { display: none; }
  .p-cuisine__lead br.u-parabr,
  .p-landscape__lead br.u-parabr,
  .p-rooms__lead br.u-parabr { display: inline; }

  /* --- フッター補助リンク: 各リンクを ~44px のタップ行に --- */
  .l-footer__sublinks {
    gap: 2px;
  }
  .l-footer__sublinks a {
    display: inline-block;
    padding: 12px 16px;
  }
  /* インライン補助ナビ(お問い合わせ/パンフレット/団体)も行高で触りやすく */
  .l-footer__nav {
    line-height: 34px;
  }
}

/* ==========================================================
   下層ページ追加調整 (2026-06-18 hoshi)
   各ページ inline <style> を .page-body / body:has(.sub-hero) スコープで上書き
   （詳細度を上げて inline ルールに勝たせる方式。各下層HTMLは無変更）
   ========================================================== */

/* 要望1: アンカーナビ 文字↔矢印の間隔 (PC 縦並び 9px→2px) */
@media (min-width: 1024px) {
  .page-body .anchor-nav a { gap: 2px; }
}

/* 要望3: PC 下層 sub-hero をヘッダー背後まで広げる。
   ヘッダー(白い角丸バー・カラーロゴ・黒ナビ)はトップページと完全に同じまま。
   sub-hero を top:0 に上げ、ヘッダーの裏(左右・上端)まで画像を回り込ませる
   = トップの p-hero とヘッダーの重なり方を揃える */
@media (min-width: 1024px) {
  body:has(.sub-hero) .page-body { padding-top: 0; }
}

/* 要望4(SP): 下層もトップと同じく sub-hero をヘッダー裏(top:0)まで。
   ヘッダー(ロゴ/LANG/MENU)は従来どおり fixed 追従・デザイン/サイズ変更なし */
@media (max-width: 1023px) {
  body:has(.sub-hero) .page-body { padding-top: 0; }
}

/* 要望6(SP): ロゴの下に「このページの内容▽」を背景なしで置く (main.js が生成・下層のみ)。
   ヘッダーと一緒に追従。タップで白背景プルダウン (= anchor-nav と同内容) */
.sp-pagenav { display: none; }
@media (max-width: 1023px) {
  body:has(.sub-hero) .sp-pagenav {
    display: block;
    position: fixed;
    top: calc(56 * var(--sp-vw));   /* ヘッダー(ロゴ)の真下 */
    left: calc(16 * var(--sp-vw));
    z-index: 94;                    /* ヘッダー(100)の下・本文の上 */
  }
  .sp-pagenav__toc { position: relative; }
  .sp-pagenav__toc-trigger {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 8px 0 3px;
    font-family: var(--font-jp-sans); font-size: 0.88rem; font-weight: 500;
    color: #fff; background: transparent;   /* 背景なし。sub-hero 暗背景で視認 */
    text-shadow: 0 1px 3px rgba(0,0,0,0.55);
    border-bottom: 1px solid currentColor;   /* 下線を「このページの内容」＋下矢印まで伸ばす */
  }
  /* B案: スクロールで本文(明るい背景)に入ったら黒字へ自動切替 (背景なしのまま可読性確保) */
  .sp-pagenav.is-scrolled .sp-pagenav__toc-trigger {
    color: var(--c-text);
    text-shadow: none;
  }
  .sp-pagenav__toc-chevron { width: 9px; height: 6px; margin-left: 4px; transition: transform .3s; flex-shrink: 0; }
  .sp-pagenav__toc.is-open .sp-pagenav__toc-chevron { transform: rotate(180deg); }
  /* プルダウン: 白背景でしっかり見せる */
  .sp-pagenav__toc-menu {
    position: absolute; top: calc(100% + 5px); left: 0; margin: 0; padding: 0; list-style: none;
    min-width: 220px; max-height: 64vh; overflow-y: auto;
    background: #fff; box-shadow: 0 10px 28px rgba(0,0,0,0.2); border-radius: 6px;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .25s, transform .25s, visibility .25s;
  }
  .sp-pagenav__toc.is-open .sp-pagenav__toc-menu { opacity: 1; visibility: visible; transform: translateY(0); }
  .sp-pagenav__toc-menu a {
    display: block; padding: 12px 16px; font-size: 0.875rem; color: var(--c-text);
    border-bottom: 1px solid #eef0f2; text-decoration: none;
  }
  .sp-pagenav__toc-menu li:last-child a { border-bottom: none; }
  .sp-pagenav__toc-menu a:active { background: #f2f6fa; }
}

/* sub-hero 高さ・中央テキスト余白・title/desc の SP 調整 (hoshi 2026-06-18) */
@media (max-width: 767px) {
  body:has(.sub-hero) .sub-hero { height: 380px; }
  body:has(.sub-hero) .sub-hero-content { padding-top: 4rem; }
  /* title は必ず2行に収める: SP は一回り小さく (最長ページ english-garden 基準)。hoshi 2026-06-19: 1.25→1.525rem */
  body:has(.sub-hero) .sub-hero-title { font-size: 1.525rem; }
  /* desc 英語は1行: 少し小さく＋nowrap (長文は各ページで短く意訳) */
  body:has(.sub-hero) .sub-hero-desc { font-size: 0.8125rem; white-space: nowrap; }
}

/* PC: sub-hero を高く＋中央テキストの縦位置補正 (hoshi 2026-06-18 追補) */
@media (min-width: 768px) {
  body:has(.sub-hero) .sub-hero { height: 600px; }
  body:has(.sub-hero) .sub-hero-content { padding-top: 4rem; }
}

/* SP ロゴ(差し替え後 header-logo-sp.png は横長 6.13)が白ボックス幅いっぱいで窮屈なため、
   左寄せ＋右に余白＋上下padding増で一回り小さく収める */
@media (max-width: 1023px) {
  .l-header__logo img {
    object-position: left center;
    padding: calc(9 * var(--sp-vw)) calc(20 * var(--sp-vw)) calc(9 * var(--sp-vw)) calc(8 * var(--sp-vw));
  }
}