/* 長岡屋 公式HP（設計書§7）。スマホを先に作る。外部フォントなし・JavaScriptなし。
   配色と余白は商談用の試作（20_商談/nagaokaya-web-demo/styles.css）を受け継ぐ。
   お知らせの帯（notice.js）は、高さを --search-support-notice-height に書く。変数は必ず初期値つきで使う。 */
:root {
  --ink: #232722;
  --paper: #f5f1e8;
  --paper-deep: #ece6d9;
  --paper-card: #f9f6ef;
  --muted: #6c665b;
  --rule: #d8d1c4;
  --rule-dot: #d8d1c4;
  --accent: #8b3e2e;
  --accent-deep: #713224;
  --brass: #b49c72;
  --night: #29312c;
  --night-text: #f5f1e8;
  --night-muted: #b9bcae;
  --serif: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", "YuMincho", "Noto Serif JP", "BIZ UDPMincho", serif;
  --sans: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "YuGothic", "Noto Sans JP", "Meiryo", system-ui, sans-serif;
  --max: 1264px;
  --text-max: 42rem;
  --cta-height: 60px;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(16px + var(--search-support-notice-height, 0px));
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.85;
  letter-spacing: .02em;
  /* 英単語を途中で折らない（anywhere だと表の列幅の計算で単語が数文字ずつに割れる）。長音「ー」・小書きの仮名を行頭に置かない */
  overflow-wrap: break-word;
  line-break: strict;
  padding-bottom: calc(var(--cta-height) + env(safe-area-inset-bottom, 0px));
}
img { max-width: 100%; }
a { color: var(--accent); text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* 暗い背景（フッター・営業時間の黒いカード・夜の段・下部のバーの電話と予約）では、明るい色の枠にする（コントラスト3:1以上） */
.site-footer a:focus-visible, .hours-card a:focus-visible, .night a:focus-visible { outline-color: #f0d9bd; }
.cta-bar a:focus-visible { outline: 3px solid var(--accent); outline-offset: -5px; }
.cta-bar .cta-tel:focus-visible, .cta-bar .cta-reserve:focus-visible { outline-color: #f0d9bd; }
a[href^="tel:"], .tel { white-space: nowrap; }
/* 時刻の範囲・番地・建物名などを途中で改行しない */
.nw { white-space: nowrap; }
p { margin: 0 0 12px; text-wrap: pretty; }
address { font-style: normal; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; text-wrap: balance; }
/* Chrome は文節で折り返す（Safari は無視して balance だけが効く）。「教えてくださ/い。」のような1〜2文字の行を作らない */
:lang(ja) h1, :lang(ja) h2, :lang(ja) h3 { word-break: auto-phrase; }
h1 { font-size: clamp(34px, 9.4vw, 60px); line-height: 1.3; letter-spacing: .08em; margin: 0 0 20px; }
h2 { font-size: clamp(24px, 6.2vw, 32px); line-height: 1.5; letter-spacing: .08em; margin: 0 0 20px; }
h2::before { content: ""; display: block; width: 28px; height: 2px; margin-bottom: 14px; background: var(--accent); }
h3 { font-size: 19px; font-weight: 600; line-height: 1.6; letter-spacing: .04em; margin: 0 0 8px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* お知らせの帯の受け皿。空のときは場所を取らない。 */
#search-support-notice:empty { display: none; }

.skip-link { position: absolute; left: 12px; top: -80px; z-index: 1100; padding: 10px 16px; background: var(--ink); color: var(--paper); }
.skip-link:focus { top: calc(8px + var(--search-support-notice-height, 0px)); }

/* ヘッダー: スマホは固定しない（下のバーが電話・予約・地図を持つ）。広い画面では1行にして帯の下に固定する。 */
.site-header { position: relative; z-index: 30; background: var(--paper); border-bottom: 1px solid var(--rule); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: calc(var(--max) + 40px); margin: 0 auto; padding: 12px 20px 2px; }
.brand { display: inline-flex; flex-direction: column; justify-content: center; flex-shrink: 0; min-height: 44px; color: var(--ink); text-decoration: none; }
.brand-name { flex-shrink: 0; white-space: nowrap; font-family: var(--serif); font-size: 28px; line-height: 1.2; letter-spacing: .14em; }
.brand-sub { font-size: 12px; line-height: 1.5; letter-spacing: .14em; color: var(--muted); }
.header-tel { display: none; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: 0 2px; max-width: calc(var(--max) + 40px); margin: 0 auto; padding: 0 12px 6px; list-style: none; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; font-size: 14px; color: var(--ink); text-decoration: none; border-bottom: 2px solid transparent; }
.site-nav a:hover { color: var(--accent); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--accent); }

/* トップの冒頭 */
.hero { display: grid; gap: 28px; max-width: calc(var(--max) + 40px); margin: 0 auto; padding: 32px 20px 36px; }
.eyebrow { margin: 0 0 10px; font-size: 13px; letter-spacing: .2em; color: var(--accent); }
.lead { margin: 0; max-width: 40em; font-size: 16px; line-height: 1.95; }
.cta-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
.btn { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; min-height: 56px; padding: 8px 16px; font-size: 15px; font-weight: 600; letter-spacing: .06em; line-height: 1.45; text-decoration: none; border: 1px solid transparent; }
.btn-sub { font-size: 12px; font-weight: 400; letter-spacing: .03em; opacity: .9; }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: #393f37; }
.btn-accent { grid-column: 1 / -1; order: 3; background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-deep); }
.btn-line { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-line:hover { background: var(--paper-deep); }
.btn-inline { display: inline-flex; margin-top: 4px; }

/* 営業時間（トップの黒いカード） */
.hours-card { padding: 26px 22px 18px; background: var(--ink); color: var(--paper); }
.hours-card h2 { margin-bottom: 8px; color: var(--paper); font-size: 24px; }
.hours-card h2::before { background: var(--brass); }
.hours-card p { margin: 12px 0 0; font-size: 14px; color: var(--night-muted); }
.hours-card .more a { color: #f0d9bd; }
.hours-table { width: 100%; border-collapse: collapse; }
.hours-table th { width: 4.6em; padding: 12px 12px 12px 0; font-size: 14px; font-weight: 400; color: var(--muted); text-align: left; vertical-align: top; white-space: nowrap; border-bottom: 1px solid var(--rule); }
.hours-table td { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.hours-card .hours-table th { color: var(--night-muted); border-color: #474d45; }
.hours-card .hours-table td { border-color: #474d45; }
.hours-range { display: block; font-family: var(--serif); font-size: 22px; line-height: 1.4; letter-spacing: .04em; }
.hours-lo { display: block; font-size: 13px; opacity: .85; }
.as-of { font-size: 13px; color: var(--muted); }
.hours-card .as-of { color: var(--night-muted); }
.special-hours { margin: 12px 0 0; padding-left: 1.2em; }
.hours-card .special-hours { font-size: 14px; color: var(--night-muted); }

/* 写真（許可済みのものだけ。無くても組版が成り立つ） */
.photo { margin: 0; }
.photo img { display: block; width: 100%; height: auto; }
.photo figcaption { margin-top: 6px; font-size: 12px; color: var(--muted); }
.photo-band { max-width: calc(var(--max) + 40px); margin: 0 auto; padding: 0 20px 8px; }
.photo-band img { aspect-ratio: 4 / 3; object-fit: cover; object-position: center 55%; }

/* 節 */
.section { max-width: calc(var(--max) + 40px); margin: 0 auto; padding: 44px 20px; }
.section + .section { border-top: 1px solid var(--rule); }
.section > p, .section .story-text p { max-width: var(--text-max); }
.more { margin: 16px 0 0; }
.section + .section.page-next { border-top: 0; padding-top: 0; }
.more a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; text-decoration: none; text-wrap: balance; border-bottom: 1px solid currentColor; }
.more a::after { content: "→"; font-family: var(--sans); }

/* お知らせ・今月の蕎麦 */
.notice-list { margin: 0; padding: 0; list-style: none; max-width: var(--text-max); }
.notice-list li { margin-bottom: 12px; padding: 16px 18px; background: var(--paper-card); border-left: 3px solid var(--accent); }
.notice-list h3 { margin: 0 0 4px; }
.seasonal-card { max-width: 32rem; padding: 24px 22px; background: var(--paper-card); border: 1px solid var(--rule); }
.seasonal-month { margin: 0 0 6px; font-size: 13px; letter-spacing: .14em; color: var(--accent); }
.seasonal-card h3 { font-size: 24px; font-weight: 500; }
.seasonal-price { margin: 8px 0 4px; font-family: var(--serif); font-size: 22px; }
.seasonal-period { margin: 0; font-size: 14px; color: var(--muted); }
.tax { margin-left: 2px; font-family: var(--sans); font-size: .7em; color: var(--muted); letter-spacing: 0; }

/* お昼の長岡屋 */
.feature-grid { display: grid; gap: 24px; }
.feature { padding: 22px 20px 16px; background: var(--paper-card); border-top: 2px solid var(--accent); }
.feature .photo { margin: -22px -20px 18px; }
.feature-photo img { aspect-ratio: 4 / 3; object-fit: cover; }
.feature p { margin-bottom: 8px; }
.feature .more { margin-top: 8px; }
.feature-price { font-family: var(--serif); font-size: 22px; }
.feature.is-signature { border-top-color: var(--brass); }
.feature-label { margin: 0 0 4px; font-size: 13px; letter-spacing: .14em; color: var(--accent); }

/* 夜の長岡屋（帯の幅いっぱい） */
.section.night { max-width: none; padding: 52px 20px; background: var(--night); color: var(--night-text); }
.section.night + .section { border-top: 0; }
.night-inner { display: grid; gap: 28px; max-width: var(--max); margin: 0 auto; }
.night h2 { color: var(--paper); }
.night h2::before { background: var(--brass); }
.night p { max-width: var(--text-max); }
.night a { color: #f0d9bd; }
.night-photo img { aspect-ratio: 4 / 3; object-fit: cover; }

/* もうすぐ創業100年 */
.centennial { display: grid; gap: 4px 36px; align-items: center; }
.centennial-number { margin: 0; font-family: Georgia, "Times New Roman", var(--serif); font-size: 96px; line-height: 1; letter-spacing: -.04em; color: var(--accent); }

/* 定義の一覧（ご来店の前に・住所と地図） */
.facts-list { max-width: var(--text-max); margin: 0; border-top: 1px solid var(--rule); }
.facts-list > div { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.facts-list dt { font-size: 14px; color: var(--muted); }
.facts-list dd { margin: 0; }
.address-line { font-size: 17px; }

/* 下層ページの見出し */
.page-head { max-width: calc(var(--max) + 40px); margin: 0 auto; padding: 36px 20px 20px; }
.page-head h1 { font-size: clamp(30px, 8.4vw, 46px); }
.page-toc ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.page-toc a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; font-size: 14px; color: var(--ink); text-decoration: none; background: var(--paper-card); border: 1px solid var(--rule); }
.page-toc a:hover { border-color: var(--accent); }

/* お品書き: 品名｜価格 の2列。横にスクロールさせない。 */
.menu-columns { display: grid; gap: 36px; }
.menu-intro { margin: 0 0 6px; color: var(--muted); }
.menu-table { width: 100%; border-collapse: collapse; }
.menu-table caption { caption-side: top; text-align: left; }
.menu-table caption h3 { margin: 0 0 4px; padding-bottom: 6px; border-bottom: 2px solid var(--ink); }
.menu-table th { padding: 10px 12px 10px 0; font-weight: 400; text-align: left; vertical-align: top; border-bottom: 1px dotted var(--rule-dot); }
.menu-table td.price { padding: 10px 0; font-family: var(--serif); font-size: 17px; text-align: right; vertical-align: top; white-space: nowrap; border-bottom: 1px dotted var(--rule-dot); }
.menu-table td.price .tax { display: block; line-height: 1.3; }
/* 英語の「(tax incl. / 税込)」は価格の下で折り返してよい（価格の列を広げて品名の列を押しつぶさない） */
.menu-table td.price .tax-en { white-space: normal; font-size: 12px; }
.menu-table th[colspan] { padding-right: 0; }
.item-name { display: block; }
.item-note { display: block; font-size: 13px; line-height: 1.6; color: var(--muted); }
.plain-list { max-width: var(--text-max); margin: 0; padding-left: 1.2em; }
.plain-list li { margin-bottom: 8px; }

/* 営業時間とアクセス */
.hours-panel { display: grid; gap: 12px; max-width: 52rem; }
.hours-notes p { margin: 8px 0 0; }
.inline-photo { max-width: 28rem; margin-top: 24px; }
.inline-photo img { aspect-ratio: 4 / 3; object-fit: cover; }
.route { max-width: var(--text-max); margin: 0; padding-left: 1.4em; }
.route li { margin-bottom: 6px; }

/* ご来店の前に（質問と答え。開いたまま） */
.qa { max-width: var(--text-max); padding: 18px 0; border-bottom: 1px solid var(--rule); }
.qa:first-of-type { padding-top: 4px; }
.qa h3 { display: flex; gap: 10px; }
.qa h3::before { content: "Q"; flex: none; font-family: Georgia, "Times New Roman", serif; font-weight: 400; color: var(--accent); }
.qa-answer { padding-left: 1.55em; }
.qa-answer p:last-child { margin-bottom: 0; }
.facts-table { width: 100%; max-width: var(--text-max); border-collapse: collapse; }
.facts-table th { width: 5.5em; padding: 12px 12px 12px 0; font-size: 14px; font-weight: 400; color: var(--muted); text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
.facts-table td { padding: 12px 0; border-bottom: 1px solid var(--rule); }

/* 長岡屋のこと */
.story-body { display: grid; gap: 24px; }
.story-photo img { aspect-ratio: 4 / 5; object-fit: cover; }
.photo-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-top: 20px; }
.photo-row:empty { display: none; }
.photo-row img { aspect-ratio: 1; object-fit: cover; }
/* 写真の列のすぐ後に段落が続くとき（長岡屋のこと: 蕎麦の写真のあとの出汁の段落）は、間をあける */
.photo-row + .story-text { margin-top: 32px; }

/* 404 */
.link-list { max-width: 28rem; margin: 0; padding: 0; list-style: none; }
.link-list a { display: flex; align-items: center; min-height: 48px; text-decoration: none; border-bottom: 1px solid var(--rule); }

/* フッター（店舗ブロック） */
.site-footer { margin-top: 24px; background: var(--ink); color: var(--night-text); }
.footer-inner { display: grid; gap: 28px; max-width: calc(var(--max) + 40px); margin: 0 auto; padding: 48px 20px 40px; }
.store-block h2 { color: var(--paper); font-size: 22px; }
.store-block h2::before { background: var(--brass); }
.store-block p, .store-block address { margin: 0 0 10px; font-size: 15px; }
.store-name strong { font-family: var(--serif); font-size: 26px; font-weight: 500; letter-spacing: .12em; }
.store-summary { color: var(--night-muted); }
/* 営業時間は昼・夜・定休日を1行ずつにする（区切りの「／」は文字として残し、見た目では行で分ける） */
.store-hours-label, .store-hours-line { display: block; }
.store-hours-sep { display: none; }
/* 「Googleマッ／プで見る」のように語の途中で折らない（リンクの間の全角の空白で折る） */
.store-links a { white-space: nowrap; }
.site-footer a { color: #f0d9bd; }
.footer-nav ul { display: grid; margin: 0; padding: 0; list-style: none; }
.footer-nav a { display: flex; align-items: center; min-height: 44px; text-decoration: none; border-bottom: 1px solid #3d433b; }
.footer-nav a[aria-current="page"] { color: var(--paper); }

/* スマホの下部に固定する電話・予約・地図のバー（本文とフッターを隠さないよう body に余白を取る） */
.cta-bar { position: fixed; right: 0; bottom: 0; left: 0; z-index: 40; display: flex; padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--paper); border-top: 1px solid var(--rule); box-shadow: 0 -6px 20px rgba(35, 39, 34, .08); }
.cta-bar a { display: flex; flex: 1 1 0; flex-direction: column; align-items: center; justify-content: center; min-width: 0; min-height: var(--cta-height); padding: 6px 4px; line-height: 1.3; text-align: center; text-decoration: none; color: var(--ink); border-left: 1px solid var(--rule); }
.cta-bar a:first-child { border-left: 0; }
.cta-label { font-size: 15px; font-weight: 600; letter-spacing: .06em; }
.cta-sub { font-size: 11px; color: var(--muted); }
.cta-bar .cta-tel { background: var(--ink); color: var(--paper); }
.cta-bar .cta-tel .cta-sub { color: var(--night-muted); }
.cta-bar .cta-reserve { background: var(--accent); color: #fff; }
.cta-bar .cta-reserve .cta-sub { color: #f1d6cc; }

/* English */
.page-en { letter-spacing: 0; }
.page-en h1 { letter-spacing: .01em; }
.page-en h2 { letter-spacing: .02em; }
.page-en .eyebrow { letter-spacing: .08em; }
.section > .hours-table { max-width: var(--text-max); margin-bottom: 16px; }
/* /en/ の Menu highlights の表も本文の幅にそろえる（広い画面で品名と価格が離れすぎない） */
.section > .menu-table { max-width: var(--text-max); }

@media (max-width: 359px) {
  .cta-row { grid-template-columns: 1fr; }
  .facts-list > div { grid-template-columns: 1fr; gap: 2px; }
  .brand-name { font-size: 25px; }
  /* 320px の画面で「中野ブロードウェイか／ら」のように見出しの最後の行が1文字にならないよう、字間を少し詰める（24px × 11字が本文の幅に入る） */
  :lang(ja) h2 { letter-spacing: .04em; }
}

@media (min-width: 600px) {
  .cta-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .btn-accent { grid-column: auto; order: 0; }
  .photo-band img { aspect-ratio: 16 / 9; }
}

@media (min-width: 768px) {
  .feature-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; }
  .night-inner.has-photo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 48px; align-items: center; }
  .centennial { grid-template-columns: auto minmax(0, 1fr); }
  .centennial-number { font-size: 140px; }
  .story-body.has-photo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 44px; align-items: start; }
  .hours-panel { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; }
  .photo-band img { aspect-ratio: 21 / 9; }
  .section { padding: 56px 20px; }
}

/* お品書きの表は 720px から2列にする（1列のまま広がると、品名と価格の間が空きすぎる） */
@media (min-width: 720px) {
  .menu-columns { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px 40px; align-items: start; }
}

@media (min-width: 900px) {
  .menu-columns { gap: 36px 56px; }
  .footer-inner { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 64px; }
}

@media (min-width: 960px) {
  html { scroll-padding-top: calc(96px + var(--search-support-notice-height, 0px)); }
  body { font-size: 17px; padding-bottom: 0; }
  .site-header { position: sticky; top: var(--search-support-notice-height, 0px); display: flex; align-items: center; gap: 24px; min-height: 76px; padding: 0 max(20px, calc((100% - var(--max)) / 2)); }
  .header-inner { display: contents; }
  .brand { order: 1; }
  .site-nav { order: 2; margin-left: auto; }
  .site-nav ul { margin: 0; padding: 0; }
  .header-tel { order: 3; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; font-family: var(--serif); font-size: 17px; letter-spacing: .06em; color: var(--paper); text-decoration: none; background: var(--ink); }
  .header-tel:hover { background: var(--accent); }
  .hero { grid-template-columns: minmax(0, 1.4fr) minmax(330px, .95fr); gap: 56px; align-items: start; padding: 64px 20px 56px; }
  .hero-text { padding-top: 8px; }
  .lead { font-size: 17px; }
  .page-head { padding: 64px 20px 28px; }
  .cta-bar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* 10/8商談デモの配色・左右比率・写真と余白を継承。事実とページ構造は現行の正本から生成する。 */
.site-header { background: var(--paper); }
.header-inner { padding: 12px 22px 2px; gap: 10px; }
.header-reserve { display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 44px; padding: 8px 14px; color: #fff; background: var(--accent); font-size: 11px; text-decoration: none; white-space: nowrap; }
.header-reserve:hover { background: var(--accent-deep); }
.brand-sub { font-size: 10px; }
.hero-demo { max-width: none; margin: 0; padding: 0; gap: 0; min-height: 0; background: var(--ink); color: var(--paper); }
.hero-copy { min-width: 0; display: flex; flex-direction: column; padding: 36px 25px 23px; }
.hero-demo .hero-eyebrow { font-size: 9px; line-height: 1.6; color: #d3c7ac; letter-spacing: .16em; }
.hero-demo h1 { order: 1; font-size: clamp(29px, 8.1vw, 43px); line-height: 1.55; letter-spacing: .045em; margin: 24px 0 20px; }
.hero-demo h1 > span { display: block; white-space: nowrap; }
.hero-demo .lead { order: 0; color: #d3c7ac; font-size: 9px; line-height: 1.6; letter-spacing: .08em; }
.hero-tagline { order: 2; color: #d7d8cf; margin: 0; font-size: 12px; line-height: 1.95; letter-spacing: .045em; }
.hero-phrase { display: block; }
.hero-demo .cta-row { order: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 26px; }
.hero-demo .cta-row .btn { min-height: 49px; padding: 10px 17px; font-size: 11px; line-height: 1.4; letter-spacing: .06em; }
.hero-demo .cta-row .btn-accent { width: 190px; order: 0; color: var(--ink); background: var(--paper); }
.hero-demo .cta-row .btn-accent:hover { background: #d9d0be; }
.hero-demo .cta-row .btn-ink { order: 1; color: #cfcbbe; background: transparent; padding-inline: 0; }
.hero-demo .cta-row .btn-sub { font-size: 9px; }
.hero-demo .cta-row .btn-line { display: none; }
.hero-photo { position: relative; margin: 0; min-width: 0; height: 74vw; max-height: 425px; overflow: hidden; }
.hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.hero-photo::after { content: ""; position: absolute; inset: 75% 0 0; background: linear-gradient(transparent, #0d120d66); pointer-events: none; }
.hero-photo figcaption { position: absolute; right: 20px; bottom: 16px; left: 20px; z-index: 1; margin: 0; }
.page-home .section { padding: 62px 22px; }
.page-home .section > h2 { font-size: 35px; line-height: 1.65; margin-bottom: 34px; }
.page-home .section > h2::before, .store-intro h2::before { display: none; }
.food-grid { display: grid; gap: 39px; }
.food-grid:empty { display: none; }
.food-story { min-width: 0; }
.food-photo img { aspect-ratio: 1.16; object-fit: cover; }
.food-story:first-child .food-photo img { object-position: center 43%; }
.food-copy { margin-top: 21px; }
.food-copy h3 { font-size: 25px; line-height: 1.55; margin-bottom: 14px; }
.food-copy > p { font-size: 13px; line-height: 2; color: #666255; }
.food-copy .more a { font-size: 12px; }
.menu-highlights { display: grid; gap: 24px; margin-top: 40px; }
.menu-highlight { padding: 22px 0; border-top: 1px solid var(--rule); }
.menu-highlight h3 { font-size: 24px; }
.menu-highlight .more { margin-top: 12px; }
.store-intro-inner { display: grid; gap: 42px; align-items: center; }
.store-intro-copy { max-width: 32rem; }
.store-intro-copy h2 { font-size: 35px; line-height: 1.65; }
.store-intro-copy > p:not(.eyebrow):not(.more) { font-size: 13px; line-height: 2.15; color: #686457; }
.store-intro .history-photo img { aspect-ratio: 1.03; object-fit: cover; object-position: center 38%; }
.page-home .section.night { padding: 52px 22px 49px; }
.night-inner.has-photo { align-items: center; }
.night-photo img { aspect-ratio: 4 / 5; object-fit: cover; object-position: center; }
.night h2 { font-size: 35px; line-height: 1.65; }
.night h2::before { display: none; }
.night p { font-size: 13px; line-height: 2.1; color: #d2d6cb; }
.home-links { display: flex; flex-wrap: wrap; gap: 20px 36px; }
.home-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; border-bottom: 1px solid var(--rule); text-decoration: none; }
.centennial-number { display: block; }
.page-home .hours-details, .page-home #access, .page-home #before-visit { background: var(--paper-deep); }
@media (max-width: 599px) { .brand-sub { display: none; } .brand { margin-right: auto; } .header-inner { min-height: 70px; padding-block: 8px; } }
@media (max-width: 1279px) { .brand-sub, .header-reserve > span { display: none; } }
@media (max-width: 359px) { .hero-copy { padding-inline: 22px; } .hero-demo h1 { font-size: 27px; } .hero-demo .cta-row { gap: 12px; } .hero-demo .cta-row .btn-accent { width: 170px; } .header-inner { padding-inline: 16px; gap: 8px; } .brand-name { font-size: 24px; letter-spacing: .08em; white-space: nowrap; } .header-reserve { padding-inline: 10px; gap: 10px; } }
@media (min-width: 601px) {
  .hero-demo.has-photo { grid-template-columns: 46% 54%; min-height: 610px; }
  .hero-copy { display: flex; flex-direction: column; justify-content: center; padding: 43px 24px 40px 28px; }
  .hero-demo h1 { font-size: clamp(26px, 3.7vw, 32px); margin: 28px 0 24px; }
  .hero-demo .hero-eyebrow { font-size: 8px; letter-spacing: .08em; }
  .hero-demo .lead { font-size: 8px; }
  .hero-tagline { font-size: 11px; }
  .hero-photo { height: auto; min-height: 610px; max-height: none; }
  .hero-photo img { position: absolute; inset: 0; object-position: center 53%; }
  .hero-demo .cta-row .btn-accent { width: 200px; min-height: 51px; }
  .food-grid { grid-template-columns: 1.15fr 1fr; gap: 30px; align-items: start; }
  .food-story:nth-child(2) { padding-top: 70px; }
  .food-photo img { aspect-ratio: 1.13; }
  .food-story:nth-child(2) .food-photo img { aspect-ratio: 1.07; }
  .menu-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .store-intro-inner.has-photo { grid-template-columns: 1fr 1fr; gap: 40px; }
  .store-intro .history-photo img { aspect-ratio: .88; }
}
@media (min-width: 960px) {
  .site-header { min-height: 92px; padding: 0 34px; gap: 22px; }
  .brand { flex-direction: row; align-items: center; gap: 20px; }
  .brand-name { font-size: 35px; }
  .brand-sub { font-size: 9px; }
  .header-tel { display: none; }
  .header-reserve { order: 3; min-height: 46px; padding: 9px 22px; font-size: 12px; }
  .language-switch { order: 4; margin-left: 0; }
  .site-nav { margin-left: auto; }
  .site-nav a { font-size: 11px; padding-inline: 9px; }
  .hero-demo.has-photo { grid-template-columns: 44% 56%; min-height: 665px; }
  .hero-copy { padding: 57px 40px 40px 12.1%; }
  .hero-demo h1 { font-size: clamp(32px, 3.8vw, 55px); line-height: 1.55; letter-spacing: .025em; margin: 34px 0 24px; }
  .hero-demo .hero-eyebrow { font-size: 10px; letter-spacing: .2em; }
  .hero-demo .lead { font-size: 10px; line-height: 1.6; letter-spacing: .12em; }
  .hero-tagline { font-size: 13px; line-height: 2.1; letter-spacing: .06em; }
  .hero-demo .cta-row { margin-top: 35px; }
  .hero-demo .cta-row .btn-accent { width: 230px; min-height: 57px; padding: 15px 23px; font-size: 13px; }
  .hero-photo { min-height: 665px; }
  .page-home .section { padding: 100px 64px; }
  .page-home .section > h2 { font-size: clamp(34px, 3.5vw, 50px); line-height: 1.7; margin-bottom: 55px; }
  .food-grid { gap: 80px; }
  .food-story:nth-child(2) { padding-top: 95px; }
  .food-copy { margin-top: 27px; }
  .food-copy h3 { font-size: 28px; margin-bottom: 16px; }
  .menu-highlights { gap: 48px; }
  .page-home .section.night { padding: 79px 64px 80px; }
  .night-inner.has-photo { grid-template-columns: 1fr 1.6fr; gap: 80px; }
  .night h2 { font-size: 45px; }
  .store-intro-inner.has-photo { gap: 100px; }
  .store-intro-copy h2 { font-size: clamp(34px, 3.5vw, 50px); }
}
@media (min-width: 1700px) { .hero-demo.has-photo, .hero-photo { min-height: 740px; } .hero-copy { padding-left: max(64px, calc((100vw - 1264px) / 2)); } .hero-demo h1 { font-size: 61px; } }

/* 2026-10-18 お手本（老舗の蕎麦店・和食店の公式HP）の考え方を取り入れた改善。配色・書体・写真の構成は10/13の本人選択のまま。
   1) 写真の上の縦書きの一行 2) 最初の画面の直下の営業時間の帯 3) 番号つきの章 4) 料理の写真カード 5) /access/ の店舗情報の表 */
.brand-since { font-family: Georgia, "Times New Roman", var(--serif); font-size: 10px; line-height: 1.3; letter-spacing: .28em; color: var(--accent); white-space: nowrap; }

.hero-visual { position: relative; min-width: 0; }
/* スマホは写真の上に横書きの一行で置く（縦書きにすると下の固定バーに隠れる長さになるため）。601px から縦書き */
.hero-vertical { position: absolute; top: 14px; left: 14px; z-index: 2; margin: 0; padding: 7px 14px; writing-mode: horizontal-tb; font-family: var(--serif); font-size: 14px; line-height: 1.6; letter-spacing: .24em; color: var(--paper); background: rgba(35, 39, 34, .58); outline: 1px solid rgba(245, 241, 232, .38); outline-offset: -5px; white-space: nowrap; }
/* 写真が無い（本番の写真なしの組版）ときは、スマホでは横書きの一行にして紹介の下に置く */
.hero-demo:not(.has-photo) .hero-vertical { position: static; margin: 0 25px; padding: 16px 0 26px; writing-mode: horizontal-tb; font-size: 14px; letter-spacing: .2em; color: #d3c7ac; background: none; outline: 0; border-top: 1px solid #474d45; }

.hours-strip { background: var(--paper-card); border-bottom: 1px solid var(--rule); }
.hours-strip-inner { max-width: calc(var(--max) + 40px); margin: 0 auto; padding: 22px 22px 14px; }
.hours-strip-title { margin: 0 0 10px; font-size: 13px; line-height: 1.5; letter-spacing: .24em; color: var(--accent); }
.hours-strip-title::before { display: none; }
.hours-strip-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; margin: 0; }
.hours-strip-list > div { min-width: 0; padding-top: 8px; border-top: 1px solid var(--rule); }
.hours-strip-list dt { font-size: 12px; letter-spacing: .14em; color: var(--muted); }
.hours-strip-list dd { margin: 0; font-family: var(--serif); font-size: 19px; line-height: 1.45; letter-spacing: .03em; white-space: nowrap; }
.hours-strip-note { display: block; font-family: var(--sans); font-size: 12px; letter-spacing: .04em; color: var(--muted); white-space: normal; }
.hours-strip .more { margin-top: 6px; }
.hours-strip .more a { font-size: 13px; }

.chapter-no { display: flex; align-items: center; gap: 14px; margin: 0 0 6px; font-family: Georgia, "Times New Roman", var(--serif); font-size: 15px; line-height: 1.4; letter-spacing: .24em; color: var(--accent); }
.chapter-no::after { content: ""; width: 44px; height: 1px; background: currentColor; }
.night .chapter-no { color: var(--brass); }
.page-home .chapter > h2, .page-home .night-text h2 { margin-top: 0; }

.dish-grid { display: grid; gap: 22px; }
.dish-card { display: flex; flex-direction: column; min-width: 0; background: var(--paper-card); border: 1px solid var(--rule); border-top: 2px solid var(--accent); }
.dish-card.has-photo { border-top-width: 1px; border-top-color: var(--rule); }
.dish-card.is-signature { border-top: 2px solid var(--brass); }
.dish-photo img { aspect-ratio: 4 / 3; object-fit: cover; }
.dish-copy { padding: 20px 20px 14px; }
.dish-copy h3 { font-size: 22px; line-height: 1.55; margin-bottom: 10px; }
.dish-copy > p { font-size: 14px; line-height: 1.95; color: #5f5b50; }
.dish-copy .more { margin-top: 6px; }
.dish-copy .more a { font-size: 13px; }

.store-intro .centennial { margin: 26px 0 8px; padding: 18px 0 4px; border-top: 1px solid var(--rule); }
.store-intro .centennial .centennial-number { font-size: 64px; line-height: 1; }
.store-intro .centennial h3 { margin-bottom: 4px; font-size: 21px; }
.store-intro .centennial p { font-size: 14px; line-height: 1.95; }

.page-home .hours-access { background: var(--paper-deep); }
.page-home .hours-access .hours-details, .page-home .hours-access #access { background: none; }
.hours-access-grid { display: grid; gap: 34px; }
.hours-access-grid h3 { font-size: 21px; margin-bottom: 10px; }

.store-info-table { width: 100%; max-width: 52rem; border-collapse: collapse; border-top: 1px solid var(--rule); }
.store-info-table th { width: 6em; padding: 13px 12px 13px 0; font-size: 14px; font-weight: 400; color: var(--muted); text-align: left; vertical-align: top; white-space: nowrap; border-bottom: 1px solid var(--rule); }
.store-info-table td { padding: 13px 0; border-bottom: 1px solid var(--rule); }
.store-info-note { display: block; font-size: 14px; color: var(--muted); }

@media (min-width: 601px) {
  .dish-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  /* 列は中身の幅（max-content）。時刻や「営業します」を縮めて区切り線に重ねない */
  .hours-strip-list { grid-template-columns: repeat(4, max-content); justify-content: start; gap: 12px 28px; }
  .hero-vertical { top: 40px; right: 34px; left: auto; padding: 22px 12px; writing-mode: vertical-rl; text-orientation: mixed; font-size: 20px; letter-spacing: .32em; }
}
@media (min-width: 768px) {
  .hours-access-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; }
}
@media (min-width: 960px) {
  .brand-since { font-size: 11px; }
  .hours-strip-inner { display: flex; align-items: center; gap: 44px; padding: 22px 64px; }
  .hours-strip-title { flex: none; margin: 0; }
  /* 960〜1179px は見出し・リンクと横に並ぶので、2列×2段にする */
  .hours-strip-list { flex: 1 1 auto; grid-template-columns: repeat(2, max-content); gap: 12px 40px; }
  .hours-strip-list > div { padding-top: 0; padding-left: 18px; border-top: 0; border-left: 1px solid var(--rule); }
  .hours-strip-list dd { font-size: 21px; }
  .hours-strip .more { flex: none; margin: 0; }
  .hero-vertical { top: 56px; right: 52px; padding: 26px 14px; font-size: 24px; letter-spacing: .4em; }
  .hero-demo:not(.has-photo) { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .hero-demo:not(.has-photo) .hero-visual { display: flex; align-items: center; padding: 57px 12.1vw 40px 0; }
  .hero-demo:not(.has-photo) .hero-vertical { margin: 0; padding: 0 0 0 44px; writing-mode: vertical-rl; font-size: 26px; letter-spacing: .4em; color: var(--paper); border-top: 0; border-left: 1px solid #474d45; }
  .dish-grid { gap: 40px; }
  .dish-copy { padding: 26px 28px 18px; }
  .dish-copy h3 { font-size: 26px; }
  .chapter-no { font-size: 17px; margin-bottom: 4px; }
  .store-intro .centennial .centennial-number { font-size: 88px; }
  .store-intro-copy { max-width: 36rem; }
}
@media (max-width: 599px) {
  .brand { gap: 0; }
}
@media (max-width: 359px) {
  .hours-strip-list { gap: 12px 12px; }
  .hours-strip-list dd { font-size: 17px; letter-spacing: 0; }
}
@media (min-width: 1180px) {
  .hours-strip-list { grid-template-columns: repeat(4, max-content); }
}

/* 2026-10-19 最終点検の指摘への対応（V1・V2・V3・V5・V6・V8・V9・P8）。配色と書体は変えない。 */
/* V1: 看板の品のカードの価格とラベル（.dish-copy > p の本文の指定に負けないように） */
.dish-copy > p.feature-price { font-family: var(--serif); font-size: 22px; color: var(--ink); }
.dish-copy > p.feature-label { margin-bottom: 4px; font-size: 13px; letter-spacing: .14em; color: var(--accent); }
/* V2: 最初の画面の店の一文は14px以上、ボタンは14px以上、電話番号は13px以上（設計書§7-1） */
.hero-demo .lead { font-size: 14px; line-height: 1.7; letter-spacing: .06em; }
.hero-demo .cta-row .btn { font-size: 14px; }
.hero-demo .cta-row .btn-sub { font-size: 13px; }
/* V8: 出典の記事名は文節で折り返し、掲載日と（席のみ）は途中で折らない */
.phrase { word-break: auto-phrase; }
/* P8: /menu/ の大きな写真は元の画像の幅（1080px）より大きく引き伸ばさない（左端は本文にそろえる） */
.photo-band img { max-width: 1080px; }
/* 横の余白（V6）。960〜1179px は 40px、1180px 以上は 64px。画面が広いときは、中身の幅（--max + 40px）の左端にそろえる */
:root { --gutter: 20px; }
@media (max-width: 599px) {
  /* V9: ヘッダーのページ一覧は2項目ずつ並べる（1つだけ2行目に残さない） */
  .site-nav ul { display: grid; grid-template-columns: repeat(2, max-content); gap: 0 10px; }
  /* P8: 3枚の写真の並びは、1枚目を幅いっぱい、残り2枚を横に並べる（右に空きを作らない） */
  .photo-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .photo-row > :first-child:nth-last-child(3) { grid-column: 1 / -1; }
  .photo-row > :first-child:nth-last-child(3) img { aspect-ratio: 4 / 3; }
}
@media (min-width: 601px) {
  .hero-demo .lead { font-size: 14px; }
}
@media (min-width: 960px) {
  :root { --gutter: 40px; }
  .hero-demo .lead { font-size: 15px; }
  .hero-demo .cta-row .btn-accent { font-size: 15px; }
  /* V2: 960px 以上ではヘッダーにも電話を出す（下の固定バーが消えるため） */
  .header-tel { display: inline-flex; order: 3; min-height: 46px; padding: 0 14px; font-size: 14px; white-space: nowrap; }
  .header-reserve { order: 4; }
  /* V3: 最初の画面の「地図を見る」を出す（電話するボタンと同じ見た目） */
  .hero-demo .cta-row .btn-line { display: inline-flex; order: 2; min-height: 49px; padding: 10px 0; color: #cfcbbe; background: transparent; border: 0; }
  .hero-demo .cta-row .btn-line:hover { color: var(--paper); background: transparent; }
  /* V5・V6: 帯は画面の端まで塗り、どの段も同じ左端にそろえる */
  .site-header { padding-inline: max(var(--gutter), calc((100% - var(--max) - 40px) / 2 + var(--gutter))); }
  .section, .page-head, .footer-inner, .hours-strip-inner, .photo-band { padding-inline: var(--gutter); }
  .page-home .section { padding-inline: var(--gutter); }
  .page-home .section.night, .page-home .hours-access, .page-home #before-visit { max-width: none; padding-inline: max(var(--gutter), calc((100% - var(--max) - 40px) / 2 + var(--gutter))); }
  .page-home .section.night .night-inner { max-width: none; }
}
@media (min-width: 1180px) {
  :root { --gutter: 64px; }
}
@media (min-width: 960px) {
  /* 最初の画面の文の左端も、ヘッダーと同じ位置にそろえる（V6） */
  /* 100vw はスクロールバーを含むので、画面の幅いっぱいの .hero-demo の幅（cqw）で計る */
  .hero-demo { container-type: inline-size; }
  .hero-copy { padding-left: max(var(--gutter), calc((100cqw - var(--max) - 40px) / 2 + var(--gutter))); }
}
@media (min-width: 960px) and (max-width: 1179px) {
  /* ヘッダーに電話が増えたので、店名の下に創業年の印を置いて1行に収める */
  .brand { flex-direction: column; align-items: flex-start; gap: 2px; }
  .site-header { gap: 16px; }
}

/* 2026-10-19 確かめ直しの残り（visual NEW-1・NEW-2・NEW-5） */
@media (min-width: 960px) {
  /* ページ一覧はヘッダーの中で折り返さない（電話を足したので） */
  .site-nav ul { flex-wrap: nowrap; }
  .site-nav a { white-space: nowrap; }
}
@media (min-width: 960px) {
  /* 最初の画面のボタン: どの幅でも、席を予約を1段目、電話と地図を2段目に並べる（3つが1行に入るかは文の列の幅で変わるので、決め打ちにしない） */
  .hero-demo .cta-row { display: grid; grid-template-columns: repeat(2, max-content); gap: 12px 28px; justify-content: start; }
  .hero-demo .cta-row .btn-accent { grid-column: 1 / -1; }
}
/* 端まで塗った05章の帯のすぐ下に、箱の幅の線を出さない */
.page-home #before-visit + .section { border-top: 0; }

/* 2026-10-19 確かめ直し2回目 */
/* 広い画面では、最初の画面の文の列の中身を約520pxに保つ（左の余白は中身の幅の左端にそろえたまま）。見出しが写真の下に入らない */
@media (min-width: 1305px) {
  .hero-demo.has-photo { grid-template-columns: calc((100% - var(--max) - 40px) / 2 + var(--gutter) + 560px) minmax(0, 1fr); }
}
/* 英語のページへのリンク: スマホでは席を予約の隣に小さく置き、ページ一覧からは外す（一覧が3行目に1つ残らないように） */
.header-lang { display: none; }
@media (max-width: 599px) {
  .site-nav .nav-lang { display: none; }
  .header-lang { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; font-size: 13px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
}