/* home.css — ホームページ固有のスタイル */

/* ================= ヒーロー帯(2026-07-23 ビジュアル刷新 → 2026-07-24 Wave2 D-1/D-7改修) =================
   このサイトの記憶に残る個性その1。深いネイビーのグラデ＋控えめなドットグリッドで
   「テック×知的」な質感を出す。ダークはこの帯の中だけに限定し、本文・カード・レッスンは
   白基調のまま(base.cssの方針を踏襲)。文字色トークンは--hero-*でAAコントラスト検証済み。
   Wave2(design-system-v2 D-1「読む壁」是正): リード2文へ圧縮・メタバッジ行を新設・主CTAを1本化した
   (旧: 見出し+リード+ボタン2つ縦積みで視線が迷う→ 新: 見出し+短いリード+メタ行+主CTA1本+副はテキストリンク)。 */
.hero{
  position:relative;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(circle at 1.5px 1.5px,rgba(255,255,255,.07) 1.5px,transparent 0) 0 0/24px 24px,
    linear-gradient(100deg,rgba(11,27,58,.92) 0%,rgba(11,27,58,.55) 55%,rgba(18,41,92,.25) 100%),
    url("../../img/hero-bg.jpg?v=i2") center/cover no-repeat,
    linear-gradient(155deg,var(--hero-navy-1) 0%,var(--hero-navy-2) 82%);
  border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-lg);
  padding:var(--space-7) var(--space-6);margin-bottom:var(--space-6);
  color:var(--hero-text);
}
/* D-7(マスコット定位置ルール化)で右下固定にするぶん、デスクトップ幅では本文が
   マスコット直下まで回り込まないよう右側に逃げ代を確保する(hero-leadは元々max-width:52chで
   収まる想定だが、コンテナが広い場合の保険)。 */
@media (min-width:901px){.hero{padding-right:200px}}
@keyframes heroFadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.hero-kicker,.hero h1,.hero-lead,.hero-meta,.hero-cta{animation:heroFadeUp .55s ease both}
.hero h1{animation-delay:.05s}
.hero-lead{animation-delay:.1s}
.hero-meta{animation-delay:.15s}
.hero-cta{animation-delay:.2s}
.hero-mascot{animation:heroFadeUp .6s ease .14s both}

.hero-kicker{
  display:inline-flex;align-items:center;gap:.6em;font-size:.78rem;font-weight:800;
  letter-spacing:.22em;color:var(--hero-kicker);text-transform:uppercase;margin-bottom:var(--space-4);
}
.hero-kicker::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--hero-kicker)}
.hero h1{
  font-size:clamp(2.1rem,4.4vw,3rem);max-width:18ch;color:var(--hero-text);
  font-weight:800;letter-spacing:-.01em;line-height:1.2;
}
.hero-lead{font-size:1.05rem;line-height:1.75;color:var(--hero-text-muted);max-width:52ch;margin-top:var(--space-4)}

/* D-1メタバッジ行(design-system-v2 C1「8 COURSES / 355 LESSONS」)。components.cssの
   .page-hero .hero-meta と同一の視覚仕様をホームの.hero専用に再定義する(ファイルが別なため
   コピーが必要・値は完全に同じにして一貫性を保つ)。 */
.hero .hero-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:.65em;margin-top:var(--space-4);
  font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--hero-text-faint);
}
.hero .hero-meta-dot{width:4px;height:4px;border-radius:50%;background:var(--hero-text-faint);flex:none}

