@charset "UTF-8";

/*---------------------------------タブレット用----------------------------------*/
/*-----------------------------------------------------------------------------*/
@media screen and (max-width:900px) {

    /*--------------------------------------------------------------------------------
    　▼ mobile_header nav　
    --------------------------------------------------------------------------------*/
    #mobile_header {
        display: block;
        width: 100%;
        padding: 10px 0;
        z-index: 999;
        height: 60px;
        background: #fff;
        position: relative;
        box-shadow: 0 0 5px #aaa;
    }
    #mobile_header .logo { text-align: center; width: 50%; margin: 0 auto;}
    #mobile_header .logo #toggle_btn img { height: 37px !important; width: auto;}
    #mobile_header #toggle_btn {
        font-size: 0;
        position: absolute;
        left: 13px;
        top: 9px;
    }
    #mmenu ul li a { font-size: 14px;}
    #mobile_header.headroom { position: fixed; top: 0; transition: all .2s ease-in-out;}
    #mobile_header.bounceOutUp { top: -60px;}
    #mobile_header.bounceInDown { top: 0;}
    .mm-menu .mm-list > li > a.mm-subopen:after, .mm-menu .mm-list > li > a.mm-subclose:before { border-color: #000 !important;}
    .mm-menu .mm-list > li > a.mm-subclose { color: #000 !important;}
    .mm-list > li > a > img { width: 100%;}

    /*--------------------------------------------------------------------------------
    　▼ 共通　
    --------------------------------------------------------------------------------*/
    .inner_box,
    .inner_box02 { width: 96%;}
    #wrapper { padding-top: 60px !important;}
    #contents.other { padding: 0 0 20px;}

    /*--------------------------------------------------------------------------------
    　▼ header　
    --------------------------------------------------------------------------------*/
    #header,
    .nav { display: none;}
    .pc.nav-add { display: none;}

    /*--------------------------------------------------------------------------------
    　▼ scroll_banner
    --------------------------------------------------------------------------------*/
    #scroll_banner .inner_box { width: 80%;}
    #scroll_banner ul.slick-slider { width: 90%;}
    .slick-prev { left: -24px !important; top:45%; width: 15px !important;}
    .slick-next { right: -28px !important; top:45%; width: 15px !important;}

    /*--------------------------------------------------------------------------------
    　▼ footer
    --------------------------------------------------------------------------------*/
    #footer .logo_footer { margin: 0 auto;}
    #footer .fl_box {
        float: none;
        width: 100%;
        text-align: center;
    }
    #footer .fr_box {
        float: none;
        width: 100%;
    }
    #footer .footer_link .in_box:last-child { border-right: none;}
    #footer .copy { padding: 20px 0 0;}

    /*--------------------------------------------------------------------------------
    　▼ その他ページ共通
    --------------------------------------------------------------------------------*/
    #wrapper #main {
        width: 100%;
        padding: 10px 3% 30px;
    }
    #main #main_contents {
        float: none;
        width: 100%;
        padding: 0;
    }
    #main #side {
        float: none;
        width: 100%;
    }
    #main #side .side_inner { width: 100%;}

}



/*---------------------------------スマホ用----------------------------------*/
/*-----------------------------------------------------------------------------*/
@media screen and (max-width:640px) {

    /*--------------------------------------------------------------------------------
    　▼ 設定　
    --------------------------------------------------------------------------------*/
    ul.inline_block { font-size: 0;}
    ul.inline_block li { display: block;}
    .for_pc { display: none;}
    .for_sp { display: block;}
    #mobile_header .logo { width: 70%;}

    /*--------------------------------------------------------------------------------
    　▼ footer
    --------------------------------------------------------------------------------*/
    #footer { padding: 110px 0 10px;}
    #footer .fl_box { padding: 0;}
    #footer .sns_footer ul li { display: inline-block;}
    #footer .footer_link { display: block; font-size: 0;}
    #footer .footer_link .in_box {
        display: inline-block;
        width: 50%;
        font-size: 12px;
        margin: 0 auto 20px;
    }

}


@media screen and (max-width: 400px) {

    #mobile_header .logo { width: 80%; padding-left: 10%;}
    #pan { display: none;}
    .nav-local.sp_100p li { width: 98%;}
}