@charset "UTF-8";
/* ---------- [ base ] ---------- */
*{
    margin: 0;
    padding: 0;
}

body{
/*    
    background: #000;
*/
/*        Test        */
background: white;
color: black;
margin-left:auto;
margin-right:auto;
text-align:center;
}
/* ---------- [ max-width:600px ] ---------- */
@media(max-width:600px){

    body{
        margin-top:0;
        padding-top:0;
    }

    /* ---------- [ header start] ---------- */
    div.openbtn{
        text-align:right;

        margin-right:0;
    }
    span{
        text-align:right;
    }

    header{
        z-index: 99;
        position: fixed;
        width: 100%;
        height:65px;
        background-color:rgba(255, 255, 255, 0.8);
        display: flex;
        margin-top:0;

    }

    div#header1{
        text-align:left;
    }
    .headerlogo{
        width:65%;
        margin-left:5px;
    }

    img.headerlogo{
        width:50%;
        margin-top:5px;
        height:60px;
    }

    #header2,#menu{
        display:none;
    }
    #bnr_jpg{
        width:100%;
    }
    .gmap{
        width:100%;
    }

    /* ---------- [ ヘッダーメニュー ] ---------- */
    /*========= ナビゲーションのためのCSS ===============*/

    #g-nav{
        /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
        position:fixed;
        z-index: 999;
        /*ナビのスタート位置と形状*/
        top:-120%;
        left:0;
        width:100%;
        height: 50vh;/*ナビの高さ*/
        background:#999;
        /*動き*/
        transition: all 0.6s;
    }

    /*アクティブクラスがついたら位置を0に*/
    #g-nav.panelactive{
        top: 0;
    }

    /*ナビゲーションの縦スクロール*/
    #g-nav.panelactive #g-nav-list{
        /*ナビの数が増えた場合縦スクロール*/
        position: fixed;
        z-index: 999; 
        width: 100%;
        height: 50vh;/*表示する高さ*/
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    /*ナビゲーション*/
    #g-nav ul {
        /*ナビゲーション天地中央揃え*/
        position: absolute;
        z-index: 999;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
    }

    /*リストのレイアウト設定*/

    #g-nav li{
        list-style: none;
        text-align: center; 
    }

    #g-nav li a{
        color: #333;
        text-decoration: none;
        padding:10px;
        display: block;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-weight: bold;
    }

    /*========= ボタンのためのCSS ===============*/
    .openbtn{
        position:fixed;
        top:10px;
        right:10px;
        cursor: pointer;
        width: 50px;
        height:50px;
        z-index: 99999999;
    }

    /*×に変化*/	
    .openbtn span{
        display: inline-block;
        transition: all .4s;
        position: absolute;
        left: 14px;
        height: 3px;
        border-radius: 2px;
        background-color: #666;
        width: 45%;
    }

    .openbtn span:nth-of-type(1) {
        top:15px;	
    }

    .openbtn span:nth-of-type(2) {
        top:23px;
    }

    .openbtn span:nth-of-type(3) {
        top:31px;
    }

    .openbtn.active span:nth-of-type(1) {
        top: 18px;
        left: 18px;
        transform: translateY(6px) rotate(-45deg);
        width: 30%;
    }

    .openbtn.active span:nth-of-type(2) {
        opacity: 0;
    }

    .openbtn.active span:nth-of-type(3){
        top: 30px;
        left: 18px;
        transform: translateY(-6px) rotate(45deg);
        width: 30%;
    }
    /* ---------- [ ヘッダーメニュー ] ---------- */

    div.main{
        height:100vh;

    }
    /* ---------- [ header end] ---------- */




    /* ---------- [ main start] ---------- */

    #item1_capture{
        margin-top:20px;
        text-align:left;
        margin-left: 10px;
        margin-right: 10px;        
    }
    #gaiyou{
        margin-top:40px;
        margin-bottom:-40px;
    }

    .job1{
        width:100%;
    }

    #pankuzu{
        display:none;
    }

    .slider{
        display:none;

    }
    div.bx-wrapper{
        display:none;

    }
    .anime{
        width:100%;
        margin-top:-75px;
    }

    .kaiteki{
        font-size:15px;
        font-family:"Franklin Gothic";
        color:black;
    }

    #animetion{
        width:100%;
    }

    /* ---------- [ スライダなし] ---------- */
    /*
    img.job1{
        width:100%;
    }
    */
    /* ---------- [ なし] ---------- */

    #item1{
        width:100%;
        text-align:center;
        margin-bottom:15px;
    }

    .frame{
        width:100%;
    }

    p#text1{
        margin-top:40px;
        margin-bottom:40px;
        margin-left:auto;
        margin-right:auto;
        width:350px;
    }

    p#text2{
        margin-top:40px;
        margin-bottom:40px;
        margin-left:auto;
        margin-right:auto;
        width:350px;
    }

    p#text3{
        margin-top:25px;
        margin-bottom:-5px;
        margin-left:auto;
        margin-right:auto;
        width:350px;
    }

    #text1{
        font-size:15px;
        font-family:"Franklin Gothic";
        color:black;
    }

    #text2{
        font-size:15px;
        font-family:"Franklin Gothic";
        color:black;
    }

    #text3{
        font-size:15px;
        font-family:"Franklin Gothic";
        color:black;
    }

    #center_buttom{
        display:none;
    }
    
    #airaddremove{
        width:100%;
    }
    
    #item2_capture{
        text-align:left;
        margin-left: 10px;
        margin-right: 10px;
    }
    #item3_capture{
        text-align:left;
        margin-left: 10px;
        margin-right: 10px;
    }
    /* ---------- [ main end] ---------- */

    /* ---------- [ footer ] ---------- */
    #footer{
        display:inline-block;
        width:100%;
        height:100%;
        color:#fff;
        background:#333;
        bottom:0;
    }
    /* ---------- [ footer ] ---------- */
}
/* ---------- [ max-width:600px ] ---------- */


