/* =========================================================================
   scenes.css — scenes 固有の追加スタイルのみ（ベンチCSSは非改変）
   目的: ①<img>ロゴ/画像の扱い ②A-10 ヒーロー可視レイヤー ③FAQ ④SEOセクション
   ========================================================================= */

/* --- 画像 <img> の扱い（foundation の img{object-fit:cover} を用途別に上書き） --- */
.p-header_logo_img,
.l-kv_title_strs img,
.p-footer_logo img,
.l-loading_logo img,
.l-scenesLogo img { height: auto; object-fit: contain; }

/* --- ヘッダーロゴ（黒/白 状態切替） --- */
.p-header_logo { display: inline-flex; align-items: center; }
.p-header_logo_img { width: 12rem; }
.p-header_logo_img.is-light { display: none; }
.p-header.is-inverted .p-header_logo_img.is-dark { display: none; }
.p-header.is-inverted .p-header_logo_img.is-light { display: block; }
@media screen and (max-width: 48em){ .p-header_logo_img { width: 9.6rem; } }

/* --- KV タイトル（scenes ワードマーク画像） --- */
.l-kv_title_strs { display: block; width: min(46rem, 76%); }
.l-kv_title_strs img { width: 100%; display: block; }
@media screen and (max-width: 48em){ .l-kv_title_strs { width: min(30rem, 82%); } }

/* --- フッターロゴ（scenes ワードマーク画像・reveal 対象 p-footer_logo_strs） --- */
.p-footer_logo_strs { display: block; }
.p-footer_logo img { width: min(52rem, 100%); }

/* --- ローディング（scenes ワードマーク画像をマスクに使用） --- */
.l-loading_logo img { width: 100%; }

/* --- 全メニュー：2段タブ（時間帯 Morning/Lunch/Dinner ＋ カテゴリ）で1カテゴリずつ表示＝縦幅スッキリ --- */
/* 1段目：時間帯タブ */
.l-menuTabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin: 2.2rem 0 1.6rem; }
.l-menuTab { padding: .95rem 2.6rem; border: 1px solid var(--color-assort); border-radius: 100px;
  font-family: "Jost", sans-serif; font-size: 1.4rem; letter-spacing: .1em; color: var(--color-assort);
  background: transparent; cursor: pointer; transition: background var(--transition-default), color var(--transition-default); }
.l-menuTab:hover { background: rgba(169, 113, 74, .12); }
.l-menuTab.is-active { background: var(--color-assort); color: var(--color-base); }
/* 2段目：カテゴリタブ（JSが現在の時間帯のカテゴリで動的生成） */
.l-menuCatTabs { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin: 0 auto 3.6rem; max-width: 88rem; }
.l-menuCatTab { padding: .62rem 1.8rem; border: 1px solid rgba(240, 234, 226, .3); border-radius: 100px;
  font-family: "Jost","Noto Sans JP",sans-serif; font-size: 1.25rem; letter-spacing: .06em; color: rgba(240, 234, 226, .72);
  background: transparent; cursor: pointer; transition: background var(--transition-default), color var(--transition-default), border-color var(--transition-default); }
.l-menuCatTab:hover { border-color: var(--color-assort); color: #e7c4a8; }
.l-menuCatTab.is-active { background: var(--color-base); color: var(--color-main); border-color: var(--color-base); font-weight: 500; }
/* カテゴリは既定で非表示・選択された1つ(.is-shown)だけ表示 */
.l-menuCat { display: none; margin-top: 0; }
.l-menuCat.is-shown { display: block; }

/* --- 時間帯シーン(l-tscene): ピン留めスクロールで画像がクロスフェード切替 ---
   run.js の GSAP に依存せず、CSS sticky ＋ 自前スクロールJS(index.html末尾)で駆動。
   画像は四辺に余白を取ったフレーム表示。右に 01/02/03 の時間帯ナビ。 */
.l-tscene { position: relative; background: var(--color-main-deep); }
.l-tscene_track { height: 300vh; }
.l-tscene_sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.l-tscene_frame { position: absolute; inset: 4.5rem; border-radius: .6rem; overflow: hidden; background: var(--color-main); }
.l-tscene_slide { position: absolute; inset: 0; background-position: center; background-size: cover;
  opacity: 0; transform: scale(1.05); transition: opacity 1.1s cubic-bezier(.4,0,.2,1), transform 7s ease-out; }
.l-tscene_slide.is-active { opacity: 1; transform: scale(1); }
/* 下端はキャプション(白文字)が載る帯。明るい木目/白い皿の写真でも読めるよう濃いめに取る（2026-08-05 F5） */
.l-tscene_scrim { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,16,12,.20) 0%, rgba(20,16,12,0) 30%, rgba(20,16,12,.34) 62%, rgba(20,16,12,.78) 100%); }
.l-tscene_tint { position: absolute; inset: 0; pointer-events: none; }
.l-tscene_tint span { position: absolute; inset: 0; display: block; }
.l-tscene_tint_am { background: linear-gradient(180deg, rgba(198,214,230,.20), rgba(198,214,230,0) 60%);
  opacity: calc(1 - var(--p, 0)); }
.l-tscene_tint_pm { background: linear-gradient(180deg, rgba(60,30,14,.16), rgba(20,12,6,.34));
  opacity: var(--p, 0); }
.l-tscene_caps { position: absolute; left: 3.6rem; bottom: 3.4rem; z-index: 2; width: min(58rem, 78%); }
.l-tscene_cap { position: absolute; left: 0; bottom: 0; opacity: 0; transform: translateY(1.4rem);
  transition: opacity .28s ease, transform .5s ease; pointer-events: none; color: var(--color-base); }
.l-tscene_cap.is-active { transition: opacity .5s ease .16s, transform .6s ease .16s; }
.l-tscene_cap.is-active { opacity: 1; transform: none; }
.l-tscene_en { display: block; font-size: clamp(3rem, 4.6vw, 5rem); line-height: 1.08; margin-bottom: 1.2rem; }
.l-tscene_hours { display: block; font-size: 1.35rem; line-height: 1.85; letter-spacing: .04em; text-shadow: 0 1px 10px rgba(0,0,0,.35); }
/* --- 時間軸（8:00 → 22:00）---------------------------------------------
   3区分を実時間の長さに比例して置く（朝3h / 昼7h / 夜4h → 0 / .214 / .714）。
   軸そのものが時計になり、スクロール位置＝その日の何時か、が読める。
   走る点(--p)はスクロール進捗。JS が動かなければ点は 8:00 の位置に留まるだけで、
   ラベル・写真・キャプションは最初の場面が出たまま成立する。 */
.l-tscene_axis { position: absolute; right: 5.6rem; top: 21%; bottom: 17%; z-index: 3; width: 1px; }
.l-tscene_axis_line { position: absolute; inset: 0; background: linear-gradient(180deg,
  rgba(240,234,226,.06), rgba(240,234,226,.34) 12%, rgba(240,234,226,.34) 88%, rgba(240,234,226,.06)); }
.l-tscene_axis_tick { position: absolute; right: 1.8rem; top: calc(var(--at) * 100%); transform: translateY(-50%);
  font-family: "Jost", sans-serif; font-size: 1.15rem; font-weight: 300; letter-spacing: .1em;
  color: rgba(240,234,226,.42); white-space: nowrap; }
.l-tscene_axis_now { position: absolute; left: 0; top: calc(var(--p, 0) * 100%);
  width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%;
  background: var(--color-assort); box-shadow: 0 0 0 5px rgba(169,113,74,.18); }
.l-tscene_axis_now_t { position: absolute; right: 15rem; top: 50%; transform: translateY(-50%);
  padding: .2rem .8rem; border-radius: 100px; background: rgba(20,15,10,.55); backdrop-filter: blur(2px);
  font-family: "Jost", sans-serif; font-size: 1.6rem; font-weight: 300; letter-spacing: .06em;
  color: var(--color-base); white-space: nowrap; font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 12px rgba(0,0,0,.55); }

.l-tscene_nav { position: absolute; inset: 0; z-index: 3; }
.l-tscene_navBtn { position: absolute; right: 1.8rem; top: calc(var(--at) * 100%); transform: translateY(-50%);
  display: flex; align-items: baseline; justify-content: flex-end; gap: 1.1rem; background: transparent; border: 0; cursor: pointer;
  color: rgba(240,234,226,.5); text-align: left; text-shadow: 0 1px 10px rgba(0,0,0,.4);
  white-space: nowrap; padding: .6rem 0;
  transition: color var(--transition-default); }
.l-tscene_navBtn:hover { color: rgba(240,234,226,.85); }
.l-tscene_navBtn.is-active { color: var(--color-base); }
.l-tscene_navNum { font-family: "Jost", sans-serif; font-size: 1.7rem; line-height: 1; }
.l-tscene_navLb { position: relative; font-family: "Jost","Noto Sans JP",sans-serif; font-size: 1.3rem; letter-spacing: .1em; }
.l-tscene_navBtn.is-active .l-tscene_navLb::after { content: ""; position: absolute; left: 0; bottom: -.55rem;
  width: 100%; height: 1px; background: var(--color-assort); }
@media screen and (max-width: 48em){
  .l-tscene_frame { inset: 1.4rem; }
  .l-tscene_caps { left: 2rem; bottom: 2.2rem; width: 82%; }
  .l-tscene_en { margin-bottom: .8rem; }
  /* 軸の下端を上げてカップの定位置(右下)を空ける。
     軸をピン留め区間の下まで伸ばすと最下段のボタンが押せなくなる（実測）。 */
  .l-tscene_axis { right: 2.2rem; top: 18%; bottom: 30%; }
  .l-tscene_navLb { display: none; }
  .l-tscene_axis_now_t { font-size: 1.35rem; right: 6rem; }   /* SPはラベルが時刻だけなので寄せられる */
  .l-tscene_axis_tick { font-size: 1.05rem; right: 1.2rem; }
  .l-tscene_navBtn { right: 1.2rem; }
}
@media (prefers-reduced-motion: reduce){
  .l-tscene_slide { transition: opacity .3s ease; transform: none; }
  .l-tscene_slide.is-active { transform: none; }
}

/* --- グローバルナビ フォールバックの開状態 ---
   通常は run.js の GSAP が .p-header_nav を y:0 に引き込む。Stem配信/PIXI停止で run.js が
   ナビ配線(y())に到達しないと画面外のまま＝「Menuを押しても開かない」。
   インラインJSフォールバックが付与する .is-forceopen で、GSAP無しでもナビを開く。 */
.p-header_nav.is-forceopen { -webkit-transform: translate(-50%, 0) !important; transform: translate(-50%, 0) !important; }
.p-header_nav.is-forceopen .p-header_nav_inner > * { opacity: 1 !important; }

/* --- 貸切・パーティー：利用シーン（SEO/AIO向けの自然文リスト） --- */
/* PCグリッド(heading|message / heading|link)に uses 行を追加 */
@media screen and (min-width: 48.0625em) {
  .l-party_text { grid-template-areas: "heading message" "heading uses" "heading link" !important; row-gap: 3.2rem; }
}
.l-party_uses_wrap { grid-area: uses; max-width: 58rem; }
/* 見出し：極細ラインを添えたエディトリアルなアイブロウ */
.l-party_uses_lead { display: flex; align-items: center; gap: 1.4rem; font-family: "Jost","Noto Sans JP",sans-serif;
  font-size: 1.25rem; letter-spacing: .22em; color: var(--color-assort); margin-bottom: 2.4rem; }
