/* CSS Document */

#pagePath{
	display: none;
	}

#hero{
	& dl{
		grid-column: 1;
		grid-row: 1;
		position: relative;
		display: grid;
		grid-template-columns: 1fr var(--wrap-fit) 1fr;
		grid-template-rows: auto 1fr;
		grid-row-gap: clamp(16px, calc(24 / 1200 * 100vw), 24px);
		&:has(a){
			& dd:has(img){
				grid-row: 1 / 5;
			}
		}
		& dt{
			grid-column: 2 / 4;
			grid-row: 2;
			justify-self: end;
			align-self: end;
			display: grid;
			align-items: center;
			min-height: 32px;
			padding: 4px 16px;
			background: rgba(62, 58, 57, 0.75);
			border-radius: 4px 0 0 4px;
			color: #fff;
			letter-spacing: 0.1em;
			&:empty{
				visibility: hidden;
			}
		}
		& dd:has(img){
			grid-column: 1 / 4;
			grid-row: 1 / 4;
			padding-top: 80%;
		}
		& dd:has(a){
			grid-column: 2;
			grid-row: 3;
			justify-self: center;
		}
		@media (min-width: 768px) {
			& dt{
				grid-column: 2;
				border-radius: 4px;
			}
			& dd:has(img){
				padding-top: min(50%, 640px);
			}
			& dd:has(a){
				justify-self: end;
			}
		}
	}
	& dd{
		&:has(img){
			z-index: -1;
		}
		& img{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		& a{
			display: grid;
			align-items: center;
			min-height: 32px;
			padding: 4px 16px;
			background: var(--color-theme);
			border-radius: 16px;
			color: #fff;
			font-weight: 700;
			font-size: 14px;
			text-align: center;
			letter-spacing: 0.025em;
			text-decoration: none;
			&:hover{
				background: var(--color-point);
				color: #fff;
			}
		}
	}
	.slide{
		display: grid;
	}
	.slick-slider{
		display: grid;
		grid-template-columns: 1fr var(--wrap-fit) 1fr;
		.slick-list{
			grid-column: 1 / 4;
			grid-row: 1 / 3;
		}
		.slick-dots{
			grid-column: 2;
			grid-row: 2;
			padding-bottom: clamp(16px, calc(24 / 1200 * 100vw), 24px);
			z-index: 1;
		}
	}
}

#alert{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	padding: 24px 0;
	background: #de403a;
	color: #fff;
	font-weight: 700;
	letter-spacing: 0.025em;
	text-align: center;
	& h2{
		display: none;
	}
	& h2+div{
		display: grid;
		grid-row-gap: 16px;
	}
	& dl{
		display: grid;
		grid-gap: 8px 16px;
		justify-content: center;
		@media (min-width: 768px) {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
		}
	}
	& dd{
		& a{
			display: grid;
			align-items: center;
			min-height: 32px;
			padding: 4px 16px;
			background: #fff;
			border-radius: 16px;
			color: #de403a;
			font-size: 14px;
			text-decoration: none;
		}
	}
}

#intro{
	position: relative;
	display: grid;
	grid-template-columns: min(var(--wrap-fit), 1040px);
	justify-content: center;
	background: #d2ebda;
	padding-top: clamp(40px, calc(80 / 1200 * 100vw), 80px);
	overflow: hidden;
	& h2{
		display: grid;
		grid-template-columns: 0 auto 0;
		justify-content: center;
		padding-bottom: 8px;
		border-bottom: 4px dotted currentColor;
		color: var(--color-point);
		font-weight: 900;
		font-size: clamp(22px, calc(28 / 768 * 100vw), 28px);
		letter-spacing: 0.1em;
		text-align: center;
		@media (min-width: 576px) {
			grid-template-columns: 1fr auto 1fr;
			column-gap: 4px;
		}
		&:before{
			content: "";
			justify-self: end;
			aspect-ratio: 1;
			height: 1em;
			background: currentColor;
			transform: translateY(calc(0.325em - 50%));
			-webkit-mask: var(--icon-point) no-repeat left top / contain;
		}
	}
	& h2+div{
		margin-top: clamp(24px, calc(40 / 1200 * 100vw), 40px);
		letter-spacing: 0.025em;
		line-height: 2;
	}
	#introArea{
		pointer-events: none;
		& img{
			position: absolute;
			left: 50%;
			bottom: 0;
			transform: translateX(-50%);
		}
	}
	@media (max-width: 767.98px) {
		& h2+div{
			justify-self: center;
			width: calc(100% - 16px);
		}
		#introLocation{
			justify-self: center;
			width: min(calc(100% - 16px), 464px);
			margin-top: 32px;
		}
		#introArea{
			height: calc(76.4dvw + 16px);
			& img{
				width: 100%;
				height: auto;
			}
		}
	}
	@media (min-width: 768px) {
		grid-template-rows: auto 1fr;
		& h2,
		& h2+div{
			grid-column: 1;
			justify-self: end;
			width: min(55%, 480px);
			}
		& h2{
			grid-row: 1;
		}
		& h2+div{
			grid-row: 2;
		}
		#introLocation{
			grid-column: 1;
			grid-row: 1 / 3;
			width: min(calc(45% - 40px), 464px);
		}
		#introArea{
			height: min(40dvw, 480px);
			& img{
				width: min(200%, 2400px);
				height: auto;
			}
		}
	}
}

