@font-face {
    font-family: "NotoSerifJP";
    src: url("../font/NotoSerifJP-VariableFont_wght.ttf") format("truetype");
}

/*-------------------- 共有部品↓ --------------------*/

/*---------- ページトップボタン↓ ----------*/
.page_top_button{
    display: flex;
    align-items: flex-end;
    z-index: 9999;
}

.page_top_button>p{
    font-size: 8px;
    font-family: "aileron", sans-serif;
    font-weight: bold;
    font-style: italic;
    letter-spacing: 0;
    color: #000;
}

.page_top_arrow{
    position: relative;
    width: 47px;
    height: 47px;
    font-size: 30px;
    border-radius: 50%;
    color: #FFF;
    background-color: #000;
}

.page_top_arrow p{
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    font-size: 12px;
    font-weight: 700;
}
/*---------- ページトップボタン↑ ----------*/

/*-------------------- 共有部品↑ --------------------*/

/*-------------------- フッター↓ --------------------*/
footer{
    position: relative;
    color: #3E3A39;
    background-color: #FFF;
}

footer p{
    line-height: 1.75;
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    font-size: 16px;
}

footer ul{
    list-style: none;
}

footer a{
    text-decoration: none;
}

footer img{
    vertical-align: bottom;
}

footer .text_wbr{
    word-break: keep-all;
    overflow-wrap: break-word;
}

footer .wrapper1{
    width: 85vw;
    max-width: 920px;
    margin: auto;
}

.footer_wrap{
    width: 95%;
    max-width: 1764px;
    margin: 40px auto 0;
    border-top: 1px solid #3E3A39;

}

.footer_upper{
    display: flex;
    margin-top: 20px;
    flex-direction: row;
    justify-content: space-between;
    letter-spacing: 0.2em;
}

.footer_address{
    width: 49%;
    font-size: 16px;
    font-family: 'Meiryo UI', sans-serif;
}

.footer_address > p,
.footer_address > div{
    padding: 14px 0;
    letter-spacing: 0.2em;
    color: #3E3A39;
    font-weight: bold;
}

.footer_beegle{
    display: block;
    width: clamp(300px, (100vw - 920px) * 10000, 430px);
}

.footer_logo{
    width: clamp(17.6em, (100vw - 920px) * 10000 ,25.2em);
    height: auto;
}

.footer_beegle p{
    width: 100%;
}

.footer_map_link{
    width: 100%;
    max-width: 160px;
}

.tel_outer{
    display: grid;
    gap: 0 1em;
    grid-template-columns: repeat(auto-fill, 15em);
}

.tel_outer > a,
.tel_outer > p{
    line-height: 1.75;
    font-size: 16px;
    color: #3E3A39;
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
}

.footer_upper_list{
    width: 49%;
}

.footer_upper_list ul{
    display: grid;
    width: 100%;
    margin-top: 76px;
    grid-template-columns: repeat(auto-fill, minmax(9em, 10em));
    gap: 3em 0;
    justify-content: center;
    font-size: 16px;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 600;
}

.footer_upper_list li{
    position: relative;
    padding-left: 1.2em;
}

.footer_upper_list a{
    color: #3E3A39;
}

.footer_under{
    display: flex;
    width: 100%;
    max-width: 1764px;
    margin: auto;
    margin-top: 54px;
    letter-spacing: 0.2em;
    flex-direction: row;
    justify-content: space-between;
}

.footer_under_links{
    display: flex;
    width: 100%;
    margin: auto;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
}

.footer_under_links > a{
    width: -moz-fit-content;
    width: fit-content;
    width: 100%;
}

.footer_under_links>a img{
    width: 100%;
    height: 100%;
    max-height: 220px;
    object-fit: cover;
}

.footer_under_sns{
    display: flex;
    width: 100%;
    gap: 0 60px;
}

.footer_under_sns > a img{
    width: 100%;
    max-width: 41px;
    max-height: 41px;
}

