/* ==========================================================================
   02 オープンキャンパス セクション（完全版）
   ========================================================================== */

/* --- セクション基盤の修正 --- */
.p-top-section-open-campus {
  position: relative;
  width: 100%;
  min-height: 900px;
  overflow: hidden;
  background-color: #f0f8fa;
  /* display: flex; を削除、または block に変更 */
  display: block; 
  padding-top: 80px; /* ★ヘッダーのためのスペースを確保 */
  color: #001a43;
}

/* 1. 背景画像設定 */
.p-section__bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 1;
}

.p-section__bg img {
  width: 100%; height: 100%;
  object-fit: contain;
  filter: grayscale(100%) brightness(1.2) sepia(100%) hue-rotate(155deg) saturate(1.2);
  opacity: 0.5;
}

/* --- ヘッダーを最前面に固定 --- */
.section-header {
    position: relative;
    z-index: 20;       /* ★他のコンテンツ(z-index:10)より上に */
    text-align: center;
    margin-bottom: 30px;
    width: 100%;       /* 横幅いっぱいに広げる */
}

/* 2. コンテンツ（文字・ボタン） */
.p-section__container {
  position: relative;
  z-index: 10;
  text-align: center;
}

.c-section-number { font-size: 18px; font-weight: bold; margin-bottom: 5px; }
.c-heading { font-size: 28px; font-weight: bold; margin-bottom: 25px; }

.p-top-open-campus__lead {
  display: flex; justify-content: center; gap: 20px;
  margin-bottom: 30px; font-weight: bold;
}
.icon-check { color: #ffcc00; margin-right: 5px; }

/* 直近の開催日（ライン付き） */
.event-title-wrapper {
  display: flex; align-items: center; justify-content: center;
  gap: 15px; margin-bottom: 15px;
}
.event-title-wrapper::before,
.event-title-wrapper::after {
  content: "";
  flex: 0 1 160px;
  height: 1px;
  background-color: #ccc;
}
.event-title { font-size: 14px; font-weight: bold; white-space: nowrap; }

.p-opencampus-event-card {
  background: #3498db;
  color: #fff;
  display: inline-block;
  padding: 15px 35px;
  border-radius: 8px;
  margin-bottom: 35px;
}
.p-opencampus-event-card .date { font-size: 22px; font-weight: bold; }

/* ボタン（小さめ調整） */
.c-button-primary {
  display: inline-flex; align-items: center;
  background: #000c2a; color: #fff;
  text-decoration: none;
  padding: 12px 35px;
  border-radius: 50px;
  font-size: 14px; font-weight: bold;
  transition: 0.3s;
}
.c-button-primary:hover { background: #001a43; transform: translateY(-2px); }

/* 3. アイコンパーツの設定 */
.p-top-open-campus-pictures {
  position: absolute;
  top: 50%; left: 50%;
  z-index: 5;
}

.p-icon-parts {
  position: absolute;
  width: 120px; height: 120px;
  border-radius: 50%;
  color: white; font-weight: bold; font-size: 14px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  
  /* 初期状態 */
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  
  /* 拡散時のアニメーション */
  transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 広がった後のふわふわアニメーション定義 */
@keyframes sway {
  0% { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1); }
  100% { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y) - 15px)) scale(1); }
}

/* 発火時：拡散 ＋ ふわふわの適用 */
[data-animated="true"] .p-icon-parts {
  opacity: 1;
  /* transitionによる拡散が終わった後にanimationを適用する */
  transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1);
  animation: sway 3s ease-in-out infinite alternate;
  animation-delay: calc(var(--delay) + 0.8s); /* 拡散完了後に開始 */
}