/* ═══════════════════════════════════════════════════════════════
   Odonata コーポレートサイト 共通スタイル
   カラー・タイポは既存LP（コンディショニングツール）から継承
   ═══════════════════════════════════════════════════════════════ */
:root{
  /* ── 色：意味で命名する（詳細は docs/design-tokens.md） ── */
  --color-text:#15233B;          /* 本文（白背景で 14.32:1） */
  --color-text-muted:#41616F;    /* 補足・注記（白背景で 6.64:1） */
  --color-text-note:#4B5563;     /* 小さな注記（白背景で 7.56:1） */
  --color-text-inverse:#E4EFF8;  /* 暗い背景の上の文字（ネイビー地で 12.03:1） */
  --color-bg:#E0F5FD;
  --color-bg-subtle:#F2FBFE;
  --color-bg-surface:#FFFFFF;
  --color-bg-dark:#071A3A;
  --color-primary:#00A0E9;         /* 塗り・図形専用。文字には使わない（白地 2.91:1） */
  /* ───── 青の2トークンは役割を分ける。混ぜると必ずコントラスト不足が再発する ─────
     --color-primary-strong #0A5E93 … 白文字を載せる面。上に載せてよい文字は #fff のみ
     --blue / --color-primary #00A0E9 … 濃紺文字を載せる面、または文字を持たない装飾。
                                        上に載せてよい文字は #04203b のみ。白文字は禁止
     白 / #00A0E9 は 2.91:1 で 4.5:1 を満たさない。以後 --blue の上に白文字を置く実装は規則違反とする。 */
  --color-primary-strong:#0A5E93; /* 白地 6.92:1／ページ地 6.14:1。濃紺の上では 2.03:1 で使えない */
  --color-navy:#0B2A5B;
  --color-accent:#FF9933;
  --color-border:#CCE9F6;          /* 面の区切り線（非情報。3:1 の対象外） */
  --color-border-strong:#6A9AB8;   /* 白い塗りの上の枠線のみ（白地 3.03:1／ページ地 2.69:1）
                                      ページ地に直接置く線・記号には使わない。→ docs/design-tokens.md */
  /* 2事業のカード配色（Hero のカードと Service セクションで共有する） */
  --card-analysis-bg:#FFFFFF;
  --card-analysis-accent:#00A0E9;
  --card-analysis-icon:#0A5E93;
  --card-analysis-text:#0B2A5B;
  --card-analysis-hover:#F2FAFE;
  --card-platform-bg:#0B2A5B;
  --card-platform-accent:#7FE3FF;
  --card-platform-icon:#7FE3FF;
  --card-platform-text:#FFFFFF;
  --card-platform-sub:#D2E3F1;
  --card-platform-hover:#123A72;
  --color-focus-ring:#FFDF3F;    /* フォーカスリングの黄 */
  --color-focus-outline:#1A1A1C; /* フォーカスリングの黒 */
  /* ── タイポ ── */
  --font-size-body:16px;
  --font-size-note:12.5px;
  --font-size-h1:clamp(32px,4.4vw,48px);
  --font-size-h2:clamp(30px,4.2vw,40px);
  --font-size-h3:20px;
  --line-height-body:1.8;        /* 1.5 以上 */
  /* ── 余白 ── */
  --space-section:104px;
  --space-block:44px;
  --space-paragraph:28px;
  --measure-body:700px;          /* 本文1行 ≒ 全角40文字 */

  /* 既存クラスからの参照用エイリアス（段階移行のため残す） */
  --bg:var(--color-bg); --card:var(--color-bg-surface); --text:var(--color-text);
  --sub:var(--color-text-muted); --note:var(--color-text-note);
  --border:var(--color-border); --blue:var(--color-primary); --navy:var(--color-navy);
  --navy-deep:var(--color-bg-dark);
  --cyan:#3FC8F0; --teal:#1B8FB3; --red:#DC2626; --green:#16A34A;
  --orange:var(--color-accent); --radius:18px; --radius-sm:12px;
  --shadow:0 10px 30px rgba(11,42,91,.08); --shadow-lg:0 24px 60px rgba(11,42,91,.16);
  --maxw:1140px; --readw:var(--measure-body);
  /* 100% を #00A0E9 にすると、その上のリード文（#CFE6F5）が 2.26:1、白でも 2.91:1 になる。
     実描画ピクセルの測定で 320〜1920px の全幅・9ページで基準を割ったため、明るい端を
     #0E5F9E まで下げた（白 6.67:1／#CFE6F5 5.17:1／#D6E6F2 5.23:1）。
     72% を #0C4C80 に挟んで、端が平坦にならないようにしている。 */
  --grad-hero:linear-gradient(135deg,#071A3A 0%,#0B2A5B 38%,#0C4C80 72%,#0E5F9E 100%);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* text-wrap は言語を問わず有効。word-break:auto-phrase / palt / line-break:strict は
   日本語の組版専用で、英語では不要かつ字間が詰まりすぎるため :lang(ja) に限定する（§5-5）。 */
:where(h1,h2,h3,h4,h5,h6){text-wrap:balance}
:where(p,li,dd,dt,figcaption,blockquote,th,td){text-wrap:pretty}
:where(h1,h2,h3,h4,h5,h6):lang(ja){word-break:auto-phrase}
:where(p,li,dd,dt,figcaption,blockquote,th,td):lang(ja){word-break:auto-phrase}
body{overflow-wrap:break-word}
body:lang(ja){line-break:strict}
/* 文節の折り返し単位。inline-block なので max-width が無いと 320px 幅で親を突き破る */
.np{display:inline-block;max-width:100%}
:lang(ja) :where(h1,h2,h3,h4){font-feature-settings:"palt" 1}
/* 英語版：日本語向けの値をほどく。700px は全角40文字、1.8 は日本語の行間 */
[lang="en"] body{line-height:1.7}
[lang="en"] .readable{max-width:68ch}
::selection{background:rgba(0,160,233,.22)}
body{
  font-family:'Manrope','Zen Kaku Gothic New',system-ui,-apple-system,sans-serif;
  color:var(--text); background:var(--bg); font-size:16px; line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
/* height:auto は必須。width/height 属性（実寸）を入れたうえで max-width で縮めると、
   height:auto が無い場合に高さだけ実寸のまま残り、狭い画面で画像が縦に潰れる。 */
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.center{text-align:center}
/* ラベルと説明の間に引く装飾の罫線。
   文字（─ や —）を並べると、フォントの字送りの関係で線がつながらず途切れる。
   content:"" は読み上げられないので、装飾として正しい状態になる。
   色は currentColor を継承させ、個別に指定しない。 */
.rule::after{content:"";display:inline-block;width:32px;height:1px;
  background:currentColor;vertical-align:middle;margin:0 10px}
section{padding:104px 0}
.section-alt{background:linear-gradient(180deg,#fff 0%,#F2FBFE 100%)}
/* 本文の1行あたり文字数を全角32〜40文字に抑える */
.readable{max-width:var(--readw)}
.readable.center,.center .readable{margin-left:auto;margin-right:auto}

/* icons */
svg.ic{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-.14em}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--color-primary-strong);margin-bottom:14px;
}
h2.section-title{
  font-size:clamp(30px,4.2vw,40px);font-weight:800;line-height:1.35;
  color:var(--navy);letter-spacing:-.01em;
}
.section-lead{font-size:16.5px;color:var(--sub);margin-top:14px;max-width:var(--readw);line-height:1.9}
.center .section-lead,.section-lead.center{margin-left:auto;margin-right:auto}

.skip-link{position:absolute;left:16px;top:-64px;z-index:200;background:#fff;color:var(--navy);
  font-size:14px;font-weight:800;padding:12px 20px;border-radius:0 0 10px 10px;
  border:2px solid #1A1A1C;box-shadow:0 0 0 4px #FFDF3F;transition:top .15s}
.skip-link:focus{top:0}
/* ───── Header / Global nav ───── */
header.site{
  position:sticky;top:0;z-index:100;
  background:rgba(224,245,253,.9);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:18px;height:68px}
/* width:auto は必須。height だけ指定すると、width 属性（302px）が
   presentational hint として効いてロゴが横に伸びる。 */
.nav-logo{flex-shrink:0}
/* max-width:none が要る。グローバルの img{max-width:100%} が効くと、拡大で
   ヘッダーの使える幅が狭まったときに幅だけ縮み、高さ固定のロゴが縦長になる。 */
/* 新ロゴはロックアップ内の余白が旧より広く、ロゴ全体に占める「Odonata」の
   文字の高さが 48% → 33% に下がった。30px のままだと文字が 14.3px → 10.0px と
   約30%小さくなるため上げる。
   文字を従来と同じにするには 42px 必要だが、実測すると 1280px 幅で
   ヘッダーが 16px はみ出す（ロゴ幅が 101px → 125px と 24px 広がるため）。
   1280px で破綻しない最大値が 36px（38px から +4px はみ出す）なのでこれを採る。
   幅は 107px、文字は 12.0px。
   max-width:none を消さないこと。グローバルの img{max-width:100%} が効くと、
   175% ズームでヘッダーの幅が足りなくなったとき、幅だけ縮んで高さ固定の
   ロゴが縦長に潰れる。 */
.nav-logo img{height:36px;width:auto;max-width:none}
.nav-links{display:flex;gap:20px;align-items:center}
.nav-links>a,.nav-item{flex-shrink:0}
.nav-links>a,.nav-item-btn{
  font-size:14px;font-weight:600;color:var(--navy);opacity:.9;transition:.2s;
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  background:none;border:none;padding:0;font-family:inherit;cursor:pointer;
}
.nav-links>a:hover,.nav-links>a.active,.nav-item-btn:hover,.nav-item.active .nav-item-btn{opacity:1;color:var(--color-primary-strong)}
.nav-links>a.active,.nav-item.active .nav-item-btn{box-shadow:inset 0 -2px 0 var(--blue)}
.nav-item-btn:focus-visible,.nav-links a:focus-visible{outline-offset:3px;border-radius:4px}
/* 右端アクション：ログイン（テキスト）→ デモ（塗り）→ 資料請求（線） */
.nav-actions{display:inline-flex;align-items:center;gap:12px;margin-left:6px;flex-shrink:0}
/* 言語切替。現在の言語はリンクにせず span（aria-current="true"）。
   区切りの「|」は装飾なので aria-hidden。英語版が無いページでは中身が空になる。 */
.nav-lang{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;white-space:nowrap}
.nav-lang:empty{display:none}
.nav-lang a{color:var(--color-primary-strong);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:3px}
.nav-lang a:hover,.nav-lang a:focus-visible{color:var(--navy);text-decoration-thickness:2px}
.nav-lang [aria-current="true"]{color:var(--navy)}
.nav-lang [aria-hidden="true"]{color:var(--color-text-muted)}
/* 3段階の序列：ログイン（淡いブルー）＜ 資料請求（白＋濃紺枠）＜ デモを見る（塗り）
   高さ38px・角丸999px・左右パディングは3つとも揃える。
   ホバーでレイアウトが動かないよう、枠線は常に 1.5px を持たせて色だけ変え、
   padding / font-weight / font-size / letter-spacing は一切変えない。
   動きは transform のみで表現する（レイアウトに影響しない）。 */
.nav-login,.nav-cta,.nav-cta2{
  height:38px;padding:0 18px;border-radius:999px;font-size:13px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;
  flex-shrink:0;border:1.5px solid transparent;
  transition:transform .15s ease,background-color .15s ease,border-color .15s ease,color .15s ease;
}
.nav-login:hover,.nav-cta:hover,.nav-cta2:hover,
.nav-login:focus-visible,.nav-cta:focus-visible,.nav-cta2:focus-visible{transform:translateY(-1px)}
.nav-login{background:#E8F2FB;color:var(--navy)!important;border-color:#E8F2FB}
.nav-login:hover,.nav-login:focus-visible{background:#D6E8F7;border-color:var(--navy)}
.nav-cta{background:var(--color-primary-strong);color:#fff!important;border-color:var(--color-primary-strong)}
.nav-cta:hover,.nav-cta:focus-visible{background:var(--navy);border-color:var(--navy)}
.nav-cta2{background:#fff;color:var(--navy)!important;border-color:var(--navy)}
.nav-cta2:hover,.nav-cta2:focus-visible{background:#F4F9FD;border-color:var(--navy)}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;font-size:24px;color:var(--navy);line-height:1}
/* dropdown（サービス）：hover / click / キーボードフォーカスの3経路で開く */
.nav-item{position:relative}
.nav-item .caret{font-size:9px;opacity:.6;transition:transform .2s}
.nav-item.open .caret{transform:rotate(180deg)}
.sub-menu{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(6px);
  background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lg);
  padding:8px;min-width:210px;opacity:0;visibility:hidden;transition:.18s;z-index:110;
}
.sub-menu::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px}
.nav-item:hover .sub-menu,.nav-item:focus-within .sub-menu,.nav-item.open .sub-menu{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
}
/* Escape で閉じたことを表す。:focus-within は Escape 後もボタンにフォーカスが残る限り
   真のままなので、これが無いと「aria-expanded=false なのに開いたまま」になる。
   同じ詳細度（0,3,0）なので、必ず上の規則より後ろに置くこと。 */
.nav-item.collapsed .sub-menu{opacity:0;visibility:hidden;transform:translateX(-50%) translateY(6px)}
.sub-menu a{display:block;padding:11px 16px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--navy);white-space:nowrap}
/* 地が var(--bg)（#E0F5FD）なので --color-primary では 2.59:1 しか出ない。6.14:1 にする */
.sub-menu a:hover,.sub-menu a:focus-visible{background:var(--bg);color:var(--color-primary-strong)}
@media(max-width:1080px){.nav-links{gap:15px}.nav-actions{gap:9px}}
@media(max-width:980px){
  .nav-links{display:none}
  .nav-toggle{display:block}
  .nav-links.open{
    display:flex;flex-direction:column;align-items:stretch;position:absolute;top:68px;left:0;right:0;
    background:var(--card);padding:14px 24px 26px;gap:2px;box-shadow:var(--shadow-lg);
    border-bottom:1px solid var(--border);max-height:calc(100vh - 68px);overflow:auto;
  }
  .nav-links.open>a{padding:14px 6px;border-bottom:1px solid var(--bg);font-size:15px}
  .nav-links.open>a.active{box-shadow:none;color:var(--color-primary-strong)}
  .nav-item-btn{width:100%;justify-content:space-between;padding:14px 6px;border-bottom:1px solid var(--bg);font-size:15px}
  /* SPではアコーディオン展開 */
  .nav-links.open .sub-menu{
    position:static;transform:none;box-shadow:none;border:none;padding:0 0 0 16px;min-width:0;
    display:none;opacity:1;visibility:visible;background:none;
  }
  .nav-links.open .nav-item.open .sub-menu{display:block}
  .nav-links.open .sub-menu a{padding:12px 6px;border-bottom:1px solid var(--bg)}
  .nav-actions{flex-direction:column;align-items:stretch;gap:10px;margin:18px 0 0}
  .nav-login,.nav-cta,.nav-cta2{height:48px;padding:0 20px;font-size:14.5px}
  .nav-login{order:3}
}

/* ───── Page hero（下層ページ） ───── */
.phero{background:var(--grad-hero);color:#fff;padding:74px 0 78px;position:relative;overflow:hidden}
.phero canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.35}
.phero .wrap{position:relative;z-index:2}
/* パンくずリスト（§7-9）。<main> の先頭、ページヒーローの直上に置く。
   ヒーローの内側（濃紺）ではなくページ地（--color-bg）の上に乗る。 */
.breadcrumb{margin:24px 0}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px 0;
  font-size:13px;line-height:1.7;margin:0;padding:0}
/* 色だけでリンクと分からせない（§6-4）ため常時下線 */
.breadcrumb a{color:var(--color-text-muted);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:3px}
.breadcrumb a:hover{color:var(--color-primary-strong);text-decoration-thickness:2px}
.breadcrumb [aria-current="page"]{color:var(--color-text);text-decoration:none}
/* 区切りは CSS で描く。HTML に文字として書くとスクリーンリーダーが「スラッシュ」と読む。
   指定は --color-border-strong だったが、--color-bg（#E0F5FD）上で 2.69:1 と
   基準を満たさないため --color-text-muted（5.89:1）に変えている。 */
.breadcrumb li:not(:first-child)::before{content:"/";margin:0 8px;color:var(--color-text-muted)}
.phero .p-eyebrow{font-size:12px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:#9fe2ff;margin-bottom:12px}
.phero h1{font-size:clamp(28px,4.6vw,46px);font-weight:800;letter-spacing:-.01em;margin-bottom:16px;line-height:1.3}
.phero p.lead{font-size:16px;color:#cfe6f5;max-width:720px}
.phero .hero-actions{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}

/* ───── Buttons ───── */
.btn{
  display:inline-flex;align-items:center;gap:9px;padding:14px 28px;border-radius:999px;
  font-weight:700;font-size:15px;transition:.22s;cursor:pointer;border:none;
}
.btn svg.ic{font-size:18px}
.btn-primary{background:#fff;color:var(--navy)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.25)}
.btn-ghost{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.3)}
.btn-ghost:hover{background:rgba(255,255,255,.2)}
.btn-navy{background:var(--navy);color:#fff}
/* 白文字を載せる面なので --color-primary-strong を使う（--blue では 2.91:1）。
   ベースの濃紺との明度差が縮まるぶん、ホバーは transform でも知覚できるようにしてある */
/* 塗りを #0A5E93 にしたことで、ベースの濃紺との明度比が 4.81:1 → 2.03:1 に縮む。
   状態変化が明度だけでは伝わりにくいため、移動に加えて影でも補う */
.btn-navy:hover{background:var(--color-primary-strong);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.btn-blue{background:var(--color-primary-strong);color:#fff}
.btn-blue:hover{background:var(--navy);transform:translateY(-2px)}
.btn-line{background:#fff;color:var(--navy);border:1.5px solid var(--color-border-strong)}
/* 白い塗りのボタン。--color-primary では文字 2.91:1・枠線 2.91:1 で
   どちらも基準を満たさないため --color-primary-strong（6.92:1）にする */
.btn-line:hover{border-color:var(--color-primary-strong);color:var(--color-primary-strong)}

/* ───── Stat strip（実績バー） ───── */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:-56px;position:relative;z-index:5}
.stats.cols4{grid-template-columns:repeat(4,1fr)}
.stat{
  background:var(--card);border-radius:var(--radius);padding:26px 22px;text-align:center;
  box-shadow:var(--shadow);border:1px solid var(--border);
}
.stat .num{font-size:30px;font-weight:800;color:var(--color-primary-strong);line-height:1.15}
.stat .num small{font-size:16px}
.stat .lbl{font-size:13px;color:var(--sub);margin-top:8px;font-weight:600}
.stat .lbl a{color:var(--color-primary-strong)}
@media(max-width:820px){.stats,.stats.cols4{grid-template-columns:1fr;margin-top:-40px}.stat{padding:18px 16px}}

/* ───── Cards ───── */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px;align-items:stretch}
.feat-grid.cols2{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.feat-grid,.feat-grid.cols2{grid-template-columns:1fr}}
.feat{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:30px 26px;transition:.25s;position:relative;overflow:hidden;
}
.feat:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--cyan)}
.ficon{
  width:54px;height:54px;border-radius:15px;display:grid;place-items:center;
  margin-bottom:18px;font-size:27px;color:var(--color-primary-strong);
  background:linear-gradient(135deg,#E0F5FD,#CCE9F6);
}
.feat h3{font-size:18px;font-weight:800;margin-bottom:10px;color:var(--navy)}
.feat p{font-size:14px;color:var(--sub);line-height:1.75}
.feat p b,.feat p strong{color:var(--navy)}
.feat .more{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-size:13.5px;font-weight:700;color:var(--color-primary-strong)}
.feat.hl{background:var(--grad-hero);color:#fff;border:none}
.feat.hl .ficon{background:rgba(255,255,255,.16);color:#fff}
.feat.hl h3{color:#fff}
.feat.hl p{color:#d3e8f6}
.feat.hl .more{color:#9fe2ff}
.feat .tag{
  display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:11px;font-weight:700;letter-spacing:.04em;
  /* 11px の太字は AA の「大きな文字」に当たらないので 4.5:1 が要る。
     #9a6a00 は #FFF7E6 上で 4.44:1 と僅かに不足していた。#8A5A00 で 5.56:1 */
  padding:5px 11px;border-radius:999px;background:#FFF7E6;color:#8A5A00;border:1px solid #ffe1a3;
}

/* ───── Flow steps ───── */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:44px}
@media(max-width:760px){.flow{grid-template-columns:1fr 1fr}}
@media(max-width:440px){.flow{grid-template-columns:1fr}}
/* グリッド項目は既定が min-width:auto なので、長い語があるとトラック幅を超えて広がる */
.flow-step{min-width:0;position:relative;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:28px 18px 22px;text-align:center;transition:.25s}
.flow-step:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--cyan)}
.flow-ic{width:60px;height:60px;border-radius:50%;margin:0 auto 14px;display:grid;place-items:center;font-size:28px;color:var(--blue);background:linear-gradient(135deg,#E0F5FD,#CCE9F6)}
.flow-step h3{font-size:15.5px;font-weight:800;color:var(--navy);margin-bottom:7px}
.flow-step p{font-size:12.5px;color:var(--sub);line-height:1.65}
.flow-step .stepn{position:absolute;top:12px;left:14px;font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--color-primary-strong);background:#E0F5FD;border-radius:7px;padding:2px 8px}
/* フロー矢印：塗りつぶし三角（border ハックは使わない） */
.flow.seq .flow-step:not(:last-child)::after{content:"";position:absolute;top:50%;right:-13px;width:12px;height:12px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M0 0.5 L11 6 L0 11.5 z' fill='%2300A0E9'/%3E%3C/svg%3E") no-repeat center/contain;transform:translateY(-50%);z-index:2}
@media(max-width:760px){.flow.seq .flow-step:not(:last-child)::after{display:none}}

/* ───── Callout ───── */
.callout{
  display:flex;gap:18px;background:#FFF8E8;border:1px solid #FFE2A8;border-left:5px solid var(--orange);
  border-radius:var(--radius-sm);padding:22px 24px;margin-top:30px;
}
.callout .cic{font-size:26px;flex-shrink:0;color:var(--orange)}
.callout h3{font-size:16px;font-weight:800;color:#8a5a00;margin-bottom:6px}
.callout p{font-size:14px;color:#6b4e1a;line-height:1.7}
.callout.info{background:#EAF7FF;border-color:#BFE6FA;border-left-color:var(--blue)}
.callout.info .cic{color:var(--blue)}
.callout.info h3{color:var(--navy)}
.callout.info p{color:var(--sub)}

/* ───── 数値の注記（脚注） ───── */
sup.fn{font-size:11px;color:var(--color-primary-strong);font-weight:700}
.footnotes{
  margin-top:36px;background:var(--card);border:1px dashed var(--border);border-radius:var(--radius-sm);
  padding:18px 22px;font-size:12.5px;color:var(--sub);line-height:1.8;
}
.footnotes p{margin:0 0 4px}
.footnotes p:last-child{margin-bottom:0}
.phero + .wrap .footnotes,.section-alt .footnotes{background:#fff}

/* ───── Tables ───── */
/* 表は 1.4.10 の例外（二次元レイアウトが必要）だが、ページ全体を横スクロールさせるのは不可。
   狭い幅では表そのものを横スクロールさせる。 */
@media(max-width:560px){.tbl{display:block;overflow-x:auto}}
.tbl{width:100%;border-collapse:collapse;margin:34px 0 0;font-size:14px;overflow:hidden;border-radius:12px;border:1px solid var(--border);background:var(--card)}
.tbl th{background:#EAF7FF;color:var(--navy);font-weight:700;text-align:left;padding:12px 16px;font-size:13px}
.tbl td{padding:12px 16px;border-top:1px solid var(--border);vertical-align:top}
.tbl tr:nth-child(even) td{background:#F7FCFE}
.tbl-scroll{overflow-x:auto}
.tbl-scroll .tbl{min-width:560px}

/* ───── Checklist（こんな課題は…） ───── */
.check-list{list-style:none;margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:760px){.check-list{grid-template-columns:1fr}}
.check-list li{
  display:flex;align-items:flex-start;gap:12px;background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:16px 18px;font-size:14.5px;font-weight:600;color:var(--navy);
}
/* 以下の svg.ic は全て aria-hidden の装飾。同じリスト内の全項目に同じアイコンが付き、
   意味は隣接する本文が担っているため WCAG 1.4.11 の対象外。--color-primary のまま残す
   （明るい面で 2.3〜2.9:1 だが、情報を担っていないので基準の適用外）。 */
.check-list li svg.ic{color:var(--blue);font-size:20px;margin-top:2px}

/* ───── FAQ ───── */
.faq{max-width:820px;margin:44px auto 0}
.qa{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:12px;overflow:hidden}
.qa summary{
  cursor:pointer;padding:20px 24px;font-weight:700;font-size:15.5px;color:var(--navy);
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:'＋';color:var(--color-primary-strong);font-size:20px;transition:.2s;flex:none}
.qa[open] summary::after{content:'－'}
.qa .ans{padding:0 24px 22px;font-size:14px;color:var(--sub);line-height:1.8}
.qa .ans b{color:var(--navy)}

/* ───── Steps（番号付き） ───── */
.steps{list-style:none;counter-reset:s;margin:30px 0 0;padding:0}
.steps li{counter-increment:s;position:relative;padding:4px 0 18px 46px;font-size:14.5px}
.steps li::before{content:counter(s);position:absolute;left:0;top:2px;width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;font-weight:800;font-size:13px;display:grid;place-items:center}
.steps li:not(:last-child)::after{content:'';position:absolute;left:14.5px;top:34px;bottom:0;width:1.5px;background:var(--border)}
.steps li b{color:var(--navy)}

/* ───── 料金 ───── */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px;align-items:stretch}
@media(max-width:860px){.price-grid{grid-template-columns:1fr}}
.price{
  background:var(--card);border:1.5px solid var(--border);border-radius:var(--radius);padding:30px 26px;
  display:flex;flex-direction:column;transition:.25s;position:relative;
}
.price:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.price.rec{border-color:var(--blue)}
.price .badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--blue);color:#04203b;font-size:11.5px;font-weight:800;padding:4px 14px;border-radius:999px;white-space:nowrap}
.price h3{font-size:17px;font-weight:800;color:var(--navy)}
.price .for{font-size:12.5px;color:var(--sub);font-weight:600;margin:4px 0 16px}
.price .amount{font-size:30px;font-weight:800;color:var(--navy);line-height:1.1}
.price .amount small{font-size:13px;color:var(--sub);font-weight:600}
.price ul{list-style:none;margin:18px 0 0;flex:1}
.price li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;padding:6px 0;border-bottom:1px solid var(--bg)}
.price li svg.ic{color:var(--blue);font-size:17px;margin-top:3px}
.price li:last-child{border-bottom:none}

/* ───── メンバー ───── */
.members{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
@media(max-width:960px){.members{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.members{grid-template-columns:1fr}}
.member{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:26px 22px;text-align:center;transition:.25s}
.member:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.member .avatar{
  width:96px;height:96px;border-radius:50%;margin:0 auto 16px;display:grid;place-items:center;
  background:var(--grad-hero);color:#fff;font-size:30px;font-weight:800;font-family:'Manrope',sans-serif;
  overflow:hidden;
}
.member .avatar img{width:100%;height:100%;object-fit:cover}
.member .role{font-size:11.5px;font-weight:800;letter-spacing:.08em;color:var(--color-primary-strong);text-transform:uppercase}
.member h3{font-size:17px;font-weight:800;color:var(--navy);margin:4px 0 10px}
.member p{font-size:12.5px;color:var(--sub);line-height:1.75;text-align:left}

/* ───── News ───── */
.news-tabs{display:flex;gap:10px;justify-content:center;margin-top:36px;flex-wrap:wrap}
.news-tabs .tab{
  display:inline-flex;align-items:center;gap:8px;padding:10px 22px;border-radius:999px;font-weight:700;font-size:14px;
  cursor:pointer;border:1.5px solid var(--border);background:var(--card);color:var(--navy);transition:.2s;
}
.news-tabs .tab.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.news-list{max-width:860px;margin:40px auto 0}
.news-item{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:14px;overflow:hidden;scroll-margin-top:90px}
.news-item summary{cursor:pointer;padding:20px 24px;list-style:none;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.news-item summary::-webkit-details-marker{display:none}
.news-item .date{font-size:13px;color:var(--sub);font-weight:600;font-family:'Manrope',sans-serif;flex:none}
.news-item .cat{flex:none;font-size:11px;font-weight:800;padding:3px 12px;border-radius:999px;letter-spacing:.04em}
.cat.notice{background:#E0F5FD;color:#0073a8}
.cat.press{background:#0B2A5B;color:#fff}
/* 11px の太字は AA の「大きな文字」（太字 18.66px 以上）に当たらないので 4.5:1 が要る。
   #b06400 は #FFF1E6 の上で 4.06:1 だったため #8A4E00（5.99:1）にする。 */
.cat.column{background:#FFF1E6;color:#8A4E00}
.news-item .ttl{font-size:15px;font-weight:700;color:var(--navy);flex:1 1 300px}
.news-item summary:hover .ttl{color:var(--color-primary-strong)}
.news-item .body{padding:4px 24px 26px;font-size:14.5px;color:var(--text);line-height:1.95;border-top:1px solid var(--bg)}
.news-item .body p{margin:14px 0 0}
.news-item .body h3{font-size:15.5px;font-weight:800;color:var(--navy);margin:22px 0 0}
.news-item .body .note{font-size:12.5px;color:var(--sub)}
/* トップページ用ミニリスト */
.news-mini{max-width:820px;margin:36px auto 0;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.news-mini a{display:flex;align-items:baseline;gap:14px;padding:18px 24px;border-bottom:1px solid var(--bg);transition:.15s;flex-wrap:wrap}
.news-mini a:last-child{border-bottom:none}
.news-mini a:hover{background:#F7FCFE}
.news-mini .ttl{font-size:14.5px;font-weight:700;color:var(--navy);flex:1 1 300px}
.news-mini a:hover .ttl{color:var(--color-primary-strong)}

/* ───── Forms ───── */
.form-card{max-width:760px;margin:44px auto 0;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:40px 40px 44px}
@media(max-width:560px){.form-card{padding:28px 20px 32px}}
.form-row{margin-bottom:22px}
.form-row label{display:block;font-size:14px;font-weight:700;color:var(--navy);margin-bottom:8px}
.form-row .req{display:inline-block;background:#FEF2F2;color:#c0392b;font-size:10.5px;font-weight:700;padding:1px 8px;border-radius:6px;border:1px solid #FECACA;margin-left:8px;vertical-align:middle}
.form-row .opt{display:inline-block;background:#F2FBFE;color:var(--sub);font-size:10.5px;font-weight:700;padding:1px 8px;border-radius:6px;border:1px solid var(--border);margin-left:8px;vertical-align:middle}
.form-row input,.form-row select,.form-row textarea{
  width:100%;padding:13px 16px;border:1.5px solid var(--border);border-radius:11px;font-size:15px;
  font-family:inherit;color:var(--text);background:#FBFEFF;transition:.15s;
}
/* 入力欄の枠線は操作部品の境界なので 3:1 が要る。地が #fff で
   --color-primary は 2.91:1 のため --color-primary-strong（6.92:1）にする */
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{border-color:var(--color-primary-strong);background:#fff}
.form-row textarea{min-height:130px;resize:vertical}
.form-consent{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--sub);margin:26px 0}
.form-consent input{width:18px;height:18px;margin-top:3px;accent-color:var(--blue)}
.form-consent a{color:var(--color-primary-strong);font-weight:700;border-bottom:1px solid rgba(0,160,233,.35)}

.form-error{background:#FEF2F2;border:2px solid #B42318;border-radius:12px;padding:16px 20px;margin-bottom:24px}
.form-error strong{display:block;font-size:15px;font-weight:800;color:#8A1B12;margin-bottom:6px}
.form-error ul{list-style:none;margin:0}
.form-error li{font-size:14px;color:#8A1B12;line-height:1.8;padding-left:16px;position:relative}
.form-error li::before{content:\;position:absolute;left:0;top:12px;width:6px;height:6px;border-radius:50%;background:#B42318}

/* ───── 共通CTA ───── */
.cta-band{padding:0 0 96px}
section + .cta-band{padding-top:0}
.cta{background:var(--card);border-radius:28px;padding:60px 40px;text-align:center;box-shadow:var(--shadow-lg);border:1px solid var(--border);position:relative;overflow:hidden}
.cta::after{content:"";position:absolute;right:-44px;bottom:-52px;width:280px;height:216px;
  background:url(dragonfly.svg) no-repeat center/contain;opacity:.07;
  transform:rotate(-18deg);pointer-events:none}
.cta>*{position:relative;z-index:2}
.cta h2{font-size:clamp(24px,3.6vw,36px);font-weight:800;color:var(--navy);margin-bottom:14px}
.cta p{color:var(--sub);max-width:600px;margin:0 auto 30px;font-size:15.5px}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
@media(max-width:560px){.cta{padding:44px 24px;border-radius:22px}}

/* ───── Footer ───── */
footer.site{background:var(--navy-deep);color:#9fb8d6;padding:60px 0 40px;font-size:13px}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:36px;margin-bottom:44px}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr}}
/* 以前はカラーのロゴを filter:brightness(0) invert(1) で真っ白に潰していたが、
   複眼のグラデーションが完全に失われていた。白版の素材ができたのでハックを外す。
   opacity:.92 は残す（暗い地で白が強すぎるのを和らげるため）。
   高さは 28px → 38px。ヘッダーと同じ理由で、新ロゴは同じ高さだと文字が小さくなる。 */
.foot-brand img{height:38px;width:auto;opacity:.92;margin-bottom:16px}
.foot-brand p{font-size:12.5px;line-height:1.8}
.foot-col h3{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#7FE3FF;margin-bottom:14px}
.foot-col a{display:block;padding:5px 0;font-size:13px;color:#cfe6f5;opacity:.85;transition:.15s}
.foot-col a:hover{opacity:1;color:#7FE3FF}
.foot-bottom{border-top:1px solid rgba(159,184,214,.2);padding-top:24px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12px;opacity:.75}

/* ───── Reveal ───── */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease,filter .25s ease,box-shadow .25s ease,border-color .25s ease;will-change:opacity,transform}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important;transition:none}}

/* ───── Dark page（複雑系アプローチ等） ───── */
body.dark{--bg:#071A3A;--card:rgba(255,255,255,.045);--text:#EAF4FB;--sub:#C9D4E5;
  --border:rgba(120,190,240,.28);--shadow:0 18px 50px rgba(0,0,0,.4);--shadow-lg:0 24px 60px rgba(0,0,0,.5)}
body.dark header.site{background:rgba(7,26,58,.88)}
body.dark .nav-links>a,body.dark .nav-item-btn{color:#dbe9f7}
body.dark .nav-links>a:hover,body.dark .nav-links>a.active,body.dark .nav-item-btn:hover,body.dark .nav-item.active .nav-item-btn{color:var(--cyan)}
body.dark .nav-links>a.active,body.dark .nav-item.active .nav-item-btn{box-shadow:inset 0 -2px 0 var(--cyan)}
body.dark .nav-toggle{color:#dbe9f7}
body.dark .nav-links.open{background:#0B2A5B}
/* body.dark で .nav-login の文字色だけを明るい色に上書きしていたが、背景は基底の
   #E8F2FB（明るい水色）のままだったため 1.31:1 になっていた。上書きを消して
   共通定義（#E8F2FB 地に濃紺文字 = 14.03:1）に戻す。
   淡いブルーの錠剤はダークヘッダーの上でも成立するので、ここに変種は要らない。 */
/* パンくずは基底で --color-text-muted（#41616F）を使うが、濃紺地では 2.60:1 になる。
   暗い面用に明るい色へ差し替える（#C9D4E5 = 11.52:1、現在地 #EAF4FB = 15.46:1）。 */
body.dark .breadcrumb a,body.dark .breadcrumb li:not(:first-child)::before{color:#C9D4E5}
body.dark .breadcrumb a:hover{color:var(--cyan)}
body.dark .breadcrumb [aria-current="page"]{color:#EAF4FB}
body.dark .nav-cta2{background:rgba(255,255,255,.08);color:#fff!important;border-color:rgba(255,255,255,.38)}
body.dark .nav-cta2:hover{border-color:var(--cyan);color:var(--cyan)!important}
/* ダークヘッダーでもDropdownは不透明・高コントラストを保つ */
body.dark .sub-menu{background:#0E2E5E;border-color:rgba(150,205,245,.34)}
body.dark .sub-menu a{color:#EAF4FB}
body.dark .sub-menu a:hover,body.dark .sub-menu a:focus-visible{background:rgba(255,255,255,.1);color:var(--cyan)}
@media(max-width:980px){body.dark .nav-links.open .sub-menu{background:none}}
body.dark h2.section-title{color:#fff}
body.dark .feat{backdrop-filter:blur(6px)}
body.dark .feat h3{color:#fff}
body.dark .feat p{color:var(--sub)}
/* 明るい面用の色が暗いカードにそのまま乗っていた。地 #122442 に対して
   .feat p strong が 1.10:1、sup.fn が 2.24:1。暗い面用に置き換える。 */
body.dark .feat p b,body.dark .feat p strong{color:#fff}
body.dark .feat sup.fn,body.dark .feat sup.fn a{color:#9FE6FF}
body.dark .ficon{background:rgba(0,160,233,.12);border:1px solid var(--border);color:var(--cyan)}
body.dark .footnotes{background:rgba(255,255,255,.04);color:var(--sub)}
body.dark .cta{background:rgba(255,255,255,.05);border-color:var(--border);backdrop-filter:blur(6px)}
body.dark .cta h2{color:#fff}
body.dark .btn-navy{background:linear-gradient(100deg,var(--blue),var(--cyan));color:#04203b}
body.dark .btn-line{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.3)}

/* ───── スマホ最適化 ───── */
@media(max-width:560px){
  .wrap{padding:0 20px}
  body{font-size:15px}
  section{padding:72px 0}
  .phero{padding:56px 0 64px}
  .btn{padding:13px 22px;font-size:14px}
  .section-lead{font-size:15px}
  .feat{padding:24px 20px}
  .callout{padding:18px;gap:13px}
  .qa summary{padding:17px 18px;font-size:14.5px}
  .qa .ans{padding:0 18px 18px}
  .flow-step{padding:24px 16px 18px}
}

/* ───── 共通ユーティリティ（改修 v1 で追加） ───── */
/* 数値の直下に置く注記：11〜12px・#4B5563以上の濃さ */
.note{font-size:12px;line-height:1.75;color:var(--note)}
body.dark .note{color:#BCCBDD}
/* テキストリンク（ボタンにしないCTA）：矢印は使わず、常時下線でリンクと分かるようにする */
.tlink{display:inline-flex;align-items:baseline;gap:4px;font-size:15px;font-weight:700;
  color:var(--color-primary-strong);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:4px;transition:.2s}
.tlink:hover,.tlink:focus-visible{text-decoration-thickness:2.5px;color:var(--navy)}
.chev{font-size:.8em;line-height:1}
/* ボタン内の矢印は装飾。リンクテキストは常時下線でリンクと分かるようにする */
.btn .chev{font-size:.9em}
body.dark .tlink{color:var(--cyan)}
body.dark .tlink:hover{color:#fff}
/* ブラウザフレーム付きのプロダクト画面 */
.browser{border-radius:14px;overflow:hidden;background:#0E1B33;border:1px solid rgba(255,255,255,.16);box-shadow:var(--shadow-lg)}
.browser .bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#16294a;border-bottom:1px solid rgba(255,255,255,.1)}
.browser .bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.28);display:block}
.browser .bar .u{margin-left:10px;flex:1;height:16px;border-radius:999px;background:rgba(255,255,255,.1)}
.browser img{width:100%;display:block;background:#fff}
.browser.light{background:#fff;border-color:var(--border)}
.browser.light .bar{background:#EAF3FA;border-bottom-color:var(--border)}
.browser.light .bar i{background:#c3d6e4}
.browser.light .bar .u{background:#d8e7f2}
/* 大数字 */
.bignum{font-family:'Manrope',sans-serif;font-weight:800;line-height:1;color:var(--color-primary-strong);font-size:clamp(46px,7vw,64px)}
.bignum small{font-size:.42em;font-weight:800}
/* ───── ACWR比較表（partials/acwr.html） ───── */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.acwr{max-width:900px;margin:44px auto 0}
.acwr h3{font-size:clamp(20px,2.6vw,24px);font-weight:800;color:var(--navy);line-height:1.55;margin-bottom:14px}
.acwr-lead{font-size:16px;color:var(--sub);line-height:1.9;max-width:var(--readw)}
.acwr-tblwrap{margin-top:26px}
.acwr-tbl{width:100%;border-collapse:collapse;background:var(--card);
  border:1px solid var(--border);border-radius:12px;overflow:hidden}
.acwr-tbl th,.acwr-tbl td{padding:16px 18px;text-align:left;vertical-align:top;
  border-top:1px solid var(--border);font-size:15px;line-height:1.75}
.acwr-tbl thead th{background:#EAF7FF;color:var(--navy);font-weight:800;font-size:14px;border-top:none}
.acwr-tbl tbody th{color:var(--navy);font-weight:800;white-space:nowrap}
.acwr-tbl tbody th span{display:block;font-size:13px;font-weight:700;color:var(--sub)}
.acwr-tbl td{color:#3A5A6B}
/* 数値の差は色ではなく、太さと下線で示す */
.acwr-tbl td b{color:var(--navy);font-size:19px;border-bottom:3px solid var(--blue);padding-bottom:2px}
.acwr-read{margin-top:18px;font-size:16px;color:#33566B;line-height:1.9;max-width:var(--readw)}
.acwr-read + .acwr-read{margin-top:10px}
.acwr-details{margin-top:24px;border:1px solid var(--border);border-radius:12px;background:var(--card)}
.acwr-details summary{cursor:pointer;padding:16px 20px;font-size:15px;font-weight:700;color:var(--navy)}
.acwr-details-body{padding:0 20px 20px}
.acwr-mx-h{font-size:14px;font-weight:800;color:var(--navy);margin-bottom:8px}
.acwr-mx{list-style:none;margin:0}
.acwr-mx li{font-size:14.5px;color:#3A5A6B;line-height:1.85;padding:5px 0 5px 16px;position:relative}
.acwr-mx li::before{content:"";position:absolute;left:0;top:14px;width:6px;height:6px;border-radius:50%;background:var(--blue)}
.acwr-calc{margin-top:12px;font-family:'Manrope',sans-serif;font-size:15px;font-weight:700;color:var(--navy);line-height:1.9}
.acwr-notes{list-style:none;margin:22px 0 0}
.acwr-notes li{font-size:12.5px;color:var(--note);line-height:1.85;padding:3px 0}
@media(max-width:760px){
  /* SPは横スクロールではなく縦積みカードに切り替える */
  .acwr-tbl,.acwr-tbl tbody,.acwr-tbl tr,.acwr-tbl td,.acwr-tbl th{display:block;width:100%}
  .acwr-tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .acwr-tbl{border:none;background:none}
  .acwr-tbl tr{background:var(--card);border:1px solid var(--border);border-radius:12px;
    padding:16px 18px;margin-bottom:14px}
  .acwr-tbl th,.acwr-tbl td{border-top:none;padding:6px 0}
  .acwr-tbl tbody th{font-size:17px}
  .acwr-tbl td[data-label]::before{content:attr(data-label) "：";font-weight:800;color:var(--navy)}
}

/* 動きを減らす設定のときは、全てのアニメーション・トランジションを停止する */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  html{scroll-behavior:auto}
}

/* フォーカスリング：黄＋黒の2重リング（どの背景色の上でも視認できる） */
:focus-visible{outline:2px solid #1A1A1C;outline-offset:0;box-shadow:0 0 0 4px #FFDF3F;border-radius:3px}
.btn:focus-visible,.nav-cta:focus-visible,.nav-cta2:focus-visible{border-radius:999px}
/* 点と線のネットワーク背景（assets/netbg.js が描画） */
canvas.netbg{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0}
.has-net{position:relative;overflow:hidden}
.has-net > .wrap{position:relative;z-index:2}

/* ───── 横スクロールの発生源を作らない（overflow-x:hidden で隠さない） ───── */
.wrap,.hero-grid,.hero-vis,.hero-offer,.split,.about-grid,.why-fig,.proof,.sources{min-width:0}
.hero-photo img,.about-photo img,.an-photo img,.pf-photo img{max-width:100%}