html{
	scroll-padding-top: 112px; // ヘッダーの高さ分設定
}

main#neo {
    margin: 140px auto 0;
}

#slider{
	position:relative;
	overflow:hidden;
	margin:0 0 var(--S-space);
	&>ul{
		margin:0;
		padding:0;
		list-style: none;
		display:flex;
		width:max-content;
		white-space:nowrap;

		li{
			padding-right:1.5vw;
			width:24.5vw;
			

			a{
				display: block;
				border-radius:5px;
				overflow:hidden;
				box-shadow: 0 3px 3px rgba(0,0,0,0.1);
			}

			img{
				display: block;
				width: 100%;
				height: auto;
			}
		}
	}

	&>div{
		display:flex;
		padding:16px 8px 8px;
		align-items:center;
		justify-content:center;

		p{
			position:relative;
			margin:0 0 0 5px;
			width:15px;
			height:4px;
			border-radius:10px;
			background:#ddd;
			overflow:hidden;

			&:last-child{
				margin-right:0;
			}
			&.current::before{
				content:'';
				position:absolute;
				top:0;
				left:0;
				display:block;
				width:15px;
				height:4px;
				background:#e074a1;
				transform-origin:right;
				animation:2.5s timer linear infinite;
			}
		}
	}
}

@keyframes timer{
	0%{
		transform:scaleX(1);
	}
	100%{
		transform:scaleX(0);
	}
}


:root {
    --accent-color: #ee0e51;
    --text-color:#363540;
    --bg-color: #fff;
    --light-gray: #f5f5f5;
	--gray-color: #999;
    --cart-color:#eba300;
    --link-color:#1079af;
    --XXS-space:4pt;
    --XS-space:8pt;
    --S-space:16pt;
    --M-space:32pt;
    --L-space:48pt;
    --XL-space:80pt;
}


