/* ==========================================================
   イベント詳細ページ用スタイル（event/xxxx/）
   トップページのデザイントーン（style.css）を踏襲しつつ、
   イベント告知らしい見せ方にするための追加スタイル。
   .event-page（body）配下にスコープする。
   ========================================================== */




/* ---------- 画像の一括表示（途中描画を避ける） ----------
   JS が reveal-ready を付けたときだけ初期非表示にし、
   読み込み・デコード完了後に .is-loaded で一気に表示する。
   JS 無効時はこのルールが効かず通常表示になる。 */
.reveal-ready .js-reveal {
  opacity: 0;
}

.reveal-ready .js-reveal.is-loaded {
  opacity: 1;
  transition: opacity 0.2s ease-out;
}

   /* ---------- ヒーロー ---------- */
/* イベントごとの見た目の差は、原則ここで定義した変数を
   ファイル末尾の「イベント別ヒーロー上書き」ブロックで上書きして表現する。
   （個別セレクタを増やすと詳細度が上がり、次のイベントで効かなくなるため） */
.ev-hero {
  --hero-pad: 84px 0 92px;
  --hero-pad-pc: 120px 0 128px;
  --hero-bg: var(--primary-dark);
  --hero-overlay: linear-gradient(180deg, #000064 0%, #ffffff4d 100%);
  --hero-bg-pos: 50% 50%;
  --hero-text: var(--white);
  --hero-brand-w: 110px;
  --hero-brand-max-w: 20vw;
  --hero-brand-h: auto;
  --hero-logo-max-w: 100%;
  --ev-hero-bg-w: 100%;
  --ev-hero-bg-h: 100%;

  position: relative;
  overflow: hidden;
  color: var(--hero-text);
  text-align: center;
  padding: var(--hero-pad);
  background: var(--hero-bg);
}

.ev-hero__bg {
  position: absolute;
  inset: 0;
}

.ev-hero__bg img {
  width: var(--ev-hero-bg-w);
  height: var(--ev-hero-bg-h);
  object-fit: cover;
  /* 数値を小さくするほど画像が右へ寄る（＝写真の左側が見える） */
  object-position: var(--hero-bg-pos);
  display: block;
}

/* 写真の上に紺→ブルーのオーバーレイ */
.ev-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--hero-overlay);
}

.ev-hero > .container {
  position: relative;
  z-index: 1;
}

/* ヒーロー最上部のスクールロゴ */
.ev-hero__brand {
  display: inline-block;
  margin-bottom: 22px;
}

.ev-hero__brand img {
  width: var(--hero-brand-w);
  max-width: var(--hero-brand-max-w);
  height: var(--hero-brand-h);
  display: block;
}

.ev-hero__eyebrow {
  font-family: 'Carme', 'Noto Sans JP', sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 12px;
}

.ev-hero__title {
  display: none;
  font-size: 1.9rem;
  font-weight: 900;
  line-height: 1.35;
  margin-bottom: 14px;
}

.event-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 20px;
}

.event-logo img {
  width: 100%;
  max-width: var(--hero-logo-max-w);
  height: auto;
  display: block;
}

.ev-hero__lead {
  font-size: 0.95rem;
  line-height: 1.9;
  opacity: 0.95;
  text-align: left;
  max-width: 560px;
  margin: 0 auto 20px;
}

/* 日付ピル（style.css の .date-pill を白背景に上書き）
   個数はデータにより変わるため flex + 折返しにする */
.ev-hero .date-pills {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 0;
  margin: 0 0 24px;
}

.ev-hero .date-pill {
  background: var(--white);
  color: var(--primary-dark);
  font-size: 0.88rem;
  padding: 8px 16px;
}

.ev-hero .cta-button {
  max-width: 320px;
  font-weight: 700;
  /* box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25); */
}

/* ---------- ヒーロー直下の導入文 ---------- */
#sec-summary {
  margin-bottom: 40px;
}

