/* =========================================================
   KN DESIGN
   PRICE PAGE
========================================================= */

.kn-price-page {

    --brown: #675748;
    --brown-light: #8e7560;
    --beige: #ede4da;
    --beige-light: #f8f5f1;
    --cream: #fcfaf7;

    --green: #83917b;
    --green-light: #edf1ea;

    --pink: #c87978;
    --gold: #b69061;

    --line: #e6ddd4;

    width: 100%;

    margin: 0;

    background:
        linear-gradient(
            180deg,
            #fcfaf7 0%,
            #f8f5f1 100%
        );

    color: var(--brown);

    font-family:
        "Noto Sans JP",
        "Yu Gothic",
        "Hiragino Kaku Gothic ProN",
        sans-serif;
}


/* =========================================================
   COMMON
========================================================= */

.kn-price-page * {
    box-sizing: border-box;
}


.kn-price-container {

    width: min(1180px, 92%);

    margin: 0 auto;
}


.kn-price-en {

    margin: 0 0 8px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 13px;

    letter-spacing: 0.22em;

    color: #ad8b68;
}



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

.kn-price-hero {

    position: relative;

    padding:
        90px
        20px
        62px;

    text-align: center;

    background:
        radial-gradient(
            circle at 15% 10%,
            rgba(211, 191, 169, 0.13),
            transparent 35%
        ),
        radial-gradient(
            circle at 88% 14%,
            rgba(211, 191, 169, 0.13),
            transparent 32%
        ),
        #fcfaf7;

    border-bottom:
        1px solid #e4d8cc;
}


.kn-price-title {

    margin: 0;

    font-family:
        "Noto Serif JP",
        "Yu Mincho",
        serif;

    font-size: clamp(36px, 5vw, 55px);

    line-height: 1.4;

    font-weight: 500;

    letter-spacing: 0.12em;

    color: #46372d;
}


.kn-price-description {

    margin:
        22px
        auto
        0;

    max-width: 700px;

    font-size: 15px;

    line-height: 2;

    color:
        rgba(80, 64, 52, 0.78);
}



/* =========================================================
   CAMPAIGN
========================================================= */

.kn-campaign {

    padding:
        55px
        0
        25px;
}


.kn-campaign-box {

    display: grid;

    grid-template-columns:
        270px 1fr;

    align-items: center;

    min-height: 270px;

    overflow: hidden;

    border:
        1px solid #d9c7b4;

    border-radius: 20px;

    background:
        rgba(255, 255, 255, 0.83);

    box-shadow:
        0 15px 40px
        rgba(94, 73, 55, 0.06);
}



/* LEFT */

.kn-campaign-price {

    position: relative;

    width: 220px;

    height: 220px;

    margin: 25px auto;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 25%,
            #aa805a,
            #7c573a
        );

    color: #ffffff;

    text-align: center;

    box-shadow:
        0 12px 25px
        rgba(91, 59, 37, 0.18);

    outline:
        1px solid
        rgba(255, 255, 255, 0.7);

    outline-offset: -9px;
}


.kn-campaign-ribbon {

    position: absolute;

    top: -8px;

    left: 50%;

    transform:
        translateX(-50%);

    width: 175px;

    padding:
        6px
        10px;

    background: #f0d7bf;

    color: #6d4f39;

    font-size: 12px;

    font-weight: 600;

    white-space: nowrap;

    box-shadow:
        0 3px 7px
        rgba(90, 60, 40, 0.09);
}


.kn-campaign-price-label {

    margin:
        10px
        0
        0;

    font-size: 13px;
}


.kn-campaign-now {

    margin: 0;

    font-size: 11px;
}


.kn-campaign-old {

    margin:
        1px
        0;

    font-family:
        Georgia,
        serif;

    font-size: 27px;
}


.kn-campaign-arrow {

    font-size: 22px;

    line-height: 1;
}


.kn-campaign-new {

    margin: 1px 0 0;

    font-family:
        Georgia,
        "Noto Serif JP",
        serif;

    font-size: 43px;

    line-height: 1.05;
}


.kn-campaign-new span {

    margin-left: 2px;

    font-size: 18px;
}


.kn-campaign-tax {

    margin:
        5px
        0
        0;

    font-size: 10px;
}



/* RIGHT */

.kn-campaign-content {

    padding:
        35px
        55px
        35px
        25px;
}


.kn-campaign-subtitle {

    margin:
        0
        0
        10px;

    font-size: 13px;

    letter-spacing: 0.05em;

    color: #866f5d;
}


