@charset "utf-8";

/*
Theme Name: ヨシダ電気工事v3 Responsive
Theme URI: http://www.yosi-den.jp
Version: 1.0
Author: alpha 
*/
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    /* safari */
    min-height: 0vw;
}

html {
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: subpixel-antialiased;
    overflow-y: scroll;
    /*scroll-behavior: smooth;*/
}

body {
    overflow: hidden;
}

#page {
    width: 100%;
    height: auto;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

img {
    width: auto;
    max-width: 100%;
    height: auto;
}

.bunner_fix {
    z-index: 10;
}

.bunner_fix a {
    display: block;
}

.bunner_fix a img {
    width: 100%;
    height: auto;
}

.In {
    height: auto;
    overflow: hidden;
}

header {
background: url(./images/bg/bg_a.jpg) repeat;
height: auto;
width: 100%;
z-index: 110;
/*height: 176px;
background: url(../images/header_bg.jpg) repeat-x;*/
}

/*nav#global {
    width: 100%;
    background-color: #5AA29C;
}*/


@media (min-width:992px) {
    #js-hamburger{
       display: none;
    }
    nav#global {
        width: 100%;
        /*background-color: #5AA29C;*/
        background: url(./images/header_bg2.png) repeat-x;
        background-size: auto 100%;
    }
    nav#global ul {
        width: 970px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: centers;
    }

    nav#global ul li {
        /*border-right: 1px solid #fff;
        width: 100%;*/
        width: auto;
        text-align: center;
    }

    /*nav#global ul li:first-child {
        border-left: 1px solid #fff;
    }*/

    nav#global ul li a {
        line-height: 65px;
        color: #fff;
        display: block;
        letter-spacing: 2px;

        
    }
    .header__nav .bunner{
        display: none;
    }
    .swiper{
        background: url(./images/bg/bg_a.jpg) repeat;
        padding: 0 0 40px 0;
    }
    .swiper-pagination-bullet-active{
        background:#63AAA5
    }
   
    .swiper,
    #SecImg {
        margin: 57px auto 0 auto;
    }
    .bunner_fix{
        position: fixed;
        top: 40%;
     
        right: 0;
        width: 100px;
        height: auto;


    }
    
}

@media (max-width:991px) {
    p{
        font-size: 14px;
        line-height: 24px;
    }
    .bunner_fix{
        /*position: fixed;
        top: auto;
        bottom: 20px;
        right: 0;
        width: 70px;
        height: auto;
        z-index: 120;*/
        display: none;
    }
    #global .bunner {
        width: 70%;
        margin: 30px auto 0 auto;
    }
    #js-hamburger{
        cursor: pointer;
    }
    .header__nav {
        position: fixed;
        right: 0;
        left: 0;
        top: 0;
        width: 100%;
        height: 100vh;
        transform: translateX(100%);
        background-color: #fff;
        transition: ease .4s;
    }

    /*@media screen and (min-width: 960px) {
        .header__nav {
            position: static;
            transform: initial;
            background-color: inherit;
            height: inherit;
            display: flex;
            justify-content: end;
            width: 50%;
        }
    }


    @media screen and (min-width: 960px) {
        .nav__items {
            width: 100%;
            display: flex;
            align-items: center;
            height: initial;
            justify-content: space-between;
        }
    }*/

    .nav-items {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 0;
    }

    /*@media screen and (min-width: 960px) {
        .nav-items {
            position: inherit;
            top: 0;
            left: 0;
            transform: translate(0, 0);

        }
    }*/


    .nav-items__item a {
        color: black;
        width: 100%;
        display: block;
        text-align: center;
        font-size: 20px;
        margin-bottom: 24px;
        color: black;
    }

    .nav-items__item:last-child a {
        margin-bottom: 0;
    }

    /*@media screen and (min-width: 960px) {
        .nav-items__item a {
            margin-bottom: 0;
        }
    }*/


    .header__hamburger {
        width: 35px;
        height: auto;

    }

    .hamburger {
        background-color: transparent;
        border-color: transparent;
        z-index: 9999;
        position: fixed;
        top: 15px;
        right: 10px;
    }
    .hamburger.active{
        top: 20px;
    }
    /*@media screen and (min-width: 960px) {
        .hamburger {
            display: none;
        }
    }*/
    .hamburger span {
        width: 100%;
        height: 1px;
        background-color: #486B67;
        position: relative;
        transition: ease .4s;
        display: block;
    }

    .hamburger span:nth-child(1) {
        top: 0;
    }

    .hamburger span:nth-child(2) {
        margin: 8px 0;
    }

    .hamburger span:nth-child(3) {
        top: 0;
    }

    .header__nav.active {
        transform: translateX(0);
    }

    .hamburger.active span:nth-child(1) {
        top: 5px;
        transform: rotate(45deg);
    }

    .hamburger.active span:nth-child(2) {
        opacity: 0;

    }

    .hamburger.active span:nth-child(3) {
        top: -13px;
        transform: rotate(-45deg);
    }

    header {
        height: auto;
        padding: 5px 0 0 10px;
        position: fixed;
    }

    header h1 {
        width: 40%;
        height: auto;
    }

    header h2 {
        width: 30%;
        height: auto;
        margin: -5px 0 0 0;
        float: left;
        margin-left: 20px;
    }

    nav#global {
        height: 100%;
        margin-top: 0;
        width: 100%;
        float: none;
        z-index: 99;
        background-color: rgba(90, 162, 156, 0.8);
    }

    
    nav#global ul {
        display: flex;
        flex-direction: column;
        width: 90%;
        height: auto;
        margin: 20% auto 20px auto;

    }
    nav#global ul li a{
        padding: 15px 0;
        color: #fff;
        display: block;
        font-size: 18px;
    }

    .In {
        width: 100%;
        height: auto;
    }
   
    .swiper{
        margin: 80px auto 0 auto;
        padding: 0 0 40px 0;
        background: url(./images/bg/bg_a.jpg) repeat;
    }
    .swiper-pagination-bullet-active{
        background:#63AAA5
    }
    #SecImg{
        margin: 55px auto 0 auto;
    }
    #SecImg{
        height: 160px;
        background-size: auto 100%;
    }
    
    .content{
        width: 90%;
        height: auto;
        margin: 0 auto;
    }
    #SecImg h3{
        text-align: left;
    }
    #SecImg h3 img{
        width: 70%;
    }
    #coversekou li{
        float:none;
        display: inline-block;
        width: 49% ;
        margin: 0;

    }
    #coversekou li div .gr{
        font-size: 13px;
        line-height: 20px;
    }
    #News{
        width: 100%;
    }
    #News h3{
        float: none;
        display: block;
        margin: 0 auto;
        border: none;
        height: auto;
        padding: 0 0 20px 0;
    }
    #News h3 img{
        width: 30%;

    }
    #News dl{
        width: 100%;
    display: flex;
   flex-direction: column;
   text-align: left;
   font-size: 13px;
   line-height: 20px;
    }
    #News dt{
        width: 90%;
    }
    footer ul{
        width: 100%;
        margin: 0 auto;
    }
    #copyright{
        font-size: 10px;
        float: none;
        margin: 10px 0 0 0;
    }
    footer h3{
        float: none;
        width: 80%;
        margin:0px auto;
padding: 40px 0;
clear: both;
    }
    #page-top {
        height: 40px;
        overflow: hidden;
    }

    #page-top a{