#feature{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	justify-content: center;
	padding: clamp(64px, calc(80 / 1200 * 100vw), 80px) 0;
	background: linear-gradient(0deg, rgba(255, 255, 255, 0.5) 100%, transparent), url(/images/featureBg.jpg) no-repeat center / cover;
	overflow: hidden;
	&>*{
		grid-column: 2;
	}
	& h2{
		justify-self: center;
		display: grid;
		grid-template-columns: 1fr auto 0;
		justify-content: center;
		column-gap: 16px;
		padding-bottom: 4px;
		border-bottom: 4px dotted currentColor;
		font-weight: 900;
		font-size: clamp(22px, calc(28 / 768 * 100vw), 28px);
		letter-spacing: 0.1em;
		text-align: center;
		&:before,
		&:after{
			content: "";
			grid-column: 1;
			grid-row: 1;
			height: 1em;
			background: currentColor;
		}
		&:before{
			aspect-ratio: 1;
			transform: translateY(calc(0.325em - 50%));
			-webkit-mask: var(--icon-point) no-repeat left top / contain;
		}
		&:after{
			grid-column: 1;
			aspect-ratio: 20 / 16;
			margin-left: 0.75em;
			transform: translateY(0.325em);
			-webkit-mask: var(--icon-feature) no-repeat right bottom / contain;
		}
	}
	#featureList{
		grid-column: 1 / 4;
		margin-top: clamp(24px, calc(40 / 1200 * 100vw), 40px);
	}
	#featureLink{
		margin-top: clamp(24px, calc(32 / 1200 * 100vw), 32px);
	}
}

#featureList{
	& section{
		position: relative;
		display: grid;
		grid-template-rows: auto 1fr;
		background: #fff;
		border-radius: 8px;
		overflow: hidden;
		&:not(:has(img)):before{
			content: "";
			aspect-ratio: 3 / 2;
			background: var(--dummy);
		}
		& img{
			aspect-ratio: 3 / 2;
		}
	}
	& h3{
		padding: clamp(16px, calc(24 / 1200 * 100vw), 24px);
		font-size: 14px;
		letter-spacing: 0.025em;
	}
	& a{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		font-size: 0;
	}
	& figure{
		order: -1;
	}
	& img{
		object-fit: cover;
	}
	.slide{
		display: grid;
		width: min(var(--wrap-fit), 1120px);
		margin-inline: auto;
		&:not(.slick-slider){
			grid-gap: 32px;
			filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.2));
			@media (max-width: 575.98px) {
				& section:nth-child(n+2){
					display: none;
				}
			}
			@media (min-width: 576px) {
				grid-template-columns: repeat(2, 1fr);
			}
			@media (min-width: 576px) and (max-width: 991.98px) {
				& section:nth-child(n+3){
					display: none;
				}
			}
			@media (min-width: 992px) {
				grid-template-columns: repeat(3, 1fr);
				& section:nth-child(n+4){
					display: none;
				}
			}
		}
	}
	.slick-slider{
		display: grid;
		width: min(var(--wrap-fit), 1217px);
		grid-template-columns: 0 min(100%, 1152px) 0;
		justify-content: space-between;
		.slick-list{
			grid-column: 2;
		}
		.slick-dots{
			grid-column: 2;
		}
		@media (max-width: 767.98px) {
			.slick-list{
				overflow: visible;
			}
			.slick-slide{
				width: min(calc(100dvw - 64px), 320px);
			}
		}
	}
	.slick-list{
		filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.2));
	}
	.slick-track{
		display: flex;
	}
	.slick-slide{
		display: grid;
		height: auto;
		margin: 0 clamp(8px, calc(16 / 1200 * 100vw), 16px);
	}
	.slick-arrow{
		justify-self: center;
		align-self: center;
		width: clamp(40px, calc(48 / 1200 * 100vw), 48px);
	}
	.slick-dots{
		margin-top: clamp(24px, calc(32 / 1200 * 100vw), 32px);
		&:has(li:only-child){
			display: none;
		}
	}
}

