/*
 * 株式会社ヨシダウェルディング トップページ
 * コンセプト: 暗所のアーク × 図面 × 銘板。写真3点（同一撮影のアーク光）を
 * タイポグラフィ主導で持たせる。ロゴ実測色 #b81b25 を主色、アーク青を差し色に。
 * 欧文ディスプレイ=Anton / 和文=Noto Sans JP / 代表挨拶=Shippori Mincho B1（縦書き）
 */

:root {
    --red: #b81b25;
    --red-hot: #e8323c;
    --arc: #8fd8ff;
    --hot-core: #fff6e8;
    --ink: #06070a;
    --ink-2: #0a0c11;
    --steel: #10131a;
    --steel-2: #171b23;
    --cell: #0d1016;
    --line: rgba(233, 238, 244, .14);
    --line-soft: rgba(233, 238, 244, .07);
    --paper: #edf1f5;
    --muted: #8f99a6;
    --disp: "Anton", "Arial Narrow", "Noto Sans JP", sans-serif;
    --sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
    --mono: "SFMono-Regular", "Roboto Mono", ui-monospace, monospace;
    --gutter: clamp(20px, 5vw, 100px);
    --max: 1320px;
}

* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    background: var(--ink);
    /* hiddenは不可: 片軸hiddenはスクロールコンテナ化し、右端にスクロールバー幅の
       死に帯が出る（2026-07-28の黒帯の真因）。clipはその副作用がない */
    overflow-x: clip;
}

body {
    margin: 0;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--sans);
    font-feature-settings: "palt";
    line-height: 1.85;
    overflow-x: clip;
}

img { display: block; max-width: 100%; }
/* UA既定の figure{margin:1em 40px} が、position:relative になった途端に
   左右40pxの余白として出る（スマホのヒーローで発生）。全体で落とす */
figure { margin: 0; }
a { color: inherit; text-decoration: none; }
a, button { -webkit-tap-highlight-color: transparent; }

::selection { background: var(--red); color: #fff; }

:where(a, button):focus-visible {
    outline: 2px solid var(--red-hot);
    outline-offset: 3px;
}

.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.wrap {
    width: min(100%, var(--max));
    margin-inline: auto;
    padding-inline: var(--gutter);
    position: relative;
}

/* ---------- 常時オーバーレイ（図面の罫線＋粒子ノイズ） ---------- */

.deco-grid {
    position: fixed; inset: 0;
    z-index: 90;
    pointer-events: none;
    background-image: linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
    background-size: calc(100% / 6) 100%;
    opacity: .45;
}

.deco-noise {
    position: fixed; inset: 0;
    z-index: 91;
    pointer-events: none;
    opacity: .035;
    /* 彩度0にしないと暗部でカラフルな粒が浮く */
    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='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- スクロール進捗 ---------- */

.progress {
    position: fixed;
    top: 0; left: 0;
    z-index: 300;
    height: 2px;
    width: 100%;
    /* scaleXだとグラデーションごと潰れるのでclipで開く */
    clip-path: inset(0 calc((1 - var(--p, 0)) * 100%) 0 0);
    background: linear-gradient(90deg, var(--red), var(--red-hot) 60%, var(--arc));
}

/* ---------- ヘッダー ---------- */

.head {
    position: fixed;
    top: 0; right: 0; left: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px var(--gutter);
    transition: background .4s ease, backdrop-filter .4s ease, padding .4s ease;
}

.head.is-stuck {
    padding-block: 10px;
    background: rgba(6, 7, 10, .85);
    backdrop-filter: blur(14px) saturate(1.2);
    border-bottom: 1px solid var(--line);
}

.head__logo { display: flex; align-items: center; gap: 12px; }
.head__logo img { width: clamp(34px, 4vw, 44px); height: auto; }
.head__logo b {
    font-family: var(--disp);
    font-weight: 400;
    font-size: clamp(14px, 1.3vw, 17px);
    letter-spacing: .14em;
}

.head__nav { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 34px); }
.head__nav a {
    position: relative;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .16em;
    color: var(--muted);
    transition: color .25s ease;
}
.head__nav a b { font-weight: 400; color: var(--red-hot); margin-right: 7px; }
.head__nav a::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: -6px;
    height: 1px; background: var(--red-hot);
    transform: scaleX(0); transform-origin: right;
    transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.head__nav a:hover { color: var(--paper); }
.head__nav a:hover::after { transform: scaleX(1); transform-origin: left; }

.head__cta {
    padding: 10px 20px;
    background: var(--red);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    transition: background .25s ease, transform .25s ease;
}
.head__cta:hover { background: var(--red-hot); transform: translateY(-2px); }

/* ---------- ヒーロー ---------- */

.hero {
    position: relative;
    min-height: 100svh;
    display: grid;
    align-content: end;
    padding: 0 var(--gutter) clamp(90px, 12vh, 150px);
    overflow: hidden; /* overflow:clip 未対応ブラウザ用（無効だとガードが外れ横に膨らむ） */
    overflow: clip;
    isolation: isolate;
}

.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: 62% 42%;
    transform: scale(1.06) translateY(var(--hero-shift, 0px));
    will-change: transform;
    animation: strike 1.9s cubic-bezier(.25, .6, .3, 1) both;
}

