/* ============================================================
   見た目の仕上げ（構成はそのまま、質感だけ上げる）
   - 画面の地をわずかに落として、白いカードを浮かせる
   - 枠線を薄くし、やわらかい影と、ホバーでの浮き上がりを付ける
   - 見出しにアクセントの縦バー、進捗バーはグラデーション
   - フッターは紺（バッジの紺・金と同じ系統）
   色はすべて style.css のトークンを使う。消せば元に戻る
   ============================================================ */

/* ---- 地と文字 ---- */
body.is-portal{background:#F5F8F8}
body.is-portal .bar{background:rgba(255,255,255,.88);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid rgba(30,42,58,.08)}

/* ヘッダーのメニュー: いま居る場所に短い下線 */
.gnav a{position:relative}
.gnav a.on{background:none}
.gnav>a.on::after,.gnav .gn-item>a.on::before{content:"";position:absolute;left:14px;right:14px;bottom:2px;height:2px;border-radius:2px;background:var(--accent)}
.gnav .gn-item>a.on::before{right:26px}
.hd-search input[type=search]{background:#F5F8F8;border-color:transparent}
.hd-search input[type=search]:focus{background:#fff}

/* ---- ヒーローの下に細いグラデーションの線 ---- */
.banner.image{border-bottom:0}
.banner.image::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;z-index:3;
  background:linear-gradient(90deg,var(--accent) 0%,#0B8A7D 35%,rgba(11,138,125,0) 100%)}

/* ---- 見出し ---- */
.dash-main>.dh2,.dash-body>.dh2{display:flex;align-items:center;gap:10px;font-size:1.2rem;letter-spacing:.02em}
.dash-main>.dh2::before,.dash-body>.dh2::before{content:"";flex:none;width:6px;height:22px;border-radius:3px;background:linear-gradient(180deg,var(--accent),#0B8A7D)}
.dhead h2{letter-spacing:.02em}

/* ---- カード全般: 枠を薄く、影で浮かせる ---- */
.dcard,.course{border-color:rgba(30,42,58,.06);box-shadow:0 1px 2px rgba(30,42,58,.04),0 10px 28px -18px rgba(30,42,58,.22)}
.course{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.course:hover{transform:translateY(-2px);border-color:rgba(18,196,176,.45);box-shadow:0 2px 4px rgba(30,42,58,.05),0 18px 36px -18px rgba(18,196,176,.35)}
.course .ic{width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg,#E1F7F4,#F4FBFA);box-shadow:inset 0 0 0 1px rgba(18,196,176,.18)}
.course .ic img{width:36px;height:36px;filter:drop-shadow(0 2px 3px rgba(30,42,58,.15))}
.course.on .ic,.course.full .ic{background:linear-gradient(135deg,#CFF3EE,#E9FAF7)}
.course .ttl b{font-size:1.12rem;letter-spacing:.01em}
.course .chip{border-radius:999px;padding:3px 10px;font-size:.72rem;letter-spacing:.02em}
.course .go{transition:gap .15s}
.course:hover .go{gap:8px;color:var(--accent-text)}

/* ---- 進捗バー ---- */
.course .pbar,.acct-prog .track{height:8px;background:#EDF1F1;box-shadow:inset 0 1px 2px rgba(30,42,58,.06)}
.course .pbar i,.acct-prog .track i{background:linear-gradient(90deg,#12C4B0,#0B8A7D);box-shadow:0 0 0 1px rgba(255,255,255,.5) inset}

/* ---- 学習の道のり ---- */
.dcard.path{background:linear-gradient(180deg,#FFFFFF,#F7FAFA)}
.step .dot{width:34px;height:34px;border-width:2px;background:#fff;border-color:#DDE4E4;color:var(--muted);box-shadow:0 1px 2px rgba(30,42,58,.06)}
.step.ok .dot{background:linear-gradient(135deg,#12C4B0,#0B8A7D);border-color:transparent}
.step.cur .dot{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.steps-line{background:#E6ECEC}
.steps-line i{background:linear-gradient(90deg,#12C4B0,#0B8A7D)}

/* ---- 右の列（目標のカード・リンク集） ---- */
.dcard.goal,.goal-cta{background:linear-gradient(160deg,#E7F9F6 0%,#F3FBF9 100%);border-color:rgba(18,196,176,.25)}
.refs a{transition:color .12s,padding-left .12s}
.refs a:hover{padding-left:4px}
.refs svg{filter:drop-shadow(0 1px 1px rgba(18,196,176,.25))}

/* ---- ボタン ---- */
.dbtn,.pbtn,.bigbtn:not(.alt),.goal-cta .dbtn{background:linear-gradient(135deg,#14CDB8,#0FA898);box-shadow:0 6px 16px -8px rgba(11,138,125,.6);border:0}
.dbtn:hover,.pbtn:hover,.bigbtn:not(.alt):hover{filter:brightness(1.04);box-shadow:0 10px 22px -10px rgba(11,138,125,.7)}

/* ---- バッジ ---- */
.badge{border-color:rgba(30,42,58,.06);box-shadow:0 1px 2px rgba(30,42,58,.03)}
.badge.ok{background:linear-gradient(160deg,#E7F9F6,#F3FBF9);border-color:rgba(18,196,176,.3)}

/* ---- フッター: 紺にして締める ---- */
.site-foot{background:#1E2A3A;border-top:0;color:#B8C4D2;padding:30px 24px 34px}
.site-foot .in{color:#B8C4D2}
.site-foot .in a{color:#DCE5EE}
.site-foot .in a:hover{color:#fff}
.site-foot .links a{text-decoration:none}

/* ---- ヘッダーの小メニュー ---- */
.gn-sub{border-color:rgba(30,42,58,.08);box-shadow:0 20px 40px -18px rgba(30,42,58,.35)}
.gnav .gn-sub a:hover{background:#F3F8F8}

@media (prefers-reduced-motion:reduce){.course{transition:none}.course:hover{transform:none}}