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

# reserve-page

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

/*========================================================
/* service
==========================================================*/
#service {
    width: min(100% - 2em, 997px);
    margin-inline: auto;
    margin-top: clamp(40px, calc(16.69230769230769px + 6.474358974358975vw), 141px);

    .heading_block {
        background: var(--color-blue01);

        .heading {
            font-family: var(--font-ja-gothic);
            text-align: center;
            font-weight: 400;
            color: #fff;
            line-height: 1.3;
            padding: 1em;
        }
    }

    .service_container {
        margin-top: clamp(26px, calc(12.153846153846153px + 3.8461538461538463vw), 86px);
        position: relative;

        .tit {
            display: block;
            width: 100%;
            background: rgba(87, 183, 195, 0.28);
            color: var(--color-blue01);
            font-family: var(--font-marugothic);
            line-height: 1.4;
            text-align: left;
            padding: 0.5em 1em 0.5em 490px;
            position: absolute;
            top: 11px;
            z-index: -1;

            @media (max-width: 1175px) {
                padding: 0.5em 1em 0.5em clamp(364px, calc(-68.67924528301887px + 47.54716981132076vw), 490px);
            }

            font {
                font-size: clamp( 14px, calc( 12.615384615384615px + 0.38461538461538464vw ), 20px );
            }
        }

        @media (max-width: 910px) {
            .tit {
                position: static;
                padding: 0.5em 1em;
                text-align: left;
            }
        }
    }

    .column {

        display: flex;
        align-items: center;

        @media (max-width: 1040px) {
            align-items: flex-end;
        }

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

        figure {
            margin-left: min(7%, 97px);
            padding: 0 11px;
            background: #fff;

            @media (max-width: 910px) {
                margin: 20px 0 0 0;
            }

            img {
                width: min(100%, 355px);

                &:nth-of-type(n+2) {
                    margin-top: 24px;

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

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

        figcaption {
            font-size: clamp(16px, calc(15.538461538461538px + 0.1282051282051282vw), 18px);
            padding: 0 2em;
            color: var(--color-text);

            @media (max-width: 910px) {
                padding: 0 0.5em;
                margin-top: 20px;
            }

            .txt {
                line-height: 1.3;

                &.bottom {
                    margin-top: clamp(35px, calc(17.88118811881188px + 1.881188118811881vw), 54px);

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

                font {
                    font-size: 16px;
                }
            }

            .list {
                .list-tit {
                    margin-top: clamp(30px, calc(0.2673267326732649px + 3.2673267326732676vw), 63px);

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

                ul {
                    margin-top: 2em;

                    @media (max-width: 767px) {
                        margin-top: 1.5em;
                    }
                }

                li {
                    &:first-child {
                        margin-left: -0.1em;
                        margin-bottom: 0.5em;
                    }

                    margin-left: 1em;
                    line-height: 1.3;
                }
            }
        }
    }
}

/*========================================================
/* qa
==========================================================*/
#qa {
    margin-top: clamp(80px, calc(27.38461538461538px + 14.615384615384617vw), 308px);

    .heading_block {
        background: url(../img/service-qa/bg_qa.webp) no-repeat center center / cover;
        padding: 4.9em 0 7.3em;

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

        .heading {
            font-family: var(--font-ja-gothic);
            text-align: center;
            color: var(--color-blue01);
            font-weight: 400;
        }
    }

    .inner {
        width: min(100% - 2em, 997px);
        margin-inline: auto;
        margin-top: clamp(30px, calc(7.384615384615387px + 6.282051282051282vw), 128px);

        .qa_container {

            /* accordion */
            .toggle {
                display: none;
            }

            .qa_box {
                border: 0.5px solid var(--color-text);

                &:nth-of-type(n+2) {
                    margin-top: clamp(10px, calc(5.384615384615385px + 1.282051282051282vw), 30px);
                }
            }

            .qa_Label {
                display: block;
                margin-inline: auto;
                font-family: var(--font-ja-gothic);
                font-size: clamp(15px, calc(13.846153846153847px + 0.3205128205128205vw), 20px);
                line-height: 1.4;
                letter-spacing: 0.1em;
                color: var(--color-blue01);
                text-indent: -1.6em;
                padding: 1em 2em 1em 2.4em;
                font-feature-settings: "palt";
                position: relative;

                &::before {
                    position: absolute;
                    content: "";
                    background: url(../img/service-qa/btn_qa.webp)no-repeat center center /contain;
                    width: clamp(15.5px, calc(14.346153846153847px + 0.3205128205128205vw), 20.5px);
                    height: 20.5px;
                    top: 1em;
                    right: 13px;
                }
            }

            .qa_Label,
            .qa_accordion {
                -webkit-backface-visibility: hidden;
                backface-visibility: hidden;
                transform: translateZ(0);
                transition: all 0.3s;
                font-weight: 400;
            }

            .qa_accordion {
                height: 0;
                font-family: var(--font-ja-gothic);
                overflow: hidden;
                color: var(--color-text);
                font-size: clamp(15px, calc(13.846153846153847px + 0.3205128205128205vw), 20px);
                line-height: 2;
                padding: 0 1em;
            }

            .toggle:checked+.qa_Label+.qa_accordion {
                height: auto;
                transition: all .3s;
                padding: 0.5em 1em 1em 1em;
            }

            .toggle:checked+.qa_Label::before {
                transform: rotate(-135deg) !important;
            }
        }

        .btn {
            margin-top: clamp(51px, calc(25.615384615384617px + 7.051282051282051vw), 161px);

            a {
                display: block;
                text-align: center;
                font-family: var(--font-ja-gothic);
                color: #fff;
                padding: 1em;
                background: var(--color-blue01);
                border-radius: 31px;
            }
        }

        .bottom_txt {
            text-align: center;
            font-family: var(--font-ja-gothic);
            font-size: clamp(15px, calc(12.692307692307693px + 0.641025641025641vw), 25px);
            font-weight: 300;
            color: var(--color-blue01);
            line-height: 1.6;
            margin-top: clamp(44px, calc(41.46153846153846px + 0.7051282051282052vw), 55px);
        }
    }
}


/*========================================================
/* reserve
==========================================================*/
.reserve-qa {
    /* margin-top: clamp(30px, calc(-6.692307692307693px + 10.192307692307692vw), 189px)!important; */
    margin-top: 0!important;
}