/* ============================================================
   wp-adjust.css — WordPress化のためだけの調整
   ------------------------------------------------------------
   ★このファイルの役割
     assets/tokens.css と assets/style.css（静的サイトの原本）は1行も書き換えない。
     Gutenberg / Lightning が入れる余分なクラスや初期値を打ち消す必要が出たら、
     「ここだけ」に書く。後から「WordPress化のために足した分」を1ファイルで見分けられる。

   ★守っていること
     - !important を使わない（詳細度で勝つ）
     - 色は var(--c-xxx) のみ。HEX直書きなし
     - --c-main の上に白文字を置かない

   ★読み込み順
     tokens.css → style.css → （子テーマ）style.css → wp-adjust.css（最後）
   ============================================================ */


/* ------------------------------------------------------------
   1. Lightning の既定値を、原本CSSの前提に戻す
   ------------------------------------------------------------
   Lightning は p と h1〜h6 に line-height と margin を直接書いている。
   静的サイトは「行間は親から継承する／余白はクラスで決める」前提で
   組んであるので、そのままだとバッジの中の数字や見出しの行間が変わる。

   ★ここでセレクタを重ねて殴らないこと。
     たとえば .entry-content p { line-height: inherit } と書くと、
     原本の .point__text { line-height: 1.9 } まで巻き添えで消える。

     Lightning はこれらの値を CSS変数で持っているので、
     「本文の中だけ変数の値を差し替える」形にする。
     こうすると、原本の .point__title { margin: 0 0 8px } のような
     クラス指定はそのまま生きる。!important も詳細度の上書きも要らない。

   ・--vk-margin-element-bottom / --vk-margin-headding-bottom
       段落と見出しの下余白。原本のリセットと同じ 0 にする。
   ・--vk-width-container / --vk-width-container-padding
       Lightning の既定は「画面幅 − 15px × 2」。これが .sec__inner に効くと
       左右が15px内側に入り、本文の折り返し位置が全部ずれる。
       原本と同じ --wrap（tokens.css）に戻す。
   ------------------------------------------------------------ */
.entry-content {
    --vk-margin-element-bottom: 0;
    --vk-margin-headding-bottom: 0;
    --vk-width-container: var(--wrap);
    --vk-width-container-padding: 0px;
}


/* ------------------------------------------------------------
   1-b. 行間を「親から継承」に戻す
   ------------------------------------------------------------
   Lightning は p と h1〜h6 に line-height を直接書いている（1.7em / 1.4em）。
   静的サイトは body の行間を継承する前提なので、そのままだと
   バッジの中の数字（.point__num）などが縦に伸びる。

   ★上の変数では直せない。
     CSSの決まりで、--x: inherit と書くと「変数そのものが親の値を受け継ぐ」
     という意味になり、line-height: inherit にはならないため。

   ★詳細度は「クラス1個ぶんより弱い」ままにしてある（:where で0にしている）。
     こうすると .point__text { line-height: 1.9 } のような原本の指定は
     そのまま勝つ。指定が無いところだけ、継承に戻る。

   ★かける範囲は「自分たちが作った4か所」だけにしてある。
     .page-head / .entry-content / .site-header / .site-footer
     ブログ（投稿）の本文は Lightning の見た目のままにしておきたいため、
     body 全体には広げない。
   ------------------------------------------------------------ */
:where(.page-head, .entry-content, .site-header, .site-footer) p,
:where(.page-head, .entry-content, .site-header, .site-footer) :is(h1, h2, h3, h4, h5, h6) {
    line-height: inherit;
}


/* ------------------------------------------------------------
   1-c. 「段落の次に来る見出し」の上余白を消す
   ------------------------------------------------------------
   Lightning に p + h2 { margin-top: 2em } という指定がある。
   静的HTMLでは見出しの上が <span>（.sec-head__en）だったので当たらなかったが、
   WordPress ではブロックにするため <p> になり、当たるようになった。
   原本と同じ「上余白なし」に戻す。
   ------------------------------------------------------------ */
:where(.page-head, .entry-content, .site-header, .site-footer) :is(p, ul, ol, dl, blockquote) + :is(h1, h2, h3, h4, h5, h6) {
    margin-top: 0;
}


