/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-ease: initial;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: "Zen Kaku Gothic Antique", "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-gray-200: oklch(92.8% .006 264.531);
    --color-gray-900: oklch(21% .034 264.665);
    --color-white: #fff;
    --spacing: .25rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-xl: 36rem;
    --text-xs: .75rem;
    --text-sm: .875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    --font-weight-bold: 700;
    --tracking-tight: -.025em;
    --tracking-normal: 0em;
    --tracking-wide: .025em;
    --tracking-widest: .1em;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --radius-xs: .125rem;
    --radius-sm: .25rem;
    --radius-md: .375rem;
    --radius-lg: .5rem;
    --radius-xl: .75rem;
    --radius-2xl: 1rem;
    --shadow-xs: 0 1px 2px 0 #0000000d;
    --shadow-sm: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
    --shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
    --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
    --shadow-xl: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --blur-sm: 8px;
    --blur-md: 12px;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

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

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

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

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}

@layer components;

@layer utilities {
  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .inset-0 {
    inset: calc(var(--spacing) * 0);
  }

  .start {
    inset-inline-start: var(--spacing);
  }

  .end {
    inset-inline-end: var(--spacing);
  }

  .bottom-1\/4 {
    bottom: 25%;
  }

  .z-\[100\] {
    z-index: 100;
  }

  .container {
    width: 100%;
  }

  @media (min-width: 40rem) {
    .container {
      max-width: 40rem;
    }
  }

  @media (min-width: 48rem) {
    .container {
      max-width: 48rem;
    }
  }

  @media (min-width: 64rem) {
    .container {
      max-width: 64rem;
    }
  }

  @media (min-width: 80rem) {
    .container {
      max-width: 80rem;
    }
  }

  @media (min-width: 96rem) {
    .container {
      max-width: 96rem;
    }
  }

  .flex {
    display: flex;
  }

  .inline {
    display: inline;
  }

  .table {
    display: table;
  }

  .h-10 {
    height: calc(var(--spacing) * 10);
  }

  .h-\[2px\] {
    height: 2px;
  }

  .h-full {
    height: 100%;
  }

  .w-48 {
    width: calc(var(--spacing) * 48);
  }

  .w-auto {
    width: auto;
  }

  .w-full {
    width: 100%;
  }

  .w-screen {
    width: 100vw;
  }

  .flex-shrink {
    flex-shrink: 1;
  }

  .origin-left {
    transform-origin: 0;
  }

  .scale-x-0 {
    --tw-scale-x: 0%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .transform {
    transform: var(--tw-rotate-x,  ) var(--tw-rotate-y,  ) var(--tw-rotate-z,  ) var(--tw-skew-x,  ) var(--tw-skew-y,  );
  }

  .resize {
    resize: both;
  }

  .flex-col {
    flex-direction: column;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .items-center {
    align-items: center;
  }

  .justify-center {
    justify-content: center;
  }

  .overflow-hidden {
    overflow: hidden;
  }

  .rounded {
    border-radius: .25rem;
  }

  .rounded-full {
    border-radius: 3.40282e38px;
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .bg-gray-200 {
    background-color: var(--color-gray-200);
  }

  .bg-white {
    background-color: var(--color-white);
  }

  .font-sans {
    font-family: var(--font-sans);
  }

  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }

  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }

  .tracking-widest {
    --tw-tracking: var(--tracking-widest);
    letter-spacing: var(--tracking-widest);
  }

  .text-gray-900 {
    color: var(--color-gray-900);
  }

  .antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring {
    --tw-ring-shadow: var(--tw-ring-inset,  ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .filter {
    filter: var(--tw-blur,  ) var(--tw-brightness,  ) var(--tw-contrast,  ) var(--tw-grayscale,  ) var(--tw-hue-rotate,  ) var(--tw-invert,  ) var(--tw-saturate,  ) var(--tw-sepia,  ) var(--tw-drop-shadow,  );
  }

  .backdrop-filter {
    -webkit-backdrop-filter: var(--tw-backdrop-blur,  ) var(--tw-backdrop-brightness,  ) var(--tw-backdrop-contrast,  ) var(--tw-backdrop-grayscale,  ) var(--tw-backdrop-hue-rotate,  ) var(--tw-backdrop-invert,  ) var(--tw-backdrop-opacity,  ) var(--tw-backdrop-saturate,  ) var(--tw-backdrop-sepia,  );
    backdrop-filter: var(--tw-backdrop-blur,  ) var(--tw-backdrop-brightness,  ) var(--tw-backdrop-contrast,  ) var(--tw-backdrop-grayscale,  ) var(--tw-backdrop-hue-rotate,  ) var(--tw-backdrop-invert,  ) var(--tw-backdrop-opacity,  ) var(--tw-backdrop-saturate,  ) var(--tw-backdrop-sepia,  );
  }

  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }
}

section, footer, header {
  backface-visibility: hidden;
  transform: translateZ(0);
}

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

@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false
}

@property --tw-tracking {
  syntax: "*";
  inherits: false
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-ease {
  syntax: "*";
  inherits: false
}
html[data-state="loading"]{overflow:hidden}html[data-state="loading"] body{overflow:hidden}/* ブランドカラー（デザインデータから採取） */
    :root {
        --color-primary: #4C6D48;        /* メインの緑（家族で過ごす・フッター） */
        --color-primary-dark: #3d5a3a;
        --color-primary-light: #5e8159;
        --color-accent-yellow: #D1A932;  /* 友人や二家族で過ごす */
        --color-accent-brown: #8B806E;   /* ふたりで過ごす */
        --color-night: #000000;          /* 夜景セクション */
    }

    html {
        /* スムーススクロールは Lenis(JS) が担当するため CSS では指定しない
           （CSSの scroll-behavior:smooth と併用するとアンカー遷移が競合するため）。 */
        scroll-padding-top: 80px; /* 固定ヘッダーの高さ分調整 */
        overflow-x: hidden;
        width: 100%;
        -webkit-text-size-adjust: 100%;
    }

    body {
        overflow-x: hidden;
        width: 100%;
    }

    /* Custom Scrollbar for Webkit */
    ::-webkit-scrollbar {
        width: 8px;
    }
    ::-webkit-scrollbar-track {
        background: #f1f1f1;
    }
    ::-webkit-scrollbar-thumb {
        background: var(--color-primary);
        border-radius: 4px;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: var(--color-primary-dark);
    }

    /* Base Font Settings
       font-family は global.css の @theme（--font-sans / body.font-sans）で適用。
       ここでは字間のみ指定する。 */
    body {
        font-weight: 500; /* サイト全体の標準ウェイト */
        letter-spacing: 0.05em;
    }

    /* Primary color utilities（CSS変数と連動） */
    .bg-primary { background-color: var(--color-primary); }
    .bg-primary-dark { background-color: var(--color-primary-dark); }
    .bg-primary-light { background-color: var(--color-primary-light); }
    .bg-primary\/30 { background-color: color-mix(in srgb, var(--color-primary) 30%, transparent); }
    .bg-primary\/90 { background-color: color-mix(in srgb, var(--color-primary) 90%, transparent); }

    .text-primary { color: var(--color-primary); }
    .text-primary-dark { color: var(--color-primary-dark); }
    .text-primary-light { color: var(--color-primary-light); }

    .border-primary { border-color: var(--color-primary); }
    .border-b-primary { border-bottom-color: var(--color-primary); }

    .hover\:bg-primary:hover { background-color: var(--color-primary); }
    .hover\:text-primary:hover { color: var(--color-primary); }
    .hover\:border-b-primary:hover { border-bottom-color: var(--color-primary); }

    .focus\:ring-primary:focus { --tw-ring-color: var(--color-primary); }
    .focus\:border-primary:focus { border-color: var(--color-primary); }

    /* 初期ロード時のアニメーション要素非表示（Orchestratorと連携） */
    [data-loading],
    [data-animate] {
        opacity: 0;
    }

    /* 動きを減らす設定のユーザー向け：
       - 初期非表示要素を必ず表示（JS側でもアニメをスキップするが二重の保険）
       - CSSアニメ/トランジションを実質無効化
       スムーススクロールやパララックスは JS(orchestrator) 側で無効化する。 */
    @media (prefers-reduced-motion: reduce) {
        [data-loading],
        [data-animate] {
            opacity: 1 !important;
        }
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }:root {
        --mv-copy-fz: clamp(1.4rem, 2.8vw, 2.25rem);
        --hdr-pad-r: clamp(1.5rem, 5vw, 5rem);
        
        /* メニューボタン寸法 (SPデフォルト) */
        --menu-btn-w: 44px;
        --menu-line-w: 26px;
        --menu-line-offset: calc((var(--menu-btn-w) - var(--menu-line-w)) / 2); /* = 9px */

        /* 予約ボタンのパディングとフォントサイズ (SP) */
        --btn-pad-x: 1.2rem;
        --btn-pad-y: 0.6rem;
        --btn-fz: 0.85rem;
    }
    @media (min-width: 769px) {
        :root {
            /* PC はキャッチコピーを少し小さく（ヘッダー予約ボタン幅もこれに連動） */
            --mv-copy-fz: clamp(1.35rem, 2.4vw, 2.0rem);

            /* メニューボタン寸法 (PC可変でスムーズに拡大) */
            --menu-btn-w: clamp(44px, 5vw, 64px);
            --menu-line-w: clamp(26px, 3vw, 38px);

            /* 予約ボタンのパディングとフォントサイズ (PC可変 - ほんの少し小さめ) */
            --btn-pad-x: clamp(1.05rem, 1.95vw, 2.1rem);
            --btn-pad-y: clamp(0.52rem, 0.72vw, 0.8rem);
            --btn-fz: clamp(0.8rem, 0.92vw, 1.0rem);
        }
    }

    .site-header {
        /* 通常時: 白 / 白背景セクション上: 黒 */
        --hdr-c: #fff;
        --hdr-contrast: #000;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 110;
    }
    .site-header.is-dark {
        --hdr-c: #1a1a1a;
        --hdr-contrast: #fff;
    }
    .site-header.is-nav-open {
        --hdr-c: #fff;
        --hdr-contrast: var(--color-primary);
    }
    .site-header-inner {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        /* 右側の余白は変数を使用 */
        padding: 1.1rem var(--hdr-pad-r);
        /* 大画面でも端に寄りすぎないようコンテンツ幅に揃える */
        max-width: 1441px;
        margin-inline: auto;
    }
    /* ロゴあり（プランページ）の時はロゴを左・ナビ群を右に振り分ける */
    .site-header-inner.has-logo {
        justify-content: space-between;
    }

    /* ── LPトップへのロゴ（プランページのみ） ───────────────
       白黒2枚を出力し、ヘッダーの .is-dark（白背景セクション上）に
       連動して出し分ける。メニュー展開中（緑背景）は白に戻す。 */
    .header-logo-link {
        display: inline-flex;
        align-items: center;
        flex-shrink: 0;
    }
    .header-logo-img {
        display: block;
        height: clamp(22px, 2.6vw, 34px);
        width: auto;
    }
    /* 既定（写真・濃色の上）＝白ロゴ。黒は隠す */
    .header-logo-img.is-black {
        display: none;
    }
    /* 白背景セクションの上＝黒ロゴ */
    .site-header.is-dark .header-logo-img.is-white {
        display: none;
    }
    .site-header.is-dark .header-logo-img.is-black {
        display: block;
    }
    /* メニュー展開中（緑オーバーレイの上）は白ロゴに戻す（is-dark より後に置き上書き） */
    .site-header.is-nav-open .header-logo-img.is-white {
        display: block;
    }
    .site-header.is-nav-open .header-logo-img.is-black {
        display: none;
    }

    .header-nav-group {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        /* 幅は、メニュー線のオフセット + キャッチコピー文字幅 5.8em + 予約ボタンのパディング分 */
        /* これにより、ボタンのテキストの左端がキャッチコピーの左端と揃い、背景が左にオーバーします */
        width: calc(var(--menu-line-offset) + 5.8 * var(--mv-copy-fz) + var(--btn-pad-x));
    }
    .header-reserve-btn {
        display: inline-block;
        padding: var(--btn-pad-y) var(--btn-pad-x);
        border-radius: 9999px;
        background-color: rgba(255, 255, 255, 0.4);
        backdrop-filter: blur(4px);
        color: var(--hdr-c);
        font-size: var(--btn-fz);
        letter-spacing: 0.18em;
        transition: background-color 0.3s ease, color 0.3s ease;
        flex-shrink: 0;
    }
    .header-reserve-btn:hover {
        background-color: var(--color-primary);
        color: #fff;
    }
    /* メニュー展開時（背景が緑系の時）のホバーは同化しない色に反転 */
    .site-header.is-nav-open .header-reserve-btn:hover {
        background-color: #fff;
        color: var(--color-primary);
    }
    .header-menu-btn {
        position: relative;
        width: var(--menu-btn-w);
        height: var(--menu-btn-w);
        cursor: pointer;
        flex-shrink: 0;
    }
    .header-menu-btn span {
        position: absolute;
        left: 50%;
        width: var(--menu-line-w);
        height: 2px;
        background-color: var(--hdr-c);
        transform: translateX(-50%);
        transition: transform 0.3s ease, top 0.3s ease, background-color 0.3s ease;
    }
    .header-menu-btn span:nth-child(1) { top: 17px; }
    .header-menu-btn span:nth-child(2) { top: 26px; }
    .header-menu-btn.is-open span:nth-child(1) { top: 21px; transform: translateX(-50%) rotate(45deg); }
    .header-menu-btn.is-open span:nth-child(2) { top: 21px; transform: translateX(-50%) rotate(-45deg); }
    
    @media (min-width: 769px) {
        .header-menu-btn span:nth-child(1) {
            top: calc(var(--menu-btn-w) * 0.4);
        }
        .header-menu-btn span:nth-child(2) {
            top: calc(var(--menu-btn-w) * 0.56);
        }
        .header-menu-btn.is-open span:nth-child(1) {
            top: calc(var(--menu-btn-w) * 0.48);
            transform: translateX(-50%) rotate(45deg);
        }
        .header-menu-btn.is-open span:nth-child(2) {
            top: calc(var(--menu-btn-w) * 0.48);
            transform: translateX(-50%) rotate(-45deg);
        }
    }

    .global-nav {
        position: fixed;
        inset: 0;
        z-index: 105;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: color-mix(in srgb, var(--color-primary) 96%, black);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.4s ease, visibility 0.4s ease;
    }
    .global-nav.is-open {
        opacity: 1;
        visibility: visible;
    }
    .global-nav-list {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        text-align: center;
    }
    .global-nav-list a {
        color: #fff;
        font-size: 1.1rem;
        letter-spacing: 0.25em;
    }
    .global-nav-list a:hover {
        opacity: 0.7;
    }:root {
        --plan-accent: #ffd86d;
    }
    .plan-hero {
        position: relative;
        background-color: #fff;
    }

    /* ── ヒーローバナー：画像の上にキャッチ＋ボタンのみ重ねる ─────────────────────────────── */
    .plan-hero-banner {
        position: relative;
        height: clamp(380px, 52vh, 520px); /* 重ねる要素が減ったため高さを少し抑制 */
        overflow: hidden;
        display: flex;
        align-items: flex-end;
        color: #fff;
    }
    .plan-hero-bg {
        position: absolute;
        inset: 0;
        overflow: hidden;
    }
    .plan-hero-bg-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
    }
    .plan-hero-overlay {
        position: absolute;
        inset: 0;
        /* 文字が最下部だけなので、グラデーションの暗い部分をより低く抑える */
        background: linear-gradient(
            to top,
            rgba(0, 0, 0, 0.72) 0%,
            rgba(0, 0, 0, 0.35) 25%,
            rgba(0, 0, 0, 0.0)  55%
        );
    }
    .plan-hero-banner-inner {
        position: relative;
        width: 100%;
        max-width: 1441px;
        margin-inline: auto;
        padding-bottom: clamp(1.8rem, 4vw, 3rem);
        padding-top: 0;
        padding-inline: var(--hdr-pad-r);
    }
    .plan-hero-headline {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }
    .plan-hero-catch {
        font-size: clamp(1.45rem, 6.2vw, 1.85rem);
        font-weight: 700;
        letter-spacing: 0.06em;
        line-height: 1.45;
        color: var(--plan-hero-text, #fff);
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
        margin-bottom: 0.8rem;
    }
    .plan-hero-reserve-btn {
        display: inline-block;
        padding: 0.6rem 1.6rem;
        color: var(--plan-btn-text, #1a1a1a);
        background-color: var(--plan-accent);
        border: 1px solid color-mix(in srgb, var(--plan-accent) 85%, #000);
        border-radius: 9999px;
        font-size: 0.8rem;
        font-weight: 700;
        letter-spacing: 0.15em;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
        transition: all 0.3s ease;
    }
    .plan-hero-reserve-btn:hover {
        filter: brightness(0.92);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
        transform: translateY(-2px);
    }

    /* ── PC 調整 ─────────────────────────────── */
    @media (min-width: 769px) {
        .plan-hero-banner {
            height: clamp(560px, 78vh, 880px);
        }
        .plan-hero-banner-inner {
            padding-bottom: clamp(2.5rem, 5vw, 4rem);
        }
        .plan-hero-catch {
            font-size: clamp(2.2rem, 4.2vw, 3.2rem);
            margin-bottom: 1.4rem;
            text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
        }
        .plan-hero-reserve-btn {
            font-size: 1rem;
            padding: 0.9rem 2.6rem;
            letter-spacing: 0.2em;
        }
    }.plan-contents {
        background-color: #fff;
        padding-top: clamp(2.5rem, 5vw, 4.5rem);
        padding-bottom: clamp(4rem, 8vw, 7rem);
    }
    .plan-contents-inner {
        max-width: 760px;
        margin-inline: auto;
        padding-inline: clamp(1.5rem, 5vw, 3rem);
        display: flex;
        flex-direction: column;
        gap: 2.2rem;
    }
    .plan-contents-header {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        border-bottom: 2px solid var(--plan-contents-accent, var(--color-primary-light));
        padding-bottom: 1.5rem;
        margin-bottom: 0.5rem;
    }
    .plan-contents-badge {
        display: inline-block;
        padding: 0.28rem 0.95rem;
        border: 1px solid var(--plan-contents-accent, var(--color-primary));
        border-radius: 9999px;
        font-size: 0.8rem;
        font-weight: 700;
        letter-spacing: 0.18em;
        color: var(--plan-contents-accent, var(--color-primary));
        margin-bottom: 0.6rem;
    }
    .plan-contents-title {
        font-size: clamp(1.18rem, 4.5vw, 1.45rem);
        font-weight: 700;
        letter-spacing: 0.05em;
        line-height: 1.5;
        color: #1a1a1a; /* 元の黒に戻す */
    }
    .plan-contents-intro {
        font-size: clamp(0.9rem, 1.3vw, 1rem);
        line-height: 2.1;
        letter-spacing: 0.08em;
        color: #333;
    }
    .plan-contents-heading {
        font-size: clamp(1rem, 1.6vw, 1.25rem);
        font-weight: 700;
        letter-spacing: 0.2em;
        color: var(--plan-contents-accent, var(--color-primary));
        padding-bottom: 0.8rem;
        border-bottom: 1px solid var(--plan-contents-accent, var(--color-primary));
    }
    .plan-contents-body {
        font-size: clamp(0.9rem, 1.3vw, 1.05rem);
        line-height: 2.2;
        letter-spacing: 0.08em;
        color: #333;
    }
    .plan-contents-figure {
        margin: 0;
        overflow: hidden;
    }
    .plan-contents-img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
        aspect-ratio: 16 / 9;
    }

    @media (min-width: 769px) {
        .plan-contents-header {
            padding-bottom: 2rem;
        }
        .plan-contents-badge {
            font-size: 0.92rem;
            padding: 0.35rem 1.2rem;
            margin-bottom: 0.8rem;
        }
        .plan-contents-title {
            font-size: 1.65rem;
        }
    }.plan-timeline {
        background-color: var(--plan-timeline-bg, #1a1e24);
        padding-block: clamp(4rem, 8vw, 7rem);
    }
    .plan-timeline-inner {
        max-width: 1200px;
        margin-inline: auto;
        padding-inline: clamp(1.5rem, 5vw, 5rem);
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: clamp(2rem, 5vw, 4.5rem);
        align-items: center;
    }
    .plan-timeline-img-wrap {
        overflow: hidden;
    }
    .plan-timeline-img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
        aspect-ratio: 4 / 3;
        transition: transform 0.6s ease;
    }
    .plan-timeline-img-wrap:hover .plan-timeline-img {
        transform: scale(1.03);
    }
    .plan-timeline-content {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }
    .plan-timeline-heading {
        font-size: clamp(1.2rem, 2vw, 1.6rem);
        font-weight: 700;
        letter-spacing: 0.08em;
        color: var(--plan-timeline-text, #fff);
        width: fit-content;
        border-bottom: 1px solid color-mix(in srgb, var(--plan-timeline-text, #fff) 40%, transparent);
        padding-bottom: 0.6rem;
    }
    .plan-timeline-list ol {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 0.9rem;
        counter-reset: timeline-counter;
    }
    .plan-timeline-list ol li {
        display: grid;
        grid-template-columns: 2.2rem 1fr;
        gap: 0.5rem;
        align-items: center;
        font-size: clamp(0.88rem, 1.1vw, 0.98rem);
        letter-spacing: 0.05em;
        line-height: 1.6;
        color: color-mix(in srgb, var(--plan-timeline-text, #fff) 95%, transparent);
        counter-increment: timeline-counter;
    }
    .plan-timeline-list ol li::before {
        content: counter(timeline-counter, decimal-leading-zero);
        font-size: 1.1rem;
        color: var(--plan-timeline-text, #f2ede4); /* テキスト色に追従（既定は明るい生成り色） */
        font-weight: 700;
        letter-spacing: 0;
        line-height: 1;
    }

    @media (max-width: 768px) {
        .plan-timeline-inner {
            grid-template-columns: 1fr;
        }
        .plan-timeline-img {
            aspect-ratio: 3 / 2;
        }
    }

    /* PC 調整 */
    @media (min-width: 769px) {
        .plan-timeline-inner {
            grid-template-columns: 0.92fr 1.08fr; /* 右側のテキスト側を少し広げてタイトル幅を確保 */
        }
        .plan-timeline-heading {
            white-space: nowrap; /* 1行で綺麗に収める */
        }
    }.plan-cards {
        background-color: #fff;
        padding-block: clamp(4.5rem, 9vw, 8rem);
    }
    .plan-cards-inner {
        max-width: 1000px;
        margin-inline: auto;
        padding-inline: clamp(1.5rem, 5vw, 4rem);
    }

    /* ── セクションヘッダー ── */
    .plan-cards-section-header {
        text-align: center;
        margin-bottom: clamp(3rem, 6vw, 5rem);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.8rem;
    }
    .plan-cards-section-title {
        font-size: clamp(1.5rem, 3.5vw, 2.1rem);
        font-weight: 700;
        letter-spacing: 0.08em;
        line-height: 1.5;
        color: var(--plan-heading, var(--color-primary));
    }
    .plan-cards-section-lead {
        font-size: clamp(0.95rem, 1.3vw, 1.1rem);
        letter-spacing: 0.05em;
        line-height: 1.6;
        color: #333;
    }
    br.sp-only {
        display: block;
    }
    @media (min-width: 769px) {
        br.sp-only {
            display: none;
        }
    }

    /* ── カードグリッド ── */
    .plan-cards-grid {
        display: flex;
        flex-direction: column;
        gap: 0; /* セパレーターで区切るため gap は 0 */
    }

    /* ── カード本体 ── */
    .plan-card {
        display: flex;
        flex-direction: column;
        gap: 1.2rem;
        border: none;
        background: transparent;
        padding-block: clamp(2rem, 5vw, 3.2rem);
    }
    /* カード間のセパレーター（最初のカードの上には不要） */
    .plan-card + .plan-card {
        border-top: 1px solid #e0ddd8;
    }

    /* ── 画像 ── */
    .plan-card-figure {
        margin: 0;
        overflow: hidden;
        aspect-ratio: 3 / 2;
        width: 100%;
        flex-shrink: 0;
    }
    .plan-card-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    }
    .plan-card:hover .plan-card-img {
        transform: scale(1.04);
    }

    /* ── テキストエリア ── */
    .plan-card-body {
        padding: 0.2rem 0 0;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    /* 見出し */
    .plan-card-heading {
        font-size: 1.15rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        line-height: 1.4;
        color: var(--plan-heading, var(--color-primary-dark));
        border-bottom: none;
        padding-bottom: 0;
        position: relative;
    }

    /* 本文 */
    .plan-card-text {
        font-size: 0.9rem;
        line-height: 1.85;
        letter-spacing: 0.04em;
        color: #333;
    }

    /* ──────────────── PC ──────────────── */
    @media (min-width: 769px) {
        .plan-card {
            flex-direction: row;
            align-items: center;
            gap: clamp(2.5rem, 5vw, 4rem);
            padding-block: clamp(2.8rem, 5vw, 4rem);
        }
        /* 偶数カードは左右反転 */
        .plan-card:nth-of-type(even) {
            flex-direction: row-reverse;
        }
        .plan-card-figure {
            width: 46%;
            max-width: 440px;
        }
        .plan-card-body {
            width: 54%;
            padding: 0;
            gap: 0.65rem;
        }
        .plan-card-heading {
            font-size: 1.4rem;
            margin-bottom: 0.4rem;
        }
        .plan-card-text {
            font-size: 1rem;
            line-height: 1.9;
        }
    }.plan-option {
        background-color: var(--plan-option-bg, #8b806e);
        padding-block: clamp(4rem, 8vw, 7rem);
    }
    .plan-option-inner {
        max-width: 1200px;
        margin-inline: auto;
        padding-inline: clamp(1.5rem, 5vw, 4rem);
    }

    /* ── ヘッダー ── */
    .plan-option-header {
        margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
    }
    .plan-option-header.sp-only {
        text-align: center;
    }
    .plan-option-title {
        font-size: clamp(1.2rem, 2.8vw, 1.65rem);
        font-weight: 700;
        letter-spacing: 0.08em;
        line-height: 1.4;
        color: var(--plan-option-text, #fff);
        display: inline-block;
    }

    /* ── 上段レイアウト ── */
    .plan-option-grid {
        display: flex;
        flex-direction: column;
        gap: clamp(1.5rem, 4vw, 2.5rem);
    }

    /* ── メインビジュアル ── */
    .plan-option-main-fig {
        margin: 0;
        overflow: hidden;
        aspect-ratio: 1280 / 749;
    }
    .plan-option-img-main {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    }
    .plan-option-main-fig:hover .plan-option-img-main {
        transform: scale(1.03);
    }

    /* ── メインテキスト ── */
    .plan-option-main-body {
        margin-bottom: 0;
    }
    .plan-option-text {
        font-size: clamp(0.88rem, 1.1vw, 0.98rem);
        line-height: 2;
        letter-spacing: 0.04em;
        color: color-mix(in srgb, var(--plan-option-text, #fff) 95%, transparent);
    }

    /* ── 下段：サブブロック（朝食 ＆ サブ画像） ── */
    .plan-option-sub-block {
        margin-top: 2rem;
        padding-top: 1.5rem;
        border-top: 1px solid color-mix(in srgb, var(--plan-option-text, #fff) 20%, transparent);
    }
    .plan-option-sub-content {
        display: flex;
        flex-direction: column;
        gap: 0.85rem;
        align-items: flex-start;
    }
    .plan-option-sub-fig {
        margin: 0;
        width: 100%;
        max-width: 320px;
        aspect-ratio: 16 / 9;
        overflow: hidden;
    }
    .plan-option-img-sub {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .plan-option-sub-text {
        font-size: clamp(0.82rem, 1vw, 0.92rem);
        line-height: 1.8;
        letter-spacing: 0.04em;
        color: color-mix(in srgb, var(--plan-option-text, #fff) 95%, transparent);
        max-width: 360px; /* さらにコンパクトに折り返す */
    }

    /* 表示切り替え用クラス */
    .pc-only {
        display: none;
    }
    .sp-only {
        display: block;
    }

    /* ──────────── PC ──────────── */
    @media (min-width: 769px) {
        .pc-only {
            display: block;
        }
        .sp-only {
            display: none;
        }

        /* 画像とテキストの高さを揃える */
        .plan-option-grid {
            display: grid;
            grid-template-columns: 1.35fr 1fr; /* 左右比率を僅かに調整してテキスト領域を拡大 */
            gap: clamp(1.5rem, 3vw, 2.5rem);
            align-items: stretch; /* 高さを揃える */
        }

        .plan-option-main-fig {
            height: 100%; /* 親グリッドと同じ高さに */
        }

        .plan-option-info {
            display: flex;
            flex-direction: column;
            justify-content: center; /* 高さに合わせてテキストを上下中央に配置 */
            height: 100%;
        }

        .plan-option-text {
            font-size: 0.98rem;
            line-height: 2.1;
            letter-spacing: 0.02em; /* 僅かに詰めて改行を防止 */
        }

        /* 下段サブブロックを横並びに戻し、ゆったり配置 */
        .plan-option-sub-block {
            margin-top: 3rem;
            padding-top: 2.5rem;
            max-width: none; /* 全幅にしてボーダーを端まで引く */
        }

        .plan-option-sub-content {
            flex-direction: row; /* 横並び */
            align-items: center;
            justify-content: flex-start; /* 左寄せにする */
            gap: 2.5rem;
            max-width: 680px; /* コンテンツ全体が右に広がりすぎないように幅を制限 */
            width: 100%;
        }

        .plan-option-sub-fig {
            width: 260px; /* サブ画像サイズを適正化 */
            max-width: none;
        }

        .plan-option-sub-text {
            font-size: 0.92rem;
            line-height: 1.9;
        }
    }.plan-access {
        background-color: #fff;
        padding-block: clamp(4rem, 8vw, 7rem);
    }
    .plan-access-inner {
        max-width: 1000px;
        margin-inline: auto;
        padding-inline: clamp(1.5rem, 5vw, 5rem);
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }
    .plan-access-heading {
        font-size: clamp(1.3rem, 2.5vw, 1.8rem);
        font-weight: 700;
        letter-spacing: 0.08em;
        text-indent: 0.08em;
        color: #1a1a1a;
    }
    .plan-access-map {
        overflow: hidden;
        border-radius: 2px;
        line-height: 0;
    }
    .plan-access-map iframe {
        display: block;
        width: 100%;
    }
    .plan-access-dl {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    .plan-access-row {
        display: grid;
        grid-template-columns: 7rem 1fr;
        gap: 1rem;
        padding-block: 0.9rem;
        border-bottom: 1px solid #ddd;
        align-items: baseline;
    }
    .plan-access-row:first-child {
        border-top: 1px solid #ddd;
    }
    .plan-access-row dt {
        font-size: 0.82rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        color: var(--color-primary);
    }
    .plan-access-row dd {
        font-size: clamp(0.85rem, 1.1vw, 0.95rem);
        line-height: 1.7;
        letter-spacing: 0.05em;
        color: #333;
    }
    .plan-access-row dd a {
        color: inherit;
        text-decoration: underline;
        text-underline-offset: 0.2em;
    }
    .plan-access-hours {
        font-size: 0.82rem;
        color: #333;
        margin-left: 0.5rem;
    }

    @media (max-width: 768px) {
        .plan-access-map iframe {
            height: 280px;
        }
        .plan-access-row {
            grid-template-columns: 5.5rem 1fr;
        }
    }.plan-reserve {
        padding-block: clamp(1.5rem, 3vw, 2rem);
        margin-bottom: clamp(6rem, 12vw, 9rem);
        text-align: center;
    }
    .plan-reserve-inner {
        max-width: 1000px;
        margin-inline: auto;
        padding-inline: clamp(1.5rem, 5vw, 4rem);
        padding-block: clamp(3rem, 6vw, 4.5rem);
        background-color: var(--color-primary);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
        color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2.2rem;
    }
    .plan-reserve-tel {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.4rem;
    }
    .plan-reserve-tel-label {
        font-size: clamp(0.95rem, 1.8vw, 1.15rem);
        font-weight: 500;
        letter-spacing: 0.15em;
        opacity: 0.9;
    }
    .plan-reserve-tel-number {
        font-size: clamp(1.8rem, 4vw, 2.6rem);
        font-weight: 700;
        letter-spacing: 0.08em;
        color: #fff;
    }
    .plan-reserve-tel-hours {
        font-size: clamp(0.88rem, 1.2vw, 0.98rem);
        letter-spacing: 0.1em;
        opacity: 0.85;
    }
    .plan-reserve-btn {
        display: inline-block;
        padding: 1rem 3rem;
        background-color: #fff;
        border: 1px solid #fff;
        border-radius: 9999px;
        font-size: 1rem;
        letter-spacing: 0.2em;
        color: #1a1a1a;
        font-weight: 700;
        transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    }
    .plan-reserve-btn:hover {
        background-color: transparent;
        color: #fff;
        border-color: #fff;
    }

    @media (max-width: 768px) {
        .plan-reserve-tel-number {
            font-size: 1.8rem;
        }
        .plan-reserve-btn {
            padding: 0.9rem 2rem;
            font-size: 0.92rem;
        }
    }.closing {
        background-color: #fff;
        text-align: center;
        padding-top: clamp(1rem, 2vw, 2rem);
        padding-bottom: clamp(11rem, 22vw, 16.5rem);
    }
    .closing-catch {
        font-size: clamp(1.15rem, 1.9vw, 1.7rem);
        font-weight: 700;
        letter-spacing: 0.1em;
        margin-bottom: clamp(0.5rem, 1.2vw, 0.9rem);
    }
    .closing-catch br.br-sp {
        display: none;
    }
    .closing-lead {
        font-size: clamp(0.9rem, 1.3vw, 1.1rem);
        letter-spacing: 0.2em;
        line-height: 2.2;
    }

    /* 屋根型のグリーンフッター */
    .site-footer-wrapper {
        background-color: #fff;
        position: relative;
        z-index: 10;
    }
    .site-footer {
        background-color: var(--color-primary);
        color: #fff;
        clip-path: polygon(0 48%, 62% 0, 100% 32%, 100% 100%, 0 100%);
        margin-top: -2rem;
        padding-top: clamp(8rem, 15vw, 12rem);
        padding-bottom: clamp(4rem, 8vw, 6rem);
        text-align: center;
    }
    .site-footer-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.2rem;
    }
    .footer-logo-link {
        display: inline-block;
        transition: opacity 0.3s ease;
    }
    .footer-logo-link:hover {
        opacity: 0.75;
    }
    .footer-logo {
        display: block;
        width: clamp(15rem, 30vw, 27.5rem);
        height: auto;
        margin-bottom: 1.5rem;
    }
    .footer-name {
        font-size: 0.85rem;
        letter-spacing: 0.25em;
    }
    .footer-address {
        font-size: 0.85rem;
        letter-spacing: 0.18em;
    }
    .footer-tel {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: clamp(1.4rem, 2vw, 1.65rem);
        font-weight: 700;
        letter-spacing: 0.12em;
        margin-top: -0.8rem;
    }
    .footer-tel-hours {
        font-size: 0.85rem;
        font-weight: 400;
    }
    .footer-privacy {
        font-size: 0.78rem;
        letter-spacing: 0.22em;
        margin-top: 0.5rem;
    }
    .footer-privacy:hover {
        opacity: 0.7;
    }
    .footer-copyright {
        font-size: 0.72rem;
        letter-spacing: 0.12em;
        line-height: 1.5;
        opacity: 0.85;
        margin-top: -0.8rem;
    }

    /* === モバイル === */
    @media (max-width: 768px) {
        .closing {
            padding-top: clamp(3rem, 8vw, 5rem);
            padding-bottom: clamp(9rem, 22vw, 14rem);
            padding-inline: 1.5rem;
        }
        .closing-catch {
            font-size: 1.05rem;
            letter-spacing: 0.08em;
        }
        .closing-catch br.br-sp {
            display: block;
        }
        .closing-lead {
            font-size: 0.85rem;
            letter-spacing: 0.12em;
            line-height: 2;
        }
        .site-footer {
            clip-path: polygon(0 20%, 55% 0, 100% 12%, 100% 100%, 0 100%);
            padding-top: clamp(5rem, 16vw, 8rem);
            padding-bottom: clamp(3rem, 6vw, 4rem);
        }
        .site-footer-inner {
            gap: 0.9rem;
        }
        .footer-logo {
            width: clamp(12rem, 55vw, 16rem);
            margin-bottom: 1rem;
        }
        .footer-name {
            font-size: 0.78rem;
            letter-spacing: 0.2em;
        }
        .footer-address {
            font-size: 0.75rem;
            letter-spacing: 0.1em;
        }
        .footer-tel {
            font-size: 1.3rem;
            margin-top: -0.5rem;
        }
        .footer-tel-hours {
            font-size: 0.75rem;
        }
        .footer-privacy {
            font-size: 0.72rem;
            margin-top: 0.3rem;
        }
        .footer-copyright {
            font-size: 0.65rem;
            margin-top: -0.5rem;
        }
    }.concept {
        overflow: hidden;
    }
    .concept-brand {
        display: flex;
        justify-content: center;
        padding: clamp(4rem, 9vw, 7rem) 1.5rem clamp(3rem, 6vw, 5rem);
        background-color: #fff;
    }
    .concept-brand-logo {
        width: clamp(14rem, 24vw, 21rem);
        height: auto;
    }
    .concept-day {
        background-color: #fff;
    }
    .concept-day-inner {
        position: relative;
        max-width: 1441px;
        margin-inline: auto;
        /* ヴィラ画像が上に上がった分、確保する高さを少し減らす */
        min-height: calc(min(40.5vw, 583px) * 1.5 + 60px);
    }
    .concept-text-group {
        position: absolute;
        left: 23%;
        /* 画像の上端から 80px 下に重ねる */
        top: 80px;
        z-index: 4; /* テキストが画像の上に来るように調整 */
    }
    /* 見出しはヴィラ写真に重ねる（「で」が写真の左端にかかる位置） */
    .concept-heading {
        font-size: clamp(1.6rem, 2.6vw, 2.3rem);
        font-weight: 700;
        letter-spacing: 0.18em;
        line-height: 1.5;
        margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
    }
    .concept-lead {
        font-size: clamp(0.9rem, 1.3vw, 1.1rem);
        letter-spacing: 0.1em;
        line-height: 2.2;
    }
    .concept-photo-villa {
        position: absolute;
        left: 40%;
        /* ブランドエリアに少しかかるくらいまで大きく上に上げる */
        top: clamp(-8rem, -8vw, -4rem);
        width: 40.5%;
        z-index: 1; /* 最背面 */
    }
    .concept-photo-path {
        position: absolute;
        /* 右の画像 (left: 40%) に対して 20px 重ねる位置 (W=24.4%) */
        left: calc(40% - 24.4% + 20px);
        /* ヴィラ画像（マイナス値）にわずかに重なる位置をキープしつつ、テキストにもいい感じに絡む位置 */
        top: clamp(-3rem, -3vw, -1rem);
        width: 24.4%;
        z-index: 3; /* 右の画像の上に重ねる */
    }
    .concept-photo-villa img,
    .concept-photo-path img {
        width: 100%;
        height: auto;
    }

    /* 夜景パート（斜めの黒ウェッジ） */
    .concept-night {
        --wedge-h: clamp(12rem, 22vw, 22rem);
        position: relative;
        color: #fff;
    }
    .concept-wedge {
        height: var(--wedge-h);
        background-color: var(--color-night);
        -webkit-clip-path: polygon(0 100%, 100% 0, 100% 100%);
        clip-path: polygon(0 100%, 100% 0, 100% 100%);
    }
    .concept-night-body {
        background-color: var(--color-night);
        margin-top: -1px; /* ブラウザのサブピクセルレンダリングによる1pxの隙間を防ぐ */
        padding: 0 1.5rem clamp(5rem, 10vw, 9rem);
    }
    .concept-night-inner {
        position: relative;
        max-width: 1441px;
        margin-inline: auto;
        display: block; /* グリッドを解除して absolute 配置の基準とする */
        /* 右カラムの高さとウェッジの引き上げ分を考慮した高さを確保 */
        min-height: calc(var(--wedge-h) * -1 + 1200px);
    }
    
    /* 右側カラム：星空写真とテキストをまとめて縦並びにするコンテナ */
    .concept-night-right-column {
        position: absolute;
        left: 50%; /* センター付近にとどめるため right: 6% から変更 */
        top: 0;
        width: min(430px, 40%);
        display: flex;
        flex-direction: column;
        gap: 4.5rem; /* 画像とテキストの縦間隔 */
        z-index: 2;
    }
    
    /* 1枚目: ウェッジの境界から少しはみ出す */
    .concept-photo-stars {
        width: 100%; /* コンテナ幅に追従 */
        margin-top: calc(var(--wedge-h) * -1 - 0px);
        position: relative;
        z-index: 1;
    }
    
    /* 2枚目: 1枚目 (stars) の下端から 20px 下の位置、1枚目の左端に対して右端が 70px 入り込む */
    .concept-photo-terrace {
        position: absolute;
        right: calc(50% - 80px); /* 1枚目の左端(left:50% = right:50%) から 80px 入り込む */
        /* 星空写真のトップ + 星空写真の高さ (430px*0.667, (100vw - 3rem)*0.4*0.667) + 20px */
        top: calc(var(--wedge-h) * -1 + min(287px, 26.69vw - 0.8rem) + 20px);
        width: min(502px, 45%);
        z-index: 1;
    }
    .concept-photo-stars img,
    .concept-photo-terrace img {
        width: 100%;
        height: auto;
    }
    .concept-night-text {
        width: 100%;
        margin-top: 0;
        /* テラス画像が70px入り込んでいるため、そこからさらに34px離す (合計104px) */
        padding-left: calc(70px + 50px);
    }
    .concept-night-lead {
        font-size: clamp(0.9rem, 1.3vw, 1.1rem);
        letter-spacing: 0.1em;
        line-height: 2;
        margin-bottom: 2.2rem;
    }
    .concept-night-lead-gap {
        display: block;
        margin-top: 2.2rem;
    }
    .concept-night-heading {
        font-size: clamp(1.6rem, 2.6vw, 2.3rem);
        font-weight: 700;
        letter-spacing: 0.2em;
        line-height: 1.5;
    }

    /* ============================================================
     * 昼パート（PC）の位置を SP 調整前の値に復元する。
     * ベース側の値が SP 都合で書き換えられているため、PC 専用で上書きする。
     * （SP ≤768px のレイアウトには一切影響しない）
     * ============================================================ */
    @media (min-width: 769px) {
        .concept-day-inner {
            /* 子要素はすべて絶対配置のため、コンテナ高さはこの計算値で確定する。
               旧 min-height は先頭に 7.5%（親 .concept-day が高さ auto のため Chrome では 0 扱い）を
               含んでいたが、Safari/WebKit では % が解決できず高さが潰れて崩れる原因だった。
               7.5% を外して height を明示し、どのブラウザでも同じ確定高さ＝同じ % 基準にする。 */
            height: calc(3.0 * clamp(1.6rem, 2.6vw, 2.3rem) + clamp(2.5rem, 5vw, 4.5rem) + 8.0 * clamp(0.9rem, 1.3vw, 1.1rem) + 36.6vw + 300px);
        }
        .concept-text-group {
            /* 画像の上端 (7.5%) から 80px 下に重ねる */
            top: calc(7.5% + 80px);
        }
        .concept-photo-villa {
            top: 7.5%;
        }
        .concept-photo-path {
            /* 説明テキストの下端から 100px 下に配置 */
            top: calc(7.5% + 80px + 3.0 * clamp(1.6rem, 2.6vw, 2.3rem) + clamp(2.5rem, 5vw, 4.5rem) + 8.0 * clamp(0.9rem, 1.3vw, 1.1rem) + 100px);
        }
    }

    @media (max-width: 768px) {
        /* ============================================================
         * 昼パート（SP）
         * 単純な縦積みをやめ、ヴィラ写真を右に裁ち落とし、
         * 小道写真をその左下に重ねて奥行きを出す。
         * ============================================================ */
        .concept-day-inner {
            min-height: 0;
            display: block;
            position: relative;
            padding-inline: 1.5rem;
        }
        .concept-text-group {
            position: relative;
            z-index: 4; /* 画像の上にテキストが乗るように設定 */
            left: 0;
            top: 0;
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
            margin-bottom: clamp(1.5rem, 5vw, 2.5rem);
        }
        .concept-heading,
        .concept-lead {
            position: static;
            width: 100%;
        }
        /* ヴィラ：右端まで裁ち落とし、横幅を抑えて右寄せ */
        .concept-photo-villa {
            position: relative;
            z-index: 1;
            width: 68%;
            left: 1.5rem;
            margin-left: auto;
        }
        /* 小道：ヴィラの左下に食い込ませて重ねる（縦長写真をアクセントに） */
        .concept-photo-path {
            position: relative;
            width: 48%;
            margin-top: -51%;
            z-index: 3;
            left: calc(21% - 24.4% + 20px);
        }

        /* ============================================================
         * 夜パート（SP）
         * 昼を左右反転させたリズム：テラスを左に裁ち落とし、
         * 星空をその右下に重ね、白テキストを夜空に重ねる。
         * ============================================================ */
        .concept-night {
            --wedge-h: clamp(5rem, 18vw, 8rem);
            margin-top: 8rem;
        }
        .concept-night-inner {
            display: block;
            position: relative;
            min-height: 0;
        }
        /* テラス：左端まで裁ち落とし。上に引き上げてウェッジの斜線にいい感じに被らせる */
        .concept-photo-terrace {
            position: relative;
            z-index: 2;
            width: 70%;
            margin-top: 0;
            top: -5rem;
            right: auto;
            left: -1.5rem;
        }
        /* 右カラム：テキストを通常フローで持ち、星空は絶対配置の基準にする */
        .concept-night-right-column {
            position: relative;
            left: auto;
            top: auto;
            width: 100%;
            display: block;
            margin-top: -7%;     /* テキストをテラス下端に軽く重ねる量（今ぐらい） */
            z-index: 2;
        }
        /* テキスト：通常フロー（カラム先頭） */
        .concept-night-text {
            position: relative;
            width: 100%;
            margin-top: 0;
            padding-left: 0;
            z-index: 3;
        }
        /* 星空：右端まで裁ち落とし、「大切な人と気ままに過ごす」の高さに重ねる */
        .concept-photo-stars {
            position: absolute;
            right: -1.5rem;
            top: 3.5rem;
            width: 62%;
            margin: 0;
            z-index: 1;
        }
    }.gallery {
        background-color: #fff;
        padding-block: clamp(3rem, 7vw, 6rem) clamp(2rem, 5vw, 4rem);
    }
    .gallery-stage {
        position: relative;
        max-width: 1441px;
        margin-inline: auto;
        aspect-ratio: 1441 / 1160;
    }
    .gallery-slot {
        position: absolute;
        overflow: hidden;
    }
    .gallery-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        transition: opacity 1s ease;
    }
    .gallery-img.is-active {
        opacity: 1;
    }
    /* 中央寄せ専用。transform はここだけが使う（GSAP のアニメと競合させないため、
       fade-up は内側の .gallery-center-inner に適用する）。 */
    .gallery-center {
        position: absolute;
        left: 50%;
        top: 54%;
        transform: translate(-50%, -50%);
    }
    /* アニメーション（fade-up）と中身のレイアウトを担当。中央寄せ用 transform を
       持たないので、GSAP が transform を上書きしても中央寄せがずれない。 */
    .gallery-center-inner {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: clamp(1.5rem, 3vw, 2.5rem);
    }
    .gallery-catch {
        font-size: clamp(1.1rem, 1.8vw, 1.6rem);
        font-weight: 700;
        letter-spacing: 0.15em;
        line-height: 1.5;
    }
    .gallery-logo {
        width: clamp(10rem, 16vw, 14rem);
        height: auto;
    }

    @media (max-width: 768px) {
        .gallery {
            padding-inline: 0.5rem;
        }
        .gallery-stage {
            aspect-ratio: auto;
            min-height: auto;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: auto; /* 1行目(タイトル)はコンテンツの高さに合わせる */
            grid-auto-rows: calc((100vw - 1rem - 1.5rem) / 4);
            gap: 0.5rem;
            grid-auto-flow: dense;
        }
        .gallery-center {
            position: relative;
            left: auto;
            top: auto;
            transform: none;
            width: 100%;
            grid-column: 1 / -1;
            grid-row: 1; /* 1行目をタイトルに強制 */
            order: -1;
            padding-top: 5rem; /* 上余白を少し大きめに */
            padding-bottom: 4rem;
            z-index: 2;
        }
        .gallery-slot {
            position: relative !important;
            left: auto !important;
            top: auto !important;
            width: 100% !important;
            height: 100% !important;
            border-radius: 4px;
        }
        /* 12枚の画像をパズルのように配置 */
        .gallery-slot:nth-child(1) { grid-column: span 2; grid-row: span 2; }
        .gallery-slot:nth-child(2) { grid-column: span 2; grid-row: span 1; }
        .gallery-slot:nth-child(3) { grid-column: span 1; grid-row: span 1; }
        .gallery-slot:nth-child(4) { grid-column: span 1; grid-row: span 1; }
        .gallery-slot:nth-child(5) { grid-column: span 1; grid-row: span 2; }
        .gallery-slot:nth-child(6) { grid-column: span 2; grid-row: span 2; }
        .gallery-slot:nth-child(7) { grid-column: span 1; grid-row: span 1; }
        .gallery-slot:nth-child(8) { grid-column: span 1; grid-row: span 1; }
        .gallery-slot:nth-child(9) { grid-column: span 2; grid-row: span 1; }
        .gallery-slot:nth-child(10){ grid-column: span 2; grid-row: span 2; }
        .gallery-slot:nth-child(11){ grid-column: span 1; grid-row: span 1; }
        .gallery-slot:nth-child(12){ grid-column: span 1; grid-row: span 1; }
    }/* ============================================================
     * MV セクション本体
     * 高さはウィンドウの高さに制限し、見栄えのため最小値を確保する。
     * ============================================================ */
    .mv {
        position: relative;
        width: 100%;
        /* URLバー開閉時のガタつき・余白を防ぐため、常に最大高さ(lvh)を確保 */
        height: 100vh;
        height: 100lvh;
        min-height: 600px;        /* 見た目を考慮した高さの最小値 */
        overflow: hidden;
        margin-bottom: clamp(1rem, 2vh, 2rem); /* 非演出時に次セクションとの余白を確保 */
    }

    /* ── スクロール演出（PC）：ヒーローを固定し、背景がスクロールしない状態にする ── */
    .is-mv-choreo .mv {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        height: 100lvh;
        margin: 0;
        z-index: 0;             /* 後続コンテンツ（z-index:1）がこの上にせり上がる */
    }
    /* spacer はスクロール量の確保用。演出時のみ表示（高さは JS で設定） */
    .mv-spacer {
        display: none;
    }
    .is-mv-choreo .mv-spacer {
        display: block;
    }
    /* 後続コンテンツは固定ヒーローの上に重なる必要がある */
    .page-content,
    .site-footer {
        position: relative;
        z-index: 1;
    }
    .page-content {
        background-color: #fff;
    }

    /* ============================================================
     * 背景スライド（固定・クロスフェードのみ）
     * ============================================================ */
    .mv-slides,
    .mv-slide {
        position: absolute;
        inset: 0;
    }
    .mv-slide {
        opacity: 0;
        transition: opacity 1.8s ease;
    }
    .mv-slide.is-active {
        opacity: 1;
    }
    .mv-slide-media {
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* 元画像が縦長のため、中央が見えるように表示する */
        object-position: center center;
    }

    /* ============================================================
     * オーバーレイ
     * ============================================================ */
    .mv-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.12),
            transparent 35%,
            transparent 60%,
            rgba(0, 0, 0, 0.25)
        );
        pointer-events: none;
    }

    /* ============================================================
     * コンテンツレイヤー
     * ============================================================ */
    .mv-content {
        position: absolute;
        inset: 0;
        z-index: 2;
        max-width: 1441px;
        margin-inline: auto;
    }

    /* スクロール演出で制御するため初期は非表示。
       JS 無効（noscript）/ reduced-motion 環境では表示に戻す。 */
    .mv-copy,
    .mv-anchors {
        opacity: 0;
    }
    @media (prefers-reduced-motion: reduce) {
        .mv-copy,
        .mv-anchors {
            opacity: 1 !important;
            transform: none !important;
        }
    }

    /* ============================================================
     * キャッチコピー
     * SP: top:14%  PC: top:10vh（初回ビューポート内に確実に表示）
     * ============================================================ */
    .mv-copy {
        position: absolute;
        top: 14%;
        /* ヘッダーの共通CSS変数と連動させて右端を完全に一致させる */
        right: calc(var(--hdr-pad-r) + var(--menu-line-offset) - 0.7em);
        writing-mode: vertical-rl;
        color: #fff;
        font-size: var(--mv-copy-fz);
        font-weight: 500;
        letter-spacing: 0.32em;
        line-height: 2.4;
        text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35);
    }
    @media (min-width: 769px) {
        .mv-copy {
            top: 16vh;   /* PC: 少し上に */
        }
    }
    .mv-copy-line {
        display: inline-block;
    }

    /* ============================================================
     * アンカーリンク
     * SP: 下部中央 / PC: セクション下部10%付近（パララックスで浮上）
     * ============================================================ */
    .mv-anchors {
        position: absolute;
        left: 0;
        right: 0;
        /* SP: インジケーターと被らないよう少し高めに配置 */
        bottom: clamp(5rem, 12vh, 8rem);
        bottom: calc((100lvh - 100svh) + clamp(5rem, 12svh, 8rem));
        display: flex;
        justify-content: center;
        /* 円（リング）の下端が揃うように下揃え。3点とも円は同寸・下余白も同じため、
           下揃えで円がぴったり揃う。 */
        align-items: flex-end;
        gap: clamp(1rem, 3vw, 2.6rem);
        z-index: 3;
    }
    @media (min-width: 769px) {
        .mv-anchors {
            bottom: 10%;
        }
    }
    .mv-anchor {
        display: block;
        /* 円の実寸を3点で揃えるため、viewBox幅に比例した係数で基準サイズを補正する
           （係数は各 a.icon.width / 最大幅。詳細はフロントマター参照）。 */
        width: calc(clamp(6.5rem, 16vw, 10rem) * var(--anchor-w-factor, 1));
        transition: opacity 0.35s ease;
    }
    /* PC: アンカーアイコンを少し小さく */
    @media (min-width: 769px) {
        .mv-anchor {
            width: calc(clamp(5rem, 11vw, 8rem) * var(--anchor-w-factor, 1));
        }
    }
    .mv-anchor:hover {
        opacity: 0.78;
    }
    .mv-anchor-svg {
        width: 100%;
        height: auto;
    }

    /* ============================================================
     * スライドインジケーター
     * SP: 下部中央・横並び
     * PC: 左端・縦並び・ビューポート中央（GSAP で y 固定）
     * ============================================================ */
    .mv-indicators {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        /* SP: 画面下部ギリギリに寄せる */
        bottom: clamp(1.5rem, 4vh, 3rem);
        bottom: calc((100lvh - 100svh) + clamp(1.5rem, 4svh, 3rem));
        display: flex;
        gap: 0.6rem;
        z-index: 5;
    }
    @media (min-width: 769px) {
        .mv-indicators {
            left: 1.5rem;
            top: 50vh;              /* ビューポート中央 */
            bottom: auto;
            transform: translateY(-50%);
            flex-direction: column;
            gap: 0.8rem;
        }
    }
    .mv-indicator {
        background-color: rgba(255, 255, 255, 0.35);
        transition: background-color 0.4s ease;
    }
    /* SP: 横棒 */
    .mv-indicator {
        width: 2.2rem;
        height: 2px;
    }
    /* PC: 縦棒 */
    @media (min-width: 769px) {
        .mv-indicator {
            width: 2px;
            height: 2.2rem;
        }
    }
    .mv-indicator.is-active {
        background-color: #fff;
    }

    /* ============================================================
     * スクロール誘導（左下）
     * 初期表示でコピー等が非表示のため、スクロールを促す。
     * スクロール開始で JS（演出タイムライン）によりフェードアウトする。
     * ============================================================ */
    .mv-scroll-guide {
        position: absolute;
        left: clamp(1rem, 3vw, 2.2rem);
        bottom: clamp(1.4rem, 4vh, 2.6rem);
        bottom: calc((100lvh - 100svh) + clamp(1.4rem, 4svh, 2.6rem));
        z-index: 4;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.7rem;
        color: #fff;
        pointer-events: none;
    }
    .mv-scroll-guide-text {
        writing-mode: vertical-rl;
        font-size: 0.7rem;
        letter-spacing: 0.32em;
        text-transform: uppercase;
        text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
    }
    .mv-scroll-guide-line {
        position: relative;
        width: 1px;
        height: clamp(3rem, 7vh, 4.5rem);
        background-color: rgba(255, 255, 255, 0.4);
        overflow: hidden;
    }
    /* 上から下へ流れる光のセグメントでスクロール方向を示す */
    .mv-scroll-guide-line::after {
        content: '';
        position: absolute;
        inset: 0 auto auto 0;
        width: 100%;
        height: 45%;
        background-color: #fff;
        animation: mv-scroll-travel 1.9s ease-in-out infinite;
    }
    @keyframes mv-scroll-travel {
        0% { transform: translateY(-100%); }
        60%, 100% { transform: translateY(240%); }
    }
    @media (prefers-reduced-motion: reduce) {
        .mv-scroll-guide-line::after { animation: none; }
    }.reservation {
        background-color: #fff;
        padding-top: clamp(4rem, 8vw, 7rem);
        padding-bottom: clamp(3rem, 6vw, 5rem);
        text-align: center;
    }
    .reservation-heading {
        font-size: clamp(1.6rem, 2.5vw, 2.2rem);
        font-weight: 700;
        letter-spacing: 0.3em;
        text-indent: 0.55em;
        margin-bottom: clamp(1.5rem, 2.5vw, 2rem);
    }
    .reservation-list {
        display: flex;
        justify-content: center;
        gap: clamp(2.5rem, 7vw, 6.5rem);
        flex-wrap: wrap;
    }
    .reservation-item {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        min-width: clamp(12rem, 16vw, 14rem);
        padding-block: 4rem;
        border-top: 1px solid #1a1a1a;
        transition: opacity 0.3s ease;
        text-decoration: none;
        color: #1a1a1a;
    }
    .reservation-item::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: calc(100% - 3.5rem);
        height: 1px;
        background-color: #1a1a1a;
    }
    .reservation-item:hover {
        opacity: 0.6;
    }
    .reservation-label {
        font-size: 1.35rem;
        font-weight: 700;
        letter-spacing: 0.15em;
        position: relative;
        z-index: 1;
    }
    .reservation-icon {
        position: absolute;
        right: 0;
        width: auto;
    }
    /* アイコンの形状（縦横比）が異なるため、個別に高さを調整して面積感を揃える */
    .reservation-list li:nth-child(1) .reservation-icon {
        height: 2.6rem;
        bottom: -0.1rem;
    }
    .reservation-list li:nth-child(2) .reservation-icon {
        height: 2.1rem; /* 横長のbookアイコンは高さを抑える */
        bottom: 0.15rem;
    }
    .reservation-list li:nth-child(3) .reservation-icon {
        height: 2.4rem;
        bottom: 0rem;
    }

    /* === モバイル === */
    @media (max-width: 768px) {
        .reservation {
            padding-top: clamp(6rem, 15vw, 8rem);
            padding-bottom: clamp(5rem, 12vw, 7rem);
        }
        .reservation-heading {
            font-size: 1.4rem;
            letter-spacing: 0.2em;
            text-indent: 0.2em;
            margin-bottom: 2rem;
        }
        .reservation-list {
            flex-direction: column;
            gap: 1.5rem;
            align-items: center;
        }
        .reservation-list li {
            width: 80%;
            max-width: 280px;
        }
        .reservation-box {
            padding: 1.8rem 1.2rem;
        }
        .box-title {
            font-size: 1.1rem;
        }
        .box-title en {
            font-size: 0.9rem;
        }
        .box-link {
            font-size: 0.85rem;
        }
        .reservation-item {
            width: 100%;
            max-width: none;
            min-width: auto;
            padding-block: 2.5rem;
        }
        .reservation-label {
            font-size: 1.15rem;
        }
        .reservation-list li:nth-child(1) .reservation-icon {
            height: 2.2rem;
            bottom: -0.1rem;
        }
        .reservation-list li:nth-child(2) .reservation-icon {
            height: 1.65rem;  /* 本（Book）は横長のため高さを抑え面積を揃える */
            bottom: 0.1rem;
        }
        .reservation-list li:nth-child(3) .reservation-icon {
            height: 2.1rem;  /* カレンダーのサイズを少し大きく調整 */
            bottom: 0rem;
        }
    }.shoka {
        position: relative;
        height: 100vh;
        overflow: hidden;
        color: #fff;
        /* 背景画像の高さ（vh）。最大ビューポート(100)より高くした分が
           パララックス用の余白になる。JS の bgDriftPx もこの値を参照する。 */
        --shoka-bg-img-vh: 108;
    }
    .shoka-bg {
        position: absolute;
        inset: 0;
        overflow: hidden;
    }
    .shoka-bg-scaler {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        will-change: transform;
    }
    .shoka-bg-media {
        width: 100%;
        height: auto;
        display: block;
        /* PC：従来どおりビューポートより短い場合でも確実にカバー（元の挙動） */
        min-height: 100vh;
        object-fit: cover;
        object-position: top center;
    }

    .shoka-bg-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to right, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.25) 55%, rgba(0, 0, 0, 0.45));
    }
    .shoka-inner {
        position: relative;
        height: 100vh;
        max-width: 1441px;
        margin-inline: auto;
        display: grid;
        grid-template-columns: 1fr minmax(18rem, 32%);
        grid-template-rows: 100%;
        align-items: center;
        padding-left: var(--hdr-pad-r);
        /* ハンバーガーの「棒の右端」と厳密に合わせるため、ボタン枠と棒の差分(offset)を右パディングに足す */
        padding-right: calc(var(--hdr-pad-r) + var(--menu-line-offset));
    }
    .shoka-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2.2rem;
    }
    .shoka-heading-circle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: clamp(11rem, 16vw, 14rem);
        height: clamp(11rem, 16vw, 14rem);
        border: 1px solid rgba(255, 255, 255, 0.85);
        border-radius: 9999px;
        /* 他の h2（コンセプト等）と同等のサイズに */
        font-size: clamp(1.6rem, 2.6vw, 2.3rem);
        font-weight: 500;
        letter-spacing: 0.14em;
        text-indent: 0.15em;
        line-height: 1.3;
        text-align: center;
        padding-top: 0.15em; /* フォント特有の余白による視覚的な「上寄り」を補正 */
    }
    .shoka-lead {
        font-size: clamp(1rem, 1.5vw, 1.3rem);
        letter-spacing: 0.25em;
        line-height: 1.8;
    }
    .shoka-feature-link {
        position: relative;
        font-size: 1.05rem;
        letter-spacing: 0.25em;
        padding-bottom: 0.6rem;
    }
    .shoka-feature-arrow {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 14rem;
        height: 1px;
        background-color: #fff;
    }
    /* 右端の矢印先：上側だけが出た直角三角形（右尖り） */
    .shoka-feature-arrow::after {
        content: '';
        position: absolute;
        right: 0;
        bottom: 0;
        width: 0;
        height: 0;
        border-bottom: 0.5rem solid #fff;
        border-right: 1.5rem solid transparent;
    }
    .shoka-feature-link:hover {
        opacity: 0.75;
    }
    .shoka-reserve-btn {
        display: inline-block;
        padding: 0.65rem 2.2rem;
        /* #ffd86d：境界線＋光彩（内側・ぼかし10px） */
        color: #ffd86d;
        border: 1px solid #ffd86d;
        box-shadow: inset 0 0 10px #ffd86d;
        border-radius: 9999px;
        font-size: 1.0rem;
        letter-spacing: 0.2em;
        transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    }
    .shoka-reserve-btn:hover {
        background-color: #ffd86d;
        color: var(--color-night);
        box-shadow: inset 0 0 10px rgba(255, 216, 109, 0.6);
    }
    .shoka-images {
        position: relative;
        align-self: start;
        display: flex;
        flex-direction: column;
        will-change: transform;
    }
    .shoka-images figure {
        margin: 0;
        position: relative;
        will-change: transform;
    }
    /* 1枚目：基準位置 */
    .shoka-images figure:nth-child(1) {
        z-index: 2;
    }
    /* 2枚目：左に大きくずらし、上半分が1枚目と重なる。1枚目の下に潜る */
    .shoka-images figure:nth-child(2) {
        z-index: 1;
        transform: translateX(-55%);
        margin-top: -30%;
    }
    /* 3枚目：横位置は1枚目と同じ、2枚目の下端にわずかに重ねる。2枚目の上 */
    .shoka-images figure:nth-child(3) {
        z-index: 2;
        margin-top: -5%;
    }
    .shoka-images img {
        width: 100%;
        height: auto;
        display: block;
    }

    @media (max-width: 768px) {
        /* スマホのみ：背景を最大ビューポートより高くして余白を作り、その内側で
           ゆっくりドリフトさせる（余白は vh 基準でアドレスバー非依存＝白が出ない）。 */
        .shoka-bg-media {
            min-height: calc(var(--shoka-bg-img-vh) * 1vh);
        }
        .shoka-inner {
            grid-template-columns: 1fr;
        }
        .shoka-images {
            position: absolute;
            right: 0;
            top: 0;
            width: 45%;
            opacity: 0.85;
        }
        /* スマホ時はコンテナが右端にあるため、2枚目をさらに大きく左へずらしてバランスを取る */
        .shoka-images figure:nth-child(2) {
            transform: translateX(-85%);
        }
        .shoka-content {
            position: relative;
            z-index: 2;
            align-items: flex-start;
            text-align: left;
            top:-9%;
        }
        /* 「初夏限定プラン」円はそのまま、それ以外のテキストを少し小さく */
        .shoka-heading-circle {
            width: 9.5rem;
            height: 9.5rem;
            font-size: 1.2rem;
        }
        .shoka-lead {
            font-size: 1.05rem;
            line-height: 1.8;
        }
        .shoka-feature-link {
            font-size: 0.92rem;
        }
        .shoka-reserve-btn {
            font-size: 0.9rem;
            padding: 0.6rem 1.9rem;
        }
    }.prev-spacer {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f0f0ee;
        color: #999;
        font-size: 0.85rem;
        letter-spacing: 0.1em;
    }.stay {
        overflow: hidden;
        margin-bottom: -1px; /* 次のセクション（季節のプラン等）との間に生じる1pxの隙間を防ぐ */
        /* 構図全体のスケール基準＝ステージ（.stay-stage）の高さ。
           パネル自体は常に 100vh の全画面色面で、構図だけ縮める。
           写真・テキストはこの変数に同率で連動させる。
           見出しはコピーの 2.125 倍に固定する。 */
        --stay-stage-h: 100vh;
        --stay-copy-fz: calc(var(--stay-stage-h) * 0.019);
        --stay-heading-fz: calc(var(--stay-copy-fz) * 2.125);
    }
    .stay-container {
        display: flex;
        width: max-content;
    }
    .stay-panel {
        position: relative;
        /* パネルは常に全画面の色面。幅は中のステージに追従する。 */
        height: 100vh;
        flex-shrink: 0;
        display: flex;
        align-items: center;     /* ステージを縦中央に（縮小時は上下に色帯）*/
        justify-content: center;
        color: #fff;
        overflow: hidden;
        margin-right: -1px; /* ブラウザのサブピクセルレンダリングによる1pxの隙間を防ぐ */
    }
    .stay-stage {
        position: relative;       /* 写真・テキストの % 配置基準 */
        height: var(--stay-stage-h);
        /* デザインデータ（3154x959）の縦横比を維持 */
        aspect-ratio: 3154 / 959;
    }
    .stay-panel--family { background-color: var(--color-primary); }
    .stay-panel--friends { background-color: var(--color-accent-yellow); }
    .stay-panel--couple { background-color: var(--color-accent-brown); }

    .stay-watermark {
        position: absolute;
        left: -0.4vh;
        top: 0vh;
        writing-mode: vertical-rl;
        /* 構図（ステージ）と同率で縮小。PCは従来の 9vh 相当、スマホは一緒に小さく。 */
        font-size: calc(var(--stay-stage-h) * 0.09);
        font-weight: 700;
        letter-spacing: 0.06em;
        color: rgba(255, 255, 255, 0.12);
        white-space: nowrap;
        pointer-events: none;
        line-height: 1;
    }
    .stay-heading {
        position: absolute;
        /* コピーの 2.125 倍（.stay の変数で関係を一元管理） */
        font-size: var(--stay-heading-fz);
        font-weight: 700;
        letter-spacing: 0.22em;
        z-index: 3;
        line-height:1;
    }
    .stay-copy {
        position: absolute;
        font-size: var(--stay-copy-fz);
        letter-spacing: 0.15em;
        line-height: 2;
        z-index: 3;
        font-weight:500;
    }
    /* ふたりパネルの最後のコピーを「キッチンでコーヒー」画像(cup4)の
       上端〜下端に収まるよう、行間で全体の縦幅を調整する。 */
    .stay-copy--span-cup {
        line-height: 2.33;
    }
    .stay-photo {
        position: absolute;
        margin: 0;
    }
    .stay-photo img {
        width: 100%;
        height: auto;
        display: block;
    }

    /* スマホ：セクションは 100vh のまま、構図（ステージ）だけ縮小して
       写真・文字を一律で小さく見せる。値はプレビューで微調整可。 */
    @media (max-width: 768px) {
        .stay { --stay-stage-h: 82vh; }
    }.prev-spacer {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f0f0ee;
        color: #999;
        font-size: 0.85rem;
        letter-spacing: 0.1em;
    }.prev-index {
        max-width: 760px;
        margin-inline: auto;
        padding: clamp(3rem, 8vw, 6rem) 1.5rem;
    }
    .prev-index h1 {
        font-size: 1.5rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        margin-bottom: 0.8rem;
    }
    .prev-lead {
        color: #555;
        margin-bottom: 2.5rem;
        font-size: 0.9rem;
    }
    .prev-lead a { color: var(--color-primary); text-decoration: underline; }
    .prev-list {
        display: flex;
        flex-direction: column;
        gap: 0.8rem;
    }
    .prev-list a {
        display: flex;
        align-items: baseline;
        gap: 1rem;
        padding: 1rem 1.3rem;
        border: 1px solid #ddd;
        border-radius: 0.6rem;
        transition: border-color 0.2s ease, background-color 0.2s ease;
    }
    .prev-list a:hover {
        border-color: var(--color-primary);
        background-color: color-mix(in srgb, var(--color-primary) 6%, white);
    }
    .prev-label { font-weight: 700; }
    .prev-note { font-size: 0.78rem; color: #888; }
    .prev-slug { margin-left: auto; font-size: 0.78rem; color: #aaa; font-family: monospace; }