/* RN SHEET METAL INDUSTRY — prototype stylesheet (single dark world by design) */
@font-face { font-family: "RN Sans"; font-weight: 100; font-display: swap; src: url(../fonts/rn-sans-100.woff) format("woff"); }
@font-face { font-family: "RN Sans"; font-weight: 400; font-display: swap; src: url(../fonts/rn-sans-400.woff) format("woff"); }
@font-face { font-family: "RN Sans"; font-weight: 700; font-display: swap; src: url(../fonts/rn-sans-700.woff) format("woff"); }
@font-face { font-family: "RN Sans"; font-weight: 900; font-display: swap; src: url(../fonts/rn-sans-900.woff) format("woff"); }
@font-face { font-family: "RN Mono"; font-weight: 400; font-display: swap; src: url(../fonts/rn-mono-400.woff) format("woff"); }

:root {
  color-scheme: dark;
  --void: #06080b;
  --void-2: #0b0e12;
  --ink: #e9edf0;
  --mute: #8d979f;
  --faint: #58626a;
  --line: rgba(233, 237, 240, 0.14);
  --cyan: #1caed0;
  --cyan-hi: #62d9f0;
  --gut: clamp(18px, 3.2vw, 48px);
  --hd: 64px;
  --sans: "RN Sans", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --mono: "RN Mono", "SFMono-Regular", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html { background: var(--void); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--void); color: var(--ink); font-family: var(--sans); font-weight: 400; font-size: 16px; line-height: 1.8; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--cyan-hi); outline-offset: 4px; border-radius: 2px; }
[hidden] { display: none !important; }
.mono { font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; line-height: 1.6; }
.skip { position: fixed; left: var(--gut); top: 8px; z-index: 50; padding: 10px 14px; background: var(--ink); color: var(--void); text-decoration: none; font-weight: 700; transform: translateY(-160%); }
.skip:focus { transform: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------ canvas */
#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; display: block; z-index: 0; background: var(--void); touch-action: pan-y; }
.no-gl #gl, .rm .top #gl { display: none; }
.veil { position: fixed; inset: 0; z-index: 40; background: #000; opacity: 0; pointer-events: none; transition: opacity .26s ease; }
.is-leaving .veil { opacity: 1; }

/* ------------------------------------------------------------ header */
.hd { position: fixed; z-index: 30; left: 0; right: 0; top: 0; height: calc(var(--hd) + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) var(--gut) 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; opacity: 0; transform: translateY(-8px); transition: opacity .8s ease, transform .8s ease; }
.is-in .hd { opacity: 1; transform: none; }
.hd-mark { display: flex; align-items: center; gap: 12px; text-decoration: none; min-height: 44px; }
.hd-mark svg { width: 34px; height: auto; display: block; }
.hd-mark span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em; color: var(--mute); line-height: 1.35; }
.hd-nav { display: flex; align-items: center; gap: 4px; }
.hd-nav a { text-decoration: none; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; padding: 10px 12px; color: var(--mute); transition: color .2s; min-height: 44px; display: inline-flex; align-items: center; }
.hd-nav a:hover, .hd-nav a[aria-current="page"] { color: var(--ink); }
.hd-nav a[aria-current="page"] { box-shadow: inset 0 -1px 0 var(--cyan); }
.hd-nav .hd-sep { width: 1px; height: 16px; background: var(--line); margin: 0 8px; }
.hd-menu { display: none; appearance: none; background: none; border: 1px solid var(--line); color: var(--ink); font: 400 11px/1 var(--mono); letter-spacing: .22em; padding: 0 16px; height: 44px; border-radius: 22px; cursor: pointer; }
.menu { position: fixed; inset: 0; z-index: 29; background: rgba(6, 8, 11, .96); padding: calc(var(--hd) + env(safe-area-inset-top, 0px) + 24px) var(--gut) 32px; display: flex; flex-direction: column; gap: 6px; }
.menu a { text-decoration: none; display: grid; grid-template-columns: 1fr auto; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); }
.menu a b { font-size: 34px; font-weight: 900; letter-spacing: .02em; line-height: 1.2; }
.menu a small { font-family: var(--mono); font-size: 10px; letter-spacing: .22em; color: var(--mute); }
/* 3-29:会社概要・お問い合わせだけ小さくする .minor は廃止(6項目とも上の 34px / 900) */
@media (max-width: 860px) { .hd-nav { display: none; } .hd-menu { display: inline-flex; align-items: center; gap: 10px; } .hd-mark span { display: none; } }

/* ------------------------------------------------------------ top: track + stage */
/* 社名 → 3つの入口のスクロール距離:トラックの高さ − 1画面。PC 200vh→150vh、縦長 180vh→135vh(約75%) */
.track { position: relative; z-index: 2; height: 250vh; pointer-events: none; }
.is-portrait .track { height: 235vh; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; pointer-events: none; }
.stage a, .stage button { pointer-events: auto; }
.ov { position: absolute; inset: 0; visibility: hidden; }
.fallback { display: none; }

