/*------------------------------------------------------------------------------
>>> TABLE OF CONTENTS:
--------------------------------------------------------------------------------
1.0.0.0 CONTENTS
	1.1.0.0 BREAD CRUMB
	1.2.0.0 SLIDER
	1.3.0.0 CATEGORY ICON

1.0.0.0 INITIALIZE STYLE
	1.1.0.0 FLEXIBLE BOX
	1.2.0.0 HEADLINE
	1.3.0.0 BREAD CRUMB
2.0.0.0 CONTENTS
	2.1.0.0 SLIDER
	2.2.0.0 CATEGORY ICON
	2.3.0.0 PRODUCT LIST
		2.3.1.0 THUMBNAIL
		2.3.2.0 DESCRIPT AREA
		2.3.3.0 PRODUCT NAME
		2.3.4.0 PRODUCT PRICE
		2.3.5.0 PRODUCT ENPLANATION
		2.3.6.0 PRODUCT TAG
		2.3.7.0 STAR
		2.3.8.0 LABEL
	2.4.0.0 CHIPS LIST
	2.5.0.0 TWIN CONTENTS
	2.6.0.0 TAG LIST CONTENTS
	2.7.0.0 FEATURE
3.0.0.0 PC WIDTH 769px1024px
4.0.0.0 PC WIDTH 1500px
	4.2.0.0 CONTENTS
		4.2.3.0 RANKING LIST
			4.2.3.1 DESCRIPT AREA
------------------------------------------------------------------------------*/


/*------------------------------------------------------------------------------
// 1.0.0.0 CONTENTS
------------------------------------------------------------------------------*/
.link-headline{
	display:flex;
	padding:0 16px;
	flex-direction:column;
	/* flex-wrap:wrap; */
	justify-content:space-between;
}

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

.list-products2 .link-headline .button-border{
	font-size:13px;
}

/* .link-headline p{
	padding:8px 0 0;
	line-height:1.5;
	font-size:14px;
} */

article h1{
	margin:16px;
	font-size:32px;
	font-weight:normal;
}

article h2+p{
	margin-top:24px;
	line-height:1.6;
}

article h3{
	margin:16px 0;
	font-size:20px;
}

.list-products2 h2{
	font-size:28px;
}


/*--------------------------------------1.1.0.0 ------------------BREAD CRUMB */
.breadcrumb{
	display:flex;
	margin:0 16px;
}

.breadcrumb li{
	margin-right:16px;
}

.breadcrumb li:not(:first-child) a{
	padding-right:4px;
	text-decoration:underline;
}

.breadcrumb li span{
	display:block;
	position:relative;
	padding:2px 4px;
	color:var(--accent);
	text-decoration:underline;
}

.breadcrumb li:first-child span{
	color:var(--back);
	background:var(--accent);
	text-decoration:none;
}

.breadcrumb li:first-child span:after{
	content:'';
	display:block;
	position:absolute;
	top:0;
	right:-18px;
	width:0;
	height:0;
	border:9px solid transparent;
	border-left:9px solid var(--accent);
}


/*--------------------------------------1.2.0.0 -----------------------SLIDER */
.top-banner{
	margin:0 auto;
	width:640px;
}

.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);
}

/* 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.3.0.0 ----------------CATEGORY ICON */
.category-icon{
	display:flex;
	margin:16px auto;
	padding:0 16px;
	justify-content:center;
}

.category-icon>li{
	margin-right:8px;
	/* width:190px;
	height:187px; */
	width:calc(100vw * .247396);
	height:calc(100vw * .24349);
	cursor:pointer;
	overflow:hidden;
	text-align:center;
	transition:.3s all linear;
}

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

.category-icon>li:hover{
	/* height:277px; */
	height:295px;
}

.category-icon div{
	display:flex;
	margin:auto;
	/* width:calc((100vw - 80px) / 7);
	height:calc((100vw - 80px) / 7); */
	/* width:calc(100vw * .13333); */
	/* height:calc(100vw * .13333); */
	/* max-width:120px; */
	/* max-height:120px; */
	/* max-width:200px; */
	/* min-width:120px; */
	/* max-height:200px; */
	/* min-height:120px; */
	/* width:137px;
	height:137px; */
	width:calc(100vw * .178385);
	height:calc(100vw * .178385);
	border:3px solid var(--main);
	border-radius:50%;
	overflow:hidden;	
	transition:.3s all linear;
	align-items:center;
	justify-content:center;
}

.category-icon>li:hover div{
	/* transform:scale(.5); */
	width:60px;
	height:60px;
}

