@charset "utf-8";

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

/*+-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+
+-----+// glbnav
--+-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+*/

header{padding:0 15px;width: calc(100% - 30px);}
nav.glbnav ul{justify-content: center;}


}


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

.dpcnone900{display:block!important;}
.dspnone900{display:none!important;}

nav.glbnav{display:none;}

nav.nav_sp{display:block;position:relative;padding: 10px 0;}
nav.nav_sp h1{width:100%;text-align:center;}
nav.nav_sp h1 img{width:141px;height:40px;}

nav.nav_sp dl {width:100%;background:#323333;}
nav.nav_sp dl dt{display:block;width:33px;height:15px;text-align:center;color:#000;font-size:12px;font-weight:bold;line-height:1.4;position: absolute;right: 15px;top:22px;z-index:1;}

nav.nav_sp dl dd{display:none;width:100vw;height:100vh;padding:0;overflow-y:auto!important;position:fixed;top:0;bottom:0;left:0;right:0;background:#323333;}

nav.nav_sp dl dt .menu__line{
    background:#000;
    display: block;
    width: 33px;
    height: 3px;
    right:0;
    position: absolute;
    transition:transform .3s;
}


nav.nav_sp dl dt .menu__line--top{
    top: 0;
}

nav.nav_sp dl dt .menu__line--center{
    top: calc(50% - 2px);
}
nav.nav_sp dl dt .menu__line--bottom{
    bottom: 0;
}

nav.nav_sp dl dt.active{border-right:none;box-shadow: none;}
nav.nav_sp dl dt.active .menu__line{width:33px;background:#fff;}
nav.nav_sp dl dt.active .menu__line--top {

    transform: rotate(45deg);
}
nav.nav_sp dl dt.active .menu__line--center{
    transform:scaleX(0);
}
nav.nav_sp dl dt.active .menu__line--bottom{
    bottom: 12px;
    transform: rotate(135deg);
}


nav.nav_sp dd h1{padding:38px 0 50px;}
nav.nav_sp ul{margin:0 auto;}
nav.nav_sp li{padding:15px 30px 25px;}
nav.nav_sp li a{color:#fff;font-size:2.5rem;}
nav.nav_sp li span{display:block;width:100%;color:#fff;font-size:2.5rem;position:relative;}
nav.nav_sp li span:after{content:"＋";position:absolute;right:10px;font-size:3rem;}
nav.nav_sp li span.active:after{content:"ー";}

nav.nav_sp ul.sub{display:none;}
nav.nav_sp ul.sub li{padding:15px 30px;}

/*+-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+
+-----+// about
--+-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+*/
section.about{padding: 0 0 50px;}
section.about ul li{width:calc(50% - 10px);margin-right:10px;}

}



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

.dpcnone780{display:block!important;}
.dspnone780{display:none!important;}

section.mimage{height:730px;background:url(../images/top/mimg_bg_sp.png) center -6px no-repeat;background-size:auto 100%;}

section.mimage h2{font-size:3.3rem;top:130px}
section.mimage h3{top:250px;}
section.mimage p{position:absolute;font-size:1.6rem;line-height:1.8;top:330px;}

section.mimage button{top:420px;}

/*+-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+
+-----+// about
--+-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+*/

section.about h2{display:none;}
section.about ul li{width:100%;margin:10px auto 20px;}


/*+-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+
+-----+// service
--+-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+*/

section.service{padding: 50px 0 50px;}
section.service h2{font-size:4rem;}
section.service h2 span{font-size:3rem;}

section.service ul{justify-content: center;}
section.service ul li{max-width:250px;width:calc(50% - 10px);margin:20px 10px 20px 0;text-align:center;}


section.service01 ul li{width:100%;max-width:420px;margin:0 auto;}

section.service01 div.s_inner {min-height: auto;padding-bottom: 75px;}

div.s_contact{flex-direction: column;}

div.s_contact p{margin:50px auto 30px;}

div.s_contact img{max-width:400px;width: 100%;}

div.s_contact a{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;color:#fff;font-size:1.5rem;background:#366BA0;border:2px solid #366BA0;padding:10px 20px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;border-radius:40px;transition: .7s;}
div.s_contact a img{width:30px;margin-right:8px;}

/*+-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+
+-----+// flow
--+-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+*/

section.flow{padding: 50px 0 50px;}
section.flow h2{font-size:4rem;}
section.flow h2 span{font-size:3rem;}

section.flow dt{width:100%;margin-bottom:30px;}
section.flow dd{width:100%;}


/*+-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+
+-----+// contact
--+-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+*/

section.contact{padding: 100px 0 50px;}
section.contact h2{font-size:4rem;}
section.contact h2 span{font-size:3rem;}

section.contact ul{justify-content: center;}
section.contact ul li{width:100%;margin:20px 10px 20px 0;text-align:center;}



footer nav.foot_nav ul li{width:calc(50% - 20px);margin:0 10px 30px 10px;}
footer nav.foot_nav ul.sub li{width:100%;}

}



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

.dpcnone580{display:block!important;}
.dspnone580{display:none!important;}

section.mimage{height:550px;background:url(../images/top/mimg_bg_sp.png) center -6px no-repeat;background-size:auto 100%;}

section.mimage h2{font-size:2.3rem;top:130px;}
section.mimage h3{font-size:2rem;top:240px;}
section.mimage p{display:none;}

section.mimage button{top:380px;}
section.mimage button span{font-size:2.5rem;}

section.head_h2 h2{font-size:2.8rem;text-align:center;}

div.company01{padding: 30px 20px;}
div.company01 dt{width:100%;margin-bottom:5px;padding-bottom: 5px;}
div.company01 dd{width:100%;margin-bottom:15px;}

section.about01 div.sec_wrap{padding-bottom: 200px;}
section.about01 img{position:relative;right:0;bottom:0;z-index:1;margin: 20px auto 0; display: block;}

div.contact01{padding: 30px 20px;}
div.contact01 dt{width:100%;margin-bottom:5px;padding-bottom: 5px;}
div.contact01 dd{width:100%;margin-bottom:15px;}

}