/* ============================================
   STUDY TEMPLATE — Traditional Japanese Restaurant Style
   構造・レイアウト学習用テンプレート
   ============================================ */

:root {
    /* 老舗とんかつ店の配色: 生成り地＋濃墨＋沈めた媒茶アクセント（金ピカを排す） */
    --color-bg:        #ece7db;  /* 地：象牙・生成り（温かみ） */
    --color-bg-dark:   #20211f;  /* 暗セクション（明暗リズム用） */
    --color-bg-cream:  #ece7db;
    --color-ink:       #20211f;  /* 文字：濃墨 */
    --color-ink-soft:  #6e6660;  /* 補助文字（生成りに馴染む暖色グレー） */
    --color-line:      #e0dacc;  /* ヘアライン：薄茶 */
    --color-accent:    #9b4a3a;  /* アクセント：渋い媒茶（ほぼ墨） */
    --color-gold:      #9b4a3a;
    --color-paper:     #ece7db;
    /* 暗背景の上で使う明るめアクセント（媒茶を持ち上げた色） */
    --color-accent-on-dark: #a98f6a;

    --font-serif-ja: "Yuji Syuku", "Noto Serif JP", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
    --font-sans-ja:  "Yuji Syuku", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
    --font-en:       "Cormorant Garamond", "Times New Roman", serif;

    --maxw: 1200px;
    --pad-x: clamp(20px, 4vw, 64px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* 横スクロール防止: overflow-x:hidden は他軸をautoにしてスクロールコンテナ化し
   子孫の position:sticky を無効化するため、clip を使う（他軸はvisibleのまま＝sticky維持） */
html { scroll-behavior: smooth; overflow-x: clip; }

body {
    font-family: var(--font-serif-ja);
    color: var(--color-ink);
    background: var(--color-bg);
    line-height: 1.9;
    overflow-x: clip; /* hiddenはsticky無効化の原因になるためclip（横はみ出しは防止しつつsticky維持） */
    -webkit-font-smoothing: antialiased;
}

ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { background: none; border: 0; cursor: pointer; font: inherit; color: inherit; }

/* ============ 共通フレーム（差し替え用プレースホルダー） ============ */
.frame {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(135deg, transparent 49.6%, rgba(0,0,0,.06) 49.6%, rgba(0,0,0,.06) 50.4%, transparent 50.4%),
        linear-gradient(45deg,  transparent 49.6%, rgba(0,0,0,.06) 49.6%, rgba(0,0,0,.06) 50.4%, transparent 50.4%),
        #f0efeb;
    color: var(--color-ink-soft);
    border: 1px solid var(--color-line);
    overflow: hidden;
    font-family: var(--font-en);
    letter-spacing: 0.2em;
    font-size: 12px;
}
.frame::before {
    content: attr(data-label);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    text-align: center;
    color: rgba(22, 22, 22, .55);
}
.frame::after {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px dashed rgba(22, 22, 22, .2);
    pointer-events: none;
}

.frame-square   { aspect-ratio: 1 / 1; }
.frame-portrait { aspect-ratio: 3 / 4; }
.frame-wide     { aspect-ratio: 16 / 9; }
.frame-hero     { position: absolute; inset: 0; aspect-ratio: auto; border: 0; }
.frame-title    { aspect-ratio: 5 / 1; min-height: 80px; background-color: transparent; border-color: rgba(255,255,255,.4); color: rgba(255,255,255,.7); }
.frame-title::after { border-color: rgba(255,255,255,.25); }
.frame-h-logo   { width: 72px; height: 72px; border-radius: 50%; }
.frame-f-logo   { width: 140px; height: 60px; }
.frame-icon     { width: 40px; height: 40px; border-radius: 50%; }
.frame-map      { aspect-ratio: 16 / 7; width: 100%; }

/* ============ ローディングカーテン ============ */
#loadingBar, #loadingBar02, #loadingBar03, #loadingBar04 {
    position: fixed;
    z-index: 1000;
    background: var(--color-bg-dark);
    pointer-events: none;
}
#loadingBar  { top: 0; left: 0; width: 50%; height: 50%; }
#loadingBar02{ top: 0; right: 0; width: 50%; height: 50%; }
#loadingBar03{ bottom: 0; left: 0; width: 50%; height: 50%; }
#loadingBar04{ bottom: 0; right: 0; width: 50%; height: 50%; }

body.loaded #loadingBar  { transform: translate(-100%, -100%); transition: transform 1.1s cubic-bezier(.77,0,.18,1); }
body.loaded #loadingBar02{ transform: translate( 100%, -100%); transition: transform 1.1s cubic-bezier(.77,0,.18,1); }
body.loaded #loadingBar03{ transform: translate(-100%,  100%); transition: transform 1.1s cubic-bezier(.77,0,.18,1); }
body.loaded #loadingBar04{ transform: translate( 100%,  100%); transition: transform 1.1s cubic-bezier(.77,0,.18,1); }

#pro_area {
    position: fixed; inset: 0;
    background: var(--color-bg);
    z-index: 999;
    pointer-events: none;
    transition: opacity .8s ease .9s;
}
body.loaded #pro_area { opacity: 0; }