.ov-intro .cap { position: absolute; left: var(--gut); bottom: calc(28px + env(safe-area-inset-bottom, 0px)); margin: 0; color: var(--mute); }
.ov-intro .cap b { display: block; color: var(--ink); font-weight: 400; }
.ov-intro .hint { position: absolute; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--mute); }
.ov-intro .hint i { width: 1px; height: 44px; background: linear-gradient(var(--cyan), transparent); transform-origin: top; animation: drip 2.2s cubic-bezier(.6, 0, .2, 1) infinite; }
@keyframes drip { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
.ov-intro .jump { position: absolute; right: var(--gut); bottom: calc(22px + env(safe-area-inset-bottom, 0px)); color: var(--ink); text-decoration: none; padding: 12px 0; border-bottom: 1px solid var(--line); }

.ov-name .name { position: absolute; left: 55%; right: var(--gut); top: 50%; transform: translateY(-46%); }
.ov-name .kicker { margin: 0 0 18px; color: var(--cyan-hi); }
.ov-name h1 { margin: 0; font-weight: 900; line-height: 0.98; letter-spacing: -0.01em; font-size: clamp(46px, 6.6vw, 124px); text-wrap: balance; }
.ov-name h1 .co { display: block; font-weight: 100; font-size: 0.3em; letter-spacing: 0.5em; margin-bottom: 0.5em; color: var(--mute); }
.ov-name h1 .ch { display: inline-block; will-change: transform, opacity; }
.ov-name .en { margin: 22px 0 0; color: var(--mute); }
.ov-name .biz { margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; font-weight: 700; letter-spacing: .12em; padding-top: 18px; border-top: 1px solid var(--line); max-width: 30em; }
.ov-name .biz span { color: var(--mute); font-weight: 400; }

.ov-select .sel-head { position: absolute; left: var(--gut); top: calc(var(--hd) + env(safe-area-inset-top, 0px) + 18px); margin: 0; }
.ov-select .sel-head h2 { margin: 0; font-size: clamp(20px, 2vw, 28px); font-weight: 900; letter-spacing: .06em; line-height: 1.3; }
.ov-select .sel-head p { margin: 6px 0 0; color: var(--mute); }
.entries { list-style: none; margin: 0; padding: 0; }
.entry { position: absolute; transform: translateX(-50%); text-decoration: none; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 10px 14px 14px; min-width: 220px; }
.entry .en { font-family: var(--mono); font-size: 10.5px; letter-spacing: .3em; color: var(--cyan-hi); }
.entry .jp { font-size: clamp(38px, 4.3vw, 74px); font-weight: 900; line-height: 1.12; letter-spacing: .02em; transition: color .25s; }
.entry .jp, .entry .sub { white-space: nowrap; }
.entry .sub { font-size: 13px; color: var(--mute); letter-spacing: .08em; line-height: 1.6; }
.entry .go { margin-top: 12px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .26em; color: var(--mute); display: inline-flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); transition: color .25s, border-color .25s; }
.entry.is-hot .go, .entry:hover .go, .entry:focus-visible .go { color: var(--ink); border-color: var(--cyan); }
.entry.is-hot .jp, .entry:hover .jp { color: #fff; }
.entry .go b { display: none; }
.entry .go i { font-style: normal; }
.is-portrait .entry .go b { display: inline; }
.sel-bar { display: none; }
.is-portrait .sel-bar { display: block; position: absolute; left: var(--gut); right: var(--gut); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
.sel-count { margin: 0 0 8px; color: var(--mute); }
.sel-count b { color: var(--ink); font-weight: 400; }
.sel-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--line); border-radius: 26px; padding: 3px; background: rgba(6, 8, 11, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sel-tab { appearance: none; border: 0; background: none; color: var(--mute); font: 700 14px/1 var(--sans); letter-spacing: .06em; min-height: 46px; border-radius: 23px; cursor: pointer; transition: background .25s, color .25s; }
.sel-tab.is-current { background: rgba(28, 174, 208, .16); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(98, 217, 240, .55); }
.sel-hint { margin: 10px 0 0; font-size: 12px; color: var(--mute); text-align: center; transition: opacity .6s; }
.sel-hint.is-gone { opacity: 0; }
.ov-logo .logo-type { position: absolute; height: auto; fill: #a9b3ba; }

.rail { position: absolute; right: calc(var(--gut) * 0.6); top: 50%; transform: translateY(-50%); height: 34vh; width: 1px; background: var(--line); }
.rail-fill { position: absolute; inset: 0; background: var(--cyan); transform-origin: top; transform: scaleY(0); }
.rail span { position: absolute; right: 12px; transform: translateY(-50%); font-family: var(--mono); font-size: 9.5px; letter-spacing: .22em; color: var(--faint); white-space: nowrap; }

/* portrait (phones): the stage is recomposed, not shrunk */
.is-portrait .ov-name .name { left: var(--gut); right: var(--gut); top: auto; bottom: calc(9svh + env(safe-area-inset-bottom, 0px)); transform: none; }
.is-portrait .ov-name h1 { font-size: clamp(44px, 14.5vw, 92px); }
.is-portrait .ov-name .biz { font-size: 13px; }
.is-portrait .ov-select .sel-head { top: calc(var(--hd) + env(safe-area-inset-top, 0px) + 6px); }
.is-portrait .entry { left: var(--gut) !important; right: var(--gut); top: auto !important; bottom: calc(150px + env(safe-area-inset-bottom, 0px)); transform: none; align-items: flex-start; text-align: left; padding: 0; min-width: 0; }
.is-portrait .entry .jp { font-size: clamp(54px, 17vw, 92px); line-height: 1.02; margin: 2px 0 4px; }
.is-portrait .entry .sub { font-size: 14px; color: #b7c0c7; }
.is-portrait .entry .go { margin-top: 18px; min-height: 52px; padding: 0 22px 0 24px; border: 0; border-radius: 26px; background: var(--ink); color: var(--void); font-family: var(--sans); font-size: 15px; letter-spacing: .06em; gap: 14px; }
.is-portrait .entry .go b { font-weight: 900; }
.is-portrait .entry .go i { font-style: normal; font-family: var(--mono); font-size: 10px; letter-spacing: .2em; opacity: .7; }
.is-portrait .sel-dots { display: flex; flex-direction: column; gap: 2px; position: absolute; right: calc(var(--gut) - 10px); top: 50%; transform: translateY(-50%); list-style: none; margin: 0; padding: 0; }
.sel-dot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-height: 44px; min-width: 44px; padding: 0 10px; text-decoration: none; color: var(--faint); font-family: var(--mono); font-size: 10px; letter-spacing: .18em; }
.sel-dot i { width: 7px; height: 7px; border: 1px solid currentColor; transform: rotate(45deg); }
.sel-dot.is-current { color: var(--ink); }
.sel-dot.is-current i { background: var(--cyan); border-color: var(--cyan); }
.is-portrait .rail { display: none; }

/* ------------------------------------------------------------ dive: label → next title */
.hero-title { position: absolute; left: var(--gut); bottom: calc(var(--gut) + 11svh + var(--ht-lift, 0px) + env(safe-area-inset-bottom, 0px)); margin: 0; font-weight: 900; font-size: var(--ht-fs, clamp(68px, 12.5vw, 210px)); line-height: .92; letter-spacing: -0.01em; white-space: nowrap; }
.hero-title.probe, .hero-title.morph-ghost { position: fixed; z-index: 45; pointer-events: none; transform-origin: 0 0; }
.hero-title.probe { visibility: hidden; }
.is-diving .ov-select .sel-head, .is-diving .sel-bar { opacity: 0; transition: opacity .3s; }

/* ------------------------------------------------------------ footer */
.ft { position: relative; z-index: 3; background: var(--void); border-top: 1px solid var(--line); padding-block: 56px calc(40px + env(safe-area-inset-bottom, 0px)); padding-inline: var(--gut); display: grid; grid-template-columns: 1.2fr 2fr; gap: 32px; }
.ft-co b { display: block; font-size: 18px; font-weight: 900; letter-spacing: .06em; }
.ft-co p { margin: 8px 0 0; color: var(--mute); font-size: 13px; }
.ft nav { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 24px; }
.ft nav a { text-decoration: none; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 700; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ft nav a small { font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em; color: var(--faint); font-weight: 400; }
.ft .copy { grid-column: 1 / -1; color: var(--faint); margin: 12px 0 0; }
@media (max-width: 760px) { .ft { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ inner pages */
.page main { position: relative; z-index: 2; }
.hero { position: relative; height: 100vh; height: 100svh; min-height: 520px; }
.crumb { position: absolute; left: var(--gut); top: calc(var(--hd) + env(safe-area-inset-top, 0px) + 12px); margin: 0; display: flex; gap: 14px; align-items: center; color: var(--mute); }
.crumb a { text-decoration: none; color: var(--ink); display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding-right: 6px; }
.crumb a:hover { color: var(--cyan-hi); }
.hero .eyebrow { position: absolute; left: var(--gut); bottom: calc(var(--gut) + 11svh + var(--ht-lift, 0px) + var(--ht-fs, clamp(68px, 12.5vw, 210px)) * 0.98 + env(safe-area-inset-bottom, 0px)); margin: 0; color: var(--cyan-hi); }
.hero .lead { position: absolute; left: var(--gut); right: var(--gut); bottom: calc(var(--gut) + 2svh + env(safe-area-inset-bottom, 0px)); margin: 0; max-width: 34em; font-size: clamp(14px, 1.2vw, 17px); color: var(--ink); line-height: 1.9; }
.hero .lead span { color: var(--mute); }
/* HP制作のリード:2文目は改行して始め、語の途中で折り返さない */
.page-web .hero .lead .nb { display: inline-block; }
.page-web .hero .lead > .nb { color: var(--ink); }
.page-web .hero .lead .lead-2 { display: block; }
.by-direct .hero-title, .by-direct .hero .eyebrow, .hero .lead, .crumb { opacity: 0; transform: translateY(14px); transition: opacity .9s ease .15s, transform .9s cubic-bezier(.2, .7, .1, 1) .15s; }
.is-in .hero-title, .is-in .hero .eyebrow, .is-in .hero .lead, .is-in .crumb { opacity: 1; transform: none; }
.by-dive .hero-title { opacity: 1; transform: none; transition: none; }
.by-dive .hero .lead { transition-delay: .7s; }

.body { position: relative; background: linear-gradient(to bottom, rgba(6, 8, 11, 0) 0, rgba(6, 8, 11, .9) 18vh, rgba(6, 8, 11, .96) 100%); padding-block: 18vh 12vh; padding-inline: var(--gut); }
.body-in { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(180px, 1fr) 3fr; gap: 40px 56px; }
.body h2 { margin: 0; font-size: clamp(22px, 2.2vw, 30px); font-weight: 900; letter-spacing: .04em; line-height: 1.35; }
.body h2 small { display: block; font-family: var(--mono); font-weight: 400; font-size: 10.5px; letter-spacing: .26em; color: var(--mute); margin-bottom: 10px; }
.facts { margin: 0; display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line); }
.facts > div { display: grid; grid-template-columns: 10em 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.facts dt { color: var(--mute); font-size: 14px; }
.facts dd { margin: 0; font-weight: 700; }
.facts dd .tbd, .tbd { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; color: #e0b454; border: 1px solid rgba(224, 180, 84, .5); padding: 2px 8px; margin-left: 6px; white-space: nowrap; font-weight: 400; }
.works { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.works li { background: var(--void-2); padding: 24px 22px 26px; }
.works b { display: block; font-size: 22px; font-weight: 900; letter-spacing: .04em; }
.works span { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .22em; color: var(--mute); margin-bottom: 14px; }
.works p { margin: 12px 0 0; font-size: 14px; color: var(--mute); line-height: 1.8; }
.note { border: 1px dashed rgba(224, 180, 84, .45); padding: 22px 24px; font-size: 14px; line-height: 1.9; color: #cfd5da; }
.note > .mono { color: #e0b454; display: block; margin-bottom: 10px; }
.note ul { margin: 8px 0 0; padding-left: 1.2em; }
.note li + li { margin-top: 4px; }
.next { position: relative; z-index: 2; background: var(--void); padding-block: 12vh; padding-inline: var(--gut); border-top: 1px solid var(--line); }
.next-in { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.next a { background: var(--void); text-decoration: none; padding: 30px 24px; min-height: 150px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; transition: background .25s; }
.next a:hover { background: var(--void-2); }
.next a b { font-size: clamp(26px, 2.8vw, 40px); font-weight: 900; line-height: 1.1; }
.next a .mono { color: var(--mute); }
.next a.back b { color: var(--cyan-hi); }
@media (max-width: 760px) {
  .body-in { grid-template-columns: 1fr; gap: 20px; }
  .body-in > h2 { margin-top: 36px; }
  .facts > div { grid-template-columns: 1fr; gap: 2px; }
  .next-in { grid-template-columns: 1fr; }
  .hero .lead { font-size: 14px; }
}

/* ------------------------------------------------------------ fallback + reduced motion */
.no-gl .track, .rm .top .track { height: auto; }
.no-gl .stage, .rm .top .stage { position: relative; height: auto; overflow: visible; pointer-events: auto; padding-top: calc(var(--hd) + 24px); }
.no-gl .ov, .rm .top .ov { position: relative; inset: auto; visibility: visible !important; opacity: 1 !important; transform: none !important; }
.no-gl .ov-intro, .rm .top .ov-intro, .no-gl .rail, .rm .top .rail, .no-gl .sel-bar, .rm .top .sel-bar, .no-gl .ov-logo, .rm .top .ov-logo { display: none !important; }
.no-gl .entry .go b, .rm .top .entry .go b { display: none; }
.no-gl .fallback, .rm .top .fallback { display: block; position: relative; z-index: 2; padding: calc(var(--hd) + 8vh) var(--gut) 0; }
.no-gl .fallback svg, .rm .top .fallback svg { width: min(360px, 62vw); height: auto; display: block; }
.no-gl .ov-name .name, .rm .top .ov-name .name { position: relative; inset: auto; transform: none; padding: 32px var(--gut) 12vh; }
.no-gl .ov-name .ch, .rm .top .ov-name .ch { opacity: 1 !important; transform: none !important; }
.no-gl .ov-select, .rm .top .ov-select { padding: 0 var(--gut) 12vh; }
.no-gl .ov-select .sel-head, .rm .top .ov-select .sel-head { position: relative; top: auto; left: auto; margin-bottom: 24px; }
.no-gl .entries, .rm .top .entries { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.no-gl .entry, .rm .top .entry { position: relative; left: auto !important; top: auto !important; bottom: auto; transform: none !important; opacity: 1 !important; pointer-events: auto !important; background: var(--void); align-items: flex-start; text-align: left; padding: 28px 24px; min-width: 0; }
.no-gl .hd, .rm .hd { opacity: 1; transform: none; }
.no-gl .hero-title, .no-gl .hero .lead, .no-gl .crumb, .no-gl .hero .eyebrow { opacity: 1; transform: none; }
.no-gl .page .hero, .rm .page .hero { background: radial-gradient(80% 60% at 75% 35%, #10161c 0, var(--void) 70%); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
.ov-name .biz i { width: 1px; height: 12px; background: var(--line); align-self: center; }
.next-in { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
@media (max-width: 1000px) and (orientation: landscape) { .entry { min-width: 0; } .entry .sub { font-size: 11.5px; } .entry .jp { font-size: clamp(30px, 4.6vw, 48px); } }

/* ------------------------------------------------------------ inner pages: two-screen stage */
.stage2 { position: relative; height: 250vh; }
.pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.pin .hero { position: absolute; inset: 0; height: auto; min-height: 0; opacity: calc(1 - var(--k, 0) * 2.4); }
.s2 { position: absolute; inset: 0; visibility: hidden; opacity: 0; pointer-events: none; }
.s2 a { pointer-events: auto; }
.s2-kicker { position: absolute; left: var(--gut); top: calc(var(--hd) + env(safe-area-inset-top, 0px) + 24px); margin: 0; color: var(--cyan-hi); }
.s2-title { position: absolute; left: var(--gut); top: calc(var(--hd) + env(safe-area-inset-top, 0px) + 50px); margin: 0; font-size: clamp(30px, 3.6vw, 56px); font-weight: 900; line-height: 1.18; letter-spacing: .02em; }
.s2-body { position: absolute; left: var(--gut); top: calc(var(--hd) + env(safe-area-inset-top, 0px) + 50px + clamp(30px, 3.6vw, 56px) * 2.6); margin: 0; max-width: 26em; color: #c3cad0; font-size: 15px; line-height: 1.9; }
.s2-link { position: absolute; left: var(--gut); bottom: calc(10svh + env(safe-area-inset-bottom, 0px)); margin: 0; }
.s2-link a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border: 1px solid var(--cyan); border-radius: 24px; text-decoration: none; font-weight: 700; font-size: 14px; letter-spacing: .04em; }
.s2-other { position: absolute; left: var(--gut); bottom: calc(8svh + env(safe-area-inset-bottom, 0px)); margin: 0; padding-left: 14px; border-left: 1px solid rgba(233, 237, 240, .28); display: flex; flex-direction: column; gap: 3px; }
.s2-other .mono { font-size: 9.5px; color: var(--mute); }
.s2-other b { font-size: 16px; font-weight: 700; letter-spacing: .04em; color: var(--ink); }
.s2-other-d { font-size: 13px; color: var(--mute); }
/* 冒頭の固定区間:SCROLL と、区間の進み具合の細い線(TOPの右端の線と同じ作り)。区間を抜けると消える */
.s2-scroll { position: absolute; right: var(--gut); bottom: calc(30px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 10px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s; }
.s2-scroll .mono { font-size: 9.5px; letter-spacing: .22em; color: var(--mute); }
.s2-scroll-a { font-style: normal; font-size: 11px; color: var(--mute); display: inline-block; animation: nudge 1.8s ease-in-out infinite; }
.s2-scroll-bar { position: relative; width: 72px; height: 1px; background: var(--line); }
.s2-scroll-bar b { position: absolute; inset: 0; background: var(--cyan); transform-origin: left; transform: scaleX(0); }
.is-portrait .s2-scroll { right: auto; left: 50%; transform: translateX(-50%); bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
.no-gl .s2-scroll, .rm .s2-scroll { display: none !important; }
.tag { position: absolute; left: 0; top: 0; margin: 0; font-size: clamp(18px, 1.7vw, 26px); font-weight: 900; letter-spacing: .04em; line-height: 1.25; white-space: nowrap; padding-left: 14px; border-left: 2px solid var(--cyan); will-change: transform; }
.tag .mono { display: block; font-weight: 400; color: var(--mute); font-size: 9.5px; margin-bottom: 4px; }
.is-portrait .s2-title { font-size: clamp(28px, 8.4vw, 40px); }
.is-portrait .s2-body { top: auto; bottom: calc(10svh + 72px + env(safe-area-inset-bottom, 0px)); right: var(--gut); font-size: 14px; }
.is-portrait .tag { font-size: 18px; }
.page .next { border-top: 0; }
.no-gl .stage2, .rm .stage2 { height: auto; }
.no-gl .pin, .rm .pin { position: relative; height: auto; overflow: visible; }
.no-gl .pin .hero { position: relative; height: 100svh; opacity: 1; }
.no-gl .s2, .rm .s2 { position: relative; inset: auto; visibility: visible !important; opacity: 1 !important; padding: 0 var(--gut) 12vh; display: flex; flex-direction: column; gap: 14px; }
.no-gl .s2 > *, .rm .s2 > * { position: static; transform: none !important; opacity: 1 !important; }

/* ------------------------------------------------------------ top: the way on from the name */
.to-select { margin: 28px 0 0; display: flex; align-items: center; gap: 18px; }
.to-select a { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 22px; border: 1px solid rgba(98, 217, 240, .55); border-radius: 24px; text-decoration: none; font-weight: 700; font-size: 14px; letter-spacing: .06em; pointer-events: auto; transition: background .25s; }
.to-select a:hover { background: rgba(28, 174, 208, .14); }
.to-select a i { font-style: normal; display: inline-block; animation: nudge 1.8s ease-in-out infinite; }
.to-select small { color: var(--faint); }
@keyframes nudge { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
.is-portrait .to-select { margin-top: 20px; }
.no-gl .to-select, .rm .top .to-select { display: none; }

/* ------------------------------------------------------------ construction: the three works */
.tag-link { text-decoration: none; pointer-events: auto; display: block; padding-top: 6px; padding-bottom: 8px; padding-right: 10px; min-height: 44px; }
.tag-link i { font-style: normal; font-weight: 400; margin-left: 10px; color: var(--cyan-hi); display: inline-block; transition: transform .2s; }
.tag-link:hover i, .tag-link:focus-visible i { transform: translateX(4px); }
.tag-link:hover { border-left-color: var(--cyan-hi); }
.works-wrap { position: relative; z-index: 2; background: linear-gradient(to bottom, rgba(6, 8, 11, 0), var(--void) 14vh); }
.work-index { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 18vh var(--gut) 4vh; max-width: 1280px; margin: 0 auto; }
.work-index p { margin: 0 20px 0 0; color: var(--mute); flex-basis: 100%; }
.work-index a { display: inline-flex; align-items: baseline; gap: 10px; min-height: 44px; padding: 10px 18px; border: 1px solid var(--line); border-radius: 22px; text-decoration: none; font-weight: 700; }
.work-index a .mono { color: var(--cyan-hi); }
.work-index a:hover { border-color: rgba(98, 217, 240, .6); }
.work { position: relative; padding-block: 10vh 12vh; padding-inline: var(--gut); max-width: 1280px; margin: 0 auto; scroll-margin-top: calc(var(--hd) + 8px); }
.work + .work { border-top: 1px solid var(--line); }
.work-head p { margin: 0 0 10px; color: var(--cyan-hi); }
.work-head h2 { margin: 0; font-size: clamp(44px, 7.4vw, 112px); font-weight: 900; line-height: 1; letter-spacing: .01em; }
.work-lead { margin-top: 5vh; }
.lead-photo { margin: 0; max-width: 100%; position: relative; background: #10151a; }
.lead-photo img { display: block; width: 100%; height: 100%; }
.slot { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; padding: 16px; text-align: center; border: 1px dashed rgba(98, 217, 240, .38); background: repeating-linear-gradient(135deg, rgba(233, 237, 240, .025) 0 1px, transparent 1px 14px), #0a0d11; }
.slot-ratio { font-size: clamp(22px, 3vw, 40px); letter-spacing: .08em; color: #c9d1d7; }
.slot-what { font-size: 14px; color: var(--mute); max-width: 26em; line-height: 1.7; }
.slot-note { color: var(--faint); }
/* three different compositions for the main photograph */
/* 横長 4:3: 画面の高さの約78%までに抑え、切り抜かずに縮める */
/* 主役写真: 縦横比はそのまま、高さは画面の約80%まで(縦長でも横長でも同じ規則で縮める) */
.lead-photo { width: min(100%, calc(80vh * var(--r, 1.333))); }
.work-wide .lead-photo { margin-left: auto; }
/* 見出しの追従(sticky)は見出し+主役写真の枠の中だけ。施工写真の上には重ならない */
.work-split .work-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 0 6vw; align-items: end; }
.work-split .work-head { align-self: start; position: sticky; top: calc(var(--hd) + 24px); }
.work-split .work-lead { margin-top: 0; }
.work-split .lead-photo { margin-left: auto; }
/* 左右反転: 写真を左、見出しを右に(縦長の主役が2工種続くため) */
.work-split.work-rev .work-top { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.work-split.work-rev .work-head { grid-column: 2; grid-row: 1; text-align: right; }
.work-split.work-rev .work-lead { grid-column: 1; grid-row: 1; }
.work-split.work-rev .lead-photo { margin-left: 0; margin-right: auto; }
.work-pair .work-lead { display: grid; grid-template-columns: 7fr 5fr; gap: 3vw; align-items: start; }
.work-pair .lead-photo[data-slot="1"] { margin-top: 18vh; }
@media (max-width: 760px) {
  .work-split .work-top { display: block; }
  .work-split .work-head { position: static; }
  .work-split .work-lead { margin-top: 5vh; }
  .work-split.work-rev .work-head { text-align: left; }
  .work-pair .work-lead { grid-template-columns: 1fr; }
  .work-pair .lead-photo[data-slot="1"] { margin-top: 0; width: min(78%, calc(80vh * var(--r, 1.333))); margin-left: auto; }
}
/* additional records: masonry by row-spans, no cropping */
.records { margin-top: 8vh; }
.records-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 18px; font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: .04em; }
.records-head .mono { font-size: 10px; font-weight: 400; letter-spacing: .22em; color: var(--mute); }
.work-empty { margin: 5vh 0 0; color: var(--mute); font-size: 14px; }
.work-bare .records { margin-top: 5vh; }
.records-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); grid-auto-rows: 8px; column-gap: 16px; }
.rec { min-width: 0; }
.rec-in { display: block; text-decoration: none; }
.rec-ph { display: block; width: 100%; height: auto; aspect-ratio: var(--ar); background: #10151a; }
.rec-ph.is-demo { display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); color: var(--faint); font: 400 12px var(--mono); }
.rec-cap { margin: 8px 0 0; font-size: 12px; color: var(--mute); line-height: 1.5; }
@media (max-width: 760px) { .records-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; } }
.no-gl .works-wrap, .rm .works-wrap { background: var(--void); }

/* ------------------------------------------------------------ contact form */
.cf-wrap { min-width: 0; }
.cf { display: grid; gap: 26px; max-width: 720px; }
.cf-testmode { margin: 0; padding: 10px 14px; border: 1px dashed rgba(224, 180, 84, .6); color: #e0b454; font-size: 11px; letter-spacing: .08em; }
.cf-req-note { margin: 0; font-size: 13px; color: var(--mute); }
.cf-req, .cf-opt { display: inline-block; margin-left: 6px; padding: 1px 7px; font-size: 11px; font-weight: 700; letter-spacing: .06em; border-radius: 3px; vertical-align: 2px; }
.cf-req { color: var(--void); background: var(--cyan-hi); }
.cf-opt { color: var(--mute); border: 1px solid var(--line); font-weight: 400; }
.cf-field, .cf input, .cf textarea { scroll-margin-top: calc(var(--hd) + 24px); }
.cf-field { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 8px; }
.cf-field > label, .cf-field > legend { font-size: 15px; font-weight: 700; padding: 0; }
.cf-field > legend { margin-bottom: 8px; }
.cf input[type="text"], .cf input[type="email"], .cf input[type="tel"], .cf textarea {
  width: 100%; font: inherit; font-size: 16px; /* 16px未満だとiPhoneで入力時に拡大される */
  color: var(--ink); background: #0d1116; border: 1px solid rgba(233, 237, 240, .24); border-radius: 6px;
  padding: 13px 14px; min-height: 50px; line-height: 1.6; transition: border-color .2s, box-shadow .2s; }
.cf textarea { min-height: 170px; resize: vertical; }
.cf input:focus, .cf textarea:focus { outline: none; border-color: var(--cyan-hi); box-shadow: 0 0 0 3px rgba(98, 217, 240, .22); }
.cf [aria-invalid="true"] { border-color: #ff8a7a !important; }
.cf-types[aria-invalid="true"] .cf-chip span { border-color: rgba(255, 138, 122, .7); }
.cf input[readonly], .cf textarea[readonly] { opacity: .6; }
.cf-hint { margin: 0; font-size: 13px; color: var(--mute); line-height: 1.7; }
.cf-err { margin: 0; font-size: 13px; color: #ff9d8f; font-weight: 700; line-height: 1.6; }
.cf-err::before { content: "! "; }
.cf-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.cf-chip { position: relative; display: block; cursor: pointer; }
.cf .cf-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0 !important; -webkit-appearance: none; appearance: none; cursor: pointer; }
.cf-chip span { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 64px; padding: 10px 14px; border: 1px solid rgba(233, 237, 240, .24); border-radius: 8px; background: #0d1116; transition: border-color .2s, background .2s; }
.cf-chip b { font-size: 16px; }
.cf-chip small { font-size: 11.5px; color: var(--mute); }
.cf-chip input:checked + span { border-color: var(--cyan-hi); background: rgba(28, 174, 208, .14); box-shadow: inset 0 0 0 1px var(--cyan-hi); }
.cf-chip input:checked + span b::after { content: " ✓"; color: var(--cyan-hi); }
.cf-chip input:focus-visible + span { box-shadow: 0 0 0 3px rgba(98, 217, 240, .35); }
.cf-chip input:disabled + span { opacity: .45; }
.cf-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.cf-send { font: inherit; font-size: 16px; font-weight: 900; letter-spacing: .08em; color: var(--void); background: var(--cyan-hi); border: 0; border-radius: 30px; min-height: 56px; min-width: 240px; padding: 0 34px; cursor: pointer; transition: background .2s, opacity .2s; }
.cf-send:hover { background: #8ee6f6; }
.cf-send:focus-visible { outline: 3px solid rgba(98, 217, 240, .5); outline-offset: 3px; }
.cf-send:disabled { cursor: progress; opacity: .75; }
.is-sending .cf-send-t::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 10px; vertical-align: -1px; border: 2px solid rgba(6, 8, 11, .35); border-top-color: var(--void); border-radius: 50%; animation: cf-spin .8s linear infinite; }
@keyframes cf-spin { to { transform: rotate(360deg); } }
.cf-status { margin: 0; font-size: 13px; color: var(--mute); }
.cf-status:empty { display: none; }
.cf-fail { border: 1px solid rgba(255, 138, 122, .6); background: rgba(255, 138, 122, .08); border-radius: 8px; padding: 16px 18px; font-size: 14px; line-height: 1.8; outline: none; }
.cf-fail p { margin: 0; }
.cf-fail-h { font-weight: 900; color: #ffb3a8; margin-bottom: 4px !important; }
.cf-fail-sub { color: var(--mute); margin-top: 6px !important; }
.cf-alt { font: inherit; font-weight: 700; margin-top: 10px; min-height: 44px; padding: 0 18px; color: var(--ink); background: transparent; border: 1px solid var(--ink); border-radius: 22px; cursor: pointer; }
.cf-privacy { margin: 0; font-size: 12px; color: var(--faint); line-height: 1.8; }
.cf-done { max-width: 720px; border: 1px solid var(--cyan-hi); border-radius: 10px; background: linear-gradient(160deg, rgba(28, 174, 208, .16), rgba(28, 174, 208, .03)); padding: 34px 32px; outline: none; scroll-margin-top: calc(var(--hd) + 20px); }
.cf-done-mark { margin: 0 0 6px; color: var(--cyan-hi); letter-spacing: .3em; font-size: 11px; }
.cf-done h3 { margin: 0; font-size: clamp(30px, 4vw, 44px); font-weight: 900; line-height: 1.2; }
.cf-done h3::before { content: ""; display: inline-block; width: .8em; height: .42em; margin-right: .35em; vertical-align: .22em; border-left: .14em solid var(--cyan-hi); border-bottom: .14em solid var(--cyan-hi); transform: rotate(-45deg); }
.cf-done-lead { margin: 14px 0 0; font-size: 15px; line-height: 1.9; }
.cf-done-sum { margin: 20px 0 0; border-top: 1px solid var(--line); }
.cf-done-sum > div { display: grid; grid-template-columns: 11em 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.cf-done-sum dt { color: var(--mute); }
.cf-done-sum dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.cf-done-note { margin: 16px 0 0; font-size: 13px; color: var(--mute); }
.cf-again { font: inherit; font-size: 14px; margin-top: 22px; min-height: 44px; padding: 0 20px; color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 22px; cursor: pointer; }
@media (max-width: 760px) {
  .cf { gap: 22px; }
  .cf-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cf-actions { flex-direction: column; align-items: stretch; }
  .cf-send { width: 100%; min-width: 0; }
  .cf-done { padding: 26px 20px; }
  .cf-done-sum > div { grid-template-columns: 1fr; gap: 0; }
}
@media (prefers-reduced-motion: reduce) { .is-sending .cf-send-t::before { animation: none; } }
.cf-fail-raw { font-family: var(--mono); font-size: 11px; color: var(--mute); margin-top: 4px !important; }

/* 時間切れ(届いたか不明)は、送信失敗の赤と分けて黄色で表示 */
.cf-fail.is-unknown { border-color: rgba(224, 180, 84, .7); background: rgba(224, 180, 84, .08); }
.cf-fail.is-unknown .cf-fail-h { color: #f0c870; }

/* お問い合わせページだけ冒頭を短くし、フォームを最初の画面から見せる(ほかのページのタイトル部分は変更なし) */
.page-contact .hero { height: auto; min-height: 0; padding: calc(var(--hd) + env(safe-area-inset-top, 0px) + 12px) var(--gut) 0; }
.page-contact .hero > * { position: static; }
.page-contact .crumb { margin: 0 0 clamp(18px, 3vh, 34px); }
.page-contact .hero .eyebrow { margin: 0 0 10px; }
.page-contact .hero-title { font-size: clamp(44px, 7.4vw, 112px); line-height: 1; white-space: normal; }
.page-contact .hero .lead { margin: 14px 0 0; max-width: 46em; }
/* 冒頭が短くなり、板の手前に文字が重なるため、文字の周りだけ背景を暗く沈める(板の見え方は変えない) */
.page-contact .hero-title, .page-contact .hero .lead, .page-contact .hero .eyebrow, .page-contact .crumb { text-shadow: 0 0 18px rgba(6, 8, 11, .95), 0 0 6px rgba(6, 8, 11, .9), 0 1px 2px rgba(6, 8, 11, .9); }
.page-contact .hero .lead span { color: #b3bcc3; }
.page-contact .cf-req-note .cf-req { margin: 0 4px 0 0; }
.page-contact .body { padding-block: clamp(28px, 5vh, 56px) 12vh; background: linear-gradient(to bottom, rgba(6, 8, 11, 0) 0, rgba(6, 8, 11, .55) 70px, rgba(6, 8, 11, .88) 200px, rgba(6, 8, 11, .94) 100%); }
.page-contact .body-in > h2 { margin-top: 0; }
@media (max-width: 760px) {
  .page-contact .crumb { margin-bottom: 14px; }
  .page-contact .hero-title { font-size: clamp(40px, 12vw, 56px); }
  .page-contact .hero .lead { margin-top: 10px; }
  .page-contact .hero { background: linear-gradient(to bottom, rgba(6, 8, 11, 0) 40%, rgba(6, 8, 11, .35) 100%); }
  .page-contact .body-in > h2 { margin-top: 8px; }
}

/* ------------------------------------------------------------ workflow: explanation below the opening (業務改善ページのみ) */
.wf-wrap { position: relative; z-index: 2; background: linear-gradient(to bottom, rgba(6, 8, 11, 0), var(--void) 14vh); padding-top: 14vh; }
.wf-sec { max-width: 1180px; margin: 0 auto; padding: 9vh var(--gut); display: grid; grid-template-columns: minmax(200px, 1fr) 2.4fr; gap: 28px 56px; scroll-margin-top: calc(var(--hd) + 8px); }
.wf-sec + .wf-sec { border-top: 1px solid var(--line); }
.wf-sec-head .mono { margin: 0 0 12px; color: var(--cyan-hi); }
.wf-sec-head h2 { margin: 0; font-size: clamp(26px, 2.6vw, 38px); font-weight: 900; line-height: 1.3; letter-spacing: .02em; }
.wf-head-note { margin: 18px 0 0; font-size: 13px; color: var(--mute); line-height: 1.9; max-width: 30em; }
.wf-p { margin: 0 0 1.1em; font-size: 16px; line-height: 2; color: #d5dbe0; max-width: 40em; }
.wf-p:last-child { margin-bottom: 0; }
.wf-small { font-size: 13px; color: var(--mute); margin-top: 18px; }
.wf-intro h2 { font-size: clamp(28px, 3vw, 44px); }
/* よくある手間:仕事の場面ごとのカード */
.wf-scenes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.wf-scenes li { background: var(--void); padding: 22px 22px 24px; }
.wf-scene-k { display: inline-block; font-size: 12px; font-weight: 700; color: var(--cyan-hi); border: 1px solid rgba(98, 217, 240, .45); border-radius: 12px; padding: 1px 10px; }
.wf-scenes p { margin: 12px 0 0; font-size: 15px; line-height: 1.85; }
.wf-note { margin: 22px 0 0; font-size: 14px; line-height: 1.9; color: var(--mute); max-width: 40em; }
/* 自社の4つの仕組み */
.wf-sec-wide { grid-template-columns: 1fr; }
.wf-systems { display: grid; gap: 22px; }
.wf-sys { scroll-margin-top: calc(var(--hd) + 16px); border: 1px solid var(--line); background: var(--void-2); }
.wf-sys-head .mono { margin: 0 0 6px; color: var(--mute); font-size: 10px; }
.wf-sys-head h3 { margin: 0; font-weight: 900; line-height: 1.1; }
.wf-sys-lead { margin: 0; font-size: 15px; line-height: 1.95; color: #d5dbe0; }
.wf-brief-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.wf-sys-brief { padding: 26px 26px 28px; }
.wf-sys-brief .wf-sys-head { border-left: 2px solid var(--cyan); padding-left: 14px; margin-bottom: 16px; }
.wf-sys-brief .wf-sys-head h3 { font-size: clamp(24px, 2.2vw, 32px); }
.wf-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 22px; }
.wf-shot { margin: 0; }
.wf-shot img { display: block; width: 100%; height: auto; }
.wf-shot figcaption { margin-top: 6px; font-size: 12px; color: var(--mute); }
/* 相談できる範囲 */
.wf-scope { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.wf-scope li { display: grid; grid-template-columns: 15em 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.wf-scope b { font-size: 16px; }
.wf-scope span { font-size: 14px; line-height: 1.85; color: #c3cad0; }
.wf-stance { margin: 26px 0 0; padding: 20px 22px; border-left: 2px solid var(--cyan); background: rgba(28, 174, 208, .07); font-size: 15px; line-height: 1.95; }
.wf-stance .mono { display: block; color: var(--cyan-hi); font-size: 10px; margin-bottom: 6px; }
/* 進め方 → お問い合わせ */
.wf-flow { list-style: none; margin: 0; padding: 0; counter-reset: fl; display: grid; gap: 0; }
.wf-flow li { counter-increment: fl; position: relative; display: grid; grid-template-columns: 3.2em 12em 1fr; gap: 14px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--line); }
.wf-flow li::before { content: counter(fl, decimal-leading-zero); font: 400 12px var(--mono); letter-spacing: .16em; color: var(--cyan-hi); }
.wf-flow b { font-size: 16px; }
.wf-flow span { font-size: 14px; line-height: 1.85; color: #c3cad0; }
.wf-cta { margin-top: 34px; padding: 30px 30px 32px; border: 1px solid rgba(98, 217, 240, .5); border-radius: 10px; background: linear-gradient(160deg, rgba(28, 174, 208, .14), rgba(28, 174, 208, .02)); display: flex; align-items: center; justify-content: space-between; gap: 22px 30px; flex-wrap: wrap; }
.wf-cta-lead { margin: 0; font-size: clamp(18px, 1.7vw, 22px); font-weight: 900; line-height: 1.6; }
.wf-cta-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; padding: 0 30px; border-radius: 30px; background: var(--cyan-hi); color: var(--void); font-weight: 900; letter-spacing: .06em; text-decoration: none; transition: background .2s; }
.wf-cta-btn:hover { background: #8ee6f6; }
.wf-cta-btn i { font-style: normal; }
@media (max-width: 760px) {
  .wf-wrap { padding-top: 8vh; }
  .wf-sec { grid-template-columns: 1fr; padding: 56px var(--gut); gap: 22px; }
  .wf-p { font-size: 15px; line-height: 1.95; }
  .wf-scenes { grid-template-columns: 1fr; }
  .wf-scenes li { padding: 18px 18px 20px; }
  .wf-scenes p { font-size: 14.5px; }
  .wf-brief-row { grid-template-columns: 1fr; gap: 14px; }
  .wf-sys-brief { padding: 22px 18px 24px; }
  .wf-scope li { grid-template-columns: 1fr; gap: 4px; padding: 16px 0; }
  .wf-flow li { grid-template-columns: 2.6em 1fr; row-gap: 4px; padding: 16px 0; }
  .wf-flow li span { grid-column: 2; }
  .wf-cta { padding: 24px 20px 26px; }
  .wf-cta-btn { width: 100%; }
}
.wf-sec-head h2 .nb { display: inline-block; }
.wf-quick { margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 14px; }
.wf-quick a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; font-weight: 700; color: var(--ink); border-bottom: 1px solid rgba(98, 217, 240, .45); }
.wf-quick a i { font-style: normal; color: var(--cyan-hi); }
.wf-quick a:hover { color: var(--cyan-hi); }
@media (max-width: 760px) {
  .wf-scenes { border: 0; background: none; gap: 10px; }
  .wf-scenes li { border: 1px solid var(--line); padding: 14px 16px 16px; }
  .wf-scenes p { margin-top: 8px; line-height: 1.8; }
}
.wf-cta-lead .nb { display: inline-block; }
/* 業務改善:見積 → 材料注文 のつながり(中心の具体例) */
.wf-link { display: grid; grid-template-columns: minmax(0, 5fr) 88px minmax(0, 6fr); align-items: stretch; }
.wf-card { padding: 30px 28px 32px; }
.wf-card .wf-sys-head { border-left: 2px solid var(--cyan); padding-left: 16px; margin-bottom: 18px; }
.wf-card .wf-sys-head h3 { font-size: clamp(30px, 3vw, 44px); }
.wf-card .wf-sys-lead + .wf-sys-lead { margin-top: 12px; }
.wf-bridge { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.wf-bridge .mono { font-size: 10.5px; letter-spacing: .12em; color: var(--void); background: var(--cyan-hi); padding: 4px 8px; border-radius: 3px; white-space: nowrap; position: relative; z-index: 1; }
.wf-bridge i { position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: linear-gradient(90deg, rgba(98, 217, 240, .2), var(--cyan-hi)); }
.wf-bridge i::after { content: ""; position: absolute; right: -1px; top: -5px; border: 6px solid transparent; border-left: 9px solid var(--cyan-hi); border-right: 0; }
.wf-ordflow { list-style: none; margin: 0; padding: 0; counter-reset: of; }
.wf-ordflow li { counter-increment: of; position: relative; padding: 14px 0 14px 44px; border-bottom: 1px solid var(--line); }
.wf-ordflow li:first-child { padding-top: 4px; }
.wf-ordflow li::before { content: counter(of, decimal-leading-zero); position: absolute; left: 0; top: 16px; font: 400 11px var(--mono); letter-spacing: .14em; color: var(--cyan-hi); }
.wf-ordflow li:first-child::before { top: 6px; }
.wf-ordflow b { display: block; font-size: 16px; line-height: 1.5; }
.wf-ordflow span { display: block; margin-top: 4px; font-size: 14px; line-height: 1.85; color: #c3cad0; }
.wf-ordflow li.is-branch { margin: 6px 0; padding: 12px 14px 12px 44px; border: 1px dashed rgba(98, 217, 240, .45); border-radius: 6px; }
.wf-ordflow li.is-branch::before { content: "+"; left: 16px; top: 11px; font-size: 16px; }
.wf-ordflow li.is-branch b { font-size: 15px; }
.wf-sec-wide > .wf-brief-row { margin-top: 22px; }
.wf-ordflow li.is-branch { counter-increment: none; }   /* 追加分の入力は番号を使わない(01 → + → 02) */
/* 02:実際の操作の動画。Excelの画面をそのまま見せる(端末の枠などは付けない) */
.wf-video { margin: 4px 0 30px; }
.wf-video-head { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 4px 28px; margin-bottom: 16px; }
.wf-video-head .mono { grid-column: 1 / -1; margin: 0; font-size: 10.5px; letter-spacing: .2em; color: var(--cyan-hi); }
.wf-video-head h3 { margin: 0; font-size: clamp(20px, 1.8vw, 26px); font-weight: 900; letter-spacing: .03em; white-space: nowrap; }
.wf-video-d { margin: 0; font-size: 14px; line-height: 1.85; color: #c3cad0; }
.wf-video-d .nb { display: inline-block; }
.wf-video-frame { position: relative; aspect-ratio: 1858 / 644; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: #0b1016; }
.wf-video-v { display: block; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.wf-video-btn { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 1px solid rgba(98, 217, 240, .6); border-radius: 20px; background: rgba(6, 8, 11, .84); color: var(--ink); font: inherit; cursor: pointer; transition: background .2s; }
.wf-video-btn:hover { background: rgba(14, 40, 50, .95); }
.wf-video-btn:focus-visible { outline: 2px solid var(--cyan-hi); outline-offset: 2px; }
.wf-video-btn[hidden] { display: none; }
.wf-video-ic { color: var(--cyan-hi); font-size: 13px; line-height: 1; }
.wf-video-t { font-size: 11px; letter-spacing: .2em; }
.wf-video-note { margin: 10px 0 0; font-size: 12px; color: var(--mute); }
@media (max-width: 760px) {
  .wf-video { margin-bottom: 22px; }
  .wf-video-head { grid-template-columns: 1fr; }
  .wf-video-head h3 { white-space: normal; }
  .wf-video-d { font-size: 13.5px; }
  /* スマホ:再生前は画面の中央に大きめの PLAY(押しやすく)。終わった後の REPLAY は右下 */
  .wf-video[data-state="idle"] .wf-video-btn { right: auto; bottom: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); min-height: 48px; padding: 0 22px; }
}
/* 04:OUR APPROACH(既存の .wf-stance の形を使う) */
.wf-approach { margin: 26px 0 30px; }
.wf-approach p { margin: 0; }
.wf-approach .wf-approach-h { font-size: 18px; font-weight: 900; letter-spacing: .03em; margin-bottom: 8px; }
.wf-approach p + p:not(.wf-approach-h) { margin-top: 2px; color: #c3cad0; font-size: 14.5px; }
.wf-approach .wf-approach-h + p { color: var(--ink); font-size: 15px; }
.wf-approach .nb { display: inline-block; margin-right: .3em; }
.wf-p-sub { font-size: 14px; color: var(--mute); }
@media (max-width: 900px) {
  .wf-link { grid-template-columns: 1fr; }
  .wf-bridge { height: 64px; }
  .wf-bridge i { left: 50%; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: linear-gradient(180deg, rgba(98, 217, 240, .2), var(--cyan-hi)); }
  .wf-bridge i::after { right: auto; left: -5px; top: auto; bottom: -1px; border: 6px solid transparent; border-top: 9px solid var(--cyan-hi); border-bottom: 0; }
}
@media (max-width: 760px) {
  .wf-card { padding: 22px 18px 24px; }
  .wf-ordflow li { padding-left: 38px; }
  .wf-ordflow li.is-branch { padding-left: 38px; }
  .wf-ordflow li.is-branch::before { left: 12px; }
}

/* ------------------------------------------------------------ web (HP制作): explanation below the opening */
.hp-values { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.hp-values li { background: var(--void); padding: 22px 22px 24px; }
.hp-values .mono { display: block; color: var(--cyan-hi); font-size: 10.5px; margin-bottom: 10px; }
.hp-values b { display: block; font-size: 17px; line-height: 1.5; }
.hp-values p { margin: 8px 0 0; font-size: 14px; line-height: 1.85; color: #c3cad0; }
.hp-seo { margin: 22px 0 0; padding: 16px 18px; border-left: 2px solid var(--line); font-size: 14px; line-height: 1.9; color: #c3cad0; }
.hp-seo .mono { display: block; font-size: 10px; color: var(--mute); margin-bottom: 4px; }
.hp-case { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--line); }
.hp-case a { display: grid; grid-template-columns: 9em 1fr auto; gap: 14px; align-items: baseline; padding: 18px 4px; border-bottom: 1px solid var(--line); text-decoration: none; transition: background .2s; }
.hp-case a:hover { background: var(--void-2); }
.hp-case b { font-size: 17px; }
.hp-case span { font-size: 14px; line-height: 1.8; color: #c3cad0; }
.hp-case i { font-style: normal; color: var(--cyan-hi); }
.hp-wrap #hp-contact .wf-cta { margin-top: 0; }
@media (max-width: 760px) {
  .hp-values { grid-template-columns: 1fr; border: 0; background: none; gap: 10px; }
  .hp-values li { border: 1px solid var(--line); padding: 16px 16px 18px; }
  .hp-values b { font-size: 16px; }
  .hp-case a { grid-template-columns: 1fr auto; row-gap: 2px; padding: 16px 2px; }
  .hp-case span { grid-column: 1; grid-row: 2; }
  .hp-case i { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}

/* ------------------------------------------------------------ company (会社概要) */
.co-scope { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.co-scope li { background: var(--void); padding: 18px 18px 20px; border-top: 2px solid var(--cyan); }
.co-scope b { display: block; font-size: 17px; }
.co-scope span { display: block; margin-top: 6px; font-size: 13px; line-height: 1.7; color: var(--mute); }
.co-shop-head { display: grid; grid-template-columns: minmax(200px, 1fr) 2.4fr; gap: 28px 56px; }
.co-shop-text .wf-p { margin-bottom: .6em; }
.co-photos { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; margin-top: 30px; align-items: end; }
.co-photo { margin: 0; }
.co-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; background: #10151a; }
.co-photo figcaption { margin-top: 8px; font-size: 12.5px; color: var(--mute); }
.co-wrap .facts dd { font-weight: 700; line-height: 1.8; }
@media (max-width: 900px) {
  .co-photos { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .co-scope { grid-template-columns: 1fr; }
  .co-shop-head { grid-template-columns: 1fr; gap: 22px; }
  .co-photos { margin-top: 22px; gap: 14px; }
  .co-photo { margin-inline: calc(var(--gut) * -1); }
  .co-photo figcaption { padding-inline: var(--gut); }
}

.co-manage-flow { list-style: none; margin: 24px 0 18px; padding: 0; counter-reset: cm; border-top: 1px solid var(--line); }
.co-manage-flow li { counter-increment: cm; display: grid; grid-template-columns: 3em 14em 1fr; gap: 14px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--line); }
.co-manage-flow li::before { content: counter(cm, decimal-leading-zero); font: 400 12px var(--mono); letter-spacing: .16em; color: var(--cyan-hi); }
.co-manage-flow b { font-size: 16px; line-height: 1.5; }
.co-manage-flow span { font-size: 14.5px; line-height: 1.85; color: #c3cad0; }
.co-biz ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.co-biz li { display: grid; grid-template-columns: 5.5em 1fr auto; gap: 4px 14px; align-items: baseline; }
.co-biz li b { color: var(--cyan-hi); font-size: 14px; }
.co-biz li span { font-weight: 700; }
.co-biz li a { font-size: 13px; font-weight: 700; text-decoration: none; color: var(--ink); border-bottom: 1px solid rgba(98, 217, 240, .45); min-height: 32px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.co-biz li a i { font-style: normal; color: var(--cyan-hi); }
@media (max-width: 760px) {
  .co-manage-flow li { grid-template-columns: 2.6em 1fr; row-gap: 4px; padding: 16px 0; }
  .co-manage-flow li span { grid-column: 2; }
  .co-biz li { grid-template-columns: 1fr; gap: 2px; }
  .co-biz li a { justify-self: start; margin-top: 4px; }
}
/* 会社概要:冒頭の説明文が2〜3行になるため、このページだけ見出しを少し上げて重ならないようにする */
/* 下層ページのタイトルの大きさ(3-20)。ページ(body)と、入口からの移り変わりで使う仮の見出し(.ht-○○)の両方に同じ値を置く。
   施工:2文字なので少し大きめ/HP制作・業務改善・会社概要:4文字なので一段小さく。お問い合わせは別の配置(変更なし) */
.page-construction, .hero-title.ht-construction { --ht-fs: clamp(60px, 9.6vw, 150px); }
.page-web, .page-workflow, .page-company, .hero-title.ht-web, .hero-title.ht-workflow, .hero-title.ht-company { --ht-fs: clamp(50px, 7.6vw, 120px); }
.page-company { --ht-lift: 40px; }
@media (max-width: 760px) { .page-company { --ht-lift: 56px; } }
/* HP制作:スマホではリードが3行になるため、タイトルをその分だけ上げる(入口からの移り変わりの仮の見出しも同じ位置) */
@media (max-width: 760px) { .page-web, .hero-title.ht-web { --ht-lift: 28px; } }

/* ------------------------------------------------------------ top: 3つの入口の下(本業 → 平面から立体 → 製作例 → 施工例 → 次へ) */
.tm-wrap { position: relative; z-index: 2; background: var(--void); border-top: 1px solid var(--line); padding: 13vh var(--gut) 9vh; }
.tm-sec { max-width: 1180px; margin: 0 auto; }
.tm-sec + .tm-sec { margin-top: 13vh; }
.tm-k { margin: 0 0 12px; color: var(--cyan-hi); }
.tm-sec h2, .tm-ff h2 { margin: 0; font-size: clamp(28px, 3.2vw, 46px); font-weight: 900; line-height: 1.25; letter-spacing: .02em; }
.tm-sec h2 .nb, .tm-ff h2 .nb { display: inline-block; }
.tm-p { margin: 16px 0 0; font-size: 16px; line-height: 2; color: #d5dbe0; max-width: 32em; }
.tm-sec figure { margin: 0; }
.tm-sec figure img { display: block; width: 100%; height: auto; background: #10151a; }
.tm-sec figcaption { margin-top: 8px; font-size: 12px; color: var(--mute); line-height: 1.6; }
/* 本業:短い導入 */
.tm-intro h2 { font-size: clamp(32px, 4.2vw, 62px); }
.tm-intro .tm-p { max-width: 36em; }
/* FROM FLAT TO FORM:展開図の外形線 → 立体。PC は画面に留めてスクロール量に合わせて変化(.ff-live)。
   動きを減らす設定などでは、展開図(SVG)と立体(静止画)を並べて表示(.ff-still)。JavaScriptが無いときは展開図だけ */
.tm-ff { position: relative; max-width: 1280px; margin: 10vh auto 0; }
.tm-ff-stick { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 24px 40px; align-items: center; }
.tm-ff-text .tm-p { max-width: 22em; }
.tm-ff h2 { font-size: clamp(26px, 2.7vw, 40px); }
.tm-ff-spec { margin: 26px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding-top: 14px; border-top: 1px solid var(--line); max-width: 22em; }
.tm-ff-spec dt { font-size: 10px; letter-spacing: .14em; color: var(--mute); }
.tm-ff-spec dd { margin: 0; font-size: 15px; letter-spacing: .06em; color: var(--ink); }
.tm-ff-fig { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tm-ff-panel { position: relative; margin: 0; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(180deg, #0b1015, #080b0e); overflow: hidden; }
.tm-ff-flat { display: block; width: 100%; height: auto; padding: 6%; box-sizing: border-box; }
.tm-ff-flat .ff-out path { fill: rgba(98, 217, 240, .05); stroke: rgba(233, 237, 240, .82); stroke-width: 2.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.tm-ff-flat .ff-aux line { stroke: rgba(98, 217, 240, .5); stroke-width: 1; vector-effect: non-scaling-stroke; }
.tm-ff-flat .ff-aux .ff-c { stroke-dasharray: 14 4 2 4; }
.tm-ff-flat .ff-aux .ff-e, .tm-ff-flat .ff-aux .ff-m { stroke: rgba(233, 237, 240, .35); }
.tm-ff-cv { display: block; width: 100%; height: 100%; }
.tm-ff-p2 { aspect-ratio: 1 / 1; }
.tm-ff-p2 .tm-ff-cv { position: absolute; inset: 0; }
.tm-ff-lb { position: absolute; left: 12px; top: 10px; font-size: 11px; letter-spacing: .08em; color: var(--mute); }
html:not(.js) .tm-ff-p2, .tm-ff:not(.ff-still) .tm-ff-p2 { display: none; }
html:not(.js) .tm-ff-fig, .tm-ff:not(.ff-still) .tm-ff-fig { grid-template-columns: 1fr; }
/* 動く表示:図を1枚の大きな面に(枠なし)。PC はおよそ1.4画面分のスクロールで、展開図 → 立体 */
.tm-ff.ff-live { height: calc(100vh + 140vh); margin-top: 6vh; }
.tm-ff.ff-live .tm-ff-stick { position: sticky; top: 0; height: 100vh; box-sizing: border-box; padding: calc(var(--hd) + 2vh) 0 4vh; }
.tm-ff.ff-live .tm-ff-fig { height: 100%; min-height: 0; display: block; }
.tm-ff.ff-live .tm-ff-p1 { display: none; }
.tm-ff.ff-live .tm-ff-p2 { display: block; aspect-ratio: auto; height: 100%; border: 0; background: none; }
.tm-ff.ff-live .tm-ff-lb { display: none; }
/* 製作例:図とは別の段。写真は中くらいの大きさで、切り抜き・拡大はしない */
.tm-work { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 28px 56px; align-items: center; padding-top: 11vh; border-top: 1px solid var(--line); }
.tm-ff + .tm-work { margin-top: 12vh; }
.tm-work-text .tm-p { max-width: 22em; }
.tm-work h2, .tm-site h2 { font-size: clamp(26px, 2.6vw, 38px); }
.tm-work-ph { justify-self: end; width: min(100%, 600px); }
.tm-sec .tm-work-ph img { background: radial-gradient(60% 62% at 52% 48%, #222c34 0, #131920 64%, #0d1115 100%); border-radius: 8px; }
/* 施工例 */
.tm-site { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px 56px; align-items: center; }
.tm-site-ph { width: min(100%, 420px); }
.tm-sec .tm-site-ph img { aspect-ratio: 3 / 4; border-radius: 6px; }
/* 次へ:施工ページ + 小さなリンク */
.tm-next { margin-top: 11vh !important; }
.tm-main-link { margin: 0; max-width: 420px; }
.tm-main-link a { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; align-items: baseline; padding: 22px 22px 24px; border: 1px solid rgba(98, 217, 240, .55); border-radius: 10px; background: linear-gradient(160deg, rgba(28, 174, 208, .16), rgba(28, 174, 208, .03)); text-decoration: none; transition: background .2s; }
.tm-main-link a:hover { background: rgba(28, 174, 208, .2); }
.tm-main-link .mono { grid-column: 1 / -1; font-size: 10px; color: var(--cyan-hi); }
.tm-main-link b { font-size: clamp(22px, 2vw, 28px); font-weight: 900; }
.tm-main-link i { font-style: normal; color: var(--cyan-hi); font-size: 20px; grid-row: 2; grid-column: 2; }
.tm-main-link small { grid-column: 1 / -1; font-size: 13px; color: var(--mute); }
.tm-sub-links { margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 2px 20px; }
.tm-sub-links a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; text-decoration: none; font-size: 13.5px; font-weight: 700; color: #c3cad0; border-bottom: 1px solid var(--line); }
.tm-sub-links a:hover { color: var(--ink); border-bottom-color: rgba(98, 217, 240, .45); }
.tm-sub-links a i { font-style: normal; color: var(--cyan-hi); }
@media (max-width: 760px) {
  .tm-wrap { padding: 10vh var(--gut) 7vh; }
  .tm-sec + .tm-sec { margin-top: 10vh; }
  .tm-p { font-size: 15px; line-height: 1.95; }
  .tm-ff { margin-top: 9vh; }
  .tm-ff-stick { grid-template-columns: 1fr; gap: 22px; }
  .tm-ff-fig { grid-template-columns: 1fr !important; gap: 12px; }
  /* スマホ:画面に留めない。図が画面を通り過ぎる間に変化する(弱めの動き) */
  .tm-ff.ff-live { height: auto; margin-top: 9vh; }
  .tm-ff.ff-live .tm-ff-stick { position: static; height: auto; padding: 0; }
  .tm-ff.ff-live .tm-ff-fig { height: auto; }
  .tm-ff.ff-live .tm-ff-p2 { aspect-ratio: 1 / 1; height: auto; }
  .tm-ff + .tm-work { margin-top: 9vh; }
  .tm-work { grid-template-columns: 1fr; gap: 20px; padding-top: 8vh; }
  .tm-work-ph { justify-self: center; width: 100%; }
  .tm-site { grid-template-columns: 1fr; gap: 20px; }
  .tm-site-ph { width: 86%; }
  .tm-next { margin-top: 9vh !important; }
  .tm-main-link { max-width: none; }
}

/* ------------------------------------------------------------ 施工ページ:写真の拡大表示 */
.ph-zoom { display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: zoom-in; position: relative; border-radius: 2px; transition: transform .35s cubic-bezier(.2, .7, .1, 1), box-shadow .35s; }
.ph-zoom img { transition: filter .35s; }
.ph-zoom:focus-visible { outline: 2px solid rgba(98, 217, 240, .8); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .ph-zoom:not(.is-badge):hover { transform: translateY(-3px) scale(1.012); box-shadow: 0 0 0 1px rgba(98, 217, 240, .55), 0 14px 30px -12px rgba(0, 0, 0, .8), 0 0 22px -8px rgba(98, 217, 240, .35); }
  .ph-zoom:not(.is-badge):hover img { filter: brightness(1.06); }
}
/* 拡大できる写真の右下の「VIEW +」(写真の外観は変えない。PCは薄く表示し、乗せると少し濃く/タッチ端末は常に控えめに表示) */
.ph-zoom:not(.is-badge)::after { content: 'VIEW +'; position: absolute; right: 8px; bottom: 8px; padding: 5px 8px 4px; font: 400 9.5px/1 var(--mono); letter-spacing: .16em; color: var(--ink); background: rgba(6, 8, 11, .58); border: 1px solid rgba(233, 237, 240, .2); border-radius: 2px; opacity: .55; pointer-events: none; transition: opacity .25s, border-color .25s; }
@media (hover: hover) and (pointer: fine) { .ph-zoom:not(.is-badge):hover::after, .ph-zoom:not(.is-badge):focus-visible::after { opacity: .95; border-color: rgba(98, 217, 240, .55); } }
@media (hover: none), (pointer: coarse) { .ph-zoom:not(.is-badge)::after { opacity: .75; } }
.ph-zoom.is-badge { position: absolute; right: 8px; top: 8px; width: auto; height: auto; padding: 6px 10px; border-radius: 14px; background: rgba(6, 8, 11, .7); font-size: 12px; }
.lb { position: fixed; inset: 0; z-index: 60; }
.lb[hidden] { display: none; }
.lb-bg { position: absolute; inset: 0; background: rgba(4, 6, 8, .94); opacity: 0; transition: opacity .38s ease; }
.lb-stage { position: absolute; left: 64px; right: 64px; top: calc(56px + env(safe-area-inset-top, 0px)); bottom: calc(44px + env(safe-area-inset-bottom, 0px)); }
.lb-img { position: fixed; display: block; object-fit: contain; background: #10151a; transform-origin: 0 0; transition: transform .38s cubic-bezier(.2, .7, .1, 1), opacity .14s; box-shadow: 0 20px 60px -20px rgba(0, 0, 0, .8); }
.lb-img.is-swap { opacity: 0; }
.lb-n { position: absolute; left: 0; right: 0; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); margin: 0; text-align: center; font-size: 11px; letter-spacing: .14em; color: var(--mute); }
.lb-btn { position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(233, 237, 240, .3); background: rgba(6, 8, 11, .7); color: var(--ink); font: 400 20px/1 var(--sans); cursor: pointer; }
.lb-n, .lb-btn { opacity: 0; transition: opacity .3s ease .1s; }
.lb.is-on .lb-bg, .lb.is-on .lb-n, .lb.is-on .lb-btn { opacity: 1; }
.lb-btn:hover { border-color: var(--cyan-hi); }
.lb-btn:focus-visible { outline: 3px solid rgba(98, 217, 240, .7); outline-offset: 2px; }
.lb-close { top: calc(6px + env(safe-area-inset-top, 0px)); right: 8px; font-size: 26px; }
.lb-prev { left: 8px; top: 50%; margin-top: -24px; }
.lb-next { right: 8px; top: 50%; margin-top: -24px; }
.lb-btn[hidden] { display: none; }
html.lb-open, html.lb-open body { overflow: hidden; }
@media (max-width: 760px) {
  .lb-stage { left: 8px; right: 8px; top: calc(60px + env(safe-area-inset-top, 0px)); bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .lb-prev, .lb-next { top: auto; margin-top: 0; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .lb-n { bottom: calc(30px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .lb-img, .lb-bg, .lb-n, .lb-btn, .ph-zoom, .ph-zoom img { transition: none; } }

/* ------------------------------------------------------------ 会社概要:WORKSHOP の中の ACCESS(地図の色は変えず、枠の周りだけサイトに合わせる) */
.co-access { margin-top: 56px; scroll-margin-top: calc(var(--hd) + 20px); }
.co-access-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; margin-bottom: 16px; }
.co-access-head .mono { margin: 0; font-size: 11px; letter-spacing: .2em; color: var(--cyan-hi); }
.co-access-addr { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: .04em; }
.co-access-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 13.5px; font-weight: 700; color: #c3cad0; text-decoration: none; border-bottom: 1px solid var(--line); }
.co-access-link:hover { color: var(--ink); border-bottom-color: rgba(98, 217, 240, .45); }
.co-access-link i { font-style: normal; color: var(--cyan-hi); }
.co-map { position: relative; height: 390px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: #0d1115; }
.co-map iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }
.co-addr-map { margin-left: 12px; font-size: 12.5px; color: var(--mute); text-decoration: none; border-bottom: 1px solid var(--line); white-space: nowrap; }
.co-addr-map:hover { color: var(--ink); }
.co-addr-map i { font-style: normal; margin-left: 3px; color: var(--cyan-hi); }
@media (max-width: 760px) {
  .co-access { margin-top: 40px; }
  .co-map { height: 310px; }
}

/* ------------------------------------------------------------ 業務改善の動画:再生中の PAUSE は控えめに(乗せる・選ぶと濃く) */
.wf-video[data-state="playing"] .wf-video-btn { opacity: .72; min-height: 36px; padding: 0 13px; }
.wf-video[data-state="playing"] .wf-video-btn:hover, .wf-video[data-state="playing"] .wf-video-btn:focus-visible { opacity: 1; }
.wf-video[data-state="playing"] .wf-video-ic { font-size: 11px; letter-spacing: -.05em; }

/* ------------------------------------------------------------ TOP 最下部:施工写真への導線の右下に「3つの入口に戻る」だけを置く */
.tm-next { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 40px; }
.tm-next .tm-sub-links { margin: 0; }
@media (max-width: 760px) { .tm-next { display: block; } .tm-next .tm-sub-links { margin-top: 14px; } }

/* ------------------------------------------------------------ PAGE TOP(全ページ共通。右下に小さく。上部・演出の間は出さない) */
.page-top { position: fixed; z-index: 28; right: calc(14px + env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 2px; background: rgba(6, 8, 11, .78); color: var(--mute); font: inherit; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .25s, transform .25s, visibility 0s linear .25s, border-color .2s, color .2s; }
.page-top .mono { font-size: 9.5px; letter-spacing: .22em; }
.page-top i { font-style: normal; font-size: 13px; color: var(--cyan-hi); }
.page-top.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .25s, visibility 0s, border-color .2s, color .2s; }
.page-top:hover { color: var(--ink); border-color: rgba(98, 217, 240, .5); }
.page-top:focus-visible { outline: 2px solid var(--cyan-hi); outline-offset: 2px; }
html.lb-open .page-top, html.menu-open .page-top, html.is-leaving .page-top, html:not(.js) .page-top { visibility: hidden !important; opacity: 0 !important; }
@media (max-width: 760px) {
  .page-top { right: calc(10px + env(safe-area-inset-right, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); width: 44px; min-height: 44px; padding: 0; flex-direction: column; justify-content: center; gap: 1px; }
  .page-top .mono { order: 2; font-size: 7.5px; letter-spacing: .14em; }
  .page-top .mono { visibility: hidden; position: absolute; }
  .page-top::after { content: 'TOP'; order: 2; font: 400 7.5px/1 var(--mono); letter-spacing: .16em; }
}