#featureLink{
	display: flex;
	justify-content: center;
	& a{
		display: grid;
		align-items: center;
		min-width: min(80%, 220px);
		min-height: 40px;
		padding: 4px 24px;
		background: var(--color-theme);
		border-radius: 20px;
		color: #fff;
		font-weight: 700;
		text-align: center;
		letter-spacing: 0.025em;
		text-decoration: none;
		&:hover{
			background: var(--color-point);
			color: #fff;
		}
	}
}

#theme{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	padding: clamp(64px, calc(80 / 1200 * 100vw), 80px) 0;
	background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 10 10" fill="white"><rect width="100%" height="100%"/></svg>') no-repeat center top / 100% clamp(184px, calc(280 / 1200 * 100vw), 280px), url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1366 180" fill="white"><path d="M683,2.67c262.85,0,502.42,67.13,683,177.33V0H0v180C180.58,69.81,420.15,2.67,683,2.67Z"/></svg>') no-repeat center clamp(184px, calc(280 / 1200 * 100vw), 280px) / 100% auto, url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" fill="white" opacity="0.3"><rect x="5px" width="4" height="100%" /></svg>') center top / 14px;
	background-color: #f8f1e7;
	& h2{
		justify-self: center;
		display: grid;
		grid-template-columns: 1fr auto 0;
		justify-content: center;
		column-gap: 16px;
		padding-bottom: 4px;
		border-bottom: 4px dotted currentColor;
		font-weight: 900;
		font-size: clamp(22px, calc(28 / 768 * 100vw), 28px);
		letter-spacing: 0.1em;
		text-align: center;
		&:before,
		&:after{
			content: "";
			grid-column: 1;
			grid-row: 1;
			height: 1em;
			background: currentColor;
		}
		&:before{
			aspect-ratio: 1;
			transform: translateY(calc(0.325em - 50%));
			-webkit-mask: var(--icon-point) no-repeat left top / contain;
		}
		&:after{
			grid-column: 1;
			aspect-ratio: 20 / 16;
			margin-left: 0.75em;
			transform: translateY(0.325em);
			-webkit-mask: var(--icon-theme) no-repeat right bottom / contain;
		}
	}
	#themeList{
		margin-top: clamp(24px, calc(40 / 1200 * 100vw), 40px);
	}
	#themeLink{
		margin-top: clamp(24px, calc(32 / 1200 * 100vw), 32px);
	}
}

#themeList{
	@media (max-width: 767.98px) {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 16px 0;
		&:has(section:nth-child(even):last-child){
			padding-bottom: 80px;
		}
		& section:nth-child(even){
			transform: translateY(80px);
		}
	}
	@media (min-width: 768px) {
		display: flex;
		flex-wrap: wrap;
		grid-gap: 0 clamp(40px, calc(64 / 1200 * 100vw), 64px);
		& section{
			width: calc((100% - clamp(80px, calc(128 / 1200 * 100vw), 128px)) / 3);
			&:nth-child(5n+4){
				margin-left: calc(33.33% / 2);
			}
		}
	}
	& section{
		position: relative;
		display: grid;
		justify-items: center;
		grid-template-rows: auto 1fr;
		grid-row-gap: 8px;
		&:not(:has(img)):before{
			content: "";
			aspect-ratio: 1;
			width: min(80%, 240px);
			border: clamp(4px, calc(8 / 1200 * 100vw), 8px) solid #fff;
			border-radius: 100%;
			background: var(--dummy);
			filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.2));
		}
		& figure{
			order: -1;
			width: min(80%, 240px);
			border: clamp(4px, calc(8 / 1200 * 100vw), 8px) solid #fff;
			border-radius: 100%;
			overflow: hidden;
			filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.2));
		}
		& img{
			aspect-ratio: 1;
		}
	}
	& h3{
		font-weight: 700;
		font-size: clamp(16px, calc(18 / 768 * 100vw), 18px);
		letter-spacing: 0.1em;
	}
	& a{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		font-size: 0;
	}
	& img{
		object-fit: cover;
	}
}

#themeLink{
	display: flex;
	justify-content: center;
	& a{
		display: grid;
		align-items: center;
		min-width: min(80%, 220px);
		min-height: 40px;
		padding: 4px 24px;
		background: var(--color-theme);
		border-radius: 20px;
		color: #fff;
		font-weight: 700;
		text-align: center;
		letter-spacing: 0.025em;
		text-decoration: none;
		&:hover{
			background: var(--color-point);
			color: #fff;
		}
	}
}