/* アークが点くまでの明滅 */
@keyframes strike {
    0%   { filter: saturate(0) contrast(1.2) brightness(0); }
    12%  { filter: saturate(1.15) contrast(1.12) brightness(1.5); }
    22%  { filter: saturate(.9) contrast(1.12) brightness(.4); }
    34%  { filter: saturate(1.1) contrast(1.1) brightness(1.2); }
    100% { filter: saturate(1.05) contrast(1.1) brightness(.82); }
}

.hero::before {
    content: "";
    position: absolute; inset: 0; z-index: 1;
    background:
        radial-gradient(46% 40% at 74% 62%, rgba(143, 216, 255, .16), transparent 70%),
        linear-gradient(180deg, rgba(6, 7, 10, .8) 0 10%, rgba(6, 7, 10, .1) 42%, rgba(6, 7, 10, .96) 100%),
        linear-gradient(95deg, rgba(6, 7, 10, .88), rgba(6, 7, 10, .08) 62%);
}

/* 図面ラベル（枠線と赤角マーカーは「いらない」指示で撤去済み。下辺の表記のみ） */
.hero__frame {
    position: absolute;
    inset: clamp(14px, 2vw, 26px);
    z-index: 5;
    pointer-events: none;
}
.hero__frame span {
    position: absolute;
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: .22em;
    color: rgba(233, 238, 244, .6);
    white-space: nowrap;
}
/* 上辺は固定ヘッダーと重なるのでラベルは下辺のみ */
.hf--bl { bottom: 10px; left: 14px; }
.hf--br { bottom: 10px; right: 14px; }

/* 背後の巨大アウトライン社名 */
.hero__ghost {
    position: absolute;
    left: calc(var(--gutter) * .6);
    bottom: 34vh;
    z-index: 2;
    margin: 0;
    font-family: var(--disp);
    font-size: clamp(90px, 17vw, 260px);
    line-height: .92;
    letter-spacing: .02em;
    white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: 1px rgba(233, 238, 244, .13);
    transform: translateX(var(--ghost-x, 0px));
    pointer-events: none;
    user-select: none;
}

/* canvasは置換要素なのでinsetだけだと300x150の固有サイズで左上に置かれる。width/height必須 */
.hero__sparks { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; pointer-events: none; }

.hero__inner {
    position: relative;
    z-index: 3;
    width: min(100%, var(--max));
    margin-inline: auto;
}

