/* CSS Document */

#wrapper{
	#pagePath{
		display: none;
	}
	#floatingNav{
		.scrollTop & h2{
			visibility: hidden;
		}
	}
	@media (min-width: 1200px) {
		#header{
			position: relative;
			filter: unset;
			z-index: 1;
			#siteName{
				position: absolute;
				top: 0;
				left: 0;
				display: block;
				aspect-ratio: 240 / 220;
				width: clamp(224px, calc(240 / 1366 * 100dvw), max(240px, calc(240 / 1367 * 100dvw)));
				background: white url('/common/images/ito.logoType.svg') no-repeat center / 60%;
				border-radius: 0 0 24px 0;
				& a{
					display: none;
				}
				&:before{
					content: "";
					position: absolute;
					top: 100%;
					left: var(--wrap-space);
					display: block;
					aspect-ratio: 1;
					width: 19px;
					background: white;
					corner-shape: scoop;
					border-radius: 0 0 24px 0;
				}
			}
			&:before{
				content: "";
				position: absolute;
				top: 100%;
				left: clamp(224px, calc(240 / 1366 * 100dvw), max(240px, calc(240 / 1367 * 100dvw)));
				display: block;
				aspect-ratio: 1;
				width: 19px;
				background: white;
				corner-shape: scoop;
				border-radius: 0 0 24px 0;
			}
		}
	}
}

