/* ━━━ InstaBiz mobile.css v3 ━━━ */
/* ブレークポイント: 1024px / 768px / 480px */

/* ━━━ ハンバーガーボタン（常時定義）━━━ */
.burger-btn{
  display:none;
  flex-direction:column;justify-content:center;align-items:center;
  gap:5px;
  width:40px;height:40px;
  background:none;
  border:1px solid var(--border);
  border-radius:8px;
  cursor:pointer;
  padding:8px;
  flex-shrink:0;
}
.burger-btn span{
  display:block;width:18px;height:2px;
  background:var(--dark);border-radius:2px;
  transition:all 0.28s cubic-bezier(0.4,0,0.2,1);
}
.burger-btn.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger-btn.active span:nth-child(2){opacity:0;transform:scaleX(0);}
.burger-btn.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ━━━ スクロールアニメーション ━━━ */
.fade-in{
  opacity:0;
  transform:translateY(16px);
  transition:opacity 0.5s ease,transform 0.5s ease;
}
.fade-in.visible{opacity:1;transform:translateY(0);}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   タブレット (max 1024px)
   PC → タブレット
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media(max-width:1024px){

  /* ハンバーガーメニュー表示 */
  .burger-btn{display:flex;}

  /* PCナビ非表示 */
  header nav{
    display:none;
    position:fixed;
    top:var(--header-h);
    left:0;right:0;
    background:var(--white);
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
    padding:12px 16px 20px;
    flex-direction:column;
    gap:2px;
    box-shadow:0 8px 32px rgba(0,0,0,0.12);
    z-index:999;
    max-height:calc(100vh - var(--header-h));
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  header nav.mobile-open{display:flex;}

  /* ナビリンク */
  header nav .nav-link,
  header nav .nav-plain{
    padding:12px 16px;
    font-size:14px;
    border-radius:10px;
    color:var(--dark);
    width:100%;
    text-align:left;
    background:none;
  }
  header nav .nav-link:hover,
  header nav .nav-plain:hover,
  header nav .nav-link.active,
  header nav .nav-plain.active{
    background:var(--red-light);color:var(--red);
  }

  /* ドロップダウン */
  header nav .dropdown{
    display:block!important;
    position:static;
    box-shadow:none;
    border:none;
    background:var(--warm);
    border-radius:10px;
    margin:4px 0 6px 8px;
    padding:4px 0;
  }
  header nav .dropdown a{
    padding:10px 20px;font-size:13px;color:var(--mid);
  }
  header nav .dropdown a:hover{background:var(--red-light);color:var(--red);}
  header nav .nav-item:hover > .dropdown{animation:none;}

  /* セクション余白 */
  section{padding:72px 24px;}
  .page-hero{padding:64px 24px;}

  /* フッター */
  .footer-top{grid-template-columns:1fr!important;}
  .footer-nav{grid-template-columns:1fr 1fr!important;}

  /* ヒーロー */
  .hero-grid{grid-template-columns:1fr!important;}
  .hero-cards{display:none!important;}
  .hero-left{padding-bottom:60px;}

  /* グリッド → 2列 */
  .reasons-grid{grid-template-columns:repeat(2,1fr)!important;}
  .courses-grid{grid-template-columns:repeat(2,1fr)!important;}
  .pricing-grid{grid-template-columns:repeat(2,1fr)!important;}
  .steps-grid{grid-template-columns:repeat(2,1fr)!important;}

  /* 受講生の声 → 2列 */
  .voices-grid,.voice-grid{grid-template-columns:repeat(2,1fr)!important;}

  /* その他グリッド → 1列 */
  .course-type-grid,
  .themes-grid,
  .example-grid,
  .features-grid,
  .corp-features,
  .merit-grid,
  .services-grid,
  .ist-price-grid,
  .mgmt-grid,
  .schedule-grid,
  .stats-grid,
  .score-grid,
  .ai-grid,
  .inq-layout,
  .trial-layout,
  .concept-grid,
  .faq-wrap,
  .pillar-grid{grid-template-columns:1fr!important;}

  .flow-grid{grid-template-columns:1fr 1fr!important;}
  .concept-grid.reverse{direction:ltr!important;}
  .price-card.featured{transform:scale(1)!important;}
  .form-card{position:static!important;}
  .trial-form-wrap{position:static!important;}

  /* テーブル横スクロール */
  .diff-table,.compare-table,.score-table{
    display:block;overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  /* steps */
  .steps-grid::before,.step-arrow{display:none!important;}
  .flow-timeline::before{left:24px;}
  .flow-step{grid-template-columns:56px 1fr;gap:16px;}
  .flow-circle{width:56px;height:56px;font-size:20px;}
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   スマホ横 (max 768px)
   タブレット → スマホ横
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media(max-width:768px){

  /* セクション余白 */
  section{padding:60px 20px!important;}
  .page-hero{padding:52px 20px!important;}

  /* ヒーロー */
  h1{font-size:clamp(36px,8vw,52px)!important;}
  .hero-trust{gap:16px!important;}
  .trust-sep{display:none!important;}

  /* グリッド → 1列 */
  .reasons-grid{grid-template-columns:1fr!important;}
  .courses-grid{grid-template-columns:1fr!important;}
  .pricing-grid{grid-template-columns:1fr!important;}
  .steps-grid{grid-template-columns:1fr!important;}
  .flow-grid{grid-template-columns:1fr!important;}

  /* Your Challenge → 1列 */
  .pain-grid{grid-template-columns:1fr!important;}

  /* 受講生の声 → 1列 */
  .voices-grid,.voice-grid{grid-template-columns:1fr!important;}

  /* FAQ */
  .faq-grid{grid-template-columns:1fr!important;gap:24px;}

  /* フッター */
  .footer-nav{grid-template-columns:1fr!important;}
  .footer-top{gap:24px!important;}

  /* ボタン縦並び */
  .hero-btns,
  .cta-btns,
  .final-cta-btns,
  .steps-cta,
  .t-btns,
  .final-cta-actions{
    flex-direction:column!important;
    align-items:stretch!important;
  }
  .btn-red,.btn-navy,.btn-outline,.btn-white,
  .btn-ghost-white,.btn-hero,.btn-hero-ghost,
  .btn-cta,.btn-cta-s,.btn-home,.btn-back,
  .btn-trial-lg,.btn-cta-main,.btn-submit{
    text-align:center!important;
    justify-content:center!important;
  }

  /* マイページボタン非表示 */
  .btn-mypage{display:none!important;}
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   スマホ縦 (max 480px)
   スマホ横 → スマホ縦
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media(max-width:480px){

  /* ヘッダー */
  .header-inner{padding:0 16px!important;}

  /* セクション余白 */
  section{padding:56px 16px!important;}
  .page-hero{padding:48px 16px!important;}
  .page-title{font-size:clamp(24px,7vw,38px)!important;}
  .cta-section{padding:56px 16px!important;}
  footer{padding:40px 16px 24px!important;}

  /* ヒーロー */
  .hero-inner{padding:48px 16px 60px!important;}
  h1{font-size:clamp(34px,10vw,48px)!important;}
  .hero-trust{flex-wrap:wrap!important;}

  /* chip */
  .hero-chip,.section-chip,.page-chip{font-size:10px!important;}

  /* フォーム */
  .form-card{padding:24px 20px!important;}
  .free-box{grid-template-columns:1fr!important;text-align:center;}
  .btn-free{width:100%;justify-content:center;}

  /* 料金 */
  .pricing-grid{gap:12px!important;}
}