/* =========================================================
   experiments/gibdas-site/assets/site.css
   GIVDAS の HP と LP の共通スタイル。採用案 B3「倉庫の床ライン」。

   design-system（sleek）から外している点と理由:
   - 色: 青系ではなく、コンクリートのグレー × 床ラインの黄色 × 黒。
     物流の現場らしさを出すためにユーザーが B3 を選んだ。
   - 書体: Inter ではなく IBM Plex Sans JP（本文・見出し）と Barlow Condensed（ロゴ・記号）。
     公共サインのような硬さで、プロらしさを出すため。
   守っている点: 8pt グリッド、WCAG AA のコントラスト、タップ領域 44px 以上、
   フォーカス表示、prefers-reduced-motion。
   ========================================================= */

:root{
  /* 色 */
  --sig:#FFCC00;          /* 床ラインの黄。黒地・黒文字どちらとも組める */
  --sig-hover:#FFD940;
  --ink:#16181A;          /* 文字・黒い面 */
  --ink-2:#24272A;
  --concrete:#D5D6D2;     /* 背景（コンクリート） */
  --concrete-2:#C6C8C3;
  --plate:#F3F3F1;        /* カードの面 */
  --muted:#3E4245;        /* 補足文字（concrete 上で 6.8:1） */
  --on-ink:#D7D9DA;       /* 黒地の補足文字 */
  --line:#B9BBB6;          /* 区切り線（装飾） */
  --field-line:#6B6F72;    /* 入力欄の枠。白地 5.1:1、plate 上 4.6:1（非テキスト 3:1 以上） */
  --danger:#B42318;
  --ok:#0F6B3A;

  /* 書体 */
  --font:"IBM Plex Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif;
  --lat:"Barlow Condensed","Arial Narrow",sans-serif;

  /* 8pt グリッド */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:40px; --s6:48px; --s8:64px; --s10:80px; --s12:96px;
  --container:1200px;
  --gutter:24px;
  --measure:36em;
  --stripe:12px;          /* 床ラインの太さ */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--concrete);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.8;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.on-ink :focus-visible,.hd :focus-visible,.ft :focus-visible{outline-color:var(--sig)}
[hidden]{display:none!important} /* .form{display:grid} などに hidden が負けて、隠したはずの要素が見えたままになるのを防ぐ */
[id]{scroll-margin-top:92px} /* 固定ヘッダー（76px）にアンカー先の見出しが隠れないように */
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:var(--s2);top:var(--s1);z-index:50;background:var(--sig);padding:var(--s1) var(--s2)}

h1,h2{word-break:auto-phrase}
h1{font-weight:700;font-size:clamp(36px,6vw,80px);line-height:1.1;letter-spacing:-.02em}
.h1--top{font-size:clamp(40px,7vw,92px)} /* トップの見出しだけ、ひとつ前の大きさ（ユーザー指定） */
h2{font-weight:700;font-size:clamp(22px,2.5vw,30px);line-height:1.35}
h3{font-weight:700;font-size:18px;line-height:1.5}
p{max-width:var(--measure)}
.lead{font-size:16px;font-weight:500;color:var(--muted);margin-top:var(--s4)}
.muted{color:var(--muted)}
.small{font-size:14px}
.mt-2{margin-top:var(--s2)} .mt-3{margin-top:var(--s3)} .mt-5{margin-top:var(--s5)}

/* ---------- 骨格 ---------- */
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.sec{padding:var(--s12) 0}
.sec--plate{background:var(--plate)}
.sec--ink{background:var(--ink);color:#fff}
.sec--ink .muted,.sec--ink p{color:var(--on-ink)}
.sec__head{margin-bottom:var(--s5);max-width:44em}
.sec__head p{margin-top:var(--s2);color:var(--muted)}
.sec--ink .sec__head p{color:var(--on-ink)}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.side{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--s8)}
.side__fig{display:block;width:100%;height:auto;max-width:240px;margin-top:var(--s4)} /* 見出しの下の図解（tools/illust.py で生成） */

