/** ========================================================================
 * Ballet Pages Studio CSS
 * ========================================================================
 * このファイルは、公開ホームページと先生用管理画面のCSSを一旦1ファイルに
 * 戻したものです。デザイン完成前に全体像を見ながら調整しやすくするため、
 * 旧分割ファイルの内容を読み込み順のまま統合しています。
 *
 * 共通化の方針:
 * - 色、角丸、影、余白、モーションは `--bp-*` / `--bp-admin-*` 変数を起点にします。
 * - `.bp-section`, `.bp-section-inner`, `.bp-section-head`, `.bp-richtext`, `.bp-button`
 *   はセクションをまたいで使う共通部品です。
 * - セクション固有の写真、カード、グリッド、テーブル、問い合わせカードなどは
 *   各セクションの区切り内で管理します。
 * - 先生が選んだテーマカラー、サブカラー、背景色、テキストカラーは
 *   `--bp-main`, `--bp-sub`, `--bp-background`, `--bp-text` に入り、
 *   公開ページの色は原則この4つから派生させます。
 * - 管理画面は先生のテーマカラーではなく、`--bp-admin-*` のシステム色で統一します。
 *
 * 区切りの読み方:
 * - `01 Design Tokens And Base`: 変数と土台
 * - `02 Public Layout Primitives`: 公開ページ共通レイアウト
 * - `03 Navigation And Hero`: ヘッダーとトップ
 * - `04 Public Section Components`: 各公開セクション
 * - `05 Management Screens`: 管理画面
 * - `06 Responsive Rules`: レスポンシブ
 * - `07 Current Visual Layer`: 現在の見た目用の最終調整
 * ======================================================================== */

/** ========================================================================
 * 01 Design Tokens And Base
 * ------------------------------------------------------------------------
 * サイト全体・管理画面・一覧カードで共有するCSS変数、body、ローディング、基本要素をまとめます。色・角丸・影・動きは原則ここから参照します。
 * 旧分割時の名称: 00-tokens-base.css
 * ======================================================================== */

/* ================================================================
 * Ballet Pages public styles
 * Order: tokens, base, layout, components, sections, account UI, responsive.
 * ================================================================ */

/* 補足: 教室ページ全体のbody余白と背景を整えます。 */
.ballet-pages-studio-body {
  margin: 0;
  background: var(--bp-paper);
}

/* 補足: スマホメニュー展開中は背面ページのスクロールを止めます。 */
.ballet-pages-studio-body.is-bp-menu-locked {
  overflow: hidden;
}

/* 補足: WordPress管理バーの表示位置を調整します。 */
.ballet-pages-studio-body #wpadminbar {
  position: fixed;
}

/* 補足: JS有効時だけローディング画面を使えるようにします。 */
.bp-page-loader {
  display: none;
}

/* 補足: 公開ページ、管理画面、一覧カードで共有するデザイントークンを定義します。 */
:root,
.ballet-pages-studio,
.ballet-pages-dashboard-shell,
.ballet-pages-studio-card,
.ballet-pages-auth,
.ballet-pages-account-gate {
  --bp-main: #d8b8b6;
  --bp-background: #f7f1ed;
  --bp-heading-font: "Cormorant", serif;
  --bp-body-font: "Shippori Mincho", "Yu Mincho", YuMincho, serif;
  --bp-image-position: center center;
  --bp-radius-card: 10px;
  --bp-radius-media: 10px;
  --bp-radius-button: 10px;
  --bp-white: #fff;
  --bp-black: #171514;
  --bp-danger: #b42318;
  --bp-ink: color-mix(in srgb, var(--bp-main), var(--bp-black) 82%);
  --bp-muted: color-mix(in srgb, var(--bp-ink), transparent 34%);
  --bp-muted-strong: color-mix(in srgb, var(--bp-ink), transparent 22%);
  --bp-paper: var(--bp-white);
  --bp-canvas: var(--bp-background);
  --bp-canvas-soft: color-mix(
    in srgb,
    var(--bp-background),
    var(--bp-white) 28%
  );
  --bp-tint: color-mix(in srgb, var(--bp-main), var(--bp-white) 92%);
  --bp-section-main: color-mix(
    in srgb,
    var(--bp-background),
    var(--bp-main) 12%
  );
  --bp-section-sub: var(--bp-background);
  --bp-section-blend-soft: color-mix(
    in srgb,
    var(--bp-background),
    var(--bp-white) 18%
  );
  --bp-section-edge: color-mix(in srgb, var(--bp-main), transparent 74%);
  --bp-panel: color-mix(in srgb, var(--bp-paper), var(--bp-main) 4%);
  --bp-panel-strong: color-mix(in srgb, var(--bp-paper), var(--bp-main) 10%);
  --bp-panel-readable: color-mix(
    in srgb,
    var(--bp-paper),
    var(--bp-background) 36%
  );
  --bp-header-bg: color-mix(in srgb, var(--bp-paper), transparent 7%);
  --bp-header-menu-bg: color-mix(in srgb, var(--bp-paper), transparent 2%);
  --bp-accent: color-mix(in srgb, var(--bp-main), var(--bp-ink) 14%);
  --bp-accent-dark: color-mix(in srgb, var(--bp-main), var(--bp-ink) 32%);
  --bp-accent-line: color-mix(in srgb, var(--bp-main), var(--bp-ink) 20%);
  --bp-line: color-mix(in srgb, var(--bp-ink), transparent 87%);
  --bp-line-accent: color-mix(in srgb, var(--bp-main), transparent 45%);
  --bp-field-border: color-mix(in srgb, var(--bp-ink), transparent 82%);
  --bp-on-accent: var(--bp-white);
  --bp-on-hero: var(--bp-white);
  --bp-hero-scrim: rgba(0, 0, 0, 0.42);
  --bp-hero-scrim-soft: rgba(0, 0, 0, 0.18);
  --bp-hero-scrim-clear: rgba(0, 0, 0, 0.04);
  --bp-hero-scrim-bottom: rgba(0, 0, 0, 0.24);
  --bp-hero-scrim-mobile-start: rgba(0, 0, 0, 0.48);
  --bp-hero-scrim-mobile-end: rgba(0, 0, 0, 0.06);
  --bp-lightbox-bg: rgba(0, 0, 0, 0.86);
  --bp-lightbox-shadow: rgba(0, 0, 0, 0.32);
  --bp-lightbox-button-border: rgba(255, 255, 255, 0.28);
  --bp-lightbox-button-bg: rgba(255, 255, 255, 0.12);
  --bp-lightbox-button-bg-hover: rgba(255, 255, 255, 0.22);
  --bp-lightbox-button-text: var(--bp-white);
  --bp-schedule-bg: var(--bp-paper);
  --bp-schedule-head-bg: var(--bp-canvas-soft);
  --bp-schedule-head-text: var(--bp-accent-dark);
  --bp-schedule-line: var(--bp-line);
  --bp-schedule-empty-line: var(--bp-line-accent);
  --bp-footer-bg: color-mix(in srgb, var(--bp-background), var(--bp-main) 18%);
  --bp-footer-text: var(--bp-ink);
  --bp-footer-link: var(--bp-ink);
  --bp-footer-link-hover: var(--bp-accent-dark);
  --bp-footer-muted: var(--bp-muted);
  --bp-footer-line: color-mix(in srgb, var(--bp-main), var(--bp-ink) 12%);
  --bp-shadow-color: color-mix(in srgb, var(--bp-ink), transparent 92%);
  --bp-shadow: 0 2px 10px var(--bp-shadow-color);
  --bp-card-shadow: 0 18px 46px
    color-mix(in srgb, var(--bp-ink), transparent 93%);
  --bp-motion-fast: 0.2s;
  --bp-motion-medium: 0.45s;
  --bp-motion-slow: 0.75s;
  --bp-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* 補足: 角ありデザイン選択時の角丸トークンをCSS側でまとめて上書きします。 */
.is-corner-sharp {
  --bp-radius-card: 0;
  --bp-radius-media: 0;
  --bp-radius-button: 0;
}

/* 補足: 公開教室ページ全体の基本表示を定義します。 */
.ballet-pages-studio {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: clip;
  background: var(--bp-paper);
  color: var(--bp-ink);
  font-family: var(--bp-body-font);
}

/* 補足: 短時間だけ表示する公開ページのローディング画面を定義します。 */
.bp-has-js .bp-page-loader {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  display: grid;
  background: var(--bp-paper);
  color: var(--bp-ink);
  font-family: var(--bp-body-font);
  opacity: 1;
  pointer-events: auto;
  place-items: center;
  transition:
    opacity var(--bp-motion-medium) var(--bp-motion-ease),
    visibility var(--bp-motion-medium) var(--bp-motion-ease);
  visibility: visible;
}

/* 補足: ローディング画面をフェードアウトして操作を妨げない状態にします。 */
.bp-has-js .bp-page-loader.is-hidden {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

/* 補足: ローディング画面内の教室名とマークを中央にまとめます。 */
.bp-page-loader-inner {
  display: grid;
  gap: 18px;
  justify-items: center;
  padding: 24px;
  text-align: center;
}

/* 補足: ローディング中の小さなアクセントマークを表示します。 */
.bp-page-loader-mark {
  display: block;
  width: 42px;
  height: 42px;
  border: 1px solid var(--bp-line-accent);
  border-top-color: var(--bp-accent-dark);
  border-radius: 999px;
  animation: bpLoaderSpin 0.9s linear infinite;
}

/* 補足: ローディング画面内の教室名を上品に表示します。 */
.bp-page-loader-title {
  color: var(--bp-accent-dark);
  font-family: var(--bp-heading-font);
  font-size: clamp(1.25rem, 3vw, 2rem);
  line-height: 1.3;
}

/* 補足: ローディングマークの回転を定義します。 */
@keyframes bpLoaderSpin {
  to {
    transform: rotate(360deg);
  }
}

/* 補足: ページ全体で使う控えめなフェードアップ動作を定義します。 */
@keyframes bpFadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 補足: 写真やカードのホバー時に使う小さな浮き上がり動作を定義します。 */
@keyframes bpSoftScaleIn {
  from {
    opacity: 0;
    transform: scale(0.985);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 補足: スクロール表示アニメーションの初期状態をJS有効時だけ適用します。 */
.bp-has-js .bp-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--bp-motion-slow) var(--bp-motion-ease),
    transform var(--bp-motion-slow) var(--bp-motion-ease);
  will-change: opacity, transform;
}

/* 補足: 画面内に入った要素をふわっと表示します。 */
.bp-has-js .bp-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 補足: 横並びのカード類は少しだけ表示タイミングをずらします。 */
.bp-has-js .bp-reveal:nth-child(2) {
  transition-delay: 0.05s;
}

/* 補足: 横並びのカード類は少しだけ表示タイミングをずらします。 */
.bp-has-js .bp-reveal:nth-child(3) {
  transition-delay: 0.1s;
}

/* 補足: 横並びのカード類は少しだけ表示タイミングをずらします。 */
.bp-has-js .bp-reveal:nth-child(4) {
  transition-delay: 0.15s;
}

/** ========================================================================
 * 02 Public Layout Primitives
 * ------------------------------------------------------------------------
 * 公開ページのセクション幅、見出し、本文、注記、基本ボタンなど、全セクション共通の骨組みをまとめます。
 * 旧分割時の名称: 10-public-layout.css
 * ======================================================================== */

/* 補足: 公開教室ページ内の要素に共通のボックスサイズ計算を適用します。 */
.ballet-pages-studio *,
.ballet-pages-studio *::before,
.ballet-pages-studio *::after {
  box-sizing: border-box;
}

/* 補足: 公開教室ページ内の画像の共通表示を整えます。 */
.ballet-pages-studio img {
  max-width: 100%;
  object-position: var(--bp-image-position);
}

/* 補足: スクリーンリーダー向けの非表示テキストを画面外へ配置します。 */
.ballet-pages-studio .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* 補足: 公開ページ各セクションの余白と背景リズムを定義します。 */
.bp-section,
.bp-section:nth-of-type(odd),
.bp-intro,
.bp-gallery-section,
.bp-access-section,
.bp-teachers-section,
.bp-news-section,
.bp-faq-section,
.bp-classes-section,
.bp-schedule-section,
.bp-price-section {
  position: relative;
  scroll-margin-top: 96px;
  padding: clamp(88px, 10vw, 150px) 0;
  border-top: 1px solid
    color-mix(in srgb, var(--bp-section-edge), transparent 22%);
  background: var(--bp-paper);
}

/* 補足: セクション背景の上部に薄い面を重ねて、選択背景色の切り替わりを自然に見せます。 */
.bp-section::before {
  position: absolute;
  inset: 0 0 auto;
  height: 42%;
  content: "";
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--bp-background), transparent 38%),
    transparent
  );
  pointer-events: none;
}

/* 補足: セクションの実コンテンツを背景装飾より前面に置きます。 */
.bp-section > * {
  position: relative;
  z-index: 1;
}

/* 補足: 背景色を選択した色が見える濃さで交互に反映します。 */
.bp-section:nth-of-type(even),
.bp-classes-section,
.bp-price-section,
.bp-gallery-section {
  background: var(--bp-canvas);
}

/* 補足: お知らせセクションの背景に選択背景色とテーマカラーを少し混ぜます。 */
.bp-news-section {
  background: linear-gradient(180deg, var(--bp-paper), var(--bp-section-main));
}

/* 補足: 教室紹介とアクセスの背景に選択背景色をそのまま反映します。 */
.bp-intro,
.bp-access-section {
  background: var(--bp-section-sub);
}

/* 補足: 料金セクションの背景に選択背景色をやわらかく反映します。 */
.bp-price-section {
  background: linear-gradient(
    180deg,
    var(--bp-section-blend-soft),
    var(--bp-paper)
  );
}

/* 補足: 講師、FAQ、クラスの背景に選択背景色を敷きます。 */
.bp-teachers-section,
.bp-faq-section,
.bp-classes-section {
  background: var(--bp-canvas);
}

/* 補足: ギャラリーとお問い合わせの背景は選択背景色を少し明るくして敷きます。 */
.bp-gallery-section,
.bp-cta {
  background: var(--bp-canvas-soft);
}

/* 補足: 各セクション内側の最大幅と中央寄せを管理します。 */
.bp-section-inner {
  width: min(1160px, calc(100% - 64px));
  margin: 0 auto;
}

/* 補足: 見出しと本文を並べるセクション内レイアウトを定義します。 */
.bp-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 5vw, 54px);
  align-items: start;
}

/* 補足: 各セクションの見出しブロックを整えます。 */
.bp-section-head {
  position: relative;
  max-width: 820px;
  margin: 0 auto clamp(42px, 6vw, 76px);
  text-align: center;
}

/* 補足: 全セクションの見出し装飾を短い横線に統一します。 */
.bp-section-head::after {
  display: block;
  width: 44px;
  height: 1px;
  margin: 22px auto 0;
  background: var(--bp-main);
  content: "";
  opacity: 0.68;
}

/* 補足: 各セクション見出し上の日本語ラベルを小さく整えます。 */
.bp-section-head p {
  margin: 0 0 14px;
  color: var(--bp-accent-dark);
  font-family: var(--bp-body-font);
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
}

/* 補足: 各セクション見出しの英語タイトルを大きく整えます。 */
.bp-section-head h1,
.bp-section-head h2 {
  max-width: 760px;
  margin: 0 auto;
  color: var(--bp-main);
  font-family: var(--bp-heading-font);
  font-size: 3.5rem;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0;
}

/* 補足: 英語フォントを使う表示は筆記体でも崩れないよう字間を広げません。 */
.ballet-pages-studio
  :is(
    .bp-page-loader-title,
    .bp-studio-brand,
    .bp-nav-label > span,
    .bp-section-head h1,
    .bp-section-head h2,
    .bp-hero h1,
    .bp-card h3,
    .bp-instructor .bp-muted,
    .bp-news-detail h2,
    .bp-class dt,
    .bp-schedule-day,
    .bp-access-item > span,
    .bp-contact-card small,
    .bp-footer-brand
  ) {
  letter-spacing: 0;
}

/* 補足: 本文テキストの幅、色、行間を整えます。 */
.bp-richtext {
  max-width: 780px;
  margin-right: auto;
  margin-left: auto;
  color: var(--bp-muted);
  font-size: 0.9rem;
  line-height: 1.8;
}

/* 補足: 入力フォームで付けた改行や段落が公開側でも自然な余白で表示されるようにします。 */
.bp-richtext p {
  margin-top: 0;
  margin-bottom: 1em;
}

/* 補足: 文章ブロックの最後だけ余白を消して周辺レイアウトに馴染ませます。 */
.bp-richtext > :last-child {
  margin-bottom: 0;
}

/* 補足: 補足テキスト用の控えめな文字色を適用します。 */
.bp-muted {
  color: var(--bp-muted);
}

/* 補足: 各セクション末尾に表示する注記リストの枠と余白を整えます。 */
.bp-section-notes {
  display: grid;
  gap: 8px;
  max-width: 840px;
  margin: clamp(28px, 4vw, 44px) auto 0;
  padding: 18px 22px;
  border: 1px solid var(--bp-line-accent);
  border-radius: var(--bp-radius-card);
  background: var(--bp-panel-readable);
  color: var(--bp-muted);
  font-size: 0.82rem;
  line-height: 1.75;
  list-style: none;
}

/* 補足: 注記リストの1項目を記号と本文で横並びにします。 */
.bp-section-notes li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px;
  margin: 0;
}

/* 補足: 注記リストの※記号を本文より少し濃く表示します。 */
.bp-section-notes span {
  color: var(--bp-accent-dark);
  font-weight: 700;
}

/* 補足: ヒーロー内の注記リストは写真上でも読める配色にします。 */
.bp-hero-content .bp-section-notes {
  max-width: 640px;
  margin: 24px 0 0;
  border-color: color-mix(in srgb, var(--bp-on-hero), transparent 78%);
  background: color-mix(in srgb, var(--bp-ink), transparent 74%);
  color: color-mix(in srgb, var(--bp-on-hero), transparent 12%);
}

/* 補足: ヒーロー内の注記記号を白系に切り替えます。 */
.bp-hero-content .bp-section-notes span {
  color: var(--bp-on-hero);
}

/* 補足: 固定ヘッダーのレイアウト、背景、境界線を整えます。 */

/** ========================================================================
 * 03 Navigation And Hero
 * ------------------------------------------------------------------------
 * ヘッダー、グローバルメニュー、ハンバーガーメニュー、トップ画像まわりの構造と動きをまとめます。
 * 旧分割時の名称: 20-public-navigation-hero.css
 * ======================================================================== */

.bp-studio-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 54px);
  min-height: 72px;
  padding: 10px clamp(24px, 5vw, 72px);
  border-bottom: 1px solid var(--bp-line);
  background: var(--bp-header-bg);
  backdrop-filter: blur(14px);
  transition:
    background var(--bp-motion-fast) ease,
    border-color var(--bp-motion-fast) ease;
}

/* 補足: 管理バー表示時の固定ヘッダー位置を調整します。 */
.admin-bar .bp-studio-nav {
  top: 32px;
}

/* 補足: メニュー展開中はフルスクリーンメニューを最前面に出します。 */
.ballet-pages-studio.is-menu-open .bp-studio-nav {
  z-index: 100000;
}

/* 補足: ヘッダー左側のロゴまたは教室名リンクを整えます。 */
.bp-studio-brand {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 148px;
  color: var(--bp-ink);
  font-family: var(--bp-heading-font);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  text-decoration: none;
}

/* 補足: ヘッダー内ロゴ画像の最大サイズを管理します。 */
.bp-nav-logo {
  display: block;
  width: auto;
  max-width: 148px;
  max-height: 46px;
  object-fit: contain;
}

/* 補足: スマホ用メニューボタンの表示と形を整えます。 */
.bp-menu-toggle {
  display: none;
}

/* 補足: 教室ページ内ナビゲーションの並びを整えます。 */
.bp-studio-nav nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 1.9vw, 32px);
}

/* 補足: ナビゲーションリンクの文字組みと配置を整えます。 */
.bp-studio-nav nav a {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 0;
  color: var(--bp-muted-strong);
  line-height: 1;
  text-decoration: none;
  transition:
    color var(--bp-motion-fast) ease,
    transform var(--bp-motion-fast) ease;
}

/* 補足: ナビゲーションの文字ブロックを整えます。 */
.bp-nav-label {
  display: grid;
  gap: 4px;
  justify-items: center;
  text-align: center;
}

/* 補足: ハンバーガーメニュー用のアイコンはPC表示では隠します。 */
.bp-nav-icon {
  display: none;
}

/* 補足: ナビゲーションの英語メニュー名を整えます。 */
.bp-studio-nav nav .bp-nav-label > span {
  font-family: var(--bp-heading-font);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

/* 補足: ナビゲーションリンクの下線装飾は使わず無効化します。 */
.bp-studio-nav nav a::after {
  content: "";
  display: none;
}

/* 補足: ナビゲーションリンクのホバー時は文字色だけを変更します。 */
.bp-studio-nav nav a:hover,
.bp-studio-nav nav a:focus-visible {
  color: var(--bp-accent-dark);
  transform: translateY(-1px);
}

/* 補足: ナビゲーションリンクのホバー時に日本語名も同じ色へ寄せます。 */
.bp-studio-nav nav a:hover small,
.bp-studio-nav nav a:focus-visible small {
  color: var(--bp-accent-dark);
}

/* 補足: お問い合わせメニューだけアクセントカラーのボタン風にします。 */
.bp-studio-nav nav a.bp-nav-contact {
  overflow: hidden;
  min-height: 42px;
  padding: 10px 20px;
  border: 1px solid
    color-mix(in srgb, var(--bp-accent-dark), var(--bp-paper) 14%);
  border-radius: var(--bp-radius-button);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--bp-accent-dark), var(--bp-paper) 12%),
    var(--bp-accent-dark)
  );
  box-shadow: 0 10px 24px
    color-mix(in srgb, var(--bp-accent-dark), transparent 82%);
  color: var(--bp-on-accent);
}

/* 補足: お問い合わせメニューに細いハイライトを入れてCTAらしく見せます。 */
.bp-studio-nav nav a.bp-nav-contact::before {
  position: absolute;
  inset: 1px 1px auto;
  height: 1px;
  background: color-mix(in srgb, var(--bp-on-accent), transparent 42%);
  content: "";
}

/* 補足: お問い合わせメニュー内の日本語ラベルもボタン上で読みやすくします。 */
.bp-studio-nav nav a.bp-nav-contact small {
  color: color-mix(in srgb, var(--bp-on-accent), transparent 18%);
}

/* 補足: お問い合わせメニューのホバー時はアクセント色を少し濃く見せます。 */
.bp-studio-nav nav a.bp-nav-contact:hover,
.bp-studio-nav nav a.bp-nav-contact:focus-visible {
  border-color: var(--bp-ink);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--bp-ink), var(--bp-paper) 10%),
    var(--bp-ink)
  );
  box-shadow: 0 14px 30px color-mix(in srgb, var(--bp-ink), transparent 78%);
  color: var(--bp-on-accent);
}

/* 補足: お問い合わせメニューのホバー時も日本語ラベルを白系に保ちます。 */
.bp-studio-nav nav a.bp-nav-contact:hover small,
.bp-studio-nav nav a.bp-nav-contact:focus-visible small {
  color: color-mix(in srgb, var(--bp-on-accent), transparent 10%);
}

