/* パソコン */
@media (1200px < width) {
    .menu_design {
        width: 100%;
        overflow: hidden;
        background-color: var(--main-color2);
        margin: 0;
        display: grid;
        grid-template:
            "...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ......" 150px
            "...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ......" auto
            "...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ......" auto
            "...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ......" auto
            "...... ...... ...... ...... m_img0 ...... ...... ...... ...... ...... ......" auto
            "...... ...... ...... ...... m_img0 ...... ...... ...... ...... ...... ......" auto
            "...... m_img5 ...... ...... m_img0 ...... ...... ...... m_img1 ...... ......" auto
            "...... m_img5 ...... ...... m_img0 ...... ...... ...... m_img1 ...... ......" auto
            "...... m_img5 ...... ...... ...... ...... ...... ...... m_img1 ...... ......" auto
            "...... m_img5 ...... me_cat me_cat me_cat me_cat me_cat m_img1 ...... ......" auto
            "...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ......" 50px
            "...... ...... ...... me_btn me_btn me_btn me_btn me_btn ...... ...... ......" auto
            "...... ...... m_img4 ...... ...... ...... ...... ...... ...... m_img2 ......" auto
            "...... ...... m_img4 ...... ...... ...... m_img3 ...... ...... m_img2 ......" auto
            "...... ...... m_img4 ...... ...... ...... m_img3 ...... ...... m_img2 ......" auto
            "...... ...... m_img4 ...... ...... ...... m_img3 ...... ...... m_img2 ......" auto
            "...... ...... ...... ...... ...... ...... m_img3 ...... ...... ...... ......" auto
            "...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ......" auto
            "...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ......" auto
            "...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ......" 150px
            / 0.1fr 1.5fr 1.5fr 1fr 1.5fr 1fr 1.5fr 1fr 1.5fr 1.5fr 0.1fr;
    }
}

/* タブレット */
@media (768px <=width <=1200px) {
    .menu_design {
        width: 100%;
        overflow: hidden;
        background-color: var(--main-color2);
        margin: 0;
        display: grid;
        grid-template:
            "...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ......" 150px
            "...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ......" auto
            "...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ......" auto
            "...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ......" auto
            "...... ...... ...... ...... m_img0 ...... ...... ...... ...... ...... ......" auto
            "...... ...... ...... ...... m_img0 ...... ...... ...... ...... ...... ......" auto
            "...... m_img5 ...... ...... m_img0 ...... ...... ...... m_img1 ...... ......" auto
            "...... m_img5 ...... ...... m_img0 ...... ...... ...... m_img1 ...... ......" auto
            "...... m_img5 ...... ...... ...... ...... ...... ...... m_img1 ...... ......" auto
            "...... m_img5 ...... me_cat me_cat me_cat me_cat me_cat m_img1 ...... ......" auto
            "...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ......" 50px
            "...... ...... ...... me_btn me_btn me_btn me_btn me_btn ...... ...... ......" auto
            "...... ...... m_img4 ...... ...... ...... ...... ...... ...... m_img2 ......" auto
            "...... ...... m_img4 ...... ...... ...... m_img3 ...... ...... m_img2 ......" auto
            "...... ...... m_img4 ...... ...... ...... m_img3 ...... ...... m_img2 ......" auto
            "...... ...... m_img4 ...... ...... ...... m_img3 ...... ...... m_img2 ......" auto
            "...... ...... ...... ...... ...... ...... m_img3 ...... ...... ...... ......" auto
            "...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ......" auto
            "...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ......" auto
            "...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ......" 150px
            / 0.1fr 1.5fr 1.5fr 1fr 1.5fr 1fr 1.5fr 1fr 1.5fr 1.5fr 0.1fr;
    }
}