.kn-campaign-content h2 {

    margin: 0;

    font-family:
        "Noto Serif JP",
        "Yu Mincho",
        serif;

    font-size: 28px;

    font-weight: 500;

    letter-spacing: 0.05em;
}


.kn-campaign-content h2 span {

    margin-left: 5px;

    font-size: 38px;

    color: #8d9659;
}


.kn-campaign-text {

    margin:
        20px
        0;

    font-size: 14px;

    line-height: 2;

    color:
        rgba(103, 87, 72, 0.83);
}


.kn-campaign-line {

    display: inline-flex;

    align-items: center;

    gap: 15px;

    padding:
        9px
        18px;

    border-radius: 30px;

    background: #f2eee8;

    font-size: 13px;
}


.kn-campaign-line span {

    padding:
        3px
        11px;

    border-radius: 15px;

    background: #899780;

    color: #ffffff;

    font-size: 11px;
}


.kn-campaign-line strong {

    font-weight: 600;

    color: #765e4b;
}



/* =========================================================
   SERVICE
========================================================= */

.kn-price-service {

    padding:
        65px
        0
        55px;
}


.kn-price-heading {

    margin-bottom: 50px;

    text-align: center;
}


.kn-price-script {

    margin:
        0
        0
        3px;

    font-family:
        Georgia,
        serif;

    font-size: 25px;

    font-style: italic;

    color: #b6936d;
}


.kn-price-heading h2 {

    margin: 0;

    font-family:
        "Noto Serif JP",
        "Yu Mincho",
        serif;

    font-size: 31px;

    font-weight: 500;

    letter-spacing: 0.08em;

    color: #46372d;
}


.kn-price-heading-line {

    display: block;

    width: 38px;

    height: 1px;

    margin:
        20px
        auto
        0;

    background: #b29475;
}



/* GRID */

.kn-price-grid {

    display: grid;

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

    gap: 16px;

    align-items: stretch;
}


/* CARD */

.kn-price-card {

    position: relative;

    display: flex;

    flex-direction: column;

    padding:
        30px
        22px;

    overflow: hidden;

    border:
        1px solid #ebe4dc;

    border-radius: 14px;

    background: #ffffff;

    box-shadow:
        0 12px 26px
        rgba(78, 62, 50, 0.06);
}


.kn-price-card--featured {

    border:
        1px solid #d3b48e;

    box-shadow:
        0 13px 31px
        rgba(145, 103, 63, 0.11);
}



/* recommend */

.kn-recommend {

    position: absolute;

    top: 16px;

    right: -39px;

    width: 145px;

    padding:
        5px
        0;

    transform:
        rotate(45deg);

    background: #cb7774;

    color: #ffffff;

    text-align: center;

    font-size: 10px;

    letter-spacing: 0.08em;
}



/* ICON */

.kn-price-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 72px;

    height: 72px;

    margin:
        0
        auto
        16px;

    border-radius: 50%;

    background: #899b7e;

    color: #ffffff;

    font-family:
        Georgia,
        sans-serif;

    font-size: 16px;

    letter-spacing: 0.04em;
}


.kn-price-icon--beige {

    background: #e7d8c6;

    color: #806851;
}


.kn-price-icon--green {

    background: #dbe3d5;

    color: #687460;

    font-size: 10px;
}



/* TAG */

.kn-price-tag {

    align-self: center;

    margin:
        0
        auto
        13px;

    padding:
        4px
        12px;

    background: #b48a5d;

    color: #ffffff;

    font-size: 11px;
}


.kn-price-tag--green {

    background: #7e9275;
}



/* CARD TITLE */

.kn-price-card h3 {

    margin: 0;

    text-align: center;

    font-family:
        "Noto Serif JP",
        "Yu Mincho",
        serif;

    font-size: 20px;

    font-weight: 500;

    letter-spacing: 0.03em;

    color: #47392e;
}


.kn-price-lead {

    min-height: 118px;

    margin:
        18px
        0
        15px;

    text-align: center;

    font-size: 12px;

    line-height: 2;

    color:
        rgba(75, 61, 50, 0.80);
}



/* NORMAL PRICE */

.kn-price-normal {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    height: 26px;

    margin-bottom: 2px;
}


.kn-price-normal span {

    padding:
        2px
        7px;

    background: #b18a5f;

    color: #ffffff;

    font-size: 10px;
}


.kn-price-normal del {

    color: #8a7565;

    font-size: 17px;
}



