@charset "UTF-8";

/* CSS Document */

/* -----------------------------------------------
    common
----------------------------------------------- */
html {
    // scroll-behavior: smooth;z１
}

a:link,
a:active,
a:hover,
a:focus {
    outline: none !important;
    -moz-outline-style: none;
}

body {
    min-width: 1280px;

    p {
        padding-right: 0;
    }

    @media screen and (max-width:640px) {
        min-width: auto;
    }
}

a {
    color: #666 !important;
}

.contents_box {
    max-width: none;

    @media screen and (max-width: 740px) {
        margin: 0;
    }
}

.wrapper {
    padding: 0 2em;

    @media screen and (max-width:640px) {
        padding: 0 2em;
    }

    @media screen and (max-width:480px) {
        padding: 0 2em;
    }
}

a {
    text-decoration: none;
}

div#splide01-track {
    height: auto;
}

div#splide01-clone01 {
    padding-top: 42.4%;
}

.slider {
    max-width: 1440px;
    // min-width: 976px;
    margin: auto;

    @media screen and (max-width:640px) {
        width: auto;
        max-width: 640px;
    }

    .splide__slide,
    .splide__slide2,
    .splide__slide3,
    .splide__slide4,
    .splide__slide5 {
        height: 0;
        width: 100%;

        @media screen and (max-width:640px) {
            width: auto;
            height: auto;
        }

        .splide__slide_box {
            position: absolute;
            top: 0;
            left: 10%;
            margin: 64px 0 0 0;

            @media screen and (max-width:640px) {
                // top: 16%;
                // left: 50px;
                position: static;
                // padding: 2em 2em;
                padding: 4em 2em 0 2em;
                margin: 0;
            }
        }

        h1 {
            // font-size: clamp(24px, 2.67vw, 32px);
            font-size: 32px;
            font-weight: normal;
            line-height: 1.6em;
            color: #4D4D4D;

            @media screen and (max-width:640px) {
                color: #4D4D4D !important;
                font-size: clamp(21px, 5.53vw, 32px);
                line-height: 1.6em;
            }
        }

        p {
            font-size: min(16px, 18px);
            // font-size: clamp(12px, 1.33vw, 16px);
            font-weight: normal;
            line-height: 2.4em;
            color: #4D4D4D;
            margin: 4% 0 0 0;

            @media screen and (max-width:640px) {
                color: #4D4D4D !important;
                font-size: clamp(13px, 3.53vw, 18px);
                line-height: 2em;
                // margin: 1.6em 0 0 0;
                padding: 0;
            }

            @media screen and (max-width:420px) {
                font-size: 13px;
            }
        }

        .span {
            margin: 0 0 -16px 0;

            @media screen and (max-width:640px) {
                margin: 0;
            }
        }

        .white {
            color: #fff;
        }

        .first_view_5 {
            margin: 40px 0 0 0;

            @media screen and (max-width:640px) {
                margin: 1.6em 0 0 0;
            }
        }
    }
}

.splide__slide2 {
    background-image: url(/common/img/first_view_2.jpg);
}

.splide__slide3 {
    background-image: url(/common/img/first_view_3.jpg);
}

.splide__slide4 {
    background-image: url(/common/img/first_view_4.jpg);
}

.splide__slide5 {
    background-image: url(/common/img/first_view_5.jpg);
}

.splide__toggle {
    border: none;
    background: #fff;

    img {
        width: 33px;
        background: #fff;
        padding: 3px 16px 0 0 !important;
        position: relative;
        top: 2px;
        right: -191px;
    }
}

/* ページネーションのスタイル */
.splide__pagination {
    bottom: 80px;
    position: absolute;

    @media screen and (max-width:640px) {
        top: 0 !important;
        left: -4em !important;
        // right: auto !important;
        // left: -40px !important;
    }

    @media screen and (max-width:620px) {
        top: -32px !important;
    }
}

.splide__list {
    height: auto !important;
}

.splide__pagination {
    bottom: -1.6em !important;
}

.splide__pagination__page {
    height: 16px !important;
    margin: 3px 16px 0 0 !important;
    width: 16px !important;
}

.splide__pagination__page.is-active {
    background: #666666 !important;
    transform: scale(1) !important;
}

.more {
    max-width: 1440px;
    margin: auto;
}

/* -----------------------------------------------
    business_name
----------------------------------------------- */
.business_name {
    padding: 24px 0;
    background: #fff;

    // background: #F2F2F2;
    // border-top: 1px solid #ccc;
    .outer {
        width: 976px;
        margin: auto;
        display: flex;
        align-items: center;

        h1 {
            font-size: 24px;
            font-weight: bold;
            color: #666;

            @media screen and (max-width:980px) {
                width: auto;
                font-size: 16px;
                padding: 0 0 0 15px;
            }
        }

        p {
            font-size: 16px;
            font-weight: lighter;
            margin: 0 0 0 16px;
        }
    }
}

/* -----------------------------------------------
    concept
----------------------------------------------- */
.concept {
    text-align: center;
    padding: 80px 0 0 0;
    margin: auto;

    @media screen and (max-width:640px) {
        width: auto;
        // margin: 104px 0;
        margin: 0 0 40px 0;
        padding: 0;
    }

    .title {
        // font-size: 32px;
        font-size: clamp(21px, 2.33vw, 28px);
        font-weight: normal;
        color: #666666;
        // margin: 0 0 60px 0;
        text-align: center;

        @media screen and (max-width:640px) {
            font-size: max(4.38vw, 24px);
            line-height: 1.6em;
        }
    }

    .lead {
        // font-size: 22px;
        font-size: clamp(16px, 1.86vw, 21px);
        font-weight: normal;
        color: #666666;
        line-height: 1.8em;
        margin: 0 0 116px 0;
        text-align: center;

        @media screen and (max-width:640px) {
            margin: 0 auto 48px auto;
            font-size: max(3.13vw, 16px);
            text-align: justify;
        }

        .for_740 {
            @media screen and (max-width:640px) {
                display: none;
            }
        }
    }
}

