/*
Theme Name: 20260701 (仮)
Author: 296 Inc.
Description: development.296.co.jp/20260701 用カスタムテーマ（ドメイン確定前の仮環境）。MRPS ランディングページ。
Version: 0.7.90
Text Domain: dev20260701
*/

:root{
  --bg:#ffffff;
  --bg2:#f5f7fa;            /* alt セクション */
  --card:#ffffff;
  --navy:#0c1b2e;           /* ヒーロー／数値帯／フッターの地色 */
  --ink:#0f1e33;            /* 見出し */
  --ink2:#33465c;           /* 本文 */
  --muted:#66788c;
  --faint:#93a1b1;
  --line:#e3e8ef;
  --line2:#cbd4e0;
  /* functional risk colors */
  --blue:#1a6bf0;           /* 主アクセント（CTA・リンク・リスク青） */
  --blue-d:#0f56cc;
  --blue-pale:#eaf1fe;      /* 淡青ボタン背景 */
  --blue-soft:#7fb0ff;      /* 濃紺の上に載せる青 */
  --yellow:#d9a531;
  --red:#e03127;
  /* 和文用。Google Sans を先頭に置くことで、和欧混在の箇所でも
     欧字は Google Sans、和文はグリフを持つ Noto Sans JP が使われる。 */
  --jp:'Google Sans','Noto Sans JP',system-ui,sans-serif;
  /* 欧字用。和文が混ざった場合も OS 標準ではなく Noto Sans JP に落とす。 */
  --en:'Google Sans','Noto Sans JP',system-ui,sans-serif;
  --maxw:73.75rem;          /* 1180px @16 */
}
*{box-sizing:border-box;margin:0;padding:0}
/* ルートを流動化：幅400px以上は16px固定、それ未満はビューポート比で縮小する。
   以降のサイズ指定は rem を基本とし、小さい端末では全体が同率で縮む（＝折り返しや溢れが起きない）。
   ボーダー・影・メディアクエリの区切り幅は px のまま（縮めると破綻するため）。 */
html{
  scroll-behavior:auto;-webkit-text-size-adjust:100%;
  font-size:clamp(12px,calc(100vw / 25),16px);
}
/* ページ内リンクの滑らかスクロールは、初期表示のアンカー位置合わせが
   済んでから有効化する（JSで .smooth を付与）。これを付けないと、送信後に
   #cta へ戻る際、ページ先頭から問い合わせ欄まで流れて見えてしまう。 */
html.smooth{scroll-behavior:smooth}
body{
  font-family:var(--jp);color:var(--ink2);background:var(--bg);
  font-size:1rem;line-height:1.9;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
.inner{max-width:var(--maxw);margin:0 auto;padding:0 2rem}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* ===== typography ===== */
h1,h2,h3,h4{font-weight:700;color:var(--ink);line-height:1.5;letter-spacing:.005em}
.kicker{
  font-family:var(--en);font-size:1.375rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--blue);margin-bottom:1.25rem;display:flex;align-items:center;gap:.75rem;font-weight:500;
}
.kicker::before{content:"";width:1.5rem;height:1px;background:currentColor;opacity:.5;flex:none}
/* 和文のキッカー（「社会課題」など）は字間を詰めて大文字化しない */
/* サイズ 1.375rem（22px）。S04 で「数字で見る、住宅内カビリスク」の行末が
   見出し「健康・建物・社会コストに関わる環境課題」の「コスト」の位置に揃う値。
   先頭の飾り罫 1.5rem ＋ gap .75rem ＝ 36px を含めて算出している。 */
.kicker.jp{font-family:var(--jp);letter-spacing:.14em;text-transform:none;font-size:1.375rem;font-weight:700}
.title{font-size:clamp(1.4375rem,3.1vw,2.1875rem);font-weight:700;color:var(--ink);line-height:1.55;
  letter-spacing:-.002em;max-width:28ch}  /* h2 継承の .005em から約.25px 詰めた値（35px時） */
.title .se{color:var(--blue)}
/* PC（761px以上）ではセクション見出しを折り返さず横一列に固定する。
   既定の max-width:28ch は和文だと約14文字相当で、20文字前後の見出しが
   PC でも2行に折れてしまうため、PC のみ制限を外す。
   最長の見出し（S06・21文字）でも 21×35px ≒ 735px、最も窮屈な 761px 時でも
   21×23.6px ≒ 498px（内寸 697px）で収まるため nowrap でも溢れない。
   ※ 見出しを 24文字以上にする場合はこの前提が崩れるので要再確認。
   SP（760px以下）は従来どおり折り返す。 */
@media(min-width:761px){
  .title{max-width:none;white-space:nowrap}
}
.lead{font-size:.96875rem;color:var(--muted);max-width:60ch;margin-top:1.25rem;line-height:2}
/* PC のみ改行させる <br>。SP では無効化して自然な折り返しに任せる。 */
@media(max-width:760px){br.pc-only{display:none}}
/* S05 のリード文は PC で <br> の位置に改行させるため、60ch（約510px）の
   幅制限を外す。前半だけで約713px あり、そのままだと手前で折り返してしまう。 */
#about .lead{max-width:none}
.small{font-size:.8125rem;color:var(--muted);line-height:1.85}
.em{color:var(--blue)}

/* 中央寄せセクション見出し */
.centered{text-align:center}
.centered .title{margin:0 auto;max-width:none}
.centered .lead{margin-left:auto;margin-right:auto}
.centered .kicker{justify-content:center}
/* サブタイトルと見出しを同じ幅の箱に入れ、箱ごと中央寄せする。
   箱の幅は長い方（＝見出し）に決まるため、サブタイトルの左端が見出しの左端に揃う。 */
.centered .headgroup{width:max-content;max-width:100%;
  margin-left:auto;margin-right:auto;text-align:left}
.centered .headgroup .kicker{justify-content:flex-start}

/* ===== section frame ===== */
.s{position:relative;padding:6.875rem 0}
.s.alt{background:var(--bg2)}
/* alt セクションはドットパターンを敷く。
   視認性を出すため、間隔 16px・粒 1.25px・不透明度 .1。
   フェードの終点を 96% まで延ばし、セクション下部までドットを残す。 */