.category-icon img{
	/* margin:8px auto 0; */
	width:auto;
	/* height:calc(((100vw - 80px) / 7) * .58333); */
	height:calc(((100vw - 80px) / 7));
	height:80%;
	max-height:180px;
	transition:.3s all linear;
}

.category-icon>li:hover img{
	/* margin-top:0; */
	/* height:50px; */
	/* height:80%; */
}

.category-icon p{
	margin:16px 0;
	padding:8px;
	font-size:18px;
	border-bottom:1px solid var(--gray);
	/* color:var(--back); */
	/* background:var(--main); */
}

.category-icon ul{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}

.category-icon>li li{
	/* min-width:50%; */
	width:100%;
}

.category-icon a{
	display:flex;
	position:relative;
	margin:8px;
}

.category-icon a::before{
	content:'>';
	display:block;
	margin-right:4px;
	width:12px;
	height:12px;
	line-height:12px;
	font-size:10px;
	color:var(--back);
	background:var(--accent);
	border-radius:50%;
	text-align:center;
}


/*------------------------------------------------------------------------------
// 1.0.0.0 INITIALIZE STYLE
------------------------------------------------------------------------------*/

/*--------------------------------------1.1.0.0 -----------------FLEXIBLE BOX */
.list-ranking li a,
.list-ranking .descript,
.list-long .button-prev-scroll,
.list-long .button-next-scroll,
.list-short,
.list-short2,
.recommend-rotion,
.recommend-rotion>div:first-child a,
.recommend-rotion>div:first-child .descript,
.recommend-rotion ul,
.contents-twin,
.list-products,
.list-products2,
.list-products3,
.review-product a,
.review-product .descript,
.feature,
.feature li{
	display:flex;
}

/* FLEX WRAP -----------------------------------------------------------------*/
.list-products,
.list-products2,
.list-products3,
.feature{
	flex-wrap:wrap;
}

/* INLINE FLEX ---------------------------------------------------------------*/
.chips,
.list-long ul{
	display:inline-flex;
}

/* DERECTION -----------------------------------------------------------------*/
.list-ranking li:nth-child(1) a,
.list-ranking li:nth-child(n+6) a,
.list-ranking .descript,
.recommend-rotion>div:first-child .descript,
.review-product .descript{
	flex-direction:column;
}

/* ALIGN JUSTIFY -------------------------------------------------------------*/
.recommend-rotion>div:first-child .descript,
.contents-twin,
.list-products,
.list-products2,
.list-products3,
.feature{
	justify-content:space-between;
}

/* ALIGN CENTER --------------------------------------------------------------*/

/* ALIGN END -----------------------------------------------------------------*/
.review-product .descript{
	justify-content:flex-end;
}

/* VALIGN JUSTIFY ------------------------------------------------------------*/
.list-ranking .descript{
	align-content:space-between;
}

/* VALIGN CENTER -------------------------------------------------------------*/
.list-long .button-prev-scroll,
.list-long .button-next-scroll,
.feature li{
	align-items:center;
}

/* FLEXIBLE ------------------------------------------------------------------*/
.list-ranking .descript,
.recommend-rotion>div:first-child .descript{
	flex:1;
}

#selling-product li:after{
	content: "\e835";
	position:absolute;
	top:0;
	left:0;
	padding:0;
	width:40px;
	height:40px;
	line-height:40px;
	font-family:"fontello";
	font-size:20px;
	color:#fff;
	background:#ee0e51;
	border-radius:40px;
	text-align:center;
}

/*------------------------------------------------------------------------------
// 2.0.0.0 CONTENTS
------------------------------------------------------------------------------*/

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

