@charset "utf-8";
/* =====================================================
   LANIKOA HAWAII
   PRIVATE SCHOOL COLLECTION
===================================================== */

.school-list-page {
    --sl-green: #173f35;
    --sl-green-light: #315f51;
    --sl-gold: #b79a54;
    --sl-cream: #f7f3e9;
    --sl-ivory: #fcfbf7;
    --sl-text: #2c302e;
    --sl-muted: #747872;

    background: var(--sl-ivory);
    color: var(--sl-text);
}

.school-list-container {
    width: min(1180px, calc(100% - 80px));
    margin: 0 auto;
}


/* =====================================================
   HERO
===================================================== */

.school-list-hero {
    position: relative;
    overflow: hidden;
    padding: 150px 0 125px;
    background:
        linear-gradient(
            120deg,
            #f3eddd 0%,
            #faf8f2 52%,
            #edf3ef 100%
        );
}

.school-list-hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 7%;
    width: 1px;
    height: 100%;
    background: rgba(183,154,84,.24);
}

.school-list-hero::after {
    content: "";
    position: absolute;
    width: 470px;
    height: 470px;
    right: -150px;
    top: -190px;
    border-radius: 50%;
    border: 1px solid rgba(183,154,84,.28);
}


/* =====================================================
   SCHOOL LIST HERO - MONSTERA CIRCLE
===================================================== 

.school-list-hero__circle {
    position: absolute;

    width: 340px;
    height: 340px;

    top: -105px;
    right: -70px;

    border-radius: 50%;

    background:
        url("../../Base/mons_triangle_circlr_right.png")
        center center / cover
        no-repeat;

    opacity: 1;
mons_triangle_circlr_right
    overflow: hidden;
}

*/



.school-list-hero .school-list-hero__circle {
    position: absolute !important;

    width: 500px !important;
    height: 500px !important;

    top: -90px !important;
    right: -55px !important;

    border-radius: 50% !important;

    background-image:
        url("../../Base/mons_triangle_circlr_right.png") !important;

    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;

    border: none !important;
    outline: none !important;
    box-shadow: none !important;

    opacity: 0.6 !important;
    overflow: hidden !important;

    z-index: 1 !important;
}




.school-list-hero__content {
    position: relative;
    z-index: 2;
    max-width: 820px;
}

.school-list-eyebrow {
    margin: 0 0 28px;
    color: var(--sl-gold);
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .26em;
}


.school-list-hero h1 {
    margin: 24px 0 0;

    color: #173f35;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(64px, 7vw, 108px);
    font-weight: 500;

    line-height: 0.92;
    letter-spacing: -0.025em;
}



.school-list-hero h1 span {
    display: inline-block;

    margin-top: 8px;
    color: var(--sl-gold);
    font-family: "Montserrat", sans-serif;
    font-size: 0.99em;
    font-style: normal !important;
    font-weight: 600;

    letter-spacing: -0.04em;
    line-height: 1.3;
    text-transform: none;
}





.school-list-hero__jp {
    margin: 48px 0 0;
    color: var(--sl-green);
    font-family: "Noto Serif JP", serif;
    font-size: 25px;
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: .08em;
}

.school-list-hero__lead {
    margin: 28px 0 0;
    color: #666b67;
    font-size: 14px;
    line-height: 2;
}


/* =====================================================
   INTRO
===================================================== */

.school-list-intro {
    padding: 105px 0 65px;
    text-align: center;
}

.school-list-section-en {
    margin: 0 0 15px;
    color: var(--sl-gold);
    font-family: "Montserrat", sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .28em;
}

.school-list-intro h2 {
    margin: 0;
    color: var(--sl-green);
    font-family: "Noto Serif JP", serif;
    font-size: 35px;
    font-weight: 500;
    letter-spacing: .08em;
}

.school-list-intro-text {
    max-width: 760px;
    margin: 35px auto 0;
    color: #666b67;
    font-size: 14px;
    line-height: 2.15;
}


