/* forcenet.jp トップ専用スタイル — DESIGN.md の canonical プロファイルの実装。
   site.css の後に読み込み、body.home の配下だけに効く。他のページでは読み込まない。
   トークン値は DESIGN.md frontmatter の colors / typography と一致させる（scripts/check-design-tokens.py で照合）。 */

body.home {
  /* canonical: 濃色の地を深紺へ。site.css の :root を body で上書きするため、ヒーロー・フッター・メガメニューに伝播する */
  --navy-950: #070B24;
  --navy-800: #0E1440;
  --blue-700: #1A2888;   /* ロゴの濃紺（固定） */
  --brand-blue: #4880C2; /* ロゴの浅いブルー（固定）。光の源 */
  --sky: #7FC4F0;
  --amber: #F7A600;      /* 小面積のみ */
  --paper: #F4F6FB;
  --white: #FBFCFE;
  --ink: #131A3A;
  --ink-sub: #4B5478;
  --ink-3: #7C86AB;
  --line: #DDE3F0;
  --hero-lead: #C3CCEA;
  --hero-label: #9DB4EA;
  --display: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --radius-card: 12px;
}

/* ---------- 見出し: display 書体を中太で。強調は最後の phrase だけ太く ---------- */
body.home h1,
body.home h2 {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: .01em;
}
body.home h2 .phrase:last-child { font-weight: 700; }
body.home .svc-title,
body.home .aud-card h3 {
  font-family: var(--display);
  font-weight: 700;
}