/* -----------------------------------------------
    wrapper
----------------------------------------------- */
.contents_wrapper {
    max-width: 1200px;
    // min-width: 640px;

    // width: auto;
    // max-width: 1440px;
    // min-width: 1200px;
    // margin: auto;
    // @media screen and (max-width:640px){
    //     width: auto;
    //     padding: 0 4vw;
    // }
    a {
        display: flex;

        @media screen and (max-width:640px) {
            display: block;
        }

        @media screen and (max-width:640px) {
            display: block;
        }
    }

    a:hover {
        opacity: 0.7;
    }

    .title {
        font-size: 28px;
        font-weight: bold;
        color: #666666;
        text-align: center;
        margin: 0 0 60px 0;

        @media screen and (max-width:640px) {
            font-size: max(4.38vw, 21px);
            margin: 0 0 30px 0;
        }
    }

    .contents_outer {
        // width: 1200px;
        margin: auto;
    }

    .contents_detail_1,
    .contents_detail_2,
    .contents_detail_3,
    .contents_detail_4,
    .contents_detail_5 {
        @media screen and (max-width:640px) {
            // max-width: 640px;
            display: block !important;
        }
    }

    .contents_detail_1 {
        width: 100%;
        display: flex;
        background-color: #DED8DD;
        margin: 0 0 16px 0;

        img {
            max-width: 42.5vw;
            width: 394px;
            display: block;

            @media screen and (max-width:640px) {
                max-width: none;
                width: 100%;
            }
        }
    }

    .contents_detail_2 {
        width: 100%;
        display: flex;
        background-color: #DEE3EF;
        margin: 0 0 16px 0;

        img {
            max-width: 42.5vw;
            width: 394px;
            display: block;

            @media screen and (max-width:640px) {
                max-width: none;
                width: 100%;
            }
        }
    }

    .contents_detail_3 {
        width: 100%;
        display: flex;
        background-color: #F1E8DA;
        margin: 0 0 16px 0;

        img {
            max-width: 42.5vw;
            width: 394px;
            display: block;

            @media screen and (max-width:640px) {
                max-width: none;
                width: 100%;
            }
        }
    }

    .contents_detail_4 {
        width: 100%;
        display: flex;
        background-color: #E0EADA;
        margin: 0 0 16px 0;

        img {
            max-width: 42.5vw;
            width: 394px;
            display: block;

            @media screen and (max-width:640px) {
                max-width: none;
                width: 100%;
            }
        }
    }

    .contents_detail_5 {
        width: 100%;
        display: flex;
        background-color: #E9E7E6;
        margin: 0 0 16px 0;

        img {
            max-width: 42.5vw;
            width: 394px;
            display: block;

            @media screen and (max-width:640px) {
                max-width: none;
                width: 100%;
            }
        }
    }

    .contents_caption_box {
        // width: 60.83vw;
        // margin: 0 0 0 2.5vw;
        padding: 0px 1em 0px 2.5vw;

        @media screen and (max-width:640px) {
            padding: 0px 1em 1em 1em;
        }

        @media screen and (max-width:640px) {
            margin: 16px 24px;
            padding: 0;
        }

        .catch {
            // font-size: 28px;/
            font-size: clamp(21px, 2.33vw, 28px);
            // font-size: min(2.33vw, 28px);
            font-weight: normal;
            color: #4D4D4D;
            margin-bottom: 0px;

            @media screen and (max-width:640px) {
                font-size: max(4.38vw, 21px);
                font-weight: 500;
            }
        }

        .caption {
            max-width: 610px;
            // font-size: 18px;
            font-size: clamp(15px, 1.5vw, 18px);
            // font-size: min(1.4vw, 18px);
            font-weight: normal;
            color: #4D4D4D;
            // letter-spacing: 0.1em;
            line-height: 1.8em;
            // margin: -20px 0 0 0;
            margin: 16px 0 0 0;
            padding: 0 0 24px 0;
            text-align: justify;

            @media screen and (max-width:640px) {
                font-size: 16px;
            }

            @media screen and (max-width:640px) {
                font-size: max(3.28vw, 16px);
                text-align: justify;
                margin: 8px 0 0 0;
            }
        }
    }
}

/* -----------------------------------------------
    SBU
----------------------------------------------- */
.ycmt {
    margin: 0 0 80px 0;
}

.ycmt_link {
    max-width: 976px;
    border: 1px solid #666666;
    margin: 80px auto 80px auto;
    padding: 0 0 16px 0;

    @media screen and (max-width:640px) {
        padding: 0;
        margin: 80px auto 80px auto;
    }

    .box {
        max-width: 980px;
        margin: 120px auto 80px auto;
        padding: 0 0 16px 0;

        p {
            text-align: center;
            font-size: 28px;
            font-weight: bold;
            color: #666666;

            @media screen and (max-width:640px) {
                font-size: 21px;
                line-height: 1.4em;
            }
        }

        .ycmt_img {
            width: 280px;
            margin: auto;

            @media screen and (max-width:640px) {
                padding: 0 0 0 40px;
            }
        }
    }
}

.sbu_about {
    max-width: 100%;
    width: 976px;
    // display: flex;
    justify-content: space-between;
    margin: 32px auto 70px auto;

    @media screen and (max-width:640px) {
        display: block;
    }

    @media screen and (max-width:640px) {
        width: auto;
        display: block;
    }

    .about_outer {
        display: flex;
        justify-content: center;

        .ycmt_logo {
            width: 420px;
            max-width: 43.03vw;
            margin: 40px 0 -16px 0;

            @media screen and (max-width:640px) {
                width: 409px;
                max-width: 68.65vw;
                margin: 40px 0 -16px 32px;
            }
        }
    }

    .box {
        justify-content: center;
        display: flex;

        @media screen and (max-width:640px) {
            display: block;
        }

        .sbu_about_img {
            width: 529px;
            // max-width: 37.91vw;

            @media screen and (max-width:640px) {
                width: 100%;
                max-width: none;
            }
        }

        .plant_img {
            width: 432px;
            margin: 0 0 0 3%;

            @media screen and (max-width:640px) {
                width: 100%;
                margin: 24px auto 0 auto;
            }
        }
    }

    .sbu_about_box {
        // max-width: 560px;

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

        @media screen and (max-width:640px) {
            margin: -400 0 0 0;
        }

        div {
            text-align: center;
        }

        .title {
            font-size: clamp(21px, 2.33vw, 28px);
            // font-size: 28px;
            font-weight: bold;
            // text-align: left;
            text-align: center;
            margin: 24px 0 40px 0;
            color: #666666;

            @media screen and (max-width:640px) {
                margin: 24px 0 16px 0;
                line-height: 1.6em;
                padding: 0;
            }

            @media screen and (max-width:640px) {
                font-size: max(4.38vw, 24px);
                margin: 16px 0 16px 0;
            }
        }

        .lead {
            // max-width: 500px;
            font-size: clamp(14px, 1.33vw, 16px);
            // padding: 0;
            margin: 0 0 40px 0;
            padding-top: 0;
            font-weight: normal;
            // margin: 0 0 40px 0;
            line-height: 1.6em;
            color: #666666;

            @media screen and (max-width:640px) {
                font-size: 16px;
                padding-right: 0;
            }

            @media screen and (max-width:640px) {
                font-size: max(3.28vw, 16px);
                text-align: justify;
            }
        }
    }

}

