/* CSS Document */

#header{
	@media (min-width: 1200px) {
		.scrollTop &{
			border: none;
		}
	}
}

#siteName{
	@media (min-width: 1200px) {
		.scrollTop &{
			position: relative;
			width: clamp(240px, calc(280 / 1400 * 100vw), 280px);
			align-self: start;
			& a{
				position: absolute;
				top: -8px;
				left: 0;
				aspect-ratio: 30 / 27;
				width: 100%;
				height: auto;
				background: #fff url("/common/images/logo.wake.vt.svg") no-repeat center top / contain;
				border-radius: 0 0 10px 10px;
			}
		}
	}
}

#pagePath{
	display: none;
	}

#main{
	display: grid;
	margin-bottom: clamp(80px, calc(120 / 1200 * 100vw), 120px);
	#hero{
		order: -1;
	}
}

[id$='Link']{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	grid-gap: 16px 40px;
	& a{
		display: grid;
		grid-template-columns: auto auto;
		grid-gap: 1em;
		justify-content: center;
		align-items: center;
		min-width: min(100%, 400px);
		min-height: clamp(64px, calc(80 / 768 * 100vw), 80px);
		padding: 0.5em 1.5em;
		background: #fff;
		border: 1px solid #b3b3b3;
		border-radius: clamp(32px, calc(40 / 768 * 100vw), 40px);
		color: inherit;
		font-size: clamp(14px, calc(20 / 768 * 100vw), 20px);
		letter-spacing: 0.1em;
		text-align: center;
		text-decoration: none;
		&:before,
		&:after{
			content: "";
			aspect-ratio: 1;
			grid-column: 2;
			grid-row: 1;
			align-self: center;
			justify-self: center;
		}
		&:before{
			width: clamp(24px, calc(32 / 768 * 100vw), 32px);
			background: currentColor;
			border-radius: 100%;
		}
		&:after{
			width: 16px;
			background: #fff;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1px;"><polyline points="2 8 14 8"/><polyline points="10 4 14 8 10 12"/></svg>') no-repeat center / contain;
			@media (max-width: 767.98px) {
				-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1px;"><polyline points="4 8 12 8"/><polyline points="9 5 12 8 9 11"/></svg>');
			}
		}
		&:hover{
			background: var(--color);
			border-color: transparent;
			color: #fff;
			&:after{
				background: inherit;
			}
		}
	}
}

[id$='Category']{
	& dl{
		display: flex;
		grid-gap: 8px;
	}
	& dd{
		cursor: pointer;
	}
	@media (max-width: 1199.98px) {
		& dl{
			flex-wrap: wrap;
		}
		& dt{
			width: 100%;
			font-size: clamp(12px, calc(16 / 768 * 100vw), 16px);
		}
		& dd{
			display: grid;
			grid-template-columns: auto 1em;
			align-items: center;
			column-gap: 0.5em;
			min-height: 3em;
			padding: 0.5em 1em;
			border: 1px solid #b3b3b3;
			border-radius: 1.5em;
			color: inherit;
			font-size: clamp(10px, calc(14 / 768 * 100vw), 14px);
			letter-spacing: 0.1em;
			text-decoration: none;
			&:after{
				content: "";
				aspect-ratio: 1;
				background: var(--color-theme);
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><polygon points="7 10 12 4 2 4 7 10"/></svg>') no-repeat center / contain;
			}
			&.select{
				background: var(--color-theme);
				color: #fff;
				&:after{
					background: currentColor;
				}
			}
		}
	}
	@media (min-width: 576px) and (max-width: 1199.98px) {
		& dl{
			justify-content: center;
		}
		& dt{
			text-align: center;
		}
	}
	@media (min-width: 1200px) {
		display: grid;
		grid-template-columns: 1fr var(--wrap) 1fr;
		&:before{
			content: "";
			grid-column: 1 / 4;
			grid-row: 1;
			border-bottom: 1px solid #b3b3b3;
			pointer-events: none;
			z-index: -1;
		}
		& dl{
			grid-column: 2;
			grid-row: 1;
			justify-content: center;
		}
		& dt{
			align-self: center;
			margin-right: 8px;
		}
		& dd{
			position: relative;
			display: grid;
			vertical-align: middle;
			padding: 1em 2.5em 1em 1em;
			border: 1px solid #b3b3b3;
			border-radius: 0.75em 0.75em 0 0;
			color: inherit;
			font-size: clamp(12px, calc(16 / 768 * 100vw), 16px);
			letter-spacing: 0.1em;
			text-decoration: none;
			cursor: pointer;
			overflow: hidden;
			z-index: 1;
			&:after{
				content: "";
				position: absolute;
				top: 50%;
				right: 1em;
				aspect-ratio: 1;
				width: 1em;
				background: var(--color-theme);
				transform: translateY(-50%);
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><polygon points="7 10 12 4 2 4 7 10"/></svg>') no-repeat center / contain;
			}
			&.select{
				position: relative;
				border-bottom: none;
				color: #fff;
				z-index: 1;
				&:before{
					content: "";
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					background: var(--color-theme);
					outline: 1em solid #fff;
					outline-offset: -0.5em;
					border-radius: 0.75em;
					z-index: -1;
				}
				&:after{
					background: currentColor;
				}
			}
		}
	}
}

