:root {
    --blue: #0A4AA6;
    --blue-700: #08367a;
    --gold: #D4AF37;
    --white: #fff;
    --ink: #0f172a;
    --muted: #64748b;
    --radius: 14px;
    --shadow: 0 10px 30px rgba(10, 30, 60, .18);
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    font: 16px/1.6 "Noto Sans", "Noto Serif Khmer", system-ui, -apple-system, Segoe UI, Roboto
}

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

.container {
    width: min(1200px, 92%);
    margin-inline: auto
}

/* HERO */
.hero-structure {
    background: linear-gradient(120deg, var(--blue), #2e5cb8);
    color: #fff;
    text-align: center;
    padding: 72px 16px;
}

.hero-structure h1 {
    margin: 0 0 6px;
    font-size: clamp(28px, 5vw, 46px)
}

.hero-structure p {
    margin: 0;
    opacity: .95
}

/* BLUE BOARD */
.orgboard {
    background: #e9f1ff;
    padding: 38px 0 56px;
}

.board-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
    color: #fff;
    background: linear-gradient(180deg, #0a44a1, #0A4AA6);
    border-radius: 16px 16px 0 0;
    padding: 12px 14px;
    box-shadow: var(--shadow);
}

.board-head .shield {
    width: 46px;
    height: 46px;
    object-fit: contain;
    background: #fff;
    border-radius: 10px;
    padding: 6px
}

.board-head h2 {
    margin: 0;
    font-size: 1.05rem;
    letter-spacing: .3px
}

.board-head .kh {
    margin: 0;
    opacity: .95;
    font-size: .9rem
}

/* BLUE PANEL 背景 */
.tree {
    position: relative;
    background:
        radial-gradient(80% 100% at 100% 0, rgba(255, 255, 255, .06), transparent 60%),
        radial-gradient(80% 100% at 0 100%, rgba(255, 255, 255, .06), transparent 60%),
        linear-gradient(180deg, #0b4aa6, #083b84 70%, #072b62 100%);
    padding: 28px 16px 36px;
    border-radius: 0 0 16px 16px;
    box-shadow: var(--shadow);
    color: #fff;
    overflow: auto;
    /* 横に広いとき */
}

/* --- ORG CHART (UL/LI tree pattern) --- */
.tree ul {
    padding-top: 20px;
    position: relative;
    padding-left: 0;
    margin: 0;
    text-align: center;
}

.tree li {
    display: inline-block;
    vertical-align: top;
    list-style: none;
    position: relative;
    padding: 20px 10px 0 10px;
}

/* コネクタ線（親の下から水平線を左右に） */
.tree li::before,
.tree li::after {
    content: "";
    position: absolute;
    top: 0;
    width: 50%;
    height: 20px;
    border-top: 2px solid rgba(255, 255, 255, .65);
}

.tree li::before {
    right: 50%;
    border-right: 2px solid rgba(255, 255, 255, .65);
}

.tree li::after {
    left: 50%;
    border-left: 2px solid rgba(255, 255, 255, .65);
}

/* 1人だけの子には線を消す */
.tree li:only-child::before,
.tree li:only-child::after {
    display: none;
}

.tree li:only-child {
    padding-top: 0;
}

/* 最左・最右の角の修正 */
.tree li:first-child::before {
    border: 0 none;
}

.tree li:last-child::after {
    border: 0 none;
}

/* 親と子を縦線で接続 */
.tree ul ul::before {
    content: "";
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 2px solid rgba(255, 255, 255, .65);
    width: 0;
    height: 20px;
}

/* 人物カード */
.node {
    width: 240px;
    max-width: 72vw;
    margin: auto;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .35);
    backdrop-filter: saturate(140%) blur(2px);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
    transition: .25s transform, .25s box-shadow;
}

.node:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, .28);
}

.node img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    display: block;
    background: #0a2d66;
}

.node .role {
    font-weight: 800;
    color: #ffefc3;
    background: rgba(212, 175, 55, .18);
    padding: 6px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
}

.node .name {
    padding: 8px 10px 12px;
    font-weight: 700;
    color: #fff;
}

/* MOTTO */
.motto {
    text-align: center;
    color: #fff;
    margin: 12px 0 0;
    font-weight: 900;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .35);
    letter-spacing: .4px;
}

header.hero-partners {
    background: linear-gradient(180deg, #0A4AA6 0%, #09367f 100%);
    color: #fff;
    text-align: center;
    padding: 80px 20px;
}

.hero-partners h1 {
    font-size: clamp(28px, 5vw, 48px);
    margin-bottom: 8px;
    font-weight: 900;
}

.hero-partners p {
    font-size: 1.1rem;
    opacity: 0.9;
}

/* Section */
.partners {
    background: #fff;
    padding: 70px 0;
}

.section-head {
    text-align: center;
    margin-bottom: 40px;
}

.overline {
    color: #0A4AA6;
    background: rgba(10, 74, 166, 0.1);
    padding: 6px 12px;
    border-radius: 999px;
    font-weight: 800;
}

.title {
    font-size: clamp(24px, 4vw, 40px);
    font-weight: 900;
    margin: 10px 0;
    color: #0A2d66;
}

.lead {
    color: #475569;
    max-width: 70ch;
    margin: 0 auto;
}

/* Grid */
.partner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    margin-top: 40px;
}

.partner-card {
    background: #fff;
    border-radius: 18px;
    border: 1px solid #e5eaf3;
    padding: 24px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(10, 30, 60, 0.08);
    transition: transform .25s, box-shadow .25s;
}

.partner-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(10, 30, 60, 0.12);
}

.partner-card img {
    max-width: 120px;
    margin: 0 auto 12px;
    display: block;
}

.partner-card h3 {
    font-weight: 900;
    color: #0A4AA6;
    margin: 10px 0 8px;
}

.partner-card p {
    color: #475569;
    font-size: .95rem;
    margin-bottom: 16px;
}

