/*
Theme Name: Gakkan Renewal v4
Theme URI: https://gakkan-urayasu.ed.jp/
Author: Tokyo Gakkan Urayasu
Description: 現行テーマをベースに、ブロックエディターでの固定ページ編集に対応させた試作テーマ。
Version: 1.0.0
*/

*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    --primary-blue: #022451;
    --secondary-blue: #183A5A;
    --examinee-red: #e60012;
    --student-orange: #f39800;
    --general-green: #009944;
    /* フッターの内容幅。この変数を使っているのは .footer-container の1箇所だけ
       （名前は汎用的だが実際はフッター専用）。以前は 1000px で、本文エリアの
       1200px（#content の max-width / theme.json の contentSize）より200px狭く、
       PCでフッターだけ内側に寄って見えていた。本文と左右の端を揃える。 */
    --content-width: 1200px;
    --bg-dark: #0d1a46;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

#colophon {
    background-color: #f8f9fa;
    padding: 60px 0 30px;
    width: 100%;
    color: #444;
    border-top: 1px solid #eee;
}

#content {
    min-height: 50px
}

#main::after {
    clear: both;
    display: table;
    content: ""
}

#masthead {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background-color: #ffffff !important;
    background-image: none !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
    z-index: 1000 !important;
    transition: all 0.3s ease;
    border-top: 3px solid var(--primary-blue) !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

#masthead-inner {
    padding: 10px 0 !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: transparent !important;
}

@media screen and (max-width: 768px) {
    #masthead-inner {
        padding: 8px 0 !important;
    }
}

/* Scrolled state - semi-transparent background */
body.scrolled #masthead {
    background-color: rgba(255, 255, 255, 0.85) !important;
    /* Semi-transparent white */
    backdrop-filter: blur(10px) saturate(180%) !important;
    /* Frosted glass effect */
    -webkit-backdrop-filter: blur(10px) saturate(180%) !important;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.1) !important;
    /* Slightly stronger shadow when scrolled */
}

/* 目には見えないが、読み上げソフトと検索エンジンには届く要素。
   以前は display:none だったが、それではアクセシビリティツリーからも
   除外されてしまい、この class を付ける意味が無くなる。
   実際、ハンバーガーボタンの「Menu」がこれで消えており、
   ボタンに読み上げ名が無い状態だった。
   位置を画面外へ飛ばす方式に変更。レイアウトは占有しない。 */
.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* キーボードで到達したときは見えるようにする（スキップリンク等） */
.screen-reader-text:focus {
    position: static !important;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
}

a {
    color: #022451;
    text-decoration: none;
    outline-width: medium;
    outline-style: none;
    outline-color: black
}

a:focus {
    color: #022451;
    text-decoration: underline
}

article {
    display: block
}

aside {
    display: block
}

body {
    font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, Osaka, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    text-align: left;
    padding-top: 80px !important; /* 固定ヘッダーの高さ分を確保 */
    margin: 0;
    word-wrap: break-word;
    /* 【削除済み】overflow-x: hidden !important / overflow-y: auto !important

       この2行が body 自身を「スクロールコンテナ」にしていた。
       すると body の中にある要素は、画面（ビューポート）ではなく
       body に対して吸い付こうとする。ところが body は伸びるだけで
       中身がはみ出さないため実際にはスクロールせず、
       scroll-snap がまったく効かない状態になっていた。

       横スクロール（ぐらつき）の抑制は、下の
       「Scroll Animations」節にある html, body { overflow-x: clip } が担う。
       clip は hidden と違いスクロールコンテナを作らないので、この問題が起きない。
       そちらの方が意図に沿っており、!important でこの行に上書きされて
       これまで死んでいた。

       横方向のはみ出しが再発したときは hidden に戻さず、
       はみ出している要素そのものを直すこと。 */
}

@media screen and (max-width: 768px) {
    body {
        padding-top: 60px !important; /* スマホ用 */
    }
}

details {
    display: block
}

dl {
    margin-top: 0px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

figcaption {
    display: block
}

figure {
    display: block
}

footer {
    display: block
}

h1 {
    margin-top: 0px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

h2 {
    margin-top: 0px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

h3 {
    margin-top: 0px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

h4 {
    margin-top: 0px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

h5 {
    margin-top: 0px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

h6 {
    margin-top: 0px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

header {
    display: block
}

hgroup {
    display: block
}

html {
    font-size: 62.5%
}

main {
    display: block
}

nav {
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

ol {
    margin-top: 0px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

p {
    margin-top: 0px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

section {
    display: block
}

summary {
    display: block
}

table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin-top: 0px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

ul {
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

@media not screen,
screen and (min-width: 569px) {
    #colophon-inner {
        padding-top: 10px;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        margin-top: 0px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 0px;
        width: 100%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box
    }

    #content {
        background-color: #ffffff;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 2500px;
        min-height: 50px
    }

    #main {
        background-color: transparent;
        padding: 5px;
        margin-top: 0px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 0px;
        width: 100%;
        max-width: 1200px;
        -webkit-box-sizing: content-box;
        box-sizing: content-box
    }

    #masthead {
        margin-bottom: 15px
    }

    #masthead-inner {
        margin-top: 0px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 0px;
        width: 100%;
        -webkit-box-sizing: content-box;
        box-sizing: content-box
    }

    #page {
        margin-top: 0px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 0px;
        overflow: hidden
    }
}

@media not screen,
screen and (min-width: 569px) {
    #content {
        width: 100%;
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }

    #contenthead {
        width: 100%;
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media screen and (max-width: 768px) {
    #colophon {
        padding-top: 10px;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 10px
    }

    #content {
        padding-top: 0px;
        padding-left: 4px;
        padding-right: 4px;
        padding-bottom: 0px;
        width: auto;
        min-height: 50px;
        float: none
    }

    #contenthead {
        width: auto;
        float: none
    }

    #main {
        background-color: #ffffff;
        padding-top: 10px;
        padding-left: 0px;
        padding-right: 0px;
        margin-top: 0px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 0px;
        width: 100%
    }

    #main-inner {
        margin: 10px;
        width: auto;
        float: none
    }

    #masthead {
        position: static
    }

    #primary {
        margin-top: 0px;
        margin-left: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        width: auto;
        float: none
    }

    #sidebar1 {
        width: 100%;
        float: none
    }

    #sidebar2 {
        width: 100%;
        float: none
    }

    * {
        -webkit-box-sizing: border-box;
        box-sizing: border-box
    }

body {
        min-width: 100%
    }

    embed {
        max-width: 100%
    }
}

/*@media screen and (max-width: 768px) {
    #sp-site-branding2-1 {
        padding-top: 0px;
        padding-left: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
        margin-top: 0px;
        margin-left: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        overflow: hidden
    }

    #sp-site-branding2-1 .extra {
        width: 100%;
        position: relative;
        top: 0px;
        left: 0%
    }

    #sp-site-branding2-1 .extra > p {
        font-size: 1rem;
        color: #ffffff;
        text-align: center;
        padding-top: 0px;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 0px;
        margin-top: 0px;
        margin-left: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box
    }

    #sp-site-branding2-1 .site-description {
        text-align: center;
        margin-top: 0px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 0px;
        width: 90%;
        float: none;
        position: static
    }

    #sp-site-branding2-1 .site-title {
        text-align: center;
        margin-top: 0px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 10px;
        float: none
    }

    #sp-site-branding2-1 .site-title a {
        margin-top: 0px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 0px
    }
}*/

@media screen and (max-width: 768px) {

/* Hamburger Toggle Style */
    .menu-toggle {
        background: transparent;
        border: none;
        padding: 5px;
        cursor: pointer;
        display: block !important;
        position: relative;
        z-index: 3000;
    }

    .hamburger {
        width: 30px;
        height: 20px;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .hamburger span {
        display: block;
        width: 100%;
        height: 3px;
        background-color: var(--primary-blue);
        border-radius: 2px;
        transition: all 0.3s ease;
    }

    /* Active state for hamburger */
    .menu-toggle.is-active .hamburger span:nth-child(1) {
        transform: translateY(8.5px) rotate(45deg);
    }

    .menu-toggle.is-active .hamburger span:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.is-active .hamburger span:nth-child(3) {
        transform: translateY(-8.5px) rotate(-45deg);
    }

    /* Mobile Drawer */

.mobile-menu-header {
        margin-bottom: 40px;
        border-bottom: 2px solid var(--primary-blue);
        padding-bottom: 10px;
    }

    .mobile-menu-header h2 {
        font-size: 1.2rem;
        font-weight: 700;
        color: var(--primary-blue);
    }

}

.page-access#content #page-content>p {
    font-size: 1.2rem
}

.page-concept#content #page-content {
    font-size: 1.2rem;
    background-color: #ffffff;
    padding-top: 0px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 0px
}

.page-concept#content #page-content>h3 {
    font-size: 1.4rem;
    background-color: #d4edf8
}

.page-concept#content #page-content>p {
    font-size: 1.2rem
}

.page-recruit1#content #page-content {
    font-size: 1.8rem
}

.page-recruit1#content #page-content>p {
    font-size: 1.8rem
}

/*#sp-site-branding2-1 .site-title{background-image:url(lib/images/title.png)}*/

/* <main class="normalize"> は 404 / archive / front-page / page_hpb /
   single / single-club の6テンプレートで使われる、本文の外枠。
   Noto Sans JP を欠いていたため、記事一覧や記事本文のうち
   ブロックエディタで明示指定していない箇所が Meiryo で表示されていた。
   body と同じ並びに揃える。 */
.normalize {
    font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, Osaka, sans-serif;
    font-size: 16px;
    font-weight: 500;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    background: transparent;
    border: 0;
    margin: 0px;
    padding: 0px;
    vertical-align: baseline;
    list-style-type: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.normalize h1,
.normalize h2,
.normalize h3,
.normalize h4,
.normalize h5,
.normalize h6 {
    /*    font-weight: normal;*/
    font-size: 100%
}


.normalize img {
    vertical-align: bottom
}

.normalize a:link,
.normalize a:visited,
.normalize a:active,
.normalize a:hover {
    overflow: hidden;
    outline: none;
    text-decoration: none;
}

.normalize button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: none;
    border: none;
    cursor: pointer
}

@media screen and (max-width: 768px) {
    .normalize {
        font-size: 15px
    }
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    font-size: 0;
    clear: both;
    visibility: hidden
}

#content {
    padding-bottom: 20px
}

@media screen and (max-width: 768px) {
    #content {
        padding-right: 0;
        padding-left: 0
    }
}

#front #masthead {
    margin-bottom: 0
}

.font-size--hg,
.post-content h1 {
    font-size: 1.85em;
    letter-spacing: .075em
}

.font-size--lg,
.post-content h2 {
    font-size: 1.333em;
    letter-spacing: .05em
}

/* .post-content h3 をこの共有規則から外した。
   font-size:1.111em を全H3に強制していたため、エディタで見出しの
   サイズを変えても反映されなかった。外して、エディタのサイズ指定
   （プリセットクラス／インライン）が通るようにする。
   サイズ未指定のH3はコア既定（16px）になる。
   .font-size--lm は別用途なので残す。 */
.font-size--lm {
    font-size: 1.111em;
    letter-spacing: .05em
}

.font-size {
    font-size: .8888em
}

.font-size--md {
    font-size: .8333em
}

.font-size--sm {
    font-size: .6666em
}

.font-size--post {
    font-size: 1.777em;
    letter-spacing: .075em
}

.font-size--base {
    font-size: 1.125rem
}

a:link,
a:visited,
a:active {
    color: #1A1A1A;
    text-decoration: none
}

a:hover {
    color: #1A1A1A;
    text-decoration: underline
}

.link--blue a,
.post-content a {
    color: #39f;
    text-decoration: underline
}

.link--blue a:link,
.post-content a:link {
    color: #39f
}

.link--blue a:visited,
.post-content a:visited {
    color: #39f
}

.link--blue a:active,
.post-content a:active {
    color: #39f
}

.link--blue a:hover,
.post-content a:hover {
    color: #39f;
    text-decoration: none
}

body {
    /* min-width:320px; */
    color: #1A1A1A;
    background: #fff
}

.l-layout,
.l-content,
.l-content--wide {
    max-width: 100%;
    margin: 0 auto
}

.l-content {
    width: 100%;
    max-width: 1000px;
    min-width: 1000px;
    padding: 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

@media screen and (max-width: 768px) {
    .l-content {
        padding-right: 8px;
        padding-left: 8px;
        min-width: initial;
        min-width: auto;
        max-width: initial;
        max-width: auto
    }
}

.l-content--wide {
    max-width: 100%
}

@media screen and (max-width: 768px) {
    .l-content--wide {
        min-width: initial;
        min-width: auto
    }
}

.flex,
.local-nav,
.post-nav-unit,
.club-list-item,
.post-article,
.post-title-wrap,
.archive-list-item li,
.summary,
.front-course-unit,
.front-course-item,
.pagenation ul,
.widgets_wrap,
.custom_widgets {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start
}

@media screen and (min-width: 569px) {
    #content {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }

    #content .content-article {
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2
    }

    #content .content-secondary {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1
    }
}

#colophon {
    margin-top: 80px
}

@media screen and (max-width: 768px) {
    #colophon {
        margin-top: 0
    }
}

/* アーカイブ冒頭の「情報の目次」（archive.php が固定ページ *_guide を差し込む枠）。
   お知らせ一覧との間隔だけ確保する。中身はブロックエディタ側で作るので、
   色・余白・レイアウトはここでは決めない。

   ■ overflow を戻す理由
   このファイルの上の方に section { overflow: hidden } という全 section 向けの
   規則がある。全幅（alignfull）のブロックは
     margin-left: calc(50% - 50vw); width: 100vw
   で親の外へはみ出すことで実現しているため、section に入れると
   はみ出した部分が切り取られ、全幅にしても全幅にならない。
   実測（1600px時）: レイアウト上の幅は 1600px なのに、描画は本文幅 1160px で
   左右220pxずつ欠けていた（getBoundingClientRect では気づけない）。
   開発ルール 23-1〜23-3 の「overflow:hidden を安易に足さない」と同じ話。

   ここは固定ページの中身をそのまま出す枠なので、ブロックの配置設定が
   素直に効くよう overflow を visible に戻す。
   実測: 横スクロールの発生なし・ページ全高 1941px のまま変化なし。
   スマホ（390px）は alignfull の規則自体が 769px 以上限定なので影響なし。 */
.archive-guide {
    padding-bottom: 40px;
    overflow: visible;
}

/* スマホでも全幅ブロックを画面いっぱいにする。
   テーマの .alignfull の規則は min-width:769px 限定なので、768px以下では
   全幅を選んでも本文の枠内に収まってしまう。
   実測（390px時）: #main-inner の margin 0 10px により本文が370pxで、
   全幅にしても左右に10pxずつ余白が残っていた。
   ここは固定ページの中身を出す枠なので、PC と同じ挙動に揃える。
   範囲を .archive-guide 配下に限定しているので、他ページの alignfull の
   扱いは従来どおり変わらない。
   実測: 370 → 390px（左右0）・横スクロールなし・ページ全高 3774px のまま。 */
@media screen and (max-width: 768px) {
    .archive-guide .alignfull {
        margin-right: calc(50% - 50vw);
        margin-left: calc(50% - 50vw);
        width: 100vw;
        max-width: 100vw;
    }
}

.sub-section {
    padding-bottom: 40px
}

.sub-section:last-child {
    padding-bottom: 0
}

.sub-section.club {
    padding-top: 0;
    padding-bottom: 0
}

.font_general {
    font-family: "Koburina Gothic W6 JIS2004"
}

.font_lead {
    font-family: 'Roboto', sans-serif
}

/* 日付・数字。以前は .en とまとめて 'Lato' を指定していたが、
   Lato は読み込まれておらず既定のsans-serifに落ちていた。
   そもそも日付は「2026年6月23日」のように日本語を含むため、
   Lato を読み込んだとしても「年月日」の字形が無く、
   1つの日付の中で文字ごとに別フォントへ落ちてしまう。
   本文と同じ Noto Sans JP に統一する。 */
.font_number,
.club-list-date,
.single-list-date,
.archive-list-date,
.side-list-date {
    font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, Osaka, sans-serif;
}

/* 英字のみのラベル（INFORMATION / Athletic / Non-Athletic など）。
   こちらは日本語が入らないので欧文フォントでよい。
   Lato は読み込んでいないため、読み込み済みの Montserrat を使う。
   万一日本語が混ざった場合に備えて Noto Sans JP を控えに置く。 */
.en {
    font-family: "Montserrat", "Noto Sans JP", sans-serif;
}

.material-icons {
    vertical-align: bottom;
    margin-right: 4px
}

#front #colophon {
    margin-top: 40px
}

@media screen and (max-width: 768px) {
    #front #colophon {
        margin-top: 0
    }
}

.local-nav {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0 0 20px
}

@media screen and (max-width: 768px) {
    .local-nav {
        padding-bottom: 0
    }
}

