/* ══════════════════════════════════════════════════════════════
   商品ページ共通 CSS（9枚: product / geisha-* / sushi-* / gion / fushimi / tailor-made）
   2026-09-06 に各ページの <style> 2本（サイト共通部＋商品ページ部）をここへ切り出した。
   直すのはこのファイル。ページ側に CSS を書き戻さない（9枚のズレの再発防止）。
   ページ固有の CSS（例: geisha-shared-group のカレンダー）はそのページの <style> に残す。
   ══════════════════════════════════════════════════════════════ */

:root{
  --sumi:#000000;          /* ブランド紺（ロゴから抽出） */
  --sumi-deep:#000000;     /* スクロール後の背景 */
  --shoji:#FFFFFF;         /* 暗い地の上の文字。白のみ */
  --kanzashi:#FFFFFF;      /* 使用しない（黒白のみ） */
  --ink:#111111;--ink-2:#4A4A4A;--ink-3:#6E6E6E;--rule:rgba(0,0,0,.12);
  --field:#8C8C8C;         /* 入力欄の枠。白地に対して3.36:1（WCAG 1.4.11は3:1以上） */
  --field-h:#4A4A4A;       /* ホバー時 */
  --display:'Hina Mincho','Yu Mincho','Hiragino Mincho ProN',serif;
  --body:Lato,-apple-system,BlinkMacSystemFont,sans-serif;
  /* 文字：画面幅で連続変化（360px→1440px） */
  --fs-nav:clamp(0.7812rem, 0.75rem + 0.1389vw, 0.875rem);   /* 12.5 → 14.0px  ナビ・タブ */
  --fs-dd:clamp(0.8438rem, 0.8021rem + 0.1852vw, 0.9688rem);   /* 13.5 → 15.5px  本文・商品名 */
  --fs-cta:clamp(0.7188rem, 0.6875rem + 0.1389vw, 0.8125rem);   /* 11.5 → 13.0px  CONTACT */
  --fs-ddl:clamp(0.75rem, 0.7188rem + 0.1389vw, 0.8438rem);   /* 12.0 → 13.5px  補助文 */
  --fs-util:clamp(0.625rem, 0.6042rem + 0.0926vw, 0.6875rem);   /* 10.0 → 11.0px  添えるラベル（トップ・会社のページと同じ値。以前は 11→12px になっていた。阪田さん 2026-10-03「1 A」） */
  --fs-panel:clamp(0.9375rem, 0.8958rem + 0.1852vw, 1.0625rem);   /* 15.0 → 17.0px  モバイル項目 */
  --fs-panelh:clamp(0.625rem, 0.6042rem + 0.0926vw, 0.6875rem);   /* 10.0 → 11.0px  モバイル見出し（トップ・会社のページと同じ値に。使うのはスマホのメニューの段の見出しだけ。2026-10-03） */
  --h-util:34px;           /* 上部ユーティリティバー */
  --h-main:74px;           /* メインヘッダー */
  --h-main-top:92px;       /* 最上部（写真の上）でのメインヘッダー */
  --ease:cubic-bezier(.4,0,.2,1);
  /* ── 内容幅（★数値はここ1か所。2026-09-07 阪田さん決定「流動」）──
     画面が広くなるほど余白も一緒に広がる。1240px 固定だと 1920px の画面で
     余白だけが伸びて間延びし、1280px の画面では逆に窮屈だったため。
     960px（＝1333px 以下の画面）→ 72vw →1200px（＝1667px 以上の画面）で頭打ち。
     960px 未満の画面では .wrap が画面いっぱいになるので、スマホ・タブレットは従来どおり */
  --wrap-max:clamp(960px, 72vw, 1200px);
  /* 内容線までの左右の余白（.wrap の padding）。画面幅で 20px → 48px */
  --wrap-pad:clamp(1.25rem,.7rem + 2.4vw,3rem);
  /* 画面端から内容線までの距離。全幅で抜く横スクロール（.opts / .rel / .ab__who）が
     左右とも内容線で始まり内容線で終わるように使う。
     % を使うと margin と scroll-padding で基準の箱が変わって値がズレるため、絶対長で揃える */
  --wrap-edge:max(var(--wrap-pad), calc((100vw - var(--wrap-max)) / 2 + var(--wrap-pad)));
}
*,*::before,*::after{box-sizing:border-box}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);font-weight:300;color:var(--ink);background:#fff}
img{display:block;max-width:100%;height:auto}
a{text-decoration:none;color:inherit}
:focus-visible{outline:2px solid var(--shoji);outline-offset:3px}
.wrap{max-width:var(--wrap-max);margin:0 auto;padding-inline:var(--wrap-pad)}

/* ── フォントの割り当て（ここで一元管理する） ──────────────
   明朝(Hina Mincho) … 構造を示すラベル：CONTACT／見出し／一覧リンク
   Lato 300         … 中身：ナビ項目・商品名・補助テキスト        */
.hd,.panel{font-family:var(--body);font-weight:300}
/* ヘッダー内は全て Lato 300。明朝は本文の見出し(h1/h2)にのみ使う */
.hd, .hd *, .panel, .panel *{font-family:var(--body);font-weight:300}

/* ══════════════════════════════════════════════
   ヘッダー
   ══════════════════════════════════════════════ */
/* ナビとドロップダウンの商品名は明朝（＝見出し）。ラベル類はLato */
.hd{position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background-color .35s var(--ease),box-shadow .35s var(--ease)}
/* 写真の上に乗る最上部：背景は透明。読めるようにベールだけ敷く */
.hd::before{content:"";position:absolute;inset:0;height:190px;pointer-events:none;
  /* 黒を重ねても、下の映像が暖色だと透けて茶色く見える。
     そこで帯の裏の彩度を落とすが、backdrop-filter は要素の箱の全域に均一にかかるため、
     グラデーションだけで薄めると 190px の位置で色が戻り、境目が線として出てしまう。
     ベタ塗り＋マスクに置き換えて、暗さと脱色を同じカーブで一緒に消す */
  background:rgba(0,0,0,.66);
  -webkit-backdrop-filter:saturate(0);backdrop-filter:saturate(0);
  --falloff:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.45) 55%,rgba(0,0,0,0) 100%);
  -webkit-mask-image:var(--falloff);mask-image:var(--falloff);
  opacity:1;transition:opacity .35s var(--ease)}
/* スクロール後：紺のベタ塗りに切り替わる */
.hd.is-stuck{background:transparent;box-shadow:none}
.hd.is-stuck::before{opacity:1;height:150px}

/* ── 上段：ユーティリティ（スクロールで消える） ── */
.util{position:relative;z-index:2;height:var(--h-util);overflow:hidden;
  transition:height .35s var(--ease),opacity .25s var(--ease)}
.hd.is-stuck .util{height:0;opacity:0}
.util__in{display:flex;align-items:center;justify-content:flex-end;gap:1.1rem;height:var(--h-util)}
.util a{font-size:var(--fs-util);font-weight:300;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.72);transition:color .2s}
.util a:hover{color:var(--shoji)}
.util .sep{width:1px;height:11px;background:rgba(255,255,255,.28)}
.util svg{width:15px;height:15px;fill:currentColor;display:block}

/* ── 下段：メイン ── */
.main{position:relative;z-index:2;height:var(--h-main-top);
  display:flex;align-items:center;gap:2rem;transition:height .35s var(--ease)}
.hd.is-stuck .main{height:var(--h-main)}
.brand{flex:none;display:block}
.brand img{width:clamp(132px,11.5vw,178px);max-height:calc(var(--h-main-top) - 26px);
  object-fit:contain;object-position:left center;transition:width .35s var(--ease)}
.hd.is-stuck .brand img{width:clamp(118px,9.5vw,148px);max-height:calc(var(--h-main) - 22px)}

.nav{margin-left:auto;display:flex;align-items:center;gap:clamp(1rem,2.2vw,2.1rem)}
.nav__i{position:relative}
.nav__l{display:flex;background:none;border:0;cursor:pointer;align-items:center;gap:.4rem;padding:.5rem 0;
  font-size:var(--fs-nav);letter-spacing:.1em;text-transform:none;
  color:rgba(255,255,255,.92);transition:color .2s;white-space:nowrap}
.nav__i:hover .nav__l,.nav__i.open .nav__l,.nav__l:focus-visible{color:var(--shoji)}
/* 金のヘアラインが左から伸びる */
.nav__l::after{content:"";position:absolute;left:0;bottom:.15rem;height:.5px;width:0;
  background:var(--shoji);transition:width .3s var(--ease)}
.nav__i:hover .nav__l::after,.nav__i.open .nav__l::after{width:100%}
.nav__c{width:5px;height:5px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg) translateY(-2px);opacity:.6;transition:transform .25s var(--ease)}
.nav__i.open .nav__c{transform:rotate(-135deg) translateY(-3px)}

/* ── ドロップダウン ── */
.dd{position:absolute;top:calc(100% + .5rem);left:50%;transform:translateX(-50%);
  min-width:226px;
  visibility:hidden;transition:visibility 0s .2s}
.nav__i.open .dd{visibility:visible;transition-delay:0s}


/* 暖簾：中央の切れ目から左右に割れて中が見える */
.dd__in{padding:.35rem 0;background:rgba(0,0,0,var(--dd-a,.45));
  backdrop-filter:blur(var(--dd-b,24px));-webkit-backdrop-filter:blur(var(--dd-b,24px));
  border:1px solid rgba(255,255,255,.14);border-top:1px solid rgba(255,255,255,.4);
  box-shadow:0 18px 40px rgba(0,0,0,.32);
  padding:.35rem 0;
  opacity:0;transform:translateY(-6px);
  transition:opacity .18s var(--ease),transform .18s var(--ease)}
.nav__i.open .dd__in{opacity:1;transform:none}
.dd a{display:block;padding:.5rem 1.15rem;transition:background-color .18s}
/* 見出し・一覧リンクは明朝、商品名は Lato 300 */
.dd a:hover{background:rgba(255,255,255,.07)}
.dd a{font-size:var(--fs-dd);color:var(--shoji);line-height:1.5;
  letter-spacing:.05em;white-space:nowrap;text-shadow:0 1px 4px rgba(0,0,0,.85),0 0 12px rgba(0,0,0,.5)}

/* ── Contactボタン ── */
.cta{flex:none;display:inline-flex;align-items:center;justify-content:center;
  height:40px;padding:0 1.15rem;border:1px solid rgba(255,255,255,.55);
  font-size:var(--fs-cta);letter-spacing:.12em;color:var(--shoji);
  transition:background-color .2s,border-color .2s,color .2s}
