/* ============================================
スクロールバー非表示
============================================ */
html, body {
  scrollbar-width: none;
}
html::-webkit-scrollbar, body::-webkit-scrollbar {
  display: none;
}

/* =====================================
Variables
===================================== */
:root {
  --nav-offset: clamp(250px, 30vw, 350px);
  --section-pr: clamp(40px, 4vw, 60px);
  --color-bg: #f5f2ec;
  --color-blue: #2a4f98;
  --color-crimson: #b22222;
  --color-dark: #231815;
  --color-gold: #d2b56c;
  --color-navy: #0d1e3d;
  --color-navy-mid: #142850;
  --color-text: #111111;
  --fs-body-ja: clamp(14px, 1.1vw, 16px);   /* min14px */
  --fs-h1-en: clamp(50px, 7vw, 80px);
  --fs-h2-en: clamp(26px, 2.50vw, 36px);   /* min26px */
  --fs-h3-en: clamp(17px, 1.25vw, 18px);
  --fs-note-ja: clamp(13px, 0.88vw, 13.5px); /* min13px（最小時は変えず上限のみ縮小）*/
  --fs-small: clamp(12px, 0.78vw, 12.5px);   /* min12px（最小時は変えず上限のみ縮小）*/
  --fs-sub-ja: clamp(14px, 1.08vw, 16px);  /* min14px */
  --lh-body: 30px;
  --lh-sub: 35px;
  --ls-en: 3px;
  --ls-ja: 2px;
}

