/*------------------------------------------------------------------------------
>>> TABLE OF CONTENTS:
--------------------------------------------------------------------------------
1.0.0.0 CONTENTS
	1.1.0.0 SLIDER
	1.2.0.0 CATEGORY ICON
	1.3.0.0 PRODUCT LIST
		1.3.1.0 RANKING LIST
		1.3.2.0 LONG LIST
		1.3.3.0 HALF GRID LIST
	1.4.0.0 CHIPS LIST
	1.5.0.0 BRAND
	1.6.0.0 FEATURE
2.0.0.0 PC WIDTH 1024px
	2.1.0.0 SLIDER
	2.2.0.0 CATEGORY ICON
	2.3.0.0 PRODUCT LIST
		2.3.1.0 RANKING LIST
		2.3.2.0 LONG LIST
		2.3.3.0 HALF GRID LIST
	2.4.0.0 CHIPS LIST
	2.5.0.0 BRAND
	2.6.0.0 FEATURE
------------------------------------------------------------------------------*/


/*------------------------------------------------------------------------------
// 1.0.0.0 INITIALIZE STYLE
// 1.0.0.0 CONTENTS
------------------------------------------------------------------------------*/
main .wrap{
	margin:0 auto;
}

/* HEADLINE ------------------------------------------------------------------*/
.link-headline{
	display:flex;
	padding:0 16px;
	align-items:center;
	justify-content:space-between;
}

.link-headline .button-border{
	margin:8px 0 0 auto;
}



/*--------------------------------------1.1.0.0 -----------------------SLIDER */
.slider-banner{
	width:100%;
	overflow:hidden;
}

.slider-banner ul{
	display:inline-flex;
}

.slider-banner li{
	margin:0 8px;
	width:40vw;
	max-width:500px;
	box-shadow:0 2px 3px rgba(0,0,0,0.2);
}

.slider-banner li.trans{
	opacity:.3;
}

/* SLIDE PANEL ---------------------------------------------------------------*/
.slide-panel{
	display:flex;
	padding:8px 0;
	align-items:center;
	justify-content:center;
}

/* SLIDE BUTTON --------------------------------------------------------------*/
#panel-left,
#panel-right{
	padding:8px;
	width:30px;
	height:30px;
	background:var(--accent);
	border-radius:50%;
	cursor:pointer;
	transition:.3s ease-in-out all;
}

#panel-left:hover,
#panel-right:hover{
	transform:scale(1.3);
}

/* SLIDE POSITION ------------------------------------------------------------*/
.slide-mater{
	display:flex;
	padding:8px 16px;
	justify-content:center;
}

.slide-mater div{
	margin-right:4px;
	width:4px;
	height:4px;
	background:#aaa;
	border:2px solid #fff;
	border-radius:50%;
	box-sizing:unset;
}

.slide-mater div.current{
	background:#c67178;
}


/*--------------------------------------1.2.0.0 ----------------CATEGORY ICON */
.category-icon{
	display:flex;
	margin:16px auto;
	padding:0 16px;
	flex-wrap:wrap;
	justify-content:center;
}

.category-icon li{
	margin:8px 8px 0 0;
	width:116px;
	height:116px;
	border:3px solid var(--main);
	border-radius:50%;
	overflow:hidden;
	text-align:center;
}

.category-icon li:last-child{
	margin-right:0;
}

.category-icon img{
	margin:8px auto 0;
	width:68px;
	height:68px;
}

.category-icon p{
	padding:8px;
	color:var(--back);
	background:var(--main);
}

.category-icon li:nth-last-child(2) p{
	padding-top:4px;
    font-size:11px;
}

/* .category-icon li:nth-child(8) p{
	font-size:12px;
} */


/*--------------------------------------1.3.0.0 -----------------PRODUCT LIST */

/* COMMON DESCRIPT AREA ------------------------------------------------------*/
.list-ranking .descript,
.list-grid .descript{
	padding:8px 16px 16px;
}

.list-ranking li:nth-of-type(n+2):nth-of-type(-n+5) .descript,
.list-grid li:nth-child(n+2):nth-child(-n+3) .descript{
	width:50%;
}
	
/* COMMON PRODUCT NAME -------------------------------------------------------*/
.list-ranking .name,
.list-long .name,
.list-grid .name{
	display:-webkit-box;
	margin-top:8px;
	height:34px;
	line-height:1.4;
	font-size:12px;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;
	overflow:hidden;
}

.list-ranking .name .coupon_alert,
.list-long .name .coupon_alert,
.list-grid .name .coupon_alert{
	display:inline-block;
	margin-right:4px;
	padding:2px;
	line-height:1;
	font-size:10px;
	color:var(--back);
	border-radius:9px;
	background:#1fcdb5;
}

