@charset "UTF-8";
/*------------------------------------------------------------mainphoto*/
.mainimage {
    padding: 0 var(--container-pd);
    background: url(../img/index_img/mainimg_sp.jpg) center center no-repeat;
    background-size: cover;
    height: 80svb;
    width: 100%;

    @media (width >= 992px) {
        background: url(../img/index_img/mainimg.jpg) center center no-repeat;
        background-size: cover;
        height: 100svb;
        min-height: 680px;
    }
}
.mainimg_container {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    padding-top: 40px;
}
.catch_logo {
    :is(img) {
        width: clamp(140px, 240vw/12, 240px);
        height: auto;
        filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 4px #fff) drop-shadow(0 0 2px #fff);
        @media (width >= 1200px) {
            width: clamp(240px, 280vw/19.2, 280px);
        }
    }
}
.catch_tx {
    font-size: clamp(1.8rem, 24vw/12, 2.4rem);
    font-weight: 600;
    color: var(--maincolor);
    text-shadow: 0 0 8px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 2px #fff, 0 0 2px #fff;
    @media (width >= 1200px) {
        font-size: clamp(2.4rem, 40vw/19.2, 4rem);
    }
}
/*=======================================
concept
=======================================*/
.concept_box {
    width: min(100%, var(--inner-max));
    background: var(--bg-color02);
    border-radius: var(--base-radius);
    margin-top: -0.8em;
    margin-left: auto;
    margin-right: auto;
    padding: calc(var(--inner-tb) + 0.8em) var(--inner-pd) clamp(40px, 80vw/12, 80px);
    position: relative;
    z-index: -1;

    &::before {
        content: "";
        display: block;
        width: clamp(80px, 160vw/12, 160px);
        height: auto;
        aspect-ratio: 134/163;
        background: url(../img/common_img/btm_l.svg) center center no-repeat;
        background-size: cover;
        position: absolute;
        z-index: 2;
        left: calc(var(--container-pd) * -1);
        bottom: calc(var(--container-pd) * -1);
    }
    &::after {
        content: "";
        display: block;
        width: clamp(88px, 170vw/12, 170px);
        height: auto;
        aspect-ratio: 142/136;
        background: url(../img/common_img/btm_r.svg) center center no-repeat;
        background-size: cover;
        position: absolute;
        z-index: 2;
        right: calc(var(--container-pd) * -1);
        bottom: calc(var(--container-pd) * -1);
        @media (width >= 992px) {
            transform: translateY(-10%);
        }
    }
}

/*=======================================
swiper_loop
=======================================*/
.gallery_wrap {
    position: relative;
    width: 100vw;
    padding-top: calc(var(--section-bottom) / 2);
    /* padding-bottom: var(--section-bottom); */
}
.swiper_loop {
    overflow: hidden;
    width: 100%;
    .swiper-wrapper {
        transition-timing-function: linear !important;
        cursor: grab;
    }
    .swiper-slide {
        aspect-ratio: 1;

        a{
            display: block;
            width: 100%;
            height: 100%;
            @media (width >= 768px) {
                pointer-events: none;
            }
        }
        a > img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: var(--base-radius);


        }
    }
}


/*=======================================
guide
=======================================*/
.step_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 48px clamp(24px, 32vw/9.92, 32px);
    width: min(100%, 600px);
    counter-reset: step_number 0;
    margin-left: auto;
    margin-right: auto;

    & > li {
        width: calc(50% - calc(clamp(24px, 32vw/9.92, 32px) / 2));
        list-style: none;
        position: relative;

        &::before {
            counter-increment: step_number 1;
            content: "0" counter(step_number) ".";
            font-family: var(--font-en);
            line-height: 1;
            color: var(--subcolor);
            font-size: clamp(3.2rem, 64vw/9.92, 6.4rem);
            position: absolute;
            top: -0.5em;
            left: 50%;
            transform: translateX(-50%);
            padding-left: 0.4em;

            @media (width >= 992px) {
                font-size: 4.8rem;
            }
        }

        &:last-of-type {
            .step_ti {
                letter-spacing: -0.03em;
            }
        }
    }
    .step_img {
        background: var(--bg-color02);
        border-radius: 100vmax;
        width: 100%;
        height: auto;
        aspect-ratio: 1;
        display: grid;
        place-items: center;
        :is(img) {
            width: 70%;
            height: auto;
        }
    }

    @media (width >= 992px) {
        width: min(100%, 1200px);
        gap: 40px;
        & > li {
            flex: 1;
        }
    }
}
.step_ti {
    font-weight: 600;
    color: var(--subcolor);
    border: 1px solid rgb(from var(--subcolor) r g b / 0.6);
    background: var(--bg-white);
    border-radius: 100vmax;
    line-height: 1;
    padding: 0.6em 0;
    margin-top: -1em;
    margin-bottom: 0.6em;
    white-space: nowrap;
    font-size: clamp(1.4rem, 20vw/9.92, 2rem);
    @media (width >= 992px) {
        font-size: 1.6rem;
        padding: 0.8em 0;
    }
}
.step_tx {
    line-height: 1.4;
}

