/*
Theme Name: SWELL CHILD
Template: swell
Description: ヴィンチスグラッシ（SWELL 子テーマ）
Version: 1.0.0
*/
/* ⚠️ このファイルは renewal/scripts/build-wp.py の生成物。直接編集しない。
   見た目を直すときは build-mockups.py の CSS を直して、build-site.py → build-wp.py の順で作り直す。 */

/* ═════════ SWELL の枠を打ち消す層 ═════════
   このサイトは全ページの本文を #vg で包むので、#vg を含むブロックだけを対象にする。 */

/* フルワイドボックスの内側の余白と最大幅を外す（写真を画面の端まで出すため） */
.swell-block-fullWide:has(#vg){padding:0 !important;margin-bottom:0 !important}
.swell-block-fullWide:has(#vg) .swell-block-fullWide__inner{max-width:none !important;padding:0 !important}
/* 固定ページ末尾の余白（エアタクミの前例で実測した4要素のうち、本文に関係するもの） */
.l-mainContent:has(#vg){padding-bottom:0 !important}
#vg{margin:0 !important}
/* トップはヘッダーの直下から写真を始める（2026-09-15 オーナー指示。SWELL の #content の padding-top:2em を外す）。
   2026-09-18 下層も同じにした＝site/ ではヘッダーの直下に .ph（欧文＋H1）が来る */
.top #content,#content:has(#vg){padding-top:0 !important}
/* 下層ページ: パンくずと本文の間に出る白い帯（2026-09-21 オーナーが原因を特定）。
   SWELL の .l-content が padding-top を持っている（既定 2em ／ 別の画面幅で 4em）。
   オーナーが SWELL 側でこの2つをコメントアウトしたところ白い帯が消えた＝これが原因。
   ⚠️ #content への打ち消し（下の行）では消えなかった＝ .l-content は #content とは別の要素。
   下の margin 6em も落とす。本文の最後は濃い色の「ご予約」で終わる設計なので、
   その後ろに白い余白が入ると帯に見える。
   トップで起きなかったのは、トップには .top #content の打ち消しが別に効いているため。 */
.l-content:has(#vg){padding-top:0 !important;margin-top:0 !important;margin-bottom:0 !important}
/* PC: フッターの手前に地色（生成り）の帯が出る（2026-09-22 オーナーのスクショ。白い最後の節 → 生成りの帯 → SWELL のフッター）。
   生成りは #vg の地色＝帯は #vg の内側。確認用の wp/preview では #vg 直下のブロックの上下余白はすべて 0（Chrome で実測）なので、
   WordPress 側で #vg（グループブロック）の直下に余白が足されている。本文はブロック同士の余白を使わない設計なので、0 に固定する。
   グループが内側の入れ物（.wp-block-group__inner-container）を出す場合にも効くようにしてある */
#vg>*,#vg>.wp-block-group__inner-container>*{margin-top:0 !important;margin-bottom:0 !important}
/* 下層は本文の .ph に H1 がある。SWELL が出す固定ページのタイトルは消す（H1 が2つになるため） */
body:has(#vg) #top_title_area,.l-mainContent:has(#vg) .c-pageTitle{display:none !important}
/* iPhone の Safari でページの下が白く出る対策（2026-09-15・参考=いえかつ）。画面の地の色を固定バーと同じ焦茶に。
   本文の地色は SWELL が body に塗るので変わらない。#vg の変数はここでは使えないので色を直に書く（--ink と同じ値） */
html{background-color:#1C1A18}
/* ↑ 2026-09-22: フッターを #1C1A18 にしたので揃えた（iPhone でページの下を引っ張ると、フッターのすぐ下にこの色が出る） */
/* スマホの固定バー（60px＋ホームバー）の分、SWELL のフッターの下に余白を足す（PC は固定バーを出さない＝821px 以上は不要） */
@media(max-width:820px){#body_wrap{padding-bottom:calc(60px + env(safe-area-inset-bottom))}}

/* SWELL が本文の見出しに付ける装飾（背景・線・::before/::after のアイコン）を消す。
   余白と文字の大きさは本文側のクラスで指定し直しているので、ここでは飾りだけを消す */
#vg h1,#vg h2,#vg h3,#vg h4{background:none;border:0;padding:0;box-shadow:none;color:inherit;position:static}
#vg h1::before,#vg h1::after,#vg h2::before,#vg h2::after,
#vg h3::before,#vg h3::after,#vg h4::before,#vg h4::after{content:none}
/* 表と引用の既定の飾り（本文側の .tbl / .voice が後から必要な線だけを引き直す） */
#vg table,#vg th,#vg td{border:0;background:none}
#vg blockquote{background:none;border:0;font-style:normal}
#vg blockquote::before,#vg blockquote::after{content:none}

/* ═════════ フッター（SWELL のフッターウィジェット3つ）2026-09-22 ═════════
   オーナー「エアタクミと同じようにフッターはウィジェットでやりたい」。中身は wp/footer/footer-1〜3.html（site/ のフッターから生成）。
   SWELL の実際の構造（エアタクミの実ページで確認）:
     footer#footer.l-footer > .l-footer__inner > .l-footer__widgetArea > .l-container.w-footer.-col3 > .w-footer__box ×3
       > .c-widget.widget_custom_html > .textwidget > 貼った HTML ／ その下に .l-footer__foot（コピーライト）
   ⚠️ エアタクミの子テーマは .w-footer__inner / .w-footer__item を指定しているが、実物には無い＝効いていない。こちらは実物の名前で書く。
   #vg の外なので本文用の変数（--ink など）は使えない＝色は直に書く（値は site/ の :root と同じ）。
   SWELL の .w-footer.-col3 .w-footer__box より強くするため、すべて #footer から書く */
/* 2026-09-22 オーナー「フッターの色とCTAの背景の色が一緒だから良くない」。本文の最後の「ご予約」の節（焦茶 #2B2724）と
   境目が無く、大きな空白に見えた → フッターだけ一段濃い #1C1A18（A案。B案=茶 #6A300E は予約ボタンと色が近く重い） */
#footer.l-footer{background:#1C1A18;color:rgba(250,247,241,.78)}
#footer .l-footer__inner{background:none}
#footer .w-footer{display:grid;grid-template-columns:1fr;gap:32px;max-width:1080px;margin:0 auto;padding:56px 20px 40px;
  text-align:center;font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic UI",Meiryo,sans-serif;font-size:14px;line-height:2;letter-spacing:.04em}
#footer .w-footer__box{width:auto;max-width:none;padding:0;margin:0}
#footer .w-footer__title,#footer .c-widget__title{display:none}
#footer .c-widget{margin:0}
#footer .c-widget+.c-widget{margin-top:18px}
#footer .vgf p{margin:0}
#footer .vgf a{color:inherit;text-decoration:none}
#footer .vgf .igf{margin:14px 0 0}  /* 2026-09-22 Instagram（アイコンは codex CLI 製の線画・色は文字色を継ぐ） */
#footer .vgf .igf a{display:inline-flex;align-items:center;gap:8px;letter-spacing:.04em}
#footer .vgf .igf .igi{display:block;width:18px;height:18px;flex:none}
#footer .vgf a.tl{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;white-space:nowrap}
#footer .vgf .crest{display:block;width:120px;height:auto;margin:0 auto 18px}
/* ↑ 2026-09-22 オーナー「ロゴが透過で見にくい」。logo-white.png は一番濃い所でも不透明度 約80%・色は RGB 224 前後の灰（実測）。
   → 2026-09-22 夜: オーナー支給の logowhite.svg は「茶色（#6A300E）の台座と線画＋楕円の内側を白で塗った面1枚」だった。
   brightness(0) invert で白に揃えると台座も面も線も白になり、白い楕円の塊に見えた（オーナー「ロゴおかしい」）。
   → 茶色を #FAF7F1、白い面をフッターの地色（今は #1C1A18）に置き換えた vg-logo-white.svg を作り、filter は外した。
     フッターの地色を変えたら、この SVG の楕円の内側の色も同じ色に直すこと（楕円の内側が四角く浮く）
   → 2026-09-22 夜 オーナー指示で、支給の logowhite.svg（白い楕円に茶の線画）をそのまま使うことにした＝白い楕円のバッジとして見える。
     vg-logo-white.svg は使っていない。filter は付けない（付けると白い塊に戻る） */
#footer .vgf .fh{font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;font-weight:400;font-size:12.16px;letter-spacing:.28em;color:rgba(250,247,241,.5);margin:0 0 10px}
#footer .vgf ul{list-style:none;margin:0;padding:0}
#footer .vgf li{font-size:13.76px;letter-spacing:.06em;margin:0;padding:0;border:0;white-space:nowrap}
/* ↑ nowrap: 2026-09-22 PC 1280px で「プライバシーポリシー」の「ー」だけが次の行に落ちていた（テストサイトで実測） */
#footer .vgf li::before{content:none}
#footer .vgf-nav{display:grid;grid-template-columns:1fr;gap:32px}
/* SWELL のフッターメニュー（ul.l-footer__nav・コピーライトの上）は、上の MENU・ABOUT とリンクが重複するので出さない
   （2026-09-22 オーナー了承）。外観 → メニュー で「フッター」の位置からメニューを外しても同じ */
#footer .l-footer__nav{display:none}
#footer .vgf .calp{font-size:12.48px;color:rgba(250,247,241,.64);margin:14px 0 0;line-height:1.9}
#footer .l-footer__foot{background:#1C1A18;color:rgba(250,247,241,.64);border-top:1px solid rgba(250,247,241,.12)}
#footer .l-footer__foot a{color:inherit}
#footer .l-footer__foot .copyright{font-size:13px}  /* 2026-09-22 SWELL の既定 12px をスマホで読める大きさに */
/* 営業カレンダー＝プラグイン WP Simple Booking Calendar（クラス名 wpsbc-）。フッター 3 に置く（2026-09-22 オーナーが設置・HTML を共有）
   - 文字色の指定が無く、フッターの生成り（ほぼ白）を受け継いで、白地・灰地の上で文字が消えていた → 中だけ焦茶に戻す
   - <h2>vincisgrassi</h2> はプラグインのカレンダー名（data-show_title="1"）。見出しは CALENDARIO があるので消す
   - 各月に style="min-width:200px;max-width:380px" が直に書かれ、3列目（約460px）では2か月が横に並ばず縦に積まれていた
     → 月の並びを grid で決め直す（直書きの style に勝つため !important） */
#footer .wpsbc-container{color:#2B2724;font-size:13px;line-height:1.5;letter-spacing:0;text-align:left;max-width:380px;margin:0 auto}
#footer .wpsbc-container>h2,#footer .wpsbc-container>.wpsbc-name{display:none}
/* ↑ 2026-09-22: functions.php が h2 を <p class="wpsbc-name"> に替えたので h2 だけでは消えず、焦茶の「vincisgrassi」がフッターの地に沈んで出ていた（スマホで実測） */
#footer .wpsbc-calendars{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
#footer .wpsbc-container th{font-weight:500}  /* 2026-09-22 曜日の見出し。既定の 700 は読み込んでいない太さ＝擬似太字になる */
#footer .wpsbc-calendar{min-width:0 !important;max-width:none !important;width:auto !important;float:none !important;margin:0 !important}
/* PC 821〜1199px: 1段目＝店舗情報｜リンク、2段目＝カレンダーを全幅にして2か月を横に並べる
   PC 1200px〜: 3列。カレンダーの列を一番広くする（1か月 約235px） */
@media(min-width:821px){
  #footer .w-footer{grid-template-columns:1fr 1.4fr;gap:40px;max-width:min(1180px,calc(100% - 160px));padding:88px 20px 64px;text-align:left}
  /* ↑ max-width: PC は右端に縦書きの固定ボタン（幅60px）が出る。1280px では中身の右端が 1223px・ボタンの左端が 1205px で
     10月のカレンダーの端が下に入っていた（2026-09-22 実測）→ 左右に80pxずつ空けて、中身が必ずボタンの手前で終わるようにする（60px では接するだけで隙間が無かった） */
  #footer .w-footer__box:nth-child(3){grid-column:1/-1}
  #footer .vgf .crest{width:150px;margin-left:0}
  #footer .vgf-nav{grid-template-columns:1fr 1fr;gap:40px}
  #footer .wpsbc-container{max-width:780px;margin:0}
  #footer .wpsbc-calendars{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* 2026-09-23 「営業カレンダー」を押すと窓（.calpop・本文 #vg の中）に本体を移して開く。フッターと同じ直しを窓の中にも当てる。
   窓の幅（最大640px）に合わせ、2か月は入るときだけ横に並べる */
#vg .calpop .wpsbc-container{color:#2B2724;font-size:13px;line-height:1.5;letter-spacing:0;text-align:left;margin:0 auto}
#vg .calpop .wpsbc-container>h2,#vg .calpop .wpsbc-container>.wpsbc-name{display:none}
#vg .calpop .wpsbc-calendars{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
#vg .calpop .wpsbc-container th{font-weight:500}
#vg .calpop .wpsbc-calendar{min-width:0 !important;max-width:none !important;width:auto !important;float:none !important;margin:0 !important}
@media(min-width:1200px){
  #footer .w-footer{grid-template-columns:1fr auto 1.9fr}
  /* ↑ auto: メニューの列は項目の長さぴったり（項目は折り返さない）。残りを店舗情報とカレンダーで分ける */
  #footer .w-footer__box:nth-child(3){grid-column:auto}
}
/* ═════════ ここから site/assets/css/style.css を #vg の内側に閉じ込めたもの ═════════ */
/* ─────────────────────────────────────────────────────────────
   2026-09-08 夕 デザイン刷新 v3（ふふの器に戻す）
   v2 は左揃え・非対称に振りすぎて参考サイト（ふふ 河口湖）から離れ、
   PC で崩れた（100vw の bleed がスクロールバー分はみ出す／情報行が幅1000pxで壊れる）。
   v3 は方針書 §6 の型どおり「中央揃え・左右対称・写真→見出し→本文→細枠ボタンの反復」に戻し、
   AI臭の対策は器と矛盾しないものだけ残す:
     指定書体の読込／影・グラデーション・角丸・text-shadow の全廃／パレット5色＋補助2色＋白のみ／
     箱UIの廃止（罫線のみ）／実ロゴ／文字の階層／数字はライニング
   ───────────────────────────────────────────────────────────── */
#vg{
  --bg:#FAF7F1; --ink:#2B2724; --main:#6A300E; --accent:#5C6B4A;
  --cta:#A34A2E; --soft:#58524C; --line:#E0DAD0; --white:#FFFFFF;
  --serif:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  --sans:"Noto Sans JP","Hiragino Sans","Yu Gothic UI",Meiryo,sans-serif;
  --en:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --gut:20px;
}
/* 2026-09-22 スマホの読みやすさの最終調整（オーナー「本当に今のって読みやすいかな」）。スマホ幅で全13ページを実測し、
   読ませる日本語の注記・ラベルが 10〜12px 台だった所を 13px 前後以上に上げ、--soft を #6E6862 → #5F5953（地色との差 5.1 → 6.5）に濃くした。
   → 同日夜 #58524C（7.2）へ。補足を 14px にするのと合わせ、審査した3者がそろって「コースの説明の灰色が薄い」と挙げたため。
   飾りの欧文（.eyebrow など）は据え置き。価格の補足 .prices .sub は見出し用の .sub（中央・明朝・字間広め）を継承して崩れていたので打ち消した */
#vg,#vg *{box-sizing:border-box}
#vg{scroll-behavior:smooth}
/* 2026-09-15 iPhone の Safari で、ページの下（固定バーの下・引っぱったときの余白）が白く出る対策。
   参考サイト（いえかつ）は body の背景色を茶色にしていた。ここでは html＝画面の地の色を固定バーと同じ焦茶にし、
   本文の地色は body で塗る（html に色があると body の色は画面全体に広がらない） */
#vg{background:var(--ink)}
#vg{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:400;
     font-size:16px;line-height:1.9;letter-spacing:.04em;-webkit-text-size-adjust:100%;
     -webkit-font-smoothing:antialiased;font-variant-numeric:lining-nums;overflow-x:hidden}
#vg img{display:block;width:100%;height:auto}
#vg figure{margin:0}
#vg a{color:inherit}
/* 本文中の電話番号（2026-09-22 押せるようにした＝build-mockups.py の tel_links()）。色は周りの文字のまま、下線で押せることを示す。
   番号の途中で折り返さない */
#vg a.tl{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;white-space:nowrap}
#vg strong,#vg b,#vg dt,#vg th{font-weight:500}  /* 2026-09-22 dt・th を追加: ブラウザと SWELL の既定は 700 だが Noto Sans JP は 400/500 しか読み込まないので、700 は標準の文字を機械的に太らせた擬似太字になっていた（項目名がにじむ）。読み込み済みの 500 にそろえる */
#vg p{margin:0 0 1em}

/* ── カンプの注記（デザインの一部ではない） ── */
#vg .note{background:var(--ink);color:rgba(250,247,241,.78);font-size:11.52px;padding:8px var(--gut);letter-spacing:.06em;line-height:1.7}
#vg .note b{color:var(--bg);font-weight:400}
#vg .note code{font-size:.95em}
#vg .tmp{color:var(--soft);font-size:12.48px;line-height:1.8}
#vg .hold{border:1px dashed var(--cta);color:var(--cta);padding:12px 16px;font-size:13.12px;line-height:1.8;margin-top:18px;text-align:left}
#vg .hold.ok{border-color:var(--accent);color:var(--accent)}
#vg .embed{border:1px solid var(--line);background:rgba(0,0,0,.02);padding:44px 20px;margin-top:18px;font-size:14.4px;line-height:2;text-align:center}
#vg .form{max-width:620px;margin:28px auto 0;text-align:left}
#vg .form .fld{margin-bottom:22px}
#vg .form label{display:block;font-size:14.4px;margin-bottom:7px}
#vg .form .req,#vg .form .opt{font-size:11.84px;margin-left:9px;padding:1px 7px;vertical-align:2px}
#vg .form .req{background:var(--cta);color:#fff}
#vg .form .opt{border:1px solid var(--line);color:var(--muted)}
#vg .form input:not([type=submit]),#vg .form textarea{width:100%;border:1px solid var(--line);background:#fff;padding:11px 12px;font:inherit;font-size:15.2px}
#vg .form .soft{display:block;margin-top:5px;font-size:13.44px}
#vg .form .agree label{font-size:14.08px}
#vg .form .agree input{width:auto;margin-right:8px;vertical-align:-1px}
#vg .form .agree a{color:var(--main);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}  /* 2026-09-22 オーナー「リンクとわかるように」。a{color:inherit} と SWELL の下線なしで地の文と同じに見えていた */
#vg .vg-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}  /* 2026-09-22 迷惑メールの罠の欄（CF7 の vg-website）。人には見せず、機械だけが埋める。判定は functions.php */
#vg button.btn,#vg input.btn{border:0;font:inherit;cursor:pointer}  /* 2026-09-14 フォームの送信を <button> にしたので、ブラウザ既定の枠を消す。
   2026-09-22 CF7 は送信を <input type="submit" class="btn"> で出す＝上の .form input（白地）に負けて白地に白文字になっていた。入力欄の指定から submit を外した */
#vg .hold-inline{border:1px dashed var(--cta);color:var(--cta);padding:1px 8px;font-size:12.48px;display:inline-block;line-height:1.7;margin:2px 0}

/* ── ヘッダー ── */
#vg .hd{position:relative;z-index:31;display:flex;align-items:center;justify-content:space-between;
    height:60px;padding:0 var(--gut);max-width:1200px;margin:0 auto}
#vg .hd .brand{display:block;line-height:0}
#vg .hd .crest{width:auto;height:42px}
#vg .hd ul{display:none;list-style:none;margin:0;padding:0;gap:30px}
#vg .hd li{font-size:12.48px;letter-spacing:.16em}
#vg .hd li a{color:inherit;text-decoration:none}
#vg .hd .rsv{display:none;font-size:12.48px;letter-spacing:.22em;color:var(--main);text-decoration:none;border-bottom:1px solid var(--main);padding-bottom:3px}

/* スマホのメニュー（JSなし・チェックボックスで開閉） */
#vg .mn-t{position:absolute;opacity:0;pointer-events:none}
#vg .mn-btn{display:flex;width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer;position:relative;z-index:32;margin-right:-10px}
#vg .mn-btn span,#vg .mn-btn span::before,#vg .mn-btn span::after{content:"";position:absolute;width:22px;height:1px;background:var(--ink);transition:.2s}
#vg .mn-btn span::before{top:-7px}#vg .mn-btn span::after{top:7px}
#vg .mn-t:checked ~ .hd .mn-btn span{background:transparent}
#vg .mn-t:checked ~ .hd .brand{opacity:0}
#vg .mn-t:checked ~ .hd .mn-btn span::before{top:0;transform:rotate(45deg);background:var(--bg)}
#vg .mn-t:checked ~ .hd .mn-btn span::after{top:0;transform:rotate(-45deg);background:var(--bg)}
#vg .mn-panel{position:fixed;inset:0;z-index:30;background:var(--ink);display:flex;flex-direction:column;
  justify-content:center;padding:96px 28px 40px;opacity:0;pointer-events:none;transition:opacity .22s;overflow:auto}
#vg .mn-t:checked ~ .mn-panel{opacity:1;pointer-events:auto}
#vg .mn-panel a{color:var(--bg);text-decoration:none;font-family:var(--serif);font-weight:400;font-size:17.92px;
  letter-spacing:.14em;padding:15px 2px;border-bottom:1px solid rgba(250,247,241,.14);text-align:center}
#vg .mn-panel a:last-of-type{border-bottom:0}
#vg .mn-panel .rsvbig{background:var(--cta);text-align:center;margin-top:20px;border:0;
  font-family:var(--sans);font-size:15.2px;letter-spacing:.2em;padding:17px}

/* ── トップのファーストビュー ──
   2026-09-08 オーナー指示で作り替えた。写真は4枚を切り替え（参考=ふふ 河口湖）、
   キャッチは写真の左下に重ねる。
   ⚠️ これは 2026-09-07 の v3 で決めた「FVは写真に文字を重ねない」の変更。
   重ねる以上、文字が読めなくなる写真が必ず出るので、下から上への暗い覆い（scrim）を敷く。
   これは飾りのグラデーションではなく可読性のための機能なので、
   「影とグラデーションは全廃」の対象外とする。
   切り替えは CSS だけ（カンプは単一HTMLで自己完結させる約束なので JS を使わない）。 */
/* 2026-09-14 オーナー「スマホで上部の領域が広すぎる。予約ボタンまで見せたい」。
   実測（390×844）: ヘッダー60・予約ボタンの帯124・下の固定ボタン115。FVが743pxで予約ボタンが画面の外だった。
   → 画面の高さからその3つを引いた高さにする。文字の塊は322px＋上下28pxなので、380pxは下回らせない（375×667 でも予約ボタンが固定ボタンの上に出る） */
#vg .hero{position:relative;height:max(380px,calc(100svh - 300px));overflow:hidden;background:var(--ink)}
#vg .hero .slides{position:absolute;inset:0}
#vg .hero .slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  opacity:0;animation:heroFade 24s linear infinite}
/* 2026-09-14: 4枚用（1枚＝25%）の値のまま3枚に使っていて、24秒のうち約6秒は写真が1枚も出ていなかった
   （オーナーのスクリーンショットでFVが真っ暗だった原因）。3枚＝1枚33.3%。次の1枚が出はじめてから消す */
@keyframes heroFade{0%{opacity:0}3%{opacity:1}33.3%{opacity:1}37%{opacity:0}100%{opacity:0}}
/* 2026-09-14 HTMLサイト化: 1枚ずつの style 属性をやめてクラスにした（CSSを style.css 1本に集めるため）。
   ずらし幅は 24秒 ÷ 枚数（いまは3枚＝8秒）。枚数を変えたらここも変える */
#vg .hero .slides img:nth-child(2){animation-delay:8s}
#vg .hero .slides img:nth-child(3){animation-delay:16s}
#vg .hero .slides img.pos-top{object-position:50% 18%}  /* 外観: 看板が上にあるので上寄せ */
/* 2026-09-12 オーナー指示「（リード文を）トップ写真の中心においたほうがよくない？」。
   文字を左下から中央へ移し、リード文もここに置いた。
   文字量が増えたぶん覆いを強くする（中央がいちばん濃い＝文字のある場所を確実に沈める）。 */
/* 2026-09-12: 全面を一様に暗くすると、スマホでは写真が何か分からなくなった
   （文字量が増えたぶん覆いを強くしたため）。文字のある中央だけを沈め、
   四隅は写真が見える濃さに落とす。実測は scripts/check-fv-contrast.py */
#vg .hero::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 92% 40% at 50% 52%,
    rgba(24,21,19,.84) 0%, rgba(24,21,19,.80) 46%, rgba(24,21,19,.52) 74%,
    rgba(24,21,19,.26) 90%, rgba(24,21,19,.18) 100%)}