/* ============ ヘッダー ============ */
#g_header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px var(--pad-x);
    /* 最上部は写真の上に透過で重ねる（生成りベタ帯は廃止） */
    background: transparent;
    border-bottom: 1px solid rgba(250, 250, 247, 0);
    transition: background .4s ease, padding .3s ease, border-color .4s ease;
}
/* 一定量スクロールしたら生成り背景＋ヘアライン下線（影は使わない） */
#g_header.is-scrolled {
    padding: 10px var(--pad-x);
    background: rgba(236, 231, 219, .98);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(22, 22, 22, .08);
}

#h_logo {
    flex-shrink: 0;
    font-family: var(--font-serif-ja);
    font-weight: 500;
    font-size: 22px;
    letter-spacing: 0.22em;
    text-indent: 0.22em;
    /* 最上部は写真上なので白系。スクロール後は墨へ */
    color: #fafaf7;
    text-shadow: 0 1px 6px rgba(22, 22, 22, .3);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .8s ease, transform .8s ease, color .4s ease, text-shadow .4s ease;
}
#h_logo.active { opacity: 1; transform: translateY(0); }
#g_header.is-scrolled #h_logo { color: var(--color-ink); text-shadow: none; }

#h_nav_in {
    display: flex;
    gap: clamp(16px, 2.5vw, 40px);
}
.h_list_in {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 4px;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .6s ease, transform .6s ease;
    position: relative;
}
.h_list_in.active { opacity: 1; transform: translateY(0); }
#h_nav_in li:nth-child(1) .h_list_in { transition-delay: 0.1s; }
#h_nav_in li:nth-child(2) .h_list_in { transition-delay: 0.18s; }
#h_nav_in li:nth-child(3) .h_list_in { transition-delay: 0.26s; }
#h_nav_in li:nth-child(4) .h_list_in { transition-delay: 0.34s; }
#h_nav_in li:nth-child(5) .h_list_in { transition-delay: 0.42s; }
#h_nav_in li:nth-child(6) .h_list_in { transition-delay: 0.50s; }

.h_list_in .en {
    font-family: var(--font-en);
    font-size: 12px;
    letter-spacing: 0.22em;
    color: rgba(250, 250, 247, .8);
    text-shadow: 0 1px 5px rgba(22, 22, 22, .3);
    transition: color .4s ease, text-shadow .4s ease;
}
.h_list_in .ja {
    font-family: var(--font-serif-ja);
    font-size: 11px;
    letter-spacing: 0.1em;
    color: #fafaf7;
    text-shadow: 0 1px 5px rgba(22, 22, 22, .3);
    transition: color .4s ease, text-shadow .4s ease;
}
/* スクロール後は墨系に戻す */
#g_header.is-scrolled .h_list_in .en { color: var(--color-ink-soft); text-shadow: none; }
#g_header.is-scrolled .h_list_in .ja { color: var(--color-ink); text-shadow: none; }
.h_list_in::after {
    content: "";
    position: absolute;
    bottom: 0; left: 50%;
    width: 0; height: 1px;
    background: var(--color-accent);
    transition: width .3s ease, left .3s ease;
}
.h_list_in:hover::after { width: 100%; left: 0; }

/* ヘッダー右側のアクション群（電話ボタン＋ハンバーガー） */
.h_actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* 電話ボタン（予約は電話のみ＝メイン導線） */
.h_reserve {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    background: var(--color-ink);
    color: var(--color-bg);
    border: 1px solid var(--color-ink);
    transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.h_reserve:hover { background: var(--color-accent); border-color: var(--color-accent); }
.h_reserve .tel-ico { font-size: 14px; line-height: 1; }
.h_reserve .tel-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.3; }
.h_reserve .en { font-family: var(--font-en); font-size: 10px; letter-spacing: 0.22em; }
.h_reserve .ja { font-size: 11px; letter-spacing: 0.1em; }

