@charset "UTF-8";
/* ==========================================================================
   components.css ｜ 複数のテンプレートで使い回す部品（接頭辞 c-）
   --------------------------------------------------------------------------
   出典：_docs/40_デザイン仕様.md 4章・5章・12章・13章
   ルール：
     1. 1部品＝1ブロック。ページ固有の事情をここに書かない（p- 側へ）
     2. 数値はカスタムプロパティのみ。角丸0・影なし
     3. 部品の外側の余白（margin）は持たせない。配置は親（l- / p-）が決める
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 下位ページのヒーロー（T2）
   TOPは780px。下位ページは --h-hero-sub で一段低くし、階層を見せる。
   -------------------------------------------------------------------------- */

.c-hero-sub { position: relative; height: var(--h-hero-sub); overflow: hidden; }

.c-hero-sub__media { position: absolute; inset: 0; }
.c-hero-sub__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }

/* 写真に文字を乗せるときのオーバーレイは1種類だけ（40 9.5） */
.c-hero-sub__scrim { position: absolute; inset: 0; background: var(--scrim); }

.c-hero-sub__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  height: 100%;
  color: var(--c-beige);
}

.c-hero-sub__inner h1,
.c-hero-sub__inner .eyebrow { color: var(--c-beige); }
.c-hero-sub__lead { color: var(--c-beige); }

/* --------------------------------------------------------------------------
   2. ページヘッダー（T3）
   クラス詳細は10ページあり、全ページ分の写真が揃わない。
   写真を前提にしないベージュ帯を既定にする。
   -------------------------------------------------------------------------- */

.c-page-head { padding-block: 72px; background: var(--c-beige); }

.c-page-head__inner { display: flex; flex-direction: column; gap: 16px; }
/* タイトル下のリード（page-head・hero・c-head）は幅を制限しない。PCで1行に収まる文は1行で出す（2026-09-27 本人希望） */
.c-page-head__lead { color: var(--c-text); }

/* 「秋ごろ開講予定」「開講準備中」 */
.c-status {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 30px;
  padding-inline: 14px;
  border: 1px solid var(--c-brown);
  color: var(--c-brown);
  font-size: var(--fs-note);
  letter-spacing: 0.08em;
}

.c-status--on-beige { background: var(--c-bg); }

/* --------------------------------------------------------------------------
   3. ページ内アンカーナビ（T3・年齢別ブロックを持つページ）
   -------------------------------------------------------------------------- */

.c-anchor-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-rule);
}

.c-anchor-nav ul {
  display: flex;
  align-items: center;
  gap: 32px;
  min-height: var(--h-nav-anchor);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
}

.c-anchor-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--c-text);
  font-size: 14px;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
}

.c-anchor-nav a:hover { color: var(--c-brown); text-decoration: underline; text-underline-offset: 6px; }

/* --------------------------------------------------------------------------
   4. 仮画像（写真が入るまでの枠）
   10月の撮影で <img> に差し替える。縦横比クラスは style.css 側。
   -------------------------------------------------------------------------- */

.c-ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px;
  background: var(--c-bg-sub);
  outline: 1px dashed var(--c-rule);
  outline-offset: -1px;
  color: var(--c-text-sub);
  font-size: var(--fs-note);
  line-height: 1.7;
  text-align: center;
}

/* スロット名（`42_写真スロット一覧.md` のファイル名と一致させる） */
.c-ph__name {
  font-family: var(--f-en);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-brown);
}

/* --------------------------------------------------------------------------
   5. 見出しブロック（アイブロウ＋H2＋リード）
   -------------------------------------------------------------------------- */

.c-head { display: flex; flex-direction: column; gap: 14px; }

/* --------------------------------------------------------------------------
   6. 2カラム（文章＋写真）
   -------------------------------------------------------------------------- */

.c-media {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-col2);
  align-items: center;
}

.c-media--reverse .c-media__body { order: 2; }
.c-media__body { display: flex; flex-direction: column; gap: var(--gap-para); }

/* --------------------------------------------------------------------------
   7. クラスカード（T2のクラス一覧）
   枠も影も付けない。余白だけで区切る（40 4章）
   -------------------------------------------------------------------------- */

.c-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-card-row) var(--gap-col3);
}

