html{ -webkit-text-size-adjust: none; /* Prevent font scaling in landscape */}

@media (max-width: 1024px) {
    body{ height: auto}

    #scrollDown,
    #box3 .car-box,
    #header-menu{display: none}
    #mainBox{position: relative;}

    #box1{min-height: 640}
    #box1 li {
        margin: 0 3%;
        width: 27.2%;
    }
    #box1 li h5{text-align: center}
    #service{padding: 60px}
    #box3{ min-height: 0}
    #box3 li{
        margin: 0 1%;
        width: 30%;
    }
    
	#map_box img{display: none}
    
    #box6 .animate{ height: 500px}
    /* #box6 .animate img{margin-left: -165px !important; } */
    #box6 .animate .img1,
    #box6 .animate .img2,
    #box6 .animate .img3,
    #box6 .animate .img6{
        left: 50%;
        /* top: 20px !important; */
    }

    #box6 .animate .img4,
    #box6 .animate .img5,
    #box6 .animate .img7,
    #box6 .animate .img8{
        left: 50%;
        /* top: 325px !important; */
    }


	/* トップ２枚を固定 */ 
    #box6 .animate .img3,
    #box6 .animate .img5{
	    z-index: 100;
    }


    #box6 .content p{padding: 0 40px}
    #box8 .phoneBg img{opacity: 1 !important;}
    #box8 #apps .label-light-gray{ font-size: 10px; }

    #plans .content > div {
        margin: 0 2.5%;
        width: 45%;
    }

    #plans .content > div.center{
        margin: 0 1%;
        width: 30%;
    }
}

@media (max-width: 768px) {
    #service p{
        font-size: 16px;
        text-align: left;
    }

    #cases{padding: 0 30px}
    #cases li{margin: 0 2%}
    #cases li{
        float: none;
        width: auto;
        margin: 0;
    }

    #box6 p{text-align: left}

    #plans .plan-desc br {display: none;}
    #box8 #apps .label-light-gray{ font-size: 10px; }

}

