@charset "UTF-8";
/* ==========================================================================
   t8-t12.css ｜ 共通ページ（T8〜T12）
   --------------------------------------------------------------------------
   対象：
     T8  体験申込        /kids/trial/ ・ /adult/trial/
     T9  講師紹介        /teacher/
     T10 スケジュール    /schedule/
     T11 汎用1カラム     /access/ ・ /contact/ ・ /recital/ ・ /privacy-policy/ ・ /tokushoho/
     T12 お知らせ        /news/ ・ /news/（記事）/
   出典：原稿 _docs/33 ③・_docs/36 ④・_docs/37
   ルール：
     1. 5テンプレートとも骨格は同じ（ページヘッダー → 本文セクションの積み重ね → CTA帯）。
        T4・T5・T7 と同じ考え方で、CSSは1ファイルにまとめる（2026-09-27 ロット9）。
     2. ここに書くのは「配置」だけ。部品は components.css、数値は style.css。
        本文の段落は .c-prose、フォームは .c-form（どちらも components.css）。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. フォームの幅（T8・お問い合わせ）
   入力欄は横に長いほど読みにくい。読み物ブロックと同じ幅（--w-read）に絞る
   -------------------------------------------------------------------------- */

.p-page__form { max-width: var(--w-read); }

/* --------------------------------------------------------------------------
   2. 講師紹介（T9）
   写真（1:1・40 5章）を左、名前と経歴を右。経歴は長いので、写真を小さめにする
   -------------------------------------------------------------------------- */

.p-teacher__profile {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--gap-col2);
  align-items: start;
}

.p-teacher__name { display: flex; flex-direction: column; gap: 6px; }

/* 写真：上に顔写真、その下に踊りの写真を小さく2枚横並び */
.p-teacher__photos { display: grid; gap: 16px; }
.p-teacher__dance { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

/* --------------------------------------------------------------------------
   3. スケジュール（T10）
   子供と大人を色分けし、時間帯が重ならないことを一目で見せる（10 3.4）。
   大人の行は大人セクションの地色（--c-bg-adult・確定値㉒）。
   表を置く面は l-section--sub（子供の地）なので、行の地色の差がそのまま見える。
   色だけに頼らず、クラス名の横にも「大人」の印（.c-status）を付ける
   -------------------------------------------------------------------------- */

.p-schedule__filter { display: flex; flex-wrap: wrap; gap: 12px; }
.p-schedule__filter [aria-pressed="true"] { background: var(--c-brown); color: var(--c-beige); }

.p-schedule__day + .p-schedule__day { margin-top: var(--gap-block); }
.p-schedule__day[hidden] { display: none; }

.p-schedule__row--adult { background: var(--c-bg-adult); }
.p-schedule__row--adult th { padding-left: 12px; }
.p-schedule__row[hidden] { display: none; }

.p-schedule__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }

/* --------------------------------------------------------------------------
   4. お知らせ（T12）
   一覧は「日付・カテゴリ・タイトル」の1行ずつ。サムネイルは使わない
   （コラムを書かない方針で、写真のない記事が多くなるため・00 §5-D）
   -------------------------------------------------------------------------- */

.p-news__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--c-rule); }

.p-news__item {
  display: grid;
  grid-template-columns: var(--col-day) 10em minmax(0, 1fr);
  gap: 8px 24px;
  align-items: baseline;
  padding-block: 24px;
  border-bottom: 1px solid var(--c-rule);
}

.p-news__item time { font-family: var(--f-en); font-size: 15px; letter-spacing: 0.08em; color: var(--c-text-sub); }
.p-news__cat { font-size: var(--fs-note); color: var(--c-text-sub); }
/* PCではタイトルを1行に収め、長いものは「…」で切る（2026-09-27 本人希望） */
.p-news__title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--f-mincho); font-size: 17px; line-height: 1.7; }
.p-news__title a { color: var(--c-brown); }

.p-news__meta { display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--c-text-sub); font-size: var(--fs-note); }

.p-news__pager { display: flex; justify-content: space-between; gap: 16px; }

/* --------------------------------------------------------------------------
   5. スマホ
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .p-teacher__profile { grid-template-columns: 1fr; gap: 32px; }
  .p-news__item { grid-template-columns: auto 1fr; }
  .p-news__title { grid-column: 1 / -1; white-space: normal; }
  .p-schedule__filter .c-btn { flex: 1 1 auto; }
  /* 表が1行＝1かたまりに積まれるので、地色と左の余白は行（tr）に持たせる */
  .p-schedule__row--adult { padding-inline: 12px; }
  .p-schedule__row--adult th { padding-left: 0; }
  .p-schedule__day .c-days th { width: auto; }
}