/* COMMON PRICE --------------------------------------------------------------*/
.list-ranking .price,
.list-long .price,
.list-grid .price{
	margin-top:8px;
	font-size:16px;
}

.list-ranking .price s,
.list-long .price s,
.list-grid .price s{
	display:block;
	margin-bottom:8px;
	font-size:12px;
	text-decoration:line-through;
}


/*----------------------------------------1.3.1.0 ---------------RANKING LIST */
.list-ranking{
	display:grid;
	margin-top:32px;
	padding:0 16px;
	width:100%;
	grid-template-columns:repeat(auto-fill, calc((100vw - 32px) / 10));
}

.list-ranking li{
	position:relative;
	margin:4px;
	border-radius:8px;
	box-shadow:0px 3px 1px -2px rgba(0,0,0,.2), 0px 2px 2px 0px rgba(0,0,0,.14), 0px 1px 5px 0px rgba(0,0,0,.12);
	counter-increment:rank;
	grid-column:span 2;
	grid-row:span 1;
	overflow:hidden;
}

.list-ranking li:nth-child(1){
	grid-column:1/6;
	grid-row:1/3;
}

.list-ranking li:nth-child(2){
	grid-column:6/11;
	grid-row:1/2;
}

.list-ranking li:nth-child(3){
	grid-column:6/11;
	grid-row:2/3;
}

.list-ranking li:nth-child(4){
	grid-column:1/6;
	grid-row:3/4;
}

.list-ranking li:nth-child(5){
	grid-column:6/11;
	grid-row:3/4;
}

.list-ranking li a{
	display:flex;
}

.list-ranking li:nth-child(1) a,
.list-ranking li:nth-child(n+6) a{
	flex-direction:column;
}

.list-ranking li:nth-of-type(n+2):nth-child(-n+6) a{
	display:flex;
	align-items:flex-end;
}

/* RANKING NO. ---------------------------------------------------------------*/
.list-ranking li:nth-child(n+1):nth-child(-n+3)::before{
	display:block;
	position:absolute;
	top:4px;
	left:4px;
	width:60px;
	height:60px;
	z-index:2;
}

.list-ranking li:nth-child(1)::before{
	content:url('/img/pc/rank1.svg');
}

.list-ranking li:nth-child(2)::before{
	content:url('/img/pc/rank2.svg');
}

.list-ranking li:nth-child(3)::before{
	content:url('/img/pc/rank3.svg');
}

.list-ranking li:nth-child(n+4) a::before{
	content:counter(rank);
	position:absolute;
	top:8px;
	left:8px;
	width:30px;
	height:30px;
	line-height:30px;
	font-size:16px;
	color:var(--surface);
	background:#c45500;
	border-radius:50%;
	text-align:center;
	z-index:2;
}

/* THUMBNAIL -----------------------------------------------------------------*/
.list-ranking .thumb{
	position:relative;
}

.list-ranking li .thumb img{
	margin:auto;
	width:auto;
	height:119px;
}

.list-ranking li:nth-child(1) .thumb img{
	height:276px;
}

.list-ranking li:nth-child(n+2):nth-child(-n+3) .thumb img{
	height:187px;
}

/* MOVIE TAG -----------------------------------------------------------------*/
.list-ranking .thumb .movie_tag{
	position:absolute;
	right:8px;
	bottom:8px;
	padding:4px;
	font-size:10px;
	color:var(--back);
	border-radius:4px;
	background:#d61c4e;
}

.list-ranking .thumb .movie_tag::before{
	content:'\e896';
  font-family:"fontello";
  margin-right:3px;
  font-size:11px;
}


/* DESCRIPTION AREA ----------------------------------------------------------*/
.list-ranking .descript{
	display:flex;
	padding:8px 16px 16px;
	flex-direction:column;
	align-content:space-between;
	flex:1;
}

/* STAR ----------------------------------------------------------------------*/
.list-ranking .evalution{
	margin-top:8px;
	font-size:12px;
}

.list-ranking .evalution i::before{
	margin:0;
	font-size:14px;
}

.list-ranking .evalution i:last-of-type{
	margin-right:8px;
}

.list-ranking .evalution .icon-star{
	color:#f9a828;
}

.list-ranking .evalution .icon-star-empty{
	color:var(--gray);
}

.list-ranking .evalution2{
	display:flex;
	font-size:12px;
	align-items:center;
}

