/* ========================================
   /ai/ 副業コース 追加スタイル（親 styles.css の上に重ねる）
   方針: 親の部品（section-title / step-card / pricing-card / flow-card / contact）をそのまま使い、
         /ai/ 固有のものだけここで足す。
   ======================================== */

/* 親 script.js は contactForm に tel1〜3 を前提にしており /ai/ では初期化が止まるため、
   スクロール表示（.js-animate）に依存せず常時表示にする。
   親の .js-animate.is-visible{top:340px} は position を持つ要素を押し下げるので top も殺す */
.js-animate{opacity:1 !important;transform:none !important;top:auto !important;left:auto !important}

/* ---------- ヒーロー ---------- */
.ai-hero{height:auto;min-height:0;padding:150px 0 72px}
.ai-hero .hero-inner{position:static;transform:none;text-align:center;max-width:960px;margin:0 auto;padding:0 24px}
.ai-hero .hero-kicker{display:inline-block;font-size:.875rem;font-weight:600;color:#ef8f3a;letter-spacing:.08em;border:1px solid #ef8f3a;border-radius:100px;padding:6px 16px;margin-bottom:26px;background:#fff}
.ai-hero .hero-title-line1,.ai-hero .hero-title-line2{position:static;transform:none;font-size:clamp(1.625rem,4.4vw,2.75rem);font-weight:700;line-height:1.5;letter-spacing:.02em;margin:0}
.ai-hero .hero-lead{max-width:720px;margin:26px auto 0;font-size:clamp(1rem,1.8vw,1.0625rem);line-height:2;color:#333;text-align:left}
.ai-hero .hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.ai-hero .hero-note{margin-top:14px;font-size:.8125rem;color:#6b6b6b}
.ai-hero .hero-promise{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.ai-hero .hero-promise span{font-size:.8125rem;background:#fff4ea;color:#b85c12;border-radius:100px;padding:6px 14px;font-weight:600}

/* ---------- 共通 ---------- */
.section-pad{padding:88px 0}
.bg-soft{background:#fbf8f4}
.lead-center{max-width:720px;margin:0 auto 44px;text-align:center;line-height:2;color:#333}
.sub-title{text-align:center;font-size:1.0625rem;color:#6b6b6b;margin:-24px 0 36px}

/* ---------- 止まってませんか（4つ） ---------- */
.fears{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:960px;margin:0 auto}
.fear{background:#fff;border-radius:12px;padding:28px 28px 26px;box-shadow:0 2px 12px rgba(0,0,0,.06)}
.fear .q{font-size:1.125rem;font-weight:700;line-height:1.6;margin-bottom:12px;color:#1a1a1a}
.fear .q::before{content:"“";color:#ef8f3a;margin-right:2px}.fear .q::after{content:"”";color:#ef8f3a;margin-left:2px}
.fear .a{font-size:.9375rem;color:#444;line-height:1.9;padding-left:14px;border-left:3px solid #ef8f3a}

/* ---------- 僕も3回止まりました（親の step-card を流用） ---------- */
.story-steps .step-image{background:#fbf8f4}
.step-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#9aa0a6;font-size:.8125rem;text-align:center;line-height:1.7;padding:16px}
.story-quote{max-width:760px;margin:44px auto 0;text-align:center;font-size:clamp(1.125rem,2.2vw,1.375rem);font-weight:700;line-height:1.8}
.story-quote small{display:block;font-size:.8125rem;font-weight:400;color:#6b6b6b;margin-top:10px}

/* ---------- やること／やらないこと ---------- */
.promise{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1000px;margin:0 auto}
.promise-box{border-radius:12px;padding:30px 28px;background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.06)}
.promise-box h3{font-size:1.25rem;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.promise-box.yes h3::before{content:"";width:12px;height:12px;border-radius:50%;background:#ef8f3a}
.promise-box.no h3::before{content:"";width:12px;height:12px;border-radius:50%;background:#c4c4c4}
.promise-box ul{list-style:none;padding:0;margin:0}
.promise-box li{padding:12px 0;border-bottom:1px dashed #e8e8e8;font-size:.9375rem;line-height:1.85}
.promise-box li:last-child{border-bottom:0}
.promise-box li b{display:block;font-size:1rem;margin-bottom:2px}
.promise-box.no li b{color:#555}
.promise-box.no li b::before{content:"✕ ";color:#c4c4c4}
.promise-box.yes li b::before{content:"○ ";color:#ef8f3a}

/* ---------- 4段階 ---------- */
.stages{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.06)}
.stage{padding:28px 22px;border-right:1px solid #f0e4d8}
.stage:last-child{border-right:0}
.stage .s{font-family:Avenir,"Avenir Next",sans-serif;font-weight:700;color:#ef8f3a;font-size:1.75rem;line-height:1}
.stage h4{font-size:1.0625rem;margin:10px 0 8px;line-height:1.5}
.stage p{font-size:.875rem;color:#444;line-height:1.8}
.stages-note{max-width:820px;text-align:center;font-size:.8125rem;color:#6b6b6b;margin:18px auto 0;line-height:1.8}

/* ---------- コース（親の pricing-card を4列で） ---------- */
.tiers.pricing-cards{grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:28px;align-items:stretch}
.tiers .pricing-card{display:flex;flex-direction:column}
.tiers .pricing-card.rec{box-shadow:0 0 0 2px #ef8f3a,0 2px 12px rgba(0,0,0,.06)}
.tiers .pricing-card-header{padding:14px 16px}
.tiers .pricing-name{font-size:1.0625rem;color:#fff;margin:0}
.tiers .rec-badge{display:inline-block;background:#fff;color:#ef8f3a;font-size:.6875rem;font-weight:700;padding:3px 10px;border-radius:100px;margin-bottom:6px}
.tiers .pricing-card-body{padding:24px 20px 26px;flex:1;display:flex;flex-direction:column}
.tiers .pr{font-size:2.125rem;font-weight:700;line-height:1.1;text-align:center}
.tiers .pr small{font-size:.8125rem;font-weight:500;color:#6b6b6b;margin-left:4px}
.tiers .wk{font-size:.8125rem;color:#555;text-align:center;margin:8px 0 18px;line-height:1.6}
.tiers dl{margin:0;display:flex;flex-direction:column;gap:12px;flex:1}
.tiers dt{font-size:.75rem;font-weight:700;color:#ef8f3a;letter-spacing:.06em}
.tiers dd{font-size:.9rem;line-height:1.8;color:#333;margin:2px 0 0}
.tiers dd.goal{background:#fff4ea;border-radius:8px;padding:10px 12px;font-size:.875rem;font-weight:600;line-height:1.6}
.tiers-note{max-width:860px;margin:0 auto 28px;font-size:.8125rem;color:#555;line-height:1.9;text-align:center}
.tiers-note strong{color:#1a1a1a}

/* ---------- 売らない方 ---------- */
.nosell{max-width:820px;margin:0 auto;background:#fff;border-radius:12px;padding:32px 32px;box-shadow:0 2px 12px rgba(0,0,0,.06)}
.nosell ul{margin:12px 0 0 0;padding:0;list-style:none}
.nosell li{padding:10px 0 10px 28px;position:relative;line-height:1.8;border-bottom:1px dashed #e8e8e8}
.nosell li:last-child{border-bottom:0}
.nosell li::before{content:"✕";position:absolute;left:4px;color:#c4c4c4;font-weight:700}
.nosell p.note{font-size:.875rem;color:#555;margin-top:18px;line-height:1.8}

/* ---------- 中村のこと ---------- */
.profile{display:grid;grid-template-columns:280px 1fr;gap:40px;align-items:start;max-width:1000px;margin:0 auto}
.profile-photo{aspect-ratio:3/4;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#9aa0a6;font-size:.8125rem;text-align:center;padding:16px;box-shadow:0 2px 12px rgba(0,0,0,.06);line-height:1.7}
.profile h3{font-size:1.5rem;margin-bottom:4px}
.profile .role{font-size:.9375rem;color:#ef8f3a;font-weight:600;margin-bottom:18px}
.profile p{line-height:2;margin-bottom:14px}
.profile .facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.profile .facts span{font-size:.8125rem;background:#fff;border:1px solid #f0e4d8;border-radius:100px;padding:5px 12px}

/* ---------- はじめ方（親の flow-card を流用） ---------- */
.flow-step-visual.ph{display:flex;align-items:center;justify-content:center;font-family:Avenir,"Avenir Next",sans-serif;font-size:2.5rem;color:#ef8f3a;font-weight:700;background:#fbf8f4;border-radius:10px;min-height:120px}
.flow-note{max-width:720px;margin:28px auto 0;text-align:center;font-size:.875rem;color:#555;line-height:1.9}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin:0 auto}
.faq details{background:#fff;border-radius:10px;padding:0 24px;margin-bottom:12px;box-shadow:0 2px 12px rgba(0,0,0,.05)}
.faq summary{cursor:pointer;list-style:none;padding:20px 0;font-weight:700;display:flex;gap:12px;align-items:flex-start;line-height:1.6}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";color:#ef8f3a;font-family:Avenir,"Avenir Next",sans-serif;font-weight:700;flex:0 0 auto}
.faq .ans{padding:0 0 20px 28px;line-height:1.9;color:#333}
.faq .ans::before{content:"A. ";color:#ef8f3a;font-weight:700}

/* ---------- レスポンシブ ---------- */
@media (max-width:1024px){
  .tiers.pricing-cards,.stages{grid-template-columns:repeat(2,1fr)}
  .stages{gap:0}
  .stage{border-right:0;border-bottom:1px solid #f0e4d8}
  .stage:nth-child(odd){border-right:1px solid #f0e4d8}
}
@media (max-width:900px){
  .promise,.profile{grid-template-columns:1fr}
  .profile-photo{max-width:280px}
}
@media (max-width:640px){
  .ai-hero{padding:120px 0 56px}
  .ai-hero .hero-inner{padding:0 18px}
  .ai-hero .hero-title-line1,.ai-hero .hero-title-line2{font-size:1.375rem;white-space:nowrap}
  .ai-hero .hero-lead{text-align:left}
  .fears,.tiers.pricing-cards,.stages{grid-template-columns:1fr}
  .stage,.stage:nth-child(odd){border-right:0}
  .section-pad{padding:64px 0}
  .fear,.promise-box,.nosell{padding:22px 20px}
}