@charset "UTF-8";
/*==================================================================

# guide-page

===================================================================*/

/*========================================================
/* price-guide
==========================================================*/
#price-guide {
    text-align: center;
    margin: clamp(40px, calc(21.307692307692307px + 5.1923076923076925vw), 121px) 0 clamp(40px, calc(17.615384615384613px + 6.217948717948718vw), 137px);

    .heading {
        color: var(--color-blue01);
        line-height: 1.4;
        margin-bottom: clamp(35px, calc(23.461538461538463px + 3.205128205128205vw), 85px);
    }

    >.note {
        margin-top: clamp(30px, calc(25.846153846153847px + 1.153846153846154vw), 48px);
        font-family: var(--font-marugothic);
        font-weight: 300;
        color: var(--color-blue02);
        line-height: 2;
    }

    >.guide__plan-list {
        width: min(100% - 2em, 1150px);
        margin-inline: auto;
        margin-top: clamp(22px, calc(16.923076923076923px + 1.4102564102564104vw), 44px);
        background: rgba(106, 160, 167, 0.25);
        border-radius: 31px;
        text-align: left;
        padding: clamp(25px, calc(17.846153846153847px + 1.987179487179487vw), 56px);

        .plan-tit {
            font-family: var(--font-shippori);
            color: var(--color-blue01);
            letter-spacing: 0.05em;

            span {
                display: inline-block;
                margin-right: 2em;

                @media (max-width: 767px) {
                    display: block;
                    margin: 0 0 0.5em 0;
                }
            }
        }

        .col {
            display: flex;
            justify-content: space-between;
            margin-top: clamp(30px, calc(23.76923076923077px + 1.7307692307692308vw), 57px);

            @media (max-width: 1110px) {
                display: block;
            }
        }

        .symbol {
            font-family: var(--font-ja-gothic);
            font-weight: 600;
            margin: 1em 0.5em 0;
            color: var(--color-text);

            @media (max-width: 1110px) {
                text-align: center;
                margin: 1em 0.5em;
            }
        }

        .guide__plan-box {

            .inner {
                height: 421px;
                padding: 25px 15px;
                border-radius: 24px;
                background: #fff;

                @media (max-width: 1110px) {
                    height: auto;
                }

                >.tit {
                    text-align: center;
                    font-family: var(--font-ja-gothic);
                    font-weight: 600;
                }

                >img {
                    margin-top: 28px;
                }

                >.caption {
                    font-family: var(--font-marugothic);

                    li {
                        font-weight: 300;
                        line-height: 1.3;
                    }
                }

                >.price {
                    font-family: var(--font-ja-gothic);
                    font-weight: 900;
                    text-align: right;
                    margin-top: 1.3em;
                }
            }

            .flow_txt {
                margin-top: 1em;

                li {
                    font-family: var(--font-marugothic);
                    line-height: 1.9;
                }
            }

            &.basic {
                width: min(100%, 274px);

                @media (max-width: 1110px) {
                    width: 100%;
                }

                .inner {
                    color: var(--color-blue01);
                    border: 9px solid var(--color-blue01);
                }

                .caption {
                    color: var(--color-blue02);
                }

                .flow_txt {
                    li {
                        color: var(--color-blue02);
                    }
                }
            }

            &.product-menu {
                width: min(100%, 290px);

                @media (max-width: 1110px) {
                    width: 100%;
                }

                .inner {
                    color: var(--color-dark-red01);
                    border: 9px solid var(--color-dark-red01);
                }

                .flow_txt {
                    li {
                        color: var(--color-dark-red01);
                    }
                }
            }

            &.price {
                width: min(100%, 290px);

                @media (max-width: 1110px) {
                    width: 100%;
                }

                .inner {
                    color: var(--color-dark-red01);
                    background: var(--color-dark-red01);
                    border: 9px solid var(--color-dark-red01);
                }

                .tit {
                    color: #fff;
                }

                .caption {
                    color: #fff;
                }

                .price {
                    color: #fff;
                }

                .flow_txt {
                    li {
                        color: var(--color-dark-red01);
                    }
                }
            }

        }
    }

    >.guide__detail {
        width: min(100% - 4rem, 1150px);
        margin-inline: auto;
        margin-top: 40px;
        font-family: var(--font-marugothic);
        color: var(--color-text);
        text-align: left;
        padding: 44px;
        border: 1px solid var(--color-text);

        @media (max-width: 767px) {
            padding: 4%;
        }

        >.detail-tit {
            position: relative;
            padding-left: 4em;

            @media (max-width: 767px) {
                padding-left: 3em;
            }

            &::before {
                position: absolute;
                content: "";
                background: url(../img/guide/icon_camera.webp)no-repeat center / contain;
                width: clamp(30px, calc(20.53846153846154px + 2.628205128205128vw), 71px);
                height: 71px;
                top: 50%;
                left: 0;
                transform: translateY(-50%);
            }
        }

        >.detail-txt {
            line-height: 1.9;
            margin: 3em 0 0 2em;

            @media (max-width: 767px) {
                margin: 2em 0 0 0;
            }
        }
    }

    .btn {
        a {
            display: block;
            font-family: var(--font-marugothic);
            font-weight: 300;
            color: #fff;
            background: var(--color-dark-red01);
            display: inline-block;
            padding: 0.8em 2em;
            border-radius: 31px;
            margin-top: clamp(38px, calc(26.461538461538463px + 3.205128205128205vw), 88px);    
        }
    }
}

