/* ============================================================
   イベント特設ページ用 追加スタイル
   page-event-tour.php / page-event-hairmake.php
   既存 .page-type-share の紺色トーンを継承しつつ
   イベント独自のアクセントを軽く重ねる
   ============================================================ */

/* page-type-event は share と同系統の紺色＋warmアクセント */
.page-type-event {
  --c-accent: #1e3a5f;
  --c-accent-rgb: 30, 58, 95;
  --c-accent-sub: #c87941;
  --c-text: #2d2d2d;
  --c-text-rgb: 45, 45, 45;
  --c-bg: #ffffff;
  --c-bg-alt: #f4f3f0;
  --c-header-bg: rgba(255, 255, 255, 0.94);
  --c-header-text: var(--c-accent);
  --c-header-border: rgba(30, 58, 95, 0.12);
  --c-footer-bg: #1e3a5f;
  --c-footer-text: rgba(255, 255, 255, 0.9);
}

/* ============================================================
   ページヒーロー（暫定：グラデーション背景＋画像差し替え可能）
   画像配置後に background-image を有効化する
   ============================================================ */

.page-hero--event-tour {
  background: linear-gradient(135deg, #1e3a5f 0%, #2d4a73 50%, #3d5a85 100%);
  background-image:
    linear-gradient(135deg, rgba(30, 58, 95, 0.85) 0%, rgba(45, 74, 115, 0.80) 100%),
    url("../img/event-tour/event-tour-hero.jpg");
  background-size: cover;
  background-position: center;
}

.page-hero--event-hairmake {
  background: linear-gradient(135deg, #1e3a5f 0%, #2d4a73 50%, #c87941 100%);
  background-image:
    linear-gradient(135deg, rgba(30, 58, 95, 0.82) 0%, rgba(200, 121, 65, 0.55) 100%),
    url("../img/event-hairmake/event-hairmake-hero.jpg");
  background-size: cover;
  background-position: center;
}

/* ヒーロータイトル内の em (de つなぐ) の装飾 */
.page-hero--event-hairmake .page-hero__jp em {
  font-style: normal;
  font-weight: 300;
  letter-spacing: 0.12em;
  color: var(--c-accent-sub, #c87941);
  margin: 0 0.15em;
}

/* リード文 */
.page-hero__lead {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  opacity: 0.92;
}

/* ============================================================
   page-hero 共通の補強（page-type-event でのみ）
   ============================================================ */

.page-type-event .page-hero {
  padding: 8rem 0 5rem;
  color: #fff;
  text-align: center;
  position: relative;
}

.page-type-event .page-hero__en {
  display: block;
  font-size: 0.85rem;
  letter-spacing: 0.35em;
  opacity: 0.85;
  margin-bottom: 1.2rem;
  font-weight: 500;
}

.page-type-event .page-hero__jp {
  font-size: 2rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
  font-weight: 700;
}

@media (max-width: 768px) {
  .page-type-event .page-hero {
    padding: 6rem 0 3.5rem;
  }
  .page-type-event .page-hero__jp {
    font-size: 1.5rem;
  }
}