/* ======================================================================
   responsive-patch-optimal.css（JAHA / スマホ&PC “最適・やり過ぎない”安定版）

   目的
   - 既存のHTML/PHPロジックに触れず、CSSだけで「画像が大きく見える」を抑える
   - 特に “縦が短いノート系画面” でヒーロー/スライダーが過剰に大きくなる症状を緩和
   - 既存CSSとの競合（バッティング）を避けるため、影響範囲を限定する

   方針（安全設計）
   - 既存headで使っているCSS変数（--hero-h-sp / --hero-h-pc）だけを上書き → 影響範囲が狭い
   - object-fitは「ヒーロー系」だけに限定 → 通常記事画像・アイコン等に副作用を出しにくい
   - 文字サイズ/余白/レイアウト骨格は触らない → 既存最適化と衝突しにくい

   使い方
   - 既存の responsive-patch.css をこの内容に置き換える（またはこのファイル名で追加）
   - 可能なら “最後に読み込む” ようにする（同等指定がある場合に勝つため）
   ====================================================================== */

/* 0) iOS/Safariの自動文字拡大を抑える（既存にあっても害が少ない） */
html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* 1) 横はみ出し対策（外側余白を作らず、想定外スクロールだけ抑える）
      clip対応ブラウザではclipを優先（hiddenより副作用が少ない） */
html, body{
  max-width: 100%;
  overflow-x: hidden;
}
@supports (overflow: clip){
  html, body{ overflow-x: clip; }
}

/* 2) 埋め込み要素が原因の横はみ出し対策（安全寄り・限定的） */
iframe, embed, object{
  max-width: 100%;
}

/* ======================================================================
   ヒーロー（スライダー）高さの過剰感を抑える
   - head側のCLSガード（min-height: var(--hero-h-*)）と整合させて“変数だけ”を調整
   - PC(560px固定) → 画面高さ(vh)上限付きにして「縦が低いとデカい」を抑制
   - SP → vw基準は維持しつつvh上限で“縦にデカい”を抑制
   ====================================================================== */

/* 基本値（vhで上限を付ける。ここは全環境に効く） */
:root{
  /* SP：16:9（56.25vw）を基本に、縦方向は 52vh を上限にする */
  --hero-h-sp: min(56.25vw, 52vh);

  /* PC：560px固定を維持しつつ、縦が低い環境では 62vh を上限にする */
  --hero-h-pc: min(560px, 62vh);
}

/* iOS等のアドレスバー影響を避けたい端末向け（dvh対応環境のみ上書き） */
@supports (height: 1dvh){
  :root{
    --hero-h-sp: min(56.25vw, 52dvh);
    --hero-h-pc: min(560px, 62dvh);
  }
}

/* さらに“縦が短いPC/ノート系”を段階的に抑える（やり過ぎない範囲） */
@media (min-width: 768px) and (max-height: 820px){
  :root{ --hero-h-pc: min(520px, 60vh); }
}
@media (min-width: 768px) and (max-height: 740px){
  :root{ --hero-h-pc: min(460px, 56vh); }
}
@media (min-width: 768px) and (max-height: 680px){
  :root{ --hero-h-pc: min(400px, 52vh); }
}

/* 小さめスマホは、縦が詰まりやすいので少しだけ抑える（読みやすさ優先） */
@media (max-width: 430px){
  :root{ --hero-h-sp: min(56.25vw, 48vh); }
}
@supports (height: 1dvh){
  @media (max-width: 430px){
    :root{ --hero-h-sp: min(56.25vw, 48dvh); }
  }
}

/* ======================================================================
   ヒーロー系コンポーネントにだけ適用
   - 既存head側の対象クラスに合わせている
     .i2Slick / .js-hero / .swiper.is-hero / .slider-pro.is-hero
   ====================================================================== */

/* 3) ヒーロー領域の“最低高さ”は変数で管理（既存指定が無いページでも保険として付ける） */
.i2Slick,
.js-hero,
.swiper.is-hero,
.slider-pro.is-hero{
  min-height: var(--hero-h-sp);
}

@media (min-width: 768px){
  .i2Slick,
  .js-hero,
  .swiper.is-hero,
  .slider-pro.is-hero{
    min-height: var(--hero-h-pc);
  }
}

/* 4) ヒーロー内の画像だけ cover で安定化（通常記事画像には触らない） */
.i2Slick img,
.js-hero img,
.swiper.is-hero img,
.slider-pro.is-hero img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 5) “ヒーローの中身がはみ出して横スクロール”の予防（ヒーロー範囲だけ） */
.i2Slick,
.js-hero,
.swiper.is-hero,
.slider-pro.is-hero{
  overflow: hidden;
}