@charset "UTF-8";

/* ============================================================
   株式会社みずさわ精工（架空）
   背景は2色のみ：鉄黒 #0E1114 / オフホワイト #F1EFEA
   文字の太さは 400 / 500 / 700 の3種のみ
   ============================================================ */

:root{
  --ink:   #0E1114;   /* 鉄黒 */
  --paper: #F1EFEA;   /* オフホワイト */
  --gray:  #8A9199;   /* 中間グレー（文字用） */
  --line-d: rgba(241,239,234,.20);
  --line-l: rgba(14,17,20,.18);
  --hi:    #FF5A1F;   /* 数値と現在地だけに使う */

  --sans: "Noto Sans JP", system-ui, sans-serif;
  --mono: "Roboto Mono", ui-monospace, monospace;

  --pad: 24px;
  --maxw: 1140px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  font-weight:400;
  line-height:2;
  letter-spacing:.04em;
  font-feature-settings:"palt" 1;
}
img,svg{ max-width:100%; }
p,li,dd,dt,td,th{ text-wrap:pretty; }
h1,h2,h3,.hero__copy,.voice__lead,.contact__t,.sec-head__t{ text-wrap:balance; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,p,dl,dd,ul,ol,figure{ margin:0; padding:0; }
ul,ol{ list-style:none; }
.mono{ font-family:var(--mono); font-weight:500; letter-spacing:.02em; }
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }

/* ---------- 図面風SVGの線 ---------- */
.dr{ fill:none; }
.dr-l{ stroke:currentColor; stroke-width:1.2; }
.dr-t{ stroke:currentColor; stroke-width:1.2; opacity:.55; }
.dr-c{ stroke:currentColor; stroke-width:1; stroke-dasharray:10 4 2 4; opacity:.45; }
.dr-d{ stroke:var(--hi); stroke-width:1; }
.dr-x{ fill:currentColor; font-family:var(--mono); font-size:11px; font-weight:400; opacity:.75; }

/* ============================================================
   ヘッダー
   ============================================================ */
.hd{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; gap:24px;
  padding:14px var(--pad);
  color:var(--paper);
  background:transparent;
  transition:background .3s ease, color .3s ease;
}
.hd.is-solid{ background:var(--ink); }
.hd__logo{ display:flex; align-items:baseline; gap:10px; margin-right:auto; }
.hd__logo-ja{ font-weight:700; font-size:15px; letter-spacing:.08em; }
.hd__logo-en{ font-family:var(--mono); font-size:11px; opacity:.6; letter-spacing:.14em; }
/* ナビはヒーローの上では出さない（1画面目を空けておくため）。
   ヒーローを抜けて .is-solid が付いてから現れる。 */
.hd__nav{ display:none; gap:28px; font-size:13px; }
.hd__nav a{ position:relative; padding-bottom:3px; }
.hd__nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .3s ease;
}
.hd__nav a:hover::after{ transform:scaleX(1); transform-origin:left; }
.hd__tel{ font-family:var(--mono); font-weight:500; font-size:13px; letter-spacing:.06em; }
@media (min-width:900px){
  .hd{ padding:18px 40px; }
  .hd.is-solid .hd__nav{ display:flex; animation:navIn .4s ease both; }
}
@keyframes navIn{ from{ opacity:0; transform:translateY(-6px);} to{ opacity:1; transform:none; } }

/* ============================================================
   ヒーロー（1画面目の要素は5個まで）
   ============================================================ */
.hero{
  background:var(--ink); color:var(--paper);
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:120px var(--pad) 56px;
  position:relative; overflow:hidden;
}
.hero::before{ /* 目盛り（装飾・要素数に数えない疑似要素） */
  content:""; position:absolute; left:0; right:0; bottom:0; height:56px;
  background-image:repeating-linear-gradient(to right,
    var(--line-d) 0 1px, transparent 1px 40px);
  opacity:.9;
}
.hero__label{
  font-family:var(--mono); font-size:11px; font-weight:400;
  letter-spacing:.14em; color:var(--gray); line-height:1.9;
}
.hero__copy{
  margin-top:28px;
  font-size:clamp(30px,7.4vw,56px); font-weight:700; line-height:1.32;
  letter-spacing:.02em;
}
.hero__num{
  margin-top:auto; padding-top:56px;
  display:flex; align-items:baseline; gap:12px;
  font-family:var(--mono); font-weight:500; color:var(--hi);
  line-height:.9;
}
.hero__num-v{ font-size:clamp(72px,18vw,168px); letter-spacing:-.02em; }
.hero__num-u{ font-size:24px; }
.hero__note{ margin-top:20px; font-size:13px; color:var(--gray); }
@media (min-width:900px){
  .hero{ padding:0 40px 88px; justify-content:flex-end; }
  .hero__note{ max-width:420px; }
}