/* 補足: ナビゲーションの日本語メニュー名を英語の下に表示します。 */
.bp-studio-nav nav small {
  display: block;
  color: var(--bp-muted);
  font-family: var(--bp-body-font);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* 補足: ファーストビューとなるヒーローエリアを定義します。 */
.bp-hero {
  position: relative;
  display: grid;
  height: min(780px, calc(100vh - 72px));
  min-height: 620px;
  overflow: hidden;
  background: var(--bp-black);
  place-items: center;
}

/* 補足: ヒーロー画像とスライダーを全面配置します。 */
.bp-hero-image,
.bp-hero-slider {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.bp-hero-picture { position: absolute; inset: 0; display: block; opacity: 0; transition: opacity 1.2s ease; }
.bp-hero-image { object-fit: cover; object-position: center; }
.bp-hero-slider:not(.is-ready) .is-first-desktop,
.bp-hero-slider.is-ready .bp-hero-picture.is-active { opacity: 1; }
.bp-hero-controls { position: absolute; bottom: 20px; right: 20px; z-index: 4; display: flex; gap: 8px; }
.bp-hero-controls button { min-width: 40px; min-height: 40px; padding: 6px 12px; border: 1px solid #ffffffa0; border-radius: 24px; color: #fff; background: #0009; cursor: pointer; font: inherit; font-size: 13px; }
.bp-hero-controls button[aria-pressed="true"] { color: #222; background: #fff; }
.bp-hero-controls[hidden] { display: none; }
@media (max-width: 760px) {
  .bp-hero-slider:not(.is-ready) .is-first-desktop { opacity: 0; }
  .bp-hero-slider:not(.is-ready) .is-first-mobile { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .bp-hero-picture { transition: none; } }

/* 補足: 写真未設定箇所を実際の写真枠と同じ寸法で示します。 */
.bp-no-image {
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--bp-ink), transparent 84%);
  background:
    linear-gradient(
      135deg,
      transparent 0 49.5%,
      color-mix(in srgb, var(--bp-ink), transparent 92%) 49.5% 50.5%,
      transparent 50.5%
    ),
    color-mix(in srgb, var(--bp-white), var(--bp-ink) 5%);
  color: color-mix(in srgb, var(--bp-ink), transparent 48%);
}

/* 補足: NO IMAGEの文字を控えめなシステム表示として整えます。 */
.bp-no-image > span {
  padding: 7px 11px;
  border: 1px solid color-mix(in srgb, var(--bp-ink), transparent 82%);
  background: color-mix(in srgb, var(--bp-white), transparent 8%);
  font-family: sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.12em;
}

/* 補足: トップ画像未設定時もヒーローと同じ全面サイズを維持します。 */
.bp-no-image-hero {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* 補足: ヒーロー画像の上に文字を読みやすくするオーバーレイを重ねます。 */
.bp-hero::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(
      90deg,
      var(--bp-hero-scrim) 0%,
      var(--bp-hero-scrim-soft) 46%,
      var(--bp-hero-scrim-clear) 100%
    ),
    linear-gradient(0deg, var(--bp-hero-scrim-bottom), transparent 45%);
}

/* 補足: ヒーロー画像がない場合の背景グラデーションを用意します。 */
.bp-hero:not(:has(.bp-hero-image))::after {
  background: linear-gradient(135deg, var(--bp-tint), var(--bp-canvas));
}

/* 補足: ヒーロー内のロゴ、タイトル、ボタンの配置を整えます。 */
.bp-hero-content {
  position: relative;
  z-index: 2;
  width: min(1160px, calc(100% - 64px));
  margin: 0 auto;
  padding: 80px 0;
  color: var(--bp-on-hero);
  text-align: left;
}

/* 補足: ヒーロー内の主要要素を読み込み時にふわっと表示します。 */
.bp-hero-content > * {
  animation: bpFadeUp var(--bp-motion-slow) var(--bp-motion-ease) both;
}

/* 補足: ヒーロー内の要素ごとに少しだけ表示タイミングをずらします。 */
.bp-hero-content > :nth-child(2) {
  animation-delay: 0.06s;
}

/* 補足: ヒーロー内の要素ごとに少しだけ表示タイミングをずらします。 */
.bp-hero-content > :nth-child(3) {
  animation-delay: 0.12s;
}

/* 補足: ヒーロー内の要素ごとに少しだけ表示タイミングをずらします。 */
.bp-hero-content > :nth-child(4) {
  animation-delay: 0.18s;
}

/* 補足: ヒーロー画像とスライダーを全面配置します。 */
.bp-hero:not(:has(.bp-hero-image)) .bp-hero-content {
  color: var(--bp-ink);
}

/* 補足: ヒーロー内ロゴ画像のサイズと余白を整えます。 */
.bp-logo {
  width: auto;
  max-width: 156px;
  max-height: 96px;
  margin: 0 0 32px;
  object-fit: contain;
  filter: drop-shadow(0 8px 24px var(--bp-shadow-color));
}

/* 補足: ヒーローの教室名タイトルを大きく印象的に表示します。 */
.bp-hero h1 {
  max-width: 760px;
  margin: 0;
  font-family: var(--bp-heading-font);
  font-size: clamp(2.75rem, 6vw, 5.7rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0;
  text-shadow: 0 2px 28px color-mix(in srgb, var(--bp-ink), transparent 84%);
  text-wrap: balance;
}

/* 補足: ヒーロー画像とスライダーを全面配置します。 */
.bp-hero:not(:has(.bp-hero-image)) h1 {
  text-shadow: none;
}

/* 補足: ヒーローのキャッチコピーを読みやすく整えます。 */
.bp-catch {
  max-width: 620px;
  margin: 28px 0 0;
  color: color-mix(in srgb, var(--bp-on-hero), transparent 10%);
  font-size: clamp(0.98rem, 1.35vw, 1.15rem);
  line-height: 2;
  text-shadow: 0 1px 16px color-mix(in srgb, var(--bp-ink), transparent 80%);
}

/* 補足: ヒーロー画像とスライダーを全面配置します。 */
.bp-hero:not(:has(.bp-hero-image)) .bp-catch {
  color: var(--bp-muted);
  text-shadow: none;
}

/* 補足: ファーストビューとなるヒーローエリアを定義します。 */
.bp-hero-actions,
.bp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 38px;
}

/* 補足: ボタン群の横並びと折り返しを管理します。 */
.bp-actions {
  justify-content: center;
}

/* 補足: 公開ページと管理画面で使う共通ボタンを定義します。 */
.bp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 158px;
  min-height: 50px;
  padding: 0 26px;
  border: 1px solid var(--bp-accent-dark);
  border-radius: var(--bp-radius-button);
  background: var(--bp-accent-dark);
  box-shadow: none;
  color: var(--bp-on-accent);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition:
    background var(--bp-motion-fast) ease,
    border-color var(--bp-motion-fast) ease,
    box-shadow var(--bp-motion-fast) ease,
    color var(--bp-motion-fast) ease,
    transform var(--bp-motion-fast) ease;
}

/* 補足: 共通ボタンのホバー時の色を整えます。 */
.bp-button:hover {
  border-color: var(--bp-ink);
  background: var(--bp-ink);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--bp-ink), transparent 88%);
  color: var(--bp-on-accent);
  transform: translateY(-2px);
}

/* 補足: サブボタンを枠線中心の控えめな見た目にします。 */
.bp-button-secondary {
  background: transparent;
  color: var(--bp-accent-dark);
}

/* 補足: サブボタンのホバー時の色を整えます。 */
.bp-button-secondary:hover {
  color: var(--bp-on-accent);
}

/* 補足: ファーストビューとなるヒーローエリアを定義します。 */
.bp-hero .bp-button {
  border-color: var(--bp-on-hero);
  background: var(--bp-on-hero);
  color: var(--bp-ink);
}

/* 補足: ファーストビューとなるヒーローエリアを定義します。 */
.bp-hero .bp-button:hover {
  border-color: var(--bp-ink);
  background: var(--bp-ink);
  color: var(--bp-on-accent);
}

/* 補足: ファーストビューとなるヒーローエリアを定義します。 */
.bp-hero .bp-button-glass {
  border-color: color-mix(in srgb, var(--bp-on-hero), transparent 30%);
  background: transparent;
  color: var(--bp-on-hero);
  backdrop-filter: none;
}

/* 補足: ヒーロー画像とスライダーを全面配置します。 */
.bp-hero:not(:has(.bp-hero-image)) .bp-button-glass {
  border-color: var(--bp-line);
  color: var(--bp-ink);
}

/** ========================================================================
 * 04 Public Section Components
 * ------------------------------------------------------------------------
 * お知らせ、特徴、講師、クラス、スケジュール、料金、FAQ、アクセス、ギャラリー、問い合わせ、フッターなど各セクション固有の部品をまとめます。
 * 旧分割時の名称: 30-public-sections.css
 * ======================================================================== */

/* 補足: カード一覧のレスポンシブグリッドを定義します。 */
.bp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(32px, 4vw, 54px);
}

/* 補足: 講師カードなど共通カードの基本表示を定義します。 */
.bp-card {
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* 補足: カード画像の比率と角丸を整えます。 */
.bp-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--bp-radius-media);
  object-fit: cover;
}

/* 補足: カード内の画像以外の余白を調整します。 */
.bp-card > *:not(img) {
  margin-right: 0;
  margin-left: 0;
}

/* 補足: カード見出しの文字組みを整えます。 */
.bp-card h3 {
  margin-top: 24px;
  margin-bottom: 10px;
  font-family: var(--bp-heading-font);
  font-size: 1.55rem;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0;
}

/* 補足: 公開ページ各セクションの余白と背景リズムを定義します。 */
.bp-intro .bp-richtext {
  max-width: none;
  text-align: left;
}

/* 補足: Featuresセクションはアーチ型写真と重なりカードで、3つの特徴を上品に見せます。 */
.bp-features-section {
  padding-block: clamp(80px, 10vw, 140px);
  background: color-mix(in srgb, var(--bp-background) 88%, var(--bp-white));
  color: var(--bp-text);
}

/* 補足: Featuresだけは3列カードが細くならないよう、十分な表示幅を確保します。 */
.bp-features-section .bp-section-inner {
  width: min(1120px, calc(100% - 48px));
  max-width: 1120px;
  padding-inline: 0;
}

/* Features: alternating photo and copy, with room for long descriptions. */
.bp-features-section .bp-feature-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(56px, 7vw, 100px);
  width: 100%;
  margin: 0;
  counter-reset: feature;
}
.bp-features-section .bp-feature {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  counter-increment: feature;
}
.bp-features-section .bp-feature > img,
.bp-features-section .bp-feature > .bp-no-image-feature {
  grid-column: 1 / 8;
  grid-row: 1;
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: calc(var(--bp-radius-media) * 2.2);
  object-fit: cover;
  object-position: var(--bp-image-position);
}
.bp-features-section .bp-feature > .bp-no-image-feature {
  display: grid;
  place-items: center;
}
.bp-features-section .bp-feature > .bp-feature-body {
  grid-column: 7 / -1;
  grid-row: 1;
  position: relative;
  z-index: 1;
  min-width: 0;
  width: 100%;
  margin: 32px 0;
  padding: clamp(36px, 4vw, 64px) clamp(24px, 3.5vw, 52px);
  background: var(--bp-white);
  box-shadow: 0 16px 40px color-mix(in srgb, var(--bp-ink), transparent 94%);
  text-align: left;
}
.bp-features-section .bp-feature:nth-child(even) > img,
.bp-features-section .bp-feature:nth-child(even) > .bp-no-image-feature { grid-column: 6 / -1; }
.bp-features-section .bp-feature:nth-child(even) > .bp-feature-body { grid-column: 1 / 7; }
.bp-features-section .bp-feature h3 {
  position: relative;
  isolation: isolate;
  margin: 12px 0 28px;
  color: var(--bp-text);
  font-family: var(--bp-body-font);
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  font-weight: 500;
  line-height: 1.7;
  text-align: center;
  overflow-wrap: anywhere;
}
/* Large, quiet numerals sit behind the heading without taking up layout space. */
.bp-features-section .bp-feature h3::before {
  content: counter(feature, decimal-leading-zero);
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  transform: translate(-50%, -50%);
  color: var(--bp-main);
  opacity: 0.12;
  font-family: var(--bp-heading-font);
  font-size: clamp(88px, 9vw, 132px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.05em;
  pointer-events: none;
}
.bp-features-section .bp-feature .bp-richtext {
  width: 100%;
  max-width: none;
  margin: 0;
  overflow-wrap: anywhere;
}
.bp-features-section .bp-feature .bp-richtext p {
  margin: 0 0 1em;
  color: var(--bp-text);
  font-size: 0.95rem;
  line-height: 2;
  letter-spacing: 0;
}
.bp-features-section .bp-feature .bp-richtext p:last-child { margin-bottom: 0; }
.bp-features-section .bp-feature:not(:has(img)):not(:has(.bp-no-image)) > .bp-feature-body {
  grid-column: 1 / -1;
  margin: 0;
}
@media (max-width: 720px) {
  .bp-features-section .bp-feature { display: flex; flex-direction: column; }
  .bp-features-section .bp-feature > .bp-feature-body {
    width: calc(100% - 24px);
    margin: -28px 12px 0;
    padding: 44px 24px 30px;
  }
  .bp-features-section .bp-feature h3 { margin: 8px 0 26px; }
  .bp-features-section .bp-feature .bp-richtext p { font-size: 0.9rem; }
  .bp-features-section .bp-feature:not(:has(img)):not(:has(.bp-no-image)) > .bp-feature-body { width: 100%; }
}

/* 補足: 講師紹介は1人1行のエディトリアルなプロフィールリストとして表示します。 */
.bp-teachers-section {
  padding-block: clamp(80px, 10vw, 140px);
  background: linear-gradient(
    145deg,
    var(--bp-white) 0%,
    color-mix(in srgb, var(--bp-background) 88%, var(--bp-white)) 100%
  );
  color: var(--bp-text);
}

/* 補足: 講師紹介の内側幅はプロフィール行が窮屈にならない幅にします。 */
.bp-teachers-section .bp-section-inner {
  width: min(1120px, calc(100% - 48px));
  max-width: 1120px;
  padding-inline: 0;
}

/* 補足: 講師一覧は共通グリッドをリセットし、人数に関わらず1列リストで並べます。 */
.bp-teachers-section .bp-instructor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  border-top: 1px solid color-mix(in srgb, var(--bp-text) 13%, transparent);
}

/* 補足: 各講師はPCで写真20%、本文80%の横並びにします。 */
.bp-teachers-section .bp-instructor,
.bp-teachers-section .bp-card.bp-instructor {
  position: relative;
  display: grid;
  grid-template-columns: minmax(160px, 2fr) minmax(0, 8fr);
  gap: clamp(42px, 6vw, 82px);
  align-items: center;
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: clamp(42px, 6vw, 72px) clamp(10px, 2vw, 26px);
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--bp-text) 13%, transparent);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: none;
}

/* 補足: 講師写真の後ろに細いテーマカラー枠を置き、写真は大きくしすぎません。 */
.bp-teachers-section .bp-instructor::after {
  position: absolute;
  top: calc(clamp(42px, 6vw, 72px) + 12px);
  left: calc(clamp(10px, 2vw, 26px) + 12px);
  z-index: 0;
  width: min(
    220px,
    calc((100% - clamp(42px, 6vw, 82px) - (clamp(10px, 2vw, 26px) * 2)) * 0.2)
  );
  aspect-ratio: 4 / 5;
  border: 1px solid color-mix(in srgb, var(--bp-main) 27%, transparent);
  content: "";
  pointer-events: none;
  transition: transform 0.75s var(--bp-motion-ease);
}

/* 補足: 講師写真は顔写真向けに縦長4:5、PC最大220pxで表示します。 */
.bp-teachers-section .bp-instructor img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: 220px;
  height: auto;
  margin: 0 auto;
  aspect-ratio: 4 / 5;
  border-radius: 0;
  filter: saturate(0.84) contrast(0.97);
  object-fit: cover;
  object-position: center top;
  transition:
    filter 0.65s ease,
    transform 0.8s var(--bp-motion-ease);
}

/* 補足: 写真未設定の講師では、本文が不要に右へ寄らないよう1列表示へ切り替えます。 */
.bp-teachers-section .bp-instructor:not(:has(img)):not(:has(.bp-no-image)) {
  grid-template-columns: minmax(0, 1fr);
  padding-left: clamp(28px, 4vw, 54px);
}

.bp-teachers-section
  .bp-instructor:not(:has(img)):not(:has(.bp-no-image))::after {
  content: none;
}

/* 補足: 講師写真の未設定枠は顔写真と同じ縦長比率・最大幅にします。 */
.bp-teachers-section .bp-no-image-instructor {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 220px;
  margin: 0 auto;
  aspect-ratio: 4 / 5;
}

/* 補足: 講師本文は共通カードの余白をリセットし、読みやすい本文幅を確保します。 */
.bp-teachers-section .bp-instructor-body {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  max-width: none;
  padding: 10px 0;
}

.bp-teachers-section .bp-instructor-body::before {
  content: none;
}

/* 補足: 講師名は日本語フォントで落ち着いた大きさに整えます。 */
.bp-teachers-section .bp-instructor h3,
.bp-teachers-section .bp-instructor .bp-instructor-body h3 {
  margin: 0 0 9px;
  color: var(--bp-text);
  font-family: var(--bp-body-font);
  font-size: clamp(1.32rem, 2.3vw, 1.82rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
}

/* 補足: 肩書きは英語フォントを使い、下に短いテーマカラーの線を添えます。 */
.bp-teachers-section .bp-instructor .bp-muted {
  margin: 0 0 25px;
  color: color-mix(in srgb, var(--bp-main) 70%, var(--bp-text));
  font-family: var(--bp-heading-font);
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
}

.bp-teachers-section .bp-instructor .bp-muted::after {
  display: block;
  width: 38px;
  height: 1px;
  margin-top: 19px;
  background: var(--bp-main);
  content: "";
  opacity: 0.62;
  transition: width 0.65s var(--bp-motion-ease);
}

/* 補足: 講師経歴は行間を広めにして長文でも読みやすくします。 */
.bp-teachers-section .bp-instructor-career {
  width: 100%;
  max-width: none;
  font-size: clamp(0.82rem, 1.2vw, 0.88rem);
  line-height: 1.95;
}

.bp-teachers-section .bp-instructor-career p {
  margin: 0 0 0.85em;
  color: color-mix(in srgb, var(--bp-text) 74%, transparent);
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
  letter-spacing: 0;
}

.bp-teachers-section .bp-instructor-career > :first-child {
  margin-top: 0;
}

.bp-teachers-section .bp-instructor-career > :last-child,
.bp-teachers-section .bp-instructor-career p:last-child {
  margin-bottom: 0;
}

/* 補足: 講師行のホバーは写真と細枠だけが少し動く控えめな演出にします。 */
.bp-teachers-section .bp-instructor:hover img {
  filter: saturate(1) contrast(1);
  transform: translate(-3px, -3px);
}

.bp-teachers-section .bp-instructor:hover::after {
  transform: translate(4px, 4px);
}

.bp-teachers-section .bp-instructor:hover .bp-muted::after {
  width: 68px;
}

/* 補足: タブレットでは本文幅を優先しつつ写真を最大190pxへ抑えます。 */
@media (max-width: 900px) and (min-width: 761px) {
  .bp-teachers-section .bp-instructor,
  .bp-teachers-section .bp-card.bp-instructor {
    grid-template-columns: minmax(155px, 25fr) minmax(0, 75fr);
    gap: 42px;
  }

  .bp-teachers-section .bp-instructor img {
    max-width: 190px;
  }

  .bp-teachers-section .bp-instructor::after {
    content: none;
  }
}

/* 補足: お知らせセクション専用のローカルトークンを、先生が選んだ4色から派生させます。 */
.bp-news-section {
  --bp-news-main: var(--bp-main);
  --bp-news-bg: var(--bp-background);
  --bp-news-text: var(--bp-ink);
  --bp-news-paper: var(--bp-paper);
  --bp-news-line: color-mix(in srgb, var(--bp-news-text) 14%, transparent);
  --bp-news-soft-line: color-mix(in srgb, var(--bp-news-main) 28%, transparent);
  color: var(--bp-news-text);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--bp-news-bg) 90%, var(--bp-news-paper)) 0%,
    var(--bp-news-paper) 52%,
    color-mix(in srgb, var(--bp-news-main) 5%, var(--bp-news-paper)) 100%
  );
}

/* 補足: Newsだけは編集誌面のように少し幅を絞り、余白をゆったり取ります。 */
.bp-news-section .bp-section-inner {
  width: min(1120px, calc(100% - 48px));
}

/* 補足: お知らせ一覧はカードではなく、上品な罫線リストとして表示します。 */
.bp-news-list {
  max-width: 920px;
  margin: 0 auto;
  border-top: 1px solid var(--bp-news-line);
}

/* 補足: お知らせ1件の下線とホバー時のテーマカラー線を管理します。 */
.bp-news-item {
  position: relative;
  display: block;
  overflow: hidden;
  border-bottom: 1px solid var(--bp-news-line);
}

.bp-news-item::after {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--bp-news-main) 18%,
    var(--bp-news-main) 82%,
    transparent 100%
  );
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.75s var(--bp-motion-ease);
  pointer-events: none;
  content: "";
}

.bp-news-item:hover::after {
  transform: scaleX(1);
}

/* 補足: お知らせ全体をクリックできる、矢印付きの横長リンク行にします。 */
.bp-news-link {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: 60px;
  padding: 8px 82px 8px 28px;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}

.bp-news-link::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--bp-news-main) 7%, transparent) 0%,
    color-mix(in srgb, var(--bp-news-main) 3%, transparent) 52%,
    transparent 82%
  );
  transform: translateX(-101%);
  transition: transform 0.85s var(--bp-motion-ease);
  pointer-events: none;
  content: "";
}

.bp-news-link::after {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 30px;
  width: 32px;
  height: 8px;
  border-right: 1px solid var(--bp-news-main);
  border-bottom: 1px solid var(--bp-news-main);
  opacity: 0.68;
  transform: translateY(-60%) skewX(45deg);
  transform-origin: right bottom;
  transition:
    width 0.6s var(--bp-motion-ease),
    right 0.6s var(--bp-motion-ease),
    opacity var(--bp-motion-medium) ease,
    border-color var(--bp-motion-medium) ease;
  pointer-events: none;
  content: "";
}

.bp-news-link:hover::before {
  transform: translateX(0);
}

.bp-news-link:hover::after {
  right: 25px;
  width: 39px;
  opacity: 1;
}

/* 補足: 日付、タイトル、抜粋を紙面風の2列組みにします。 */
.bp-news-text {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: clamp(24px, 3vw, 46px);
  row-gap: 4px;
  min-width: 0;
}

/* 補足: お知らせ日付は数字が揃うようにし、一覧の視認性を高めます。 */
.bp-news-text time {
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: center;
  color: color-mix(in srgb, var(--bp-news-text) 53%, transparent);
  font-family: var(--bp-body-font);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  letter-spacing: 0;
  transform: translateX(0);
  transition:
    color var(--bp-motion-medium) ease,
    transform 0.65s var(--bp-motion-ease);
}

.bp-news-link:hover .bp-news-text time {
  color: color-mix(in srgb, var(--bp-news-main) 78%, var(--bp-news-text));
  transform: translateX(-3px);
}

/* 補足: お知らせタイトルは本文フォントを使い、バレエ教室らしい静かな品を優先します。 */
.bp-news-title {
  grid-column: 2;
  grid-row: 1;
  display: block;
  min-width: 0;
  margin: 0;
  color: var(--bp-news-text);
  font-family: var(--bp-body-font);
  font-size: clamp(0.95rem, 1.5vw, 1.08rem);
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: 0.05em;
  transform: translateX(0);
  transition:
    color var(--bp-motion-medium) ease,
    transform 0.65s var(--bp-motion-ease);
}

.bp-news-link:hover .bp-news-title {
  color: var(--bp-news-main);
  transform: translateX(5px);
}

/* 補足: お知らせ抜粋は1行に収め、一覧としての読みやすさを保ちます。 */
.bp-news-excerpt {
  grid-column: 2;
  grid-row: 2;
  display: block;
  overflow: hidden;
  max-width: none;
  margin: 0;
  color: color-mix(in srgb, var(--bp-news-text) 61%, transparent);
  font-size: 0.78rem;
  line-height: 1.7;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.85;
  transform: translateX(0);
  transition:
    color var(--bp-motion-medium) ease,
    opacity var(--bp-motion-medium) ease,
    transform 0.7s var(--bp-motion-ease);
}

.bp-news-link:hover .bp-news-excerpt {
  opacity: 1;
  transform: translateX(5px);
}

/* 補足: お知らせ個別ページの本文幅とカード感を整えます。 */
.bp-news-detail {
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 52px);
  border: 1px solid var(--bp-line-accent);
  border-radius: var(--bp-radius-card);
  background: var(--bp-panel-readable);
  box-shadow: var(--bp-card-shadow);
}

/* 補足: お知らせ個別ページの日付表示を整えます。 */
.bp-news-detail time {
  display: block;
  margin: 0 0 22px;
  color: var(--bp-accent-dark);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* 補足: お知らせ個別ページの記事タイトルを本文カード内で読みやすく表示します。 */
.bp-news-detail h2 {
  margin: 0 0 24px;
  color: var(--bp-ink);
  font-family: var(--bp-heading-font);
  font-size: clamp(1.65rem, 3.8vw, 2.7rem);
  font-weight: 500;
  line-height: 1.35;
}

/* お知らせの写真は縦横比を保ち、全体を表示します。 */
.bp-news-content-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--bp-radius-media);
  object-fit: contain;
}

/* 補足: お知らせ個別ページの本文画像を複数枚でも整列して表示します。 */
.bp-news-content-images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 30px;
}

/* 補足: お知らせ個別ページの本文は中央幅に制限せず読みやすくします。 */
.bp-news-detail .bp-richtext {
  max-width: none;
  margin: 0;
}

.bp-news-detail .bp-richtext {
  line-height: 1.95;
  overflow-wrap: anywhere;
}
.bp-news-detail .bp-richtext img {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  margin: 24px auto;
  border-radius: var(--bp-radius-media);
}
.bp-news-detail .bp-richtext :is(ul, ol) {
  padding-left: 1.5em;
  margin-block: 1.25em;
}
.bp-news-detail .bp-richtext li { margin-block: 0.4em; }
.bp-news-detail .bp-richtext a { text-decoration: underline; text-underline-offset: 0.2em; }

/* 補足: お知らせ一覧の追加リンクを中央配置します。 */
.bp-news-more {
  display: flex;
  justify-content: center;
  margin-top: clamp(32px, 4vw, 48px);
}

.bp-news-section .bp-news-more .bp-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 176px;
  min-height: 48px;
  padding: 12px 34px;
  border: 1px solid color-mix(in srgb, var(--bp-news-main) 62%, transparent);
  border-radius: var(--bp-radius-button);
  background: transparent;
  color: var(--bp-news-text);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0;
  text-decoration: none;
  transition:
    color var(--bp-motion-medium) ease,
    background-color var(--bp-motion-medium) ease,
    border-color var(--bp-motion-medium) ease,
    transform var(--bp-motion-fast) ease;
}

.bp-news-section .bp-news-more .bp-button::after {
  width: 26px;
  height: 1px;
  margin-left: 15px;
  background: currentColor;
  transition: transform 0.55s var(--bp-motion-ease);
  content: "";
}

.bp-news-section .bp-news-more .bp-button:hover {
  border-color: var(--bp-news-main);
  background: var(--bp-news-main);
  color: var(--bp-on-accent);
  transform: translateY(-1px);
}

