/* ==============================================
   博多屋 — スタイルシート（食堂テイスト版）

   【カスタマイズガイド】
   :root {} 内の変数を変えるだけで
   サイト全体の色・フォントを一括変更できます。
   ============================================== */


/* ==============================================
   1. CSS 変数（カラーパレット・フォント）
   ============================================== */
:root {
    /* --- 背景色 --- */
    --bg-main:    #F7EDD8;   /* メイン背景（温かいクリーム） */
    --bg-section: #F0E2C0;   /* セクション背景（ゴールデンクリーム） */
    --bg-card:    #FBF5EC;   /* カード背景（アイボリー） */
    --bg-dark:    #2E190A;   /* フッター・濃い部分 */

    /* --- テキスト色 --- */
    --text-main:  #231208;   /* メインテキスト（濃い茶） */
    --text-muted: #8A6A4E;   /* サブテキスト（薄い茶） */
    --text-light: #F5EDD8;   /* 明るいテキスト（暗背景上で使用） */

    /* --- アクセントカラー --- */
    --red:        #BE2F1C;   /* 赤（メインアクセント・日本の食堂っぽい赤） */
    --red-dark:   #962215;   /* 赤（ホバー時） */
    --amber:      #C8801E;   /* 琥珀色（サブアクセント） */

    /* --- ボーダー・シャドウ --- */
    --border:       rgba(160, 100, 50, 0.22);
    --border-strong: rgba(160, 100, 50, 0.50);
    /* 近接シャドウ＋遠方シャドウの2層で立体感を出す（はっきり分かる強さに） */
    --shadow-sm:  0 2px 3px rgba(40, 20, 5, 0.22), 0 10px 20px rgba(90, 45, 15, 0.18);
    --shadow-md:  0 4px 10px rgba(40, 20, 5, 0.26), 0 26px 50px rgba(90, 45, 15, 0.28);

    /* --- フォント --- */
    --font-serif: 'Noto Serif JP', 'ヒラギノ明朝 ProN', serif;
    --font-sans:  'Noto Sans JP', 'ヒラギノ角ゴ ProN', sans-serif;

    /* --- レイアウト --- */
    --header-h:   60px;
    --max-width:  700px;
    --section-py: 72px;

    /* --- 角丸 --- */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 18px;

    /* --- 暖簾・木看板アクセント --- */
    --navy: #223354;
    --wood-light: #F5E9CC;
    --wood-mid:   #EDDCB2;
    --wood-dark:  #D4B27E;

    /* --- アニメーション --- */
    --tr-base:   0.25s ease;
    --tr-slow:   0.5s ease;
    --tr-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* ==============================================
   2. リセット・ベース
   ============================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    background-color: #A07248;
    background-image:
        repeating-linear-gradient(
            0.3deg,
            rgba(0,0,0,0)           0px,  rgba(0,0,0,0)           6px,
            rgba(0,0,0,0.055)       6px,  rgba(0,0,0,0.055)       7px,
            rgba(0,0,0,0)           7px,  rgba(0,0,0,0)          16px,
            rgba(255,255,255,0.04) 16px,  rgba(255,255,255,0.04) 17px,
            rgba(0,0,0,0)          17px,  rgba(0,0,0,0)          28px,
            rgba(0,0,0,0.04)       28px,  rgba(0,0,0,0.04)       29px
        ),
        repeating-linear-gradient(
            177deg,
            rgba(0,0,0,0)      0px,
            rgba(0,0,0,0.03)  55px,
            rgba(0,0,0,0)    110px
        ),
        linear-gradient(
            180deg,
            #B07B52 0%,  #8D6038 18%,
            #A07248 35%, #82573A 55%,
            #A27148 72%, #8C6040 88%,
            #9E7046 100%
        );
    color: var(--text-main);
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* menu.html 専用：木目テクスチャ背景（ナチュラルオーク調） */
body.page-menu {
    background-color: #D4BC8A;
    background-image:
        repeating-linear-gradient(
            0.3deg,
            rgba(0,0,0,0)          0px,  rgba(0,0,0,0)          6px,
            rgba(0,0,0,0.04)       6px,  rgba(0,0,0,0.04)       7px,
            rgba(0,0,0,0)          7px,  rgba(0,0,0,0)         16px,
            rgba(255,255,255,0.06) 16px, rgba(255,255,255,0.06) 17px,
            rgba(0,0,0,0)         17px,  rgba(0,0,0,0)         28px,
            rgba(0,0,0,0.03)      28px,  rgba(0,0,0,0.03)      29px
        ),
        repeating-linear-gradient(
            177deg,
            rgba(0,0,0,0)      0px,
            rgba(0,0,0,0.02)  55px,
            rgba(0,0,0,0)    110px
        ),
        linear-gradient(
            180deg,
            #E4D09C 0%,  #C8A87E 18%,
            #D4BC8A 35%, #C2A678 55%,
            #D8C290 72%, #CAB082 88%,
            #D2BA88 100%
        );
}

/* サイト全体にフィルムグレイン（微細な粒状感）を重ね、
   単なる平面のグラデーションではなく質感のある奥行きを出す */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.05;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 140px 140px;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

ul, ol {
    list-style: none;
}


/* ==============================================
   3. 共通コンポーネント
   ============================================== */

.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* セクション見出し */
.section-header {
    text-align: center;
    margin-bottom: 12px;
}

.section-header__en {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.65rem;
    font-weight: 400;
    letter-spacing: 0.45em;
    color: var(--red);
    margin-bottom: 8px;
}

/* 英字ラベルの両脇に添える小さな飾り線 */
.section-header__en::before,
.section-header__en::after {
    content: '';
    display: inline-block;
    width: 13px;
    height: 1px;
    background: currentColor;
    opacity: 0.55;
}

.section-header__ja {
    font-family: var(--font-serif);
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 30px;
}


/* ボタン（共通） */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    border: 2px solid var(--red);
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: background var(--tr-base), color var(--tr-base),
                transform var(--tr-bounce), box-shadow var(--tr-base);
    min-width: 200px;
    text-align: center;
    border-radius: var(--radius-sm);
}

.btn:active {
    transform: scale(0.97);
}

.btn__icon {
    color: white;
}