.genre-page{
	font-family: "Noto Sans JP", sans-serif;
  	font-optical-sizing: auto;
	max-width:1000px;
	margin:0 auto;

	.breadcrumb{
		display:flex;
		align-items:center;
		margin:0 0 0 var(--XS-space);
		padding: 0;
		width: auto;
		li {
			line-height: 0;
			a{
				text-decoration:none;
				font-size:10px;
				color:#676575;
			}
			&:not(:last-child)::after{
				content:"\f105";
				font-family:"fontello";
				margin:0 5px;
				vertical-align:middle;
				color:#999;
			}
		}
	}

	h2{
		border:0;
		margin:0 0 var(--XS-space);
		padding:0;
		font-size:22px;
		font-weight: bold;
	}

	&>h1{
		font-size:32px;
		margin:var(--XS-space) 0;
		width:auto;
		font-weight: bold;
		padding: 0;
		span{
			font-size:22px;
			margin-left:5px;
		}
	}

	.link_button{
		a{
			border-radius:80px;
			font-size:14px;
			span{
				font-size:14px;
				color:var(--link-color);
			}
			i{color:var(--link-color);}
		}
	}
	
	.genre-pickup-menu{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;
		margin: var(--XS-space) var(--XS-space) var(--M-space);
		a{
			display: block;
			width:20%;
			text-decoration: none;
			color: #363540;
			img{
				display: block;
				width: 80px;
				height:80px;
				border-radius: 50%;
				margin:0 auto;
			}

			p{
				font-size: 14x;
				text-align: center;
				margin-top: var(--XXS-space);
				padding: 0;
				letter-spacing: -1px;
			}
		}
	}	

	.genre-middle-category{
		margin: 0 var(--XS-space) var(--M-space);
		ul{
			display: flex;
			flex-wrap: wrap;
			li{
				width: 25%;
				padding:var(--XXS-space);
				a{
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					color: var(--text-color);
                    padding: var(--XS-space) var(--S-space);
                    background: #f9f9f9;
                    border-radius: 50px;
                    border: 1px solid #eee;
					img{
						display: block;
						width:40px;
						height:40px;
						margin-right: var(--XXS-space);
					}
					p{
						font-size: 14px;
						flex:1;
					}
				}
			}
		}

		&:not(:has(ul)){
			display: none;
		}
	}

	.genre-pickup-items{
		margin: 0 var(--XS-space) var(--M-space);
		ul{
			display: flex;
			overflow-y: hidden;
            overflow-x: scroll;
			padding-bottom: 25px;
			li{
				width:140px;
				flex-shrink: 0;
				scroll-snap-align: start;
				position: relative;
				&:not(:last-child){
					margin-right:var(--XS-space);
				}
				a{
					display: block;
					img{
						display: block;
						margin:0 auto;
						width:90%;
						height:auto;
					}

					p{
						margin-top:var(--XXS-space);
						font-size: 11px;
						color: var(--text-color);
						&.title{
							overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
						}
						&.price{
							font-size: 12px;
							font-weight: 600;
							s{
								font-size:10px;
								font-weight: normal;
								color:#999;
								display: block;
								margin-bottom: var(--XXS-space);
								text-decoration: revert;
							}
						}
					}
				}
				&:after{
					content:"";
					position:absolute;
					top:0;
					left:0;
					background:#555;
					color:#fff;
					line-height: 1;
					box-shadow:0 2px 2px rgba(0,0,0,0.2);
					width:30px;
					height:30px;
					font-size:10px;
					display:flex;
					justify-content:center;
					align-items:center;
					text-align:center;
					border-radius:35px;
					z-index:3;
				}
				&.newrelease:after{
					content:"新作";
					background:#40bad5;
				}
				&.restock:after{
					content:"再入荷";
					background:#61b15a;
				}
				&.recommend:after{
					content:"オス\Aスメ";
					background:#fa744f;
				}
				&.hot:after{
					content:"人気";
					background:#d8345f;
				}
				&.trend:after{
					content:"急上昇";
					background:#E0144C;
				}
				&.sale:after{
					content:"お得";
					background:#d8345f;
				}
				&.discount:after{
					content:"値下げ";
					background:#0eacdb;
				}
			}
		}
	}

	.genre-search-box{
		margin: 0 var(--XS-space) var(--M-space);
	}

	.ranking-wrap {
		margin: 0 var(--XS-space) var(--M-space);
		input {
			display: none;
		}
		/* タブメニュー */
		.tab-menu {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin: var(--S-space);
			label {
				width:30%;
				font-size: 16px;
				display: block;
				border: 1px solid #ddd;
				background: #f9f9f9;
				padding: 10px 0;
				border-radius: 80px;
				text-align: center;
				color: #1079af;
			}
		}
		/* 選択中タブ */
		#tab1:checked ~ .tab-menu label[for="tab1"],
		#tab2:checked ~ .tab-menu label[for="tab2"],
		#tab3:checked ~ .tab-menu label[for="tab3"],
		#tab4:checked ~ .tab-menu label[for="tab4"] {
			background: #fff;
			font-weight: bold;
			border: 2px solid #1079af;
		}

		/* 中身 */
		.tab-content {
			.content {
				display: none;
				ol{
					display: flex;
					flex-wrap:wrap;
					justify-content: space-between;
					counter-reset: ranking 3;
					li{
						width:25%;
						position: relative;
						padding:var(--XXS-space);
						a{display: block;padding:var(--XXS-space);}
						img{
							display: block;
							width:100%;
							height: auto;
						}
						
						p{
							font-size:11px;
							word-break: break-all;
							color: var(--text-color);
							&.title{
								line-height: 14px;
								min-height: 14px;
								max-height: 28px;
								overflow:hidden;
							}
							&.price{
								font-size: 12px;
								font-weight: bold;
								margin:3px 0 0;
								s{
									font-weight: normal;
									display: block;
									font-size: 10px;
									color:var(--gray-color);
									margin:3px 0 0;
									text-decoration: line-through;
								}
							}
						}

						&:nth-child(n+4){
							&::before{
								counter-increment: ranking;
  								content: counter(ranking);
								position: absolute;
								font-size: 10px;
								font-weight: bold;
								color: #fff;
								display: flex;
								width: 20px;
								height: 20px;
								line-height: 20px;
								border-radius: 20px;
								align-items: center;
								justify-content: center;
								background: #93cbdb;
							}
						}

						&:first-child::before,
						&:nth-child(2)::before,
						&:nth-child(3)::before{
						position: absolute;
						top: -6px;
						left: 0;
						width: 0;
						height: 0;
						border: 9px solid transparent;
						border-bottom: 9px solid #fb0;
						content: "";
						}
						&:first-child::after,
						&:nth-child(2)::after,
						&:nth-child(3)::after{
						position: absolute;
						top: 4px;
						left: 0;
						width: 0;
						height: 0;
						border: 9px solid #fb0;
						border-top: 5px solid transparent;
						border-bottom: 9px solid #f90;
						content: "";
						}
						&:nth-child(2)::before{
						border-bottom: 9px solid #ccc;
						}
						&:nth-child(2)::after{
						border: 9px solid #ccc;
						border-top: 5px solid transparent;
						border-bottom: 9px solid #aaa;
						}
						&:nth-child(3)::before{
						border-bottom: 9px solid #d98;
						}
						&:nth-child(3)::after{
						border: 9px solid #d98;
						border-top: 5px solid transparent;
						border-bottom: 9px solid #c76;
						}

						.texts+.texts,.discount_rate{display: none;}
					}
				}
			}
		}

		/* 表示制御 */
		#tab1:checked ~ .tab-content .content1 {
			display: block;
		}

		#tab2:checked ~ .tab-content .content2 {
			display: block;
		}

		#tab3:checked ~ .tab-content .content3 {
			display: block;
			ol{
				li{
					&::before,
					&::after{
						display: none !important;
					}
				}
			}
		}

		#tab4:checked ~ .tab-content .content4 {
			display: block;
		}
	}

	.new_feature_list{
		margin: 0 var(--XS-space) var(--M-space);
		 ul{
			margin:0;
		}

		.pickup-banner{
			margin-top:var(--XS-space);
			border-radius: 5px;
			overflow: hidden;
			img{
				display: block;
				width: 100%;
			}
		}
	}

	.genre-pickup-tag{
		margin: 0 var(--XS-space) var(--M-space);
		ul{
			display: flex;
			flex-wrap: wrap;
			gap: var(--XS-space);
			li{
			width:fit-content;
				a{
					word-break: break-all;
					font-size: 15px;
					font-weight: 600;
					color: var(--text-color);
					background: #eee;
					display: block;
					padding: var(--XS-space);
					border-radius: 3px;
				}
			}
		}
	}

	.genre-select-point{
		padding:var(--XS-space) var(--XS-space) var(--M-space);
        background: #fbf5e8;
		h3{
			border:0;
			padding:0;
			margin: 0;
			color:#000;
			font-size:15px;
			margin:var(--M-space) 0 var(--XS-space);
		}

		h4{
			font-size:14px;
			margin-top: var(--S-space);
		}
		img{width:100%;display: block;}
		&>p{
			background: #fff;
            font-size: 13px;
            line-height: 1.6;
            padding: var(--XS-space);
            margin: var(--XS-space) 0;
            border-radius: 8px;
		}

		table{
			width: 100%;
			margin:var(--XS-space) 0 var(--XXS-space);
		}

		table , td, th {
			border: 1px solid #ebcccf;
			border-collapse: collapse;
		}
		td, th {
			padding:var(--XXS-space);
			font-size: 12px;
			line-height:1.6;
			background: #fff;
		}
		th {
			background: #fdebed;
            word-break: break-word;
            width: 30%;
			font-size: 11px;
		}
		caption{
			background: #ebcccf;
            word-break: break-word;
			font-size: 13px;
			font-weight: bold;
			padding:var(--XS-space) 0;
			text-align:center;
		}

		.link_button a{
			border:2px solid #ebcccf;
			color: #cf7b84;
            font-weight: bold;
		}
	}

}

