/* パソコン */
@media (1200px < width) {
    .footer_grid {
        grid-area: f_grid;
        border-radius: 0 30px 0 0;
        display: grid;
        grid-template:
            "...... fo_sns fo_sns ...... ......" auto
            "...... ...... ...... ...... ......" 100px
            "...... fo_map fo_map fo_map ......" 300px
            "...... ...... ...... ...... ......" 100px
            "...... fo_inf fo_inf fo_inf ......" auto
            "...... ...... ...... ...... ......" 100px
            / 0.1fr 1fr 0.1fr 1fr 0.1fr;
    }
}

/* タブレット */
@media (768px <=width <=1200px) {
    .footer_grid {
        grid-area: f_grid;
        border-radius: 0 30px 0 0;
        display: grid;
        grid-template:
            "...... fo_sns fo_sns fo_sns ......" auto
            "...... ...... ...... ...... ......" 100px
            "...... fo_map fo_map fo_map ......" 300px
            "...... ...... ...... ...... ......" 100px
            "...... fo_inf fo_inf fo_inf ......" auto
            "...... ...... ...... ...... ......" 100px
            / 0.1fr 1fr 0.1fr 1fr 0.1fr;
    }
}

/* スマホ */
@media (width < 768px) {
    .footer_grid {
        grid-area: f_grid;
        border-radius: 0 30px 0 0;
        display: grid;
        grid-template:
            "...... fo_sns fo_sns fo_sns ......" auto
            "...... ...... ...... ...... ......" 50px
            "...... fo_map fo_map fo_map ......" 300px
            "...... ...... ...... ...... ......" 20px
            "...... fo_inf fo_inf fo_inf ......" auto
            "...... ...... ...... ...... ......" 100px
            / 0.1fr 1fr 0.1fr 1fr 0.1fr;
    }
}







.d15bb675-b917-4cd4-9fb0-b4ad586bed3c {
    display: grid;
    background-color: var(--main-color2);
    grid-template:
        "...... ...... ...... ......" 100px
        "...... f_grid f_grid ...... " auto
        "...... f_grid f_grid ...... " auto
        / 0.1fr 1fr 1fr 0.1fr;
}






.googlemap {
    grid-area: fo_map;
    
}



/* パソコン */
@media (1200px < width) {
    .footer_info {
        display: grid;
        grid-area: fo_inf;
        grid-template:
            " ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ......" 10px
            " ...... f_titl kaa888 kaa888 kaa888 kaa888 kaa888 kaa888 kaa888 kaa888 kaa888" auto
            " ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ......" 30px
            " ...... ...... fo_add fo_add ...... fo_tel fo_tel ...... fo_mai fo_mai ......" auto
            " ...... ...... la2ed6 la2ed6 la2ed6 la2ed6 la2ed6 la2ed6 la2ed6 la2ed6 ......" 1px
            " ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ......" 100px
            " ...... ...... fo_bus fo_bus ...... fo_tim fo_tim ...... fo_clo fo_clo ......" auto
            " ...... ...... b8cd54 b8cd54 b8cd54 b8cd54 b8cd54 b8cd54 b8cd54 b8cd54 ......" 1px
            " ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ......" 100px
            " ...... ...... fo_par fo_par ...... fo_cre fo_cre ...... fo_pay fo_pay ......" auto
            " ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ......" 10px
            / 0.1fr 1fr 1fr 1fr 0.1fr 1fr 1fr 0.1fr 1fr 1fr 0.1fr;
    }
    .footer_sns {
        grid-area: fo_sns;
        display: grid;
        grid-template:
            "...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ......" 10px
            "...... f_sn_t ...... b94c0b b94c0b b94c0b b94c0b b94c0b b94c0b b94c0b b94c0b b94c0b b94c0b b94c0b b94c0b" auto
            "...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ......" 10px
            "...... ...... ...... fo_s_1 ...... fo_s_2 ...... fo_s_3 ...... fo_s_4 ...... fo_s_5 ...... fo_s_6 ......" auto
            "...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ......" 10px
            / 0.1fr 1fr 0.2fr 1fr 0.1fr 1fr 0.1fr 1fr 0.1fr 1fr 0.1fr 1fr 0.1fr 1fr  0.1fr;
    }
}