.local-nav .menu-item {
    list-style: none;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: center;
    padding-right: 1px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.local-nav .menu-item:last-child {
    padding-right: 0
}

@media screen and (max-width: 768px) {
    .local-nav .menu-item {
        -webkit-box-flex: 0;
        -ms-flex: none;
        flex: none;
        width: 50%;
        padding-right: 2px;
        padding-bottom: 2px
    }

    .local-nav .menu-item:nth-child(even) {
        padding-right: 0
    }
}

.local-nav .menu-item a {
    font-size: 1.4rem;
    font-weight: bold;
    background: -webkit-gradient(linear, left top, left bottom, from(#f9fafa), to(#ebebeb));
    background: linear-gradient(180deg, #f9fafa, #ebebeb);
    border-radius: 2px;
    padding-top: 24px;
    padding-bottom: 24px;
    color: #0D1A46;
    display: block;
    -webkit-transition: all .3s;
    transition: all .3s
}

.local-nav .menu-item a:before {
    content: "";
    width: 64px;
    height: 46px;
    display: block;
    margin: 0 auto 16px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    -webkit-transition: all .05s;
    transition: all .05s
}

.local-nav .menu-item a:hover {
    text-decoration: none;
    background: #fff;
    -webkit-transition: all .3s;
    transition: all .3s
}

.local-nav .menu-item a:hover:before {
    -webkit-transform: scale(1.15);
    transform: scale(1.15)
}

.local-nav .menu-item.list-01 a:before {
    background-image: url(lib/images/nav_img_01.svg)
}

.local-nav .menu-item.list-02 a:before {
    background-image: url(lib/images/nav_img_02.svg)
}

.local-nav .menu-item.list-03 a:before {
    background-image: url(lib/images/nav_img_03.svg)
}

.local-nav .menu-item.list-04 a:before {
    background-image: url(lib/images/nav_img_04.svg)
}

.local-nav .menu-item.list-05 a:before {
    background-image: url(lib/images/nav_img_05.svg)
}

.local-nav .menu-item.list-06 a:before {
    background-image: url(lib/images/nav_img_06.svg)
}

.post-nav {
    font-size: .875em
}

.post-nav-unit {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    border-top: 1px solid #E6E6E6;
    border-bottom: 1px solid #E6E6E6;
    padding-top: 30px;
    padding-bottom: 30px
}

@media screen and (max-width: 768px) {
    .post-nav-unit {
        padding-top: 20px;
        padding-bottom: 20px
    }
}

.post-nav-unit>div:nth-child(1) {
    width: 35%
}

@media screen and (max-width: 768px) {
    .post-nav-unit>div:nth-child(1) {
        width: 50%;
        text-align: center
    }
}

.post-nav-unit>div:nth-child(2) {
    width: 30%;
    text-align: center
}

@media screen and (max-width: 768px) {
    .post-nav-unit>div:nth-child(2) {
        -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
        order: 3;
        width: 100%
    }
}

.post-nav-unit>div:nth-child(3) {
    width: 35%;
    text-align: right
}

@media screen and (max-width: 768px) {
    .post-nav-unit>div:nth-child(3) {
        text-align: center;
        width: 50%;
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2
    }
}

.post-nav .post-prev a:before {
    content: "\e5cb";
    color: inherit;
    margin: 0 4px 0 0;
    display: inline-block;
    font-family: "Material Icons";
    text-align: center;
    vertical-align: baseline;
    width: 1.28571em
}

.post-nav .post-next a:after {
    content: "\e5cc";
    color: inherit;
    margin: 0 0 0 4px;
    display: inline-block;
    font-family: "Material Icons";
    text-align: center;
    vertical-align: baseline;
    width: 1.28571em
}

.club-list-item .club-anchor {
    display: block
}

.club-list-item .club-anchor:hover {
    text-decoration: none
}

.club-list-item .club-anchor:hover .club-list-figure img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

.club-list-item li {
    list-style: none;
    width: 50%;
    padding: 10px;
    margin-bottom: 40px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

@media screen and (max-width: 768px) {
    .club-list-item li {
        width: 100%;
        margin-bottom: 0
    }
}

.club-list-date {
    font-size: .9375em;
    color: #333;
    vertical-align: baseline;
    display: block;
    margin-bottom: 4px;
    font-weight: bold
}

@media screen and (max-width: 768px) {
    .club-list-date {
        margin: 0;
        padding-top: .625em
    }
}

.club-list-title {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-bottom: 0;
    font-style: normal
}

.club-list-figure {
    margin: 0 0 12px;
    overflow: hidden
}

@media screen and (max-width: 768px) {
    .club-list-figure {
        margin: 0
    }
}

.club-list-figure img {
    width: 100%;
    -webkit-transition: all .3s;
    transition: all .3s
}

.basketball_men .club-list-figure--post,
.basketball_women .club-list-figure--post,
.volleyball .club-list-figure--post,
.volleyball .club-list-figure--post,
.badminton .club-list-figure--post,
.tabletennis .club-list-figure--post,
.tennis .club-list-figure--post,
.softball .club-list-figure--post,
.handball .club-list-figure--post,
.handball .club-list-figure--post,
.soccer .club-list-figure--post,
.baseball .club-list-figure--post,
.rugby .club-list-figure--post,
.athletics .club-list-figure--post,
.judo .club-list-figure--post,
.kendo .club-list-figure--post,
.chedance .club-list-figure--post {
    border-bottom: 6px solid #01A0E9
}

.calligraphy .club-list-figure--post,
.art .club-list-figure--post,
.brassband .club-list-figure--post,
.illustration .club-list-figure--post,
.acting .club-list-figure--post,
.interact .club-list-figure--post,
.photograph .club-list-figure--post,
.dressing .club-list-figure--post,
.literature .club-list-figure--post,
.debate .club-list-figure--post,
.cooking .club-list-figure--post {
    border-bottom: 6px solid #87AC36
}

.post-article>header {
    width: 100%
}

.post-article>article {
    width: 670px
}

@media screen and (max-width: 768px) {
    .post-article>article {
        width: 100%
    }
}

.post-article>aside {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 32px;
    padding-top: 0px
}

@media screen and (max-width: 768px) {
    .post-article>aside {
        padding-left: 0;
        padding-top: 0
    }
}

/* サイドバーの幅の上限。
   本文（.post-article > article）は width: 670px の固定、サイドバーは flex: 1。
   つまり誰もサイドバーの幅を決めておらず、コンテナが広がった分は全部
   サイドバーに流れ込む構造になっている。

   旧サイトは #main が width: 940px だったのでサイドバーは 230px だったが、
   全体の最大幅を 1200px に広げた際（style.css の #main / #content）、
   増えた260pxが1pxも本文へ行かずサイドバーに乗り、490pxまで太っていた。

   本文670pxは読みやすさのための設計値なので動かさず、サイドバーだけ
   300pxで頭打ちにして、余りは列の間の余白へ回している。

   1025px以上に限定しているのは、それ未満では本文とサイドバーが
   折り返して縦に積まれるため（実測: 1000pxでサイドバー290px、
   800pxで折り返して全幅）。ここに上限を掛けると、積まれた側が
   300pxの半端な幅になる。 */
@media screen and (min-width: 1025px) {
    .post-article {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

    .post-article>aside {
        max-width: 300px;
    }
}

.post-article .post-title {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2
}

.post-article .single-list-label {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
    margin-bottom: 60px
}

@media screen and (max-width: 768px) {
    .post-article .single-list-label {
        margin-bottom: 32px
    }
}

.post-article time {
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 3;
    order: 3
}

.post-article-unit--club .single-list-label {
    margin-bottom: 10px
}

.post-title-wrap {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-top: 10px
}

.post-title-wrap--club {
    padding-top: 40px
}

.single-list-date {
    font-size: 1em;
    color: #333;
    vertical-align: baseline;
    font-weight: normal
}

@media screen and (max-width: 768px) {
    .single-list-date {
        margin: 0
    }
}

/* WordPressのブロックレイアウト指定を復元（テーマのリセットで上書きされるのを防ぐ）。
   gap はここで指定しない。
   以前は gap: var(--wp--style--block-gap, 1.2rem) を持っていたが、このサイトは
   --wp--style--block-gap を全体で 0 にしているため gap が常に 0 になり、しかも
   この規則の詳細度が、エディタの「ブロックの間隔」を出力するコアの
   .wp-container-core-group-is-layout-xxxx（0,1,0）に勝ってしまい、
   間隔を最大にしても反映されなかった（フロントの COURSES グリッドで発生）。
   レイアウトCSSは第16節でコアが出力するようになったので、gap はコアに任せる
   （エディタ指定があればその値、無ければコア既定）。第19〜21節と同じ「後付け
   フォールバックを退けてエディタ／コアに委ねる」方針。 */
.is-layout-grid {
  display: grid !important;
}
@media (max-width: 768px) {
  /* スマホは1列にする。以前は display:block にしていたが、block では
     gap が効かず、エディタで設定した「ブロックの間隔」が縦積み時に
     消えてカードが密着していた。grid のまま1列にすれば row-gap が効く。 */
  .is-layout-grid {
    grid-template-columns: 1fr !important;
  }
}




.post-content {
    padding-top: 10px;
    padding-bottom: 100px
}

@media screen and (max-width: 768px) {
    .post-content {
        padding-top: 10px
    }
}

/* 本文中の素のPDFリンクにアイコンを付ける規則。
   .button を除外しているのは、この background ショートハンドが
   .button-orange 等の背景色を透明にリセットしてしまうため。
   .button-orange は color:#fff !important なので、除外しないと
   白背景に白文字になって完全に見えなくなる（証明書ページで発生していた）。
   ダウンロードボタンは .button-download:before が自前でアイコン領域を持つ。

   .wp-block-button__link も同じ理由で除外する（2026-07-26 追加）。
   ブロックのボタンに「追加CSSクラス: pdf」を付けたところ、同じ事故が起きた。
   実測: 背景 rgb(50,55,60) → rgba(0,0,0,0)（透明）になりボタンに見えない。
   さらに背景画像は左端に固定されるため、幅864pxの全幅ボタンでは
   文字が中央・アイコンが左端となり、両者が229px離れていた。
   ボタン用のアイコンは下の擬似要素の規則で付ける。 */
.post-content a.pdf:not(.button):not(.wp-block-file__content):not(.wp-block-file__button):not(.wp-block-button__link) {
    display: inline-block;
    margin-bottom: .75em;
    color: #1A1A1A;
    background: url(lib/images/icon-pdf2.svg) no-repeat;
    background-size: 37px auto;
    padding-left: calc(37px + 1em);
    min-height: 46px
}

/* 同上。xlsx側にも同じ潜在バグがあるため .button と block ボタンを除外しておく */
.post-content a[href$=".xlsx"]:not(.button):not(.wp-block-file__content):not(.wp-block-file__button):not(.wp-block-button__link) {
    display: inline-block;
    margin-bottom: .75em;
    color: #1A1A1A;
    background: url(lib/images/icon-xlsx.svg) no-repeat;
    background-size: 37px auto;
    padding-left: calc(37px + 1em);
    min-height: 46px
}

/* ブロックのボタンに付けるファイルアイコン。
   --------------------------------------------------------------------------
   ボタンの「追加CSSクラス」に pdf（または xlsx）を入れると、文字の左隣に
   アイコンが出る。上の素のリンク用の規則と違い、背景ではなく擬似要素で描く。

   ■ 背景画像ではなく擬似要素にする理由
   1. background ショートハンドはボタンの背景色を消す（上のコメント参照）
   2. 背景画像は要素の左端に固定されるので、全幅ボタンだと中央寄せの文字と
      大きく離れる。擬似要素なら inline-flex の並びに乗り、文字の隣に来る
      （テーマは body .wp-block-button__link で inline-flex を指定済み）

   サイズを em で持たせているので、ボタンの文字サイズに追従する。 */
.post-content .wp-block-button__link.pdf::before,
.post-content .wp-block-button__link.xlsx::before {
    content: "";
    flex-shrink: 0;
    width: 1.4em;
    height: 1.4em;
    margin-right: .5em;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.post-content .wp-block-button__link.pdf::before {
    background-image: url(lib/images/icon-pdf2.svg);
}

.post-content .wp-block-button__link.xlsx::before {
    background-image: url(lib/images/icon-xlsx.svg);
}

.post-content h1 {
    font-weight: bold
}

.post-content h2 {
    font-weight: bold
}

/* 【削除済み】記事・固定ページ本文のH3に青罫線＋青文字を付ける古い装飾。
   .post-content h3 { color:#364e96; border-top/bottom:1.5px #364e96; ... }
   エディタで色を指定していなくても全H3に問答無用で付いていた
   （新規固定ページ・クラシック記事とも）。ブロックエディタの
   見出し設定を活かすため削除した。
   区切りとしてこれに依存していたクラシック記事（ほけんだより等）は
   作り直す方針。戻す場合は git 履歴（このコミットの1つ前）を参照。 */

.post-content h4 {
    font-size: 1em;
    font-weight: bold
}

.post-content h5 {
    font-size: 1em;
    font-weight: bold
}

.post-content h6 {
    font-size: 1em
}

/*.post-content img:not(.wp_social_bookmarking_light_img) {
    width: 100%;
    height: auto
}*/

.post-content ul li {
    list-style-type: disc;
    list-style-position: inside;
    padding-left: 1em;
    text-indent: -1em
}

.post-content ol li {
    list-style-type: decimal;
    list-style-position: inside;
    padding-left: 1em;
    text-indent: -1em
}

.post-content dl dt {
    font-weight: bold
}

.post-content blockquote {
    font-style: italic
}

.archive-list-unit {
}

.archive-list-item {
    border-top: 1px solid #E6E6E6
}

.archive-list-item li {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-top: 1em;
    padding-bottom: 1em;
    border-bottom: 1px solid #E6E6E6
}

@media screen and (max-width: 768px) {
    .archive-list-item li {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start
    }
}

.archive-list-item--front {
    margin-top: 20px
}

.archive-list-date {
    font-size: .9375em;
    color: #333;
    vertical-align: baseline;
    margin-right: 1.25em;
    margin-left: 1em;
    font-weight: bold;
    display: inline-block;
    width: 140px; /* タイトルの頭を揃えるため幅を固定 */
    flex-shrink: 0; /* フレックスコンテナ内で縮むのを防止 */
}

@media screen and (max-width: 768px) {
    .archive-list-date {
        margin: 0;
        padding-top: .625em;
        width: auto;
    }
}

.archive-list-title {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-bottom: 0;
    font-size: 0.9em;
    font-weight: normal;
}

.summary-unit {
    width: 50%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-right: 15px;
    padding-left: 15px
}

@media screen and (max-width: 768px) {
    .summary-unit {
        width: 100%;
        padding-right: 0;
        padding-left: 0
    }
}

.summary-item {
    padding-bottom: 40px
}

.summary-ol {
    /*    padding-top: 1.5em !important;*/
    padding-bottom: 1.5em !important
}

.summary-ol li {
    list-style-type: decimal;
    list-style-position: inside;
    padding-left: 1.25em;
    padding-bottom: 1.25em;
    text-indent: -1.25em
}

.athletic-unit {
    border-top: 1px solid #F0F0F0
}

.athletic-unit li {
    list-style: none;
    border-bottom: 1px solid #F0F0F0;
    padding-top: .75em;
    padding-bottom: .75em
}

.athletic-unit li a {
    font-size: 1.125em
}

.athletic-unit li a:before {
    content: "";
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    margin-right: .5em
}

.athletic .athletic-unit li a:before {
    background: url(lib/images/icon-arrow_01.svg) no-repeat
}

.non-athletic .athletic-unit li a:before {
    background: url(lib/images/icon-arrow_02.svg) no-repeat
}

.firstview {
    width: 100%
}

.firstview img {
    width: 100%;
}



.front-information {
    padding-bottom: 80px
}

@media screen and (max-width: 768px) {
    .front-information {
        padding-bottom: 40px
    }
}

.front-course-item {
    width: 50%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 28vw;
    min-height: 260px;
    padding: 0 4vw;
    text-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

@media screen and (max-width: 768px) {
    .front-course-item {
        width: 100%;
        margin-bottom: 6px
    }
}

.front-course-item:nth-child(1) {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 63, 134, 0.7)), to(rgba(0, 63, 134, 0.7))), url(lib/images/front_img_02.jpg) center/cover no-repeat;
    background: linear-gradient(rgba(0, 63, 134, 0.7) 0%, rgba(0, 63, 134, 0.7) 100%), url(lib/images/front_img_02.jpg) center/cover no-repeat
}

.front-course-item:nth-child(2) {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(209, 105, 0, 0.7)), to(rgba(209, 105, 0, 0.7))), url(lib/images/front_img_03.jpg) center/cover no-repeat;
    background: linear-gradient(rgba(209, 105, 0, 0.7) 0%, rgba(209, 105, 0, 0.7) 100%), url(lib/images/front_img_03.jpg) center/cover no-repeat
}

.front-course-title {
    font-size: 1.5625em !important;
    font-weight: bold !important;
    letter-spacing: .025em;
    color: #fff;
    margin: 0;
    border: 2px solid #fff
}

@media screen and (max-width: 768px) {
    .front-course-title {
        font-size: 1.375em !important
    }
}

.front-course-title--blue a:hover {
    color: #115491
}

.front-course-title--orange a:hover {
    color: #F78B2E
}

.front-course-title a {
    color: #fff;
    display: block;
    padding: .75em 1.75em;
    -webkit-transition: all .3s;
    transition: all .3s
}

.front-course-title a:hover {
    text-decoration: none;
    background: #fff
}

.front-course-title--sub {
    margin-bottom: .5em;
    font-weight: bold !important;
    letter-spacing: .05em;
    color: #fff
}

.button {
    border: none;
    cursor: pointer;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    text-align: center;
    font-size: .9375em;
    padding: 1em 2em;
    text-decoration: none;
    text-align: center;
    border-radius: 4px;
    display: inline-block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .15s;
    transition: all .15s;
    background: gray;
    margin-top: 10px;
    margin-bottom: 10px;
}

.button:hover {
    text-decoration: none;
    -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    border-radius: 0
}

/* 旧サイト由来の色付きボタン。新規では使わない方針のため、
   現行のブロックボタン（学校ブルー #0099d9 の枠線ボタン）に見た目を寄せる。
   これらのクラスを使っている既存ページの中身を書き換えなくても表示が揃う。

   元は白文字＋オレンジ地(#F78B2E)／濃紺地(#115491)だった。
   オレンジは白文字とのコントラストが2.4:1しかなくWCAG AAを大きく下回っていた。

   .button 側の `border: none` と `:hover { border-radius: 0 }` を打ち消す
   必要があるため、この規則は必ず .button / .button:hover より後ろに置くこと。 */
.button-orange,
.button-blue {
    color: #0099d9 !important;
    background: transparent;
    border: 2px solid #0099d9;
    border-radius: 999px;
    font-weight: 600;
}

.button-orange:hover,
.button-blue:hover {
    color: #ffffff !important;
    background: #0099d9;
    border-radius: 999px;
}

.button-arrow:after {
    content: "\e5df";
    color: inherit;
    margin: 0 0 0 8px;
    display: inline-block;
    font-family: "Material Icons";
    text-align: center;
    vertical-align: baseline;
    width: 1.28571em
}

.button-download {
    padding: 1em 4em
}

.button-download:before {
    content: "\e2c4";
    color: inherit;
    margin: 0 8px 0 0;
    display: inline-block;
    font-family: "Material Icons";
    text-align: center;
    vertical-align: baseline;
    width: 1.28571em
}

@media screen and (max-width: 768px) {
    .button-download:before {
        margin: 0 4px 0 0
    }
}

.button--custom {
    text-align: center
}

.button--custom a {
    font-size: .875em;
    margin-top: 20px;
    padding: 10px 40px;
    display: block;
    text-decoration: none;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 5px;
    display: inline-block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s
}

.button--custom a:hover {
    background: #F5F5F5
}

@media screen and (max-width: 768px) {
    .button--custom-club {
        padding-bottom: 20px
    }
}

.term-label {
    color: #fff;
    background: #F2F2F2;
    border-radius: 25px;
    text-align: center;
    font-size: .875em;
    font-weight: bold;
    padding-top: .35em;
    padding-bottom: .35em
}

.archive-list-label {
    width: 190px
}

@media screen and (max-width: 768px) {
    .archive-list-label {
        width: auto;
        padding: .15em 2em
    }
}

.single-list-label {
    width: 190px
}

@media screen and (max-width: 768px) {
    .single-list-label {
        padding: .15em 2em
    }
}

.side-list-label {
    display: inline-block;
    font-size: .8125em;
    margin-bottom: 8px;
    padding-right: 20px;
    padding-left: 20px
}

.club-list-label {
    display: inline-block;
    margin-bottom: 8px;
    padding-right: 32px;
    padding-left: 32px;
    border-radius: 4px;
    font-size: 1.125em;
    text-transform: uppercase;
    letter-spacing: .075em
}

.basketball_men .club-list-label,
.basketball_women .club-list-label,
.volleyball .club-list-label,
.volleyball .club-list-label,
.badminton .club-list-label,
.tabletennis .club-list-label,
.tennis .club-list-label,
.softball .club-list-label,
.handball .club-list-label,
.handball .club-list-label,
.soccer .club-list-label,
.baseball .club-list-label,
.rugby .club-list-label,
.athletics .club-list-label,
.judo .club-list-label,
.kendo .club-list-label,
.chedance .club-list-label {
    background: #01A0E9
}

.calligraphy .club-list-label,
.art .club-list-label,
.brassband .club-list-label,
.illustration .club-list-label,
.acting .club-list-label,
.interact .club-list-label,
.photograph .club-list-label,
.dressing .club-list-label,
.literature .club-list-label,
.debate .club-list-label,
.cooking .club-list-label {
    background: #87AC36
}

.club-list-label a {
    color: #fff;
    display: block
}

.club-list-label a:hover {
    text-decoration: none
}

.pagenation {
    margin-top: 40px
}

.pagenation ul {
    margin: 0;
    padding-left: 0;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.pagenation li {
    font-size: 1em;
    list-style: none;
    margin: 4px;
    display: inline-block;
    vertical-align: top
}

.pagenation li.active span {
    background: #E6E6E6;
    color: #4E4D5A;
    display: block;
    padding: 10px 20px;
    border: 1px solid #E6E6E6
}

.pagenation li a {
    background: #fff;
    color: #4E4D5A;
    display: block;
    padding: 10px 20px;
    border: 1px solid #E6E6E6;
    text-decoration: none
}

.pagenation li a:hover {
    background-color: #115491;
    color: #fff;
    -webkit-transition: 500ms all ease;
    transition: 500ms all ease
}

.side-post-list-headline {
    border-top: 2px solid #0D1A46;
    border-bottom: 2px solid #0D1A46;
    padding: 22px 20px;
    color: #0D1A46;
    font-weight: bold;
    font-size: .875em
}

@media screen and (max-width: 768px) {
    .side-post-list-headline {
        text-align: center;
        font-size: 1em
    }

    .side-post-list-headline br {
        display: none
    }
}

/* サイドバー「最新のお知らせ」。
   このテーマには ul の共通リセットが無く、リストごとに list-style: none を
   個別に当てている。ここだけ指定が漏れていて、ブラウザ既定の disc が
   出たままになっていた（PCでは左の余白に黒丸、スマホでは画面左端で半分切れる）。
   padding を 0 にしてあるので list-style-position: outside のマーカーが
   コンテンツボックスの外に描かれ、余計に目立つ。 */
.side-post-list-unit {
    list-style: none;
    padding: 10px 0 !important
}

.side-post-list .side-post-list-link {
    padding: 20px 0;
    border-bottom: 1px solid #E6E6E6
}

.side-post-list a {
    display: block
}

.side-post-list a:hover {
    text-decoration: none
}

.side-post-list a:hover .side-post-list-title {
    text-decoration: underline
}

.side-post-list-title {
    font-size: .875em
}

.side-list-date {
    font-size: .8125em;
    color: #333;
    vertical-align: baseline;
    display: block;
    padding-bottom: 8px;
    font-weight: normal
}

@media screen and (max-width: 768px) {
    .side-list-date {
        margin: 0
    }
}

.table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: .5em
}

.table th {
    border: solid 1px #aaa;
    font-weight: normal;
    text-align: center;
    padding: .5em .75em;
    font-size: .9125em
}

.table td {
    border: solid 1px #aaa;
    padding: .5em .2em
}

.table--blue tr:nth-child(1) {
    background: #E0F0FA
}

.table--blue td:nth-child(1) {
    font-weight: bold;
    background: #E0F0FA
}

.table--blue td:nth-child(2) {
    text-align: center
}

.table--blue td:nth-child(3) {
    text-align: center
}

.table--blue td:nth-child(4) {
    text-align: center
}

.table--gray td:nth-child(1) {
    font-weight: bold;
    background: #EBEBEB;
    text-align: center
}

.section-title-group {
    padding-top: 10px;
    padding-bottom: 32px
}

@media screen and (max-width: 768px) {
    .section-title-group {
        padding-top: 20px;
        padding-bottom: 20px
    }
}

.sub-section .section-title-group {
    padding-bottom: 0
}

.front-information .section-title-group {
    padding-bottom: 10px
}

#content .post-title {
    font-size: 1.75em;
    font-weight: bold;
    letter-spacing: .025em
}

@media screen and (max-width: 768px) {
    #content .post-title {
        font-size: 1.5em
    }
}

.section-title {
    font-weight: bold !important;
    font-size: 1.25em !important;
    color: #333;
    letter-spacing: .025em
}

.sub-section .section-title {
    margin-bottom: 48px
}

@media screen and (max-width: 768px) {
    .sub-section .section-title {
        margin-bottom: 32px
    }
}

.sub-section .section-title:after {
    content: "";
    display: block;
    width: 64px;
    height: 3px;
    background: #EC1234;
    margin-top: 24px
}

@media screen and (max-width: 768px) {
    .sub-section .section-title:after {
        margin-top: 12px
    }
}

.entry-title {
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 2em;
    border-bottom: solid;
    padding-bottom: 5px;
}

.en--middle {
    font-size: 1.5em;
    font-weight: bold;
    letter-spacing: .1em
}

@media screen and (max-width: 768px) {
    .en--middle {
        font-size: 1.2em;
        display: block
    }
}

.en--large {
    font-size: 2em;
    font-weight: bold;
    letter-spacing: .1em;
    display: block;
    color: #000022;
}

@media screen and (max-width: 768px) {
    .en--large {
        font-size: 1.6em
    }
}

.club-title-group {
    padding: 0
}

.club-title-group figure {
    margin: 0
}

.club-title-group figure img {
    width: 100%;
    height: auto
}

.club-title-page-unit {
    border-left: 12px solid #f2f2f2;
    padding: 20px 32px 40px
}

.basketball_men .club-title-page-unit,
.basketball_women .club-title-page-unit,
.volleyball .club-title-page-unit,
.volleyball .club-title-page-unit,
.badminton .club-title-page-unit,
.tabletennis .club-title-page-unit,
.tennis .club-title-page-unit,
.softball .club-title-page-unit,
.handball .club-title-page-unit,
.handball .club-title-page-unit,
.soccer .club-title-page-unit,
.baseball .club-title-page-unit,
.rugby .club-title-page-unit,
.athletics .club-title-page-unit,
.judo .club-title-page-unit,
.kendo .club-title-page-unit,
.chedance .club-title-page-unit {
    border-color: #01A0E9
}

.calligraphy .club-title-page-unit,
.art .club-title-page-unit,
.brassband .club-title-page-unit,
.illustration .club-title-page-unit,
.acting .club-title-page-unit,
.interact .club-title-page-unit,
.photograph .club-title-page-unit,
.dressing .club-title-page-unit,
.literature .club-title-page-unit,
.debate .club-title-page-unit,
.cooking .club-title-page-unit {
    border-color: #87AC36
}

@media screen and (max-width: 768px) {
    .club-title-page-unit {
        border-left-width: 8px;
        padding: 20px
    }
}

.club-title-page-unit .club-title-page {
    color: #333;
    text-transform: uppercase;
    font-size: 1.625em;
    letter-spacing: .075em;
    font-weight: bold
}

.club-title-page-unit .club-title-page span {
    font-size: 1.538em
}

@media screen and (max-width: 768px) {
    .club-title-page-unit .club-title-page {
        font-size: 1.25em
    }
}

.item-title {
    font-size: 1.125em !important;
    font-weight: bold !important
}

.item-title--club {
    border-left: 8px solid #F2F2F2;
    padding: .75em 1em;
    color: #fff;
    font-weight: normal !important;
    letter-spacing: .05em
}

.item-title--club .en {
    font-size: 1.666em;
    display: block
}

.athletic .item-title--club {
    border-color: #0A84BC;
    background: url(lib/images/bg-title_club_01.svg) left/contain no-repeat, url(lib/images/bg-title_club_01.jpg) right/cover no-repeat
}

.non-athletic .item-title--club {
    border-color: #678B17;
    background: url(lib/images/bg-title_club_02.svg) left/contain no-repeat, url(lib/images/bg-title_club_02.jpg) center/cover no-repeat
}

.item-attention {
    font-size: .8em;
    display: block;
    padding-left: 1em;
    text-indent: -1em
}

.custom_widgets {
    padding: 10px;
    width: 50%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

@media screen and (max-width: 768px) {
    .custom_widgets {
        width: 100%;
        padding: 4px 0
    }
}

.widgets_unit {
    border: 6px solid #E8ECF2;
    padding: 30px 20px;
    width: 100%
}

.widgets_unit a {
    text-decoration: none
}

.widgets_unit a:hover {
    text-decoration: underline
}

.widgets_unit .widgets_title {
    font-style: normal;
    font-size: 1.125em;
    font-weight: bold;
    letter-spacing: .05em;
    margin-bottom: 12px;
    display: block
}

.widgets_unit .widgets_button {
    background: #115491;
    font-size: .9375em;
    border-radius: 4px;
    padding: 16px 40px;
    display: inline-block;
    letter-spacing: .05em;
    -webkit-transition: all .15s;
    transition: all .15s
}

@media screen and (max-width: 768px) {
    .widgets_unit .widgets_button {
        padding: 16px 20px
    }
}

.widgets_unit .widgets_button:after {
    content: "\e5df";
    color: inherit;
    margin: 0 0 0 8px;
    display: inline-block;
    font-family: "Material Icons";
    text-align: center;
    vertical-align: baseline;
    width: 1.28571em
}

@media screen and (max-width: 768px) {
    .widgets_unit .widgets_button:after {
        margin: 0 0 0 4px
    }
}

.widgets_unit .widgets_button:link {
    color: #fff
}

.widgets_unit .widgets_button:visited {
    color: #fff
}

.widgets_unit .widgets_button:active {
    color: #fff
}

.widgets_unit .widgets_button:hover {
    color: #fff;
    background: #0d5ba8;
    text-decoration: none;
    -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    border-radius: 0
}

/*LP テンプレートより*/
.fd-in {
    opacity: 0;
    transform: translate(0, 60px);
    -webkit-transform: translate(0, 60px);
}

.fd-done {
    opacity: 1.0;
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
}

.fd-in-img {
    opacity: 0;
    transform: translatex(200px);
    -webkit-transform: translatex(200px);
}

.fd-done-img {
    opacity: 1.0;
    transform: translatex(0);
    -webkit-transform: translatex(0);
}

section {
    overflow: hidden;
    -webkit-transition: .8s;
    transition: .8s;
}

.section__title {
    font-size: 4vw;
    text-align: center;
    line-height: 1.5em;
}

.section__title--discription {
    display: block;
    margin: 0 auto;
    font-size: calc((100vw / 30) * 0.7);
    width: 90%;
    margin-bottom: 50px;
}

.hero {
    padding: 180px 10% 200px;
    background-image: linear-gradient(-45deg, #FFC796 0%, #FF6B95 100%);
    color: #fff;
}

.hero h1 {
    font-size: 80px;
    line-height: 1;
    font-weight: 900;
    margin-bottom: 20px;
}

.hero p {
    font-size: 20px;
    line-height: 1;
    font-weight: 500;
}

@media (max-width: 768px) {
    .hero p {
        line-height: 1.5;
    }
}

.hero a {
    display: inline-block;
    background: #fff;
    padding: 15px 40px 15px 20px;
    margin: 40px 0 0;
    font-size: 18px;
    font-weight: 900;
    color: #FF6B95;
    text-decoration: none;
    -webkit-transition: .5s;
    transition: .5s;
    border: 2px solid #fff;
    position: relative;
}

@media (max-width: 768px) {
    .hero a {
        display: block;
    }
}

.hero a::after {
    position: absolute;
    content: "";
    right: 20px;
    width: 8px;
    height: 8px;
    top: calc(50% - 4px);
    border-top: 2px solid #FF6B95;
    border-right: 2px solid #FF6B95;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.hero a:hover {
    background: #FF6B95;
    color: #fff;
}

.hero a:hover::after {
    border-color: #fff;
}

.about__container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.about__image {
    display: block;
    width: 60%;
    margin: auto;
}

@media (max-width: 768px) {
    .about__image {
        width: 100%;
    }
}

.about__image img {
    width: 100%;
    height: auto;
}

.about__text {
    align-content: center;
    width: 50%;
}

@media (max-width: 768px) {
    .about__text {
        width: 100%;
    }
}

.about__text p {
    line-height: 2;
    margin-left: 50px;
    font-size: 18px;
    font-weight: 500;
}

@media (max-width: 768px) {
    .about__text p {
        margin: 20px 0 0;
    }
}

.point {
    background: #f7f7f7;
}

.point__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    list-style-type: none;
    -webkit-justify-content: center;
    /* Safari */
    justify-content: center;
    margin-right: 35px;
}

.point__item {
    text-align: center;
    width: calc((100% / 3) - 14px);
}

.point__item:not(:first-child) {
    margin-left: 21px;
}

@media (max-width: 768px) {
    .point__item {
        width: 100%;
    }

    .point__item:not(:first-child) {
        margin: 30px 0 0;
    }
}

.point__item i {
    font-size: 24px;
    font-weight: 900;
    width: 100%;
    border-bottom: 4px solid #000;
    display: inline-block;
    text-align: center;
    padding: 0 0 8px;
    margin: 0 0 20px;
}

.point__item p {
    text-align: left;
    font-size: 18px;
}

.gallery__list {
    list-style-type: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.gallery__item {
    width: calc(50% - 10px);
}

.gallery__item:not(:nth-child(-n+2)) {
    margin-top: 20px;
}

.gallery__item:nth-child(2n) {
    margin-left: 20px;
}

.gallery__item img {
    width: 100%;
    height: auto;
}

.gallery__item a {
    -webkit-transition: .5s;
    transition: .5s;
}

.gallery__item a:hover {
    opacity: .7;
}

.gallery__item a:hover img {
    -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
}

.price {
    background: #f7f7f7;
}

.price__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    list-style-type: none;
}

.price__item {
    background: #fff;
    text-align: center;
    -webkit-box-shadow: 0 px 10px rgba(0, 0, 0, 0.15);
    box-shadow: 0 px 10px rgba(0, 0, 0, 0.15);
    padding: 50px 30px;
    width: calc(50% - 15px);
}

.price__item:nth-child(2n) {
    margin-left: 30px;
}

@media (max-width: 768px) {
    .price__item {
        width: 100%;
    }

    .price__item:not(:first-child) {
        margin: 30px 0;
    }
}

.price__item h3 {
    font-size: 24px;
    line-height: 1;
    margin-bottom: 15px;
}

.price__item .yen {
    font-size: 64px;
    font-weight: 100;
    line-height: 1;
}

.price__item .yen span {
    font-size: 30px;
}

.price__item .cando {
    margin: 40px 0 0;
}

.price__item .cando ol {
    list-style-type: none;
}

.price__item .cando li {
    background: #f7f7f7;
    padding: 10px;
    font-size: 18px;
    border-radius: 6px;
}

.price__item .cando li:not(:first-child) {
    margin: 15px 0 0;
}

.cta__btn {
    text-align: center;
}

.cta__btn a {
    display: inline-block;
    background: #FF6B95;
    padding: 15px 40px 15px 20px;
    margin: 0px 0 0;
    font-size: 18px;
    font-weight: 900;
    color: #fff;
    text-decoration: none;
    -webkit-transition: .5s;
    transition: .5s;
    border: 2px solid #fff;
    position: relative;
}

@media (max-width: 768px) {
    .cta__btn a {
        display: block;
    }
}

.cta__btn a::after {
    position: absolute;
    content: "";
    right: 20px;
    width: 8px;
    height: 8px;
    top: calc(50% - 4px);
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.cta__btn a:hover {
    border-color: #FF6B95;
    background: #fff;
    color: #FF6B95;
}

.cta__btn a:hover::after {
    border-color: #FF6B95;
}

.footer-container {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 15px;
}

#colophon {
    background-color: #1a1a1a !important;
    /* Modern deep dark footer */
    color: #eeeeee !important;
    padding: 80px 0 40px !important;
    /* More generous whitespace */
    border-top: 5px solid var(--primary-blue) !important;
}

.footer-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin-bottom: 40px;
}

.footer-column {
    flex: 1;
    min-width: 200px;
}

.footer-branding {
    flex: 0 0 300px;
}

.footer-logo-img {
    display: block;
    margin-bottom: 20px;
    max-width: 240px;
    height: auto;
    filter: brightness(0) invert(1);
}

.footer-branding h2 {
    color: #ffffff !important;
    font-size: 18px !important;
    margin-bottom: 25px !important;
    font-weight: 800 !important;
}

.footer-address {
    line-height: 2;
    margin-bottom: 20px !important;
    font-size: 14px !important;
    color: #cccccc !important;
    white-space: nowrap;
}

.footer-email {
    white-space: nowrap;
    font-size: 13px !important;
}

/* ========================================
   フッターサイトマップ
   メニュー「フッターサイトマップ」の階層から組み立てたリンク列。
   学校情報（住所・TEL）を左に置き、その右にリンク列を並べる。
   .footer-columns はもともと flex なので、display の指定し直しは要らない。
======================================== */
/* 学校情報の右側、残りの幅いっぱいをリンク列に使う。
   列数はグリッド任せ。項目グループを増やしてもCSSを触らずに済むよう、
   最小幅だけ決めて入るだけ並べる（1200px幅で4〜5列、スマホで2列になる）。
   min-width:0 が無いと、グリッドの中身が長いときに親を押し広げて
   学校情報の列を潰してしまう。 */
.footer-sitemap {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 28px 20px;
}

/* 横並びが成立するのは、コンテナが最大幅(1200px)に近いときだけ。
   それより狭いと5列が入りきらず折り返し、学校情報の下に大きな空白が残る。
   そこで狭い画面では学校情報を上段に回し、リンク列に横幅を明け渡す。 */
@media screen and (max-width: 1199px) {
    .footer-branding {
        flex: 0 0 100%;
    }

    .footer-sitemap {
        flex: 0 0 100%;
    }
}

.footer-sitemap-group h3 {
    font-size: 15px !important;
    font-weight: 700 !important;
    margin: 0 0 18px !important;
    padding-bottom: 8px !important;
    color: #ffffff !important;
    border-bottom: 2px solid var(--student-orange) !important;
    display: block !important;
    width: fit-content !important;
}

.footer-sitemap-group h3 a {
    color: #ffffff !important;
    text-decoration: none !important;
}

.footer-sitemap-group ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-sitemap-group li {
    margin: 0 !important;
    padding: 0 !important;
}

.footer-sitemap-group ul a {
    display: block !important;
    padding: 7px 0 !important;
    color: #bbbbbb !important;
    text-decoration: none !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    transition: color 0.3s ease, transform 0.3s ease !important;
}

.footer-sitemap-group ul a:hover {
    color: #ffffff !important;
    transform: translateX(5px) !important;
}

@media screen and (max-width: 781px) {
    /* 学校情報が幅100%になるので、リンク列は折り返して次の行を全部使う */
    .footer-sitemap {
        flex: 0 0 100%;
        gap: 22px 16px;
    }

    .footer-sitemap-group h3 {
        margin-bottom: 12px !important;
        font-size: 14px !important;
    }

    .footer-sitemap-group ul a {
        padding: 5px 0 !important;
        font-size: 12px !important;
    }
}

/* Responsive adjustment for footer columns */
@media screen and (max-width: 781px) {
    .footer-columns {
        display: flex !important;
        flex-wrap: wrap !important;
        flex-direction: row !important;
        gap: 20px !important;
        margin-bottom: 20px !important;
    }

    .footer-branding {
        width: 100% !important;
        flex: 0 0 100% !important;
        margin-bottom: 10px !important;
    }

    /* スマホ表示時、フッター最下部に十分な余白を設けて、フローティングCTAがコピーライト等と被らないようにする */
    #colophon {
        padding-bottom: 110px !important;
    }
}

