@charset "utf-8";
.sp {
    display: none
}

.pc {
    display: block
}

.br-sp {
    display: none;
}

@media screen and (max-width: 716px) {
    .site-wrap {
        overflow: hidden;
    }
    .sp {
        display: block !important;
    }
    .pc {
        display: none !important;
    }
    .br-sp {
        display: block !important;
    }
    body {
        width: 100%;
        min-width: 100%;
        position: relative;
        left: 0;
        overflow-x: hidden;
    }
    .container {
        width: 100%;
        max-width: 100%;
        min-width: 100%;
    }
    #header #h_logo {
        text-align: center;
        width: auto;
        padding: 4%;
        padding-left:15%;
        padding-right:19%;
    }
    #header .header_inner #h_logo img {
        max-width: 100%;
        height: auto;
        margin: 0 auto;
    }
    #header .inner {
        padding: 0 5px;
    }
    #hnav {
        width: 100%;
    }
    #hnav ul {
        width: 100%;
        display: table;
        border-collapse: separate;
        border-spacing: 2px 0;
    }
    #hnav ul li {
        display: table-cell;
        float: none;
        height: 40px;
        vertical-align: middle;
        text-align: center;
    }
    #hnav li.hnav02 a,
    #hnav li.hnav03 a,
    #hnav li.hnav04 a {
        line-height: 1.5;
        padding-left: 22px;
        padding-right: 0px;
    }
    #hnav li.hnav02 a {
        background-size: 16px 16px;
        background-position: 3px center;
    }
    #hnav li.hnav03 a {
        background-size: 18px 18px;
        background-position: 3px center;
    }
    #hnav li.hnav04 a {
        background-size: 16px 16px;
        background-position: 3px center;
    }
    .h_contact {
        display: table;
        width: 100%;
    }
    .h_contact li{
        display: table-cell;
        vertical-align: top;
        float: none;
    }
    .h_contact li:nth-child(1){
        width: 53%;
        padding: 0 1%;
    }
    .h_contact li:nth-child(2){
        padding: 0 1%;
    }
    .h_contact li:nth-child(3){
        width: 35%;
        padding: 0 1%;
    }
    .h_tel {
        width: auto;
        margin: 0;
    }
    .tap{
        margin-top: 5px;
        padding-left: 3em;
        font-size: 1.0rem;
        background: url(../common_img/ico_mobile_tap.png) no-repeat 2em center;
        background-size: auto 100%;
    }
    .h_email {
        width: auto;
        margin: 0;
    }
    .h_deliver {
        width: auto;
        margin: 0;
    }
    /* header */
    #mobile-head .nav_head {
        background: #e6e6e6;
        height: 50px;
        line-height: 50px;
				position:relative;
    }
    #mobile-head .nav_head  p{
        line-height: 50px;
        text-align: center;
				position:absolute;
				left:50px;
    }
    #mobile-head .nav_head .panel{
		position: absolute;
		top: 50px;
		left: 0;
		z-index: 999;
		width: 100%;
        background: #e6e6e6;
    }
    #mobile-head .nav_head .panel li{
		text-align: left;
		border-bottom:1px solid #000;
    }
    #mobile-head .nav_head .panel li a{
		display: block;
		padding: 10px;
    }
    /* Toggle Button */
    .nav-toggle {
        display: block;
        width: 46px;
        height: 46px;
        padding:14px 10px;
        cursor: pointer;
        z-index: 101;
        box-sizing: border-box;
    }
		.nav-toggle:before{
			content:"";
			position:absolute;
			left:0;
			right:0;
			top:0;
			bottom:0;	
		}
   .nav-toggle div {
	   position: relative;
    }
   .nav-toggle p {
    }
    .nav-toggle span {
        display: block;
        position: absolute;
        height: 3px;
        width: 100%;
        left: 0;
        -webkit-transition: .35s ease-in-out;
        -moz-transition: .35s ease-in-out;
        transition: .35s ease-in-out;
    }
    #mobile-head .nav-toggle span {
        background: #a3a3a3;
    }
    .nav-toggle span:nth-child(1) {
        top: 0;
    }
    .nav-toggle span:nth-child(2) {
        top: 9px;
    }
    .nav-toggle span:nth-child(3) {
        top: 18px;
    }
    .panel {
		display: none;
        position: relative;
    }
    /* .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);
    }
    /* .spnav スライドアニメーション */
    .open .spnav {}
	
	.footer {
		padding: 10px 0 0 ;
	}
	.footer #h_logo {
		float: left;
		width: 55%;
		padding: 10px;
		box-sizing: border-box;
	}
	.footer .h_contact {
		float: right;
		width: 40%;
		padding: 5px;
		box-sizing: border-box;
	}
	.foote .h_contact ul li img{
		width:100%;
		height: auto;
	}
	.footer .inner {
		padding: 10px 0 0;
		background: #ff9000;
	}
	.footer #hnav ul li {
		background: #fff;
	}
	.footer #hnav {
		border-bottom: none;
	}
    #footer {
        position: relative;
        padding: 20px 30px;
    }
    .fnav {
        float: none;
        width: 100%;
        border-left: none;
    }
    .fnav ul {
        margin: 0 0 20px;
        padding: 0;
    }
    .fnav ul li {
        float: none;
    }
	.fnav ul ul {
		margin-right: 20px;
	}
    #footer .sns {
        position: relative;
        overflow: hidden;
    }
}