@media screen and (max-width: 767px) {
    h1 { padding: 12px 0 12px 20px; }
    h1 img, .logo img { width: 200px; height:auto; margin: auto;}
    h2 {
        font-size: 1.3rem;
        font-weight: normal;
        font-family: 'Noto Serif JP', serif;
        margin-bottom: 1.3rem;
        margin-top: 1.3rem;
        padding-left: 1.3rem;
    }

    h2.service01::before,
    h2.service02::before,
    h2.service03::before,
    h2.service04::before,
    h2.service05::before,
    h2.generalH2::before
    { top: 0.5rem; }

    section.left_slider, section.right_slider {
        display: block;
        padding: 20px;
    }

    .slide_wrap { flex: none; width: 100%; }

    section.left_slider .read_wrap { flex: none; width: 100%; padding-left: 0px; }
    section.right_slider .read_wrap { flex: none; width: 100%; padding-right: 0px; }

    /*-- FOOTER --*/
    #inquiry_wrap { padding: 20px; }
    .inquiry_read {
        font-size: 10pt;
        font-weight: normal;
        font-family: 'Noto Serif JP', serif;
        line-height: 1.8;
    }
    .inquiry_btns { display: block; margin: 10px auto; }
    .inquiry_btns div { display: block; }

    .inquiry_tel, .inquiry_mail { font-size: 12pt; padding: 5px 10px; }
    .inquiry_tel { margin: 0 0 5px 0; }
    .inquiry_mail { margin: 5px 0 0 0; }
    .inquiry_tel span, .inquiry_mail span { font-size: 10pt; padding: 5px; line-height: 1; }

    #footer_wrap {
        padding: 20px;
        font-size: 0.8rem;
    }
    
    #footer_menu { display: block; width: 100%; margin-bottom: 25px; }
    #footer_menu div { text-align: center; display: block; width: 100%; }
    #footer_menu div:last-child { text-align: center; width: 100%; padding-top: 1rem; }
    #footer_menu ul { column-count: 1; list-style: none; margin-right: 0; }

    /*-- SERVICE SLIDER --*/
    .slide_wrap { flex: 1; max-width:100%; }

    /*-- 2ND PAGES --*/
    .sptitle { display: block!important; margin-left: 20px; margin-bottom: 0; }
    .pctitle { display: none!important; }
    #pagetitle {
        width: 100%;
        height: 180px;
        background-image: url(../images/bgi_pagetitle_sp.jpg);
        background-size: cover;
    }

    #pagetitle h2 {
        font-family: 'Noto Serif JP', serif;
        font-size: 2rem;
        color: #ffffff;
        text-align: center;
        position: relative;
        top: 50px;
    }

    #pagetitle p {
        font-size: 0.8rem;
        color: #ffffff;
        text-align: center;
        position: relative;
        top: 30px;
    }

    #breadcrumb_wrap { padding: 10px 20px; }

    .flex_wrap {
        display: block;  
        padding: 20px;
        width: 100%;
        margin: auto;
        box-sizing: border-box;
    }

    .general_wrap {
        display: block;
        padding: 20px;
        width: 100%;
        margin: auto;
        box-sizing: border-box;
    }
    .image_wrap { margin-bottom: 1rem; }
    .image_wrap img { width: 100%; display: block; }
    .flex_wrap .read_wrap { width: 100%; padding-right: 0; }

    .flex_wrap_detail {
        display: block;
        width: 100%;
        padding: 0 0 40px 0;
        margin: auto;
    }

    .flex_wrap_detail div {
        margin-right: 0;
        box-sizing: border-box;
        max-width: 100%;
    }

    .flex_wrap_detail div:last-child {
        margin-right: 0;
    }

    .flex_wrap_detail div span { display: block; margin-right: 20px; }

    .flex_wrap_detail div img {
        width: 100%;
        height: auto;
    }

    .flex_wrap_detail div dt {
        color: #0073be;
        text-align: left;
        margin: 0 0 5px 0;
    }

    .flex_wrap_detail_sp {
        display: flex;
        padding: 10px 20px;
        width: 100%;
        box-sizing: border-box;
        font-size: 0.8rem;
        line-height: 1.2;
    }

    table.datatable { font-size: 0.5rem; }
    table.datatable th { background-color: #0073be; padding: 10px 5px; color: #fff; border: 1px solid #ccc; }
    table.datatable td { padding: 10px 5px; border: 1px solid #ccc; text-align: right; }
    span.spbr { display: block; }
    dl.dl_wrap {
        width: 100%;
        display: block;
        border-top: 1px solid #ccc;
        padding: 30px 0;
    }
    dl.dl_wrap dt { width: 100%; padding: 0 0 10px 0; border-right: 0; font-weight: bold; color: #0073be; }
    dl.dl_wrap dd { width: 100%; padding: 0; }
}