/* reset */

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

	body{
		font-size:18px;
	}

	.w100{
		width:100%;
	}

	.spCenter{
		text-align:center;
	}

	a[href^="tel:"] { 
		cursor: default;
		text-decoration: underline;
		color:#222;
	}

	/* spmenu*/
	#top-head,
    .inner {
        width: 100%;
        padding: 0;
    }
    #top-head {
        top: 0;
        position: fixed;
        margin-top: 0;
    }
    /* Fixed reset */
    #top-head.fixed {
        padding-top: 0;
        background: transparent;
    }
    #mobile-head {
        background: #f7943d;
        width: 100%;
        height: 56px;
        z-index: 999;
        position: relative;
    }
    #top-head.fixed .logo,
    #top-head .logo {
        position: absolute;
        left: 13px;
        top: 13px;
        color: #333;
        font-size: 26px;
    }
    #global-nav {
        position: absolute;
        /* 開いてないときは画面外に配置 */
        top: -500px;
        background: #f7f3bd;
        width: 100%;
        text-align: center;
        padding: 0;
        -webkit-transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
    }
    .subPage #global-nav {
        top: -500px;
    }
    #global-nav ul {
    	margin:0;
        list-style: none;
        position: static;
        right: 0;
        bottom: 0;
        font-size: 14px;
        padding-left:0;
    }
    #global-nav ul li {
        float: none;
        position: static;
    }
    #top-head #global-nav ul li a,
    #top-head.fixed #global-nav ul li a {
        width: 100%;
        display: block;
        color: #333;
        padding: 18px 0;
        font-size:20px;
        cursor:pointer;
    }
	
	#global-nav .child li{
		width: 100%;
        display: block;
        color: #333;
        padding: 18px 0;
        font-size:20px;
        cursor:pointer;
	}

	#top-head #global-nav ul li .child li a,
    #top-head.fixed #global-nav ul li .child li a {
        color:#fff;
        padding:0;
    }

    #nav-toggle {
        display: block;
    }
    /* #nav-toggle 切り替えアニメーション */
    .open #nav-toggle span:nth-child(1) {
        top: 11px;
        -webkit-transform: rotate(315deg);
        -moz-transform: rotate(315deg);
        transform: rotate(315deg);
    }
    .open #nav-toggle span:nth-child(2) {
        width: 0;
        left: 50%;
    }
    .open #nav-toggle span:nth-child(3) {
        top: 11px;
        -webkit-transform: rotate(-315deg);
        -moz-transform: rotate(-315deg);
        transform: rotate(-315deg);
    }
    /* #global-nav スライドアニメーション */
    .open #global-nav {
        /* #global-nav top + #mobile-head height */
        -moz-transform: translateY(556px);
        -webkit-transform: translateY(556px);
        transform: translateY(556px);
    }

	#global-nav ul li{
    	border-top: 1px solid #fffddf;
    	border-bottom: 1px solid #e4de8b;
	}

	#global-nav .child{
		background-color:#f7943d;
		color:#fff;
	}

	#global-nav .child li{
		color:#fff;
		border-top: 1px solid #ffb06a;
    	border-bottom: 1px solid #e28839;
	}

	span.arrow{
		color:#f7943d;
	}

    /* sp menuここまで */

	/* dropDown */
	#wrapper ul.mainMenu li ul.child li{
		width:90% !important;
	}

	#wrapper ul.mainMenu li ul.child .close:hover{
	 	transform:none;
	}

	/* dropDownここまで */

	.sp_none{
		display:none;
	}

	.sp_only{
		display:block;
	}

	#wrapper .floatBox{
		display:table;
		border-collapse:collapse;
		border-spacing:0px 0px;
		width:100%;
		margin:0 auto;
	}

	#wrapper .floatBox{
		display:block;
		width:100%;
		margin:0 auto;
	}

	#wrapper .floatBox .floatLeft , 
	#wrapper .floatBox .floatRight{
		display:block;
		vertical-align: top;
	}

	#wrapper .floatBox .floatLeft img, 
	#wrapper .floatBox .floatRight img{
		max-width:400px;
		width:100%;
	}

	#wrapper .floatBox .floatLeft .icon, 
	#wrapper .floatBox .floatRight .icon{
		max-width:300px;
		width:100%;
	}

	#wrapper .floatBox .floatLeft .photo, #wrapper .floatBox .floatRight .photo{
		max-width:500px;
		width:100%;
	}

	#wrapper #s06 .floatBox .floatLeft img, 
	#wrapper #s06 .floatBox .floatRight img{
		width:100%;
	}

	#wrapper{
		padding-top:20px;
	}

	.subPage{
		padding-top:47px !important;
	}

	 #wrapper header .title{
	 	width:320px;
	 	margin:0 auto;
	 	padding-top:240px;
	 }

	 #wrapper header .title img{
	 	width:100%;
	 }

	 #wrapper header .cart{
		top:38px;
	}

	#wrapper header .cart2{
		top:397px;
	}

	 /*s01*/

	 .subPage #s01 .content h2{
		margin:0;
	}

	#wrapper nav.navMenu{
		display:flex;
	}

	#wrapper ul.mainMenu,
	#wrapper ul.subMenu{
		flex-wrap:wrap;
		text-align:left;
		padding-left:5px;
	}

	#wrapper ul.mainMenu li,
	#wrapper ul.subMenu li{
  		margin:0 auto;
	  	margin-top:0px;
	  	width:48.2% !important;
	  	max-width:initial;
	}

	#wrapper #s01 .mapList img{
		width:99%;
	}

	/* subPage */
	
	.subPage #s01 .content table{
		width:80%;
	}
	
	.subPage #s01 .content .ratesTable thead{
		display:none;
	}

	.subPage #s01 .content table td,
	.subPage #s01 .content table th{
		display:block;
	}

	.subPage #s01 .content .ratesTable td{
		text-align:right;
	}

	.subPage #s01 .content .ratesTable td:before{
		content: attr(data-label);
    	float: left;
   	 	color:#222;
   	 	font-size:16px;
	}

	.subPage #s01 .content .sum th{
		width:auto;
	}

	.subPage #s01 .content .sum td{
		text-align:left;
	}

	.subPage #s01 .content .shopping_icon img{
		width:100%;
	}

	.subPage #s01 .content h3 img{
		width:100%;
	}

	.subPage #s01 .shoppingBox .floatBox .floatLeft{
		text-align:center;
	}

	.subPage #s01 .shopping_flow p{
		margin:0 auto;
		padding-bottom:0;
		text-align:center;
	}

	.subPage #s01 .shopping_flow img{
		max-width:264px;
	}

	.subPage #s01 .content .facBox ul li,
	.subPage #s01 .content .actBox ul li{
		width:100%;
	}

	.subPage #s01 .content .actCal img{
		width:100%;
	}

	.subPage #s01 .content table.day_flow img.photo{
		width:100%;
		margin-bottom:10px;
	}

	.subPage #s01 .content ul.garbageList{
		width:100%;
		float:none;
	}

	.subPage #s01 .content .garbageImg{
		text-align:center;
		margin-bottom:20px;
	}

	.subPage #s01 .content .garbageImg img{
		width:100%;
		max-width:199px;
	}

	.subPage #s01 .content ul.meritList li{
		font-size:20px;
		margin-right:0;
	}

	.subPage #s01 .content .tekisei .box{
		width:100%;
	}

	.subPage #s01 .content .tekisei .kekka img{
		width:100%;
	}

	input.name,
	input.kana,
	input.mail,
	input.mail2,
	input.tel{
	    width: 92%;
	}

	select{
		width:99%;
	}

	textarea{
		width:92%;
	}

	.submit_btn {
    	width:100%;
    }

	  /* s02 */
		
	#wrapper #s02 .content,
	#wrapper #s02 .content2{
	  	padding:20px;
	  	padding-top:30px;
	}

	.subPage #s02 .content{
	  	padding:0 !important;
	  	padding-top:30px;
	}

	#wrapper #s02 .content h3 img,
	#wrapper #s02 .content2 h3 img{
	  	width:100%;
	}

	#wrapper #s02 .sp_center{
	  	text-align:center;
	}

	#wrapper .small_sankaku{
		left:40%;
	}

	#wrapper #s02 .multi .multiList{
		display:flex;
	}

	#wrapper #s02 .multi .multiList ul{
		flex-wrap:wrap;
		text-align:left;
	}

	#wrapper #s02 .multi .multiList ul li{
		width:49%;
		height:auto;
	}

	#wrapper #s02 .multi2 ul{
		margin-left:-10px;
	}

	#wrapper #s02 .multi2 ul li{
		width:100%;
		height:auto;
	}

	#wrapper #s02 .multi2 ul li img{
		display:none;
	}

	#wrapper #s02 .multi2 .ttlSp,
	#wrapper #s02 .multi2 .ttlSp2{
		background-color:#ccc;
		margin:0;
		padding:10px;
		font-size:20px;
	}

	#wrapper #s02 .multi2 .ttlSp{
		background-color:#90d4d7;
	}

	#wrapper #s02 .multi2 .ttlSp2{
		background-color:#fff799;
	}

	.subPage #s02 ul.mainMenu,
	.subPage #s02 ul.subMenu{
		flex-wrap:wrap;
		text-align:left;
		padding-left:5px !important;
	}

	/* s03 */


	#wrapper #s03 .content {
		  padding: 10px 30px 40px 30px;
	}

	#wrapper #s03 .content h2{
		  margin-top:10px;
	}


	#wrapper #s03 .content .allow{
		  width:40px;
	}

	/* s04 */

	#wrapper #s04 .content p{
		padding:0 10px;
		margin-top:0;
		margin-bottom:50px;
		font-size:20px;
	}

	#wrapper #s04 .content p img{
		text-align:center;
		width:100%;
	}

	/* s05 */
	#wrapper #s05 .content .agreement,
	#wrapper #s05 .content .customer{
		width:100%;
		display:block;
	}

	#wrapper #s05 .content .customer h2 img{
		width:256px;
	}

	/* s06 */
	.anm{
		width:100%;
		background-position: center; 
	}

	#wrapper #s06 .floatBox2 .floatLeft, 
	#wrapper #s06 .floatBox2 .floatRight{
		width:100%;
		float:none;
	}

	#wrapper #s06 .floatBox2 .floatLeft img, 
	#wrapper #s06 .floatBox2 .floatRight img{
		width:90%;
	}

	/* footer */
	
	footer .content{
		display:block;
	}

	footer .content .logo,
	footer .content .address,
	footer .content .menu,
	footer .content .company{
		display:block;
		vertical-align: top;
	}

	footer .footerBnr{
		width:90%;
	}


}