.footer-bottom {
    border-top: 1px solid #333 !important;
    margin-top: 32px !important;
    padding-top: 20px !important;
    text-align: center;
}

.footer-bottom .copyright {
    font-size: 13px;
    color: #999;
    line-height: 1.8;
}

@media (max-width: 768px) {
    .footer-columns {
        flex-direction: column;
        gap: 30px;
    }

    .footer-column {
        min-width: 100%;
    }
}

/*合格体験記*/
.messages {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px;
}

.msg-data {
    width: 35%;
}

.msg-text {
    position: relative;
    width: 60%;
    text-indent: 1.5rem;
    line-height: 1.7em;
    padding-left: 4rem;
    border-left: 10px solid #dd7777;
    text-align: justify;
}

@media screen and (max-width:999px) {
    .messages {
        display: flex;
        flex-flow: column;
        justify-content: center;
        padding: 0;
    }

    .msg-data {
        width: 100%;
        padding-left: 1rem
    }

    .msg-text {
        width: 100%;
        padding: .5rem;
        margin-bottom: 3rem;
    }
}

/*制服紹介*/
.uniform {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.uniform-item img {
    width: 300px;
    box-shadow: 1px 1px 4px gray;
    margin: 10px;
}

.uniform-text {
    width: 350px;
    padding: 20px;
}

.uniform-title {
    border-bottom: solid 3px #364e96;
    font-size: 1.5em;
}

/*コース紹介*/
.courses {
    display: flex;
    justify-content: center;
    flex-flow: wrap;
}

.course-item {
    width: 428px;
    margin: 5px;
    padding: 10px;
    border: 1px solid lightgray;
}

.course-item span {
    font-size: 15px;
}

.course-item,
.course-header>p {
    padding: 5px;
    line-height: 1.7;
    text-indent: 1em;
    text-align: justify;
}

.course-title {
    text-indent: 0;
    background-color: aliceblue;
    padding: 10px;
    margin-bottom: 20px;
    line-height: 1.5;
}

.course-title h2 {
    font-size: 20px;
    font-weight: 700;
}

/*行事紹介*/
.events-wrapper {
    display: flex;
    flex-flow: wrap;
    justify-content: space-around;
}

.event-item {
    max-width: 450px;
    height: 380px;
    position: relative;
    margin: 5px;
    flex-grow: 1;
    flex-shrink: 1;
    border-radius: 3px;
}

.event-item h2 {
    position: absolute;
    color: white;
    top: 50%;
    left: 0%;
    background-color: rgba(200, 0, 0, 0.5);
    width: 100%;
    padding: 5px;
    font-size: 1.07em;
    font-weight: 700;
    text-indent: 1em;
}

.event-month {
    position: absolute;
    top: 0%;
    background-color: rgba(175, 0, 0, 0.90);
    width: 80px;
    padding: auto;
    color: white;
    text-align: center;
    font-size: 2.5em;
    font-weight: bold;
    border-radius: 3px;
}

.event-image {
    max-width: 100%;
    height: auto;
    border-radius: 3px;
}

.event-item>ul>li {
    padding-left: 1em;
}

/* r-table */

section table {
    width: 100%;
    margin-top: 30px;
}

section th,
section td {
    padding: 20px;
    line-height: 1.5em;
    border: 1px solid #77AF9C;
}

section th {
    background: #77AF9C;
    color: white;
    text-align: center;
    font-size: 1.2em;
}

.r-table th {
    width: 25%;
}

@media only screen and (max-width:480px) {
    .r-table {
        margin: 0 -10 0 0px;
    }

    .r-table th,
    .r-table td {
        width: 100%;
        display: block;
        border-top: none;
    }

    .r-table tr th {
        border: 2px solid #77AF9C;
    }
}

/* ==========================================================================
   Scroll Animations (IntersectionObserver)
   ========================================================================== */

/*
 * スライド系アニメ（animate-slide-left / animate-slide-right）は再生前に要素を
 * 横方向へ最大80px translate するため、再生されるまでページ幅が実際より広がり、
 * スマホで横スクロール（ぐらつき）が発生する。overflow-x: clip でクリップして防ぐ。
 * clip は overflow: hidden と違い position: sticky を壊さず、縦スクロールも維持する。
 */
html,
body {
    overflow-x: clip;
}

/*
 * Base state: Elements wait for JS to declare them ready.
 * If JS fails to load, they remain visible normally.
 */
.js-animation-ready {
    opacity: 0;
    transition: all var(--anim-dur, 1.2s) cubic-bezier(0.16, 1, 0.3, 1); /* Smooth easing */
}

/* 
 * Define initial states for each animation type
 */
.js-animation-ready.animate-slide-up {
    transform: translateY(var(--anim-dist, 80px));
}
.js-animation-ready.animate-slide-left {
    transform: translateX(var(--anim-dist, 80px));
}
.js-animation-ready.animate-slide-right {
    transform: translateX(calc(var(--anim-dist, 80px) * -1));
}
/* animate-fade-in only needs opacity: 0, which is covered by .js-animation-ready */

.js-animation-ready.is-visible {
    opacity: 1;
    transform: translate(0, 0);
}

/* animate-fade-in は位置移動を伴わないため、アニメーション完了後は transform を none にして
   子要素の background-attachment: fixed（パララックス背景効果）がブラウザで無効化されるバグを防止する */
.js-animation-ready.animate-fade-in.is-visible {
    transform: none !important;
}


/* 
 * Respect users who prefer reduced motion in their OS settings
 */
@media (prefers-reduced-motion: reduce) {
    .js-animation-ready {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ==========================================================================
   Sticky Positioning (追従設定)
   ========================================================================== */

.is-sticky-top {
    position: sticky !important;
    top: var(--sticky-top, 100px) !important;
    z-index: 900; /* Just below main header (1000) */
}

.is-sticky-bottom {
    position: sticky !important;
    bottom: var(--sticky-bottom, 20px) !important;
    z-index: 900;
}

/* Adjust for WordPress Admin Bar when logged in */
.admin-bar .is-sticky-top {
    top: calc(var(--sticky-top, 100px) + 32px) !important;
}

@media (max-width: 782px) {
    .admin-bar .is-sticky-top {
        top: calc(var(--sticky-top, 100px) + 46px) !important;
    }
}

/* ==========================================================================
   Button Decoration Styles (ボタン装飾)
   --------------------------------------------------------------------------
   【削除済み】.btn-premium / .btn-glassy / .btn-arrow-slide / .btn-soft-outline
   の4種（約65行）を削除した。

   全46ページを走査して使用箇所が1つも無いことを確認済み。
   全宣言が !important で書かれており、色・背景・枠線をエディタから
   一切変えられない作りだった。特に .btn-arrow-slide は
   `padding-right: 3em !important` を持ち、エディタの余白指定を無効化する。
   第24節で余白を整えたばかりなので、この地雷は残さない。

   装飾を再び足すときは !important を使わないこと。
   register_block_style() でブロックスタイルとして登録すれば、
   エディタから選べて、かつ個別の色指定も殺さない。
   （実例: functions.php の gakkan_register_block_styles()）
   ========================================================================== */

/* WordPressの新仕様Coverブロック（子要素の.wp-block-cover__image-backgroundに背景画像がある場合）のパララックス対応 */
.wp-block-cover.has-parallax .wp-block-cover__image-background,
.wp-block-cover__image-background.has-parallax {
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

/* iOS Safari では background-attachment: fixed が機能しないため scroll にフォールバック */
@supports (-webkit-touch-callout: none) {
    .wp-block-cover.has-parallax,
    .wp-block-cover-image.has-parallax,
    .wp-block-cover.has-parallax .wp-block-cover__image-background,
    .wp-block-cover__image-background.has-parallax {
        background-attachment: scroll !important;
    }
}

/* ==========================================================================
   テーブルブロック スタイル
   ========================================================================== */

/* WordPress wp-block-styles の太線をリセット */
.wp-block-table thead {
    border-bottom: 1px solid;
}
.wp-block-table tfoot {
    border-top: 1px solid;
}

/* 淡青ヘッダースタイル */
.wp-block-table.is-style-light-blue thead tr th {
    background-color: #5a8fbf;
    color: #fff;
}
.wp-block-table.is-style-light-blue tbody tr:nth-child(odd) td {
    background-color: #f0f5fa;
}
.wp-block-table.is-style-light-blue tbody tr:nth-child(even) td {
    background-color: #e0ebf5;
}
.wp-block-table.is-style-light-blue td,
.wp-block-table.is-style-light-blue th {
    border: none;
}
.wp-block-table.is-style-light-blue thead {
    border-bottom: none;
}

/* 淡緑ヘッダースタイル */
.wp-block-table.is-style-light-green thead tr th {
    background-color: #5a9e7a;
    color: #fff;
}
.wp-block-table.is-style-light-green tbody tr:nth-child(odd) td {
    background-color: #f0f7f3;
}
.wp-block-table.is-style-light-green tbody tr:nth-child(even) td {
    background-color: #e0f0e8;
}
.wp-block-table.is-style-light-green td,
.wp-block-table.is-style-light-green th {
    border: none;
}
.wp-block-table.is-style-light-green thead {
    border-bottom: none;
}

/* ==========================================================================
   ファイルブロック（wp-block-file）アイコン表示
   ========================================================================== */

/* サイズスタイル */
.wp-block-file.is-style-size-small {
    font-size: 0.85em !important;
}
.wp-block-file.is-style-size-small > a::before,
.wp-block-file.is-style-size-small .wp-block-file__content::before {
    width: 28px !important;
    height: 28px !important;
}

.wp-block-file.is-style-size-medium {
    font-size: 1em !important;
}

.wp-block-file.is-style-size-large {
    font-size: 1.2em !important;
}
.wp-block-file.is-style-size-large > a::before,
.wp-block-file.is-style-size-large .wp-block-file__content::before {
    width: 44px !important;
    height: 44px !important;
}

/* レイアウト基本 */
.wp-block-file {
    display: flex;
    align-items: center;
    gap: 1em;
    margin-bottom: 1em;
}

.wp-block-file > a:first-child,
.wp-block-file .wp-block-file__content {
    display: inline-flex;
    align-items: center;
    gap: .6em;
    color: #1A1A1A;
    font-weight: 500;
    text-decoration: none;
}

.wp-block-file > a:first-child::before,
.wp-block-file .wp-block-file__content::before {
    content: "";
    display: inline-block;
    width: 36px;
    height: 36px;
    background: url(lib/images/icon-pdf2.svg) no-repeat center / contain;
    flex-shrink: 0;
}

/* 拡張子別アイコン切り替え */
.wp-block-file:has(.wp-block-file__content[href$=".pdf"]) .wp-block-file__content::before,
.wp-block-file:has(.wp-block-file__content[href$=".PDF"]) .wp-block-file__content::before,
.wp-block-file:has(> a[href$=".pdf"]) > a:first-child::before,
.wp-block-file:has(> a[href$=".PDF"]) > a:first-child::before {
    background-image: url(lib/images/icon-pdf2.svg);
}

.wp-block-file:has(.wp-block-file__content[href$=".xlsx"]) .wp-block-file__content::before,
.wp-block-file:has(.wp-block-file__content[href$=".xls"]) .wp-block-file__content::before,
.wp-block-file:has(.wp-block-file__content[href$=".XLSX"]) .wp-block-file__content::before,
.wp-block-file:has(.wp-block-file__content[href$=".XLS"]) .wp-block-file__content::before,
.wp-block-file:has(> a[href$=".xlsx"]) > a:first-child::before,
.wp-block-file:has(> a[href$=".xls"]) > a:first-child::before,
.wp-block-file:has(> a[href$=".XLSX"]) > a:first-child::before,
.wp-block-file:has(> a[href$=".XLS"]) > a:first-child::before {
    background-image: url(lib/images/icon-xlsx.svg);
}

/* ダウンロードボタン */
.wp-block-file__button {
    font-size: 1em;
    padding: .4em 1.1em;
    background: var(--primary-blue);
    color: #fff;
    border-radius: 3px;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.wp-block-file__button:hover {
    opacity: .8;
    color: #fff;
}

/* ==========================================================================
   Text Emphasis Styles (強調・装飾)
   ========================================================================== */

.marker-yellow, .marker-blue, .modern-underline, .premium-badge {
    display: table !important;
    width: auto !important;
    margin-top: 0.5em !important;
    margin-bottom: 0.5em !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* Center Alignment */
.has-text-align-center.marker-yellow,
.has-text-align-center.marker-blue,
.has-text-align-center.modern-underline,
.has-text-align-center.premium-badge {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

/* Right Alignment */
.has-text-align-right.marker-yellow,
.has-text-align-right.marker-blue,
.has-text-align-right.modern-underline,
.has-text-align-right.premium-badge {
    margin-left: auto !important;
    margin-right: 0 !important;
    text-align: right !important;
}

/* Marker Yellow */
.marker-yellow {
    background: linear-gradient(transparent 60%, #fff382 60%) !important;
    padding: 0 0.4em !important;
}

/* Marker Blue */
.marker-blue {
    background: linear-gradient(transparent 60%, #d1e9ff 60%) !important;
    padding: 0 0.4em !important;
}

/* Modern Underline */
.modern-underline {
    position: relative !important;
    text-decoration: none !important;
    padding: 0 0.2em !important;
}
.modern-underline::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0.15em !important;
    left: 0 !important;
    width: 100% !important;
    height: 0.4em !important;
    background: rgba(37, 99, 235, 0.2) !important;
    z-index: -1 !important;
    border-radius: 2px !important;
}

/* Premium Badge */
.premium-badge {
    padding: 0.4em 1.2em !important;
    background: #f8fafc !important;
    color: #1e293b !important;
    font-weight: 700 !important;
    font-size: 0.9em !important;
    border-radius: 999px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    border: 1px solid #e2e8f0 !important;
    line-height: 1.2 !important;
}

/* ==========================================================================
   テキストブロックを中央寄せにしつつ内部は左揃え（スマホ版）
   ブロック「高度な設定 > 追加CSSクラス」で text-center-block を入力
   ========================================================================== */
@media (max-width: 781px) {
    .text-center-block {
        display: block !important;
        width: fit-content !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: left !important;
    }
}

/* entry-header を非表示 */
.entry-header {
    display: none !important;
}

/* === Migrated from removed .sp-* rules === */
.page-title > h1 {
    font-size: 1.8rem;
    font-weight: bold;
}

@media screen and (max-width: 768px) {
    .post-nav .post-nav-button a {
        margin-top: 20px;
        padding: 10px 40px;
        display: inline-block;
        text-decoration: none;
        text-align: center;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-sizing: border-box;
    }
}

/* ========================================
   Front page hero styles (SP alignment fix)
   フロントページのヒーローヘッダー：スマホで画像を上、ボタンを下帯に配置
======================================== */
.home .tg-hero-cover {
  height: 56.25vw !important; /* 横幅に応じて高さを可変にする(16:9比率) */
  /* 最大高さ。520px → 700px と広げてきて、810px にした。
     56.25vw がこの値に達すると高さが止まり、そこから先は幅だけが広がるため
     object-fit:cover で映像の上下が切り落とされる。
     つまり「上限 ÷ 0.5625」の幅までは16:9が保たれる。
       700px → 幅1245pxで頭打ち（一般的なPCの画面幅はほぼこれを超える）
       810px → 幅1440pxまで切り落としなし。1920pxでも切り落としは各135px
     上限を完全に外すと1920px幅で高さ1080pxとなり、ヒーロー下端の
     「本校の教育について」への導線が1画面に収まらなくなるため残している。
     810px + 固定ヘッダー80px = 890px で、1080pモニタの
     ビューポート高さ（約950px）に収まる。
     スマホは is-style-slide の min-height（100svh）が優先されるため影響なし。
     ※ 同じ指定が .tg-front .tg-hero-cover にもある。変えるときは両方直すこと。 */
  max-height: 810px !important;
  min-height: auto !important;
  margin-right: calc(50% - 50vw) !important;
  margin-left: calc(50% - 50vw) !important;
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative !important;
}

/* PC版：背景動画・背景画像をカバー全体の幅・高さ100%に広げる */
.home .tg-hero-cover > .wp-block-cover__image-background,
.home .tg-hero-cover > .wp-block-cover__video-background {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

@media screen and (max-width: 781px) {
  .home .tg-hero-cover.has-aspect-ratio {
    aspect-ratio: auto !important;
    min-height: 56.25vw !important;
  }
}

@media (max-width: 781px) {
  /* 動画・画像は背景として全面を覆い、中身はその上に重ねる。
     以前は「動画を16:9の帯として置き、その下に白い半透明の帯を敷いて文字を載せる」
     構成だったが、ヒーローの中身がロゴ画像になったことで、
     ロゴが動画の下（白帯の中）に表示される・帯が動画の上下に出るという状態になった。
     PCと同じ「背景＋重ね」に統一する。

     高さは 56.25vw（16:9）。ブロックスタイル「スライド（1画面）」を付けた場合は
     min-height:100svh が後勝ちするので、そちらが1画面に伸ばす（実測 844px）。 */
  .home .tg-hero-cover {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    min-height: 0 !important;
    height: 56.25vw !important;
    overflow: hidden;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: auto !important; /* スマホではアスペクト比をリセット */
    margin-right: 0 !important; /* PCの全幅マージンをリセット */
    margin-left: 0 !important;
  }

  .home .tg-hero-cover > .wp-block-cover__image-background,
  .home .tg-hero-cover > .wp-block-cover__video-background {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: cover;
    object-position: center;
  }

  /* 暗幕はブロック側のオーバーレイ設定で濃度を決められるよう出しておく */
  .home .tg-hero-cover > .wp-block-cover__background {
    display: block;
  }

  .home .tg-hero-cover > .wp-block-cover__inner-container {
    position: relative !important;
    z-index: 2;
    padding: 0 20px;
    background-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    width: 100%;
    box-sizing: border-box;
  }

  /* インナーコンテナ内のボタンブロック (wp-block-buttons) または カラムブロック (wp-block-columns) をスマホで縦積みにする */
  .home .tg-hero-cover .wp-block-buttons {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  .home .tg-hero-cover .wp-block-buttons .wp-block-button {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  .home .tg-hero-cover .wp-block-buttons .wp-block-button__link {
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  .home .tg-hero-cover .wp-block-columns {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .home .tg-hero-cover .wp-block-columns .wp-block-column {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
}

/* Gutenberg全幅ブロック（alignfull）を画面幅いっぱいに広げる */
@media screen and (min-width: 769px) {
  .alignfull {
    margin-right: calc(50% - 50vw) !important;
    margin-left: calc(50% - 50vw) !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }
}

/* ========================================
   Floating CTA Button (PC: Vertical Tab / SP: Bottom)
======================================== */
/* 共通コンテナ */
#floating-cta-container {
    position: fixed;
    z-index: 9999;
    box-sizing: border-box;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
    opacity: 0;
    pointer-events: none; /* コンテナ自体は常にタップイベントを透過 */
}

/* 表示アクティブ状態 */
#floating-cta-container.is-active {
    opacity: 1;
}

/* --- PC版レイアウト（デフォルト：画面の右端にぴったり張り付く縦書きのタブ型） --- */
#floating-cta-container {
    right: 0;
    top: 40%; /* 画面中央よりやや上 */
    transform: translateY(-50%) translateX(100%); /* 初期状態は画面外に隠す */
}
#floating-cta-container.is-active {
    transform: translateY(-50%) translateX(0); /* スクロール後に画面端にぴったり吸着 */
}

/* PCの縦タブは一旦非表示。
   ヘッダー内ナビ（.tg-header-nav）のCTAボタンと「学校説明会」が重複するため。
   復活させたいときはこのブロックごと削除すればよい。
   ブレークポイントは .tg-header-nav の表示条件と同じ 1025px にしてある。
   タブレット（769〜1024px）はヘッダーナビが出ないので縦タブを残す。
   スマホの下部バー（max-width:768px）には影響しない。 */
@media screen and (min-width: 1025px) {
    #floating-cta-container {
        display: none;
    }

    /* ただし学校説明会ページ（footer.php で is-setsumeikai が付く）は例外。
       ここのCTAは「ご予約はこちら」でヘッダーナビのボタンと用件が違うので
       重複しない。タブレットと同じ右端の縦タブをPCでも出す。 */
    #floating-cta-container.is-setsumeikai {
        display: block;
    }
}

.floating-cta-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* 子要素を常に右端（画面端）寄せにする */
    gap: 4px; /* ボタン同士の隙間 */
}

.floating-cta-button {
    position: relative; /* 擬似要素の基準位置 */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px; /* スマートな幅に差し戻し */
    min-height: 160px; /* 150px から 160px に少し縦長にしてゆとりを確保 */
    padding: 15px 8px;
    box-sizing: border-box;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); /* 黄色〜アンバーのグラデーション */
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 700;
    font-size: 1.3rem; /* 1.3rem (約21px) はそのまま維持 */
    line-height: 1.3;
    border-radius: 8px 0 0 8px; /* 左側だけ角丸 */
    box-shadow: -2px 4px 12px rgba(0, 0, 0, 0.15);
    text-align: center;
    writing-mode: vertical-rl; /* 縦書き指定 */
    text-orientation: mixed;
    white-space: nowrap;
    transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s; /* transition対象をwidthに変更 */
    pointer-events: auto; /* ボタン単体でクリックを検知可能にする */
    touch-action: manipulation; /* スマホでのダブルタップズーム無効化による遅延防止 */
    cursor: pointer; /* マウスホバー時のカーソルを明示 */
}

/* ★チャタリング（ボタンの震え）防止用の見えない判定領域を追加 */
.floating-cta-button::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    right: -24px !important;
    width: 24px !important;
    height: 100% !important;
    background: transparent !important;
}

/* 2つ目のボタン（青色） */
.floating-cta-button:nth-child(2) {
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
}

/* ホバー時に左側に幅が広がり、右端を固定したまま伸びるエフェクト */
.floating-cta-button:hover {
    width: 70px; /* 幅を 70px に広げる（左に 20px 伸びる） */
    background: linear-gradient(135deg, #fbbf24 0%, #ea580c 100%); /* ホバー時色変更 */
}
.floating-cta-button:nth-child(2):hover {
    background: linear-gradient(135deg, #2563eb 0%, #60a5fa 100%);
}

.floating-cta-button:active {
    width: 70px;
    transform: scale(0.95); /* scaleによるクリック感に変更 */
}


/* --- スマホ版レイアウト（幅781px以下：画面下部に浮かぶカプセル型フローティングボタン形式） --- */
@media screen and (max-width: 781px) {
    #floating-cta-container {
        left: 0;
        right: 0;
        /* iOS Safari は下部アドレスバー周辺のタップを先にブラウザUIへ奪うため、
           20px では1回目のタップが画面に届かないことがある。
           バーが縮んだ状態でも指が届かない高さまで持ち上げる。
           env(safe-area-inset-bottom) はホームインジケータ分で、
           バーの高さは含まれないので固定値を厚めに取る必要がある。 */
        bottom: calc(44px + env(safe-area-inset-bottom));
        top: auto;
        width: 100%;
        padding: 0 16px; /* 左右の余白のみ残し、白い背景帯を完全に廃止 */
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important; /* コンテナ全体の影は無しに */
        transform: translateY(150%); /* 隠す時は少し深めにスライド */
    }
    
    #floating-cta-container.is-active {
        transform: translateY(0);
    }
    
    .floating-cta-inner {
        flex-direction: row; /* 横並びにする */
        gap: 12px;
        width: 100%;
    }
    
    .floating-cta-button {
        flex: 1; /* 幅を均等にする */
        width: auto;
        min-height: 54px;
        height: auto !important;
        /* 以前は 1.1rem。1rem = 10px（html が 62.5%）なので実測11pxしかなく、
           343pxのボタンに対して文字が55pxと極端に小さかった。
           画面幅に応じて 16px〜20px の範囲で伸縮させる（375pxで約17px）。

           上限を20pxに抑えているのは、ボタンを2つに戻したときの保険。
           2ボタン時は1つあたり約165pxしか使えず、
           「（在校生）欠席連絡」のような9文字のラベルだと
           18px以上でコンテナからはみ出す（実測: 18px→178px, 20px→196px）。
           下の white-space: normal と併せて、はみ出す代わりに
           折り返すようにしてある。 */
        font-size: clamp(1.6rem, 4.6vw, 2rem) !important;
        line-height: 1.3 !important;
        /* 基底の white-space: nowrap（PC縦タブ用）を解除。
           そのままだと長いラベルが折り返さずコンテナからはみ出す */
        white-space: normal;
        padding: 10px 12px;
        border-radius: 999px; /* ★完全丸角（カプセル型）でトレンドの洗練された浮遊感に */
        box-shadow: 0 8px 20px rgba(217, 119, 6, 0.3) !important; /* ★ボタン単体にきれいな浮遊影を付与 */
        writing-mode: horizontal-tb; /* 横書きに戻す */
        text-orientation: mixed;
    }
    
    /* 2つ目のボタン（青色）用の影もボタンに直接適用 */
    .floating-cta-button:nth-child(2) {
        box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25) !important;
    }
    
    .floating-cta-button:hover {
        transform: none; /* スマホではホバーアニメーションを無効化 */
    }
    
    .floating-cta-button:active {
        transform: scale(0.96); /* タップ時に少し小さくなって沈む心地よいフィードバック */
    }

    /* PC縦タブ用の「ホバー/押下で幅が 50px → 70px に伸びる」演出を打ち消す。
       打ち消さないと詳細度で :hover / :active（0,2,0）が
       スマホの width:auto（0,1,0）に勝ってしまい、触れた瞬間に
       ボタンが 343px → 70px へ 0.3秒かけて縮む（transition:width 付き）。
       ※これ自体は明らかな不具合だが、iPhone実機で「一度で反応しない」
         症状の主因ではなかった。主因の対策は下の
         「iOSでタップが1回で通らない件」を参照。 */
    .floating-cta-button:hover,
    .floating-cta-button:active {
        width: auto;
    }

    /* PC縦タブのちらつき防止用に右側24pxへ張り出している判定領域。
       スマホは横並びなので隣のボタンに重なり、誤タップの原因になる。
       現在ボタンは1つだが、増やしたときに効いてくるので無効化しておく。 */
    .floating-cta-button::after {
        display: none;
    }

    /* スマホでも「上へ戻る」を出す（以前はここで display:none !important で
       消していた）。位置の指定は #page-top の基本定義より後ろに置く必要がある
       ため、「TOPへ戻るボタン」の節にまとめてある。理由はそちらのコメント参照。 */
}

/* ==========================================================================
   iOSでタップが1回で通らない件の対策
   --------------------------------------------------------------------------
   iPhone Safari で下部CTAが一度で反応しない症状への対処。
   実機で再現するため、原因になりうるものを3方向から潰している。
   ========================================================================== */

/* 対策1: pointer-events の入れ子を解消する。
   コンテナが none で子だけ auto という構成は、WebKit で最初のタッチを
   取りこぼすことがある。隠れている間だけ none にし、表示中は
   コンテナごと auto に切り替える。
   コンテナの高さはボタン1段ぶん（約52px）しかないので、
   auto にしても背後の内容を広く塞ぐことはない。 */
#floating-cta-container.is-active {
    pointer-events: auto;
}

/* 対策2: タッチ端末ではホバーを一切効かせない。
   iOSは1回目のタップをホバーとして扱うことがあり、
   見た目が変わるだけでリンクに進まない挙動を招く。
   通常時と同じ見た目に固定して、ホバーという状態自体を無くす。 */
@media (hover: none) {
    .floating-cta-button:hover {
        width: auto;
        transform: none;
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    }

    .floating-cta-button:nth-child(2):hover {
        background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
    }
}
@charset "utf-8";
/* --------------------------------------------------


    カスタム用CSS
    全てのCSSを上書きできるよう一番最後に読み込みを行っています。


-------------------------------------------------- */
/* 共通：上部リンクを“ボタン化” */
a.top-action-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: .8em 1.05em !important;
  min-height: 42px;
  line-height: 1.15;
  text-decoration: none !important;
  font-weight: 700 !important;

  border-radius: 14px !important;
  border: 1px solid rgba(15, 23, 42, .18) !important;
  background: #fff !important;
  color: #0f172a !important;

  box-shadow: 0 4px 12px rgba(0,0,0,.10) !important; /* 控えめ */
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease;
  margin: 6px 6px 0 0; /* wrapper触らず“並びの余裕”だけ作る */
}

a.top-action-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0,0,0,.14) !important;
  background: #f8fafc !important;
  border-color: rgba(15, 23, 42, .24) !important;
}

