/* 生成物: muse-about-A50.html から build_theme_pages.py で分解。直接編集しない。
このCSSは自己完結(トークン/.hd/.ft込み)。muse-base.css と同時に読まないこと。 */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
--bg:#EEF2FA;
--ink:#0B1526;
--sub:#3A4763;
--muted:#55648A;
--bl:#1847CC;
--bl2:#2E63E8;
--bl3:#59B6FF;
--navy:#0D1B33;
--line:rgba(11,21,38,.09);
--slit:3px;
--fd:'Sora',sans-serif;
--fj:'Noto Sans JP',sans-serif;
--fjs:'Noto Serif JP',serif;
--fi:'Instrument Serif',serif; /* Vision補助コピー専用。他所で使わない */
--fm:'Space Mono',monospace;
--smooth:cubic-bezier(.16,1,.3,1);
--header:64px;
}
:root{
--navy-deep:#070C18;
--on-navy-sub:rgba(255,255,255,.72);
--sec-y:clamp(110px,15vh,200px);
--sec-x:clamp(20px,5vw,72px);
--content-max:1300px;
--bleed:calc(var(--sec-x) + max(0px, (100vw - 2*var(--sec-x) - var(--content-max))/2));
}
html{scroll-behavior:smooth}
body{font-family:var(--fj);background:#fff;color:var(--ink);-webkit-font-smoothing:antialiased}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.lb{font-family:var(--fm);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
/* ══ Header ══ */
.hd{
position:fixed;inset:0 0 auto;z-index:100;height:var(--header);
display:flex;align-items:center;justify-content:space-between;
padding:0 clamp(16px,3vw,36px);
background:rgba(238,242,250,0);
-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px);
border-bottom:1px solid rgba(11,21,38,0);
transition:background .45s var(--smooth),backdrop-filter .45s var(--smooth),
border-color .45s var(--smooth),box-shadow .45s var(--smooth);
}
.hd.--solid{
background:rgba(238,242,250,.72);
-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);
border-bottom-color:rgba(11,21,38,.07);
box-shadow:0 6px 26px -20px rgba(11,21,38,.4);
}
.hd__logo{
text-decoration:none;display:flex;align-items:center;gap:clamp(9px,1vw,14px);
}
.hd__mark{height:clamp(22px,2.2vw,30px);aspect-ratio:1;display:block;flex-shrink:0;
background:var(--mk-t) center/contain no-repeat}
.hd.--solid .hd__mark{background-image:var(--mk-s)}
.hd__name{
font-family:var(--fj);font-weight:700;
font-size:clamp(14px,1.15vw,16px);letter-spacing:.04em;color:var(--ink);
white-space:nowrap;
}
.hd__logo em{
font-style:normal;font-size:11px;letter-spacing:.16em;color:var(--muted);
padding-left:clamp(9px,1vw,14px);border-left:1px solid rgba(11,21,38,.14);
}
@media(max-width:760px){.hd__logo em{display:none}}
@media(max-width:380px){.hd__name{font-size:13px}}
.hd__right{display:flex;align-items:center;gap:clamp(14px,2vw,28px)}
.hd__nav{display:flex;gap:clamp(14px,2vw,26px)}
.hd__nav a{font-size:12.5px;letter-spacing:.05em;color:var(--sub);text-decoration:none;padding:10px 0}
.hd__nav a:hover{color:var(--ink)}
.hd__cta{
font-size:12.5px;font-weight:500;letter-spacing:.05em;color:#fff;text-decoration:none;
padding:10px 18px;border-radius:99px;
background:linear-gradient(135deg,var(--bl2),var(--bl));
box-shadow:0 4px 16px rgba(24,71,204,.28);
}
@media(max-width:640px){.hd__nav{display:none}}
/* ══ Mobile menu ══ 白のメニュー面。navy転換はJoinの特権なので使わない。
ボタンはJS宣言(data-ld)配下でのみ存在 */
.hd__burger{display:none}
.mnav{display:none}
@media(max-width:900px){
html[data-mn] .hd__burger{
display:flex;flex-direction:column;justify-content:center;gap:6px;
width:40px;height:40px;padding:0 6px;margin-left:2px;
background:none;border:0;cursor:pointer;
}
.hd__burger i{display:block;height:2px;background:var(--ink);
transition:transform .34s var(--smooth),opacity .2s}
.hd__burger i:nth-child(1){width:22px}
.hd__burger i:nth-child(2){width:15px;margin-left:7px;transition-delay:.03s}
html.menu-open .hd__burger i:nth-child(1){transform:translateY(4px) rotate(45deg);width:22px}
html.menu-open .hd__burger i:nth-child(2){transform:translateY(-4px) rotate(-45deg);width:22px;margin-left:0}
.mnav{
position:fixed;inset:0;z-index:90;display:block;
background:#fff;
padding:calc(var(--header) + 24px) clamp(24px,7vw,40px) 40px;
opacity:0;pointer-events:none;visibility:hidden;
transition:opacity .38s var(--smooth),visibility 0s .38s;
}
html.menu-open .mnav{opacity:1;pointer-events:auto;visibility:visible;transition:opacity .38s var(--smooth)}
html.menu-open{overflow:hidden}
.mnav ul{list-style:none;margin:8vh 0 0;padding:0;display:flex;flex-direction:column}
.mnav li{border-bottom:1px solid var(--line)}
.mnav a{
display:flex;align-items:baseline;gap:16px;
padding:22px 2px;text-decoration:none;
opacity:0;transform:translateY(14px);
transition:opacity .45s var(--smooth),transform .45s var(--smooth);
}
html.menu-open .mnav a{opacity:1;transform:none}
html.menu-open .mnav li:nth-child(1) a{transition-delay:.10s}
html.menu-open .mnav li:nth-child(2) a{transition-delay:.17s}
html.menu-open .mnav li:nth-child(3) a{transition-delay:.24s}
html.menu-open .mnav li:nth-child(4) a{transition-delay:.31s}
.mnav i{font-family:var(--fm);font-style:normal;font-size:11px;color:var(--bl)}
.mnav b{font-family:var(--fd);font-weight:600;font-size:clamp(26px,7.4vw,34px);
letter-spacing:-.02em;color:var(--ink)}
.mnav small{font-size:11.5px;letter-spacing:.08em;color:var(--muted)}
.mnav__ft{margin-top:9vh;font-family:var(--fm);font-size:10px;letter-spacing:.22em;color:var(--muted)}
@media(prefers-reduced-motion:reduce){
.mnav,.mnav a,.hd__burger i{transition:none}
}
}
.cta{
display:inline-flex;align-items:center;gap:12px;
margin-top:clamp(26px,4vh,44px);min-height:52px;padding:0 clamp(22px,2.4vw,34px);
background:var(--bl);color:#fff;text-decoration:none;
font-family:var(--fj);font-weight:600;font-size:clamp(14px,1.2vw,16px);letter-spacing:.04em;
transition:background .2s ease;
}
.cta em{font-style:normal;transition:transform .2s ease}
.cta:hover{background:var(--bl2)}
.cta:hover em{transform:translateX(4px)}
.cta:focus-visible{outline:2px solid #fff;outline-offset:3px}
.join .ph{height:100%;min-height:clamp(420px,100svh,1100px);background:linear-gradient(150deg,#16233F 0%,#0E1A31 55%,#1B2C4E 100%)}
/* ── 04 Contact: 熱の後の静けさ ── */
.contact{padding:clamp(76px,11vh,130px) var(--sec-x)}
.contact__g{
max-width:var(--content-max);margin:0 auto;
display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(20px,4vw,60px);flex-wrap:wrap;
}
.contact__t{font-family:var(--fj);font-weight:700;font-size:clamp(20px,2.2vw,30px);letter-spacing:.02em;color:var(--ink);margin-top:12px}
.contact__p{margin-top:10px;font-size:clamp(13px,1.1vw,15px);line-height:1.95;color:var(--sub)}
.tcta{
display:inline-flex;align-items:center;gap:10px;min-height:44px;
font-family:var(--fj);font-weight:600;font-size:clamp(14px,1.2vw,16px);
color:var(--bl);text-decoration:none;border-bottom:1px solid var(--bl);
}
.tcta em{font-style:normal;transition:transform .2s ease}
.tcta:hover em{transform:translateX(4px)}
/* ── Footer: 終点 ── */
.ft{
position:relative;z-index:6;color:#fff;
background:linear-gradient(180deg,var(--navy) 0%,var(--navy-deep) 100%);
padding:clamp(70px,10vh,120px) var(--sec-x) clamp(28px,4vh,42px);
}
.ft__g{max-width:var(--content-max);margin:0 auto}
.ft__mark{font-family:var(--fd);font-weight:800;
font-size:clamp(58px,10vw,160px);letter-spacing:-.055em;line-height:.9;}
.ft__mark .--p{color:var(--bl3);text-shadow:0 0 18px rgba(89,182,255,.45)}
.ft__cols{
margin-top:clamp(40px,6vh,72px);
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,48px);
}
.ft__h{font-family:var(--fm);font-size:10px;letter-spacing:.28em;color:rgba(255,255,255,.5);display:block;margin-bottom:14px}
.ft__cols ul{list-style:none}
.ft__cols li+li{margin-top:11px}
.ft__cols a,.ft__cols span{font-size:13px;line-height:1.8;color:var(--on-navy-sub);text-decoration:none}
.ft__cols a:hover{color:#fff}
.ft__cols a:focus-visible{outline:2px solid #fff;outline-offset:3px}
.ft__btm{
margin-top:clamp(44px,6vh,76px);padding-top:20px;
border-top:1px solid rgba(255,255,255,.14);
display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
font-family:var(--fm);font-size:10.5px;letter-spacing:.1em;color:rgba(255,255,255,.5);
}
/* ── リビール(共通) ── */
/* 行単位マスクリビール: 行をoverflowで囲み下から押し上げる。
文字単位アニメは指針書で禁止のため行単位に留める。 */
.mr{display:block;overflow:hidden}
.mr>i{display:block;font-style:normal}
html[data-rv] .mr>i{transform:translateY(110%)}
html[data-rv] .mr.is-in>i{transform:none;transition:transform .62s cubic-bezier(.16,1,.3,1)}
/* 段差スタガー: 同時発火の要素に0.06-0.2sの位相差(Visionの0/0.14と同語) */
html[data-rv] .chap__en .mr+.mr.is-in>i{transition-delay:.12s}
html[data-rv] .chap__jp.is-in>i{transition-delay:.2s}
html[data-rv] .biz li:nth-child(2).is-in{transition-delay:.06s}
html[data-rv] .biz li:nth-child(3).is-in{transition-delay:.12s}
html[data-rv] .rv{opacity:0;transform:translateY(16px)}
html[data-rv] .rv.is-in{opacity:1;transform:none;transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1)}
a:focus-visible{outline:2px solid var(--bl);outline-offset:3px}
/* ═══════════════════════════════════════════════════════════
About — 修辞から記録へ
面の推移: 舞台(WebGL) → 白紙 → 白紙 → navy(記録) → 白紙(帰着)
字送りと密度は逆相関。記録段で面を転換し、事実の硬さを色で示す。
pin-scrubはTOPの扉のみの特権なので使わない。ここは通常スクロール。
═══════════════════════════════════════════════════════════ */
/* 開幕中のヘッダーは面ごとに色が違う:
左(navy面) = ロゴを白抜き / 右(白面) = ナビ・CTAは通常色のまま。
900px以下は白面が下の帯に移るので、ヘッダー全体が navy 上 = 全て白抜き。 */
.hd:not(.--solid) .hd__name{color:#fff}
.hd:not(.--solid) .hd__sub{color:rgba(255,255,255,.62)}
.hd:not(.--solid) .hd__logo{filter:brightness(0) invert(1)}
@media(max-width:900px){
.hd:not(.--solid) .hd__nav a{color:rgba(255,255,255,.8)}
.hd:not(.--solid) .hd__nav a:hover{color:#fff}
.hd:not(.--solid) .hd__nav a[aria-current]{color:#fff!important}
.hd:not(.--solid) .hd__burger i{background:#fff}
}
/* ══════════════════════════════════════════════════════════════
下層ヒーローの共通文法 — 全下層ページで同一の規格
写真に依存しない。navy面 + Blue Current(WebGL) + タイポグラフィのロックアップ。
ロックアップはC49のzAと同じ三段構造で、比も同じ:
eyebrow Sora 600 / clamp(12px,1.1vw,17px) / 字間.18em
lead Sora 500 / clamp(26px,5.0vw,84px) / lh1 / -.032em
core Sora 800 / clamp(56px,8.2vw,122px) / -.055em / 青ピリオド+グロウ
lead:core = 84:122 = 0.69。近接した塊が一つのロックアップとして立つ比率。
ページごとに変わるのは3つの文字列だけ。navy上なので色を反転(青→bl3、墨→白)。
══════════════════════════════════════════════════════════════ */
.op{position:relative;min-height:100svh;overflow:clip;isolation:isolate;
--panel:clamp(320px,40vw,620px);
background:var(--navy);color:#fff;display:flex;align-items:center;
padding:calc(var(--header) + clamp(40px,7vh,90px)) calc(var(--panel) + clamp(28px,3vw,56px)) clamp(48px,8vh,100px) var(--sec-x)}
.op::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
background-image:
linear-gradient(to right,rgba(143,192,255,.055) 1px,transparent 1px),
linear-gradient(to bottom,rgba(143,192,255,.055) 1px,transparent 1px);
background-size:72px 72px;
mask-image:radial-gradient(115% 92% at 16% 46%,#000 0%,transparent 78%)}
.op::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
background:radial-gradient(52vw 40vw at 40% 14%,rgba(89,182,255,.17),transparent 64%)}
/* ── 開幕の第二段: ブランドの面 ──────────────────────────
問いの文(第一段)とブランドマーク(第二段)を1px罫で切り分ける。
マークは面いっぱいの正寸で、右端で切る。中央に浮かべた透かしではなく、
「切り取られた面」として置くことで装飾ではなく構造になる。
影は使わない。奥行きは面の値の差と1px罫だけで作る。 */
/* 第二段は白面。ヘッダー帯はnavyのまま残す(白抜きのナビが白面上で消えるため)。
ロゴはサイト内で唯一、原色のまま置ける。透かしではなくブランドの宣言になる。 */
.op__brand{position:absolute;z-index:1;pointer-events:none;
top:0;bottom:0;right:0;width:var(--panel);
background:var(--bg);
border-left:1px solid rgba(11,21,38,.10)}
/* 目地: 暗面側に1pxの光。墨1px+光1pxの二本で「加工された合わせ目」になる */
.op__brand::before{content:'';position:absolute;left:-2px;top:0;bottom:0;width:1px;
background:rgba(143,192,255,.22)}
/* マークは全形。切ると4象限(M/U/S/E)が割れて角丸矩形の羅列に見える(実測) */
/* 図版は最前面の面。鳥はこの裏を通る(白面 → 鳥 → 図 の三層) */
.op__mark{position:absolute;z-index:4;pointer-events:none;
top:0;bottom:0;right:0;width:var(--panel);
background-image:var(--logoglyph);background-repeat:no-repeat;
background-size:contain;background-position:center center}
/* 横切る一羽は WebGL 側(群れと同じ模型)。CSSの略画は持たない。
鳥はブランドの面より前を渡る(canvasを面の上へ) */
#gl{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none}
/* テキストは鳥の前。背後に面をひとつ敷いて、線画が字に交差しても読めるようにする
(濃色オーバーレイ+白文字ではなく、面の側でnavyを深めるだけ。規範に触らない) */
.op__in{position:relative;z-index:3;max-width:var(--content-max);margin:0 auto;width:100%}
.op__in::before{content:'';position:absolute;z-index:-1;pointer-events:none;
left:-60vw;right:14%;top:-60vh;bottom:-60vh;
background:radial-gradient(46vw 60vh at 68% 50%,rgba(13,27,51,.9) 0%,rgba(13,27,51,.62) 46%,transparent 82%)}
/* eyebrow: ダッシュ付き。背骨(左端一直線)の起点 */
.op__eye{display:block;margin-bottom:clamp(16px,2.4vh,26px);
font-family:var(--fd);font-weight:600;
font-size:clamp(12px,1.1vw,17px);letter-spacing:.18em;color:var(--bl3)}
.op__eye::before{content:'— ';opacity:.75}
.op__h{margin:0}
/* lead: 2行。coreへ向かう助走 */
.op__lead2{display:block;font-family:var(--fd);font-weight:500;
font-size:clamp(23px,5vw,84px);line-height:1;letter-spacing:-.032em;color:var(--bl3)}
/* core: 1語。ページの主役。青ピリオドとグロウはサイト共通の署名 */
.op__core{display:block;margin-top:clamp(4px,.8vh,12px);
font-family:var(--fd);font-weight:800;
font-size:clamp(48px,8.2vw,122px);line-height:1;letter-spacing:-.055em;color:#fff}
.op__core .--p{color:var(--bl3);text-shadow:0 0 22px rgba(89,182,255,.55);display:inline-block}
/* 底バー: 短く伸びて途中で消える。始点マーカーとして機能する(原典の知見) */
.op__base{display:block;width:clamp(120px,16vw,260px);height:4px;
margin-top:clamp(22px,3.4vh,44px);
background:linear-gradient(90deg,var(--bl3),rgba(89,182,255,.06))}
.op__jp{margin-top:clamp(22px,3.2vh,36px);
font-family:var(--fj);font-weight:700;
font-size:clamp(16px,1.7vw,26px);line-height:1.62;letter-spacing:.01em;color:#fff}
.op__jp .--p{color:var(--bl3)}
.op__sub{margin-top:clamp(18px,2.6vh,26px);
font-family:var(--fj);font-size:clamp(13.5px,1.1vw,15.5px);line-height:2.05;
color:rgba(255,255,255,.72);max-width:32em}
/* ロックアップの入場: 行単位カスケード → ピリオド着地 → 底バー描画。
C49のzA入場と同じ順序。JS不発では最初から表示される(html[data-rv]配下) */
/* .op__jp は .mr(行マスク)でリビールするので、親のopacity制御に含めない
(二重に掛けると .mr の is-in が >i にしか効かず親が0のまま残る) */
html[data-rv] .op__eye,
html[data-rv] .op__sub{opacity:0;transform:translateY(16px);
transition:opacity .7s var(--smooth),transform .7s var(--smooth)}
html[data-rv] .op__base{transform:scaleX(0);transform-origin:left;
transition:transform .6s var(--smooth)}
.op__eye.is-in{opacity:1;transform:none;transition-delay:.05s}
.op__base.is-in{transform:scaleX(1);transition-delay:.62s}
.op__sub.is-in{opacity:1;transform:none;transition-delay:.84s}
html[data-rv] .op__h .mr:nth-child(1).is-in>i{transition-delay:.14s}
html[data-rv] .op__h .mr:nth-child(2).is-in>i{transition-delay:.24s}
html[data-rv] .op__h .mr:nth-child(3).is-in>i{transition-delay:.38s}
html[data-rv] .op__jp.is-in>i{transition-delay:.72s}
@media(prefers-reduced-motion:no-preference){
.op__h .mr:nth-child(3).is-in .--p{animation:opp .55s var(--smooth) .74s}
}
@keyframes opp{45%{transform:scale(1.16)}}
/* ── 手紙: 一人称。字は下るが行あたりの負荷は上がる ── */
.lt{position:relative;z-index:6;background:#fff;overflow:clip;
padding:clamp(96px,15vh,200px) var(--sec-x) clamp(80px,12vh,150px)}
/* navy → 白の転換。斜断はページに2箇所だけ(ここと記録の入口) */
.lt::before{content:'';position:absolute;left:-4%;right:-4%;
top:calc(-1 * clamp(34px,4.6vw,84px));height:clamp(68px,9.2vw,168px);
background:var(--navy);transform:skewY(-2.5deg);z-index:0}
/* 褪せた階調の肖像。navyの実像(ヒンジ)に対する「声だけの気配」。
反転(ネガ)は顔として不気味に転ぶため、通常階調を持ち上げた褪せたポジ。
平均輝度207(実測)。multiplyで白面に沈み、本文の可読性は侵さない。 */
.lt__ghost{position:absolute;z-index:0;pointer-events:none;
right:calc(-1 * clamp(20px,4vw,90px));top:clamp(40px,7vh,110px);
width:clamp(240px,34vw,560px);aspect-ratio:2/3;
background-image:var(--ghost);background-size:cover;background-position:50% 14%;
opacity:.62;mix-blend-mode:multiply;
mask-image:linear-gradient(212deg,#000 0%,rgba(0,0,0,.62) 40%,transparent 84%)}
.lt__in{position:relative;z-index:1;max-width:min(100%,940px);margin:0 auto}
/* 引用の構造: 青の縦罫 + 字下げ。地の文ではなく「代表の言葉」として独立する */
.lt__q{position:relative;padding-left:clamp(20px,3.4vw,52px)}
.lt__q::before{content:'';position:absolute;left:0;top:2px;width:3px;
bottom:calc(-1 * clamp(80px,12vh,150px));
background:linear-gradient(180deg,
var(--bl) 0%,var(--bl) 46%,rgba(24,71,204,.30) 72%,transparent 100%);
transform-origin:top}
html[data-rv] .lt__q::before{transform:scaleY(0);transition:transform .8s var(--smooth)}
html[data-rv] .lt__q.is-in::before{transform:scaleY(1)}
.lt__b{font-family:var(--fj);font-weight:600;color:var(--ink);
letter-spacing:.005em;margin:0 0 clamp(34px,5vh,64px)}
.lt__b:last-of-type{margin-bottom:0}
.lt__b--1{font-size:clamp(23px,3.1vw,42px);line-height:1.6}
.lt__b--2{font-size:clamp(20px,2.5vw,34px);line-height:1.7}
.lt__b--3{font-size:clamp(17px,1.85vw,25px);line-height:1.92;font-weight:500;color:var(--sub);max-width:32em}
.lt__b b{color:var(--ink);font-weight:700}
.lt__b .--p{color:var(--bl)}
/* ══ ヒンジ: 語りが止まり、面が転換し、顔が現れる ══
同一の瞬間に3つが起きる。肖像は平均輝度68/暗部48%の低キー写真なので、
白面では異物として浮く。navyの側に置くことで写真の暗部と面が連続する。
(写真に濃色を被せてはいない。面の側を写真の明度に合わせている) */
.hg{position:relative;z-index:6;background:var(--navy);color:#fff;overflow:clip;
padding:clamp(70px,11vh,150px) var(--sec-x) clamp(70px,11vh,140px)}
/* 転換の継ぎ目: 白い面を-2.5degで断ち切る */
.hg::before{content:'';position:absolute;left:-4%;right:-4%;
top:calc(-1 * clamp(34px,4.6vw,84px));height:clamp(68px,9.2vw,168px);
background:#fff;transform:skewY(-2.5deg);z-index:0}
.hg::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
background:radial-gradient(64vw 44vw at 78% 12%,rgba(89,182,255,.15),transparent 60%)}
.hg__in{position:relative;z-index:1;max-width:var(--content-max);margin:0 auto;
display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(24px,3vw,44px);align-items:center}
.hg .lb{color:rgba(255,255,255,.62)}
.hg__tx{grid-column:1/8;grid-row:1}
.hg__lb{display:block;margin-bottom:clamp(18px,2.8vh,30px)}
.hg__t{font-family:var(--fj);font-weight:700;
font-size:clamp(20px,2.35vw,34px);line-height:1.55;letter-spacing:.005em;color:#fff;margin:0}
.hg__t .--p{color:var(--bl3)}
/* 受け線: 手紙の罫の続き。透明で始まり、署名に着地して実になる */
.hg__rule{display:block;width:3px;height:clamp(38px,5.6vh,60px);
margin:clamp(24px,3.4vh,40px) 0 clamp(14px,2vh,20px);
background:linear-gradient(180deg,rgba(89,182,255,0),var(--bl3));transform-origin:top}
html[data-rv] .hg__rule{transform:scaleY(0);transition:transform .6s var(--smooth) .18s}
html[data-rv] .hg__rule.is-in{transform:scaleY(1)}
/* 入場の順: テーゼ → 受け線が降りる → 署名 */
html[data-rv] .hg__sign.rv{transition-delay:.42s}
.hg__sign{display:flex;align-items:baseline;gap:14px}
.hg__name{font-family:var(--fj);font-weight:700;font-size:clamp(17px,1.6vw,21px);color:#fff}
.hg__role{font-family:var(--fm);font-size:10px;letter-spacing:.22em;color:rgba(255,255,255,.6)}
/* 肖像は右端と天地を断ち、navyの面に沈む。写真の実比率2:3を守る */
.hg__ph{grid-column:8/13;grid-row:1;
margin-right:calc(-1*var(--bleed));
margin-block:calc(-1 * clamp(70px,11vh,150px)) calc(-1 * clamp(70px,11vh,140px))}
.hg__ph .ph{aspect-ratio:2/3;min-height:clamp(420px,74vh,760px)}
.ph{position:relative;overflow:hidden;background:var(--navy-deep)}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
transform:scale(1.12)}
.ph--ceo img{object-position:50% 18%} /* 顔は画像上から22%。少し上を出して視線の抜けを作る */
.ph__cap{display:flex;align-items:center;gap:clamp(10px,1.2vw,14px);
margin-top:clamp(12px,1.8vh,18px);
font-family:var(--fm);font-size:10px;letter-spacing:.26em;color:var(--muted)}
.ph__cap::before{content:'';width:clamp(28px,3.4vw,52px);height:3px;flex-shrink:0;
background:linear-gradient(90deg,var(--bl3),rgba(89,182,255,.12))}
.hg .ph__cap{position:absolute;left:0;bottom:clamp(18px,3vh,30px);z-index:2;
color:rgba(255,255,255,.72);padding-left:clamp(14px,2vw,24px);margin:0}
.hg__ph figure{position:relative}
/* ══ 記録: 面の転換。ここから先は語りではなく事実 ══
白 → navy。字は最小、密度は最大。1px罫がその硬さを可視化する。 */
/* 記録: ヒンジと同じnavyの面が続く。転換は済んでいるので継ぎ目は引かない */
.rc{position:relative;z-index:6;background:var(--navy);color:#fff;overflow:clip;
padding:0 var(--sec-x) clamp(96px,15vh,190px)}
/* 面の中の区切りは1px罫だけ。色は変えない */
.rc__sep{display:block;height:1px;background:rgba(255,255,255,.14);transform-origin:left;
margin-bottom:clamp(54px,8vh,100px)}
html[data-rv] .rc__sep{transform:scaleX(0);transition:transform .7s var(--smooth)}
html[data-rv] .rc__sep.is-in{transform:scaleX(1)}
.rc__in{position:relative;z-index:1;max-width:var(--content-max);margin:0 auto}
.rc .lb{color:rgba(255,255,255,.62)}
.rc__h{font-family:var(--fm);font-size:10.5px;letter-spacing:.3em;color:rgba(255,255,255,.62);
display:block;margin-bottom:clamp(28px,4.2vh,50px)}
/* STYLE実績: navy面上の宣言。数字はカウントアップする */
.res{border-left:1px solid rgba(255,255,255,.18);padding-left:clamp(18px,2.4vw,34px)}
.res--2{margin-top:clamp(44px,6.4vh,80px)}
.res__t{font-family:var(--fj);font-weight:700;
font-size:clamp(24px,3.2vw,50px);line-height:1.4;letter-spacing:-.005em;color:#fff;
margin-top:clamp(12px,1.8vh,20px)}
/* 数字は地文より一段大きく、navy上で最も明るい青。動かさず、大きさで立てる */
.res__t b{color:var(--bl3);font-family:var(--fd);font-weight:800;letter-spacing:-.04em;
font-size:1.42em;line-height:0}
.res__cap{margin-top:clamp(14px,2.2vh,22px);
font-family:var(--fj);font-size:12.5px;line-height:1.9;color:rgba(255,255,255,.66);max-width:44em}
/* 登記事実。navy上の白罫が段の密度をそのまま見せる */
.dt{margin:clamp(56px,8vh,104px) 0 0;border-top:1px solid rgba(255,255,255,.16)}
.dt__row{display:grid;grid-template-columns:clamp(112px,16vw,200px) 1fr;
gap:clamp(14px,2.6vw,44px);padding:clamp(12px,1.9vh,17px) 2px;
border-bottom:1px solid rgba(255,255,255,.16)}
.dt__k{font-family:var(--fm);font-size:10.5px;letter-spacing:.2em;color:rgba(255,255,255,.6);padding-top:5px}
.dt__row dd{margin:0;font-family:var(--fj);font-size:clamp(13.5px,1.15vw,15px);line-height:1.85;
color:rgba(255,255,255,.94)}
.dt__row dd em{font-style:normal;font-family:var(--fm);font-size:.94em;letter-spacing:.02em;
color:#fff}
/* ── 帰着: navyから白紙へ。証明が不要になった一行 ── */
.cl{position:relative;z-index:6;overflow:clip;
padding:clamp(96px,15vh,200px) var(--sec-x) clamp(100px,16vh,210px);
background:radial-gradient(120% 100% at 50% 42%,#FFFFFF 0%,#F5F8FE 100%)}
.cl__in{max-width:var(--content-max);margin:0 auto;text-align:center}
.cl__t{font-family:var(--fjs);font-weight:600;
font-size:clamp(26px,4.3vw,56px);line-height:1.66;letter-spacing:.05em;color:var(--ink);margin:0}
.cl__t .--hot{color:var(--bl)}
.cl__sub{margin-top:clamp(20px,3vh,32px);
font-family:var(--fj);font-size:clamp(13px,1.1vw,15px);letter-spacing:.06em;color:var(--muted);
display:flex;align-items:baseline;justify-content:center;gap:clamp(14px,2vw,22px);flex-wrap:wrap}
.cl__by{font-family:var(--fj);font-weight:700;color:var(--ink);letter-spacing:.02em}
.cl__by::before{content:'';display:inline-block;width:clamp(22px,3vw,40px);height:1px;
background:var(--line);vertical-align:middle;margin-right:clamp(10px,1.4vw,16px)}
/* 帰着だけは焦点が合うリビール(TOPのVisionと同語) */
html[data-rv] .cl__t.rv{opacity:0;filter:blur(12px);transform:translateY(16px);
transition:opacity .9s var(--smooth),filter .9s var(--smooth),transform .9s var(--smooth)}
html[data-rv] .cl__t.rv.is-in{opacity:1;filter:blur(0);transform:none}
@media(max-width:900px){
/* 縦画面では左右に割れないので上下で割る。
上(navy) = 英語の問い / 下(白) = 日本語の答えとブランド。
二段がそれぞれ一つの声を持つ。 */
/* 図版はPCと同じく右側固定。縦画面でも画面いっぱいに取り、右端で少し切る。
日本語を縦組みにして左端に立てることで、横幅をほぼ全部図版に渡せる。
--glyph が図版の正寸。112vwまで伸ばし、背の低い端末では44svhで頭打ち。 */
.op{--glyph:min(46svh, calc((100vw - 78px) / .88));
--band:calc(var(--glyph) + clamp(14px,2.2svh,24px));
padding:calc(var(--header) + clamp(18px,3.6vh,36px)) var(--sec-x) calc(var(--band) + clamp(34px,6vh,66px))}
/* モバイルは面積が狭く鳥が本文に重なる。装飾なので後退させる */
#gl{opacity:.45}
.op__brand{top:auto;left:0;right:0;bottom:0;width:auto;height:var(--band);
background:var(--bg);
border-left:0;border-top:1px solid rgba(11,21,38,.10)}
.op__brand::before{left:0;right:0;top:-2px;bottom:auto;width:auto;height:1px;
background:rgba(143,192,255,.22)}
/* 上段(navy)=英語の問い / 下段(白)=日本語の答えとブランド。
本文は複製しない。.op__in を static にして .op(relative) 基準で置き直す。 */
.op__in{position:static}
/* 日本語は縦組み。行は右→左に流れるのでテーゼが図版側、リードが外側に立つ。
縦組みの行頭(=上端)に3pxの青。navy段の底バーが90度回って現れる形。 */
.op__ja{position:absolute;z-index:5;
left:var(--sec-x);bottom:0;width:auto;
height:calc(var(--band) - clamp(30px,5svh,54px));
writing-mode:vertical-rl;text-orientation:mixed;
display:flex;flex-direction:column;align-items:flex-start;
gap:clamp(11px,3.2vw,17px);
border-inline-start:3px solid var(--bl);
padding-inline-start:clamp(14px,3.4vw,20px)}
.op__jp{margin:0;font-size:clamp(17px,4.6vw,21px);line-height:1.05;letter-spacing:.07em;
color:var(--ink)}
.op__jp .--p{color:var(--bl)}
.op__sub{margin:0;font-size:clamp(12px,3.2vw,13.5px);line-height:1.05;letter-spacing:.06em;
color:var(--sub);max-width:none}
/* 図版は右側固定。右端で 12% 切って画面外へ抜ける */
.op__mark{top:auto;left:auto;bottom:0;
right:calc(var(--glyph) * -.12);
width:var(--glyph);height:var(--glyph);
background-size:contain;background-position:center center}
/* 640px以上(タブレット)は縦に余裕がある。図版の上限を上げ、縦組みも一段大きく */
@media(min-width:640px){
.op{--glyph:min(62svh, calc((100vw - 104px) / .88))}
.op__jp{font-size:clamp(21px,2.9vw,26px)}
.op__sub{font-size:clamp(13.5px,1.9vw,16px)}
}
/* 白面上では線画が濃青になる。薄めすぎると消えるので後退量を戻す */
#gl{opacity:.62}
.lt__ghost{right:calc(-1 * var(--sec-x));width:60vw;opacity:.5;
mask-image:linear-gradient(200deg,#000 0%,rgba(0,0,0,.7) 38%,transparent 82%)}
.lt__q{padding-left:clamp(16px,4vw,26px)}
/* 文字裏のnavyは帯に触れない(実測で帯が153/255まで汚れていた)。
.op__in が static なので ::before は .op 基準で解決される */
.op__in::before{left:-40vw;right:-40vw;top:0;bottom:var(--band);
background:radial-gradient(90vw 56vh at 50% 46%,rgba(13,27,51,.9) 0%,rgba(13,27,51,.6) 50%,transparent 84%)}
/* 縦画面では文字を写真のジャケット無地部分に重ねる。罫の着地点が本人の身体になる。
実測: 写真下35%は白文字比 14.1〜16.1:1(平均)/3.2〜3.4:1(明部p95)。
大見出し基準3:1は満たすが4.5:1は満たさないので、10pxのラベルは置かない。
暗幕(濃色オーバーレイ+白文字)は指針書v3の禁止事項なので敷かない。 */
.hg{padding-block:0 clamp(46px,7vh,84px)}
.hg__in{grid-template-columns:1fr;position:relative}
.hg__ph{grid-column:1/-1;grid-row:1;
margin-left:calc(-1*var(--sec-x));margin-right:calc(-1*var(--sec-x));
margin-top:0;margin-bottom:0}
/* 比率と切り位置は実測で決定。手(肌)を文字の帯より上へ送る */
.hg__ph .ph{aspect-ratio:5/7;min-height:0}
.ph--ceo img{object-position:50% 34%}
.hg__tx{grid-column:1/-1;grid-row:1;z-index:2;align-self:end;
padding:0 var(--sec-x) clamp(26px,4.2vh,42px)}
/* 10pxのモノラベルは写真上で4.5:1を満たせない。SPでは置かない */
.hg__lb{display:none}
.hg__t{font-size:clamp(19px,5vw,24px);line-height:1.5;
text-shadow:none}
.hg__rule{margin:clamp(16px,2.4vh,24px) 0 clamp(11px,1.6vh,15px);
height:clamp(30px,4.4vh,44px)}
/* 役職は氏名の下へ。11px・字間を広げてジャケット無地に収める */
.hg__sign{display:block}
.hg__name{font-size:clamp(18px,4.8vw,22px)}
.hg__role{display:block;margin-top:5px;font-size:11px;letter-spacing:.24em;
color:rgba(255,255,255,.78)}
.hg .ph__cap{position:static;padding-left:0;margin-top:clamp(12px,2vh,16px)}
.dt__row{grid-template-columns:1fr;gap:5px;padding-block:clamp(13px,2vh,17px)}
.ft__cols{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){
#gl{display:none}
html[data-rv] .cl__t.rv{opacity:1;filter:none;transform:none;transition:none}
html[data-rv] .hg__rule{transform:scaleX(1);transition:none}
}