/* PRICE */

.kn-price-money {

    min-height: 72px;

    display: flex;

    align-items: flex-end;

    justify-content: center;

    gap: 3px;

    padding:
        16px
        0
        20px;

    margin-bottom: 13px;

    border-bottom:
        1px solid #eae3dc;
}


.kn-price-money strong {

    font-family:
        Georgia,
        "Noto Serif JP",
        serif;

    font-size: 32px;

    line-height: 1;

    font-weight: 500;

    color: #a45f3d;
}


.kn-price-money span {

    padding-bottom: 2px;

    font-size: 10px;

    color: #7b6b60;
}


.kn-price-money--campaign {

    position: relative;

    padding-top: 9px;
}


.kn-price-money--campaign small {

    align-self: center;

    margin-right: 4px;

    padding:
        2px
        6px;

    background: #a67b50;

    color: #ffffff;

    font-size: 9px;
}


.kn-price-money--campaign strong {

    font-size: 39px;

    color: #ce6464;
}



/* LIST */

.kn-price-list {

    margin:
        0
        0
        18px;

    padding: 0;

    list-style: none;
}


.kn-price-list li {

    position: relative;

    padding:
        7px
        0
        7px
        22px;

    font-size: 11px;

    line-height: 1.6;

    color: #55463b;
}


.kn-price-list li::before {

    content: "✓";

    position: absolute;

    top: 7px;

    left: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 15px;

    height: 15px;

    border-radius: 50%;

    background: #879978;

    color: #ffffff;

    font-size: 8px;
}



/* NOTE */

.kn-price-card-note {

    margin-top: auto;

    padding:
        12px
        13px;

    border-radius: 6px;

    background: #f3ede5;

    font-size: 10px;

    line-height: 1.7;

    color: #665548;
}


.kn-price-card-note--green {

    background: #edf1e9;
}



/* IMPORTANT */

.kn-price-important {

    margin-top: auto;

    border:
        1px solid #df9492;

    background: #fffafa;
}


.kn-price-important-row {

    display: flex;

    gap: 8px;

    padding:
        9px
        8px;
}


.kn-price-important-row +
.kn-price-important-row {

    border-top:
        1px solid #df9492;
}


.kn-number {

    flex: 0 0 auto;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 19px;

    height: 19px;

    border:
        1px solid #a9998d;

    border-radius: 50%;

    font-size: 8px;
}


.kn-price-important-row p {

    margin: 0;

    font-size: 9px;

    line-height: 1.65;
}


.kn-price-important-row strong {

    color: #ce6260;

    font-weight: 600;
}


.kn-price-smallnote {

    margin:
        10px
        0
        0;

    font-size: 9px;

    line-height: 1.7;

    color: #89796d;
}



/* =========================================================
   RESERVATION OPTION
========================================================= */

.kn-reservation {

    padding:
        0
        0
        60px;
}


.kn-reservation-box {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    padding:
        28px
        40px;

    border:
        1px solid #ded3c7;

    border-radius: 15px;

    background:
        linear-gradient(
            90deg,
            #ffffff,
            #f4eee7
        );
}


.kn-reservation-en {

    margin:
        0
        0
        3px;

    font-size: 10px;

    letter-spacing: 0.2em;

    color: #ad8c68;
}


.kn-reservation h2 {

    margin: 0;

    font-family:
        "Noto Serif JP",
        serif;

    font-size: 22px;

    font-weight: 500;
}


.kn-reservation-box p {

    margin:
        8px
        0
        0;

    font-size: 12px;

    color: #827267;
}


.kn-reservation-price {

    flex-shrink: 0;

    text-align: right;
}


.kn-reservation-price span {

    margin-right: 7px;

    font-size: 12px;
}


.kn-reservation-price strong {

    font-family:
        Georgia,
        serif;

    font-size: 37px;

    font-weight: 500;

    color: #9b633e;
}


.kn-reservation-price small {

    font-size: 11px;
}



/* =========================================================
   CONTACT
========================================================= */

.kn-price-contact {

    padding:
        0
        0
        95px;
}


.kn-price-contact-box {

    padding:
        50px
        30px;

    text-align: center;

    border-radius: 20px;

    background:
        radial-gradient(
            circle at 0% 100%,
            rgba(184, 153, 119, 0.17),
            transparent 35%
        ),
        #eee6dd;
}