.s.alt::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(15,30,51,.1) 1.25px,transparent 1.25px);
  background-size:16px 16px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 96%);
          mask-image:linear-gradient(180deg,#000,transparent 96%);
}
/* S04 は背景写真の上に白 85% を重ねる。数値やアイコンが並ぶため、
   写真はうっすら透ける程度に留めて可読性を優先する。
   url() は style.css からの相対パスなので、ドメイン変更の影響を受けない。 */
[data-idx="04"]{
  background-image:
    linear-gradient(rgba(255,255,255,.75),rgba(255,255,255,.75)),
    url(assets/img/s04-bg.jpg);
  background-size:cover;
  background-position:center;
}

/* S11 はドットではなく方眼罫線にする。縦横2枚のグラデーションを重ねて格子を作る。
   .s.alt::before より詳細度を上げ、模様と下方向フェードの解除だけを指定する
   （inset・pointer-events は共通指定を継承）。 */
.s.alt[data-idx="11"]::before{
  background-image:
    linear-gradient(to right,rgba(15,30,51,.05) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(15,30,51,.05) 1px,transparent 1px);
  background-size:32px 32px;
  -webkit-mask-image:none;
          mask-image:none;
}

/* 反転セクション（濃紺地）。白／薄グレーが続く中盤にリズムを作るため S08 で使用。
   テクスチャは alt と同じドットパターンを白で敷き、デザイン言語を揃える。 */
.s.inv{background:var(--navy)}
.s.inv::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.1) 1.25px,transparent 1.25px);
  background-size:16px 16px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 96%);
          mask-image:linear-gradient(180deg,#000,transparent 96%);
}
.s.inv h2,.s.inv h3{color:#fff}
.s.inv .kicker,.s.inv .title .se{color:var(--blue-soft)}
.s.inv .lead{color:rgba(255,255,255,.7)}
.s.inv .small{color:rgba(255,255,255,.62)}
.s.inv .note-fine{color:rgba(255,255,255,.5);border-left-color:rgba(255,255,255,.22)}
/* カードはヒーローのモニタータグと同じ半透明ガラスで揃える */
.s.inv .light{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);
  backdrop-filter:blur(10px)}
/* 濃紺の上では発光リングが沈むため、リスク色のグロウを強める */
.s.inv .light.b .dot{box-shadow:0 0 0 8px rgba(26,107,240,.24)}
.s.inv .light.y .dot{box-shadow:0 0 0 8px rgba(217,165,49,.26)}
.s.inv .light.r .dot{box-shadow:0 0 0 8px rgba(224,49,39,.24)}

.s>.inner{position:relative}
.s .idx{display:none}   /* セクション番号は開発用のため非表示 */
@media(max-width:760px){.s{padding:4.75rem 0}.inner{padding:0 1.375rem}}

/* ===== buttons ===== */
.btn{
  display:inline-flex;align-items:center;gap:.5625rem;border:1px solid var(--line2);
  border-radius:.5rem;padding:.875rem 1.5rem;font-size:.875rem;font-weight:700;font-family:var(--jp);
  color:var(--ink);background:#fff;cursor:pointer;transition:.28s cubic-bezier(.2,.7,.2,1);
}
.btn:hover{border-color:var(--ink);transform:translateY(-2px)}
.btn.fill{background:var(--blue);color:#fff;border-color:var(--blue);
  box-shadow:0 10px 24px -10px rgba(26,107,240,.6)}
.btn.fill:hover{background:var(--blue-d);border-color:var(--blue-d);box-shadow:0 14px 30px -10px rgba(26,107,240,.7)}
.btn.pale{background:var(--blue-pale);color:var(--blue);border-color:transparent}
.btn.pale:hover{background:#dbe8fd;border-color:transparent;transform:translateY(-2px)}
/* 濃紺の上に置くゴーストボタン */
.btn.onDark{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.32);color:#fff}
.btn.onDark:hover{background:rgba(255,255,255,.14);border-color:#fff}
.btn svg{width:.9375rem;height:.9375rem;flex:none}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}

/* ===== header ===== */
header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(140%) blur(14px);border-bottom:1px solid transparent;transition:.35s}
header.scrolled{border-bottom-color:var(--line);box-shadow:0 6px 24px -18px rgba(12,27,46,.5)}
/* 管理バー表示時はその高さぶん下げる（WordPress の管理バーは px 固定なので rem 化しない） */
body.admin-bar header{top:32px}
@media(max-width:782px){body.admin-bar header{top:46px}}
/* gap はバー内の全要素に効く。CTAボタン間の間隔として .9375rem（15px）を採る。
   ロゴ→ナビの距離だけは別途 nav の margin-left で作る。 */
.bar{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:.9375rem;padding:.875rem 2rem}
.logo{font-family:var(--en);font-weight:700;font-size:1.25rem;letter-spacing:.08em;color:var(--ink);
  display:flex;align-items:center;gap:.5625rem}
.logo .mk{width:.6875rem;height:.6875rem;flex:none;border-radius:50%;background:var(--blue)}
/* ナビ：和文＋英語サブラベルの2段 */
/* ロゴとの間隔は .bar の gap(.9375rem) ＋ この margin で 3.375rem（54px）。 */
nav{display:flex;gap:1.625rem;margin-left:2.4375rem}
nav a{position:relative;display:flex;flex-direction:column;gap:.125rem;padding:.25rem 0;transition:.25s}
nav a .n-jp{font-size:.8125rem;font-weight:700;color:var(--ink);line-height:1.3;transition:.25s}
nav a .n-en{font-family:var(--en);font-size:.53125rem;letter-spacing:.14em;color:var(--faint);
  text-transform:uppercase;line-height:1.2;font-weight:500}
nav a::after{content:"";position:absolute;left:0;bottom:-.25rem;width:0;height:2px;background:var(--blue);transition:.3s}
nav a:hover::after{width:100%}
nav a:hover .n-jp{color:var(--blue)}
.sp{flex:1}
.bar .btn{padding:.6875rem 1.125rem;font-size:.8125rem;white-space:nowrap}
.menu-tg{display:none;background:none;border:1px solid var(--line2);border-radius:.4375rem;padding:.4375rem .5625rem;cursor:pointer}
.menu-tg span{display:block;width:1.125rem;height:2px;background:var(--ink);margin:.1875rem 0;
  transition:transform .28s cubic-bezier(.2,.7,.2,1),opacity .18s}