.hero__eyebrow {
    display: flex; align-items: center; gap: 14px;
    margin: 0 0 24px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .3em;
    color: var(--arc);
}
.hero__eyebrow::before {
    content: ""; width: clamp(30px, 5vw, 64px); height: 1px;
    background: currentColor;
}
.hero__eyebrow::after {
    content: ""; width: 8px; height: 13px;
    background: var(--arc);
    animation: blink 1.15s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.hero h1 {
    margin: 0 0 26px;
    font-size: clamp(46px, 9.4vw, 148px);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: .01em;
}
.hl { display: block; overflow: hidden; overflow: clip; }
.hero h1 .hl:nth-child(2) { padding-left: .5em; }
.hero h1 .hl:nth-child(3) { padding-left: 1em; }

/* 1文字ずつ下から（サーバ側で --i を振る） */
.ch {
    display: inline-block;
    transform: translateY(1.2em);
    opacity: 0;
}
.rise-chars.on .ch {
    transform: none;
    opacity: 1;
    transition:
        transform 1s cubic-bezier(.16, 1, .3, 1) calc(var(--i, 0) * .045s + .1s),
        opacity .7s ease calc(var(--i, 0) * .045s + .1s);
}

.hero__lead {
    max-width: 34em;
    margin: 0 0 40px;
    font-size: clamp(14px, 1.25vw, 18px);
    color: rgba(237, 241, 245, .84);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .9s ease .85s, transform .9s ease .85s;
}
.is-ready .hero__lead { opacity: 1; transform: none; }

.hero__actions {
    display: flex; flex-wrap: wrap; gap: 12px;
    opacity: 0; transform: translateY(16px);
    transition: opacity .9s ease 1s, transform .9s ease 1s;
}
.is-ready .hero__actions { opacity: 1; transform: none; }

.btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 16px 30px;
    font-size: 13px; font-weight: 700; letter-spacing: .12em;
    border: 1px solid transparent;
    transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.btn--solid { background: var(--red); color: #fff; }
.btn--solid:hover { background: var(--red-hot); transform: translateY(-3px); }
.btn--ghost { border-color: var(--line); color: var(--paper); }
.btn--ghost:hover { background: var(--paper); color: var(--ink); transform: translateY(-3px); }

.hero__scroll {
    position: absolute;
    right: calc(var(--gutter) + 6px);
    bottom: clamp(60px, 10vh, 120px);
    z-index: 5;
    display: grid; gap: 10px; justify-items: center;
    font-family: var(--mono); font-size: 9px; letter-spacing: .28em;
    color: var(--muted);
    writing-mode: vertical-rl;
}
.hero__scroll i { display: block; width: 1px; height: 64px; background: var(--line); overflow: hidden; }
.hero__scroll i::after {
    content: ""; display: block; width: 1px; height: 26px; background: var(--red-hot);
    animation: drop 2.1s ease-in-out infinite;
}
@keyframes drop { 0% { transform: translateY(-30px); } 55%, 100% { transform: translateY(70px); } }

/* ---------- 流れる帯（傾けて走らせる） ---------- */

.mq {
    overflow: hidden; /* overflow:clip 未対応ブラウザ用（無効だとガードが外れ横に膨らむ） */
    overflow: clip;
    padding-block: clamp(30px, 4vw, 60px);
    background: var(--ink);
}
.marquee {
    width: 104%;
    margin-left: -2%;
    transform: rotate(-1.4deg);
    border-block: 1px solid var(--line);
    background: linear-gradient(180deg, var(--steel), var(--steel-2));
    padding-block: clamp(14px, 1.6vw, 22px);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: slide 30s linear infinite;
}
.marquee__track > span {
    display: inline-flex;
    align-items: center;
    padding-inline: clamp(16px, 2.2vw, 34px);
    white-space: nowrap;
}
.mq-ja {
    font-weight: 900;
    font-size: clamp(20px, 3vw, 40px);
    letter-spacing: .05em;
    color: var(--paper);
}
.mq-en {
    font-family: var(--disp);
    font-size: clamp(22px, 3.4vw, 46px);
    letter-spacing: .05em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(233, 238, 244, .38);
}
.mq-dot { color: var(--red-hot); font-size: clamp(8px, 1vw, 12px); }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- セクション共通 ---------- */

.sec {
    position: relative;
    padding-block: clamp(90px, 13vw, 210px);
    overflow: hidden; /* overflow:clip 未対応ブラウザ用（無効だとガードが外れ横に膨らむ） */
    overflow: clip;
}
.sec--steel { background: var(--steel); }
.sec--tight { padding-block: clamp(64px, 8vw, 130px); }

.sec__head { position: relative; margin-bottom: clamp(40px, 5vw, 80px); }
.kicker {
    display: flex; align-items: center; gap: 14px;
    margin: 0 0 18px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .3em;
    color: var(--red-hot);
}
.kicker::before { content: ""; width: 34px; height: 1px; background: var(--red-hot); }
.kicker::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.sec h2 {
    margin: 0;
    font-size: clamp(30px, 5vw, 72px);
    font-weight: 900;
    line-height: 1.16;
    letter-spacing: .005em;
}
.sec__lead {
    max-width: 46em;
    margin: 20px 0 0;
    color: var(--muted);
    font-size: clamp(14px, 1.1vw, 16.5px);
}

/* 背後を流れる巨大アウトライン英字 */
.ghost {
    position: absolute;
    top: clamp(16px, 3vw, 48px);
    right: calc(var(--gutter) * -.5);
    margin: 0;
    font-family: var(--disp);
    font-size: clamp(84px, 17vw, 250px);
    line-height: 1;
    letter-spacing: .02em;
    white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: 1px rgba(233, 238, 244, .08);
    transform: translateX(var(--gx, 0px));
    pointer-events: none;
    user-select: none;
}

/* 画面に入ったら出す */
.rise { opacity: 0; transform: translateY(34px); }
.rise.on {
    opacity: 1; transform: none;
    transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1);
}
.rise.on:nth-child(2) { transition-delay: .07s; }
.rise.on:nth-child(3) { transition-delay: .14s; }
.rise.on:nth-child(4) { transition-delay: .21s; }

/* ---------- 事業（フルワイドの行） ---------- */

.svc { border-top: 1px solid var(--line); }
.svc__row {
    position: relative;
    display: grid;
    grid-template-columns: clamp(48px, 6vw, 90px) minmax(0, 1.2fr) minmax(0, 1fr) clamp(40px, 4vw, 70px);
    gap: clamp(14px, 2.5vw, 44px);
    align-items: center;
    padding: clamp(28px, 3.8vw, 56px) clamp(6px, 1vw, 18px);
    border-bottom: 1px solid var(--line);
}
.svc__row::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(100deg, rgba(184, 27, 37, .16), transparent 62%);
    opacity: 0;
    transition: opacity .5s ease;
}
.svc__row::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, var(--red), var(--red-hot) 55%, var(--arc));
    transform: scaleX(0); transform-origin: left;
    transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