.c-card { display: flex; flex-direction: column; gap: 16px; }
.c-card__media { display: block; }
.c-card__title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.c-card__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--fs-note);
  line-height: var(--lh-note);
  color: var(--c-text-sub);
}

.c-card__text { font-size: 15px; }

.c-card__link {
  margin-top: auto;
  padding-top: 4px;
  font-size: 14px;
  letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   8. 表
   料金・時間・曜日は必ずテキストの表で出す。画像にしない（10 8.3）
   -------------------------------------------------------------------------- */

.c-table caption {
  margin-bottom: 14px;
  color: var(--c-text-sub);
  font-size: var(--fs-note);
  text-align: left;
}

.c-table thead th {
  padding-block: 14px;
  border-bottom: 1px solid var(--c-brown);
  font-size: var(--fs-note);
  color: var(--c-text-sub);
}

/* レッスンの流れ：左列は時間（--col-flow） */
.c-flow th { width: var(--col-flow); color: var(--c-text-sub); }
/* 流れの表の中の補足（本文と表で同じことを2回書かない） */
.c-flow__note { display: block; margin-top: 4px; font-size: var(--fs-note); line-height: var(--lh-note); color: var(--c-text-sub); }

/* 曜日・時間：左列は曜日（--col-day） */
.c-days th { width: var(--col-day); }

/* 項目名が長い2列の表（料金の内訳・お支払い・ご用意いただくもの）。
   --col-day は曜日の幅なので、「体験当日にご入会の場合」のような項目名が折り返す */
.c-terms th { width: 14em; }

/* 週間スケジュール（抜粋） */
.c-schedule { table-layout: fixed; }
.c-schedule th:first-child { width: var(--col-flow); color: var(--c-text-sub); }
.c-schedule thead th { text-align: center; }
.c-schedule td { text-align: center; font-size: 15px; }
.c-schedule td:empty::after { content: "—"; color: var(--c-rule); }

/* 2つの表を横に並べる（PCのみ） */
.c-table-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-col2); }

/* --------------------------------------------------------------------------
   9. 箇条書き
   -------------------------------------------------------------------------- */

.c-list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }

.c-list li { position: relative; padding-left: 22px; }

.c-list li::before {
  content: "";
  position: absolute;
  top: 0.75em;
  left: 0;
  width: 10px;
  height: 1px;
  background: var(--c-brown);
}

/* --------------------------------------------------------------------------
   10. 引用（保護者の声）
   -------------------------------------------------------------------------- */

.c-quote { border-left: 2px solid var(--c-beige); padding-left: 18px; }
.c-quote__body { font-size: 15px; }
.c-quote footer { margin-top: 14px; font-size: var(--fs-note); color: var(--c-text-sub); }

/* 声の3件並び。TOP・子供クラスTOP・大人クラスTOPの3か所で使うので c- に置く
   （50 7.2 ／ 2026-09-21。旧 .p-section-top__voices ・ .p-section-top__voice）
   ※ TOPは t2-section-top.css を読まないため、T2側に置いたままだと効かなかった */
.c-voices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-col3);
}

.c-voice { display: flex; flex-direction: column; gap: 18px; }

/* --------------------------------------------------------------------------
   11. FAQ
   アコーディオンにしない。開いた状態で出す（AI検索・SEOのため）
   -------------------------------------------------------------------------- */

.c-faq { display: flex; flex-direction: column; }

.c-faq__item { padding-block: 28px; border-bottom: 1px solid var(--c-rule); }
.c-faq__item:first-child { border-top: 1px solid var(--c-rule); }

.c-faq__q {
  display: flex;
  gap: 14px;
  font-family: var(--f-mincho);
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--c-brown);
  line-height: var(--lh-heading);
}

.c-faq__q::before { content: "Q."; font-family: var(--f-en); color: var(--c-text-sub); }
.c-faq__a { margin-top: 14px; padding-left: 32px; }

/* --------------------------------------------------------------------------
   12. 公式LINEの受け皿（開講準備中のページで使う）
   -------------------------------------------------------------------------- */

.c-line-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding: 40px;
  background: var(--c-beige);
}

.c-line-block__title { font-family: var(--f-mincho); font-size: var(--fs-h3); color: var(--c-brown); }

