@charset "utf-8";

/* ==========================================================================
   焼肉 大王 — サイト共通スタイル

   スマホ表示（375px基準）のレイアウトは各要素の style 属性で確定しています。
   このファイルが担当するのは次の3つだけで、スマホ表示には手を入れません。
     1. 基本リセットと共通の見た目
     2. ハンバーガーメニューの開閉
     3. タブレット・PC幅での拡張（@media 内のみ）
   ========================================================================== */

/* --- 1. 基本 ------------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #0a0908;
  color: #efe9dd;
  font-family: "Zen Kaku Gothic New", sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: #efe9dd; text-decoration: none; }
a:hover { color: #c0392b; }

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

/* 見出しは style 属性の指定をそのまま活かす（余白と文字サイズをリセット） */
h1, h2, h3 {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-wrap: balance;
}

/* 本文の折り返しを読みやすく */
p { margin: 0; }

/* キーボード操作時のフォーカス表示 */
a:focus-visible,
button:focus-visible { outline: 2px solid #c9584c; outline-offset: 3px; }

/* hidden 属性を style="display:flex" より優先させる（メニューの初期非表示） */
[hidden] { display: none !important; }

/* --- 2. ハンバーガーメニュー -------------------------------------------- */
.menu-btn { -webkit-tap-highlight-color: transparent; }
.menu-btn:hover { border-color: rgba(239, 233, 221, .7); }
.menu-close:hover { border-color: rgba(239, 233, 221, .7); }

/* メニューを開いている間は背面をスクロールさせない */
body.is-menu-open { overflow: hidden; }

/* メニューが5項目になったので、画面の低い端末では中身が入りきらないことがある。
   その場合はメニューの中だけをスクロールできるようにする（背面は動かさない）。 */
.menu-sheet {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.menu-inner {
  align-self: flex-start;
  min-height: 100%;
}

/* 画面の高さが足りない端末では、行間を少しだけ詰めて1画面に収める */
@media (max-height: 680px) {
  .menu-inner { padding-top: 18px !important; padding-bottom: 22px !important; }
  .menu-inner > div:nth-child(2) { margin-top: 18px !important; }
  .menu-inner > div:nth-child(2) > * { padding-top: 12px !important; padding-bottom: 12px !important; }
  .menu-inner > a > span:nth-child(2) { font-size: 24px !important; }
  .menu-inner > div:nth-child(2) > * span:not(.is-current-tag) { font-size: 18px !important; }
  .menu-inner > a { margin-top: 18px !important; padding-top: 14px !important; padding-bottom: 14px !important; }
  .menu-inner > div:last-child { padding-top: 16px !important; }
}

/* PC用の横並びナビはスマホでは非表示 */
.pcnav { display: none; }

/* --- キービジュアルの陰影 ------------------------------------------------ */
/* 写真は使わず、墨色のグラデーションと中央のほのかな灯りだけで奥行きを出す。 */
.kv-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(84% 52% at 44% 38%, rgba(160, 38, 30, .44), rgba(0, 0, 0, 0) 70%),
    radial-gradient(58% 38% at 50% 97%, rgba(143, 29, 24, .20), rgba(0, 0, 0, 0) 72%);
  pointer-events: none;
}

/* --- 写真の入る枠 -------------------------------------------------------- */
/* お店のお写真をお預かりするまでの「墨の面」。
   ダミー枠ではなく、そのままでも意匠として成立するように組んでいます。
   写真をいただいたら、この .ph の中に <img> を敷くだけで差し替わります。 */
.ph {
  position: relative;
  overflow: hidden;
  background-color: #0b0a09;
  background-image:
    radial-gradient(124% 96% at 50% -8%, rgba(143, 29, 24, .22), rgba(0, 0, 0, 0) 58%),
    linear-gradient(163deg, #1d1a17 0%, #131110 44%, #0a0908 100%);
  border: 1px solid rgba(239, 233, 221, .12);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 掛け軸のように、内側にもう一本だけ細い罫を引く */
.ph::before {
  content: "";
  position: absolute;
  inset: 13px;
  border: 1px solid rgba(239, 233, 221, .10);
  pointer-events: none;
}

/* 上からの淡い光。黒一色の平らな面に見えないように */
.ph::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(239, 233, 221, .055), rgba(0, 0, 0, 0) 46%);
  pointer-events: none;
}

/* 明るい面（生成りの背景）に置く墨の枠は、内罫だけ少し落ち着かせる */
.sec-light .ph { border-color: rgba(28, 25, 23, .28); }

.ph-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 8px;
}

/* 枠の中に置く縦書きの一語 */
.ph-word {
  writing-mode: vertical-rl;
  white-space: nowrap;
  font-family: "Yuji Syuku", serif;
  font-size: 25px;
  letter-spacing: 0.2em;
  color: rgba(244, 239, 229, .8);
  text-shadow: 0 2px 16px rgba(0, 0, 0, .7);
}
.ph-word--lg { font-size: 34px; }

