/* 面・奥行き・署名（DESIGN.md §2 色 / §5 リズム / §6 奥行き / §9 署名）
   tokens.css の変数だけを使う。I-4 の変更はこのファイルにまとめる（戻すときはこのファイルと head.php の1行）。
   主色の面は「hero」と「cta（さいごに）」の2か所。proof は I-5 で追加する。 */

/* ---------- 署名: ロゴの正方形（角丸0）— 使用は3か所以内 ----------
   (1) hero の大きな四角（下）  (2) 見出しの目印（これ）  (3) 仮画像（assets/images/ph/*.svg） */
.prose h2 .h-num::before {
  content: ""; display: inline-block; width: var(--sig-size-s); height: var(--sig-size-s);
  margin-right: var(--sp-2); vertical-align: -1px;
  background: var(--c-main); border-radius: var(--radius-sig);
}

/* ---------- 主色の面（hero / cta）＋ 粒状ノイズ ---------- */
.page-top .sec--hero,
.sec--band,
.sec--proof {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--c-main); color: var(--c-on-main);
}
.page-top .sec--hero::after,
.sec--band::after,
.sec--proof::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("../images/noise.png"); opacity: var(--noise-opacity);
}
/* hero の大きな四角（署名）。主色より少し明るい同色相で、文字の邪魔をしない */
.page-top .sec--hero::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  right: -4%; bottom: -16%; width: calc(var(--sig-size-l) * 1.9); aspect-ratio: 1;
  background: color-mix(in srgb, #fff 9%, var(--c-main)); border-radius: var(--radius-sig);
}

/* 主色の面の上の文字・リンク・ボタン */
:is(.page-top .sec--hero, .sec--band, .sec--proof) a:not(.btn) { color: var(--c-on-main); text-decoration-color: rgb(255 255 255 / .6); }
:is(.page-top .sec--hero, .sec--band, .sec--proof) .h-num { color: var(--c-on-main-sub); }
:is(.page-top .sec--hero, .sec--band, .sec--proof) h2 .h-num::before { background: var(--c-kinari); }
:is(.page-top .sec--hero, .sec--band, .sec--proof) :focus-visible { outline-color: var(--c-on-main); }
:is(.page-top .sec--hero, .sec--band, .sec--proof) .btn--primary { background: var(--c-on-main); color: var(--c-main); }
:is(.page-top .sec--hero, .sec--band, .sec--proof) .btn--primary:hover { background: var(--c-kinari); box-shadow: 3px 3px 0 var(--c-main-deep); }
:is(.page-top .sec--hero, .sec--band, .sec--proof) .btn--ghost { background: transparent; color: var(--c-on-main); border-color: rgb(255 255 255 / .6); }
:is(.page-top .sec--hero, .sec--band, .sec--proof) .btn--ghost:hover { background: rgb(255 255 255 / .1); border-color: var(--c-on-main); box-shadow: 3px 3px 0 var(--c-main-deep); }

/* ---------- リズム: 背景は「種類」で決める（偶奇ではない）----------
   カード・行を持つ section--wide は薄い地で始め、連続するときだけ白と交互にする。散文の節は白。 */
.sec--wide { background: var(--c-kinari-soft); }
.sec--wide + .sec--wide { background: var(--c-bg); }
.sec--wide + .sec--wide + .sec--wide { background: var(--c-kinari-soft); }
.sec--wide + .sec--wide + .sec--wide + .sec--wide { background: var(--c-bg); }
.sec--soft { background: var(--c-kinari-soft); }
.sec--step { background: var(--c-bg); }
.sec--step + .sec--step { background: var(--c-kinari-soft); }
.sec--step + .sec--step + .sec--step { background: var(--c-bg); }
.sec--step + .sec--step + .sec--step + .sec--step { background: var(--c-kinari-soft); }
.sec--step + .sec--step + .sec--step + .sec--step + .sec--step { background: var(--c-bg); }
/* 主色の面は常に優先（偶奇や連続のルールに負けない） */
.sec.sec--band, .sec.sec--proof, .page-top .sec.sec--hero { background: var(--c-main); }
:is(.sec--band, .sec--proof) .prose ul > li::before { background: var(--c-kinari); }