/* 3本線 → ×（線の中心間隔は 5px＝.3125rem） */
#hdr.menu-open .menu-tg span:nth-child(1){transform:translateY(.3125rem) rotate(45deg)}
#hdr.menu-open .menu-tg span:nth-child(2){opacity:0}
#hdr.menu-open .menu-tg span:nth-child(3){transform:translateY(-.3125rem) rotate(-45deg)}
/* メニュー内だけに出す CTA 導線（PC幅ではバー側のボタンを使う） */
.n-cta{display:none}

/* ヘッダー幅の設計（実測ベース／root 16px 時）
   ボタン文言が長いため、バーの必要幅は既定の余白だと 1148px に達する。
   .bar は max-width 1180px なので広い画面では収まるが、1180px を下回る幅では
   余白を詰めないと溢れる。そこで 1240px 以下を「圧縮帯」として余白のみ詰め、
   広い画面の見た目は変えない。
     圧縮で節約: bar gap 12px×4 + bar padding 16px + nav gap 6px×5 + nav margin 6px
                 + ボタン左右 padding 3px×2×2 = 計 112px → 必要幅 1036px
   さらに幅が狭い帯では CTA を順にメニュー内へ逃がす（下の 1100px / 560px 参照）。 */
@media(max-width:1240px){
  .bar{gap:1.125rem;padding-left:1.5rem;padding-right:1.5rem}
  nav{gap:1.25rem;margin-left:0}
  .bar .btn{padding:.6875rem .9375rem}
}

/* ナビを畳む閾値：圧縮後の必要幅 1036px に対し、フォント読込前の
   フォールバック分の余裕を見て 1100px で切り替える。
   同時に副次CTA（資料ダウンロード）はバーから外し、メニュー内へ逃がす。 */
@media(max-width:1100px){
  .bar>.btn.pale{display:none}
  nav{display:none}
  .menu-tg{display:block}
  /* 畳んだナビは、開いたときヘッダー直下のドロワーとして同じ markup を使い回す */
  #hdr.menu-open nav{
    display:flex;flex-direction:column;gap:0;margin-left:0;
    position:absolute;top:100%;left:0;right:0;
    background:#fff;border-top:1px solid var(--line);
    box-shadow:0 20px 40px -26px rgba(12,27,46,.55);
    padding:.25rem 2rem 1.5rem;
    max-height:calc(100vh - 100%);max-height:calc(100dvh - 100%);
    overflow-y:auto;overscroll-behavior:contain;
  }
  #hdr.menu-open nav a{flex-direction:row;align-items:baseline;gap:.625rem;
    padding:1rem .25rem;border-bottom:1px solid var(--line)}
  #hdr.menu-open nav a::after{display:none}
  #hdr.menu-open nav a .n-jp{font-size:.9375rem}
  #hdr.menu-open nav a .n-en{font-size:.5625rem}
  #hdr.menu-open nav .n-cta{display:inline-flex;justify-content:center;
    margin-top:.625rem;padding:.875rem 1.5rem;border-bottom:none}
  #hdr.menu-open nav .n-cta.pale{margin-top:1.25rem}   /* リンク群との区切り */
}
/* 主CTA（法人向けデモを申し込む）も外す閾値。
   root font-size が clamp(12px,100vw/25,16px) で縮むため、幅400px未満では
   ビューポートが常に 25rem になる。主CTAを残すと必要幅が 24.95rem となり
   実質余白ゼロで溢れるため、スマホ幅では両CTAともメニュー内へ寄せる。 */
@media(max-width:560px){.bar>.btn.fill{display:none}}

/* ===== HERO（全面写真＋ネイビーのオーバーレイ） ===== */
.hero{padding:0;background:var(--navy);position:relative;overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-2}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 45%}
/* 左を暗く落として可読性を確保し、右は室内が見えるよう抜く */
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(7,17,31,.95) 0%,rgba(9,21,38,.88) 34%,rgba(11,26,45,.62) 62%,rgba(12,29,50,.34) 100%),
    linear-gradient(180deg,rgba(7,17,31,.5) 0%,transparent 28%,rgba(7,17,31,.45) 100%);
}
.hero .inner{padding-top:6.5rem;padding-bottom:6.75rem}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:3.5rem;align-items:center}
@media(max-width:980px){.hero-grid{grid-template-columns:1fr;gap:3.25rem}}
/* ヒーローのキッカーは h1 の前置きであり、セクションのサブタイトルとは役割が違う。
   サブタイトル拡大（1.25rem）の対象外として従来サイズを維持する。 */
.hero .kicker{color:var(--blue-soft);font-size:.71875rem}
/* 見出しは <br> の位置だけで改行させる。
   コピー列をコンテナ化し、最長行（15文字）が列幅に収まる上限 100/15.6≒6.4cqi で頭打ちにする。
   SP（〜760px）は1行に収めると小さくなりすぎるため、自動折り返しを許可する（下部のメディアクエリ）。
   ベースの clamp は SP 側と同じカーブ（5.2vw）にして 760/761px 境界で段差が出ないようにする。 */
.hero-copy{container-type:inline-size}
.hero h1{
  font-family:var(--jp);color:#fff;font-weight:700;
  font-size:min(clamp(1.75rem,5.2vw,2.5rem),6.4cqi);line-height:1.45;letter-spacing:.01em;
  white-space:nowrap;
}
.hero h1 .ac{color:var(--blue-soft)}
.hero .enSub{font-family:var(--en);font-size:.78125rem;font-weight:500;letter-spacing:.3em;
  color:rgba(255,255,255,.5);margin-top:1.375rem;text-transform:uppercase}
/* リード文も見出しと同じく <br> の位置だけで改行させ、PCでは3行に固定する。
   最長行（1行目・38文字）が列幅に収まる上限 100/38≒2.6cqi で頭打ちにする。
   SP（〜760px）は3行に収めると文字が小さくなりすぎるため、自動折り返しに戻す（下部のメディアクエリ）。 */
.hero .heroSub{font-size:min(.9375rem,2.6cqi);color:rgba(255,255,255,.74);
  margin-top:1.625rem;line-height:2.05;white-space:nowrap}
.hero .btn-row{margin-top:2.125rem}
.pills{display:flex;flex-wrap:wrap;gap:.625rem;margin-top:2.125rem}
.pill{font-size:.75rem;font-weight:500;border:1px solid rgba(255,255,255,.22);
  border-radius:999px;padding:.5rem .9375rem;color:rgba(255,255,255,.8);background:rgba(255,255,255,.07);
  display:flex;align-items:center;gap:.4375rem}