.l-party_uses_lead::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(169,113,74,.5), rgba(169,113,74,0)); }
/* シーン：番号付き(01-05)の上品なリスト・細い区切り線 */
.l-party_uses { counter-reset: use; }
.l-party_uses li { counter-increment: use; position: relative; padding: 2rem 0 2rem 5rem;
  border-top: 1px solid rgba(169, 113, 74, .22); font-size: 1.4rem; line-height: 1.85; letter-spacing: .02em; color: #4a443b; }
.l-party_uses li:last-child { border-bottom: 1px solid rgba(169, 113, 74, .22); }
.l-party_uses li::before { content: "0" counter(use); position: absolute; left: 0; top: 1.9rem;
  font-family: "Jost", sans-serif; font-size: 2.2rem; line-height: 1; font-weight: 300; color: var(--color-assort); }
.l-party_uses li strong { display: block; font-weight: 500; font-size: 1.6rem; color: var(--color-main);
  letter-spacing: .04em; margin-bottom: .5rem; }
.l-party_uses_note { margin-top: 2.4rem; padding-left: .2rem; font-size: 1.28rem; line-height: 1.95; color: #6f6558; letter-spacing: .02em; }

/* ローディングのワードマーク塗り上げアニメ:
   run.jsのGSAP(mask rectのx属性を-100%→100%)が走らない環境(Stem取込配信=PIXI動画awaitで
   イントロ停止)でも、CSSだけでワードマークを左→右に白く塗る「読み込み中」演出を再生する。
   GSAPはx属性、こちらはtransformと別プロパティなので、JS動作時も致命的に競合しない。
   マスク内の2枚目rect(塗り)をtransformでスイープ。1枚目rect(30%)は常時薄く表示。 */
@keyframes scenesLoadSweep {
  0%   { transform: translateX(0); }      /* rect=[-100%,0] 塗りなし(薄い) */
  55%  { transform: translateX(100%); }   /* rect=[0,100%] ワードマーク白く充填 */
  100% { transform: translateX(200%); }   /* rect=[100%,200%] 右へ抜け 薄いへ戻る */
}
.l-loading_logo_mask > :last-child {
  transform-box: fill-box;
  animation: scenesLoadSweep 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .l-loading_logo_mask > :last-child { animation: none; transform: translateX(100%); }
}

/* --- A-10 FV部品：KV に重ねる可視 headline/CTA レイヤー（1:1崩さず追加） --- */
.l-kv_ab {
  z-index: 4; position: absolute; left: 50%; bottom: 20rem;
  width: 100%; padding-inline: 8rem; transform: translateX(-50%);
  color: var(--color-base);
}
.l-kv_ab_lead {
  font-family: "Jost","Noto Sans JP",sans-serif;
  font-size: 1.3rem; letter-spacing: .18em; margin-bottom: 1.2rem; opacity: .92;
}
.l-kv_ab_headline {
  font-family: "Noto Sans JP",sans-serif; font-weight: 300;
  font-size: clamp(1.8rem, 2.6vw, 2.8rem); line-height: 1.5; letter-spacing: .08em;
  text-shadow: 0 1px 24px rgba(0,0,0,.35); margin-bottom: 2rem; max-width: 46rem;
}
.l-kv_ab_cta {
  display: inline-flex; align-items: center; gap: .8rem;
  padding: 1.1rem 2.4rem; border: 1px solid rgba(255,255,255,.7); border-radius: 999px;
  font-family: "Jost",sans-serif; font-size: 1.3rem; letter-spacing: .12em;
  transition: background var(--transition-default), color var(--transition-default);
}
.l-kv_ab_cta:hover { background: var(--color-base); color: var(--color-font-bk); }
@media screen and (max-width: 48em){
  .l-kv_ab { bottom: 16rem; }
  .l-kv_ab_headline { font-size: 2rem; }
}

/* --- 汎用：セクション導入テキスト（SEOコピー） --- */
.l-lead { max-width: 72rem; }
.l-lead p { font-size: 1.5rem; line-height: 2.1; letter-spacing: .04em; }
.l-lead p + p { margin-top: 1.6rem; }

/* --- メニュー（インライン転記：ベンチのカードの下に品目リスト） --- */
.l-menuList { margin-top: 8rem; }
.l-menuList_group + .l-menuList_group { margin-top: 5.6rem; }
.l-menuList_group_head {
  display: flex; align-items: baseline; gap: 1.6rem;
  border-bottom: 1px solid var(--color-gray); padding-bottom: 1.2rem; margin-bottom: 2.4rem;
}
.l-menuList_group_head h3 { font-family: "Jost",sans-serif; font-weight: 300; font-size: 2.2rem; letter-spacing: .06em; }
.l-menuList_group_head span { font-size: 1.2rem; color: var(--color-assort); letter-spacing: .12em; }
.l-menuList_items { display: grid; grid-template-columns: 1fr; gap: 1.4rem; }
@media screen and (min-width: 48.0625em){ .l-menuList_items { grid-template-columns: 1fr 1fr; gap: 1.4rem 5.6rem; } }
.l-menuItem { display: grid; grid-template-columns: 1fr auto; gap: .4rem 1.2rem; align-items: baseline; }
.l-menuItem_name { font-size: 1.5rem; letter-spacing: .03em; }
.l-menuItem_name small { display: block; font-size: 1.15rem; color: #8a8073; letter-spacing: .02em; margin-top: .2rem; }
.l-menuItem_price { font-family: "Jost",sans-serif; font-size: 1.5rem; white-space: nowrap; }
.l-menuItem_price small { font-size: 1.1rem; color: #8a8073; }
.l-menuNote { margin-top: 3.2rem; font-size: 1.2rem; color: #8a8073; letter-spacing: .04em; }

/* --- FAQ（アコーディオン・ベンチの意匠に合わせた最小追加） --- */
.l-faq { padding-block: 12rem; background: var(--color-base); }
.l-faq_list { max-width: 96rem; margin: 6rem auto 0; }
.l-faq_item { border-top: 1px solid var(--color-gray); }
.l-faq_item:last-child { border-bottom: 1px solid var(--color-gray); }
.l-faq_q {
  width: 100%; text-align: left; display: flex; justify-content: space-between; align-items: center;
  gap: 2rem; padding: 2.4rem 0; font-size: 1.6rem; letter-spacing: .04em; line-height: 1.6;
}
.l-faq_q::after { content: "＋"; flex: none; margin-left: 1.6rem;
  font-family: var(--font-serif); font-size: 2.4rem; line-height: 1; font-weight: 400;
  color: var(--color-assort); transition: opacity var(--transition-default); }
.l-faq_item.is-open .l-faq_q::after { content: "−"; }
.l-faq_q:hover::after { opacity: .6; }
.l-faq_a { overflow: hidden; max-height: 0; transition: max-height var(--transition-nav); }
.l-faq_item.is-open .l-faq_a { max-height: 120rem; }
.l-faq_a_inner { padding: 0 0 2.8rem; font-size: 1.45rem; line-height: 1.9; color: #4a443b; letter-spacing: .03em; }

/* --- アクセス地図（Google Map 埋め込み iframe） --- */
.l-access_map_embed { width: 100%; aspect-ratio: 16 / 10; border: 0; display: block; }
@media screen and (max-width: 48em){ .l-access_map_embed { aspect-ratio: 4 / 3; } }

/* --- モーダル：フォトギャラリー（ベンチ modal を流用・iframe→画像グリッド） --- */
.l-modal_gallery {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem;
  width: min(100rem, 90vw); max-height: 80vh; overflow-y: auto; padding: .4rem;
}
.l-modal_gallery img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: .4rem; }
@media screen and (min-width: 48.0625em){ .l-modal_gallery { grid-template-columns: repeat(3, 1fr); gap: 1.6rem; } }

/* --- 情報バッジ（時間帯・特徴） --- */
.l-scene_item_badge { display: inline-block; margin-top: 1.2rem; font-size: 1.15rem;
  letter-spacing: .1em; border: 1px solid rgba(255,255,255,.6); border-radius: 999px; padding: .5rem 1.4rem; }

/* --- 太字全廃（ユーザー方針）: ベンチ唯一の bold(600) を通常ウェイトへ --- */
.l-party_text_link_lead { font-weight: 400; }

/* --- a11y: skip-link（フォーカス時のみ可視・通常は非表示） --- */
.c-skiplink {
  position: absolute; left: 1rem; top: -6rem; z-index: 10000;
  background: var(--color-main); color: var(--color-base);
  padding: .9rem 1.6rem; border-radius: 0 0 .4rem .4rem; font-size: 1.3rem;
  transition: top var(--transition-default);
}
.c-skiplink:focus { top: 0; }

/* --- a11y: キーボードフォーカス可視化（マウス操作時は出ない） --- */
:focus-visible { outline: 2px solid var(--color-assort); outline-offset: 2px; }

/* --- a11y: モーション低減設定のユーザーへの保険（通常表示は不変） --- */
@media (prefers-reduced-motion: reduce) {
  .l-loading { display: none !important; }
  .l-kv_title_strs > *, .p-footer_logo_strs > *,
  .l-kv_ab, .l-concept_text_message, .js-splitText > span { opacity: 1 !important; transform: none !important; }
  .p-stickyContainer_bg_img > * { position: absolute !important; }
  html { scroll-behavior: auto !important; }
}

/* --- 大見出し(is-large)を読みやすいサイズへ縮小（貸切パーティー等が大きすぎ対策） --- */
/* font-size は下の 2 メディアクエリ(≤48em / ≥48.0625em)で全幅カバーされ勝てないため line-height のみ残す */
.c-heading.is-large { line-height: 1.25; }
@media screen and (max-width: 48em){ .c-heading.is-large { font-size: 3.6rem !important; } }

/* --- 日替わり(daypart)ショーケース：料理写真＋厳選メニュー（morning/lunch/dinner切り分け） --- */
.l-daypartWrap { margin-top: 10rem; }
.l-daypart { padding-block: 6rem; border-top: 1px solid rgba(255,255,255,.16); }
.l-daypart:first-child { border-top: 0; }
.l-daypart_head { display: grid; gap: 1.2rem; margin-bottom: 3.6rem; max-width: 72rem; }
.l-daypart_time { font-family: "Jost",sans-serif; font-size: 1.3rem; letter-spacing: .2em; color: var(--color-assort); }
.l-daypart_title { font-family: "Jost",sans-serif; font-size: clamp(2.6rem, 4.4vw, 4rem); letter-spacing: .04em; line-height: 1.1; }
.l-daypart_title small { display: block; font-family: "Noto Sans JP",sans-serif; font-size: 1.5rem; letter-spacing: .1em; color: rgba(255,255,255,.9); margin-top: .6rem; }
.l-daypart_lead { font-size: 1.5rem; line-height: 2; letter-spacing: .03em; color: rgba(255,255,255,.82); }
.l-daypart_photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; margin-bottom: 3.6rem; }
.l-daypart_photos figure { margin: 0; overflow: hidden; border-radius: .4rem; }
/* height:100% だと figure を埋めきって figcaption が overflow:hidden の外へ押し出され、
   料理名が全ビューポートで見えなくなる（2026-08-11 実測）。aspect-ratio があるので
   height:auto でも比率は保たれる。 */
.l-daypart_photos img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.l-daypart_photos figure:hover img { transform: scale(1.05); }
.l-daypart_photos figcaption { font-size: 1.2rem; letter-spacing: .04em; color: rgba(255,255,255,.6); padding-top: .8rem; }
.l-daypart_items { display: grid; grid-template-columns: 1fr; gap: 1.4rem; }
@media screen and (min-width: 48.0625em){ .l-daypart_items { grid-template-columns: 1fr 1fr; gap: 1.4rem 5.6rem; } }
.l-daypart.is-dark { background: rgba(0,0,0,.14); border-radius: .6rem; }



@media screen and (max-width: 48em){ .l-daypart_photos { grid-template-columns: 1fr 1fr; gap: 1rem; } .l-daypart_photos figure:last-child:nth-child(odd){ grid-column: 1 / -1; } }
.l-fullmenu_toggleLead { margin-top: 8rem; text-align: center; font-size: 1.4rem; letter-spacing: .1em; color: var(--color-assort); }

/* --- 著者クレジット(EEAT・topics) --- */
.l-news_author { margin-top: 3.2rem; font-size: 1.3rem; letter-spacing: .04em; color: var(--color-main); }
.l-news_author a { color: var(--color-assort); border-bottom: 1px solid transparent; transition: border-color var(--transition-default); }
.l-news_author a:hover { border-bottom-color: var(--color-assort); }

/* =========================================================================
   タイポグラフィ: 全面ゴシック。明朝・セリフは使わない（ユーザー方針 2026-08-06）。
   英字=Jost(幾何学サンセリフ)、和文=Zen Kaku Gothic New。細めのウェイトを基調にする。
   変数名 --font-serif / --font-mincho は参照箇所が多いため据え置き（中身は両方ゴシック）。
   ========================================================================= */
:root{
  --font-serif:"Jost","Zen Kaku Gothic New",sans-serif;   /* 旧=Cormorant Garamond */
  --font-mincho:"Zen Kaku Gothic New",sans-serif;         /* 旧=明朝 */
}
/* Webフォントは 300/400/500 のみ読み込む（700は本文・CSSとも未使用で、
   4ウェイト分の @font-face を引くとレンダーブロッキングCSSが肥大する＝LCP直撃）。
   b/strong の既定700は落とした先で合成太字になるので、細めの方針どおり500に寄せる。 */
b,strong{ font-weight:500; }
/* 大見出し（英字=Jost・和文=Zen Kaku Gothic New / 細め） */
.c-heading,
.l-kv_title_strs,
.l-daypart_title,
.l-menuList_group_head h3,
.c-column_title,
.c-column_body h2,
.p-header_nav_content_text_copy{
  font-family: var(--font-serif) !important;
  font-weight: 300;
  letter-spacing: .05em;
}
.c-heading.is-large{ font-weight: 300; letter-spacing: .06em; }
/* A-10 ヒーロー見出し（和文明朝でエレガントに） */
.l-kv_ab_headline{ font-family: var(--font-mincho) !important; font-weight: 300; }
.l-kv_ab_lead{ font-family: var(--font-serif) !important; letter-spacing: .22em; }
/* 読み物テキスト（明朝で品よく） */
.l-concept_text_message,
.l-daypart_lead,
.l-access_text_detail,
.l-party_text_message,
.c-column_body p,
.c-column_body li,
.l-faq_a_inner,
.l-menuItem_name,
.l-menuNote{
  font-family: var(--font-mincho) !important;
}
/* 価格・時間・ラベル・ナビ・ボタンは清潔なsansのまま（可読性） */
.l-menuItem_price, .l-daypart_time, .c-column_eyebrow, .l-scene_item_badge,
.l-faq_q, .l-menuItem_name small { font-family: "Jost","Noto Sans JP",sans-serif !important; }

/* =========================================================================
   FV 画像カルーセル（PIXI波動画=ガタガタの代替・滑らかにフェード切替）
   ========================================================================= */
/* A-10 の hero.bg スロット。以前は PIXI 用の空divで opacity:0 だったため、
   Stem側で画像をA/B差し替えても絵に一切反映されなかった（プランのリリース要件が未達）。
   実画像を持つ「下地レイヤー」にして常時可視にする。
   上に重なる時間帯カルーセルは3枚がフェードで巡り、その谷間でこの下地が見える。
   時間帯に依存しないので、どの時刻でも A/B の差し替えが絵に出る。 */
#js-kvBg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
}
.l-kvCarousel { z-index: 1; }
/* .l-kvCarousel は .p-stickyContainer_bg_img>* の中央寄せ(top/left:50%+translate,100%×100%,overflow:hidden)を継承。位置は上書きしない */
.l-kvCarousel { background: var(--color-main-light); }
/* --- FV は時間帯で写真が入れ替わる（2026-08-06）---
   全時間帯ぶんの写真を実DOMに置き、[data-daypart] で表示する組だけを出す。
   JSに画像パスを触らせない（取込での書換対象に残す／同梱漏れ404を作らない）。
   data-daypart が付かない（＝JS停止）ときは朝の組が出て成立する。 */
.l-kvCarousel_slide {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; will-change: opacity; transform: translateZ(0);
  display: none;
}
/* 既定＝朝。data-daypart が付いたらその組だけを表示する */
.l-kvCarousel_slide[data-part="morning"] { display: block; }
[data-daypart="morning"] .l-kvCarousel_slide[data-part="morning"],
[data-daypart="lunch"] .l-kvCarousel_slide[data-part="lunch"],
[data-daypart="afternoon"] .l-kvCarousel_slide[data-part="afternoon"],
[data-daypart="dinner"] .l-kvCarousel_slide[data-part="dinner"],
[data-daypart="closed"] .l-kvCarousel_slide[data-part="dinner"] { display: block; }
[data-daypart="lunch"] .l-kvCarousel_slide[data-part="morning"],
[data-daypart="afternoon"] .l-kvCarousel_slide[data-part="morning"],
[data-daypart="dinner"] .l-kvCarousel_slide[data-part="morning"],
[data-daypart="closed"] .l-kvCarousel_slide[data-part="morning"] { display: none; }
/* 表示中の3枚だけがフェードで巡る（--i で開始をずらす） */
.l-kvCarousel_slide[style*="--i"] {
  animation: kvFade 21s infinite cubic-bezier(.4,0,.2,1);
  /* delay は同じルール内に置く。別ルール(.l-kvCarousel_slide)に書くと
     animation ショートハンドの方が詳細度が高く、delay が 0s に戻されて
     3枚が同時に明滅する＝1枚しか見えない状態になる（2026-08-06 実測）。 */
  /* 先頭に 1.2s の余白を置く。カルーセルは 5% で不透明になるため、これが無いと
     読み込み 1.05 秒で下地 #js-kvBg を完全に覆い、preload した画像が実質見えないまま
     LCP が「preload していないスライド」に移る（4G相当で LCP 6.9秒を実測）。
     1.2s 待たせると LCP は preload 済みの下地で確定し、以後はカルーセルが隙間なく巡る。 */
  animation-delay: calc(1.2s + var(--i, 0) * 7s);
}

/* 3枚を7秒ずつ(21秒周期)で回すので、1枚あたりの不透明区間は 1/3=33.3% より必ず長くする。
   旧値(5%→28%で不透明)は 1枚あたり23%しかなく、切替のたびに全枚が半透明になって
   下地(#js-kvBg)が覗いていた。見た目に暗い瞬間が挟まるだけでなく、下地の初回描画が
   そこまで遅れるため LCP がそのタイミング(PC 4G実測13.8秒)まで引きずられていた。 */
@keyframes kvFade { 0%{opacity:0} 5%{opacity:1} 38%{opacity:1} 43%{opacity:0} 100%{opacity:0} }
@media (prefers-reduced-motion: reduce){
  .l-kvCarousel_slide { animation: none; opacity: 0; }
  .l-kvCarousel_slide[style*="--i:0"] { opacity: 1; }
}

/* FVカルーセルのテキスト可読性スクリム（左下を軽く暗く・画像は右に見せる）
   このスクリムは KV だけでなく、その上をスクロールで通過する .l-concept の白い本文にも効く
   （.l-concept は自前の背景を持たず、KV の sticky 背景の上に載る構造）。
   写真が明るい皿/白背景の局面で本文が沈むため、左側を少しだけ強めている（2026-08-05 F4）。 */
.l-kvCarousel::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(100deg, rgba(20,15,10,.58) 0%, rgba(20,15,10,.32) 45%, rgba(20,15,10,0) 74%); }

/* 上のスクリムは「横方向」の勾配で、暗いのは左45%までしかない。
   PC は .l-concept_text が width:48rem＝左カラムに収まるのでこれで足りるが、
   SP は `.l-concept_text{width:initial}` で本文が全幅に広がるため、行の右半分が
   スクリムの外（74%以降＝完全に透明）に出る。そこへ明るい料理写真（パスタの皿）が
   来ると白文字がほぼ消える（320/390 のスクショで実測。ユーザー指摘の主因）。
   KV 側のスクリムを濃くすると FV の写真まで暗くなるので、.l-concept 自身に
   縦方向のスクリムを1枚だけ敷く。写真は透けたまま、本文の下だけが沈む。
   .l-concept は背景を持たないので background-image を置くだけでよい
   （疑似要素+z-index にすると sticky 背景との重ね順を壊す）。 */
@media screen and (max-width: 48em){
  .l-concept{
    background-image: linear-gradient(180deg,
      rgba(20,15,10,0) 0%, rgba(20,15,10,.58) 8%,
      rgba(20,15,10,.64) 50%, rgba(20,15,10,.58) 92%, rgba(20,15,10,0) 100%);
  }
}

/* =========================================================================
   PC（min-width:48em）でフォントを少し小さく（ユーザー要望）
   ========================================================================= */
@media screen and (min-width: 48.0625em){
  .c-heading.is-large { font-size: clamp(2.6rem, 3.8vw, 4.2rem) !important; }
  .l-daypart_title { font-size: clamp(2.2rem, 2.8vw, 3rem); }
  .l-kv_ab_headline { font-size: clamp(1.6rem, 1.9vw, 2.2rem); }
  .c-column_title { font-size: clamp(2rem, 2.6vw, 2.5rem); }
  .c-column_body h2 { font-size: clamp(1.7rem, 2vw, 2rem); }
  .l-menuList_group_head h3 { font-size: 2rem; }
  /* 読み物・メニュー品名・FAQを一段小さく */
  .l-menuItem_name { font-size: 1.4rem; }
  .l-daypart_lead, .c-column_body p, .c-column_body li, .l-faq_a_inner, .l-access_text_detail { font-size: 1.4rem; }
  .l-faq_q { font-size: 1.5rem; }
  .l-menuItem_price { font-size: 1.4rem; }
}

/* A8: コラム詳細本文のコード横見切れ対策（Stem注入{{body}}に長いpre/code記事が来た時のみ横スクロール化。通常のcontentには影響しない＝見た目不変） */
.c-column pre,
.c-column_body pre { overflow-x: auto; }
.c-column pre code { white-space: pre; }

/* =========================================================================
   デザイン仕上げ 2026-08-05   plan: docs/plans/2026-08-05-design-finish.md
   前提: 配信環境(Stem)では run.js が早期に停止する。PIXI が WebGL 取得で落ちる、
   あるいは run.js 内の文字列パス(img/top/kv-bg.mp4)が取込で書換わらず intro の
   await が返らないため。実測でも .p-stickyContainer_bg_overlay への gsap.set にすら
   到達しておらず、ScrollTrigger 由来の状態変化は一切起きない。
   よって配色・可読性は CSS ＋ インラインJS だけで成立させる（CLAUDE.md §8）。
   ========================================================================= */

/* --- F1: ヘッダー配色を run.js から独立させる ------------------------------
   project.css の .p-header.is-inverted 系は run.js(ScrollTrigger)が
   #js-headerinvertContainer で付け外しする前提。配信ではそれが動かず is-inverted が
   固着し、白背景セクション(貸切/Topics/Access/FAQ/Contact)でロゴ・Menu・Tel が
   白のまま消える（実測: 全9セクションで inverted=true / 文字色 rgb(255,255,255)）。
   is-onlight / is-ondark はインラインJSが明示的に付け替えるので is-inverted の値に
   依存しない＝run.js が生きている環境でも結果が同じになる。
   specificity は対応する .p-header.is-inverted 系と同値（button/logo 系は(0,3,0)、
   :not(.is-round) を含む contact 系は(0,4,0)）。scenes.css が最後に読まれるため
   後勝ちする（!important 不要）。 */
.p-header.is-onlight .p-header_button_line { fill: var(--color-main-deep); }
.p-header.is-onlight .p-header_button_text { color: var(--color-main-deep); }
.p-header.is-onlight .p-header_contact_link:not(.is-round) { color: var(--color-main-light); }
.p-header.is-ondark .p-header_button_line { fill: var(--color-base); }
.p-header.is-ondark .p-header_button_text { color: var(--color-base); }
.p-header.is-ondark .p-header_contact_link:not(.is-round) { color: var(--color-base); }
/* ロゴは黒/白の2枚を display で出し分ける。上の :17-18 と同 specificity(0,4,0) なので
   ここ(後方)が勝つ。is-inverted が固着していても正しい方が出る。 */
.p-header.is-onlight .p-header_logo_img.is-light { display: none; }
.p-header.is-onlight .p-header_logo_img.is-dark  { display: block; }
.p-header.is-ondark  .p-header_logo_img.is-dark  { display: none; }
.p-header.is-ondark  .p-header_logo_img.is-light { display: block; }

/* ナビ展開中はナビ面が暗いのでハンバーガー/Close を白に固定する。
   ベンチは :has(+.p-header_nav.is-opend) で同じことをしているが、配信では
   run.js 非依存フォールバックが付ける .is-forceopen の方が実際に使われる。
   specificity(0,4,0) で上の is-onlight(0,3,0) に勝つ。 */
.p-header_button:has(+ .p-header_nav.is-forceopen) .p-header_button_line { fill: var(--color-base); }
.p-header_button:has(+ .p-header_nav.is-forceopen) .p-header_button_text { color: var(--color-base); }

/* 写真の上にヘッダーが載る局面で、写真の明部/暗部どちらでも文字が読めるよう
   上端に極薄スクリムを敷く。暗色側(白文字)には暗いスクリム、明色側(濃色文字)には
   明るいスクリムを当てる＝どちらの状態でも文字の背後が必ず反対側に寄る。
   明色側が必要な理由: .l-contact は地は白だが中央に暗い写真カードが並び、
   ヘッダーがその上を通過する区間で濃色文字が沈む（実測 2.6:1）。
   白背景の上では白のスクリムは見えないので、見た目の副作用が無い。
   .p-header は z-index:999 の stacking context なので z-index:-1 はページ本文より前・
   ヘッダーの中身より後ろに入る。ナビ(z-index:98)より後ろなので展開時も邪魔しない。 */
.p-header::before {
  content: ""; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 14rem;
  opacity: 0; pointer-events: none;
  transition: opacity var(--transition-default), background var(--transition-default);
}
.p-header.is-ondark::before {
  opacity: 1;
  background: linear-gradient(180deg, rgba(20,16,12,.64) 0%, rgba(20,16,12,.30) 52%, rgba(20,16,12,0) 100%);
}
.p-header.is-onlight::before {
  opacity: 1;
  background: linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.34) 48%, rgba(255,255,255,0) 100%);
}