/* ハンバーガーボタン（SPのみ表示） */
.h_burger {
    display: none;
    width: 40px; height: 40px;
    position: relative;
    flex-shrink: 0;
}
.h_burger span {
    position: absolute;
    left: 9px; right: 9px;
    height: 1px;
    background: var(--color-ink);
    transition: transform .35s cubic-bezier(.22,1,.36,1), opacity .25s ease;
}
.h_burger span:nth-child(1) { top: 13px; }
.h_burger span:nth-child(2) { top: 20px; }
.h_burger span:nth-child(3) { top: 27px; }
.h_burger.is-active span:nth-child(1) { top: 20px; transform: rotate(45deg); }
.h_burger.is-active span:nth-child(2) { opacity: 0; }
.h_burger.is-active span:nth-child(3) { top: 20px; transform: rotate(-45deg); }
/* ヒーロー上（透過ヘッダー）ではバー白、スクロール後＆サブページは墨 */
.h_burger span { background: #fafaf7; }
#g_header.is-scrolled .h_burger span,
body.subpage .h_burger span { background: var(--color-ink); }

/* ============ ハンバーガー ナビパネル ============ */
.nav-panel {
    position: fixed;
    inset: 0;
    z-index: 900; /* ローダー黒幕(1000)より下・ヒーロー/オーバーラップより上 */
    visibility: hidden;
    pointer-events: none;
}
.nav-panel.is-open { visibility: visible; pointer-events: auto; }
.nav-panel-overlay {
    position: absolute;
    inset: 0;
    background: rgba(22, 22, 22, .45);
    opacity: 0;
    transition: opacity .4s ease;
}
.nav-panel.is-open .nav-panel-overlay { opacity: 1; }
.nav-panel-inner {
    position: absolute;
    top: 0; right: 0;
    height: 100%;
    width: min(82vw, 360px);
    background: var(--color-bg);
    border-left: 1px solid var(--color-line);
    padding: clamp(72px, 12vh, 100px) 32px 40px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transform: translateX(100%);
    transition: transform .45s cubic-bezier(.22,1,.36,1);
    overscroll-behavior: contain; /* 背後スクロールの連鎖を抑制（sticky破壊なし） */
    overflow-y: auto;
}
.nav-panel.is-open .nav-panel-inner { transform: none; }
.nav-panel-close {
    position: absolute;
    top: 22px; right: 26px;
    font-family: var(--font-serif-ja);
    font-size: 28px;
    line-height: 1;
    color: var(--color-ink-soft);
    transition: color .3s ease;
}
.nav-panel-close:hover { color: var(--color-accent); }
.nav-panel-list { display: flex; flex-direction: column; }
.nav-panel-list li { border-bottom: 1px solid var(--color-line); }
.nav-panel-list a {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 18px 4px;
    transition: color .3s ease;
}
.nav-panel-list a:hover { color: var(--color-accent); }
.nav-panel-list .ja {
    font-family: var(--font-serif-ja);
    font-size: 16px;
    letter-spacing: 0.12em;
}
.nav-panel-list .en {
    font-family: var(--font-en);
    font-size: 11px;
    letter-spacing: 0.2em;
    color: var(--color-accent);
}
.nav-panel-tel {
    margin-top: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    background: var(--color-ink);
    color: var(--color-bg);
    font-family: var(--font-serif-ja);
    font-size: 14px;
    letter-spacing: 0.08em;
    transition: background .3s ease;
}
.nav-panel-tel:hover { background: var(--color-accent); }
.nav-panel-tel .tel-ico { font-size: 15px; }

/* ============ HERO ============ */
#mv_area {
    /* オーバーラップスクロール: ヒーローを画面に貼り付け、次の層が覆う */
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh; /* モバイルのアドレスバー対策（非対応ブラウザは上の100vhにフォールバック） */
    min-height: 600px;
    overflow: hidden;
    z-index: 1; /* ローダー黒幕(z-index:1000)より十分低く保つ */
    background: var(--color-bg); /* PC時、写真の左右を生成りで埋める */
}

/* ヒーローの上にせり上がって覆う不透明コンテンツ層 */
#content_cover {
    position: relative;
    z-index: 2; /* ヒーロー(1)より手前。ローダー(1000)より低い */
    background: var(--color-bg); /* 必ず不透明（生成りベタ）。透けてヒーローと重ならない */
    /* せり上がる上端を1pxヘアラインで自然に区切る（影は使わない） */
    border-top: 1px solid var(--color-line);
}
/* こだわり（最初の被さり層）も他セクションと同じ右上角丸で、ヒーローに乗る。
   overflow:hidden で内側のこだわりを角丸にトリミング（stickyヒーローは#content_cover外なので無影響） */
.home #content_cover {
    border-top-right-radius: clamp(90px, 16vw, 170px);
    overflow: hidden;
}
.mv-video {
    position: absolute; inset: 0;
    background-image: url(../images/hero-tontei.jpg);
    background-size: cover;              /* SP主軸: 縦長写真を全画面に */
    background-position: center bottom;  /* 建物を下に見せる */
    background-repeat: no-repeat;
}
.mv-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
    /* 肩書を中央やや上、空の見やすい部分に置く */
    padding: clamp(104px, 17vh, 180px) var(--pad-x) 0;
    text-align: center;
    /* 黒ベタは使わない。可読性確保はごく薄い上部グラデのみ */
    background: linear-gradient(180deg, rgba(22,22,22,.16) 0%, rgba(22,22,22,0) 34%);
    color: #fafaf7;
    z-index: 3;
}
.mv-tagline {
    font-family: var(--font-serif-ja);
    font-weight: 400;
    font-size: clamp(13px, 1.6vw, 16px);
    letter-spacing: 0.3em;
    color: var(--color-ink);
    /* 明るい空の上で飛ばないよう、生成りの淡いハロー＋墨の影の二層 */
    text-shadow: 0 1px 2px rgba(250, 250, 247, .7), 0 1px 8px rgba(22, 22, 22, .18);
}
.mv-title { width: min(560px, 80vw); }
.mv-copy {
    font-family: var(--font-serif-ja);
    font-size: clamp(14px, 1.6vw, 18px);
    letter-spacing: 0.18em;
    line-height: 2.4;
}
.mv-copy span { display: block; }