#main{
	position: relative;
	padding-bottom: clamp(64px, calc(120 / 768 * 100dvw), 120px);
	background: #f7f5ed;
	overflow: hidden;
	#recommend,
	#area,
	#topics,
	#sns{
		& hgroup{
			display: grid;
			grid-row-gap: 8px;
			#topics &,
			#sns &{
				justify-content: center;
				text-align: center;
				text-wrap: balance; 
			}
			& h2{
				display: grid;
				grid-template-columns: auto 1fr;
				column-gap: 0.5em;
				font-weight: 700;
				font-size: clamp(18px, calc(40 / 768 * 100dvw), 40px);
				&:before{
					content: "";
					aspect-ratio: 1;
					width: 1em;
					background: currentColor no-repeat center / contain;
					transform: translateY(calc(0.875em - 50%));
					-webkit-mask: no-repeat center / contain;
				}
				
				#recommend &:before{
					-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><path d="M15,20c2.76,0,5-2.24,5-5s-2.24-5-5-5-5,2.24-5,5,2.24,5,5,5ZM37.5,0H2.5C1.12,0,0,1.12,0,2.5v35c0,1.38,1.12,2.5,2.5,2.5h35c1.38,0,2.5-1.12,2.5-2.5V2.5c0-1.38-1.12-2.5-2.5-2.5ZM35,25.43l-5.7-5.7c-.98-.97-2.56-.97-3.54,0l-15.27,15.27h-5.5V5h30v20.43Z"/></svg>');
				}
				#area &:before{
					-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><path d="M20,0C11.16,0,4,7.31,4,16.33c0,7.36,10.67,19.03,14.58,23.07.78.81,2.05.81,2.84,0,3.91-4.03,14.58-15.7,14.58-23.07C36,7.31,28.84,0,20,0ZM20,23c-3.87,0-7-3.13-7-7s3.13-7,7-7,7,3.13,7,7-3.13,7-7,7Z"/></svg>');
				}
				#topics &:before{
					-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><path d="M37.5,0H2.5C1.12,0,0,1.12,0,2.5v25c0,1.38,1.12,2.5,2.5,2.5h15v5h-5c-1.38,0-2.5,1.12-2.5,2.5s1.12,2.5,2.5,2.5h15c1.38,0,2.5-1.12,2.5-2.5s-1.12-2.5-2.5-2.5h-5v-5h15c1.38,0,2.5-1.12,2.5-2.5V2.5c0-1.38-1.12-2.5-2.5-2.5ZM35,25H5V5h30v20Z"/></svg>');
				}
				#sns &:before{
					background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><path d="M29,20h-4.8l1.67-6h3.13c.55,0,1-.45,1-1s-.45-1-1-1h-2.57l1.04-3.73c.15-.53-.16-1.08-.7-1.23-.53-.14-1.08.16-1.23.7l-1.19,4.27h-5.92l1.04-3.73c.15-.53-.16-1.08-.7-1.23-.53-.14-1.08.16-1.23.7l-1.19,4.27h-5.35c-.55,0-1,.45-1,1s.45,1,1,1h4.8l-1.67,6h-3.13c-.55,0-1,.45-1,1s.45,1,1,1h2.57l-1.04,3.73c-.15.53.16,1.08.7,1.23.09.02.18.04.27.04.44,0,.84-.29.96-.73l1.19-4.27h5.92l-1.04,3.73c-.15.53.16,1.08.7,1.23.09.02.18.04.27.04.44,0,.84-.29.96-.73l1.19-4.27h5.35c.55,0,1-.45,1-1s-.45-1-1-1ZM16.2,20l1.67-6h5.92l-1.67,6h-5.92Z" style="fill: white;"/></svg>');
					-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><path d="M40,18C40,8.06,31.05,0,20,0S0,8.06,0,18s8.95,18,20,18c1.88,0,3.69-.25,5.41-.68l6.59,4.68v-7.62c4.85-3.28,8-8.49,8-14.38Z"/></svg>');
				}
			}
			& p{
				order: -1;
				font-weight: 700;
				font-size: clamp(14px, calc(20 / 768 * 100dvw), 20px);
				line-height: 1;
				letter-spacing: 0.2em;
			}
		}
	}
	#areaLink,
	#topicsLink{
		display: flex;
		justify-content: center;
		& a{
			display: grid;
			grid-template-columns: 1fr 0;
			align-items: center;
			min-width: min(100%, 320px);
			min-height: 64px;
			padding: 8px 32px;
			background: white;
			border: 1px solid currentColor;
			border-radius: 32px;
			color: inherit;
			font-weight: 700;
			text-align: center;
			text-wrap: balance;
			text-decoration: none;
			#areaLink &,
			#topicsLink &{
				background: var(--color-theme);
				border-color: transparent;
				color: white;
			}
			&:before,
			&:after{
				content: "";
				grid-column: 2;
				grid-row: 1;
				justify-self: center;
				aspect-ratio: 1;
				width: 24px;
				transition: transform 0.2s ease-out;
			}
			&:before{
				background: currentColor;
				border-radius: 100%;
			}
			&:after{
				background: inherit;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g style="fill: none; stroke: black; stroke-miterlimit: 10;"><line x1="6.79" y1="11.94" x2="17.07" y2="11.94"/><polyline points="14.21 9 17.21 12 14.21 15"/></g></svg>') no-repeat center / contain;
			}
			&:hover{
				&:before,
				&:after{
					transform: translateX(4px);
				}
			}
		}
	}
	@media (min-width: 992px) {
		&:before{
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: 
				url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.68 22.68" fill="%234c4948"><rect width="22.68" height="22.68"/></svg>') no-repeat clamp(216px, calc(232 / 1366 * 100dvw), max(232px, calc(232 / 1367 * 100dvw))) clamp(16px, calc(24 / 1366 * 100dvw), max(24px, calc(24 / 1367 * 100dvw))) / clamp(16px, calc(22 / 1366 * 100dvw), max(22px, calc(22 / 1367 * 100dvw))),
				url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42.48 34.37" fill="%23379761"><path d="M42.05,14.22L23.99.23c-.71-.55-1.74-.08-1.79.81l-.87,13.36c-.06.89-1.09,1.36-1.79.81L3.7,2.96c-.71-.55-1.74-.08-1.79.81L0,33.18c-.05.84.8,1.43,1.57,1.09l19.02-8.58,7.88-3.55,13.35-6.02c.77-.35.89-1.38.22-1.9Z"/></svg>') no-repeat calc(50% + clamp(464px, calc(648 / 1366 * 100dvw), max(648px, calc(648 / 1367 * 100dvw)))) clamp(64px, calc(80 / 1366 * 100dvw), max(80px, calc(80 / 1367 * 100dvw))) / clamp(32px, calc(42 / 1366 * 100dvw), max(42px, calc(42 / 1367 * 100dvw))),
				url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38.47 38.47" fill="%23eca052"><rect x="1.2" y="1.2" width="36.06" height="36.06" rx="12.73" ry="12.73" transform="translate(-4.37 5.71) rotate(-15.2)"/></svg>') no-repeat calc(50% + clamp(456px, calc(640 / 1366 * 100dvw), max(640px, calc(640 / 1367 * 100dvw)))) clamp(280px, calc(288 / 1366 * 100dvw), max(288px, calc(288 / 1367 * 100dvw))) / clamp(32px, calc(38 / 1366 * 100dvw), max(38px, calc(38 / 1367 * 100dvw))),
				url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30.99 26.56" fill="%23379761"><path d="M30.99,25.67l-2.05-16.13c-.08-.63-.83-.92-1.31-.5l-7.16,6.29c-.48.42-1.23.13-1.31-.5l-1.8-14.14c-.08-.63-.83-.92-1.31-.5L.27,14.05c-.45.39-.32,1.13.24,1.34l13.9,5.26,5.76,2.18,9.75,3.69c.56.21,1.14-.25,1.07-.84Z"/></svg>') no-repeat calc(50% - clamp(464px, calc(640 / 1366 * 100dvw), max(640px, calc(640 / 1367 * 100dvw)))) clamp(280px, calc(288 / 1366 * 100dvw), max(288px, calc(288 / 1367 * 100dvw))) / clamp(24px, calc(30 / 1366 * 100dvw), max(30px, calc(30 / 1367 * 100dvw))),
				url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.16 32.16" fill="%23eaca32"><path d="M4.71,4.71c-6.28,6.28-6.28,16.46,0,22.74,6.28,6.28,16.46,6.28,22.74,0s6.28-16.46,0-22.74C21.17-1.57,10.99-1.57,4.71,4.71ZM22.58,16.08l-6.5,6.5-6.5-6.5,6.5-6.5,6.5,6.5Z"/></svg>') no-repeat calc(50% + clamp(440px, calc(600 / 1366 * 100dvw), max(600px, calc(600 / 1367 * 100dvw)))) clamp(376px, calc(384 / 1366 * 100dvw), max(384px, calc(384 / 1367 * 100dvw))) / clamp(24px, calc(32 / 1366 * 100dvw), max(32px, calc(32 / 1367 * 100dvw))),
				url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 46.22 46.22" fill="%237d76a3"><path d="M42.81,23.71l3.26-9.81c.5-1.51-.32-3.14-1.83-3.65l-9.81-3.26c-.73-.24-1.52-.18-2.2.16l-4.57,2.29-2.29-4.57c-.34-.68-.94-1.2-1.67-1.45L13.89.15c-1.51-.5-3.14.32-3.65,1.83l-3.26,9.81c-.24.73-.18,1.52.16,2.2l2.29,4.57-4.57,2.29c-.68.34-1.2.94-1.45,1.67L.15,32.33c-.5,1.51.32,3.14,1.83,3.65l9.81,3.26c.73.24,1.52.18,2.2-.16l4.57-2.29,2.29,4.57c.34.68.94,1.2,1.67,1.45l9.81,3.26c1.51.5,3.14-.32,3.65-1.83l3.26-9.81c.24-.73.18-1.52-.16-2.2l-2.29-4.57,4.57-2.29c.68-.34,1.2-.94,1.45-1.67Z"/></svg>') no-repeat calc(50% + clamp(456px, calc(632 / 1366 * 100dvw), max(632px, calc(632 / 1367 * 100dvw)))) clamp(464px, calc(480 / 1366 * 100dvw), max(480px, calc(480 / 1367 * 100dvw))) / clamp(40px, calc(46 / 1366 * 100dvw), max(46px, calc(46 / 1367 * 100dvw))),
				url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.5 32.5" fill="%23eaca32"><path d="M4.76,4.76c-6.35,6.35-6.35,16.64,0,22.98s16.64,6.35,22.98,0,6.35-16.64,0-22.98S11.11-1.59,4.76,4.76ZM22.82,16.25l-6.57,6.57-6.57-6.57,6.57-6.57,6.57,6.57Z"/></svg>') no-repeat calc(50% - clamp(456px, calc(640 / 1366 * 100dvw), max(640px, calc(640 / 1367 * 100dvw)))) clamp(464px, calc(488 / 1366 * 100dvw), max(488px, calc(488 / 1367 * 100dvw))) / clamp(24px, calc(32 / 1366 * 100dvw), max(32px, calc(32 / 1367 * 100dvw))),
				url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50.58 50.58" fill="%23eaca32"><path d="M7.41,7.41c-9.88,9.88-9.88,25.89,0,35.77,9.88,9.88,25.89,9.88,35.77,0s9.88-25.89,0-35.77S17.28-2.47,7.41,7.41ZM35.51,25.29l-10.22,10.22-10.22-10.22,10.22-10.22,10.22,10.22Z"/></svg>') no-repeat calc(50% - clamp(224px, calc(240 / 1366 * 100dvw), max(240px, calc(240 / 1367 * 100dvw)))) max(552px, calc(552 / 1367 * 100dvw)) / clamp(40px, calc(50 / 1366 * 100dvw), max(50px, calc(50 / 1367 * 100dvw))),
				url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55.6 42.62" fill="%23379761"><path d="M55.11,19.42L32.85.35c-.87-.75-2.22-.22-2.35.92l-1.96,17.07c-.13,1.14-1.48,1.67-2.35.92L6.68,2.54c-.87-.75-2.22-.22-2.35.92L0,41.03c-.12,1.07.94,1.89,1.94,1.49l24.93-9.78,10.32-4.05,17.49-6.86c1-.39,1.23-1.71.41-2.42Z"/></svg>') no-repeat calc(50% - clamp(488px, calc(536 / 1366 * 100dvw), max(536px, calc(536 / 1367 * 100dvw)))) max(608px, calc(608 / 1367 * 100dvw)) / clamp(48px, calc(55 / 1366 * 100dvw), max(55px, calc(55 / 1367 * 100dvw))),
				url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26.95 26.95" fill="%23eca052"><rect x="1.45" y="1.45" width="24.04" height="24.04" rx="8.49" ry="8.49" transform="translate(-5.58 13.48) rotate(-45)"/></svg>') no-repeat calc(50% + clamp(16px, calc(48 / 1366 * 100dvw), max(48px, calc(48 / 1367 * 100dvw)))) max(616px, calc(616 / 1367 * 100dvw)) / clamp(24px, calc(27 / 1366 * 100dvw), max(27px, calc(27 / 1367 * 100dvw))),
				url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36.03 36.03" fill="%237d76a3"><path d="M33.04,10.7l-1.41-8.65c-.22-1.33-1.47-2.24-2.81-2.02l-8.65,1.41c-.64.1-1.21.46-1.59.99l-2.53,3.52-3.52-2.53c-.53-.38-1.18-.53-1.82-.43l-8.65,1.41C.72,4.62-.19,5.88.03,7.21l1.41,8.65c.1.64.46,1.21.99,1.59l3.52,2.53-2.53,3.52c-.38.53-.53,1.18-.43,1.82l1.41,8.65c.22,1.33,1.47,2.24,2.81,2.02l8.65-1.41c.64-.1,1.21-.46,1.59-.99l2.53-3.52,3.52,2.53c.53.38,1.18.53,1.82.43l8.65-1.41c1.33-.22,2.24-1.47,2.02-2.81l-1.41-8.65c-.1-.64-.46-1.21-.99-1.59l-3.52-2.53,2.53-3.52c.38-.53.53-1.18.43-1.82Z"/></svg>') no-repeat calc(50% - clamp(400px, calc(440 / 1366 * 100dvw), max(440px, calc(440 / 1367 * 100dvw)))) max(648px, calc(648 / 1367 * 100dvw)) / clamp(32px, calc(36 / 1366 * 100dvw), max(36px, calc(36 / 1367 * 100dvw))),
				transparent;
			pointer-events: none;
			z-index: 1;
		}
		#alert{
			position: relative;
			z-index: 1;
		}
	}
}

