@charset "UTF-8";
/* ===========================================================
   EMON 右衛門 — 下層ページ デザイン刷新レイヤー（v16 以降）

   読み込み順：style.css → page.css → page-v2.css

   page.css は既存の下層9ページが依存している。そこを直接書き換えると
   まだ旧デザインのページまで巻き込んで崩れるため、刷新で必要になった
   「既存クラスの上書き」と「新規コンポーネント」はすべてこのファイルに置く。
   dining.html を規範とし、整った順に他ページへこのファイルを読ませていく。
   =========================================================== */

/* -----------------------------------------------------------
   既存クラスの上書き
   ----------------------------------------------------------- */

/* 章番号（.chapter__no）は使わない。HTML 側から出さないので定義は足さない */

/* 見出しとリードが 42em / 34em で折り返し、右に大きな空白が残っていた。
   下層では container 幅まで流して無駄な隙間を作らない */
.chapter__head { max-width: none; }
.chapter .lead { max-width: none; }
/* FAQ も同様（page.css は 52em で止めている） */
.faq { max-width: none; }

/* 断ち落としは page.css の calc(var(--gutter) * -1) のままにする（上書きしない）。
   style.css の .split--duo に理由が書かれているとおり、これは
   「container の外枠で止める」ことを意図した式で、画面端まで伸ばすと
   広い画面で左だけ余白が残り、ページ全体が右へ寄って見える。
   画面が --maxw より狭いときは container が画面いっぱいになるので、
   同じ式のまま自動的に画面端まで断ち落とされる */

/* 章インデックス（.pagenav）を FV 直下＝パンくずの下へ移した場合の調整。
   インデックスそのものの見た目（色・文字・罫・sticky）は page.css のまま変えない。
   crumbs の下罫と pagenav の上罫が接して 2px に見えるので、上罫だけ落とす */
.crumbs + .pagenav { margin-top: 0; border-top: 0; }

/* -----------------------------------------------------------
   新規コンポーネント
   ----------------------------------------------------------- */

/* ===========================================================
   menu-strip — 献立を皿の連続で見せる
   料理名・献立内容は確定していないため、品名は書かずに
   「一の皿」の順番だけを添える（季節と仕入れで変わるため）。
   皿が画面中央にある素材なので正方形で受けて中央を残す。
   SP は右端まで流す横スクロール
   =========================================================== */
.menu-strip { margin-top: clamp(44px, 5.5vw, 78px); }
.menu-strip__head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: clamp(20px, 2.4vw, 30px);
}
.menu-strip__head::after { content: ""; flex: 1; height: 1px; background: var(--c-line); }
.menu-strip__label {
  font-family: var(--f-jp);
  font-size: var(--fs-sm);
  letter-spacing: 0.24em;
}
.menu-strip__list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 60%;
  gap: clamp(8px, 1vw, 14px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin-right: calc(var(--gutter) * -1);
  padding-right: var(--gutter);
}
.menu-strip__list::-webkit-scrollbar { display: none; }
.menu-strip__list > li { scroll-snap-align: start; }
@media (min-width: 768px) {
  .menu-strip__list {
    grid-auto-flow: row;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-columns: auto;
    overflow: visible;
    margin-right: 0;
    padding-right: 0;
  }
}
.menu-strip button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  color: inherit;
}
.menu-strip .ph { aspect-ratio: 1 / 1; }
.menu-strip img { transition: transform 1.2s var(--ease), filter 0.5s var(--ease); }
.menu-strip button:hover img,
.menu-strip button:focus-visible img { transform: scale(1.05); filter: brightness(1.05); }
.menu-strip__no {
  display: block;
  margin-top: 10px;
  font-family: var(--f-jp);
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  color: var(--c-ink-soft);
}
.chapter--dark .menu-strip__head::after { background: var(--c-line-rev); }
.chapter--dark .menu-strip__no { color: rgba(247,244,238,0.7); }

/* ===========================================================
   plan-cta — 章末から予約サイトの「そのプラン」へ直接送る
   宿トップに送ると、読んで気持ちが動いた直後にプランを
   選び直させることになる。章ごとに該当プランへ直結させる
   =========================================================== */
.plan-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  margin-top: clamp(30px, 3.6vw, 46px);
  padding-top: clamp(20px, 2.4vw, 28px);
  border-top: 1px solid var(--c-line);
}
/* 注記はボタンの下。ボタンと右端を揃えたいので右揃えにするが、
   長文を右揃えにすると行頭が不揃いで読みにくいため幅を絞って収める */
