/* CSS Document */

body{
	&:before{
		position: fixed;
	}
	&:has(#loading){
		overflow: hidden;
	}
	&.do{
		&:before{
			opacity: 0;
		}
		#wrapper{
			opacity: 0;
		}
	}
}

#loading{
	position: fixed;
	top: 0;
	left: 0;
	display: grid;
	grid-template-columns: 1fr min(100%, 1400px) 1fr;
	grid-template-rows: 1fr auto 1fr;
	width: 100%;
	height: 100%;
	background: #C7E5FF;
	transition: opacity 0.5s ease-out;
	z-index: 1000;
	&:before{
		content: "";
		grid-column: 2;
		grid-row: 3;
		background: linear-gradient(0deg, #fff 50%, #C7E5FF 50%);
		background: #fff;
	}
	& img{
		grid-column: 2;
		grid-row: 2;
		width: min(100%, 1400px);
		height: min(100vh, 100%);
		aspect-ratio: 1400 / 910;
	}
	&.done{
		opacity: 0;
	}
}

main{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	overflow: hidden;
	&>*{
		grid-column: 2;
	}
}

article{
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	& h2{
		display: grid;
		grid-template-columns: 1.5em auto 1.5em;
		justify-self: center;
		grid-gap: 0 0.5em;
		color: #4d4d4d;
		font-size: 24px;
		font-family: var(--font-min);
		text-align: center;
		@media (min-width: 992px){
			font-size: 32px;
		}
		&:before{
			content: "";
			grid-column: 1;
			grid-row: 1 / 3;
			align-self: end;
			aspect-ratio: 1;
			background: currentColor;
			transform: translateY(50%);
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42"><path d="M41.03,7.51c-1.14-.4-3.99,5.31-5.34,5.32l-4.39.04c1.6-1.76,2.86-3.72,1.9-4.58-1.6-1.43-4.43-1.59-6.68.07l-6.29,4.63-13.06.13c-1.23.13-2.3.44-3.22.86,0,0,0,0,0,0-.56.25-2.4,1.17-3.35,2.77,0,0,0,0,0,0-.08.12-.16.23-.23.35-.79,1.29-.31,2.8,1.44,3.12.76.14,6.95.23,13.83.28,0,0,0,0,.01,0,.04.04.07.08.11.12l11.11,10.61c2.02,1.93,4.84,2.14,6.62.92,1.58-1.08-1.37-5.17-3.31-7.3l-3.9-4.29h0c5.37.02,9.48.03,9.48.03,2.7-.03,4.71-1.35,5.57-3.94,0,0,1.66-8.47-.31-9.15ZM26.53,16.36c-.52,0-.95-.41-.95-.93,0-.52.41-.94.93-.95.52,0,.94.41.95.93,0,.52-.41.94-.93.95ZM20.84,15.48c0-.52.41-.95.93-.95.52,0,.94.41.95.93,0,.52-.41.94-.93.95-.52,0-.94-.41-.95-.93ZM17.03,14.58c.26,0,.5.1.67.28.17.17.27.4.27.65,0,.52-.41.94-.93.95-.36,0-.68-.2-.84-.5-.07-.13-.11-.27-.11-.43,0-.52.41-.94.93-.95ZM3.01,17.02l-1.54.04c-.23,0-.44-.05-.63-.15.92-1.55,2.77-2.46,3.27-2.68.07.15.12.32.12.51l.02.98c.02.7-.54,1.29-1.24,1.3ZM7.76,16.55c-.52,0-.94-.41-.95-.93,0-.52.41-.94.93-.95.52,0,.94.41.95.93,0,.52-.41.94-.93.95ZM11.36,15.57c0-.52.41-.94.93-.95.52,0,.94.41.95.93,0,.52-.41.94-.93.95-.52,0-.94-.41-.95-.93ZM31.27,16.31c-.52,0-.94-.41-.95-.93,0-.52.41-.94.93-.95.52,0,.94.41.95.93,0,.52-.41.94-.93.95Z"/></svg>') center no-repeat;
			-webkit-mask-size: min(100%, 42px);
		}
		&:after{
			content: "";
			grid-column: 2;
			grid-row: 2;
			height: 2px;
			margin: 0 -0.25em;
			background: currentColor;
			border-radius: 1px;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 2"><path d="M5,2H1c-.55,0-1-.45-1-1S.45,0,1,0h4c.55,0,1,.45,1,1s-.45,1-1,1Z"/></svg>') left top repeat-x;
			-webkit-mask-size: 12px 2px;
		}
	}
}

#pagePath{
	display: none;
}

#hero{
	grid-column: 1 / 4;
}