#vg .hero-txt{position:absolute;z-index:2;inset:0;display:flex;align-items:center;justify-content:center;
  padding:28px var(--gut)}
#vg .hero-txt .in{max-width:680px;margin:0 auto;text-align:center}
#vg .hero-txt .eyebrow{color:rgba(250,247,241,.94);text-align:center;margin:0 0 14px}
#vg .hero-catch{font-family:var(--serif);font-weight:500;font-size:24px;letter-spacing:.16em;line-height:1.9;
  margin:0 0 22px;color:var(--bg)}
#vg .hero-lead{font-family:var(--serif);font-weight:400;color:var(--bg);margin:0 0 14px;
  font-size:15.2px;line-height:2.1;letter-spacing:.08em}
#vg .hero-sub{color:rgba(250,247,241,.86);margin:0;font-size:13.12px;line-height:1.9;letter-spacing:.06em}
#vg br.sp{display:inline}
/* 改行の整え（2026-09-12 オーナー「改行がおかしい」）: 中央揃えの文は最終行が1〜2文字で孤立しないよう均等に折り返す。
   FVのリード文の <br> はPCの幅で決めた位置なので、スマホでは効かせない */
#vg .stitle,#vg .hero-catch,#vg .hero-lead,#vg .hero-sub{text-wrap:balance}
/* 本文の pretty は PC だけ（下の @media）。2026-09-15 オーナー「スマホで文章が全幅に出ていない」（iPhone の実機スクショ）。
   iPhone の Safari は pretty を段落全体の行の長さをそろえる処理として扱い、各行の右端を2〜4文字ぶん空けていた
   （Chrome は最終行だけを調整するので、ローカルの撮影では再現しない） */
