/* ==========================================================================
   学校サーチ 共通デザイン (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; }
}