@charset "utf-8";
/* =========================================================
   辻結運輸倉庫株式会社(架空)— HPモック 第9号
   設計の出どころ: design-system/009-tsujiyui-logistics/MASTER.md
   採用したもの: 配色 / 余白トークン / 影の段 / ボタン・カード・入力欄の仕様
   採用しなかったもの:
     - 書体 Inter(外部フォント禁止。端末に標準で入っている書体だけを指定する)
     - 様式「Exaggerated Minimalism」(ファッション・高級ブランド向けと出た。
       荷主と運転手が見る物流会社には合わないと判断し、平面的で構造的な作りにした)
   ========================================================= */

:root{
  /* --- MASTER.md の配色をそのまま --- */
  --c-primary:#2563EB;
  --c-on-primary:#FFFFFF;
  --c-secondary:#3B82F6;
  --c-accent:#EA580C;
  --c-bg:#EFF6FF;
  --c-fg:#1E40AF;
  --c-muted:#E9EFF8;
  --c-border:#BFDBFE;
  --c-destructive:#DC2626;
  --c-ring:#2563EB;
  /* --- 本文用に足した色(理由: #1E40AF は見出しには良いが、
         長い本文を全部この青にすると読み疲れる) --- */
  --c-ink:#0F172A;
  --c-ink-2:#475569;
  --c-deep:#0B2545;
  --c-paper:#FFFFFF;

  /* --- MASTER.md の余白トークン --- */
  --space-xs:4px;
  --space-sm:8px;
  --space-md:16px;
  --space-lg:24px;
  --space-xl:32px;
  --space-2xl:48px;
  --space-3xl:64px;

  /* --- MASTER.md の影 --- */
  --shadow-sm:0 1px 2px rgba(0,0,0,.05);
  --shadow-md:0 4px 6px rgba(0,0,0,.10);
  --shadow-lg:0 10px 15px rgba(0,0,0,.10);
  --shadow-xl:0 20px 25px rgba(0,0,0,.15);

  --radius:8px;
  --radius-lg:12px;
  --wrap:1120px;
  --header-h:64px;

  --font-body:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic Medium","Yu Gothic",YuGothic,Meiryo,system-ui,-apple-system,sans-serif;
  --font-num:"Helvetica Neue",Arial,"Yu Gothic",system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--c-paper); color:var(--c-ink);
  font-family:var(--font-body); font-size:16px; line-height:1.85;
  letter-spacing:.02em; overflow-x:hidden;
}
img,svg{ max-width:100%; }
a{ color:var(--c-primary); }
h1,h2,h3,h4{ line-height:1.35; letter-spacing:.01em; color:var(--c-fg); margin:0; font-weight:700; }
p{ margin:0 0 1em; }
ul,ol{ margin:0 0 1em; padding-left:1.3em; }
li{ margin-bottom:.4em; }