.btn {
    display: inline-block;
    background: #0A4AA6;
    color: #fff;
    padding: 10px 18px;
    border-radius: 999px;
    font-weight: 800;
    text-decoration: none;
    transition: .3s;
    box-shadow: 0 8px 24px rgba(10, 30, 60, .18);
}

.btn:hover {
    background: #08367a;
}

/* INTRO */
.intro {
    background: #fff;
    padding: 60px 0 40px;
}

.title {
    font-size: clamp(24px, 4vw, 38px);
    font-weight: 900;
    color: var(--blue-ikey);
}

.lead {
    color: #475569;
    max-width: 75ch;
    margin: 14px auto 0;
}

/* GOALS */
.goals {
    background: linear-gradient(180deg, #f7faff 0%, #eef4ff 100%);
    padding: 70px 0;
}

.goals__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 22px;
    margin-top: 30px;
}

.goal-card {
    background: var(--white);
    border: 1px solid #e5eaf3;
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow);
    transition: .3s;
}

.goal-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(10, 30, 60, .15);
}

.goal-card .icon {
    font-size: 2.4rem;
    margin-bottom: 10px;
}

.goal-card h3 {
    font-weight: 800;
    color: var(--blue-ikey);
    margin-bottom: 6px;
}

.goal-card p {
    color: var(--muted);
    font-size: .95rem;
}

/* CTA */
.cta-center {
    margin-top: 40px;
}

.btn {
    display: inline-block;
    background: var(--blue-ikey);
    color: #fff;
    padding: 12px 24px;
    border-radius: 999px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: var(--shadow);
}

.btn:hover {
    background: #08367a;
}

/* QUOTE */
.quote {
    background: #fff;
    padding: 80px 0;
    text-align: center;
}

.quote blockquote {
    font-size: 1.4rem;
    font-weight: 700;
    color: #0A4AA6;
    max-width: 70ch;
    margin: 0 auto 10px;
    border-left: 4px solid var(--gold-ikey);
    padding-left: 14px;
}

.quote cite {
    color: #6b7280;
    font-style: normal;
    font-weight: 600;
}

/* ===== CAMPUS INFO ===== */
.campus-info {
    background: #fff;
    padding: 70px 0;
}

.lead {
    color: #475569;
    max-width: 70ch;
    margin: 0 auto 40px;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

.info-card {
    background: var(--bg);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow);
    transition: .3s;
}

.info-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(10, 30, 60, .15);
}

.info-card h3 {
    color: var(--gold-ikey);
    font-weight: 800;
    margin-bottom: 8px;
}

/* ===== MAP ===== */
.map {
    background: #f0f4ff;
    padding: 70px 0;
}

.map-box {
    margin-top: 20px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(10, 30, 60, .1);
}

/* ===== GALLERY ===== */
.campus-gallery {
    background: #fff;
    padding: 70px 0;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 14px;
    margin-top: 20px;
}

.gallery-grid figure {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: auto;
    border-radius: 14px;
    box-shadow: var(--shadow);
}

.gallery-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.gallery-grid figure:hover img {
    transform: scale(1.08);
}

.gallery-grid figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, .6), transparent 70%);
    color: #fff;
    font-weight: 700;
    padding: 10px 12px;
    opacity: 0;
    transition: opacity .35s ease;
}

.gallery-grid figure:hover figcaption {
    opacity: 1;
}

/* ===== INTRO ===== */
.intro {
    background: #fff;
    padding: 70px 0 40px;
}

.lead {
    color: #475569;
    max-width: 75ch;
    margin: 16px auto 0;
}

/* ===== PROGRAMS ===== */
.programs {
    background: linear-gradient(180deg, #f7faff 0%, #eef4ff 100%);
    padding: 70px 0;
}

.programs__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
    margin-top: 30px;
}

.prog-card {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    text-align: left;
    transition: .3s;
}

.prog-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(10, 30, 60, .15);
}

.prog-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.prog-body {
    padding: 18px 20px 24px;
}

.prog-body h3 {
    color: var(--blue-ikey);
    font-weight: 800;
    margin: 8px 0;
}

.prog-body p {
    color: #475569;
    font-size: .95rem;
}

.prog-body ul {
    padding: 0;
    margin: 10px 0 14px;
    list-style: none;
    color: #334155;
    font-size: .9rem;
}

.prog-body li::before {
    content: "• ";
    color: var(--gold-ikey);
}

/* BUTTON */
.btn {
    display: inline-block;
    background: var(--blue-ikey);
    color: #fff;
    padding: 10px 20px;
    border-radius: 999px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: var(--shadow);
}

.btn:hover {
    background: #08367a;
}

/* ===== VISION ===== */
.vision {
    background: #fff;
    padding: 80px 0;
    text-align: center;
}

.vision blockquote {
    font-size: 1.4rem;
    font-weight: 700;
    color: #0A4AA6;
    max-width: 70ch;
    margin: 0 auto 10px;
    border-left: 4px solid var(--gold-ikey);
    padding-left: 14px;
}

.vision .author {
    color: #6b7280;
    font-weight: 600;
    font-style: normal;
}

.btn--ghost {
    background: #fff;
    color: var(--blue);
    border-color: var(--blue)
}

/* INTRO */
.intro {
    background: #fff;
    padding: 64px 0 36px
}

/* PROGRAMS */
.programs {
    background: linear-gradient(180deg, #f7faff 0%, #eef4ff 100%);
    padding: 64px 0
}

.programs__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 18px
}

.prog-card {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    text-align: left;
    transition: .25s
}

.prog-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(10, 30, 60, .15)
}

.media {
    margin: 0
}

.media img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block
}

.prog-body {
    padding: 16px 18px 20px
}

.prog-body h3 {
    margin: .2rem 0 .4rem;
    color: var(--blue);
    font-weight: 900
}

.prog-body p {
    color: #475569;
    margin: 0 0 .6rem
}

.meta {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    color: #334155;
    font-size: .92rem
}

.meta li::before {
    content: "• ";
    color: var(--gold)
}

.actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

/* WHY IKEY */
.experience {
    background: #fff;
    padding: 64px 0
}

