/* v3/wire/d.css の写し（tools/build.py が作る。ここは直さない） */
/* タカネ電業 第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：同じ端末の字の細字 300。Web の UD 新ゴ L は重いので 11/06 夜に外した）。手元に入っている 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:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","YuGothic",sans-serif;   /* 細字（300）の見出し。端末の字（Mac・iPhone はヒラギノ角ゴ、Windows は游ゴシック Light）。Web の UD 新ゴ L は 1 本 3MB 読まれていたので外した（11/06 夜 なおさん「アドビフォントで重くなるなら使わなくていいよ」） */
  --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.1 秒）、中は 1.16 倍から 2.2 秒で落ち着く。11/07 なおさん「顔がでてくるのがおそい」→ 下からだと上の顔が最後に出るので、上（顔・頭）から先に見せる */
[data-m=p]{clip-path:inset(0 0 100% 0 round var(--rr,var(--r)));transition:clip-path 1.1s 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:0}
.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:0;color:var(--tx2)}
.lt__cap{grid-column:7/9}
.lt__ph{grid-column:9/13;aspect-ratio:4/5;--rr:var(--r-s)}
/* 11/06 夜 なおさん「文字をもう少し右に収めて、右上にあるやつを文字の横に」「ミニチュアもっとおおきくても」：
   絵は左の 4 列で文字の高さの真ん中に、文字は 5〜12 列。白の余白を詰めて人と箱を大きく */
.lt__vg{grid-column:1/5;align-self:center}
.lt__vg .vg__f{aspect-ratio:1/1}
.lt__vg .vg__f .lv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.25);transform-origin:44% 56%}
@media (min-width:768px){.lt__t{grid-column:5/13;font-size:min(46px,3.1vw)}}
/* 11/06 夜 なおさん「この文字詰めはないよ…ベタ打ちじゃないの？」：大きな明朝の 4 行は見出しの扱い。かなと約物を詰め（palt）、
   詰めた分だけ字間を少し戻して、字の黒みを均す。行送りは字の 1.8 倍（ベタの 2 倍は大きな字では間延びする。11/06 夜 NERV の和文の手本「見出し・リードは 1.8〜2.3」で 1.7→1.8）。約物の詰めは palt に任せ、text-spacing-trim とは重ねない */
.lt__t{font-feature-settings:"palt" 1;letter-spacing:.05em;line-height:1.8}

/* ---------- 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:-.01em}
.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:-.01em}
.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:0}
.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) calc(var(--u) * 2);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)}}
/* ---------- 足元の字組み（11/06 夜 カヲル。なおさん「フッターの文字組、カヲル君なんとかして」） ----------
   締めの「お仕事のご相談／採用のエントリー」と同じ文法（上に 1 本の線 → 12 の札 → 1u → 16 の中身）で、締めから地続きに読ませる。
   ネオンの TAKANE → 2u → 社名（20、L1）と所在地・電話（16、L7）を字の上でそろえる → 3u → 案内の 4 列（L1・L4・L7・L10。1 行 1 項目）→ 3u → ことわりと ©。
   英字の社名は 16。12 の英字（列の見出し・©）は Neue Haas の 500（Display の 400 は 12px で細すぎて読めなかった）・字間 0・語間 .15em（欄名の英字と同じ） */
.ft{--fln:rgba(255,255,255,.09)}
.ft-now .ft{--fln:var(--line)}
.ft__g{margin-top:calc(var(--u) * 2);align-items:start;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(--f2)/var(--l2) var(--en);letter-spacing:0;word-spacing:.15em;color:var(--flo)}   /* 英字の社名は本文の 16（12 では細くて読めなかった）。右の所在地・電話と 2 行ずつ同じ拍に */
.ft__ad{grid-column:7/13;font-style:normal;margin-top:calc(var(--it-20) - var(--it-tx) - var(--f2) * .051)}   /* 頭の「〒」は漢字より字面の上が .051em 低い（ヒラギノで測った値） */
.ft__tel{display:flex;flex-wrap:wrap;column-gap:var(--u)}
.ft__n{white-space:nowrap}
.ft__k{margin-right:.5em;color:var(--flo)}
.ft__ix{margin-top:calc(var(--u) * 3);color:var(--ftx)}
.ft__c{grid-column:span 3;padding-top:var(--u);border-top:1px solid var(--fln)}
.ft__h{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:calc(var(--u) / 2);font:400 var(--f1)/var(--l2) var(--ja);letter-spacing:.08em;color:var(--flo)}
.ft__h span:lang(en){font-family:var(--en);font-weight:500;letter-spacing:0;color:var(--fhi)}
.ft__c ul{margin-top:var(--u)}
.ft__c a,.ft__tel a{display:inline-block;transition:color .45s var(--soft)}
@media (hover:hover){.ft a.ul:hover{color:var(--fhi)}}
.ft__b{margin-top:calc(var(--u) * 3);font:500 var(--f1)/var(--l2) var(--en);letter-spacing:0;word-spacing:.15em;color:var(--flo)}
.ft__note{grid-column:1/-1;font-family:var(--ja);font-weight:400;letter-spacing:.06em;word-spacing:0;word-break:keep-all;overflow-wrap:anywhere}   /* 折るのは「、」の後ろの <wbr> だけ（携帯で「ありません。」が一人で落ちていた） */
.ft__cp{grid-column:1/7}.ft__pl{grid-column:7/13}
/* 締め（.cl）で頁が終わるトップだけ、締めの下 4u ＋ 1u ＝段の間の 5u で TAKANE へつなぐ（下層は明るい段の後なので 3u のまま） */
main:has(>.cl:last-child)+.ft{padding-top:var(--u)}

/* ---------- 会長（腹話術の人形のような案内役）：頁全体で沿革と採用の 2 回だけ、画面の右端からひょこっと顔を出してひとこと。4 秒ほどで引っ込む（d.js が字・ミニチュアとの重なりと間を見る） ----------
   11/06 なおさん「会長は全身が出てる必要がないよね…右端からひょこって出てるようにしたいな」「文字はずっと同じのが出てるのが鬱陶しいから、消えてくれた方がいい」
   「文字は2行とかにして、あんまり左に行かない方がいい」「吹き出しは角丸じゃなくて、丸にしてほしい。半透明にする？吹き出し少し」
   絵は頭から胸の下まで（v3/tools/make_kaicho_peek.py：元の 1239×1794 を x270–1090・y20–990 で切った 820×970。下の 190 は画面の下の外）。
   --kh＝ヘルメットの頭の幅（なおさん「今は出過ぎ目立ちすぎ」→ 画面の幅の 1 割まで：1440 で 81px・1024 で 72px・390 で 40px）、--ks＝元の絵の 1px が画面の何 px か。人形の右下の角（画面の外）を軸に 8 度傾けて、右の肩と胸の下を端の外に隠す。
   .kc は画面の右下の角に置いた大きさ 0 の錨。.kc__win が人形の見える範囲で、はみ出しは切る（横に送れる幅を作らない） */
.kc{--kh:clamp(72px,5.6vw,84px);--ks:calc(var(--kh) / 428);position:fixed;right:0;bottom:0;z-index:45;width:0;height:0;pointer-events:none}
.kc__win{position:absolute;right:0;bottom:0;width:calc(var(--ks) * 660);height:calc(var(--ks) * 790);overflow:hidden}
.kc__doll{position:absolute;right:calc(var(--ks) * -200);bottom:calc(var(--ks) * -170);display:block;width:calc(var(--ks) * 820);height:calc(var(--ks) * 970);transform-origin:100% 100%;transform:translate3d(calc(var(--ks) * 820),0,0) rotate(-3deg);transition:transform .7s var(--soft)}
.kc.on .kc__doll{transform:rotate(-8deg);transition-duration:.8s}
.kc__m{position:absolute;right:calc(var(--ks) * 332);bottom:calc(var(--ks) * 280)}   /* 口（出きった時の位置）。ふきだしの尾はここへ向く */
/* ふきだし：楕円（d.js が字の大きさに合わせて楕円と尾を一筆の線で描く）。地は白の 88%、線は墨の 1px。字は見出しと同じ細字（--ja-l）で 2 行 */
.kc__bub{position:absolute;right:calc(var(--ks) * 470);bottom:calc(var(--ks) * 560);margin:0;padding:.95em 1.5em;font:300 18px/1.6 var(--ja-l);font-feature-settings:"palt" 1;letter-spacing:.04em;color:var(--ink);white-space:nowrap;opacity:0;transform:translate3d(0,6px,0) scale(.97);transform-origin:90% 100%;transition:opacity .8s var(--soft),transform .8s var(--out)}
.kc__sh{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.kc__sh path{fill:rgba(255,255,255,.88);stroke:rgba(21,29,39,.86);stroke-width:1px;vector-effect:non-scaling-stroke}
/* 11/06 ふきだし A（角の丸い四角の案。<html class="bub-a">＝?bub=a の時だけ）：白の面・墨 85% の線・下にだけ薄い影。字は左にそろえる */
.bub-a .kc__sh{filter:drop-shadow(0 10px 14px rgba(21,29,39,.14))}
.bub-a .kc__sh path{fill:rgba(255,255,255,.95);stroke:rgba(21,29,39,.85);stroke-linejoin:round}
.bub-a .kc__bub{padding:.85em 1.4em .9em;text-align:left}
.kc__bub{text-align:left}
.kc__t{position:relative;display:block}
.kc__t>span{display:block}
/* 頭の左上に字があれば顔の左（.lo）、次に頭の真上（.up）。どこにも字がある所で触れて出した時は、下の字が透けて濁らないよう地を濃く（.ov） */
.kc.lo .kc__bub{right:calc(var(--ks) * 590);bottom:calc(var(--ks) * 170)}
.kc.up .kc__bub{right:calc(var(--ks) * 130);bottom:calc(var(--ks) * 770)}
.kc__bub.ov .kc__sh path{fill:rgba(255,255,255,.97)}
.kc.on .kc__bub.show{opacity:1;transform:none;transition-duration:.5s,.7s}
@media (max-width:767px){.kc{--kh:40px}.kc__bub{font-size:15px;padding:.9em 1.45em}}
/* 11/06 なおさん「スクロールして出てくるとか、タッチするとなんか吹き出しが出て喋るとか、それくらいにしときたいな」：
   出ている間に会長に触れる（押す・Enter）と、もう一度その段の言葉を話して 4 秒延びる。押せる面は見えている人形の上。頁全体で出るのは沿革と採用の 2 回だけ（d.js の KC_AT）。
   触れると、少しだけ身を乗り出す（hover:hover の時だけ）。頭の画面（.town）には出さない（d.js） */
.kc__btn{position:absolute;right:0;bottom:0;width:calc(var(--ks) * 600);height:calc(var(--ks) * 730);padding:0;border:0;border-radius:46% 46% 0 0;background:none;cursor:pointer;visibility:hidden;pointer-events:none;-webkit-tap-highlight-color:transparent}
.kc.on .kc__btn{visibility:visible;pointer-events:auto}
.kc__btn:focus-visible{outline-offset:-4px}
.kc.on .kc__btn:focus-visible~.kc__win .kc__doll{transform:translate3d(calc(var(--ks) * -26),calc(var(--ks) * -18),0) rotate(-9deg);transition:transform .6s var(--hv)}
@media (hover:hover){.kc.on .kc__btn:hover~.kc__win .kc__doll{transform:translate3d(calc(var(--ks) * -26),calc(var(--ks) * -18),0) rotate(-9deg);transition:transform .6s var(--hv)}}
.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:1.7}
  .lt__ph{order:3}.lt__cap{order:4;margin-top:calc(var(--u) * -1.5)}
  .lt__vg{grid-column:1/-1;width:78%;justify-self:center;margin:calc(var(--u) * -1) 0}
  /* 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)}
  /* 足元：1 本の線 L1。社名 → 1u → 所在地・電話（電話と FAX は 1 行ずつ）→ 2u → 案内は携帯の 2 つ割りの線（間 1u）に 2 列ずつ → 2u → ことわりと © */
  .ft__ad{margin-top:var(--u)}
  .ft__tel{flex-direction:column}
  .ft__ix{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--u);row-gap:calc(var(--u) * 2);margin-top:calc(var(--u) * 2)}
  .g12.ft__ix>.ft__c{grid-column:auto!important}
  .ft__b{margin-top:calc(var(--u) * 2)}
}

/* 指の端末の写真の視差：台本ではなく送りの時間軸（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__doll{transform:rotate(-8deg)!important;opacity:0;transition:opacity .15s!important}
  .kc.on .kc__doll{opacity:1}
  .kc__bub{transform:none!important;transition:opacity .15s!important}
  .kc.on.talk .kc__doll .kd .kd__jaw{animation:none!important}
  .snd{display:none}
  .town__v{transform:none!important}
  .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 で前の形） */
/* 11/07 なおさん（携帯の本番）「上が白いな。携帯で見たときもパソコンみたく全画面になってほしい」→ 携帯も同じく動画を画面いっぱいに、上の帯は白字 */
@media (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]) .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}
}

@media (hover:hover) and (min-width:768px) and (prefers-reduced-motion:no-preference){html.hero-full.town-loop:not([data-motion=reduce]) .town__bt{bottom:calc(var(--u) * 2.2)}}
@media (max-width:767px) and (prefers-reduced-motion:no-preference){
  html.hero-full.town-loop:not([data-motion=reduce]) .town__st{padding:0}
  html.hero-full.town-loop:not([data-motion=reduce]) .town__logo{top:calc(var(--hd) + var(--u))}
}
/* ---------- 上の帯の仕上げ（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 (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 (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）。
   11/06 右端から覗く形に切り抜いた（img/v3/kaicho_b/pk_*.webp、元の x270–1090・y20–990）。回す中心は parts.json の値をこの切り抜きの % に直した物：
   首 (625,532)→43.29% 52.78%、肩 (870,618)→73.17% 61.65%、顎の開き 12.4px→1.278%（9.9px→1.02%） */