/* -----------------------------------------------
    access
----------------------------------------------- */
.access {
    max-width: 100%;
    width: 976px;
    margin: auto;

    @media screen and (max-width:640px) {
        width: auto;
    }

    .title {
        font-size: clamp(21px, 2.17vw, 28px);
        // font-size: 26px;
        color: #666666;
        margin: 0 0 32px 0;

        @media screen and (max-width:640px) {
            font-size: max(4.38vw, 24px);
            margin: 0 0 16px 0;
        }
    }
}

.access_box {
    display: flex;
    justify-content: space-between;
    margin: 0 0 20px 0;

    @media screen and (max-width:640px) {
        display: block;
    }

    @media screen and (max-width:640px) {
        display: block;
    }

    div {
        @media screen and (max-width:640px) {
            margin: 0 0 32px 0;
        }

        .caption {
            margin: 8px 0 20px 0;
            padding: 0;
        }

        .lead {
            font-size: clamp(14px, 1.33vw, 16px);
            color: #666666;
            margin: 0 0 8px 0;
            font-weight: normal;
            line-height: 1.4em;

            @media screen and (max-width:640px) {
                font-size: max(3.28vw, 16px);
                text-align: justify;
                line-height: 1.6em;
            }
        }

        // .address {
        //     font-size: 16px;
        //     color: #666666;
        //     margin: 60px 0 0px 0;
        //     font-weight: normal;
        // }
        .catch {
            font-size: clamp(18px, 2vw, 24px);
            // font-size: 25px;
            color: #666666;
            margin: 0 0 0 0;

            @media screen and (max-width:640px) {
                font-size: max(3.75vw, 18px);
            }
        }

        .caption {
            font-size: clamp(15px, 1.25vw, 15px);
            // font-size: 15px;
            color: #666666;
            font-weight: normal;

            @media screen and (max-width:640px) {
                font-size: max(3.28vw, 16px);
                text-align: justify;
                line-height: 1.6em;
            }
        }
    }
}

.access_outer {
    padding: 0 16px 0 0;

    @media screen and (max-width:640px) {
        padding: 0;
    }

    img {
        width: 482px;
        margin: 0 0 16px 0;
        padding: 0;

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

        @media screen and (max-width:640px) {
            width: auto;
            margin: 0 0 16px 0;
        }
    }
}

.map_outer {
    padding: 0 0 0 16px;

    @media screen and (max-width:640px) {
        padding: 0;
    }

    img {
        width: 440px;

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

        @media screen and (max-width:640px) {
            width: auto;
        }
    }
}

.access_info {
    background-color: #E8E8E8;
    padding: 30px 48px 30px 48px;
    margin: 40px 0;

    @media screen and (max-width:640px) {
        padding: 16px 24px 16px 24px;
    }

    .title {
        font-size: clamp(18px, 1.75vw, 21px);
        // font-size: 21px;
        margin: 0 0 16px 0;
        color: #666666;

        @media screen and (max-width:640px) {
            font-size: max(3.28vw, 16px);
            margin: 0 0 8px 0;
        }
    }

    .lead {
        font-size: clamp(14px, 1.5vw, 18px);
        // font-size: 18px;
        margin: 0 0 64px 0;
        line-height: 1.6em;
        color: #666666;
        text-indent: -1em;
        padding-left: 1em;

        @media screen and (max-width:640px) {
            font-size: max(2.81vw, 16px);
            margin: 0 0 16px 0;
        }
    }

    .comments {
        font-size: clamp(14px, 1.33vw, 16px);
        // font-size: 17px;
        margin: -18px 0 20px 0;
        line-height: 1.6em;
        color: #666666;
        text-indent: -1em;
        padding-left: 1em;

        @media screen and (max-width:640px) {
            font-size: max(2.5vw, 16px);
            margin: 16px 0 20px 0;
        }
    }
}

/* -----------------------------------------------
    solution
----------------------------------------------- */
.solution_first_view,
.process_first_view,
.material_first_view,
.support_first_view {
    position: relative;
    margin: auto;

    .solution_first_view_box,
    .process_first_view_box,
    .material_first_view_box,
    .support_first_view_box {
        position: absolute;
        top: 10%;
        // margin: 5% 0 0 8%;
        margin: 0 0 0 100px;

        @media screen and (max-width:640px) {
            position: inherit;
            margin: 8% 0 32px 2em;
        }
    }

    h1 {
        // font-size: min(3.33vw, 32px);
        font-size: 32px;
        font-weight: normal;
        line-height: 1.6em;
        color: #fff;

        @media screen and (max-width:640px) {
            // color: #000;
            // font-size: clamp(21px, 8vw, 24px);
            // font-weight: 500;
            color: #4D4D4D !important;
            font-size: clamp(21px, 5.53vw, 32px);
            line-height: 1.6em;
        }
    }

    p {
        // font-size: clamp(12px, 1.67vw, 18px);
        font-size: 18px;
        font-weight: normal;
        line-height: 1.6em;
        color: #fff;
        // margin: 4% 0 0 0;
        line-height: 2.4em;

        @media screen and (max-width:640px) {
            // color: #000;
            // font-size: clamp(14px, 3.6vw, 18px);
            // font-weight: 500;
            color: #4D4D4D !important;
            font-size: clamp(14px, 3.53vw, 18px);
            // line-height: 2em;
        }
    }
}

.process_first_view {

    // .solution_first_view_box,
    // .process_first_view_box {
    //     top: min(12%, 118px);
    // }

    h1 {
        color: #000;
    }

    p {
        color: #000;
        margin: 4% 0 0 0;
    }
}

.material_first_view {
    margin-bottom: 100px;

    h1 {
        color: #000;
    }

    p {
        color: #000;
        margin: 4% 0 0 0;
    }
}

.support_first_view {
    @media screen and (max-width:640px) {}

    img {
        @media screen and (max-width:640px) {}
    }

    h1 {}

    p {
        margin: 4% 0 0 0;
    }
}