.exp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
    margin-top: 18px
}

.exp-card {
    background: var(--bg);
    border-radius: var(--radius);
    padding: 22px;
    box-shadow: var(--shadow);
    transition: .25s
}

.exp-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(10, 30, 60, .15)
}

.exp-card h3 {
    margin: 0 0 6px;
    color: var(--gold);
    font-weight: 800
}

.exp-card p {
    margin: 0;
    color: #475569
}

/* ADMISSIONS */
.admissions {
    background: linear-gradient(180deg, #eef4ff 0%, #f7faff 100%);
    padding: 64px 0
}

.req-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-top: 12px
}

.req-card {
    background: #fff;
    border-radius: var(--radius);
    padding: 18px;
    box-shadow: var(--shadow);
    text-align: left
}

.req-card h3 {
    margin: 0 0 8px;
    color: var(--blue);
    font-weight: 900
}

.req-card ul {
    margin: 0;
    padding-left: 18px;
    color: #334155
}

.ad-cta {
    margin-top: 16px;
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap
}

/* FAQ */
.faq {
    background: #fff;
    padding: 64px 0
}

.faq details {
    width: min(900px, 100%);
    margin: 10px auto;
    text-align: left;
    background: var(--bg);
    border-radius: 12px;
    padding: 10px 14px;
    box-shadow: var(--shadow)
}

.faq summary {
    cursor: pointer;
    font-weight: 800;
    color: var(--blue)
}

.faq p {
    margin: 8px 0 0;
    color: #334155
}

/* INTRO */
.intro {
    background: #fff;
    padding: 64px 0 36px
}

/* PROGRAMS */
.programs {
    background: linear-gradient(180deg, #f7faff 0%, #eef4ff 100%);
    padding: 64px 0
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 18px
}

.d-card {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    text-align: left;
    transition: .25s
}

.d-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(10, 30, 60, .15)
}

.media {
    margin: 0
}

.media img {
    width: 100%;
    height: 210px;
    object-fit: cover;
    display: block
}

.body {
    padding: 16px 18px 20px
}

.body h3 {
    margin: .2rem 0 .4rem;
    color: var(--blue);
    font-weight: 900
}

.body p {
    color: #475569;
    margin: 0 0 .6rem
}

.meta {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    color: #334155;
    font-size: .92rem
}

.meta li::before {
    content: "• ";
    color: var(--gold)
}

.curr {
    background: #f6f8ff;
    border: 1px solid #e3e9fb;
    border-radius: 12px;
    padding: 10px;
    margin: 8px 0
}

.curr summary {
    cursor: pointer;
    font-weight: 800;
    color: var(--blue)
}

.curr ul {
    margin: 8px 0 0 16px;
    padding: 0
}

.actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

/* HIGHLIGHTS */
.highlights {
    background: #fff;
    padding: 64px 0
}

.h-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
    margin-top: 18px
}

.h-card {
    background: var(--bg);
    border-radius: var(--radius);
    padding: 22px;
    box-shadow: var(--shadow)
}

.h-card h3 {
    margin: 0 0 6px;
    color: var(--gold);
    font-weight: 800
}

.h-card p {
    margin: 0;
    color: #475569
}

/* ADMISSIONS */
.admissions {
    background: linear-gradient(180deg, #eef4ff 0%, #f7faff 100%);
    padding: 64px 0
}

.req-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-top: 12px
}

.req-card {
    background: #fff;
    border-radius: var(--radius);
    padding: 18px;
    box-shadow: var(--shadow);
    text-align: left
}

.req-card h3 {
    margin: 0 0 8px;
    color: var(--blue);
    font-weight: 900
}

.req-card ul {
    margin: 0;
    padding-left: 18px;
    color: #334155
}

.ad-cta {
    margin-top: 16px;
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap
}

/* COURSES */
.courses {
    background: linear-gradient(180deg, #f7faff 0%, #eef4ff 100%);
    padding: 64px 0
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
    margin-top: 18px
}

.c-card {
    background: #fff;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    text-align: left;
    transition: .25s
}

.c-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(10, 30, 60, .15)
}

.media {
    margin: 0;
    position: relative
}

.media img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block
}

.badge {
    position: absolute;
    left: 12px;
    top: 12px;
    background: var(--gold);
    color: #fff;
    font-weight: 900;
    border-radius: 999px;
    padding: 6px 10px
}

.body {
    padding: 14px 16px 18px
}

.body h3 {
    margin: .2rem 0 .4rem;
    color: var(--blue);
    font-weight: 900
}

.body p {
    color: #475569;
    margin: 0 0 .6rem
}

.meta {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    color: #334155;
    font-size: .92rem
}

.meta li::before {
    content: "• ";
    color: var(--gold)
}

.actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

/* SCHEDULE */
.schedule {
    background: #fff;
    padding: 64px 0
}

.note {
    color: #6b7280;
    margin-bottom: 10px
}

.table-wrap {
    overflow: auto;
    border-radius: 14px;
    box-shadow: var(--shadow)
}

.tbl {
    width: 100%;
    border-collapse: collapse;
    min-width: 720px;
    background: #fff
}

.tbl th,
.tbl td {
    padding: 12px 10px;
    border-bottom: 1px solid #E5E7EB
}

.tbl thead th {
    background: #f5f7ff;
    color: #0b1b33;
    font-weight: 900;
    position: sticky;
    top: 0
}

.tbl tbody tr:hover {
    background: #f8faff
}

/* FLOW */
.flow {
    background: linear-gradient(180deg, #eef4ff 0%, #f7faff 100%);
    padding: 56px 0
}

.steps {
    width: min(800px, 100%);
    margin: 10px auto 0;
    text-align: left
}

.steps li {
    margin: 8px 0;
    color: #334155
}

/* TUITION */
.tuition {
    background: #fff;
    padding: 64px 0
}

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-top: 16px
}

.t-card {
    background: var(--bg);
    border-radius: var(--radius);
    padding: 22px;
    box-shadow: var(--shadow)
}

