@charset "UTF-8";

/*------------------------------------*\
    $CONTENTS
\*------------------------------------*/
/**
 * CONTENTS............目次
 * UNDER_BANNER........下部バナー
 * CONTENTS............コンテンツ
 */





/*------------------------------------*\
    $CONTENTS
\*------------------------------------*/
.underlayer-head__image { content-visibility: unset !important }
.underlayer-head__image img { transform: translateX(calc(100% * (34 / 505))) }


.faq {
    padding-top: clamp(48px, calc(100vw * (69 / var(--innerContainerSize))), 69px);
    padding-bottom: clamp(96px, calc(100vw * (131 / var(--innerContainerSize))), 131px);
    font-family: var(--font);
}

    .faq__inner {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 388px), 1fr));
        grid-column-gap: clamp(24px, calc(100% * (60 / 1280)), 60px);
        grid-row-gap: clamp(48px, calc(100vw * (57 / var(--innerContainerSize))), 57px);
    }

        .faq__block {}

            .faq__question {
                display: flex;
                align-items: center;
                column-gap: .7em;
                padding-block: 1em;
                border: 2px solid var(--primaryColor-800);
                border-radius: 10px;
                background-color: white;
                color: var(--primaryColor-500);
                font-size: clamp(1.6rem, calc(100vw * (20 / var(--innerContainerSize))), 2.0rem);
                font-weight: 900;
                line-height: 1.4;
                letter-spacing: .05em;
            }
            .faq__question::before {
                content: "Q";
                width: calc(1em * (35 / 60));
                margin-top: -0.2em;
                font-family: var(--fontEnSub);
                font-size: clamp(4.0rem, calc(100vw * (60 / var(--innerContainerSize))), 6.0rem);
                font-weight: 600;
                text-align: center;
            }
            @media screen and (min-width: 768px) {
                .faq__question {
                    min-height: 160px;
                    padding-left: calc(100% * (163 / 606));
                    background-image: url(../images/faq/image-question.jpg);
                    background-image:
                        image-set(
                            url(../images/faq/image-question.jpg) 1x,
                            url(../images/faq/image-question@2x.jpg) 2x
                        );
                    background-image:
                        -webkit-image-set(
                            url(../images/faq/image-question.jpg) 1x,
                            url(../images/faq/image-question@2x.jpg) 2x
                        );
                    background-repeat: no-repeat;
                    background-position: min(20px, calc(100vw * (20 / var(--innerContainerSize)))) calc(100% - 14px);
                    background-size: min(121px, calc(100vw * (121 / var(--innerContainerSize))));
                }
            }
            @media screen and (max-width: 767px) {
                .faq__question {
                    padding-inline: calc(100vw * (8 / 375));
                }
            }

            .faq__answer {
                display: flex;
                column-gap: 0.875em;
                color: var(--primaryColor-800);
                font-size: clamp(1.4rem, calc(100vw * (16 / var(--innerContainerSize))), 1.6rem);
                line-height: 1.75;
                letter-spacing: .05em;
            }
            @media screen and (min-width: 768px) {
                .faq__answer {
                    min-height: 162px;
                    padding-left: calc(100% * (165 / 610));
                    background-image: url(../images/faq/image-answer.jpg);
                    background-image:
                        image-set(
                            url(../images/faq/image-answer.jpg) 1x,
                            url(../images/faq/image-answer@2x.jpg) 2x
                        );
                    background-image:
                        -webkit-image-set(
                            url(../images/faq/image-answer.jpg) 1x,
                            url(../images/faq/image-answer@2x.jpg) 2x
                        );
                    background-repeat: no-repeat;
                    background-position: min(20px, calc(100vw * (20 / var(--innerContainerSize)))) calc(100% - 7px);
                    background-size: min(176px, calc(100vw * (176 / var(--innerContainerSize))));
                }
                .faq__answer::before {
                    content: "A";
                    width: calc(1em * (35 / 60));
                    height: 100%;
                    padding-top: 22px;
                    font-family: var(--fontEnSub);
                    font-size: clamp(4.0rem, calc(100vw * (60 / var(--innerContainerSize))), 6.0rem);
                    font-weight: 600;
                    text-align: center;
                    line-height: 1;
                }
            }
            @media screen and (max-width: 767px) {
                .faq__answer {
                    display: none;
                    overflow: hidden;
                }
            }

                .faq__answer p { padding-top: 22px }
                @media screen and (max-width: 767px) {
                    .faq__answer p {
                        display: flex;
                        column-gap: 0.875em;
                    }
                    .faq__answer p::before {
                        content: "A";
                        width: calc(1em * (35 / 60));
                        height: 100%;
                        padding-top: 22px;
                        font-family: var(--fontEnSub);
                        font-size: clamp(4.0rem, calc(100vw * (60 / var(--innerContainerSize))), 6.0rem);
                        font-weight: 600;
                        text-align: center;
                        line-height: 1;
                    }
                }