.solution {
    margin: auto;
    padding: 56px 2em 0 2em;

    .molding_border,
    .molding_border_none {
        max-width: 1136px;
        border-bottom: 1px solid;
        padding: 0 2em 68px 2em;
        margin: 0 auto 72px auto;

        @media screen and (max-width:640px) {
            width: auto;
            padding: 0 0 40px 0;
            margin: 0 auto 40px auto;
        }

        .solution_1-2_box,
        .solution_2-2_box,
        .solution_3-2_box,
        .solution_5-2_box,
        .solution_6-2_box,
        .solution_12-2_box {
            max-width: 976px;
            background-color: rgb(231, 234, 242);
            position: relative;
            margin: 40px auto 0px;
            padding: 0 0 106px 0;

            @media screen and (max-width:640px) {
                width: 100%;
                padding: 0 0 56px 0;
                padding: 40px 0 40px 0 !important;
                // position: inherit;
                position: relative;
            }

            .solution_6-2 {
                width: 976px;
                max-width: 100%;
                margin: auto;

                @media screen and (max-width:640px) {
                    padding: 24px 0;
                }
            }

            .solution_6-3 {
                width: 255px;

                @media screen and (max-width:640px) {
                    width: auto;
                }
            }

            .zoom-link {
                font-size: 14px;
                color: #666666 !important;
                margin: 0;
                position: absolute;
                right: 2px;
                top: 16px;
            }

            .outer {
                .catch {
                    font-size: 20px;
                    // font-size: clamp(14px, 2.9vw, 20px);
                    line-height: 1.4em;
                    margin: 0 0 0 80px;
                    position: absolute;
                    right: 56px;
                    bottom: 76px;
                    z-index: 20;

                    @media screen and (max-width:640px) {
                        font-size: 16px;
                        margin: -24px 0 32px 40px;
                        position: inherit;
                    }
                }

                .lead_box {
                    width: 990px;
                    display: flex;
                    padding: 0 0 24px 24px;
                    position: absolute;
                    bottom: 0;

                    @media screen and (max-width:640px) {
                        width: auto;
                        display: block;
                        margin: 0 5%;
                        padding: 0;
                        position: inherit;
                    }

                    .lead {
                        max-width: 336px;
                        font-size: 16px;
                        // font-size: clamp(12px, 2.9vw, 16px);
                        line-height: 1.6em;
                        margin: 62px 343px 0 32px;

                        @media screen and (max-width:640px) {
                            margin: 0;
                            padding: 16px 0 0 0;
                        }
                    }
                }
            }
        }

        .solution_1-2_box {
            padding: 1px 32px 24px 32px !important;

            p {
                font-size: 18px;
                font-weight: 500;
            }

            .outer {
                display: flex;
                position: relative;
                justify-content: space-between;

                @media screen and (max-width:640px) {
                    display: block;
                }

                img {
                    width: 955px;

                    @media screen and (max-width:640px) {
                        position: relative;
                        width: 100% !important;
                        margin: 0 0 32px 0;
                    }

                }

                .solution_1-5_img {
                    width: 38px;
                    position: absolute;
                    top: 56px;
                    left: 284px;

                    img {
                        @media screen and (max-width:640px) {
                            margin: 0 !important;
                            top: 173px;
                            right: 0;
                            left: 0;
                            margin: auto;
                            transform: rotate(90deg);
                        }
                    }

                }
            }
        }

        .solution_2-2_box {
            display: flex;
            align-items: center;
            padding: 24px 24px 32px 24px !important;
            margin: 40px auto 0 auto;

            @media screen and (max-width:640px) {
                display: block;
                padding: 28px 28px;
            }

            p {
                max-width: 190px;
                font-weight: 500;
                line-height: 1.6em;

                @media screen and (max-width:640px) {
                    max-width: none;
                    margin: 0px 0 32px 0;
                    padding: 0;
                }
            }

            .outer {
                display: flex;
                align-items: center;

                @media screen and (max-width:640px) {
                    display: block;
                }

                img {
                    width: 130px;

                    @media screen and (max-width:640px) {
                        width: 64%;
                        margin: auto;
                        display: flex;
                    }
                }

                .solution_2-6_img {
                    width: 24px;
                    margin: 0 24px;

                    @media screen and (max-width:640px) {
                        width: 40px;
                        margin: auto;
                        padding: 24px 0;
                        transform: rotate(90deg);
                    }
                }
            }
        }

        .solution_3-2_box {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 24px 24px 32px 24px !important;
            margin: 40px auto 0 auto;

            @media screen and (max-width:640px) {
                display: block;
            }

            p {
                max-width: 230px;
                font-weight: 500;
                line-height: 1.6em;
                margin-top: 8px;

                @media screen and (max-width:640px) {
                    max-width: none;
                    padding: 0;
                }
            }

            .span {
                font-size: 18px;
                font-weight: 500;
                padding: 0;
                margin: 0;
            }

            .outer {
                display: flex;
                align-items: center;

                .solution_3-2_img,
                .solution_3-3_img {
                    width: 180px;
                }

                .solution_3-4_img {
                    width: 240px;
                    margin: 0 0 0 24px;
                }

                .solution_3-5_img {
                    width: 24px;
                    margin: 0 12px;
                }
            }
        }

        .solution_5-2_box {
            display: flex;
            align-items: center;
            justify-content: space-around;
            padding: 0 !important;
            margin: 40px auto 0 auto;

            @media screen and (max-width:640px) {
                display: block;
            }

            .outer {
                width: 100%;
                padding: 24px 24px;
                display: flex;
                align-items: center;

                @media screen and (max-width:640px) {
                    display: block;
                }

                p {
                    max-width: 255px;
                    font-size: 18px;
                    line-height: 1.4em;

                    @media screen and (max-width:640px) {
                        max-width: 255px;
                        margin: 0 0 24px 0;
                    }
                }

                img {
                    width: 310px;
                }

                .solution_5-2_img {
                    margin: 0 0 0 3%;
                }

                .solution_5-3_img {
                    margin: 0 0 0 3%;
                }
            }
        }

        .solution_12-2_box {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 0 0 60px;
            margin: 40px auto 0 auto;

            @media screen and (max-width:640px) {
                display: block;
                padding: 0 !important;
            }

            .text {
                p {
                    font-size: 18px;
                    font-weight: 500;
                }

                img {
                    width: 340px;

                    @media screen and (max-width:640px) {
                        padding: 24px;
                    }
                }
            }

            img {
                width: 510px;
            }
        }

        .solution_8-2_box {
            width: 976px;
            margin: 48px auto 0 auto;

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

            li {
                margin: 0;
                padding: 0;

                .point {
                    padding: 0 !important;
                }
            }
        }

        .molding_box {
            max-width: 976px;
            display: flex;
            margin: auto;
            // align-items: center;
            justify-content: space-between;
            position: relative;
            z-index: 1;

            @media screen and (max-width:640px) {
                width: auto;
                display: block;
            }

            .solution_img {
                // width: 460px;
                width: 460px;
                z-index: 1;
                // max-width: 38.33vw;

                @media screen and (max-width:640px) {
                    width: 100%;
                    max-width: 100%;
                    margin: 24px 0 0 0;
                }
            }

            .solution_3_img {
                // margin: 0 0 0 38px;

                @media screen and (max-width:640px) {
                    margin: 32px 0 0 0;
                }
            }

            .solution_3-2 {
                width: 240px;
                max-width: 24vw;
                position: absolute;
                top: -20px;
                right: -10px;

                @media screen and (max-width:640px) {
                    width: 300px;
                    max-width: 50vw;
                }
            }

            .caption_box {
                max-width: 500px;
                margin: 0 5% 0 0;

                @media screen and (max-width:640px) {
                    max-width: none;
                    margin: 0;
                }

                div {
                    display: flex;
                }

                .text {
                    font-size: 16px;
                    font-weight: normal;
                    color: #666666;
                    margin: 0 0 0.5em 0;

                    @media screen and (max-width:640px) {
                        font-size: 16px;
                        line-height: 1.4em;
                        margin: 0;
                        padding: 0;
                    }
                }

                .title {
                    font-size: 28px;
                    font-weight: 500;
                    color: #666666;
                    margin: 0;
                    padding: 40px 0 0 0;
                    margin-top: -40px;

                    @media screen and (max-width:640px) {
                        font-size: 25px;
                        line-height: 1.4em;
                        // padding: 120px 0 0 0;
                        // margin-top: -120px;
                        padding: 0;
                        margin: 0;
                    }
                }

                .english {
                    margin: 8px 0 0 0;
                }

                .catch {
                    font-size: 20px;
                    color: #fff;
                    margin: 16px 10px 0 0;
                    padding: 4px 10px 7px 10px;
                    background-color: #000;

                    @media screen and (max-width:640px) {
                        font-size: 18px;
                    }
                }

                .lead {
                    max-width: 433px;
                    font-size: 15px;
                    font-weight: 500;
                    margin: 24px 0 0 0;
                    line-height: 1.6em;
                    padding: 0;

                    @media screen and (max-width:640px) {
                        font-size: 16px;
                        font-weight: 500;
                        // margin: 16px 0 32px 0;
                    }
                }

                ul {
                    max-width: 471px;
                    margin: 32px 0 0 0;

                    li {
                        margin: 8px 0 0 0;
                        padding: 0;

                        .point {
                            font-size: 15px;
                            font-weight: 500;
                            line-height: 1.6em;
                            margin: 0;
                            padding: 0;
                            padding-left: 1em;
                            text-indent: -1em;

                            @media screen and (max-width:640px) {
                                font-size: 16px;
                                line-height: 1.6em;
                            }
                        }
                    }
                }

                .comments {
                    font-size: 13px;
                    font-weight: 400;
                    line-height: 1.4em;
                    padding: 0;
                    margin: 24px 0 0 0;
                    padding-left: 1em;
                    text-indent: -1em;
                }

                .picture {
                    width: 440px;
                    margin: 24px 0 0 0;

                    @media screen and (max-width:640px) {
                        width: 100%;
                        margin: 16px 0 0 0;
                    }
                }
            }

            .solution_3-2_box {
                position: relative;
                margin: 40px 0 0 0;
            }
        }
    }

    .solution_6-2_box {
        a {
            padding: 120px 0 0 0;
            margin: -120px 0 0 0;
        }

        .catch {
            @media screen and (max-width:640px) {
                margin: -16px 0 20px 40px !important;
            }
        }
    }

    .molding_border_none {
        border-bottom: none;
    }
}