/* =====================================================
   FILTER
===================================================== */

.school-filter {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 55px;
}

.school-filter-btn {
    appearance: none;
    min-width: 135px;
    padding: 13px 20px;
    border: 1px solid #d8d5ca;
    background: transparent;
    color: #74766f;
    cursor: pointer;

    font-family: "Montserrat", sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .13em;

    transition: .3s ease;
}

.school-filter-btn:hover,
.school-filter-btn.active {
    border-color: var(--sl-green);
    background: var(--sl-green);
    color: #fff;
}


/* =====================================================
   SCHOOL COLLECTION
===================================================== */

.school-collection {
    padding: 30px 0 130px;
}

.school-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid #ddd9ce;
    border-left: 1px solid #ddd9ce;
}

.school-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 475px;
    padding: 42px 38px 36px;

    border-right: 1px solid #ddd9ce;
    border-bottom: 1px solid #ddd9ce;

    background: rgba(255,255,255,.72);

    transition:
        transform .35s ease,
        background .35s ease,
        box-shadow .35s ease;
}

.school-card:hover {
    z-index: 3;
    transform: translateY(-5px);
    background: #fff;
    box-shadow:
        0 22px 50px rgba(24,55,46,.10);
}

.school-card-number {
    position: absolute;
    top: 27px;
    right: 31px;

    color: rgba(23,63,53,.12);

    font-family: "Cormorant Garamond", serif;
    font-size: 48px;
    line-height: 1;
}

.school-card-top {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    min-height: 27px;
    margin-bottom: 38px;
}

.school-type {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 10px;

    border: 1px solid rgba(183,154,84,.55);

    color: #8b743d;

    font-family: "Montserrat", sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .09em;
}

.school-card h3 {
    margin: 0;
    padding-right: 20px;

    color: var(--sl-green);

    font-family: "Cormorant Garamond", serif;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.05;
}

.school-name-jp {
    margin: 12px 0 0;

    color: #777b76;

    font-family: "Noto Serif JP", serif;
    font-size: 12px;
    letter-spacing: .07em;
}

.school-card-line {
    width: 42px;
    height: 1px;
    margin: 28px 0;

    background: var(--sl-gold);

    transition: width .35s ease;
}

.school-card:hover .school-card-line {
    width: 78px;
}

.school-card-description {
    margin: 0 0 34px;

    color: #676c68;

    font-size: 13px;
    line-height: 2;
}

.school-card-link {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-top: auto;
    padding-top: 19px;

    border-top: 1px solid #e5e2d9;

    color: var(--sl-green);
    text-decoration: none;

    font-family: "Montserrat", sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .16em;
}

.school-card-link .arrow {
    color: var(--sl-gold);
    font-size: 19px;

    transition: transform .3s ease;
}

.school-card:hover .arrow {
    transform: translateX(6px);
}


/* =====================================================
   CONSULTATION
===================================================== */

.school-list-consultation {
    position: relative;
    padding: 110px 0;
    
    background:
        url("../../Base/Greenbox_long2.png")
        center bottom / cover
        no-repeat;

    overflow: hidden;
}

