/* =========================================================
   PREMIUM PAGE
========================================================= */

.premium-page {
    overflow: hidden;

    color: #37342f;
    background: #f7f5f0;
}


/* =========================================================
   HERO
   COMPACT EDITORIAL LAYOUT
========================================================= */

.premium-hero {
    position: relative;

    width: 100%;

    padding: 160px 6% 110px;

    background: #f7f5f0;
}

.premium-hero__inner {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 0.9fr);

    align-items: center;

    gap: clamp(60px, 8vw, 130px);

    width: 100%;
    max-width: 1320px;

    margin: 0 auto;
}


/* HERO CONTENT */

.premium-hero__content {
    width: 100%;
    min-width: 0;
}

.premium-hero__label {
    margin: 0 0 38px;

    color: #858178;

    font-family:
        "garamond-premier-pro",
        "Times New Roman",
        serif;

    font-size: 2.2rem;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.06em;
}

.premium-hero__title {
    margin: 0;

    color: #37342f;

    font-size: clamp(2.8rem, 3vw, 4.2rem);
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: 0.07em;
}

.premium-hero__subtitle {
    margin: 38px 0 0;

    color: #37342f;

    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.9;
    letter-spacing: 0.06em;
}

.premium-hero__description {
    margin: 12px 0 0;

    color: #77736c;

    font-size: 1.3rem;
    line-height: 1.9;
    letter-spacing: 0.05em;
}


/* HERO VISUAL */

.premium-hero__visual {
    width: 100%;
    min-width: 0;

    overflow: hidden;

    background: #e9e5dd;
}

.premium-hero__visual picture {
    display: block;

    width: 100%;
    height: 100%;
}

.premium-hero__visual img {
    display: block;

    width: 100%;
    height: auto;

    aspect-ratio: 4 / 5;

    object-fit: cover;
    object-position: center;
}


/* =========================================================
   INTRODUCTION
========================================================= */

.premium-intro {
    padding: 110px 25px 85px;

    background: #f7f5f0;
}

.premium-intro__inner {
    width: min(100%, 720px);

    margin: 0 auto;
}


/* INTRO LEAD */

.premium-intro__lead {
    margin: 0 0 20px;
}

.premium-intro__lead h2,
.premium-intro__lead h3 {
    margin: 0;

    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.05em;
}


/* INTRO BODY */

.premium-intro__text {
    font-size: 1.5rem;
    line-height: 2.15;
    letter-spacing: 0.055em;
}

.premium-intro__text > p {
    margin: 0 0 1.45em;
}

.premium-intro__text > p:last-child {
    margin-bottom: 0;
}


/* KEYWORDS */

.premium-intro__keywords {
    margin: 32px 0;
    padding: 25px 0;

    border-top: 1px solid rgba(55, 52, 47, 0.15);
    border-bottom: 1px solid rgba(55, 52, 47, 0.15);
}

.premium-intro__keywords p {
    margin: 0 0 6px;

    font-size: 1.4rem;
    line-height: 1.8;
    letter-spacing: 0.055em;
}

.premium-intro__keywords p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   QUICK RESERVATION
========================================================= */

.premium-quick-reservation {
    padding: 0 25px 110px;

    background: #f7f5f0;
}

.premium-quick-reservation__inner {
    width: min(100%, 520px);

    margin: 0 auto;

    text-align: center;
}

.premium-quick-reservation__course {
    margin: 0;

    font-family:
        "garamond-premier-pro",
        "Times New Roman",
        serif;

    font-size: 2.2rem;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.035em;
}

.premium-quick-reservation__price {
    margin: 14px 0 0;

    font-size: 1.3rem;
    line-height: 1.8;
    letter-spacing: 0.03em;
}

.premium-quick-reservation__button {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 280px;

    margin: 28px auto 0;
    padding: 13px 0;

    border-top: 1px solid rgba(55, 52, 47, 0.3);
    border-bottom: 1px solid rgba(55, 52, 47, 0.3);

    color: inherit;

    font-family:
        "garamond-premier-pro",
        "Times New Roman",
        serif;

    font-size: 1.2rem;
    line-height: 1.4;
    letter-spacing: 0.1em;

    text-decoration: none;

    transition: opacity 0.3s ease;
}

.premium-quick-reservation__button:hover {
    opacity: 0.55;
}


/* =========================================================
   MESSAGE VISUAL
   PHOTO ONLY
========================================================= */