/* RANKING LIST --------------------------------------------------------------*/
.list-ranking{
	margin-top:32px;
	padding:0 16px;
	width:100%;
	display:grid;
	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 rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(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;
}


/* 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;
}


/* SET LIST ------------------------------------------------------------------*/
.set-list{
	display:flex;
	padding:8px 4px;

	li{
		position:relative;
		margin:4px;
		width:232px;
		border-radius:4px;
		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);

		img{
			display:block;
			margin:auto;
			width:auto;
			height:232px;
		}

		.name{
			display:-webkit-box;
			margin:16px 16px 0;
			height:41px;
			line-height:1.3;
			font-size:16px;
			color:#393e46;
			overflow:hidden;
			text-align:left;
			text-overflow:ellipsis;
			-webkit-box-orient:vertical;
			-webkit-line-clamp:2;
		}

		.eval{
			display:flex;
			margin:16px 16px 0;
			align-items:end;
			justify-content:flex-end;

			&[data-rate='0'],
			&[data-rate='']{
				display:none;
			}

			span:first-child{
				display:block;
				font-family:'Material Symbols Outlined';
				font-variation-settings:'FILL' 1, 'wght' 400, 'GRAD' 0;
				font-size:24px;
				color:transparent;
				background:linear-gradient(90deg, #ddd);
				background-clip:text;
			}

			span:last-child{
				margin-left:8px;
				font-size:14px;
				color:#393e46;
			}
		}
		
		.tag{
			display:flex;
			margin:16px 16px 0;
			flex-wrap:wrap;

			span{
				display:flex;
				margin-right:8px;
				padding:4px;
				font-size:12px;
				background:#f9f9f9;
				border:1px solid #ddd;
				border-radius:2px;
				align-items:center;
				justify-content:center;

				&:nth-child(n+3){
					display:none;
				}

				&:nth-child(2){
					display:flex;
				}

				&.movie_tag{
					color:#fff;
					background:#d61c4e;
					border:1px solid #d61c4e;
				}
			}
		}
		
		.price{
			margin:16px;
			font-size:18px;
			color:#d00;
			text-align:right;

			s{
				font-size:12px;
				color:#555;

				&::after{
					content:'→';
					margin:0 2px;
					font-size:12px;
					color:#555;
				}
			}
		}
	}
}


.set-list2{
	display:flex;
	padding:8px 4px;

	li{
		position:relative;
		margin:4px;
		width:157px;
		border-radius:4px;
		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);

		img{
			display:block;
			margin:auto;
			width:auto;
			height:157px;
		}

		.name{
			display:-webkit-box;
			margin:16px 8px 0;
			height:37px;
			line-height:1.3;
			font-size:14px;
			color:#393e46;
			overflow:hidden;
			text-align:left;
			text-overflow:ellipsis;
			-webkit-box-orient:vertical;
			-webkit-line-clamp:2;
		}

		.eval{
			display:flex;
			margin:16px 16px 0;
			align-items:end;
			justify-content:flex-end;

			&[data-rate='0'],
			&[data-rate='']{
				display:none;
			}

			span:first-child{
				display:block;
				font-family:'Material Symbols Outlined';
				font-variation-settings:'FILL' 1, 'wght' 400, 'GRAD' 0;
				font-size:24px;
				color:transparent;
				background:linear-gradient(90deg, #ddd);
				background-clip:text;
			}

			span:last-child{
				margin-left:8px;
				font-size:14px;
				color:#393e46;
			}
		}
		
		.tag{
			display:flex;
			margin:16px 16px 0;
			flex-wrap:wrap;

			span{
				display:flex;
				margin-right:8px;
				padding:4px;
				font-size:12px;
				background:#f9f9f9;
				border:1px solid #ddd;
				border-radius:2px;
				align-items:center;
				justify-content:center;

				&:nth-child(n+3){
					display:none;
				}

				&:nth-child(2){
					display:flex;
				}

				&.movie_tag{
					color:#fff;
					background:#d61c4e;
					border:1px solid #d61c4e;
				}
			}
		}
		
		.price{
			margin:8px;
			font-size:16px;
			color:#d00;
			text-align:right;

			s{
				font-size:12px;
				color:#555;

				&::after{
					content:'→';
					margin:0 2px;
					font-size:12px;
					color:#555;
				}
			}
		}
	}
}


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

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

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

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

/* SCROLL BUTTON ------------------------------------------------------------*/
.list-long .button-prev-scroll,
.list-long .button-next-scroll{
	position:absolute;
	top:0;
	width:40px;
	height:100%;
	background:rgba(0,0,0,.7);
	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);
}

/* NORMAL SHORT LIST ---------------------------------------------------------*/
.list-short,
.list-short2{
	margin-top:32px;
}

.list-short2{
	display:grid;
    grid-template-columns:repeat(auto-fill, 183px);
}

.list-short li,
.list-short2 li{
	margin-right:4px;
	/* width:140.4px;
	width:145.2px; */
	width:143.6px;
	border-top:4px solid var(--surface);
}

.list-short2 li{
	grid-column:span 1;
    grid-row:span 1;
	border:none;
}

.list-short2 li:first-child{
	width:367px;
    grid-column:1/3;
    grid-row:1/3;
}

.list-short li:last-child,
.list-short2 li:last-child{
	margin-right:0;
}

/* GRID LIST -----------------------------------------------------------------*/
.list-grid{
	margin-top:32px;
	display:grid;
	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/7;
	grid-row:1;
}

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

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

/* LOTION --------------------------------------------------------------------*/
.recommend-rotion{
	margin-top:32px;
}