.pill::before{content:"";width:4px;height:4px;flex:none;border-radius:50%;background:var(--blue-soft)}
/* SP：見出しは折り返しを許可し、可読サイズを保つ */
@media(max-width:760px){
  .hero .inner{padding-top:4.5rem;padding-bottom:4.75rem}
  .hero h1{white-space:normal;font-size:clamp(1.75rem,5.2vw,2.5rem)}
  .hero .heroSub{white-space:normal;font-size:.9375rem;max-width:44ch}
  .hero .heroSub br{display:none}
}

/* hero visual: 濃紺のタグ＋白のモニターカード。
   同じ幅で左右の端を揃え、通常フローで上下に積む（絶対配置もずらしも使わない）。 */
.hero-visual{--mon-w:20.625rem;display:flex;flex-direction:column;align-items:flex-start;gap:1rem}
.hero-tag{width:var(--mon-w);max-width:100%;background:rgba(10,23,40,.82);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.16);border-radius:.625rem;padding:.8125rem 1rem}
.hero-tag .k{font-family:var(--en);font-size:.5625rem;letter-spacing:.18em;color:var(--blue-soft);font-weight:600}
.hero-tag p{font-size:.71875rem;color:rgba(255,255,255,.78);margin-top:.3125rem;line-height:1.65}
.monitor{
  width:var(--mon-w);max-width:100%;
  background:#fff;border-radius:.875rem;padding:1.25rem;
  box-shadow:0 34px 70px -28px rgba(4,12,24,.75),0 0 0 1px rgba(255,255,255,.5);
}
@media(max-width:980px){.hero-visual{--mon-w:100%}}
.monitor .mh{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.monitor .mh .t{font-family:var(--jp);font-size:.59375rem;letter-spacing:.13em;color:var(--faint);font-weight:500}
.live{display:flex;align-items:center;gap:.375rem;font-family:var(--en);font-size:.59375rem;color:var(--blue);font-weight:600}
.live i{width:6px;height:6px;border-radius:50%;background:var(--blue);animation:blink 1.6s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.gauge-wrap{display:flex;align-items:center;gap:1.125rem}
.gauge{position:relative;width:6rem;height:6rem;flex:none}
/* SVG は viewBox 基準で親に追従させる（HTML 側の width/height 属性を上書き） */
.gauge svg{width:100%;height:100%;transform:rotate(-90deg)}
.gauge .gv{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.gauge .gv b{font-family:var(--en);font-size:1.6875rem;font-weight:700;line-height:1;color:var(--ink)}
.gauge .gv span{font-family:var(--en);font-size:.46875rem;letter-spacing:.12em;color:var(--faint);
  margin-top:.25rem;font-weight:600}
.reads{flex:1;display:flex;flex-direction:column;gap:.625rem}
.read{display:flex;align-items:baseline;justify-content:space-between;
  border-bottom:1px solid var(--line);padding-bottom:.5rem}
.read:last-child{border-bottom:none}
.read .l{font-size:.71875rem;color:var(--muted)}
.read .v{font-family:var(--en);font-size:.875rem;font-weight:700;color:var(--ink)}
/* 配色は --blue-soft (127,176,255) を基準にする。文字色のみ、淡い地の上で
   読めるように同系の濃い青（--blue-d）を使う。 */
.statuschip{margin-top:1rem;display:flex;align-items:center;gap:.5rem;font-size:.71875rem;font-weight:500;
  background:rgba(127,176,255,.16);color:var(--blue-d);border:1px solid rgba(127,176,255,.5);
  border-radius:.5rem;padding:.5625rem .6875rem}
.statuschip .d{width:8px;height:8px;flex:none;border-radius:50%;background:var(--blue-soft);
  box-shadow:0 0 0 4px rgba(127,176,255,.24)}
/* モニターカードのダミー値であることの注釈。濃紺の写真の上に小さく淡く置く。 */
.mon-note{width:var(--mon-w);max-width:100%;margin-top:-.25rem;text-align:right;
  font-size:.625rem;letter-spacing:.02em;color:rgba(255,255,255,.55)}

/* ===== trust bar（濃紺の数値帯） ===== */
.trust{display:grid;grid-template-columns:repeat(4,1fr);margin-top:2.75rem;padding:.25rem;
  background:var(--navy);border-radius:.75rem;overflow:hidden;
  box-shadow:0 30px 60px -34px rgba(12,27,46,.55)}
.trust > div{padding:1rem .75rem;border-right:1px solid rgba(255,255,255,.12);text-align:center}
.trust > div:last-child{border-right:none}
.trust .n{font-family:var(--en);font-size:1.9375rem;font-weight:700;line-height:1;color:#fff;letter-spacing:-.01em}
.trust .n em{font-style:normal;font-size:.8125rem;color:rgba(255,255,255,.65);font-family:var(--jp);
  font-weight:500;margin-left:.1875rem}
.trust .l{font-size:.75rem;color:rgba(255,255,255,.6);margin-top:.5rem}
@media(max-width:760px){
  .trust{grid-template-columns:1fr 1fr}
  .trust > div:nth-child(2){border-right:none}
  .trust > div:nth-child(1),.trust > div:nth-child(2){border-bottom:1px solid rgba(255,255,255,.12)}
}

/* ===== generic grids / cards ===== */
.grid{display:grid;gap:1.25rem}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:840px){.g2,.g3{grid-template-columns:1fr}}
/* 枠線は持たせず、影だけで浮かせる（S11 の .chartcard と同一の3層構成。
   1層目はオフセット0で全周に回り、上端の境界も出す）。
   使用箇所は S06・S10 のみで、いずれもホバー演出は付けない。 */
.card{background:var(--card);border:none;border-radius:.75rem;padding:1.75rem;
  box-shadow:
    0 0 .5rem rgba(12,27,46,.12),
    0 6px 16px -6px rgba(12,27,46,.2),
    0 22px 44px -20px rgba(12,27,46,.45)}
.num{font-family:var(--en);font-size:.71875rem;color:var(--blue);letter-spacing:.14em;font-weight:600}
/* S06 のカード番号（01〜03）のみ大きく見せる。.num は S10 のラベル
   （ACADEMIA / INDUSTRY / THEME）にも使うため、セクションを限定する。 */
[data-idx="06"] .num{font-size:2rem;line-height:1}
.card h3{font-size:1.0625rem;font-weight:700;margin:.625rem 0 .5rem}

/* big statement
   見出しは <br> の位置だけで2行に改行させる。
   従来の max-width:16ch は ch が半角基準（全角では約8文字分）のため、
   全角9文字の2行目が引っかかって3行に折り返されていた。上限を外し、
   white-space:nowrap で <br> 以外の折り返しを止める。
   フォントが vw 追従なので、2カラム時（841px〜）も1カラム時も必要幅は
   列幅を下回り溢れない（最小マージンは 841px 時点で 326px/378px）。 */
.statement{font-family:var(--jp);font-weight:700;font-size:clamp(1.75rem,4.3vw,3rem);
  line-height:1.45;letter-spacing:.01em;color:var(--ink);white-space:nowrap}
.statement b{font-weight:700;color:var(--red)}
.problem-photo{border-radius:.75rem;overflow:hidden;aspect-ratio:16/12;position:relative;
  box-shadow:0 30px 60px -34px rgba(12,27,46,.5)}
.problem-photo img{width:100%;height:100%;object-fit:cover}
.problem-photo .cap{position:absolute;left:1.125rem;bottom:1rem;z-index:2;color:#fff;font-size:.71875rem;
  font-weight:500;letter-spacing:.04em;text-shadow:0 1px 8px rgba(0,0,0,.7)}
.problem-photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 50%,rgba(6,14,26,.6))}

/* ===== stats ===== */
/* stat grid (S04)
   カード枠・影・hover移動を廃し、内側の罫線だけで区切る。アイコン左＋
   「ラベル→数値→注記」の3段。罫線は外周に出さないため
   「1列目以外に border-left」「2行目以降に border-top」で内側だけに引く。
   列数がブレークポイントで変わる＝nth-child の周期も変わるので、
   各ブレークポイントで一度リセットしてから引き直している。 */
.statgrid{display:grid;grid-template-columns:repeat(3,1fr)}
.stat{display:flex;align-items:center;gap:1.125rem;padding:1.875rem 1.5rem}
.stat:nth-child(n+4){border-top:1px solid rgba(15,30,51,.28)}
.stat:not(:nth-child(3n+1)){border-left:1px solid rgba(15,30,51,.28)}
.stat .ic{width:2.75rem;height:2.75rem;color:var(--blue);flex:none}
.stat .k{font-family:var(--jp);font-size:.8125rem;font-weight:700;color:var(--ink2);
  letter-spacing:.02em;line-height:1.55}
.stat .v{font-family:var(--jp);font-size:2.5rem;font-weight:700;line-height:1.1;
  letter-spacing:-.02em;color:var(--ink);margin-top:.4375rem}
.stat .v .u{font-size:1.0625rem;font-weight:700;color:var(--muted);font-family:var(--jp);
  margin-left:.125rem;letter-spacing:0}
.stat .n{font-size:.75rem;color:var(--ink2);margin-top:.6875rem;line-height:1.6}
@media(max-width:840px){
  .statgrid{grid-template-columns:1fr 1fr}
  .stat:nth-child(n+4){border-top:none}
  .stat:not(:nth-child(3n+1)){border-left:none}
  .stat:nth-child(n+3){border-top:1px solid rgba(15,30,51,.28)}
  .stat:not(:nth-child(2n+1)){border-left:1px solid rgba(15,30,51,.28)}
}
@media(max-width:560px){
  .statgrid{grid-template-columns:1fr}
  .stat{padding:1.5rem .25rem}
  .stat:not(:nth-child(2n+1)){border-left:none}
  .stat:nth-child(n+2){border-top:1px solid rgba(15,30,51,.28)}
}

/* ===== platform compare ===== */
/* ラベルが短いためコンテナ幅いっぱいに広げると各カードの右側だけが大きく余る。
   width:max-content でグリッド自体を内容幅に収め、列は 1fr 同士にすることで
   「最も長いラベルに合わせた同一幅のカード2枚」になる。ブロックは左寄せ。
   minmax(0,…) と max-width:100% は幅が足りないときに縮んで溢れないための保険。 */
.flow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.375rem;
  width:max-content;max-width:100%;
  /* セクションが .centered のため、ブロックとしては中央寄せしつつ、
     項目名は左寄せに戻す（カラム見出し .ch は自身の text-align:center が優先）。 */
  margin-left:auto;margin-right:auto;text-align:left}