.printing_title {
    // width: 1200px;
    padding: 40px 0 40px 0;
    background-color: #D1D1D1;
    margin: -72px auto 80px auto;
    width: 1280px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);

    @media screen and (max-width:640px) {
        width: 100vw;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        margin: -24px auto 32px auto;
    }
}

.printing_title p {
    max-width: 976px;
    text-align: center;
    margin: auto !important;
    margin: -40px auto 0 auto !important;
    padding: 40px 0 0 0;
    font-size: 28px;
    font-weight: bold;
    color: #666666;

    @media screen and (max-width:640px) {
        text-align: center;
        font-size: clamp(18px, 4vw, 24px);
    }
}

.others {
    max-width: 976px;
    margin: auto;
    padding: 0 0 40px 0 !important;

    .title {
        font-size: 28px;
        font-weight: bold;
        color: #666666;
        text-align: center;

        @media screen and (max-width:640px) {
            font-size: 24px;
        }
    }

    .btn {
        max-width: 976px;
        padding: 16px 32px 16px 8%;
        margin: 0 0 32px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border: 1px solid #666666;

        p {
            font-size: clamp(16px, 4vw, 24px);
            font-weight: 500;
            color: #666666;
            margin: 0 !important;
        }

        img {
            max-width: 4vw;
            width: 27px;
        }
    }
}

.space {
    margin: 72px auto 0 auto !important;
}

/* -----------------------------------------------
    material
----------------------------------------------- */
.material {
    padding: 0 2em;

    p {
        font-weight: 500;
    }

    .material_border {
        width: 1200px;
        max-width: 100%;
        border-bottom: 1px solid;
        margin: auto;

        .material_wrapper1,
        .material_wrapper2,
        .material_wrapper3,
        .material_wrapper4,
        .material_wrapper5 {
            width: 976px;
            max-width: 100%;
            margin: 56px auto 48px auto;

            .material_box1,
            .material_box2,
            .material_box3,
            .material_box4,
            .material_box5 {
                max-width: 100%;
                display: flex;
                justify-content: space-between;

                @media screen and (max-width:640px) {
                    display: block;
                }

                img {
                    width: 530px;
                }

                .outer {
                    width: 530px;
                    margin: 0 1% 0 0;

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

                    .catch {
                        font-size: 16px;
                        font-weight: normal;
                        padding: 40px 0 0 0;
                        margin: -40px 0 0 0;
                        color: #666666;
                    }

                    .heading {
                        font-size: 28px;
                        margin: 10px 0 0.5em 0;
                        color: #666666;
                        padding: 0;

                        @media screen and (max-width:640px) {
                            font-size: 27px;
                            line-height: 1.4em;
                            padding-right: 0 !important;
                        }
                    }

                    .comment {
                        font-size: 16px;
                        padding: 0;
                        margin: 0;
                        color: #666666;
                        line-height: 1.4em;
                    }
                }

                .caption_box {
                    display: flex;

                    .caption {
                        color: #fff;
                        text-align: center;
                        font-size: 20px;
                        padding: 4px 10px 7px 10px;
                        background: #000;
                    }

                    .span {
                        margin-right: 8px;
                    }
                }

                .text {
                    max-width: 436px;
                    // max-width: 100%;
                    line-height: 1.6em;
                    padding: 0;
                    margin: 0;

                    @media screen and (max-width:640px) {
                        text-align: justify;
                        margin: 0 0 16px 0;
                    }
                }

                .note {
                    // width: 220px;
                    line-height: 1.8em;
                    margin-left: 1.2em;
                    text-indent: -1em;

                    @media screen and (max-width:640px) {
                        // padding-left: 1em;
                        text-indent: -1em;
                    }

                    span {
                        font-size: 14px;
                        line-height: 1.3em;
                    }
                }

                .heading_5 {
                    margin: 0 160px 0 0;

                    @media screen and (max-width:640px) {
                        text-align: center;
                        margin: 0;
                    }

                    img {
                        width: 446px;

                        @media screen and (max-width:640px) {
                            width: 100%;
                            margin: 0;
                        }
                    }
                }
            }

            .lead_box {
                display: flex;
                background-color: #DEEAF7;
                justify-content: space-between;
                margin: 24px 0 0 0;
                padding: 8px 24px;

                @media screen and (max-width:640px) {
                    display: block;
                }

                .text_box {
                    // width: 254px;

                    .heading {
                        font-size: 18px;
                        line-height: 1.4em;
                        color: #333333;
                        margin-top: 12px;

                        @media screen and (max-width:640px) {
                            font-size: 18px;
                            line-height: 1.6em;
                            padding: 0;
                        }
                    }

                    .text {
                        // width: 288px;
                        width: 268px;
                        font-size: 12px;
                        font-weight: 500;
                        line-height: 1.6em;

                        @media screen and (max-width:640px) {
                            width: 100%;
                            font-size: 16px;
                            font-weight: normal !important;
                            margin-top: -8px;
                            margin-bottom: 32px;
                            padding: 0;
                        }
                    }
                }

                .img_box {
                    width: 560px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    @media screen and (max-width:640px) {
                        width: auto;
                        display: block;
                    }

                    div {
                        @media screen and (max-width:640px) {
                            text-align: center;
                        }

                        img {
                            width: 178px;

                            @media screen and (max-width:640px) {
                                width: 72% !important;
                                margin: 0 0 48px 0;
                            }

                        }

                        .span img {
                            width: 138px;
                        }
                    }
                }
            }
        }
    }
}