@media (min-width: 1000px) {

  /* =====================================
  Base
  ===================================== */
  html, body {
    margin: 0;
    padding: 0;
  }
  .sp, .sp-br { display: none; }
  /* SPヘッダー・メニューはPC非表示 */
  #sp-header, #sp-menu { display: none !important; }
  a { text-decoration: none; }

  body {
    /* MV以下はすべてネイビーを下地に。個別backgroundは必要なものだけ */
    background: var(--color-navy);
    color: var(--color-text);
    font-family: 'Noto Serif JP', 'Shippori Mincho', serif;
    font-size: var(--fs-body-ja);
    font-weight: 500;
    letter-spacing: var(--ls-ja);
    line-height: var(--lh-body);
  }

  /* ─── z-index アーキテクチャ ──────────────────────
     0 : #mv
     1 : 全セクション / footer
   100 : .side-nav-wrap
  3001 : .book-now-fixed
  ─────────────────────────────────────────── */
  section,
  #footer {
    position: relative;
    z-index: 1;
  }

  /* section 共通：ナビ分の左余白 */
  section {
    padding-left: var(--nav-offset);
  }
  /* 全幅レイアウト例外 */
  #mv,
  #place,
  #aperitivo {
    padding-left: 0;
  }

  /* =====================================
  MV
  ===================================== */
  #mv {
    background: #000;                    /* フェードイン前の一瞬は真っ黒（旧: --color-navy） */
    height: 100vh;
    overflow: hidden;
    position: relative;
    width: 100%;
    z-index: 0;
  }
  #mv .fv-video {
    animation: mvVideoFadeIn 2.8s ease-out forwards;           /* ① ページ読み込み時にじわっと現れる */
    filter: brightness(1.05) saturate(1.10) contrast(1.00);   /* 明るく＋鮮やかに＋少しメリハリ */
    height: 100%;
    inset: 0;
    object-fit: cover;
    object-position: center 8%;        /* 上へ少しシフト（旧 15%）*/
    opacity: 0;                        /* 初期は非表示。animation が opacity: 1 まで持ち上げる */
    position: absolute;
    width: 100%;
    z-index: 0;
  }
  /* 下端グラデ：video → navy へ溶かす */
  #mv::after {
    background: linear-gradient(
      to bottom,
      rgba(13,30,61,0)    0%,
      rgba(13,30,61,0)    52%,
      rgba(13,30,61,0.06) 62%,
      rgba(13,30,61,0.18) 72%,
      rgba(13,30,61,0.42) 82%,
      rgba(13,30,61,0.72) 91%,
      rgba(13,30,61,1)    100%
    );
    bottom: 0;
    content: '';
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
  }
  #mv .overlay {
    background: var(--color-navy-mid);
    inset: 0;
    opacity: .2;
    pointer-events: none;
    position: absolute;
    z-index: 1;
  }
  #mv .mv-center {
    inset: 0;                                  /* full-screen overlay */
    pointer-events: none;
    position: absolute;
    z-index: 10;
    /* flex 解除 ── tagline / logo それぞれを absolute で独立配置 */
  }
  /* コピー＋ロゴの共通コンテナ：ポジショニングコンテキストとして全画面に */
  #mv .logo-wrap {
    inset: 0;
    position: absolute;
  }
  #mv .tagline {
    color: #fff;
    font-family: 'Noto Serif JP', serif;
    font-size: clamp(15px, 1.8vw, 26px);
    font-weight: 400;
    left: 50%;
    letter-spacing: 6px;
    line-height: 2.2;                                          /* 行間を広く（旧 1）*/
    position: absolute;
    text-align: center;                                        /* センター揃え */
    text-shadow: 0 2px 16px rgba(13,30,61,0.55);
    top: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
  }
  #mv .mv-logo-img {
    display: block;
    filter: drop-shadow(0 2px 12px rgba(13,30,61,0.45));
    height: auto;
    left: 50%;                                 /* 横: 中央 */
    position: absolute;
    top: 68vh;                                 /* 上へ（旧 75vh）*/
    transform: translateX(-50%);
    width: clamp(135px, 20vw, 230px)!important;
  }

  /* =====================================
  スクロールサイン
  ===================================== */
  .mv-scroll {
    align-items: center;
    animation: mvFadeUp 1.8s 2.8s cubic-bezier(0.16, 0.64, 0.24, 1) forwards;
    bottom: clamp(20px, 3vh, 36px);
    display: flex;
    flex-direction: column;
    left: 50%;
    opacity: 0;
    position: absolute;
    transform: translateX(-50%);
    z-index: 10;
  }
  .mv-scroll-line {
    background: rgba(255,255,255,0.25);
    display: block;
    height: clamp(88px, 14vh, 144px);
    overflow: hidden;
    position: relative;
    width: 1px;
  }
  .mv-scroll-line::after {
    animation: scrollFlow 2.4s ease-in-out 3.4s infinite;
    background: linear-gradient(
      to bottom,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0.9) 50%,
      rgba(255,255,255,0) 100%
    );
    content: '';
    height: 50%;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
  }

  /* =====================================
  INTRO
  ===================================== */
  #intro {
    align-items: flex-start;
    background: var(--color-navy);
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 0;
    min-height: clamp(450px, 45vw, 620px);
    padding-right: var(--section-pr);
    padding-top: clamp(80px, 9vh, 140px);
    position: relative;
    z-index: 1;
  }
  #intro::before { display: none; }
  #intro .text-block,
  #intro .intro-photos {
    position: relative;
    z-index: 3;
  }

  /* =====================================
  サイドナビ（固定）
  ===================================== */
  .side-nav-wrap {
    align-items: flex-start;
    bottom: 0;
    display: flex;
    flex-direction: column;
    left: clamp(60px, 10vw, 85px);
    opacity: 0;                          /* 初期は非表示。MVから離れたらJS が .is-visible を付与 */
    pointer-events: none;
    position: fixed;
    transition: opacity 0.8s ease;
    z-index: 100;
  }
  .side-nav-wrap.is-visible {
    opacity: 1;
    pointer-events: auto;
  }
  .side-nav-inner {
    align-items: stretch;
    display: flex;
    flex-direction: row;
    gap: clamp(12px, 1.2vw, 18px);
    height: clamp(250px, 28vh, 380px);
  }
  .vline { background: rgba(255,255,255,0.45); flex-shrink: 0; width: 1px; }
  .side-nav { align-self: flex-start; display: flex; flex-direction: column; }
  .side-nav a {
    color: rgba(255,255,255,0.8);
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(11px, 1vw, 14px);
    font-weight: 600;
    letter-spacing: 0.2em;
    line-height: 3.1;
    text-decoration: none;
    transition: color 0.2s ease;
  }
  .side-nav a:hover { color: #fff; }

  /* =====================================
  FIXED BOOK NOW
  ===================================== */
  .book-now-fixed {
    align-items: center;
    background: var(--color-crimson);
    bottom: 0;
    box-shadow: -2px -2px 16px rgba(0,0,0,0.12);
    color: #fff;
    display: flex;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(14px, 1.15vw, 20px);
    font-weight: 700;
    height: clamp(38px, 3.5vw, 54px);
    justify-content: center;
    letter-spacing: 4px;
    position: fixed;
    right: 0;
    text-decoration: none;
    transition: opacity 0.2s, transform 0.2s;
    width: clamp(140px, 16vw, 240px);
    z-index: 3001;
  }
  .book-now-fixed:hover { opacity: 0.9; transform: scale(1.02); }


  /* =====================================
  INTRO — テキスト・写真レイアウト
  ===================================== */
  #intro .text-block {
    display: flex;
    flex: 0 0 clamp(360px, 36vw, 440px);
    flex-direction: column;
    gap: clamp(24px, 3vw, 40px);
    padding-top: clamp(20px, 3vw, 40px);
  }
  #intro .text-block h2 {
    color: var(--color-gold);
    font-family: 'Cormorant Garamond', serif;
    font-size: var(--fs-h1-en);
    font-weight: 600;
    line-height: 1;
  }

  #intro .text-block span:first-child {
  font-size: 0.5em; 
  display: block;
}
    
  #intro .text-block .body {
    color: #fff;
    font-size: var(--fs-body-ja);
    font-weight: 300;
    letter-spacing: var(--ls-ja);
  }
  #intro .text-block .body p { line-height: 2; margin: 0; }
  #intro .text-block .body p.spacer { line-height: 1.2; }

  .intro-photos {
    flex: 0 0 clamp(360px, 46vw, 660px);
    height: clamp(420px, 52vw, 620px);
    overflow: visible;
    position: relative;
  }
  .intro-photo { border-radius: 4px; overflow: hidden; position: absolute; }
  .intro-photo img { display: block; height: 100%; object-fit: cover; width: 100%; }
  .intro-photo--1 {
    height: clamp(260px, 32vw, 440px);
    left: clamp(20px, 3vw, 40px);
    top: 0;
    width: 78%;
    z-index: 1;
  }
  .intro-photo--2 {
    height: clamp(100px, 12vw, 160px);
    left: 55%;
    top: clamp(185px, 34vw, 370px);
    width: 35%;
    z-index: 2;
  }

    
  #place {
  align-items: flex-start;
  background: var(--color-navy);
  display: flex;
  gap: 10px;                             /* INTROと同じ */
  justify-content: center;
  min-height: clamp(450px, 45vw, 620px);
  padding-left: var(--nav-offset);       /* INTROと同じ（+40px を撤去して左へ） */
  padding-right: var(--section-pr);      /* INTROと同じ */
  padding-bottom: clamp(60px, 8vw, 100px);
  padding-top: 0;
  position: relative;
}
/* INTRO と同じ上部グラデーション：ほんのり暗くなる演出 */
/* #place::before のグラデーションシェードは削除 */
.place-photos {
  flex: 0 0 clamp(360px, 46vw, 660px);
  height: clamp(420px, 52vw, 620px);
  /* margin-left の負値トリックを撤去。
     #intro と対称の配置にして、プレイスメイン写真の左端が
     イントロのテキストの左端と揃うようにする */
  overflow: visible;
  position: relative;
}
.place-photo {
  border-radius: 4px;
  overflow: hidden;
  position: absolute;
}
.place-photo img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}
.place-photo--1 {
  height: clamp(260px, 32vw, 440px);
  left: 0;                                /* メイン写真の左端を .place-photos コンテナの左端（= INTRO テキストの左端）に揃える */
  top: 0;
  width: 78%;
  z-index: 1;
}
.place-photo--2 {
  height: clamp(100px, 12vw, 160px);
  /* サブはメインとの相対位置（メイン左外側に少し飛び出して重なる構図）を崩さないため、
     メインの左シフト量(≒コンテナ幅の16%)と同じ分だけ左へ移動。
     旧値 right: 60%（= コンテナ左5%地点）→ 5% − 16% = −11% */
  left: -11%;
  top: clamp(185px, 34vw, 370px);
  width: 35%;
  z-index: 2;
}
#place .text-block {
  display: flex;
  flex: 0 0 clamp(360px, 36vw, 440px);   /* INTROのtext-blockと同じ寸法（グループ幅を揃えて対称配置に） */
  flex-direction: column;
  gap: clamp(24px, 3vw, 40px);
  padding-top: clamp(60px, 10vw, 80px);
  margin-left: -3vw;                      /* 写真との間を縮めてテキストを少し左へ。
                                             ※数値を 0 に戻すとINTROテキストの左端と完全一致。
                                             ※−vw を大きくするほどテキストが左に寄るが、
                                               メイン写真も若干右にドリフトする */
}
    
 #place .text-block span:first-child {
  font-size: 0.5em; 
  display: block;
}
#place .text-block h2 {
  color: var(--color-gold);
  font-family: 'Cormorant Garamond', serif;
  font-size: var(--fs-h1-en);
  font-weight: 600;
  line-height: 1;
}
#place .text-block .body {
  color: #fff;
  font-size: var(--fs-body-ja);
  font-weight: 300;
  letter-spacing: var(--ls-ja);
}
#place .text-block .body p {
  line-height: 2;
  margin: 0;
}
#place .text-block .body p.spacer {
  line-height: 1.2;
}

  
  /* =====================================
  APERITIVO — aperitivo01: 60vh sticky + 2col content
  ===================================== */
  #aperitivo {
    position: relative;
  }

  /* ───  sticky 全幅画像 ─── */
  .aper-sticky-img {
    height: 55vh;
    overflow: hidden;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 0;
  }
  .aper-sticky-img img {
    display: block;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    width: 100%;
  }
  .aper-sticky-overlay {
    background: rgba(13,30,61,0.15);
    inset: 0;
    position: absolute;
  }

  /* ─── スクロールでかぶさるネイビーコンテンツ ─── */
  .aper-content {
    background: var(--color-navy);
    padding-bottom: clamp(140px, 18vw, 240px);
    padding-top: clamp(40px, 5vw, 64px);
    position: relative;
    z-index: 2;
  }

  /* ─── APERITIVO レイアウト：flex-wrap で自動切り替え ───
     広い時：[テキスト左] [30px] [サブ写真]（テキスト幅 + 30px + 写真が並ぶ）
     狭くなったら自動で縦積みに切り替え
  ─────────────────────────────────────── */
  .aper-content-inner {
    align-items: flex-end;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;                             /* テキストと写真の間は30px固定 */
    padding-left: calc(var(--nav-offset) + 40px);
    padding-right: var(--section-pr);
  }
  .aper-text {
    flex: 0 1 clamp(320px, 44vw, 640px);  /* grow:0 → 写真が右端に追いやられない */
    min-width: 280px;                      /* ここを下回ると縦積みに折り返す */
    text-align: left;
  }
  /* ─── APERITIVO サブ写真 ─── */
  .aper-imgs {
    align-self: flex-end;
    display: flex;
    flex: 0 0 auto;
    flex-direction: row;
    gap: clamp(8px, 1.2vw, 15px);
  }
  .aper-sq-img {
    border-radius: 4px;
    flex-shrink: 0;
    height: clamp(100px, 11vw, 155px);
    overflow: hidden;
    width: clamp(100px, 11vw, 155px);
  }
  .aper-sq-img img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
  }

  #aperitivo .en-title {
    color: #fff;
    font-family: 'Cormorant Garamond', serif;
    font-size: var(--fs-h2-en);
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 clamp(4px, 0.5vw, 8px);
  }
  #aperitivo .ja-sub {
    color: rgba(255,255,255,0.75);
    display: block;
    font-size: var(--fs-sub-ja);
    letter-spacing: 6.5px;
    margin: 0 0 clamp(16px, 2vw, 24px);
  }
  #aperitivo .body {
    color: rgba(255,255,255,0.85);
    font-size: var(--fs-body-ja);
    font-weight: 300;
    letter-spacing: var(--ls-ja);
    line-height: 2;
  }
  #aperitivo .body p { margin: 0; }
  #aperitivo .body p.spacer { line-height: 1.2; }


  /* =====================================
  course-tag — コース名識別ラベル
  Aperitivo / COMMOZIONE / INNOVAZIONEの上に配置
  ===================================== */
  .course-tag {
    color: var(--color-gold);
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(14px, 1.1vw, 16px);   /* min 12→14px */
    font-weight: 400;
    letter-spacing: 0.45em;
    margin-bottom: clamp(12px, 1.4vw, 20px);
    text-transform: lowercase;
  }

  /* =====================================
  COMMOZIONE — INNOVAZIONEと同構造のflex行
  （メイン画像は画面右端までブリードする）
  ===================================== */
  #commozione {
    align-items: flex-start;
    display: flex;
    gap: clamp(20px, 2.5vw, 40px);
    justify-content: flex-start;
    overflow: hidden;
    padding-bottom: clamp(80px, 10vw, 130px);
    padding-left: calc(var(--nav-offset) + 40px);
    padding-right: 0;                          /* ←メイン画像を画面右端までブリードさせる */
    padding-top: clamp(80px, 10vw, 130px);
  }
  .comm-text {
    align-items: flex-start;
    display: flex;
    flex: 0 0 clamp(240px, 26vw, 360px);
    flex-direction: column;
    text-align: left;
  }
  .comm-main-img {
    border-radius: 4px 0 0 4px;                /* 画面右端に接する辺は角丸を落として自然に */
    flex: 1;
    height: clamp(340px, 40vw, 560px);         /* INNOVAZIONEより大きめ */
    /* max-width の上限を外し、.comm-text 以外の残り横幅すべてを占有 → 画面右端までブリード */
    overflow: hidden;
    position: relative;
  }
  .comm-main-img img {
    display: block;
    height: 100%;
    left: 0;
    object-fit: cover;
    position: absolute;
    top: 0;
    width: 100%;
  }
  .comm-title {
    color: #fff;
    font-family: 'Cormorant Garamond', serif;
    font-size: var(--fs-h2-en);
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
  }
  .comm-ja-sub {
    color: #fff;
    font-size: var(--fs-sub-ja);
    letter-spacing: 6.5px;
    line-height: 26px;
    margin: 0 0 clamp(16px, 2vw, 24px);
  }
  .comm-desc {
    color: #fff;
    font-size: var(--fs-body-ja);
    font-weight: 300;
    letter-spacing: var(--ls-ja);
    line-height: 2;
    margin-bottom: clamp(15px, 10vw, 30px);
  }
  .comm-price { line-height: 1.6; margin: 0 0 clamp(4px, 0.5vw, 8px); }
  .comm-price-num {
    color: #fff;
    font-family: 'Noto Serif JP', serif;
    font-size: clamp(14px, 1.2vw, 17px);
    font-weight: 700;
    letter-spacing: 3px;
  }
  .comm-price-tax {
    color: #fff;
    font-family: 'Noto Serif JP', serif;
    font-size: var(--fs-small);
    letter-spacing: 2px;
    margin-left: 4px;
  }
  .comm-price-note {
    color: rgba(255,255,255,0.6);
    font-family: 'Noto Serif JP', serif;
    font-size: var(--fs-small);
    letter-spacing: 1px;
    line-height: 1.8;
    margin-bottom: clamp(15px, 10vw, 30px);
    white-space: nowrap;
  }
  .comm-menu-btn {
    align-self: flex-start;
    background: var(--color-gold);
    border-radius: 5px;
    color: #fff;
    display: inline-block;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(10px, 1vw, 12px);
    font-weight: 700;
    letter-spacing: 0.5em;
    margin-bottom: 0;
    padding: 0 clamp(20px, 2.5vw, 36px);
    text-decoration: none;
    transition: opacity 0.2s ease;
  }
  .comm-menu-btn:hover { opacity: 0.8; }

  /* =====================================
  INNOVAZIONE — ソリッドネイビー（ラッパー廃止）
  ===================================== */
  #innovazione {
    background: var(--color-navy);
    display: flex;
    gap: clamp(20px, 2.5vw, 40px);
    justify-content: flex-start;
    padding-bottom: clamp(80px, 10vw, 130px);
    padding-left: calc(var(--nav-offset) + 40px);
    padding-right: var(--section-pr);
    padding-top: clamp(80px, 10vw, 130px);
  }
  .inno-text {
    align-items: flex-start;
    display: flex;
    flex: 0 0 clamp(240px, 26vw, 360px);
    flex-direction: column;
    text-align: left;
  }
  .inno-title {
    color: #fff;
    font-family: 'Cormorant Garamond', serif;
    font-size: var(--fs-h2-en);
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
  }
  .inno-ja-sub {
    color: #fff;
    font-size: var(--fs-sub-ja);
    letter-spacing: 6.5px;
    line-height: 26px;
    margin: 0 0 clamp(16px, 2vw, 24px);
  }
  .inno-desc {
    color: rgba(255,255,255,0.9);
    font-size: var(--fs-body-ja);
    font-weight: 300;
    letter-spacing: var(--ls-ja);
    line-height: 2;
    margin: 0 0 clamp(16px, 2.5vw, 32px);
  }
  .inno-price { line-height: 1.6; margin: 0 0 clamp(4px, 0.5vw, 8px); }
  .inno-price-num {
    color: #fff;
    font-family: 'Noto Serif JP', serif;
    font-size: clamp(14px, 1.2vw, 17px);
    font-weight: 700;
    letter-spacing: 3px;
  }
  .inno-price-tax {
    color: #fff;
    font-family: 'Noto Serif JP', serif;
    font-size: var(--fs-small);
    letter-spacing: 2px;
    margin-left: 4px;
  }
  .inno-price-note {
    color: rgba(255,255,255,0.6);
    font-family: 'Noto Serif JP', serif;
    font-size: var(--fs-small);
    letter-spacing: 1px;
    line-height: 1.8;
    margin: 0 0 clamp(20px, 2.5vw, 32px);
  }
  .inno-menu-btn {
    align-self: flex-start;
    background: var(--color-gold);
    border-radius: 5px;
    color: #fff;
    display: inline-block;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(10px, 1vw, 12px);
    font-weight: 700;
    letter-spacing: 0.5em;
    margin-bottom: clamp(20px, 5vw, 40px);
    padding: 0 clamp(20px, 2.5vw, 36px);
    text-decoration: none;
    transition: opacity 0.2s ease;
  }
  .inno-menu-btn:hover { opacity: 0.8; }
  .inno-img {
    border-radius: 4px;
    flex: 1;
    height: clamp(280px, 29vw, 420px);          /* 天地を少しだけ下げる（前回 clamp(300, 32vw, 460)）*/
    max-width: clamp(280px, 33vw, 470px);       /* 横を少し広げて正方形寄りに（前回 clamp(240, 30vw, 430)）*/
    overflow: hidden;
  }
  .inno-img img { display: block; height: 100%; object-fit: cover; width: 100%; }

  /* フッター — パートナーロゴ：© と同じラインに横並び */
  .foot-partner-logos {
    display: flex;
    flex-direction: row;
    gap: clamp(20px, 3vw, 40px);
  }
  .foot-partner-logos a {
    display: block;
    opacity: 0.8;
    transition: opacity 0.2s;
  }
  .foot-partner-logos a:hover { opacity: 1; }
  .foot-partner-logos img {
    display: block;
    height: auto;
    width: clamp(100px, 11vw, 150px);
  }

    
  /* =====================================
  FOOTER
  ===================================== */
  #footer {
    background: #edf3f6;               /* 薄いブルーグレー（旧 #f0ede8 ベージュ系）*/
    padding-bottom: clamp(32px, 4vw, 48px);
    padding-left: 0;
    padding-right: clamp(40px, 5vw, 80px);
    padding-top: clamp(48px, 5vw, 72px);
    position: relative;
    z-index: 200;
  }
  .foot-inner {
    align-items: flex-start;
    display: flex;
    gap: clamp(40px, 6vw, 100px);
    margin-bottom: clamp(24px, 3vw, 40px);
    padding: 0 clamp(40px, 5vw, 80px);
  }
  .foot-left {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 0;
    left: clamp(60px, 10vw, 85px);
  }
  .foot-logo { margin-bottom: clamp(24px, 3vw, 36px); width: clamp(140px, 16vw, 220px); }
  .foot-logo img { display: block; height: auto; width: 100%; }
  #footer .foot-nav { display: flex; flex-direction: column; margin-bottom: clamp(24px, 3vw, 36px); }
  #footer .foot-nav a {
    color: var(--color-navy);
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(12px, 1.1vw, 16px);
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 2.6;
    text-decoration: none;
    transition: opacity 0.2s;
  }
  #footer .foot-nav a:hover { opacity: 0.6; }
  #footer .foot-book {
    align-items: center;
    background: var(--color-crimson);
    display: inline-flex;
    height: clamp(26px, 2.2vw, 32px);
    justify-content: center;
    margin-bottom: clamp(20px, 3vw, 36px);
    width: clamp(100px, 10vw, 140px);
  }
  #footer .foot-book span {
    color: #fff;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(11px, 1vw, 14px);
    font-weight: 700;
    letter-spacing: 1px;
  }
  .foot-right {
    max-width: 60%;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: clamp(12px, 1.5vw, 20px);
    margin: 0 auto;
  }
  .foot-name {
    color: var(--color-text);
    font-size: clamp(14px, 1.3vw, 18px);
    font-weight: 500;
    letter-spacing: 2px;
    margin: 0 0 clamp(8px, 1vw, 12px);
  }
  .foot-table { border-collapse: collapse; color: var(--color-text); font-size: var(--fs-note-ja); }
  .foot-table tr { vertical-align: top; }
  .foot-table td {
    letter-spacing: 1px;
    line-height: 1.8;
    padding: clamp(3px, 0.4vw, 6px) clamp(12px, 1.5vw, 20px) clamp(3px, 0.4vw, 6px) 0;
  }
  .foot-label { color: var(--color-text); font-weight: 500; min-width: clamp(60px, 7vw, 100px); white-space: nowrap; }
  .foot-sub { color: rgba(0,0,0,0.55); display: block; font-size: var(--fs-small); line-height: 1.6; }
  #footer .foot-notes { color: rgba(0,0,0,0.5); font-size: var(--fs-note-ja); letter-spacing: 0.5px; line-height: 1.9; }
  #footer .foot-notes p { margin: 0; }
  .foot-tel-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(4px, 0.5vw, 8px); }
  .foot-tel { color: var(--color-text); font-size: var(--fs-body-ja); font-weight: 500; letter-spacing: 1.4px; margin: 0; }
  .foot-addr { color: var(--color-text); font-size: var(--fs-note-ja); letter-spacing: 1px; margin: 0; }
  #footer .foot-google { color: var(--color-navy); font-size: var(--fs-note-ja); letter-spacing: 1px; opacity: 0.8; text-decoration: none; white-space: nowrap; }
  #footer .foot-google:hover { opacity: 1; }
  .foot-map { height: clamp(140px, 16vw, 220px); background: #ccc; border-radius: 2px; overflow: hidden; width: 50%; }
  .foot-map iframe { filter: grayscale(100%) contrast(0.85) brightness(1.05); height: 100%; width: 100%; }
  .foot-copyright {
    color: rgba(0,0,0,0.4);
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(10px, 0.83vw, 12px);
    font-weight: 600;
    letter-spacing: 2px;
    margin: 0;
    text-align: center;
  }

  /* =====================================
  FOOTER — ボトム行：パートナーロゴ ＋ ©
  左端：SHIGIRAロゴ／中央：© 表記／右端：スペース
  grid-template-columns で © を真ん中キープ＋ロゴ左寄せ
  ===================================== */
  .foot-bottom {
    align-items: center;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    padding: clamp(12px, 1.5vw, 20px) clamp(40px, 5vw, 80px) 0;
  }
  .foot-bottom .foot-partner-logos {
    grid-column: 1;
    justify-self: start;
  }
  .foot-bottom .foot-copyright {
    grid-column: 2;
  }


  /* ================================================
  テキスト左揃え強制（各コースセクション）
  ================================================ */
  #aperitivo .course-tag,
  #aperitivo .en-title,
  #aperitivo .ja-sub,
  #aperitivo .body,
  #aperitivo .body p { text-align: left !important; }

  #commozione .course-tag,
  #commozione .comm-title,
  #commozione .comm-ja-sub,
  #commozione .comm-desc,
  #commozione .comm-price,
  #commozione .comm-price-note { text-align: left !important; }

  #innovazione .course-tag,
  #innovazione .inno-title,
  #innovazione .inno-ja-sub,
  #innovazione .inno-desc,
  #innovazione .inno-price,
  #innovazione .inno-price-note { text-align: left !important; }

  /* ================================================
  ラジアルグラデーション（各ネイビーセクション）
  ================================================ */
  #intro {
    background: radial-gradient(
      ellipse at 62% 62%,
      rgba(255,255,255,0.018) 0%,
      transparent 65%
    ), var(--color-navy);
  }
  #place {
    background: radial-gradient(
      ellipse at 38% 50%,
      rgba(255,255,255,0.022) 0%,
      transparent 65%
    ), var(--color-navy);
  }
  .aper-content {
    background: radial-gradient(
      ellipse at 50% 45%,
      rgba(255,255,255,0.018) 0%,
      transparent 60%
    ), var(--color-navy);
  }
  #commozione {
    background: radial-gradient(
      ellipse at 28% 50%,
      rgba(255,255,255,0.018) 0%,
      transparent 60%
    ), var(--color-navy);
  }

} /* end @media 1000px */

