/* ============================================================
   ソクウリ v3 — カラフル・アクセント層（視覚効果強化）
   ベースは青のまま。アイコン/バッジ/見出し/チップに多色を
   セクション単位で割り当て、白背景は維持（背景グラデ乱用しない）
   ============================================================ */
:root{
  --c-blue:#1f54de;   --c-blue-bg:#e8eeff;
  --c-sky:#0284c7;    --c-sky-bg:#e0f2fe;
  --c-teal:#0d9488;   --c-teal-bg:#d3faf4;
  --c-emerald:#059669;--c-emerald-bg:#d1fae5;
  --c-violet:#6d4df6; --c-violet-bg:#ece8fe;
  --c-amber:#d97706;  --c-amber-bg:#fef3c7;
  --c-rose:#e11d48;   --c-rose-bg:#ffe4ec;
}

/* ---------- HERO：青一色 → 微かなオーロラ（teal+violet）を重ねる ---------- */
.hero{
  background:
    radial-gradient(120% 90% at 86% -4%, rgba(45,212,207,.30), transparent 52%),
    radial-gradient(90% 80% at 8% 8%, rgba(124,92,255,.28), transparent 55%),
    radial-gradient(130% 100% at 50% 120%, rgba(14,165,233,.22), transparent 60%),
    linear-gradient(158deg,#234399 0%,#1d3677 44%,#141f48 100%) !important;
}

/* ---------- 見出しラベル（eyebrow）をセクションごとに色分け ---------- */
#story .eyebrow{color:var(--c-sky);}    #story .eyebrow::before{background:var(--c-sky);}
#strengths .eyebrow{color:var(--c-violet);} #strengths .eyebrow::before{background:var(--c-violet);}
#flow .eyebrow{color:var(--c-teal);}    #flow .eyebrow::before{background:var(--c-teal);}
#cats .eyebrow{color:var(--c-amber);}   #cats .eyebrow::before{background:var(--c-amber);}
#value .eyebrow{color:var(--c-emerald);} #value .eyebrow::before{background:var(--c-emerald);}
#fee .eyebrow{color:var(--c-emerald);} #fee .eyebrow::before{background:var(--c-emerald);}

/* ---------- STRENGTHS：3カードを別ハーフトーンに ---------- */
#strengths .s-card:nth-child(1){border-top-color:var(--c-sky);}
#strengths .s-card:nth-child(1) .si{background:var(--c-sky-bg);color:var(--c-sky);}
#strengths .s-card:nth-child(1) .sn{color:var(--c-sky);}
#strengths .s-card:nth-child(2){border-top-color:var(--c-emerald);}
#strengths .s-card:nth-child(2) .si{background:var(--c-emerald-bg);color:var(--c-emerald);}
#strengths .s-card:nth-child(2) .sn{color:var(--c-emerald);}
#strengths .s-card:nth-child(3){border-top-color:var(--c-violet);}
#strengths .s-card:nth-child(3) .si{background:var(--c-violet-bg);color:var(--c-violet);}
#strengths .s-card:nth-child(3) .sn{color:var(--c-violet);}

/* ---------- STORY：番号バッジを4色サイクルのグラデに ---------- */
#story .scene:nth-child(4n+1) .snum{background:linear-gradient(135deg,#0ea5e9,#38bdf8);}
#story .scene:nth-child(4n+2) .snum{background:linear-gradient(135deg,#1f54de,#4f7dff);}
#story .scene:nth-child(4n+3) .snum{background:linear-gradient(135deg,#7c5cff,#a78bfa);}
#story .scene:nth-child(4n+4) .snum{background:linear-gradient(135deg,#0d9488,#2dd4bf);}

/* ---------- STEPS / 掲載の流れ：4バッジを別グラデ＋アイコン同調 ---------- */
#flow .step:nth-child(1) .sbadge{background:linear-gradient(135deg,#0ea5e9,#38bdf8);}
#flow .step:nth-child(2) .sbadge{background:linear-gradient(135deg,#1f54de,#4f7dff);}
#flow .step:nth-child(3) .sbadge{background:linear-gradient(135deg,#7c5cff,#a78bfa);}
#flow .step:nth-child(4) .sbadge{background:linear-gradient(135deg,#059669,#34d399);}
#flow .step:nth-child(1) .si{color:var(--c-sky);}
#flow .step:nth-child(2) .si{color:var(--c-blue);}
#flow .step:nth-child(3) .si{color:var(--c-violet);}
#flow .step:nth-child(4) .si{color:var(--c-emerald);}

/* ---------- CATS：12タイルを6色サイクルで色分け ---------- */
#cats .cat:nth-child(6n+1) .ci{background:var(--c-blue-bg);color:var(--c-blue);}
#cats .cat:nth-child(6n+2) .ci{background:var(--c-sky-bg);color:var(--c-sky);}
#cats .cat:nth-child(6n+3) .ci{background:var(--c-teal-bg);color:var(--c-teal);}
#cats .cat:nth-child(6n+4) .ci{background:var(--c-violet-bg);color:var(--c-violet);}
#cats .cat:nth-child(6n+5) .ci{background:var(--c-amber-bg);color:var(--c-amber);}
#cats .cat:nth-child(6n+6) .ci{background:var(--c-emerald-bg);color:var(--c-emerald);}
#cats .cat:hover{border-color:currentColor;}
#cats .cat:nth-child(6n+1):hover{border-color:var(--c-blue);}
#cats .cat:nth-child(6n+2):hover{border-color:var(--c-sky);}
#cats .cat:nth-child(6n+3):hover{border-color:var(--c-teal);}
#cats .cat:nth-child(6n+4):hover{border-color:var(--c-violet);}
#cats .cat:nth-child(6n+5):hover{border-color:var(--c-amber);}
#cats .cat:nth-child(6n+6):hover{border-color:var(--c-emerald);}

/* ---------- AREA：4チップを色分け ---------- */
#area .area-chip:nth-child(1){background:var(--c-sky-bg);color:#0369a1;}
#area .area-chip:nth-child(2){background:var(--c-teal-bg);color:var(--c-teal);}
#area .area-chip:nth-child(3){background:var(--c-violet-bg);color:var(--c-violet);}
#area .area-chip:nth-child(4){background:var(--c-amber-bg);color:var(--c-amber);}
#area .label .pin{background:var(--c-sky-bg);color:var(--c-sky);}

/* ---------- FAQ：Qタイルを淡く循環（落ち着かせつつ単調回避） ---------- */
#faq .faq-item:nth-child(4n+1) .qt{background:var(--c-sky-bg);color:var(--c-sky);}
#faq .faq-item:nth-child(4n+2) .qt{background:var(--c-violet-bg);color:var(--c-violet);}
#faq .faq-item:nth-child(4n+3) .qt{background:var(--c-emerald-bg);color:var(--c-emerald);}
#faq .faq-item:nth-child(4n+4) .qt{background:var(--c-amber-bg);color:var(--c-amber);}

/* ---------- SIM：カテゴリ選択タイルを4色に ---------- */
.sp-grid .sp-pick:nth-child(1) .pi{background:var(--c-violet-bg);color:var(--c-violet);}
.sp-grid .sp-pick:nth-child(2) .pi{background:var(--c-amber-bg);color:var(--c-amber);}
.sp-grid .sp-pick:nth-child(3) .pi{background:var(--c-sky-bg);color:var(--c-sky);}
.sp-grid .sp-pick:nth-child(4) .pi{background:var(--c-emerald-bg);color:var(--c-emerald);}

/* ---------- 提供価値（vendor）：4カードを色分け ---------- */
.vwhy-card:nth-child(1){border-top-color:var(--c-emerald);}
.vwhy-card:nth-child(1) .vi{background:var(--c-emerald-bg);color:var(--c-emerald);}
.vwhy-card:nth-child(2){border-top-color:var(--c-sky);}
.vwhy-card:nth-child(2) .vi{background:var(--c-sky-bg);color:var(--c-sky);}
.vwhy-card:nth-child(3){border-top-color:var(--c-violet);}
.vwhy-card:nth-child(3) .vi{background:var(--c-violet-bg);color:var(--c-violet);}
.vwhy-card:nth-child(4){border-top-color:var(--c-amber);}
.vwhy-card:nth-child(4) .vi{background:var(--c-amber-bg);color:var(--c-amber);}

/* ---------- 最終CTA：淡青地に多色の精細ドット ---------- */
.final{position:relative;overflow:hidden;}
.final::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(10px 10px at 12% 26%, rgba(14,165,233,.18), transparent 60%),
    radial-gradient(12px 12px at 86% 30%, rgba(124,92,255,.16), transparent 60%),
    radial-gradient(9px 9px at 78% 74%, rgba(5,150,105,.16), transparent 60%),
    radial-gradient(11px 11px at 20% 78%, rgba(217,119,6,.14), transparent 60%);}
.final .inner{position:relative;z-index:1;}

/* ---------- 強調アンダーライン（h2の一語に色を差せる任意クラス） ---------- */
.tint-sky{color:var(--c-sky);}
.tint-teal{color:var(--c-teal);}
.tint-violet{color:var(--c-violet);}
.tint-emerald{color:var(--c-emerald);}
.tint-amber{color:var(--c-amber);}