@charset "UTF-8";

/* Front page v3 — rebuilt against the approved concept mock. Scoped to body.home to keep subpages stable. */
body.home {
  --home-navy: #0d3268;
  --home-navy-deep: #092a54;
  --home-blue: #176eb6;
  --home-pale: #eef5fb;
  --home-line: #d5e3ee;
  --home-orange: #b8540f;
  --home-orange-hover: #9c460b;
  color: #22384f;
}

/* Header: サイト共通の標準ヘッダー(main.css)をそのまま使う。ホーム専用の上書きはしない */
body.home .container { width: min(calc(100% - 64px), 1180px); }
body.home .section { padding: 64px 0; }
body.home .header-cta.button-primary { background: var(--home-orange); }

/* Hero */
body.home .hero { height: calc(100svh - 180px); min-height: 500px; max-height: 660px; padding: 0; background: #f1f7fb; }
body.home .hero-layout { height: 100%; min-height: 0; grid-template-columns: 55% 45%; }
body.home .hero-copy { padding: 44px 32px 40px 0; }
body.home .hero-label { margin-bottom: 22px; font-size: 12px; font-weight: 700; }
body.home .hero-label span { padding: 6px 12px; background: var(--home-navy); }
body.home .hero h1 { font: 700 clamp(38px,3.3vw,46px)/1.34 "Yu Mincho","Hiragino Mincho ProN",serif; letter-spacing: -.02em; }
body.home .hero h1 em { color: inherit; }
body.home .hero h1 em::after { height: 13px; bottom: 2px; background: rgba(121,200,231,.35); }
body.home .hero-lead { margin: 20px 0 26px; color: #33475e; font-size: 16px; line-height: 1.9; }
body.home .hero-actions .button { min-height: 54px; }
body.home .hero-actions .button-primary { min-width: 220px; background: var(--home-orange); }
body.home .button-primary:hover, body.home .diagnosis-button:hover, body.home .final-actions .button:hover { background: var(--home-orange-hover); }
body.home .hero-actions .button-secondary { background: #fff; }
body.home .hero-cta-note { display: block; margin-top: 12px; color: #5b7086; font-size: 11px; font-weight: 700; }
body.home .hero-photo-panel { width: 52%; }
body.home .hero-photo-panel img { object-position: 64% 8%; }
body.home .hero-photo-panel::before { background: linear-gradient(103deg,#f1f7fb 0%,rgba(241,247,251,.96) 8%,rgba(241,247,251,.36) 25%,transparent 43%); }

/* Stats strip */
body.home .stats-strip { padding: 26px 0; background: #fff; border-bottom: 1px solid var(--home-line); }
body.home .stats-grid { display: grid; grid-template-columns: repeat(4,1fr); }
body.home .stats-grid > div { display: grid; grid-template-columns: 42px 1fr; column-gap: 14px; align-content: center; padding: 8px 18px; border-right: 1px solid var(--home-line); min-width: 0; }
body.home .stats-grid > div:last-child { border-right: 0; }
body.home .stats-grid small, body.home .stats-grid strong, body.home .stats-grid span { grid-column: 2; }
body.home .stats-grid .stat-icon { grid-column: 1; grid-row: 1 / span 3; align-self: center; display: grid; place-items: center; width: 42px; height: 42px; color: var(--home-blue); background: var(--home-pale); border-radius: 50%; }
body.home .stat-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
body.home .stats-grid small { display: block; color: #5b7086; font-size: 11px; font-weight: 700; }
body.home .stats-grid strong { display: block; margin: 2px 0; color: var(--home-navy); font-size: 22px; line-height: 1.2; letter-spacing: .01em; white-space: nowrap; }
body.home .stats-grid span { display: block; color: #5b7086; font-size: 12px; line-height: 1.5; }

/* Shared centered heading */
body.home .centered-heading { margin-bottom: 34px; }
body.home .centered-heading h2 { margin: 0; font: 700 clamp(24px,2.2vw,30px)/1.5 "Yu Mincho","Hiragino Mincho ProN",serif; color: var(--home-navy); letter-spacing: -.01em; text-wrap: balance; }
body.home .centered-heading h2::after { content: ""; display: block; width: 44px; height: 2px; margin: 16px auto 0; background: var(--home-blue); }
body.home .centered-heading > p { margin: 14px auto 0; max-width: 680px; color: #5b7086; font-size: 16px; line-height: 2; }

/* Challenge */
body.home .challenge-section { padding: 56px 0 60px; background: #fff; }
body.home .challenge-list { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
body.home .challenge-card { display: flex; gap: 12px; align-items: flex-start; padding: 20px 18px; background: var(--home-pale); border-radius: 8px; }
body.home .check-icon { display: grid; place-items: center; flex: 0 0 26px; width: 26px; height: 26px; margin-top: 2px; color: #fff; background: var(--home-blue); border-radius: 50%; }
body.home .check-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
body.home .challenge-card p { margin: 0; color: #33475e; font-size: 14px; font-weight: 700; line-height: 1.75; text-wrap: balance; }

/* Diagnosis banner */
body.home .diagnosis-banner { padding: 0; background: var(--home-navy-deep); }
body.home .diagnosis-inner { grid-template-columns: 92px 1fr 260px; gap: 26px; min-height: 136px; padding: 26px 36px; background: transparent; box-shadow: none; }
body.home .diagnosis-clock { display: grid; place-items: center; width: 78px; height: 78px; color: #fff; border: 3px solid #fff; border-radius: 50%; }
body.home .diagnosis-clock strong { font: 800 28px/1 Arial,sans-serif; }
body.home .diagnosis-clock small { margin-top: -21px; font: 800 8px/1 Arial,sans-serif; }
body.home .diagnosis-kicker { margin: 0 0 6px; color: #9fc3e4; font-size: 12px; font-weight: 700; }
body.home .diagnosis-copy h2 { margin: 0; font: 700 19px/1.6 "Yu Mincho","Hiragino Mincho ProN",serif; }
body.home .diagnosis-points { margin-top: 10px; }
body.home .diagnosis-points span { padding: 4px 9px; font-size: 12px; }
body.home .diagnosis-button { min-width: 0; min-height: 54px; padding: 12px 22px; color: #fff; background: var(--home-orange); box-shadow: 0 10px 24px rgba(0,0,0,.25); }
body.home .diagnosis-button span { font-size: 13px; }
body.home .diagnosis-button b { color: #fff; }

/* Courses — shared course-card with colored art panels (palette by marketing dept) */
body.home .section-courses { padding: 60px 0 66px; background: var(--home-pale); }
body.home .course-grid { grid-template-columns: repeat(4,1fr); gap: 18px; }
body.home .course-card { border-radius: 8px; }
/* 固定高さではなく生成画像の縦横比(16:9弱)に追従させ、どの列数でも画像が過度にトリミングされないようにする */
body.home .course-art { height: auto; aspect-ratio: 1672 / 941; }
body.home .course-art-main { padding: 18px 20px; }
body.home .course-art-main > strong { font-size: 17px; }
body.home .course-art-tool { width: 108px; padding: 14px 10px; }
body.home .course-card-body { padding: 20px; }
body.home .course-card h3 { font-size: 17px; font-feature-settings: "palt" 1; text-wrap: balance; }
body.home .course-card p { font-size: 14px; line-height: 1.8; }
body.home .course-card dd { font-size: 13px; }
body.home .course-card dd.course-card-price { font-size: 16px; }
body.home .course-card-body > a:last-child { align-items: center; min-height: 44px; font-size: 13px; }
body.home .course-unsure { margin-top: 26px; text-align: center; color: #5b7086; font-size: 14px; }
body.home .course-unsure a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--home-navy); font-weight: 800; border-bottom: 1px solid currentColor; }
body.home .course-unsure b { color: var(--home-orange); }

/* Compare */
body.home .compare-section { padding: 56px 0; background: #fff; }
body.home .compare-table-wrap { max-width: 920px; margin-inline: auto; box-shadow: none; }
body.home .compare-table { min-width: 640px; }
body.home .compare-table th, body.home .compare-table td { padding: 14px 18px; font-size: 12.5px; }
body.home .compare-table thead th.compare-us { background: var(--home-navy); border-bottom-color: var(--home-navy); }
body.home .compare-cta { margin-top: 24px; text-align: center; font-size: 14px; }
/* inline-flexだとalign-items:centerにより、地の文が折り返した際に
   「無料診断 →」だけが行の高さの中央に浮いて見える回帰があったため、
   inline-blockで通常のインライン折返しに戻す(min-height:44pxはタップ領域確保のため維持)。 */
/* border-bottomはinline-blockの箱幅(shrink-to-fitでコンテナ全幅まで広がりうる)基準で
   引かれるため、2行目に短い文字列だけが折り返ると箱全体の下端に不釣り合いに長い
   下線が浮いて見える(390px実測: テキスト74.7pxに対し箱356px)。width:fit-contentは
   shrink-to-fitと計算式が一致するため効果なし。text-decorationは行ごとの実テキスト幅に
   沿って引かれるため、各行のテキスト幅通りの下線になる。 */
body.home .compare-cta a { display: inline-block; min-height: 44px; color: var(--home-navy); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
body.home .compare-cta b { color: var(--home-orange); }

/* Reasons */
body.home .reasons { padding: 58px 0 64px; color: #22384f; background: var(--home-pale); }
body.home .reason-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
body.home .reason-card { display: flex; flex-direction: column; padding: 28px 24px 24px; background: #fff; border: 1px solid var(--home-line); border-radius: 8px; }
body.home .reason-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 14px; }
body.home .reason-num { color: var(--home-blue); font: 700 34px/1 Georgia,"Times New Roman",serif; }
body.home .reason-card h3 { margin: 2px 0 0; color: var(--home-navy); font-size: 16px; line-height: 1.55; }
body.home .reason-card > p { margin: 0 0 18px; color: #5b7086; font-size: 14px; line-height: 1.9; }
body.home .reason-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--home-line); }
body.home .reason-steps span { padding: 5px 9px; color: var(--home-navy); background: var(--home-pale); border-radius: 4px; font-size: 12px; font-weight: 700; }
body.home .reason-steps b { color: #9db4c9; font-size: 13px; }

/* Flow */
body.home .flow-section { padding: 56px 0 62px; background: #fff; }
body.home .flow-steps { display: grid; grid-template-columns: 1fr 22px 1fr 22px 1fr 22px 1fr; gap: 8px; align-items: stretch; }
body.home .flow-card { position: relative; display: flex; flex-direction: column; align-items: center; min-height: 190px; padding: 24px 16px 18px; text-align: center; background: var(--home-pale); border-radius: 8px; }
body.home .flow-num { position: absolute; left: 14px; top: 12px; display: grid; place-items: center; width: 26px; height: 26px; color: var(--home-navy); background: #fff; border: 1.5px solid var(--home-navy); border-radius: 50%; font: 800 12px/1 Arial,sans-serif; }
body.home .flow-ic { display: grid; place-items: center; width: 56px; height: 56px; margin: 4px 0 12px; color: var(--home-navy); background: #fff; border-radius: 50%; }
body.home .flow-ic svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
body.home .flow-card h3 { margin: 0 0 6px; color: var(--home-navy); font-size: 14px; }
body.home .flow-card p { margin: 0; color: #5b7086; font-size: 14px; line-height: 1.8; }
body.home a.flow-card { transition: transform .2s, box-shadow .2s; }
body.home a.flow-card:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(13,50,104,.12); }
body.home .flow-link-note { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; color: var(--home-navy); font-size: 11px; font-weight: 800; }
body.home .flow-link-note b { color: var(--home-orange); }
body.home .flow-arrow { align-self: center; color: var(--home-navy); font-size: 26px; font-weight: 700; text-align: center; }

/* FAQ */
body.home .faq-section { padding: 56px 0 52px; background: var(--home-pale); }
body.home .home-faq { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px 20px; align-items: start; }
body.home .home-faq details { background: #fff; border: 1px solid var(--home-line); border-radius: 6px; padding-inline: 18px; }
body.home .home-faq details:last-child { border-bottom: 1px solid var(--home-line); }
body.home .home-faq summary { min-height: 54px; gap: 10px; grid-template-columns: 26px 1fr 24px; font-size: 14px; }
body.home .home-faq details > div { padding: 0 6px 16px 36px; }
body.home .home-faq details p { font-size: 14px; line-height: 1.9; }
body.home .faq-more { margin-top: 26px; text-align: center; }
body.home .faq-more a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--home-navy); font-size: 14px; font-weight: 800; border-bottom: 1px solid currentColor; }
body.home .faq-more b { color: var(--home-orange); }

/* Final CTA */
body.home .final-cta { min-height: 200px; padding: 52px 0; text-align: center; background: linear-gradient(105deg,rgba(4,42,87,.97),rgba(7,58,112,.9)),url("../images/hero-ai-training-v2.webp") center 55%/cover; }
body.home .final-grid { opacity: .15; }
body.home .final-inner h2 { margin: 0 0 10px; font: 700 clamp(26px,2.6vw,34px)/1.5 "Yu Mincho","Hiragino Mincho ProN",serif; }
body.home .final-inner p { margin: 0 0 20px; color: #c9d8e8; font-size: 14px; }
body.home .final-actions { justify-content: center; margin: 0 0 12px; }
body.home .final-actions .button { min-height: 52px; padding: 12px 30px; background: var(--home-orange); font-size: 14px; box-shadow: 0 10px 26px rgba(0,0,0,.28); }
body.home .final-inner > small { color: #b3c6da; font-size: 12px; }

/* Footer */
body.home .site-footer { padding-top: 40px; background: #071d3a; }
body.home .footer-links h2 { font-size: 12px; }
body.home .footer-links a { margin: 0; padding: 12px 0; font-size: 13px; }
body.home .footer-bottom { font-size: 11px; }
body.home .footer-brand > p { font-size: 13px; }
body.home .footer-main { grid-template-columns: 1.1fr 2fr; align-items: start; gap: 70px; }
body.home .footer-main.has-contact-card { grid-template-columns: 1.1fr 2fr .9fr; gap: 50px; }
body.home .footer-links { grid-template-columns: repeat(auto-fit, minmax(140px, max-content)); gap: 56px; }
body.home .footer-bottom { padding: 18px 0; }

/* Motion & focus */
body.home a:focus-visible, body.home button:focus-visible, body.home summary:focus-visible { outline: 3px solid #ff9c45; outline-offset: 3px; }

/* Responsive */
@media (max-width: 1050px) {
  body.home .stats-grid { grid-template-columns: repeat(2,1fr); gap: 10px 0; }
  body.home .stats-grid > div:nth-child(2) { border-right: 0; }
  body.home .course-grid { grid-template-columns: repeat(2,1fr); }
  body.home .reason-cards { grid-template-columns: 1fr; gap: 12px; }
  body.home .reason-card { padding: 18px 18px 16px; }
  body.home .reason-head { gap: 10px; margin-bottom: 8px; }
  body.home .reason-num { font-size: 24px; }
  body.home .reason-card > p { -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 12px; }
  body.home .reason-steps { padding-top: 10px; }
  body.home .flow-steps { grid-template-columns: 1fr 1fr; gap: 12px; }
  body.home .flow-arrow { display: none; }
  body.home .footer-main { grid-template-columns: 1fr 2fr; }
  /* has-contact-cardは3項目(brand/links/card)あるのに2カラム指定だと
     3つ目がcol1に自動折返しされ、LINEカードが極端に狭くなって
     ボタン文言が桁の途中で改行される(561px幅で確認)。1050px以下では単カラムに畳む。 */
  body.home .footer-main.has-contact-card { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  body.home .container { width: min(calc(100% - 34px),1180px); }
  body.home .hero { height: auto; max-height: none; padding: 0; }
  body.home .hero-layout { display: flex; flex-direction: column; height: auto; }
  body.home .hero-copy { padding: 24px 0; }
  body.home .hero-photo-panel { position: relative; width: 100%; height: 200px; margin: 0; }
  /* 上端はフェードなし(画像そのまま)、下端のみ背景色へ馴染ませる */
  body.home .hero-photo-panel::before { background: linear-gradient(180deg, transparent 0%, transparent 72%, rgba(241,247,251,.6) 88%, #f1f7fb 100%); }
  body.home .hero h1 { font-size: clamp(34px,8.6vw,44px); }
  body.home .challenge-list { grid-template-columns: 1fr 1fr; }
  body.home .diagnosis-inner { grid-template-columns: 80px 1fr; }
  body.home .diagnosis-button { grid-column: 1/-1; }
  body.home .home-faq { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  body.home .section { padding: 44px 0; }
  body.home .hero-photo-panel { height: 170px; }
  body.home .hero h1 { font-size: 28px; }
  body.home .compare-table-wrap { overflow: visible; box-shadow: none; border: none; }
  body.home .compare-table, body.home .compare-table thead, body.home .compare-table tbody, body.home .compare-table tr, body.home .compare-table th, body.home .compare-table td { display: block; width: auto; min-width: 0; }
  body.home .compare-table thead { display: none; }
  body.home .compare-table tr { margin-bottom: 12px; padding: 14px 16px; background: #fff; border: 1px solid var(--home-line); border-radius: 8px; }
  body.home .compare-table tr:last-child { margin-bottom: 0; }
  body.home .compare-table th.compare-axis { padding: 0 0 10px; border-bottom: 1px solid var(--home-line); margin-bottom: 10px; font-size: 13px; color: var(--home-navy); font-weight: 800; text-align: left; }
  body.home .compare-table td { padding: 6px 0; border: none; text-align: left; }
  body.home .compare-table td::before { content: attr(data-label); display: block; margin-bottom: 3px; color: #8ba0b5; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; }
  /* .compare-usは通常display:flexでチェックマーク用::beforeを使うため、モバイルではラベル表示に差し替える */
  body.home .compare-table td.compare-us { display: block; background: none; color: var(--home-navy); font-weight: 800; padding-left: 20px; position: relative; }
  body.home .compare-table td.compare-us::before { content: attr(data-label); display: block; width: auto; height: auto; margin: 0 0 3px; padding: 0; background: none; border-radius: 0; color: var(--home-blue); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; }
  body.home .compare-table td.compare-us::after { content: "✓"; position: absolute; left: 0; top: 19px; display: grid; place-items: center; width: 14px; height: 14px; color: #fff; background: var(--home-blue); border-radius: 50%; font-size: 8px; font-weight: 900; }
  body.home .table-scroll-hint { display: none; }
  body.home .stats-grid { grid-template-columns: repeat(2, 1fr); }
  body.home .stats-grid > div { padding-block: 14px; padding-inline: 12px; }
  /* 2カラム時は「79,800円〜」が枠に収まるよう数値を一段縮める */
  body.home .stats-grid strong { font-size: 18px; }
  body.home .stats-grid > div { grid-template-columns: 34px 1fr; column-gap: 10px; }
  body.home .stats-grid .stat-icon { width: 34px; height: 34px; }
  body.home .stats-grid .stat-icon svg { width: 17px; height: 17px; }
  body.home .stats-grid > div:nth-child(odd) { border-right: 1px solid var(--home-line); }
  body.home .stats-grid > div:nth-child(-n+2) { border-bottom: 1px solid var(--home-line); }
  body.home .stats-grid > div:last-child { border-right: 0; }
  body.home .challenge-list { grid-template-columns: 1fr; }
  body.home .course-grid { grid-template-columns: 1fr; }
  body.home .course-art-main { padding: 16px; }
  body.home .course-card-body { padding: 16px; }
  body.home .course-card h3 { margin-bottom: 6px; }
  body.home .course-card p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 10px; }
  body.home .course-card ul { margin-bottom: 10px; padding-top: 8px; }
  body.home .course-card-body > a:last-child { padding-top: 8px; }
  body.home .diagnosis-inner { grid-template-columns: 1fr; text-align: center; }
  body.home .diagnosis-clock { margin-inline: auto; }
  body.home .flow-steps { grid-template-columns: 1fr; }
  body.home .footer-main, body.home .footer-main.has-contact-card { grid-template-columns: 1fr; }
}