/* トップページ（`static/index.html`）だけの見た目。共通のものは `assets/site.css`。

   ここに在るのは、トップページにしか出ない節——先頭の大きな見出し・お悩みの一覧・
   5 つの診断項目・レポートの見本・改善プラン・ご利用の流れ・最後の申し込みの区画。 */

.hero { position: relative; overflow: hidden; padding: 78px 0 74px; }
.hero::before { content:""; position:absolute; width:680px; height:680px; right:-260px; top:-280px; border-radius:50%; background: radial-gradient(circle, rgba(230,36,134,.12), rgba(230,36,134,0) 68%); }
.hero-grid { position:relative; display:grid; grid-template-columns: 1.04fr .96fr; align-items:center; gap: 34px; }
h1 { margin: 20px 0 24px; font-size: clamp(48px, 6.2vw, 82px); line-height: 1.11; letter-spacing: -.055em; font-weight: 760; }
h1 strong { display:block; font-weight: 900; }
.hero-lead { margin: 0; font-size: clamp(19px, 2vw, 27px); line-height:1.45; font-weight:800; max-width: 720px; }
.hero-copy { margin: 24px 0 0; color:var(--muted); font-size:17px; max-width:650px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.price-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.price-chip { padding:10px 15px; background:var(--pink-pale); color:var(--pink-dark); font-weight:900; font-size:15px; }
.price-chip.neutral { background:var(--soft); color:var(--ink); }
.hero-visual { position:relative; min-height:520px; display:flex; align-items:center; justify-content:center; }
.hero-visual img { width:100%; border-radius:28px; box-shadow:var(--shadow); }
.float-badge { position:absolute; left:-22px; bottom:42px; padding:17px 20px; border-radius:16px; background:#fff; box-shadow:0 16px 40px rgba(20,24,32,.14); }
.float-badge b { display:block; color:var(--pink); font-size:28px; line-height:1.1; }
.float-badge span { font-size:12px; color:var(--muted); font-weight:700; }

.concern-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.concern { position:relative; min-height:150px; padding:26px 24px 24px 64px; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:0 10px 30px rgba(30,36,45,.04); font-weight:750; }
.concern::before { content:"✓"; position:absolute; left:22px; top:24px; width:28px; height:28px; display:grid; place-items:center; border-radius:50%; color:#fff; background:var(--pink); font-weight:900; }
.empathy { margin-top:28px; padding:25px 28px; border-left:5px solid #8da9d1; background:var(--blue-soft); font-size:18px; font-weight:800; }
.nonblame { margin-top:18px; padding:30px; border-radius:18px; text-align:center; background:#fff; border:1px solid var(--line); }
.nonblame strong { color:var(--pink-dark); }

.diag-grid { display:grid; grid-template-columns:1fr .88fr; align-items:center; gap:56px; }
.axes { display:grid; gap:0; margin-top:28px; border-top:1px solid var(--line); }
.axis { display:grid; grid-template-columns:46px 130px 1fr; gap:10px; align-items:center; padding:20px 0; border-bottom:1px solid var(--line); }
.axis-no { color:var(--pink); font-weight:900; font-variant-numeric:tabular-nums; }
.axis:nth-child(2) .axis-no { color:#e59b00; }
.axis:nth-child(3) .axis-no { color:#d54a9f; }
.axis:nth-child(4) .axis-no { color:#4388d6; }
.axis:nth-child(5) .axis-no { color:#2aab77; }
.axis-name { font-size:20px; font-weight:900; }
.axis-desc { color:var(--muted); }
.diag-image img { border-radius:24px; box-shadow:var(--shadow); }

.report-card { margin-top:52px; border:1px solid var(--line); border-radius:24px; background:#fff; overflow:hidden; box-shadow:0 20px 55px rgba(30,36,45,.06); }
.report-top { padding:34px 38px 26px; }
.metrics { display:grid; grid-template-columns:repeat(5,1fr); gap:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.metric { text-align:center; padding:27px 12px; border-right:1px solid var(--line); }
.metric:last-child { border-right:0; }
.metric strong { display:block; font-size:36px; line-height:1.1; font-weight:900; }
.metric:nth-child(2) strong, .metric:nth-child(3) strong { color:var(--pink); }
.metric:nth-child(4) strong { color:#d98400; }
.metric:nth-child(5) strong { color:#22a36a; }
.metric span { display:block; margin-top:8px; font-size:13px; color:var(--muted); }
.findings { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding:28px 38px; }
.finding h3 { margin:0 0 7px; font-size:18px; }
.finding p { margin:0; color:var(--muted); font-size:14px; }
.finding-urgent h3 { color:var(--pink-dark); }
.finding-plan h3 { color:#d98400; }
.finding-good h3 { color:#22a36a; }
.report-preview { background:#fafafa; padding:0 38px 34px; }
.report-preview img { width:100%; max-height:360px; object-fit:cover; object-position:center 73%; border:1px solid var(--line); border-radius:13px; }
.deliverables { display:flex; flex-wrap:wrap; gap:9px; padding:24px 38px 34px; }
.deliverables span { border:1px solid var(--line); border-radius:999px; padding:9px 13px; font-size:13px; background:var(--soft); font-weight:750; }
.report-actions { display:flex; flex-wrap:wrap; gap:14px; padding:24px 38px 0; }

.choice-visual { margin:20px auto 45px; max-width:1000px; }
.choice-visual img { width:100%; border-radius:24px; box-shadow:var(--shadow); }
.plan-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.plan { padding:36px; border:1px solid var(--line); border-radius:24px; background:#fff; position:relative; overflow:hidden; }
.plan.featured { border-color:rgba(230,36,134,.35); }
.plan.featured::before { content:"修正まで対応"; position:absolute; top:20px; right:-40px; width:170px; padding:7px 0; transform:rotate(36deg); text-align:center; background:var(--pink); color:#fff; font-size:11px; font-weight:900; }
.plan-kicker { color:var(--pink); font-weight:900; }
.plan h3 { margin:8px 0 5px; font-size:28px; }
.plan-sub { color:var(--muted); font-weight:700; }
.plan ul { margin:26px 0; padding:0; list-style:none; }
.plan li { position:relative; padding:10px 0 10px 27px; border-bottom:1px solid var(--line); }
.plan li::before { content:"•"; position:absolute; left:4px; color:var(--pink); font-weight:900; }
.plan-price { display:inline-block; padding:10px 14px; background:var(--pink-pale); color:var(--pink-dark); font-size:19px; font-weight:900; }
.plan:first-child .plan-price { background:#ecebed; color:var(--ink); }

.maintenance { margin-top:28px; padding:36px; border-radius:24px; background:linear-gradient(135deg,#17191d,#30343b); color:#fff; }
.maintenance h3 { margin:0 0 10px; font-size:30px; }
.maintenance p { color:rgba(255,255,255,.72); }
.support-tags { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.support-tags span { padding:9px 12px; border:1px solid rgba(255,255,255,.18); border-radius:999px; font-size:13px; }

.flow { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; counter-reset:steps; }
.flow-item { position:relative; min-height:145px; padding:23px 17px; border-radius:18px; background:#fff; border:1px solid var(--line); counter-increment:steps; }
.flow-item::before { content:counter(steps, decimal-leading-zero); display:block; color:var(--pink); font-weight:900; font-size:13px; margin-bottom:19px; }
.flow-item:not(:last-child)::after { content:"→"; position:absolute; right:-14px; top:50%; z-index:2; transform:translateY(-50%); width:26px; height:26px; display:grid; place-items:center; border-radius:50%; background:var(--pink); color:#fff; font-weight:900; }
.flow-item strong { font-size:17px; }

.faq-lead { max-width:900px; margin:0 auto; text-align:center; }
.faq-lead .btn { margin-top:26px; }

.final-cta { padding:88px 0; background:var(--soft); }
.cta-panel { display:grid; grid-template-columns:1fr auto; align-items:center; gap:30px; padding:48px; border:1px solid rgba(230,36,134,.18); border-radius:28px; background:#fff; box-shadow:var(--shadow); }
.cta-panel h2 { margin:0; font-size:clamp(32px,4vw,50px); letter-spacing:-.035em; }
.cta-panel p { margin:12px 0 0; color:var(--muted); }
.cta-actions { display:flex; flex-direction:column; gap:10px; min-width:240px; }
.cta-note { font-size:12px; color:var(--muted); text-align:center; }

@media (max-width: 980px) {
  .hero { padding-top:54px; }
  .hero-grid, .diag-grid { grid-template-columns:1fr; }
  .hero-visual { min-height:auto; max-width:720px; margin:0 auto; }
  .float-badge { left:18px; bottom:25px; }
  .concern-grid { grid-template-columns:repeat(2,1fr); }
  .metrics { grid-template-columns:repeat(3,1fr); }
  .metric { border-bottom:1px solid var(--line); }
  .metric:nth-child(3) { border-right:0; }
  .findings { grid-template-columns:1fr; }
  .flow { grid-template-columns:repeat(3,1fr); }
  .flow-item:nth-child(3)::after { display:none; }
  .cta-panel { grid-template-columns:1fr; }
  .cta-actions { flex-direction:row; flex-wrap:wrap; min-width:0; }
}
@media (max-width: 680px) {
  .hero { padding:42px 0 54px; }
  h1 { font-size:46px; }
  .hero-lead { font-size:20px; }
  .hero-copy { font-size:15px; }
  .hero-visual { flex-direction:column; }
  .hero-visual img { border-radius:18px; }
  .float-badge { position:static; margin-top:12px; }
  .concern-grid, .plan-grid { grid-template-columns:1fr; }
  .concern { min-height:auto; }
  .axis { grid-template-columns:38px 88px 1fr; gap:8px; padding:16px 0; }
  .axis-name { font-size:16px; }
  .axis-desc { font-size:13px; }
  .report-top, .findings, .report-preview, .deliverables, .report-actions { padding-left:19px; padding-right:19px; }
  .metrics { grid-template-columns:repeat(2,1fr); }
  .metric:nth-child(2) { border-right:0; }
  .metric:nth-child(3) { border-right:1px solid var(--line); }
  .metric:last-child { grid-column:1 / -1; }
  .metric strong { font-size:29px; }
  .plan { padding:28px 22px; }
  .maintenance { padding:28px 22px; }
  .flow { grid-template-columns:1fr; }
  .flow-item { min-height:auto; }
  .flow-item:not(:last-child)::after { content:"↓"; right:50%; top:auto; bottom:-19px; transform:translateX(50%); }
  .flow-item:nth-child(3)::after { display:grid; }
  .cta-panel { padding:30px 22px; }
  .cta-actions { flex-direction:column; }
}