/* =====================================================================
   hp/site.css ── SUIMOW 公式サイトの共通の見た目（B-293・2026-10-15）
   運営者裁定10/15「縦に間延びして手作り感がある。世間的に良いとされるHPの公約数で型枠を」→見本「めちゃよくなった。これでよい」。
   型＝固定のヘッダー（ロゴ・メニュー・お問い合わせのボタン）／冒頭は横いっぱいの紺の帯＋アプリの画面／
   節ごとに白と薄い紺の帯を交互／カードを横に並べる／下にお問い合わせの帯／濃紺のフッター。
   JavaScriptなし（画面のタブ＝ラジオボタンとCSS・スマホのメニュー＝details）。
   書体＝BIZ UDPゴシック（fonts/ のサブセット。文章や見出しを変えたら scripts/hp_subset_fonts.py を再実行）。
   ※ UI設計原則V節（第2種＝色4つ・グラデーションと影と淡色の帯なし・縦に積む）は HP には当てない（運営者裁定10/15＝本便）。
     印刷用の1ページ（insatsu.html）は従来どおり V節の見た目のまま。
   ===================================================================== */
@font-face{font-family:"BIZ UDPGothic W";font-weight:400;font-display:swap;src:local("BIZ UDPGothic"),url("fonts/BIZUDPGothic-Regular.subset.woff2?v=b296") format("woff2")}
@font-face{font-family:"BIZ UDPGothic W";font-weight:700;font-display:swap;src:local("BIZ UDPGothic Bold"),url("fonts/BIZUDPGothic-Bold.subset.woff2?v=b296") format("woff2")}
:root{--navy:#003D79;--navy-d:#002a55;--navy-l:#0a5aa8;--ink:#1d2733;--sub:#5a6675;--bg2:#eef3f9;--line:#d6dee8;--w:1120px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:#fff;color:var(--ink);font-family:"BIZ UDPGothic W","BIZ UDPゴシック","Hiragino Sans","Yu Gothic UI",Meiryo,sans-serif;
  font-size:16px;line-height:1.8;-webkit-text-size-adjust:100%;overflow-wrap:anywhere}