.mv-scroll {
    position: absolute;
    bottom: 40px; left: 50%;
    transform: translateX(-50%);
    z-index: 4; /* 光・写真より前面に */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    color: #fafaf7;
}
.mv-scroll-en {
    font-family: var(--font-en);
    font-style: italic;
    font-size: 11px;
    letter-spacing: 0.45em;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    padding-left: 2px;
    color: #fafaf7;
    text-shadow: 0 1px 6px rgba(22, 22, 22, .45); /* 建物の濃色に被っても読める */
}
.mv-scroll-line {
    width: 1px; height: 72px;
    background: rgba(250, 250, 247, .55);
    position: relative;
    overflow: hidden;
}
.mv-scroll-line::after {
    content: "";
    position: absolute;
    top: -72px; left: 0;
    width: 1px; height: 72px;
    background: var(--color-accent);
    animation: scroll-down 2.6s cubic-bezier(.65,.04,.35,1) infinite;
}
@keyframes scroll-down {
    0%   { top: -72px; }
    60%  { top: 72px; }
    100% { top: 72px; }
}

/* HERO 写真を動画風に：Ken Burns（ゆっくりズーム＋建物へパン） */
.mv-video {
    z-index: 1;
    animation: hero-kenburns 20s ease-in-out infinite alternate;
    transform-origin: 50% 72%; /* 建物（下寄り）を中心にしっかり寄る */
    will-change: transform;
}
@keyframes hero-kenburns {
    0%   { transform: scale(1.02) translate3d(0, 0, 0); }
    100% { transform: scale(1.18) translate3d(0, -3.5%, 0); } /* 下＝建物方向へ大きく寄る */
}

/* HERO 光のゆらぎ（木漏れ日風）。写真左上の光線方向に合わせる */
.mv-light {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    mix-blend-mode: screen;
    will-change: opacity, transform;
    background:
        radial-gradient(58% 52% at 20% 16%, rgba(255, 248, 224, .55) 0%, rgba(255, 248, 224, 0) 62%),
        linear-gradient(135deg, rgba(255, 250, 230, .28) 0%, rgba(255, 250, 230, 0) 44%);
    animation: hero-light 8s ease-in-out infinite alternate;
}
@keyframes hero-light {
    0%   { opacity: .15; transform: translate3d(-3%, -2%, 0) scale(1.0); }
    100% { opacity: .5;  transform: translate3d(3%,  2%, 0)  scale(1.1); }
}

/* アクセシビリティ: 動きを減らす設定では両方とも停止 */
@media (prefers-reduced-motion: reduce) {
    .mv-video { animation: none; }
    .mv-light { animation: none; opacity: .7; }
}

/* ============ セクション共通 ============ */
.sec {
    padding: clamp(128px, 12vw, 176px) var(--pad-x);
    max-width: var(--maxw);
    margin: 0 auto;
}
.sec-head {
    text-align: center;
    margin-bottom: clamp(48px, 7vw, 96px);
}
.sec-en {
    font-family: var(--font-en);
    font-size: clamp(14px, 1.4vw, 16px);
    letter-spacing: 0.4em;
    color: var(--color-accent);
    margin-bottom: 16px;
    font-style: italic;
}
.sec-ja {
    font-family: var(--font-serif-ja);
    font-weight: 500;
    font-size: clamp(28px, 4vw, 44px);
    letter-spacing: 0.2em;
    margin-bottom: 24px;
    position: relative;
    display: inline-block;
    padding: 0 32px;
}
.sec-ja::before, .sec-ja::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 40px; height: 1px;
    background: var(--color-line);
}
.sec-ja::before { right: 100%; }
.sec-ja::after  { left:  100%; }
/* 装飾の菱形ドット（線の中央付近） */
.sec-head::before {
    content: "";
    display: block;
    width: 6px; height: 6px;
    margin: 0 auto 18px;
    background: var(--color-accent);
    transform: rotate(45deg);
}
.sec-lead {
    font-size: 15px;
    line-height: 2.2;
    letter-spacing: 0.08em;
    color: var(--color-ink-soft);
    /* 文章は左揃え（不自然な改行を解消）。ブロック自体は max-width＋auto で中央配置 */
    text-align: left;
    max-width: 30em;
    margin-left: auto;
    margin-right: auto;
}

