/* =========================================================
   LUENA STAY - ABOUT US
   ========================================================= */

.about-page {
    overflow: hidden;
    background: #fff;
}

.about-page .section {
    padding: 120px 0;
}

.about-page .section-inner {
    width: min(calc(100% - 64px), 1180px);
    margin: 0 auto;
}

.about-label {
    margin: 0 0 18px;
    color: var(--gold, #c9a45a);
    font-family: var(--font-en, "Times New Roman", Georgia, serif);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .22em;
}

.pc-only { display: inline; }

/* HERO */
.about-hero {
    min-height: 72vh;
    display: flex;
    align-items: flex-end;
    position: relative;
    padding: calc(var(--header-height, 84px) + 100px) 0 100px;
    background:
        radial-gradient(circle at 82% 22%, rgba(255, 238, 190, .78), transparent 30%),
        linear-gradient(125deg, #c8eef3 0%, #8bd4df 42%, #f2e2bd 100%);
}

.about-hero::after {
    content: "";
    position: absolute;
    inset: auto -10% -25% 35%;
    height: 58%;
    border-radius: 50% 50% 0 0;
    background: rgba(255, 255, 255, .16);
    transform: rotate(-5deg);
}

.about-hero__inner {
    width: min(calc(100% - 96px), 1440px);
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
    z-index: 1;
}

.about-hero__eyebrow {
    margin: 0 0 20px;
    font-family: var(--font-en, "Times New Roman", Georgia, serif);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .24em;
    color: #111;
}

.about-hero__title {
    max-width: 980px;
    margin: 0;
    color: #111;
    font-size: clamp(44px, 5vw, 76px);
    line-height: 1.35;
    letter-spacing: .02em;
}

.about-hero__lead {
    margin: 34px 0 0;
    color: rgba(17, 17, 17, .76);
    font-size: 16px;
    line-height: 2;
}

/* INTRO */
.about-intro__grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 90px;
    align-items: center;
}

.about-photo-placeholder,
.school-card__image {
    display: grid;
    place-items: center;
    min-height: 620px;
    background: linear-gradient(145deg, rgba(139, 212, 223, .6), rgba(247, 243, 235, .95));
    color: rgba(15, 42, 61, .5);
    font-family: var(--font-en, "Times New Roman", Georgia, serif);
    font-size: 12px;
    letter-spacing: .18em;
}

.about-photo-placeholder--tall { min-height: 680px; }

.about-intro__content h2,
.events-content h2,
.school-heading h2,
.project-grid h2,
.future-section h2,
.destination-section h2 {
    margin: 0;
    color: var(--navy, #0f2a3d);
    font-size: clamp(32px, 3.5vw, 52px);
    line-height: 1.5;
}

.about-intro__content > p:not(.about-label):not(.about-intro__message),
.events-content > p:not(.about-label),
.vision-copy p,
.school-heading > p:not(.about-label),
.project-copy p {
    color: #53636c;
    font-size: 15px;
    line-height: 2.15;
}

.about-intro__message {
    margin: 34px 0;
    padding-left: 24px;
    border-left: 2px solid var(--gold, #c9a45a);
    color: var(--navy, #0f2a3d);
    font-size: 20px;
    font-weight: 700;
    line-height: 2;
}

/* VISION */
.vision-section { background: var(--ivory, #f7f3eb); }

.about-heading {
    max-width: 760px;
    margin-bottom: 56px;
}

.about-heading h2 {
    margin: 0;
    color: var(--navy, #0f2a3d);
    font-size: clamp(34px, 4vw, 58px);
}

.vision-copy {
    max-width: 850px;
    margin-left: auto;
}

.vision-keywords {
    margin-top: 46px !important;
    padding-top: 30px;
    border-top: 1px solid rgba(15, 42, 61, .16);
    color: var(--navy, #0f2a3d) !important;
    font-family: var(--font-en, "Times New Roman", Georgia, serif);
    font-size: clamp(17px, 2vw, 25px) !important;
    font-weight: 700;
    letter-spacing: .08em;
}

/* EVENTS */
.events-grid {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: 90px;
    align-items: center;
}

.events-content p strong { color: var(--navy, #0f2a3d); }

/* SCHOOL */
.school-section { background: #f3fbfc; }

.school-heading {
    max-width: 840px;
    margin-bottom: 70px;
}

.school-heading > p:not(.about-label) { max-width: 760px; }

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

.school-card {
    background: #fff;
    border: 1px solid rgba(15, 42, 61, .08);
}

.school-card__image { min-height: 300px; }

.school-card__body { padding: 34px 30px 40px; }

.school-card__number {
    margin: 0;
    color: var(--gold, #c9a45a);
    font-family: var(--font-en, "Times New Roman", Georgia, serif);
    font-size: 12px;
    letter-spacing: .16em;
}

.school-card__en {
    margin: 8px 0 20px;
    color: #71818a;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2em;
}

.school-card h3 {
    margin: 0 0 22px;
    color: var(--navy, #0f2a3d);
    font-size: 23px;
    line-height: 1.55;
}

.school-card__body > p:last-child {
    margin-bottom: 0;
    color: #64737b;
    font-size: 14px;
    line-height: 2;
}

/* DESTINATION */
.destination-section {
    position: relative;
    padding: 145px 0;
    color: #fff;
    background: linear-gradient(125deg, #2d9fba 0%, #71c9d9 48%, #d9c18c 100%);
}

.destination-section__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(9, 28, 41, .38), rgba(9, 28, 41, .05));
}

.destination-section__inner {
    position: relative;
    z-index: 1;
}

.destination-section .about-label { color: #fff2c7; }

.destination-section h2 {
    color: #fff;
    font-size: clamp(38px, 5vw, 68px);
}

.destination-lines { margin: 52px 0; }

.destination-lines p {
    margin: 8px 0;
    font-size: clamp(19px, 2.1vw, 28px);
    font-weight: 700;
}

.destination-copy {
    max-width: 760px;
    margin: 0;
    color: rgba(255, 255, 255, .9);
    font-size: 15px;
    line-height: 2.1;
}

/* PROJECT */
.project-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 100px;
}

.project-copy { padding-top: 12px; }

/* FUTURE */
.future-section {
    background: var(--ivory, #f7f3eb);
    text-align: center;
}

.future-section__inner { max-width: 940px !important; }

.future-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 48px 0;
}

.future-list span {
    padding: 12px 18px;
    border: 1px solid rgba(15, 42, 61, .14);
    border-radius: 999px;
    background: rgba(255, 255, 255, .68);
    color: #52616a;
    font-size: 13px;
}

.future-copy {
    margin: 50px 0 0;
    color: #65737b;
    font-size: 16px;
    line-height: 2;
}

.future-message {
    margin: 52px 0 0;
    color: var(--navy, #0f2a3d);
    font-size: clamp(28px, 4vw, 50px);
    font-weight: 700;
    line-height: 1.6;
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .about-page .section { padding: 90px 0; }

    .about-intro__grid,
    .events-grid,
    .project-grid {
        grid-template-columns: 1fr;
        gap: 52px;
    }

    .events-visual { order: -1; }

    .school-cards { grid-template-columns: 1fr; }

    .school-card {
        display: grid;
        grid-template-columns: .85fr 1.15fr;
    }

    .school-card__image { min-height: 100%; }

    .about-photo-placeholder,
    .about-photo-placeholder--tall {
        min-height: 480px;
    }
}

@media (max-width: 640px) {
    .about-page .section { padding: 72px 0; }

    .about-page .section-inner { width: calc(100% - 32px); }

    .about-hero {
        min-height: 78svh;
        padding: calc(var(--header-height, 84px) + 70px) 0 64px;
    }

    .about-hero__inner {
        width: calc(100% - 32px);
        padding: 0;
    }

    .about-hero__title {
        font-size: 38px;
        line-height: 1.45;
    }

    .about-hero__lead { font-size: 14px; }

    .pc-only { display: none; }

    .about-photo-placeholder,
    .about-photo-placeholder--tall {
        min-height: 380px;
    }

    .about-intro__message { font-size: 17px; }

    .school-card { display: block; }

    .school-card__image { min-height: 250px; }

    .destination-section { padding: 100px 0; }

    .destination-lines p { font-size: 18px; }

    .future-list {
        align-items: stretch;
        flex-direction: column;
    }
}
/* ===== ABOUT INTRO PHOTO ===== */

.about-intro__visual {
    width: 100%;
}

.about-intro__photo {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 420px;
    object-fit: cover;
    border-radius: 28px;
    box-shadow: 0 20px 50px rgba(18, 53, 75, 0.10);
}

@media (max-width: 768px) {
    .about-intro__photo {
        min-height: 280px;
        border-radius: 20px;
    }
}
/* =========================================================
   WHO WE ARE
   タイトル上 / 写真＋文章を下に配置
========================================================= */

.about-intro__heading {
    width: 100%;
    text-align: center;
    margin-bottom: 56px;
}

.about-intro__heading .about-label {
    margin-bottom: 18px;
}

.about-intro__heading h2 {
    margin: 0;

    color: #12364a;
    font-size: clamp(32px, 3.5vw, 52px);
    line-height: 1.3;
    letter-spacing: -0.035em;
    font-weight: 700;

    /* PCでは1行を維持 */
    white-space: nowrap;
}


/* 写真＋文章 */

.about-intro__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: center;
    gap: 70px;
}


/* 写真 */

.about-intro__visual {
    width: 100%;
}

.about-intro__photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;

    object-fit: cover;
    border-radius: 28px;

    box-shadow: 0 20px 50px rgba(18, 53, 75, 0.10);
}


/* 説明文 */

.about-intro__content {
    min-width: 0;
}

.about-intro__content > p:first-child {
    margin-top: 0;
}


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

@media (max-width: 900px) {

    .about-intro__heading {
        margin-bottom: 36px;
    }

    .about-intro__heading h2 {
        font-size: clamp(28px, 6vw, 40px);

        /* スマホでは必要に応じて改行 */
        white-space: normal;
    }

    .about-intro__grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .about-intro__photo {
        aspect-ratio: 16 / 10;
        border-radius: 20px;
    }
}