/* 落款（印）。焼肉大王の「大王」 */
.ph-seal {
  width: 42px;
  height: 42px;
  flex: none;
  border: 1.5px solid rgba(178, 60, 51, .9);
  color: rgba(212, 106, 96, .95);
  font-family: "Yuji Syuku", serif;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ph-seal--sm { width: 34px; height: 34px; font-size: 11px; }

/* --- キービジュアルの墨の面 -------------------------------------------- */
/* 他のブロックと同じ .ph の質感をそのまま使い、看板の言葉と落款を収める。
   「味で勝負する」の縦組みはこれまでどおり右側に置いたまま。 */
/* 墨の面は背面に固定配置する。並びの計算に関わらせないことで、
   どのブラウザでも「味で勝負する」の縦組みが押し出されないようにしている。
   right の値は、縦組みの見出しと区切り線のぶんを空けた幅。 */
.kv-panel {
  position: absolute;
  top: 6px;
  bottom: 34px;
  left: 0;
  right: 100px;
  z-index: 0;
}
/* 見出しと区切り線は墨の面より前に出す */
.kv-stage > .kv-title,
.kv-stage > div:not(.kv-panel) { position: relative; z-index: 1; }

/* 看板の言葉。筆文字の見出しと役割が重ならないよう明朝で組む */
.kv-sign {
  writing-mode: vertical-rl;
  white-space: nowrap;
  font-family: "Shippori Mincho B1", serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: rgba(244, 239, 229, .88);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .7);
}

/* --- Googleマップへの導線 ----------------------------------------------- */
/* 店主の言葉の直後に置く、クチコミへのリンク。
   事務的な一覧の行より少し前に出しつつ、電話のボタンより主張は弱くしている。 */
.gmap-cta:hover {
  border-color: rgba(239, 233, 221, .62);
  background: rgba(239, 233, 221, .09);
}

/* 狭い端末では1行に収まるよう文字を少し詰める（文言は変えない） */
@media (max-width: 400px) {
  .gmap-cta > span:first-child { font-size: 15px !important; letter-spacing: 0.03em !important; }
}
@media (max-width: 359px) {
  .gmap-cta { min-height: 54px !important; padding: 0 12px !important; }
  .gmap-cta > span:first-child { font-size: 13.5px !important; letter-spacing: 0.01em !important; }
}

/* 落款の上に引く短い罫 */
.kv-rule {
  width: 44px;
  height: 1px;
  background: rgba(239, 233, 221, .3);
}

/* --- 区切り線 ------------------------------------------------------------ */
/* 単純な罫線をやめて、両端が消える細いグラデーションの線にする */
.sec,
.topbar { position: relative; }

.sec[style*="border-top: 1px solid rgba(239,233,221,.08)"] { border-top-color: transparent !important; }
.sec[style*="border-top: 1px solid rgba(239,233,221,.08)"]::before,
.topbar[style*="border-bottom: 1px solid rgba(239,233,221,.1)"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(239, 233, 221, 0) 0%,
    rgba(239, 233, 221, .16) 18%,
    rgba(201, 88, 76, .42) 50%,
    rgba(239, 233, 221, .16) 82%,
    rgba(239, 233, 221, 0) 100%);
}
.sec[style*="border-top: 1px solid rgba(239,233,221,.08)"]::before { top: 0; }
.topbar[style*="border-bottom: 1px solid rgba(239,233,221,.1)"] { border-bottom-color: transparent !important; }
.topbar[style*="border-bottom: 1px solid rgba(239,233,221,.1)"]::after { bottom: 0; }

/* 一覧の行の罫線は、左から薄く消えていく線に */
.sec [style*="padding: 14px 0; border-top"],
.sec [style*="padding: 16px 0; border-top"],
.sec [style*="padding: 18px 0; border-top"],
.menu-inner [style*="border-top: 1px solid rgba(239,233,221,.14)"] {
  position: relative;
  border-top-color: transparent !important;
}
.sec [style*="padding: 14px 0; border-top"]::before,
.sec [style*="padding: 16px 0; border-top"]::before,
.sec [style*="padding: 18px 0; border-top"]::before,
.menu-inner [style*="border-top: 1px solid rgba(239,233,221,.14)"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(239, 233, 221, .26) 0%,
    rgba(239, 233, 221, .13) 55%,
    rgba(239, 233, 221, 0) 100%);
}
.sec [style*="border-bottom: 1px solid rgba(239,233,221,.12)"],
.sec [style*="border-bottom: 1px solid rgba(239,233,221,.14)"],
.menu-inner [style*="border-bottom: 1px solid rgba(239,233,221,.14)"] {
  border-bottom-color: transparent !important;
}
.sec [style*="border-bottom: 1px solid rgba(239,233,221,.12)"]::after,
.sec [style*="border-bottom: 1px solid rgba(239,233,221,.14)"]::after,
.menu-inner [style*="border-bottom: 1px solid rgba(239,233,221,.14)"]::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(239, 233, 221, .26) 0%,
    rgba(239, 233, 221, .13) 55%,
    rgba(239, 233, 221, 0) 100%);
}

