/* Form_v2 教室（school）カタログ CSS
採寸: docs/design-teardown-school.md の実測トークンに準拠（推測値は入れない）
---- なぜ experience.css に足さず別ファイルにしたか ----
1. 教室は体験と**レイアウトの型が違う**（カードグリッド ⇔ 全幅の行リスト）。同じファイルに
同居させると、experience.css:96 に書いてある「320×3 + gap20×2 = ちょうど1000px・余白は
1pxも無い」というカードグリッドの制約と、教室側の 40%/55% の可変レイアウトが1つの
ファイルの中で混ざり、どちらの調整がどちらを壊すのかが読めなくなる。
2. 教室ページでしか読まない（`views/layout.php` の `$pageStyles`）。体験ページのHTMLは
1バイトも変わらない＝既存ページへの影響がゼロであることをファイル境界で担保できる。
---- レイヤーとの関係（ADR-023）----
本ファイルは `assets/css/vendor-scope.css` と**同じく``で読むが、レイヤーには属さない**。
レイヤー無しのCSSはどのレイヤーよりも強いので、`vendor`（本家CSS）にも `neutralize` にも勝つ。
読み込み順は vendor-scope.css → experience.css → school.css（`views/layout.php`）。
★本家の `sc_*` クラス名を使っていないのは、`original_style.css` がそれらに `!important` を
持っており（`.sc_listName` `.sc_pageName` `.sc_listFee span` 等）、`!important` は
カスケードレイヤーの優先順位を**反転**させるため `neutralize` の `all: revert` でも
本ファイルでも止められないから。詳細は `views/_school-row.php` の冒頭コメントと
`tests/php/VendorCssSnapshotTest.php` F節。 */
:root {
/* 教室固有のカラートークン（実測。docs/design-teardown-school.md §1） */
--school-contact-bg: #FFFBC7; /* 実測: 問い合わせ枠 `.sc_listContact` の淡黄 */
--school-close-bg: #DEDEDE; /* 実測: 受付終了帯 `.sc_close` の灰 rgb(222,222,222) */
/* CTA（`.sc_listLink a`）は体験の予約ボタンと同じピンクで、experience.css の
--color-reserve(#F4C5BF) と実測値が一致する。トークンを二重に持たず再利用する。 */
}
/* ---- ヒーロー（本家 `#shool_header`。id のタイポは踏襲しない・同メモ §0-3）---- */
.sch_hero { display: flex; gap: 40px; align-items: center; margin: 24px 0 48px; }
.sch_hero__text { flex: 1; }
.sch_hero__title { font-family: var(--font-serif); font-size: 24px; color: var(--color-heading); margin: 0 0 4px; }
.sch_hero__en { display: block; font-size: 13px; letter-spacing: .1em; color: #888; }
.sch_hero__lead { font-family: var(--font-serif); font-size: 18px; margin: 24px 0 16px; }
.sch_hero__desc { font-size: 14px; line-height: 1.9; }
/* 本家のヒーロー画像は 480×372（比 1.290）で**正方形ではない**（カード・スライダーの1:1とは別物）。
トリミングせずそのまま出す。 */
.sch_hero__img { flex: 1; }
.sch_hero__img img { width: 100%; height: auto; }
.sch_notice { text-align: center; font-size: 14px; margin: 32px 0; }
/* ---- 一覧の枠 ----
実測: 外枠 `.section{max-width:1000px}` は `.site-main`（experience.css）が持っている。
内枠は `.sc_listContainer{width:90%}` → 実効 約900px（体験の 94%＝約940px より狭い）。 */
.sch_menu { margin-top: 48px; }
.sch_menu__title { font-family: var(--font-serif); font-size: 20px; text-align: center; letter-spacing: .2em; color: var(--color-heading); margin-bottom: 4px; }
.sch_menu__note { text-align: center; font-size: 12px; color: #888; margin-bottom: 24px; }
.sch_listContainer { width: 90%; margin: 2em auto; }
/* ---- 一覧の1行（★カードではない）----
実測: PC(>=769px) で `.sc_listPicture{width:40%}` ＋ `.sc_listCol{width:55%}` の左右2分割。
**体験の `.ex_listCol{background:#F2EEE7}` に相当するカード背景は教室には無い**（同メモ §1）。 */
.sch_listRow { display: flex; gap: 5%; align-items: flex-start; }
.sch_listPicture { width: 40%; margin: 0; flex: none; }
.sch_listCol { width: 55%; flex: none; }
/* 区切り罫。実測: `.sc_listContainer > .bl_container::after`
{ width:50%; border-top:1px solid #000; margin:5em auto 5em auto }。最終行は罫を出さない。
※ experience.css は擬似要素を1つも使っていないが、本ファイルはここで1つ使う。
`vendor-scope.css` の `neutralize` が `main.site-main *::after { all: revert }` を持つものの、
レイヤー無しの本ファイルが勝つので消えない（順序ではなくレイヤー優先度で決まる）。 */
.sch_listContainer > .sch_listRow::after {
content: ""; display: block; width: 50%; height: 2px;
border-top: 1px solid #000; margin: 5em auto;
}
.sch_listContainer > .sch_listRow:last-child::after { border-top: none; }
/* 画像は 1:1 正方形（実測6枚すべて正方形）。一覧サムネは**講師の顔写真**（作品写真ではない） */
.sch_listPicture img,
.sch_listPicture .sch_img-empty { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.sch_img-empty {
display: flex; align-items: center; justify-content: center;
background: #f7f5f0; font-size: 12px; letter-spacing: .1em; color: #756d60;
}
/* 行内テキスト。実測: 見出し・名称・価格・日付は YuMincho・1.2rem（＝19.2px）。
価格・開講日・工房名の span は `font-style: italic`（体験には無い教室固有の指定）。 */
/* 開催場所（CEO指摘 2026-09-24）。本家は `School ｜工房 竹と染` の2段組だったが、
上流の工房名が「工房」を含む1つの文字列なので、体験詳細と同じ `開催場所 {名前}` に揃えた。
`__en`（"School" の小さいラベル）は出さなくなったので規則ごと消す。 */
.sch_listFactoryname { font-size: 14px; margin: 0 0 8px; }
.sch_listFactoryname strong { font-family: var(--font-serif); font-size: 16px; font-style: italic; font-weight: normal; }
.sch_listName { font-family: var(--font-serif); font-size: 16px; color: #000; margin: 0 0 1.5em; line-height: 1.6; }
.sch_listTeachername { font-size: 14px; margin: 0 0 8px; }
.sch_listTeachername span { font-family: var(--font-serif); font-size: 19.2px; padding: 0 .5em; }
.sch_listFee { font-size: 14px; margin: 0 0 4px; }
.sch_listFee span { font-family: var(--font-serif); font-size: 19.2px; font-style: italic; }
.sch_listDatestart { font-size: 14px; margin: 0 0 12px; }
.sch_listDatestart span { font-family: var(--font-serif); font-size: 19.2px; font-style: italic; padding: 0 .5em 0 0; }
.sch_listTxt { font-size: 14px; line-height: 1.9; margin-bottom: 16px; }
/* CTA・問い合わせ・受付終了帯（すべて実測値。角丸は0＝直角） */
.sch_listLink a {
display: block; width: 100%; padding: .5em 0; text-align: center; font-weight: bold;
background: var(--color-reserve);
}
.sch_listLink a:hover { filter: brightness(0.97); }
.sch_listContact { background: var(--school-contact-bg); padding: 1em; text-align: center; font-size: 12px; margin-top: 1em; }
.sch_listContact span { font-size: 19.2px; font-weight: bold; padding: 0 .5em; }
.sch_close { background: var(--school-close-bg); padding: 1em; text-align: center; font-weight: bold; font-size: 16px; }
/* ---- 詳細 ----
実測: `.sc_pageContainer{width:90%; margin:0 auto 2em}`。**PC側の上書きは無く、
体験の `.ex_pageContainer` が持つ `border-bottom:1px solid #000` も教室には無い**（同メモ §1）。 */
.sch_page { width: 90%; margin: 0 auto 2em; }
.sch_pageContainer { display: flex; gap: 40px; align-items: flex-start; margin-bottom: 32px; }
.sch_pageCol { flex: 1; min-width: 0; }
/* スライダー画像も実測すべて 1:1（体験と同じ扱い・ADR-011） */
.sch_gallery__main { aspect-ratio: 1/1; background: #f7f5f0; overflow: hidden; }
.sch_gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.sch_gallery__main .sch_img-empty { width: 100%; height: 100%; }
.sch_gallery__thumbs { display: flex; gap: 10px; margin-top: 12px; }
.sch_gallery__thumb { width: 76px; height: 76px; padding: 0; border: 1px solid var(--color-line); background: none; cursor: pointer; overflow: hidden; }
.sch_gallery__thumb.is-active { border-color: #000; }
.sch_gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.sch_pageName { font-family: var(--font-serif); font-size: 19.2px; color: #000; margin: .5em 0 0; }
.sch_pageFee { font-size: 14px; margin: .5em 0 1em; }
.sch_pageFee span { font-family: var(--font-serif); font-size: 19.2px; font-style: italic; }
/* 開講日・開講時間・曜日・回数・定員・申込開始/終了・選考。
本家はこれらを**クラス無しの `` の並び**で出しているが（同メモ §3）、
項目名が無いと「13:00～15:00開講」以外は何の値か読めないため
で項目名を付ける。 */
.sch_pageSchedule { margin: 0 0 20px; font-size: 14px; }
.sch_pageSchedule__row { display: flex; gap: 1em; padding: 4px 0; }
.sch_pageSchedule dt { width: 5.5em; flex: none; color: #666; }
.sch_pageSchedule dd { margin: 0; }
.sch_pageSchedule .sch_listDatestart { margin: 0; }
.sch_pageSchedule .sch_listDatestart span { padding: 0 .5em 0 0; }
.sch_pageCopy { font-family: var(--font-serif); font-size: 19.2px; line-height: 1.6; color: #000; margin: 2em 0 .5em; }
.sch_pageTxt { font-size: 14px; line-height: 1.9; }
.sch_pageExtraFees { font-size: 13px; line-height: 1.9; margin: 16px 0 0; padding-left: 1.2em; }
.sch_pageExtraFees li { list-style: disc; }
.sch_pageCancelNote { font-size: 13px; color: #666; margin-top: 12px; }
.sch_pageInfo .sch_close { margin-top: 20px; }
/* 講師プロフィール（体験には無いブロック）。実測: PC で写真30% / 情報65% の2カラム。
`align-items: flex-end` / `justify-content: space-between` も実測値。 */
.sch_listTeacherarea {
display: flex; flex-flow: row wrap; align-items: flex-end; justify-content: space-between;
margin-top: 40px;
}
.sch_listTeacherimage { width: 30%; }
.sch_listTeacherimage img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.sch_listTeacherinfo { width: 65%; }
.sch_listTeachertext { font-size: 14px; line-height: 1.9; margin-top: 8px; }
.sch_page > .sch_listContact { margin-top: 32px; }
.sch_recommend { border-top: 1px solid var(--color-line); margin-top: 48px; padding-top: 40px; }
.sch_recommend__title { font-family: var(--font-serif); font-size: 20px; text-align: center; letter-spacing: .1em; margin-bottom: 24px; }
.sch_notfound { padding: 48px 0; text-align: center; }
/* ---- レスポンシブ ----
実測のブレークポイントは本家と同じ `769px`（`@media (min-width: 769px)` で2カラム化）。
本ファイルは max-width 側で書いているので 768px 以下を1カラムにする。
本家SPは `.sc_listCol{width:100%}` ＋ 内側で画像とテキストを 48%/48% に割るが、
その構成は**同じ img を2回HTMLへ出す**（PC用とSP用の二重出力・同メモ §2）ので踏襲しない。 */
@media (max-width: 768px) {
.sch_hero, .sch_pageContainer { flex-direction: column; }
.sch_listRow { flex-direction: column; gap: 16px; }
.sch_listPicture, .sch_listCol { width: 100%; }
.sch_listTeacherarea { flex-direction: column; align-items: flex-start; gap: 16px; }
.sch_listTeacherimage { width: 70%; } /* 実測: SP は写真70% */
.sch_listTeacherinfo { width: 100%; }
.sch_listContainer, .sch_page { width: 100%; }
}