a.top-action-btn:focus-visible{
  outline: 3px solid rgba(59,130,246,.55);
  outline-offset: 3px;
}

/* バリエーション：目立たせたい（入試など） */
a.top-action-btn--primary{
  background: linear-gradient(135deg,#2563eb,#06b6d4) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.45) !important;
  box-shadow: 0 6px 16px rgba(37,99,235,.20) !important; /* 派手すぎない */
}

a.top-action-btn--primary:hover{
  box-shadow: 0 10px 22px rgba(37,99,235,.26) !important;
}

/* バリエーション：主張は弱め（在校生向けなど） */
a.top-action-btn--soft{
  background: #f8fafc !important;
}

/* バリエーション：アウトライン（入学手続き等、同列で差をつけたい時） */
a.top-action-btn--outline{
  background: #fff !important;
  border-color: rgba(37,99,235,.35) !important;
}

/* モバイルで見やすく：横幅を揃える（必要なら） */
@media (max-width: 640px){
  a.top-action-btn{ width: 100%; margin-right: 0; }
}
/* ===== インターネット出願CTA（nyushi-cta）だけ強調 ===== */

/* ① ブロックエディタで「ボタンブロック」に class が付く場合 */

/* ② HTMLで <a class="nyushi-cta"> のように link 自体に class が付く場合 */
/* ② link自体に class が付く場合：影を控えめに */
a.nyushi-cta{
  background: linear-gradient(135deg,#2563eb,#06b6d4) !important;
  color:#fff !important;
  font-weight:800 !important;
  border-radius:9999px !important;
  border:1px solid rgba(255,255,255,.75) !important;

  /* 影を弱く（“ふわっ”程度） */
  box-shadow: 0 6px 14px rgba(0,0,0,.18) !important;

  text-decoration:none !important;
  padding:.95em 1.25em !important;
  line-height:1.5 !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

a.nyushi-cta:hover{
  transform: translateY(-1px) scale(1.01);
  box-shadow: 0 10px 20px rgba(0,0,0,.22) !important;
  filter: brightness(1.02);
}

a.nyushi-cta:focus-visible{
  outline: 3px solid rgba(6,182,212,.55);
  outline-offset: 3px;
}





/* ==============================
   基本タイポグラフィ
   ============================== */

/* rem の基準を通常サイズに戻す */
html.tg-html {
  font-size: 100% !important; /* 1rem = 16px */
}

body.tg-body {
  font-family: "Yu Gothic", "游ゴシック体",
    -apple-system, BlinkMacSystemFont, "Helvetica Neue",
    "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.8;
}

@media (min-width: 960px) {
  body.tg-body {
    font-size: 17px; /* PCでは少しだけ大きく */
  }
}

/* ロゴ部分（日本語＋英語） */
.tg-header .tg-logo-main {
  font-size: 1.4rem;
  font-weight: 700;
}

.tg-header .tg-logo-sub {
  font-size: 0.8rem;
  letter-spacing: 0.18em;
}

/* 見出しなど */
.tg-page-title {
  font-size: 2rem;
  font-weight: 700;
}

.tg-section__title {
  font-size: 1.5rem;
  font-weight: 700;
}

.tg-lead {
  font-size: 1rem;
}

@media (min-width: 960px) {
  .tg-lead {
    font-size: 1.05rem;
  }
}

.tg-card__title {
  font-size: 1.1rem;
  font-weight: 700;
}

.tg-card__text {
  font-size: 0.96rem;
}


/* ==============================
   ヘッダーまわり
   ============================== */

.tg-header {
  background: #fff;
  border-bottom: 1px solid #e5e5e5;
}

.tg-header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.tg-logo-link {
  text-decoration: none;
  display: inline-flex;
  flex-direction: column;
}

.tg-logo-main {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.tg-logo-sub {
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: .7;
}

/* ナビ共通 */
.tg-nav {
  display: flex;
  align-items: center;
}

.tg-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.5rem;
}

.tg-nav-list > li > a {
  text-decoration: none;
  padding: .25rem 0;
}

/* ハンバーガー（スマホ） */
.tg-nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: .25rem;
  cursor: pointer;
}

.tg-nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  margin: 4px 0;
  background: #333;
}

.tg-nav-toggle-label {
  font-size: .7rem;
  display: block;
  text-align: center;
  margin-top: 2px;
}

/* スマホ幅：ドロワーに切り替え */
@media (max-width: 960px) {
  .tg-nav-toggle {
    display: inline-block;
  }

  .tg-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: 260px;
    background: #fff;
    box-shadow: -2px 0 10px rgba(0,0,0,.1);
    transform: translateX(100%);
    transition: transform .25s ease;
    padding: 4rem 1.5rem 2rem;
    z-index: 999;
  }

  .tg-nav-list {
    flex-direction: column;
    gap: 1rem;
  }

  .tg-nav-list > li {
    position: relative;
  }

  body.tg-nav-open #tg-global-nav {
    transform: translateX(0);
  }
}

/* ==============================
   ドロップダウンメニュー
   ============================== */

/* 親 <li> を絶対配置の基準にする */
.tg-header .tg-nav-list > li {
  position: relative !important;
}

/* サブメニュー全体の箱 */
.tg-header .tg-nav-list > li > .sub-menu {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0 !important;
  right: auto !important;
  margin: 0;
  padding: 0.75rem 1rem;
  list-style: none;
  min-width: 220px;

  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  border-radius: 4px;
  display: none;
  z-index: 1000;
}

/* サブメニュー項目 */
.tg-header .tg-nav-list > li > .sub-menu li {
  margin: 0;
}

.tg-header .tg-nav-list > li > .sub-menu a {
  display: block;
  padding: 0.25rem 0;
  font-size: 0.9rem;
  white-space: nowrap;
}

/* ホバーでサブメニュー表示（PC） */
.tg-nav-list > li:hover > .sub-menu {
  display: block;
}

/* ==============================
   PC幅でのメニュー文字サイズ
   ============================== */

@media (min-width: 940px) {
  /* ★ 上段メニュー（TOP / 学校紹介 / …） */
  #masthead.tg-header nav#tg-global-nav .tg-nav-list > li > a {
    font-size: 0.7rem !important;   /* だいぶ小さめ */
    font-weight: 500;
    letter-spacing: 0.06em;
    padding: 0.25rem 0;
    display: inline-block;
  }

  /* 項目同士の間隔 */
  #masthead.tg-header nav#tg-global-nav .tg-nav-list > li {
    margin-left: 1.6rem;
  }

  /* サブメニュー文字（少し小さめ） */
  #masthead.tg-header nav#tg-global-nav .tg-nav-list > li > .sub-menu a {
    font-size: 0.8rem !important;
    letter-spacing: 0.02em;
  }
}


/* ==============================
   新静的ページ（tg-page）レイアウト
   ============================== */

.tg-page {
  padding: 3rem 0;
  background: #f7f7f7;
}

.tg-page-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 1rem;
  box-sizing: border-box;
}

.tg-page-header {
  margin-bottom: 2rem;
  border-bottom: 1px solid #ddd;
  padding-bottom: 1rem;
}

.tg-page-title {
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0;
}

/* セクション */
.tg-section {
  margin: 2.5rem 0;
}

.tg-section__title {
  font-size: 1.5rem;
  font-weight: 700;
  border-left: 4px solid #0066aa;
  padding-left: .75rem;
  margin-bottom: 1rem;
}

/* リード文 */
.tg-lead {
  font-size: 1rem;
  line-height: 1.9;
  margin-bottom: 1.25rem;
}

/* カード */
.tg-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.tg-card {
  background: #fff;
  border-radius: 8px;
  border: 1px solid #ddd;
  padding: 1.25rem 1.5rem;
  box-sizing: border-box;
}

.tg-card__title {
  font-weight: 700;
  margin-bottom: .5rem;
}

.tg-card__text {
  font-size: .95rem;
  line-height: 1.8;
}

/* スマホ調整 */
@media (max-width: 768px) {
  .tg-page {
    padding: 2rem 0;
  }
}

/* ▼ 自主自学ページ用コンポーネント（tg-selflearning 配下だけに適用） ▼ */

.tg-selflearning {
  --color-bg: #f5f7fb;
  --color-surface: #ffffff;
  --color-primary: #004b8d;
  --color-primary-light: #e2efff;
  --color-accent: #f0b500;
  --color-text: #222222;
  --color-text-sub: #555555;
  --shadow-soft: 0 10px 25px rgba(0, 0, 0, 0.06);
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-pill: 999px;
  --max-width: 1080px;

  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Yu Gothic",
    "游ゴシック体", "Segoe UI", sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.7;
}

.tg-selflearning * {
  box-sizing: border-box;
}

.tg-selflearning img {
  max-width: 100%;
  display: block;
}

.tg-selflearning a {
  color: inherit;
  text-decoration: none;
}

/* Layout */

.tg-selflearning .page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.tg-selflearning header {
  background: var(--color-surface);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  position: sticky;
  top: 0;
  z-index: 10;
}

.tg-selflearning .header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.tg-selflearning .site-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary);
}

.tg-selflearning .site-subtitle {
  font-size: 12px;
  color: var(--color-text-sub);
}

.tg-selflearning .header-links {
  display: flex;
  gap: 12px;
  font-size: 13px;
}

.tg-selflearning main {
  flex: 1;
}

.tg-selflearning .section {
  padding: 48px 20px;
}

.tg-selflearning .section-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.tg-selflearning .section-title {
  font-size: 26px;
  margin: 0 0 8px;
  color: var(--color-primary);
}

.tg-selflearning .section-lead {
  margin: 0 0 24px;
  color: var(--color-text-sub);
  font-size: 14px;
}

/* Hero */

.tg-selflearning .hero {
  background: radial-gradient(circle at top left, #eaf3ff, #f5f7fb);
  padding-top: 32px;
  padding-bottom: 48px;
}

.tg-selflearning .hero-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  gap: 32px;
  padding: 0 20px;
  align-items: center;
  flex-wrap: wrap;
}

.tg-selflearning .hero-text {
  flex: 1 1 300px;
}

.tg-selflearning .hero-kicker {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 12px;
}

.tg-selflearning .hero-title {
  font-size: 30px;
  line-height: 1.4;
  margin: 0 0 12px;
}

.tg-selflearning .hero-text p {
  margin: 0 0 16px;
  color: var(--color-text-sub);
  font-size: 14px;
}

.tg-selflearning .hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

.tg-selflearning .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--shadow-soft);
  border: none;
  cursor: pointer;
}

.tg-selflearning .btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--color-primary);
  cursor: pointer;
}

.tg-selflearning .hero-image {
  flex: 1 1 260px;
  min-width: 260px;
}

.tg-selflearning .hero-image-frame {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  background: #dbe8ff;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tg-selflearning .hero-image-frame::after {
  content: "写真をここに配置（授業・探究発表など）";
  font-size: 12px;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.35);
  padding: 4px 8px;
  border-radius: 999px;
  position: absolute;
  bottom: 16px;
  right: 16px;
}

/* 校訓セクション */

.tg-selflearning .definition-box {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-soft);
  border-left: 4px solid var(--color-accent);
  font-size: 14px;
  margin-bottom: 24px;
}

.tg-selflearning .definition-box strong {
  color: var(--color-primary);
}

.tg-selflearning .principles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.tg-selflearning .principle-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 18px;
  box-shadow: var(--shadow-soft);
}

.tg-selflearning .principle-tag {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 4px;
}

.tg-selflearning .principle-name {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
}

.tg-selflearning .principle-desc {
  font-size: 13px;
  color: var(--color-text-sub);
}

/* タイムライン */

.tg-selflearning .timeline {
  background: #eef2fa;
}

.tg-selflearning .timeline-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  position: relative;
}

.tg-selflearning .year-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-soft);
  position: relative;
}

.tg-selflearning .year-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 4px;
}

.tg-selflearning .year-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
}

.tg-selflearning .year-tagline {
  font-size: 12px;
  color: var(--color-text-sub);
  margin-bottom: 8px;
}