#hero{
	position: relative;
	overflow: hidden;
	&:before{
		content: "";
		position: absolute;
		left: 50%;
		bottom: 0;
		width: clamp(720px, calc(1980 / 1366 * 100dvw), max(1980px, calc(1980 / 1367 * 100dvw)));
		height: 100%;
		background: white;
		transform: translateX(-50%);
		-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1980 640"><path d="M1980,640s-116-133-445.53-200.43c-140.17-28.68-253.01,17.3-382.7,58.23-365.77,115.43-462.97-11.54-458.26-74.16,5.39-29.56,22.57-65.3.79-93-33.72-43.94-114.67-49.15-162.34-27.55-61.06,31.25-80.45,100.74-164.97,123.92C181,478,0,328,0,328V0h1980v640Z"/></svg>') no-repeat center top / 100% auto;
	}
	@media (min-width: 576px) {
		display: grid;
		grid-template-columns: var(--wrap-fit);
		justify-content: center;
	}
	#heroSlide{
		& dl{
			position: relative;
			display: grid;
			aspect-ratio: 1 / 1;
			@media (min-width: 576px) {
				aspect-ratio: 3 / 2;
				width: 100%;
				max-height: max(630px, calc(630 / 1367 * 100dvw));
				border-radius: clamp(16px, calc(24 / 768 * 100dvw), 24px);
				overflow: hidden;
			}
			& dt{
				grid-column: 1;
				grid-row: 1;
				display: grid;
				align-content: center;
				justify-items: start;
				grid-row-gap: clamp(4px, calc(8 / 768 * 100dvw), 8px);
				padding: max(24px, calc(24 / 1367 * 100dvw));
				font-weight: 500;
				font-size: clamp(13px, calc(20 / 768 * 100dvw), 20px);
				letter-spacing: 0.1em;
				z-index: 1;
				&:not(:has(span)){
					visibility: hidden;
				}
				& span{
					padding: 1em 1.5em;
					background: white;
					border-radius: clamp(4px, calc(8 / 768 * 100dvw), 8px);
					line-height: 1;
				}
				@media (min-width: 1200px) {
					margin-top: clamp(92px, calc(124 / 1366 * 100dvw), max(124px, calc(124 / 1367 * 100dvw)));
				}
			}
			& dd{
				grid-column: 1;
				grid-row: 1;
				&:has(a){
					display: contents;
				}
				& a{
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					font-size: 0;
					z-index: 1;
				}
				&:has(img){
					position: relative;
					&:has(img[src="[url]"]){
						background: var(--dummy);
					}
				}
				& img{
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					object-fit: cover;
					opacity: 0;
				}
			}
		}
		&:not(.slick-slider){
			display: grid;
			& > dl,
			& > span{
				grid-column: 1;
				grid-row: 1;
				&:nth-child(n+2){
					visibility: hidden;
				}
			}
		}
		&.slick-slider{
			display: grid;
			grid-row-gap: clamp(16px, calc(24 / 768 * 100dvw), 24px);
			.slick-dots{
				@media (min-width: 1200px) {
					margin-top: clamp(92px, calc(124 / 1366 * 100dvw), max(124px, calc(124 / 1367 * 100dvw)));
				}
			}
			@media (min-width: 768px) {
				.slick-list,
				.slick-dots{
					grid-column: 1;
					grid-row: 1;
				}
				.slick-dots{
					justify-self: start;
					align-self: center;
					margin-inline: max(24px, calc(24 / 1367 * 100dvw));
					padding: max(24px, calc(24 / 1367 * 100dvw));
					transform: translateY(calc(40px + 24px + max(2px, calc(2 / 1367 * 100dvw))));
					z-index: 1;
					& li:not(.slick-active){
						background: white;
						border: none;
					}
				}
				&:has(dt span:nth-child(2)){
					.slick-dots{
						transform: translateY(calc(72px + 24px + max(2px, calc(2 / 1367 * 100dvw))));
					}
				}
				&:has(dt span:nth-child(3)){
					.slick-dots{
						transform: translateY(calc(104px + 24px + max(2px, calc(2 / 1367 * 100dvw))));
					}
				}
			}
		}
	}
}

#alert{
	display: grid;
	grid-template-columns: var(--wrap-fit);
	justify-content: center;
	margin-top: clamp(32px, calc(48 / 768 * 100dvw), 48px);
	@media (min-width: 768px) {
		margin-top: calc(0px - clamp(32px, calc(40 / 768 * 100dvw), 40px));
	}
	& h2{
		display: none;
	}
	& ul{
		display: grid;
		justify-items: center;
		grid-row-gap: clamp(8px, calc(16 / 768 * 100dvw), 16px);
		@media (min-width: 576px) {
			transform: translateX(calc(var(--wrap-space) / 2));
		}
		@media (min-width: 768px) {
			justify-items: end;
		}
	}
	& li{
		&:not(:has(a)),
		& a{
			position: relative;
			display: grid;
			grid-template-columns: auto 1fr;
			column-gap: 8px;
			max-width: min(100%, 800px);
			padding: clamp(16px, calc(24 / 768 * 100dvw), 24px) clamp(24px, calc(32 / 768 * 100dvw), 32px);
			background: white;
			border: 1px solid var(--color-border);
			border-radius: clamp(16px, calc(24 / 768 * 100dvw), 24px);
			font-weight: 700;
			z-index: 1;
			&:before{
				content: "";
				aspect-ratio: 1;
				width: 28px;
				background: currentColor url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" fill="white"><path d="M12.36,20.08c0-.94.73-1.7,1.62-1.7s1.62.76,1.62,1.7-.73,1.7-1.62,1.7c-.94,0-1.62-.81-1.62-1.7ZM12.44,16.33l-.71-10.11h4.55l-.71,10.11h-3.12Z"/></svg>') no-repeat center / contain;
				border-radius: 100%;
				transition: all 0.2s ease-out;
				transform: translateY(calc(0.875em - 50%));
			}
		}
		& a{
			color: inherit;
			text-decoration: none;
			&:hover{
				border-color: currentColor;
				color: var(--color-theme);
				&:before{
					background-color: var(--color-theme);
				}
			}
		}
		&:has(a){
			display: contents;
		}
	}
}

