/* 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: 1;
				width: 100%;
				height: auto;
				background: #fff url("/common/images/logo.setouchi.vt.svg") no-repeat center / 80%;
				border-radius: 0 0 24px 24px;
			}
		}
	}
}

#pagePath{
	display: none;
	}

#main{
	display: grid;
	#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: var(--color-theme);
			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-theme);
			border-color: transparent;
			color: #fff;
			&:before{
				background: #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;
			background: #fff;
			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;
			overflow: hidden;
		}
		& dt{
			align-self: center;
			margin: 8px 8px 0 0;
		}
		& dd{
			position: relative;
			display: grid;
			grid-template-columns: 1fr auto;
			align-items: center;
			column-gap: 16px;
			min-height: 56px;
			padding: 16px 24px 8px 24px;
			background: #fff;
			border: 1px solid #b3b3b3;
			border-radius: 16px 16px 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;
			&:before{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: calc(100% + 8px);
				border-radius: 16px;
				outline: 16px solid #fff;
				outline-offset: -8px;
				pointer-events: none;
				z-index: -1;
			}
			&:after{
				content: "";
				aspect-ratio: 1;
				width: 10px;
				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 10 6"><polygon points="0 0 10 0 5 6"/></svg>') no-repeat center / contain;
			}
			&.select{
				position: relative;
				background: transparent;
				border-bottom: none;
				background: var(--color-theme);
				color: #fff;
				z-index: 1;
				&:before{
					content: "";
				}
				&: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-weight: 700;
		font-size: clamp(16px, calc(24 / 768 * 100vw), 24px);
		letter-spacing: 0.1em;
		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;
		align-items: center;
		column-gap: 16px;
		color: var(--color-theme);
		font-weight: 700;
		font-size: clamp(24px, calc(40 / 768 * 100vw), 40px);
		text-align: center;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		@media (max-width: 575.98px) {
			grid-template-columns: auto 1fr;
		}
		&:before{
			content: "";
			aspect-ratio: 1;
			width: clamp(48px, calc(64 / 768 * 100vw), 64px);
			background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M30.86,45.45l-.68,6.75h5.67l-.68-6.75h-4.32ZM30.86,52.25l-.68,6.75h5.67l-.68-6.75h-4.32ZM35.18,25.04l-2.16-2.61-2.16,2.61-.68,6.75h5.67l-.68-6.75ZM30.86,31.85l-.68,6.75h5.67l-.68-6.75h-4.32ZM30.86,38.65l-.68,6.75h5.67l-.68-6.75h-4.32Z" style="fill: %23fcd13e;"/><path d="M33.83,22.85c5.94,6.47,8.68,10.96,10.03,20.37,4.21-2.71,5.78-8.28,4.8-12.49-1.76-6.18-9.25-9.07-14.83-7.88ZM29.97,15.66c-2.26-1.51-4.89-2-7.47-1.72-6.16.66-12,5.71-11.64,11.75,1.38-1.02,14.18-7.73,22.03-2.84.28-1.96-.32-4.04-.72-4.76-.64-1.16-1.07-1.67-2.2-2.43ZM18.06,30.73c-.99,4.21.58,9.78,4.8,12.49,1.35-9.4,4.1-13.9,10.03-20.37-5.58-1.19-13.07,1.7-14.83,7.88ZM32.89,10.5c-1.65-4.63-7.82-7.22-12.62-3.08,5.35,3.23,8.81,4.3,11.9,10.66,1.47-2.91,1.42-5.63.72-7.58ZM46.45,7.42c-4.8-4.14-10.97-1.55-12.62,3.08-.7,1.96-.75,4.68.72,7.58,3.09-6.36,6.55-7.43,11.9-10.66ZM55.86,25.69c.36-6.04-5.48-11.08-11.64-11.75-2.58-.28-5.21.21-7.47,1.72-1.13.75-1.56,1.27-2.2,2.43-.39.72-1,2.8-.72,4.76,7.85-4.88,20.65,1.82,22.03,2.84Z" style="fill: %23d8ed29;"/><path d="M25.72,53.57c-.07-.63-.62-1.07-1.25-1.01-7.69.81-15.21,2.9-22.37,6.2-.57.26-.82.94-.56,1.51.19.42.6.66,1.03.66.16,0,.32-.03.48-.11,6.94-3.2,14.22-5.22,21.66-6,.63-.07,1.08-.63,1.01-1.25ZM61.38,60.86c.27-.1.51-.3.64-.58.26-.57.01-1.25-.56-1.51-7.16-3.3-14.69-5.39-22.37-6.2-.63-.07-1.19.39-1.25,1.01s.39,1.19,1.01,1.25c3.73.4,7.43,1.1,11.06,2.11-3.1-.77-6.22-1.33-9.36-1.66-1.09-.12-3.13-.29-5.08-.37l-.3-2.98c.1-.06.2-.12.28-.21.22-.24.32-.56.29-.88l-.57-5.72c.1-.06.2-.12.28-.21.22-.24.32-.56.29-.88l-.57-5.72c.1-.06.2-.12.28-.21.22-.24.32-.56.29-.88l-.57-5.72c.1-.06.2-.12.28-.21.22-.24.32-.56.29-.88l-.37-3.68c3.07,4.14,4.8,8.27,5.78,15.04.06.38.3.71.65.87.15.07.31.1.47.1.21,0,.43-.06.62-.18,4.85-3.12,6.33-9.26,5.29-13.71,0-.02,0-.04-.01-.05-1.17-4.09-4.63-6.88-8.53-8.16,6.38.2,13.11,3.73,13.97,4.35.2.15.44.22.68.22.16,0,.33-.04.48-.11.38-.18.63-.55.65-.96.41-6.89-6.21-12.25-12.66-12.95-1.69-.18-3.32-.04-4.85.38,1.44-1.27,3.07-2.2,5.03-3.32.79-.45,1.63-.93,2.51-1.47.31-.19.52-.52.55-.88.03-.36-.11-.72-.39-.96-2.43-2.1-5.36-2.83-8.27-2.06-2.37.63-4.4,2.24-5.57,4.34-1.17-2.1-3.2-3.71-5.57-4.34-2.9-.76-5.84-.03-8.27,2.06-.28.24-.42.59-.39.96.03.36.23.69.55.88.89.54,1.72,1.01,2.52,1.47,1.96,1.12,3.59,2.05,5.03,3.32-1.52-.42-3.15-.56-4.85-.38-6.44.69-13.07,6.06-12.66,12.95.02.42.28.79.65.96.15.07.32.11.48.11.24,0,.48-.08.68-.22.85-.63,7.58-4.15,13.96-4.35-3.9,1.28-7.36,4.07-8.52,8.16,0,.02,0,.04-.01.05-1.04,4.45.44,10.59,5.29,13.71.19.12.4.18.62.18.16,0,.32-.03.47-.1.35-.16.6-.49.65-.87.98-6.77,2.71-10.9,5.78-15.04l-.37,3.68c-.03.32.07.64.29.88.08.09.18.15.28.21l-.57,5.72c-.03.32.07.64.29.88.08.09.18.15.28.21l-.57,5.72c-.03.32.07.64.29.88.08.09.18.15.28.21l-.57,5.72c-.03.32.07.64.29.88.08.09.18.15.28.21l-.32,3.17c-.76.06-1.42.12-1.9.17-7.49.79-14.91,2.83-22.02,6.1h58.42c-.39-.18-.79-.35-1.19-.52ZM45.98,29.43c.72,3.1-.11,7.38-2.88,10.1-1.38-7.73-3.99-12.19-8.53-17.39,4.71-.11,10.03,2.5,11.41,7.29ZM42.52,13.49c4.75.51,9.63,3.96,10.5,8.59-2.92-1.48-8.47-3.71-13.88-3.71-1.99,0-3.96.3-5.78,1.05.11-1.06.4-1.99.61-2.37.57-1.04.9-1.4,1.83-2.03,1.91-1.27,4.23-1.8,6.72-1.54ZM33.32,9.3c.72-2.02,2.48-3.62,4.6-4.18.55-.15,1.1-.22,1.65-.22,1.1,0,2.18.29,3.2.85-.33.19-.65.37-.96.55-3.4,1.94-6.2,3.54-8.65,7.48-.37-1.56-.33-3.12.15-4.48ZM31.78,22.44c.36.4.72.79,1.05,1.18-.02.1-.04.19-.03.29l.55,5.5h-3.15l.55-5.5c.01-.1-.01-.19-.03-.29.34-.39.69-.78,1.05-1.18ZM30.37,54.95l.29-2.85h2.25l.45,4.52h-2.93l.17-1.68c-.08,0-.15,0-.22.01ZM30.2,49.82l.45-4.52h2.25l.45,4.52h-3.15ZM30.2,43.02l.45-4.52h2.25l.45,4.52h-3.15ZM30.2,36.22l.45-4.52h2.25l.45,4.52h-3.15ZM21.74,6.31c-.31-.18-.63-.36-.96-.55,1.52-.84,3.2-1.07,4.84-.64,2.12.56,3.89,2.16,4.61,4.18.48,1.36.53,2.91.15,4.48-2.45-3.94-5.24-5.53-8.65-7.47ZM10.54,22.08c.88-4.63,5.75-8.08,10.5-8.59.42-.05.83-.07,1.24-.07,2.02,0,3.89.55,5.47,1.6.94.63,1.26.99,1.83,2.03.21.38.5,1.3.61,2.37-6.76-2.8-15.67.64-19.66,2.66ZM20.46,39.53c-2.77-2.72-3.6-7-2.88-10.1,1.38-4.79,6.68-7.39,11.41-7.29-4.54,5.2-7.15,9.66-8.53,17.39ZM30.19,59v-.1h4.43c.32,0,.63-.14.84-.38.19-.21.27-.48.27-.75l.12,1.23h-5.67Z" style="fill: %23218897;"/></svg>') no-repeat center / contain;
		}
	}
	@media (max-width: 1199.98px) {
		#pickupList{
			margin-top: 24px;
		}
	}
	@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 var(--wrap) 1fr;
	margin-top: clamp(40px, calc(120 / 1200 * 100vw), 120px);
	&:before{
		content: "";
		grid-column: 1 / 4;
		display: block;
		background: #e6e9ed;
		margin-bottom: clamp(32px, calc(40 / 768 * 100vw), 40px);
		z-index: -1;
		-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 16 16"><rect width="100%" height="100%"/></svg>') no-repeat center / 100% calc(100% - clamp(128px, calc(160 / 1200 * 100vw), 160px)), url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 80"><path d="M0,0c31.82,0,31.82,16.81,63.64,16.81S95.46,0,127.28,0s31.82,16.81,63.64,16.81S222.73,0,254.55,0s31.82,16.81,63.64,16.81S350.01,0,381.83,0s31.82,16.81,63.64,16.81S477.29,0,509.1,0s31.82,16.81,63.63,16.81S604.55,0,636.37,0s31.82,16.81,63.64,16.81S731.82,0,763.64,0s31.82,16.81,63.64,16.81S859.1,0,890.92,0s31.82,16.81,63.64,16.81S986.37,0,1018.19,0s31.82,16.81,63.64,16.81,31.82-16.81,63.63-16.81,31.82,16.81,63.64,16.81,31.82-16.81,63.63-16.81,31.82,16.81,63.64,16.81,31.82-16.81,63.63-16.81v113.33H0V0Z"/></svg>') repeat-x center top / auto clamp(64px, calc(80 / 1200 * 100vw), 80px), url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 80"><path d="M1400,80c-31.82,0-31.82-16.81-63.64-16.81-31.82,0-31.82,16.81-63.64,16.81-31.82,0-31.82-16.81-63.64-16.81-31.82,0-31.82,16.81-63.64,16.81-31.82,0-31.82-16.81-63.64-16.81-31.82,0-31.82,16.81-63.64,16.81-31.82,0-31.82-16.81-63.64-16.81-31.82,0-31.82,16.81-63.63,16.81s-31.82-16.81-63.63-16.81-31.82,16.81-63.63,16.81c-31.82,0-31.82-16.81-63.64-16.81-31.82,0-31.82,16.81-63.64,16.81-31.82,0-31.82-16.81-63.64-16.81s-31.82,16.81-63.64,16.81c-31.82,0-31.82-16.81-63.64-16.81-31.82,0-31.82,16.81-63.64,16.81s-31.82-16.81-63.64-16.81c-31.82,0-31.82,16.81-63.63,16.81-31.82,0-31.82-16.81-63.64-16.81s-31.82,16.81-63.63,16.81c-31.82,0-31.82-16.81-63.64-16.81-31.82,0-31.82,16.81-63.63,16.81V0h1400v80Z"/></svg>') repeat-x center bottom / auto clamp(64px, calc(80 / 1200 * 100vw), 80px);
	}
	&>*{
		grid-column: 2;
	}
	& h2{
		justify-self: center;
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;
		column-gap: 16px;
		margin-top: clamp(64px, calc(80 / 1200 * 100vw), 80px);
		color: var(--color-theme);
		font-weight: 700;
		font-size: clamp(24px, calc(40 / 768 * 100vw), 40px);
		text-align: center;
		letter-spacing: 0.1em;
		&:before{
			content: "";
			aspect-ratio: 1;
			width: clamp(48px, calc(64 / 768 * 100vw), 64px);
			background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><polyline points="61.75 64 61.75 48.26 44.7 48.26 44.7 34.88 22.49 34.88 22.49 42.21 5.44 42.21 5.44 64" style="fill: %23d8ed29;"/><path d="M42.49,63.08h-.01c-.63,0-1.13-.52-1.12-1.15l.16-15.74c0-.62.51-1.12,1.13-1.12h.01c.63,0,1.13.52,1.12,1.15l-.16,15.74c0,.62-.51,1.12-1.13,1.12Z" style="fill: %23218897;"/><path d="M32.05,21.93l-6.78,4.09c-.66.48-1.54-.16-1.29-.94l.92-7.97-5.1-4.92c-.66-.48-.32-1.51.49-1.51l7.54-.84,3.42-7.13c.25-.77,1.34-.77,1.59,0l3.42,7.13,7.54.84c.81,0,1.15,1.04.49,1.51l-5.1,4.92.92,7.97c.25.77-.63,1.41-1.29.94l-6.78-4.09Z" style="fill: %23fcd13e;"/><path d="M17.42,9.9c-.26.79,0,1.64.64,2.15l4.65,4.49-.84,7.32c-.19.78.1,1.6.75,2.07.36.26.78.38,1.18.38.38,0,.76-.11,1.05-.33l6.19-3.73,6.11,3.68c.69.5,1.62.5,2.32,0,.66-.48.95-1.3.75-2.07l-.84-7.32,4.65-4.49c.64-.51.9-1.36.64-2.15-.26-.79-.97-1.33-1.8-1.36l-6.86-.76-3.13-6.51c-.29-.77-1.02-1.28-1.84-1.28s-1.56.51-1.85,1.28l-3.13,6.51-6.86.76c-.82.03-1.54.57-1.8,1.36ZM27.58,9.9l3.47-7.22,3.47,7.22,7.61.84-5.12,4.94.93,8.07-6.88-4.15-6.88,4.16.93-8.07-5.12-4.94,7.61-.84ZM59.69,45.08h-15.91v-12.25c0-.63-.51-1.13-1.13-1.13h-22.22c-.63,0-1.13.51-1.13,1.13v6.19H3.39c-.63,0-1.13.51-1.13,1.13v21.79c0,.63.51,1.13,1.13,1.13s1.13-.51,1.13-1.13v-20.66h15.91c.63,0,1.13-.51,1.13-1.13v-6.19h19.95v12.25c0,.63.51,1.13,1.13,1.13h15.91v14.6c0,.63.51,1.13,1.13,1.13s1.13-.51,1.13-1.13v-15.74c0-.63-.51-1.13-1.13-1.13ZM43.78,8.45c.58.23,1.24-.06,1.47-.64l1.59-4.08,3,6.24,6.64.74-4.45,4.3.81,7.05-6.02-3.63-5.66,3.41c-.54.32-.71,1.02-.39,1.56.32.54,1.02.71,1.56.39l4.49-2.71,5.41,3.25c.33.24.72.36,1.11.36s.78-.12,1.11-.36c.62-.45.91-1.23.72-1.97l-.75-6.49,4.13-3.98c.61-.49.85-1.3.61-2.05-.25-.75-.93-1.27-1.72-1.3l-6.08-.67-2.77-5.77c-.28-.73-.97-1.21-1.76-1.21s-1.54.52-1.77,1.24l-1.91,4.87c-.23.58.06,1.24.64,1.47ZM20.55,45.08c-.6-.02-1.14.5-1.15,1.12l-.16,15.74c0,.63.5,1.14,1.12,1.15h.01c.62,0,1.13-.5,1.13-1.12l.16-15.74c0-.63-.5-1.14-1.12-1.15ZM33.86,48.6h-.76v-6.65c0-.05-.02-.1-.06-.16s-.1-.08-.18-.08h-2.35c-.05,0-.1.02-.16.06s-.08.1-.08.18v1.42c0,.07.03.13.08.18s.11.06.16.06h.69v5h-.69c-.05,0-.1.02-.16.06s-.08.1-.08.18v1.42c0,.07.03.13.08.18.05.04.1.06.15.06h3.35c.05,0,.1-.02.16-.06s.08-.1.08-.18v-1.42c0-.07-.03-.13-.08-.18-.05-.04-.1-.06-.15-.06ZM7.84,15.86l-.75,6.49c-.18.74.1,1.52.72,1.97.34.25.74.37,1.13.37.37,0,.72-.11,1-.31l5.49-3.31,4.22,2.55c.54.33,1.23.15,1.56-.39.32-.54.15-1.23-.39-1.56l-5.39-3.25-6.03,3.64.81-7.06-4.45-4.3,6.64-.74,3.03-6.31,2,4.16c.27.57.95.8,1.51.53.56-.27.8-.95.53-1.51l-2.28-4.75c-.28-.73-.97-1.21-1.76-1.21s-1.48.48-1.76,1.21l-2.77,5.77-6.08.67c-.79.03-1.47.55-1.72,1.3-.24.75,0,1.56.61,2.05l4.13,3.98Z" style="fill: %23218897;"/></svg>') no-repeat center / contain;
		}
	}
	#rankingCategory{
		grid-column: 1 / 4;
		justify-self: center;
		width: min(var(--wrap-fit), 1360px);
		margin-top: clamp(24px, calc(40 / 1200 * 100vw), 40px);
		z-index: 1;
		@media (min-width: 1200px) {
			& dd{
				&.select:before{
					outline-color: #e6e9ed;
				}
			}
		}
	}
	#rankingList{
		grid-column: 1 / 4;
		justify-self: center;
		width: min(var(--wrap-fit), 1360px);
		margin-top: clamp(32px, calc(72 / 1200 * 100vw), 72px);
	}
	@media (max-width: 1199.98px) {
		&:before{
			grid-row: 1 / 5;
		}
		& h2{
			grid-row: 1;
		}
		#rankingCategory{
			grid-row: 3;
		}
		#rankingList{
			grid-row: 4;
		}
	}
	@media (min-width: 1200px) {
		&:before{
			grid-row: 1 / 5;
		}
		& h2{
			grid-row: 1;
		}
		#rankingCategory{
			grid-row: 2;
		}
		#rankingList{
			grid-row: 3;
		}
	}
}

#rankingList{
	& article{
		display: grid;
		grid-gap: 32px 16px;
		align-items: start;
		&:not(.select){
			display: none;
		}
	}
	& h2{
		display: none;
	}
	& 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: "";
			position: absolute;
			top: 0;
			left: 0;
			display: grid;
			align-items: center;
			aspect-ratio: 1;
			width: clamp(48px, calc(64 / 768 * 100vw), 64px);
			background: #d8ed29 url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M41.36,23.05l-.1-.1c-.7.47-1.47.92-2.3,1.38-.83.45-1.71.88-2.62,1.28-.92.4-1.84.77-2.77,1.1-.93.33-1.83.62-2.7.85l-.2-.55c3.03-.7,5.92-1.84,8.65-3.42,2.73-1.58,5.28-3.29,7.65-5.12l.2.2c-1.1,1.67-2.4,3.63-3.9,5.9-1.5,2.27-3.02,4.59-4.55,6.98-1.53,2.38-3,4.72-4.4,7-1.4,2.28-2.55,4.29-3.45,6.02l-4.1.8,14.6-22.3Z" style="fill: %23333; stroke: %231a1a1a; stroke-miterlimit: 10; stroke-width: .43px;"/></svg>') no-repeat center / contain;
			border-radius: 10px 0 0 0;
			font: 700 clamp(16px, calc(24 / 768 * 100vw), 24px) 'Kaisei Opti', 'Noto Serif JP', sans-serif;
			text-align: center;
			pointer-events: none;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><polygon points="0 10 0 0 10 0 0 10"/></svg>') no-repeat center / contain;
		}
		&:nth-of-type(2):after{
			background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70"><path d="M30.48,24.7c-.32.62-.69,1.25-1.1,1.9s-.89,1.24-1.42,1.78-1.13.97-1.79,1.31c-.66.34-1.39.51-2.18.51-.43,0-.86-.11-1.3-.34-.44-.22-.89-.45-1.36-.69-.47-.24-.95-.46-1.44-.67-.49-.21-1.01-.32-1.57-.32-.62,0-1.14.1-1.55.3-.42.2-.75.43-1.01.69-.26.26-.46.49-.62.7-.16.21-.29.32-.4.32s-.17-.03-.18-.1c-.01-.06-.02-.14-.02-.22,0-.34.74-.98,2.22-1.9,1.48-.93,3.75-2.08,6.8-3.47,1.45-.66,2.63-1.3,3.55-1.92.92-.62,1.63-1.24,2.14-1.87.51-.63.86-1.25,1.06-1.87.19-.62.29-1.26.29-1.92,0-1.09-.28-1.97-.85-2.66s-1.39-1.02-2.48-1.02c-.47,0-.96.09-1.46.26-.5.17-.96.42-1.36.75-.41.33-.74.73-1.01,1.2-.27.47-.4,1-.4,1.6,0,.56.18,1.05.53,1.49.35.44.81.66,1.36.66.26,0,.46-.03.62-.1.16-.06.36-.15.59-.26l.13.1c-.24.43-.56.77-.96,1.02-.41.26-.86.38-1.38.38-.66,0-1.19-.22-1.58-.66-.4-.44-.59-1.03-.59-1.78,0-.55.13-1.14.4-1.74.27-.61.66-1.17,1.17-1.68.51-.51,1.14-.93,1.89-1.26.75-.33,1.6-.5,2.56-.5.83,0,1.55.12,2.16.35.61.24,1.11.54,1.52.91.4.37.7.8.9,1.28.19.48.29.97.29,1.46,0,1.04-.24,1.97-.72,2.77s-1.12,1.52-1.92,2.14-1.72,1.19-2.75,1.7c-1.04.5-2.1.98-3.18,1.44s-2.16.92-3.21,1.39c-1.06.47-2.01.99-2.86,1.57l.06.13c.32-.17.65-.33.99-.48.34-.15.71-.22,1.12-.22.36,0,.79.09,1.3.27.5.18,1.02.38,1.55.59.51.21,1.01.42,1.5.61.49.19.91.29,1.25.29.49,0,.97-.15,1.42-.45.46-.3.88-.66,1.26-1.09.38-.43.73-.89,1.04-1.39.31-.5.56-.94.75-1.33l.22.03Z" style="fill: %23333; stroke: %231a1a1a; stroke-miterlimit: 10; stroke-width: .43px;"/></svg>');
		}
		&:nth-of-type(3):after{
			background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70"><path d="M23.06,20.99c.51-.06,1.08-.12,1.71-.18.63-.05,1.26-.13,1.89-.22.63-.1,1.24-.24,1.82-.43.59-.19,1.11-.45,1.57-.78.46-.33.83-.75,1.1-1.26s.42-1.14.42-1.89c0-.83-.22-1.54-.66-2.11s-1.1-.86-2-.86c-.41,0-.82.06-1.23.19s-.78.31-1.1.56c-.32.25-.58.54-.78.9-.2.35-.3.75-.3,1.2,0,.47.12.9.37,1.3s.62.59,1.14.59c.23,0,.43-.02.58-.05.15-.03.33-.1.54-.21-.02.41-.23.74-.62,1.01s-.84.4-1.33.4c-.62,0-1.1-.2-1.44-.61-.34-.41-.51-.88-.51-1.44s.14-1.12.42-1.65c.28-.52.65-.99,1.12-1.39.47-.4,1.02-.72,1.65-.96.63-.23,1.31-.35,2.03-.35s1.31.09,1.81.27c.5.18.92.43,1.26.75.34.32.59.69.75,1.12.16.43.24.88.24,1.34,0,.77-.21,1.42-.64,1.97s-.98,1-1.66,1.36c-.68.36-1.45.66-2.3.88-.85.22-1.71.39-2.56.5v.06c1.04.06,1.89.38,2.54.94.65.57.97,1.4.97,2.51,0,.85-.23,1.64-.7,2.35-.47.72-1.09,1.32-1.87,1.82-.78.5-1.66.89-2.66,1.17-.99.28-2.01.42-3.06.42-.7,0-1.39-.09-2.05-.27-.66-.18-1.25-.45-1.76-.8-.51-.35-.92-.78-1.23-1.28s-.46-1.07-.46-1.71c0-.85.25-1.59.75-2.22.5-.63,1.2-.94,2.1-.94.3,0,.61.06.93.19s.59.3.8.51l-.03.13c-.17-.04-.32-.06-.45-.06-.64,0-1.2.26-1.66.77-.47.51-.7,1.25-.7,2.21,0,1.05.36,1.82,1.09,2.34.72.51,1.63.77,2.72.77.81,0,1.6-.13,2.35-.38s1.43-.62,2.02-1.09c.59-.47,1.06-1.04,1.42-1.71.36-.67.54-1.42.54-2.26,0-.96-.27-1.7-.8-2.22-.53-.52-1.28-.78-2.24-.78-.3,0-.6.01-.91.03-.31.02-.61.05-.91.1v-.51Z" style="fill: %23333; stroke: %231a1a1a; stroke-miterlimit: 10; stroke-width: .43px;"/></svg>');
		}
		&:nth-of-type(4):after{
			background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70"><path d="M27.6,23.58h3.9l-.22.38h-3.9l-3.62,5.66-2.24.32,3.94-5.98h-8.61l15.94-13.5h.83l-15.74,12.99v.13h7.81l6.56-9.95,1.82-.19-6.46,10.14Z" style="fill: %23333; stroke: %231a1a1a; stroke-miterlimit: 10; stroke-width: .43px;"/></svg>');
		}
		&:nth-of-type(5):after{
			background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70"><path d="M25.65,12.99c.36.41.77.71,1.23.91.46.2.9.3,1.33.3.53,0,1.01-.08,1.42-.26s.79-.38,1.14-.64l.1.13c-.17.26-.41.51-.71.77s-.62.49-.96.7c-.34.21-.69.38-1.06.51-.36.13-.7.19-1.02.19-.49,0-.92-.07-1.28-.22-.36-.15-.81-.34-1.34-.58l-5.5,5.5.06.06c.43-.17.85-.31,1.26-.43s.91-.18,1.49-.18c1.28,0,2.28.3,3.01.91.72.61,1.09,1.52,1.09,2.74,0,.85-.23,1.69-.69,2.51-.46.82-1.07,1.55-1.82,2.18-.76.63-1.61,1.14-2.56,1.52-.95.38-1.92.58-2.93.58-.66,0-1.31-.08-1.94-.26-.63-.17-1.2-.43-1.7-.78-.5-.35-.9-.79-1.2-1.33-.3-.53-.45-1.15-.45-1.86,0-.88.27-1.62.8-2.22.53-.61,1.24-.91,2.11-.91.72,0,1.34.28,1.86.83l-.03.13c-.11-.02-.21-.04-.3-.05-.1,0-.2-.02-.3-.02-.7,0-1.28.26-1.73.78s-.67,1.18-.67,1.97c0,1.05.31,1.86.94,2.45.63.59,1.48.88,2.54.88.92,0,1.76-.18,2.51-.54.76-.36,1.4-.85,1.94-1.47.53-.62.95-1.33,1.25-2.13.3-.8.45-1.63.45-2.48,0-.9-.23-1.61-.69-2.13-.46-.52-1.16-.78-2.1-.78-.62,0-1.22.1-1.79.3-.58.2-1.13.45-1.66.75l-.16-.13,8.06-8.22Z" style="fill: %23333; stroke: %231a1a1a; stroke-miterlimit: 10; stroke-width: .43px;"/></svg>');
		}
	}
	& 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: 12px 10px 10px 10px;
			&[src]{
				display: block;
				background: #ccc;
			}
		}
	}
	[id$='Link']{
		margin-top: clamp(8px, calc(32 / 1200 * 100vw), 32px)
	}
	@media (max-width: 767.98px) {
		& section{
			&:nth-of-type(1){
				& h3{
					margin: 0 20px;
				}
			}
			&:nth-of-type(n+2){
				grid-template-columns: 1fr 1fr;
				&:before,
				& figure{
					grid-column: 1;
					grid-row: 1;
				}
			}
		}
	}
	@media (min-width: 768px) {
		& article{
			grid-template-columns: 2fr 1fr 1fr;
			[id$='Link']{
				grid-column: 1 / 4;
			}
		}
		& section{
			&:nth-of-type(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-of-type(1){
				&:after{
					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;
		grid-template-columns: auto 1fr;
		align-items: center;
		column-gap: 16px;
		color: var(--color-theme);
		font-weight: 700;
		font-size: clamp(24px, calc(40 / 768 * 100vw), 40px);
		text-align: center;
		letter-spacing: 0.1em;
		&:before{
			content: "";
			aspect-ratio: 1;
			width: clamp(48px, calc(64 / 768 * 100vw), 64px);
			background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M4,27.86l7.2,1.26.06-10.57-7.22,1.18-.05,8.12ZM17.36,17.06l-.08,14.61,34.45,9.45.19-33.13-34.56,9.06Z" style="fill: %23d8ed29;"/><path d="M21.77,32.81l-6.03,20.26c-.51,1.96.66,3.96,2.62,4.48l7.53,1.97c1.96.51,3.96-.66,4.48-2.62l6.03-20.26" style="fill: %23218897;"/><path d="M50.12,4.61c-.28-.22-.64-.29-.98-.2L16.01,13.09v-.45c0-.3-.11-.59-.33-.8-.21-.21-.5-.33-.8-.34l-5.59-.03c-.64,0-1.14.5-1.14,1.13l-.02,2.99-6.27,1.03c-.55.09-.95.56-.95,1.11l-.05,8.12c0,.55.39,1.03.94,1.12l6.26,1.1-.02,2.99c0,.63.5,1.14,1.13,1.14l5.59.03h0c.3,0,.59-.12.8-.33.21-.21.34-.5.34-.8v-.45s2.52.69,2.52.69l-5.78,19.43c-.67,2.56.87,5.19,3.43,5.86l7.53,1.97c.41.11.81.16,1.22.16,2.13,0,4.08-1.43,4.64-3.55l5.74-19.26,13.74,3.77c.1.03.2.04.3.04.24,0,.49-.08.69-.23.28-.21.45-.54.45-.9l.19-33.13c0-.35-.16-.69-.44-.9ZM8.07,25.77l-4.93-.87.04-6.21,4.94-.81-.04,7.88ZM13.66,26.81v2.36s-.01,0-.01,0v.8s-3.33-.02-3.33-.02l.09-16.2,3.32.02-.07,13.05ZM27.27,54.61c-.17.65-.59,1.2-1.17,1.54-.58.34-1.26.44-1.92.27l-7.53-1.97c-1.35-.35-2.16-1.74-1.82-3.06l5.79-19.44,12.39,3.4-5.73,19.25ZM48.11,37.14L15.92,28.31l.07-12.87L48.28,6.98l-.17,30.17ZM25.98,18.63c.09,0,.19-.01.29-.04l17.62-4.57c.61-.16.97-.78.81-1.38-.16-.61-.78-.97-1.38-.81l-17.62,4.57c-.61.16-.97.78-.81,1.38.13.51.59.85,1.1.85ZM55.88,11.85c.09,0,.18-.01.27-.03l6.12-1.49c.61-.15.98-.76.83-1.37s-.77-.99-1.37-.83l-6.12,1.49c-.61.15-.98.76-.83,1.37.13.52.59.87,1.1.87ZM62.12,35.65l-6.1-1.56c-.61-.16-1.23.21-1.38.82-.16.61.21,1.23.82,1.38l6.1,1.56c.09.02.19.04.28.04.51,0,.97-.34,1.1-.85.16-.61-.21-1.23-.82-1.38ZM61.93,21.85l-6.11-.04h0c-.62,0-1.13.5-1.13,1.13,0,.63.5,1.14,1.13,1.14l6.11.04h0c.62,0,1.13-.5,1.13-1.13,0-.63-.5-1.14-1.13-1.14Z" style="fill: %23183045;"/></svg>') no-repeat center / contain;
		}
	}
	#topicsCategory{
		grid-column: 1 / 4;
		justify-self: center;
		width: min(var(--wrap-fit), 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);
		}
	}
}

#access{
	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;
		grid-template-columns: auto 1fr;
		align-items: center;
		column-gap: 16px;
		color: var(--color-theme);
		font-weight: 700;
		font-size: clamp(24px, calc(40 / 768 * 100vw), 40px);
		text-align: center;
		letter-spacing: 0.1em;
		&:before{
			content: "";
			aspect-ratio: 1;
			width: clamp(48px, calc(64 / 768 * 100vw), 64px);
			background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><polygon points="43.15 14.37 23.7 7.93 4.26 14.37 4.26 58.92 23.7 52.48 43.15 58.92 62.59 52.48 62.59 7.93 43.15 14.37" style="fill: %23fffb9f;"/><path d="M45.4,11.76c-1.23-2.14-3.82-3.83-6.6-3.83s-5.37,1.69-6.6,3.83c-1.62,2.83-.94,6.73.34,9.56,1.35,2.99,3.69,5.58,6.26,7.82,2.57-2.24,4.9-4.83,6.26-7.82,1.28-2.83,1.97-6.72.34-9.56Z" style="fill: %23d8ed29;"/><path d="M35.41,27.5c.78.84,1.65,1.68,2.62,2.53.22.19.5.29.77.29s.55-.1.77-.29c3.15-2.75,5.29-5.44,6.55-8.22.66-1.46,2.63-6.54.29-10.63-.57-.99-1.35-1.85-2.26-2.55-1.64-2.15-4.34-3.54-7.03-3.54-3.04,0-6.1,1.78-7.62,4.42-2.34,4.09-.37,9.17.29,10.63,1.13,2.49,2.97,4.91,5.61,7.36ZM44.46,20.13c.5-1.11,1.76-4.3,1.31-7.57,1.11,2.74.45,6.18-.71,8.75-1.35,2.99-3.69,5.58-6.26,7.82-.3-.26-.59-.53-.88-.8,3.14-2.75,5.28-5.43,6.54-8.21ZM33.24,8.8c-.46.37-.88.79-1.26,1.24.36-.46.78-.88,1.26-1.24ZM32.21,11.76c1.23-2.14,3.82-3.83,6.6-3.83.28,0,.56.03.83.06,1.28.56,2.4,1.51,3.07,2.69,1.42,2.48.73,6.01-.39,8.49-1.01,2.24-2.71,4.45-5.18,6.72-2.47-2.28-4.17-4.48-5.18-6.72-.16-.36-.31-.75-.45-1.15-.42-2.15-.34-4.42.71-6.25ZM23.21,22.54c0-.65-.53-1.18-1.18-1.18s-1.18.53-1.18,1.18v.96c0,.65.53,1.18,1.18,1.18s1.18-.53,1.18-1.18v-.96ZM42.65,45.87c0-.65-.53-1.18-1.18-1.18s-1.18.53-1.18,1.18v.91c0,.65.53,1.18,1.18,1.18s1.18-.53,1.18-1.18v-.91ZM23.21,28.31c0-.65-.53-1.18-1.18-1.18s-1.18.53-1.18,1.18v.96c0,.65.53,1.18,1.18,1.18s1.18-.53,1.18-1.18v-.96ZM23.21,11.51c0-.65-.53-1.18-1.18-1.18s-1.18.53-1.18,1.18v.47c0,.65.53,1.18,1.18,1.18s1.18-.53,1.18-1.18v-.47ZM23.21,16.78c0-.65-.53-1.18-1.18-1.18s-1.18.53-1.18,1.18v.96c0,.65.53,1.18,1.18,1.18s1.18-.53,1.18-1.18v-.96ZM41.48,50.15c-.65,0-1.18.53-1.18,1.18v.47c0,.65.53,1.18,1.18,1.18s1.18-.53,1.18-1.18v-.47c0-.65-.53-1.18-1.18-1.18ZM37.13,16.45c1.74,0,3.16-1.42,3.16-3.16s-1.42-3.16-3.16-3.16-3.16,1.42-3.16,3.16,1.42,3.16,3.16,3.16ZM37.13,12.48c.45,0,.81.36.81.81s-.36.81-.81.81-.81-.36-.81-.81.36-.81.81-.81ZM22.03,44.42c-.65,0-1.18.53-1.18,1.18v.47c0,.65.53,1.18,1.18,1.18s1.18-.53,1.18-1.18v-.47c0-.65-.53-1.18-1.18-1.18ZM23.21,39.83c0-.65-.53-1.18-1.18-1.18s-1.18.53-1.18,1.18v.96c0,.65.53,1.18,1.18,1.18s1.18-.53,1.18-1.18v-.96ZM23.21,34.07c0-.65-.53-1.18-1.18-1.18s-1.18.53-1.18,1.18v.96c0,.65.53,1.18,1.18,1.18s1.18-.53,1.18-1.18v-.96ZM61.61,5.3c-.31-.22-.7-.28-1.06-.16l-12.09,4c-.62.2-.95.87-.75,1.49.2.62.87.95,1.49.75l10.54-3.49v42.07l-18.27,6.05-19.07-6.32c-.24-.08-.5-.08-.74,0l-17.89,5.93V13.55l18.27-6.05,3.84,1.27c.55.33,1.26.16,1.6-.38.01-.02.04-.06.05-.09.17-.31.19-.67.06-1-.13-.33-.39-.58-.73-.69l-4.46-1.48c-.24-.08-.5-.08-.74,0L2.22,11.58c-.48.16-.81.61-.81,1.12v44.56c0,.38.18.73.49.96.2.15.44.22.69.22.12,0,.25-.02.37-.06l19.07-6.32,19.07,6.32c.24.08.5.08.74,0l19.44-6.44c.48-.16.81-.61.81-1.12V6.26c0-.38-.18-.73-.49-.96ZM42.65,34.95c0-.65-.53-1.18-1.18-1.18s-1.18.53-1.18,1.18v.91c0,.65.53,1.18,1.18,1.18s1.18-.53,1.18-1.18v-.91ZM42.65,29.93c0-.65-.53-1.18-1.18-1.18s-1.18.53-1.18,1.18v.47c0,.65.53,1.18,1.18,1.18s1.18-.53,1.18-1.18v-.47ZM42.65,40.41c0-.65-.53-1.18-1.18-1.18s-1.18.53-1.18,1.18v.91c0,.65.53,1.18,1.18,1.18s1.18-.53,1.18-1.18v-.91Z" style="fill: %23218897;"/></svg>') no-repeat center / contain;
		}
	}
	#accessMap{
		grid-row: 2;
		grid-column: 1 / 4;
		margin-top: 24px;
	}
	#accessTraffic{
		grid-column: 1 / 4;
		padding: clamp(64px, calc(120 / 1200 * 100vw), 120px) 0;
		background: #e6e9ed;
	}
	@media (max-width: 991.98px) {
	}
}

#accessTraffic{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	&>*{
		grid-column: 2;
	}
	& section{
		padding-bottom: 24px;
		&:nth-last-of-type(1){
			border-bottom: 1px solid var(--color-border);
		}
		& h3{
			display: grid;
			align-items: center;
			min-height: 48px;
			padding: 4px 24px;
			border: 1px solid currentColor;
			border-radius: 24px;
			font-weight: 700;
			font-size: clamp(16px, calc(18 / 768 * 100vw), 18px);
			text-align: center;
		}
		& div:nth-of-type(n+2){
			& h4{
				padding-top: 24px;
				border-top: 1px solid var(--color-border);
			}
		}
		& h4{
			margin-top: 24px;
			font-weight: 700;
			font-size: clamp(14px, calc(16 / 768 * 100vw), 16px);
		}
		& h4+div{
			margin-top: 8px;
			font-weight: 600;
			font-size: clamp(14px, calc(16 / 768 * 100vw), 16px);
		}
	}
	& figure{
		order: -1;
		& img{
			aspect-ratio: 4 / 3;
		}
	}
	@media (max-width: 991.98px) {
		& figure{
			margin-bottom: clamp(48px, calc(64 / 1200 * 100vw), 64px);
		}
	}
	@media (min-width: 992px) {
		display: grid;
		grid-template-columns: calc((100% - var(--wrap)) / 2) 360px 1fr;
		grid-template-rows: auto 1fr;
		align-items: start;
		& figure{
			grid-column: 3;
			grid-row: 1 / 3;
			width: min(calc(100% - 96px), 800px);
			margin: 0 48px;
		}
	}
}

#accessMap{
	display: flex;
	justify-content: center;
	background: linear-gradient(0deg, #e6e9ed 120px, transparent 120px);
	& img{
		aspect-ratio: 3 / 2;
		width: min(100%, 1280px);
		object-fit: cover;
		@media (min-width: 992px) {
			aspect-ratio: 1280 / 522;
		}
		@media (min-width: 1280px) {
			border-radius: 10px;
		}
	}
}




