/* モバイル用ヒーロー画像 - Contain方式（画像全体表示） */

/* モバイル・タブレット (〜1024px) */
@media (max-width: 1024px) {
  /* 基本リセット */
  html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
  }

  /* PC画像を非表示 */
  .hero-image-pc {
    display: none !important;
  }

  /* モバイル画像も非表示（背景画像として処理するため） */
  .hero-image-mobile {
    display: none !important;
  }

  /* ヒーローセクション */
  .hero {
    position: relative;
    width: 100%;
    min-height: auto;
    height: auto;
    padding: 0;
    margin: 0;
    margin-bottom: 0 !important;
    display: block;
    /* 背景色を白に設定 */
    background: #ffffff;
  }

  /* 背景画像を疑似要素で配置 */
  .hero::after {
    content: '';
    position: relative;
    display: block;
    width: 100%;
    height: 0;
    background-image: url('img/画像/TOP/SP1-min.png');
    background-size: contain;
    background-position: center top;
    background-repeat: no-repeat;
    z-index: 1;
    /* アスペクト比を維持（画像の縦横比に応じて調整） */
    padding-bottom: 177.78%; /* 9:16 = 177.78% */
  }

  /* ヘッダーの高さ分の余白を確保 */
  .hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px; /* ヘッダーの高さ */
    background: transparent;
    z-index: 2;
  }

  /* CTAボタンエリア - 画像の底辺に配置 */
  .hero-content {
    position: absolute;
    bottom: 0; /* 画像の底辺に配置 */
    left: 0;
    right: 0;
    width: 100%;
    padding: 20px;
    z-index: 20;
    /* 背景を透明に */
    background: transparent;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  /* CTAボタンコンテナ */
  .hero-buttons {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  /* CTAボタンスタイル */
  .hero-cta-custom {
    background: var(--gradient-cta-primary);
    border-radius: 50px !important;
    padding: 15px 25px;
    width: 90%;
    max-width: 350px;
    text-align: center;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
  }

  .cta-line-text {
    display: block;
    font-size: 12px;
    color: var(--white);
    opacity: 0.9;
  }

  .cta-main-text {
    display: block;
    background: transparent;
    color: var(--white);
    font-size: 16px;
    font-weight: 700;
    padding: 0;
    border: none;
    box-shadow: none;
  }

  /* スクロールインジケーター非表示 */
  .scroll-indicator {
    display: none !important;
  }
  
  /* FVセクションと次のセクションの間隔を削除 */
  .hero + section,
  .hero + .problems {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  /* こんな悩みありませんか？タイトルの上に30pxマージン追加 */
  .problems .section-header {
    margin-top: 30px !important;
  }
}

/* タブレット専用調整 (769px〜1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  /* 背景画像のアスペクト比調整 */
  .hero::after {
    padding-bottom: 133.33%; /* タブレット用のアスペクト比 */
  }

  .hero-cta-custom {
    width: 85%;
    max-width: 400px;
    padding: 18px 30px;
  }

  .cta-main-text {
    font-size: 18px;
  }
}

/* スマートフォン専用調整 (〜768px) */
@media (max-width: 768px) {
  .hero-cta-custom {
    width: 92%;
    padding: 18px 20px;
  }

  .cta-main-text {
    font-size: 15px;
  }
}

/* 小型スマートフォン (〜375px) */
@media (max-width: 375px) {
  .hero-cta-custom {
    width: 95%;
    padding: 15px 18px;
  }

  .cta-main-text {
    font-size: 14px;
  }
}

/* iPhone SE専用調整 (375x667) */
@media (width: 375px) and (height: 667px),
       (width: 375px) and (max-height: 667px) {
  /* 特別な調整は不要 */
}

/* デスクトップ (1025px〜) */
@media (min-width: 1025px) {
  .hero-image-pc {
    display: block !important;
  }
  .hero-image-mobile {
    display: none !important;
  }
  /* デスクトップでは背景画像を使用しない */
}

/* デバッグ用インジケーター - 完全に非表示 */
.device-size-indicator {
  display: none !important;
}