/* =====================================
  狭いPC（1000〜1149px）レイアウト調整
  COMMOZIONE / INNOVAZIONE を縦積みに切替
===================================== */
@media (min-width: 1000px) and (max-width: 1149px) {

  /* COMMOZIONE：縦積みに切替、写真→テキストの順 */
  #commozione {
    flex-direction: column;
    margin-top: clamp(48px, 7vw, 100px);
    padding-bottom: clamp(56px, 7vw, 100px);
    padding-right: var(--section-pr);
    padding-top: 0;
  }
  .comm-main-img {
    border-radius: 0;
    flex: none;
    height: clamp(260px, 42vw, 480px);
    max-width: 100%;
    order: 1;
    width: 100%;
  }
  .comm-text {
    flex: none;
    order: 2;
    padding-top: clamp(12px, 2vw, 24px);
    width: 100%;
  }

  /* INNOVAZIONE と COMMOZIONE のセクション間を広く */
  #innovazione {
    flex-direction: column;
    margin-top: clamp(48px, 7vw, 100px);
    padding-bottom: clamp(56px, 7vw, 100px);
    padding-top: 0;
  }
  /* INNOVAZIONEのメイン写真→テキスト */
  .inno-img {
    border-radius: 0;
    flex: none;
    height: clamp(240px, 42vw, 480px);
    max-width: 100%;
    order: 1;
    width: 100%;
  }
  .inno-text {
    flex: none;
    order: 2;
    padding-top: clamp(12px, 2vw, 24px);  /* 画像→テキスト間 狭く */
  }

  /* INTRO：写真の重なりを狭い幅でも維持 */
  .intro-photo--2 {
    top: clamp(185px, 26vw, 330px);
  }
}

