/* =========================================================
  common-mobile-fix.css
  目的：
   - スマホで「動画が半分になる/上が見えない」を防ぐ
   - stickyヘッダー＆固定バナーの“表示領域食い”を吸収
   - iPhone等のvh問題、背景 fixed 問題を回避
   - #アンカー移動時にヘッダーで隠れないようにする
========================================================= */

/* 変数：必要に応じて調整 */
:root{
  --bottom-banner-h: 0px;   /* 下部固定バナー高さ（スマホで上書き） */
  --header-offset: 120px;   /* アンカーずれ用：ヘッダー高さ目安 */
  --video-max: 560px;       /* 動画の最大幅（スマホでも大きすぎない） */
}

/* ===== スマホのときだけ効かせる ===== */
@media (max-width: 768px){

  /* 1) スマホで background-attachment: fixed は崩れやすいので無効化 */
  body{
    background-attachment: scroll !important;
  }

  /* 2) 下部固定バナーがある場合：ページ下が隠れないよう余白を確保
        バナーが無いページでも問題ない（余白が少し増えるだけ） */
  :root{
    --bottom-banner-h: 72px; /* あとで微調整OK（60〜84px目安） */
  }
  body{
    padding-bottom: var(--bottom-banner-h);
  }

  /* 3) 動画は“画面幅にフィット”させつつ、大きすぎない */
  video{
    width: min(92vw, var(--video-max)) !important;
    height: auto !important;
    max-width: 100% !important;
  }

  /* 4) 自ページ内リンク(#tokuchou等)がヘッダーに隠れるのを防ぐ */
  :target{
    scroll-margin-top: var(--header-offset);
  }

  /* 5) ヒーローが長いページ向け：スマホで余白を少し詰める
        （ヒーローが無いページは影響なし） */
  .hero{
    padding-top: 22px !important;
    padding-bottom: 18px !important;
  }

  /* 6) 画像や横はみ出しの事故を防ぐ */
  img, iframe{
    max-width: 100%;
    height: auto;
  }

  /* 7) iOS Safariで横スクロールが出る事故の保険 */
}

/* ===== 下部固定バナーが無いページで余白を無くしたい場合 =====
   body に class="no-fixed-banner" を付けたページだけ padding を消

/* ===== スクロール復旧パッチ（最優先で上書き） ===== */
html, body{
  height: auto !important;
  overflow-y: auto !important;
}

body{
  position: static !important;
}

@media (max-width: 768px){
  html, body{
    overflow-x: hidden !important;  /* 横だけ隠す */
    overflow-y: auto !important;    /* 縦スクロールは必ず許可 */
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;            /* 指の縦スクロールを許可 */
  }
}