.recommend-rotion h3{
	margin-bottom:16px;
	padding:0;
	font-size:24px;
}

.recommend-rotion>div:first-child{
	margin-right:32px;
}

.recommend-rotion>div:first-child a{
	width:708px;
	width:684px;
}

.recommend-rotion li{
	margin-right:8px;
	width:190px;
}

.recommend-rotion li:last-child{
	margin-right:0;
}

.review-product{
	margin-top:32px;
}


/*----------------------------------------2.3.1.0 ------------------THUMBNAIL */

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

.list-ranking li .thumb img{
	margin:auto;
	width:auto;
	height:calc((100vw - 32px) / 10 * 1.6);
}

.list-ranking li:nth-child(1) .thumb img{
	height:250px;
	height:calc((100vw - 32px) / 10 * 2.8);
}

.list-ranking li:nth-child(n+2):nth-child(-n+3) .thumb img{
	height:calc((100vw - 32px) / 10 * 1.97);
}

.list-ranking li:nth-child(n+4):nth-child(-n+5) .thumb img{
	height:calc((100vw - 32px) / 10 * 1.8);
}

.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;
}

/* LONG SLIDE LIST -----------------------------------------------------------*/
.list-long .thumb img{
	margin:auto;
	width:auto;
	height:190px;
	height:calc((100vw - 42px) / 8);
	height:12vw;
}

/* NORMAL SHORT LIST ---------------------------------------------------------*/
.list-short .thumb img,
.list-short2 .thumb img{
	margin:auto;
	width:auto;
	/* height:calc((100vw - )) */
	/* height:148.5px;
	height:145.2px; */
	height:143.6px;
}

.list-short2 li:first-child .thumb img{
	height:367px;
}

/* GRID LIST -----------------------------------------------------------------*/
.list-grid li img{
	margin:auto;
	width:auto;
	height:calc((100vw - 128px) / 6);
}

.list-grid li:nth-child(1) img{
	height:calc((100vw - 64px) / 2);
}

.list-grid li:nth-child(n+2):nth-child(-n+3) img{
	height:calc((100vw - 96px) / 4);
}

/* LOTION --------------------------------------------------------------------*/
.recommend-rotion>div:first-child .thumb{
	width:384px;
	width:329px;
}

.recommend-rotion li .thumb img{
	margin:auto;
	width:auto;
	height:190px;
}


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

.list-short .descript{
	padding:8px;
	background:var(--surface);
}


/*----------------------------------------2.3.3.0 ---------------PRODUCT NAME */
.list-ranking .name,
.list-long .name,
.list-short .name,
.list-short2 .name,
.list-grid .name,
.recommend-rotion .name,
.review-product .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-short .name,
.list-short2 .name{
	margin-top:0;
}

.list-short2 li:first-child .name{

}

.list-ranking .name .coupon_alert,
.list-long .name .coupon_alert,
.list-grid .name .coupon_alert,
.list-grid .name .coupon_alert,
.recommend-rotion .name .coupon_alert,
.review-product .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;
}


/*----------------------------------------2.3.4.0 --------------PRODUCT PRICE */
.list-ranking .price,
.list-long .price,
.list-short .price,
.list-short2 .price,
.list-grid .price,
.recommend-rotion .price,
.review-product .price{
	margin-top:8px;
	font-size:16px;
}

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

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


/*----------------------------------------2.3.5.0 --------PRODUCT ENPLANATION */
.recommend-rotion .comment,
.review-product .comment{
	margin-top:16px;
	padding:8px;
	line-height:1.6;
	font-size:13px;
	border-radius:8px;
	background:var(--gray);
}

.review-product .comment span{
	display:block;
	margin-top:8px;
	font-size:11px;
	text-align:right;
}


/*----------------------------------------2.3.6.0 ----------------PRODUCT TAG */
.recommend-rotion .tag span,
.review-product .tag span{
	display:inline-block;
	margin:8px 8px 0 0;
	padding:4px;
	font-size:11px;
	border:1px solid var(--gray);
	border-radius:4px;
	background:var(--surface);
}


/*----------------------------------------2.3.7.0 -----------------------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;
}



/*----------------------------------------2.3.8.0 ----------------------LABEL */
.restock::after,
.hot::after,
.recommend::after,
.newrelease::after,
.trend::after,
.sale::after,
.discount::after{
	position:absolute;
	top:-8px;
	left:-8px;
	width:50px;
	height:50px;
	line-height:50px;
	font-size:11px;
	color:var(--back);
	border-radius:50%;
	background:#ddd;
	text-align:center;
}

.restock::after{
	content:'再入荷';
	background:#61b15a;
}

