/*------------------------------------------------------------------------------
>>> TABLE OF CONTENTS:
--------------------------------------------------------------------------------
1.0.0.0 CONTENTS
	1.1.0.0 FLEXIBLE BOX
2.0.0.0 CONTENTS
3.0.0.0 TABLET WIDTH 960px
4.0.0.0 PC WIDTH 1000px
------------------------------------------------------------------------------*/


/*------------------------------------------------------------------------------
// 1.0.0.0 CONTENTS
------------------------------------------------------------------------------*/
main{
	width:720px;
}

main section{
	margin:7% 10px;
	h2{
		font-size:16px;
		display:flex;
		align-items: center;

		span{
			margin-right:5px;
		}
	}
}

#slider ul{
	display:flex;
	margin-bottom:32px;
	justify-content:space-between;
}

#slider li{
	width:230px
}

.section-pickup{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
}

.section-pickup a{
	margin-right:16px;
	width:70px;
	color:#363540;
}

.section-pickup a:last-child{
	margin-right:0;
}

.section-pickup img{
	width:70px;
	height:70px;
	border-radius:50%;
	background:#eee;
}

.section-pickup p{
	margin-top:5px;
	padding:0;
	font-size:10px;
	letter-spacing:-1px;
	text-align:center;
}
.section-new ul{
	display:flex;
}

.section-new li{
	width:116px;
}

.section-new li a{
	padding:5px;
	color:#363540;
}

.section-new li .thumb{
	position:relative;
}

.section-new li .name{
	margin:5px 0;
	font-size:10px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
}

.section-new li .price{
	font-size:12px;
	font-weight:bold;
	text-align:right;
}

.section-new li span{
	position:absolute;
	top:0;
	left:0;
	display:block;
	padding:2px;
	font-size:10px;
	border:1px solid #363540;
	background:#fff;
}

#slider2{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
}

#slider2 li{
	margin:8px 8px 0 0;
	width:300px;
}

#slider2 li:nth-child(even){
	margin-right:0;
}

#slider2 li:nth-child(-n+2){
	margin-top:0;
}

.ranking-cat{
	display:flex;
	margin:0;
	padding:0;
	justify-content:center;
	scroll-snap-type:x mandatory;
	scroll-behavior:smooth;
	-webkit-overflow-scrolling:touch;
}

.ranking-cat li{
	padding:10px;
	width:max-content;
	font-size:12px;
	color:#363540;
	cursor:pointer;
	scroll-snap-align:start;
	word-break:keep-all;
	white-space:nowrap;
}

.ranking-cat li.on{
	border-bottom:3px solid #e074a1;
}

.ranking-main{
	display:none;
}

.ranking-main.on{
	display:block;
}

.ranking-main ol{
	display:grid;
	/* margin:0;
	padding:0; */
	width:720px;
	/* list-style:none; */
	grid-template-columns:repeat(7, 1fr);
	grid-template-rows:repeat(2, 1fr);
	grid-column-gap:0;
	grid-row-gap:0;
}

.ranking-main li{
	position:relative;
	counter-increment:rank;
}

.ranking-main li:nth-child(1){
	grid-area: 1 / 1 / 3 / 3;
}

.ranking-main li:nth-child(2){
	grid-area: 1 / 3 / 2 / 4;
}

.ranking-main li:nth-child(3){
	grid-area: 2 / 3 / 3 / 4;
}

.ranking-main li:nth-child(4){
	grid-area: 1 / 4 / 2 / 5;
}

.ranking-main li:nth-child(5){
	grid-area: 2 / 4 / 3 / 5;
}

.ranking-main li:nth-child(6){
	grid-area: 1 / 5 / 2 / 6;
}

.ranking-main li:nth-child(7){
	grid-area: 2 / 5 / 3 / 6;
}

.ranking-main li:nth-child(8){
	grid-area: 1 / 6 / 2 / 7;
}

.ranking-main li:nth-child(9){
	grid-area: 2 / 6 / 3 / 7;
}

.ranking-main li:nth-child(10){
	grid-area: 1 / 7 / 2 / 8;
}

.ranking-main li:nth-child(11){
	grid-area: 2 / 7 / 3 / 8;
}

.ranking-main li:nth-child(-n+3)::before{
	content:'crown';
	position:absolute;
	top:0;
	left:0;
	display:block;
	font-size:40px;
	font-family:"Material Symbols Outlined";
	font-variation-settings:'FILL' 1, 'wght' 200, 'GRAD' 0, 'opsz' 24;
}

.ranking-main li:nth-child(1)::before{
	color:#f5b617;
}

.ranking-main li:nth-child(2)::before{
	font-size:36px;
	color:#9dafbd;
}