/* ---------- proof（数字で見る）: 主色の面。1行目の数字だけを少し大きく ---------- */
.sec--proof .tbl { min-width: 0; background: transparent; color: var(--c-on-main); }
.sec--proof .tbl th, .sec--proof .tbl td { border-color: rgb(255 255 255 / .28); }
.sec--proof .tbl thead th { background: rgb(255 255 255 / .12); color: var(--c-on-main); }
.sec--proof .tbl tbody td:first-child { background: transparent; color: var(--c-on-main-sub); }
.sec--proof .tbl tbody tr:first-child td:nth-child(2) {
  padding-block: var(--sp-5); white-space: nowrap;
  font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-numeral);
  line-height: 1; letter-spacing: var(--ls-display);
}

/* 主色の帯が最後のセクションのとき、フッターとの間に白い隙間を作らない（:has 非対応の古いブラウザでは隙間が残るだけ） */
.main:has(> .sec--band:last-child) + .site-footer { margin-top: 0; }

/* ---------- 奥行き: 角丸（役割で変える）とずらし影 ---------- */
.btn { transition: background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast),
  transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.btn:hover { transform: translate(-1px, -1px); }
.btn--primary:hover { box-shadow: 3px 3px 0 var(--c-main-tint-2); }

.card {
  overflow: hidden; border-radius: var(--radius-card);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast);
}
.card:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-pop); border-color: var(--c-main); }
.price-card { border-radius: var(--radius-m); border-top-color: var(--c-main); box-shadow: var(--shadow-pop); }

.media { border-radius: var(--radius-m); }
.page-head--visual .media { border: 1px solid var(--c-beige); box-shadow: var(--shadow-pop); }
.page-top .sec--hero .hero__media { border-radius: var(--radius-l); box-shadow: 12px 12px 0 var(--c-main-deep); }
@media (max-width: 767px) {
  .page-top .sec--hero .hero__media { border-radius: var(--radius-m); box-shadow: 8px 8px 0 var(--c-main-deep); }
}

/* ---------- 画像: 写真が届いたときの統一処理（DESIGN.md §8）----------
   assets/images/photos/ に実写を置くと img_src() が自動で差し替える。そのとき全ての写真に同じ処理をかける:
   同じ角丸（上の .media / .card の角丸）、主色の薄い乗せ（multiply）、粒状ノイズ。仮画像（SVG）には掛けない。
   :has 非対応の古いブラウザでは、処理が掛からないだけで写真は普通に出る。 */
.media, .card__media { position: relative; }
:is(.media, .card__media):has(img[src*="/photos/"])::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: color-mix(in srgb, var(--c-main) var(--photo-tint), transparent); mix-blend-mode: multiply;
}
:is(.media, .card__media):has(img[src*="/photos/"])::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: url("../images/noise.png"); opacity: var(--noise-opacity);
}
/* 講師の顔写真の枠（顔写真そのものには色を乗せない） */
.profile-hero__photo, .teaser__photo { overflow: hidden; border-radius: var(--radius-m); box-shadow: var(--shadow-pop); }
.profile-hero__photo { border-color: var(--c-beige); }

/* ---------- ヘッダーの問い合わせボタン（スマホ幅。ゲート G2: 最初の画面から連絡手段に届く）----------
   メニューの中の「お問い合わせ」とは別に、メニューを開く前から押せる位置に置く。
   JS が無効のときはメニューが最初から開いているので出さない。 */
.site-header__cta { display: none; }
@media (max-width: 1024px) {
  html.js .site-header__cta { display: inline-flex; margin-left: auto; margin-right: var(--sp-3); white-space: nowrap; }
}