@charset "UTF-8";
/*
 * enhance.css — Container Console / 表示品質の上乗せレイヤー
 *
 * 既存 theme/common/home の構造はそのまま尊重し、
 *   ・タイポと余白の微調整
 *   ・Hero の 3 バリエーション（[data-hero="a|b|c"]）
 *   ・カードの hover を 1px 線色 + translate に統一
 *   ・Statusbar の console らしさ強化
 *   ・モジュール番号バッジの強化
 *   ・全テーマでバランスを取るための追補
 * をこの 1 ファイルに集約する。
 *
 * 既存 CSS 変数は変更しない。アクセント切替は :root に直接プロパティを差し込む方式（JS）。
 */
/* ===== 0. 共通：dark 寄りの neutral-tech 追補 ===== */
[data-theme="dark"] {
  /* 既存値より僅かに藍を強め、 console らしいニュートラルへ。 */
  --c_bg_base: #0b1220;
  --c_bg_section: #0f1828;
  --c_bg_card: #111c2e;
  --c_border: #1f2c44;
  --c_border_strong: #2a3a58;
  --c_grid_line: #142035;
  --c_text: #e6ecf5;
  --c_text_muted: #8a97ad;
}
[data-theme="warm"] {
  --c_text: #2b1f12;
  --c_text_muted: #7a6650;
}
[data-theme="cool"] {
  --c_text: #11202b;
  --c_text_muted: #5b7080;
}
/* ===== 0-ex. page_module.css の --pm-* を accent クラスへ追従させる =====
   page_module.css は [data-theme="light"|"green"|"mono"|...] で
   --pm-primary をハードコード値で固定している（例: light は #0a9913 緑）。
   そのため accent_* クラスで --c_primary を切替えてもモジュールの色が
   変わらない問題が発生する。
   ここで該当テーマの --pm-* を --c_* チェーンに引き戻し、
   "Accent" Tweak の操作を全モジュールに反映させる。 */
[data-theme="light"], [data-theme="warm"], [data-theme="cool"], [data-theme="green"], [data-theme="mono"], [data-theme="pastel"], [data-theme="crimson"], [data-theme="ocean"] {
  --pm-primary:       var(--c_primary);
  --pm-primary-dark:  var(--c_primary_dark);
  --pm-primary-light: var(--c_primary_light);
  --pm-accent:        var(--c_primary);
}
html {
  background-color: var(--c_bg_base);
}
/* タイポ：和文の見出しを少し詰めて console らしく */
.section_title, .home_pickup_main_title, .home_service_title, .home_feature_title, .home_cta_title {
  text-wrap: balance;
  letter-spacing: -0.012em;
}
.home_hero_title {
  text-wrap: balance;
}
/* 数値・英字をいつでも Lato 寄りに */
.section_title_en, .home_module_no, .home_hero_lead, .home_hero_meta_label, .home_statusbar_label, .home_feature_number, .home_service_link, .home_events_more, .home_cta_no, .home_events_year, .copyright {
  font-feature-settings: "tnum", "ss01";
}
/* ===== 1. ヘッダーの polish ===== */
.site_header {
  backdrop-filter: blur(8px);
  background-color: color-mix(in oklab, var(--c_header_bg) 92%, transparent);
}
.site_logo .site_logo_img {
  color: var(--c_primary);
}
/* dark テーマのみロゴ画像を白く反転（img タグ経由で currentColor が効かないため） */
[data-theme="dark"] .site_logo_img {
  filter: brightness(0) invert(1);
}
.site_logo_text {
  font-family: var(--font_en);
  font-weight: 800;
  letter-spacing: 0.12em;
  font-size: 14px;
  text-transform: uppercase;
}
.global_nav_link {
  font-size: 13px;
  letter-spacing: 0.06em;
}
/* ===== 1-ex2. 下層ページタイトル帯 — en ラベルとタイトルを横並び中央揃え =====
   元 lower.css は 80px : 1fr の grid（en は左小コラム、title は右大コラム、align-items: end）。
   依頼により Page / Archive / Category プレフィックスを除去し、
   en（細い英ラベル）と日本語タイトルを横並びで上下中央に揃える。 */