.outlet_list{
	margin: 0 var(--XS-space) var(--M-space);
	ul{
		display: flex;
		flex-wrap:wrap;
		justify-content: space-between;
		counter-reset: ranking 3;
		li{
			width:16%;
			position: relative;
			padding:var(--XXS-space);
			a{display: block;padding:var(--XXS-space);}
			img{
				display: block;
				width:100%;
				height: auto;
			}
			
			p{
				font-size:11px;
				word-break: break-all;
				color: var(--text-color);
				&.title{
					line-height: 14px;
					min-height: 14px;
					max-height: 28px;
					overflow:hidden;
				}
				&.price{
					font-size: 12px;
					font-weight: bold;
					margin:3px 0 0;
					s{
						font-weight: normal;
						display: block;
						font-size: 10px;
						color:var(--gray-color);
						margin:3px 0 0;
						text-decoration: line-through;
					}
				}
			}
			.thumb{
				position: relative;
				.discount_price{
					position: absolute;
					top: auto;
					bottom: 0;
					left: 0;
					font-size: 10px;
					height: 18px;
					line-height: 18px;
					text-align: center;
					letter-spacing: -0.5px;
					width: 100%;
					border-radius: 0;
					background: rgba(180, 0, 0, 0.8);
					color:#fff;
				}
			}



            .texts+.texts, .discount_rate {
                display: none;
            }
		}
	}
}
.star{
	display: flex;
	align-items: baseline;
	span{
		color: var(--text-color);
		font-size: 10px;
	}
	.review{display: none;}
}