width: 40px;
background-size: 100%;
    }
    #BaseTemaple,
    #GayoImg,
    #GayoA,
    #GayoB{
        width: 100%;
    }
    #GayoImg img{
    margin: 0 auto;
display: block;
    }

    #BaseTemaple h3{
        width: 100%;
overflow: hidden;
    }
    #BaseTemaple h3 img{
        width: 220%;
        max-width: 220%;
    }
    #GayoA dl:first-child{
       padding: 50px 0 0 0;
    }
    #GayoA dl,
    #GayoB dl{
        width: 100%;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
    }
    #GayoB dt{
        margin: 5px 20px 5px 0px;
        width: 30%;
        
    }
    #googleMAP iframe,
    #busSpimgL,
    .busSp,
    .busSptxt,
    #Shikaku,
    #Shikaku dl
    {
width: 100%;
    }
    #sekou,
    #sekou-sy {
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    #sekou li,
    #sekou-sy li{
        width: 48%;
        height: auto;
        padding: 0 0 30px 0;
        margin: 0;
    }

    #Shikaku dt{
        width: 80%;
    }
    #Shikaku dd{
        width: 20%;
    }
    .sekoulist dd,
    #contactSP
    {
        width: 100%;
        font-size: 14px;
    }
    .busSpimgL,
    .busSptxt,
    #FormSp,
    #FormSp dt,
    #FormSp dd,
    #FormSp dd input,
    #FormSp dd textarea,
    #NewsList,
    #NewsList-sy dl,
    #NewsList-sy dd,
    #NewsList-sy dt {
        float: none;
        width: 100%;
        display: block;
    }
    #FormSp dd input,
    #FormSp dd textarea{
        padding: 10px;
    }
    .busSpimgL img{
        width: 100%;
    }
    
    .busSptxt{
        padding: 20px 0 0 0;
        overflow: hidden;
        font-size: 14px;
    }
    .busSptxt{
display: block;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
    }

    .busSptxt img{
        width: 130%;
        max-width: 130%;
        
    }
    #Shikaku,
    #NewsList-sy dd,
    #NewsList-sy dt{
        font-size: 14px;
    }
    #BaseTemaple h3 img.not{
        width: 100%;
    }
    #NewsList,
    #NewsList-sy{
        height: auto;
        overflow: hidden;
    }
    #NewsList h3{
        overflow: hidden;
    }
    #NewsList h3 img,
    #NewsList-sy h3 img{
        width: 220%;
        max-width: 220%;
    }
    #NewsList dd,
    #NewsList-sy dd{
        padding: 0 0 10px 0;
    }
    #NewsList dd,
    #NewsList dd,
    #NewsList dt a,
    #NewsList-sy,
    #NewsList-sy dl{
        font-size: 14px;
        width: 100%;
    }
}
@media screen and (min-width:768px) and (max-width:820px) {
    .swiper, #SecImg {
        margin: 110px auto 0 auto;
      }
      .hamburger.active,
      .hamburger {
        top: 4%;
      }
}
@media (max-width:991px) {
    .sp_none{
        display: none;
    }

}

@media (min-width:992px) {
    .pc_none{
        display: none;
    }

}


@media (max-width:767px) {
	#GayoB dl{
		flex-direction: column;
	}
    #GayoB dt {
        width: 100%;
        float: none;
        text-align: left;
        margin: 0 auto;
        padding: 8px;
		background-color: #efefef;
    }

    #GayoB dd {
        width: 100%;
        float: none;
        margin: 0 auto;
        padding: 8px;
    }

}