/* ============================================================
   セクション見出し
   ============================================================ */
.sec-head{ max-width:760px; }
.sec-head__no{
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.2em; color:var(--hi);
}
.sec-head__t{
  margin-top:20px;
  font-size:clamp(24px,4.4vw,40px); font-weight:700; line-height:1.5;
  letter-spacing:.01em;
}
.sec-head__lead{ margin-top:28px; color:rgba(14,17,20,.72); }
.sec-head--rev .sec-head__lead{ color:var(--gray); }

/* ============================================================
   加工実績カルテ（明るい面）
   ============================================================ */
.works{ background:var(--paper); padding:120px 0 160px; }
@media (min-width:900px){ .works{ padding:200px 0; } }

/* 物差し */
.scale{ margin-top:80px; border-top:1px solid var(--line-l); padding-top:32px; }
.scale__cap{ font-size:13px; color:rgba(14,17,20,.7); }
.scale__rail{ margin-top:32px; display:flex; flex-direction:column; gap:20px; }
.scale__bar{ position:relative; padding-bottom:22px; }
.scale__bar::before{
  content:""; display:block; height:3px; background:var(--ink);
  width:var(--w); transform:scaleX(0); transform-origin:left;
  transition:transform .9s cubic-bezier(.2,.7,.2,1);
}
.scale__bar--ours::before{ background:var(--hi); height:5px; }
.is-in .scale__bar::before{ transform:scaleX(1); }
.scale__bar:nth-child(2)::before{ transition-delay:.1s; }
.scale__bar:nth-child(3)::before{ transition-delay:.2s; }
.scale__bar:nth-child(4)::before{ transition-delay:.3s; }
.scale__tag{
  position:absolute; left:0; bottom:0;
  font-family:var(--mono); font-size:11px; font-weight:400; letter-spacing:.06em;
  color:rgba(14,17,20,.75);
}
.scale__bar--ours .scale__tag{ color:var(--hi); font-weight:500; }

/* カルテ */
.card{
  margin-top:64px; padding-top:48px;
  border-top:1px solid var(--line-l);
  display:grid; gap:32px;
}
.card__fig{ color:var(--ink); }
.card__fig svg{ width:100%; height:auto; max-width:340px; }
.card__cat{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--gray); }
.card__t{ margin-top:12px; font-size:24px; font-weight:700; line-height:1.6; }
.spec{ margin-top:28px; border-top:1px solid var(--line-l); }
.spec > div{
  display:grid; grid-template-columns:1fr; gap:2px;
  padding:14px 0; border-bottom:1px solid var(--line-l);
}
.spec dt{ font-size:13px; font-weight:500; color:rgba(14,17,20,.55); line-height:1.8; }
.spec dd{ font-size:15px; line-height:1.8; }
.spec b{ font-weight:500; }
.spec .hi{ color:var(--hi); }
.card__memo{ margin-top:24px; font-size:13px; color:rgba(14,17,20,.72); }
@media (min-width:900px){
  .card{ grid-template-columns:300px 1fr; gap:64px; margin-top:96px; padding-top:64px; }
  .spec > div{ grid-template-columns:180px 1fr; gap:16px; }
}

/* ============================================================
   できること（濃い面）
   ============================================================ */
.can{ background:var(--ink); color:var(--paper); padding:120px 0 40px; }
.can__list{ margin-top:64px; display:grid; gap:0; }
.can__list li{ padding:36px 0; border-top:1px solid var(--line-d); }
.can__no{ font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.2em; color:var(--hi); }
.can__t{ margin-top:10px; font-size:24px; font-weight:700; line-height:1.6; }
.can__d{ margin-top:12px; font-size:15px; color:var(--gray); }
@media (min-width:900px){
  .can{ padding:200px 0 64px; }
  .can__list li{ display:grid; grid-template-columns:96px 300px 1fr; gap:40px; align-items:baseline; padding:44px 0; }
  .can__no{ padding-top:6px; }
  .can__t{ margin-top:0; }
  .can__d{ margin-top:0; }
}

/* ============================================================
   設備（濃い面のつづき）
   ============================================================ */