.premium-message {
    width: 100%;
    height: 520px;

    overflow: hidden;

    background: #989a91;
}

.premium-message__visual {
    width: 100%;
    height: 100%;
}

.premium-message__visual picture {
    display: block;

    width: 100%;
    height: 100%;
}

.premium-message__visual img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* =========================================================
   TREATMENT FLOW
========================================================= */

.premium-flow {
    padding: 135px 0 150px;

    background: #fff;
}

.premium-flow__inner {
    width: min(88%, 1180px);

    margin: 0 auto;
}

.premium-flow__header {
    margin: 0 0 95px;

    text-align: center;
}

.premium-flow__label {
    margin: 0 0 13px;

    color: #858178;

    font-family:
        "garamond-premier-pro",
        "Times New Roman",
        serif;

    font-size: 1.2rem;
    line-height: 1.4;
    letter-spacing: 0.1em;
}

.premium-flow__title {
    margin: 0;

    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0.06em;
}


/* =========================================================
   FLOW BLOCK
========================================================= */

.premium-flow__block {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    align-items: center;

    gap: clamp(65px, 8vw, 120px);

    margin-bottom: 125px;
}

.premium-flow__block:last-child {
    margin-bottom: 0;
}


/* FLOW TEXT */

.premium-flow__text {
    width: 100%;
    max-width: 470px;

    font-size: 1.5rem;
    line-height: 2.15;
    letter-spacing: 0.055em;
}

.premium-flow__block--01 .premium-flow__text,
.premium-flow__block--03 .premium-flow__text {
    justify-self: end;
}

.premium-flow__block--02 .premium-flow__text {
    justify-self: start;
}

.premium-flow__text p {
    margin: 0 0 1.5em;
}

.premium-flow__text p:last-child {
    margin-bottom: 0;
}


/* FLOW VISUAL */

.premium-flow__visual {
    width: 100%;
    max-width: 520px;
}

.premium-flow__block--01 .premium-flow__visual,
.premium-flow__block--03 .premium-flow__visual {
    justify-self: start;
}

.premium-flow__block--02 .premium-flow__visual {
    justify-self: end;
}

.premium-flow__visual img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: cover;
}


/* =========================================================
   METHOD MESSAGE
========================================================= */

.premium-method {
    padding: 90px 25px;

    background: #d9ded2;
}

.premium-method__inner {
    width: min(100%, 720px);

    margin: 0 auto;
}

.premium-method__words {
    margin-bottom: 28px;
}

.premium-method__words p {
    margin: 0 0 7px;

    font-size: 1.4rem;
    line-height: 1.8;
    letter-spacing: 0.055em;
}

.premium-method__words p:last-child {
    margin-bottom: 0;
}

.premium-method__closing {
    margin: 0;

    font-size: 1.5rem;
    line-height: 2.05;
    letter-spacing: 0.055em;
}


/* =========================================================
   COURSE / RESERVATION
========================================================= */

.premium-information {
    padding: 90px 25px 95px;

    background: #f7f5f0;
}

.premium-information__inner {
    width: min(100%, 520px);

    margin: 0 auto;

    text-align: center;
}

.premium-information__course {
    margin: 0;

    font-family:
        "garamond-premier-pro",
        "Times New Roman",
        serif;

    font-size: 2.8rem;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.035em;
}

.premium-information__price {
    margin: 15px 0 0;

    font-size: 1.3rem;
    line-height: 1.8;
    letter-spacing: 0.03em;
}

.premium-information__reserve {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 280px;

    margin: 34px auto 0;
    padding: 13px 0;

    border-top: 1px solid rgba(55, 52, 47, 0.3);
    border-bottom: 1px solid rgba(55, 52, 47, 0.3);

    color: inherit;

    font-family:
        "garamond-premier-pro",
        "Times New Roman",
        serif;

    font-size: 1.2rem;
    line-height: 1.4;
    letter-spacing: 0.1em;

    text-decoration: none;

    transition: opacity 0.3s ease;
}

.premium-information__reserve:hover {
    opacity: 0.55;
}


/* =========================================================
   PHYTO STEAM × PREMIUM
========================================================= */

.premium-phyto {
    width: 100%;

    background: #f7f5f0;
}


/* PHYTO VISUAL */

.premium-phyto__visual {
    position: relative;

    width: 100%;
    height: 620px;

    overflow: hidden;

    background: #344233;
}