/* --- F7: ハンバーガーのタップ領域を44px以上に（見た目は不変） ---
   320px 実測で 31x41 だった。.p-header_button は position:absolute なので
   疑似要素でヒットエリアだけ広げる＝レイアウトもアイコン位置も動かない。 */
.p-header_button::after { content: ""; position: absolute; inset: -1.2rem -1.6rem; }

/* --- F2: 写真カード(menu / contact)のスクリム ------------------------------
   ベンチはカード写真が暗く白文字が成立していたが、scenes の料理写真は明るく
   見出し・時間・「メニューを見る」が埋没する。
   .p-card_bg は絶対配置の単独 div なので疑似要素を足しても .p-card(grid)を壊さない。
   PIXI が生きて canvas を敷く環境では canvas に transform が載って前面に来るため、
   z-index を明示して必ずスクリムが上に乗るようにする。
   文字が載る上下だけ濃くし、中央は薄く保って料理写真の魅力を残す。 */
.p-card_bg::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(24,18,13,.56) 0%, rgba(24,18,13,.40) 22%, rgba(24,18,13,.18) 46%,
    rgba(24,18,13,.22) 64%, rgba(24,18,13,.62) 100%);
}
.l-menu_list_item_link_text_heading,
.l-menu_list_item_link_label_text,
.l-contact_list_item_link_label_text { text-shadow: 0 1px 16px rgba(0,0,0,.45); }
/* 時間表記は小さく細いので、皿の白い部分に重なると最も消えやすい。単独で強めに保護する。 */
.l-menu_list_item_link_text_hours { text-shadow: 0 1px 10px rgba(0,0,0,.8), 0 0 24px rgba(0,0,0,.55); }

