/* =============================================================
   JavaScript Functions to Modern CSS Modernization (Final)
   ============================================================= */

/**
 * 1. スムーズスクロール (e)
 * 固定ヘッダー（約90px）を考慮したスクロール制御
 */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

/**
 * 2. 背景画像の全幅表示 (o) & Bootstrapグリッド対応
 * 画像を絶対配置にすることで、隣のテキストカラムの高さを基準に画像を表示させます。
 */
.js__fullwidth-img {
  position: relative !important;
  overflow: hidden;
  display: block !important; /* JSの hide() を強制上書き */
  /* スマホ・タブレット等のHTMLクラスで高さが指定されている場合の最低限の高さ */
  min-height: 200px; 
}

/* PCサイズ(lg)で隣のカラム（col-lg-7）と同じ高さに引き伸ばす設定 */
@media (min-width: 992px) {
  .js__fullwidth-img.height-auto-lg {
    height: auto !important;
    min-height: 100%; /* 親の .row の高さに合わせる */
  }
}

.js__fullwidth-img img {
  display: block !important;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 画像を歪ませず、背景画像のようにカバー表示する */
  object-fit: cover;
  object-position: center;
  z-index: 1;
}

/**
 * 3. 垂直中央揃え (s)
 * padding計算を廃止し、Flexboxで制御
 */
.js__ver-center-aligned {
  padding-top: 0 !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/**
 * 4. 高さの自動一致 (h)
 * data-auto-height を持つ親要素内の子要素（カード等）を均等な高さにします
 */
[data-auto-height] {
  display: flex !important;
  flex-wrap: wrap;
  align-items: stretch;
}

[data-height] {
  height: auto !important;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/**
 * 5. オーバーレイ・メニュー開閉 (i)
 * JSで付与されるクラス (-is-open) に応じたアニメーション
 */
.js__bg-overlay,
.js__header-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.js__bg-overlay.-is-open,
.js__header-overlay.-is-open {
  opacity: 1;
  visibility: visible;
}

/* トリガーアイコン（ハンバーガー等）のアクティブ時 */
.js__trigger.-is-active {
  /* 必要に応じて回転や色の変化を追加 */
  transition: all 0.3s ease;
}

/**
 * 6. その他：テキストエリアの重なり防止
 * 画像が absolute になるため、テキストが隠れないように z-index を調整
 */
.col-lg-7.flbox {
  position: relative;
  z-index: 2;
}