/* ============================================
   スクロールバー非表示（グローバル・PCのみ意図だが
   ::-webkit-scrollbarはmedia query内では効かないため外に出す）
============================================ */
html,
body {
  scrollbar-width: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

@charset "utf-8";

/* ==================================================
  LAKE MISTRAL HOTEL OHYARU  /  pc.css
  対象：768px以上
================================================== */

/* =====================================
  CSS変数（ブランドカラー・フォントサイズ）
  
  フォント指定：
    和文 → Noto Serif JP  (Light 300 / Regular 400 / Medium 500)
    欧文 → Source Serif 4 (Regular 400 / Medium 500 / SemiBold 600)
  カラー：
    Navy  #1a2b5e  (PANTONE 281 C)  LAKE MISTRAL / ツバメ
    Gold  #9a7b3c  (PANTONE 465 C)  HOTEL OHYARU / 岩 / 地面
    Brown #5c3317  (PANTONE 4625 C) アドベンチャーロゴ
    Orange#e84c1e  (PANTONE 1585 C) アクセント
    Sage  #7a7d3a  (PANTONE 5763 C) 葉・茎
    Blue  #007abf  (PANTONE 301 C)  水面
===================================== */
:root {
  --color-navy:   #1a2b5e;
  --color-gold:   #9a7b3c;
  --color-brown:  #5c3317;
  --color-orange: #e84c1e;
  --color-sage:   #7a7d3a;
  --color-blue:   #007abf;
  --color-text:   #555555;
  --color-bg:     #ffffff;

  /* タイポグラフィ（カンプ準拠 / 1440px基準） */
  --fs-h1-ja:  6.25rem;
  --fs-h1-en:  7.0rem;
  --fs-h2-ja:  1.8rem;
  --fs-h2-en:  3.0rem;
  --fs-h3-ja:  1.45rem;
  --fs-h3-en:  1.65rem;
  --fs-body:   1rem;
  --fs-body-en:1.15rem;
}

/* 予約CTA帯：共通スタイル。SPの配置はsp.cssで調整 */
.booking-strip_reveal {
  box-shadow: 0 3px 8px rgba(70, 45, 20, 0.18);
  position: relative;
  z-index: 2;
  overflow: hidden;
  background: #fff;
}

.booking-strip_reveal.is-ready .booking-strip {
  transform: translateY(100%);
  transition: transform 1.6s cubic-bezier(0.22, 1, 0.36, 1),
              background-color 0.2s ease;
}

.booking-strip_reveal.is-visible .booking-strip,
.booking-strip_reveal:focus-within .booking-strip {
  transform: translateY(0);
}

.booking-strip_reveal:focus-within .booking-strip {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .booking-strip_reveal.is-ready .booking-strip {
    transform: none;
    transition: none;
  }
}

.booking-strip {
  display: block;
  position: relative;
  z-index: 2;
  background: var(--color-brown);
  color: #fff;
  padding: 36px 0;
  transition: background-color 0.2s ease;
}

.booking-strip_inner {
  width: min(1200px, calc(100% - 80px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 4vw, 48px);
}

.booking-strip_text {
  margin: 0;
  color: inherit;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.18em;
}

.booking-strip_arrow {
  flex-shrink: 0;
  color: inherit;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.5;
}

.booking-strip:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
}

@media (min-width: 768px) {

    
  /* =====================================
    Base
  ===================================== */
  html, body { margin: 0; padding: 0; }

  /* SP専用改行タグ・フッターナビ改行：PC では非表示 */
  .sp-br,
  .footer_nav_break { display: none; }

  /* ローディング画面 */
  #loading-screen {
    position: fixed;
    inset: 0;
    background: #1a2b5e;            /* Phase1：完全不透明の濃紺 */
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.6s ease;  /* フェードアウト */
  }
  #loading-screen.is-hidden {
    opacity: 0;
    pointer-events: none;
  }
  .loading-logo {
    width: 240px;
  }
  .loading-logo img {
    width: 100%; height: auto;
    opacity: 1;
    transform: none;
  }

  /* ============================================
     MV テキスト：ローディング消えるまでアニメ停止
     .mv-anim-ready がJSで付与されてから動く
  ============================================ */
  #mv:not(.mv-anim-ready) .mv_copy_inner {
    animation: none;    /* opacity:0のまま待機 */
  }

  body {
    font-family: 'Noto Serif JP', "Hiragino Mincho ProN", 游明朝, serif;
    font-size: var(--fs-body);
    font-weight: 300;
    line-height: 1.9;
    letter-spacing: 0.05em;
    color: var(--color-text);
    background: var(--color-bg);
  }

  h1, h2, h3, h4, h5 {
    font-family: 'Noto Serif JP', serif;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.08em;
  }

  .en, .eng {
    font-family: "Source Serif 4", "Times New Roman", Times, serif;
    font-weight: 500;
  }

  .sp { display: none; }

  .cts {
    width: min(1200px, calc(100% - 80px)); /* 固定1200px → 画面幅に応じて縮む */
    margin: 0 auto;
  }

  a { text-decoration: none; }

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

  /* =====================================
    HEADER
    - 初期：非表示（opacity:0 / pointer-events:none）
    - concept到達後：白背景でフェードイン
    - JSで .is-visible を付与
  ===================================== */
  #site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 3000;
    background: rgba(255, 255, 255, 0);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-12px);
    transition: background 0.6s ease, opacity 0.6s ease, transform 0.6s ease;
  }

  #site-header.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 1px 12px rgba(0,0,0,0.06);
  }

  .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100px;
    padding: 0 clamp(20px, 3vw, 50px);
    /* 狭い画面で padding を詰めてヘッダー幅を有効活用 */
  }

  /* ロゴ */
  .site-logo {
    width: 210px;
    flex-shrink: 0;
  }

  .site-logo img { width: 100%; height: auto; }

  /* PC ではハンバーガーは非表示 */
  .hamburger { display: none; }

  /* グローバルナビ */
  .gnav ul {
    display: flex;
    gap: clamp(16px, 2vw, 36px);
    /* 狭い画面ではメニュー間 gap を詰めて、ロゴとの間隔を確保 */
    list-style: none;
    margin: 0; padding: 0;
  }

  .gnav ul li a {
    font-family: "Source Serif 4", serif;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    color: var(--color-text);
    transition: color 0.2s ease;
  }

  /* "Yachimata Future City" の改行制御：
     折り返すときは "Yachimata" / "Future City" の位置で分かれるよう、
     "Future City" を nowrap でひとかたまり扱い */
  .gnav ul li a .nw { white-space: nowrap; }

  .gnav ul li a:hover { color: var(--color-gold); }

  /* 宿泊予約タブ：JSでtop値をスクロールに応じて補間 */
  .booking-tab {
    position: fixed;
    top: 20px;
    right: 0;
    transform: translateY(0);
    z-index: 3001;
    background: var(--color-navy);
    width: 55px;
    padding: 0;
    border-radius: 4px 0 0 4px;
    transition: top 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.4s ease;
    box-shadow: -2px 0 12px rgba(26,43,94,0.18);
    animation: bookingPulse 4s ease-in-out infinite;
    opacity: 0;              /* 初期は非表示（JSで制御） */
    pointer-events: none;
  }

  @keyframes bookingPulse {
    0%, 100% { box-shadow: -2px 0 12px rgba(26,43,94,0.18); }
    50%       { box-shadow: -5px 0 26px rgba(26,43,94,0.32); }
  }

  .booking-tab:hover {
    transform: translateX(-4px);
    box-shadow: -6px 0 28px rgba(26,43,94,0.28);
    animation: none;
  }

  .booking-tab a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; height: 100%;
    padding: 40px 3px;
  }

  .booking-tab span {
    writing-mode: vertical-rl;
    color: #fff;
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    line-height: 1.5;
  }

  /* =====================================
   MV
===================================== */
#mv {
  width: 100%;
  height: 100vh;
  min-height: 460px;
  position: relative;
  overflow: hidden;
}