.svc__row:hover::before { opacity: 1; }
.svc__row:hover::after { transform: scaleX(1); }
.svc__row > * { position: relative; }

.svc__no { font-family: var(--mono); font-size: clamp(12px, 1.2vw, 14px); color: var(--muted); }
.svc__en {
    margin: 0 0 6px;
    font-family: var(--disp);
    font-size: clamp(11px, 1.15vw, 14px);
    letter-spacing: .3em;
    color: var(--red-hot);
}
.svc__row h3 {
    margin: 0;
    font-size: clamp(24px, 3.4vw, 48px);
    font-weight: 900;
    line-height: 1.2;
}
.svc__desc { margin: 0; color: var(--muted); font-size: clamp(13px, 1.05vw, 15px); }
.svc__arrow {
    justify-self: end;
    font-size: clamp(22px, 2.6vw, 40px);
    color: var(--muted);
    transition: transform .4s cubic-bezier(.2, .8, .2, 1), color .4s ease;
}
.svc__row:hover .svc__arrow { transform: translateX(10px); color: var(--red-hot); }

/* ---------- 写真の帯（アーク温度） ---------- */

.band {
    position: relative;
    height: clamp(280px, 38vw, 520px);
    overflow: hidden; /* overflow:clip 未対応ブラウザ用（無効だとガードが外れ横に膨らむ） */
    overflow: clip;
    /* 写真なし。鋼板の上で溶接アニメーションだけを見せる */
    border-block: 1px solid var(--line-soft);
    background:
        radial-gradient(46% 58% at 50% 56%, rgba(143, 216, 255, .07), transparent 72%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .014) 0 2px, transparent 2px 6px),
        linear-gradient(180deg, var(--ink) 0, var(--steel) 16%, var(--steel) 84%, var(--ink) 100%);
}
/* 溶接アニメーション（アークが横切りビードが残る）はJSがここへ描く */
.band__weld {
    position: absolute; inset: 0;
    z-index: 3;
    width: 100%; height: 100%;
    pointer-events: none;
}
.band__cap {
    position: absolute; z-index: 2;
    left: var(--gutter); bottom: clamp(18px, 3vw, 40px);
    margin: 0;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .22em;
    color: rgba(237, 241, 245, .82);
}
.band__tag {
    position: absolute; z-index: 2;
    right: var(--gutter); top: clamp(18px, 3vw, 40px);
    margin: 0;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .22em;
    color: rgba(237, 241, 245, .6);
}

/* ---------- 仕様銘板（数字） ---------- */