/* ------------------------------------------------------------
   1-d. Lightning の見出し装飾（上下の罫線）を外す
   ------------------------------------------------------------
   Lightning は h2 に「上に青い2px罫線・下に薄い罫線」、h3 に「下に罫線」を
   付ける作りになっている。静的サイトの見出しに罫線は無く、色も違うので、
   そのままだと見出しの高さが 1〜3px 増え、青い線が出てしまう。

   ★原本の見出しは罫線・背景・擬似要素を一切使っていないことを確認済み。
     （style.css を h1〜h6 と __title 系で検索して 0件）
   ------------------------------------------------------------ */
:where(.page-head, .entry-content, .site-header, .site-footer) :is(h1, h2, h3, h4, h5, h6) {
    border: 0;
    border-radius: 0;
    background: none;
    position: static;
}
:where(.page-head, .entry-content, .site-header, .site-footer) :is(h1, h2, h3, h4, h5, h6)::before,
:where(.page-head, .entry-content, .site-header, .site-footer) :is(h1, h2, h3, h4, h5, h6)::after {
    content: none;
}


/* ------------------------------------------------------------
   1-e. 折り返しの規則をそろえる
   ------------------------------------------------------------
   Lightning は body に overflow-wrap: break-word を入れている。
   静的サイトは既定（normal）なので、長い語の折り返し位置が変わる。
   ------------------------------------------------------------ */
.page-head,
.entry-content,
.site-header,
.site-footer {
    overflow-wrap: normal;
}


/* ------------------------------------------------------------
   1-f. Lightning と「同じクラス名」がぶつかっている所を戻す
   ------------------------------------------------------------
   .site-header / .site-footer / .breadcrumb は Lightning にも同名の
   クラスがあり、Lightning 側の装飾が乗ってしまう。静的サイトに戻す。

   ・.site-header … 影が付く（原本は影なし）
   ・.site-footer … 上に青い罫線、文字12px、行間が詰まる。さらに
                    content-visibility: auto が付いて高さの計算が変わる
   ・.breadcrumb  … 上下に罫線が付く

   ★ここは「打ち消し」であって、新しい装飾ではない。
     値はすべて「無し／継承」で、色も数値も足していない。
   ------------------------------------------------------------ */
.site-header {
    box-shadow: none;
}

.site-footer {
    border: 0;
    font-size: inherit;
    line-height: inherit;
    position: static;
    overflow: visible;
    content-visibility: visible;
    contain-intrinsic-size: none;
}

.page-head .breadcrumb {
    border: 0;
}


/* ------------------------------------------------------------
   1-g. 段落・リストの中のリンクに下線が付くのを戻す
   ------------------------------------------------------------
   Lightning に li a, p a { text-decoration: underline 1px dotted } がある。
   原本は a { text-decoration: none } の1本だけなので、詳細度で負けて
   ヘッダーのロゴ（<p class="site-header__logo"> の中）と
   パンくず（<p class="breadcrumb"> の中）に点線の下線が出てしまう。

   ★詳細度を Lightning と同じ（要素2つぶん）に合わせ、後から読むことで戻す。
     :where() で入れ子ぶんの詳細度を0にしてあるので、
     原本のクラス指定（.site-nav__list a など）はそのまま勝つ。
   ------------------------------------------------------------ */
:where(.page-head, .entry-content, .site-header, .site-footer) :is(p, li) a {
    text-decoration: none;
    text-underline-offset: auto;
}


/* ------------------------------------------------------------
   1-h. Lightning と同名の .card がぶつかる
   ------------------------------------------------------------
   Lightning にも .card がある（position: relative / overflow: hidden /
   overflow-wrap: break-word）。原本の .card はどれも指定していないので、
   そのままだと Lightning 側が当たる。原本と同じ状態に戻す。

   ★.card--reco だけは原本が overflow: hidden を持っている。
     打ち消すと角丸から画像がはみ出すので、:not() で除外している。
   ------------------------------------------------------------ */
.entry-content .card {
    position: static;
    overflow-wrap: normal;
}

.entry-content .card:not(.card--reco) {
    overflow: visible;
}