/* タブレット */
@media (768px <=width <=1200px) {
    .footer_info {
        display: grid;
        grid-area: fo_inf;
        grid-template:
            " ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ......" 10px
            " ...... f_titl kaa888 kaa888 kaa888 kaa888 kaa888 kaa888 kaa888 kaa888 kaa888" auto
            " ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ......" 30px
            " ...... ...... fo_add fo_add ...... fo_tel fo_tel ...... fo_mai fo_mai ......" auto
            " ...... ...... la2ed6 la2ed6 la2ed6 la2ed6 la2ed6 la2ed6 la2ed6 la2ed6 ......" 1px
            " ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ......" 100px
            " ...... ...... fo_bus fo_bus ...... fo_tim fo_tim ...... fo_clo fo_clo ......" auto
            " ...... ...... b8cd54 b8cd54 b8cd54 b8cd54 b8cd54 b8cd54 b8cd54 b8cd54 ......" 1px
            " ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ......" 100px
            " ...... ...... fo_par fo_par ...... fo_cre fo_cre ...... fo_pay fo_pay ......" auto
            " ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ......" 10px
            / 0.1fr 1fr 1fr 1fr 0.1fr 1fr 1fr 0.1fr 1fr 1fr 0.1fr;
    }
    .footer_sns {
        grid-area: fo_sns;
        display: grid;
        grid-template:
            "...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ......" 10px
            "...... f_sn_t ...... b94c0b b94c0b b94c0b b94c0b b94c0b b94c0b b94c0b b94c0b b94c0b b94c0b b94c0b b94c0b" auto
            "...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ......" 10px
            "...... ...... ...... fo_s_1 ...... fo_s_2 ...... fo_s_3 ...... fo_s_4 ...... fo_s_5 ...... fo_s_6 ......" auto
            "...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ......" 10px
            / 0.1fr 1fr 0.2fr 1fr 0.1fr 1fr 0.1fr 1fr 0.1fr 1fr 0.1fr 1fr 0.1fr 1fr  0.1fr;
    }
}

/* スマホ */
@media (width < 768px) {
    .footer_info {
        display: grid;
        grid-area: fo_inf;
        grid-template:
            " ...... ...... ...... ......" 10px
            " ...... f_titl kaa888 ......" auto
            " ...... ...... ...... ......" 30px
            " ...... fo_add fo_add ......" auto
            " ...... fo_tel fo_tel ......" auto
            " ...... fo_mai fo_mai ......" auto
            " ...... la2ed6 la2ed6 ......" 1px
            " ...... ...... ...... ......" 20px
            " ...... fo_bus fo_bus ......" auto
            " ...... fo_tim fo_tim ......" auto
            " ...... fo_clo fo_clo ......" auto
            " ...... b8cd54 b8cd54 ......" 1px
            " ...... ...... ...... ......" 20px
            " ...... fo_par fo_par ......" auto
            " ...... fo_cre fo_cre ......" auto
            " ...... fo_pay fo_pay ......" auto
            " ...... ...... ...... ......" 10px
            / 0.1fr 1fr 1fr 0.1fr;
    }
    .footer_sns {
        grid-area: fo_sns;
        display: grid;
        grid-template:
            "...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ......" 10px
            "...... f_sn_t b94c0b b94c0b b94c0b b94c0b b94c0b b94c0b b94c0b b94c0b b94c0b b94c0b b94c0b" auto
            "...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ......" 10px
            "...... fo_s_1 ...... fo_s_2 ...... fo_s_3 ...... fo_s_4 ...... fo_s_5 ...... fo_s_6 ......" auto
            "...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ...... ......" 10px
            / 0.1fr  1fr 0.1fr 1fr 0.1fr 1fr 0.1fr 1fr 0.1fr 1fr 0.1fr 1fr  0.1fr;
    }
}









.kaa88843-3d77-4660-baf3-fba6dc1fca6d {
    grid-area: kaa888;
    background-color: rgb(235, 235, 235);
    height: 1px;
    margin: 15px 0 0 0;
}

.la2ed6f3-c9d0-4a39-9113-b0f5c2434d61 {
    grid-area: la2ed6;
    background-color: rgb(235, 235, 235);
    height: 1px;
    margin: 15px 0 0 0;
}

.b8cd5405-162a-4c3a-9056-6c83d4c56d54 {
    grid-area: b8cd54;
    background-color: rgb(235, 235, 235);
    height: 1px;
    margin: 15px 0 0 0;
}


.footer_info_title {
    grid-area: f_titl;
}

.footer_address {
    grid-area: fo_add;
}

.footer_business {
    grid-area: fo_bus;
}

.footer_time {
    grid-area: fo_tim;
}

.footer_closed {
    grid-area: fo_clo;
}

.footer_tel {
    grid-area: fo_tel;
}

.footer_parking {
    grid-area: fo_par;
}

.footer_credit {
    grid-area: fo_cre;
}

.footer_pay {
    grid-area: fo_pay;
}
.footer_mail {
    grid-area: fo_mai;
    overflow-wrap: anywhere;
}



.footer_list {
    display: grid;
    grid-template:
        "....... ....... ......." 5px
        "....... inf_tit ......." auto
        "....... ....... ......." 5px
        "....... inf_dat ......." auto
        "....... ....... ......." 5px
        / 0fr 1fr  0fr;
}

.info_title {
    grid-area: inf_tit;
    font-weight: bold;
}

.info_data {
    grid-area: inf_dat;
}







.b94c0bb1-73c3-4820-869f-22f0c4fd8fd1 {
    grid-area: b94c0b;
    background-color: rgb(235, 235, 235);
    height: 1px;
    margin: 15px 0 0 0 ;
}



.footer_sns_title {
    grid-area: f_sn_t;
}

.footer_sns_1 {
    grid-area: fo_s_1;
}

.footer_sns_2 {
    grid-area: fo_s_2;
}

.footer_sns_3 {
    grid-area: fo_s_3;
}

.footer_sns_4 {
    grid-area: fo_s_4;
}

.footer_sns_5 {
    grid-area: fo_s_5;
}

.footer_sns_6 {
    grid-area: fo_s_6;
}

.footer_sns_icon {
    font-size: 35px;
}



