/* ============================================================
   麻辣王豆腐 TOP — アニメーション
   ・背景英字(.ghost)のスライド ・スクロールリビール ・FVパン ・提灯の揺れ
   進行拡張=JS(top-anim.js)がリビール/ゴースト対象にクラス付与
   ============================================================ */

/* スクロールで下からフェードアップ */
.anim-reveal{opacity:0;transform:translateY(26px);
  transition:opacity .55s cubic-bezier(.16,.75,.2,1),transform .55s cubic-bezier(.16,.75,.2,1);
  transition-delay:var(--d,0ms);will-change:opacity,transform}
.anim-reveal.in{opacity:1;transform:none}

/* 背景の巨大英字：セクション別の方向へ「連続」スライド（止まらない・高速）
   gd-right=右方向へ流れる / gd-left=左方向へ流れる */
.anim-ghost{opacity:0;transition:opacity .4s ease}
.anim-ghost.in{opacity:1}
.anim-ghost.gd-right.in{animation:gdMarqueeR 20s linear infinite}
.anim-ghost.gd-left.in{animation:gdMarqueeL 20s linear infinite}
/* gd-right=左の画面外→右の画面外へ（右で消え、また左の外から） */
@keyframes gdMarqueeR{from{transform:translateX(calc(-100% - 60px))}to{transform:translateX(calc(100vw + 60px))}}
/* gd-left=右の画面外→左の画面外へ（左で消え、また右の外から） */
@keyframes gdMarqueeL{from{transform:translateX(calc(100vw + 60px))}to{transform:translateX(calc(-100% - 60px))}}
.cta-band .ghost{position:absolute!important;z-index:1;color:rgba(255,255,255,.07)}

/* FV背景：ゆるやかなパン（ケンバーンズ） */
.hero{animation:heroPan 24s ease-in-out infinite alternate}
@keyframes heroPan{from{background-position:50% 40%}to{background-position:50% 62%}}

/* 提灯：やさしく揺れる */
.lantern{transform-origin:50% 6%;animation:lanternSway 6s ease-in-out infinite alternate}
.hero .lantern.l2{animation-duration:7.2s;animation-delay:-1.4s}
@keyframes lanternSway{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}

/* SCROLL の上下バウンド */
.scrollcue{animation:cueBob 2.4s ease-in-out infinite alternate}
@keyframes cueBob{from{transform:translateY(-7px)}to{transform:translateY(7px)}}

/* ボタン/カードのホバーを少しリッチに（既存を壊さない範囲で） */
.k-card,.m-card,.c-card,.sig-card,.card{transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .35s}
.btn,.resv{transition:transform .25s,background .3s}
.btn:hover,.head-cta .resv:hover,.cta-actions .resv:hover{transform:translateY(-2px)}

@media (prefers-reduced-motion: reduce){
  .anim-reveal,.anim-ghost,.hero,.lantern,.scrollcue{
    animation:none!important;transition:none!important;opacity:1!important;transform:none!important;
    background-position:center!important}
}

/* ===== レスポンシブ：英字マーキーの横溢れを止める =====
   overflow-x:hidden は body 側にもあり、html+body 両方に付くと position:sticky のヘッダーが
   追従しなくなる既知バグ（overflow-xだけの指定はoverflow-yを暗黙にautoへ変え、スクロールコンテナ化してしまう）。
   スクロールコンテナ化せず横溢れだけ切り落とす overflow-x:clip に統一（sticky追従を壊さない）。2026-07-25 */
html{overflow-x:clip}
.media,.news,.reviews,.meibutsu,.kodawari,.menu,.course,.interior,.cta-band,.info{overflow:hidden}

