@media (max-width: 768px) {
    body {
        padding-top: 57px;
        padding-bottom: 60px;
    }

    h2 {
        margin-top: 80px;
        margin-bottom: 20px;
    }

    h3 {
        margin-top: 10px;
        margin-left: 10px;
    }

    .carousel img {
        max-width: 100%;
        height: auto;
        margin: 0 auto;
    }

    .codecamp {
        margin-bottom: 40px;
    }

    .SNS {
        margin-bottom: 40px;
    }

    #Sample {
        margin-top: -250px;
        padding-top: 250px;
    }

    #About {
        margin-top: -250px;
        padding-top: 250px;
    }

    #CadeCamp {
        margin-top: -250px;
        padding-top: 250px;
    }

    .slick-prev {
        position: absolute;
        /* 絶対配置 */
        left: 50px;
        z-index: 100;
    }

    .slick-next {
        position: absolute;
        /* 絶対配置 */
        right: 50px;
        cursor: pointer;
        z-index: 100;
    }
}


@media(min-width: 767px) {
    body {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    header li {
        border-left: solid 1px gray;
    }

    header li:first-child {
        border-left: none;
    }

    .carousel img {
        max-width: 100%;
        height: auto;
        margin: 0 auto;
    }

    .codecamp {
        margin-bottom: 40px;
    }

    #Sample {
        margin-top: -100px;
        padding-top: 100px;
    }

    #About {
        margin-top: -100px;
        padding-top: 100px;
    }

    #CadeCamp {
        margin-top: -100px;
        padding-top: 100px;
    }
}

body {
    /*min-width: 576px;*/
    background-color: #F2F2F2;
  font-family: 'YuMincho', 'Yu Mincho','MS PMincho', serif;
}


header ul {
    margin-left: auto;
    margin-right: auto;
    padding: 10px 0;
}

.codecamp img {
    border: 1px solid black;
}

.SNS img {
    border: 1px solid black;
}

.nav-link {
    display: block;
    padding: 0rem 1rem
}

/*カルーセル*/
.carousel {
    width: 100%;
    margin: 10px auto;
}

.carousel .slick-slide {
    margin: 0 10px;
}

.slick-prev:before,
.slick-next:before {
    color: black;
    cursor: pointer;
    outline: none;
}

/*モーダル*/
#modal_01 {
    display: none;
}

#modal_02 {
    display: none;
}

.modaal-inner-wrapper {
    padding: 100px;
}

.modaal-content-container {
    margin: 0 auto;
    width: 100%;
}

.modaal-content-container img {
    width: 100%;
}

section {
    margin-bottom: 80px;
}