/* =================================
   中間サイズ: 501px〜800px
   コンテンツ幅を400pxに固定
   ================================= */

@media (min-width: 501px) and (max-width: 800px) {
  /* コンテンツ幅を400pxに固定して中央配置 */
  .hero-bg-mobile {
    width: 400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  .program-flow .container,
  .features-container,
  .curriculum-wrapper,
  .voices-container,
  .faq-list,
  .price-wrapper {
    max-width: 400px !important;
    width: 400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  .target-box,
  .point-box {
    width: 400px !important;
    max-width: 400px !important;
  }
  
  .outcomes-grid {
    max-width: 400px !important;
    width: 400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  .voices-grid {
    max-width: 400px !important;
    width: 400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 40px 6px !important;
  }
  
  /* 固定バナーの背景は画面幅いっぱい、コンテンツは400pxに */
  .fixed-banner {
    max-width: none;
    left: 0;
    transform: none;
    right: 0;
  }
  
  .fixed-banner .hero-note,
  .fixed-banner .cta-button {
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .fixed-banner .cta-button {
    max-width: 360px !important;
  }
}

/* =================================
   SP版: 500px以下 - レスポンシブ
   ================================= */

@media (max-width: 500px) {
  /* Reset any fixed widths from intermediate size */
  .hero-bg-mobile {
    width: calc(100vw - 40px) !important;
    height: 320px !important;
  }
  
  .program-flow .container,
  .features-container,
  .target-box,
  .point-box,
  .curriculum-wrapper,
  .outcomes-grid,
  .faq-list,
  .price-wrapper {
    max-width: calc(100vw - 40px) !important;
    width: auto !important;
  }
  
  /* voices-gridの調整 */
  .voices-container {
    max-width: calc(100vw - 40px) !important;
    width: auto !important;
  }
  
  .voices-grid {
    grid-template-columns: repeat(2, minmax(140px, 1fr));
    gap: 40px 10px;
    max-width: 320px !important;
    width: 100% !important;
    margin: 0 auto;
  }
  
  .voice-card {
    width: 100%;
    max-width: 150px;
    height: 130px;
    margin: 0 auto;
  }
  
  /* 固定バナーをレスポンシブに戻す */
  .fixed-banner {
    max-width: none;
    left: 0;
    transform: none;
    right: 0;
  }
}

/* =================================
   1150px以下でカリキュラムカードの調整
   ================================= */

@media (max-width: 1150px) and (min-width: 801px) {
  /* カリキュラムセクションの最小幅を調整 */
  .curriculum-section {
    min-width: auto;
  }
  
  /* カリキュラムラッパーの最小幅を調整 */
  .curriculum-wrapper {
    min-width: auto;
    max-width: 850px;
  }
  
  /* カリキュラムグリッドのカラムを400pxに */
  .curriculum-grid {
    grid-template-columns: repeat(2, 400px);
  }
  
  /* カリキュラムカードの幅を400pxに */
  .curriculum-card {
    width: 400px;
  }
  
  /* イラストの位置調整 */
  .curriculum-illust {
    left: 650px;
  }
}

/* =================================
   801px以上1150px以下の調整
   ================================= */

@media (min-width: 801px) and (max-width: 1150px) {
  .steps {
    gap: 8px !important;
  }
  
  .step-card {
    width: 260px !important;
  }
  
  .step-background {
    width: 260px !important;
  }
  
  /* features-sectionのpaddingを調整 */
  .features-section {
    padding: 60px 10px !important;
  }
  
  /* target-boxとpoint-boxを400pxに */
  .target-box,
  .point-box {
    width: 400px !important;
  }
  
  /* point-cardも400pxに */
  .point-card {
    width: 400px !important;
  }
  
  /* features-containerのgapを小さく、最大幅を設定 */
  .features-container {
    gap: 10px;
    max-width: 850px !important;
  }
  
  /* point-card内のpタグのフォントサイズを10pxに */
  .point-text p {
    font-size: 10px !important;
  }
}