/* QRコード（パソコン向け。スマホでは自分の画面を読み取れないので出さない） */
.c-line-qr { display: flex; align-items: center; gap: 20px; }
.c-line-qr img { width: 120px; height: 120px; flex: none; }
.c-line-qr figcaption { max-width: 22em; }

/* --------------------------------------------------------------------------
   13. CTA帯（全ページの末尾）
   -------------------------------------------------------------------------- */

.c-cta-band { padding-block: 120px; background: var(--c-brown); color: var(--c-beige); }

.c-cta-band h2,
.c-cta-band .eyebrow { color: var(--c-beige); }

.c-cta-band__inner { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.c-cta-band__note { color: var(--c-beige); opacity: 0.85; }

.c-btn-row { display: flex; flex-wrap: wrap; gap: 16px; }
.c-btn-row--center { justify-content: center; }

/* --------------------------------------------------------------------------
   14. 対象年齢チャート（インラインSVG）
   線1.6px・濃茶1色・地はベージュ・塗りなし（40 6章）
   -------------------------------------------------------------------------- */

.c-age-chart { padding: 40px; background: var(--c-beige); }
.c-age-chart svg { width: 100%; height: auto; color: var(--c-brown); }
.c-age-chart text { font-family: var(--f-gothic); fill: var(--c-brown); }
.c-age-chart .is-axis { font-size: 13px; fill: var(--c-text-sub); }

/* --------------------------------------------------------------------------
   15. 濃茶ベタのヒーロー（大人セクション）
   大人は「濃茶ベタの面積を多め」にして落ち着きを出す（40 1章末尾）。
   写真がなくても成立するので、大人の写真が揃うまでの受け皿にもなる。
   -------------------------------------------------------------------------- */

.c-hero-solid { padding-block: 88px; background: var(--c-brown); color: var(--c-beige); }

.c-hero-solid__inner { display: flex; flex-direction: column; gap: 20px; }
.c-hero-solid h1,
.c-hero-solid .eyebrow { color: var(--c-beige); }
.c-hero-solid__lead { color: var(--c-beige); }
.c-hero-solid .c-btn-row { margin-top: 12px; }

/* ファーストビューで答える3つの事実（迷いの即答） */
.c-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-col3);
  margin-top: 40px;
}

.c-fact { padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--c-beige) 45%, transparent); }

.c-fact__value {
  display: block;
  font-family: var(--f-mincho);
  font-size: 22px;
  letter-spacing: 0.04em;
  color: var(--c-beige);
}

.c-fact__label { display: block; margin-top: 6px; font-size: var(--fs-note); color: var(--c-beige); opacity: 0.82; }

/* 明るい背景の上で使うとき（子供セクションのCTA帯など） */
.c-facts--light .c-fact { border-top-color: var(--c-rule); }
.c-facts--light .c-fact__value { color: var(--c-brown); }
.c-facts--light .c-fact__label { color: var(--c-text-sub); opacity: 1; }

/* 事実の並び。p + p の段落間の余白を打ち消して、上の罫線の高さをそろえる */
.c-facts > .c-fact { margin-top: 0; }

/* 2つだけ並べるとき（スタジオの床と鏡） */
.c-facts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* --------------------------------------------------------------------------
   16. 時間割の帯（インラインSVG）
   「送迎の日に、もう1コマ」を文章ではなく形で見せる。
   -------------------------------------------------------------------------- */

.c-timeline { padding: 40px; background: var(--c-beige); }
.c-timeline svg { width: 100%; height: auto; }
.c-timeline text { font-family: var(--f-gothic); fill: var(--c-brown); }
.c-timeline .is-axis { font-size: 13px; fill: var(--c-text-sub); }

/* スマホ用の文字の一覧（図の代わり）。PCでは出さない */
.c-timeline__list { display: none; }
.c-timeline__list > div + div { margin-top: 20px; }
.c-timeline__list dt { font-family: var(--f-mincho); color: var(--c-brown); }
.c-timeline__list dd { display: flex; gap: 16px; margin-top: 8px; padding: 10px 14px; border: 1.6px solid var(--c-brown); color: var(--c-brown); }
.c-timeline__list dd span { flex: none; width: 7.5em; font-size: var(--fs-note); color: var(--c-text-sub); }
.c-timeline__list dd.is-kids { border-style: dashed; }