#vg .nw,#vg a[href^="tel:"]{white-space:nowrap}  /* 料理名など、途中で折らない固有名詞 */
#vg .hero-lead br,#vg .hero-sub br{display:none}
@media(prefers-reduced-motion:reduce){
  #vg .hero .slides img{animation:none;opacity:0}
  #vg .hero .slides img:first-child{opacity:1}
}

/* ── FV直下の予約バー（2026-09-08 オーナー指示・参考=ふふ 河口湖の空室検索） ──
   実物は TableCheck の空席検索をここに埋め込む。カンプでは見た目だけを置く。 */
#vg .rsvbar{background:var(--white);border-bottom:1px solid var(--line)}
#vg .rsvbar .in{max-width:1080px;margin:0 auto;padding:26px var(--gut);text-align:center}
#vg .rsvbar .rsvbtn{font-size:16.32px;letter-spacing:.24em;padding:20px 24px;box-shadow:0 2px 0 rgba(0,0,0,.12)}
#vg .rsvbar .rsvbtn:hover{background:#8E3E25}
#vg .rsvnote{max-width:1080px;margin:0 auto;padding:0 var(--gut) 20px;font-size:13.44px;line-height:1.9;
  color:var(--soft);text-align:center}

/* 実務情報（営業時間・定休日・電話）。箱にせず罫線だけ */
/* 2026-09-14 オーナー「上の線と領域がおかしい」: 予約ボタンの帯の下線と、ここの上線のあいだに
   32〜48pxの空の帯ができていた。予約ボタンの帯の下線を1本だけ残し、すき間をなくす */
#vg .info{border-bottom:1px solid var(--line)}
#vg .info dl{margin:0;padding:8px var(--gut)}
#vg .info dl>div{display:grid;grid-template-columns:5.2em 1fr;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
#vg .info dl>div:last-child{border-bottom:0}
#vg .info dt{font-size:13.12px;letter-spacing:.14em;color:var(--soft);padding-top:.25em}
#vg .info dd{margin:0;font-size:14.72px;line-height:1.8}
#vg .info dd b{font-weight:500}
#vg .info .soft{display:block}
#vg .info .tel{font-family:var(--en);font-weight:400;font-size:20.8px;letter-spacing:.04em;color:var(--ink);text-decoration:none;line-height:1.3}
#vg .info .tmp{display:block}
/* 営業時間: スマホはランチ・ディナーを1行ずつ（折らない指定だと狭い列ではみ出した）、PCは「／」で横に並べて各々を折らない */
#vg .info .hr{display:block}
#vg .info .sep{display:none}

/* ── 下層ページの冒頭: 見出しを先に、写真はその下（全幅） ── */
#vg .ph{padding:40px var(--gut) 30px;text-align:center}
#vg .ph.nofv{padding-bottom:0}
#vg .ph.nofv+section{padding-top:36px}
#vg .ph h1{font-family:var(--serif);font-weight:500;font-size:26.4px;letter-spacing:.14em;line-height:1.6;margin:0}
#vg .ph-img{height:clamp(220px,40vh,400px);overflow:hidden;background:var(--line)}
#vg .ph-img img{width:100%;height:100%;object-fit:cover}
/* 人が写っている写真は上寄せ。写真は4:3で、帯は横長なので object-fit:cover が上下を削る。
   中央基準のままだと画面が横に広いほど削る量が増え、顔から上が消える
   （2026-09-08 夜⑦ オーナー指摘: 幅2000pxで /news/ のシェフの頭が切れていた） */
#vg .ph-img.up img{object-position:center 22%}
/* 2026-09-23 /lunch/ の看板写真は手前の皿が画面の下寄り。中央基準だと PC の横長の帯で皿の下半分が切れるので下寄せにする */
#vg .ph-img.low img{object-position:center 80%}
/* 2026-09-22: /lunch/ は「鷹匠 ランチ」の着地ページ。スマホでは写真を低くして、導入文の値段と予約ボタンを最初の画面に入れる（PC は下の @media で通常の高さ） */
#vg .ph-img.short{height:clamp(200px,27vh,300px)}
/* 2026-09-23 /osechi/: 切り抜きの商品写真（地色に重ねたもの）は横長の帯で上下を削ると重箱が欠けるので、全体を見せる */
#vg .ph-img.whole{height:auto;background:var(--bg);padding:0 var(--gut)}
#vg .ph-img.whole img{height:auto;max-width:720px;margin:0 auto;object-fit:contain}
/* 2026-09-23 オーナー判断（見本 results/fv-blur-samples-20260923.html の B 地色寄り・参考 月刊HUGE）:
   PC は写真を帯の幅いっぱいに引き伸ばさず（1200px 前後の写真が 1.6 倍以上に伸びてぼやけていた）、真ん中に元の大きさまでで全体を見せる。
   左右は同じ写真を大きくぼかし、地色を透かして埋める（ファイルは同じ1枚＝重さは増えない）。スマホは今までどおり帯いっぱい
   ※ .bg は alt を src より前に書く＝build-site.py が現行サイトの alt を入れる対象（alt="" が src の後ろ）から外すため */