.bp-news-section .bp-news-more .bp-button:hover::after {
  transform: translateX(5px);
}

/* 補足: お知らせ一覧ページの上部余白と高さを調整します。 */
.bp-news-archive {
  min-height: 72vh;
  padding-top: clamp(110px, 14vw, 170px);
}

/* 補足: お知らせがない場合のメッセージ表示を整えます。 */
.bp-news-empty {
  max-width: 720px;
  margin: 0 auto;
  color: var(--bp-muted);
  text-align: center;
}

/* 補足: クラス紹介はアーチ型写真と重なりカードのカタログ風カルーセルにします。 */
.bp-classes-section {
  padding-block: clamp(80px, 10vw, 140px);
  background: color-mix(in srgb, var(--bp-background) 78%, var(--bp-white));
  color: var(--bp-text);
}

/* 補足: クラス紹介の内側幅は3枚表示でも窮屈にならない幅にします。 */
.bp-classes-section .bp-section-inner {
  width: min(1160px, calc(100% - 48px));
  max-width: 1160px;
  padding-inline: 0;
}

/* 補足: クラス紹介カルーセルは縦スクロールをページへ自然に渡します。 */
.bp-classes-section .bp-class-carousel,
.bp-classes-section .bp-class-list {
  touch-action: pan-y pinch-zoom;
  overscroll-behavior-y: auto;
}

/* 補足: クラス一覧はPCで3枚、タブレットで2枚、スマホで1枚の横スクロールにします。 */
.bp-classes-section .bp-class-list {
  --bp-class-visible: 3;
  --bp-class-gap: clamp(22px, 3vw, 38px);
  display: grid;
  grid-auto-columns: calc(
    (100% - (var(--bp-class-gap) * (var(--bp-class-visible) - 1))) /
      var(--bp-class-visible)
  );
  grid-auto-flow: column;
  grid-template-columns: none;
  gap: var(--bp-class-gap);
  width: 100%;
  max-width: none;
  margin: 0;
  overflow-x: auto;
  overflow-y: visible;
  padding: 4px 2px 24px;
  scroll-padding-inline: 2px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/* 補足: クラスが1件だけの場合は、PCで3分の1幅にならないよう中央に整えます。 */
.bp-classes-section .bp-class-list:has(.bp-class:only-child) {
  grid-auto-columns: min(380px, 100%);
  justify-content: center;
}

/* 補足: クラスが2件だけの場合は、PCでも2枚分の自然な幅にします。 */
.bp-classes-section
  .bp-class-list:has(.bp-class:first-child:nth-last-child(2)) {
  --bp-class-visible: 2;
}

/* 補足: ドラッグ中だけスナップを外し、指やポインターの移動に素直に追従させます。 */
.bp-classes-section .bp-class-list.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

/* 補足: クラス横スクロールのスクロールバーをWebKit系ブラウザで隠します。 */
.bp-classes-section .bp-class-list::-webkit-scrollbar {
  display: none;
}

/* 補足: クラスカードの旧カード枠を外し、写真と情報カードを重ねる土台を作ります。 */
.bp-classes-section .bp-class,
.bp-classes-section .bp-card.bp-class {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 0 0 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  scroll-snap-align: center;
  transition: none;
}

/* 補足: クラス写真は横長4:3で統一し、選択されたトリミング位置を反映します。 */
.bp-classes-section .bp-class .bp-class-photo,
.bp-classes-section .bp-class img.bp-class-photo {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: calc(var(--bp-radius-media) * 2.2);
  filter: saturate(0.84) brightness(0.94);
  object-fit: cover;
  object-position: var(--bp-image-position);
  transition:
    border-radius 0.8s var(--bp-motion-ease),
    filter 0.6s ease,
    transform 0.8s var(--bp-motion-ease);
}

/* 補足: クラス情報カードは写真下部へ重ね、白い面で情報を読みやすくします。 */
.bp-classes-section .bp-class-info {
  position: relative;
  z-index: 2;
  width: calc(100% - 28px);
  max-width: none;
  margin: -34px 14px 0;
  padding: 38px 22px 26px;
  background: color-mix(in srgb, var(--bp-white) 94%, transparent);
  box-shadow: 0 16px 40px color-mix(in srgb, var(--bp-ink), transparent 93%);
  text-align: center;
  backdrop-filter: blur(8px);
}

/* 補足: 画像未設定時は情報カードを単独カードとして自然に表示します。 */
.bp-classes-section .bp-class:not(:has(.bp-class-photo))::before {
  top: 20px;
  color: var(--bp-main);
}

.bp-classes-section .bp-class:not(:has(.bp-class-photo)) .bp-class-info {
  margin-top: 42px;
}

/* 補足: クラス写真の未設定枠は実写真と同じ横長4:3にします。 */
.bp-classes-section .bp-no-image-class {
  aspect-ratio: 4 / 3;
}

/* 補足: クラス名は中央揃えにし、下にテーマカラーの短い線を入れます。 */
.bp-classes-section .bp-class h3 {
  margin: 0 0 17px;
  color: var(--bp-text);
  font-family: var(--bp-body-font);
  font-size: clamp(1.08rem, 1.7vw, 1.34rem);
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.bp-classes-section .bp-class h3::after {
  display: block;
  width: 34px;
  height: 1px;
  margin: 15px auto 0;
  background: var(--bp-main);
  content: "";
  opacity: 0.66;
}

/* 補足: 対象年齢、レベル、曜日、時間、担当をコンパクトな区切り線付きで並べます。 */
.bp-classes-section .bp-class dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
  margin: 18px 0 0;
  text-align: left;
}

.bp-classes-section .bp-class dl div {
  min-width: 0;
  padding: 11px 0 10px;
  border-top: 1px solid color-mix(in srgb, var(--bp-text) 12%, transparent);
}

.bp-classes-section .bp-class dt {
  color: color-mix(in srgb, var(--bp-main) 74%, var(--bp-text));
  font-family: var(--bp-heading-font);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
}

.bp-classes-section .bp-class dd {
  margin: 4px 0 0;
  color: color-mix(in srgb, var(--bp-text) 82%, transparent);
  font-size: 0.82rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

/* 補足: クラス説明文はテーマカラーの細い枠で囲み、詳細情報と区別します。 */
.bp-classes-section .bp-class .bp-richtext {
  width: 100%;
  max-width: none;
  margin: 18px 0 0;
  padding: 16px 15px;
  border: 1px solid color-mix(in srgb, var(--bp-main) 18%, transparent);
  color: color-mix(in srgb, var(--bp-text) 74%, transparent);
  font-size: 0.82rem;
  line-height: 1.9;
  text-align: left;
}

.bp-classes-section .bp-class .bp-richtext p {
  margin: 0 0 0.85em;
  font-size: inherit;
  line-height: inherit;
}

.bp-classes-section .bp-class .bp-richtext p:last-child {
  margin-bottom: 0;
}

/* 補足: クラスカードのホバーは写真だけを控えめに引き上げます。 */
.bp-classes-section .bp-class:hover {
  box-shadow: none;
  transform: none;
}

.bp-classes-section .bp-class:hover .bp-class-photo {
  border-radius: calc(var(--bp-radius-media) * 1.4);
  filter: saturate(1) brightness(1);
  transform: translateY(-5px);
}

/* 補足: カルーセルドットを中央に並べます。 */
.bp-classes-section .bp-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 22px;
}

/* 補足: すべてのクラスが見えていて横移動が不要な場合はドットを隠します。 */
.bp-classes-section .bp-class-carousel.is-static .bp-carousel-dots {
  display: none;
}

/* 補足: カルーセル操作ドットの見た目を定義します。 */
.bp-classes-section .bp-carousel-dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--bp-main);
  cursor: pointer;
  opacity: 0.36;
  transition:
    width var(--bp-motion-fast) ease,
    opacity var(--bp-motion-fast) ease,
    background var(--bp-motion-fast) ease;
}

.bp-classes-section .bp-carousel-dots button:focus-visible {
  outline: 2px solid var(--bp-main);
  outline-offset: 4px;
}

/* 補足: 現在表示中のカルーセルドットを横長にします。 */
.bp-classes-section .bp-carousel-dots button.is-active {
  width: 24px;
  opacity: 0.9;
}

@media (max-width: 980px) {
  .bp-classes-section .bp-class-list {
    --bp-class-visible: 2;
  }
}

@media (max-width: 760px) {
  .bp-classes-section {
    padding-block: 65px;
  }

  .bp-classes-section .bp-section-inner {
    width: calc(100% - 40px);
    max-width: none;
  }

  .bp-classes-section .bp-class-list {
    --bp-class-visible: 1;
    --bp-class-gap: 22px;
  }

  .bp-classes-section .bp-class-info {
    padding: 36px 20px 24px;
  }
}

/* 補足: 公開スケジュール表の横スクロール領域を定義します。 */
.bp-schedule-table-wrap {
  max-width: 1080px;
  margin: 0 auto;
  overflow-x: auto;
  border: 1px solid var(--bp-schedule-line);
  border-radius: var(--bp-radius-card);
  background: var(--bp-schedule-bg);
  box-shadow: var(--bp-card-shadow);
}

/* 補足: 公開スケジュールを曜日列のテーブルとして表示します。 */
.bp-schedule-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  table-layout: fixed;
}

/* 補足: スケジュール表の曜日見出しを整えます。 */
.bp-schedule-table th {
  padding: 16px 14px;
  border-right: 1px solid var(--bp-schedule-line);
  border-bottom: 1px solid var(--bp-schedule-line);
  background: var(--bp-schedule-head-bg);
  color: var(--bp-schedule-head-text);
  font-family: var(--bp-heading-font);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
}

/* 補足: スケジュール表の各曜日セルを整えます。 */
.bp-schedule-table td {
  min-width: 150px;
  padding: 18px 14px;
  border-right: 1px solid var(--bp-schedule-line);
  border-bottom: 1px solid var(--bp-schedule-line);
  background: color-mix(in srgb, var(--bp-paper), var(--bp-background) 18%);
  vertical-align: top;
}

/* 補足: スケジュール表の偶数行にわずかな差を付けて横方向に追いやすくします。 */
.bp-schedule-table tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--bp-paper), var(--bp-background) 28%);
}

/* 補足: スケジュール表の最終行の下罫線を消します。 */
.bp-schedule-table tbody tr:last-child td {
  border-bottom: 0;
}

/* 補足: スケジュール表の右端の罫線を消します。 */
.bp-schedule-table th:last-child,
.bp-schedule-table td:last-child {
  border-right: 0;
}

/* 補足: 空のスケジュールセルもマスとして見える高さを保ちます。 */
.bp-schedule-table td.is-empty,
.bp-schedule-class.is-empty {
  min-height: 88px;
}

/* 補足: 空のスケジュールセルは中に線を引かず、1つの空マスとして表示します。 */
.bp-schedule-table td.is-empty {
  background: color-mix(in srgb, var(--bp-paper), var(--bp-background) 24%);
}

/* 補足: スケジュール時間の文字組みを整えます。 */
.bp-schedule-class time {
  display: inline-block;
  margin-bottom: 6px;
  color: var(--bp-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* 補足: スケジュール内クラス名の余白を整えます。 */
.bp-schedule-class h3 {
  margin: 0 0 6px;
  font-size: clamp(1rem, 1.5vw, 1.22rem);
  line-height: 1.45;
  transition: color var(--bp-motion-fast) ease;
}

/* 補足: スケジュール内のクラスに触れた時、クラス名の色で軽く反応させます。 */
.bp-schedule-table td:not(.is-empty):hover .bp-schedule-class h3 {
  color: var(--bp-accent-dark);
}

/* 補足: スケジュール内補足テキストの色を整えます。 */
.bp-schedule-class p {
  margin: 0;
  color: var(--bp-muted);
}

/* 補足: 本文テキストの幅、色、行間を整えます。 */
.bp-schedule-class .bp-richtext {
  margin-top: 10px;
  font-size: 0.88rem;
  line-height: 1.85;
}

/* 補足: 料金グループを縦に並べ、複数パターンを比較しやすくします。 */
.bp-fees {
  display: grid;
  gap: 18px;
  max-width: 1040px;
  margin: 0 auto;
}

/* 補足: 料金の大きな見出し単位をカードとして表示します。 */
.bp-fee-group {
  position: relative;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--bp-line);
  border-radius: var(--bp-radius-card);
  background: var(--bp-panel-readable);
  box-shadow: var(--bp-card-shadow);
}

/* 補足: 料金グループ左上の細いアクセント線を表示します。 */
.bp-fee-group::before {
  position: absolute;
  top: 22px;
  left: 0;
  width: 3px;
  height: 36px;
  content: "";
  border-radius: 999px;
  background: var(--bp-accent-line);
}

/* 補足: 料金グループ見出しを上位項目として表示します。 */
.bp-fee-group h3 {
  margin: 0 0 18px;
  color: var(--bp-accent-dark);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

/* 補足: 料金グループ内の明細を薄い区切り線で縦に並べます。 */
.bp-fee-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--bp-line);
}

/* 補足: 料金明細1行分の項目名、金額、補足を整列します。 */
.bp-fee-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(140px, auto);
  align-items: baseline;
  gap: 8px 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--bp-line);
  transition:
    background var(--bp-motion-fast) ease,
    padding var(--bp-motion-fast) ease;
}

/* 補足: 料金明細の項目名を控えめに表示します。 */
.bp-fee-item span {
  display: block;
  color: var(--bp-muted-strong);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.04em;
}

/* 補足: 料金額や料金説明を見出し風に表示します。 */
.bp-fee-item strong {
  color: var(--bp-ink);
  font-family: var(--bp-body-font);
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  font-weight: 400;
  line-height: 1.35;
  text-align: right;
}

/* 補足: 料金明細ごとの補足文を行の下に控えめに表示します。 */
.bp-fee-note {
  grid-column: 1 / -1;
  max-width: none;
  margin: 0;
  color: var(--bp-muted);
  font-size: 0.86rem;
  line-height: 1.8;
}

/* 補足: 料金補足文の段落余白を整えます。 */
.bp-fee-note > :first-child {
  margin-top: 0;
}

/* 補足: 料金補足文の最後の余白を消します。 */
.bp-fee-note > :last-child {
  margin-bottom: 0;
}

/* 補足: FAQ一覧の幅と縦並びを管理します。 */
.bp-faq {
  display: grid;
  gap: 0;
  width: min(100%, 960px);
  margin-right: auto;
  margin-left: auto;
  border: 1px solid var(--bp-line-accent);
  border-radius: var(--bp-radius-card);
  background: var(--bp-panel-readable);
  overflow: hidden;
  box-shadow: var(--bp-card-shadow);
}

/* 補足: FAQ内の要素幅を親枠内に収めて開閉時の横幅変化を防ぎます。 */
.bp-faq,
.bp-faq * {
  box-sizing: border-box;
}

/* 補足: FAQ各項目の区切り線を定義します。 */
.bp-faq details {
  min-width: 0;
  border-bottom: 1px solid var(--bp-line-accent);
}

/* 補足: FAQ最後の項目は下線を外します。 */
.bp-faq details:last-child {
  border-bottom: 0;
}

/* 補足: FAQ質問行の余白とクリック領域を整えます。 */
.bp-faq summary {
  position: relative;
  min-width: 0;
  padding: 24px 64px 24px 28px;
  font-weight: 500;
  line-height: 1.65;
  list-style: none;
  cursor: pointer;
  transition:
    background var(--bp-motion-fast) ease,
    color var(--bp-motion-fast) ease,
    padding-left var(--bp-motion-fast) ease;
}

/* 補足: FAQ質問行に触れた時、選択色に沿った背景で反応を見せます。 */
.bp-faq summary:hover {
  background: color-mix(in srgb, var(--bp-main), transparent 92%);
  color: var(--bp-accent-dark);
  padding-left: 34px;
}

/* 補足: ブラウザ標準のdetailsマーカーを非表示にします。 */
.bp-faq summary::-webkit-details-marker {
  display: none;
}

/* 補足: FAQ見出し右側の開閉アイコンを描画します。 */
.bp-faq summary::after {
  position: absolute;
  top: 50%;
  right: 28px;
  content: "+";
  color: var(--bp-accent-dark);
  font-family: sans-serif;
  font-size: 1.35rem;
  font-weight: 300;
  transform: translateY(-50%);
  transition: transform var(--bp-motion-fast) ease;
}

/* 補足: FAQ展開時のアイコンをマイナス表示にします。 */
.bp-faq details[open] summary::after {
  content: "-";
  transform: translateY(-50%) rotate(180deg);
}

/* 補足: FAQ回答を開いた時だけ質問との間に適度な上余白を設けます。 */
.bp-faq-section .bp-faq details[open] > .bp-richtext {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(14px, 1.5vw, 18px) 64px 26px 28px;
}

/* 補足: FAQ回答文の段落余白を開閉しても安定するよう整えます。 */
.bp-faq .bp-richtext > :first-child {
  margin-top: 0;
}

/* 補足: FAQ回答文末の余白を枠内に収めます。 */
.bp-faq .bp-richtext > :last-child {
  margin-bottom: 0;
}

/* Access: 共通変数へ連動する2列カードレイアウトです。 */
.bp-access-section {
  --access-main: var(--bp-main);
  --access-sub: var(--bp-sub);
  --access-bg: var(--bp-background);
  --access-text: var(--bp-text);
  position: relative;
  overflow: hidden;
  padding-block: clamp(78px, 9vw, 128px);
  background: color-mix(in srgb, var(--access-bg) 91%, var(--bp-white));
  color: var(--access-text);
}

.bp-access-section .bp-section-inner.bp-split {
  display: block;
  width: min(1080px, calc(100% - 48px));
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: 0;
}

.bp-access-section .bp-section-head::before {
  display: none;
  content: none;
}

.bp-access-section .bp-access {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* 補足: 登録スタジオが1件だけならカードを全幅で表示します。 */
.bp-access-section .bp-access-panel:only-child {
  grid-column: 1 / -1;
}

.bp-access-section .bp-access-panel {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: 34px 30px 29px;
  border: 0;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 16px 45px rgba(54, 43, 48, 0.055);
  overflow: hidden;
  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.4s ease,
    background-color 0.4s ease;
}

.bp-access-section .bp-access-panel::before {
  display: none;
  content: none;
}

.bp-access-section .bp-access-panel:hover {
  background: color-mix(in srgb, var(--access-main) 2.5%, var(--bp-white));
  box-shadow: 0 22px 58px rgba(54, 43, 48, 0.085);
  transform: translateY(-4px);
}

.bp-access-section .bp-access-map-mark {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  height: auto;
  margin: 0 0 17px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--access-main);
}

.bp-access-section .bp-access-map-mark svg {
  display: block;
  width: 20px;
  height: 20px;
  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.35s ease;
}

.bp-access-section .bp-access-panel:hover .bp-access-map-mark svg {
  opacity: 0.82;
  transform: translateY(-2px);
}

.bp-access-section .bp-access-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.bp-access-section .bp-access-content > h3 {
  margin: 0 0 24px;
  padding: 0;
  border: 0;
  color: var(--access-text);
  font-family: var(--bp-body-font);
  font-size: clamp(16px, 1.7vw, 20px);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0.065em;
  overflow-wrap: anywhere;
}

.bp-access-section .bp-access-content > h3::after {
  display: block;
  width: 29px;
  height: 1px;
  margin-top: 14px;
  background: var(--access-main);
  content: "";
  opacity: 0.58;
  transition:
    width 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.35s ease;
}

.bp-access-section .bp-access-panel:hover .bp-access-content > h3::after {
  width: 48px;
  opacity: 0.8;
}

.bp-access-section .bp-access-list {
  display: grid;
  gap: 18px;
  min-width: 0;
  margin-bottom: 26px;
}

.bp-access-section .bp-access-item {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.bp-access-section .bp-access-item > span {
  display: block;
  margin: 0 0 2px;
  color: var(--access-main);
  font-family: var(--bp-heading-font);
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
}

.bp-access-section .bp-access-item > strong {
  display: block;
  margin: 0 0 7px;
  color: color-mix(in srgb, var(--access-text) 54%, transparent);
  font-family: var(--bp-body-font);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.07em;
}

.bp-access-section .bp-access-item > p,
.bp-access-section .bp-access-item .bp-richtext,
.bp-access-section .bp-access-item .bp-richtext p {
  max-width: 100%;
  margin-top: 0;
  overflow-wrap: anywhere;
}

.bp-access-section .bp-access-item > p,
.bp-access-section .bp-access-item .bp-richtext p {
  margin-bottom: 0;
  color: color-mix(in srgb, var(--access-text) 74%, transparent);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.035em;
}

.bp-access-section .bp-access-map-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 43px;
  margin-top: auto;
  padding: 10px 18px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--access-main) 10%, var(--bp-white));
  color: var(--access-main);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition:
    background-color 0.35s ease,
    color 0.35s ease,
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.bp-access-section .bp-access-map-button::after {
  margin-left: 10px;
  font-size: 12px;
  line-height: 1;
  content: "\2197";
}

.bp-access-section .bp-access-map-button:hover {
  background: var(--access-main);
  color: var(--bp-white);
  transform: translateY(-1px);
}

@media (max-width: 700px) {
  .bp-access-section {
    padding-block: 65px;
  }

  .bp-access-section .bp-section-inner.bp-split {
    width: calc(100% - 32px);
  }

  .bp-access-section .bp-access {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .bp-access-section .bp-access-panel {
    padding: 27px 23px 24px;
  }

  .bp-access-section .bp-access-map-mark svg {
    width: 18px;
    height: 18px;
  }

  .bp-access-section .bp-access-map-button {
    min-height: 46px;
  }
}

/* 補足: 写真ギャラリーを同じサイズの整列グリッドで配置します。 */
.bp-gallery {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(6px, 1vw, 12px);
}

/* 補足: ギャラリー画像の正方形トリミングと角丸を整えます。 */
.bp-gallery img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: var(--bp-radius-media);
  background: var(--bp-paper);
  cursor: zoom-in;
  object-fit: cover;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--bp-ink), transparent 95%);
  transition:
    box-shadow var(--bp-motion-fast) ease,
    filter var(--bp-motion-fast) ease,
    transform var(--bp-motion-fast) ease;
}

/* 補足: ギャラリー未設定枠を写真と同じ正方形グリッドに並べます。 */
.bp-gallery .bp-no-image-gallery {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--bp-radius-media);
}

/* 補足: ギャラリー画像のホバー時にクリック可能な反応を出します。 */
.bp-gallery img:hover {
  box-shadow: 0 16px 38px color-mix(in srgb, var(--bp-ink), transparent 90%);
  filter: brightness(0.94);
  transform: translateY(-2px);
}

/* 補足: 初期表示を10枚までに抑えるため、11枚目以降のギャラリー写真を隠します。 */
.bp-gallery .is-hidden {
  display: none;
}

/* 補足: ギャラリーの追加表示ボタンを中央に配置します。 */
.bp-gallery-more {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

/* 補足: ギャラリー写真を拡大表示するライトボックスを画面全体に重ねます。 */
.bp-gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  padding: 72px;
  background: var(--bp-lightbox-bg);
  opacity: 0;
  pointer-events: none;
  place-items: center;
  transition: opacity var(--bp-motion-fast) ease;
}

/* 補足: ライトボックス表示中の状態を定義します。 */
.bp-gallery-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* 補足: ライトボックス内の拡大写真サイズを画面内に収めます。 */
.bp-gallery-lightbox img {
  display: block;
  width: auto;
  max-width: min(100%, 1120px);
  max-height: calc(100vh - 144px);
  border-radius: var(--bp-radius-media);
  box-shadow: 0 24px 80px var(--bp-lightbox-shadow);
  object-fit: contain;
  animation: bpSoftScaleIn var(--bp-motion-medium) var(--bp-motion-ease) both;
}

/* 補足: ライトボックス操作ボタンの共通デザインを整えます。 */
.bp-gallery-lightbox button {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--bp-lightbox-button-border);
  border-radius: 999px;
  background: var(--bp-lightbox-button-bg);
  color: var(--bp-lightbox-button-text);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(12px);
  transition:
    background var(--bp-motion-fast) ease,
    transform var(--bp-motion-fast) ease;
}

/* 補足: ライトボックス操作ボタンのホバー時の反応を整えます。 */
.bp-gallery-lightbox button:hover {
  background: var(--bp-lightbox-button-bg-hover);
  transform: scale(1.04);
}

/* 補足: 左右移動ボタンはホバー時も縦中央位置を保ちます。 */
.bp-gallery-lightbox-prev:hover,
.bp-gallery-lightbox-next:hover {
  transform: translateY(-50%) scale(1.04);
}

/* 補足: ライトボックスの閉じるボタンを右上に配置します。 */
.bp-gallery-lightbox-close {
  top: 24px;
  right: 24px;
}

/* 補足: ライトボックスの前へボタンを左側に配置します。 */
.bp-gallery-lightbox-prev {
  top: 50%;
  left: 24px;
  transform: translateY(-50%);
}

/* 補足: ライトボックスの次へボタンを右側に配置します。 */
.bp-gallery-lightbox-next {
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
}

/* 補足: ライトボックス表示中は背面ページのスクロールを止めます。 */
.bp-gallery-lightbox-open {
  overflow: hidden;
}