/* スマホ */
@media (width < 768px) {
    .menu_design {
        width: 100%;
        overflow: hidden;
        background-color: var(--main-color2);
        margin: 0;
        display: grid;
        grid-template:
            "...... ...... ...... ...... ...... ...... ......" 150px
            "...... ...... ...... ...... ...... ...... ......" auto
            "...... me_cat me_cat me_cat me_cat me_cat ......" auto
            "...... ...... ...... ...... ...... ...... ......" 50px
            "...... me_btn me_btn me_btn me_btn me_btn ......" auto
            "...... ...... ...... ...... ...... ...... ......" 50px
            "...... ...... m_img0 ...... ...... ...... ......" auto
            "...... ...... m_img0 ...... m_img1 ...... ......" auto
            "...... ...... m_img0 ...... m_img1 ...... ......" auto
            "...... ...... m_img0 ...... m_img1 ...... ......" auto
            "...... ...... m_img0 ...... m_img1 ...... ......" auto
            "...... ...... ...... ...... m_img1 ...... ......" 20px
            "...... ...... ...... ...... ...... ...... ......" 20px
            "...... ...... ...... ...... m_img3 ...... ......" auto
            "...... ...... m_img2 ...... m_img3 ...... ......" auto
            "...... ...... m_img2 ...... m_img3 ...... ......" auto
            "...... ...... m_img2 ...... m_img3 ...... ......" auto
            "...... ...... m_img2 ...... m_img3 ...... ......" auto
            "...... ...... m_img2 ...... ...... ...... ......" 20px
            "...... ...... ...... ...... m_img5 ...... ......" 20px
            "...... ...... m_img4 ...... m_img5 ...... ......" auto
            "...... ...... m_img4 ...... m_img5 ...... ......" auto
            "...... ...... m_img4 ...... m_img5 ...... ......" auto
            "...... ...... m_img4 ...... m_img5 ...... ......" auto
            "...... ...... m_img4 ...... ...... ...... ......" 20px
            "...... ...... ...... ...... ...... ...... ......" 150px
            / 0.1fr 0.1fr 1.5fr 0.1fr 1.5fr 0.1fr 0.1fr;
    }
}











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

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








.menu_get_img_0 {
    grid-area: m_img0;
    position: relative;
}



.menu_get_img_1 {
    grid-area: m_img1;
    position: relative;
}



.menu_get_img_2 {
    grid-area: m_img2;
    position: relative;
}



.menu_get_img_3 {
    grid-area: m_img3;
    position: relative;
}




.menu_get_img_4 {
    grid-area: m_img4;
    position: relative;
}



.menu_get_img_5 {
    grid-area: m_img5;
    position: relative;
}












/* パソコン */
@media (1200px < width) {

    .menu_get_img_0 img,
    .menu_get_img_1 img,
    .menu_get_img_2 img,
    .menu_get_img_3 img,
    .menu_get_img_4 img,
    .menu_get_img_5 img {
        filter: var(--shadow-data);
        aspect-ratio: 9 / 16;
        width: 150%;
        object-fit: cover;
        border-radius: 20px;
    }
}

/* タブレット */
@media (768px <=width <=1200px) {

    .menu_get_img_0 img,
    .menu_get_img_1 img,
    .menu_get_img_2 img,
    .menu_get_img_3 img,
    .menu_get_img_4 img,
    .menu_get_img_5 img {
        filter: var(--shadow-data);
        aspect-ratio: 9 / 16;
        width: 150%;
        object-fit: cover;
        border-radius: 20px;
    }
}

/* スマホ */
@media (width < 768px) {

    .menu_get_img_0 img,
    .menu_get_img_1 img,
    .menu_get_img_2 img,
    .menu_get_img_3 img,
    .menu_get_img_4 img,
    .menu_get_img_5 img {
        filter: var(--shadow-data);
        aspect-ratio: 1 / 1;
        width: 100%;
        object-fit: cover;
        border-radius: 20px;
    }
}





/* ボタン */

/* パソコン */
@media (1200px < width) {
    .menu_button a {
        cursor: pointer;
        font-weight: 700;
        transition: all 0.2s;
        padding: 30px 90px;
        border-radius: 100px;
        background-color: #FFFFFB;
        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-color: #FFFFFB;
        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-color: #FFFFFB;
        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-color: #FFFFFB;
}

.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);
}

/* ボタン */