@media(max-width:840px){.flow{grid-template-columns:minmax(0,1fr);width:auto}}
.flowcol{background:var(--card);border:1px solid var(--line);border-radius:.75rem;padding:1.75rem}
.flowcol.key{border-color:var(--blue);background:linear-gradient(180deg,#fff,var(--blue-pale));
  box-shadow:0 30px 60px -40px rgba(26,107,240,.5)}
/* 和文の見出しなので .kicker.jp と同じ扱い（和文フォント・字間を詰める・
   uppercase を外す）。10.5px の薄グレーでは視認性が低かったため 13px・太字へ。 */
.flowcol .ch{font-family:var(--jp);font-size:.9375rem;letter-spacing:.08em;color:var(--ink2);
  margin-bottom:1.25rem;font-weight:700;text-transform:none;text-align:center}
.flowcol.key .ch{color:var(--blue)}
.node{display:flex;align-items:center;gap:.75rem;padding:.375rem 0}
/* アイコンは囲みなしの素置き。幅は 1.625rem のまま保ち、
   .flowline の margin-left（その半分）でアイコン中心に線が通る関係を維持する。 */
.node .dot{width:1.625rem;height:1.625rem;flex:none;
  display:flex;align-items:center;justify-content:center;color:var(--blue)}
/* S04 の .stat .ic と同じ 24 グリッドの SVG だが、
   あちらは線画（stroke）、こちらは塗り（fill）で表情に差をつけている。 */
.node .dot svg{width:1.25rem;height:1.25rem;display:block;fill:currentColor}
.node .tx{font-size:.84375rem}
.node.hl .tx{font-weight:700;color:var(--ink)}
.flowline{height:.625rem;width:1px;background:var(--line2);margin-left:.8125rem}

/* ===== steps ===== */
.steps{margin-top:.5rem}
/* 番号列は 6.25rem 固定だったため、数字（約60px）との差40px が余白として
   gap に上乗せされていた。列を数字の実幅に合わせ、余白は gap 一本で管理する。
   数字〜テキスト間は 40+26=66px → 42px。 */
.step{display:grid;grid-template-columns:max-content 1fr;gap:2.625rem;padding:1.625rem 0;
  border-bottom:1px solid var(--line);align-items:start}
.step:last-child{border-bottom:none}
/* 右側 h3(24px)＋margin(6px)＋.small(24px)＝54px に合わせる。line-height:1 なので
   font-size がそのまま行の高さになる。 */
.step .k{font-family:var(--en);font-size:3.375rem;font-weight:700;color:var(--line2);line-height:1}
.step.in .k{color:var(--blue)}
.step h3{font-size:1rem;font-weight:700;margin-bottom:.375rem}
@media(max-width:600px){.step{grid-template-columns:3.75rem 1fr;gap:1rem}.step .k{font-size:1.5rem}}

/* ===== risk lights ===== */
.lights{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:2.25rem}
@media(max-width:760px){.lights{grid-template-columns:1fr}}
/* 丸と見出しは横並び。.bar は absolute なのでフローに影響しない。
   説明文だけ flex-basis:100% で次の行へ送る。 */
/* 丸の右側に「見出し＋説明文」を縦に積む。折り返しは使わないので
   align-content の調整（旧実装で余白がバラついた原因）も不要になる。 */
.light{background:var(--card);border:1px solid var(--line);border-radius:.75rem;padding:3rem 1.875rem 1.25rem;
  display:flex;align-items:flex-start;gap:1.75rem;
  position:relative;overflow:hidden}
.light .tx .small{margin-top:.25rem}
.light .bar{position:absolute;top:0;left:0;right:0;height:.25rem}
.light.b .bar{background:var(--blue)} .light.y .bar{background:var(--yellow)} .light.r .bar{background:var(--red)}
/* flex アイテムなので既定では縮む。テキストが長いカードで幅だけ潰れて
   楕円になるため flex:none で固定する。 */
/* 上揃えにするため上下マージンは持たせない。カード内の上余白は
   .light の padding だけで決まり、3枚とも同じ値になる。 */
.light .dot{width:1.65rem;height:1.65rem;flex:none;border-radius:50%;margin:0;position:relative}
.light.b .dot{background:var(--blue);box-shadow:0 0 0 8px rgba(26,107,240,.12)}
.light.y .dot{background:var(--yellow);box-shadow:0 0 0 8px rgba(217,165,49,.14)}
.light.r .dot{background:var(--red);box-shadow:0 0 0 8px rgba(224,49,39,.12)}
.light .dot::after{content:"";position:absolute;inset:0;border-radius:50%;animation:pulse 2.4s infinite}
.light.b .dot::after{box-shadow:0 0 0 0 rgba(26,107,240,.4)}
.light.y .dot::after{box-shadow:0 0 0 0 rgba(217,165,49,.4)}
.light.r .dot::after{box-shadow:0 0 0 0 rgba(224,49,39,.4)}
@keyframes pulse{70%{box-shadow:0 0 0 16px rgba(0,0,0,0)}100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}}
.light h3{font-size:1.125rem}