.list-ranking .evalution2 i{
	position:relative;
	display:block;
	font-size:18px;
	color:transparent;
	background:linear-gradient(90deg,#ddd);
	background-clip:text;
	-webkit-background-clip:text;
	letter-spacing:-3px;
}

/* .list-ranking .evalution2 i:before{
	content:'★★★★★';
	position:relative;
	top:0;
	left:0;
	display:block;
	z-index:2;
	overflow:hidden;
	white-space:nowrap;
	color:#f9bf3b;
} */

/* .list-ranking .evalution2 i b{
	position:absolute;
	z-index:2;
} */


/*----------------------------------------1.3.2.0 ------------------LONG LIST */
.list-long{
	position:relative;
	margin-top:32px;
}

.list-long>div{
	height:225px;
	overflow:hidden;
}

.list-long ul{
	display:inline-flex;
	margin:8px 44px;
}

.list-long li{
	margin-right:8px;
	width:calc((100vw - 136px) / 7);
}


/* SCROLL BUTTON -------------------------------------------------------------*/
.list-long .button-prev-scroll,
.list-long .button-next-scroll{
	display:flex;
	position:absolute;
	top:0;
	width:40px;
	height:225px;
	background:rgba(0,0,0,.7);
	align-items:center;
	cursor:pointer;
	z-index:2;
}

.list-long .button-prev-scroll{
	left:0;
	border-radius:0 8px 8px 0;
}

.list-long .button-next-scroll{
	right:0;
	border-radius:8px 0 0 8px;
}

.list-long .button-prev-scroll.over,
.list-long .button-next-scroll.over{
	background:rgba(0,0,0,.1);
}

/* THUMBNAIL -----------------------------------------------------------------*/
.list-long .thumb img{
	margin:auto;
	width:auto;
	height:calc((100vw - 136px) / 7);;
}


/*----------------------------------------1.3.3.0 -------------HALF GRID LIST */
.list-grid{
	display:grid;
	margin:32px 16px 0;
	grid-template-columns:repeat(auto-fill, calc(100% / 6));
}

.list-grid li{
	margin:8px;
	border-radius:8px;
	box-shadow:0px 3px 1px -2px rgba(0,0,0,.20), 0px 2px 2px 0px rgba(0,0,0,.14), 0px 1px 5px 0px rgba(0,0,0,.12);
	grid-column:span 2;
	grid-row:span 1;
}

.list-grid li:nth-child(1){
	grid-column:1/4;
	grid-row:1/3;
}

.list-grid li:nth-child(2){
	grid-column:4/7;
	grid-row:1/2;
}

.list-grid li:nth-child(3){
	grid-column:4/7;
	grid-row:2/3;
}

.list-grid li:nth-child(n+2):nth-child(-n+6) a{
	display:flex;
	align-items:flex-end;
}

/* THUMBNAIL -----------------------------------------------------------------*/
.list-grid li:nth-child(n+2):nth-child(-n+3) .thumb{
	width:50%;
}

.list-grid li img{
	margin:auto;
	width:auto;
	height:calc(100vw * .149796);
}

.list-grid li:nth-child(1) img{
	height:calc(100vw * .361979);
}

.list-grid li:nth-child(n+2):nth-child(-n+3) img{
	height:calc(100vw * .229167);
}

/* PRODUCT NAME --------------------------------------------------------------*/
.list-grid li:nth-child(n+2):nth-child(-n+3) .name{
	height:47px;
	-webkit-line-clamp:3;
}

/* PRODUCT PRICE -------------------------------------------------------------*/
.list-grid li:nth-child(n+1):nth-child(-n+3) .price s{
	display:inline;
	margin:0 8px 0 0;
}

.list-grid li:nth-child(n+2):nth-child(-n+3) .price s{
	display:block;
	margin-bottom:8px;
}


/*--------------------------------------1.4.0.0 -------------------CHIPS LIST */
.chips{
	display:inline-flex;
	margin-top:32px;
	padding:0 16px;
	width:100%;
	overflow-x:auto;
}

.chips li:not(:last-child){
	margin-right:8px;
}

.chips li a{
	padding:8px;
	border:1px solid var(--accent);
	border-radius:19px;
	white-space:nowrap;
}

.chips a::after{
	content:url('/img/pc/arrow_next.svg');
	display:inline-block;
	margin-left:8px;
	padding:4px;
	width:12px;
	height:12px;
	background:var(--accent);
	border-radius:50%;
	vertical-align:middle;
}


/*--------------------------------------1.5.0.0 ------------------------BRAND */
.list-brand{
	display:flex;
	margin-top:32px;
	padding:0 16px;
	justify-content:space-between;
}

.list-brand li{
	width:calc(100vw * .23177);
}


/*--------------------------------------1.6.0.0 ----------------------FEATURE */
.list-feature{
	display:flex;
	margin-top:32px;
	padding:0 16px;
	flex-wrap:wrap;
	justify-content:space-between;
}

.list-feature:nth-of-type(2){
	margin-top:4px;
}

.list-feature:nth-of-type(1) li:last-child{
	display:block;
	width:160px;
	width:calc(100vw * .208333);
}

.list-feature:nth-of-type(2) li{
	/* margin:8px 8px 0 0; */
	margin:8px 0 0 0;
}

.list-feature:nth-of-type(2) li:nth-child(2),
.list-feature:nth-of-type(2) li:last-child{
	margin-right:0;
}

.list-feature li a{
	box-shadow:0 2px 3px rgba(0,0,0,.2);
}

.list-feature:nth-of-type(1) li:last-child a:last-child{
	margin-top:4px;
}

/* BANNER --------------------------------------------------------------------*/
.list-feature:nth-of-type(1) li:nth-child(n+1):nth-child(-n+3) img{
	height:calc(100vw * .13671875);
}

.list-feature:nth-of-type(1) li:last-child img{
	height:calc(100vw * .065104);
}

.list-feature:nth-of-type(2) img{
	/* height:calc(100vw * .080729); */
	height:calc(100vw * .103515625);
}

/* .contents-twin .list-grid .descript .name{
	display:none;
} */


/*------------------------------------------------------------------------------
// 2.0.0.0 WIDTH 1024px
------------------------------------------------------------------------------*/
@media screen and (min-width:1024px){
	/*----------------------------------------------------------------------------
	// 2.1.0.0 INITIALIZE STYLE
	----------------------------------------------------------------------------*/
	main .wrap{
		width:1024px;
	}


	/*--------------------------------------2.2.0.0 --------------CATEGORY ICON */
	.category-icon li:nth-child(8){
		margin-right:0;
	}


	/*--------------------------------------2.3.0.0 ---------------PRODUCT LIST */

	/* COMMON DESCRIPT AREA ----------------------------------------------------*/
	.list-ranking li:nth-of-type(n+2):nth-of-type(-n+6) .descript,
	.list-grid li:nth-child(n+2):nth-child(-n+3) .descript{
		width:50%;
	}
	
	
	/*----------------------------------------2.3.1.0 -------------RANKING LIST */
	.list-ranking{
		grid-template-columns:repeat(auto-fill, 142px);
	}

	.list-ranking li{
		grid-column:span 1;
	}

	.list-ranking li:nth-child(1){
		grid-column:1/3;
		grid-row:1/7;
	}

	.list-ranking li:nth-child(2){
		grid-column:3/6;
		grid-row:1/4;
	}

	.list-ranking li:nth-child(3){
		grid-column:3/6;
		grid-row:4/7;
	}

	.list-ranking li:nth-child(4){
		grid-column:6/8;
		grid-row:1/3;
	}

	.list-ranking li:nth-child(5){
		grid-column:6/8;
		grid-row:3/5;
	}

	.list-ranking li:nth-child(6){
		grid-column:6/8;
		grid-row:5/7;
	}

	.list-ranking li:nth-of-type(n+2):nth-child(-n+6) a{
		display:flex;
		align-items:flex-end;
		flex-direction:initial;
	}


	/*----------------------------------------2.3.2.0 ----------------LONG LIST */
	.list-long li{
		width:126.85px;
	}

	/* THUMBNAIL ---------------------------------------------------------------*/
	.list-long .thumb img{
		height:123px;
	}


	/*----------------------------------------2.3.3.0 -----------HALF GRID LIST */
	.contents-twin{
		display:flex;
		justify-content:space-between;
	}

	.contents-twin section{
		width:496px;
	}

	.list-grid{
		margin:32px 0 0;
	}

	.list-grid li:nth-child(n+4):nth-child(-n+6) a{
		display:block;
	}

	/* THUMBNAIL ----------------------------------------------------------------*/
	.list-grid li img{
		height:149px;
	}

	.list-grid li:nth-child(1) img{
		height:178px
	}

	.list-grid li:nth-child(n+2):nth-child(-n+3) img{
		height:112px;
	}


	/*--------------------------------------2.5.0.0 ----------------------BRAND */
	.list-brand li{
		width:228px;
	}


	/*--------------------------------------2.6.0.0 --------------------FEATURE */
	.list-feature:nth-of-type(2){
		margin-top:16px;
	}

	.list-feature:nth-of-type(1) li:last-child{
		display:block;
		width:200px;
	}

	.list-feature:nth-of-type(2) li{
		/* margin:8px 8px 0 0; */
		margin:8px 0 0 0;
	}

	.list-feature:nth-of-type(1) li:last-child a:last-child{
		margin-top:16px;
	}

	.list-feature:nth-of-type(1) li:nth-child(n+1):nth-child(-n+3) img{
		height:143px;
	}

	.list-feature:nth-of-type(1) li:nth-child(1) img{
		width:392px;
	}

	.list-feature:nth-of-type(1) li:last-child img{
		height:62px
	}

	.list-feature:nth-of-type(2) img{
		height:106px;
	}

	.contents-twin .discription .list-grid .name{
		display:none;
	}
}