@charset "utf-8";
body {min-width:100%;}

/* SP HEADER -----------------------------------------------------------------------------------------*/
#sp_head {
    position: fixed; top: 0; right: 0;
	width: 100%; z-index: 9999;
	background: #fff;
	overflow: hidden;
	border-bottom: 1px solid #999;
}
#sp_head p { margin: 0; padding: 0;}
#sp_head .sp_logo {float: left;}
#sp_head .sp_logo a {
	display: block;
	width: 175px; height: 60px;
	text-indent: -9999px;
	background: url("./logo.png") no-repeat center center;
	background-size: auto 40px;
}
#sp_head .sp_btn { float: right;}
#sp_head .sp_btn p { 
	float: left;
	margin: 5px 5px 0;
	text-align: center;
	box-sizing: border-box;
}
#sp_head .sp_btn p span,
#sp_head .sp_btn p a {
	display: block;
	padding: 35px 0 0;
	width: 50px; height: 45px;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	color: #006934;
	font-size: 10px;
	font-weight: bold;
	letter-spacing: 0;
	box-sizing: border-box;
}
#sp_head .btn_search a { 
	background: url("./btn_search.png") no-repeat center 5px;
	background-size: auto 33px;
}
#sp_head .btn_cart a {
	background: url("./btn_cart.png") no-repeat center 5px;
	background-size: auto 33px;
}
#sp_head  #toggle span {
	background: url("./btn_nav.png") no-repeat center 5px;
	background-size: auto 33px;
}
#sp_head .btn_cart { position: relative;}
#sp_head .btn_cart b {
	position: absolute; top: 0; right: 0;
	display: block;
	width: 17px; height: 17px;
	color: #fff;
	text-align: center;
	border-radius: 15px;
	background: #F14A00;
}
#toggle { z-index: 1000; cursor: pointer;}

/* SP CONTENT -----------------------------------------------------------------------------------------*/
#main { position: relative; padding-top: 61px;}
.is-open { overflow: hidden;}
.is-open #nav-content { z-index: 9999; transform: translateX(0);}
.overlay { position: relative; height: 100vh;}
.overlay::before {
	display: block; clear: both; content:"";
	position: absolute; top: 0; left: 0;
	width: 100vw; height: 100vh;
	background: rgba(0,0,0,0.5) !important; 
}

#nav-content {
    position: fixed; top: 61px; right: 0;
    width:70% !important; min-width: 280px;
    height:calc(100% - 61px);
    font-size: 14px;
    background: #E5E5E5;
    transform: translateX(100%);
    transition:  transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);
    z-index: 999;
    overflow-y:scroll;
}
#nav-content  p,
#nav-content  ul,
#nav-content  ul li { margin: 0; padding: 0; list-style: none;}
#nav-content a {
  display: block;
  color: #4D4D4D;
  text-decoration: none;
  transition: opacity .6s ease;
}
#nav-content a:hover { color: #006934 !important;}

/* SP NAV1 */
#nav-content .spnav1 { position: relative;  padding: 30px 5px 35px; background: #fff;}
#nav-content .spnav1 .spnav_close {
	position: absolute; top: 5px; right: 5px;
	width: 25px; height: 25px;
	text-indent: -9999px;
	background: url("./close.png") no-repeat;
	background-size: 100% auto;
	cursor: pointer;
}
#nav-content .spnav1 p { margin: 8px 0 0;}
#nav-content .spnav1 p a {
	padding: 10px ;
	color: #707070;
	text-align: center;
	border: 1px solid #707070;
}
#nav-content .spnav1 p.btn_login { 
	background: url("./btn_login.png") no-repeat 10px center;
	background-size: auto 18px;
}
/*
#nav-content .spnav1 p.btn_entry { 
	background: url("./btn_entry.png") no-repeat 10px center;
	background-size: auto 18px;
}*/
#nav-content .spnav1 p.btn_about { 
	background:#919191 url("./btn_wood.png") no-repeat 10px center;
	background-size: auto 18px;
}
#nav-content .spnav1 p.btn_about a { 
	color: #fff;
	background: url("./arrow_w.png") no-repeat 97% center;
	background-size: auto 11px;
 }