.lower_page_head .lower_page_head_inner {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center !important;
  gap: clamp(14px, 2.4vw, 28px);
}
.lower_page_head .lower_page_head_en {
  grid-column: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 0;
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
.lower_page_head .lower_page_head_en::before {
  content: "";
  width: 32px;
  height: 1px;
  background: currentColor;
}
.lower_page_head .lower_page_head_title {
  grid-column: auto;
  margin: 0;
  line-height: 1;
}
@media (max-width: 640px) {
  .lower_page_head .lower_page_head_inner {
    gap: 8px;
  }
  .lower_page_head .lower_page_head_title {
    line-height: 1.15;
  }
}
/* ===== 1-ex. 下層ページタイトル帯 — KV 画像がある時は常に白文字 =====
   元 lower.css は :has(.lower_page_head_visual) で var(--c_text_inverse) を当てているが、
   dark テーマでは --c_text_inverse: #0f172a（濃紺）になり KV 暗オーバーレイ上で読めない。
   また明るい画像でも視認性が落ちないよう、暗オーバーレイを強め＋ text-shadow で保険。 */
.lower_page_head:has(.lower_page_head_visual) .lower_page_head_title {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 2px 18px rgba(0, 0, 0, 0.35);
}
.lower_page_head:has(.lower_page_head_visual) .lower_page_head_en {
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
/* KV オーバーレイ：明るい画像でも文字が抜けないよう、グラデを下方向＋濃いめに */
.lower_page_head .lower_page_head_visual::after {
  background: linear-gradient(180deg, rgba(8, 14, 28, 0.55) 0%, rgba(8, 14, 28, 0.45) 40%, rgba(8, 14, 28, 0.75) 100%);
}
/* ===== 2. Module 番号バッジ — 非表示（依頼により全セクションで除去） ===== */
.home_module_head {
  grid-template-columns: minmax(0, 1fr);
}
.home_module_no, .home_cta_no {
  display: none;
}
.home_cta_box {
  grid-template-columns: minmax(0, 1fr) auto;
}
@media (max-width: 900px) {
  .home_cta_box {
    grid-template-columns: 1fr;
  }
}
/* ===== 3. Statusbar — 数値を console らしく ===== */
.home_statusbar {
  background-color: var(--c_bg_card);
  background-image: linear-gradient(to right, var(--c_grid_line) 1px, transparent 1px);
  background-size: 48px 100%;
  background-position: 0 0;
  position: relative;
}
.home_statusbar_inner {
  padding-block: 22px;
  align-items: stretch;
}
.home_statusbar_item {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding-block: 4px;
}
.home_statusbar_num {
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
}
.home_statusbar_label {
  font-size: 10.5px;
  letter-spacing: 0.24em;
}
/* ===== 4. ボタン — neutral-tech のホバー（塗り → 線色のみ）に統一 =====
   仕様書 4. 守ってほしい技術ルール「box-shadow を多用しない、線で表現」
   に沿って .btn_primary もホバーで反転表現に統一。 */
.btn {
  min-width: 0;
  padding-inline: 22px;
  min-height: 46px;
  font-size: 13px;
  letter-spacing: 0.08em;
  border-radius: var(--radius_sm);
  position: relative;
}
.btn_primary {
  border-color: var(--c_primary);
}
.btn_primary:hover, .btn_primary:focus-visible {
  background-color: transparent;
  color: var(--c_primary);
  border-color: var(--c_primary);
  transform: translateY(-1px);
}
.btn_outline:hover, .btn_outline:focus-visible {
  background-color: transparent;
  color: var(--c_primary_dark);
  border-color: var(--c_primary_dark);
  transform: translateY(-1px);
}
.btn::after {
  content: "→";
  margin-left: 10px;
  font-family: var(--font_base);
  font-weight: 400;
  transition: transform var(--transition_fast);
}
.btn:hover::after {
  transform: translateX(3px);
}
/* ===== 5. カード hover — translate を 2–4px に統一 ===== */
.home_pickup_main:hover {
  transform: translateY(-3px);
}
.home_pickup_sub_link:hover {
  transform: translateX(3px);
}
.home_events_link:hover {
  transform: translateY(-3px);
}
/* ===== 5-ex. Hero エリア内 btn_outline は白背景にする =====
   KV 画像の上でも視認性を確保し、primary ボタンとのコントラストを作る。 */
.home_hero_actions .btn_outline {
  background-color: #ffffff;
  color: var(--c_text);
  border-color: #ffffff;
}
.home_hero_actions .btn_outline:hover, .home_hero_actions .btn_outline:focus-visible {
  background-color: var(--c_primary);
  color: #ffffff;
  border-color: var(--c_primary);
}
/* ===== 6. Service カード — アイコン枠を線囲み + 番号バッジを強調 ===== */
.home_service_item {
  padding: clamp(28px, 3vw, 40px);
  gap: 12px;
}
.home_service_icon {
  width: 44px;
  height: 44px;
  font-size: 12px;
  letter-spacing: 0.18em;
  border-radius: var(--radius_sm);
}
.home_service_title {
  font-size: 19px;
  margin-top: 4px;
}
/* ===== 7. Feature — アイコンを少し控えめに ===== */
.home_feature_icon_wrap {
  width: 48px;
  height: 48px;
}
.home_feature_icon {
  font-size: 24px;
}
.home_feature_item {
  padding: clamp(28px, 3vw, 44px);
  gap: 10px;
}
/* ===== 8. Events カード — date_info を彩度ダウンしてテーマ追従 ===== */
.home_events_date_info[data-category="open"] {
  background: color-mix(in oklab, var(--c_primary) 14%, var(--c_bg_card));
}
.home_events_date_info[data-category="seminar"] {
  background: color-mix(in oklab, var(--c_accent) 14%, var(--c_bg_card));
}
.home_events_date_info[data-category="expo"] {
  background: color-mix(in oklab, var(--c_state_success) 14%, var(--c_bg_card));
}
.home_events_date_info[data-category="study"] {
  background: color-mix(in oklab, var(--c_primary) 8%, var(--c_bg_card));
}
.home_events_date_info[data-category="other"] {
  background: color-mix(in oklab, var(--c_text_muted) 14%, var(--c_bg_card));
}
.home_events_date_info {
  border-bottom: 1px solid var(--c_border);
}
.home_events_year, .home_events_category, .home_events_date p, .home_events_date .week {
  color: var(--c_text);
}
/* ===== 9. CTA — accent ティント塗り背景に統一（全ページ共通） ===== */
.home_cta_box {
  background-color: color-mix(in oklab, var(--c_primary) 8%, var(--c_bg_card)) !important;
  background-image: none !important;
}
/* ============================================================
 * 10. Hero バリエーション — [data-hero="a|b|c"]
 * ============================================================ */
/* --- 共通: ヒーロー内の見出しサイズ調整 --- */
.home_hero_title {
  font-size: clamp(38px, 6.2vw, 76px);
}
/* グリッド地は data-hero に応じて切替（image があるときは画像が勝つ） */
.home_hero::before {
  background-size: 56px 56px;
  opacity: 0.45;
}
[data-theme="dark"] .home_hero::before {
  opacity: 0.7;
}
/* hero_console / hero_terminal は既定で非表示。各 variant で表示する */
.hero_console, .hero_terminal {
  display: none;
}
/* ============================================================
 * Hero A · KV Image — 画像全面 + 暗グラデ + 左寄せ大型タイトル
 * ============================================================ */
[data-hero="a"] .home_hero {
  min-height: clamp(560px, 78vh, 820px);
}
[data-hero="a"] .home_hero_bg::after {
  background: linear-gradient(180deg, rgba(8, 14, 28, 0.3) 0%, rgba(8, 14, 28, 0.62) 65%, rgba(8, 14, 28, 0.84) 100%);
}
[data-hero="a"] .home_hero_meta_list {
  border-left: 1px solid color-mix(in srgb, currentColor 25%, transparent);
  padding-left: clamp(20px, 3vw, 40px);
}
/* ============================================================
 * Hero B · Split Console — 左テキスト / 右 KV 画像 + 浮かぶコンソールパネル
 * ============================================================ */
[data-hero="b"] .home_hero {
  min-height: clamp(580px, 80vh, 800px);
  border-bottom: 1px solid var(--c_border);
}
/* KV 画像を右半分に閉じ込める */
[data-hero="b"] .home_hero_bg {
  inset: 0 0 0 50%;
  border-left: 1px solid var(--c_border);
}
[data-hero="b"] .home_hero_bg::after {
  background: linear-gradient(180deg, rgba(8, 14, 28, 0.18) 0%, rgba(8, 14, 28, 0.4) 100%);
}
/* :has の白文字ルールを中和（左側テキストは通常のテーマ色） */
[data-hero="b"] .home_hero:has(.home_hero_bg) .home_hero_inner, [data-hero="b"] .home_hero:has(.home_hero_bg) .home_hero_title, [data-hero="b"] .home_hero:has(.home_hero_bg) .home_hero_lead, [data-hero="b"] .home_hero:has(.home_hero_bg) .home_hero_meta_label, [data-hero="b"] .home_hero:has(.home_hero_bg) .home_hero_meta_value {
  color: var(--c_text);
}
[data-hero="b"] .home_hero:has(.home_hero_bg) .home_hero_meta {
  border-top-color: var(--c_border);
}
/* 内側：左コンテンツ列 + 右コンソール列 の 2 カラム */
[data-hero="b"] .home_hero_inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  grid-template-rows: auto 1fr auto;
  gap: clamp(24px, 4vw, 56px) clamp(32px, 5vw, 72px);
  align-items: stretch;
  padding-block: clamp(80px, 9vw, 120px);
}
[data-hero="b"] .home_hero_inner > .home_hero_lead {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
}
[data-hero="b"] .home_hero_inner > .home_hero_title {
  grid-column: 1;
  grid-row: 2;
  align-self: center;
}
[data-hero="b"] .home_hero_inner > .home_hero_actions {
  grid-column: 1;
  grid-row: 3;
  align-self: end;
}
[data-hero="b"] .home_hero_inner > .hero_console {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: stretch;
}
/* 右コンソール：画像上に浮かぶフロステッド・カード */
[data-hero="b"] .hero_console {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
  position: relative;
  padding: clamp(20px, 2.4vw, 30px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius_md);
  background: rgba(8, 14, 28, 0.55);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  color: #fff;
  pointer-events: none;
  min-height: 360px;
}
[data-hero="b"] .hero_console_head, [data-hero="b"] .hero_console_foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font_en);
  font-size: 10px;
  letter-spacing: 0.24em;
  color: rgba(255, 255, 255, 0.72);
  text-transform: uppercase;
}
[data-hero="b"] .hero_console_head {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  padding-bottom: 12px;
}
[data-hero="b"] .hero_console_foot {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 12px;
}
[data-hero="b"] .hero_console_dot {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
[data-hero="b"] .hero_console_dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c_primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--c_primary) 35%, transparent);
}
[data-hero="b"] .hero_console_grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 10px;
  min-height: 200px;
}
[data-hero="b"] .hero_console_cell {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius_sm);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  background: rgba(255, 255, 255, 0.04);
}
[data-hero="b"] .hero_console_cell_label {
  font-family: var(--font_en);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.62);
  text-transform: uppercase;
}
[data-hero="b"] .hero_console_cell_value {
  font-family: var(--font_en);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
  line-height: 1;
}
[data-hero="b"] .hero_console_cell_value small {
  font-size: 11px;
  font-weight: 600;
  color: var(--c_primary);
  margin-left: 6px;
  letter-spacing: 0.04em;
}
[data-hero="b"] .hero_console_sparkline {
  height: 28px;
  width: 100%;
  color: var(--c_primary);
  display: block;
}
@media (max-width: 1024px) {
  [data-hero="b"] .home_hero_inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(20px, 3vw, 36px);
  }
}
@media (max-width: 900px) {
  [data-hero="b"] .home_hero_bg {
    inset: 0;
  }
  [data-hero="b"] .home_hero_bg::after {
    background: linear-gradient(180deg, rgba(8, 14, 28, 0.55) 0%, rgba(8, 14, 28, 0.82) 100%);
  }
  [data-hero="b"] .home_hero:has(.home_hero_bg) .home_hero_inner, [data-hero="b"] .home_hero:has(.home_hero_bg) .home_hero_title, [data-hero="b"] .home_hero:has(.home_hero_bg) .home_hero_lead, [data-hero="b"] .home_hero:has(.home_hero_bg) .home_hero_meta_label, [data-hero="b"] .home_hero:has(.home_hero_bg) .home_hero_meta_value {
    color: #fff;
  }
  [data-hero="b"] .home_hero_inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
  }
  [data-hero="b"] .home_hero_inner > .hero_console {
    grid-column: 1;
    grid-row: auto;
    align-self: auto;
  }
}
/* ============================================================
 * Hero C · Grid Console — KV 画像をモノクロ化 + ドットグリッド前面 + ターミナル風ステータス
 * ============================================================ */