.t-card h3 {
    margin: 0 0 6px;
    color: var(--gold);
    font-weight: 900
}

.price {
    font-weight: 900;
    color: #0b1b33;
    margin: 6px 0 8px
}

/* Grid */
.grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(3, 1fr)
}

@media (max-width:960px) {
    .grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (max-width:600px) {
    .grid {
        grid-template-columns: 1fr
    }
}

/* Card */
.card {
    background: #fff;
    border: 1px solid #e6ecf6;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    transition: transform .2s ease, box-shadow .2s ease;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(10, 30, 60, .14)
}

.media {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden
}

.media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.02)
}

.badge {
    position: absolute;
    left: 12px;
    top: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--ikey-blue);
    color: #fff;
    border-radius: 12px;
    padding: 6px 8px;
    line-height: 1;
    box-shadow: 0 8px 18px rgba(10, 30, 60, .25)
}

.badge .d {
    font-size: 1.1rem;
    font-weight: 900
}

.badge .m {
    font-size: .75rem;
    opacity: .95
}

.badge .y {
    font-size: .7rem;
    opacity: .85
}

.tag {
    position: absolute;
    right: 12px;
    top: 12px;
    background: rgba(255, 255, 255, .95);
    color: var(--ikey-blue);
    border-radius: 999px;
    padding: 6px 10px;
    font-weight: 800;
    border: 1px solid #e7ecf3
}

.tag--gold {
    background: var(--ikey-gold);
    color: #fff;
    border: none
}

.body {
    padding: 14px 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.body h3 {
    margin: .2rem 0 .2rem;
    font-size: 1.05rem;
    font-weight: 900;
    color: #0b1b33
}

.body p {
    margin: 0;
    color: var(--muted)
}

.meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    font-size: .9rem;
    color: #475569
}

.actions {
    margin-top: 8px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 9px 14px;
    background: var(--ikey-blue);
    color: #fff;
    font-weight: 800;
    border: 2px solid transparent;
    box-shadow: 0 8px 20px rgba(10, 30, 60, .18)
}

.btn:hover {
    background: var(--ikey-blue-600)
}

.btn--ghost {
    background: #fff;
    color: var(--ikey-blue);
    border-color: var(--ikey-blue);
    box-shadow: none
}

.btn--sm {
    padding: 7px 12px;
    font-size: .92rem
}

/* CSS-only modal via :target */
.lightbox {
    display: none
}

.lb {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.lb .panel {
    width: min(860px, 92%);
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
}

.lb header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid #e5e7eb;
    background: #f7f9ff
}

.lb header h3 {
    margin: 0;
    font-size: 1.05rem
}

.lb .content {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 14px;
    padding: 14px
}

.lb .content img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: 12px
}

.lb .content p {
    margin: .2rem 0 .6rem;
    color: #334155
}

.lb .kv {
    display: grid;
    gap: 8px
}

.lb a.close {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 6px 10px;
    font-weight: 800
}

@media (max-width:800px) {
    .lb .content {
        grid-template-columns: 1fr
    }
}

/* target */
.lb:target {
    opacity: 1;
    pointer-events: auto
}

*=======ARTICLE=======*/ main.article {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 32px;
    padding: 50px 0;
}

@media(max-width:900px) {
    main.article {
        grid-template-columns: 1fr
    }
}

article.content {
    margin-top: 50px;
    background: #fff;
    border: 1px solid #e6ecf6;
    box-shadow: var(--shadow);
    padding: 28px;
}

article.content img.main {
        width: auto;
    margin: auto;
    /* margin-bottom: 18px; */
/*     border-radius: 18px; */
}

.meta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: .95rem;
    margin-bottom: 12px
}

article.content h2 {
    font-weight: 900;
    font-size: 1.6rem;
    margin: .5rem 0 1rem;
    color: #0A2d66
}

article.content p {
    margin: .6rem 0;
    color: #374151
}

blockquote {
    margin: 1.2rem 0;
    padding: 14px 18px;
    border-left: 4px solid var(--ikey-gold);
    background: #f9f6e8;
    border-radius: 12px;
    font-style: italic;
    color: #5a4a00
}

.share {
    margin-top: 26px;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

/* ======= SIDEBAR ======= */
aside.sidebar {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    gap: 24px
}

.widget {
    background: #fff;
    border: 1px solid #e6ecf6;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px;
}

.widget h3 {
    margin: 0 0 10px;
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--ikey-blue)
}

.widget ul {
    list-style: none;
    padding: 0;
    margin: 0
}

.widget li {
    margin: 10px 0
}

.widget a {
    color: #0A2d66;
    font-weight: 600
}

.widget a:hover {
    color: var(--ikey-blue)
}

.thumb {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 10px;
    align-items: center;
}

.thumb img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 12px
}

/* ======= RELATED ======= */
.related {
    margin-top: 50px;
    padding: 36px 0;
    background: linear-gradient(180deg, #eef4ff 0%, #f7faff 100%);
}

.related h2 {
    text-align: center;
    font-size: clamp(22px, 4vw, 30px);
    font-weight: 900;
    margin-bottom: 24px;
}

.related-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(3, 1fr);
    width: min(1100px, 92%);
    margin: auto
}

@media(max-width:900px) {
    .related-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(max-width:600px) {
    .related-grid {
        grid-template-columns: 1fr
    }
}

.related-card {
    background: #fff;
    border: 1px solid #e6ecf6;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: transform .2s;
}

.related-card:hover {
    transform: translateY(-4px)
}

.related-card img {
	    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover
}

.related-card h3 {
    margin: 8px 14px;
    font-size: 1rem;
    font-weight: 900;
    color: #0b1b33
}

.related-card p {
    margin: 0 14px 14px;
    color: #64748b;
    font-size: .9rem
}

/* ===== SECTION HEAD ===== */
.sch-head {
    text-align: center;
    margin: 50px auto 30px
}

.sch-overline {
    display: inline-block;
    background: rgba(10, 74, 166, .1);
    color: var(--ikey-blue);
    padding: 6px 12px;
    border-radius: 999px;
    font-weight: 800;
}

.sch-title {
    font-size: clamp(24px, 4vw, 32px);
    font-weight: 900;
    color: #0A2d66;
    margin: 10px 0
}

.sch-lead {
    max-width: 72ch;
    margin: 0 auto 24px;
    color: #475569
}

/* ===== SCHOLARSHIP TYPES ===== */
.sch-section {
    background: #fff;
    padding: 50px 0 60px
}

.sch-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, 1fr)
}