.mv-bg-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* 背景画像（3段階の画像切替）
   ──────────────────────────────────────────
   〜767px（SP）       → sp.css 側で mv_sp.webp + center top
   768〜1299px（中間） → mv_mid.webp（縦長気味の構図、ホテルが画像中央に）
   1300px〜（広いPC） → mv_1.webp（横構図、下記メディアクエリで上書き） */
.mv-bg-img {
  position: absolute;
  inset: 0;
  background-image: url("../img/mv_mid.webp");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  animation: mvBgZoom 16s ease-out forwards;
  will-change: transform;
}

@media (min-width: 1300px) {
  .mv-bg-img {
    background-image: url("../img/mv_1.webp");
    background-position: center 65%;
    /* 横構図画像。縦長気味の画面でも建物が映るよう 65% を基準にクロップ */
  }
}

@keyframes mvBgZoom {
  0%   { transform: scale(1.10); }
  100% { transform: scale(1.00); }
}

/* =========================
   MV ベール
   ローディング画面消滅後に .mv-anim-ready が付与されてから発火
   Phase1(0〜0.9s)  : Navy tint 保持（ローディングと色を引き継ぐ）
   Phase2(0.9〜6s)  : Navy tint がゆっくりフェードアウトして通常写真へ
   ※ .mv_copy_inner と同じ .mv-anim-ready ゲートで揃える
========================= */
.mv-veil {
  position: absolute;
  inset: 0;
  background: #1a2b5e;              /* ローディング画面と同色・不透明で完全一致 */
  z-index: 5;
  pointer-events: none;
  opacity: 1;                       /* デフォルトはNavy保持（ゲート解除待ち） */
}

#mv.mv-anim-ready .mv-veil {
  animation: mvVeilClear 6s ease-out forwards;
}

@keyframes mvVeilClear {
  0%   { opacity: 1; }    /* 0s   完全Navy tint */
  15%  { opacity: 1; }    /* ~0.9s Navy保持（コピー出現の伴奏） */
  100% { opacity: 0; }    /* 6s   完全に透明（通常写真） */
}

/* =========================
   MV テキストコンテナ（全要素を1列で管理）
========================= */
.mv_texts {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: max-content;
  max-width: calc(100vw - 80px);
  text-align: center;
}


/* =========================
   コピー（中央）
========================= */
.mv_copy_inner {
  opacity: 0;
  animation: mvCopyReveal 1.4s ease-out forwards;
  animation-delay: 0.1s;
}

@keyframes mvCopyReveal {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 縦書きコピー */
.mv_catch {
  font-family: 'Noto Serif JP', serif;
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.35;
  color: #fff;
  text-shadow: 0 4px 10px rgba(0,0,0,0.50);
  margin: 0;

  writing-mode: vertical-rl;
  text-orientation: mixed;
}


  /* =====================================
    CONCEPT / INTRO
  ===================================== */
  #intro {
    position: relative;
    overflow: hidden;
    padding: 60px 0 120px;
    background: transparent;
    text-align: center;
  }

  .intro_inner {
    position: relative; z-index: 1;
  }


  .intro_catch h3 {
    font-family: "Source Serif 4", serif;
    font-size:  0.85rem;
    font-weight: 500;
    letter-spacing: 0.25em;
    line-height: 1.7;
    color: var(--color-text);
    margin: 20px 0 10px;
  }
    
