@charset "utf-8";

/* Icons */
/*@font-face{
    font-family: 'slick';
    font-weight: normal;
    font-style: normal;

    src: url('./fonts/slick.eot');
    src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg');
}*/
html { 
	font-size: 11.5px; 
	font-size: calc(100vw / 32); 
	}
html.ios { 
	font-size: 11.5px; 
	}
body { 
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; 
	color: #000; 
	-webkit-text-size-adjust: 100%; 
	line-height: 1.1; 
	letter-spacing: 0; 
	padding-bottom: 3px; 
	}
.wrapper { 
	margin: 0 auto; 
	max-width: 890px; 
	display: block; 
	}
* { 
	letter-spacing: normal; 
	line-height: 1; 
	list-style: none; 
	text-decoration: none; 
	box-sizing: border-box; 
	margin: 0; 
	padding: 0; 
	}
img { 
	width: 100%; 
	height: auto; 
	display: block; 
	-ms-interpolation-mode: bicubic; 
	padding: 10px;
	}
a,a:hover{ 
	color: #000; 
	-webkit-tap-highlight-color:transparent; 
	}
.pc { 
	display: none !important; 
	}
.sp { 
	display: block !important; 
	} 

/* related */
.related { 
	padding: 0 0.5rem; 
	margin-bottom: 0rem; 
	}
.related::-webkit-scrollbar { 
	display: none; 
	}
.related ul { 
	padding: 0 0 0.5rem; 
	font-size: 0; 
	}

.related ul li { 
	padding: 0.5rem; 
	margin: 0.5rem 0; 
	position: relative; 
	display: inline-block; 
	vertical-align: top; 
	color: #444; 
	}
.related ul li .item_name,.related ul li .item_cate { 
	text-overflow: ellipsis; 
	overflow: hidden; 
	white-space: nowrap; 
	}
.related.few3 ul li { 
	width: 33.33%; 
	}
.related.few2 ul li { 
	width: 50%; 
	}
.recommended .item_price .red { 
	vertical-align: 0.28rem; 
	}
#optionList { 
	padding: 0; 
	}
#optionList ul { 
	padding: 1rem 0 0.5rem; 
	white-space: normal; 
	}
#optionList ul li { 
	padding: 0; 
	margin: 0 0 1rem 1rem; 
	width: calc(50% - 1.5rem); 
	}
#optionList ul li:last-child { 
	margin-right: 0.5rem; 
	}
.related ul li,#alsoList ul li { 
	padding: 0.5rem 0.5rem 0; 
	margin: 0.5rem 0 0; 
	}
.paginavi { 
	position: relative;
	 }
.paginavi .swiper-pagination-bullets { 
	/* margin: 3.7rem auto 2.4rem;  */
	margin: 30px auto 30px;
	display: table; 
	z-index: 9999; 
	}
.paginavi .swiper-pagination-bullets .swiper-pagination-bullet { 
	border-radius: 50%; 
	margin: 0.3rem; 
	width: 0.5rem; 
	height: 0.5rem; 
	background: #666; 
	}
.paginavi .swiper-pagination-bullets .swiper-pagination-bullet-active { 
	background: #333 
	}

.prev1:after,.prev2:after  { 
	display: inline-block; 
	color: #666; 
	font-size: 30px; 
	font-weight: bold;
	content: "←"; 
	font-family: 'slick';
}
.next1:before,.next2:before  {
	 display: inline-block; 
	 color: #666; 
	 font-size: 30px; 
	 font-weight: bold;
	 content: "→"; 
	 font-family: 'slick';
	}

.swiper-button-disabled { 
	opacity: 0.9; 
	}

.paginavi .prev1,.paginavi .prev2 { 
	position: absolute; 
	left: 0.5rem; 
	border-radius: 50%;
	display: block; 
	top: -250%;
	cursor: pointer; 
	text-align: center; 
	width: 28px;
	height: 28px;
	background-color: none;
	z-index: 20;
	}
