@charset "utf-8";

/*******************************************
common
*******************************************/

.real {
    .breadcrumb {
        .section__inner {
            width: min(92.36%, 1330px);
        }
    }
}

.section__inner {
    padding: clamp(50px, 8.33vw, 120px) 0 clamp(50px, 9.72vw, 140px);
}

.bg-food {
    position: relative;
    overflow: hidden;

    &::before {
        position: absolute;
        content: "";
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-image: url(../img/real/message/txt-bg-pc.png);
        background-repeat: no-repeat;
        background-size: cover;
        width: max(117.63vw, 1000px);
        aspect-ratio: 1694/1720;
        mix-blend-mode: multiply;

    }
}

.btn-outer-faq-real {
    width: min(100%, 550px);
    margin: max(var(--size65), 30px) auto 0;

    .arrow {
        &::before {
            width: 10px;
        }
    }

    @media screen and (max-width:480px) {
        width: min(100%, 300px);

        .btn {
            padding: 0 1.5em;
        }
    }
}

/*******************************************
mv
*******************************************/
.mv {
    margin-top: calc(clamp(0px, 1.38vw, 20px) + var(--headerHeight));

}

.mv__bg {
    width: min(92.36%, 1330px);
    margin: 0 auto;
}

/*******************************************
message
*******************************************/
.message {
    .section__inner {
        padding-bottom: clamp(50px, 9.72vw, 100px);
    }
}

.messageBox {
    position: relative;
    width: min(100%, 980px);
    margin: 0 auto;
    background-color: var(--gray06);
    font-size: var(--font41);
    border-radius: var(--radius30);
}

.messageBox__inner {
    padding: 55px 20px 60px;

    &.bg-food {
        &::before {
            transform: translate(-39.5%, -59%);
            max-width: 1694px;
        }
    }

    @media screen and (max-width: 480px) {
        padding: 50px 10px 30px;
    }
}

.message__chara01 {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -74%);
    width: clamp(100px, 11.944vw, 172px);

    @media screen and (max-width: 768px) {
        transform: translate(-50%, -50%);
    }
}

.messageBox__ttl {
    position: relative;
    font-size: 1em;
    text-align: center;
    margin-bottom: 25px;
    font-weight: var(--weight500);
    line-height: var(--lineHight175);

    .red03 {
        position: relative;

        &::before {
            position: absolute;
            content: "";
            left: 0;
            bottom: 0;
            background-image: url(../img/real/message/line01.svg);
            background-repeat: no-repeat;
            background-size: contain;
            aspect-ratio: 126/8.5;
            width: 100%;
            transform: translateY(100%);
        }
    }

    @media screen and (max-width: 480px) {
        margin-bottom: 10px;
        font-size: 6.21vw;
    }

    @media screen and (max-width: 370px) {
        font-size: 6.21vw;
    }

}

.messageBox__txt {
    line-height: 2.411;
    text-align: center;
}


/*******************************************
gap
*******************************************/
.gap,
.reason {
    border-radius: max(var(--size60), 20px) max(var(--size60), 20px) 0 0;

    .section__inner {
        width: min(100%, 1100px);
    }
}

.gap {
    background-color: var(--beige06);
    background-image: radial-gradient(circle, var(--beige08) clamp(1.458px, 0.243vw, 3.5px), transparent clamp(1.458px, 0.243vw, 3.5px));

    .section__inner {
        padding-top: clamp(50px, 8.33vw, 100px);
        padding-bottom: clamp(70px, 9.72vw, 140px);
    }

}

.gap__ttl {
    font-size: var(--font34);
    margin-bottom: 1em;
}

.gap-container {
    .box01 {
        margin-bottom: clamp(40px, 7.98vw, 115px);

        &:last-child {
            margin-bottom: 0;

            .gap__data {
                .ttl {
                    margin-bottom: 1.5em;
                }
            }
        }
    }

    @media screen and (max-width: 480px) {
        .box01__main {
            padding-bottom: 50px;
        }
    }
}


.gap__data {
    padding: 0 0 30px;
    border-bottom: 1px solid var(--gray07);
    margin-bottom: max(var(--size40), 20px);

    .ttl {
        line-height: 1.47;
        font-size: var(--font19);
        text-align: center;
        font-weight: var(--weight700);
        color: var(--red07);
        margin-bottom: 1em;
    }

    .img {
        width: min(80%, 495px);
        margin: 0 auto;
    }

    @media screen and (max-width: 480px) {
        .ttl {
            margin-bottom: 15px;
        }

        .img {
            width: min(100%, 300px);
        }
    }
}