.intro_hotel h2 {
  font-size: var(--fs-h2-ja);
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1.5;
  color: var(--color-navy);
  margin: 30px 0 30px;

  text-align: center; 
}

.intro_hotel_prefix { font-size: 0.82em; }
.intro_hotel_name { font-size: 1.1em; }


  /* 開業情報 */

  .open_date {
    font-size: 1.7rem;
    font-weight: 400;
    letter-spacing: 0.20em;
    color: var(--color-navy);
  }

  .open_reserve_wrap {
    display: flex;
    justify-content: center;
  }

  .open_reserve {
    display: inline-block;
    background: var(--color-navy);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    padding: 2px 30px;
    box-shadow: 0 3px 8px rgba(70, 45, 20, 0.18);
  }

  /* 本文：Noto Serif JP Light 14px */
  .intro_ex {
    max-width: 700px;
    margin: 75px auto 50px;
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: 1.95;
    color: var(--color-text);
  }

  /* イントロ本文の段落間余白
     ※ copy_block はアニメ専用クラスのため使わず、専用クラスで余白だけ付与 */
  .intro_para { margin: 0; }
  .intro_para + .intro_para { margin-top: 1.3em; }

    
  /* リンク */
  .intro_link { text-align: center; }

  /* イントロ サブ写真3枚（中央寄せ・正方形・小さめ） */
  .intro_sub_photos {
    display: flex;
    justify-content: center;
    gap: clamp(25px, 4vw, 30px);
    margin: 75px auto 0;
  }
  .intro_sub_photo {
    width: clamp(130px, 15vw, 190px);
    aspect-ratio: 1.2 / 1;
    overflow: hidden;
    border-radius: 3px;
    line-height: 0;
  }
  .intro_sub_photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .txt_link {
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0.14em;
    color: var(--color-navy);
    border-bottom: 1px solid var(--color-navy);
    padding-bottom: 3px;
    transition: color 0.2s ease, border-color 0.2s ease;
  }

  .txt_link:hover {
    color: var(--color-navy);
    border-color: var(--color-navy);
  }

  /* ブラウン色バリアント */
  .txt_link--brown {
    color: var(--color-brown);
    border-bottom-color: var(--color-brown);
  }
  .txt_link--brown:hover {
    color: var(--color-brown);
    border-color: var(--color-brown);
  }

  /* 周辺施設カードのリンク */
  .neighbor_link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.25s ease;
  }
  .neighbor_link:hover { opacity: 0.75; }

  /* =====================================
    ROOMS（Grid 版）
    ──────────────────────────────────────────
    - 12-col Grid + 3-row Grid（階段配置）
    - 写真は aspect-ratio で比率維持
    - align-items: end で下揃え（中間幅での破綻軽減）
    - 写真2 は 42%（cols 8/13）、重なり帯 clamp(50,7vw,100)
  ===================================== */
  #rooms {
    position: relative;
    overflow: visible;
    background: transparent;
    padding-bottom: clamp(40px, 6vw, 80px);
  }

  .rooms_inner { position: relative; z-index: 1; }

  /* ---- メイン写真（全幅・aspect-ratio で高さ可変） ---- */
  .rooms_main_photo {
    width: 100%; overflow: hidden; line-height: 0;
    opacity: 0; transform: translateY(20px);
    transition: opacity 1.0s ease, transform 1.0s ease;
    position: relative;
  }
  .rooms_main_photo.is-inview { opacity: 1; transform: translateY(0); }

  .rooms_main_photo img {
    width: 100%;
    aspect-ratio: 16 / 7;
    object-fit: cover;
    display: block;
    transform: scale(1.04);
    transition: transform 1.8s ease-out;
  }
  .rooms_main_photo.is-inview img { transform: scale(1); }

  /* ---- タイトル全幅エリア（左寄せ：テキスト列が左にあるため） ---- */
  .rooms_header {
    margin-top: clamp(40px, 6vw, 80px);
    text-align: left;
    position: relative;
    z-index: 2;
  }

  /* ---- 2-col grid（上揃え・gap で間隔調整）
         タイトル全幅化に伴い align-items: end → start に変更。
         テキストはタイトル直下にピタッと付き、写真は下まで伸ばす意匠。 ---- */
  .rooms_sub {
    display: grid;
    grid-template-columns: minmax(280px, 38%) 1fr;
    gap: clamp(20px, 4vw, 60px);
    align-items: start;
    margin-top: clamp(8px, 1.5vw, 24px);
    position: relative;
  }

  /* ---- テキスト（左） ---- */
  .rooms_text {
    
    padding: 0;
    align-self: start;
    position: relative;
    z-index: 2;
  }

  /* テキスト inview アニメ */
  .rooms_anim {
    opacity: 0; transform: translateY(24px);
    transition: opacity 0.9s ease, transform 0.9s ease;
  }
  .rooms_anim.is-inview  { opacity: 1; transform: translateY(0); }
  .rooms_anim--d1        { transition-delay: 0.20s; }
  .rooms_anim--d2        { transition-delay: 0.40s; }

  .rooms_en {
    font-family: "Source Serif 4", serif;
    font-size: clamp(4rem, 6.5vw, 6rem);
    font-weight: 500;
    letter-spacing: 0.01em; line-height: 0.85;
    color: var(--color-brown);
    margin: 0; display: inline-block;
    /* inline-block で「文字幅ぶんに縮む」→ 親の text-align で
       ブロックごと寄せる。中の改行は左揃えで美しく揃う。 */
  }

  .rooms_ja {
    display: block;
    font-family: 'Noto Serif JP', serif;
    font-size: 0.8rem; font-weight: 500;
    letter-spacing: 0.35em; color: var(--color-brown);
    margin: 15px 0 30px;
  }

  .rooms_copy {
    font-size: var(--fs-body); font-weight: 400;
    line-height: 2.1; color: var(--color-text);
  }

  /* 改行箇所の段落間余白（共通） */
  .copy_block { margin: 0; }
  .copy_block + .copy_block { margin-top: 1em; }

  /* ---- 写真ゾーン（3-row Grid・階段配置） ---- */
  .rooms_photos {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto clamp(25px, 4vw, 60px) auto;
    /* row 2 = 重なりの帯 */
    padding-top: clamp(20px, 3vw, 60px);
    /* テキスト先行・写真は少し下から始まるリズム
       画面幅連動で 20〜60px の余白 */
    position: relative;
  }

  .rooms_photo {
    overflow: hidden;
    border-radius: 10px;
    opacity: 0; transform: translateY(40px);
    transition: opacity 1.0s cubic-bezier(.25,.46,.45,.94),
                transform 1.0s cubic-bezier(.25,.46,.45,.94);
  }
  .rooms_photo.is-inview { opacity: 1; transform: translateY(0); }

  /* 写真1：大きめ、上＋重なり帯 */
  .rooms_photo--1 {
    grid-column: 1 / 10;  /* 75% */
    grid-row: 1 / 3;       /* 上 + 重なり帯 */
    aspect-ratio: 16 / 10;
    z-index: 1;
    transition-delay: 0.3s;
  }

  /* 写真2：控えめ、重なり帯＋下 */
  .rooms_photo--2 {
    grid-column: 8 / 13;  
    grid-row: 2 / 4; 
    aspect-ratio: 16 / 11;
    z-index: 2;
    box-shadow: -3px 3px 10px rgba(0, 0, 0, 0.13);
    transition-delay: 0.4s;
  }

  .rooms_photo img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
  }

  /* =====================================
    サブ写真スライダー（複数枚クロスフェード）
    Grid 化後も既存の photo-slider 機構を継続
  ===================================== */
  .photo-slider { position: relative; }

  .photo-slider .ps-img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    will-change: opacity, transform;
  }
  .photo-slider .ps-img.is-active { opacity: 1; }

  @keyframes photoSlowZoom {
    0%   { transform: scale(1.0);  }
    100% { transform: scale(1.045); }
  }

  @media (prefers-reduced-motion: reduce) {
    .photo-slider .ps-img.is-active { animation: none; }
  }
    
    
  /* =====================================
    HOURS（Grid 版・Rooms の左右反転）
    ──────────────────────────────────────────
    - HTML 順は「写真左・テキスト右」
    - Grid template-columns で 1fr + minmax を反転
    - 写真の grid-column を Rooms の鏡像配置に
    - 影は +x 方向（右下に落ちる）
  ===================================== */
  #hours {
    position: relative;
    overflow: visible;
    background: transparent;
    padding-bottom: clamp(40px, 6vw, 80px);
  }

  .hours_inner { position: relative; z-index: 1; }

  /* ---- メイン写真（全幅） ---- */
  .hours_main_photo {
    width: 100%; overflow: hidden; line-height: 0;
    opacity: 0; transform: translateY(20px);
    transition: opacity 1.0s ease, transform 1.0s ease;
    position: relative;
  }
  .hours_main_photo.is-inview { opacity: 1; transform: translateY(0); }

  .hours_main_photo img {
    width: 100%;
    aspect-ratio: 16 / 7;
    object-fit: cover;
    display: block;
    transform: scale(1.04);
    transition: transform 1.8s ease-out;
  }
  .hours_main_photo.is-inview img { transform: scale(1); }

  /* ---- タイトル全幅エリア
         〜999px: 1行表示で右寄せ（テキスト列が右にあるため）
         1000px〜: 2行強制（pc-br有効）になるので、テキストカラム
                   左端に左揃え（タイトル・和文サブ・本文すべて縦に揃う） ---- */
  .hours_header {
    margin-top: clamp(40px, 6vw, 80px);
    text-align: right;
    position: relative;
    z-index: 2;
  }

  @media (min-width: 1000px) {
    .hours_header {
      display: grid;
      grid-template-columns: 1fr minmax(280px, 38%);
      gap: clamp(20px, 4vw, 60px);
      text-align: left; /* グリッド化に伴いリセット */
    }
    .hours_header .hours_en {
      grid-column: 2; /* 右カラム＝テキスト列と同じ位置に置く */
    }
  }

  /* ---- 2-col grid（左右反転・上揃え・gap で間隔調整）
         タイトル全幅化に伴い align-items: end → start に変更 ---- */
  .hours_sub {
    display: grid;
    grid-template-columns: 1fr minmax(280px, 38%);
    /*                    ↑写真   ↑テキスト */
    gap: clamp(20px, 4vw, 60px);
    align-items: start;
    margin-top: clamp(8px, 1.5vw, 24px);
    position: relative;
  }

  /* ---- 写真ゾーン（3-row Grid・階段配置・Rooms の鏡像） ---- */
  .hours_photos {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto clamp(25px, 4vw, 60px) auto;
    padding-top: clamp(20px, 3vw, 60px);
    /* Rooms と同期：テキスト先行・写真は少し下から */
    position: relative;
  }

  .hours_photo {
    overflow: hidden;
    border-radius: 10px;
    opacity: 0; transform: translateY(40px);
    transition: opacity 1.0s cubic-bezier(.25,.46,.45,.94),
                transform 1.0s cubic-bezier(.25,.46,.45,.94);
  }
  .hours_photo.is-inview { opacity: 1; transform: translateY(0); }

  /* 写真1：右寄りに大きく（Rooms の cols 1/10 を鏡像化） */
  .hours_photo--1 {
    grid-column: 4 / 13;   /* 右寄り 75% */
    grid-row: 1 / 3;
    aspect-ratio: 16 / 10;
    z-index: 1;
    transition-delay: 0.3s;
  }

  /* 写真2：左寄りに（Rooms 8/13 の鏡像で 42%） */
  .hours_photo--2 {
    grid-column: 1 / 6;    /* Rooms 8/13 の鏡像 = 42% */
    grid-row: 2 / 4;
    aspect-ratio: 16 / 11;
    z-index: 2;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.13);
    transition-delay: 0.4s;
  }

  .hours_photo img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
  }

  /* ---- テキスト（右） ---- */
  .hours_text {
    
    padding: 0;
    align-self: start;
    position: relative;
    z-index: 2;
  }

  .hours_anim {
    opacity: 0; transform: translateY(24px);
    transition: opacity 0.9s ease, transform 0.9s ease;
  }
  .hours_anim.is-inview  { opacity: 1; transform: translateY(0); }
  .hours_anim--d1        { transition-delay: 0.20s; }
  .hours_anim--d2        { transition-delay: 0.40s; }

  .hours_en {
    font-family: "Source Serif 4", serif;
    font-size: clamp(4rem, 6.5vw, 6rem);
    font-weight: 500;
    letter-spacing: 0.01em; line-height: 0.85;
    color: var(--color-navy);
    margin: 0; display: inline-block;
    /* inline-block で「文字幅ぶんに縮む」→ 親の text-align: right で
       ブロックごと右に寄る。中の改行は左揃えで揃って階段にならない。 */
    text-align: left;
  }

  .hours_ja {
    display: block;
    font-family: 'Noto Serif JP', serif;
    font-size: 0.85rem; font-weight: 500;
    letter-spacing: 0.35em; color: var(--color-navy);
    margin: 0 0 30px;
  }

  .hours_copy {
    font-size: var(--fs-body); font-weight: 400;
    line-height: 2.1; color: var(--color-text);
  }
    