/* 「くわしく見る →」の下線も同じ質感に */
.sec a[style*="border-bottom: 1px solid rgba(239,233,221,.4)"],
.sec a[style*="border-bottom: 1px solid rgba(28,25,23,.35)"] {
  position: relative;
  border-bottom-color: transparent !important;
}
.sec a[style*="border-bottom: 1px solid rgba(239,233,221,.4)"]::after,
.sec a[style*="border-bottom: 1px solid rgba(28,25,23,.35)"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, currentColor, rgba(201, 88, 76, .6) 60%, transparent);
  opacity: .55;
  transition: opacity .3s ease;
}
.sec a[style*="border-bottom: 1px solid rgba(239,233,221,.4)"]:hover::after,
.sec a[style*="border-bottom: 1px solid rgba(28,25,23,.35)"]:hover::after { opacity: 1; }

/* --- 余白のリズム -------------------------------------------------------- */
/* 見せ場（キービジュアル直後・肉うどん・店主の言葉）の前後をゆったりとる */
main > .sec:first-child { padding-top: 60px !important; }
.sec-voice { padding-top: 78px !important; padding-bottom: 70px !important; }
.sec-feature { padding-top: 72px !important; padding-bottom: 64px !important; }
.sec-info { padding-top: 60px !important; }
.footer { padding-top: 52px !important; }

/* --- スクロールで静かに現れる ------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .75s cubic-bezier(.22, .61, .36, 1),
              transform .75s cubic-bezier(.22, .61, .36, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* 同じブロックの中で、少しずつ遅らせて順に現れる */
.sec > .reveal:nth-child(2) { transition-delay: 70ms; }
.sec > .reveal:nth-child(3) { transition-delay: 140ms; }
.sec > .reveal:nth-child(4) { transition-delay: 210ms; }
.sec > .reveal:nth-child(n+5) { transition-delay: 270ms; }

/* 動きを減らす設定の端末では動かさない */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* --- 3-a. 375px での見出し折り返し調整 ---------------------------------- */
/* 店主の言葉は1行ずつ改行位置が決まっているため、狭い端末でも途中で折り返さない。
   375px幅では19pxだと「みなさまの笑顔が私たちの活力です」が2行に割れるため、
   400px未満のときだけ文字サイズをわずかに詰める（文言は一切変更していません）。 */
@media (max-width: 400px) {
  .voice-text { font-size: 17.5px !important; letter-spacing: 0.04em !important; }
}

/* さらに狭い端末（iPhone SE など320px幅）でも4行のまま収める */
@media (max-width: 359px) {
  .sec-voice { padding-left: 16px !important; padding-right: 16px !important; }
  .voice-text { font-size: 15px !important; letter-spacing: 0.02em !important; }
}

/* --- 3-b. タブレット幅（600px〜） --------------------------------------- */
@media (min-width: 600px) {
  .page { max-width: 640px !important; }
  .menu-inner { max-width: 640px !important; }

  .sec,
  .kv { padding-left: 40px !important; padding-right: 40px !important; }
  .sec.hero-visual { padding-left: 40px !important; padding-right: 40px !important; }
}