/* 塗りつぶしボタン（メイン） */
.btn--primary {
    background: var(--red);
    color: white;
    border-color: var(--red);
    box-shadow: 0 3px 10px rgba(190, 47, 28, 0.22);
}
.btn--primary:hover, .btn--primary:focus {
    background: var(--red-dark);
    border-color: var(--red-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(190, 47, 28, 0.3);
}

/* アウトラインボタン */
.btn--secondary {
    background: transparent;
    color: var(--red);
}
.btn--secondary:hover, .btn--secondary:focus {
    background: var(--red);
    color: white;
    transform: translateY(-2px);
}

/* ヒーロー用ゴーストボタン（白テキスト・白枠） */
.btn--hero {
    background: transparent;
    color: white;
    border-color: rgba(255, 255, 255, 0.8);
    margin-top: 10%;
    font-size: 1rem;
}
.btn--hero:hover, .btn--hero:focus {
    background: white;
    color: var(--red);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* フェードインアニメーション */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.fade-in.is-visible {
    opacity: 1;
    transform: none;
}


/* ==============================================
   4. ヘッダー
   ============================================== */
.header {
    position: fixed;
    inset: 0 0 auto 0;
    height: var(--header-h);
    z-index: 1000;
    background: rgba(254, 252, 244, 0);  /* 最初は透明 */
    transition: background var(--tr-slow), box-shadow var(--tr-slow);
}

/* スクロール後は白背景・影付きに */
.header.is-scrolled {
    background: rgb(246, 247, 248);
    box-shadow: 0 2px 8px rgba(100, 50, 20, 0.12);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 20px;
    max-width: 860px;
    margin: 0 auto;
}

/* ロゴ */
.header__logo {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    gap: 1px;
    transition: transform var(--tr-bounce);
}

.header__logo:hover {
    transform: scale(1.04);
}

.header__logo-kanji {
    font-family: var(--font-serif);
    font-size: 1.3rem;
    font-weight: 700;
    /* ヒーロー上では白、スクロール後に赤へ切り替わる（is-scrolled で上書き） */
    color: white;
    letter-spacing: .7em;
    transition: color var(--tr-slow);
}

.header__logo-sub {
    font-size: 0.52rem;
    font-weight: 300;
    letter-spacing: 0.35em;
    color: rgba(255, 255, 255, 0.65);
    transition: color var(--tr-slow);
}

/* スクロール後（白ヘッダー）ではロゴを赤に戻す */
.header.is-scrolled .header__logo-kanji {
    color: var(--text-main);
}
.header.is-scrolled .header__logo-sub {
    color: var(--text-muted);
}

/* ハンバーガーボタン */
.header__hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 1001;
    border-radius: 8px;
}

.header__hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    /* ヒーロー上では白、スクロール後に暗色へ切り替わる */
    background: white;
    transition: transform var(--tr-base), opacity var(--tr-base), background var(--tr-slow);
    transform-origin: center;
    border-radius: 1px;
}

.header.is-scrolled .header__hamburger span {
    background: var(--text-main);
}

/* menu.html 専用：ヘッダーを常時ダーク木目調にする（スクロール前後で切り替えない） */
.page-menu .header,
.page-menu .header.is-scrolled {
    background: rgba(88, 54, 18, 0.97);
    box-shadow: 0 1px 8px rgba(30, 15, 3, 0.35);
    backdrop-filter: blur(6px);
}
.page-menu .header__logo-kanji,
.page-menu .header.is-scrolled .header__logo-kanji {
    color: #F5E8C8;
}
.page-menu .header__logo-sub,
.page-menu .header.is-scrolled .header__logo-sub {
    color: rgba(240, 220, 170, 0.6);
}
.page-menu .header__hamburger span,
.page-menu .header.is-scrolled .header__hamburger span {
    background: #F5E8C8;
}

/* ×印に変形 */
.header__hamburger.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.header__hamburger.is-open span:nth-child(2) {
    opacity: 0;
}
.header__hamburger.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ナビ（スマホ：右ドロワー） */
.nav {
    position: fixed;
    top: calc(var(--header-h) + 8px);
    right: -100%;
    width: min(300px, 82vw);
    height: calc(100dvh - var(--header-h) - 20px);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow-y: auto;
    transition: right var(--tr-slow);
    box-shadow: -4px 0 20px rgba(100, 50, 20, 0.18);
    /* オーバーレイ(999)より上に出るよう z-index を設定 */
    z-index: 1001;
}

.nav.is-open {
    right: 8px;
}

.nav__list {
    display: flex;
    flex-direction: column;
    padding: 24px 20px;
}

.nav__link {
    display: block;
    padding: 15px 0;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-main);
    border-bottom: 1px solid var(--border);
    letter-spacing: 0.05em;
    transition: color var(--tr-base), padding-left var(--tr-base);
}

.nav__link:hover, .nav__link:focus {
    color: var(--red);
    padding-left: 8px;
}

/* 現在表示しているページ：左ライン＋文字色で強調 */
.nav__link[aria-current="page"] {
    color: var(--red);
    font-weight: 700;
    border-left: 4px solid var(--red);
    padding-left: 12px;
    border-radius: 0 8px 8px 0;
}


.nav__link--cta {
    margin-top: 20px;
    padding: 13px 20px;
    border: 2px solid var(--red);
    color: var(--red);
    text-align: center;
    font-weight: 700;
    border-radius: var(--radius-sm);
}

.nav__link--cta:hover, .nav__link--cta:focus {
    background: var(--red);
    color: white;
    padding-left: 20px;
}

.nav__overlay {
    position: fixed;
    inset: 0;
    background: rgba(35, 18, 8, 0.45);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--tr-slow);
}

.nav__overlay.is-visible {
    opacity: 1;
    pointer-events: all;
}

/* タブレット以上：横並びナビ */
@media (min-width: 768px) {
    .header__hamburger { display: none; }

    .nav {
        position: static;
        width: auto;
        height: auto;
        background: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
    }

    .nav__list {
        flex-direction: row;
        gap: 24px;
        padding: 0;
    }

    .nav__link {
        padding: 6px 0;
        border: none;
        font-size: 0.85rem;
        color: white;
    }

    .nav__link--cta {
        margin-top: 0;
        padding: 7px 16px;
    }

    .nav__overlay { display: none; }

    /* スクロール後（白ヘッダー）では文字色を戻す */
    .header.is-scrolled .nav__link {
        color: var(--text-main);
    }

    /* menu.html 専用：デスクトップのヘッダーナビのみ白文字（ドロワー内は暗色のまま） */
    .page-menu .nav__link {
        color: #F5E8C8;
    }
    .page-menu .nav__link--cta {
        border-color: rgba(240, 215, 155, 0.4);
        color: #F5E8C8;
    }
}


/* ==============================================
   5. ヒーローセクション
   ============================================== */