#ranking{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	padding: clamp(64px, calc(80 / 1200 * 100vw), 80px) 0;
	background: linear-gradient(0deg, rgba(255, 255, 255, 0.5) 100%, transparent), url(/images/rankingBg.jpg) no-repeat center / cover;
	overflow: hidden;
	& h2{
		justify-self: center;
		display: grid;
		grid-template-columns: 1fr auto 0;
		justify-content: center;
		align-items: baseline;
		column-gap: 16px;
		padding-bottom: 4px;
		border-bottom: 4px dotted currentColor;
		font-weight: 900;
		font-size: clamp(22px, calc(28 / 768 * 100vw), 28px);
		letter-spacing: 0.1em;
		text-align: center;
		&:before{
			content: "";
			grid-column: 1;
			aspect-ratio: 3 / 2;
			height: 1.5em;
			background: currentColor;
			transform: translateY(0.1em);
			-webkit-mask: var(--icon-point) no-repeat left top / clamp(20px, calc(26 / 768 * 100vw), 26px), url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 27.84"><path d="M29.96,23.6H6.04c-1.12,0-2.03.91-2.03,2.04v.17c0,1.12.91,2.03,2.03,2.03h23.91c1.12,0,2.04-.91,2.04-2.03v-.17c0-1.12-.91-2.04-2.04-2.04ZM33.27,3.91c-1.51,0-2.74,1.22-2.74,2.73,0,.74.29,1.41.77,1.9-1.86,3.85-5.42,5.2-8.17,3.98-2.45-1.09-3.36-4.19-3.67-6.59,1-.53,1.68-1.57,1.68-2.78,0-1.74-1.41-3.14-3.15-3.14s-3.15,1.41-3.15,3.14c0,1.21.68,2.26,1.68,2.78-.31,2.4-1.21,5.51-3.67,6.59-2.76,1.22-6.31-.13-8.17-3.98.48-.49.77-1.16.77-1.9,0-1.51-1.22-2.73-2.73-2.73S0,5.13,0,6.64c0,1.39,1.04,2.54,2.38,2.71l3.15,11.54h24.93l3.15-11.54c1.34-.17,2.38-1.32,2.38-2.71,0-1.51-1.22-2.73-2.73-2.73Z"/></svg>') no-repeat right bottom / auto 1em;
		}
	}
	#rankingList{
		margin-top: clamp(24px, calc(40 / 1200 * 100vw), 40px);
	}
	#rankingLink{
		margin-top: clamp(24px, calc(32 / 1200 * 100vw), 32px);
	}
}