/* ライト背景セクションの見出し色反転 */
.sec-head-light .sec-ja { color: var(--color-bg); }
.sec-head-light .sec-lead { color: rgba(236, 231, 219, .8); }
/* 暗背景の上ではアクセント（媒茶）が沈むので、明るめアクセントに */
.sec-head-light .sec-en { color: var(--color-accent-on-dark); }

/* ============ CONCEPT ============ */
.sec-about { background: var(--color-bg); position: relative; }
.about-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(24px, 3vw, 48px);
    margin-bottom: clamp(48px, 6vw, 80px);
}
.about-item {
    text-align: center;
    padding: 16px;
}
.about-num {
    font-family: var(--font-en);
    font-style: italic;
    font-size: 14px;
    letter-spacing: 0.3em;
    color: var(--color-gold);
    margin-bottom: 16px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.about-num::before, .about-num::after {
    content: "";
    width: 24px; height: 1px;
    background: var(--color-gold);
    opacity: .5;
}
.about-jp {
    font-family: var(--font-serif-ja);
    font-weight: 500;
    font-size: clamp(20px, 2vw, 26px);
    letter-spacing: 0.2em;
    margin-bottom: 6px;
}
.about-en {
    font-family: var(--font-en);
    font-style: italic;
    font-size: 12px;
    letter-spacing: 0.3em;
    color: var(--color-ink-soft);
    margin-bottom: 24px;
}
.about-frame { margin-bottom: 24px; }
.about-body {
    font-size: 14px;
    line-height: 2;
    letter-spacing: 0.06em;
    color: var(--color-ink-soft);
}
.about-video { margin-top: 24px; }

/* ============ HOW TO ============ */
.sec-howto {
    background: var(--color-bg-dark);
    max-width: none;
    color: var(--color-bg);
    padding-left: var(--pad-x);
    padding-right: var(--pad-x);
    position: relative;
}
.sec-howto > .sec-head, .sec-howto > .howto-list {
    max-width: var(--maxw);
    margin-left: auto;
    margin-right: auto;
}
.howto-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(16px, 2vw, 32px);
    position: relative;
}
/* 4ステップを横に貫く点線 */
.howto-list::before {
    content: "";
    position: absolute;
    top: 18px; left: 6%; right: 6%;
    height: 1px;
    background-image: linear-gradient(to right, rgba(169,143,106,.4) 0, rgba(169,143,106,.4) 4px, transparent 4px, transparent 10px);
    background-size: 10px 1px;
    background-repeat: repeat-x;
    pointer-events: none;
}
.howto-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.howto-step {
    font-family: var(--font-en);
    font-size: 12px;
    letter-spacing: 0.3em;
    color: var(--color-accent-on-dark);
    margin-bottom: 16px;
}
.howto-frame {
    width: 100%;
    margin-bottom: 20px;
    background:
        linear-gradient(135deg, transparent 49.6%, rgba(255,255,255,.06) 49.6%, rgba(255,255,255,.06) 50.4%, transparent 50.4%),
        linear-gradient(45deg,  transparent 49.6%, rgba(255,255,255,.06) 49.6%, rgba(255,255,255,.06) 50.4%, transparent 50.4%),
        #1f1f1f;
    border-color: rgba(250, 250, 247, .25);
    color: rgba(250, 250, 247, .55);
}
.howto-frame::before { color: rgba(250, 250, 247, .55); }
.howto-frame::after { border-color: rgba(250, 250, 247, .2); }
.howto-jp {
    font-family: var(--font-serif-ja);
    font-weight: 500;
    font-size: 18px;
    letter-spacing: 0.2em;
    margin-bottom: 8px;
}
.howto-body {
    font-size: 13px;
    line-height: 1.9;
    letter-spacing: 0.06em;
    color: rgba(250, 250, 247, .7);
}

/* ============ MENU ============ */
.sec-menu { background: var(--color-bg); position: relative; }
.menu-cat {
    text-align: center;
    /* カテゴリの塊を視覚的に区切る：上にヘアライン＋たっぷり余白 */
    margin: 0 0 clamp(24px, 3vw, 40px);
    padding-top: clamp(56px, 7vw, 88px);
    border-top: 1px solid var(--color-line);
    position: relative;
    scroll-margin-top: 116px; /* sticky ヘッダー＋タブ分のアンカーオフセット */
}
.menu-cat:first-of-type { border-top: 0; padding-top: 0; }
.menu-cat::after {
    content: "";
    display: block;
    width: 32px; height: 1px;
    background: var(--color-accent);
    margin: 16px auto 0;
}
.menu-cat-ja {
    font-family: var(--font-serif-ja);
    font-weight: 500;
    font-size: clamp(22px, 2.4vw, 30px);
    letter-spacing: 0.3em;
    margin-bottom: 6px;
}
.menu-cat-en {
    font-family: var(--font-en);
    font-style: italic;
    font-size: 13px;
    letter-spacing: 0.3em;
    color: var(--color-gold);
}
.menu-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(24px, 3vw, 40px);
}
/* 看板6品（PC3列・タブ2列・SP1列） */
.menu-grid-6 { grid-template-columns: repeat(3, 1fr); }