.hero {
    position: relative;
    height: 100vh;
    height: 100dvh;
    min-height: 560px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    /* =============================================
       背景画像を設定する場合：
       1. images/ フォルダに hero.jpg を入れる
       2. 下の background-image のコメントを外す
       3. お好みで overlay の透明度を調整する

       background-image: url('images/hero.jpg');
       background-size: cover;
       background-position: center;
    ============================================= */

    /* 画像なしのCSS背景（優しいグレー〜淡いブルー） */
    background: linear-gradient(150deg, #3A5268 0%, #5B7E9E 50%, #7A9DBB 100%);
}

/* スライドショー */
.hero__slides {
    position: absolute;
    top: -12%;
    left: 0;
    right: 0;
    height: 124%;
}

.hero__slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* 写真の上に重ねる暗色レイヤー：強めのビネットで映画的な奥行きを出す */
.hero__overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 85% 65% at 50% 45%, transparent 38%, rgba(0, 0, 0, 0.4) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0.04) 32%, rgba(0, 0, 0, 0.14) 60%, rgba(0, 0, 0, 0.5) 100%);
}

.hero__content {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 0 24px;
}

.hero__subtitle {
    font-family: var(--font-serif);
    font-size: 0.92rem;
    font-weight: 300;
    letter-spacing: 0.55em;
    color: rgba(255, 244, 200, 0.95);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85), 0 2px 14px rgba(0, 0, 0, 0.7);
    margin-top: calc(5em + 5rem);
    margin-bottom: 18px;
}

/* ヒーロー演出：中央の「博多屋」が表示し終わるまで、他のUIを隠しておく
   （script.js が最後の文字の着地を確認してから is-visible を付与し、
   下から少し浮かび上がるフェードインを再生する。
   .btn--hero や .header はホバー用に独自の transition を持つため、
   ここでは transition ではなく animation を使って衝突を避けている） */
.hero__subtitle,
.hero__tagline,
.hero__content .btn--hero,
.hero__scroll-indicator {
    opacity: 0;
}
.hero__subtitle.is-visible,
.hero__tagline.is-visible,
.hero__content .btn--hero.is-visible {
    animation: heroExtraFadeUp 0.9s ease forwards;
}
/* .hero__scroll-indicator は left:50% + translateX(-50%) で中央寄せ済みのため
   横方向の位置を保ったまま縦方向だけ動かす専用キーフレームを使う */
.hero__scroll-indicator.is-visible {
    animation: heroExtraFadeUpCentered 0.9s ease forwards;
}
@keyframes heroExtraFadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroExtraFadeUpCentered {
    from { opacity: 0; transform: translateX(-50%) translateY(12px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .hero__subtitle,
    .hero__tagline,
    .hero__content .btn--hero,
    .hero__scroll-indicator {
        opacity: 1;
    }
    .hero__subtitle.is-visible,
    .hero__tagline.is-visible,
    .hero__content .btn--hero.is-visible,
    .hero__scroll-indicator.is-visible {
        animation: none !important;
    }
}

.hero__title {
    margin-bottom: 18px;
    opacity: 0;
    animation: heroFadeUp 0.9s ease 0.7s forwards;
}

.hero__title-main {
    display: inline-flex;
    position: relative;
    gap: 0.12em;
    font-family: var(--font-serif);
    font-size: clamp(3.5rem, 17vw, 6rem);
    font-weight: 900;
    letter-spacing: 0.2em;
}

/* 「博多屋」の1文字（屋台が運んで置いていくオープニング演出の対象） */
.hero__title-letter {
    position: relative;
    display: inline-block;
    opacity: 0;
    transform: translateY(6px) scale(0.4) rotate(-6deg);

    /* 白文字＋控えめな立体感 */
    color: #fff;
    text-shadow:
        -1px -1px 0 rgba(255, 255, 255, 0.25),
        2px 3px 4px rgba(0, 0, 0, 0.8);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.55));
}

/* 浮き上がってから、ポイっと投げ入れるように着地する */
.hero__title-letter.is-placed {
    animation: heroLetterToss 0.7s cubic-bezier(0.22, 0.9, 0.4, 1) forwards;
}

/* 初回演出を再生しない（2回目以降のアクセス）場合：アニメーションなしで完成形を表示 */
.hero__title-letter.no-anim {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

@keyframes heroLetterToss {
    0%   { opacity: 0;   transform: translateY(6px)   scale(0.4)  rotate(-6deg); }
    35%  { opacity: 0.9; transform: translateY(-18px) scale(0.75) rotate(5deg); }
    70%  { opacity: 1;   transform: translateY(5px)   scale(1.08) rotate(-3deg); }
    100% { opacity: 1;   transform: translateY(0)     scale(1)    rotate(0deg); }
}

/* 文字が着地した瞬間に小さく光る */
.hero__letter-flash {
    position: absolute;
    left: 50%;
    top: 60%;
    width: 9px;
    height: 9px;
    margin: -4.5px 0 0 -4.5px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 241, 199, 0.95) 0%, rgba(255, 220, 140, 0.5) 45%, transparent 75%);
    opacity: 0;
    pointer-events: none;
}
.hero__letter-flash.play {
    animation: heroLetterFlash 0.5s ease-out;
}
@keyframes heroLetterFlash {
    0%   { opacity: 0; transform: scale(0.3); }
    35%  { opacity: 1; transform: scale(2.6); }
    100% { opacity: 0; transform: scale(3.6); }
}

/* オープニング演出：屋台イラスト（初回アクセス時のみ script.js が再生） */
.hero__cart {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(110px, 30vw, 170px);
    z-index: 1;
    pointer-events: none;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.4));
}
.hero__cart svg {
    display: block;
    width: 100%;
    height: auto;
    /* 取っ手（引き手）が進行方向の前側に来るよう左右反転 */
    transform: scaleX(-1);
}

.hero__cart.play {
    animation: heroCartJourney 9s cubic-bezier(0.45, 0.05, 0.55, 0.95) 1 both;
}

/* 屋台は止まらず左→右へ通り抜ける。画面中央（40%地点）を通過する
   タイミングで最初の文字が置かれ始め、そのまま右へ抜けてフェードアウトする */
