/* =========================================================
   RYOSEN PRECISION — concept site
   墨〜グラファイトの地 / 金属の質感 / 図面の線
   ========================================================= */

:root {
  --sumi: #0a0b0d;
  --graphite: #111316;
  --graphite-2: #171a1e;
  --graphite-3: #1f2327;
  --steel: #2b3036;
  --line: rgba(214, 222, 230, .11);
  --line-2: rgba(214, 222, 230, .2);
  --line-3: rgba(214, 222, 230, .42);
  --text: #e8eaec;
  --text-2: #b4bac1;
  --text-3: #7d848c;
  --spark: #ff9a3c;
  --spark-2: #ffc078;
  --spark-dim: rgba(255, 154, 60, .14);
  --paper: #e7e4dd;
  --paper-ink: #1b1d20;

  --f-ja: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;
  --f-en: "Archivo", "Zen Kaku Gothic New", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --gutter: clamp(16px, 4.2vw, 56px);
  --max: 1320px;
  --hd-h: 72px;
  --sec-y: clamp(96px, 12vw, 176px);
  --chamfer: 12px;
  --ease: cubic-bezier(.65, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* 金属のグラデーション（文字・線に使う） */
  --metal: linear-gradient(176deg, #fbfcfd 0%, #c9cfd5 30%, #8a939c 48%, #e9edf0 56%, #9aa3ac 78%, #5f666e 100%);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--hd-h); }
body {
  margin: 0;
  background: var(--sumi);
  color: var(--text);
  font-family: var(--f-ja);
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: .02em;
  font-feature-settings: "palt" 0;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
/* 紙の上ではなく金属の上、というざらつき（極薄のノイズ） */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 100;
  pointer-events: none;
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
table { border-collapse: collapse; width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--spark); color: var(--sumi); }
:focus-visible { outline: 2px solid var(--spark); outline-offset: 3px; }

.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--f-mono); font-feature-settings: "zero" 1; letter-spacing: 0; }
.wrap { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 300; padding: 8px 14px; background: var(--spark); color: var(--sumi); font-weight: 700; }
.skip:focus { top: 12px; }

.metal {
  background: var(--metal);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ---------- buttons（角はC面取り） ---------- */
.btn {
  --c: 10px;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 56px; padding: 0 26px 0 28px;
  font-weight: 700; font-size: 15px; letter-spacing: .06em;
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  transition: background-color .3s, color .3s;
  cursor: pointer; border: 0;
}
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform .4s var(--ease-out); }
.btn:hover svg { transform: translateX(4px); }
.btn--spark { background: var(--spark); color: #120b04; }
.btn--spark::after {
  /* 研削面のような横筋 */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 4px), linear-gradient(180deg, rgba(255,255,255,.25), transparent 55%);
  mix-blend-mode: soft-light;
}
.btn--spark:hover { background: var(--spark-2); }
.btn--line { color: var(--text); background: rgba(255,255,255,.02); }
.btn--line::before {
  /* 面取りした輪郭線：clip-path では線が欠けるので、背景で描く */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(135deg, var(--line-3) 0 calc(var(--c) * .7071 + .5px), transparent calc(var(--c) * .7071 + .5px)) top left / var(--c) var(--c) no-repeat;
  border: 1px solid var(--line-3);
  clip-path: inherit;
}
.btn--line:hover { background: rgba(255,255,255,.07); }
.btn--wide { width: 100%; }

/* ---------- header ---------- */
.hd {
  position: fixed; inset: 0 0 auto; z-index: 50;
  height: var(--hd-h);
  transition: background-color .4s, border-color .4s, transform .5s var(--ease);
  border-bottom: 1px solid transparent;
}
/* backdrop-filter をヘッダー本体に掛けると、中の position:fixed（スマホのメニュー）がヘッダーの箱に閉じ込められるため、擬似要素に分ける */
.hd::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(10, 11, 13, .78);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  opacity: 0; transition: opacity .4s;
}
.hd.is-solid::before { opacity: 1; }
.hd.is-solid { border-bottom-color: var(--line); }
.hd__in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: none; padding-inline: clamp(16px, 2.6vw, 40px); }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand__mark { width: 34px; height: 34px; flex: none; }
.brand__frame { fill: none; stroke: var(--text); stroke-width: 1.6; }
.brand__ridge { fill: none; stroke: var(--spark); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.brand__txt { display: flex; flex-direction: column; line-height: 1.1; }
.brand__ja { font-weight: 900; font-size: 19px; letter-spacing: .14em; }
.brand__en { font-family: var(--f-en); font-stretch: 125%; font-weight: 600; font-size: 8.5px; letter-spacing: .32em; color: var(--text-3); margin-top: 4px; }

.gnav { display: flex; align-items: center; gap: clamp(16px, 2vw, 32px); }
.gnav__list { display: flex; gap: clamp(14px, 1.9vw, 30px); }
.gnav__list a { position: relative; display: inline-flex; align-items: baseline; gap: 6px; font-size: 14px; font-weight: 500; letter-spacing: .08em; color: var(--text-2); padding: 6px 0; transition: color .3s; }
.gnav__list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--spark); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.gnav__list a:hover { color: var(--text); }
.gnav__list a:hover::after { transform: scaleX(1); transform-origin: left; }
.gnav__no { font-family: var(--f-mono); font-size: 10px; color: var(--text-3); }
.gnav__cta { min-height: 44px; padding: 0 18px 0 20px; font-size: 13px; --c: 8px; }
.hd__menu { display: none; }

@media (max-width: 1080px) {
  .hd__in > .brand { position: relative; z-index: 2; }
  .hd__menu {
    display: inline-flex; align-items: center; gap: 10px;
    position: relative; z-index: 2;
    height: 44px; padding: 0 4px 0 12px;
    background: none; border: 0; cursor: pointer;
    font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em;
  }
  .hd__menu-bar { position: relative; width: 22px; height: 10px; }
  .hd__menu-bar::before, .hd__menu-bar::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .4s var(--ease); }
  .hd__menu-bar::before { top: 0; }
  .hd__menu-bar::after { bottom: 0; right: 6px; }
  .hd__menu[aria-expanded="true"] .hd__menu-bar::before { transform: translateY(4.25px) rotate(45deg); }
  .hd__menu[aria-expanded="true"] .hd__menu-bar::after { transform: translateY(-4.25px) rotate(-45deg); right: 0; }

  .gnav {
    position: fixed; inset: 0; z-index: 1;
    flex-direction: column; align-items: stretch; justify-content: center; gap: 40px;
    padding: calc(var(--hd-h) + 24px) var(--gutter) 40px;
    background: var(--sumi);
    opacity: 0; visibility: hidden;
    transition: opacity .4s, visibility 0s .4s;
  }
  .gnav.is-open { opacity: 1; visibility: visible; transition: opacity .4s; }
  .gnav__list { flex-direction: column; gap: 0; border-top: 1px solid var(--line); }
  .gnav__list a { display: flex; gap: 16px; padding: 16px 0; font-size: 20px; font-weight: 700; color: var(--text); border-bottom: 1px solid var(--line); }
  .gnav__list a::after { display: none; }
  .gnav__no { font-size: 12px; color: var(--spark); }
  .gnav__cta { min-height: 56px; font-size: 15px; }
  /* JSが無ければメニューは開けないので、下に普通に並べる */
  html:not(.js) .gnav { position: static; opacity: 1; visibility: visible; padding: 0; background: none; }
  html:not(.js) .hd { position: absolute; height: auto; }
  html:not(.js) .hd__in { flex-wrap: wrap; padding-block: 14px; }
  html:not(.js) .gnav__list { flex-direction: row; flex-wrap: wrap; gap: 4px 16px; border: 0; }
  html:not(.js) .gnav__list a { font-size: 14px; padding: 4px 0; border: 0; }
}
body.is-locked { overflow: hidden; }