/* ================================================
スクロールアニメーション（全域 — media queryなし）
ゆっくり・大きく
================================================ */
.anim-target {
  opacity: 0;
  transform: translateY(50px);
  transition:
    opacity 2.8s cubic-bezier(0.16, 0.64, 0.24, 1),
    transform 2.8s cubic-bezier(0.16, 0.64, 0.24, 1);
}
.anim-target.is-inview {
  opacity: 1;
  transform: translateY(0);
}
.anim-target.delay-1 { transition-delay: 0.3s; }
.anim-target.delay-2 { transition-delay: 0.65s; }
.anim-target.delay-3 { transition-delay: 1.0s; }

/* ================================================
INTRO / PLACE — ふわふわ浮遊
================================================ */
@keyframes floatY {
  0%   { transform: translateY(0px); }
  100% { transform: translateY(-10px); }
}
@keyframes floatYSub {
  0%   { transform: translateY(0px); }
  100% { transform: translateY(-13px); }
}
.intro-photo--1.is-floating { animation: floatY    7.0s       ease-in-out infinite alternate; }
.intro-photo--2.is-floating { animation: floatYSub 6.2s 1.2s  ease-in-out infinite alternate; }
.place-photo--1.is-floating { animation: floatY    7.4s 0.4s  ease-in-out infinite alternate; }
.place-photo--2.is-floating { animation: floatYSub 6.6s 1.6s  ease-in-out infinite alternate; }