[data-hero="c"] .home_hero {
  min-height: clamp(560px, 78vh, 800px);
  /* テーマに依存せず常に暗いバックドロップ。KV 画像をモノクロ化して載せる前提のため。 */
  background-color: #0a1120;
}
[data-hero="c"] .home_hero_bg img {
  filter: saturate(0.15) contrast(0.95) brightness(0.65);
  opacity: 0.55;
}
[data-hero="c"] .home_hero_bg::after {
  background: radial-gradient(ellipse at 78% 28%, color-mix(in oklab, var(--c_primary) 25%, transparent) 0%, transparent 55%), linear-gradient(180deg, rgba(8, 14, 28, 0.45) 0%, rgba(8, 14, 28, 0.75) 100%);
}
/* ドットグリッドを画像の「上」に描く（z-index: 2 ＝ overlay と同レベル＋後発で上） */
[data-hero="c"] .home_hero::before {
  background-image: radial-gradient(circle, color-mix(in oklab, #ffffff 35%, transparent) 1px, transparent 1.5px);
  background-size: 26px 26px;
  background-color: transparent;
  opacity: 0.55;
  z-index: 2;
}
/* テキストは KV 上なので白系（:has ルールがそのまま効くので追加不要） */
[data-hero="c"] .home_hero_inner {
  padding-block: clamp(90px, 11vw, 140px);
  grid-template-rows: auto 1fr auto auto;
  gap: clamp(18px, 2.5vw, 28px);
}
[data-hero="c"] .home_hero_title {
  align-self: start;
}
[data-hero="c"] .hero_terminal {
  grid-row: 3;
  align-self: end;
}
[data-hero="c"] .home_hero_meta {
  grid-row: 4;
}
[data-hero="c"] .home_hero_lead {
  border: 1px solid rgba(255, 255, 255, 0.35);
  padding: 6px 14px 6px 32px;
  border-radius: var(--radius_pill);
  width: fit-content;
  position: relative;
  white-space: nowrap;
}
[data-hero="c"] .home_hero_lead::before {
  width: auto;
  height: auto;
  background: transparent;
  content: "●";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--c_primary);
  font-size: 10px;
  line-height: 1;
}
[data-hero="c"] .home_hero_title {
  max-width: 20ch;
}
/* ターミナル風ステータス：タイトルとメタの間に表示 */
[data-hero="c"] .hero_terminal {
  display: block;
}
[data-hero="c"] .hero_terminal {
  justify-self: start;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.02em;
  line-height: 1.9;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius_sm);
  background: rgba(8, 14, 28, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 30px 18px 14px;
  max-width: 480px;
  width: 100%;
  color: rgba(255, 255, 255, 0.86);
  position: relative;
}
[data-hero="c"] .hero_terminal::before {
  content: "● ● ●";
  position: absolute;
  top: 10px;
  left: 14px;
  font-size: 7px;
  letter-spacing: 5px;
  color: rgba(255, 255, 255, 0.4);
}
[data-hero="c"] .hero_terminal::after {
  content: "container.sh — live";
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 9px;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
}
[data-hero="c"] .hero_terminal_lines {
  margin-top: 4px;
}
[data-hero="c"] .hero_terminal_lines span {
  display: block;
  color: rgba(255, 255, 255, 0.66);
}
[data-hero="c"] .hero_terminal_lines b {
  color: var(--c_primary);
  font-weight: 600;
}
@media (max-width: 640px) {
  [data-hero="c"] .hero_terminal {
    font-size: 11px;
    max-width: 100%;
  }
}
/* ============================================================
 * 11. アクセント色プリセット（JS 側でクラスを切替）
 * ============================================================ */
html.accent_cobalt {
  --c_primary: #4f7cff;
  --c_primary_dark: #2f5ae0;
  --c_primary_light: #e0e8ff;
}
html.accent_teal {
  --c_primary: #0f8a6b;
  --c_primary_dark: #08624b;
  --c_primary_light: #d3f0e6;
}
html.accent_coral {
  --c_primary: #e25a4d;
  --c_primary_dark: #b13a30;
  --c_primary_light: #fde0dc;
}
html.accent_amber {
  --c_primary: #d97706;
  --c_primary_dark: #a55a05;
  --c_primary_light: #fde7c8;
}
/* ダーク時は彩度高めへ */
[data-theme="dark"].accent_cobalt {
  --c_primary: #6a91ff;
  --c_primary_dark: #4f7cff;
}
[data-theme="dark"].accent_teal {
  --c_primary: #2bb38b;
  --c_primary_dark: #1a8e6c;
}
[data-theme="dark"].accent_coral {
  --c_primary: #ff7e72;
  --c_primary_dark: #e25a4d;
}
[data-theme="dark"].accent_amber {
  --c_primary: #f59e0b;
  --c_primary_dark: #d97706;
}
/* ============================================================
 * 12. Tweaks パネル本体は tweaks-panel.jsx 側で provision される。
 *     ここではホスト側 UI と干渉しないようにのみ調整。
 * ============================================================ */
.tweaks-host * {
  box-sizing: border-box;
}
/* ============================================================
 * 12-ex0a. post_meta_category — hover/focus 効果は不要に固定
 *   lower.css 側の `.post_meta_category:hover { border-color: primary; }`
 *   を全ページで打ち消す。
 * ============================================================ */
.post_meta_category, .post_meta_category:hover, .post_meta_category:focus, .post_meta_category:focus-visible, .post_meta_category:active {
  border-color: var(--c_primary) !important;
  color: var(--c_primary) !important;
  background: transparent !important;
  cursor: default !important;
  text-decoration: none !important;
  transform: none !important;
}
/* ============================================================
 * 12-ex0. 予約ステータスバッジ — 全ページ共通の優しい色合いに統一
 *   .home_events_reservation（カード内 is_open/is_soon/is_full/is_closed/is_live）
 *   .event_meta_status （イベント詳細ヘッダー側）
 *   どちらも同じ配色トークンで揃える。
 * ============================================================ */
.home_events_reservation, .event_meta_status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  font-family: var(--font_en);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-radius: var(--radius_sm);
  border: 1px solid transparent;
}
.event_meta_status {
  font-size: 12px;
  padding: 4px 12px;
}
.home_events_reservation::before, .event_meta_status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
  flex: 0 0 auto;
}
/* ── ライトテーマ（既定）── */
.home_events_reservation.is_open, .event_meta_status.is_open {
  color: #c0556a;
  background: #fbecef;
  border-color: #f1c8d0;
}
.home_events_reservation.is_soon, .event_meta_status.is_soon {
  color: #a36b1f;
  background: #fbf1de;
  border-color: #ecd9a8;
}
.home_events_reservation.is_full, .event_meta_status.is_full {
  color: #5b6573;
  background: #eef0f4;
  border-color: #d6dae2;
}
.home_events_reservation.is_closed, .event_meta_status.is_closed {
  color: #6f6b96;
  background: #ecebf4;
  border-color: #cfcde0;
}
.home_events_reservation.is_live, .event_meta_status.is_live {
  color: #2f8c70;
  background: #e6f3ee;
  border-color: #b9dccc;
}
/* ── ダークテーマ ── */
[data-theme="dark"] .home_events_reservation.is_open, [data-theme="dark"] .event_meta_status.is_open {
  color: #f0a8b3;
  background: #3a1f25;
  border-color: #5a2f38;
}
[data-theme="dark"] .home_events_reservation.is_soon, [data-theme="dark"] .event_meta_status.is_soon {
  color: #ecc585;
  background: #3a2d18;
  border-color: #5a4528;
}
[data-theme="dark"] .home_events_reservation.is_full, [data-theme="dark"] .event_meta_status.is_full {
  color: #aab3c0;
  background: #232a36;
  border-color: #36404e;
}
[data-theme="dark"] .home_events_reservation.is_closed, [data-theme="dark"] .event_meta_status.is_closed {
  color: #b7b3d4;
  background: #28253c;
  border-color: #3d3a56;
}
[data-theme="dark"] .home_events_reservation.is_live, [data-theme="dark"] .event_meta_status.is_live {
  color: #8fd1b8;
  background: #1d3329;
  border-color: #2d5040;
}
/* home_events_reservation は home.css で margin: 4px 0 0 になっているので維持。
   親 .home_events_info_meta が flex-column のため、デフォルト align-items: stretch
   でバッジが幅 100% に伸びてしまう。テキスト幅にフィットさせる。 */
