@charset "UTF-8";

/*====================
main
====================*/
/* article__header */
.article__header {
    width: 100%;
    height: 100dvh;
    text-align: center;
    /* padding-top: 15.4%; */
    position: relative;
}

.mainVisual {
    /* width: 430px;
    height: 430px; */
    width: 114.6vw;
    height: 114.6vw;
    min-width: 380px;
    min-height: 380px;
    max-width: 470px;
    max-height: 470px;
    border-radius: 50%;
    position: absolute;
    /* top: 42%; */
    top: 37%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
}

.mainVisual::before {
    content: '';
    width: 100%;
    height: 100%;
    background-color: rgba(243, 226, 204, 0.2);
    display: block;
    left: 0;
    top: 0;
    position: absolute;
    z-index: 1;
}

.sound-toggle {
    width: 30px;
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 2;
}

.movie {
    width: 200%;
    height: 100vh;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.mainVisual__txt {
    /* margin: 0 auto; */
    color: var(--color--whitePink, #FEFAFA);
    text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
    font-family: "Klee One";
    font-size: 2.8rem;
    font-weight: 600;
    line-height: 1.8;
    letter-spacing: 0.4em;
    text-align: left;
    white-space: nowrap;
    writing-mode: vertical-rl;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.article__shopName {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    font-family: "Klee One";
    font-size: 1.6rem;
}

.article__logo {
    width: 335px;
    background-color: var(--color--whitePink);
}

.article__logo img {
    width: 100%;
    mix-blend-mode: multiply;
}

.article__name {
    line-height: 1.25;
    letter-spacing: 0.1em;
}

.spanShopName {
    font-family: "Merienda";
    font-size: 1.6rem;
    margin-left: 5px;
    line-height: 1.25;
    letter-spacing: 0.1em;
}

.article__txt {
    margin-top: 30px;
}

/* article__header pc */
@media screen and (min-width: 769px) {
    .mainVisual {
        /* width: 41.6vw;
        height: 41.6vw;
        min-width: 600px;
        min-height: 600px; */
        /* max-width: 470px;
        max-height: 470px; */

        width: 51.6vh;
        height: 51.6vh;
        /* min-width: 0;
        min-height: 0;
        max-width: auto;
        max-height: auto; */

        border-radius: 50%;
        position: absolute;
        /* top: 42%; */
        top: 36%;
        left: 50%;
        transform: translate(-50%, -50%);
        overflow: hidden;
    }

    /* .mainVisual__txt {
        font-size: 3.6rem;
    } */

    .article__logo {
        width: 378px;
        margin-top: 20px;
    }

    .article__txt {
        margin-top: 40px;
    }

    /* pc 769px */
}

@media (max-height: 750px) {

    .mainVisual {
        width: 100vw;
        height: 100vw;

        min-width: 300px;
        min-height: 300px;
    }

    .mainVisual__txt {
        font-size: 2.3rem;
    }

    .article__logo {
        width: 280px;
    }

    .article__txt {
        margin-top: 16px;
    }
}

/* about */
.section--about {
    width: 100%;
    background: linear-gradient(180deg, #FEFAFA 0%, #C4D4B8 10%, #C4D4B8 28.37%, #F2E9DD 75.96%, #FEFAFA 100%);
    padding-bottom: 80px;
}

.section--about::before {
    content: '';
    background-image: url(../images/leaf1-top.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 205px;
    height: 180px;
    display: block;
    position: absolute;
    right: 0;
}

/* .section--about span {
    display: block;
} */

.about__catch {
    margin: 0 14.7% 0 42.7%;
    padding-top: 116px;
    position: relative;
    z-index: 1;
}

.about__catch .catchTxt {
    text-shadow: 0px 0px 3px #6A8A93;
    line-height: 1.7;
}

.about__catch::before {
    content: '';
    background-color: rgba(254, 250, 250, 0.5);
    width: 64px;
    height: 66px;
    border-radius: 5px;
    position: absolute;
    right: 36%;
    top: 106%;
    z-index: -1;
}

.about__catch::after {
    content: '';
    background-color: rgba(254, 250, 250, 0.5);
    width: 109px;
    height: 100px;
    border-radius: 5px;
    position: absolute;
    right: -21%;
    top: 115%;
    z-index: -1;
}

.about__txt {
    margin: 140px 13.9% 0 0;
    max-width: 400px;
    padding: 20px;
    line-height: 2.25;
    border-radius: 0px 5px 5px 0px;
    background: rgba(254, 250, 250, 0.5);
    position: relative;
    z-index: 1;
}

.about__txt p {
    margin-top: 36px;
}

.about__txt p:first-of-type {
    margin-top: 0px;
}

.about__btn {
    margin-top: 10px;
}

.deco__about {
    position: relative;
    width: 100%;
    height: 0;
}

.deco__about::after {
    content: '';
    background-color: rgba(254, 250, 250, 0.5);
    width: 195px;
    height: 201px;
    border-radius: 5px 0 0 5px;
    position: absolute;
    right: 0%;
    top: 312px;
    z-index: 1;
}

.deco__utatanemushi {
    position: absolute;
    width: 224px;
    top: -270px;
    left: 0;
}

/* about pc */
@media screen and (min-width: 769px) {
    .section--about {
        width: 76.4%;
        margin: 0 0 0 auto;
        padding-bottom: 100px;
    }

    .section--about::before {
        width: 249px;
        height: 218.6px;
    }

    .about__catch {
        margin: 0 8.3% 0 50%;
        padding-top: 120px;
        position: relative;
        z-index: 1;
    }

    .about__catch .catchTxt {
        font-size: 3.25rem;
        text-shadow: 0px 0px 6px #6A8A93;
        line-height: 1.8;
        letter-spacing: 0.6em;
        margin: 0 0 0 auto;
    }

    .about__catch::before {
        width: 80px;
        height: 82.5px;
        right: 58%;
        top: 15%;
    }

    .about__catch::after {
        width: 133px;
        height: 122px;
        right: 36%;
        top: 22%;
        z-index: -1;
    }

    .about__txt {
        width: fit-content;
        max-width: 492px;
        margin: -330px 35.6% 0 6.6%;
        padding: 40px 4.2%;
        font-size: 20px;
        line-height: 2;
        letter-spacing: 0.1em;
        border-radius: 5px;
        white-space: nowrap;
        position: relative;
    }

    .about__btn {
        margin-top: 20px;
    }

    .deco__about::after {
        width: 237px;
        height: 244.292px;
        border-radius: 5px;
        right: 20%;
        top: -174px;
        z-index: 0;
    }

    .deco__utatanemushi {
        width: 280px;
        top: 76px;
        left: auto;
        right: 10%;
    }

    /* pc 769px */
}

/* committed */
.section--committed {
    width: 100%;
    padding: 80px 5.3% 156px;
}

.committed__imgSp {
    position: relative;
}

.committed__imgSp::before {
    content: '';
    background-color: var(--color--warmGray);
    width: 180px;
    height: 180px;
    position: absolute;
    left: -168px;
    bottom: -30px;
    border-radius: 5px;
    display: block;
    z-index: -1;
}

.committed__imgPc {
    display: none;
}

.committed__topic {
    width: 215px;
    margin: 0 auto;
    font-family: "Klee One";
    font-size: 2.8rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    margin-top: 40px;
    background-size: 8px 3px;
    background-image: linear-gradient(to right, var(--color--blewGreen) 3px, transparent 3px);
    background-position: left bottom;
    background-repeat: repeat-x;
    padding-bottom: 5px;
}

.committed__topic span {
    font-family: Merienda;
    font-weight: 300;
}

.committed__txt {
    margin-top: 15px;
    line-height: 2.25;
}

.committed__btn {
    margin-top: 40px;
    position: absolute;
    right: 0;
}

/* committed pc */
@media screen and (min-width: 769px) {
    .section--committed {
        width: 76.4%;
        margin: 0 0 0 auto;
        padding: 80px 6.6% 100px;
    }

    .committed__imgSp {
        display: none;
    }

    .committed__imgPc {
        display: block;
        position: relative;
    }

    .committed__imgPc::before {
        content: '';
        background-color: var(--color--warmGray);
        width: 300px;
        height: 300px;
        position: absolute;
        left: -270px;
        bottom: -80px;
        border-radius: 5px;
        display: block;
        z-index: -1;
    }

    .committed__topic {
        width: 329px;
        font-size: 4rem;
        margin-top: 100px;
        letter-spacing: 0.1em;
        white-space: nowrap;
    }

    .committed__txt {
        width: 480px;
        margin: 0 auto;
        margin-top: 40px;
    }

    .committed__btn {
        margin-top: 40px;
        position: static;
    }

    /* pc 769px */
}

/* plan */
.section--plan {
    width: 100%;
    padding: 80px 5.3% 156px;
}

.plan__imgSp {
    position: relative;
}

.plan__imgSp::before {
    content: '';
    background-color: var(--color--warmGray);
    width: 180px;
    height: 180px;
    position: absolute;
    left: 138px;
    bottom: -30px;
    border-radius: 5px;
    display: block;
    z-index: -1;
}

.plan__imgPc {
    display: none;
}

.plan__catch .catchTxt {
    text-shadow: 0px 0px 3px #6A8A93;
}

.plan__topic {
    width: 145px;
    margin: 0 auto;
    font-family: "Klee One";
    font-size: 2.8rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    margin-top: 40px;
    background-size: 8px 3px;
    background-image: linear-gradient(to right, var(--color--blewGreen) 3px, transparent 3px);
    background-position: left bottom;
    background-repeat: repeat-x;
    padding-bottom: 5px;
}

.plan__plan {
    margin-top: 15px;
}

.plan__spInner {
    display: flex;
    align-items: flex-end;
}

.plan__inner {
    /* display: flex; */
    align-items: baseline;
    /* float: left; */
}

.plan__name {
    color: var(--color--blewGreen);
    font-size: 1.8rem;
    font-weight: 500;
    position: relative;

}

.plan__name::before {
    content: '';
    width: 30px;
    height: 30px;
    background-color: var(--color--warmGray);
    border-radius: 50%;
    display: block;
    position: absolute;
    z-index: -1;
}

.plan__explanation {
    margin-bottom: 5px;
}

.plan__price span {
    font-family: Merienda;
    font-size: 2.6rem;
}

.plan__limited {
    margin-top: 60px;
    position: relative;
}

.plan__limitedImg {
    width: 141px;
    position: absolute;
    left: 50%;
    top: -80px;
    transform: translateX(-50%);
}

.plan__limitedTxt {
    font-size: 1.8rem;
    font-weight: 500;
}

.plan__price--campaign span {
    font-size: 3.6rem;
    font-weight: 600;
}

.plan__btn {
    margin-top: 40px;
    position: absolute;
    right: 0;
}

/* plan pc */
@media screen and (min-width: 769px) {
    .section--plan {
        width: 76.4%;
        margin: 0 0 0 auto;
        padding: 80px 6.6% 100px;
    }

    .plan__imgSp {
        display: none;
    }

    .plan__imgPc {
        display: block;
        position: relative;
    }

    .plan__imgPc::before {
        content: '';
        background-color: var(--color--warmGray);
        width: 300px;
        height: 300px;
        position: absolute;
        right: -270px;
        bottom: -80px;
        border-radius: 5px;
        display: block;
        z-index: -1;
    }

    .plan__catch .catchTxt {
        text-shadow: 0px 0px 6px #6A8A93;
    }

    .plan__topic {
        width: 216px;
        font-size: 4rem;
        margin-top: 100px;
        letter-spacing: 0.1em;
        white-space: nowrap;
        padding-bottom: 8px;
    }

    .plan__plan {
        width: 335px;
        margin: 40px auto 0;
        text-align: center;
    }

    .plan__spInner {
        display: block;
    }

    .plan__inner {
        display: flex;
        justify-content: center;
        gap: 10px;
    }

    .plan__name {
        font-size: 2.4rem;
        margin-top: 0;
    }

    .plan__name::before {
        content: '';
        width: 40px;
        height: 40px;
        z-index: -1;
    }

    .plan__price {
        font-size: 2rem;
    }

    .plan__price span {
        font-size: 3.4rem;
    }

    .plan__explanation {
        margin-top: 10px;
    }

    .plan__btn {
        margin-top: 40px;
        position: static;
    }

    /* pc 769px */
}

/* information */
.section--information {
    width: 100%;
    padding: 80px 5.3% 156px;
    background: linear-gradient(180deg, #FEFAFA 0%, #F2E9DD 25%, #F2E9DD 75.47%, #FEFAFA 100%);
}

.information__catch .catchTxt {
    text-shadow: 0px 0px 3px #6A8A93;
}

.information__imgSp {
    position: relative;
}

.information__imgSp::before {
    content: '';
    background-color: var(--color--warmGray);
    width: 180px;
    height: 180px;
    position: absolute;
    left: -168px;
    bottom: -30px;
    border-radius: 5px;
    display: block;
    z-index: -1;
}

.information__imgPc {
    display: none;
}

.information__topic {
    width: 203px;
    margin: 0 auto;
    font-family: "Klee One";
    font-size: 2.8rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    margin-top: 40px;
    background-size: 8px 3px;
    background-image: linear-gradient(to right, var(--color--blewGreen) 3px, transparent 3px);
    background-position: left bottom;
    background-repeat: repeat-x;
    padding-bottom: 5px;
}

.information__list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 15px;
    position: relative;
}

.information__list::before {
    content: '';
    background-image: url(../images/flower-white-invert.png);
    background-size: cover;
    width: 300px;
    height: 300px;
    display: block;
    position: absolute;
    right: -67px;
    bottom: 20px;
}

.information__item {
    position: relative;
    z-index: 1;
}

.information__name {
    color: var(--color--blewGreen);
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.66;
}

.information__name::before {
    content: '';
    width: 30px;
    height: 30px;
    background-color: var(--color--whitePink);
    border-radius: 50%;
    display: block;
    position: absolute;
}

.information__name span {
    position: relative;
    z-index: 1;
}

.access__list {
    padding-left: 20px;
}

.access__transport {
    font-weight: 500;
    line-height: 2;
}

.access__directions {
    line-height: 2;
    margin-left: 20px;
}

.information__txt {
    line-height: 2;
}

/* information pc */
@media screen and (min-width: 769px) {
    .section--information {
        width: 76.4%;
        margin: 0 0 0 auto;
        padding: 80px 6.6% 100px;
    }

    .information__imgSp {
        display: none;
    }

    .information__imgPc {
        display: block;
        position: relative;
    }

    .information__catch .catchTxt {
        text-shadow: 0px 0px 6px #6A8A93;
    }

    .information__topic {
        width: 304px;
        font-size: 4rem;
        margin-top: 100px;
        letter-spacing: 0.1em;
        white-space: nowrap;
        padding-bottom: 8px;
    }

    .information__list {
        display: block;
        width: 57.8%;
        margin: 40px auto 0;
        padding-left: 7.2%;
    }

    .information__list::before {
        width: 400px;
        height: 400px;
        right: -212px;
        bottom: -67px;
    }

    .information__list::after {
        content: '';
        background-image: url(../images/leaf2-white.png);
        background-size: cover;
        width: 300px;
        height: 153.6px;
        transform: rotate(-137.245deg);
        display: block;
        position: absolute;
        left: -155px;
        top: 0;
    }

    .information__item {
        display: flex;
        gap: 9%;
        margin-top: 20px;
    }

    .information__name {
        width: 120px;
        font-size: 2.4rem;
    }

    .information__name::before {
        width: 40px;
        height: 40px;
    }

    .information__txt span {
        letter-spacing: 0.1em;
    }


    /* pc 769px */
}

/* reservation */
.section--reservation {
    width: 100%;
    padding: 80px 5.3%;
}

.reservation__imgSp {
    position: relative;
}

.reservation__imgSp::before {
    content: '';
    background-color: var(--color--warmGray);
    width: 180px;
    height: 180px;
    position: absolute;
    left: 138px;
    bottom: -30px;
    border-radius: 5px;
    display: block;
    z-index: -1;
}

.reservation__imgPc {
    display: none;
}

.reservation__topic {
    width: 87px;
    margin: 0 auto;
    font-family: "Klee One";
    font-size: 2.8rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    margin-top: 40px;
    background-size: 8px 3px;
    background-image: linear-gradient(to right, var(--color--blewGreen) 3px, transparent 3px);
    background-position: left bottom;
    background-repeat: repeat-x;
    padding-bottom: 5px;
}

.reservation__contact h2 {
    width: 174px;
    margin-top: 80px;
}

.reservation__txt {
    line-height: 1.87;
    margin-top: 20px;
}

.reservation__txt--center {
    text-align: center;
}

.reservation__btn a {
    border-radius: 20px 0px;
    margin: 20px auto 0;
}

.reservation__sns .reservation__txt {
    margin-top: 80px;
    text-align: center;
}

.reservation__icon {
    width: 40px;
    margin: 27px auto 0;
}

/* reservation pc */
@media screen and (min-width: 769px) {
    .section--reservation {
        width: 76.4%;
        margin: 0 0 0 auto;
        padding: 80px 6.6%;
    }

    .reservation__imgSp {
        display: none;
    }

    .reservation__imgPc {
        display: block;
        position: relative;
    }

    .reservation__imgPc::before {
        content: '';
        background-color: var(--color--warmGray);
        width: 300px;
        height: 300px;
        position: absolute;
        right: -270px;
        bottom: -80px;
        border-radius: 5px;
        display: block;
        z-index: -1;
    }

    .reservation__topic {
        width: 130px;
        font-size: 4rem;
        margin-top: 100px;
        background-size: 8px 3px;
        letter-spacing: 0.1em;
        white-space: nowrap;
        padding-bottom: 8px;
    }

    .reservation__contact h2 {
        width: 262px;
        margin-top: 100px;
    }

    .reservation__txt {
        /* line-height: 1.87; */
        margin-top: 40px;
        text-align: center;
    }

    .reservation__sns .reservation__txt {
        margin-top: 100px;
    }

    .reservation__icon {
        margin-top: 40px;
    }

    /* pc 769px */
}