#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:75.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:640px;
	margin:0 auto;

	.breadcrumb{
		display:flex;
		align-items:center;
		margin:0 0 0 var(--XS-space);

		li {
			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:15px;
	}

	&>h1{
		font-size:16px;
		margin:var(--XS-space);
		span{
			font-size:11px;
			margin-left:5px;
		}
	}

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

			p{
				font-size: 10px;
				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: 50%;
				a{
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					color: var(--text-color);
					padding: var(--XS-space);
					img{
						display: block;
						width:20px;
						height:20px;
						margin-right: var(--XXS-space);
					}
					p{
						font-size: 12px;
						flex:1;
					}
				}
			}
		}
	}

	.genre-pickup-items{
		margin: 0 var(--XS-space) var(--M-space);
		ul{
			display: flex;
			overflow:hidden;
			overflow-x: scroll;
			scroll-snap-type: x mandatory;
			li{
				width:80px;
				flex-shrink: 0;
				scroll-snap-align: start;
				&: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;
							}
						}
					}
				}
			}
		}
	}

	.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(--XXS-space);
			label {
				width:30%;
				font-size: 11px;
				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:33%;
						position: relative;
						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;
								}
							}
						}

						&: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: -1px;
						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: 9px;
						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{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: 13px;
					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;
		}
	}

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