.kd{inset:0;left:0;width:100%;height:100%;aspect-ratio:auto;transform:none;filter:drop-shadow(-3px 6px 10px rgba(21,29,39,.2))}
.kd__head{transform-origin:43.29% 52.78%}
.kd__arm{transform-origin:73.17% 61.65%}
@keyframes kdJaw{0%{transform:none}10%{transform:translateY(1.278%)}18%{transform:none}26%{transform:translateY(1.278%)}36%{transform:none}44%{transform:translateY(1.02%)}52%{transform:none}64%{transform:translateY(1.278%)}74%{transform:none}100%{transform:none}}
.kc:not(.on) .kd *{animation-play-state:paused}
/* 口は話す間だけ（.talk。d.js が話すたびに付け直す） */
.kc.on .kc__doll .kd .kd__jaw{animation:none}
.kc.on.talk .kc__doll .kd .kd__jaw{animation:kdTalk 1.9s steps(1,end) .15s infinite}   /* 11/07 話している間ずっと（d.js が字の数で .talk を外すと閉じて止まる） */
/* 11/06 なおさん「吹き出しに向かって『こちら』みたいな感じで指差ししたり、手を上げることがあったり」：話し始めに、ときどき右腕（見て左）を上げる。
   体の部品を、腕を上げた体（v3/tools/make_kaicho_pose.py、左へ広げた切り抜き x 0–1090）に差し替えるだけ。人形らしく、ぱっと切り替える。
   どちらにするか・出さないかは kaicho-lines.js（.g-point／.g-wave）。動きを減らす設定では付けない。上げた手が切れないよう、見える窓を左へ広げた */
.kc__win{width:calc(var(--ks) * 1000)}
.kc__doll .kd img.kd__pose{left:-32.93%;width:132.93%;opacity:0}
.kc.g-point .kc__doll .kd img.kd__pose--point,.kc.g-wave .kc__doll .kd img.kd__pose--wave{opacity:1}
.kc.g-point .kc__doll .kd>img:first-child,.kc.g-wave .kc__doll .kd>img:first-child{opacity:0}

