@media screen and (max-width: 1200px) {
    br {
        display: none;
    }

    h1 {
        font-size: 24px;
        font-weight: bold;
        width: 90%;
        margin: auto;
        padding-bottom: 4px;
    }

    h2 {
        font-size: 16px;
        width: 90%;
        margin: auto;
        margin-bottom: 10px;
    }

    h3 {
        font-size: 12px;
        width: 90%;
        margin: auto;
        padding-bottom: 10px;
    }

    .width {
        margin: auto;
    }

    .conceptflex2 {
        display: flex;
        align-items: center;
        margin: auto;
        justify-content: center;
    }

    .center {
        text-align: center;
        padding-top: 20px;
        padding-bottom: 20px;
        background-color: #F4F4F4;
    }

    .center h2 {
        text-align: left;
    }

    .marginauto {
        margin: auto;
        text-align: center;
    }

    .flex {
        display: flex;
        flex-direction: column;
    }

    .flex img {
        width: 100%;
        text-align: center;
    }

    .flex h1 {
        padding-top: 10px;
    }

    .flex h2 {
        padding-top: 10px;
        
    }

    .text-content {
        order: 2;
        /* 文字を後に表示 */
    }

    .image-content {
        order: 1;
        /* 画像を先に表示 */
    }

    .flex2 {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .flex2 img {
        width: 100%;
    }

    .flex2 h1 {
        padding-bottom: 10px;
    }

    .flex .reverse {
        flex-direction: row-reverse;
    }
}

/* gridcontainer+slider */

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

    .grid-container {
        display: none;
    }

    .grid-container2 {
        display: none;
    }

    .slider {
        /*横幅94%で左右に余白を持たせて中央寄せ*/
        width: 94%;
        margin: 0 auto;
        padding-bottom: 20px;
    }

    .slider img {
        width: 100%;
        /*スライダー内の画像を横幅100%に*/
        height: auto;
    }

    /*slickのJSで書かれるタグ内、スライド左右の余白調整*/

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

    /*矢印の設定*/

    /*戻る、次へ矢印の位置*/
    .slick-prev,
    .slick-next {
        position: absolute;
        /*絶対配置にする*/
        top: 28%;
        cursor: pointer;
        /*マウスカーソルを指マークに*/
        outline: none;
        /*クリックをしたら出てくる枠線を消す*/
        border-top: 2px solid #666;
        /*矢印の色*/
        border-right: 2px solid #666;
        /*矢印の色*/
        height: 15px;
        width: 15px;
    }

    .slick-prev {
        /*戻る矢印の位置と形状*/
        left: -1.5%;
        transform: rotate(-135deg);
    }

    .slick-next {
        /*次へ矢印の位置と形状*/
        right: -1.5%;
        transform: rotate(45deg);
    }

    .slick-dots .slick-active button {
        background: white;
        color: white
    }

    li {
        display: none;
    }

}