@keyframes heroCartJourney {
    0%   { transform: translate(calc(-50% - 65vw), -50%); opacity: 1; }
    40%  { transform: translate(-50%,                 -50%); opacity: 1; }
    55%  { transform: translate(calc(-50% + 20vw), -50%); opacity: 1; }
    65%  { transform: translate(calc(-50% + 38vw), -50%); opacity: 1; }
    100% { transform: translate(calc(-50% + 100vw), -50%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .hero__cart.play { animation: none !important; opacity: 0; }
    .hero__title-letter.is-placed { animation: none !important; opacity: 1; transform: none; }
}

/* タイトル下の白い装飾ライン（他のUIと同じく、「屋」着地の0.4秒後に表示） */
.hero__title-main::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 15%;
    right: 15%;
    height: 2px;
    background: rgba(255, 255, 255, 0.6);
    opacity: 0;
    transition: opacity 0.9s ease;
}
.hero__title-main.is-visible::after {
    opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
    .hero__title-main::after {
        transition: none;
    }
}

/* 「博多屋」の文字の上端あたりでゆらゆら揺れる湯気
   ※ hero__subtitle との間隔が狭い（特にスマホ）ため、
     文字上端に軽く重なる位置から立ち上げ、控えめな高さで収める */
.hero__steam {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: -10px;
    width: 44px;
    height: 18px;
    pointer-events: none;
    z-index: 1;
}

.hero__steam i {
    position: absolute;
    bottom: 0;
    width: 7px;
    height: 14px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    filter: blur(4px);
    opacity: 0;
    animation: steamRise 3.6s ease-in-out infinite;
}

.hero__steam i:nth-child(1) { left: 3px;  animation-delay: 0s; }
.hero__steam i:nth-child(2) { left: 19px; height: 16px; animation-delay: 1.1s; }
.hero__steam i:nth-child(3) { left: 34px; animation-delay: 2.2s; }

@keyframes steamRise {
    0%   { transform: translate(0, 0) scale(0.8); opacity: 0; }
    20%  { opacity: 0.4; }
    60%  { transform: translate(3px, -10px) scale(1.05); opacity: 0.18; }
    100% { transform: translate(-3px, -18px) scale(1.25); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .hero__steam i { animation: none; opacity: 0; }
}

.hero__tagline {
    font-family: var(--font-serif);
    font-size: clamp(0.72rem, 3.4vw, 1.25rem);
    font-weight: 500;
    letter-spacing: 0.4em;
    color: rgba(255, 255, 255, 0.75);
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.8), 0 2px 10px rgba(0, 0, 0, 0.6);
    margin-top: 20px;
    white-space: nowrap;
}

.hero__content .btn--hero {
    display: inline-flex;
}

/* スクロールインジケーター */
.hero__scroll-indicator {
    position: absolute;
    bottom: 28px;
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.hero__scroll-text {
    font-size: 0.64rem;
    letter-spacing: 0.5em;
    color: rgba(255, 255, 255, 0.6);
}

.hero__scroll-line {
    width: 1px;
    height: 32px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.7), transparent);
    animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}
@keyframes heroFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes scrollPulse {
    0%   { transform: scaleY(0); transform-origin: top; }
    50%  { transform: scaleY(1); transform-origin: top; }
    51%  { transform: scaleY(1); transform-origin: bottom; }
    100% { transform: scaleY(0); transform-origin: bottom; }
}


/* ==============================================
   6. コンセプトセクション
   ============================================== */
.concept {
    background-color: var(--bg-section);
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, transparent 20%, transparent 78%, rgba(35, 18, 8, 0.12) 100%),
        radial-gradient(ellipse 55% 60% at 12% 8%, rgba(190, 47, 28, 0.05), transparent 65%),
        radial-gradient(ellipse 65% 70% at 100% 100%, rgba(35, 18, 8, 0.05), transparent 60%),
        repeating-linear-gradient(118deg, rgba(160, 100, 50, 0.045) 0px, rgba(160, 100, 50, 0.045) 1px, transparent 1px, transparent 11px);
    padding: var(--section-py) 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    box-shadow:
        inset 0 22px 36px -22px rgba(35, 18, 8, 0.5),
        inset 0 -22px 36px -22px rgba(35, 18, 8, 0.38);
}

.concept__body {
    text-align: center;
}

.concept__text {
    font-family: var(--font-serif);
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 2.05;
    color: var(--text-main);
    margin-bottom: 24px;
}

.concept__text:last-child {
    margin-bottom: 0;
}

/* こだわり写真カルーセル：横スワイプで見せる */
.concept__carousel {
    display: flex;
    gap: 14px;
    margin: 32px -20px 0;
    padding: 4px 20px 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.concept__carousel::-webkit-scrollbar {
    display: none;
}

.concept__photo {
    flex: 0 0 100%;
    scroll-snap-align: start;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

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

@media (min-width: 600px) {
    .concept__photo {
        flex-basis: 55%;
    }
}


/* ==============================================
   7. おすすめメニュー（ホームページ）
      1位〜3位のランキング表示（3品）
   ============================================== */
.featured {
    background-color: var(--bg-main);
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, transparent 20%, transparent 80%, rgba(35, 18, 8, 0.1) 100%),
        radial-gradient(ellipse 60% 65% at 100% 0%, rgba(200, 128, 30, 0.14), transparent 60%),
        radial-gradient(ellipse 55% 60% at 0% 100%, rgba(35, 18, 8, 0.1), transparent 60%),
        radial-gradient(rgba(160, 100, 50, 0.1) 1px, transparent 1.4px);
    background-size: 100% 100%, 100% 100%, 100% 100%, 15px 15px;
    padding: var(--section-py) 0;
    box-shadow:
        inset 0 22px 36px -22px rgba(35, 18, 8, 0.45),
        inset 0 -22px 36px -22px rgba(35, 18, 8, 0.32);
}

/* ランキングリスト（1位を縦に並べる） */
.ranking {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 36px;
}

/* 各順位のカード */
.rank-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 12px;
    transition: box-shadow var(--tr-bounce), transform var(--tr-bounce);
}
.rank-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.rank-card__photo {
    position: relative;
    flex: 0 0 108px;
    width: 108px;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.rank-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}
.rank-card:hover .rank-card__photo img {
    transform: scale(1.08);
}