#heroSlide{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	grid-row-gap: 24px;
	opacity: 0;
	transition: opacity 0.2s ease-out;
	.done &{
		opacity: 1;
		}
	@media (min-width: 992px){
		grid-template-columns: 1fr min(calc(var(--wrap-fit) - 128px), var(--wrap-max)) 1fr;
		grid-template-rows: 1fr 80px;
		grid-row-gap: 0;
	}
	& dl{
		grid-column: 1;
		grid-row: 1;
		display: grid;
		grid-template-columns: 1fr min(calc(var(--wrap-fit) - 96px), var(--wrap-max)) 1fr;
		grid-template-rows: 1fr auto auto 24px;
		cursor: pointer;
		overflow: hidden;
		@media (min-width: 992px){
			grid-template-columns: 1fr min(calc(var(--wrap-fit) - 128px), var(--wrap-max)) 1fr;
			grid-template-rows: 1fr auto auto 80px;
		}
		&:before{
			content: "";
			grid-column: 1 / 4;
			grid-row: 2 / 5;
			background: linear-gradient(0deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
		}
	}
	& dt{
		position: relative;
		grid-column: 2;
		grid-row: 2;
		justify-self: start;
		color: #fff;
		font-size: 24px;
		font-family: var(--font-min);
		text-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
		@media (min-width: 992px){
			font-size: 32px;
		}
		&:before, 
		&:after{
			content: "";
			position: absolute;
			top: 0.825em;
			width: 100vw;
			border-bottom: 1px solid currentColor;
			opacity: 0.4;
		}
		&:before{
			right: calc(100% + 1em);
		}
		&:after{
			left: calc(100% + 1em);
		}
	}
	& dd{
		grid-column: 2;
		&:has(img){
			grid-column: 1 / 4;
			grid-row: 1 / 5;
			z-index: -1;
		}
		&:has(a){
			grid-column: 2;
			grid-row: 3;
			justify-self: start;
			margin-top: 16px;
		}
		& img{
			aspect-ratio: 1;
			object-fit: cover;
			@media (min-width: 576px){
				aspect-ratio: 1 / 0.667;
			}
			@media (min-width: 992px){
				aspect-ratio: 1400 / 660;
			}
			@media (min-width: 1400px){
				aspect-ratio: unset;
				height: 660px;
			}
		}
		& a{
			display: grid;
			grid-template-columns: 1fr 8px;
			align-items: center;
			grid-gap: 16px;
			min-height: 32px;
			padding: 4px 16px 4px 24px;
			border-radius: 16px;
			background: var(--color-theme);
			color: #fff;
			font-size: 14px;
			letter-spacing: 0.05em;
			text-decoration: none;
			&:hover{
				&:after{
					transform: translateX(4px);
				}
			}
			&:after{
				content: "";
				aspect-ratio: 1;
				background: currentColor;
				transition: transform 0.2s ease-out;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 8"><polygon points="4 4 0 8 0 0 4 4"/></svg>') center no-repeat;
				-webkit-mask-size: contain;
			}
		}
	}
	.slick-list{
		grid-column: 1 / 4;
		grid-row: 1;
		@media (min-width: 992px){
			grid-row: 1 / 3;
		}
	}
	.slick-arrow{
		grid-column: 1 / 4;
		grid-row: 1;
		align-self: center;
		color: #fff;
		margin: var(--wrap-space);
		@media (min-width: 1400px){
			width: 64px;
		}
	}
	.slick-next{
		justify-self: end;
		}
	.slick-dots{
		grid-column: 2;
		grid-row: 2;
		justify-self: center;
		color: var(--color-theme);
		@media (min-width: 992px){
			align-self: center;
			justify-self: start;
			& li{
				background: transparent;
				border-color: #fff;
				&.slick-active{
					background: #fff;
				}
			}
		}
	}
}

#emergency{
	grid-column: 1 / 4;
	justify-self: center;
	width: var(--wrap-wide);
	margin-top: 40px;
	& h2{
		display: none;
	}
	& ul{
		display: grid;
		grid-row-gap: 8px;
	}
	& li{
		display: contents;
	}
	& a{
		display: grid;
		align-items: center;
		min-height: 80px;
		padding: 8px 24px;
		background: #fff;
		border: 1px solid currentColor;
		border-radius: 40px;
		color: var(--color-theme);
		font-weight: 700;
		font-size: 18px;
		text-align: center;
		text-decoration: none;
		&:hover{
			background: var(--color-theme);
			border-color: transparent;
			color: #fff;
		}
		@media (min-width: 992px){
			min-height: 96px;
			border-radius: 48px;
			font-size: 20px;
		}
	}
}

