/* ============================================================
   麻辣王豆腐 — 共通スタイル（下層ページ用）
   トップ index.pc.html のデザインシステムを継承
   ============================================================ */
:root{
  --sumi:#0a0705; --cha:#2d140b; --cha2:#3d1e12; --cha3:#180d07;
  --aka:#c30d23; --aka-d:#9c0a1c; --kin:#c9a24b; --kin-l:#e0c187;
  --washi:#e9ddc7; --washi2:#e2d3b8; --ink:#2b1c12; --ink2:#5a4636;
  --cream:#f7f1e8; --white:#ffffff; --gray:#b9aa9a;
  --serif:"Noto Serif JP",serif; --sans:"Noto Sans JP",sans-serif; --en:"Cormorant Garamond",serif;
  --rai:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='18' viewBox='0 0 36 18'%3E%3Cpath d='M2 16 V6 H12 V12 H20 V2 H34' fill='none' stroke='%23c9a24b' stroke-width='1.3'/%3E%3C/svg%3E");
  --rai-ink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='18' viewBox='0 0 36 18'%3E%3Cpath d='M2 16 V6 H12 V12 H20 V2 H34' fill='none' stroke='%23b1935a' stroke-width='1.3'/%3E%3C/svg%3E");
  --lantern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 100'%3E%3Cline x1='31' y1='0' x2='31' y2='9' stroke='%23c9a24b' stroke-width='2'/%3E%3Crect x='22' y='7' width='18' height='6' rx='1.5' fill='%23c9a24b'/%3E%3Cellipse cx='31' cy='48' rx='28' ry='37' fill='%23b3101f'/%3E%3Cellipse cx='31' cy='48' rx='28' ry='37' fill='none' stroke='%23e8b34a' stroke-width='1.6'/%3E%3Cg stroke='%23e8b34a' stroke-width='1' fill='none' opacity='.5'%3E%3Cpath d='M31 12 V84'/%3E%3Cpath d='M16 24 Q5 48 16 72'/%3E%3Cpath d='M46 24 Q57 48 46 72'/%3E%3Cellipse cx='31' cy='48' rx='14' ry='37' fill='none'/%3E%3C/g%3E%3Crect x='22' y='83' width='18' height='6' rx='1.5' fill='%23c9a24b'/%3E%3Cg stroke='%23e8b34a' stroke-width='1.6'%3E%3Cline x1='27' y1='89' x2='27' y2='99'/%3E%3Cline x1='31' y1='89' x2='31' y2='100'/%3E%3Cline x1='35' y1='89' x2='35' y2='99'/%3E%3C/g%3E%3C/svg%3E");
  --chili:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath d='M9 11 Q12 6 17 9' stroke='%233c7a2e' stroke-width='2.4' fill='none' stroke-linecap='round'/%3E%3Cpath d='M15 10 Q34 12 33 30 Q32 39 24 37 Q29 30 24 23 Q18 15 15 10 Z' fill='%23c1121f'/%3E%3Cpath d='M19 15 Q29 18 29 29' stroke='%23e8637a' stroke-width='1.2' fill='none' opacity='.6'/%3E%3C/svg%3E");
  --corner:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath d='M4 40 V16 H12 V32 H28 V40 Z' fill='none' stroke='%23b1935a' stroke-width='1.6'/%3E%3C/svg%3E");
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--cream);background:var(--cha3);font-size:15px;line-height:1.9;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{width:min(1120px,calc(100% - 48px));margin:0 auto;position:relative;z-index:2}
.ph{background-size:cover;background-position:center;background-repeat:no-repeat}
.china-bd{height:18px;background-image:var(--rai);background-repeat:repeat-x;background-position:center;opacity:.55}
.china-bd.ink{background-image:var(--rai-ink);opacity:.5}
.lantern{background:var(--lantern) center/contain no-repeat;position:absolute;width:60px;height:100px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.45));z-index:4}
.chili{background:var(--chili) center/contain no-repeat;display:inline-block;width:26px;height:26px;vertical-align:middle}
.ghost{position:absolute;font-family:var(--en);font-style:italic;font-weight:600;font-size:190px;line-height:.8;letter-spacing:.04em;color:rgba(255,255,255,.045);white-space:nowrap;pointer-events:none;z-index:1;top:44px;left:-6px}
.ghost.r{left:auto;right:-6px}
.ghost.dk{color:rgba(70,45,25,.055)}
.lead-en{font-family:var(--en);font-style:italic;font-size:22px;letter-spacing:.12em;color:var(--aka);font-weight:500}
.lead-en.gold{color:var(--kin-l)}
.seal{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:var(--aka);color:#fff;font-family:var(--serif);font-weight:700;font-size:17px;letter-spacing:.02em;line-height:1.1;box-shadow:0 4px 14px rgba(155,10,28,.4);flex-shrink:0}
.sec-ttl{font-family:var(--serif);font-weight:600;font-size:40px;line-height:1.4;letter-spacing:.06em;color:var(--white);margin-top:6px}
.sec-ttl em{font-style:normal;color:var(--aka)}
.divider{width:56px;height:2px;background:var(--kin);margin:22px 0}
.btn{display:inline-flex;align-items:center;gap:12px;background:var(--aka);color:#fff;font-family:var(--serif);font-weight:600;font-size:16px;letter-spacing:.1em;padding:16px 40px;border-radius:1px;transition:.3s;cursor:pointer}
.btn:hover{background:var(--aka-d)}
.btn::after{content:"›";font-family:var(--en);font-size:22px;line-height:1}
.btn.ghost-b{background:transparent;border:1px solid var(--kin);color:var(--kin-l)}
.btn.ink-b{background:transparent;border:1px solid var(--ink);color:var(--ink)}

/* ===== HEADER（TOP・下層 完全共通／2段＝上段ブランド+CTA・下段ナビ帯／sticky追従） ===== */
.site-head{position:sticky;top:0;left:0;width:100%;z-index:50;display:flex;flex-direction:column;background:rgba(10,6,4,.94);backdrop-filter:blur(6px);border-bottom:1px solid rgba(201,162,75,.18)}
.head-top{display:flex;align-items:center;justify-content:space-between;padding:14px 48px 10px}
.brand{display:flex;align-items:center;gap:16px}
.brand .mark{width:50px;height:50px;border:1.5px solid var(--kin);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;font-size:22px;color:var(--kin-l);background:rgba(155,10,28,.35)}
.brand .name{font-family:var(--serif);font-weight:700;font-size:24px;letter-spacing:.14em;color:#fff;line-height:1.2}
.brand .name small{display:block;font-family:var(--en);font-size:11px;letter-spacing:.3em;color:var(--kin-l);font-weight:500;font-style:italic}
/* 上段の右側＝CTA+言語切替+ハンバーガーをまとめる箱（PCはハンバーガー非表示） */
.head-right{display:flex;align-items:center;gap:22px}
.lang-switch-slot{display:contents}
/* ナビ帯（下段・全ページ共通・PCのみ横1列表示／SPはハンバーガー内に格納）。横幅いっぱいに等間隔（space-between）で配置 */
.gnav{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 48px;border-top:1px solid rgba(201,162,75,.14)}
.gnav a{font-family:var(--serif);font-size:15px;letter-spacing:.08em;color:#f3ece2;position:relative;padding-bottom:4px}
.gnav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--kin);transition:.3s}
.gnav a:hover::after,.gnav a[aria-current]::after{width:100%}
.gnav a[aria-current]{color:var(--kin-l)}
.head-cta{display:flex;flex-direction:row;align-items:center;gap:16px}
.head-cta .resv{display:inline-flex;align-items:center;gap:8px;background:var(--aka);color:#fff;font-family:var(--serif);font-weight:600;font-size:14px;letter-spacing:.08em;padding:10px 22px;border-radius:1px}
.head-cta .tel{font-family:var(--en);font-size:21px;letter-spacing:.05em;color:#fff;font-weight:600}
.head-cta .tel small{font-family:var(--sans);font-size:11px;color:var(--gray);letter-spacing:.1em;margin-right:6px}

/* ===== ページバナー（下層タイトル帯） ===== */
.page-banner{position:relative;overflow:hidden;background:#160c06;padding:82px 0 74px;text-align:center;border-bottom:1px solid rgba(201,162,75,.16)}
.page-banner::before{content:"";position:absolute;inset:0;background-size:cover;background-position:center;opacity:.28}
.page-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,9,5,.7),rgba(16,9,5,.86))}
.page-banner .inner{position:relative;z-index:3}
.page-banner .en{font-family:var(--en);font-style:italic;font-size:22px;letter-spacing:.2em;color:var(--kin-l)}
.page-banner h1{font-family:var(--serif);font-weight:700;font-size:46px;letter-spacing:.14em;color:#fff;margin-top:8px;text-shadow:0 4px 24px rgba(0,0,0,.5)}
.page-banner .crumb{margin-top:20px;font-size:12px;letter-spacing:.1em;color:var(--gray)}
.page-banner .crumb a:hover{color:var(--kin-l)}
.page-banner .bnr-lantern{position:absolute;top:24px;z-index:3;width:42px;height:70px}
.page-banner .bl1{left:calc(50% - 260px)}
.page-banner .bl2{right:calc(50% - 260px)}

/* ===== 予約CTA帯（下層共通・赤ベタ／画像に依存しない） ===== */
.cta-band{background:linear-gradient(90deg,var(--aka-d),var(--aka));padding:70px 0;text-align:center;position:relative;overflow:hidden}
.cta-band .en{font-family:var(--en);font-style:italic;font-size:20px;letter-spacing:.16em;color:rgba(255,255,255,.9)}
.cta-band h2{font-family:var(--serif);font-weight:700;font-size:32px;color:#fff;margin:6px 0 26px;letter-spacing:.08em}
.cta-actions{display:flex;justify-content:center;align-items:center;gap:28px;flex-wrap:wrap}
.cta-actions .resv{background:#fff;color:var(--aka);font-family:var(--serif);font-weight:700;font-size:17px;letter-spacing:.08em;padding:17px 46px;border-radius:1px;display:inline-flex;gap:10px;align-items:center}
.cta-actions .tel{color:#fff;text-align:left}
.cta-actions .tel small{display:block;font-size:12px;letter-spacing:.1em;opacity:.9}
.cta-actions .tel b{font-family:var(--en);font-size:34px;letter-spacing:.04em;font-weight:600}
.cta-band .note{margin-top:18px;font-size:12px;color:rgba(255,255,255,.85)}

/* ===== FOOTER ===== */
footer{background:var(--sumi);padding:0 0 30px;position:relative}
footer .china-bd{opacity:.5}
footer .fwrap{width:min(1120px,calc(100% - 48px));margin:0 auto;padding:70px 0 0;display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap}
footer .fbrand .name{font-family:var(--serif);font-weight:700;font-size:24px;letter-spacing:.14em;color:#fff}
footer .fbrand small{font-family:var(--en);font-style:italic;font-size:12px;color:var(--kin-l);letter-spacing:.25em;display:block;margin-top:4px}
footer .fbrand p{font-size:12px;color:var(--gray);margin-top:18px;line-height:1.9}
footer .fnav{display:flex;gap:48px;flex-wrap:wrap}
footer .fnav ul{list-style:none}
footer .fnav li{padding:7px 0;font-family:var(--serif);font-size:14px;color:#d8ccbe;letter-spacing:.06em}
footer .fnav a:hover{color:var(--kin-l)}
footer .copy{text-align:center;margin-top:50px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);font-family:var(--en);font-size:12px;letter-spacing:.12em;color:var(--gray)}

/* ===== レスポンシブ（SP 〜1023） ===== */
@media (max-width:1023px){
  /* 下層フッターのモバイル縦積み＝home.cssと統一（余白バグ修正） */
  footer .fwrap{width:100%;padding:60px 22px 0;flex-direction:column;gap:34px}
  footer .fnav{gap:34px;flex-wrap:wrap}
  /* SPヘッダー＝1列固定（ロゴ／WEB予約／電話番号／言語切替／ハンバーガー）。ナビ帯のみハンバーガー内へ格納（top-anim.css参照） */
  .head-top{padding:10px 14px;gap:6px}
  .brand{gap:8px}
  .brand .name{font-size:16px}
  .brand .name small{display:none}
  .brand .mark{width:38px;height:38px;font-size:17px}
  .head-right{gap:5px}
  .gnav{display:flex;justify-content:space-between;gap:2px;padding:7px 10px;overflow-x:auto;-webkit-overflow-scrolling:touch;border-top:1px solid rgba(201,162,75,.14)}
  .gnav a{font-size:12px;letter-spacing:.02em;white-space:nowrap;padding-bottom:2px}
  .navtoggle{display:none}
  .nav-backdrop{display:none}
  .head-cta{flex-direction:row;align-items:center;gap:5px}
  .head-cta .resv{padding:7px 12px;font-size:10.5px;letter-spacing:.03em}
  .head-cta .tel{font-size:18px}
  .page-banner{padding:56px 0 48px}
  .page-banner h1{font-size:31px;letter-spacing:.08em}
  .page-banner .en{font-size:17px}
  .page-banner .bl1{left:16px}.page-banner .bl2{right:16px}
  .sec-ttl{font-size:28px}
  .ghost{font-size:96px}
  .cta-actions{flex-direction:column;gap:18px}
  .cta-band h2{font-size:25px}
}

/* 多言語ポップアップ（全ページ共通・下層でも動作させる 2026-07-28） */
.lang-pop{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;background:rgba(10,6,4,.92);padding:24px}
.lang-pop.open{display:flex}
.lang-pop__in{position:relative;width:100%;max-width:420px;text-align:center}
.lang-pop__ttl{font-family:var(--serif);color:var(--kin-l);font-size:15px;letter-spacing:.14em;margin-bottom:24px}
.lang-pop__list{display:flex;flex-direction:column;gap:14px}
.lang-pop__btn{display:block;width:100%;padding:18px;background:transparent;border:1.5px solid rgba(201,162,75,.55);border-radius:4px;color:#fff;font-family:var(--serif);font-size:18px;letter-spacing:.08em;cursor:pointer;transition:background .25s,border-color .25s}
.lang-pop__btn:hover,.lang-pop__btn.is-current{background:var(--aka);border-color:var(--aka);color:#fff}
.lang-pop__x{position:absolute;top:-58px;right:0;width:44px;height:44px;border:0;border-radius:50%;background:#fff;color:#222;font-size:24px;line-height:1;cursor:pointer}

/* SP下部固定バー（.sp-fixedbar）＝TOPのhome.cssと同一定義をsite.cssにも複製。
   footer.php（全ページ共通）に .sp-fixedbar のマークアップは含まれるが、CSSがhome.cssにしか
   無かったため、下層（site.css読込のみ）では無スタイルの巨大ブロックとなりフッター高さが
   異常値(2948px)まで膨張するバグの原因だった。TOPと全く同じルール(max-width:900px)で複製し解消。2026-07-29 */
.sp-fixedbar{display:none}
@media(max-width:900px){
  .sp-fixedbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:130;height:56px;
    padding-bottom:env(safe-area-inset-bottom,0px);background:var(--sumi);
    border-top:1px solid rgba(201,162,75,.35);box-shadow:0 -6px 18px rgba(0,0,0,.35)}
  .sp-fixedbar a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
    font-family:var(--serif);font-size:13.5px;letter-spacing:.03em;color:#fff}
  .sp-fixedbar .ic{width:18px;height:18px;flex:0 0 auto}
  .sp-fixedbar__tel{background:rgba(255,255,255,.06)}
  .sp-fixedbar__resv{background:var(--aka)}
  body{padding-bottom:calc(56px + env(safe-area-inset-bottom,0px))!important}
}

/* SPヘッダー: TOPと同配置＝右端クラスタ[言語→☎→WEB予約]を全ページ共通に (2026-07-28) */
@media (max-width:1023px){
  .head-top{padding:10px 10px!important}
  .brand .name{font-size:14px!important}
  .brand .mark{width:32px!important;height:32px!important;font-size:14px!important}
  .head-right{flex:0 1 auto!important;justify-content:flex-end!important;gap:8px!important;margin-left:auto!important;min-width:0}
  .head-cta{display:contents!important}
  .head-right .lang-switch{order:1!important;min-height:40px!important;display:inline-flex!important;align-items:center;padding:5px 6px!important;flex:0 0 auto}
  .head-right .tel-btn{order:2!important;width:40px!important;height:40px!important;display:inline-flex!important;justify-content:center;align-items:center;border-radius:50%;flex:0 0 auto}
  .head-cta .tel-btn .tlabel{display:none}
  .head-cta .tel-btn .ic{font-size:16px}
  .head-right .resv{order:3!important;padding:9px 11px!important;font-size:10.5px!important;letter-spacing:0!important;border-radius:3px;white-space:nowrap;flex:0 0 auto}
  .navtoggle{display:none!important}
}