#hero{
	overflow: hidden;
	margin-top: 8px;
	@media (min-width: 1200px) {
		margin-top: 16px;
	}
	#heroMovie{
		display: none;
	}
}

#heroPhoto{
	display: grid;
	grid-template-columns: auto 1fr auto;
	@media (min-width: 1200px) {
		width: min(var(--wrap-fit), 1120px);
		margin: 0 auto;
	}
	&:before{
		content: "";
		aspect-ratio: 1120 / 540;
		grid-column: 1 / 4;
		grid-row: 1;
		visibility: hidden;
	}
	&>dl{
		grid-column: 1 / 4;
		grid-row: 1;
		&:nth-child(n+2){
			visibility: hidden;
		}
	}
	& dl{
		display: grid;
		grid-row-gap: 16px;
		margin: 0 10px;
	}
	& dt{
		font: 700 clamp(16px, calc(24 / 768 * 100vw), 24px)  'Noto Serif JP', sans-serif;
		letter-spacing: 0.18em;
		text-align: center;
	}
	& dd{
		display: contents;
		& a{
			grid-column: 1;
			grid-row: 1;
			display: block;
			z-index: 1;
		}
		& picture{
			grid-column: 1;
			grid-row: 1;
			display: grid;
			&>*{
				grid-column: 1;
				grid-row: 1;
			}
		}
		& img{
			aspect-ratio: 390 / 590;
			object-fit: cover;
			@media (min-width: 576px) {
				aspect-ratio: 3 / 2;
			}
			@media (min-width: 1200px) {
				aspect-ratio: 1120 / 540;
				border-radius: 10px;
			}
		}
	}
	.slick-list{
		grid-column: 1 / 4;
		grid-row: 1 / 3;
		margin: 0 -10px;
		overflow: visible;
	}
	.slick-arrow{
		all: unset;
		align-self: center;
		grid-row: 1;
		position: relative;
		z-index: 1;
		aspect-ratio: 36 / 80;
		width: 40px;
		border-radius: 8px;
		background: rgba(255, 255, 255, 0.6);
		font-size: 0;
		cursor: pointer;
		&:before{
			content: "";
			position: absolute;
			top: 0;
			width: calc(100% - 8px);
			height: 100%;
			background: var(--color);
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><polyline points="8 4 16 12 8 20"/></svg>') no-repeat center / 24px;
		}
	}
	.slick-prev{
		grid-column: 1;
		transform: translateX(-8px);
		&:before{
			right: 0;
			transform: scale(-1, 1);
		}
	}
	.slick-next{
		grid-column: 3;
		transform: translateX(8px);
		&:before{
			left: 0;
		}
	}
	.slick-dots{
		grid-column: 1 / 4;
		grid-row: 3;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		grid-gap: 16px clamp(24px, calc(32 / 576 * 100vw), 32px);
		margin-top: 24px;
		&:has(li:only-child){
			display: none;
			}
		li{
			display: contents;
			}
		button{
			all: unset;
			box-sizing: border-box;
			aspect-ratio: 1;
			width: 9px;
			background: #b3b3b3;
			border-radius: 100%;
			font-size: 0;
			overflow: hidden;
			.slick-active &{
				background: var(--color-theme-sub);
			}
		}
	}
}