.ranking-main li:nth-child(3)::before{
	font-size:36px;
	color:#9b5834;
}

.ranking-main li:nth-child(1) a{
	padding:20% 5px 5px;
}

.ranking-main li::after{
	content:counter(rank);
	position:absolute;
	top:3px;
	left:5px;
	display:flex;
	width:20px;
	height:20px;
	font-size:10px;
	font-weight:bold;
	color:#fff;
	border-radius:20px;
	background:#93cbdb;
	align-items:center;
	justify-content:center;
}

.ranking-main li:nth-child(1)::after{
	top:10px;
	left:10px;
	font-size:12px;
	background:none;
}

.ranking-main li:nth-child(n+2):nth-child(-n+3)::after{
	top:8px;
	left:8px;
	background:none;
}

.ranking-main li a{
	padding:8px;
	color:#363540;
}

.ranking-main li .item-time{
	font-size:10px;	
}

.ranking-main li .item-title{
	display:-webkit-box;
	margin:0;
	font-size:10px;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:1;
	overflow:hidden;
	text-overflow:ellipsis;
}

.ranking-main li .item-price{
	margin:5px 0;
	font-size:12px;
	font-weight:bold;
}

.ranking-main li .star{
	display:flex;
	margin:0;
	font-size:10px;
	align-items:baseline;
}