@media (max-width: 640px) {
    #pc-menu {display:none;}
    
    .box .content h4{font-size: 26px}

    .box,
    #service{padding: 0 20px}
    #box1{
        padding: 0;
        height: 640px;
    }
    #box1 .head{display: none}
    #box1 .head .urls{display: none}

    #box1 .head a.logo{
        float: none;
        margin: 85px auto 0;
        display: block;
    }

    #box1 h2{
        display: block;
        margin-bottom: 85px;
    }

    #box1 .top-content{
        background: url("../img/box1/bg_mobile.jpg") top center no-repeat;
    }

    #box1 li h5{
        font-size: 22px;
        text-align: center;
    }
    #box1 li p{font-size: 14px; padding: 0 10px}

    #box1 ul{margin-bottom: 100px}
    #box1 li,
    #box1 li.center{
        float: none;
        width: auto;
        margin: 80px 0 0;
    }
    #box1 li:first-child{margin-top: 60px}

    #service .content h4{
        position: relative;
        margin: 50px 25px 0;
        padding: 20px 90px 0;
    }

    .box .content p{
        text-align: left;
    }

    #service .content h4:before{
        content: '';
        background: url("../img/service/img4.png") no-repeat;
        background-size: 100% ;
        width: 110px;
        height: 130px;
        position: absolute;
        left: 0;
        top: 0;
    }

    #service .content h4:after{
        content: '';
        background: url("../img/service/img6.png") no-repeat;
        background-size: 100% ;
        width: 65px;
        height: 130px;
        position: absolute;
        right: 0;
        top: 0;
    }

    #service .animate{display: none}

    #box3{background: none #f2f2f2;}
    #box3 li,
    #box3 li.center{
        float: none;
        width: auto;
        margin: 50px 0 0 0;
    }
    #box3 li:first-child{margin-top: 0}
    #box3 li div{text-align: center}
    #box3 li h5{
        font-size: 25px;
    }

    #plans .content > div,
    #plans .content > div.center {
        float: none;
        margin: 0 1%;
        width: auto;
    }
    #plans .content > div:not(:first-child) {
        margin-top: 30px;
    }
    #plans .content > div.center {
        margin: 30px 1%;
    }

    #plans div.waiting {
        padding: 8px 40px;
        background: #F5F6F5;
        border: none;
    }

    #plans span.gray-balloon { display: none; }
    #plans .group-container {
        display: table;
        width: 100%;
    }

    #plans .plan-desc br {display: none;}
    #plans form a.btn-submit { padding: 8px; }
    #plans form a.btn-submit span{ display: none; }
    #plans .content > div ul li.row1 { display: block; }
    #plans .content > div ul li.row2 { display: none; }
    #plans .content > div ul li.row3 { display: none; }
    #plans .content > div ul li.row4 { display: table-header-group; }
    #plans .content > div strong.pc-price{ display: none;} 
    #plans .content > div strong.sp-price{ display: block; line-height: 24px;}
    #plans .content > div h5{ text-align: left; line-height: 24px; font-size: 16px; }
    #plans .content > div img{ float: left; width: 90px; margin-right: 30px;}
    #plans .content > div > div { margin-bottom: 20px; } 

    #cases li img{
        float: none;
        margin: 20px auto 20px;
        display: block;
    }

    #map_box .content{
        height: 435px;
        margin: 0 auto;
        padding-top: 100px;
        background-size: 225%;
        width: 100%!important;
        min-width: 0;
    }
    #map_box p{
        width: 70%;
        margin: 30px auto 0;
        font-size: 20px;
    }

    #box6{display: none}

    #box8{padding: 0}
    #box8{height: auto}
    #box8 p img{
        float: none;
        margin: 50px auto;
        display: block;
    }
    #box8 p{
        height: auto;
        padding: 0 35px;
        margin-bottom: 20px;
    }

    #box8 #apps ul li{
        float: left;
        width: 50%;
        border-bottom: 1px solid #E3E3E3;
    }

    #box8 #apps ul li:nth-child(odd){
        float: left;
        width: 50%;
        border-right: 1px solid #E3E3E3;
    }

    #box8 #apps ul li:last-child{
        border-bottom: none;
    }


    #box8 #apps ul li > img{
        display: block;
        margin: 40px auto;
        width: 192px;
        max-width: 100%;
        height: 148px;
    }
    
    #box8 #apps ul li > a > img{
        display: block;
        margin: 40px auto;
        width: 138px;
        height: 46px;
    }

    #box8 #apps .label-light-gray{
        width: 160px;
        height: 46px;
        padding: 7px;
        font-size: 12px;
    }


    #box9{padding: 40px 20px 20px}



    #box9 .content li{
        float: left;
        width: 50%;
        margin-bottom: 20px;
        text-align: left;
    }


    #box9 .content li a{
        position: relative;
        padding-left: 20px;
        color: #fff;
        font-size: 14px;
    }

    #box9 .content li a:before{
        content: '>';
        color: #fff;
        font-size: 14px;
        position: absolute;
        top: 0;
        left: 0;
    }

    #mobile-menu{
        position: fixed;
        height: 40px;
        width: 100%;
        top: 0;
        left: 0;
        z-index: 200;
        display: block;
        background: #ffffff;
  		border-bottom:1px solid #ededed;
        color: #BABABA;
    }

    #mobile-menu .bar{
        padding: 8px 0 8px 10px;
	}

    
    #mobile-menu img{
	    margin-right: 10px;
    }

    #mobile-menu li{
        float: left;
        width: 50%;
        margin-bottom: 20px;
        text-align: left;
    }

    #mobile-menu li a{
        position: relative;
        padding-left: 20px;
        color: #BABABA;
        font-size: 14px;
    }

    #mobile-menu li a:before{
        content: '>';
        color: #BABABA;
        font-size: 14px;
        position: absolute;
        padding-left: -20px;
        top: 0;
        left: 0;
    }




    #box9 .content p{text-align: center}

    #mobile-menu .bar{
        background-size: 41px;
    }

    #mobile-menu .button{
        float: right;
        margin: 3px 15px 3px 0;
    }

    #mobile-menu .navigation{
        background-color: #ffffff;
        padding: 20px 20px 0 20px;
        display: none;
        -webkit-box-shadow: 0px 5px 3px -3px rgba(0, 0, 0, 0.4);
        box-shadow: 0px 5px 3px -3px rgba(0, 0, 0, 0.4);
    }
}

@media (max-width: 480px) {
    #map_box{padding: 0}
    #map_box .content{padding-top: 100px}
    #map_box .content h3{font-size: 20px}
    #map_box p{
        width: 60%;
        font-size: 14px;
        margin-top: 10px;
    }

    #service .content h4{padding: 0}
    #service .content h4:after,
    #service .content h4:before{ display: none}

}