#heroMovie{
	position: relative;
	overflow: hidden;
	aspect-ratio: 390 / 590;
	@media (min-width: 576px) {
		aspect-ratio: 3 / 2;
	}
	@media (min-width: 1200px) {
		aspect-ratio: 1120 / 540;
	}
	[class^="moviePlayer_"]{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-position: center center !important;
		background-attachment: inherit !important;
		background-size: cover !important;
		pointer-events: none;
		}
	.inline-YTPlayer,
	.ytp{
		position: static !important;
		}
	.playerBox{
		top: 50% !important;
		left: 50% !important;
		margin: 0 !important;
		transform: translate(-50%, -50%);
		}
	}

#emergency{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	margin-top: 40px;
	&>*{
		grid-column: 2;
	}
	& h2{
		display: none;
	}
	& h2+div{
		display: grid;
		grid-row-gap: 24px;
	}
	& section{
		display: grid;
		grid-row-gap: 16px;
		padding: 24px;
		background: #f2f2f2;
		border-radius: 10px;
	}
	& h3{
		display: grid;
		grid-template-columns: auto auto;
		justify-content: center;
		align-items: center;
		column-gap: 16px;
		font-size: clamp(16px, calc(20 / 768 * 100vw), 20px);
		letter-spacing: 0.1em;
		&:before{
			content: "";
			aspect-ratio: 1;
			width: 40px;
			background: var(--color-theme);
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><path d="M20,27.96c-1.31,0-2.38,1.07-2.38,2.39s1.06,2.39,2.38,2.39,2.37-1.07,2.37-2.39c0-1.32-1.06-2.39-2.37-2.39ZM20,11.87c-1.31,0-2.38,1.07-2.38,2.39l.91,10.82c0,.81.65,1.47,1.46,1.47s1.46-.66,1.46-1.47l.91-10.82c0-1.32-1.06-2.39-2.37-2.39ZM39.46,31.9L23.5,4.03c-.72-1.26-2.06-2.03-3.5-2.03s-2.78.78-3.5,2.03L.54,31.9c-.72,1.26-.72,2.81,0,4.07.72,1.26,2.06,2.03,3.5,2.03h31.93c1.44,0,2.78-.78,3.5-2.03.72-1.26.72-2.81,0-4.07ZM36.29,33.89c-.23.4-.66.65-1.12.65H4.83c-.46,0-.89-.25-1.12-.65-.23-.4-.23-.9,0-1.3L18.88,6.11c.23-.4.66-.65,1.12-.65s.89.25,1.12.65l15.17,26.47c.23.4.23.9,0,1.3Z"/></svg>') no-repeat center / contain;
		}
	}
	& h3+div{
		display: flex;
		justify-content: center;
	}
	& a{
		display: grid;
		grid-template-columns: auto auto;
		justify-content: center;
		align-items: center;
		column-gap: 16px;
		min-width: min(100%, 420px);
		min-height: clamp(48px, calc(56 / 768 * 100vw), 56px);
		padding: 8px 16px;
		border-radius: clamp(24px, calc(28 / 768 * 100vw), 28px);
		background: var(--color-theme);
		color: #fff;
		font-weight: 700;
		font-size: clamp(14px, calc(16 / 768 * 100vw), 16px);
		letter-spacing: 0.1em;
		text-align: center;
		text-decoration: none;
		&:before,
		&:after{
			content: "";
			aspect-ratio: 1;
			grid-column: 2;
			grid-row: 1;
			align-self: center;
			justify-self: center;
		}
		&:before{
			width: clamp(24px, calc(32 / 768 * 100vw), 32px);
			background: currentColor;
			border-radius: 100%;
		}
		&:after{
			width: 16px;
			background: inherit;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1px;"><polyline points="2 8 14 8"/><polyline points="10 4 14 8 10 12"/></svg>') no-repeat center / contain;
			@media (max-width: 767.98px) {
				-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1px;"><polyline points="4 8 12 8"/><polyline points="9 5 12 8 9 11"/></svg>');
			}
		}
		&:hover{
			background: var(--color);
			border-color: transparent;
			color: #fff;
		}
	}
}