/* ------------------------------------------------------------
   1-i. 画像の縦位置
   ------------------------------------------------------------
   WordPress の画像ブロックCSS が .wp-block-image img に
   vertical-align: bottom を入れる。原本は既定（baseline）なので、
   インラインで画像を置いた時に下の余白の出方が変わる。原本に合わせる。
   ------------------------------------------------------------ */
.entry-content .wp-block-image img {
    vertical-align: baseline;
}


/* ------------------------------------------------------------
   1-j. Lightning と同名の .btn / リンクの下線位置
   ------------------------------------------------------------
   .btn も Lightning に同名クラスがあり、vertical-align: middle と
   user-select: none が付く。原本は既定のままなので戻す。
   （今の並びでは見た目に出ないが、ボタンを文中に置いた時にズレる）

   ------------------------------------------------------------ */
:where(.page-head, .entry-content, .site-header, .site-footer) .btn {
    vertical-align: baseline;
    user-select: auto;
}



/* ------------------------------------------------------------
   2. セクションを画面いっぱいに出す
   ------------------------------------------------------------
   セクションのグループブロックは「全幅」で置く。
   幅は .sec__inner が持つので、.sec 自体は横いっぱいに広げる。
   （念のための保険。page.php の .entry-content が既に全幅のため、
     通常はこの指定が無くても同じ結果になる）
   ------------------------------------------------------------ */
.entry-content > .alignfull.sec,
.entry-content > .sec,
.entry-content > .alignfull.fv,
.entry-content > .fv {
    width: 100%;
    max-width: none;
    margin-inline: 0;
}


/* ------------------------------------------------------------
   4. 画像ブロックが figure で包まれる分の打ち消し
   ------------------------------------------------------------
   画像ブロックは <figure class="wp-block-image"> を作る。
   静的HTMLでは <img> が直接 grid の子だったので、figure が1枚挟まる。
   figure 自身を「透明な入れ物」にして、元と同じ見え方にする。
   ------------------------------------------------------------ */
.entry-content .cause__media .wp-block-image,
.entry-content .reason__fig .wp-block-image,
.entry-content .media-frame .wp-block-image {
    display: contents;
}


/* ------------------------------------------------------------
   4-b. 「枠いっぱいに写真を敷く」タイプの枠
   ------------------------------------------------------------
   .pcard__media / .card__photo / .fv__bg は、枠の側が比率や高さを決めて、
   中の img を height: 100% で敷き詰める作り。

   ★ここで figure を display: contents にしてはいけない。
     contents にすると figure の高さが無くなり、img の height: 100% の
     基準（＝親の高さ）が消えて「画像そのままの縦横比」になってしまう。
     実際に .pcard__media で写真が 200px → 225px に伸びた。

   → figure を「枠と同じ大きさの透明な箱」にする。
     値は 100%（＝枠と同じ）だけで、寸法を新しく決めてはいない。
   ------------------------------------------------------------ */
.entry-content .pcard__media .wp-block-image,
.entry-content .card__photo .wp-block-image,
.entry-content .fv__bg .wp-block-image {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
}

/* Lightning に .wp-block-image img:not([style*="object-fit"]) { height: auto } があり、
   原本の .pcard__media img { height: 100% } より詳細度が高い。
   figure を1枚はさんだぶんセレクタが1つ長くなるので、それで勝たせて元に戻す。
   （新しい値ではなく、原本と同じ「枠いっぱい」に戻すだけ） */
.entry-content .pcard__media .wp-block-image img,
.entry-content .card__photo .wp-block-image img,
.entry-content .fv__bg .wp-block-image img {
    height: 100%;
}


/* ------------------------------------------------------------
   5. ボタンブロックの打ち消し
   ------------------------------------------------------------
   ボタンブロックは <div class="wp-block-buttons"> > <div class="wp-block-button"> >
   <a class="wp-block-button__link"> の3階層を作る。
   静的サイトは <a class="btn"> が直接置かれている形で、
   親（.btn-row / .access-card など）はどれも grid か flex。
   間に div が2枚入ると「数えられる子」が増えて並びが変わる。

   ★このサイトでは Gutenberg のボタン配置機能を一切使っていない
     （余白も並びも原本CSSが決めている）ので、本文の中では
     ボタンブロックの入れ物を全部「透明」にしてしまってよい。
   ------------------------------------------------------------ */
.entry-content .wp-block-buttons,
.entry-content .wp-block-button {
    display: contents;
}

