/* タカネ電業 第3版 案 D「街に電気が通る」
   2026-11-05 夜 カヲル：スイスの組へ組み直し（なおさん「文字組もブロックマンに」「スイステイストも入れて」
   「ゴシックと明朝をうまくまぜてね。英語も飾りで使っていいよ」「文字や画像もパララックス全開で気持ちよい動きにして」）。
   ── 決まり ──────────────────────────────────────────
   格子：12 列・列の間 --u（30px）。字のかたまりの左端は 1 列目と 7 列目の 2 本だけ（1440 で 63px・735px）。携帯は 1 本（20px）。
         写真・絵の窓は列の線に乗せる。窓の中に字を置く所（頭・映像の帯・黒板）は、窓を余白へ 1u はみ出させ（--bleed）、字を 1 列目に残す。
         段の間・行送り・余白は --u の倍数（携帯の 30px の見出しだけ 1.5u）。
   書体：ゴシックは 1 家族（--ja：端末のヒラギノ角ゴ／游ゴシック。--ja-l：Web の UD 新ゴ L）。手元に入っている AXIS・UD 新ゴは使わない（なおさんの Mac だけ字が変わり、先方や携帯と字詰めが違って見えたため。11/05）。明朝（--min）は「読ませる声」だけ：灯る文・特集の題・人の言葉・抜き書き・締めの一文。
         英字（Neue Haas）は飾りとして大きく：Behind every switch.・Housing・Feature 01・数・番号。英字の小札は使わない。
   大きさ：6 種＝12 / 16 / 20 / 48 / 80 / 120（携帯は 12 / 16 / 18 / 30 / 40 / 56）。
   地：白〜水色の一色（--bg）。紺は頭（夜の街の窓）と締めだけ。工事黒板の深緑は「物」として一枚。
   古い型を外した：英字の小札と点・丸の矢印・回転・ふきだし・影の札・段差・配線の線・白と灰の互い違い・左右交互（言葉は左、写真は右か全幅）。 */