.cta:hover{background:var(--shoji);border-color:var(--shoji);color:#000}

/* ── モバイル ── */
.burger{display:none;flex:none;margin-left:auto;width:44px;height:44px;
  background:none;border:0;cursor:pointer;padding:0;position:relative}
.burger span{position:absolute;left:11px;width:22px;height:1.5px;background:var(--shoji);
  transition:transform .3s var(--ease),opacity .2s}
.burger span:nth-child(1){top:16px}
.burger span:nth-child(2){top:21.5px}
.burger span:nth-child(3){top:27px}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

.panel{position:fixed;inset:0;z-index:99;background:rgba(0,0,0,.88);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  padding:calc(var(--h-main) + 2rem) clamp(1.25rem,6vw,2rem) 2rem;
  overflow-y:auto;visibility:hidden;opacity:0;
  transition:opacity .24s var(--ease),visibility 0s .24s}
.panel.open{visibility:visible;opacity:1;transition-delay:0s,0s}
.panel__g{border-bottom:1px solid rgba(255,255,255,.12);padding:.85rem 0}
.panel__h{margin:0 0 .55rem;font-size:var(--fs-panelh);font-weight:300;letter-spacing:.08em;
  color:rgba(255,255,255,.6);margin:0 0 .8rem}
.panel__g a{display:block;padding:.42rem 0;font-size:var(--fs-panel);color:var(--shoji)}
.panel__g a.soon{color:rgba(255,255,255,.42)}
.panel__f{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;padding-top:1.4rem}
.panel__f a{font-size:var(--fs-util);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.panel .cta{width:100%;height:52px;margin-top:1.3rem}
/* スマホのメニューの項目は指で押しやすい高さ（36px）に。トップと同じ（2026-10-03） */
@media (max-width:768px){.panel__g a{display:flex;align-items:center;min-height:36px}.panel__f a{display:inline-flex;align-items:center;min-height:36px}}

@media (max-width:980px){
  :root{--h-main-top:76px;--h-main:64px}
  .nav,.util{display:none}
  .burger{display:block}
  .hd.is-stuck .main{height:var(--h-main)}
}
@media (min-width:981px){.panel{display:none}}

/* ══════════════════════════════════════════════
   以下はヘッダー確認用のダミー本文
   ══════════════════════════════════════════════ */

/* ── 信頼バー ──
   左：3社合算の平均と星／中：件数（1文で読める）／右：公式バッジ＋順位
   順位はTripAdvisor単独の数字なので、ロゴの真下に置いて出典を自明にする。
   数値の更新は RATINGS と TA_RANK の2箇所だけ。平均・合計・星は自動計算。 */
.trust{display:flex;align-items:center;gap:clamp(.7rem,1.8vw,1.3rem);
  /* 商品メニューとの境目。間隔を広く取り、線もはっきりさせて別ブロックに見せる */
  margin-top:clamp(1.6rem,4.5vh,2.8rem);
  padding-top:clamp(1.1rem,2.6vh,1.5rem);
  border-top:1px solid rgba(255,255,255,.26)}
.trust__head{flex:none;display:flex;flex-direction:column;gap:.22rem;align-items:flex-start}
.trust__score{font-family:var(--display);color:var(--shoji);
  font-size:clamp(1.35rem,1.1rem + 1.1vw,1.9rem);line-height:1;
  text-shadow:0 1px 4px rgba(0,0,0,.5)}
.stars{position:relative;display:block;width:calc(var(--sz) * 5.7);height:var(--sz);
  --sz:clamp(9px,.55rem + .35vw,12px)}
.stars__bg,.stars__fg{position:absolute;inset:0;background-repeat:repeat-x;
  background-size:calc(var(--sz) * 1.14) var(--sz)}
.stars__bg{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='rgba(255,255,255,0.28)' d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z'/%3E%3C/svg%3E")}
.stars__fg{width:var(--fill,100%);overflow:hidden;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23EDE7DA' d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z'/%3E%3C/svg%3E");
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.trust__body{min-width:0;font-size:var(--fs-ddl);line-height:1.6;letter-spacing:.03em;
  color:rgba(255,255,255,.68);text-shadow:0 1px 3px rgba(0,0,0,.5)}
.trust__body b{font-weight:300;color:var(--shoji)}
.trust__body a{color:rgba(255,255,255,.85);text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.28);
  transition:text-decoration-color .2s var(--ease)}
.trust__body a:hover{text-decoration-color:var(--shoji)}
.trust__marks{margin-left:auto;flex:none;display:flex;align-items:center;
  gap:clamp(.8rem,1.8vw,1.2rem)}
.trust__ta{display:flex;align-items:center}
.trust__ta a{line-height:0}
.trust__ta img{width:clamp(76px,7.5vw,104px);height:auto;color:var(--shoji);
  opacity:.9;transition:opacity .2s var(--ease)}
.trust__ta a:hover img{opacity:1}
.trust__rank{display:block;margin-top:.15rem;font-size:var(--fs-util);letter-spacing:.05em;
  color:rgba(255,255,255,.58);text-shadow:0 1px 3px rgba(0,0,0,.5)}
.trust__rank b{font-weight:300;color:rgba(255,255,255,.85)}
.trust__rank i{font-style:normal;color:rgba(255,255,255,.4)}
.trust__gyg{flex:none;line-height:0}
.trust__gyg img{width:clamp(30px,3.2vw,38px);height:auto;border-radius:2px;
  opacity:.85;transition:opacity .2s var(--ease)}
.trust__gyg:hover img{opacity:1}

/* レビューが横に流れる帯。星は上の4.96と重複するので置かない。
   端は左右へフェードさせ、切れ目を感じさせない。 */
.ticker{position:relative;margin-top:clamp(.85rem,2.2vh,1.15rem);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.ticker__track{display:flex;width:max-content;gap:clamp(1.6rem,4vw,3rem);
  animation:tick var(--dur,60s) linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tk{display:flex;align-items:baseline;gap:.5rem;white-space:nowrap;
  font-size:var(--fs-ddl);letter-spacing:.02em;color:rgba(255,255,255,.66);
  text-shadow:0 1px 3px rgba(0,0,0,.5)}
.tk em{font-style:normal;color:rgba(255,255,255,.92)}
.tk i{font-style:normal;font-size:var(--fs-util);color:rgba(255,255,255,.38)}
/* 動きを減らす設定なら、流さずに手で横スクロールできる形にする */
@media (prefers-reduced-motion:reduce){
  .ticker{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .ticker__track{animation:none}
}

@media(max-width:720px){
  .trust{flex-wrap:wrap;gap:.5rem .8rem}
  .trust__body{flex:1 1 100%;order:3}
  .trust__marks{margin-left:auto}
  .trust__ta{align-items:flex-end}
}

/* ══════════════════════════════════════════════
   ヒーロー：タブ切替
   ══════════════════════════════════════════════ */
.hero{
  /* ヒーロー本文だけ --fs-dd より 0.3px 大きくする。
     映像の上に乗るため、紙面と同じ大きさでは細く見えるため。 */
  --fs-hero-p:clamp(0.8438rem, 0.8125rem + 0.1389vw, 0.9375rem);   /* 13.5 → 15.0px  ヒーロー本文 */
  position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:flex-end;background:#000000;overflow:hidden}
.hero__bg{position:absolute;inset:0;background:#000000;
  /* 網目(z-index:3)を背景の中だけに閉じ込める。これが無いと本文より前に出る */
  z-index:0;isolation:isolate}
.lay{position:absolute;inset:0;opacity:0;transition:opacity .7s var(--ease)}
.lay.is-on{opacity:1}
.lay video,.lay img{width:100%;height:100%;object-fit:cover;display:block}

/* ══ 網目 ══
   低解像度の粗さを散らす。暗幕グラデーション(.hero__bg::after)より上に置く。
   dark=黒い網／light=白い網。暗い映像には light のほうが効く。 */
.mesh{position:absolute;inset:0;pointer-events:none;z-index:3;
  background-image:
    repeating-linear-gradient(0deg,  var(--c) 0 1px, transparent 1px var(--pitch)),
    repeating-linear-gradient(90deg, var(--c) 0 1px, transparent 1px var(--pitch));
  background-size:var(--pitch) var(--pitch)}
.mesh[data-fx=dot]{
  background-image:radial-gradient(var(--c) 40%, transparent 41%);
  background-size:var(--pitch) var(--pitch)}
.mesh[data-fx=scan]{
  background-image:repeating-linear-gradient(0deg, var(--c) 0 1px, transparent 1px var(--pitch));
  background-size:auto var(--pitch)}
.mesh[data-fx=none]{display:none}


/* 動きを減らす設定の人には静止画（poster）だけを見せる */
@media (prefers-reduced-motion:reduce){.lay video{display:none}
  .lay{background-size:cover;background-position:center}}
.hero__bg::after{content:"";position:absolute;inset:0;z-index:4;
  /* ★網目(z-index:3)より上に置く★
     網の上に薄い暗幕をかけることで、網は透けてかすかに見えつつ、
     文字のすぐ後ろの網目模様が和らいで読みやすくなる。 */
  --veil:1;
  background:linear-gradient(to top,
    rgba(0,0,0,calc(.90 * var(--veil))) 0%,
    rgba(0,0,0,calc(.74 * var(--veil))) 22%,
    rgba(0,0,0,calc(.54 * var(--veil))) 42%,
    rgba(0,0,0,calc(.20 * var(--veil))) 66%,
    rgba(0,0,0,calc(.40 * var(--veil))) 100%)}
.hero__in{position:relative;z-index:1;width:100%;
  /* 上：固定ヘッダーの高さを必ず確保する（これが無いとタブがヘッダーに貼り付く）
     下：最後の項目と画面下端の間にゆとりを作る */
  padding-block:calc(var(--h-main-top) + clamp(2rem,7vh,4.5rem))
                clamp(2.75rem,9vh,5.5rem)}

/* ── タブ ── */
.tabs{display:flex;gap:clamp(1.1rem,2.6vw,2.4rem);
  margin:0 0 clamp(1.4rem,3.4vh,2.2rem);
  border-bottom:1px solid rgba(255,255,255,.18);padding-bottom:.75rem;
  /* 折り返すと下線が行間に取り残されるため、狭い画面では横スクロールで1行に保つ */
  flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-ms-overflow-style:none;
  scroll-snap-type:x proximity}
.tabs::-webkit-scrollbar{display:none}
.tab{scroll-snap-align:start}
.tab{position:relative;background:none;border:0;padding:.2rem 0;cursor:pointer;
  text-shadow:0 1px 3px rgba(0,0,0,.5);
  font-family:var(--body);font-weight:300;font-size:var(--fs-nav);
  letter-spacing:.1em;color:rgba(255,255,255,.55);white-space:nowrap;
  transition:color .22s var(--ease)}
.tab:hover{color:rgba(255,255,255,.85)}
.tab.is-on{color:var(--shoji)}
.tab::after{content:"";position:absolute;left:0;right:0;bottom:-.3rem;
  height:1px;background:var(--shoji);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .28s var(--ease)}
.tab.is-on::after{transform:scaleX(1)}

/* ── 商品メニュー ── */
.menu{display:grid;max-width:none;
  /* デスクトップは2列。縦に伸びるのを抑え、その分を上下の余白に回す。
     項目が奇数でも最後が1つ残るだけで崩れない。 */
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(1.5rem,4vw,3.5rem);
  border-top:1px solid rgba(255,255,255,.16);
  transition:opacity .3s var(--ease)}
.menu.fade{opacity:0}
.mi{display:flex;align-items:center;gap:1rem;padding:.85rem .2rem;
  border-bottom:1px solid rgba(255,255,255,.16);
  color:var(--shoji);transition:padding-left .2s var(--ease),background-color .2s var(--ease)}
.mi:hover{background:rgba(0,0,0,.28);padding-left:.7rem}
.mi__n{flex:1;min-width:0;font-size:var(--fs-dd);letter-spacing:.03em;
  text-shadow:0 1px 3px rgba(0,0,0,.5)}
.mi__a{flex:none;font-size:var(--fs-dd);line-height:1;color:rgba(255,255,255,.5);
  transition:transform .2s var(--ease),color .2s}
.mi:hover .mi__a{color:var(--shoji);transform:translateX(4px)}
@media(max-width:620px){
  /* 横スクロールだと3つ目が画面外で切れて見えるため、折り返しに変更。
     下線は各タブの直下(-.3rem)に固定してあるので、2行になっても破綻しない。 */
  .tabs{flex-wrap:wrap;overflow:visible;gap:.65rem 1.1rem}
  .mi{flex-wrap:wrap;gap:.2rem .8rem}
  .mi__n{flex:1 0 100%}
  .mi__a{margin-left:auto}
}
.__unused{display:none}
.__x{padding-block:clamp(2rem,6vh,4rem) clamp(1.5rem,4vh,2.5rem)}
.hero__lead{max-width:none;margin:0 0 clamp(1.25rem,3vh,2rem);
  transition:opacity .3s var(--ease)}
/* タイトルとサブは表示要素なので幅を絞らない。本文だけ読みやすい行長にする */
.hero__lead h1{max-width:18ch}
.hero__lead p:not(.hero__sub){max-width:52ch;font-size:var(--fs-hero-p);
  text-shadow:0 1px 3px rgba(0,0,0,.55)}
.hero__lead.fade{opacity:0}
/* 本文（.hero__lead p）より後に、より高い詳細度で指定すること */
.hero__lead .hero__sub{font-family:var(--display);color:rgba(255,255,255,.88);
  font-size:clamp(1.125rem,.9rem + 1.05vw,1.75rem);line-height:1.3;margin:.05em 0 .8rem;
  max-width:none}
/* nowrap は使わない：翻訳で文が長くなったとき画面外へはみ出すため。
   コンテナを広く取ってあるので、現在の文は自然に1行で収まる。
   長い言語では2行に折り返すだけで、レイアウトは壊れない。 */
.hero__lead h1{font-family:var(--display);font-weight:400;color:var(--shoji);
  font-size:clamp(1.5rem,1.05rem + 1.9vw,2.6rem);line-height:1.18;margin:0}
.hero__lead p{font-size:var(--fs-dd);line-height:1.75;color:rgba(255,255,255,.72);margin:0}

/* 展開パネル */
.row{display:flex;align-items:center;gap:1rem;padding:.72rem 0;
  border-bottom:1px solid rgba(255,255,255,.1);color:var(--shoji);
  transition:padding-left .2s var(--ease)}
.row:last-child{border-bottom:0}
.row:hover{padding-left:.4rem}
.row__n{font-size:var(--fs-dd);flex:1;min-width:0}
.row__p{font-size:var(--fs-dd);color:rgba(255,255,255,.8);white-space:nowrap}
.row__p em{font-style:normal;color:rgba(255,255,255,.62);font-size:var(--fs-ddl)}
.row__b{flex:none;display:inline-flex;align-items:center;gap:.4rem;
  font-size:var(--fs-ddl);letter-spacing:.1em;color:rgba(255,255,255,.7);white-space:nowrap;
  transition:color .2s}
.row:hover .row__b{color:var(--shoji)}
.row__b span{transition:transform .2s var(--ease)}
.row:hover .row__b span{transform:translateX(3px)}
@media(max-width:720px){
  .row{flex-wrap:wrap;gap:.25rem 1rem}
  .row__n{flex:1 0 100%}
  .row__b{margin-left:auto}
}

/* ══════════════════════════════════════════════
   会社概要
   ヒーロー（暗い映像）に対して紙の明るさで受ける＝メリハリ。
   同じ網目・同じ枠付きリスト・同じ書体で繋ぐ＝統一感。
   ══════════════════════════════════════════════ */
/* 網目を反転（暗い網を紙の上に）。ヒーローと同じ模様が続く */

/* 事実の枠：ヒーローのメニューと同じ「枠＋区切り」の作り。色だけ反転 */
.fact{background:var(--sumi-deep,#000000);color:var(--shoji);padding:1rem 1.15rem}
.fact dt{font-size:var(--fs-ddl);font-weight:300;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.5);margin:0 0 .35rem}
.fact dd{margin:0;font-family:var(--display);font-size:clamp(1rem,.88rem + .5vw,1.3rem);line-height:1.3}
.fact dd small{display:block;font-family:var(--body);font-size:var(--fs-ddl);
  letter-spacing:.04em;color:rgba(255,255,255,.55);margin-top:.3rem;line-height:1.6}
@media(max-width:860px){
    }






/* ══ 狭い／低い画面のヒーロー ══
   100svh を強制すると内容がせり上がってヘッダーに貼り付くため、
   高さを内容に合わせて伸ばし、上から順に置く。ページ側でスクロールさせる。
   （記述順で確実に勝たせるため、スタイルシートの末尾に置く） */
@media (max-width:820px), (max-height:720px){
  .hero{min-height:auto;justify-content:flex-start}
  .hero__in{
    padding-block:calc(var(--h-main-top) + clamp(3rem,10vh,5rem))
                  clamp(2.25rem,7vh,3.5rem)}
  .tabs{margin-bottom:clamp(1.5rem,4.5vh,2.2rem)}
  .hero__lead{margin-bottom:clamp(1.4rem,4vh,2rem)}
}

/* ══════════════════════════════════════════════
   About us（会社）→ ガイド
   ────────────────────────────────────────────
   ・上段 About＝ページへ連れて行く入口。全部書かない
   ・下段 Guides＝チーム紹介。ここで完結
   ・横幅いっぱいを使う。上段は見出し／本文の2段組み、
     下段はカードの横並び。同じ左端に揃えて縦の線は保つ
   ══════════════════════════════════════════════ */
.ab{background:#fff;color:var(--ink);padding-block:clamp(3rem,8vh,5.5rem)}

.ab__eye,.ct__eye{margin:0 0 .6rem;font-size:var(--fs-util);letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3)}

/* 上段だけ、右半分に宮川町の写真を薄く敷く。
   文字は左62chに収まっているので可読性は落とさない。
   左端はマスクで白へ溶かし、写真の輪郭が四角く出ないようにする */
.ab__top{position:relative;isolation:isolate}
.ab__ph{position:absolute;top:0;bottom:0;left:46%;
  right:calc(50% - 50vw);          /* 画面の右端まで抜く。切り取られた四角に見せない */
  z-index:-1;pointer-events:none;opacity:.3;
  --fade:linear-gradient(to right,transparent 0%,#000 50%),
         linear-gradient(to bottom,transparent 0%,#000 22%,#000 62%,transparent 100%);
  -webkit-mask-image:var(--fade);-webkit-mask-composite:source-in;
  mask-image:var(--fade);mask-composite:intersect}
.ab__ph img{width:100%;height:100%;object-fit:cover;object-position:center 40%;display:block}

/* ── 上段：縦に積む。見出し→リード→本文→出口の一直線 ── */
.ab h2{font-family:var(--display);font-weight:400;line-height:1.28;
  font-size:clamp(1.35rem,1.05rem + 1.6vw,2.5rem);
  margin:0 0 clamp(1rem,2.6vh,1.5rem)}
/* 文章だけは行長を抑える（横幅いっぱいだと読みにくい） */
.ab__lead{max-width:62ch;font-size:var(--fs-nav);line-height:1.95;color:var(--ink);margin:0 0 1rem}
.ab__p{max-width:62ch;font-size:var(--fs-dd);line-height:2.05;color:var(--ink-2);margin:0}

/* About の出口。行全体を押せる帯にしてページへ渡す */
.ab__cta{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-top:clamp(1.1rem,2.6vh,1.6rem);padding:.85rem 0;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  font-size:var(--fs-dd);letter-spacing:.1em;color:var(--ink);
  transition:border-color .25s var(--ease)}
.ab__cta:hover{border-color:var(--ink)}
.ab__cta-a{font-size:1.2em;transition:transform .25s var(--ease)}
.ab__cta:hover .ab__cta-a{transform:translateX(5px)}

/* ── 下段：ガイド ── */
.ab__team{margin-top:clamp(2.6rem,7vh,4.5rem)}
.ab__to{margin:0 0 clamp(1.1rem,2.8vh,1.6rem);
  font-size:var(--fs-dd);line-height:1.9;color:var(--ink-2)}

/* ガイドは人数が増える。段組みにすると増減でレイアウトが崩れるので、
   どの画面幅でも横スクロールで固定する。増えたぶんは右へ伸びるだけ。
   画面端まで抜いて、切れたカードでスクロールできることを示す */
/* overflow-y:hidden はトップ（index.html。D1）と同じ。子要素に縦の transform を付けると縦スクロールが生まれて
   ページ全体の高さが動く不具合が出るため（2026-09-06） */
.ab__who{display:flex;overflow-y:hidden;gap:clamp(1rem,2.2vw,1.8rem);margin:0;padding:0;list-style:none;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  /* 画面端まで抜いて、左右とも本文の内容線で始まり内容線で終わる（--wrap-edge は :root） */
  margin-inline:calc(var(--wrap-edge) * -1);
  padding-inline:var(--wrap-edge);
  padding-bottom:.25rem;
  scroll-padding-inline:var(--wrap-edge)}
.ab__who::-webkit-scrollbar{display:none}
/* カードの枠は描かない。写真と文字だけで並べる */
.who{flex:0 0 clamp(190px,20vw,272px);min-width:0;scroll-snap-align:start}
.who__f{margin:0 0 .75rem;aspect-ratio:4/5;overflow:hidden;background:#eee}
.who__f img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--ease)}
.who:hover .who__f img{transform:scale(1.04)}
.who__n{display:block;font-family:'Square Peg',cursive;font-weight:400;
  font-size:clamp(1.25rem,1.05rem + .85vw,1.65rem);line-height:1.1;margin:0}
.who__r{display:block;margin:.15rem 0 .45rem;
  font-size:var(--fs-util);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.who__t{margin:0;font-size:var(--fs-ddl);line-height:1.85;color:var(--ink-2);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden}
.who.is-open .who__t{-webkit-line-clamp:unset;overflow:visible}
/* 続きは押したときだけ。タップ領域は padding で24px確保（WCAG 2.5.8） */
.who__more{margin:.3rem 0 0;padding:.35rem 0;background:none;border:0;cursor:pointer;
  font-family:var(--body);font-weight:300;font-size:var(--fs-util);
  letter-spacing:.12em;color:var(--ink-3);
  border-bottom:1px solid rgba(0,0,0,.2);transition:color .2s,border-color .2s}
.who__more:hover{color:var(--ink);border-color:var(--ink)}

@media(max-width:960px){
  /* この幅から下は本文が右まで届く。文字の裏に写真が回ると読みにくいので外す */
  .ab__ph{display:none}
}
@media(max-width:700px){
  .ab__who{gap:1rem}
  .who{flex:0 0 min(58vw,230px)}
}
@media(prefers-reduced-motion:reduce){
  .who__f img,.ab__cta-a{transition:none}
  .who:hover .who__f img{transform:none}
}

/* ══════════════════════════════════════════════
   フッター
   ────────────────────────────────────────────
   現行サイトのフッター構成に寄せる：
   ブランド／Experiences／Contact の3列、
   見出しの下に細い罫線、リンクは右端に「>」。
   ただし地は黒のまま（ヒーローと同じ地に戻して1周させる）。
   ══════════════════════════════════════════════ */
.ft{background:#000;color:#fff;
  padding-block:clamp(3rem,8vh,5rem) 0;
  /* フッターは案内板。ここだけ以前の小さい値に戻す（トップ・会社のページのフッターと同じ値。2026-10-03 そろえた） */
  --fs-dd:clamp(0.6562rem, 0.6292rem + 0.1204vw, 0.7375rem);    /* 10.5 → 11.8px */
  --fs-ddl:clamp(0.5938rem, 0.5667rem + 0.1204vw, 0.675rem);    /*  9.5 → 10.8px */
  --fs-util:clamp(0.5938rem, 0.5667rem + 0.1204vw, 0.675rem)}   /*  9.5 → 10.8px */
.ft__top{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,5rem);align-items:start}

/* ── ブランド列 ── */
.ft__logo{display:block;width:clamp(120px,12vw,160px);height:auto;margin:0 0 1.2rem}
.ft__rule{height:1px;background:rgba(255,255,255,.18);margin:0 0 1.2rem}
.ft__tag{margin:0 0 1.4rem;max-width:36ch;
  font-size:var(--fs-ddl);line-height:2;color:rgba(255,255,255,.72)}
.ft__sns{display:flex;gap:1rem;margin:0;padding:0;list-style:none}
.ft__sns a{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;
  color:rgba(255,255,255,.75);transition:color .2s}
.ft__sns a:hover{color:#fff}
.ft__sns svg{width:19px;height:19px;display:block}

/* ── 見出し＋罫線（参考サイトの型） ── */
.ft__h{margin:0 0 .9rem;font-family:var(--display);font-weight:400;
  font-size:clamp(.875rem,.82rem + .24vw,1.05rem);line-height:1.2;
  color:#fff}
.ft__hr{height:1px;background:rgba(255,255,255,.18);margin:0 0 1.1rem}

/* ── リンク列。右端に「>」 ── */
.ft__list{margin:0;padding:0;list-style:none}
.ft__list li{border-bottom:1px solid rgba(255,255,255,.09)}
.ft__list li:last-child{border-bottom:0}
.ft__list a{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem 0;font-size:var(--fs-dd);color:#fff;
  transition:color .2s}
.ft__list a:hover{color:#fff}
.ft__list a i{font-style:normal;font-size:1.1em;color:rgba(255,255,255,.55);
  transition:transform .25s var(--ease),color .25s}
.ft__list a:hover i{transform:translateX(4px);color:#fff}

/* ── Contact列 ── */
.ft__lbl{margin:0 0 .9rem;max-width:65ch;font-size:var(--fs-util);letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.6)}
.ft__ways{margin:0 0 1.3rem;padding:0;list-style:none}
.ft__ways li{margin-bottom:.7rem}
.ft__ways a,.ft__ways span{display:flex;align-items:center;gap:.7rem;padding:.35rem 0;
  font-size:var(--fs-dd);color:#fff;transition:color .2s}
.ft__ways a:hover{color:#fff}
.ft__ways svg{width:15px;height:15px;flex:none;color:rgba(255,255,255,.7)}
.ft__ways small{font-size:var(--fs-util);color:rgba(255,255,255,.6)}

/* エージェント向けは一般客と別物なので、罫線で切って独立させる */
.ft__agent{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-top:1.1rem;padding-bottom:.3rem;border-top:1px solid rgba(255,255,255,.18);
  font-size:var(--fs-dd);color:#fff;transition:color .2s}
.ft__agent:hover{color:#fff}
.ft__agent i{font-style:normal;font-size:1.1em;color:rgba(255,255,255,.55);
  transition:transform .25s var(--ease),color .25s}
.ft__agent:hover i{transform:translateX(4px);color:#fff}

.ft__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.8rem 1.6rem;margin-top:clamp(2.6rem,7vh,4rem);
  padding-block:1.3rem;border-top:1px solid rgba(255,255,255,.16)}
.ft__cr{margin:0;font-size:var(--fs-util);color:rgba(255,255,255,.6)}
.ft__legal{display:flex;align-items:center;gap:1.1rem;margin:0;padding:0;list-style:none}
.ft__legal li+li{padding-left:1.1rem;border-left:1px solid rgba(255,255,255,.22)}
.ft__legal a{display:inline-block;padding:.4rem 0;
  font-size:var(--fs-util);color:rgba(255,255,255,.6);transition:color .2s}
.ft__legal a:hover{color:#fff}

@media(max-width:900px){
  .ft__top{grid-template-columns:repeat(2,minmax(0,1fr));gap:2.2rem clamp(1.5rem,4vw,2.5rem)}
  .ft__brand{grid-column:1/-1}
  /* この幅では会社紹介文は落とす。狭い画面のフッターは「案内板」であって
     読み物ではないため、リンクまでの距離を縮めることを優先する。
     同じ文はメタディスクリプションにも入っているので情報は失われない */
  .ft__tag{display:none}
}
@media(max-width:520px){
  .ft__top{grid-template-columns:minmax(0,1fr);gap:2rem}
  .ft__bar{flex-direction:column;align-items:flex-start;gap:.7rem}
}
@media(prefers-reduced-motion:reduce){
  .ft__list a i,.ft__agent i{transition:none}
  .ft__list a:hover i,.ft__agent:hover i{transform:none}
}

/* ガイドと Contact の区切り。どちらも白地なので境目が消える。
   画面端まで伸ばすと「セクションの縁」に見えてしまうため、
   本文と同じ左右余白で止めて、区画の合図だけにする */
.sect-sep{background:#fff}
.sect-sep hr{margin:0;border:0;height:1px;background:rgba(0,0,0,.2)}

/* ══════════════════════════════════════════════
   クッキー同意
   実際に第三者クッキーを置いているのは地図の埋め込みだけ。
   同意するまで読み込まず、枠だけ出しておく
   ══════════════════════════════════════════════ */
.cc{position:fixed;left:0;right:0;bottom:0;z-index:120;
  background:#000;color:#fff;transform:translateY(110%);
  transition:transform .35s var(--ease)}
.cc.on{transform:none}
.cc__in{display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);flex-wrap:wrap;
  padding-block:clamp(.9rem,2.4vh,1.2rem)}
.cc__t{flex:1 1 22rem;min-width:0;margin:0;max-width:65ch;
  font-size:var(--fs-ddl);line-height:1.6;color:rgba(255,255,255,.88)}
.cc__t a{color:#fff;border-bottom:1px solid rgba(255,255,255,.45)}
.cc__b{display:flex;gap:.5rem;flex:none}
.cc__b button{min-height:44px;padding:0 1.1rem;cursor:pointer;
  font-family:var(--body);font-weight:300;font-size:var(--fs-util);
  letter-spacing:.12em;text-transform:uppercase;
  background:none;border:1px solid rgba(255,255,255,.45);color:#fff;
  transition:background-color .2s,border-color .2s,color .2s}
.cc__b button:hover{border-color:#fff}
.cc__b .cc__yes{background:#fff;border-color:#fff;color:#000}
.cc__b .cc__yes:hover{opacity:.85}

/* 地図の代わりに出す枠 */
.mapoff{display:block;padding:clamp(1rem,3vw,1.4rem);
  border:1px solid var(--rule);background:#fafafa}
.mapoff p{margin:0 0 .7rem;font-size:var(--fs-ddl);line-height:1.85;color:var(--ink-2)}
.mapoff button{min-height:44px;padding:0 1rem;cursor:pointer;
  font-family:var(--body);font-weight:300;font-size:var(--fs-util);
  letter-spacing:.12em;text-transform:uppercase;
  background:none;border:1px solid var(--field);color:var(--ink);
  transition:border-color .2s}
.mapoff button:hover{border-color:var(--ink)}
@media(prefers-reduced-motion:reduce){ .cc{transition:none} }


.fx{position:fixed;right:14px;bottom:14px;z-index:130;background:#fff;color:#111;
  border:1px solid #d5d8dd;box-shadow:0 10px 30px rgba(0,0,0,.18);padding:12px 14px;
  font:12px/1.7 ui-monospace,Menlo,monospace;width:238px;border-radius:4px}
.fx b{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px;color:#555}
.fx label{display:flex;align-items:center;gap:6px;margin-bottom:6px;font-size:11px}
.fx input[type=range]{flex:1;min-width:0}.fx select{flex:1;font:inherit;font-size:11px}
.fx span{width:38px;text-align:right;font-weight:700}

/* ══════════════════════════════════════════════
   会社概要
   ヒーロー（暗い映像）に対して紙の明るさで受ける＝メリハリ。
   同じ網目・同じ枠付きリスト・同じ書体で繋ぐ＝統一感。
   ══════════════════════════════════════════════ */
/* 網目を反転（暗い網を紙の上に）。ヒーローと同じ模様が続く */

/* 事実の枠：ヒーローのメニューと同じ「枠＋区切り」の作り。色だけ反転 */
.fact{background:var(--sumi-deep,#000000);color:var(--shoji);padding:1rem 1.15rem}
.fact dt{font-size:var(--fs-ddl);font-weight:300;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.5);margin:0 0 .35rem}
.fact dd{margin:0;font-family:var(--display);font-size:clamp(1rem,.88rem + .5vw,1.3rem);line-height:1.3}
.fact dd small{display:block;font-family:var(--body);font-size:var(--fs-ddl);
  letter-spacing:.04em;color:rgba(255,255,255,.55);margin-top:.3rem;line-height:1.6}
@media(max-width:860px){
    }




/* ══ 狭い／低い画面のヒーロー ══
   100svh を強制すると内容がせり上がってヘッダーに貼り付くため、
   高さを内容に合わせて伸ばし、上から順に置く。ページ側でスクロールさせる。
   （記述順で確実に勝たせるため、スタイルシートの末尾に置く） */
@media (max-width:820px), (max-height:720px){
  .hero{min-height:auto;justify-content:flex-start}
  .hero__in{
    padding-block:calc(var(--h-main-top) + clamp(3rem,10vh,5rem))
                  clamp(2.25rem,7vh,3.5rem)}
  .tabs{margin-bottom:clamp(1.5rem,4.5vh,2.2rem)}
  .hero__lead{margin-bottom:clamp(1.4rem,4vh,2rem)}
}

/* ══════════════════════════════════════════════
   Contact
   左に直接の連絡先、右にフォーム。
   入力欄は16px固定（iOSの自動拡大を防ぐ）／タップ領域48px以上。
   ══════════════════════════════════════════════ */
.ct{background:#fff;color:var(--ink);padding-block:clamp(3rem,8vh,5.5rem)}
.ct__g{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(1.8rem,4vw,4.5rem);align-items:start}

.ct__lead{position:relative;padding-left:clamp(1rem,2.6vw,2.4rem)}
.ct__lead::before{content:"";position:absolute;left:0;top:.3rem;bottom:.3rem;
  width:1px;background:rgba(0,0,0,.22)}
.ct h2{font-family:var(--display);font-weight:400;line-height:1.32;
  font-size:clamp(1.15rem,.95rem + 1.25vw,2.15rem);margin:0 0 clamp(.7rem,1.8vh,1.1rem)}
.ct__lead p:not(.ct__eye){font-size:var(--fs-dd);line-height:1.9;color:var(--ink-2);margin:0 0 1.4rem;max-width:38ch}
.ct__direct{margin:0;font-size:var(--fs-dd);line-height:1.9}
.ct__direct div{display:grid;grid-template-columns:5.5rem 1fr;gap:.5rem 1rem;
  padding:.6rem 0;border-top:1px solid var(--rule)}
.ct__direct div:last-child{border-bottom:1px solid var(--rule)}
.ct__direct dt{font-size:var(--fs-util);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);line-height:2.1}
.ct__direct dd{margin:0}
.ct__direct a{color:var(--ink);border-bottom:1px solid rgba(0,0,0,.25);
  transition:border-color .2s}
.ct__direct a:hover{border-color:var(--ink)}
.ct__direct small{display:block;font-size:var(--fs-util);color:var(--ink-3);letter-spacing:.06em}

/* ── フォーム ── */
.ct__form{display:grid;gap:clamp(.8rem,1.8vh,1.1rem)}
.ct__row{display:grid;grid-template-columns:1fr 1fr;gap:inherit}
.fld{display:grid;gap:.4rem;min-width:0}
.fld label{font-size:var(--fs-util);font-weight:300;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-2)}
.fld label em{font-style:normal;color:var(--beni);margin-left:.2rem}
.fld input,.fld select,.fld textarea{
  width:100%;box-sizing:border-box;min-height:48px;padding:.7rem .85rem;
  font-family:var(--body);font-weight:300;font-size:16px;line-height:1.5;color:var(--ink);
  background:#fff;border:1px solid var(--field);border-radius:2px;
  transition:border-color .15s,box-shadow .15s}
.fld textarea{min-height:120px;resize:vertical}
.fld select{appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%238C8C8C' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .85rem center;background-size:10px;
  padding-right:2.2rem}
.fld :is(input,select,textarea):hover{border-color:var(--field-h)}
.fld :is(input,select,textarea):focus-visible{outline:none;border-color:var(--ink);
  box-shadow:0 0 0 2px var(--ink)}
/* 必須欄が未入力のまま送信された場合だけ枠で示す */
.ct__form:invalid :is(input,select,textarea):user-invalid{border-color:#111;
  box-shadow:0 0 0 1px #111}
/* 添付とヒント。ファイル選択のUAスタイルを他の入力に寄せる */
.fld__hint{font-size:var(--fs-util);color:var(--ink-3);line-height:1.6}
.fld input[type=file]{padding:.55rem .7rem;font-size:var(--fs-ddl);cursor:pointer}
.fld input[type=file]::file-selector-button{
  margin-right:.7rem;padding:.35rem .7rem;border:1px solid var(--field);background:none;
  font-family:var(--body);font-weight:300;font-size:var(--fs-util);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);cursor:pointer;transition:border-color .2s}
.fld input[type=file]::file-selector-button:hover{border-color:var(--ink)}
.ct__submit{min-height:54px;padding:0 1.5rem;margin-top:.4rem;
  font-family:var(--body);font-weight:300;font-size:var(--fs-ddl);
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--shoji);background:#000;border:1px solid #000;border-radius:2px;
  cursor:pointer;transition:opacity .15s}
.ct__submit:hover{opacity:.85}
.ct__note{margin:.2rem 0 0;font-size:var(--fs-util);line-height:1.7;color:var(--ink-3)}

@media(max-width:820px){
  .ct__g{grid-template-columns:1fr;gap:clamp(1.6rem,4vh,2.4rem)}
}
@media(max-width:520px){
  .ct__row{grid-template-columns:1fr}
  .ct__direct div{grid-template-columns:1fr;gap:.15rem}
  .ct__direct dt{line-height:1.6}
}

@media(max-width:760px){
    }
@media(max-width:380px){
  }

@media(max-width:820px){
            }
@media(max-width:440px){
      }

/* ── 受け渡し ── */

/* ── 人（横一列。人数が増えても1行のまま横に伸びる） ──
   写真の上に文字は置かない。カードが小さいので、顔を隠さず
   名前は写真の下に。経歴だけ押したときに重ねて出す。 */


/* ══ モバイルの商品メニュー ══
   2列だと1項目あたりの幅が155pxしかなく、商品名が2行に折り返す。
   狭い画面では1列に戻して、名前を1行で読ませる。 */
@media (max-width:820px){
  #menu{grid-template-columns:minmax(0,1fr);max-width:640px;column-gap:0}
}


/* ══════════════════════════════════════════════
   プロダクトページ
   ────────────────────────────────────────────
   考え方：訪問者が確実に知っている「人数」を先に聞き、
   そこから総額・1人あたり・選べる会場を逆算して見せる。
   会場名で選ばせない。定員で自動的に絞る。
   ══════════════════════════════════════════════ */

/* ── 1. ヒーロー（TOP BOX）──
   高さは Home（index.html の .hero）と同じ 100svh。svh はアドレスバーが出た状態の高さで、スクロール中に伸縮しない
   （dvh は伸縮して文字が動くので使わない）。文字は下寄せ（align-items:flex-end）。
   上下の余白は Home の .hero__in と同じ値を変数で持つ（--ph-pad-t / --ph-pad-b。狭い・低い画面では下で差し替える）。
   2026-09-04 に min(78vh,700px) へ縮めていたが、阪田さん指示 D4（画面いっぱい・文字は最下部）で 100svh に戻した */
.ph{position:relative;min-height:100svh;display:flex;align-items:flex-end;
  --ph-pad-t:calc(var(--h-main-top) + clamp(2rem,7vh,4.5rem));   /* 上: 固定ヘッダーの高さ＋ゆとり（Home と同値） */
  --ph-pad-b:clamp(2.75rem,9vh,5.5rem);                           /* 下: 最後の行と画面下端の間（Home と同値） */
  background:#000;overflow:hidden}
.ph__bg{position:absolute;inset:0}
/* ── ヒーローのスライド ──
   重ねてクロスフェードするだけ。横に流すと文字が読みにくくなるので位置は動かさない */
.ph__sl{position:absolute;inset:0;opacity:0;transition:opacity 1.1s var(--ease)}
.ph__sl.on{opacity:1}
.ph__sl img,.ph__sl video{width:100%;height:100%;object-fit:cover;display:block}
/* 動きを抑える設定では瞬時に切り替える（手動送りは効く） */
.ph__bg.is-calm .ph__sl{transition:none}

/* 網目。スライドより上、暗幕(.ph__bg::after)より下。
   ::after は子要素の後に描かれるので、この順序は自動的に保たれる */
.ph__mesh{position:absolute;inset:0;pointer-events:none;
  --pitch:3px; --c:rgba(255,255,255,.16);
  background-image:
    repeating-linear-gradient(0deg,  var(--c) 0 1px, transparent 1px var(--pitch)),
    repeating-linear-gradient(90deg, var(--c) 0 1px, transparent 1px var(--pitch));
  background-size:var(--pitch) var(--pitch)}

/* 送りのドット。押せる範囲は見た目より広く取る */
.ph__dots{position:absolute;z-index:3;right:clamp(1.25rem,.7rem + 2.4vw,3rem);
  bottom:clamp(1.25rem,3vh,2rem);display:flex;gap:.15rem}
.ph__dots button::after{content:"";position:absolute;inset:-9px}
.ph__dots button{width:26px;height:26px;padding:0;border:0;background:none;cursor:pointer;position:relative;
  display:grid;place-items:center}
.ph__dots button::before{content:"";width:5px;height:5px;border-radius:50%;
  background:rgba(255,255,255,.35);transition:background-color .3s var(--ease)}
.ph__dots button:hover::before{background:rgba(255,255,255,.7)}
.ph__dots button.on::before{background:#fff}
@media(prefers-reduced-motion:reduce){ .ph__sl{transition:none} }

.ph__bg img{width:100%;height:100%;object-fit:cover;display:block}
/* 概要の文章まで写真の上に載るので、下半分をしっかり沈める。
   上端はヘッダーが読める程度に、中央は写真を活かす */
.ph__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,
    rgba(0,0,0,.92) 0%, rgba(0,0,0,.86) 26%, rgba(0,0,0,.55) 52%,
    rgba(0,0,0,.30) 74%, rgba(0,0,0,.52) 100%)}
.ph__in{position:relative;z-index:2;width:100%;
  padding-block:var(--ph-pad-t) var(--ph-pad-b)}

/* 写真の上の概要 */
.ph__ov{margin-top:clamp(1.8rem,5vh,3rem);max-width:60ch}
.ph__ov h2{margin:0 0 .7rem;font-family:var(--display);font-weight:400;color:#fff;
  line-height:1.35;font-size:clamp(.95rem,.88rem + .38vw,1.18rem)}
.ph__ov p{margin:0;font-size:var(--fs-dd);line-height:2;color:rgba(255,255,255,.86)}
.ph__diff{margin:1.2rem 0 0;padding:0;list-style:none}
.ph__diff li{position:relative;padding-left:1.1rem;margin-bottom:.45rem;
  font-size:var(--fs-dd);line-height:1.9;color:#fff}
.ph__diff li::before{content:"";position:absolute;left:0;top:.85em;
  width:5px;height:1px;background:rgba(255,255,255,.7)}
.ph__eye{margin:0 0 .8rem;font-size:var(--fs-util);letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.6)}
.ph h1{margin:0;font-family:var(--display);font-weight:400;color:#fff;line-height:1.18;
  font-size:clamp(1.75rem,1.2rem + 2.6vw,3.4rem)}
/* サブタイトルは h1 とセット。ホームの TOP ボックスと同じ扱いで明朝にする
   （.hero__lead .hero__sub と同じ指定） */
.ph .ph__sub{margin:.05em 0 0;font-family:var(--display);font-weight:400;
  font-size:clamp(1.125rem,.9rem + 1.05vw,1.75rem);line-height:1.3;
  color:rgba(255,255,255,.88)}
/* ══ 狭い／低い画面の TOP BOX（Home の .hero と同じ規則・同じ値）══
   狭い画面でも必ず画面いっぱいの高さを保つ。内容が画面より高いときは下へ伸びてページ側でスクロールする */
@media (max-width:820px), (max-height:720px){
  .ph{min-height:100svh;
    --ph-pad-t:calc(var(--h-main-top) + clamp(3rem,10vh,5rem));
    --ph-pad-b:clamp(2.25rem,7vh,3.5rem)}
}

/* ── 共通 ── */
.pg{background:#fff;color:var(--ink);padding-block:clamp(2.6rem,7vh,4.5rem)}
.pg--tight{padding-block:clamp(2rem,5vh,3rem)}
/* 縦線が間を作るので、上の余白は線に譲る */
.pg--lead{padding-top:clamp(1rem,2.5vh,1.5rem)}
.pg .pg__eye{margin:0 0 .6rem;font-size:var(--fs-util);letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3)}
/* 回遊セクションの見出し。ヒーローの Experience Overview と同じ大きさに揃える */
.pg .pg__h2--sm{margin:0 0 clamp(.9rem,2.4vh,1.3rem);
  font-size:clamp(.95rem,.88rem + .38vw,1.18rem);line-height:1.35;letter-spacing:.02em;
  font-family:var(--display);color:var(--ink)}
.pg h2{margin:0 0 clamp(.9rem,2.4vh,1.3rem);font-family:var(--display);font-weight:400;
  line-height:1.3;font-size:clamp(1.2rem,1rem + 1.1vw,1.9rem)}
.pg p{font-size:var(--fs-dd);line-height:2.05;color:var(--ink-2);margin:0 0 1rem;max-width:62ch}

/* ── 2. 概要 ── */
.ov__diff{margin:1.4rem 0 0;padding:0;list-style:none;max-width:62ch}
.ov__diff li{position:relative;padding-left:1.1rem;margin-bottom:.5rem;
  font-size:var(--fs-dd);line-height:1.9;color:var(--ink)}
.ov__diff li::before{content:"";position:absolute;left:0;top:.85em;
  width:5px;height:1px;background:var(--ink)}

/* ── 3. 人数ステッパー ── */
/* 見出しと一文は縦に重ねて1セット。人数カウンターはその右。
   下だけ区切って、ここから先が「結果」だと分かるようにする */
.gs{display:flex;align-items:flex-end;
  gap:clamp(1rem,2.5vw,2rem);flex-wrap:wrap;
  padding:0 0 clamp(1rem,2.6vh,1.4rem);
  border-bottom:1px solid var(--rule)}
/* 端まで引き離さず、文章のすぐ横にカウンターを置く。
   幅の上限は設けない。デスクトップでは1行に収まり、狭くなれば自然に折り返す。
   nowrap は使わない（文言が長くなったときに画面外へ逃げるため） */
.gs__t{flex:0 1 auto;min-width:0}
.gs .gs__t h2{margin:0 0 .45rem}
.gs .gs__q{margin:0;font-size:var(--fs-dd);line-height:1.9;color:var(--ink-2)}
.gs__c{display:flex;align-items:center;gap:.25rem}
.gs__b{width:44px;height:44px;display:grid;place-items:center;cursor:pointer;
  background:none;border:1px solid var(--field);color:var(--ink);
  font-family:var(--body);font-weight:300;font-size:1.1rem;line-height:1;
  transition:border-color .2s,background-color .2s}
.gs__b:hover:not(:disabled){border-color:var(--ink)}
.gs__b:disabled{opacity:.3;cursor:default}
.gs__v{min-width:3.5rem;text-align:center;font-size:1.15rem;
  font-variant-numeric:tabular-nums}
.pg .gs__n{margin:0;font-size:var(--fs-util);color:var(--ink-3);line-height:1.7}

/* ── 4. 選択肢カード ── */
/* 会場は増える。段組みにすると2段目ができて選びにくくなるので、
   ガイド一覧や Other experiences と同じ横1列のスクロールに揃える。
   画面端まで抜いて、切れたカードでスクロールできることを示す */
.opts{display:flex;align-items:flex-start;gap:clamp(.8rem,1.8vw,1.2rem);
  margin-top:clamp(1.4rem,3.2vh,2rem);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  /* 画面端まで抜いて、左右とも本文の内容線で始まり内容線で終わる（--wrap-edge は :root）。
     最後のカードが右の内容線で止まるよう scroll-padding も左右同じ値にする */
  margin-inline:calc(var(--wrap-edge) * -1);
  padding-inline:var(--wrap-edge);
  padding-bottom:.3rem;
  scroll-padding-inline:var(--wrap-edge)}
.opts::-webkit-scrollbar{display:none}  /* 選んだカードだけ伸びる。他は空白で間延びさせない */
/* カードは枠。中の「選ぶボタン」は枠を持たず、カード全面を占める */
.opt{position:relative;flex:0 0 clamp(228px,24vw,286px);scroll-snap-align:start;
  display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--rule);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.opt:hover:not(.is-off){border-color:var(--ink-3)}
.opt.is-on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.opt.is-off{opacity:.42}
.opt__pick{flex:1;display:flex;flex-direction:column;text-align:left;cursor:pointer;
  padding:clamp(1rem,2.4vw,1.3rem);background:none;border:0;
  font-family:var(--body);font-weight:300;color:var(--ink)}
.opt__pick:disabled{cursor:not-allowed}

/* 選んだカードの中にだけ会場写真が出る */
.opt__ph{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;
  padding:0 clamp(1rem,2.4vw,1.3rem) clamp(1rem,2.4vw,1.3rem)}
.opt__sh{padding:0;border:0;background:none;cursor:zoom-in;line-height:0;outline-offset:2px}
.opt__sh img{width:clamp(54px,7vw,68px);aspect-ratio:1/1;object-fit:cover;display:block;
  background:#eee;transition:opacity .2s}
.opt__sh:hover img{opacity:.78}
.opt__phk{width:100%;margin-bottom:.15rem;font-size:var(--fs-util);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3)}
.opt__phk em{font-style:normal;text-transform:none;letter-spacing:.04em}
.opt__name{font-family:var(--display);font-weight:400;
  font-size:clamp(1rem,.9rem + .5vw,1.25rem);line-height:1.35}
/* 同じ「Large Venue」が2枚あり、違いは定員だけ。
   ここが選択の決め手なので、薄い小文字にせず黒で読める大きさにする */
.opt__cap{margin:.3rem 0 .15rem;font-size:var(--fs-dd);line-height:1.5;color:var(--ink)}
.opt__cap b{font-weight:400;font-size:1.25em;font-variant-numeric:tabular-nums}
.opt__venue{font-size:var(--fs-ddl);color:var(--ink-3);line-height:1.7}
.opt__pr{margin-top:auto;padding-top:.9rem}
.opt__per{font-size:clamp(1.05rem,.95rem + .5vw,1.35rem);line-height:1.2;
  font-variant-numeric:tabular-nums}
.opt__per small{font-size:var(--fs-util);color:var(--ink-3);letter-spacing:.06em}
.opt__tot{margin-top:.25rem;font-size:var(--fs-ddl);color:var(--ink-2);
  font-variant-numeric:tabular-nums}
.opt__bad{margin-top:.5rem;font-size:var(--fs-util);color:var(--ink-3)}

/* ── 5. 詳細 ── */

/* 集合場所の地図。配色は白黒基調なので、地図も彩度を落として馴染ませる */
.itin__m{display:block;margin-top:.7rem}
.itin__m iframe{display:block;width:100%;height:clamp(150px,22vh,196px);border:0;
  background:#f2f2f2;filter:grayscale(1) contrast(1.05)}
.itin__ml{display:inline-flex;align-items:baseline;gap:.4rem;margin-top:.5rem;min-height:44px;padding-top:.9rem;
  font-size:var(--fs-util);letter-spacing:.1em;color:var(--ink-2);
  border-bottom:1px solid rgba(0,0,0,.22);padding-bottom:.15rem;
  transition:color .2s,border-color .2s}
.itin__ml:hover{color:var(--ink);border-color:var(--ink)}
.itin__ml span{transition:transform .2s var(--ease)}
.itin__ml:hover span{transform:translateX(3px)}
@media(prefers-reduced-motion:reduce){ .itin__ml span{transition:none} }

/* 予約バーの内訳 */
/* 商品名と金額を1つのかたまりにし、矢印はその外側に置く。
   名前と金額は長さが違うので、片方だけを基準にすると矢印が文字の下に潜る */
.bar__t{display:flex;align-items:center;gap:clamp(1.6rem,4vw,4rem);
  min-width:0;flex:1;padding:.25rem .2rem;background:none;border:0;cursor:pointer;
  font-family:var(--body);font-weight:300;text-align:left}
.bar__t2{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
/* 矢印は金額のすぐ隣。帯の右端に置くと、何を開くボタンなのか伝わらない */
.bar__i{flex:none;width:8px;height:8px;
  border-right:1px solid rgba(255,255,255,.55);border-bottom:1px solid rgba(255,255,255,.55);
  transform:translateY(-2px) rotate(-135deg);transition:transform .25s var(--ease)}
.bar.x .bar__i{transform:translateY(1px) rotate(45deg)}
.bar__x{max-height:0;overflow:hidden;transition:max-height .3s var(--ease);
  border-bottom:1px solid rgba(255,255,255,.16)}
.bar.x .bar__x{max-height:44vh;overflow-y:auto}
.bar__x dl{margin:0;padding:.9rem 0 1rem}
.bar__x div{display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;
  padding:.42rem 0}
.bar__x div + div{border-top:1px solid rgba(255,255,255,.09)}
.bar__x div.is-sum{margin-top:.35rem;padding-top:.7rem;
  border-top:1px solid rgba(255,255,255,.3)}
.bar__x dt{margin:0;min-width:0;font-size:var(--fs-ddl);color:rgba(255,255,255,.72)}
.bar__x dd{margin:0;flex:none;font-size:var(--fs-ddl);color:#fff;
  font-variant-numeric:tabular-nums}
.bar__x .is-sum dt,.bar__x .is-sum dd{font-size:var(--fs-dd);color:#fff}
@media(prefers-reduced-motion:reduce){ .bar__x,.bar__i{transition:none} }

/* オプションの内訳。親行と子行を1つの塊に見せる */
.bar__x div.has-sub{padding-bottom:.2rem}
.bar__x div.is-sub{border-top:0;padding-top:.1rem}
.bar__x div.is-sub dt{position:relative;padding-left:1.4rem;color:rgba(255,255,255,.55)}
.bar__x div.is-sub dt::before{content:"";position:absolute;left:.35rem;top:-.35em;
  width:.55rem;height:.85em;
  border-left:1px solid rgba(255,255,255,.3);
  border-bottom:1px solid rgba(255,255,255,.3)}
.bar__x div.is-sub dd{color:rgba(255,255,255,.72)}

/* 案 B: 内訳の末尾の断り（目安・追加は Checkout で）。金額の行ではないので 1 列で折り返す */
.bar__x div.bar__note{display:block;padding-top:.6rem}
.bar__x div.bar__note dt{max-width:65ch;font-size:var(--fs-util);line-height:1.6;color:rgba(255,255,255,.55)}

/* 問い合わせベースの会場。即時予約ではないことを金額の直後に置く */
.opt__enq{max-width:65ch;display:block;margin-top:.45rem;padding-top:.45rem;
  border-top:1px solid var(--rule);
  font-size:var(--fs-util);line-height:1.6;color:var(--ink-3)}

/* 該当なしのときの案内。金額の代わりに置くので、数字と同じ大きさにはしない */
.spec__v--none{font-size:var(--fs-dd);line-height:1.9;color:var(--ink-2);max-width:52ch}

/* 出演者のカウンター */
.pf{display:flex;align-items:center;gap:.8rem;padding:.5rem 0;border-bottom:1px solid var(--rule)}
.pf:last-of-type{border-bottom:0}
.pf__n{flex:1;min-width:0;font-size:var(--fs-dd);color:var(--ink)}
.pf__c{flex:none;display:flex;align-items:center;gap:.2rem}
.pf__b{width:44px;height:44px;display:grid;place-items:center;cursor:pointer;
  background:none;border:1px solid var(--field);color:var(--ink);
  font:300 1rem/1 var(--body);transition:border-color .2s,opacity .2s}
.pf__b:hover:not(:disabled){border-color:var(--ink)}
.pf__b:disabled{opacity:.3;cursor:default}
.pf__v{min-width:2rem;text-align:center;font-weight:300;font-size:1.05rem;
  font-variant-numeric:tabular-nums}
.pf__f{flex:none;min-width:2rem;text-align:center;font-size:1.05rem;color:var(--ink)}
.pf__p{flex:none;font-size:var(--fs-util);color:var(--ink-3);text-align:right;min-width:7rem}
.pf__note{max-width:65ch;margin:.7rem 0 0;font-size:var(--fs-ddl);line-height:1.8;color:var(--ink-2)}
/* 案 B の 1 行案内（増員は Checkout で）は小さく・薄く（阪田さん 2026-09-11）。「1 included」は名前の右に寄せ、3 列の間延びをなくす */
/* Included の小項目（.spec__l li li）と同じ大きさ（阪田さん 2026-09-11）。
   ★.pg p（0,1,1）に負けて本文サイズで出ていたので .pg を付けて（0,2,0）勝たせる */
.pg .pf__note--s{font-size:var(--fs-ddl);line-height:1.6;color:var(--ink-3);margin:.5rem 0 0}
/* 増員の案内が最後の出演者の説明の続きに見えないよう、最後の行の下線を残し、線の下に余白を置いて別の段にする
   （阪田さん 2026-09-11「Performers の説明の続きに見える」）。.pf:last-of-type{border-bottom:0} より優先度を上げて勝たせる */
.pg .pf:has(+ .pf__note--s){border-bottom:1px solid var(--rule)}
.pg .pf + .pf__note--s{margin-top:0;padding-top:.85rem}
/* 案 B の出演者の行どうしの線は出さない。名前が見出しの役をするため（阪田さん 2026-09-11「Geiko と Maiko の間の線はいらない」）。
   線は増員の案内の上だけ（上の .pg .pf:has(+ .pf__note--s) は優先度 0,3,0 でこれ 0,2,0 に勝つので残る）。当社シートのカウンター行（.pf）は線のまま */
.pg .pf--d{border-bottom:0}
.pf__p--in{min-width:0;color:var(--ink-2)}
/* 案 B の Performers: 名前の下に役割の説明（Included の小項目 .spec__l li li と同じ大きさ・色）。「1 included」は名前の 1 行目に揃える */
.pf--d{align-items:baseline}
.pg .pf__d{display:block;margin-top:.15rem;font-size:var(--fs-ddl);line-height:1.6;color:var(--ink-3)}
@media(max-width:520px){
  .pf{flex-wrap:wrap;gap:.4rem .8rem}
  .pf__p{min-width:0;width:100%;text-align:left}
  .pf__p--in{width:auto;text-align:right}   /* 案 B の「1 included」は狭い幅でも右に */
}
/* ラグジュアリー会場の印 */
.opt.is-lux{border-color:rgba(0,0,0,.28)}
/* Fine は Luxury と枠線色を変える（阪田さん決定 2026-09-06）。バッジ色 #8a7a5c に合わせる */
.opt.is-fine{border-color:rgba(138,122,92,.55)}
/* 選択中は「選んだ」ことが最優先。上の2行（同じ詳細度・後勝ち）に .opt.is-on の黒枠が負けるので、
   ここで詳細度を上げて選択状態を勝たせる */
.opt.is-on.is-fine,.opt.is-on.is-lux{border-color:var(--ink)}
/* 黒ベタの箱はうるさい。明朝の細い囲みにして、特別さを大きさでなく質で出す。
   明朝は大文字小文字で組むほうが締まる（LUXURY ではなく Luxury） */
.opt__lux{position:absolute;z-index:2;
  top:clamp(.75rem,2vw,1rem);right:clamp(.75rem,2vw,1rem);
  padding:.1rem .55rem .2rem;
  border:1px solid rgba(0,0,0,.32);background:#fff;
  font-family:var(--display);font-weight:400;font-size:var(--fs-ddl);
  letter-spacing:.14em;line-height:1.5;color:var(--ink);
  transition:border-color .2s var(--ease),background-color .2s var(--ease),color .2s}
.opt.is-on .opt__lux{border-color:var(--ink);background:var(--ink);color:#fff}
/* Fine … Luxuryの一段下。会席など上質な食事の商品に付ける */
.opt__lux--fine{border-color:#8a7a5c;color:#8a7a5c;background:#fdfaf3}
.opt.is-on .opt__lux--fine{border-color:#8a7a5c;background:#8a7a5c;color:#fff}
/* 食事なし（master.js の meal=none）の印。Luxury / Fine と同じ明朝の囲みだが、上質の印ではなく
   情報なので色は落とし、選択中も反転しない。角に重ねず流れの中（1行目）に置いて商品名を下へ送る。
   絶対配置で角に重ねると "Show only" の幅ぶん商品名の行が細くなり、幅によって重なる（D2 と同じ事故）ため */
.opt__show{align-self:flex-start;margin:0 0 .45rem;padding:.1rem .55rem .2rem;
  border:1px solid rgba(0,0,0,.22);background:#fff;
  font-family:var(--display);font-weight:400;font-size:var(--fs-ddl);
  letter-spacing:.14em;line-height:1.5;color:var(--ink-3)}
/* 印が1行目にあるカードでは商品名は2行目に落ちるので、角の印（Luxury / Fine）を避ける右余白は要らない */
.opt.is-show .opt__name{padding-right:0}
/* 「No meal included」と食事つきページへの導線。選ぶボタンの外（ボタンの中にリンクは置けない）。
   リンクは指で押せる高さ（44px）を確保する */
.opt__meal{padding:0 clamp(1rem,2.4vw,1.3rem) clamp(.7rem,1.8vw,.9rem);margin-top:-.3rem;
  font-size:var(--fs-util);line-height:1.6;color:var(--ink-3)}
.opt__ml{display:inline-flex;align-items:center;gap:.35rem;min-height:44px;
  color:var(--ink-2);transition:color .2s}
/* 下線は★文字に付ける。a 自体に付けると、タップ領域を確保する min-height:44px の箱の下端に
   線が引かれ、文字から離れて浮いて見える（2026-09-06）。44px は a の min-height で保つ */
.opt__ml .opt__mlt{border-bottom:1px solid rgba(0,0,0,.22);transition:border-color .2s}
.opt__ml:hover{color:var(--ink)}
.opt__ml:hover .opt__mlt{border-color:var(--ink)}
.opt__ml .opt__mla{transition:transform .2s var(--ease)}
.opt__ml:hover .opt__mla{transform:translateX(3px)}
@media(prefers-reduced-motion:reduce){ .opt__ml .opt__mla{transition:none} }
/* 印と商品名がぶつからないよう右に逃がす */
.opt.is-lux .opt__name{padding-right:5.2rem}
/* Fine の印は Luxury より小さい（実測 46〜50px）。同じ 5.2rem だと 950px 付近で商品名が 3 行になる。
   必要最小は 印幅 49.6 ＋ 右オフセット 16 − カード内側余白 20.8 ≈ 45px → 3.5rem（56px）で全幅に余裕（fable 反証 2026-09-06） */
.opt.is-fine .opt__name{padding-right:3.5rem}
/* 「Show only」の印があるカードでは商品名が2行目に落ちるので、角の印を避ける右余白は要らない。
   上の .opt.is-show（同じ詳細度・先に書いてある）は後勝ちで負けるため、ここで詳細度を上げて打ち消す */
.opt.is-lux.is-show .opt__name,.opt.is-fine.is-show .opt__name{padding-right:0}

/* 選んだ案の属性表。
   所要時間・開始時刻・定員・料金・含まれるもの・行程は、すべて同じ階層の情報。
   1つの格子に収めて同列に見せる。
   罫線は gap:1px と背景色で描く。セルの結合があっても線が破綻しないため */
.spec{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  /* 下地の色を隙間から見せる方式だと、セルが埋まらない行で
     余白が灰色の面になる。線はセル自身の罫線で引き、下地は白にする */
  gap:0;background:#fff;
  border-top:1px solid var(--rule);border-left:1px solid var(--rule);
  margin-top:clamp(1.6rem,4vh,2.4rem)}
.spec__c{background:#fff;padding:clamp(.95rem,2.4vw,1.25rem);
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.spec__c--w2{grid-column:span 2}
.spec__c--w4{grid-column:span 4}
/* 幅 2 のセルの縦積み（product.js が作る）。左右の列の下端を揃えるため最後のセルを伸ばす */
.spec__col{grid-column:span 2;display:flex;flex-direction:column;min-width:0}
.spec__col>.spec__c{grid-column:auto}
.spec__col>.spec__c:last-child{flex:1}

/* セル内で「含まれないもの」を下に畳む */
.spec__x{margin-top:clamp(.9rem,2.2vh,1.2rem);padding-top:clamp(.9rem,2.2vh,1.2rem);
  border-top:1px solid var(--rule)}
.spec .spec__k--in{margin-bottom:.35rem}
/* 住所などが端まで伸びて読みにくくならないように */
.spec__l,.spec .itin{max-width:46ch}
/* 料金だけ地を反転して視線の終点にする */
.spec__c--pay{background:#000}
.spec .spec__k{margin:0 0 .45rem;font-size:var(--fs-util);letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3)}
.spec__c--pay .spec__k{color:rgba(255,255,255,.72)}
.spec .spec__v{margin:0;line-height:1.25;color:var(--ink);
  font-size:clamp(1.25rem,1.05rem + .85vw,1.8rem);font-variant-numeric:tabular-nums}
.spec .spec__v--times{font-size:clamp(.95rem,.78rem + .62vw,1.4rem);letter-spacing:-.01em}
/* 択一であることを見せる区切り。数字より薄く、間を空ける */
.spec .spec__v--times i{font-style:normal;color:var(--ink-3);
  padding:0 .38em;font-size:.8em;vertical-align:.05em}
.spec .spec__v small{display:block;margin-top:.4rem;line-height:1.7;
  font-size:var(--fs-ddl);color:var(--ink-2);font-variant-numeric:normal}
.spec__c--pay .spec__v{color:#fff}
.spec__c--pay .spec__v small{color:rgba(255,255,255,.6)}

/* 箇条書き */
.spec__l{max-width:65ch;margin:0;padding:0;list-style:none}
.spec__l li{position:relative;padding-left:1.1rem;margin-bottom:.45rem;
  font-size:var(--fs-dd);line-height:1.85;color:var(--ink-2)}
.spec__l li::before{content:"";position:absolute;left:0;top:.85em;width:5px;height:1px;
  background:var(--ink-3)}
.spec__l li ul{margin:.35rem 0 .1rem;padding:0;list-style:none}
.spec__l li li{font-size:var(--fs-ddl);color:var(--ink-3);margin-bottom:.2rem}

@media(max-width:900px){
  .spec{grid-template-columns:repeat(2,minmax(0,1fr))}
  .spec__c--w4{grid-column:span 2}
}
@media(max-width:520px){
  .spec{grid-template-columns:minmax(0,1fr)}
  .spec__c--w2,.spec__c--w4{grid-column:span 1}
  .spec__col{display:contents}
}

/* ★注意: この規則は .pg p（0,1,1）に負ける。効いているのは letter-spacing と text-transform だけで、
   margin / font-size / color は本文（.pg p）と同じで出ている。切り出し前からそうなっていたので、
   見た目を変えないためにここでは直していない。小さなラベルとして出すなら .pg .addon__k に格上げする（阪田さん確認待ち） */
.addon__k{margin:1.5rem 0 .5rem;font-size:var(--fs-util);letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3)}
.addons--s .addon + .addon{margin-top:-1px}
.addons--s .addon{display:flex;align-items:flex-start;gap:.65rem;margin-top:0;
  padding:.85rem 1rem;border:1px solid var(--rule);cursor:pointer;max-width:38rem;min-height:44px}
.addons--s .addon input{margin:0;flex:none;width:22px;height:22px;accent-color:#111;
  margin-top:.15rem}
.addons--s .addon span{font-size:var(--fs-dd);line-height:1.7;color:var(--ink)}
.addons--s .addon small{display:block;font-size:var(--fs-util);color:var(--ink-3);margin-top:.15rem}
/* 分類つきの追加オプション（P.addonLayout==='grouped'。sushi-dining）。分類の見出しと、説明・金額の3列で読ませる。
   上の簡素な形と同じ class 名を使うので、#addon の class（addons--s / addons--g）で規則を分ける */
/* 分類つきの見出し。上と同じく .pg p に負けるので、効くのは em の指定と letter-spacing / text-transform だけ */
.addon__k{margin:clamp(1.4rem,3.4vh,2rem) 0 .2rem;font-size:var(--fs-util);
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.addons--g .addon__k em{font-style:normal;text-transform:none;letter-spacing:.06em;color:var(--ink)}
/* 分類名。これも .pg p に負けて本文サイズで出ている（切り出し前と同じ。上の .addon__k の注意を参照） */
.addon__g{margin:1.1rem 0 .3rem;font-size:var(--fs-ddl);color:var(--ink-2)}
.addons--g .addon{display:flex;align-items:flex-start;gap:.85rem;
  padding:.75rem .9rem;border:1px solid var(--rule);margin-top:-1px;cursor:pointer;
  transition:border-color .2s,background-color .2s;min-height:44px}
.addons--g .addon:hover{background:rgba(0,0,0,.02)}
.addons--g .addon.is-on{border-color:var(--ink);position:relative;z-index:1}
.addons--g .addon input{margin:.15rem 0 0;flex:none;width:22px;height:22px;accent-color:#111}
.addons--g .addon__b{flex:1;min-width:0}
.addons--g .addon__t{display:block;font-size:var(--fs-dd);color:var(--ink);line-height:1.5}
.addons--g .addon__d{max-width:65ch;display:block;margin-top:.15rem;font-size:var(--fs-ddl);line-height:1.7;color:var(--ink-3)}
.addons--g .addon__p{flex:none;font-size:var(--fs-ddl);color:var(--ink);text-align:right;
  font-variant-numeric:tabular-nums;padding-top:.1rem}
@media(max-width:560px){
  .addons--g .addon{flex-wrap:wrap}
  .addons--g .addon__p{width:100%;text-align:left;padding-left:calc(17px + .85rem)}
}

/* ── 6. 会場写真：選んだカードの直下に小さく。押すと拡大 ── */

/* 拡大表示 */
.lb{position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:rgba(0,0,0,.94);padding:clamp(2.5rem,7vh,4rem) clamp(3rem,9vw,5rem)}
.lb[hidden]{display:none}
.lb__img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.lb__x,.lb__p{position:absolute;background:none;border:0;color:#fff;cursor:pointer;
  font-family:var(--body);font-weight:300;line-height:1;opacity:.7;
  transition:opacity .2s;display:grid;place-items:center}
.lb__x:hover,.lb__p:hover{opacity:1}
.lb__x{top:.6rem;right:.9rem;width:48px;height:48px;font-size:2rem}
.lb__p{top:50%;transform:translateY(-50%);width:48px;height:64px;font-size:2.4rem}
.lb__p--prev{left:.3rem}
.lb__p--next{right:.3rem}
.lb__n{position:absolute;bottom:1.1rem;left:0;right:0;margin:0;text-align:center;
  font-size:var(--fs-util);letter-spacing:.14em;color:rgba(255,255,255,.6)}

/* ── 7. 行程：縦のタイムライン ── */
.itin{margin:0;padding:0;list-style:none;max-width:52rem}
.itin li{position:relative;padding:0 0 1.5rem 1.9rem}
.itin li:last-child{padding-bottom:0}
.itin li::before{content:"";position:absolute;left:0;top:.42em;width:7px;height:7px;
  border:1px solid var(--ink);border-radius:50%;background:#fff}
.itin li:not(:last-child)::after{content:"";position:absolute;left:3px;top:calc(.42em + 9px);
  bottom:.2rem;width:1px;background:var(--rule)}
.itin__k{display:block;font-size:var(--fs-util);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:.2rem}
.itin__n{display:block;font-size:var(--fs-dd);color:var(--ink);line-height:1.6}
.itin__d{display:block;margin-top:.2rem;font-size:var(--fs-ddl);color:var(--ink-2);line-height:1.75}

/* ── 8. 予約バー（画面下に固定）── */
/* 隠れている間は visibility:hidden。transform だけだと画面外の帯の中のボタン・リンクが
   Tab 順に残り、見えない要素にフォーカスが飛ぶ（.panel と同じ方式。滑り出す間だけ表示を遅らせる） */
/* Cookie バーが出ている間は、その高さぶん上げる（--cc-h は product.js が実測して入れる）。
   これをしないと、初めて来た人は Cookie を閉じるまで予約に入れない。
   さらに悪いことに、予約ボタンの位置を押すと Cookie の「同意」が押される（2026-09-08 実測） */
.bar{position:fixed;left:0;right:0;bottom:var(--cc-h,0px);z-index:90;
  transition:bottom .35s var(--ease);
  background:rgba(0,0,0,.94);color:#fff;
  transform:translateY(100%);visibility:hidden;
  transition:transform .3s var(--ease),visibility 0s .3s}
.bar.on{transform:none;visibility:visible;transition-delay:0s}
.bar__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-block:clamp(1rem,2.2vh,1.4rem)}
.bar__t{min-width:0}
.bar__n{display:block;font-size:var(--fs-util);letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.55);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 金額は予約バーの主役。読み取れる大きさにする */
.bar__p{display:block;margin-top:.3rem;color:#fff;font-variant-numeric:tabular-nums;
  font-size:clamp(.95rem,.85rem + .45vw,1.25rem);line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar__b{flex:none;display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 clamp(1.1rem,3vw,2.2rem);background:#fff;color:#000;
  font-size:var(--fs-cta);letter-spacing:.12em;text-transform:uppercase;
  transition:opacity .2s}
.bar__b:hover{opacity:.82}
body{padding-bottom:0}
.pg--last{padding-bottom:clamp(7.5rem,16vh,10rem)}

/* ── 9. 他の体験 ── */
/* 商品が増えても2段目を作らない。ガイド一覧と同じ横スクロール。
   画面端まで抜いて、切れたカードでスクロールできることを示す */
.rel{display:flex;gap:clamp(.9rem,2vw,1.4rem);margin:clamp(1.2rem,3vh,1.8rem) 0 0;
  padding:0;list-style:none;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  /* 画面端まで抜いて、左右とも本文の内容線で始まり内容線で終わる（--wrap-edge は :root）。
     最後のカードが右の内容線で止まるよう scroll-padding も左右同じ値にする */
  margin-inline:calc(var(--wrap-edge) * -1);
  padding-inline:var(--wrap-edge);
  padding-bottom:.25rem;
  scroll-padding-inline:var(--wrap-edge)}
.rel::-webkit-scrollbar{display:none}
.rel li{flex:0 0 clamp(190px,20vw,272px);scroll-snap-align:start}
.rel a{display:block;color:var(--ink)}
.rel img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:#eee;
  transition:opacity .25s}
.rel a:hover img{opacity:.86}
/* カテゴリと商品名は同じ大きさの1行。カテゴリだけ色を落として区別する */
.rel__n{display:block;margin-top:.6rem;font-size:var(--fs-dd);line-height:1.6;color:var(--ink)}
.rel__n em{font-style:normal;color:var(--ink-3)}


/* 見出しの上から降りてくる縦線。
   「CHOOSE」と書く代わりに、視線を次の操作へ落とす。
   上端を透明にして、前のセクションから続いているように見せる */
.lead{display:block;width:1px;height:clamp(30px,4.5vh,52px);
  margin:0 0 clamp(.5rem,1.4vh,.85rem);
  background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,var(--ink) 100%);
  transform:scaleY(0);transform-origin:0 0;
  transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.lead.in{transform:scaleY(1)}
@media(prefers-reduced-motion:reduce){
  .lead{transform:none;transition:none}
}

@media(max-width:700px){
  .rel li{flex:0 0 min(58vw,230px)}
  .opt{flex:0 0 min(74vw,268px)}
}
@media(max-width:640px){
  .gs{gap:.8rem 1.2rem}
  .bar__b{padding:0 1rem}
}
@media(prefers-reduced-motion:reduce){ .bar{transition:none} }

/* ══ 未入力ゲート（D5・2026-09-06）══
   人数が決まるまで、会場カード（#opts）・詳細（#spec）・オプション（#addon）は高さを持たずに畳む。
   決まった瞬間に product.js の reveal() が .is-gated を外し .is-in を付け、
   会場カード → 詳細 → 見積りバーの順に 0.4s、8px 下から上へ・透明→不透明で開く。
   prefers-reduced-motion では先頭の * 規則（animation:none）で即時表示になる。
   .pg を付けて specificity を上げ、.opts / .spec の margin に順序に頼らず勝つ */
.pg .is-gated{max-height:0;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0;border:0;
  opacity:0;visibility:hidden;overflow:hidden;pointer-events:none}   /* border:0 … .spec の罫線 1px も残さない */
@keyframes gateIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.pg .is-in{animation:gateIn .4s var(--ease) both}

/* ══════════════════════════════════════════════
   10. 予約シート（見積りバーの Check availability を押すと開く）
   ─────────────────────────────────────────────
   ① 日付 → ② 開始時刻 → ③ 連絡先 → ④ 内容確認 → ⑤ 決済 → 完了。
   2026-09-07 組版を作り直した（阪田さん「行間や段落、配置、幅などまだ全然だめ」
   「全て微妙に左寄りで右に微妙な余白がある」）。考え方:
   ・格子は 1 本。パネルの内側余白（--sh-pad）で決まる内容幅に、カレンダー・時刻・入力欄・
     確認表・金額・ボタン列のすべてを左右いっぱいに揃える。max-width で左に寄せる塊を作らない
     （前は .cal 26rem／.slots 34rem／.bk__sum 40rem がそれぞれ別の右端を作っていた）
   ・パネル幅 640px ＝ 内容幅 576（日付セル 7 列 × 約 80px ＋ 隙間 6 × 2px）＋ 内側余白 32 × 2
   ・縦の間隔は 4px 刻みだけ（4/8/12/16/24/32/40）。ブロック間 24、段落間 16、注記の連続 8、
     ラベル→入力欄 8、入力欄→補足 8、項目の行（ラベル＋値）は 1 行 ≒ 36px（6 + 22.8 + 6 + 罫 1）
   ・行間は役割別: 見出し 1.2／本文 1.5／補足 1.4／入力欄 1.3
   ・文字は小さめ（デザイン基準）: 本文 14→15px、補足 12→13px、ラベル 11→12px（大文字＋字間）。
     入力欄だけ 16px 固定＝iPhone が入力時に画面を拡大するのを防ぐ（デザイン基準・原則 3）
   ・見出しは 3 重にしない: 頭は商品名＋「会場・人数」の 1 行だけ（商品名を繰り返す小見出しは出さない）。
     進行「Step n of 5 — Date」の 1 本が段の見出し（h3）で、段が変わるとここへ焦点が移る。
     焦点の印は左の細い縦線だけ（キーボード操作のときだけ出る）
   語彙は既存のもの（.opt の枠／.spec の境界線／見積りバーの tabular-nums）に合わせる。
   タップ 44px 以上、空き・エラーは色だけに頼らない。演出は最上部の @media(prefers-reduced-motion:reduce) で止まる。
   ★ここでは .sheet の中だけに効かせる（ページの .fld／shared-group の .cal と衝突させない。
     ページの .fld input は詳細度 (0,1,1) なので、ここは必ず .sheet を前に付けて (0,2,0) 以上にする）。
   ══════════════════════════════════════════════ */
.sheet{
  /* 文字：360px → 1440px で連続変化。傾き(vw) = (最大 − 最小) ÷ 1080 × 100、基準 = 最小 − 傾き × 3.6 */
  --sh-h:clamp(1.125rem, 1.0417rem + .3704vw, 1.375rem);     /* 18 → 22px  商品名（明朝） */
  --sh-money:clamp(1.125rem, 1.0417rem + .3704vw, 1.375rem); /* 18 → 22px  合計・支払額（商品名と同格） */
  --sh-body:clamp(.875rem, .8542rem + .0926vw, .9375rem);    /* 14 → 15px  本文・値・日付・時刻 */
  --sh-note:clamp(.75rem, .7292rem + .0926vw, .8125rem);     /* 12 → 13px  補足・注記・会場の 1 行 */
  --sh-label:clamp(.6875rem, .6667rem + .0926vw, .75rem);    /* 11 → 12px  ラベル（大文字・字間 .12em）＝ --fs-util と同値 */
  --sh-input:16px;                                            /* 固定。下げない（iOS の自動拡大） */
  /* 寸法 */
  --sh-pad:clamp(1rem, 2.5vw, 2rem);   /* 内側余白 16px（〜640px）→ 32px（1280px〜）。左右の「線」はこれ 1 本 */
  --sh-tap:44px;                       /* 押せる最小の高さ・幅（Apple HIG） */
  --sh-col:11rem;                      /* 確認表のラベル列（176px）。最長の「Confirmation sent to」が 1 行で収まる */
  position:fixed;inset:0;z-index:220;display:grid;background:rgba(0,0,0,.55)}
.sheet[hidden]{display:none}          /* display:grid が hidden に勝つので明示する */
.sheet__p{display:flex;flex-direction:column;overflow:hidden;
  width:100%;height:100%;max-height:100%;background:#fff;color:var(--ink);
  font-size:var(--sh-body);line-height:1.5}
/* 白地のパネル。ページ全体の :focus-visible は白い線なので、中では黒に戻す */
.sheet :focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media(min-width:700px){
  /* 周りの暗い余白 16 → 32px（高さ 800px で 24px）。④ 内容確認が 800px の画面で切れずに収まる高さ（743px）を確保する */
  .sheet{place-items:center;padding:clamp(1rem,3vh,2rem)}
  .sheet__p{width:min(640px,100%);height:auto;max-height:100%;
    border:1px solid rgba(0,0,0,.2);box-shadow:0 24px 60px rgba(0,0,0,.28)}
}

/* ── 頭：商品名（明朝）＋ 会場・人数の 1 行 ＋ 閉じる ── */
.sheet__hd{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:16px var(--sh-pad);border-bottom:1px solid var(--rule)}
.sheet__hi{flex:1;min-width:0;padding-top:8px}    /* 商品名の行の中心を閉じるボタン（44px）の中心に合わせる */
.sheet__t{margin:0;font-family:var(--display);font-weight:400;font-size:var(--sh-h);line-height:1.2}
.sheet__sub{margin:4px 0 0;font-size:var(--sh-note);line-height:1.4;color:var(--ink-2)}
/* 閉じる。枠は付けない（頭の中で目立つのは商品名だけにする）。文字の右端を内容幅の線に載せる */
.sheet__x{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:var(--sh-tap);
  margin-right:-8px;padding:0 8px;background:none;border:0;color:var(--ink-2);cursor:pointer;
  font-family:var(--body);font-weight:300;font-size:var(--sh-label);line-height:1.2;letter-spacing:.14em;
  text-transform:uppercase;transition:color .2s}
.sheet__x:hover{color:var(--ink)}
.sheet__x span{font-size:1.25rem;line-height:1}
/* ── 進行「Step 2 of 5 — Start time」＝段の見出し（h3）。数字は等幅で揺れないように ── */
.sheet__step{margin:0;padding:10px var(--sh-pad);border-bottom:1px solid var(--rule);
  font-family:var(--body);font-weight:300;font-size:var(--sh-label);line-height:1.2;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);font-variant-numeric:tabular-nums}
/* 段が変わるとここへ焦点が移る。枠で囲わず、左端の細い縦線だけ（キーボード操作のときだけ見える） */
.sheet .sheet__step:focus{outline:none}
.sheet .sheet__step:focus-visible{outline:none;box-shadow:inset 3px 0 0 var(--ink)}
.sheet__b{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:24px var(--sh-pad)}
/* ── 足：知らせ ＋ ボタン列（左 Back・右 主ボタン）── */
.sheet__ft{border-top:1px solid var(--rule);padding:16px var(--sh-pad);
  padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
.sheet__msg{margin:0 0 12px;font-size:var(--sh-note);line-height:1.4;color:var(--ink)}
.sheet__msg:empty{display:none}
.sheet__btns{display:flex;align-items:center;justify-content:space-between;gap:16px}

/* ── 中身の語彙 ── */
.bk__k{margin:0;font-family:var(--body);font-weight:300;font-size:var(--sh-label);line-height:1.2;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}       /* 完了画面の小見出し（What happens next） */
.bk__lead{margin:0;font-size:var(--sh-body);line-height:1.5}
.bk__note{margin:0;font-size:var(--sh-note);line-height:1.4;color:var(--ink-2)}
.bk__pick{margin:0;font-size:var(--sh-body);line-height:1.5}
.bk__ml{border-bottom:1px solid rgba(0,0,0,.25)}
.bk__b{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;
  background:none;border:1px solid var(--field);color:var(--ink);cursor:pointer;
  font-family:var(--body);font-weight:300;font-size:var(--fs-cta);line-height:1.2;
  letter-spacing:.12em;text-transform:uppercase;font-variant-numeric:tabular-nums;   /* 支払いボタンには金額が入る */
  transition:border-color .2s,opacity .2s}
.bk__b:hover{border-color:var(--ink)}
.bk__b--go{background:var(--ink);border-color:var(--ink);color:#fff}
.bk__b--go:hover{opacity:.85}
/* 押せないボタン。形は同じまま薄くする（消さない＝どこにあるか分かる） */
.bk__b:disabled{opacity:.4;cursor:not-allowed}
.bk__b--go:disabled:hover{opacity:.4}

/* ── ① 日付。7 列を内容幅いっぱいに（PC で 1 セル ≒ 80 × 44px）。形は shared-group の .cal と同じ ── */
.sheet .cal{max-width:none}
.sheet .cal__h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.sheet .cal__h b{font-weight:300;font-size:var(--sh-body);line-height:1.2}
.sheet .cal__b{width:var(--sh-tap);height:var(--sh-tap);display:grid;place-items:center;cursor:pointer;background:none;
  border:1px solid var(--field);color:var(--ink);font-family:var(--body);font-weight:300;
  font-size:1.125rem;line-height:1;transition:border-color .2s}
.sheet .cal__b:hover:not(:disabled){border-color:var(--ink)}
.sheet .cal__b:disabled{opacity:.3;cursor:default}
.sheet .cal__g{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.sheet .cal__w{display:grid;place-items:center;min-height:24px;
  font-size:var(--sh-label);line-height:1.2;letter-spacing:.08em;color:var(--ink-3)}
.sheet .cal__d{position:relative;min-height:var(--sh-tap);display:grid;place-items:center;cursor:pointer;
  background:none;border:1px solid transparent;color:var(--ink);font-family:var(--body);font-weight:300;
  font-size:var(--sh-body);line-height:1;font-variant-numeric:tabular-nums;transition:border-color .2s,background-color .2s}
.sheet .cal__d:hover:not(:disabled){border-color:var(--ink-3)}
.sheet .cal__d:disabled{color:var(--ink-3);opacity:.45;cursor:default}
.sheet .cal__d.is-on{background:var(--ink);color:#fff;border-color:var(--ink)}
/* 空きのある日には下に点（選択中は白い点）。残席ゼロは打ち消し線＝色だけに頼らない */
.sheet .cal__d.has::after{content:"";position:absolute;bottom:5px;left:50%;width:4px;height:4px;
  margin-left:-2px;border-radius:50%;background:currentColor}
.sheet .cal__d.is-out{text-decoration:line-through}

/* ── ② 開始時刻。縦に積むカードではなく、等幅のボタンを 1 行に（6rem 未満になるなら折り返す）。
   1 段目に時刻、2 段目に所要と空き ── */
.sheet .slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(6rem,1fr));gap:8px;max-width:none}
.sheet .slot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:4px 8px;
  min-height:56px;margin:0;padding:12px;background:none;border:1px solid var(--field);color:var(--ink);cursor:pointer;
  text-align:center;font-family:var(--body);font-weight:300;line-height:1.2;transition:border-color .2s}
.sheet .slot:hover:not(:disabled){border-color:var(--ink)}
.sheet .slot.is-on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.sheet .slot:disabled{opacity:.45;cursor:not-allowed}
.sheet .slot:disabled .slot__t{text-decoration:line-through}
.sheet .slot__t{flex:0 0 100%;min-width:0;font-size:var(--sh-body);font-variant-numeric:tabular-nums}
.sheet .slot__n,.sheet .slot__s{flex:none;font-size:var(--sh-label);letter-spacing:.04em;color:var(--ink-3);text-align:center}
.sheet .slot.is-on .slot__s{color:var(--ink)}

/* ── ③ 連絡先（ラベルは常に見える。placeholder だけにしない）── */
.sheet .bk__form{display:grid;gap:16px;max-width:none}
.sheet .fld{display:block;min-width:0}            /* ページの .fld（grid; gap .4rem）を打ち消し、間隔はここで決める */
.sheet .fld__k{display:block;margin:0 0 8px;font-size:var(--sh-label);line-height:1.2;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-2)}
.sheet .fld__k em{font-style:normal;text-transform:none;letter-spacing:.04em;color:var(--ink-3);margin:0}
/* 1 行にまとめる項目（氏名の First / Last。2026-09-08）。
   幅で列数が決まる＝広い画面は 2 列、狭い画面は縦積み。並びと間隔はフォームの gap と同じ 16px。
   ★閾値を媒体（スマホ／PC）ではなく「1 欄に 12rem 取れるか」で決めるので、
     パネル幅を変えても・文字を大きくしても崩れない */
.sheet .fld__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:16px}
.sheet .fld__i{display:block;width:100%;min-height:var(--sh-tap);margin:0;padding:10px 12px;background:#fff;
  border:1px solid var(--field);border-radius:0;color:var(--ink);font-family:var(--body);font-weight:300;
  font-size:var(--sh-input);line-height:1.3;transition:border-color .2s}
.sheet .fld__i:hover{border-color:var(--field-h)}
.sheet .fld__i:focus,.sheet .fld__i:focus-visible{outline:none;border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.sheet textarea.fld__i{min-height:88px;resize:vertical}
.sheet .fld__i--t{max-width:12rem;font-variant-numeric:tabular-nums}
/* 電話は「国の選択」＋「前置き（国番号）＋番号」の2部品（2026-09-08・仕様案 §8）。
   選ぶのは国番号ではなく国 ── +1 は米国とカナダ、+44 は英国と付属領で、番号だけでは国が定まらない。
   選択の見た目は他の入力欄とそろえる（appearance:none にしないと Safari が枠と地色を無視する）。
   右の三角は背景画像（外部ファイルを増やさないため data URI・矢印1つ） */
.sheet select.fld__i{appearance:none;-webkit-appearance:none;padding-right:36px;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23111' stroke-width='1.2'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;background-size:10px 6px}
.sheet .fld__tel{display:flex;align-items:stretch}
/* 前置き（+81）。押す場所ではないので地を敷いて入力欄と見分ける。枠は番号の欄と1本につなげる */
.sheet .fld__cc{flex:none;display:flex;align-items:center;min-width:3.5rem;min-height:var(--sh-tap);
  padding:0 12px;border:1px solid var(--field);border-right:0;background:#f4f4f4;color:var(--ink-2);
  font-size:var(--sh-input);line-height:1.3;font-variant-numeric:tabular-nums}
.sheet .fld__tel .fld__i{flex:1;min-width:0;font-variant-numeric:tabular-nums}
.sheet .fld__h{margin:8px 0 0;font-size:var(--sh-note);line-height:1.4;color:var(--ink-3)}
/* エラーは枠の太さ＋「!」の印＋文で伝える（色だけに頼らない）。太さは影で足す＝周りが動かない */
.sheet .fld.is-bad .fld__i{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.sheet .fld__e{display:flex;align-items:flex-start;gap:8px;margin:8px 0 0;
  font-size:var(--sh-note);line-height:1.4;color:var(--ink)}
.sheet .fld__e b{flex:none;display:grid;place-items:center;width:16px;height:16px;margin-top:1px;
  background:var(--ink);color:#fff;font-size:11px;font-weight:700;line-height:1}
/* ── ③の食事の質問（食事つきの商品だけ・2026-09-08）──
   Yes / No の 2 択（fieldset＋legend）と、Yes のときだけ開く自由記述。
   ★開閉は hidden の付け外し。.sheet .fld{display:block} は [hidden] より詳細度が高いので、
     ここで打ち消さないと「閉じている」はずの欄が出たままになる */
.sheet .fld[hidden]{display:none}
.sheet .diet{margin:0;padding:0;border:0;min-width:0}   /* fieldset の既定の枠と余白を落とす */
/* 問い（legend）。ここだけは大文字のラベルにしない ── 1 文の問いかけなので、
   ⑤の同意（.agree__k）と同じ「読ませる文」の語彙にする。legend の左右の食い込みも落とす */
.sheet .diet__q{display:block;padding:0;margin:0 0 12px;font-size:var(--sh-body);line-height:1.5;
  color:var(--ink)}
/* 選択肢。押せる範囲は枠ごと 44px 以上。選択中は丸印そのもの（形）で分かる＝色だけに頼らない。
   ★ページの .fld label（大文字・字間）が中に効くので、ここで打ち消す */
.sheet .diet__os{display:flex;flex-wrap:wrap;gap:8px 12px}
.sheet .diet__o{display:inline-flex;align-items:center;gap:10px;min-height:var(--sh-tap);
  min-width:6rem;padding:0 20px 0 14px;border:1px solid var(--field);cursor:pointer;
  font-size:var(--sh-body);line-height:1.5;letter-spacing:0;text-transform:none;
  color:var(--ink);transition:border-color .2s}
.sheet .diet__o:hover{border-color:var(--field-h)}
.sheet .diet__r{flex:none;width:20px;height:20px;margin:0;accent-color:var(--ink);cursor:pointer}
.sheet .diet.is-bad .diet__o{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
/* 小見出し（Food allergies…）。上のブロックとの間だけ 24 に開ける（16＋8） */
.sheet .bk__form > .bk__k{margin-top:8px}

/* ── ④ 内容確認・完了の表。ラベル列 ＋ 値列を同じベースラインに、行は罫で区切る（.spec と同じ境界線の作法）。
   1 行 ≒ 36px（6 + 15px×1.5 + 6 + 罫 1）── */
.sheet .bk__sum{margin:0;max-width:none;border-top:1px solid var(--rule)}
.sheet .bk__sum > div{display:grid;grid-template-columns:var(--sh-col) minmax(0,1fr);column-gap:24px;
  align-items:baseline;padding:6px 0;border-bottom:1px solid var(--rule)}
.sheet .bk__sum dt{margin:0;font-size:var(--sh-label);line-height:1.5;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3)}
.sheet .bk__sum dd{margin:0;min-width:0;font-size:var(--sh-body);line-height:1.5;color:var(--ink);overflow-wrap:anywhere}
/* 内訳と合計。金額は右端＝内容幅の右の線に揃える */
.sheet .bk__rows{margin:0;display:block;max-width:none}
.sheet .bk__rows > div{display:flex;justify-content:space-between;align-items:baseline;gap:24px;
  padding:6px 0;font-size:var(--sh-note);line-height:1.5;color:var(--ink-2)}
.sheet .bk__rows dt,.sheet .bk__rows dd{margin:0}
.sheet .bk__rows dd{flex:none;font-variant-numeric:tabular-nums}
.sheet .bk__rows div.is-sub{padding-top:0;padding-left:16px;color:var(--ink-3)}
.sheet .bk__rows div.is-sum{margin-top:8px;padding:12px 0 0;border-top:1px solid var(--ink);color:var(--ink);
  font-size:var(--sh-money);line-height:1.2}
@media(max-width:559px){
  /* 狭い画面はラベルの下に値（会場名・メールが 1 行で入らないため）。罫の区切りは同じ */
  .sheet .bk__sum > div{grid-template-columns:minmax(0,1fr);row-gap:2px;padding:8px 0}
}

/* ── ⑤ 決済（2026-09-07 第2版）──
   本番では #kt-card の中身を Stripe Elements（Stripe の iframe）に差し替える。
   ラベル・並び・余白はそのまま使えるようにしてある。
   予約 API に繋がっていない間はカード欄が disabled になり、上に「Preview」の断り書きが出る */
.sheet .pay__due{display:flex;align-items:baseline;justify-content:space-between;gap:24px;max-width:none;
  margin:0;padding:0 0 12px;border-bottom:1px solid var(--rule)}
.sheet .pay__due span{font-size:var(--sh-label);line-height:1.2;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.sheet .pay__due b{font-weight:300;font-size:var(--sh-money);line-height:1.2;font-variant-numeric:tabular-nums}
/* 断り書き。枠と「!」の印で伝える（色だけに頼らない）。エラーの .fld__e と同じ語彙 */
.sheet .pay__prev{display:flex;align-items:flex-start;gap:10px;max-width:none;margin:0;
  padding:12px 16px;border:1px solid var(--ink);background:#f7f7f7;
  font-size:var(--sh-note);line-height:1.4;color:var(--ink)}
.sheet .pay__prev b{flex:none;display:grid;place-items:center;width:16px;height:16px;margin-top:1px;
  background:var(--ink);color:#fff;font-size:11px;font-weight:700;line-height:1}
.sheet .card{display:grid;gap:16px;max-width:none}
.sheet .card__two{display:grid;grid-template-columns:1fr 1fr;gap:16px}   /* 有効期限と CVC。狭い画面でも 2 列のまま幅いっぱい */
/* 入力できない状態は、地の色＋薄い文字＋カーソルの3つで示す（枠の色だけに頼らない） */
.sheet .fld__i:disabled{background:#f4f4f4;border-color:var(--rule);color:var(--ink-3);
  -webkit-text-fill-color:var(--ink-3);opacity:1;cursor:not-allowed}
.sheet .fld__i:disabled::placeholder{color:var(--ink-3);opacity:1}
/* キャンセル規定の段階表（2026-09-08）。同意のチェックの★上に置く
   ── 同意ボタンを押す内容が、その画面に無いのはおかしいため。
   値は 01_マスター/01_rules.toml の [cancel] → master.js（ここには率も時期も書かない）。
   行の作りは④の内訳（.bk__rows）と同じ語彙: 左に時期、右に率、罫で区切る */
.sheet .cxl{margin:0;display:block;max-width:none;border-top:1px solid var(--rule)}
.sheet .cxl > div{display:flex;justify-content:space-between;align-items:baseline;gap:24px;
  padding:6px 0;border-bottom:1px solid var(--rule);font-size:var(--sh-note);line-height:1.5;color:var(--ink-2)}
.sheet .cxl dt,.sheet .cxl dd{margin:0}
.sheet .cxl dd{flex:none;color:var(--ink);font-variant-numeric:tabular-nums}
/* 同意。チェック箱は 22px、押せる範囲（ラベル）は 44px 以上 */
.sheet .agree{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 12px;align-items:center;
  max-width:none;padding-top:16px;border-top:1px solid var(--rule)}
.sheet .agree__b{width:22px;height:22px;margin:0;accent-color:var(--ink);cursor:pointer}
.sheet .agree__k{min-height:var(--sh-tap);display:flex;align-items:center;cursor:pointer;
  font-size:var(--sh-body);line-height:1.5;color:var(--ink)}
.sheet .agree .fld__h,.sheet .agree__why{grid-column:2;margin:0}
.sheet .agree__why{margin-top:8px;font-size:var(--sh-note);line-height:1.4;color:var(--ink)}
.sheet .agree__why[hidden]{display:none}
/* ── 完了画面 ── */
.sheet .done__ref{font-weight:400;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.sheet .done__paid{font-variant-numeric:tabular-nums}
.sheet .done__next{margin:0;padding-left:20px;max-width:none;display:grid;gap:8px;
  font-size:var(--sh-note);line-height:1.4;color:var(--ink-2)}
/* ── 中身の縦のリズム（節の最後に置く＝上の部品の margin:0 より後に効かせる。詳細度も (0,2,0) に揃える）──
   直下のブロック間 24、注記は 16、注記の連続は 8、小見出し→中身は 12、日付の行→時刻の選択肢は 12 */
.sheet .sheet__b > *{margin-top:0;margin-bottom:0}
.sheet .sheet__b > * + *{margin-top:24px}
.sheet .sheet__b > * + .bk__note,.sheet .sheet__b > * + .bk__pick{margin-top:16px}
.sheet .sheet__b > .bk__note + .bk__note{margin-top:8px}
.sheet .sheet__b > .bk__note + .slots{margin-top:12px}
.sheet .sheet__b > .bk__lead + *{margin-top:16px}
.sheet .sheet__b > .bk__k + *{margin-top:12px}
/* シートを開いている間はクッキーバーを隠す（画面下で重なるため）。閉じたら戻る */
.cc.is-away{display:none}

/* ══════════════════════════════════════════════════════════════
   【案 B】Bokun の「カレンダーのみ」ウィジェットを当社のシートの器に入れて置く
   （2026-09-08 試作 → 09-10 既定。当社のシートは ?book=ours）
   ★中身は別オリジンの iframe なので、ここの CSS は中まで届かない。
     色と書体は Bokun 側の Theme に入れる（00_書類/資料/Bokun画面のCSS.md §8）。
   ══════════════════════════════════════════════════════════════ */
/* 頭の 2 行目: 目安の断り＋追加は Checkout で（#bknH）。1 行目（会場・人数）より少し空ける */
.sheet__sub.bkn__hint{margin-top:8px;max-width:60ch}
/* 左右の余白は当社の器が持つ（Theme v5 でウィジェット側の余白を 0 にしているため、器が 0 だと文字が端に付く。
   阪田さん 2026-09-10「全幅になってて文字列の両端に余白がない」）。頭の商品名と同じ線（--sh-pad）に揃える */
.sheet__b.bkn__b{padding:12px var(--sh-pad) 24px}
/* 高さはローダー（iframe-resizer）が中身に合わせる。読み込み中の跳ねを抑える最低値だけ置く */
.bkn{min-height:520px}
.bkn iframe{display:block;width:100%;border:0}
/* Bokun が本文の末尾に足す買い物かごの浮き輪。1商品ずつ買う作りなので出さない */
#bokun-widgets-cart{display:none !important}
/* ── 箱の大きさは一定にする（阪田さん 2026-09-10「常に同じ大きさ、一定にできないの？」）。
   中身（カレンダー → 日付を選ぶと時刻と合計 → Checkout のモーダル）が変わっても、白い箱は同じ位置・同じ大きさ。
   700px 以上: 幅 640・高さは画面いっぱい（周りの余白 clamp(1rem,3vh,2rem)）。中身が長ければ本文（.sheet__b）がスクロールする。
   700px 未満: 画面いっぱい（.sheet の既定のまま）。 */
@media(min-width:700px){
  .sheet--bkn .sheet__p{height:100%}
}
/* ── Bokun の Checkout モーダル（ローダーが body の末尾の #bokun-widgets-root に作る）を、当社のシートと同じ箱に収める。
   素の状態（2026-09-10 ローダー本体で確認）: 覆いは画面全体（黒 70%・flex で中央寄せ）、箱は幅 1300px、iframe は min-height 100vh
   → 画面いっぱいに広がり、文が横に伸びる（阪田さん「文字列が横いっぱいに広がりすぎ」）。
   覆いの display（flex / none）はローダーが切り替えるので触らない。当社のシートは開いたままなので、覆いは透明でよい。
   iframe の高さはローダー（iframe-resizer）が中身に合わせて inline で書くが、!important で箱いっぱいに固定し、中で縦にスクロールさせる。
   覆いの直下の div には安定した id が無い（styled-components の class）。買い物かごの包み以外の直下の div を覆いとみなす。 */
#bokun-widgets-root > div:not(.bokun-widgets-cart-wrap){background:transparent !important;box-sizing:border-box;padding:0}
#bokun-modal-container{width:100% !important;max-width:none !important;height:100% !important;margin:0 !important;
  background:#fff;overflow:hidden}
#bokun-modal-iFrame{display:block;width:100% !important;height:100% !important;min-height:0 !important;max-height:none !important}
@media(min-width:700px){
  #bokun-widgets-root > div:not(.bokun-widgets-cart-wrap){padding:clamp(1rem,3vh,2rem)}
  #bokun-modal-container{width:min(640px,100%) !important;
    border:1px solid rgba(0,0,0,.2);box-shadow:0 24px 60px rgba(0,0,0,.28)}
}


/* ══════════════════════════════════════════════════════════════
   【問い合わせシート】2026-09-11。当社シートの箱・入力欄・カレンダー・時刻の部品を使い、足りない所だけ足す。
   シートは body 直下に出る（.pg の外）ので、.pg の規則に負ける心配は無い
   ══════════════════════════════════════════════════════════════ */
@media(min-width:700px){
  .sheet--eq .sheet__p{height:100%}   /* 箱の大きさを一定に（Bokun のシートと同じ） */
}
.sheet--eq .bk__lead{margin:0 0 1rem}
.eq__set{border:0;margin:0 0 1.4rem;padding:0;min-width:0}
.eq__set legend{padding:0;margin:0 0 .5rem}
.eq__set[disabled]{opacity:.45}
.eq__opt{display:flex;align-items:flex-start;gap:.7rem;padding:.75rem 0;border-top:1px solid var(--rule);cursor:pointer}
.eq__set .eq__opt:first-of-type,.eq__opt--leave{border-top:0}
.eq__opt input{flex:none;margin:.2rem 0 0;width:18px;height:18px;accent-color:var(--ink)}
.eq__ot{flex:1;min-width:0;color:var(--ink)}
.eq__ot small{display:block;margin-top:.15rem;font-size:var(--sh-note);line-height:1.5;color:var(--ink-3)}
.eq__op{flex:none;max-width:45%;font-size:var(--sh-note);line-height:1.5;color:var(--ink-2);text-align:right;font-variant-numeric:tabular-nums}
.eq__area{margin:.9rem 0 .45rem;font-size:var(--sh-label);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.eq__chips{display:flex;flex-wrap:wrap;gap:.5rem}
.eq__chip{min-height:var(--sh-tap);padding:0 .95rem;background:#fff;border:1px solid var(--field);color:var(--ink);
  font-family:var(--body);font-weight:300;font-size:var(--sh-body);cursor:pointer;transition:border-color .2s}
.eq__chip:hover{border-color:var(--ink)}
.eq__chip.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.eq__chip:disabled{cursor:default;border-color:var(--rule)}
.eq__cnt{margin-left:.5rem;font-style:normal;text-transform:none;letter-spacing:0;color:var(--ink-3)}
.eq__est{margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--rule)}
.eq__rows{margin:.5rem 0 .6rem;display:grid;gap:.4rem}
.eq__rows div{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.eq__rows dt{margin:0;color:var(--ink-2)}
.eq__rows dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}
.eq__rows .is-sum{margin-top:.2rem;padding-top:.5rem;border-top:1px solid var(--rule)}
.eq__rows .is-sum dt{color:var(--ink)}
.eq__rows .is-sum dd{font-size:var(--sh-money)}
.eq__rows--rv div{justify-content:flex-start}
.eq__rows--rv dt{flex:none;width:var(--sh-col);color:var(--ink-3)}
.eq__rows--rv dd{text-align:left;min-width:0;overflow-wrap:anywhere}
.sheet--eq .pf{border-bottom:0}
.sheet--eq .pf__d{display:block;margin-top:.15rem;font-size:var(--sh-note);line-height:1.6;color:var(--ink-3)}
/* 狭い幅（≤640px）でカウンターのある出演者の行は、1 行目いっぱいに名前と説明、2 行目にカウンターと金額。
   横に並べたままだと説明が 1 語ずつ折り返す（2026-09-11 390px の撮影で発覚）。カウンターの無い行（1 included）は横並びのまま */
@media(max-width:640px){
  .sheet--eq .pf--cnt{flex-wrap:wrap;align-items:center;row-gap:.5rem}
  .sheet--eq .pf--cnt .pf__n{flex:1 1 100%}
  .sheet--eq .pf--cnt .pf__p--in{flex:1;width:auto;text-align:right}
}
/* 広い幅（≥641px）: 金額の欄を同じ幅にして、カウンターの位置を行どうしで縦に揃える。
   「+¥60,600 each」と「1 included, +¥60,600 each extra」で長さが違い、カウンターが左右にずれた（2026-09-11 1280px の撮影で発覚）。
   15em は最長の「1 included, +¥60,600 each extra」（実測 約 12.5em）に余裕を足した幅 */
@media(min-width:641px){
  .sheet--eq .pf--cnt .pf__p--in{flex:0 0 15em}   /* カウンターの無い行（1 included）は固定しない。固定すると説明の最後の 1 語だけが次の行に落ちた */
}
.eq__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Tailor-Made: 必ず見たい場所を探す欄・時間を超えそうな札・所要の目安（設計案 §7-9。2026-10-01）。白黒の決まりに合わせ、超えそうは点線と ! で示す */
.sheet .eq__q{width:100%;margin:0 0 .7rem}   /* .sheet .fld__i（0,2,0）の margin に負けないよう同じ強さで後に書く（2026-10-01 撮影で札が欄に貼り付いていた） */
.sheet .eq__set > .bk__note{margin:.55rem 0 0}   /* 札のすぐ下の注意書き（運賃は含まない）に間を空ける */
.eq__chip[hidden]{display:none}
.eq__chip--fixed{display:inline-flex;align-items:center;cursor:default}
.eq__chg{min-height:var(--sh-tap);padding:0 .6rem;background:none;border:0;color:var(--ink-2);font-family:var(--body);
  font-size:var(--sh-note);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.eq__chg:hover{color:var(--ink)}
.eq__chips--more .eq__chip:not(.is-on){color:var(--ink-2);border-style:dashed}
.eq__time{margin:0 0 1.4rem;padding:.9rem 0 0;border-top:1px solid var(--rule)}
.eq__tl{margin:0 0 .45rem;color:var(--ink);font-size:var(--sh-body);font-variant-numeric:tabular-nums}
.eq__tl span{color:var(--ink-3)}
.eq__bar{height:6px;background:var(--rule);overflow:hidden}
.eq__bar i{display:block;height:100%;background:var(--ink)}
.eq__time .fld__e{margin:.6rem 0 0}
.eq__time .bk__note{margin:.5rem 0 0}
@media(max-width:520px){
  .eq__rows--rv div{flex-direction:column;gap:.1rem}
  .eq__rows--rv dt{width:auto}
  .eq__op{max-width:40%}
}

/* スマホで指が押しやすい高さ（36px）を、フッターの問い合わせ・規約のリンクとロゴにも。トップと同じ指定で、トップと同じく最後に置く（2026-10-03） */
@media (max-width:768px){
  .ft__bar a,.ct__direct a,.ft__ways a{display:inline-flex;align-items:center;min-height:36px}
  .brand{display:inline-flex;align-items:center;min-height:36px}
}