@charset "UTF-8";

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





/*------------------------------------*\
    $CONTENTS
\*------------------------------------*/
.machine {
    padding-top: clamp(48px, calc(100vw * (66 / var(--innerContainerSize))), 66px);
    padding-bottom: clamp(96px, calc(100vw * (122 / var(--innerContainerSize))), 122px);
}

    .machine__block {
        display: flex;
        flex-wrap: wrap;
        column-gap: max(24px, 3.28125%);
        row-gap: 24px;
    }
    .machine__block + .machine__block { margin-top: clamp(48px, calc(100vw * (64 / var(--innerContainerSize))), 64px) }

        .machine__image {
            flex-grow: 1;
            width: 28.75%;
            max-width: 520px;
            height: 100%;
            padding: clamp(4px, calc(100vw * (9 / var(--innerContainerSize))), 9px);
            margin-inline: auto;
            border: 1px solid var(--primaryColor-800);
            border-radius: 10px;
            background-color: white;
        }
        .machine__image img {
            aspect-ratio: 348 / 268;
            width: 100%;
            height: 100%;
            border-radius: 10px;
            object-fit: cover;
        }

        .machine__content {
            flex-grow: 1;
            width: 67.96875%;
        }

            .machine__title {
                margin-bottom: calc(1em * (22 / 36));
                color: var(--primaryColor-800);
                font-family: var(--fontSub);
                font-size: clamp(2.4rem, calc(100vw * (36 / var(--innerContainerSize))), 3.6rem);
                font-weight: 900;
                line-height: 1;
            }

            .machine__description {
                position: relative;
                z-index: 1;
                width: min(440px, 100%);
                margin-bottom: 2.125em;
                font-size: clamp(1.4rem, calc(100vw * (16 / var(--innerContainerSize))), 1.6rem);
                line-height: 1.625;
            }
            @media screen and (min-width: 768px) {
                .machine__description { min-height: 3.25em }
            }

            .machine__comment {
                position: relative;
                display: grid;
                grid-template-columns: clamp(96px, calc(100% * (112 / 838)), 112px) 1fr;
                grid-column-gap: clamp(12px, calc(100vw * (15 / var(--innerContainerSize))), 15px);
                padding-top: 14px;
                padding-inline: 16px;
                padding-bottom: 18px;
                background-color: var(--primaryColor-100);
            }
            @media screen and (min-width: 1024px) {
                .machine__block .machine__comment::before {
                    /*
                    content: "";
                    position: absolute;
                    bottom: 100%;
                    background-repeat: no-repeat;
                    background-position: 50% 100%;
                    background-size: contain;
                    */
                }
                .machine__block .machine__comment__item1::before {
                    content: "";
                    position: absolute;
                    bottom: 100%;
                    background-repeat: no-repeat;
                    background-position: 50% 100%;
                    background-size: contain;
                    aspect-ratio: 274 / 189;
                    right: calc(100% * (27 / 870));
                    width: calc(100% * (274 / 870));
                    background-image: url(../images/machine/image-bubble-01.jpg);
                    background-image:
                        image-set(
                            url(../images/machine/image-bubble-01.jpg) 1x,
                            url(../images/machine/image-bubble-01@2x.jpg) 2x
                        );
                    background-image:
                        -webkit-image-set(
                            url(../images/machine/image-bubble-01.jpg) 1x,
                            url(../images/machine/image-bubble-01@2x.jpg) 2x
                        );
                }
                .machine__block .machine__comment__item2::before {
                    content: "";
                    position: absolute;
                    bottom: 100%;
                    background-repeat: no-repeat;
                    background-position: 50% 100%;
                    background-size: contain;
                    aspect-ratio: 247 / 177;
                    right: calc(100% * (55 / 870));
                    width: calc(100% * (247 / 870));
                    background-image: url(../images/machine/image-bubble-02.jpg);
                    background-image:
                        image-set(
                            url(../images/machine/image-bubble-02.jpg) 1x,
                            url(../images/machine/image-bubble-02@2x.jpg) 2x
                        );
                    background-image:
                        -webkit-image-set(
                            url(../images/machine/image-bubble-02.jpg) 1x,
                            url(../images/machine/image-bubble-02@2x.jpg) 2x
                        );
                }
                /*
                .machine__block:nth-of-type(3) .machine__comment::before {
                    aspect-ratio: 322 / 170;
                    right: calc(100% * (5 / 870));
                    width: calc(100% * (322 / 870));
                    background-image: url(../images/machine/image-bubble-03.jpg);
                    background-image:
                        image-set(
                            url(../images/machine/image-bubble-03.jpg) 1x,
                            url(../images/machine/image-bubble-03@2x.jpg) 2x
                        );
                    background-image:
                        -webkit-image-set(
                            url(../images/machine/image-bubble-03.jpg) 1x,
                            url(../images/machine/image-bubble-03@2x.jpg) 2x
                        );
                }
                */
            }

                .machine__comment__image {
                    width: 100%;
                    height: fit-content;
                    border: 4px solid white;
                    border-radius: 100%;
                    overflow: hidden;
                }
                .machine__comment__image img {
                    aspect-ratio: 1 / 1;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }


                .machine__comment__details {}

                    .machine__comment__name {
                        margin-bottom: 6px;
                        color: var(--primaryColor-800);
                        font-size: clamp(2.0rem, calc(100vw * (24 / var(--innerContainerSize))), 2.4rem);
                        line-height: calc(26 / 24);
                    }
                    .machine__comment__name span {
                        margin-left: calc(1em * (10 / 14));
                        font-family: var(--font);
                        font-size: calc(1em * (14 / 24));
                        font-weight: 400;
                    }

                    .machine__comment__text {
                        font-size: clamp(1.4rem, calc(100vw * (16 / var(--innerContainerSize))), 1.6rem);
                        font-weight: 500;
                        line-height: 1.625;
                    }