/* 順位バッジ（金・銀・銅） */
.rank-card__badge {
    position: absolute;
    top: -8px;
    left: -8px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-serif);
    font-size: 0.95rem;
    font-weight: 900;
    color: white;
    text-shadow: 0 1px 2px rgba(35, 18, 8, 0.35);
    box-shadow: 0 3px 8px rgba(35, 18, 8, 0.35);
    border: 2px solid var(--bg-card);
}
.rank-card--1 .rank-card__badge {
    background: linear-gradient(155deg, #F6D48A, var(--amber) 60%, #97620F);
}
.rank-card--2 .rank-card__badge {
    background: linear-gradient(155deg, #F2F4F6, #B7C0C7 60%, #6E767C);
}
.rank-card--3 .rank-card__badge {
    background: linear-gradient(155deg, #E3AD7F, #B9723F 60%, #6E3E1E);
}

.rank-card__body {
    flex: 1;
    min-width: 0;
}
.rank-card__name {
    font-family: var(--font-serif);
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.4;
    margin-bottom: 4px;
}
.rank-card__desc {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.6;
}

.rank-card__price {
    font-size: 1rem;
    font-weight: 700;
    color: var(--red);
    margin-top: 6px;
}

/* 1位はひとまわり大きく、金色の縁取りで目立たせる */
.rank-card--1 {
    border-color: rgba(200, 128, 30, 0.45);
    box-shadow: 0 4px 12px rgba(200, 128, 30, 0.2), var(--shadow-sm);
}
.rank-card--1 .rank-card__photo {
    flex-basis: 128px;
    width: 128px;
}
.rank-card--1 .rank-card__name {
    font-size: 1.16rem;
}

/* 全メニューへのCTA */
.featured__cta {
    text-align: center;
    margin-top: 4px;
}

/* 3秒に1回、一瞬だけボタンが大きくなるパルスモーション */
.featured__cta-pulse {
    display: inline-block;
    animation: featured-cta-pulse 4s ease-in-out infinite;
}

@keyframes featured-cta-pulse {
    0%, 92%, 100% {
        transform: scale(1);
    }
    96% {
        transform: scale(1.05);
    }
}

.featured__note {
    font-size: 0.76rem;
    color: var(--text-muted);
    text-align: center;
    margin-top: 14px;
}

/* タブレット以上：写真とテキストをさらに余裕を持って表示 */
@media (min-width: 560px) {
    .rank-card {
        padding: 16px;
        gap: 22px;
    }
    .rank-card__photo {
        flex-basis: 128px;
        width: 128px;
    }
    .rank-card--1 .rank-card__photo {
        flex-basis: 156px;
        width: 156px;
    }
    .rank-card__name {
        font-size: 1.08rem;
    }
    .rank-card--1 .rank-card__name {
        font-size: 1.28rem;
    }
    .rank-card__desc {
        font-size: 0.85rem;
    }
}


/* ==============================================
   8. 全メニューページ（menu.html）
   ============================================== */

/* ページ上部のヘッダーバー（木目に溶け込む焦げ茶オーバーレイ） */
.page-hero {
    background: linear-gradient(180deg, rgba(20, 10, 2, 0.48) 0%, rgba(20, 10, 2, 0.20) 100%);
    padding: calc(var(--header-h) + 32px) 0 36px;
    text-align: center;
}

.page-hero__en {
    font-size: 0.65rem;
    letter-spacing: 0.25em;
    opacity: 0.6;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 8px;
}

/* メインコンテナの左右パディングを除去（全メニューページは端まで使う） */
main > .container {
    padding-left: 0;
    padding-right: 0;
}

.page-hero__title {
    font-family: var(--font-serif);
    font-size: 2rem;
    font-weight: 700;
    color: white;
    letter-spacing: 0.15em;
}

/* ホームへ戻るリンク */
.back-to-home {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: #4A2C0A;
    border: 1px solid var(--border);
    padding: 8px 16px;
    transition: color var(--tr-base), border-color var(--tr-base), transform var(--tr-bounce);
    border-radius: var(--radius-sm);
}

.back-to-home:hover {
    color: var(--red);
    border-color: var(--red);
    transform: translateX(-3px);
}

.menu-top-nav {
    position: sticky;
    top: var(--header-h);
    z-index: 900;
    background: rgba(252, 246, 230, 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(175, 125, 55, 0.18);
    box-shadow: 0 2px 14px rgba(100, 65, 15, 0.10);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    flex-wrap: wrap;
    gap: 12px;
}

/* 右側にまだカテゴリが続くことを示すフェード影（横スクロールの手がかり）
   ※ スクロールする .menu-jump 自体ではなく、スクロールしない親要素に付けることで
     フェードが常に画面の右端に固定され、中の項目と一緒に流れないようにする */
.menu-top-nav::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 28px;
    background: linear-gradient(to right, transparent, rgba(252, 246, 230, 0.95));
    pointer-events: none;
}

/* ページ内ジャンプリンク */
.menu-jump {
    display: flex;
    align-items: center;
    gap: 8px;
    margin:0 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.menu-jump::-webkit-scrollbar {
    display: none;
}

.menu-jump__link {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 100px;
    padding: 0px 6px;
    font-size: 0.75rem;
    line-height: 1.7;
    color: #2E1606;
    font-weight: 500;
    border: 1px solid rgba(150, 100, 38, 0.28);
    background: rgba(255, 250, 235, 0.55);
    border-radius: 999px;
    writing-mode: vertical-rl;
    transition: color var(--tr-base), background var(--tr-base), transform var(--tr-bounce), border-color var(--tr-base);
}

.menu-jump__link:hover {
    color: #2E1606;
    background: rgba(255, 250, 235, 0.55);
    border-color: rgba(150, 100, 38, 0.28);
    transform: translateY(-1px);
}

.menu-jump__link.is-active {
    color: #fff;
    background: #8C2010;
    border-color: #8C2010;
}

/* メニューカテゴリ（和紙カード調） */
.menu-section {
    background: #FDF8EE;
    border: 1px solid rgba(150, 100, 42, 0.18);
    border-radius: 3px;
    padding: 40px 0;
    margin-bottom: 24px;
    scroll-margin-top: calc(var(--header-h) + 60px);
    box-shadow:
        0 1px 3px rgba(45, 24, 6, 0.06),
        0 5px 22px rgba(45, 24, 6, 0.12);
}

.menu-section:first-of-type {
    border-top: none;
}

.menu-section__title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 600;
    color: rgba(46, 22, 6, 0.65);
    letter-spacing: 0.22em;
    margin-bottom: 2px;
    padding-bottom: 2px;
    border-bottom: none;
}

.menu-section__title::before,
.menu-section__title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(130, 82, 28, 0.5));
}
.menu-section__title::after {
    background: linear-gradient(90deg, rgba(130, 82, 28, 0.5), transparent);
}

/* カテゴリ写真 */
.menu-section__photo {
    position: relative;
    width: calc(70% - 56px);
    margin: 14px auto 18px;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(45, 24, 6, 0.22);
}
.menu-section__photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 45%, rgba(0, 0, 0, 0.52) 100%);
    pointer-events: none;
}
.menu-section__photo img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
}

.menu-section__note {
    font-size: 0.76rem;
    color: #6B4515;
    margin-bottom: 20px;
    margin-top: 8px;
    padding-left: 18px;
}

/* 麺類メモ：醤油タイトル上（通常フロー） */
.menu-noodle-note {
    font-size: 0.7rem;
    color: #6B4515;
    text-align: right;
    margin: 0 18px 10px;
}