.school-consultation-box {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.consultation-en {
    margin: 0 0 22px;

    color: #d0b875;

    font-family: "Montserrat", sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .27em;
}

.school-consultation-box h2 {
    margin: 0;

    color: #fff;

    font-family: "Noto Serif JP", serif;
    font-size: 34px;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: .08em;
}

.school-consultation-box > p:not(.consultation-en) {
    max-width: 630px;
    margin: 28px auto 0;

    color: rgba(255,255,255,.72);

    font-size: 13px;
    line-height: 2.1;
}

.consultation-button {
    display: inline-flex;
    align-items: center;
    gap: 45px;

    margin-top: 42px;
    padding: 18px 29px;

    border: 1px solid rgba(208,184,117,.75);

    color: #fff;
    text-decoration: none;

    font-size: 13px;
    letter-spacing: .08em;

    transition: .3s ease;
}

.consultation-button:hover {
    background: #fff;
    border-color: #fff;
    color: var(--sl-green);
}


/* =====================================================
   RESPONSIVE
===================================================== */

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

    .school-list-container {
        width: min(100% - 50px, 900px);
    }

    .school-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .school-list-hero {
        padding: 125px 0 105px;
    }

    .school-list-hero h1 {
        font-size: clamp(58px, 9vw, 82px);
    }
}


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

    .school-list-container {
        width: calc(100% - 36px);
    }

    .school-list-hero {
        padding: 105px 0 85px;
    }

    .school-list-hero h1 {
        font-size: 52px;
        line-height: .9;
    }

    .school-list-hero__jp {
        margin-top: 36px;
        font-size: 20px;
    }

    .school-list-hero__lead {
        font-size: 13px;
    }

    .pc-only {
        display: none;
    }

    .school-list-intro {
        padding: 75px 0 50px;
    }

    .school-list-intro h2 {
        font-size: 27px;
    }

    .school-filter {
        gap: 6px;
        margin-top: 40px;
    }

    .school-filter-btn {
        min-width: 0;
        padding: 11px 14px;
        font-size: 9px;
    }

    .school-grid {
        display: block;
        border-left: 1px solid #ddd9ce;
    }

    .school-card {
        min-height: 0;
        padding: 35px 27px 30px;
    }

    .school-card h3 {
        font-size: 30px;
    }

    .school-card-description {
        margin-bottom: 30px;
    }

    .school-collection {
        padding-bottom: 85px;
    }

    .school-list-consultation {
        padding: 80px 0;
    }

    .school-consultation-box h2 {
        font-size: 27px;
    }
}


/* =====================================================
   OTHER PRIVATE SCHOOLS
===================================================== */

.other-schools {
    position: relative;
    padding: 105px 0 120px;
    background: #f5f2e9;
}

.other-schools-heading {
    max-width: 720px;
    margin: 0 auto 55px;
    text-align: center;
}

.other-schools-heading h2 {
    margin: 0;
    color: #173f35;
    font-family: "Noto Serif JP", serif;
    font-size: 32px;
    font-weight: 500;
    letter-spacing: .08em;
}

.other-schools-heading > p:last-child {
    margin: 25px 0 0;
    color: #73766f;
    font-size: 13px;
    line-height: 2;
}


/* 小さな学校カード */

.other-school-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.other-school-card {
    position: relative;
    min-height: 135px;
    padding: 25px 22px 20px;

    background: rgba(255,255,255,.72);
    border: 1px solid rgba(23,63,53,.12);

    transition:
        transform .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}


/* 上部の小さなゴールドライン */

.other-school-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 22px;

    width: 28px;
    height: 2px;

    background: #b79a54;

    transition: width .3s ease;
}


.other-school-card:hover {
    transform: translateY(-3px);
    background: #fff;

    box-shadow:
        0 12px 30px rgba(23,63,53,.07);
}


.other-school-card:hover::before {
    width: 52px;
}


/* 学校名 */

.other-school-card h3 {
    margin: 0 0 22px;

    color: #173f35;

    font-family: "Cormorant Garamond", serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.15;
}


/* 地区・学年 */

.other-school-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    margin-top: auto;

    color: #85877f;

    font-family: "Montserrat", sans-serif;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .06em;
}


.other-school-meta span:last-child {
    flex: 0 0 auto;

    padding-left: 10px;

    border-left: 1px solid rgba(183,154,84,.45);

    color: #9a8145;
}


/* 注記 */

.other-school-note {
    margin: 32px auto 0;

    color: #92948e;

    font-size: 10px;
    line-height: 1.8;
    text-align: center;
}