#pickup{
	justify-self: center;
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	width: min(100%, 1360px);
	margin-top: clamp(40px, calc(80 / 1200 * 100vw), 80px);
	overflow: hidden;
	&>*{
		grid-column: 2;
	}
	& h2{
		justify-self: center;
		display: grid;
		justify-items: center;
		grid-row-gap: 16px;
		font: 700 clamp(24px, calc(40 / 768 * 100vw), 40px) 'Kaisei Opti', 'Noto Serif JP', sans-serif;
		text-align: center;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		&:before{
			content: "";
			aspect-ratio: 1;
			width: 60px;
			background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><path d="M41.72,23.32h14.3c.61,0,1.18-.32,1.5-.84.32-.52.34-1.17.06-1.72l-7.15-13.95c-.3-.59-.9-.96-1.56-.96s-1.26.37-1.56.96l-7.15,13.95c-.28.55-.26,1.2.06,1.72.32.52.89.84,1.5.84ZM59.74,34.93l-5.02-8.1h-11.7l-5.02,8.1c-.34.54-.35,1.22-.04,1.78.31.56.9.9,1.54.9h7.62v5.53c.91.34,1.8.71,2.67,1.11.29.13.57.27.85.4v-7.04h7.62c.64,0,1.23-.35,1.54-.9.31-.56.29-1.24-.04-1.78Z" style="fill: %23f6c641;"/><path d="M15.82,35.07v7.11c1.14-.33,2.32-.62,3.52-.88v-6.24c8.87-.88,15.82-8.39,15.82-17.49C35.16,7.89,27.27,0,17.58,0S0,7.89,0,17.58c0,9.1,6.95,16.61,15.82,17.49ZM8.73,20.45c.49-.84,1.56-1.13,2.4-.64l4.69,2.71v-9.15c0-.97.79-1.76,1.76-1.76s1.76.79,1.76,1.76v4.44l5.45-3.15c.84-.49,1.92-.2,2.4.64.49.84.2,1.92-.64,2.4l-7.21,4.16v13.07h-3.52v-8.35l-6.45-3.72c-.84-.49-1.13-1.56-.64-2.4ZM59.28,57.52c-1.71-4.08-5.5-7.56-10.97-10.08-5.29-2.43-11.62-3.72-18.31-3.72s-13.12,1.33-18.34,3.73c-5.48,2.52-9.27,6.02-10.96,10.11-.22.54-.16,1.16.16,1.65.33.49.87.78,1.46.78h0l55.33-.04c.59,0,1.14-.29,1.46-.78.33-.49.39-1.11.16-1.65Z" style="fill: %239491b8;"/></svg>') no-repeat center / contain;
		}
	}
	@media (max-width: 1199.98px) {
		#pickupCategory{
			margin: 24px 0 20px 0;
		}
	}
	@media (min-width: 1200px) {
		grid-template-columns: 300px 1fr;
		grid-row-gap: 20px;
		& h2{
			grid-column: 1;
			grid-row: 2;
			align-self: center;
		}
		#pickupCategory{
			grid-column: 1 / 3;
			grid-row: 1;
		}
		#pickupList{
			grid-column: 2;
			grid-row: 2;
			padding: 20px 0 0 20px;
			border-left: 1px solid #b3b3b3;
		}
		
	}
}