.plate {
    position: relative;
    border: 1px solid rgba(233, 238, 244, .3);
    background-image:
        radial-gradient(circle, rgba(240, 245, 250, .4) 2px, rgba(240, 245, 250, .12) 3px, transparent 4.5px),
        radial-gradient(circle, rgba(240, 245, 250, .4) 2px, rgba(240, 245, 250, .12) 3px, transparent 4.5px),
        radial-gradient(circle, rgba(240, 245, 250, .4) 2px, rgba(240, 245, 250, .12) 3px, transparent 4.5px),
        radial-gradient(circle, rgba(240, 245, 250, .4) 2px, rgba(240, 245, 250, .12) 3px, transparent 4.5px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .018) 0 2px, transparent 2px 5px),
        linear-gradient(180deg, var(--steel-2), var(--steel));
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, no-repeat;
    background-size: 22px 22px, 22px 22px, 22px 22px, 22px 22px, auto, auto;
    background-position:
        8px 8px,
        calc(100% - 8px) 8px,
        8px calc(100% - 8px),
        calc(100% - 8px) calc(100% - 8px),
        0 0, 0 0;
}
.plate::before {
    content: "";
    position: absolute; inset: 7px;
    border: 1px solid var(--line-soft);
    pointer-events: none;
}
.plate__head {
    display: flex; flex-wrap: wrap; gap: 10px 24px;
    justify-content: space-between;
    padding: 16px clamp(18px, 3vw, 34px);
    border-bottom: 1px solid var(--line);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .24em;
    color: var(--muted);
}

.stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.stat {
    padding: clamp(28px, 3.4vw, 50px) clamp(16px, 2.4vw, 34px);
}
.stat + .stat { border-left: 1px solid var(--line-soft); }
.stat b {
    display: block;
    font-family: var(--disp);
    font-weight: 400;
    font-size: clamp(38px, 5.4vw, 82px);
    line-height: 1;
    letter-spacing: .02em;
}
.stat b i { font-style: normal; font-size: .4em; color: var(--red-hot); margin-left: .14em; }
/* ラベルは直下のspanだけ（b内のカウンターspanを巻き込まない） */
.stat > span {
    display: block; margin-top: 14px;
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; color: var(--muted);
}

/* ---------- 工程（溶接シームのタイムライン） ---------- */

.flow {
    --pad: clamp(44px, 6vw, 76px);
    position: relative;
    max-width: 940px;
    margin-top: clamp(24px, 3vw, 48px);
    padding-left: var(--pad);
}
.flow__seam {
    position: absolute;
    left: 8px; top: 8px; bottom: 8px;
    width: 2px;
    background: var(--line-soft);
}
.flow__fill {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, var(--red), var(--red-hot));
    transform: scaleY(var(--seam, 0));
    transform-origin: top;
}
.flow__tip {
    position: absolute;
    left: 50%; top: -5px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--hot-core);
    box-shadow:
        0 0 10px 2px rgba(255, 224, 180, .9),
        0 0 26px 8px rgba(232, 50, 60, .55),
        0 0 48px 18px rgba(143, 216, 255, .22);
    transform: translate(-50%, 0);
}

.flow__row {
    position: relative;
    display: grid;
    grid-template-columns: clamp(58px, 6.6vw, 104px) minmax(0, 1fr);
    gap: clamp(16px, 3vw, 46px);
    align-items: baseline;
    padding-block: clamp(22px, 2.8vw, 40px);
    border-bottom: 1px solid var(--line-soft);
    transition: background .4s ease;
}
.flow__row:hover { background: rgba(23, 27, 35, .6); }
.flow__row::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--pad) + 5px);
    top: clamp(34px, 4vw, 56px);
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--steel-2);
    border: 1px solid var(--line);
    transition: background .5s ease, box-shadow .5s ease;
}
.flow__row.on::before {
    background: var(--red-hot);
    box-shadow: 0 0 12px rgba(232, 50, 60, .8);
}
.flow__no {
    font-family: var(--disp);
    font-size: clamp(26px, 3.4vw, 52px);
    color: rgba(237, 241, 245, .14);
    transition: color .4s ease;
}
.flow__row:hover .flow__no { color: var(--red-hot); }
.flow__body h3 { margin: 0 0 8px; font-size: clamp(17px, 1.7vw, 23px); font-weight: 700; }
.flow__body p { margin: 0; color: var(--muted); font-size: 14px; }

/* ---------- 工場ストリップ（3枚並び）
   現在マークアップ側は未使用。写真はユーザーの番号指定待ち。
   再開時は tools/yw_build_photos.py で生成して .strip / .q__photo / .co を復帰 ---------- */