/* ---------- 右端のZ軸ゲージ（スクロール位置） ---------- */
.gauge { display: none; }
/* 本文の右余白（最小60px）の内側に収まる幅にしてある。文字は縦書きにして幅を取らない */
@media (min-width: 1280px) {
  .gauge {
    display: flex; flex-direction: column; align-items: flex-end; gap: 14px;
    position: fixed; right: 18px; top: 50%; z-index: 40;
    transform: translateY(-50%);
    pointer-events: none;
    font-family: var(--f-mono); font-size: 10px; color: var(--text-3);
    opacity: 0; transition: opacity .6s;
  }
  .gauge.is-on { opacity: 1; }
  .gauge__ruler {
    position: relative; width: 14px; height: 34vh;
    background:
      repeating-linear-gradient(180deg, var(--line-3) 0 1px, transparent 1px 10%) right top / 14px 100% no-repeat,
      repeating-linear-gradient(180deg, var(--line-2) 0 1px, transparent 1px 2%) right top / 7px 100% no-repeat;
    border-right: 1px solid var(--line-2);
  }
  .gauge__marker {
    position: absolute; right: 0; top: 0; width: 22px; height: 1px; background: var(--spark);
    transform: translateY(calc(var(--g, 0) * 34vh));
  }
  .gauge__marker::before { content: ""; position: absolute; left: -6px; top: -4px; border: 4px solid transparent; border-left: 6px solid var(--spark); }
  .gauge__read, .gauge__sec { writing-mode: vertical-rl; white-space: nowrap; margin-right: 1px; }
  .gauge__read { color: var(--text-2); font-variant-numeric: tabular-nums; }
  .gauge__axis { color: var(--spark); margin-bottom: 6px; }
  .gauge__sec { letter-spacing: .1em; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  --hh: max(100svh, 640px);
  position: relative; isolation: isolate;
  min-height: var(--hh);
  display: flex; align-items: center;
  overflow: hidden;
  background: var(--sumi);
}
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
/* 画像とSVGを同じ比率の箱に入れ、object-fit:cover と同じ切り抜きを自前で行う（HUDの位置をずらさないため） */
.hero__frame {
  --fw: max(100vw, calc(var(--hh) * 1.7769));
  position: absolute; top: 50%;
  width: var(--fw); aspect-ratio: 1672 / 941;
  left: clamp(calc(100vw - var(--fw)), calc(50vw - var(--fw) * .66), 0px);
  transform: translateY(-50%);
}
.hero__frame img { width: 100%; height: 100%; object-fit: cover; }
.js .hero__frame img { animation: heroIn 2.4s var(--ease-out) both; }
@keyframes heroIn { from { transform: scale(1.08); filter: brightness(.3); } to { transform: none; filter: none; } }
.hero__shade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10,11,13,.94) 0%, rgba(10,11,13,.8) 30%, rgba(10,11,13,.15) 58%, rgba(10,11,13,0) 75%),
    linear-gradient(0deg, rgba(10,11,13,.95) 0%, rgba(10,11,13,0) 30%),
    linear-gradient(180deg, rgba(10,11,13,.6) 0%, rgba(10,11,13,0) 18%);
}

.hud { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hud * { vector-effect: non-scaling-stroke; }
.hud .draw { fill: none; stroke: var(--spark); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 0; }
.hud__ring { fill: none; stroke: var(--spark-2); stroke-width: 1; stroke-dasharray: 2 10; opacity: .7; transform-origin: 1160px 402px; }
.hud .draw.hud__leader { stroke-width: 1; }
.hud__tag rect { fill: rgba(10,11,13,.62); stroke: var(--line-2); }
.hud__tag path { fill: none; stroke: var(--spark); stroke-width: 1.5; }
.hud__tag text { fill: var(--text); font-family: var(--f-mono); font-size: 19px; letter-spacing: .04em; }
.hud__tag .hud__sub { fill: var(--text-3); font-size: 16px; }
.js .hud .draw { stroke-dashoffset: 1; animation: draw 1.4s var(--ease) forwards; }
.js .hud__target .draw:nth-child(3) { animation-delay: 1.3s; }
.js .hud .draw.hud__leader { animation-delay: 1.7s; }
.js .hud__target .draw:first-child { animation-delay: 1.1s; }
.js .hud__ring { animation: spin 24s linear infinite, fadeIn 1s 1.4s both; }
.js .hud__tag { animation: fadeIn .8s 2.2s both; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; } }