#rankingList{
	grid-gap: clamp(24px, calc(32 / 1200 * 100vw), 32px);
	@media (max-width: 767.98px) {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		& section:nth-child(1){
			grid-column: 1 / 3;
		}
	}
	@media (min-width: 768px) {
		display: flex;
		flex-wrap: wrap;
		& section:nth-child(1){
			width: calc((100% - (clamp(24px, calc(32 / 1200 * 100vw), 32px) * 2)) / 7 * 3);
		}
		& section:nth-child(2),
		& section:nth-child(3){
			width: calc((100% - (clamp(24px, calc(32 / 1200 * 100vw), 32px) * 2)) / 7 * 2);
		}
		& section:nth-child(n+4){
			width: calc((100% - (clamp(24px, calc(32 / 1200 * 100vw), 32px) * 3)) * 0.25);
		}	
	}
	& section{
		counter-increment: count;
		position: relative;
		display: grid;
		grid-template-rows: auto 1fr;
		grid-row-gap: 16px;
		&:not(:has(img)):before{
			content: "";
			grid-column: 1;
			grid-row: 1;
			aspect-ratio: 1;
			background: var(--dummy);
			border-radius: 8px;
			filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.2));
		}
		& figure{
			grid-column: 1;
			grid-row: 1;
			filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.2));
		}
		& img{
			aspect-ratio: 1;
			border-radius: 8px;
		}
		&:after{
			content: counter(count);
			grid-column: 1;
			grid-row: 1;
			justify-self: start;
			align-self: end;
			display: grid;
			place-items: center;
			margin: 0.5em;
			background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><rect width="100%" height="100%" /></svg>') no-repeat center top / contain;
			color: #fff;
			font-weight: 700;
			font-size: clamp(16px, calc(20 / 768 * 100vw), 20px);
			line-height: 1;
			text-align: center;
			z-index: 1;
			pointer-events: none;
		}
		&:nth-child(1){
			&:not(:has(img)):before,
			& img{
				aspect-ratio: 3 / 2;
			}
			& h3{
				padding: 0 16px;
			}
		}
		&:nth-child(-n+3){
			&:after{
				aspect-ratio: 58 / 52;
				width: 2.5em;
				padding-top: 0.75em;
				font-size: clamp(18px, calc(22 / 768 * 100vw), 22px);
			}
		}
		&:nth-child(1){
			&:after{
				font-size: clamp(20px, calc(26 / 768 * 100vw), 26px);
				background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 58 52"><path fill="white" d="M11.53,52c-2.87,0-5.21-2.35-5.21-5.23v-.27c0-2.15,1.3-4.01,3.16-4.81l-5.4-23.2c-2.4-.92-4.08-3.26-4.08-5.93,0-3.5,2.83-6.34,6.32-6.34s6.31,2.84,6.31,6.34c0,1.14-.3,2.24-.87,3.21,1.73,3.12,3.86,4.82,6.07,4.82.72,0,1.48-.17,2.26-.52,2.78-1.24,3.95-4.97,4.43-7.71-1.56-1.31-2.49-3.26-2.49-5.36,0-3.86,3.12-7,6.96-7s6.96,3.14,6.96,7c0,2.1-.93,4.05-2.49,5.36.49,2.74,1.65,6.47,4.43,7.71.77.34,1.53.52,2.25.52,2.21,0,4.34-1.7,6.07-4.82-.56-.96-.87-2.06-.87-3.21,0-3.5,2.83-6.34,6.32-6.34s6.31,2.84,6.31,6.34c0,2.68-1.69,5.03-4.1,5.94l-5.63,23.09c1.99.74,3.41,2.66,3.41,4.91v.27c0,2.88-2.34,5.23-5.21,5.23H11.53Z"/><path fill="%23c9a73c" d="M51.69,8.21c-2.38,0-4.32,1.94-4.32,4.34,0,1.17.46,2.24,1.21,3.02-2.93,6.12-7.14,8.26-11.49,6.32-3.87-1.72-5.3-6.65-5.78-10.47,1.58-.84,2.66-2.5,2.66-4.42,0-2.76-2.22-5-4.96-5s-4.96,2.24-4.96,5c0,1.92,1.08,3.59,2.66,4.42-.48,3.82-1.91,8.75-5.78,10.47-4.35,1.93-8.56-.2-11.49-6.32.75-.78,1.21-1.84,1.21-3.02,0-2.4-1.93-4.34-4.31-4.34s-4.32,1.94-4.32,4.34c0,2.21,1.64,4.03,3.76,4.31l6.14,26.41h-.37c-1.77,0-3.21,1.45-3.21,3.23v.27c0,1.79,1.44,3.23,3.21,3.23h34.93c1.78,0,3.21-1.45,3.21-3.23v-.27c0-1.79-1.44-3.23-3.21-3.23h-.67l6.44-26.41c2.12-.28,3.76-2.1,3.76-4.31,0-2.4-1.93-4.34-4.31-4.34Z"/></svg>');
			}
		}
		&:nth-child(2){
			&:after{
				background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 43.11"><path fill="white" d="M9.77,43.11c-2.54,0-4.62-2.08-4.62-4.63v-.22c0-1.8,1.02-3.36,2.51-4.13L3.38,15.71c-2-.85-3.38-2.84-3.38-5.11,0-3.05,2.48-5.54,5.52-5.54s5.52,2.48,5.52,5.54c0,.92-.23,1.82-.65,2.61.94,1.64,2.48,3.56,4.52,3.56.54,0,1.11-.13,1.69-.39,2.05-.91,2.96-3.67,3.36-5.8-1.26-1.14-2-2.76-2-4.51,0-3.35,2.71-6.07,6.04-6.07s6.04,2.72,6.04,6.07c0,1.75-.74,3.38-2,4.51.4,2.12,1.31,4.89,3.36,5.8.58.26,1.15.39,1.69.39,2.04,0,3.58-1.92,4.52-3.56-.42-.79-.65-1.69-.65-2.61,0-3.05,2.48-5.54,5.52-5.54s5.52,2.48,5.52,5.54c0,2.27-1.39,4.27-3.4,5.11l-4.47,18.32c1.6.73,2.71,2.35,2.71,4.22v.22c0,2.55-2.07,4.63-4.62,4.63H9.77Z"/><path fill="%23a6b1b8" d="M42.48,7.06c-1.94,0-3.52,1.58-3.52,3.54,0,.96.38,1.82.99,2.46-2.39,4.99-5.82,6.73-9.36,5.15-3.16-1.41-4.32-5.42-4.71-8.53,1.29-.68,2.16-2.04,2.16-3.6,0-2.25-1.81-4.07-4.04-4.07s-4.04,1.82-4.04,4.07c0,1.57.88,2.92,2.16,3.6-.39,3.11-1.56,7.13-4.71,8.53-3.54,1.58-6.97-.16-9.36-5.15.61-.64.99-1.5.99-2.46,0-1.95-1.57-3.54-3.52-3.54s-3.52,1.58-3.52,3.54c0,1.8,1.34,3.28,3.06,3.51l5,21.52h-.3c-1.45,0-2.62,1.18-2.62,2.64v.22c0,1.45,1.17,2.63,2.62,2.63h28.46c1.45,0,2.62-1.18,2.62-2.63v-.22c0-1.46-1.17-2.64-2.62-2.64h-.54l5.25-21.52c1.73-.22,3.06-1.71,3.06-3.51,0-1.95-1.57-3.54-3.52-3.54Z"/></svg>');
			}
		}
		&:nth-child(3){
			&:after{
				background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 43.11"><path fill="white" d="M9.77,43.11c-2.54,0-4.62-2.08-4.62-4.63v-.22c0-1.8,1.02-3.36,2.51-4.13L3.38,15.71c-2-.85-3.38-2.84-3.38-5.11,0-3.05,2.48-5.54,5.52-5.54s5.52,2.48,5.52,5.54c0,.92-.23,1.82-.65,2.61.94,1.64,2.48,3.56,4.52,3.56.54,0,1.11-.13,1.69-.39,2.05-.91,2.96-3.67,3.36-5.8-1.26-1.14-2-2.76-2-4.51,0-3.35,2.71-6.07,6.04-6.07s6.04,2.72,6.04,6.07c0,1.75-.74,3.38-2,4.51.4,2.12,1.31,4.89,3.36,5.8.58.26,1.15.39,1.69.39,2.04,0,3.58-1.92,4.52-3.56-.42-.79-.65-1.69-.65-2.61,0-3.05,2.48-5.54,5.52-5.54s5.52,2.48,5.52,5.54c0,2.27-1.39,4.27-3.4,5.11l-4.47,18.32c1.6.73,2.71,2.35,2.71,4.22v.22c0,2.55-2.07,4.63-4.62,4.63H9.77Z"/><path fill="%23b3754e" d="M42.48,7.06c-1.94,0-3.52,1.58-3.52,3.54,0,.96.38,1.82.99,2.46-2.39,4.99-5.82,6.73-9.36,5.15-3.16-1.41-4.32-5.42-4.71-8.53,1.29-.68,2.16-2.04,2.16-3.6,0-2.25-1.81-4.07-4.04-4.07s-4.04,1.82-4.04,4.07c0,1.57.88,2.92,2.16,3.6-.39,3.11-1.56,7.13-4.71,8.53-3.54,1.58-6.97-.16-9.36-5.15.61-.64.99-1.5.99-2.46,0-1.95-1.57-3.54-3.52-3.54s-3.52,1.58-3.52,3.54c0,1.8,1.34,3.28,3.06,3.51l5,21.52h-.3c-1.45,0-2.62,1.18-2.62,2.64v.22c0,1.45,1.17,2.63,2.62,2.63h28.46c1.45,0,2.62-1.18,2.62-2.63v-.22c0-1.46-1.17-2.64-2.62-2.64h-.54l5.25-21.52c1.73-.22,3.06-1.71,3.06-3.51,0-1.95-1.57-3.54-3.52-3.54Z"/></svg>');
			}
		}
		&:nth-child(n+4){
			&:after{
				grid-template-rows: 2em;
				aspect-ratio: 33 / 40;
				width: 2em;
				background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33.08 40"><path fill="white" d="M23.28,40c-.71,0-1.36-.39-1.72-1l-3.46-6c-.53.05-1.05.08-1.56.08-.87,0-1.75-.08-2.64-.22l-3.54,6.14c-.35.61-1.01.99-1.72,1h-.02c-.7,0-1.35-.37-1.72-.97l-1.64-2.74-3.19-.05c-.71-.01-1.36-.4-1.71-1.01-.35-.62-.35-1.37,0-1.99l3.5-6.06c-2.51-2.98-3.88-6.7-3.88-10.64C0,7.42,7.42,0,16.54,0s16.54,7.42,16.54,16.54c0,4.28-1.65,8.35-4.59,11.42l3.05,5.28c.35.61.36,1.37,0,1.99-.35.62-1,1-1.71,1.01l-3.19.05-1.64,2.74c-.36.6-1.01.97-1.72.97h-.02Z"/><path fill="%2380b41f" d="M31.08,16.54c0-8.03-6.51-14.54-14.54-14.54S2,8.51,2,16.54c0,4.06,1.67,7.72,4.35,10.36l-4.24,7.34,4.3.07,2.21,3.69,4.27-7.4c1.17.3,2.39.48,3.65.48.9,0,1.77-.09,2.62-.25l4.14,7.16,2.21-3.69,4.3-.07-3.84-6.64c3.12-2.67,5.11-6.63,5.11-11.05Z"/></svg>');
			}
		}
	}
	& h3{
		margin: 0 8px;
		font-weight: 700;
		letter-spacing: 0.05em;
	}
	& a{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		font-size: 0;
	}
	& img{
		object-fit: cover;
	}
}

