/* ============================================================
   /acrobatclass/ アクロバットクラス 専用CSS
   ------------------------------------------------------------
   ★このファイルのCSSは、すべて .page-acrobatclass の中でしか効きません。
     指導方針・アクセスページと同じ書き方です。

   【背景色は3種類だけ】
     白          … 素の背景
     .is-tinted  … 薄水色（--sec-tint）
     .is-navy    … 紺（--navy）。文字は白に自動で切り替わります

   ヒーローの本体は assets/css/components/hero.css にあります。
   ============================================================ */

.page-acrobatclass {
  /* ★共通の値は assets/css/components/section.css にあります。
        ここでは、このページだけ変えたいものを上書きします。 */
  --sec-measure: 1000px;  /* 写真が2列で並ぶので、他のページより広め */

  /* ヒーロー（本体は components/hero.css） */
  --hero-h:      420px;
  --hero-h-sp:   340px;
  --hero-pos:    center 38%;
  --hero-pos-sp: center 34%;
  --hero-w:      640px;
}

.page-acrobatclass .pg-hero h1 {
  font-size: clamp(34px, 8vw, 64px);
  line-height: 1.15;
  letter-spacing: -.01em;
}

/* ============================================================
   コンセプト
   ============================================================ */
.page-acrobatclass .cl-concept .cn-lead {
  margin: 0;
  font-size: 16.5px;
  line-height: 2.05;
  color: var(--dark);
}
/* ============================================================
   クラスを選ぶボタン（上部に貼りつく）
   ============================================================ */

/* ============================================================
   クラス一覧カード（写真の上にクラス名を重ねる）
   ------------------------------------------------------------
   ★ここは「どのクラスを見るか選ぶための目次」です。
     下のクラス詳細と同じ大きさにすると、同じセクションが
     2回続いているように見えてしまうので、
     ・幅を 680px に絞る（詳細の写真より明らかに小さくする）
     ・写真を 16:9 にする（詳細は 4:3）
     ・紹介文は置かない（詳細に1回だけ書く）
     の3つで、詳細より一段低い見た目にしています。
   ============================================================ */

/* ============================================================
   クラス詳細
   ============================================================ */
.page-acrobatclass .cl-detail {
  scroll-margin-top: calc(var(--hd-h) + 70px);  /* ジャンプしたとき見出しが隠れないように */
}
.page-acrobatclass .dt-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: start;
}
.page-acrobatclass .dt-photo {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #d4e9f7;
}
.page-acrobatclass .dt-photo img { width: 100%; height: 100%; object-fit: cover; }

.page-acrobatclass .dt-tag {
  display: inline-block;
  margin: 0 0 10px;
  padding: 4px 12px;
  border-radius: 50px;
  background: var(--main-light);
  font-size: 11.5px !important;
  font-weight: 900;
  letter-spacing: .06em;
  color: var(--main);
}
.page-acrobatclass .cl-detail h2 { margin-bottom: 4px; }
.page-acrobatclass .dt-en {
  margin: 0 0 14px;
  font-size: 12.5px !important;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--muted);
}
.page-acrobatclass .dt-lead {
  margin: 0 0 20px;
  font-size: 17px !important;
  font-weight: 700;
  line-height: 1.85;
  color: var(--dark);
}

/* 曜日と時間 */
.page-acrobatclass .dt-times { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.page-acrobatclass .dt-times li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 2px 10px;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--main);
  border-radius: 6px;
  background: #fff;
}
.page-acrobatclass .tm-place { grid-column: 1 / -1; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.page-acrobatclass .tm-day   { font-size: 15px; font-weight: 700; color: var(--dark); }
.page-acrobatclass .tm-time  { font-size: 16.5px; font-weight: 900; color: var(--dark); font-feature-settings: "tnum"; }

/* 指導内容 ／ 月謝 */
.page-acrobatclass .dt-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  margin-top: 36px;
}
.page-acrobatclass .bx-label {
  margin: 0 0 12px;
  font-size: 12px !important;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--muted);
}
.page-acrobatclass .dt-box > p:not(.bx-label) { margin: 0; }
.page-acrobatclass .bx-note {
  margin-top: 10px !important;
  font-size: 13.5px !important;
  color: var(--muted);
}
.page-acrobatclass .fee-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0 !important;
  padding: 9px 0;
  border-bottom: 1px solid rgba(5, 123, 192, .15);
}
.page-acrobatclass .fee-row:last-child { border-bottom: 0; }
.page-acrobatclass .fq { font-size: 13.5px; font-weight: 700; color: var(--muted); }
.page-acrobatclass .fv { font-size: 21px; font-weight: 900; color: var(--dark); font-feature-settings: "tnum"; }

/* ============================================================
   特別プラン（紺のセクション）
   ============================================================ */