.top_button_wrap{
    position: absolute;
    display: flex;
    width: auto;
    bottom: 0;
    right: 1%;
    justify-content: flex-end;
}

.footer_copyright{
    margin-bottom: 30px;
    font-size: 12px;
    text-align: center;
}
/*-------------------- フッター↑ --------------------*/








/*-------------------- ブレークポイント 834px ↓ --------------------*/

@media screen and (max-width:834px){
    .desktop_br_prohibit{
        display: initial;    
    }

    .text_wbr.mobile_wbr_prohibit{
        word-break: initial;
        overflow-wrap: initial;
    }

    .wbr_prohibit{
        display: none;
    }

    /*-------------------- 共通部品↓ --------------------*/

    /*---------- ページトップボタン↓ ----------*/
    .page_top_button{
        position: fixed;
        right: 10%;
        bottom: 5%;
        flex-direction: column;
        align-items: center;
        visibility: hidden;
        opacity: 0;
    }

    .page_top_button>p{
        order: 2;
    }
    /*---------- ページトップボタン↑ ----------*/

    /*-------------------- 共通部品↑ --------------------*/

    /*-------------------- フッター↓ --------------------*/
    .footer_wrap{
        border-top: none;
    }

    .footer_upper{
        width: 100%;
        margin: auto;
        flex-direction: column;
        border-top: 1px solid #3E3A39;
    }

    .footer_address{
        display: flex;
        width: 100%;
        order: 2;
        flex-direction: column;
    }

    .footer_address > p,
    .footer_address > div{
        padding: 25px 0;
    }

    .footer_beegle{
        width: 100%;
        max-width: clamp(300px, (100vw - 500px) * 10000, 430px);
    }

    .footer_logo{
        width: 25.2em;
        height: auto;
    }

    .tel_outer{
        display: flex;
        flex-wrap: wrap;
    }

    .footer_upper_list{
        width: 100%;
        order: 1;
    }

    .footer_upper_list ul{
        margin: 44px 0;
        font-size: clamp(14px ,3.6vw ,28px);
        grid-template-columns: repeat(auto-fill, 7.5em);
    }

    .footer_upper_list li{
        padding-left: 0;
    }

    .footer_under_sns{
        gap: min(10vw ,60px);
    }

    .footer_under{
        margin-top: 60px;
        flex-direction: column;
    }

    .footer_under_links{
        flex-direction: column;
    }

    .footer_under_links > a img{
        max-height: initial;
    }

    .footer_copyright{
        width: 84%;
        margin: 0 auto;
        padding: 30px 0;
    }

    /*-------------------- フッター↑ --------------------*/
    /*-------------------- ブレークポイント 834px ↑ --------------------*/

    /*-------------------- ブレークポイント 500px ↓ --------------------*/
    @media screen and (max-width:500px){   
        .mobile_br_prohibit{
            display: none;
        }

        .text_wbr_mobile{
            word-break: keep-all;
            overflow-wrap: break-word;
        }

        /* フッター↓ */
        .footer_upper{
            border-top: none;
        }
        
        .footer_under_sns>a{
            width: 48px;
        }

        .footer_logo{
            width: calc(100% - 0.4em);
            max-width: 17.6em;
        }

        .footer_upper_list ul{
            grid-template-columns: repeat(auto-fill, 100%);
            justify-content: flex-start;
            gap: 0;
            border-top: 1px solid #B0CBE5;
        }

        .footer_upper_list li{
            border-bottom: 1px solid #B0CBE5;
        }

        .footer_upper_list a{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            color: #003783;
            padding: 1.5em 1em;
        }

        .footer_upper_list a::after{
            content: "\02192";
            width: 1.5em;
            line-height: 1.5em;
            color: white;
            text-align: center;
            text-indent: 15%;
            background-color: #003783;
            border-radius: 1.5em;
        }
        /* フッター↑ */
    }
    /*-------------------- ブレークポイント 500px ↑ --------------------*/
}