@charset "UTF-8";

:root {
	--g-color-red: #F03737;
	--g-color-bg:  #F8F8F8;
	--g-color-btn: #333333;
	--g-transition: 0.3s;
}
.genre-function {
	font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	overflow: hidden;
}
.genre-function * { box-sizing: border-box;}
.genre-function a { text-decoration: none;}
.genre-function img { vertical-align: bottom;}
.genre-function h1,
.genre-function h2,
.genre-function h3 { padding: 0; margin: 0;}

.genre-function .genre-block-title { padding: 0; margin: 0 0 40px; border: none; font-size: 20px; font-weight: 700; text-align: center;}
.genre-function .genre-block-title span { margin: 5px 0 0; font-size: 16px; font-weight: 700; text-align: center; color: var(--g-color-red); display: block;}

@media only screen and (min-width: 750px) { 
	.genre-function .for-sp { display: none !important;}
  .genre-function { width: 900px; margin: 0 auto;}
}
@media only screen and (max-width: 749px) {
	.genre-function .for-pc { display: none !important;}
  .genre-function { width: 100%; padding: 0;}
	.genre-function .genre-block-title { margin: 0 0 30px; font-size: 18px;}
	.genre-function .genre-block-title span { font-size: 14px;}
}

/*-----------------------------------------
 見出し
-----------------------------------------*/
.genre-function #sec_head {
	background-color: #F8F8F8;
	display: grid;
	align-items: center;
	grid-template-columns: 587fr 313fr;
	margin-bottom: 50px;
}
.genre-function #sec_head .sec_head-text {
	text-align: center;
	padding: 20px;
}
.genre-function #sec_head .sec_head-mv {
}
.genre-function #sec_head .genre-function-title {
	font-size: 30px;
	font-weight: bold;
	line-height: 1.2;
	margin-bottom: 32px;
}
.genre-function #sec_head .genre-function-title > span {
	font-size: 24px;
	font-weight: inherit;
	line-height: inherit;
}
.genre-function #sec_head .genre-function-lead {
	display: flex;
	flex-direction: column;
	row-gap: 10px;
	text-align: center;
}
.genre-function #sec_head .genre-function-lead-appeal {
	color: #f03737;
	font-size: 18px;
	font-weight: bold;
	line-height: calc(30 / 18);
}
.genre-function #sec_head .genre-function-lead-text {
	font-size: 18px;
	font-weight: 500;
	line-height: calc(30 / 18);
}
@media only screen and (max-width: 749px) {
	.genre-function #sec_head {
		background-color: transparent;
		grid-template-columns: 1fr;
		margin-bottom: 0;
	}
	.genre-function #sec_head .sec_head-text {
		text-align: center;
		padding-block: calc(24 / 414 * 100vw) calc(34 / 414 * 100vw);
		padding-inline: calc(20 / 414 * 100vw);
	}
	.genre-function #sec_head .sec_head-mv {
		order: -1;
	}
	.genre-function #sec_head .genre-function-title {
		border-bottom: none;
		font-size: calc(26 / 414 * 100vw);
		letter-spacing: 0;
		padding-inline: calc(15 / 414 * 100vw);
		margin-bottom: calc(22 / 414 * 100vw);
	}
	.genre-function #sec_head .genre-function-title > span {
		font-size: calc(20 / 414 * 100vw);
	}
	.genre-function #sec_head .genre-function-lead {
		row-gap: calc(6 / 414 * 100vw);
		padding-inline: calc(15 / 414 * 100vw);
	}
	.genre-function #sec_head .genre-function-lead-appeal {
		font-size: calc(16 / 414 * 100vw);
		line-height: calc(24 / 16);
	}
	.genre-function #sec_head .genre-function-lead-text {
		font-size: calc(16 / 414 * 100vw);
		line-height: calc(24 / 16);
	}
}

