@charset "utf-8";

#item_menu {
	position: fixed;
	bottom: -100%;
	width: 100vw;
	max-width: 640px;
	transition: 0.5s;
	z-index: 200;
}

#wrapper .slick-arrow { 
	display: none; 
}

#item_menu.isOpen {
	bottom: 120px;
	transition: 0.5s;
}
	
	#item_menu .item_slider .slick-slide > div {
		margin: 0 2.5%;
	}

	#item_menu .item_slider li {
		background: rgba(0,0,0,0.8);
		padding: 16px;
		border-radius: 12px; 
		box-sizing: border-box;
		height: 248px;
	}
	
		#item_menu .item_slider li .item_header {
			margin: 0 0 12px;
		}
		
			#item_menu .item_slider li .item_header .img {
				float: left;
				margin: 0 15px 0 0;
			}
			
			#item_menu .item_slider li .item_header .textbox {
				float: left;
				width: calc(100% - 92px);
			}
			
			#item_menu .item_slider li .item_header .textbox h2 {
				font-size: 14px;
				line-height: 140%;
				max-height: 40px;
				color: #fff;
				font-family: 'Noto-Sans-JP-Medium';
				margin: 0 0 10px;
				-ms-overflow-style: none; 
				scrollbar-width: none;
			}
			
			#item_menu .item_slider li .item_header .textbox .price {
				font-size: 16px;
				line-height: 120%;
				color: #fff;
				font-family: 'Noto-Sans-JP-Medium';
			}
	
		#item_menu .item_slider li .detail {
			font-size: 12px;
			color: #fff;
			font-family: 'Noto-Sans-JP-Light';
			line-height: 140%;
			height: 70px;
			margin: 0 0 17px;
			-ms-overflow-style: none; 
			scrollbar-width: none;
		}
		
		#item_menu .item_slider li .shopping_bar {
			
		}
		
		#item_menu .item_slider li .shopping_bar select {
			float: left;
			appearance: none;
			outline: none;
			border: none;
			background: url(../images/live/select_arrow.svg) no-repeat 84% center #fff;
			background-size: 14px;
			padding: 6px 24px 6px 8px;
			border-radius: 5px; 
			font-size: 14px;
		}

		#item_menu .item_slider li .shopping_bar input[type="submit"] {
			float: right;
			background: url(../images/live/cart.svg) no-repeat 12px center #ea4a62;
			background-size: 20px;
			font-size: 12px;
			color: #fff;
			font-family: 'Noto-Sans-JP-Medium';
			padding: 8px 20px 10px 40px;
			border-radius: 1000px; 
		}

		#item_menu .item_slider li .shopping_bar button {
			overflow: hidden;
			float: right;
			font-size: 12px;
			color: #fff;
			font-family: 'Noto-Sans-JP-Medium';
			padding: 0 15px;
			height: 35px;
			border-radius: 1000px; 
			background: #ea4a62;
			display: block;
			position: relative;
			width: 150px;
		}

		#item_menu .item_slider li .shopping_bar button span {
		
			position: absolute;
			display: inline-block;
			background: url(../images/live/cart.svg) no-repeat 12px center;
			background-size: 20px;
			height: 20px;
			line-height: 20px;
			width: 100%;
			box-sizing: border-box;
			padding: 0 0 0 20px;
			left: 0; 
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
			
			-webkit-transform: translateZ(0);
			-moz-transform: translateZ(0);
			-ms-transform: translateZ(0);
			-o-transform: translateZ(0);
			transform: translateZ(0);
			-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
			-webkit-transition: -webkit-transform .3s;
			-moz-transition: -moz-transform .3s;
			transition: transform .3s;
		}
		
		#item_menu .item_slider li .shopping_bar button.is-added span
		{
			color:transparent;
			 -webkit-transform:translateX(-100%);
			 -moz-transform:translateX(-100%);
			 -ms-transform:translateX(-100%);
			 -o-transform:translateX(-100%);
			 transform:translateX(-100%);
			 -webkit-transition:-webkit-transform 0s;
			 -moz-transition:-moz-transform 0s;
			 transition:transform 0s;
		}
		
		#item_menu .item_slider li .shopping_bar button.is-added svg
		{
		 -webkit-transform:translateX(-50%) translateY(-50%);
		 -moz-transform:translateX(-50%) translateY(-50%);
		 -ms-transform:translateX(-50%) translateY(-50%);
		 -o-transform:translateX(-50%) translateY(-50%);
		 transform:translateX(-50%) translateY(-50%);
		 -webkit-transition:-webkit-transform 0s;
		 -moz-transition:-moz-transform 0s;
		 transition:transform 0s;
		}

		#item_menu .item_slider li .shopping_bar button svg
		{
			position: absolute;
			left: 50%;
			top: 50%;
			width: 100%;
			-webkit-transform: translateX(50%) translateY(-50%);
			-moz-transform: translateX(50%) translateY(-50%);
			-ms-transform: translateX(50%) translateY(-50%);
			-o-transform: translateX(50%) translateY(-50%);
			transform: translateX(50%) translateY(-50%);
			-webkit-transition: -webkit-transform .3s;
			-moz-transition: -moz-transform .3s;
			transition: transform .3s;
		}
		
		#item_menu .item_slider .procedure {
			position: relative;
		}
		
		#item_menu .item_slider .procedure div {
			position: absolute; 
			top: 50%; 
			left: 50%; 
			-webkit-transform: translate(-50%, -50%); 
			transform: translate(-50%, -50%);
			width: 100%;
			padding: 16px;
			box-sizing: border-box;
			text-align: center;
		}
		
		#item_menu .item_slider .procedure h3 {
			font-size: 14px;
			color: #fff;
			text-align: center;
			font-family: 'Noto-Sans-JP-Medium';
			line-height: 170%;
			padding: 0 0 30px;
		}
		
		#item_menu .item_slider .procedure input[type="button"] {
			appearance: none;
			outline: none;
			border: none;
			background: #16a397;
			font-size: 14px;
			color: #fff;
			font-family: 'Noto-Sans-JP-Medium';
			text-align: center;
			padding: 10px 50px;
			border-radius: 1000px;
		}