.kn-price-contact-box h2 {

    margin: 0;

    font-family:
        "Noto Serif JP",
        "Yu Mincho",
        serif;

    font-size: 27px;

    font-weight: 500;

    letter-spacing: 0.08em;

    color: #47392e;
}


.kn-price-contact-box > p:not(.kn-price-en) {

    margin:
        15px
        0
        25px;

    font-size: 13px;

    color: #827367;
}



/* BUTTON */

.kn-price-line-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    min-width: 340px;

    padding:
        14px
        30px;

    border-radius: 40px;

    background:
        linear-gradient(
            90deg,
            #b89161,
            #c8a471
        );

    color: #ffffff !important;

    text-decoration: none;

    font-family:
        "Noto Serif JP",
        serif;

    font-size: 15px;

    box-shadow:
        0 8px 20px
        rgba(138, 99, 58, 0.12);

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}


.kn-price-line-button span {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 28px;

    height: 28px;

    border-radius: 50%;

    background: #ffffff;

    color: #a78760;

    font-size: 8px;

    font-family:
        Arial,
        sans-serif;
}


.kn-price-line-button b {

    margin-left: 8px;

    font-size: 24px;

    font-weight: 300;
}


.kn-price-line-button:hover {

    opacity: 0.88;

    transform:
        translateY(-2px);
}



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

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

    .kn-price-grid {

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


    .kn-price-lead {

        min-height: 90px;
    }


    .kn-campaign-box {

        grid-template-columns:
            240px 1fr;
    }

}



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

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


    .kn-price-container {

        width: 92%;
    }



    /* HERO */

    .kn-price-hero {

        padding:
            55px
            15px
            40px;
    }


    .kn-price-title {

        font-size: 32px;
    }


    .kn-price-description {

        margin-top: 15px;

        font-size: 12px;

        line-height: 1.9;
    }



    /* CAMPAIGN */

    .kn-campaign {

        padding:
            35px
            0
            10px;
    }


    .kn-campaign-box {

        display: flex;

        flex-direction: column;

        padding:
            26px
            18px
            30px;

        text-align: center;
    }


    .kn-campaign-price {

        width: 180px;

        height: 180px;

        margin:
            10px
            auto
            5px;
    }


    .kn-campaign-ribbon {

        width: 150px;

        font-size: 10px;
    }


    .kn-campaign-old {

        font-size: 22px;
    }


    .kn-campaign-new {

        font-size: 35px;
    }


    .kn-campaign-content {

        padding:
            20px
            5px
            5px;
    }


    .kn-campaign-content h2 {

        font-size: 19px;
    }


    .kn-campaign-content h2 span {

        display: block;

        margin:
            4px
            0
            0;

        font-size: 29px;
    }


    .kn-campaign-text {

        margin:
            15px
            0;

        font-size: 11px;

        line-height: 1.9;
    }


    .kn-campaign-line {

        flex-direction: column;

        gap: 5px;

        width: 100%;

        padding:
            10px
            15px;
    }



    /* SERVICE */

    .kn-price-service {

        padding:
            50px
            0;
    }


    .kn-price-heading {

        margin-bottom: 30px;
    }


    .kn-price-script {

        font-size: 20px;
    }


    .kn-price-heading h2 {

        font-size: 24px;
    }


    .kn-price-grid {

        grid-template-columns: 1fr;

        gap: 22px;
    }


    .kn-price-card {

        padding:
            28px
            25px;
    }


    .kn-price-lead {

        min-height: auto;

        font-size: 12px;
    }


    .kn-price-money strong {

        font-size: 34px;
    }


    .kn-price-money--campaign strong {

        font-size: 40px;
    }


    .kn-price-list li {

        font-size: 12px;
    }


    .kn-price-card-note {

        font-size: 11px;
    }


    .kn-price-important-row p {

        font-size: 10px;
    }



    /* RESERVATION */

    .kn-reservation {

        padding-bottom: 40px;
    }


    .kn-reservation-box {

        flex-direction: column;

        padding:
            25px
            20px;

        text-align: center;
    }


    .kn-reservation-price {

        text-align: center;
    }


    .kn-reservation-price strong {

        font-size: 34px;
    }



    /* CONTACT */

    .kn-price-contact {

        padding-bottom: 65px;
    }


    .kn-price-contact-box {

        padding:
            38px
            20px;
    }


    .kn-price-contact-box h2 {

        font-size: 21px;
    }


    .kn-price-line-button {

        width: 100%;

        min-width: 0;

        padding:
            13px
            15px;

        font-size: 13px;
    }

}