/* メニューリスト（全メニューページ） */
.menu-list {
    display: flex;
    flex-direction: column;
    padding: 0 18px;
    background: none;
    border: none;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
    gap: 0;
}

.menu-row {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    text-align: left;
    gap: 12px;
    padding: 11px 0;
    background: transparent;
    border-bottom: 1px solid rgba(150, 100, 42, 0.12);
    transition: background var(--tr-base);
}

.menu-row:last-child {
    border-bottom: none;
}

.menu-row:hover {
    background: rgba(190, 47, 28, 0.05);
    padding-left: 6px;
    padding-right: 6px;
    margin-inline: -6px;
    border-radius: var(--radius-sm);
}

.menu-row__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.menu-row__name {
    font-family: var(--font-serif);
    font-size: 0.98rem;
    font-weight: 500;
    color: #2E1606;
}

.menu-row__desc {
    display: none;
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.6;
}

.menu-row__price {
    font-size: 0.95rem;
    font-weight: 700;
    color: #8C2010;
    white-space: nowrap;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

/* メニューページ最下部の注意書き */
.menu-disclaimer {
    background: var(--bg-section);
    border-top: 1px solid var(--border);
    padding: 32px 0;
    font-size: 0.78rem;
    color: #6B4515;
    line-height: 2;
    text-align: center;
}


/* ==============================================
   9. 営業情報セクション
   ============================================== */
.info .container {
    position: relative;
}

.info {
    background-color: var(--bg-section);
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, transparent 20%, transparent 78%, rgba(35, 18, 8, 0.06) 100%),
        radial-gradient(ellipse 60% 65% at 90% 0%, rgba(190, 47, 28, 0.08), transparent 60%),
        radial-gradient(ellipse 55% 60% at 4% 100%, rgba(35, 18, 8, 0.06), transparent 60%),
        repeating-linear-gradient(62deg, rgba(160, 100, 50, 0.045) 0px, rgba(160, 100, 50, 0.045) 1px, transparent 1px, transparent 11px);
    padding: var(--section-py) 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    box-shadow:
        inset 0 22px 36px -22px rgba(35, 18, 8, 0.26),
        inset 0 -22px 36px -22px rgba(35, 18, 8, 0.18);
}

/* 木の看板風パネル */
.info__board {
    background-color: var(--wood-mid);
    background-image:
        repeating-linear-gradient(0.6deg,
            rgba(90, 55, 20, 0.05) 0px, rgba(90, 55, 20, 0.05) 1px, transparent 1px, transparent 7px,
            rgba(255, 255, 255, 0.05) 7px, rgba(255, 255, 255, 0.05) 8px, transparent 8px, transparent 15px),
        linear-gradient(180deg, var(--wood-light) 0%, var(--wood-mid) 55%, var(--wood-dark) 100%);
    border: 3px solid var(--wood-dark);
    border-radius: var(--radius-md);
    padding: 14px 20px;
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.info__list {
    display: flex;
    flex-direction: column;
}

.info__item {
    display: flex;
    gap: 16px;
    padding: 12px 10px;
    margin-inline: -10px;
    border-bottom: 1px solid var(--border);
    align-items: flex-start;
    border-radius: var(--radius-sm);
    transition: background var(--tr-base);
}

.info__item:hover {
    background: rgba(190, 47, 28, 0.04);
}

.info__item:first-of-type {
    border-top: 1px solid var(--border);
}


.info__label {
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--red);
    white-space: nowrap;
    min-width: 80px;
    padding-top: 3px;
}

.info__value {
    font-size: 0.85rem;
    color: var(--text-main);
    line-height: 1.75;
}

.info__sub {
    display: block;
    font-size: 0.78rem;
    color: #6E4B2E;
    margin-top: 4px;
}

.info__tel {
    display: inline-block;
    font-size: 1.28rem;
    font-weight: 700;
    color: var(--red);
    letter-spacing: 0.08em;
    transition: color var(--tr-base), transform var(--tr-bounce);
}

.info__tel:hover {
    color: var(--red-dark);
    transform: translateY(-1px);
}

.calendar-link {
    margin-left: 8px;
    font-size: 0.72rem;
    color: var(--text-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--tr-base), transform var(--tr-bounce);
    display: inline-block;
}

.calendar-link:hover {
    color: var(--red);
    transform: translateY(-1px);
}

/* ==============================================
   10. アクセスセクション
   ============================================== */
.access .container {
    position: relative;
}

/* 営業中フラッグ：ポール＋なびく旗のイラスト */
.access__flag {
    position: absolute;
    top: -40px;
    right: 25%;
    width: 6px;
    height: 130px;
    transform: rotate(-6deg);
    pointer-events: none;
    z-index: 2;
    perspective: 320px;
}

.access__flag-pole {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #8a6a48, #4a3319);
    border-radius: 3px;
    box-shadow: var(--shadow-sm);
}

.access__flag-banner {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 62px;
    height: 86px;
    background: var(--red);
    color: var(--text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-serif);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    writing-mode: vertical-rl;
    box-shadow: var(--shadow-sm);
    transform-origin: 0% 50%;
    transform-style: preserve-3d;
    animation: flag-flutter 7s ease-in-out infinite;
}

/* 5秒に1回、旗の根元(ポール側)を軸に奥へ・手前へ回り込むように
   横揺れさせ、遠近感（奥行き）のあるはためきを表現する */
@keyframes flag-flutter {
    0%, 82% { transform: rotateY(0deg); }
    86%     { transform: rotateY(-32deg); }
    89%     { transform: rotateY(24deg); }
    92%     { transform: rotateY(-17deg); }
    95%     { transform: rotateY(9deg); }
    100%    { transform: rotateY(0deg); }
}

@media (prefers-reduced-motion: reduce) {
    .access__flag-banner { animation: none; }
}

.access {
    background-color: var(--bg-main);
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, transparent 20%, transparent 80%, rgba(35, 18, 8, 0.1) 100%),
        radial-gradient(ellipse 60% 65% at 0% 0%, rgba(200, 128, 30, 0.13), transparent 60%),
        radial-gradient(ellipse 55% 60% at 100% 100%, rgba(35, 18, 8, 0.1), transparent 60%),
        radial-gradient(rgba(160, 100, 50, 0.1) 1px, transparent 1.4px);
    background-size: 100% 100%, 100% 100%, 100% 100%, 16px 16px;
    background-position: 0 0, 0 0, 0 0, 8px 8px;
    padding: var(--section-py) 0;
    box-shadow:
        inset 0 22px 36px -22px rgba(35, 18, 8, 0.45),
        inset 0 -22px 36px -22px rgba(35, 18, 8, 0.32);
}

