/* ===========================================================
   せかいの恐竜・ワンダーランド — デザイントークン
   旧サイト（Manus版）から実測した値をそのまま踏襲
   =========================================================== */
:root{
  /* 地と文字 */
  --ground:      oklch(0.07 0.005 280);
  --ground-deep: oklch(0.04 0 0);
  --panel:       oklch(0.11 0.006 280);
  --raised:      oklch(0.145 0.007 280);
  --ink:         oklch(0.96 0.005 90);
  --ink-2:       oklch(0.72 0.008 280);
  --ink-3:       oklch(0.55 0.01 280);
  --ink-4:       oklch(0.40 0.01 280);

  /* 金（ブランドアクセント） */
  --gold:        oklch(0.72 0.12 80);
  --gold-lt:     oklch(0.82 0.10 80);
  --gold-dk:     oklch(0.52 0.10 75);
  --gold-grad:   linear-gradient(135deg,#8A5F18 0%,#CC9C42 50%,#E6BD77 100%);
  --gold-line:   linear-gradient(90deg, var(--gold-dk), var(--gold), transparent);
  --gold-a20:    rgba(201,168,76,.20);
  --gold-a12:    rgba(201,168,76,.12);
  --gold-a08:    rgba(201,168,76,.08);

  /* サービス色 */
  --line-grad:   linear-gradient(135deg, oklch(0.45 0.18 150), oklch(0.65 0.18 150));
  --ig:          #E1306C;
  --fb:          #1877F2;
  --x:           #000;

  /* 意味色 */
  --hot:         oklch(0.68 0.19 30);
  --ok:          oklch(0.72 0.15 150);

  /* 罫線 */
  --line:        rgba(201,168,76,.20);
  --line-soft:   rgba(255,255,255,.09);

  /* 文字 */
  --display: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --body:    "Noto Sans JP", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
  --mono:    "Roboto Mono", ui-monospace, SFMono-Regular, monospace;

  /* 寸法 */
  --col: 1120px;
  --col-narrow: 760px;
  --pad: 20px;
  --r-s: 10px;
  --r-m: 16px;
  --r-l: 22px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--body);font-weight:400;line-height:1.8;
  font-size:15.5px;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--gold-lt)}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
hr{border:none;height:1px;background:var(--line-soft);margin:0}

/* ---------- レイアウト ---------- */
.wrap{max-width:var(--col);margin-inline:auto;padding-inline:var(--pad)}
.wrap-narrow{max-width:var(--col-narrow);margin-inline:auto;padding-inline:var(--pad)}
.sec{padding-block:clamp(56px,7vw,92px);position:relative;scroll-margin-top:74px}
.sec + .sec{border-top:1px solid var(--line-soft)}
.sec-alt{background:var(--ground-deep)}

/* ---------- 見出し ---------- */
.eyebrow{
  font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.32em;
  color:var(--gold);text-transform:uppercase;text-align:center;margin:0 0 14px;
}
.eyebrow-l{text-align:left}
h1,h2,h3,h4{font-family:var(--display);font-weight:900;text-wrap:balance;margin:0}
.h1{font-size:clamp(30px,5.6vw,58px);line-height:1.28;letter-spacing:.01em}
.h2{font-size:clamp(24px,3.6vw,38px);line-height:1.4;text-align:center;margin-bottom:14px}
.h2-l{text-align:left}
.h3{font-size:clamp(17px,2vw,21px);line-height:1.5}
.lede{
  max-width:64ch;margin:0 auto 46px;text-align:center;color:var(--ink-2);
  font-size:15px;line-height:2;
}
.lede-l{text-align:left;margin-inline:0}
.sec-head{margin-bottom:44px}

/* ---------- ボタン ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 30px;border-radius:999px;font-size:15px;font-weight:700;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  text-align:center;
}
.btn:hover{transform:translateY(-2px)}
.btn-gold{background:var(--gold-grad);color:#1A1206;box-shadow:0 8px 26px rgba(201,168,76,.26)}
.btn-gold:hover{color:#1A1206;box-shadow:0 12px 34px rgba(201,168,76,.38)}
.btn-ghost{border:1px solid var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--gold);background:var(--gold-a08);color:var(--ink)}
.btn-line{background:var(--line-grad);color:#fff}
.btn-line:hover{color:#fff}
.btn-wide{width:100%;max-width:420px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* ---------- ヘッダー ---------- */
.site-head{
  position:sticky;top:0;z-index:80;background:rgba(8,8,8,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line-soft);
}
.site-head .inner{
  max-width:1400px;margin-inline:auto;padding:12px var(--pad);
  display:flex;align-items:center;gap:22px;
}
.brand{display:flex;flex-direction:column;line-height:1.2;flex-shrink:0}
.brand b{font-family:var(--display);font-size:17px;font-weight:900;color:var(--gold);letter-spacing:.04em}
.brand small{font-family:var(--mono);font-size:8.5px;letter-spacing:.22em;color:var(--ink-4)}
/* メニューは9項目。1440pxで1行に収まるように、広い画面だけ少し詰める
   （2026-09-11「資料」を追加したときに調整） */
.nav{display:flex;gap:15px;margin-left:6px;flex-wrap:wrap}
.nav a{font-size:13px;font-weight:500;color:var(--ink-2);white-space:nowrap}
/* メニュー9項目が1行に収まる幅を探して段階をつけています。
   1366px（よくあるノートPCの幅）でも1行に入るように、そこだけ少し詰めます。 */
@media(min-width:1330px){
  .nav{gap:12px;flex-shrink:0}
  .nav a{font-size:12.5px}
}
@media(min-width:1440px){
  .nav{gap:18px}
  .nav a{font-size:13.5px}
}
/* ヘッダーのボタンは2行に折り返さない（「コンテンツ 一覧」と割れて見栄えが悪いため） */
.head-cta .btn{white-space:nowrap}
.nav a:hover,.nav a[aria-current]{color:var(--gold)}
.head-cta{margin-left:auto;display:flex;gap:8px;align-items:center}
.head-cta .btn{padding:9px 18px;font-size:13px}
.burger{display:none;margin-left:auto;padding:8px;font-size:20px;color:var(--gold)}
@media(max-width:1100px){
  .nav{display:none}
  .head-cta{display:none}
  .burger{display:block}
  .site-head.open .nav{
    display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;
    background:rgba(8,8,8,.99);padding:16px var(--pad);gap:14px;border-bottom:1px solid var(--line);
  }
  .site-head.open .head-cta{
    display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;
    transform:translateY(190px);padding:0 var(--pad) 18px;background:rgba(8,8,8,.99);
  }
  .site-head.open .head-cta .btn{width:100%}
}

/* ---------- ヒーロー ---------- */
.hero{position:relative;overflow:hidden;padding-block:clamp(64px,10vw,120px) clamp(48px,7vw,84px);scroll-margin-top:74px}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.42}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,var(--ground) 4%,rgba(4,4,4,.55) 50%,rgba(4,4,4,.4) 100%);
}
.hero .wrap{position:relative;z-index:1}
.hero .h1{margin-bottom:22px;text-shadow:0 2px 24px rgba(0,0,0,.7)}
.hero-lede{max-width:60ch;color:var(--ink);font-size:16px;line-height:2.05;margin:0 0 26px;text-shadow:0 1px 12px rgba(0,0,0,.85)}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:30px;padding:0;list-style:none}
.tags li{
  font-size:12px;font-weight:700;padding:5px 14px;border-radius:999px;
  border:1px solid var(--line);color:var(--gold-lt);background:var(--gold-a08);
}
.btn-row-l{justify-content:flex-start}

/* ---------- カード群 ---------- */
.grid{display:grid;gap:18px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.card{
  background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--r-m);
  padding:28px 24px;transition:border-color .2s ease, transform .2s ease;
}
.card:hover{border-color:var(--line);transform:translateY(-3px)}
.card .no{
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.2em;
  color:var(--gold-dk);display:block;margin-bottom:10px;
}
.card .ic{font-size:34px;line-height:1;margin-bottom:12px}
.card h3{font-size:17px;color:var(--gold-lt);margin-bottom:9px}
.card p{margin:0;font-size:14px;color:var(--ink-2);line-height:1.95}
.card ul{margin:12px 0 0;padding-left:1.15em;font-size:13.5px;color:var(--ink-2);line-height:1.95}
.card li{margin-bottom:4px}

/* ---------- ステップ（体験フロー） ---------- */
.steps{display:grid;gap:14px;counter-reset:s}
.step{
  display:grid;grid-template-columns:64px 1fr auto;gap:18px;align-items:start;
  background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--r-m);padding:22px 24px;
}
.step .sn{
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--gold-dk);
  padding-top:4px;
}
.step h3{font-size:16px;margin-bottom:6px}
.step p{margin:0;font-size:14px;color:var(--ink-2)}
.step .dur{
  font-family:var(--mono);font-size:12px;color:var(--gold);white-space:nowrap;
  border:1px solid var(--line);border-radius:999px;padding:4px 12px;
}
@media(max-width:640px){
  .step{grid-template-columns:1fr;gap:8px}
  .step .dur{justify-self:start}
}

/* ---------- 数値（実績） ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px}
.stat{
  text-align:center;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-m);padding:26px 18px;
}
.stat b{
  display:block;font-family:var(--display);font-weight:900;
  font-size:clamp(30px,4.4vw,44px);line-height:1.1;
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  font-variant-numeric:tabular-nums;
}
.stat b span{font-size:.46em;margin-left:2px;-webkit-text-fill-color:var(--gold)}
.stat small{display:block;margin-top:8px;font-size:12.5px;color:var(--ink-3);letter-spacing:.06em}

/* ---------- 表（スペック・料金） ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line-soft);border-radius:var(--r-m)}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
th{
  text-align:left;font-size:11.5px;letter-spacing:.1em;color:var(--ink-3);font-weight:700;
  padding:13px 16px;background:var(--panel);border-bottom:1px solid var(--line);white-space:nowrap;
}
td{padding:13px 16px;border-bottom:1px solid rgba(255,255,255,.05);color:var(--ink-2)}
tr:last-child td{border-bottom:none}
td strong{color:var(--ink);font-weight:700}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}

/* 一覧表の1列目：写真つきのコンテンツ名。ここから各ページへ飛べる */
/* 横スクロールしても、どのコンテンツの行かを見失わないよう1列目を固定する */
.tablewrap:has(td.sp-first) th:first-child,
td.sp-first{
  position:sticky;left:0;z-index:2;
  background:var(--ground);
  box-shadow:1px 0 0 var(--line-soft);
}
.tablewrap:has(td.sp-first) th:first-child{background:var(--panel);z-index:3}
td.sp-first{padding:10px 16px;white-space:nowrap}
.sp-link{display:flex;align-items:center;gap:13px;color:var(--ink);font-weight:700;line-height:1.35}
a.sp-link{color:var(--ink);text-decoration:none}
a.sp-link:hover{color:var(--gold-lt)}
a.sp-link:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:8px}
.sp-th{
  flex:0 0 56px;width:56px;height:56px;border-radius:10px;overflow:hidden;
  background:var(--panel);border:1px solid var(--line-soft);
}
.sp-th img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease}
a.sp-link:hover .sp-th img{transform:scale(1.07)}
.sp-nm{white-space:nowrap}
a.sp-link .sp-nm{text-decoration:underline;text-decoration-color:rgba(255,255,255,.22);text-underline-offset:3px}
a.sp-link:hover .sp-nm{text-decoration-color:var(--gold-lt)}
@media(max-width:640px){
  /* 1列目を固定するので、狭い画面では名前を2行まで折り返して幅を抑える */
  td.sp-first{padding:9px 12px;white-space:normal;width:176px;min-width:176px;max-width:176px}
  .sp-th{flex:0 0 40px;width:40px;height:40px;border-radius:8px}
  .sp-link{gap:9px;font-size:12.5px;line-height:1.35}
  .sp-nm{white-space:normal;flex:1 1 auto;min-width:0}
}

/* ---------- 定義リスト（アクセス情報など） ---------- */
.dl{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-l);padding:8px 26px}
.dl .row{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--line-soft)}
.dl .row:last-child{border-bottom:none}
.dl dt{margin:0;color:var(--gold);font-weight:700;font-size:14px}
.dl dd{margin:0;color:var(--ink-2);font-size:14.5px}
@media(max-width:640px){.dl .row{grid-template-columns:1fr;gap:4px}}