/* ===== SP微調整（3ファイル共通・見やすさ最適化） ===== */
@media (max-width:1023px){
  /* 名物：他セクション同様に左右余白 */
  .mei-inner{padding:0 22px}
  /* 「名物の秘密に迫る」ボタンを中央 */
  .mei-text .btn{display:flex;width:-webkit-fit-content;width:fit-content;margin:16px auto 0}
  /* メディア掲載：小さくコンパクトに */
  .media-row{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:8px}
  .media-chip{padding:9px 15px;font-size:14px}
  .media-chip small{font-size:9.5px;margin-top:1px}
  /* 各セクションの縦幅を圧縮 */
  .meibutsu,.menu,.course,.info,.interior,.reviews{padding-top:48px!important;padding-bottom:48px!important}
  .kodawari{padding-bottom:48px!important}
  .kodawari .head{padding-top:48px!important}
  .news,.media{padding-top:40px!important;padding-bottom:40px!important}
}

/* ===== 唐辛子アイコンを全消し（社長指示） ===== */
.chili{display:none!important}

/* ===== SP FVを整える＋スパイスカード圧縮 ===== */
@media (max-width:1023px){
  /* 麻辣に酔う を1行に収め、間延びを詰める */
  .hero-vert{font-size:50px!important;line-height:1.1!important}
  .hero-inner{gap:6px!important}
  .hero-sub{margin-top:8px!important}
  .hero-sub h2{font-size:19px!important;margin-bottom:8px!important}
  .hero-badge{margin-top:10px!important;gap:8px!important}
  .hero-catch{margin-top:14px!important}
  .hero-catch .big-kanji,.hero-catch .catch-h{font-size:28px!important}
  /* 青花椒/赤花椒/特注豆腐 を横並びで幅を抑える */
  .spice-row{flex-direction:row!important;gap:7px!important}
  .spice{padding:13px 5px!important}
  .spice b{font-size:16px!important}
  .spice span{font-size:10px!important;letter-spacing:0!important}
}

/* ===== 多言語時のレイアウト保険（長い英語などで溢れないよう） ===== */
@media (max-width:1023px){
  /* 宴会大歓迎/Banquet Welcome は収まらなければ折返す */
  .course .kanji-band{flex-wrap:wrap;row-gap:0;column-gap:16px}
  .course .kanji-band .k1,.course .kanji-band .k2{white-space:nowrap}
}
/* 店舗情報テーブル：長い値も折返す */
.info td,.ov-table td{word-break:break-word;overflow-wrap:anywhere}
.media-chip{white-space:nowrap}