/* Contact: 設定色と選択フォントへ連動するSoft Atelierレイアウトです。 */
.bp-cta {
  --bp-contact-main: var(--bp-main);
  --bp-contact-sub: var(--bp-sub);
  --bp-contact-bg: var(--bp-background);
  --bp-contact-text: var(--bp-text);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(76px, 10vw, 130px);
  background:
    radial-gradient(
      circle at 8% 15%,
      color-mix(in srgb, var(--bp-contact-main) 10%, transparent),
      transparent 31%
    ),
    radial-gradient(
      circle at 93% 88%,
      color-mix(in srgb, var(--bp-contact-sub) 20%, transparent),
      transparent 27%
    ),
    color-mix(in srgb, var(--bp-contact-bg) 88%, var(--bp-white));
  color: var(--bp-contact-text);
}

.bp-cta .bp-section-inner {
  width: min(1080px, calc(100% - 48px));
}

.bp-cta .bp-contact-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(380px, 1.18fr);
  gap: clamp(34px, 5vw, 70px);
  align-items: center;
  margin-top: clamp(38px, 5vw, 64px);
  padding: clamp(28px, 4vw, 56px);
  border: 1px solid rgba(255, 255, 255, 0.94);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 28px 80px
    color-mix(in srgb, var(--bp-contact-text), transparent 92.5%);
  text-align: left;
  backdrop-filter: blur(10px);
}

.bp-cta .bp-contact-panel::before {
  display: none;
  content: none;
}

.bp-cta .bp-contact-copy {
  align-self: center;
  min-width: 0;
  padding: clamp(10px, 2vw, 28px);
}

.bp-cta .bp-contact-copy .bp-richtext {
  margin: 0;
  color: color-mix(in srgb, var(--bp-contact-text) 76%, transparent);
  font-family: var(--bp-body-font);
  font-size: clamp(0.92rem, 1.1vw, 1rem);
  line-height: 2;
}

.bp-cta .bp-contact-copy .bp-richtext p {
  margin: 0 0 0.8em;
}

.bp-cta .bp-contact-copy .bp-richtext p:last-child {
  margin-bottom: 0;
}

.bp-cta .bp-contact-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  min-width: 0;
  margin: 0;
}

.bp-cta .bp-contact-card {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  min-height: 96px;
  padding: 20px 22px;
  border: 1px solid
    color-mix(in srgb, var(--bp-contact-main) 10%, var(--bp-line));
  border-radius: 18px;
  background: var(--bp-white);
  box-shadow: 0 10px 28px
    color-mix(in srgb, var(--bp-contact-text), transparent 95.5%);
  color: var(--bp-contact-text);
  text-decoration: none;
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease,
    border-color 0.35s ease,
    background-color 0.35s ease;
}

.bp-cta .bp-contact-card:hover {
  border-color: color-mix(in srgb, var(--bp-contact-main) 34%, transparent);
  background: var(--bp-white);
  box-shadow: 0 18px 38px
    color-mix(in srgb, var(--bp-contact-text), transparent 91%);
  color: var(--bp-contact-text);
  transform: translateY(-3px);
}

.bp-cta .bp-contact-card-primary {
  border-color: transparent;
  background: linear-gradient(
    135deg,
    var(--bp-contact-main),
    color-mix(in srgb, var(--bp-contact-main) 78%, var(--bp-contact-text))
  );
  color: var(--bp-white);
}

.bp-cta .bp-contact-card-primary:hover {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--bp-contact-main) 92%, var(--bp-white)),
    color-mix(in srgb, var(--bp-contact-main) 72%, var(--bp-contact-text))
  );
  color: var(--bp-white);
}

.bp-cta .bp-contact-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--bp-contact-main) 9%, var(--bp-white));
  color: var(--bp-contact-main);
}

.bp-cta .bp-contact-card-primary .bp-contact-icon {
  background: rgba(255, 255, 255, 0.16);
  color: var(--bp-white);
}

.bp-cta .bp-contact-icon svg {
  display: block;
  width: 21px;
  height: 21px;
}

.bp-cta .bp-contact-card > span:last-child {
  min-width: 0;
}

.bp-cta .bp-contact-card :is(small, strong, em) {
  display: block;
  font-style: normal;
}

.bp-cta .bp-contact-card small {
  margin-bottom: 5px;
  color: var(--bp-contact-main);
  font-family: var(--bp-heading-font);
  font-size: 0.72rem;
  letter-spacing: 0;
  text-transform: none;
}

.bp-cta .bp-contact-card-primary small {
  color: rgba(255, 255, 255, 0.82);
}

.bp-cta .bp-contact-card strong {
  overflow-wrap: anywhere;
  font-family: var(--bp-body-font);
  font-size: clamp(0.88rem, 1.1vw, 1rem);
  font-weight: 500;
  line-height: 1.45;
}

.bp-cta .bp-contact-card em {
  margin-top: 4px;
  color: inherit;
  font-family: var(--bp-body-font);
  font-size: 0.72rem;
  opacity: 0.67;
}

@media (max-width: 900px) {
  .bp-cta .bp-contact-panel {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  .bp-cta .bp-section-inner {
    width: calc(100% - 32px);
  }

  .bp-cta .bp-contact-panel {
    gap: 28px;
    padding: 22px 16px;
    border-radius: 22px;
  }

  .bp-cta .bp-contact-copy {
    padding: 8px 5px;
  }

  .bp-cta .bp-contact-links {
    grid-template-columns: minmax(0, 1fr);
  }

  .bp-cta .bp-contact-card {
    min-height: 84px;
    padding: 17px 16px;
  }
}

/* 補足: フッターは設定色に連動する、緩やかなアーチ背景で区切ります。 */
.bp-site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: clamp(45px, 7vw, 90px);
  padding: clamp(118px, 13vw, 170px) 0 34px;
  color: var(--bp-footer-text);
}

.bp-site-footer::before {
  position: absolute;
  z-index: -1;
  top: 22px;
  right: -8%;
  bottom: 0;
  left: -8%;
  border-radius: 50% 50% 0 0 / 105px 105px 0 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--bp-main) 7%, var(--bp-paper)) 0%,
    color-mix(in srgb, var(--bp-footer-bg) 78%, var(--bp-paper)) 56%,
    color-mix(in srgb, var(--bp-main) 5%, var(--bp-paper)) 100%
  );
  content: "";
}

.bp-site-footer::after {
  content: none;
}

/* 補足: フッター内は教室情報、メニュー、権利表記を中央で整列します。 */
.bp-footer-inner {
  display: grid;
  gap: 0;
  width: min(1040px, calc(100% - 48px));
  margin-inline: auto;
  text-align: center;
}

.bp-footer-profile {
  display: flex;
  align-items: center;
  flex-direction: column;
  min-width: 0;
  margin-bottom: clamp(38px, 5vw, 58px);
}

/* 補足: 教室名は管理画面で選ばれた英語フォントをそのまま使います。 */
.bp-footer-brand {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 17px;
  color: var(--bp-footer-link);
  font-family: var(--bp-heading-font);
  font-size: clamp(2rem, 4.4vw, 3.7rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0;
  text-decoration: none;
  transition: color var(--bp-motion-fast) ease;
}

.bp-footer-brand:hover,
.bp-footer-brand:focus-visible {
  color: var(--bp-main);
}

/* 補足: Accessで登録された先頭の住所を自動表示します。 */
.bp-footer-address {
  margin: 0;
  color: color-mix(in srgb, var(--bp-footer-text) 67%, transparent);
  font-family: var(--bp-body-font);
  font-size: clamp(0.75rem, 1vw, 0.84rem);
  font-style: normal;
  font-weight: 400;
  line-height: 1.9;
}

/* 補足: 日本語だけのフッターメニューを小さなピル型で並べます。 */
.bp-footer-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 9px 10px;
  max-width: 900px;
  margin-inline: auto;
}

.bp-footer-menu a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 999px;
  background: transparent;
  color: color-mix(in srgb, var(--bp-footer-text) 73%, transparent);
  text-decoration: none;
  transition:
    background-color var(--bp-motion-fast) ease,
    color var(--bp-motion-fast) ease,
    transform var(--bp-motion-medium) var(--bp-motion-ease);
}

.bp-footer-menu-label {
  display: block;
  color: inherit;
  font-family: var(--bp-body-font);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.4;
}

.bp-footer-menu a:hover,
.bp-footer-menu a:focus-visible {
  background: color-mix(in srgb, var(--bp-paper), transparent 35%);
  color: var(--bp-main);
  transform: translateY(-2px);
}

/* 補足: コピーライトとBallet Pages表記は中央で控えめにまとめます。 */
.bp-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 7px 20px;
  margin-top: clamp(38px, 5vw, 58px);
}

.bp-footer-copyright,
.bp-footer-credit {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 400;
  line-height: 1.5;
}

.bp-footer-copyright {
  color: color-mix(in srgb, var(--bp-footer-text) 48%, transparent);
  font-family: var(--bp-body-font);
}

.bp-footer-credit {
  color: color-mix(in srgb, var(--bp-main) 66%, transparent);
  font-family: var(--bp-heading-font);
  letter-spacing: 0;
  text-decoration: none;
  transition: color var(--bp-motion-fast) ease;
}

.bp-footer-credit:hover,
.bp-footer-credit:focus-visible {
  color: var(--bp-main);
}

@media (max-width: 760px) {
  .bp-site-footer {
    margin-top: 34px;
    padding-top: 108px;
  }

  .bp-site-footer::before {
    top: 24px;
    right: -18%;
    left: -18%;
    border-radius: 50% 50% 0 0 / 78px 78px 0 0;
  }

  .bp-footer-menu {
    max-width: 580px;
    gap: 7px 5px;
  }

  .bp-footer-menu a {
    padding-inline: 11px;
  }
}

@media (max-width: 520px) {
  .bp-site-footer {
    padding: 94px 0 25px;
  }

  .bp-site-footer::before {
    top: 20px;
    right: -30%;
    left: -30%;
  }

  .bp-footer-inner {
    width: calc(100% - 32px);
  }
}

/* 補足: ユーザーが動きを減らす設定にしている場合はアニメーションを止めます。 */
@media (prefers-reduced-motion: reduce) {
  .bp-has-js .bp-page-loader {
    display: none;
  }

  .bp-has-js .bp-reveal {
    opacity: 1;
    transform: none;
  }

  .ballet-pages-studio *,
  .ballet-pages-studio *::before,
  .ballet-pages-studio *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }

  /* 補足: 動きを抑える設定ではFeatures写真のホバー移動を止めます。 */
  .bp-features-section .bp-feature:hover img {
    transform: none;
  }

  /* 補足: 動きを抑える設定では講師写真と装飾枠のホバー移動を止めます。 */
  .bp-teachers-section .bp-instructor:hover img,
  .bp-teachers-section .bp-instructor:hover::after {
    transform: none;
  }

  /* 補足: 動きを抑える設定ではクラス写真のホバー移動を止めます。 */
  .bp-classes-section .bp-class:hover .bp-class-photo {
    transform: none;
  }
}

/* 補足: オーナー向け固定編集ボタンを画面右下に配置します。 */
.bp-owner-edit-button {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  background: rgba(29, 29, 31, 0.92);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  backdrop-filter: blur(10px);
}

/* 補足: お知らせ編集ボタンはページ編集ボタンの近くに並ぶ位置へ置きます。 */
.bp-owner-edit-button-notice {
  bottom: 76px;
  background: rgba(255, 255, 255, 0.94);
  color: #1d1d1f;
  border-color: rgba(29, 29, 31, 0.12);
}

/* 補足: 固定編集ボタンのホバー時の見た目を整えます。 */
.bp-owner-edit-button:hover {
  color: #fff;
  filter: brightness(1.06);
}

/* 補足: お知らせ編集ボタンのホバー時も管理用デザインを保ちます。 */
.bp-owner-edit-button-notice:hover {
  color: #1d1d1f;
}

/* 補足: 教室一覧ショートコードのカードグリッドを定義します。 */

/** ========================================================================
 * 05 Management Screens
 * ------------------------------------------------------------------------
 * 先生が触るログイン・登録・ホームページ編集・お知らせ投稿など、管理画面側のUIをまとめます。公開ページのテーマカラーとは分けた管理UI色を使います。
 * 旧分割時の名称: 40-management.css
 * ======================================================================== */
/* 補足: 教室一覧ショートコードのカードグリッドを定義します。 */

.ballet-pages-studio-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

/* 補足: 教室一覧カードや管理画面カードの共通枠を定義します。 */
.ballet-pages-studio-card,
.ballet-pages-auth,
.bp-dashboard-section,
.bp-save-bar,
.bp-repeater-item,
.bp-notice-admin-row {
  border: 1px solid var(--bp-line);
  border-radius: var(--bp-radius-card);
  background: var(--bp-paper);
}

/* 補足: 教室一覧カードや管理画面カードの共通枠を定義します。 */
.ballet-pages-studio-card {
  overflow: hidden;
  color: var(--bp-ink);
  font-family: var(--bp-body-font);
}

/* 補足: 教室一覧カード画像の比率を整えます。 */
.ballet-pages-studio-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* 補足: 教室一覧カード内テキストの左右余白を整えます。 */
.ballet-pages-studio-card h3,
.ballet-pages-studio-card p {
  margin-right: 18px;
  margin-left: 18px;
}

/* 補足: 教室一覧カード内リンクを各教室のテーマ色で表示します。 */
.ballet-pages-studio-card a {
  color: var(--bp-accent-dark);
  text-decoration: none;
}

/* 補足: ログインと登録フォームを並べるゲート画面を定義します。 */
.ballet-pages-auth,
.ballet-pages-dashboard-shell,
.ballet-pages-account-gate {
  --bp-admin-bg: #fff9fb;
  --bp-admin-surface: #fff;
  --bp-admin-surface-soft: #fff5f7;
  --bp-admin-field: #fff5f7;
  --bp-admin-ink: #302a2e;
  --bp-admin-muted: #766c73;
  --bp-admin-line: #e8bfc9;
  --bp-admin-line-soft: #f1dce3;
  --bp-admin-main: #b83d60;
  --bp-admin-main-dark: #9d2f50;
  --bp-admin-selected: #fbe5ec;
  --bp-admin-focus: 0 0 0 3px rgb(226 148 165 / 22%);
  --bp-admin-danger: #bd4058;
  --bp-admin-shadow: rgba(0, 0, 0, 0.055);
  --bp-radius-card: 8px;
  --bp-radius-media: 6px;
  --bp-radius-button: 6px;
  width: min(1180px, calc(100vw - 32px));
  max-width: min(1180px, calc(100vw - 32px));
  margin: 32px auto;
  color: var(--bp-admin-ink);
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN",
    "Yu Gothic", sans-serif;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0;
  background: var(--bp-admin-bg);
  overflow-x: clip;
}

/* 補足: 管理画面カードのpaddingを幅の内側に含めて見切れを防ぎます。 */
.ballet-pages-auth,
.ballet-pages-auth *,
.ballet-pages-auth *::before,
.ballet-pages-auth *::after,
.ballet-pages-dashboard-shell,
.ballet-pages-dashboard-shell *,
.ballet-pages-dashboard-shell *::before,
.ballet-pages-dashboard-shell *::after,
.ballet-pages-account-gate,
.ballet-pages-account-gate *,
.ballet-pages-account-gate *::before,
.ballet-pages-account-gate *::after {
  box-sizing: border-box;
}

/* 補足: ログインと登録フォームを並べるゲート画面を定義します。 */
.ballet-pages-account-gate {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

/* 補足: ログイン/登録分岐内の認証カード幅を調整します。 */
.ballet-pages-account-gate .ballet-pages-auth {
  width: auto;
  margin: 0;
}

/* 補足: ログイン、登録、管理画面の共通幅と文字色を整えます。 */
.ballet-pages-auth,
.bp-dashboard-section {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-right: auto;
  margin-left: auto;
  padding: 26px 0;
}

/* 補足: 管理画面カードをモダンなパネルとして見せます。 */
.ballet-pages-auth,
.bp-dashboard-section,
.bp-save-bar,
.bp-repeater-item,
.bp-notice-admin-row {
  border-color: transparent;
  background: var(--bp-admin-surface);
  box-shadow: none;
}

/* 補足: 編集セクションを明確な見出しと白い入力面で区切ります。 */
.bp-dashboard-main > .bp-dashboard-section,
.bp-dashboard-section-zone > .bp-dashboard-section {
  position: relative;
  padding: 20px;
  border: 1px solid var(--bp-admin-line-soft);
  border-radius: var(--bp-radius-card);
  background: var(--bp-admin-surface);
}

/* 補足: 編集ブロックの枠と重複する左端の装飾線を表示しません。 */
.bp-dashboard-main > .bp-dashboard-section::before,
.bp-dashboard-section-zone > .bp-dashboard-section::before {
  content: none;
}

/* 補足: 折りたたみ中のセクションも章として見える余白を保ちます。 */
.bp-dashboard-main > .bp-dashboard-section.is-collapsed::before,
.bp-dashboard-section-zone > .bp-dashboard-section.is-collapsed::before {
  opacity: 0.14;
}

/* 補足: ホームページ編集セクションを固定順の一覧として表示します。 */
.bp-dashboard-section-manager {
  display: grid;
  gap: 18px;
  min-width: 0;
}

/* 補足: セクション一覧を余白だけで区切り、過剰な囲みを避けます。 */
.bp-dashboard-section-zone {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* 補足: セクション一覧の置き場は透明にして編集カードを主役にします。 */
.bp-dashboard-section-zone-active {
  background: transparent;
}

/* 補足: セクション置き場の見出しで目的を説明します。 */
.bp-dashboard-zone-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 2px 4px 4px;
  color: var(--bp-admin-ink);
}

/* 補足: セクション置き場の主見出しを強調します。 */
.bp-dashboard-zone-head strong {
  font-size: 0.95rem;
  font-weight: 800;
}

/* 補足: セクション置き場の補足文を小さく表示します。 */
.bp-dashboard-zone-head span {
  color: var(--bp-admin-muted);
  font-size: 0.78rem;
  font-weight: 700;
}

/* 補足: 使用中の編集セクションを通常の入力カードとして表示します。 */
.bp-dashboard-section-zone > .bp-dashboard-section.is-enabled {
  opacity: 1;
}

/* 補足: 未使用セクションはグレーアウトして公開されない状態を示します。 */
.bp-dashboard-section-zone > .bp-dashboard-section.is-disabled {
  background: var(--bp-admin-field);
  filter: none;
  opacity: 1;
}

/* 補足: お知らせなど別画面で編集するセクションの案内文を整えます。 */
.bp-dashboard-section-note {
  margin: 0;
  padding: 14px 0 0;
  color: var(--bp-admin-muted);
  font-size: 0.9rem;
  line-height: 1.8;
}

/* 補足: 管理画面の主編集エリアをひとつの大きな面として扱います。 */
.bp-dashboard-main,
.bp-notice-layout {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* 補足: デザイン・公開設定は全体設定としてホームページ編集フォームの一番上に表示します。 */
.bp-dashboard-design-section {
  order: -2;
}

/* 補足: 管理画面のヘッダーと通知幅をフォームカードと揃えます。 */
.bp-dashboard-head,
.ballet-pages-dashboard-shell > .ballet-pages-notice {
  width: 100%;
  max-width: min(1180px, calc(100vw - 32px));
  margin-right: auto;
  margin-left: auto;
}

/* 補足: ログイン、登録、管理画面の共通幅と文字色を整えます。 */
.ballet-pages-auth h2,
.bp-dashboard-head h2,
.bp-dashboard-section h3 {
  margin: 0;
  letter-spacing: 0;
}

/* 補足: ログイン、登録、管理画面の共通幅と文字色を整えます。 */
.ballet-pages-auth form,
.ballet-pages-dashboard,
.bp-form-stack,
.bp-repeater-items,
.bp-notice-admin-list {
  display: grid;
  min-width: 0;
  max-width: 100%;
  gap: 18px;
}

/* 補足: 管理画面のセクション注記入力欄を本文入力と少し分けて見せます。 */
.bp-section-notes-field,
.ballet-pages-section-notes-field {
  margin: 22px 0 0;
  padding: 18px;
  border: 1px solid var(--bp-admin-line-soft);
  border-radius: 16px;
  background: var(--bp-admin-surface-soft);
}

/* 補足: セクション注記入力欄のテキストエリア幅を安定させます。 */
.bp-section-notes-field textarea,
.ballet-pages-section-notes-field textarea {
  width: 100%;
  resize: vertical;
}

/* 補足: ログイン、登録、管理画面の共通幅と文字色を整えます。 */
.ballet-pages-auth p,
.ballet-pages-dashboard p,
.ballet-pages-dashboard .bp-form-field {
  margin: 0;
}

/* 補足: 入力欄自身の枠だけを使い、ラッパーの二重罫線を避けます。 */
.ballet-pages-auth p,
.bp-form-grid > p,
.bp-form-grid > .bp-form-wide,
.ballet-pages-dashboard .bp-form-field,
.bp-file-field {
  padding: 0 0 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* 補足: チェック項目など入力セルではない全幅ブロックも白いグループとして表示します。 */
.bp-form-grid > div.bp-form-wide {
  padding: 0 0 16px;
}

/* 補足: ログイン、登録、管理画面の共通幅と文字色を整えます。 */
.ballet-pages-auth label,
.ballet-pages-dashboard label,
.bp-field-label {
  display: block;
  margin-bottom: 8px;
  color: var(--bp-admin-ink);
  font-size: 0.82rem;
  font-weight: 700;
}

/* 補足: ログイン、登録、管理画面の共通幅と文字色を整えます。 */
.ballet-pages-auth input[type="email"],
.ballet-pages-auth input[type="password"],
.ballet-pages-auth input[type="text"],
.ballet-pages-dashboard input[type="text"],
.ballet-pages-dashboard input[type="email"],
.ballet-pages-dashboard input[type="password"],
.ballet-pages-dashboard input[type="date"],
.ballet-pages-dashboard input[type="color"],
.ballet-pages-dashboard input[type="file"],
.ballet-pages-dashboard select,
.ballet-pages-dashboard textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 48px;
  margin-top: 0;
  padding: 10px 12px;
  border: 1px solid var(--bp-admin-line);
  border-radius: var(--bp-radius-button);
  outline: 0;
  background: var(--bp-admin-surface);
  box-shadow: none;
  color: var(--bp-admin-ink);
  font: inherit;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

/* 補足: 管理画面の入力欄にフォーカスした時の状態を明確にします。 */
.ballet-pages-auth input[type="email"]:focus,
.ballet-pages-auth input[type="password"]:focus,
.ballet-pages-auth input[type="text"]:focus,
.ballet-pages-dashboard input[type="text"]:focus,
.ballet-pages-dashboard input[type="email"]:focus,
.ballet-pages-dashboard input[type="password"]:focus,
.ballet-pages-dashboard input[type="date"]:focus,
.ballet-pages-dashboard select:focus,
.ballet-pages-dashboard textarea:focus {
  border-color: var(--bp-admin-main);
  background: var(--bp-admin-surface);
  box-shadow: var(--bp-admin-focus);
}

/* 補足: フォームや管理リストの縦方向の間隔を統一します。 */
.ballet-pages-dashboard input[type="color"],
.bp-color-picker,
.ballet-pages-color-picker {
  width: 100%;
  min-height: 48px;
  padding: 4px;
  background: var(--bp-admin-surface);
  cursor: pointer;
}

/* 補足: ログイン、登録、管理画面の共通幅と文字色を整えます。 */
.ballet-pages-auth button,
.ballet-pages-dashboard button,
.bp-add-row,
.bp-remove-row {
  width: fit-content;
  min-height: 42px;
  padding: 0 17px;
  border: 0;
  border-radius: var(--bp-radius-button);
  background: var(--bp-admin-main);
  box-shadow: none;
  color: #fff;
  cursor: pointer;
  font-weight: 700;
  transition:
    background 0.18s ease,
    filter 0.18s ease;
}

/* 補足: 管理画面のボタンに触れた時の反応を軽く付けます。 */
.ballet-pages-auth button:hover,
.ballet-pages-dashboard button:hover,
.bp-add-row:hover,
.bp-remove-row:hover {
  filter: brightness(1.04);
}

/* 補足: 管理画面のボタンを押した時の沈み込みを表現します。 */
.ballet-pages-auth button:active,
.ballet-pages-dashboard button:active,
.bp-add-row:active,
.bp-remove-row:active {
  filter: brightness(0.98);
}

/* 補足: フォーム操作ボタンの基本スタイルを定義します。 */
.bp-remove-row,
.bp-notice-admin-actions button {
  background: var(--bp-admin-danger);
}

/* 補足: フォーム操作ボタンの基本スタイルを定義します。 */
.bp-remove-row {
  min-height: 36px;
  margin-top: 14px;
}

/* 補足: フォーム操作ボタンの基本スタイルを定義します。 */
.bp-add-row {
  margin-top: 14px;
  background: var(--bp-admin-main);
}

/* 補足: サンプル投入ボタンは管理画面の補助操作として控えめな青で表示します。 */
.ballet-pages-dashboard .bp-sample-button {
  background: var(--bp-admin-selected);
  box-shadow: inset 0 0 0 1px
    color-mix(in srgb, var(--bp-admin-main), transparent 58%);
  color: var(--bp-admin-main-dark);
}

/* 補足: 全削除ボタンは白地に警告色の文字で、保存ボタンと明確に分けます。 */
.ballet-pages-dashboard .bp-reset-button {
  background: var(--bp-admin-surface);
  box-shadow: inset 0 0 0 1px
    color-mix(in srgb, var(--bp-admin-danger), transparent 68%);
  color: var(--bp-admin-danger);
}

/* 補足: 管理画面内のテキストリンクをボタン群の中でも読みやすくします。 */
.bp-dashboard-actions a,
.bp-save-bar a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--bp-admin-surface);
  box-shadow: inset 0 0 0 1px var(--bp-admin-line);
  color: var(--bp-admin-main-dark);
  font-weight: 700;
  text-decoration: none;
  transition:
    box-shadow 0.18s ease,
    background 0.18s ease;
}

/* 補足: 管理画面内リンクボタンに触れた時の見た目を整えます。 */
.bp-dashboard-actions a:hover,
.bp-save-bar a:hover {
  background: var(--bp-admin-surface-soft);
  box-shadow: inset 0 0 0 1px var(--bp-admin-line);
}

/* 補足: チェックボックス付きラベルを横並びにします。 */
.bp-inline-check label,
.bp-check-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-weight: 600;
}