/* --- F8: コンタクトカードの幅不揃い＆ラベルのはみ出し ----------------------
   実測 PC1280 でカード幅が 584px / 489px と揃っていなかった。原因は flex item の
   既定 min-width:auto で、長いラベル(575px)が左カードを押し広げていたこと。
   SP390 では枠349pxに対しラベル447pxで .c-button_text の overflow:hidden に切られていた。
   ベンチのラベルは "Take out" 等の短い英単語前提のサイズなので、実文言に合わせて縮める。 */
.l-contact_list_item { min-width: 0; }
.l-contact_list_item_link_label { font-size: 3.2rem; font-weight: 300; }
@media screen and (max-width: 48em) {
  .l-contact_list_item_link_label { font-size: 2.1rem; font-weight: 300; }
}

/* --- F6: Access のリンクに下線を戻す ---------------------------------------
   .c-button.is-underline は下線を .c-button_line の SVG で描く実装だが、
   Access の2本はその SVG を持たない markup なので下線が一切出ず、
   ただのテキストに見えていた。CSS で等価な下線を描く。 */
.l-access_map .c-button.is-underline { position: relative; }
.l-access_map .c-button.is-underline::after {
  content: ""; position: absolute; left: 1.5rem; right: 1.5rem; bottom: 1.1rem; height: 1px;
  background: currentColor; opacity: .5; transition: opacity var(--transition-default);
}
.l-access_map .c-button.is-underline:hover::after { opacity: 1; }
/* ギャラリーを開くボタンも同じ理由（SVGの下線を持たない＋和文の長い文言）で
   ただの小さな本文に見えていた。同じ下線でリンクだと分かるようにする。
   ただし SP は top/style.css:874-882 でボタンが width:100%・文言が右寄せ2行になるため、
   ::after の1本線だとテキストから離れた「セクションの区切り線」に見えてしまう。
   PC＝要素幅が文言幅(.c-button の width:max-content)に一致するので ::after、
   SP＝折返しに追従する text-decoration、と手段を分ける。 */
@media screen and (min-width: 48.0625em) {
  .l-contact_link_button { position: relative; }
  .l-contact_link_button::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -.4rem; height: 1px;
    background: currentColor; opacity: .45; transition: opacity var(--transition-default);
  }
  .l-contact_link_button:hover::after { opacity: 1; }
}
@media screen and (max-width: 48em) {
  .l-contact_link_button_text {
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .45em;
    text-decoration-color: rgba(33, 28, 22, .45);
  }
}

/* --- F3: KV の CTA と巨大ワードマークの間隔 --------------------------------
   実測 PC1280 で 15px / 1920 で 17px しかなく窮屈だった（SPは42-52pxで可のため触らない）。 */
@media screen and (min-width: 48.0625em) {
  .l-kv_ab { bottom: 27rem; }
}

/* =========================================================================
   一日の時計CTA（c-cup） 2026-08-06   plan: docs/plans/2026-08-06-concept-redesign.md
   scenes＝場面の複数形。8:00-22:00 で店の顔が変わることを、常駐する「器」で表す。
   中身は <html data-daypart> で切替：朝=フラットホワイト / 昼=コーヒー / 夜=ワイン / 時間外=空。
   ・器はインラインSVG＝画像ファイルに依存しない（取込での同梱漏れ404が原理的に起きない）
   ・開閉は <details> のネイティブ動作＝JSゼロ。JSは data-daypart を付けるだけ
   ・data-daypart が無い（＝JS停止）ときは朝の見た目になる＝初期状態が完成形

   ★寸法は rem でなく px で持つこと。
   このサイトの rem は html{font-size:min(2.667vw,…)} でビューポート連動のため、
   rem で組むと 768px 幅でカップが 155px まで肥大し、周辺のボタンの押下を奪っていた（実測）。
   常駐UIは本文の組版スケールに乗せず、実寸で一定に保つのが正しい。
   ========================================================================= */
.c-cup {
  position: fixed; z-index: 900;   /* .p-header(999) より下・本文より上。
                                      .l-loading(9999) / .l-modal(9998) / skip-link(10000) とは競合させない */
  right: 24px;
  bottom: max(24px, env(safe-area-inset-bottom, 0px));
  --cup-liquid: #EDE4D6;           /* 既定＝朝のフラットホワイト */
  --cup-ink: var(--color-base);
  transition: opacity var(--transition-default), visibility var(--transition-default), transform var(--transition-default);
}
/* 既定のマーカー（三角）を消す。Safari は ::-webkit-details-marker が要る */
.c-cup_toggle { list-style: none; }
.c-cup_toggle::-webkit-details-marker { display: none; }

.c-cup_toggle {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 72px; height: 72px; border-radius: 50%; cursor: pointer;
  background: var(--color-main-deep);
  box-shadow: 0 6px 22px rgba(20, 15, 10, .34), 0 1px 3px rgba(20, 15, 10, .22);
  transition: transform var(--transition-default), box-shadow var(--transition-default);
}
.c-cup_toggle:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(20, 15, 10, .42); }
/* 湯気が器の上に立つぶん、絵は上に余白が要る。器の重心が円の中心に来るよう少し下げる */
.c-cup_art { display: block; width: 38px; height: 38px; margin-top: 4px; }
.c-cup_art svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* ラベルは現在時刻そのもの。開かなくても「このサイトは今が何時か知っている」が伝わる。
   JS停止時は営業時間帯(8–22)を出す＝意味のない語を残さない。 */