/* ===== 多言語：FV意匠テキストは非日本語では横組みで表示 ===== */
html[data-lang]:not([data-lang="ja"]) .hero-vert{writing-mode:horizontal-tb;font-size:58px;line-height:1.14;letter-spacing:.02em;height:auto}
html[data-lang]:not([data-lang="ja"]) .hero-catch{position:relative;max-width:360px;padding-right:0;text-align:right;display:block}
html[data-lang]:not([data-lang="ja"]) .hero-catch .catch-line{writing-mode:horizontal-tb;font-family:var(--serif);font-weight:900;font-size:40px;color:#fff;line-height:1.16;letter-spacing:.02em;text-shadow:0 6px 40px rgba(0,0,0,.85)}
html[data-lang]:not([data-lang="ja"]) .hero-catch .catch-line em{font-style:normal;color:#ff2a3d}
@media (max-width:1023px){
  html[data-lang]:not([data-lang="ja"]) .hero-vert{font-size:40px}
  html[data-lang]:not([data-lang="ja"]) .hero-catch{max-width:100%;text-align:center}
  html[data-lang]:not([data-lang="ja"]) .hero-catch .catch-line{font-size:26px;text-align:center}
}

/* ===== 下層ページ：英字マーキーの横溢れを止める ===== */
.sig,.menu-body,.col-body,.features,.kintro,.philo,.acc-top,.routes,.overview,.page-banner{overflow:hidden}

/* ===== バナー背景英字・予約帯の重ね順・電話ボタン ===== */
.page-banner{position:relative}
.page-banner .bnr-ghost{font-size:clamp(56px,14vw,120px);top:22px;left:-6px;color:rgba(255,255,255,.05);z-index:1}
@media (max-width:1023px){ .page-banner .bnr-ghost{top:16px} }
.page-banner .inner{position:relative;z-index:3}
.cta-band>*{position:relative;z-index:2}
.cta-actions a.tel{display:inline-block;border:1px solid rgba(255,255,255,.55);border-radius:2px;padding:10px 22px;text-decoration:none}
.cta-actions a.tel:hover{background:rgba(255,255,255,.12)}
/* info額縁を背景英字より前面に */
.info .info-frame{position:relative;z-index:2}

/* ===== FV背景の大きなブランド英字（右から左マーキー） ===== */
.hero .hero-ghost{font-size:clamp(90px,17vw,230px);top:40%;left:-10px;color:rgba(255,255,255,.22);text-shadow:0 2px 26px rgba(0,0,0,.6);white-space:nowrap;z-index:1}
@media (max-width:1023px){ .hero .hero-ghost{font-size:64px;top:auto;bottom:18%} }

/* ===== PC: FVの「。いなら」を気持ち右へ ===== */
.hero-catch .catch-h{transform:translateX(13px)}
@media (max-width:1023px){ .hero-catch .catch-h{transform:none} }

/* ============================================================
   SP レイアウト整え（ヘッダー/FV/提灯/カード縦圧縮）2026-07-24
   ※top-anim.cssは最後に読込＝inline/他CSSより優先
   ============================================================ */
@media (max-width:1023px){
  /* --- ヘッダー：ロゴ／WEB予約／電話番号／言語切替／ハンバーガーを375px幅の横1列に収める（TOP・下層共通=.head-top）
     ロゴは幅0に潰れないよう flex-shrink:0 で最低限確保し、他の要素を極限まで詰める。 --- */
  .head-top{flex-wrap:nowrap!important;padding:8px 6px!important;gap:3px!important}
  .brand{flex-shrink:0!important;gap:0!important}
  .brand .name{font-size:13px!important;letter-spacing:.02em!important;white-space:nowrap!important}
  .head-right{flex-shrink:1;min-width:0;gap:2px!important}
  .head-cta{flex-shrink:0;gap:2px!important}
  /* resv/tel-btn/lang-switch/navtoggleはflex-shrink:0で固定＝縮んで文字が重なるのを防ぎ、
     375px幅に収まるようpadding/font-sizeそのものを極限まで詰める */
  .head-cta .resv{flex-shrink:0;white-space:nowrap;padding:0 4px!important;font-size:8px!important;letter-spacing:0!important;gap:1px!important;height:27px!important}
  .head-cta .resv::after{display:none!important}
  .head-cta .tel-btn{flex-shrink:0;padding:0 3px!important;font-size:9px!important;gap:1px!important;height:27px!important;white-space:nowrap!important}
  .head-cta .tel-btn .ic{font-size:10px!important}
  .head-cta .tel-btn .tlabel{font-size:9px!important;white-space:nowrap!important}
  .lang-switch{flex-shrink:0;gap:0!important}
  .lang-switch button{flex-shrink:0;font-size:7px!important;padding:1px 2px!important;letter-spacing:0!important}
  .navtoggle{flex-shrink:0;width:24px!important;height:24px!important;padding:0 4px!important;margin-left:0!important}

  /* --- FV：麻辣に酔うを上へ／サブは下げて小さめ／「箸が止まらない」→バッジの順に組み替え --- */
  .hero{height:600px}
  .hero-inner{justify-content:flex-start!important;padding-top:146px!important;gap:0!important}
  .hero-copy{display:contents}
  .hero-vert{order:1}
  .hero-sub{order:2;margin-top:30px!important}
  .hero-catch{order:3!important;margin-top:24px!important}
  .hero-badge{order:4;margin-top:42px!important}
  .hero-sub .cat{font-size:16px!important}
  .hero-sub h2{font-size:17px!important;margin:6px 0 10px!important}
  .hero-sub p{font-size:12.5px!important;line-height:1.85!important}
  /* 背景英字：大きく・FVの中央を横断して流す */
  .hero .hero-ghost{font-size:92px;top:42%;bottom:auto;color:rgba(255,255,255,.15);text-shadow:0 2px 22px rgba(0,0,0,.55)}
  /* 提灯：FV上部の左右コーナー（中央のテキストに被らない位置）に表示 */
  .hero .lantern.l1{display:block!important;top:150px;left:6px;right:auto;width:30px;height:50px;opacity:.9}
  .hero .lantern.l2{display:block!important;top:150px;left:auto;right:6px;width:26px;height:44px;opacity:.8}

  /* --- SIGNATURE：提灯はタイトルの真上に（被らない）＋タイトルを縦組みに --- */
  .mei-title .lantern{display:block;position:static;top:auto;left:auto;margin:0 auto 6px;width:34px;height:58px}
  .mei-title .vwrap{flex-direction:column;gap:8px}
  .mei-title .vbig{white-space:nowrap}
  .mei-title .vsmall{margin-top:0}

  /* --- COMMITMENT：3枚を写真左＋本文右の横型にして縦を圧縮 --- */
  .k-grid{gap:14px}
  .k-card{display:flex;align-items:stretch}
  .k-card .ph{height:auto;width:40%;min-height:134px;flex-shrink:0}
  .k-card .in{padding:15px 16px 16px!important;flex:1}
  .k-card .no{font-size:24px}
  .k-card h3{font-size:16px;margin:3px 0 7px;line-height:1.35}
  .k-card p{font-size:12.5px;line-height:1.7}

  /* --- Course & Party：提灯は「Course & Party」の左右コーナーへ（宴会大歓迎に被らない） --- */
  .course .lantern.cl1{display:block;top:-4px;left:4px;width:32px;height:54px}
  .course .lantern.cl2{display:block;top:-4px;right:4px;width:32px;height:54px}

  /* --- Our Space：サブ見出しを1行に収める --- */
  .interior .sec-ttl{font-size:20px;white-space:nowrap;letter-spacing:.01em}

  /* --- Reviews：縦長を圧縮 --- */
  .reviews .head{margin-bottom:22px}
  .rating-row{gap:9px;margin-bottom:24px}
  .rating{padding:12px 8px}
  .rating .site{font-size:13px}
  .rating .star{font-size:19px;margin:4px 0 1px}
  .rating .cnt{font-size:11px}
  .rv-grid{gap:12px}
  .rv-card{padding:17px 18px}
  .rv-card::before{font-size:56px;top:2px}
  .rv-card .stars{margin-bottom:7px}
  .rv-card .q{font-size:13.5px;line-height:1.7}
  .rv-card .src{margin-top:11px}
  .rv-note{font-size:11px;margin-top:16px}

  /* --- COMMITMENT：見出しを1行／説明文を2行に --- */
  .kodawari .sec-ttl{font-size:20px;white-space:nowrap;letter-spacing:.01em}
  .kodawari p.intro{font-size:12.5px;line-height:1.75;max-width:340px}

  /* --- 店舗情報：見出し列を狭めて「店名」の値を1行に収める --- */
  .info th{width:64px;padding-left:2px;padding-right:6px}
  .info table tr:first-child td{white-space:nowrap}
}

/* ============================================================
   ヘッダー：SPハンバーガー（TOP・下層 完全共通・.site-head/.head-top構造）2026-07-24
   ============================================================ */
.navtoggle{display:none}
.nav-backdrop{display:none}
@media (max-width:1023px){
  .navtoggle{display:flex;flex-direction:column;justify-content:center;gap:5px;
    flex-shrink:0;width:38px;height:34px;padding:0 8px;margin-left:2px;
    background:rgba(10,6,4,.35);border:1px solid rgba(201,162,75,.5);border-radius:3px;cursor:pointer;z-index:60}
  .navtoggle span{display:block;height:2px;width:100%;background:#f3ece2;border-radius:2px;transition:.25s}
  header.nav-open .navtoggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  header.nav-open .navtoggle span:nth-child(2){opacity:0}
  header.nav-open .navtoggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  /* 背景オーバーレイ：ドロワー表示中は下の画面を暗幕で覆い、タップで閉じられるようにする。
     nav-backdropはheader(.site-head)の子ではなく直後の兄弟要素にして、ビューポート全体を基準にfixedさせる。 */
  header.nav-open + .nav-backdrop{display:block;position:fixed;inset:0;
    background:rgba(10,6,4,.6);z-index:49;animation:navBackdropIn .25s ease}
  @keyframes navBackdropIn{from{opacity:0}to{opacity:1}}
  /* ドロップダウン：ヘッダー下段のナビ帯(.gnav)を、開いた時だけ全幅ドロワーとして表示（TOP・下層共通） */
  header.nav-open .gnav{display:flex;flex-direction:column;gap:0;
    position:absolute;top:100%;left:0;width:100%;z-index:58;
    background:rgba(10,6,4,.98);border-top:1px solid rgba(201,162,75,.28);
    padding:4px 0 6px;box-shadow:0 18px 30px rgba(0,0,0,.4)}
  header.nav-open .gnav a{padding:13px 22px;font-size:15.5px;text-align:center;
    border-bottom:1px solid rgba(201,162,75,.12);width:auto}
  header.nav-open .gnav a::after{display:none}
  header.nav-open .gnav a:last-child{border-bottom:none}
  /* こだわりページ：導入見出しを1行に（inlineが後読みのため!important） */
  .kintro .vk{font-size:20px!important;white-space:nowrap;letter-spacing:.02em}
}

/* ============================================================
   ヘッダー追従（sticky・TOP/下層共通）＋アンカースクロール余白 2026-07-24
   ============================================================ */
header.scrolled{background:var(--sumi)!important;box-shadow:0 8px 24px rgba(0,0,0,.45)}
#meibutsu,#kodawari,#menu,#course,#info{scroll-margin-top:132px}
@media (max-width:1023px){
  #meibutsu,#kodawari,#menu,#course,#info{scroll-margin-top:96px}
}

/* === 言語プルダウン === */
.lang-dd{position:relative;display:inline-block}
.lang-trigger{display:inline-flex;align-items:center;gap:5px;padding:8px 12px;border:1px solid rgba(201,162,75,.5);border-radius:4px;background:rgba(0,0,0,.25);color:#f3ece2;font-size:13px;line-height:1;cursor:pointer;font-family:inherit}
.lang-trigger:hover{border-color:#c9a24b}
.lang-caret{font-size:10px;opacity:.8}
.lang-menu{position:absolute;top:calc(100% + 6px);right:0;background:#1a0f08;border:1px solid rgba(201,162,75,.4);border-radius:6px;overflow:hidden;display:none;z-index:300;min-width:112px;box-shadow:0 10px 26px rgba(0,0,0,.5)}
.lang-menu.open{display:block}
.lang-menu button{display:block;width:100%;text-align:left;padding:11px 16px;background:none;border:0;color:#f3ece2;font-size:13px;cursor:pointer;font-family:inherit}
.lang-menu button:hover{background:rgba(201,162,75,.16)}
/* === ヘッダー電話をアイコンボタンに === */
.head-right .tel-btn{width:44px;height:44px;min-width:44px;padding:0;border-radius:50%;border:1px solid rgba(201,162,75,.55);background:rgba(0,0,0,.22);display:inline-flex;align-items:center;justify-content:center;gap:0}
.head-right .tel-btn:hover{border-color:#c9a24b;background:rgba(201,162,75,.12)}
.head-right .tel-btn .tlabel{display:none}
.head-right .tel-btn .ic{font-size:20px;margin:0;line-height:1}

/* 2026-07-26 ヘッダーCTAの間隔を広げ左の空きへ／言語ボタン・プルダウンを拡大（PC） */
@media (min-width:1080px){
  .head-right{gap:28px!important;padding-right:6px}
  .head-cta{gap:18px!important}
  .lang-trigger{padding:13px 22px!important;font-size:16px!important;border-radius:6px}
  .lang-caret{font-size:12px!important}
  .lang-menu{min-width:210px!important;border-radius:8px;top:calc(100% + 10px)!important}
  .lang-menu button{padding:16px 24px!important;font-size:16px!important}
}