.access__map {
    margin-bottom: 28px;
    border: 1px solid var(--border);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-md);
}

.access__map iframe {
    display: block;
    width: 100%;
    height: 280px;
    border: none;
}

.access__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.access__item {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 18px 16px;
    color: var(--text-main);
    background-color: var(--bg-card);
    background-image:
        linear-gradient(145deg, rgba(255, 255, 255, 0.62), transparent 44%),
        repeating-linear-gradient(0deg, rgba(120, 75, 35, 0.025) 0 1px, transparent 1px 7px);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: transform var(--tr-base), box-shadow var(--tr-base);
}

.access__item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.access__icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    font-size: 1.25rem;
    background: rgba(190, 47, 28, 0.08);
    border: 1px solid rgba(190, 47, 28, 0.14);
    border-radius: 50%;
    transition: transform var(--tr-bounce);
}

.access__item:hover .access__icon {
    transform: scale(1.08) rotate(-5deg);
}

.access__content {
    min-width: 0;
    flex: 1;
}

.access__title {
    margin: 0 0 8px;
    padding-bottom: 8px;
    color: var(--red);
    font-family: var(--font-serif);
    font-size: 0.94rem;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 0.04em;
    border-bottom: 2px solid rgba(190, 47, 28, 0.16);
}

.access__detail {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.75;
}

@media (min-width: 680px) {
    .access__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* ==============================================
   11. お問い合わせセクション
   ============================================== */
.contact {
    background-color: var(--bg-section);
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, transparent 20%, transparent 76%, rgba(35, 18, 8, 0.16) 100%),
        radial-gradient(ellipse 65% 60% at 50% 0%, rgba(190, 47, 28, 0.12), transparent 60%),
        repeating-linear-gradient(-62deg, rgba(160, 100, 50, 0.045) 0px, rgba(160, 100, 50, 0.045) 1px, transparent 1px, transparent 11px);
    padding: var(--section-py) 0;
    border-top: 1px solid var(--border);
    box-shadow: inset 0 22px 36px -22px rgba(35, 18, 8, 0.5);
}

.contact__body {
    text-align: center;
}

.contact__text {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.95;
    margin-bottom: 28px;
}

.contact__buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.contact__note {
    font-size: 0.74rem;
    color: var(--text-muted);
}

@media (min-width: 560px) {
    .contact__buttons {
        flex-direction: row;
        justify-content: center;
    }
}


/* ==============================================
   12. フッター
   ============================================== */
.footer {
    position: relative;
    background: var(--bg-dark);
    padding: 48px 0 28px;
    text-align: center;
}

/* 暖簾（のれん）風のアクセント：紺の竿 + 赤い房のフリンジ */
.footer::before,
.footer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    pointer-events: none;
}

.footer::before {
    height: 5px;
    background: var(--navy);
}

.footer::after {
    top: 5px;
    height: 11px;
    background:
        linear-gradient(45deg,  transparent 50%, var(--red) 50%) 0 100% / 16px 11px repeat-x,
        linear-gradient(-45deg, transparent 50%, var(--red) 50%) 0 100% / 16px 11px repeat-x,
        linear-gradient(var(--red), var(--red)) 0 0 / 100% 3px no-repeat;
    /* 布が垂れ下がっているような影を落とす */
    filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.4));
}

.footer__logo {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: white;
    margin-bottom: 12px;
}

.footer__copy {
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.35);
}


/* ==============================================
   13. トップへ戻るボタン
   ============================================== */
.back-to-top {
    position: fixed;
    bottom: 24px;
    right: 18px;
    width: 46px;
    height: 46px;
    background: var(--red);
    border: none;
    color: white;
    font-size: 1.1rem;
    cursor: pointer;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity var(--tr-base), transform var(--tr-bounce), background var(--tr-base), box-shadow var(--tr-base);
    box-shadow: var(--shadow-md);
}

.back-to-top.is-visible {
    opacity: 1;
    pointer-events: all;
    transform: none;
}

.back-to-top:hover {
    background: var(--red-dark);
    transform: translateY(-3px) scale(1.06);
    box-shadow: 0 10px 22px rgba(100, 50, 20, 0.28);
}


/* ==============================================
   14. 休業日カレンダー モーダル
   ============================================== */
.calendar-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
    background: rgba(20, 10, 4, 0.85);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--tr-slow);
}

.calendar-modal.is-visible {
    opacity: 1;
    pointer-events: all;
}

.calendar-modal__img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.calendar-modal__close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: 50%;
    color: var(--text-light);
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    z-index: 2001;
    transition: background var(--tr-base), transform var(--tr-bounce);
}

.calendar-modal__close:hover {
    background: rgba(255, 255, 255, 0.18);
    transform: scale(1.1) rotate(90deg);
}


/* ==============================================
   15. レスポンシブ（タブレット以上）
   ============================================== */
@media (min-width: 768px) {
    :root {
        --section-py: 96px;
    }

    .info__label {
        min-width: 100px;
    }

    .info__value {
        font-size: 0.85rem;
    }

    .info__board {
        padding: 20px 32px;
    }

    .access__map iframe {
        height: 340px;
    }

    /* 背景テクスチャを固定し、スクロール時にわずかな奥行き（擬似パララックス）を出す
       ※ iOS Safari の background-attachment:fixed 挙動が不安定なため PC のみ適用 */
    .concept, .featured, .info, .access, .contact {
        background-attachment: fixed;
    }
}

/* ==============================================
   追加：お知らせセクション／お知らせ一覧ページ
   ============================================== */
.news {
    padding: var(--section-py) 0;
    background-color: var(--bg-main);
    background-image:
        linear-gradient(180deg, rgba(255,255,255,.45), transparent 20%, transparent 80%, rgba(35,18,8,.10)),
        radial-gradient(ellipse 60% 65% at 100% 0%, rgba(200,128,30,.14), transparent 60%),
        radial-gradient(ellipse 55% 60% at 0% 100%, rgba(35,18,8,.10), transparent 60%),
        radial-gradient(rgba(160,100,50,.10) 1px, transparent 1.4px);
    background-size: 100% 100%, 100% 100%, 100% 100%, 15px 15px;
    box-shadow:
        inset 0 22px 36px -22px rgba(35,18,8,.45),
        inset 0 -22px 36px -22px rgba(35,18,8,.32);
}

.news__lead {
    max-width: 380px;
    margin: -2px auto 30px;
    color: var(--text-muted);
    text-align: center;
    font-size: .84rem;
}