#recommend{
	display: grid;
	margin-top: clamp(32px, calc(56 / 768 * 100dvw), max(56px, calc(56 / 1367 * 100dvw)));
	&{
		& hgroup{
			justify-self: center;
			width: var(--wrap-fit);
		}
		#recommendList{
			justify-self: center;
			width: min(calc(100% - var(--wrap-space)), max(1100px, calc(1100 / 1367 * 100dvw)));
		}
		@media (min-width: 992px) {
			position: relative;
			&:before{
				content: "";
				position: absolute;
				top: calc(0px - max(56px, calc(56 / 1367 * 100dvw)));
				left: 0;
				width: 100%;
				height: calc(148px + max(56px, calc(56 / 1367 * 100dvw)));
				background: 
					url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30.99 26.56" fill="%23379761"><path d="M30.99,25.67l-2.05-16.13c-.08-.63-.83-.92-1.31-.5l-7.16,6.29c-.48.42-1.23.13-1.31-.5l-1.8-14.14c-.08-.63-.83-.92-1.31-.5L.27,14.05c-.45.39-.32,1.13.24,1.34l13.9,5.26,5.76,2.18,9.75,3.69c.56.21,1.14-.25,1.07-.84Z"/></svg>') no-repeat calc(50% - clamp(160px, calc(184 / 1366 * 100dvw), max(184px, calc(184 / 1367 * 100dvw)))) top / clamp(28px, calc(31 / 1366 * 100dvw), max(31px, calc(31 / 1367 * 100dvw))),
					url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47.67 40.59" fill="%23ac8d50"><path d="M3.75,15.13c-.22,4.3-.85,9.75-3.75,13.95l7.96,2.3c2.86-5.3,3.54-11.14,3.78-15.83.23-4.4.87-9.04,3.99-13.22L7.68,0c-3,5.16-3.7,10.48-3.94,15.13ZM19.72,19.74c-.22,4.3-.85,9.75-3.75,13.95l7.96,2.3c2.86-5.3,3.54-11.14,3.78-15.83.23-4.4.87-9.04,3.99-13.22l-8.04-2.32c-3,5.16-3.7,10.48-3.94,15.13ZM39.64,9.22c-3,5.16-3.7,10.48-3.94,15.13-.22,4.3-.85,9.75-3.75,13.95l7.96,2.3c2.86-5.3,3.54-11.14,3.78-15.83.23-4.4.87-9.04,3.99-13.22l-8.04-2.32Z"/></svg>') no-repeat calc(50% + clamp(552px, calc(624 / 1366 * 100dvw), max(624px, calc(624 / 1367 * 100dvw)))) max(16px, calc(16 / 1367 * 100dvw)) / clamp(40px, calc(48 / 1366 * 100dvw), max(48px, calc(48 / 1367 * 100dvw))),
					url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30.25 24.47" fill="%23379761"><path d="M.31,14.35l12.86,9.96c.5.39,1.24.06,1.28-.58l.62-9.51c.04-.63.77-.96,1.28-.58l11.27,8.73c.5.39,1.24.06,1.28-.58L30.24.85c.04-.6-.57-1.02-1.12-.77l-13.55,6.11-5.61,2.53L.47,13c-.55.25-.63.98-.16,1.35Z"/></svg>') no-repeat calc(50% + clamp(472px, calc(520 / 1366 * 100dvw), max(520px, calc(520 / 1367 * 100dvw)))) max(48px, calc(48 / 1367 * 100dvw)) / clamp(24px, calc(30 / 1366 * 100dvw), max(30px, calc(30 / 1367 * 100dvw))),
					url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.16 32.16" fill="%23eaca32"><path d="M4.71,4.71c-6.28,6.28-6.28,16.46,0,22.74s16.46,6.28,22.74,0c6.28-6.28,6.28-16.46,0-22.74S10.99-1.57,4.71,4.71ZM22.58,16.08l-6.5,6.5-6.5-6.5,6.5-6.5,6.5,6.5Z"/></svg>') no-repeat calc(50% + clamp(120px, calc(152 / 1366 * 100dvw), max(152px, calc(152 / 1367 * 100dvw)))) max(80px, calc(80 / 1367 * 100dvw)) / clamp(24px, calc(32 / 1366 * 100dvw), max(32px, calc(32 / 1367 * 100dvw))),
					url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 43.61 30.07" fill="%23ac8d50"><path d="M9.15,0H.79C-.67,5.79.14,11.1,1.2,15.63c.98,4.19,1.88,9.6.27,14.44h8.28c1.28-5.89.31-11.69-.76-16.26-1-4.29-1.67-8.93.16-13.81ZM25.78,0h-8.36c-1.46,5.79-.65,11.1.41,15.63.98,4.19,1.88,9.6.27,14.44h8.28c1.28-5.89.31-11.69-.76-16.26-1-4.29-1.67-8.93.16-13.81ZM42.24,13.81c-1-4.29-1.67-8.93.16-13.81h-8.36c-1.46,5.79-.65,11.1.41,15.63.98,4.19,1.88,9.6.27,14.44h8.28c1.28-5.89.31-11.69-.76-16.26Z"/></svg>') no-repeat calc(50% - clamp(200px, calc(240 / 1366 * 100dvw), max(240px, calc(240 / 1367 * 100dvw)))) bottom / clamp(40px, calc(43 / 1366 * 100dvw), max(43px, calc(43 / 1367 * 100dvw))),
					transparent;
				pointer-events: none;
			}
		}
	}
	#recommendList{
		margin-top: clamp(24px, calc(32 / 768 * 100dvw), 32px);
		& section{
			position: relative;
			display: grid;
			&:not(:has(figure)):before{
				content: "";
				aspect-ratio: 3 / 2;
				border-radius: clamp(4px, calc(8 / 768 * 100dvw), 8px);
				background: var(--dummy);
			}
			&{
				&:before,
				& figure{
					grid-column: 1;
					grid-row: 1;
				}
				& h3{
					margin-top: 16px;
				}
				& ul{
					grid-column: 1;
					grid-row: 2;
					justify-self: center;
					max-width: calc(100% - 32px);
					z-index: 1;
				}
				& a{
					z-index: 1;
				}
			}
			& h3{
				min-height: calc(3* 1.65em);
				font-weight: 700;
				font-size: clamp(16px, calc(20 / 768 * 100dvw), 20px);
				text-align: center;
			}
			& h3+div{
				display: contents;
				& ul{
					display: flex;
					flex-wrap: wrap;
					justify-content: center;
					grid-gap: 8px;
					margin-top: -1em;
					font-size: clamp(12px, calc(14 / 768 * 100dvw), 14px);
					&:not(:has(li)){
						display: none;
					}
				}
				& li{
					display: grid;
					align-items: center;
					min-height: 2em;
					padding: 0.15em 1em;
					background: var(--color-theme);
					border-radius: 1em;
					color: white;
					font-weight: 700;
					text-align: center;
					text-wrap: balance;
					&[data-area-id="1"]{
						background: #3a9961;
					}
					&[data-area-id="2"]{
						background: #7d75a3;
					}
					&[data-area-id="3"]{
						background: #e9cc2e;
					}
					&[data-area-id="4"]{
						background: #ab8c4f;
					}
				}
				& a{
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					font-size: 0;
				}
			}
			& figure{
				& img{
					aspect-ratio: 3 / 2;
					border-radius: clamp(4px, calc(8 / 768 * 100dvw), 8px);
					object-fit: cover;
				}
			}
		}
		&:not(.slick-slider){
			display: grid;
			justify-content: center;
			& > span,
			& > section{
				grid-column: 1;
				grid-row: 1;
				width: clamp(240px, calc(296 / 768 * 100dvw), max(296px, calc(296 / 1367 * 100dvw)));
				&:nth-child(n+2){
					visibility: hidden;
				}
			}
		}
		&.slick-slider{
			display: grid;
			grid-template-columns: auto 1fr auto;
			&:before,
			.slick-slide{
				width: clamp(256px, calc(296 / 768 * 100dvw), max(296px, calc(296 / 1367 * 100dvw)));
			}
			&:before{
				content: "";
				grid-column: 1 / 4;
				grid-row: 1;
				justify-self: center;
				aspect-ratio: 3 / 2;
				background: red;
				opacity: 0.5;
				visibility: hidden;
			}
			.slick-list{
				grid-column: 1 / 4;
				grid-row: 1 / 3;
				overflow: visible;
			}
			.slick-arrow{
				grid-row: 1;
				align-self: center;
			}
			.slick-prev{
				grid-column: 1;
			}
			.slick-next{
				grid-column: 3;
			}
			.slick-slide{
				margin-inline: clamp(12px, calc(20 / 768 * 100dvw), max(20px, calc(20 / 1367 * 100dvw)));
			}
			.slick-dots{
				grid-column: 2;
				margin-top: clamp(24px, calc(32 / 768 * 100dvw), 32px);
			}
		}
	}
}