:root{
  --bg:#F1F4F7; --paper:#fff; --ink:#151D27; --tx:#4A5562; --tx2:#737D88; --line:rgba(21,29,39,.14);
  --dk:#111821; --dk2:#18212C; --dk3:#202B37; --board:#1d2a26;
  --cta:#0C74B4;   /* ご相談・採用のボタンの水色（白い字でも地の上の字でも 4.5:1 を超える一番明るい水色。11/05 なおさん「紺より水色」） */
  --acc:#39B8F0;                                                         /* 光（電気）の水色。差し色はこれ一つ */
  --w0:#D6DCE2; --w1:#C8D0D8; --w2:#B9C2CC;
  --ja:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","YuGothic",sans-serif;   /* 本文は端末の字（Web の UD 新ゴは L＝300 だけなので、本文に使うと全部細字になる） */
  --ja-l:"a-otf-ud-shin-go-pr6n","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","YuGothic",sans-serif;   /* 細字（300）の見出しだけ Web の UD 新ゴ L（Adobe Fonts の束 qzw5tav） */
  --min:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP",serif;
  --en:"Neue Haas Grotesk Display Pro","neue-haas-grotesk-display","Helvetica Neue LT Std","Helvetica Neue",Helvetica,sans-serif;
  /* 字の 6 段と行送り（行送りは --u の倍数） */
  --f1:12px; --f2:16px; --f3:20px; --f4:48px; --f5:80px; --f6:120px;
  --l1:20px; --l2:30px; --l3:30px; --l4:60px; --l5:90px; --l6:150px;
  --u:30px; --gut:clamp(20px,4.4vw,72px); --max:1600px;
  --bleed:max(0px, calc(var(--gut) - var(--u)));                         /* 字を乗せる窓が余白へはみ出す量（1440 で 33px） */
  --x1:max(var(--gut), calc((100% - var(--max)) / 2 + var(--gut)));       /* 全幅の箱の中での 1 列目の頭 */
  --hd:90px; --r:28px; --r-s:16px;
  --out:cubic-bezier(.16,1,.3,1); --soft:cubic-bezier(.4,0,0,1); --hv:cubic-bezier(.33,0,.15,1);
}
@media (max-width:767px){:root{--f3:18px;--f4:30px;--f5:40px;--f6:56px;--l4:45px;--l5:60px;--l6:75px;--hd:60px;--r:20px;--r-s:12px}}
*{margin:0;padding:0;box-sizing:border-box}
html{line-height:var(--u)}
body{background:var(--bg);color:var(--ink);font:400 var(--f2)/var(--l2) var(--ja);letter-spacing:.04em;overflow-x:hidden;-webkit-font-smoothing:antialiased;font-synthesis:none}
:lang(ja){word-break:auto-phrase;line-break:strict}
a{color:inherit;text-decoration:none}
ol,ul{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;letter-spacing:inherit}
svg{display:block}
img,video{display:block}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.fr{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--u)}
.sec{padding-block:calc(var(--u) * 5)}
.kari{display:none}.show-kari .kari{display:inline-block;margin-inline-start:.5em;padding:0 .45em;border:1px solid currentColor;border-radius:3px;font:400 10px/16px var(--en);opacity:.6;vertical-align:middle}
.vtag{display:none}.show-kari .vtag{display:block;position:fixed;left:50%;bottom:12px;transform:translateX(-50%);z-index:60;background:rgba(17,24,33,.88);color:#fff;font:400 12px/1 var(--en);padding:8px 12px;border-radius:99px;white-space:nowrap}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- 字の役 ---------- */
.h1{font:300 var(--f5)/var(--l5) var(--ja-l);letter-spacing:.02em;font-feature-settings:"palt"}
.h2{font:300 var(--f4)/var(--l4) var(--ja-l);letter-spacing:.02em;font-feature-settings:"palt"}
.lead{font:400 var(--f3)/var(--l3) var(--ja);color:var(--tx)}
.tx{color:var(--tx)}
.cap{display:block;font:400 var(--f1)/var(--l1) var(--ja);letter-spacing:.06em;color:var(--tx2)}
/* 明朝は読ませる声だけ */
.lt__t,.mg__t,.mg__pq,.mg__body .q,.cl__h{font-family:var(--min);font-weight:400}
/* 欧文：lang="en" の所だけ。小文字の字間は触らない。本文の数字はオールドスタイル、表と数はライニングの等幅 */
:where(p,li,dd,figcaption):lang(en){font-variant-numeric:oldstyle-nums proportional-nums;hyphens:auto;text-wrap:pretty}
:where(table,.l-num,[data-num]){font-variant-numeric:lining-nums tabular-nums}
:where(h1,h2,h3,h4,h5,h6):lang(en){hyphens:manual}
.yr__stats b,.cl__tel,.mn__tel,.hd__tel,.nw__d,.dv__no,.path span{font-variant-numeric:lining-nums tabular-nums}

/* ---------- 押せる所の印：細い線の矢印（丸は使わない）。触れると右へ 6px、色は水色へ ---------- */
.tl{display:inline-flex;align-items:center;gap:calc(var(--u) / 2);font:500 var(--f2)/var(--l2) var(--ja);letter-spacing:.08em;transition:color .45s var(--soft)}
.tl b{font-weight:500}
.tl i,.ar,.btn i{position:relative;display:block;flex:none;width:32px;height:9px;transition:transform .5s var(--soft)}
.tl i::before,.ar::before,.btn i::before{content:"";position:absolute;left:0;right:1px;top:4px;height:1px;background:currentColor}
.tl i::after,.ar::after,.btn i::after{content:"";position:absolute;right:1px;top:1px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
@media (hover:hover){.tl:hover{color:var(--acc)}.tl:hover i{transform:translateX(6px)}}
.btn{display:inline-flex;align-items:center;gap:var(--u);height:calc(var(--u) * 2);padding-inline:var(--u);border-radius:99px;background:var(--ink);color:#fff;font:500 var(--f2)/1 var(--ja);letter-spacing:.12em;transition:background-color .5s var(--soft),color .5s var(--soft)}
@media (hover:hover){.btn:hover{background:var(--acc);color:#fff}.btn:hover i{transform:translateX(6px)}}
.btn--w{background:#fff;color:var(--ink)}
.play{display:inline-flex;align-items:center;gap:12px;font:400 var(--f2)/var(--l2) var(--en);letter-spacing:.02em;transition:color .45s var(--soft)}
.play i{width:0;height:0;border-left:10px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}
@media (hover:hover){.play:hover{color:var(--acc)}}
.ul{position:relative}
.ul::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--soft)}
@media (hover:hover){.ul:hover::after{transform:scaleX(1)}}

/* ---------- 文字と写真の出方 ---------- */
/* 見出し：語ごとに、下の 110%・6° 傾いた所から 1.4 秒でせり上がる。語ごとに 0.06 秒 */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.w>i{display:inline-block;font-style:normal;transform:translate3d(0,110%,0) rotate(6deg);transform-origin:0 100%;transition:transform 1.4s var(--out);transition-delay:calc(var(--i,0) * .06s)}
.in .w>i,.w.in>i{transform:none}
/* 文：ぼかし 10px・20px 下・透明から 1.6 秒で浮かぶ（BPC）。かたまりの中は 0.08 秒ずつ */
[data-m=b]>*{opacity:0;transform:translate3d(0,20px,0);filter:blur(10px);transition:opacity 1.6s var(--soft),transform 1.6s var(--soft),filter 1.6s var(--soft);transition-delay:calc(var(--i,0) * .08s + var(--d,0s))}
[data-m=b].in>*{opacity:1;transform:none;filter:none}
/* 写真：下から幕が上がり（1.4 秒）、中は 1.16 倍から 2.2 秒で落ち着く */
[data-m=p]{clip-path:inset(100% 0 0 0 round var(--rr,var(--r)));transition:clip-path 1.4s var(--out)}
[data-m=p].in{clip-path:inset(0 0 0 0 round var(--rr,var(--r)))}
[data-m=p] .ph__in{transform:scale(1.16);transition:transform 2.2s var(--out)}
[data-m=p].in .ph__in{transform:scale(1.02)}
/* 並ぶ物：左から順に、わずかに沈んだ所から。ずらしは --st（全部出そろうまで 0.8 秒以内） */
[data-m=pop]>*{opacity:0;transform:translate3d(0,14px,0);transition:opacity .9s var(--soft),transform 1.1s var(--out);transition-delay:calc(var(--i,0) * var(--st,.12s) + var(--d,0s))}
[data-m=pop].in>*{opacity:1;transform:none}

/* ---------- 窓（写真・動画・絵） ---------- */
.ph{position:relative;display:block;overflow:hidden;border-radius:var(--rr,var(--r));background:var(--w0)}
.ph__in{position:absolute;inset:-6%;display:block;background:linear-gradient(118deg,var(--w0) 0 36%,var(--w1) 36% 64%,var(--w0) 64%)}
.ph__in>img,.lv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph__k{position:absolute;left:var(--u);top:var(--u);z-index:2;font:400 var(--f1)/var(--l1) var(--en);color:rgba(21,29,39,.48);white-space:nowrap}
.ph:has(img) .ph__k,.ph:has(.lv) .ph__k{display:none}
.dk .ph{background:var(--dk3)}.dk .ph__in{background:linear-gradient(118deg,var(--dk3) 0 36%,#26323f 36% 64%,var(--dk3) 64%)}
/* 押せる写真だけ、触れるとゆっくり寄る（1.6 秒・1.018 倍） */
@media (hover:hover){a:hover .ph__in{transform:scale(1.018);transition:transform 1.6s var(--hv)}}

/* ---------- 上の帯：左にメニュー、中央にロゴ、右に音・電話・エントリー ---------- */
.hd{position:fixed;inset:0 0 auto;z-index:50;height:var(--hd);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding-inline:var(--x1);color:var(--ink);transition:background-color .6s var(--soft),height .6s var(--soft)}
.hd.is-s{height:calc(var(--u) * 2);background:rgba(241,244,247,.86);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.pill{display:inline-flex;align-items:center;gap:12px;height:44px;padding-inline:20px;border-radius:99px;border:1px solid currentColor;font:500 var(--f1)/1 var(--en);letter-spacing:.16em;text-transform:uppercase;transition:background-color .45s var(--soft),color .45s var(--soft),border-color .45s var(--soft)}
.pill--fill{background:var(--ink);color:#fff;border-color:var(--ink)}
@media (hover:hover){.pill:hover{background:var(--acc);border-color:var(--acc);color:#fff}}
.burger{display:inline-flex;flex-direction:column;gap:6px;width:24px}
.burger i{display:block;height:1px;background:currentColor;transition:transform .5s var(--soft),opacity .3s var(--soft)}
.mn-open .burger i:nth-child(1){transform:translateY(7px) rotate(45deg)}.mn-open .burger i:nth-child(2){opacity:0}.mn-open .burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.hd__l{justify-self:start}
.hd__logo{justify-self:center;transition:color .4s var(--soft),opacity .6s var(--soft)}
.hd__logo svg{height:22px;width:auto}
.hd.is-top .hd__logo{opacity:0;pointer-events:none}                       /* 頭の大きな TAKANE が見えている間は、帯のロゴを出さない */
@media (hover:hover){.hd__logo:hover{color:var(--acc)}}
.hd__r{justify-self:end;display:flex;align-items:center;gap:var(--u)}
.hd__tel{font:400 var(--f2)/1 var(--en);letter-spacing:.04em}
/* 音の切り替え（上の帯の中の一語。既定は鳴らない） */
.snd{display:inline-flex;align-items:center;gap:10px;height:44px;font:500 var(--f1)/1 var(--en);letter-spacing:.16em;text-transform:uppercase;transition:color .45s var(--soft)}
.snd b{font-weight:500;color:var(--tx2)}.snd[aria-pressed=true] b{color:var(--acc)}
.snd__i{display:inline-flex;align-items:flex-end;gap:2px;height:12px}
.snd__i i{display:block;width:2px;height:4px;background:currentColor;border-radius:1px}
.snd[aria-pressed=true] .snd__i i{animation:sndBar 1.2s ease-in-out infinite}.snd[aria-pressed=true] .snd__i i:nth-child(2){animation-delay:.2s}.snd[aria-pressed=true] .snd__i i:nth-child(3){animation-delay:.4s}
@keyframes sndBar{0%,100%{height:4px}50%{height:12px}}
@media (hover:hover){.snd:hover{color:var(--acc)}}
/* 用件の入口（11/05 採点表 17「導線」）：工事のご相談と採用は、どの幅でも一画面目の上の帯に */
.pill--ja{gap:0;font-family:var(--ja);letter-spacing:.08em}
.nb{white-space:nowrap}
.snd--mn{display:none;color:rgba(255,255,255,.7);margin-bottom:var(--u)}
/* 幅で言葉を短くする：1400 未満は音をメニューの中へ、1100 以下は「ご相談」、1000 以下はロゴを左へ寄せ「発注者」、携帯は「ご相談」「採用」の 2 つ */
@media (max-width:1399px){.hd__r .snd{display:none}.snd--mn{display:inline-flex}}
@media (max-width:1100px){.pill .lg{display:none}}
@media (max-width:1000px){.hd{grid-template-columns:auto 1fr auto}.hd__logo{justify-self:start;margin-left:12px}.hd__r{gap:12px}.pill .lg2{display:none}}
@media (max-width:767px){.hd.is-s{height:var(--hd)}.hd__logo svg{height:16px}.pill--menu>span:not(.burger){display:none}.pill--menu{width:44px;height:44px;padding:0;justify-content:flex-start;border-color:transparent}   /* 携帯のメニューの印は丸で囲まず、細い 3 本の線だけ（アマン・BPC と同じ。線の左端を字の左にそろえる） */
  .hd__r{gap:6px}.hd__r .pill{height:36px;padding-inline:10px;letter-spacing:.04em}.pill--cl,.pill .lg3{display:none}}

/* ---------- メニュー（全面の紺の板）：和文の大きな字の後に英字を添える。開くと上から 0.06 秒ずつ浮かぶ ---------- */
.mn{position:fixed;inset:0;z-index:49;background:var(--dk);color:#fff;opacity:0;visibility:hidden;transition:opacity .5s var(--soft),visibility 0s linear .5s;overflow:auto}
.mn-open .mn{opacity:1;visibility:visible;transition:opacity .5s var(--soft)}
.mn-open body{overflow:hidden}
.mn-open .hd{color:#fff;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.mn-open .hd .pill--fill{background:#fff;color:var(--ink);border-color:#fff}
.mn-open .hd .hd__logo{opacity:1;pointer-events:auto}
.mn__in{min-height:100%;align-items:end;padding-block:calc(var(--hd) + var(--u) * 2) calc(var(--u) * 2)}
.mn__l{grid-column:1/7}
.mn__l li{border-top:1px solid rgba(255,255,255,.14)}
.mn__l a{display:flex;align-items:baseline;gap:var(--u);padding-block:calc(var(--u) / 2);transition:color .45s var(--soft)}
.mn__l b{font:300 var(--f4)/var(--l4) var(--ja-l);letter-spacing:.02em}
.mn__l span{font:400 var(--f1)/1 var(--en);letter-spacing:.04em;color:rgba(255,255,255,.55)}
@media (hover:hover){.mn__l a:hover{color:var(--acc)}}
.mn__side{grid-column:7/13}
.mn__tel{display:block;width:max-content;font:300 var(--f4)/var(--l4) var(--en);letter-spacing:.02em;transition:color .45s var(--soft)}
@media (hover:hover){.mn__tel:hover{color:var(--acc)}}
.mn__side p{color:rgba(255,255,255,.7)}
.mn__side p:first-of-type{margin-top:var(--u)}
.mn__side .btn{margin-top:calc(var(--u) * 2)}
.mn__l li,.mn__side{opacity:0;transform:translate3d(0,18px,0);transition:opacity .8s var(--soft),transform .8s var(--out)}
.mn-open .mn__l li,.mn-open .mn__side{opacity:1;transform:none}
.mn-open .mn__l li:nth-child(1){transition-delay:.08s}.mn-open .mn__l li:nth-child(2){transition-delay:.14s}.mn-open .mn__l li:nth-child(3){transition-delay:.2s}
.mn-open .mn__l li:nth-child(4){transition-delay:.26s}.mn-open .mn__l li:nth-child(5){transition-delay:.32s}.mn-open .mn__l li:nth-child(6){transition-delay:.38s}.mn-open .mn__side{transition-delay:.44s}
@media (max-width:767px){.mn__in{align-items:start;padding-block:calc(var(--hd) + var(--u)) var(--u)}.mn__side{margin-top:calc(var(--u) * 2)}}

/* ---------- 頭：角の丸い窓の中の街のループ。送ると画面いっぱいに開く ---------- */
.town{position:relative;height:260svh;background:var(--bg);color:#fff}
.town__st{position:sticky;top:0;height:100svh;padding:var(--hd) var(--bleed) var(--bleed)}
.town__fr{position:relative;height:100%;border-radius:var(--r);overflow:hidden;background:#cfd6dd;
  --x1:max(calc(var(--gut) - var(--bleed)), calc((100% - var(--max)) / 2 + var(--gut)))}   /* 窓が余白からはみ出した分だけ内へ：字は 1 列目 */
.town__logo{position:absolute;left:var(--x1);right:var(--x1);top:calc(var(--u) * 2);z-index:3;color:#fff}
.town__logo svg{width:100%;height:auto}
.town__logo svg path{fill:none;stroke:currentColor;stroke-width:1.8px;vector-effect:non-scaling-stroke}
.town__logo svg:not(.glow){position:relative;filter:drop-shadow(0 0 14px rgba(10,16,24,.45))}
.logo-fill .town__logo svg path{fill:currentColor;stroke:none}
.logo-off .town__logo{display:none}
.town__shade{position:absolute;inset:auto 0 0;height:58%;z-index:4;background:linear-gradient(0deg,rgba(17,24,33,.82) 0,rgba(17,24,33,.5) 45%,rgba(17,24,33,0));pointer-events:none}
.town__fr::before{content:"";position:absolute;inset:0 0 auto;height:34%;z-index:2;background:linear-gradient(180deg,rgba(17,24,33,.42),rgba(17,24,33,0));pointer-events:none}
/* 字：言葉は 1 列目、会社の一文は 7 列目。下の線をそろえる */
.town__bt{position:absolute;left:var(--x1);right:var(--x1);bottom:calc(var(--u) * 2);z-index:5;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--u);align-items:end}
.catch{grid-column:1/7;color:#fff;font:300 var(--f5)/var(--l5) var(--ja-l);letter-spacing:.02em;font-feature-settings:"palt"}
.catch>span{display:none}
.copy-a .c-a,.copy-b .c-b,.copy-c .c-c,.copy-d .c-d,.copy-h .c-h{display:block}
.c-h__en{display:block;font:300 var(--f5)/var(--l5) var(--en);letter-spacing:-.01em}
.c-h__en .w{margin-right:.24em}
.c-h__ja{display:block;margin-top:var(--u);font:400 var(--f3)/var(--l3) var(--ja)}
.town__copy{grid-column:7/12;color:rgba(255,255,255,.86)}
.town__copy .tx{color:inherit}
.town__h{font:500 var(--f2)/var(--l2) var(--ja);letter-spacing:.12em;color:#fff}
/* 頭のループ（既定）：動画を窓いっぱいに */
.town__v{display:none}
.town-loop .town__v{display:block;z-index:1;background:#1b232d}
.town-loop .town{height:100svh;min-height:640px}
.town-loop .lay,.town-loop .fg,.town-loop .lights{display:none}
.town-loop .town__fr{--ct:var(--hd);--cs:var(--bleed);--cr:var(--r)}
/* PC（細かく指せる・動きを減らさない）：窓は clip-path で切り、--ct（上）・--cs（左右と下）・--cr（角）を d.js が送った量で 0 へ。字は頁の格子のまま動かない */
@media (hover:hover) and (min-width:768px) and (prefers-reduced-motion:no-preference){
  html.town-loop:not([data-motion=reduce]) .town{height:175svh}
  html.town-loop:not([data-motion=reduce]) .town__st{padding:0}
  html.town-loop:not([data-motion=reduce]) .town__fr{border-radius:0;clip-path:inset(var(--ct) var(--cs) var(--cs) var(--cs) round var(--cr));--x1:max(var(--gut), calc((100% - var(--max)) / 2 + var(--gut)))}
  html.town-loop:not([data-motion=reduce]) .town__logo{top:calc(var(--ct) + var(--u) * 2)}
  html.town-loop:not([data-motion=reduce]) .town__bt{bottom:calc(var(--bleed) + var(--u) * 2)}
  html.town-loop:not([data-motion=reduce]) .town__fr::before{top:var(--ct)}
  html.town-loop:not([data-motion=reduce]) .town__v{transform:scale(var(--vz,1.06));transform-origin:50% 60%}
}
/* 灰の仮・一枚絵の昼→夜（?town=gray|s21|city） */
.lay{position:absolute;inset:0;will-change:opacity}
.lay .ph__k{color:rgba(21,29,39,.55)}
.lay--day{background:linear-gradient(160deg,#dfe5ea 0 44%,#d2d9e0 44% 70%,#c7cfd7 70%)}
.lay--dusk{opacity:0;background:linear-gradient(160deg,#7d8796 0 44%,#6b7685 44% 70%,#5b6676 70%)}
.lay--night{opacity:0;background:linear-gradient(160deg,#1c2632 0 44%,#202b38 44% 70%,#18212b 70%)}
.fg{position:absolute;left:36%;bottom:0;width:13%;height:74%;z-index:3;border-radius:6px 6px 0 0;background:var(--fgc,#b4bdc7);display:flex;align-items:flex-start;justify-content:center;padding-top:12px}
.fg span{font:400 var(--f1)/var(--l1) var(--en);color:rgba(21,29,39,.55);text-align:center}
.lights{position:absolute;right:var(--x1);top:var(--u);z-index:5;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.lights li{display:inline-flex;align-items:center;height:var(--u);padding-inline:14px;border-radius:99px;background:rgba(255,255,255,.92);color:var(--ink);font:500 var(--f1)/1 var(--ja);opacity:0;transition:opacity .7s var(--out)}
.lights li.on{opacity:1}
.town-gray .town__logo,.town-s21 .town__logo,.town-city .town__logo{color:var(--logo,#151d27)}
.town-s21 .lay .ph__k,.town-city .lay .ph__k,.town-s21 .fg,.town-city .fg{display:none}
/* 頭の線の TAKANE：配線を引くように 2.6 秒で描かれ、2 度またたいて点き、水色の光が 14 秒かけて輪郭を巡り続ける（ネオン管。11/05 なおさん） */
.js .town__logo path:not(.spark):not(.glow){stroke-dasharray:var(--L,9999px);stroke-dashoffset:var(--L,9999px)}
.js .town.drawn .town__logo path:not(.spark):not(.glow){stroke-dashoffset:0;transition:stroke-dashoffset 2.6s cubic-bezier(.45,0,.25,1) .2s}
.town__logo .spark{stroke:#bfeaff;stroke-width:2.2px;opacity:0}
/* 白の線の後ろの蛍光の水色（11/05 なおさん「蛍光ブルーみたいな感じで、ほわんほわん」「白はそのまま残して、背景に」）。太さとぼかしは画面の幅に比例（携帯で太りすぎず、PC で消えない） */
.town__logo svg.glow{position:absolute;left:0;top:0;opacity:0;filter:blur(calc(1px + .1vw)) drop-shadow(0 0 calc(3px + .3vw) #22b4ff) drop-shadow(0 0 calc(8px + .8vw) rgba(34,180,255,.8))}
.town__logo path.glow{stroke:#22b4ff;stroke-width:calc(3px + .3vw)}
.js .town.drawn .town__logo .spark{stroke-dasharray:calc(var(--L,4000px) * .18) var(--L,4000px);animation:neonRun 14s linear 2.8s infinite both}
.js .town.drawn .town__logo svg.glow{animation:neonOn .9s steps(1,end) 2.6s 1 both,neonFlick 13s linear 3.5s infinite}
/* 管そのものも時々またたく。周期を 13 秒と 19 秒でずらし、決まった間隔に見せない（11/05 なおさん「AKIRA のネオンみたいに、定期的な点滅ではなく不定期にチカチカ」） */
.js .town.drawn .town__logo svg:not(.glow){animation:tubeFlick 19s linear 3.5s infinite}
@keyframes neonRun{0%{stroke-dashoffset:0;opacity:.85}100%{stroke-dashoffset:calc(var(--L,4000px) * -1);opacity:.85}}
@keyframes neonOn{0%{opacity:0}15%{opacity:.6}25%{opacity:.08}45%{opacity:.75}55%{opacity:.2}100%{opacity:.85}}
@keyframes neonFlick{0%{opacity:.85}17%{opacity:.7}18%{opacity:.8}18.4%{opacity:.25}18.8%{opacity:.85}19.3%{opacity:.12}19.8%{opacity:.8}38%{opacity:.68}52%{opacity:.85}54%{opacity:.85}54.3%{opacity:.35}54.7%{opacity:.85}77%{opacity:.75}78%{opacity:.75}78.3%{opacity:.08}79.6%{opacity:.08}80%{opacity:.6}80.4%{opacity:.2}80.9%{opacity:.75}81.3%{opacity:.4}82%{opacity:.85}100%{opacity:.85}}
@keyframes tubeFlick{0%,31%{opacity:1}31.3%{opacity:.5}31.7%{opacity:1}68%{opacity:1}68.3%{opacity:.35}68.8%{opacity:.95}69.2%{opacity:.45}69.8%{opacity:1}88%{opacity:1}88.2%{opacity:.7}88.5%{opacity:1}100%{opacity:1}}
.town.off .town__logo .spark,.town.off .town__logo svg{animation-play-state:paused}
.logo-fill .town__logo .spark,.logo-fill .town__logo .glow{display:none}

/* ---------- ご用件の入口：頭のすぐ下、罫で区切った 3 行（採用・工事のご相談・会社概要と許可）。用件は 1 列目、説明は 7 列目 ---------- */
.go{padding-top:calc(var(--u) * 3)}
.go__l{border-top:1px solid var(--line)}
.go__l>li{border-bottom:1px solid var(--line)}
.go__a{padding-block:var(--u);align-items:center;transition:color .45s var(--soft)}
.go__n{grid-column:1/7;display:flex;flex-direction:column}
.go__t{font:300 var(--f4)/var(--l4) var(--ja-l);letter-spacing:.02em;font-feature-settings:"palt";color:var(--ink);transition:color .45s var(--soft)}
.go__w{font:400 var(--f1)/var(--l2) var(--ja);letter-spacing:.08em;color:var(--tx2)}
.go__d{grid-column:7/12;color:var(--tx)}
.go__a .ar{grid-column:12;justify-self:end;color:var(--ink)}
@media (hover:hover){.go__a:hover .go__t,.go__a:hover .ar{color:var(--acc)}.go__a:hover .ar{transform:translateX(6px)}}
/* 段の見出しの近くの用件の言葉（詩の見出しはそのまま） */
.lbl{grid-column:1/-1;display:flex;align-items:baseline;gap:calc(var(--u) / 2);margin-bottom:var(--u);font:400 var(--f1)/var(--l2) var(--ja);letter-spacing:.08em;color:var(--tx2)}
.lbl span:lang(en){font-family:var(--en);letter-spacing:.04em;color:var(--ink)}
.lbl--h{margin-bottom:0;font-size:var(--f3);line-height:var(--l3);letter-spacing:.06em;color:var(--ink)}
.lbl--h span:lang(en){font-size:var(--f1)}

/* ---------- 灯る文：送るほど、字が一つずつ灰から墨に灯る（明朝・48）。下に英字の飾りと、分電盤のループ ---------- */
.lt__g{row-gap:calc(var(--u) * 3);align-items:end}
.lt__t{grid-column:1/-1;text-wrap:pretty;font-size:var(--f4);line-height:calc(var(--u) * 3);letter-spacing:.02em;color:rgba(21,29,39,.14)}
.lt__t .c{transition:color .5s var(--soft)}
.lt__t .c.on{color:var(--ink)}
.lt__t .c.now{color:var(--acc);transition-duration:.15s}
.lt__en{grid-column:1/7;font:300 var(--f5)/var(--l5) var(--en);letter-spacing:-.01em;color:var(--tx2)}
.lt__cap{grid-column:7/9}
.lt__ph{grid-column:9/13;aspect-ratio:4/5;--rr:var(--r-s)}

/* ---------- 70 年：言葉は左、本社の写真は右。数は 2 段の表 ---------- */
.yr__g{align-items:end}
.yr__txt{grid-column:1/6}
.yr__txt .tx{margin-top:var(--u)}
.yr__txt .tl{margin-top:calc(var(--u) * 2)}
.yr__ph{grid-column:7/13;aspect-ratio:4/5}
.yr__stats{margin-top:calc(var(--u) * 4);row-gap:var(--u)}
.yr__stats li{grid-column:span 6;padding-top:var(--u);border-top:1px solid var(--line)}
.yr__stats b{display:flex;align-items:baseline;font:300 var(--f5)/var(--l5) var(--en);letter-spacing:-.02em}
.yr__stats b small{margin-inline-start:8px;font:400 var(--f2)/1 var(--ja);letter-spacing:.04em;color:var(--tx)}
.yr__stats span{display:block;color:var(--tx)}
/* 数：字の帯が回って止まる（オドメーター）。桁ごとに 0.09 秒ずらし、1.9 秒で落ち着く */
.od{display:inline-flex;overflow:clip;height:1em;line-height:1;vertical-align:baseline;clip-path:inset(0)}
.od>span{display:inline-block;height:1em}
.od>span>i{display:flex;flex-direction:column;font-style:normal;transform:translate3d(0,0,0);transition:transform 1.9s var(--out);transition-delay:calc(var(--k,0) * .09s + .15s)}
.od>span>i>em{display:block;height:1em;font-style:normal}
.in .od>span>i{transform:translate3d(0,calc(var(--n) * -1em),0)}

/* ---------- 表彰と許可：見出しは左、一覧は 7 列目（項目は上、中身は下） ---------- */
.cr__g{align-items:start}
.cr__hd{grid-column:1/6}
.cr__go{margin-top:calc(var(--u) * 2);display:flex;flex-direction:column;align-items:flex-start}
.cr__l{grid-column:7/13;border-top:1px solid var(--line)}
.cr__l>div{padding-block:calc(var(--u) / 2);border-bottom:1px solid var(--line)}
.cr__l dt{font:400 var(--f1)/var(--l2) var(--ja);letter-spacing:.08em;color:var(--tx2)}
.cr__l dd{color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
.cr__l dd small{display:block;font:400 var(--f1)/var(--l2) var(--ja);letter-spacing:.04em;color:var(--tx2)}

/* ---------- 顔の壁：社長と取締役は 3 列×3 行、社員は右の 6 列×3 行（頁と同じ列・同じ列の間） ---------- */
.wall{--st:.035s;margin-top:calc(var(--u) * 3);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--u)}
.fc{position:relative;aspect-ratio:1;overflow:hidden;border-radius:8px;background:#fff}
.fc--big{grid-column:span 3;grid-row:span 4;aspect-ratio:auto;border-radius:var(--r-s)}
.jx__l{margin-top:calc(var(--u) * 2)}
.fc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}   /* 絵の上の端から見せる（頭を切らない。11/05 なおさん「頭が切れてる」）。余白の足りない絵は綾波が上を描き足す */
.wall__cap{margin-top:var(--u)}

/* ---------- 三つの部：罫で区切った索引。名前は 1 列目、説明は 7 列目、ループは右の 3 列 ---------- */
.dv__l{margin-top:calc(var(--u) * 3);border-top:1px solid var(--line)}
.dv__l>li{border-bottom:1px solid var(--line)}
.dv__a{padding-block:var(--u);align-items:stretch;transition:color .45s var(--soft)}
.dv__n{grid-column:1/7;display:flex;flex-direction:column}
.dv__no{font:300 var(--f4)/var(--l4) var(--en);color:var(--tx2)}
.dv__t{font:300 var(--f4)/var(--l4) var(--ja-l);letter-spacing:.02em;transition:color .45s var(--soft)}
.dv__e{font:400 var(--f1)/var(--l2) var(--en);letter-spacing:.04em;color:var(--tx2)}
.dv__d{grid-column:7/10;display:flex;flex-direction:column}
.dv__dd{color:var(--tx)}
.dv__tags{margin-top:var(--u);font:400 var(--f1)/var(--l2) var(--ja);letter-spacing:.08em;color:var(--tx2)}
.dv__d .ar{margin-top:auto;color:var(--ink)}
.dv__fig{grid-column:10/13;aspect-ratio:4/5;--rr:var(--r-s)}
@media (hover:hover){.dv__a:hover .dv__t,.dv__a:hover .ar{color:var(--acc)}.dv__a:hover .ar{transform:translateX(6px)}}

/* ---------- 電気の通り道：建物を選ぶと、受け持つ設備の一覧と絵が替わる ---------- */
.dv__hd .h1{grid-column:1/-1}
.cw__hd{align-items:end}
.cw__hd .h1{grid-column:1/7}
.cw__hd .tx{grid-column:7/12}
.cw__g{margin-top:calc(var(--u) * 3);align-items:start}
.cw__side{grid-column:1/5}
.cw__tabs{display:flex;gap:var(--u);border-bottom:1px solid var(--line)}
.cw__tabs button{position:relative;height:calc(var(--u) * 2);font:400 var(--f2)/1 var(--ja);color:var(--tx2);transition:color .45s var(--soft)}
.cw__tabs button[aria-selected=true]{color:var(--ink)}
.cw__tabs button[aria-selected=true]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--ink)}
@media (hover:hover){.cw__tabs button:not([aria-selected=true]):hover{color:var(--acc)}}
.cw__sets{display:grid}
.cw__set{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .6s var(--soft),visibility 0s linear .6s}
.cw__set.on{opacity:1;visibility:visible;transition:opacity .6s var(--soft)}
.cw__set li{padding-block:calc(var(--u) / 2);border-bottom:1px solid var(--line)}
.cw__ph{grid-column:5/13;aspect-ratio:16/9}
.cw__img{opacity:0;transition:opacity .6s var(--soft)}.cw__img.on{opacity:1}

/* ---------- 集合住宅の帯：角の丸い窓が、送ると全幅へ。字は 1 列目のまま ---------- */
.film{padding-block:calc(var(--u) * 2)}
.film__w{--fx:var(--bleed);position:relative;margin-inline:auto;height:min(92svh,860px);width:calc(100% - 2 * var(--bleed));border-radius:var(--r);overflow:hidden;background:var(--dk3);color:#fff}
.film__w>.ph{position:absolute;inset:0;border-radius:0}
.film__w::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(17,24,33,.7),rgba(17,24,33,0) 50%);z-index:1}
.film__cap{position:absolute;left:max(calc(var(--gut) - var(--fx)), calc((100% - var(--max)) / 2 + var(--gut)));bottom:calc(var(--u) * 2);z-index:3;max-width:34em}
.film__en{font:300 var(--f6)/var(--f6) var(--en);letter-spacing:-.02em}
.film__ja{margin-top:var(--u);color:rgba(255,255,255,.86)}

/* ---------- 特集（雑誌の読み物）：扉は左に題（明朝 80）、右にリード。大きな絵（全幅）と小さな絵（3 列）、本文は 1 列目と 7 列目の 2 段 ---------- */
.mg__hd{align-items:end}
.mg__no{grid-column:1/7;grid-row:1;align-self:last baseline;font:300 var(--f4)/var(--l4) var(--en);letter-spacing:-.01em}
.mg__kind{grid-column:7/13;grid-row:1;align-self:last baseline;color:var(--tx)}
.mg__t{grid-column:1/7;grid-row:2;margin-top:var(--u);font-size:var(--f5);line-height:calc(var(--u) * 4);letter-spacing:.02em;font-feature-settings:"palt"}
.mg__sub{grid-column:1/7;grid-row:3;margin-top:var(--u);font:400 var(--f3)/var(--l3) var(--ja);color:var(--tx)}
.mg__lead{grid-column:7/12;grid-row:2/4;align-self:end;color:var(--ink)}
.mg__lead span{display:block}.mg__lead span+span{margin-top:var(--u)}
.mg__big{margin-top:calc(var(--u) * 3)}
.mg__big .ph{aspect-ratio:16/9}
.mg figcaption.cap{margin-top:calc(var(--u) / 2)}
.mg__g{margin-top:calc(var(--u) * 3)}
.mg__body{grid-column:1/12;columns:2;column-gap:calc((100% - 10 * var(--u)) / 11 + 2 * var(--u));color:var(--tx)}
.mg__body>*+*{margin-top:var(--u)}
.mg__body h3{break-after:avoid;margin-top:calc(var(--u) * 2);font:500 var(--f2)/var(--l2) var(--ja);letter-spacing:.08em;color:var(--ink)}
.mg__body h3:first-child{margin-top:0}
.mg__body h3+p{margin-top:0}
.mg__body p{text-align:left;orphans:3;widows:3}
.mg__body .q{color:var(--ink);letter-spacing:.02em}
.mg__pq{grid-column:1/7;align-self:end;margin-top:calc(var(--u) * 4);font-size:var(--f4);line-height:calc(var(--u) * 3);letter-spacing:.02em;color:var(--ink)}
.mg__pq p{font:inherit}
.mg__pq small{display:block;margin-top:var(--u);font:400 var(--f1)/var(--l1) var(--ja);letter-spacing:.06em;color:var(--tx2)}
.mg__sm{grid-column:7/10;margin-top:calc(var(--u) * 4)}
.mg__sm .ph{aspect-ratio:4/5;--rr:var(--r-s)}
.mg__go{display:none;grid-column:1/-1;margin-top:calc(var(--u) * 3)}
.js .mg__go{display:block}
.mg__open{color:var(--ink)}
.mg__min{font:400 var(--f1)/1 var(--ja);letter-spacing:.06em;color:var(--tx2)}
.mg__open i{transform:rotate(90deg);transform-origin:50% 50%}
@media (hover:hover){.mg__open:hover i{transform:rotate(90deg) translateX(6px)}}
.mg__more{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--u);margin-top:calc(var(--u) * 3)}
.js .mg__more:not(.open){display:none}
.mg__more:focus{outline:none}
.mg__sig{grid-column:1/12;margin-top:calc(var(--u) * 3);padding-top:var(--u);border-top:1px solid var(--line);font:400 var(--f1)/var(--l1) var(--ja);letter-spacing:.04em;color:var(--tx2)}
.mg__sig a{display:inline-block;margin-top:calc(var(--u) / 2);color:var(--ink)}

/* ---------- 工事黒板：一枚の黒板に 10 件を全部。件名は 1 列目、施設は 7 列目。黒板は余白へ 1u はみ出し、字は格子のまま ---------- */
.wk__hd{align-items:end}
.wk__hd .h1{grid-column:1/7}
.wk__hd .tx{grid-column:7/12}
.bd{margin:calc(var(--u) * 3) calc(var(--u) * -1) 0;padding:calc(var(--u) * 2) var(--u);border-radius:var(--r-s);background:var(--board);color:rgba(255,255,255,.92)}
.bd__hd,.bd__ft,.bd__grp{font:400 var(--f1)/var(--l2) var(--ja);letter-spacing:.12em;color:rgba(255,255,255,.55)}
.bd__hd p:first-child,.bd__l p:first-child,.bd__ft p:first-child{grid-column:1/7}
.bd__hd p:last-child,.bd__l p:last-child,.bd__ft p:last-child{grid-column:7/13}
.bd__grp{margin-top:var(--u);padding-bottom:calc(var(--u) / 2)}
.bd__l li{padding-block:calc(var(--u) / 2);border-top:1px solid rgba(255,255,255,.16)}
.bd__l li:last-child{border-bottom:1px solid rgba(255,255,255,.16)}
.bd__ft{margin-top:var(--u)}
.bd__ft p:last-child{font-size:var(--f2);letter-spacing:.04em;color:rgba(255,255,255,.92)}

/* ---------- お知らせ：見出しは左、一覧は 7 列目（日付と区分は上、題は下） ---------- */
.nw__g{align-items:start}
.nw__hd{grid-column:1/7}
.nw__l{grid-column:7/13;border-top:1px solid var(--line)}
.nw__l a{display:grid;grid-template-columns:1fr auto;column-gap:var(--u);align-items:center;padding-block:calc(var(--u) / 2);border-bottom:1px solid var(--line);transition:color .45s var(--soft)}
.nw__m{grid-column:1;display:flex;gap:var(--u);font:400 var(--f1)/var(--l2) var(--ja);letter-spacing:.06em;color:var(--tx2)}
.nw__d{font-family:var(--en);letter-spacing:.04em}
.nw__t{grid-column:1}
.nw__l .ar{grid-column:2;grid-row:1/3}
@media (hover:hover){.nw__l a:hover{color:var(--acc)}.nw__l a:hover .ar{transform:translateX(6px)}}

/* ---------- 採用：言葉は左、先輩の絵は右。絵の下に、先輩の道のり（水色の細い線でつなぐ） ---------- */
.rc__g{align-items:end}
.rc__txt{grid-column:1/6}
.rc__txt .lead{margin-top:var(--u)}
.rc__l{margin-top:calc(var(--u) * 2);border-top:1px solid var(--line)}
.rc__l li{padding-block:calc(var(--u) / 2);border-bottom:1px solid var(--line)}
.rc__cta{margin-top:calc(var(--u) * 2);display:flex;flex-wrap:wrap;align-items:center;gap:var(--u)}
.rc__fig{grid-column:7/13}
.rc__ph{aspect-ratio:4/5}
.rc__fig figcaption{margin-top:calc(var(--u) / 2)}
.path{--st:.16s;display:flex;align-items:center;margin-top:calc(var(--u) / 2)}
.path li{display:flex;align-items:center;gap:8px;white-space:nowrap}
.path li+li{flex:1}
.path li+li::before{content:"";flex:1;height:1px;margin-inline:12px 4px;background:var(--acc)}
.path span{font:400 var(--f1)/1 var(--en);color:var(--tx2)}

/* ---------- 締め：夜の街。明朝の一文（120）、電話とエントリー ---------- */
.cl{position:relative;min-height:100svh;overflow:hidden;background:var(--dk);color:#fff;display:flex;align-items:flex-end}
.cl__map{position:absolute;inset:0}
.cl__map .town__ph{position:absolute;inset:0;overflow:hidden;background:linear-gradient(160deg,#1c2631 0 46%,#222d39 46% 72%,#1a232d 72%)}
.cl__map .lv{opacity:.55}
.cl::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(17,24,33,.95) 18%,rgba(17,24,33,.2) 70%);z-index:1}
.cl__in{position:relative;z-index:2;padding-block:calc(var(--u) * 6) calc(var(--u) * 4);row-gap:calc(var(--u) * 3)}
.cl__h{grid-column:1/-1;font-size:var(--f6);line-height:var(--l6);letter-spacing:.02em;font-feature-settings:"palt"}
.cl__a,.cl__b{padding-top:var(--u);border-top:1px solid rgba(255,255,255,.25)}
.cl__a{grid-column:1/7}.cl__b{grid-column:7/13}
.cl__k{font:400 var(--f1)/var(--l2) var(--ja);letter-spacing:.08em;color:rgba(255,255,255,.6)}
.cl__tel{display:block;width:max-content;margin-top:var(--u);font:300 var(--f4)/var(--l4) var(--en);letter-spacing:.02em;transition:color .45s var(--soft)}
@media (hover:hover){.cl__tel:hover{color:var(--acc)}}
.cl__fax{margin-top:var(--u);color:rgba(255,255,255,.72)}
.cl__b .cl__fax{max-width:24em}
.cl .tl,.cl .btn{margin-top:var(--u)}

/* ---------- 足元：紺の地に、頭と同じネオン管の TAKANE（11/06 なおさん「フッターの TAKANE もトップみたくネオンっぽく」）----------
   締めの夜の街から地続きの紺（紺は頭と締めだけ）。管は白、後ろの光は頭と同じ蛍光の水色。見えたら 2.6 秒で描かれ、2 度またたいて灯り、光が巡る。
   色は 8 つの値で決める：地 --fbg・字 --ftx・名前 --fhi・控えの字 --flo・管 --nt・光 --ng・光のにじみ --ngs・巡る光 --nk。
   比べる案（d.js が html に印）：?ft=b 紺に黄・?ft=c 水色に黄・?ft=d 灰に水色・?ft=now 前の明るい地 */
.ft{padding-block:calc(var(--u) * 3) var(--u);background:var(--fbg);color:var(--ftx);
  --fbg:var(--dk);--ftx:rgba(255,255,255,.78);--fhi:#fff;--flo:rgba(255,255,255,.56);
  --nt:#fff;--ng:#22b4ff;--ngs:rgba(34,180,255,.8);--nk:#bfeaff}
.ft-b .ft{--nt:#FFF7DC;--ng:#FFC21A;--ngs:rgba(255,178,0,.75);--nk:#FFF0B8}
.ft-c .ft{--fbg:#0C74B4;--ftx:#fff;--flo:rgba(255,255,255,.9);--nt:#FFF7DC;--ng:#FFD23A;--ngs:rgba(255,196,0,.7);--nk:#FFF3C4}
.ft-d .ft{--fbg:#2A2F35}
.ft-now .ft{--fbg:var(--bg);--ftx:var(--tx);--fhi:var(--ink);--flo:var(--tx2);--nt:var(--ink)}
.ft__logo{position:relative;display:block;color:var(--nt);transition:color .4s var(--soft)}
.ft__logo svg{width:100%;height:auto}
.ft__logo svg path{fill:none;stroke:currentColor;stroke-width:1.2px;vector-effect:non-scaling-stroke}
.ft.neon .ft__logo svg path{stroke-width:1.8px}
.ft.neon .ft__logo svg:not(.glow){position:relative;z-index:1}
.ft__logo svg.glow{position:absolute;left:0;top:0;opacity:0;filter:blur(calc(1px + .1vw)) drop-shadow(0 0 calc(3px + .3vw) var(--ng)) drop-shadow(0 0 calc(8px + .8vw) var(--ngs))}
.ft__logo path.glow{stroke:var(--ng);stroke-width:calc(3px + .3vw)}
.ft__logo .spark{stroke:var(--nk);stroke-width:2.2px;opacity:0}
.ft.neon .ft__logo svg:not(.glow) path:not(.spark){stroke-dasharray:var(--L,9999px);stroke-dashoffset:var(--L,9999px)}
.ft.neon.drawn .ft__logo svg:not(.glow) path:not(.spark){stroke-dashoffset:0;transition:stroke-dashoffset 2.6s cubic-bezier(.45,0,.25,1) .2s}
.ft.drawn .ft__logo .spark{stroke-dasharray:calc(var(--L,4000px) * .18) var(--L,4000px);animation:neonRun 14s linear 2.8s infinite both}
.ft.drawn .ft__logo svg.glow{animation:neonOn .9s steps(1,end) 2.6s 1 both,neonFlick 17s linear 3.5s infinite}
.ft.drawn .ft__logo svg:not(.glow){animation:tubeFlick 23s linear 3.5s infinite}
.ft.off .ft__logo .spark,.ft.off .ft__logo svg{animation-play-state:paused}
.logo-fill .ft__logo svg path{fill:currentColor;stroke:none}
.logo-fill .ft__logo .spark,.logo-fill .ft__logo .glow{display:none}
@media (hover:hover){.ft__logo:hover{color:var(--nk)}.ft-now .ft__logo:hover{color:var(--acc)}}
.ft__g{margin-top:calc(var(--u) * 2);row-gap:var(--u);color:var(--ftx)}
.ft__co{grid-column:1/7}
.ft__name{font:400 var(--f3)/var(--l3) var(--ja);letter-spacing:.08em;color:var(--fhi)}
.ft__en{font:400 var(--f1)/var(--l2) var(--en);letter-spacing:.04em;color:var(--flo)}
.ft__en+p{margin-top:var(--u)}
.ft__nav{grid-column:7/13}
.ft__nav p{display:flex;flex-wrap:wrap;column-gap:var(--u)}
.ft__nav a{display:block}
@media (hover:hover){.ft .ft__nav a:hover,.ft .ft__co a:hover{color:var(--fhi)}}
.ft__b{margin-top:calc(var(--u) * 2);font:400 var(--f1)/var(--l2) var(--en);letter-spacing:.04em;color:var(--flo)}
.ft__b p:first-child{grid-column:1/7}.ft__b p:last-child{grid-column:7/13}

/* ---------- 会長（腹話術の人形のような案内役。作業服と TAKANE のヘルメットの全身）：字の無い時だけ、右下に立ってひとこと（d.js が字との重なりを見る） ----------
   11/05 夕 なおさん「もうちょっと吹き出しを吹き出しっぽくしてさ、もうちょっとでっかくていいんじゃない？」：
   ふきだしは角の丸い白い面に墨の細い線、頭の上から口元へ向く尾。字は明朝 20（人の声）。人形は全身で高さ 260（携帯 150） */
.kc{--dh:clamp(300px,36vh,380px);position:fixed;right:clamp(12px,2vw,28px);bottom:0;z-index:45;display:flex;flex-direction:column;align-items:flex-end;gap:14px;pointer-events:none;transform:translate3d(0,110%,0);transition:transform 1s var(--out)}
.kc.on{transform:none}
.kc__doll{position:relative;display:block;width:calc(var(--dh) * .4);height:var(--dh)}
.kc__doll img{position:absolute;left:50%;top:0;height:100%;width:auto;max-width:none;transform:translateX(-50%);filter:drop-shadow(0 10px 16px rgba(21,29,39,.22))}
.kc__bub{position:relative;max-width:14em;padding:12px 22px;border:1px solid var(--ink);border-radius:22px;background:#fff;font:400 var(--f3)/var(--l3) var(--min);letter-spacing:.02em;color:var(--ink);text-wrap:balance;opacity:0;transform:translateY(8px) scale(.96);transform-origin:calc(100% - 48px) 100%;transition:opacity .5s var(--out),transform .7s var(--out)}
.kc__bub::before,.kc__bub::after{content:"";position:absolute;top:100%;clip-path:polygon(0 0,100% 0,72% 100%)}
.kc__bub::before{right:calc(var(--dh) * .2 - 8px);width:20px;height:15px;background:var(--ink)}
.kc__bub::after{right:calc(var(--dh) * .2 - 6.5px);margin-top:-1.5px;width:17px;height:13px;background:#fff}
.kc.on .kc__bub.show{opacity:1;transform:none}
@media (max-width:767px){.kc{--dh:190px;gap:12px}.kc__bub{max-width:12em;padding:10px 18px;border-radius:18px}}

.still *,.still *::before,.still *::after{transition:none!important;animation:none!important}

/* ---------- 携帯：1 列。字の左端は 1 本（20px）。字を乗せる窓は全幅 ---------- */
@media (max-width:767px){
  .g12>*{grid-column:1/-1!important;grid-row:auto!important}
  .sec{padding-block:calc(var(--u) * 3)}
  .h2{line-height:var(--l4)}
  /* 頭：窓は全幅・角なし。字は 20px */
  .town__st{padding:var(--hd) 0 0}
  .town__fr{border-radius:0}
  .town__bt{display:flex;flex-direction:column;align-items:stretch;gap:var(--u);bottom:var(--u)}
  .town__copy{font-size:var(--f1);line-height:var(--l1)}
  .town__h{font-size:var(--f1);line-height:var(--l1)}
  .town__logo{top:var(--u)}
  /* ご用件の入口 */
  .go{padding-top:calc(var(--u) * 2)}
  .go__a{row-gap:calc(var(--u) / 2);position:relative;padding-right:48px}
  .go__a .ar{position:absolute;right:0;top:calc(var(--u) + 18px)}
  /* 灯る文 */
  .lt__g{row-gap:calc(var(--u) * 2)}
  .lt__t{line-height:calc(var(--u) * 2)}
  .lt__ph{order:3}.lt__cap{order:4;margin-top:calc(var(--u) * -1.5)}
  /* 70 年 */
  .yr__ph{order:-1;margin-bottom:calc(var(--u) * 2)}
  .yr__stats{margin-top:calc(var(--u) * 2)}
  .cw__hd .tx,.wk__hd .tx,.mg__lead{margin-top:var(--u)}
  .cr__l,.nw__l{margin-top:calc(var(--u) * 2)}
  /* 顔の壁：6 列。社長と取締役は 3 列×3 行で横に並び、社員は下に 6 人ずつ */
  .wall{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-top:calc(var(--u) * 2)}
  .fc--big{aspect-ratio:3/4}
  .fc{border-radius:6px}
  /* 三つの部 */
  .dv__l{margin-top:calc(var(--u) * 2)}
  .dv__a{row-gap:var(--u)}
  .dv__d .ar{margin-top:var(--u)}
  .dv__fig{aspect-ratio:16/10}
  /* 通り道 */
  .cw__ph{order:-1;margin-bottom:calc(var(--u) * 1)}
  .cw__g{margin-top:calc(var(--u) * 2)}
  /* 映像の帯：全幅・角なし */
  .film__w{height:120vw;border-radius:0}
  .film__en{font-size:var(--f6);line-height:var(--f6)}
  /* 特集：1 段 */
  .mg__t{line-height:var(--l5)}
  .mg__sub{margin-top:var(--u)}
  .mg__big{margin-top:calc(var(--u) * 2)}
  .mg__body{columns:1}
  .mg__pq{line-height:calc(var(--u) * 2);margin-top:calc(var(--u) * 3)}
  .mg__sm{width:calc(50% - 4px);margin-top:calc(var(--u) * 2)}
  .mg__sig{grid-column:1/-1}
  /* 黒板：全幅、字は 20px */
  .bd{margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);border-radius:0}
  .bd__hd{display:none}
  .bd__l li{row-gap:0}
  .bd__l p:last-child{font-size:var(--f1);line-height:var(--l2);color:rgba(255,255,255,.6)}
  .bd__ft p:last-child{margin-top:0}
  /* 採用 */
  .rc__fig{order:-1;margin-bottom:calc(var(--u) * 2)}
  .path{flex-wrap:wrap;row-gap:8px}
  .path li{font-size:var(--f1)}
  /* 締め：下に人形とふきだしの場所を空ける（字に重ねない） */
  .cl__in{padding-block:calc(var(--u) * 4) calc(var(--u) * 9);row-gap:calc(var(--u) * 2)}
  .ft__nav{margin-top:var(--u)}
  .ft__nav p+p{margin-top:calc(var(--u) / 2)}
  .ft__b p:last-child{margin-top:0}
}

/* 指の端末の写真の視差：台本ではなく送りの時間軸（view()）で。古い端末では止まる（揺れるより止まる。11/04 船橋）。
   動きを減らす設定（端末・サイトの切り替えの両方）では付けない */
@supports (animation-timeline: view()){
  @media (hover:none) and (prefers-reduced-motion:no-preference){
    html:not([data-motion=reduce]) .ph>.ph__in{animation:phPx linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    html:not([data-motion=reduce]) .town .ph>.ph__in,html:not([data-motion=reduce]) .film .ph>.ph__in{animation:none}
  }
}
@keyframes phPx{from{translate:0 -4.6%}to{translate:0 4.6%}}

/* ---------- 動きを減らす設定（WCAG 2.3.3 を会社標準に。2026.11.05 なおさん「標準にする」） ----------
   端末の設定はここ、サイトの切り替え <html data-motion="reduce"> の写しはキットの tools/reduce_copy.py がこのファイルの末尾に足す。
   出現・視差・頭の動き・マウスオーバーの寄りと矢印の送り・流れる光・なめらかな送りを止める。色の変化だけ 150ms 残す（d.js も同じ条件で止める） */
@media (prefers-reduced-motion:reduce){
  .w>i,[data-m=b]>*,[data-m=pop]>*{transform:none!important;opacity:1!important;filter:none!important;transition:none!important}
  [data-m=p]{clip-path:none!important}
  [data-m=p] .ph__in,a:hover .ph__in{transform:none!important}
  .tl:hover i,.btn:hover i,.ar,.dv__a:hover .ar,.nw__l a:hover .ar,.go__a:hover .ar{transform:none!important}
  .mg__open i,.mg__open:hover i{transform:rotate(90deg)!important}
  html{scroll-behavior:auto!important}
  *,*::before,*::after{transition-duration:.15s!important;transition-property:color,background-color,border-color,opacity!important;transition-delay:0s!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  .od>span>i{transform:translate3d(0,calc(var(--n) * -1em),0)!important;transition:none!important}
  .town__logo path{stroke-dashoffset:0!important;transition:none!important}
  .town__logo .spark{display:none}
  .town__logo svg.glow{animation:none!important;opacity:.6!important}
  .town__logo svg:not(.glow){animation:none!important}
  .ft__logo path{stroke-dashoffset:0!important;transition:none!important}
  .ft__logo .spark{display:none}
  .ft__logo svg.glow{animation:none!important;opacity:.6!important}
  .ft__logo svg:not(.glow){animation:none!important}
  .mn__l li,.mn__side{transform:none!important;transition:opacity .15s!important}
  .burger i{transition:opacity .15s!important}
  .kc,.kc__bub{transition:none!important;transform:none}
  .kc:not(.on){visibility:hidden}
  .snd{display:none}
  .town__v{transform:none!important}
  .hd__logo{transition:none!important}
}

/* ===== 動きを減らす設定の写し（kit tools/reduce_copy.py が作る。ここは直さない） ===== */
html[data-motion=reduce] .w>i,html[data-motion=reduce] [data-m=b]>*,html[data-motion=reduce] [data-m=pop]>*{transform:none!important;opacity:1!important;filter:none!important;transition:none!important}
html[data-motion=reduce] [data-m=p]{clip-path:none!important}
html[data-motion=reduce] [data-m=p] .ph__in,html[data-motion=reduce] a:hover .ph__in{transform:none!important}
html[data-motion=reduce] .tl:hover i,html[data-motion=reduce] .btn:hover i,html[data-motion=reduce] .ar,html[data-motion=reduce] .dv__a:hover .ar,html[data-motion=reduce] .nw__l a:hover .ar,html[data-motion=reduce] .go__a:hover .ar{transform:none!important}
html[data-motion=reduce] .mg__open i,html[data-motion=reduce] .mg__open:hover i{transform:rotate(90deg)!important}
html[data-motion=reduce]{scroll-behavior:auto!important}
html[data-motion=reduce] *,html[data-motion=reduce] *::before,html[data-motion=reduce] *::after{transition-duration:.15s!important;transition-property:color,background-color,border-color,opacity!important;transition-delay:0s!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
html[data-motion=reduce] .od>span>i{transform:translate3d(0,calc(var(--n) * -1em),0)!important;transition:none!important}
html[data-motion=reduce] .town__logo path{stroke-dashoffset:0!important;transition:none!important}
html[data-motion=reduce] .town__logo .spark{display:none}
html[data-motion=reduce] .town__logo svg.glow{animation:none!important;opacity:.6!important}
html[data-motion=reduce] .town__logo svg:not(.glow){animation:none!important}
html[data-motion=reduce] .ft__logo path{stroke-dashoffset:0!important;transition:none!important}
html[data-motion=reduce] .ft__logo .spark{display:none}
html[data-motion=reduce] .ft__logo svg.glow{animation:none!important;opacity:.6!important}
html[data-motion=reduce] .ft__logo svg:not(.glow){animation:none!important}
html[data-motion=reduce] .mn__l li,html[data-motion=reduce] .mn__side{transform:none!important;transition:opacity .15s!important}
html[data-motion=reduce] .burger i{transition:opacity .15s!important}
html[data-motion=reduce] .kc,html[data-motion=reduce] .kc__bub{transition:none!important;transform:none}
html[data-motion=reduce] .kc:not(.on){visibility:hidden}
html[data-motion=reduce] .snd{display:none}
html[data-motion=reduce] .town__v{transform:none!important}
html[data-motion=reduce] .hd__logo{transition:none!important}
/* ===== 写しここまで ===== */

/* 号の札（雑誌の題の下の行。2026-11-05） */
.issue{grid-column:1/7;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:calc(var(--u) * .8);font:500 var(--f1)/1 var(--en);letter-spacing:.24em;word-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.82);font-variant-numeric:lining-nums tabular-nums}
.issue b{font-weight:500}
.issue span:first-child b{margin-left:.35em}
.issue i{display:block;width:24px;height:1px;background:currentColor;opacity:.6}
@media (max-width:767px){.issue{gap:8px 12px;letter-spacing:.18em}.issue i{width:16px}}

/* ---------- 頭の仕上げ（11/05 なおさん「PC の画面が横長すぎて迫力に欠ける」「キャッチコピーこれだけ？」「下に細かい英文字とか数字とかを…格好つけられない？」） ---------- */
/* キャッチの英語の添え。和文の下に、同じ左の線で小さく */
.catch-en{display:none;grid-column:1/7;margin-top:calc(var(--u) * .4);color:rgba(255,255,255,.9);font:300 var(--f3)/var(--l3) var(--en);word-spacing:.12em}   /* 小文字の字間は触らず、語の間だけ少し空ける（Display の細字は小さく組むと語間が詰まって見える） */
.copy-d .catch-en{display:block}
/* 頭の一番下の細い帯：創業・業種・許可番号・船橋の今の時刻。雑誌の柱のように小さな英字で */
.town__meta{position:absolute;left:var(--x1);right:var(--x1);bottom:calc(var(--u) * .7);z-index:5;display:flex;justify-content:space-between;gap:12px 24px;padding-top:10px;border-top:1px solid rgba(255,255,255,.28);font:500 10px/1 var(--en);letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.72);font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.town__meta b{font-weight:500;color:#fff}
.tm__dot{display:inline-block;width:6px;height:6px;margin-right:10px;border-radius:50%;background:#22b4ff;box-shadow:0 0 8px #22b4ff;vertical-align:1px;animation:tmDot 2.4s ease-in-out infinite}
@keyframes tmDot{0%,100%{opacity:1}50%{opacity:.35}}
.town__bt{bottom:calc(var(--u) * 2.2)}
@media (max-width:767px){.town__meta{bottom:calc(var(--u) * .5);letter-spacing:.16em;font-size:9px}.tm--w,.tm--p{display:none}.town__bt{bottom:calc(var(--u) * 1.6)}}
@media (prefers-reduced-motion:reduce){.tm__dot{animation:none}}
html[data-motion=reduce] .tm__dot{animation:none}
/* PC：頭は最初から画面いっぱい（窓の縁と角を付けない）。上の帯は動画の上に白で重ね、送って帯が出たら元の色に（?hero=inset で前の形） */
@media (hover:hover) and (min-width:768px) and (prefers-reduced-motion:no-preference){
  html.hero-full.town-loop:not([data-motion=reduce]) .town__fr{clip-path:none}
  html.hero-full.town-loop:not([data-motion=reduce]) .town__fr::before{top:0}
  html.hero-full.town-loop:not([data-motion=reduce]) .town__logo{top:calc(var(--hd) + var(--u) * 1.2)}
  html.hero-full.town-loop:not([data-motion=reduce]) .town__bt{bottom:calc(var(--u) * 2.2)}
  html.hero-full.town-loop:not([data-motion=reduce]) .hd.is-top:not(.is-s){color:#fff}
  html.hero-full.town-loop:not([data-motion=reduce]) .hd.is-top:not(.is-s) .pill--fill{background:#fff;color:var(--ink);border-color:#fff}
}

/* ---------- 上の帯の仕上げ（11/05 なおさん「ハンバーガーメニューとか通常のデザインにしたい」「ご相談・採用のボタンは紺より水色」） ---------- */
/* メニュー：丸で囲まず、3 本の線と MENU の字だけ。触れると線と字が水色へ */
.pill--menu{border-color:transparent;padding-inline:0}
@media (hover:hover){.pill--menu:hover{background:transparent;border-color:transparent;color:var(--cta)}}
/* ご相談は水色の線、採用は水色の塗り。触れると紺へ寄る */
.hd__r .pill--ja:not(.pill--cl):not(.pill--fill){border-color:var(--cta);color:var(--cta)}
.hd__r .pill--fill{background:var(--cta);border-color:var(--cta);color:#fff}
@media (hover:hover){.hd__r .pill--ja:not(.pill--cl):not(.pill--fill):hover{background:var(--cta);color:#fff}.hd__r .pill--fill:hover{background:var(--ink);border-color:var(--ink);color:#fff}}
/* 頭の動画の上（PC）：ご相談は白の線、採用は水色の塗りのまま */
@media (hover:hover) and (min-width:768px) and (prefers-reduced-motion:no-preference){
  html.hero-full.town-loop:not([data-motion=reduce]) .hd.is-top:not(.is-s) .pill--ja:not(.pill--cl):not(.pill--fill){border-color:#fff;color:#fff}
  html.hero-full.town-loop:not([data-motion=reduce]) .hd.is-top:not(.is-s) .pill--fill{background:var(--cta);color:#fff;border-color:var(--cta)}
}
.mn-open .hd .pill--ja:not(.pill--cl):not(.pill--fill){border-color:#fff;color:#fff}
.mn-open .hd .pill--fill{background:var(--cta);border-color:var(--cta);color:#fff}
/* メニューの印は左（11/05 なおさん「ハンバーガーは右だとこうなっちゃうのか。これだとハンバーガーは左だね」「3本線も気持ち太くして水色に」）。丸で囲まない */
.burger i{height:1.5px;background:var(--cta)}
.pill--menu{color:var(--ink)}
.mn-open .burger i{background:#fff}
.mn-open .pill--menu{color:#fff}
@media (hover:hover) and (min-width:768px) and (prefers-reduced-motion:no-preference){
  html.hero-full.town-loop:not([data-motion=reduce]) .hd.is-top:not(.is-s) .burger i{background:#fff}
  /* 11/06 なおさん「あえてMENUは黒？」→ 頭の動画の上では、線と同じく字も白。触れると水色 */
  html.hero-full.town-loop:not([data-motion=reduce]) .hd.is-top:not(.is-s) .pill--menu{color:#fff}
  html.hero-full.town-loop:not([data-motion=reduce]) .hd.is-top:not(.is-s) .pill--menu:hover{color:var(--cta)}
  html.hero-full.town-loop:not([data-motion=reduce]) .hd.is-top:not(.is-s) .pill--menu:hover .burger i{background:var(--cta)}
}
.mn-open .burger i:nth-child(1){transform:translateY(7.5px) rotate(45deg)}.mn-open .burger i:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* TAKANE の下の ELECTRIC：白の小さな字、ネオン管のように水色に滲み、管と同じく不定期にまたたく（11/05 なおさん。英語の社名は先方に確かめ中） */
.town__el{margin-top:calc(var(--u) * .35);text-align:right;color:#fff;font:400 clamp(11px,1.15vw,18px)/1 var(--en);letter-spacing:.62em;margin-right:-.62em;text-transform:uppercase;
  text-shadow:0 0 2px #fff,0 0 6px #22b4ff,0 0 14px #22b4ff,0 0 26px rgba(34,180,255,.7);opacity:0}
.js .town.drawn .town__el{animation:elOn .9s steps(1,end) 2.9s 1 both,tubeFlick 23s linear 4s infinite}
@keyframes elOn{0%{opacity:0}20%{opacity:.7}30%{opacity:.1}50%{opacity:1}60%{opacity:.3}100%{opacity:1}}
.town.off .town__el{animation-play-state:paused}
.logo-fill .town__el{text-shadow:none}
@media (prefers-reduced-motion:reduce){.town__el{animation:none!important;opacity:1}}
html[data-motion=reduce] .town__el{animation:none!important;opacity:1}
/* 三つの部：横長の 3 段をやめ、縦の短冊を 3 つ並べる（11/05 なおさん「文字があんまりなくてスカスカだから…短冊を縦に3つ並べるとかして圧縮」）。絵が上、番号と名前、文、品目、矢印 */
@media (min-width:768px){
  .dv__l{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--u);border-top:0}
  .dv__l>li{border-bottom:0;border-top:1px solid var(--line)}
  .dv__a{display:flex;flex-direction:column;height:100%;padding-block:var(--u) 0}
  .dv__fig{order:-1;width:100%;aspect-ratio:4/5;margin-bottom:var(--u)}
  .dv__n{flex-direction:column}
  .dv__no{font-size:var(--f2);line-height:var(--l2)}
  .dv__d{margin-top:calc(var(--u) * .6);flex:1}
  .dv__tags{margin-bottom:var(--u)}
  .dv__d .ar{margin-top:auto}   /* 矢印は 3 つとも下の線にそろえる */
}

/* 代表 2 人：四角の枠に入れず、地の上に 2 人の絵。左右に縦書きで肩書き・名前・ローマ字（90 度回る）の 3 行（11/05 なおさん） */
.br{align-items:center;margin-top:calc(var(--u) * 3)}
.wall--s{margin-top:calc(var(--u) * 2)}
.br__fig{grid-column:3/11;margin:0}
.br__fig img{display:block;width:100%;height:auto}
.br__nm{writing-mode:vertical-rl;display:flex;gap:calc(var(--u) * .5);align-self:center;color:var(--ink)}
.br__nm--l{grid-column:1/3;justify-self:center}
.br__nm--r{grid-column:11/13;justify-self:center}
.br__t{font:400 var(--f2)/1.6 var(--ja);letter-spacing:.3em;color:var(--tx)}
.br__n{font:300 var(--f4)/1.2 var(--ja-l);letter-spacing:.25em}
.br__r{font:400 var(--f1)/1.6 var(--en);letter-spacing:.2em;text-transform:uppercase;color:var(--tx2)}
.wall--s .fc--big{display:none}
@media (max-width:767px){
  .br{display:grid;grid-template-columns:1fr 1fr;row-gap:var(--u);align-items:start}
  .br__fig{grid-column:1/-1;grid-row:1}
  .g12.br>.br__nm--l{grid-column:1/2!important;grid-row:2!important;justify-self:center}.g12.br>.br__nm--r{grid-column:2/3!important;grid-row:2!important;justify-self:center}.g12.br>.br__fig{grid-row:1!important}
  .br__n{font-size:var(--f3)}
}

.br__n i{display:inline-block;inline-size:.45em}   /* 姓と名の間は半角ほど */

/* 代表 2 人の着替え：作業着の絵を上に重ね、段が画面に入って真ん中を過ぎるまでの送りで 0→1。台本は使わず CSS の view() で（指の端末でも揺れない）。
   scroll() の無い古い端末と、動きを減らす設定ではスーツのまま */
.br__fig{position:relative}
.br__work{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    html:not([data-motion=reduce]) .br__work{animation:brWear linear both;animation-timeline:view();animation-range:entry 70% cover 55%}
  }
}
@keyframes brWear{0%,25%{opacity:0}75%,100%{opacity:1}}
/* 肩書き・名前・ローマ字を 1 本の縦の中心線に積む（11/05 なおさん「文字が真ん中に揃ってない」）。各行は縦書き、並びは上から下へ */
.br__nm{writing-mode:horizontal-tb;flex-direction:column;align-items:center;gap:calc(var(--u) * .7)}
.br__nm>span{writing-mode:vertical-rl;display:block}
.br__t,.br__n,.br__r{line-height:1}
.br__t{letter-spacing:.3em;margin-bottom:-.3em}
.br__n{letter-spacing:.25em;margin-bottom:-.25em}
.br__r{letter-spacing:.2em;margin-bottom:-.2em}

/* ===== 編集構成（2026-11-05 冬月の案 → リツコ）：欄名・図の説明・号の札 ===== */
/* 大文字と小文字のまじる英字の欄名では、小文字の字間を広げない（欧文組版）。全部大文字に変換して組む所（.issue・.ar__no・.pu__k など）はそのまま */
.lbl span:lang(en),.go__w span:lang(en),.mn__l span,.dv__e{letter-spacing:0;word-spacing:.15em}
.issue span:first-child b{margin-left:0}   /* 「No. 01」の空きは文字の空きで（HTML に半角の空き） */
/* 欄名だけの段（Prologue・Contact・News）：字との間をつめる */
.lt__g>.lbl{margin-bottom:calc(var(--u) * -2)}
.cl__in>.lbl{margin-bottom:calc(var(--u) * -2);color:rgba(255,255,255,.6)}
.cl__in>.lbl span:lang(en){color:#fff}
.nw__g>.lbl{margin-bottom:calc(var(--u) / 2)}
/* 本社の写真と、受け持つ設備の絵：図の下に説明を置くため、枠の外へ（角の丸み・視差は .ph のまま） */
.yr__fig{grid-column:7/13}
.yr__fig .yr__ph{aspect-ratio:4/5}
.yr__note{margin-top:var(--u);color:var(--tx2)}
.cw__fig{grid-column:5/13}
.cw__fig .cw__ph{aspect-ratio:16/9}
.cw__caps{display:grid;margin-top:calc(var(--u) / 2)}
.cw__cap{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .45s var(--soft),visibility 0s linear .45s}
.cw__cap.on{opacity:1;visibility:visible;transition:opacity .45s var(--soft)}
.cr__hd .tx{margin-top:var(--u)}
.cr__hd .cr__go{margin-top:calc(var(--u) * 2)}
.jx__tx{margin-top:calc(var(--u) / 2)}
.rc__pcap{margin-top:var(--u)}
.mg__en{display:block;margin-bottom:6px;font:500 var(--f1)/1 var(--en);letter-spacing:.24em;word-spacing:.3em;text-transform:uppercase;color:var(--acc)}
@media (max-width:767px){
  .yr__fig{order:-1;margin-bottom:calc(var(--u) * 2)}
  .yr__fig .yr__ph{margin-bottom:0}
  .cw__fig{order:-1;margin-bottom:calc(var(--u) * 1)}
  .cw__fig .cw__ph{margin-bottom:0}
  .lt__g>.lbl,.cl__in>.lbl{margin-bottom:calc(var(--u) * -1)}
}
/* 新しい副題・説明の最後の行が 1〜3 字だけ落ちないように、句で折り、末尾をそろえる（Chrome。ほかは今までどおり） */
.go__d,.cap,.film__ja span,.jx__tx span,.cr__hd .tx span{word-break:auto-phrase;text-wrap:pretty}
/* 採用の道のり：768〜1000px の幅で、三つの札が枠より広がって横にはみ出していた（編集構成の確かめで見つけた）。札の字を折れるようにし、つなぐ線は縮められるように */
@media (min-width:768px) and (max-width:1000px){.path li{white-space:normal;min-width:0}.path li+li::before{min-width:8px;margin-inline:6px 2px}}

/* 2026-11-05 会長の人形を部品で動かす（なおさん「首動かすとか、たまに手が動く、目でパチパチして口がパカパカする」）。部品は 874×1094 で同じ位置に重ねる。回す中心は _illust/v3/kaicho_parts/parts.json。
   口は「ひとこと」の札が出ている間だけパクパク（.kc.on）。首・瞬き・腕は周期をずらして、同じ組み合わせがすぐ戻らないように */
.kd{position:absolute;left:50%;top:0;height:100%;aspect-ratio:874/1094;transform:translateX(-50%);filter:drop-shadow(0 10px 16px rgba(21,29,39,.22))}
.kc__doll .kd img{position:absolute;inset:0;left:0;width:100%;height:100%;transform:none;filter:none}
.kd__arm,.kd__head{position:absolute;inset:0}
.kd__head{transform-origin:50% 30.35%;animation:kdHead 9.7s cubic-bezier(.45,0,.55,1) infinite}
.kd__arm{transform-origin:67.05% 35.47%;animation:kdArm 13.3s cubic-bezier(.45,0,.55,1) infinite}
.kc__doll .kd .kd__lids{opacity:0;animation:kdBlink 5.3s steps(1,end) infinite}
.kc.on .kc__doll .kd .kd__jaw{animation:kdJaw 2.3s steps(1,end) .5s 3}
@keyframes kdHead{0%,18%{transform:rotate(0)}26%,44%{transform:rotate(-4deg)}52%,70%{transform:rotate(2.5deg)}80%,100%{transform:rotate(0)}}
@keyframes kdArm{0%,62%{transform:rotate(0)}68%,80%{transform:rotate(-4deg)}86%,100%{transform:rotate(0)}}
@keyframes kdJaw{0%{transform:none}10%{transform:translateY(.64%)}18%{transform:none}26%{transform:translateY(.64%)}36%{transform:none}44%{transform:translateY(.5%)}52%{transform:none}64%{transform:translateY(.64%)}74%{transform:none}100%{transform:none}}
@keyframes kdBlink{0%{opacity:0}60%{opacity:1}62.5%{opacity:0}88%{opacity:1}90.5%{opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.kd__head,.kd__arm,.kc__doll .kd .kd__lids,.kc.on .kc__doll .kd .kd__jaw{animation:none}}
:root[data-motion=reduce] .kd__head,:root[data-motion=reduce] .kd__arm,:root[data-motion=reduce] .kc__doll .kd .kd__lids,:root[data-motion=reduce] .kc.on .kc__doll .kd .kd__jaw{animation:none}
/* 2026-11-05 兄弟の絵を 2 人セットの切り抜き（ほぼ正方形）に替えたので、PC では 6 列に収め、名札を絵に寄せる */
@media (min-width:768px){.g12.br>.br__fig{grid-column:4/10}.g12.br>.br__nm--l{grid-column:2/4;justify-self:center}.g12.br>.br__nm--r{grid-column:10/12;justify-self:center}}
/* 似顔絵の呼吸ループ：絵の上に重ね、読み込めた時だけ見せる（読み込み前・動きを減らす設定では下の絵のまま） */
.fc__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;opacity:0;transition:opacity .4s}
.fc__v.ok{opacity:1}
/* 兄弟の呼吸：スーツの動画は読み込めたら見せる。作業着の動画は .br__work の溶かし替えに乗る（読み込み前は下の絵） */
.br__v{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.br__v:not(.br__work){opacity:0;transition:opacity .4s}.br__v.ok:not(.br__work){opacity:1}
.br__v.br__work:not(.ok){visibility:hidden}
/* 11/05 なおさん「あんまり激しくない方がいい。たまにで」：首は腹話術らしく左右へ（ほとんど止まっていて、たまに左・右へ傾けて戻る）、瞬きは 1 回ずつ間をあけて、腕はごくたまに、口は「ひとこと」の間に 2 回だけ */
.kd__head{animation:kdHead2 15.7s cubic-bezier(.45,0,.55,1) infinite}
.kd__arm{animation:kdArm2 23.9s cubic-bezier(.45,0,.55,1) infinite}
.kc__doll .kd .kd__lids{animation:kdBlink2 8.3s steps(1,end) infinite}
.kc.on .kc__doll .kd .kd__jaw{animation:kdJaw 2.3s steps(1,end) .6s 2}
@keyframes kdHead2{0%,30%{transform:rotate(0)}36%,46%{transform:rotate(-3deg)}52%,62%{transform:rotate(2.5deg)}68%,100%{transform:rotate(0)}}
@keyframes kdArm2{0%,78%{transform:rotate(0)}83%,89%{transform:rotate(-3deg)}94%,100%{transform:rotate(0)}}
@keyframes kdBlink2{0%{opacity:0}70%{opacity:1}72%{opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.kd__head,.kd__arm,.kc__doll .kd .kd__lids,.kc.on .kc__doll .kd .kd__jaw{animation:none}}
:root[data-motion=reduce] .kd__head,:root[data-motion=reduce] .kd__arm,:root[data-motion=reduce] .kc__doll .kd .kd__lids,:root[data-motion=reduce] .kc.on .kc__doll .kd .kd__jaw{animation:none}
.br__v{mix-blend-mode:multiply}
/* 2 本の動画は互いには普通に重ね、まとまりごと地に multiply（白い地が頁の色に溶ける） */
.br__v{mix-blend-mode:normal}
.br__vw{position:absolute;inset:0;mix-blend-mode:multiply;isolation:isolate}
.br__vw{mix-blend-mode:normal;isolation:auto}
/* 動画の地と頁の地のわずかな色の差で四角が見えないよう、縁をぼかして溶かす（人と図面は内側にある） */
.br__vw{-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(transparent,#000 5%,#000 97%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(transparent,#000 5%,#000 97%,transparent);mask-composite:intersect}
/* 11/05 なおさん「棒立ちじゃなくて、立て膝とか、工具箱に座ってるとか人形っぽさ」→ 工具箱に腰かける姿（_illust/v3/kaicho_sit_b、1239×1794）。回す中心は parts.json から */
.kd{aspect-ratio:1239/1794}
.kd__head{transform-origin:50.44% 29.65%}
.kd__arm{transform-origin:70.22% 34.45%}
@keyframes kdJaw{0%{transform:none}10%{transform:translateY(.69%)}18%{transform:none}26%{transform:translateY(.69%)}36%{transform:none}44%{transform:translateY(.55%)}52%{transform:none}64%{transform:translateY(.69%)}74%{transform:none}100%{transform:none}}
@media (min-width:768px){.kc__doll{width:calc(var(--dh) * .62)}}
.kc__doll{width:calc(var(--dh) * .7)}
.kc__bub::before{right:calc(var(--dh) * .35 - 8px)}.kc__bub::after{right:calc(var(--dh) * .35 - 6.5px)}

/* トップの顔の壁の終わりの札：社員の頁へ（2 マス） */
.fc--more{grid-column:span 2;aspect-ratio:auto;background:var(--ink);border-radius:8px;display:flex}
.fc--more a{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:12px 14px;color:#fff;font:500 13px/1.5 var(--ja);letter-spacing:.08em;transition:background-color .5s cubic-bezier(.33,0,.15,1)}
.fc--more a span[lang=en]{font:400 11px/1 var(--en);letter-spacing:.12em;opacity:.7}
@media (hover:hover){.fc--more a:hover{background:#0C74B4}}
/* 2026-11-06 挨拶の所：兄弟のスーツの写真を対で並べる（似顔絵は付けない） */
.br__fig--pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--u)}
.br__fig--pair .br__ph{display:block;aspect-ratio:3/4;overflow:hidden;border-radius:var(--r-s,4px);background:#E4EAF0}
.br__fig--pair .br__ph img{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:767px){.br__fig--pair{gap:10px}}

/* 2026-11-06 折り目を文節に（tools/kaigyo.py が文節の間に <wbr> を入れ、ここで <wbr> の所でだけ折らせる。Safari も Chrome と同じ所で折れる）
   なおさん「これはさ、改行するところ決めた方がいいのかな」＝メニューの「工事のご相談・お問い／合わせ」 */
.kw,.lt__t{word-break:keep-all;overflow-wrap:break-word}
span.nw{white-space:nowrap}   /* 括弧を含む文節は箱ごと（Safari が括弧の内側で折るため）。11/06 夜 カヲル：span に限る（新着情報の段 section.nw まで折らなくなり、携帯で 518px にはみ出して頁ごと縮んでいた） */
/* 約物の空き（tools/kaigyo.py が .yh・.ys・.ys2 を付ける）。Chrome は text-spacing-trim で自分で詰めるので、詰めるのは Safari だけ。
   段落の頭の始め括弧は、どちらも半角下げる（Chrome も 1 行目の頭は詰めない）。字詰めが比例（palt）の見出しは触らない */
.ys{margin-left:-.5em}
@supports not (text-spacing-trim:normal){.yh{letter-spacing:-.5em}.ys2{margin-left:-.5em}}
:is(.h1,.h2,.catch,.go__t,.mg__t,.cl__h,.ar__t,.ar__pq,.ep__t,.pu__t,.pu__t2,.hs__h2,.hs__h3) :is(.yh,.ys,.ys2){letter-spacing:inherit;margin-left:0}

/* ---------- 2026-11-06 夜 カヲル：白地のミニチュア（r80_vig）。枠も影も付けず、白は multiply で頁の地（--bg）に溶かす ----------
   multiply は「その物自身」に掛ける（祖先に transform・opacity・translate が付くと、そこで閉じて白い四角が出る）。出る動き・視差もこの figure 自身に。
   出方：ほぼ透明から立ち上がりの速い曲線で 1.1 秒、40px 下から 1.6 秒（写真の決まり）。横並びは左から 0.16 秒ずつ（--i） */
.vg{position:relative;margin:0;mix-blend-mode:multiply}
.vg__f{position:relative;display:block;aspect-ratio:3/2;overflow:hidden}
.vg__f .lv{transform:scale(1.12);transform-origin:50% 56%}   /* 白の余白を少し詰めて、人と盤を大きく（元は 1440×960、表示の 2 倍以上ある） */
.vg .cap{margin-top:calc(var(--u) / 4)}
.vg__k{display:block;margin-bottom:4px;font:500 var(--f2)/var(--l2) var(--ja);letter-spacing:.06em;color:var(--ink)}
[data-m=v]{opacity:.04;transform:translate3d(0,40px,0);transition:opacity 1.1s cubic-bezier(.2,.75,.25,1),transform 1.6s var(--out);transition-delay:calc(var(--i,0) * .16s)}
[data-m=v].in{opacity:1;transform:none}
/* 表彰と許可：見出しの下（1〜4 列）。一覧は 2 段にまたがり、絵の下端（説明）を一覧の下端にそろえる */
.cr__hd{grid-row:1}.cr__l{grid-row:1/span 2}
.cr__vg{grid-column:1/5;grid-row:2;align-self:end;margin-top:var(--u)}
/* 業務内容：建物の切り替えの下に、業務案内の三つ（高圧受変電・電灯・動力）を 4 列ずつ */
.vgrow{margin-top:calc(var(--u) * 3)}
.vgrow>.vg{grid-column:span 4}
/* 新着情報：見出しの下（1〜4 列） */
.nw__hd{grid-row:2}.nw__l{grid-row:2/span 2}
.nw__vg{grid-column:1/5;grid-row:3;margin-top:var(--u)}
/* 採用：段の終わりに、会長が助手席から手を振る社用車（全幅の 16:9） */
.rc__van{grid-column:1/-1;margin:calc(var(--u) * 4) 0 0}
.rc__van .ph{aspect-ratio:16/9}
.rc__van figcaption{margin-top:calc(var(--u) / 2)}
@media (max-width:767px){
  .cr__vg{margin-top:calc(var(--u) * 1.5)}
  .vgrow{margin-top:calc(var(--u) * 2);row-gap:var(--u)}
  .vgrow>.vg{display:grid;grid-template-columns:52% 1fr;column-gap:16px;align-items:center}   /* 携帯は絵を左、名前と説明を右に（3 段で縦に長くしない） */
  .vgrow .cap{margin-top:0}
  .vgrow .vg__f .lv{transform:scale(1.3)}   /* 携帯の小さな枠では白の余白をもう少し詰める（人と盤が枠の中に収まる範囲） */
  .nw__vg{width:76%;margin-top:calc(var(--u) * 1.5)}
  .rc__van{margin-top:calc(var(--u) * 2)}
  .rc__van .ph{aspect-ratio:1/1}
}
@media (prefers-reduced-motion:reduce){[data-m=v]{opacity:1!important;transform:none!important;transition:none!important}}
html[data-motion=reduce] [data-m=v]{opacity:1!important;transform:none!important;transition:none!important}

/* ---------- 2026-11-06 夜 カヲル：白地のミニチュアを、送っていく空間に散りばめる（なおさん「スクロールする空間に散りばめて。結構かわいいの多いから」） ----------
   段と段の境目（上の段の下の余白＋下の段の上の余白＝PC 300px・携帯 180px）に、高さ 0 の帯を置き、絵の真ん中を境目に合わせる（頁は長くならない）。
   左右に寄せ、2〜3 列で大きさを変える。説明は付けない飾り（aria-hidden）。携帯は 5 つだけ（.sc--sp）。視差の台本は付けず、出る動きだけ */
.sc{position:relative;height:0;pointer-events:none}
.sc>.fr{position:absolute;left:0;right:0;top:0;margin-inline:auto}
.sc__v{translate:0 calc(-50% + var(--sy,0px))}
/* 事業部：見出しの脇（9〜11 列）。下の端を見出しの字の下にそろえる */
@media (min-width:768px){
  .dv__hd>.lbl{grid-row:1}.dv__hd>.h1{grid-row:2;grid-column:1/9}
  .dv__vg{grid-column:9/13;grid-row:1/3;align-self:end}   /* 車の入った 03 は 4 列の見せ場（11/06 なおさん「そこそこの大きさ」） */
}
@media (max-width:767px){
  .sc:not(.sc--sp){display:none}
  .sc__v{width:52%}
  .sc--big .sc__v{width:64%}   /* 車の入った物は大きめ */
  .sc--r .sc__v{justify-self:end}
  .sc--spr .sc__v{justify-self:end}   /* 携帯では左右を交互に（07 は右へ） */
  .dv__vg{display:none}
}