/* --------------------------------------------------------------------------
   17. TOPのヒーロー（40 6章・案A）
   円形ロゴの代わりに白抜きの縦組みロゴを中央に置く（40 8.5-3）
   -------------------------------------------------------------------------- */

.c-hero { position: relative; height: var(--h-hero); overflow: hidden; }

.c-hero__media { position: absolute; inset: 0; }
.c-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.c-hero__scrim { position: absolute; inset: 0; background: var(--scrim); }

.c-hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  height: 100%;
  text-align: center;
  color: var(--c-white);
}

/* ヒーローは文字・ロゴ・ボタンをすべて白に（2026-09-27 本人決定）。ロゴは画像なので白に塗りつぶす */
.c-hero__logo { width: 220px; filter: brightness(0) invert(1); }
.c-hero h1,
.c-hero__tagline { color: var(--c-white); }
.c-hero__tagline { letter-spacing: 0.08em; }
.c-hero .c-btn { background: transparent; color: var(--c-white); border: 1px solid var(--c-white); }
.c-hero h1 span { display: block; }

/* --------------------------------------------------------------------------
   18. お知らせの3件（TOP）
   -------------------------------------------------------------------------- */

.c-posts { border-top: 1px solid var(--c-rule); }
.c-post { display: flex; align-items: baseline; gap: 28px; padding-block: 20px; border-bottom: 1px solid var(--c-rule); }
.c-post time { flex: none; font-family: var(--f-en); font-size: 14px; letter-spacing: 0.08em; color: var(--c-text-sub); }
/* PCではタイトルを1行に収め、長いものは「…」で切る（全文は記事で読める） */
.c-post__title { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--f-mincho); font-size: 17px; color: var(--c-brown); text-decoration: none; }
.c-post__title:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   19. 写真ストリップ（スタジオの様子）
   1:1を6枚。スマホは3列×2段（40 3章）。
   写真が増えたら枚数を足すだけ。1枚ずつ意味を持たせない「空気」のブロック。
   -------------------------------------------------------------------------- */

.c-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.c-strip .c-fig { aspect-ratio: 1 / 1; }

/* 講師の写真。いまの写真は顔が下寄りなので、拡大して顔を枠の中央に寄せる。
   顔が中央にある写真に差し替えたら、この2行を消す */
.c-map iframe { display: block; width: 100%; height: 100%; border: 0; }
.c-fig--natural img { height: auto; } /* 縦横比を枠に合わせず、写真をそのまま全部見せる */
.c-media:has(.c-fig--natural) { align-items: start; } /* 縦長の写真の横では、文章を上にそろえる */
.c-hero-sub__media img.u-focus-stage { object-position: 50% 60%; } /* 舞台の写真：子どもを足元まで入れ、右下の印は枠の外に出す */
.c-fig img.u-focus-low { object-position: 50% 62%; } /* 人物が写真の下寄りにあるとき（studio-center・大人の写真） */
.c-fig img.u-focus-top,
.c-hero-sub__media img.u-focus-top { object-position: 50% 29%; } /* 縦長の写真を横長の枠に入れるとき、顔とバーが入る位置（kids-barre） */
.c-fig img.c-portrait { transform: scale(1.5); transform-origin: 43% 95%; }

/* --------------------------------------------------------------------------
   20. 写真の帯（全幅・文字を乗せる）
   ページの途中で一度だけ使う。濃茶スクリムは1種類だけ（40 9.5）。
   -------------------------------------------------------------------------- */

.c-band { position: relative; overflow: hidden; }

.c-band__media { position: absolute; inset: 0; }
.c-band__media img,
.c-band__media .c-ph { width: 100%; height: 100%; object-fit: cover; }
.c-band__scrim { position: absolute; inset: 0; background: var(--scrim); }

.c-band__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 18px;
  min-height: 360px;
  padding-block: 64px;
  color: var(--c-beige);
}

.c-band h2,
.c-band .eyebrow { color: var(--c-beige); }
.c-band__lead { max-width: 44em; color: var(--c-beige); } /* 写真の上なので本文よりは短めに折り返す */

/* --------------------------------------------------------------------------
   21. ページヘッダー・ヒーローの写真バリエーション
   写真が届いたら class を足すだけで切り替わる。構造は変えない。
   -------------------------------------------------------------------------- */