@media(max-width:900px) {
    .sch-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(max-width:600px) {
    .sch-grid {
        grid-template-columns: 1fr
    }
}

.sch-card {
    background: #fff;
    border: 1px solid #e6ecf6;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 22px;
    transition: transform .25s;
}

.sch-card:hover {
    transform: translateY(-4px)
}

.sch-card h3 {
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--ikey-blue);
    margin: .4rem 0
}

.sch-card p {
    margin: .4rem 0 .8rem;
    color: #475569
}

.sch-card ul {
    margin: .4rem 0 .8rem;
    padding-left: 20px;
    color: #334155
}

.sch-badge {
    display: inline-block;
    background: rgba(212, 175, 55, .14);
    color: #8a6a00;
    border: 1px solid rgba(212, 175, 55, .35);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: .85rem;
    font-weight: 700;
}

/* ===== HOW TO APPLY ===== */
.sch-steps {
    background: linear-gradient(180deg, #f7faff 0%, #eef4ff 100%);

}

.sch-steps ol {
    list-style: decimal inside;
    margin: 0 auto;
    max-width: 700px;
    color: #1f2937
}

.sch-steps li {
    margin: 10px 0;
    padding-left: 10px;
    font-weight: 600
}

.sch-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 10px 16px;
    background: var(--ikey-blue);
    color: #fff;
    font-weight: 800;
    border: 2px solid transparent;
    box-shadow: 0 8px 20px rgba(10, 30, 60, .18);
    margin-top: 16px;
    text-decoration: none;
}

.sch-btn:hover {
    background: var(--ikey-blue-600)
}

/* ===== REQUIREMENTS ===== */
.sch-req {
    background: #fff;
    padding: 60px 0
}

.sch-req-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(2, 1fr)
}

@media(max-width:900px) {
    .sch-req-grid {
        grid-template-columns: 1fr
    }
}

.sch-req-box {
    background: #f8faff;
    border: 1px solid #e6ecf6;
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: 0 6px 20px rgba(10, 30, 60, .06)
}

.sch-req-box h3 {
    color: #0A4AA6;
    font-weight: 900;
    margin-top: 0
}

.sch-req-box ul {
    margin: 8px 0 0 20px;
    color: #374151
}

/* ===== FAQ ===== */
.sch-faq {
    background: linear-gradient(180deg, #eef4ff 0%, #f7faff 100%);
    padding: 10px 0px 50px;
}

.sch-faq details {
    background: #fff;
    border: 1px solid #e5eaf3;
    border-radius: 12px;
    padding: 14px 16px;
    margin: 10px auto;
    max-width: 800px;
    box-shadow: 0 6px 16px rgba(10, 30, 60, .06)
}

.sch-faq summary {
    font-weight: 800;
    color: #0A2d66;
    cursor: pointer
}

.sch-faq p {
    margin: .6rem 0 0;
    color: #475569
}

/* ===== SECTION HEAD ===== */
.apply-head {
    text-align: center;
    margin: 50px auto 30px
}

.apply-overline {
    display: inline-block;
    background: rgba(10, 74, 166, .1);
    color: var(--ikey-blue);
    padding: 6px 12px;
    border-radius: 999px;
    font-weight: 800;
}

.apply-title {
    font-size: clamp(24px, 4vw, 32px);
    font-weight: 900;
    color: #0A2d66;
    margin: 10px 0
}

.apply-lead {
    max-width: 72ch;
    margin: 0 auto 24px;
    color: #475569
}

/* ===== OVERVIEW ===== */
.apply-overview {
    background: #fff;
    padding: 60px 0
}

.apply-overview p {
    max-width: 80ch;
    margin: 0 auto;
    color: #475569;
    text-align: center;
    font-size: 1.05rem
}

/* ===== STEPS ===== */
.apply-steps {
    background: linear-gradient(180deg, #f7faff 0%, #eef4ff 100%);
    padding: 60px 0
}

.apply-steps-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(3, 1fr)
}

@media(max-width:900px) {
    .apply-steps-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(max-width:600px) {
    .apply-steps-grid {
        grid-template-columns: 1fr
    }
}

.apply-step {
    background: #fff;
    border: 1px solid #e6ecf6;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px;
    text-align: center;
    transition: transform .25s;
}

.apply-step:hover {
    transform: translateY(-4px)
}

.apply-step .num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: var(--ikey-gold);
    color: #fff;
    font-weight: 900;
    margin-bottom: 12px;
    font-size: 1.2rem;
}

.apply-step h3 {
    color: #0A4AA6;
    font-weight: 900;
    margin: 8px 0
}

.apply-step p {
    color: #475569;
    margin: 0
}

/* ===== REQUIREMENTS ===== */
.apply-req {
    background: #fff;
    padding: 60px 0
}

.apply-req-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(2, 1fr)
}

@media(max-width:900px) {
    .apply-req-grid {
        grid-template-columns: 1fr
    }
}

.apply-req-box {
    background: #f8faff;
    border: 1px solid #e6ecf6;
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: 0 6px 20px rgba(10, 30, 60, .06)
}

.apply-req-box h3 {
    color: #0A4AA6;
    font-weight: 900;
    margin-top: 0
}

.apply-req-box ul {
    margin: 8px 0 0 20px;
    color: #374151
}