/* --- 3-c. PC幅（900px〜） ----------------------------------------------- */
@media (min-width: 900px) {

  .page {
    max-width: 1080px !important;
    border-left: 1px solid rgba(239, 233, 221, .06);
    border-right: 1px solid rgba(239, 233, 221, .06);
  }

  .sec,
  .kv { padding-left: 64px !important; padding-right: 64px !important; }

  .topbar { padding-top: 26px !important; padding-bottom: 22px !important; }

  /* キービジュアル */
  .kv { padding-bottom: 88px !important; }
  .kv-stage { min-height: 480px !important; }
  .kv-panel { top: 10px; bottom: 48px; right: 152px; }
  .kv-sign { font-size: 23px; letter-spacing: 0.28em; }
  .kv-panel .ph-seal { width: 50px; height: 50px; font-size: 15px; }
  .kv-rule { width: 56px; }
  /* 縦書きの見出しなので、画面の高さもみてサイズを決める */
  .kv-title { font-size: clamp(52px, min(6.2vw, 7.8vh), 88px) !important; }
  .kv-foot { max-width: 620px; }

  /* 画像＋本文のセクションを左右2カラムに */
  .sec-split {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 56px !important;
    align-items: start;
  }
  .sec-split > *:nth-child(1) { grid-column: 1 / -1; margin-bottom: 4px; }
  .sec-split > *:nth-child(2) {
    grid-column: 1;
    grid-row: 2 / span 20;
    align-self: start;
    height: auto !important;      /* 固定高さの写真枠を解除 */
    aspect-ratio: 4 / 3;          /* style 属性で比率指定済みの枠はそちらが優先 */
  }
  .sec-split > *:nth-child(n+3) { grid-column: 2; }

  /* 見せ場はPCでもさらにゆったりと */
  main > .sec:first-child { padding-top: 84px !important; }
  .sec-feature { padding-top: 104px !important; padding-bottom: 96px !important; }

  /* 店主の言葉：中央寄せで読みやすく */
  .sec-voice { align-items: center; padding-top: 112px !important; padding-bottom: 96px !important; }
  .sec-voice > * { width: 100%; max-width: 660px; }
  .voice-text { font-size: 21px !important; }

  /* 店舗情報：左に一覧、右に地図 */
  .sec-info {
    display: grid !important;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    column-gap: 56px !important;
    align-items: start;
  }
  .sec-info > *:nth-child(1) { grid-column: 1 / -1; }
  .sec-info > *:nth-child(2) { grid-column: 1; grid-row: 2; }
  .sec-info > *:nth-child(3) { grid-column: 1; grid-row: 3; }
  .sec-info > *:nth-child(4) {   /* 地図 */
    grid-column: 2;
    grid-row: 2;
    align-self: stretch;
    height: auto !important;
    min-height: 380px;
  }
  .sec-info > *:nth-child(5) { grid-column: 2; grid-row: 3; }

  /* 大王について：ページ見出し・創業 */
  .pagehead { padding-top: 72px !important; padding-bottom: 56px !important; }
  .pagehead > div:last-child { max-width: 720px; }
  .sec-founded { padding-bottom: 56px !important; }
  .sec-founded > *:first-child { max-width: 420px; }

  /* 提供しているもの：左に品目、右に写真 */
  .sec-menu {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 56px !important;
    align-items: start;
  }
  .sec-menu > *:nth-child(1) { grid-column: 1 / -1; }
  .sec-menu > *:nth-child(2) { grid-column: 1; }
  .sec-menu > *:nth-child(3) { grid-column: 2; grid-row: 2; }
  .sec-menu > *:nth-child(4) { grid-column: 1 / -1; grid-row: 3; }

  /* お品書きの価格案内・アクセスの目印案内は、読みやすい幅で止める */
  .sec-price > * { width: 100%; max-width: 640px; }
  .sec-guide > * { max-width: 760px; }

  /* お弁当ページ：主役ビジュアルは幅を抑えて中央に */
  .hero-visual > div { max-width: 540px; margin: 0 auto; }

  /* お弁当2品を横並びに */
  .items-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px !important;
  }

  /* お問い合わせ帯 */
  .sec-contact { align-items: center; padding-top: 56px !important; padding-bottom: 56px !important; }
  .sec-contact > * { width: 100%; max-width: 640px; }

  /* フッターを横並びに */
  .footer {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    column-gap: 64px !important;
    row-gap: 28px !important;
    padding-top: 56px !important;
  }
  .footer > * { flex: 0 1 auto; }
  .footer > *:last-child { flex-basis: 100%; }
}

/* --- 3-d. 横並びナビ（1100px〜） ----------------------------------------- */
/* メニューが5項目になったので、横一列に無理なく置ける幅からだけ切り替える。
   これより狭い画面では、900px以上でもハンバーガーのままにしています。 */
@media (min-width: 1100px) {
  .menu-btn { display: none !important; }
  .topbar-actions { gap: 30px !important; }

  .pcnav {
    display: flex;
    align-items: center;
    gap: 20px;
    font-family: "Shippori Mincho B1", serif;
    font-size: 14px;
    letter-spacing: 0.06em;
  }
  .pcnav-link {
    padding-bottom: 5px;
    border-bottom: 1px solid transparent;
    white-space: nowrap;
    color: #cfc6ba;
  }
  .pcnav-link:hover { color: #efe9dd; border-bottom-color: rgba(239, 233, 221, .45); }
  .pcnav-link.is-current { color: #efe9dd; border-bottom-color: #8f1d18; }
}

/* --- 3-e. 大画面（1280px〜） -------------------------------------------- */
@media (min-width: 1280px) {
  .sec,
  .kv { padding-left: 88px !important; padding-right: 88px !important; }

  .pcnav { gap: 26px; font-size: 15px; letter-spacing: 0.08em; }
}

/* --- 印刷 --------------------------------------------------------------- */
@media print {
  .menu,
  .menu-btn { display: none !important; }
  body { background: #fff; color: #000; }
}