.c-page-head--photo,
.c-hero-solid--photo { position: relative; background: var(--c-brown); overflow: hidden; }

.c-page-head--photo .c-page-head__media,
.c-hero-solid--photo .c-hero-solid__media { position: absolute; inset: 0; }

.c-page-head--photo .c-page-head__media img,
.c-hero-solid--photo .c-hero-solid__media img { width: 100%; height: 100%; object-fit: cover; }

.c-page-head--photo::after,
.c-hero-solid--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--scrim);
}

.c-page-head--photo > .l-container,
.c-hero-solid--photo > .l-container { position: relative; z-index: 1; }

/* 写真の上では文字を白抜きにする */
.c-page-head--photo .c-page-head__inner,
.c-page-head--photo h1,
.c-page-head--photo .eyebrow,
.c-page-head--photo .c-page-head__lead { color: var(--c-beige); }

.c-page-head--photo .c-status { background: transparent; border-color: var(--c-beige); color: var(--c-beige); }

/* --------------------------------------------------------------------------
   22. 写真枠の中の仮画像／CTA帯の中の副ボタン
   -------------------------------------------------------------------------- */

.c-fig .c-ph,
.c-hero-sub__media .c-ph { height: 100%; }

/* 濃茶の面の上に置く副ボタン（CTA帯） */
.c-btn--sub-invert { color: var(--c-beige); border-color: var(--c-beige); }

/* --------------------------------------------------------------------------
   23. 注記ボックス（料金の但し書き）
   料金表の直下に置く但し書き。3か所目で使うことになったので c- に昇格させた
   （50 7.2 の「2か所目で使うなら c- に上げる」／2026-09-21 ロット4）。
   旧：.p-class__price-note ・ .p-section-top__price-note
   外側の余白は持たせない。配置は u-mt-s で親が決める。
   -------------------------------------------------------------------------- */

.c-note-box { padding: 24px; background: var(--c-bg-sub); }
.c-note-box__example { margin-top: 12px; font-size: 15px; }

/* --------------------------------------------------------------------------
   24. 当日の流れ（縦のタイムライン）
   「はじめての方へ」の中核（34 3章）。時刻を左列に固定し、縦線でつなぐ。
   表ではなく手順なので ol で出す。左列の幅は --col-flow を流用して、
   同じページの「レッスンの流れ」表と左端を揃える。
   -------------------------------------------------------------------------- */

.c-steps { margin: 0; padding: 0; list-style: none; }

.c-step { display: grid; grid-template-columns: var(--col-flow) 1fr; gap: 0 28px; }

.c-step__time {
  padding-top: 2px;
  font-family: var(--f-en);
  font-size: 18px;
  letter-spacing: 0.06em;
  color: var(--c-text-sub);
}

.c-step__body {
  position: relative;
  padding: 0 0 40px 28px;
  /* 罫線色（--c-rule）だと、サブ地色の上でほとんど見えない。
     引用（.c-quote）と同じベージュを使い、部品の言語をそろえる */
  border-left: 1px solid var(--c-beige);
}

.c-step:last-child .c-step__body { padding-bottom: 0; border-left-color: transparent; }

/* 点：線の上に置く。濃茶ベタ・角丸0（40 4章） */
.c-step__body::before {
  content: "";
  position: absolute;
  top: 13px; /* 見出し1行目の中心（fs-h3 × lh-heading の半分）に合わせる */
  left: -4px;
  width: 7px;
  height: 7px;
  background: var(--c-brown);
}

.c-step__title {
  font-family: var(--f-mincho);
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--c-brown);
  line-height: var(--lh-heading);
}

/* --------------------------------------------------------------------------
   24-2. 本文の段落（読み物ページの地の文）
   料金・FAQ・共通ページで「地の文だけを絞る」ためのかたまり。表と図は全幅のまま。
   2026-09-27 に t4-t5-t7.css の .p-doc__body から昇格（T8〜T12でも使うため・50 7.2）
   -------------------------------------------------------------------------- */

.c-prose { display: flex; flex-direction: column; gap: var(--gap-para); max-width: 42em; }

/* --------------------------------------------------------------------------
   24-3. アンカーの着地位置
   sticky のアンカーナビ（.c-anchor-nav）に見出しが隠れないよう、ナビの高さぶん空ける。
   2026-09-27 に t4-t5-t7.css の .p-doc__anchor から昇格
   -------------------------------------------------------------------------- */