.hot::after{
	content:'人気';
	background:#d8345f;
}

.recommend::after{
	content:'オススメ';
	background:#fa744f;
}

.newrelease::after{
	content:'新作';
	background:#40bad5;
}

.trend::after{
	content:'急上昇';
	background:#e0144c;
}

.sale::after{
	content:'お得';
	background:#d8345f;
}

.discount::after{
	content:'値下げ';
	background:#0eacdb;
}


/*--------------------------------------2.4.0.0 -------------------CHIPS LIST */
.chips{
	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;
}


/*--------------------------------------2.5.0.0 ----------------TWIN CONTENTS */
.contents-twin{
	padding:0 16px;
}

.contents-twin section{
	width:calc(50% - 16px);
}


/*--------------------------------------2.6.0.0 ------------TAG LIST CONTENTS */
.list-products section,
.list-products2 section,
.list-products3 section{
	width:calc(50% - 16px);
}

.list-products3 section:last-child{
	width:100%;
}


/*--------------------------------------2.7.0.0 ----------------------FEATURE */
.feature{
	margin-top:32px;
}

.feature li{
	width:calc(50% - 8px);
	border:1px solid #5ec7be;
}

.feature li:nth-child(n+3){
	margin-top:8px;
}

.feature li .text{
	padding:8px;
	font-size:18px;
}


/*--------------------------------------2.7.0.0 ---------------------- */
.pickup-list{
    display:flex;
    margin:32px auto 0;
    justify-content:center;
}

.pickup-list li{
    width:50%;
}

.pickup-list2{
    display:flex;
    margin:32px auto 0;
	flex-wrap:wrap;
    justify-content:center;
}

.pickup-list2 li{
    width:calc(100% / 3);
}

.pickup-list3,
.pickup-list4{
    display:flex;
    margin:32px auto 0;
	flex-wrap:wrap;
    justify-content:center;
}

.pickup-list3 li{
	width:20%;
}

.pickup-list4 li{
	width:33%;
}

.pickup-list3 li a,
.pickup-list4 li a{
    display:flex;
    align-items:center;
}

.pickup-list3 li img,
.pickup-list4 li img{
    margin-right:8px;
    width:40%;
}

.pickup-list3 li p,
.pickup-list4 li p{
	display:flex;
    font-size:18px;
	color:var(--accent);
	justify-content:space-between;
}

.pickup-list3 li p::after,
.pickup-list4 li p::after{
	content:url(/img/pc/arrow_next.svg);
    display:inline-block;
    margin-left:8px;
    padding:4px;
    width:14px;
    height:14px;
    background:var(--accent);
    border-radius:50%;
    vertical-align:middle;
}

/* NEW DESIGN[SET] --------------------------------------------------------*/
#new-set h1+p{
	margin:0 auto;
	padding:0 16px;
	line-height:1.7;
	font-size:16px;
}

/* NAVIGATION */
#new-set .cate-navi{
	display:flex;
	margin-top:32px;
	justify-content:space-between;
}

#new-set .cate-navi li{
	display:flex;
	padding:8px 0;
	width:calc((100% - 80px) / 6);
	font-size:24px;
	color:var(--accent);
	border:4px double var(--accent);
	border-radius:8px;
	flex-flow:column;
	align-items:center;
	cursor:pointer;
	justify-content:center;
	text-align:center;
}

#new-set .cate-navi li span{
	display:block;
	margin-bottom:8px;
	font-size:14px;
	text-align:center;
}

#new-set .list-ranking,
#new-set #new-product,
#new-set #starter-product,
#new-set #zone-product1,
#new-set #zone-product2,
#new-set #zone-product3,
#new-set #zone-product4,
#new-set #zone-product5,
#new-set #beginer-product,
#new-set #discount-product,
#new-set .cate-section .zone{
	margin:32px auto 0;
	width:1500px;
}

/* HEADLINE */
#new-set .img-headline{
	background:var(--surface);
}	

#new-set .img-headline>div{
	position:relative;
	display:flex;
	margin:auto;
	width:1500px;
}

#new-set .cate-section .img-headline img{
	width:900px;
	height:506px;
	order:1;
}

#new-set .cate-section:nth-of-type(odd) .img-headline img{
	order:2;
}

#new-set .cate-section .img-headline h2{
	display:flex;
	padding:16px;
	width:600px;
	order:2;
	align-items:center;
	flex-wrap:wrap;
}

#new-set .cate-section:nth-of-type(odd) .img-headline h2{
	order:1;
}

#new-set h2 span{
	font-size:32px;
}	