.strip {
    background: var(--ink);
    padding-block: 0 clamp(70px, 9vw, 140px);
}
.strip__kicker {
    display: flex; align-items: center; gap: 14px;
    margin: 0 0 18px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .3em;
    color: var(--muted);
}
.strip__kicker::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.strip__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(10px, 1.2vw, 18px);
}
.strip__item {
    margin: 0;
    border: 1px solid var(--line);
    background: var(--steel);
    overflow: hidden; /* overflow:clip 未対応ブラウザ用（無効だとガードが外れ横に膨らむ） */
    overflow: clip;
}
.strip__item img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    filter: saturate(.9) brightness(.88);
    transition: transform 1s cubic-bezier(.16, 1, .3, 1), filter .5s ease;
}
.strip__item:hover img { transform: scale(1.05); filter: saturate(1.05) brightness(1); }
.strip__item figcaption {
    padding: 10px 14px;
    border-top: 1px solid var(--line);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .2em;
    color: var(--muted);
}

/* ---------- 品質（写真を文字に流し込む） ---------- */

.q__top {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr);
    gap: clamp(28px, 4.5vw, 80px);
    align-items: center;
}
.q__top .sec__head { margin-bottom: 0; }
.q__photo {
    margin: 0;
    border: 1px solid var(--line);
    background: var(--ink-2);
}
.q__photo img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    filter: saturate(.95) contrast(1.04) brightness(.94);
}
.q__photo figcaption {
    padding: 10px 14px;
    border-top: 1px solid var(--line);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .2em;
    color: var(--muted);
}