.c-anchor-target { scroll-margin-top: calc(var(--h-nav-anchor) + 24px); }

/* --------------------------------------------------------------------------
   24-4. フォーム（Contact Form 7 の出力に当てる）
   --------------------------------------------------------------------------
   体験申込（子供・大人）とお問い合わせの3本（00 §2-A「フォームの仕様」）。
   ・CF7 の標準CSSは読み込まない（wp_dequeue_style('contact-form-7')）。
     そのぶん、標準CSSが担っていた「隠す・状態で出し分ける」もここで持つ
   ・ショートコードの出力を <div class="c-form"> で包む。中の .wpcf7-* は
     CF7 が出力するクラスなので、名前は変えられない（接頭辞ルールの例外）
   ・c-form__* は、CF7 のフォーム本文（管理画面のテンプレート）に書く自前のマークアップ
   ・エラーの色は足さない（40 1章：アクセント色なし）。濃茶の太い罫と文言で示す
   -------------------------------------------------------------------------- */

.c-form { display: flex; flex-direction: column; }

/* CF7 の標準CSSが隠していたもの */
.c-form .screen-reader-response {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.c-form .hidden-fields-container { display: none; }
.c-form .wpcf7-form { display: flex; flex-direction: column; gap: 28px; }

/* 1項目 = ラベル＋入力欄＋補足 */
.c-form__field { display: flex; flex-direction: column; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }

.c-form__label {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  padding: 0;
  font-weight: 500;
  color: var(--c-brown);
}

/* 必須／任意。どちらも出す（任意の項目が任意だと分かることが、離脱を減らす） */
.c-form__req,
.c-form__opt {
  display: inline-flex; align-items: center;
  min-height: 22px; padding-inline: 8px;
  font-size: var(--fs-note); font-weight: 400; letter-spacing: 0.06em; line-height: 1;
}
.c-form__req { background: var(--c-brown); color: var(--c-beige); }
.c-form__opt { border: 1px solid var(--c-text-sub); color: var(--c-text-sub); }

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

/* 2つを横に並べる（第1・第2希望など）。スマホでは縦 */
.c-form__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px var(--gap-col3); }

.c-form .wpcf7-form-control-wrap { position: relative; display: block; }

/* 入力欄。罫は補助テキスト色（3:1以上・WCAG 1.4.11）。--c-rule は薄すぎて枠に見えない */
.c-form .wpcf7-text,
.c-form .wpcf7-email,
.c-form .wpcf7-tel,
.c-form .wpcf7-number,
.c-form .wpcf7-date,
.c-form .wpcf7-select,
.c-form .wpcf7-textarea {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid var(--c-text-sub);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--c-bg);
  color: var(--c-text);
  font-size: 16px; /* 16px未満だと iOS Safari が入力時に画面を拡大する。トークンを使わない唯一の例外 */
  line-height: 1.6;
  -webkit-appearance: none;
  appearance: none;
}

.c-form .wpcf7-textarea { min-height: 180px; resize: vertical; }
.c-form ::placeholder { color: var(--c-text-sub); opacity: 1; }

/* セレクトの矢印：OSの標準は角が丸いので消し、線で描く（包みは .c-form__select） */
.c-form__select { position: relative; }
.c-form__select .wpcf7-select { padding-right: 48px; cursor: pointer; }
.c-form__select::after {
  content: "";
  position: absolute;
  top: 50%; right: 20px;
  width: 8px; height: 8px;
  margin-top: -6px;
  border-right: 1.6px solid var(--c-brown);
  border-bottom: 1.6px solid var(--c-brown);
  transform: rotate(45deg);
  pointer-events: none;
}

.c-form .wpcf7-form-control:focus-visible,
.c-form input[type="radio"]:focus-visible,
.c-form input[type="checkbox"]:focus-visible { outline: 2px solid var(--c-brown); outline-offset: 2px; }

/* ラジオ・チェックボックス・同意。CF7 の既定（左に1emの余白）を打ち消す */
.c-form .wpcf7-radio,
.c-form .wpcf7-checkbox,
.c-form .wpcf7-acceptance { display: flex; flex-wrap: wrap; gap: 4px 28px; }

.c-form .wpcf7-list-item { display: block; margin: 0; }