.tg-selflearning .year-list {
  padding-left: 18px;
  margin: 0;
  font-size: 13px;
  color: var(--color-text-sub);
}

.tg-selflearning .year-list li {
  margin-bottom: 4px;
}

/* プログラムカード */

.tg-selflearning .programs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.tg-selflearning .program-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 18px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
}

.tg-selflearning .program-tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tg-selflearning .program-title {
  font-size: 15px;
  font-weight: 700;
}

.tg-selflearning .program-desc {
  color: var(--color-text-sub);
  flex: 1;
}

.tg-selflearning .program-link {
  font-size: 12px;
  color: var(--color-primary);
  font-weight: 600;
  margin-top: 4px;
}

/* 進路実績 */

.tg-selflearning .outcomes {
  background: var(--color-surface);
}

.tg-selflearning .outcomes-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 24px;
  align-items: flex-start;
}

.tg-selflearning .outcomes-box {
  background: #f7f9ff;
  border-radius: var(--radius-lg);
  padding: 18px;
}

.tg-selflearning .outcome-list {
  font-size: 13px;
  margin: 0 0 8px;
  padding-left: 16px;
  color: var(--color-text-sub);
}

.tg-selflearning .outcome-list li {
  margin-bottom: 2px;
}

.tg-selflearning .outcomes-caption {
  font-size: 12px;
  color: var(--color-text-sub);
}

.tg-selflearning .btn-small {
  padding: 8px 16px;
  font-size: 12px;
  margin-top: 8px;
  display: inline-flex;
}

.tg-selflearning .uni-heading {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
}

.tg-selflearning .uni-list {
  font-size: 13px;
  color: var(--color-text-sub);
  margin: 0 0 8px;
}

/* Voices */

.tg-selflearning .voices-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.tg-selflearning .voice-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 18px;
  box-shadow: var(--shadow-soft);
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tg-selflearning .voice-role {
  font-size: 12px;
  color: var(--color-primary);
  font-weight: 700;
}

.tg-selflearning .voice-name {
  font-size: 13px;
  color: var(--color-text-sub);
}

.tg-selflearning .voice-quote {
  position: relative;
  padding-left: 16px;
  color: var(--color-text-sub);
}

.tg-selflearning .voice-quote::before {
  content: "“";
  position: absolute;
  left: 0;
  top: -4px;
  font-size: 20px;
  color: var(--color-primary);
}

/* CTA */

.tg-selflearning .cta {
  background: linear-gradient(135deg, #004b8d, #0069c0);
  color: #ffffff;
}

.tg-selflearning .cta-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 40px 20px;
  text-align: center;
}

.tg-selflearning .cta-title {
  font-size: 24px;
  margin: 0 0 8px;
}

.tg-selflearning .cta-text {
  font-size: 13px;
  margin: 0 0 20px;
  color: #e2e9ff;
}

.tg-selflearning .cta-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.tg-selflearning .btn-cta-main {
  background: #ffffff;
  color: var(--color-primary);
  border-radius: var(--radius-pill);
  padding: 10px 24px;
  font-size: 13px;
  font-weight: 700;
  border: none;
  cursor: pointer;
}

.tg-selflearning .btn-cta-sub {
  border-radius: var(--radius-pill);
  padding: 10px 24px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid #ffffff;
  background: transparent;
  color: #ffffff;
  cursor: pointer;
}

/* footer（このコンポーネント内だけ） */
.tg-selflearning footer {
  font-size: 11px;
  color: var(--color-text-sub);
  padding: 16px 20px 24px;
  text-align: center;
}

/* Responsive */

@media (max-width: 768px) {
  .tg-selflearning .hero-inner {
    flex-direction: column;
  }
  .tg-selflearning .outcomes-layout {
    grid-template-columns: 1fr;
  }
  .tg-selflearning .hero-title {
    font-size: 24px;
  }
  .tg-selflearning .section {
    padding: 36px 16px;
  }
  .tg-selflearning .section-title {
    font-size: 22px;
  }
  .tg-selflearning .header-links {
    display: none;
  }
}

/* ▼ PC表示時にフォントを一回り大きくする上書き ▼ */
@media (min-width: 960px) {

  /* 見出し類を大きく */
  .tg-selflearning .hero-title {
    font-size: 34px;    /* 元: 30px */
  }

  .tg-selflearning .section-title {
    font-size: 28px;    /* 元: 26px */
  }

  .tg-selflearning .cta-title {
    font-size: 28px;    /* 元: 24px */
  }

  /* 本文・説明テキストを1ランクアップ */
  .tg-selflearning .section-lead,
  .tg-selflearning .definition-box,
  .tg-selflearning .hero-text p,
  .tg-selflearning .principle-desc,
  .tg-selflearning .year-list,
  .tg-selflearning .year-tagline,
  .tg-selflearning .program-card,
  .tg-selflearning .program-desc,
  .tg-selflearning .outcome-list,
  .tg-selflearning .outcomes-caption,
  .tg-selflearning .uni-list,
  .tg-selflearning .voice-card,
  .tg-selflearning .voice-quote,
  .tg-selflearning .cta-text {
    font-size: 15px;    /* 元: 13〜14px あたり */
  }

  /* ヘッダーまわりも少しだけ拡大 */
  .tg-selflearning .site-title {
    font-size: 18px;    /* 元: 16px */
  }

  .tg-selflearning .site-subtitle {
    font-size: 14px;    /* 元: 12px */
  }

  .tg-selflearning .header-links {
    font-size: 14px;    /* 元: 13px */
  }
}








/* 「詳しくはこちら」ボタンを幅100%に設定 */
.button-full-width {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    text-align: center;
    padding: 10px;
}





/* ul.archive-list-item の左余白を強制的に小さく設定 */
ul.archive-list-item {
    padding-left: 5px !important; /* 左余白を小さく設定 */
    margin-left: 0 !important; /* 左マージンを削除 */
}


.front-banner{
	text-align:center;
	width:50%;
}

.flex_wrapper{
	display:flex;
	justify-content:space-around;
	flex-wrap:wrap;
	margin:1em;
	width:90%;
}

.column{
	padding: 1.5em;
    margin: 2em 0;
    color: #2c2c2f;
    background: #f2f8ff;
	border: dashed 2px #5b8bd0;
}

#sapuri_logo{
	background:white;
}

#downloads{
border:dotted 1px #333;
padding:20px;
margin:15px;
border-radius:5px;
font-size:2rem;
}

.normalize li {
padding-top:10px;
padding-bottom:20px;
}



.post-content p{
	line-height:2;
}

dt{
	margin-bottom:1rem;
}
dd{
	line-height:1.5;
	margin-bottom:2rem;
}

.sinro dt{
	font-size:2rem;
	font-weight:600;
	color: #364e96;
	padding-top:10px;
	padding-bottom:10px;
	border-top: solid 1.5px #364e96;
	margin-top:5rem;
}

.sinro dd{
	line-height:2;
}



table th,table td{
  padding: 10px 0;
  text-align: left;
}

table tr:nth-child(odd){
  background-color: #eee
}

/* ==========================================================================
   詳細ブロック（アコーディオン / core/details）
   --------------------------------------------------------------------------
   方針: 見た目はエディタ側で決める。テーマは「エディタでは設定できないこと」
   だけを補う。

   一度ここに margin-block / border-bottom / font-size の既定値を書いたが、
   取り消した。テーマ側で余白の既定を持つと、エディタで余白を「リセット」
   しても既定値（64px）が入り直し、コアの既定（24px）に戻せなくなる。
   ブロックの設定が素直に反映される方が、後から触るときに迷わない。

   ■ 開閉マーカー（▶）が出ない問題を直す
   normalize由来の summary { display: block }（このファイルの上の方）が
   ::marker の描画を止めており、三角が一切出ていなかった。押せることが
   どこにも示されない状態で、FAQ・出願ページとも28個＋6個すべてが該当。
   display: list-item で戻す。エディタにこの設定は無い。

   ■ summary だけを太字にする
   開いたとき、summary（18px/500）が中の見出し（h3 21px/700）に負けて
   親子が逆転していた。ブロックのタイポグラフィ設定は details 全体に効くので
   「見出しだけ太字」はエディタでは表現できない。ここで補う。

   実測（適用前後・FAQ 28ブロック）: 高さの変化 0件・ページ全高 4375px のまま。
   ========================================================================== */

.wp-block-details > summary {
    display: list-item;
    font-weight: 700;
}

/* FAQ */
.cp_qa *, .cp_qa *:after, .cp_qa *:before {
	font-family: sans-serif;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_qa {
	width:100%;
    margin: auto;
	padding: 0;
	background:#ffffff;
}
.cp_qa h1 {
	font-size: 1.2em;
    margin-bottom: 1.2em;
	margin-top:2em;
	padding:0.5em;
	color: #ffffff;
	background-color: #183A5A;
}

.cp_qa dl {
	margin: 0;
}
.cp_qa dt {
	margin-bottom: 1em;
	margin-top:2em;
	padding-left: 1.5em;
	border-radius: 0.2em;
	background: #d48300;
    color: #ffffff;
}
.cp_qa dd {
	margin-bottom: 1em;
	margin-left: 0;
	padding: 0.5em 1em 1.5em 3em;
}
/* QAアイコン */
.cp_qa dt::before,.cp_qa dd::before{
	font-size: 1.2em;
	color: #ffffff;
}
.cp_qa dt::before {
	margin: 0.3em 0.3em 0 -1em;
	content: 'Q';
}
.cp_qa dd::before {
	margin: 0 0.5em 0 -2em;
	padding: 0.2em 0.4em;
	content: 'A';
	border-radius: 0.2em;
	background: #00bcd4;
}
/*
/****************************************
       TOPへ戻るボタン（Go to top）
*****************************************/
/* ページの先頭へ戻るボタン。
   表示・スクロールは page_top.js（600px超で fadeIn）。
   スマホでは下部CTAと重なるため、消さずにCTAの上へ逃がしている
   （max-width:781px のブロックを参照）。
   マークアップは footer.php。以前は href の無い <a> に「▲」の文字を入れて
   いたためキーボードで操作できず、読み上げにも意味が伝わらなかった。
   <button> ＋ aria-label に変更してある。 */
#page-top {
    position: fixed;
    right: 20px;
    bottom: 24px;
    display: none;
    z-index: 9999;
}

#page-top button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(2, 36, 81, 0.85); /* --primary-blue */
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    -webkit-appearance: none;
    appearance: none;
    transition: background 0.3s ease, transform 0.3s ease;
}

#page-top .page-top-icon::before {
    content: "\e5ce"; /* Material Icons expand_less（ヒーローの入口と対の向き） */
    font-family: "Material Icons";
    font-size: 2.8rem;
    line-height: 1;
}

#page-top button:hover {
    background: var(--primary-blue);
    transform: translateY(-3px);
}

#page-top button:focus-visible {
    outline: 3px solid var(--student-orange);
    outline-offset: 2px;
}

/* スマホでは追従CTAと重なるので、その上へ逃がす。
   --------------------------------------------------------------------------
   ■ 重なりの実測（390×844・既定の bottom:24px のとき）
     CTA      画面下端から 44〜98px・左右いっぱい（x 16〜374）
     page-top 画面下端から 24〜72px・x 322〜370   ← 完全にCTAの上
   以前はこれを避けるため 781px 以下で display:none !important にしていた。

   CTAは bottom:44px・高さ54px なので 44 + 54 + 12（間隔）= 110px を基準にする。
   env(safe-area-inset-bottom) はCTA側と同じ理由で加算する
   （ホームインジケータ分。アドレスバーの高さは含まない）。
   下端から110pxあるので「下部固定のタップ要素は下端から40px以上空ける」
   （iOS Safari がタップを奪う件・開発ルール 13-1）も満たす。

   ■ この節に置いている理由（!important を足さずに済ませるため）
   メディアクエリは詳細度を上げない。上の #page-top（bottom:24px）と
   詳細度が同じ (1,0,0) なので、後に書いた方が勝つ。
   最初これを 3785 行目あたりの max-width:781px のブロックに書いたところ、
   そちらが先・基本定義が後になり、bottom が 24px のままだった（本番で実測）。
   基本定義より後ろに置くことで !important 無しで通る。
   元の実装が display:none に !important を付けていたのも同じ理由と思われる。

   ■ 表示/非表示は触らない
   フェードイン・アウトは page_top.js（600px超）が inline style で行う。
   ここでは位置だけ指定する。 */
@media screen and (max-width: 781px) {
    #page-top {
        bottom: calc(110px + env(safe-area-inset-bottom));
    }

    /* CTAが出力されないページ（footer.php の $hide_cta_pages、学生一覧など）は
       逃がす必要がないので既定の高さに戻す。CTAが存在していて一時的に隠れて
       いるだけのときは動かさない（スクロール中に上下すると目障りなため）。 */
    body:not(:has(#floating-cta-container)) #page-top {
        bottom: calc(24px + env(safe-area-inset-bottom));
    }
}

/* .post-content内が記事ページと連携（部活動トピックス/受験生の方へ/在校生・保護者の方へ/学校生活/卒業生の方へ/その他）

   ↓ この規則は開始記号を欠いた壊れたコメントに巻き込まれ、長らく
   パースで捨てられていた（ブラウザの解析結果に存在しないことを確認）。
   コメントを直すと復活して既存ページの見た目が変わる可能性があるため、
   現状の表示を保つ目的であえて無効のままにしている。
   必要になったら下の行を戻すこと。

   .post-content .stdnt-pics { width: 150px; }
*/

/* --------------------

    CUSTOM * DO NOT DISTURB *

-------------------- */
.examinee-label {
    background-color: #e91e63;
}
.student-label {
    background-color: #ffb60b;
}
.club-label {
    background-color: #6a6a79;
}
.general-label {
    background-color: #1976d2;
}
.graduate-label {
    background-color: #5062b8;
}
.note-label {
    background-color: #607d8b;
}
.alert {
    background-color: #bc4045;
    border-radius: 0;
}
#sp-table-8 {
    width: 100%;
}
#sp-block-container-35 {
    width: 100%;
}

/* ========================================
   Top page block support - minimal
   目的：
   既存テーマの干渉を抑えつつ、
   色・余白・角丸・影などはブロックエディター/theme.jsonを優先する
======================================== */


/* ----------------------------------------
   0. 共通：既存テーマ干渉の最小リセット
---------------------------------------- */

.tg-front,
.tg-front * {
  box-sizing: border-box;
}

/* 背景色を設定していないグループだけ透明にする */
.tg-front .wp-block-group:not(.has-background) {
  background: transparent;
}

/* WordPressのグリッドレイアウト指定を復元。gap は指定しない（理由は上の
   .is-layout-grid のコメント参照。この .tg-front 版は詳細度 0,2,0 で、
   エディタの間隔を出すコンテナ規則により強く勝っていたので、gap を残すと
   COURSES グリッドの間隔が 0 のままになる）。 */
.tg-front .is-layout-grid {
  display: grid !important;
}

@media (max-width: 768px) {
  /* スマホは1列（block ではなく grid のまま）。理由は上の .is-layout-grid 参照。 */
  .tg-front .is-layout-grid {
    grid-template-columns: 1fr !important;
  }
}




/* カード（縦積みflexグループ）の中に置いたボタンの幅指定を効かせる。
   FEATURES 等のカードは flex-direction:column かつ align-items:flex-start
   なので、中の .wp-block-buttons がコンテンツ幅に縮む。すると
   ボタンの「幅100%」もその縮んだコンテナに対する100%（＝文字幅）になり、
   エディタの幅指定が無視されているように見えていた。
   ボタンコンテナを親いっぱいに広げると、幅25/50/75/100% がカード幅を基準に
   正しく効く。align-self は flex の子にしか作用しないため、flow 配下の
   通常のボタン群には影響しない（実測: フロントの他8ボタンは幅・高さとも不変）。 */
.tg-front .wp-block-buttons {
  align-self: stretch;
}

.tg-front .is-vertical {
  flex-direction: column;
}

.tg-front .is-horizontal {
  flex-direction: row;
}

.tg-front .is-content-justification-center {
  justify-content: center;
}

.tg-front .is-content-justification-left {
  justify-content: flex-start;
}

.tg-front .is-content-justification-right {
  justify-content: flex-end;
}

.tg-front .is-content-justification-space-between {
  justify-content: space-between;
}


/* ----------------------------------------
   1. カラムブロック
   配置のみ補正。色・余白はブロック側を優先。
---------------------------------------- */

@media (min-width: 782px) {
  .tg-front .wp-block-columns {
    display: flex;
    flex-wrap: nowrap;
  }

  .tg-front .wp-block-columns > .wp-block-column {
    flex-basis: 0;
    flex-grow: 1;
    min-width: 0;
  }
}

@media (max-width: 781px) {
  .tg-front .wp-block-columns {
    display: block;
  }

  .tg-front .wp-block-column {
    margin-bottom: 1.5rem;
  }

  /* エディタの「モバイルでは縦に並べる」をオフにしたカラムは横並びのまま残す。
     --------------------------------------------------------------------
     コアの is-not-stacked-on-mobile は
       .wp-block-columns.is-not-stacked-on-mobile { flex-wrap: nowrap !important }
     と flex-wrap しか指定しない。直上の display:block で flex 自体が解除されると
     flex-wrap は意味を持たないため、エディタの設定が黙って無視されていた。
     （ヒーロー直下のバナー2枚で発覚。トグルをオフにしても縦積みのままだった）

     display を戻すだけでよく、幅は core の
       .is-not-stacked-on-mobile > .wp-block-column { flex-basis: 0; flex-grow: 1 }
     が均等に分ける。縦積み前提の下マージンは横並びでは不要なので消す。

     実測（トップページ・390px）:
       適用前 バナー全体 295px / 1枚390px幅・縦積み
       適用後 バナー全体 159px / 1枚195px幅・横並び（−136px）
       横スクロールの発生なし
     対象はトップの該当カラム1つのみ（ページ内のカラムブロック2つ中1つ）。
     このクラスが付いていないカラムは従来どおり縦積みのまま。 */
  .tg-front .wp-block-columns.is-not-stacked-on-mobile {
    display: flex;
  }

  .tg-front .is-not-stacked-on-mobile > .wp-block-column {
    margin-bottom: 0;
  }
}


/* ----------------------------------------
   2. カード
   tg-card は「カードとして扱う」ための最低限だけ。
   背景色・角丸・影・余白はブロックエディターで設定する。
---------------------------------------- */

.tg-front .tg-card {
  box-sizing: border-box;
  overflow: hidden;
}

.tg-front .tg-card > *:first-child {
  margin-top: 0;
}

.tg-front .tg-card > *:last-child {
  margin-bottom: 0;
}


/* ----------------------------------------
   3. ボタン
   色はブロックエディター側を優先。
---------------------------------------- */

body .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  line-height: 1.4;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

body .wp-block-button__link:hover {
  transform: translateY(-1px);
  opacity: 0.95;
}

/* 「輪郭」スタイル: 色反転ホバー
   background-color に currentColor を使うと、同ルール内の color:white を参照して
   背景も白になる。JSで事前に実色を --_btn-color に格納し、それを使う。 */
body .wp-block-button.is-style-outline .wp-block-button__link {
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
body .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: var(--_btn-color);
  color: #ffffff !important; /* has-*-color の !important を上書き */
  transform: none;
  opacity: 1;
}

body .wp-block-button__link:focus-visible {
  outline: 3px solid rgba(0, 0, 0, 0.25);
  outline-offset: 3px;
}

/* 【削除済み】幅100%ボタンの補正2規則

   body .wp-block-button.has-custom-width,
   body .wp-block-button.wp-block-button__width-100 { width: 100%; }
   body .wp-block-button.wp-block-button__width-100 .wp-block-button__link { width: 100%; }

   コア側が `.wp-block-buttons > .wp-block-button.wp-block-button__width-25`
   という詳細度(0,3,0)で先に効いており、この規則(0,2,1)は負けていた。
   3ページ（在校生・保護者向け20要素／新校舎プロジェクト4要素／トップ14要素）で
   width 宣言だけを外して実測し、差分0件を確認した上で削除した。

   そもそも has-custom-width を一律100%にするのは誤り。
   このクラスは25/50/75%のときにも付くため、コアの詳細度が変われば
   幅指定が全部100%に潰れる。復活させないこと。
*/

/* 幅指定ボタン（25/50/75%）のスマホ対応（1列・全幅に落とす）

   ボタンの「幅を設定」（25/50/75/100%）は固定値1つで画面幅に追従しない。
   幅25%はPC（≈209px）では最適でも、スマホでは25%のまま≈76pxに潰れ、
   日本語ラベルが1文字ずつ縦折り返しでほぼ縦書きになり読めない
   （在校生・保護者向けページで実測：375px幅で各76px・5〜8行・高さ200px超）。
   75%も同様にスマホでは中途半端な幅で並ぶ。方針として「幅を指定した
   ボタンはスマホ（テーマのPC/SP境界＝768px）では全幅・縦積みに揃える」。
   これで潰れが解消し、幅指定ボタンの見た目もスマホで統一される。PCの
   均等列は維持される。100%は元々全幅なので実質すべての has-custom-width が対象。

   コア側が `.wp-block-buttons > .wp-block-button.wp-block-button__width-25`
   等（詳細度0,3,0）で width:calc(…) を固定しているため、!important で
   上書きする（詳細度の経緯は直上の削除済みコメント参照。あの規則が負けたのは
   !important 無し・低詳細度だったため。ここは media 内＋!important で確実に勝つ）。
   なお .wp-block-button__link は既にグローバルで width:100% 済み。 */
@media screen and (max-width: 768px) {
  .wp-block-buttons > .wp-block-button.has-custom-width {
    flex-basis: 100% !important;
    width: 100% !important;
  }

  /* nowrap指定のボタン群をスマホでは折り返す。
     フロントの「新校舎プロジェクト／説明会情報／欠席連絡」は
     コンテナが flex-wrap:nowrap + justify:space-between、各ボタンは幅100%。
     nowrap のせいでスマホでも3つが横1列に押し込まれ、各109px・高さ97pxで
     潰れていた（日本語ラベルが2〜3行に折り返し）。折り返しを許可すると
     幅100%ボタンが1つずつ縦積みになり読める。折り返しは必要なときだけ
     働くので、収まる小さいボタンの横並びは維持され副作用は小さい。
     コンテナの .wp-container-*（詳細度0,1,0）を上回るよう
     .wp-block-buttons.is-layout-flex（0,2,0）＋!importantで上書きする。 */
  .wp-block-buttons.is-layout-flex {
    flex-wrap: wrap !important;
  }
}

/* ボタンを2つ以上並べたいボタン群を、幅指定があっても横並びに保つヘルパー。
   ボタン群（ボタンブロックの親）の「追加CSSクラス」に banner-buttons と入れて使う。
   --------------------------------------------------------------------------
   ■ 折り返してしまう理由（PC）
   コアの幅指定は
     width: calc(50% - var(--wp--style--block-gap, .5em) * .5)
   だが、このサイトは block-editor-styles.css の
     main.normalize { --wp--style--block-gap: 0px !important }
   により引かれる分が 0 になり、50% がそのまま 50% になる。
   一方でコンテナの実際の gap は 24px 残っているため、2つ並べると
   100% + 24px になって必ず折り返す。
   実測（トップのバナー・ビューポート1600px）:
     コンテナ 485px / ボタン 242.66px × 2 + gap 24px = 509px > 485px
   コミット 6910bbe（単位なし 0 で calc ごと捨てられていた件）と同じ根。
   あのときは計算式が有効になるよう 0px にしたが、値が 0 であること自体は
   残ったので、ボタンを2つ並べる場合に表面化した。

   ■ 折り返してしまう理由（スマホ）
   直上の 768px 以下の規則が has-custom-width を全幅・縦積みに落とす。
   あれは画面幅いっぱいに並ぶボタン群のための規則で、高さ160pxのバナーの
   中では縦積みにすると収まらない。

   ■ この書き方の理由
   flex: 1 1 0 で「幅指定の値」ではなく「実際の残り幅」を等分させる。
   これなら block-gap が 0 のままでも gap の分を正しく差し引ける。
   :not(:only-child) でボタンが1つだけの場合を除外しているので、
   同じクラスを付けても1ボタンの群の幅指定はそのまま残る。
   詳細度 (0,5,0)+!important なので、768px 規則 (0,3,0)+!important に
   メディアクエリの内外を問わず勝つ。

   ■ なぜクラスで明示的に選ばせるか
   最初 `.wp-block-cover .wp-block-buttons > …` と書いたが、それだと
   SCHOOL LIFE セクションの「部活動・同好会／学校行事・研修」も条件に合致し、
   スマホで 360px 縦積み → 168px 横並びに変わってしまった（実測）。
   既存の見た目を黙って変えないよう、使う場所を明示する形にした。
   逆に他の箇所も横並びにしたくなったら、そこに同じクラスを足せばよい。

   実測（適用後・トップページ）:
     PC 1600px  1ボタンのバナー 243px（変化なし）/ 2ボタン 231+231px 横並び
     SP  390px  1ボタンのバナー 360px（変化なし）/ 2ボタン 168+168px 横並び
     SCHOOL LIFE は PC 800px・SP 360px の縦積みのまま変化なし
     いずれも横スクロールの発生なし */