.app_list {
    width: min(100%, var(--inner-max));
    margin: 1em auto 0;
    border: 4px solid var(--bg-color02);
    border-radius: var(--base-radius);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px 40px;
    flex-direction: column;
    padding: var(--inner-tb) var(--inner-pd);
    :is(a) {
        text-decoration: none;
        transition: 0.2s;
        &:hover {
            opacity: 0.8;
            .app_ti {
                transform: scale(1.03);
            }
        }
    }
    & > li {
        width: clamp(200px, 280vw/12, 280px);
    }

    @media (width >= 768px) {
        flex-direction: row;
        gap: 64px;
    }
}

.qr_img {
    width: min(80%, 200px);
    height: auto;
    border: 1px solid var(--gray);
    padding: 8px;
    margin: 0 auto 16px;

    & > img {
        display: block;
        width: 100%;
        height: auto;
    }
}
.app_ti {
    color: var(--light-tx-color);
    background: var(--black);
    border-radius: var(--btn-radius);
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
    font-size: var(--font-xl);
    font-weight: 700;
    line-height: 1;
    padding: 0.6em 1em;
    transition: 0.2s;
}
.app_tx {
    color: var(--base-tx-color);
    padding-top: 0.4em;
}

/*=======================================
message
=======================================*/
.message_wrap {
    position: relative;
    z-index: 2;
    @media (width >= 768px) {
        align-items: center;
    }
}
.message_img {
    height: 240px;
    & > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: var(--base-radius);
    }

    @media (width >= 768px) {
        height: clamp(320px, 480vw/12, 480px);
    }
}
.message_txt {
    position: relative;
    z-index: -1;
    padding-top: 40px;
    padding-bottom: 40px;

    &::before {
        content: "";
        display: block;
        width: min(50%, 480px);
        height: auto;
        aspect-ratio: 244/206;
        background: url(../img/common_img/leaf_top.svg) center center no-repeat;
        background-size: cover;
        position: absolute;
        left: -20%;
        top: calc(var(--section-top) * -1);
        opacity: 0.9;
    }

    &::after {
        content: "";
        display: block;
        width: min(32%, 320px);
        height: auto;
        aspect-ratio: 142/136;
        background: url(../img/common_img/btm_r.svg) center center no-repeat;
        background-size: cover;
        position: absolute;
        right: calc(calc(var(--container-pd) / 2) * -1);
        bottom: -20px;
        opacity: 0.9;
    }

    @media (width >= 768px) {
        text-align: left;
        padding-left: clamp(16px, 64vw/13.66, 64px);
        .cts_p {
            text-align: left;
        }

        &::before {
            display: block;
            width: min(70%, 400px);
            top: calc(clamp(80px, 180vw/13.66, 180px) * -1);
        }
        &::after {
            width: min(50%, 260px);
            bottom: calc(clamp(60px, 140vw/13.66, 140px) * -1);
            right: calc(var(--container-pd) * -1);
        }
    }

    @media (width >= 1366px) {
        &::after {
            right: 0;
        }
    }
}

/*=======================================
news
=======================================*/
/* .insta_link {
    :is(a) {
        text-decoration: none;
        color: var(--light-tx-color);
        background: var(--maincolor);
        border-radius: var(--btn-radius);
        width: min(100%, 400px);
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 0.8em 2em 1em;
        font-size: clamp(2.4rem, 32vw/12, 3.2rem);
        margin: 0 auto;
        font-family: var(--font-en);
        transition: 0.2s;
        &:hover {
            transform: scale(1.03);
            background: var(--subcolor);
        }
    }
    :is(i) {
        transform: translateY(0.2em);
    }
} */
.insta_wrap {
    border: 1px solid rgb(from var(--subcolor) r g b / 0.5);
    background: var(--bg-white);
    margin: 0 auto;
    padding: 8px;
    width: min(100%, 960px);
}