#nav-content .spnav1 p.btn_about:hover { background-color:#ccc;}

/* SP NAV2 */
#nav-content .spnav2 {  padding: 10px 5px;}
#nav-content .spnav2 p { margin: 0 0 5px;  text-align: center; font-size: 11px;}
#nav-content .spnav2 .search-box { position: relative;}
#nav-content .spnav2 input[type="text"] { border: 1px solid #707070;}
#nav-content .spnav2 button { 
	position: absolute; top: 0; right: 0;
	width: 30px; height: 30px;
	text-indent: -9999px;
	background: url("./btn_search.png") no-repeat center center;
	background-size:85%;
	border: none;
}

/* SP NAV3 */
#nav-content .spnav3 { padding:  0 0 10px;}
#nav-content .spnav3 p {
	padding: 10px;
	text-align: center;
	background:#fff url("./open.png") no-repeat 95% center;
	background-size: auto 11px;
	cursor: pointer;
}
#nav-content .spnav3 p:hover { background-color:#eee;}
#nav-content .spnav3 ul li+li { border-top:1px solid #ddd;}
#nav-content .spnav3 ul li ul { display: none;}
#nav-content .spnav3 ul li ul li.cate {
	padding: 10px;
	color: #fff;
	text-align: center !important;
	background: #919191;
}
#nav-content .spnav3 ul li ul li+li {  border-top:1px dashed #707070;}
#nav-content .spnav3 ul li ul li.cate+li { border-top:none;}
#nav-content .spnav3 ul li ul li a { padding: 10px; background: #fff;}
#nav-content .spnav3 .sp_brand ul { overflow: hidden;}
#nav-content .spnav3 .sp_brand ul li {float: left; width: 50%; border: none;}
#nav-content .spnav3 .sp_brand ul li a { padding: 0; background: none;}
#nav-content .spnav3 .sp_brand ul li a img { width: 100%; height: auto;}
#nav-content .spnav3 .sp_brand ul li a:hover img { opacity: 0.6;}
#nav-content .spnav3 .sp_brand ul li a span { display: block; text-align:center;}
#nav-content .spnav3 .sp_brand ul li a span+span { padding:0px 0 5px; font-size: 10px;}
#nav-content .spnav3 .sp_category ul li {  padding: 0; text-align: left;}
#nav-content .spnav3 .sp_category ul li a {  position: relative; padding-left: 50px;}
#nav-content .spnav3 .sp_category ul li img {
	position: absolute; top:0; bottom: 0; left: 10px;
	margin: auto; width: 30px; height: auto;
}
#nav-content .spnav3 .sp_category ul li.giftbana a { padding: 0;}
#nav-content .spnav3 .sp_category ul li.giftbana a img { position: static; width: 100%; height: auto;}
#nav-content .spnav3 .sp_fee ul li a { text-align: center;}

/* SP NAV4 */
#nav-content .spnav4 p a {
	padding: 10px;
	text-align: center;
	background:#fff url("./arrow_b.png") no-repeat 95% center;
	background-size: auto 11px;
}
#nav-content .spnav4 p a:hover { background-color:#eee;}
#nav-content .spnav4 p+p{ border-top:1px solid #ddd;}

/* SP NAV5 */
#nav-content .spnav5 { padding: 10px 0 40px; font-size: 10px; text-align: center;}


/* SP SNS */
#nav-content .spsns { margin:0 auto; padding:0 0 40px; width: 170px; overflow: hidden;}
#nav-content .spsns p { float: left;}
#nav-content .spsns p+p { margin-left:5px;	}
#nav-content .spsns img { width: 30px; height: auto;}