.wp-block-buttons.banner-buttons > .wp-block-button.has-custom-width:not(:only-child) {
  flex: 1 1 0 !important;
  width: auto !important;
}

/* カラムがスマホで縦積みになったとき、動画のあるカラムを上へ回す。
   --------------------------------------------------------------------------
   コース紹介ページは「動画＋説明」を2カラム（50/50）で横並びにし、PCでは
   左右交互（ジグザグ）に配置している。カラムはコアの仕様で 781px 以下だと
   縦積みになるが、積む順はDOM順なので、動画が右カラムの行はスマホで
   「文章が上・動画が下」になり、行ごとに上下が入れ替わって見えた。

   全行「動画→説明」に揃えるため、動画を含むカラムに order:-1 を与える。
   メディアクエリをコアの積み替え境界と同じ 781px にしているのが要点:
   - 781px以下（縦積み）→ order が縦の順序を決める＝動画が上
   - 782px以上（横並び）→ order が当たらないので DOM順のまま＝PCのジグザグ維持
   もし 768px 等にすると 769〜781px の縦積み範囲で順が揃わなくなる。

   :has(video) で「動画を含むカラム」だけに限定。これは Row の is-nowrap で
   カバーを縦積みにしていた旧規則の置き換え（コース紹介をカラム＋動画ブロックに
   作り直したため、旧規則は不要になり削除した）。 */
@media (max-width: 781px) {
  .wp-block-columns > .wp-block-column:has(video) {
    order: -1;
  }
}

/* ----------------------------------------
   4. カバーブロック共通
   画像・動画の上に文字を重ねるための構造補正のみ
---------------------------------------- */

/* overflow は書かない。コアが `overflow: hidden; overflow: clip` を出しており、
   ここに `overflow: hidden` を書くと詳細度（0,2,0 対 0,1,0）で勝ってしまい、
   コアが意図した `clip` を hidden に引き戻す。
   hidden はスクロールコンテナを作るので、配下の scroll-snap や sticky を壊す
   （第3節「`overflow: hidden` を安易に足さない」）。切り取り位置は clip と同じで、
   見た目は変わらない。2026-07-27 に実測して削除。 */
.tg-front .wp-block-cover {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tg-front .wp-block-cover__image-background,
.tg-front .wp-block-cover__video-background,
.tg-front .wp-block-cover video.wp-block-cover__video-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.tg-front .wp-block-cover__background {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.tg-front .wp-block-cover__inner-container {
  position: relative;
  z-index: 2;
  width: 100%;
}


/* ----------------------------------------
   5. ヒーローヘッダー専用
   高さだけ補助。必要ならブロック側の最小高さ設定に移行。
---------------------------------------- */

.tg-front .tg-hero-cover {
  height: 56.25vw !important; /* 横幅に応じて高さを可変にする(16:9比率) */
  /* 最大高さ。上の .home .tg-hero-cover と同じ値にすること（経緯はそちらのコメント）。 */
  max-height: 810px !important;
  min-height: auto !important;
  margin-right: calc(50% - 50vw) !important;
  margin-left: calc(50% - 50vw) !important;
  width: 100vw !important;
  max-width: 100vw !important;
}

@media screen and (max-width: 781px) {
  .tg-front .tg-hero-cover.has-aspect-ratio {
    aspect-ratio: auto !important;
    min-height: 56.25vw !important;
  }
}

@media (max-width: 781px) {
  /* フロントページのヒーローヘッダーのみ:
     画像を上に自然表示し、ボタンを下の帯に配置
     他のカバーブロックには適用しない（has-aspect-ratio で判別） */
  /* 上の .home 側と同じ内容。経緯はそちらのコメントを参照。 */
  .tg-front .tg-hero-cover {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    min-height: 0 !important;
    height: 56.25vw !important;
    overflow: hidden;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: auto !important; /* スマホではアスペクト比をリセット */
    margin-right: 0 !important; /* PCの全幅マージンをリセット */
    margin-left: 0 !important;
  }

  .tg-front .tg-hero-cover > .wp-block-cover__image-background,
  .tg-front .tg-hero-cover > .wp-block-cover__video-background {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: cover;
    object-position: center;
  }

  .tg-front .tg-hero-cover > .wp-block-cover__background {
    display: block;
  }

  .tg-front .tg-hero-cover > .wp-block-cover__inner-container {
    position: relative !important;
    z-index: 2;
    padding: 0 20px;
    background-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    width: 100%;
    box-sizing: border-box;
  }
}


/* ========================================
   Club page wide template
   各部活動紹介ページ：広い表示領域
======================================== */

.club-page-wide {
  width: 100%;
}

.club-page-wide-inner {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 48px 0;
}

.club-page-wide .alignwide {
  max-width: 1180px;
}

.club-page-wide .alignfull {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

@media (min-width: 782px) {
  .club-page-wide .wp-block-columns {
    display: flex;
    gap: 32px;
    align-items: flex-start;
  }

  .club-page-wide .wp-block-column {
    min-width: 0;
  }
}

@media (max-width: 781px) {
  /* スマホは全幅表示（軽い左右余白あり） */
  .club-page-wide-inner {
    width: 100%;
    padding: 24px 16px;
    box-sizing: border-box;
  }
  #main.club-page-wide {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* single-club ページのスマホ左右padding: 6px */
  body.single-club #content {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  /* template-club-page.php (各部活動ページ) のスマホ左右padding */
  #main.club-page-wide {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* club-profile はスマホで左右6px */
  .club-profile {
    padding-left: 6px;
    padding-right: 6px;
  }
  /* club-profile-message のフォントサイズ */
  .club-profile-message div {
    font-size: 14px;
  }
}


/* ========================================
   Featured cover
   [featured_cover]
======================================== */

.club-featured-cover {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-bottom: 40px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  border-radius: 18px;
}

.club-featured-cover__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 1;
}

.club-featured-cover__content {
  position: relative;
  z-index: 2;
  width: min(100% - 40px, 1000px);
  text-align: center;
}

.club-featured-cover__title {
  margin: 0;
  color: #fff;
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1.2;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

@media (max-width: 781px) {
  .club-featured-cover {
    min-height: 280px !important;
    border-radius: 12px;
    margin-bottom: 28px;
  }
}


/* ========================================
   Club profile
   [club_profile]
======================================== */

.club-profile {
  margin: 40px 0;
}

.club-profile-title {
  position: relative;
  margin: 0 0 20px;
  padding-bottom: 10px;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.4;
  color: #1a1a1a;
  border-bottom: 2px solid #1e9bd7;
  letter-spacing: 0.02em;
}

.club-profile-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 40px;
}

.club-profile-list {
  display: grid;
  gap: 0;
  margin: 0;
}

.club-profile-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid #e7ebf0;
}

.club-profile-row:last-child {
  border-bottom: none;
}

.club-profile-row dt {
  font-weight: 600;
  font-size: 1.4rem;
  color: #6b7280;
  letter-spacing: 0.04em;
}

.club-profile-row dd {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.65;
  color: #1a1a1a;
}

.club-profile-message {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #e7ebf0;
}

.club-profile-message h3 {
  margin: 0 0 12px;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.4;
  color: #1a1a1a;
}

.club-profile-message div {
  line-height: 1.85;
  color: #2a2a2a;
}

@media (max-width: 900px) {
  .club-profile-columns {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

@media (max-width: 781px) {
  .club-profile {
    margin: 28px 0;
  }

  .club-profile-title {
    margin-bottom: 16px;
    font-size: 1.6rem;
  }

  .club-profile-row {
    grid-template-columns: 100px 1fr;
    padding: 12px 0;
  }

  .club-profile-row dt {
    font-size: 1.3rem;
  }

  .club-profile-row dd {
    font-size: 1.4rem;
  }
}

/* ========================================
   Club nav
   [club_nav]
======================================== */

.club-page-wide .club-nav-summary {
  display: block !important;
  margin: 0;
}

.club-page-wide .club-nav-summary .summary-unit {
  width: 100% !important;
  max-width: none !important;
  margin-bottom: 24px;
  float: none !important;
}

.club-page-wide .club-nav-summary .summary-unit:last-child {
  margin-bottom: 0;
}

.club-page-wide .club-nav-summary .summary-item {
  background: #fff;
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.club-page-wide .club-nav-summary .item-title--club {
  margin: 0 0 16px;
  font-size: 1.1rem;
  line-height: 1.4;
}

.club-page-wide .club-nav-summary .item-title--club .en {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  opacity: 0.7;
}

.club-page-wide .club-nav-summary .athletic-unit {
  list-style: none;
  margin: 0;
  padding: 0;
}

.club-page-wide .club-nav-summary .athletic-unit li {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #eee;
}

.club-page-wide .club-nav-summary .athletic-unit li:last-child {
  border-bottom: none;
}

.club-page-wide .club-nav-summary .athletic-unit a {
  display: flex;
  align-items: center;
  gap: 0.55em;
  padding: 10px 4px;
  line-height: 1.5;
  text-decoration: none;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.club-page-wide .club-nav-summary .athletic-unit a::before {
  flex: 0 0 auto;
}

@media (max-width: 781px) {
  .club-page-wide .club-nav-summary .summary-unit {
    margin-bottom: 18px;
  }

  .club-page-wide .club-nav-summary .summary-item {
    padding: 16px;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
  }

  .club-page-wide .club-nav-summary .item-title--club {
    margin: 0 0 10px;
    font-size: 1rem;
  }

  .club-page-wide .club-nav-summary .item-title--club .en {
    display: inline-block;
    margin-right: 0.4em;
    font-size: 0.72rem;
  }

  .club-page-wide .club-nav-summary .athletic-unit {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    padding: 2px 2px 10px !important;
    margin: 0 !important;
    white-space: nowrap;
    scrollbar-width: thin;
  }

  .club-page-wide .club-nav-summary .athletic-unit li {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: none !important;
    float: none !important;
    clear: none !important;
  }

  .club-page-wide .club-nav-summary .athletic-unit a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    width: auto !important;
    padding: 7px 14px !important;
    border: 1px solid #d8dde6;
    border-radius: 999px;
    background: #fff;
    color: #222;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  }

  .club-page-wide .club-nav-summary .athletic-unit a:hover,
  .club-page-wide .club-nav-summary .athletic-unit a:focus-visible {
    background: #f5f7fb;
    border-color: #b8c2d6;
    text-decoration: none;
  }

  .club-page-wide .club-nav-summary .athletic-unit a::before,
  .club-page-wide .club-nav-summary .athletic-unit a::after {
    display: none !important;
    content: none !important;
  }

  .club-page-wide .club-nav-summary .athletic-unit a > *,
  .club-page-wide .club-nav-summary .athletic-unit span,
  .club-page-wide .club-nav-summary .athletic-unit .nav-item-en,
  .club-page-wide .club-nav-summary .athletic-unit .nav-item-ja,
  .club-page-wide .club-nav-summary .athletic-unit .sub {
    margin: 0 !important;
    padding: 0 !important;
  }
}


/* ========================================
   Club reports
   [club_reports]
======================================== */

@media (max-width: 781px) {
  .club-page-wide .club-list-item {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 14px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    padding: 4px 4px 14px !important;
    margin: 0 !important;
    list-style: none !important;
    scroll-snap-type: x mandatory;
  }

  .club-page-wide .club-list-item > li {
    flex: 0 0 78% !important;
    max-width: 300px;
    width: auto !important;
    float: none !important;
    clear: none !important;
    margin: 0 !important;
    padding: 0 !important;
    scroll-snap-align: start;
  }

  .club-page-wide .club-list-item .club-anchor {
    display: block !important;
    height: 100%;
    background: #fff;
    border-radius: 0;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
  }

  .club-page-wide .club-list-item .club-list-figure {
    margin: 0 !important;
  }

  .club-page-wide .club-list-item .club-list-figure img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  .club-page-wide .club-list-item .club-list-date {
    display: block;
    padding: 12px 14px 4px;
    font-size: 0.78rem;
    opacity: 0.75;
  }

  .club-page-wide .club-list-item .club-list-title {
    display: block;
    padding: 0 14px 14px;
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.5;
    color: inherit;
  }
}

/* club_profile：ラベル下部の余白ずれ対策 */
.club-profile-row {
  align-items: stretch;
}

.club-profile-row dt,
.club-profile-row dd {
  min-height: 0;
  box-sizing: border-box;
}

.club-profile-row dt {
  margin: 0 !important;
  height: auto !important;
  align-self: stretch;
}

.club-profile-row dt::before,
.club-profile-row dt::after {
  display: none !important;
  content: none !important;
}

.club-profile-row dd {
  margin: 0 !important;
  height: auto !important;
}

/* ========================================
   WordPress block color restore
   theme.json の色設定をフロントで確実に反映
======================================== */

.has-school-blue-color {
  color: #0099d9 !important;
}

.has-school-blue-background-color {
  background-color: #0099d9 !important;
}

.has-navy-color {
  color: #14213d !important;
}

.has-navy-background-color {
  background-color: #14213d !important;
}

.has-light-gray-color {
  color: #f5f7fa !important;
}

.has-light-gray-background-color {
  background-color: #f5f7fa !important;
}

.has-white-color {
  color: #ffffff !important;
}

.has-white-background-color {
  background-color: #ffffff !important;
}

.has-body-text-color {
  color: #222222 !important;
}

.has-body-text-background-color {
  background-color: #222222 !important;
}

/* ========================================
   WordPress block color restore
   theme.json 独自カラーをフロント側で反映
======================================== */

.has-school-blue-color {
  color: #0099d9 !important;
}

.has-school-blue-background-color {
  background-color: #0099d9 !important;
}

.has-navy-color {
  color: #14213d !important;
}

.has-navy-background-color {
  background-color: #14213d !important;
}

.has-light-gray-color {
  color: #f5f7fa !important;
}

.has-light-gray-background-color {
  background-color: #f5f7fa !important;
}

.has-body-text-color {
  color: #222222 !important;
}

.has-body-text-background-color {
  background-color: #222222 !important;
}

/* ==========================================================================
   Modern Theme Overrides (Consolidated)
   ========================================================================== */



#page {
    overflow: visible !important;
    /* Prevent breaking sticky positioning */
}



/* --- Branding & Logo Restoration --- */
#site-branding {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
}

#site-branding .site-title {
    background-image: url(lib/images/site-logo3.svg) !important;
    /* Updated to SVG logo */
    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-size: contain !important;
    /* Ensure SVG scales correctly within its container */
    width: 320px !important;
    /* Balanced size for the SVG logo */
    height: 60px !important;
    margin-left: 20px !important;
    display: block !important;
    float: left !important;
    background-color: transparent !important;
    overflow: visible !important;
}

#site-branding .site-title a {
    text-indent: -9999px !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    color: transparent !important;
}

/* --- Global Navigation --- */
#site-navigation ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
#site-navigation li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

#site-navigation {
    background-image: none !important;
    background-color: transparent !important;
    color: var(--primary-blue) !important;
    /* Blue text for white background */
    box-shadow: none !important;
}

#site-navigation a {
    color: var(--primary-blue) !important;
    text-decoration: none !important;
    transition: all 0.3s ease;
    padding: 8px 15px !important;
    position: relative !important;
    /* For pseudo-element positioning */
}

#site-navigation a::after {
    content: '' !important;
    position: absolute !important;
    bottom: -2px !important;
    /* Moved slightly down for better integration */
    left: 15px !important;
    right: 15px !important;
    height: 3px !important;
    background-color: var(--student-orange) !important;
    transform: scaleX(0) !important;
    transition: transform 0.3s ease !important;
    transform-origin: center !important;
}

#site-navigation a:hover {
    background-color: transparent !important;
    color: var(--student-orange) !important;
}

#site-navigation a:hover::after {
    transform: scaleX(1) !important;
}

/* 見出し代わりの項目（カスタムリンクのURLが「#」や空）は href を出力して
   いないので押せない。navigation.php の custom_walker_nav を参照。
   ホバーで色が変わったり下線が伸びたりすると押せそうに見えるため、
   反応しないようにしておく。 */
#site-navigation a:not([href]),
#site-navigation a:not([href]):hover {
    color: var(--primary-blue) !important;
    cursor: default !important;
}

#site-navigation a:not([href]):hover::after {
    transform: scaleX(0) !important;
}

/* --- Universal Hamburger Menu (Drawer) --- */
.menu-toggle {
    display: block !important;
    background: transparent !important;
    border: none !important;
    z-index: 3000 !important;
    margin-right: 5px !important;
}

#site-navigation {
    position: fixed !important;
    top: 0 !important;
    right: -100% !important;
    width: 85% !important;
    max-width: 400px !important;
    height: 100% !important;
    background-color: #ffffff !important;
    z-index: 2500 !important;
    transition: right 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    /* 上余白は 80px あったが、見出し「MENU」が画面のかなり下から始まって
       間延びしていた。ヘッダーのハンバーガーボタンを避けるための値にも見えるが、
       .menu-toggle の z-index:3000 は #masthead の z-index:1000 の
       スタッキングコンテキストに閉じ込められるため、開いている間ボタンは
       ドロワー（2500）の下に隠れる。避ける必要は無いので詰めた。
       変えるときは .menu-close の top も一緒に調整すること（見出しと高さを揃えている）。 */
    padding: 32px 30px !important;
    box-shadow: -5px 0 25px rgba(0, 0, 0, 0.1) !important;
    display: block !important;
    overflow-y: auto !important;
}

#site-navigation.toggled-on {
    right: 0 !important;
}

.mobile-menu-header {
    display: block !important;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--primary-blue);
}

.mobile-menu-header h2 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--primary-blue);
}

#site-navigation ul {
    display: block !important;
    background: transparent !important;
}

#site-navigation li {
    width: 100% !important;
    margin: 0 !important;
    border-bottom: 1px solid #eee !important;
    float: none !important;
}

#site-navigation li a {
    padding: 15px 0 !important;
    /* 1rem = 10px なので実測16px。
       以前の 1.35rem は 21.6px のつもりで書かれていたが実際は13.5pxで、
       全画面のメニューとしては小さすぎたため 1.7rem(17px) にした経緯がある。
       そこから1段階（0.1rem = 1px）下げて 1.6rem。 */
    font-size: 1.6rem !important;
    /* 700（太字）にしていたが、全項目が同じ太さで並ぶと圧が強く読みづらいため
       600 に戻した。子項目は下の .sub-menu 側で 400 に落として差を付けている。 */
    font-weight: 600 !important;
    display: block !important;
}

/* スマホ表示時のドロワーメニューのフォントサイズと余白調整 */
@media screen and (max-width: 768px) {
    #site-navigation li a {
        /* 実測15px。以前の 1.15rem は実測11.5pxで、スマホの主要ナビとしては
           読みづらかったため 1.6rem(16px) にした経緯がある。
           そこから1段階（0.1rem = 1px）下げて 1.5rem。
           これ以上下げると学校サイトの主要ナビとしては小さい。
           最長項目「制服・研修・イベント」が1行に収まることは実測で確認済み */
        font-size: 1.5rem !important;
        padding: 12px 0 !important; /* 余白を少し詰める */
    }
}

/* Sub-menus inside drawer */
#site-navigation ul ul {
    display: none !important;
    padding-left: 20px !important;
    border: none !important;
    box-shadow: none !important;
    position: relative !important;
}

/* 子項目は親より軽くする。
   インデントされているだけで太さも大きさも親と同じだと、開いたときに
   「項目が増えた」ようにしか見えず、どこまでが子なのか読み取りにくい。

   タップ目標は狭めたくないので padding（親の 15px / スマホ12px）はそのまま、
   文字だけ1段階（0.1rem = 1px）小さくして太さを 400 に落とす。
   押せる範囲は変わらず、見た目の軽さだけが変わる。 */
#site-navigation ul ul li a {
    font-size: 1.5rem !important;
    font-weight: 400 !important;
}

@media screen and (max-width: 768px) {
    #site-navigation ul ul li a {
        font-size: 1.4rem !important;
    }
}

/* 以前は li:hover で開いていたが、タッチ端末にはホバーが無く子メニューを
   開けなかった。modern-nav.js が差し込む .submenu-toggle での明示的な開閉に
   置き換えている（PCでもクリックで開く） */
#site-navigation li.submenu-open > ul {
    display: block !important;
}

/* 親項目のリンクと開閉ボタンを横に並べる。li は幅100%指定済み */
#site-navigation li.menu-item-has-children {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}

#site-navigation li.menu-item-has-children > a {
    flex: 1 1 auto !important;
}

#site-navigation li.menu-item-has-children > ul {
    flex: 0 0 100% !important; /* 子メニューは親リンクの下に折り返す */
}

.submenu-toggle {
    flex: 0 0 auto !important;
    /* 44px はタップ目標の最低サイズ。これ未満だと押しづらい */
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    position: relative !important;
}

/* ▼ の代わりに擬似要素で矢印を描く（アイコン読み込み不要） */
.submenu-toggle::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 9px !important;
    height: 9px !important;
    margin: -6px 0 0 -5px !important;
    border-right: 2px solid var(--primary-blue) !important;
    border-bottom: 2px solid var(--primary-blue) !important;
    transform: rotate(45deg) !important;
    /* transition: transform 0.2s ease は付けてはいけない。
       擬似要素に transition を置くと、祖先の class 変化（.submenu-open の
       付け外し）で transform が目標値まで進まず、45deg のまま止まる。
       実測: transition あり → 開いても deg 45 のまま／同じ規則の margin-top は
       -2px に変わる（＝カスケードは効いていて transition だけが原因）。
       transition を外すと -135deg になり矢印が反転する。
       9pxの矢印なので即時反転で困らない。 */
}

.menu-item-has-children.submenu-open > .submenu-toggle::before {
    margin-top: -2px !important;
    transform: rotate(-135deg) !important;
}

/* Header Shrink specifically for mobile */
@media screen and (max-width: 768px) {
    #site-branding .site-title {
        height: 40px !important;
        width: 215px !important;
        margin-left: 10px !important;
    }
}

/* Hamburger Icon Styling */
.hamburger {
    width: 30px;
    height: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.hamburger span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--primary-blue) !important;
    /* Reverted to blue for white header */
    border-radius: 2px;
    transition: all 0.3s ease;
}

.menu-toggle.is-active .hamburger span:nth-child(1) {
    transform: translateY(8.5px) rotate(45deg);
}

.menu-toggle.is-active .hamburger span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.is-active .hamburger span:nth-child(3) {
    transform: translateY(-8.5px) rotate(-45deg);
}



/* ==========================================================================
   Fluid Typography Utility Class
   ========================================================================== */

/*
 * Use this class on specific blocks (like Cover block headings) to make them fluid.
 * Add 'is-fluid-heading' to the Additional CSS Class field in the editor.
 */















/* Ultra-safe responsive heading for cards */
/* Mobile First: Cards are full width (stacked), so text should be larger */
.is-fluid-heading {
    font-size: clamp(1.6rem, 6vw, 2.2rem) !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: auto-phrase !important; /* Auto-phrase is safe if we don't have infinite cqi bugs */
    max-width: 100%;
}

/* Tablet/Desktop: Cards are in narrow columns, so text must be smaller */
@media screen and (min-width: 768px) {
    .is-fluid-heading {
        font-size: clamp(1.2rem, 2vw + 0.5rem, 1.6rem) !important;
    }
}