.material_wrapper1 {
    .span img {
        width: 148px !important;
    }
}

.material_wrapper2 {
    .note {
        padding: 0;
    }

    .lead_box {
        .img_outer {
            width: 660px;

            @media screen and (max-width:640px) {
                width: auto;
            }

            ul {
                display: flex;
                margin: 16px 0 16px 0;
                justify-content: space-between;

                @media screen and (max-width:640px) {
                    flex-wrap: wrap;
                    margin: 40px 0 -16px 0;
                }

                li {
                    position: relative;
                    margin: 0;
                    color: #1B1B1B;

                    @media screen and (max-width:640px) {
                        width: 120px;
                        margin: 0 0 48px 0;
                    }

                    p {
                        margin: 0;

                        @media screen and (max-width:640px) {
                            text-align: center;
                        }
                    }

                    img {
                        width: 70px;
                        position: absolute;
                        bottom: -90px;

                        @media screen and (max-width:640px) {
                            position: inherit;
                            margin: 16px 0 0 0;
                            width: 80px;
                            max-width: 20vw;
                        }
                    }

                    .material_lead_4 {
                        @media screen and (max-width:640px) {
                            text-align: center;
                        }

                        img {
                            width: 150px !important;

                            @media screen and (max-width:640px) {
                                max-width: 50vw;
                                margin: 16px 0 0 0;
                            }
                        }
                    }

                    .material_lead_5 {
                        @media screen and (max-width:640px) {
                            text-align: center;
                        }

                        img {
                            width: 49px !important;
                            margin: 0 0 0 6px;

                            @media screen and (max-width:640px) {
                                max-width: 50vw;
                                margin: 16px 0 0 0;
                            }
                        }
                    }

                    .material_lead_6 {
                        @media screen and (max-width:640px) {
                            text-align: center;
                        }

                        img {
                            width: 58px !important;
                            margin: 0 0 0 16px;

                            @media screen and (max-width:640px) {
                                max-width: 50vw;
                                margin: 16px 0 0 0;
                            }
                        }
                    }

                    .material_lead_7 {
                        @media screen and (max-width:640px) {
                            text-align: center;
                        }

                        img {
                            width: 63px !important;
                            margin: 0 0 0 12px;

                            @media screen and (max-width:640px) {
                                max-width: 50vw;
                                margin: 16px 0 0 0;
                            }
                        }
                    }

                    .material_lead_8 {
                        @media screen and (max-width:640px) {
                            text-align: center;
                        }

                        img {
                            width: 76px !important;
                            margin: 0 0 13px 6px;

                            @media screen and (max-width:640px) {
                                max-width: 50vw;
                                margin: 16px 0 0 0;
                            }
                        }
                    }

                    .material_lead_8-2 {
                        img {
                            width: 72px !important;
                            margin: 0 0 0 8px;

                            @media screen and (max-width:640px) {
                                text-align: center;
                                max-width: 50vw;
                                margin: 16px 0 0 0;
                            }
                        }
                    }
                }
            }

            .img_box {
                width: 660px !important;

                img {
                    width: 56px !important;
                }

                .span img {
                    width: 104px !important;
                }
            }
        }
    }
}

.material_wrapper3 {
    .note {
        line-height: 1.4em !important;
        margin-left: 1.2em;
        text-indent: -1.2em;

        @media screen and (max-width:640px) {
            margin: 0 0 16px 0;
            text-indent: -1em;
        }
    }

    .material_heading {
        width: auto;
        position: relative;

        .material_lead {
            width: 120px;
            position: absolute;
            left: -16px;
            bottom: 16px;

            @media screen and (max-width:640px) {
                width: 80px;
                bottom: -8px;
            }
        }
    }

    .lead_box {
        .lead_box_mini {
            width: 490px;
            display: flex;

            @media screen and (max-width:640px) {
                width: auto;
                display: block;
            }

            .text_box {
                width: 270px;

                @media screen and (max-width:640px) {
                    width: auto;
                }

                .text {
                    width: 228px !important;
                    padding: 0;

                    @media screen and (max-width:640px) {
                        width: 100% !important;
                    }
                }
            }

            .img_box {
                width: 270px !important;

                @media screen and (max-width:640px) {
                    text-align: center;
                    width: auto;
                    // margin: 8px 80px 0 0px;
                    margin: auto;
                }

                .wood {
                    img {
                        width: 180px !important;
                    }
                }


                div {
                    @media screen and (max-width:640px) {
                        text-align: inherit !important;
                    }

                    img {
                        width: 150px !important;

                        @media screen and (max-width:640px) {
                            // margin: 8px 80px 0 0px;
                            width: 140px !important;
                        }
                    }
                }
            }
        }
    }
}