/* ------------------------------------------------------------
   ※ ボタンの色・余白・角丸は、原本の .btn / .btn--cta / .btn--outline /
     .btn--invert / .btn--onDark がそのまま効く想定。
     WordPress標準の .wp-block-button__link より後に読み込まれるため、
     同じ詳細度なら原本が勝つ。
     もし負けている箇所が見つかったら、!important ではなく
     「.btn-row .btn { … }」のようにクラスを重ねてここに追記する。
   ------------------------------------------------------------ */


/* ------------------------------------------------------------
   6. 表（テーブルブロック）の罫線
   ------------------------------------------------------------
   WordPress標準とLightningが .wp-block-table に
     ・thead の下に 3px の罫線
     ・table / thead / tbody / tr の border-color を inherit
   を入れる。原本の表は「セルの1px罫線」だけなので、この2つを戻す。

   ★th / td は原本の .table th, .table td { border: 1px solid var(--c-line) }
     をそのまま使いたいので、対象から外している。
   ------------------------------------------------------------ */
.entry-content .wp-block-table thead {
    border-bottom: 0;
}

.entry-content .wp-block-table :is(table, thead, tbody, tfoot, tr) {
    border-color: currentColor;
}


/* ------------------------------------------------------------
   7. フォーム部品（お問い合わせフォーム）
   ------------------------------------------------------------
   ★ここだけは原本の値を書き写している。理由：

   原本は .form__input（クラス1つ）で入力欄の見た目を決めているが、
   Lightning は input[type="text"] / select / textarea といった
   「要素名＋属性」で指定しているため詳細度が上で、
   色・枠線・角丸・余白・下マージンが Lightning の値に置き換わる。
   原本CSSは1行も触らない約束なので、原本側の詳細度は上げられない。
   そこで、原本 .form__input が書いている宣言と同じものを、
   Lightning より強いセレクタで置き直している。

   ★値はすべて原本のコピー。色は var(--c-ink) / var(--c-tint-str) で、
     HEX直書きも新しい数値も足していない。
   ★原本 assets/style.css の .form__input を変更したら、ここも合わせること。

   appearance: auto … Lightning が select の見た目を none にして
   ネイティブの▼を消してしまうため、既定に戻している。
   ------------------------------------------------------------ */
.entry-content .form .form__input {
    font: inherit;
    font-size: 16px;
    color: var(--c-ink);
    background: var(--c-white);
    border: 1px solid var(--c-tint-str);
    border-radius: 2px;
    padding: 13px 14px;
    margin-bottom: 0;
    appearance: auto;
}

/* select は原本でも行間が normal（ブラウザ既定）。Lightning の行間指定を戻す */
.entry-content .form select.form__input {
    line-height: normal;
}

/* テキストエリアだけは原本が行間 1.8 を持っている */
.entry-content .form .form__input--area {
    line-height: 1.8;
}


/* ------------------------------------------------------------
   8. FVの背景・ベールを画面いっぱいのままにする
   ------------------------------------------------------------
   Lightning は「全幅ブロックの直下の子」に
     max-width: calc(var(--vk-width-container) - ...) と margin-inline: auto
   を掛ける。.sec の中では .sec__inner の max-width と同じ値になるため
   影響が出ないが、FVの背景写真とベールは画面の端まで敷く要素なので、
   ここだけ戻す。
   ★.fv__inner には原本の max-width があるため、対象に含めない
     （* で書くと原本の幅指定まで消えてしまう）。

   ※ 2026-08-21：原本の FV が <picture> から <img> 1本に変わったため、
     PC/SP の出し分け（旧8）と、写真の高さを auto に戻す指定（旧8-c）は
     不要になり削除した。写真は画像ブロック1つ（hero.jpg）だけになる。
   ------------------------------------------------------------ */
.entry-content .fv > .fv__bg,
.entry-content .fv > .fv__veil {
    max-width: none;
    margin-inline: 0;
}