/* Ultra-safe responsive heading for FULL WIDTH areas */
.is-fluid-heading-large {
    /* 下限は 2.4rem = 24px（このサイトは html { font-size: 62.5% } で 1rem = 10px）。

       経緯:
       元は 2rem で、16px基準の32pxのつもりで書かれていたが実測20pxにしかならず、
       スマホでセクション見出しが本文と大差なかった。
       一度 3.2rem（32px）まで上げたが、今度は長い見出しが3行になり
       画面上部を占有して大きすぎたため 2.4rem に落ち着かせた。

       375px幅での実測（8つの見出しの行数）:
         22px … 1行:6 / 2行:1 / 3行:1
         24px … 1行:5 / 2行:2 / 3行:1  ← 採用
         26px … 1行:3 / 2行:4 / 3行:1
         28px … FEATURESが3行になる
       24pxなら「成長の「入口」も「出口」も…」が2行に収まる。
       3行のままなのは「「学館浦安」であなたの「カコイチ」…」の1つだけで、
       これは文言が長いため。

       上限の 5rem（=50px）は一度も変更していない。PCの見え方は元のまま。

       font-size だけ下の :not([style*="font-size"]) に分けてある（経緯は後述）。
       それ以外（行間・折り返し）はクラスを付けた全見出しに効かせる。 */
    line-height: 1.3 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: auto-phrase !important;
    max-width: 100%;
}

/* エディタで文字サイズを指定した見出しには clamp を効かせない。
   --------------------------------------------------------------------------
   以前はここが単に `.is-fluid-heading-large { font-size: clamp() !important }`
   で、!important のためエディタの文字サイズ設定が一切通らなかった
   （コース紹介ページで20px指定のH2が50pxで表示されていた）。

   単純に !important を外すと今度はトップページが壊れる。トップの見出しは
   このクラス＋プリセット（has-large-font-size 等）で組まれていて、
   コアのプリセットは `.has-large-font-size{ font-size:var(--..)!important }`
   と **!important 付き** で出力される。clamp 側の !important を外すと
   プリセットの !important が勝ち、狙いの clamp サイズにならない。

   そこで「エディタで文字サイズを指定した見出し＝インライン style に
   font-size を持つ見出し」だけを clamp の対象から外す。
   - インライン指定あり（コース紹介の20px等）→ この規則が当たらず、
     インラインの値がそのまま通る。
   - インライン指定なし（トップのプリセット見出し）→ この規則が当たる。
     :not([style*="font-size"]) で詳細度が (0,2,0) になり、
     プリセットの (0,1,0)!important に勝つので clamp が効く（従来どおり）。

   つまり「サイズ未指定ならフルードのまま／指定したら尊重する」になる。
   個別にクラスを外す運用（旧 17-4 の案）は不要。
   小さい方の .is-fluid-heading も同じ !important 構造だが、そちらで
   同じ要望が出たら同様に分けること。 */
.is-fluid-heading-large:not([style*="font-size"]) {
    font-size: clamp(2.4rem, 5vw, 5rem) !important;
}
.club-page-wide {
  width: 100%;
}

#main.club-page-wide {
  max-width: 1200px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}

.club-page-wide-inner {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 48px 0;
}

/* ローカルナビは他ページに合わせて1000px幅に制限 */
.club-page-wide .content-secondary {
  max-width: 1000px;
}

.club-page-wide .alignwide {
  max-width: 1180px;
}

.club-page-wide .alignfull {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

@media (min-width: 1001px) {
  .club-page-wide .wp-block-columns {
    display: flex;
    gap: 32px;
    align-items: flex-start;
  }

  .club-page-wide .wp-block-column {
    min-width: 0;
  }
}

@media (max-width: 1000px) {
  .club-page-wide-inner {
    width: 100%;
    padding: 24px 0;
  }
}

/* WordPress block library の 782px flex を 1000px 以下で打ち消す */
@media (min-width: 782px) and (max-width: 1000px) {
  .club-page-wide .wp-block-columns,
  .club-page-wide .wp-block-columns:not(.is-not-stacked-on-mobile) {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: wrap !important;
  }
  .club-page-wide .wp-block-columns > .wp-block-column,
  .club-page-wide .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
    flex-basis: 100% !important;
    flex-grow: 0 !important;
    width: 100% !important;
  }
}

@media (max-width: 1000px) {
  /* カラムを縦積みに強制（is-not-stacked-on-mobile 設定に関わらず） */
  .club-page-wide .wp-block-columns {
    flex-direction: column;
  }
  .club-page-wide .wp-block-column {
    flex-basis: 100% !important;
    width: 100%;
    min-width: 0;
    padding-inline: 0;
    box-sizing: border-box;
  }
}


/* ========================================
   Featured cover
   [featured_cover]
======================================== */

.club-featured-cover {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-bottom: 40px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  border-radius: 0;
}

.club-featured-cover__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 1;
}

.club-featured-cover__content {
  position: relative;
  z-index: 2;
  width: min(100% - 40px, 1000px);
  text-align: center;
}

.club-featured-cover__title {
  margin: 0;
  color: #fff;
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1.2;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

@media (max-width: 1000px) {
  .club-featured-cover {
    border-radius: 0;
    margin-bottom: 28px;
  }
}


/* ========================================
   Club nav
   [club_nav]
======================================== */

.club-page-wide .club-nav-summary {
  display: block !important;
  margin: 0;
}

.club-page-wide .club-nav-summary .summary-unit {
  width: 100% !important;
  max-width: none !important;
  margin-bottom: 24px;
  float: none !important;
}

.club-page-wide .club-nav-summary .summary-unit:last-child {
  margin-bottom: 0;
}

.club-page-wide .club-nav-summary .summary-item {
  background: #fff;
  border-radius: 14px;
  padding: 0 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.club-page-wide .club-nav-summary .item-title--club {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.4;
}

.club-page-wide .club-nav-summary .item-title--club .en {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  opacity: 0.7;
}

.club-page-wide .club-nav-summary .athletic-unit {
  list-style: none;
  margin: 0;
  padding: 0;
}

.club-page-wide .club-nav-summary .athletic-unit li {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #eee;
}

.club-page-wide .club-nav-summary .athletic-unit li:last-child {
  border-bottom: none;
}

.club-page-wide .club-nav-summary .athletic-unit a {
  display: flex;
  align-items: center;
  gap: 0.55em;
  padding: 10px 4px;
  line-height: 1.5;
  text-decoration: none;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.club-page-wide .club-nav-summary .athletic-unit a::before {
  flex: 0 0 auto;
}

@media (max-width: 1000px) {
  .club-page-wide .club-nav-summary .summary-unit {
    margin-bottom: 18px;
  }

  .club-page-wide .club-nav-summary .summary-item {
    padding: 0 !important;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
  }

  .club-page-wide .club-nav-summary .item-title--club {
    margin: 0 0 10px;
    font-size: 1rem;
  }

  .club-page-wide .club-nav-summary .item-title--club .en {
    display: inline-block;
    margin-right: 0.4em;
    font-size: 0.72rem;
  }

  .club-page-wide .club-nav-summary .athletic-unit {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    padding: 2px 2px 10px !important;
    margin: 0 !important;
    white-space: nowrap;
    scrollbar-width: thin;
  }

  .club-page-wide .club-nav-summary .athletic-unit li {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: none !important;
    float: none !important;
    clear: none !important;
  }

  .club-page-wide .club-nav-summary .athletic-unit a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    width: auto !important;
    padding: 7px 14px !important;
    border: 1px solid #d8dde6;
    border-radius: 999px;
    background: #fff;
    color: #222;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  }

  .club-page-wide .club-nav-summary .athletic-unit a:hover,
  .club-page-wide .club-nav-summary .athletic-unit a:focus-visible {
    background: #f5f7fb;
    border-color: #b8c2d6;
    text-decoration: none;
  }

  .club-page-wide .club-nav-summary .athletic-unit a::before,
  .club-page-wide .club-nav-summary .athletic-unit a::after {
    display: none !important;
    content: none !important;
  }

  .club-page-wide .club-nav-summary .athletic-unit a > *,
  .club-page-wide .club-nav-summary .athletic-unit span,
  .club-page-wide .club-nav-summary .athletic-unit .nav-item-en,
  .club-page-wide .club-nav-summary .athletic-unit .nav-item-ja,
  .club-page-wide .club-nav-summary .athletic-unit .sub {
    margin: 0 !important;
    padding: 0 !important;
  }
}


/* ========================================
   Club reports
   [club_reports]
======================================== */

@media (max-width: 1000px) {
  .club-page-wide .club-list-item {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 14px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    padding: 4px 4px 14px !important;
    margin: 0 !important;
    list-style: none !important;
    scroll-snap-type: x mandatory;
  }

  .club-page-wide .club-list-item > li {
    flex: 0 0 78% !important;
    max-width: 300px;
    width: auto !important;
    float: none !important;
    clear: none !important;
    margin: 0 !important;
    padding: 0 !important;
    scroll-snap-align: start;
  }

  .club-page-wide .club-list-item .club-anchor {
    display: block !important;
    height: 100%;
    background: #fff;
    border-radius: 0;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
  }

  .club-page-wide .club-list-item .club-list-figure {
    margin: 0 !important;
  }

  .club-page-wide .club-list-item .club-list-figure img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  .club-page-wide .club-list-item .club-list-date {
    display: block;
    padding: 12px 14px 4px;
    font-size: 0.78rem;
    opacity: 0.75;
  }

  .club-page-wide .club-list-item .club-list-title {
    display: block;
    padding: 0 14px 14px;
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.5;
    color: inherit;
  }
}

/* club_reports 全幅コンテナ
   template-club-page.php が2カラムセクションの外・#main直下に出力するコンテナ
   PC(≥1001px): 4カラム横並び
   SP(≤1000px): 2カラム横並び・既存横スクロールを上書き
======================================== */

.club-reports-full-width {
  width: 100%;
  padding: 40px 0;
  box-sizing: border-box;
}

.club-reports-full-width .club-list-item {
  padding-left: 0;
}

.club-reports-full-width .club-list-item > li {
  width: 25%;
  margin-bottom: 32px;
}

@media (max-width: 1000px) {
  .club-reports-full-width {
    padding: 32px 0;
  }

  /* 横スクロール上書き → 2カラム折り返し */
  .club-reports-full-width .club-list-item {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    scroll-snap-type: none !important;
    gap: 0 !important;
    padding: 0 !important;
  }

  .club-reports-full-width .club-list-item > li {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
    margin-bottom: 16px !important;
    scroll-snap-align: none !important;
    padding: 6px !important;
    box-sizing: border-box !important;
  }
}

/* SP: クラブ一覧（右カラム）をローカルナビ直下（コンテンツより前）に移動 */
@media (max-width: 1000px) {
  .club-page-wide .wp-block-columns > .wp-block-column:last-child {
    order: -1;
  }

  .club-page-wide .wp-block-columns > .wp-block-column:first-child {
    order: 0;
  }
}

/* club_profile：ラベル下部の余白ずれ対策 */
.club-profile-row {
  align-items: stretch;
}

.club-profile-row dt,
.club-profile-row dd {
  min-height: 0;
  box-sizing: border-box;
}

.club-profile-row dt {
  margin: 0 !important;
  height: auto !important;
  align-self: stretch;
}

.club-profile-row dt::before,
.club-profile-row dt::after {
  display: none !important;
  content: none !important;
}

.club-profile-row dd {
  margin: 0 !important;
  height: auto !important;
}

/* --- Drawer Menu Close Button --- */
.menu-close {
    position: absolute !important;
    /* 見出し「MENU」と高さを揃える。
       この要素は padding 15px + font-size 28px で高さ58pxあり、
       見た目の中心は top+29px。ドロワーの上余白（32px）に置かれる
       見出しの中心が 42.5px なので、top は 14px。
       ドロワー側の padding を変えたらこの値も直すこと。 */
    top: 14px !important;
    right: 15px !important; /* 右端位置も 30px から 15px に微調整 */
    background: transparent !important;
    border: none !important;
    font-size: 2.8rem !important;
    font-weight: 300 !important;
    color: #888888 !important;
    cursor: pointer !important;
    z-index: 3500 !important; /* z-indexを3500に引き上げ、ヘッダーより最前面に配置 */
    line-height: 1 !important;
    padding: 15px !important; /* タップの当たり判定（領域）を上下左右に15px拡大 */
    display: inline-block !important;
    pointer-events: auto !important; /* タッチイベントを確実に受け取る */
}

.menu-close:hover {
    color: var(--student-orange) !important;
    transform: rotate(90deg) !important;
}

/* ==================================================
   WordPress コアブロックのレイアウト・中央寄せフォールバック

   この節はレイアウトCSSがフロントに出力されなかった時代の後付け。
   段階1（5628ca2）でコアが .wp-container-* のCSSを出すようになったため、
   大半が不要になった。

   実測で不要と確認できたものを削除した（削除した規則は git 履歴を参照）。
   測定は 6ページ × 2画面幅 の全10通り。規則を1つずつ無効化して
   body配下の全要素の位置とサイズを比較し、一度も差が出なかったものを消した。

     トップ / クラブ一覧 / アクセス / 合格実績 / 記事 / アーカイブ
     × 375px・1440px

   残した規則は、そのいずれかで実際に効いていたもの。
   本来はこれらもコアに任せたいが、消すと表示が変わるため保留している。
================================================== */

/* 横積み(Row)の配置方向・水平位置。トップページで実際に効いている */
.is-layout-flex.is-horizontal {
    flex-direction: row;
}
.is-layout-flex.is-content-justification-left {
    justify-content: flex-start;
}
.is-layout-flex.is-content-justification-right {
    justify-content: flex-end;
}
.is-layout-flex.is-content-justification-space-between {
    justify-content: space-between;
}

/* 【削除済み】すべてのフレックスコンテナに無条件で当たる規則だった。

       .is-layout-flex { align-items: stretch; }

   段階2で引退させた gakkan_fix_block_layout_styles() の
   「縦積みは stretch」と同じ発想の後付けで、エディタで垂直配置を
   変えても効かない原因になりうるため外した。

   外したときの影響は実測で以下のみ。いずれもレイアウトの崩れではなく、
   不自然に引き伸ばされていたものが本来の大きさに戻る変化だった。
     375px  : 6要素（Instagramのソーシャルリンクが18px縮む）
     1440px : 上記＋ヒーローの矢印が4px上へ

   以前は区切り線（is-style-wide）がこの規則に依存していたが、
   エディタで「既定（100px固定）」に変更されたため依存は解消済み。
   幅広の区切り線をフレックス配下で使うと 0px に潰れる点だけ注意
   （対処法は style.css の「フレックス配下の『幅広』区切り線」節を参照）。 */

/* 垂直配置「上揃え」。トップページで実際に効いている */
.is-layout-flex.is-vertically-aligned-top,
.is-layout-flex.are-vertically-aligned-top {
    align-items: flex-start !important;
}


/* 4. 一般テキスト（段落・見出し）の中央寄せ
      → 【引退】レイアウトCSSが出力されなかった時代のフォールバック。
        段階1（5628ca2）でコアが `:root .has-text-align-center` を
        出力するようになったため不要になった。

        むしろ有効なままだと害があった。`!important` かつ詳細度が
        `.text-center-block`（スマホで左揃えにするクラス）と同じため、
        記述順だけで勝ってしまい、スマホの左揃えが効かなくなっていた。

        外しても中央揃えが保たれることは本番で確認済み。
        スマホ375px幅で20要素、PC1440px幅で26要素がすべて中央のまま、
        .text-center-block の6要素だけが左揃えになった。

.has-text-align-center {
    text-align: center !important;
}
*/

/* 5. アコーディオンブロックの表示微調整
   タイトル（トグルボタン）およびその内部テキスト・リンクの下線を強制解除 */
.wp-block-accordion-heading__toggle,
.wp-block-accordion-heading__toggle * {
    text-decoration: none !important;
}

/* --- アイコンの変更設定 --- */

/* パターンA: アイコンをきれいな矢印（右向き ＞ 下向きに回転）に変更する場合 */
.wp-block-accordion-heading__toggle-icon,
.wp-block-accordion-heading__toggle[aria-expanded="true"] .wp-block-accordion-heading__toggle-icon {
    font-size: 0 !important; /* 元の「+」「×」文字を消す */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    position: relative !important;
    margin-right: 12px !important; /* タイトルとの隙間 */
    transform: none !important; /* プラグイン側でのアイコン全体の回転（+ から × への回転など）を無効化 */
}


/* 矢印（シェブロン）をCSSで作成 */
.wp-block-accordion-heading__toggle-icon::before {
    content: "" !important;
    display: block !important;
    width: 6px !important;
    height: 6px !important;
    border-right: 2px solid currentColor !important;
    border-bottom: 2px solid currentColor !important;
    transform: rotate(-45deg) !important; /* 閉じている時は右向き */
    transition: transform 0.25s ease-in-out !important;
}

/* 開いている時（aria-expanded="true"）は下向きに回転 */
.wp-block-accordion-heading__toggle[aria-expanded="true"] .wp-block-accordion-heading__toggle-icon::before {
    transform: rotate(45deg) !important;
}

/* パターンB: アイコンを完全に非表示にしたい場合（有効化するには以下のコメントアウトを外してください） */
/*
.wp-block-accordion-heading__toggle-icon {
    display: none !important;
}
*/

/* --- パネル開閉のアニメーション設定 --- */

/* 閉じた状態（hidden属性があるか、または直前のボタンがaria-expanded="false"の場合） */
.wp-block-accordion-panel[hidden],
.wp-block-accordion-heading:has(button[aria-expanded="false"]) + .wp-block-accordion-panel {
    display: block !important;
    max-height: 0 !important;
    opacity: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    overflow: hidden !important;
    border-top-width: 0 !important;
    border-bottom-width: 0 !important;
}

/* 開いた状態 */
.wp-block-accordion-panel {
    display: block !important;
    max-height: 1000px !important; /* 十分な高さを確保（コンテンツに合わせて調整） */
    opacity: 1 !important;
    overflow: hidden !important;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease-in-out, padding 0.4s ease-in-out, margin 0.4s ease-in-out !important;
}

/* 6. 横並び（Row）ブロック内の子要素の幅を均等に揃えるヘルパークラス
   親の横並びブロックの「追加 CSS クラス」に「equal-width-columns」を指定すると適用されます */
.is-layout-flex.equal-width-columns > * {
    flex: 1 1 0% !important;
    min-width: 0 !important; /* コンテンツのはみ出しによる幅のばらつきを防ぐ */
}




/* ==================================================

   寄付ページ用 スクロール追従「寄付する」ボタン
   functions.php の gakkan_floating_donate_button() が出力。
   下部中央に常時表示。ヒーローの寄付ボタン色(#cf2e2e)に合わせる。
================================================== */
.gakkan-donate-float {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(16px);
    z-index: 9990;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 12px 64px;
    min-width: 280px;
    background: #cf2e2e;
    color: #fff !important;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    border-radius: 999px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s, box-shadow 0.2s ease, background 0.2s ease;
}
/* スクロールで出現（JSが .is-visible を付与）。ヒーローと被らないための制御 */
.gakkan-donate-float.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.gakkan-donate-float.is-visible:hover,
.gakkan-donate-float.is-visible:focus-visible {
    background: #b32626;
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
    color: #fff !important;
    text-decoration: none;
}
.gakkan-donate-float__label {
    font-weight: 700;
    font-size: 16px;
}
.gakkan-donate-float__note {
    font-size: 11px;
    font-weight: 400;
    opacity: 0.85;
    letter-spacing: 0.03em;
}

/* 寄付ページでは既存の追従CTAタブ(学校説明会/採用情報)を隠し、寄付ボタンに集約する */
body.donation-page #floating-cta-container {
    display: none !important;
}

/* スマホ:寄付ページでは下部固定バーを隠しているため、下部に配置 */
@media (max-width: 768px) {
    .gakkan-donate-float {
        bottom: 20px;
        padding: 10px 40px;
        min-width: 220px;
    }
    .gakkan-donate-float__label {
        font-size: 15px;
    }
}

/* 寄付進捗バー [donation_progress] のスタイルは Code Snippets のスニペット内に同梱。
   （ショートコード本体を Code Snippets で管理しているため、CSS もそちらに集約） */

/* ==================================================
   ページ下部コンテンツとフッターの間の隙間を解消
================================================== */
.site-main,
.site-content,
article,
.entry-content,
.post-content {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* ページ最下部にあるブロックの余計な下部マージンを除去

   【削除済み】ここにあった `padding-bottom: 0 !important;`

   コメントは「下部マージンを除去」なのに padding まで消していた。
   セレクタが3階層ぶんの :last-child なので「ページ最下部」に限らず、
   **どの入れ子の末尾要素でもエディタの下余白が潰れる**。

   実害: 20ページ・35か所でエディタ指定の padding-bottom が0になっていた。
   例）在校生・保護者向けページのボタン4つが 上8px / 下0px の非対称。

   CSSOMから padding-bottom だけを外して実測したところ、
   ボタンは上下8pxの対称に戻り（高さ30→38px）、
   この規則の本来の目的である**フッターとの隙間は0pxのまま**だった。
   つまり padding-bottom は最初から不要だった。

   下の余白が余ると感じたときは、ここに !important を足すのではなく
   エディタ側の設定を疑うこと（第22-5節・第24節）。 */
.entry-content > *:last-child,
.entry-content > * > *:last-child,
.entry-content > * > * > *:last-child {
    margin-bottom: 0 !important;
}

/* 本文とフッターの間の余白。
   --------------------------------------------------------------------------
   既定はフッター直付け（margin-top: 0）。これは新校舎ページ（.donation-page）で
   「最後のセクションとフッターの間に余白を作らない」ためにユーザーが指示した
   仕様で、上の方にある #colophon { margin-top: 80px } を打ち消している。
   直付けにしたいページが他にもあるので、既定側を 0 のままにしてある。

   ただしアーカイブ（archive.php を使うページ）では余白が要る。
   フッターは背景 #1a1a1a の黒帯なので、余白が無いとお知らせ一覧のすぐ下から
   黒が始まってしまう。実測（/examinee/ /club/）でフッターとのすき間は10pxだった。

   そこでアーカイブにだけ余白を戻す。スマホは画面が狭いので 48px に抑える。
   実測（適用後）: /examinee/ PC 1600px で 80px・SP 390px で 48px、
   新校舎ページとトップページは 0px のまま変化なし。

   記事ページ（single.php）も同じ状態だったので、あわせて対象にした。
   一覧と記事で見た目が揃う。 */
#colophon {
    margin-top: 0 !important;
}

body.archive #colophon,
body.single #colophon {
    margin-top: 80px !important;
}

@media screen and (max-width: 768px) {
    body.archive #colophon,
    body.single #colophon {
        margin-top: 48px !important;
    }
}

/* 段落、見出し、リスト、グループ、本文エリア全般の中のリンク下線を非表示にする */
p a,
li a,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
.wp-block-paragraph a,
.wp-block-group a,
.entry-content a,
.post-content a {
    text-decoration: none !important;
}


/* ----------------------------------------
   教育方針の裏づけセクション（[tg_evidence]）
   主張のすぐ隣に既存記事を並べるための小さなカード列。
   本文の流れを止めないよう、見出しより一段弱いトーンに寄せている。
---------------------------------------- */

.tg-evidence {
  margin: 2rem 0 0;
}

.tg-evidence__heading {
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: #14213d;
  margin: 0 0 1rem;
  padding-left: .7rem;
  border-left: 3px solid #0099d9;
}

.tg-evidence__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tg-evidence__item {
  margin: 0;
}

.tg-evidence__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid #e3e8ef;
  border-radius: 10px;
  overflow: hidden;
  color: inherit;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.tg-evidence__link:hover,
.tg-evidence__link:focus-visible {
  border-color: #0099d9;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(20, 33, 61, .1);
}

.tg-evidence__figure {
  display: block;
  aspect-ratio: 16 / 9;
  background: #f5f7fa;
  overflow: hidden;
}

.tg-evidence__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tg-evidence__body {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: .85rem 1rem 1.1rem;
}

.tg-evidence__date {
  /* 1rem = 10px。以前の .78rem は 12.5px のつもりで書かれていたが
     実測7.8pxで判読が困難だった */
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: #0099d9;
}

.tg-evidence__title {
  /* 同上。以前の .92rem は実測9.2px */
  font-size: 1.5rem;
  line-height: 1.65;
  font-weight: 500;
  color: #222;
}

.tg-evidence__more {
  display: inline-block;
  margin-top: 1.1rem;
  font-size: .88rem;
  font-weight: 700;
  color: #0099d9;
}

.tg-evidence__more::after {
  content: "→";
  margin-left: .4em;
}

@media (max-width: 600px) {
  .tg-evidence__list {
    grid-template-columns: 1fr;
    gap: .9rem;
  }

  /* スマホでは縦積みが冗長になるため、画像を左に寄せた横並びにする */
  .tg-evidence__link {
    flex-direction: row;
    align-items: stretch;
  }

  .tg-evidence__figure {
    flex: 0 0 34%;
    aspect-ratio: auto;
  }

  .tg-evidence__body {
    flex: 1 1 auto;
    padding: .7rem .9rem;
  }
}

