@media screen and (max-width:960px) {
    .flex-design3 .port-wrapper {
        width:45vw;
    }
    .flex-design3 .port-wrapper .contents4 {
        width:45vw;
        height:calc(45vw / 140 * 100); 
    }
    .small-title {
        margin:2vw 0 4vw;
        font-size:calc(100vw / 45);
    }
}

@media screen and (max-width:768px) {
    .top-view-text {
        top:40%;
        left:5vw;
    }
    .top-view-text p {
        font-size:calc(100vw / 80* 10);
        top:40%;
        left:5vw;
    }
    .contents p {
        font-size:55px;
    }
    .flex-design1,.flex-design2,.flex-design3 {
        display:block;
    }
    .flex-wrapper {
        width:100%;
    }
    .flex-wrapper {
        width:100%;
    }
    .contents4 {
       width:100%;
       height:calc((100vw - 6vw) / 140 * 100);
       margin:0 0 20px 0;
    }
    .contents1,.contents2,.contents3 {
        margin:2vw 0;
    }
    .contents1,.contents2,.contents3,.flex-wrapper {
        height:auto;
    }
    .contents1 > p,.contents2 > p,.flex-wrapper h2 {
        font-size:calc(100vw / 27);
        margin-bottom:0.3rem;
    }
    .contents3 > p {
        font-size:calc(100vw / 30);
    }
    .flex-design2 .port-wrapper {
        width:100%;
        max-width:500px;
        margin:4vw auto 12vw;
    }
    .flex-design2 .port-wrapper .contents4 {
        width:100%;
        height:calc(500px / 140 * 100);
    }
    .flex-design3 .port-wrapper {
        width:100%;
        max-width:500px;
        margin:4vw auto 12vw;
    }
    .flex-design3 .port-wrapper .contents4 {
        width:100%;
        height:calc(500px / 140 * 100);
    }
    .small-title {
        font-size:24px;
        line-height: 2rem;
        margin:2vw 0 4vw 0;
    }

    .skill-wrapper {
        width:45%!important;
    }
    .wide-view-menu {
        display:none;
    }
    .humburger-menu {
        display:block;
    }
    .works-wrapper,.portfolio-wrapper {
        position:relative;
        height:auto;
    }
    .space-5vh {
        width:100%;
        height:5vh;
    }
}


@media screen and (max-width:600px) {
    .skill-wrapper {
        width: 100%!important;
    }
}

@media screen and (max-width:530px) {
    .flex-design2 .port-wrapper .contents4 {
        height:calc(94vw / 140 * 100);
    }
    .flex-design3 .port-wrapper .contents4 {
        height:calc(94vw / 140 * 100);
    }
    .small-title {
        font-size:calc(100vw / 22);
    }

    .commentary-wrapper {
        width: 80%!important;
    }
    .workflow-wrapper {
        width: 80%!important;
    }
    .check-point-wrapper {
        right: 3vw!important;
    }
    .check-point {
        width:13px!important;
        height:13px!important;
    }
    .check-point+.check-point {
        margin:10px 0!important;
    }
}