#vg .ph-img .bg{display:none}
/* 同 昨年のおせちの内容: 上の段・下の段（スマホは縦に、PC は横に並べる） */
#vg .oseg{display:grid;grid-template-columns:1fr;gap:20px;max-width:960px;margin:0 auto 32px}
#vg .oseg figcaption{font-size:13.44px;color:var(--soft);text-align:center;margin:6px 0 0;letter-spacing:.08em}
@media(min-width:821px){#vg .oseg{grid-template-columns:1fr 1fr;gap:32px}}

/* ── セクションの骨格（方針書 §6 の型: 欧文小見出し→和文見出し→写真→見出し→本文→細枠ボタン） ── */
#vg section{padding:60px var(--gut)}
/* tight は「リード文（.intro）の直後」だけ上の余白を詰める。それ以外の節は全部同じ余白（2026-09-12 オーナー「マージンがずれている」） */
#vg section.intro+section.tight{padding-top:0}
/* .tight は「直前が同じ地色で、その下余白がそのまま効く」ときの指定。
   地色が変わる境目で 0 にすると、見出しが色の境界に張りつく。
   2026-09-08: トップの RISTORANTE 節が .alt（白）の直後で、これが起きていた。 */
#vg section.alt{background:var(--white)}
#vg .wrap{max-width:1080px;margin:0 auto}
#vg .sh{text-align:center;margin:0 0 30px}
#vg .eyebrow{font-family:var(--en);font-weight:400;font-size:12.48px;letter-spacing:.32em;color:var(--main);margin:0 0 12px;text-align:center;line-height:1.4}
#vg .stitle{font-family:var(--serif);font-weight:500;font-size:22.4px;letter-spacing:.14em;line-height:1.8;margin:0}
#vg .stitle .eyebrow{display:block;font-family:"Cormorant Garamond",var(--serif);font-size:13.12px}  /* 2026-09-22 トップの節見出し（案A）: 飾りの欧文＋日本語の節名を h2 に含める。見出しを読めば目次になるように */
#vg .lead{font-family:var(--serif);font-weight:400;font-size:18.56px;line-height:2.2;letter-spacing:.08em;margin:0 auto 20px;text-align:center;max-width:760px}
#vg .lead br{display:none}
#vg .q{font-family:var(--serif);font-weight:400;font-size:17.6px;line-height:2.1;letter-spacing:.08em;margin:0 0 16px}
#vg .body{font-size:15.04px;line-height:2.05;margin:0 auto 26px;max-width:640px}
#vg .body br{display:none}
#vg .body br+br{display:inline}
#vg .body.soft{font-size:13.76px;color:var(--soft)}
#vg .em{font-size:16.32px}
#vg .soft{color:var(--soft);font-size:.9em}
#vg .telno{font-family:var(--en);font-size:18.4px;letter-spacing:.04em;margin-left:18px}
/* ボタンの色分け（2026-09-12 オーナー「色分けが無いと分かりにくい」）:
   予約 = 焼きレンガの塗り（.btn）／ページ移動 = 罫線だけ（.ghost）／電話 = 文字。予約だけが塗りを持つ */
#vg .act{margin:0 0 8px;text-align:center}
#vg .act .ghost+.ghost,#vg .act .ghost+.btn,#vg .act .btn+.ghost{margin-top:10px}
#vg .act+.act{margin-top:12px}
#vg .act .tmp{text-align:left}
#vg .sub{font-family:var(--serif);font-weight:500;font-size:19.2px;letter-spacing:.12em;text-align:center;margin:36px 0 18px;line-height:1.8}
#vg .gap{height:48px}
#vg .intro{padding-bottom:36px}
/* 2026-09-22 オーナー「上の部分のマージン取りすぎ。バランスが」（マルケ・PC）: リード文の直後で地の色が変わる所（.alt が続く＝今はマルケだけ）は、
   上の節の余白（PC 120px）と .intro の下 36px の差が帯としてそのまま見えていた。地が切り替わる所だけ上下を同じ余白にする */
#vg .intro:has(+ .alt){padding-top:48px;padding-bottom:48px}

/* お知らせ（トップに最新1件だけ）。現行トップは3件を直書きしていて、更新が止まると
   それが最上段で見える。1件＋一覧送りにして、空いてもトップの印象が痛まないようにする。
   2026-09-08 夜⑦: 原稿 `/news/`「一覧の見せ方」で決めていたのにカンプに無かったので追加 */
#vg .awardband{background:var(--white);border-bottom:1px solid var(--line);padding:0}  /* section 共通の上下余白を打ち消す（.news1 と同じ） */
#vg .awardband .in{max-width:440px;margin:0 auto;padding:28px var(--gut)}
#vg .awardband .award{margin:0}
#vg .news1{background:var(--white);border-bottom:1px solid var(--line);padding:0}
#vg .news1.foot{border-top:1px solid var(--line)}
#vg .news1.foot .in{max-width:760px;padding:28px var(--gut)}
#vg .news1 .in{max-width:1080px;margin:0 auto;padding:15px var(--gut)}
#vg .news1 .lb{font-family:var(--en);font-size:11.52px;letter-spacing:.3em;color:var(--main);margin:0 0 8px}
#vg .news1 .it{margin:0 0 8px;font-size:14.4px;line-height:1.9}
#vg .news1 .dt{display:block;font-family:var(--en);font-size:13.12px;letter-spacing:.06em;color:var(--soft);margin:0 0 4px}
#vg .news1 .nhd{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
#vg .news1 .mo{margin:0;font-size:12.8px}
#vg .news1 .mo a{color:var(--main);text-decoration:none;letter-spacing:.12em}
#vg .news1 .it:last-child{margin-bottom:10px}
/* 受賞カード（現行トップの受賞バナーに相当）。銀は平坦な1色・罫線のみ */
/* 2026-09-14 オーナー「シルバーの受賞をもっとかっこよく。シルバーっぽくない」。
   ベージュの箱をやめ、磨いた銀板のような斜めの光沢＋内側の細い二重枠＋「SILVER」の文字自体に銀の階調を入れた */
#vg .award{position:relative;display:block;margin:14px 0 0;padding:22px 20px 20px;color:#2F3339;text-decoration:none;text-align:center;
  background:linear-gradient(125deg,#E9EBEE 0%,#C9CDD3 18%,#F7F8FA 38%,#D3D6DB 58%,#B7BBC2 78%,#E4E6E9 100%);
  border:1px solid #9FA4AB;box-shadow:inset 0 0 0 5px rgba(255,255,255,.55),inset 0 0 0 6px rgba(120,126,134,.35),0 6px 18px rgba(40,44,52,.12)}
#vg .award p{margin:0}
#vg .aw-eyebrow{font-family:var(--en);font-size:10.88px;letter-spacing:.34em;color:#5E636B}
#vg .aw-name{font-family:var(--en);font-size:14.4px;letter-spacing:.08em;margin:6px 0 0;line-height:1.5;color:#2F3339}
#vg .aw-rank{display:inline-flex;align-items:center;gap:14px;font-family:var(--en);font-weight:600;font-size:36.8px;letter-spacing:.3em;
  line-height:1.2;margin:10px 0 0;padding-left:.3em;color:#7D828A;
  background:linear-gradient(180deg,#30353C 0%,#6C717A 40%,#B9BDC3 50%,#5A5F67 60%,#2B3036 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
#vg .aw-rank::before,#vg .aw-rank::after{content:"";width:28px;height:1px;background:#5A5F67;-webkit-text-fill-color:initial}
#vg .aw-jp{font-size:13.12px;letter-spacing:.14em;color:#3E434A;margin-top:2px}
#vg .aw-link{display:inline-block;margin-top:12px;font-size:12.48px;letter-spacing:.12em;color:#2F3339;border-bottom:1px solid #2F3339}
#vg .award:hover{box-shadow:inset 0 0 0 5px rgba(255,255,255,.7),inset 0 0 0 6px rgba(120,126,134,.45),0 8px 22px rgba(40,44,52,.18)}

/* ごあいさつ（トップは2文だけ抜粋し、全文は /about/）。イントロと同じ節の中に、罫線で区切って置く */
#vg .greet{border-top:1px solid var(--line);max-width:760px;margin:44px auto 0;padding-top:40px}
#vg .greet-top{border-top:0;margin-top:0;padding-top:0}
/* トップのごあいさつ節に入れた店の情報。隣の2カラムと幅を揃える（2026-09-12） */
#vg .greet .shop{max-width:100%;margin-top:8px}
#vg .greet .act{margin-top:22px}

/* 細枠ボタン（方針書 §6）: 1px罫線・背景なし・テラコッタ文字。スマホは全幅で押しやすく */
#vg .ghost{display:block;width:100%;border:1px solid var(--main);color:var(--main);text-decoration:none;
  font-size:13.76px;letter-spacing:.18em;padding:15px 20px;text-align:center}
#vg .btn{display:block;background:var(--cta);color:#fff;padding:18px 24px;text-align:center;font-size:14.72px;
  letter-spacing:.24em;text-decoration:none}
#vg .cv{border-top:1px solid var(--line);padding-top:40px;margin:40px auto 0;max-width:680px;text-align:center}
#vg .cv .q{font-size:16.8px;margin-bottom:24px}
/* 2026-09-22 オーナー「ここらへん他にもないかチェックして削って」: ボタンに線が寄り添う所を全ページで走査して消した
   ①FV 直下の予約バーの下線 ②一覧（情報表・よくあるご質問）の締めの線のうち、すぐ後ろがボタンのもの。ボタンが続かない一覧の締めの線は残す */
#vg .rsvbar{border-bottom:0}
#vg .shop:has(+ .act) dl:last-child{border-bottom:0}
#vg .qa:has(+ .act) details:last-of-type{border-bottom:0}
#vg .cv{border-top:0}  /* 2026-09-22 オーナー「ディナーページのこの上の線の邪魔では」「ランチの上の線も」: ページ末尾の予約ブロックの上の線をやめた（余白だけで区切る） */
/* 2026-09-23 オーナー指摘「締めの上のマージンがありすぎる（ランチ・ディナー）」: 統一で締めを独立の節にしたので、
   本文の後ろで区切るための上の余白（PC 72px＋56px）が節の上の余白と重なっていた。節の先頭にあるときだけ 0 にする */
#vg .wrap>.cv:first-child{margin-top:0;padding-top:0}
#vg .tmp2{margin:14px 0 0;font-size:13.12px;color:var(--soft);text-align:center}

/* 写真: 大1枚＋小2枚の非対称グリッド（§6）。容器の中に収め、端まで伸ばさない */
#vg .grid{display:grid;grid-template-columns:1fr;gap:8px;margin:0 0 30px}
#vg .grid:has(+.gallery){margin-bottom:8px}
#vg .prices+.grid,#vg .body+.grid{margin-top:36px}
#vg .gallery+.body{margin-top:22px}
#vg .grid figure{overflow:hidden;background:var(--line)}
#vg .grid .big{aspect-ratio:4/3}
#vg .grid img{width:100%;height:100%;object-fit:cover}
#vg .grid .col{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#vg .grid .col figure{aspect-ratio:4/3}
#vg.top .grid .col{display:none}
#vg .one{margin:0 0 30px;overflow:hidden;background:var(--line);aspect-ratio:3/2}
#vg .one img{height:100%;object-fit:cover}
/* 人物の写真は上を基準に切る。2026-09-14「顔が写っていない」と指摘: トップのシェフ写真（原本4:3）を
   PCで16:9の枠に中央で切っていたため、頭から目元まで枠の外に出ていた。
   PCは .tall（4:3＝原本と同じ比率で切らない）、スマホの3:2は上寄せで頭を残す */
#vg .one.face img{object-position:50% 0}
#vg .split{display:grid;grid-template-columns:1fr;gap:22px;margin:0 0 36px}
#vg .split h3{font-family:var(--serif);font-weight:500;font-size:20px;letter-spacing:.1em;margin:0 0 14px;line-height:1.8}
#vg .split p{font-size:15.04px;line-height:2.05;margin:0 0 12px}
#vg .split figure{overflow:hidden;background:var(--line)}
/* 2026-09-23 トップのおせち: 切り抜きの重箱は枠の比率で切ると見切れるので、写真の形のまま全体を見せる */
#vg .split figure.whole{background:none}

/* 価格: 献立表（品名｜価格）。3枚のカードにはしない */
#vg .prices{margin:0 auto 30px;max-width:720px;border-top:1px solid var(--line)}
#vg .prices>div{display:grid;grid-template-columns:1fr auto;column-gap:16px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line)}
#vg .prices .star{grid-column:1/-1;justify-self:start;font-size:11.52px;letter-spacing:.22em;color:var(--main);
  border:1px solid var(--main);padding:1px 8px;margin:0 0 8px;line-height:1.7}
#vg .prices .star.ok{color:var(--accent);border-color:var(--accent)}
#vg .prices .nm{font-family:var(--serif);font-weight:400;font-size:16px;letter-spacing:.06em;line-height:1.6}
#vg .prices .pr{font-family:var(--en);font-weight:400;font-size:24px;color:var(--main);letter-spacing:.02em;line-height:1;white-space:nowrap}
#vg .prices .sub{grid-column:1/-1;font-family:var(--sans);font-weight:400;font-size:13.76px;letter-spacing:.04em;text-align:left;color:var(--soft);line-height:1.9;margin:6px 0 0}
#vg .prices .sub strong{color:var(--ink)}

/* 補足: 箱にせず、罫線と欧文の小見出しだけ */
#vg .rule{max-width:680px;margin:0 auto 28px;padding:24px 0 0;border-top:1px solid var(--line)}
#vg .rule.wide{max-width:none}
#vg .scrollx+.rule{border-top:0}  /* 2026-09-22 オーナー「上の線もいらない」: 表の最後の行の線と二重になっていた（ご予約について・ご予約の方法の上） */
#vg .rule h3{font-family:var(--serif);font-weight:400;font-size:16.32px;letter-spacing:.12em;color:var(--main);margin:0 0 14px;line-height:1.7}
#vg .rule p{font-size:15.04px;line-height:2.05;margin:0}
#vg .rule p+p{margin-top:10px}
#vg .rule .one{margin-top:24px}
#vg .rule .act{margin-top:20px}
#vg .rule ul{margin:0;padding-left:1.2em}
#vg .rule li{margin-bottom:10px;font-size:14.72px;line-height:2}
#vg .rule li:last-child{margin-bottom:0}

/* コース内容: 番号を欧文の数字で */
#vg .course{max-width:680px;margin:0 auto 40px}
#vg .course .chead{display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-top:1px solid var(--line);padding-top:16px}
#vg .course .cprice{font-family:var(--en);font-weight:400;font-size:24px;color:var(--main);margin:0;white-space:nowrap;line-height:1}
#vg .course h3{font-family:var(--serif);font-weight:400;font-size:17.92px;letter-spacing:.1em;margin:0 0 6px;line-height:1.7}
#vg .course .meta{font-size:13.76px;color:var(--soft);margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid var(--line);line-height:1.9}
#vg .course ol{list-style:none;margin:0;padding:0;counter-reset:d}
#vg .course li{counter-increment:d;position:relative;padding-left:2.2em;font-size:14.72px;line-height:1.9;margin-bottom:9px}
#vg .course li::before{content:counter(d,decimal-leading-zero);position:absolute;left:0;top:.1em;font-family:var(--en);color:var(--main);font-size:16px;letter-spacing:.04em}

/* 濃色反転 */
#vg .dark{background:var(--ink);color:var(--bg)}
#vg .dark .eyebrow{color:var(--bg);opacity:.72}
#vg .dark .stitle,#vg .dark .lead,#vg .dark .q,#vg .dark h3{color:var(--bg)}
#vg .dark .body,#vg .dark .split p{color:rgba(250,247,241,.84)}
#vg .dark .em{color:var(--bg)}
#vg .dark .tmp{color:rgba(250,247,241,.5)}
/* 2026-09-22: トップ末尾「お電話でも承ります」が var(--soft) のままで濃い地に 2.69:1 しかなかった（実測）。約9:1 に */
#vg .dark .tmp2{color:rgba(250,247,241,.78)}
#vg .dark .ghost{color:var(--bg);border-color:rgba(250,247,241,.45)}
#vg .dark .grid figure,#vg .dark .split figure,#vg .dark .one{background:rgba(250,247,241,.08)}
#vg .dark .voice blockquote{border-color:rgba(250,247,241,.18)}
#vg .dark .voice p{color:var(--bg)}
#vg .dark .voice .who{color:rgba(250,247,241,.6)}
#vg .dark .voice{text-align:center}  /* 2026-09-22 オーナー「中心に文章を持ってきた方が良くない?」: 暗い地の声（ご予約について）は1件だけで、真下の予約ボタンが中央なので声も中央にそろえる。一覧で並ぶお客様の声ページは左揃えのまま */
#vg .dark .voice blockquote{border-top:0;padding-top:0}  /* 同日オーナー「消す」: 中央にそろえた声の上の全幅の線をやめ、節の余白だけで区切る（線の下の 28px も不要になるので 0） */
#vg .dark .telno{color:var(--bg)}