/* PC / SMARTPHONE IMAGE */

.premium-phyto__visual picture {
    position: absolute;
    inset: 0;

    display: block;

    width: 100%;
    height: 100%;
}

.premium-phyto__visual picture img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}

.premium-phyto__visual-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(17, 27, 17, 0.56) 0%,
            rgba(17, 27, 17, 0.24) 48%,
            rgba(17, 27, 17, 0.08) 100%
        );

    pointer-events: none;
}

.premium-phyto__visual-content {
    position: absolute;
    left: 7%;
    bottom: 13%;
    z-index: 2;

    width: min(560px, 80%);

    color: #f3f0e8;
}

.premium-phyto__eyebrow {
    margin: 0 0 12px;

    color: rgba(243, 240, 232, 0.72);

    font-size: 1.3rem;
    line-height: 1.8;
    letter-spacing: 0.06em;
}

.premium-phyto__visual-content h2 {
    margin: 0;

    font-size: 2.8rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.07em;
}

.premium-phyto__name {
    margin: 18px 0 0;

    color: rgba(243, 240, 232, 0.68);

    font-family:
        "garamond-premier-pro",
        "Times New Roman",
        serif;

    font-size: 1.3rem;
    line-height: 1.5;
    letter-spacing: 0.07em;
}


/* PHYTO BODY */

.premium-phyto__body {
    padding: 110px 25px 120px;

    background: #f7f5f0;
}

.premium-phyto__body-inner {
    width: min(100%, 720px);

    margin: 0 auto;
}

.premium-phyto__body h3 {
    margin: 0 0 26px;

    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.85;
    letter-spacing: 0.055em;
}

.premium-phyto__text {
    font-size: 1.5rem;
    line-height: 2.15;
    letter-spacing: 0.055em;
}

.premium-phyto__text p {
    margin: 0 0 1.5em;
}

.premium-phyto__text p:last-child {
    margin-bottom: 0;
}


/* PHYTO LINK */

.premium-phyto__actions {
    width: min(100%, 420px);

    margin-top: 45px;
}

.premium-phyto__link {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;

    padding: 13px 0;

    border-bottom: 1px solid rgba(55, 52, 47, 0.3);

    color: inherit;

    font-size: 1.2rem;
    line-height: 1.7;
    letter-spacing: 0.05em;

    text-decoration: none;

    transition: opacity 0.3s ease;
}

.premium-phyto__link:hover {
    opacity: 0.55;
}


/* =========================================================
   OTHER COURSES
========================================================= */

.premium-other-courses {
    padding: 120px 25px 140px;

    background: #fff;
}

.premium-other-courses__inner {
    width: min(100%, 1100px);

    margin: 0 auto;
}

.premium-other-courses__header {
    margin-bottom: 65px;

    text-align: center;
}

.premium-other-courses__label {
    margin: 0 0 12px;

    color: #858178;

    font-family:
        "garamond-premier-pro",
        "Times New Roman",
        serif;

    font-size: 1.5rem;
    line-height: 1.4;
    letter-spacing: 0.07em;
}

.premium-other-courses__title {
    margin: 0;

    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.06em;
}


/* GRID */

.premium-other-courses__grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 55px;
}

.premium-other-courses__item {
    min-width: 0;
}


/* CARD */

.premium-other-courses__card {
    display: block;

    color: inherit;
    text-decoration: none;
}

.premium-other-courses__visual {
    width: 100%;

    overflow: hidden;

    background: #e9e5dd;
}

.premium-other-courses__visual img {
    display: block;

    width: 100%;

    aspect-ratio: 4 / 3;

    object-fit: cover;

    transition: transform 0.6s ease;
}

.premium-other-courses__card:hover
.premium-other-courses__visual img {
    transform: scale(1.035);
}


/* CONTENT */

.premium-other-courses__content {
    padding: 25px 0 0;
}

.premium-other-courses__content h3 {
    margin: 0;

    font-family:
        "garamond-premier-pro",
        "Times New Roman",
        serif;

    font-size: 2.4rem;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0.035em;
}

.premium-other-courses__description {
    margin: 15px 0 0;

    font-size: 1.4rem;
    line-height: 1.8;
    letter-spacing: 0.055em;
}

.premium-other-courses__detail {
    margin: 9px 0 0;

    color: #77736c;

    font-size: 1.2rem;
    line-height: 1.8;
    letter-spacing: 0.04em;
}