/* ================================================
COMMOZIONE photo — スクロールズーム（スライドショー対応）
================================================ */
.comm-main-img .slide img {
  transform: scale(var(--comm-zoom, 1.0));
  transform-origin: center center;
  transition: transform 0.15s linear, opacity 1.2s ease;
}

/* ================================================
MV — ロゴ＋コピー フェードアップ / スクロールサインのフロー
（PC/SP共通：@media外に置くこと）
================================================ */
@keyframes mvFadeUp {
  0%   { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes scrollFlow {
  0%   { transform: translateY(-100%); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(250%); opacity: 0; }
}
/* MV — 動画フェードイン（暗闇からじわっと浮かび上がる） */
@keyframes mvVideoFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* コピーが先に出現、ロゴがその後
   ── transform を含む専用 keyframe を使うことで
      absolute 配置の translate と競合しない */
#mv .tagline {
  animation: mvTaglineFadeIn 2.0s 0.4s cubic-bezier(0.16, 0.64, 0.24, 1) forwards;
  opacity: 0;
}
#mv .mv-logo-img {
  animation: mvLogoFadeIn 2.0s 1.6s cubic-bezier(0.16, 0.64, 0.24, 1) forwards;
  opacity: 0;
}
/* translate(-50%, -50%) を維持したまま 20px 上からフェードイン */
@keyframes mvTaglineFadeIn {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 20px)); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}
/* translateX(-50%) を維持したまま 20px 上からフェードイン */
@keyframes mvLogoFadeIn {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to   { opacity: 1; transform: translateX(-50%); }
}