/* ---------- プラン ---------- */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px;align-items:start}
/* プランが4つのときは 2×2 に。3＋1で最後の1枚が浮くのを防ぐ */
@media(min-width:900px){.plans-4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1300px){.plans-4{grid-template-columns:repeat(4,1fr)}}
.plan{
  background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--r-l);
  padding:30px 26px;position:relative;
}
.plan.rec{border-color:var(--gold);box-shadow:0 0 44px rgba(201,168,76,.14)}
.plan .badge{
  position:absolute;top:-11px;left:26px;background:var(--gold-grad);color:#1A1206;
  font-size:11px;font-weight:900;letter-spacing:.1em;padding:4px 14px;border-radius:999px;
}
.plan .pname{font-family:var(--display);font-size:20px;font-weight:900;margin:0 0 4px}
.plan .ptag{font-size:12.5px;color:var(--ink-3);margin:0 0 20px}
.plan .price{
  font-family:var(--display);font-weight:900;font-size:30px;line-height:1.2;
  color:var(--gold-lt);font-variant-numeric:tabular-nums;margin-bottom:2px;
}
.plan .price small{font-size:14px;color:var(--ink-3);font-weight:400;margin-left:4px}
.plan .breakdown{font-size:12.5px;color:var(--ink-3);line-height:1.9;margin:8px 0 20px}
.plan .spec{border-top:1px solid var(--line-soft);padding-top:16px;margin-top:16px;font-size:13.5px}
.plan .spec div{display:flex;justify-content:space-between;gap:12px;padding:5px 0;color:var(--ink-2)}
.plan .spec div b{color:var(--ink);font-weight:700;text-align:right}
.plan ul{margin:18px 0 0;padding-left:1.15em;font-size:13.5px;color:var(--ink-2);line-height:1.9}
.plan .btn{margin-top:22px;width:100%}

/* ---------- お客様の声 ---------- */
.voices{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.voice{
  background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--r-m);
  padding:28px 26px;position:relative;
}
.voice::before{
  content:"\201C";font-family:var(--display);font-size:56px;line-height:1;
  color:var(--gold-a20);position:absolute;top:14px;right:22px;
}
.voice .who{font-size:12px;color:var(--gold);font-weight:700;letter-spacing:.06em;margin-bottom:12px}
.voice p{margin:0 0 14px;font-size:14.5px;line-height:2}
.voice cite{font-style:normal;font-size:12.5px;color:var(--ink-3)}

/* ---------- ギャラリー ---------- */
.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;align-items:start}
.gal figure{margin:0;border-radius:var(--r-m);overflow:hidden;border:1px solid var(--line-soft);background:#000}
.gal img{display:block;width:100%;height:auto;object-fit:contain;background:#000;
  transition:transform .5s ease}
.gal figure:hover img{transform:scale(1.05)}
.gal figcaption{padding:12px 14px;font-size:12.5px;color:var(--ink-3);line-height:1.7}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin-inline:auto;display:grid;gap:10px}
.faq details{
  background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--r-m);
  overflow:hidden;
}
.faq details[open]{border-color:var(--line)}
.faq summary{
  padding:18px 52px 18px 22px;font-size:15px;font-weight:700;cursor:pointer;
  position:relative;list-style:none;line-height:1.7;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"＋";position:absolute;right:22px;top:50%;transform:translateY(-50%);
  color:var(--gold);font-size:17px;font-weight:400;
}
.faq details[open] summary::after{content:"−"}
.faq summary:hover{color:var(--gold-lt)}
.faq .a{padding:0 22px 20px;font-size:14.5px;color:var(--ink-2);line-height:2}
.faq .a p{margin:0 0 12px}
.faq .a p:last-child{margin-bottom:0}

/* ---------- 散文ブロック ---------- */
.prose{font-size:15px;line-height:2.05;color:var(--ink-2)}
.prose h3{color:var(--ink);margin:34px 0 12px;font-size:19px}
.prose h4{color:var(--gold-lt);margin:26px 0 8px;font-size:16px}
.prose p{margin:0 0 18px}
.prose ul,.prose ol{margin:0 0 18px;padding-left:1.3em}
.prose li{margin-bottom:7px}
.prose strong{color:var(--ink);font-weight:700}
.prose blockquote{
  margin:22px 0;padding:16px 22px;border-left:3px solid var(--gold);
  background:var(--gold-a08);border-radius:0 var(--r-s) var(--r-s) 0;
}
.prose blockquote p:last-child{margin-bottom:0}

/* ---------- 帯・注意書き ---------- */
.note{
  background:var(--gold-a08);border:1px solid var(--line);border-radius:var(--r-m);
  padding:18px 22px;font-size:14px;color:var(--ink-2);line-height:1.95;
}
.note strong{color:var(--gold-lt)}

/* ---------- CTA帯 ---------- */
.cta-band{
  background:var(--ground-deep);border-block:1px solid var(--line);
  padding-block:clamp(48px,6vw,76px);text-align:center;
}
.cta-band .h2{margin-bottom:12px}
.cta-band p{color:var(--ink-2);max-width:56ch;margin:0 auto 28px;font-size:15px}

/* ---------- フッター ---------- */
.site-foot{background:var(--ground-deep);border-top:1px solid var(--line);padding-block:56px 30px;font-size:13px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}
.site-foot h4{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--gold);
  font-weight:500;margin-bottom:14px;text-transform:uppercase;
}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin-bottom:8px}
.site-foot a{color:var(--ink-2);font-size:13px}
.site-foot a:hover{color:var(--gold)}
.foot-brand b{font-family:var(--display);font-size:18px;font-weight:900;color:var(--ink);display:block;margin-bottom:6px}
.foot-brand p{color:var(--ink-3);margin:0 0 16px;font-size:13px;line-height:1.9}
.foot-sns{display:flex;gap:12px}
.foot-sns a{
  width:36px;height:36px;border:1px solid var(--line-soft);border-radius:50%;
  display:grid;place-items:center;font-size:15px;
}
.foot-sns a:hover{border-color:var(--gold);background:var(--gold-a08)}
.foot-addr{color:var(--ink-3);line-height:2;font-size:12.5px;font-style:normal}
.foot-bottom{
  margin-top:44px;padding-top:22px;border-top:1px solid var(--line-soft);
  display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;justify-content:space-between;
  color:var(--ink-4);font-size:12px;
}
.foot-bottom nav{display:flex;flex-wrap:wrap;gap:16px}
.foot-bottom a{font-size:12px;color:var(--ink-4)}

/* ---------- 印刷（LPを提案書として使う） ---------- */