.q__title {
    margin: 0;
    font-size: clamp(42px, 8vw, 120px);
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: .01em;
}
.q__title .fire {
    display: inline-block;
    /* 溶けた金属の色（青白→白熱→橙→赤）を文字の中で揺らす。写真は使わない */
    background-image: linear-gradient(100deg,
        var(--arc) 0%, #eaf6ff 20%, #fff 36%,
        #ffd9a0 52%, #ff8a3c 68%, var(--red-hot) 86%, var(--red) 100%);
    background-size: 240% 100%;
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    -webkit-text-stroke: 1px rgba(190, 228, 255, .22);
    animation: fire-pan 5.5s ease-in-out infinite alternate;
}
@keyframes fire-pan {
    from { background-position: 0% 50%; }
    to   { background-position: 100% 50%; }
}
@supports not (-webkit-background-clip: text) {
    .q__title .fire { color: var(--paper); background: none; animation: none; }
}

/* CSSだけのTIGビード（うろこ模様＋終端の溶融池） */
.bead {
    position: relative;
    height: clamp(18px, 2.2vw, 28px);
    margin: clamp(40px, 5vw, 70px) 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(233, 238, 244, .18);
    background:
        /* 冷えた側は鈍く、溶融池に向かって熱色→白熱 */
        linear-gradient(90deg,
            rgba(13, 17, 23, .45) 0 30%,
            rgba(13, 17, 23, .18) 48%,
            rgba(143, 216, 255, .3) 70%,
            rgba(190, 110, 220, .38) 82%,
            rgba(255, 150, 60, .65) 93%,
            rgba(255, 240, 220, .95)),
        radial-gradient(140% 190% at 32% 46%, #f4f8fc 0 26%, #c2cdd8 46%, #7a8695 64%, #3c454f 74%, rgba(0, 0, 0, 0) 75%) 0 0 / 15px 100% repeat-x,
        linear-gradient(180deg, #4a545f, #1a1f27);
    box-shadow:
        0 10px 26px rgba(0, 0, 0, .55),
        0 0 22px rgba(255, 150, 70, .12),
        inset 0 1px 0 rgba(255, 255, 255, .3);
}
.bead::after {
    content: "";
    position: absolute;
    right: -5px; top: 50%;
    width: 26px; height: 26px;
    border-radius: 50%;
    transform: translateY(-50%);
    background: radial-gradient(circle, #fff 0 22%, #ffd9a0 42%, rgba(255, 130, 55, .55) 62%, transparent 72%);
    filter: blur(1px);
    box-shadow: 0 0 30px 10px rgba(255, 150, 70, .35), 0 0 60px 24px rgba(232, 50, 60, .16);
    animation: pool 2.4s ease-in-out infinite;
}
@keyframes pool { 50% { transform: translateY(-50%) scale(1.18); } }
.bead-cap {
    margin: 0 0 clamp(36px, 4.6vw, 64px);
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .22em;
    color: var(--muted);
    text-align: right;
}

.q__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(12px, 1.4vw, 22px);
}
.q__item {
    padding: clamp(24px, 2.8vw, 38px);
    background: var(--ink-2);
    border: 1px solid var(--line);
    transition: transform .45s cubic-bezier(.16, 1, .3, 1), border-color .45s ease;
}
.q__item:hover { transform: translateY(-6px); border-color: rgba(232, 50, 60, .5); }
.q__item small {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .24em;
    color: var(--red-hot);
}
.q__item h3 { margin: 14px 0 10px; font-size: clamp(17px, 1.6vw, 22px); font-weight: 700; }
.q__item p { margin: 0; color: var(--muted); font-size: 13.5px; }

/* ---------- 会社概要（図面の表題欄） ---------- */

.docbar {
    display: flex; flex-wrap: wrap; gap: 8px 28px;
    justify-content: space-between;
    padding: 12px clamp(14px, 2vw, 22px);
    border: 1px solid var(--line);
    border-bottom: 0;
    background: var(--steel-2);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .2em;
    color: var(--muted);
}
.info {
    display: grid;
    gap: 1px;
    margin: 0;
    border: 1px solid var(--line);
    background: var(--line);
}
.info__row {
    display: grid;
    grid-template-columns: clamp(130px, 17vw, 250px) minmax(0, 1fr);
    gap: 1px;
}
.info__row dt {
    margin: 0;
    padding: 16px clamp(14px, 2vw, 22px);
    background: var(--steel-2);
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .16em;
    color: var(--muted);
    display: grid;
    align-content: center;
    gap: 2px;
}
.info__row dt b { font-weight: 400; color: rgba(237, 241, 245, .38); font-size: 9px; }
.info__row dd {
    margin: 0;
    padding: 16px clamp(16px, 2.2vw, 26px);
    background: var(--cell);
    font-size: 15px;
    display: grid;
    align-content: center;
}

.co {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, .75fr);
    gap: clamp(24px, 4vw, 64px);
    align-items: start;
}
.co__photo {
    margin: 0;
    border: 1px solid var(--line);
    background: var(--cell);
}
.co__photo img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    filter: brightness(.95);
}
.co__photo figcaption {
    padding: 10px 14px;
    border-top: 1px solid var(--line);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .2em;
    color: var(--muted);
}

/* ---------- 沿革 ---------- */

.hist { border-top: 1px solid var(--line); margin-top: clamp(18px, 2vw, 30px); }
.hist__row {
    display: grid;
    grid-template-columns: clamp(84px, 10vw, 160px) minmax(0, 1fr);
    gap: clamp(14px, 3vw, 44px);
    align-items: baseline;
    padding: clamp(16px, 2vw, 26px) 0;
    border-bottom: 1px solid var(--line);
}
.hist__year {
    font-family: var(--disp);
    font-size: clamp(18px, 2.2vw, 30px);
    letter-spacing: .04em;
    color: var(--red-hot);
}
.hist__row p { margin: 0; font-size: 15px; }

/* ---------- フッター ---------- */

.foot {
    position: relative;
    overflow: hidden; /* overflow:clip 未対応ブラウザ用（無効だとガードが外れ横に膨らむ） */
    overflow: clip;
    padding: clamp(44px, 6vw, 84px) var(--gutter) 26px;
    border-top: 1px solid var(--line);
}
.foot__mark {
    margin: 0 0 clamp(30px, 4vw, 60px);
    text-align: center;
    font-family: var(--disp);
    font-size: clamp(44px, 10.5vw, 168px);
    line-height: 1;
    letter-spacing: .04em;
    white-space: nowrap;
    color: transparent;
    /* 熱色を文字の中でゆっくり往復させ、余熱で光らせる */
    background-image: linear-gradient(100deg,
        var(--arc) 0%, #eaf6ff 18%, #fff 34%,
        #ffd9a0 50%, #ff8a3c 66%, var(--red-hot) 84%, var(--red) 100%);
    background-size: 240% 100%;
    -webkit-background-clip: text;
            background-clip: text;
    filter: drop-shadow(0 0 26px rgba(232, 90, 50, .3));
    animation: fire-pan 9s ease-in-out infinite alternate;
    user-select: none;
}
@supports not (-webkit-background-clip: text) {
    .foot__mark { color: rgba(237, 241, 245, .22); background: none; animation: none; filter: none; }
}
.foot__row {
    display: flex; flex-wrap: wrap; gap: 12px;
    justify-content: space-between;
    font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: var(--muted);
}

/* ---------- タブレット以下 ---------- */

@media (max-width: 900px) {
    .head__nav { display: none; }

    .svc__row {
        grid-template-columns: clamp(38px, 9vw, 56px) minmax(0, 1fr) 36px;
        align-items: start;
        row-gap: 10px;
    }
    .svc__no { grid-column: 1; grid-row: 1; padding-top: .5em; }
    .svc__main { grid-column: 2; grid-row: 1; }
    .svc__desc { grid-column: 2; grid-row: 2; }
    .svc__arrow { grid-column: 3; grid-row: 1; align-self: center; }

    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat + .stat { border-left: 0; }
    .stat:nth-child(even) { border-left: 1px solid var(--line-soft); }
    .stat:nth-child(n + 3) { border-top: 1px solid var(--line-soft); }

    .q__top { grid-template-columns: 1fr; }
    .q__photo { max-width: 440px; }
    .co { grid-template-columns: 1fr; }
    .co__photo { max-width: 440px; }
}

@media (max-width: 640px) {
    /* スマホは全画面背景をやめ、上=写真バンド／下=文字の2段構成。
       coverの過剰ズームと、写真の暗部が「左右の黒帯」に見える問題への根治 */
    .hero {
        min-height: 0;
        display: block;
        padding: 0 0 44px;
        /* 写真バンドの高さ。オーバーレイと火花canvasも同じ値を参照させ、
           数値をバラバラに書いてズレるのを防ぐ */
        --band: 37svh;
        --band-min: 244px;
    }
    .hero__media {
        position: relative;
        inset: auto;
        height: var(--band);
        min-height: var(--band-min);
    }
    .hero__media { overflow: clip; }
    /* バンド構成では cover だけで足りる。scale(1.06)+視差は枠からはみ出して
       「拡大されすぎ」に見えるので、スマホでは殺す */
    .hero__media img {
        position: absolute;
        inset: 0;
        object-position: 72% 45%;
        transform: none;
    }
    /* オーバーレイは写真バンドの範囲だけに掛ける */
    .hero::before {
        inset: auto auto auto 0;
        top: 0; width: 100%;
        height: calc(var(--band) + 44px);
        min-height: calc(var(--band-min) + 44px);
        background:
            radial-gradient(46% 40% at 74% 62%, rgba(143, 216, 255, .14), transparent 70%),
            linear-gradient(180deg, rgba(6, 7, 10, .62) 0 10%, rgba(6, 7, 10, .05) 45%, var(--ink) 96%);
    }
    .hero__sparks { inset: auto auto auto 0; top: 0; height: var(--band); min-height: var(--band-min); }
    .hero__inner { padding: 6px var(--gutter) 0; }
    .hero h1 { font-size: clamp(42px, 12.5vw, 58px); }
    .hero__scroll { display: none; }
    .hf--bl { display: none; }
    .hf--br { font-size: 8.5px; letter-spacing: .12em; }
    .hero__eyebrow { font-size: 9.5px; letter-spacing: .14em; gap: 10px; }
    .hero__eyebrow::before { width: 20px; }
    .hero__ghost { display: none; }
    .hero h1 .hl:nth-child(2) { padding-left: .35em; }
    .hero h1 .hl:nth-child(3) { padding-left: .7em; }

    .q__grid { grid-template-columns: 1fr; }
    .strip__grid { grid-template-columns: 1fr; }
    .flow { --pad: 38px; }
    .flow__row { grid-template-columns: 48px minmax(0, 1fr); gap: 14px; }
    .info__row { grid-template-columns: 1fr; }
    .info__row dt { padding-block: 10px 2px; }
    .hist__row { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; }
    .head__cta { padding: 9px 14px; font-size: 11px; }
    .band__tag { display: none; }
}

/* ---------- 動きを減らす設定 ---------- */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .rise { opacity: 1; transform: none; }
    .ch { transform: none; opacity: 1; }
    .hero__media img { animation: none; filter: saturate(1.05) contrast(1.1) brightness(.82); }
    .flow__fill { transform: scaleY(1); }
    .flow__tip { display: none; }
    .q__title .fire { animation: none; }
}