.page-acrobatclass .cl-plan { overflow: hidden; }
.page-acrobatclass .pl-inner {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
.page-acrobatclass .pl-inner::before {
  content: "";
  position: absolute;
  top: -120px; right: -120px;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  pointer-events: none;
}
.page-acrobatclass .pl-tag {
  display: inline-block;
  margin: 0 0 14px;
  padding: 5px 14px;
  border-radius: 50px;
  background: var(--sub);
  font-size: 11.5px !important;
  font-weight: 900;
  letter-spacing: .06em;
  color: #2e2a00 !important;
}
.page-acrobatclass .cl-plan h2 { padding-top: 0; margin-bottom: 16px; }
.page-acrobatclass .pl-fee {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  margin: 22px 0 0;
  padding: 12px 26px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .1);
}
.page-acrobatclass .pl-fee .fq { color: #9fb8cc; }
.page-acrobatclass .pl-fee .fv { color: #fff; font-size: 27px; }

/* ============================================================
   ダブル受講（薄水色＋青枠のカード）
   ============================================================ */
.page-acrobatclass .db-card {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 2px solid var(--main);
  border-radius: 24px;
  overflow: hidden;
  background: var(--main-light);
}
.page-acrobatclass .db-img { background: #c6dff2; min-height: 280px; }
.page-acrobatclass .db-img img { width: 100%; height: 100%; object-fit: cover; }
.page-acrobatclass .db-body {
  padding: 40px;
  display: flex; flex-direction: column; justify-content: center;
}
.page-acrobatclass .db-en {
  margin: 0 0 10px;
  font-size: 11.5px !important;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--main);
}
.page-acrobatclass .cl-double h2 { padding-top: 0; margin-bottom: 14px; }
.page-acrobatclass .db-lead {
  margin: 0 0 12px;
  font-size: 16px !important;
  font-weight: 700;
  line-height: 1.85;
  color: var(--dark);
}
.page-acrobatclass .db-body > p:last-of-type { margin: 0; font-size: 14.5px !important; }
.page-acrobatclass .db-body .nas-link { align-self: flex-start; }

/* ============================================================
   イベント（紺の上に半透明カード）
   ============================================================ */
.page-acrobatclass .ev-list {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.page-acrobatclass .ev-list li {
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 20px;
  overflow: hidden;
  background: rgba(255, 255, 255, .08);
}
.page-acrobatclass .ev-list li.is-wide { grid-column: span 2; }
.page-acrobatclass .ev-img { aspect-ratio: 16 / 9; overflow: hidden; }
.page-acrobatclass .ev-list li.is-wide .ev-img { aspect-ratio: 32 / 9; }
.page-acrobatclass .ev-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-acrobatclass .ev-body { padding: 24px 26px 26px; }
.page-acrobatclass .ev-tag {
  margin: 0 0 8px;
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--sub) !important;
}
.page-acrobatclass .ev-list h3 {
  margin: 0 0 10px;
  font-size: 19px; font-weight: 900; color: #fff;
  word-break: auto-phrase;
}
.page-acrobatclass .ev-body p:last-child { margin: 0; font-size: 14.5px !important; line-height: 1.9; }

/* ============================================================
   指導理念（白・軽く）
   ============================================================ */
.page-acrobatclass .cl-philosophy { text-align: center; }
.page-acrobatclass .cl-philosophy h2 { padding-top: 0; margin: 10px 0 14px; }
.page-acrobatclass .cl-philosophy p { max-width: 640px; margin: 0 auto; }
.page-acrobatclass .cl-philosophy .nas-link { margin-top: 22px; }

/* ============================================================
   教室カード
   ============================================================ */
.page-acrobatclass .cs-cards {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.page-acrobatclass .cs-cards li {
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .08);
}
.page-acrobatclass .cs-img { aspect-ratio: 16 / 9; overflow: hidden; background: #c6dff2; }
.page-acrobatclass .cs-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-acrobatclass .cs-body { padding: 24px 28px 28px; text-align: center; }
.page-acrobatclass .cs-days {
  display: inline-block;
  margin: 0 0 12px;
  padding: 5px 14px;
  border-radius: 50px;
  background: var(--main);
  font-size: 12px !important;
  font-weight: 700;
  color: #fff !important;
}
.page-acrobatclass .cs-cards h3 { margin: 0 0 8px; font-size: 21px; font-weight: 900; color: var(--dark); }
.page-acrobatclass .cs-area,
.page-acrobatclass .cs-access { margin: 0; font-size: 14px !important; color: #555; }
.page-acrobatclass .cs-more { margin: 32px 0 0; text-align: center; }
.page-acrobatclass .cs-more .nas-link { margin-top: 0; }

/* ============================================================
   タブレット
   ============================================================ */
@media (max-width: 900px) {
  .page-acrobatclass .dt-top,
  .page-acrobatclass .dt-bottom { grid-template-columns: 1fr; gap: 28px; }
  /* 1列に落ちたとき、写真が画面いっぱいに膨らんで
     一覧カードとの大小関係が逆転するのを止める */
  .page-acrobatclass .dt-photo { max-width: 520px; }
  .page-acrobatclass .db-card   { grid-template-columns: 1fr; }
  .page-acrobatclass .ev-list   { grid-template-columns: 1fr; }
  .page-acrobatclass .ev-list li.is-wide { grid-column: span 1; }
  .page-acrobatclass .ev-list li.is-wide .ev-img { aspect-ratio: 16 / 9; }
  .page-acrobatclass .cs-cards  { grid-template-columns: 1fr; }
}

/* ============================================================
   スマホ
   ============================================================ */
@media (max-width: 600px) {

  .page-acrobatclass .dt-times li { padding: 12px 14px; }

  .page-acrobatclass .db-body { padding: 28px 24px 30px; }
  .page-acrobatclass .db-img  { min-height: 210px; }

  .page-acrobatclass .ev-body { padding: 20px 22px 22px; }
  .page-acrobatclass .cs-body { padding: 20px 22px 24px; }

}