/* ================================================
スライドショー共通（COMMOZIONE / INNOVAZIONE）
grid重ねでクロスフェード
================================================ */
.comm-slideshow,
.inno-slideshow {
  display: grid;
  height: 100%;
  width: 100%;
}
.comm-slideshow .slide,
.inno-slideshow .slide {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.comm-slideshow .slide.active,
.inno-slideshow .slide.active {
  opacity: 1;
}
.comm-slideshow .slide img,
.inno-slideshow .slide img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}


/* ================================================
ノイズ・グレイン
  fixed overlay でフィルム粒子感を全体に追加
  pointer-events:none なので操作には影響なし
================================================ */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  /*
   * ノイズ・グレイン強度の目安（この1行だけ変える）
   *   ほぼなし ： 0.010〜0.020
   *   うっすら ： 0.025〜0.035  ← 現在 0.032
   *   はっきり ： 0.050〜0.080
   *   フィルム感強め： 0.10〜0.15
   */
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}



/* ============================================================
  LIGHT THEME（薄下地バージョン）— light-theme.css から統合
  下地を「薄水色 / 白」に切り替える上書きテーマ

  ★ 下地カラーの切替はここだけ触ればOK
  ・薄水色版（デフォルト）: --bg-light : #e8f0f4 / --bg-light-sub : #dde7ed
  ・白版にしたいとき      : --bg-light : #f6f4ee / --bg-light-sub : #eae4d8
============================================================ */
:root {
  /* --- 薄水色（usu-mizuiro） --- */
  --bg-light     : #e8f0f4;              /* メインの下地 */
  --bg-light-sub : #dde7ed;              /* COMMOZIONE等、少し濃い下地 */

  /* --- 白（warm white）にしたい場合は上の2行をコメントアウトし、下の2行を有効化 --- */
  /* --bg-light     : #f6f4ee; */
  /* --bg-light-sub : #ece7db; */

  --text-dark       : #0d1e3d;              /* 本文・見出しのメインカラー */
  --text-dark-soft  : rgba(13,30,61,0.82); /* やや薄い本文 */
  --text-dark-sub   : rgba(13,30,61,0.62); /* 注釈・副情報 */
  --text-dark-note  : rgba(13,30,61,0.45); /* 極小の注釈 */
  --line-dark       : rgba(13,30,61,0.22); /* サイドナビの縦線など */
}

