/* ============================================================
   千度製鋼所 コーポレートサイト 実装版スタイル（和モダン×技術 v2）
   構成：①デザイントークン ②土台 ③部品 ④各セクション ⑤動き
   ブレークポイント：〜767px スマホ / 768〜1023px タブレット / 1024px〜 PC
   ============================================================ */

/* ============ ① デザイントークン（色・字・余白の決めごと） ============ */
:root {
  --steel-red:        #C8102E;
  --steel-red-hover:  #A50D26;
  --steel-red-soft:   #FBE7EA;
  --gold:             #B08D57;
  --link-blue:        #1E4FB8;
  --navy:             #0F172A;
  --navy-2:           #1E293B;
  --navy-deep:        #020617;
  --text-primary:     #0F172A;
  --text-secondary:   #475569;
  --text-tertiary:    #64748B;
  --text-muted:       #94A3B8;
  --text-invert:      #FFFFFF;
  --text-invert-sub:  #CBD5E1;
  --border:           #E2E8F0;
  --border-strong:    #CBD5E1;
  --border-invert:    #FFFFFF1F;
  --bg:               #FFFFFF;
  --bg-soft:          #F8FAFC;
  --bg-faint:         #F1F5F9;

  --font-sans:  "Noto Sans JP", sans-serif;
  --font-serif: "Noto Serif JP", serif;
  --font-en:    "Inter", sans-serif;
  --font-mono:  "JetBrains Mono", monospace;

  --section-pad: clamp(56px, 9vw, 80px);
  --inner-max: 1200px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============ ② 土台 ============ */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text-primary);
  background: var(--bg);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
svg.icon { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

.inner {
  width: 100%;
  max-width: var(--inner-max);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
}

/* 英字の小見出し（赤ライン付き） */
.eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.28em; font-weight: 500;
  color: var(--text-muted);
}
@media (max-width: 479px) {
  .eyebrow { font-size: 10px; letter-spacing: 0.16em; }
}
.eyebrow .line {
  width: 40px; height: 1px; background: var(--steel-red);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.8s var(--ease) 0.2s;
}
.eyebrow.is-visible .line { transform: scaleX(1); }
.eyebrow--red { color: var(--steel-red); }

/* セクション見出し（明朝） */
.headline {
  font-family: var(--font-serif);
  font-size: clamp(30px, 4.5vw, 48px);
  font-weight: 700; line-height: 1.5; letter-spacing: 0.06em;
}

/* 見出し行：左に見出し・右に説明文 */
.sec-head { display: grid; gap: 20px; }
.sec-head .l { display: grid; gap: 16px; }
.sec-head .desc { font-size: clamp(14px, 1.2vw, 16px); line-height: 1.9; color: var(--text-secondary); }
@media (min-width: 1024px) {
  .sec-head { grid-template-columns: 1fr 440px; align-items: end; gap: 48px; }
}

/* 背景の透かし文字（明朝） */
.watermark {
  position: absolute; z-index: 0;
  font-family: var(--font-serif); font-weight: 700;
  font-size: clamp(96px, 13vw, 160px); line-height: 1; letter-spacing: 0.05em;
  user-select: none; pointer-events: none; white-space: nowrap;
}

/* ============ ③ 部品 ============ */

/* --- ネジ留ボタン（ブランド共通コンポーネント） --- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  /* 幅は「内容＋左右40pxの余白」で決まる。240px未満にはしない */
  width: auto; min-width: min(240px, 100%); max-width: 100%;
  height: 56px; padding: 0 40px;
  border: 0; border-radius: 6px;
  font-family: var(--font-sans);
  font-size: 15px; font-weight: 600; letter-spacing: 0.06em;
  cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s ease, filter 0.25s ease, background-color 0.25s ease;
}
.btn .icon { font-size: 18px; }
.btn--primary { background: var(--steel-red); color: #fff; }
.btn--primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(200, 16, 46, 0.38);
  filter: brightness(1.08);
}
.btn--outline {
  background: #fff; color: var(--steel-red);
  border: 1.5px solid var(--steel-red);
}
.btn--outline:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(200, 16, 46, 0.18);
  background: #fff5f6;
}
.btn--ghost { /* 濃い背景用の白枠 */
  background: transparent; color: #fff;
  border: 1.5px solid #ffffff66;
}
.btn--ghost:hover { border-color: #fff; background: #ffffff14; }

/* ネジ（四隅）。色はボタンの文字色に追従 */
.screw {
  position: absolute; width: 9px; height: 9px;
  border: 1.25px solid; border-radius: 50%; opacity: 0.85;
}
.screw::before, .screw::after {
  content: ""; position: absolute; background: currentColor;
  left: 50%; top: 50%;
}
.screw::before { width: 5px; height: 1.2px; transform: translate(-50%, -50%); }
.screw::after  { width: 1.2px; height: 5px; transform: translate(-50%, -50%); }
.screw--tl { left: 11px;  top: 10px; }
.screw--tr { right: 11px; top: 10px; }
.screw--bl { left: 11px;  bottom: 10px; }
.screw--br { right: 11px; bottom: 10px; }

/* --- 分類タグ（BUSINESS 01 / お知らせ 等） --- */
.tag {
  display: inline-block;
  padding: 4px 8px; border-radius: 4px;
  background: var(--steel-red-soft); color: var(--steel-red);
  font-size: 11px; font-weight: 600; line-height: 1.4;
}
.tag--mono { font-family: var(--font-mono); font-weight: 700; letter-spacing: 0.09em; }

/* --- 矢印付きテキストリンク --- */
.link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--link-blue);
}
.link .icon { transition: transform 0.3s var(--ease); }
.link:hover .icon { transform: translateX(5px); }
.link:hover span { text-decoration: underline; text-underline-offset: 4px; }

/* --- 丸ピルボタン（一覧を見る） --- */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px; border-radius: 999px;
  background: #fff; border: 1px solid var(--border-strong);
  font-size: 14px; font-weight: 600; color: var(--text-primary);
  transition: transform 0.25s var(--ease), box-shadow 0.25s ease, border-color 0.25s ease;
}
.pill .icon { color: var(--link-blue); }
.pill:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15,23,42,0.1); border-color: var(--steel-red); }

/* --- スクロール連動フェードイン --- */
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: var(--d, 0s);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ============ ④ 各セクション ============ */

/* --- ヘッダー --- */
.header {
  position: sticky; top: 0; z-index: 50;
  background: #ffffffee; backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.header .inner {
  max-width: none;
  display: flex; align-items: center; gap: clamp(16px, 2.5vw, 32px);
  height: 72px;
}
.logo { display: flex; align-items: center; gap: 12px; }
.logo .mark {
  width: 40px; height: 40px; display: grid; place-items: center;
  background: var(--navy); color: #fff; border-radius: 4px;
  font-family: var(--font-en); font-size: 20px; font-weight: 700;
}
.logo .t { line-height: 1.3; }
.logo .ja { display: block; font-size: 16px; font-weight: 700; letter-spacing: 0.06em; }
.logo .en { display: block; font-family: var(--font-en); font-size: 9px; font-weight: 500; letter-spacing: 0.17em; color: var(--text-muted); }

.gnav { display: none; margin-left: auto; }
.gnav ul { display: flex; gap: 24px; }
.gnav a {
  position: relative;
  font-size: 12px; font-weight: 500; color: var(--text-secondary);
  padding: 6px 0; white-space: nowrap;
}
.gnav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px; background: var(--steel-red);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.3s var(--ease);
}
.gnav a:hover::after, .gnav a.current::after { transform: scaleX(1); }

.lang {
  display: none; align-items: center; gap: 4px;
  padding: 8px 12px;
  font-family: var(--font-en); font-size: 12px; font-weight: 500;
  color: var(--text-secondary); cursor: pointer;
}
.lang .icon { font-size: 14px; }
@media (min-width: 768px) { .lang { display: inline-flex; } }

.header .btn--contact {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-radius: 8px;
  background: var(--navy); color: #fff;
  font-size: 12px; font-weight: 600;
  transition: transform 0.25s var(--ease), box-shadow 0.25s ease, filter 0.25s ease;
}
.header .btn--contact .icon { font-size: 16px; }
.header .btn--contact:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15,23,42,0.3); filter: brightness(1.25); }
@media (max-width: 479px) { .header .btn--contact span { display: none; } }

/* ハンバーガー（スマホ） */
.menu-toggle {
  width: 44px; height: 44px; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center;
}
.menu-toggle span {
  display: block; width: 22px; height: 2px; background: var(--navy);
  margin: 2.5px 0; transition: 0.3s;
}
.mnav {
  display: none; border-top: 1px solid var(--border); background: #fff;
  max-height: calc(100vh - 72px); overflow-y: auto;
}
.mnav.open { display: block; }
.mnav a {
  display: block; padding: 14px 24px; font-size: 14px;
  border-bottom: 1px solid var(--border);
}
@media (min-width: 1024px) {
  .gnav { display: block; }
  .header .btn--contact { margin-left: 0; }
  .menu-toggle, .mnav { display: none !important; }
}

/* --- ヒーロー --- */
.hero {
  position: relative; overflow: hidden;
  background: var(--navy); color: #fff;
}
.hero-glow {
  position: absolute; z-index: 0; pointer-events: none;
  width: 900px; height: 700px; left: -200px; bottom: -260px;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, #C8102E33 0%, #C8102E00 100%);
  border-radius: 50%;
}
.seigaiha {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  opacity: 0.07; pointer-events: none;
}
.hero > .inner { position: relative; z-index: 2; padding-top: clamp(48px, 8vw, 110px); padding-bottom: clamp(40px, 6vw, 88px); }
.hero-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1024px) {
  /* 左を fr で伸ばすと h1 の white-space:nowrap が最小幅を押し上げ、
     写真カラムが 271px まで痩せていた（3枚に割ると1枚69px）。
     写真側を実寸で確保し、余りを文字に回す。 */
  .hero-grid { grid-template-columns: minmax(0, 1fr) clamp(330px, 30vw, 430px); gap: clamp(36px, 4vw, 64px); }
}

.hero .eyebrow { color: var(--steel-red); }
.hero h1 {
  margin-top: 28px;
  font-family: var(--font-serif);
  font-size: clamp(30px, 5.4vw, 66px);
  font-weight: 700; line-height: 1.28; letter-spacing: 0.07em;
}
.hero h1 span { display: block; white-space: nowrap; }
.hero .lead {
  margin-top: 24px; max-width: 640px;
  font-size: clamp(14px, 1.3vw, 18px); line-height: 2; color: var(--text-invert-sub);
}
.hero .ctas { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 36px; }