/* お品書きをすべて見る → ボタン */
.menu-more {
    margin-top: clamp(40px, 5vw, 64px);
    text-align: center;
}
.btn-outline {
    display: inline-block;
    font-family: var(--font-serif-ja);
    font-size: 14px;
    letter-spacing: 0.18em;
    color: var(--color-accent);
    padding: 16px 40px;
    border: 1px solid var(--color-accent);
    transition: background .4s ease, color .4s ease;
}
.btn-outline:hover {
    background: var(--color-accent);
    color: var(--color-bg);
}
.menu-card {
    text-align: center;
    background: var(--color-paper);
    padding: 24px 20px 28px;
    border: 1px solid var(--color-line);
    transition: transform .5s cubic-bezier(.22,1,.36,1), border-color .5s ease;
    position: relative;
}
/* カードの四隅にコーナーアクセント */
.menu-card::before, .menu-card::after {
    content: "";
    position: absolute;
    width: 10px; height: 10px;
    border: 1px solid var(--color-gold);
    opacity: 0;
    transition: opacity .4s ease;
}
.menu-card::before { top: 6px;    left: 6px;    border-right: 0; border-bottom: 0; }
.menu-card::after  { bottom: 6px; right: 6px;   border-left: 0;  border-top: 0; }
.menu-card:hover {
    transform: translateY(-6px);
    border-color: rgba(154, 123, 79, .55);
}
.menu-card:hover::before, .menu-card:hover::after { opacity: 1; }
.menu-frame { margin-bottom: 20px; }
.menu-ja {
    font-family: var(--font-serif-ja);
    font-weight: 500;
    font-size: 17px;
    letter-spacing: 0.18em;
    margin-bottom: 4px;
}
.menu-en {
    font-family: var(--font-en);
    font-style: italic;
    font-size: 11px;
    letter-spacing: 0.25em;
    color: var(--color-ink-soft);
    margin-bottom: 12px;
}
.menu-price {
    font-family: var(--font-en);
    font-size: 18px;
    letter-spacing: 0.15em;
    color: var(--color-accent);
}
.menu-tax {
    font-family: var(--font-serif-ja);
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--color-ink-soft);
    margin-left: 4px;
}

/* 実画像（base64回収分）の差し込み用 */
.menu-frame {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: 1px solid var(--color-line);
}
.menu-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.shop-frame {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid var(--color-line);
}
.shop-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 定食共通の但し書き */
.menu-note {
    margin-top: 16px;
    font-size: 13px;
    line-height: 2;
    letter-spacing: 0.06em;
    color: var(--color-ink-soft);
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}
.menu-note-all {
    text-align: center;
    margin-top: clamp(40px, 5vw, 64px);
    padding-top: clamp(24px, 3vw, 32px);
    border-top: 1px solid var(--color-line);
}

/* テキスト品書き（名前＋価格の2列・ヘアライン罫） */
.menu-text-list {
    max-width: 820px;
    margin: 0 auto;
    border-top: 1px solid var(--color-line);
}
.mt-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 16px;
    padding: 18px 4px;
    border-bottom: 1px solid var(--color-line);
}
.mt-desc {
    flex: 1 0 100%;
    margin-top: 6px;
    font-size: 12.5px;
    line-height: 1.8;
    letter-spacing: 0.04em;
    color: var(--color-ink-soft);
}
.mt-osusume {
    display: inline-block;
    margin-left: 10px;
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--color-accent);
    vertical-align: middle;
    white-space: nowrap;
}
.mt-osusume::before { content: "●"; font-size: 7px; vertical-align: 2px; margin-right: 4px; }
.mt-name {
    font-family: var(--font-serif-ja);
    font-size: 15px;
    letter-spacing: 0.06em;
    color: var(--color-ink);
}
.mt-name small {
    display: block;
    font-size: 11.5px;
    letter-spacing: 0.04em;
    color: var(--color-ink-soft);
    margin-top: 3px;
}
.mt-price {
    flex-shrink: 0;
    font-family: var(--font-en);
    font-size: 16px;
    letter-spacing: 0.08em;
    color: var(--color-accent);
    white-space: nowrap;
}
/* とんかつ定食だけ：縦書き列（品名を縦・右→左、価格は横） */
.menu-vertical {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 36px 26px;
    max-width: 720px;
    margin: 0 auto;
    border-top: 0;
}
.menu-vertical .mt-row {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    padding: 0;
    border-bottom: 0;
}
.menu-vertical .mt-name {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 18px;
    letter-spacing: 0.12em;
    line-height: 1;
}