img{max-width:100%;height:auto}
a{color:var(--navy)}
a:focus-visible,label:focus-visible,summary:focus-visible{outline:3px solid #f2b705;outline-offset:2px}
.in{max-width:var(--w);margin:0 auto;padding:0 24px}

/* ---- ヘッダー（固定） ---- */
header.g{position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid var(--line)}
header.g .in{display:flex;align-items:center;gap:28px;height:68px}
header.g .logo img{height:44px;width:auto;display:block}
header.g nav.menu{margin-left:auto;display:flex;gap:26px;font-weight:700;font-size:15px}
header.g nav.menu a{text-decoration:none;color:var(--ink)}
header.g nav.menu a[aria-current="page"]{color:var(--navy);box-shadow:inset 0 -3px 0 var(--navy)}
header.g nav.menu a:hover{color:var(--navy)}
details.spmenu{display:none}

/* ---- ボタン ---- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:6px;font-weight:700;text-decoration:none;font-size:15px;line-height:1.2;white-space:nowrap}
.btn.p{background:var(--navy);color:#fff}
.btn.w{background:#fff;color:var(--navy)}
.btn.o{border:2px solid #fff;color:#fff}
.btn.oo{border:2px solid var(--navy);color:var(--navy);background:#fff}
.more{font-weight:700;text-decoration:none;font-size:15px}

/* ---- 冒頭（トップ） ---- */
.hero{background:linear-gradient(115deg,var(--navy-d),var(--navy) 60%,var(--navy-l));color:#fff;overflow:hidden}
.hero .in{display:grid;grid-template-columns:1fr 1.05fr;gap:40px;align-items:center;min-height:560px;padding-top:56px;padding-bottom:56px}
.hero .ey{font-size:14px;letter-spacing:.08em;opacity:.85;margin:0 0 14px}
.hero h1{font-size:44px;line-height:1.35;margin:0 0 22px;font-weight:700}
.hero p.lead{margin:0 0 10px;font-size:16px;opacity:.95}
.hero .acts{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
.vis{position:relative;height:420px}
.vis .pc{position:absolute;right:0;top:10px;width:100%;aspect-ratio:16/10;border-radius:10px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.35);background:#fff;border:6px solid #e9eef5}
.vis .pc img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block}
.vis .sp{position:absolute;left:-18px;bottom:-10px;width:150px;aspect-ratio:390/724;border-radius:22px;overflow:hidden;border:6px solid #111;box-shadow:0 18px 40px rgba(0,0,0,.4);background:#fff}
.vis .sp img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}

/* ---- 下のページの見出しの帯 ---- */
.pagehead{background:var(--navy);color:#fff;padding:40px 0 36px}
.pagehead .crumb{font-size:13px;margin:0 0 8px;opacity:.85}
.pagehead .crumb a{color:#fff}
.pagehead h1{font-size:34px;margin:0;line-height:1.4}

/* ---- 節 ---- */
section{padding:80px 0}
section.alt{background:var(--bg2)}
.sh{margin:0 0 36px}
.sh .en{display:block;font-size:13px;letter-spacing:.14em;color:var(--navy);font-weight:700;margin-bottom:6px}
.sh h2{font-size:30px;margin:0;line-height:1.4}
.sh p{color:var(--sub);margin:12px 0 0;max-width:46em}
.center{text-align:center}
.center .sh p{margin-left:auto;margin-right:auto}
.lead3 p{font-size:18px;margin:0 0 6px}
.gr{margin:0 0 18px}
.gr p{margin:0 0 6px}
p.note,.lead3 p.note{font-size:12px;color:var(--sub);margin-top:14px}
.callout{margin-top:32px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:22px 26px}
.callout p{margin:0 0 4px;font-weight:700}

/* ---- 数字の帯 ---- */
.stats{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:40px}
.stats div{padding:28px 20px;text-align:center}
.stats div+div{border-left:1px solid var(--line)}
.stats b{display:block;font-size:40px;color:var(--navy);line-height:1.2;font-variant-numeric:tabular-nums}
.stats span{font-size:14px;color:var(--sub);display:block;word-break:auto-phrase;text-wrap:balance}   /* B-294：単語の途中で折り返さない（「処／理場」） */

/* ---- カード ---- */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:26px 24px}
.card h3{font-size:18px;margin:0 0 10px;color:var(--navy);line-height:1.5}
.card p{margin:0;font-size:15px;line-height:1.8}
.stage .no{font-size:13px;font-weight:700;color:#fff;background:var(--navy);display:inline-block;padding:3px 10px;border-radius:99px;margin-bottom:12px}
.stage h3{font-size:26px;margin:0 0 8px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 18px}
.chips span{font-size:13px;border:1px solid var(--line);border-radius:99px;padding:4px 12px;background:var(--bg2)}
.mezasu{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:28px 0 0;padding:0;list-style:none;counter-reset:m}
.mezasu li{background:#fff;border:1px solid var(--line);border-radius:10px;padding:20px 22px 20px 64px;position:relative;font-size:15px}
.mezasu li::before{counter-increment:m;content:counter(m);position:absolute;left:20px;top:18px;width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center}
.mi{font-weight:700;margin:32px 0 0}

/* ---- 画面のタブ（JavaScriptなし＝ラジオボタン） ---- */
.tabs>input{position:absolute;opacity:0;pointer-events:none}
.tablist{display:flex;gap:6px;flex-wrap:wrap;border-bottom:2px solid var(--line);margin-bottom:24px}
.tablist label{padding:10px 16px;font-weight:700;font-size:14px;color:var(--sub);border-bottom:3px solid transparent;margin-bottom:-2px;cursor:pointer}
.panel{display:none;grid-template-columns:2fr 1fr;gap:32px;align-items:center}
.panel .frame{display:block;border-radius:10px;overflow:hidden;border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,40,90,.12);aspect-ratio:16/10;background:#fff}
.panel .frame img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block}
.panel h3{font-size:22px;margin:0 0 10px}
.panel p{margin:0}
#s1:checked~.tablist label[for=s1],#s2:checked~.tablist label[for=s2],#s3:checked~.tablist label[for=s3],#s4:checked~.tablist label[for=s4],
#s5:checked~.tablist label[for=s5],#s6:checked~.tablist label[for=s6],#s7:checked~.tablist label[for=s7]{color:var(--navy);border-bottom-color:var(--navy)}
#s1:checked~.panels .p1,#s2:checked~.panels .p2,#s3:checked~.panels .p3,#s4:checked~.panels .p4,
#s5:checked~.panels .p5,#s6:checked~.panels .p6,#s7:checked~.panels .p7{display:grid}
.tabs>input:focus-visible~.tablist{outline:3px solid #f2b705;outline-offset:4px}

/* ---- 運営方針（トップは見出しだけ） ---- */
.pol{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pol a{display:block;background:#fff;border:1px solid var(--line);border-top:4px solid var(--navy);border-radius:4px;padding:20px 18px;font-weight:700;font-size:15px;line-height:1.6;color:var(--ink);text-decoration:none}
.pol a:hover{border-color:var(--navy)}

/* ---- 料金 ---- */
.price{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:stretch}
.price .big{background:#fff;border:2px solid var(--navy);border-radius:12px;padding:32px}
.price .big .yen{font-size:42px;font-weight:700;color:var(--navy);line-height:1.4}
.price .big .yen small{font-size:16px}
/* B-303（2026-10-23運営者承認）：「最初の10処理場」を札にして目立たせる（画面＝紺の札・白字／印刷＝紺の地に白の札・紺字）。文言とHTMLは変えない */
.price .big>div:first-child{display:inline-block;background:var(--navy);color:#fff;font-size:22px;font-weight:700;letter-spacing:.06em;padding:6px 18px;border-radius:999px;margin-bottom:10px}
.price ul{margin:0;padding:0;list-style:none}
.price li{padding:14px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:7em 1fr;gap:10px;font-size:15px}
.price li b{color:var(--navy)}

/* ---- 導入の流れ（トップ＝横一列） ---- */
.steps{display:grid;grid-template-columns:repeat(6,1fr);counter-reset:s;margin:8px 0 0;padding:0;list-style:none}
.steps li{position:relative;text-align:center;padding:0 8px}
.steps li::before{counter-increment:s;content:counter(s);display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:var(--navy);color:#fff;font-weight:700;margin:0 auto 12px;font-size:18px;position:relative;z-index:1}
.steps li::after{content:"";position:absolute;top:23px;left:50%;width:100%;height:2px;background:var(--line)}
.steps li:last-child::after{display:none}
.steps b{font-size:15px;display:block;line-height:1.5}

/* ---- 下のページの本文 ---- */
.prose{max-width:780px}
.prose p{margin:0 0 12px}
.dan{display:flex;align-items:center;gap:14px;font-size:28px;margin:0 0 8px;color:var(--navy)}
.dan .no{font-size:15px;color:#fff;background:var(--navy);border-radius:99px;padding:2px 12px}
.dan-imi{font-size:18px;font-weight:700;margin:0 0 10px}
.feat{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start;padding:32px 0;border-top:1px solid var(--line)}
.feat:first-of-type{border-top:0}
.feat h3{font-size:21px;margin:0 0 10px;color:var(--navy)}
.feat p{margin:0 0 10px}
.feat figure{margin:0}
.feat figure img{display:block;border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(0,40,90,.10);background:#fff}
.feat figure.narrow img{max-width:260px}
.feat figure.sp img{max-width:240px}
.feat figcaption{font-size:13px;color:var(--sub);margin-top:6px}
ol.jun{margin:6px 0 12px;padding-left:1.6em}
ol.jun li{margin:2px 0}
.rei{color:var(--sub);font-size:14px}
ul.gyo{margin:6px 0 12px;padding-left:1.4em}
.waku{background:#fff;border:1px solid var(--line);border-left:5px solid var(--navy);border-radius:6px;padding:20px 24px;margin:24px 0}
.waku p{margin:0 0 8px}
.waku.kyocho{border:2px solid var(--navy);border-left-width:6px}
.junbi,.zu-ue{font-weight:700;color:var(--navy)}
dl.jo{display:grid;grid-template-columns:14em 1fr;margin:0;border-top:1px solid var(--line)}
dl.jo dt{font-weight:700;color:var(--navy);padding:18px 16px 18px 0;border-bottom:1px solid var(--line)}
dl.jo dd{margin:0;padding:18px 0;border-bottom:1px solid var(--line)}
dl.jo ul{margin:6px 0 0;padding-left:1.4em}
.polcards{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.polcards .card h2{font-size:19px;margin:0 0 10px;color:var(--navy);line-height:1.5}
.polcards .card p{font-size:15px}
.flow{list-style:none;margin:0;padding:0;counter-reset:f}
.flow li{position:relative;padding:0 0 26px 70px}
.flow li::before{counter-increment:f;content:counter(f);position:absolute;left:0;top:0;width:46px;height:46px;border-radius:50%;background:var(--navy);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:18px}
.flow li::after{content:"";position:absolute;left:22px;top:50px;bottom:4px;width:2px;background:var(--line)}
.flow li:last-child::after{display:none}
.flow b{display:block;font-size:18px;margin-bottom:4px}
.flow span{display:block}

/* ---- お問い合わせの帯・フッター ---- */
.cta{background:var(--navy);color:#fff;text-align:center;padding:64px 0}
.cta h2{font-size:26px;margin:0 0 10px}
.cta p{margin:0 0 24px;opacity:.9}
footer.g{background:#0d1b2a;color:#c9d3df;padding:48px 0 28px;font-size:14px}
footer.g .in{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
footer.g img{height:40px;width:auto;margin-bottom:14px;border-radius:4px}
footer.g a{color:#fff;text-decoration:none}
footer.g ul{list-style:none;margin:0;padding:0;line-height:2.2}
footer.g h2{color:#fff;margin:0 0 8px;font-size:14px}
footer.g p{margin:0}
footer.g .cp{grid-column:1/-1;border-top:1px solid #2a3b4f;padding-top:18px;font-size:12px}

/* ---- 幅の狭い画面 ---- */
@media (max-width:900px){
  header.g .in{gap:12px}
  header.g nav.menu{display:none}
  header.g .btn.p{display:none}
  details.spmenu{display:block;margin-left:auto}
  details.spmenu summary{list-style:none;cursor:pointer;font-weight:700;font-size:14px;border:2px solid var(--navy);color:var(--navy);border-radius:6px;padding:8px 14px}
  details.spmenu summary::-webkit-details-marker{display:none}
  details.spmenu[open] .sp-nav{position:absolute;left:0;right:0;top:68px;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 10px 20px rgba(0,0,0,.08)}
  details.spmenu .sp-nav a{display:block;padding:14px 24px;border-top:1px solid var(--line);font-weight:700;text-decoration:none;color:var(--ink)}
  .hero .in{grid-template-columns:1fr;min-height:0}
  .hero h1{font-size:30px}
  .vis{height:260px}
  .grid4,.pol{grid-template-columns:1fr 1fr}
  .grid3,.grid2,.panel,.price,.feat,.polcards,.mezasu{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .stats div+div{border-left:0;border-top:1px solid var(--line)}
  .steps{grid-template-columns:1fr 1fr 1fr;row-gap:24px}
  .steps li::after{display:none}
  section{padding:56px 0}
  .pagehead h1{font-size:26px}
  dl.jo{grid-template-columns:1fr}
  dl.jo dt{border-bottom:0;padding-bottom:0}
  footer.g .in{grid-template-columns:1fr}
}
@media (max-width:480px){
  .in{padding:0 16px}
  .grid4,.pol{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .hero .acts .btn{flex:1;justify-content:center}
  .sh h2{font-size:24px}
  .stats b{font-size:32px}
}

/* ---- 印刷（下のページを紙にするとき。営業で配る版は insatsu.html） ---- */
@media print{
  header.g,.cta,details.spmenu,.tablist{display:none}
  .hero{background:none;color:#000}
  .hero .acts,.vis{display:none}
  section{padding:24px 0}
  section.alt{background:none}
  .pagehead{background:none;color:#000;padding:12px 0}
  .pagehead .crumb{display:none}
  .panel{display:grid;break-inside:avoid;margin-bottom:16px}
  footer.g{background:none;color:#000}
  footer.g a{color:#000}
}

/* ---- B-296：トップをA4で1枚に印刷する（営業のつかみ・運営者10/16「A」）。全文は insatsu.html（19ページ）。 ---- */
.prt-head{display:none}
@media print{
  @page{size:A4;margin:9mm 10mm}
  body.top{font-size:8.6pt;line-height:1.55;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body.top .in{max-width:none;padding:0}
  body.top .prt-head{display:flex;align-items:center;gap:10px;margin:0 0 3mm}
  body.top .prt-head .lg{height:11mm;width:auto}
  body.top .prt-head .u{margin-left:auto;text-align:right;line-height:1.35}
  body.top .prt-head .u b{display:block;font-size:13pt;color:var(--navy)}
  body.top .prt-head .u span{font-size:8pt;color:var(--sub)}
  body.top .prt-head .qr{width:19mm;height:19mm}
  body.top .hero{background:var(--navy);color:#fff;border-radius:3mm}
  body.top .hero .in{grid-template-columns:1.25fr 1fr;gap:5mm;min-height:0;padding:4mm 6mm}
  body.top .hero .ey{font-size:8pt;margin:0 0 1.5mm}
  body.top .hero h1{font-size:19pt;margin:0 0 2mm;line-height:1.3}
  body.top .hero p.lead{font-size:8.6pt;margin:0 0 1mm}
  body.top .vis{display:block;height:auto}
  body.top .vis .pc{position:static;aspect-ratio:16/10;border-width:2px;box-shadow:none}
  body.top .vis .sp{display:none}
  body.top section{padding:3.2mm 0}
  body.top .sh{margin:0 0 1.5mm}
  body.top .sh .en{font-size:6.5pt;margin-bottom:0}
  body.top .sh h2{font-size:12pt}
  body.top .sh p{font-size:8pt;margin-top:1mm;max-width:none}
  body.top .lead3 p{font-size:9pt;margin:0}
  body.top .lead3 .sh{margin-bottom:1mm}
  body.top .stats{margin-top:1mm}
  body.top .stats div{padding:1.5mm 2mm}
  body.top .stats b{font-size:20pt}
  body.top .stats span{font-size:7.5pt}
  body.top p.note{font-size:6pt;line-height:1.4;margin-top:1mm}
  body.top #naze .grid2{display:none}
  body.top .mi{margin:1.5mm 0 0;font-size:8.4pt}
  body.top .grid3{grid-template-columns:repeat(3,1fr);gap:3mm;margin-top:1.5mm!important}
  body.top .stats{grid-template-columns:repeat(2,1fr)}
  body.top .stats div+div{border-left:1px solid var(--line);border-top:0}
  body.top .mezasu{grid-template-columns:1fr 1fr}
  body.top .steps{grid-template-columns:repeat(6,1fr)}
  body.top .steps li::after{display:block}
  body.top .steps li:last-child::after{display:none}
  body.top .card{padding:2.5mm 3mm;border-radius:2mm;break-inside:avoid}
  body.top .card h3{font-size:9.5pt;margin:0 0 1mm}
  body.top .card p{font-size:7.3pt;line-height:1.45}
  body.top .mezasu{gap:3mm;margin-top:1mm}
  body.top .mezasu li{padding:1.5mm 3mm 1.5mm 10mm;font-size:7.3pt;line-height:1.45;border-radius:2mm}
  body.top .mezasu li::before{left:2.5mm;top:2mm;width:5mm;height:5mm;font-size:7pt}
  body.top .stage .no{font-size:7pt;padding:0 2mm;margin-bottom:1mm}
  body.top .stage h3{font-size:12pt;margin:0 0 1mm}
  body.top .chips{gap:1mm;margin:1.5mm 0 0}
  body.top .chips span{font-size:6.8pt;padding:0 2mm}
  body.top .more{display:none}
  body.top .callout{margin-top:2.5mm;padding:2mm 4mm;border-radius:2mm}
  body.top .callout p{font-size:8pt;margin:0}
  body.top #gamen{order:6;display:block;background:none}
  body.top #gamen .panels{display:grid;grid-template-columns:repeat(4,1fr);gap:2.5mm}
  body.top #gamen .panels .panel{display:block!important;break-inside:avoid;margin:0}
  body.top #gamen .panels .p4,body.top #gamen .panels .p5,body.top #gamen .panels .p7{display:none!important}   /* 紙は4枚（ホーム・処理場の一覧・質問・勘所）。全部はHPで */
  body.top #gamen .panel .frame{aspect-ratio:16/10;box-shadow:none;border-radius:1.5mm}
  body.top #gamen .panel h3{font-size:8.5pt;margin:1mm 0 0;color:var(--navy)}
  body.top #gamen .panel p{font-size:7pt;line-height:1.45}
  body.top #gamen .panel p br{display:none}
  body.top #gamen p.note{margin-top:1.5mm}
  body.top .pol{grid-template-columns:repeat(4,1fr);gap:1.5mm}
  body.top .pol a{padding:1.5mm 2mm;font-size:7.4pt;line-height:1.4;border-top-width:2px}
  body.top #houshin p:last-child{display:none}
  body.top #ryokin{background:none}
  body.top .price{grid-template-columns:1fr 1.25fr;gap:4mm;align-items:start}
  body.top .price .big{padding:2.5mm 5mm;border-radius:2.5mm;background:var(--navy);color:#fff}
  body.top .price .big>div:first-child{background:#fff;color:var(--navy);font-size:12pt;padding:.4mm 3.5mm;margin:0 0 1mm}
  body.top .price .big .yen{font-size:19pt;color:#fff;line-height:1.3}
  body.top .price .big .yen small{font-size:8pt}
  body.top .price .big p{font-size:9pt;font-weight:700;margin:1mm 0 0;line-height:1.45}
  body.top .price .big .btn{display:none}
  body.top .price li{padding:0.9mm 0;font-size:7.6pt;grid-template-columns:8.2em 1fr;line-height:1.4}
  body.top .steps li::before{width:6mm;height:6mm;font-size:8pt;margin-bottom:1mm}
  body.top .steps li::after{top:3mm}
  body.top .steps b{font-size:7.6pt}
  body.top #donyu .sh p{font-size:7.6pt}
  /* 表＝つかみ（冒頭・技術者専用・無料・なぜ）／裏＝中身（できること・運営方針・導入の流れ）。A4 1枚の両面 */
  body.top main{display:flex;flex-direction:column}
  body.top main>.hero{order:1}
  body.top main>section:nth-of-type(1){order:2}
  body.top #ryokin{order:3}
  body.top #naze{order:4}
  body.top #dekiru{order:5;break-before:page}
  body.top #houshin{order:7}
  body.top #donyu{order:8}
  body.top .gr{margin:0}
  body.top .lead3 p{line-height:1.45}
  body.top #dekiru .sh p,body.top #donyu .sh p{display:none}
  body.top .vis .pc{max-height:38mm}
  body.top .vis .pc img{object-position:top left}
  body.top section{padding:2mm 0}
  body.top .stats b{font-size:18pt}
  body.top p.note{font-size:5.6pt}
  body.top footer.g{padding:2mm 0 0;font-size:7pt;border-top:1px solid var(--line);margin-top:2mm}
  body.top footer.g .in{display:block}
  body.top footer.g .in>div:not(:first-child){display:none}
  body.top footer.g img{display:none}
  body.top footer.g p{display:inline;margin-right:3mm}
}

/* ---- B-302：B-300/B-301で文が増え、トップの印刷がA4で3ページに溢れた→詰めて2ページ（表・裏）に戻す。画面の見た目は変えない ---- */
@media print{
  body.top .hero .in{padding:3mm 6mm;gap:4mm}
  body.top .hero h1{font-size:17.5pt;margin:0 0 1.5mm}
  body.top .hero p.lead{font-size:8.2pt;line-height:1.5}
  body.top .vis .pc{max-height:34mm}
  body.top section{padding:1.6mm 0}
  body.top .card{padding:2mm 3mm}
  body.top .card p{font-size:7pt;line-height:1.42}
  body.top .stats div{padding:1mm 2mm}
  body.top .stats b{font-size:17pt}
  body.top .mezasu{break-inside:auto}
  body.top .mezasu li{font-size:7pt;line-height:1.4;padding:1.2mm 3mm 1.2mm 10mm;break-inside:avoid}
  body.top .price li{padding:0.7mm 0}
  body.top .price .big{padding:2mm 5mm}
  body.top .sh h2{font-size:11.5pt}
  body.top .prt-head{margin-bottom:2mm}
}