/* ━━━ 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){
  /* ヘッダーレイアウト: ロゴ左・右側にマイページ+無料体験+☰ */
  .header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 16px;
  }
  .header-inner .logo{flex-shrink:0;}
  .header-right{
    display:flex!important;
    align-items:center;
    gap:6px;
    margin-left:auto;
  }
  /* マイページ・無料体験ボタン両方表示 */
  .btn-mypage{display:flex!important;padding:7px 10px!important;font-size:12px!important;background:#3B82F6!important;color:#fff!important;border:none!important;border-radius:8px!important;}
  .btn-try{display:flex!important;padding:7px 10px!important;font-size:12px!important;}
  /* ハンバーガーボタン右端 */
  .burger-btn{display:flex;order:99;}
  .features-grid{grid-template-columns:repeat(2,1fr)!important;}

  /* 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{
    display:block;
    padding:12px 16px;
    font-size:14px;
    border-radius:10px;
    color:var(--dark);
    width:100%;
    box-sizing:border-box;
    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{width:100%;}
  header nav .nav-item:hover > .dropdown{animation:none;}

  /* セクション余白 */
  section{padding:36px 24px;}
  .page-hero{padding:14px 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列 */
    .themes-grid,
  .example-grid,
  .corp-features,
  .merit-grid,
  .services-grid,
  .ist-price-grid,
  .mgmt-grid,
  .schedule-grid,
  .stats-grid,
  .score-grid,
  .inq-layout,
  .trial-layout,
  .concept-grid,
  .faq-wrap,

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

  /* テーブル横スクロール */
  .tbl-wrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    display:block;
    width:100%;
  }
  .tbl-unified{
    min-width:480px;
    display:table;
  }
  .tbl-unified th,
  .tbl-unified td{
    padding:10px 12px;
    font-size:12px;
    white-space:normal;
    word-break:break-word;
  }

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


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

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

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

  /* グリッド → 1列 */

  /* Your Challenge → 1列 */

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

  /* FAQ */

  /* フッター */
  .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;background:#3B82F6!important;color:#fff!important;border:none!important;}
}


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

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

  /* セクション余白 */
  section{padding:28px 16px!important;}
  .page-hero{padding:10px 16px!important;}
  .page-title{font-size:clamp(22px,6vw,38px)!important;}
  .cta-section{padding:28px 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;}
}