/* ===== use cases ===== */
.uc{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:2.5rem}
@media(max-width:900px){.uc{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.uc{grid-template-columns:1fr}}
/* 枠線は持たせず影で浮かせる（.card / .chartcard と同一の3層構成）。
   ホバーでは浮き上がりに加えて影を深くする。 */
.uccard{border-radius:.75rem;overflow:hidden;border:none;background:var(--card);
  box-shadow:
    0 0 .5rem rgba(12,27,46,.12),
    0 6px 16px -6px rgba(12,27,46,.2),
    0 22px 44px -20px rgba(12,27,46,.45);
  /* 持ち上がりは付けない。ホバーでは影を深め、画像をズームさせる。 */
  transition:box-shadow .35s ease}
.uccard.rv{transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1),
  box-shadow .35s ease}
.uccard:hover{
  box-shadow:
    0 0 .5rem rgba(12,27,46,.14),
    0 10px 22px -8px rgba(12,27,46,.24),
    0 32px 60px -24px rgba(12,27,46,.5)}
.uccard .ph{position:relative;aspect-ratio:5/3;overflow:hidden}
.uccard .ph img{width:100%;height:100%;object-fit:cover;transition:1.1s ease}
.uccard:hover .ph img{transform:scale(1.07)}
.uccard .ph::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(6,14,26,.4))}
.uccard .tag{position:absolute;left:.8125rem;top:.8125rem;z-index:2;font-family:var(--en);font-size:.59375rem;
  letter-spacing:.12em;font-weight:600;background:rgba(255,255,255,.94);padding:.3125rem .625rem;
  border-radius:.3125rem;color:var(--blue)}
.uccard .bd{padding:1.25rem 1.3125rem 1.5rem}
.uccard h3{font-size:1rem;font-weight:700;margin-bottom:.375rem}

/* ===== chart / field validation ===== */
/* 枠線ではなく影で浮かせる。影は S10 のカードと同じ設計に揃えている。 */
.chartcard{background:var(--card);border:none;border-radius:.75rem;padding:1.625rem;
  /* 3層構成。1層目はオフセット0で全周に薄く回し、上の縁も背景と分離させる
     （下方向にずらした影だけだと上端がぼやけて境界が見えない）。
     2層目で近距離を締め、3層目で遠くへ落として浮き上がりを作る。 */
  box-shadow:
    0 0 .5rem rgba(12,27,46,.12),
    0 6px 16px -6px rgba(12,27,46,.2),
    0 22px 44px -20px rgba(12,27,46,.45);
  position:relative;overflow:hidden}
.chartcard .ch-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem;
  flex-wrap:wrap;gap:.625rem}
.chartcard .ch-h .t{font-family:var(--jp);font-size:.65625rem;letter-spacing:.12em;color:var(--faint);font-weight:600}
.legend{display:flex;gap:1rem;font-size:.71875rem;color:var(--muted)}
.legend span{display:flex;align-items:center;gap:.375rem}
.legend i{width:1.125rem;height:2.5px;border-radius:2px}
.legend .hum{background:var(--blue)} .legend .tmp{background:var(--ink2)}
.checklist{list-style:none}
.checklist li{display:flex;gap:.8125rem;padding:.4375rem 0;
  font-size:1.0625rem;align-items:flex-start}