#pickupList{
	display: grid;
	& article{
		grid-column: 1;
		grid-row: 1;
		&:not(.select){
			visibility: hidden;
		}
	}
	& h2{
		display: none;
	}
	& section{
		position: relative;
		display: grid;
		grid-row-gap: 16px;
		&:not(:has(figure)){
			&:before{
				content: "";
				order: -1;
				aspect-ratio: 3 / 2;
				background: var(--dummy);
				border-radius: 10px;
			}
		}
		@media (min-width: 576px) {
			width: 360px;
		}
	}
	& h3{
		text-align: center;
		font-size: clamp(14px, calc(16 / 768 * 100vw), 16px);
	}
	& h3+div{
		display: contents;
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
		}
	}
	& figure{
		order: -1;
		& img{
			aspect-ratio: 3 / 2;
			object-fit: cover;
			border-radius: 10px;
			&[src]{
				display: block;
				background: #ccc;
			}
		}
	}
	.slide:not(.slick-initialized){
		display: grid;
		grid-template-columns: calc(100% - 100px);
		justify-content: start;
		grid-gap: 20px;
		@media (min-width: 576px) {
			display: flex;
			flex-wrap: wrap;
		}
	}
	.slick-slider{
		display: grid;
		grid-template-columns: auto 1fr auto;
		overflow: hidden;
		&:before{
			content: "";
			grid-column: 1 / 4;
			grid-row: 1;
			aspect-ratio: 3 / 2;
		}
		@media (max-width: 575.98px) {
			&:before{
				margin-right: 100px;
			}
		}
		@media (min-width: 576px) {
			&:before{
				width: 360px;
			}
		}
	}
	.slick-list{
		grid-column: 1 / 4;
		grid-row: 1 / 3;
		margin: 0 -10px;
		@media (max-width: 575.98px) {
			padding-right: 100px;
		}
	}
	.slick-slide{
		padding: 0 10px;
	}
	.slick-arrow{
		all: unset;
		align-self: center;
		grid-row: 1;
		position: relative;
		z-index: 1;
		aspect-ratio: 36 / 80;
		width: 40px;
		border-radius: 8px;
		background: rgba(255, 255, 255, 0.6);
		font-size: 0;
		cursor: pointer;
		&:before{
			content: "";
			position: absolute;
			top: 0;
			width: calc(100% - 8px);
			height: 100%;
			background: var(--color);
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><polyline points="8 4 16 12 8 20"/></svg>') no-repeat center / 24px;
		}
	}
	.slick-prev{
		grid-column: 1;
		transform: translateX(-8px);
		&:before{
			right: 0;
			transform: scale(-1, 1);
		}
	}
	.slick-next{
		grid-column: 3;
		transform: translateX(8px);
		&:before{
			left: 0;
		}
	}
}