/* ------------------------------------------------------------
   9. トップの「サイト内のご案内」カード（.navcard）
   ------------------------------------------------------------
   原本は「カード全体が1つのリンク」になっている。

     <li class="navcard">
       <a class="navcard__link" href="about.html">
         <span class="navcard__en">ABOUT</span>
         <span class="navcard__ja">当教室について</span>
         <span class="navcard__text">…</span>
         <span class="navcard__more">詳しく見る</span>
       </a>
     </li>

   ★ブロックエディタは <a> の中にブロックを入れられない。
     この4行をカスタムHTMLで書くと、説明文（navcard__text）が
     黒﨑様の編集対象から外れてしまう。
     ボタンブロック1つに4行を押し込む手もあるが、編集画面では
     「ABOUT当教室について独学で…詳しく見る」と1行につながって見え、
     どこを直せばよいか分からなくなる。

   → 中身は段落ブロック3つ＋ボタンブロック1つ（＝全部編集できる）にして、
     いちばん下の「詳しく見る」のリンクをカード全体に広げる。
     クリックできる範囲・見た目・要素の数は原本と同じになる。

   ・.navcard を position: relative にして、広げる基準にする
   ・.navcard__more::before を敷いてカード全面をリンクにする
     （原本の .navcard__more には ::after しか無いので衝突しない）
   ------------------------------------------------------------ */
.entry-content .navcard {
    position: relative;
}

.entry-content .navcard .navcard__more::before {
    content: "";
    position: absolute;
    inset: 0;
}

/* Lightning が本文中のリンクに付ける下線を、原本の a { text-decoration: none } に戻す */
.entry-content .navcard .navcard__more {
    text-decoration: none;
}

/* キーボード操作での見え方を原本に合わせる
   ------------------------------------------------------------
   原本ではカード全体が <a> なので、Tabキーで進むとカードごと浮き上がる
   （.navcard__link:focus-visible）。WordPress版では「詳しく見る」だけが
   <a> になるため、そのままだと小さな枠しか光らない。
   ★ここは原本 .navcard__link:hover / :focus-visible の2行を写している。
     原本 assets/style.css の .navcard__link:hover を変えたら、ここも合わせること。 */
.entry-content .navcard__link:has(.navcard__more:focus-visible) {
    box-shadow: var(--shadow-pop);
    transform: translateY(-2px);
}


/* ------------------------------------------------------------
   10. カードの中のボタンの文字色
   ------------------------------------------------------------
   Lightning は自前のカード部品のために
     .card a { color: inherit }
   を持っている。原本の .card は別物だが、クラス名が同じなので当たる。
   詳細度は .card a（クラス1＋要素1）＞ .btn--outline（クラス1）なので、
   カードの中のボタンだけ文字色が本文色になってしまう。

   ★ここも原本の値を書き写している（7. と同じ理由）。
     原本CSSは1行も触らない約束のため、原本側の詳細度を上げられない。
   ★値は原本 assets/style.css の .btn--cta / .btn--outline / .btn--invert
     の color をそのまま写したもの。原本を変えたら、ここも合わせること。
   ------------------------------------------------------------ */
.entry-content .card a.btn--cta {
    color: var(--c-white);
}

.entry-content .card a.btn--outline {
    color: var(--c-cta);
}

.entry-content .card a.btn--invert {
    color: var(--c-deep);
}


/* ------------------------------------------------------------
   11. お問い合わせフォーム（Contact Form 7）が足す入れ物を透明にする
   ------------------------------------------------------------
   2026-08-21：お問い合わせフォームを Contact Form 7 で実装した。
   原本のマークアップ（.form / .form__row / .form__input …）はそのまま使い、
   入力欄だけを CF7 のタグに置き換えている。

   CF7 は次の入れ物を自動で足すため、原本と同じ見え方に戻す。

   ・.wpcf7 … フォーム全体を包む div
   ・.wpcf7-form-control-wrap … 入力欄1つずつを包む span
   ・同意チェックの .wpcf7-acceptance / .wpcf7-list-item / その中の label

   display: contents は「この箱は無いものとして中身を並べる」指定で、
   5.（ボタンブロック）と同じ考え方。中身の見た目は一切変えない。

   ★CF7 が出す .screen-reader-response（読み上げ用）と
     .wpcf7-response-output（送信結果の表示）、hidden-fields-container は
     CF7 側のCSSで既に非表示なので、ここでは触らない。
   ------------------------------------------------------------ */
.entry-content .wpcf7,
.entry-content .wpcf7-form-control-wrap {
    display: contents;
}