.material_wrapper4 {
    .note_box {
        display: flex;
        align-items: center;

        @media screen and (max-width:640px) {
            display: block;
        }

        .note {
            width: 216px;

            @media screen and (max-width:640px) {
                width: auto;
                line-height: 0;
                padding: 0;
            }
        }

        .after {
            width: 230px;
            margin: 0 0 0 16px;
            line-height: 1.6em;

            @media screen and (max-width:640px) {
                text-align: center;
                width: 100%;
                margin: auto;
            }

            span {
                font-size: 21px;
                font-weight: bold;
            }
        }

        img {
            width: 32px !important;

            @media screen and (max-width:640px) {
                transform: rotate(90deg);
            }
        }

        .allo {
            img {
                margin: 16px auto 24px auto;
                display: flex;
            }
        }
    }

    .lead_box {
        .heading {
            font-size: 18px;
            line-height: 1.8em !important;
            margin: 1em 0 0.5em 0;

            @media screen and (max-width:640px) {
                font-size: 17px !important;
            }
        }

        .text_box {
            width: 270px;

            @media screen and (max-width:640px) {
                width: auto !important;
            }
        }

        .img_box {
            width: 720px !important;

            @media screen and (max-width:640px) {
                width: 88% !important;
                margin: auto;
            }

            div {
                text-align: inherit !important;
            }

            .span img {
                width: 426px !important;

                @media screen and (max-width:640px) {
                    width: 264px !important;
                }
            }

            img {
                width: 183px;

                @media screen and (max-width:640px) {
                    width: 100% !important;
                    margin: 32px 0 0 0;
                }
            }
        }
    }
}

.material_wrapper5 {
    .material_box5 {
        align-items: center;

        .heading {
            margin: 0.5em 0 0.5em 0 !important;
        }

        img {
            width: 120px !important;
        }

        .note {
            color: #E4007F;
        }
    }
}

.others {
    padding: 64px 0 0px 0;

    a:hover {
        opacity: 0.7;
    }
}



/* -----------------------------------------------
    support
----------------------------------------------- */
.support {
    padding: 0 2em 32px 2em;

    p {
        padding-right: 0;
    }

    .support_border,
    .support_border_none {
        width: 1200px;
        max-width: 100%;
        border-bottom: 1px solid;
        margin: auto;

        .support_wrapper1,
        .support_wrapper2,
        .support_wrapper3 {
            width: 976px;
            // width: 1140px;
            max-width: 100%;
            margin: 56px auto 48px auto;

            .support_box1,
            .support_box2,
            .support_box3 {
                max-width: 100%;
                display: flex;
                justify-content: space-between;

                @media screen and (max-width:640px) {
                    display: block;
                }

                .outer,
                .outer2 {
                    width: 500px;
                    margin: 0 3% 0 0;

                    @media screen and (max-width:640px) {
                        width: 100%;
                        margin: 0 3% 0 0;
                    }

                    .heading {
                        font-size: 24px;
                        font-weight: 500;
                        // font-size: clamp(21px, 2.2vw, 24px);
                        line-height: 1.6em;
                        // letter-spacing: 0.1em;
                        margin: 1em 0 0.5em 0;
                        color: #5D80BE;
                        font-feature-settings: "palt";
                    }

                    .catch {
                        font-size: 18px;
                        font-weight: bold;
                        line-height: 1.6em;
                        padding: 0;
                        margin: 32px 0 0 0;
                        color: #666666;

                        @media screen and (max-width:640px) {
                            font-size: 16px;
                            margin: 32px 0 -8px 0 !important;
                        }
                    }

                    .comment {
                        font-size: 13px;
                        padding: 0;
                        margin: 0;
                        color: #666666;
                    }
                }

                .support_heading {
                    position: relative;

                    img {
                        // width: 498px;
                        width: 446px;

                        @media screen and (max-width:640px) {
                            width: 100%;
                            margin: 32px 0 0 0;
                        }
                    }

                    p {
                        position: absolute;
                        top: 10px;
                        left: 12px;
                        font-size: clamp(14px, 2.9vw, 16px);
                        line-height: 1.6em;

                        @media screen and (max-width:640px) {
                            top: -8px;
                        }
                    }

                    .support_lead {
                        max-width: 100%;
                        width: 470px;
                        justify-content: space-between;
                        display: flex;
                        align-items: end;
                        position: absolute;
                        bottom: -168px;

                        @media screen and (max-width:640px) {
                            right: 0;
                        }

                        p {
                            position: absolute;
                            width: 270px;
                            bottom: 437px;
                            left: 20px;
                            line-height: 1.6em;
                        }

                        img {
                            width: 140px;
                        }
                    }
                }

                .caption_box {
                    display: flex;

                    .caption {
                        color: #fff;
                        text-align: center;
                        font-size: 20px;
                        padding: 4px 10px 7px 10px;
                        background: #000;
                    }

                    .span {
                        margin-right: 8px;
                    }
                }

                .text {
                    max-width: 464px;
                    line-height: 1.6em;

                    @media screen and (max-width:640px) {
                        text-align: justify;
                    }
                }

                .note {
                    line-height: 1.8em;

                    span {
                        font-size: 14px;
                        line-height: 1.3em;
                    }
                }

                img {
                    width: 446px;

                    // width: 532px;
                    @media screen and (max-width:640px) {
                        width: 100%;
                    }
                }
            }

            .lead_box {
                display: flex;
                background-color: #DEEAF7;
                justify-content: space-between;
                margin: 24px 0 0 0;
                padding: 8px 32px;

                .text_box {
                    .heading {
                        font-size: 18px;
                        line-height: 1.4em;
                        color: #333333;
                    }

                    .text {
                        font-size: 12px;
                        font-weight: 500;
                        line-height: 1.6em;
                    }
                }

                .img_box {
                    width: 560px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    img {
                        width: 178px;
                    }

                    .span img {
                        width: 138px;
                    }
                }
            }
        }
    }
}

.support_wrapper1 {
    padding: 0 0 180px 0;
}

.support_wrapper2 {
    @media screen and (max-width:640px) {
        margin: 0 0 72px 0 !important;
    }
}

.support_box2 {
    img {
        margin: 16px 0 0 0;
    }
}

.support_border_none {
    border: none !important;

    .text {
        margin: -16px 0 0 0;
    }

    .support_wrapper3 {
        width: 500px;

        .outer_wrapper {
            // margin: 0 0 0 0;
            margin: 0 3% 0 0;

            .outer2 {
                margin: 80px 0 0 0 !important;
            }
        }

        .support_box3 {
            .heading {
                margin: 0 0 32px 0 !important;
            }

            .catch {
                margin: 0 0 32px 0 !important;
            }
        }
    }
}

.support_box {
    position: relative;

    p {
        position: absolute;
        top: 48%;
        right: 42%;
        font-size: clamp(16px, 1.9vw, 16px);
        line-height: 1.6em;
    }
}

