/* 生成物: muse-business-B6.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);
}
a:not([href]){cursor:default}
.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%}
/* 可読性スクリムは置かない(実測で不要。単独の黒い影に見える) */
/* 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)}}

/* ── 領域: 面で二分する。中身は事業ごとの独立ブロック(元版の構成) ── */
.dm{position:relative;z-index:6;overflow:clip;
  padding:clamp(88px,13vh,180px) var(--sec-x) clamp(96px,15vh,200px)}
.dm--buy{background:#fff;color:var(--ink)}
.dm--sls{background:var(--navy);color:#fff}
.dm__in{max-width:var(--content-max);margin:0 auto}
.dm--sls .lb{color:rgba(143,192,255,.72)}

.dm__hd{display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(16px,2.4vw,40px);align-items:end;
  border-bottom:1px solid var(--line);
  padding-bottom:clamp(26px,3.6vh,44px);margin-bottom:clamp(44px,6.4vh,84px)}
.dm--sls .dm__hd{border-bottom-color:rgba(255,255,255,.16)}
.dm__hdl{grid-column:1/9}
.dm__lb{display:block;margin-bottom:clamp(14px,2vh,22px)}
.dm__en{display:block;font-family:var(--fd);font-weight:300;
  font-size:clamp(21px,2.3vw,36px);line-height:1.22;letter-spacing:-.01em;color:var(--bl)}
.dm--sls .dm__en{color:var(--bl3)}
.dm__ja{display:block;margin-top:clamp(9px,1.3vh,15px);
  font-family:var(--fj);font-weight:700;
  font-size:clamp(20px,2.6vw,40px);line-height:1.5;letter-spacing:.005em}
.dm__ja .--p{color:var(--bl)}
.dm--sls .dm__ja .--p{color:var(--bl3)}
/* 事業数。カウントアップは持たせない(動く数字はページに1つだけ) */
.dm__cnt{grid-column:10/13;text-align:right;font-family:var(--fd);font-weight:300;
  font-size:clamp(34px,5vw,72px);line-height:.9;letter-spacing:-.04em;color:var(--bl)}
.dm--sls .dm__cnt{color:var(--bl3)}
.dm__cnt em{display:block;font-family:var(--fm);font-style:normal;font-size:10px;
  letter-spacing:.22em;color:var(--muted);margin-top:8px}
.dm--sls .dm__cnt em{color:rgba(255,255,255,.55)}

/* ── 事業ブロック ── */
.bz{position:relative;display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(18px,2.6vw,44px);align-items:center;
  padding-top:clamp(40px,5.6vh,74px);margin-top:clamp(40px,5.6vh,74px);
  border-top:1px solid var(--line)}
.dm--sls .bz{border-top-color:rgba(255,255,255,.16)}
.bz:first-of-type{border-top:0;margin-top:0;padding-top:0}
/* 巨大な番号。地に沈めて置く。文字の後ろ */
.bz__idx{position:absolute;z-index:0;pointer-events:none;
  right:0;top:0;
  font-family:var(--fd);font-weight:800;font-size:clamp(90px,14vw,220px);
  line-height:.8;letter-spacing:-.06em;color:var(--ink);opacity:.05}
.dm--sls .bz__idx{color:#fff;opacity:.07}
html[data-rv] .bz__idx{transform:translateY(24px);opacity:0;
  transition:transform 1s var(--smooth),opacity 1s var(--smooth)}
html[data-rv] .bz__idx.is-in{transform:none;opacity:.05}
html[data-rv] .dm--sls .bz__idx.is-in{opacity:.07}

.bz__tx{position:relative;z-index:1;grid-row:1;grid-column:1/6}
/* 比率は横長側に統一。6列(1440で628px)に対し 3/2=419 / 4/3=471 / 5/4=413。
   縦は実測で 470px 前後に収まる。max-height は保険 */
.bz__ph{position:relative;z-index:1;grid-row:1;grid-column:7/13;margin:0;overflow:clip;
  aspect-ratio:3/2;max-height:min(56svh,480px)}
.bz--rev .bz__tx{grid-row:1;grid-column:8/13}
.bz--rev .bz__ph{grid-row:1;grid-column:1/7;aspect-ratio:4/3}
.bz--sq .bz__ph{grid-row:1;grid-column:7/12;aspect-ratio:5/4}
.bz__ph img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.9) contrast(1.04)}
.bz__ph::after{content:'';position:absolute;inset:0;pointer-events:none;
  outline:1px solid rgba(11,21,38,.10);outline-offset:-1px}
.dm--sls .bz__ph::after{outline-color:rgba(255,255,255,.16)}

.bz__no{display:block;font-family:var(--fm);font-size:clamp(11px,1vw,13px);
  letter-spacing:.2em;color:var(--muted)}
.dm--sls .bz__no{color:rgba(143,192,255,.66)}
/* 事業名は英文が主、日本語が従。TOP・Aboutと同じ宣言先行の文法 */
.bz__t{margin:clamp(10px,1.4vh,16px) 0 0;font-family:var(--fd);font-weight:500;
  font-size:clamp(28px,3.4vw,54px);line-height:1.02;letter-spacing:-.035em;color:var(--ink)}
.dm--sls .bz__t{color:#fff}
.bz__t .--p{color:var(--bl)}
.dm--sls .bz__t .--p{color:var(--bl3)}
.bz__nm{display:block;margin-top:clamp(10px,1.4vh,16px);
  font-family:var(--fj);font-weight:700;font-size:clamp(15px,1.4vw,19px);
  letter-spacing:.02em}
.bz__bd{margin-top:clamp(11px,1.5vh,16px);display:flex;flex-wrap:wrap;gap:8px}
.bz__bd span{font-family:var(--fm);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);padding:4px 9px}
.dm--sls .bz__bd span{color:rgba(255,255,255,.66);border-color:rgba(255,255,255,.22)}
.bz__dsc{margin-top:clamp(16px,2.2vh,26px);font-family:var(--fj);
  font-size:clamp(13.5px,1.05vw,15px);line-height:2.02;color:var(--sub)}
.dm--sls .bz__dsc{color:var(--on-navy-sub)}
.bz__det{margin-top:clamp(14px,2vh,22px);display:flex;flex-wrap:wrap;
  gap:6px clamp(8px,1vw,12px);align-items:center}
.bz__det em{font-family:var(--fm);font-style:normal;font-size:9.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.bz__det span{font-family:var(--fj);font-size:11.5px;letter-spacing:.04em;
  color:var(--muted);border-radius:999px;border:1px solid var(--line);
  padding:3px clamp(9px,1.1vw,13px)}
.dm--sls .bz__det em{color:rgba(255,255,255,.5)}
.dm--sls .bz__det span{color:rgba(255,255,255,.72);border-color:rgba(255,255,255,.2)}
.bz__kz{margin-top:clamp(11px,1.5vh,16px);display:inline-flex;align-items:center;gap:10px;
  font-family:var(--fj);font-size:12.5px;letter-spacing:.02em;color:var(--muted)}
.bz__kz img{height:clamp(20px,2vw,26px);width:auto;display:block}

/* FAQは事業ブロックの中。散らさない(元版の構成) */
.bz__faq{margin-top:clamp(18px,2.6vh,30px);border-top:1px solid var(--line)}
.dm--sls .bz__faq{border-top-color:rgba(255,255,255,.16)}
.bz__faq>summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  gap:10px;padding:clamp(13px,1.8vh,18px) 0;
  font-family:var(--fj);font-weight:700;font-size:clamp(13px,1.05vw,14.5px);
  letter-spacing:.02em;color:var(--ink)}
.dm--sls .bz__faq>summary{color:#fff}
.bz__faq>summary::-webkit-details-marker{display:none}
.bz__faq>summary::after{content:'+';margin-left:auto;font-family:var(--fd);font-weight:300;
  font-size:18px;line-height:1;color:var(--bl);transition:transform .3s var(--smooth)}
.dm--sls .bz__faq>summary::after{color:var(--bl3)}
.bz__faq[open]>summary::after{transform:rotate(45deg)}
.bz__q{border-top:1px solid var(--line);padding:clamp(11px,1.6vh,16px) 0}
.dm--sls .bz__q{border-top-color:rgba(255,255,255,.12)}
.bz__q dt{font-family:var(--fj);font-size:clamp(13px,1vw,14.5px);line-height:1.72;
  display:flex;gap:10px}
.bz__q dt i{font-family:var(--fm);font-style:normal;font-size:10.5px;
  letter-spacing:.12em;color:var(--muted);flex-shrink:0;padding-top:.25em}
.bz__q dd{margin:6px 0 0 calc(10px + 22px);font-family:var(--fj);
  font-size:clamp(12.5px,.95vw,14px);line-height:2;color:var(--sub)}
.dm--sls .bz__q dd{color:var(--on-navy-sub)}

/* 実績。ページで唯一カウントアップする数字は 2,549 のみ */
.dm__res{margin-top:clamp(60px,8.4vh,120px);
  border-left:3px solid var(--bl);padding-left:clamp(16px,2.2vw,34px)}
.dm--sls .dm__res{border-left-color:var(--bl3)}
.dm__rt{font-family:var(--fj);font-weight:700;
  font-size:clamp(17px,2vw,31px);line-height:1.66;letter-spacing:.005em}
.dm__rt b{font-family:var(--fd);font-weight:800;color:var(--bl);
  font-size:1.5em;line-height:1;letter-spacing:-.03em;padding:0 .04em}
.dm--sls .dm__rt b{color:var(--bl3)}
.dm__rt span{display:block}
.dm__rc{margin-top:clamp(13px,1.9vh,21px);font-family:var(--fj);font-size:12.5px;
  line-height:1.92;color:var(--muted);max-width:44em}
.dm--sls .dm__rc{color:rgba(255,255,255,.6)}

/* ── 帰着 ── */
.cl2{position:relative;z-index:6;background:var(--bg);color:var(--ink);
  padding:clamp(90px,14vh,180px) var(--sec-x) clamp(96px,15vh,200px)}
.cl2__in{max-width:var(--content-max);margin:0 auto}
.cl2__t{margin-top:clamp(14px,2vh,22px);font-family:var(--fj);font-weight:700;
  font-size:clamp(21px,2.9vw,46px);line-height:1.5;letter-spacing:.005em}
.cl2__t .--p{color:var(--bl)}
.cl2__s{margin-top:clamp(15px,2.2vh,24px);font-family:var(--fj);
  font-size:clamp(13.5px,1.1vw,15.5px);line-height:2.05;
  color:var(--sub);max-width:34em}

@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}
  /* ── 領域(SP) ── */
  .dm{padding:clamp(60px,9vh,110px) var(--sec-x) clamp(66px,10vh,120px)}
  .dm__hd{grid-template-columns:1fr;gap:clamp(14px,2vh,20px);align-items:start;
    padding-bottom:clamp(20px,3vh,32px);margin-bottom:clamp(30px,4.6vh,52px)}
  .dm__hdl,.dm__cnt{grid-column:1/-1}
  .dm__cnt{text-align:left;display:flex;align-items:baseline;gap:12px}
  .dm__cnt em{margin-top:0}
  .bz{grid-template-columns:1fr;gap:clamp(16px,2.4vh,24px);
    padding-top:clamp(34px,5vh,58px);margin-top:clamp(34px,5vh,58px)}
  .bz__idx{font-size:clamp(72px,22vw,120px);top:clamp(14px,2.4vh,26px)}
  .bz:first-of-type .bz__idx{top:0}
  .bz__tx,.bz--rev .bz__tx{grid-column:1/-1;grid-row:2}
  .bz__ph,.bz--rev .bz__ph,.bz--sq .bz__ph{grid-column:1/-1;grid-row:1;
    margin-left:calc(-1*var(--sec-x));margin-right:calc(-1*var(--sec-x));
    aspect-ratio:3/2;max-height:44svh}
  .bz__ph::after{outline:0}
  .bz__q dd{margin-left:0}
  .dm__res{margin-top:clamp(42px,6.4vh,80px);padding-left:clamp(14px,4vw,24px)}
  .dm__rt b{font-size:1.36em}
  .cl2{padding:clamp(60px,9vh,110px) var(--sec-x) clamp(66px,10vh,120px)}
  .cl2 .tcta{width:100%;justify-content:center}

}
@media(prefers-reduced-motion:reduce){
  #gl{display:none}
}