.wrap{ width:min(100% - 32px, var(--wrap)); margin-inline:auto; }
.section{ padding:var(--space-3xl) 0; }
.section--tint{ background:var(--c-bg); }
.section--deep{ background:var(--c-deep); color:#DCE7F5; }
.section--deep h2,.section--deep h3{ color:#FFFFFF; }

.eyebrow{
  font-family:var(--font-num); font-size:12px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--c-accent);
  margin:0 0 var(--space-sm);
}
.section--deep .eyebrow{ color:#FDBA74; }
.h-sec{ font-size:clamp(24px,3.4vw,34px); margin:0 0 var(--space-md); }
.lead{ font-size:clamp(15px,1.6vw,18px); color:var(--c-ink-2); max-width:60ch; }
.section--deep .lead{ color:#B9CBE3; }

/* ---------- ヘッダ ---------- */
.site-header{
  position:sticky; top:0; z-index:60; background:rgba(255,255,255,.94);
  border-bottom:1px solid var(--c-border); backdrop-filter:blur(6px);
}
.site-header__in{
  height:var(--header-h); display:flex; align-items:center; gap:var(--space-md);
}
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--c-fg); }
.brand__mark{ width:34px; height:34px; flex:0 0 34px; }
.brand__name{ font-size:16px; font-weight:700; line-height:1.2; }
.brand__name span{ display:block; font-family:var(--font-num); font-size:10px; letter-spacing:.2em; color:var(--c-ink-2); font-weight:600; }

.nav{ margin-left:auto; }
.nav__list{ list-style:none; display:flex; gap:var(--space-lg); margin:0; padding:0; }
.nav__list a{
  text-decoration:none; color:var(--c-ink); font-size:14px; font-weight:600;
  padding:6px 2px; border-bottom:2px solid transparent; transition:color 200ms ease,border-color 200ms ease;
}
.nav__list a:hover{ color:var(--c-primary); border-bottom-color:var(--c-primary); }
.nav__list a[aria-current="page"]{ color:var(--c-primary); border-bottom-color:var(--c-primary); }
.nav-toggle{ display:none; }

.header-cta{
  display:inline-flex; align-items:center; gap:6px; margin-left:var(--space-md);
  background:var(--c-accent); color:#fff; text-decoration:none;
  padding:9px 16px; border-radius:var(--radius); font-size:14px; font-weight:700;
  transition:opacity 200ms ease,transform 200ms ease; cursor:pointer;
}
.header-cta:hover{ opacity:.9; transform:translateY(-1px); }

/* ---------- ボタン(MASTER.md の仕様) ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 24px; border-radius:var(--radius); font-weight:600; font-size:15px;
  text-decoration:none; border:2px solid transparent; cursor:pointer;
  transition:opacity 200ms ease,transform 200ms ease,background-color 200ms ease,color 200ms ease;
}
.btn-primary{ background:var(--c-accent); color:#fff; }
.btn-primary:hover{ opacity:.9; transform:translateY(-1px); }
.btn-secondary{ background:transparent; color:var(--c-primary); border-color:var(--c-primary); }
.btn-secondary:hover{ background:var(--c-primary); color:#fff; transform:translateY(-1px); }
.section--deep .btn-secondary{ color:#BFDBFE; border-color:#6C8CB8; }
.section--deep .btn-secondary:hover{ background:#BFDBFE; color:var(--c-deep); }

:where(a,button,summary,input,textarea,select):focus-visible{
  outline:3px solid var(--c-ring); outline-offset:2px; border-radius:4px;
}

/* ---------- カード(MASTER.md の仕様) ---------- */
.grid{ display:grid; gap:var(--space-lg); }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }

.card{
  background:var(--c-bg); border:1px solid var(--c-border);
  border-radius:var(--radius-lg); padding:var(--space-lg);
  box-shadow:var(--shadow-md); transition:box-shadow 200ms ease,transform 200ms ease;
  display:flex; flex-direction:column;
}
a.card{ text-decoration:none; color:inherit; cursor:pointer; }
a.card:hover{ box-shadow:var(--shadow-lg); transform:translateY(-2px); }
.card__icon{ width:40px; height:40px; margin-bottom:var(--space-md); }
.card__title{ font-size:18px; margin:0 0 var(--space-sm); }
.card__text{ font-size:14px; color:var(--c-ink-2); margin:0; }
.card__more{
  margin-top:auto; padding-top:var(--space-md); font-size:13px; font-weight:700;
  color:var(--c-accent); display:inline-flex; align-items:center; gap:6px;
}