.home_events_reservation {
  margin: 4px 0 0;
  align-self: flex-start;
  width: fit-content;
}
/* ============================================================
 * 12-ex. FAQ アコーディオン（mid=20 .faq_set_accordion）
 *     page_module.css には .faq_item / summary / .faq_a の
 *     スタイル定義がなくブラウザ既定にフォールバックしていたため、
 *     Container Console 風に再定義し accent 色へ追従させる。
 * ============================================================ */
.faq_set_accordion {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.faq_set_accordion .faq_item {
  border: 1px solid var(--c_border);
  border-radius: var(--radius_md);
  background-color: color-mix(in oklab, var(--c_primary) 4%, var(--c_bg_card));
  overflow: hidden;
  transition: border-color var(--transition_base), background-color var(--transition_base);
}
.faq_set_accordion .faq_item[open] {
  border-color: var(--c_primary);
  background-color: color-mix(in oklab, var(--c_primary) 6%, var(--c_bg_card));
}
.faq_set_accordion .faq_item > summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 16px 56px 16px 56px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--c_text);
  /* lower.css の var(--mv-surface-soft, var(--c_bg_section)) を上書きして accent 追従に */
  background: color-mix(in oklab, var(--c_primary) 4%, var(--c_bg_card));
  transition: background-color var(--transition_fast);
}
.faq_set_accordion .faq_item > summary::-webkit-details-marker {
  display: none;
}
.faq_set_accordion .faq_item > summary::marker {
  content: "";
}
.faq_set_accordion .faq_item > summary:hover {
  background: color-mix(in oklab, var(--c_primary) 12%, var(--c_bg_card));
}
.faq_set_accordion .faq_item[open] > summary {
  background: color-mix(in oklab, var(--c_primary) 8%, var(--c_bg_card));
}
/* Q バッジ（左） */
.faq_set_accordion .faq_item > summary::before {
  content: "Q";
  position: absolute;
  left: 18px;
  top: 14px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font_en);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--c_primary);
  border-radius: var(--radius_sm);
}
/* 開閉インジケータ（右の +/-） */
.faq_set_accordion .faq_item > summary::after {
  content: "+";
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font_en);
  font-size: 18px;
  font-weight: 600;
  color: var(--c_primary);
  border: 1px solid var(--c_border_strong);
  border-radius: 50%;
  transition: transform var(--transition_fast), background-color var(--transition_fast), color var(--transition_fast), border-color var(--transition_fast);
}
.faq_set_accordion .faq_item[open] > summary::after {
  content: "−";
  background-color: var(--c_primary);
  border-color: var(--c_primary);
  color: #fff;
  transform: translateY(-50%) rotate(180deg);
}
/* 回答本文 */
.faq_set_accordion .faq_item > .faq_a {
  position: relative;
  padding: 6px 24px 20px 56px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--c_text_muted);
  border-top: 1px solid color-mix(in oklab, var(--c_primary) 18%, var(--c_border));
  margin-top: 0;
}
.faq_set_accordion .faq_item > .faq_a::before {
  content: "A";
  position: absolute;
  left: 18px;
  top: 14px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font_en);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--c_primary);
  background: transparent;
  border: 1px solid var(--c_primary);
  border-radius: var(--radius_sm);
}
.faq_set_accordion .faq_item > .faq_a code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 12.5px;
  padding: 2px 6px;
  background: color-mix(in oklab, var(--c_bg_base) 70%, var(--c_bg_section));
  border: 1px solid var(--c_border);
  border-radius: var(--radius_sm);
}
.faq_set_accordion .faq_item > .faq_a p {
  margin: 0 0 8px;
}
.faq_set_accordion .faq_item > .faq_a > *:first-child {
  margin-top: 8px;
}
.faq_set_accordion .faq_item > .faq_a > *:last-child {
  margin-bottom: 0;
}
/* ============================================================
 * 12-ex2. テーブル hover — accent 追従に統一
 *     page_module.css は `.info_table tbody tr:hover` 等を
 *     var(--mv-surface-soft) のグレーで塗るため accent が伝わらない。
 *     primary を薄く混色して accent 化。
 * ============================================================ */