/* 縦書き「鋼を極む」＋落款（PC広幅のみ） */
.hero-visual { position: relative; }
.wa-vertical {
  display: none;
  position: absolute; left: -96px; top: -12px; z-index: 3;
  text-align: center; width: 48px;
}
.wa-vertical .gold-line { width: 1px; height: 44px; background: var(--gold); margin: 0 auto 24px; }
.wa-vertical .char {
  display: block;
  font-family: var(--font-serif); font-size: 32px; font-weight: 700;
  line-height: 1.4; letter-spacing: 0.06em; color: #FFFFFFE6;
}
.wa-vertical .char--red { color: var(--steel-red); }
.wa-vertical .seal {
  width: 60px; height: 60px; margin: 20px auto 0;
  display: grid; place-items: center;
  background: var(--steel-red); border: 1px solid #FFFFFF66;
  /* 落款も面取り八角に。ヒーローの写真パネル・鋼種カード・事業カードの矢印と
     同じ形にして、サイトから四角い要素を減らす。角丸4pxでは「和」の落款が
     ただの赤い四角に見えていた。 */
  border-radius: 0;
  clip-path: polygon(11px 0, calc(100% - 11px) 0, 100% 11px, 100% calc(100% - 11px),
                     calc(100% - 11px) 100%, 11px 100%, 0 calc(100% - 11px), 0 11px);
  transform: rotate(4deg);
  font-family: var(--font-serif); font-size: 34px; font-weight: 700; color: #fff;
}
@media (min-width: 1280px) { .wa-vertical { display: block; } }