#access{
	justify-self: center;
	width: min(100%, 1040px);
	margin-top: 72px;
	@media (min-width: 576px){
		grid-template-columns: 1fr 1fr;
		column-gap: 40px;
		& header,
		& footer{
			grid-column: 1 / 3;
		}
	}
	@media (min-width: 992px){
		margin-top: 112px;
	}
	@media (min-width: 1200px){
		column-gap: 80px;
	}
	& header{
		display: grid;
		& h2{
			& br{
				@media (min-width: 576px){
					display: none;
				}
			}
		}
		& h2+div{
			order: 1;
			display: grid;
			align-items: center;
			text-align: center;
			min-height: 64px;
			padding: 8px 24px;
			background: #fff;
			border-radius: 24px;
			color: var(--color-theme);
			font-weight: 700;
			font-size: 18px;
			overflow: hidden;
			@media (min-width: 992px){
				min-height: 80px;
				border-radius: 32px;
				font-size: 24px;
			}
		}
		& figure{
			justify-self: center;
			width: min(100%, 840px);
			margin-top: 64px;
			@media (min-width: 992px){
				margin-top: 80px;
			}
		}
	}
	& section{
		background: #fff;
		border-radius: 24px;
		box-shadow: 8px 8px 0 #94cce8; 
		margin-top: 64px;
		@media (min-width: 992px){
			border-radius: 32px;
		}
		&:nth-of-type(1){
			& h3{
				&:before{
					background: url("../images/accessShinkansen.svg") center no-repeat;
					aspect-ratio: 300 / 54;
					width: min(80%, 270px);
				}
			}
		}
		&:nth-of-type(2){
			& h3{
				&:before{
					background: url("../images/accessAirline.svg") center no-repeat;
					aspect-ratio: 300 / 100;
					width: min(60%, 192px);
				}
			}
			& dd:has(img){
				& span{
					background-color: var(--color-theme);
					color: var(--color-theme);
					font-size: 18px;
				}
			}
		}
		& h3{
			position: relative;
			display: grid;
			align-items: center;
			min-height: 80px;
			padding: 40px 16px 16px 16px;
			background: var(--color-theme);
			color: #fff;
			border-radius: 24px 24px 0 0;
			font-weight: 700;
			font-size: 20px;
			text-align: center;
			&:before{
				content: "";
				position: absolute;
				top: 0;
				left: 50%;
				transform: translate(-50%, -50%);
			}
			&:after{
				content: "";
				order: -1;
			}
			@media (min-width: 992px){
				min-height: 96px;
				padding-top: 40px;
				border-radius: 32px 32px 0 0;
			}
		}
		& h3+div{
			display: grid;
			justify-items: center;
			padding: 32px;
			&:last-child{
				margin-bottom: 24px;
				@media (min-width: 992px){
					margin-bottom: 32px;
				}
			}
		}
		& dl{
			position: relative;
			width: min(100%, 240px);
			font-weight: 700;
			text-align: center;
			&:nth-child(n+2){
				margin-top: 16px;
				&:before{
					content: "";
					position: absolute;
					top: 0;
					left: 50%;
					width: 14px;
					height: 16px;
					background: var(--color-theme);
					transform: translate(-50%, -100%);
				}
			}
			&:last-child{
				margin-top: 40px;
				border-width: 0px;
				&:before{
					width: 40px;
					height: 40px;
					-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><polygon points="27 20 27 0 13 0 13 20 0 20 20 40 40 20 27 20" /></svg>') center no-repeat;
					-webkit-mask-size: contain;
				}
			}
		}
		& dt{
			display: grid;
			align-items: center;
			min-height: 48px;
			padding: 8px;
			border-radius: 4px 4px 0 0;
			background: var(--color-theme);
			color: #fff;
			font-size: 20px;
			@media (min-width: 992px){
				font-size: 24px;
			}
			&:empty{
				display: none;
			}
		}
		& dd{
			display: grid;
			align-items: center;
			min-height: 48px;
			padding: 8px;
			border: 2px solid var(--color-theme);
			border-radius: 0 0 4px 4px;
			color: var(--color-theme);
			font-size: 18px;
			@media (min-width: 992px){
				font-size: 20px;
			}
			&:has(img){
				padding: 0;
				border: none;
				& span{
					position: absolute;
					top: 0;
					left: 100%;
					display: grid;
					align-items: center;
					height: 140px;
					padding-bottom: 1em;
					aspect-ratio: 218 / 150;
					background: #b6b6b6 url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 206.6 142.07"><path fill="white" d="M202.08,60.82c-3.31-11.78-13.78-20.66-25.99-21.8-.66.05-1.24-.12-1.34-.61-1.01-5-3.05-9.73-6.07-13.85-5.3-7.22-13.25-12.21-22.09-13.72-10.14-1.74-20.49,1.55-27.98,8.54-.54.5-2.4,1.23-2.96.35-2.95-4.63-6.82-8.66-11.43-11.65-8.31-5.4-18.68-7.37-28.35-5.04-9.36,2.26-17.38,8.32-22.42,16.48-.55.89-2.03,1.18-2.95.79-5.28-2.28-11.21-3.01-16.87-1.89-8.22,1.63-15.29,7.09-19.32,14.39-4.77,8.67-4.75,19.27-.34,28.08.12.24-.16.67-.32.79-4.35,3.4-7.6,8.02-9.16,13.33-2.6,8.84-.36,18.58,5.83,25.4,6.28,6.91,15.97,10.06,25.08,7.79.66-.16,2.45-.14,1.85,1.01-.7,1.33-1.39,2.66-2.09,3.99-4.06,7.74-8.11,15.49-12.17,23.23,6.47-5.08,12.94-10.15,19.41-15.23,4.22-3.31,8.43-6.62,12.65-9.93.54-.43,2.43-1.29,2.96-.35,2.39,4.21,5.66,7.93,9.65,10.69,7.17,4.97,16.31,6.85,24.81,4.71,8.32-2.1,15.24-7.81,19.31-15.3.45-.83,2.51-1.45,3.18-.61,3.31,4.16,7.53,7.48,12.42,9.59,8.27,3.59,18.02,3.29,25.98-1,7.5-4.04,12.98-11.19,15.21-19.39.23-.86,1.57-1.32,2.36-1.23,7.13.81,14.16-.88,20.01-5.07,10.11-7.25,14.49-20.58,11.14-32.48Z"/></svg>') center no-repeat;
					background-size: contain;
					color: #4d4d4d;
					font-size: 16px;
					-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 206.6 142.07"><path d="M197.1,45.86c-5.19-5.01-11.91-8.04-19.04-8.84-2.03-9.36-7.75-17.62-15.8-22.84-8.78-5.7-19.85-7.26-29.94-4.6-5.29,1.39-10.22,3.93-14.45,7.38-5.7-8.16-14.4-14-24.17-16.07-10.67-2.26-22.09-.12-31.2,5.87-4.43,2.91-8.24,6.69-11.23,11.06-9.38-3.36-19.93-2.34-28.52,2.82-8.01,4.81-13.74,13.1-15.16,22.37-.96,6.28.05,12.72,2.81,18.43C2.4,67.99-1.53,78.56.55,88.77c1.87,9.19,8.57,16.98,17.31,20.32,4.93,1.89,10.23,2.34,15.4,1.5-4.6,8.79-9.21,17.58-13.81,26.37-.7,1.33-1.39,2.66-2.09,3.99-.33.63.17.99.76,1.09.8.13,1.6-.19,2.22-.67,4.22-3.31,8.43-6.62,12.65-9.93,6.73-5.28,13.46-10.56,20.18-15.84.83-.65,1.67-1.31,2.5-1.96,4.75,7.52,12.44,12.95,21.16,14.84,9.55,2.07,19.88,0,27.85-5.69,3.47-2.47,6.44-5.56,8.78-9.1,6.53,7.05,15.88,11.07,25.55,10.87,9.67-.2,19.12-4.34,25.57-11.61,3.19-3.59,5.56-7.78,7.01-12.35,13.09.72,26.08-6.35,31.87-18.31,5.88-12.12,3.35-27.05-6.36-36.43Z"/></svg>') center no-repeat;
					-webkit-mask-size: contain;
					transform: translate(-45%, -15%) scale(0.5);
					@media (min-width: 768px){
						transform: translate(-40%, -20%) scale(0.5);
					}
					@media (min-width: 992px){
						transform: translate(-25%, -25%) scale(0.75);
					}
					@media (min-width: 1200px){
						transform: translate(-20%, -30%) scale(1);
					}
				}
			}
			&:has(svg){
				display: contents;
			}
			& img{
				aspect-ratio: 1 / 0.667;
				object-fit: cover;
				border-radius: 0 0 4px 4px;
			}
			& svg{
				position: absolute;
				top: 0;
				right: 0;
				width: 50%;
				max-width: 206px;
				height: auto;
				transform: translate(60%, -10%);
				@media (min-width: 992px){
					width: 75%;
					transform: translate(80%, -20%);
				}
				@media (min-width: 1200px){
					width: 100%;
				}
			}
		}
	}
	& footer{
		display: grid;
		grid-gap: 32px;
		margin-top: 24px;
	}
}