/* =========================================================
  共通 / body
========================================================= */
html, body { background: var(--bg-light); }
body {
  background: var(--bg-light) !important;
  color: var(--text-dark);
}

/* ノイズグレインは明るい下地だと目立ちやすいので控えめに */
body::after { opacity: 0.020; }

/* =========================================================
  MV（動画はそのまま・下端グラデなし／video がぱつんと終わる）
========================================================= */
#mv { background: #000; }  /* フェードイン前は真っ黒（bg-light 上書きを防ぐ） */

/* 下端の navy グラデは撤去 */
#mv::after { background: none !important; }

/* MV上のロゴ/コピーは動画上に乗るので白のまま（可読性担保） */
#mv .overlay { opacity: .25; }

/* =========================================================
  サイドナビ（固定）— 文字色と縦線を反転
========================================================= */
.vline { background: var(--line-dark); }
.side-nav a { color: rgba(13,30,61,0.70); }
.side-nav a:hover { color: var(--text-dark); }

/* =========================================================
  INTRO / PLACE — シームレスな連続下地
  以前は個別にラジアルグラデを当てていたため、
  #intro と #place の境界で「影の谷」が見えていた。
  両セクションを純粋な単色 --bg-light にして完全シームレスに。
========================================================= */
#intro { background: var(--bg-light) !important; }
#place { background: var(--bg-light) !important; }
#intro .text-block .body,
#place .text-block .body { color: var(--text-dark); }
/* 英字見出し（h2）はゴールドのまま → 変更不要 */