/* ==========================================================================
   PCヘッダー内ナビ（.tg-header-nav）
   --------------------------------------------------------------------------
   ドロワー #site-navigation とは独立した要素。ドロワー側のCSSは
   すべて !important かつメディアクエリ外にあるため、同じ要素を
   PC/SPで切り替えるのは避け、PC専用の要素を別に用意している。
   既定は非表示なので、スマホの表示には一切影響しない。
   項目は 管理画面 → 外観 → メニュー →「PCヘッダー（3〜5項目・PC専用）」で設定する。
   ========================================================================== */
.tg-header-nav {
    display: none;
}

@media screen and (min-width: 1025px) {
    .tg-header-nav {
        display: block;
        margin-left: auto;  /* ロゴとの間を空け、ハンバーガーの隣に寄せる */
        margin-right: 20px;
    }

    .tg-header-nav ul {
        display: flex;
        align-items: center;
        gap: 4px;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .tg-header-nav li {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .tg-header-nav a {
        display: block;
        position: relative;
        /* 継承任せにせず明示する（本文側に Noto Sans JP を含まない
           古い font-family 指定が残っているため） */
        font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, Osaka, sans-serif;
        padding: 10px 14px;
        /* このサイトは html { font-size: 62.5% } のため 1rem = 10px。
           1.5rem = 15px（0.95rem と書くと 9.5px になるので注意） */
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 1.4;
        color: var(--primary-blue);
        text-decoration: none;
        white-space: nowrap;
        transition: color 0.3s ease;
    }

    /* ドロワーと同じ、下線がのびるホバー */
    .tg-header-nav a::after {
        content: '';
        position: absolute;
        left: 14px;
        right: 14px;
        bottom: 4px;
        height: 3px;
        background-color: var(--student-orange);
        transform: scaleX(0);
        transform-origin: center;
        transition: transform 0.3s ease;
    }

    .tg-header-nav a:hover {
        color: var(--student-orange);
    }

    .tg-header-nav a:hover::after {
        transform: scaleX(1);
    }

    /* 現在地のハイライト。
       以前は文字色をオレンジにしていたが読みづらかったため、
       文字は通常色（紺／透過時は白）のままにして、ホバーと同じ
       オレンジの下線を常時表示する方式に変えた。太字で補強する。
       ホバーは「下線がのびる動き」、現在地は「下線が出たまま静止」で
       意味が区別できる。 */
    .tg-header-nav li.current-menu-item > a {
        font-weight: 900;
    }

    .tg-header-nav li.current-menu-item > a::after {
        transform: scaleX(1);
    }

    /* カスタムリンク（アンカー付き。例: コース紹介 → /#courses）は
       current 表示の対象外にする。
       リンク先がトップページなので、トップを開いている間ずっと
       current-menu-item と判定され、常にハイライトされてしまうため。
       固定ページ項目（menu-item-object-page）の current 表示は残す。

       上の current 用スタイル（太字＋下線）を通常状態に戻す。 */
    .tg-header-nav li.menu-item-object-custom.current-menu-item > a {
        font-weight: 700;
    }

    /* :not(:hover) で限定しないと、この規則（詳細度 0,4,3）が
       ホバー規則 .tg-header-nav a:hover::after（0,3,2）より強いため、
       カスタムリンク項目だけホバーしても下線が出なくなる。 */
    .tg-header-nav li.menu-item-object-custom.current-menu-item > a:not(:hover)::after {
        transform: scaleX(0);
    }

    /* メニュー項目の「CSSクラス」欄に is-cta と入れるとボタンになる。
       説明会予約など、1項目だけに付けること */
    .tg-header-nav li.is-cta a {
        margin-left: 8px;
        padding: 12px 22px;
        border-radius: 999px;
        background-color: var(--student-orange);
        color: #ffffff;
        transition: opacity 0.3s ease;
    }

    .tg-header-nav li.is-cta a::after {
        display: none;
    }

    .tg-header-nav li.is-cta a:hover,
    .tg-header-nav li.is-cta.current-menu-item > a {
        color: #ffffff;
        opacity: 0.85;
    }
}

/* ==========================================================================
   トップページ: ヒーローに重なる透過ヘッダー
   --------------------------------------------------------------------------
   最上部ではヘッダーを透過させてヒーローに重ね、スクロールすると
   従来どおりの白＋すりガラスに戻る。

   スコープは body.home（＝WPがトップページにだけ付けるクラス）。
   かつては header.php が body_class('basic2 home') で全ページに home を
   付けており .home がフロント判定に使えなかったが、これは削除済み。
   basic2 はCSSルールが1つも無い完全な死にクラスだった（HPBの名残）。

   透過は .at-hero-top が付いているときだけ。理由は header-scroll.js の
   コメントを参照（JS実行前に白背景へ白ロゴが出るのを防ぐため）。
   ========================================================================== */

/* ヒーローをヘッダーの下に潜り込ませる */
body.home {
    padding-top: 0 !important;
}

/* 切り替えを滑らかに */
#masthead,
#site-branding .site-title,
.hamburger span,
.tg-header-nav a {
    transition: background-color 0.3s ease, box-shadow 0.3s ease,
                border-color 0.3s ease, filter 0.3s ease, color 0.3s ease;
}

body.home.at-hero-top #masthead {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border-top-color: transparent !important;
    border-bottom-color: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* 明るい映像の上でも白文字が読めるよう暗い幕を敷く。
   ヘッダー(84px)より高い160pxにして下へ抜けさせているのは、
   ヘッダーの下端に幕の境目が線として出るのを避けるため。

   濃度の根拠（実測）:
   背景動画のヘッダー帯の輝度は 60〜192 の範囲で変動する（最も明るいのは20秒付近）。
   ヒーロー側の黒10%オーバーレイを通した実効輝度は最大 173。
   白文字で WCAG AA (4.5:1) を満たすには実効輝度を118以下にする必要があり、
   文字の位置(上から約42px)で必要な不透明度は約0.32。
   下記は同位置で約0.37となり、コントラスト比 約5.1:1 を確保できる。
   数値を下げるとAAを割るので注意。 */
body.home.at-hero-top #masthead::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 160px;
    background: linear-gradient(to bottom,
                    rgba(0, 0, 0, 0.5) 0%,
                    rgba(0, 0, 0, 0) 100%);
    pointer-events: none; /* 幕がヒーローのボタンのクリックを奪わないように */
    z-index: -1;          /* ヘッダーの中身より背面へ */
}

/* ロゴは単色SVG（fill: #1a3060）の背景画像なので fill を変えられない。
   brightness(0) で真っ黒に潰してから invert(1) で白に反転させる */
body.home.at-hero-top #site-branding .site-title {
    filter: brightness(0) invert(1) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
}

body.home.at-hero-top .hamburger span {
    background-color: #ffffff !important;
}

body.home.at-hero-top .tg-header-nav a {
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* CTAボタンは透過時もオレンジのまま（見失わせないため） */
body.home.at-hero-top .tg-header-nav li.is-cta a {
    text-shadow: none;
}

/* ==========================================================================
   ページ内アンカーの着地位置
   --------------------------------------------------------------------------
   ヘッダーが position:fixed（PC 84px / SP 60px）のため、#policy などへ
   飛ぶと対象がヘッダーの真下に潜って見出しが読めない。
   scroll-margin-top で行き先の上に余白を確保する。
   数値はヘッダー高＋余裕ぶん。ヘッダーの高さを変えたらここも直すこと。
   ========================================================================== */
main [id],
:target {
    scroll-margin-top: 100px;
}

@media screen and (max-width: 768px) {
    main [id],
    :target {
        scroll-margin-top: 76px;
    }
}

/* 同一ページ内の移動をなめらかにする。
   視差や動きに酔いやすい利用者の設定は尊重する */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* ==========================================================================
   ヒーロー下端「本校の教育について」への入口
   functions.php の gakkan_hero_scroll_cue() が注入する
   ========================================================================== */
.tg-hero-cover {
    position: relative;
}

/* 可読性の確保について（背景を敷く理由と、その形の経緯）

   背景動画の下端中央の輝度は最大178、ヒーローの黒10%オーバーレイを
   通した実効値は160。素の白文字ではコントラスト比 約2.6:1 しかなく
   WCAG AA(4.5:1)に届かないため、背後を沈める必要がある。

   ここまでに2つ試して、どちらもやめた。
   1. ヒーロー下端に140pxの帯（linear-gradient）
      → 明るい映像の上では灰色の帯に見え、下端で白背景に突き当たって
        境目が線として出た
   2. 文字の背後に 260x120px の楕円（radial-gradient）
      → PCの寸法のまま固定値で書いたため、ヒーローが237pxしかない
        スマホでは横69%・縦51%を占め、25pxはみ出した部分が
        overflow:hidden で直線に切られて「箱」に見えた

   3. 文字に沿う半透明のピル（要素自身の背景・不透明度0.38）
      → 切れる問題は解決したが、箱が乗っている印象は残った
   4. 要素ごとの小さなにじみ（radial-gradient）
      → 箱ではなくなったが、要素単位で背景を持つ構造が扱いにくかった

   現在は「横線のアクセント＋全幅の下部グラデーション」。
   ヘッダー側（#masthead::before の上部グラデーション）と同じ考え方で、
   下端に対になる幕を置いている。

   **1の帯が灰色に見えた原因は、はみ出しではなく
   「一番濃い部分がヒーローの下端に来ていたこと」。**
   そこで白背景に突き当たるため、帯の輪郭が線として見えていた。
   現在は濃さのピークを文字の位置（下端から約26%）に置き、
   下端に向けて薄くしてある。これで境目に輪郭が出ない。

   **横線はあくまで装飾で、コントラストには寄与しない。**
   可読性はこのグラデーションと text-shadow が担う。
   文字位置の不透明度0.42で実効輝度160→93、コントラスト比 約6.6:1。
   **下端側の値（0.18）を上げると輪郭が出る。
     文字位置の値（0.42）を0.26未満にするとAAを割る。** */

.tg-hero-scroll {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    /* 縦積み（文字の下に矢印を中央揃え）。
       かつて縦積みが「箱」に見えたのは要素に背景（ピル）を持たせて
       いたためで、幕を全幅グラデーションに移した今は問題ない。 */
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px 0;
    color: #ffffff !important;
    text-decoration: none !important;
    /* main.normalize に Noto Sans JP を含まない古い font-family 指定が
       あり、放っておくとそれを継承してWindowsではMeiryoに落ちる。
       ここで明示する。 */
    font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, Osaka, sans-serif;
    font-size: 1.4rem; /* 1rem = 10px なので14px */
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.3;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 10px rgba(0, 0, 0, 0.5);
}

/* 全幅の下部グラデーション。可読性はこれと text-shadow が担う（上のコメント参照）。

   形の設計（「帯に見える」を避けるための構造）:

   - 下端(0%)は 0.18 と薄い。ここが濃いと白背景との境目に輪郭が
     線として出る（最初の実装の失敗）
   - 15%〜38% を 0.40 のプラトーにする。縦積みだと文字の位置が
     PC 30% / スマホ 33% とばらつくため、一点ピークだと外れる
   - 38%から上は 6段階かけて 0 まで長く落とす。フェード距離を
     十分に取らないと上辺が線として見え、これが「グレーの帯」の
     正体だった。全体を高くして薄く伸ばすほど陰影として自然になる

   高さは PC 170px / スマホ 130px（ヒーロー比 33% / 55%）。
   面積は増えるが、上辺が見えないので帯として認識されない。

   可読性: 文字位置の実効輝度は PC 181 / スマホ 177。
   不透明度0.40でコントラスト比 5.4〜5.5:1。
   **AAに必要な最低値は0.33〜0.35なので、これ以上下げる余地はない。** */
.tg-hero-cover::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 170px;
    background: linear-gradient(to top,
                    rgba(0, 0, 0, 0.18) 0%,
                    rgba(0, 0, 0, 0.40) 15%,
                    rgba(0, 0, 0, 0.40) 38%,
                    rgba(0, 0, 0, 0.30) 52%,
                    rgba(0, 0, 0, 0.18) 66%,
                    rgba(0, 0, 0, 0.08) 82%,
                    rgba(0, 0, 0, 0) 100%);
    pointer-events: none; /* ヒーロー内のクリックを奪わないように */
    z-index: 1;           /* 動画より前、入口(.tg-hero-scroll は z-index:2)より後ろ */
}

/* 横線のアクセント（装飾。視認性には寄与しない） */
.tg-hero-scroll__label {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tg-hero-scroll__label::before,
.tg-hero-scroll__label::after {
    content: '';
    display: block;
    width: 26px;
    height: 1px;
    background: rgba(255, 255, 255, 0.9);
}

.tg-hero-scroll:hover {
    color: #ffffff !important;
    opacity: .8;
}

.tg-hero-scroll__arrow::before {
    content: "\e5cf"; /* Material Icons expand_more */
    font-family: "Material Icons";
    font-size: 1.8rem;
    line-height: 1;
    display: block;
}

@media (prefers-reduced-motion: no-preference) {
    .tg-hero-scroll__arrow {
        animation: tg-hero-bounce 2s ease-in-out infinite;
    }

    @keyframes tg-hero-bounce {
        0%, 100% { transform: translateY(0); }
        50%      { transform: translateY(5px); }
    }
}

/* スマホはヒーローが237pxしかない（PCは520px）。
   同じ寸法のまま置くとヒーローに対して大きすぎるので、
   ピルも文字も一段小さくし、下端からも少し離す。 */
@media screen and (max-width: 768px) {
    .tg-hero-scroll {
        bottom: 14px;
        padding: 4px 0;
        font-size: 1.1rem;
    }

    /* ヒーローが237pxしかないので幕も低くする（PCは520pxに対して170px）。
       ただし低くしすぎるとフェード距離が足りず上辺が線として見える。
       130pxはヒーローの55%だが、上辺が見えないので帯にはならない。 */
    .tg-hero-cover::after {
        height: 130px;
    }

    .tg-hero-scroll__label {
        gap: 8px;
    }

    .tg-hero-scroll__label::before,
    .tg-hero-scroll__label::after {
        width: 18px;
    }

    .tg-hero-scroll__arrow::before {
        font-size: 1.6rem;
    }
}

/* ==========================================================================
   トップページの wrapper（.tg-front）に背景色を付けたときの横幅崩れ対策
   --------------------------------------------------------------------------
   ブロックエディタでグループに背景色を付けると、WordPressコアの

       :where(.wp-block-group.has-background) { padding: 1.25em 2.375em; }

   が効いて左右に 38px（2.375em）のパディングが入る。
   その結果 alignfull 以外の子（alignwide など）が両側38pxずつ内側に
   押し込まれ、「全幅が解除された」ように見える。
   実測: alignwide の子が 幅1400px/左13px → 幅1349px/左38px になる。

   alignfull の子は負のマージンで外へ出るため影響を受けない。
   崩れるのは alignwide 以下だけ、という点が分かりにくい。

   コアの規則は :where() なので詳細度0。下記で無害に打ち消せる。
   縦のパディングは残してあるので、背景に余白を付けたい場合は
   ブロックの「寸法」から指定できる。
   ========================================================================== */
.tg-front.has-background {
    padding-left: 0;
    padding-right: 0;
}

/* ==========================================================================
   フレックス配下の「幅広」区切り線が消える問題
   --------------------------------------------------------------------------
   区切りブロックの「幅広（is-style-wide）」は width:auto で全幅を表現する。
   ところがフレックスの子になると auto は「内容の幅」の意味に変わり、
   hr は中身を持たないため 0px に潰れる。
   エディタでは表示されるのにフロントで消える、という症状になる。
   （3つの教育方針セクションで発生。実測 幅0px → 435px）

   既定スタイル（is-style-default）は width:100px を持つので影響を受けない。
   実際、FEATURES / COURSES / CAREER の14本は正常だった。

   縦積みのフレックスに限定している。横並びの場合、align-self:stretch は
   交差軸＝縦方向に伸ばす意味になり、区切り線が縦に伸びてしまうため。

   --------------------------------------------------------------------------
   【削除済み】この規則は不要になったため外した。

   フォールバックの点検（6ページ × 2画面幅）で、この規則を無効化しても
   一度も表示が変わらなかった。`.is-layout-flex { align-items: stretch }`
   が同じ効果を先に出しているため。

   ただし依存関係は残っている。将来 `.is-layout-flex { align-items: stretch }`
   を外すときは、**区切り線が 0px に潰れないか必ず確認すること。**
   潰れる場合は下の規則を戻せばよい。

   .is-layout-flex.is-vertical > .wp-block-separator.is-style-wide {
       align-self: stretch;
   }
   ========================================================================== */

/* ==========================================================================
   セクションのスライド表示（トップページのPCのみ）
   --------------------------------------------------------------------------
   エディタでグループ／カバーのスタイルに「スライド（1画面）」を選ぶと、
   そのセクションが画面いっぱいの高さになり、スクロールが近づくと
   セクションの頭に吸い付く。JSは使わない。

   ■ PC（min-width:1025px）でだけ有効にしている理由
   スマホでは各セクションが縦に積まれて画面より高くなる（実測で
   COURSES が 375px幅で 224%＝2.2画面ぶん）。1画面に収まらないセクションに
   吸着を効かせると、下半分を読む前に次へ引っ張られて操作感が悪化する。
   PCは全セクションが 100% に収まっているので吸着が成立する。
   スマホは 100svh も含めて一切適用せず、普通に読めるようにする。

   ■ mandatory ではなく proximity にしている理由
   mandatory は「必ず」吸い付くため、想定外に高いセクションが混じると
   途中で止まれず読めなくなる。proximity（近づいたときだけ）が安全で、
   利用者の普通のスクロール感覚も壊さない。

   ■ scroll-snap-stop は付けない
   以前は always を付けていたが、勢いよくスクロールしても1回の操作で
   1セクションずつしか進まず「もっさり」して見えた。外して、
   何セクションでも一気にスクロールできるようにした。

   ■ 吸い付き先は html（＝実際にスクロールしている要素）
   #masthead が position:fixed なので、スクロール容器はルート。
   body に書いても効かない。body.home で絞れないため :has() を使う。

   ■ align-content を2行書いている理由
   safe 付きは「中身が画面より高いときは中央寄せをやめて上寄せにする」指定。
   これが無いと、高いセクションで上端が画面外へ追い出されて読めなくなる。
   safe を知らない古いブラウザは2行目を捨て、1行目の center が残る。

   ■ 100vh ではなく 100svh
   PCでもウィンドウの実高さに合わせるため svh を使う。
   ========================================================================== */

@media screen and (min-width: 1025px) {
    html:has(body.home) {
        scroll-snap-type: y proximity;
    }

    .home .is-style-slide {
        min-height: 100svh;
        scroll-snap-align: start;
        scroll-margin-top: 0;
        align-content: center;
        align-content: safe center;
    }

    /* 入れ子になったスライドは吸着先にしない。再発防止用。現在の該当は0件。

       この規則（`.home .is-style-slide`）は入れ子にも当たる。カバーと中の
       グループの両方に「スライド（1画面）」を付けると、min-height と吸着が
       二重に効き、ずれた位置に吸着点が2つ並んでページ末尾で競合する。

       2026-07-27 に「A BETTER ME」で実在し、80pxのはみ出しも起きていた。
       カバーの `overflow: hidden` がカバーをスクロールコンテナにしていたため
       内側の吸着が吸収され、表面化していなかった（第4節で hidden を削除）。
       **編集画面で内側のスタイルを外して解決済み。** ここは付け直されたときの
       保険。症状が幾何にも計算値にも出ず原因を追いにくいので残しておく。

       高さ（min-height）は切らない。0 にすると中身の高さがそのまま出て
       見た目が変わる。切るのは吸着だけでよい。 */
    .home .is-style-slide .is-style-slide {
        scroll-snap-align: none;
    }

    /* 動きに酔いやすい利用者の設定を尊重する。
       スクロールが勝手に動く挙動そのものを止める（高さの指定は残す）。 */
    @media (prefers-reduced-motion: reduce) {
        html:has(body.home) {
            scroll-snap-type: none;
        }
    }
}

/* スマホ・タブレット（〜1024px）ではスライドの 1画面高さを緩める。
   「スライド（1画面）」を選んだセクションはカバーブロックで、
   min-height:100vh がブロックのインラインstyleに直接入っている。
   これはPCで1画面に見せるための指定だが、スマホでは
   ・中身が少ないセクションが間延びする
   ・中身が多いセクション（COURSES 等）は 100vh を超えて伸び、
     どのみち1画面に収まらない
   ため、そのままでは合わない。
   インライン指定を打ち消すので !important を使う。対象は
   .home .is-style-slide に限定しているので影響範囲は明確。
   PC側の 100svh は min-width:1025px、こちらは max-width:1024px で
   幅の範囲が重ならないため、両者が競合することはない。

   ■ 高さは 100svh のまま（0 にしない）
   一度 min-height:0 にしたことがあるが、それだと中身の高さがそのまま
   セクションの高さになる。実測（375×812）で影響を受けるのは中身が
   1画面に満たない2つだけで、
     SCHOOL LIFE      812 → 432px
     学校説明会CTA     812 → 396px
   他の4つ（policy / features / courses / career）は中身が812pxを超えて
   いるので、この規則の有無にかかわらず高さは変わらない。
   問題は SCHOOL LIFE が背景動画（object-fit:cover）のセクションであること。
   432px だと動画が横長の帯に切り取られ、文字がほぼ埋めてしまう。
   見た目の判断として全画面のほうが良いため 100svh に戻した。

   吸着（scroll-snap）と高さは別物。スマホで吸着をやめるのに高さまで
   捨てる必要はないので、ここでは高さだけ残している。

   ■ インラインの 100vh をそのまま使わず 100svh で上書きする理由
   スマホのブラウザは下部ツールバーの分だけ 100vh が実際の表示領域より
   大きくなる。svh はツールバーを表示した状態の高さなので、はみ出さない。 */
@media screen and (max-width: 1024px) {
    .home .is-style-slide {
        /* svh 非対応の古いブラウザは1行目を採用する（＝インラインと同じ挙動）。 */
        min-height: 100vh !important;
        min-height: 100svh !important;
    }
}

/* ==========================================================================
   余白プリセットの互換定義（旧スラッグ 20 / 30 / 70）
   --------------------------------------------------------------------------
   エディタに出す段階は theme.json 側で5つに絞った（なし/8/24/40/64px）。
   ところが過去に作られた記事は、今は無い段階を参照している。

   | スラッグ | 参照数 | ページ数 |
   |---|---|---|
   | 20 | 4  | 2 |
   | 30 | 8  | 2 |
   | 70 | 19 | 3 |

   theme.json から消すとこの31か所の変数が未定義になり、
   「値が無効 → 余白が0」になって当該ページのレイアウトが崩れる。
   ここで値だけ与えて延命する。エディタの選択肢には出ない。

   【順序に依存している】
   theme.json が定義しなくなったスラッグでも、WordPress はコア既定の値
   （20=0.44rem / 30=0.67rem / 70=3.38rem）を global-styles に出し続ける。
   同じ :root どうしなので、後に読まれた方が勝つ。

   実測（本番のhead内）: global-styles が4番目、style.css が6番目。
   **style.css が後なのでこの定義が勝つ。**
   読み込み順を入れ替えるとコア既定の rem 値に戻り、
   `html { font-size: 62.5% }` のせいで意図の37.5%に縮む。第24節を参照。

   【なぜ「中 24px」が slug 30 で、ここに 60 があるのか】
   エディタのスペーシング選択肢は**スラッグ番号順に並べ替えられる**。
   配列をサイズ順にしても、番号が飛んでいると並びが狂う。
   実際、中(24px)を slug 60 に置いたとき、エディタ上で
   「特大 64px」より後ろに送られて選べなくなった。

   そこで theme.json 側は番号順＝サイズ順になる slug だけで組んである。

       slug  0 → 0px    なし
       slug 10 → 8px    小
       slug 30 → 24px   中
       slug 40 → 40px   大
       slug 50 → 64px   特大

   ここに残した 20 / 60 / 70 は既存記事が参照しているだけの互換用。
   **theme.json に足すと並びが壊れるので、必ずこちら側に置くこと。**

   【将来の掃除】この3つを参照する記事を全てエディタで選び直したら、
   このブロックごと削除してよい。参照の有無は各ページのHTMLを
   `var(--wp--preset--spacing--60)` で検索すれば確認できる。
   ========================================================================== */

:root {
    --wp--preset--spacing--20: 16px;
    --wp--preset--spacing--60: 24px;
    --wp--preset--spacing--70: 32px;
}