.equip{ background:var(--ink); color:var(--paper); padding:88px 0 120px; }
@media (min-width:900px){ .equip{ padding:120px 0 200px; } }
.table-scroll{ margin-top:56px; overflow-x:auto; }
.tbl{ width:100%; min-width:640px; border-collapse:collapse; }
.tbl th,.tbl td{
  text-align:left; padding:16px 20px 16px 0;
  border-bottom:1px solid var(--line-d); font-size:15px; line-height:1.8;
  vertical-align:top;
}
.tbl th{ font-size:11px; font-weight:500; letter-spacing:.16em; color:var(--gray);
  font-family:var(--mono); border-bottom-color:var(--paper); }
.tbl td:first-child{ color:var(--gray); font-size:13px; white-space:nowrap; }
.equip__note{ margin-top:32px; font-size:13px; color:var(--gray); }

/* ============================================================
   受ける／受けない（明るい面）
   ============================================================ */
.policy{ background:var(--paper); padding:120px 0; }
@media (min-width:900px){ .policy{ padding:200px 0; } }
.policy__cols{ margin-top:64px; display:grid; gap:56px; }
.policy__h{ font-size:13px; font-weight:500; letter-spacing:.1em; padding-bottom:16px; border-bottom:1px solid var(--ink); }
.policy__h--ng{ color:var(--gray); border-bottom-color:var(--line-l); }
.policy__col ul{ margin-top:8px; }
.policy__col li{ padding:16px 0 16px 26px; border-bottom:1px solid var(--line-l); position:relative; font-size:15px; }
.policy__col li::before{
  content:""; position:absolute; left:0; top:26px; width:10px; height:1px; background:var(--hi);
}
.policy__col--ng li::before{ background:var(--gray); }
.policy__h--ng + ul li::before{ background:var(--gray); }
@media (min-width:900px){
  .policy__cols{ grid-template-columns:1fr 1fr; gap:80px; }
}

/* ============================================================
   流れ（明るい面）
   ============================================================ */
.flow{ background:var(--paper); padding:0 0 120px; }
@media (min-width:900px){ .flow{ padding:0 0 200px; } }
.flow__list{ margin-top:56px; }
.flow__list li{
  padding:32px 0; border-top:1px solid var(--line-l);
  display:grid; gap:8px;
}
.flow__no{ font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.16em; color:var(--hi); }
.flow__t{ font-size:24px; font-weight:700; line-height:1.5; }
.flow__d{ font-size:15px; color:rgba(14,17,20,.72); }
.flow__time{ font-family:var(--mono); font-size:13px; font-weight:500; color:var(--ink); }
@media (min-width:900px){
  .flow__list li{ grid-template-columns:120px 1fr 140px; gap:40px; align-items:baseline; padding:40px 0; }
  .flow__time{ text-align:right; }
}

/* ============================================================
   数字（濃い面）
   ============================================================ */
.stats{ background:var(--ink); color:var(--paper); padding:88px 0; }
@media (min-width:900px){ .stats{ padding:120px 0; } }
.stats__list{ display:grid; gap:40px; }
.stats__v{ font-family:var(--mono); font-weight:500; font-size:clamp(40px,9vw,56px); line-height:1; color:var(--hi); }
.stats__v span{ font-size:24px; margin-left:6px; }
.stats__k{ margin-top:14px; font-size:13px; color:var(--gray); }
@media (min-width:700px){ .stats__list{ grid-template-columns:repeat(4,1fr); gap:32px; } }

/* ============================================================
   代表のことば（明るい面）
   ============================================================ */
.voice{ background:var(--paper); padding:120px 0; }
@media (min-width:900px){ .voice{ padding:200px 0; } }
.voice__wrap{ display:grid; gap:56px; }
.voice__label{ font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.2em; color:var(--hi); }
.voice__lead{ margin-top:24px; font-size:clamp(24px,4.4vw,40px); font-weight:700; line-height:1.6; }
.voice__txt{ margin-top:28px; color:rgba(14,17,20,.78); }
.voice__sign{ margin-top:40px; font-size:13px; font-weight:500; }
.voice__fig{ color:var(--ink); opacity:.85; }
.voice__fig svg{ width:100%; max-width:220px; height:auto; }
@media (min-width:900px){
  .voice__wrap{ grid-template-columns:1fr 240px; gap:80px; align-items:start; }
}

/* ============================================================
   会社概要（明るい面）
   ============================================================ */