#recommend{
	grid-column: 1 / 4;
	justify-self: center;
	width: var(--wrap-wide);
	margin-top: 72px;
	@media (min-width: 992px){
		margin-top: 112px;
	}
	@media (min-width: 1400px){
		margin-top: 224px;
	}
	& h2+div{
		margin-top: 48px;
		@media (min-width: 992px){
			margin-top: 64px;
		}
	}
	& dl{
		position: relative;
		display: grid;
		grid-gap: 16px;
		&:has(a){
			&:not(:has(img)):before,
			& img{
				transition: opacity 0.2s ease-out;
			}
			&:hover{
				&:not(:has(img)):before,
				& img{
					opacity: 0.75;
				}
			}
		}
		&:not(:has(img)):before{
			content: "";
			grid-column: 1;
			grid-row: 1;
			aspect-ratio: 1 / 0.667;
			background: var(--dummy);
			border-radius: 4px;
		}
	}
	& dt{
		font-weight: 700;
	}
	& dd{
		&:has(img){
			order: -1;
		}
		&:has(a){
			display: contents;
		}
		& img{
			aspect-ratio: 1 / 0.667;
			object-fit: cover;
			border-radius: 4px;
		}
		& a{
			position: absolute;
			top: 0;
			right: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
		}
	}
}