.ev-hero__summary {
  max-width: 680px;
  margin: 0 auto;
  padding: 44px 4px;
}

/* ヒーロー内と共有の .ev-hero__lead を、白背景でも読めるよう上書き */
.ev-hero__summary .ev-hero__lead {
  opacity: 1;
  color: var(--text);
  font-size: 0.96rem;
  line-height: 2;
  max-width: none;
  margin: 0;
}

/* 導入文の1行目（キャッチコピー）を強調 */
.ev-hero__summary .ev-hero__lead .ev-lead-catch {
  display: block;
  font-size: 1.28rem;
  font-weight: 900;
  line-height: 1.5;
  color: var(--primary-dark);
  text-align: center;
  margin-bottom: 18px;
}

.ev-hero__free-to-enter{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.ev-hero__free-to-enter img{
  width: 35vw;
  max-width: 220px;
}

/* ---------- セクション共通 ---------- */
.ev-sec {
  padding: 3.25rem 0 4.5rem;
  padding-bottom: 40px;
}

section{
  margin-top: -40px;
}

/* .ev-sec--blue {
  background: #B1E4FF;
  border-radius: 0 40px 0 0;
  padding: 3.25rem 0 5rem;
} */

.event-page .section-title {
  margin-bottom: 26px;
}

.event-page .section-title > img {
  width: 30px;
  height: auto;
}

/* 仮テキストの共通注意ラベル */
.ev-tbd-bar {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #fff8e1;
  border: 1px solid #ffe0b2;
  color: #5d4037;
  border-radius: 12px;
  padding: 10px 14px;
  margin: 0 auto 8px;
  max-width: 720px;
  font-size: 0.85rem;
  line-height: 1.7;
}

/* ---------- 白カード ---------- */
.ev-card {
  background: var(--white);
  border-radius: 20px;
  padding: 16px 20px;
  /* box-shadow: 0 8px 24px rgba(29, 150, 213, 0.10); */
  max-width: 480px;
  margin: 0 auto;
}

/* ---------- 開催概要 dl ---------- */
.ev-details {
  display: grid;
  grid-template-columns: 6em 1fr;
  gap: 0 14px;
  margin: 0;
}

.ev-details dt {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-sub);
  line-height: 1.8;
  padding-block: 9px;
  border-bottom: 1px solid var(--line);
}

.ev-details dd {
  font-size: 0.92rem;
  color: var(--text);
  line-height: 1.8;
  margin: 0;
  padding-block: 9px;
  border-bottom: 1px solid var(--line);
}

.ev-details dt:last-of-type,
.ev-details dd:last-child {
  border-bottom: none;
}

.ev-note {
  font-size: 0.8rem;
  color: var(--text-sub);
}

.ev-sec--blue .ev-note {
  color: var(--text-sub);
}

.ev-notes a {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

/* ---------- 日程・タイムスケジュール ---------- */
.ev-days {
  display: grid;
  gap: 16px;
  max-width: 480px;
  margin: 0 auto;
}

.ev-day {
  background: var(--white);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(29, 150, 213, 0.10);
}

.ev-day__head {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--primary);
  color: var(--white);
  padding: 10px 16px;
}

.ev-day__no {
  font-family: 'Carme', 'Noto Sans JP', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  background: var(--white);
  color: var(--primary);
  border-radius: 999px;
  padding: 4px 12px;
  line-height: 1;
  flex-shrink: 0;
}

.ev-day__date {
  font-weight: 800;
  font-size: 1.02rem;
  line-height: 1.3;
}

.ev-day__body {
  padding: 14px 16px 16px;
}

/* 1日の中の各プログラム（複数コース対応）
   2つ目以降は区切り線で分ける */
