.cases {

    .l-mv {
        background-image: url(../../images/service/mv-bg_pc.jpg);
    }

    p {
        line-height: 2;
    }

    @media screen and (max-width: 768px) {
        .l-mv {
            background-image: url(../../images/service/mv-bg_sp.jpg);
        }
    }

    .page-title {
        margin-bottom: 60px;
    }

    h3 {
        margin-bottom: 30px;
        border-bottom: 1px #AAAAAA solid;
        padding-bottom: 15px;
    }

    .structure_wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;

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

        img {
            width: 48%;

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

        p {
            width: 45%;

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

    .reason,
    .difference2 {
        background-color: #F3F9FC;
        padding: 30px 0 60px;
        margin: 60px calc(50% - 50vw);
        width: 100vw;

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

    }

    .reason_wrap {
        display: flex;
        justify-content: space-between;

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

    .reason_single {
        width: 31%;
        background-color: #fff;
        padding: 20px;
        text-align: center;

        @media screen and (max-width: 480px) {
            width: 80%;
            margin: 0 auto 30px;
        }

        dt {
            text-align: left;
            color: #0E4D8F;
            margin-top: -35px;
            margin-left: -20px;
            font-weight: 900;
        }
    }

    @media screen and (max-width: 480px) {
        .difference2 img {
            margin-bottom: 30px;
        }
    }

    .working_wrap {
        display: flex;
        margin-top: 60px;
        justify-content: space-between;
        gap: 30px;

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

    .working_single {
        background-color: #F3F9FC;
        border-radius: 10px;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
        width: 32%;
        text-align: center;
        padding: 10px;

        @media screen and (max-width: 480px) {
            width: 90%;
            margin: 0 auto 30px;
        }

        img {
            width: 36px;
            height: auto;
        }

        h4 {
            font-size: 24px;
        }

        p {
            font-size: 12px;
        }
    }

    .flow {
        margin-top: 60px;
    }

    .flow_single {
        width: 90%;
        margin: 68px auto 0;

        @media screen and (max-width: 480px) {
            width: 100%;
            display: flex;
            justify-content: space-between;
        }

        h4 {
            background-color: #0E4D8F;
            color: #fff;
            border-radius: 20px;
            text-align: center;
            padding: 15px 0;
            position: relative;

            @media screen and (max-width: 480px) {
                width: calc(1em + 20px);
                padding: 0 10px;
                display: flex;
                align-items: center;
                white-space: wrap;
                word-break: break-all;
            }
        }
    }

    .flow_single_wrap {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin-top: 20px;

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

        dl {
            width: 48%;
            background-color: #E5F3FC;
            border-radius: 20px;
            padding: 15px;

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


            dt {
                font-size: 20px;
                margin-bottom: 10px;

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

            dd:nth-of-type(1) {
                font-size: 20px;
                margin-bottom: 20px;
                @media screen and (max-width: 480px) {
                    font-size: 16px;
                }
            }

            dd {
                font-size: 16px;
                line-height: 2em;
                @media screen and (max-width: 480px) {
                    font-size: 14px;
                }
            }
        }

        img {
            width: 48%;
            border-radius: 20px;

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

    .flow_single h4::before {
        font-size: 60px;
        color: #5ACFD6;
        position: absolute;
        top: -30px;
        left: 20px;

        @media screen and (max-width: 480px) {
            font-size: 32px;
            left: 0;
            top: -15px;
        }
    }

    .flow_single:nth-of-type(1) h4::before {
        content: "01";
    }

    .flow_single:nth-of-type(2) h4::before {
        content: "02";
    }

    .flow_single:nth-of-type(3) h4::before {
        content: "03";
    }

    .flow_single:nth-of-type(4) h4::before {
        content: "04";
    }

    .flow_single:nth-of-type(5) h4::before {
        content: "05";
    }
}