@charset "utf-8";

/**
 *
 *  メニューページ　モーダルcss
 *
 */

/*--------------------------------------------------------------------------
   overwrite  - 共通CSSの上書き -
---------------------------------------------------------------------------*/


/*--------------------------------------------------------------------------
   html
---------------------------------------------------------------------------*/
html body{
	position: relative;
}


/*--------------------------------------------------------------------------
   modal-menu
---------------------------------------------------------------------------*/

#modal-menu{
	visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	width: 100%;
	height: 100%;
	z-index: 10000;
}
#modal-menu .bg{
	position: absolute;
	width: 100%;
	height: 100%;
	background: #20211F;
	opacity: .7;
 -webkit-transition: all 200ms cubic-bezier(0.47, 0, 0.745, 0.715);
  transition:         all 200ms cubic-bezier(0.47, 0, 0.745, 0.715);
	z-index: 9900;
}
#modal-menu .modal-cont-wrap{
	overflow: hidden;
	position: relative;
	width: 100%;
	height: 100%;
}
#modal-menu .modal-cont{
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 640px;
	z-index: 10000;
	filter: inherit;
}
#modal-menu .inner-wrap{
	position: relative;
}
#modal-menu .inner{
	overflow: hidden;
	position: relative;
}
#modal-menu .modal-cont .inner{
	background:  #FFF;
}
#modal-menu .modal-cont .item-list{
	position: relative;
	margin: 0 auto;
}
#modal-menu .modal-cont .item{
	visibility: hidden;

}
#modal-menu.active .modal-cont .item{
	visibility: visible;
}
#modal-menu .btn-close{
	position: absolute;
	display: inline-block;
	top: -45px;
	right: 0;
}
#modal-menu .btn-close a{
	display: block;
	overflow: hidden;
	width:  36px;
	height:  36px;
	background: url(../../shared/images/ico_modal_close.png) no-repeat;
	text-indent: -9999px;
	white-space: nowrap;
}
#modal-menu .btn-close a:hover{
	background-image: url(/shared/images/ico_modal_close_on.png);
}

/* prev,next */
#modal-menu .prev,
#modal-menu .next{
	position: absolute;
	top: 270px;
	width: 100px;
	height: 100px;
	z-index: 1;
}
#modal-menu .prev{
	left: -50px;
}
#modal-menu .next{
	right: -50px;
}
#modal-menu .prev a,
#modal-menu .next a{
 	-webkit-border-radius: 50px;
 	border-radius: 50px;
	display: block;
	width: 100px;
	height: 100px;
	background: #FFF;
}
#modal-menu .prev img,
#modal-menu .next img{
	-webkit-box-sizing :border-box;
	box-sizing :border-box;
	margin-bottom: 50px;
 	border-radius: 50px;
	width: 100px;
	height: 100px;
	border: solid 2px #B61D1F;
}
#modal-menu .prev a:hover img,
#modal-menu .next a:hover img{
	border-color: #000;
}
#modal-menu .prev a.off,
#modal-menu .next a.off{
	display: none;
}

/* pointer */
#modal-menu .pointer{
	-webkit-box-sizing :border-box;
	box-sizing :border-box;
	position: absolute;
	bottom: 0;
	width: 100%;
	padding: 0 50px;
}
#modal-menu .pointer ul{
	width: 100%;
	text-align: center;
}
#modal-menu .pointer ul li{
	display: inline-block;
	width: 11px;
	height: 11px;
}
#modal-menu .pointer ul li a{
	overflow: hidden;
	display: block;
	width: 100%;
	width: 11px;
	height: 11px;
	background: url(../images/index/bg_pager.png) no-repeat;
	font-size: 0;
	text-indent: -9999px;
	text-indent: 100%;
}
#modal-menu .pointer ul li a.active,
#modal-menu .pointer ul li a:hover{
	background: url(../images/index/bg_pager_on.png) no-repeat;
}

