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

    .conceptflex {
        display: flex;
        padding-top: 100px;
        padding-bottom: 50px;
        align-items: center;
        column-gap: 50px;

    }


    .conceptflex .box {
        width: 600px;
    }


    .background {
        background-image: url(../img/back.jpg);
        background-repeat: repeat;
        background-position: center;
        padding-top: 20px;
        padding-bottom: 20px;
    }


    .conceptflex h1 {
        font-size: 30px;
        font-weight: bold;

    }

    .conceptflex h1 {
        font-size: 38px;
        font-weight: bold;
        text-align: center;
        position: relative;
        /* 擬似要素を位置指定するために必要 */
        padding: 0 65px;
    }

    .conceptflex h1:before {
        position: absolute;
        top: calc(50% - 1px);
        /* 横線を文字の中央に配置 */
        left: 0;
        width: 100%;
        height: 1px;
        /* 横線の太さ */
        content: '';
        background: #000;
        /* 横線の色 */
        z-index: 0;
        /* 横線を背景に配置 */
    }

    .conceptflex h1 span {
        position: relative;
        z-index: 1;
        /* テキストを横線の上に配置 */
        padding: 0 1em;
        /* テキスト周りの余白 */
        background: #f7f7f7;
        /* テキスト背景の色 */
    }

    .conceptflex h2 {
        font-size: 28px;
        line-height: 1.8;
        padding-bottom: 20px;
    }

    .conceptflex h3 {
        font-size: 18px;
        line-height: 2.2;

    }

    .conceptflex h6 {
        text-align: left;
        font-size: 12px;
        font-weight: bold;
    }

    .fv img {
        width: 100%;
    }

    .width {
        max-width: 1200px;
        margin: auto;
    }

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

    .Designimg h1 {
        font-size: 38px;
        font-weight: bold;
        padding-bottom: 10px;

        text-align: center;
        position: relative;
        /* 擬似要素を位置指定するために必要 */
        margin: auto;
        width: 800px;
    }

    .Designimg h1:before {
        position: absolute;
        top: calc(50% - 1px);
        /* 横線を文字の中央に配置 */
        left: 0;
        width: 100%;
        height: 1px;
        /* 横線の太さ */
        content: '';
        background: #000;
        /* 横線の色 */
        z-index: 0;
        /* 横線を背景に配置 */

    }

    .Designimg h1 span {
        position: relative;
        z-index: 1;
        /* テキストを横線の上に配置 */
        padding: 0 1em;
        /* テキスト周りの余白 */
        background: #f7f7f7;
        /* テキスト背景の色 */
        width: 800px;

    }


    .Designimg h2 {
        margin: auto;
        width: 800px;
        text-align: left;
        font-size: 20px;
    }

    /*==================================================
スライダーのためのcss
===================================*/
    .slider {
        /*横幅94%で左右に余白を持たせて中央寄せ*/
        width: 94%;
        margin: 0 auto;
    }

    .slider img {
        width: 60vw;
        /*スライダー内の画像を60vwにしてレスポンシブ化*/
        height: auto;
    }

    .slider .slick-slide {
        transform: scale(0.8);
        /*左右の画像のサイズを80%に*/
        transition: all .5s;
        /*拡大や透過のアニメーションを0.5秒で行う*/
        opacity: 0.5;
        /*透過50%*/
    }

    .slider .slick-slide.slick-center {
        transform: scale(1);
        /*中央の画像のサイズだけ等倍に*/
        opacity: 1;
        /*透過なし*/
    }


    /*矢印の設定*/

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

    .slick-prev {
        /*戻る矢印の位置と形状*/
        left: 12%;
    }

    .slick-next {
        /*次へ矢印の位置と形状*/
        right: 12%;
    }

    /* ドットボタンのスタイル */
    .slick-dots {
        text-align: center;
        margin: 20px 0;
    }

    .slick-dots li {
        display: inline-block;
        margin: 0 8px;
    }

    .slick-dots button {
        color: transparent;
        outline: none;
        width: 15px;
        /* ドットのサイズを大きくする */
        height: 15px;
        /* ドットのサイズを大きくする */
        display: block;
        border: 1px solid #555;
        /* ボーダーの幅と色を調整 */
        border-radius: 50%;
        /* 円形に設定 */
        background: transparent;
        transition: background 0.3s, border-color 0.3s;
        /* アニメーションを追加 */
    }

    .slick-dots button:hover {
        border-color: #777;
        /* ホバー時のボーダー色を変更 */
    }

    .slick-dots .slick-active button {
        background: #555;
        /* アクティブなドットの背景色を変更 */
        border-color: #555;
        /* アクティブなドットのボーダー色を変更 */
    }

    .slick-prev,
    .slick-next {
        position: absolute;
        top: 42%;
        cursor: pointer;
        outline: none;
        z-index: 999;
        height: 120px;
        width: 50px;
        background-color: black;
    }

    .slick-prev::before {
        content: "";
        display: block;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-right: 10px solid white;
        position: absolute;
        top: 42%;
        left: 50%;

    }

    .slick-next::before {
        content: "";
        display: block;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-left: 10px solid white;
        position: absolute;
        top: 42%;
        left: 50%;

    }

    .slider-container {
        position: relative;
        max-width: 1200px;
        margin: auto;
        overflow: hidden;
    }

    /* .midashiflex {
    display: flex;
    gap: 60px;
    justify-content: center;
    align-items: center;
    padding: 60px;
    transition: transform 0.5s ease;
  } */

    .slide-btn {
        position: absolute;
        top: 44%;
        transform: translateY(-50%);
        z-index: 10;
        background-color: #000;
        /* 黒色の背景 */
        color: #fff;
        /* 白色のテキスト */
        border: none;
        padding: 50px 25px;
        cursor: pointer;
    }

    .left-btn {
        left: 0;
    }

    .right-btn {
        right: 0;
    }


    /* 非表示時 */
    .slide-hidden {
        visibility: hidden;
        opacity: 0;
        height: 0;
        overflow: hidden;
    }

    /* 表示時 */
    .slide-visible {
        visibility: visible;
        opacity: 1;
        height: auto;
        /* 必要に応じて調整 */
    }




    .conceptflex2 {
        display: flex;
        align-items: center;
    }

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

    .center h1 {
        margin: auto;
        font-size: 32px;
    }

    .center h2 {
        width: 40%;
        margin: auto;
        font-size: 16px;

    }

    .flex {
        display: flex;
        column-gap: 50px;
    }

    .flex img {
        max-width: 750px;
    }

    .flex h1 {
        padding-top: 62px;
        font-size: 24px;
    }


    .flex h2 {
        padding-top: 62px;
        padding-top: 30px;
        font-size: 16px;
        height: 180px;
        line-height: 2.4;
    }

    .flex2 {
        display: flex;
        justify-content: space-between;
        padding-bottom: 100px;
    }

    .flex2 img {
        max-width: 300px;
        padding-top: 28px;
    }

    .flex2>div {
        width: 300px;
        /* 各要素の幅を300pxに指定 */
    }

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

    .flex2 h2 {
        padding-bottom: 10px;
        font-size: 16px;
        height: 140px;
    }



    .text-content .image-content {
        display: flex;
    }

    .grid-container {
        display: grid;
        grid-template-columns: 170px 170px 170px 170px;
        grid-template-rows: 50px 50px;
        grid-auto-columns: 1fr;
        grid-auto-rows: 1fr;
        gap: 10px 23px;
        grid-auto-flow: row;
        grid-template-areas:
            "color1 color2 color3 color4"
            "color5 color6 color7 color8";
        width: 750px;
        height: 225px;
    }

    .grid-container img {
        width: 170px;
    }

    .color1 {
        grid-area: color1;
    }

    .color2 {
        grid-area: color2;
    }

    .color3 {
        grid-area: color3;
    }

    .color4 {
        grid-area: color4;
    }

    .color5 {
        grid-area: color5;
    }

    .color6 {
        grid-area: color6;
    }

    .color7 {
        grid-area: color7;
    }

    .color8 {
        grid-area: color8;
    }

    .grid-container2 {
        display: grid;
        grid-template-columns: 170px 170px 170px 170px;
        grid-template-rows: 50px 50px;
        grid-auto-columns: 1fr;
        grid-auto-rows: 1fr;
        gap: 23px 23px;
        grid-auto-flow: row;
        grid-template-areas:
            "color1 color2 color3 color4"
            "color5 color6 color7 color8";
        width: 750px;
        height: 225px;
    }

    .grid-container2 img {
        width: 170px;
    }

    .color1 {
        grid-area: color1;
    }

    .color2 {
        grid-area: color2;
    }

    .color3 {
        grid-area: color3;
    }

    .color4 {
        grid-area: color4;
    }

    .color5 {
        grid-area: color5;
    }

    .color6 {
        grid-area: color6;
    }

    .color7 {
        grid-area: color7;
    }

    .color8 {
        grid-area: color8;
    }

    .ctabutton {
        position: fixed;
        /* 画面に固定 */
        right: 10px;
        /* 右からの距離を設定 */
        bottom: 10px;
        /* 下からの距離を設定 */
        display: flex;
        flex-direction: column;
        /* 要素を縦に並べる */
        gap: 5px;
        /* 画像の間にスペースを追加 */
        z-index: 800;
    }

    .ctabutton img {
        max-width: 240px;
        /* 画像の幅を固定（必要に応じて調整） */
        height: auto;
        cursor: pointer;
        /* クリック可能なことを示すカーソル */
        z-index: 800;
    }

}