/* 補足: チェック項目の一覧にも薄い区切り線を入れます。 */
.bp-check-grid {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--bp-admin-line-soft);
}

/* 補足: フォーム入力欄の幅、余白、枠線を統一します。 */
.bp-inline-check input {
  width: auto;
}

/* 補足: 認証画面と管理画面の操作ボタン群を整えます。 */
.bp-auth-actions,
.bp-dashboard-actions,
.bp-save-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* 補足: 管理画面上部のタイトルと操作リンクを左右に配置します。 */
.bp-dashboard-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 30px;
  padding: 4px 2px;
}

/* 補足: 管理画面上部にアカウントと教室情報がわかるヘッダーを表示します。 */
.bp-dashboard-identity {
  position: relative;
  overflow: hidden;
  display: block;
  min-height: 152px;
  margin-bottom: 26px;
  padding: 0;
  border-radius: var(--bp-radius-card);
  background-color: #d8d8de;
  background-position: center;
  background-size: cover;
  box-shadow: 0 12px 34px var(--bp-admin-shadow);
}

/* 補足: ヘッダー画像の上に文字を読みやすくするための淡いレイヤーを重ねます。 */
.bp-dashboard-identity-shade {
  display: flex;
  align-items: flex-end;
  min-height: 152px;
  padding: 24px;
  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.58),
      rgba(0, 0, 0, 0.2) 56%,
      rgba(0, 0, 0, 0.1)
    ),
    linear-gradient(0deg, rgba(0, 0, 0, 0.42), transparent 64%);
}

/* 補足: プロフィールアイコン、教室名、アカウント名を横並びでまとめます。 */
.bp-dashboard-profile {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  min-width: 0;
}

/* 補足: ヘッダー内の公開ページ確認ボタンを右側に配置します。 */
.bp-dashboard-view-site {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 42px;
  margin-left: auto;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(12px);
  color: #fff;
  font-size: 0.86rem;
  font-weight: 800;
  text-decoration: none;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}

/* 補足: 公開ページ確認ボタンのホバー時に少し明るくします。 */
.bp-dashboard-view-site:hover {
  border-color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.24);
  color: #fff;
  transform: translateY(-1px);
}

/* 補足: WordPressアカウントのプロフィール画像を丸く表示します。 */
.bp-dashboard-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 74px;
  width: 74px;
  height: 74px;
  border: 3px solid rgba(255, 255, 255, 0.78);
  border-radius: 999px;
  background: var(--bp-admin-surface);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

/* 補足: プロフィール画像を丸い枠いっぱいに収めます。 */
.bp-dashboard-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 補足: ヘッダー内のテキストが狭い画面でも折り返せるようにします。 */
.bp-dashboard-profile-text {
  min-width: 0;
  color: #fff;
}

/* 補足: 管理中の画面名をヘッダー内で小さく表示します。 */
.bp-dashboard-identity .bp-kicker {
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.82);
}

/* 補足: 教室名を自分のページ名として大きく表示します。 */
.bp-dashboard-identity h2 {
  max-width: 760px;
  margin: 0;
  color: #fff;
  font-size: 1.65rem;
  font-weight: 800;
  line-height: 1.18;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.22);
}

/* 補足: アカウント名や公開状態を小さな情報チップとして表示します。 */
.bp-dashboard-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

/* 補足: ヘッダー内の情報チップを管理画面らしい控えめな見た目にします。 */
.bp-dashboard-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(12px);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
}

/* 補足: 管理画面内の小さなカテゴリラベルを整えます。 */
.bp-kicker {
  margin: 0 0 6px;
  color: var(--bp-admin-muted);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

/* 補足: 認証画面と管理画面の見出し余白を揃えます。 */
.bp-dashboard-section h3 {
  position: relative;
  margin-bottom: 18px;
  padding: 0 4px 14px;
  color: var(--bp-admin-ink);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.35;
}

/* 補足: 管理画面セクション見出しの英語と日本語を2段で表示します。 */
.bp-dashboard-section h3 span,
.bp-dashboard-section h3 small {
  display: block;
  letter-spacing: 0;
}

/* 補足: 英語名は公開ページと照合できる補助ラベルとして表示します。 */
.bp-dashboard-section h3 span {
  order: 2;
  color: var(--bp-admin-muted);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
}

/* 補足: 編集対象がすぐ読めるよう、日本語を主見出しにします。 */
.bp-dashboard-section h3 small {
  order: 1;
  margin-top: 0;
  color: var(--bp-admin-ink);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}

/* 補足: ホームページ編集の各セクションを折りたたみ操作できる見出しにします。 */
.ballet-pages-dashboard .bp-dashboard-section-toggle,
.bp-dashboard-section-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 58px;
  margin: 0;
  padding: 0 4px 14px;
  border: 0;
  border-bottom: 1px solid var(--bp-admin-line-soft);
  border-radius: 0;
  background: transparent;
  color: var(--bp-admin-ink);
  text-align: left;
  cursor: pointer;
  box-shadow: none;
}

/* 補足: 使用状態ボタンがある編集セクションの見出し余白を整えます。 */
[data-dashboard-managed-section] .bp-dashboard-section-toggle {
  gap: 12px;
  padding-right: 0;
}

/* 補足: 見出しの下に使用状態スイッチの操作領域を確保します。 */
.ballet-pages-dashboard .bp-dashboard-section-state-button,
.bp-dashboard-section-state-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: 8px 0 0;
  padding: 0 4px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  box-shadow: none;
  color: var(--bp-admin-muted);
  font-size: 0.78rem;
  font-weight: 800;
}

/* 補足: 未使用セクション内の切り替えボタンは使う操作だとわかる色にします。 */
.is-disabled > .bp-dashboard-section-state-button {
  background: var(--bp-admin-main);
  box-shadow: none;
  color: #fff;
}

/* 補足: 折りたたみ見出し内では通常の見出し下線を使わないようにします。 */
.bp-dashboard-section-toggle h3 {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 4px;
  min-width: 0;
  margin: 0;
  padding: 0;
}

/* 補足: 折りたたみ見出しの開閉マークを押しやすく表示します。 */
.bp-dashboard-section-indicator {
  display: inline-grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--bp-admin-field);
  color: var(--bp-admin-main);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
}

/* 補足: 折りたたみセクションの入力内容に上余白を付けます。 */
.bp-dashboard-section-content {
  padding-top: 24px;
}

/* 補足: 折りたたみ中のセクションは上下余白を少し抑えます。 */
.bp-dashboard-section.is-collapsed {
  padding-bottom: 12px;
}

/* 補足: 管理画面セクション見出しの下線を淡く入れます。 */
.bp-dashboard-section h3::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--bp-admin-line-soft);
  content: "";
}

/* 補足: 折りたたみ見出し内では通常見出しの疑似下線を表示しません。 */
.bp-dashboard-section-toggle h3::after {
  display: none;
}

/* 補足: 管理画面フォームを2カラムで配置します。 */
.bp-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  min-width: 0;
  max-width: 100%;
  gap: 14px;
}

/* 補足: フォーム項目をグリッド全幅に広げます。 */
.bp-form-wide {
  grid-column: 1 / -1;
}

/* 補足: ファイル入力欄がグリッド内で潰れないようにします。 */
.bp-file-field {
  min-width: 0;
}

/* 補足: 入力補足テキストのサイズと色を整えます。 */
.bp-field-hint {
  margin-top: 8px;
  margin-bottom: 10px;
  color: var(--bp-admin-muted);
  font-size: 0.86rem;
  line-height: 1.7;
}

/* 補足: 単体画像プレビューの下余白を整えます。 */
.bp-current-image {
  margin-bottom: 10px;
}

/* 補足: 現在設定済みの画像プレビューサイズを整えます。 */
.bp-current-image img {
  display: block;
  width: min(220px, 100%);
  height: auto;
  border-radius: 16px;
  box-shadow: 0 8px 20px var(--bp-admin-shadow);
}

/* 補足: 特徴・クラス写真の管理画面プレビューは公開側と同じ横長4:3で確認できるようにします。 */
.bp-current-image-landscape img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: var(--bp-image-position);
}

/* 補足: 複数画像プレビューを小さなグリッドで並べます。 */
.bp-current-images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

/* 補足: 複数画像プレビューの比率と角丸を整えます。 */
.bp-current-images img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  box-shadow: 0 6px 18px var(--bp-admin-shadow);
  object-fit: cover;
}

/* 補足: 複数画像プレビュー内の説明文をグリッド全幅に広げます。 */
.bp-current-images .bp-field-hint {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

/* 補足: 繰り返し入力1件分の枠と背景を整えます。 */
.bp-repeater-item {
  min-width: 0;
  max-width: 100%;
  padding: 18px;
  border: 0;
  border-radius: var(--bp-radius-card);
  background: var(--bp-admin-surface-soft);
}

/* 補足: 追加できる入力項目の見出しと操作ボタンを1つのまとまりとして表示します。 */
.bp-repeater-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bp-admin-line-soft);
}

/* 補足: 講師や質問など、何番目の項目を編集中かを示します。 */
.bp-repeater-head h4 {
  margin: 0;
  color: var(--bp-admin-ink);
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.3;
}

/* 補足: 料金入力の考え方を短く案内し、上位区分と明細の関係を伝えます。 */
.bp-fee-editor-help {
  margin: 0 0 16px;
  color: var(--bp-admin-muted);
  font-size: 0.88rem;
  line-height: 1.7;
}

/* 補足: 複数の料金区分を十分な間隔で縦に並べます。 */
.bp-fee-editor-groups {
  display: grid;
  gap: 18px;
}

/* 補足: 入会金や月謝など、料金の上位区分をひとまとまりにします。 */
.bp-fee-editor-group {
  min-width: 0;
  padding: clamp(16px, 2vw, 22px);
  border: 1px solid var(--bp-admin-line);
  border-radius: var(--bp-radius-card);
  background: var(--bp-admin-surface);
}

/* 補足: 同じ料金区分に属する複数の明細を一段内側へまとめます。 */
.bp-fee-editor-lines {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

/* 補足: 通常料金や家族割など、料金明細1件分の入力範囲を示します。 */
.bp-fee-editor-line {
  min-width: 0;
  padding: 14px;
  border-left: 3px solid var(--bp-admin-main);
  border-radius: 0 var(--bp-radius-button) var(--bp-radius-button) 0;
  background: var(--bp-admin-surface-soft);
}

/* 補足: 料金明細の番号と削除ボタンを同じ行に配置します。 */
.bp-fee-line-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  color: var(--bp-admin-muted);
  font-size: 0.82rem;
  font-weight: 700;
}

/* 補足: 料金区分・明細の削除ボタンを小さな丸形操作に統一します。 */
.bp-fee-editor [data-fee-group-remove],
.bp-fee-editor [data-fee-line-remove] {
  display: inline-grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  min-height: 32px;
  padding: 0;
  border: 1px solid var(--bp-admin-line-soft);
  border-radius: 50%;
  background: var(--bp-admin-surface);
  color: var(--bp-admin-muted);
  font-size: 1rem;
  line-height: 1;
}

/* 補足: 料金区分追加ボタンは区分一覧との間を空けます。 */
.bp-fee-editor > [data-fee-group-add] {
  margin-top: 16px;
}

/* 補足: リピーター内の削除は文言ではなく小さな×ボタンで示します。 */
.ballet-pages-dashboard .bp-repeater-head .bp-remove-row,
.bp-repeater-head .bp-remove-row {
  display: inline-grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  min-height: 34px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--bp-admin-line-soft);
  border-radius: 999px;
  background: var(--bp-admin-surface);
  color: var(--bp-admin-muted);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1;
}

/* 補足: リピーター内の追加は丸い＋ボタンで示します。 */
.ballet-pages-dashboard .bp-add-row,
.bp-add-row {
  display: inline-grid;
  place-items: center;
  width: 42px;
  min-height: 42px;
  margin-top: 14px;
  padding: 0;
  border-radius: 999px;
  background: var(--bp-admin-main);
  color: #fff;
  font-size: 1.35rem;
  line-height: 1;
}

/* 補足: 固定3件の特徴入力フォームを縦に並べます。 */
.bp-fixed-features,
.ballet-pages-fixed-features {
  display: grid;
  gap: 14px;
}

/* 補足: スケジュール入力を月曜日から日曜日までの7列グリッドで表示します。 */
.bp-schedule-grid-editor {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  overscroll-behavior-x: contain;
  padding-bottom: 8px;
}

/* 補足: スケジュール入力内の横幅計算を列幅に合わせます。 */
.bp-schedule-grid-editor *,
.bp-schedule-grid-editor *::before,
.bp-schedule-grid-editor *::after {
  box-sizing: border-box;
}

/* 補足: スケジュール入力の曜日ごとの列を整えます。 */
.bp-schedule-column {
  display: grid;
  flex: 0 0 220px;
  align-content: start;
  gap: 8px;
  min-width: 0;
}

/* 補足: スケジュール入力の曜日見出しを固定幅の列内で目立たせます。 */
.bp-schedule-column h4 {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--bp-admin-line-soft);
  border-radius: 14px;
  background: var(--bp-admin-field);
  color: var(--bp-admin-muted);
  font-size: 0.86rem;
  text-align: center;
}

/* 補足: 曜日ごとのスケジュール枠を縦に並べます。 */
.bp-schedule-entry-list {
  display: grid;
  gap: 10px;
  min-width: 0;
}

/* 補足: スケジュール1枠分の入力欄をカード状にまとめます。 */
.bp-schedule-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  width: 100%;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--bp-admin-line-soft);
  border-radius: 16px;
  background: var(--bp-admin-surface-soft);
  box-shadow: 0 4px 14px var(--bp-admin-shadow);
}

/* 補足: スケジュール枠内の各入力項目を列幅いっぱいに収めます。 */
.bp-schedule-field {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--bp-admin-line-soft);
}

/* 補足: スケジュール枠の最後の入力項目は下線を省略します。 */
.bp-schedule-entry .bp-schedule-field:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

/* 補足: スケジュール入力枠の見出しをクラス単位のまとまりとして見せます。 */
.bp-schedule-entry-head {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--bp-admin-line-soft);
}

/* 補足: スケジュール枠のドラッグ操作用ハンドルを小さく表示します。 */
.ballet-pages-dashboard .bp-schedule-drag,
.bp-schedule-drag {
  display: inline-grid;
  place-items: center;
  width: 28px;
  min-height: 28px;
  padding: 0;
  border: 1px solid var(--bp-admin-line);
  border-radius: 9px;
  background: var(--bp-admin-surface);
  color: var(--bp-admin-muted);
  cursor: grab;
}

/* 補足: スケジュール枠をドラッグ中のハンドル状態を示します。 */
.bp-schedule-drag:active {
  cursor: grabbing;
}

/* 補足: スケジュール入力枠の見出しラベルを整えます。 */
.bp-schedule-entry-head span {
  margin-bottom: 0;
  color: var(--bp-admin-muted);
  font-size: 0.76rem;
}

/* 補足: 最初から用意している5枠は固定セルとして見せ、削除ボタン分の幅だけ保ちます。 */
.bp-schedule-remove-placeholder {
  display: block;
  width: 28px;
  min-height: 28px;
}

/* 補足: スケジュール枠の削除ボタンを控えめな危険操作として表示します。 */
.ballet-pages-dashboard .bp-schedule-remove,
.bp-schedule-remove {
  width: auto;
  min-height: 28px;
  padding: 0 9px;
  border: 0;
  border-radius: 9px;
  background: #fff1f2;
  color: var(--bp-admin-danger);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}

/* 補足: スケジュール枠の削除ボタンに触れた時の見た目を整えます。 */
.ballet-pages-dashboard .bp-schedule-remove:hover,
.ballet-pages-dashboard .bp-schedule-remove:focus-visible,
.bp-schedule-remove:hover,
.bp-schedule-remove:focus-visible {
  background: #ffe5e7;
  color: var(--bp-admin-danger);
  filter: none;
}

/* 補足: スケジュール枠をドラッグ中は半透明にして移動中であることを示します。 */
.bp-schedule-entry.is-dragging {
  opacity: 0.58;
}

/* 補足: スケジュール枠内のラベルを小さく表示します。 */
.bp-schedule-entry span {
  display: block;
  margin-bottom: 4px;
  color: var(--bp-admin-muted);
  font-size: 0.72rem;
  font-weight: 700;
}

/* 補足: クラス名と補足の入力欄を枠の全幅に広げます。 */
.bp-schedule-field-name,
.bp-schedule-field-note {
  grid-column: 1 / -1;
}

/* 補足: スケジュール枠内の入力欄を列幅に収めます。 */
.bp-schedule-entry input,
.bp-schedule-entry textarea {
  width: 100%;
  min-width: 0;
  padding: 8px 9px;
}

/* 補足: スケジュールの追加ボタンを曜日列いっぱいに配置します。 */
.bp-add-schedule-row {
  width: 100%;
  min-height: 38px;
  border: 1px dashed var(--bp-admin-line);
  border-radius: 14px;
  background: var(--bp-admin-field);
  color: var(--bp-admin-main-dark);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    color 0.2s ease;
}

/* 補足: スケジュールの追加ボタンに触れた時の見た目を整えます。 */
.bp-add-schedule-row:hover,
.bp-add-schedule-row:focus-visible {
  border-color: transparent;
  background: #fcf7f8;
  color: var(--bp-admin-main);
}

/* 補足: 固定特徴フォーム内の番号見出しを整えます。 */
.bp-fixed-feature h4,
.ballet-pages-fixed-features h4 {
  margin: 0 0 14px;
  color: var(--bp-admin-ink);
  font-size: 0.95rem;
}

/* 補足: 表示セクションのチェック項目をグリッド配置します。 */
.bp-check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

/* 補足: 保存ボタンバーを画面下部に追従させます。 */
.bp-save-bar {
  position: sticky;
  bottom: 0;
  z-index: 4;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-right: auto;
  margin-left: auto;
  padding: 16px;
  border: 1px solid var(--bp-admin-line-soft);
  border-radius: var(--bp-radius-card);
  background: var(--bp-admin-surface);
  box-shadow: 0 -4px 18px var(--bp-admin-shadow);
}

