/* ==== Base =================================================== */
html { scroll-behavior: auto; }   /* GSAP ScrollTo と競合させない */
body {
  margin: 0;
  color: #fff;
  /* 本文はシステム優先、日本語はNotoにフォールバック */
  font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", Meiryo, "Noto Sans JP", sans-serif;
  font-weight: 400;               /* デフォは400に統一 */
  line-height: 1.6;
}

/* 見出し・強調（Inter 700/900のみ使用） */
.fw-700, .noto-sans-bold { 
  font-family: Inter, system-ui, -apple-system, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; 
  font-weight: 700;
}
.fw-900 { 
  font-family: Inter, system-ui, -apple-system, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; 
  font-weight: 900;
}
/* 必要なら中間ウェイト */
.fw-600 { font-weight: 600; }

/* 見出しタグはクラス優先。タグの一括強制は外す（太さ過多ロード防止） */
/* h1,h2,h3,strong,b { font-weight: 800; }  ← 削除 */

/* ==== Background / Hero ====================================== */
.hero-bg {
  background: radial-gradient(120% 120% at 50% 40%, #0109a7 0%, #0b49d7 40%, #062a90 80%);
}

.hero-grid {
  position: absolute; inset: 0; pointer-events: none;
  opacity: .35;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.18) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 1px, transparent 1px 80px);
}

/* 常時固定の薄いグリッド（必要な場合のみ使う） */
.line-grid {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: .06; mix-blend-mode: soft-light;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.8) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.8) 0 1px, transparent 1px 80px);
}

/* エッジフェード（重くないマスク） */
.edge-fade {
  -webkit-mask-image: radial-gradient(120% 120% at 50% 40%, black 60%, transparent 100%);
          mask-image: radial-gradient(120% 120% at 50% 40%, black 60%, transparent 100%);
}

/* ==== Header ================================================== */
header#site-header {
  position: absolute; top: 0; width: 100%; z-index: 50;
  border-bottom: 1px solid transparent; background: transparent;
}
header#site-header.scrolled { position: sticky; border-color: rgba(15,23,42,.12); }

.header-invert { color: #fff; }
.header-invert a { color: inherit; }
.btn-invert, .btn-menu {
  color: inherit; border: 1px solid currentColor; background: transparent; transition: .2s ease;
}
#site-header.scrolled .header-invert { color: #0f172a; }
#site-header.scrolled .btn-invert { color: #fff; border-color: transparent; background: #0109a7; }
#site-header.scrolled .btn-invert:hover { background: #1d4ed8; }
#site-header.scrolled .btn-menu { color: #0f172a; border-color: rgba(15,23,42,.2); background: rgba(15,23,42,.04); }

/* ==== Cards / Buttons ======================================== */
.card-hover { transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease; }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(2,6,23,.12); }

.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after {
  content: ""; position: absolute; inset: -20% -40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  animation: shine 2.8s linear infinite;
}
@keyframes shine {
  0% { transform: translateX(-150%) skewX(-20deg); }
  100%{ transform: translateX(150%)  skewX(-20deg); }
}

/* ==== KPI ===================================================== */

/* 数字の揺れ止め＋描画負荷を分離 */
.kpi-num{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  line-height: 1;
  display: block;
  min-height: 0.9em;            /* 数字更新中も高さ固定 → レイアウト不安定化を防止 */
  will-change: contents;         /* 文字だけ変わることを宣言 */
  backface-visibility: hidden;
  transform: translateZ(0);      /* 軽いGPUヒント（2D） */
}

/* KPIカードは内容ごとに分離してレイアウト再計算を最小化 */
.kpi-card{
  contain: content;              /* 塗り・レイアウト・サイズを分離 */
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* スマホは影・境界を少し軽めに（見た目はほぼ同じ） */
@media (max-width: 767px){
  .kpi-card{
    border-color: rgba(255,255,255,.18);
    box-shadow: 0 6px 14px rgba(0,0,0,.10);
  }
  .kpi-num{
    text-shadow: 0 3px 10px rgba(0,0,0,.12); /* 0 6px 20px → 半分程度に */
  }
}
/* ==== SVG ring ================================================= */
/* アニメ対象に filter を掛けない（重い） */
#message #msg-ring [data-arc] { stroke-linejoin: round; /* filter: drop-shadow(...) 削除 */ }

/* ==== Optional: スマホ軽量化（必要なら） ====================== */
@media (max-width: 768px), (pointer: coarse) {
  /* 背景ノイズは軽量に（静止画像を推奨） */
  /* 例: .noise { background-image: url('./assets/noise-light.png'); opacity:.08; mix-blend-mode: normal; } */
}