/* パソコン */
@media (1200px < width) {
    .menu_design {
        width: 100%;
        overflow: hidden;
        margin: 0;
        display: grid;
        grid-template:
            " ...... ...... ...... ...... ...... ......" 150px
            " ...... me_im1 me_im1 ...... ...... ......" auto
            " ...... me_im1 me_im1 ...... me_cat ......" auto
            " ...... me_im1 me_im1 ...... ...... ......" auto
            " ...... me_im1 me_im1 ...... me_btn ......" auto
            " ...... me_im1 me_im1 ...... ...... ......" auto
            " ...... ...... ...... ...... ...... ......" 150px
            / 0.1fr 1fr 1fr 0.1fr 1fr 0.3fr;
    }
}

/* タブレット */
@media (768px <=width <=1200px) {
    .menu_design {
        width: 100%;
        overflow: hidden;
        margin: 0;
        display: grid;
        grid-template:
            " ...... ...... ...... ...... ...... ......" 150px
            " ...... me_im1 me_im1 ...... ...... ......" auto
            " ...... me_im1 me_im1 ...... me_cat ......" auto
            " ...... me_im1 me_im1 ...... ...... ......" auto
            " ...... me_im1 me_im1 ...... me_btn ......" auto
            " ...... me_im1 me_im1 ...... ...... ......" auto
            " ...... ...... ...... ...... ...... ......" 150px
            / 0.1fr 1fr 1fr 0.1fr 1fr 0.3fr;
    }
}

/* スマホ */
@media (width < 768px) {
    .menu_design {
        width: 100%;
        overflow: hidden;
        margin: 0;
        display: grid;
        grid-template:
            " ...... ...... ...... ...... ...... ......" 150px
            " ...... me_im1 me_im1 me_im1 me_im1 ......" auto
            " ...... ...... ...... ...... ...... ......" 30px
            " ...... me_cat me_cat me_cat me_cat ......" auto
            " ...... ...... ...... ...... ...... ......" 30px
            " ...... me_btn me_btn me_btn me_btn ......" auto
            " ...... ...... ...... ...... ...... ......" auto
            " ...... ...... ...... ...... ...... ......" 100px
            / 0.1fr 1fr 1fr 1fr 1fr 0.1fr;
    }
}







.menu_catchphrase {
    grid-area: me_cat;
    text-align: center;
}

.menu_button {
    grid-area: me_btn;
    text-align: center;
}



.menu_img_1 {
    grid-area: me_im1;
    filter: var(--shadow-data);
    width: 100%;
    overflow: hidden;
    margin: 0;
    display: grid;
    grid-template:
        " ...... m_img0 m_img2 ...... " auto
        " ...... m_img3 m_img1 ...... " auto
        / 0.5fr 1fr 1fr 0.5fr;
}


.menu_get_img_0 {
    grid-area: m_img0;
    border-radius: 30px 0 0 0 ;
}

.menu_get_img_1 {
    grid-area: m_img1;
    border-radius: 0 0 30px 0 ;
}

.menu_get_img_2 {
    grid-area: m_img2;
    border-radius: 0 30px 0 0 ;
}

.menu_get_img_3 {
    grid-area: m_img3;
    border-radius: 0 0 0 30px;
}

.menu_get_img_0,
.menu_get_img_1,
.menu_get_img_2,
.menu_get_img_3 {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}










/* ボタン */




/* パソコン */
@media (1200px < width) {
    .menu_button a {
        cursor: pointer;
        font-weight: 700;
        transition: all 0.2s;
        padding: 30px 90px;
        border-radius: 100px;
        background: var(--main-color2);
        border: 1px solid transparent;
        display: flex;
        align-items: center;
        font-size: clamp(16px, 1.5vw, 2vw);
    }
}

/* タブレット */
@media (768px <=width <=1200px) {
    .menu_button a {
        cursor: pointer;
        font-weight: 700;
        transition: all 0.2s;
        padding: 20px 35px;
        border-radius: 100px;
        background: var(--main-color2);
        border: 1px solid transparent;
        display: flex;
        align-items: center;
        font-size: clamp(16px, 1.5vw, 2vw);
    }
}

/* スマホ */
@media (width < 768px) {
    .menu_button a {
        cursor: pointer;
        font-weight: 700;
        transition: all 0.2s;
        padding: 20px 30px;
        border-radius: 100px;
        background: var(--main-color2);
        border: 1px solid transparent;
        display: flex;
        align-items: center;
        font-size: clamp(16px, 1.5vw, 2vw);
    }
}



.menu_button {
    filter: drop-shadow(1.5px 3px 2.5px #1C1C1C);
    display: flex;
    /* Flexbox for alignment */
    justify-content: center;
    /* Centers horizontally */
    align-items: center;
    /* Centers vertically */
}



.menu_button a:hover {
    background: var(--main-color2);
}

.menu_button a>svg {
    width: 34px;
    margin-left: 10px;
    transition: transform 0.3s ease-in-out;
}

.menu_button a:hover svg {
    transform: translateX(5px);
}

.menu_button a:active {
    transform: scale(0.95);
}

/* ボタン */