#ranking{
	display: grid;
	grid-template-columns: 1fr min(var(--wrap-fit),1360px) 1fr;
	margin-top: clamp(40px, calc(120 / 1200 * 100vw), 120px);
	&>*{
		grid-column: 2;
	}
	& h2{
		justify-self: center;
		display: grid;
		justify-items: center;
		grid-row-gap: 16px;
		font: 700 clamp(24px, calc(32 / 768 * 100vw), 32px)  'Noto Serif JP', sans-serif;
		text-align: center;
		letter-spacing: 0.1em;
		&:before{
			content: "";
			aspect-ratio: 1;
			width: 60px;
			background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><path d="M57.98,39.83h-12.61c-1.11,0-2.02.91-2.02,2.02v16.13c0,1.11.91,2.02,2.02,2.02h12.61c1.11,0,2.02-.91,2.02-2.02v-16.13c0-1.11-.91-2.02-2.02-2.02ZM47.37,30.65l-.55,4.8c-.15.46.38.85.78.56l4.08-2.46,4.08,2.46c.4.29.93-.1.78-.56l-.55-4.8,3.08-2.97c.4-.29.19-.91-.3-.91l-4.54-.5-2.06-4.3c-.15-.46-.81-.46-.96,0l-2.06,4.3-4.54.5c-.49,0-.69.62-.3.91l3.08,2.97Z" style="fill: %23a9dadb;"/><path d="M36.3,29.75h-12.61c-1.11,0-2.02.91-2.02,2.02v26.22c0,1.11.91,2.02,2.02,2.02h12.61c1.11,0,2.02-.91,2.02-2.02v-26.22c0-1.11-.91-2.02-2.02-2.02ZM25.69,19.56l-.55,4.8c-.15.46.38.85.78.56l4.08-2.46,4.08,2.46c.4.29.93-.1.78-.56l-.55-4.8,3.08-2.97c.4-.29.19-.91-.3-.91l-4.54-.5-2.06-4.3c-.15-.46-.81-.46-.96,0l-2.06,4.3-4.54.5c-.49,0-.69.62-.3.91l3.08,2.97Z" style="fill: %23f6c641;"/><path d="M14.62,39.83H2.02c-1.11,0-2.02.91-2.02,2.02v16.13c0,1.11.91,2.02,2.02,2.02h12.61c1.11,0,2.02-.91,2.02-2.02v-16.13c0-1.11-.91-2.02-2.02-2.02ZM4.01,30.65l-.55,4.8c-.15.46.38.85.78.56l4.08-2.46,4.08,2.46c.4.29.93-.1.78-.56l-.55-4.8,3.08-2.97c.4-.29.19-.91-.3-.91l-4.54-.5-2.06-4.3c-.15-.46-.81-.46-.96,0l-2.06,4.3-4.54.5c-.49,0-.69.62-.3.91l3.08,2.97Z" style="fill: %239491b8;"/></svg>') no-repeat center / contain;
		}
	}
	& article{
		grid-column: 2;
		&:not(.select){
			display: none;
		}
		& h2{
			display: none;
		}
	}
	#rankingCategory{
		margin-top: clamp(24px, calc(40 / 1200 * 100vw), 40px);
	}
	#rankingRising,
	#rankingWeekly{
		grid-column: 2;
		margin-top: clamp(32px, calc(72 / 1200 * 100vw), 72px);
	}
	#rankingLink{
		margin-top: clamp(40px, calc(64 / 1200 * 100vw), 64px);
	}
	@media (max-width: 1199.98px) {
		#rankingNav{
			margin-top: clamp(24px, calc(40 / 1200 * 100vw), 40px);
		}
	}
	@media (min-width: 1200px) {
		& h2{
			grid-column: 2;
			grid-row: 1;
		}
		#rankingNav{
			grid-column: 2;
			grid-row: 1;
			justify-self: end;
			align-self: end;
		}
		#rankingCategory{
			grid-column: 1 / 4;
			justify-self: center;
			width: min(100%, 1360px);
		}
	}
}

#rankingNav{
	& ul{
		display: flex;
		justify-content: center;
		column-gap: 8px;
	}
	& li{
		display: grid;
		align-items: center;
		min-height: 40px;
		padding: 4px 1.5em;
		border: 1px solid #b3b3b3;
		border-radius: 20px;
		font-size: clamp(14px, calc(16 / 768 * 100vw), 16px);
		&.select{
			background: var(--color-theme-sub);
		}
	}
	@media (max-width: 1199.98px) {
		margin-top: 24px;
	}
}