/*========================================================
/* flow-guide
==========================================================*/
#flow-guide {
    text-align: center;
    margin: clamp(39px, calc(20.076923076923077px + 5.256410256410256vw), 121px) 0 clamp(70px, calc(61.69230769230769px + 2.307692307692308vw), 106px);

    .heading {
        color: var(--color-blue01);
        line-height: 1.4;
        margin-bottom: clamp(42px, calc(32.07692307692308px + 2.7564102564102564vw), 85px);
    }

    .guide__flow-list {

        .guide__flow-item {
            width: min(100% - 4rem, 962px);
            margin-inline: auto;
            background: rgba(106, 160, 167, 0.2);
            padding: 20px 34px;
            font-family: var(--font-marugothic);
            color: var(--color-blue02);
            text-align: left;
            display: flex;

            &:nth-of-type(n+2) {
                margin-top: clamp(42px, calc(36.46153846153846px + 1.5384615384615385vw), 66px);
                position: relative;

                &::before {
                    position: absolute;
                    content: "";
                    background: url(../img/arrow-down.webp)no-repeat center / contain;
                    width: clamp(26px, calc(20.692307692307693px + 1.4743589743589742vw), 49px);
                    height: 31px;
                    top: -25%;
                    left: 50%;
                    transform: translateX(-50%);

                    @media (max-width: 767px) {
                        top: -37px;
                    }
                }
            }

            @media (max-width: 767px) {
                flex-wrap: wrap;
                padding: 4%;
            }

            figure {
                width: min(100%, 212px);

                @media (max-width: 767px) {
                    width: 100%;
                }
            }

            .guide__flow-icon {
                width: min(100%, 71px);
                margin: 0 41px;

                @media (max-width: 767px) {
                    width: 30px;
                    margin: 0.5em 0.4em 0 0;
                }
            }

            figcaption {
                width: min(100%, 502px);

                @media (max-width: 767px) {
                    width: calc(100% - 40px);
                    margin-top: 0.8em;
                }

                .tit {
                    font-weight: 300;
                }

                .desc {
                    font-weight: 300;
                    margin-top: 1em;
                    line-height: 1.3;

                    span {
                        display: block;
                        font-size: 13px;
                        font-weight: 300;
                        line-height: 1.5;
                        text-align: left;
                        margin-top: 0.5em;
                    }
                }
            }
        }
    }

    .bottom_txt {
        width: min(100% - 4rem, 962px);
        margin-inline: auto;
        margin-top: 50px;
        text-align: center;
        font-family: var(--font-marugothic);
        font-weight: 300;
        color: var(--color-blue02);
        line-height: 1.6;
    }
}
/*========================================================
/* common-line-cta（guide page）
==========================================================*/
#flow-guide + .common-line-cta {
    margin-top: clamp(55px, calc(34.230769230769226px + 5.769230769230769vw), 145px);
}

/*========================================================
/* page-bottom-note（#product-list内：白背景上書き）
==========================================================*/
#product-list .page-bottom-note {
    font-family: var(--font-ja-mincho);
    color: #fff;
}