/* ==========================================================================
   近くの教室を探す（[school_search_section]）の共通の見た目（2026-10-30 新規）
   料金（page-tuition.php）・コース3ページ（page-elementary／junior-high／high.php）・Q&A（page-campus-faq.php）で、
   テンプレートの <section class="kc-near-sec"> の中に置いた部品に当てる。読み込みは functions.php の「料金・コース・Q&A」ブロック。
   値は TOP（front-page.css の .front-page-near）の最終形と同じ：
   見出しは緑の文字のみ（下線なし）・「全国約370校！」なし・見出し→ボタン→カード各32px・
   現在地ボタンは /school/・エリアページと同じ深緑のグラデーション＋影（ふち無し）・PC4列で最大1000px・SPは3列で矢印なし・背景ミント #F0F8F5。
   TOP・/result/・/test/ はそれぞれのCSSのまま（このファイルは読まない）。
   ========================================================================== */
.kc-near-sec {
    padding: 40px 16px;
    background: #F0F8F5;
    box-shadow: 0 0 0 100vmax #F0F8F5;
    clip-path: inset(0 -100vmax);
}
.kc-near-sec .kc-near { max-width: 1000px; margin: 0 auto; text-align: center; }
.kc-near-sec h2.kc-near__label {
    position: static;
    margin: 0 0 32px;
    padding: 0;
    background: none;
    border: 0;
    color: #006039;
    font-family: "Noto Sans JP", sans-serif;
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: 0.04em;
    text-align: center;
}
.kc-near-sec h2.kc-near__label::before,
.kc-near-sec h2.kc-near__label::after { content: none; display: none; }
.kc-near-sec .kc-near__sub { display: none; }
.kc-near-sec .kc-near .kc-near__gps {
    min-height: 60px;
    margin: 0 auto 32px;
    font-size: 19px;
    gap: 10px;
    background: linear-gradient(to bottom, #135F38 0%, #004D26 50%);
    border: 0;
    color: #fff;
    box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.2);
    transition: filter 0.15s ease;
}
.kc-near-sec .kc-near .kc-near__gps:hover {
    background: linear-gradient(to bottom, #135F38 0%, #004D26 50%);
    color: #fff;
    filter: brightness(1.15);
}
.kc-near-sec .kc-near .kc-near__gps svg { width: 24px; height: 24px; }
.kc-near-sec ul.kc-near__grid {
    list-style: none;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}
.kc-near-sec ul.kc-near__grid > li { list-style: none; margin: 0; padding: 0; }
.kc-near-sec ul.kc-near__grid > li::before { content: none; display: none; }
.kc-near-sec a.kc-near__btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 18px 10px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 0 4px rgba(0, 0, 0, .05);
    text-decoration: none;
    transition: box-shadow .2s ease, transform .15s ease;
}
@media (hover: hover) {
    .kc-near-sec a.kc-near__btn:hover { box-shadow: 0 2px 8px rgba(0, 77, 44, .15); transform: translateY(-1px); }
}
.kc-near-sec .kc-near__name { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 20px; line-height: 1; color: #004D2C; white-space: nowrap; }
.kc-near-sec .kc-near__chev {
    position: absolute;
    right: 18px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-top: 2px solid #004D2C;
    border-right: 2px solid #004D2C;
    transform: translateY(-50%) rotate(45deg);
}
@media (max-width: 959px) {
    .kc-near-sec { padding: 32px 16px; }
    .kc-near-sec .kc-near .kc-near__gps { width: 100%; min-width: 0; min-height: 0; padding: 15px 16px; font-size: 15px; gap: 8px; }
    .kc-near-sec .kc-near .kc-near__gps svg { width: 18px; height: 18px; }
    .kc-near-sec .kc-near__gps-pc { display: none; }
    .kc-near-sec ul.kc-near__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 6px; }
    .kc-near-sec a.kc-near__btn { padding: 14px 6px; }
    .kc-near-sec .kc-near__name { font-size: 16px; }
    .kc-near-sec .kc-near__chev { display: none; }
}

/* 下の余白を消す（2026-10-30 ユーザー指摘：料金ページでCTAとのあいだに白い帯が出た）。
   本文のブロックに付く下の余白が残っていた。料金ページの旧セクションには page-tuition.css で
   .prefecture-section:has(+ .cta-banner--plan) { margin-bottom: 0 } を当てていたが、新しいセクションは名前が違うので効かない。
   直後のCTAの帯とすき間なくつなげる（コース3ページも同じ並び）。 */
.post_content > section.kc-near-sec,
.page-wrapper section.kc-near-sec,
section.kc-near-sec {
    margin-top: 0;
    margin-bottom: 0;
}