/*=======================================
shop
=======================================*/
.googlemap {
    padding-top: var(--section-top);
    max-width: var(--container-max);
    margin-right: auto;
    margin-left: auto;
    :is(iframe) {
        border-radius: var(--base-radius);
        height: clamp(320px, 560vw/12, 560px);
        filter: saturate(80%);
    }
}

.shop_info_wrap {
    display: flex;
    gap: 40px;
    @media (width >= 768px) {
        gap: 0;
    }
}
.shop_logo {
    :is(img) {
        width: clamp(80px, 160vw/12, 160px);
        height: auto;
    }
    @media (width >= 768px) {
        padding-top: 1em;
        width: clamp(180px, 240vw/13.66, 240px);
    }
}
.shop_info {
    text-align: left;
    @media (width >= 768px) {
        width: calc(100% - clamp(180px, 240vw/13.66, 240px));
    }
}
.info_list {
    & > div {
        display: flex;
        flex-direction: column;

        & + div {
            margin-top: 1em;
        }

        & > dt {
            color: var(--subcolor);
            &::after {
                content: ":";
                display: inline-block;
                padding: 0 0.6em;
            }
        }
    }

    @media (width >= 768px) {
        position: relative;
        z-index: 1;
        width: 100%;
        background: var(--bg-color02);
        border-radius: var(--base-radius);
        padding: 32px var(--inner-tb);
        & > div {
            flex-direction: row;
            & > dt {
                min-width: 7.5ic;
                position: relative;
                &::after {
                    position: absolute;
                    right: 0;
                    top: 50%;
                    transform: translateY(-50%);
                }
            }
        }

        &::before {
            content: "";
            width: clamp(240px, 437vw/13.66, 437px);
            height: auto;
            aspect-ratio: 437/282;
            background: url(../img/common_img/info_img.png) center center no-repeat;
            background-size: cover;
            display: block;
            position: absolute;
            z-index: 2;
            opacity: 0.9;
            right: calc(var(--container-pd) * -1);
            bottom: calc(var(--inner-tb) * -1);
        }
    }
}

/*==============================
プライバシーポリシー
==============================*/
.cts_p {
    & + .rule {
        margin-top: 24px;
    }
}
.rule {
    text-align: left;
    counter-reset: rule_number 0;

    & + .cts_p {
        margin-top: 24px;
    }

    /*間隔調整 ----------*/
    :is(p) {
        & + * {
            margin-top: 16px;
        }
    }
    :is(li) {
        position: relative;
        & + li {
            margin-top: 0.4em;
        }
    }

    :is(ol) {
        list-style: none;
        & + * {
            margin-top: 16px;
        }
    }

    /*中身 ----------*/
    & > dt {
        margin-bottom: 16px;
        font-weight: 700;
        font-size: var(--font-l);
        color: var(--maincolor);
        border-left: 4px solid var(--subcolor);
        padding-left: 0.6em;
        /* &::before {
            counter-increment: rule_number 1;
            content: "0" counter(rule_number) ;
        } */
    }

    & > dd {
        & + dt {
            margin-top: 32px;
        }

        /*1段目*/
        & > ol {
            counter-reset: ol_number01 0;
            & > li {
                padding-left: 1.5em;
                &::before {
                    counter-increment: ol_number01 1;
                    content: counter(ol_number01) ".";
                    position: absolute;
                    inset: 0 auto auto 0;
                }

                /*2段目*/
                & > ol {
                    counter-reset: ol_number02 0;
                    padding-left: 1em;
                    padding-bottom: 0.5em;
                    & > li {
                        padding-left: 1.5em;
                        &::before {
                            counter-increment: ol_number02 1;
                            content: counter(ol_number02) ".";
                            position: absolute;
                            inset: 0 auto auto 0;
                        }

                        /*3段目*/
                        & > ol {
                            counter-reset: ol_number03 0;
                            padding-left: 1em;
                            padding-bottom: 0.5em;
                            & > li {
                                padding-left: 1.5em;
                                &::before {
                                    counter-increment: ol_number03 1;
                                    content: counter(ol_number03) "）";
                                    position: absolute;
                                    inset: 0 auto auto 0;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    .contact_list {
        & > div {
            text-align: left;
            display: flex;
            & > dt {
                white-space: nowrap;
                &::after {
                    content: "：";
                    display: inline-block;
                    padding-left: 0.5em;
                    padding-right: 0.5em;
                }
            }
        }
    }
}