/* =========================================================
   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)}

/* ---------- ヘッダー（スマホは 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)}
.bases{display:grid;gap:12px;padding-bottom:var(--s3)}
.bases dl{display:grid;gap:12px}
.bases__head{font-weight:700;font-size:20px;line-height:1.3;padding:10px 16px;background:var(--sig);color:var(--ink)}
.bases__note{font-size:14px;font-weight:700;color:var(--muted)}
.base{background:var(--ink);color:#fff;padding:var(--s2) 20px;border-left:var(--stripe) solid var(--sig)}
.base dt{font-family:var(--lat);font-weight:700;font-size:16px;letter-spacing:.12em;color:var(--sig)}
.base dd{font-size:18px;font-weight:700}

/* ---------- ベルトコンベア（動くのはここだけ） ---------- */
.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%)}}

/* ---------- エリア（サービスの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 b{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)}

/* ---------- 任せる範囲（表） ---------- */
.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;background:var(--plate);padding:var(--s3);border-top:var(--stripe) solid var(--ink)}
.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 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 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}

/* ---------- タブレット ---------- */
@media (max-width:1023px){
  .grid-3,.steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pains{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- スマホ ---------- */
@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)}
  .why{gap:var(--s5)}
  .why > div{padding:0!important;border-right:0!important}
  .why b{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{display:none}
  .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}
}