/* お客様の声: 番号と罫線で */
#vg .voice{max-width:720px;margin:0 auto;counter-reset:v;text-align:left}
#vg .voice blockquote{margin:0;padding:28px 0;border-top:1px solid var(--line);counter-increment:v}
#vg .voice blockquote:last-of-type{border-bottom:1px solid var(--line)}
#vg .dark .voice blockquote:last-of-type{border-bottom:0}  /* 2026-09-22 オーナー「下の線いらない」: 暗い地（ご予約についての声）では、上の :last-of-type が .dark の色指定に勝って明るい線がボタンの真上に出ていた */
/* 2026-09-22 オーナー「01の番号とかもいらない。バランスが悪い」: お客様の声の通し番号をやめた（1件だけの所では意味が無く、暗い地では茶色が沈んでいた） */
#vg .voice p{margin:0 0 12px;font-size:15.04px;line-height:2.05}
#vg .voice p:last-of-type{margin-bottom:0}
#vg .voice .who{margin:14px 0 0;font-size:13.76px;color:var(--soft);letter-spacing:.08em}

/* よくある質問: 開閉式（SWELLのアコーディオンブロックに対応） */
#vg .qa{max-width:760px;margin:0 auto;text-align:left}
#vg .qa h2{font-family:var(--serif);font-weight:500;font-size:20px;letter-spacing:.14em;color:var(--main);margin:44px 0 12px;text-align:center;line-height:1.8}
#vg .qa h2:first-child{margin-top:0}
#vg .qa details{border-top:1px solid var(--line)}
#vg .qa details:last-of-type{border-bottom:1px solid var(--line)}
#vg .qa summary{list-style:none;cursor:pointer;position:relative;padding:17px 30px 17px 1.8em;
  font-family:var(--serif);font-weight:400;font-size:15.68px;letter-spacing:.06em;line-height:1.8}
#vg .qa summary::-webkit-details-marker{display:none}
#vg .qa summary::before{content:"Q";position:absolute;left:0;top:17px;font-family:var(--en);color:var(--main);font-size:18.4px;line-height:1.5}
#vg .qa summary::after{content:"";position:absolute;right:6px;top:24px;width:9px;height:9px;border-right:1px solid var(--main);border-bottom:1px solid var(--main);
  transform:rotate(45deg);transition:.2s}
#vg .qa details[open] summary::after{transform:rotate(-135deg);top:29px}
/* 質問一覧の直後のボタン（トップの4問＝2026-09-22）。.act の既定（PCで10px）だと最後の線に詰まって見える */
#vg .qa+.act{margin-top:32px}
#vg .qa .a{padding:0 0 22px 1.8em;font-size:14.72px;line-height:2.05}

/* 道順: 歩きながら片手で見る。1枚ずつ大きく、横に送る（JSなし） */
#vg .route{margin:0 calc(-1 * var(--gut)) 8px;padding:0 var(--gut) 14px;display:flex;gap:14px;overflow-x:auto;scroll-padding-left:var(--gut);
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
#vg .route::-webkit-scrollbar{height:4px}
#vg .route::-webkit-scrollbar-thumb{background:var(--line)}
#vg .route .card{flex:0 0 82%;scroll-snap-align:start;text-align:left}
#vg .route .card figure{overflow:hidden;background:var(--line);aspect-ratio:4/3;margin:0 0 12px}
#vg .route .card img{height:100%;object-fit:cover}
#vg .route .card .no{display:flex;align-items:baseline;gap:6px;margin-bottom:4px}
#vg .route .card .no b{font-family:var(--en);font-weight:400;font-size:24.8px;color:var(--main);line-height:1}
#vg .route .card .no span{font-family:var(--en);font-size:14.4px;color:var(--soft);letter-spacing:.06em}
#vg .route .card p{margin:0;font-size:15.2px;line-height:1.8}
#vg .routehead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 16px;flex-wrap:wrap}
#vg .routehead h3{font-family:var(--serif);font-weight:400;font-size:17.92px;letter-spacing:.08em;margin:0;line-height:1.7}
#vg .routehead .swipe{font-size:12.8px;color:var(--soft);letter-spacing:.08em;white-space:nowrap}
#vg .routehead .near{font-family:var(--sans);font-size:11.52px;letter-spacing:.18em;color:var(--main);border:1px solid var(--main);padding:1px 8px;margin-left:10px;vertical-align:middle}

/* 料理のご案内: 料理名（明朝）＋説明 */
#vg .dishes{max-width:720px;margin:0 auto;border-top:1px solid var(--line);text-align:left}
#vg .dishes>div{margin:0;padding:20px 0;border-bottom:1px solid var(--line)}
#vg .dishes h3{font-family:var(--serif);font-weight:400;font-size:16.8px;letter-spacing:.08em;margin:0 0 8px;line-height:1.7}
#vg .dishes p{margin:0;font-size:14.72px;line-height:2}
/* ───── 共通部品（2026-09-12 追加）─────
   LPの試作（skill-workshop/examples）から「型」だけを借りる。
   見た目は v3 の器のまま＝罫線のみ・影なし・角丸なし・パレット内の色だけ。      */

/* 流れ（ステップ）: 番号を縦線でつなぐ。予約・注文・コースの進み方に使う */
#vg .steps{max-width:700px;margin:0 auto;padding:0;text-align:left;counter-reset:st}
#vg .steps>li{list-style:none;position:relative;margin:0 0 0 13px;padding:0 0 30px 42px;border-left:1px solid var(--line)}
#vg .steps>li:last-child{border-left-color:transparent;padding-bottom:0}
#vg .steps>li::before{counter-increment:st;content:counter(st,decimal-leading-zero);
  position:absolute;left:-13px;top:-2px;width:26px;height:26px;line-height:26px;text-align:center;
  background:var(--bg);color:var(--main);font-family:var(--serif);font-size:12.16px;letter-spacing:.02em}
#vg .steps h3{font-family:var(--serif);font-weight:400;font-size:16.32px;letter-spacing:.08em;margin:0 0 7px;line-height:1.7}
#vg .steps p{margin:0;font-size:14.4px;line-height:2}
#vg .steps .when{display:block;font-size:13.12px;color:var(--soft);letter-spacing:.1em;margin:0 0 3px}
#vg .alt .steps>li::before{background:var(--white)}
#vg .dark .steps>li{border-left-color:rgba(250,247,241,.22)}
#vg .dark .steps>li::before{background:var(--ink);color:var(--bg)}

/* 数字で見る: 事実を短く並べる。飾りではなく確認のための区画 */
#vg .nums{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);max-width:900px;margin:0 auto}
#vg .nums>div{background:var(--bg);padding:22px 8px;text-align:center}
#vg .alt .nums>div{background:var(--white)}
#vg .nums b{display:block;font-family:var(--serif);font-weight:400;font-size:28px;color:var(--main);line-height:1.25;
  font-variant-numeric:lining-nums}
#vg .nums b i{font-style:normal;font-size:.6em;letter-spacing:.04em}
#vg .nums span{display:block;font-size:13.12px;color:var(--soft);letter-spacing:.1em;margin-top:7px;line-height:1.7}
#vg .nums+.body{margin-top:22px}

/* 写真を並べる: 眠っている写真を出す場所。説明を付けられる */
#vg .gal{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:1100px;margin:0 auto}
#vg .gal figure{margin:0}
#vg .gal .shot{aspect-ratio:1;overflow:hidden;background:var(--line);display:block}
#vg .gal img{width:100%;height:100%;object-fit:cover;display:block}
/* 2026-09-23 オーナー指摘: 写真の並びのすぐ下に注記やボタンが来ると、写真にくっついて見える（実測0px） */
#vg .gal+p{margin-top:18px}
#vg .gal+p.act{margin-top:32px}  /* 写真の下がボタンのときは、注記よりも離す */
#vg .gal figcaption{font-size:13.44px;line-height:1.8;color:var(--soft);margin:7px 0 0;letter-spacing:.04em}
#vg .gal.wide{grid-template-columns:1fr}
/* 2026-09-23 4枚の手順（ディナーのカッフェ）: スマホは2列×2段、PC は4列×1段（3列だと1枚余る） */
/* 2026-09-23 囲み（.rule）の中に置く写真は、囲みと同じ幅で1枚（既定は 1100px 中央寄せ＝本文より外に出て見えた） */
#vg .rule .gal{max-width:none;margin:0 0 4px}
#vg .gal.wide .shot{aspect-ratio:3/2}

/* やっていること／やらないこと: 対にして書く。境界を罫線1本で示す */
#vg .dodont{display:grid;gap:0;max-width:860px;margin:0 auto;border-top:1px solid var(--line)}
#vg .dodont>div{padding:22px 0;border-bottom:1px solid var(--line);text-align:left}
#vg .dodont h3{font-family:var(--serif);font-weight:400;font-size:15.04px;letter-spacing:.1em;margin:0 0 12px;color:var(--main)}
#vg .dodont h3.no{color:var(--soft)}
#vg .dodont ul{margin:0;padding:0;list-style:none}
#vg .dodont li{font-size:14.4px;line-height:1.95;padding:0 0 0 18px;position:relative}
#vg .dodont li::before{content:"";position:absolute;left:2px;top:.86em;width:7px;height:1px;background:var(--main)}
#vg .dodont h3.no ~ ul li::before{background:var(--soft)}

/* 掲載・受賞: 出典を1行ずつ。ロゴを持たないので文字で出す */
#vg .media{max-width:760px;margin:0 auto;border-top:1px solid var(--line);text-align:left}
#vg .media>div{padding:18px 0;border-bottom:1px solid var(--line)}
#vg .media dt{font-family:var(--serif);font-size:15.2px;letter-spacing:.08em;margin:0 0 5px;color:var(--main)}
#vg .media dd{margin:0;font-size:13.76px;line-height:1.9;color:var(--soft)}
#vg .media a{color:var(--main)}
/* 料理名と写真を1対1にする（2026-09-12）。現行サイトはスライドで1品1枚だったが、
   移し替えのときに写真だけ3枚のグリッドになり、どの写真がどの料理か分からなくなっていた */
#vg .dishes figure{margin:0 0 12px;aspect-ratio:4/3;overflow:hidden;background:var(--line)}
#vg .dishes figure img{width:100%;height:100%;object-fit:cover;display:block}
@media(min-width:768px){
  /* 共通部品のPC表示（2026-09-12） */
  #vg .steps>li{padding:0 0 36px 56px}
  #vg .nums{grid-template-columns:repeat(4,1fr)}
  #vg .nums>div{padding:30px 12px}
  #vg .nums b{font-size:33.6px}
  #vg .gal{grid-template-columns:repeat(3,1fr);gap:14px}
  #vg .gal+p{margin-top:26px}
  #vg .gal+p.act{margin-top:48px}
  #vg .gal.wide{grid-template-columns:repeat(2,1fr)}
  #vg .gal.four{grid-template-columns:repeat(4,1fr)}
  #vg .rule .gal.wide{grid-template-columns:1fr}
  #vg .dodont{grid-template-columns:1fr 1fr;gap:0 44px}
  #vg .dodont>div{padding:26px 0}
  #vg .dishes>div{display:grid;grid-template-columns:240px 1fr;gap:28px;align-items:start}
  #vg .dishes figure{margin:0}
}
#vg .stitle .kana{display:block;font-family:var(--sans);font-size:13.44px;letter-spacing:.2em;color:var(--soft);margin-top:8px}
#vg .shop dd .soft{display:block;margin-top:4px}
/* 店舗情報・条文・お知らせ: 罫線の表 */
#vg .shop{max-width:680px;margin:0 auto 30px;border-top:1px solid var(--line);text-align:left}
#vg .shop dl{display:grid;grid-template-columns:5.4em 1fr;gap:0 14px;margin:0;padding:13px 0;border-bottom:1px solid var(--line)}
#vg .shop dt{font-size:13.12px;letter-spacing:.12em;color:var(--soft);margin:0;padding-top:.3em}
#vg .shop dd{margin:0;font-size:14.72px;line-height:1.9}
#vg .terms{max-width:680px;margin:0 auto;text-align:left}
/* アクセスの地図（2026-09-22）。幅は店舗情報の表とそろえる。スマホでは地図の上をなぞると地図が動いてページが進まないので、
   画面を占めすぎない 4:3 に抑え、下に「Googleマップで開く」を置く */