.info_table tbody tr:hover, .scroll_table tbody tr:hover, .table tbody tr:hover {
  background: color-mix(in oklab, var(--c_primary) 10%, transparent) !important;
}
/* ヘッダー行（thead）は hover で色が変わらないように */
.info_table thead tr:hover, .scroll_table thead tr:hover, .table thead tr:hover {
  background: transparent !important;
}
/* ============================================================
 * 12-ex3. 協賛バナー（mid=52 .logo_banner）
 *     page_module.css は各 .item に 16px の左右 padding、
 *     <a> に 12px/18px の padding + 1px ボーダー + #fff 背景 + 高さ 96px を当てる。
 *     依頼により余白・罫線・背景を撤廃し、ロゴ画像の自然幅でスライドが構成される
 *     ように上書き。連続マーキーが視覚的にきれいに流れるよう、画像どうしの
 *     最小限の間隔だけ確保する。
 * ============================================================ */
.logo_banner .item {
  padding: 0 !important;
}
.logo_banner .item a {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  height: auto !important;
  box-shadow: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.logo_banner .item a:hover {
  border: 0 !important;
  box-shadow: none !important;
  opacity: 0.75;
}
.logo_banner img {
  height: 56px;
  width: auto !important;
  max-width: none !important;
  max-height: 56px;
  display: block;
  object-fit: contain;
}
/* スライド同士の隙間：slick の slick-slide に外余白で確保（画像自体には余白を入れない） */
.logo_banner_slider .slick-slide {
  margin: 0 10px;
}
.logo_banner_slider .slick-list {
  margin: 0 -10px;
}
@media (max-width: 640px) {
  .logo_banner img {
    height: 44px;
    max-height: 44px;
  }
  .logo_banner_slider .slick-slide {
    margin: 0 6px;
  }
  .logo_banner_slider .slick-list {
    margin: 0 -6px;
  }
}
/* ============================================================
 * 13. プレースホルダ画像が SVG の場合、object-fit が効くように
 * ============================================================ */
img[src$=".svg"] {
  object-fit: cover;
}
/* ============================================================
 * 14. ライト系テーマ時の hero 内文字色保護（has 非対応ブラウザ向け）
 * ============================================================ */
@supports not (selector(:has(*))) {
  [data-hero="a"] .home_hero_inner {
    color: #fff;
  }
}
/* ============================================================
 * 15. Hero アニメーション（lead / title / actions / buttons）
 *     prefers-reduced-motion を尊重。
 * ============================================================ */
@keyframes hero_anim_in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes hero_anim_lead_in {
  from {
    opacity: 0;
    transform: translateX(-12px);
    letter-spacing: 0.18em;
  }
  to {
    opacity: 1;
    transform: translateX(0);
    letter-spacing: 0.32em;
  }
}
@keyframes hero_anim_title_clip {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes hero_anim_dot_pulse {
  0%, 100% {
    transform: translateY(-50%) scale(1);
    opacity: 1;
  }
  50% {
    transform: translateY(-50%) scale(0.7);
    opacity: 0.45;
  }
}
.home_hero_lead[data-anim] {
  opacity: 0;
  animation: hero_anim_lead_in 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s forwards;
}
.home_hero_title[data-anim] {
  opacity: 0;
  animation: hero_anim_in 0.95s cubic-bezier(0.22, 0.61, 0.36, 1) 0.3s forwards, hero_anim_title_clip 1.1s cubic-bezier(0.7, 0, 0.2, 1) 0.3s both;
}
.home_hero_actions[data-anim] {
  /* 親はアニメせず、子の btn を順に出す */
  opacity: 1;
}
.home_hero_actions[data-anim] .btn {
  opacity: 0;
  animation: hero_anim_in 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.home_hero_actions[data-anim] .btn:nth-child(1) {
  animation-delay: 0.65s;
}
.home_hero_actions[data-anim] .btn:nth-child(2) {
  animation-delay: 0.78s;
}
/* Hero C のドットインジケータをパルスさせる */
[data-hero="c"] .home_hero_lead::before {
  animation: hero_anim_dot_pulse 1.6s ease-in-out infinite;
}
/* ボタン hover：sheen（光の帯）+ -1px float
   ボタンの translateY 効果は既存 .btn 側に定義済みなので、ここでは光の帯のみ追加。 */
.home_hero_actions .btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.home_hero_actions .btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, color-mix(in oklab, var(--c_primary) 35%, transparent) 50%, transparent 70%);
  transform: translateX(-130%);
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  z-index: -1;
  pointer-events: none;
}
.home_hero_actions .btn:hover::before, .home_hero_actions .btn:focus-visible::before {
  transform: translateX(130%);
}
@media (prefers-reduced-motion: reduce) {
  .home_hero_lead[data-anim], .home_hero_title[data-anim], .home_hero_actions[data-anim] .btn, [data-hero="c"] .home_hero_lead::before {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}
/* ============================================================
 * 16. Page-top ボタン（全ページ共通 / 右下 fixed）
 *     ファーストビューでは非表示、スクロール開始で表示。
 *     IntersectionObserver の代わりにシンプルな scrollY 監視。
 * ============================================================ */
.page_top {
  position: fixed;
  right: clamp(16px, 2.5vw, 28px);
  bottom: clamp(16px, 2.5vw, 28px);
  z-index: 90;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c_border_strong);
  border-radius: 50%;
  background-color: color-mix(in oklab, var(--c_bg_card) 88%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--c_text);
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.15s, border-color 0.15s, color 0.15s, visibility 0s 0.25s;
}
.page_top.is_visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.15s, border-color 0.15s, color 0.15s, visibility 0s 0s;
}
.page_top:hover, .page_top:focus-visible {
  background-color: var(--c_primary);
  border-color: var(--c_primary);
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
}
.page_top:focus-visible {
  outline: 2px solid var(--c_primary);
  outline-offset: 2px;
}
.page_top::before {
  content: "";
  width: 10px;
  height: 10px;
  border-top: 1.6px solid currentColor;
  border-right: 1.6px solid currentColor;
  transform: rotate(-45deg);
  margin-top: 4px;
}
.page_top_label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
@media (prefers-reduced-motion: reduce) {
  .page_top {
    transition: opacity 0.2s;
    transform: none !important;
  }
}
/* ============================================================
 * 17. フォーム共通（確認 / 完了 / アクション）
 *   Container Console 流の neutral-tech フォームページ。
 *   入力ページ・確認ページ・完了ページの 3 段を共通スタイルで揃える。
 * ============================================================ */