.checklist .ck{flex:none;width:1.25rem;height:1.25rem;border-radius:.3125rem;background:var(--blue-pale);
  color:var(--blue);display:flex;align-items:center;justify-content:center;margin-top:.25rem}
.checklist .ck svg{width:.75rem;height:.75rem}
.loopnote{margin-top:1.75rem;font-size:1.0625rem;font-weight:700;line-height:1.85;color:var(--ink);
  max-width:38ch;border-left:3px solid var(--blue);padding-left:1.125rem}
/* 電球アイコン付きの変種（S06・S11 の結論文）。左の縦棒に代えて電球のバッジを置く。
   .loopnote 側の max-width:38ch は、アイコンぶん本文が窮屈になるので解除する。 */
.loopnote.bulb{display:flex;align-items:center;gap:1rem;border-left:none;padding-left:0;
  max-width:none}
.loopnote.bulb .ic{width:2.75rem;height:2.75rem;flex:none;padding:.625rem;border-radius:50%;
  background:rgba(217,165,49,.14);color:var(--yellow);fill:currentColor}
/* SP は本文が複数行に折り返すため、中央揃えだとアイコンが宙に浮く。1行目に合わせる。 */
@media(max-width:760px){
  .loopnote.bulb{align-items:flex-start}
  .loopnote.bulb .ic{margin-top:.125rem}
}

/* ===== roadmap ===== */
.road{display:grid;grid-template-columns:repeat(3,1fr);margin-top:2.75rem;position:relative}
@media(max-width:840px){.road{grid-template-columns:1fr;gap:.25rem}}
.road .yr{padding:0 1.625rem 0 0;position:relative}
.road .yr::before{content:"";position:absolute;left:0;top:.375rem;z-index:2;width:.75rem;height:.75rem;
  border-radius:50%;background:#fff;border:2px solid var(--blue)}
.road .yr::after{content:"";position:absolute;left:.375rem;top:.75rem;right:.875rem;height:1px;background:var(--line2)}
.road .yr:last-child::after{display:none}
@media(max-width:840px){
  .road .yr{padding:0 0 1.625rem 1.625rem}
  .road .yr::after{left:.3125rem;top:.875rem;width:1px;height:100%;right:auto}
}
.road .yr .h{font-family:var(--en);font-size:1.625rem;font-weight:700;color:var(--ink);margin:1.5rem 0 .5rem}
.road .yr.future .h{color:var(--blue)}
.road .yr.future .h::after{content:" →";font-size:1.1875rem}

/* ===== news / press ===== */
/* クラス名は newsgrid。post_class() が記事に投稿タイプ名の news クラスを
   自動付与するため、.news だと詳細ページの <article> にグリッドが効いてしまう。 */
.newsgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:2.5rem}
@media(max-width:840px){.newsgrid{grid-template-columns:1fr}}
.newscard{border:none;border-radius:.75rem;overflow:hidden;background:var(--card);
  box-shadow:
    0 0 .5rem rgba(12,27,46,.12),
    0 6px 16px -6px rgba(12,27,46,.2),
    0 22px 44px -20px rgba(12,27,46,.45);
  /* ホバーが分かるよう、わずかに行き過ぎてから戻るイージング（back out）で
     「ニョキッ」と持ち上がる動きにする。影は行き過ぎないよう別カーブで。
     持ち上げは transform ではなく translate を使う。トップページのカードには
     表示アニメ用の .rv が付き、.rv.show{transform:none} が同詳細度かつ後方で
     ホバーの transform を打ち消してしまうため（一覧ページには .rv が無い）。 */
  transition:translate .32s cubic-bezier(.34,1.56,.64,1),box-shadow .32s ease}
/* .rv{transition:1s} が上書きするので、reveal 用の指定を含めて書き直す。 */
.newscard.rv{transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1),
  translate .32s cubic-bezier(.34,1.56,.64,1),box-shadow .32s ease}
.newscard:hover{translate:0 -10px;
  box-shadow:
    0 0 .5rem rgba(12,27,46,.14),
    0 10px 22px -8px rgba(12,27,46,.24),
    0 32px 60px -24px rgba(12,27,46,.5)}