#new-set h2 span>span{
	display:block;
	margin-bottom:8px;
	font-size:16px;
	font-weight:normal;
}

#new-set .cate-section .img-headline a{
	position:absolute;
	bottom:16px;
	background:#fff;
}

#new-set .cate-section:nth-of-type(odd) .img-headline a{
	right:16px;
}	

#new-set .cate-section:nth-of-type(even) .img-headline a{
	left:16px;
}

#new-set .cate-section .sub-navi{
	position:absolute;
	bottom:16px;
	display:flex;
	padding:0 16px;
	width:600px;
	justify-content:space-between;
}

#new-set .cate-section:nth-of-type(odd) .sub-navi{
	left:0;
}

#new-set .cate-section:nth-of-type(even) .sub-navi{
	right:0;
}

#new-set .cate-section .sub-navi li{
	display:flex;
	width:20%;
	width:100px;
	height:100px;
	font-weight:bold;
	color:var(--main);
	border:3px solid var(--main);
	border-radius:50%;
	background:#fff;
	align-items:center;
	justify-content:center;
	cursor:pointer;
}

/* #new-set .cate-section .zone */


/*------------------------------------------------------------------------------
// 3.0.0.0 PC WIDTH 769px
------------------------------------------------------------------------------*/
@media screen and (min-width:769px){
	/*----------------------------------------------------------------------------
	// 3.1.0.0 CONTENTS
	----------------------------------------------------------------------------*/

	/*------------------------------------3.1.1.0 -----------------FLEXIBLE BOX */

	/* DERECTION ---------------------------------------------------------------*/
	.link-headline{
		flex-direction:row;
	}

	/* VALIGN CENTER -----------------------------------------------------------*/
	.link-headline{
		align-items:center;
	}

}


/*------------------------------------------------------------------------------
// 3.0.0.0 PC WIDTH 1024px
------------------------------------------------------------------------------*/
@media screen and (min-width:1024px){
	/*----------------------------------------------------------------------------
	// 1.0.0.0 CONTENTS
	----------------------------------------------------------------------------*/

	/*------------------------------------3.1.3.0 ----------------CATEGORY ICON */
	/*------------------------------------4.3.0.0 -----------------PRODUCT LIST */
	.category-icon>li{
		margin:8px 32px 0 0;
		max-width:250px;
		max-height:250px;
	}

	.category-icon>li:hover{
		height:277px;
	}

	.category-icon div{
		max-width:200px;
		max-height:200px;
	}

	.category-icon>li:hover div{
		width:60px;
		height:60px;
	}

	.category-icon img{
		/* width:auto;
		height:calc(((100vw - 80px) / 7));
		height:80%;
		max-height:180px;
		transition:.3s all linear; */
	}

	.category-icon>li:hover img{
	}

	.category-icon p{
		/* margin:16px 0;
		padding:8px;
		font-size:18px;
		border-bottom:1px solid var(--gray); */
	}

	.category-icon>li li{
		min-width:50%;
	}

	.category-icon a{
		position:relative;
		margin:8px;
	}

	.category-icon a::before{
		content:'>';
		display:block;
		margin-right:4px;
		width:12px;
		height:12px;
		line-height:12px;
		font-size:10px;
		color:var(--back);
		background:var(--accent);
		border-radius:50%;
		text-align:center;
	}
	/*----------------------------------------------------------------------------
	// 1.0.0.0 INITIALIZE STYLE
	----------------------------------------------------------------------------*/

	/*------------------------------------4.1.1.0 -----------------FLEXIBLE BOX */
	.list-grid li:nth-child(n+2):nth-child(-n+3) a{
		display:flex;
	}

	/* DERECTION ---------------------------------------------------------------*/
	.list-ranking li:nth-of-type(n+7) a{
		flex-direction:column;
	}

	.list-ranking li:nth-of-type(n+2):nth-child(-n+6) a{
		flex-direction:row;
	}

	/* VALIGN END --------------------------------------------------------------*/
	.list-ranking li:nth-of-type(n+2):nth-child(-n+6) a,
	.list-grid li:nth-child(n+2):nth-child(-n+3) a{
		align-items:flex-end;
	}


	/*----------------------------------------------------------------------------
	// 4.2.0.0 CONTENTS
	----------------------------------------------------------------------------*/




	/* RANKING LIST ------------------------------------------------------------*/
	.list-ranking{
		grid-template-columns:repeat(auto-fill, calc((100vw - 32px) / 7));
	}
	
	.list-ranking li{
		grid-column:span 1;
		grid-row:span 1;
	}

	.list-ranking li:nth-child(n+6) a{
		/* display:block; */
	}

	.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;
	}

	/* GRID LIST ---------------------------------------------------------------*/
	.list-grid{
		grid-template-columns:repeat(auto-fill, calc(100% / 6));
	}
	
	.list-grid li{
		margin:8px;
		border-radius:8px;
		box-shadow:0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
		grid-column:span 2;
		grid-row:span 1;
		overflow:hidden;
	}
	
	.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;
	}
	


	/*--------------------------------------4.2.3.1 ------------------THUMBNAIL */

	/* RANKING LIST ------------------------------------------------------------*/
	.list-ranking li:nth-of-type(n+2):nth-of-type(-n+6) .thumb{
		width:50%;
	}
	
	.list-ranking li .thumb img{
		margin:auto;
		width:auto;
		height:calc((100vw - 32px) / 10 * 1.2);
	}
	
	.list-ranking li:nth-of-type(1) .thumb img{
		height:calc((100vw - 32px) / 10 * 2.8);
	}
	
	.list-ranking li:nth-of-type(n+2):nth-of-type(-n+3) .thumb img{
		height:calc((100vw - 32px) / 10 * 1.89);
	}
	
	.list-ranking li:nth-of-type(n+4):nth-of-type(-n+6) .thumb img{
		height:calc((100vw - 32px) / 10 * 1.2);
	}
	
	/* GRID LIST ---------------------------------------------------------------*/
	.list-grid li:nth-child(n+2):nth-child(-n+3) .thumb{
		width:50%;
	}
	
	.list-grid li img{
		margin:auto;
		width:auto;
		height:175px
		calc((100vw - 128px) / 8);
	}
	
	.list-grid li:nth-child(1) img{
		height:249px;
		height:calc((100vw - 96px) / 5.2);
	}

	.list-grid li:nth-child(n+2):nth-child(-n+3) img{
		height:175px;
		height:calc((100vw - 96px) / 8.3);
	}


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

	.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%;
	}


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


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


	/*------------------------------------4.2.7.0 ----------------------FEATURE */
	.list-feature{
		margin-top:32px;
		padding:0 16px;
	}

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

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

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

	.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:16px;
	}

	.list-feature:nth-of-type(1) li:nth-child(n+1):nth-child(-n+3) img{
		height:213px;
		height:calc((100vw - 32px) * 0.144);
	}

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

	.list-feature:nth-of-type(2) img,
	.list-feature:nth-of-type(2) li:nth-of-type(n+3) img{
		height:122px;
		height:calc((100vw - 32px) * .08133);
	}
}