/* =========================
   TABLET
========================= */

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

    .other-school-grid {
        grid-template-columns: repeat(3, 1fr);
    }

}


/* =========================
   MOBILE
========================= */

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

    .other-schools {
        padding: 75px 0 85px;
    }

    .other-schools-heading {
        margin-bottom: 40px;
    }

    .other-schools-heading h2 {
        font-size: 26px;
    }

    .other-school-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .other-school-card {
        min-height: 125px;
        padding: 22px 17px 17px;
    }

    .other-school-card::before {
        left: 17px;
    }

    .other-school-card h3 {
        margin-bottom: 18px;
        font-size: 18px;
    }

    .other-school-meta {
        display: block;
        line-height: 1.7;
    }

    .other-school-meta span {
        display: block;
    }

    .other-school-meta span:last-child {
        margin-top: 4px;
        padding-left: 0;
        border-left: 0;
    }
}




/* =====================================================
   FEATURED SCHOOL CARDS
   柔らかいLANIKOAカラー
===================================================== */

.school-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 430px;
    padding: 38px 34px 32px;

    background: #fbf8ef;

    border-right: 1px solid rgba(23,63,53,.10);
    border-bottom: 1px solid rgba(23,63,53,.10);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        background .35s ease;
}


/* 3色を自然にローテーション */

.school-card:nth-child(3n + 1) {
    background:
        linear-gradient(
            145deg,
            #fbf7eb 0%,
            #f8f3e5 100%
        );
}

.school-card:nth-child(3n + 2) {
    background:
        linear-gradient(
            145deg,
            #f5f7ef 0%,
            #edf3ea 100%
        );
}

.school-card:nth-child(3n + 3) {
    background:
        linear-gradient(
            145deg,
            #faf5ee 0%,
            #f4ecdf 100%
        );
}


/* 内側にほんのり光 */

.school-card::after {
    content: "";

    position: absolute;
    inset: 12px;

    border: 1px solid rgba(255,255,255,.55);

    pointer-events: none;
}


/* Hover */

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

    box-shadow:
        0 20px 45px rgba(23,63,53,.08);
}


/* 番号 */

.school-card-number {
    color: rgba(183,154,84,.70);
}


/* 学校名 */

.school-card h3 {
    color: #173f35;
}


/* 日本語名 */

.school-name-jp {
    color: #657268;
}


/* 説明文 */

.school-card-description {
    color: #60675f;
}


/* =====================================================
   LANIKOA RECOMMENDED SCHOOL
===================================================== */

.school-card-featured {
    background:
        linear-gradient(
            145deg,
            #f3f7ec 0%,
            #e9f1df 100%
        ) !important;

    box-shadow:
        inset 0 0 0 1px rgba(183,154,84,.22);
}

.school-card-featured::before {
    content: "LANIKOA PICK";

    position: absolute;
    top: 18px;
    right: 20px;

    padding: 5px 10px;

    background: #173f35;
    color: #fff;

    font-family: "Montserrat", sans-serif;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: .16em;

    z-index: 3;
}


/* =====================================================
   HERO "School in Hawaiʻi"
   大画面PC＝1行 / 小さいPC・スマホ＝折り返しOK
===================================================== */

/* 通常は折り返し可能 */
.school-list-hero h1 span {
    display: block !important;
    width: auto !important;

    font-size: clamp(52px, 5.3vw, 86px) !important;
    line-height: 1.1 !important;

    white-space: normal !important;
}

/* 幅が十分あるPCだけ1行にする */
@media screen and (min-width: 1100px) {

    .school-list-hero h1 span {
        white-space: nowrap !important;
    }

}

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

    .school-list-hero h1 span {
        font-size: 44px !important;
        line-height: 1.12 !important;
        letter-spacing: -0.03em !important;
        white-space: normal !important;
    }

}

/* ===== Remove unwanted LEFT hero vertical line only ===== */
.school-list-hero::before {
    display: none !important;
}