@charset "utf-8";

/* ==================================================
  LAKE MISTRAL HOTEL OHYARU  /  sp.css
  対象：767px以下
================================================== */

@media (max-width: 767px) {

  /* =====================================
    CSS変数
  ===================================== */
  :root {
    --color-navy:   #1a2b5e;
    --color-gold:   #9a7b3c;
    --color-brown:  #5c3317;
    --color-blue:   #007abf;
    --color-text:   #555555;
    --color-bg:     #ffffff;
    --fs-body:      1rem;
  }

  .pc { display: none; }

  /* 明朝体を基本に（PCと統一） */
  body {
    font-family: 'Noto Serif JP', "Hiragino Mincho ProN", 游明朝, YuMincho, serif;
    font-weight: 300;
    line-height: 1.9;
    letter-spacing: 0.02em;
    color: var(--color-text);
  }

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

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

  /* 全体コンテンツ幅：左右28pxに統一（全セクション共通の基準） */
  .cts { width: 100%; padding: 0 28px; box-sizing: border-box; }

  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
  ===================================== */
  #site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 3000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease, background 0.5s ease;
  }

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

  .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    padding: 0 16px;
  }

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

  /* =====================================
     ハンバーガーボタン
     ===================================== */
  .hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 3010;
    position: relative;
  }

  /* config.css のグローバル button:focus { border:#000 1px solid } を上書き */
  .hamburger:focus,
  .hamburger:focus-visible,
  .hamburger:active {
    border: none;
    outline: none;
    box-shadow: none;
  }

  .hamburger-line {
    display: block;
    width: 24px;
    height: 1px;
    background: var(--color-navy);
    transition: transform 0.4s ease, opacity 0.3s ease, background 0.3s ease;
  }

  /* メニュー開時：×に変形＋色を白に */
  .hamburger[aria-expanded="true"] .hamburger-line { background: #fff; }
  .hamburger[aria-expanded="true"] .hamburger-line:nth-child(1) {
    transform: translateY(7.5px) rotate(45deg);
  }
  .hamburger[aria-expanded="true"] .hamburger-line:nth-child(2) {
    opacity: 0;
  }
  .hamburger[aria-expanded="true"] .hamburger-line:nth-child(3) {
    transform: translateY(-7.5px) rotate(-45deg);
  }

  /* =====================================
     グローバルナビ（SPはフルスクリーンオーバーレイ）
     ===================================== */
  .gnav {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(26, 43, 94, 0.97);  /* navy + ほぼ不透明 */
    z-index: 3005;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
  }

  .gnav.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  .gnav ul {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
    text-align: center;
  }

  .gnav ul li a {
    font-family: "Source Serif 4", serif;
    font-size: 1.45rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    color: #fff;
    transition: opacity 0.2s ease;
    display: inline-block;
  }

  .gnav ul li a:hover,
  .gnav ul li a:active { opacity: 0.7; }

  /* "Future City" を改行させない */
  .gnav ul li a .nw { white-space: nowrap; }

  /* メニュー開時、body スクロールロック */
  body.menu-open { overflow: hidden; }

  /* 予約タブ（SPはイントロ以降、右下に固定表示） */
  .booking-tab {
    position: fixed;
    top: auto;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    right: 0;
    z-index: 3001;
    background: var(--color-navy);
    width: 46px;
    padding: 0;
    border-radius: 4px 0 0 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    box-shadow: -2px 0 10px rgba(26,43,94,0.20);
  }

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

  .booking-tab span {
    writing-mode: vertical-rl;
    color: #fff;
    font-size: 0.82rem;
    letter-spacing: 0.13em;
    line-height: 1.5;
    font-family: 'Noto Serif JP', serif;
    font-weight: 400;
  }

  /* =====================================
    MV
  ===================================== */
  #mv {
    width: 100%;
    height: 100svh;
    position: relative;
    overflow: hidden;
  }

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

  .mv-bg-img {
    position: absolute; inset: 0;
    background-image: url("../img/mv_sp.webp");
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    animation: mvBgZoom 14s ease-out forwards;
  }

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

  /* MV ベール（PCと同一ロジック：.mv-anim-ready ゲート + 6s） */
  .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   通常写真 */
  }

  /* フォグ（上部のみ・下部はSPでは使用しない） */
  .mv-fog {
    position: absolute; left: 0; right: 0;
    z-index: 10; pointer-events: none;
  }

  .mv-fog--top {
    top: 0; height: 22%;
    background: linear-gradient(to bottom, rgba(255,255,255,0.60) 0%, transparent 100%);
    opacity: 1;
  }

  /* SP：MV下部のぼかし（下グラデ）は使用しない */
  .mv-fog--bottom {
    display: none;
  }

  /* テキストコンテナ */
  .mv_texts {
    position: absolute;
    top: 36%;                           /* 上から38%の位置に */
    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 - 40px);
    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: clamp(1.0rem, 4.0vw, 1.15rem);
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1.5;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.45);
    margin: 0;
    writing-mode: vertical-rl;
    text-orientation: mixed;
  }

  /* スクロールライン（SPでは非表示） */
  .scroll_sign { display: none; }

  /* ローディング画面（SP） */
  #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: 180px;
  }
  .loading-logo img {
    width: 100%; height: auto;
    opacity: 1;
    transform: none;
  }

  /* 背景は config/pc.css の .iri-bg（fixed・全幅共通）で表示 */

  .wrap { position: relative; z-index: 2; }

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

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

   .intro_catch h3 {
    font-family: "Source Serif 4", serif;
    font-size:  0.75rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    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.07em;
  line-height: 1.5;
  color: var(--color-navy);
  margin: 0 0 30px;
  text-align: center; 
}

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

  .intro_open { margin-bottom: 20px; }

  .open_date {
    margin: 0 0 10px;
    font-size: 1.4rem;
    font-weight: 400;
    letter-spacing: 0.07em;
    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: 1rem;
    font-weight: 400;
    letter-spacing: 0.13em;
    padding: 5px 30px;
    box-shadow: 0 3px 8px rgba(70, 45, 20, 0.18);
  }

  /* 本文：Noto Serif JP Light 14px */
  .intro_ex {
    max-width: 630px;
    text-align: left;
    margin: 60px auto 30px;
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.85;
    color: var(--color-text);
  }
    

  /* SP：イントロ本文の手動改行をなくす */
  .intro_ex br { display: none; }

  /* イントロ本文の段落間余白（copy_block はアニメ専用のため専用クラスで） */
  .intro_para { margin: 0; }
  .intro_para + .intro_para { margin-top: 0.9em; }

  .intro_link { text-align: center; }

  /* SP：イントロ サブ写真3枚 */
  .intro_sub_photos {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 32px auto 0;
  }
  .intro_sub_photo {
    width: 28vw;
    max-width: 130px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 6px;
  }
    
  .intro_sub_photo img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
  }

  .txt_link {
    display: inline-block;
    font-size: 0.85rem; letter-spacing: 0.07em;
    color: var(--color-navy);
    border-bottom: 1px solid var(--color-navy);
    padding-bottom: 2px;
margin-bottom: 20px;

  }

  .txt_link--brown {
    color: var(--color-brown);
    border-bottom-color: var(--color-brown);
  }

  /* =====================================
    ROOMS（SP も Grid 版・階段配置を維持）
  ===================================== */
  #rooms {
    position: relative; overflow: visible;
    background: transparent; padding-bottom: 60px;
  }

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

  /* メイン写真 */
  .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 / 10;
    object-fit: cover; display: block;
  }

  /* タイトル全幅エリア（SP も sub と同じ幅で揃える） */
  .rooms_header {
    width: min(100%, 656px);
    margin: 30px auto 0;
    text-align: left;
  }

  /* テキスト＋写真：縦積み */
  .rooms_sub {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: min(100%, 656px);
    margin: 20px auto 0;
  }

  .rooms_text { padding: 0; }

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

  /* SPのRetreat Stayは2行表示 */
  .rooms_en .pc-br { display: inline; }
  .rooms_en {
    font-family: "Source Serif 4", serif;
    font-size: clamp(2.5rem, 10vw, 3.5rem);
    font-weight: 500;
    line-height: 1.1; color: var(--color-brown);
    margin: 0 0 15px; display: block;
  }

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

  .rooms_copy {
    font-size: 0.95rem; font-weight: 400;
    line-height: 2; color: var(--color-text);
  }
  .copy_block { margin: 0; }
  .copy_block + .copy_block { margin-top: 1em; }

  /* rooms メイン写真の水玉エフェクト（SP のみ・既存維持） */
  .rooms_ripple_origin {
    position: absolute;
    bottom: 0; right: 0;
    width: 100px; height: 100px;
    pointer-events: none;
    overflow: visible;
    z-index: 5;
  }

  .rooms_ripple_origin::before,
  .rooms_ripple_origin::after,
  .rooms_ripple_origin span {
    display: block;
    content: '';
    position: absolute;
    bottom: 8px; right: 8px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: rgba(0,122,191,0.22);
    animation: roomsDotRipple 4s cubic-bezier(0.1,0,0.4,1) infinite;
  }
  .rooms_ripple_origin::after {
    animation-delay: 1.4s;
    background: rgba(0,122,191,0.18);
  }

  @keyframes roomsDotRipple {
    0%   { transform: scale(0); opacity: 0.8; }
    80%  { opacity: 0; }
    100% { transform: scale(9); opacity: 0; }
  }

  /* SP も階段配置を維持（Grid 縮小版） */
  .rooms_photos {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto clamp(40px, 8vw, 80px) auto;
    margin-top: 20px;
    margin-bottom: 16px;
  }

  /* サブ写真スライダー（SP・複数枚クロスフェード） */
  .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.8s 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; }
  }

  .rooms_photo {
    overflow: hidden;
    border-radius: 6px;
    opacity: 0;
    transition: opacity 1.0s ease, transform 1.0s ease;
  }
  .rooms_photo.is-inview { opacity: 1; }

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

  /* 写真1：大きめ、上＋重なり帯 */
  .rooms_photo--1 {
    grid-column: 1 / 11;
    grid-row: 1 / 3;
    aspect-ratio: 16 / 10;
    z-index: 1;
    transform: translateY(20px);
  }
  .rooms_photo--1.is-inview { transform: translateY(0); }

  /* 写真2：幅を広げ、重なり帯＋下 */
  .rooms_photo--2 {
    grid-column: 6 / 13;
    grid-row: 2 / 4;
    aspect-ratio: 4 / 3;
    z-index: 2;
    box-shadow: -3px 3px 10px rgba(0, 0, 0, 0.13);
    transform: translateY(28px);
    transition-delay: 0.2s;
  }
  .rooms_photo--2.is-inview { transform: translateY(0); }
    

  /* =====================================
    HOURS（SP・Rooms と鏡像配置）
  ===================================== */
  #hours {
    position: relative; overflow: visible;
    background: transparent; padding-bottom: 60px;
  }

  .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 / 10;
    object-fit: cover; display: block;
  }

  /* タイトル全幅エリア（SP も sub と同じ幅で揃える） */
  .hours_header {
    width: min(100%, 656px);
    margin: 30px auto 0;
    text-align: left;
    /* PC は右寄せだが、SP では写真→タイトル→テキストの自然な縦並びなので
       左寄せに統一して読みやすく */
  }

  /* テキスト上・写真下（order: -1 でテキスト先頭に） */
  .hours_sub {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: min(100%, 656px);
    margin: 20px auto 0;
  }

  .hours_text {
    padding: 0;
    order: -1;
  }

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

  .hours_en {
    font-family: "Source Serif 4", serif;
    font-size: clamp(2.5rem, 10vw, 3.5rem);
    font-weight: 500;
    line-height: 1.1; color: var(--color-navy);
    margin: 0 0 15px; display: block;
  }

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

  .hours_copy {
    font-size: 0.95rem; font-weight: 400;
    line-height: 2; color: var(--color-text);
  }

  /* SP も階段配置を維持（Rooms と鏡像） */
  .hours_photos {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto clamp(40px, 8vw, 80px) auto;
    margin-top: 20px;
    margin-bottom: 16px;
  }

  .hours_photo {
    overflow: hidden;
    border-radius: 6px;
    opacity: 0;
    transition: opacity 1.0s ease, transform 1.0s ease;
  }
  .hours_photo.is-inview { opacity: 1; }

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

  /* 写真1：右寄りに大きく */
  .hours_photo--1 {
    grid-column: 3 / 13;
    grid-row: 1 / 3;
    aspect-ratio: 16 / 10;
    z-index: 1;
    transform: translateY(20px);
  }
  .hours_photo--1.is-inview { transform: translateY(0); }

  /* 写真2：左寄りに控えめ */
  .hours_photo--2 {
    grid-column: 1 / 8;
    grid-row: 2 / 4;
    aspect-ratio: 4 / 3;
    z-index: 2;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.13);
    transform: translateY(28px);
    transition-delay: 0.2s;
  }
  .hours_photo--2.is-inview { transform: translateY(0); }
    
    

 /* =====================================
    SECTION CONNECTOR（Hours → Koyaruzawa の一拍）
  ===================================== */
  .section_connector {
    text-align: center;
    padding: 24px 20px 32px;
  }

  .connector_text {
    display: inline-block;
    font-family: "Source Serif 4", serif;
    font-weight: 500;
    font-size: clamp(0.68rem, 2.8vw, 0.82rem);
    letter-spacing: 0.15em;
    color: var(--color-brown);
    opacity: 0.35;
  }

  .connector_line {
    width: 1px;
    height: 44px;
    margin: 20px 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（SP・Rooms と同レイアウト）
  ===================================== */
  #koyaruzawa {
    position: relative; overflow: visible;
    background: transparent; padding-bottom: 60px;
  }

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

  .koyaruzawa_main_photo {
    width: 100%; overflow: hidden; line-height: 0;
    opacity: 0; transform: translateY(20px);
    transition: opacity 1.0s ease, transform 1.0s ease;
  }
  .koyaruzawa_main_photo.is-inview { opacity: 1; transform: translateY(0); }
  .koyaruzawa_main_photo img {
    width: 100%;
    aspect-ratio: 16 /9;
    object-fit: cover; display: block;
  }

  .koyaruzawa_grid_anim {
    opacity: 0; transform: translateY(16px);
    transition: opacity 1.3s ease, transform 1.3s ease;
    transition-delay: 0.35s;
  }
  .koyaruzawa_grid_anim.is-inview { opacity: 1; transform: translateY(0); }

  /* タイトル全幅エリア（SP も sub と同じ幅で揃える） */
  .koyaruzawa_header {
    width: min(100%, 656px);
    margin: 30px auto 0;
    text-align: left;
  }

  .koyaruzawa_sub {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: min(100%, 656px);
    margin: 20px auto 0;
  }

  .koyaruzawa_text { padding: 0; }

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


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

  .koyaruzawa_en {
    font-family: "Source Serif 4", serif;
    font-size: clamp(2.5rem, 10vw, 3.5rem);
    font-weight: 500;
    line-height: 1.1; color: var(--color-brown);
    margin: 0 0 15px; display: block;
  }

  .koyaruzawa_ja {
    display: block;
    font-family: 'Noto Serif JP', serif;
    font-size: 0.75rem; font-weight: 500;
    letter-spacing: 0.27em; line-height: 1.7;
    color: var(--color-brown); margin: 0 0 20px;
  }

  .koyaruzawa_logo {
    width: 160px;
    margin-bottom: 36px;
  }

  .koyaruzawa_copy {
    font-size: 0.95rem; font-weight: 400;
    line-height: 2; color: var(--color-text);
    margin: 0 0 18px;
  }

  .koyaruzawa_link {
    display: inline-block;
    border-bottom: none;
  }

  /* SP も階段配置を維持 */
  .koyaruzawa_photos {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto clamp(40px, 8vw, 80px) auto;
    margin-top: 20px;
    margin-bottom: 16px;
  }

  .koyaruzawa_photo {
    overflow: hidden;
    border-radius: 6px;
    opacity: 0;
    transition: opacity 1.4s ease, transform 1.4s ease;
  }
  .koyaruzawa_photo.is-inview { opacity: 1; }

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

  .koyaruzawa_photo--1 {
    grid-column: 1 / 11;
    grid-row: 1 / 3;
    aspect-ratio: 16 / 10;
    z-index: 1;
    transform: translateY(20px);
  }
  .koyaruzawa_photo--1.is-inview { transform: translateY(0); }

  .koyaruzawa_photo--2 {
    grid-column: 6 / 13;
    grid-row: 2 / 4;
    aspect-ratio: 4 / 3;
    z-index: 2;
    box-shadow: -3px 3px 10px rgba(0, 0, 0, 0.13);
    transform: translateY(28px);
    transition-delay: 0.3s;
  }
  .koyaruzawa_photo--2.is-inview { transform: translateY(0); }
    
    
  /* =====================================
    FUTURE / YACHIMATA
  ===================================== */
  #future {
    position: relative; overflow: hidden;
    background: #f5f2ec;
    padding: 0;
    
  }

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

  .future_anim {
    opacity: 0; transform: translateY(20px);
    transition: opacity 0.9s ease, transform 0.9s ease;
  }

  .future_anim.is-inview { opacity: 1; transform: translateY(0); }
  .future_anim--d1        { transition-delay: 0.15s; }
  .future_anim--d2        { transition-delay: 0.30s; }
  .future_anim--d3        { transition-delay: 0.45s; }

  .future_head {
    padding: 0 28px 10px;  /* .ctsと同じ幅に統一 */
    text-align: center;
  }

  .future_en {
    font-family: "Source Serif 4", serif;
    font-size: clamp(1.6rem, 7vw, 2.4rem);
    font-weight: 500;
    letter-spacing: 0.00em; line-height: 0.9;
    color: var(--color-brown);
    margin: 0 0 16px; display: block;
  }

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

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

  .future_body {
    font-size: 0.9rem; font-weight: 300;
    line-height: 2.2; color: var(--color-text);
    text-align: left; margin: 0;
  }

  /* SP：本文の手動改行を非表示 */
  .future_body br { display: none; }

  /* 周辺施設スライダー */
  .neighbor_wrap {
    padding: 40px 0 50px;
    text-align: center;
  }

  .neighbor_lead {
    font-family: 'Noto Serif JP', serif;
    font-size: 0.88rem; font-weight: 500;
    letter-spacing: 0.09em; color: var(--color-brown);
    text-align: center; margin: 0 0 18px;
  }

  .neighbor_slider {
    width: 100%;
    margin: 0;
    overflow: visible;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .neighbor_slide { text-align: center; }

  .neighbor_img {
    width: 100%; aspect-ratio: 8 / 5;
    overflow: hidden; border-radius: 4px;
    margin-bottom: 10px;
  }

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

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

  .neighbor_link { display: block; color: inherit; }

  /* メイン写真 */
  .future_main_photo {
    width: 100%; overflow: hidden; line-height: 0;
    position: relative;
  }

  .future_main_photo img {
    width: 100%; height: 55vw;
    object-fit: cover; display: block;
    transform: scale(1.04);
    transition: transform 1.8s ease-out;
  }

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

  /* カテゴリ先頭に置いたメイン写真（SP） */
  .future_main_photo--lead img { height: 60vw; }
  .future_main_photo--lead + .future_head { padding-top: 40px; }

  /* =====================================
    ACCESS
  ===================================== */
  #access {
    background: #fff;
    padding: 60px 0 0;
  }

  .access_inner {
    width: 100%; padding: 0 28px;
    box-sizing: border-box;
    margin: 0 auto;
  }

  .access_head {
    text-align: center;
    padding-bottom: 10px;
  }

  .access_en {
    font-family: "Source Serif 4", serif;
    font-size: clamp(1.8rem, 7vw, 2.4rem);
    font-weight: 500;
    letter-spacing: 0.00em; line-height: 0.9;
    color: var(--color-navy);
    margin: 0 0 14px; display: block;
  }

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

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

  .access_lead_text {
    font-size: 0.82rem; font-weight: 300;
    line-height: 2.0; color: var(--color-text);
    text-align: center; margin: 0 0 28px;
  }

  /* Google Maps（全幅・グレー帯） */
  .access_gmap_wrap {
    width: 100%;
    background: #e8e6e2;
    padding: 20px 0;
    margin-bottom: 36px;
    line-height: 0;
  }

  .access_gmap_wrap iframe {
    display: block;
    width: calc(100% - 40px);
    height: 220px;
    margin: 0 auto;
    border: 0;
    border-radius: 2px;
  }

  /* 2カラム → 1カラムに */
  .access_2col_wrap {
    width: min(440px, calc(100% - 56px));
    /* 最大440px、左右28pxの余白で中央寄せ */
    box-sizing: border-box;
    margin: 0 auto 32px;
    display: flex;
    flex-direction: column;
    gap: 28px;
  }

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

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

  .access_box {
    display: flex; flex-direction: column; gap: 12px;
  }

  .access_box_head {
    display: flex; align-items: center; gap: 8px;
    background: #666; padding: 8px 14px;
    border-radius: 2px; width: fit-content;
  }

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

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

  .access_car_img { width: 100%; }

  .access_car_img img {
    width: 100%; height: auto; display: block;
  }

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

  .access_train_item {
    display: flex; flex-wrap: wrap;
    align-items: center; gap: 6px 8px;
    padding: 10px 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.72rem; font-weight: 400;
    letter-spacing: 0.00em; color: #000;
    background: #fff;
    border: 1px solid #000; padding: 3px 8px;
    border-radius: 1px; white-space: nowrap;
  }

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

  .access_note {
    font-family: 'Noto Serif JP', serif;
    font-size: 0.72rem; font-weight: 300;
    color: #999; letter-spacing: 0.02em;
    margin: -4px 0 0; line-height: 1.8;
  }

  /* 住所（中央揃え） */
  .access_address_wrap {
    text-align: center;
    padding: 0 20px; margin-bottom: 24px;
  }

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

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

  .access_gmap_link_wrap {
    text-align: center;
    padding: 8px 0 24px;
  }

  /* =====================================
    予約CTA帯
  ===================================== */
  .booking-strip { padding: 36px 0; }

  .booking-strip_inner {
    width: calc(100% - 56px);
    gap: 12px;
    text-align: center;
  }

  .booking-strip_text { font-size: 0.95rem; letter-spacing: 0.15em; }

  /* =====================================
    FOOTER
  ===================================== */
  #site-footer {
    background: #f5f2ec;
    padding: 24px 0 20px;    /* 天地を縮めてすっきり */
    position: relative;
    z-index: 3;
  }

  .footer_inner {
    width: 100%; padding: 0 20px;
    box-sizing: border-box;
    margin: 0 auto; text-align: center;
  }

  .footer_nav { margin-bottom: 16px; }  /* 24px → 16px */

  .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.7rem;
  }

  .footer_nav ul li a {
    font-family: "Source Serif 4", serif;
    font-size: 0.68rem; font-weight: 400;
    letter-spacing: 0.11em; color: var(--color-brown);
    padding: 3px 5px; display: inline-block;
  }

  /* SPフッターナビ改行：Koyaruzawaの後で折り返す */
  .footer_nav_break {
    width: 100%;   /* flexアイテムとして全幅→次のアイテムが次行へ */
    height: 0;
    overflow: hidden;
  }
  /* 改行ダミーliの前後の｜を非表示 */
  .footer_nav_break::before,
  .footer_nav_break + li::before { display: none !important; }

  /* SP専用改行タグを表示 */
  .sp-br { display: inline; }

  .footer_brand { margin-bottom: 12px; }  /* 16px → 12px */

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

  .footer_sub_nav ul {
    display: flex; justify-content: center;
    flex-wrap: wrap; gap: 0;
    list-style: none; margin: 10px 0 0; padding: 0;  /* 16px → 10px */
    border-top: 1px solid rgba(92,51,23,0.15);
    padding-top: 16px;   /* 20px → 16px */
  }

  .footer_sub_nav ul li a {
    font-family: 'Noto Serif JP', serif;
    font-size: 0.72rem; font-weight: 300;
    letter-spacing: 0.05em; color: rgba(92,51,23,0.6);
    padding: 4px 8px; display: inline-block;
  }

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

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

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

  .future_main_photo {
    position: relative;
  }

} /* end @media SP */