.c-form .wpcf7-list-item label {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; /* タップ領域（10 スマホ主導線） */
  cursor: pointer;
}

.c-form input[type="radio"],
.c-form input[type="checkbox"] { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--c-brown); }

/* 入力エラー（CF7 が .wpcf7-not-valid と .wpcf7-not-valid-tip を付ける） */
.c-form .wpcf7-not-valid { border-width: 2px; border-color: var(--c-brown); }
.c-form .wpcf7-not-valid-tip {
  display: block;
  margin-top: 8px;
  font-size: var(--fs-note);
  font-weight: 500;
  color: var(--c-brown);
}

/* Turnstile（迷惑メール対策）。ウィジェット自体は Cloudflare の iframe */
.c-form .wpcf7-turnstile { min-height: 65px; }

/* 送信ボタン：CF7 のタグで class:c-btn を付ける（[submit class:c-btn "…"]）。ここは幅だけ */
.c-form__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
/* 送信ボタンは追従ボタンの「体験申込」と同じベージュ（D案） */
.c-form .wpcf7-submit { min-width: 280px; background: var(--c-beige); color: var(--c-brown); }
/* reCAPTCHA の右下のマークは追従ボタンと重なるので隠す（フォームの下に規約の一文を出している｜inc/integrations.php） */
.grecaptcha-badge { visibility: hidden; }
.c-form .wpcf7-submit:disabled { opacity: 0.6; cursor: wait; }

/* 送信中の印。CF7 が form に .submitting を付けている間だけ見せる。角丸0なので四角が回る */
.c-form .wpcf7-spinner {
  display: inline-block;
  visibility: hidden;
  width: 20px; height: 20px;
  border: 2px solid var(--c-rule);
  border-top-color: var(--c-brown);
  animation: c-form-spin 0.9s linear infinite;
}
.c-form .submitting .wpcf7-spinner { visibility: visible; }
@keyframes c-form-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .c-form .wpcf7-spinner { animation: none; } }

/* 送信結果のメッセージ。CF7 が form の class（sent / invalid / failed …）を切り替える */
.c-form .wpcf7-response-output { padding: 20px 24px; border: 1px solid var(--c-brown); background: var(--c-bg); }
.c-form .wpcf7-response-output:empty,
.c-form .init .wpcf7-response-output,
.c-form .resetting .wpcf7-response-output,
.c-form .submitting .wpcf7-response-output { display: none; }
.c-form .sent .wpcf7-response-output { background: var(--c-beige); }
.c-form .invalid .wpcf7-response-output,
.c-form .unaccepted .wpcf7-response-output,
.c-form .failed .wpcf7-response-output,
.c-form .spam .wpcf7-response-output,
.c-form .aborted .wpcf7-response-output { border-width: 2px; font-weight: 500; }

/* --------------------------------------------------------------------------
   25. 余白ユーティリティ（接頭辞 u-）
   ここに並んでいる6つだけを使う。インラインstyleで余白を書かない。
   足したくなったら、まず「部品の中の余白」にできないかを疑うこと。
   -------------------------------------------------------------------------- */

.u-mt-xs    { margin-top: 16px; }
.u-mt-s     { margin-top: 24px; }
.u-mt-m     { margin-top: 32px; }
.u-mt-l     { margin-top: 40px; }
.u-mt-xl    { margin-top: 56px; }
.u-mt-block { margin-top: var(--gap-block); }