/* お飲み物（ラベル＋内容の定義リスト） */
.menu-drink {
    max-width: 820px;
    margin: 0 auto;
    border-top: 1px solid var(--color-line);
}
.md-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 12px 24px;
    padding: 16px 4px;
    border-bottom: 1px solid var(--color-line);
}
.md-row dt {
    font-family: var(--font-serif-ja);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--color-ink);
}
.md-row dd {
    font-size: 13px;
    line-height: 1.9;
    letter-spacing: 0.04em;
    color: var(--color-ink-soft);
}
@media (max-width: 720px) {
    .md-row { grid-template-columns: 1fr; gap: 4px; }
    .md-row dt { color: var(--color-accent); }
}

/* ============ SHOP ============ */
/* 店舗情報：締めの一枚として墨背景に（明暗リズム回復＋カーブが映える）。
   見出しのみ反転。カード自体は生成りパネルのままなので内部テキストは可読維持 */
.sec-shop { background: var(--color-bg); }
.shop-list {
    display: flex;
    flex-direction: column;
    gap: clamp(56px, 7vw, 88px);
}
.shop-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 4vw, 56px);
    align-items: start;
    background: var(--color-paper);
    padding: clamp(20px, 3vw, 40px);
    border: 1px solid var(--color-line);
}
.shop-info { display: flex; flex-direction: column; gap: 20px; }
.shop-jp {
    font-family: var(--font-serif-ja);
    font-weight: 500;
    font-size: clamp(22px, 2.4vw, 28px);
    letter-spacing: 0.25em;
}
.shop-en {
    font-family: var(--font-en);
    font-style: italic;
    font-size: 12px;
    letter-spacing: 0.3em;
    color: var(--color-gold);
    margin-top: -12px;
}
.shop-dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 8px 20px;
    font-size: 13px;
    line-height: 1.9;
}
.shop-dl dt {
    font-family: var(--font-serif-ja);
    color: var(--color-ink-soft);
    letter-spacing: 0.15em;
    border-right: 1px solid var(--color-line);
    padding-right: 20px;
}

/* Googleマップ埋め込み（レスポンシブ・APIキー不要） */
.shop-map {
    margin-top: 24px;
    aspect-ratio: 16 / 10;
    width: 100%;
    border: 1px solid var(--color-line);
    overflow: hidden;
}
.shop-map iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
}
/* 店舗情報：電話を独立ボタン化 */
.shop-tel-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding: 16px 32px;
    background: var(--color-accent);
    color: var(--color-bg);
    font-family: var(--font-serif-ja);
    font-size: 17px;
    letter-spacing: 0.08em;
    border-radius: 4px;
    transition: opacity .3s ease;
}
.shop-tel-btn:hover { opacity: .85; }
.shop-tel-btn .tel-num { font-family: var(--font-en); letter-spacing: 0.1em; }

/* ============ わだ福式 セクションカーブ（右上巨大角丸＋負マージン被せ） ============ */
/* トップページ専用。被さる側セクションの右上を大きく丸め、前セクションへ重ねる。
   左辺は水平のまま、右側だけが大きな四分円で流れ落ちる。
   ローダー/ヒーロー/オーバーラップ(content_cover/sticky)は不変 */
.home .sec-howto,
.home .sec-menu,
.home .sec-shop {
    /* 被せ量(margin)と半径を一致させると、ノッチが前セクションで完全に裏打ちされ
       「ちょこん」とした出っ張りが出ない。値は前セクションの下パディング内に収める */
    border-top-right-radius: clamp(90px, 16vw, 170px);
    margin-top: clamp(-170px, -16vw, -90px);
    position: relative;
}
/* 後のセクションほど手前に重ねる（丸い上辺が前セクションに被さる） */
.home .sec-howto { z-index: 3; }
.home .sec-menu  { z-index: 4; }
.home .sec-shop  { z-index: 5; }

/* カーブを画面端まで届かせるため、menu / shop も全幅化（内側は max-width 中央寄せ） */
.home .sec-menu,
.home .sec-shop {
    max-width: none;
}
.home .sec-menu > .sec-head,
.home .sec-menu > .menu-grid,
.home .sec-menu > .menu-more,
.home .sec-shop > .sec-head,
.home .sec-shop > .shop-list {
    max-width: var(--maxw);
    margin-left: auto;
    margin-right: auto;
}

/* ============ FOOTER ============ */
#g_footer {
    background: var(--color-bg-cream);
    text-align: center;
    padding: clamp(56px, 7vw, 80px) var(--pad-x) 40px;
}
.ft-logo { margin: 0 auto 32px; }
.ft-nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(16px, 3vw, 40px);
    margin-bottom: 32px;
    font-family: var(--font-serif-ja);
    font-size: 13px;
    letter-spacing: 0.18em;
}
.ft-nav a { transition: color .3s ease; }
.ft-nav a:hover { color: var(--color-accent); }
.ft-sns {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 40px;
}
.ft-copy {
    font-family: var(--font-en);
    font-size: 11px;
    letter-spacing: 0.3em;
    color: var(--color-ink-soft);
}