.form_page_wrap {
  /* CMS 本文（.lower_body が上下余白を持つ）と二重になるため上下 padding は持たせない。横は l_container 側で制御。 */
  /* padding: clamp(48px, 7vw, 88px) var(--space_lg) clamp(64px, 8vw, 100px); */
}
/* ── ステップインジケータ ── */
.form_steps {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space_2xl);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  max-width: 720px;
  margin-inline: auto;
  position: relative;
}
.form_steps::before {
  content: "";
  position: absolute;
  top: 22px;
  left: 16.66%;
  right: 16.66%;
  height: 1px;
  background: var(--c_border);
  z-index: 0;
}
.form_step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 1;
}
.form_step_num {
  font-family: var(--font_en);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.04em;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c_border_strong);
  background: var(--c_bg_card);
  color: var(--c_text_muted);
  transition: border-color var(--transition_fast), background-color var(--transition_fast), color var(--transition_fast);
}
.form_step_label {
  font-family: var(--font_en);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c_text_muted);
}
.form_step.is_done .form_step_num {
  background: var(--c_primary);
  border-color: var(--c_primary);
  color: #fff;
}
.form_step.is_done .form_step_label {
  color: var(--c_text);
}
.form_step.is_current .form_step_num {
  border-color: var(--c_primary);
  color: var(--c_primary);
  background: color-mix(in oklab, var(--c_primary) 10%, var(--c_bg_card));
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--c_primary) 18%, transparent);
}
.form_step.is_current .form_step_label {
  color: var(--c_primary);
}
/* ── ページヘッダー（小） ── */
.form_page_head {
  max-width: var(--max_text_width);
  margin-inline: auto;
  margin-bottom: var(--space_xl);
  text-align: left;
}
.form_page_label {
  display: inline-block;
  margin-bottom: 8px;
  font-family: var(--font_en);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c_primary);
}
.form_page_title {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.4;
  color: var(--c_text);
  margin: 0 0 12px;
}
.form_page_text {
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
  color: var(--c_text_muted);
}
/* CMS 本文(.post_article_body / .lower_body_inner)内でフォームを使う際の打ち消し（詳細度確保） */
.form_page_wrap .form_steps {
  list-style: none;
  padding-left: 0;
  margin: 0 auto var(--space_2xl);
}
.form_page_wrap .form_steps li {
  list-style: none;
  margin-bottom: 0;
  padding-left: 0;
}
.form_page_wrap .form_steps li::before, .form_page_wrap .form_steps li::marker {
  content: none;
}
.form_page_wrap .form_page_title, .form_page_wrap .form_complete_title, .form_page_wrap .form_event_summary_title {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  border-left: 0;
  margin-top: 0;
}
.form_page_wrap .form_page_title::before, .form_page_wrap .form_complete_title::before, .form_page_wrap .form_event_summary_title::before {
  content: none;
}
.form_page_wrap .form_confirm_list, .form_page_wrap .form_confirm_list dt, .form_page_wrap .form_confirm_list dd {
  margin: 0;
  padding-left: 0;
  list-style: none;
}
.form_page_wrap .form_confirm_row dt {
  padding: 16px 20px;
}
.form_page_wrap .form_confirm_row dd {
  padding: 16px 20px;
}
/* ── 確認ページの dl テーブル ── */
.form_confirm {
  max-width: var(--max_text_width);
  margin-inline: auto;
}
.form_confirm_list {
  margin: 0;
  border: 1px solid var(--c_border);
  border-radius: var(--radius_md);
  background-color: var(--c_bg_card);
  overflow: hidden;
}
.form_confirm_row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 0;
  border-bottom: 1px solid var(--c_border);
}
.form_confirm_row:last-child {
  border-bottom: 0;
}
.form_confirm_row dt {
  padding: 16px 20px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--c_text_muted);
  background: color-mix(in oklab, var(--c_primary) 4%, var(--c_bg_card));
  border-right: 1px solid var(--c_border);
}
.form_confirm_row dd {
  margin: 0;
  padding: 16px 20px;
  font-size: 14px;
  line-height: 1.85;
  color: var(--c_text);
}
.form_confirm_row dd.is_long {
  white-space: pre-line;
}
.form_confirm_empty {
  color: var(--c_text_muted);
  font-size: 13px;
}
.form_error_box {
  max-width: var(--max_text_width);
  margin: 0 auto var(--space_lg);
  padding: 16px 20px;
  border: 1px solid var(--c_state_danger);
  border-radius: var(--radius_sm);
  background: color-mix(in oklab, var(--c_state_danger) 8%, var(--c_bg_card));
}
.form_error_box_title {
  margin: 0 0 6px;
  font-weight: 700;
  color: var(--c_state_danger);
}
.form_error_box ul {
  margin: 0;
  padding-left: 1.3em;
}
.form_error_box li {
  font-size: 14px;
  line-height: 1.8;
  color: var(--c_text);
}
.form_recaptcha {
  display: flex;
  justify-content: center;
  margin: 0 auto var(--space_lg);
}
@media (max-width: 640px) {
  .form_confirm_row {
    grid-template-columns: 1fr;
  }
  .form_confirm_row dt {
    border-right: 0;
    border-bottom: 1px solid var(--c_border);
  }
}
/* ── 同意事項 ── */
.form_confirm_agree {
  max-width: var(--max_text_width);
  margin: var(--space_lg) auto 0;
  padding: 16px 20px;
  border: 1px solid var(--c_border);
  border-left: 3px solid var(--c_primary);
  border-radius: 0 var(--radius_md) var(--radius_md) 0;
  background: color-mix(in oklab, var(--c_primary) 4%, var(--c_bg_card));
}
.form_confirm_agree_label {
  margin: 0 0 4px;
  font-family: var(--font_en);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c_primary);
}
.form_confirm_agree_text {
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--c_text);
}
/* ── アクション ── */
.form_actions {
  max-width: var(--max_text_width);
  margin: var(--space_2xl) auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space_md);
  flex-wrap: wrap;
}
.form_actions .btn {
  min-width: 0;
  padding-inline: 28px;
}
.form_actions .btn_back {
  order: 1;
}
.form_actions .btn_submit {
  order: 2;
}
.form_actions .btn .material-symbols-outlined {
  font-size: 18px;
}
.form_actions .btn_back .material-symbols-outlined {
  margin-right: 8px;
}
.form_actions .btn_submit .material-symbols-outlined {
  margin-left: 8px;
}
.form_actions .btn_submit::after {
  content: none;
}
.form_actions .btn_back::after {
  content: none;
}
@media (max-width: 640px) {
  .form_actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .form_actions .btn {
    width: 100%;
  }
}
/* ── 送信完了 ── */
.form_complete {
  max-width: var(--max_text_width);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space_lg);
}
.form_complete_card {
  position: relative;
  padding: clamp(40px, 6vw, 64px) clamp(28px, 4vw, 56px);
  border: 1px solid var(--c_border);
  border-radius: var(--radius_md);
  background: radial-gradient(circle at 80% 0%, color-mix(in oklab, var(--c_primary) 12%, transparent) 0%, transparent 60%), var(--c_bg_card);
  text-align: center;
}
.form_complete_icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--c_primary) 14%, var(--c_bg_card));
  border: 1px solid var(--c_primary);
  margin: 0 auto var(--space_md);
  color: var(--c_primary);
}
.form_complete_icon .material-symbols-outlined {
  font-size: 40px;
  font-variation-settings: "FILL" 1, "wght" 500;
}
.form_complete_label {
  display: inline-block;
  font-family: var(--font_en);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c_primary);
  margin-bottom: 8px;
}
.form_complete_title {
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.3;
  color: var(--c_text);
  margin: 0 0 var(--space_md);
}
.form_complete_text {
  font-size: 15px;
  line-height: 2;
  color: var(--c_text_muted);
  margin: 0 auto var(--space_lg);
  max-width: 56ch;
}
.form_complete_text strong {
  color: var(--c_text);
  font-weight: 600;
}
.form_complete_meta {
  display: inline-grid;
  grid-template-columns: auto auto;
  gap: 6px 24px;
  padding: 16px 28px;
  margin: 0 auto var(--space_lg);
  border: 1px solid var(--c_border);
  border-radius: var(--radius_sm);
  background: color-mix(in oklab, var(--c_bg_base) 70%, transparent);
  text-align: left;
}
.form_complete_meta > div {
  display: contents;
}
.form_complete_meta dt {
  font-family: var(--font_en);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c_text_muted);
}
.form_complete_meta dd {
  margin: 0;
  font-family: var(--font_en);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--c_text);
}
.form_complete_actions {
  display: flex;
  justify-content: center;
  gap: var(--space_sm);
  flex-wrap: wrap;
}
.form_complete_notes {
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--c_border);
  border-radius: var(--radius_md);
  background: var(--c_bg_card);
}
.form_complete_notes_title {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--c_text);
  display: flex;
  align-items: center;
  gap: 10px;
}
.form_complete_notes_title::before {
  content: "!";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--c_primary);
  color: #fff;
  font-family: var(--font_en);
  font-size: 11px;
  font-weight: 800;
  flex: 0 0 auto;
}
.form_complete_notes ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form_complete_notes li {
  position: relative;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.85;
  color: var(--c_text_muted);
}
.form_complete_notes li::before {
  content: "•";
  position: absolute;
  left: 4px;
  color: var(--c_primary);
}
.form_complete_notes code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 12.5px;
  padding: 2px 6px;
  background: color-mix(in oklab, var(--c_bg_base) 70%, var(--c_bg_section));
  border: 1px solid var(--c_border);
  border-radius: var(--radius_sm);
  color: var(--c_text);
}
/* ============================================================
 * 18. フォーム入力（共通）
 *   .form_main / .form_field_list / .form_field / .form_radio / .form_check
 *   .form_agree / 入力 controls
 *   page_module.css の .form_set とは独立した、Container Console 用のフォーム。
 * ============================================================ */