#pickup{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	justify-content: center;
	padding: clamp(64px, calc(80 / 1200 * 100vw), 80px) 0;
	background: #f8f1e7 url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" fill="white" opacity="0.3"><rect x="5px" width="4" height="100%"/></svg>') center top / 14px;
	overflow: hidden;
	&>*{
		grid-column: 2;
	}
	& h2{
		justify-self: center;
		display: grid;
		grid-template-columns: 1fr auto 0;
		justify-content: center;
		align-items: baseline;
		column-gap: 16px;
		padding-bottom: 4px;
		border-bottom: 4px dotted currentColor;
		font-weight: 900;
		font-size: clamp(22px, calc(28 / 768 * 100vw), 28px);
		letter-spacing: 0.1em;
		text-align: center;
		&:before{
			content: "";
			grid-column: 1;
			grid-row: 1;
			aspect-ratio: 5 / 4;
			height: 1.5em;
			background: currentColor;
			transform: translateY(0.1em);
			-webkit-mask: var(--icon-point) no-repeat left top / clamp(20px, calc(26 / 768 * 100vw), 26px), url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29.35 35.84"><path d="M6.64,3.99l2.13,2.35v11.03c0,.18.1.35.26.43.16.08.35.07.5-.03l2.55-1.73,2.55,1.73c.15.1.34.11.5.03.16-.08.26-.25.26-.43V6.33l-2.14-2.35h-6.61ZM27.28,6.53l-1.81-4.38c.64-.04,1.03-.57,1.03-.99,0-.65-.52-1.17-1.17-1.17H4.42c-1.22,0-2.33.5-3.12,1.29C.5,2.09,0,3.2,0,4.42v28.53C0,34.55,1.29,35.84,2.89,35.84h24.04c1.34,0,2.43-1.09,2.43-2.43V8.93c0-1.22-.9-2.22-2.08-2.4ZM17.1,6.5v10.87c0,.82-.45,1.56-1.17,1.95-.32.17-.67.26-1.03.26-.44,0-.87-.13-1.23-.38l-1.58-1.07-1.59,1.07c-.37.25-.79.38-1.23.38-.36,0-.72-.09-1.03-.26-.72-.38-1.17-1.13-1.17-1.94V7l-.45-.5h-2.19c-.58,0-1.09-.23-1.47-.61-.38-.38-.61-.89-.61-1.47s.23-1.09.61-1.47c.38-.38.89-.61,1.47-.61h19.19l1.87,4.16h-8.37Z"/></svg>') no-repeat right bottom / auto 1em;
		}
	}
	#pickupList{
		grid-column: 1 / 4;
		margin-top: clamp(24px, calc(40 / 1200 * 100vw), 40px);
	}
}