.premium-other-courses__more {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;

    margin-top: 28px;
    padding: 13px 0;

    border-bottom: 1px solid rgba(55, 52, 47, 0.3);

    font-family:
        "garamond-premier-pro",
        "Times New Roman",
        serif;

    font-size: 1.2rem;
    line-height: 1.4;
    letter-spacing: 0.1em;

    transition: opacity 0.3s ease;
}

.premium-other-courses__card:hover
.premium-other-courses__more {
    opacity: 0.55;
}


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

@media screen and (max-width: 1024px) and (min-width: 835px) {

    .premium-hero {
        padding: 145px 5% 90px;
    }

    .premium-hero__inner {
        gap: 45px;
    }

    .premium-hero__title {
        font-size: 2.8rem;
    }

    .premium-hero__subtitle {
        font-size: 1.3rem;
    }

    .premium-flow__block {
        gap: 55px;
    }

    .premium-flow__text {
        max-width: 440px;
    }

    .premium-phyto__visual {
        height: 560px;
    }

    .premium-other-courses__grid {
        gap: 35px;
    }

}


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

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


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

    .premium-hero {
        padding: 135px 25px 65px;
    }

    .premium-hero__inner {
        display: flex;
        flex-direction: column;

        align-items: stretch;

        gap: 45px;
    }

    .premium-hero__content {
        width: 100%;
    }

    .premium-hero__label {
        margin-bottom: 25px;

        font-size: 2rem;
    }

    .premium-hero__title {
        font-size: 2.8rem;
        line-height: 1.6;
    }

    .premium-hero__subtitle {
        margin-top: 28px;

        font-size: 1.3rem;
        line-height: 1.8;
    }

    .premium-hero__description {
        margin-top: 10px;

        font-size: 1.2rem;
        line-height: 1.8;
    }

    .premium-hero__visual {
        width: 100%;
    }

    .premium-hero__visual img {
        aspect-ratio: 4 / 3;

        object-position: center;
    }


    /* =====================================================
       INTRODUCTION
    ===================================================== */

    .premium-intro {
        padding: 75px 25px 60px;
    }

    .premium-intro__inner {
        width: 100%;
    }

    .premium-intro__lead {
        margin-bottom: 17px;
    }

    .premium-intro__lead h2,
    .premium-intro__lead h3 {
        font-size: 1.4rem;
        line-height: 1.8;
    }

    .premium-intro__text {
        font-size: 1.4rem;
        line-height: 2.05;
    }

    .premium-intro__text > p {
        margin-bottom: 1.35em;
    }

    .premium-intro__keywords {
        margin: 27px 0;
        padding: 22px 0;
    }

    .premium-intro__keywords p {
        margin-bottom: 5px;

        font-size: 1.3rem;
        line-height: 1.8;
    }


    /* =====================================================
       QUICK RESERVATION
    ===================================================== */

    .premium-quick-reservation {
        padding: 0 25px 90px;
    }

    .premium-quick-reservation__course {
        font-size: 2.1rem;
    }

    .premium-quick-reservation__price {
        font-size: 1.2rem;
    }

    .premium-quick-reservation__button {
        width: 100%;
        max-width: 280px;
    }


    /* =====================================================
       MESSAGE VISUAL
    ===================================================== */

    .premium-message {
        height: 390px;
    }


    /* =====================================================
       TREATMENT FLOW
    ===================================================== */

    .premium-flow {
        padding: 90px 0 100px;
    }

    .premium-flow__inner {
        width: calc(100% - 50px);
    }

    .premium-flow__header {
        margin-bottom: 60px;

        text-align: left;
    }

    .premium-flow__label {
        margin-bottom: 10px;

        font-size: 1.1rem;
    }

    .premium-flow__title {
        font-size: 1.6rem;
    }


    /* FLOW BLOCK */

    .premium-flow__block {
        display: flex;
        flex-direction: column;

        gap: 30px;

        margin-bottom: 75px;
    }

    .premium-flow__block:last-child {
        margin-bottom: 0;
    }


    /* MOBILE:
       TEXT -> IMAGE */

    .premium-flow__block--01 .premium-flow__text,
    .premium-flow__block--02 .premium-flow__text,
    .premium-flow__block--03 .premium-flow__text {
        order: 1;
    }

    .premium-flow__block--01 .premium-flow__visual,
    .premium-flow__block--02 .premium-flow__visual,
    .premium-flow__block--03 .premium-flow__visual {
        order: 2;
    }


    /* FLOW TEXT */

    .premium-flow__text,
    .premium-flow__block--01 .premium-flow__text,
    .premium-flow__block--02 .premium-flow__text,
    .premium-flow__block--03 .premium-flow__text {
        width: 100%;
        max-width: none;

        justify-self: auto;

        font-size: 1.4rem;
        line-height: 2.05;
    }

    .premium-flow__text p {
        margin-bottom: 1.35em;
    }


    /* FLOW VISUAL */

    .premium-flow__visual,
    .premium-flow__block--01 .premium-flow__visual,
    .premium-flow__block--02 .premium-flow__visual,
    .premium-flow__block--03 .premium-flow__visual {
        width: 100%;
        max-width: none;

        justify-self: auto;
    }


    /* =====================================================
       METHOD
    ===================================================== */

    .premium-method {
        padding: 70px 25px 75px;
    }

    .premium-method__inner {
        width: 100%;
    }

    .premium-method__words {
        margin-bottom: 24px;
    }

    .premium-method__words p {
        margin-bottom: 5px;

        font-size: 1.3rem;
        line-height: 1.8;
    }

    .premium-method__closing {
        font-size: 1.4rem;
        line-height: 2;
    }


    /* =====================================================
       COURSE / RESERVATION
    ===================================================== */

    .premium-information {
        padding: 75px 25px 80px;
    }

    .premium-information__inner {
        width: 100%;
    }

    .premium-information__course {
        font-size: 2.6rem;
    }

    .premium-information__price {
        margin-top: 13px;

        font-size: 1.2rem;
    }

    .premium-information__reserve {
        width: 100%;

        margin-top: 30px;

        font-size: 1.2rem;
    }


    /* =====================================================
       PHYTO STEAM × PREMIUM
    ===================================================== */

    .premium-phyto__visual {
        height: 62svh;
        min-height: 440px;
    }

    .premium-phyto__visual-overlay {
        background:
            linear-gradient(
                0deg,
                rgba(17, 27, 17, 0.56) 0%,
                rgba(17, 27, 17, 0.18) 62%,
                rgba(17, 27, 17, 0.06) 100%
            );
    }

    .premium-phyto__visual-content {
        left: 25px;
        bottom: 55px;

        width: calc(100% - 50px);
    }

    .premium-phyto__eyebrow {
        margin-bottom: 10px;

        font-size: 1.2rem;
    }

    .premium-phyto__visual-content h2 {
        font-size: 2.4rem;
        line-height: 1.55;
    }

    .premium-phyto__name {
        margin-top: 14px;

        font-size: 1.2rem;
    }


    /* PHYTO BODY */

    .premium-phyto__body {
        padding: 80px 25px 90px;
    }

    .premium-phyto__body-inner {
        width: 100%;
    }

    .premium-phyto__body h3 {
        margin-bottom: 20px;

        font-size: 1.4rem;
        line-height: 1.85;
    }

    .premium-phyto__text {
        font-size: 1.4rem;
        line-height: 2.05;
    }

    .premium-phyto__text p {
        margin-bottom: 1.35em;
    }


    /* PHYTO LINK */

    .premium-phyto__actions {
        width: 100%;

        margin-top: 35px;
    }

    .premium-phyto__link {
        width: 100%;

        padding: 12px 0;

        font-size: 1.2rem;
    }


    /* =====================================================
       OTHER COURSES
    ===================================================== */

    .premium-other-courses {
        padding: 85px 25px 100px;
    }

    .premium-other-courses__header {
        margin-bottom: 45px;

        text-align: left;
    }

    .premium-other-courses__label {
        font-size: 1.4rem;
    }

    .premium-other-courses__title {
        font-size: 1.5rem;
    }

    .premium-other-courses__grid {
        grid-template-columns: 1fr;

        gap: 60px;
    }

    .premium-other-courses__content {
        padding-top: 20px;
    }

    .premium-other-courses__content h3 {
        font-size: 2.2rem;
    }

    .premium-other-courses__description {
        margin-top: 12px;

        font-size: 1.3rem;
    }

    .premium-other-courses__detail {
        font-size: 1.2rem;
    }

    .premium-other-courses__more {
        margin-top: 23px;
    }

}