.star .rating span{
	position:relative;
	z-index:0;
	display:inline-block;
	white-space:nowrap;
	color:#ddd;
	font-size: 14px;
	letter-spacing:-1px;
}

.star .rating span:before,
.star .rating span:after{
	content:'★★★★★';

}

.star .rating span:after{
	position:absolute;
	z-index:1;
	top:0;
	left:0;
	overflow:hidden;
	white-space:nowrap;
	color:#f9bf3b;
}

.star span[data-rate="0"],
.star span[data-rate=""],
.star span[data-rate="0.0"],
.star:has(span[data-rate=""]){
	display:none;
}
.star .rating span[data-rate="5.0"]:after{width:100%;}
.star .rating span[data-rate="4.9"]:after{width:98%;}
.star .rating span[data-rate="4.8"]:after{width:96%;}
.star .rating span[data-rate="4.7"]:after{width:94%;}
.star .rating span[data-rate="4.6"]:after{width:92%;}
.star .rating span[data-rate="4.5"]:after{width:90%;}
.star .rating span[data-rate="4.4"]:after{width:88%;}
.star .rating span[data-rate="4.3"]:after{width:86%;}
.star .rating span[data-rate="4.2"]:after{width:84%;}
.star .rating span[data-rate="4.1"]:after{width:82%;}
.star .rating span[data-rate="4.0"]:after{width:80%;}
.star .rating span[data-rate="3.9"]:after{width:78%;}
.star .rating span[data-rate="3.8"]:after{width:76%;}
.star .rating span[data-rate="3.7"]:after{width:74%;}
.star .rating span[data-rate="3.6"]:after{width:72%;}
.star .rating span[data-rate="3.5"]:after{width:70%;}
.star .rating span[data-rate="3.4"]:after{width:68%;}
.star .rating span[data-rate="3.3"]:after{width:66%;}
.star .rating span[data-rate="3.2"]:after{width:64%;}
.star .rating span[data-rate="3.1"]:after{width:62%;}
.star .rating span[data-rate="3.0"]:after{width:60%;}
.star .rating span[data-rate="2.9"]:after{width:58%;}
.star .rating span[data-rate="2.8"]:after{width:56%;}
.star .rating span[data-rate="2.7"]:after{width:54%;}
.star .rating span[data-rate="2.6"]:after{width:52%;}
.star .rating span[data-rate="2.5"]:after{width:50%;}
.star .rating span[data-rate="2.4"]:after{width:48%;}
.star .rating span[data-rate="2.3"]:after{width:46%;}
.star .rating span[data-rate="2.2"]:after{width:44%;}
.star .rating span[data-rate="2.1"]:after{width:42%;}
.star .rating span[data-rate="2.0"]:after{width:40%;}
.star .rating span[data-rate="1.9"]:after{width:38%;}
.star .rating span[data-rate="1.8"]:after{width:36%;}
.star .rating span[data-rate="1.7"]:after{width:34%;}
.star .rating span[data-rate="1.6"]:after{width:32%;}
.star .rating span[data-rate="1.5"]:after{width:30%;}
.star .rating span[data-rate="1.4"]:after{width:28%;}
.star .rating span[data-rate="1.3"]:after{width:26%;}
.star .rating span[data-rate="1.2"]:after{width:24%;}
.star .rating span[data-rate="1.1"]:after{width:22%;}
.star .rating span[data-rate="1.0"]:after{width:20%;}