#pickupList{
	& section{
		position: relative;
		display: grid;
		grid-template-rows: auto 1fr;
		background: #fff;
		border-radius: 8px;
		overflow: hidden;
		&:not(:has(img)):before{
			content: "";
			aspect-ratio: 3 / 2;
			background: var(--dummy);
		}
		& img{
			aspect-ratio: 3 / 2;
		}
	}
	& h3{
		padding: clamp(16px, calc(24 / 1200 * 100vw), 24px);
		font-size: 14px;
		letter-spacing: 0.025em;
	}
	& a{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		font-size: 0;
	}
	& figure{
		order: -1;
	}
	& img{
		object-fit: cover;
	}
	.slide{
		display: grid;
		width: min(var(--wrap-fit), 1120px);
		margin-inline: auto;
		&:not(.slick-slider){
			grid-gap: 32px;
			filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.2));
			@media (max-width: 575.98px) {
				& section:nth-child(n+2){
					display: none;
				}
			}
			@media (min-width: 576px) {
				grid-template-columns: repeat(2, 1fr);
			}
			@media (min-width: 576px) and (max-width: 991.98px) {
				& section:nth-child(n+3){
					display: none;
				}
			}
			@media (min-width: 992px) {
				grid-template-columns: repeat(3, 1fr);
				& section:nth-child(n+4){
					display: none;
				}
			}
		}
	}
	.slick-slider{
		display: grid;
		width: min(var(--wrap-fit), 1217px);
		grid-template-columns: 0 min(100%, 1152px) 0;
		justify-content: space-between;
		.slick-list{
			grid-column: 2;
		}
		.slick-dots{
			grid-column: 2;
		}
		@media (max-width: 767.98px) {
			.slick-list{
				overflow: visible;
			}
			.slick-slide{
				width: min(calc(100dvw - 64px), 320px);
			}
		}
	}
	.slick-list{
		filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.2));
	}
	.slick-track{
		display: flex;
	}
	.slick-slide{
		display: grid;
		height: auto;
		margin: 0 clamp(8px, calc(16 / 1200 * 100vw), 16px);
	}
	.slick-arrow{
		justify-self: center;
		align-self: center;
		width: clamp(40px, calc(48 / 1200 * 100vw), 48px);
	}
	.slick-dots{
		margin-top: clamp(24px, calc(32 / 1200 * 100vw), 32px);
		&:has(li:only-child){
			display: none;
		}
	}
}