.ranking-main li .star i{
	position:relative;
	display:block;
	margin-right:5px;
	font-style:normal;
	font-size:15px;
	color:transparent;
	background:linear-gradient(90deg,#ddd);
	letter-spacing:-1px;
	-webkit-background-clip:text;
	background-clip:text;
}

.ranking-main .link-button{
	position:sticky;
	left:calc(50% - 40%);
	font-size:11px;
}

.link-button{
	background: #363540;
	color:#fff;
	text-decoration: none;
	display: block;
	border-radius: 50px;
	padding: 10px;
	text-align: center;
	font-size: 13px;
	width: 80%;
	margin:5% auto 0;
}

.material-symbols{
  font-family:'Material Symbols Outlined';
  font-weight:400;
  font-style:normal;
  font-size:24px;
  line-height:1;
  letter-spacing:normal;
  text-transform:none;
  display:inline-block;
  white-space:nowrap;
  direction:ltr;
  -webkit-font-feature-settings:'liga';
  -webkit-font-smoothing:antialiased;
 	 &.outlined{
 	 	font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
	}
	&.filled{
		font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24;
	}
}

.section-cat ul{
	display:flex;
	flex-wrap:wrap;
}

.section-cat li{
	width:50%;
	border-bottom:1px solid #eee;
}

.section-cat li:nth-child(odd){
	border-right:1px solid #eee;
}

.section-cat li a{
	display:flex;
	padding:10px;
	font-size:16px;
	color:#363540;
	align-items:center;
}

.section-cat li img{
	margin-right:16px;
	width:48px;
	height:48px;
}

.section-cat li p{
	margin:0;
	padding:0;
	letter-spacing:-1px;
}


/*--------------------------------------1.1.0.0 -----------------FLEXIBLE BOX */
/* WRAP MODE -----------------------------------------------------------------*/
/*------------------------------------------------------------------------------
// 2.0.0.0 CONTENTS
------------------------------------------------------------------------------*/
/*----------------------------------------2.3.4.0------------ REVIEW ALL AREA */
/*------------------------------------------------------------------------------
// 3.0.0.0 TABLET WIDTH 1024px
------------------------------------------------------------------------------*/
@media screen and (min-width:1025px){
	/*----------------------------------------------------------------------------
	// 1.0.0.0 INITIALIZE STYLE
	----------------------------------------------------------------------------*/

	/*----------------------------------------1.3.4.0 -------SHIPPING STATUS AREA */
	.cart-area .secondary{
		display:block;
		left:0;
		width:100%;
	}

	.cart-area .secondary>div:first-child{
		margin-right:0;
		width:100%;
	}

	.cart-area .secondary>div:last-child{
		width:100%;
	}


	/*------------------------------------------1.3.4.3 --SHIPPING SCHEDULED DATE */
	.cart-area .secondary .deli-check>div:first-child{
		/* width:calc((100% - 16px) / 2); */
		width:calc(55% - 8px);
	}

	.cart-area .secondary .deli-check>div:last-child{
		/* width:calc((100% - 16px) / 2); */
		width:calc(45% - 8px);
	}

	.cart-area .secondary form #delivery_code{
		width:264px;
	}

	.cart-area .secondary form #delivery_send{
		width:90px;
	}
}
/*------------------------------------------------------------------------------
// 4.0.0.0 PC WIDTH 1000px
------------------------------------------------------------------------------*/
@media screen and (min-width:1500px){
	/*----------------------------------------------------------------------------
	// 1.0.0.0 INITIALIZE STYLE
	----------------------------------------------------------------------------*/
	article h1{
		font-size:40px;
	}


	/*------------------------------------1.1.0.0 -----------------FLEXIBLE BOX */
	.cart-area .primary{
		display:flex;
	}


	/*------------------------------------1.2.0.0 ------------------BREAD CRUMB */
	.breadcrumb{
		margin:0 auto;
	}


	/*--------------------------------------1.3.0.0 -----------------MAIN SECTION */
	.main-section{
		margin:32px 0 0;
	}

	.item-image{
		margin-right:24px;
	}

	.item-purchase{
		width:708px;
	}


	/*----------------------------------------1.3.1.0 -----------------ITEM IMAGE */
	.item-image>div{
		width:640px;
		height:640px;
		order:2;
	}

	.item-image>div img{
		margin:auto;
		width:auto;
		max-width:640px;
		/* height:auto;
		max-height:640px; */
		height:640px;
	}

	.item-image>ul{
		width:64px;
		width:128px;
		order:1;
	}

	.item-image li{
		margin:8px 8px 0 0;
		width:56px;
		height:56px;
		border:1px solid var(--gray);
	}

	.item-image li:nth-child(-n+2){
		margin-top:0;
	}

	.item-image li:nth-child(2n+2){
		margin-right:0;
	}


	/*----------------------------------------1.3.2.0 -----------ITEM DESCRIPTION */
	.catchcopy{
		margin-top:16px;
		line-height:1.7;
		font-size:16px;
	}


	/*------------------------------------------1.3.2.1 -----MAIN EVALUATION STAR */
	.star-area{
		margin-left:8px;
	}

	.star-area input{
		width:32px;
		height:32px;
		background:url('/js/star-rating/star.svg') left / 64px no-repeat;
		overflow:hidden;
	}

	.star-area .on{
		background:url('/js/star-rating/star.svg') right / 64px no-repeat;
	}


	/*------------------------------------------1.3.2.2 --MAIN AVERAGE EVALUATION */
	.star-area span{
		margin-left:8px;
		font-size:16px;
	}

	.star-area span::after{
		content:'点';
		font-size:12px;
	}


	/*------------------------------------------1.3.2.3 -------------TOTAL REVIEW */
	.star-area a{
		margin-left:16px;
		padding:6px 4px 4px;
		border:1px solid var(--gray);
		border-radius:4px;
		background:var(--surface);
	}

	.star-area a::before{
		content:'クチコミ：';
	}

	.star-area a::after{
		content:'件';
	}

	.star-area a:empty{
		display:none;
	}


	/*----------------------------------------1.3.3.0 ------------------CART AREA */
	.cart-area{
		margin-top:24px;
	}


	/*------------------------------------------1.3.3.1 ---------------STOCK DATA */
	.in{
		margin-bottom:24px;
		padding:4px 8px;
		font-size:24px;
		border:1px solid var(--gray);
		border-radius:8px;
		background:var(--surface);
	}

	.in.full::before,
	.in.med::before,
	.in.low::before{
		content:'';
		display:inline-block;
		margin-right:10px;
		width:50px;
		height:50px;
		background:url("/img/sp/item/stock.svg") 0 0 / auto 50px no-repeat;
		vertical-align:middle;
	}

	.in.med::before{
		background-position:-50px 0;
	}

	.in.low::before{
		background-position:-100px 0;
	}


	/*------------------------------------------1.3.3.2 --------------------PRICE */
	.cart-area .primary>div:first-child{
		margin-right:24px;
		width:340px;
	}

	.regular-price span{
		display:inline-block;
		margin-right:8px;
		padding:6px;
		font-size:12px;
		border:1px solid var(--gray);
		border-radius:4px;
		background:var(--surface);
	}

	.regular-price s{
		text-decoration:line-through;
	}

	/* NORMAL PRICE --------------------------------------------------------------*/
	.price-area .price{
		font-size:24px;
	}

	.price-area .price span{
		display:inline-block;
		margin-right:8px;
		padding:4px;
		font-size:13px;
		border:1px solid var(--text);
		border-radius:4px;
	}

	/* PRICE OFF -----------------------------------------------------------------*/
	.price-area .discount{
		margin-left:8px;
	}

	.price-area .discount span{
		margin-right:4px;
		font-weight:bold;
	}

	/* POINT ---------------------------------------------------------------------*/
	.price-area .point{
		font-size:16px;
	}

	.price-area .point::before{
		content:'ポイント';
		display:inline-block;
		margin-right:4px;
		padding:4px;
		font-size:12px;
		border:1px solid var(--gray);
		border-radius:4px;
	}

	.price-area .point span{
		margin-left:8px;
		font-size:12px;
	}


	/*------------------------------------------1.3.3.3 -------------SELECT CHIPS */
	.form-select-chips:not(:first-of-type){
		margin-top:16px;
	}

	.form-select-chips li{
		width:calc((100% - 16px) / 3);
	}

	.form-select-chips li:nth-child(3n+2){
		margin:0 8px;
	}

	.form-select-chips li:nth-child(n+4){
		margin-top:8px;
	}

	.form-select-chips label{
		height:56px;
		font-size:12px;
	}

	.form-select-chips input:disabled+label{
		color:var(--gray);
		border:2px solid var(--surface);
		background:var(--surface);
	}

	.form-select-chips input:checked+label{
		color:var(--main);
		color:var(--back);
		border:2px solid var(--main);
		background:var(--main);
	}


	/*------------------------------------------1.3.3.4 ----------PURCHASE BUTTON */
	#buyform input[type='submit']{
		margin:16px 0 0;
		padding:8px 0;
		width:100%;
		height:60px;
		font-size:20px;
		font-family:'fontello';
		color:#fff;
		border:1px solid #c77800;
		border-radius:8px;
		background:#00B16A;
		background:linear-gradient(to bottom, #FCC314, #f90);
		cursor:pointer;
		text-shadow:0px -1px 1px #c77800;
	}

	.goods_status{
		font-size:20px;
		text-align:center;
	}


	/*------------------------------------------1.3.3.5 --------------WISH BUTTON */
	.wish-list{
		margin-top:16px;
	}

	.wish-list a{
		padding:8px;
		border:1px solid var(--gray);
		border-radius:8px;
		background:var(--surface);
		text-align:center;
	}


	/*----------------------------------------1.3.4.0 -------SHIPPING STATUS AREA */
	.cart-area .secondary{
		position:static;
		display:block;
		margin-top:32px;
		width:auto;
	}

	.cart-area .secondary>div:first-child,
	.cart-area .secondary>div:last-child{
		margin:0;
		width:auto;
	}


	/*------------------------------------------1.3.4.1 ----------SHIPPING STATUS */
	.shipping{
		line-height:1.4;
		font-size:16px;
		text-align:center;
	}

	.shipping span{
		font-size:24px;
	}


	/*------------------------------------------1.3.4.2 ---------GENERAL DELIVERY */
	.shipping+.button-border{
		margin-top:8px;
	}


	/*------------------------------------------1.3.4.3 --SHIPPING SCHEDULED DATE */
	.cart-area .secondary h3{
		margin-top:24px;
		font-size:20px;
	}

	.cart-area .secondary .deli-check{
		position:relative;
		/* margin:0 8px; */
		padding:16px;
		width:100%;
		border:1px solid var(--gray);
		border-radius:8px;
	}

	.cart-area .secondary .deli-check>div:first-child{
		/* width:calc((100% - 16px) / 2); */
		width:calc(55% - 8px);
	}

	.cart-area .secondary .deli-check>div:last-child{
		/* width:calc((100% - 16px) / 2); */
		width:calc(45% - 8px);
	}

	.cart-area .secondary .deli-check div:first-child>p:first-child{
		font-size:12px;
	}

	.cart-area .secondary form{
		margin-top:8px;
	}

	.cart-area .secondary form #delivery_code{
		margin-right:8px;
		padding:8px;
		width:264px;
		font-size:16px;
		border:1px solid var(--gray);
		border-radius:4px;
	}

	.cart-area .secondary form #delivery_send{
		width:90px;
		color:var(--back);
		border-radius:4px;
		background:var(--accent);
	}

	.cart-area .secondary .deli-check>div:last-child{
		padding:16px 0;
		border-radius:8px;
		background:var(--surface);
	}

	.cart-area .secondary .deli-check>div:last-child p{
		font-size:20px;
		text-align:center;
	}

	.cart-area .secondary .deli-check>div:last-child p:first-child{
		margin-bottom:8px;
	}


	.cart-area .secondary .deli-check>div:last-child #address,
	.cart-area .secondary .deli-check>div:last-child #expected{
		font-size:24px;
		font-weight:bold;
	}

	.second-section{
		padding:0;
	}

	/* 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;
	}
	
	/* LONG SLIDE LIST ---------------------------------------------------------*/
	.list-long .thumb img,
	.list-long .primary img{
		margin:auto;
		width:auto;
		height:190px;
	}
	
	/*--------------------------------------4.2.3.4 --------------PRODUCT PRICE */
	.list-long .price{
		margin-top:16px;
		font-size:20px;
	}

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

}