@charset "UTF-8";
/* CSS Document */


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


    .maincontents-inner section {
        margin-bottom: 70px;
    }

    .contents01 .box-name {
        width: 100%;
        padding-bottom: 30px;
    }

    .contents01 .box-name img {
        width: 60%;
        max-width: 300px;
    }


    /* layout04 */

    .layout04 {
        display: flex;
        justify-content: center;
        width: 88%;
        gap: 30px;
    }

    .layout04::before {
        display: none;
    }

    .layout04 .box-detail {
        width: 100%;
    }

    .layout04 .box-img img {
        height: 500px;
    }

    .layout04 h5 {
        font-family: var(--subtitle-font);
        color: var(--color-sub);
        font-size: 30px;
        line-height: 0.9;
        font-weight: 300;
        letter-spacing: 0.2em;
        padding: 35px 0px 15px;
    }

    .layout04 h6 {
        font-size: 18px;
        line-height: 2.2;
        margin-bottom: 35px;
    }


    /* layout05 */

    .layout05 {
        justify-content: center;
        gap: 70px;
        width: 88%;
        padding-top: 90px;
        flex-direction: column;
    }

    .layout05 .box {
        width: 100%;
        height: 130px;
        padding: 0px 25px;
    }

    .layout05 .box::before {
        left: 15px;
        width: 300px;
        height: 20px;
        margin-top: -30px;
    }

    .pc-view {
        display: none;
    }

    .sp-view {
        display: inline-block;
    }

}