.plan-cta__note {
  max-width: 40em;
  text-align: right;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  color: var(--c-ink-soft);
}
/* SP は右端に寄せると画面の端に張りついて窮屈なので中央へ */
@media (max-width: 599px) {
  .plan-cta { align-items: center; }
  .plan-cta__note { text-align: center; }
}
.chapter--dark .plan-cta { border-color: var(--c-line-rev); }
.chapter--dark .plan-cta__note { color: rgba(247,244,238,0.72); }

/* ===========================================================
   .ph に動画を入れる場合の受け皿
   動画素材は後日支給。img と同じ枠のまま差し替えられるようにしておく
   （FV は表示速度を優先して静止画のまま運用する）
   =========================================================== */
.ph video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .menu-strip button:hover img { transform: none; }
  .index-list a:hover { padding-left: 4px; }
}

/* ===========================================================
   tiers — 同じサービスの中の2段階（一般コース / EMONオリジナル）
   横に並べると面積が同じぶん「等価な別商品」に見えて、上位を
   選ぶ理由が画面のどこにも出ない。上下に積み、下段にだけ
   アクセント罫と淡い地色を入れて「含まれるものが増える」を示す
   =========================================================== */
.tiers { margin-top: clamp(40px, 5vw, 68px); }
.tier { padding: clamp(26px, 3vw, 38px) 0; border-top: 1px solid var(--c-line); }
.tier:last-child { border-bottom: 1px solid var(--c-line); }
/* ラベルは罫を外して、面で受けるタグの形にする。
   背景にアクセント色をそのまま敷いて文字を生成りにすると
   コントラストが 4.1:1 で AA（4.5:1）に届かないため、
   面を薄く敷いて文字を墨にする（12.9:1）。
   letter-spacing の分だけ右端に空きが出るので、左右の padding を非対称にする */
.tier__label {
  display: inline-flex;
  align-items: center;
  padding: 7px 13px 7px 17px;
  background: rgba(156, 107, 74, 0.13);
  font-family: var(--f-jp);
  font-size: var(--fs-sm);
  letter-spacing: 0.18em;
  line-height: 1.6;
  color: var(--c-ink);
  margin-bottom: 16px;
}
.tier__label::before { content: none; }
.tier__title { font-size: var(--fs-h3); line-height: 1.7; margin-bottom: 14px; }
.tier p { font-weight: 300; color: var(--c-ink-soft); max-width: 44em; }
.tier p + p { margin-top: 1.2em; }
.tier .ticks { margin-top: 22px; }

/* 上位側は装飾で持ち上げない。左罫＋淡い地色は引用ブロックや注記の
   慣用形なので「格上のコース」には読めず、page.css が intro__side で
   書いているとおり枠で囲えば広告然として浮く。
   差は余白・見出しの大きさ・ラベルの色だけでつける */
.tier--premium {
  padding-top: clamp(40px, 4.6vw, 64px);
  padding-bottom: clamp(38px, 4.2vw, 56px);
}
.tier--premium .tier__title { font-size: var(--fs-h2); margin-bottom: 18px; }

/* 2つのラベルは同じ配色にする。コースの格差はラベルではなく、
   見出しの大きさと余白で示す */

/* 本文と写真の2カラム。写真は本文より小さく取り、
   章の主写真（断ち落とし）と主従が入れ替わらないようにする */
@media (min-width: 900px) {
  .tier {
    display: grid;
    grid-template-columns: 1fr minmax(220px, 32%);
    column-gap: clamp(28px, 3.6vw, 56px);
    align-items: start;
  }
}
.tier__media .ph { aspect-ratio: 4 / 3; }
@media (max-width: 899px) { .tier__media { margin-top: 26px; } }

/* -----------------------------------------------------------
   intro — Introduction ラベルと FV 直下 CTA を外した版
   右カラム（予約ボタン）を外したので 1 カラムへ戻す。
   2 カラムのままだと右に 300px の空き枠が確保されたままになる
   ----------------------------------------------------------- */