/* --------------------------------------------------------------------------
   26. スマホ
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .c-media,
  .c-cards,
  .c-table-pair { grid-template-columns: 1fr; gap: 32px; }

  .c-cards { gap: 44px; }
  .c-media--reverse .c-media__body { order: 0; }
  .c-page-head { padding-block: 48px; }
  .c-cta-band { padding-block: 64px; }
  .c-line-block { padding: 24px; }
  .c-line-qr { display: none; }
  .c-age-chart { padding: 20px; }
  .c-faq__a { padding-left: 0; }
  .c-note-box { padding: 20px; }

  /* フォーム：2つ並びを縦に。送信ボタンは全幅 */
  .c-form__pair { grid-template-columns: 1fr; }
  .c-form .wpcf7-submit { width: 100%; min-width: 0; }

  /* 当日の流れ：2カラムのまま縮める。--col-flow がスマホで84pxに下がる */
  .c-step { gap: 0 16px; }
  .c-step__time { font-size: 16px; }
  .c-step__body { padding-left: 18px; padding-bottom: 32px; }
  .c-btn-row .c-btn { width: 100%; }

  /* 週間スケジュール：PCの表を横スクロールではなく、そのまま縮めて見せる */
  .c-schedule td,
  .c-schedule thead th { font-size: 13px; }
  .c-schedule th:first-child { width: 68px; }
  .c-table th,
  .c-table td { padding-block: 18px; }

  /* 項目名が長い2列の表は、スマホでは項目名を値の上に積む（横に詰めない） */
  .c-terms th,
  .c-terms td { display: block; width: auto; }
  .c-terms th { padding-bottom: 4px; border-bottom: 0; }
  .c-terms td { padding-top: 0; }

  .c-hero-solid { padding-block: 56px; }
  .c-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .c-post { flex-direction: column; gap: 4px; }
  .c-post__title { white-space: normal; }
  .c-voices { grid-template-columns: 1fr; gap: 40px; }
  .c-hero__logo { width: 150px; }
  .c-hero__inner { gap: 18px; }
  .c-band__inner { min-height: 280px; padding-block: 44px; }
  .c-facts { grid-template-columns: 1fr; gap: 20px; margin-top: 32px; }
  .c-timeline { padding: 20px; }
  /* 図は文字が小さくなりすぎるので、スマホでは出さない。
     年齢チャートは直後の表が、時間割は .c-timeline__list が同じ内容を持つ */
  .c-age-chart { display: none; }
  .c-timeline svg { display: none; }
  .c-timeline__list { display: block; }

  /* 3列以上の表は、1行＝1かたまりに積む（40 3章）。横スクロールさせない。
     セルの見出しは data-label 属性から出す。 */
  .c-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .c-table--stack tr { display: block; padding-block: 18px; border-bottom: 1px solid var(--c-rule); }
  .c-table--stack th,
  .c-table--stack td { display: block; padding-block: 2px; border: 0; }
  .c-table--stack th { font-weight: 500; }
  .c-table--stack td[data-label]::before {
    content: attr(data-label) "：";
    color: var(--c-text-sub);
    font-size: var(--fs-note);
  }
}

/* --------------------------------------------------------------------------
   動き（2026-09-27 本人希望：落ち着いた感じで、文字を書くように）
   ・.u-write … 文字が左から書かれるように現れる（マスクを左から右へ動かす）
   ・.u-fade  … ゆっくり浮かび上がる
   ・JSが動かないときと「動きを減らす」設定のときは、最初から全部見えている
   ・画面に入ったら assets/js/motion.js が .is-inview を付ける。ヒーローは読み込み直後に付く
   -------------------------------------------------------------------------- */

.js-motion .u-write {
  -webkit-mask-image: var(--mask-write);
          mask-image: var(--mask-write);
  -webkit-mask-size: 260% 100%;
          mask-size: 260% 100%;
  -webkit-mask-position: 100% 0;
          mask-position: 100% 0;
  transition: -webkit-mask-position var(--dur-write) var(--ease-calm), mask-position var(--dur-write) var(--ease-calm);
  transition-delay: var(--delay, 0s);
}
.js-motion .u-write.is-inview { -webkit-mask-position: 0 0; mask-position: 0 0; }

.js-motion .u-fade {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-fade) var(--ease-calm), transform var(--dur-fade) var(--ease-calm);
  transition-delay: var(--delay, 0s);
}
.js-motion .u-fade.is-inview { opacity: 1; transform: none; }

/* ヒーローの順番：ロゴ → 1行目 → 2行目 → タグライン → ボタン */
.c-hero__logo.u-fade { --delay: 0.2s; }
.c-hero h1 .u-write:nth-child(1) { --delay: 0.9s; }
.c-hero h1 .u-write:nth-child(2) { --delay: 1.9s; }
.c-hero__tagline.u-fade { --delay: 3.4s; }
.c-hero .u-fade:last-child { --delay: 3.9s; }

@media (prefers-reduced-motion: reduce) {
  .js-motion .u-write,
  .js-motion .u-fade { -webkit-mask-image: none; mask-image: none; opacity: 1; transform: none; transition: none; }
}