.genre-search-box form{
	position: relative;
	margin:10px;
}


.genre-search-box form input[type="text"]{
	border:1px solid #ddd;
	border-radius:50px;
	display:block;
	font-size:16px;
	line-height:1.6;
	padding:20px;
	width:50%;
	margin:0 auto;
}


.genre-search-box form input[type="text"]::placeholder {
	font-size: 16px;
	color:#ddd;
}

.genre-search-box form input[type="submit"]{
	font-family: 'Material Symbols Outlined';
	position: absolute;
	top: 18%;
    right: 27%;
    font-size: 40px;
	background: transparent;
	color:#e00f4e;
}

.genre-search-box form+ul{
	display:block;
}

.genre-search-box form+ul li{
	width:auto;
	height:auto;
	line-height:2;
	padding:5px 10px;
	display:block;
	border:0;
	border-radius:0;
	margin:0;
	background:#fff;
}

.genre-search-box form+ul li:nth-child(2n){
	background:#f9f9f9;
}

.genre-search-box form+ul li a{
	font-size: 12px;
	color:#363540;
	padding:5px;
	display:block;
	border:0;
}

.genre-search-box form+ul li.boom a::before{
	font-family:"fontello";
	content:"\f201";
	margin-right:5px;

}


.new_feature_list ul{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(1, 1fr);
	grid-column-gap: 5px;
	grid-row-gap: 5px;
	margin:5%;
}

.new_feature_list ul li{
	height: 150px;
	position: relative;
	padding: 0;
	border-radius: 5px;
	overflow: hidden;
	background-size: cover;
	background-position: center;
}

.new_feature_list ul li:first-child:before{
	content: "NEW";
	position: absolute;
	top: 5px;
    left: -32px;
    transform: rotate(320deg);
    background: #34aec3;
    color: #fff;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
    width: 99px;
    height: 23px;
	font-size: 12px;
	font-weight: bold;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	z-index: 3;
}

.new_feature_list ul li a{
	display:block;
	color:#363540;
	position: relative;
	overflow:hidden;
	height:100%;
	color: #fff;
}

.new_feature_list ul li img{
	display:block;
	width:100%;
	
}


.new_feature_list ul li div{
	font-size:12px;
	padding:5px;
	position: absolute;
	color: #fff;
	bottom: 0;
	width:100%;
	background: rgba(0, 0, 0, 0.5);
}

.new_feature_list ul li .title{
	font-weight:bold;
	font-size:14px;
	display: -webkit-box;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow:hidden;
	line-height: 1.1;
	color: #fff;
}

.new_feature_list ul li .time{
	font-size:11px;
	text-align:right;
	margin:3px 0;
	color: #fff;
}