.ev-prog + .ev-prog {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

/* プログラム見出し（ロゴ画像 or 名称テキスト） */
.ev-prog__label {
  margin-bottom: 8px;
}

.ev-prog__label img {
  height: auto;
  max-height: 40px;
  width: auto;
  max-width: 100%;
  display: block;
}

.ev-prog__name {
  font-weight: 800;
  font-size: 0.98rem;
  line-height: 1.4;
  color: var(--primary-dark);
}

/* style.css の .timeslots を流用しつつ、行を区切って見やすく */
.event-page .timeslots {
  gap: 6px;
}

.event-page .timeslots li {
  border-bottom: 1px dashed var(--line);
  padding-bottom: 6px;
}

.event-page .timeslots li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* トップでは非表示の「受付中」バッジをこのページでは表示する */
.event-page .slot-badge--open {
  display: none;
  position: static;
  transform: none;
  margin-left: auto;
}

.event-page .slot-badge--closed {
  display: inline-block;
  position: static;
  transform: none;
  margin-left: auto;
}

/* 枠ごとの補足（events-data.js の slots[].note）
   .timeslot-text の white-space: nowrap を解除し、時刻・ラベルの下に置く */
.event-page .timeslot-note {
  /* display: block; */
  width: fit-content;
  max-width: 100%;
  white-space: normal;
  margin-top: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  /* background: #fff3d6; */
  /* border: 1px solid #ffd98a; */
  color: #8a5a00;
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.5;
}

/* 満員スタンプは、受付中/受付終了バッジと同じ右端位置に配置する（時刻への重ね表示は解除） */
.event-page .slot-soldout-stamp {
  position: static;
  top: auto;
  left: auto;
  transform: none;
  margin-left: auto;
  width: auto;
  height: 28px;
  flex-shrink: 0;
}

/* デザイン上は open/closed は非表示（満席のみ表示） */
.slot-badge--open,
.slot-badge--closed { display: none; }

/* closed スロットは取り消し線＋グレーアウト */
.timeslot--inactive .timeslot-text {
  /* text-decoration: line-through; */
  opacity: 0.45;
}

.ev-day__note {
  font-size: 0.78rem;
  color: var(--text-sub);
  margin-top: 10px;
}

/* スケジュール全体の注記（カード外・中央寄せ） */
.ev-schedule-note {
  font-size: 0.8rem;
  color: var(--text);
  text-align: left;
  margin: 16px auto 0;
  max-width: 480px;
}

/* 終了した日のカード（events-data.js の status / 時刻から自動判定） */
.ev-day--ended {
  position: relative;
}

.ev-day--ended::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.55);
  pointer-events: none;
}

.ev-day__ended-badge {
  position: relative;
  z-index: 1;
  margin-left: auto;
  flex-shrink: 0;
  background: #555;
  color: var(--white);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
}

/* ---------- 参加費 ---------- */
.ev-fee-card {
  /* text-align: center; */
}

.ev-fee-main {
  display: flex;
  flex-direction: column;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.ev-fee-main__label {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-sub);
}

.ev-fee-main__value {
  font-size: 2.3rem;
  font-weight: 900;
  color: var(--primary-dark);
  line-height: 1.2;
}

.ev-fee-main__value small {
  font-size: 1.05rem;
  font-weight: 700;
}

.ev-fee-main__tax {
  font-size: 0.9rem;
  color: var(--text-sub);
  align-self: flex-end;
  text-align: right;
}

/* ---------- 会場・アクセス（トップページ #court と同じカードレイアウト） ---------- */
/* マークアップは .card-grid.two-col > .card 構成。.card / .card-grid / .access /
   .cta-map の基本スタイルは style.css（トップと共有）を流用し、
   #court .card ... のカード固有スタイルだけをこのページ用に再現する。 */
#sec-venue .card {
  margin: 0 auto;
  padding: 0;
  width: 100%;
  max-width: 480px;
  overflow: hidden;
}

#sec-venue .card > div:first-child {
  overflow: hidden;
  max-height: 200px;
}

