/**
 * モバイル横スクロール防止フィックス
 *
 * 対応する問題:
 * - スマホ表示でヘッダー等が見切れ、横スクロールが各所発生
 *
 * 主な原因:
 * 1. html/body に overflow-x 制御がなく、幅超過要素が即スクロールを生む
 * 2. width:100vw ブレイクアウトパターン (スクロールバー幅分だけ超過)
 * 3. LP2 の固定幅要素 (.point_three 等) にレスポンシブ指定なし
 * 4. gnav-hover-fix.css が .un_gnavHeader の overflow:auto を上書き
 */

/* ------------------------------------------------
 * A. グローバル: 横スクロール防止の基盤
 * ------------------------------------------------ */
html,
body {
  overflow-x: hidden;
}

/* ------------------------------------------------
 * B. LP2: 固定幅要素のレスポンシブ対応
 * ------------------------------------------------ */

/* 1920px 固定幅の3点セクション画像 */
.point_three {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}

/* 439px 固定幅の見出し画像 */
.point_head img {
  max-width: 100% !important;
  height: auto !important;
}

/* 325px 固定幅の時間帯画像 */
.time img {
  max-width: 100% !important;
  height: auto !important;
}

/* ------------------------------------------------
 * C. モバイルナビ: overflow:auto の復元
 *    gnav-hover-fix.css が overflow:visible に上書きするため再上書き
 *    1024px 未満 = ハンバーガーメニュー表示域
 * ------------------------------------------------ */
@media screen and (max-width: 1023px) {
  #masthead .un_gnavHeader {
    overflow: auto !important;
  }
}

/* ------------------------------------------------
 * D. CTA ボタン: モバイルで折り返しを許可
 * ------------------------------------------------ */
@media screen and (max-width: 767px) {
  .cta_btn {
    white-space: normal;
  }
}