/* ─────────────────────────────────────────────
     ぼけかす — tokens
     ───────────────────────────────────────────── */
  :root{
    --ink:        #0d0d0d;        /* 墨 */
    --ink-2:      #161616;        /* paneled ink */
    --ink-3:      #1f1f1f;        /* lifted ink */
    --ink-line:   #2a2a2a;
    --paper:      #f5f4f2;        /* warm off-white */
    --paper-2:    #e9e8e6;
    --gold:       #c9a961;        /* accent — kintsugi */
    --gold-soft:  #a08749;
    --gold-bright:#dfc079;
    --text:       #f4f4f2;
    --text-mute:  #8a8a86;
    --text-dim:   #565552;
    --hairline:   rgba(201,169,97,.22);
    --hairline-2: rgba(244,244,242,.10);

    --serif-jp:   "Noto Serif JP","Hiragino Mincho ProN","Yu Mincho","YuMincho","ヒラギノ明朝 Pro",serif;
    --serif-en:   "Cormorant Garamond","Noto Serif JP",serif;
    --sans:       "Inter","Helvetica Neue","Hiragino Kaku Gothic ProN",system-ui,sans-serif;

    --max:        1320px;
    --gutter:     clamp(24px,5vw,72px);

    --ease:       cubic-bezier(.2,.7,.2,1);
  }

  *{box-sizing:border-box}
  html,body{margin:0;padding:0;background:var(--ink);color:var(--text);
            -webkit-text-size-adjust:100%;text-size-adjust:100%;
            font-family:var(--serif-jp);font-weight:300;
            -webkit-font-smoothing:antialiased;text-rendering:geometricPrecision;}
  body{overflow-x:hidden;line-height:1.8;letter-spacing:.04em;}
  a{color:inherit;text-decoration:none}
  img{display:block;max-width:100%}
  ::selection{background:var(--gold);color:var(--ink)}

  .ambient-shade{
    position:fixed;inset:0;z-index:0;pointer-events:none;
    background:
      linear-gradient(90deg, rgba(0,0,0,.76), rgba(0,0,0,.34) 34%, rgba(0,0,0,.42) 66%, rgba(0,0,0,.8)),
      linear-gradient(180deg, rgba(0,0,0,.46), rgba(0,0,0,.7));
  }
  /* fine page grain — extremely subtle */
  body::before{
    content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.035;
    background-image:radial-gradient(rgba(255,255,255,.6) 1px,transparent 1px);
    background-size:3px 3px;
    mix-blend-mode:overlay;
  }

  .eyebrow{
    font-family:var(--sans);font-weight:400;font-size:11px;
    letter-spacing:.36em;text-transform:uppercase;color:var(--gold);
  }
  .rule{
    display:block;width:46px;height:62px;margin:0 auto;
    background:url("../assets/seal.png") center/contain no-repeat;
    opacity:.92;
  }

  /* ─────────────────────────────────────────────
     Header (fixed)
     ───────────────────────────────────────────── */
  .site-header{
    position:fixed;top:0;left:0;right:0;z-index:50;
    display:flex;align-items:center;justify-content:space-between;
    padding:22px var(--gutter);
    background:linear-gradient(to bottom,rgba(0,0,0,.78) 0%,rgba(0,0,0,.35) 70%,transparent 100%);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    transition:background .4s var(--ease),padding .4s var(--ease);
  }
  .site-header.is-scrolled{
    background:rgba(0,0,0,.92);
    padding-top:14px;padding-bottom:14px;
    border-bottom:1px solid var(--hairline);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  }
  .brandmark{
    display:flex;align-items:center;
  }
  .brandmark img{
    height:78px;width:auto;display:block;
    transition:opacity .3s var(--ease);
  }
  .brandmark:hover img{opacity:.82}
  .nav{display:flex;gap:36px;align-items:center}
  .nav a{
    font-family:var(--sans);font-weight:400;font-size:11px;
    letter-spacing:.32em;text-transform:uppercase;color:var(--text);
    display:inline-flex;align-items:center;gap:6px;
    padding:6px 0;position:relative;
    transition:color .3s var(--ease);
  }
  .nav a::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
    background:var(--gold);transform:scaleX(0);transform-origin:left;
    transition:transform .5s var(--ease);
  }
  .nav a:hover{color:var(--gold-bright)}
  .nav a:hover::after{transform:scaleX(1)}
  .nav a .arrow{font-size:12px;opacity:.6}
  /* スマホヘッダー用 外部リンクアイコン（食べログ/Instagram） */
  .nav-sp{display:none}
  .nav-sp a{color:var(--gold);display:flex;align-items:center;transition:opacity .3s var(--ease)}
  .nav-sp a:active{opacity:.6}
  .nav-sp svg{width:23px;height:23px;display:block}

  /* ─────────────────────────────────────────────
     Hero
     ───────────────────────────────────────────── */
  .hero{
    position:relative;height:100vh;height:100dvh;min-height:680px;
    display:flex;flex-direction:column;justify-content:center;
    padding:0 var(--gutter);
    overflow:hidden;
  }
  .hero-image{
    position:absolute;inset:0;z-index:0;overflow:hidden;
  }
  /* ★スマホ実機(LINE内ブラウザ/一部WKWebView)で background-size:cover が誤計算され
     天井が切れ下に黒帯が出る不具合があったため、<img>+object-fit:cover へ変更。
     object-fit は cover の実装が安定しており全webviewで縦横比を正しく満たす。 */
  .hero-slide{
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:cover;object-position:center center;
    opacity:0;
    animation:heroSlide 18s linear infinite;   /* 実写3枚×各6s */
    /* イントロ開始(JS)まで一時停止し、イントロとスライドの同期を保証 */
    animation-play-state:paused;
  }
  body.intro-play .hero-slide{animation-play-state:running}
  /* オープニング演出(黒幕10s)が晴れる頃に1枚目が出現するよう全体を +7s 後ろ倒し。
     これで「立ち上げ直後の1巡目だけ1枚目の表示が極端に短い」現象を解消。間隔6sは不変 */
  .hero-slide:nth-child(1){animation-delay:9s}
  .hero-slide:nth-child(2){animation-delay:15s}
  .hero-slide:nth-child(3){animation-delay:21s}
  /* 縦写真スライド: PCはcoverだと過拡大で写真のよさが死ぬため、containで全体を
     墨黒の余白の中に見せる（SPは縦×縦で相性が良いのでcoverのまま） */
  @media (min-width: 769px) and (min-height: 481px){
    /* ひまわり(ニッチ)の天がヘッダーの暗色帯に隠れるため、描画領域を
       ヘッダー下から開始し画像全体を少し下げる（padding分だけ縮小表示） */
    .hero-slide--tate{object-fit:contain;padding-top:118px;padding-bottom:12px}
  }
  /* 明度・可読性グラデーション: 以前は各スライドの疑似要素だったが、<img>は疑似要素を
     持てないため hero-image 側に集約(全スライド共通・より安定) */
  .hero-image::before{
    content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:
      linear-gradient(90deg, rgba(0,0,0,.68) 0%, rgba(0,0,0,.12) 46%, rgba(0,0,0,.62) 100%),
      linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.02) 44%, rgba(0,0,0,.72) 100%);
  }
  .hero-image::after{
    content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
    background-image:
      radial-gradient(ellipse 50% 36% at 52% 42%, rgba(201,169,97,.16), transparent 64%),
      radial-gradient(ellipse 62% 44% at 20% 84%, rgba(0,0,0,.44), transparent 70%);
    mix-blend-mode:screen;opacity:.9;
  }
  @keyframes heroSlide{
    0%   {opacity:0}
    4%   {opacity:1}      /* 約0.7sでフェードイン */
    28%  {opacity:1}
    33.3%{opacity:0}      /* 次の1枚へクロスフェード */
    100% {opacity:0}
  }
  .hero-vignette{
    position:absolute;inset:0;z-index:1;pointer-events:none;
    background:
      linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,.62) 100%),
      radial-gradient(ellipse at center, transparent 44%, rgba(0,0,0,.34) 100%);
  }
  .hero-inner{
    position:relative;z-index:2;max-width:var(--max);width:100%;margin:0 auto;
    display:flex;flex-direction:column;align-items:center;text-align:center;
  }
  .hero-label{
    display:flex;align-items:center;gap:14px;margin-bottom:36px;
  }
  .hero-label .line{width:48px;height:1px;background:var(--gold);opacity:.7}
  .hero-label span{
    font-family:var(--sans);font-size:11px;letter-spacing:.4em;
    color:var(--gold);text-transform:uppercase;
  }
  .hero-logo{
    display:none;   /* イントロ終了後に再出現させない */
  }
  .hero-logo img{
    display:block;width:clamp(240px,30vw,420px);height:auto;
    filter:drop-shadow(0 10px 38px rgba(0,0,0,.55));
  }
  .hero-sub{
    font-family:var(--serif-jp);font-weight:300;
    font-size:clamp(18px,2vw,26px);
    letter-spacing:1em;
    color:var(--text);margin:0;
    padding-left:1em; /* visually balance trailing letter-spacing */
  }
  .hero-caption{
    position:absolute;left:var(--gutter);bottom:34px;z-index:3;
    font-family:var(--serif-jp);font-weight:300;
    font-size:14px;letter-spacing:.18em;color:var(--text);
    text-shadow:0 1px 14px rgba(0,0,0,.7);line-height:1.4;
  }
  .hero-caption span{
    display:block;font-family:var(--sans);font-size:10px;letter-spacing:.26em;
    color:var(--gold);margin-top:7px;text-transform:uppercase;
  }
  .hero-scroll{
    position:absolute;left:50%;bottom:28px;transform:translateX(-50%);z-index:3;
    display:flex;flex-direction:column;align-items:center;gap:10px;
    font-family:var(--sans);font-size:10px;letter-spacing:.4em;color:var(--text-mute);
    text-transform:uppercase;
  }
  .hero-scroll .tick{
    width:1px;height:48px;background:linear-gradient(to bottom,var(--gold),transparent);
    animation:tick 2.6s var(--ease) infinite;
    transform-origin:top;
  }
  @keyframes tick{
    0%   {transform:scaleY(0);opacity:0}
    30%  {transform:scaleY(1);opacity:1}
    100% {transform:scaleY(1) translateY(48px);opacity:0}
  }

  /* ⑤ オープニング演出（合計10s）:
     0–0.5s 黒地 → 0.5–3.5s ロゴをゆっくりフェードイン(3s・奥から浮き出る) →
     3.5–5.5s 保持(2s) → 5.5–9.5s ロゴをゆっくりフェードアウト(4s) →
     黒地ヴェールも同タイミング(55%〜95%)でフェードアウトし背景写真が現れる。
     ⑳ イントロのロゴはヒーローロゴ(.hero-logo img)と同じ幅・同じ中央位置で統一 */
  .hero-intro{
    position:fixed;inset:0;z-index:120;background:#000;
    display:flex;align-items:center;justify-content:center;
    pointer-events:none;
    /* ★キャッシュ/描画遅延で途中から再生される症状の対策:
       CSS読込時ではなく、JSが初回描画を確認してから .intro-play を付与して
       アニメーションを頭から開始する（それまでは黒ベールで待機） */
  }
  .hero-intro img{
    width:clamp(240px,30vw,420px);height:auto;opacity:0;
    filter:drop-shadow(0 10px 38px rgba(0,0,0,.55));
  }
  body.intro-play .hero-intro{animation:introVeil 10s ease-in-out forwards}
  body.intro-play .hero-intro img{animation:introLogo 10s ease-in-out forwards}
  @keyframes introLogo{
    0%   {opacity:0;transform:scale(0.92)}   /* 0s      真っ黒・ロゴ非表示 */
    5%   {opacity:0;transform:scale(0.92)}   /* 0–0.5s  黒を保持 */
    35%  {opacity:1;transform:scale(1)}      /* 0.5–3.5s ゆっくり浮き出る（3s） */
    55%  {opacity:1;transform:scale(1)}      /* 3.5–5.5s 表示を保持（2s） */
    95%  {opacity:0;transform:scale(1.03)}   /* 5.5–9.5s ゆっくりフェードアウト（4s） */
    100% {opacity:0;transform:scale(1.03)}
  }
  @keyframes introVeil{
    0%   {opacity:1}
    55%  {opacity:1}                          /* 5.5sまで黒を保持 */
    95%  {opacity:0}                          /* 5.5–9.5s 背景を4sでゆっくりフェードイン */
    100% {opacity:0;visibility:hidden}
  }

  /* ─────────────────────────────────────────────
     Section frame
     ───────────────────────────────────────────── */
  section{position:relative;z-index:2}
  .wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);}
  .pad-y{padding:clamp(120px,18vw,200px) 0;}
  .center{text-align:center}

  /* reveal */
  .reveal{opacity:0;transform:translateY(18px);filter:blur(4px);
          transition:opacity 1.2s var(--ease),transform 1.2s var(--ease),filter 1.2s var(--ease);}
  .reveal.in{opacity:1;transform:none;filter:none}
  .hero-logo.reveal{
    transform:none;filter:none;
    transition:opacity 1.4s ease-in-out;
    transition-delay:5.2s;   /* ⑤ 新6.5sタイムライン：ヴェールが上がる頃にヒーローロゴへ継ぐ */
  }

  /* ─────────────────────────────────────────────
     想い
     ───────────────────────────────────────────── */
  .philosophy{
    min-height:100vh;min-height:100dvh;
    background:rgba(0,0,0,.84);
    border-top:1px solid var(--hairline-2);
    border-bottom:1px solid var(--hairline-2);
    display:flex;align-items:center;
    scroll-margin-top:72px;
  }
  .philosophy-inner{
    display:flex;flex-direction:column;align-items:center;gap:clamp(54px,7vw,86px);
  }
  /* OMOI: スクロールで段落ごとに徐々に出現（stagger） */
  .philosophy-copy p.reveal:nth-of-type(2),
  .philosophy-def p.reveal:nth-of-type(2){transition-delay:.16s}
  .philosophy-copy p.reveal:nth-of-type(3),
  .philosophy-def p.reveal:nth-of-type(3){transition-delay:.32s}
  .story-lead{text-align:center}
  .title-gap{display:inline-block;width:.4em}
  .story-title{
    font-family:var(--serif-jp);font-weight:300;
    font-size:clamp(30px,4.6vw,54px);
    line-height:1.3;letter-spacing:.12em;
    color:var(--text);margin:0 0 .7em;
  }
  .story-tagline{
    font-family:var(--serif-jp);font-weight:300;
    font-size:clamp(13px,1.6vw,18px);letter-spacing:.26em;
    color:var(--gold);margin:0;
  }
  .philosophy-copy{
    font-family:var(--serif-jp);font-weight:300;
    font-size:clamp(17px,2vw,24px);
    line-height:2.5;letter-spacing:.1em;
    color:var(--text);
    text-align:center;
    max-width:920px;
  }
  .philosophy-copy p{margin:0}
  .philosophy-copy p + p{margin-top:1.5em}
  .philosophy-def{
    font-family:var(--serif-jp);font-weight:300;
    font-size:clamp(16px,1.8vw,22px);
    line-height:2.3;letter-spacing:.08em;
    color:var(--text);text-align:center;max-width:860px;
  }
  .philosophy-def p{margin:0}
  .philosophy-def p + p{margin-top:1.4em}
  br.sp{display:none}  /* スマホのみ改行 */
  br.pc{display:inline}  /* PCのみ改行 */
  .accent{color:var(--gold)}
  .philosophy-def .accent{font-size:1.12em;letter-spacing:.04em}
  .philosophy-sig{
    font-family:var(--serif-jp);font-weight:300;font-size:20px;   /* 読みやすさ向上のため 15→20px（約+4pt） */
    letter-spacing:.4em;color:var(--text-mute);
    text-align:center;white-space:normal;   /* 全角スペースでのみ改行を許可 */
    padding-left:.4em;   /* 末尾letter-spacingの右余白を相殺し光学的に中央寄せ（池田氏 6/13） */
  }
  /* 店名と店名表記がそれぞれ語中で割れないよう保護（「ぼけか／す」分断の防止） */
  .philosophy-sig .sig-place{white-space:nowrap}
  /* ⑧ 署名の「ぼけかす」だけ少し大きく */
  .philosophy-sig .sig-name{font-size:1.18em;color:var(--text);white-space:nowrap}

  /* ─────────────────────────────────────────────
     Brand story — chapters
     ───────────────────────────────────────────── */
  .story{background:var(--ink)}
  .story-head{
    display:flex;flex-direction:column;align-items:center;gap:28px;
    margin-bottom:clamp(80px,12vw,140px);
  }
  .story-head h2{
    font-family:var(--serif-jp);font-weight:300;
    font-size:clamp(36px,5vw,64px);
    letter-spacing:.24em;margin:0;color:var(--text);
  }
  .chapter{
    display:grid;grid-template-columns:200px 1fr;gap:clamp(40px,6vw,96px);
    padding:clamp(80px,10vw,120px) 0;
    border-top:1px solid var(--hairline-2);
  }
  .chapter:last-of-type{border-bottom:1px solid var(--hairline-2)}
  .chapter-num{position:relative;padding-top:6px}
  .chapter-num .label{
    font-family:var(--sans);font-size:11px;letter-spacing:.4em;color:var(--gold);
    text-transform:uppercase;display:block;margin-bottom:18px;
  }
  .chapter-num .big{
    font-family:var(--serif-en);font-weight:300;font-style:italic;
    font-size:96px;line-height:1;color:var(--gold-soft);
    opacity:.9;
  }
  .chapter-body h3{
    font-family:var(--serif-jp);font-weight:400;
    font-size:clamp(28px,3.4vw,46px);
    letter-spacing:.18em;line-height:1.45;margin:0 0 36px;color:var(--text);
  }
  .chapter-body p{
    font-family:var(--serif-jp);font-weight:300;font-size:16px;
    line-height:2.1;letter-spacing:.08em;color:var(--text);
    max-width:62ch;margin:0 0 1.4em;
  }
  .chapter-body p:last-child{margin-bottom:0}
  .chapter-body .kanji-pull{
    font-family:var(--serif-jp);font-weight:300;
    color:var(--gold);font-size:14px;letter-spacing:.5em;
    margin-top:32px;display:inline-block;border-bottom:1px solid var(--hairline);
    padding-bottom:8px;
  }

  /* ─────────────────────────────────────────────
     Menu
     ───────────────────────────────────────────── */
  .menu{
    background:var(--ink);
    text-align:center;
  }
  .menu .eyebrow{margin-bottom:24px}
  .menu h2{
    font-family:var(--serif-jp);font-weight:300;
    font-size:clamp(48px,7vw,96px);
    letter-spacing:.32em;margin:0 0 12px;color:var(--text);
  }
  .menu .latin{
    font-family:var(--serif-en);font-style:italic;font-weight:400;
    font-size:14px;letter-spacing:.42em;color:var(--text-mute);
    text-transform:uppercase;margin-bottom:64px;
  }
  .menu-card{
    max-width:760px;margin:0 auto;
    border:1px solid var(--hairline);
    padding:clamp(48px,7vw,88px) clamp(32px,5vw,72px);
    background:linear-gradient(180deg, rgba(20,20,20,.6) 0%, rgba(0,0,0,.2) 100%);
    position:relative;
  }
  .menu-card::before,.menu-card::after{
    content:"";position:absolute;width:14px;height:14px;border:1px solid var(--gold);
  }
  .menu-card::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
  .menu-card::after{bottom:-1px;right:-1px;border-left:none;border-top:none}
  .menu-card p.intro{
    font-family:var(--serif-jp);font-weight:300;font-size:15px;
    line-height:2;letter-spacing:.1em;color:var(--text-mute);
    margin:0 0 48px;
  }
  .menu-btn{
    display:inline-flex;align-items:center;gap:18px;
    padding:22px 48px;border:1px solid var(--gold);color:var(--gold);
    font-family:var(--sans);font-size:12px;letter-spacing:.4em;text-transform:uppercase;
    background:transparent;cursor:pointer;
    transition:background .4s var(--ease),color .4s var(--ease),letter-spacing .4s var(--ease);
    position:relative;overflow:hidden;
  }
  .menu-btn::before{
    content:"";position:absolute;inset:0;background:var(--gold);
    transform:translateY(101%);transition:transform .5s var(--ease);
  }
  .menu-btn span{position:relative;z-index:1}
  .menu-btn:hover{color:var(--ink);letter-spacing:.46em}
  .menu-btn:hover::before{transform:translateY(0)}
  .menu-note{
    margin-top:36px;font-family:var(--serif-jp);font-weight:300;
    font-size:12px;letter-spacing:.16em;color:var(--text-dim);
  }

  /* ─────────────────────────────────────────────
     Info — address / access / hours / reservation
     ───────────────────────────────────────────── */
  .info{background:var(--ink)}
  .info-grid{
    display:grid;grid-template-columns:1.05fr 1fr;
    gap:clamp(48px,6vw,80px);align-items:start;
  }
  .info-grid h2{
    font-family:var(--serif-jp);font-weight:300;
    font-size:clamp(36px,5vw,64px);
    letter-spacing:.24em;margin:0 0 8px;color:var(--text);
  }
  .info-grid .latin{
    font-family:var(--serif-en);font-style:italic;font-size:14px;
    letter-spacing:.42em;color:var(--text-mute);text-transform:uppercase;
    margin-bottom:56px;
  }
  .info-cells{
    display:grid;grid-template-columns:1fr 1fr;
    border-top:1px solid var(--hairline-2);
    border-left:1px solid var(--hairline-2);
  }
  .info-cell{
    padding:36px 28px;
    border-right:1px solid var(--hairline-2);
    border-bottom:1px solid var(--hairline-2);
  }
  .info-cell .label{
    font-family:var(--sans);font-size:10px;letter-spacing:.4em;text-transform:uppercase;
    color:var(--gold);margin-bottom:14px;display:flex;align-items:center;gap:10px;
  }
  .info-cell .label::before{
    content:"";width:18px;height:1px;background:var(--gold);
  }
  .info-cell .value{
    font-family:var(--serif-jp);font-weight:300;font-size:15px;
    line-height:1.9;letter-spacing:.08em;color:var(--text);
  }
  .info-cell .value strong{font-weight:500;color:var(--text)}
  .info-cell .value strong.value-blk{display:block;margin-top:16px}
  .info-cell .value .muted{color:var(--text-mute);font-size:13px;display:block;margin-top:4px}

  .info-map{
    position:relative;aspect-ratio:4/5;
    background:
      linear-gradient(135deg, #161616 0%, #1a1612 50%, #161616 100%);
    border:1px solid var(--hairline);
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;
  }
  .info-map iframe{
    position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
    filter:grayscale(.35) contrast(1.04) brightness(.92);
  }

  /* ─────────────────────────────────────────────
     External links band
     ───────────────────────────────────────────── */
  .links{
    background:var(--ink);
    border-top:1px solid var(--hairline-2);
  }
  .links-grid{
    display:flex;justify-content:center;flex-wrap:wrap;
    gap:clamp(14px,2.5vw,32px);
    padding:clamp(44px,6vw,72px) var(--gutter);
  }
  .link-card{
    display:flex;flex-direction:column;align-items:center;gap:13px;
    width:clamp(148px,19vw,200px);padding:30px 18px 26px;
    border:1px solid var(--hairline-2);
    transition:background .4s var(--ease),border-color .4s var(--ease);
  }
  .link-card:hover{background:rgba(201,169,97,.05);border-color:var(--hairline)}
  .link-icon{display:block;width:30px;height:30px;color:var(--gold)}
  .link-icon svg{width:100%;height:100%;display:block}
  .link-name{
    font-family:var(--serif-jp);font-weight:300;font-size:18px;
    letter-spacing:.14em;color:var(--text);
  }
  .link-sub{
    font-family:var(--sans);font-size:10px;letter-spacing:.22em;
    color:var(--text-mute);
  }

  /* ─────────────────────────────────────────────
     Footer
     ───────────────────────────────────────────── */
  footer{
    position:relative;z-index:2;            /* 背景アニメより前面に。透け防止＝不透明な土台 */
    background:#0d0d0d;                      /* 同色でしっかり塗りつぶし */
    border-top:1px solid var(--hairline-2);
    padding:64px var(--gutter) 48px;
    text-align:center;
  }
  .footer-logo{
    width:min(210px,56vw);height:auto;display:block;margin:0 auto;opacity:1;
  }
  .foot-rule{
    width:32px;height:1px;background:var(--gold);opacity:.5;
    margin:32px auto;
  }
  .foot-meta{
    font-family:var(--sans);font-size:11px;letter-spacing:.32em;
    color:var(--text-mute);text-transform:uppercase;
  }
  /* ⑱ 運営会社表記（HiRAKU の大小文字を保つため uppercase を解除）。視認性UP */
  .foot-operator{
    font-family:var(--serif-jp);font-weight:400;font-size:13px;
    letter-spacing:.14em;text-transform:none;color:var(--text);
    margin-bottom:16px;
  }
  .foot-operator a{
    color:var(--gold);border-bottom:1px solid var(--gold-soft);
    padding-bottom:3px;transition:color .3s var(--ease);
  }
  .foot-operator a:hover{color:var(--gold-bright)}

  /* ─────────────────────────────────────────────
     ⑥⑦⑩ PC（≥769px）のみ本文フォントを約2px縮小。SPは現状維持。
     ───────────────────────────────────────────── */
  @media (min-width: 769px) and (min-height: 481px){
    .story-title{font-size:clamp(28px,4.3vw,50px)}              /* ⑥ */
    .story-tagline{font-size:clamp(12px,1.5vw,16px)}            /* ⑦ */
    .philosophy-copy{font-size:clamp(16px,1.85vw,22px)}        /* ⑦ */
    .philosophy-def{font-size:clamp(15px,1.65vw,20px)}         /* ⑦ */
    .info-grid h2{font-size:clamp(34px,4.7vw,60px)}            /* ⑩ */
    .info-cell .value{font-size:13px}                          /* ⑩ */
  }

  /* ─────────────────────────────────────────────
     Mobile
     ───────────────────────────────────────────── */
  @media (max-width: 768px), (orientation: landscape) and (max-height: 480px){
    :root{--gutter:20px}
    .nav{display:none}
    .nav-sp{display:flex;gap:20px;align-items:center}
    .brandmark{transform:translateX(-8px)}  /* ロゴ左の実余白(ガター+PNG透明余白~11px)をインスタ右余白~23pxに合わせて狭める（6/13） */
    .brandmark img{height:54px}

    .hero{min-height:600px}
    /* 画像がメニューバーの裏まで上がらないよう、ヘッダー直下(=高さ98px)から
       画像の上端がスタートするようにする */
    .hero-image{top:98px}
    .hero-logo img{width:min(260px,62vw)}
    .hero-sub{font-size:14px;letter-spacing:.6em;padding-left:.6em}
    .hero-caption{font-size:12px;bottom:26px}
    .hero-caption span{font-size:9px}
    .hero-label .line{width:32px}

    .chapter{grid-template-columns:1fr;gap:24px;padding:64px 0}
    .chapter-num .big{font-size:64px}

    .info-grid{grid-template-columns:1fr;gap:48px}
    .info-cells{grid-template-columns:1fr}
    .info-map{aspect-ratio:5/4}

    .link-card{width:clamp(132px,42vw,180px);padding:24px 14px 22px}

    .story-title{font-size:26px}
    .story-tagline{white-space:nowrap;font-size:clamp(10px,3.1vw,13px);letter-spacing:.04em}
    .philosophy-copy{font-size:16px;line-height:2.3;letter-spacing:.04em}
    .philosophy-def{font-size:15px;line-height:2.2}
    br.sp{display:inline}  /* スマホで指定箇所を改行 */
    br.pc{display:none}  /* スマホではPC用改行を解除 */
    .carte-lead .ph{display:inline-block}  /* スマホは文節単位でのみ折返し */

    .menu-btn{padding:20px 32px;font-size:11px;letter-spacing:.3em}
  }

  /* reduce motion */
  @media (prefers-reduced-motion: reduce){
    .reveal{opacity:1;transform:none;filter:none}
    .hero-scroll .tick{animation:none}
    .hero-slide{animation:none}
    .hero-slide:first-child{opacity:1}
  }

  /* お品書き・お飲み物（20260824 カーテン版から移植） */
  .carte{background:var(--ink);scroll-margin-top:72px}
  .carte + .carte{border-top:1px solid var(--hairline-2)}
  .carte-head{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:clamp(36px,5vw,56px)}
  .carte-head .rule{margin:0 0 2px}
  .carte-title{
    font-family:var(--serif-jp);font-weight:300;
    font-size:clamp(30px,4.4vw,52px);letter-spacing:.28em;padding-left:.28em;
    color:var(--text);margin:0;
  }
  .carte-latin{
    font-family:var(--serif-en);font-style:italic;font-weight:400;
    font-size:13px;letter-spacing:.4em;text-transform:uppercase;color:var(--text-mute);
  }
  .carte-lead{
    max-width:720px;margin:0 auto clamp(40px,5vw,60px);
    font-family:var(--serif-jp);font-weight:300;
    font-size:clamp(15px,1.9vw,18px);line-height:2.2;letter-spacing:.08em;
    color:var(--text);text-align:center;
  }
  .carte-lead p{margin:0;white-space:nowrap}  /* 固定改行を崩さない */
  .carte-lead p + p{margin-top:1.6em}  /* 支給テキストの空行ぶん */
  .carte-lead .ph{display:inline-block}  /* 折返しは文節境界のみ（PC/SP共通・20260830） */
  .carte-list{max-width:760px;margin:0 auto;border-top:1px solid var(--hairline-2)}
  .carte-item{
    display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;
    padding:20px 4px;border-bottom:1px solid var(--hairline-2);text-align:left;
  }
  .ci-name{
    font-family:var(--serif-jp);font-weight:400;font-size:clamp(16px,2vw,19px);
    letter-spacing:.1em;color:var(--text);white-space:nowrap;
  }
  .ci-dots{flex:1;border-bottom:1px dotted var(--hairline);transform:translateY(-5px);opacity:.5}
  .ci-price{
    font-family:var(--serif-en);font-size:15px;letter-spacing:.08em;color:var(--gold);white-space:nowrap;
  }
  .ci-desc{
    width:100%;margin-top:4px;
    font-family:var(--serif-jp);font-weight:300;font-size:clamp(13px,1.6vw,14px);
    letter-spacing:.06em;line-height:1.9;color:var(--text-mute);
  }
  .carte-note{
    margin-top:30px;text-align:center;
    font-family:var(--serif-jp);font-weight:300;font-size:12px;
    letter-spacing:.14em;color:var(--text-dim);
  }
  @media(max-width:768px), (orientation: landscape) and (max-height: 480px){
    .carte-item{flex-wrap:wrap;gap:4px 12px}
    .ci-dots{display:none}
  }

  /* コース（お品書き 20260821確定版） */
  .course-head{border-bottom:none;padding-bottom:8px}
  .ci-sub{
    font-family:var(--serif-jp);font-weight:300;font-size:13px;
    letter-spacing:.14em;color:var(--text-mute);margin-left:14px;
  }
  .course-items{
    list-style:none;margin:0;padding:0 4px 26px;
    border-bottom:1px solid var(--hairline-2);text-align:left;
  }
  .course-items li{
    font-family:var(--serif-jp);font-weight:300;
    font-size:clamp(14px,1.8vw,16px);letter-spacing:.08em;line-height:2.2;
    color:var(--text);
  }
  .ci-cat{color:var(--gold);margin-right:2px}
  .course-note{
    display:block;font-size:12px;letter-spacing:.1em;
    color:var(--text-dim);margin:-2px 0 2px 1em;
  }
  /* コース末尾の個室利用注記（20260824） */
  .course-caution{
    display:block;font-size:12px;letter-spacing:.1em;line-height:1.9;
    color:var(--text-dim);margin:14px 4px 2px;text-align:left;
  }
  /* お品書き最下部のご予約案内（20260824） */
  .carte-reserve-note{
    margin:44px 4px 0;font-family:var(--serif-jp);font-weight:300;
    font-size:clamp(12.5px,1.6vw,14px);letter-spacing:.12em;line-height:2.3;
    color:var(--text-mute);text-align:center;
  }

  /* 一品料理（20260830） */
  .ip-items{list-style:none;margin:0;padding:0}
  .ip-items li{
    display:flex;align-items:baseline;gap:6px 18px;padding:7px 0;
    list-style:none;list-style-type:none;
  }
  .ip-items li::marker{content:none}
  .ip-name{
    font-family:var(--serif-jp);font-weight:300;
    font-size:clamp(14px,1.8vw,16px);letter-spacing:.08em;line-height:2.1;
    color:var(--text);
  }
  .ip-price{
    font-family:var(--serif-en);font-size:14px;letter-spacing:.08em;
    color:var(--gold);white-space:nowrap;
  }
  .ip-dots{flex:1;border-bottom:1px dotted var(--hairline);transform:translateY(-5px);opacity:.5}
  @media(max-width:768px), (orientation: landscape) and (max-height: 480px){
    .ip-dots{display:none}
    .ip-items li{justify-content:space-between}
  }

  /* お飲み物（価格非掲載） */
  .carte-list--drinks .drink-group{
    padding:22px 4px 26px;border-bottom:1px solid var(--hairline-2);text-align:left;
  }
  .dg-title{
    font-family:var(--serif-jp);font-weight:400;
    font-size:clamp(15px,1.9vw,17px);letter-spacing:.22em;
    color:var(--gold);margin:0 0 12px;
  }
  .dg-items{list-style:none;margin:0;padding:0}
  /* 環境差でリストの点(マーカー)が出る対策の多重ガード */
  .course-items li,.dg-items li{list-style:none;list-style-type:none}
  .course-items li::marker,.dg-items li::marker{content:none}
  .dg-items li{
    font-family:var(--serif-jp);font-weight:300;
    font-size:clamp(13.5px,1.7vw,15px);letter-spacing:.06em;line-height:2.1;
    color:var(--text);
  }
  .dg-items--cols{columns:2;column-gap:44px}
  @media(max-width:768px), (orientation: landscape) and (max-height: 480px){
    .dg-items--cols{columns:1}
  }

  /* ヒーローはヘッダーに重ならず直下から。高さはJSが --header-offset に動的セット */
  .hero{
    margin-top:var(--header-offset,0px);
    height:calc(100vh - var(--header-offset,0px));
    height:calc(100dvh - var(--header-offset,0px));
  }


  /* ────────────────────────────────────────────
     スマホ横画面対策（20260831）
     ・スマホでは縦横どちらでも同じ見た目になるよう、vw基準の寸法をvmin基準に統一
     ・リード文は最長行(29文字)が画面短辺に必ず収まるフォントサイズへ自動調整
     ──────────────────────────────────────────── */
  @media (max-width: 768px), (orientation: landscape) and (max-height: 480px){
    .pad-y{padding:clamp(120px,18vmin,200px) 0}
    .philosophy-inner{gap:clamp(54px,7vmin,86px)}
    .story-tagline{font-size:clamp(10px,3.1vmin,13px)}
    .hero-logo img{width:min(260px,62vmin)}
    .hero-intro img{width:min(260px,62vmin)}
    .carte-head{margin-bottom:clamp(36px,5vmin,56px)}
    .carte-title{font-size:clamp(30px,4.4vmin,52px)}
    .carte-lead{
      max-width:none;
      margin:0 auto clamp(40px,5vmin,60px);
      font-size:min(17px, calc((100vmin - 44px)/31));
      letter-spacing:.05em;
    }
    .ci-name{font-size:clamp(16px,2vmin,19px)}
    .ci-desc{font-size:clamp(13px,1.6vmin,14px)}
    .course-items li{font-size:clamp(14px,1.8vmin,16px)}
    .carte-reserve-note{font-size:clamp(12.5px,1.6vmin,14px)}
    .dg-title{font-size:clamp(15px,1.9vmin,17px)}
    .dg-items li{font-size:clamp(13.5px,1.7vmin,15px)}
    .ip-name{font-size:clamp(14px,1.8vmin,16px)}
    .info-grid{gap:clamp(48px,6vmin,80px)}
    .info-grid h2{font-size:clamp(36px,5vmin,64px)}
    .links-grid{gap:clamp(14px,2.5vmin,32px);padding:clamp(44px,6vmin,72px) var(--gutter)}
    .link-card{width:clamp(132px,42vmin,180px)}
  }


  /* かすうどん: 見出し横の提供時間注記とオプション行（20260831） */
  .dg-note{
    display:inline-block;
    font-family:var(--serif-jp);font-weight:300;
    font-size:12px;letter-spacing:.08em;line-height:1.9;
    color:var(--text-dim);margin-left:16px;
  }
  .ip-items li.ip-option .ip-name{font-size:.86em;color:var(--text-mute)}
  .ip-items li.ip-option .ip-price{font-size:13px}

  /* リード文: スマホ横は固定14px＝コース品目と同サイズ。
     横画面はvminがスクロール中のブラウザUI伸縮で変動しサイズが揺れるため、固定pxで安定させる（20260901池田さん指示） */
  @media (orientation: landscape) and (max-height: 480px){
    .carte-lead{font-size:14px}
  }

  /* リード文1文目: スマホ横は1行表記（縦のみ「夜を整える」で改行・20260901池田さん指示） */
  @media (orientation: landscape) and (max-height: 480px){
    .carte-lead p:first-child br.sp{display:none}
  }