#sec-venue .card > div:first-child img {
  width: 100%;
  height: 200px;
  display: block;
  border-radius: 0;
  object-fit: cover;
  object-position: center 65%;
}

#sec-venue .card .logo {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(15, 43, 70, 0.08);
  margin-bottom: 4px;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

#sec-venue .card .logo:hover { opacity: 0.75; }

#sec-venue .card .logo img {
  width: auto;
  max-width: 220px;
  height: auto;
}

#sec-venue .card .logo .logo__external {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.45;
}

#sec-venue .card h3 {
  padding: 12px 20px 0;
  font-size: 1.05rem;
  color: #009fe8;
  line-height: 1.4;
  margin-bottom: 0;
  text-align: center;
}

#sec-venue .card h3 span {
  display: block;
  font-size: 0.85rem;
  font-weight: 400;
  margin-top: 2px;
}

#sec-venue .card h4 {
  padding: 8px 20px 4px;
  font-size: 0.95rem;
  font-weight: 500;
  text-align: center;
  color: var(--text);
}

#sec-venue .card .cta-map {
  display: block;
  margin: 16px 20px 20px;
  width: calc(100% - 40px);
  max-width: none;
}

/* ---------- 持ち物・服装 ---------- */
.ev-checklist {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  gap: 9px;
}

.ev-checklist li {
  position: relative;
  padding-left: 28px;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.6;
}

.ev-checklist li::before {
  content: '✔';
  position: absolute;
  left: 2px;
  top: 0;
  color: var(--primary);
  font-weight: 900;
}

/* ---------- お申し込み（CTAセクション） ---------- */
.ev-apply {
  background: var(--primary-dark);
  color: var(--white);
  text-align: center;
  border-radius: 0 40px 0 0;
  padding: 3.5rem 0 6.5rem;
}

.ev-apply .section-title {
  color: var(--white);
}

.ev-apply__lead {
  font-size: 0.95rem;
  line-height: 1.9;
  max-width: 560px;
  margin: 0 auto 20px;
}

.ev-apply .cta-button {
  max-width: 420px;
  font-size: 1.05rem;
  font-weight: 800;
  padding: 16px 20px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
}

.ev-apply__note {
  font-size: 0.8rem;
  opacity: 0.8;
  margin-top: 14px;
}

/* ---------- 熱中症対策 ----------
   日程カード（.ev-day）と同じカード構造・同じ配色に揃えている。
   独自の色を足さず、アクセントは --primary のみ。 */
.ev-heat {
  display: grid;
  gap: 16px;
  max-width: 720px;
  margin: 0 auto;
}

.ev-heat__lead {
  font-size: 0.92rem;
  color: var(--text);
  line-height: 1.95;
  margin: 0 auto;
  max-width: 480px;
}

.ev-heat__catch {
  display: block;
  font-size: 1.12rem;
  font-weight: 900;
  line-height: 1.5;
  color: var(--primary-dark);
  text-align: center;
  margin-bottom: 14px;
}

/* カードの骨格は .ev-day と同一 */
.ev-heat__card {
  background: var(--white);
  border-radius: 20px;
  overflow: hidden;
  border-radius: 20px;
  /* padding: 16px 20px; */
  /* box-shadow: 0 8px 24px rgba(29, 150, 213, 0.10); */
  max-width: 480px;
  margin: 0 auto;

}

.ev-heat__head {
  background: var(--primary);
  color: var(--white);
  padding: 10px 16px;
}

.ev-heat__head h3 {
  font-weight: 800;
  font-size: 1.02rem;
  line-height: 1.3;
  margin: 0;
}

.ev-heat__body {
  padding: 14px 16px 16px;
}