/* ============ サブページ（menu.html等） ============ */
/* ヒーローが無いので、ヘッダーは最初から生成り背景＋墨文字 */
body.subpage #g_header {
    background: rgba(236, 231, 219, .98);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(22, 22, 22, .08);
}
body.subpage #h_logo { color: var(--color-ink); text-shadow: none; }
body.subpage .h_list_in .en { color: var(--color-ink-soft); text-shadow: none; }
body.subpage .h_list_in .ja { color: var(--color-ink); text-shadow: none; }
/* ローダーJSを使わないので、ロゴ・ナビは即表示にする */
body.subpage #h_logo,
body.subpage .h_list_in { opacity: 1; transform: none; }

/* カテゴリタブ（追従ナビ・横スクロール可） */
.menu-tabs {
    position: sticky;
    top: 54px; /* 固定ヘッダーの直下に貼り付く */
    z-index: 40; /* ヘッダー(50)より低く保つ */
    background: rgba(236, 231, 219, .98);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--color-line);
    margin: 0 calc(-1 * var(--pad-x)) clamp(40px, 5vw, 64px);
}
.menu-tabs ul {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    padding: 10px var(--pad-x);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.menu-tabs ul::-webkit-scrollbar { display: none; }
.menu-tabs a {
    display: block;
    white-space: nowrap;
    font-family: var(--font-serif-ja);
    font-size: 13px;
    letter-spacing: 0.06em;
    color: var(--color-ink-soft);
    padding: 8px 14px;
    border-bottom: 2px solid transparent;
    transition: color .3s ease, border-color .3s ease;
}
.menu-tabs a:hover { color: var(--color-ink); }
.menu-tabs a.is-active {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

/* ============ Fade-in (scroll-triggered) ============ */
.fade-init {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity .9s ease, transform .9s cubic-bezier(.22,1,.36,1);
}
.fade-init[data-fade="left"]  { transform: translateX(-40px); }
.fade-init[data-fade="right"] { transform: translateX(40px); }
.fade-init.is-visible { opacity: 1; transform: none; }

/* PC（768px〜）: 縦長写真は中央寄せ・左右は生成りで埋める */
@media (min-width: 768px) {
    .mv-video {
        background-size: contain;
        background-position: center bottom;
    }
}

/* ============ レスポンシブ ============ */
@media (max-width: 960px) {
    .about-grid    { grid-template-columns: 1fr; }
    .howto-list    { grid-template-columns: repeat(2, 1fr); }
    .menu-grid     { grid-template-columns: repeat(2, 1fr); }
    .shop-card     { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    #h_nav { display: none; }
    .h_burger { display: block; }
    #g_header { padding: 12px var(--pad-x); }
    .h_reserve { padding: 8px 12px; }
    .h_reserve .en, .h_reserve .ja { font-size: 10px; }

    .mv-copy { line-height: 2.2; font-size: 13px; }
    .sec-ja::before, .sec-ja::after { width: 16px; }

    .menu-grid  { grid-template-columns: 1fr; }
    .howto-list { grid-template-columns: 1fr; }
}

/* ============================================================
   差し色（弁柄×金茶）— トップページ限定・追加スタイルのみ
   既存のid/class/プロパティ/レイアウト/カーブ/ローダー/ヘッダーは不変
   使用色: 弁柄 #9b4a3a / 金茶 #b08d57 / 墨 #20211f
   ============================================================ */
/* 見出し上の英字小ラベル（明セクションのみ。暗セクションは可読性のため既存色を維持） */
.home .sec-head:not(.sec-head-light) .sec-en {
    color: #9b4a3a;
    letter-spacing: 0.45em;
}
/* 見出し直下に金茶の細い区切り装飾（中央寄せ48px） */
.home .sec-head::after {
    content: "";
    display: block;
    width: 48px;
    height: 1px;
    background: #b08d57;
    margin: 22px auto 0;
}
/* 看板6品の価格を弁柄＋やや太字で引き締める */
.home .menu-price {
    color: #9b4a3a;
    font-weight: 500;
}
/* 電話／予約ボタン：弁柄背景＋白文字。ホバーは墨で沈める */
.home .h_reserve {
    background: #9b4a3a;
    border-color: #9b4a3a;
    color: #fff;
}
.home .h_reserve:hover {
    background: #20211f;
    border-color: #20211f;
}
.home .nav-panel-tel {
    background: #9b4a3a;
    color: #fff;
}
.home .nav-panel-tel:hover {
    background: #20211f;
}
/* 「全てのメニューを見る」：透明背景＋弁柄文字＋弁柄縁取り */
.home .btn-outline {
    background: transparent;
    color: #9b4a3a;
    border-color: #9b4a3a;
}