.cover{aspect-ratio:16/10;position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:1.25rem}
.cover.c1{background:linear-gradient(150deg,var(--navy),#1b4f9c)}
.cover.c2{background:linear-gradient(150deg,#12356b,var(--blue))}
.cover.c3{background:linear-gradient(150deg,#7a1f19,var(--red))}
.cover .gfx{position:absolute;inset:0;opacity:.5}
.cover .ttl{position:relative;z-index:2;color:#fff;font-size:1.1875rem;font-weight:700;line-height:1.5}
.newscard .bd{padding:1.25rem 1.25rem 1.5rem}
.newscard .cat{font-family:var(--jp);font-size:.625rem;letter-spacing:.14em;color:var(--blue);font-weight:600}
.newscard h3{font-size:.96875rem;font-weight:700;margin-top:.5rem;line-height:1.6}
/* カード全体を記事へのリンクにするため a 要素にしている */
.newscard{display:block;color:inherit}
.newscard .date{display:block;margin-top:.625rem;font-family:var(--en);font-size:.6875rem;
  letter-spacing:.06em;color:var(--faint)}
/* アイキャッチ画像がある場合のカバー（未設定なら従来のグラデーション c1〜c3） */
.cover.has-img{padding:0}
.cover.has-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ===== 記事詳細・一覧（白書・ニュース） ===== */
.inner.narrow{max-width:52rem}
.entry-title{font-size:clamp(1.375rem,3vw,2rem);line-height:1.55;margin-top:.25rem}
.entry-meta{margin-top:.75rem;font-family:var(--en);font-size:.75rem;letter-spacing:.06em;color:var(--faint)}
.entry-thumb{margin-top:2rem;border-radius:.75rem;overflow:hidden}
.entry{margin-top:2rem;font-size:.96875rem;line-height:2}
.entry>*+*{margin-top:1.5rem}
.entry h2{font-size:1.25rem;margin-top:2.5rem}
.entry h3{font-size:1.0625rem;margin-top:2rem}
.entry ul,.entry ol{padding-left:1.25rem}
.entry li+li{margin-top:.5rem}
.entry a{color:var(--blue);text-decoration:underline}
.entry img{border-radius:.5rem}
.entry blockquote{border-left:2px solid var(--line2);padding-left:1.25rem;color:var(--muted)}
.pager{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:3rem}
.pager .page-numbers{display:inline-flex;align-items:center;justify-content:center;
  min-width:2.5rem;height:2.5rem;padding:0 .75rem;border:1px solid var(--line);border-radius:.5rem;
  font-family:var(--en);font-size:.8125rem;color:var(--ink);transition:.25s}
.pager a.page-numbers:hover{border-color:var(--ink)}
.pager .page-numbers.current{background:var(--blue);border-color:var(--blue);color:#fff}

/* ===== FAQ ===== */
.faq{margin-top:2.25rem;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:1.5rem .25rem;display:flex;align-items:center;
  gap:1rem;font-size:1rem;font-weight:700;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
/* 青い丸バッジに白のQ。直径 1.875rem ＋ summary の gap 1rem ＝ 2.875rem で、
   .a（回答）の padding-left と揃うため、質問文と回答の左端が一直線に並ぶ。 */
.faq summary .q{font-family:var(--en);font-size:1rem;font-weight:700;flex:none;
  width:1.875rem;height:1.875rem;border-radius:50%;background:var(--blue);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;line-height:1;padding:.05em 0 0}
.faq summary .pl{margin-left:auto;flex:none;width:1.375rem;height:1.375rem;position:relative;transition:.3s}
.faq summary .pl::before,.faq summary .pl::after{content:"";position:absolute;background:var(--blue);transition:.3s}
.faq summary .pl::before{left:0;right:0;top:.625rem;height:2px}
.faq summary .pl::after{top:0;bottom:0;left:.625rem;width:2px}
.faq details[open] summary .pl{transform:rotate(135deg)}
.faq .a{padding:0 .25rem 1.625rem 2.875rem;color:var(--muted);font-size:.90625rem;max-width:72ch}

/* ===== final CTA + form ===== */
.cta{display:grid;grid-template-columns:1fr 1fr;gap:3.125rem;align-items:start}
@media(max-width:840px){.cta{grid-template-columns:1fr;gap:2.125rem}}
.form{background:#fff;border:1px solid var(--line);border-radius:.75rem;padding:2rem;
  box-shadow:0 30px 60px -40px rgba(12,27,46,.35)}
.field{margin-bottom:1.125rem}
.field label{display:block;font-size:.78125rem;color:var(--ink2);margin-bottom:.5rem;font-weight:700}
.field input,.field textarea{width:100%;font-family:var(--jp);font-size:.875rem;color:var(--ink);
  border:1px solid var(--line);border-radius:.5rem;padding:.8125rem .875rem;background:var(--bg2);
  transition:.22s;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--blue);background:#fff;
  box-shadow:0 0 0 3px rgba(26,107,240,.14)}
.field textarea{min-height:6rem}
/* 送信結果メッセージ */
.formmsg{font-size:.84375rem;line-height:1.8;border-radius:.5rem;padding:.875rem 1rem;margin-bottom:1.25rem}
.formmsg.ok{background:var(--blue-pale);color:var(--blue-d)}
.formmsg.ng{background:#fdecea;color:#a8241c}
/* ハニーポット（bot 対策）。画面にも読み上げにも出さない。 */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ===== footer ===== */
footer{background:var(--navy);color:rgba(255,255,255,.72);padding:4.75rem 0 2.5rem}
footer .inner{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.125rem}
@media(max-width:840px){footer .inner{grid-template-columns:1fr 1fr}}
footer .logo{color:#fff}
footer h4{font-size:.6875rem;font-family:var(--jp);letter-spacing:.16em;color:var(--blue-soft);
  margin-bottom:1rem;font-weight:600;text-transform:uppercase}
/* 行間は padding(3px×2) ＋ 行送りの余白の合計。body の line-height:1.9 のままだと
   後者が約12px あるため、1.65 に落として合計 18px → 約14.5px（約8割）にする。 */
footer a,footer p.fl{display:block;font-size:.84375rem;color:rgba(255,255,255,.72);
  padding:.1875rem 0;line-height:1.65;transition:.25s}
footer a:hover{color:#fff}
.footbig{font-family:var(--en);font-size:1.25rem;font-weight:700;letter-spacing:.02em;color:#fff;margin-top:1rem}
.footbar{border-top:1px solid rgba(255,255,255,.14);margin-top:3rem;padding-top:1.5rem;display:flex;
  justify-content:space-between;flex-wrap:wrap;gap:.75rem;font-size:.75rem;color:rgba(255,255,255,.5)}
.footbar .badges{display:flex;gap:1.125rem;font-family:var(--jp);letter-spacing:.05em}

/* reveal */
.rv{opacity:0;transform:translateY(1.625rem);transition:1s cubic-bezier(.16,1,.3,1)}
.rv.show{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}
.rv.d4{transition-delay:.32s}.rv.d5{transition-delay:.4s}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}*{animation:none!important}}

.eyebrowrow{display:flex;align-items:flex-end;justify-content:space-between;gap:1.875rem;flex-wrap:wrap}
.note-fine{font-size:.75rem;color:var(--faint);margin-top:1.25rem;border-left:2px solid var(--line2);
  padding-left:.875rem;line-height:1.8;
  /* 幅の上限は設けず、セクション幅（.inner の 1180px 内寸）まで使い切る。
     以前は 78ch＝全角39文字分しか入らず、2行目に数文字だけ残っていた。 */
  max-width:none}
/* ===== 和文の折り返し =====
   既定では文字どうしのどこでも改行できるため、「可視化／する」のように
   文節の途中で切れる。以下で読みやすい位置に寄せる。
   - word-break:auto-phrase … 文節単位で折り返す（非対応ブラウザは値ごと無視され従来動作）
   - line-break:strict ……… 小書きかな・約物の直前での改行を防ぐ
   - text-wrap:pretty ……… 最終行に1〜2文字だけ残るのを避ける
   対象は本文系のみ。見出しは <br> で改行位置を制御しているため触らない。 */
.lead,.small,.note-fine,.mon-note,.heroSub,.faq .a,.entry,.loopnote,.checklist li{
  word-break:auto-phrase;
  line-break:strict;
  text-wrap:pretty;
}
/* 短い注釈は pretty（最終行だけ調整）より balance（全行を均等割り）が向く。
   balance は Chrome / Safari / Firefox とも対応しており、auto-phrase 非対応の
   ブラウザでも中途半端な行が出にくくなる。 */
.note-fine,.mon-note{text-wrap:balance}