/* ===== DATES ===== */
.apply-dates {
    background: linear-gradient(180deg, #eef4ff 0%, #f7faff 100%);
    padding: 60px 0
}

.apply-date-table {
    width: min(800px, 100%);
    margin: auto;
    border-collapse: collapse;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(10, 30, 60, .08)
}

.apply-date-table th,
.apply-date-table td {
    padding: 14px 18px;
    border-bottom: 1px solid #e5e7eb;
    text-align: left
}

.apply-date-table th {
    background: #0A4AA6;
    color: #fff;
    font-weight: 800
}

.apply-date-table tr:last-child td {
    border-bottom: none
}

/* ===== FAQ ===== */
.apply-faq {
    background: #fff;
    padding: 60px 0
}

.apply-faq details {
    background: #f8faff;
    border: 1px solid #e5eaf3;
    border-radius: 12px;
    padding: 14px 16px;
    margin: 10px auto;
    max-width: 800px;
    box-shadow: 0 6px 16px rgba(10, 30, 60, .06)
}

.apply-faq summary {
    font-weight: 800;
    color: #0A2d66;
    cursor: pointer
}

.apply-faq p {
    margin: .6rem 0 0;
    color: #475569
}

/* ===== CTA ===== */
.apply-cta {
    background: linear-gradient(135deg, #0A4AA6 0%, #062d64 100%);
    color: #fff;
    text-align: center;
    padding: 60px 0;
}

.apply-cta h2 {
    font-weight: 900;
    margin: 0 0 14px
}

.apply-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 12px 20px;
    background: #D4AF37;
    color: #fff;
    font-weight: 800;
    border: 2px solid transparent;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
    text-decoration: none;
}

.apply-btn:hover {
    background: #b99627
}

/* ===== FOOTER ===== */
.sch-footer {
    background: var(--ikey-blue);
    color: #fff;
    text-align: center;
    padding: 24px 0;
    margin-top: 40px;
    font-size: .95rem
}

/* ===== SECTION HEAD ===== */
.tf-head {
    text-align: center;
    margin: 50px auto 30px
}

.tf-overline {
    display: inline-block;
    background: rgba(10, 74, 166, .1);
    color: var(--ikey-blue);
    padding: 6px 12px;
    border-radius: 999px;
    font-weight: 800;
}

.tf-title {
    font-size: clamp(24px, 4vw, 32px);
    font-weight: 900;
    color: #0A2d66;
    margin: 10px 0
}

.tf-lead {
    max-width: 72ch;
    margin: 0 auto 24px;
    color: #475569
}

/* ===== NOTICE BAR ===== */
.tf-notice {
    background: #fff;
    border: 1px solid #e6ecf6;
    border-left: 4px solid var(--ikey-gold);
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 6px 18px rgba(10, 30, 60, .06);
    margin-top: 16px;
}

/* ===== FEE CARDS ===== */
.tf-section {
    background: #fff;
    padding: 60px 0
}

.tf-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(2, 1fr)
}

@media(max-width:900px) {
    .tf-grid {
        grid-template-columns: 1fr
    }
}

.tf-card {
    background: #fff;
    border: 1px solid #e6ecf6;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden
}

.tf-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    background: linear-gradient(180deg, #f7faff 0%, #eef4ff 100%);
    border-bottom: 1px solid #e6ecf6
}

.tf-card__head h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 900;
    color: #0A4AA6
}

.tf-badge {
    display: inline-block;
    background: rgba(212, 175, 55, .14);
    color: #8a6a00;
    border: 1px solid rgba(212, 175, 55, .35);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: .85rem;
    font-weight: 800
}

.tf-card__body {
    padding: 14px 18px
}

/* table inside card */
.tf-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .97rem
}

.tf-table th,
.tf-table td {
    padding: 12px 10px;
    border-bottom: 1px solid #e5e7eb;
    text-align: left
}

.tf-table th {
    color: #0A2d66;
    font-weight: 800
}

.tf-table tr:last-child td {
    border-bottom: none
}

.tf-small {
    color: #64748b;
    font-size: .9rem
}

/* ===== SUMMARY BAND ===== */
.tf-summary {
    background: linear-gradient(180deg, #eef4ff 0%, #f7faff 100%);
    padding: 50px 0
}

.tf-cards {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(3, 1fr)
}

@media(max-width:900px) {
    .tf-cards {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:600px) {
    .tf-cards {
        grid-template-columns: 1fr
    }
}

.tf-mini {
    background: #fff;
    border: 1px solid #e6ecf6;
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 8px 20px rgba(10, 30, 60, .06)
}

.tf-mini h4 {
    margin: 0 0 6px;
    color: #0A4AA6;
    font-weight: 900
}

.tf-price {
    font-weight: 900;
    font-size: 1.15rem
}

.tf-note {
    color: #64748b;
    font-size: .92rem;
    margin-top: 4px
}

/* ===== PAYMENT & POLICY ===== */
.tf-pp {
    background: #fff;
    padding: 60px 0
}

.tf-pp-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(2, 1fr)
}

@media(max-width:900px) {
    .tf-pp-grid {
        grid-template-columns: 1fr
    }
}

.tf-box {
    background: #f8faff;
    border: 1px solid #e6ecf6;
    border-radius: var(--radius);
    padding: 22px;
    box-shadow: 0 6px 20px rgba(10, 30, 60, .06)
}

.tf-box h3 {
    margin: 0 0 8px;
    color: #0A4AA6;
    font-weight: 900
}

.tf-box ul {
    margin: 8px 0 0 18px;
    color: #374151
}

.tf-box p {
    margin: .2rem 0;
    color: #374151
}

/* ===== CTA ===== */
.tf-cta {
    background: linear-gradient(135deg, #0A4AA6 0%, #062d64 100%);
    color: #fff;
    text-align: center;
    padding: 60px 0
}

.tf-cta h2 {
    margin: 0 0 12px;
    font-weight: 900
}

.tf-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 999px;
    background: #D4AF37;
    color: #fff;
    font-weight: 800;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .18)
}

.tf-btn:hover {
    background: #b99627
}

/* ===== FORM SECTION ===== */
.apply-section {
    background: #fff;
    margin: 50px 0;
    padding: 50px 0;
    border-radius: 0
}