/* スライドカウンター・ドット */
.slide-counter {
  display: flex; align-items: flex-end; gap: 8px;
  font-family: var(--font-mono); margin-bottom: 16px;
}
.slide-counter .cur { font-size: 20px; font-weight: 700; line-height: 1; color: #fff; }
.slide-counter .tot { font-size: 12px; font-weight: 500; line-height: 1.2; color: var(--text-muted); }
.slide-dots { display: flex; gap: 8px; margin-top: 20px; }
.slide-dots button {
  width: 8px; height: 4px; padding: 0; border: 0; border-radius: 999px;
  background: #FFFFFF44; cursor: pointer;
  transition: width 0.35s var(--ease), background 0.35s ease;
}
.slide-dots button.active { width: 24px; background: var(--steel-red); }

/* 写真ギャラリー（互い違いの3枚）：flexの伸縮で画面幅に追従 */
.gallery { display: flex; gap: 12px; height: clamp(300px, 42vw, 600px); }
.gallery .panel {
  flex: 1; min-width: 0;
  padding: 0; cursor: pointer;
  border: 1px solid var(--border-invert); border-radius: 6px;
  background:
    linear-gradient(165deg, #33415588, #1e293b88 45%, #0f172a88);
  background-size: cover; background-position: center;
  filter: brightness(0.55) saturate(0.8);
  transition: flex-grow 0.7s var(--ease), filter 0.7s ease, border-color 0.7s ease;
}
.gallery .panel:nth-child(1) { margin-top: 6%; margin-bottom: 3%; }
.gallery .panel:nth-child(3) { margin-top: 8%; margin-bottom: 1%; }
.gallery .panel.active {
  flex-grow: 1.6;
  filter: brightness(1) saturate(1);
  border-color: #c8102e88;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

/* 3Dヒーロー（index-3d.html）：ヒーロー全面の背景キャンバス */
.hero3d { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero3d canvas { width: 100% !important; height: 100% !important; display: block; }
.hero-visual--3d { align-self: stretch; }
@media (min-width: 1024px) { .hero-visual--3d { min-height: 460px; } }

/* 実績ストリップ（ヒーロー下端） */
.tech-strip {
  position: relative; z-index: 2;
  background: #0F172ACC; border-top: 1px solid var(--border-invert);
}
.strip-grid { display: grid; grid-template-columns: repeat(2, 1fr); max-width: none; padding: 0; }
.strip-grid .cell {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: clamp(14px, 1.6vw, 20px) clamp(16px, 2.4vw, 32px);
  border-right: 1px solid var(--border-invert);
  border-bottom: 1px solid var(--border-invert);
}
.strip-grid .cell:nth-child(even) { border-right: 0; }
.strip-grid .k {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.18em; color: var(--steel-red);
}
.strip-grid .num { font-family: var(--font-en); font-size: clamp(20px, 1.8vw, 24px); font-weight: 700; line-height: 1.2; color: var(--text-invert); font-variant-numeric: tabular-nums; }
.strip-grid .l { font-size: 11px; color: var(--text-muted); }
@media (min-width: 768px) {
  .strip-grid { grid-template-columns: repeat(4, 1fr); }
  .strip-grid .cell { border-bottom: 0; }
  .strip-grid .cell:nth-child(even) { border-right: 1px solid var(--border-invert); }
  .strip-grid .cell:last-child { border-right: 0; }
}

/* --- WHO WE ARE --- */
.intro {
  position: relative; overflow: hidden;
  padding: var(--section-pad) 0;
  background: var(--bg);
}
.intro .grain { position: absolute; inset: 0; opacity: 0.85; pointer-events: none; }
.intro .watermark { left: 24%; top: 46%; color: var(--bg-faint); }
.intro .inner { position: relative; z-index: 1; }
.intro-grid { display: grid; gap: 40px; margin-top: 28px; }
.intro .headline { line-height: 1.5; }
.intro .body p { font-size: clamp(14px, 1.2vw, 16px); line-height: 2; color: var(--text-secondary); }
.intro .body p + p { margin-top: 1.25em; }
.intro .link { margin-top: 28px; }
@media (min-width: 1024px) {
  .intro-grid { grid-template-columns: 1fr 1fr; gap: clamp(64px, 9vw, 120px); }
}

/* --- 三つの事業 --- */
.business { padding: var(--section-pad) 0; background: var(--bg-soft); }
.cards { display: grid; gap: 24px; margin-top: 48px; }
.card {
  position: relative;
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden;
  transition: transform 0.35s var(--ease), box-shadow 0.35s ease, border-color 0.35s ease;
}
.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 44px rgba(15, 23, 42, 0.14);
  border-color: #c8102e66;
}
.card .photo {
  height: 200px; overflow: hidden;
  background: linear-gradient(160deg, #334155, #1e293b 55%, #0f172a);
}
.card .photo > div {
  width: 100%; height: 100%;
  background-size: cover; background-position: center;
  transition: transform 0.6s var(--ease);
}
.card:hover .photo > div { transform: scale(1.05); }
.card .txt { padding: 24px; display: grid; gap: 16px; justify-items: start; }
.card h3 { font-size: clamp(20px, 1.8vw, 24px); font-weight: 700; }
.card p { font-size: 12px; line-height: 1.9; color: var(--text-secondary); }
.card .more { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; }
.card .more .icon { font-size: 14px; transition: transform 0.3s var(--ease); }
.card:hover .more .icon { transform: translate(3px, -3px); }
/* カード全体をクリック可能に（「詳しく見る」リンクをカード全面へ伸ばす） */
.card .more::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.card { cursor: pointer; }
/* 面取り八角形の矢印（右上） */
.chamfer {
  position: absolute; right: 16px; top: 16px; z-index: 2;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  color: var(--steel-red);
}
.chamfer .shape { position: absolute; inset: 0; width: 100%; height: 100%; }
.chamfer .icon { position: relative; font-size: 18px; transition: transform 0.3s var(--ease); }
.card:hover .chamfer .icon { transform: translateX(3px); }
@media (min-width: 768px) { .cards { grid-template-columns: repeat(3, 1fr); } }

/* --- TECHNICAL DATA --- */
.tech {
  position: relative; overflow: hidden;
  padding: var(--section-pad) 0;
  background: var(--navy); color: #fff;
}
.tech .deco {
  position: absolute; right: -80px; top: -80px; z-index: 0;
  width: 520px; height: 520px; opacity: 0.35; pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, #C8102E66 0%, #C8102E00 100%);
}
.tech .inner { position: relative; z-index: 1; }
.tech .watermark { right: 0; top: -24px; color: #FFFFFF0A; }
.tech .eyebrow { color: var(--steel-red); }
.tech-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  margin-top: 48px;
  border-top: 1px solid var(--border-invert);
  border-bottom: 1px solid var(--border-invert);
}
.tech-grid .cell {
  display: grid; gap: 12px; align-content: start;
  padding: clamp(24px, 3.4vw, 40px) clamp(16px, 2.6vw, 32px);
  border-right: 1px solid var(--border-invert);
}
.tech-grid .cell:nth-child(even) { border-right: 0; }
.tech-grid .cell:nth-child(-n+2) { border-bottom: 1px solid var(--border-invert); }
.tech .k {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.18em; color: var(--steel-red);
}
.tech .num {
  font-family: var(--font-en);
  font-size: clamp(40px, 4.6vw, 56px); font-weight: 700; line-height: 1;
}
.tech .l { font-size: 12px; line-height: 1.7; color: var(--text-muted); }
@media (min-width: 1024px) {
  .tech-grid { grid-template-columns: repeat(4, 1fr); }
  .tech-grid .cell:nth-child(even) { border-right: 1px solid var(--border-invert); }
  .tech-grid .cell:nth-child(-n+2) { border-bottom: 0; }
  .tech-grid .cell:last-child { border-right: 0; }
}
.steels { margin-top: 48px; }
.steels .t { font-size: 13px; color: var(--text-muted); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.chip {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em;
  padding: 8px 16px; border: 1px solid #ffffff2e; border-radius: 999px;
  transition: 0.25s;
}
.chip:hover { border-color: var(--steel-red); color: #fff; background: #C8102E14; }
.steels .note { font-size: 12px; color: var(--text-tertiary); margin-top: 16px; }

/* --- ワンストップの流れ --- */
.process { padding: var(--section-pad) 0; }
.steps { display: grid; gap: 40px; margin-top: 48px; }
.step { border-top: 2px solid var(--navy); padding-top: 24px; display: grid; gap: 12px; }
.step .big {
  font-family: var(--font-serif); font-weight: 700;
  font-size: clamp(52px, 5.8vw, 72px); line-height: 0.92;
  color: var(--bg-faint);
}
.step .k {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; color: var(--steel-red);
}
.step h3 { font-family: var(--font-serif); font-size: 20px; font-weight: 700; letter-spacing: 0.05em; }
.step p { font-size: 12px; line-height: 1.9; color: var(--text-secondary); }
@media (min-width: 768px) {
  .steps { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
}
@media (min-width: 1024px) {
  .steps { grid-template-columns: repeat(4, 1fr); align-items: start; }
  /* 段差をつけて工程の流れを表現 */
  .step:nth-child(2) { margin-top: 28px; }
  .step:nth-child(3) { margin-top: 56px; }
  .step:nth-child(4) { margin-top: 84px; }
}

/* --- お知らせ --- */
.news { padding: var(--section-pad) 0; background: var(--bg-soft); }
.news .sec-head { align-items: end; }
.news-list { margin-top: 40px; border-top: 1px solid var(--border); }
.news-item {
  display: flex; align-items: center; gap: 16px 24px; flex-wrap: wrap;
  padding: 20px 16px 20px 0;
  border-bottom: 1px solid var(--border);
  transition: background 0.25s;
}
.news-item:hover { background: #fff; }
.news-item time { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--text-muted); }
.news-item .title { flex: 1; min-width: 0; font-size: clamp(14px, 1.2vw, 16px); font-weight: 500; }
.news-item .icon { color: var(--steel-red); font-size: 16px; transition: transform 0.3s var(--ease); }
.news-item:hover .icon { transform: translateX(4px); }
@media (max-width: 767px) {
  .news-item .title { flex-basis: 100%; order: 3; }
  .news-item .icon { margin-left: auto; order: 2; }
}

/* --- お知らせ：リンク先が無い記事 --- */
/* href="#" にするとページ先頭へ飛んでしまうので、リンクにせず span で出す。
   押せないことが見た目で分かるよう、ホバーの反応も止める。 */
.news-item--flat { cursor: default; }
.news-item--flat:hover { background: transparent; }

/* --- お知らせ：一覧ページ --- */
/* トップの #news は「お知らせ」の見出しブロックを持つが、一覧ページは
   page-header がその役目を担う。.news-list の margin-top がそのまま
   余白として残ると、見出しと一覧が離れすぎる。 */
.news--index { background: var(--bg); }
.news--index .news-list { margin-top: 0; }

/* --- お知らせ：記事ページ --- */
/* 見出しは会社情報などの固定ページより小さく取る。
   記事タイトルは文であって単語ではないので、64px だと2〜3行に折れて頭でっかちになる。 */
.page-header--news h1 {
  margin-top: 14px;
  max-width: 900px;
  font-size: clamp(21px, 2.9vw, 36px);
  letter-spacing: 0.04em;
  line-height: 1.55;
}
/* パンくずの最後は記事タイトル。会社情報などと違って文なので、
   そのまま出すと狭い画面で2〜3行に折れてヘッダーを押し下げる。
   1行に固定して、溢れた分は省略する。 */
.page-header--news .crumb { flex-wrap: nowrap; }
.page-header--news .crumb a { white-space: nowrap; }
.page-header--news .crumb > span:last-child {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.n-meta { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.n-meta time {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.04em; color: var(--text-muted);
}

.news-body { padding: var(--section-pad) 0; }
/* 本文は一行を読める幅で止める。--inner-max のままだと1行が長すぎて目が戻れない。 */
.news-body .inner { max-width: 760px; }

.prose { font-size: clamp(14px, 1.15vw, 16px); line-height: 2.05; color: var(--text-secondary); }
.prose > * + * { margin-top: 1.55em; }
.prose h2 {
  margin-top: 2.6em; padding-left: 14px;
  border-left: 3px solid var(--steel-red);
  font-family: var(--font-serif); font-size: clamp(17px, 1.9vw, 22px);
  font-weight: 700; letter-spacing: 0.04em; line-height: 1.6;
  color: var(--text-primary);
}
.prose h3 {
  margin-top: 2.2em;
  font-size: clamp(15px, 1.5vw, 17px); font-weight: 700; letter-spacing: 0.03em;
  color: var(--text-primary);
}
.prose strong { color: var(--text-primary); font-weight: 700; }
.prose a { color: var(--link-blue); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--steel-red); }
.prose ul, .prose ol { padding-left: 1.5em; }
.prose li + li { margin-top: 0.55em; }
.prose ul { list-style: none; padding-left: 0; }
.prose ul li { position: relative; padding-left: 1.3em; }
.prose ul li::before {
  content: ""; position: absolute; left: 2px; top: 0.85em;
  width: 6px; height: 6px; background: var(--gold);
}
.prose blockquote {
  padding: 6px 0 6px 22px; border-left: 3px solid var(--border-strong);
  font-family: var(--font-serif); color: var(--text-tertiary);
}
.prose blockquote > * + * { margin-top: 1em; }
.prose img { max-width: 100%; height: auto; border-radius: 4px; }
.prose figcaption { margin-top: 10px; font-size: 12px; color: var(--text-muted); }
.prose hr { border: none; border-top: 1px solid var(--border); margin: 2.4em 0; }
.prose code {
  font-family: var(--font-mono); font-size: 0.92em;
  background: var(--bg-faint); padding: 2px 5px; border-radius: 3px;
}
.prose pre { background: var(--bg-faint); padding: 16px; border-radius: 4px; overflow-x: auto; }
.prose pre code { background: none; padding: 0; }
/* 表は幅が読めない。横に溢れたらページごと横スクロールさせず、表の中だけで送る */
.prose table { width: 100%; border-collapse: collapse; font-size: 14px; }
.prose th, .prose td { border: 1px solid var(--border); padding: 10px 12px; text-align: left; }
.prose th { background: var(--bg-faint); font-weight: 700; color: var(--text-primary); }

.news-pager {
  margin-top: clamp(48px, 7vw, 72px); padding-top: 28px;
  border-top: 1px solid var(--border);
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: start;
}
.news-pager .pg--next { text-align: right; }
.news-pager .pg--index {
  align-self: center;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.09em;
  color: var(--text-tertiary); white-space: nowrap;
  border: 1px solid var(--border); border-radius: 999px; padding: 9px 16px;
  transition: border-color 0.25s, color 0.25s;
}
.news-pager .pg--index:hover { border-color: var(--steel-red); color: var(--steel-red); }
.pg .l {
  display: block;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em;
  color: var(--text-muted);
}
.pg .t {
  margin-top: 7px; font-size: 13px; line-height: 1.7; color: var(--text-secondary);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  transition: color 0.25s;
}
.pg:hover .t { color: var(--steel-red); }

@media (max-width: 767px) {
  .news-pager { grid-template-columns: 1fr; gap: 22px; }
  .news-pager .pg--next { text-align: left; }
  .news-pager .pg--index { justify-self: start; }
}

/* --- CTA --- */
.cta { padding: var(--section-pad) 0; background: var(--bg); }
.cta-banner {
  position: relative; overflow: hidden;
  display: grid; gap: 40px; align-items: center;
  padding: clamp(36px, 5.4vw, 64px);
  background: var(--navy); color: #fff; border-radius: 16px;
}
.cta-banner .glow {
  position: absolute; right: -80px; top: -40px; z-index: 0; pointer-events: none;
  width: 400px; height: 400px;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, #C8102E88 0%, #C8102E00 100%);
}
.cta-banner .txt { position: relative; z-index: 1; display: grid; gap: 12px; }
.cta-banner .e {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.18em; color: var(--steel-red);
}
.cta-banner h2 {
  font-family: var(--font-serif);
  font-size: clamp(24px, 3vw, 36px); font-weight: 700;
  line-height: 1.4; letter-spacing: 0.03em;
}
.cta-banner .s { font-size: clamp(14px, 1.2vw, 16px); line-height: 1.8; color: var(--text-invert-sub); }
.cta-banner .actions { position: relative; z-index: 1; display: grid; gap: 12px; justify-items: stretch; }
/* 1カラム表示ではボタンをバナー幅いっぱいに揃える（右側に中途半端な余白を残さない） */
@media (max-width: 1023px) {
  .cta-banner .actions .btn { width: 100%; }
}
/* 2カラム表示では定型の240px（グリッド自動列ではmin-widthの%が効かないため明示） */
@media (min-width: 1024px) {
  .cta-banner .actions .btn { width: 240px; }
}
.btn--tel { background: #fff; color: var(--steel-red); border: 1.5px solid var(--steel-red); font-family: var(--font-en); letter-spacing: 0.04em; }
.btn--tel:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(200, 16, 46, 0.18); }
@media (min-width: 1024px) {
  .cta-banner { grid-template-columns: 1fr auto; gap: 48px; }
}

/* --- フッター --- */
.footer { background: var(--navy); color: var(--text-muted); font-size: 12px; }
.footer-grid { display: grid; gap: 48px; padding: clamp(48px, 6vw, 64px) 0; }
.footer .logo .mark { background: #fff; color: var(--navy); width: 44px; height: 44px; }
.footer .logo .ja { color: #fff; }
.footer .logo .en { font-size: 10px; }
.footer address { font-style: normal; margin-top: 20px; line-height: 1.8; color: var(--text-invert-sub); }
.footer .sns { display: flex; gap: 12px; margin-top: 24px; }
.footer .sns a {
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid #334155; border-radius: 999px;
  color: var(--text-invert-sub); font-size: 16px;
  transition: 0.25s;
}
.footer .sns a:hover { border-color: var(--steel-red); color: #fff; background: #C8102E14; }
.sitemap { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
.footer h4 {
  margin-bottom: 16px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.09em; color: #fff;
}
.footer li + li { margin-top: 12px; }
.footer .sitemap a { color: var(--text-invert-sub); }
.footer .sitemap a:hover { color: #fff; }
.footer-bottom { background: var(--navy-deep); border-top: 1px solid #FFFFFF14; }
.footer-bottom .inner {
  max-width: none;
  display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; justify-content: space-between;
  padding-top: 20px; padding-bottom: 20px;
  font-size: 11px;
}
.footer-bottom .c { font-family: var(--font-en); }
.legal { display: flex; flex-wrap: wrap; gap: 20px; }
.legal a:hover { color: #fff; }
@media (min-width: 768px) {
  .sitemap { grid-template-columns: repeat(3, 1fr); gap: 48px; }
}
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: 320px 1fr; gap: 64px; }
}

/* ============ ④' 採用ページ（recruit.html）＝章立てストーリー ============ */

/* --- 物語の背骨：左端の赤い進行ライン --- */
.story-line {
  position: fixed; left: clamp(6px, 1.2vw, 20px); top: 0; bottom: 0;
  width: 2px; z-index: 40; pointer-events: none;
  background: #94a3b822;
}
.story-line i {
  position: absolute; inset: 0; display: block;
  background: var(--steel-red);
  transform: scaleY(0); transform-origin: top center;
}

/* --- 章ナビ（PCのみ） --- */
.ch-nav { position: fixed; right: 24px; top: 50%; transform: translateY(-50%); z-index: 40; display: none; }
@media (min-width: 1024px) { .ch-nav { display: grid; gap: 14px; } }
.ch-nav a {
  display: flex; align-items: center; gap: 8px; justify-content: flex-end;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  color: var(--text-muted);
  transition: color 0.3s ease;
}
.ch-nav a i { display: block; width: 16px; height: 1px; background: currentColor; transition: width 0.3s var(--ease); }
.ch-nav a.current { color: var(--steel-red); font-weight: 700; }
.ch-nav a.current i { width: 28px; }

/* --- 序章：働く姿の写真＋火の粉 --- */
.story-hero {
  position: relative; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center;
  background-color: var(--navy);
  background-size: cover; background-position: center;
  color: #fff;
}
.story-hero .embers { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.story-hero .inner { position: relative; z-index: 1; padding-top: 72px; padding-bottom: 120px; }
.story-hero .eyebrow { color: var(--steel-red); }
.story-hero h1 {
  margin-top: 28px;
  font-family: var(--font-serif);
  font-size: clamp(42px, 7.2vw, 92px);
  font-weight: 700; line-height: 1.3; letter-spacing: 0.06em;
}
.story-hero h1 .row { display: block; white-space: nowrap; }
.story-hero h1 .st { /* 一文字ずつ「刻印」される */
  display: inline-block; font-style: normal;
  opacity: 0; transform: translateY(0.25em) scale(1.5); filter: blur(8px);
  animation: stamp 0.7s var(--ease) forwards;
  animation-delay: calc(var(--i) * 70ms + 0.35s);
}
@keyframes stamp { to { opacity: 1; transform: none; filter: none; } }
.story-hero .lead {
  margin-top: 28px;
  font-size: clamp(14px, 1.3vw, 17px); line-height: 2.1; color: var(--text-invert-sub);
}
.scroll-cue {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  z-index: 1; padding-bottom: 78px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.3em; color: var(--text-muted);
}
.scroll-cue::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  width: 1px; height: 62px; background: var(--steel-red);
  animation: cue 2.2s var(--ease) infinite;
}
@keyframes cue {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* --- 章の土台 --- */
.ch { position: relative; overflow: hidden; padding: clamp(72px, 12vw, 140px) 0; }
.ch--light { background: var(--bg); }
.ch--soft { background: var(--bg-soft); }
.ch--navy { background: var(--navy); color: #fff; }
.ch .inner { position: relative; z-index: 1; }

/* 全体のテックあしらい：各章に薄い方眼と、隅のモノスペース諸元タグ（CADビューと共通言語） */
.ch::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(#0f172a08 1px, transparent 1px),
    linear-gradient(90deg, #0f172a08 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(120% 90% at 90% 10%, #000 0%, transparent 70%);
  mask-image: radial-gradient(120% 90% at 90% 10%, #000 0%, transparent 70%);
}
.ch--navy::before {
  background-image:
    linear-gradient(#7fb2ff10 1px, transparent 1px),
    linear-gradient(90deg, #7fb2ff10 1px, transparent 1px);
}
.mat-intro { position: relative; }
.ch[data-meta]::after,
.mat-intro[data-meta]::after {
  content: attr(data-meta);
  position: absolute; right: clamp(20px, 4vw, 48px); bottom: 18px; z-index: 1;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
  color: var(--text-muted); opacity: 0.7; pointer-events: none;
  white-space: nowrap;
}
.ch--navy[data-meta]::after { color: #7fb2ff; opacity: 0.55; }
@media (max-width: 640px) { .ch[data-meta]::after, .mat-intro[data-meta]::after { display: none; } }
.num-bg { /* 章番号の透かし */
  position: absolute; right: 2%; top: clamp(16px, 4vw, 48px); z-index: 0;
  font-family: var(--font-serif); font-weight: 700; line-height: 0.8;
  font-size: clamp(120px, 22vw, 260px);
  color: var(--bg-faint); user-select: none; pointer-events: none;
}
.num-bg--dark { color: #FFFFFF08; }
.ch-grid { display: grid; gap: 36px; margin-top: 28px; }
.ch-body p { font-size: clamp(14px, 1.2vw, 16px); line-height: 2.1; color: var(--text-secondary); }
.ch-body p + p { margin-top: 1.4em; }
.ch-body .em {
  font-family: var(--font-serif); font-weight: 700;
  font-size: clamp(16px, 1.5vw, 20px); line-height: 2; color: var(--text-primary);
}
.ch-lead { margin-top: 16px; font-size: clamp(14px, 1.25vw, 17px); color: var(--text-secondary); }
@media (min-width: 1024px) {
  .ch-grid { grid-template-columns: 1.1fr 1fr; gap: 72px; align-items: center; }
}

/* --- 01 金属が形になる：CAD計測ビュー（粒子の再結合） --- */
.forms { margin: 0; display: grid; gap: 14px; }

/* ダークな製図モニター：方眼グリッド＋発光ワイヤーフレーム */
.cad {
  position: relative;
  height: clamp(300px, 38vw, 440px);
  border-radius: 8px; overflow: hidden;
  background:
    radial-gradient(120% 120% at 70% 20%, #12233f 0%, #0a1526 55%, #060d18 100%);
  box-shadow: inset 0 0 0 1px #ffffff14, 0 20px 44px rgba(8, 15, 30, 0.4);
}
.cad::before { /* 方眼（設計図の目盛り） */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(#5ea9ff12 1px, transparent 1px),
    linear-gradient(90deg, #5ea9ff12 1px, transparent 1px),
    linear-gradient(#5ea9ff08 1px, transparent 1px),
    linear-gradient(90deg, #5ea9ff08 1px, transparent 1px);
  background-size: 48px 48px, 48px 48px, 12px 12px, 12px 12px;
  background-position: center;
}
.cad::after { /* 走査線の薄い横縞 */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background: repeating-linear-gradient(0deg, #0a1a3300 0 2px, #0a1a3322 2px 3px);
}
.cad-canvas { position: relative; z-index: 1; width: 100%; height: 100%; display: block; }

/* HUD（隅の計測情報） */
.cad-hud { position: absolute; inset: 0; z-index: 2; pointer-events: none; font-family: var(--font-mono); }
.hud {
  position: absolute; font-size: 9.5px; letter-spacing: 0.12em;
  color: #7fb2ff; text-shadow: 0 0 8px #1e60c066;
}
.hud--tl { left: 14px; top: 13px; }
.hud--tr { right: 14px; top: 13px; }
.hud--bl { left: 14px; bottom: 13px; color: var(--steel-red); text-shadow: 0 0 8px #c8102e55; }
.hud--br { right: 14px; bottom: 13px; }
.blink { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* コーナーの隅金（計測枠） */
.cad-corner { position: absolute; z-index: 2; width: 14px; height: 14px; border: 1px solid #7fb2ff88; }
.cad-corner--tl { left: 8px; top: 8px; border-right: 0; border-bottom: 0; }
.cad-corner--tr { right: 8px; top: 8px; border-left: 0; border-bottom: 0; }
.cad-corner--bl { left: 8px; bottom: 8px; border-right: 0; border-top: 0; }
.cad-corner--br { right: 8px; bottom: 8px; border-left: 0; border-top: 0; }

.forms figcaption { display: grid; gap: 6px; }
.forms-label {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; color: var(--steel-red);
}
.forms-list { font-size: 11px; line-height: 1.9; color: var(--text-tertiary); }
@media (min-width: 1024px) {
  .ch-grid--forms { align-items: center; }
}

/* --- 02 三つの仕事：画面固定シーン（変化は必ず画面内で起きる） --- */
.jobs-pin { position: relative; height: 340vh; height: 340svh; background: var(--navy); }
.jobs-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; color: #fff; }
.job-panel {
  position: absolute; inset: 0;
  background-color: var(--navy);
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 0.7s ease;
}
.job-panel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, #0F172AF0 0%, #0F172A59 60%, #0F172A8C 100%);
}
.job-panel.active { opacity: 1; }
.job-panel .cap { position: absolute; left: 0; right: 0; bottom: clamp(56px, 10vh, 120px); z-index: 1; }
.cap-ch { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--text-muted); }
.cap-num { margin-top: clamp(16px, 3vh, 32px); font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: 0.1em; color: var(--steel-red); }
.cap-num span { margin-left: 8px; color: var(--text-muted); font-weight: 500; letter-spacing: 0.24em; }
.job-panel h3 {
  margin-top: 12px;
  font-family: var(--font-serif); font-weight: 700;
  font-size: clamp(30px, 5vw, 56px); line-height: 1.4; letter-spacing: 0.05em;
}
.cap-d { margin-top: 14px; font-size: clamp(13px, 1.2vw, 16px); line-height: 1.9; color: var(--text-invert-sub); }
.job-dots { position: absolute; right: clamp(20px, 4vw, 48px); bottom: clamp(24px, 5vh, 56px); z-index: 1; display: flex; gap: 8px; }
.job-dots i { width: 8px; height: 4px; border-radius: 999px; background: #FFFFFF44; transition: 0.35s var(--ease); }
.job-dots i.active { width: 24px; background: var(--steel-red); }

/* --- 03 キャリアの時系列（タイムライン） --- */
.tl { position: relative; margin-top: 56px; display: grid; gap: 36px; list-style: none; padding: 0; }
.tl::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--border-strong); }
.tl-item {
  position: relative; margin-left: 36px;
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
}
.tl-item::before { /* 節目の赤い点（背骨のライン上） */
  content: ""; position: absolute; left: -33px; top: 8px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--steel-red);
  box-shadow: 0 0 0 4px var(--bg-soft);
}
.tl-item .photo {
  height: 220px; border-radius: 11px 11px 0 0;
  background: linear-gradient(160deg, #334155, #1e293b 55%, #0f172a);
  background-size: cover; background-position: center 30%;
}
.tl-item .d { padding: 24px; display: grid; gap: 12px; justify-items: start; }
.tl-item .year {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-en); font-size: clamp(28px, 2.4vw, 36px); font-weight: 700;
  line-height: 1; color: var(--steel-red);
}
.tl-item blockquote {
  margin: 0;
  font-family: var(--font-serif); font-weight: 700;
  font-size: clamp(18px, 1.6vw, 21px); line-height: 1.65; color: var(--text-primary);
}
.tl-item .t { font-size: 13px; line-height: 1.95; color: var(--text-secondary); }
.tl-item .n { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--text-tertiary); }
@media (min-width: 1024px) {
  .tl { grid-template-columns: repeat(3, 1fr); gap: 28px; padding-top: 36px; }
  .tl::before { left: 5px; right: 5px; top: 7px; bottom: auto; width: auto; height: 2px; }
  .tl-item { margin-left: 0; }
  .tl-item::before { left: 6px; top: -34px; }
}

/* --- 04 土台：計器ストリップ＋働く環境 --- */
.gauges {
  margin-top: 48px;
  border: 1px solid var(--border-invert); border-radius: 8px; overflow: hidden;
  background: #ffffff05;
}
.strip-grid .cell { position: relative; }
.strip-grid .cell .tick { /* 計器風の目盛り */
  position: absolute;
  left: clamp(16px, 2.4vw, 32px); right: clamp(16px, 2.4vw, 32px); bottom: 8px;
  height: 6px;
  background: repeating-linear-gradient(90deg, #FFFFFF24 0 1px, transparent 1px 8px);
  pointer-events: none;
}
.strip-grid .cell .tick::after { /* 赤い指針。表示時に指示位置へ振れる */
  content: ""; position: absolute; top: -2px; left: 4%;
  width: 2px; height: 10px; background: var(--steel-red);
  transition: left 1.6s var(--ease) 0.3s;
}
.strip-grid .cell.is-visible .tick::after { left: var(--p, 60%); }

.benefit-grid { display: grid; gap: 24px; margin-top: 48px; }
.benefit {
  display: grid; gap: 14px; align-content: start; justify-items: start;
  padding: 24px;
  background: var(--bg-soft); border-radius: 8px;
}
.benefit .icon-tile {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: #fff; border-radius: 8px;
  color: var(--steel-red); font-size: 22px;
}
.benefit h3 { font-size: 16px; font-weight: 700; }
.benefit p { font-size: 12px; line-height: 1.85; color: var(--text-secondary); }
.ch--navy .benefit { background: var(--navy-2); }
.ch--navy .benefit .icon-tile { background: var(--navy); }
.ch--navy .benefit h3 { color: #fff; }
.ch--navy .benefit p { color: var(--text-muted); }
@media (min-width: 480px) { .benefit-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .benefit-grid { grid-template-columns: repeat(4, 1fr); } }

/* --- 募集要項 --- */
.requirements { padding: var(--section-pad) 0; background: var(--bg-soft); }
.req-table {
  margin-top: 48px;
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden;
}
.req-row { display: grid; }
.req-row + .req-row { border-top: 1px solid var(--border); }
.req-row dt {
  padding: 14px 24px 0;
  font-size: 12px; font-weight: 700;
}
.req-row dd { margin: 0; padding: 4px 24px 14px; font-size: 12px; line-height: 1.85; color: var(--text-secondary); }
@media (min-width: 768px) {
  .req-row { grid-template-columns: 240px 1fr; }
  .req-row dt { padding: 20px 24px; background: var(--bg-soft); }
  .req-row dd { padding: 20px 32px; }
}

/* --- 終章：エントリー --- */
.ch-entry {
  position: relative; overflow: hidden;
  min-height: 92vh; min-height: 92svh;
  display: grid; align-items: center;
  padding: var(--section-pad) 0;
  background-color: var(--navy);
  background-size: cover; background-position: center;
  color: #fff; text-align: center;
}
.ch-entry .inner { display: grid; justify-items: center; gap: 24px; }
.want { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; }
.want li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border: 1px solid #FFFFFF2E; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
}
.want .icon { color: var(--steel-red); font-size: 14px; }
.ch-entry h2 {
  font-family: var(--font-serif); font-weight: 700;
  font-size: clamp(32px, 5.4vw, 60px); line-height: 1.5; letter-spacing: 0.05em;
}
.ch-entry .s { font-size: clamp(13px, 1.2vw, 16px); line-height: 1.9; color: var(--text-invert-sub); }
.btn--xl { height: 64px; min-width: min(300px, 100%); font-size: 17px; }
.sub-link {
  font-size: 12px; color: var(--text-muted);
  text-decoration: underline; text-underline-offset: 4px;
}
.sub-link:hover { color: #fff; }

/* --- ヘッダーのエントリーボタン（採用ページ） --- */
.header .btn--entry { background: var(--steel-red); }
.header .btn--entry span { display: inline; } /* 主要CTAなのでモバイルでも文字を残す */
.header .btn--entry { white-space: nowrap; }
@media (max-width: 479px) {
  .header .inner { gap: 12px; }
  .header .btn--entry { padding: 10px 14px; }
  .header .logo .en { display: none; } /* 幅が足りないので英字表記は畳む */
}
.header .btn--entry:hover { box-shadow: 0 8px 20px rgba(200, 16, 46, 0.35); filter: none; }


/* ============ ④'' 会社情報ページ（company.html） ============ */

/* --- ページヘッダー --- */
.page-header {
  position: relative; overflow: hidden;
  background: var(--bg-soft);
  padding: clamp(48px, 8vw, 88px) 0 clamp(40px, 7vw, 72px);
  border-bottom: 1px solid var(--border);
}
.page-header .inner { position: relative; z-index: 1; }
.watermark--en { font-family: var(--font-en); letter-spacing: 0.02em; }
.page-header .watermark { right: -1%; top: 12%; color: var(--border); opacity: 0.5; z-index: 0; }
.crumb {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  color: var(--text-tertiary);
  margin-bottom: clamp(24px, 4vw, 40px);
}
.crumb a:hover { color: var(--steel-red); }
.crumb .sep { color: var(--border-strong); }
.page-header h1 {
  margin-top: 20px;
  font-family: var(--font-serif);
  font-size: clamp(36px, 5.4vw, 64px);
  font-weight: 700; letter-spacing: 0.07em; line-height: 1.3;
}
.page-header .sub {
  margin-top: 18px; max-width: 680px;
  font-size: clamp(13px, 1.2vw, 16px); line-height: 1.9; color: var(--text-secondary);
}
/* 縦書き（ライト背景用の配色） */
.wa-vertical--page { left: auto; right: 24px; top: -8px; width: 48px; }
.wa-vertical--page .char { color: var(--text-primary); }
.wa-vertical--page .char--red { color: var(--steel-red); }
.wa-vertical--page .seal { border-color: #FFFFFFAA; }

/* --- 代表メッセージ --- */
.message { padding: var(--section-pad) 0; }
.msg-grid { display: grid; gap: 40px; }
.msg-photo {
  position: relative; margin: 0;
  aspect-ratio: 7 / 9; max-height: 560px;
  border-radius: 12px; overflow: hidden;
  background-size: cover; background-position: center 20%;
}
.msg-photo .nametag {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: grid; gap: 4px;
  padding: 48px 24px 20px;
  background: linear-gradient(0deg, #0F172AE6 0%, #0F172A00 100%);
  color: #fff;
}
.msg-photo .role {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.22em; color: var(--steel-red);
}
.msg-photo .name { font-size: 14px; font-weight: 600; letter-spacing: 0.04em; }
.msg-lead {
  margin-top: 20px;
  font-family: var(--font-serif);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 700; line-height: 1.6; letter-spacing: 0.06em;
}
.msg-text { margin-top: 28px; }
.msg-text p { font-size: clamp(14px, 1.15vw, 15px); line-height: 2.1; color: var(--text-secondary); }
.msg-text p + p { margin-top: 1.4em; }
.signature {
  margin-top: 36px;
  display: flex; align-items: center; gap: 16px;
}
.signature .sigt { font-size: 12px; color: var(--text-tertiary); }
.signature .signame { font-family: var(--font-serif); font-size: 22px; font-weight: 700; letter-spacing: 0.1em; }
.seal--sm {
  width: 36px; height: 36px; display: grid; place-items: center;
  background: var(--steel-red); border-radius: 4px;
  transform: rotate(4deg);
  font-family: var(--font-serif); font-size: 20px; font-weight: 700; color: #fff;
}
@media (min-width: 1024px) {
  .msg-grid { grid-template-columns: 420px 1fr; gap: 64px; align-items: start; }
}

/* --- 経営理念 --- */
.c-philosophy {
  position: relative; overflow: hidden;
  padding: var(--section-pad) 0;
  background: var(--bg-soft);
}
.c-philosophy .grain { position: absolute; inset: 0; opacity: 0.85; pointer-events: none; }
.c-philosophy .watermark { right: 2%; top: 6%; color: var(--border); opacity: 0.5; z-index: 0; }
.c-philosophy .inner { position: relative; z-index: 1; }
.statement {
  margin-top: 40px;
  font-family: var(--font-serif);
  font-size: clamp(28px, 4.4vw, 52px);
  font-weight: 700; line-height: 1.6; letter-spacing: 0.06em;
}
.statement em { font-style: normal; color: var(--steel-red); }
.statement-body {
  margin-top: 20px; max-width: 640px;
  font-size: clamp(13px, 1.2vw, 15px); line-height: 2; color: var(--text-secondary);
}
.values { display: grid; gap: 24px; margin-top: 56px; }
.value {
  display: grid; gap: 14px; align-content: start;
  padding: 28px;
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
}
.value .top {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 14px; border-bottom: 1px solid var(--border);
}
.value .no {
  font-family: var(--font-serif); font-size: 36px; font-weight: 700;
  line-height: 1; color: var(--border-strong);
}
.value .icon { font-size: 24px; color: var(--steel-red); }
.value h3 { font-family: var(--font-serif); font-size: 20px; font-weight: 700; letter-spacing: 0.05em; }
.value p { font-size: 13px; line-height: 1.95; color: var(--text-secondary); }
@media (min-width: 768px) { .values { grid-template-columns: repeat(3, 1fr); } }

/* --- 会社概要（表は .req-table を共用） --- */
.profile { padding: var(--section-pad) 0; }

/* --- 沿革 --- */
.history {
  position: relative; overflow: hidden;
  padding: var(--section-pad) 0;
  background: var(--navy); color: #fff;
}
.history .seigaiha { opacity: 0.06; }
.history .inner { position: relative; z-index: 1; }
.h-tl { margin-top: 56px; display: grid; list-style: none; padding: 0; }
.h-item {
  display: grid; grid-template-columns: 76px 20px 1fr;
  gap: 0 clamp(16px, 3vw, 32px);
  padding-bottom: 40px;
}
.h-item .y {
  font-family: var(--font-en); font-size: 20px; font-weight: 700;
  line-height: 1.1; letter-spacing: 0.04em; color: var(--steel-red);
  text-align: right;
}
.h-item .axis { position: relative; }
.h-item .axis::before { /* 節目の点 */
  content: ""; position: absolute; left: 50%; top: 5px;
  width: 11px; height: 11px; border-radius: 50%;
  transform: translateX(-50%);
  background: var(--steel-red);
  box-shadow: 0 0 0 4px #C8102E33;
}
.h-item .axis::after { /* 年表の線（次の節目まで届かせる） */
  content: ""; position: absolute; left: 50%; top: 22px; bottom: -46px;
  width: 2px; transform: translateX(-50%);
  background: var(--border-invert);
}
.h-item--last { padding-bottom: 0; }
.h-item--last .axis::after { display: none; }
.h-item .d { font-size: clamp(13px, 1.2vw, 15px); line-height: 1.6; color: var(--text-invert-sub); padding-top: 1px; }

/* --- 拠点案内 --- */
.locations { padding: var(--section-pad) 0; }
.loc-cards { display: grid; gap: 24px; margin-top: 48px; }
.loc-card {
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden;
  transition: transform 0.35s var(--ease), box-shadow 0.35s ease, border-color 0.35s ease;
}
.loc-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12);
  border-color: #c8102e66;
}
.loc-card .photo {
  height: 180px;
  background: linear-gradient(160deg, #334155, #1e293b 55%, #0f172a);
  background-size: cover; background-position: center;
}
.loc-card .body { padding: 22px 24px 24px; display: grid; gap: 10px; justify-items: start; }
.loc-card h3 { font-family: var(--font-serif); font-size: 20px; font-weight: 700; letter-spacing: 0.05em; }
.loc-card .addr { font-size: 13px; line-height: 1.9; color: var(--text-secondary); }
.loc-card .tel {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-en); font-size: 14px; font-weight: 600; letter-spacing: 0.04em;
}
.loc-card .tel .icon { font-size: 14px; color: var(--steel-red); }
@media (min-width: 768px) { .loc-cards { grid-template-columns: repeat(3, 1fr); } }

/* ============ ④-4 サステナビリティページ（sustainability.html） ============ */

/* --- ビジョン宣言（ダーク基調：暗い鋼面に光沢が走る） --- */
.s-vision {
  position: relative; overflow: hidden;
  padding: clamp(72px, 11vw, 128px) 0;
  background: var(--navy); color: #fff;
}
/* 暗い研磨鋼：地色を濃紺のメタルにし、白い光沢を映えさせる */
.s-vision .grain {
  position: absolute; inset: 0; opacity: 1; pointer-events: none;
  background:
    repeating-linear-gradient(102deg, #ffffff0a 0 0.5px, transparent 0.5px 5px),
    linear-gradient(118deg, #0b1220 0%, #17233b 42%, #0d1727 72%, #141f34 100%);
}
.s-vision .grain::after { /* 暗面ではやや控えめの白光に */
  background: linear-gradient(105deg, #ffffff00 0%, #ffffff00 42%, #ffffff73 50%, #ffffff00 58%, #ffffff00 100%);
}
/* 透かし「共生」：暗面で読める金の縁取り＋淡い塗り。主役級に大きく */
.s-vision .watermark {
  right: -1%; top: 50%; transform: translateY(-50%); z-index: 0;
  font-size: clamp(120px, 20vw, 300px);
  color: transparent;
  -webkit-text-stroke: 1px #b08d5759;
  opacity: 0.9;
}
.s-vision .inner { position: relative; z-index: 1; }
.s-vision .statement-body { color: var(--text-invert-sub); }

/* --- KPIダッシュボード --- */
.s-kpi { padding: var(--section-pad) 0; background: var(--bg-soft); }
.s-kpi .sec-head { align-items: end; }
.kpi-grid { display: grid; gap: 20px; margin-top: 48px; }
.kpi {
  display: grid; gap: 10px; align-content: start;
  padding: 24px;
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
}
.kpi .k {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.18em; color: var(--text-tertiary);
}
.kpi .k .sub-n { font-size: 0.8em; }
.kpi .v {
  display: flex; align-items: baseline; gap: 4px;
  font-family: var(--font-en); font-weight: 700; line-height: 1;
  font-size: clamp(40px, 5vw, 56px); color: var(--text-primary);
}
.kpi .v .unit { font-family: var(--font-sans); font-size: 16px; font-weight: 700; color: var(--text-secondary); }
.kpi .l { font-size: 12px; line-height: 1.7; color: var(--text-secondary); }
.kpi .bar {
  height: 6px; margin-top: 4px; border-radius: 999px;
  background: var(--bg-faint); overflow: hidden;
}
.kpi .bar i {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--steel-red), #E63B57);
  transition: width 1.4s var(--ease) 0.2s;
}
.kpi.is-visible .bar i { width: var(--p, 50%); }
.kpi .target {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--text-tertiary);
}
.kpi .target .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--steel-red); flex-shrink: 0; }
.kpi--stat .v { color: var(--steel-red); }
.kpi-note { margin-top: 20px; font-size: 11px; color: var(--text-tertiary); }
@media (min-width: 640px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .kpi-grid { grid-template-columns: repeat(3, 1fr); } }

/* --- ESG 3本柱 --- */
.s-esg { padding: var(--section-pad) 0; }
.s-esg .sec-head { align-items: end; }
.esg-grid { display: grid; gap: 24px; margin-top: 48px; }
.esg-pillar {
  display: grid; gap: 18px; align-content: start;
  padding: 32px;
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  border-top: 3px solid var(--steel-red);
  transition: transform 0.35s var(--ease), box-shadow 0.35s ease;
}
.esg-pillar--e { border-top-color: #16A34A; }
.esg-pillar--s { border-top-color: var(--steel-red); }
.esg-pillar--g { border-top-color: var(--link-blue); }
.esg-pillar:hover { transform: translateY(-6px); box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12); }
.esg-pillar .head { display: flex; align-items: center; gap: 16px; }
.esg-pillar .ic {
  width: 52px; height: 52px; display: grid; place-items: center; flex-shrink: 0;
  border-radius: 10px; font-size: 26px; color: #fff;
}
.esg-pillar--e .ic { background: #16A34A; }
.esg-pillar--s .ic { background: var(--steel-red); }
.esg-pillar--g .ic { background: var(--link-blue); }
.esg-pillar .en { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.2em; color: var(--text-tertiary); }
.esg-pillar h3 { font-family: var(--font-serif); font-size: 26px; font-weight: 700; letter-spacing: 0.06em; line-height: 1.2; }
.esg-pillar .lead { font-size: 13px; line-height: 1.9; color: var(--text-secondary); }
.esg-pillar .init { display: grid; gap: 12px; border-top: 1px solid var(--border); padding-top: 18px; }
.esg-pillar .init li {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px;
  font-size: 13px; line-height: 1.6; color: var(--text-primary);
}
.status {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 3px 8px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  white-space: nowrap;
}
.status--done { background: #DCFCE7; color: #15803D; }
.status--wip  { background: var(--steel-red-soft); color: var(--steel-red); }
.status--plan { background: var(--bg-faint); color: var(--text-tertiary); }
@media (min-width: 768px) { .esg-grid { grid-template-columns: repeat(3, 1fr); } }

/* --- ロードマップ（2050カーボンニュートラル） --- */
.s-roadmap {
  position: relative; overflow: hidden;
  padding: var(--section-pad) 0;
  background: var(--navy); color: #fff;
}
.s-roadmap .seigaiha { opacity: 0.06; }
.s-roadmap .inner { position: relative; z-index: 1; }
.rm { margin-top: 56px; display: grid; gap: 0; list-style: none; padding: 0; }
.rm-item {
  display: grid; grid-template-columns: 88px 20px 1fr;
  gap: 0 clamp(16px, 3vw, 32px);
  padding-bottom: 44px;
}
.rm-item .yr {
  font-family: var(--font-en); font-size: clamp(26px, 3vw, 34px); font-weight: 700;
  line-height: 1; letter-spacing: 0.02em; color: var(--steel-red);
  text-align: right;
}
.rm-item .axis { position: relative; }
.rm-item .axis::before {
  content: ""; position: absolute; left: 50%; top: 4px;
  width: 13px; height: 13px; border-radius: 50%;
  transform: translateX(-50%);
  background: var(--navy); border: 2px solid var(--steel-red);
  box-shadow: 0 0 0 4px #C8102E29;
}
.rm-item .axis::after {
  content: ""; position: absolute; left: 50%; top: 24px; bottom: -48px;
  width: 2px; transform: translateX(-50%);
  background: var(--border-invert);
}
.rm-item--goal .axis::before { background: var(--steel-red); }
.rm-item--goal .axis::after { display: none; }
.rm-item:last-child { padding-bottom: 0; }
.rm-item .d { display: grid; gap: 8px; }
.rm-item h3 { font-family: var(--font-serif); font-size: clamp(18px, 1.8vw, 22px); font-weight: 700; letter-spacing: 0.05em; }
.rm-item--goal h3 { color: #fff; }
.rm-item p { font-size: clamp(13px, 1.2vw, 15px); line-height: 1.9; color: var(--text-invert-sub); }

/* --- SDGs対応表 --- */
.s-sdgs { padding: var(--section-pad) 0; background: var(--bg-soft); }
.s-sdgs .sec-head { align-items: end; }
.hl-legend { color: var(--steel-red); }
.sdgs-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
  margin-top: 48px; list-style: none; padding: 0;
}
.sdg {
  position: relative; overflow: hidden;
  display: grid; gap: 8px; align-content: start;
  padding: 16px; min-height: 108px;
  border-radius: 10px;
  background: #fff; border: 1px solid var(--border);
  opacity: 0.5;
  transition: transform 0.3s var(--ease), opacity 0.3s ease, box-shadow 0.3s ease;
}
.sdg--focus { opacity: 1; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08); }
.sdg--focus:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14); }
.sdg::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--c);
}
.sdg-no {
  width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 6px; background: var(--c); color: #fff;
  font-family: var(--font-en); font-size: 14px; font-weight: 700;
}
.sdg-t { font-size: 11px; line-height: 1.5; font-weight: 500; color: var(--text-secondary); }
.sdg--focus .sdg-t { color: var(--text-primary); }
.sdg-mark { position: absolute; right: 12px; top: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--steel-red); }
@media (min-width: 640px) { .sdgs-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .sdgs-grid { grid-template-columns: repeat(6, 1fr); } }

/* --- ISO認証 --- */
.s-iso { padding: var(--section-pad) 0; }
.s-iso .sec-head { align-items: end; }
.iso-grid { display: grid; gap: 24px; margin-top: 48px; }
.iso-card {
  display: flex; gap: 24px; align-items: flex-start;
  padding: 28px;
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
}
.iso-card .badge {
  flex-shrink: 0;
  width: 96px; height: 96px; display: grid; place-content: center; text-align: center;
  border-radius: 999px;
  border: 2px solid var(--navy); color: var(--navy);
  line-height: 1.1;
}
.iso-card .badge .std { font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: 0.16em; }
.iso-card .badge .no { font-family: var(--font-en); font-size: 24px; font-weight: 700; }
.iso-card .body { display: grid; gap: 8px; }
.iso-card h3 { font-family: var(--font-serif); font-size: 20px; font-weight: 700; letter-spacing: 0.04em; }
.iso-card .body > p { font-size: 13px; line-height: 1.9; color: var(--text-secondary); }
.iso-card .cert { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); letter-spacing: 0.02em; }
@media (min-width: 768px) { .iso-grid { grid-template-columns: repeat(2, 1fr); } }

/* ============ ④-5 事業詳細ページ（material.html / mold.html 共通） ============ */

/* --- 導入＋実績ストリップ --- */
.mat-intro { padding: var(--section-pad) 0; }
.mat-intro-grid { display: grid; gap: 28px; }
.mat-intro-body p { font-size: clamp(14px, 1.2vw, 16px); line-height: 2; color: var(--text-secondary); }
.mat-strip { position: relative; margin-top: 48px; border-radius: 8px; overflow: hidden; }
.mat-strip .strip-grid .cell:first-child { border-left: 0; }
/* 数字を縦積みにして、カウントアップ中の桁数変化で高さがブレないようにする */
.mat-strip .strip-grid .cell { flex-direction: column; align-items: flex-start; gap: 6px; flex-wrap: nowrap; padding-bottom: 30px; }
.mat-strip .strip-grid .num { font-size: clamp(24px, 2.2vw, 30px); }
/* 計測パネル風：薄い方眼＋四隅の隅金（採用ページのCAD計測ビューと同じ言語） */
.mat-strip.tech-strip {
  background:
    linear-gradient(#ffffff08 1px, transparent 1px),
    linear-gradient(90deg, #ffffff08 1px, transparent 1px),
    #0F172A;
  background-size: 24px 24px, 24px 24px, auto;
}
.mat-strip::before, .mat-strip::after {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  width: 12px; height: 12px; border: 1px solid #ffffff59;
}
.mat-strip::before { top: 6px; left: 6px; border-right: 0; border-bottom: 0; }
.mat-strip::after { bottom: 6px; right: 6px; border-left: 0; border-top: 0; }
@media (min-width: 1024px) {
  .mat-intro-grid { grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
}

/* --- 強み（.value を流用） --- */
.mat-strength { padding: var(--section-pad) 0; background: var(--bg-soft); }
.mat-strength .sec-head { align-items: end; }
.mat-strength .values { grid-template-columns: 1fr; }
@media (min-width: 768px) { .mat-strength .values { grid-template-columns: repeat(3, 1fr); } }

/* --- 取扱鋼種（スペック付きカード） --- */
.mat-grades { padding: var(--section-pad) 0; }
.mat-grades .sec-head { align-items: end; }
.grade-cards { display: grid; gap: 24px; margin-top: 48px; }
.grade {
  position: relative; overflow: hidden; /* 面取り疑似要素のはみ出しをレイアウトに響かせない */
  display: grid; gap: 16px; align-content: start;
  padding: 28px;
  background: #fff; border: 1px solid var(--border);
  border-radius: 12px 0 12px 12px;
  /* 鋼板の面取り：右上をCNCで落とした切り口（ブランドの八角形と同じ言語） */
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
  transition: transform 0.35s var(--ease), filter 0.35s ease;
}
.grade::before { /* 面取りの切断面（緋の切り口） */
  content: ""; position: absolute; top: -17px; right: -17px;
  width: 34px; height: 34px;
  background: var(--steel-red);
  transform: rotate(45deg);
}
/* clip-pathでbox-shadowが切れるため、影は輪郭追従のdrop-shadowで */
.grade:hover { transform: translateY(-6px); filter: drop-shadow(0 12px 16px rgba(15, 23, 42, 0.16)); }
.grade .g-head { display: flex; align-items: baseline; gap: 14px; }
.grade .g-no { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: var(--steel-red); }
.grade h3 { font-family: var(--font-serif); font-size: clamp(20px, 1.9vw, 24px); font-weight: 700; letter-spacing: 0.05em; }
.grade .g-desc { font-size: 13px; line-height: 1.9; color: var(--text-secondary); }
.grade .g-spec { display: grid; gap: 8px; padding: 16px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.grade .g-spec li { display: grid; grid-template-columns: 68px 1fr; gap: 12px; font-size: 12px; line-height: 1.6; }
.grade .g-spec .sk { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--text-tertiary); padding-top: 2px; }
.grade .g-spec .sv { color: var(--text-primary); font-weight: 500; }
.grade .g-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip2 {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
  padding: 5px 12px; border-radius: 999px;
  background: var(--bg-faint); color: var(--text-secondary);
}
.mat-note { margin-top: 24px; font-size: 12px; color: var(--text-tertiary); }
@media (min-width: 640px) { .grade-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grade-cards { grid-template-columns: repeat(4, 1fr); } }

/* --- 提案フロー --- */
.mat-flow {
  position: relative; overflow: hidden;
  padding: var(--section-pad) 0;
  background: var(--navy); color: #fff;
}
.mat-flow .seigaiha { opacity: 0.06; }
.mat-flow .inner { position: relative; z-index: 1; }
.flow-steps { margin-top: 56px; display: grid; gap: 24px; list-style: none; padding: 0; counter-reset: none; }
.flow-step {
  position: relative;
  padding: 24px 24px 24px 0;
  border-top: 1px solid var(--border-invert);
}
.flow-step .fs-no {
  font-family: var(--font-en); font-size: 40px; font-weight: 700; line-height: 1;
  color: #FFFFFF14;
}
.flow-step h3 { font-family: var(--font-serif); font-size: 18px; font-weight: 700; letter-spacing: 0.04em; margin-top: 10px; }
.flow-step p { font-size: 13px; line-height: 1.8; color: var(--text-invert-sub); margin-top: 8px; }
@media (min-width: 640px) { .flow-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .flow-steps { grid-template-columns: repeat(3, 1fr); gap: 32px 24px; }
}

/* --- 加工・サービス対応 --- */
.mat-service { padding: var(--section-pad) 0; background: var(--bg-soft); }
.mat-service .sec-head { align-items: end; }
.svc-grid { display: grid; gap: 20px; margin-top: 48px; }
.svc {
  display: grid; gap: 12px; align-content: start; justify-items: start;
  padding: 24px;
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
}
.svc .ic {
  width: 48px; height: 48px; display: grid; place-items: center;
  border-radius: 10px; background: var(--steel-red-soft); color: var(--steel-red); font-size: 24px;
}
.svc h3 { font-size: 16px; font-weight: 700; }
.svc p { font-size: 12px; line-height: 1.85; color: var(--text-secondary); }
@media (min-width: 480px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .svc-grid { grid-template-columns: repeat(4, 1fr); } }

/* --- 用途・業界 --- */
.mat-use { padding: var(--section-pad) 0; }
.mat-use .sec-head { align-items: end; }
.use-grid { display: grid; gap: 20px; margin-top: 48px; }
.use {
  display: grid; align-content: end; gap: 8px;
  min-height: 240px; padding: 24px;
  border-radius: 12px; overflow: hidden;
  background-color: var(--navy);
  background-size: cover; background-position: center;
  color: #fff;
}
.use .tag { align-self: start; background: #ffffff1f; color: #fff; }
.use h3 { font-family: var(--font-serif); font-size: 22px; font-weight: 700; letter-spacing: 0.05em; }
.use p { font-size: 12px; line-height: 1.8; color: var(--text-invert-sub); }
@media (min-width: 640px) { .use-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .use-grid { grid-template-columns: repeat(4, 1fr); } }

/* --- 関連事業 --- */
.mat-related { padding: var(--section-pad) 0; background: var(--bg-soft); }
.rel-grid { display: grid; gap: 20px; margin-top: 40px; }
.rel {
  position: relative;
  display: grid; gap: 10px; align-content: start;
  padding: 28px;
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  transition: transform 0.35s var(--ease), box-shadow 0.35s ease, border-color 0.35s ease;
}
.rel:hover { transform: translateY(-6px); box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12); border-color: #c8102e66; }
.rel h3 { font-family: var(--font-serif); font-size: 22px; font-weight: 700; letter-spacing: 0.05em; }
.rel p { font-size: 13px; line-height: 1.85; color: var(--text-secondary); max-width: 90%; }
/* 関連事業カードの矢印は、トップの事業カードと同じ面取り八角形に統一 */
.rel .chamfer { top: 24px; right: 24px; }
.rel:hover .chamfer .icon { transform: translateX(3px); }
@media (min-width: 768px) { .rel-grid { grid-template-columns: repeat(2, 1fr); } }

/* ============ ⑤ 動き（WHO WE AREの線画・浮遊光） ============ */
/* --- 研磨鋼の面（.grain）：淡いメタル地＋斜めの光がゆっくり通る ---
   テキスト背後に線を置かず、面と光沢だけで特殊鋼の質感を出す。読みやすさ優先。 */
.grain {
  overflow: hidden;
  background:
    /* 研磨のヘアライン（極薄。近くで見ると分かる程度） */
    repeating-linear-gradient(102deg, #0f172a0d 0 0.5px, transparent 0.5px 5px),
    /* クールなメタルの地色（淡いスチール） */
    linear-gradient(118deg, #e6ebf3 0%, #f2f5fa 34%, #dfe6ef 64%, #edf1f7 100%);
}
.grain::after { /* 通り過ぎる光の反射（ゆっくり一度流れて、長く休む） */
  content: ""; position: absolute; top: -30%; bottom: -30%; left: -60%; width: 55%;
  background: linear-gradient(105deg, #ffffff00 0%, #ffffff00 42%, #ffffffCC 50%, #ffffff00 58%, #ffffff00 100%);
  transform: skewX(-12deg);
  animation: steel-sheen 11s var(--ease) infinite;
}
@keyframes steel-sheen {
  0%   { left: -60%; opacity: 0; }
  6%   { opacity: 0.6; }
  26%  { opacity: 0.6; }
  32%  { left: 135%; opacity: 0; }
  100% { left: 135%; opacity: 0; }
}

.fluid-blob {
  position: absolute; border-radius: 50%;
  filter: blur(45px); pointer-events: none; z-index: 0;
}
.fluid-blob--red {
  width: 46vw; height: 46vw; max-width: 620px; max-height: 620px;
  left: -12vw; top: -10vw;
  background: radial-gradient(circle at 40% 40%, rgba(200,16,46,0.1), transparent 70%);
  animation: blob-a 13s ease-in-out infinite alternate;
}
.fluid-blob--blue {
  width: 50vw; height: 50vw; max-width: 680px; max-height: 680px;
  right: -14vw; bottom: -12vw;
  background: radial-gradient(circle at 60% 60%, rgba(30,79,184,0.07), transparent 70%);
  animation: blob-b 17s ease-in-out infinite alternate;
}
@keyframes blob-a {
  50%  { transform: translate(11vw, 8vw) scale(1.25); }
  100% { transform: translate(-6vw, 14vw) scale(0.9); }
}
@keyframes blob-b {
  50%  { transform: translate(-12vw, -7vw) scale(1.18); }
  100% { transform: translate(8vw, -15vw) scale(1.3); }
}

/* ============ 動きを減らす設定への配慮 ============ */
@media (prefers-reduced-motion: reduce) {
  .reveal, .eyebrow .line { opacity: 1; transform: none; transition: none; }
  .grain::after, .fluid-blob { animation: none; }
  .grain::after { opacity: 0.35; }
  .gallery .panel, .card, .btn, .pill { transition: none; }
  .story-hero h1 .st { animation: none; opacity: 1; transform: none; filter: none; }
  .scroll-cue::after { animation: none; transform: scaleY(1); }
  .job-panel { transition: none; }
}

/* ═══ 熱の履歴（#thermal） ═══
   千度まで上げて二百度まで戻す、という社名の主題を1枚で見せる面。
   --heat は thermal.js が 0..1 で更新する（20℃=0 / 1030℃=1）。
   色を温度に直結させているので、数字を読まなくても熱さが伝わる。 */
.thermal { --heat: 0; position: relative; height: 320vh; background: var(--navy, #0F172A); }
.thermal .th-sticky {
  position: sticky; top: 0; height: 100vh; display: grid; align-content: center;
  padding: 0 max(6vw, 24px); overflow: hidden;
}
/* 地の色。熱が上がるほど緋が滲む */
.thermal .th-sticky::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 50% 118%,
    rgba(192, 57, 43, calc(0.10 + var(--heat) * 0.62)) 0%, transparent 70%);
  transition: background 0.25s linear;
}
.thermal .inner { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; width: 100%; }
.thermal .eyebrow { color: rgba(255,255,255,0.55); }
.thermal h2 { color: #fff; font-family: var(--font-serif); font-size: clamp(22px, 3vw, 34px); letter-spacing: 0.04em; margin-bottom: 8px; }
.thermal .th-sub { color: rgba(255,255,255,0.6); font-size: 14px; margin-bottom: clamp(24px, 5vh, 56px); }

/* 温度。数字が主役なので、他のどの文字より大きくする */
.thermal .th-read { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.thermal .th-num {
  font-family: var(--font-mono); font-weight: 700; line-height: 0.9;
  font-size: clamp(72px, 17vw, 208px);
  color: color-mix(in srgb, #F5A623 calc(var(--heat) * 100%), #E8E6E1);
  font-variant-numeric: tabular-nums; /* 桁が変わっても横に暴れない */
}
.thermal .th-unit { font-family: var(--font-mono); font-size: clamp(20px, 3vw, 34px); color: rgba(255,255,255,0.7); }
.thermal .th-state {
  font-family: var(--font-serif); font-size: clamp(18px, 2.4vw, 28px); color: #fff;
  border-left: 2px solid var(--steel-red, #C0392B); padding-left: 14px; margin-left: 6px;
}
.thermal .th-note {
  margin-top: 20px; color: rgba(255,255,255,0.78); font-size: clamp(13px, 1.5vw, 16px);
  line-height: 2; max-width: 34em; min-height: 4em;
}

/* 進行バーと工程の目盛り */
.thermal .th-bar { margin-top: clamp(24px, 5vh, 48px); height: 2px; background: rgba(255,255,255,0.16); position: relative; }
.thermal .th-bar span { position: absolute; inset: 0 auto 0 0; background: var(--steel-red, #C0392B); width: 0; }
.thermal .th-stages { display: flex; justify-content: space-between; margin-top: 12px; }
.thermal .th-stage {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em;
  color: rgba(255,255,255,0.38); transition: color 0.3s ease;
}
.thermal .th-stage.on { color: #fff; }

@media (max-width: 640px) {
  .thermal { height: 280vh; }
  .thermal .th-state { display: block; margin: 12px 0 0; margin-left: 0; }
}
/* 動きを減らす設定では固定表示。数字は演出ではなく情報なので内容は落とさない */
@media (prefers-reduced-motion: reduce) {
  .thermal { height: auto; }
  .thermal .th-sticky { position: static; height: auto; padding-top: 12vh; padding-bottom: 12vh; }
}

/* ═══ ヒーローの写真パネルを面取りにする ═══
   鋼種カード（.grade）が「右上をCNCで落とした切り口」を持っているのに、
   一番目につくヒーローが角丸の長方形のままだった。同じ形を2箇所目に置いて
   初めて「言語」になる（1箇所だけだと偶然に見える）。

   ★ 四隅すべて落とす八角にはしなかった
     パネルは 271×600 の縦長で、四隅を落とすと上下が尖った柱に見える。
     ビレット（角を落とした八角の鋼片）に読めないなら、ただの変わった形になる。
     八角は .chamfer（事業カードの矢印）のような正方形に近い要素の担当。 */
.gallery .panel {
  position: relative;
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
}
/* 切断面の緋。.grade と同じ作り方で、角に置いた正方形を45°回し、
   clip-path で切り残った三角形だけが切り口として見える。 */
.gallery .panel::after {
  content: ""; position: absolute; top: -23px; right: -23px;
  width: 46px; height: 46px;
  background: var(--steel-red);
  transform: rotate(45deg);
  opacity: 0; transition: opacity 0.7s ease;
}
/* 3枚とも緋にすると accent が accent でなくなる。開いている1枚だけに出す。 */
.gallery .panel.active::after { opacity: 1; }

/* ── 見出しが、自分の言っていることを実演する ──
   「同じ鉄が、」は一度も動かない。動くのは述語だけ。
   読んでいる文そのものが「同じものが別のものになる」を演じる。
   演出を足したのではなく、既にある文を動かしただけ。 */
.thermal .th-line { display: flex; flex-wrap: wrap; align-items: baseline; }
.thermal .th-fixed { white-space: nowrap; }   /* ここは絶対に動かさない */
.thermal .th-verb {
  position: relative; display: inline-block; overflow: hidden;
  vertical-align: bottom;
  /* 幅と高さを文字に追従させる。行が飛ばないよう最低1行分は確保する */
  min-height: 1.5em;
  /* ★ flex アイテムとして縮ませない。overflow:hidden があると自動最小幅が 0 になり、
     狭い幅では折り返さずに述語が切れてしまう。縮まなければ次の行へ回る。 */
  flex-shrink: 0;
}
.thermal .th-verb .w { display: inline-block; white-space: nowrap; }
/* 入れ替わりは縦の送り。焼入れの温度計と同じ「目盛りが回る」所作に揃える */
.thermal .th-verb .w.out { animation: verb-out 0.26s var(--ease) forwards; }
.thermal .th-verb .w.in  { animation: verb-in  0.30s var(--ease) 0.08s backwards; }
@keyframes verb-out { to { transform: translateY(-0.55em); opacity: 0; } }
@keyframes verb-in  { from { transform: translateY(0.55em); opacity: 0; } }
/* 述語だけ熱を持つ。主語は白のまま動かない */
.thermal .th-verb .w {
  color: color-mix(in srgb, #F5A623 calc(var(--heat) * 78%), #ffffff);
  transition: color 0.3s linear;
}
@media (prefers-reduced-motion: reduce) {
  .thermal .th-verb .w.out, .thermal .th-verb .w.in { animation: none; }
}

/* 鋼片の3D。文字の後ろ、地の色の上。読みやすさを壊さないよう右に寄せる */
.thermal .th3d {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* 文字は左に寄っているので、鋼片は右半分に置いて重ならないようにする */
  left: auto; width: min(52%, 720px);
  opacity: 0.95;
}
.thermal .th3d canvas { width: 100% !important; height: 100% !important; display: block; }
@media (max-width: 900px) {
  /* 狭い画面では文字の後ろに回る。薄くして可読性を優先する */
  .thermal .th3d { width: 100%; opacity: 0.38; }
}

/* ============ 未実装ページへのリンク ============ */
/* 作品として作ったのは7ページで、ナビとフッターにはそれ以外の項目も並んでいる。
   情報設計として見せたい部分なので項目は残すが、href="#" のままだと押した瞬間に
   ページ先頭へ飛ぶ。「まだ作っていない」ではなく「壊れている」ように見えてしまう。
   href を外して不活性にしたうえで、ホバーの反応も止める。
   反応するのに押しても何も起きないのが、一番たちが悪いため。 */
a.is-stub { cursor: default; }

.btn--primary.is-stub:hover {
  transform: none;
  box-shadow: none;
  filter: none;
}

.footer .sns a.is-stub:hover {
  border-color: #334155;
  color: var(--text-invert-sub);
  background: none;
}

.footer .sitemap a.is-stub:hover { color: var(--text-invert-sub); }