/* =====================================
    SECTION CONNECTOR（Hours → Koyaruzawa の一拍）
  ===================================== */
  .section_connector {
    text-align: center;
    padding: clamp(32px, 4vw, 56px) 20px clamp(40px, 5vw, 70px);
  }

  .connector_text {
    display: inline-block;
    font-family: "Source Serif 4", serif;
    font-weight: 500;
    font-size: clamp(0.72rem, 0.9vw, 0.88rem);
    letter-spacing: 0.22em;
    color: var(--color-brown);
    opacity: 02;
  }

  .connector_line {
    width: 1px;
    height: 56px;
    margin: 26px auto 0;
    background: rgba(92, 51, 23, 0.18);
    position: relative;
    overflow: hidden;
  }

  .connector_line::after {
    content: '';
    position: absolute;
    top: -100%; left: 0;
    width: 100%; height: 100%;
    background: var(--color-brown);
    animation: scrollLineFlow 3.5s ease-in-out infinite;
  }

/* =====================================
    KOYARUZAWA（Grid 版・Rooms と同レイアウト）
    ──────────────────────────────────────────
    - テキスト左・写真右（Rooms と同一構造）
    - 本文下に koyaruzawa_link が入る点が Rooms との違い
  ===================================== */
  #koyaruzawa {
    position: relative;
    overflow: visible;
    background: transparent;
    padding-bottom: clamp(60px, 8vw, 120px);
  }

  .koyaruzawa_inner { position: relative; z-index: 1; }

  /* ---- メイン写真（全幅） ---- */
  .koyaruzawa_main_photo {
    width: 100%; overflow: hidden; line-height: 0;
  }
  .koyaruzawa_main_photo img {
    width: 100%;
    aspect-ratio: 16 / 6.2;
    object-fit: cover;
    display: block;
    transform: scale(1.04);
    transition: transform 1.8s ease-out;
  }
  .koyaruzawa_main_photo.is-inview img { transform: scale(1); }

  /* メイン写真の登場アニメ */
  .koyaruzawa_grid_anim {
    opacity: 0; transform: translateY(20px);
    transition: opacity 1.4s ease, transform 1.4s ease;
    transition-delay: 0.4s;
  }
  .koyaruzawa_grid_anim.is-inview        { opacity: 1; transform: translateY(0); }
  .koyaruzawa_grid_anim.is-inview img    { transform: scale(1); }

  /* ---- タイトル全幅エリア（左寄せ：テキスト列が左にあるため・Rooms と同じ） ---- */
  .koyaruzawa_header {
    margin-top: clamp(40px, 6vw, 80px);
    text-align: left;
    position: relative;
    z-index: 2;
  }

  /* ---- 2-col grid（上揃え・Rooms と同一・gap で間隔調整）
         タイトル全幅化に伴い align-items: end → start に変更 ---- */
  .koyaruzawa_sub {
    display: grid;
    grid-template-columns: minmax(280px, 38%) 1fr;
    gap: clamp(20px, 4vw, 60px);
    align-items: start;
    margin-top: clamp(8px, 1.5vw, 24px);
    position: relative;
  }

  /* ---- テキスト（左） ---- */
  .koyaruzawa_text {
    
    padding: 0;
    align-self: start;
    position: relative;
    z-index: 2;
  }

  .koyaruzawa_anim {
    opacity: 0; transform: translateY(24px);
    transition: opacity 1.4s ease, transform 1.4s ease;
  }
  .koyaruzawa_anim.is-inview  { opacity: 1; transform: translateY(0); }


  .koyaruzawa_anim--d3        { transition-delay: 1.05s; }

  .koyaruzawa_en {
    font-family: "Source Serif 4", serif;
    font-size: clamp(4rem, 6.5vw, 6rem);
    font-weight: 500;
    letter-spacing: 0.01em; line-height: 0.85;
    color: var(--color-brown);
    margin: 0; display: inline-block;
  }

  .koyaruzawa_ja {
    display: block;
    font-family: 'Noto Serif JP', serif;
    font-size: 0.8rem; font-weight: 500;
    letter-spacing: 0.35em; color: var(--color-brown);
    margin: 0 0 30px;
  }

  .koyaruzawa_logo {
    display: block;
    width: 220px;
    max-width: 100%;
    height: auto;
    margin: 0 0 26px;
  }

  .koyaruzawa_copy {
    font-size: var(--fs-body); font-weight: 400;
    line-height: 2.1; color: var(--color-text);
    margin: 0 0 20px;
  }

  /* 本文下のリンク */
  .koyaruzawa_link {
    display: inline-block;
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: 0.14em;
    color: var(--color-brown);
    padding-bottom: 3px;
    transition: color 0.2s ease, border-color 0.2s ease;
  }

  /* ---- 写真ゾーン（3-row Grid・階段配置・Rooms と同一） ---- */
  .koyaruzawa_photos {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto clamp(25px, 4vw, 60px) auto;
    padding-top: clamp(20px, 3vw, 60px);
    /* Rooms と同期：テキスト先行・写真は少し下から */
    position: relative;
  }

  .koyaruzawa_photo {
    overflow: hidden;
    border-radius: 10px;
    opacity: 0; transform: translateY(40px);
    transition: opacity 1.5s cubic-bezier(.25,.46,.45,.94),
                transform 1.5s cubic-bezier(.25,.46,.45,.94);
  }
  .koyaruzawa_photo.is-inview { opacity: 1; transform: translateY(0); }

  /* 写真1：大きめ、上＋重なり帯（Rooms と同一） */
  .koyaruzawa_photo--1 {
    grid-column: 1 / 10;
    grid-row: 1 / 3;
    aspect-ratio: 16 / 10;
    z-index: 1;
    transition-delay: 0.45s;
  }

  /* 写真2：控えめ、重なり帯＋下（Rooms と同一） */
  .koyaruzawa_photo--2 {
    grid-column: 8 / 13;   /* 42%・Rooms と同期 */
    grid-row: 2 / 4;
    aspect-ratio: 16 / 11;
    z-index: 2;
    box-shadow: -3px 3px 10px rgba(0, 0, 0, 0.13);
    transition-delay: 0.6s;
  }

  .koyaruzawa_photo img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
  }
    
 
 
    /* =====================================
    Overflow guard
  ===================================== */
  #mv, .neighbor_slider { overflow: hidden; }
  .mv-bg-wrap { overflow: visible; }

  p, h1, h2, h3, h4, h5 {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* =====================================
    玉虫色グラデ背景は config.css に共通定義
    （全デバイス共通・fixed）
  ===================================== */
    
    
  /* =====================================
    YACHIMATA FUTURE CITY
  ===================================== */
  #future {
    position: relative;
    overflow: hidden;
    background: #f5f2ec; /* 薄いベージュ下地 */
  }

  .future_inner { position: relative; z-index: 1; }

  .future_anim {
    opacity: 0; transform: translateY(24px);
    transition: opacity 0.9s ease, transform 0.9s ease;
  }
  .future_anim.is-inview { opacity: 1; transform: translateY(0); }
  .future_anim--d1        { transition-delay: 0.18s; }
  .future_anim--d2        { transition-delay: 0.36s; }
  .future_anim--d3        { transition-delay: 0.54s; }

  .future_head {
    padding-top: 100px;
    padding-bottom: 10px;
    text-align: center;
  }

  .future_en {
    font-family: "Source Serif 4", serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 500;
    letter-spacing: 0.01em; line-height: 0.82;
    color: var(--color-brown);
    margin: 0 0 20px; display: block;
  }

  .future_ja {
    display: block;
    font-family: 'Noto Serif JP', serif;
    font-size: 1.3rem; font-weight: 500;
    letter-spacing: 0.16em; color: var(--color-text);
    margin: 0 0 40px;
  }

  .future_lead {
    font-size: 1.25rem; font-weight: 500;
    line-height: 1.8; color: var(--color-brown);
    letter-spacing: 0.08em; margin: 0 0 24px;
  }

  .future_body {
    font-size: var(--fs-body); font-weight: 400;
    line-height: 2.2; color: var(--color-text);
    margin: 0 0 0px;
  }


  .future_main_photo {
    width: 100%; overflow: hidden; line-height: 0;
    position: relative;
  }

  .future_main_photo img {
    width: 100%;
    height: clamp(330px, 420w, 560px);
    object-fit: cover; display: block;
    transform: scale(1.04);
    transition: transform 1.8s ease-out;
  }

  .future_main_photo.is-inview img { transform: scale(1); }

  /* カテゴリ先頭に置いたメイン写真 */
  .future_main_photo--lead {
    margin-bottom: 0;
  }
  .future_main_photo--lead img {
    height: clamp(360px, 46vw, 620px);
  }
  /* 先頭写真の直後に来る見出しの上余白を詰める */
  .future_main_photo--lead + .future_head {
    padding-top: 70px;
  }

  /* =====================================
    周辺施設スライダー（neighbor）
    - コンテンツ幅いっぱいに大きく
    - 全要素センター揃え
  ===================================== */
  .neighbor_wrap {
    padding: 60px 0 80px;
    text-align: center;
  }

  .neighbor_lead {
    font-family: 'Noto Serif JP', serif;
    font-size: clamp(1.0rem, 1.6vw, 1.25rem);
    font-weight: 500;
    letter-spacing: 0.14em;
    color: var(--color-brown);
    text-align: center;
    margin: 0 auto 30px;
  }

  /* スライダー本体：cts幅に収める（左右にはみ出さない） */
  .neighbor_slider {
    width: min(1200px, calc(100% - 80px));
    margin: 0 auto;
    overflow: hidden;   /* コンテンツ幅内でスライド・はみ出しなし */
  }

  .neighbor_slider .swiper-wrapper {
    transition-timing-function: linear;
  }

  /* Swiperが幅を自動計算するためwidthはSwiper任せ */
  .neighbor_slide {
    text-align: center;
  }

  .neighbor_img {
    width: 100%;
    aspect-ratio: 4 / 3; /* 横長・大きめに */
    overflow: hidden;
    border-radius: 6px;
    margin-bottom: 16px;
  }

  .neighbor_img img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform 0.4s ease;
  }

  .neighbor_slide:hover .neighbor_img img {
    transform: scale(1.04);
  }

  .neighbor_name {
    font-family: 'Noto Serif JP', serif;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    line-height: 1.7;
    color: var(--color-text);
    text-align: center;
    margin: 0;
  }


  /* =====================================
    ACCESS
    koyaruzawa.jp と同一レイアウト
    フォント：Source Serif 4 / Noto Serif JP
    カラー：Navy / Gold
  ===================================== */
  #access {
    background: #fff;
    padding: 100px 0 40px;
    position: relative;
    z-index: 2;
  }

  .access_inner {
    width: 100%;
    padding: 0;
    margin: 0 auto;
  }

  /* ---- ヘッダー ---- */
  .access_head {
    padding-top: 0;
    padding-bottom: 10px;
    text-align: center;
  }

  /* futureセクションと同トンマナ */
  .access_en {
    font-family: "Source Serif 4", serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 500;
    letter-spacing: 0.01em; line-height: 0.82;
    color: var(--color-navy);
    margin: 0 0 10px; display: block;
  }

  .access_ja {
    display: block;
    font-family: 'Noto Serif JP', serif;
    font-size: 1.3rem; font-weight: 500;
    letter-spacing: 0.16em; color: var(--color-text);
    margin: 0 0 40px;
  }

  .access_lead_ttl {
    font-size: 1.25rem; font-weight: 500;
    line-height: 1.8; color: var(--color-navy);
    letter-spacing: 0.08em;
    text-align: center;
    margin: 0 0 30px;
  }

  /* future_body 相当：本文 */
  .access_lead_text {
    font-size: var(--fs-body); font-weight: 400;
    line-height: 2.2; color: var(--color-text);
    text-align: center;
    margin: 0 0 40px;
  }

  /* ================================================
    Google Maps 横長帯
  ================================================ */
  .access_gmap_wrap {
    width: 100%;
    padding: 15px 0;
    margin-bottom: 30px;
    line-height: 0;
  }

  .access_gmap_wrap iframe {
    display: block;
    width: min(1100px, calc(100% - 80px));
    height: 380px;
    margin: 0 auto;
    border: 0;
  }

  /* ================================================
    2カラム：access_img（左）/ Car・Train（右）
  ================================================ */
  .access_2col_wrap {
    width: min(1100px, calc(100% - 80px));
    margin: 0 auto 52px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 4vw, 52px);
    /* 狭い画面（768〜1000px帯）で gap を圧縮し、カラム幅を確保 */
    align-items: start;
  }

  .access_2col--map img {
    width: 100%; height: auto; display: block;
    /* 狭めPCではカラム幅いっぱい使う。1100px以上では下記メディアクエリで 85% に */
  }

  @media (min-width: 1100px) {
    .access_2col--map img {
      width: 85%;
      /* 広い画面では右に余白を作る意匠 */
    }
  }

  .access_2col--info {
    display: flex;
    flex-direction: column;
    gap: 50px;
  }

  /* Car・Train 各ブロック */
  .access_box {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  .access_box_head {
  display: flex;
  min-height: 33px;
  padding: 0 12px;
  box-sizing: border-box;
  align-items: center;
  width: fit-content; 
  gap: 5px;
  background: #666;
  margin-bottom: 7px;
  }

  .access_box_head img {
    width: 22px; height: auto;
    filter: brightness(0) invert(1);
  }

  .access_box_head span {
    font-family: "Source Serif 4", serif;
    font-size: 1.0rem; font-weight: 400;
    letter-spacing: 0.12em; color: #fff;
  }

  .access_car_img { width: 100%; }

  .access_car_img img {
    width: 100%; height: auto; display: block;
    border-radius: 2px;
  }

  .access_train {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .access_train_item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0,0,0,0.08);
  }

  .access_train_item:first-child { border-top: 1px solid rgba(0,0,0,0.08); }

  .access_route_tag {
    flex-shrink: 0;
    font-family: 'Noto Serif JP', serif;
    font-size: 0.78rem; font-weight: 400;
    letter-spacing: 0.04em; color: #000;
    background: #fff;
    border: 1px solid #000;
    padding: 4px 10px; border-radius: 1px;
    white-space: nowrap;
  }

  .access_route_desc {
    font-family: 'Noto Serif JP', serif;
    font-size: 0.84rem; font-weight: 300;
    letter-spacing: 0.05em; color: var(--color-text);
    line-height: 1.6;
  }

  /* 注釈（Train直下） */
  .access_note {
    font-family: 'Noto Serif JP', serif;
    font-size: 0.78rem; font-weight: 300;
    color: #999; letter-spacing: 0.06em;
    margin: -40px 0 0;
    line-height: 1.8;
  }

  /* ================================================
    住所・電話（中央揃え）
  ================================================ */
  .access_address_wrap {
    text-align: center;
    margin-bottom: 36px;
  }

  .access_address {
    font-family: 'Noto Serif JP', serif;
    font-size: 1.0rem; font-weight: 400;
    letter-spacing: 0.10em; line-height: 2.2;
    color: var(--color-text);
    margin: 0;
  }

  /* ================================================
    Google Mapで見る（テキストリンク・小）
  ================================================ */
  .access_gmap_link_small {
    display: inline-block;
    font-family: 'Noto Serif JP', serif;
    font-size: 0.8rem; font-weight: 300;
    letter-spacing: 0.1em;
    color: rgba(92,51,23,0.65);
    text-decoration: underline;
    text-underline-offset: 3px;
    margin-top: 6px;
    transition: color 0.2s ease;
  }
  .access_gmap_link_small:hover { color: var(--color-brown); }

  .access_gmap_link_wrap {
    text-align: center;
    padding: 10px 0 30px;
  }

  /* access_address_wrapの下余白調整（マップが後続するため） */
  .access_address_wrap {
    margin-bottom: 0;
  }


  /* =====================================
    FOOTER
    koyaruzawa.jp と同一レイアウト
  ===================================== */
  #site-footer {
    background: #f5f2ec;   /* future セクションと同じ薄いブラウン */
    padding: 40px 0 40px;
    position: relative;
    z-index: 1;
  }

  .footer_inner {
    width: min(1100px, calc(100% - 80px));
    margin: 0 auto;
    text-align: center;
  }

  /* ナビ */
  .footer_nav { margin-bottom: 35px; }

  .footer_nav ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    list-style: none;
    margin: 0; padding: 0;
  }

  .footer_nav ul li {
    position: relative;
  }

  .footer_nav ul li + li::before {
    content: "｜";
    color: rgba(92,51,23,0.25);
    font-size: 0.8rem;
    padding: 0 2px;
  }

  .footer_nav ul li a {
    font-family: "Source Serif 4", serif;
    font-size: 0.9rem;
    letter-spacing: 0.16em;
    line-height: 1.6;
    color: var(--color-brown);
    padding: 0;
    transition: color 0.2s ease;
  }

  .footer_nav ul li a:hover { color: var(--color-navy); }

  /* ブランド */
  .footer_brand { margin-bottom: 15px; }

  /* フッターロゴ画像 */
  .footer_logo_img {
    display: block;
    height: 75px;
    width: auto;
    margin: 0 auto 20px;
  }

  /* サブリンク */
  .footer_sub_nav ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    list-style: none;
    margin: 0; padding: 0;
    border-top: 1px solid rgba(92,51,23,0.15);
    padding-top: 28px;
  }

  .footer_sub_nav ul li + li::before {
    content: "｜";
    color: rgba(92,51,23,0.2);
    font-size: 0.75rem;
  }

  .footer_sub_nav ul li a {
    font-family: 'Noto Serif JP', serif;
    font-size: 0.78rem;
    font-weight: 300;
    letter-spacing: 0.1em;
    color: rgba(92,51,23,0.6);
    padding: 4px 8px;
    transition: color 0.2s ease;
  }

  .footer_sub_nav ul li a:hover { color: var(--color-brown); }

  /* =====================================
    CG注釈
  ===================================== */
  /* ③ 写真下のCG注釈 */
  .cg_note {
    position: relative;
    z-index: 30;
    font-family: 'Noto Serif JP', serif;
    font-size: 0.73rem;
    font-weight: 300;
    letter-spacing: 0.06em;
    color: #505050;
    background: transparent;
    line-height: 1.5;
    margin: 0;
    padding: 8px 75px 8px 40px;
    text-align: right;
  }

  /* ④ 写真エリア下の一般注釈 */
  .img_note {
    font-family: 'Noto Serif JP', serif;
    font-size: 0.78rem;
    font-weight: 300;
    letter-spacing: 0.06em;
    color: rgba(80, 80, 80, 0.75);
    line-height: 1.8;
    margin: 2em 0 0;
    text-align: left;
  }

  /* hours_main_photo は position:relative が必要 */
  .hours_main_photo {
    position: relative;
  }

  .future_main_photo {
    position: relative;
  }

} /* end @media 768px */