#area{
	display: grid;
	grid-template-columns: 1fr min(var(--wrap-fit), max(1140px, calc(1140 / 1367 * 100dvw))) 1fr;
	margin-top: clamp(24px, calc(48 / 768 * 100dvw), max(48px, calc(48 / 1367 * 100dvw)));
	&{
		&>*{
			z-index: 1;
		}
		#areaMap{
			z-index: 0;
		}
		@media (max-width: 991.98px) {
			& hgroup{
				grid-column: 2;
				grid-row: 1;
				margin-block: clamp(112px, calc(184 / 768 * 100dvw), max(184px, calc(184 / 769 * 100dvw))) clamp(304px, calc(400 / 768 * 100dvw), max(400px, calc(400 / 769 * 100dvw)));
			}
			#areaText{
				grid-column: 2;
				grid-row: 4;
				justify-self: center;
				width: calc(100% - var(--wrap-space));
				margin-top: 56px;
			}
			#areaMap{
				grid-column: 1 / 4;
				grid-row: 1 / 7;
				margin-bottom: clamp(280px, calc(400 / 768 * 100dvw), 400px);
			}
			#areaPhoto{
				& dl:nth-child(1){
					grid-column: 2;
					grid-row: 2;
					width: clamp(200px, calc(360 / 768 * 100dvw), 360px);
				}
				& dl:nth-child(2){
					grid-column: 2 / 4;
					grid-row: 3;
					justify-self: end;
					width: clamp(280px, calc(480 / 768 * 100dvw), 480px);
					margin-top: 48px;
				}
				& dl:nth-child(3){
					grid-column: 1 / 3;
					grid-row: 5;
					width: clamp(280px, calc(520 / 768 * 100dvw), 520px);
					margin-top: 64px;
				}
				& dl:nth-child(4){
					grid-column: 2;
					grid-row: 6;
					justify-self: end;
					width: clamp(170px, calc(320 / 768 * 100dvw), 320px);
					margin-top: 64px;
				}
			}
		}
		@media (min-width: 992px) {
			position: relative;
			&:before{
				content: "";
				position: absolute;
				top: calc(0px - max(8px, calc(8 / 1367 * 100dvw)));
				left: 0;
				width: 100%;
				height: 100%;
				background: 
					url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50.58 50.58" fill="%23eaca32"><path d="M7.41,7.41c-9.88,9.88-9.88,25.89,0,35.77,9.88,9.88,25.89,9.88,35.77,0,9.88-9.88,9.88-25.89,0-35.77C33.3-2.47,17.28-2.47,7.41,7.41ZM35.51,25.29l-10.22,10.22-10.22-10.22,10.22-10.22,10.22,10.22Z"/></svg>') no-repeat calc(50% - clamp(440px, calc(504 / 1366 * 100dvw), max(504px, calc(504 / 1367 * 100dvw)))) clamp(16px, calc(24 / 1366 * 100dvw), max(24px, calc(24 / 1367 * 100dvw))) / clamp(40px, calc(50 / 1366 * 100dvw), max(50px, calc(50 / 1367 * 100dvw))),
					url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30.97 24.8" fill="%23379761"><path d="M30.96,24.01l-2.53-14.87c-.1-.58-.85-.87-1.31-.5l-6.88,5.55c-.46.37-1.21.09-1.31-.5L16.71.66c-.1-.58-.85-.87-1.31-.5L.25,12.39c-.43.35-.28,1.02.28,1.24l13.9,5.26,5.76,2.18,9.75,3.69c.56.21,1.12-.19,1.03-.74Z"/></svg>') no-repeat calc(50% + clamp(192px, calc(264 / 1366 * 100dvw), max(264px, calc(264 / 1367 * 100dvw)))) 0 / clamp(24px, calc(30 / 1366 * 100dvw), max(30px, calc(30 / 1367 * 100dvw))),
					url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30.03 30.03" fill="%237d76a3"><path d="M27.81,15.4l2.12-6.38c.33-.98-.2-2.04-1.19-2.37l-6.38-2.12c-.47-.16-.99-.12-1.43.1l-2.97,1.49-1.49-2.97c-.22-.44-.61-.78-1.08-.94L9.02.1c-.98-.33-2.04.2-2.37,1.19l-2.12,6.38c-.16.47-.12.99.1,1.43l1.49,2.97-2.97,1.49c-.44.22-.78.61-.94,1.08L.1,21.01c-.33.98.2,2.04,1.19,2.37l6.38,2.12c.47.16.99.12,1.43-.1l2.97-1.49,1.49,2.97c.22.44.61.78,1.08.94l6.38,2.12c.98.33,2.04-.2,2.37-1.19l2.12-6.38c.16-.47.12-.99-.1-1.43l-1.49-2.97,2.97-1.49c.44-.22.78-.61.94-1.08Z"/></svg>') no-repeat calc(50% - clamp(120px, calc(200 / 1366 * 100dvw), max(200px, calc(200 / 1367 * 100dvw)))) clamp(64px, calc(80 / 1366 * 100dvw), max(80px, calc(80 / 1367 * 100dvw))) / clamp(24px, calc(30 / 1366 * 100dvw), max(30px, calc(30 / 1367 * 100dvw))),
					url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33.09 22.81" fill="%23ac8d50"><path d="M6.95,0H.6C-.51,4.4.11,8.42.91,11.86c.74,3.18,1.43,7.29.2,10.95h6.28c.97-4.47.23-8.87-.58-12.33-.76-3.25-1.27-6.77.12-10.48ZM32.05,10.48c-.76-3.25-1.27-6.77.12-10.48h-6.35c-1.1,4.4-.49,8.42.31,11.86.74,3.18,1.43,7.29.2,10.95h6.28c.97-4.47.23-8.87-.58-12.33ZM19.56,0h-6.35c-1.1,4.4-.49,8.42.31,11.86.74,3.18,1.43,7.29.2,10.95h6.28c.97-4.47.23-8.87-.58-12.33-.76-3.25-1.27-6.77.12-10.48Z"/></svg>') no-repeat calc(50% + clamp(320px, calc(440 / 1366 * 100dvw), max(440px, calc(440 / 1367 * 100dvw)))) clamp(48px, calc(64 / 1366 * 100dvw), max(64px, calc(64 / 1367 * 100dvw))) / clamp(24px, calc(33 / 1366 * 100dvw), max(33px, calc(33 / 1367 * 100dvw))),
					url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42.01 42.01" fill="%23eca052"><rect x="2.27" y="2.27" width="37.48" height="37.48" rx="13.23" ry="13.23" transform="translate(-8.7 21) rotate(-45)"/></svg>') no-repeat calc(50% + clamp(320px, calc(640 / 1366 * 100dvw), max(640px, calc(640 / 1367 * 100dvw)))) clamp(88px, calc(104 / 1366 * 100dvw), max(104px, calc(104 / 1367 * 100dvw))) / clamp(32px, calc(42 / 1366 * 100dvw), max(42px, calc(42 / 1367 * 100dvw))),
					transparent;
				pointer-events: none;
				z-index: 1;
			}
			& hgroup{
				grid-column: 2;
				grid-row: 1;
				display: grid;
				align-content: center;
				grid-template-columns: clamp(520px, calc(570 / 1366 * 100dvw), max(570px, calc(570 / 1367 * 100dvw)));
				justify-content: end;
				margin-top: clamp(144px, calc(168 / 1366 * 100dvw), max(168px, calc(168 / 1367 * 100dvw)));
			}
			#areaText{
				grid-column: 2;
				grid-row: 3;
				display: grid;
				align-content: end;
				grid-template-columns: clamp(520px, calc(570 / 1366 * 100dvw), max(570px, calc(570 / 1367 * 100dvw)));
				justify-content: end;
				min-height: max(280px, calc(280 / 1367 * 100dvw));
				margin-top: clamp(48px, calc(64 / 1366 * 100dvw), max(64px, calc(64 / 1367 * 100dvw)));
			}
			#areaMap{
				grid-column: 1 / 4;
				grid-row: 1 / 5;
				margin-bottom: calc(0px - max(48px, calc(48 / 1367 * 100dvw)));
			}
			#areaPhoto{
				& dl:nth-child(1){
					grid-column: 1 / 3;
					grid-row: 1 / 3;
					align-self: start;
					width: clamp(336px, calc(420 / 1366 * 100dvw), max(420px, calc(420 / 1367 * 100dvw)));
					margin: clamp(96px, calc(136 / 1366 * 100dvw), max(136px, calc(136 / 1367 * 100dvw))) 0 0 var(--wrap-space);
				}
				& dl:nth-child(2){
					grid-column: 2 / 4;
					grid-row: 2;
					justify-self: end;
					align-self: end;
					width: clamp(512px, calc(560 / 1366 * 100dvw), max(560px, calc(560 / 1367 * 100dvw)));
					margin-top: clamp(24px, calc(32 / 1366 * 100dvw), max(32px, calc(32 / 1367 * 100dvw)));
				}
				& dl:nth-child(3){
					grid-column: 1 / 3;
					grid-row: 4;
					align-self: center;
					width: clamp(520px, calc(560 / 1366 * 100dvw), max(560px, calc(560 / 1367 * 100dvw)));
					margin-top: clamp(48px, calc(64 / 1366 * 100dvw), max(64px, calc(64 / 1367 * 100dvw)));
				}
				& dl:nth-child(4){
					grid-column: 2 / 4;
					grid-row: 4;
					justify-self: end;
					width: clamp(296px, calc(340 / 1366 * 100dvw), max(340px, calc(340 / 1367 * 100dvw)));
					margin: clamp(48px, calc(64 / 1366 * 100dvw), max(64px, calc(64 / 1367 * 100dvw))) var(--wrap-space) 0 0;
				}
			}
		}
	}
	#areaText{
		& h3{
			font-weight: 700;
			font-size: clamp(16px, calc(24 / 768 * 100dvw), 24px);
		}
		& h3+div{
			margin-top: 16px;
			font-weight: 500;
			font-size: clamp(14px, calc(16 / 768 * 100dvw), 16px);
		}
	}
	#areaLink{
		justify-content: start;
		margin-top: clamp(24px, calc(40 / 768 * 100dvw), 40px);
		& a{
			min-width: min(100%, 240px);
		}
	}
	#areaMap{
		position: relative;
		background: white;
		pointer-events: none;
		overflow: hidden;
		&:before,
		&:after{
			position: absolute;
			top: 0;
			left: 50%;
			width: clamp(720px, calc(1980 / 1366 * 100dvw), max(1980px, calc(1980 / 1367 * 100dvw)));
			height: calc(100% + 0.98px);
			transform: translateX(-50%);
		}
		&:before{
			content: "";
			background: #f7f5ed;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1980 249.89"><path d="M1980,119.86c-286-286-477.75,181.75-631,28.5-23.15-29.09-7.5-64.5-25-99-36-60-136-90-302.5,58-97.25,86.44-352,207-574.9,101.15-31.22-14.82-89.6-69.67-209.6-70.24C152,137.86,0,197.86,0,197.86V0h1980v119.86Z"/></svg>') no-repeat center top / 100% auto, url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1980 430.38"><path d="M1980,430.38v-166.38s-96,112.43-256,157c-39.51,11.01-149,17.11-185.93-9.54-58.96-42.55-82.39-106.22-76.99-176.54,2.32-48.26,17.48-60.68,2.83-107.83-27.62-87.96-138.07-115.23-225.53-124.61-98.41-10.69-176.77,13.59-256.54,66.49-107.73,70.67-205.6,164.58-325.55,212.83-96.55,40.35-206.41,35.8-308.3,9.21C145,238.02,0,124,0,124v306.38h1980Z"/></svg>') no-repeat center bottom / 100% auto;
			z-index: 2;
		}
		&:after{
			background: #dbebd6;
			-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 top / 100% 32px, url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1980 249.89"><path d="M1980,119.86c-286-286-477.75,181.75-631,28.5-23.15-29.09-7.5-64.5-25-99-36-60-136-90-302.5,58-97.25,86.44-352,207-574.9,101.15-31.22-14.82-89.6-69.67-209.6-70.24C152,137.86,0,197.86,0,197.86V0h1980v119.86Z"/></svg>') no-repeat center 32px / 100% auto;
			z-index: 1;
		}
		& img{
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
		}
		@media (max-width: 991.98px) {
			& img{
				top: calc(0px - clamp(48px, calc(56 / 768 * 100dvw), 56px));
				width: max(640px, 120%);
			}
		}
		@media (min-width: 992px) {
			&:has(.done){
				background: linear-gradient(180deg, #e1f0da calc(clamp(64px, calc(96 / 1366 * 100dvw), max(96px, calc(96 / 1367 * 100dvw))) + 0.98px), white 0%, white calc(100% - 0.98px), #f7f5ed 100%);
				& img{
					opacity: 1;
				}
			}
			&:after{
				content: "";
			}
			& img{
				top: clamp(64px, calc(96 / 1366 * 100dvw), max(96px, calc(96 / 1367 * 100dvw)));
				width: clamp(1600px, calc(1980 / 1366 * 100dvw), max(1980px, calc(1980 / 1367 * 100dvw)));
				opacity: 0;
			}
		}
	}
	#areaPhoto{
		display: contents;
		& dl{
			position: relative;
			z-index: inherit;
			&:nth-child(1){
				& dt{
					right: 0;
					transform: translateX(1em);
				}
				& dd{
					aspect-ratio: 1;
					border-radius: clamp(4px, calc(8 / 768 * 100dvw), 8px);
				}
			}
			&:nth-child(2){
				& dt{
					left: 0;
					transform: translateX(-1em);
				}
				& dd{
					aspect-ratio: 280 / 150;
					border-radius: clamp(4px, calc(8 / 768 * 100dvw), 8px) 0 0 clamp(4px, calc(8 / 768 * 100dvw), 8px);
				}
			}
			&:nth-child(3){
				& dt{
					right: 0;
					transform: translateX(1em);
				}
				& dd{
					aspect-ratio: 280 / 150;
					border-radius: 0 clamp(4px, calc(8 / 768 * 100dvw), 8px) clamp(4px, calc(8 / 768 * 100dvw), 8px) 0;
				}
			}
			&:nth-child(4){
				& dt{
					left: 0;
					transform: translateX(-1em);
				}
				& dd{
					aspect-ratio: 340 / 520;
					border-radius: clamp(4px, calc(8 / 768 * 100dvw), 8px);
				}
			}
		}
		& dt{
			position: absolute;
			bottom: 1.5em;
			padding: 0.5em 1em;
			background: white;
			border-radius: 4px;
			font-weight: 500;
			font-size: clamp(10px, calc(16 / 768 * 100dvw), 16px);
			z-index: 1;
		}
		& dd{
			position: relative;
			background: snow;
			overflow: hidden;
			& img{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
	}
}