.apply-title {
    text-align: center;
    font-size: clamp(22px, 4vw, 32px);
    font-weight: 900;
    color: #0A2d66;
    margin-bottom: 30px;
}

.apply-form {
    background: #fff;
    border: 1px solid #e6ecf6;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 30px;
}

.apply-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(2, 1fr)
}

@media(max-width:700px) {
    .apply-grid {
        grid-template-columns: 1fr
    }
}

.apply-form label {
    font-weight: 700;
    display: block;
    margin-bottom: 6px;
    color: #0A2d66
}

.apply-form input,
.apply-form select,
.apply-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color .2s;
}

.apply-form input:focus,
.apply-form select:focus,
.apply-form textarea:focus {
    outline: none;
    border-color: var(--ikey-blue);
}

.apply-form textarea {
    min-height: 100px;
    resize: vertical
}

/* ===== BUTTON ===== */
.apply-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    background: var(--ikey-blue);
    color: #fff;
    font-weight: 800;
    border: none;
    border-radius: 999px;
    padding: 12px 20px;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(10, 30, 60, .18);
    transition: background .2s;
}

.apply-btn:hover {
    background: var(--ikey-blue-600)
}

/* ===== INFO BOX ===== */
.apply-info {
    background: linear-gradient(180deg, #f7faff 0%, #eef4ff 100%);
    border: 1px solid #e6ecf6;
    border-radius: var(--radius);
    box-shadow: 0 8px 20px rgba(10, 30, 60, .06);
    padding: 20px;
    margin-top: 30px;
    color: #1f2937;
}

.apply-info h3 {
    margin: 0 0 8px;
    color: #0A4AA6;
    font-weight: 900
}

/* ===== SECTION HEAD ===== */
.faq-head {
    text-align: center;
    margin: 50px auto 30px
}

.faq-overline {
    display: inline-block;
    background: rgba(10, 74, 166, .1);
    color: var(--ikey-blue);
    padding: 6px 12px;
    border-radius: 999px;
    font-weight: 800;
}

.faq-title {
    font-size: clamp(24px, 4vw, 32px);
    font-weight: 900;
    color: #0A2d66;
    margin: 10px 0;
}

.faq-lead {
    max-width: 72ch;
    margin: 0 auto 24px;
    color: #475569;
    text-align: center;
}

/* ===== FAQ SECTION ===== */
.faq-section {
    background: #fff;
    padding: 50px 0 70px;
}

.faq-list {
    max-width: 820px;
    margin: 0 auto;
}

details {
    background: #fff;
    border: 1px solid #e5eaf3;
    border-radius: 12px;
    padding: 16px 18px;
    margin: 10px 0;
    box-shadow: 0 6px 18px rgba(10, 30, 60, .06);
    transition: all .25s ease;
}

details[open] {
    background: #f8faff;
    border-color: #d0defb;
    box-shadow: 0 8px 24px rgba(10, 30, 60, .08);
}

summary {
    font-weight: 800;
    color: #0A2d66;
    cursor: pointer;
    list-style: none;
    position: relative;
    padding-right: 26px;
}

summary::after {
    content: "＋";
    position: absolute;
    right: 0;
    top: 0;
    font-weight: 900;
    color: var(--ikey-blue);
    transition: transform .25s, color .25s;
}

details[open] summary::after {
    content: "−";
    color: var(--ikey-gold);
}

details p {
    margin: .6rem 0 0;
    color: #475569;
    animation: fadeIn .3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-3px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== CATEGORY ===== */
.faq-category {
    margin-top: 40px;
    margin-bottom: 10px;
    color: #0A4AA6;
    font-weight: 900;
    font-size: 1.1rem;
    border-left: 4px solid var(--ikey-gold);
    padding-left: 10px;
}

/* ===== CONTACT BOX ===== */
.faq-contact {
    background: linear-gradient(180deg, #eef4ff 0%, #f7faff 100%);
    border: 1px solid #e6ecf6;
    border-radius: var(--radius);
    box-shadow: 0 8px 20px rgba(10, 30, 60, .06);
    padding: 24px;
    margin-top: 40px;
    text-align: center;
}

.faq-contact h3 {
    margin: 0 0 6px;
    color: #0A4AA6;
    font-weight: 900
}

.faq-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    background: #0A4AA6;
    color: #fff;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(10, 30, 60, .18);
    margin-top: 12px;
}

.faq-btn:hover {
    background: #08367a
}

/* ===== SECTION HEAD ===== */
.wc-head {
    text-align: center;
    margin: 50px auto 30px;
}

.wc-overline {
    display: inline-block;
    background: rgba(10, 74, 166, .1);
    color: var(--ikey-blue);
    padding: 6px 12px;
    border-radius: 999px;
    font-weight: 800;
}

.wc-title {
    font-size: clamp(24px, 4vw, 32px);
    font-weight: 900;
    color: #0A2d66;
    margin: 10px 0;
}

.wc-lead {
    max-width: 72ch;
    margin: 0 auto 24px;
    color: #475569;
    text-align: center;
}

/* ===== INTRO ===== */
.wc-intro {
    background: #fff;
    padding: 60px 0;
}

.wc-intro .wc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

@media(max-width:900px) {
    .wc-intro .wc-grid {
        grid-template-columns: 1fr
    }
}

.wc-intro img {
    width: 100%;
    /*
    border-radius: var(--radius);
    box-shadow: var(--shadow);
*/
}

.wc-intro p {
    color: #334155;
    margin-top: 10px;
}

/* ===== PILLARS ===== */
.wc-pillars {
    background: linear-gradient(180deg, #f7faff 0%, #eef4ff 100%);
    padding: 60px 0;
}

.wc-pillar-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, 1fr);
}

@media(max-width:900px) {
    .wc-pillar-grid {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:600px) {
    .wc-pillar-grid {
        grid-template-columns: 1fr
    }
}

.wc-card {
    background: #fff;
    border: 1px solid #e6ecf6;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 22px;
    text-align: center;
    transition: .3s transform;
}

.wc-card:hover {
    transform: translateY(-5px);
}

.wc-card h3 {
    color: #0A4AA6;
    font-weight: 900;
    margin: .4rem 0;
}

.wc-card p {
    color: #475569;
    font-size: .96rem;
}

/* ===== SUCCESS STORIES ===== */
.wc-stories {
    background: #fff;
    padding: 60px 0;
}

.wc-story-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(2, 1fr);
}

@media(max-width:800px) {
    .wc-story-grid {
        grid-template-columns: 1fr
    }
}

.wc-story {
    background: #f8faff;
    border: 1px solid #e6ecf6;
    border-radius: var(--radius);
    box-shadow: 0 6px 20px rgba(10, 30, 60, .06);
    padding: 20px;
    display: flex;
    gap: 16px;
    align-items: center;
}

.wc-story img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid var(--ikey-gold);
}