/* ---- フォーム：ボット避け（画面には出さない） ---- */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* ---- 送信完了の表示 ---- */
.cform-done{background:var(--panel);border:1px solid var(--gold);border-radius:var(--r-l);padding:44px 28px;text-align:center}
.cform-done .cd-icon{font-size:40px;margin:0 0 10px;line-height:1}
.cform-done .cd-h{font-family:var(--display);font-weight:900;font-size:21px;margin:0 0 10px;color:var(--gold)}
.cform-done .cd-b{margin:0 0 22px;color:var(--ink-2);font-size:14.5px;line-height:1.9}
.cform-done .btn-wide{margin:0 auto 12px;max-width:420px}
.cform-done .cd-note{margin:14px 0 0;color:var(--ink-3);font-size:12.5px;line-height:1.8}
.cform-done .cd-note a{color:var(--lime)}
.cform .err{background:rgba(255,107,74,.12);border:1px solid rgba(255,107,74,.42);color:#FFB4A2;border-radius:10px;padding:12px 15px;font-size:13.5px;margin:0 0 16px}

@media print{
  @page{size:A4;margin:14mm}
  /* 紙では固定列もサムネイルも不要 */
  td.sp-first,.tablewrap:has(td.sp-first) th:first-child{position:static;background:none;box-shadow:none}
  .sp-th{display:none}
  a.sp-link,a.sp-link .sp-nm{color:#111;text-decoration:none}
  .site-head,.site-foot,.no-print,.btn,.cta-band{display:none!important}
  body{background:#fff;color:#111;font-size:10.5pt;line-height:1.7}
  .sec{padding-block:14px;break-inside:avoid;border:none}
  .card,.plan,.voice,.stat,.step,.dl,.note{
    background:#fff;border:1px solid #bbb;break-inside:avoid;box-shadow:none;
  }
  .h1{font-size:20pt}.h2{font-size:15pt}.h3{font-size:12pt}
  .eyebrow{color:#8A5F18}
  .stat b{-webkit-text-fill-color:#8A5F18;background:none}
  .card h3,.plan .price,.voice .who{color:#8A5F18}
  .hero-bg{position:static;height:auto}
  .hero-bg img{opacity:1;max-height:70mm;object-fit:contain}
  .hero-bg::after{display:none}
  .faq details{border:1px solid #bbb}
  .faq details .a{display:block!important}
  a{color:#111;text-decoration:none}
  .prose,.card p,td,.dl dd{color:#333}
}


/* フッターの姉妹サイト案内（一般のお客様向けサイトへの導線） */
.foot-sister{
  margin:34px 0 0;padding:14px 16px;border:1px solid var(--line-soft);border-radius:12px;
  font-size:12.5px;line-height:1.9;color:var(--ink-2);text-align:center;
}
.foot-sister b{color:var(--ink)}
.foot-sister a{color:var(--gold-lt)}

/* ---------- 動画（クリックで読み込む軽量版） ---------- */
.vids{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:22px}
.vid{margin:0}
.vlabel{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--gold);
  margin:0 0 10px;text-transform:uppercase;
}
.vframe{
  position:relative;aspect-ratio:16/9;border-radius:var(--r-m);overflow:hidden;
  border:1px solid var(--line);background:#000;cursor:pointer;display:block;
}
.vframe img{width:100%;height:100%;object-fit:cover;opacity:.85;transition:opacity .25s ease,transform .5s ease}
.vframe:hover img{opacity:1;transform:scale(1.03)}
.vframe iframe{width:100%;height:100%;border:0;display:block}
.vplay{
  position:absolute;inset:0;margin:auto;width:66px;height:66px;border-radius:50%;
  background:var(--gold-grad);display:grid;place-items:center;
  box-shadow:0 8px 28px rgba(0,0,0,.5);transition:transform .2s ease;
}
.vplay::after{
  content:"";border-style:solid;border-width:11px 0 11px 19px;
  border-color:transparent transparent transparent #1A1206;margin-left:5px;
}
.vframe:hover .vplay{transform:scale(1.09)}
.vid figcaption{margin-top:12px;font-size:13px;color:var(--ink-3);line-height:1.85}
/* 埋め込みが使えない環境（ローカルファイルなど）用の逃げ道 */
/* 動画の下の「大きく見る」。再生を始めるまでは hidden で出しません。
   常設の外部リンクを置くと、再生する前にYouTubeへ出て行かれてしまうためです。 */
.vlink{margin:8px 0 0;font-size:12.5px;min-height:1.2em}

/* ---------- 集客クリエイティブ（ポスター＋動画を横に並べる） ----------
   どちらも縦長なので、2枚並べたときに高さがそろうようにしています。
   スマホでは縦に積み、ポスターが小さくなりすぎないよう幅を使います。 */
.pk2{display:grid;gap:22px;grid-template-columns:1fr;justify-items:center}
@media(min-width:820px){
  .pk2{grid-template-columns:1fr 1fr;gap:28px;align-items:start}
}
.pk-card{margin:0;width:100%;max-width:440px}
.pk-tag{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--gold);
  margin:0 0 10px;text-transform:uppercase;text-align:center;
}
.pk-shot{
  border-radius:var(--r-m);overflow:hidden;border:1px solid var(--line);
  background:#000;line-height:0;
}
.pk-shot img{width:100%;height:auto;display:block}
.pk-video{aspect-ratio:9/16}
.pk-card figcaption{
  margin-top:12px;font-size:13px;color:var(--ink-3);line-height:1.85;text-align:center;
}
.pk-items{margin-top:30px}

.vlink a{color:var(--ink-3);text-decoration:none;letter-spacing:.02em}
.vlink a:hover{color:var(--gold-lt);text-decoration:underline}
/* パソコンのファイルから開いたときだけ出る案内 */
.vlocal{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;
  height:100%;padding:18px;text-align:center;font-size:12.5px;line-height:1.7;color:var(--ink-2)}
.vlocal a{color:var(--gold-lt)}

/* ---------- チェックリスト ---------- */
.ticks{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:center}
.ticks li{font-size:13px;color:var(--ink-2)}
.ticks li::before{content:"✓";color:var(--gold);font-weight:700;margin-right:7px}

/* ---------- お問い合わせフォーム ---------- */
.cform{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-l);padding:30px 28px}
.cform .field{margin-bottom:18px}
.cform label{display:block;font-size:13px;font-weight:700;color:var(--ink-2);margin-bottom:7px}
.cform .req{color:var(--hot);margin-left:5px}
/* 「任意」バッジ。オプションメニューの .opt（カード）と名前がぶつかるので、
   ここで打ち消す。打ち消さないと枠と背景のついた大きな箱になってしまう。 */
.cform label .opt{display:inline;grid-template-columns:none;background:none;
  border:none;border-radius:0;overflow:visible;
  color:var(--ink-4);margin-left:7px;font-weight:400;font-size:11.5px}
.cform input,.cform textarea{
  width:100%;background:var(--raised);border:1px solid var(--line-soft);border-radius:var(--r-s);
  padding:13px 15px;color:var(--ink);font-family:var(--body);font-size:15px;
}
.cform input::placeholder,.cform textarea::placeholder{color:var(--ink-4)}
.cform input:focus,.cform textarea:focus{border-color:var(--gold);outline:none}
.cform .btn{margin:8px auto 0;display:flex}
.fnote{font-size:12px;color:var(--ink-3);text-align:center;margin:14px 0 0;line-height:1.8}
.alt-contact{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:22px}

/* ---------- 帯画像 ---------- */
.band-img{margin:0 0 26px;border-radius:var(--r-l);overflow:hidden;border:1px solid var(--line-soft)}
.band-img img{width:100%}

/* ---------- オプションメニュー ---------- */
.opts{display:grid;gap:20px}
.opt{
  display:grid;grid-template-columns:minmax(0,340px) 1fr;gap:0;
  background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--r-l);overflow:hidden;
}
.opt-img{margin:0}
.opt-img{display:flex;align-items:center;justify-content:center;background:#0b120b}
.opt-img img{width:100%;height:auto;max-height:100%;object-fit:contain;display:block}
.opt-body{padding:28px 30px}
.opt-tag{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.1em;
  border:1px solid var(--line);color:var(--gold);padding:4px 12px;border-radius:999px;margin-bottom:12px;
}
.opt-sub{color:var(--ink-3);font-size:13.5px;margin:4px 0 16px}
.opt-p{font-size:14px;color:var(--ink-2);line-height:1.95;margin:0 0 12px}
.opt-p b{
  display:inline-block;color:var(--gold-lt);font-size:11.5px;letter-spacing:.08em;
  border:1px solid var(--line);border-radius:4px;padding:1px 8px;margin-right:9px;vertical-align:2px;
}
.flowline{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:16px 0}
.flowline li{
  font-size:12.5px;font-weight:700;background:var(--gold-a08);border:1px solid var(--line);
  border-radius:999px;padding:5px 14px;position:relative;
}
.flowline li:not(:last-child)::after{content:"→";position:absolute;right:-16px;top:50%;transform:translateY(-50%);color:var(--gold-dk);font-size:11px}
.opt-detail{font-size:12.5px;color:var(--ink-3);margin:0 0 16px}
.opt-foot{
  display:flex;flex-wrap:wrap;gap:12px;align-items:baseline;justify-content:space-between;
  border-top:1px solid var(--line-soft);padding-top:16px;
}
.opt-note{font-size:12px;color:var(--ink-3)}
.opt-price{font-family:var(--display);font-size:26px;font-weight:900;color:var(--gold-lt)}
.opt-price small{font-size:12px;color:var(--ink-3);font-weight:400;margin-left:4px}
@media(max-width:820px){
  .opt{grid-template-columns:1fr}
  .opt-img img{min-height:180px;max-height:240px}
}

/* ---------- ファストパス ---------- */
.fp{display:grid;grid-template-columns:1.25fr 1fr;gap:34px;align-items:start}
.fp-img{margin:0;border-radius:var(--r-l);overflow:hidden;border:1px solid var(--line-soft)}
.fp-banner{margin:0 0 30px;border-radius:var(--r-l);overflow:hidden;border:1px solid var(--line-soft);background:#050a12}
.fp-banner img{width:100%;height:auto}
@media(max-width:820px){.fp{grid-template-columns:1fr;gap:22px}}

/* ---------- Instagram ---------- */
.ig-handle{
  font-family:var(--mono);font-size:17px;letter-spacing:.06em;color:var(--gold);
  margin:0 0 22px;
}

/* ---------- 印刷バー ---------- */
.printbar{padding-block:30px;border-top:1px solid var(--line-soft);background:var(--ground-deep)}

/* ===========================================================
   見積・発注フォーム
   =========================================================== */
.ordergrid{display:grid;grid-template-columns:1fr 340px;gap:26px;align-items:start}
@media(max-width:960px){.ordergrid{grid-template-columns:1fr}}
.ordermain{display:grid;gap:18px}
.obox{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--r-l);padding:26px 26px}
.obox-h{margin:0 0 20px;padding-bottom:12px;border-bottom:1px solid var(--line-soft);color:var(--gold-lt)}
.fields2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.fields2 .field:has(textarea){grid-column:1/-1}
@media(max-width:640px){.fields2{grid-template-columns:1fr}}
.obox .field{margin-bottom:16px}
.obox label{display:block;font-size:12.5px;font-weight:700;color:var(--ink-2);margin-bottom:6px}
.obox .req{color:var(--hot);margin-left:4px}
/* 「任意」バッジ。グローバルの .opt（オプションメニューのカード）と
   クラス名がぶつかるので、ここで打ち消しておく。 */
.obox .opt{display:inline;background:none;border:0;border-radius:0;overflow:visible;
  color:var(--ink-4);margin-left:6px;font-weight:400;font-size:11px}
.obox input[type=text],.obox input[type=email],.obox input[type=tel],.obox textarea{
  width:100%;background:var(--raised);border:1px solid var(--line-soft);border-radius:var(--r-s);
  padding:11px 14px;color:var(--ink);font-family:var(--body);font-size:14.5px;
}
.obox input:focus,.obox textarea:focus{border-color:var(--gold);outline:none}
.obox input::placeholder,.obox textarea::placeholder{color:var(--ink-4)}

/* プラン選択 */
.picks{display:grid;gap:10px}
.pick{display:block;position:relative;cursor:pointer}
.pick input{position:absolute;opacity:0;width:0;height:0}
.pick-body{
  display:block;background:var(--raised);border:1px solid var(--line-soft);border-radius:var(--r-m);
  padding:16px 20px;transition:border-color .16s ease,background .16s ease;
}
.pick:hover .pick-body{border-color:var(--line)}
.pick.on .pick-body{border-color:var(--gold);background:var(--gold-a08)}
.pick-body b{display:block;font-size:15.5px;font-weight:700}
.pick-body small{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px}
.pick-price{
  display:block;margin-top:8px;font-family:var(--mono);font-size:16px;font-weight:700;
  color:var(--gold-lt);font-style:normal;font-variant-numeric:tabular-nums;
}
.pick input:focus-visible + .pick-body{outline:2px solid var(--gold);outline-offset:2px}

/* ステッパー */
.stepper{display:inline-flex;align-items:center;gap:12px;background:var(--raised);
  border:1px solid var(--line-soft);border-radius:var(--r-s);padding:5px 8px}
.stepper button{width:32px;height:32px;border-radius:7px;background:rgba(255,255,255,.08);
  font-size:17px;line-height:1;display:grid;place-items:center}
.stepper button:hover{background:var(--gold);color:#1A1206}
.stepper .n{font-family:var(--mono);font-size:16px;font-weight:700;min-width:26px;text-align:center;
  font-variant-numeric:tabular-nums}
.stepper.big button{width:40px;height:40px;font-size:20px}
.stepper.big .n{font-size:22px;min-width:38px}
.daysrow{display:flex;align-items:center;gap:14px}
.daysrow .unit{font-size:15px;color:var(--ink-2)}

/* オプション */
.opts-list{display:grid;gap:10px}
.opt-row{display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:var(--raised);border:1px solid var(--line-soft);border-radius:var(--r-m);padding:14px 18px}
.opt-row b{display:block;font-size:14.5px;font-weight:700}
.opt-row small{display:block;font-size:12px;color:var(--ink-3);margin-top:2px}
.opt-row.check{cursor:pointer}
.opt-row.check:hover{border-color:var(--line)}
.opt-row input[type=checkbox]{width:22px;height:22px;accent-color:#C9A84C;flex-shrink:0}
/* オプションの説明文。金額の下に置くので、少し落ち着かせる */
.opt-row .opt-note{margin-top:6px;line-height:1.8;color:var(--ink-2);font-size:11.5px}
/* オプションに添えるバナー（絵本など、見せたほうが伝わるもの） */
.opt-banner{margin:14px 0 0;border:1px solid var(--line-soft);border-radius:12px;overflow:hidden;line-height:0}
.opt-banner img{width:100%;height:auto}
.opt-banner+.opt-row{margin-top:8px}

/* 合計パネル */
.orderside{position:sticky;top:84px;align-self:start}
@media(max-width:960px){.orderside{position:static}}
.sticky{position:static}
.total-lines{border-bottom:1px solid var(--line-soft);padding-bottom:14px;margin-bottom:14px}
.tl{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:5px 0;color:var(--ink-2)}
.tl i{font-style:normal;color:var(--ink-4);font-size:12px}
.tl b{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.total-sum div{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;padding:5px 0;color:var(--ink-2)}
.total-sum b{font-family:var(--mono);font-variant-numeric:tabular-nums}
.total-sum .grand{border-top:1px solid var(--line);margin-top:8px;padding-top:12px;font-size:15px;color:var(--ink)}
.total-sum .grand b{font-size:24px;font-weight:700;color:var(--gold-lt)}
.orderside .btn{margin-top:18px}

/* ===========================================================
   参考お見積書
   =========================================================== */
.quotewrap{position:fixed;inset:0;z-index:120;background:rgba(4,4,4,.96);overflow:auto;padding:20px}
body.quote-open{overflow:hidden}
.quote-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center;
  max-width:820px;margin:0 auto 20px}
.quote{
  background:#fff;color:#111;max-width:820px;margin:0 auto;padding:32px 36px;
  font-family:var(--body);font-size:12px;line-height:1.65;border-radius:6px;
}
.quote *{color:inherit}
.q-head{display:grid;grid-template-columns:1fr 300px;gap:28px;margin-bottom:24px}
.q-title{font-family:var(--display);font-size:24px;font-weight:900;text-align:right;margin:0 0 16px;letter-spacing:.14em}
.q-toname{font-size:17px;font-weight:700;border-bottom:1px solid #333;padding-bottom:5px;margin:0 0 4px;
  display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.q-toname small{font-size:11px;font-weight:400}
.q-toperson{font-size:12px;color:#555;margin:0 0 18px}
.q-lead{font-size:12px;border-bottom:1px solid #333;padding-bottom:4px;margin:0 0 12px}
.q-grand{display:flex;align-items:baseline;gap:12px;border-bottom:2px solid #111;padding-bottom:8px;margin-bottom:16px}
.q-grand span{font-size:12px}
.q-grand b{font-family:var(--mono);font-size:26px;font-weight:700;font-variant-numeric:tabular-nums}
.q-grand small{font-size:10px}
.q-meta{margin:0}
.q-meta div{display:grid;grid-template-columns:64px 1fr;gap:8px;padding:3px 0;font-size:11.5px}
.q-meta dt{margin:0;color:#555;letter-spacing:.3em}
.q-meta dd{margin:0}
.q-no{margin:0 0 16px}
.q-no div{display:grid;grid-template-columns:1fr auto;gap:10px;font-size:11px;padding:2px 0}
.q-no dt{margin:0;color:#555;text-align:right}
.q-no dd{margin:0;font-family:var(--mono);font-variant-numeric:tabular-nums}
.q-corp{font-style:normal;font-size:10.5px;line-height:1.75;border-top:1px solid #ccc;padding-top:10px}
.q-corp b{display:block;font-size:13px;margin-bottom:4px}
.q-sales{font-size:11px;margin:8px 0 0}
.q-table{width:100%;border-collapse:collapse;margin-bottom:18px;min-width:0}
.q-table th{background:#eee;border:1px solid #bbb;padding:7px 9px;font-size:10.5px;color:#333;text-align:center;letter-spacing:.05em}
.q-table td{border:1px solid #ddd;padding:8px 9px;font-size:11.5px}
.q-table .c-name{text-align:left}
.q-table .c-qty,.q-table .c-unit{text-align:center;white-space:nowrap;width:52px}
.q-table .c-price,.q-table .c-amt{text-align:right;white-space:nowrap;width:96px;
  font-family:var(--mono);font-variant-numeric:tabular-nums}
.q-foot{display:grid;grid-template-columns:1fr 260px;gap:24px;margin-bottom:18px}
.q-remarks h4{font-size:11px;margin:0 0 6px;color:#555;letter-spacing:.1em}
.q-remarks p{margin:0 0 8px;font-size:11px;min-height:14px}
.q-disclaimer{border:1px solid #ccc;padding:8px 10px;font-size:10px;color:#444;line-height:1.7}
/* お値引きの相談先。金額の隣で目に入るように、少しだけ濃くする */
.q-sales-note{
  margin-top:8px;border:1px solid #8A5F18;border-left-width:3px;
  padding:8px 10px;font-size:10.5px;color:#111;line-height:1.8;background:#FBF6EA;
  -webkit-print-color-adjust:exact;print-color-adjust:exact;
}
.q-sums div{display:flex;justify-content:space-between;gap:12px;padding:6px 10px;font-size:12px;border-bottom:1px solid #ddd}
.q-sums b{font-family:var(--mono);font-variant-numeric:tabular-nums}
.q-sums .q-total{border-bottom:2px solid #111;border-top:1px solid #111;font-size:13.5px;font-weight:700}
.q-bank{border-top:1px solid #ccc;padding-top:12px;font-size:11px;line-height:1.8}
.q-bank small{color:#555;font-size:10px}
@media(max-width:720px){
  .q-head,.q-foot{grid-template-columns:1fr}
  .q-title{text-align:left}
  .q-no dt{text-align:left}
  .quote{padding:22px 18px}
}
@media print{
  /* 見積書だけを紙に出す。
     body に overflow:hidden が残っていると、ブラウザによっては
     中身が全部切り落とされて真っ白なPDFになるので、必ず戻す。 */
  html,body,body.quote-open{overflow:visible!important;height:auto!important}
  .quotewrap{
    position:static!important;inset:auto!important;z-index:auto!important;
    background:#fff!important;padding:0!important;overflow:visible!important;
  }
  .quote{max-width:none;padding:0;border-radius:0;font-size:10.5pt;box-shadow:none}
  /* 見積書は開くときに body の直下へ移している（order.js） */
  body.quote-open>*:not(.quotewrap){display:none!important}
  /* A4の幅は約688pxで、スマホ用の1段組み（max-width:720px）に入ってしまう。
     紙は横に十分あるので、2段組みの見た目に戻す。 */
  .q-head{grid-template-columns:1fr 270px!important}
  .q-foot{grid-template-columns:1fr 250px!important}
  .q-title{text-align:right!important}
  .q-no dt{text-align:right!important}
  /* 明細表・合計・振込先は途中で切らない */
  .q-table thead{display:table-header-group}
  .q-table tr,.q-foot,.q-bank,.q-sales-note{break-inside:avoid}
  .q-table th{background:#eee!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ---- 発注フォームの送信結果 ---- */
.ordersent{background:rgba(141,198,63,.12);border:1px solid rgba(141,198,63,.5);color:#CDE9A0;border-radius:10px;padding:12px 14px;font-size:13px;margin:12px 0 0;line-height:1.7}
.ordererr{background:rgba(255,107,74,.12);border:1px solid rgba(255,107,74,.45);color:#FFB4A2;border-radius:10px;padding:12px 14px;font-size:13px;margin:12px 0 0;line-height:1.7}

/* ===== 各LPの資料ダウンロード帯 ===== */
.docband{
  padding:74px 0;
  background:
    radial-gradient(900px 420px at 50% -10%, rgba(141,198,63,.10), transparent 62%),
    var(--panel);
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  text-align:center;
}
.docband .eyebrow{color:var(--lime);letter-spacing:.28em}
.docband .h2{margin-top:12px}
.docband .lede{max-width:640px;margin:18px auto 0;color:var(--ink-2);line-height:2}
.docband .doc-meta{
  display:flex;justify-content:center;flex-wrap:wrap;gap:0;
  margin:30px auto 0;max-width:720px;
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
}
.docband .doc-meta span{
  flex:1 1 180px;padding:18px 20px;
  border-right:1px solid var(--line-soft);
  font-size:13px;color:var(--ink-2);line-height:1.7;
}
.docband .doc-meta span:last-child{border-right:0}
.docband .doc-meta b{
  display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  color:var(--ink-3);font-weight:400;margin-bottom:7px;
}
.docband .btn-row{justify-content:center;margin-top:30px}
.docband .doc-note{margin-top:18px;font-size:12px;color:var(--ink-3);line-height:1.8}
@media (max-width:720px){
  .docband{padding:54px 0}
  .docband .doc-meta span{flex:1 1 100%;border-right:0;border-bottom:1px solid var(--line-soft)}
  .docband .doc-meta span:last-child{border-bottom:0}
}

/* ===== 見積フォーム：入力すると金額が動くのが見えるように ===== */
.bigtotal{
  position:relative;
  background:linear-gradient(180deg, var(--gold-a08), transparent);
  border:1px solid var(--gold-a20);
  border-radius:14px;
  padding:18px 20px 16px;
  margin-bottom:16px;
}
.bigtotal .bt-k{
  display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  color:var(--ink-3);
}
.bigtotal .bt-v{
  display:block;margin-top:8px;
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:32px;font-weight:700;line-height:1.1;color:var(--gold-lt);
  letter-spacing:-.01em;
}
.bigtotal .bt-s{
  display:block;margin-top:9px;font-size:11.5px;color:var(--ink-3);line-height:1.6;
}
.bigtotal .bt-d{
  position:absolute;right:18px;top:38px;
  font-family:var(--mono);font-size:14px;font-weight:700;
  padding:3px 9px;border-radius:999px;
  animation:btpop .32s ease-out;
}
.bigtotal .bt-d.up{color:#8DC63F;background:rgba(141,198,63,.14)}
.bigtotal .bt-d.down{color:#7FB8E8;background:rgba(127,184,232,.14)}
@keyframes btpop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.bigtotal.pulse{animation:btpulse .5s ease-out}
@keyframes btpulse{
  0%{box-shadow:0 0 0 0 var(--gold-a20)}
  60%{box-shadow:0 0 0 7px rgba(201,168,76,0)}
  100%{box-shadow:0 0 0 0 rgba(201,168,76,0)}
}

/* 日数を直接選べるボタン */
.dayspick{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.dayspick .dayb{
  flex:1 1 62px;min-width:62px;padding:11px 6px;cursor:pointer;
  background:transparent;border:1px solid var(--line-soft);border-radius:10px;
  color:var(--ink-2);font-family:var(--mono);font-size:18px;font-weight:500;
  transition:border-color .15s, background .15s, color .15s;
}
.dayspick .dayb small{display:block;font-family:var(--body);font-size:10px;margin-top:3px;color:var(--ink-3)}
.dayspick .dayb:hover{border-color:var(--line)}
.dayspick .dayb.on{border-color:var(--gold);background:var(--gold-a08);color:var(--gold-lt)}
.dayspick .dayb.on small{color:var(--gold-lt)}
.daysrow .dayssum{margin-left:auto;font-size:12px;color:var(--ink-3);font-family:var(--mono)}

/* 選択中のオプションを目立たせる／今いくらかを出す */
.opt-row{transition:border-color .15s, background .15s}
.opt-row.on{border-color:var(--gold-a20);background:var(--gold-a08)}
.opt-row .opt-now{font-style:normal;color:var(--gold-lt);font-family:var(--mono);white-space:nowrap}
.opt-row .opt-now.on{font-weight:500}

/* 明細が入れ替わったのが分かるように */
.total-lines .tl{animation:tlin .26s ease-out}
@keyframes tlin{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}

/* スマホ：画面下に合計を固定 */
.qbar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:rgba(15,26,15,.96);backdrop-filter:blur(10px);
  border-top:1px solid var(--gold-a20);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
}

.qbar-l{flex:1;min-width:0}
.qbar-l span{font-size:10.5px;color:var(--ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qbar-l b{font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:22px;font-weight:700;color:var(--gold-lt);margin-top:2px}
.qbar .btn{flex-shrink:0;margin:0;padding:11px 16px;font-size:13px}
body.quote-open .qbar{display:none}

/* セクション末尾の補足文とボタン */
.secnote{
  max-width:820px;margin:28px auto 0;padding:18px 22px;
  background:rgba(255,255,255,.025);border-left:2px solid var(--gold);
  border-radius:0 var(--r-s) var(--r-s) 0;
  font-size:13.5px;line-height:2;color:var(--ink-2);
}
.secnote b,.secnote strong{color:var(--ink)}
.secnote a{color:var(--gold-lt)}
.btn-row-c{justify-content:center;margin-top:30px}

/* ===== 景品ラインナップのカード ===== */
.goods{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px;margin-top:8px}
.gcard{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--r-m);
  transition:border-color .18s, transform .18s;
}
.gcard:hover{border-color:var(--line);transform:translateY(-2px)}
.gimg{aspect-ratio:1/1;overflow:hidden;background:#0b120b}
.gimg img{width:100%;height:100%;object-fit:contain;display:block}
.gbody{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.gcat{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;
  letter-spacing:.12em;color:var(--ink-3);margin:0}
.gpop{background:var(--gold);color:#14120A;font-family:var(--body);font-size:10px;
  font-weight:700;letter-spacing:.04em;padding:2px 7px;border-radius:3px}
.gname{margin:9px 0 0;font-size:15.5px;font-weight:700;line-height:1.45;letter-spacing:.01em}
.gspec{margin:8px 0 0;font-size:11.5px;line-height:1.75;color:var(--ink-3)}
.gprice{margin-top:14px;padding-top:13px;border-top:1px solid var(--line-soft)}
.glist{margin:0;font-size:11px;color:var(--ink-3);text-decoration:line-through}
.gnow{margin:5px 0 0;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:23px;font-weight:700;color:var(--gold-lt);line-height:1.2}
.goff{font-family:var(--body);font-size:10.5px;font-weight:700;color:#0F1A0F;
  background:var(--gold);padding:2px 7px;border-radius:3px;letter-spacing:.02em}
.gmeta{margin:7px 0 0;font-size:11px;color:var(--ink-3)}
.gnote{margin:13px 0 0;padding-top:11px;border-top:1px solid rgba(255,255,255,.05);
  font-size:10.5px;line-height:1.7;color:var(--ink-3)}
.gnote b{color:var(--gold-lt)}
.gnote a{color:var(--lime)}
@media(max-width:520px){
  .goods{grid-template-columns:repeat(2,1fr);gap:12px}
  .gbody{padding:12px 13px 14px}
  .gname{font-size:13.5px}
  .gspec{display:none}
  .gnow{font-size:19px}
}
.gnow.gask{font-family:var(--body);font-size:14px;font-weight:700;color:var(--ink-2);line-height:1.6}

/* ===== 見積フォーム：導線の整理 ===== */
.oguide{
  margin:0 0 22px;padding:16px 20px;
  background:var(--panel);border-left:2px solid var(--lime);border-radius:0 var(--r-s) var(--r-s) 0;
  font-size:13.5px;line-height:2;color:var(--ink-2);
}
.oguide b{color:var(--gold-lt)}
.obox-h .ostep{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;margin-right:11px;vertical-align:-4px;
  background:var(--gold);color:#14120A;border-radius:50%;
  font-family:var(--mono);font-size:13px;font-weight:700;
}
.obox-h .ostep-o{
  margin-left:12px;padding:3px 9px;border:1px solid var(--line-soft);border-radius:999px;
  font-family:var(--body);font-size:10.5px;font-weight:400;color:var(--ink-3);vertical-align:2px;
}
.onext{
  margin-top:8px;padding:26px 28px;text-align:center;
  background:linear-gradient(180deg,var(--gold-a08),transparent);
  border:1px solid var(--gold-a20);border-radius:var(--r-m);
}
.onext-h{margin:0;font-size:16px;font-weight:700;color:var(--gold-lt)}
.onext-b{margin:11px 0 20px;font-size:13px;line-height:1.95;color:var(--ink-2)}
.onext-b b{color:var(--ink)}
.oact{margin-top:24px}
.oact-sum{
  display:flex;flex-direction:column;gap:5px;margin-bottom:20px;padding-bottom:18px;
  border-bottom:1px solid var(--line-soft);
}
.oact-sum span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--ink-3)}
.oact-sum b{
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:30px;font-weight:700;color:var(--gold-lt);line-height:1.15;
}
.oact-sum small{font-size:12px;color:var(--ink-3)}
#quote-req{scroll-margin-top:80px}

/* ===== コンテンツ・セレクター ===== */
.selpanel{display:grid;grid-template-columns:1fr 1fr;gap:22px 34px;background:var(--panel);border:1px solid var(--line-soft);
  border-radius:var(--r-l);padding:26px 28px;margin:28px 0 18px}
.selq-w{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.selq-t{display:flex;align-items:baseline;gap:10px;margin:0 0 12px;font-weight:700;font-size:.98rem;letter-spacing:.02em}
.selq-t>span{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--gold);
  color:#08210a;font-size:.72rem;font-weight:900;flex:none}
.selq-t>em{font-style:normal;font-size:.76rem;opacity:.6;font-weight:400;letter-spacing:.06em}
.selq-w .selq-t{margin:0}
.selchips{display:flex;flex-wrap:wrap;gap:8px}
.selchip{appearance:none;cursor:pointer;font:inherit;font-size:.86rem;line-height:1;padding:10px 14px;border-radius:999px;
  border:1px solid var(--line-soft);background:transparent;color:inherit;transition:.16s}
.selchip:hover{border-color:var(--gold);color:var(--gold)}
.selchip[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#08210a;font-weight:700}
.seldays{display:flex;gap:8px;flex-wrap:wrap}
.selday{appearance:none;cursor:pointer;font:inherit;font-size:.92rem;font-weight:700;padding:11px 20px;border-radius:10px;
  border:1px solid var(--line-soft);background:transparent;color:inherit;transition:.16s;font-variant-numeric:tabular-nums}
.selday:hover{border-color:var(--gold)}
.selday.on{background:var(--gold-grad);border-color:var(--gold);color:#1a1405;box-shadow:0 2px 14px var(--gold-a20)}
.selreset{appearance:none;cursor:pointer;font:inherit;font-size:.8rem;background:none;border:0;color:inherit;opacity:.6;
  text-decoration:underline;text-underline-offset:3px;margin-left:auto;padding:6px}
.selreset:hover{opacity:1;color:var(--gold)}

.selbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:12px 2px 18px;border-bottom:1px solid var(--line-soft);margin-bottom:26px}
.selcount{margin:0;font-size:.92rem}
.selcount b{font-size:1.5rem;font-weight:900;color:var(--gold-lt);font-variant-numeric:tabular-nums;margin-right:4px}
.selcount span{opacity:.6;font-size:.82rem;margin-left:8px}
.selsort{font-size:.82rem;opacity:.85;display:flex;align-items:center;gap:8px}
.selsort select{font:inherit;font-size:.86rem;background:var(--panel);color:inherit;border:1px solid var(--line-soft);
  border-radius:8px;padding:8px 10px}

.selgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:22px}
.selcard{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line-soft);
  border-radius:var(--r-l);overflow:hidden}
.selcard[hidden]{display:none!important}
.selimg{position:relative;aspect-ratio:1/1;overflow:hidden;background:#0a120a}
.selimg img{width:100%;height:100%;object-fit:cover;display:block}
.selbadge{position:absolute;top:12px;left:12px;background:var(--gold);color:#1a1405;font-size:.72rem;font-weight:900;
  padding:6px 11px;border-radius:999px;letter-spacing:.04em}
.selbody{padding:20px 20px 6px;flex:1}
.selname{margin:0 0 8px;font-size:1.1rem;font-weight:800;line-height:1.4}
.sellead{margin:0 0 16px;font-size:.86rem;line-height:1.75;opacity:.82}
.selres{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:14px 0;border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft)}
.sres b{display:block;font-size:1.28rem;font-weight:900;color:var(--gold-lt);line-height:1.1;font-variant-numeric:tabular-nums;
  letter-spacing:-.01em}
.sres b span{font-size:.62rem;font-weight:700;margin-left:2px;opacity:.85;letter-spacing:0}
.sres small{display:block;margin-top:5px;font-size:.68rem;line-height:1.45;opacity:.62}
.selmeta{margin:14px 0 0;display:grid;gap:7px}
.selmeta>div{display:grid;grid-template-columns:6.2em 1fr;gap:10px;font-size:.76rem;line-height:1.6}
.selmeta dt{opacity:.55;margin:0}
.selmeta dd{margin:0}
.selfoot{padding:16px 20px 20px;margin-top:auto}
.selprice{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:14px 16px;border-radius:12px;
  background:var(--gold-a08);border:1px solid var(--gold-a20);margin-bottom:14px}
.sp-l{font-size:.74rem;opacity:.7}
.sp-l .sp-d{font-size:1.02rem;font-weight:900;color:var(--gold-lt)}
.sp-v{font-size:1.5rem;font-weight:900;color:var(--gold-lt);font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin-left:auto}
.sp-v.flash{animation:spflash .5s ease}
@keyframes spflash{0%{transform:scale(1)}35%{transform:scale(1.1);color:#fff}100%{transform:scale(1)}}
.selprice small{width:100%;font-size:.68rem;opacity:.55}
.selacts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.selacts .btn{text-align:center;padding:12px 8px;font-size:.86rem}
.selempty{text-align:center;padding:48px 20px;opacity:.75;font-size:.92rem}

.selmonths{margin-top:64px;padding-top:44px;border-top:1px solid var(--line-soft)}
.mongrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:24px 0 16px}
.mon{background:var(--panel);border:1px solid var(--line-soft);border-radius:12px;padding:14px 14px 13px}
.mon b{display:block;font-size:1rem;font-weight:800;margin-bottom:9px}
.mon .mbar{display:block;height:5px;border-radius:3px;margin-bottom:10px}
.mon small{display:block;font-size:.7rem;line-height:1.6;opacity:.66}
.mon.lv-low .mbar{background:rgba(201,168,76,.28);width:28%}
.mon.lv-mid .mbar{background:rgba(201,168,76,.55);width:56%}
.mon.lv-high .mbar{background:var(--gold);width:80%}
.mon.lv-peak .mbar{background:var(--hot);width:100%}
.mon.lv-peak{border-color:color-mix(in oklch,var(--hot) 40%,transparent)}

@media(max-width:880px){
  .selpanel{grid-template-columns:1fr;padding:20px;gap:20px}
  .selgrid{grid-template-columns:1fr}
  .selres{grid-template-columns:repeat(3,1fr);gap:6px}
  .sres b{font-size:1.1rem}
  .selreset{margin-left:0}
}
.selres{align-items:start;min-height:96px}
.sres small{min-height:2.1em}
.selacts .btn-ghost{background:transparent}

/* ===== 見積フォーム：選ぶ（上・コンパクト）／内容物・明細（下・全幅で大きく） ===== */
.ocompact .oguide{font-size:13px;line-height:1.85;margin:0 0 18px;text-align:left;
  padding:12px 16px;border-radius:10px;background:var(--gold-a08);border:1px solid var(--gold-a20)}
.ocompact .oguide b{color:var(--gold-lt)}
.opick{display:grid;grid-template-columns:1.55fr 1fr;gap:16px;margin-bottom:16px;align-items:start}
.ocompact .obox{padding:18px}
.ocompact .obox-h{margin:0 0 14px;padding-bottom:10px;font-size:15px}
.ocompact .obox-h .ostep{width:20px;height:20px;font-size:11px}
.ocompact .obox-h .ostep-o{font-size:11px;font-weight:400;opacity:.6;margin-left:8px}
.ocompact .picks{gap:7px}
.ocompact .pick-body{padding:11px 13px}
.ocompact .pick-body b{font-size:13.5px}
.ocompact .pick-body small{font-size:11px;line-height:1.6;margin-top:3px}
.ocompact .pick-price{font-size:13.5px;margin-top:5px}
.ocompact .dayspick{gap:6px;margin-bottom:10px}
.ocompact .dayspick .dayb{padding:8px 13px;font-size:16px;min-width:0}
.ocompact .dayspick .dayb small{font-size:9px;margin-top:1px}
.ocompact .dayssum{margin:0 0 6px;font-size:12.5px;color:var(--ink-2)}
.ocompact .dayssum b{font-family:var(--mono);color:var(--gold-lt)}
.ocompact .daysnote{margin:0;font-size:11px;line-height:1.65;color:var(--ink-4)}
.ocompact .opts-list{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.ocompact .opt-row{padding:9px 12px;gap:12px}
.ocompact .opt-row b{font-size:12.5px;line-height:1.5;font-weight:600}
.ocompact .opt-row small{font-size:11px;margin-top:1px;line-height:1.55}
.ocompact .opt-row input[type=checkbox]{width:19px;height:19px}
.ocompact .stepper button{width:28px;height:28px}
.obox .opt-row.check{display:flex;align-items:center;justify-content:space-between;
  font-size:inherit;font-weight:400;color:inherit;margin-bottom:0}
.obox .opt-row.check>div{flex:1;min-width:0}
.opt-row.choice{grid-column:1/-1;display:block}
.opt-row.choice .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.opt-row.choice .chip{appearance:none;cursor:pointer;font:inherit;font-size:12px;font-weight:600;
  padding:7px 12px;border-radius:999px;border:1px solid var(--line-soft);background:transparent;
  color:var(--ink-2);transition:.15s;font-variant-numeric:tabular-nums}
.opt-row.choice .chip:hover{border-color:var(--gold);color:var(--gold-lt)}
.opt-row.choice .chip.on{background:var(--gold-grad);border-color:var(--gold);color:#1A1206}

/* --- 結果（全幅） --- */
.oresult{padding-top:38px}
.ores-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:22px}
.ores-head .h2{margin:6px 0 6px;text-align:left}
.ores-head .eyebrow-l{text-align:left;margin-bottom:0}
.ores-cond{margin:0;font-size:13px;color:var(--ink-3)}
.oresult .bigtotal{margin:0;min-width:300px;text-align:right}
.ores-h{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid var(--line-soft)}
.ores-h-t{margin:0;font-size:18px;font-weight:800;color:var(--gold-lt);letter-spacing:.02em}
.ores-h-n{font-size:11.5px;color:var(--ink-4)}
.oresult .obox{padding:26px 28px;margin-bottom:18px}

.inclist{list-style:none;margin:0 0 16px;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:2px 24px}
.inclist li{position:relative;padding:9px 0 9px 26px;font-size:13.5px;line-height:1.6;color:var(--ink);
  border-bottom:1px solid rgba(255,255,255,.05)}
.inclist li::before{content:"✓";position:absolute;left:2px;top:9px;color:var(--gold);font-size:12px;font-weight:900}
.inclist li.ai{color:var(--gold-lt);font-weight:600}
.inclist li.ai::before{content:"＋";color:var(--gold-lt)}
.oinc-f{font-size:12px;line-height:1.75;color:var(--ink-3);margin:0;
  padding:12px 16px;border-radius:10px;background:rgba(255,255,255,.03)}
.oinc-f b{color:var(--gold-lt)}

.qtable{border-top:1px solid var(--line-soft)}
.qt-head,.qt-row{display:grid;grid-template-columns:1fr 90px 120px 130px;gap:12px;
  padding:12px 4px;border-bottom:1px solid var(--line-soft);align-items:start}
.qt-head{font-size:11px;letter-spacing:.06em;color:var(--ink-4);font-weight:700;padding:10px 4px}
.qt-head span:not(:first-child),.qt-q,.qt-u,.qt-a{text-align:right}
.qt-row{font-size:13.5px;line-height:1.6;animation:tlin .26s ease-out}
.qt-n{color:var(--ink-2)}
.qt-q,.qt-u{font-family:var(--mono);font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.qt-a{font-family:var(--mono);font-size:14.5px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.qt-row.mix .qt-a,.qt-row.add .qt-a{color:var(--gold-lt)}
.tl-std,.tl-add,.tl-mixtag{display:inline-block;font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.04em;
  padding:2px 6px;border-radius:4px;margin-right:8px;vertical-align:1px;white-space:nowrap}
.tl-std{background:rgba(255,255,255,.08);color:var(--ink-3)}
.tl-add{background:var(--gold-a20);color:var(--gold-lt)}
.tl-mixtag{background:linear-gradient(90deg,rgba(255,255,255,.08),var(--gold-a20));color:var(--gold-lt)}
.tl-mix{display:block;margin-top:4px;font-style:normal;font-size:11.5px;color:var(--gold-lt)}

.qt-sum{margin:18px 0 20px;margin-left:auto;max-width:440px}
.qt-sum div{display:flex;justify-content:space-between;gap:16px;font-size:13.5px;padding:7px 0;color:var(--ink-2)}
.qt-sum b{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink)}
.qt-grand{border-top:1px solid var(--line);margin-top:8px;padding-top:14px!important;font-size:15px!important;color:var(--ink)!important}
.qt-grand b{font-size:28px!important;font-weight:800;color:var(--gold-lt)!important;letter-spacing:-.02em}

/* --- 画面下の固定バー（全画面） --- */
.qbar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(10,14,10,.94);
  backdrop-filter:blur(12px);border-top:1px solid var(--gold-a20);padding:10px 0}
.qbar-in{max-width:1180px;margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.qbar-l{flex:1;min-width:0;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.qbar-l span{font-size:11.5px;color:var(--ink-3)}
.qbar-l b{font-family:var(--mono);font-size:22px;font-weight:800;color:var(--gold-lt);font-variant-numeric:tabular-nums}
.qbar .btn{padding:10px 18px;font-size:13px}
body:has(#q-bar:not([hidden])){padding-bottom:82px}

@media(max-width:960px){
  .opick{grid-template-columns:1fr}
  .ocompact .opts-list{grid-template-columns:1fr}
  .oresult .obox{padding:20px}
  .oresult .bigtotal{min-width:0;width:100%;text-align:left}
  .ores-head{flex-direction:column;align-items:flex-start}
  .qt-head{display:none}
  .qt-row{grid-template-columns:1fr auto;gap:6px 12px}
  .qt-q,.qt-u{display:none}
  .qt-sum{max-width:none}
  .qbar-in{gap:8px}
  .qbar-l b{font-size:18px}
  #qbar-see{display:none}
}
/* 結果ヘッダの合計：差額バッジが金額に重ならないように上段へ */
.oresult .bigtotal{padding:16px 22px 18px}
.oresult .bigtotal .bt-d{position:static;display:inline-block;margin-left:10px;vertical-align:middle;font-size:13px}
.oresult .bigtotal .bt-v{display:inline-block;margin-top:6px;font-size:38px}

/* ===== 平日／休日の混在入力・備品選択・スタッフ・値引き ===== */
.splitdays{display:grid;gap:8px;margin-bottom:12px}
.sd-row{display:grid;grid-template-columns:1fr auto 110px;align-items:center;gap:14px;
  padding:10px 14px;border-radius:12px;background:var(--raised);border:1px solid var(--line-soft)}
.sd-k b{display:block;font-size:14px;font-weight:700}
.sd-k small{display:block;font-size:10.5px;color:var(--ink-4);margin-top:1px}
.sd-v{text-align:right;font-family:var(--mono);font-size:14px;font-variant-numeric:tabular-nums;color:var(--gold-lt)}
.sd-sum{margin:2px 0 0;font-size:12.5px;color:var(--ink-2)}
.sd-sum b{font-family:var(--mono);color:var(--gold-lt);font-size:14px}

.eqgroup + .eqgroup{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-soft)}
.eq-h{margin:0 0 9px;font-size:13px;font-weight:700;color:var(--ink)}
.eqchoices{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:7px}
.eqc{appearance:none;cursor:pointer;font:inherit;text-align:left;padding:10px 12px;border-radius:10px;
  border:1px solid var(--line-soft);background:transparent;color:inherit;transition:.15s}
.eqc:hover{border-color:var(--line)}
.eqc.on{border-color:var(--gold);background:var(--gold-a08)}
.eqc b{display:block;font-size:12.5px;font-weight:700;line-height:1.45}
.eqc small{display:block;font-size:10.5px;color:var(--ink-4);margin-top:2px;line-height:1.45}
.eqc em{display:block;font-style:normal;font-size:11px;margin-top:5px;font-family:var(--mono);color:var(--ink-3)}
.eqc.on em{color:var(--gold-lt)}

.stf-h{margin:0 0 10px;font-size:12.5px;color:var(--ink-2)}
.stf-h b{font-family:var(--mono);color:var(--gold-lt);font-weight:700}
.stf-list{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.stf-list li{font-size:11.5px;padding:6px 11px;border-radius:999px;background:var(--raised);
  border:1px solid var(--line-soft);color:var(--ink-2)}
.stf-list li b{font-family:var(--mono);color:var(--ink);margin-left:3px}
.stf-list li.none{background:transparent;border-style:dashed}
.stf-add{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:10px 13px;border-radius:12px;background:var(--gold-a08);border:1px solid var(--gold-a20)}
.stf-add b{display:block;font-size:12.5px;font-weight:700}
.stf-add small{display:block;font-size:11px;color:var(--ink-3);margin-top:1px}
.inclist li.eq{color:var(--ink)}
.inclist li.eq b{color:var(--gold-lt)}

.disc{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin:16px 0 0;padding:14px 16px;border-radius:12px;border:1px dashed var(--line-soft)}
.disc label{flex:1;min-width:220px;font-size:12.5px;font-weight:700;color:var(--ink-2);margin:0}
.disc label small{display:block;font-size:10.5px;font-weight:400;color:var(--ink-4);margin-top:4px;line-height:1.6}
.disc-in{display:flex;align-items:center;gap:6px;flex:none}
.disc-in span{font-family:var(--mono);font-size:14px;color:var(--ink-3);white-space:nowrap}
.disc-in input{width:130px;font:inherit;font-family:var(--mono);font-size:15px;text-align:right;
  background:var(--ground-deep);border:1px solid var(--line-soft);border-radius:8px;padding:9px 11px;color:var(--ink)}
.disc-in input:focus{border-color:var(--gold);outline:none}
.qt-row .tl-std,.qt-row .tl-add{flex:none}
.obox select{width:100%;font:inherit;font-size:14px;background:var(--ground-deep);color:var(--ink);
  border:1px solid var(--line-soft);border-radius:8px;padding:11px 12px}
.obox select:focus{border-color:var(--gold);outline:none}
@media(max-width:640px){
  .sd-row{grid-template-columns:1fr auto;gap:8px}
  .sd-v{grid-column:1/-1;text-align:left}
  .eqchoices{grid-template-columns:1fr}
}
.tl-disc{display:inline-block;font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.04em;
  padding:2px 6px;border-radius:4px;margin-right:8px;vertical-align:1px;white-space:nowrap;
  background:rgba(127,184,232,.16);color:#8FC5F0}
.qt-row.disc .qt-a{color:#8FC5F0}

/* ===== 写真を見切れさせない ===== */
/* カード内の画像は、実寸の縦横比のまま置く（4:3に切り抜かない）。
   width/height 属性を出しているので、読み込み前から正しい高さが確保される。 */
.card-img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;
  border-radius:var(--r-s);margin-bottom:14px;background:#0b120b}
.grid .card{align-self:start}
/* コンテンツカードの写真も、クリックで詳細ページへ */
.selimg{display:block;position:relative;text-decoration:none;cursor:pointer}
.selimg-more{position:absolute;inset:auto 0 0 0;padding:22px 14px 11px;
  background:linear-gradient(to top,rgba(4,6,4,.88),transparent);
  color:var(--gold-lt);font-size:12px;font-weight:700;letter-spacing:.03em;
  opacity:0;transition:opacity .2s ease}
.selcard:hover .selimg-more,.selimg:focus-visible .selimg-more{opacity:1}
.selname a{color:inherit;text-decoration:none}
.selname a:hover{color:var(--gold-lt)}
.selcard:hover{border-color:var(--line)}
.card-meta{margin:12px 0 0;padding-top:10px;border-top:1px solid var(--line-soft);
  font-size:11.5px;line-height:1.7;color:var(--gold-lt)}
.fp-points{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:7px}
.fp-points li{position:relative;padding-left:22px;font-size:13px;line-height:1.7;color:var(--ink-2)}
.fp-points li::before{content:"✓";position:absolute;left:2px;top:0;color:var(--gold);font-weight:900;font-size:11px}
@media(max-width:820px){.fp{grid-template-columns:1fr;gap:20px}.fp-banner{margin-bottom:22px}}
.fp-points{margin-top:0}

/* ===== 規模で絞る（大型・中型・小型） ===== */
.selscales{display:flex;flex-wrap:wrap;gap:9px}
.selscale{appearance:none;cursor:pointer;font:inherit;text-align:left;
  padding:11px 18px;border-radius:12px;border:1px solid var(--line-soft);
  background:transparent;color:inherit;transition:.16s;min-width:150px}
.selscale:hover{border-color:var(--gold);background:var(--gold-a08)}
.selscale[aria-pressed="true"]{background:var(--gold-grad);border-color:var(--gold);color:#1A1206;
  box-shadow:0 3px 16px var(--gold-a20)}
.selscale b{display:block;font-size:15px;font-weight:800;line-height:1.3}
.selscale em{display:block;font-style:normal;font-family:var(--mono);font-size:12.5px;
  font-weight:700;color:var(--gold-lt);margin-top:3px;font-variant-numeric:tabular-nums}
.selscale small{display:block;font-size:10.5px;color:var(--ink-4);margin-top:3px;line-height:1.5}
.selscale[aria-pressed="true"] em{color:#4A3608}
.selscale[aria-pressed="true"] small{color:rgba(26,18,6,.72)}

/* おすすめバッジは色を変えて目立たせる */
.selbadge.pick{background:var(--gold-grad);color:#1A1206;
  box-shadow:0 3px 14px rgba(201,168,76,.45)}

/* ============================================================
   見積フォームの「景品を足す」
   箱単位の商品を、写真と単価を見ながら数で選べるようにする。
   ============================================================ */
.qg-bar{background:var(--gold-a08);border:1px solid var(--gold-a20);border-radius:12px;
  padding:14px 18px;margin:0 0 16px}
.qg-bar-t{margin:0;font-size:14px;font-weight:700;line-height:1.7}
.qg-bar-t b{color:var(--gold-lt)}
.qg-bar-s{margin:6px 0 0;font-size:12.5px;color:var(--ink-2);line-height:1.7}
.qg-bar-s b{color:var(--gold-lt)}

/* 選択中のまとめ。選んだ瞬間に金額が見えるように、カードの上に固定で出す */
.qg-sum{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;
  background:var(--raised);border:1px solid var(--gold-a20);border-radius:12px;
  padding:12px 16px;margin:0 0 14px}
@media(min-width:720px){.qg-sum{position:sticky;top:100px;z-index:5}}
.qg-sum-k{font-size:12px;color:var(--ink-3);letter-spacing:.08em}
.qg-sum-n{font-size:14px;font-weight:700}
.qg-sum-v{margin-left:auto;font-family:var(--mono);font-size:17px;font-weight:700;color:var(--gold-lt)}
.qg-sum-v s{font-size:12px;color:var(--ink-3);font-weight:400;margin-left:6px}
.qg-sum-v em{font-style:normal;font-size:11px;color:var(--gold-lt);
  background:var(--gold-a08);border:1px solid var(--gold-a20);border-radius:999px;
  padding:2px 8px;margin-left:6px;font-family:var(--body)}
.qg-sum-clr{font-size:12px;color:var(--ink-3);background:none;border:1px solid var(--line-soft);
  border-radius:999px;padding:5px 12px;cursor:pointer}
.qg-sum-clr:hover{color:var(--ink);border-color:var(--line)}

.qg-cards{display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}
@media(min-width:520px){.qg-cards{gap:10px;grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}}
@media(min-width:900px){.qg-cards{gap:12px;grid-template-columns:repeat(auto-fill,minmax(142px,1fr))}}
.qg-card{display:flex;flex-direction:column;background:var(--panel);
  border:1px solid var(--line-soft);border-radius:14px;overflow:hidden;
  transition:border-color .15s,background .15s}
.qg-card.on{border-color:var(--gold-a20);background:var(--gold-a08)}
.qg-card-img{position:relative;line-height:0;background:#0E0E0C}
.qg-card-img img{width:100%;height:auto;aspect-ratio:5/4;object-fit:cover}
.qg-card-pop{position:absolute;top:6px;left:6px;font-size:9.5px;font-weight:700;
  background:var(--gold);color:#1A1206;border-radius:999px;padding:2px 7px;letter-spacing:.03em}
.qg-card-body{padding:9px 10px 5px;display:flex;flex-direction:column;gap:2px;flex:1}
.qg-card-n{font-size:12.5px;font-weight:700;line-height:1.45}
@media(min-width:520px){.qg-card-n{font-size:12.5px}}
.qg-card-q{font-size:10.5px;color:var(--ink-3)}
.qg-card-p{font-family:var(--mono);font-size:13.5px;font-weight:700;color:var(--gold-lt);margin-top:1px}
.qg-card-p s{font-size:10px;color:var(--ink-3);font-weight:400;margin-left:5px;font-family:var(--body)}
.qg-card-u{font-size:10.5px;color:var(--ink-2)}
.qg-card-pick{display:flex;align-items:center;justify-content:space-between;gap:6px;
  padding:6px 10px 10px;flex-wrap:wrap}
.qg-card-pick .stepper{gap:6px;padding:3px 5px}
.qg-card-pick .stepper button{width:26px;height:26px}
.qg-card-pick .stepper .n{font-size:14px;min-width:20px}
.qg-card-sum{font-family:var(--mono);font-size:11.5px;font-weight:700;color:var(--gold-lt);
  margin-left:auto;white-space:nowrap}

.qg-ask{margin:18px 0 0;background:var(--raised);border:1px solid var(--line-soft);
  border-radius:12px;padding:14px 18px}
.qg-ask-t{margin:0 0 8px;font-size:13px;font-weight:700;color:var(--ink-2)}
.qg-ask ul{margin:0;padding-left:1.2em;display:grid;gap:5px}
.qg-ask li{font-size:13px;line-height:1.6}
.qg-ask li small{display:block;font-size:11.5px;color:var(--ink-3);line-height:1.7}
.qg-ask-f{margin:10px 0 0;font-size:12px;color:var(--ink-3);line-height:1.7}
.qg-note{margin:14px 0 0;font-size:12px;color:var(--ink-3);line-height:1.85}
.qg-note b{color:var(--ink-2)}

/* 景品ピッカー：セット特別価格（恐竜ミニフィギュア）と、価格ご相談の商品 */
.qg-card-p s{font-family:var(--body);font-size:11px;font-weight:400;color:var(--ink-3);
  margin-right:7px;text-decoration:line-through}
.qg-card-p b{font-family:var(--mono)}
.qg-card-p-ask{font-size:12px}
.qg-card-p-ask s{font-size:12px;margin-right:0}
.qg-card-set{border-color:var(--gold-a20);background:var(--gold-a08)}
.qg-card-set-b{background:var(--gold);color:#1A1206}
.qg-card-ask{opacity:.94}
.qg-card-ask-b{background:rgba(255,255,255,.14);color:var(--ink)}
.qg-card-askn{font-size:10.5px;color:var(--ink-3);line-height:1.55}
.qg-jump{font-size:12px;font-weight:700;white-space:nowrap;color:var(--gold-lt);background:none;
  border:1px solid var(--gold-a20);border-radius:999px;padding:7px 13px;cursor:pointer;
  width:100%;text-align:center}
.qg-jump:hover{background:var(--gold-a08)}
/* ジャンプ先を一瞬だけ光らせる */
.opt-row.flash{animation:optflash 1.5s ease-out}
@keyframes optflash{
  0%,55%{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-a20)}
  100%{border-color:var(--line-soft);box-shadow:none}
}
@media (prefers-reduced-motion:reduce){.opt-row.flash{animation:none;border-color:var(--gold)}}

/* 絵本オプションの料金表：実際にかかる金額をひと目で分かる大きさにする */
#ehon-price th{line-height:1.5;font-size:12px;white-space:normal}
#ehon-price td{padding-top:14px;padding-bottom:14px}
#ehon-price td strong{font-family:var(--mono);font-size:clamp(17px,3.4vw,24px);
  font-weight:700;color:var(--gold-lt);letter-spacing:.01em}
#ehon-price td:first-child strong{font-family:var(--body);font-size:clamp(15px,2.8vw,18px);color:var(--ink)}
#ehon-price tbody tr:nth-child(2) td{background:var(--gold-a08)}

/* エアースクリーンは白背景の商品写真。全幅で敷くと白い板に見えるので、
   白いカードに載せた見え方にして、サイズも抑える。 */
#airscreen figure{max-width:440px;margin-left:auto!important;margin-right:auto!important;
  background:#fff;border-radius:var(--r-l)}
#airscreen figure img{mix-blend-mode:normal}
#airscreen figcaption{background:var(--panel)}

/* エアースクリーンは「備品の紹介」なので、見せ場ではなく小さく扱う */
#airscreen .h2{font-size:clamp(19px,3vw,24px)}
#airscreen figure{max-width:250px!important}
#airscreen figcaption{font-size:11.5px!important;padding:9px 12px!important}

/* おすすめ以外のプランにも種別ラベルを出せるようにする（3D立体など） */
.plan-var{border-color:var(--line)}
.badge-var{background:var(--panel);color:var(--gold-lt);border:1px solid var(--gold-a20)}
/* 平面版と立体版の比較表：結論が読み取れるように、推す側の列を敷く */
#compare td:nth-child(2){background:var(--gold-a08)}
#compare th:nth-child(2){background:var(--gold-a08);color:var(--gold-lt)}
#compare td strong{color:var(--gold-lt)}
/* 比較表の下の結論。1行目だけ大きく見せる */
#compare .note strong:first-of-type{font-size:1.25em;color:var(--gold-lt);display:inline-block;margin-bottom:6px}

/* ---- 発注ボタンと確認画面 ---- */
.oorder{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line-soft)}
.btn-order{font-size:16px}
.fnote-order{margin-top:8px}
.oconf{margin-top:16px;padding:18px 16px;border:1px solid var(--gold-a20);
  border-radius:14px;background:var(--gold-a08)}
@media(min-width:640px){.oconf{padding:22px 22px}}
.oconf-h{font-size:16px;font-weight:800;margin:0 0 12px;letter-spacing:.02em}
.oconf-sum{border:1px solid var(--line-soft);border-radius:10px;background:var(--panel);
  padding:10px 14px;margin-bottom:14px}
.oconf-row{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  padding:5px 0;font-size:13px;color:var(--ink-2)}
.oconf-row b{color:var(--ink);font-weight:700;text-align:right}
.oconf-row-t{border-top:1px solid var(--line-soft);margin-top:4px;padding-top:9px}
.oconf-row-t b{font-family:var(--mono);font-size:18px;color:var(--gold-lt)}
.oconf-lead{font-size:12.5px;color:var(--ink-3);line-height:1.8;margin:0 0 14px}
.oconf-f{margin-bottom:14px}
.oconf .field-wide{grid-column:1/-1}
.req{color:var(--clay,#E0603A);font-weight:700;margin-left:3px;font-size:12px}
.oconf-agree{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;
  border:1px solid var(--gold-a20);border-radius:10px;background:var(--panel);
  cursor:pointer;font-size:13.5px;line-height:1.7}
.oconf-agree input{width:20px;height:20px;flex:0 0 20px;margin-top:1px;accent-color:var(--gold)}
.oconf-act{display:flex;gap:10px;margin-top:14px}
.oconf-act .btn{flex:1}
.oconf-act .btn-gold{flex:2}
.ordersent-lg{font-size:13.5px;line-height:1.9;padding:16px 18px;text-align:left}

/* ===== お見積り明細：中身がわかるようにする（2026-09-11） ===== */

/* 「この料金に含まれるもの」を、親の行にぶら下げて並べる。
   金額は動かさないので「含む」と書くだけ。お客様が中身を確かめられるようにするため。 */
.qt-subs{border-left:2px solid var(--gold-a20);margin:0 0 0 10px}
.qt-row.qt-sub{padding:7px 4px 7px 14px;border-bottom:1px dashed rgba(255,255,255,.05);animation:none}
.qt-row.qt-sub .qt-n{font-size:12.5px;color:var(--ink-3);line-height:1.55}
.qt-row.qt-sub .qt-n::before{content:"└";margin-right:7px;color:var(--ink-4)}
.qt-row.qt-sub .qt-q,.qt-row.qt-sub .qt-u{color:var(--ink-4)}
.qt-row.qt-sub .qt-a{font-family:var(--body);font-size:11px;font-weight:700;color:var(--ink-4);letter-spacing:.04em}
.qt-subs .qt-row.qt-sub:last-child{border-bottom:none}

/* 単価 × 数量 を品名の下にも出す。日数を変えたときに、どこが効いたのか目で追えるように */
.tl-calc{display:block;margin-top:3px;font-style:normal;font-family:var(--mono);
  font-size:11.5px;color:var(--ink-4);font-variant-numeric:tabular-nums}

/* 金額が変わった行だけ、一度だけ光らせる */
@keyframes qtchg{
  0%   {background:var(--gold-a20)}
  60%  {background:var(--gold-a08)}
  100% {background:transparent}
}
.qt-row.chg{animation:qtchg 1.5s ease-out}
.qt-row.chg .qt-a{color:var(--gold-lt)}
@media(prefers-reduced-motion:reduce){
  .qt-row.chg{animation:none;background:var(--gold-a08)}
}

/* スマホでは、含まれるものの「含む」列だけ残す */
@media(max-width:960px){
  .qt-row.qt-sub{grid-template-columns:1fr auto}
}

/* 印刷する見積書の「含む」行 */
.q-table tr.q-sub td{font-size:10.5px;color:#555;padding-top:3px;padding-bottom:3px;border-bottom:none}
.q-table tr.q-sub td.c-amt{font-size:10px;letter-spacing:.04em}
.qt-subs-h{margin:8px 0 2px;padding:0 4px 0 14px;font-size:10.5px;font-weight:800;
  letter-spacing:.06em;color:var(--ink-4);display:flex;gap:10px;align-items:baseline}
.qt-subs-h small{font-weight:400;letter-spacing:0;color:var(--ink-4);opacity:.8}

/* ============================================================
   資料ダウンロードページ（/docs/◯◯/）
   ------------------------------------------------------------
   左に中身の見本、右にフォーム。
   スマホでは「フォームを先に」出す（見本を全部スクロールさせない）。
   ============================================================ */
.docdl .dd{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.docdl .dd-form{position:sticky;top:92px}
.docdl .dd-form .eyebrow{text-align:left}
.docdl .dd-form .h2{text-align:left;font-size:clamp(22px,2.6vw,30px);margin:0 0 12px}
.docdl .dd-form .lede{text-align:left;margin:0 0 22px}
.docdl .cform .btn{margin-top:14px}

/* 中身の見本 */
.dd-shots{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.dd-shot{margin:0;border:1px solid var(--line-soft);border-radius:var(--r-m);overflow:hidden;background:var(--panel)}
.dd-shot img{display:block;width:100%;height:auto}
.dd-shot figcaption{font-size:11.5px;color:var(--ink-3);padding:7px 10px;letter-spacing:.02em}
.dd-shot.is-cover{grid-column:1 / -1;border-color:var(--gold-a20)}

.dd-spec{margin:16px 0 0;font-family:var(--mono);font-size:12.5px;color:var(--ink-3);
  letter-spacing:.02em;font-variant-numeric:tabular-nums}
.dd-spec b{color:var(--gold-lt);font-family:var(--body);font-size:14px;margin-right:2px}

/* 目次。番号は「P.01」の形で自分で振る（中身の順番そのままなので情報になる） */
.dd-toc{list-style:none;counter-reset:dd 1;margin:20px 0 0;padding:0;
  border-top:1px solid var(--line-soft)}
.dd-toc li{counter-increment:dd;position:relative;padding:11px 0 11px 52px;
  border-bottom:1px solid var(--line-soft);font-size:13.5px;color:var(--ink-2);line-height:1.7}
.dd-toc li::before{content:"P." counter(dd,decimal-leading-zero);position:absolute;left:0;top:12px;
  font-family:var(--mono);font-size:11px;color:var(--gold);letter-spacing:.06em;
  font-variant-numeric:tabular-nums}

.dd-alt{margin:18px 0 0;font-size:12.5px;color:var(--ink-3);line-height:1.9;text-align:center}

@media(max-width:960px){
  .docdl .dd{grid-template-columns:1fr;gap:30px}
  /* スマホはフォームを先に */
  .docdl .dd-form{position:static;order:-1}
  .dd-shots{grid-template-columns:1fr 1fr}
  .dd-toc li{padding-left:46px}
}
@media(max-width:520px){
  .dd-shots{grid-template-columns:1fr}
  .dd-shot.is-cover{grid-column:auto}
}

/* ============================================================
   資料の一覧（/docs/）
   ============================================================ */
.dd-toc.nonum{counter-reset:none}
.dd-toc.nonum li{padding-left:18px}
.dd-toc.nonum li::before{content:"—";font-family:var(--body);color:var(--gold);top:10px}

/* トータル資料（上に1枚だけ大きく） */
.dt{display:grid;grid-template-columns:1.05fr 1fr;gap:34px;align-items:center;
  background:var(--panel);border:1px solid var(--gold-a20);border-radius:var(--r-l);
  padding:28px;color:inherit;transition:border-color .2s}
.dt:hover{border-color:var(--gold);color:inherit}
.dt-shots{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dt-shots figure{margin:0;border:1px solid var(--line-soft);border-radius:var(--r-s);overflow:hidden;background:#000}
.dt-shots figure.is-cover{grid-column:1 / -1;border-color:var(--gold-a20)}
.dt-shots img{display:block;width:100%;height:auto}
.dt-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.28em;color:var(--gold);margin:0 0 8px}
.dt-body .h3{font-size:clamp(20px,2.4vw,27px);margin:0 0 10px}
.dt-m{font-family:var(--mono);font-size:12.5px;color:var(--ink-3);margin:0 0 16px;
  font-variant-numeric:tabular-nums}
.dt-m b{font-family:var(--body);font-size:14px;color:var(--gold-lt);margin-right:2px}
.dt-p{list-style:none;margin:0 0 20px;padding:0;border-top:1px solid var(--line-soft)}
.dt-p li{padding:10px 0;border-bottom:1px solid var(--line-soft);font-size:13px;
  color:var(--ink-3);line-height:1.7}
.dt-p li b{display:block;color:var(--ink-2);font-size:13.5px;margin-bottom:1px}
.dt .btn{pointer-events:none}

/* 分類ごとの一覧 */
.dg + .dg{margin-top:44px;padding-top:40px;border-top:1px solid var(--line-soft)}
.dg-head h3{font-family:var(--display);font-weight:900;font-size:clamp(18px,2.1vw,23px);
  margin:0 0 4px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.dg-head h3 span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--gold);font-weight:500}
.dg-head p{font-size:13.5px;color:var(--ink-3);margin:0 0 20px;line-height:1.8}
.dg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

.dc{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line-soft);
  border-radius:var(--r-m);overflow:hidden;color:inherit;transition:border-color .2s,transform .2s}
.dc:hover{border-color:var(--gold);color:inherit;transform:translateY(-2px)}
.dc-img{background:#000;border-bottom:1px solid var(--line-soft)}
.dc-img img{display:block;width:100%;height:auto}
.dc-b{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.dc-n{font-family:var(--display);font-weight:900;font-size:16px;line-height:1.45;margin:0 0 6px}
.dc-bg{display:inline-block;font-family:var(--body);font-size:10px;font-weight:800;letter-spacing:.04em;
  padding:2px 7px;border-radius:4px;margin-left:7px;vertical-align:2px;white-space:nowrap}
.dc-bg.b-rec{background:var(--gold-a20);color:var(--gold-lt);border:1px solid var(--gold-a20)}
.dc-bg.b-new{background:var(--gold);color:#151008}
.dc-bg.b-res{background:rgba(122,214,160,.14);color:#7AD6A0;border:1px solid rgba(122,214,160,.3)}
.dc-o{font-size:12.5px;color:var(--ink-3);margin:0 0 12px;line-height:1.7}
.dc-m{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:auto 0 12px;
  padding-top:10px;border-top:1px solid var(--line-soft);
  font-family:var(--mono);font-size:11px;color:var(--ink-4);font-variant-numeric:tabular-nums}
.dc-m b{font-family:var(--body);font-size:13px;color:var(--gold-lt);white-space:nowrap}
.dc-dl{display:block;text-align:center;font-size:13px;font-weight:700;color:var(--gold);
  border:1px solid var(--gold-a20);border-radius:999px;padding:9px 12px}
.dc:hover .dc-dl{background:var(--gold-a08);border-color:var(--gold)}

@media(max-width:1000px){
  .dg-grid{grid-template-columns:repeat(2,1fr)}
  .dt{grid-template-columns:1fr;gap:24px}
}
@media(max-width:600px){
  .dg-grid{grid-template-columns:1fr}
  .dt{padding:20px}
}

/* 資料ダウンロードの帯。ヘッダーのボタンから飛んできたとき、
   固定ヘッダーの下に隠れないように余白をとる（`.sec` と同じ扱い） */
.docband{scroll-margin-top:88px}

/* ============================================================
   実物の見本（鑑定書・認定証など）
   縦長のA4を切らずに全体見せる。右に説明を置く。
   ============================================================ */
.smp-row{display:grid;grid-template-columns:470px 1fr;gap:44px;align-items:start}
.smp-fig{margin:0}
.smp-fig img{display:block;width:100%;height:auto;border-radius:var(--r-m);
  border:1px solid var(--gold-a20);background:#0B0814}
.smp-fig figcaption{margin-top:10px;font-size:12.5px;color:var(--ink-3);line-height:1.7;text-align:center}
.smp-body{display:grid;gap:0;border-top:1px solid var(--line-soft)}
.smp-p{padding:18px 0;border-bottom:1px solid var(--line-soft)}
.smp-p b{display:block;font-family:var(--display);font-weight:900;font-size:17px;
  color:var(--gold-lt);margin-bottom:6px;line-height:1.5}
.smp-p p{font-size:14px;color:var(--ink-2);line-height:1.95}
.smp-note{margin:18px 0 0;font-size:12.5px;color:var(--ink-3);line-height:1.85}

@media(max-width:1000px){
  .smp-row{grid-template-columns:1fr;gap:28px;justify-items:center}
  .smp-fig{max-width:470px}
  .smp-body{width:100%}
}

/* 資料のダウンロード完了画面。つぎの一歩（打ち合わせ予約）へ */
.cd-next{margin:16px 0 14px;font-size:13.5px;color:var(--ink-2);line-height:1.9;
  padding-top:14px;border-top:1px solid var(--line-soft)}
.cd-next b{color:var(--gold-lt)}
.cform-done .btn-row{justify-content:center}

/* ---------- 一覧表の右端「資料」ボタン ----------
   /contents/ の比較表から、そのコンテンツの資料へ1タップで行けるようにする。
   表の中なので背は低く、でも指で押せる幅（最低 76px）は確保する。 */
td.sp-dlc{padding:8px 12px;text-align:center;white-space:nowrap}
.sp-acts{display:inline-flex;gap:7px}
.sp-dl{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-width:82px;padding:9px 14px;border-radius:999px;
  background:var(--gold-a12);border:1px solid var(--gold-a20);
  color:var(--gold-lt);font-size:13px;font-weight:800;line-height:1;
  text-decoration:none;transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.sp-dl span{font-size:13px}
.sp-dl:hover{background:var(--gold-grad);border-color:transparent;color:#1A1206}
/* 見積もりは2つ目なので、少し控えめに（金色は資料のほう） */
.sp-est{background:transparent;border-color:var(--line);color:var(--ink-2)}
.sp-est:hover{background:var(--ink-2);border-color:transparent;color:var(--ground)}
.sp-dl:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- 資料のまとめ取り（/contents/ の表の上） ----------
   主役（資料一式ZIP）を1枚の横長にして、ほかの3つは小さいタイルにする。
   4つを同じ大きさで並べると「どれを押せばいいか」が伝わらないため。 */
.dpk-main{
  display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;
  padding:24px 26px;border-radius:var(--r-m);text-decoration:none;
  background:linear-gradient(150deg,var(--gold-a12),transparent 62%),var(--panel);
  border:1px solid var(--gold-a20);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.dpk-main:hover{transform:translateY(-3px);border-color:var(--gold);
  box-shadow:0 16px 40px rgba(0,0,0,.3)}
.dpk-main .dpk-i{font-size:38px;line-height:1}
.dpk-b{display:block;min-width:0}
.dpk-b b{display:block;font-size:clamp(19px,3.4vw,24px);font-weight:900;color:var(--ink);line-height:1.4}
.dpk-b em{display:block;font-style:normal;font-family:var(--mono);font-size:12.5px;
  letter-spacing:.06em;color:var(--gold);margin-top:5px}
.dpk-b i{display:block;font-style:normal;font-size:14px;color:var(--ink-3);
  line-height:1.8;margin-top:7px}
.dpk-main .dpk-btn{
  display:block;white-space:nowrap;padding:15px 28px;border-radius:999px;
  background:var(--gold-grad);color:#1A1206;font-size:15px;font-weight:900;
  box-shadow:0 8px 24px rgba(201,168,76,.26);
}

/* ほかの3つ */
.dpk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.dpk-c{
  display:block;padding:20px 20px 18px;border-radius:var(--r-m);text-decoration:none;
  background:var(--panel);border:1px solid var(--line-soft);
  transition:transform .2s ease,border-color .2s ease;
}
.dpk-c:hover{transform:translateY(-3px);border-color:var(--gold-a20)}
.dpk-c .dpk-i{display:block;font-size:24px;line-height:1;margin-bottom:10px}
.dpk-c b{display:block;font-size:16px;font-weight:800;color:var(--ink);line-height:1.45}
.dpk-c em{display:block;font-style:normal;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.05em;color:var(--gold);margin-top:4px}
.dpk-c i{display:block;font-style:normal;font-size:13px;color:var(--ink-3);
  line-height:1.8;margin-top:8px}
.dpk-go{display:block;margin-top:12px;font-size:13.5px;font-weight:800;color:var(--gold-lt)}
.dpk-c:hover .dpk-go{color:var(--gold)}

.dpk-note{margin:20px 0 0;font-size:13.5px;line-height:1.95;color:var(--ink-3);text-align:center}
@media(max-width:820px){
  .dpk-main{grid-template-columns:auto 1fr;gap:14px 16px;padding:20px}
  .dpk-main .dpk-btn{grid-column:1 / -1;text-align:center}
  .dpk-grid{grid-template-columns:1fr}
  .dpk-c{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:start;padding:16px 18px}
  .dpk-c .dpk-i{grid-row:1 / 4;margin:0;font-size:26px}
  .dpk-c i{margin-top:6px}
  .dpk-go{grid-column:2;margin-top:8px}
}

/* ---------- コンテンツ一覧のカードにも「資料」ボタン ----------
   カードの中にリンクを入れ子にできないので、箱にして2つ並べる。 */
.card-hasdl{display:flex;flex-direction:column;padding:0;overflow:hidden}
.card-hasdl .card-main{display:block;flex:1;padding:22px;color:inherit;text-decoration:none}
.card-hasdl .card-main:hover .h3{color:var(--gold-lt)}
.card-hasdl .card-dl{
  display:block;margin:0;padding:13px 16px;text-align:center;
  border-top:1px solid var(--line-soft);background:var(--gold-a08);
  color:var(--gold-lt);font-size:13px;font-weight:800;text-decoration:none;
  transition:background .18s ease,color .18s ease;
}
.card-hasdl .card-dl:hover{background:var(--gold-grad);color:#1A1206}
.card-hasdl .card-dl:focus-visible{outline:2px solid var(--gold);outline-offset:-3px}
/* 資料のまとめ取りが4枚になったとき（プライスリストを足したぶん） */
@media(min-width:901px){
  .dpk-grid:has(.dpk-c:nth-child(4)){grid-template-columns:1.2fr 1fr 1fr 1fr}
}
/* 資料ボタンつきのカードは、行内で高さをそろえてボタンの位置を合わせる。
   （.grid .card は align-self:start なので、ここで打ち消します） */
.grid .card.card-hasdl{align-self:stretch}

/* ---------- 12か月カレンダー（/yearly/） ---------- */
.c12{list-style:none;margin:0;padding:0;display:grid;gap:12px;
  grid-template-columns:repeat(2,1fr)}
@media(min-width:720px){.c12{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.c12{grid-template-columns:repeat(4,1fr)}}
.c12-c{border:1px solid var(--line-soft);border-radius:var(--r-s);background:var(--panel);
  padding:15px 16px 16px;transition:border-color .2s ease,transform .2s ease}
.c12-c:hover{border-color:var(--gold-a20);transform:translateY(-2px)}
.c12-m{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--gold);margin:0 0 8px;
  padding-bottom:7px;border-bottom:1px solid var(--line-soft);letter-spacing:.04em}
.c12-t{font-size:14.5px;font-weight:800;color:var(--ink);line-height:1.5;margin:0 0 5px}
.c12-t a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(255,255,255,.22);
  text-underline-offset:3px}
.c12-t a:hover{color:var(--gold-lt)}
.c12-s{font-size:12.5px;color:var(--ink-3);line-height:1.75;margin:0}
.c12-y{font-family:var(--mono);font-size:12.5px;color:var(--gold-lt);margin:7px 0 0}

/* ---------- 大きな誘導バナー（promo） ---------- */
.promo .wrap{max-width:1140px}
.pm{position:relative;display:block;border-radius:var(--r-l,22px);overflow:hidden;
  text-decoration:none;isolation:isolate;min-height:340px;
  border:1px solid var(--gold-a20);transition:transform .25s ease,box-shadow .25s ease}
.pm:hover{transform:translateY(-3px);box-shadow:0 22px 60px rgba(0,0,0,.45)}
.pm-bg{position:absolute;inset:0;z-index:0}
.pm-bg img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s ease}
.pm:hover .pm-bg img{transform:scale(1.04)}
.pm::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(6,8,10,.95) 0%,rgba(6,8,10,.88) 44%,rgba(6,8,10,.38) 100%)}
.pm-in{position:relative;z-index:2;padding:44px 46px;max-width:640px}
.pm-eb{font-family:var(--mono);font-size:11.5px;letter-spacing:.3em;color:var(--gold);
  text-transform:uppercase;margin:0 0 12px}
.pm-h{font-family:var(--display);font-weight:900;font-size:clamp(27px,4.4vw,42px);
  line-height:1.3;color:var(--ink);margin:0 0 14px;letter-spacing:.01em}
.pm-b{font-size:14.5px;line-height:1.95;color:var(--ink-2);margin:0 0 18px;max-width:520px}
.pm-b strong{color:var(--gold-lt)}
.pm-st{list-style:none;display:flex;flex-wrap:wrap;gap:10px 26px;margin:0 0 22px;padding:0}
.pm-st li{display:flex;flex-direction:column}
.pm-st b{font-family:var(--display);font-size:clamp(21px,3.2vw,27px);font-weight:900;
  color:var(--gold-lt);line-height:1.2}
.pm-st span{font-size:12px;color:var(--ink-3);margin-top:3px}
.pm-btn{display:inline-block;background:var(--gold-grad);color:#1A1206;font-size:14.5px;
  font-weight:900;padding:14px 28px;border-radius:999px;
  box-shadow:0 10px 28px rgba(201,168,76,.26)}
@media(max-width:760px){
  .pm{min-height:0}
  .pm-in{padding:30px 24px 32px;max-width:none}
  .pm::after{background:linear-gradient(175deg,rgba(6,8,10,.72) 0%,rgba(6,8,10,.95) 42%)}
  .pm-btn{display:block;text-align:center}
}

/* ---------- せかわんGO. の無料特典枠（optbox） ---------- */
.optbox{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:22px 20px;max-width:880px;margin:0 auto}
.optbox-tag{display:inline-block;margin:0 0 14px;background:var(--lime);color:#08140A;font-weight:900;
  font-size:12.5px;letter-spacing:.06em;padding:6px 14px;border-radius:999px}
.optbox-in{display:grid;gap:18px;grid-template-columns:1fr;align-items:center}
@media(min-width:760px){.optbox-in{grid-template-columns:380px 1fr;gap:26px}}
.optbox-img{margin:0;border-radius:14px;overflow:hidden;line-height:0}
.optbox-img img{width:100%;height:auto;display:block}
.optbox-h{font-family:var(--display);font-weight:900;font-size:clamp(19px,3.6vw,25px);line-height:1.45;margin:0;letter-spacing:.01em}
.optbox-p{margin:12px 0 0;font-size:14.5px;line-height:1.9;color:var(--ink-2)}
.optbox-btn{margin-top:16px}
.optbox-note{margin:12px 0 0;font-size:12.5px;line-height:1.8;color:var(--ink-3)}

/* ---------- 文字入りバナー（切り抜かずに全部見せる） ---------- */
.banner-sec{padding-top:26px;padding-bottom:0;border-top:0}
.bnr{margin:0;border-radius:18px;overflow:hidden;line-height:0;border:1px solid var(--line-soft)}
.bnr img{width:100%;height:auto;display:block}
.bnr-cap{margin:12px 0 0;text-align:center;font-size:12.5px;color:var(--ink-3);line-height:1.8}