.paginavi .next1,.paginavi .next2 { 
	position: absolute; 
	right: 0.5rem; 
	border-radius: 50%;
	display: block; 
	top: -250%;
	cursor: pointer; 
	text-align: center; 
	width: 28px;
	height: 28px;
	background-color: none;
	z-index: 20;
	}
@media screen and (-webkit-min-device-pixel-ratio:0){
	.paginavi .prev1,.paginavi .prev2 { 
		top:-260px;
		}
	.paginavi .next1,.paginavi .next2 { 
		top:-260px;
		}
}
@-moz-document url-prefix(){
	.paginavi .prev1,.paginavi .prev2 { 
		top:-240px;
		}
	.paginavi .next1,.paginavi .next2 { 
		top:-240px;
		}
}

.next1:after,.next2:after { 
	display: inline-block; 
	width: 0.4rem; 
	vertical-align: -0.01rem; 
	height: 1rem; 
	margin-left: 0.5rem;
	}
.f_size {
		font-size: 15px;
	}

li.swiper-slide {
		height: 340px;
	}
	 /* タブレット */
@media(max-width: 834px) and (min-width: 415px) {
	.paginavi{
		top: -200px;
	}
	.paginavi .swiper-pagination-bullets{
		margin: 7rem auto 2.4rem;
	}
	li.swiper-slide {
		height: 400px;
	}
	.paginavi .prev1,.paginavi .prev2 { 
		top: -65%;
		z-index: 100;
	}
	.paginavi .next1,.paginavi .next2 {
		top: -65%;
		z-index: 100;
	}
}
@media screen and (-webkit-min-device-pixel-ratio:0) and (max-width: 834px) and (min-width: 415px){
	.paginavi .swiper-pagination-bullets{
		margin: 10rem auto 2.4rem;
	}
	.paginavi .prev1,.paginavi .prev2 { 
		top:-220px;
		}
	.paginavi .next1,.paginavi .next2 { 
		top:-220px;
		}
}
@-moz-document url-prefix() and (max-width: 834px) and (min-width: 415px){
	.paginavi .prev1,.paginavi .prev2 { 
		top:-120px;
		}
	.paginavi .next1,.paginavi .next2 { 
		top:-120px;
		}
}

@media(min-width: 1px) and (max-width: 320px){
	.paginavi .prev1,.paginavi .prev2 { 
		top: -172%;
		z-index: 100;
	}
	.paginavi .next1,.paginavi .next2 {
		top: -172%;
		z-index: 100;
	}
	li.swiper-slide {
		height: 170px;
	}
}
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-width: 1px) and (max-width: 320px){
	.paginavi .swiper-pagination-bullets{
		margin: 2.4rem auto 1.4rem;
	}
	.paginavi .prev1,.paginavi .prev2 { 
		top:-175px;
		}
	.paginavi .next1,.paginavi .next2 { 
		top:-175px;
		}
}
@-moz-document url-prefix() and (min-width: 1px) and (max-width: 320px){
	.paginavi .prev1,.paginavi .prev2 { 
		top:-135px;
		}
	.paginavi .next1,.paginavi .next2 { 
		top:-135px;
		}
}

 @media(min-width: 321px) and (max-width: 414px){
	.paginavi .prev1,.paginavi .prev2 { 
		top: -160%;
		z-index: 100;
	}
	.paginavi .next1,.paginavi .next2 {
		top: -162%;
		z-index: 100;
	}
	li.swiper-slide {
		height: 170px;
	}
}
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-width: 321px) and (max-width: 414px){
	.paginavi .swiper-pagination-bullets{
		margin: 2rem auto 1.4rem;
	}
	.paginavi .prev1,.paginavi .prev2 { 
		top:-160px;
		}
	.paginavi .next1,.paginavi .next2 { 
		top:-160px;
		}
}
@-moz-document url-prefix() and (min-width: 321px) and (max-width: 414px){
	.paginavi .prev1,.paginavi .prev2 { 
		top:-130px;
		}
	.paginavi .next1,.paginavi .next2 { 
		top:-130px;
		}
}