.news__list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.news-card {
    position: relative;
    width: 100%;
    padding: 17px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-main);
    text-align: left;
    background-color: var(--bg-card);
    background-image:
        linear-gradient(145deg, rgba(255,255,255,.55), transparent 42%),
        repeating-linear-gradient(0deg, rgba(120,75,35,.025) 0 1px, transparent 1px 7px);
    box-shadow: var(--shadow-sm);
    transition: var(--tr-base);
    cursor: pointer;
}

.news-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.news-card__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 7px;
}

.news-card__category {
    color: var(--red);
    font-size: .73rem;
    font-weight: 700;
    letter-spacing: .08em;
}

.news-card time {
    color: var(--text-muted);
    font-size: .7rem;
}

.news-card__title {
    padding-right: 34px;
    margin-bottom: 5px;
    font-family: var(--font-serif);
    font-size: 1.02rem;
    line-height: 1.55;
}

.news-card__text {
    padding-right: 30px;
    color: var(--text-muted);
    font-size: .78rem;
    line-height: 1.65;
}

.news-card__arrow {
    position: absolute;
    top: 50%;
    right: 16px;
    color: var(--red);
    font-size: 1.35rem;
    transform: translateY(-50%);
}

.news-card__new {
    position: absolute;
    top: -8px;
    right: 12px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--red);
    color: #fff;
    font-size: .62rem;
    letter-spacing: .12em;
    box-shadow: 0 3px 8px rgba(80,25,10,.25);
}

.news__more {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.news-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(35,18,8,.72);
    opacity: 0;
    visibility: hidden;
    transition: var(--tr-base);
}

.news-modal.is-visible {
    opacity: 1;
    visibility: visible;
}

.news-modal__panel {
    width: min(100%, 440px);
    max-height: 85vh;
    overflow: auto;
    border: 3px solid var(--wood-dark);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    box-shadow: var(--shadow-md);
    transform: translateY(16px) scale(.98);
    transition: var(--tr-base);
}

.news-modal.is-visible .news-modal__panel { transform: none; }

.news-modal__head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 18px;
    border-bottom: 1px solid var(--border);
}

.news-modal__head h3 {
    font-family: var(--font-serif);
    font-size: 1.15rem;
}

.news-modal__head h3 span {
    display: block;
}

.news-modal__official-link {
    display: inline-block;
    margin-top: 8px;
    color: #8b0000;
    font-family: var(--font-sans);
    font-size: .85rem;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.news-modal__close {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border: 0;
    border-radius: 50%;
    background: var(--wood-mid);
    color: var(--text-main);
    font-size: 1.2rem;
    cursor: pointer;
}

.news-modal__body {
    padding: 18px;
    color: var(--text-muted);
    font-size: .85rem;
}

.news-modal__body p { margin-bottom: 14px; }

.news-calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-top: 15px;
}

.news-calendar span {
    min-height: 36px;
    display: grid;
    place-items: center;
    border-radius: 4px;
    background: #F2E5CC;
    font-size: .72rem;
}

.news-calendar .head {
    min-height: 25px;
    background: transparent;
    color: var(--text-muted);
    font-weight: 700;
}

.news-calendar .closed { background: #8A6A4E; color: #fff; font-weight: 700; }
.news-calendar .holiday { background: #E8B7AC; color: #7F1D11; font-weight: 700; }

/* news.html */
body.page-news {
    background-color: #D4BC8A;
    background-image:
        repeating-linear-gradient(.3deg, transparent 0 6px, rgba(0,0,0,.04) 6px 7px, transparent 7px 16px, rgba(255,255,255,.06) 16px 17px, transparent 17px 28px, rgba(0,0,0,.03) 28px 29px),
        linear-gradient(180deg, #E4D09C, #C8A87E 18%, #D4BC8A 35%, #C2A678 55%, #D8C290 72%, #CAB082 88%, #D2BA88);
}

.news-archive {
    min-height: 100vh;
    padding: 42px 0 72px;
    background-color: var(--bg-main);
    background-image:
        linear-gradient(180deg, rgba(255,255,255,.45), transparent 20%, transparent 80%, rgba(35,18,8,.10)),
        radial-gradient(ellipse 60% 65% at 100% 0%, rgba(200,128,30,.14), transparent 60%),
        radial-gradient(ellipse 55% 60% at 0% 100%, rgba(35,18,8,.10), transparent 60%),
        radial-gradient(rgba(160,100,50,.10) 1px, transparent 1.4px);
    background-size: 100% 100%, 100% 100%, 100% 100%, 15px 15px;
}

.news-archive__back {
    display: inline-block;
    margin-bottom: 26px;
    color: var(--red);
    font-size: .82rem;
    font-weight: 700;
}

.news-filter {
    margin-bottom: 28px;
    padding: 18px;
    border: 3px solid var(--wood-dark);
    border-radius: var(--radius-md);
    background-color: var(--wood-mid);
    background-image:
        repeating-linear-gradient(.6deg, rgba(90,55,20,.05) 0 1px, transparent 1px 7px, rgba(255,255,255,.05) 7px 8px, transparent 8px 15px),
        linear-gradient(180deg, var(--wood-light), var(--wood-mid) 55%, var(--wood-dark));
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.35);
}

.news-filter__label {
    display: block;
    margin-bottom: 10px;
    color: var(--red);
    font-size: .8rem;
    font-weight: 700;
}

.news-filter__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.news-filter select {
    width: 100%;
    min-height: 45px;
    padding: 0 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text-main);
}

.news-filter__result {
    margin-top: 10px;
    color: #6E4B2E;
    font-size: .73rem;
}

.news-month { margin-top: 28px; }
.news-month__title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    font-family: var(--font-serif);
    font-size: 1rem;
    letter-spacing: .08em;
}
.news-month__title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--border-strong), transparent);
}
.news-month__list { display: flex; flex-direction: column; gap: 12px; }
.news-archive__empty {
    padding: 30px 18px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    background: rgba(251,245,236,.65);
    text-align: center;
    color: var(--text-muted);
    font-size: .82rem;
}

@media (min-width: 600px) {
    .news__list { display: grid; grid-template-columns: repeat(3, 1fr); }
    .news-card { min-height: 172px; }
    .news-month__list { display: grid; grid-template-columns: repeat(2, 1fr); }
}

.news-modal__text{
    margin-bottom:16px;
    color:var(--text-muted);
    line-height:1.8;
}

.news-modal__image{
    width:100%;
    display:block;
    border-radius:12px;
    border:3px solid var(--wood-dark);
    box-shadow:var(--shadow-sm);
}