#vg .map{max-width:680px;margin:0 auto 30px;aspect-ratio:4/3;border:1px solid var(--line);background:var(--white)}
#vg .map iframe{display:block;width:100%;height:100%;border:0}
#vg .terms h2{font-family:var(--serif);font-weight:400;font-size:16.8px;letter-spacing:.08em;margin:36px 0 12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
#vg .terms h2:first-child{margin-top:0}
#vg .terms p,#vg .terms li{font-size:14.72px;line-height:2.05}
#vg .terms ul{padding-left:1.4em}
#vg .newslist{max-width:760px;margin:0 auto;border-top:1px solid var(--line);text-align:left}
#vg .newslist .item{display:grid;grid-template-columns:1fr;gap:4px;padding:20px 0;border-bottom:1px solid var(--line)}
#vg .newslist .date{font-family:var(--en);font-size:16px;color:var(--main);letter-spacing:.08em;line-height:1.4}
#vg .newslist .cat{font-size:12.16px;letter-spacing:.16em;color:var(--soft)}
#vg .newslist .ttl{font-size:15.2px;line-height:1.85}
#vg .scrollx{overflow-x:auto;max-width:760px;margin:0 auto 30px}
#vg .tbl{width:100%;border-collapse:collapse;font-size:13.44px;border-top:1px solid var(--line)}
#vg .tbl th,#vg .tbl td{padding:12px 8px 12px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;line-height:1.8}
#vg .tbl th:first-child,#vg .tbl td:first-child{min-width:5.2em;width:38%}
/* .shop .soft の nowrap は PC だけ（下の @media）。2026-09-15 オーナー指摘: スマホでは補足文が折り返せず右で切れていた
   （390px幅で右端が425〜519px。overflow-x:hidden で隠れて読めない） */
#vg .tbl th{font-weight:400;font-size:13.12px;letter-spacing:.12em;color:var(--soft)}
#vg .tbl td b{font-weight:500}

/* ── フッター（中央揃え） ── */
#vg footer{background:var(--ink);color:rgba(250,247,241,.78);padding:56px var(--gut) calc(100px + env(safe-area-inset-bottom));font-size:13.44px;line-height:2;text-align:center}
#vg footer .in{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:32px}
#vg footer .crest{width:120px;margin:0 auto 18px}
#vg footer p{margin:0}
#vg footer .fh{font-family:var(--en);font-weight:400;font-size:12.16px;letter-spacing:.28em;color:rgba(250,247,241,.5);margin:0 0 10px}
#vg footer ul{list-style:none;margin:0;padding:0}
#vg footer li{font-size:13.76px;letter-spacing:.06em}
#vg footer li a{color:inherit;text-decoration:none}

/* 画面下の固定バー: 電話／シェフのこだわり／ご予約（現行サイトと同じ3つ）。焦茶と焼きレンガの2色だけ
   2026-09-15 オーナー指示で作り替え（参考=いえかつ https://izakasu.jp/lp/rent01d/ の固定メニュー）:
   - 高さ 114px → 52px。「高さがありすぎる」「英語はいらない」。
     114px の正体は英字の <span class="sub"> に見出し用の .sub{margin:36px 0 18px} が効いていたこと（クラス名の衝突）
   - 最初の画面では隠し、1画面ぶんスクロールしたら下からせり上げる（FVの予約ボタンと二重にしない。JS は FOOT）
   - iPhone のホームバーの分だけ下に余白（viewport-fit=cover のとき、ボタンの下にホームバーが重なる） */
#vg .fixcta{position:fixed;left:0;right:0;bottom:0;z-index:20;display:grid;grid-template-columns:52px .85fr 1fr 1.7fr;
  background:var(--ink);border-top:1px solid rgba(250,247,241,.12);padding-bottom:env(safe-area-inset-bottom);
  transform:translateY(100%);transition:transform .3s ease-out}
#vg .fixcta.on{transform:translateY(0)}
/* 2026-09-15 夜: 52px → 60px（オーナー「もう少し高さが欲しい」） */
#vg .fixcta a{min-height:60px;padding:0 4px;display:flex;align-items:center;justify-content:center;gap:6px;text-align:center;
  text-decoration:none;color:var(--bg);font-size:14.4px;letter-spacing:.14em;line-height:1.3;border-right:1px solid rgba(250,247,241,.12)}
/* 並びは こだわり｜電話｜ご予約。電話は親指の届きやすい中央に置き、受話器の印とパレットの補助色（オリーブ）で予約と見分ける
   （2026-09-15 夜 オーナー「電話を真ん中にして電話マーク・ボタンの色は分けたほうがいいかも」） */
#vg .fixcta .tel{background:var(--accent)}
#vg .fixcta .tel svg{width:16px;height:16px;flex:none}
#vg .fixcta .rsv{background:var(--cta);border-right:0;font-size:16px;letter-spacing:.2em}  /* 2026-09-22 オーナー「Dで」: 高さは1段のまま、ご予約を幅の約4割・一回り大きい文字に（2段案は画面の12%を覆い、上へ戻るとも重なった） */
/* 2026-09-22: 3つのボタンの色を、ホームバーの余白とその下まで伸ばす（box-shadow で真下に同じ色を60px足す）。
   オーナー「スマホもフロートメニューの下に黒い帯がでちゃっている」。帯の正体は、上の padding-bottom（ホームバー分・約34px）が
   ボタンではなく焦茶の地で塗られていたこと。iPhone によっては固定バーの下に数px〜十数px 本文が透けるので、それも同じ色で隠す */
#vg .fixcta a{box-shadow:0 60px 0 var(--ink)}
#vg .fixcta .tel{box-shadow:0 60px 0 var(--accent)}
#vg .fixcta .rsv{box-shadow:0 60px 0 var(--cta)}
/* 予約ボタンの光（参考サイトの .reflect をそのまま移植）: 白い細帯を45度に傾け、3秒ごとに一瞬で拡大して消す
   2026-09-15 夜 オーナー「他の予約ボタンも同じく光らせて」＝予約ページへの塗りボタン全部・PC右端の縦ボタン・スマホメニューの予約。
   お問い合わせの「送信する」（button.btn）は予約ではないので光らせない */
#vg .fixcta .rsv,#vg a.btn[href*="yoyaku"],#vg a.btn[href*="tablecheck"],#vg .sidecta .rsv,#vg .mn-panel .rsvbig{position:relative;overflow:hidden}
#vg .fixcta .rsv::after,#vg a.btn[href*="yoyaku"]::after,#vg a.btn[href*="tablecheck"]::after,#vg .sidecta .rsv::after,#vg .mn-panel .rsvbig::after{content:"";position:absolute;top:-180px;left:0;width:30px;height:100%;background:#fff;opacity:0;
  transform:rotate(45deg);animation:shine 3s ease-in-out infinite;pointer-events:none}
@keyframes shine{0%{opacity:0;transform:scale(0) rotate(45deg)}70%{opacity:.5;transform:scale(0) rotate(45deg)}
  71%{opacity:1;transform:scale(4) rotate(45deg)}100%{opacity:0;transform:scale(50) rotate(45deg)}}
@media(prefers-reduced-motion:reduce){#vg .fixcta{transition:none}
  #vg .fixcta .rsv::after,#vg a.btn[href*="yoyaku"]::after,#vg a.btn[href*="tablecheck"]::after,#vg .sidecta .rsv::after,#vg .mn-panel .rsvbig::after{animation:none}}
/* 中央寄せは位置で行う（子テーマの「#vg 直下は上下の余白0 !important」に当たり、margin:auto が効かないため） */
/* 2026-09-23 電話番号を押したときの確認（シェフレビュー会議「予約は WEB から。キャンセル料は TableCheck の予約でしか取れない。
   電話はどうしても聞きたいことがある人だけに」）。tel: のリンクは押してもすぐ発信せず、まずこの窓を出す */
#vg .telpop{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;max-height:calc(100% - 32px);overflow:auto;width:min(calc(100% - 32px),420px);max-width:none;padding:28px 24px 20px;border:0;background:var(--bg);color:var(--ink);text-align:center;line-height:1.75}
#vg .telpop::backdrop{background:rgba(28,26,24,.6)}
/* 2026-09-23 オーナー「お飲み物の一覧はポップアップ」「営業カレンダーとあるところはすべてリンク（ポップアップでも）」: 電話の窓と同じ作りの窓（.pop）。
   お飲み物の一覧（#drinkpop）と営業カレンダー（.calpop＝フッターのカレンダー本体を開いている間だけ移す） */
#vg .gr-widget{margin:0 auto 28px;max-width:1100px}
#vg .gr-ph{border:1px dashed var(--line);padding:40px 16px;text-align:center;color:var(--soft);font-size:13.76px;margin:0}
#vg .pop{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;max-height:calc(100% - 32px);overflow:auto;width:min(calc(100% - 32px),640px);max-width:none;padding:0 20px 20px;border:0;background:var(--bg);color:var(--ink);line-height:1.75}
#vg .pop::backdrop{background:rgba(28,26,24,.6)}
#vg .pop .tp-t{font-family:var(--serif);font-weight:500;font-size:17.6px;letter-spacing:.1em;margin:0;text-align:center}
/* 同日 オーナー指摘「飲み物を押すと先頭から始まらない」「閉じるがスクロールしないと見えない」「右上にバツ印も」:
   窓を開くとブラウザは最初に押せるもの（それまでは一番下の「閉じる」）へ焦点を合わせるので、下までずれていた。
   見出しの帯を窓の上端に固定し、右上に × を置く（最初に押せるもの＝× になり、先頭から始まる） */
#vg .pop .pop-h{position:sticky;top:0;z-index:1;background:var(--bg);margin:0 -20px 12px;padding:18px 56px 12px;border-bottom:1px solid var(--line)}
#vg .pop .pop-x{position:absolute;top:6px;right:6px;width:44px;height:44px;padding:0;border:0;background:none;font:inherit;font-size:26px;line-height:44px;color:var(--ink);cursor:pointer}
#vg .pop .shop{margin:0}
#vg .pop .tp-x{margin:18px auto 0;display:block;background:none;border:1px solid var(--line);padding:8px 28px;font:inherit;font-size:14px;color:var(--ink);cursor:pointer}
/* 文の中の「営業カレンダー」（押すと .calpop が開く）。見た目は文中のリンク（a.igl）と同じ */
#vg button.calk{display:inline;padding:0;border:0;background:none;font:inherit;letter-spacing:inherit;color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;cursor:pointer}
/* お飲み物の一覧のボタンは <button>（窓を開く）。見た目は細枠ボタン .ghost のまま */
#vg button.ghost{background:none;font-family:inherit;cursor:pointer}
#vg .telpop .tp-t{font-family:var(--serif);font-weight:500;font-size:17.6px;letter-spacing:.1em;margin:0 0 14px}
#vg .telpop p{margin:0 0 12px;font-size:15px;text-align:left}
/* PC の「段落の行の長さをそろえる」指定（text-wrap:balance）は、幅の狭いこの窓では行が早く折れる（2026-09-23 オーナー指摘）。窓の中だけ普通の折り返しに戻す */
#vg .telpop p,#vg .telpop .tp-sm{text-wrap:auto}
#vg .telpop .tp-kids{padding:12px 0 0;border-top:1px solid var(--line)}
#vg .telpop .tp-sm{display:block;font-size:14px;color:var(--soft)}
#vg .telpop .act{margin:18px 0 16px;text-align:center}
#vg .telpop .tp-call{text-align:center;margin:0}
#vg .telpop .tp-call a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;white-space:nowrap}
#vg .telpop .tp-note{text-align:center;font-size:14px;color:var(--soft)}
#vg .telpop .tp-x{margin:6px auto 0;display:block;background:none;border:1px solid var(--line);padding:8px 28px;font:inherit;font-size:14px;color:var(--ink);cursor:pointer}
/* PCは右端に縦書き（現行サイトと同じ置き方）。内容と重ならないよう、右に56pxの余白を常に空ける */
#vg .sidecta{display:none;position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:20;flex-direction:column}
#vg .sidecta a{writing-mode:vertical-rl;text-decoration:none;padding:26px 15px;letter-spacing:.22em;font-size:12.8px;
  background:var(--ink);color:var(--bg);border-bottom:1px solid rgba(250,247,241,.14)}
