/*
Theme Name: Mimi Ballet Atelier
Theme URI: https://mimi-ballet-studio.com/
Author: Mimi Ballet Atelier
Description: Mimi Ballet Atelier 公式サイト用の自作テーマ。ビルドツールなし・素のCSS/JS。
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 8.2
Text Domain: mimi-ballet
*/

/* ==========================================================================
   トークン（出典: _docs/40_デザイン仕様.md）
   色・余白・書体はここにしか書かない。各所でハードコードしない。
   ========================================================================== */

:root {
  /* --- 色：看板から採色（40 1章） --- */
  --c-beige:        #E8CEB0; /* 看板の円の地色。面の強調 */
  --c-brown:        #2D1902; /* 看板の背景色。見出し・ヘッダー・CTA */
  --c-bg:           #FAF4EC; /* 背景ベース */
  --c-bg-sub:       #F2E6D6; /* 背景サブ（セクション交互） */
  --c-bg-adult:     #F6F4F1; /* 大人セクション背景【要確定・40 1章末尾】 */
  --c-text:         #3D2B17; /* 本文 12.35:1 */
  --c-text-sub:     #64523C; /* 補助 6.83:1 */
  --c-link:         #7A5230; /* リンク 6.24:1 */
  --c-rule:         #E2D3BE; /* 罫線・区切り */
  --c-white:        #FFFFFF; /* TOPのヒーローの文字・ロゴ（写真の上は白で統一・2026-09-27 本人決定） */
  /* 体験申込とフォーム送信は看板のベージュ（--c-beige）、公式LINEはLINEの緑に白文字（2026-09-27 本人決定・D案） */
  --c-line:         #06C755;

  /* --- 書体（40 2章） --- */
  --f-en:     "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --f-mincho: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --f-gothic: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;

  /* --- 文字サイズ：PC（40 2章） --- */
  --fs-h1: 46px;
  --fs-h2: 34px;
  --fs-h3: 20px;
  --fs-lead: 17px;
  --fs-body: 16px;
  --fs-note: 13.5px;
  --fs-eyebrow: 12px;
  --fs-btn: 16px;

  /* --- 字送り・行間 --- */
  --ls-h1: 0.10em;
  --ls-h2: 0.05em;
  --ls-h3: 0.05em;
  --ls-eyebrow: 0.34em;
  --ls-btn: 0.08em;
  --lh-heading: 1.6;
  --lh-lead: 2.05;
  --lh-body: 1.85;
  --lh-note: 1.9;

  /* --- 余白・レイアウト（40 3章） --- */
  --w-max: 1120px;
  --w-read: 720px;
  --pad-x: 40px;
  --gap-section: 128px;
  --gap-col3: 36px;
  --gap-col2: 62px;
  --bar-h: 62px;
  --pad-bottom-bar: 72px;

  /* --- 形（40 4章）：角丸0・影なし。写真も含めて全要素 --- */
  --radius: 0;
  --shadow: none;

  /* --- 下位ページの追加トークン（40 12章・13章｜T2 セクションTOP／T3 クラス詳細） --- */
  --h-notice-bar:   44px;   /* 最上部の告知バー */
  --h-header:       82px;
  --h-hero:         780px;  /* TOPのヒーロー（40 6章・案A） */
  --h-hero-sub:     520px;  /* 下位ページのヒーロー。TOPより低くして階層を示す */
  /* --- 動き（落ち着いた速さ。文字は左から書くように現れる） --- */
  --ease-calm:      cubic-bezier(0.25, 0.1, 0.25, 1);
  --dur-write:      2.4s;
  --dur-fade:       1.4s;
  --mask-write:     linear-gradient(90deg, #000 42%, transparent 58%);

  --scrim:          rgba(45, 25, 2, 0.46); /* 写真に文字を乗せるときの濃茶。濃度はこの1種類だけ（40 9.5） */
  --gap-block:      64px;   /* 1セクションの中のブロック間 */
  --gap-card-row:   56px;   /* カードグリッドの行間 */
  --gap-para:       22px;   /* 段落間 */
  --col-flow:       120px;  /* 「レッスンの流れ」表の左列（時間） */
  --col-day:        128px;  /* 「曜日・時間」表の左列（曜日） */
  --h-nav-anchor:   64px;   /* T3のページ内アンカーナビ（sticky） */
}

/* ==========================================================================
   大人セクションの配色（40 1章末尾・2026-09-21確定）
   ロゴ・書体・レイアウトは子供と共通。変えるのは背景の温度と、濃茶ベタの面積だけ。
   body に .p-adult を付けると、ページ全体がこの値に切り替わる。
   ========================================================================== */

.p-adult {
  --c-bg:     #F6F4F1; /* 温度を下げたニュートラル */
  --c-bg-sub: #EDE9E4;
  --c-rule:   #DCD6CE;
}

@media (max-width: 768px) {
  :root {
    --fs-h1: 26px;
    --fs-h2: 26px;
    --fs-h3: 17px;
    --fs-lead: 15px;
    --fs-body: 15px;
    --fs-note: 12.5px;
    --fs-eyebrow: 10.5px;
    --fs-btn: 15px;
    --pad-x: 22px;
    --gap-section: 68px;
    --h-header: 64px;
    --h-hero: 650px;
    --h-hero-sub: 420px;
    --gap-block: 40px;
    --col-flow: 84px;
    --col-day: 92px;
  }
}

/* ==========================================================================
   リセット（最小限）
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ==========================================================================
   ベース
   ========================================================================== */

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-gothic);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  padding-bottom: var(--pad-bottom-bar);
}

