/* ==========================================================================
   学校サーチ 共通デザイン (site.css)
   デザイン方針: 公共・データ系の信頼感。フラット・単一アクセント・余白で整理。
   Tabler の上に読み込む前提。
   ========================================================================== */

/* ---- デザイントークン ---- */
:root {
    --school-ink: #1c2430;          /* 本文テキスト */
    --school-muted: #5c6b80;        /* 補足テキスト */
    --school-navy: #16305c;         /* ヘッダー・見出しアクセント */
    --school-primary: #2158a8;      /* リンク・ボタン */
    --school-primary-dark: #17427f;
    --school-surface: #ffffff;
    --school-bg: #f4f5f7;
    --school-border: #d9dee7;
    --school-soft: #eef2f7;         /* 薄い面（アイコン背景など） */
    --school-radius: 6px;
}

html { scroll-behavior: smooth; }

body {
    color: var(--school-ink);
    background: var(--school-bg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", Meiryo, sans-serif;
}

/* ---- ヘッダー ---- */
.site-header {
    color: #fff;
    border: 0;
    background: var(--school-navy);
    box-shadow: none;
    border-bottom: 3px solid var(--school-primary);
}
.site-header .navbar-brand a,
.site-header .nav-link { color: #fff !important; }
.site-header .navbar-brand a { display: flex; align-items: center; gap: .6rem; }
.app-brand { font-weight: 700; letter-spacing: .02em; }
.site-brand-mark {
    display: inline-grid;
    width: 2.1rem;
    height: 2.1rem;
    place-items: center;
    color: var(--school-navy);
    background: #fff;
    border-radius: 4px;
}
.site-header .nav-link {
    margin: 0 .1rem;
    padding: .6rem .8rem;
    border-radius: 0;
    border-bottom: 3px solid transparent;
    opacity: .92;
    font-weight: 500;
}
.site-header .nav-link:hover { background: rgba(255, 255, 255, .08); opacity: 1; }
.site-header .nav-link.active { border-bottom-color: #fff; opacity: 1; }

/* ---- ページ共通 ---- */
.page-wrapper > .container-xl:first-child { padding-top: 1rem; }
.page-title {
    font-weight: 700;
    letter-spacing: 0;
    color: var(--school-ink);
    padding-left: .85rem;
    border-left: 5px solid var(--school-navy);
    line-height: 1.4;
}
.breadcrumb { font-size: .82rem; color: var(--school-muted); }
.breadcrumb a { color: var(--school-primary); text-decoration: none; }

.card {
    border-color: var(--school-border);
    border-radius: var(--school-radius);
    box-shadow: none;
}

.btn { border-radius: 4px; font-weight: 600; }
.btn-primary {
    background: var(--school-primary);
    border-color: var(--school-primary);
    box-shadow: none;
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--school-primary-dark);
    border-color: var(--school-primary-dark);
}
.btn-outline-primary { color: var(--school-primary); border-color: var(--school-border); }
.btn-outline-primary:hover {
    color: #fff;
    background: var(--school-primary);
    border-color: var(--school-primary);
}

.alert { border-radius: 4px; }
a { color: var(--school-primary); }

/* 設置区分バッジ（公立/私立/その他）: 全ページ共通 */
.badge-public { background-color: #332288 !important; color: #fff !important; }
.badge-private { background-color: #CC6677 !important; color: #fff !important; }
.badge-etc { background-color: #117733 !important; color: #fff !important; }

/* ---- フッター ---- */
footer.footer {
    margin-top: 3rem;
    padding: 1.5rem 0;
    color: var(--school-muted);
    background: transparent;
    border-top: 1px solid var(--school-border);
}
footer.footer a { color: var(--school-muted); text-decoration: none; }
footer.footer a:hover { color: var(--school-primary); text-decoration: underline; }

@media (max-width: 767.98px) {
    .site-header .navbar-collapse { padding-top: .5rem; }
    .site-header .navbar-collapse .nav-link { border-bottom: 0; border-left: 3px solid transparent; }
    .site-header .navbar-collapse .nav-link.active { border-left-color: #fff; }
    .page-title { font-size: 1.3rem; line-height: 1.45; }
}


/* ==========================================================================
   トップページ (home_top.php)
   ========================================================================== */

/* ---- ヒーロー: 写真を使わないフラット構成 ---- */
.home-hero {
    background: var(--school-surface);
    border: 1px solid var(--school-border);
    border-top: 4px solid var(--school-navy);
    border-radius: var(--school-radius);
    padding: clamp(1.75rem, 4vw, 3rem);
}
.home-hero-lead {
    margin-bottom: .5rem;
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: .01em;
    color: var(--school-ink);
}
.home-hero-desc {
    max-width: 46em;
    margin-bottom: 1.5rem;
    color: var(--school-muted);
    line-height: 1.9;
}
.home-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.5rem;
    padding: 0;
    list-style: none;
}
.home-hero-tags li {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .7rem;
    font-size: .8rem;
    font-weight: 600;
    color: #33435e;
    background: var(--school-soft);
    border: 1px solid var(--school-border);
    border-radius: 999px;
}
.home-hero-tags li i { color: var(--school-primary); }

.home-search {
    max-width: 760px;
    padding: 1rem;
    background: var(--school-soft);
    border: 1px solid var(--school-border);
    border-radius: var(--school-radius);
}
.home-search .form-control, .home-search .form-select { min-height: 2.9rem; border-color: var(--school-border); }
.home-search .btn { min-height: 2.9rem; }
.home-search-note { margin: .6rem 0 0; font-size: .78rem; color: var(--school-muted); }

/* ---- 学校種別クイックナビ ---- */
.school-type-nav { margin-bottom: 2.5rem; }
.school-type-nav-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.school-type-nav-grid a {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .85rem 1rem;
    color: var(--school-ink);
    font-weight: 600;
    text-decoration: none;
    background: var(--school-surface);
    border: 1px solid var(--school-border);
    border-radius: var(--school-radius);
    transition: border-color .15s ease, background-color .15s ease;
}
.school-type-nav-grid a:hover { border-color: var(--school-primary); background: #fbfcfe; }
.school-type-nav-grid a i:first-child {
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    font-size: 1.1rem;
    color: var(--school-navy);
    background: var(--school-soft);
    border-radius: 4px;
}
.school-type-nav-grid a .ti-chevron-right { margin-left: auto; color: #a6b0bf; }

/* ---- 各学校種セクション ---- */
.home-section { margin-bottom: 2.75rem; }
.home-section-title {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: .35rem;
    padding-left: .85rem;
    border-left: 5px solid var(--school-navy);
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    font-weight: 700;
}
.home-section-title i { color: var(--school-navy); }
.home-section-sub { margin-bottom: 1rem; padding-left: 1.15rem; color: var(--school-muted); font-size: .9rem; }

.home-menu {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
}
.home-menu a {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .9rem 1rem;
    color: inherit;
    text-decoration: none;
    background: var(--school-surface);
    border: 1px solid var(--school-border);
    border-radius: var(--school-radius);
    transition: border-color .15s ease, background-color .15s ease;
}
.home-menu a:hover { border-color: var(--school-primary); background: #fbfcfe; }
.home-menu .home-menu-icon {
    display: inline-grid;
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    place-items: center;
    font-size: 1.2rem;
    color: var(--school-primary);
    background: var(--school-soft);
    border-radius: 4px;
}
.home-menu .home-menu-title { font-weight: 700; }
.home-menu .home-menu-desc { font-size: .84rem; color: var(--school-muted); }
.home-menu .ti-chevron-right { margin-left: auto; color: #a6b0bf; }

/* ---- FAQ ---- */
.home-faq .accordion-button { font-weight: 600; }
.home-faq .accordion-button:not(.collapsed) {
    color: var(--school-navy);
    background: var(--school-soft);
    box-shadow: none;
}

@media (max-width: 767.98px) {
    .school-type-nav-grid { grid-template-columns: repeat(2, 1fr); }
    .home-menu { grid-template-columns: 1fr; }
}

/* ==========================================================================
   詳細・データページ共通コンポーネント
   ランキング / 保育園・幼稚園 / 小中高大の詳細ページで、同じ見た目の部品を
   .ranking-* .cc-* .sd-* と3セット別々に定義していたものを1か所に統合した。
   既存のマークアップを触らずに済むよう、旧クラス名はセレクタとして併記する。
   ========================================================================== */

/* ---- 読みやすさの土台（全ページ共通） ----
 * Tabler 既定は本文14px・行間1.43。数値と解説文が交互に並ぶこのサイトでは詰まって読めないため、
 * .page-wrapper（layout.php が全ページで出力）の中を一段大きくする。
 */
.page-wrapper {
    font-size: 1rem;
    line-height: 1.75;
}

.page-wrapper .card-body { padding: 1.5rem; }

/* 見出しは要素セレクタで指定する（Tablerの .h3 / .h4 / .h5 より詳細度を上げるため） */
.page-wrapper h2 {
    font-size: 1.3125rem;
    line-height: 1.45;
}

.page-wrapper h3 {
    font-size: 1rem;
    line-height: 1.55;
}

.page-wrapper .small,
.page-wrapper p.small { font-size: .8125rem; }

/* 表は行数が多くなりがちなので、詰めるより余白を取って読み取りやすさを優先する */
.page-wrapper .table { font-size: .875rem; }
.page-wrapper .table th {
    padding: .625rem;
    font-size: .75rem;
}
.page-wrapper .table td { padding: .75rem .625rem; }

@media (max-width: 575.98px) {
    .page-wrapper { font-size: .9375rem; }
    .page-wrapper .card-body { padding: 1.1rem; }
    .page-wrapper h2 { font-size: 1.1875rem; }
    .page-wrapper .table td { padding: .6rem .4rem; }
}

/* 1行が長いと読み飛ばされるので、本文の行長に上限を設ける */
.prose,
.cc-prose,
.sd-prose,
.ranking-lead { max-width: 62em; }

.ranking-lead {
    color: var(--school-muted);
    font-size: 1rem;
    line-height: 1.75;
}

@media (max-width: 575.98px) {
    .ranking-lead { font-size: .95rem; }
}

/* ---- 数値タイル ---- */
.stat-tile,
.ranking-stat,
.cc-stat,
.sd-stat {
    height: 100%;
    padding: .9rem 1rem;
    background: var(--school-soft);
    border-radius: var(--school-radius);
}

.stat-tile-label,
.ranking-stat-label,
.cc-stat-label,
.sd-stat-label {
    color: var(--school-muted);
    font-size: .8rem;
    line-height: 1.5;
}

.stat-tile-value,
.ranking-stat-value,
.cc-stat-value,
.sd-stat-value {
    margin: .1rem 0 0;
    color: var(--school-ink);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.3;
}

.stat-tile-value.is-empty,
.cc-stat-value.is-empty,
.sd-stat-value.is-empty {
    color: var(--school-muted);
    font-size: 1.05rem;
}

.stat-tile-note,
.cc-stat-note,
.sd-stat-note {
    color: var(--school-muted);
    font-size: .75rem;
    line-height: 1.45;
}

@media (max-width: 575.98px) {
    .stat-tile-value,
    .ranking-stat-value,
    .cc-stat-value,
    .sd-stat-value { font-size: 1.15rem; }
}

/* ---- ラベル列固定の情報テーブル ----
 * 上の .page-wrapper .table より詳細度を上げる必要があるため、同じく .page-wrapper で修飾する。
 */
.page-wrapper .data-table,
.page-wrapper .cc-info-table,
.page-wrapper .sd-info-table { font-size: .9375rem; }

.page-wrapper .data-table th,
.page-wrapper .data-table td,
.page-wrapper .cc-info-table th,
.page-wrapper .cc-info-table td,
.page-wrapper .sd-info-table th,
.page-wrapper .sd-info-table td { padding: .625rem .5rem; vertical-align: top; }

.page-wrapper .data-table th,
.page-wrapper .cc-info-table th,
.page-wrapper .sd-info-table th {
    width: 8.5rem;
    color: var(--school-muted);
    font-size: .875rem;
    font-weight: 600;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .page-wrapper .data-table th,
    .page-wrapper .cc-info-table th,
    .page-wrapper .sd-info-table th { width: 6rem; }
}

/* ---- 解説の引用ブロック（左罫線で区切り、カードの入れ子を避ける） ---- */
.note-block,
.cc-note,
.sd-note,
.ranking-takeaway {
    padding-left: .85rem;
    border-left: 3px solid var(--school-primary);
}

.note-block + .note-block,
.cc-note + .cc-note,
.sd-note + .sd-note { margin-top: .85rem; }

.ranking-primer { border-left: 4px solid var(--school-primary); }

/* ---- ラベル付きブロックの2段組（長文セルの表を置き換える） ---- */
.def-grid,
.cc-deflist,
.sd-deflist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

@media (max-width: 767.98px) {
    .def-grid,
    .cc-deflist,
    .sd-deflist { grid-template-columns: 1fr; }
}

.def-item,
.cc-def,
.sd-def {
    padding: .85rem 1rem;
    border: 1px solid var(--school-border);
    border-radius: var(--school-radius);
}

.def-item-label,
.cc-def-label,
.sd-def-label,
.ranking-kicker {
    margin-bottom: .15rem;
    color: var(--school-primary);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
}

.ranking-kicker { margin-bottom: .25rem; letter-spacing: .08em; }

.def-item-text,
.cc-def-text,
.sd-def-text {
    font-size: .9375rem;
    line-height: 1.7;
}

/* ---- チェック項目（行で区切って1項目ずつ拾えるようにする） ---- */
.check-list,
.cc-check,
.sd-check {
    margin: 0;
    padding: 0;
    list-style: none;
}

.check-list li,
.cc-check li,
.sd-check li {
    position: relative;
    padding: .65rem .5rem .65rem 2.4rem;
    border-bottom: 1px solid var(--school-border);
    font-size: .9375rem;
    line-height: 1.7;
}

.check-list li:last-child,
.cc-check li:last-child,
.sd-check li:last-child { border-bottom: 0; }

.check-list li::before,
.cc-check li::before,
.sd-check li::before {
    content: '';
    position: absolute;
    top: 1.05rem;
    left: .9rem;
    width: .7rem;
    height: .35rem;
    border-bottom: 2px solid var(--school-primary);
    border-left: 2px solid var(--school-primary);
    transform: rotate(-45deg);
}

/* ---- FAQ（全文を並べると縦に伸びすぎるため開閉式） ---- */
.faq-item,
.cc-faq,
.sd-faq {
    border: 1px solid var(--school-border);
    border-radius: var(--school-radius);
    overflow: hidden;
}

.faq-item + .faq-item,
.cc-faq + .cc-faq,
.sd-faq + .sd-faq { margin-top: .5rem; }

.faq-item > summary,
.cc-faq > summary,
.sd-faq > summary {
    position: relative;
    padding: .8rem 2.4rem .8rem 1rem;
    background: var(--school-soft);
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1.6;
    cursor: pointer;
    list-style: none;
}

.faq-item > summary::-webkit-details-marker,
.cc-faq > summary::-webkit-details-marker,
.sd-faq > summary::-webkit-details-marker { display: none; }

.faq-item > summary::after,
.cc-faq > summary::after,
.sd-faq > summary::after {
    content: '';
    position: absolute;
    top: 1.15rem;
    right: 1rem;
    width: .5rem;
    height: .5rem;
    border-right: 2px solid var(--school-primary);
    border-bottom: 2px solid var(--school-primary);
    transform: rotate(45deg);
}

.faq-item[open] > summary::after,
.cc-faq[open] > summary::after,
.sd-faq[open] > summary::after {
    top: 1.35rem;
    transform: rotate(-135deg);
}

.faq-body,
.cc-faq > .cc-faq-body,
.sd-faq > .sd-faq-body {
    padding: .85rem 1rem;
    font-size: .9375rem;
    line-height: 1.8;
}

/* ---- ページ内ジャンプ ---- */
.jump-nav,
.sd-jump {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.jump-nav a,
.sd-jump a {
    padding: .3rem .7rem;
    border: 1px solid var(--school-border);
    border-radius: 999px;
    background: var(--school-surface);
    color: var(--school-primary);
    font-size: .8125rem;
    text-decoration: none;
    white-space: nowrap;
}

.jump-nav a:hover,
.sd-jump a:hover {
    border-color: var(--school-primary);
    background: var(--school-soft);
}

/* ---- 一覧カードのグリッド ----
 * 高さを揃えると、学科データが無いカードに大きな余白ができていた。
 * 行の伸縮をやめ、カードごとに中身の高さで収める。
 */
.card-grid-auto { align-items: flex-start; }

/* ==========================================================================
   地域データランキング (city/ranking.php) 固有
   ========================================================================== */

/* 指標の読み違いを防ぐ3点。順位表より前に置くので面で目立たせる */
.ranking-point {
    position: relative;
    padding: .9rem .9rem .9rem 2.9rem;
    background: var(--school-soft);
    border-radius: var(--school-radius);
}

.ranking-point-num {
    position: absolute;
    top: .9rem;
    left: .85rem;
    display: grid;
    width: 1.45rem;
    height: 1.45rem;
    place-items: center;
    color: #fff;
    background: var(--school-primary);
    border-radius: 50%;
    font-size: .75rem;
    font-weight: 700;
}

/* 順位表の数値。狭い画面で「1,809.9万」「円」に折れないよう1行に固定する */
.ranking-value {
    min-width: 5.5em;
    text-align: right;
    white-space: nowrap;
}