/* ---------- ヒーロー（オーロラ） ---------- */
.aurora-hero {
  position: relative;
  overflow: hidden;
  background: var(--navy-950);
  color: #fff;
}
.aurora-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* WebGL が使えない・初期化に失敗した時の静止画（JS が is-static を付ける）。reduced-motion も JS 側で1フレームだけ描く */
.aurora-hero.is-static::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 90% at 88% 85%, rgba(72, 128, 194, .78), transparent 70%),
    radial-gradient(45% 55% at 62% 100%, rgba(127, 196, 240, .38), transparent 70%),
    radial-gradient(30% 40% at 96% 40%, rgba(26, 40, 136, .9), transparent 70%),
    var(--navy-950);
}
.ah-inner {
  position: relative;
  z-index: 2;
  max-width: 1160px;
  margin: 0 auto;
  padding: 88px 24px 64px;
}
.ah-eyebrow {
  margin: 0 0 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .2em;
  color: #9DB4EA;
}
.aurora-hero h1 {
  margin: 0 0 22px;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.32;
  max-width: 22em;
  color: #fff;
}
.aurora-hero h1 b { font-weight: 700; }
.ah-lead {
  margin: 0;
  max-width: 36em;
  font-size: 15.5px;
  line-height: 2;
  color: #C3CCEA;
}
.ah-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 32px;
}
.ah-pill {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  padding: 13px 24px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  transition: transform .18s ease-out, box-shadow .18s ease-out;
}
.ah-pill small {
  font-size: 11px;
  font-weight: 500;
  opacity: .75;
  margin-top: 3px;
}
.ah-pill-p { background: #fff; color: var(--navy-950); }
.ah-pill-s { border: 1px solid rgba(255, 255, 255, .4); color: #fff; }
.ah-pill:hover,
.ah-pill:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, .28); }
.ah-third {
  margin: 16px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 12.5px;
  color: #C3CCEA;
}
.ah-third a {
  color: #C3CCEA;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.ah-third a.ah-third-fde { color: #fff; font-weight: 700; }
.ah-dims {
  margin: 56px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  display: flex;
}
.ah-dim {
  padding-right: 32px;
  margin-right: 32px;
  border-right: 1px solid rgba(255, 255, 255, .14);
}
.ah-dim:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.ah-dim dt {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  color: #9DB4EA;
}
.ah-dim dd {
  margin: 0;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.ah-dim .num {
  font-family: var(--display);
  font-size: 30px;
  font-weight: 700;
}
.ah-dim .unit { font-size: 13px; font-weight: 700; margin-left: 2px; }
.ah-dim sup { font-size: 9px; color: #9DB4EA; margin-left: 2px; }
.ah-note { margin: 8px 0 0; font-size: 11px; color: #8A97C4; }

@media (max-width: 720px) {
  .ah-inner { padding: 48px 20px 40px; }
  .aurora-hero h1 { line-height: 1.38; }
  .ah-lead { font-size: 14px; line-height: 1.9; }
  .ah-pill { width: 100%; align-items: center; }
  .ah-dims { margin-top: 36px; }
  .ah-dim { padding-right: 14px; margin-right: 14px; }
  .ah-dim dt { font-size: 9px; letter-spacing: .06em; }
  .ah-dim .num { font-size: 24px; }
}

/* ---------- 製品ファミリー帯: ヒーローの深紺に続ける ---------- */
body.home .belt { border-top: 1px solid rgba(255, 255, 255, .12); }

/* ---------- カード: 図版を置かない。番号ラベルと見出しだけ ---------- */
body.home .svc-card,
body.home .aud-card { border-radius: var(--radius-card); }
body.home .svc-index,
body.home .aud-index {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  color: var(--blue-700);
}
body.home .svc-index .terminal,
body.home .aud-index .terminal { width: 8px; height: 8px; }
body.home .svc-body { padding: 24px 24px 24px; }
body.home .svc-title { font-size: 19px; }
body.home .svc-card-fde .svc-index,
body.home .aud-card-fde .aud-index { color: var(--amber-hover, #F7A600); filter: brightness(.85); }

/* できること: FDE のカードを強調 */
body.home .svc-card-fde,
body.home .aud-card-fde {
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px rgba(72, 128, 194, .14), var(--shadow);
}
body.home .services .sec-lead { margin: 0 0 4px; }

/* 相談窓口: 4枚 */
body.home .aud-cards {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 1080px) {
  body.home .aud-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  body.home .aud-cards { grid-template-columns: 1fr; }
}

/* reduced-motion: ホバーの持ち上げも止める */
@media (prefers-reduced-motion: reduce) {
  .ah-pill { transition: none; }
  .ah-pill:hover, .ah-pill:focus-visible { transform: none; }
}

/* ---------- 製品帯: 深紺にしてヒーローと一続きにする（ヘッダーの深紺化は site.css の共通部品側） ---------- */
body.home .belt {
  background: var(--navy-950);
  border-bottom: 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
body.home .belt-label { color: #9DB4EA; border-right-color: rgba(255, 255, 255, .18); }
body.home .belt .chip {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .18);
  color: #fff;
}
body.home .belt .chip svg { color: #9DB4EA; }
body.home .belt .chip:hover { border-color: #fff; color: #fff; }

/* ---------- カードのアクセント: 上端に細いオーロラの帯を1本。図版ではなく統一感のための印 ---------- */
body.home .svc-card,
body.home .aud-card { --hx: 70%; --hc: 127, 196, 240; }
body.home .svc-card::before,
body.home .aud-card::before {
  content: "";
  display: block;
  flex: 0 0 10px;
  height: 10px;
  background:
    radial-gradient(38% 160% at var(--hx) 100%, rgba(var(--hc), .95), transparent 70%),
    linear-gradient(to right, #0E1440, #1A2888 40%, #4880C2 75%, #0E1440);
}
body.home .svc-cards li:nth-child(1) .svc-card { --hx: 28%; }
body.home .svc-cards li:nth-child(2) .svc-card { --hx: 58%; --hc: 200, 232, 250; }
body.home .svc-cards li:nth-child(3) .svc-card { --hx: 82%; --hc: 247, 166, 0; }
body.home .aud-cards li:nth-child(1) { --hx: 22%; }
body.home .aud-cards li:nth-child(2) { --hx: 46%; --hc: 200, 232, 250; }
body.home .aud-cards li:nth-child(3) { --hx: 68%; }
body.home .aud-cards li:nth-child(4) { --hx: 86%; --hc: 247, 166, 0; }

/* ---------- 製品ラインアップ・導入事例: 深紺の面にして、中の紺のパネルが浮かないようにする（サク指示 2026-09-02） ---------- */
body.home .products,
body.home .cases {
  background-color: var(--navy-950);
  background-image: none;
  color: #fff;
}
body.home .products h2,
body.home .cases h2 { color: #fff; }
body.home .products .sec-lead,
body.home .cases .sec-lead,
body.home .products .svm-note,
body.home .products .pf-note { color: #C3CCEA; }
body.home .products .sec-eyebrow,
body.home .cases .sec-eyebrow { color: #9DB4EA; }
/* 白い事例カードの中は本文色に戻す */
body.home .case-body { color: var(--ink); }
/* 紺の上の紺のパネルは、縁を1本だけ引いて面を分ける */
body.home .svc-map-panel,
body.home .svc-map > div,
body.home .case-card {
  border: 1px solid rgba(255, 255, 255, .14);
}
body.home .case-card { box-shadow: 0 8px 24px rgba(0, 0, 0, .28); }
body.home .products .pf-cat::before,
body.home .products .pf-node::after { background: rgba(255, 255, 255, .22); }
body.home .cases { border-top: 1px solid rgba(255, 255, 255, .10); }
body.home .products .pf-other-head { color: #9DB4EA; }
body.home .products .pf-other-head .terminal { border-color: #9DB4EA; }
/* 「このほかの自社製品」は白カードの外（紺の上）にあるので文字を明るく */
body.home .pf-other-list a { color: #fff; }
body.home .pf-other-list a:hover { color: #9DB4EA; }
body.home .pf-other-list span,
body.home .pf-other-list small,
body.home .pf-other-list p { color: #C3CCEA; }
body.home .pf-other { border-top-color: rgba(255, 255, 255, .14); }
body.home .pf-other-list a:hover { background: rgba(255, 255, 255, .08); }
body.home .pf-other-list a:hover .pf-other-name { color: #fff; }
/* 製品ラインアップ末尾のCTA: 深紺の上では白のピル（canonical。琥珀の面は使わない） */
body.home .pf-cta .plate-primary {
  background: #fff;
  color: var(--navy-950);
  border-radius: 999px;
  box-shadow: none;
}
body.home .pf-cta .plate-primary:hover { background: #E8EDFB; }

/* ---------- 製品ラック: 白のまま浮かせない。上端の帯を紺のベゼルにして深紺の面と接続し、下は濃い影で面に沈める ---------- */
body.home .pf-rack {
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45), 0 2px 0 rgba(255, 255, 255, .06);
  color: var(--ink);
}
body.home .pf-rack-head {
  background: var(--navy-800);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
body.home .pf-plate {
  color: #9DB4EA;
  background: transparent;
  border-color: rgba(255, 255, 255, .28);
}
body.home .pf-cat-name { color: #fff; }
body.home .pf-count { color: #9DB4EA; }
body.home .pf-portal { color: #C3CCEA; }
body.home .pf-portal:hover { color: #fff; }
/* 幹線とノードは深紺の上で見える色に */
body.home .pf-node { background: var(--navy-950); border-color: rgba(255, 255, 255, .5); }