/* ---------- ヘッダー（スマホは details で開閉、JS なし） ---------- */
.hd{background:var(--ink);color:#fff;position:sticky;top:0;z-index:20}
.hd__in{display:flex;justify-content:space-between;align-items:center;min-height:76px;gap:var(--s3)}
.logo{display:inline-flex;align-items:baseline;gap:12px;min-height:44px;align-items:center}
.logo b{font-family:var(--lat);font-weight:800;font-size:30px;letter-spacing:.06em;color:var(--sig);line-height:1}
.logo small{font-size:12px;color:#BFC2C4}
.gnav{display:flex;gap:var(--s3);align-items:center;font-weight:700;font-size:15px}
.gnav a{min-height:44px;display:inline-flex;align-items:center;border-bottom:3px solid transparent}
.gnav a:hover{border-bottom-color:var(--line)}
.gnav a[aria-current="page"]{border-bottom-color:var(--sig)}
.gnav a.btn{border-bottom:0}
.menu{display:none}

/* ---------- ボタン ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 var(--s3);font-weight:700;font-size:15px;background:var(--sig);color:var(--ink);transition:background-color .15s}
.btn:hover{background:var(--sig-hover)}
.btn--sm{min-height:44px;padding:0 var(--s2);font-size:14px}
.btn--dark{background:var(--ink);color:var(--sig)}
.btn--dark:hover{background:var(--ink-2)}
.btn--line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn--line:hover{background:rgba(22,24,26,.06)}
.actions{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;margin-top:var(--s5);font-weight:700}
.link{font-weight:700;border-bottom:3px solid var(--sig);padding-bottom:2px}
.link:hover{background:var(--sig)}

/* ---------- ヒーロー（床ライン） ---------- */
.hero{background:
  linear-gradient(90deg,transparent 0 calc(100% - 340px),var(--sig) calc(100% - 340px) calc(100% - 328px),transparent calc(100% - 328px)),
  linear-gradient(0deg,transparent 0 40px,var(--sig) 40px 52px,transparent 52px),
  radial-gradient(circle at 20% 30%,rgba(0,0,0,.035) 0 2px,transparent 3px) 0 0/22px 22px,
  var(--concrete)}
.hero__in{max-width:var(--container);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--s6);align-items:end;padding:var(--s8) var(--gutter) var(--s10)}
.code{font-family:var(--lat);font-weight:700;font-size:14px;letter-spacing:.12em;color:var(--muted);margin-bottom:var(--s3)}

/* トップの最初の画面: 白黒の写真に、左から黒を透かして白い文字をのせる（写真は書き出し時に白黒にしてある） */
.hero--photo{position:relative;overflow:hidden;background:var(--ink);color:#fff}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.hero--photo::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(22,24,26,.94) 0 36%,rgba(22,24,26,.6) 56%,rgba(22,24,26,.15) 85%)}
.hero--photo::after{content:"";position:absolute;left:0;right:0;bottom:0;z-index:2;height:var(--stripe);background:var(--sig)}
.hero--photo .hero__in{position:relative;z-index:2;grid-template-columns:minmax(0,560px);align-items:center;min-height:640px;padding:var(--s8) var(--gutter) var(--s10)}
.hero--photo h1{font-size:clamp(36px,4.8vw,60px);line-height:1.2}
.hero--photo h1 em{font-style:normal;color:var(--sig)}
.hero--photo .lead{color:#E3E4E5}
.hero--photo .btn--line{color:#fff;box-shadow:inset 0 0 0 2px #fff}
.hero--photo .btn--line:hover{background:rgba(255,255,255,.1)}
.eyebrow{display:inline-block;font-size:15px;font-weight:700;background:var(--sig);color:var(--ink);padding:4px 12px;margin-bottom:var(--s3)}
.hero__note{position:absolute;right:var(--gutter);bottom:28px;z-index:2;font-size:14px;color:#fff;background:rgba(22,24,26,.7);padding:2px 8px}

/* 副業支援: あらかじめお伝えしていること */
.promise li{padding:12px 0 12px var(--s3);border-left:4px solid var(--sig);margin-bottom:12px}

/* 取り扱える商品の例 */
.goods{display:flex;flex-wrap:wrap;gap:12px}
.goods li{font-weight:700;font-size:18px;background:var(--plate);border-left:var(--stripe) solid var(--sig);padding:12px 20px}

/* ---------- ベルトコンベア（動くのはここだけ） ---------- */
.belt{position:relative;background:var(--concrete-2);border-top:var(--stripe) solid var(--sig);overflow:hidden}
.belt__toggle{position:absolute;right:var(--gutter);top:22px;z-index:1;min-height:44px;padding:0 var(--s2);background:var(--ink);color:var(--sig);font-weight:700;font-size:14px}
.belt__toggle:focus-visible{outline:3px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 3px var(--sig)}
.belt.is-paused .belt__track{animation-play-state:paused}
.belt__track{display:flex;gap:var(--s2);width:max-content;padding:22px var(--s2) 0;animation:run 45s linear infinite}
.parcel{position:relative;padding:var(--s2) var(--s3);white-space:nowrap;font-weight:700;background:#C29A66;color:var(--ink);border:2px solid #8E6E45;box-shadow:0 4px 0 rgba(0,0,0,.15)}
.parcel::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:16px;margin-left:-8px;background:rgba(255,255,255,.35)}
.parcel span{position:relative}
.hazard{height:22px;margin-top:22px;background:repeating-linear-gradient(-45deg,var(--sig) 0 18px,var(--ink) 18px 36px)}
@keyframes run{to{transform:translateX(-50%)}}

/* ---------- 副業支援でできること（トップ）: 大きな明朝の動詞4つ＋システム＋会社向け ---------- */
@font-face{font-family:"Zen Old Mincho";font-weight:900;font-display:swap;src:url(fonts/zenoldmincho-900-subset.woff2) format("woff2")} /* 使う35文字だけに絞ったファイル（SIL OFL）。文字を足したら作り直す（README） */
.mc{font-family:"Zen Old Mincho",var(--font);font-weight:900;letter-spacing:0}
.side-sec{background:#F7F7F5} /* 2026-10-20 案3（明るい白地に黄色のマーカー）＋文字は案2 */
.side-sec__head{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);align-items:end;margin-bottom:var(--s8)}
.side-sec__head h2{font-size:40px;line-height:1.45}
.mk{background:linear-gradient(transparent 68%,var(--sig) 68%)}
.side-sec__head p{font-size:16px;line-height:1.9;color:var(--muted)}
.verbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2)}
.verbs > div{background:#fff;padding:44px 28px 36px;display:flex;flex-direction:column}
.verbs strong{align-self:flex-start;font-size:64px;line-height:1.15;white-space:nowrap;padding:0 2px;background:linear-gradient(transparent 76%,var(--sig) 76% 90%,transparent 90%)}
.verbs p{margin-top:28px;font-size:15px;line-height:2;color:var(--muted);flex:1}
.who{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:20px}
.who span,.legend span{font-size:14px;font-weight:700}
.who span::before{content:"";display:inline-block;width:9px;height:9px;margin-right:7px;vertical-align:1px}
.who .sup::before{background:var(--sig)}
.who .do::before{background:var(--ink)}
.legend{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:var(--s4)}
.legend i{display:inline-block;width:9px;height:9px;vertical-align:1px;margin-right:7px}
.l-sup{background:var(--sig)}.l-do{background:var(--ink)}
.sys{margin-top:var(--s10);display:grid;grid-template-columns:320px 1fr;background:#fff}
.sys__head{background:var(--ink);color:#fff;padding:var(--s5);display:flex;flex-direction:column;justify-content:center}
.sys__head h3{font-size:24px;line-height:1.4}
.sys__head h3::after{content:"";display:block;width:48px;height:4px;background:var(--sig);margin:var(--s3) 0 var(--s2)}
.sys__head p{font-size:14px;line-height:1.8;color:var(--on-ink)}
.sys ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.sys li{padding:var(--s5) var(--s5) var(--s4);border-left:1px solid var(--concrete-2);border-bottom:1px solid var(--concrete-2)}
.sys li:nth-child(n+3){border-bottom:0}
.sys li b{display:block;font-size:17px;margin-bottom:10px}
.sys li b::before{content:"";display:inline-block;width:9px;height:9px;background:var(--sig);margin-right:10px;vertical-align:2px}
.sys li span{font-size:14px;line-height:1.9;color:var(--muted)}
.corp{margin-top:var(--s2);background:#fff;display:grid;grid-template-columns:auto 1fr auto;gap:var(--s4);align-items:center;padding:var(--s5) var(--s5);border-left:4px solid var(--sig)}
.corp h3{font-size:20px;white-space:nowrap}
.corp p{font-size:15px;color:var(--muted)}
.corp .link{justify-self:start}

/* ---------- アイコン（tools/icons.py で生成）。カードや項目にマウスが乗ると少し浮いて傾く ---------- */
.ic{display:block;transition:transform .25s cubic-bezier(.2,.8,.3,1.4)}
.ic--verb{width:56px;height:56px;margin-bottom:16px}
.ic--zone{width:48px;height:48px;margin-bottom:12px}
.ic--why{width:52px;height:52px;margin-bottom:16px}
.ic--sys{grid-row:1 / span 2;width:48px;height:48px}
.sys li{display:grid;grid-template-columns:48px 1fr;column-gap:16px;align-items:start}
.sys li b,.sys li span{grid-column:2}
.sys li b::before{display:none}
.verbs > div:hover .ic,.sys li:hover .ic,.zone:hover .ic,.why > div:hover .ic{transform:translateY(-6px) rotate(-6deg)}
.ic.is-play{animation:ic-bob .6s cubic-bezier(.2,.8,.3,1.4)} /* 画面に入ったとき1回だけ（build.py の ICON_JS） */
@keyframes ic-bob{40%{transform:translateY(-6px) rotate(-6deg)}}

/* ---------- エリア（サービスの3グループ） ---------- */
.zone{position:relative;background:var(--plate);border-left:var(--stripe) solid var(--sig);padding:var(--s4) 28px var(--s3);display:flex;flex-direction:column}
.zone__mark{position:absolute;right:var(--s3);top:20px;font-family:var(--lat);font-weight:800;font-size:42px;line-height:1;background:var(--sig);padding:0 10px}
.zone__mark--static{position:static;display:inline-block}
.zone h3{font-size:21px;margin-bottom:var(--s2);padding-right:52px}
.zone > p{color:var(--muted);margin-bottom:var(--s2)}
.zone ul li{padding:10px 0;border-top:1px solid var(--concrete-2);font-weight:500}
.zone .link{align-self:flex-start;margin-top:var(--s3)}
.pack{margin-top:var(--s3);background:var(--ink);color:#fff;border-left:var(--stripe) solid var(--sig);padding:var(--s3) var(--s4);display:flex;justify-content:space-between;align-items:center;gap:var(--s3)}
.pack h3{font-size:20px;color:var(--sig)}
.pack p{color:var(--on-ink);margin-top:4px}

/* ---------- 強み（黒地） ---------- */
.why{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.why > div{padding:0 var(--s5)}
.why > div:first-child{padding-left:0;border-right:2px solid var(--sig)}
.why h3{display:block;font-size:38px;line-height:1.15;color:var(--sig);margin-bottom:var(--s2)}
.why p{font-size:16px;color:var(--on-ink)}
.why--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.why--3 > div{padding:0 var(--s4);border-right:2px solid var(--sig)}
.why--3 > div:last-child{border-right:0}
.why--3 h3{font-size:26px}

/* ---------- 任せる範囲（表） ---------- */
.range{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:8px;background:var(--plate);padding:var(--s2)}
.range th{font-weight:700;font-size:15px;text-align:left;padding:var(--s1);white-space:nowrap}
.range thead th{text-align:center;font-family:var(--lat);font-size:18px;letter-spacing:.04em}
.range td{height:56px;background:var(--concrete);text-align:center;font-weight:700;font-size:14px}
.range td.on{background:var(--sig)}
.range thead td{width:8em;height:auto;background:none}
.range caption{caption-side:bottom;text-align:left;padding-top:var(--s2);color:var(--muted);font-size:15px}

/* ---------- 下層ページの見出し ---------- */
.ph{background:linear-gradient(0deg,transparent 0 0,var(--sig) 0 var(--stripe),transparent var(--stripe)),radial-gradient(circle at 20% 30%,rgba(0,0,0,.035) 0 2px,transparent 3px) 0 0/22px 22px,var(--concrete);padding:var(--s8) 0 var(--s6)}
.ph h1{font-size:clamp(30px,4vw,48px)}
.ph p{margin-top:var(--s2);color:var(--muted);font-size:16px}
.crumbs{font-size:14px;color:var(--muted);margin-bottom:var(--s2)}
.crumbs a{text-decoration:underline;text-underline-offset:.2em}

/* ---------- 手順（順序があるものだけ） ---------- */
.steps{counter-reset:st;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3)}
.steps > li{counter-increment:st;position:relative;background:var(--plate);padding:var(--s3);border-top:var(--stripe) solid var(--ink)}
.steps__icon{position:absolute;top:20px;right:20px;width:48px;height:48px}
.steps > li::before{content:counter(st);display:block;font-family:var(--lat);font-weight:800;font-size:32px;line-height:1;margin-bottom:var(--s1)}
.steps h3{font-size:17px}
.steps p{margin-top:var(--s1);color:var(--muted)}
.steps--3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* ---------- 表（会社概要・料金の決まり方） ---------- */
.spec{width:100%;border-collapse:collapse;background:var(--plate)}
.spec th,.spec td{text-align:left;vertical-align:top;padding:var(--s2) var(--s3);border-bottom:1px solid var(--concrete-2)}
.spec th{width:11em;font-weight:700}
.spec thead th{background:var(--ink);color:#fff;width:auto}
.spec tr:last-child th,.spec tr:last-child td{border-bottom:0}

/* ---------- お知らせ ---------- */
.news{border-top:2px solid var(--ink)}
.news li{border-bottom:1px solid var(--line)}
.news a,.news .row{display:grid;grid-template-columns:8em 7em minmax(0,1fr);gap:4px var(--s3);align-items:center;padding:var(--s2) 0;min-height:56px}
.news a:hover span:last-child{text-decoration:underline}
.news time{font-family:var(--lat);font-weight:700;font-size:18px;letter-spacing:.04em}
.tag{flex:none;white-space:nowrap;display:inline-flex;align-items:center;justify-self:start;min-height:26px;padding:0 10px;font-size:13px;font-weight:700;background:var(--ink);color:var(--sig)}
.tag--plain{background:var(--plate);color:var(--ink)}
.article{padding:var(--s6) 0;border-top:1px solid var(--line)}
.examples{border-top:2px solid var(--ink)}
.examples li{display:flex;gap:var(--s2);align-items:center;padding:var(--s2) 0;border-bottom:1px solid var(--line);font-weight:500}
.article h2{font-size:20px;margin-top:var(--s1)}
.article p{margin-top:var(--s2)}

/* ---------- お悩み・任せる前後（LP） ---------- */
.pains{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2)}
.pains li{background:var(--plate);padding:var(--s3);border-top:6px solid var(--ink)}
.pains__icon{display:block;width:48px;height:48px;margin-bottom:12px}
.pains strong{display:block;font-size:17px}
.pains span{color:var(--muted);font-size:15px}
.ba{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:var(--s3);align-items:stretch}
.ba__col{background:var(--plate);padding:var(--s3) var(--s4)}
.ba__col h3{font-size:17px;margin-bottom:var(--s1)}
.ba__col li{display:flex;justify-content:space-between;gap:var(--s2);padding:12px 0;border-top:1px solid var(--concrete-2)}
.ba__col li span{font-weight:700;font-size:14px;white-space:nowrap}
.ba__col--after{background:var(--ink);color:#fff}
.ba__col--after li{border-top-color:#3A3D40}
.ba__col--after li span{color:var(--sig)}
.ba__col--after li.you span{color:#fff;background:var(--ink-2);padding:0 8px}
.ba__arrow{align-self:center;font-family:var(--lat);font-weight:800;font-size:48px}

/* ---------- よくある質問 ---------- */
.faq{border-top:2px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--s2);padding:var(--s3) 0;font-weight:700;font-size:16px;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--lat);font-weight:800;font-size:32px;line-height:1;width:44px;height:44px;display:grid;place-items:center;background:var(--sig);flex:none}
.faq details[open] summary::after{content:"−"}
.faq details p{padding:0 0 var(--s3);color:var(--muted)}

/* ---------- フォーム ---------- */
.form{display:grid;gap:var(--s3);background:var(--plate);padding:var(--s5)}
.field{display:grid;gap:6px;border:0;margin:0;padding:0;min-width:0}
.field label,.field legend{font-weight:700;padding:0}
.req,.opt{display:inline-block;margin-left:var(--s1);font-size:12px;font-weight:700;padding:1px 6px;vertical-align:2px}
.req{background:var(--ink);color:var(--sig)}
.opt{background:var(--concrete-2);color:var(--ink)}
.field input,.field select,.field textarea{font:inherit;width:100%;min-height:52px;padding:10px 14px;border:2px solid var(--field-line);background:#fff;color:var(--ink);border-radius:0}
.field textarea{min-height:180px;resize:vertical}
.field textarea#slots{min-height:104px} /* 希望日時は3行ほどで足りる */
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:3px solid var(--sig);outline-offset:0;border-color:var(--ink)}
.field [aria-invalid="true"]{border-color:var(--danger)}
.hint{font-size:14px;color:var(--muted)}
.err{font-size:14px;font-weight:700;color:var(--danger);display:none}
.field:has([aria-invalid="true"]) .err{display:block}
.check{display:flex;gap:12px;align-items:flex-start;min-height:44px}
.check input{width:22px;height:22px;margin-top:4px;accent-color:var(--ink);flex:none}
.notice{padding:var(--s3);background:var(--ink);color:#fff;border-left:var(--stripe) solid var(--sig);font-weight:700}
.notice[hidden]{display:none}
.notice--err{border-left-color:var(--danger);background:#3A1512}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.btn:disabled{opacity:.6;cursor:progress}

/* ---------- 締めの CTA / フッター ---------- */
.cta{padding:var(--s12) 0;background:linear-gradient(0deg,transparent 0 40px,var(--sig) 40px 52px,transparent 52px),var(--concrete)}
.cta p{margin-top:var(--s2);font-size:16px;color:var(--muted)}
.ft{background:var(--ink);color:var(--on-ink);padding:var(--s8) 0 var(--s4);font-size:15px}
.ft__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s5)}
.ft .logo b{font-size:32px}
.ft address{font-style:normal;margin-top:var(--s2);line-height:1.9}
.ft nav ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s3)}
.ft nav a{display:inline-flex;align-items:center;min-height:44px}
.ft nav a:hover{color:var(--sig)}
.ft__copy{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid #3A3D40;font-size:13px;font-family:var(--lat);letter-spacing:.06em}

/* LP: スマホ下部の固定ボタン */
.sticky{display:none}

/* ---------- 資料のような読み物（副業支援 2026-10-20）: 要点・目次・章番号・支援の一覧・注意・Q&A ---------- */
.brief{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--s3);margin-top:var(--s5)}
.brief h2{font-size:15px;letter-spacing:.04em;margin-bottom:var(--s2)}
.brief__sum{background:var(--plate);border-top:6px solid var(--ink);padding:var(--s3) var(--s4)}
.brief__sum dl > div{display:grid;grid-template-columns:7em minmax(0,1fr);gap:var(--s2);padding:12px 0;border-top:1px solid var(--concrete-2)}
.brief__sum dt{font-weight:700}
.brief__sum dd{margin:0}
.brief__sum b{background:linear-gradient(transparent 60%,var(--sig) 60%)}
.ph .brief p,.brief dd{color:var(--ink)}
.brief__toc{background:var(--ink);color:#fff;padding:var(--s3) var(--s4)}
.brief__toc h2{color:var(--sig)}
.brief__toc ol{counter-reset:toc}
.brief__toc li{counter-increment:toc;border-top:1px solid #3A3D40}
.brief__toc a{display:flex;gap:12px;align-items:center;min-height:44px;font-weight:700;font-size:15px}
.brief__toc a::before{content:"0" counter(toc);font-family:var(--lat);font-weight:800;font-size:18px;color:var(--sig);width:1.6em}
.brief__toc a:hover{color:var(--sig)}
.chap{font-family:var(--lat);font-weight:800;font-size:20px;letter-spacing:.08em;line-height:1;display:inline-block;background:var(--sig);padding:4px 10px;margin-bottom:12px}
.sec__head .chap{margin-top:0;color:var(--ink)}
.match th:first-child,.match td:first-child{width:6em}
.match td:last-child{width:16em;font-weight:700}
.match .link{display:inline-block;margin:2px 0}
.spec--white{background:#fff}
.legend--top{margin:0 0 var(--s3)}
.items{display:grid;gap:var(--s2)}
.item{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s5);background:#fff;border-left:var(--stripe) solid var(--sig);padding:var(--s4)}
.item__head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px var(--s2);align-content:start}
.item__no{grid-row:span 2;font-family:var(--lat);font-weight:800;font-size:44px;line-height:1;width:56px;height:56px;display:grid;place-items:center;background:var(--ink);color:var(--sig)}
.item__head h3{font-size:22px;line-height:1.3;align-self:end}
.item__head > p:last-child{grid-column:1/-1;margin-top:var(--s2);color:var(--muted)}
.item ul{border-top:2px solid var(--ink);align-self:start}
.item ul li{padding:12px 0 12px 22px;border-bottom:1px solid var(--line);font-weight:500;position:relative}
.item ul li::before{content:"";position:absolute;left:0;top:22px;width:10px;height:10px;background:var(--sig);box-shadow:inset 0 0 0 2px var(--ink)}
.item__dl{border-top:2px solid var(--ink);align-self:start}
.item__dl > div{padding:12px 0;border-bottom:1px solid var(--line)}
.item__dl dt{font-weight:700}
.item__dl dd{margin:0;font-size:15px;color:var(--muted)}
.notes{counter-reset:nt;border-top:2px solid var(--ink)}
.notes li{counter-increment:nt;display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:var(--s2);padding:var(--s3) 0;border-bottom:1px solid var(--line);color:var(--muted)}
.notes li::before{content:counter(nt);grid-row:span 2;font-family:var(--lat);font-weight:800;font-size:22px;width:40px;height:40px;display:grid;place-items:center;background:var(--sig);color:var(--ink)}
.notes b{display:block;color:var(--ink);font-size:17px;margin-bottom:4px}
.qa{border-top:2px solid var(--ink)}
.qa > div{padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.qa dt,.qa dd{display:grid;grid-template-columns:40px minmax(0,1fr);gap:var(--s2);align-items:baseline}
.qa dt{font-weight:700;font-size:17px}
.qa dd{margin:var(--s1) 0 0;color:var(--muted)}
.qa dt::before,.qa dd::before{font-family:var(--lat);font-weight:800;font-size:24px;line-height:1}
.qa dt::before{content:"Q"}
.qa dd::before{content:"A";color:var(--ink);background:var(--sig);width:28px;text-align:center;padding:2px 0}
@media (max-width:1023px){
  .brief{grid-template-columns:minmax(0,1fr)}
  .ph-hero{grid-template-columns:minmax(0,1fr) 300px;gap:var(--s4)}
  .item{grid-template-columns:minmax(0,1fr);gap:var(--s3)}
}
@media (max-width:799px){
  .brief__sum,.brief__toc{padding:var(--s3)}
  .ph .ph-hero{grid-template-columns:minmax(0,1fr);gap:var(--s3)} /* .ph を付けて、後ろにあるタブレットの指定より強くする */
  .ph .ph-hero__fig{max-width:300px;order:-1}
  .item__ic{width:60px;height:60px}
  .item__ic img{width:44px;height:44px}
  .mrow img{width:28px;height:28px}
  .brief__sum dl > div{grid-template-columns:minmax(0,1fr);gap:2px}
  .item{padding:var(--s3)}
  .item__no{font-size:34px;width:44px;height:44px}
  .match td:first-child,.match td:last-child{width:auto}
  .match td:first-child{padding-bottom:0}
  .match tr{display:block;border-bottom:1px solid var(--concrete-2)}
  .match td{border-bottom:0}
}

/* 副業支援のページだけ：トップの「副業支援でできること」と同じ明るい白地（2026-10-20 案3＋案2） */
.lt .sec,.lt .cta{background:#F7F7F5}
.lt .sec--plate{background:var(--plate)}
.lt .ph{background:#F7F7F5;border-bottom:1px solid var(--concrete-2)}
.lt .ph h1{line-height:1.4}
.lt .chap{background:none;padding:0;font-size:18px;color:var(--muted);margin-bottom:8px}
.lt .sec__head h2{font-size:clamp(24px,2.8vw,32px)}
.lt .spec{background:#fff}
.lt .item{border-left-width:4px}
.lt .steps > li{background:#fff;border-top-width:4px}
.lt .brief__sum{background:#fff;border-top-width:4px}
.lt .notes,.lt .qa,.lt .item ul,.lt .item__dl{border-top-width:1px}
/* 副業支援のページ：図とアイコン（2026-10-20 案A＋案1） */
.ph-hero{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:var(--s6);align-items:end}
.ph-hero__fig{width:100%;height:auto}
.chap-ic{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.chap-ic img{width:44px;height:44px}
.lt .chap-ic .chap{margin:0}
.mrow{display:flex;align-items:center;gap:10px}
.lt .match th:first-child,.lt .match td:first-child{width:8.5em}
.item__ic{grid-row:span 2;position:relative;width:72px;height:72px;display:grid;place-items:center;background:#F7F7F5}
.item__ic img{width:52px;height:52px}
.item__sub{margin-top:var(--s3);font-size:15px}
.item__ic span{position:absolute;left:-6px;top:-6px;font-family:var(--lat);font-weight:800;font-size:16px;line-height:1;background:var(--ink);color:var(--sig);padding:4px 7px}
/* ---------- 支援の流れ: 段階ごとの支援（アイコンを矢印でつなぐ。2026-10-22 案2） ---------- */
.sec--light{background:#F7F7F5}
.st2-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;position:relative}
.st2{position:relative}
/* 矢印は段階ごとに描く: 線はアイコンの右端から、先端は次のアイコンの左端にぴったり付ける */
.st2:not(:last-child)::before{content:"";position:absolute;left:92px;right:-34px;top:44px;height:4px;background:var(--ink)}
.st2:not(:last-child)::after{content:"";position:absolute;right:-48px;top:34px;width:0;height:0;border-top:12px solid transparent;border-bottom:12px solid transparent;border-left:16px solid var(--ink)}
.st2__ic{position:relative;width:92px;height:92px;background:#fff;border:4px solid var(--ink);display:grid;place-items:center;margin-bottom:24px}
.st2__ic::after{content:"";position:absolute;left:-4px;right:-4px;bottom:-14px;height:8px;background:var(--sig)}
.st2__ic img{width:60px;height:60px}
.st2 h3{font-size:28px;margin-bottom:10px}
.st2 > p{color:var(--muted);min-height:5.4em}
.st2__list{margin-top:20px;background:#fff;padding:8px 20px}
.st2__list li{position:relative;padding:12px 0 12px 22px;border-bottom:1px solid var(--line);font-weight:700;font-size:15px}
.st2__list li:last-child{border-bottom:0}
.st2__list li::before{content:"";position:absolute;left:0;top:21px;width:10px;height:10px;background:var(--sig);box-shadow:inset 0 0 0 2px var(--ink)}
.st2__ic .ic{display:block}
.st2:hover .ic{transform:translateY(-6px) rotate(-6deg)}

/* ---------- タブレット ---------- */
@media (max-width:1023px){
  .grid-3,.steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pains{grid-template-columns:repeat(2,minmax(0,1fr))}
  .why--3 h3{font-size:21px}
  .verbs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sys{grid-template-columns:minmax(0,1fr)}
  .corp{grid-template-columns:minmax(0,1fr);gap:var(--s2)}
  .why--3 > div{padding:0 var(--s3)}
}

/* ---------- スマホ ---------- */
@media (max-width:799px){
  :root{--gutter:16px}
  .gnav{display:none}
  .menu{display:block}
  .menu summary{list-style:none;min-height:44px;padding:0 var(--s2);display:grid;place-items:center;font-weight:700;font-size:14px;box-shadow:inset 0 0 0 2px #fff;cursor:pointer}
  .menu summary::-webkit-details-marker{display:none}
  .menu[open] summary{background:var(--sig);color:var(--ink);box-shadow:none}
  .menu ul{position:absolute;left:0;right:0;top:76px;background:var(--ink);border-bottom:6px solid var(--sig);padding:var(--s1) var(--gutter) var(--s3)}
  .menu li a{display:flex;align-items:center;min-height:52px;border-bottom:1px solid #3A3D40;font-weight:700}
  .menu li a[aria-current="page"]{color:var(--sig)}
  .menu li:last-child a{border-bottom:0;margin-top:var(--s2);justify-content:center}
  .logo small{display:none}
  .logo b{font-size:28px}
  .sec{padding:var(--s8) 0}
  .hero{background:linear-gradient(0deg,transparent 0 24px,var(--sig) 24px 34px,transparent 34px),radial-gradient(circle at 20% 30%,rgba(0,0,0,.035) 0 2px,transparent 3px) 0 0/22px 22px,var(--concrete)}
  .hero__in{grid-template-columns:minmax(0,1fr);gap:var(--s4);padding:var(--s5) var(--gutter) var(--s6)}
  h1{font-size:36px}
  .h1--top{font-size:40px}
  .lead{font-size:16px}
  .actions{flex-direction:column;align-items:stretch;gap:12px}
  .grid-2,.grid-3,.side,.steps,.steps--3,.pains,.why{grid-template-columns:minmax(0,1fr)}
  .side{gap:var(--s3)}
  .side__fig{max-width:120px;margin-top:var(--s2)}
  /* スマホは写真を上に、文字は下の黒地に */
  .hero--photo{padding-top:240px;background:var(--ink)}
  .hero--photo .hero__img{height:240px;bottom:auto}
  .hero--photo::before{bottom:auto;height:240px;background:linear-gradient(0deg,var(--ink) 0,rgba(22,24,26,0) 55%)}
  .hero--photo .hero__in{min-height:0;padding:var(--s3) var(--gutter) var(--s8)}
  .hero__note{top:200px;bottom:auto}
  .why--3 h3{font-size:26px}
  .st2-list{grid-template-columns:minmax(0,1fr);gap:var(--s6)}
  .st2::before,.st2::after{display:none!important}
  .st2 > p{min-height:0}
  .side-sec__head{grid-template-columns:minmax(0,1fr);gap:var(--s2)}
  .side-sec__head p{font-size:16px}
  .verbs{grid-template-columns:minmax(0,1fr)}
  .verbs > div{padding:var(--s4) var(--s3)}
  .verbs strong{font-size:52px}
  .sys{margin-top:var(--s8)}
  .side-sec__head h2{font-size:30px}
  .sys ul{grid-template-columns:minmax(0,1fr)}
  .sys li{border-left:0;border-bottom:1px solid var(--concrete-2)!important;padding:var(--s3)}
  .sys__head{padding:var(--s4) var(--s3)}
  .sys li:last-child{border-bottom:0!important}
  .corp{padding:var(--s3)}
  .why{gap:var(--s5)}
  .why > div{padding:0!important;border-right:0!important}
  .why h3{font-size:30px}
  .pack{flex-direction:column;align-items:stretch;padding:var(--s3)}
  .ba{grid-template-columns:minmax(0,1fr)}
  .ba__arrow{transform:rotate(90deg);justify-self:center;line-height:1}
  .news a,.news .row{grid-template-columns:auto auto;justify-content:start}
  .news a span:last-child,.news .row span:last-child{grid-column:1/-1}
  .spec th,.spec td{display:block;padding:12px var(--s2)}
  .spec th{width:auto;padding-bottom:0;border-bottom:0}
  .spec thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap} /* 見た目だけ隠し、読み上げには残す */
  .form{padding:var(--s3)}
  .range{border-spacing:4px;padding:var(--s1)}
  .range th{font-size:13px}
  .range thead td{width:5.5em}
  .range td{height:44px;font-size:12px}
  .ft__in{grid-template-columns:minmax(0,1fr)}
  .cta .btn{width:100%}
  .sticky{display:block;position:fixed;left:0;right:0;bottom:0;z-index:30;padding:var(--s1) var(--gutter);background:var(--ink)}
  .sticky .btn{width:100%}
  body.has-sticky{padding-bottom:72px}
}

@media (prefers-reduced-motion:reduce){
  .belt__toggle{display:none} /* もともと動かないので停止ボタンは不要 */
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .ic{transform:none!important} /* アイコンもマウスで動かさない */
}