/* 2つ目以降のまとまりは区切り線で分ける（.ev-prog + .ev-prog と同じ扱い） */
.ev-heat__group + .ev-heat__group {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.ev-heat__subtitle {
  font-weight: 800;
  font-size: 0.98rem;
  line-height: 1.4;
  color: var(--primary-dark);
  margin: 0 0 10px;
}

.ev-heat__text {
  font-size: 0.88rem;
  color: var(--text-sub);
  line-height: 1.8;
  margin: 0 0 10px;
}

.ev-heat__text:last-child {
  margin-bottom: 0;
}

.ev-heat__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.ev-heat__list li {
  position: relative;
  padding-left: 16px;
  font-size: 0.88rem;
  color: var(--text-sub);
  line-height: 1.8;
}

.ev-heat__list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
}

.ev-heat__closing {
  font-size: 0.88rem;
  color: var(--text-sub);
  line-height: 1.9;
  text-align: center;
  margin: 2px 0 0;
}

/* ---------- 注意事項 ---------- */
.ev-notes {
  list-style: none;
  counter-reset: ev-note;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  gap: 8px;
  max-width: 720px;
  margin-inline: auto;
}

.ev-notes li {
  position: relative;
  padding-left: 18px;
  font-size: 0.88rem;
  color: var(--text-sub);
  line-height: 1.8;
}

.ev-notes li {
  counter-increment: ev-note;
}

.ev-notes li::before {
  content: counter(ev-note) '.';
  position: absolute;
  left: 0;
  top: 0;
}

.ev-notes-contact {
  text-align: center;
  font-size: 0.92rem;
}

.ev-notes-contact a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- PC ---------- */
@media (min-width: 841px) {
  .ev-hero {
    padding: var(--hero-pad-pc);
  }

  .ev-hero__title {
    font-size: 2.6rem;
  }

  .ev-hero__lead {
    font-size: 1.02rem;
  }

  .ev-heat__body {
    padding: 20px 24px 24px;
  }

  .ev-heat__catch {
    font-size: 1.24rem;
  }

  .ev-days {
    /* grid-template-columns: repeat(3, 1fr); */
    max-width: none;
  }

  .ev-day__head {
    /* flex-direction: column; */
    align-items: flex-start;
    gap: 8px;
  }

  /* .ev-card {
    padding: 28px 32px;
  } */
}


/* ==========================================================
   イベント別ヒーロー上書き
   ----------------------------------------------------------
   使い方:
   1. 各イベントページの <body> にイベント識別クラスを1つ付ける
      例) <body class="guide-page event-page ev-202608-tat">
   2. 「若干の差」は .ev-xxx .ev-hero { --hero-*: ...; } の変数上書きだけで表現する
      （変数は PC 用パディングも含むためメディアクエリの外に書いてよい）
   3. 変数で足りない場合のみ .ev-xxx .ev-hero__yyy { } をこのブロック内に追記する
   イベント固有のスタイルは、この場所以外に書かない。
   ========================================================== */

/* ---- 2026 夏休みシュート道場／1on1＆フィニッシュ道場 ---- */
/* ヒーローの見た目は共通デフォルトのまま */

/* 2枚のロゴの縦幅を揃える:
   shoot(1000x261) を 1on1(1000x175) の 175/261 ≒ 67% 幅にすると高さが一致する */
.ev-2026-summer .event-logo #shoot-logo {
  width: 67%;
}

/* ---- 2026.08 3x3 タッチ&トライ Vol.02 ---- */
.ev-202608-tat .ev-hero {
  /* 背景写真をそのまま見せるためオーバーレイなし */
  --hero-overlay: none;
  --ev-hero-bg-w: 100%;
  --ev-hero-bg-h: 125%;
  /* 背景写真を右へ寄せる（ゴール・子どもたちが写る左側を見せる） */
  --hero-bg-pos: 20% 50%;
  /* スクールロゴを高さ基準の横長ロゴに差し替えているため */
  --hero-brand-w: auto;
  --hero-brand-max-w: none;
  --hero-brand-h: 30px;
  /* 丸ロゴのため横幅を抑える */
  --hero-logo-max-w: 240px;
}