/* 補足: 通知メッセージの枠線と背景を整えます。 */
.ballet-pages-notice {
  padding: 14px 16px;
  border-left: 4px solid var(--bp-admin-main, #b83d60);
  background: var(--bp-admin-surface, #fff);
}

/* 補足: エラーメッセージの色を警告用に切り替えます。 */
.ballet-pages-error {
  border-left-color: var(--bp-admin-danger, #d70015);
  background: #fff5f5;
}

/* 補足: 管理画面全体をサイドメニューと編集エリアに分けます。 */
.bp-admin-shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 22px;
  width: 100%;
  max-width: min(1180px, calc(100vw - 32px));
  min-width: 0;
  margin: 0 auto;
  align-items: start;
}

/* 補足: 管理メニューをPCでは左サイドバーとして表示します。 */
.bp-dashboard-menu {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 18px;
  padding: 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* 補足: 管理メニューのグループを階層ごとにまとめます。 */
.bp-dashboard-menu-group {
  display: grid;
  gap: 6px;
}

/* 補足: 管理メニューの階層見出しを控えめに表示します。 */
.bp-dashboard-menu-group p {
  margin: 0 0 2px;
  padding: 0 10px;
  color: var(--bp-admin-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0;
}

/* 補足: 管理メニューの各リンクを押しやすい行として整えます。 */
.bp-dashboard-menu a {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 6px;
  color: var(--bp-admin-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}

/* 補足: 階層下の投稿一覧を少しインデントして表示します。 */
.bp-dashboard-menu a.bp-dashboard-submenu {
  min-height: 38px;
  margin-left: 12px;
  font-size: 0.86rem;
  font-weight: 650;
}

/* 補足: 管理メニューのホバーと現在位置を見やすくします。 */
.bp-dashboard-menu a:hover,
.bp-dashboard-menu a.is-active {
  background: var(--bp-admin-field);
  color: var(--bp-admin-main);
  transform: none;
}

/* 補足: 管理メニューの現在位置を少し強調します。 */
.bp-dashboard-menu a.is-active {
  background: var(--bp-admin-selected);
  box-shadow: inset 3px 0 var(--bp-admin-main);
}

.bp-notice-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
  gap: 22px;
  align-items: start;
}

/* 補足: お知らせ管理の一覧だけを表示する画面では横幅を広く使います。 */
.bp-notice-layout-list,
.bp-notice-layout-editor {
  grid-template-columns: minmax(0, 1fr);
}

/* 補足: お知らせ投稿画面の日付・時刻・現在日時ボタンを横並びで扱います。 */
.bp-notice-datetime-grid {
  align-items: stretch;
}

/* 補足: 現在日時ボタンを入力セル内で押しやすく配置します。 */
.bp-notice-now-cell {
  display: grid;
  align-content: end;
}

/* 補足: お知らせ投稿のリッチエディタを管理画面のセル内で見やすくします。 */
.bp-notice-rich-editor {
  display: grid;
  gap: 10px;
}

/* 補足: シンプル投稿エディタの上部操作を横並びにします。 */
.bp-notice-editor-head {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

/* 補足: シンプル投稿エディタの画像追加ボタンを控えめに表示します。 */
.bp-notice-image-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--bp-admin-line-soft, #e4e4e8);
  border-radius: 14px;
  background: var(--bp-admin-surface, #fff);
  color: var(--bp-admin-main, #b83d60);
  font-weight: 800;
  cursor: pointer;
}

/* 補足: お知らせ管理一覧の1行分レイアウトを定義します。 */
.bp-notice-admin-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 16px;
  background: var(--bp-admin-surface-soft, #f9f9fb);
}

/* 補足: サムネイルがないお知らせ行は従来通り2カラムで表示します。 */
.bp-notice-admin-row:not(:has(.bp-notice-admin-thumb)) {
  grid-template-columns: minmax(0, 1fr) auto;
}

/* 補足: お知らせ管理一覧のサムネイルを小さく揃えます。 */
.bp-notice-admin-thumb {
  width: 72px;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  object-fit: cover;
}

/* 補足: 画像削除チェックを入力欄の近くに控えめに表示します。 */
.bp-inline-check {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin: 0 0 12px;
  color: var(--bp-admin-muted, #6e6e73);
  font-size: 0.86rem;
}

/* 補足: お知らせ管理一覧の日付や状態ラベルを控えめに表示します。 */
.bp-notice-admin-row time,
.bp-notice-admin-row span {
  display: inline-block;
  margin-bottom: 6px;
  color: var(--bp-admin-muted, #6e6e73);
  font-size: 0.82rem;
}

/* 補足: お知らせ管理一覧のタイトル余白を整えます。 */
.bp-notice-admin-row h4 {
  margin: 0 0 4px;
  font-size: 1rem;
  line-height: 1.45;
}

/* 補足: お知らせ管理の検索と絞り込みフォームを整えます。 */
.bp-notice-filter {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(130px, 0.45fr) auto;
  gap: 10px;
  margin: 0 0 18px;
}

/* 補足: お知らせ管理の検索と絞り込み入力を行内に収めます。 */
.bp-notice-filter input,
.bp-notice-filter select {
  width: 100%;
  min-width: 0;
}

/* 補足: お知らせ管理の絞り込みボタンを小さめに整えます。 */
.bp-notice-filter button {
  min-height: 42px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--bp-radius-button);
  background: var(--bp-admin-main, #b83d60);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

/* 補足: お知らせ管理一覧の操作リンクを右寄せで並べます。 */
.bp-notice-admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

/* 補足: お知らせ管理の操作フォーム余白をリセットします。 */
.bp-notice-admin-actions form {
  margin: 0;
}

/* 補足: フォーム操作ボタンの基本スタイルを定義します。 */
.bp-notice-admin-actions button {
  min-height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--bp-radius-button);
  color: #fff;
  cursor: pointer;
}

/* 補足: 投稿編集画面内の記事削除ボタンを保存操作から少し分けます。 */
.bp-save-bar .bp-delete-button {
  margin-left: auto;
  border: 1px solid
    color-mix(in srgb, var(--bp-admin-danger, #d70015), transparent 70%);
  background: color-mix(in srgb, var(--bp-admin-danger, #d70015), #fff 88%);
  color: var(--bp-admin-danger, #d70015);
}

/* 補足: 本文中に挿入されたお知らせ画像の余白を整えます。 */
.bp-news-inline-image {
  margin: 28px 0;
}

/* 補足: 開いている編集セクションを青い枠で示し、作業位置を明確にします。 */
.bp-dashboard-main
  .bp-dashboard-section[data-dashboard-section-ready]:not(.is-collapsed):not(
    .is-disabled
  ) {
  border-color: var(--bp-admin-main);
}

/* 補足: セクション見出しに触れた時も文字が読める淡い背景を使います。 */
.ballet-pages-dashboard .bp-dashboard-section-toggle:hover {
  background: var(--bp-admin-surface-soft);
  color: var(--bp-admin-ink);
}

/* 補足: 管理操作はキーボードでも現在位置がわかるフォーカス枠を表示します。 */
.ballet-pages-dashboard-shell
  :is(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--bp-admin-main);
  outline-offset: 3px;
}

/* 補足: 使用状態スイッチは全状態で同じ大きさを保ちます。 */
.ballet-pages-dashboard .bp-dashboard-section-state-button[role="switch"] {
  background: transparent;
  box-shadow: none;
  color: var(--bp-admin-muted);
  padding-right: 52px;
}

/* 補足: スイッチの背景は未使用がグレー、使用中が青になります。 */
.bp-dashboard-section-state-button[role="switch"]::before {
  position: absolute;
  right: 4px;
  top: 50%;
  width: 36px;
  height: 22px;
  border-radius: 11px;
  background: var(--bp-admin-muted);
  transform: translateY(-50%);
  content: "";
}

/* 補足: スイッチのつまみの位置でも使用状態を伝えます。 */
.bp-dashboard-section-state-button[role="switch"]::after {
  position: absolute;
  right: 21px;
  top: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bp-admin-surface);
  transform: translateY(-50%);
  content: "";
}

/* 補足: 使用中のスイッチの背景を操作色にします。 */
.bp-dashboard-section-state-button[aria-checked="true"]::before {
  background: var(--bp-admin-main);
}

/* 補足: 使用中のつまみを右側へ移動します。 */
.bp-dashboard-section-state-button[aria-checked="true"]::after {
  right: 7px;
}

/* 補足: 未使用の内容を落ち着いた文字色にし、切り替え操作の視認性を保ちます。 */
.bp-dashboard-section.is-disabled .bp-dashboard-section-toggle h3 small {
  color: var(--bp-admin-muted);
}

/* 補足: 日時なども通常の入力欄と同じ書式に揃えます。 */
.ballet-pages-dashboard
  input:is(
    [type="datetime-local"],
    [type="tel"],
    [type="url"],
    [type="number"]
  ) {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--bp-admin-line);
  border-radius: var(--bp-radius-button);
  background: var(--bp-admin-surface);
  color: var(--bp-admin-ink);
  font: inherit;
}

/** ========================================================================
 * 06 Responsive Rules
 * ------------------------------------------------------------------------
 * スマホ・タブレット・PC幅の調整をまとめます。セクションの基本構造は変えず、幅と並びだけ調整します。
 * 旧分割時の名称: 50-responsive.css
 * ======================================================================== */

/* 補足: 幅が足りない画面では管理メニューを上部に回して入力欄の横幅を確保します。 */
@media (max-width: 1080px) {
  .ballet-pages-auth,
  .ballet-pages-dashboard-shell,
  .ballet-pages-account-gate {
    width: min(100vw - 24px, 1180px);
    max-width: min(100vw - 24px, 1180px);
  }

  .bp-admin-shell {
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: min(100vw - 24px, 1180px);
  }

  .bp-dashboard-menu {
    position: static;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .bp-dashboard-main,
  .bp-notice-layout {
    padding: 0;
  }
}

/* 補足: 画面幅に応じたレスポンシブ調整をまとめます。 */
@media (max-width: 720px) {
  /* 補足: 管理画面カードの横幅と余白をスマホ幅に合わせます。 */
  .ballet-pages-auth,
  .ballet-pages-dashboard-shell,
  .ballet-pages-account-gate {
    width: min(100vw - 16px, 1180px);
    max-width: min(100vw - 16px, 1180px);
    margin-block: 18px;
  }

  /* 補足: 管理画面セクションの内側余白をスマホで少し抑えます。 */
  .ballet-pages-auth,
  .bp-dashboard-section {
    max-width: 100%;
    padding: 18px 0;
  }

  /* 補足: 管理画面ヘッダーと通知幅もスマホ幅に合わせます。 */
  .bp-dashboard-head,
  .ballet-pages-dashboard-shell > .ballet-pages-notice,
  .bp-save-bar {
    max-width: 100%;
  }

  /* 補足: スマホでは管理画面のアカウントヘッダーを少しコンパクトにします。 */
  .bp-dashboard-identity {
    min-height: 156px;
    margin-bottom: 18px;
  }

  /* 補足: スマホのヘッダー内余白を抑えて入力欄へ進みやすくします。 */
  .bp-dashboard-identity-shade {
    min-height: 156px;
    padding: 20px;
  }

  /* 補足: スマホではプロフィール画像を少し小さく表示します。 */
  .bp-dashboard-avatar {
    flex-basis: 58px;
    width: 58px;
    height: 58px;
  }

  /* 補足: スマホでは公開ページ確認ボタンを下段に回して押しやすくします。 */
  .bp-dashboard-profile {
    flex-wrap: wrap;
  }

  /* 補足: スマホの公開ページ確認ボタンは横幅いっぱいに近い配置にします。 */
  .bp-dashboard-view-site {
    width: 100%;
    margin-left: 0;
  }

  /* 補足: スマホではヘッダー内の情報チップを詰めて表示します。 */
  .bp-dashboard-meta span {
    min-height: 26px;
    padding: 0 9px;
    font-size: 0.72rem;
  }

  /* 補足: スマホでは管理画面のサイドバーを上部メニューとして表示します。 */
  .bp-admin-shell {
    grid-template-columns: 1fr;
    gap: 14px;
    width: 100%;
    max-width: min(100vw - 16px, 1180px);
  }

  /* 補足: スマホのお知らせ管理メニューは固定せず、2列のメニューカードにします。 */
  .bp-dashboard-menu {
    position: static;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px;
  }

  /* 補足: スマホでは管理画面の主編集エリアの左右余白を抑えて見切れを防ぎます。 */
  .bp-dashboard-main,
  .bp-notice-layout {
    padding: 0;
    font-size: 16px;
  }

  /* 補足: スマホではセクション管理エリアの余白を抑えます。 */
  .bp-dashboard-section-zone {
    padding: 0;
    border-radius: 0;
  }

  /* 補足: スマホでは編集セクションの操作ボタンが見出しを圧迫しないようにします。 */
  [data-dashboard-managed-section] .bp-dashboard-section-toggle {
    padding-right: 4px;
  }

  /* 補足: スマホでは使う・使わないボタンを通常フローに戻します。 */
  .ballet-pages-dashboard .bp-dashboard-section-state-button,
  .bp-dashboard-section-state-button {
    position: relative;
    width: fit-content;
    margin: 8px 0 0;
  }

  /* 補足: スマホでは基本フォームを1列にして入力欄の横幅を確保します。 */
  .bp-form-grid {
    grid-template-columns: 1fr;
  }

  /* 補足: スマホの管理メニューグループ内だけを2列表示にします。 */
  .bp-dashboard-menu-group {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 補足: スマホの管理メニュー見出しはグループ幅いっぱいに表示します。 */
  .bp-dashboard-menu-group p {
    grid-column: 1 / -1;
  }

  /* 補足: スマホのお知らせ管理メニュー項目を中央寄せで押しやすくします。 */
  .bp-dashboard-menu a {
    justify-content: center;
    min-height: 44px;
    padding: 0 10px;
    font-size: 0.84rem;
    text-align: center;
  }

  /* 補足: スマホでは階層下メニューのインデントを解除します。 */
  .bp-dashboard-menu a.bp-dashboard-submenu {
    margin-left: 0;
  }

  /* 補足: 管理バー表示時の固定ヘッダー位置を調整します。 */
  .admin-bar .bp-studio-nav {
    top: 46px;
  }

  /* 補足: 固定ヘッダーのレイアウト、背景、境界線を整えます。 */
  .bp-studio-nav {
    min-height: 64px;
    padding: 9px 18px;
  }

  /* 補足: ヘッダー左側のロゴまたは教室名リンクを整えます。 */
  .bp-studio-brand {
    min-width: 0;
    max-width: calc(100% - 64px);
  }

  /* 補足: ロゴ未設定時の教室名表示を省略表示にします。 */
  .bp-studio-brand span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* 補足: スマホ用メニューボタンの表示と形を整えます。 */
  .bp-menu-toggle {
    position: relative;
    z-index: 72;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
  }

  /* 補足: スマホメニューの三本線アイコンを描画します。 */
  .bp-menu-toggle span:not(.screen-reader-text) {
    display: block;
    width: 18px;
    height: 1px;
    background: var(--bp-ink);
    transition:
      transform 0.2s ease,
      opacity 0.2s ease;
  }

  /* 補足: メニュー展開時に上の線を閉じるアイコンへ変形します。 */
  .ballet-pages-studio.is-menu-open .bp-menu-toggle span:nth-child(1) {
    transform: translateY(6px) rotate(42deg);
  }

  /* 補足: メニュー展開時に中央の線を非表示にします。 */
  .ballet-pages-studio.is-menu-open .bp-menu-toggle span:nth-child(2) {
    opacity: 0;
  }

  /* 補足: メニュー展開時に下の線を閉じるアイコンへ変形します。 */
  .ballet-pages-studio.is-menu-open .bp-menu-toggle span:nth-child(3) {
    transform: translateY(-6px) rotate(-42deg);
  }

  /* 補足: 教室ページ内ナビゲーションの並びを整えます。 */
  .bp-studio-nav nav {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
    align-content: start;
    width: 100vw;
    min-height: 100dvh;
    max-height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    min-width: 0;
    gap: 2px;
    padding: 74px 28px 34px;
    border: 0;
    border-radius: 0;
    background: color-mix(in srgb, var(--bp-paper), var(--bp-background) 34%);
    box-shadow: none;
    opacity: 0;
    pointer-events: none;
    transform: none;
    transition: opacity 0.24s ease;
  }

  /* 補足: 管理バー表示時のスマホメニュー位置を固定ヘッダーに合わせます。 */
  .admin-bar .bp-studio-nav nav {
    inset: 0;
    min-height: 100dvh;
    max-height: 100dvh;
    padding-top: 74px;
  }

  /* 補足: スマホメニュー展開時にナビゲーションを表示します。 */
  .ballet-pages-studio.is-menu-open .bp-studio-nav nav {
    opacity: 1;
    pointer-events: auto;
  }

  /* 補足: ナビゲーションリンクの文字組みと配置を整えます。 */
  .bp-studio-nav nav a {
    display: flex;
    flex-direction: row;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    justify-self: stretch;
    align-items: center;
    gap: 14px;
    padding: 15px 16px;
    border-bottom: 1px solid var(--bp-line);
    border-radius: 0;
    background: transparent;
    text-align: left;
    transition:
      background 0.2s ease,
      color 0.2s ease,
      padding-left 0.2s ease;
  }

  /* 補足: ハンバーガーメニュー内ではPhosphorアイコンをメニュー先頭に表示します。 */
  .bp-studio-nav nav .bp-nav-icon {
    display: inline-flex;
    flex: 0 0 24px;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: currentColor;
  }

  /* 補足: ハンバーガーメニュー内のSVGアイコンサイズを揃えます。 */
  .bp-studio-nav nav .bp-nav-icon svg {
    display: block;
    width: 22px;
    height: 22px;
  }

  /* 補足: ハンバーガーメニュー内の文字ブロックを縦に整えます。 */
  .bp-studio-nav nav .bp-nav-label {
    min-width: 0;
    justify-items: start;
    text-align: left;
  }

  /* 補足: スマホメニューのホバー時に文字色と位置で操作感を出します。 */
  .bp-studio-nav nav a:hover,
  .bp-studio-nav nav a:focus-visible {
    padding-left: 20px;
    background: var(--bp-tint);
    color: var(--bp-accent-dark);
  }

  /* 補足: スマホメニュー内のお問い合わせ項目を横幅いっぱいのボタン風にします。 */
  .bp-studio-nav nav a.bp-nav-contact {
    margin-top: 8px;
    padding: 17px 18px;
    border: 1px solid
      color-mix(in srgb, var(--bp-accent-dark), var(--bp-paper) 14%);
    border-bottom: 1px solid
      color-mix(in srgb, var(--bp-accent-dark), var(--bp-ink) 12%);
    border-radius: var(--bp-radius-button);
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--bp-accent-dark), var(--bp-paper) 12%),
      var(--bp-accent-dark)
    );
    box-shadow: 0 14px 32px
      color-mix(in srgb, var(--bp-accent-dark), transparent 84%);
    color: var(--bp-on-accent);
  }

  /* 補足: スマホのお問い合わせ項目のホバー時も変数色で反応を出します。 */
  .bp-studio-nav nav a.bp-nav-contact:hover,
  .bp-studio-nav nav a.bp-nav-contact:focus-visible {
    padding-left: 22px;
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--bp-ink), var(--bp-paper) 10%),
      var(--bp-ink)
    );
    color: var(--bp-on-accent);
  }

  /* 補足: スマホメニューではホバー下線を非表示にします。 */
  .bp-studio-nav nav a::after {
    display: none;
  }

  /* 補足: スマホメニュー最後の項目は下線を外します。 */
  .bp-studio-nav nav a:last-child {
    border-bottom: 0;
  }

  /* 補足: スマホメニューの英語名を読みやすいサイズにします。 */
  .bp-studio-nav nav .bp-nav-label > span {
    font-family: var(--bp-heading-font);
    font-size: 1rem;
    font-weight: 600;
  }

  /* 補足: スマホメニューの日本語名を英語名の下に添えます。 */
  .bp-studio-nav nav small {
    font-family: var(--bp-body-font);
    font-size: 0.72rem;
    font-weight: 600;
  }

  /* 補足: ファーストビューとなるヒーローエリアを定義します。 */
  .bp-hero {
    height: 640px;
    min-height: 640px;
    place-items: end start;
  }

  /* 補足: ヒーロー画像の上に文字を読みやすくするオーバーレイを重ねます。 */
  .bp-hero::after {
    background: linear-gradient(
      0deg,
      var(--bp-hero-scrim-mobile-start),
      var(--bp-hero-scrim-mobile-end) 72%
    );
  }

  /* 補足: ヒーロー内のロゴ、タイトル、ボタンの配置を整えます。 */
  .bp-hero-content {
    width: calc(100% - 40px);
    padding: 54px 0 48px;
  }

  /* 補足: ヒーローの教室名タイトルを大きく印象的に表示します。 */
  .bp-hero h1 {
    font-size: clamp(2.35rem, 12vw, 3.6rem);
  }

  /* 補足: ヒーローのキャッチコピーを読みやすく整えます。 */
  .bp-catch {
    margin-top: 20px;
    font-size: 0.92rem;
    line-height: 1.85;
  }

  /* 補足: ファーストビューとなるヒーローエリアを定義します。 */
  .bp-hero-actions {
    gap: 10px;
    margin-top: 30px;
  }

  /* 補足: ファーストビューとなるヒーローエリアを定義します。 */
  .bp-hero-actions .bp-button {
    min-width: 0;
    padding: 0 20px;
  }

  /* 補足: 公開ページ各セクションの余白と背景リズムを定義します。 */
  .bp-section,
  .bp-section:nth-of-type(odd),
  .bp-intro,
  .bp-gallery-section,
  .bp-access-section,
  .bp-teachers-section,
  .bp-news-section,
  .bp-faq-section,
  .bp-classes-section,
  .bp-schedule-section,
  .bp-price-section {
    scroll-margin-top: 88px;
    padding: 76px 0;
  }

  /* 補足: 各セクション内側の最大幅と中央寄せを管理します。 */
  .bp-section-inner,
  .bp-cta .bp-section-inner {
    width: min(100% - 36px, 1160px);
  }

  /* 補足: スマホのNewsは専用幅を保ち、左右の余白を少し広めにします。 */
  .bp-news-section .bp-section-inner {
    width: min(100% - 32px, 1120px);
  }

  /* 補足: 各セクションの見出しブロックを整えます。 */
  .bp-section-head {
    margin-bottom: 40px;
  }

  /* 補足: 各セクション見出し上の日本語ラベルをスマホ向けに整えます。 */
  .bp-section-head p {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
  }

  /* 補足: 各セクション見出しの英語タイトルをスマホ向けに整えます。 */
  .bp-section-head h1,
  .bp-section-head h2 {
    font-size: 2.75rem;
  }

  /* 補足: 管理画面のお知らせ行はスマホで1列にします。 */
  .bp-notice-layout,
  .bp-notice-admin-row {
    grid-template-columns: 1fr;
  }

  /* 補足: スマホのお知らせ一覧は区切り線を活かしたコンパクトな行にします。 */
  .bp-news-item {
    padding: 0;
  }

  /* 補足: スマホのNewsは画像なしの文字リストとして読みやすくします。 */
  .bp-news-link {
    min-height: 64px;
    padding: 8px 45px 8px 16px;
  }

  .bp-news-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .bp-news-text time {
    font-size: 0.63rem;
    line-height: 1.4;
    letter-spacing: 0.07em;
  }

  .bp-news-title {
    font-size: 0.88rem;
    line-height: 1.55;
  }

  .bp-news-excerpt {
    display: -webkit-box;
    font-size: 0.7rem;
    line-height: 1.55;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }

  .bp-news-link::after {
    right: 16px;
    width: 20px;
    height: 6px;
  }

  .bp-news-link:hover::after {
    right: 13px;
    width: 24px;
  }

  /* 補足: スマホではお知らせ本文画像を1列で表示します。 */
  .bp-news-content-images {
    grid-template-columns: 1fr;
  }

  /* 補足: スマホではNewsの横移動量を抑えます。 */
  .bp-news-link:hover .bp-news-text time {
    transform: none;
  }

  .bp-news-link:hover .bp-news-title,
  .bp-news-link:hover .bp-news-excerpt {
    transform: translateX(2px);
  }

  /* 補足: スマホのお知らせ管理一覧サムネイルを横幅いっぱいにします。 */
  .bp-notice-admin-thumb {
    width: 100%;
  }

  /* 補足: スマホではお知らせ管理の絞り込みフォームを縦に並べます。 */
  .bp-notice-filter {
    grid-template-columns: 1fr;
  }

  /* 補足: スマホではFeaturesカードを1列にし、アーチ型の写真を保ちます。 */
  .bp-features-section {
    padding-block: 65px;
  }

  /* 補足: スマホではFeaturesの内側幅を画面に合わせます。 */
  .bp-features-section .bp-section-inner {
    width: calc(100% - 40px);
    max-width: none;
  }

  /* 補足: スマホではFeaturesを1列でゆったり読み進められる間隔にします。 */
  .bp-features-section .bp-feature-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 52px;
  }

  /* 補足: スマホではFeaturesカードが横に広がりすぎないよう中央に置きます。 */
  .bp-features-section .bp-feature {
    width: min(360px, 100%);
    margin-inline: auto;
  }

  /* 補足: スマホでは講師紹介を1列にし、写真は最大190pxに抑えます。 */
  .bp-teachers-section {
    padding-block: 65px;
  }

  .bp-teachers-section .bp-section-inner {
    width: calc(100% - 32px);
    max-width: none;
  }

  .bp-teachers-section .bp-instructor,
  .bp-teachers-section .bp-card.bp-instructor {
    grid-template-columns: minmax(0, 1fr);
    gap: 25px;
    padding: 32px 4px 50px;
  }

  .bp-teachers-section .bp-instructor::after {
    content: none;
  }

  .bp-teachers-section .bp-instructor img {
    width: min(190px, 58%);
    max-width: 190px;
    max-height: none;
    margin-inline: auto;
  }

  .bp-teachers-section .bp-instructor-body {
    padding: 0;
  }

  .bp-teachers-section .bp-instructor h3,
  .bp-teachers-section .bp-instructor .bp-instructor-body h3 {
    font-size: 1.31rem;
  }

  .bp-teachers-section .bp-instructor .bp-muted {
    margin-bottom: 21px;
    font-size: 0.75rem;
  }

  /* 補足: スマホではスケジュール表を横スクロール前提の幅にします。 */
  .bp-schedule-table {
    min-width: max(680px, 170vw);
  }

  /* 補足: スマホのスケジュール表セルを読みやすい余白にします。 */
  .bp-schedule-table th,
  .bp-schedule-table td {
    padding-right: 12px;
    padding-left: 12px;
  }

  /* 補足: 料金項目を罫線付きグリッドで並べます。 */
  .bp-fees,
  .bp-form-grid {
    grid-template-columns: 1fr;
  }

  /* 補足: 料金カード1項目分の余白と背景をスマホ向けに整えます。 */
  .bp-fee-item {
    min-height: 0;
    padding: 24px;
  }

  /* 補足: スマホでは写真ギャラリーを2列で配置します。 */
  .bp-gallery {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 補足: スマホのギャラリーも同じサイズの画像を2列で並べます。 */
  .bp-gallery img {
    aspect-ratio: 1;
  }

  /* 補足: スマホのライトボックス余白とボタンサイズを調整します。 */
  .bp-gallery-lightbox {
    padding: 64px 18px;
  }

  /* 補足: スマホのライトボックス画像を画面内に収めます。 */
  .bp-gallery-lightbox img {
    max-height: calc(100vh - 128px);
  }

  /* 補足: スマホのライトボックス操作ボタンを押しやすく整えます。 */
  .bp-gallery-lightbox button {
    width: 42px;
    height: 42px;
    font-size: 1.65rem;
  }

  /* 補足: スマホのライトボックス閉じるボタン位置を調整します。 */
  .bp-gallery-lightbox-close {
    top: 14px;
    right: 14px;
  }

  /* 補足: スマホのライトボックス前へボタン位置を調整します。 */
  .bp-gallery-lightbox-prev {
    left: 10px;
  }

  /* 補足: スマホのライトボックス次へボタン位置を調整します。 */
  .bp-gallery-lightbox-next {
    right: 10px;
  }

  /* 補足: ボタン群の横並びと折り返しを管理します。 */
  .bp-actions .bp-button {
    width: 100%;
  }

  /* 補足: 管理画面上部のタイトルと操作リンクを左右に配置します。 */
  .bp-dashboard-head {
    display: grid;
  }

  /* 補足: お知らせ管理一覧の操作リンクを右寄せで並べます。 */
  .bp-notice-admin-actions {
    justify-content: flex-start;
  }

  /* 補足: 認証画面と管理画面の操作ボタン群を整えます。 */
  .bp-save-bar {
    bottom: 8px;
    gap: 8px;
    padding: 10px;
  }

  /* 補足: スマホ時の保存バー内ボタンを折り返しやすくします。 */
  .bp-save-bar .bp-button,
  .bp-save-bar button {
    flex: 1 1 128px;
    min-width: 0;
    padding-inline: 12px;
  }

  /* 補足: スマホではフッターの横幅と余白を画面に合わせます。 */
  .bp-footer-inner {
    width: min(100% - 40px, 560px);
    gap: 22px;
  }

  /* 補足: スマホのフッターメニューを2列で見やすく並べます。 */
  .bp-footer-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 14px;
    padding: 18px 0;
  }

  /* 補足: スマホのフッターメニューリンクのタップ領域を確保します。 */
  .bp-footer-menu a {
    min-height: 52px;
  }

  /* 補足: スマホではフッタークレジットを左寄せにします。 */
  .bp-footer-bottom {
    justify-content: flex-start;
  }

  /* 補足: オーナー向け固定編集ボタンを画面右下に配置します。 */
  .bp-owner-edit-button {
    right: 12px;
    bottom: 12px;
    min-height: 42px;
    padding: 0 14px;
  }
}

/** ========================================================================
 * 06 Teacher Dashboard Visual Layer
 * ------------------------------------------------------------------------
 * 教室ごとの公開テーマから独立した、先生向け管理画面の最終スタイルです。
 * 機能用のID・data属性・フォーム構造は変更せず、このシェル内だけで上書きします。
 * ======================================================================== */

html:has(body.ballet-pages-management-page) {
  margin: 0;
  background: #fff9fb;
}

body.ballet-pages-management-page {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background: #fff9fb;
}

body.ballet-pages-management-page .bp-management-app {
  display: grid;
  align-items: start;
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: clamp(18px, 3vw, 40px) 0;
}

body.ballet-pages-management-page
  .bp-management-app
  > :is(
    .ballet-pages-dashboard-shell,
    .ballet-pages-account-gate,
    .ballet-pages-auth,
    .ballet-pages-notice
  ) {
  align-self: start;
}

.ballet-pages-dashboard-shell {
  /* Brand palette: image-inspired pink; darker action color for readable controls. */
  --admin-main: #e294a5;
  --admin-main-dark: #b83d60;
  --admin-main-soft: #fbe5ec;
  --admin-main-pale: #fff5f7;
  --admin-sidebar: #fcecef;
  --admin-brand-text: #713f4c;
  --admin-bg: #fff9fb;
  --admin-surface: #fff;
  --admin-surface-soft: #fff5f7;
  --admin-text: #302a2e;
  --admin-heading: #302a2e;
  --admin-muted: #766c73;
  --admin-light: #766c73;
  --admin-border: #f1dce3;
  --admin-border-strong: #e8bfc9;
  --admin-success: #39734c;
  --admin-success-soft: #edf7ef;
  --admin-danger: #bd4058;
  --admin-danger-soft: #fff0f3;
  --admin-radius-sm: 9px;
  --admin-radius-md: 12px;
  --admin-radius-lg: 18px;
  position: relative;
  width: min(1380px, calc(100% - 40px));
  max-width: 1380px;
  margin-inline: auto;
  padding: 0;
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-lg);
  background: var(--admin-bg);
  box-shadow:
    0 1px 2px rgba(46, 37, 42, 0.025),
    0 10px 35px rgba(46, 37, 42, 0.055);
  color: var(--admin-text);
  font-family:
    "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", YuGothic,
    Meiryo, sans-serif;
  overflow: clip;
}

.ballet-pages-dashboard-shell *,
.ballet-pages-dashboard-shell *::before,
.ballet-pages-dashboard-shell *::after {
  box-sizing: border-box;
}

.ballet-pages-dashboard-shell :is(h2, h3, h4, p) {
  margin-top: 0;
  font-family: inherit;
}

.ballet-pages-dashboard-shell :is(h2, h3, h4)::before,
.ballet-pages-dashboard-shell :is(h2, h3, h4)::after {
  display: none;
  content: none;
}

.ballet-pages-dashboard-shell :is(button, input, textarea, select) {
  font: inherit;
}

/* Profile */
.ballet-pages-dashboard-shell .bp-dashboard-head {
  position: relative;
  min-height: 150px;
  border: 0;
  background-position: center;
  background-size: cover;
  overflow: hidden;
}

.ballet-pages-dashboard-shell .bp-dashboard-identity-shade {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 26px 32px;
  background: linear-gradient(
    90deg,
    rgba(36, 29, 33, 0.8),
    rgba(36, 29, 33, 0.55) 52%,
    rgba(36, 29, 33, 0.22)
  );
}

.ballet-pages-dashboard-shell .bp-dashboard-profile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 17px;
  width: 100%;
}

.ballet-pages-dashboard-shell .bp-dashboard-avatar {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 3px solid rgba(255, 255, 255, 0.88);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.14);
  overflow: hidden;
}

.ballet-pages-dashboard-shell .bp-dashboard-avatar img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.ballet-pages-dashboard-shell .bp-dashboard-profile-text {
  min-width: 0;
}

.ballet-pages-dashboard-shell .bp-kicker {
  margin: 0 0 5px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.ballet-pages-dashboard-shell .bp-dashboard-profile-text h2 {
  margin: 0;
  padding: 0;
  border: 0;
  color: #fff;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.025em;
}

.ballet-pages-dashboard-shell .bp-dashboard-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 15px;
  margin-top: 7px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 10px;
}

.ballet-pages-dashboard-shell .bp-dashboard-view-site {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  backdrop-filter: blur(9px);
  transition:
    background-color 0.25s ease,
    transform 0.25s ease;
}

.ballet-pages-dashboard-shell .bp-dashboard-view-site::after {
  content: none;
}

.ballet-pages-dashboard-shell .bp-dashboard-view-site:hover {
  background: rgba(255, 255, 255, 0.24);
  color: #fff;
  transform: translateY(-1px);
}

/* Sidebar and workspace */
.ballet-pages-dashboard-shell .bp-admin-shell {
  display: grid;
  grid-template-columns: 226px minmax(0, 1fr);
  align-items: stretch;
  min-height: 700px;
  isolation: isolate;
}

.ballet-pages-dashboard-shell .bp-dashboard-menu {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 27px 17px;
  border: 0;
  border-right: 1px solid var(--admin-border);
  background: var(--admin-surface);
  pointer-events: auto;
}

.ballet-pages-dashboard-shell .bp-dashboard-menu a {
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

.ballet-pages-dashboard-shell .bp-dashboard-menu::before {
  content: "BALLET PAGES";
  display: block;
  margin: 1px 12px 30px;
  color: var(--admin-main);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.17em;
}

.ballet-pages-dashboard-shell .bp-dashboard-menu-group {
  margin: 0 0 26px;
}

.ballet-pages-dashboard-shell .bp-dashboard-menu-group > p {
  margin: 0 12px 9px;
  color: var(--admin-light);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.ballet-pages-dashboard-shell
  .bp-dashboard-menu-group
  > a.bp-dashboard-menu-heading {
  min-height: 34px;
  margin: 0 0 4px;
  padding: 6px 12px;
  color: var(--admin-heading);
  font-size: 12px;
  font-weight: 700;
}

.ballet-pages-dashboard-shell
  .bp-dashboard-menu-group
  > a.bp-dashboard-menu-heading::after {
  margin-left: auto;
  color: var(--admin-light);
  font-size: 14px;
  font-weight: 400;
  content: "\203A";
}

.ballet-pages-dashboard-shell .bp-dashboard-menu-group > a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 42px;
  margin: 2px 0;
  padding: 9px 13px 9px 16px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--admin-muted);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.ballet-pages-dashboard-shell .bp-dashboard-menu-group > a::before {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--admin-main);
  content: "";
  opacity: 0;
  transform: scaleY(0.35);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.ballet-pages-dashboard-shell .bp-dashboard-menu-group > a:hover {
  background: var(--admin-main-pale);
  color: var(--admin-heading);
  transform: translateX(2px);
}

.ballet-pages-dashboard-shell .bp-dashboard-menu-group > a.is-active {
  background: var(--admin-main-soft);
  color: var(--admin-main-dark);
  font-weight: 600;
}

.ballet-pages-dashboard-shell .bp-dashboard-menu-group > a.is-active::before {
  opacity: 1;
  transform: scaleY(1);
}

.ballet-pages-dashboard-shell .bp-dashboard-menu-group .bp-dashboard-submenu {
  min-height: 38px;
  margin-left: 12px;
  padding-left: 16px;
  font-size: 11px;
}

/* Theme and WordPress link colors must not leak into management screens. */
.ballet-pages-dashboard-shell a:not(.bp-dashboard-view-site) {
  color: var(--admin-main-dark);
}

.ballet-pages-dashboard-shell a:not(.bp-dashboard-view-site):hover {
  color: var(--admin-heading);
}

.ballet-pages-dashboard-shell
  :is(.bp-button, button):not(.bp-dashboard-section-toggle):not(
    .bp-dashboard-section-state-button
  ):not(.bp-remove-row):not(.bp-schedule-remove) {
  border-color: var(--admin-border-strong);
}

.ballet-pages-dashboard-shell .bp-dashboard-menu-system {
  margin-top: auto;
  margin-bottom: 0;
  padding-top: 20px;
  border-top: 1px solid var(--admin-border);
}

.ballet-pages-dashboard-shell .bp-dashboard-main {
  position: relative;
  z-index: 1;
  min-width: 0;
  width: 100%;
  margin: 0;
  padding: clamp(24px, 3.5vw, 45px);
  background: #fff;
}

/* Account, notice list and notice editor share the dashboard workspace. */
.ballet-pages-dashboard-shell .bp-notice-layout {
  position: relative;
  z-index: 1;
  display: block;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: clamp(24px, 3.5vw, 45px);
  background: var(--admin-bg);
  overflow: visible;
}

.ballet-pages-dashboard-shell .bp-account-settings > .bp-dashboard-section,
.ballet-pages-dashboard-shell .bp-notice-layout > .bp-dashboard-section {
  padding: clamp(22px, 3vw, 32px);
}

.ballet-pages-dashboard-shell .bp-account-settings > .bp-dashboard-section > h3,
.ballet-pages-dashboard-shell .bp-notice-layout > .bp-dashboard-section > h3 {
  margin: 0 0 24px;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--admin-border);
  color: var(--admin-heading);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
}

.ballet-pages-dashboard-shell
  .bp-account-settings
  > .bp-dashboard-section
  > h3 {
  display: flex;
  align-items: baseline;
  gap: 8px 12px;
  flex-wrap: wrap;
}

.ballet-pages-dashboard-shell
  .bp-account-settings
  > .bp-dashboard-section
  > h3
  small {
  order: 1;
  color: var(--admin-heading);
  font-size: 18px;
  font-weight: 600;
}

.ballet-pages-dashboard-shell
  .bp-account-settings
  > .bp-dashboard-section
  > h3
  span {
  order: 2;
  color: var(--admin-light);
  font-size: 11px;
  font-weight: 500;
}

.ballet-pages-dashboard-shell > .ballet-pages-notice {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 13px 24px;
  border: 0;
  border-bottom: 1px solid var(--admin-border);
  border-left: 4px solid var(--admin-success);
  border-radius: 0;
  background: var(--admin-success-soft);
  color: var(--admin-text);
  font-family: inherit;
  font-size: 13px;
}

.ballet-pages-dashboard-shell > .ballet-pages-notice.ballet-pages-error {
  border-left-color: var(--admin-danger);
  background: var(--admin-danger-soft);
}

.ballet-pages-dashboard-shell .bp-notice-editor form {
  display: grid;
  gap: 20px;
  min-width: 0;
}

.ballet-pages-dashboard-shell .bp-notice-datetime-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
}

.ballet-pages-dashboard-shell .bp-notice-now-cell {
  display: grid;
  align-content: end;
}

.ballet-pages-dashboard-shell .bp-notice-rich-editor {
  display: grid;
  gap: 10px;
}

.ballet-pages-dashboard-shell .bp-notice-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ballet-pages-dashboard-shell .bp-notice-image-button,
.ballet-pages-dashboard-shell .bp-notice-now-cell button,
.ballet-pages-dashboard-shell .bp-notice-filter button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 9px 16px;
  border: 1px solid
    color-mix(in srgb, var(--admin-main) 42%, var(--admin-border));
  border-radius: 999px;
  background: #fff;
  color: var(--admin-main-dark);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.ballet-pages-dashboard-shell .bp-notice-filter {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(140px, 0.4fr) auto;
  gap: 10px;
  margin: 0 0 20px;
}

.ballet-pages-dashboard-shell .bp-notice-filter input[type="search"] {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 11px 13px;
  border: 1px solid var(--admin-border-strong);
  border-radius: var(--admin-radius-sm);
  background: #fff;
  color: var(--admin-text);
  font-family: inherit;
}

.ballet-pages-dashboard-shell .bp-notice-admin-list {
  display: grid;
  gap: 10px;
}

.ballet-pages-dashboard-shell .bp-notice-admin-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-md);
  background: var(--admin-surface-soft);
  box-shadow: none;
}