.intro__inner { grid-template-columns: 1fr; }
@media (min-width: 900px) {
  /* index.html の .split--duo と同じ比率（テキスト約40%／写真が残り）に揃える。
     テキストを主・写真を従にすると写真が細く貧弱になり、背だけ高くなって
     左に余白が残る。写真側は container の外枠まで伸ばして TOP と同じ止め方にする */
  .intro__inner {
    grid-template-columns: minmax(280px, 42%) 1fr;
    align-items: center;
    column-gap: clamp(40px, 5vw, 80px);
  }
  .intro__media { margin-right: calc(var(--gutter) * -1); }
}
.intro__media .ph { aspect-ratio: 16 / 10; }

/* -----------------------------------------------------------
   pagenav — 「押せる」と分かる形にする（UX修正）

   元の状態で重なっていた問題は3つ。
   ① 11px（--fs-xs）は日本語の可読下限で、読ませる前に読み飛ばされる
   ② 項目間が gap の余白だけなので、6項目がひと続きの文字列に見え、
      個々が押せる単位だと認識されない
   ③ 反応が 1px の下線のみ。マウスを乗せるまで押せると分からず、
      タッチ環境では最後まで分からない
   加えて SP では横スクロールするのに、続きがある手がかりが無かった。

   対処：文字を 13px に上げ、縦罫で押せる単位を区切り、hover / 現在地を
   2px の下線＋不透明度＋淡い地色で返す。SP は右端にフェードを重ねて
   スクロールできることを示す。色・背景・sticky 挙動は page.css のまま
   ----------------------------------------------------------- */
.pagenav ul {
  gap: 0;
  /* 先頭項目の文字を container の左端に揃えつつ、padding は全項目均一に保つ。
     first-child だけ padding を削ると hover の地色が左端でずれる */
  margin-left: calc(clamp(16px, 1.7vw, 26px) * -1);
}
.pagenav li + li { border-left: 1px solid var(--c-line); }
.pagenav a {
  padding: 17px clamp(16px, 1.7vw, 26px);
  font-size: var(--fs-sm);
  color: var(--c-ink);
  opacity: 0.6;
  transition: opacity 0.3s var(--ease), background-color 0.3s var(--ease);
}
.pagenav a:hover,
.pagenav a:focus-visible { opacity: 1; background: rgba(31,26,24,0.045); }
.pagenav a.is-current { opacity: 1; }

/* 下線は 1px だと気づけないので 2px。hover でも現在地と同じ反応を返す */
.pagenav a::after { height: 2px; }
.pagenav a:hover::after,
.pagenav a:focus-visible::after { transform: scaleX(1); transform-origin: left; }

/* 収まりきらない幅では右端をフェードさせ、続きがあることを示す */
@media (max-width: 899px) {
  .pagenav::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 52px;
    background: linear-gradient(90deg, rgba(247,244,238,0), rgba(247,244,238,0.96) 72%);
    pointer-events: none;
  }
}

/* -----------------------------------------------------------
   card--link — 「三つの食卓」の索引カード（横並び＋写真）
   page.css の .cards / .card をそのまま使い、カード全体を
   リンクにするぶんだけ足す
   ----------------------------------------------------------- */
/* 本文の行数がカードごとに違うと矢印リンクの高さがばらつく。
   カード内を縦フレックスにして、リンクだけ下端へ送って揃える */
.card--link a { display: flex; flex-direction: column; height: 100%; color: inherit; }
/* 索引のリンクはボタンの形にする。金（.btn-cta）は予約導線の専用色なので
   使わず、枠線だけの .btn-outline をサブボタンとして受ける。
   カード内なので .btn の padding（17/40）より一段小さく、幅は文字なり */
.card--link .card__btn {
  margin-top: auto;
  align-self: flex-start;
  padding: 14px 26px;
  min-height: 44px;
}
/* ボタン単体ではなくカード全体をホバーしたときに反応させる */
.card--link a:hover .card__btn::before,
.card--link a:focus-visible .card__btn::before { transform: scaleX(1); transform-origin: left center; }
.card--link a:hover .card__btn,
.card--link a:focus-visible .card__btn { color: var(--c-bg); }
/* 写真は index.html の .ph--wide（16:10）に揃える。
   4:3 より横に長いぶん、3枚並べても各カットが景色として読める */
.card--link .card__media { aspect-ratio: 16 / 10; margin-bottom: 20px; }
/* index.html と同じ「英字ラベル → 和文見出し → 本文 → 矢印」の順。
   ラベルは TOP の 15px だとカード内で見出しと competing するので小さく */