.gap__fukidashi {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--size40) var(--size50);

    .fukidashi__flex {
        width: calc((100% - var(--size50))/2);


    }

    .fukidashiBox {
        min-height: 98.5px;
    }

    @media screen and (max-width: 1024px) {
        .fukidashi__flex {
            width: 100%;
        }

        .fukidashiBox {
            min-height: initial;
        }

    }

    @media screen and (max-width: 768px) {
        .fukidashi__flex {
            & .icon {
                .txt {
                    width: 150%;
                }
            }
        }
    }

    @media screen and (max-width: 480px) {
        gap: 40px;

        .fukidashi__flex {
            & .icon {
                .txt {
                    width: 300%;
                }
            }
        }
    }
}



/*******************************************
reason
*******************************************/
.reason {
    background-color: var(--red07);
    margin-top: calc(-1 * clamp(20px, 2.77vw, 40px));

    &.bg-food {
        &::before {
            mix-blend-mode: initial;
            opacity: .15;
            width: max(150.486vw, 1500px);
            transform: translate(-53%, -56.7%);
        }
    }

}

.reason__ttl {


    .box01__ttl {
        background-color: var(--brown01);
        border-radius: var(--radius01);
        margin-bottom: max(var(--size55), 30px);
        overflow: hidden;

        &>span {
            position: relative;
            color: var(--white);
            font-size: var(--font28);
            text-align: center;
            display: block;
        }
    }
}

.reason__loop {
    margin: 0 auto 75px;
    width: min(100%, 277.5px);

    @media screen and (max-width: 480px) {
        width: min(100%, 200px);
    }
}

.loopSwiper {
    overflow: visible;
}



.loopSwiper__list {
    transition-timing-function: linear;
    gap: 25px;

    .swiper-slide {
        display: flex;
        flex-direction: column;
        height: auto;
        cursor: pointer;
    }

    @media screen and (max-width: 480px) {
        gap: 10px;
    }
}


.fukidashi__flex--reason {
    flex-direction: column-reverse;
    width: 100%;
    align-items: flex-start;
    gap: 30px;
    flex-grow: 1;

    .icon {
        width: 60px;

        .txt {
            top: 50%;
            left: 116%;
            transform: translateY(-50%);
            white-space: nowrap;
            color: var(--white);
            font-size: 12px;
            text-align: left;
        }
    }

    .fukidashiBox {
        flex: none;
        width: 100%;
        flex-grow: 1;
        background-color: var(--white);

        &::before {
            top: auto;
            bottom: 0;
            left: 0;
            transform: translate(158%, 90%);
            clip-path: polygon(0 0, 100% 0%, 50% 100%);
            background-color: var(--white);
        }

        p {
            font-size: min(var(--font15), 14px);
        }
    }

    @media screen and (max-width: 480px) {
        .fukidashiBox {

            &::before {
                transform: translate(97%, 90%);
            }


        }
    }
}

.reasonData-outer {
    padding-bottom: 45px;
    border-bottom: 1px solid var(--gray07);


    @media screen and (max-width: 480px) {
        padding-bottom: 30px;
    }
}

.reasonData {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    gap: min(6.944vw, 100px);
    width: min(100%, 818px);
    margin: 0 auto;

    .img {
        width: min(80%, 397px);
    }

    @media screen and (max-width: 1024px) {
        flex-direction: column;
        gap: 20px;
    }
}

.reason__answer {
    flex: 1;
    padding: 25px 40px;
    background-color: var(--beige06);
    border-radius: var(--radius20);

    .ttl {
        font-size: var(--font19);
        text-align: center;
        color: var(--red07);
        font-weight: var(--weight700);
        margin-bottom: 0.7em;
    }

    li {
        font-weight: var(--weight500);
        font-size: var(--font17);
        margin-bottom: 0.8em;
        padding-left: 1.3em;

        &:last-child {
            margin-bottom: 0;
        }

        &::before {
            font-size: 1em;
            top: 0;
        }
    }

    @media screen and (max-width: 1024px) {
        flex: none;
        width: min(100%, 400px);
    }
}

.fukidashi__flex--reason02 {
    width: 100%;
    margin-top: 40px;

    .fukidashiBox {
        p {
            font-size: var(--font17);
            text-align: left;
        }
    }

    @media screen and (max-width: 480px) {
        margin-top: 30px;
    }
}