.hero__in { position: relative; padding-top: calc(var(--hd-h) + 24px); padding-bottom: 140px; }
.hero__eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 500; letter-spacing: .14em; color: var(--text-2); }
.dot { width: 7px; height: 7px; background: var(--spark); box-shadow: 0 0 0 4px var(--spark-dim), 0 0 16px var(--spark); }
.hero__title {
  margin-top: 28px;
  font-weight: 900;
  font-size: clamp(2rem, 9.4vw, 5.9rem);
  line-height: 1.16;
  letter-spacing: .02em;
  font-feature-settings: "palt" 1;
}
.hero__title .ln { display: block; }
.hero__title .ln > span { display: inline-block; }
.hero__title .ln:nth-child(2) > span {
  background: var(--metal);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.js :is(.hero__title, .phero__title) .ln { overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.js :is(.hero__title, .phero__title) .ln > span { transform: translateY(110%); animation: rise 1.2s var(--ease-out) forwards; }
.js :is(.hero__title, .phero__title) .ln:nth-child(1) > span { animation-delay: .25s; }
.js :is(.hero__title, .phero__title) .ln:nth-child(2) > span { animation-delay: .4s; }
@keyframes rise { to { transform: none; } }
.hero__en { margin-top: 22px; font-family: var(--f-en); font-stretch: 125%; font-weight: 700; font-size: clamp(11px, 1.1vw, 14px); letter-spacing: .3em; color: var(--text-3); }
.hero__en .mono { color: var(--spark); letter-spacing: .06em; font-weight: 500; }
.hero__lead { margin-top: 26px; max-width: 34em; font-size: clamp(15px, 1.2vw, 17px); line-height: 2; color: var(--text-2); }
.hero__cta { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 14px; }
.js .hero__eyebrow, .js .hero__en, .js .hero__lead, .js .hero__cta { animation: up 1.1s var(--ease-out) both; }
.js .hero__eyebrow { animation-delay: .1s; }
.js .hero__en { animation-delay: .7s; }
.js .hero__lead { animation-delay: .85s; }
.js .hero__cta { animation-delay: 1s; }
@keyframes up { from { opacity: 0; transform: translateY(18px); } }

/* 加工中の座標表示 */
.dro { position: absolute; left: 0; right: 0; bottom: 0; border-top: 1px solid var(--line-2); background: rgba(10,11,13,.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.dro__in { display: flex; align-items: center; gap: clamp(16px, 3vw, 48px); height: 64px; font-family: var(--f-mono); font-size: 13px; }
.dro__state { display: inline-flex; align-items: center; gap: 10px; color: var(--spark); letter-spacing: .14em; font-size: 11px; white-space: nowrap; }
.dro__lamp { width: 8px; height: 8px; border-radius: 50%; background: var(--spark); box-shadow: 0 0 10px var(--spark); }
.js .dro__lamp { animation: blink 1.6s steps(2, jump-none) infinite; }
@keyframes blink { 50% { opacity: .25; } }
.dro__axes { display: flex; gap: clamp(14px, 2.4vw, 36px); }
.dro__axes div { display: flex; gap: 10px; }
.dro__axes dt { color: var(--text-3); }
.dro__axes dd { color: var(--text); font-variant-numeric: tabular-nums; min-width: 9ch; }
.dro__rot dd { min-width: 8.5ch; }
.dro__scroll { margin-left: auto; display: inline-flex; align-items: center; gap: 12px; font-size: 10px; letter-spacing: .3em; color: var(--text-3); }
.dro__scroll i { position: relative; width: 1px; height: 28px; background: var(--line-2); overflow: hidden; }
.dro__scroll i::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 40%; background: var(--spark); }
.js .dro__scroll i::after { animation: drip 2s var(--ease) infinite; }
@keyframes drip { from { transform: translateY(-100%); } to { transform: translateY(260%); } }

@media (max-width: 1080px) {
  .dro__axes .dro__rot { display: none; }
}
@media (max-width: 760px) {
  .hero { align-items: flex-end; }
  .hero__frame { top: -16%; transform: none; }
  .hero__shade {
    background:
      linear-gradient(0deg, rgba(10,11,13,1) 0%, rgba(10,11,13,.92) 42%, rgba(10,11,13,.25) 66%, rgba(10,11,13,.35) 100%);
  }
  .hud__tag { display: none; }
  .hero__in { padding-bottom: 104px; }
  .hero__title { margin-top: 18px; }
  .hero__lead { margin-top: 18px; font-size: 14.5px; line-height: 1.95; }
  .hero__cta { margin-top: 26px; }
  .hero__cta .btn { flex: 1 1 100%; }
  .dro__in { height: 52px; font-size: 11.5px; gap: 14px; }
  .dro__axes { gap: 12px; }
  .dro__axes div { gap: 6px; }
  .dro__axes dd { min-width: 0; }
  .dro__scroll, .dro__state { display: none; }
}
@media (max-width: 359px) {
  .dro__axes div:nth-child(3) { display: none; }
  .hero__eyebrow { font-size: 11.5px; letter-spacing: .08em; }
}

/* =========================================================
   FIGURES
   ========================================================= */
.figs { border-bottom: 1px solid var(--line); background: var(--graphite); }
.figs__list { display: grid; grid-template-columns: repeat(4, 1fr); }
.fig { padding: clamp(28px, 4vw, 52px) clamp(14px, 2vw, 32px); border-left: 1px solid var(--line); }
.fig:last-child { border-right: 1px solid var(--line); }
.fig__num { display: flex; align-items: baseline; gap: 8px; font-family: var(--f-mono); font-weight: 500; font-size: clamp(2rem, 4.2vw, 3.6rem); line-height: 1; letter-spacing: -.02em; white-space: nowrap; }
.fig__num small { font-family: var(--f-ja); font-size: 14px; font-weight: 700; color: var(--text-3); letter-spacing: .04em; }
.fig__cap { margin-top: 14px; font-size: 13px; color: var(--text-2); letter-spacing: .06em; }
@media (max-width: 860px) {
  .figs__list { grid-template-columns: repeat(2, 1fr); padding-inline: 0; }
  .fig { border-left: 0; border-bottom: 1px solid var(--line); padding-inline: var(--gutter); }
  .fig:nth-child(odd) { border-right: 1px solid var(--line); }
  .fig:last-child { border-right: 0; }
  .fig:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 359px) {
  .fig__num { font-size: 1.75rem; }
  .fig__cap { font-size: 12px; }
}

/* =========================================================
   SECTION COMMON
   ========================================================= */
.sec { position: relative; padding-block: var(--sec-y); }
.sec__head { max-width: 860px; margin-bottom: clamp(56px, 8vw, 112px); }
.sec__head--row { max-width: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
.label { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 12px; }
.label > span { white-space: nowrap; }
.label__no { font-family: var(--f-mono); color: var(--spark); }
.label__no::after { content: ""; display: inline-block; width: 40px; height: 1px; margin-left: 14px; vertical-align: middle; background: var(--line-3); }
.label__en { font-family: var(--f-en); font-stretch: 125%; font-weight: 700; letter-spacing: .3em; color: var(--text-2); }
.label__ja { color: var(--text-3); letter-spacing: .1em; }
.sec__title {
  margin-top: 28px;
  font-weight: 900;
  font-size: clamp(1.85rem, 4.6vw, 3.9rem);
  line-height: 1.3;
  letter-spacing: .02em;
  font-feature-settings: "palt" 1;
}
.sec__lead { margin-top: 28px; max-width: 38em; color: var(--text-2); font-size: clamp(15px, 1.15vw, 16.5px); line-height: 2.05; }
.sec__note { max-width: 24em; font-size: 13px; color: var(--text-3); line-height: 1.9; padding-left: 16px; border-left: 1px solid var(--spark); }
@media (max-width: 760px) {
  .sec__head--row { flex-direction: column; align-items: flex-start; }
  .label__no::after { width: 20px; margin-left: 10px; }
  .label { gap: 10px; }
}
@media (max-width: 359px) { .label__ja { display: none; } }

/* reveal */
.js .rv { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out); }
.js .rv.is-in { opacity: 1; transform: none; }
.js .clip { clip-path: inset(0 0 100% 0); transition: clip-path 1.3s var(--ease); }
.js .clip img { transform: scale(1.14); transition: transform 2s var(--ease-out); }
.js .clip.is-in { clip-path: inset(0 0 0 0); }
.js .clip.is-in img { transform: none; }

/* =========================================================
   STRENGTH
   ========================================================= */
.strength { background: linear-gradient(180deg, var(--sumi), var(--graphite) 40%, var(--sumi)); }
.pt { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.pt + .pt { margin-top: clamp(96px, 12vw, 168px); }
.pt--rev .pt__txt { order: 2; }
.pt__no { display: flex; align-items: center; gap: 14px; font-size: 13px; font-weight: 700; letter-spacing: .12em; color: var(--text-2); }
.pt__no .mono { padding: 3px 8px; border: 1px solid var(--spark); color: var(--spark); font-size: 11px; font-weight: 500; }
.pt__title { margin-top: 22px; font-weight: 900; font-size: clamp(1.6rem, 3.2vw, 2.7rem); line-height: 1.35; font-feature-settings: "palt" 1; }
.pt__body { margin-top: 22px; color: var(--text-2); line-height: 2.05; }
.specs { margin-top: 32px; border-top: 1px solid var(--line-2); }
.specs div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.specs dt { color: var(--text-3); letter-spacing: .06em; }
.specs dd { text-align: right; color: var(--text); }
.specs dd .mono { font-size: 15px; }

/* 図版の台座：機械加工したプレート */
.plate {
  position: relative;
  padding: clamp(14px, 2vw, 28px);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px),
    linear-gradient(160deg, #1d2125 0%, #131619 60%, #101215 100%);
  clip-path: polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 0 1px var(--line);
}
.plate::before, .plate::after { content: ""; position: absolute; width: var(--chamfer); height: var(--chamfer); pointer-events: none; }
.plate::before { left: 0; top: 0; background: linear-gradient(135deg, transparent calc(50% - .5px), var(--line-2) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)); }
.plate::after { right: 0; bottom: 0; background: linear-gradient(135deg, transparent calc(50% - .5px), var(--line-2) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)); }
.plate svg { width: 100%; height: auto; overflow: visible; }
.plate figcaption { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; color: var(--text-3); letter-spacing: .04em; }

/* SVG 図版の共通 */
[data-scrub] { --p: 1; }
.js [data-scrub] { --p: 0; }
.t-dim { fill: var(--text-3); }
.t-hot { fill: var(--spark); }
svg text { font-size: 13px; fill: var(--text-2); }
svg .mono, svg text.mono, svg .mono text { font-family: var(--f-mono); }
.grid-fine path { stroke: rgba(255,255,255,.045); fill: none; }
.centerline { fill: none; stroke: var(--line-3); stroke-width: 1; stroke-dasharray: 16 4 3 4; }
.hatch { stroke: rgba(214,222,230,.2); stroke-width: 1; }

/* 図1：5軸 */
.fig5 .part { fill: url(#hatch); }
.fig5 .hatch { stroke: rgba(214,222,230,.32); }
.fig5 .part-edge { fill: none; stroke: var(--text); stroke-width: 1.6; }
.fig5 .toolpath { fill: none; stroke: var(--spark); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p)); filter: drop-shadow(0 0 4px rgba(255,154,60,.6)); }
.tool__holder { fill: #3a4047; stroke: var(--line-3); }
.tool__shank { fill: #8d959d; }
.tool__flute { fill: #c8ced4; }
.tool__flute-line { stroke: #6a727a; stroke-width: 1.2; fill: none; }
.tool__axis { stroke: var(--spark); stroke-width: 1; stroke-dasharray: 6 4; opacity: .8; }
.tool { transition: none; }
html:not(.js) .tool { display: none; }

/* 図2：公差 */
.figtol .band { fill: var(--spark-dim); }
.figtol .band-edge { fill: none; stroke: var(--spark); stroke-width: 1.2; stroke-dasharray: 5 4; }
.figtol .axis { stroke: var(--line-3); }
.figtol .ticks { stroke: var(--line-3); }
.figtol .tick-l text { font-size: 11px; }
.figtol .dots circle {
  fill: #dfe4e8;
  opacity: clamp(0, calc(var(--p) * 38 - var(--i)), 1);
  transform-box: fill-box; transform-origin: center;
  transform: scale(clamp(.2, calc(var(--p) * 38 - var(--i)), 1));
}
.figtol .stat text { font-size: 13px; }
.figtol .stat text.t-hot { fill: var(--spark); }

/* 図3：工程表 */
.figgantt .gcol { stroke: var(--line); fill: none; }
.figgantt .gday text { font-size: 11px; }
.figgantt .glabel text { font-size: 13px; fill: var(--text-2); }
.gbar {
  fill: #c3cad1;
  transform-box: fill-box; transform-origin: left center;
  transform: scaleX(clamp(0, calc((var(--p) * 5.4 - var(--s)) / (var(--e) - var(--s))), 1));
}
.gbar--night { fill: var(--spark); }
.gbar--static { transform: none; }
.figgantt .gmile { fill: var(--spark); opacity: clamp(0, calc((var(--p) - .9) * 12), 1); }
.figgantt .gdone { font-size: 11px; opacity: clamp(0, calc((var(--p) - .9) * 12), 1); }
.figgantt .glegend text { font-size: 11.5px; fill: var(--text-3); }

/* スマホでは図が縮むので、図中の文字だけ大きくして読める大きさを保つ */
@media (max-width: 600px) {
  .plate { padding: 12px 10px; }
  .plate svg text { font-size: 18px; }
  .figtol .tick-l text, .figgantt .gday text, .figgantt .gdone { font-size: 16px; }
  .figtol .stat text { font-size: 17px; }
  .figgantt .glabel text { font-size: 16px; }
  .figgantt .glegend text { font-size: 16px; }
}
@media (max-width: 900px) {
  .pt { grid-template-columns: 1fr; }
  .pt--rev .pt__txt { order: 0; }
}

/* =========================================================
   WORKS
   ========================================================= */
.works { background: var(--sumi); border-top: 1px solid var(--line); }
.case {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.case + .case { margin-top: clamp(96px, 11vw, 160px); }
.case--rev .case__fig { order: 2; }
.case__fig { position: sticky; top: calc(var(--hd-h) + 32px); }
.case__img { position: relative; overflow: hidden; background: var(--graphite-2); }
.case__img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.case__ov { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.case__ov * { vector-effect: non-scaling-stroke; }
.case__ov .draw { fill: none; stroke: var(--spark); stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 0; }
.case__ov .case__cl { stroke: var(--text); stroke-dasharray: .03 .008 .006 .008; opacity: .5; }
.js .case__ov .draw { stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease) .9s; }
.js .case__ov .case__cl { stroke-dasharray: 1; }
.js .is-in .case__ov .draw { stroke-dashoffset: 0; }
.case__tag rect { fill: rgba(10,11,13,.7); stroke: var(--spark); stroke-width: 1.5; }
.case__tag path, .case__tag circle { stroke: var(--spark); stroke-width: 1.5; fill: none; }
.case__tag .sym { stroke: var(--text); stroke-width: 1.2; }
.case__tag text { fill: var(--text); font-family: var(--f-mono); font-size: 22px; }
.case__tag { transform-box: view-box; }
.case__ovt { fill: var(--text); font-family: var(--f-mono); font-size: 40px; paint-order: stroke; stroke: rgba(10,11,13,.75); stroke-width: 6px; stroke-linejoin: round; }
.js .case__tag, .js .case__ovt { opacity: 0; transition: opacity .8s 1.8s; }
.js .is-in .case__tag, .js .is-in .case__ovt { opacity: 1; }
.case__cap { display: flex; justify-content: space-between; margin-top: 14px; font-size: 12px; color: var(--text-3); letter-spacing: .1em; }
.case__cap .mono { color: var(--text-2); }
.case__field { font-family: var(--f-en); font-stretch: 125%; font-weight: 700; font-size: 11px; letter-spacing: .34em; color: var(--spark); }
.case__title { margin-top: 14px; font-weight: 900; font-size: clamp(1.45rem, 2.4vw, 2.1rem); line-height: 1.4; font-feature-settings: "palt" 1; }
.case__title small { display: inline-block; margin-left: 12px; padding: 2px 8px; vertical-align: middle; font-size: 12px; font-weight: 500; color: var(--text-2); border: 1px solid var(--line-2); letter-spacing: .08em; }
.case__story { margin-top: 20px; color: var(--text-2); line-height: 2.05; }
.case__story b { color: var(--spark-2); font-weight: 500; }

/* 図面の表題欄 */
.tblock { margin-top: 30px; border: 1px solid var(--line-3); font-size: 13px; table-layout: fixed; }
.tblock th, .tblock td { border: 1px solid var(--line-2); padding: 9px 12px; text-align: left; vertical-align: top; line-height: 1.6; }
.tblock th { width: 22%; font-weight: 500; font-size: 11px; color: var(--text-3); letter-spacing: .1em; background: rgba(255,255,255,.025); white-space: nowrap; }
.tblock td { color: var(--text); overflow-wrap: anywhere; }
.tblock td.mono { font-size: 13px; }
@media (max-width: 1000px) {
  .case { grid-template-columns: 1fr; }
  .case--rev .case__fig { order: 0; }
  .case__fig { position: relative; top: 0; }
}
@media (max-width: 420px) {
  .tblock th, .tblock td { padding: 8px 8px; }
  .tblock { font-size: 12.5px; }
  .tblock th { font-size: 10.5px; letter-spacing: .04em; }
  .case__ovt { font-size: 40px; }
}

.more { margin-top: clamp(96px, 11vw, 150px); padding-top: 40px; border-top: 1px solid var(--line-2); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 32px; }
.more__title { font-size: 18px; font-weight: 900; letter-spacing: .08em; }
.more__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
.more__list li { display: grid; grid-template-columns: 8.5em minmax(0, 1fr) auto; align-items: baseline; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.more__list span { font-size: 12px; color: var(--text-3); letter-spacing: .06em; }
.more__list i { font-style: normal; font-size: 12px; color: var(--spark-2); white-space: nowrap; }
@media (max-width: 900px) {
  .more { grid-template-columns: 1fr; }
  .more__list { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .more__list li { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
  .more__list span { grid-column: 1 / -1; }
}

/* =========================================================
   EQUIPMENT
   ========================================================= */
.equip { padding-top: 0; background: var(--graphite); }
.equip__hero { position: relative; height: clamp(440px, 78vh, 760px); overflow: hidden; display: flex; align-items: flex-end; }
.equip__hero picture { position: absolute; inset: -8% 0; }
.equip__hero img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; transform: translateY(calc((var(--p, .5) - .5) * -10%)); will-change: transform; }
.equip__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--graphite) 0%, rgba(17,19,22,.35) 45%, rgba(17,19,22,.15) 100%); }
.equip__over { position: relative; z-index: 1; padding-bottom: clamp(32px, 5vw, 64px); }
.equip__sum { display: flex; flex-wrap: wrap; gap: 12px 56px; padding: 40px 0; margin-bottom: 40px; border-bottom: 1px solid var(--line-2); }
.equip__sum p { display: flex; align-items: baseline; gap: 10px; font-size: 14px; color: var(--text-2); letter-spacing: .06em; }
.equip__sum .metal { font-size: clamp(2.4rem, 4vw, 3.4rem); line-height: 1; font-weight: 500; }

.eqtable table { font-size: 14px; }
.eqtable th, .eqtable td { padding: 16px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.eqtable thead th { font-size: 11px; font-weight: 500; letter-spacing: .14em; color: var(--text-3); border-bottom: 1px solid var(--line-3); padding-block: 12px; }
.eqtable .num { text-align: right; font-family: var(--f-mono); width: 4em; }
.eqtable td.num { font-size: 18px; color: var(--spark-2); }
.eqtable .eq-g { font-size: 13px; font-weight: 700; color: var(--text); width: 17%; letter-spacing: .04em; line-height: 1.6; }
.eqtable td:nth-child(2), .eqtable tr[data-g] td:first-child { font-weight: 700; }
.eqtable td.mono { font-size: 12.5px; color: var(--text-2); }
.eqtable td:last-child { color: var(--text-2); font-size: 13px; }
.eqtable tbody tr { transition: background-color .25s; }
.eqtable tbody tr:hover { background: rgba(255,255,255,.025); }
.eqtable .eq-sep > * { border-top: 1px solid var(--line-3); }
.equip__soft { margin-top: 28px; font-size: 13px; color: var(--text-3); line-height: 2; }
.equip__soft .mono { display: inline-block; margin-right: 8px; padding: 0 6px; border: 1px solid var(--line-2); color: var(--text-2); font-size: 11px; }

@media (max-width: 860px) {
  .eqtable thead { display: none; }
  .eqtable table, .eqtable tbody, .eqtable tr, .eqtable th, .eqtable td { display: block; width: auto; }
  .eqtable tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--line); }
  .eqtable th, .eqtable td { border: 0; padding: 0; }
  .eqtable .eq-g, .eqtable tr[data-g]::before { grid-column: 1 / -1; font-size: 11px; font-weight: 500; color: var(--text-3); letter-spacing: .1em; margin-bottom: 6px; }
  .eqtable tr[data-g]::before { content: attr(data-g); }
  .eqtable .eq-g { width: auto; }
  .eqtable .eq-g br { display: none; }
  .eqtable td:nth-child(2), .eqtable tr[data-g] td:first-child { font-size: 15px; }
  .eqtable td.num { grid-row: span 1; font-size: 15px; width: auto; }
  .eqtable td.num::after { content: " 台"; font-family: var(--f-ja); font-size: 11px; color: var(--text-3); }
  .eqtable td.mono, .eqtable td:last-child { grid-column: 1 / -1; margin-top: 4px; }
  .eqtable .eq-sep { border-top: 1px solid var(--line-3); }
  .eqtable .eq-sep > * { border-top: 0; }
}

/* =========================================================
   QUALITY
   ========================================================= */
.quality { background: var(--sumi); }
.qa { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.flow { position: relative; padding-left: 64px; }
.flow__line { position: absolute; left: 0; top: 8px; bottom: 8px; width: 24px; }
.flow__line svg { width: 24px; height: 100%; }
.flow__base { stroke: var(--line-2); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.flow__fill { stroke: var(--spark); stroke-width: 2; fill: none; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p)); }
.step { position: relative; padding-bottom: 44px; }
.step:last-child { padding-bottom: 0; }
.step::before {
  content: ""; position: absolute; left: -57px; top: 6px; width: 11px; height: 11px;
  background: var(--sumi); border: 1px solid var(--line-3); transform: rotate(45deg);
  transition: background-color .4s, border-color .4s, box-shadow .4s;
}
.step.is-on::before, html:not(.js) .step::before { background: var(--spark); border-color: var(--spark); box-shadow: 0 0 14px rgba(255,154,60,.6); }
.step__no { font-size: 11px; color: var(--spark); letter-spacing: .1em; }
.step h3 { margin-top: 6px; font-size: clamp(1.1rem, 1.6vw, 1.3rem); font-weight: 900; letter-spacing: .04em; }
.step p:last-child { margin-top: 10px; color: var(--text-2); font-size: 15px; line-height: 2; }
.js .step { opacity: .35; transition: opacity .6s; }
.js .step.is-on { opacity: 1; }

.qa__side { position: sticky; top: calc(var(--hd-h) + 32px); display: grid; gap: 20px; }
.qa__photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.report {
  position: relative; margin-top: -72px; margin-left: 10%;
  padding: 18px 20px 14px;
  background: var(--paper); color: var(--paper-ink);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(0,0,0,.2);
  font-size: 12px;
}
.report__hd { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-bottom: 10px; border-bottom: 2px solid var(--paper-ink); }
.report__hd p:first-child { font-weight: 900; font-size: 15px; letter-spacing: .3em; }
.report__hd .mono { font-size: 10.5px; color: #555b61; }
.report table { margin-top: 6px; }
.report th { font-size: 10px; font-weight: 500; color: #6b7076; text-align: left; padding: 6px 4px; border-bottom: 1px solid #b9b5ad; }
.report td { padding: 6px 4px; border-bottom: 1px dotted #b9b5ad; font-size: 11.5px; }
.report td:nth-child(4) { font-weight: 700; }
.report .ok { color: #0d7a52; font-weight: 700; }
.report .ok::before { content: "●"; font-size: 7px; vertical-align: 2px; margin-right: 4px; }
.report__ft { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; font-size: 10px; color: #6b7076; flex-wrap: wrap; }
.certs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.certs li { padding: 14px 12px; background: var(--sumi); display: flex; flex-direction: column; gap: 4px; }
.certs b { font-size: 13px; font-weight: 500; color: var(--text); }
.certs span { font-size: 11px; color: var(--text-3); }
@media (max-width: 1000px) {
  .qa { grid-template-columns: 1fr; }
  .qa__side { position: relative; top: 0; }
}
@media (max-width: 520px) {
  .flow { padding-left: 40px; }
  .flow__line { left: -6px; }
  .step::before { left: -39px; }
  .report { margin-left: 4%; margin-right: 0; margin-top: -40px; padding: 14px 12px 12px; }
  .report th:nth-child(3), .report td:nth-child(3) { display: none; }
  .certs { grid-template-columns: 1fr; }
  .certs li { flex-direction: row; justify-content: space-between; align-items: baseline; }
}

/* =========================================================
   COMPANY
   ========================================================= */
.company { background: linear-gradient(180deg, var(--graphite) 0%, var(--sumi) 100%); border-top: 1px solid var(--line); }
.co { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 96px); }
.co__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 60% 50%; }
.quote { margin-top: 36px; padding-left: 24px; border-left: 2px solid var(--spark); }
.quote p { font-size: clamp(15px, 1.2vw, 17px); line-height: 2.1; color: var(--text); }
.quote footer { margin-top: 20px; display: flex; align-items: baseline; gap: 14px; font-size: 12px; color: var(--text-3); letter-spacing: .1em; }
.quote footer b { font-size: 18px; color: var(--text); font-weight: 700; letter-spacing: .2em; }
.cotable { border-top: 1px solid var(--line-3); }
.cotable th, .cotable td { padding: 20px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; line-height: 1.85; }
.cotable th { width: 8.5em; font-size: 13px; font-weight: 500; color: var(--text-3); letter-spacing: .12em; padding-right: 16px; }
.cotable td { font-size: 15px; }
.cotable .en { font-family: var(--f-en); font-stretch: 112%; font-size: 12px; color: var(--text-3); letter-spacing: .08em; }
@media (max-width: 900px) {
  .co { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .cotable th, .cotable td { display: block; width: auto; padding: 0; border: 0; }
  .cotable tr { display: block; padding: 16px 0; border-bottom: 1px solid var(--line); }
  .cotable td { margin-top: 4px; }
}

/* 沿革：物差しの上に年を刻む */
.hist { margin-top: clamp(80px, 10vw, 140px); }
.hist__title { display: flex; align-items: baseline; gap: 16px; font-size: 18px; font-weight: 900; letter-spacing: .1em; }
.hist__title .mono { font-size: 11px; font-weight: 500; color: var(--spark); letter-spacing: .2em; }
.hist__ruler {
  position: relative; margin-top: 64px; height: 260px;
  background:
    linear-gradient(var(--line-3), var(--line-3)) 0 50% / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--line-3) 0 1px, transparent 1px calc(100% / 11)) 0 calc(50% - 7px) / 100% 14px no-repeat,
    repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px calc(100% / 55)) 0 calc(50% - 3px) / 100% 6px no-repeat;
}
.hist__ruler li {
  position: absolute; left: calc(var(--y) / 55 * 100%); top: 50%;
  width: 0; height: 0;
}
.hist__ruler li::before { content: ""; position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; background: var(--spark); transform: rotate(45deg); }
.hist__ruler li::after { content: ""; position: absolute; left: 0; width: 1px; background: var(--line-3); }
.hist__ruler b, .hist__ruler span { position: absolute; left: 0; white-space: nowrap; padding-left: 10px; }
.hist__ruler b { font-size: 20px; font-weight: 500; color: var(--text); }
.hist__ruler span { font-size: 12.5px; color: var(--text-2); }
.hist__ruler li:nth-child(odd)::after { bottom: 8px; height: 66px; }
.hist__ruler li:nth-child(odd) b { bottom: 50px; }
.hist__ruler li:nth-child(odd) span { bottom: 26px; }
.hist__ruler li:nth-child(even)::after { top: 8px; height: 66px; }
.hist__ruler li:nth-child(even) b { top: 18px; }
.hist__ruler li:nth-child(even) span { top: 46px; }
/* 2016・2021・2024 は間隔が詰まるので、最後の1つだけ一段高く刻む */
.hist__ruler li:last-child::after { height: 118px; }
.hist__ruler li:last-child b { bottom: 102px; }
.hist__ruler li:last-child span { bottom: 78px; }
.hist__ruler li:last-child b, .hist__ruler li:last-child span { left: auto; right: 0; padding: 0 10px 0 0; text-align: right; }
.hist__ruler li:last-child::after { left: auto; right: 0; }
.hist__ruler li:nth-last-child(2) b, .hist__ruler li:nth-last-child(2) span { left: auto; right: 0; padding: 0 10px 0 0; text-align: right; }
@media (max-width: 1000px) {
  .hist__ruler { height: auto; background: linear-gradient(var(--line-3), var(--line-3)) 4px 0 / 1px 100% no-repeat; padding-left: 32px; }
  .hist__ruler li { position: relative; left: auto; top: auto; width: auto; height: auto; padding: 12px 0; display: flex; align-items: baseline; gap: 20px; }
  .hist__ruler li::before { left: -32px; top: 22px; }
  .hist__ruler li::after { display: none; }
  .hist__ruler b, .hist__ruler span, .hist__ruler li:last-child b, .hist__ruler li:last-child span, .hist__ruler li:nth-last-child(2) b, .hist__ruler li:nth-last-child(2) span { position: static; padding: 0; text-align: left; white-space: normal; }
  .hist__ruler b { font-size: 17px; flex: none; }
}

/* =========================================================
   RECRUIT
   ========================================================= */
.recruit { position: relative; isolation: isolate; padding-block: clamp(120px, 15vw, 220px); overflow: hidden; background: var(--sumi); }
.recruit__bg { position: absolute; inset: 0; z-index: -1; }
.recruit__bg picture, .phero__bg picture { height: 100%; }
.recruit__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 25% 50%; }
.recruit__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,11,13,.95) 0%, rgba(10,11,13,.82) 42%, rgba(10,11,13,.2) 80%), linear-gradient(0deg, rgba(10,11,13,.6), transparent 40%); }
.recruit__in { max-width: calc(var(--max) + var(--gutter) * 2); }
.recruit__title { margin-top: 28px; font-weight: 900; font-size: clamp(2rem, 5.2vw, 4.4rem); line-height: 1.25; font-feature-settings: "palt" 1; }
.recruit__lead { margin-top: 28px; max-width: 34em; color: var(--text-2); line-height: 2.05; }
.recruit__nums { margin: 44px 0 44px; display: grid; grid-template-columns: repeat(4, max-content); gap: 18px 44px; }
.recruit__nums li { display: flex; flex-direction: column; gap: 8px; padding-left: 14px; border-left: 1px solid var(--line-3); }
.recruit__nums b { font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 500; line-height: 1; }
.recruit__nums span { font-size: 12px; color: var(--text-3); letter-spacing: .06em; }
/* 写真の手元が見出しに重ならないよう、広い画面では写真を右に寄せる */
@media (min-width: 1000px) {
  .recruit__bg { left: 40%; }
  .recruit__bg img { object-position: 52% 50%; }
  .recruit__bg::after { background: linear-gradient(90deg, var(--sumi) 0%, rgba(10,11,13,.6) 22%, rgba(10,11,13,0) 55%), linear-gradient(0deg, rgba(10,11,13,.6), transparent 40%); }
}
@media (max-width: 760px) {
  .recruit__bg::after { background: linear-gradient(0deg, rgba(10,11,13,.97) 0%, rgba(10,11,13,.86) 55%, rgba(10,11,13,.55) 100%); }
  .recruit__bg img { object-position: 60% 50%; }
  .recruit__nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =========================================================
   CONTACT
   ========================================================= */
.contact { background: var(--graphite); border-top: 1px solid var(--line); }
.contact__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.contact__head { position: sticky; top: calc(var(--hd-h) + 32px); }
.contact__tel { margin-top: 40px; border-top: 1px solid var(--line-2); }
.contact__tel div { display: flex; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.contact__tel dt { width: 5.5em; flex: none; color: var(--text-3); font-size: 12px; letter-spacing: .12em; padding-top: 2px; }
.contact__tel div:first-child dd { font-size: 24px; letter-spacing: .02em; line-height: 1.3; }
@media (max-width: 1000px) {
  .contact__grid { grid-template-columns: 1fr; }
  .contact__head { position: relative; top: 0; }
}

.form { position: relative; padding: clamp(22px, 4vw, 48px); background: var(--sumi); border: 1px solid var(--line); }
.form::before { content: ""; position: absolute; left: -1px; top: -1px; width: 48px; height: 2px; background: var(--spark); }
.form__demo { margin-bottom: 28px; padding: 10px 14px; font-size: 12.5px; color: var(--spark-2); background: var(--spark-dim); border-left: 2px solid var(--spark); line-height: 1.7; }
.form__row { display: grid; gap: 0 24px; }
.form__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field { position: relative; display: flex; flex-direction: column; margin-bottom: 28px; min-width: 0; border: 0; padding: 0; }
.field label, .field legend, .field__label { margin-bottom: 8px; padding: 0; font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--text-2); }
.field em { margin-left: 8px; font-style: normal; font-size: 10px; font-weight: 500; color: var(--spark); letter-spacing: .1em; }
.field input:not([type="checkbox"]):not([type="file"]), .field textarea, .field select {
  width: 100%; min-height: 50px; padding: 12px 14px;
  background: var(--graphite-2); border: 0; border-bottom: 1px solid var(--line-3); border-radius: 0;
  font-size: 16px; color: var(--text);
  transition: border-color .3s, background-color .3s;
  -webkit-appearance: none; appearance: none;
}
.field textarea { resize: vertical; line-height: 1.8; }
.field ::placeholder { color: #565c63; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-bottom-color: var(--spark); background: var(--graphite-3); }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { box-shadow: 0 2px 0 var(--spark); }
.field input.is-bad:not([type="checkbox"]):not([type="file"]) { border-bottom-color: #ff5a4f; }
.unit { position: relative; }
.unit span { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--text-3); pointer-events: none; }
.select { position: relative; }
.select::after { content: ""; position: absolute; right: 16px; top: 50%; width: 7px; height: 7px; border-right: 1.5px solid var(--text-2); border-bottom: 1.5px solid var(--text-2); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.select select { padding-right: 40px; cursor: pointer; }
.select option { background: var(--graphite); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { margin: 0; position: relative; cursor: pointer; }
.chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chips span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; font-size: 13px; font-weight: 500; color: var(--text-2); border: 1px solid var(--line-2); transition: all .25s; letter-spacing: .04em; }
.chips span::before { content: ""; width: 6px; height: 6px; margin-right: 10px; border: 1px solid var(--text-3); transform: rotate(45deg); transition: all .25s; }
.chips label:hover span { border-color: var(--line-3); color: var(--text); }
.chips input:checked + span { color: var(--text); border-color: var(--spark); background: var(--spark-dim); }
.chips input:checked + span::before { background: var(--spark); border-color: var(--spark); }
.chips input:focus-visible + span { outline: 2px solid var(--spark); outline-offset: 2px; }

.drop {
  display: grid; justify-items: center; gap: 6px; padding: 30px 16px;
  text-align: center; cursor: pointer;
  border: 1px dashed var(--line-3); background: repeating-linear-gradient(-45deg, rgba(255,255,255,.012) 0 8px, transparent 8px 16px);
  transition: border-color .3s, background-color .3s;
}
.drop svg { width: 40px; height: 40px; fill: none; stroke: var(--text-2); stroke-width: 1.4; stroke-linejoin: round; margin-bottom: 4px; }
.drop:hover, .drop.is-over { border-color: var(--spark); background-color: var(--spark-dim); }
.field .drop { margin: 0; }
.drop__main { font-size: 14px; font-weight: 500; color: var(--text); letter-spacing: .04em; }
.drop__main u { text-decoration-color: var(--spark); text-underline-offset: 4px; }
.drop__sub { font-size: 11px; color: var(--text-3); font-weight: 400; letter-spacing: 0; }
.drop__file:empty { display: none; }
.drop__file { font-size: 12px; color: var(--spark-2); font-weight: 400; }
.field:focus-within .drop { border-color: var(--spark); }

.agree { display: flex; align-items: center; gap: 12px; margin: 4px 0 28px; font-size: 14px; color: var(--text-2); cursor: pointer; }
.agree input { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin: 0; flex: none; border: 1px solid var(--line-3); background: var(--graphite-2); cursor: pointer; display: grid; place-items: center; }
.agree input::after { content: ""; width: 10px; height: 6px; border-left: 2px solid var(--sumi); border-bottom: 2px solid var(--sumi); transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.agree input:checked { background: var(--spark); border-color: var(--spark); }
.agree input:checked::after { opacity: 1; }
.agree input.is-bad { border-color: #ff5a4f; }
.form__msg { margin-top: 16px; font-size: 13.5px; line-height: 1.8; color: var(--text-2); min-height: 1.8em; }
.form__msg.is-ok { color: var(--spark-2); }
.form__msg.is-ng { color: #ff8a80; }
@media (max-width: 560px) {
  .form__row--2 { grid-template-columns: 1fr; }
}

/* =========================================================
   FOOTER
   ========================================================= */
.ft { background: var(--sumi); border-top: 1px solid var(--line); }
.ft__in { display: grid; grid-template-columns: auto 1fr; gap: 28px 48px; padding-block: 64px 48px; }
.ft__addr { margin-top: 18px; font-size: 13px; color: var(--text-3); line-height: 1.9; }
.ft__nav { display: flex; flex-wrap: wrap; justify-content: flex-end; align-content: flex-start; gap: 10px 28px; font-size: 13px; color: var(--text-2); }
.ft__nav a:hover { color: var(--spark); }
.ft__copy { grid-column: 1 / -1; font-size: 11px; color: var(--text-3); padding-top: 24px; border-top: 1px solid var(--line); }
.ft__note { border-top: 1px solid var(--line); background: #070809; }
.ft__note p { padding-block: 16px; font-size: 11.5px; color: var(--text-3); line-height: 1.8; }
.ft__note a { color: var(--text-2); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; }
.ft__note a:hover { color: var(--spark); }
@media (max-width: 760px) {
  .ft__in { grid-template-columns: 1fr; }
  .ft__nav { justify-content: flex-start; gap: 10px 20px; }
}

/* =========================================================
   SUB PAGE（採用）
   ========================================================= */
.phero { position: relative; isolation: isolate; min-height: max(76svh, 560px); display: flex; align-items: flex-end; overflow: hidden; }
.phero__bg { position: absolute; inset: 0; z-index: -1; }
.phero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; }
.js .phero__bg img { animation: heroIn 2.4s var(--ease-out) both; }
.phero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,11,13,.95) 0%, rgba(10,11,13,.75) 40%, rgba(10,11,13,.1) 78%), linear-gradient(0deg, var(--sumi) 0%, rgba(10,11,13,0) 40%); }
.phero__in { padding-top: calc(var(--hd-h) + 48px); padding-bottom: clamp(48px, 7vw, 96px); }
@media (max-width: 760px) { .phero__bg::after { background: linear-gradient(0deg, var(--sumi) 0%, rgba(10,11,13,.86) 55%, rgba(10,11,13,.35) 100%); } }
.crumb ol { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 40px; font-size: 12px; color: var(--text-3); }
.crumb li + li::before { content: "/"; margin-right: 10px; color: var(--line-3); }
.crumb a { color: var(--text-2); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; }
.crumb a:hover { color: var(--spark); }
.phero__title { margin-top: 26px; font-weight: 900; font-size: clamp(2.1rem, 8.6vw, 5.4rem); line-height: 1.18; font-feature-settings: "palt" 1; }
.phero__title .ln { display: block; }
.phero__title .ln > span { display: inline-block; }
.phero__title .ln:nth-child(2) > span { background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent; }
.phero__lead { margin-top: 26px; max-width: 34em; color: var(--text-2); line-height: 2.05; }
.gnav__list a[aria-current="page"] { color: var(--text); }
.gnav__list a[aria-current="page"]::after { transform: scaleX(1); }

.jobs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.job { padding: clamp(24px, 2.6vw, 36px); display: flex; flex-direction: column; }
.job__ico { width: 120px; height: 64px; margin-bottom: 28px; overflow: visible; }
.job__path { fill: none; stroke: var(--text); stroke-width: 1.4; stroke-linejoin: round; }
.job__dash { fill: none; stroke: var(--spark); stroke-width: 1; stroke-dasharray: 10 3 2 3; }
.job__pt { fill: var(--spark); }
.job__no { font-size: 11px; color: var(--spark); letter-spacing: .14em; }
.job h3 { margin-top: 8px; font-size: 1.35rem; font-weight: 900; letter-spacing: .04em; }
.job p:not([class]) { margin-top: 14px; color: var(--text-2); font-size: 15px; line-height: 2; flex: 1; }
.job__tag { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.job__tag span { padding: 3px 10px; font-size: 12px; border: 1px solid var(--line-2); color: var(--text-2); }
.job__tag span:first-child { border-color: var(--spark); color: var(--spark-2); }
@media (max-width: 900px) { .jobs { grid-template-columns: 1fr; } }

.day { background: var(--graphite); border-block: 1px solid var(--line); }
.day__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.day__head { position: sticky; top: calc(var(--hd-h) + 32px); }
.nc { background: #07080a; border: 1px solid var(--line-2); font-size: 14.5px; }
.nc__bar { display: flex; gap: 18px; padding: 12px 18px; border-bottom: 1px solid var(--line-2); font-size: 11.5px; color: var(--text-3); background: var(--graphite-2); }
.nc__run { margin-left: auto; color: var(--spark); }
.nc__ln { display: grid; grid-template-columns: 4.2em 4.2em minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 15px 18px; border-bottom: 1px solid var(--line); transition: background-color .25s; }
.nc__ln:last-child { border-bottom: 0; }
.nc__ln:hover { background: rgba(255,154,60,.06); }
.nc__n { font-size: 12px; color: var(--text-3); }
.nc__t { color: var(--spark-2); font-size: 14px; }
.nc__d { line-height: 1.85; }
.nc__ln--rest .nc__d { color: var(--text-3); }
.nc__ln--end .nc__n { color: var(--spark); }
@media (max-width: 1000px) {
  .day__grid { grid-template-columns: 1fr; }
  .day__head { position: relative; top: 0; }
}
@media (max-width: 520px) {
  .nc { font-size: 13.5px; }
  .nc__ln { grid-template-columns: 3.4em minmax(0, 1fr); gap: 4px 12px; padding: 13px 14px; }
  .nc__d { grid-column: 2; }
  .nc__bar span:nth-child(2) { display: none; }
}

.road { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-3); }
.road li { position: relative; padding: 32px clamp(12px, 2vw, 28px) 0 0; }
.road li::before { content: ""; position: absolute; left: 0; top: -5px; width: 9px; height: 9px; background: var(--spark); transform: rotate(45deg); }
.road__t { font-size: 11px; color: var(--spark); letter-spacing: .14em; }
.road h3 { margin-top: 10px; font-size: 1.15rem; font-weight: 900; }
.road p:last-child { margin-top: 10px; font-size: 14.5px; color: var(--text-2); line-height: 1.95; }
@media (max-width: 900px) {
  .road { grid-template-columns: 1fr; border-top: 0; border-left: 1px solid var(--line-3); padding-left: 28px; }
  .road li { padding: 0 0 32px; }
  .road li::before { left: -33px; top: 6px; }
}
.voices { margin-top: clamp(72px, 9vw, 120px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); }
.voice { padding-top: 28px; border-top: 1px solid var(--line-2); }
.voice blockquote { margin: 0; }
.voice blockquote p { font-size: clamp(15px, 1.25vw, 17px); line-height: 2.1; }
.voice blockquote p::before { content: "“"; display: block; height: .6em; font-family: var(--f-en); font-size: 3rem; line-height: 1; color: var(--spark); }
.voice figcaption { margin-top: 18px; display: flex; gap: 14px; align-items: baseline; font-size: 12px; color: var(--text-3); letter-spacing: .08em; }
.voice figcaption .mono { font-size: 14px; color: var(--text); }
@media (max-width: 760px) { .voices { grid-template-columns: 1fr; } }
.req { background: var(--graphite); border-top: 1px solid var(--line); }
.cta-band { border-top: 1px solid var(--line); background: radial-gradient(80% 120% at 85% 100%, rgba(255,154,60,.1), transparent 60%), var(--sumi); }
.cta-band__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: end; }
.cta-band .sec__title { margin-top: 0; }
.cta-band .sec__lead { margin-top: 0; }
@media (max-width: 900px) { .cta-band__in { grid-template-columns: 1fr; } }

/* =========================================================
   REDUCED MOTION — 動きは止め、最終状態を見せる
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  /* 動きの指定は各所に散っているため、ここだけは一括で打ち消す（!important はそのため） */
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .js .rv, .js .clip, .js .clip img { opacity: 1; transform: none; clip-path: none; }
  .js [data-scrub] { --p: 1; }
  .equip__hero img { transform: none; }
  .js .step { opacity: 1; }
}