/* ========================================================= */
/* --- 1. PC/SP共通：オーバーレイの初期設定 --- */
/* ========================================================= */

/* PCでのホバー機能の定義 */
a.service-grid__item .service-grid__overlay {
  background-color: transparent;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, background-color 0.3s ease;
}

/* PCでのホバー時 (ホバーでフィルターを適用) */
a.service-grid__item:hover .service-grid__overlay {
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 1;
  visibility: visible;
}

/* ========================================================= */
/* --- 2. SP/スクロールアニメーション (is-active) --- */
/* ========================================================= */
@media screen and (max-width: 767px) {
  /* フィルターの初期状態（常に透明を強制） */
  .service-grid__overlay {
    opacity: 0 !important; /* 初期は完全に非表示 */
    visibility: hidden !important;
    transition: opacity 0.2s ease, background-color 0.2s ease; /* SPの速度 */
    background-color: transparent !important;
  }

  /* ★SPアニメーションの開始位置（文字が隠れた状態）を強制する */
  .service-grid__title,
  .service-grid__description,
  .service-grid__phrase {
    /* 元のstyle.cssの設定を上書きし、隠れた位置に固定 */
    transform: translateY(15px) !important;
    opacity: 0 !important;
    transition: transform 0.2s ease-out, opacity 0.2s ease-out !important; /* SPの速度 */
  }

  /* ★★★ is-active クラスが付いたとき（2秒後）に表示を完了させる ★★★ */
  .service-grid__overlay.is-active {
    opacity: 1 !important; /* フィルターの透明度を1に */
    visibility: visible !important;
    background-color: rgba(0, 0, 0, 0.5) !important; /* フィルター色を適用 */
  }

  .service-grid__overlay.is-active .service-grid__title,
  .service-grid__overlay.is-active .service-grid__description,
  .service-grid__overlay.is-active .service-grid__phrase {
    /* 隠れた位置(15px)から元の位置(0)へ移動し、表示を完了 */
    transform: translateY(0) !important;
    opacity: 1 !important;
  }
}
/* ========================================================= */
/* --- 3. 個別記事ページ (blog-post.html) 固有の画像修正 --- */
/* ========================================================= */

/* 1. 画像が切れないように contain を設定 */
/* .main-visual--sub-page を含むページでのみ適用されます */
.main-visual--sub-page .main-visual__image img {
  /* object-fit: cover; を上書きし、画像全体を表示（切断なし）を強制 */
  object-fit: contain !important;
  width: 100%;
  height: 100%;
}

/* 2. 画像サイズに合わせて枠の高さを自動調整し、余白を白に */
.main-visual--sub-page .main-visual__image {
  /* 元のCSSで設定されていた固定の高さをリセットし、画像サイズに合わせる */
  height: auto !important;

  /* 画像の周りにできる余白の色を白にする（サイトのグレーの背景を隠す） */
  background-color: var(--color-white) !important;

  /* 縦長になりすぎないよう、ビューポートの高さで最大値を設定 (調整可) */
  max-height: 50vh;
  overflow: hidden;
}
/* ↓↓↓ このコードを一番下に貼り付けてください ↓↓↓ */

/* ========================================================= */
/* --- 記念日ポップアップのスタイル --- */
/* ========================================================= */

/* [1] ポップアップの背景（黒い半透明のオーバーレイ） */
.anniversary-popup__overlay {
  /* displayプロパティはJavaScriptで制御するため、ここでは不要です */

  /* 画面全体を覆うように固定配置 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* 背景色（少し透過した黒） */
  background-color: rgba(0, 0, 0, 0.7);

  /* 中のコンテンツを中央に配置するための設定 */
  display: flex;
  justify-content: center;
  align-items: center;

  /* 他の要素より手前に表示するための設定 */
  z-index: 1000;
}

/* [2] ポップアップの本体（白いコンテンツ部分） */
.anniversary-popup__content {
  background-color: #ffffff; /* 背景は白 */
  padding: 30px; /* 内側の余白 */
  border-radius: 8px; /* 角を少し丸くする */
  max-width: 500px; /* 横幅の最大値 */
  width: 90%; /* スマホなど画面が狭い場合は画面幅の90%にする */
  text-align: center; /* 中の文字を中央揃えに */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* 少し影をつける */
  position: relative; /* 子要素（閉じるボタン）の位置の基準にする */
}

/* [3] クーポンコードのスタイル */
.coupon-code {
  background-color: #fff0b3; /* 背景を黄色っぽく */
  color: #d9534f; /* 文字を赤っぽく */
  font-weight: bold;
  font-size: 1.2em; /* 文字を少し大きく */
  padding: 5px 10px;
  border-radius: 4px;
}

/* [4] 閉じるボタンのスタイル */
.anniversary-popup__close {
  display: inline-block;
  margin-top: 20px; /* 上に少し余白 */
  padding: 12px 24px; /* 内側の余白 */
  background-color: #3498db; /* 背景色 */
  color: #ffffff; /* 文字色 */
  border: none; /* 枠線なし */
  border-radius: 5px; /* 角を丸く */
  font-weight: bold;
  cursor: pointer; /* マウスカーソルを指の形に */
  transition: background-color 0.3s; /* 背景色が滑らかに変わるアニメーション */
}

/* ボタンにマウスを乗せた時のスタイル */
.anniversary-popup__close:hover {
  background-color: #2980b9; /* 少し濃い色に */
}