.company{ background:var(--paper); padding:0 0 120px; }
@media (min-width:900px){ .company{ padding:0 0 200px; } }
.company__cols{ margin-top:56px; display:grid; gap:56px; }
.outline{ border-top:1px solid var(--ink); }
.outline > div{ display:grid; gap:2px; padding:16px 0; border-bottom:1px solid var(--line-l); }
.outline dt{ font-size:13px; font-weight:500; color:rgba(14,17,20,.55); }
.outline dd{ font-size:15px; }
.access__h{ font-size:13px; font-weight:500; letter-spacing:.1em; padding-bottom:16px; border-bottom:1px solid var(--ink); }
.access__t{ margin-top:24px; font-size:15px; }
.access__map{ margin-top:28px; border:1px solid var(--line-l); }
.access__map svg{ display:block; width:100%; height:auto; }
.mp-bg{ fill:rgba(14,17,20,.04); }
.mp-rd{ stroke:rgba(14,17,20,.28); stroke-width:7; fill:none; }
.mp-rv{ stroke:rgba(14,17,20,.16); stroke-width:14; fill:none; }
.mp-pin{ fill:var(--hi); }
.mp-x{ fill:rgba(14,17,20,.7); font-family:var(--mono); font-size:11px; }
@media (min-width:900px){
  .company__cols{ grid-template-columns:1fr 380px; gap:80px; }
  .outline > div{ grid-template-columns:160px 1fr; gap:16px; }
}

/* ============================================================
   お問い合わせ（濃い面）
   ============================================================ */
.contact{ background:var(--ink); color:var(--paper); padding:120px 0; }
@media (min-width:900px){ .contact{ padding:200px 0; } }
.contact__label{ font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.2em; color:var(--hi); }
.contact__t{ margin-top:20px; font-size:clamp(24px,4.4vw,40px); font-weight:700; line-height:1.5; }
.contact__lead{ margin-top:24px; color:var(--gray); max-width:640px; }
.contact__cols{ margin-top:64px; display:grid; gap:56px; }
.contact__tel-k{ font-size:13px; color:var(--gray); }
.contact__tel-v{ margin-top:10px; font-size:clamp(28px,5.6vw,40px); color:var(--paper); line-height:1.2; }
.contact__tel-n{ margin-top:14px; font-size:13px; color:var(--gray); }

.form__row{ display:grid; gap:8px; margin-bottom:24px; }
.form label{ font-size:13px; font-weight:500; color:var(--gray); }
.form input,.form select,.form textarea{
  width:100%; padding:14px 16px;
  background:transparent; color:var(--paper);
  border:1px solid var(--line-d); border-radius:0;
  font-family:var(--sans); font-size:15px; font-weight:400; line-height:1.8;
}
.form textarea{ resize:vertical; }
.form input::placeholder,.form textarea::placeholder{ color:rgba(138,145,153,.7); }
.form input:focus,.form select:focus,.form textarea:focus{ outline:none; border-color:var(--hi); }
.form select{ appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--gray) 50%),linear-gradient(135deg,var(--gray) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;
  background-size:6px 6px,6px 6px; background-repeat:no-repeat; }
.form select option{ color:#0E1114; }
.form__btn{
  width:100%; padding:18px 24px; margin-top:8px;
  background:var(--hi); color:var(--ink);
  border:none; border-radius:0; cursor:pointer;
  font-family:var(--sans); font-size:15px; font-weight:700; letter-spacing:.08em;
  transition:opacity .25s ease;
}
.form__btn:hover{ opacity:.82; }
.form__note{ margin-top:16px; font-size:13px; color:var(--gray); }
@media (min-width:900px){
  .contact__cols{ grid-template-columns:1fr 1fr; gap:80px; }
  .form__btn{ width:auto; padding:18px 56px; }
}

/* ============================================================
   フッター
   ============================================================ */
.ft{ background:var(--ink); color:var(--paper); padding:0 0 40px; border-top:1px solid var(--line-d); }
.ft__wrap{ padding-top:56px; display:grid; gap:40px; }
.ft__logo{ font-weight:700; font-size:15px; letter-spacing:.08em; }
.ft__addr{ margin-top:12px; font-size:13px; color:var(--gray); }
.ft__nav{ display:grid; gap:12px; font-size:13px; }
.ft__cr{ margin-top:56px; padding-inline:var(--pad); font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--gray); }
@media (min-width:900px){
  .ft__wrap{ grid-template-columns:1fr auto; }
  .ft__nav{ grid-auto-flow:column; gap:32px; }
  .ft__cr{ margin-top:80px; text-align:right; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
}

/* ============================================================
   モーション
   ============================================================ */
[data-anim]{ opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease; }
[data-anim].is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ transition-duration:.001ms !important; animation-duration:.001ms !important; }
  [data-anim]{ opacity:1; transform:none; }
  .scale__bar::before{ transform:scaleX(1); }
}