#topics{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	margin-top: clamp(64px, calc(120 / 768 * 100dvw), 120px);
	&:not(:has(section)){
		display: none;
	}
	&{
		& hgroup{
			position: relative;
			z-index: 1;
			& h2{
				margin-bottom: -0.75em;
			}
		}
		&:before{
			content: "";
			grid-column: 1;
			grid-row: 2 / 4;
			justify-self: center;
			background: white;
		}
		#topicsList,
		#topicsLink{
			grid-column: 1;
			justify-self: center;
			&:last-child{
				margin-bottom: clamp(48px, calc(64 / 768 * 100dvw), 64px);
			}
		}
		#topicsList{
			grid-row: 2;
			margin-top: clamp(48px, calc(64 / 768 * 100dvw), 64px);
		}
		#topicsLink{
			grid-row: 3;
			margin-top: clamp(24px, calc(40 / 768 * 100dvw), 40px);
		}
		@media (max-width: 991.98px) {
			&:before{
				width: max(var(--wrap-min), 100dvw);
			}
			#topicsList,
			#topicsLink{
				width: var(--wrap);
			}
		}
		@media (min-width: 992px) {
			&:before{
				width: 100%;
				border-radius: 24px;
			}
			#topicsList,
			#topicsLink{
				width: calc(100% - (var(--wrap-space) * 2));
			}
		}
	}
	#topicsList{
		&{
			@media (max-width: 767.98px) {
				& section{
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					grid-gap: 8px 16px;
				}
				& h3{
					order: 1;
					width: 100%;
				}
			}
			@media (min-width: 768px) {
				display: grid;
				grid-template-columns: auto auto 1fr;
				& section{
					display: grid;
					grid-template-columns: subgrid;
					grid-column: 1 / 4;
					align-items: center;
				}
				& h3{
					grid-column: 3;
					grid-row: 1;
					margin-left: 24px;
				}
				& h3+div{
					display: contents;
					& time{
						grid-column: 1;
						grid-row: 1;
					}
					& ul{
						grid-column: 2;
						grid-row: 1;
						margin-left: 16px;
					}
				}
			}
		}
		& section{
			position: relative;
			padding: clamp(16px, calc(24 / 768 * 100dvw), 24px) 32px clamp(16px, calc(24 / 768 * 100dvw), 24px) 0;
			border-top: 1px dashed currentColor;
			&:last-child{
				border-bottom: 1px dashed currentColor;
			}
			& h3{
				font-weight: 700;
			}
			& h3+div{
				display: contents;
				& time{
					font-weight: 500;
				}
				& ul{
					display: flex;
					column-gap: 8px;
					&:has(.tagNew:only-child){
						justify-content: end;
					}
				}
				& li{
					display: grid;
					align-items: center;
					min-height: 24px;
					min-width: 80px;
					padding: 0 8px;
					border-radius: 12px;
					background: var(--color);
					color: #fff;
					font-weight: 700;
					font-size: 14px;
					text-align: center;
					text-wrap: balance;
					&.tagCheck{
						background: var(--color-theme);
					}
				}
				& a{
					position: absolute;
					top: 0;
					left: 0;
					display: grid;
					grid-template-columns: 1fr auto;
					align-items: center;
					width: 100%;
					height: 100%;
					color: white;
					font-size: 0;
					&:before,
					&:after{
						content: "";
						grid-column: 2;
						grid-row: 1;
						justify-self: center;
						aspect-ratio: 1;
						width: 24px;
						transition: transform 0.2s ease-out;
					}
					&:before{
						background: var(--color-theme);
						border-radius: 100%;
					}
					&:after{
						background: currentColor;
						-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g style="fill: none; stroke: black; stroke-miterlimit: 10;"><line x1="6.79" y1="11.94" x2="17.07" y2="11.94"/><polyline points="14.21 9 17.21 12 14.21 15"/></g></svg>') no-repeat center / contain;
					}
					&:hover{
						&:before,
						&:after{
							transform: translateX(4px);
						}
					}
				}
			}
		}
	}
}