.entry-content .form__agree .wpcf7-acceptance,
.entry-content .form__agree .wpcf7-list-item,
.entry-content .form__agree .wpcf7-acceptance label {
    display: contents;
}


/* 送信後に出る結果メッセージの枠を、サイトの色に合わせる
   ------------------------------------------------------------
   CF7 の既定は明るい緑（rgb(70,180,80)）の枠で、原本の配色に無い色。
   送信後にだけ出る要素なので初期表示には影響しないが、
   ここだけ別の緑になるため、CTA の色（--c-cta）に合わせている。
   ★色は tokens.css の変数のみ。太さ・余白はCF7のまま触っていない。 */
.entry-content .wpcf7-response-output {
    border-color: var(--c-cta);
    color: var(--c-ink);
}


/* ------------------------------------------------------------
   12. ブログ（投稿）の本文
   ------------------------------------------------------------
   2026-08-21：投稿の一覧と詳細を子テーマのテンプレートに切り替えた。
   ヘッダー・見出し帯・フッターは他の7ページと同じ部品を使っている。

   本文の入れ物は .post-body。固定ページの .entry-content とは分けてある。
   .entry-content は「余白は原本のクラスで決める」前提なので、
   1. で段落の下余白（--vk-margin-element-bottom）を 0 にしている。
   記事本文は普通の文章なので、そこを 0 にすると全部くっついてしまう。

   ★ここでも新しい数値は足していない。
     余白は Lightning が持っている変数をそのまま使い、
     リストの字下げは revert（ブラウザ既定に戻す）にしている。
     原本 style.css の冒頭に p / ul / ol などの margin・padding を 0 にする
     リセットがあり、それが記事本文にも当たってしまうための復帰。
   ------------------------------------------------------------ */
.post-body :is(p, ul, ol, dl, blockquote, table, figure, pre) {
    margin-bottom: var(--vk-margin-element-bottom);
}

.post-body :is(h1, h2, h3, h4, h5, h6) {
    margin-bottom: var(--vk-margin-headding-bottom);
}

.post-body :is(ul, ol) {
    padding-left: revert;
}

/* 見出しの装飾だけ、サイト本体と同じ「線なし」にそろえる
   （Lightning は h2 に青い罫線を引く。原本の見出しには罫線が無い）
   ★本文中のリンクの下線は Lightning のまま残している。
     記事の中では、どこがリンクか分かるほうが読みやすいため。 */
.post-body :is(h1, h2, h3, h4, h5, h6) {
    border: 0;
    border-radius: 0;
    background: none;
    position: static;
}
.post-body :is(h1, h2, h3, h4, h5, h6)::before,
.post-body :is(h1, h2, h3, h4, h5, h6)::after {
    content: none;
}


/* ------------------------------------------------------------
   13. ページ見出し帯（.page-head）の背景写真
   ------------------------------------------------------------
   2026-08-22 指示書11：下層ページの見出し帯が淡い緑の無地で寂しく見えるため、
   ページごとに別の写真を敷き、FV と同じ「写真＋深緑のベール」に揃える。

   ★写真の出し分けは固定ページの「アイキャッチ画像」で行う。
     テンプレートに画像URLを直書きしていないので、黒﨑様が管理画面から
     ページごとに差し替えられる。アイキャッチが無いページ（ブログ・記事など）は
     この節が丸ごと効かず、いままでの淡い緑の帯のまま出る。

   ★新しいクラスは作っていない。
     page.php / inc/blog-head.php が付ける data-bg 属性だけを目印にしている。
     （クラスを増やすと原本CSSとの区別が付かなくなるため）

   ★ベールの値は FV の .fv__veil と同じ --c-deep ／ opacity .86。
     ここを薄くすると白文字のコントラストが 4.5:1 を割る。
     7枚での実測は最悪値 4.90:1（1280 / 768 / 375px、最も明るい画素で計測）。
     0.82 まで下げると 4.47:1 で不合格になる。触らないこと。

   ★FV の .fv__bg / .fv__veil は流用していない。
     あちらは PC で写真を右 64% に寄せてマスクで左に溶かす作りで、
     見出し帯（横長・文字は中央）には合わないため。
   ------------------------------------------------------------ */