.card--link .eyebrow { font-size: 12px; letter-spacing: 0.2em; margin-bottom: 10px; }
.card--link .card__title { transition: color 0.35s var(--ease); }
.card--link a:hover .card__title,
.card--link a:focus-visible .card__title { color: var(--c-accent); }
/* -----------------------------------------------------------
   reveal のフォールバック

   style.css の .reveal / .reveal-img は opacity:0 が初期値で、JS が
   IntersectionObserver で is-visible を付けて初めて見える。つまり JS が
   止まった環境では写真も本文も一切表示されない（読み込み失敗、
   スクリプトエラー、拡張機能によるブロック、プレビュー生成など）。

   そこで既定を「見えている」に反転させ、JS が動いたときだけ
   アニメーションを有効にする。<html> への js クラス付与は dining.html の
   head で行っている——script.js は全11ページ共通のため触らない。
   js が付かなければこのブロックは効かず、最初から見えたままになる
   ----------------------------------------------------------- */
.reveal,
.reveal-img { opacity: 1; transform: none; }
.reveal-img img { clip-path: none; transform: none; }

html.js .reveal { opacity: 0; transform: translateY(28px); }
html.js .reveal-img { opacity: 0; }
html.js .reveal-img img { clip-path: inset(0 0 100% 0); transform: scale(1.08); }
html.js .reveal.is-visible { opacity: 1; transform: none; }
html.js .reveal-img.is-visible { opacity: 1; }
html.js .reveal-img.is-visible img { clip-path: inset(0 0 0 0); transform: scale(1); }

/* -----------------------------------------------------------
   本文のウェイト

   page.css / style.css は本文系に font-weight: 300（Noto Sans JP Light）を
   広く使っている。欧文なら成立するが、日本語の 13〜16px では線が細く、
   --c-ink-soft の薄さと重なって可読性が落ちる。
   読ませる文章はすべて 400（Regular）に上げる。
   eyebrow・キャプション等の装飾文字と、フッターの補助情報はそのまま
   ----------------------------------------------------------- */
.page-hero__sub,
.chapter .lead,
.card__text,
.card__meta dd,
.ticks li,
.flow p,
.timeline p,
.note,
.row__body p,
.tier p,
.faq__a,
.plan-cta__note,
.band p { font-weight: 400; }

/* -----------------------------------------------------------
   ticks — 補足リストを「注記の面」にする

   1行ずつ罫線で区切ると本文と同じ強さで読まれ、補足なのに
   本文と優先度が並んでしまう。罫を外してごく薄い地色の面へ沈める。
   枠線と角丸は付けない——線で囲うと広告のバナーに見え、
   page.css が intro__side で避けているのと同じ状態になる。
   地色は透過で持たせるので、生成り・warm・dark のどの章に置いても
   同じだけ沈む（dark だけは反転させて、同じだけ浮かせる）。
   文字サイズは落とさない。格は余白と地色で下げる
   ----------------------------------------------------------- */
.ticks {
  border-top: 0;
  margin-top: clamp(26px, 3vw, 34px);
  /* 左右を厚くすると row__body（30em）の中で文字幅が痩せ、
     1文字だけ折り返す行が出る。面として成立する最小限に留める */
  padding: clamp(18px, 2.2vw, 24px) clamp(16px, 1.8vw, 22px);
  background: rgba(31, 26, 24, 0.042);
}
.ticks li {
  border-bottom: 0;
  padding: 6px 0 6px 22px;
  line-height: 1.9;
}
/* 罫を外して padding を詰めたぶん、菱形を1行目の中心へ上げる */
.ticks li::before { top: 1.18em; }

.chapter--dark .ticks { background: rgba(247, 244, 238, 0.06); }
.chapter--dark .ticks,
.chapter--dark .ticks li { border-color: transparent; }

/* -----------------------------------------------------------
   ph--landscape — PC でも横長のまま受ける

   page.css は PC で .row__media .ph--wide を 4/5 の縦長に切り替えている
   （エディトリアルに寄せるため）。人物や空間の引きならそれで成立するが、
   木箱に並んだ食材のように横方向へ主題が広がるカットは、左右が落ちて
   何を写しているのか分からなくなる。素材が横位置のものだけ元の比率で受ける
   ----------------------------------------------------------- */
@media (min-width: 1024px) {
  .row__media .ph--wide.ph--landscape { aspect-ratio: 16 / 10; }
}