.ballet-pages-dashboard-shell
  .bp-notice-admin-row:not(:has(.bp-notice-admin-thumb)) {
  grid-template-columns: minmax(0, 1fr) auto;
}

.ballet-pages-dashboard-shell .bp-notice-admin-thumb {
  width: 72px;
  aspect-ratio: 16 / 9;
  border-radius: 7px;
  object-fit: cover;
}

.ballet-pages-dashboard-shell .bp-notice-admin-row :is(time, span) {
  display: inline-block;
  margin-bottom: 5px;
  color: var(--admin-muted);
  font-size: 11px;
}

.ballet-pages-dashboard-shell .bp-notice-admin-row h4 {
  margin: 0;
  color: var(--admin-heading);
  font-size: 15px;
  font-weight: 600;
}

.ballet-pages-dashboard-shell .bp-notice-admin-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.ballet-pages-dashboard-shell .bp-notice-admin-actions form {
  margin: 0;
}

.ballet-pages-dashboard-shell .bp-notice-admin-actions :is(a, button),
.ballet-pages-dashboard-shell .bp-save-bar a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid var(--admin-border-strong);
  border-radius: 999px;
  background: #fff;
  color: var(--admin-main-dark);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.ballet-pages-dashboard-shell .bp-notice-admin-actions button,
.ballet-pages-dashboard-shell .bp-save-bar .bp-delete-button {
  border-color: color-mix(
    in srgb,
    var(--admin-danger) 28%,
    var(--admin-border)
  );
  background: #fff;
  color: var(--admin-danger);
}

.ballet-pages-dashboard-shell .bp-dashboard-section-manager,
.ballet-pages-dashboard-shell .bp-dashboard-section-zone {
  display: grid;
  gap: 11px;
}

.ballet-pages-dashboard-shell .bp-dashboard-zone-head {
  display: grid;
  gap: 5px;
  margin: 12px 0 14px;
  padding-inline: 2px;
}

.ballet-pages-dashboard-shell .bp-dashboard-zone-head strong {
  color: var(--admin-heading);
  font-size: 16px;
  font-weight: 600;
}

.ballet-pages-dashboard-shell .bp-dashboard-zone-head span {
  color: var(--admin-muted);
  font-size: 11px;
}

/* Accordion */
.ballet-pages-dashboard-shell .bp-dashboard-section {
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0 0 11px;
  padding: 0;
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-md);
  background: var(--admin-surface);
  box-shadow: 0 1px 2px rgba(47, 37, 42, 0.025);
  overflow: hidden;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.ballet-pages-dashboard-shell .bp-dashboard-section:hover {
  border-color: var(--admin-border-strong);
  box-shadow: 0 5px 18px rgba(47, 37, 42, 0.04);
}

.ballet-pages-dashboard-shell .bp-dashboard-section:not(.is-collapsed) {
  border-color: color-mix(in srgb, var(--admin-main) 36%, var(--admin-border));
  box-shadow: 0 7px 25px rgba(82, 57, 67, 0.055);
}

.ballet-pages-dashboard-shell .bp-dashboard-section-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  min-height: 72px;
  margin: 0;
  padding: 15px 150px 15px 21px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--admin-text);
  text-align: left;
  cursor: pointer;
}

.ballet-pages-dashboard-shell
  .bp-dashboard-section:not([data-dashboard-managed-section])
  .bp-dashboard-section-toggle {
  padding-right: 60px;
}

.ballet-pages-dashboard-shell .bp-dashboard-section-toggle:hover {
  background: var(--admin-main-pale);
}

.ballet-pages-dashboard-shell .bp-dashboard-section-toggle h3 {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px 13px;
  margin: 0;
  padding: 0;
  border: 0;
  line-height: 1.4;
}

.ballet-pages-dashboard-shell .bp-dashboard-section-toggle h3 span {
  order: 2;
  color: var(--admin-light);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.ballet-pages-dashboard-shell .bp-dashboard-section-toggle h3 small {
  order: 1;
  color: var(--admin-heading);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.025em;
}

.ballet-pages-dashboard-shell .bp-dashboard-section-indicator {
  position: absolute;
  top: 23px;
  right: 22px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--admin-border-strong);
  border-radius: 50%;
  background: #fff;
  color: var(--admin-main);
  font-size: 0;
  transition:
    transform 0.3s ease,
    background-color 0.3s ease;
}

.ballet-pages-dashboard-shell .bp-dashboard-section-indicator::before,
.ballet-pages-dashboard-shell .bp-dashboard-section-indicator::after {
  position: absolute;
  width: 10px;
  height: 1px;
  background: currentColor;
  content: "";
}

.ballet-pages-dashboard-shell .bp-dashboard-section-indicator::after {
  transform: rotate(90deg);
}

.ballet-pages-dashboard-shell
  .bp-dashboard-section:not(.is-collapsed)
  .bp-dashboard-section-indicator {
  border-color: var(--admin-main);
  background: var(--admin-main);
  color: #fff;
  transform: rotate(45deg);
}

.ballet-pages-dashboard-shell .bp-dashboard-section-state-button {
  position: absolute;
  z-index: 3;
  top: 20px;
  right: 61px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 76px;
  min-height: 31px;
  margin: 0;
  padding: 6px 11px;
  border: 1px solid var(--admin-border);
  border-radius: 999px;
  background: #f3f1f2;
  color: var(--admin-muted);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
}

.ballet-pages-dashboard-shell .bp-dashboard-section-state-button::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--admin-light);
  box-shadow: none;
  content: "";
}

.ballet-pages-dashboard-shell
  .bp-dashboard-section.is-enabled
  .bp-dashboard-section-state-button {
  border-color: color-mix(in srgb, var(--admin-success) 30%, transparent);
  background: var(--admin-success-soft);
  color: var(--admin-success);
}

.ballet-pages-dashboard-shell
  .bp-dashboard-section.is-enabled
  .bp-dashboard-section-state-button::before {
  background: var(--admin-success);
}

.ballet-pages-dashboard-shell .bp-dashboard-section-state-button::after {
  display: none;
  content: none;
}

.ballet-pages-dashboard-shell .bp-dashboard-section-content {
  width: 100%;
  min-width: 0;
  padding: 8px clamp(20px, 3vw, 32px) 31px;
  border-top: 1px solid var(--admin-border);
  background: var(--admin-surface);
}

.ballet-pages-dashboard-shell .bp-dashboard-section-content[hidden] {
  display: none !important;
}

/* Forms */
.ballet-pages-dashboard-shell .bp-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 20px;
  width: 100%;
  margin-top: 22px;
}

.ballet-pages-dashboard-shell .bp-form-stack {
  display: grid;
  gap: 22px;
  margin-top: 22px;
}

.ballet-pages-dashboard-shell :is(.bp-form-grid, .bp-form-stack) > p {
  min-width: 0;
  margin: 0;
  padding: 0;
}

.ballet-pages-dashboard-shell .bp-form-wide {
  grid-column: 1 / -1;
}

.ballet-pages-dashboard-shell label {
  display: block;
  margin: 0 0 8px;
  color: var(--admin-heading);
  font-size: 12px;
  font-weight: 600;
}

.ballet-pages-dashboard-shell .bp-field-hint {
  margin: -2px 0 9px;
  color: var(--admin-muted);
  font-size: 10px;
  line-height: 1.65;
}

.ballet-pages-dashboard-shell
  :is(
    input[type="text"],
    input[type="url"],
    input[type="email"],
    input[type="number"],
    input[type="time"],
    input[type="date"],
    input[type="tel"],
    input[type="password"],
    textarea,
    select
  ) {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 11px 13px;
  border: 1px solid var(--admin-border-strong);
  border-radius: var(--admin-radius-sm);
  outline: 0;
  background: #fff;
  color: var(--admin-text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  box-shadow: inset 0 1px 2px rgba(47, 38, 43, 0.02);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.ballet-pages-dashboard-shell
  :is(
    input[type="text"],
    input[type="url"],
    input[type="email"],
    input[type="number"],
    input[type="time"],
    input[type="date"],
    input[type="tel"],
    input[type="password"],
    select
  ) {
  min-height: 46px;
}

.ballet-pages-dashboard-shell textarea {
  min-height: 148px;
  overflow: auto;
  resize: vertical;
}

.ballet-pages-dashboard-shell
  :is(.bp-form-wide, .bp-form-field, .bp-repeater-item)
  textarea {
  min-height: 168px;
  resize: vertical;
}

.ballet-pages-dashboard-shell :is(input, textarea, select):focus {
  border-color: var(--admin-main);
  box-shadow: var(--bp-admin-focus);
}

.ballet-pages-dashboard-shell :is(input[type="checkbox"], input[type="radio"]) {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--admin-main);
}

.ballet-pages-dashboard-shell .bp-file-field {
  grid-column: 1 / -1;
  margin: 0;
  padding: 18px;
  border: 1px dashed
    color-mix(in srgb, var(--admin-main) 35%, var(--admin-border));
  border-radius: var(--admin-radius-md);
  background: var(--admin-main-pale);
}

.ballet-pages-dashboard-shell input[type="file"] {
  display: block;
  width: 100%;
  margin-top: 10px;
  color: var(--admin-muted);
  font-size: 11px;
}

.ballet-pages-dashboard-shell input[type="file"]::file-selector-button {
  min-height: 36px;
  margin-right: 12px;
  padding: 8px 14px;
  border: 1px solid var(--admin-border-strong);
  border-radius: 7px;
  background: #fff;
  color: var(--admin-main-dark);
  font-weight: 600;
  cursor: pointer;
}

/* Repeaters and specialist editors */
.ballet-pages-dashboard-shell
  :is(
    .bp-repeater-items,
    .bp-fixed-features,
    .bp-fee-editor,
    .bp-fee-editor-groups
  ) {
  display: grid;
  gap: 15px;
  margin-top: 22px;
}

.ballet-pages-dashboard-shell
  :is(.bp-repeater-item, .bp-fee-editor-group, .bp-schedule-column) {
  min-width: 0;
  margin: 0;
  padding: 19px;
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-md);
  background: var(--admin-surface-soft);
  box-shadow: none;
}

.ballet-pages-dashboard-shell
  :is(.bp-repeater-head, .bp-schedule-entry-head, .bp-fee-line-head) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ballet-pages-dashboard-shell .bp-repeater-head {
  margin: -3px 0 18px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--admin-border);
}

.ballet-pages-dashboard-shell :is(.bp-add-row, .bp-add-schedule-row) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  margin: 16px 0 0;
  padding: 9px 17px;
  border: 1px solid
    color-mix(in srgb, var(--admin-main) 45%, var(--admin-border));
  border-radius: 999px;
  background: #fff;
  color: var(--admin-main-dark);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.ballet-pages-dashboard-shell :is(.bp-remove-row, .bp-schedule-remove) {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--admin-border);
  border-radius: 50%;
  background: #fff;
  color: var(--admin-light);
  cursor: pointer;
}

.ballet-pages-dashboard-shell :is(.bp-remove-row, .bp-schedule-remove):hover {
  border-color: color-mix(
    in srgb,
    var(--admin-danger) 35%,
    var(--admin-border)
  );
  background: var(--admin-danger-soft);
  color: var(--admin-danger);
}

.ballet-pages-dashboard-shell .bp-schedule-grid-editor {
  display: grid;
  grid-template-columns: repeat(7, minmax(150px, 1fr));
  gap: 16px;
  width: 100%;
  margin-top: 22px;
  padding: 2px 2px 14px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

.ballet-pages-dashboard-shell
  :is(.bp-schedule-entry-list, .bp-fee-editor-lines) {
  display: grid;
  gap: 10px;
}

.ballet-pages-dashboard-shell :is(.bp-schedule-entry, .bp-fee-editor-line) {
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--admin-border);
  border-radius: 9px;
  background: #fff;
}

.ballet-pages-dashboard-shell .bp-color-picker {
  display: block;
  width: 100%;
  height: 47px;
  padding: 4px;
  border: 1px solid var(--admin-border-strong);
  border-radius: var(--admin-radius-sm);
  background: #fff;
  cursor: pointer;
}

/* Sticky actions */
.ballet-pages-dashboard-shell .bp-save-bar {
  position: sticky;
  z-index: 20;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  width: auto;
  max-width: none;
  margin: 30px calc(clamp(24px, 3.5vw, 45px) * -1)
    calc(clamp(24px, 3.5vw, 45px) * -1);
  padding: 15px clamp(24px, 3.5vw, 45px);
  border: 0;
  border-top: 1px solid var(--admin-border);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 -10px 30px rgba(47, 37, 42, 0.05);
  backdrop-filter: blur(12px);
}

.ballet-pages-dashboard-shell .bp-save-bar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin: 0;
  padding: 10px 19px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.ballet-pages-dashboard-shell
  .bp-save-bar
  button[type="submit"]:not(.bp-sample-button):not(.bp-reset-button) {
  min-width: 118px;
  background: var(--admin-main-dark);
  color: #fff;
  box-shadow: 0 6px 17px rgb(226 148 165 / 20%);
}

.ballet-pages-dashboard-shell .bp-save-bar .bp-sample-button {
  border-color: var(--admin-border-strong);
  background: #fff;
  color: var(--admin-muted);
}

.ballet-pages-dashboard-shell .bp-save-bar .bp-reset-button {
  background: transparent;
  color: var(--admin-danger);
}

.ballet-pages-dashboard-shell
  :is(button, a, input, select, textarea):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--admin-main) 65%, transparent);
  outline-offset: 3px;
}

@media (max-width: 1000px) {
  .ballet-pages-dashboard-shell {
    width: min(100% - 24px, 1380px);
  }

  .ballet-pages-dashboard-shell .bp-admin-shell {
    grid-template-columns: 190px minmax(0, 1fr);
  }

  .ballet-pages-dashboard-shell .bp-schedule-grid-editor {
    grid-template-columns: repeat(7, minmax(150px, 1fr));
  }
}