/* トップの顔の壁の終わりの札：社員の頁へ（2 マス） */
.fc--more{grid-column:span 2;aspect-ratio:auto;background:#E2EEF6;border-radius:8px;display:flex}   /* 11/07 夜 なおさん「右下の会長のところ真っ黒」→ 顔の札と同じ淡い水色の地に、字は墨 */
.fc--more a{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:12px 14px;color:var(--ink);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;color:#0C74B4}
@media (hover:hover){.fc--more a:hover{background:#CFE5F3}}
/* 11/06 夜 なおさん「こういうところに会長を入れればいいのに」：札の右下から、案内役の会長が上半身だけ覗く（build_d.py の KD_CARD）。
   右下に出る会長と同じ部品の絵を重ねて止めた 1 枚（img/v3/kaicho_b/card.webp、白い縁取りを抜いた物）を、同じく 8° 傾ける。札の右の縁・下の縁（角丸）で切る。字の列（左下）には入れない：
   幅は札の幅（cqw）から字の列（--tw＝左の余白＋字の幅）を引いた残りで決め、顔は隣の似顔絵の顔とほぼ同じ大きさ（1440 で 52px）。
   札が細い時（1024 など）は和文を「社員の顔と／写真を見る」の 2 行にして、右を空ける */
.fc--more{container-type:inline-size}
.fc--more a{position:relative;--tw:155px}
.fc--more a>span:not(.fcm){position:relative;z-index:1}
.fcm{position:absolute;right:0;bottom:0;width:min(33cqw,(100cqw - var(--tw) - 14px) * 1.2);aspect-ratio:460/544;transform-origin:100% 100%;translate:17% 22%;rotate:-8deg;pointer-events:none}
.fcm__d{position:absolute;inset:0}
.fc .fcm img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
@container (max-width:259px){
  .fc--more a{--tw:85px}
  .fcm__t>span{display:block}
}
/* 携帯（札の幅 99〜125px、字の列は 82px）：右に残るのは 20〜40px だけなので、右の縁から顔だけ覗く形に。4 割を縁の外に出し、傾きは 6° */
@container (max-width:149px){
  .fc--more a{--tw:82.4px;padding-left:12px}
  .fcm{width:min(38cqw,(100cqw - var(--tw) - 4px) * 1.75);translate:40% 3%;rotate:-6deg}
  /* 11/06 夜 なおさん「会長がちょっと右すぎるので、もうちょっと左に寄せて切れないように…白い文字ももうちょっとちっちゃく」：
     会長を札の中へ戻し（縁の外へ出すのをやめる）、和文を 13→10.5px・字間 .02em、会長を札の幅の 38% にして、字の列（約 60px）と会長が重ならないように */
  .fc--more a{font-size:10.5px;letter-spacing:.02em;--tw:66px;padding:10px}
  .fc--more a span[lang=en]{font-size:10px;letter-spacing:.08em}
  .fcm{width:38cqw;translate:-2% -2%;rotate:-6deg}
}
/* 出方：札が並んで出る時に、0.2 秒遅れて傾いた向きのまま 16% 下から上がって止まる（ひょこっと、1.1 秒）。触れると 5% 上がる（0.5 秒）。
   動きを減らす設定（端末・data-motion）では、どちらも動かさない */
@media (prefers-reduced-motion:no-preference){
  html.js:not([data-motion=reduce]) [data-m=pop] .fcm{transform:translate3d(0,16%,0);transition:transform 1.1s var(--out) calc(var(--i,0) * var(--st,.12s) + .2s)}
  html.js:not([data-motion=reduce]) [data-m=pop].in .fcm{transform:none}
  html:not([data-motion=reduce]) .fcm__d{transition:transform .5s var(--hv)}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){html:not([data-motion=reduce]) .fc--more a:hover .fcm__d{transform:translate3d(0,-5%,0)}}
/* 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}
}

/* ---------- 2026-11-06 夜 カヲル：沿革（section.yr）の組み直し。案は build_d.py の YR_PLAN（A＝二枚の本社／B＝一枚の本社） ----------
   なおさん「画像も良くないし、レイアウトも良くない」「使った写真、写真のトリミングが全然よくない」。
   写真：パンフ（2020）の外観（なおさんのレタッチ済み）と 1983 年の本社。絵は枠の比÷1.12 で切ってあり、視差のはみ出しは上下だけ（左右は全部見せる）。
   字（NERV の和文の手本、11/06）：大きな見出しは palt＋字間 .06em・行送り 3u（48px の 1.875 倍。携帯 30px は 1.8 倍の 54px）。本文はベタ（palt なし・字間 .05em・行送り 30px＝1.875）。
   余白：文の幅は 5 列（1440 で 530px＝31 字、画面の 4 割弱）。言葉と写真の間 4u、写真と数の間 4u。字の左端は 1 列目と 7 列目の 2 本だけ */
.yr--a .ph__in,.yr--b .ph__in{inset:-6% 0}
.yr--a .ph__in>picture,.yr--b .ph__in>picture{position:absolute;inset:0}
.yr--a .ph__in>picture>img,.yr--b .ph__in>picture>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.yr--a .yr__h,.yr--b .yr__h{letter-spacing:.06em;line-height:calc(var(--u) * 3)}
.yr--a .yr__body .tx,.yr--b .yr__body .tx{letter-spacing:.05em;font-feature-settings:normal;font-kerning:none}
.yr--a .yr__body .tl,.yr--b .yr__body .tl{margin-top:calc(var(--u) * 1.5)}
.yr__y{margin-inline-end:1em;font:400 var(--f1)/var(--l1) var(--en);letter-spacing:.02em;color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
.yr__f .cap{margin-top:calc(var(--u) / 2)}
.yr--a .yr__stats,.yr--b .yr__stats{margin-top:calc(var(--u) * 4)}
@media (min-width:768px){
  .yr--a .yr__txt,.yr--b .yr__txt{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:end}
  .yr--a .yr__txt>.lbl,.yr--b .yr__txt>.lbl{grid-column:1/-1}
  .yr--a .yr__h,.yr--b .yr__h{grid-column:1/7}
  /* A：見出しは左、本文は 7 列目。本文の終わり（企業情報）の下を、見出しの終わりの行の字の下にそろえる */
  .yr--a .yr__body{grid-column:7/12;margin-bottom:16px}   /* 実測で「企業情報」の字の下＝「70年。」の字の下（1440・1024） */
  .yr__pair{margin-top:calc(var(--u) * 4);align-items:end}
  .yr__f--old{grid-column:1/6}
  .yr__f--old .ph{aspect-ratio:3/2}
  .yr__f--now{grid-column:7/13}
  .yr__f--now .ph{aspect-ratio:6/5}
  /* B：見出しだけを上に。写真は 12 列の横長の帯。説明は 1 列目、本文は 7 列目（菱岩のように片側へ寄せ、左上は余白） */
  .yr__band{margin-top:calc(var(--u) * 3);align-items:start}
  .yr__f--band{grid-column:1/-1}
  .yr__f--band .ph{aspect-ratio:16/9}
  .yr__bcap{grid-column:1/6;margin-top:calc(var(--u) / 2)}
  .yr--b .yr__body{grid-column:7/12;margin-top:calc(var(--u) / 2 - 6px)}   /* 本文の 1 行目の字の下を、説明（12px）の字の下にそろえる */
  .yr--a .yr__stats li,.yr--b .yr__stats li{grid-column:span 3}
}
@media (max-width:767px){
  .yr--a .yr__h,.yr--b .yr__h{line-height:54px}
  .yr--a .yr__body,.yr--b .yr__body{margin-top:var(--u)}
  .yr__pair{margin-top:calc(var(--u) * 2);row-gap:calc(var(--u) * 1.5)}
  .yr__f--old{width:64%}
  .yr__f--old .ph{aspect-ratio:3/2}
  .yr__f--now .ph,.yr__f--band .ph{aspect-ratio:6/5}
  .yr__band{margin-top:calc(var(--u) * 1.5)}
  .yr__bcap{margin-top:calc(var(--u) / 2)}
  .yr--a .yr__stats,.yr--b .yr__stats{margin-top:calc(var(--u) * 2.5);row-gap:var(--u)}
  .yr--a .yr__stats>li,.yr--b .yr__stats>li{grid-column:span 6!important}
}

/* ---------- 2026-11-06 夜：白地のミニチュアのメリハリ（大・敷き・小）。組みは build_d.py の vg_plan、見比べは top-d-vg1／vg2 ----------
   なおさん「ちっちゃく使うよりは、もうちょっとメリハリを。大きく使って後ろに薄く敷くのも全然あり。ちっちゃく使うのもいいんだけど、影をちょっとつけるとかして」
   小（.vg--s）：紙の上の模型の接地の影。位置は絵ごとに poster から測った --gx・--gy・--gw（枠に対する %）を、中の動画の寄り（--s・--ox・--oy）に合わせて写す。
     影も multiply（白の地には濃く、足もとには重ならない程度）。もとの絵の薄い影はそのまま残る
   大（.vb）：段と段の間に一枚、端から裁ち落とす。白の余白は multiply で消えるので、上下は段の余白に食い込ませる（頁は長くしすぎない）
   敷き（.vg--bk）：段の後ろに大きく薄く。字より下（z-index:-1。段は重なりの文脈を作らないので頁の地と multiply できる）。送りより遅れて動く（view()。台本は使わない） */
.vg--s{--s:1.12;--ox:50%;--oy:56%;--k:1}
.lt__vg.vg--s{--s:1.25;--ox:44%;--k:1.5}   /* 正方形の枠に cover（左右が 1.5 倍に広がる） */
/* 影は 2 段（11/06 夜 なおさん「平面的な後ろにある影ではなく、3D の場合はちょっと立体的に見えるような、接地感があるような」）：
     ::before＝接地の影。模型の真下のごく近くに、細く濃く（足もと・車輪の下だけ）
     ::after＝落ちる影。横に広く薄く、外へやわらかく消える。絵の光源（左上）に合わせ、もとの絵の影の向き（--sx、絵ごとに測る）へずらす
     どちらも動画（白の四角）の上に重ねて multiply（z-index:1。.vg の重なりの中で混ざるので、白には影、足もとの濃い所にはほとんど効かない） */
.vg--s .vg__f::before,.vg--s .vg__f::after{content:"";position:absolute;z-index:1;pointer-events:none;mix-blend-mode:multiply;
  --cx:calc(var(--ox) + (50% + (var(--gx) - 50%) * var(--k) - var(--ox)) * var(--s));
  --cy:calc(var(--oy) + (var(--gy) - var(--oy)) * var(--s));
  --sw:calc(var(--gw) * var(--k) * var(--s));
  top:var(--cy)}
.vg--s .vg__f::before{left:calc(var(--cx) + var(--sx,8%) * var(--k) * var(--s) * .1);width:calc(var(--sw) * .9);aspect-ratio:12/1;translate:-50% -58%;
  background:radial-gradient(closest-side,rgba(21,29,39,.42),rgba(21,29,39,.2) 45%,rgba(21,29,39,.05) 78%,rgba(21,29,39,0));filter:blur(1px)}
.vg--s .vg__f::after{left:calc(var(--cx) + var(--sx,8%) * var(--k) * var(--s) * .55);width:calc(var(--sw) * 1.5);aspect-ratio:9/2;translate:-50% -60%;
  background:radial-gradient(closest-side,rgba(21,29,39,.14),rgba(21,29,39,.07) 50%,rgba(21,29,39,.02) 80%,rgba(21,29,39,0));filter:blur(5px)}
/* 大 */
.vb{position:relative;overflow-x:clip;margin-block:calc(var(--u) * -4)}
.vb .vg--b{grid-column:1/-1;width:min(70vw,1080px);--s:1}
.vb .vg--b .vg__f .lv{transform:none}
.vb--l .vg--b{justify-self:start;margin-left:calc(var(--gut) * -1 - 13vw)}   /* 被写体の端が画面の端に掛かる（1440 で約 20px 裁ち落とす） */
.vb--r .vg--b{justify-self:end;margin-right:calc(var(--gut) * -1 - 13vw)}
.vb .vg--b .vg__f::before{filter:blur(1.5px)}.vb .vg--b .vg__f::after{filter:blur(8px)}
/* 敷き */
section:has(>.vg--bk){position:relative;overflow-x:clip}
.vg--bk{position:absolute;z-index:-1;top:50%;width:min(78vw,1240px);margin:0;mix-blend-mode:multiply;opacity:.16;filter:saturate(.55);pointer-events:none;translate:0 -50%}
.vg--bkr{right:calc(-9vw)}
.vg--bkl{left:calc(-9vw)}
.vg--bk .vg__f .lv{transform:none}
@supports (animation-timeline:view()){
  .vg--bk{animation:vgBk linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  @keyframes vgBk{from{translate:0 calc(-50% + 9vh)}to{translate:0 calc(-50% - 9vh)}}
}
@media (max-width:767px){
  .vb{margin-block:calc(var(--u) * -2.5)}
  .vb .vg--b{width:132vw}
  .vb--l .vg--b{margin-left:calc(var(--gut) * -1 - 18vw)}
  .vb--r .vg--b{margin-right:calc(var(--gut) * -1 - 18vw)}
  .vgrow .vg--s{--s:1.3}
  .vg--bk{width:150vw;opacity:.13}
  .vg--bkr{right:-46vw}
  .vg--bkl{left:-46vw}
}
@media (prefers-reduced-motion:reduce){.vg--bk{animation:none!important}}
html[data-motion=reduce] .vg--bk{animation:none!important}

/* ---------- 2026-11-06 夜：社員の段の頭＝役員の欄（なおさん「社員 A」）。組みは build_d.py の TPA_FIGS ----------
   左 1〜5 列に段の言葉、右に二人の写真を 3 列ずつ（3:4）。名前は写真の下に横組み（役職・名前・ローマ字）。前の .br（縦書きの名前で挟む対）は使わない */
.tpn{display:flex;flex-direction:column;gap:6px;margin:0;color:var(--ink)}
.tpn__t{font:400 var(--f1)/1.4 var(--ja);letter-spacing:.12em;color:var(--tx)}
.tpn__n{font:400 var(--f3)/1.3 var(--ja);letter-spacing:.14em}
.tpn__n i{display:inline-block;inline-size:.5em}   /* 姓と名の間は半角ほど */
.tpn__r{font:400 11px/1.4 var(--en);letter-spacing:.16em;text-transform:uppercase;color:var(--tx2)}
.tpa{margin-top:calc(var(--u) * 2);align-items:end}
/* 左の 6 列：上に和文の大見出し（h1）とリード、下の端に欧文のキャッチ（写真の下の名前の行と同じ高さで終わる。スイスの左寄せ・詰めた行送り）。11/06 夜 なおさん */
.tpa__txt{grid-column:1/7;align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;gap:calc(var(--u) * 2)}
.tpa__top .tx{margin-top:var(--u);max-width:30em}
.tpa__en{margin:0 0 -.18em -.05em;font:300 min(72px,5vw)/1.04 var(--en);letter-spacing:0;color:var(--ink);font-feature-settings:"kern"}
/* 社員の似顔絵は 1 段 8 枚：2 枚と列の間 1 つで、役員の写真 1 枚の幅（12 列の 3 列分）にちょうど重なる。黒い札は 2 枚分で有志様の写真の真下に来る */
.face .wall--s{grid-template-columns:repeat(8,minmax(0,1fr))}
@media (min-width:768px){.tpa__top .h1{font-size:min(var(--f5),calc((100vw - 2 * var(--gut) - var(--u)) / 2 / 6.3));line-height:1.12}}   /* 「タカネ電業で」の 6 字が左の 6 列に収まる大きさまで（1440 で 80px、768 で 53px）。写真の列へはみ出さない */
.tpa__f{margin:0}
.tpa__f:nth-of-type(1){grid-column:7/10}
.tpa__f:nth-of-type(2){grid-column:10/13}
.tpa__ph{display:block;aspect-ratio:3/4;overflow:hidden;border-radius:var(--r-s,4px);background:#E4EAF0}
.tpa__ph img{display:block;width:100%;height:100%;object-fit:cover}
.tpa__f figcaption{margin-top:calc(var(--u) / 2)}
@media (max-width:767px){
  .tpa{display:grid;grid-template-columns:1fr 1fr;column-gap:12px;row-gap:var(--u)}   /* 携帯は 12 列が外れるので、写真は半分ずつ並べる（縦に積むと大きすぎる） */
  .tpa__txt{grid-column:1/-1;gap:var(--u)}
  .tpa__en{font-size:34px}
  .face .wall--s{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}   /* 3 枚と間 2 つ＝写真 1 枚の幅（写真の間と同じ 12px） */
  .g12.tpa>.tpa__f:nth-of-type(1){grid-column:1!important}   /* 携帯の .g12>*（1/-1!important）より強く */
  .g12.tpa>.tpa__f:nth-of-type(2){grid-column:2!important}
  .tpa .tpn__n{font-size:var(--f2)}
}

/* ---------- 「Behind every switch.」をバウハウスのポスターに（11/06 なおさん「もっと大胆でいいんじゃない？　デザインできるじゃんバウハウスのポスターデザインみたく」→ 3 案の見比べから「P2 灯り」に決定）
   段の全幅を 1 枚のポスターに（12 列の subgrid）。左に Behind を 210 で縦に立て（下から上へ読む）、右に every／switch. を 240 で 2 段。
   上から 1px の配線が下り、直径 360 の水色の円（つり下げの照明）が switch. の後ろで灰から水色に灯る。円・線・字の 3 つだけ。字は aria-hidden の飾り。
   大きな英字の字間は −.01em（11/07 なおさん「英語の詰めが詰まりすぎ」で −.04〜−.045em から戻した）、左の肩 −.07em。y の足を切らないよう .w に下の余白。説明と写真は下の行へ。
   見比べの元：v3/wire/en.html・v3/英字の組み_3案_2026-11-06.md ---------- */
.lt .lt__en{grid-column:1/-1;display:grid;grid-template-columns:subgrid;grid-template-rows:auto auto;position:relative;isolation:isolate;
  margin:0;padding-top:calc(var(--u) * 7);font:300 var(--f5)/1 var(--en);letter-spacing:0;color:var(--ink)}
.lt .lt__en br{display:none}
.lt .lt__en .w{display:block}
.lt .lt__en .w:nth-of-type(1){grid-column:1/3;grid-row:1/3;align-self:end;justify-self:start;writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:calc(var(--u) * 7);line-height:calc(var(--u) * 5.4);letter-spacing:-.01em}
.lt .lt__en .w:nth-of-type(2),.lt .lt__en .w:nth-of-type(3){grid-column:3/-1;font-size:calc(var(--u) * 8);line-height:calc(var(--u) * 6.4);letter-spacing:-.01em;margin-left:-.07em}
.lt .lt__en .w:nth-of-type(2){grid-row:1;align-self:end;padding-bottom:.24em;margin-bottom:-.24em}
.lt .lt__en .w:nth-of-type(3){grid-row:2}
.lt .lt__en::after{content:"";grid-column:6/11;grid-row:1/3;align-self:end;justify-self:center;z-index:-1;margin:calc(var(--u) * -6) 0 calc(var(--u) * -1);
  width:calc(var(--u) * 12);height:calc(var(--u) * 18);
  background:linear-gradient(var(--ink),var(--ink)) 50% 0 / 1px calc(var(--u) * 6) no-repeat,
             radial-gradient(circle at 50% calc(100% - var(--u) * 6),var(--acc) 0 calc(var(--u) * 6 - .5px),transparent calc(var(--u) * 6))}
.lt .lt__cap{grid-column:1/5}
.lt .lt__ph{grid-column:9/13}
@media (max-width:767px){
  .lt .lt__en{padding-top:calc(var(--u) * 4)}
  .lt .lt__en .w:nth-of-type(1){grid-column:1/-1!important;font-size:calc(var(--u) * 3.6);line-height:calc(var(--u) * 2.8)}
  .lt .lt__en .w:nth-of-type(2),.lt .lt__en .w:nth-of-type(3){grid-column:1/-1!important;margin-left:calc(var(--u) * 3);font-size:calc(var(--u) * 3.6);line-height:calc(var(--u) * 3)}
  .lt .lt__en .w:nth-of-type(1){grid-row:1/3!important}
  .lt .lt__en .w:nth-of-type(2){grid-row:1!important}
  .lt .lt__en .w:nth-of-type(3){grid-row:2!important}
  .lt .lt__en::after{grid-column:1/-1;justify-self:end;width:calc(var(--u) * 6);height:calc(var(--u) * 10);margin:0 calc(var(--u) * -.5) calc(var(--u) * -.5) 0;
    background:linear-gradient(var(--ink),var(--ink)) 50% 0 / 1px calc(var(--u) * 4) no-repeat,radial-gradient(circle at 50% calc(100% - var(--u) * 3),var(--acc) 0 calc(var(--u) * 3 - .5px),transparent calc(var(--u) * 3))}
}
/* 灯る：字が上がり切ってから（0.9 秒後）、円が灰から水色へ 1.1 秒。動きを減らす設定では最初から灯った形 */
@media (prefers-reduced-motion:no-preference){
  html.js:not([data-motion=reduce]) .lt .lt__en::after{filter:grayscale(1) brightness(1.35);opacity:.5;transition:filter 1.1s var(--out) .9s,opacity 1.1s var(--out) .9s}
  html.js:not([data-motion=reduce]) .lt .lt__en.in::after{filter:none;opacity:1}
}

/* ---------- 欄名の英字の型 B「裁ち落とし」（11/06 なおさん「Go with B」。A 索引・C 縦の軸との見比べは wire/en.html、値と経緯は v3/英字の組み_3案_2026-11-06.md）
   バウハウスとスイスのポスター。段の頭に、欄名の英字を細い 210px で一語（携帯 126px）。右は画面の端、下は字の並びの線の .1em 下で切る。
   色は地より一段濃い灰青 --w1 の面（読ませる字ではない。本物の欄名は小さく番号つきで残る）。締めの段は社名の英字「TAKANE ELECTRIC」。
   欄名の data-n・data-en は build_d.py が付ける。飾りの英字は content の "" で読み上げから外す ---------- */
:is(.sec,.go):has(.lbl[data-n]){position:relative}
.lbl[data-n] span:lang(en){font-variant-numeric:lining-nums}
:is(.sec,.go):has(.lbl[data-n]){isolation:isolate;overflow-x:clip}
.lbl[data-n]{flex-wrap:wrap;row-gap:0}
.lbl[data-n]::before{content:attr(data-en);content:attr(data-en) / "";order:-2;flex:0 0 100%;display:block;position:relative;z-index:-1;
  height:calc(var(--u) * 5 + .1em);margin:0 0 calc(var(--u) - .1em) -.07em;   /* 下は字の線の .1em 下で切る（y・p の足を少し残し、別の字に見せない） */
  font:300 calc(var(--u) * 7)/calc(var(--u) * 5) var(--en);letter-spacing:-.01em;white-space:nowrap;color:var(--w1);
  clip-path:inset(0 -300vw 0 -1px)}   /* 右は切らない（段の overflow で画面の端に切れる） */
.cr__l{margin-top:calc(var(--u) * 6)}   /* 表彰と許可の一覧は、大きな一語の下から始める（一覧の字に灰の面を重ねない） */
.lbl[data-n]::after{content:attr(data-n);content:attr(data-n) / "";order:-1;font:400 var(--f1)/var(--l2) var(--en);letter-spacing:.06em;color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
.cl__in>.lbl[data-n]::before{color:rgba(255,255,255,.14)}
.cl__in>.lbl[data-n]::after{color:#fff}
/* 締めの段の一語は、社名の英字「TAKANE ELECTRIC」（11/06 なおさん「TAKANE ELECTRIC という文字もたまにつかう」。ロゴの TAKANE とは別の、組版の英字）。
   大文字だけは小文字ほど詰めない（−.01em）。夜の街の上に白 14% の面で、右は画面の端で切れる */
.cl__in>.lbl[data-n]::before{content:"TAKANE ELECTRIC";content:"TAKANE ELECTRIC" / "";letter-spacing:-.01em}
.cl__in>.lbl{margin-bottom:0}
/* 「灯る文」の段は、もう大きな英字（Behind every switch. のポスター、d.css）があるので、欄名の一語は出さない */
.lt .lbl[data-n]::before{display:none}
.film__en{font-size:calc(var(--u) * 9);line-height:calc(var(--u) * 6.4);letter-spacing:-.01em;margin-left:-.07em}
.film__en{white-space:nowrap;hyphens:manual}   /* 一語なので折らない・ハイフンで分けない（携帯で「Hous-ing」に割れた。11/06 夜 なおさん「おかしいよ」） */
.film__en .w{padding-bottom:.24em;margin-bottom:-.24em}   /* g の足を切らない */
.mg__no{font-size:var(--f5);line-height:var(--l5);letter-spacing:0}
@media (max-width:767px){
  .lbl[data-n]::before{height:calc(var(--u) * 3 + .1em);margin-bottom:calc(var(--u) / 2 - .1em);font-size:calc(var(--u) * 4.2);line-height:calc(var(--u) * 3)}
  .film__en{font-size:min(calc(var(--u) * 4.2),26vw);line-height:calc(var(--u) * 3)}   /* 390 で 101px：一語（幅 約 300px）が窓の中に収まる。折らない（nowrap） */
  .mg__no{font-size:var(--f4);line-height:var(--l4)}
  .cr__l{margin-top:var(--u)}   /* 携帯は見出しの下に一覧が来るので、一語と重ならない */
}
/* 出現：一語が右から 4% 寄って 2.2 秒で落ち着く（0.04→1・1.1 秒）。きっかけは d.js の .in（Field Notes はきっかけが無いので動かさない）。動きを減らす設定では最初から出ている */
@media (prefers-reduced-motion:no-preference){
  html.js:not([data-motion=reduce]) .lbl[data-n]::before{opacity:.04;transform:translate3d(4%,0,0);transition:opacity 1.1s var(--out),transform 2.2s var(--out)}
  html.js:not([data-motion=reduce]) .lbl[data-n].in::before{opacity:1;transform:none}
  html.js:not([data-motion=reduce]) .film__en{opacity:.04;transform:translate3d(4%,0,0);transition:opacity 1.1s var(--out),transform 2.2s var(--out)}
  html.js:not([data-motion=reduce]) .film__en.in{opacity:1;transform:none}
}

/* 11/06 夜 なおさん「しかく（角版）で入れるのはやめて」：欄名の段は isolation:isolate で重なりの文脈を作るため、
   ミニチュアの白（.vg の multiply）が頁の地と混ざらず白い四角に見えていた。段そのものに地の色を敷き、段の中で multiply させる。
   :where で重みを 0 にし、色の付いた段（締めの紺など）は各自の背景が勝つ */
:where(:is(.sec,.go):has(.lbl[data-n])){background-color:var(--bg)}

/* 11/06 夜 なおさん「TAKANEのロゴだけど紺の方がいいかも」：帯のロゴを墨から紺（DESIGN.md の紺 #0C2747）へ。触れると水色は今のまま */
.hd__logo{color:#0C2747}

/* ---------- 地の帯（11/06 夜 なおさん「全部真っ白じゃなくて、本当にほんのちょっとしたグレーと白というように、帯によって変化をつけてもいいんじゃない？」）
   用件のまとまりごとに、ほとんど白（--band-w）と、ほんの少しの灰（--band-g）を交互に。境は線を引かず、色の差だけ（明るさの差 約 4%）。
   入口 白／仕事 灰／沿革・表彰 白／人 灰／事業部・業務・帯の映像 白／特集・読み物 灰／実績・お知らせ 白／採用 白（水色のボタンの字の濃さ 4.5:1 を守るため灰にしない）。紺の頭と締めは今のまま。
   帯の上の小さな灰の字（--tx2）は、どちらの帯でも 4.5:1 を超える #646E79 に（灰の帯 4.57、白の帯 4.96）。
   ミニチュアの白（.vg の multiply）は、後ろの帯の色にそのまま溶ける ---------- */
:root{--band-w:#F8FAFC;--band-g:#EDF1F4}
:is(.go,.yr,.cr,.dv,.cw,.film,.wk,section.nw,.rc){background-color:var(--band-w);--tx2:#646E79}   /* 新着情報の段は section.nw に限る（11/06 夜 カヲル：kaigyo.py が電話番号に付ける span.nw まで白い地になり、紺の締め・足元で番号が白い四角に消えていた） */
:is(.lt,.face,.mg,.jx){background-color:var(--band-g);--tx2:#646E79}
.vb{background-color:var(--band-w)}   /* 人と事業部の間のバンの帯は、事業部の白に合わせる（帯の境がバンの足元を通らないように。境はバンの帯の上の端） */

/* ミニチュアの枠の端をぼかす（11/06 夜 なおさん「これも角版じゃなくて」）。Safari は動画に mix-blend-mode が効かないことがあり、
   その時は動画の白が帯の上に四角く出る。枠の外側 7% を透明へぼかし、どのブラウザでも四角の縁が出ないようにする（Chrome では multiply と重なって見え方は変わらない）。
   接地の影は枠の 80% 前後なので、ぼかしに掛からない */
.vg__f{-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(transparent,#000 7%,#000 93%,transparent);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(transparent,#000 7%,#000 93%,transparent);mask-composite:intersect}

/* =====================================================================================================
   揃えの決まり（2026-11-06 夜 カヲル。決まりの全文は v3/揃えの決まり_2026-11-06.md、点検は node v3/tools/align_check.mjs）
   なおさん「何に揃ってるのかもわかんない」「文字組みもダメ」「写真がでかい・曲がってる」を受けて、頁の全段に同じ決まりを当てる。
   ① 字の左は L1（1 列目）と L7（7 列目）の 2 本　② 大きな英字は見かけの左（インク）を L1 に　③ 左右の塊は「字の上」でそろえる
   ④ 縦の間は --u の倍数（例外は図と説明 u/2・一覧の行 u/2）　⑤ 一覧の中は「項目名 12・灰＋中身 16」の 2 段
   この塊は頁の末尾に置き、前の値を上書きする（ほかの担当の行は消さない）。札の会長 .fc--more・Behind every switch.（.lt__en ほか）・帯のロゴの色は触らない
   ===================================================================================================== */
/* 字の上（行の箱の上から、漢字の字面の上まで）。端末の字（ヒラギノ：字の枠 .88/.12）と Web の UD 新ゴ L（字の枠 1.19/.36）で違う。
   漢字の字面の上は線（基線）から .81em。左右の塊の上は、この値の差だけずらしてそろえる */
:root{
  --it-tx:calc(var(--l2) / 2 - var(--f2) * .433);     /* 本文 16/30（ヒラギノ）：8.1px */
  --it-h2:calc(var(--l4) / 2 - var(--f4) * .446);     /* 見出し 48/60（ヒラギノ W3）：8.6px（携帯 30/45：9.1px）。11/06 夜 UD 新ゴ L を外して測り直した（山・表・新・道・官・会・電・社・採の中ほど） */
  --it-h1:calc(var(--l5) / 2 - var(--f5) * .462);     /* 大見出し 80/90（ヒラギノ W3）：8.0px（携帯 40/60：11.5px）。11/06 夜に測り直した（業・主・入） */
  --it-20:calc(var(--l3) / 2 - var(--f3) * .433);     /* 中 20/30：6.3px */
}

/* ---------- 段の頭：大きな英字の一語 → 2u → 欄名の行 → 1u → 中身 ----------
   一語の箱は「線（基線）から大文字の上まで」の 5u。g・p・y の足（.17〜.19em）は箱の下へそのまま出し、切らない（11/06 夜 なおさん「g 切れてる」）。
   足の分は箱の下の空き 2u（60px、足は 35px）で受ける。左は字ごとの左の余白（Neue Haas Display 300 を測った値）だけ引き、インクの左を L1 に */
.lbl[data-n]::before{height:calc(var(--u) * 5);margin:0 0 calc(var(--u) * 2) calc(var(--lsb, .062em) * -1);clip-path:none}
.lbl[data-en^="C"],.lbl[data-en^="G"],.lbl[data-en^="O"],.lbl[data-en^="Q"]{--lsb:.034em}
.lbl[data-en^="S"]{--lsb:.023em}.lbl[data-en^="J"]{--lsb:.022em}.lbl[data-en^="Z"]{--lsb:.024em}.lbl[data-en^="T"]{--lsb:.017em}
.lbl[data-en^="A"],.lbl[data-en^="V"],.lbl[data-en^="Y"]{--lsb:.006em}.lbl[data-en^="W"],.lbl[data-en^="X"]{--lsb:.011em}
.lbl[data-en^="U"]{--lsb:.056em}.lbl[data-en^="I"]{--lsb:.066em}
@media (max-width:767px){.lbl[data-n]::before{height:calc(var(--u) * 3);margin-bottom:var(--u)}}   /* 携帯：126px の足 21px を 1u で受ける */
/* 欄名の行はどの段も同じ（12px・番号・英字・和名）。読み物の段だけ和名が 20px だったのをそろえる。欄名から中身まで 1u */
.lbl--h{margin-bottom:var(--u);font-size:var(--f1);line-height:var(--l2);letter-spacing:.08em;color:var(--tx2)}
.lbl--h span:lang(en){font-size:var(--f1)}
.jx__tx{margin-top:0}
.nw__g>.lbl{margin-bottom:var(--u)}
/* 数は一つの系（欄名の番号と同じ 12px・字間 .06em・等幅のライニング数字）：事業部の番号・写真の年・頭の号数の数 */
.dv__no{font:400 var(--f1)/var(--l2) var(--en);letter-spacing:.06em;color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
.yr__y{letter-spacing:.06em}
.issue b{letter-spacing:.06em;font-variant-numeric:lining-nums tabular-nums}

/* ---------- ご用件の入口・読み物（同じ型の行）：題と説明の字の上をそろえ、矢印は題の行の真ん中 ---------- */
.go__a{align-items:start}
.go__d{margin-top:calc(var(--it-h2) - var(--it-tx))}
.go__l>li:nth-child(3) .go__a:not(.jx__l *) .go__d{margin-top:calc(var(--it-h2) - var(--it-tx) + var(--f4) * .1)}   /* 「工事のご相談」の「工」は上の横線が低い（ヒラギノ W3 で字面の上が .1em 下。UD 新ゴの時は .07）*/
.go__l>li:nth-child(1) .go__a:not(.jx__l *) .go__d{margin-top:calc(var(--it-h2) - var(--it-tx) + var(--f4) * .031)}   /* 「発注者の方へ」の「発」も上が低い（ヒラギノ W3 で .031em。11/06 夜） */
.go__a .ar{align-self:start;margin-top:calc((var(--l4) - 9px) / 2)}

/* ---------- 沿革（案 C）：左＝見出し（上）とリンク（下の端）、右＝本文と二枚の写真（3:2・3 列ずつ）、下に数 ---------- */
.yr__c{align-items:stretch}
.yr__l{grid-column:1/7;display:flex;flex-direction:column;justify-content:space-between}
.yr--c .yr__h{line-height:var(--l4);letter-spacing:.02em}
/* リンクの字の線（基線）を、写真の説明の最後の行の線にそろえる（16/30 と 12/20 の線の位置の差 3.5px） */
.yr__go{margin-bottom:calc((var(--l1) - var(--f1)) / 2 + var(--f1) * .12 - (var(--l2) - var(--f2)) / 2 - var(--f2) * .12)}
.yr__r{grid-column:7/13;display:grid;grid-template-columns:subgrid;align-content:start;padding-top:calc(var(--it-h2) - var(--it-tx) - var(--f2) * .07)}   /* 本文の頭が数字（1955）：数字の上は漢字より .07em 低い */
.yr__r>.tx{grid-column:1/6}
.yr__pics{grid-column:1/-1;display:grid;grid-template-columns:subgrid;margin-top:calc(var(--u) * 2)}
.yr__pics>.yr__f{grid-column:span 3;margin:0}
.yr--c .yr__f .ph{aspect-ratio:3/2;--rr:var(--r-s)}
.yr--c .ph__in{inset:-6% 0}
.yr--c .ph__in>picture{position:absolute;inset:0}
.yr--c .ph__in>picture>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.yr--c .yr__stats{margin-top:calc(var(--u) * 4)}
.yr--c .yr__stats li{grid-column:span 3}
/* 数の見かけの左を、上の線（4 つ割りの列の線）に：頭の数字ごとの左の余白を引く */
.yr__stats b[data-d="1"]{margin-left:-.033em}.yr__stats b[data-d="2"]{margin-left:-.032em}.yr__stats b[data-d="3"]{margin-left:-.028em}

/* ---------- 表彰と許可：欄名は段の頭の 1 行。左＝見出し・文（上）とリンク（下の端）、右＝「項目名（L7）＋中身（L9）」の表 ----------
   表の上に線は引かず、最初の項目の字の上を見出しの字の上に。項目の間と最後に線。左のリンクの線は、表の最後の行の線にそろえる */
.cr__g{align-items:stretch}
.cr__hd{grid-column:1/7;grid-row:2;display:flex;flex-direction:column;align-items:flex-start;padding-bottom:calc(var(--u) / 2 + 1px)}
.cr__hd .tx{margin-top:var(--u)}
.cr__hd .cr__go{margin-top:auto;padding-top:calc(var(--u) * 2)}
.cr__l{grid-column:7/13;grid-row:2;margin-top:calc(var(--it-h2) - var(--it-tx));border-top:0;display:grid;grid-template-columns:subgrid;align-content:start}
.cr__l>div{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:baseline;padding-block:calc(var(--u) / 2);border-bottom:1px solid var(--line)}
.cr__l>div:first-child{padding-top:0}
.cr__l dt{grid-column:1/3;font:400 var(--f1)/var(--l2) var(--ja);letter-spacing:.08em;color:var(--tx2)}
.cr__l dd{grid-column:3/-1;color:var(--ink);font-variant-numeric:lining-nums proportional-nums}
.cr__s,.cr__q{display:block}
.cr__s{color:var(--tx)}
.cr__q b{font-weight:400;margin-inline-start:1em}

/* ---------- 人：見出しの字の上に写真の上をそろえる（見出しは 6 字が左の 6 列に収まる大きさ --tfs、行送り 1.12） ---------- */
.tpa{--tfs:min(var(--f5), calc((100vw - 2 * var(--gut) - var(--u)) / 2 / 6.3));align-items:stretch}
@media (min-width:768px){.tpa__top .h1{font-size:var(--tfs);line-height:1.12}}
.tpa__f{align-self:start;margin-top:calc(var(--tfs) * .104)}   /* 見出しの頭は片仮名「タ」（字面の上が漢字より低い）。ヒラギノ W3 で測った値（11/06 夜。UD 新ゴの時は .217） */
.tpa__en{font-size:min(var(--f5), 5.6vw);line-height:1.04;margin:0 0 calc(4.8px - .165em) -.062em}   /* 最後の行の線（基線）を、写真の下のローマ字の行の線に */
.tpn__r{font-size:var(--f1)}
.wall__cap{margin-top:calc(var(--u) / 2)}

/* ---------- 業務内容：見出しと文の字の上をそろえる。建物の札と一覧は 1〜5 列、絵は 7〜12 列（字の上にそろえる）、説明は絵の真下 ---------- */
.cw__hd{align-items:start}
.cw__hd .tx{margin-top:calc(var(--it-h1) - var(--it-tx))}
.cw__side{grid-column:1/6}
.cw__tabs button{height:auto;line-height:var(--u);padding-bottom:calc(var(--u) / 2)}
.cw__fig{grid-column:7/13;margin-top:var(--it-tx)}
.cw__caps{margin-top:calc(var(--u) / 2)}
/* 下の三つの絵（高圧受変電・電灯・動力）は、上の絵の説明と 4u 離して別のまとまりに。説明は絵の真下 u/2 */
.vgrow{margin-top:calc(var(--u) * 4)}
.vg .cap{margin-top:calc(var(--u) / 2)}

/* ---------- 実績・新着・採用：左右の字の上（絵の上）をそろえる ---------- */
.wk__hd{align-items:start}
.wk__hd .tx{margin-top:calc(var(--it-h1) - var(--it-tx))}
.nw__hd{grid-row:2}
.nw__l{grid-row:2;border-top:0;margin-top:calc(var(--it-h2) - 10.7px)}   /* 最初の行は日付（Neue Haas 12/30 の数字の上 10.7px） */
.nw__l li:first-child a{padding-top:0}
.rc__g{align-items:start}
.rc__fig{grid-column:7/13;margin-top:calc(var(--it-h1) + var(--f5) * .051)}   /* 見出しの頭「入」は字面の上が低い（測った値） */

/* ---------- 集合住宅の帯の英字：飾りの大きさは一つ（210）。足は帯の中に全部、下の説明とは 2u ---------- */
.film__en{font-size:calc(var(--u) * 7);line-height:calc(var(--u) * 5);margin-left:-.062em}
.film__ja{margin-top:calc(var(--u) * 2)}
.mg__no{margin-left:-.062em}

/* ---------- 締め：社名の英字は本物の字で（大文字だけなので組ごとに詰める：T・A／L・E／C・T）。欄名の一語の代わり ---------- */
.cl__in>.lbl[data-n]::before{display:none}
.cl__big{grid-column:1/-1;height:calc(var(--u) * 5);margin:0 0 calc(var(--u) * -1) -.017em;font:300 calc(var(--u) * 7)/calc(var(--u) * 5) var(--en);letter-spacing:-.01em;white-space:nowrap;color:rgba(255,255,255,.14);font-kerning:normal}
.cl__big .k-ta{letter-spacing:-.06em}.cl__big .k-le{letter-spacing:-.05em}.cl__big .k-ct{letter-spacing:-.04em}
@media (prefers-reduced-motion:no-preference){
  html.js:not([data-motion=reduce]) .cl__big{opacity:.04;transform:translate3d(4%,0,0);transition:opacity 1.1s var(--out),transform 2.2s var(--out)}
  html.js:not([data-motion=reduce]) .cl__big.in{opacity:1;transform:none}
}

/* ---------- 足元：社名と所在地の字の上をそろえる・絵のことわりは頁で一度だけ。値は上の「足元の字組み」の塊（11/06 夜に一つにまとめた） ---------- */

/* Safari で人と事業部の間のバンの帯だけ、動画の白が薄い四角に残る（英字の担当が iOS の Safari で確かめた直し） */
.vb{isolation:isolate}
/* バンの接地の影の下が、次の段（事業部）の地に横一線で切られていた（次の段が後から重なって描かれる）。帯を上に。重なるのは事業部の上の余白（同じ白）だけ：PC 4u＜5u・携帯 2.5u＜3u */
.vb{z-index:1}

/* ---------- 携帯（1 本の線 L1）：段の中の順と、二枚の写真・表の組み ---------- */
@media (max-width:767px){
  .go__d{margin-top:0}
  .yr__c{display:flex;flex-direction:column}
  .yr__l,.yr__r{display:contents}
  .yr--c .yr__h{order:1}
  .yr__r>.tx{order:2;margin-top:var(--u)}
  .yr__pics{order:3;display:grid;grid-template-columns:1fr 1fr;column-gap:12px;margin-top:calc(var(--u) * 2)}
  .yr__pics>.yr__f{grid-column:auto}
  .yr__go{order:4;margin:calc(var(--u) * 2) 0 0}
  .yr--c .yr__stats{margin-top:calc(var(--u) * 3);row-gap:var(--u)}
  .yr--c .yr__stats>li{grid-column:span 6!important}
  .cr__hd{display:contents}
  .cr__hd>*{grid-column:1/-1}
  .cr__hd .h2{order:1}.cr__hd .tx{order:2}.cr__l{order:3}.cr__hd .cr__go{order:4;margin-top:calc(var(--u) * 2);padding-top:0}
  .cr__l{display:block;margin-top:calc(var(--u) * 2)}
  .cr__l>div{display:block}
  .cr__l>div:first-child{padding-top:calc(var(--u) / 2);border-top:1px solid var(--line)}
  .tpa__f{margin-top:0}
  .tpa__en{font-size:var(--f5);margin-bottom:0}   /* 携帯の大見出しと同じ 40px（字の大きさの段を増やさない） */
  .cw__hd .tx,.wk__hd .tx{margin-top:var(--u)}
  .cw__fig{margin-top:0}
  .vgrow{margin-top:calc(var(--u) * 3)}
  .vgrow>.vg{grid-template-columns:1fr 1fr;column-gap:12px}   /* 絵と説明は、携帯の 2 つ割りの線（写真と同じ間 12px）に */
  .nw__l{margin-top:0}
  .nw__l li:first-child a{padding-top:calc(var(--u) / 2)}
  .rc__fig{margin-top:0}
  .rc__g>.lbl{order:-2}   /* 欄名（と大きな一語）は絵より上に。絵は前からの order:-1 で文の上 */
  .film__en{font-size:min(calc(var(--u) * 4.2), 26vw);line-height:calc(var(--u) * 3)}
  .film__ja{margin-top:var(--u)}
  .cl__big{height:calc(var(--u) * 3);margin-bottom:0;font-size:calc(var(--u) * 4.2);line-height:calc(var(--u) * 3)}
}

/* ---------- プロローグ（Behind every switch.）の整え（11/06 夜 なおさん「今のままでいいや整えて」「ここの左側に、見出しとリード作って入れてよ。空間あきすぎだよ」） ----------
   ① every の y の右の腕と足が .w（overflow:hidden）で切れていた → 左右 .14em・下 .24em の余白を足し、同じだけ外へ戻す（組みは変わらない）。
      余白で隠し幅が増えた分、出る前の字が下にのぞかないよう、出る前の位置を 140% に
   ② 写真の左 6 列に見出し（48）とリード。見出しの字の上＝写真の上辺、リードの最後の行の字の下＝写真の下辺（説明は写真の真下 u/2）
   ③ 配線の線と円：every の右の端から離す（字に掛けない）。PC は 3 列目から 14u（1440 で今までと同じ所）、携帯は 2u 右へ */
.lt .lt__en .w:nth-of-type(2),.lt .lt__en .w:nth-of-type(3){padding:0 .14em .24em;margin:0 -.14em -.24em -.21em}
@media (prefers-reduced-motion:no-preference){
  html:not([data-motion=reduce]) .lt .lt__en .w:nth-of-type(n+2)>i{transform:translate3d(0,140%,0) rotate(6deg)}
  html:not([data-motion=reduce]) .lt .lt__en.in .w>i,html:not([data-motion=reduce]) .lt .lt__en .w.in>i{transform:none}
}
.lt__l{grid-column:1/7;align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;gap:calc(var(--u) * 2);
  padding-bottom:calc(var(--u) / 2 + var(--l1) - (var(--l3) - var(--f3)) / 2)}   /* 写真の下の説明（u/2＋1 行）の分だけ上げ、リードの字の下を写真の下辺に */
.lt__l>*{width:100%;min-width:0}   /* Safari：flex の中の字が 1 字幅に潰れないように */
.lt__h{margin-top:calc(var(--it-h2) * -1)}   /* 字の上を写真の上辺に */
.lt__f{grid-column:9/13;align-self:start;margin:0}
.lt .lt__cap{grid-column:auto;margin-top:calc(var(--u) / 2)}
/* 1280 未満の PC・タブレット：縦の Behind（行の幅 5.4u＝162px）が 1〜2 列の幅（1024 で 131px）より太くなり、every・switch. に重なっていた。
   ポスター全体（字・円・線）を 2 列の幅に合わせて縮める（--uu＝縮めた u。1280 以上は --u と同じ） */
@media (min-width:768px){
  .lt .lt__en{--uu:calc(min(calc(var(--u) * 5.4), calc((100vw - 2 * var(--gut) - 11 * var(--u)) / 6 + var(--u) - 10px)) / 5.4)}
  .lt .lt__en .w:nth-of-type(1){font-size:calc(var(--uu) * 7);line-height:calc(var(--uu) * 5.4)}
  .lt .lt__en .w:nth-of-type(2),.lt .lt__en .w:nth-of-type(3){font-size:calc(var(--uu) * 8);line-height:calc(var(--uu) * 6.4)}
  .lt .lt__en::after{grid-column:3/-1;justify-self:start;margin:calc(var(--uu) * -6) 0 calc(var(--uu) * -1) calc(var(--uu) * 14);width:calc(var(--uu) * 12);height:calc(var(--uu) * 18);
    background:linear-gradient(var(--ink),var(--ink)) 50% 0 / 1px calc(var(--uu) * 6) no-repeat,
               radial-gradient(circle at 50% calc(100% - var(--uu) * 6),var(--acc) 0 calc(var(--uu) * 6 - .5px),transparent calc(var(--uu) * 6))}
}
@media (max-width:767px){
  .lt__l{order:2;padding-bottom:0;gap:var(--u)}
  .lt__h{margin-top:0}
  .lt__f{order:3}
  .lt .lt__en::after{margin-right:calc(var(--u) * -2)}
  .lt .lt__en .w:nth-of-type(2),.lt .lt__en .w:nth-of-type(3){margin-left:calc(var(--u) * 3 - .14em)}   /* 携帯の 3u の字下げは、足した左の余白の分を引いて同じ所に */
}

/* 締めの段の社名：頭と同じ線の TAKANE＋Electric（11/06 夜 なおさん「平打ちのゴシックは、トップと同じ感じに。色だけ白とか（トップは水色だから違う色）」）。
   頭は白い線に水色の光、ここは白い線に白の光。組版の大きな英字「TAKANE ELECTRIC」（欄名の一語）は出さない */
.cl__in>.lbl[data-n]::before{display:none}
.cl__mark{height:auto;margin:0 0 calc(var(--u) * 2);font:inherit;letter-spacing:0;white-space:normal;color:#fff}
.cl__mark svg{display:block;width:100%;height:auto;overflow:visible}
.cl__mark svg path{fill:none;stroke:currentColor;stroke-width:1.8px;vector-effect:non-scaling-stroke}
.cl__mark svg{filter:drop-shadow(0 0 calc(2px + .25vw) rgba(255,255,255,.75)) drop-shadow(0 0 calc(8px + .8vw) rgba(235,245,255,.35))}
.cl__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 8px rgba(255,255,255,.6)}
@media (max-width:767px){.cl__mark{height:auto;margin-bottom:var(--u)}}

/* 採用の見出し「入社してから、／資格を取る。」は必ず 2 行（11/06 夜 なおさん「これ3行？ちょっとだけきになる」）。
   段の幅が 7 字に足りない幅（1024 前後）では、段の幅に合わせて字を小さくする（行送りは字の 1.125 倍のまま） */
.rc__txt{container-type:inline-size}
.rc__txt .h1{font-size:min(var(--f5),14.2cqi);line-height:min(var(--l5),calc(14.2cqi * 1.125))}

/* =====================================================================================================
   仕上げの詰め（2026-11-07 未明 カヲル。なおさん「だんだんデザインが雑誌っぽくなってよくなってきてるよ！　ブラッシュアップして完成させて」）
   新しい演出は足さず、決まり（--u・字の 6 段・欄名の型 B・字の上・数の系・欧文組版）から外れていた所だけを寄せる。
   ①〜⑬（決まりの文は v3/揃えの決まり_2026-11-06.md の 9）。この塊も頁の末尾に置き、前の値を上書きする
   ===================================================================================================== */
/* ① 英字：大文字と小文字のまじる語は字間 0（本文の .04em が px のまま受け継がれて、小文字が 0.6px 開いていた）。数は 12px・.06em の一つの系 */
.catch-en,.play span:lang(en){letter-spacing:0}
.go__w span:lang(en){font-family:var(--en)}   /* 読み物の欄名（Public Works ほか）がヒラギノの欧文で組まれていた。事業部の英名（.dv__e）と同じ書体に */
.path span:lang(en){letter-spacing:.06em;color:var(--ink)}   /* 採用の道のりの番号：事業部の 01〜03 と同じ（墨・.06em） */
.nw__d{flex:none;width:var(--nwd,5.1em);letter-spacing:.06em}   /* 日付の幅を一番長い日付（2026.09.01、5.02em）に決め、区分（企業情報・採用情報）の頭を 1 本の線にそろえる（比例の数字で 0〜4px ずれていた） */
.mg__en{line-height:var(--l2);margin-bottom:0;color:var(--ink)}   /* 特集の小見出しの英字：水色の字（地との差 1.99：1）は読めないので墨に。行は 1u で格子に乗せる（見た目の間はほぼ同じ） */

/* ② 欄名 → 中身は 1u（人の段だけ 2u だった） */
.tpa{margin-top:var(--u)}

/* ③ 大見出しの行送りは字の 1.125 倍（80/90）。人の段は 1.12（89.6px）で格子から外れていた */
@media (min-width:768px){.tpa__top .h1{line-height:calc(var(--tfs) * 1.125)}}

/* ④ 採用の見出しを、ほかの大見出しと同じ 80/90 に（1440 で 75.2/84.6 だった）。左の 5 列の中で縮めず、6 列（L1〜L7 の手前）まで使う。
   字の大きさは頁の格子（.rc__g の中身の幅）から出す：6 列＝50cqi − u/2、その 14.2%（7 字が収まる）。右の絵の上も同じ値で字の上に合わせる */
@media (min-width:768px){
  .rc__g{container-type:inline-size;--rcf:min(var(--f5), calc(7.1cqi - var(--u) * .071))}
  .rc__txt{container-type:normal}
  .rc__txt .h1{font-size:var(--rcf);line-height:calc(var(--rcf) * 1.125)}
  .rc__fig{margin-top:calc(var(--rcf) * .1515)}   /* 字の上（.1005em）＋「入」の字面の低さ（.051em） */
}

/* ⑤ 三つの事業部：品目の行を 3 枚で同じ高さに（総務部だけ文が 2 行で 1u 上にあった）。携帯も PC と同じく絵が先 */
@media (min-width:768px){
  .dv__d .dv__tags{margin-top:auto;padding-top:var(--u)}
  .dv__d .ar{margin-top:0}
}
@media (max-width:767px){.dv__fig{order:-1}}

/* ⑥ 人と事業部の間のバンの帯：帯の白（--band-w）が人の段の下の余白 4u に掛かり、灰の帯が説明の 1.3u 下で切れていた。
   重なる 4u（携帯 2.5u）は人の段と同じ灰にし、帯の境を段の境（説明の 5u 下）に戻す。バンの絵は境より下なので掛からない */
.vb{background:linear-gradient(var(--band-g) 0 calc(var(--u) * 4), var(--band-w) 0)}
@media (max-width:767px){.vb{background:linear-gradient(var(--band-g) 0 calc(var(--u) * 2.5), var(--band-w) 0)}}

/* ⑦ 灯る文：欄名（02 Prologue）の下 1u で文が始まるように（文が絵の下の端にそろい、欄名から 4.3u 離れて浮いていた）。
   絵は文の高さの真ん中のまま（絵の白の余白が欄名の行に重なるが、白は multiply で地に消える） */
@media (min-width:768px){
  .lt__t{align-self:start;margin-top:-.3em}
  .lt__vg{align-self:start;margin-block:calc(min(46px, 3.1vw) * (3.6 - .3) - 50%)}   /* 上下とも同じだけ食い込ませ、行の高さを文の高さに（文の下から Behind まで 3u のまま） */
}

/* ⑧ 締め：印（TAKANE・Electric）→ 2u → 欄名 → 1u → 見出し（段の頭の決まり。5.7u・3u と浮いていた）。行の間 3u（携帯 2u）を打ち消す */
.cl__mark{margin-bottom:calc(var(--u) * -1)}
.cl__in>.lbl{margin-bottom:calc(var(--u) * -2)}
@media (max-width:767px){.cl__mark{margin-bottom:calc(var(--u) * -1)}.cl__in>.lbl{margin-bottom:calc(var(--u) * -1)}}

/* ⑨ 抜き書き：段の幅に合わせて字を縮め（1024 で 4 行に割れていた）、「「例えば、／作業後の玄関で／靴の跡を残さない。」」の 3 か所でだけ折る */
.mg__pq{container-type:inline-size}
.mg__pq p{font-size:min(var(--f4), 9.4cqi)}

/* ⑩ 社員の頁への札：字の大きさを頁の段（12px）に（PC は 13px・11px だった）。People は大文字小文字まじりなので字間 0 */
@container (min-width:150px){.fc--more a{font-size:var(--f1);line-height:var(--l1)}.fc--more a span[lang=en]{font-size:var(--f1);letter-spacing:0}}

/* ⑪ 灯る文の折り目：台本が 1 字ずつ箱（.c）にするので、箱に :lang(ja) の auto-phrase が掛かり、Chrome だけ「電気が／目に見える。」と自分で折っていた。
   箱も keep-all にして、Chrome も Safari と同じく「|」（<wbr>）の所でだけ折る */
.lt__t .c{word-break:keep-all}

/* ⑫ 足した所作（1 段に 1 つ）：雑誌の柱。欄名の行の右の端（L13）に、誌名の小さな英字「TAKANE ELECTRIC」。
   大文字だけなので .14em 空け、最後の字の後ろの空きは外へ出してインクの右を L13 に。字は content の "" で読み上げない。携帯は欄名の行が狭いので出さない。
   要らなければ、この 4 行を消せば元どおり */
@media (min-width:768px){
  .lbl[data-n]{position:relative}
  .lbl[data-n]>span:lang(en)::after{content:"TAKANE ELECTRIC";content:"TAKANE ELECTRIC" / "";position:absolute;right:-.14em;bottom:0;font:400 var(--f1)/var(--l2) var(--en);letter-spacing:.14em;color:var(--tx2);white-space:nowrap;pointer-events:none}
  .cl__in>.lbl[data-n]>span:lang(en)::after{content:none}   /* 締めは真上に TAKANE・Electric の印があるので、柱は重ねない */
}

/* ⑬ 背の低い携帯（iPhone SE の Safari：見える高さ 548px 前後）：頭の見出し「スイッチの」が TAKANE の印に 46px 重なっていた（iphone_check で見つけた）。
   字の塊の間を u/2 にし、号の行（No. 01 — November 2026）を外して、印の下に 2u 以上あける。iPhone 16 以上（見える高さ 650px 以上）は今のまま */
@media (max-width:767px) and (max-height:620px){
  .town__bt{gap:calc(var(--u) / 2)}
  .town__bt .issue{display:none}
}

/* 11/07 英字の字間（なおさん「ここの英語の詰めが詰まりすぎかな？」From the field to the front desk.）：
   欧文組版の決まりに戻す。小文字のまじる英字は 72〜80px で 0、120px 以上の一語・数は −.01em まで（Neue Haas Grotesk Display は大きな字用に作られていて、もともと詰まっている）。
   前は −.02〜−.045em で、the field・front desk の字と語がくっついて見えた。大文字だけの TAKANE ELECTRIC は組ごとの詰め（.k-ta など）のまま。 */

/* ---------- 足元（11/07 カヲル。なおさん「もう少しきっちりスイス的、日本語組版も」「typography とか Bauhaus とかのポスターみたくおしゃれに」「ここ共通体裁だから全体に響くよ」）----------
   全頁で一つ（下層 41 頁も top-d.html の足元を写す）。12 列の格子をそのまま見せる：
   大＝ネオンの TAKANE（L1〜L13）→ 2u → 中＝社名 20/30（L1）と所在地 16/30（L7）。2 行目は英字の社名（大文字・12・字間 .16em）と TEL／FAX が同じ拍
   → 3u → 案内の 4 列（L1・L4・L7・L10）：頭は細線 1 本 → 1u → 番号 01〜04（12・.06em）と和名（12・.08em）→ 1u → 16/30 の項目
   → 3u → ことわり（L1）と ©（L7、英字の社名と同じ大文字・字間）。飾りの英字（Since 1955・列の英語の見出し）は外した。小さな英字は Display の 500（400 は 12px で細すぎる） */
.ft__g{margin-top:calc(var(--u) * 2)}
.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:500 var(--f1)/var(--l2) var(--en);letter-spacing:.16em;word-spacing:0;text-transform:uppercase;color:var(--flo)}
.ft__ad{grid-column:7/13;margin-top:calc(var(--it-20) - var(--it-tx) - var(--f2) * .051)}
.ft__ad p{font:400 var(--f2)/var(--l2) var(--ja);letter-spacing:.04em}
.ft__tel{display:flex;flex-wrap:wrap;column-gap:calc(var(--u) * 1.5)}
.ft__k{margin-right:.75em;font:500 var(--f1)/var(--l2) var(--en);letter-spacing:.16em;color:var(--flo)}
.ft__tel a,.ft__tel .ft__n{font-family:var(--en);letter-spacing:.04em;font-variant-numeric:lining-nums tabular-nums}
.ft__ix{margin-top:calc(var(--u) * 3)}
.ft__c{grid-column:span 3;padding-top:var(--u);border-top:1px solid var(--fln)}
.ft__h{display:flex;align-items:baseline;column-gap:calc(var(--u) / 2);font:400 var(--f1)/var(--l2) var(--ja);letter-spacing:.08em;color:var(--flo)}
.ft__no{font:500 var(--f1)/var(--l2) var(--en);letter-spacing:.06em;color:var(--fhi);font-variant-numeric:lining-nums tabular-nums}
.ft__c ul{margin-top:var(--u)}
.ft__c li a{font:400 var(--f2)/var(--l2) var(--ja);letter-spacing:.04em;color:var(--ftx)}
.ft__b{margin-top:calc(var(--u) * 3);padding-top:var(--u);border-top:1px solid var(--fln);font:400 var(--f1)/var(--l2) var(--ja);letter-spacing:.06em;color:var(--flo)}
.ft__note{grid-column:1/7}
.ft__cp{grid-column:7/13;font:500 var(--f1)/var(--l2) var(--en);letter-spacing:.16em;word-spacing:0;text-transform:uppercase;color:var(--flo)}
.ft__pl{display:none}
@media (max-width:767px){
  .ft__co,.ft__ad,.ft__note,.ft__cp{grid-column:1/-1}
  .ft__ad{margin-top:var(--u)}
  .ft__tel{flex-direction:column}
  .ft__ix{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--u);row-gap:calc(var(--u) * 2);margin-top:calc(var(--u) * 2)}
  .g12.ft__ix>.ft__c{grid-column:auto!important}
  .ft__b{margin-top:calc(var(--u) * 2)}
  .ft__cp{margin-top:calc(var(--u) / 2)}
}
/* 足元の差し色（11/07 なおさん「紺、水色、黄色、白を活かしてね。フッターとかは一部に黄色使ってもいいんじゃない？」「黄色は小さくても目立つから。かっこよくなるなら」）：
   黄は字に使わず、格子の印だけ。案内の 4 列の細線の頭に 1u（30px）の黄の刻み＝列の線（L1・L4・L7・L10）の始まりの印。水色はネオンの光が受け持つ */
.ft{--fy:rgba(255,212,61,.22)}
.ft__c{position:relative}
.ft__c::before{content:"";position:absolute;left:0;top:-1px;width:var(--u);height:1px;background:var(--fy)}

/* 11/07 ミニチュアの絵の出典（足元のことわりの下、L1〜6 列。12px・控えの色。DEKIDESIGN だけ外へのリンク：触れると水色へ 0.45 秒） */
.ft__cr{grid-column:1/7;margin-top:calc(var(--u) / 2);font:400 var(--f1)/var(--l1) var(--ja);letter-spacing:.04em;color:var(--flo);word-break:keep-all;overflow-wrap:anywhere}
.ft__cr span:lang(en){font-family:var(--en);letter-spacing:.02em}
.ft__cr a{color:var(--ftx);transition:color .45s var(--soft)}
@media (hover:hover){.ft__cr a:hover{color:var(--acc)}}
@media (max-width:767px){.ft__cr{grid-column:1/-1}}
/* 11/07 なおさん（NERV 経由）「注意書きは文全体も © DEKIDESIGN も小さくしてよい。目立たせず、読めればよい」→ 10/16・白の 50%（紺の地で 5.3:1、AA の範囲） */
.ft__cr{font-size:10px;line-height:16px;letter-spacing:.04em;color:rgba(255,255,255,.5)}
.ft__cr a{color:rgba(255,255,255,.62)}

/* 11/07 なおさん「ここのレイアウトもっとよくして。一番下の影いらないでしょ」（三つの事業部の段）
   ・白地のミニチュアの接地の影（.vg--s の楕円）は全部外す。絵にもとからある足元の薄い影で足りる（影が絵から離れて浮いて見えた）
   ・バンの絵は段の頭の右（L7〜L13）に。大きな英字「Divisions」の右の端に掛け、絵の下の端を見出し「三つの事業部」の行の下にそろえる。
     白い地は multiply で消え、灰の字が透ける。携帯は見出しの下に 86% で */
.vg--s .vg__f::before,.vg--s .vg__f::after{display:none!important}
.dv__hd{position:relative}
.dv__vg{position:absolute;grid-column:1/-1;grid-row:1/-1;justify-self:end;align-self:end;right:calc((100% - var(--u) * 11) / 12 * -.35);bottom:calc(var(--u) * -1);width:calc((100% - var(--u) * 11) / 12 * 6 + var(--u) * 5);margin:0;z-index:0;pointer-events:none}
.dv__vg .vg__f .lv{transform:scale(1.06);transform-origin:50% 60%}
.dv__hd>.lbl,.dv__hd>.h1{position:relative;z-index:1}
@media (max-width:1023px){.dv__vg{width:calc((100% - var(--u) * 11) / 12 * 7 + var(--u) * 6);right:0}}
@media (max-width:767px){.dv__vg{position:relative;right:auto;bottom:auto;grid-column:1/-1;width:86%;margin:calc(var(--u) / 2) auto 0}}
/* バンの足もと（絵の枠の高さの 82%）を、大きな英字「Divisions」の線（字の下の線＝一語の箱の下 5u）にそろえる。英字と同じ線の上に模型が立つ */
.dv__vg{grid-row:1;align-self:start;top:calc(var(--u) * 5);bottom:auto;right:0;transform:translateY(-82%)}
@media (max-width:767px){.dv__vg{top:auto;transform:none}}
.dv__vg{clip-path:inset(15% 0 0 0)}   /* 枠の上の白い余白（絵の無い所）は前の段に掛からないように切る */
@media (max-width:767px){.dv__vg{grid-row:3;align-self:start;clip-path:none}}
@media (max-width:767px){.dv__hd>.dv__vg{display:block;margin:var(--u) auto 0}}   /* 前の .dv__vg（携帯で隠す）は別の物。段の頭のバンは携帯でも見出しの下に出す */
/* 11/07 カヲル：1024 前後（768〜1199）では「Divisions」が幅の 6 割を占め、バンが「ons」の上に重なって字が読めなかった。
   この幅では英字の線ではなく、見出し「三つの事業部」の行の右（L9〜L13、4 列）に止め、タイヤを見出しの字の下の線にそろえる（社用車で三つの事業部の現場へ出る、の意味を見出しに寄せる）。
   足もとは枠の 78%（中の動画 1.06 倍・中心 60%）なので、枠の下を 22% 下げる */
@media (min-width:768px) and (max-width:1199px){
  .dv__vg{grid-row:1/3;align-self:end;top:auto;bottom:0;right:0;width:calc((100% - var(--u) * 11) / 12 * 4 + var(--u) * 3);transform:translateY(22%);clip-path:none}
}

/* 11/07 夕 足元の外への案内（会社パンフレット・会社紹介動画・Instagram。なおさん「戻す」）：© の下（L7〜L13）に 12px の一行。↗ は別のタブ。触れると水色へ 0.45 秒（指の端末では変えない） */
.ft__x{grid-column:7/13;display:flex;flex-wrap:wrap;gap:0 calc(var(--u) * 1.5);margin-top:calc(var(--u) / 2);font:400 var(--f1)/var(--l2) var(--ja);letter-spacing:.06em;color:var(--ftx)}
.ft__x a{color:var(--ftx);transition:color .45s var(--soft)}
.ft__x .ext{margin-left:.35em;font-size:11px;color:var(--flo)}
.ft__x .nw{white-space:nowrap}
@media (hover:hover){.ft__x a:hover{color:var(--acc)}}
@media (max-width:767px){.ft__x{grid-column:1/-1;flex-direction:column;margin-top:var(--u)}}
@media (prefers-reduced-motion:reduce){.ft__x a{transition:color .15s!important}}

@media (min-width:768px){.ft__x,.ft__cr{grid-row:2}}   /* 2 行目：左にミニチュアの出典、右に外への案内 */
/* 11/07 夕 一番下の行（なおさんの案からミサトの決め）：左（L1）に 2 行＝ことわり（12）と出典（10）。右は格子の右の端にそろえ、1 行目に外への案内、2 行目に ©（出典と同じ線＝baseline）。
   © が 7 列目の頭から始まる形はやめた。携帯は案内 → ことわり → 出典 → © の順に、すべて左寄せ */
.ft__b>.ft__x{grid-column:7/13;grid-row:1;justify-content:flex-end;margin-top:0}
.ft__b>.ft__note{grid-column:1/7;grid-row:1}
.ft__b>.ft__cr{grid-column:1/7;grid-row:2;margin-top:0;align-self:baseline}
.ft__b>.ft__cp{grid-column:7/13;grid-row:2;justify-self:end;text-align:right;align-self:baseline}
@media (max-width:767px){
  .ft__b>.ft__x,.ft__b>.ft__note,.ft__b>.ft__cr,.ft__b>.ft__cp{grid-column:1/-1;grid-row:auto;justify-self:start;text-align:left}
  .ft__b>.ft__x{justify-content:flex-start;margin-bottom:var(--u)}
  .ft__b>.ft__cr{margin-top:calc(var(--u) / 4)}
  .ft__b>.ft__cp{margin-top:calc(var(--u) / 2)}
}

/* 11/07 夜 足元の 1 行（なおさん「フッターの会社名と住所電話がきにいらない。ロゴの下に一行でかく？」）
   線の TAKANE のすぐ下（1u）に、社名・所在地・TEL・FAX を 16/30 の 1 行。同じ色（--ftx）・同じ線（baseline）。左端は TAKANE の字の左端＝L1。
   区切り（.ft__sp）は 1.5u の幅の真ん中に細い縦の線（1px・字の高さの .8・--fln）。中身は全角の空きなので、写し・読み上げでは空きになる。
   TEL・FAX の札は 12 の大文字・字間は本文と同じ .04em・控えの色。数字は英字の書体のライニング数字。携帯は社名／所在地／TEL・FAX の 3 行 */
.ft__ad1{display:block;margin-top:var(--u);font:400 var(--f2)/var(--l2) var(--ja);font-style:normal;letter-spacing:.04em;color:var(--ftx)}
.ft__s,.ft__t{white-space:nowrap}
.ft__d{font-family:var(--en);letter-spacing:.04em;font-variant-numeric:lining-nums tabular-nums}
.ft__ad1 .ft__k{margin-right:.5em;font:500 var(--f1)/1 var(--en);letter-spacing:.04em;text-transform:uppercase;color:var(--flo)}
.ft__ad1 a{color:inherit;transition:color .45s var(--soft)}
@media (hover:hover){.ft__ad1 a:hover{color:var(--acc)}}
.ft__sp{display:inline-block;position:relative;width:calc(var(--u) * 1.5);color:transparent;user-select:none}
.ft__sp::before{content:"";position:absolute;left:50%;top:50%;width:1px;height:.8em;margin-top:-.42em;background:var(--fln)}
.ft__sp--t{width:1em}
.ft__sp--t::before{display:none}
.ft__ad1+.ft__ix{margin-top:calc(var(--u) * 3)}
@media (max-width:767px){
  .ft__ad1{margin-top:calc(var(--u) / 2)}
  .ft__ad1>.ft__s{display:block}
  .ft__ad1>.ft__sp{display:none}
  .ft__ad1+.ft__ix{margin-top:calc(var(--u) * 2)}
}
/* 11/07 夜 外への案内は案内の 4 列の下の 1 行に（なおさん「崩れてる」。右の端の形は 1024 で 2 行に割れ、© が「ご案内」の列の線から 4px ずれた）。
   1024 以上：4 つ割りの格子（＝L1・L4・L7・L10、上の案内の列と同じ線）に 1 つずつ。768〜1023：横に並べて折る。携帯：縦に。
   一番下の行は、ことわりと出典が左、© だけ右（出典と同じ線） */
.ft__ix+.ft__x{display:flex;flex-wrap:wrap;gap:calc(var(--u) / 2) calc(var(--u) * 1.5);grid-column:auto;margin-top:calc(var(--u) * 2);justify-content:flex-start}
@media (min-width:1024px){.ft__ix+.ft__x{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--u);row-gap:0}.ft__ix+.ft__x>a{justify-self:start}}
@media (max-width:767px){.ft__ix+.ft__x{flex-direction:column;gap:calc(var(--u) / 4);margin-top:calc(var(--u) * 2)}}
.ft__ix+.ft__x>a{white-space:nowrap}   /* 1024 で「↗」だけが次の行に落ちた */
.ft__x~.ft__b{margin-top:calc(var(--u) * 2)}
.ft__x~.ft__b>.ft__note{grid-column:1/8;grid-row:1}
.ft__x~.ft__b>.ft__cr{grid-column:1/8;grid-row:2}
.ft__x~.ft__b>.ft__cp{grid-column:8/13;grid-row:2;justify-self:end;text-align:right;align-self:baseline}
@media (max-width:767px){.ft__x~.ft__b>.ft__note,.ft__x~.ft__b>.ft__cr,.ft__x~.ft__b>.ft__cp{grid-column:1/-1;grid-row:auto;justify-self:start;text-align:left}}
/* ---------- 足元 B「格子の表」（11/07 夜 なおさんが A・B・C から B。全頁で一つ＝下層 41 頁も top-d.html の足元を写す）----------
   12 列の細い罫（白の 6%・列の間の真ん中・11 本）を足元の地に見せる。表は上下の罫と、L7・L10 の手前（列の間の真ん中）の縦の罫、右の 2×2 の升の間の横の罫。
   左の升（L1〜L7、2 段通し）に札「TEL お仕事のご相談」・電話番号（80/90 の細字、tel:、1024〜1279 は 64）・下の端にお問い合わせフォームへ（右の升の最後の行と同じ線）。
   右の升に案内の 4 列（L7・L10 の 2×2）。黄は罫の交わる所の小さな十字（11px・1px の線）だけ。その下に線の TAKANE と 1 行の会社情報、外への案内、一番下の行。
   1023 以下は表を縦に：電話の升 → 案内の 2×2（横の罫は 2 列を通して 1 本）。十字と地の 12 列は出さない */
.ftB{padding-top:calc(var(--u) * 2)}
.ftB__in{position:relative}
.ftB__cols{position:absolute;top:0;bottom:0;left:var(--gut);right:var(--gut);pointer-events:none;z-index:0}
.ftB__cols i{position:relative}
.ftB__cols i+i::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--u) / -2);width:1px;background:rgba(255,255,255,.03)}
.ftB__t{position:relative;z-index:1;border-top:1px solid var(--fln);border-bottom:1px solid var(--fln)}
.ftB__tel{position:relative;grid-column:1/7;grid-row:1/3;display:flex;flex-direction:column;align-items:flex-start;padding-block:var(--u) calc(var(--u) * 1.5)}
.ftB__tel::after{content:"";position:absolute;top:0;bottom:0;right:calc(var(--u) / -2);width:1px;background:var(--fln)}
.ftB__k{display:flex;align-items:baseline;column-gap:calc(var(--u) / 2);font:400 var(--f1)/var(--l2) var(--ja);letter-spacing:.08em;color:var(--flo)}
.ftB__no{font-family:var(--en);font-weight:500;letter-spacing:.04em;color:var(--fhi)}
.ftB__num{display:inline-block;margin-top:var(--u);font:300 var(--f5)/var(--l5) var(--en);letter-spacing:0;color:var(--fhi);font-variant-numeric:lining-nums tabular-nums;white-space:nowrap;transition:color .45s var(--soft)}
.ftB__tel>.tl{margin-top:auto;color:var(--fhi)}
@media (hover:hover){.ftB__num:hover,.ftB__tel>.tl:hover{color:var(--acc)}}
.ftB__ix{display:contents}
.ftB__ix .ft__c{padding:var(--u) 0 calc(var(--u) * 1.5);border-top:0}
.ftB__ix .ft__c::before{display:none}
.ftB__ix .ft__c:nth-child(1){grid-column:7/10;grid-row:1}
.ftB__ix .ft__c:nth-child(2){grid-column:10/13;grid-row:1}
.ftB__ix .ft__c:nth-child(3){grid-column:7/10;grid-row:2}
.ftB__ix .ft__c:nth-child(4){grid-column:10/13;grid-row:2}
.ftB__ix .ft__c:nth-child(3)::after{content:"";position:absolute;top:0;left:calc(var(--u) / -2);width:calc(200% + var(--u) * 1.5);height:1px;background:var(--fln)}
.ftB__ix .ft__c:nth-child(2n)::before{display:block;content:"";position:absolute;top:0;bottom:0;left:calc(var(--u) / -2);width:1px;height:auto;background:var(--fln)}
.ftB__x{position:relative;z-index:2;width:11px;height:11px;justify-self:start;margin-left:calc(var(--u) / -2 - 5px)}
.ftB__x::before{content:"";position:absolute;left:0;top:5px;width:11px;height:1px;background:var(--fy)}
.ftB__x::after{content:"";position:absolute;left:5px;top:0;width:1px;height:11px;background:var(--fy)}
.ftB__x.x1{grid-column:7;grid-row:1;align-self:start;margin-top:-6px}
.ftB__x.x2{grid-column:10;grid-row:1;align-self:start;margin-top:-6px}
.ftB__x.x3{grid-column:7;grid-row:2;align-self:start;margin-top:-5px}
.ftB__x.x4{grid-column:10;grid-row:2;align-self:start;margin-top:-5px}
.ftB__x.x5{grid-column:7;grid-row:2;align-self:end;margin-bottom:-6px}
.ftB__x.x6{grid-column:10;grid-row:2;align-self:end;margin-bottom:-6px}
.ftB__lg{position:relative;z-index:1;margin-top:calc(var(--u) * 2)}
.ftB__lg+.ft__x{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--u);margin-top:calc(var(--u) * 2)}
.ftB__lg+.ft__x>a{justify-self:start;white-space:nowrap}
.ftB .ft__b{position:relative;z-index:1}
@media (max-width:1279px){.ftB__num{font-size:64px}}
@media (max-width:1023px){
  .ftB__cols,.ftB__x{display:none}
  .g12.ftB__t{grid-template-columns:1fr 1fr}
  .g12.ftB__t>.ftB__tel{grid-column:1/-1!important;grid-row:auto!important;padding-block:var(--u)}
  .ftB__tel::after{display:none}
  .ftB__tel>.tl{margin-top:var(--u)}
  .ftB__num{font-size:var(--f5)}
  .ftB__ix .ft__c:nth-child(n){grid-column:auto;grid-row:auto;padding:var(--u) 0}
  .ftB__ix .ft__c:nth-child(3)::after{display:none}
  .ftB__ix .ft__c:nth-child(odd)::after{display:block;content:"";position:absolute;top:0;left:0;width:calc(200% + var(--u));height:1px;background:var(--fln)}   /* 横の罫は 2 列を通して 1 本 */
  .ftB__lg{margin-top:calc(var(--u) * 1.5)}
  .ftB__lg+.ft__x{display:flex;flex-wrap:wrap;gap:calc(var(--u) / 2) calc(var(--u) * 1.5)}
}
@media (max-width:767px){
  .ftB{padding-top:var(--u)}
  .ftB__lg{margin-top:var(--u)}
  .ftB__lg+.ft__x{flex-direction:column;gap:calc(var(--u) / 4);margin-top:calc(var(--u) * 1.5)}
}
@media (max-width:1023px){.ft__ad1>.ft__s{display:block}.ft__ad1>.ft__sp{display:none}}   /* 768〜1023 は 1 行に入らず、区切りの線が行の終わりに残った → 携帯と同じ 3 行 */
/* 罫を走る光（d.js「足元の格子の罫を…」）。罫の上に重ねるだけ。押せない・読み上げない */
.ftB__lt{position:absolute;left:0;top:0;z-index:1;pointer-events:none;overflow:visible;filter:drop-shadow(0 0 3px rgba(150,220,255,.55))}
@media (prefers-reduced-motion:reduce){.ftB__num{transition:color .15s}.ftB__lt{display:none}}

/* ===== 言語の切り替え JP | EN（2026-11-07 リツコ。なおさんの決め：今の言語＝水色・押せない、もう一方＝黒（暗い地＝頭の写真の上・メニュー・足元では白）、マウスオーバーで水色へ。区切りは細く薄く） ===== */
.lsw{display:inline-flex;align-items:center;white-space:nowrap;font:500 var(--f1)/1 var(--en);letter-spacing:.1em}
.lsw__c{color:var(--acc);font-weight:500;cursor:default}
.lsw__a{color:var(--ink);transition:color .45s var(--soft)}
.lsw__s{font-style:normal;font-weight:200;opacity:.3;padding-inline:.55em}
.hd.is-top:not(.is-s) .lsw__a,.mn-open .hd .lsw__a,.mn .lsw__a,.ft .lsw__a{color:#fff}
.ft__lang{margin:0 0 var(--u);grid-column:1/-1}
.ft .lsw{font-size:var(--f1)}
@media (hover:hover){.lsw__a:hover{color:var(--acc)!important}}
.mn__side .lsw{display:flex;margin-bottom:var(--u)}
[data-untr]{outline:1px dashed rgba(255,0,0,.45);outline-offset:2px}
html[lang=en] .mt__era b{display:none}
/* 英語の頁：語の途中で折らない（日本語用の keep-all／anywhere を英語では普通の折り方に）。携帯の上の帯は「JP | EN」と採用の札だけにして、幅を 390px に収める */
html[lang=en] body :is(p,li,dd,dt,h1,h2,h3,h4,figcaption,label,td,th,span,b,small,em,strong,a,blockquote){word-break:normal;overflow-wrap:break-word;line-break:auto;hyphens:manual}
html[lang=en] .ft__s,html[lang=en] .nb,html[lang=en] .co-f__v,html[lang=en] .co-f__v .nw,html[lang=en] .sign .nw,html[lang=en] .prose .nw,html[lang=en] dd .nw{white-space:normal}
@media (max-width:767px){
  html[lang=en] .hd__r .pill--ja:not(.pill--cl):not(.pill--fill){display:none}
  html[lang=en] .hd__r .pill{letter-spacing:.02em;padding-inline:9px}
  .lsw{letter-spacing:.06em}.lsw__s{padding-inline:.4em}
}
@media (prefers-reduced-motion:reduce){.lsw__a{transition:color .15s}}
html[data-motion=reduce] .lsw__a{transition:color .15s}
/* ===== 動きを減らす設定の写し（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__doll{transform:rotate(-8deg)!important;opacity:0;transition:opacity .15s!important}
html[data-motion=reduce] .kc.on .kc__doll{opacity:1}
html[data-motion=reduce] .kc__bub{transform:none!important;transition:opacity .15s!important}
html[data-motion=reduce] .kc.on.talk .kc__doll .kd .kd__jaw{animation:none!important}
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}
html[data-motion=reduce] .tm__dot{animation:none}
html[data-motion=reduce] .town__el{animation:none!important;opacity:1}
html[data-motion=reduce] .kd__head,html[data-motion=reduce] .kd__arm,html[data-motion=reduce] .kc__doll .kd .kd__lids,html[data-motion=reduce] .kc.on .kc__doll .kd .kd__jaw{animation:none}
html[data-motion=reduce] .kd__head,html[data-motion=reduce] .kd__arm,html[data-motion=reduce] .kc__doll .kd .kd__lids,html[data-motion=reduce] .kc.on .kc__doll .kd .kd__jaw{animation:none}
html[data-motion=reduce] [data-m=v]{opacity:1!important;transform:none!important;transition:none!important}
html[data-motion=reduce] .vg--bk{animation:none!important}
html[data-motion=reduce] .ft__x a{transition:color .15s!important}
html[data-motion=reduce] .ftB__num{transition:color .15s}
/* ===== 写しここまで ===== */

/* 11/07 マヤ（Safari の折り方で全頁を測った）：Safari は :lang(ja){word-break:auto-phrase} が効かず、本文の段落で
   最後の行に「る。」「す。」だけが落ちた。和文の段落は最後の数行の長さを整えて折る（Chrome・Safari とも効く。点数 0 の :where なので、balance などの決めた所が勝つ） */
:where(:lang(ja)) :where(p,li,dd,figcaption,td,th){text-wrap-style:pretty}   /* 11/07 マヤ：折り返しの有無（text-wrap-mode）は変えない。省略形だと white-space:nowrap を wrap に戻してしまう */
/* 頭の札（発注者の方へ・工事のご相談）が 1024 の幅で「発注／者」「ご相／談」と 2 行に割れた。札の中では折らない */
.pill{white-space:nowrap}
/* 採用の見出し「入社してから、」：字の大きさは 6 列で決めているのに、字の箱（.rc__txt）は 5 列のままで、1024 で「入社してか／ら、」と割れた。
   見出しだけ 1 列（＋間）右へはみ出させ、6 列の幅にする（右の絵は 7 列目からなので重ならない。1440 では字が収まっていたので見た目は同じ） */
@media (min-width:768px){.rc__txt .h1{margin-right:calc((100% + var(--u)) / -5)}}
/* 結びの一文「スイッチの／向こう側の仕事。」：1024 では 80px の 8 字が段（6 列＝452px）に入らず「向こう側の／仕事。」と 3 行になった。
   段の幅から字の大きさを出す（8 字＋字間が入る 12.9%。1440 では 80px のまま） */
@media (min-width:768px){.catch{container-type:inline-size}.catch>:is(.c-a,.c-b,.c-c,.c-d){font-size:min(var(--f5),12.9cqi);line-height:min(var(--l5),calc(12.9cqi * 1.125))}}
/* 発注者の方への段の見出し：journal.css の auto-phrase（Chrome）が、kaigyo.py で決めた折り目より先に効き「主な発注者と／実績」と 2 字だけ落ちた。決めた折り目（<wbr>）だけで折る */
.pu__t2.kw{word-break:keep-all}

/* 11/07 夜 なおさん「縦の間隔が広くないですか」（英語のトップの灯る文）：和文の組み（明朝・行送り 1.8・字間 .05em・palt）が英文に掛かっていた。
   欧文組版の決まり（研究/ウェブ_欧文組版_要点.md）：小文字の字間は触らない・行送りは字の 1.3 倍前後。字は英語の頁の地の書体（Neue Haas）にそろえる */
html[lang=en] .lt__t{font-family:var(--en);font-weight:300;font-feature-settings:normal;letter-spacing:0;line-height:1.3;text-wrap:balance}
@media (min-width:768px){html[lang=en] .lt__t{line-height:calc(var(--u) * 2)}}
b.nw{white-space:nowrap}   /* 数の入った短い要の語（創業70周年・70年間）を箱ごと折らない（kaigyo.py。漢字と数字の間は keep-all でも折れる） */

/* 11/07 夜 なおさん「欧文組版が入ってない？」：英語の頁に和文の組み（ヒラギノ・字間 .04〜.08em・行送り 2 倍前後）がそのまま掛かっていた。
   研究/ウェブ_欧文組版_要点.md・キット layout.css の英文の決まり：字は欧文の書体、小文字の字間は触らない（0）、本文の行送りは 1.5 前後、
   本文の数字はオールドスタイル（表・価格・電話は等幅のまま）、頭揃え。和文の字の名前（--ja ほか）を英字の書体に向け、下層（inner.css の --jp-h）にも効かせる */
html[lang=en]{--ent:"Helvetica Neue",Helvetica,Arial,sans-serif;--ja:var(--ent);--ja-l:var(--ent);--min:var(--ent);--jp-h:var(--ent);--jp:var(--ent)}   /* 本文は本文用の欧文（Neue Haas の Display は見出し用で、小さい字では詰まる） */
html[lang=en] body{letter-spacing:0;font-feature-settings:normal}
html[lang=en] body :is(p,li,dd,dt,h1,h2,h3,h4,h5,figcaption,blockquote,td,th,label,a,button,small,b,strong,em,span):not(.ftB__no):not([class*="en"]){letter-spacing:0!important;font-feature-settings:normal}
html[lang=en] body :is(p,li,dd,figcaption,blockquote,td,label):not(.lt__t):not(.mg__pq):not(.cl__h):not([class*="__h"]):not([class*="num"]):not(.ftB__k):not([class*="__en"]){line-height:1.55!important}
html[lang=en] body :is(p,li,dd,figcaption,blockquote):not([class*="num"]){font-variant-numeric:oldstyle-nums proportional-nums}
html[lang=en] :is(.tel,.num,.date,td,.ftB__num,[class*="num"]){font-variant-numeric:lining-nums tabular-nums}
/* 英語の頁の上の帯：札の英語が長く、1024〜1919 で右の札の並びが真ん中のロゴに触れていた（11/07 夜 ミサト）。間を詰め、1600 未満は「Project Enquiries」を隠す（メニューと締めの帯から行ける） */
html[lang=en] .hd__r{gap:14px}
@media (max-width:1599px){html[lang=en] .hd__r .pill--ja:not(.pill--cl):not(.pill--fill){display:none}}
@media (max-width:1279px){html[lang=en] .hd__r .pill--cl{display:none}}
/* 英語の大きな見出しの行送り：和文の 2 行の見出しの値（1.5 前後）が掛かり「From the site／to the office.」の間が空きすぎた。欧文の見出しは 1.05〜1.15 */
html[lang=en] body :is(h1,h2):not(.lt__t){line-height:1.1!important}
html[lang=en] body h3{line-height:1.25!important}
/* 11/07 マヤ（英語の頁を WebKit・Chrome で測った）：上の「字間 0」が、大文字だけで組む小さな札（text-transform:uppercase）の字間まで 0 にしていた。
   大文字だけの語は字間を開けるのが欧文組版の決まり（研究/ウェブ_欧文組版_要点.md）。日本語の頁と同じ値に戻す */
html[lang=en] body:not(#_) :is(.ar__nx>span,.ar__ml,.hs__en,.ar__en,.mg__en,.ar__no>span[lang]:not(:only-child),.ev__era span,.issue span,.mt__era span){letter-spacing:.24em!important}
html[lang=en] body:not(#_) .ar__nx>span{overflow-wrap:normal}   /* 携帯の 7em の欄で CHRONICLE が「CHRONICL／E」と割れた（日本語の頁と同じく少しはみ出させる） */
html[lang=en] body:not(#_) :is(.town__meta li,.town__meta li b){letter-spacing:.22em!important}
html[lang=en] body:not(#_) :is(.src__l,.hs__70u){letter-spacing:.2em!important}
html[lang=en] body:not(#_) :is(.pill--menu span,.ft__cp,.tpn__r){letter-spacing:.16em!important}
html[lang=en] body:not(#_) .src__l span{letter-spacing:.12em!important}
html[lang=en] body:not(#_) :is(.cl__el,.town__el){letter-spacing:.62em!important}
html[lang=en] body:not(#_) .hd__r .pill,html[lang=en] body:not(#_) .hd__r .pill span{letter-spacing:.08em!important}
html[lang=en] body:not(#_) .ft__k{letter-spacing:.06em!important}
html[lang=en] body:not(#_) :is(.lsw,.lsw *){letter-spacing:.1em!important}
html[lang=en] body:not(#_) :is(.ft__lang,.ft__lang *,.hist__m,.hist__m *){letter-spacing:.06em!important}
/* 小文字のまじる語の字間は 0（社員の名前 T. Murakami・英字の小見出し） */
html[lang=en] body:not(#_) :is(.is-in2 .staff__n,.film__en,.entry__k){letter-spacing:0!important}
/* 段落・表の升・説明は最後の行に 1 語だけ残さない（Safari・Chrome とも効く）。大きな見出しは行の長さをそろえる */
html[lang=en] body:not(#_) :is(p,li,dd,td,th,figcaption,blockquote):not(.lt__t){text-wrap-style:pretty}
html[lang=en] body:not(#_) :is(h1,h2,h3,.catch,.tpa__en):not(.lt__t){text-wrap-style:balance}
/* 大きな英字の一文（From the site to the office.）と抜き書きの行送り：見出しと同じ 1.1、抜き書きは 1.25 */
html[lang=en] body:not(#_) .tpa__en{line-height:1.1!important}
html[lang=en] body:not(#_) .mg__pq{line-height:1.25!important}

/* 2026-11-07 なおさん「口はパクパクしてるとうれしい」：話す間の顎。腹話術の人形らしく、ぱっと開いてぱっと閉じる（ならさない）。開く量は不揃いに、5 回で 1.9 秒。
   顎は口の中の暗い色の上を縦にすべるだけ（開き 12.4px＝絵の高さの 1.278%。それより開くと顎の下が襟にかかる） */
@keyframes kdTalk{0%{transform:none}7%{transform:translateY(1.278%)}17%{transform:none}25%{transform:translateY(.9%)}33%{transform:none}43%{transform:translateY(1.278%)}55%{transform:none}63%{transform:translateY(.7%)}70%{transform:none}80%{transform:translateY(1.15%)}91%{transform:none}100%{transform:none}}
/* 社員の札の会長（.fc--more）：話す間だけ顎が動き（.fcm.talk）、札が画面に入ると吹き出し（.fcb）が出る（d.js）。
   吹き出しを札の外に出せるよう、切り抜きを札の面（a）へ移す。札の広い時（PC 1440 など、札の幅 260px 以上）は札の中の左上、細い時は札の上に重ねて出す */
.fc--more{overflow:visible;z-index:2}
.fc--more a{overflow:hidden;border-radius:inherit}
.fc .fcm img.fcm__jaw{will-change:transform}
.fcm.talk .fcm__jaw{animation:kdTalk 1.9s steps(1,end) infinite}
.fcb{position:absolute;right:4%;bottom:calc(100% - 6px);z-index:3;margin:0;padding:.75em 1.3em .8em;font:300 12px/1.55 var(--ja-l);font-feature-settings:"palt" 1;letter-spacing:.04em;color:var(--ink);white-space:nowrap;pointer-events:none;opacity:0;transform:translate3d(0,6px,0) scale(.97);transform-origin:88% 110%;transition:opacity .8s var(--soft),transform .8s var(--out)}
.fcb[lang=en],:lang(en) .fcb{font:400 12px/1.45 var(--en);letter-spacing:.01em}
.fcb__sh{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.fcb__sh path{fill:rgba(255,255,255,.94);stroke:rgba(21,29,39,.86);stroke-width:1px;vector-effect:non-scaling-stroke}
.fcb__t{position:relative;display:block}
.fcb__t>span{display:block}
.fc--more.say .fcb{opacity:1;transform:none;transition-duration:.5s,.7s}
@container (min-width:260px){.fcb{right:auto;left:calc(100cqw - 36cqw - 128px);bottom:auto;top:12px;font-size:13px}:lang(en) .fcb{font-size:13px}}
@container (max-width:149px){.fcb{right:-2%;font-size:11px;padding:.7em 1.2em .75em}:lang(en) .fcb{font-size:11px}}
@media (prefers-reduced-motion:reduce){.fcm.talk .fcm__jaw{animation:none}.fcb{transform:none;transition:opacity .15s}}
:root[data-motion=reduce] .fcm.talk .fcm__jaw{animation:none}
:root[data-motion=reduce] .fcb{transform:none;transition:opacity .15s}
/* 11/07 ミサト（なおさん「バグってるのは出したくない」）：携帯の札（幅 150px 未満）。
   ・吹き出しを上の段の似顔絵に重ねない：札の上に字の上の空き（56px）を足して札を高くし、吹き出しはその中（札の左上）に収める。
   ・字を会長に重ねない：右に会長の幅（札の 34%）＋4px の空きを取り、字はその手前で折る（英語は "See our / staff and / photos" の 3 行）。日本語も同じ空き */
@container (max-width:149px){
  .fc--more a{padding:56px calc(34cqw + 4px) 8px 8px;font-size:10px;letter-spacing:0}
  .fc--more a span[lang=en]{font-size:10px;letter-spacing:.06em}
  .fcm__t>span{display:block}
  .fcm{width:34cqw;translate:0 0;rotate:-6deg}
  .fcb{left:4px;right:auto;top:6px;bottom:auto;font-size:10px;padding:.6em .95em .65em}
  :lang(en) .fcb{font-size:10px}
}