#recommendSlide{
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	grid-gap: 16px 32px;
	@media (min-width: 992px){
		grid-row-gap: 32px;
	}
	& dl{
		grid-column: 1;
		grid-row: 1;
	}
	.slick-list{
		grid-column: 1 / 4;
		grid-row: 1;
		margin: 0 -16px;
		overflow: visible;
		&:first-child{
			.slick-track{
				transform: none !important;
			}
		}
		@media (min-width: 1400px){
			margin: 0 -20px;
			overflow: hidden;
		}
	}
	.slick-slide{
		width: min(75vw, 400px);
		margin: 0 16px;
		@media (min-width: 1400px){
			width: auto;
			margin: 0 20px;
		}
	}
	.slick-arrow{
		background: #fff;
		border-color: var(--color-border);
	}
	.slick-prev{
		justify-self: end;
	}
	.slick-dots{
		grid-column: 2;
		grid-row: 2;
		&:nth-child(2){
			display: none;
		}
	}
	
}

#ranking{
	grid-column: 1 / 4;
	justify-self: center;
	grid-row-gap: 24px;
	width: var(--wrap-wide);
	margin-top: 72px;
	@media (min-width: 992px){
		margin-top: 112px;
		grid-row-gap: 40px;
	}
	@media (min-width: 1400px){
		margin-top: 160px;
	}
	& h2+div{
		margin-top: 16px;
		@media (min-width: 576px){
			justify-self: end;
			margin: 0 0 8px 0;
		}
	}
	& section{
		display: none;
		grid-row: 3;
		&.select{
			display: grid;
		}
	}
	& h3{
		display: none;
	}
	& h3+div{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 32px 24px;
		@media (min-width: 576px){
			grid-template-columns: repeat(3, 1fr);
		}
		@media (min-width: 992px){
			grid-template-columns: 1.75fr 1fr 1fr;
			grid-gap: 40px;
		}
		@media (min-width: 1400px){
			grid-gap: 56px;
		}
	}
	& dl{
		counter-increment: count;
		position: relative;
		display: grid;
		grid-gap: 16px;
		&:has(a){
			&:not(:has(img)):before,
			& img{
				transition: opacity 0.2s ease-out;
			}
			&:hover{
				&:not(:has(img)):before,
				& img{
					opacity: 0.75;
				}
			}
		}
		&:not(:has(img)):before{
			content: "";
			grid-column: 1;
			grid-row: 1;
			padding-top: 66.67%;
			background: var(--dummy);
			border-radius: 4px;
		}
		&:after{
			content: counter(count);
			position: absolute;
			top: 0;
			left: 0;
			aspect-ratio: 1;
			width: min(30%, 80px);
			background: rgba(var(--color-theme-rgb), 0.6) url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 80 80"><path fill="white" d="M37.3,15.27l-.17.14c-1.88,1.45-3.93,2.83-6.09,4.08-2.15,1.25-4.46,2.16-6.85,2.71l-.28.06.33.92.22-.06c.7-.19,1.43-.42,2.18-.69.74-.26,1.5-.56,2.24-.89.74-.32,1.45-.67,2.12-1.03.39-.21.75-.42,1.1-.63l-11.52,17.59,3.98-.78.06-.11c.71-1.38,1.64-2.99,2.75-4.8,1.12-1.82,2.3-3.71,3.52-5.6,1.2-1.87,2.43-3.75,3.64-5.58,1.2-1.81,2.24-3.39,3.12-4.72l.11-.17-.46-.46Z"/></svg>') center no-repeat;
			border-radius: 4px 0 0 0;
			font-size: 0;
			z-index: 1;
			pointer-events: none;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><path d="M0,80V0h80L0,80Z"/></svg>') center no-repeat;
			-webkit-mask-size: contain;
		}
		&:nth-child(1){
			grid-auto-rows: 1fr auto;
			grid-column: 1 / 3;
			@media (min-width: 992px){
				grid-column: 1;
				grid-row: 1 / 3;
			}
		}
		&:nth-child(2){
			align-self: end;
			&:after{
				background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 80 80"><path fill="white" d="M24.26,29.57c1.36-.57,2.7-1.18,3.99-1.81,1.31-.63,2.48-1.36,3.49-2.15,1.02-.8,1.85-1.72,2.46-2.75.62-1.04.94-2.24.94-3.59,0-.64-.13-1.29-.38-1.91-.25-.63-.65-1.2-1.18-1.69-.53-.49-1.19-.89-1.98-1.19-.79-.3-1.72-.46-2.79-.46-1.23,0-2.34.22-3.3.64-.96.42-1.78.97-2.44,1.63s-1.17,1.39-1.51,2.18c-.35.79-.52,1.55-.52,2.28,0,.99.27,1.8.8,2.39.54.6,1.27.9,2.17.9.68,0,1.31-.17,1.85-.52.54-.34.97-.8,1.29-1.37l.1-.19-.45-.34-.13.06c-.29.13-.53.24-.73.32-.17.07-.4.1-.69.1-.62,0-1.11-.24-1.51-.73-.41-.51-.6-1.06-.6-1.7,0-.7.16-1.33.47-1.88.32-.56.72-1.04,1.2-1.43.48-.39,1.03-.69,1.62-.9.6-.2,1.18-.31,1.74-.31,1.29,0,2.24.39,2.91,1.19.67.8,1,1.87,1,3.16,0,.8-.12,1.58-.35,2.33-.23.74-.66,1.5-1.27,2.26-.62.77-1.51,1.54-2.63,2.29-1.13.76-2.61,1.56-4.4,2.38-3.81,1.73-6.68,3.2-8.53,4.36-2.55,1.6-2.9,2.21-2.9,2.59,0,.12,0,.23.02.32.01.08.08.33.47.33.22,0,.44-.16.7-.5.19-.26.45-.54.76-.85.3-.3.7-.57,1.19-.81.48-.24,1.1-.35,1.83-.35.65,0,1.28.13,1.86.38.6.26,1.2.54,1.79.83.59.29,1.15.58,1.7.86.58.3,1.16.45,1.73.45,1.02,0,1.98-.22,2.83-.67.85-.44,1.62-1,2.3-1.69.68-.68,1.29-1.44,1.81-2.26.52-.82.99-1.62,1.39-2.4l.16-.31-.81-.12-.08.16c-.23.47-.55,1.02-.93,1.64-.38.61-.81,1.18-1.27,1.7-.46.51-.98.96-1.53,1.32-.53.34-1.08.52-1.64.52-.39,0-.89-.12-1.47-.34-.61-.24-1.24-.49-1.88-.76-.67-.27-1.32-.51-1.95-.74-1-.36-1.75-.42-2.44-.29.54-.29,1.1-.57,1.69-.83,1.31-.58,2.67-1.17,4.02-1.74Z"/></svg>');
			}
		}
		&:nth-child(3){
			&:after{
				background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 80 80"><path fill="white" d="M35.86,16.88c-.21-.57-.55-1.07-1-1.5-.45-.42-1.01-.75-1.67-.99-.65-.24-1.44-.35-2.34-.35s-1.82.15-2.63.46c-.81.3-1.53.72-2.13,1.25-.61.53-1.1,1.13-1.46,1.81-.36.69-.55,1.42-.55,2.18s.24,1.41.7,1.96c.47.56,1.14.85,1.99.85.66,0,1.27-.18,1.8-.54.56-.38.86-.87.89-1.45l.02-.43-.38.19c-.25.12-.46.2-.62.24-.17.04-.4.05-.67.05-.55,0-.95-.2-1.21-.62-.28-.45-.42-.95-.42-1.49s.12-.98.35-1.38c.23-.41.54-.76.92-1.05.38-.29.81-.51,1.3-.66.49-.15.99-.23,1.47-.23,1.05,0,1.8.32,2.3.98.51.67.77,1.51.77,2.49,0,.89-.17,1.64-.49,2.24-.33.6-.77,1.11-1.31,1.5-.55.4-1.19.71-1.89.95-.72.23-1.47.41-2.24.53-.78.12-1.57.21-2.34.28-.79.07-1.51.14-2.15.22l-.22.03v1.15l.29-.04c.37-.05.74-.09,1.12-.12.38-.03.76-.04,1.12-.04,1.13,0,2.01.31,2.62.91.61.6.92,1.48.92,2.6,0,.99-.22,1.9-.65,2.7-.44.81-1.01,1.5-1.72,2.06-.71.56-1.53,1.01-2.44,1.32-.92.31-1.88.47-2.86.47-1.3,0-2.4-.31-3.26-.91-.84-.6-1.25-1.48-1.25-2.72,0-1.13.27-2,.81-2.59.54-.59,1.16-.88,1.9-.88.14,0,.31.02.5.07l.24.06.14-.54-.1-.1c-.29-.29-.66-.52-1.08-.7-.43-.17-.85-.26-1.25-.26-1.19,0-2.14.43-2.82,1.27-.66.83-.99,1.82-.99,2.94,0,.84.21,1.61.62,2.27.4.65.94,1.22,1.61,1.68.66.45,1.43.8,2.28,1.04.85.23,1.73.35,2.62.35,1.32,0,2.63-.18,3.89-.53,1.26-.35,2.4-.85,3.39-1.49,1-.64,1.81-1.43,2.42-2.35.61-.93.92-1.97.92-3.08,0-1.46-.44-2.58-1.31-3.33-.55-.48-1.21-.82-1.98-1.03.63-.12,1.27-.26,1.9-.42,1.08-.28,2.07-.66,2.93-1.12.88-.47,1.61-1.06,2.16-1.77.57-.72.85-1.6.85-2.61,0-.62-.11-1.21-.32-1.77Z"/></svg>');
			}
		}
		&:nth-child(4){
			&:after{
				background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 80 80"><polygon fill="white" points="37.13 14.86 34.22 15.17 26.03 27.59 16.9 27.59 36.78 11.19 34.95 11.19 14.44 28.57 25.42 28.57 20.45 36.13 23.91 35.63 28.42 28.57 33.3 28.57 33.88 27.59 29.02 27.59 37.13 14.86"/></svg>');
			}
		}
		&:nth-child(5){
			&:after{
				background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 80 80"><path fill="white" d="M37.57,14.65l-.2.15c-.41.31-.87.57-1.37.77-.87.36-2.02.48-3.24-.06-.54-.24-1.03-.6-1.46-1.08l-.18-.2-10.46,10.67.55.44.15-.08c.65-.36,1.34-.67,2.04-.92.69-.24,1.42-.37,2.16-.37,1.09,0,1.91.3,2.43.9.53.6.8,1.44.8,2.49s-.18,2.05-.54,3.01-.87,1.84-1.52,2.58c-.64.74-1.43,1.34-2.34,1.78-.91.43-1.93.66-3.03.66-1.26,0-2.28-.35-3.01-1.03-.73-.68-1.1-1.65-1.1-2.88,0-.92.26-1.69.78-2.3.52-.6,1.16-.89,1.97-.89.12,0,.24,0,.35.02.11.01.23.03.36.06l.23.05.13-.52-.09-.1c-.69-.74-1.53-1.12-2.5-1.12-1.16,0-2.12.41-2.83,1.22-.71.8-1.06,1.79-1.06,2.95,0,.92.2,1.74.59,2.44.39.7.92,1.28,1.57,1.74.65.46,1.39.8,2.2,1.02.81.22,1.64.33,2.49.33,1.28,0,2.54-.25,3.75-.74,1.21-.49,2.31-1.14,3.27-1.94.96-.8,1.75-1.74,2.34-2.79.59-1.06.89-2.16.89-3.26,0-1.59-.49-2.8-1.45-3.61-.95-.79-2.27-1.2-3.92-1.2-.74,0-1.39.08-1.93.23-.26.07-.52.15-.78.24l6.12-6.12c.6.26,1.11.48,1.53.65.8.33,1.86.47,3.06.04.47-.17.93-.39,1.37-.66.43-.27.85-.57,1.23-.9.39-.33.7-.67.92-1.01l.1-.15-.38-.5Z"/></svg>');
			}
		}
	}
	& dt{
		font-weight: 700;
		@media (min-width: 576px){
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}
	}
	& dd{
		&:has(img){
			order: -1;
			position: relative;
			padding-top: 66.67%;
		}
		&:has(a){
			display: contents;
		}
		& img{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			border-radius: 4px;
		}
		& a{
			position: absolute;
			top: 0;
			right: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
		}
	}
}