.wc-story h4 {
    margin: 0;
    color: #0A4AA6;
    font-weight: 900;
}

.wc-story p {
    margin: 4px 0 0;
    color: #334155;
    font-size: .95rem;
}

/* ===== CTA ===== */
.wc-cta {
    background: linear-gradient(135deg, #0A4AA6 0%, #062d64 100%);
    color: #fff;
    text-align: center;
    padding: 60px 0;
}

.wc-cta h2 {
    margin: 0 0 12px;
    font-weight: 900;
}

.wc-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 999px;
    background: #D4AF37;
    color: #fff;
    font-weight: 800;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
    text-decoration: none;
    transition: .25s;
}

.wc-btn:hover {
    background: #b99627;
}

/* ========== GRID SECTIONS ========== */
.ct-section {
        margin-bottom: -50px;
    padding: 56px 0
}

.ct-head {
    text-align: center;
    margin: 0 auto 26px
}

.ct-overline {
    display: inline-block;
    background: rgba(10, 74, 166, .1);
    color: #0A4AA6;
    padding: 6px 12px;
    border-radius: 999px;
    font-weight: 800
}

.ct-title {
    font-size: clamp(24px, 4vw, 32px);
    margin: 10px 0;
    font-weight: 900;
    color: #0A2d66
}

.ct-lead {
    max-width: 72ch;
    margin: 0 auto;
    color: #475569
}



@media(max-width:960px) {
    .ct-grid {
        grid-template-columns: 1fr
    }
}

/* ========== CONTACT CARD / FORM ========== */
.ct-card {
    margin-bottom: 50px;
    background: #fff;
    border: 1px solid #e6ecf6;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px
}

.ct-card h3 {
    margin: .2rem 0 10px;
    color: #0A4AA6;
    font-weight: 900
}

.ct-meta {
    list-style: none;
    padding: 0;
    margin: 0
}

.ct-meta li {
    display: flex;
    gap: 10px;
    margin: 10px 0;
    color: #334155
}

.ct-meta .ct-tag {
    min-width: 96px;
    font-weight: 800;
    color: #0A4AA6
}

.ct-form .ct-row {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr 1fr
}

@media(max-width:720px) {
    .ct-form .ct-row {
        grid-template-columns: 1fr
    }
}

.ct-form label {
    font-weight: 700;
    color: #0A2d66;
    font-size: .95rem
}

.ct-input,
.ct-textarea,
.ct-select {
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid #d8e2f2;
    background: #fff;
    color: #0f172a;
    outline: none;
}

.ct-input:focus,
.ct-textarea:focus,
.ct-select:focus {
    border-color: #0A4AA6;
    box-shadow: 0 0 0 3px rgba(10, 74, 166, .12)
}

.ct-textarea {
    min-height: 140px;
    resize: vertical
}

.ct-help {
    font-size: .86rem;
    color: #64748b;
    margin-top: 4px
}

/* Buttons */
.ct-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px
}

.ct-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border-radius: 999px;
    font-weight: 800;
    border: 2px solid transparent;
    cursor: pointer;
    background: #0A4AA6;
    color: #fff;
    box-shadow: 0 8px 20px rgba(10, 30, 60, .18);
}

.ct-btn:hover {
    background: #08367a
}

.ct-btn--ghost {
    background: #fff;
    color: #0A4AA6;
    border-color: #0A4AA6;
    box-shadow: none
}

.ct-btn--ghost:hover {
    background: #0A4AA6;
    color: #fff
}

/* ========== MAP / HOURS ========== */
.ct-embed {
    aspect-ratio: 16/10;
    width: 100%;
    border: 0;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    background: #e9eef7;
}

.ct-hours {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 14px
}

@media(max-width:600px) {
    .ct-hours {
        grid-template-columns: 1fr
    }
}

.ct-hour {
    background: #f8faff;
    border: 1px solid #e6ecf6;
    border-radius: 12px;
    padding: 12px
}

.ct-hour strong {
    color: #0A4AA6
}

.ct-note {
    font-size: .9rem;
    color: #64748b;
    margin-top: 8px
}

/* ========== CTA BAR ========== */
.ct-cta {
    background: linear-gradient(135deg, #0A4AA6 0%, #062d64 100%);
    color: #fff;
    text-align: center;
    padding: 48px 0;
    margin-top: 20px
}

.ct-cta h2 {
    margin: 0 0 12px;
    font-weight: 900
}

.ct-cta p {
    margin: 0 0 16px;
    opacity: .95
}

/* FOOTER */
.site-footer {
    background: #0A4AA6;
    color: #fff;
    text-align: center;
    padding: 16px;
}

/* RESPONSIVE */
@media (max-width:900px) {
    .node {
        width: 210px
    }
}

@media (max-width:640px) {
    .tree li {
        display: block;
        padding: 16px 0 0 0;
    }

    .tree li::before,
    .tree li::after {
        display: none;
    }

    /* モバイルは線を簡略化して読みやすく */
    .tree ul ul::before {
        display: none;
    }

    .node img {
        height: 110px;
    }
}

@media (max-width:490px) {

    .apply-date-table th,
    .apply-date-table td {
        padding: 2px 0px;
        border-bottom: 1px solid #e5e7eb;
        text-align: left;
    }
}