/*------------------------------------------------------------------------------
// 4.0.0.0 PC WIDTH 1500px
------------------------------------------------------------------------------*/
@media screen and (min-width:1500px){
	/*----------------------------------------------------------------------------
	// 4.1.0.0 CONTENTS
	----------------------------------------------------------------------------*/
	.link-headline{
		padding:0 16px;
	}

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

	article h1{
		margin:16px auto;
		padding:0 16px;
		width:1500px;
		font-size:40px;
	}

	#new-set h2 span{
	}
	/* article h2+p{
		margin-top:24px;
		line-height:1.6;
	} */

	article h3{
		margin:16px 0;
		font-size:20px;
	}

	#new-set h1+p{
		margin:0 auto;
		padding:0 16px;
		width:1500px;
		line-height:1.7;
		font-size:16px;
	}
	
	

	/*------------------------------------4.1.1.0 ------------------BREAD CRUMB */
	.breadcrumb{
		margin:0 auto;
		padding:0 16px;
		width:1500px;
	}


	/*------------------------------------4.1.3.0 ----------------CATEGORY ICON */
	.category-icon>li{
		/* margin:8px 32px 0 0;
		width:250px;
		max-width:290px;
		height:250px; */
	}

	.category-icon>li:hover{
		/* height:277px; */
	}

	.category-icon div{
		/* width:calc((100vw - 80px) / 7);
		height:calc((100vw - 80px) / 7);
		max-width:200px;
		max-height:200px;
		/* width:200px;
		height:200px; */
	}


	/*----------------------------------------------------------------------------
	// 1.0.0.0 INITIALIZE STYLE
	----------------------------------------------------------------------------*/

	/*------------------------------------4.1.1.0 -----------------FLEXIBLE BOX */
	.list-grid li:nth-child(n+2):nth-child(-n+3) a{
		display:flex;
	}

	/* DERECTION ---------------------------------------------------------------*/
	.list-ranking li:nth-of-type(n+7) a{
		flex-direction:column;
	}

	.list-ranking li:nth-of-type(n+2):nth-child(-n+6) a{
		flex-direction:row;
	}

	/* VALIGN END --------------------------------------------------------------*/
	.list-ranking li:nth-of-type(n+2):nth-child(-n+6) a,
	.list-grid li:nth-child(n+2):nth-child(-n+3) a{
		align-items:flex-end;
	}


	/*------------------------------------4.1.2.0 ---------------------HEADLINE */
	/*----------------------------------------------------------------------------
	// 4.2.0.0 CONTENTS
	----------------------------------------------------------------------------*/
	/*------------------------------------4.3.0.0 -----------------PRODUCT LIST */

	/* RANKING LIST ------------------------------------------------------------*/
	.list-ranking{
		grid-template-columns:repeat(auto-fill, 210px);
	}
	
	.list-ranking li{
		grid-column:span 1;
		grid-row: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;
	}
	
	/* RANKING NO. -------------------------------------------------------------*/
	.list-ranking li:nth-child(n+1):nth-child(-n+3)::before{
		top:0;
		left:0;
		width:100px;
		height:100px;
	}
	
	/* LONG SLIDE LIST ---------------------------------------------------------*/
	.list-long>div{
		overflow:hidden;
	}
	
	.list-long ul{
		margin:8px 64px;
	}

	.list-long li{
		width:190px;
	}

	/* SCROLL BUTTON ------------------------------------------------------------*/
	.list-long .button-prev-scroll,
	.list-long .button-next-scroll{
		width:60px;
	}
	
	/* GRID LIST ---------------------------------------------------------------*/
	.list-grid{
		grid-template-columns:repeat(auto-fill, calc(100% / 6));
	}
	
	.list-grid li{
		margin:8px;
		border-radius:8px;
		box-shadow:0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
		grid-column:span 2;
		grid-row:span 1;
		overflow:hidden;
	}
	
	.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;
	}
	

	/*--------------------------------------4.2.3.1 ------------------THUMBNAIL */

	/* RANKING LIST ------------------------------------------------------------*/
	.list-ranking li:nth-of-type(n+2):nth-of-type(-n+6) .thumb{
		width:50%;
	}
	
	.list-ranking li .thumb img{
		margin:auto;
		width:auto;
		height:165px;
	}
	
	.list-ranking li:nth-of-type(1) .thumb img{
		height:404px;
	}
	
	.list-ranking li:nth-of-type(n+2):nth-of-type(-n+3) .thumb img{
		height:269px
	}
	
	.list-ranking li:nth-of-type(n+4):nth-of-type(-n+6) .thumb img{
		height:176px;
	}
	
	/* LONG SLIDE LIST ---------------------------------------------------------*/
	.list-long .thumb img{
		margin:auto;
		width:auto;
		height:190px;
	}
	
	/* GRID LIST ---------------------------------------------------------------*/
	.list-grid li:nth-child(n+2):nth-child(-n+3) .thumb{
		width:50%;
	}
	
	.list-grid li img{
		margin:auto;
		width:auto;
		height:175px
	}
	
	.list-grid li:nth-child(1) img{
		height:249px;
	}

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

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

	.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%;
	}


	/*--------------------------------------4.2.3.3 ---------------PRODUCT NAME */
	.list-ranking .name,
	.list-long .name,
	.list-grid .name,
	.recommend-rotion .name,
	.review-product .name{
		height:41px;
		line-height:1.5;
		font-size:15px;
	}


	/*--------------------------------------4.2.3.4 --------------PRODUCT PRICE */
	.list-ranking .price,
	.list-long .price,
	.list-grid .price,
	.recommend-rotion .price,
	.review-product .price{
		margin-top:16px;
		font-size:20px;
	}

	.list-long .price s,
	.list-grid .price s{
		margin-right:8px;
		font-size:13px;
		text-decoration:line-through;
	}
	

	/* STAR --------------------------------------------------------------------*/
	.list-ranking .evalution{
		font-size:14px;
	}

	.list-ranking .evalution i::before{
		font-size:16px;
	}


	/*------------------------------------4.2.6.0 ----------------TWIN CONTENTS */
	.contents-twin{}

	.contents-twin section{
		width:calc(50% - 16px);
	}

	/* .list-grid li:nth-child(1) .descript{
		position:absolute;
		bottom:0;
		left:0;
		width:100%;
	}
	*/


	/*------------------------------------4.2.7.0 ----------------------FEATURE */
	.list-feature{
		margin-top:32px;
		padding:0 16px;
	}

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

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

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

	.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:16px;
	}

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

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

	.list-feature:nth-of-type(2) img,
	.list-feature:nth-of-type(2) li:nth-of-type(n+3) img{
		height:122px;
	}
}