#rankingTab{
	& ul{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}
	& li{
		display: grid;
		align-items: center;
		min-height: 40px;
		padding: 4px 16px;
		background: #fff;
		border: 1px solid var(--color-border);
		font-weight: 500;
		text-align: center;
		cursor: pointer;
		&:nth-child(n+2){
			border-left-width: 0;
		}
		&.select{
			position: relative;
			background: #94cce8;
			&:before{
				content: "";
				position: absolute;
				top: 100%;
				width: 100%;
				height: 16px;
				background: var(--color-border) url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 14"><polyline fill="%2394cce8" points="1,0 10,13, 19,0" /></svg>') center no-repeat;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 14"><polyline points="0,0 10,14 20,0" /></svg>') center no-repeat;
			}
		}
		&:has(wbr){
			word-break: keep-all;
			overflow-wrap: break-word;
		}
	}
}

#information{
	grid-row-gap: 24px;
	margin-top: 72px;
	@media (min-width: 992px){
		margin-top: 112px;
		grid-row-gap: 40px;
	}
	& h2+div{
		@media (max-width: 991.98px){
			margin-top: 16px;
		}
		& p{
			padding: 10% 0;
			text-align: center;
		}
	}
}

#sns{
	margin-top: 40px;
	& h2{
		display: none;
	}
	& ul{
		display: flex;
		justify-content: center;
		grid-gap: 8px;
	}
	& li{
		display: contents;
	}
	& a{
		display: grid;
		aspect-ratio: 1;
		width: 48px;
		-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.48 24"><path d="m12.5,4.64c-.82-.48-1.47-.86-2.28-.86s-1.48.2-1.83.54c-.35.33-.52.98-.52,1.93v1.41h4.27l-.92,3.92h-3.35v12.41H2.5v-12.41H0v-3.92h2.5v-1.5c0-1.58.19-2.52.56-3.3.37-.78,1.09-1.64,2.09-2.13,1-.49,2.48-.73,4.02-.73s2.8.52,4.3.95l-.98,3.69Z"/></svg>');
		-webkit-mask-position: center;
		-webkit-mask-repeat: no-repeat;
		-webkit-mask-size: auto 50%;
		background: #4d4d4d;
		font-size: 0;
		&[href*="x.com"]{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1227"><path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z"/></svg>');
		}
		&[href*="instagram.com"]{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23.96 24"><path d="m11.98,5.86c-3.38,0-6.14,2.75-6.14,6.14s2.75,6.14,6.14,6.14,6.14-2.75,6.14-6.14-2.75-6.14-6.14-6.14Zm0,10.12c-2.2,0-3.99-1.79-3.99-3.99s1.79-3.99,3.99-3.99,3.99,1.79,3.99,3.99-1.79,3.99-3.99,3.99Zm6.44-11.83c-.81,0-1.46.66-1.46,1.46s.66,1.46,1.46,1.46,1.46-.66,1.46-1.46-.66-1.46-1.46-1.46Zm-1.42-4.16H6.97C3.13,0,0,3.13,0,6.97v10.06c0,3.84,3.13,6.97,6.97,6.97h10.02c3.84,0,6.97-3.13,6.97-6.97V6.97c0-3.84-3.13-6.97-6.97-6.97Zm4.77,17.03c0,2.63-2.14,4.77-4.77,4.77H6.97c-2.63,0-4.77-2.14-4.77-4.77V6.97c0-2.63,2.14-4.77,4.77-4.77h10.02c2.63,0,4.77,2.14,4.77,4.77v10.06Z"/></svg>');
		}
	}
}

.button{
	display: grid;
	grid-template-columns: 1fr 12px;
	align-items: center;
	width: min(100%, 296px);
	min-height: 48px;
	padding: 8px 16px;
	background: #fff;
	border: 1px solid currentColor;
	border-radius: 24px;
	color: var(--color-theme);
	font-size: 16px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	letter-spacing: 0.025em;
	div:has(>&){
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		grid-gap: 16px 24px;
	}
	&:hover{
		&:after{
			transform: translateX(4px);
		}
	}
	&:after{
		content: "";
		aspect-ratio: 1;
		background: currentColor;
		transition: transform 0.2s ease-out;
		-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 12"><polygon points="6 6 0 12 0 0 6 6" /></svg>') center no-repeat;
		-webkit-mask-size: contain;
	}
}