/* D-1主CTA1本化: 「はじめから受講する」のみ塗りボタン、「カリキュラム一覧を見る」はテキストリンク化。 */
.hero-cta{display:flex;align-items:center;gap:var(--space-4);margin-top:var(--space-5);flex-wrap:wrap}
.hero-cta .btn-primary{background:#fff;color:var(--hero-navy-2);box-shadow:0 10px 24px rgba(4,10,26,.35)}
.hero-cta .btn-primary:hover{background:#EAF1FB}
.hero-cta-text{
  display:inline-flex;align-items:center;gap:.35em;min-height:44px;
  color:var(--hero-text-muted);font-weight:700;font-size:.92rem;
}
.hero-cta-text:hover{color:#fff;text-decoration:underline}

/* ================= ヒーロー横マスコット(2026-07-22 実装 → 2026-07-24 Wave2 D-7で右下固定化) =================
   旧仕様はflexで本文の右横に置き、折り返し時にヒーロー下へ中央寄せで浮遊していた(=D-7指摘の
   「視線を散らす」原因)。Wave2では常にヒーロー右下の定位置に固定し(position:absolute)、
   本文の折り返しに連動して位置がぶれないようにする。極小幅では本文の可読性を最優先し非表示にする
   (D-7「使用ルール化」＝置き場所を1箇所に固定し、収まらない場面では出さない)。 */
.hero-flex{position:relative}
.hero-main{max-width:640px}
.hero-mascot{
  position:absolute;right:var(--space-6);bottom:var(--space-5);z-index:1;
  width:150px;pointer-events:none;
}
.hero-mascot::before{
  content:"";position:absolute;inset:-14%;z-index:0;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.16) 0%,transparent 68%);
}
.hero-mascot-img{position:relative;z-index:1;width:100%;height:auto}
@media (max-width:900px){.hero-mascot{width:110px;right:var(--space-4);bottom:var(--space-4)}}
@media (max-width:640px){.hero-mascot{display:none}}

/* ================= C4 学習進捗パネル(design-system-v2・2026-07-24 Wave2で新設) =================
   ヒーロー内に同居していた進捗バーを、独立したネイビー帯として切り出した(D-5「明暗リズム」の
   2つ目のダーク帯。ヒーローと合わせて「ダーク→ダーク→白」の導入シーケンスにし、そのあとの
   カリキュラム/お知らせ/スタートガイドは白基調で続ける)。配色はhero/course-heroと同じ
   実証済みnavy-1→navy-2グラデを再利用するため、AAコントラストの再計算は不要
   (base.cssの検証済み値: white 14.02:1 / muted 9.26:1 / kicker 7.81:1をそのまま継承)。 */
.progress-panel{
  position:relative;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(circle at 1.5px 1.5px,rgba(255,255,255,.08) 1.5px,transparent 0) 0 0/22px 22px,
    linear-gradient(100deg,var(--hero-navy-1) 0%,var(--hero-navy-2) 100%);
  border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-lg);
  padding:var(--space-5) var(--space-6);margin:0 0 var(--space-6);color:var(--hero-text);
}
.progress-panel .hero-kicker{margin-bottom:0}
.progress-panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;
  margin-bottom:var(--space-3);
}
.progress-panel-pct{font-size:2.1rem;font-weight:800;color:#fff;line-height:1;font-variant-numeric:tabular-nums}
.progress-panel .progress-track{background:rgba(255,255,255,.2);height:12px}
.progress-panel-meta{margin:.6em 0 0;font-size:.85rem;color:var(--hero-text-muted)}
/* 2026-07-26 UI刷新(実装3): 学習編/実践編の2段表示。2段目は上に区切り線+余白を足して
   1つのパネル内で2つの独立した進捗であることを視覚的に示す。 */
.progress-panel-row + .progress-panel-row{
  margin-top:var(--space-5);padding-top:var(--space-5);border-top:1px solid rgba(255,255,255,.14);
}

/* C5「続きから再開」カード(2026-07-24 Wave2でヒーロー外の独立カードへ)。淡いセクション背景色を使い、
   白一色ページの中に軽い濃淡を1段追加する(D-5リズムの3段目=ごく淡いtint)。 */
.continue-card{
  background:var(--color-bg-section);padding:var(--space-4) var(--space-5);margin:0 0 var(--space-6);
}
.continue-card-title{margin:0 0 .8em;font-weight:700;color:var(--color-navy)}

/* ================= セクション見出し=英字キッカー+日本語見出しの2段構成 =================
   (design-system-v2 §1「セクション見出しは英字キッカー+日本語見出しの2段で統一」・タイポグラフィ
   スケール統一。ホーム内のカリキュラム/お知らせ/スタートガイド見出しに適用。全ページ共通の
   .section-title(小さな1行ラベルのみ)とは別の、より大きな2段見出しパターンとして新設する。) */
.section-heading{margin:var(--space-7) 0 var(--space-4)}
.section-heading:first-of-type{margin-top:0}
.section-heading-kicker{
  display:flex;align-items:center;gap:.55em;font-size:.72rem;font-weight:800;letter-spacing:.16em;
  color:var(--color-primary);text-transform:uppercase;margin:0 0 .35em;
}
.section-heading-kicker::before{content:"";width:16px;height:2px;border-radius:2px;background:var(--color-primary)}
.section-heading-title{margin:0;font-size:1.3rem;font-weight:800;color:var(--color-navy);line-height:1.35}

.start-guide-grid{
  display:grid;grid-template-columns:1fr;gap:var(--space-4);margin-top:var(--space-4);
}
@media (min-width:768px){.start-guide-grid{grid-template-columns:repeat(3,1fr)}}
.plan-card{padding:var(--space-5);display:flex;flex-direction:column}
.plan-card .plan-kicker{font-size:.72rem;font-weight:800;color:var(--color-text-faint);letter-spacing:.08em}
.plan-card h3{margin-top:.3em}
/* D-2(プランカード再設計・design-system-v2/悪魔の代弁者D-2): 対象者タグ＋開始編バッジ＋
   1行ベネフィット。旧: target_audience/progress_styleの長文2段落をそのまま表示していたため
   3枚が同じ顔に見えていた→ 新: plans.jsonの同じデータから機械抽出したタグ2種+summary1行に圧縮。 */
.plan-tags{display:flex;flex-wrap:wrap;gap:.4em;margin:.6em 0 0}
.plan-tag{
  display:inline-flex;align-items:center;font-size:.72rem;font-weight:700;
  padding:.28em .75em;border-radius:var(--radius-pill);white-space:nowrap;
}
.plan-tag--audience{background:var(--color-secondary-light);color:var(--color-primary-dark)}
.plan-tag--course{background:#fff;border:1px solid var(--color-border);color:var(--color-text-muted)}
.plan-benefit{font-size:.94rem;color:var(--color-navy);font-weight:600;line-height:1.6;margin:.65em 0 0}
.plan-card .plan-note{
  font-size:.76rem;color:var(--color-text-faint);margin-top:auto;padding-top:var(--space-3);
}

/* ================= 編カードグリッド(ホーム) =================
   2026-07-25 Wave2残タスク: 編カード上部に.course-card-visual(バナー帯)を新設し、
   Image2.0編バナー(course-{I..VIII}-banner.jpg)を「章の顔」として組み込む(旧.eyecatch
   is-sm構成は撤去)。home.jsは `.course-card[data-course]` を親要素として
   `.progress-fill`/`.progress-label` を子孫探索する実装のため、この親要素のクラス・
   data-course属性はそのまま維持している(home.js側の変更は不要)。 */
.course-grid{display:grid;grid-template-columns:1fr;gap:var(--space-4)}
@media (min-width:640px){.course-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.course-grid{grid-template-columns:repeat(2,1fr)}}
.course-card{display:flex;flex-direction:column;padding:0;overflow:hidden}
.course-card-body{padding:1.05em 1.3em 1.3em}
.course-card-body h3{margin:0;font-size:1.05rem}
.course-card-body .course-summary{font-size:.85rem;color:var(--color-text-muted);margin-top:.35em;line-height:1.6}
.course-card-body .course-meta{margin-top:.6em}

/* ================= 編バナー帯(.course-card-visual・2026-07-25新設) =================
   カード上部に高さ132px(モバイルは90px)のビジュアル帯を敷く。外側(.course-card-visual)は
   overflow:hiddenで「上側のみ角丸」とホバーズームの両方をクリップし、実画像は内側
   (.course-card-visual-img・inset:0の絶対配置)に持たせることで、ホバー時はこの内側要素
   だけをscale(1.03)する(帯の外枠・チップは拡大させない)。バナー上には文字を置かない設計
   のため、オーバーレイは左右非対称のスクリムではなく全面均一の薄いネイビー斜めグラデにし、
   白×ブルーのブランドトーンへ寄せる。 */
.course-card-visual{position:relative;height:132px;overflow:hidden;border-radius:var(--radius-md) var(--radius-md) 0 0}
.course-card-visual-img{
  position:absolute;inset:0;background-color:var(--hero-navy-2);
  transition:transform .3s ease;
}
.course-card:hover .course-card-visual-img{transform:scale(1.03)}
@media (max-width:640px){.course-card-visual{height:90px}}

/* 編番号ローマ数字チップ(帯の左下・白半透明背景・小さく表示。バナー上に置く唯一の文字要素)。 */
.course-card-visual-index{
  position:absolute;left:.7em;bottom:.6em;z-index:1;
  display:inline-flex;align-items:baseline;gap:.3em;
  background:rgba(255,255,255,.88);border-radius:var(--radius-pill);
  padding:.2em .7em;line-height:1;box-shadow:0 2px 8px rgba(4,10,26,.22);
}
.course-card-visual-index-num{font-family:var(--font-serif-index);font-weight:700;font-size:.92rem;color:var(--hero-navy-2)}
.course-card-visual-index-label{font-size:.6rem;font-weight:800;letter-spacing:.08em;color:var(--color-text-muted)}

/* Image2.0編バナー実体(data-course別背景画像＋ネイビーの薄い斜めグラデオーバーレイ＋
   画像未取得時のnavyフォールバック)。curriculum.cssの.course-hero/.course-card-visual-imgと
   同じ画像・同じ考え方のオーバーレイをホーム側でも定義する(components.cssは変更対象外の
   ためページ別CSSへ複製する。クラス名・値は完全一致させ見た目の差異は作らない)。 */
.course-card-visual-img[data-course="I"]{background:linear-gradient(160deg,rgba(11,27,58,.46) 0%,rgba(11,27,58,.14) 100%),url("../../img/course-I-banner.jpg?v=i2") center/cover no-repeat,linear-gradient(155deg,var(--hero-navy-1),var(--hero-navy-2))}
.course-card-visual-img[data-course="II"]{background:linear-gradient(160deg,rgba(11,27,58,.46) 0%,rgba(11,27,58,.14) 100%),url("../../img/course-II-banner.jpg?v=i2") center/cover no-repeat,linear-gradient(155deg,var(--hero-navy-1),var(--hero-navy-2))}
.course-card-visual-img[data-course="III"]{background:linear-gradient(160deg,rgba(11,27,58,.46) 0%,rgba(11,27,58,.14) 100%),url("../../img/course-III-banner.jpg?v=i2") center/cover no-repeat,linear-gradient(155deg,var(--hero-navy-1),var(--hero-navy-2))}
.course-card-visual-img[data-course="IV"]{background:linear-gradient(160deg,rgba(11,27,58,.46) 0%,rgba(11,27,58,.14) 100%),url("../../img/course-IV-banner.jpg?v=i2") center/cover no-repeat,linear-gradient(155deg,var(--hero-navy-1),var(--hero-navy-2))}
.course-card-visual-img[data-course="V"]{background:linear-gradient(160deg,rgba(11,27,58,.46) 0%,rgba(11,27,58,.14) 100%),url("../../img/course-V-banner.jpg?v=i2") center/cover no-repeat,linear-gradient(155deg,var(--hero-navy-1),var(--hero-navy-2))}
.course-card-visual-img[data-course="VI"]{background:linear-gradient(160deg,rgba(11,27,58,.46) 0%,rgba(11,27,58,.14) 100%),url("../../img/course-VI-banner.jpg?v=i2") center/cover no-repeat,linear-gradient(155deg,var(--hero-navy-1),var(--hero-navy-2))}
.course-card-visual-img[data-course="VII"]{background:linear-gradient(160deg,rgba(11,27,58,.46) 0%,rgba(11,27,58,.14) 100%),url("../../img/course-VII-banner.jpg?v=i2") center/cover no-repeat,linear-gradient(155deg,var(--hero-navy-1),var(--hero-navy-2))}
.course-card-visual-img[data-course="VIII"]{background:linear-gradient(160deg,rgba(11,27,58,.46) 0%,rgba(11,27,58,.14) 100%),url("../../img/course-VIII-banner.jpg?v=i2") center/cover no-repeat,linear-gradient(155deg,var(--hero-navy-1),var(--hero-navy-2))}
/* 編IX(2026-07-25追加・世界のAIO：国別動向と実例)。画像は別工程で生成中のため、
   course-IX-banner.jpgが不在の間はurl()が404になりnavyフォールバックのみ表示される
   (curriculum.cssの.course-hero[data-course="IX"]と同じ考え方)。 */
.course-card-visual-img[data-course="IX"]{background:linear-gradient(160deg,rgba(11,27,58,.46) 0%,rgba(11,27,58,.14) 100%),url("../../img/course-IX-banner.jpg?v=i2") center/cover no-repeat,linear-gradient(155deg,var(--hero-navy-1),var(--hero-navy-2))}

.news-list{margin-top:var(--space-3)}