h1, h2, h3, h4 {
  font-family: var(--f-mincho);
  font-weight: 400;
  color: var(--c-brown);
  line-height: var(--lh-heading);
}

h1 { font-size: var(--fs-h1); letter-spacing: var(--ls-h1); }
h2 { font-size: var(--fs-h2); letter-spacing: var(--ls-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: var(--ls-h3); font-weight: 500; }

p + p { margin-top: 22px; }

a { color: var(--c-link); }

/* 英字小見出し（アイブロウ） */
.eyebrow {
  font-family: var(--f-en);
  font-size: var(--fs-eyebrow);
  font-weight: 300;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-text-sub);
}

.lead { font-size: var(--fs-lead); line-height: var(--lh-lead); }
.note { font-size: var(--fs-note); line-height: var(--lh-note); color: var(--c-text-sub); }

/* ==========================================================================
   レイアウト
   ========================================================================== */

.l-container {
  width: 100%;
  max-width: calc(var(--w-max) + var(--pad-x) * 2);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.l-read { max-width: var(--w-read); margin-inline: auto; }

.l-section { padding-block: var(--gap-section); }
.l-section--sub { background: var(--c-bg-sub); }

/* ==========================================================================
   ボタン（40 4章）
   ========================================================================== */

.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 58px;
  padding-inline: 38px;
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--c-brown);
  color: var(--c-beige);
  font-size: var(--fs-btn);
  font-weight: 500;
  letter-spacing: var(--ls-btn);
  text-decoration: none;
  cursor: pointer;
}

/* 写真・濃茶の上に置くとき */
.c-btn--invert { background: var(--c-beige); color: var(--c-brown); }

.c-btn--sub {
  min-height: 48px;
  padding-inline: 24px;
  background: transparent;
  color: var(--c-brown);
  border: 1px solid var(--c-brown);
}

/* ==========================================================================
   表・引用（40 4章）
   ========================================================================== */

.c-table { width: 100%; border-collapse: collapse; }
.c-table th, .c-table td {
  padding-block: 26px;
  border-bottom: 1px solid var(--c-rule);
  text-align: left;
  vertical-align: top;
}

.c-quote { border-left: 2px solid var(--c-beige); padding-left: 18px; }

/* ==========================================================================
   写真枠の縦横比（40 5章）
   ========================================================================== */

.c-fig { border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.c-fig img { width: 100%; height: 100%; object-fit: cover; }

.is-16x9 { aspect-ratio: 16 / 9; }
.is-3x2  { aspect-ratio: 3 / 2; }
.is-1x1  { aspect-ratio: 1 / 1; }
.is-4x5  { aspect-ratio: 4 / 5; }

/* ==========================================================================
   アクセシビリティ
   ========================================================================== */

.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link:focus {
  position: fixed; top: 8px; left: 8px; z-index: 100;
  width: auto; height: auto; clip-path: none;
  padding: 12px 18px; background: var(--c-brown); color: var(--c-beige);
}