@media (max-width: 760px) {
  body.ballet-pages-management-page .bp-management-app {
    padding: 0 0 24px;
  }

  .ballet-pages-dashboard-shell {
    width: 100%;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .ballet-pages-dashboard-shell .bp-dashboard-head {
    min-height: 178px;
  }

  .ballet-pages-dashboard-shell .bp-dashboard-identity-shade {
    align-items: center;
    padding: 22px 18px;
  }

  .ballet-pages-dashboard-shell .bp-dashboard-profile {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 13px;
  }

  .ballet-pages-dashboard-shell .bp-dashboard-avatar {
    width: 48px;
    height: 48px;
  }

  .ballet-pages-dashboard-shell .bp-dashboard-view-site {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 39px;
  }

  .ballet-pages-dashboard-shell .bp-admin-shell {
    display: block;
  }

  .ballet-pages-dashboard-shell .bp-dashboard-menu {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    width: 100%;
    padding: 10px 12px;
    border-right: 0;
    border-bottom: 1px solid var(--admin-border);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .ballet-pages-dashboard-shell .bp-dashboard-menu::before,
  .ballet-pages-dashboard-shell .bp-dashboard-menu-group > p {
    display: none;
  }

  .ballet-pages-dashboard-shell .bp-dashboard-menu-group {
    display: contents;
  }

  .ballet-pages-dashboard-shell .bp-dashboard-menu-group > a {
    flex: 0 0 auto;
    min-height: 38px;
    margin: 0;
    padding: 8px 13px;
    border: 1px solid var(--admin-border);
    border-radius: 999px;
    background: #fff;
    font-size: 11px;
    white-space: nowrap;
  }

  .ballet-pages-dashboard-shell .bp-dashboard-menu-group > a::before {
    display: none;
  }

  .ballet-pages-dashboard-shell .bp-dashboard-main {
    padding: 20px 16px 0;
  }

  .ballet-pages-dashboard-shell .bp-notice-layout {
    padding: 20px 16px 0;
  }

  .ballet-pages-dashboard-shell .bp-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ballet-pages-dashboard-shell .bp-notice-datetime-grid,
  .ballet-pages-dashboard-shell .bp-notice-filter {
    grid-template-columns: minmax(0, 1fr);
  }

  .ballet-pages-dashboard-shell .bp-notice-filter button {
    width: 100%;
  }

  .ballet-pages-dashboard-shell .bp-notice-admin-row,
  .ballet-pages-dashboard-shell
    .bp-notice-admin-row:not(:has(.bp-notice-admin-thumb)) {
    grid-template-columns: minmax(0, 1fr);
  }

  .ballet-pages-dashboard-shell .bp-notice-admin-actions {
    justify-content: flex-start;
  }

  .ballet-pages-dashboard-shell .bp-form-wide {
    grid-column: auto;
  }

  .ballet-pages-dashboard-shell .bp-dashboard-section-toggle {
    min-height: 68px;
    padding: 13px 126px 13px 16px;
  }

  .ballet-pages-dashboard-shell .bp-dashboard-section-state-button {
    top: 18px;
    right: 51px;
    min-width: 67px;
    padding-inline: 9px;
  }

  .ballet-pages-dashboard-shell .bp-dashboard-section-indicator {
    top: 21px;
    right: 15px;
  }

  .ballet-pages-dashboard-shell
    :is(
      input[type="text"],
      input[type="url"],
      input[type="email"],
      input[type="number"],
      input[type="time"],
      input[type="date"],
      input[type="tel"],
      input[type="password"],
      textarea,
      select
    ) {
    font-size: 16px;
  }

  .ballet-pages-dashboard-shell textarea,
  .ballet-pages-dashboard-shell
    :is(.bp-form-wide, .bp-form-field, .bp-repeater-item)
    textarea {
    min-height: 190px;
  }

  .ballet-pages-dashboard-shell .bp-save-bar {
    justify-content: stretch;
    margin: 24px -16px 0;
    padding: 12px 16px max(12px, env(safe-area-inset-bottom));
  }

  .ballet-pages-dashboard-shell .bp-save-bar button {
    flex: 1 1 auto;
  }
}

@media (max-width: 420px) {
  .ballet-pages-dashboard-shell .bp-dashboard-section-toggle h3 {
    display: grid;
    gap: 2px;
  }

  .ballet-pages-dashboard-shell .bp-dashboard-section-toggle h3 small {
    font-size: 14px;
  }

  .ballet-pages-dashboard-shell
    :is(.bp-repeater-item, .bp-fee-editor-group, .bp-schedule-column) {
    padding: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ballet-pages-dashboard-shell *,
  .ballet-pages-dashboard-shell *::before,
  .ballet-pages-dashboard-shell *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/** ========================================================================
 * 07 Current Visual Layer
 * ------------------------------------------------------------------------
 * 現在の見た目を上書きする最終調整レイヤーです。デザイン完成後はここを整理して、共通/セクションCSSへ戻す対象です。
 * 旧分割時の名称: 90-public-refresh.css
 * ======================================================================== */

/* ================================================================
 * Public Studio Theme 2026
 * 補足: 公開ホームページ専用の最終デザイン層です。
 * 既存の設定色とフォントを使いながら、繊細で上品な見た目へ整えます。
 * ================================================================ */

/* 補足: 公開ページ専用の余白、線、影の最終トークンを定義します。 */
.ballet-pages-studio {
  --bp-studio-bg: color-mix(in srgb, var(--bp-background), var(--bp-white) 56%);
  --bp-studio-surface: var(--bp-background);
  --bp-studio-surface-strong: color-mix(
    in srgb,
    var(--bp-background),
    var(--bp-main) 8%
  );
  --bp-studio-hairline: color-mix(in srgb, var(--bp-main), var(--bp-ink) 14%);
  --bp-studio-hairline-soft: color-mix(
    in srgb,
    var(--bp-main),
    transparent 78%
  );
  --bp-studio-shadow: 0 18px 54px
    color-mix(in srgb, var(--bp-ink), transparent 94%);
  --bp-studio-shadow-soft: 0 10px 28px
    color-mix(in srgb, var(--bp-ink), transparent 96%);
  --bp-section-space: clamp(82px, 10vw, 148px);
  background: var(--bp-studio-bg);
}

/* 補足: 公開ページの主要セクションをゆったりした余白と細い線で統一します。 */
.ballet-pages-studio .bp-section {
  overflow: hidden;
  padding-block: var(--bp-section-space);
  border-top: 0;
  background: var(--bp-paper);
}

/* 補足: セクション背景の重いグラデーション装飾をなくして軽く見せます。 */
.ballet-pages-studio .bp-section::before {
  content: none;
}

/* 補足: Featuresだけはアーチカード用の背景と余白を最終デザイン層でも維持します。 */
.ballet-pages-studio .bp-features-section {
  padding-block: clamp(80px, 10vw, 140px);
  background: color-mix(in srgb, var(--bp-background) 88%, var(--bp-white));
  color: var(--bp-text);
}

/* 補足: 講師紹介はプロフィールリスト用の柔らかな背景を最終デザイン層でも維持します。 */
.ballet-pages-studio .bp-teachers-section {
  padding-block: clamp(80px, 10vw, 140px);
  background: linear-gradient(
    145deg,
    var(--bp-white) 0%,
    color-mix(in srgb, var(--bp-background) 88%, var(--bp-white)) 100%
  );
  color: var(--bp-text);
}

/* 補足: クラス紹介はアーチカタログ用の背景と余白を最終デザイン層でも維持します。 */
.ballet-pages-studio .bp-classes-section {
  padding-block: clamp(80px, 10vw, 140px);
  background: color-mix(in srgb, var(--bp-background) 78%, var(--bp-white));
  color: var(--bp-text);
}

/* 補足: 背景色指定のあるセクションも薄く上品な面として表示します。 */
.ballet-pages-studio .bp-intro,
.ballet-pages-studio .bp-faq-section,
.ballet-pages-studio .bp-gallery-section {
  background: var(--bp-studio-surface);
}

/* 補足: 料金とスケジュールは白地で情報を引き立てます。Accessは専用背景を使用します。 */
.ballet-pages-studio .bp-price-section,
.ballet-pages-studio .bp-schedule-section {
  background: var(--bp-paper);
}

/* 補足: 本文の行間と色を少し落ち着かせて読みやすくします。 */
.ballet-pages-studio .bp-richtext {
  color: var(--bp-muted-strong);
  font-size: 0.94rem;
  line-height: 1.95;
}

/* 補足: 固定ヘッダーを薄く軽いガラス面として表示します。 */
.ballet-pages-studio .bp-studio-nav {
  min-height: 76px;
  border-bottom: 1px solid color-mix(in srgb, var(--bp-ink), transparent 91%);
  background: color-mix(in srgb, var(--bp-paper), transparent 10%);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--bp-white), transparent 62%);
  backdrop-filter: blur(18px);
}

/* 補足: PCのメニュー間隔を抑え、右寄せでコンパクトに並べます。 */
@media (min-width: 721px) {
  .ballet-pages-studio .bp-studio-nav {
    gap: 24px;
    padding-inline: 32px;
  }

  /* 補足: 全セクションが有効でもメニューの余白が広がりすぎないようにします。 */
  .ballet-pages-studio .bp-studio-nav nav {
    gap: 8px;
    justify-content: flex-end;
  }
}

/* 補足: ナビゲーションの文字を中央揃えにして上品に整えます。 */
.ballet-pages-studio .bp-studio-nav nav a {
  min-width: 72px;
  padding: 8px 4px;
  color: var(--bp-muted-strong);
  text-align: center;
}

/* 補足: ナビゲーションの英語表記を少し大きく繊細に表示します。 */
.ballet-pages-studio .bp-studio-nav nav .bp-nav-label > span {
  font-size: 0.94rem;
  font-weight: 500;
}

/* 補足: ナビゲーションの日本語表記を補助情報として控えめに表示します。 */
.ballet-pages-studio .bp-studio-nav nav small {
  font-size: 0.64rem;
  font-weight: 600;
}

/* 補足: ナビゲーションホバー時は線ではなく色で反応させます。 */
.ballet-pages-studio .bp-studio-nav nav a:hover,
.ballet-pages-studio .bp-studio-nav nav a:focus-visible {
  color: var(--bp-accent-dark);
  transform: none;
}

/* 補足: お問い合わせメニューを細身の上品なボタンとして表示します。 */
.ballet-pages-studio .bp-studio-nav nav a.bp-nav-contact {
  min-width: 112px;
  padding: 10px 16px;
  border: 1px solid var(--bp-accent-dark);
  border-radius: var(--bp-radius-button);
  background: transparent;
  box-shadow: none;
  color: var(--bp-accent-dark);
}

/* 補足: お問い合わせメニューの装飾背景を消します。 */
.ballet-pages-studio .bp-studio-nav nav a.bp-nav-contact::before {
  content: none;
}

/* 補足: お問い合わせメニューのホバー時だけ反転してボタンらしく見せます。 */
.ballet-pages-studio .bp-studio-nav nav a.bp-nav-contact:hover,
.ballet-pages-studio .bp-studio-nav nav a.bp-nav-contact:focus-visible {
  border-color: var(--bp-accent-dark);
  background: var(--bp-accent-dark);
  box-shadow: none;
  color: var(--bp-on-accent);
}

/* 補足: ヒーローを写真が主役の静かなファーストビューに整えます。 */
.ballet-pages-studio .bp-hero {
  min-height: min(760px, calc(100svh - 76px));
  background: var(--bp-black);
}

/* 補足: ヒーロー画像の切り替わりを少しゆっくり上品に見せます。 */
.ballet-pages-studio .bp-hero-image {
  filter: none;
  transition: opacity 1.4s ease;
}

/* 補足: ヒーロー上の白黒グラデーションを控えめにして写真を邪魔しないようにします。 */
.ballet-pages-studio .bp-hero::after {
  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.52),
      rgba(0, 0, 0, 0.22) 46%,
      rgba(0, 0, 0, 0.04)
    ),
    linear-gradient(0deg, rgba(0, 0, 0, 0.28), transparent 44%);
}

/* 補足: ヒーロー本文を左下に寄せて雑誌的な余白を作ります。 */
.ballet-pages-studio .bp-hero-content {
  width: min(1160px, calc(100% - 64px));
  max-width: none;
  margin-inline: auto;
  padding: 100px 0 80px;
  justify-items: start;
  text-align: left;
}

/* 補足: ヒーローの教室名を細く大きく表示します。 */
.ballet-pages-studio .bp-hero h1 {
  max-width: 780px;
  font-size: 4.5rem;
  font-weight: 400;
  line-height: 1.25;
  text-wrap: balance;
}

/* 補足: ヒーローのキャッチコピーを読みやすい幅と濃度に整えます。 */
.ballet-pages-studio .bp-catch {
  max-width: 610px;
  margin-left: 0;
  color: color-mix(in srgb, var(--bp-on-hero), transparent 10%);
  font-size: 1rem;
  line-height: 2;
}

/* 補足: 共通ボタンを細身でプロっぽいピル型にします。 */
.ballet-pages-studio .bp-button {
  min-height: 46px;
  padding: 0 24px;
  border: 1px solid var(--bp-accent-dark);
  border-radius: var(--bp-radius-button);
  background: var(--bp-accent-dark);
  box-shadow: none;
  color: var(--bp-on-accent);
  font-weight: 700;
}

/* 補足: 共通ボタンのホバー時は軽く浮かせず色だけ変えます。 */
.ballet-pages-studio .bp-button:hover,
.ballet-pages-studio .bp-button:focus-visible {
  background: var(--bp-ink);
  box-shadow: none;
  transform: none;
}

/* 補足: サブボタンは背景を抜いて線で見せます。 */
.ballet-pages-studio .bp-button-secondary,
.ballet-pages-studio .bp-hero .bp-button-glass {
  background: transparent;
  color: var(--bp-accent-dark);
}

/* 補足: ヒーロー上のサブボタンは白い線で写真上でも読めるようにします。 */
.ballet-pages-studio .bp-hero .bp-button-glass {
  border-color: color-mix(in srgb, var(--bp-on-hero), transparent 42%);
  color: var(--bp-on-hero);
}

/* 補足: Newsは専用トークンの罫線リストとして最終レイヤーでも維持します。 */
.ballet-pages-studio .bp-news-list {
  gap: 0;
  border-top: 1px solid var(--bp-news-line);
}

/* 補足: News各行の区切り線はテーマカラー由来ではなく、文字色由来の細い線で落ち着かせます。 */
.ballet-pages-studio .bp-news-item {
  border-bottom: 1px solid var(--bp-news-line);
}

/* 補足: Newsリンクは上品な横長リストの余白を保ち、カード風の装飾は足しません。 */
.ballet-pages-studio .bp-news-link {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* 補足: Newsリンクのホバー背景は疑似要素で表現するため、要素本体は透明のままにします。 */
.ballet-pages-studio .bp-news-link:hover {
  background: transparent;
  box-shadow: none;
  transform: none;
}

/* 補足: 共通カードを薄い線と淡い背景で軽く見せます。 */
.ballet-pages-studio .bp-card,
.ballet-pages-studio .bp-faq {
  border: 1px solid var(--bp-studio-hairline-soft);
  background: color-mix(in srgb, var(--bp-paper), var(--bp-background) 12%);
  box-shadow: none;
}

/* 補足: カードホバー時の大きな移動をやめ、品よく明度だけ変えます。 */
.ballet-pages-studio .bp-card:hover {
  box-shadow: var(--bp-studio-shadow);
  transform: none;
}

/* 補足: クラス紹介は共通カードではなく、写真と情報カードを重ねるカタログ表示にします。 */
.ballet-pages-studio .bp-classes-section .bp-card.bp-class,
.ballet-pages-studio .bp-classes-section .bp-card.bp-class:hover {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

/* 補足: 講師紹介は共通カードではなく、罫線で区切るプロフィール行として表示します。 */
.ballet-pages-studio .bp-teachers-section .bp-card.bp-instructor,
.ballet-pages-studio .bp-teachers-section .bp-card.bp-instructor:hover {
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--bp-text) 13%, transparent);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

/* 補足: Aboutは先生が選んだ4色からローカルトークンを作り、柔らかい誌面風の背景にします。 */
.ballet-pages-studio .bp-intro {
  --bp-about-main: var(--bp-main);
  --bp-about-sub: var(--bp-sub);
  --bp-about-bg: var(--bp-background);
  --bp-about-text: var(--bp-ink);
  overflow: hidden;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--bp-about-bg) 88%, var(--bp-paper)) 0%,
    var(--bp-paper) 56%,
    color-mix(in srgb, var(--bp-about-main) 4%, var(--bp-paper)) 100%
  );
  color: var(--bp-about-text);
}

/* 補足: Aboutは見出し30%、本文70%に近い比率で左右に分けます。 */
.ballet-pages-studio .bp-intro .bp-split {
  grid-template-columns: minmax(220px, 3fr) minmax(0, 7fr);
  gap: clamp(48px, 6vw, 92px);
  align-items: center;
}

/* 補足: Aboutも共通見出しを使い、背景シルエットだけを固有装飾として残します。 */
.ballet-pages-studio .bp-intro .bp-section-head {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 390px;
  margin: 0;
  text-align: center;
}

/* 補足: バレリーナSVGをテーマカラーの薄いシルエットとして表示します。 */
.ballet-pages-studio .bp-intro .bp-section-head::before {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 48%;
  width: clamp(210px, 25vw, 330px);
  aspect-ratio: 2 / 3;
  background: var(--bp-about-main);
  -webkit-mask-image: url("../../ballerina1.svg");
  mask-image: url("../../ballerina1.svg");
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  opacity: 0.075;
  transform: translate(-50%, -50%) rotate(-3deg);
  pointer-events: none;
  content: "";
}

/* 補足: About本文は縦線や引用記号を使わず、文字組みだけで上品に見せます。 */
.ballet-pages-studio .bp-intro .bp-richtext {
  max-width: 760px;
  padding-left: clamp(8px, 1.5vw, 22px);
  border: 0;
  text-align: left;
}

/* 補足: About専用タイトルを本文とは別の大きなリードとして表示します。 */
.ballet-pages-studio .bp-intro .bp-intro-title {
  margin: 0 0 1.7em;
  color: var(--bp-about-text);
  font-family: var(--bp-body-font);
  font-size: clamp(1.2rem, 2vw, 1.62rem);
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.09em;
}

.ballet-pages-studio .bp-intro .bp-intro-description p {
  margin: 0 0 1.35em;
  color: color-mix(in srgb, var(--bp-about-text) 82%, transparent);
  font-size: clamp(0.88rem, 1.25vw, 1rem);
  font-weight: 400;
  line-height: 2.15;
  letter-spacing: 0.055em;
}

.ballet-pages-studio .bp-intro .bp-intro-description p:last-child {
  margin-bottom: 0;
}

@media (max-width: 900px) and (min-width: 721px) {
  .ballet-pages-studio .bp-intro .bp-split {
    grid-template-columns: minmax(210px, 3fr) minmax(0, 7fr);
    gap: clamp(36px, 5vw, 55px);
  }

  .ballet-pages-studio .bp-intro .bp-section-head {
    min-height: 340px;
  }

  .ballet-pages-studio .bp-intro .bp-section-head::before {
    width: clamp(190px, 27vw, 240px);
  }

  .ballet-pages-studio .bp-intro .bp-richtext {
    padding-left: 0;
  }
}

/* 補足: スケジュール表を薄い線と白背景でプロっぽく整えます。 */
.ballet-pages-studio .bp-schedule-table-wrap {
  border-color: var(--bp-studio-hairline-soft);
  border-radius: var(--bp-radius-card);
  box-shadow: var(--bp-studio-shadow-soft);
}

/* 補足: スケジュール表の見出し行を淡い背景にします。 */
.ballet-pages-studio .bp-schedule-table th {
  background: var(--bp-studio-surface-strong);
  color: var(--bp-accent-dark);
}

/* 補足: 料金項目を余白のあるグリッドカードとして表示します。 */
.ballet-pages-studio .bp-fees {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  border-top: 0;
}

/* 補足: 料金区分の見出しと明細を一枚のまとまりとして表示します。 */
.ballet-pages-studio .bp-fee-group {
  padding: clamp(22px, 3vw, 34px);
  border-color: var(--bp-studio-hairline-soft);
  background: var(--bp-panel-readable);
}

/* 補足: 料金カード内の線と背景を統一します。 */
.ballet-pages-studio .bp-fee-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 8px 24px;
  min-height: 66px;
  padding: 18px 0;
  border: 0;
  border-bottom: 1px solid var(--bp-studio-hairline-soft);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* 補足: 料金の項目名と金額を同じ行で比較しやすく整列します。 */
.ballet-pages-studio .bp-fee-item span {
  margin: 0;
  font-size: 1rem;
  letter-spacing: 0;
}

/* 補足: 金額は右揃え、補足は全幅で表示します。 */
.ballet-pages-studio .bp-fee-item strong {
  font-family: var(--bp-body-font);
  text-align: right;
  font-size: 1.18rem;
  overflow-wrap: anywhere;
}

/* 補足: 料金ごとの補足文は項目の直下に配置します。 */
.ballet-pages-studio .bp-fee-note {
  grid-column: 1 / -1;
  margin: 0;
}

/* 補足: 料金の重複した装飾を取り除き、項目名と金額を読みやすくします。 */
.ballet-pages-studio .bp-fee-item::before {
  content: none;
}

/* 補足: FAQ全体を薄い線のまとまりとして整えます。 */
.ballet-pages-studio .bp-faq {
  border-color: var(--bp-studio-hairline-soft);
  border-radius: var(--bp-radius-card);
}

/* 補足: FAQの各項目の区切り線をアクセントカラー由来の薄い線にします。 */
.ballet-pages-studio .bp-faq details {
  border-bottom-color: var(--bp-studio-hairline-soft);
}

/* 補足: ギャラリー写真を均一なグリッドにします。 */
.ballet-pages-studio .bp-gallery {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

/* 補足: ギャラリー写真の比率をそろえて整列感を出します。 */
.ballet-pages-studio .bp-gallery img {
  aspect-ratio: 1 / 1;
  border-radius: var(--bp-radius-media);
  box-shadow: none;
}

/* 補足: 未設定枠も実際のギャラリー写真と同じ正方形にそろえます。 */
.ballet-pages-studio .bp-gallery .bp-no-image-gallery {
  aspect-ratio: 1 / 1;
}

/* 補足: タブレットでは写真幅を保つためギャラリーを3列にします。 */
@media (max-width: 980px) and (min-width: 721px) {
  .ballet-pages-studio .bp-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* 補足: 管理画面で非表示予定にしたセクションをその場でグレーアウトします。 */
.ballet-pages-dashboard-shell
  .bp-dashboard-section-zone
  > .bp-dashboard-section.is-pending-disabled {
  background: var(--bp-admin-field);
  filter: none;
  opacity: 1;
}

/* 補足: 非表示予定セクションの操作ボタンは戻せることがわかる色にします。 */
.ballet-pages-dashboard-shell
  .bp-dashboard-section.is-pending-disabled
  > .bp-dashboard-section-state-button {
  background: transparent;
  box-shadow: none;
  color: var(--bp-admin-muted);
}

/* 補足: スマホでは公開ページの余白と2カラム要素を読みやすく調整します。 */
@media (max-width: 720px) {
  .ballet-pages-studio .bp-section {
    padding-block: 72px;
  }

  /* 補足: スマホでもFeaturesのアーチカード用余白を優先します。 */
  .ballet-pages-studio .bp-features-section {
    padding-block: 65px;
  }

  /* 補足: スマホでもクラス紹介の1枚表示用余白と幅を優先します。 */
  .ballet-pages-studio .bp-classes-section {
    padding-block: 65px;
  }

  .ballet-pages-studio .bp-classes-section .bp-section-inner {
    width: calc(100% - 40px);
    max-width: none;
  }

  /* 補足: Aboutはスマホで見出し、本文の順に読みやすく並べます。 */
  .ballet-pages-studio .bp-intro .bp-split {
    grid-template-columns: minmax(0, 1fr);
    gap: 38px;
  }

  .ballet-pages-studio .bp-intro .bp-section-head {
    align-items: center;
    min-height: 250px;
    text-align: center;
  }

  .ballet-pages-studio .bp-intro .bp-section-head::before {
    left: 50%;
    width: 190px;
    opacity: 0.065;
    transform: translate(-50%, -50%) rotate(-3deg);
  }

  /* 補足: スマホのAbout本文は縦線を使わず、画面幅を広く使います。 */
  .ballet-pages-studio .bp-intro .bp-richtext {
    padding-left: 0;
    border: 0;
  }

  .ballet-pages-studio .bp-intro .bp-intro-title {
    margin-bottom: 1.55em;
    font-size: 1.18rem;
    line-height: 1.8;
  }

  .ballet-pages-studio .bp-intro .bp-intro-description p {
    font-size: 0.88rem;
    line-height: 2;
  }

  .ballet-pages-studio .bp-hero {
    min-height: calc(100svh - 64px);
  }

  .ballet-pages-studio .bp-hero-content {
    width: calc(100% - 40px);
    padding: 96px 0 56px;
  }

  .ballet-pages-studio .bp-hero h1 {
    font-size: 2.5rem;
    overflow-wrap: anywhere;
  }

  .ballet-pages-studio .bp-teachers-section {
    padding-block: 65px;
  }

  .ballet-pages-studio .bp-teachers-section .bp-section-inner {
    width: calc(100% - 32px);
    max-width: none;
  }

  .ballet-pages-studio .bp-teachers-section .bp-instructor,
  .ballet-pages-studio .bp-teachers-section .bp-card.bp-instructor {
    grid-template-columns: minmax(0, 1fr);
    gap: 25px;
    padding: 32px 4px 50px;
  }

  .ballet-pages-studio .bp-teachers-section .bp-instructor::after {
    content: none;
  }

  .ballet-pages-studio .bp-teachers-section .bp-instructor img {
    width: min(190px, 58%);
    max-width: 190px;
    max-height: none;
    margin-inline: auto;
  }

  .ballet-pages-studio .bp-teachers-section .bp-no-image-instructor {
    width: min(190px, 58%);
    max-width: 190px;
  }

  .ballet-pages-studio .bp-teachers-section .bp-instructor-body {
    padding: 0;
  }

  .ballet-pages-studio .bp-teachers-section .bp-instructor h3,
  .ballet-pages-studio
    .bp-teachers-section
    .bp-instructor
    .bp-instructor-body
    h3 {
    font-size: 1.31rem;
  }

  .ballet-pages-studio .bp-teachers-section .bp-instructor .bp-muted {
    margin-bottom: 21px;
    font-size: 0.75rem;
  }

  /* 補足: スマホでは料金区分の余白を抑え、明細名と金額を縦に並べます。 */
  .ballet-pages-studio .bp-fee-group {
    padding: 22px 18px;
  }

  .ballet-pages-studio .bp-fee-item {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    min-height: 0;
    padding: 10px 0;
  }

  .ballet-pages-studio .bp-fee-item strong {
    font-size: 1.125rem;
    text-align: left;
  }

  .ballet-pages-studio .bp-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* A failed or delayed footer script must not leave the page covered. */
.bp-has-js .bp-page-loader { animation: bpLoaderRelease 0.4s ease 2s forwards; }
@keyframes bpLoaderRelease {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}
.ballet-pages-dashboard-shell .bp-dashboard-section-note { margin: 0 0 24px; font-size: 13px; line-height: 1.8; color: var(--admin-muted, #666); }


/* Shared, locally bundled Phosphor icons. */
.bp-icon { display: inline-block; width: 20px; height: 20px; flex: 0 0 auto; vertical-align: middle; fill: currentColor; }