/* =========================================================
   event.css
   「季節のイベントを英語で楽しもう！」ページ専用の追加CSS
   ※既存 style.css は変更せず、新規コンポーネントのみここに記述
   ※rem基準は style.css と同じ（html{font-size:10px} / 750px以下で1.3333vw）
   ========================================================= */

/* ---------- 既存生向け注記（CTA共通・追加分） ---------- */
.cta_sub-note {
  display: block;
  margin-top: 1.4rem;
  font-size: 1.3rem;
  color: #888;
}

/* ---------- ④参加の流れ アイコン（このページ専用：SPでの縦横比崩れを修正） ---------- */
/* style.css の .flow_item img は SP で width/height を両方固定しており、
   新しいアイコン画像の比率と合わないと潰れて表示されるため、
   このページでは幅を auto にして高さだけで比率を保つ */
@media screen and (max-width: 750px) {
  .flow_item img {
    width: auto;
    height: 10.4rem;
  }
}
/* style.css 側の fv_bottom-bg.jpg 指定を、このページでは上書き */
/* ---------- CTA背景（このページ専用：既存のドット柄を暖色系にアレンジ） ---------- */
.cta {
  background-color: #FBF8F3;
  background-image:
    radial-gradient(circle, rgba(232, 114, 12, 0.07) 2.6px, transparent 2.6px),
    radial-gradient(circle, rgba(232, 114, 12, 0.07) 2.6px, transparent 2.6px);
  background-size: 2.9rem 2.8rem, 2.9rem 2.8rem;
  background-position: 0 0, 1.45rem 1.4rem;
}

/* ---------- ② 魅力訴求ブロック（新規） ---------- */
.event_point {
  padding: 5rem 0 3rem;
  text-align: center;
}
.event_point-list {
  display: flex;
  gap: 2rem;
  justify-content: center;
  max-width: 80rem;
  margin: 0 auto 2.2rem;
}
.event_point-item {
  flex: 1;
  min-width: 18rem;
}
.event_point-item img {
  width: 100%;
  height: auto;
}
.event_point-tag {
  display: inline-block;
  font-size: 1.4rem;
  font-weight: 700;
  color: #555;
  background: #f4f4f4;
  border-radius: 50px;
  padding: 0.8rem 1.8rem;
}
@media screen and (max-width: 750px) {
  .event_point-tag {
    font-size: 2.2rem;
  }
  .cta_sub-note {
    font-size: 2rem;
  }
  .event_point-list {
    flex-direction: column;
    align-items: center;
  }
  .event_point-item {
    width: 66rem;
    max-width: 100%;
  }
}

/* ---------- ③ イベント概要（タブ） ---------- */
.event_tabs {
  padding: 6rem 0;
}
.event_tab-nav {
  display: flex;
  gap: 0.8rem;
}
.event_tab-nav button {
  flex: 1;
  background: #e4e4e6;
  border: 2px solid #e0e0e0;
  border-bottom: none;
  border-radius: 1.2rem 1.2rem 0 0;
  padding: 1rem 0.6rem;
  cursor: pointer;
  font-family: inherit;
}
.event_tab-nav button img:first-child {
  width: 100%;
  max-width: 20rem;
  height: auto;
  display: block;
  margin: 0 auto 0.2rem;
}
.event_tab-status {
  display: block;
  width: 9rem;
  height: auto;
  margin: 0 auto;
}
.event_tab-nav button.is-active {
  background: #fff;
  border-color: #E75297;
}
.event_tab-nav button.event_tab-halloween.is-active { background: #83318C; border-color: #83318C; }
.event_tab-nav button.event_tab-thanksgiving.is-active { background: #EF9A00; border-color: #EF9A00; }
.event_tab-nav button.event_tab-christmas.is-active { background: #008642; border-color: #008642; }

.event_tab-panel {
  display: none;
  border: 2px solid #E75297;
  border-radius: 0 0 1.6rem 1.6rem;
  padding: 3.2rem 2.4rem;
}
.event_tab-panel.is-active {
  display: block;
}
.event_tab-panel[data-event-panel="halloween"] {
  border-color: #83318C;
  background: #F2EAF3;
}
.event_tab-panel[data-event-panel="thanksgiving"] {
  border-color: #EF9A00;
  background: #FDF4E5;
}
.event_tab-panel[data-event-panel="christmas"] {
  border-color: #008642;
  background: #E5F2EC;
}

.event_tab-period {
  display: inline-block;
  background: #5E2364;
  color: #fff;
  font-size: 1.5rem;
  padding: 0.5rem 1.6rem;
  border-radius: 4px;
  margin: 0 0.8rem 1.4rem 0;
}
.event_tab-panel[data-event-panel="thanksgiving"] .event_tab-period { background: #AC6E00; }
.event_tab-panel[data-event-panel="christmas"] .event_tab-period { background: #00602F; }
.event_tab-costume {
  display: inline-block;
  background: #83318C;
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  padding: 0.5rem 1.4rem;
  border-radius: 50px;
}
.event_tab-lead {
  font-size: 1.8rem;
  font-weight: 700;
  color: #5E2364;
  margin: 0 0 1.8rem;
}
.event_tab-panel[data-event-panel="thanksgiving"] .event_tab-lead { color: #AC6E00; }
.event_tab-panel[data-event-panel="christmas"] .event_tab-lead { color: #00602F; }
.event_tab-lesson {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
}
.event_tab-lesson li {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 0.9rem 0;
  font-size: 1.6rem;
  font-weight: 700;
  color: #333;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.12);
}
.event_tab-lesson li:last-child {
  border-bottom: none;
}
.event_tab-lesson li img {
  width: 3.8rem;
  height: 3.8rem;
  flex-shrink: 0;
}
.event_tab-photos {
  margin-bottom: 0.6rem;
}
.event_tab-photos img {
  width: 100%;
  max-width: 60rem;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  margin: 0 auto;
}
.event_tab-photo-note {
  text-align: center;
  font-size: 1.1rem;
  color: #999;
  margin: 0 0 1.8rem;
}
.event_tab-target {
  background: rgba(255, 255, 255, 0.6);
  border-radius: 8px;
  padding: 1rem 1.4rem;
  font-size: 1.4rem;
  color: #555;
}

.event_tab-soon {
  text-align: center;
  padding: 3rem 1rem;
  color: #777;
}

@media screen and (max-width: 750px) {
  .event_tab-nav {
    gap: 0.4rem;
  }
  .event_tab-nav button {
    padding: 0.6rem 0.2rem 0.8rem;
    border-radius: 0.8rem 0.8rem 0 0;
  }
  .event_tab-nav button img:first-child {
    max-width: none;
  }
  .event_tab-status {
    width: 7rem;
  }
  .event_tab-period {
    font-size: 2.4rem;
  }
  .event_tab-costume {
    font-size: 2.2rem;
  }
  .event_tab-lead {
    font-size: 2.8rem;
  }
  .event_tab-lesson li {
    font-size: 2.6rem;
  }
  .event_tab-lesson li img {
    width: 5rem;
    height: 5rem;
  }
  .event_tab-target {
    font-size: 2.2rem;
  }
  .event_tab-photo-note {
    font-size: 2rem;
  }
}