.c-cup_toggle_text {
  font-family: "Jost", sans-serif; font-size: 11px; letter-spacing: .06em;
  color: var(--cup-ink); opacity: .9; line-height: 1; font-variant-numeric: tabular-nums;
}

/* --- 器の描画（線は currentColor 相当・塗りは液体だけ） --- */
.c-cup_body, .c-cup_handle, .c-cup_stem, .c-cup_steam path {
  fill: none; stroke: var(--cup-ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
}
.c-cup_saucer, .c-cup_foot { fill: none; stroke: var(--cup-ink); stroke-width: 2.6; opacity: .5; }
.c-cup_liquid { fill: var(--cup-liquid); stroke: none; transform-box: fill-box; transform-origin: 50% 100%; }
.c-cup_glass { display: none; }   /* 既定はマグ。夜だけグラスに差し替える */
.c-cup_steam path { stroke-width: 1.8; opacity: .55; }

/* --- 時間帯（JSが <html data-daypart> を付ける。未設定＝朝の見た目） --- */
[data-daypart="lunch"]  .c-cup { --cup-liquid: #B07A4E; }   /* コーヒー */
[data-daypart="dinner"] .c-cup { --cup-liquid: #8E2F3C; }   /* ワイン */
[data-daypart="dinner"] .c-cup_mug   { display: none; }
[data-daypart="dinner"] .c-cup_glass { display: block; }
[data-daypart="dinner"] .c-cup_steam { display: none; }     /* 冷たいものに湯気は立たない */
[data-daypart="closed"] .c-cup_liquid { display: none; }    /* 営業時間外は空の器 */
[data-daypart="closed"] .c-cup_steam  { display: none; }
[data-daypart="closed"] .c-cup_toggle { opacity: .72; }

/* --- 常時走らせるのはここだけ（液面のゆらぎと湯気）。規約により2種に限定する --- */
@keyframes cupSway {
  0%, 100% { transform: rotate(-1.6deg) translateY(0); }
  50%      { transform: rotate(1.6deg) translateY(.35px); }
}
@keyframes cupSteam {
  0%   { opacity: 0;   transform: translateY(2px) scaleY(.86); }
  35%  { opacity: .62; }
  100% { opacity: 0;   transform: translateY(-5px) scaleY(1.1); }
}
.c-cup_liquid { animation: cupSway 4.6s ease-in-out infinite; }
.c-cup_steam path { transform-box: fill-box; transform-origin: 50% 100%; animation: cupSteam 3.2s ease-in-out infinite; }
.c-cup_steam path:nth-child(2) { animation-delay: .9s; }
.c-cup_steam path:nth-child(3) { animation-delay: 1.7s; }

/* --- 展開パネル --- */
.c-cup_panel {
  position: absolute; right: 0; bottom: calc(100% + 10px);
  width: min(300px, 78vw); padding: 18px 20px;
  background: var(--color-base); color: var(--color-font-bk);
  border-radius: 8px; box-shadow: 0 12px 34px rgba(20, 15, 10, .28);
  animation: cupPanelIn .28s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes cupPanelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.c-cup_panel_now { margin-bottom: 13px; }
.c-cup_panel_now_time {
  display: block; font-family: "Jost", sans-serif; font-size: 11px; letter-spacing: .14em;
  color: var(--color-assort); margin-bottom: 4px;
}
.c-cup_panel_now_label { display: block; font-size: 13px; line-height: 1.6; }
.c-cup_panel_list { border-top: 1px solid var(--color-gray); }
.c-cup_panel_list li { border-bottom: 1px solid var(--color-gray); }
.c-cup_panel_list a {
  display: block; padding: 11px 2px; font-size: 12.5px; letter-spacing: .03em;
  transition: color var(--transition-default);
}
.c-cup_panel_list a:hover { color: var(--color-assort); }

/* --- 常駐する器のぶん、画面右下に置かれた要素に逃げ場を作る ---
   実測: KV 右下の「オセアニアスタイル / Cafe & Wine」がカップと重なっていた。
   カップは fixed なので、重なる側に余白を持たせる。JS の出し分けで解こうとすると
   JS 停止時に重なりが残るため、CSS で静的に解く。予約する幅＝24+72+12=108px。 */
.l-kv_text { padding-right: 108px; }
.l-contact_link { padding-right: 108px; }   /* ギャラリーを開くボタンは右寄せで真下に入る */
.l-tscene_nav { margin-top: -52px; }        /* 時間帯ナビ(01/02/03)の最下段がカップに当たる */
@media screen and (max-width: 48em) {
  .l-kv_text { padding-right: 96px; }
  .l-contact_link { padding-right: 0; }     /* SPは全幅・下段に回るため不要 */
  .l-access_map { padding-right: 88px; }    /* 地図下のリンクは右寄せで当たる */
}

/* フッターと地図が見えている間はカップを引っ込める。
   フッターは住所・電話・Instagram を全部持っており、その上に同じ導線を浮かべる意味がない。
   加えて Instagram アイコンは grid の最終カラム(2.4rem)に固定で、右下＝カップの定位置と
   全幅で必ず当たる。避けるより消すのが正しい。
   地図(iframe)も同様。カップが地図の右下に重なると、全画面ボタンや「報告する」に
   かぶってGoogleマップ側の操作を奪う。iframe の中は当たり判定の検査対象外なので
   自動テストでは見つからなかった（実機の目視で発覚）。
   IntersectionObserver が動かない環境ではカップは出たままになるが、
   そのとき隠れるのは「カップ側にも同じものがある Instagram」と地図の一部だけで、
   固有の導線は失われない。 */
/* pointer-events も同時に切る。visibility はトランジション終了時にしか切り替わらないため、
   フェード中(最大0.4s)は見えないまま押下だけ奪い続けてしまう。 */
.c-cup.is-away { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(10px); }

/* --- 他のレイヤーと重ならない --- */
/* ナビ展開中・モーダル表示中は引っ込める（モーダルは inert の有無で開閉する実装） */
body:has(.p-header_nav.is-forceopen) .c-cup,
body:has(.p-header_nav.is-opend) .c-cup,
body:has(#js-modal:not([inert])) .c-cup { visibility: hidden; }

@media screen and (max-width: 48em) {
  .c-cup { right: 16px; bottom: max(16px, env(safe-area-inset-bottom, 0px)); }
  .c-cup_toggle { width: 64px; height: 64px; }
  .c-cup_art { width: 34px; height: 34px; }
}

@media print { .c-cup { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .c-cup_liquid { animation: none; }
  .c-cup_steam path { animation: none; opacity: .45; }
  .c-cup_panel { animation: none; }
  .c-cup_toggle:hover { transform: none; }
}

/* =========================================================================
   境界をまたぐレイヤリング 2026-08-06   plan: docs/plans/2026-08-06-concept-redesign.md
   「切って貼っただけ」に見える物理的な原因は色ではなく、
   セクションが完全に分断された矩形で、どの要素も境界をまたいでいないこと。
   実測でも #access と #faq の間には 213px の「数えられる隙間」があった。
   ここでは面を重ね、境界を要素にまたがせて、1枚の連続した紙面にする。

   制約: ヘッダーの明暗判定が使う3つの矩形（.p-stickyContainer / .l-menu / .l-tscene）は
   箱そのものを動かさない。またぐのは中身と、隙間を詰める方向の移動だけ。
   ========================================================================= */

/* --- ① メニューの暗い面を、前のセクションの上へせり上げる ---
   これまで「白い面」と「暗い面」が端で切り替わるだけだった。
   角を丸めた暗いパネルが手前にせり上がることで、面に前後関係が生まれる。 */
.l-menu {
  position: relative; z-index: 2;
  margin-top: -9rem;
  padding-top: 9rem;              /* せり上げたぶん、上の余白は詰める（空の暗帯を作らない） */
  border-radius: 2.8rem 2.8rem 0 0;
  box-shadow: 0 -2.4rem 6rem rgba(20, 15, 10, .34);
}

/* --- ② コンセプトの写真を、メニューの面にまたがせる ---
   2枚目の写真だけを下へ伸ばし、暗い面の上に乗り上げる。
   「境界をまたぐ要素が1つある」だけで、面は途端に地続きに見える。 */
.l-concept_img-02 { z-index: 3; box-shadow: 0 2.4rem 5rem rgba(20, 15, 10, .38); border-radius: 0 .8rem .8rem 0; }
@media screen and (min-width: 48.0625em) {
  .l-concept_img-02 { bottom: 2rem; }    /* 暗い面に乗り上げる。下げすぎると Menu 見出しに被るのでここまで */
}

/* --- ③ Access と FAQ の間の 213px の隙間を詰め、地図を境界にまたがせる ---
   隙間そのものが「別の紙を貼った」印象の源だった。 */
.l-access { margin-bottom: 8rem; }
.l-access_map_img {
  position: relative; z-index: 2;
  border-radius: 1.2rem; overflow: hidden;
  box-shadow: 0 2rem 5rem rgba(20, 15, 10, .18);
}

/* --- ④ 高度(elevation)の階層をつくる ---
   地の面 → 写真カード → 浮いたラベル、の3層。影は時間帯で色温度を変え、
   影そのものを時間軸の一部にする（朝＝青みの淡い影 / 夜＝深い黒）。 */
:root { --elev-shadow: 0 1.6rem 4rem rgba(30, 36, 48, .16); }
[data-daypart="lunch"]     { --elev-shadow: 0 1.6rem 4rem rgba(40, 30, 18, .20); }
[data-daypart="dinner"],
[data-daypart="closed"]    { --elev-shadow: 0 1.8rem 4.4rem rgba(10, 7, 4, .46); }
.l-daypart_photos figure,
.l-contact_list_item_link { box-shadow: var(--elev-shadow); }
.l-daypart_photos figure { border-radius: .6rem; }
.l-party_img-01, .l-party_img-02, .l-party_img-03 { box-shadow: var(--elev-shadow); border-radius: .4rem; }

@media screen and (max-width: 48em) {
  .l-menu { margin-top: -5rem; padding-top: 6rem; border-radius: 1.8rem 1.8rem 0 0; }
  .l-access { margin-bottom: 5rem; }
}


/* =========================================================================
   文字サイズの是正 2026-08-06（ユーザー指摘: デカすぎる箇所が散見される）
   実測(1280/1920/390)で 28px 以上の見出し系を洗い出し、突出していたものを詰めた。
   ベンチは英字1語の見出し前提のサイズ設計で、和文や長い語が入ると過大になる。
   ========================================================================= */
/* ナビの大見出し 78px→46px（1920で88px→52px）。開いた瞬間に画面を占有していた。
   サイズは project.css:236 の .p-header_nav_content_menu_item(8.8rem) が持っており、
   高さも height:1.16em で font-size に連動する。子ではなくこの要素を直接下げる。 */
.p-header_nav_content_menu_item { font-size: clamp(2.8rem, 3.4vw, 5.2rem); }
/* メニューカードの時間帯名 57px→38px */
.l-menu_list_item_link_text_heading { font-size: clamp(2.6rem, 3vw, 4rem); }
/* 時間軸のキャプション見出し 44px→33px */
.l-tscene_en { font-size: clamp(2.4rem, 2.9vw, 3.6rem); }
/* 貸切・パーティーの大見出し 37px→30px */
.c-heading.is-large { font-size: clamp(2.4rem, 2.7vw, 3.4rem) !important; }
/* フッターの英字コピー 28px→22px */
.p-footer_content_copy_text { font-size: clamp(1.8rem, 1.9vw, 2.4rem); }
@media screen and (max-width: 48em) {
  .p-header_nav_content_menu_item { font-size: 3.2rem; }
  .l-menu_list_item_link_text_heading { font-size: 3rem; }
  .l-tscene_en { font-size: 2.6rem; }
  .c-heading.is-large { font-size: 2.8rem !important; }
}

/* --- FAQ: TOPは先頭10問、残りは下層 faq.html へ（build-faq.py が生成） --- */
.l-faq_more { margin-top: 4rem; text-align: right; }
.l-faq_more_link {
  position: relative; display: inline-block; padding-bottom: .5rem;
  font-size: 1.35rem; letter-spacing: .06em; color: var(--color-main);
}
.l-faq_more_link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; opacity: .45; transition: opacity var(--transition-default);
}
.l-faq_more_link:hover::after { opacity: 1; }
.l-faq_more_link + .l-faq_more_link { margin-left: 1.6rem; }
/* 下層のFAQページ本体（TOPと同じ意匠で全問） */
body.is-subpage .l-faq { padding-block: 8rem 12rem; }
body.is-subpage .l-faq_list { margin-top: 4rem; }

/* =========================================================================
   ギャラリー（横スクロール） 2026-08-06
   scroll-snap だけで動く＝JSゼロ。JSが死んでも横に流せるし、
   スクロールバー/スワイプ/キーボード(tabindex=0 + 矢印)で操作できる。
   写真は 2026-04-17 18:00-21:00 の撮影で全て夜の光。時間帯を名乗らせず
   「夜のこの場所の表情」として括る（嘘の時間帯ラベルを付けない）。
   ========================================================================= */
.l-gallery { padding-block: 10rem 12rem; background: var(--color-base); }
.l-gallery_head { max-width: 72rem; margin-bottom: 4.8rem; }
.l-gallery_lead { margin-top: 2.4rem; font-size: 1.45rem; line-height: 2; letter-spacing: .03em; color: #4a443b; }
.l-gallery_track {
  display: flex; gap: 2rem; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-left: 8rem;
  padding: 0 8rem 2.4rem; scrollbar-width: thin;
}
.l-gallery_track:focus-visible { outline: 2px solid var(--color-assort); outline-offset: 4px; }
.l-gallery_item { flex: 0 0 auto; width: min(46rem, 78vw); margin: 0; scroll-snap-align: start; }
.l-gallery_item img {
  width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: .6rem; box-shadow: var(--elev-shadow);
}
.l-gallery_item figcaption {
  margin-top: 1.4rem; font-size: 1.25rem; letter-spacing: .04em; color: #6f6558;
}
@media screen and (max-width: 48em) {
  .l-gallery { padding-block: 7rem 8rem; }
  .l-gallery_track { gap: 1.2rem; padding: 0 2rem 2rem; scroll-padding-left: 2rem; }
  .l-gallery_item { width: min(32rem, 82vw); }
}
@media (prefers-reduced-motion: reduce) { .l-gallery_track { scroll-behavior: auto; } }

/* =========================================================================
   セクションの縦リズムを揃える 2026-08-06（ユーザー指摘: 余白がきもい）
   実測すると白セクションの上余白が 213/107/89px、下が 0/107/213px と
   ばらばらだった（ベンチの1枚ページ構成のまま、後からセクションを足したため）。
   1つのトークンに寄せて、同じ性格のセクションは同じリズムで並ぶようにする。
   ========================================================================= */
:root { --sec-y: 12rem; }            /* 白セクションの標準上下余白 */
@media screen and (max-width: 48em) { :root { --sec-y: 7rem; } }

.l-party, #topics, #access, .l-faq, .l-contact, .l-gallery {
  padding-top: var(--sec-y); padding-bottom: var(--sec-y);
}
/* 例外はここに理由付きで書く（暗黙の例外を作らない） */
#access { margin-bottom: 0; }                        /* FAQ との隙間は上下余白で持つ */
.l-contact { padding-bottom: calc(var(--sec-y) * 1.6); }  /* 直後がフッターの暗い面なので少し深く */
.l-gallery { padding-bottom: var(--sec-y); }

/* =========================================================================
   貸切・パーティーを組み直す（ユーザー指摘: もっとデザインできるでしょ／
   写真の散らしが気に入らない）
   ベンチは写真3枚を絶対配置で散らし、そのために親に padding-bottom:138rem を
   持たせる作りだった。実測で下余白 1227px、左カラムは見出しの下がまるごと空洞。
   絶対配置をやめ、テキストと写真を1つのグリッドに載せて空洞を無くす。
   ========================================================================= */
.l-party { position: relative; }
@media screen and (min-width: 48.0625em) {
  /* 見出しは横一杯に置き、本文と利用シーンを2カラムで並べる（左カラムの空洞を解消） */
  .l-party_text {
    grid-template-areas: "heading heading" "message uses" "link uses" !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 4rem 8rem !important;
    /* 利用シーンの列が高いぶん行が引き伸ばされ、左カラムに空洞ができていた。
       各セルを上詰めにして、本文のすぐ下に予約導線が続くようにする。 */
    align-items: start !important;
  }
  .l-party_heading { margin-bottom: 1.2rem; }
  .l-party_uses_wrap { max-width: none; }

}
@media screen and (max-width: 48em) {
}

/* =========================================================================
   メニューの見せ方 2026-08-06（ユーザー指摘: もっと美しくして欲しい）
   品名と価格が2カラムで並ぶだけで、左列の価格と右列の品名が近接して
   1つの行のように読めていた。行に罫を1本入れて「品書き」の体裁にする。
   ========================================================================= */
.l-daypart_items, .l-menuList_items { column-gap: 8rem; row-gap: 0; }
.l-menuItem {
  align-items: baseline;
  padding: 1.5rem 0 1.4rem;
  border-bottom: 1px solid rgba(240, 234, 226, .13);
}
.l-menuItem_name { line-height: 1.6; }
.l-menuItem_name small { margin-top: .4rem; line-height: 1.7; color: #9a9084; }
.l-menuItem_price { letter-spacing: .04em; color: rgba(240, 234, 226, .92); }
.l-menuItem_price small { margin-left: .2rem; }
/* 見出し（時間帯名＋時間）と品書きの間を開けて、塊として読ませる */
.l-daypart_photos { margin-bottom: 5.2rem; }
.l-menuList_group_head { margin-bottom: 1.2rem; }
@media screen and (max-width: 48em) {
  .l-daypart_items, .l-menuList_items { column-gap: 0; }
  .l-menuItem { padding: 1.3rem 0 1.2rem; }
  .l-daypart_photos { margin-bottom: 3.6rem; }
}

/* --- ブランド名は必ずロゴを使う（ユーザー方針 2026-08-06）---
   グローバルナビの中で「scenes / CAFE & WINE」が本文フォントの文字で組まれていた。
   ロゴには字形（最後の s の下の波線）と字間の設計があり、フォントで代用すると別物になる。
   ロゴ画像を使う場所: ヘッダー / ナビ / フッター / ローディング / コラム・FAQの頭。 */
.p-header_nav_content_text_copy { margin-bottom: 3.2rem; }
.p-header_nav_logo { display: block; width: min(22rem, 62%); height: auto; object-fit: contain; }
@media screen and (max-width: 48em) { .p-header_nav_logo { width: min(17rem, 54%); } }

/* =========================================================================
   貸切・パーティー / ギャラリーを「置いただけ」から作り替える 2026-08-06
   （ユーザー指摘: ただのベタ貼りならいらん）
   写真を並べること自体には意味がない。貸切は「フロアごと押さえられる」ことが
   伝わればよく、そのためには小さい写真3枚より 1枚を全幅で見せて言葉を重ねる方が強い。
   ギャラリーは説明文の羅列をやめ、01-10 の連番＝「場面（scenes）」の集まりにする。
   ========================================================================= */

/* --- 貸切: 全幅の帯1枚に、貸切の要点と電話を重ねる --- */
.l-party_band {
  position: relative; margin-top: 8rem;
  /* p-inner の左右余白を突き抜けて全幅にする */
  width: 100vw; margin-inline: calc(50% - 50vw);
  min-height: 46rem; display: grid; align-items: end;
  overflow: hidden;
}
.l-party_band_img {
  position: absolute; inset: 0; background-size: cover; background-position: center 60%;
}
.l-party_band::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(20,15,10,.78) 0%, rgba(20,15,10,.42) 46%, rgba(20,15,10,.06) 78%);
}
.l-party_band_over {
  position: relative; z-index: 1; padding: 6rem 8rem; max-width: 62rem; color: var(--color-base);
}
.l-party_band_lead {
  font-family: "Jost","Noto Sans JP",sans-serif; font-size: 1.25rem; letter-spacing: .22em;
  color: #e7c4a8; margin-bottom: 1.6rem;
}
.l-party_band_txt { font-size: 1.6rem; line-height: 2; letter-spacing: .03em; margin-bottom: 2.8rem; }
.l-party_band_cta {
  display: inline-block; padding: 1.3rem 3rem; border-radius: 999px;
  background: var(--color-assort); color: var(--color-base);
  font-family: "Jost",sans-serif; font-size: 1.4rem; letter-spacing: .08em;
  transition: opacity var(--transition-default);
}
.l-party_band_cta:hover { opacity: .82; }
@media screen and (max-width: 48em) {
  .l-party_band { margin-top: 5rem; min-height: 34rem; }
  .l-party_band::after { background: linear-gradient(180deg, rgba(20,15,10,.28) 0%, rgba(20,15,10,.82) 62%); }
  .l-party_band_over { padding: 3.2rem 2rem; max-width: none; }
  .l-party_band_txt { font-size: 1.45rem; margin-bottom: 2rem; }
}

/* --- ギャラリー: 端まで流れる連番の場面集（大小のリズムを付ける） --- */
.l-gallery_track { padding-right: 0; }
/* 全部スクエアで高さを揃える。角丸を少し大きめに取って、硬くなりすぎない表情にする
   （装飾を足すのではなく、形と角の丸みだけで軽さを出す） */
.l-gallery_item { width: min(38rem, 62vw); }
.l-gallery_item img { aspect-ratio: 1 / 1; border-radius: 1.6rem; }
.l-gallery_item:last-child { margin-right: 8rem; }   /* 右端に余韻を残す（paddingだと幅が縮んで高さが揃わない） */
.l-gallery_no {
  margin-top: 1.1rem; font-family: "Jost", sans-serif; font-size: 1.15rem; font-weight: 300;
  letter-spacing: .18em; color: var(--color-assort);
}
@media screen and (max-width: 48em) {
  .l-gallery_item { width: min(26rem, 62vw); }
  .l-gallery_item img { border-radius: 1.2rem; }
  .l-gallery_item:last-child { margin-right: 2rem; }
}

/* --- 時間軸: 「どう過ごしてほしいか」のポイント 2026-08-06 ---
   時間帯名と営業時間だけでは「その時間に何をしに来る場所か」が伝わらない。
   各時間帯に短い過ごし方を2点添える。事実（Wi-Fi/電源・テラス席・子連れ歓迎・
   22時まで・駅東口徒歩約2分）に基づく範囲に留める。 */
.l-tscene_pts { margin-top: 2rem; display: grid; gap: .9rem; }
.l-tscene_pts li {
  position: relative; padding-left: 1.8rem;
  font-size: 1.3rem; line-height: 1.75; letter-spacing: .03em;
  color: rgba(240, 234, 226, .88); text-shadow: 0 1px 10px rgba(0,0,0,.5);
}
.l-tscene_pts li::before {
  content: ""; position: absolute; left: 0; top: .72em;
  width: .7rem; height: 1px; background: var(--color-assort);
}
/* 4区分になったぶんラベルが増えるので、軸の文字を少し詰める */
.l-tscene_navNum { font-size: 1.5rem; }
.l-tscene_navLb { font-size: 1.2rem; }
@media screen and (max-width: 48em) {
  .l-tscene_pts { margin-top: 1.4rem; gap: .6rem; }
  .l-tscene_pts li { font-size: 1.2rem; padding-left: 1.5rem; }
  /* 幅は「%」で持たせない。右端には時間軸のラベル列（.l-tscene_axis_tick /
     .l-tscene_navBtn）が絶対配置で常駐しており、86% だとキャプションがその列へ
     食い込む（320px で実測: キャプション右端 284px に対し軸ラベル左端 259px＝
     最大25px の重なり。"22:00" が本文に被っていた）。
     軸側は右端から 2rem＋ラベル幅ぶんを使うので、こちらは rem で同じ量を確保する。 */
  .l-tscene_caps { width: calc(100% - 9.5rem); }
}

/* =========================================================================
   ヘッダーの配置 2026-08-06（ユーザー指摘: ハンバーガーは右／バランスが気持ち悪い）
   実測すると SP は既にハンバーガーが右(328-365)・ロゴが左(25-118)で、
   PC だけがハンバーガー左・ロゴ中央だった＝端末で並びが逆になっていた。
   PC を SP に合わせる: ロゴ左 / 右にまとめて Tel・Instagram・ハンバーガー。
   ロゴの左端は本文グリッド(p-inner の 8rem)に揃えて、浮いた棒に見えないようにする。
   ========================================================================= */
@media screen and (min-width: 48.0625em) {
  .p-header { justify-content: flex-start; padding-left: 8rem; }
  .p-header_logo { margin-left: 0; }
  /* ハンバーガーを右端へ（is-narrow の平行移動も左向きに反転） */
  .p-header_button { left: auto; right: 2rem; }
  .p-header.is-narrow .p-header_button { transform: translate(-2rem, 2rem); }
  /* Tel・Instagram はハンバーガーの左に寄せる */
  .p-header_contact { right: 15rem; }   /* Menuボタンがピル(96px)になったぶん左へ */
}

/* --- 著者クレジット（EEAT）--- 
   .l-news は display:flex（見出し32rem ＋ 記事一覧 flex-grow:99）。
   3つ目の子として置くと記事一覧の幅を奪って本文が1語ずつ折り返す（実際に起きた）。
   折り返させて全幅の行にし、記事一覧の左端に揃える。 */
.l-news { flex-wrap: wrap; }
.l-news_author { flex-basis: 100%; margin-top: 4rem; padding-left: 32rem; }
.l-news_author a { color: var(--color-assort); }
@media screen and (max-width: 48em) {
  .l-news_author { padding-left: 0; margin-top: 3rem; }
}

/* --- Access の余白バランス 2026-08-06 ---
   .l-access は flex で子を flex:1 にするだけだったため、本文列と地図列が
   569px ずつで隙間ゼロ（実測）。文字と地図が直接ぶつかって見えていた。
   間に余白を入れ、地図を縦に伸ばして左右の重さを釣り合わせる。
   地図下のリンク2本も縦積みで散っていたので、横一列にまとめる。 */
@media screen and (min-width: 48.0625em) {
  .l-access { gap: 7rem; align-items: start; }
  .l-access_map_embed { aspect-ratio: 4 / 3; }
  .l-access_map_img { margin-bottom: 2.4rem; }
  .l-access_map .c-button { display: inline-block; margin: 0; padding: .6rem 0; font-size: 1.4rem; }
  .l-access_map_links { display: flex; justify-content: flex-end; gap: 3.2rem; }
}

/* =========================================================================
   ハンバーガーを「Menu ボタン」にする 2026-08-06（ユーザー指示）
   波線アイコン(.p-header_button_line)は Wellness × Happiness の行と重なり、
   かつ何のボタンか伝わりにくかった。アイコンを外し、Instagram と同じ
   ピル型のボタンにして文字（Menu / Close）で示す。
   ・波線は削除。SVGは残すが display:none（マークアップは触らない）
   ・寸法は px 固定。rem はビューポート連動で 768px 幅で肥大するため
   ========================================================================= */
.p-header_button_line { display: none; }
.p-header_button {
  width: auto; height: auto;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 96px; padding: 0 20px; height: 44px; border-radius: 999px;
  border: 1px solid currentColor;
  transition: background var(--transition-default), color var(--transition-default), border-color var(--transition-default);
}
.p-header_button_text {
  height: auto; font-family: "Jost", "Noto Sans JP", sans-serif;
  font-size: 13px; letter-spacing: .12em; line-height: 1;
}
.p-header.is-onlight .p-header_button { color: var(--color-main-deep); }
.p-header.is-ondark  .p-header_button { color: var(--color-base); }
.p-header_button:hover { background: currentColor; }
.p-header_button:hover .p-header_button_text { color: var(--color-main-deep); }
.p-header.is-ondark .p-header_button:hover .p-header_button_text { color: var(--color-main-deep); }
/* ナビ展開中は塗りつぶして「閉じる」であることを明示 */
.p-header_button:has(+ .p-header_nav.is-forceopen) {
  background: var(--color-assort); border-color: var(--color-assort); color: var(--color-base);
}
.p-header_button:has(+ .p-header_nav.is-forceopen) .p-header_button_text { color: var(--color-base); }
/* 押下領域は本体で確保できたので、疑似要素での拡張は不要 */
.p-header_button::after { content: none; }
@media screen and (max-width: 48em) {
  .p-header_button { min-width: 84px; height: 40px; padding: 0 16px; }
  .p-header_button_text { font-size: 12px; }
}

/* ナビ上部の「wellness × happiness」が Menu ボタンと重なっていた
   （実測 PC: ボタン 1148-1244 / テキスト 1115-1244 が同じ帯）。
   ボタンは右上に固定なので、テキスト側をボタンの下に落として逃がす。 */
/* project.css:192 で position:absolute; top:3.2rem; right:4rem。
   padding では動かないので、ボタンの下へ落とす（top をボタン下端より下に） */
@media screen and (min-width: 48.0625em) {
  .p-header_nav_text { top: 10.4rem; right: 4rem; }
}

/* Stem の運用投稿（お知らせ/イベント）が入る箱。0件のときは何も出さない。 */
.l-news_stem:empty { display: none; }
.l-news_stem { flex-basis: 100%; }

/* GBP評価の可視ブロック（値は Stem が placeId 経由で GBP から同期する） */
.l-access_rating { display: flex; align-items: baseline; gap: .6rem; margin-bottom: 1.6rem; justify-content: flex-end; }
.l-access_rating_star { color: var(--color-assort); font-size: 1.5rem; line-height: 1; }
.l-access_rating_val { font-family: "Jost", sans-serif; font-size: 1.8rem; letter-spacing: .04em; }
.l-access_rating_cnt { font-size: 1.25rem; color: #6f6558; letter-spacing: .03em; }

/* --- 地域×コンセプトSEOセクション（正典 DESIGN_RULES §6 の基本仕様）---
   地域名（市区町村＋近隣＋地域特性）× 業種/コンセプトKW の本文と、関連KWチップ。
   ローカルSEO/MEO と AIO の両方に効く。 */
.l-local { padding-top: var(--sec-y); padding-bottom: var(--sec-y); }
.l-local_body { max-width: 82rem; margin-top: 4rem; }
.l-local_body p { font-size: 1.45rem; line-height: 2.05; letter-spacing: .03em; color: #4a443b; }
.l-local_body p + p { margin-top: 2rem; }
.l-local_chips { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 3.6rem; }
.l-local_chip {
  padding: .6rem 1.4rem; border: 1px solid rgba(169, 113, 74, .32); border-radius: 100px;
  font-size: 1.2rem; letter-spacing: .04em; color: #6f6558;
}
@media screen and (max-width: 48em) {
  .l-local_body { margin-top: 2.4rem; }
  .l-local_chips { gap: .6rem; margin-top: 2.4rem; }
  .l-local_chip { font-size: 1.15rem; padding: .5rem 1.1rem; }
}

/* =========================================================================
   モバイル可読性・タップ領域（design-qa 実測 2026-08-06 / 390px）
   rem が vw 連動のため SP では組版がそのまま縮み、NAP と主要導線が
   「読めない・押せない」側へ落ちていた。装飾ラベルは触らず、
   ①電話 ②フッターNAP ③時間帯ナビ ④FAQ全問導線 だけを底上げする。
   ========================================================================= */
@media screen and (max-width: 48em) {
  /* ① tel: リンクはSPの主要CV。実測 85x21 / 110x24 / 67x15 で指に対して薄すぎた。
     文字サイズは変えず、行箱だけ広げて当たり判定を確保する（見た目の字面は不変）。 */
  a[href^="tel:"] {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
  }
  /* ② フッターのNAP（住所・営業時間・電話）は 10.4px で実質読めなかった。
     NAP は表記一致がエンティティ同定に効く＝読ませる前提の情報なので底上げする。 */
  .p-footer_content_info_address,
  .p-footer_content_info_hours,
  .p-footer_content_info_tel { font-size: 1.2rem; line-height: 1.75; }
  /* project.css:433 の .p-footer_content_info{white-space:nowrap} は PC 横並び用。
     SP では縦積みになるのに nowrap が残るため、行が器より長いと折り返せずに突き抜ける。
     EN の住所1行目「1-1-60 Shibukawa, Kusatsu, Shiga 525-0026 (inside niwa+)」が
     320px で 322px となり、shrink-to-fit でページ全体が 339px にズームアウトしていた
     （en/index.html の横はみ出し FAIL。JA は行が短くたまたま収まっていただけ）。
     <br> で意図した改行位置は保ったまま、収まらない行だけ折り返させる。 */
  .p-footer_content_info { white-space: normal; }
  /* ③ 時間帯ナビは実測28px高・26px幅。ラベルは据え置き、パディングで箱を稼ぐ。
     右端に絶対配置されているので、左パディングは左へ伸びる＝文字位置は動かない。
     キャプション側は .l-tscene_caps を 9.5rem 分ぶん詰めてあるので当たらない。 */
  .l-tscene_navBtn {
    min-height: 34px;
    padding-top: .4rem;
    padding-bottom: .4rem;
    padding-left: 1rem;
  }
  /* ④ 全52問への導線は下層ページへの唯一の入口。26px では踏み外す。 */
  .l-faq_more_link {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
  }
  /* ⑤ 全メニューのカテゴリ絞り込みタブ（11個）は実測 28px 高。メニューを読む
     唯一の切替 UI で、隣のチップと 6px しか離れていないため取り違えが起きる。
     字面は変えず、行箱だけ 34px に揃える（③ と同じ手当て）。 */
  .l-menuCatTab { min-height: 34px; }
  /* ⑥ ギャラリーを開くボタン(31px)・モーダルの Close(27px) も同様。
     Close は閉じられないと画面から出られないので、押せる大きさは必須。 */
  .l-contact_link_button,
  .l-modal_button { min-height: 34px; }
  /* ⑦ 一覧・記事ページの末尾リンク（トップへ戻る / English）は実測 18px 高。
     このページから出る唯一の導線なので、④ と同じ扱いにする。 */
  .c-artPage_foot a, .c-columnFoot a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
  }
  /* ⑧ Instagram アイコンリンクは実測 20px 角で、指では狙えない。
     ただし `.p-footer_content_social` は width:2.4rem + aspect-ratio:1/1 で、
     min-width を足すと中の img(width:100%) ごと拡大してアイコンの見た目が変わる。
     写経の意匠を動かさないため、透明な疑似要素で当たり判定だけ 44px に広げる
     （レイアウトは1pxも動かない。design-qa の矩形計測には出ないので WARN は残る）。 */
  .p-footer_content_social,
  .p-header_nav_content_text_social { position: relative; }
  .p-footer_content_social::after,
  .p-header_nav_content_text_social::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
  }
}

/* FAQの質問は h3 でボタンを包む（AIの引用単位＝見出し＋直後の答え / stem-audit G29）。
   見出しの既定スタイルは打ち消して、見た目は従来のアコーディオン行のまま保つ。 */
.l-faq_qh { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }

/* 極小幅での可読性。
   ルートの font-size に下限を入れる案は実測で棄却した（320px で真の scrollWidth が
   328px になり横はみ出し FAIL）。ベンチの html{font-size:min(2.667vw,…)} は
   余白・配置まで rem 連動なので、ルートを持ち上げると版面ごと膨らむ。
   よって**本文性の高い要素だけ**を px で下支えする。段落なので折り返すだけで、
   箱を押し広げない。装飾ラベル(KWチップ・コピーライト)は据え置き。 */
@media screen and (max-width: 30em) {
  .p-footer_content_info_address,
  .p-footer_content_info_hours,
  .p-footer_content_info_tel { font-size: max(1.2rem, 12px); }
  .l-tscene_hours, .l-daypart_lead, .l-concept_text_message { font-size: max(1.3rem, 12px); }
  /* 上と同じ理由で、320px で 9〜11px まで落ちていた「読ませる情報」を追加で下支えする
     （2026-08-07 実測。いずれも段落・グリッドセル内なので折り返すだけで箱は広がらない）。
     価格の税込表記 9.4px / アレルギー表記 9.8px は、金額と食事制限という
     「間違えると実害が出る情報」なので装飾ラベル扱いにはできない。 */
  .l-menuItem_price small,
  .l-menuItem_name small { font-size: max(1.15rem, 11px); }
  .l-menuNote, .l-menuNote span { font-size: max(1.2rem, 12px); }
  .l-menuList_group_head span { font-size: max(1.2rem, 12px); }
  /* .l-daypart_photos figcaption は 10.2px だが、ここでは触らない。
     そもそも figure{overflow:hidden} + img{height:100%} で全ビューポートで
     切り取られていて画面に出ていない（別件・要判断。報告のみ）。 */
  .l-daypart_time { font-size: max(1.3rem, 12px); }
  .l-tscene_pts li { font-size: max(1.2rem, 12px); }
  .l-news_articles_item_link_text,
  .l-news_articles_item_link_date time { font-size: max(1.3rem, 12px); }
  .l-party_uses li, .l-party_uses_note, .l-party_uses_lead { font-size: max(1.4rem, 12px); }
  /* フッターは2列グリッド(本文 / SNSアイコン)。グリッド項目の既定 min-width:auto は
     「内容より狭くならない」ため、上で本文を底上げすると1列目が 294px を要求し、
     286px の器を突き破ってSNSアイコンが画面外へ出た（320px で実測・はみ出しFAIL）。
     min-width:0 で列を縮められるようにする＝本文が折り返して収まる。 */
  .p-footer_content > * { min-width: 0; }
}

/* 店名は常に小文字。ベンチの .c-heading は text-transform:capitalize なので、
   日本語の直後にある "scenes" が語頭と判定されて "Scenes" になっていた。
   ブランド表記はここで固定する（見出しの Capitalize 自体はベンチの設計なので残す）。 */
.c-lower { text-transform: none !important; }
/* 頭字語は capitalize だと "Faq" になる。大文字で出す。 */
.c-heading.is-acronym { text-transform: uppercase; }

/* ナビ項目の行間について（触らないこと・2026-08-06 実測で棄却）:
   行(li)は50pxだが内側の line-height は65pxで、ボックス上は各行が15px重なる。
   これを line-height:1.15 で詰めたところ、.p-header_nav_content_menu_item_link_text の
   overflow:hidden がベンチのリビール用マスクであるため、**文字の上下が切れた**。
   マスクは字面より高い必要があり、この重なりは設計どおり。ボックスが重なるだけで
   グリフは衝突していない。「日本語」がem箱いっぱいの和文で詰まって見えたのが実体で、
   表記を "Japanese" にして解消済み。 */

/* 時間帯パネル(.l-daypart)の内側余白。padding は上下だけで左右が0のため、
   ダークな箱の縁に見出し・本文・品名がぴったり張り付いていた（ユーザー指摘 2026-08-06）。
   箱の位置は動かさず、中身に呼吸を持たせる。 */
.l-daypart { padding-left: 4rem; padding-right: 4rem; }
@media screen and (max-width: 48em) {
  .l-daypart { padding-left: 2rem; padding-right: 2rem; }
}
/* 「メニューを見る」は細めのゴシックで（ユーザー方針＝細いウェイト基調）。 */
.l-menu_list_item_link_label_text { font-weight: 300; letter-spacing: .08em; }

/* =========================================================================
   カードの反応（ホバー・クリック）
   ベンチはカードの動きを run.js(PIXI/GSAP) 側で持っていたため、CSS には
   ホバーの定義が1つも無い。配信環境では run.js が落ちるので、元から
   「ホバーしても何も起きないカード」になっていた（ユーザー指摘 2026-08-06）。
   CSSだけで完結させ、ローカルでも配信でも同じ反応にする。
   ========================================================================= */
.l-contact_list_item_link,
.l-menu_list_item_link { transition: transform .4s cubic-bezier(.2,.7,.3,1); }
.l-contact_list_item_link_bg,
.l-menu_list_item_link_bg {
  transition: transform .6s cubic-bezier(.2,.7,.3,1), filter .4s ease;
}
.l-contact_list_item_link:hover .l-contact_list_item_link_bg,
.l-menu_list_item_link:hover .l-menu_list_item_link_bg {
  transform: scale(1.05);
  filter: brightness(1.12);
}
.l-contact_list_item_link_label,
.l-menu_list_item_link_label { transition: opacity .3s ease; }
.l-contact_list_item_link:hover .l-contact_list_item_link_label,
.l-menu_list_item_link:hover .l-menu_list_item_link_label { opacity: .75; }
/* 背景の拡大がカードの外へはみ出さないように切る */
.l-contact_list_item_link,
.l-menu_list_item_link { overflow: hidden; }

/* PCで電話カードが無反応だった件。
   foundation.css:160 の `@media(min-width:48.0625em){ a[href^="tel:"]{pointer-events:none} }` は
   「PCから電話はかけられない」という理由で本文中のtelリンクを無効化するベンチの既定。
   ただしコンタクトの大きなカードは押せる見た目なので、無反応だと壊れて見える。
   このカードだけ有効に戻し、PCでは番号そのものを見せて用が足りるようにする。 */
@media screen and (min-width: 48.0625em) {
  .l-contact_list_item_link[href^="tel:"] { pointer-events: auto; }
  .l-contact_list_item_link[href^="tel:"] .l-contact_list_item_link_label_text::after {
    content: " 077-558-8778";
    font-size: .62em;
    letter-spacing: .06em;
    opacity: .85;
  }
}

/* ── TOPの記事欄（column.css はTOPで読み込まないので、ここに置く）── */
/* TOPの記事欄は先頭3件だけ。Stem は全件注入し件数指定の仕様が無いため（2026-08-07 実装確認）。
   テンプレは箱の末尾に置いてあるので、SSR前(ローカル=6本)/SSR後(配信=全件)のどちらでも
   nth-child の数え方が一致する。DOMには全件残るのでクローラーとAIからは全部読める。 */
.l-news_articles > .l-news_articles_item:nth-child(n+4) { display: none; }
.c-artMore { margin-top: 4rem; text-align: center; }
.c-artMore_link {
  display: inline-flex; align-items: center; min-height: 34px;
  font-family: "Jost","Zen Kaku Gothic New",sans-serif; font-weight: 300;
  font-size: 1.4rem; letter-spacing: .1em;
  text-decoration: underline; text-underline-offset: .4em;
}

/* =========================================================================
   下層ページの軽量フッター（chrome.py の footer(compact=True)）
   TOP はフルブリードの写真フッターで締めるが、記事やFAQの末尾に同じ重さは要らない。
   写真レイヤーを外して無地にし、ロゴと余白を詰める。**情報は1つも減らさない**
   （NAPは全ページで一致している必要がある＝エンティティ同定に効く）。
   ========================================================================= */
.p-stickyContainer.is-compact {
  background: var(--color-main-deep, #3a322a);
  min-height: 0;
}
.p-stickyContainer.is-compact .p-footer { padding-top: 7rem; padding-bottom: 4.4rem; }
.p-stickyContainer.is-compact .p-footer_logo { max-width: 22rem; }
.p-stickyContainer.is-compact .p-footer_logo_strs img { width: 100%; height: auto; }
.p-stickyContainer.is-compact .p-footer_content { margin-top: 3.2rem; }
/* 無地の上に置くので、写真用の影は不要（文字が濁って見える） */
.p-stickyContainer.is-compact .p-footer_content_copy,
.p-stickyContainer.is-compact .p-footer_content_info,
.p-stickyContainer.is-compact .p-footer_content_copy_copyright { text-shadow: none; }
@media screen and (max-width: 48em) {
  .p-stickyContainer.is-compact .p-footer { padding-top: 5.6rem; padding-bottom: 3.6rem; }
  .p-stickyContainer.is-compact .p-footer_logo { max-width: 16rem; }
}

/* --- ナビ内の連絡ボタンが3本になった（Tel / Instagram / Reserve）---
   既定は flex-shrink:1 なので、3本目を足すと既存の2本が縮む。
   実測（headless・2026-08-18）: 500px で Instagram 266px → 152.5px（-43%）、
   さらに Reserve の右端がビューポート右端に接地した（変更前は198pxの余白）。
   既存の見た目を変えないので縮小を止め、入り切らない分は折り返させる。 */
.p-header_nav_content_text_contact { flex-wrap: wrap; }
.p-header_nav_content_text_contact_link { flex-shrink: 0; }