/* -----------------------------------------------
    propose
----------------------------------------------- */
.process {
    margin: 72px 0 0 0;
    padding: 0 2em 40px 2em;

    .process_box1,
    .process_box2,
    .process_box3,
    .process_box4,
    .process_box5,
    .process_box6,
    .process_box7 {
        position: relative;
        display: flex;
        max-width: 976px;
        // width: 1140px;
        margin: 0 auto 40px auto;
        border-radius: 20px;
        padding-bottom: 0;

        @media screen and (max-width:640px) {
            position: inherit;
            width: 100%;
            display: block;
        }

        img {
            width: 169px;
            max-width: 25vw;
            // margin-top: -400px;
            // padding-top: 400px;

            @media screen and (max-width:640px) {
                width: 100%;
                max-width: none;
            }
        }

        .back_box {
            position: relative;

            @media screen and (max-width:640px) {
                position: inherit;
            }
        }

        .process_caption {
            position: absolute;
            left: 8px;
            margin: 24px 0px 0 24px;

            @media screen and (max-width:1040px) {
                left: -20px;
            }

            @media screen and (max-width:640px) {
                position: inherit;
                margin: 24px 0 0 0;
            }

            .title {
                font-size: 22px;
                margin: -40px 0 24px 0;
                padding: 40px 0 0 0;

                // margin-bottom: 0 !important;
                @media screen and (max-width:640px) {
                    font-size: 24px;
                    margin: -40px 1em 32px 0.7em !important;
                    line-height: 1.4em;
                }
            }

            .background_3d {
                height: 56px !important;
                text-align: center;

                @media screen and (max-width:680px) {
                    height: 48px !important;
                }
            }

            .background_sel {
                height: 59px !important;
                text-align: center;

                @media screen and (max-width:680px) {
                    height: 49px !important;
                }
            }

            .background_pp {
                height: 59px !important;
                text-align: center;
            }

            .background_heat {
                height: 56px !important;
                text-align: center;
            }

            .catch {
                height: 42px;
                font-size: 16px;
                color: #fff;
                writing-mode: vertical-rl;
                background-color: #000;
                padding: 4px 4px 3px 4px;
                margin-right: 8px;
                margin-top: 0px !important;

                @media screen and (max-width:640px) {
                    height: 48px;
                    text-align: center;
                }
            }

            .text {
                font-size: 12px;
                line-height: 1.2em;
                margin: 0px !important;
                padding: 0 0 8px 0;

                @media screen and (max-width:640px) {
                    font-size: 16px;
                }
            }

            .lead {
                font-size: 16px;
                font-weight: bold;
                margin: 0px !important;
                line-height: 1.2em;

                @media screen and (max-width:640px) {
                    font-size: 16px;
                }
            }

            ul {
                display: flex;
                width: 780px;
                flex-wrap: wrap;
                margin: 0px !important;

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

            li {
                width: 260px;
                display: flex;
                margin: 0;
                padding: 0 0px 8px 0px;

                @media screen and (max-width:640px) {
                    width: 100%;
                    display: block;
                    margin: 0 1em 16px 1em;
                }

                a {
                    display: flex;
                    color: #000 !important;
                }
            }
        }
    }
}

.process_box1 {
    background-color: #DED8DD;

    a {
        background-color: #DED8DD !important;
    }
}

.process_box2 {
    background-color: #DEE3EF;

    a {
        background-color: #DEE3EF !important;
    }
}

.process_box3 {
    background-color: #D2E4DF;

    a {
        background-color: #D2E4DF !important;
    }
}

.process_box4 {
    background-color: #E0EADA;

    a {
        background-color: #E0EADA !important;
    }
}

.process_box5 {
    background-color: #F1E8DA;

    a {
        background-color: #F1E8DA !important;
    }
}

.process_box6 {
    background-color: #ECDEEB;

    .process_box6_img {

        .bac {
            height: 246.54px;
        }

        .free {
            top: -232px;
            left: 24px;
        }
    }

    a {
        background-color: #ECDEEB !important;
    }
}

div#process_box6 .process_caption {

    li {
        margin-right: 24px;
    }
}

.process_box7 {
    background-color: #E0DCEB;

    .title {
        margin: -40px 0 -8px 0 !important;
    }

    .outer {
        display: flex;
        margin: 16px 0 0 0;

        ul {
            display: block !important;
            width: 765px !important;

            p {
                margin: 0 0 10px 0;

                @media screen and (max-width:640px) {
                    margin: 0 0 16px 0;
                }
            }

            li {
                width: 760px !important;
                align-items: center;
                margin: 12px 6px 8px 0px !important;
                padding: 0 !important;

                @media screen and (max-width:640px) {
                    width: 100% !important;
                    margin: 0 1em 32px 1em !important;
                }

                .heading {
                    width: 320px;
                    font-size: 18px;
                    font-weight: bold;

                    @media screen and (max-width:640px) {
                        width: auto;
                    }
                }

                .span {
                    margin: 0 56px 0 0;
                }

                .box {
                    display: flex;
                }

                .center {
                    align-items: center;

                    .lead {
                        margin-bottom: 8px !important;
                        padding: 10px 0 0 0;
                    }
                }
            }
        }
    }

    a {
        background-color: #E0DCEB !important;
    }
}

.zoom_box {
    // background-color: rgb(231, 234, 242) !important;
    background: linear-gradient(180deg, #fff 34%, #fff 0%, rgb(231, 234, 242) 30%, rgb(231, 234, 242) 100%);
}

.zoom {
    max-width: 100vw;
    padding: 20px 0 0 0;
    margin: auto;

    /* 横にはみ出した要素をスクロールするプロパティ */
    overflow-x: scroll;

    /* 文字表記の方向（左右）を指定する */
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;

    img {
        /* 画像のサイズ指定 */
        width: 100%;
        height: auto;
    }
}

.btn-close {
    display: inline-block;
    padding: 25px 0;
    position: fixed;
    top: 20px;
    right: 20px;
}

.btn-close::before,
.btn-close::after {
    display: block;
    content: "";
    width: 50px;
    height: 1px;
    background: #000;
}

.btn-close::before {
    transform: rotate(-45deg);
}

.btn-close::after {
    transform: rotate(45deg);
}

.for_1280 {
    @media screen and (max-width:1280px) {
        display: none;
        text-align: justify;
    }
}

@media screen and (max-width: 400px) {

    .for-pc_400,
    .for_pc_400 {
        display: none;
    }

    .for-sp_400,
    .for_sp_400 {
        display: block;
    }
}

@media screen and (min-width: 400px) {

    .for-pc_400,
    .for_pc_400 {
        display: block;
    }

    .for-sp_400,
    .for_sp_400 {
        display: none;
    }
}

.for_sp_640 {
    @media screen and (max-width:640px) {
        display: block;
    }
}

.for_pc_640 {
    @media screen and (max-width:640px) {
        display: none;
    }
}

.for_640 {
    @media screen and (max-width:640px) {
        display: none;
        display: block;
    }
}

.for_640 {
    @media screen and (min-width:640px) {
        display: none;
        text-align: justify;
    }
}

@media screen and (max-width: 640px) {

    .for-pc,
    .for_pc {
        display: none;
    }

    .for-sp,
    .for_sp {
        display: block;
    }
}

@media screen and (min-width: 641px) {

    .for-pc,
    .for_pc {
        display: block;
    }

    .for-sp,
    .for_sp {
        display: none;
    }
}