.form_main {
  max-width: var(--max_text_width);
  margin-inline: auto;
}
.form_field_list {
  border: 1px solid var(--c_border);
  border-radius: var(--radius_md);
  background-color: var(--c_bg_card);
  overflow: hidden;
}
.form_field {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0;
  border-bottom: 1px solid var(--c_border);
  align-items: start;
}
.form_field:last-child {
  border-bottom: 0;
}
.form_field_label {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  padding: 20px 20px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--c_text);
  background: color-mix(in oklab, var(--c_primary) 4%, var(--c_bg_card));
  border-right: 1px solid var(--c_border);
  min-height: 60px;
  align-self: stretch;
}
.form_field_input {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
@media (max-width: 700px) {
  .form_field {
    grid-template-columns: 1fr;
  }
  .form_field_label {
    border-right: 0;
    border-bottom: 1px solid var(--c_border);
  }
}
.required_mark {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-family: var(--font_en);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #fff;
  background: var(--c_state_danger, #c0556a);
  border-radius: var(--radius_sm);
  margin-left: auto;
  flex-shrink: 0;
  white-space: nowrap;
}
.form_field_optional {
  margin-left: auto;
  font-family: var(--font_en);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--c_text_muted);
}
.form_field_help {
  margin: 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--c_text_muted);
}
.form_required_note {
  display: inline-block;
  margin-left: 8px;
  font-size: 13px;
}
.form_required_note .required_mark {
  margin-left: 0;
}
.form_field_input input[type="text"], .form_field_input input[type="email"], .form_field_input input[type="tel"], .form_field_input input[type="url"], .form_field_input input[type="search"], .form_field_input input[type="number"], .form_field_input input[type="date"], .form_field_input textarea, .form_field_input select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  font-family: var(--font_base);
  font-weight: 500;
  line-height: 1.6;
  color: var(--c_text);
  background-color: var(--c_bg_base);
  border: 1px solid var(--c_border);
  border-radius: var(--radius_sm);
  transition: border-color var(--transition_fast), box-shadow var(--transition_fast);
}
.form_field_input textarea {
  resize: vertical;
  min-height: 140px;
}
.form_field_input input:hover, .form_field_input textarea:hover, .form_field_input select:hover {
  border-color: var(--c_border_strong);
}
.form_field_input input:focus-visible, .form_field_input textarea:focus-visible, .form_field_input select:focus-visible {
  outline: none;
  border-color: var(--c_primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--c_primary) 22%, transparent);
}
.form_field_input input::placeholder, .form_field_input textarea::placeholder {
  color: color-mix(in oklab, var(--c_text_muted) 70%, transparent);
}
/* ラジオ / チェックボックス */
.form_radio_group, .form_checkbox_group {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.form_radio, .form_check {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.form_radio input, .form_check input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}
.form_radio > span, .form_check > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--c_text);
  border: 1px solid var(--c_border);
  border-radius: var(--radius_pill);
  background-color: var(--c_bg_card);
  transition: border-color var(--transition_fast), color var(--transition_fast), background-color var(--transition_fast);
}
.form_radio > span::before, .form_check > span::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--c_border_strong);
  background: var(--c_bg_base);
  flex: 0 0 auto;
}
.form_radio > span::before {
  border-radius: 50%;
}
.form_check > span::before {
  border-radius: 3px;
}
.form_radio:hover > span, .form_check:hover > span {
  border-color: var(--c_primary);
  color: var(--c_text);
}
.form_radio input:checked + span, .form_check input:checked + span {
  border-color: var(--c_primary);
  color: var(--c_primary);
  background-color: color-mix(in oklab, var(--c_primary) 8%, var(--c_bg_card));
}
.form_radio input:checked + span::before {
  border-color: var(--c_primary);
  background: radial-gradient(circle, var(--c_primary) 0 4px, var(--c_bg_base) 5px 100%);
}
.form_check input:checked + span::before {
  background: var(--c_primary);
  border-color: var(--c_primary);
  background-image: linear-gradient(45deg, transparent 38%, #fff 38% 52%, transparent 52%), linear-gradient(135deg, transparent 38%, #fff 38% 52%, transparent 52%);
  background-position: 1px 4px, 6px -1px;
  background-size: 6px 2px, 9px 2px;
  background-repeat: no-repeat;
}
.form_radio input:focus-visible + span, .form_check input:focus-visible + span {
  outline: 2px solid var(--c_primary);
  outline-offset: 2px;
}
/* 同意ブロック（入力ページ） */
.form_agree {
  max-width: var(--max_text_width);
  margin: var(--space_xl) auto 0;
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--c_border);
  border-radius: var(--radius_md);
  background-color: var(--c_bg_card);
}
.form_agree_label {
  margin: 0 0 12px;
  font-family: var(--font_en);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c_primary);
}
.form_agree_box {
  max-height: 180px;
  overflow-y: auto;
  padding: 16px 18px;
  border: 1px solid var(--c_border);
  border-radius: var(--radius_sm);
  background: var(--c_bg_base);
  font-size: 13px;
  line-height: 1.95;
  color: var(--c_text_muted);
}
.form_agree_box p {
  margin: 0 0 10px;
}
.form_agree_box p:last-child {
  margin-bottom: 0;
}
.form_agree_box:focus-visible {
  outline: 2px solid var(--c_primary);
  outline-offset: 2px;
}
.form_agree_check {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--c_text);
}
.form_agree_check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--c_border_strong);
  border-radius: 4px;
  background: var(--c_bg_base);
  cursor: pointer;
  position: relative;
  flex: 0 0 auto;
}
.form_agree_check input[type="checkbox"]:checked {
  background: var(--c_primary);
  border-color: var(--c_primary);
}
.form_agree_check input[type="checkbox"]:checked::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 6px;
  height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}