/* ---------- [ min-width:1280px ] ---------- */
    @media(min-width:1280px){
    /* ---------- [ header ] ---------- */
    #openbtn,#g-nav{
        display:none;
    }

    #menu-header {
        list-style:none;
        overflow: hidden;
    }

    #menu{
        width:1140px;
        display:inline-block;;
    }

    #menu-header li a {
        text-decoration: none;
    /*        Test        */
        color: #32488A;
        font-weight: bold;
        padding: 20px;
    }

    #menu-header li {
        width: 16%;
        text-align:center;
    /*        Test        */
        background-color: white;
        display: inline-block;
        height: 50px;
        line-height: 50px;
        margin-left: auto;
        margin-right: auto;

    }

    #top-header {
        display:flex;

    }

    header{
        display:inline-block;
        width:1140px;

    }

    #header1 h1{
        text-align:left;
        float:left;
    }

    #header2{
        text-align:right;
    }



    #top-header #header2{
        margin-left:auto;

    }

    #menu #menu-header.li{
        margin-left:auto;
        margin-right:auto;
        text-align:center;
    }

    #center_buttom li {
        display: inline-block;
        list-style:none;
        margin-left:auto;
        margin-right:auto;
    }
    /* ---------- [ header end] ---------- */

    /* ---------- [ main start] ---------- */
    #pankuzu{
        display:inline-block;
        width:1140px;
        text-align:left;
    }

    #gaiyou {
        display:inline-block;
        width:1140px;
        text-align:left;
        border-bottom:double;
        border-color:#433d0e;
        border-width:3px;
    }

    .frame{
        display: flex;
        width:1140px;
        margin-left:auto;
        margin-right:auto;
    }

    #item1{
        width:50%;
    }
    #item1 h3{
        text-align:left;
    }

    #item1_capture{
        display:flex;
        text-align:left;
    }

    #airaddremove{
        width:100%;
        padding-right:5px
    }

    #item2{
        width:50%;
    }

    #item2 h3{
        text-align:left;
    }

    #item2_capture{
        display:flex;
        text-align:left;
    }

    #aircrean{
        padding-right:5px
    }

    #item3{
        width:50%;
    }

    #item3 h3{
        text-align:left;
    }

    #item3_capture{
        display:flex;
        text-align:left;
    }

    #Electricity{
        padding-right:5px
    }

    #item4{
        width:50%;
    }

    /* ---------- [ main end] ---------- */



    /* ---------- [ footer ] ---------- */
    #footer{
        display:inline-block;
        width:100%;
        height:100%;
        color:#fff;
        background:#333;
        bottom:0;
    }

    #menu-footer li {
        display: inline-block;
        list-style:none;
        width: 16%;
        margin-left: auto;
        margin-right: auto;
        text-decoration: none;
    }

    #menu-footer li a{
        color:#32488A;
    }
    /* ---------- [ footer end ] ---------- */
}
/* ---------- [ min-width:1280px ] ---------- */