/* ============================================
   RESPONSIVE
============================================ */
@media(max-width:1180px){
  :root{
    --sp-section:100px 32px;
    --sp-section-lg:100px 32px;
  }
  .hero{padding:48px 32px 80px;}
  .hero-inner{grid-template-columns:1fr;gap:60px;}
  .hero-visual{max-width:480px;margin:0 auto;}
  .school-cases{grid-template-columns:repeat(2,1fr);}
  .school-case{border-right:1px solid rgba(176,136,84,0.15);}
  .school-case:nth-child(2){border-right:none;}
  .school-case:nth-child(1),.school-case:nth-child(2){border-bottom:1px solid rgba(176,136,84,0.15);}
  .lineup-grid{grid-template-columns:repeat(3,1fr);}
  .flow-grid{grid-template-columns:repeat(3,1fr);gap:12px;}
  .flow-step::after{display:none;}
  .why-now-grid{grid-template-columns:1fr;gap:60px;}
}
@media(max-width:820px){
  .nav-links{display:none;}
  .menu-toggle{display:block;margin-left:auto;}
  .hero-stats-bar{grid-template-columns:repeat(2,1fr);gap:24px 0;padding:32px 24px;}
  .hero-stat{padding:0 20px;}
  .hero-stat:nth-child(2){border-right:none;}
  .hero-stat:nth-child(3){padding-top:24px;border-top:1px solid var(--rule);}
  .hero-stat:nth-child(4){padding-top:24px;border-top:1px solid var(--rule);}
  .concern-grid{grid-template-columns:repeat(2,1fr);gap:20px;}
  .price-grid{grid-template-columns:1fr;}
  .school-features{grid-template-columns:1fr;gap:20px;}
  .records-grid{grid-template-columns:1fr;}
  .timing{padding-top:100px;padding-bottom:100px;}
  .why-grid{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .footer-top{grid-template-columns:1fr 1fr;gap:40px;}
  .mobile-cta{display:flex;}
  body{padding-bottom:84px;}
  /* .for-school / .story-section は --sp-section-lg 変数で1180px以下で自動縮小 */
  .story-quote{padding:0 40px;font-size:24px;}
  .story-quote::before{left:-10px;}
  .story-quote::after{right:-10px;}
}
@media(max-width:540px){
  :root{
    --sp-section:80px 20px;
    --sp-section-lg:80px 20px;
  }
  .nav{padding:14px 20px;gap:16px;}
  .hero{padding:36px 20px 60px;}
  .hero-title{font-size:28px;line-height:1.7;letter-spacing:0.02em;}
  .concern-grid{grid-template-columns:1fr;}
  .lineup-grid{grid-template-columns:repeat(2,1fr);}
  .flow-grid{grid-template-columns:repeat(2,1fr);}
  .school-cases{grid-template-columns:1fr;}
  .school-cases>.school-case{border-right:none;border-bottom:1px solid rgba(176,136,84,0.15);}
  .school-cases>.school-case:last-child{border-bottom:none;}
  .footer-top{grid-template-columns:1fr;}
  .section-head{margin-bottom:56px;}
  .brand-text .jp{font-size:16px;}
  .why-now-visual{padding:32px 24px;}
  .story-quote{padding:0 20px;font-size:22px;}
}

/* ============================================
   P2 FIXES: レイアウト・タイポグラフィ・エッジケース
============================================ */

/* --- body padding-top ---
   header は position:sticky（フロー内）のため padding-top 不要。
   fixed化する場合のみ復活させること。
   body{padding-top:88px;}
--- */

/* --- header GPU層昇格（Safari backdrop-filter対策） --- */
header{
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
}

/* --- nav-links 高倍率ズーム対策（wrapのみグローバル、gap縮小は中画面以下） --- */
.nav-links{flex-wrap:wrap;}
@media(max-width:1180px){
  .nav-links{gap:16px 24px;}
}

/* --- SVGチャート CLS防止 --- */
.chart-svg-wrap{aspect-ratio:560/340;width:100%;}

/* --- section-title clamp化 --- */
.why-now-content .section-title{font-size:clamp(24px,5vw,38px);}

/* --- price-card 高さ揃え --- */
.price-grid{align-items:stretch;}
.price-card{display:flex;flex-direction:column;}
.price-note{flex:1;}

/* --- why-grid 中間ブレイク --- */
@media(max-width:1180px) and (min-width:821px){
  .why-grid{grid-template-columns:repeat(2,1fr);}
}

/* --- 長文楽器名のoverflow対策 --- */
.lineup-name,.price-name,.store-name-compact,.record-ttl{
  overflow-wrap:break-word;
  word-break:break-all;
}

/* --- 高額数値の桁溢れ対策 --- */
.record-total-amount{
  font-size:clamp(20px,4vw,36px);
  white-space:nowrap;
}

/* --- FAQ回答の可読性向上 --- */
.faq-a-inner{font-size:14px;line-height:2.0;letter-spacing:0.03em;}

/* --- section-kicker 光学補正 --- */
.section-kicker{letter-spacing:0.3em;padding-left:0.15em;}

/* --- chart-footer 可読性 --- */
.chart-footer-text{font-size:12px;line-height:1.9;}

/* --- hero-stat スマホ時高さ揃え --- */
@media(max-width:820px){
  .hero-stat{
    min-height:100px;
    display:flex;flex-direction:column;justify-content:center;
  }
}

/* --- contact-card 高さ揃え --- */
.contact-grid{align-items:stretch;}
.contact-card{display:flex;flex-direction:column;}
.contact-card .contact-desc{flex:1;}

/* --- 540px以下追加修正 --- */
@media(max-width:540px){
  .concern{padding:28px 20px;}
}

/* --- 400px以下 iPhone SE対応 --- */
@media(max-width:400px){
  .btn-primary,.btn-secondary{padding:18px 20px;gap:12px;}
  .btn-primary .icon,.btn-secondary .icon{width:36px;height:36px;}
}

/* --- AS-05: standards-grid 最終行間延び防止 --- */
.standards-grid{
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
}

/* --- AS-06: section-inner コンテナ幅最適化（変数で一元管理） --- */
:root{--container-wide:min(100% - 3rem,1200px);}

/* --- TY-06: price-range 視覚強調 --- */
.price-range{
  font-size:clamp(22px,3.5vw,32px);
  font-weight:700;
  color:var(--amber);
}

/* Fade-in animation */
.fade-in{
  opacity:0;transform:translateY(30px);
  animation:fadeIn 1s ease forwards;
}
@keyframes fadeIn{
  to{opacity:1;transform:translateY(0);}
}