/* =========================================================
  APERITIVO
========================================================= */
.aper-sticky-overlay { background: rgba(13,30,61,0.10); }

.aper-content {
  background: radial-gradient(
    ellipse at 50% 45%,
    rgba(255,255,255,0.55) 0%,
    transparent 60%
  ), var(--bg-light) !important;
}

/* 英字タイトル：白 → ネイビー */
#aperitivo .en-title { color: var(--text-dark); }
#aperitivo .ja-sub   { color: var(--text-dark-soft); }
#aperitivo .body     { color: var(--text-dark-soft); }

/* =========================================================
  COMMOZIONE — 濃い下地（bg-light-sub）でアクセント
========================================================= */
#commozione { background: var(--bg-light-sub) !important; }
.comm-title       { color: var(--text-dark); }
.comm-ja-sub      { color: var(--text-dark); }
.comm-desc        { color: var(--text-dark-soft); }
.comm-price-num   { color: var(--text-dark); }
.comm-price-tax   { color: var(--text-dark); }
.comm-price-note  { color: var(--text-dark-sub); }
/* MENUボタンはゴールド背景・白文字のまま映える → 変更不要 */

/* =========================================================
  INNOVAZIONE — 通常の明るい下地
========================================================= */
#innovazione { background: var(--bg-light) !important; }
.inno-title       { color: var(--text-dark); }
.inno-ja-sub      { color: var(--text-dark); }
.inno-desc        { color: var(--text-dark-soft); }
.inno-price-num   { color: var(--text-dark); }
.inno-price-tax   { color: var(--text-dark); }
.inno-price-note  { color: var(--text-dark-sub); }

/* =========================================================
  FOOTER — オフホワイト
========================================================= */
#footer { background: #edf3f6 !important; }  /* 薄いブルーグレー（旧 #f8f8f8）*/