#pr{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	background: linear-gradient(0deg, rgba(255, 255, 255, 0.5) 100%, transparent), url(/images/topicsBg.jpg) no-repeat center / cover;
	padding: clamp(64px, calc(80 / 1200 * 100vw), 80px) 0;
	& h2{
		font-weight: 900;
		font-size: clamp(22px, calc(28 / 768 * 100vw), 28px);
		letter-spacing: 0.1em;
		text-align: center;
	}
	#prBanner{
		margin-top: clamp(24px, calc(40 / 1200 * 100vw), 40px);
	}
	#prSns{
		margin-top: clamp(64px, calc(80 / 1200 * 100vw), 80px);
	}
}

#prBanner{
	& ul{
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(calc(50% - 8px), 240px), 1fr));
		grid-gap: clamp(16px, calc(40 / 1200 * 100vw), 40px);
		filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.2));
	}
	& li{
		display: contents;
	}
	& a{
		display: block;
	}
	& img{
		width: 100%;
		height: 60px;
		object-fit: contain;
	}
}

#prSns{
	& ul{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		grid-gap: 16px 24px;
	}
	& li{
		display: contents;
	}
	& a{
		display: grid;
		grid-template-columns: auto auto;
		align-items: center;
		column-gap: 16px;
		color: inherit;
		font-weight: 900;
		font-size: clamp(18px, calc(20 / 768 * 100vw), 20px);
		letter-spacing: 0.01em;
		text-decoration: none;
		&:before{
			content: "";
			aspect-ratio: 1;
			width: clamp(48px, calc(56 / 768 * 100vw), 56px);
			background: currentColor no-repeat center / min(55%, 32px);
			border-radius: 100%;
		}
		&[href*="instagram.com"]:before{
			background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="white"><path d="M15.98,7.78c-4.54,0-8.21,3.69-8.2,8.23,0,4.54,3.69,8.21,8.23,8.2,4.54,0,8.21-3.69,8.2-8.23,0-4.54-3.69-8.21-8.23-8.2ZM16.01,21.33c-2.94,0-5.34-2.38-5.34-5.32,0-2.94,2.38-5.34,5.32-5.34,2.95,0,5.34,2.38,5.34,5.32,0,2.95-2.38,5.34-5.32,5.34ZM24.52,5.52c-1.06,0-1.92.86-1.92,1.92,0,1.06.86,1.92,1.92,1.92,1.06,0,1.92-.86,1.92-1.92,0-1.06-.86-1.92-1.92-1.92ZM32,15.97c0-4.34-.03-4.89-.11-6.6-.08-1.7-.35-2.87-.75-3.88-.41-1.05-.96-1.94-1.85-2.83-.89-.89-1.78-1.43-2.84-1.84-1.02-.39-2.18-.66-3.88-.74C20.86.01,20.31,0,15.97,0c-4.34,0-4.89.03-6.6.11-1.7.08-2.87.35-3.88.75-1.05.41-1.94.96-2.83,1.85-.89.89-1.43,1.78-1.84,2.84-.39,1.02-.66,2.18-.74,3.89C.01,11.14,0,11.69,0,16.03c0,4.34.03,4.89.11,6.6.08,1.7.35,2.86.75,3.88.41,1.05.96,1.94,1.85,2.83.89.89,1.78,1.43,2.84,1.84,1.02.39,2.18.66,3.88.74,1.71.08,2.25.09,6.6.08,4.35,0,4.89-.03,6.6-.11,1.7-.08,2.86-.35,3.88-.75,1.05-.41,1.94-.96,2.83-1.85.89-.89,1.43-1.78,1.84-2.84.39-1.02.66-2.18.74-3.88.07-1.71.09-2.25.08-6.6ZM29.03,22.44c-.07,1.56-.33,2.41-.54,2.97-.29.75-.64,1.28-1.19,1.84-.56.56-1.09.91-1.84,1.2-.56.22-1.41.48-2.97.56-1.69.08-2.19.1-6.47.11-4.27,0-4.78,0-6.46-.08-1.56-.07-2.41-.33-2.97-.54-.75-.29-1.28-.64-1.84-1.19-.56-.56-.91-1.09-1.2-1.84-.22-.56-.48-1.41-.56-2.97-.08-1.69-.1-2.19-.11-6.46,0-4.27,0-4.78.08-6.47.07-1.56.33-2.41.54-2.97.29-.75.64-1.28,1.19-1.84.56-.56,1.09-.91,1.84-1.2.56-.22,1.41-.48,2.97-.56,1.69-.08,2.19-.1,6.46-.11,4.27,0,4.78,0,6.47.08,1.56.07,2.41.33,2.97.54.75.29,1.28.63,1.84,1.19.56.56.91,1.09,1.2,1.84.22.56.48,1.41.56,2.97.08,1.69.1,2.19.11,6.46,0,4.27,0,4.78-.08,6.46Z"/></svg>');
		}
	}
}