#vg .sidecta .rsv{background:var(--cta);border-bottom:0}
#vg .sidecta .tel{font-family:var(--en);letter-spacing:.12em;font-size:15.68px}
/* Instagram（2026-09-22）: 固定バーの左端とPCの縦ボタンの下に、アイコンだけの四角。文字は aria-label で読み上げる */
#vg .fixcta .igb{padding:0;letter-spacing:0}
#vg .igi{display:block;flex:none}
#vg .fixcta .igb .igi,#vg .sidecta .igb .igi{width:24px;height:24px}
#vg .sidecta .igb{writing-mode:horizontal-tb;display:flex;align-items:center;justify-content:center;padding:15px 0;border-bottom:0}
#vg a.igl{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
/* アラカルトのメニュー（2026-09-22 /alacarte/）: 料理名と値段を1行に。名前が長いときは名前だけ折り返す */
#vg .amenu{max-width:680px;margin:0 auto 28px;text-align:left}
/* 営業カレンダーへ移動するボタン（2026-09-22 オーナー「スマホだとスクロールして一番下までいかないとカレンダー見れない」）。
   href="#…" は WordPress で /wp/#… に書き換えられて壊れるので、上へ戻ると同じくボタン＋JS */
#vg .tocal{display:inline-block;margin:4px 0 0 12px;padding:0;border:0;background:none;font:inherit;font-size:13.76px;color:var(--cta);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;cursor:pointer;white-space:nowrap}
#vg .tocal::after{content:" ›"}
#vg .a .tocal,#vg .shop .tocal{display:inline-block;margin-left:0}
#vg .shop .tocal{display:block}
#vg .amenu h3{font-family:var(--serif);font-weight:500;font-size:16.8px;margin:0 0 6px}
#vg .amenu ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
#vg .amenu li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
#vg .amenu .p{white-space:nowrap;font-variant-numeric:lining-nums;color:var(--soft)}
#vg .amenu .n{word-break:keep-all;overflow-wrap:anywhere}
#vg .gal+.amenu{margin-top:40px}
/* 2026-09-23 次のアラカルトの日（/alacarte/・案D 淡い帯。見本 results/alacarte-nextdate-samples-20260923.html）。範囲内の日を全部・同じ大きさ。
   3日以上でスマホが折り返すので、区切りの「・」は前の日付の後ろに付ける（前に付けると2行目が「・」で始まる） */
#vg .nxal{max-width:520px;margin:0 auto 28px;background:#F1EADF;padding:18px 16px 16px;text-align:center}
#vg .nxal[hidden]{display:none}
#vg .nxal .lb{display:inline-block;font-size:12.48px;letter-spacing:.16em;color:#fff;background:var(--accent);padding:2px 12px;margin:0 0 10px;line-height:1.7}
#vg .nxal .ds{margin:0;font-family:var(--serif);font-size:25.6px;line-height:1.5;color:var(--ink)}
#vg .nxal .ds span{white-space:nowrap}
#vg .nxal .ds>span:not(:last-child)::after{content:"・";margin:0 .1em}
#vg .nxal .wd{font-size:.5em;letter-spacing:.1em;margin-left:.15em}
#vg .nxal .sub{margin:8px 0 0}
#vg .nxal .tocal{margin-left:0}
#vg .igrow{margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--line)}
#vg .igrow a{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;text-decoration:none;color:var(--ink)}
#vg .igrow .igi{width:28px;height:28px}
#vg .igrow .t{flex:1 1 0;font-size:14.4px;line-height:1.7}
/* スマホではアカウント名を本文の下の行へ（横に並べると本文が3行に細く折れた）。PC は横並び（下の @media） */
#vg .igrow .h{flex-basis:100%;padding-left:38px;font-family:var(--en);letter-spacing:.06em;white-space:nowrap;color:var(--cta)}
#vg footer .igf{margin-top:14px}
#vg footer .igf a{display:inline-flex;align-items:center;gap:8px;color:inherit;text-decoration:none;letter-spacing:.04em}
#vg footer .igf .igi{width:18px;height:18px}

/* 上へ戻る。スマホは画面下のバーの上、PCは右下。どちらも固定導線と重ならない位置。
   bottom = バーの高さ 60px ＋ 16px ＋ iPhone のホームバー。バーの中身を変えたら測り直すこと
   （2026-09-15 までバーは 114px あり、ここは 130px だった） */
/* 2026-09-22: <a href="#top"> をやめて <button> にした。WordPress 側で href="#vg" が "/wp/#vg"（WordPress の設置フォルダ）に
   書き換えられ、押すとエラーになったため。リンクでなければ書き換えられない。button の既定の見た目は下の先頭4つで消す */
#vg .totop{padding:0;cursor:pointer;-webkit-appearance:none;appearance:none;position:fixed;right:16px;bottom:calc(76px + env(safe-area-inset-bottom));z-index:21;width:44px;height:44px;
  border:1px solid rgba(43,39,36,.22);border-radius:50%;background:rgba(250,247,241,.94);
  display:grid;place-items:center;text-decoration:none;
  opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
/* 2026-09-14: ページの一番上ではトップの予約ボタンに重なっていた。1画面ぶんスクロールしてから出す（FOOT の小さなJS） */
#vg .totop.on{opacity:1;visibility:visible}
#vg .totop::before{content:"";width:8px;height:8px;margin-top:3px;
  border-left:1px solid var(--ink);border-top:1px solid var(--ink);transform:rotate(45deg)}

/* フッターの営業カレンダー。実物は WordPress のプラグインが出す（ここは置き場所と見え方の確認用） */
#vg footer .calm{font-family:var(--en);font-size:13.76px;letter-spacing:.1em;margin:0 0 10px;color:rgba(250,247,241,.6)}
#vg footer .calgrid{display:grid;grid-template-columns:repeat(7,1fr);max-width:296px;margin:0 auto;
  font-size:12.16px;line-height:2.05;text-align:center}
#vg footer .calgrid .wd{font-size:10.56px;letter-spacing:.04em;color:rgba(250,247,241,.42);
  border-bottom:1px solid rgba(250,247,241,.14);padding-bottom:5px;margin-bottom:5px}
#vg footer .calgrid .off{color:rgba(250,247,241,.26)}
#vg footer .calp{font-size:12.48px;color:rgba(250,247,241,.64);margin:14px 0 0;line-height:1.9}

/* ═════════ PC ═════════ */
/* 2026-09-22 マーカー（オーナー承認）: 予約・来店の判断を左右する条件だけに引く（1節1か所・1ページ3か所まで・計20か所）。
   一覧と理由＝results/copy-review-20260922.html §1。太字とは重ねない（重ねた所は太字を外してマーカーにした） */
#vg .mk{background:linear-gradient(transparent 58%,#F2DFB0 58%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
#vg .dark .mk{background:linear-gradient(transparent 62%,rgba(242,223,176,.28) 62%)}
/* 2026-09-22 見出しの明朝を 300 → 500（オーナー「見出しは太くしよう」）。スマホの小さい画面で細字 300 は線が細すぎた。
   リード文など他の明朝 300 は 400 に上げ、読み込む明朝を「300・400」→「400・500」に入れ替えた＝読み込む太さの数は増やしていない。
   300/400/500 を 390px で撮り比べて 500 を選んだ */
/* ═════ スマホの本文（2026-09-22 最終調整。オーナー「既存と同じにする必要はない。データを集めて最適に」） ═════
   根拠: アクセスの 85%（GA4）・検索クリックの 88%（GSC）がスマホ、74% が iPhone、画面幅は 390/393/402 が中心・375 も多い。
   デジタル庁デザインシステム＝本文 16px 以上・行間 1.5〜1.75・14px 未満は原則不可／JLReq＝本文はベタ組が原則／
   小林ほか 2016＝スクロールで読む画面は 1行 20〜29字。3候補（現状 15px・2.05／16px・1.75／17px・1.75・余白16px）を
   目線の違う3者（60代の常連・初来店の比較検討者・ブランドの編集者）に伏せ字で比べさせ、2者が 16px・1.75 を1位にした
   （17px は余白を 16px に詰めないと 375px 幅で 1行 20字を切り、その詰めた余白が「窮屈」と言われた）。
   PC（821px〜）は据え置き。値の比較＝ results/mobile-typography-20260922.html */
