/* /option/web/index.phpのみに適用されるCSSファイルです */
.main .mds_box.sec5 .works {
    flex-wrap: wrap;
}

.main .mds_box.sec5 .works .frex-item {
    width: 32%;
}

.main {
    padding-top: 30px;
}

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

@media screen and (max-width: 768px) {
    .mds_box {
        margin-bottom: 60px;
    }

    .main100_g.mv img {
        /* padding-top: 110px; */
        width: 100%;
    }

    .mds_box.top_ttl {
        margin-bottom: unset;
    }

    .mds_box.sec1 {
        margin-bottom: unset;
    }

    .main {
        width: 94%;
        padding-top: 30px;
    }

    .main .sec1 .frex-box {
        flex-wrap: wrap;
    }

    .main .sec1 .frex-box img {
        width: 12%;
    }

    .main .sec1 .frex-box h5 {
        margin-top: 15px;
    }

    .main .sec1 .frex-box .box {
        margin-top: 30px;
        padding: unset;
    }

    .main .sec2 {
        margin-top: 60px;
    }

    .main .mds_box.sec5 .works {
        margin-top: 20px;
    }

    .main .mds_box.sec5 .works .frex-item {
        width: 46%;
    }

    .main .mds_box.sec5 .works .frex-item .PD20 {
        padding: 10px 0;
    }
}

@media screen and (max-width: 480px) {
    .mds_box.top_ttl {
        width: 94%;
        margin: auto;
    }
    .main .sec2 {
        margin-top: 30px;
    }

    .mds_box {
        margin-bottom: 20px;
    }

    .mds_box.top_ttl p.top_txt01 {
        font-size: calc(20px + 4 * (100vw - 375px) / 105);
    }

    .mds_box.top_ttl p.top_txt02 {
        font-size: calc(12px + 2 * (100vw - 375px) / 105);
    }

    .main .mds_box.sec1 p.top_ttl {
        font-size: calc(20px + 4 * (100vw - 375px) / 105);
    }

    .main .mds_box.sec2 .top_ttl {
        margin-bottom: 20px;
    }

    .main .mds_box.sec2 .frex-item {
        width: 24%;
        margin-top: 10px;
    }

    .main .mds_box.sec2 .frex-item div {
        padding: unset;
    }

    .main .mds_box.sec3 .top_ttl {
        margin-bottom: 20px;
    }

    .main .mds_box.sec3 .box {
        flex-wrap: wrap;
    }

    .main .mds_box.sec4 .top_ttl {
        margin-bottom: 30px;
    }

    .main .mds_box.sec4 .box {
        flex-wrap: wrap;
    }

    .main .mds_box.sec4 .sec4_txt_img img{
        width: 100%;
    }

    .main .mds_box.sec5 .top_ttl {
        margin-bottom: 20px;
    }

    .main .mds_box.sec6 table.option tr {
        height: unset;
        display: flex;
        flex-wrap: wrap;
    }

    .main .mds_box.sec6 .option th {
        width: 100% !important;
        padding: 10px;
        background: #cccccc;
    }

    .main .mds_box.sec6 .option td {
        width: 100% !important;
    }

    .main .mds_box.sec6 .option td:not(:last-of-type) {
        border-bottom: 1px dashed #cccccc;
    }

    .main .mds_box.sec7 .box {
        flex-wrap: wrap;
    }

    .main .mds_box.sec8 p {
        text-align: unset !important;
    }
}