#sns{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	margin-top: clamp(64px, calc(120 / 768 * 100dvw), 120px);
	& hgroup{
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		& h2{
			grid-column: 2;
			grid-row: 2;
			margin-inline: 0.75em;
		}
		& p{
			grid-column: 1 / 4;
			grid-row: 1;
		}
		&:before,
		&:after{
			content: "";
			grid-row: 2;
			align-self: end;
			height: 50%;
			border: solid currentColor;
		}
		&:before{
			border-width: 3px 0 0 3px;
			border-radius: 24px 0 0 0;
		}
		&:after{
			border-width: 3px 3px 0 0;
			border-radius: 0 24px 0 0;
		}
	}
	#snsList{
		display: grid;
		padding: clamp(24px, calc(40 / 768 * 100dvw), 40px) 24px clamp(32px, calc(48 / 768 * 100dvw),48px) 24px;
		border: solid currentColor;
		border-width: 0 3px 3px 3px;
		border-radius: 0 0 24px 24px;
		overflow: hidden;
		@media (max-width: 991.98px) {
			grid-row-gap: clamp(32px, calc(40 / 768 * 100dvw), 40px);
			& section{
				&:nth-child(n+2){
					padding-top: clamp(32px, calc(40 / 768 * 100dvw), 40px);
					border-top: 3px dotted currentColor;
				}
			}
		}
		@media (min-width: 992px) {
			grid-template-columns: repeat(2, 1fr);
			grid-row-gap: clamp(64px, calc(80 / 768 * 100dvw), 80px);
			& section{
				padding: 0 clamp(40px, calc(56 / 1366 * 100dvw), 56px);
				&:nth-child(even){
					border-left: 3px dotted currentColor;
				}
				&:nth-child(n+2):nth-child(odd){
					position: relative;
					&:before{
						content: "";
						position: absolute;
						top: calc(0px - clamp(32px, calc(40 / 768 * 100dvw), 40px));
						left: 0;
						width: 200%;
						border-top: 3px dotted currentColor;
					}
				}
				&:nth-child(odd):last-child{
					grid-column: 1 / 3;
					&:before{
						width: 100%;
					}
				}
			}
		}
		& section{
			& h3{
				display: grid;
				align-items: center;
				min-height: 2em;
				background: white;
				border: 2px solid currentColor;
				border-radius: 1em;
				font-weight: 700;
				font-size: clamp(16px, calc(24 / 768 * 100dvw), 24px);
				text-align: center;
				text-wrap: balance;
			}
			& h3+div{
				margin-top: max(16px, calc(16 / 1367 * 100dvw));
			}
			& ul{
				display: flex;
				justify-content: center;
				column-gap: clamp(16px, calc(24 / 768 * 100dvw), 24px);
			}
			& li{
				display: contents;
			}
			& a{
				position: relative;
				display: block;
				aspect-ratio: 1;
				width: clamp(64px, calc(80 / 768 * 100dvw), 80px);
				background: white;
				border-radius: 100%;
				font-size: 0;
				&:before{
					content: "";
					position: absolute;
					top: 50%;
					left: 50%;
					aspect-ratio: 1;
					width: 32px;
					background: currentColor;
					color: inherit;
					transform: translate(-50%, -50%);
				}
				&[href*="x.com"]:before{
					background: #3d3d3d;
					-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31.31 32"><path d="M18.63,13.55L30.29,0h-2.76l-10.12,11.77L9.32,0H0l12.22,17.79L0,32h2.76l10.69-12.42,8.54,12.42h9.32l-12.68-18.45h0ZM14.85,17.95l-1.24-1.77L3.76,2.08h4.24l7.95,11.38,1.24,1.77,10.34,14.79h-4.24l-8.44-12.07h0Z"/></svg>') no-repeat center / contain;
				}
				&[href*="instagram.com"]:before{
					background: linear-gradient(-150deg, transparent 55%, #ff7a00 65%, #ffd600) no-repeat, linear-gradient(45deg, transparent 50%, #d300c5) no-repeat, linear-gradient(135deg, #7638fa 25%, #ff0069 50%) no-repeat;
					-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M16,7.78c-4.54,0-8.22,3.68-8.22,8.22s3.68,8.22,8.22,8.22,8.22-3.68,8.22-8.22-3.68-8.22-8.22-8.22ZM16,21.33c-2.95,0-5.33-2.39-5.33-5.33s2.39-5.33,5.33-5.33,5.33,2.39,5.33,5.33-2.39,5.33-5.33,5.33ZM24.54,5.54c-1.06,0-1.92.86-1.92,1.92s.86,1.92,1.92,1.92,1.92-.86,1.92-1.92-.86-1.92-1.92-1.92ZM31.9,9.4c-.08-1.7-.35-2.87-.74-3.88-.41-1.05-.96-1.94-1.85-2.83-.89-.89-1.78-1.44-2.83-1.85-1.02-.4-2.18-.67-3.88-.74-1.71-.08-2.25-.1-6.6-.1s-4.89.02-6.6.1c-1.7.08-2.87.35-3.88.74-1.05.41-1.94.96-2.83,1.85-.89.89-1.44,1.78-1.85,2.83-.4,1.02-.67,2.18-.74,3.88-.08,1.71-.1,2.25-.1,6.6s.02,4.89.1,6.6c.08,1.7.35,2.87.74,3.88.41,1.05.96,1.94,1.85,2.83.89.89,1.78,1.44,2.83,1.85,1.02.4,2.18.67,3.88.74,1.71.08,2.25.1,6.6.1s4.89-.02,6.6-.1c1.7-.08,2.87-.35,3.88-.74,1.05-.41,1.94-.96,2.83-1.85s1.44-1.78,1.85-2.83c.4-1.02.67-2.18.74-3.88.08-1.71.1-2.25.1-6.6s-.02-4.89-.1-6.6ZM29.02,22.46c-.07,1.56-.33,2.41-.55,2.97-.29.75-.64,1.28-1.2,1.84-.56.56-1.09.91-1.84,1.2-.56.22-1.41.48-2.97.55-1.69.08-2.19.09-6.47.09s-4.78-.02-6.47-.09c-1.56-.07-2.41-.33-2.97-.55-.75-.29-1.28-.64-1.84-1.2-.56-.56-.91-1.09-1.2-1.84-.22-.56-.48-1.41-.55-2.97-.08-1.69-.09-2.19-.09-6.47s.02-4.78.09-6.47c.07-1.56.33-2.41.55-2.97.29-.75.64-1.28,1.2-1.84.56-.56,1.09-.91,1.84-1.2.56-.22,1.41-.48,2.97-.55,1.69-.08,2.19-.09,6.47-.09s4.78.02,6.47.09c1.56.07,2.41.33,2.97.55.75.29,1.28.64,1.84,1.2.56.56.91,1.09,1.2,1.84.22.56.48,1.41.55,2.97.08,1.69.09,2.19.09,6.47s-.02,4.78-.09,6.47Z"/></svg>') no-repeat center / contain;
				}
				&[href*="facebook.com"]:before{
					background: #0866ff 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="M22.27,20.89l.9-4.89h-5.23v-1.73c0-2.58,1.01-3.58,3.64-3.58.81,0,1.47.02,1.85.06v-4.43c-.72-.2-2.46-.4-3.48-.4-5.35,0-7.81,2.52-7.81,7.97v2.11h-3.3v4.89h3.3v10.64c1.24.31,2.53.47,3.87.47.66,0,1.3-.04,1.94-.12v-10.99h4.33Z"/></svg>') no-repeat center bottom / contain;
					border-radius: 100%;
				}
				&[href*="youtube.com"]:before{
					background: red;
					-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 22.42"><path d="M3.51,21.74c-1.38-.37-2.45-1.47-2.85-2.83-.65-2.5-.65-7.71-.65-7.71,0,0,0-5.21.65-7.69.4-1.38,1.47-2.45,2.85-2.83,2.48-.68,12.48-.68,12.48-.68,0,0,10.03,0,12.51.68,1.4.37,2.45,1.45,2.83,2.83.68,2.48.68,7.69.68,7.69,0,0,0,5.21-.68,7.71-.37,1.36-1.43,2.45-2.83,2.83-2.48.68-12.51.68-12.51.68,0,0-10,0-12.48-.68ZM12.81,16.01l8.3-4.82-8.3-4.79v9.61Z"/></svg>') no-repeat center / contain;
				}
			}
		}
	}
}

.slick-arrow{
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	position: relative;
	aspect-ratio: 1;
	width: clamp(40px, calc(56 / 768 * 100dvw), 56px);
	background: var(--color);
	border-radius: 100%;
	color: white;
	font-size: 0;
	z-index: 1;
	&:before{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: currentColor;
		-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56" style="fill: none; stroke: white; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><polyline points="24 20 32 28 24 36"/></svg>') no-repeat center / contain;
	}
	&.slick-prev:before{
		transform: scale(-1, 1);
	}
}

.slick-dots{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	grid-gap: clamp(16px, calc(24 / 768 * 100dvw), max(24px, calc(24 / 1367 * 100dvw)));
	padding: max(2px, calc(2 / 1367 * 100dvw));
	& li{
		position: relative;
		aspect-ratio: 1;
		width: max(8px, calc(8 / 1367 * 100dvw));
		border: 1px solid currentColor;
		border-radius: 100%;
		&.slick-active{
			width: max(12px, calc(12 / 1367 * 100dvw));
			background: var(--color-theme);
			border-color: transparent;
		}
	}
	& button{
		position: absolute;
		top: 50%;
		left: 50%;
		width: 200%;
		height: 200%;
		transform: translate(-50%, -50%);
		opacity: 0;
	}
}