/*-----------------------------------------
 ランキング（関連子イベント）
-----------------------------------------*/
.genre-function #sec_ranking { padding: 0; margin: 0 0 50px;}
.genre-function #sec_ranking h2.block-top-event--header { display: none;}
.genre-function #sec_ranking .block-top-event--goods { margin-bottom: 0;}
.genre-function #sec_ranking .block-ranking-r { width: auto; padding: 0; margin: 0; border: none;}
.genre-function #sec_ranking .block-ranking-r .block-ranking-r--items { padding: 0; margin: 0; border: none; display: flex; flex-wrap: nowrap;}
.genre-function #sec_ranking .block-ranking-r .block-ranking-r--items li { width: 170px; padding: 0; margin-bottom: 40px;}
.genre-function #sec_ranking .block-ranking-r .block-ranking-r--items .block-ranking-r--price-infos { text-align: left;}
.genre-function #sec_ranking .block-ranking-r .block-ranking-r--items .block-ranking-r--price-items { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px;}
.genre-function #sec_ranking .block-ranking-r .block-ranking-r--items .block-ranking-r--price { text-align: left;}
.genre-function #sec_ranking .block-ranking-r .block-ranking-r--items .default-price { font-size: 11px; font-weight: 500; color: #B2B2B2;}
.genre-function #sec_ranking .block-ranking-r .block-ranking-r--items .default-price .price-small { display: none;}
.genre-function #sec_ranking .block-ranking-r .block-ranking-r--items .block-ranking-r--goods-description .customize_block-goods-bookmark { top: 125px;}
.genre-function #sec_ranking .block-ranking-r .block-ranking-r--items .block-ranking-r--scomment { font-size: 10px;}
.genre-function #sec_ranking .block-ranking-r .block-ranking-r--items .block-ranking-r--goods-image .block-ranking-r--rank {
	width: 32px;
	height: 40px;
	border: none;
	border-radius: 0;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 19px;
	font-weight: 700;
	color: #fff;
	justify-content: center;
	align-items: center;
	display: none;
	top: 0;
	left: 12px;
	right: auto;
	z-index: 2;
}
.genre-function #sec_ranking .block-ranking-r .block-ranking-r--items .block-ranking-r--goods-image .block-ranking-r--rank::before {
	content: '';
	width: 32px;
	height: 10px;
	border-left: #000 16px solid;
	border-right: #000 16px solid;
	border-bottom: transparent 10px solid;
	display: block;
	position: absolute;
	left: 0;
	bottom: -10px;
}
.genre-function #sec_ranking .block-ranking-r .block-icon .block-icon--auto-new.block-icon-blue { display: none;}
.genre-function #sec_ranking .block-ranking-r .block-icon .block-icon--auto-on-sales { left: auto; right: 7px;}
.genre-function #sec_ranking .block-ranking-r .block-ranking-r--items .block-ranking-r--rank.block-ranking-r--rank-1 { background-color: #BBAA71; display: flex;}
.genre-function #sec_ranking .block-ranking-r .block-ranking-r--items .block-ranking-r--rank.block-ranking-r--rank-2 { background-color: #7E8183; display: flex;}
.genre-function #sec_ranking .block-ranking-r .block-ranking-r--items .block-ranking-r--rank.block-ranking-r--rank-3 { background-color: #BB7171; display: flex;}
.genre-function #sec_ranking .block-ranking-r .block-ranking-r--items .block-ranking-r--rank.block-ranking-r--rank-1::before { border-left-color: #BBAA71; border-right-color: #BBAA71;}
.genre-function #sec_ranking .block-ranking-r .block-ranking-r--items .block-ranking-r--rank.block-ranking-r--rank-2::before { border-left-color: #7E8183; border-right-color: #7E8183;}
.genre-function #sec_ranking .block-ranking-r .block-ranking-r--items .block-ranking-r--rank.block-ranking-r--rank-3::before { border-left-color: #BB7171; border-right-color: #BB7171;}

.genre-function #sec_ranking .block-ranking-r .block-ranking-r--items .block-ranking-r--item.block-ranking-r--goods-rank-1 .block-ranking-r--rank { background-color: #BBAA71; display: flex;}
.genre-function #sec_ranking .block-ranking-r .block-ranking-r--items .block-ranking-r--item.block-ranking-r--goods-rank-2 .block-ranking-r--rank { background-color: #7E8183; display: flex;}
.genre-function #sec_ranking .block-ranking-r .block-ranking-r--items .block-ranking-r--item.block-ranking-r--goods-rank-3 .block-ranking-r--rank { background-color: #BB7171; display: flex;}
.genre-function #sec_ranking .block-ranking-r .block-ranking-r--items .block-ranking-r--item.block-ranking-r--goods-rank-1 .block-ranking-r--rank::before { 
	border-left-color: #BBAA71; border-right-color: #BBAA71;
}
.genre-function #sec_ranking .block-ranking-r .block-ranking-r--items .block-ranking-r--item.block-ranking-r--goods-rank-2 .block-ranking-r--rank::before {
	border-left-color: #7E8183; border-right-color: #7E8183;
}
.genre-function #sec_ranking .block-ranking-r .block-ranking-r--items .block-ranking-r--item.block-ranking-r--goods-rank-3 .block-ranking-r--rank::before {
	border-left-color: #BB7171; border-right-color: #BB7171;
}

@media only screen and (max-width: 749px) {
	.genre-function #sec_ranking {
			background-color: #F8F8F8;
			padding-block: 32px;
			padding-left: 35px;
			margin-bottom: 32px;
		}
	.genre-function #sec_ranking h2.genre-block-title { padding-right: 35px;}
	.genre-function #sec_ranking .block-top-event--goods { margin-bottom: 0;}
	.genre-function #sec_ranking .block-ranking-r--items .block-ranking-r--goods-name {
		max-height: 15px * 1.4 * 3;
		font-size: 15px;
		font-weight: 500;
		line-height: 1.4;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}
	.genre-function #sec_ranking .swiper-scrollbar.swiper-scrollbar-horizontal { width: calc(98% - 35px);}
}