/* ---------- ヒーロー ---------- */
.hero{ background:var(--c-deep); color:#DCE7F5; padding:var(--space-3xl) 0; position:relative; overflow:hidden; }
.hero__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:var(--space-2xl); align-items:center; }
.hero h1{
  color:#fff; font-size:clamp(30px,5vw,54px); line-height:1.25; margin:0 0 var(--space-lg);
  letter-spacing:-.01em;
}
.hero h1 em{ font-style:normal; color:#FDBA74; }
.hero__lead{ color:#B9CBE3; font-size:clamp(15px,1.7vw,18px); margin-bottom:var(--space-xl); }
.hero__cta{ display:flex; gap:var(--space-md); flex-wrap:wrap; }
.hero__stats{ display:flex; gap:var(--space-xl); margin-top:var(--space-2xl); flex-wrap:wrap; }
.stat__num{ font-family:var(--font-num); font-size:32px; font-weight:800; color:#fff; line-height:1; }
.stat__num small{ font-size:14px; font-weight:600; margin-left:2px; color:#FDBA74; }
.stat__label{ font-size:12px; color:#9DB4D0; margin-top:6px; }

/* ---------- 主題C:スクロールで文字と図が組み変わる ---------- */
.scene{ background:var(--c-paper); }
.scene__grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:var(--space-2xl); align-items:start; }
.scene__sticky{ position:sticky; top:calc(var(--header-h) + 16px); align-self:start; }
.scene__stage{
  background:var(--c-deep); border-radius:var(--radius-lg); padding:var(--space-md);
  box-shadow:var(--shadow-xl); position:relative;
}
.scene__stage svg{ display:block; width:100%; height:auto; }
.scene__meter{ display:flex; gap:6px; margin-top:var(--space-md); }
.scene__meter b{
  flex:1; height:4px; background:#1E3A5F; border-radius:2px; display:block;
  transition:background-color 300ms ease;
}
.scene__meter b.on{ background:var(--c-accent); }
.scene__caption{
  margin-top:var(--space-sm); font-size:12px; color:#9DB4D0;
  font-family:var(--font-num); letter-spacing:.12em;
}

.steps{ margin:0; padding:0; list-style:none; }
.step{
  padding:var(--space-2xl) 0; border-top:1px solid var(--c-border);
  opacity:.42; transition:opacity 400ms ease;
}
.step:first-child{ border-top:0; }
.step.is-active{ opacity:1; }
.step__no{
  font-family:var(--font-num); font-size:13px; font-weight:800; letter-spacing:.16em;
  color:var(--c-accent); display:block; margin-bottom:var(--space-sm);
}
.step__title{ font-size:clamp(20px,2.6vw,28px); margin:0 0 var(--space-md); }
.step__body{ color:var(--c-ink-2); margin:0 0 var(--space-md); }
.step__facts{ list-style:none; padding:0; margin:0; display:flex; gap:var(--space-lg); flex-wrap:wrap; }
.step__facts li{ margin:0; }
.step__facts b{ display:block; font-family:var(--font-num); font-size:22px; color:var(--c-fg); line-height:1.2; }
.step__facts span{ font-size:12px; color:var(--c-ink-2); }

/* JS が動かないとき / IntersectionObserver が無いとき: 文章は全部くっきり見せる。
   図は HTML 側で 1段目に .on を書いてあるので、白紙にはならない。 */
.no-js .step,.no-io .step{ opacity:1; }

/* 図の中の段の出し分け */
.stage-layer{ opacity:0; transition:opacity 500ms ease; }
.stage-layer.on{ opacity:1; }
.stage-dash{ stroke-dasharray:6 6; animation:dash 2.4s linear infinite; }
@keyframes dash{ to{ stroke-dashoffset:-48; } }
.stage-pulse{ animation:pulse 2.6s ease-in-out infinite; transform-origin:center; }
@keyframes pulse{ 0%,100%{ opacity:.35 } 50%{ opacity:1 } }
.truck-run{ animation:run 7s linear infinite; }
@keyframes run{ 0%{ transform:translateX(-60px) } 100%{ transform:translateX(420px) } }

/* ---------- 工程のレール(flow.html) ---------- */
.rail{ position:relative; padding-left:38px; }
.rail::before{
  content:""; position:absolute; left:13px; top:8px; bottom:8px; width:2px;
  background:linear-gradient(var(--c-border),var(--c-primary));
}
.rail__item{ position:relative; padding-bottom:var(--space-2xl); }
.rail__item::before{
  content:""; position:absolute; left:-31px; top:6px; width:12px; height:12px;
  border-radius:50%; background:var(--c-paper); border:3px solid var(--c-primary);
}
.rail__item.is-active::before{ background:var(--c-accent); border-color:var(--c-accent); }
.rail__no{ font-family:var(--font-num); font-size:12px; letter-spacing:.16em; color:var(--c-accent); font-weight:800; }
.rail__title{ font-size:20px; margin:2px 0 var(--space-sm); }

/* ---------- 表 ---------- */
.table-scroll{ overflow-x:auto; }
table.tbl{ width:100%; border-collapse:collapse; font-size:14px; min-width:520px; }
table.tbl th,table.tbl td{ border:1px solid var(--c-border); padding:12px 14px; text-align:left; vertical-align:top; }
table.tbl th{ background:var(--c-muted); color:var(--c-fg); font-weight:700; white-space:nowrap; }
table.tbl caption{ caption-side:bottom; font-size:12px; color:var(--c-ink-2); padding-top:8px; text-align:left; }

/* ---------- 事例 ---------- */
.case-hero{ background:var(--c-bg); border-bottom:1px solid var(--c-border); padding:var(--space-2xl) 0; }
.tag{
  display:inline-block; background:var(--c-muted); color:var(--c-fg);
  border:1px solid var(--c-border); border-radius:999px;
  font-size:12px; font-weight:700; padding:3px 12px; margin:0 6px 6px 0;
}
.kpi{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-lg); }
.kpi__item{ background:var(--c-paper); border:1px solid var(--c-border); border-radius:var(--radius-lg); padding:var(--space-lg); text-align:center; }
.kpi__num{ font-family:var(--font-num); font-size:30px; font-weight:800; color:var(--c-accent); line-height:1.1; }
.kpi__label{ font-size:12px; color:var(--c-ink-2); margin-top:6px; }

.quote{
  border-left:4px solid var(--c-accent); padding:var(--space-md) 0 var(--space-md) var(--space-lg);
  margin:var(--space-xl) 0; font-size:17px; color:var(--c-fg);
}
.quote cite{ display:block; font-style:normal; font-size:13px; color:var(--c-ink-2); margin-top:var(--space-sm); }

/* ---------- 採用 ---------- */
.job{ border:1px solid var(--c-border); border-radius:var(--radius-lg); overflow:hidden; margin-bottom:var(--space-lg); background:var(--c-paper); }
.job__head{ background:var(--c-bg); padding:var(--space-lg); }
.job__title{ font-size:20px; margin:0 0 6px; }
.job__meta{ font-size:13px; color:var(--c-ink-2); margin:0; }
.job__body{ padding:var(--space-lg); }
details.faq{ border-bottom:1px solid var(--c-border); padding:var(--space-md) 0; }
details.faq summary{ cursor:pointer; font-weight:700; color:var(--c-fg); list-style:none; display:flex; gap:10px; align-items:flex-start; }
details.faq summary::-webkit-details-marker{ display:none; }
details.faq summary::before{ content:"Q"; font-family:var(--font-num); color:var(--c-accent); font-weight:800; flex:0 0 auto; }
details.faq p{ margin:var(--space-sm) 0 0 22px; color:var(--c-ink-2); font-size:15px; }

/* ---------- フォーム ---------- */
.form{ display:grid; gap:var(--space-lg); }
.field label{ display:block; font-size:14px; font-weight:700; color:var(--c-fg); margin-bottom:6px; }
.field .req{ color:var(--c-destructive); font-size:12px; margin-left:6px; }
.input,select.input,textarea.input{
  width:100%; padding:12px 16px; border:1px solid #E2E8F0; border-radius:var(--radius);
  font-size:16px; font-family:inherit; background:#fff; color:var(--c-ink);
  transition:border-color 200ms ease,box-shadow 200ms ease;
}
.input:focus{ border-color:var(--c-primary); outline:none; box-shadow:0 0 0 3px rgba(37,99,235,.15); }
textarea.input{ min-height:140px; resize:vertical; }
.note{
  background:var(--c-muted); border:1px dashed var(--c-border); border-radius:var(--radius);
  padding:var(--space-md); font-size:13px; color:var(--c-ink-2);
}

/* ---------- フッタ ---------- */
.site-footer{ background:var(--c-deep); color:#9DB4D0; padding:var(--space-3xl) 0 var(--space-xl); font-size:14px; }
.site-footer a{ color:#BFDBFE; text-decoration:none; }
.site-footer a:hover{ text-decoration:underline; }
.footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--space-xl); }
.footer__grid h3{ color:#fff; font-size:14px; margin:0 0 var(--space-md); }
.footer__grid ul{ list-style:none; padding:0; margin:0; }
.footer__grid li{ margin-bottom:8px; }
.footer__fiction{
  margin-top:var(--space-2xl); padding-top:var(--space-lg); border-top:1px solid #23456E;
  font-size:12px; line-height:1.9; color:#8FA8C6;
}
.footer__fiction strong{ color:#FDBA74; }

.skip{
  position:absolute; left:-9999px; top:0; background:var(--c-accent); color:#fff;
  padding:10px 16px; z-index:100; border-radius:0 0 var(--radius) 0;
}
.skip:focus{ left:0; }

.motion-note{
  display:none; align-items:center; gap:var(--space-md); flex-wrap:wrap;
  background:var(--c-muted); border:1px solid var(--c-border); border-radius:var(--radius);
  padding:var(--space-md); font-size:13px; color:var(--c-ink-2); margin-bottom:var(--space-xl);
}
.crumbs{ font-size:13px; color:var(--c-ink-2); padding:var(--space-md) 0 0; }
.crumbs a{ text-decoration:none; }
.crumbs a:hover{ text-decoration:underline; }

/* ---------- 動きを止める設定のとき ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  /* 勝手に動くものは止める。ただし図の切り替えは読み手のスクロールに従うものなので残す
     (切り替えが瞬時になるだけ)。止めた理由を画面に出し、見たい人には戻す口を用意する。 */
  .step{ opacity:1 !important; }
  .motion-note{ display:flex; }

  /* 「動きを見る」を押したとき: 止めたものを戻す */
  html.force-motion .stage-dash{ animation:dash 2.4s linear infinite !important; }
  html.force-motion .stage-pulse{ animation:pulse 2.6s ease-in-out infinite !important; }
  html.force-motion .truck-run{ animation:run 7s linear infinite !important; }
  html.force-motion .step{ opacity:.42 !important; transition:opacity 400ms ease !important; }
  html.force-motion .step.is-active{ opacity:1 !important; }
  html.force-motion .stage-layer{ transition:opacity 500ms ease !important; }
}

/* ---------- 画面幅 ---------- */
@media (max-width:1024px){
  .grid--4{ grid-template-columns:repeat(2,1fr); }
  .hero__grid{ grid-template-columns:1fr; }
  .scene__grid{ grid-template-columns:1fr; }
  .scene__sticky{ position:static; }
  .scene__stage{ margin-bottom:var(--space-xl); }
}
@media (max-width:820px){
  .grid--3{ grid-template-columns:1fr; }
  .grid--2{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr; }
  .nav{
    position:fixed; inset:var(--header-h) 0 auto 0; background:#fff;
    border-bottom:1px solid var(--c-border); box-shadow:var(--shadow-lg);
    display:none; padding:var(--space-md) 0;
  }
  .nav.is-open{ display:block; }
  .nav__list{ flex-direction:column; gap:0; width:min(100% - 32px,var(--wrap)); margin-inline:auto; }
  .nav__list a{ display:block; padding:14px 0; border-bottom:1px solid var(--c-muted); }
  .nav-toggle{
    display:inline-flex; align-items:center; justify-content:center; margin-left:auto;
    width:44px; height:44px; background:transparent; border:1px solid var(--c-border);
    border-radius:var(--radius); cursor:pointer; color:var(--c-fg);
  }
  .header-cta{ display:none; }
}
@media (max-width:520px){
  body{ font-size:15px; }
  .section{ padding:var(--space-2xl) 0; }
  .kpi{ grid-template-columns:1fr; }
  .hero__stats{ gap:var(--space-lg); }
  .step__facts{ gap:var(--space-md); }
  .brand__name{ font-size:14px; }
}