#rankingList{
	display: grid;
	grid-gap: 32px 16px;
	align-items: start;
	& section{
		counter-increment: count;
		position: relative;
		display: grid;
		grid-gap: 16px;
		&:not(:has(figure)){
			&:before{
				content: "";
				order: -1;
				aspect-ratio: 3 / 2;
				background: var(--dummy);
				border-radius: 10px;
			}
		}
		&:after{
			content: counter(count);
			position: absolute;
			top: 0;
			left: 16px;
			display: grid;
			align-items: center;
			aspect-ratio: 40 / 62;
			width: clamp(32px, calc(40 / 768 * 100vw), 40px);
			background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 62"><path d="M0,12.67v45.69c0,1.98,2.09,3.27,3.86,2.39l16.14-11.4,16.14,11.4c1.77.89,3.86-.4,3.86-2.39V12.67H0Z" style="fill: %239491b8;"/><rect width="40" height="8" style="fill: %23f6c641;"/></svg>') no-repeat center / contain;
			color: #f6c641;
			font: 700 clamp(16px, calc(24 / 768 * 100vw), 24px) 'Kaisei Opti', 'Noto Serif JP', sans-serif;
			text-align: center;
			pointer-events: none;
		}
	}
	& h3{
		font-size: clamp(14px, calc(16 / 768 * 100vw), 16px);
	}
	& h3+div{
		display: contents;
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
		}
	}
	& figure{
		order: -1;
		& img{
			aspect-ratio: 3 / 2;
			object-fit: cover;
			border-radius: 10px;
			&[src]{
				display: block;
				background: #ccc;
			}
		}
	}
	@media (max-width: 767.98px) {
		& section{
			&:nth-child(1){
				& h3{
					margin: 0 20px;
				}
			}
			&:nth-child(n+2){
				grid-template-columns: 1fr 1fr;
				&:before,
				& figure{
					grid-column: 1;
					grid-row: 1;
				}
			}
		}
	}
	@media (min-width: 768px) {
		grid-template-columns: 2fr 1fr 1fr;
		& section{
			&:nth-child(1){
				grid-column: 1;
				grid-row: 1 / 3;
				& h3{
					font-size: clamp(16px, calc(24 / 1200 * 100vw), 24px);
					text-align: center;
				}
			}
		}
		& h3{
			text-align: center;
		}
	}
	@media (min-width: 992px) {
		& section{
			&:nth-child(1){
				&:after{
					left: 24px;
					transform-origin: left top;
					transform: scale(1.5);
				}
			}
		}
	}
}