.page-head[data-bg] {
    position: relative;
    isolation: isolate;
    /* 淡い緑の1pxの罫線がベールの上に線として残るので、同じ深緑にして消す。
       （border を 0 にすると帯の高さが 1px 変わるため、色だけ合わせる） */
    border-bottom-color: var(--c-deep);
}

/* 背景写真。the_post_thumbnail() が出す <img> をそのまま敷く
   （srcset が付くので、スマホでは小さい画像が選ばれる） */
.page-head[data-bg] > img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}

/* 深緑のベール（写真は「気配」として見える程度まで沈める） */
.page-head[data-bg]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--c-deep);
    opacity: .86;
}

/* 文字は白に。位置・文字サイズは原本のまま変えていない。
   ★英字ラベルの --c-main（黄緑）と、パンくずの --c-ink-sub（灰）は
     ベールの上ではコントラストが足りないので、ここで白に置き換える。 */
.page-head[data-bg] .page-head__en,
.page-head[data-bg] .page-head__ja,
.page-head[data-bg] .breadcrumb,
.page-head[data-bg] .breadcrumb a,
.page-head[data-bg] .breadcrumb a:hover {
    color: var(--c-white);
}

/* リンクだと分かるように、ホバー時だけ下線を出す
   （通常時の見た目は原本と同じ） */
.page-head[data-bg] .breadcrumb a:hover {
    text-decoration: underline;
}



/* ------------------------------------------------------------
   14. 料金カード（.pcard）の中身を3枚で揃える
   ------------------------------------------------------------
   2026-08-22 指示書13：説明文の行数が1行違うだけで、その下の
   「✓の特徴」と「料金」の位置が 32px ずれていた（/lesson/ 1280px 実測）。
   カードの外枠と最下部は揃っていたので、ズレが中間に溜まっていた状態。

   ★文字数を揃えて直すのは不可。黒﨑様が本文を1文字直した瞬間に崩れる。
     min-height での固定も同じ理由で不可（行数が増えると今度ははみ出す）。
     そこで subgrid を使い、3枚のカードが「同じ行」を共有するようにする。

   仕組み：
     親 .grid--3 が縦の行を持ち、各 .pcard がその行にまたがる。
     行の高さは3枚のうち最も高いものに揃うので、
     説明文が何行になっても、その下の要素の位置は必ず一致する。

   ★またがる行数は「カードの直下の子の数」と同じでなければならない。
     - トップ         … 見出し／写真／説明／料金／おすすめ         ＝ 5
     - /lesson/       … 上に加えて「✓の特徴」が入る               ＝ 6
     数を書き分けるのではなく :has() で「特徴リストを持つカードか」を
     見て切り替えている。ページIDや body クラスに依存させないため。

   ★縦の間隔は原本 .pcard の gap（14px／768px以上は16px）がそのまま効く。
     gap は flex でも grid でも同じプロパティなので、
     ここに数値を書き写す必要がなかった（実測でも 22 / 70px のまま変化なし）。

   ★.pcard__reco の margin-top: auto は、ここでは 0 に戻す。
     最下部に置く役目は subgrid の「最後の行」が引き受けるため。
     auto のままだと、行の中で下に逃げてカードごとに y がずれる
     （768px で 916 / 892 / 916px になっていた）。
     0 にすると3枚とも行いっぱいに伸び、上端も下端も揃う。

   ★スマホ（768px未満）は対象外。縦積みなので高さが違って正常。
   ★subgrid か :has() が使えないブラウザでは、この節が丸ごと効かず
     いままでの見た目のまま出る（壊れない）。
   ------------------------------------------------------------ */
@media (min-width: 768px) {
    @supports (grid-template-rows: subgrid) and (selector(:has(*))) {

        /* 直下の子が5つのカード（トップ：特徴リストなし） */
        .grid--3 > .pcard {
            display: grid;
            grid-template-rows: subgrid;
            grid-row: span 5;
        }

        /* 直下の子が6つのカード（/lesson/：特徴リストあり） */
        .grid--3 > .pcard:has(> .pcard__feats) {
            grid-row: span 6;
        }

        /* 最下部へ寄せる役目は「最後の行」が持つので、auto を戻す */
        .grid--3 > .pcard > .pcard__reco {
            margin-top: 0;
        }
    }
}