@media(max-width:820px){
  #vg .body,#vg .split p,#vg .rule p,#vg .voice p,#vg .terms p,#vg .terms li,#vg .route .card p{font-size:16px;line-height:1.75;letter-spacing:.02em}
  #vg .info dd,#vg .shop dd,#vg .course li,#vg .rule li,#vg .qa .a,#vg .dishes p,#vg .dodont li,#vg .news1 .it,#vg .newslist .ttl,#vg .tbl td{font-size:15px;line-height:1.7;letter-spacing:.02em}
  /* 補足・注記は 14px（デジタル庁の下限）。灰色は --soft で濃くしてある */
  #vg .body.soft,#vg .soft,#vg .prices .sub,#vg .course .meta,#vg .gal figcaption,#vg .voice .who,#vg .form .soft,#vg .rsvnote,#vg .nums span,#vg .steps .when,#vg .info dt,#vg .shop dt,#vg .tbl th,#vg .media dd,#vg .hero-sub,#vg .tmp2{font-size:14px}
  /* 2026-09-22 スマホの改行（オーナー「スマホの改行が変」・実機スクショ）: PC の幅で入れた文の区切りの <br> がスマホでは
     「ありま／ません。⏎」のように短い切れ端を残していた → 文の区切りの改行はスマホでは流す（見出し行・一覧の区切りの改行は残す） */
  #vg .split p br,#vg .q br,#vg .em br,#vg br.pc{display:none}
  /* 項目名の列が狭く「ランチの営／業」「お支払い方／法」と1文字だけ落ちていた */
  #vg .shop dl{grid-template-columns:7.6em 1fr}  /* 8文字の項目名（イタリアでの修行・キャンセル・返品）が1行に収まる幅 */
  #vg .shop dt{letter-spacing:.04em}
  /* ランチとディナーの比較表は縦に積む（3列だと1セルが4〜5行に割れていた）。列名は data-label から出す */
  #vg .stack tr:first-child{display:none}
  #vg .stack tr{display:block;padding:12px 0;border-bottom:1px solid var(--line)}
  #vg .stack td{display:block;width:auto;min-width:0;border:0;padding:2px 0}
  #vg .stack td:first-child{width:auto;min-width:0;padding-bottom:6px}
  #vg .stack td[data-label]{position:relative;padding-left:5em}
  #vg .stack td b{white-space:nowrap}
  /* 項目名・表の1列目・コースの中身は、<wbr> と「・」「／」の後ろ以外で折らない（「お支払い方／法」「スペシャルコー／ス」「ドル／チェ」を防ぐ） */
  #vg .shop dt,#vg .tbl td:first-child,#vg .prices .sub,#vg .course .meta{word-break:keep-all;overflow-wrap:anywhere}
  #vg .stack td[data-label]::before{content:attr(data-label);position:absolute;left:0;top:2px;font-size:14px;color:var(--soft);letter-spacing:.04em}
}
@media(min-width:821px){
  #vg{--gut:64px}
  #vg .hd{height:84px;padding:0 40px}
  #vg .hd ul{display:flex}
  #vg .hd .rsv{display:inline-block}
  #vg .mn-btn,#vg .mn-panel{display:none}
  #vg .hero{height:clamp(620px,90vh,980px)}
  #vg .hero-txt{padding:96px var(--gut) 56px}
  #vg .hero-txt .in{max-width:760px}
  #vg .hero-lead{font-size:16.8px;line-height:2.2}
  #vg .hero-sub{font-size:14.08px}
  #vg .hd .crest{height:54px}
  #vg .hero-catch{font-size:33.6px;letter-spacing:.24em;line-height:1.9}
  #vg .hero-lead br,#vg .hero-sub br{display:inline}
  #vg .rsvbar .rsvbtn{min-width:420px;padding:22px 72px}
  #vg .rsvnote{text-align:left;padding-bottom:22px}
  #vg br.sp{display:none}
  #vg .awardband .in{padding:40px var(--gut)}
  #vg .news1.foot .in{padding:36px 24px}
  #vg .news1 .it{margin:0 0 6px}
  #vg .news1 .dt{display:inline;margin:0 16px 0 0}
  #vg .igrow a{flex-wrap:nowrap}
  #vg .igrow .h{flex-basis:auto;padding-left:0}
  /* 3つの幅を揃える（flex:1 だと営業時間の長い文が列を押し広げ、区切り線の位置が偏っていた） */
  #vg .info dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:1080px;margin:0 auto;padding:0}
  #vg .info dl>div{display:block;text-align:center;padding:26px 24px;border-bottom:0;border-right:1px solid var(--line)}
  #vg .info dl>div:last-child{border-right:0}
  #vg .info dt{padding:0 0 8px;font-family:var(--en);font-size:11.84px;letter-spacing:.28em;color:var(--main)}
  #vg .info dd{font-size:15.2px;line-height:1.9}
  #vg .info .tel{font-size:23.2px}
  #vg .info .soft{display:block;font-size:12.8px}
  #vg .info .tmp{display:block}
  #vg .info .hr{display:inline;white-space:nowrap}
  #vg .info .sep{display:inline}
  #vg .ph{padding:80px var(--gut) 52px}
  #vg .ph h1{font-size:35.2px;letter-spacing:.2em}
  #vg .ph-img,#vg .ph-img.short{height:clamp(380px,54vh,580px)}
  #vg .ph-img:not(.whole){position:relative;background:var(--bg)}
  #vg .ph-img .bg{display:block;position:absolute;inset:-40px;width:calc(100% + 80px);height:calc(100% + 80px);object-fit:cover;filter:blur(28px) saturate(1.1);opacity:.35}
  #vg .ph-img:not(.whole) .fg{position:relative;z-index:1;width:auto;max-width:100%;height:100%;margin:0 auto;object-fit:contain}
  #vg section{padding:120px var(--gut)}
  #vg .alt+section.tight,#vg .dark+section.tight{padding-top:120px}
  /* 2026-09-23 オーナー指摘「マージン空きすぎ」: 背景の色が変わらないまま節が続くと、上下の余白（120+120px）が
     ひと続きの空白に見える（ランチの「ランチでも、看板料理を」の手前で実測270px）。同じ背景が続くときだけ詰める。
     .tight は intro の直後に 0 を当てている既存の指定があるので対象外にする */
  #vg section:not(.alt):not(.dark)+section:not(.alt):not(.dark):not(.tight){padding-top:72px}
  #vg .sh{margin-bottom:48px}
  #vg .eyebrow{font-size:12.8px;margin-bottom:16px}
  #vg .stitle{font-size:29.6px;letter-spacing:.18em;line-height:1.8}
  #vg .lead{font-size:22.4px;line-height:2.3;letter-spacing:.1em}
  #vg .lead br{display:inline}
  #vg .body br{display:inline}
  #vg .body{max-width:680px;text-align:center}
  #vg .rule .body,#vg .dark .split .body{text-align:left}
  #vg .q{font-size:18.56px}
  #vg .act{margin-top:10px}
  #vg .ghost{display:inline-block;width:auto;padding:15px 52px}
  #vg .btn{display:inline-block;padding:18px 72px;min-width:320px}
  #vg .ghost{min-width:320px}   /* 縦に並ぶボタンの幅を揃える */
  /* 2026-09-15 横並びのボタンは上下中央で揃える。光らせるための overflow:hidden を付けた inline-block は
     基準線が箱の底に移り、予約ボタンだけ上にずれた */
  #vg .ghost,#vg .btn{vertical-align:middle}
  #vg .grid:has(+.gallery){margin-bottom:16px}
  #vg .q{max-width:760px;margin-left:auto;margin-right:auto;text-align:center}
  #vg .rule .q{text-align:left}
  #vg .body+.act,#vg .q+.act,#vg .nxal+.act{margin-top:28px}
  #vg .scrollx{max-width:760px;margin-left:auto;margin-right:auto}
  #vg .qa+.body,#vg .voice+.body{margin-top:36px}
  #vg .act .ghost+.ghost,#vg .act .ghost+.btn,#vg .act .btn+.ghost{margin-top:0;margin-left:14px}
  #vg .cv{padding-top:56px;margin-top:72px}
  #vg .grid{grid-template-columns:2fr 1fr;gap:16px;margin:0 0 52px}
  #vg .grid .col{display:grid;grid-template-columns:1fr;grid-template-rows:1fr 1fr;gap:16px;min-height:0}
  #vg .grid .col figure{aspect-ratio:4/3;min-height:0}
  #vg .grid .big{aspect-ratio:auto;height:100%}
  #vg.top .grid .col{display:grid}
  /* 大写真は PC で 16/9 にする（幅1080 → 高さ約608px）。2026-09-08 修正。
     ここを max-height で抑えてはいけない:
       ・画像側に max-height → 枠は 3/2 の高さ720のままで、写真の下に枠の地色が100pxの帯で出る
       ・枠側に max-height → Chrome は比率を保つために幅を930pxへ縮め、写真だけ左に寄る
     高さを縛るのではなく比率を変えれば、幅1080のまま高さだけ下がる。 */
  #vg .one{margin:0 0 48px;aspect-ratio:16/9}
  /* 層の重なりを見せる写真は 16/9 だと上下が切れて「8層」が読めない（2026-09-12） */
  #vg .one.tall{aspect-ratio:4/3;max-width:760px;margin-left:auto;margin-right:auto}
  #vg .split{grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin:0 0 56px}
  #vg section:nth-of-type(even) .split figure{order:2}
  #vg section .greet-top .split figure{order:0}  /* ごあいさつは現行と同じく写真が左 */
  /* ごあいさつはPCで他の節と同じ1080px幅に広げ、写真を列いっぱいに（2026-09-12 オーナー「小さすぎる」） */
  #vg .greet-top{max-width:1080px}
  #vg .greet-top .split{grid-template-columns:1.15fr 1fr;gap:64px;align-items:center}
  #vg .greet-top .split figure{aspect-ratio:4/3;width:100%}
  #vg .greet-top .split p{font-size:16px}
  #vg .split figure{aspect-ratio:4/3}
  #vg .split img{height:100%;object-fit:cover;object-position:50% 35%}
  #vg .split figure.whole{aspect-ratio:auto}
  #vg .split figure.whole img{height:auto;object-fit:contain}
  #vg .split h3{font-size:22.4px}
  #vg .prices>div{padding:20px 0}
  #vg .prices .pr{font-size:27.2px}
  #vg .tbl{font-size:14.4px}
  #vg .tbl th,#vg .tbl td{padding:14px 12px 14px 0}
  #vg .tbl th:first-child,#vg .tbl td:first-child{white-space:nowrap}
  #vg .route{margin:0 0 8px;padding:0 0 16px;gap:24px}
  #vg .route .card{flex:0 0 340px}
  #vg .routehead{margin-bottom:20px}
  #vg .shop dl{grid-template-columns:9em 1fr;padding:16px 0}
  #vg .shop dd .soft{display:inline;margin-left:10px}
  #vg .shop .soft{white-space:nowrap}
  /* 2026-09-22 オーナー「PCに関しては改行を整えてほしい。全ページ」: PC では段落の末尾だけが次の行に落ちていた（「付きます。」「けます。」が中央にぽつんと残る・13ページで37件）。
     pretty は欧文の単語向けで、和文では5文字の取り残しを防げない。行の長さをそろえる balance と、文節で折る auto-phrase に替えた（検査 37件→2件・check-linebreaks.py --pc）。
     balance を上の pretty の行に書くのは、後から書いた p 等の指定より .lead 等の方が優先されるため。スマホは対象外（iPhone Safari は auto-phrase 非対応・スマホの改行は別に整えてある） */
  /* 2026-09-23 オーナー指摘「PCの改行が変」: 本文に balance を当てると、行の長さをそろえようとして
     行末が最大264px（約15文字）空く段落が出ていた（ランチの看板料理の節で実測）。
     14ページ187段落を実測して比べた結果（1440px・行末が120px以上余る段落／最後の行が極端に短い段落）:
       balance 140/30 ・ pretty 91/33 ・ 指定なし 82/43
     → 本文は pretty（最後の行の取り残しだけ直す）に替え、balance は短く中央に置く見出し・リードだけに残す。
     文節で折る word-break:auto-phrase は据え置き（外すと最後の行が短い段落が33→52に増える） */
  #vg .lead,#vg .q{text-wrap:balance}
  #vg .body,#vg .rule p,#vg .course li,#vg .split p{text-wrap:pretty}
  #vg h1,#vg h2,#vg h3,#vg .sub{text-wrap:balance;word-break:auto-phrase}
  #vg p,#vg li,#vg dd,#vg dt,#vg summary,#vg figcaption,#vg td,#vg th,#vg .a,#vg blockquote{text-wrap:pretty;word-break:auto-phrase}
  #vg .a .soft{display:block;text-wrap:balance}  /* 答えの末尾の注記（※）は、答え全体が6行を超えると balance が効かず「あります。」が残った。塊にして注記だけでそろえる */
  #vg .intro:has(+ .alt){padding-top:80px;padding-bottom:80px}
  #vg .newslist .item{grid-template-columns:120px 110px 1fr;gap:20px;align-items:baseline;padding:24px 0}
  #vg footer{padding:88px var(--gut) 80px}
  #vg footer .in{grid-template-columns:1.2fr .8fr .8fr 1.5fr;gap:40px;text-align:left;max-width:1180px}
  #vg footer .crest{width:150px;margin-left:0}
  #vg footer .calgrid{margin:0}
  /* 2026-09-23 オーナー指摘「PCのボタンずれ」: 写真と本文が横に並ぶ節のボタンは、列の中央ではなく本文の左端にそろえる。
     本文の最終行は列の右端まで届かないので、中央ぞろえだと本文より右にずれて見えていた（1440/1920で実測） */
  #vg .split .act{text-align:left}
  /* 同日 オーナー指摘「アドリア海と山にはさまれた…が中心に来ていない」: 同じ理由で、引用の一文の下に本文の段落が続く列では一文も左端に。
     一文だけが写真の横にある列（お客様の声・こだわりの「パンも、パスタも…」）は中央のまま（本文が無いのでずれて見えない） */
  #vg .split div:has(> p:not([class])) > .q{text-align:left}
  #vg .totop{right:24px;bottom:28px}
  #vg .fixcta{display:none}
  #vg .sidecta{display:flex}
}

/* 幅の広い画面（フルHD以上）では、下層FVの帯の高さも幅に連れて伸ばす。
   帯の高さを固定したままだと、画面が横に広いほど object-fit:cover が上下を削り、
   人が写っている写真は顔から上が消える（2026-09-08 夜⑦ 幅2000pxで実測） */
@media(min-width:1400px){
  #vg .ph-img,#vg .ph-img.short{height:clamp(580px,34vw,760px)}
}