/* @SP */
@media all and (max-width: 767px) {
	#modal-menu .modal-cont{
		width: 100%;
		max-width: 375px;
		padding: 13px;
		margin: 0 auto;
	}
	#modal-menu .inner-wrap{
		margin: 0 auto 0;
	}
	#modal-menu .pager{
		overflow: hidden;
		border-top: solid 1px #ccc;
	}
	/* prev,next */
	#modal-menu .prev,
	#modal-menu .next{
		-webkit-box-sizing :border-box;
		box-sizing :border-box;
		position: static;
		float: left;
		width: 50%;
		height: 50px;
		margin-bottom: 0;
		background: #FFF;
		z-index: 1;
	}
	#modal-menu .prev a,
	#modal-menu .next a{
		-webkit-box-sizing :border-box;
		box-sizing :border-box;
		display: block;
		width: 100%;
		height: 100%;
		padding: 5px 10px;
		vertical-align: middle;
	}
	#modal-menu .prev{
		left: 0;
		text-align: left;
	}
	#modal-menu .next{
		right: 0;
		text-align: right;
	}
	#modal-menu .prev{
		border-right: solid 1px #ccc;
	}
	#modal-menu .prev a,
	#modal-menu .next a{
	 	-webkit-border-radius: 0;
	 	border-radius: 0;
		display: block;
		background: none;
		font-weight: bold;
	}
	#modal-menu .prev img,
	#modal-menu .next img{
		margin-bottom: 0;
		border-radius: 0;
		width: 40px;
		height: 40px;
		border: none;
		vertical-align: middle;
	}
	#modal-menu .prev a span:after{
		content: "前へ";
		display: inline-block;
		padding-left: 38px;
	}
	#modal-menu .next a span:before{
		content: "次へ";
		display: inline-block;
		padding-right: 38px;
	}
	#modal-menu .btn-close{
		top: -36px;
	}
	#modal-menu .btn-close a{
		width: 32px;
		height: 32px;
		background: url(../../shared/images/ico_modal_close_sp.png) no-repeat;
		background-size: 32px 32px;
	}
	#modal-menu .btn-close a:hover{
		background-image: url(/shared/images/ico_modal_close_sp.png);
	}
}

/*--------------------------------------------------------------------------
   modal-cont
---------------------------------------------------------------------------*/

#modal-menu .modal-cont .inner{
	position: relative;
	width: 640px;
	margin:0 auto;
}
#modal-menu .modal-cont .inner .item-list{
	position: absolute;
	top: 0;
	left: 0;
	width: 640px;
	height: 640px;
}
/* item
-----------------------------------------------------------------*/
#modal-menu .modal-cont .inner .item-list .item{
	-webkit-box-sizing :border-box;
	box-sizing :border-box;
	float: left;
	position: relative;
	width: 640px;
	min-height: 640px;
	padding: 0 20px;
	text-align: center;
	word-break: break-all;
}
#modal-menu .modal-cont .inner .item-list .item:before{
	content: "";
	display: block;
	height: 20px;
}
#modal-menu .modal-cont .inner .item-list .item:after{
	content: "";
	display: block;
	height: 20px;
}
#modal-menu .modal-cont .inner .item-list .item .cate{
	text-align: left;
}
#modal-menu .modal-cont .inner .item-list .item .ttl{
	margin-top: 31px;
	font-size: 25px;
	font-weight: bold;
	word-break: break-all;
}
#modal-menu .modal-cont .inner .item-list .item .price{
	font-size: 14px;
}
#modal-menu .modal-cont .inner .item-list .item .img img{
	width: 270px;
	height: 270px;
}
#modal-menu .modal-cont .inner .item-list .item .txt{
	margin-top: 60px;
	padding-bottom: 40px;
	font-size: 14px;
}
#modal-menu .modal-cont .inner .item-list .item .btn{
	position: absolute;
	right: 20px;
	bottom: 20px;
}
#modal-menu .modal-cont .inner .item-list .item .btn a{
	padding: 2px 26px;
}
#modal-menu .modal-cont .inner .item-list .item .btn a span{
	padding-left: 16px;
	background: url(/shared/images/ico_arw06.png) no-repeat 0 47%;
	background-size: 6px auto;
}

/* @SP */
@media all and (max-width: 767px) {
	#modal-menu .modal-cont .inner{
		width: 100%;
	}
	#modal-menu .modal-cont .inner .item-list{
		width: 100%;
	}
	#modal-menu .modal-cont .inner .item-list .item{
		width: 100%;
		min-height: inherit;
		padding: 0 13px;
	}
		#modal-menu .modal-cont .inner .item-list .item:before{
		content: "";
		display: block;
		height: 14px;
	}
	#modal-menu .modal-cont .inner .item-list .item:after{
		content: "";
		display: block;
		height: 17px;
	}

	#modal-menu .modal-cont .inner .item-list .item .cate{
		border-bottom-color: #A9151A;
	}
	#modal-menu .modal-cont .inner .item-list .item .ttl{
		margin-top: 22px;
		font-size: 19px;
		line-height: 1.4;
	}
	#modal-menu .modal-cont .inner .item-list .item .price{
		font-size: 9px;
	}
	#modal-menu .modal-cont .inner .item-list .item .img{
		width: 100%;
		max-width: 200px;
		height: auto;
		margin: 0 auto;
	}
	#modal-menu .modal-cont .inner .item-list .item .img img{
		width: 100%;
		height: auto;
	}
	#modal-menu .modal-cont .inner .item-list .item .txt{
		margin-top: 8px;
		padding-bottom: 0;
		font-size: 9px;
	}
	#modal-menu .modal-cont .inner .item-list .item .btn{
		position: static;
		margin-top: 10px;
		font-size: 9px;
	}
	#modal-menu .modal-cont .inner .item-list .item .btn a{
		border: none;
	}
	#modal-menu .modal-cont .inner .item-list .item .btn a span{
		padding: 0;
		background: none;
		text-decoration: underline;
	}
}