.form_agree_check input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--c_primary);
  outline-offset: 2px;
}
/* 申込前のイベントカード（参加申し込み入力ページ用） */
.form_event_summary {
  max-width: var(--max_text_width);
  margin: 0 auto var(--space_2xl);
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--c_border);
  border-radius: var(--radius_md);
  background: radial-gradient(circle at 90% 0%, color-mix(in oklab, var(--c_primary) 10%, transparent) 0%, transparent 60%), var(--c_bg_card);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(16px, 3vw, 32px);
  align-items: center;
}
.form_event_summary_label {
  display: inline-block;
  font-family: var(--font_en);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c_primary);
  margin-bottom: 6px;
}
.form_event_summary_title {
  font-size: clamp(17px, 2.2vw, 22px);
  font-weight: 600;
  letter-spacing: -0.012em;
  margin: 0 0 var(--space_sm);
  color: var(--c_text);
  text-wrap: balance;
}
.form_event_summary_meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  font-size: 13px;
  color: var(--c_text_muted);
}
.form_event_summary_meta li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.form_event_summary_meta .material-symbols-outlined {
  font-size: 16px;
  color: var(--c_primary);
}
.form_event_summary_status {
  flex: 0 0 auto;
  align-self: start;
}
@media (max-width: 700px) {
  .form_event_summary {
    grid-template-columns: 1fr;
  }
  .form_event_summary_status {
    align-self: start;
  }
}
/* ============================================================
 * 19. フォームステータスブロック（満員 / 終了 など、フォーム閉鎖時）
 * ============================================================ */
.form_status_block {
  max-width: var(--max_text_width);
  margin-inline: auto;
  padding: clamp(36px, 5vw, 56px) clamp(28px, 4vw, 48px);
  border: 1px solid var(--c_border);
  border-radius: var(--radius_md);
  background: radial-gradient(circle at 80% 0%, color-mix(in oklab, var(--c_primary) 10%, transparent) 0%, transparent 60%), var(--c_bg_card);
  text-align: center;
}
.form_status_block_icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 1px solid var(--c_border_strong);
  background: color-mix(in oklab, var(--c_bg_base) 60%, transparent);
  color: var(--c_text_muted);
  margin: 0 auto var(--space_md);
}
.form_status_block_icon .material-symbols-outlined {
  font-size: 36px;
  font-variation-settings: "FILL" 0, "wght" 400;
}
.form_status_block_label {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 14px;
  font-family: var(--font_en);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-radius: var(--radius_sm);
  border: 1px solid transparent;
}
.form_status_block_label.is_full {
  color: #5b6573;
  background: #eef0f4;
  border-color: #d6dae2;
}
.form_status_block_label.is_closed {
  color: #6f6b96;
  background: #ecebf4;
  border-color: #cfcde0;
}
.form_status_block_label.is_soon {
  color: #a36b1f;
  background: #fbf1de;
  border-color: #ecd9a8;
}
[data-theme="dark"] .form_status_block_label.is_full {
  color: #aab3c0;
  background: #232a36;
  border-color: #36404e;
}
[data-theme="dark"] .form_status_block_label.is_closed {
  color: #b7b3d4;
  background: #28253c;
  border-color: #3d3a56;
}
[data-theme="dark"] .form_status_block_label.is_soon {
  color: #ecc585;
  background: #3a2d18;
  border-color: #5a4528;
}
.form_status_block_title {
  font-size: clamp(22px, 2.8vw, 30px);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.4;
  color: var(--c_text);
  margin: 0 0 var(--space_md);
  text-wrap: balance;
}
.form_status_block_text {
  font-size: 15px;
  line-height: 2;
  color: var(--c_text_muted);
  margin: 0 auto var(--space_lg);
  max-width: 56ch;
}
.form_status_block_text strong {
  color: var(--c_text);
  font-weight: 600;
}
.form_status_block_actions {
  display: flex;
  justify-content: center;
  gap: var(--space_sm);
  flex-wrap: wrap;
  margin-bottom: var(--space_lg);
}
.form_status_block_actions .btn .material-symbols-outlined {
  font-size: 18px;
  margin-right: 6px;
}
.form_status_block_actions .btn::after {
  content: none;
}
.form_status_block_notes {
  margin-top: var(--space_md);
  padding: clamp(18px, 2.5vw, 24px);
  border: 1px solid var(--c_border);
  border-radius: var(--radius_md);
  background: color-mix(in oklab, var(--c_bg_base) 60%, transparent);
  text-align: left;
}
.form_status_block_notes_title {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--c_text);
  display: flex;
  align-items: center;
  gap: 10px;
}
.form_status_block_notes_title::before {
  content: "i";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--c_primary);
  color: #fff;
  font-family: var(--font_en);
  font-size: 11px;
  font-weight: 800;
  flex: 0 0 auto;
  font-style: italic;
}
.form_status_block_notes ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form_status_block_notes li {
  position: relative;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.85;
  color: var(--c_text_muted);
}
.form_status_block_notes li::before {
  content: "•";
  position: absolute;
  left: 4px;
  color: var(--c_primary);
}
.form_status_block_notes strong {
  color: var(--c_text);
  font-weight: 600;
}