#topics{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	margin-top: clamp(80px, calc(120 / 1200 * 100vw), 120px);
	&>*{
		grid-column: 2;
	}
	& h2{
		justify-self: center;
		display: grid;
		justify-items: center;
		grid-row-gap: 16px;
		font: 700 clamp(24px, calc(32 / 768 * 100vw), 32px)  'Noto Serif JP', sans-serif;
		text-align: center;
		letter-spacing: 0.1em;
		&:before{
			content: "";
			aspect-ratio: 1;
			width: 60px;
			background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><path d="M40.75,19.54v14.09c3.15-.81,5.46-3.66,5.46-7.04s-2.32-6.24-5.46-7.05ZM5.43,52.01c0,1.11.9,2.02,2.02,2.02h4.03c1.11,0,2.02-.9,2.02-2.02v-13.11H5.43v13.11Z" style="fill: %23f6c641;"/><path d="M16.27,13.43H2.65c-1.46,0-2.65,1.19-2.65,2.65v21.01c0,1.46,1.19,2.65,2.65,2.65h13.62c1.46,0,2.65-1.19,2.65-2.65v-21.01c0-1.46-1.19-2.65-2.65-2.65ZM39.82,6.43c-.88-.55-1.96-.6-2.89-.14l-13.76,6.79c-1.11.55-1.83,1.76-1.83,3.07v20.87c0,1.32.72,2.52,1.83,3.07l13.76,6.79c.42.21.87.31,1.32.31.55,0,1.09-.15,1.58-.45.98-.61,1.57-1.71,1.57-2.93V9.36c0-1.22-.59-2.32-1.57-2.93Z" style="fill: %239491b8;"/><path d="M58.54,25h-8.25c-.81,0-1.46.65-1.46,1.46s.65,1.46,1.46,1.46h8.25c.81,0,1.46-.65,1.46-1.46s-.65-1.46-1.46-1.46ZM50.06,20.58c.2,0,.4-.04.6-.13l7.52-3.39c.74-.33,1.06-1.2.73-1.93-.33-.73-1.19-1.06-1.93-.73l-7.52,3.39c-.73.33-1.06,1.2-.73,1.93.24.54.77.86,1.33.86ZM58.18,35.86l-7.52-3.39c-.74-.33-1.6,0-1.93.73-.33.74,0,1.6.73,1.93l7.52,3.39c.19.09.4.13.6.13.56,0,1.09-.32,1.33-.86.33-.73,0-1.6-.73-1.93Z" style="fill: %23a9dadb;"/></svg>') no-repeat center / contain;
		}
	}
	#topicsCategory{
		grid-column: 1 / 4;
		justify-self: center;
		width: min(100%, 1360px);
		margin-top: 32px;
	}
	#topicsList{
		margin-top: clamp(16px, calc(32 / 1200 * 100vw), 32px);
	}
	#topicsLink{
		margin-top: clamp(40px, calc(64 / 1200 * 100vw), 64px);
	}
}

#topicsList{
	& article{
		&:not(.select){
			display: none;
		}
	}
	& h2{
		display: none;
	}
	& section{
		position: relative;
		display: flex;
		flex-wrap: wrap;
		column-gap: clamp(8px, calc(16 / 768 * 100vw), 16px);
		padding: clamp(16px, calc(24 / 768 * 100vw), 24px);
		&:has(figure){
			min-height: clamp(76px, calc(148 / 768 * 100vw), 116px);
			padding-right: clamp(80px, calc(160 / 1200 * 100vw), 160px);
		}
		&:has(a):hover{
			& h3{
				color: var(--color-theme-sub);
			}
		}
		&:nth-of-type(even){
			background: #f2f2f2;
		}
	}
	& h3{
		order: 1;
		width: 100%;
		margin-top: 8px;
		font-size: clamp(14px, calc(18 / 768 * 100vw), 18px);
		transition: color 0.2s ease-out;
	}
	& h3+div{
		display: contents;
		& time{
			align-self: center;
			font-size: clamp(12px, calc(16 / 768 * 100vw), 16px);
		}
		& ul{
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			column-gap: clamp(4px, calc(8 / 768 * 100vw), 8px);
		}
		& li{
			display: flex;
			align-items: center;
			font-size: clamp(10px, calc(16 / 768 * 100vw), 16px);
			&[class]{
				min-width: clamp(20px, calc(32 / 768 * 100vw), 32px);
				padding: 0.25em 1em;
				background: var(--color-tagNew);
				border-radius: clamp(10px, calc(16 / 768 * 100vw), 16px);
				color: #fff;
				font-size: clamp(10px, calc(16 / 768 * 100vw), 16px);
				&.tagCheck{
					background: var(--color-tagCheck);
					color: #fff;
				}
			}
			&:not([class]){
				&:before,
				&:after{
					content: "-";
				}
			}
		}
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
		}
	}
	& figure{
		position: absolute;
		right: 8px;
		top: 50%;
		width: clamp(60px, calc(150 / 1200 * 100vw), 150px);
		transform: translateY(-50%);
		& img{
			aspect-ratio: 3 / 2;
			object-fit: cover;
			border-radius: clamp(4px, calc(10 / 768 * 100vw), 10px);
		}
	}
}