/* CSS Document */

:has(meta[content="#5d6fcf"]),
:has(meta[content="#d49517"]),
:has(meta[content="#2bb2ea"]){
	#favorite{
		display: none;
	}
}

#main{
	overflow: hidden;
	background: #f0f5f7;
}

#detail{
	display: grid;
	padding: clamp(32px, calc(64 / 768 * 100dvw), 64px) 0 clamp(48px, calc(88 / 768 * 100dvw), 88px) 0;
	&:last-child{
		padding-bottom: clamp(96px, calc(120 / 768 * 100dvw), 120px);
	}
	@media (max-width: 991.98px) {
		background: white;
	}
	@media (min-width: 992px) {
		position: relative;
		z-index: 0;
		margin-top: 80px;
		&:not(:last-child){
			&:before{
				border-radius: 40px;
			}
		}
		&:before{
			content: "";
			position: absolute;
			top: 0;
			left: 50%;
			width: min(100%, 1232px);
			height: 100%;
			background: white;
			border-radius: 40px 40px 0 0;
			z-index: -1;
			transform: translateX(-50%);
		}
	}
	#feature,
	#blog{
		justify-self: center;
		width: min(var(--wrap-fit), 864px);
		&:has(#title p){
			@media (max-width: 575.98px) {
				#title{
					display: grid;
					grid-row-gap: 16px;
					& p{
						grid-row: 1;
						justify-self: start;
					}
				}
			}
			@media (min-width: 576px) and (max-width: 1199.98px) {
				display: grid;
				grid-template-columns: auto 1fr;
				grid-template-rows: auto 1fr;
				justify-content: center;
				column-gap: clamp(24px, calc(40 / 768 * 100dvw), 40px);
				#title{
					display: contents;
					& h2{
						grid-column: 2;
						grid-row: 1;
						width: min(100%, 864px);
					}
					& p{
						grid-column: 1;
						grid-row: 1 / 3;
						align-self: start;
					}
				}
				#text,
				#data{
					grid-column: 2;
					width: min(100%, 864px);
				}
			}
		}
	}
	#feature{
		@media (min-width: 1200px) {
			max-width: min(var(--wrap-fit), 1120px);
			&:has(#title p){
				display: grid;
				grid-template-columns: 1fr 864px;
				grid-template-rows: auto 1fr;
				justify-content: center;
				column-gap: 40px;
				#title{
					display: contents;
					& h2{
						grid-column: 2;
						grid-row: 1;
					}
					& p{
						grid-column: 1;
						grid-row: 1 / 3;
						align-self: start;
					}
				}
				#text,
				#data{
					grid-column: 2;
				}
			}
		}
	}
	#blog{
		@media (min-width: 1200px) {
			position: relative;
			#title{
				& p{
					position: absolute;
					top: 0;
					left: -40px;
					transform: translateX(-100%);
				}
			}
		}
	}
	#favorite,
	#index{
		justify-self: center;
		width: min(var(--wrap-fit), 864px);
	}
	#text{
		margin-top: clamp(24px, calc(32 / 768 * 100dvw), 32px);
	}
	#data{
		margin-top: 24px;
	}
	#photo{
		justify-self: center;
		width: min(100%, 1232px);
		#feature+&{
			margin-top: clamp(32px, calc(48 / 768 * 100dvw), 48px);
		}
		#blog+&{
			margin-top: 24px;
		}
	}
	#index{
		margin-top: clamp(48px, calc(64 / 768 * 100dvw), 64px);
	}
	#favorite{
		margin-top: clamp(48px, calc(64 / 768 * 100dvw), 64px);
	}
	#article{
		order: 1;
		margin-top: clamp(64px, calc(96 / 768 * 100dvw), 96px);
	}
	#writer{
		order: 1;
		justify-self: center;
		width: min(100%, 1232px);
		margin-top: clamp(64px, calc(96 / 768 * 100dvw), 96px);
	}
}

#title{
	& h2{
		padding-bottom: 0.5em;
		border-bottom: 1px solid currentColor;
		font-weight: 900;
		font-size: clamp(24px, calc(32 / 768 * 100dvw), 32px);
		letter-spacing: 0.025em;
	}
	& p{
		display: grid;
		align-content: center;
		grid-row-gap: 0.25em;
		aspect-ratio: 1;
		min-width: 72px;
		padding: 0.5em;
		font-size: 14px;
		letter-spacing: 0.1em;
		line-height: 1.2;
		text-align: center;
		& span[translate="no"]{
			display: grid;
			grid-template-columns: 4em;
			justify-content: center;
		}
		#feature &{
			position: relative;
			padding-top: 0.75em;
			@media (max-width: 1199.98px) {
				position: relative;
			}
			&: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 24 9"><path d="M24,0c-7,0-12,8-12,8C12,8,7,0,0,0v1c6.35,0,11.11,7.46,11.15,7.53.18.29.5.47.85.47s.66-.18.85-.47c.05-.08,4.8-7.53,11.15-7.53V0Z"/></svg>') no-repeat center top / 24px 9px, url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1 1"><rect width="1" height="1"/></svg>') no-repeat left top / calc(50% - 12px) 1px, url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1 1"><rect width="1" height="1"/></svg>') no-repeat right top / calc(50% - 12px) 1px, url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1 1"><rect width="1" height="1"/></svg>') no-repeat left top / 1px 100%, url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1 1"><rect width="1" height="1"/></svg>') no-repeat right top / 1px 100%, url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1 1"><rect width="1" height="1"/></svg>') no-repeat center bottom / 100% 1px;
				/*-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 72 72"><path d="M48,0c-7,0-12,8-12,8,0,0-5-8-12-8H0v72h72V0h-24ZM71,71H1V1h23c6.35,0,11.11,7.46,11.15,7.53.18.29.5.47.85.47s.66-.18.85-.47c.05-.08,4.8-7.53,11.15-7.53h23v70Z"/></svg>') no-repeat center / cover;*/
			}
		}
		#blog &{
			border: 1px solid currentColor;
			border-radius: 100%;
		}
	}
}

#text{
	letter-spacing: 0.05em;
}

#data{
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: clamp(16px, calc(32 / 768 * 100dvw), 32px);
	& i{
		align-self: start;
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;
		column-gap: 8px;
		min-height: 40px;
		color: color-mix(in srgb, white, black 60%);
		font-size: 14px;
		font-style: normal;
		letter-spacing: 0.025em;
		&:before{
			content: "";
			aspect-ratio: 1;
			width: 16px;
			background: var(--color);
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round;"><path d="M8.5,3.75c-3.15,0-5.86,1.94-7.12,4.75,1.27,2.81,3.98,4.75,7.12,4.75s5.86-1.94,7.12-4.75c-1.27-2.81-3.98-4.75-7.12-4.75Z"/><line x1="8.5" y1="3.75" x2="8.5" y2="2"/><line x1="3.96" y1="3" x2="5.04" y2="4.42"/><line x1="13.04" y1="3" x2="11.96" y2="4.42"/><circle cx="8.5" cy="8.5" r="2.8"/></svg>') no-repeat center / contain;
		}
	}
	& dl{
		position: relative;
		display: grid;
		grid-template-columns: 40px 1fr;
		align-items: center;
		grid-gap: 8px;
		&:not(:has(img)):before{
			content: "";
			aspect-ratio: 1;
			background: #e6e6e6;
			background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" style="fill: %23f7f7f7;"><circle cx="16" cy="12.5" r="5.5"/><path d="M5.05,32h21.9c-.51-5.61-5.21-10-10.95-10s-10.44,4.39-10.95,10Z"/></svg>') no-repeat center / cover, #e6e6e6;
			border-radius: 100%;
		}
	}
	& dt{
		order: 1;
		font-weight: 700;
		font-size: 14px;
	}
	& dd{
		&:has(img){
			align-self: start;
		}
		& img{
			aspect-ratio: 1;
			object-fit: cover;
			border-radius: 100%;
		}
		&:has(a){
			display: contents;
		}
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
		}
	}
}

#photo{
	display: grid;
	aspect-ratio: 3 / 2;
	#feature+&{
		@media (min-width: 1200px) {
			max-height: 696px;
		}
	}
	#blog+&{
		@media (min-width: 768px) {
			width: min(var(--wrap-fit), 864px);
			& img{
				border-radius: 8px;
			}
			& figcaption{
				padding: clamp(16px, calc(24 / 768 * 100dvw), 24px);
			}
		}
	}
	& img{
		grid-column: 1;
		grid-row: 1;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	& figcaption{
		grid-column: 1;
		grid-row: 1;
		display: grid;
		align-content: end;
		justify-items: end;
		grid-row-gap: clamp(8px, calc(24 / 768 * 100dvw), 24px);
		padding: clamp(16px, calc(40 / 768 * 100dvw), 40px);
		font-weight: 800;
		font-size: clamp(16px, calc(32 / 768 * 100dvw), 32px);
		letter-spacing: 0.025em;
		line-height: 1;
		& span{
			display: block;
			padding: 0.25em 0.5em;
			background: white;
			border-radius: clamp(4px, calc(8 / 768 * 100dvw), 8px);
		}
	}
}

#index{
	display: grid;
	& h3{
		justify-self: center;
		background: linear-gradient(90deg, var(--color-theme) 0.32em, currentColor 0.32em);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		font-weight: 600;
		font-size: 24px;
		font-family: 'Montserrat', var(--font);
		white-space: nowrap;
		letter-spacing: 0.2em;
	}
	& ul{
		display: grid;
		grid-row-gap: 16px;
	}
	& li{
		display: contents;
	}
	& a{
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: baseline;
		column-gap: 0.5em;
		color: inherit;
		font-weight: 600;
		font-size: 13px;
		letter-spacing: 0.1em;
		text-decoration: none;
		&:before{
			content: "";
			aspect-ratio: 1;
			width: 0.5em;
			background: currentColor;
			border-radius: 100%;
			transform: translateY(-0.1em);
		}
	}
	@media (max-width: 991.98px) {
		& h3+div{
			margin-top: clamp(8px, calc(16 / 768 * 100dvw), 16px);
			padding-top: clamp(16px, calc(24 / 768 * 100dvw), 24px);
			border-top: 1px solid currentColor;
		}
	}
	@media (min-width: 992px) {
		grid-template-columns: auto 1fr;
		align-items: center;
		& h3+div{
			margin-left: clamp(48px, calc(96 / 1366 * 100dvw), 96px);
			padding-left: clamp(32px, calc(64 / 1366 * 100dvw), 64px);
			border-left: 1px solid currentColor;
		}
	}
}

#favorite{
	display: flex;
	justify-content: center;
	& button{
		&[data-fav-id]{
			display: grid;
			grid-template-columns: 1fr auto auto;
			align-items: center;
			min-width: min(100%, 276px);
			min-height: 40px;
			padding: 0 20px 0 clamp(48px, calc(64 / 768 * 100dvw), 64px);
			background: var(--color-theme) url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" style="fill: none; stroke: white; stroke-width: 1.8px;"><path d="M8.97,15.73c-.66-.62-3.23-3.17-4.52-4.63-1.34-1.52-2.65-3.18-2.65-5.43,0-1.89,1.56-3.4,3.5-3.4,1.72,0,3.12.94,3.69,2.63h.02c.59-1.78,2.04-2.63,3.69-2.63,1.94,0,3.5,1.51,3.5,3.4,0,2.25-1.31,3.9-2.65,5.43-1.29,1.46-3.87,4.01-4.54,4.63h-.04Z"/></svg>') no-repeat clamp(20px, calc(40 / 768 * 100dvw), 40px) center / 18px;
			border-radius: 20px;
			color: white;
			font-weight: 600;
			font-size: 14px;
			letter-spacing: 0.1em;
			text-align: center;
			text-decoration: none;
			opacity: 0;
			transition: opacity 0.2s ease-out;
			&:before,
			&:after{
				order: 1;
			}
			&:before{
				content: "";
				aspect-ratio: 1;
				width: 8px;
				background: currentColor;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><polygon points="8 .89 8 7.11 3 4 8 .89"/></svg>') no-repeat center / contain;
			}
			&:after{
				content: attr(data-count);
				background: white;
				padding: 0.1em 0.25em;
				border-radius: 4px;
				color: var(--color-theme);
				font-size: 18px;
				font-family: 'Montserrat', var(--font);
				line-height: 1;
			}
			&[data-fav-status]{
				opacity: 1;
			}
			&[data-fav-status="on"]{
				background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 18 18" style="fill: none; stroke: white; stroke-width: 1.8px; stroke-linecap: round; stroke-linejoin: round;"><path d="M.5,8.55l2.73,3.51c.09.12.21.22.35.28.14.07.28.1.43.11.15,0,.3-.03.43-.09.13-.06.25-.15.35-.27L13.5,1.55"/></svg>');
			}
			&[data-fav-status="loading"]{
				background-color: silver;
				background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="fill: none; stroke: color-mix(in srgb, transparent, white 50%); stroke-width: 2.4px; stroke-linecap: round; stroke-linejoin: round;"><circle cx="12" cy="12" r="10" stroke-dasharray="48"><animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="1s" repeatCount="indefinite" /></circle></svg>');
				color: color-mix(in srgb, transparent, white 50%);
				pointer-events: none;
				&:after{
					background: color-mix(in srgb, transparent, white 50%);
					color: transparent;
				}
			}
		}
	}
}

#article{
	counter-reset: count;
}

#writer{
	display: grid;
	#writerTitle{
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		grid-column-gap: clamp(16px, calc(32 / 768 * 100dvw), 32px);
		font-weight: 700;
		font-size: clamp(18px, calc(24 / 768 * 100dvw), 24px);
		letter-spacing: 0.1em;
		text-indent: 0.1em;
		text-align: center;
		&:before,
		&:after{
			content: "";
			min-width: 48px;
			border-top: 1px solid #d9d9d9;
		}
		&+div{
			justify-self: center;
			display: grid;
			grid-row-gap: 16px;
			width: min(var(--wrap-fit), 864px);
			margin-top: clamp(24px, calc(40 / 768 * 100dvw), 40px);
		}
	}
	#writerName{
		font-weight: 700;
		font-size: 18px;
		letter-spacing: 0.1em;
	}
	#writerText{
		font-weight: 600;
	}
	#writerLink{
		display: flex;
		justify-content: end;
		& a{
			display: grid;
			grid-template-columns: 1fr auto;
			align-items: center;
			column-gap: 8px;
			color: inherit;
			font-weight: 600;
			font-size: 14px;
			letter-spacing: 0.15em;
			text-align: center;
			text-decoration: none;
			&:after{
				content: "";
				aspect-ratio: 1;
				width: 14px;
				background: var(--color-theme);
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><polygon points="0 14 6.5 7 0 0 1.5 0 8 7 1.5 14 0 14"/><polygon points="6 14 12.5 7 6 0 7.5 0 14 7 7.5 14 6 14"/></svg>') no-repeat center / contain;
			}
		}
	}
	#writerPhoto{
		& img{
			aspect-ratio: 1;
			object-fit: cover;
			border-radius: 100%;
		}
	}
	@media (max-width: 767.98px) {
		#writerLink{
			margin-top: 8px;
		}
		#writerPhoto{
			grid-row: 1;
			justify-self: center;
			width: 240px;
		}
	}
	@media (min-width: 768px) {
		#writerTitle{
			&+div{
				grid-template-columns: auto 1fr;
				grid-template-rows: auto 1fr;
				&:has(#writerPhoto){
					column-gap: 40px;
					#writerName{
						margin-top: 16px;
					}
				}
			}
		}
		#writerLink{
			margin-top: 16px;
		}
		#writerPhoto{
			grid-column: 1;
			grid-row: 1 / 4;
			width: 240px;
		}
	}
}

#related,
#recommend{
	margin-block: clamp(64px, calc(96 / 768 * 100dvw), 96px) clamp(96px, calc(120 / 768 * 100dvw), 120px);
	display: grid;
	justify-items: center;
	& hgroup{
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		grid-column-gap: clamp(16px, calc(24 / 768 * 100dvw), 24px);
		width: 100%;
		overflow: hidden;
		&:before,
		&:after{
			content: "";
			grid-row: 1;
			min-width: 48px;
			border-top: 1px solid currentColor;
		}
		& h2{
			grid-column: 2;
			grid-row: 1;
			font-weight: 800;
			font-size: clamp(18px, calc(24 / 768 * 100dvw), 24px);
			letter-spacing: 0.1em;
			text-indent: 0.1em;
			text-align: center;
		}
		& p{
			grid-column: 1 / 4;
			justify-self: center;
			font-weight: 600;
			font-size: clamp(16px, calc(24 / 768 * 100dvw), 24px);
			font-family: 'Montserrat', var(--font);
			white-space: nowrap;
			letter-spacing: 0.1em;
		}
		@media (min-width: 992px) {
			width: min(var(--wrap-fit), 1232px);
			&:before,
			&:after{
				border-top-width: 2px;
			}
			&:before{
				grid-row: 1;
				min-width: 48px;
				border-top: 2px solid currentColor;
			}
			&:after{
				content: none;
			}
			& p{
				grid-column: 3;
				grid-row: 1;
				justify-self: unset;
				display: grid;
				grid-template-columns: 1fr auto;
				align-items: center;
				grid-column-gap: clamp(16px, calc(32 / 768 * 100dvw), 32px);
				&:before{
					content: "";
					min-width: 48px;
					border-top: 2px solid currentColor;
				}
			}
		}
	}
	#relatedList,
	#recommendList{
		width: min(calc(100% - clamp(16px, calc(32 / 768 * 100dvw), 32px)), 1248px);
		margin-top: clamp(24px, calc(48 / 768 * 100dvw), 48px);
	}
}

#related{
	& hgroup{
		& p{
			background: linear-gradient(-90deg, currentColor 6.1em, var(--color-theme) 6.1em, var(--color-theme) 7em, currentColor 7em, currentColor 11.1em, var(--color-theme) 11.1em);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
	}
}

#relatedList{
	display: grid;
	&:not(.slick-slider){
		justify-content: center;
		& > section,
		& > span{
			&:nth-child(n+2){
				display: none;
			}
		}
	}
	&.slick-slider{
		grid-template-columns: auto 1fr auto;
		column-gap: 12px;
		&:before{
			content: "";
			grid-row: 1;
			aspect-ratio: 3 / 2;
			background: red;
			opacity: 0.5;
			z-index: 1;
			visibility: hidden;
		}
		.slick-list{
			grid-row: 1 / 3;
			margin-inline: calc(0px - clamp(8px, calc(16 / 768 * 100dvw), 16px));
		}
		.slick-slide{
			margin-inline: clamp(8px, calc(16 / 768 * 100dvw), 16px);
		}
		.slick-arrow{
			grid-row: 1;
			align-self: center;
		}
	}
	@media (max-width: 991.98px) {
		&:not(.slick-slider){
			& > section,
			& > span{
				width: clamp(240px, calc(384 / 768 * 100dvw), 384px);
			}
		}
		&.slick-slider{
			width: calc(max(100dvw, var(--wrap-min)) - 48px);
			&:before{
				grid-column: 1 / 4;
				justify-self: center;
				width: clamp(240px, calc(384 / 768 * 100dvw), 384px);
			}
			.slick-list{
				grid-column: 1 / 4;
				overflow: visible;
			}
			.slick-slide{
				width: clamp(240px, calc(384 / 768 * 100dvw), 384px);
			}
			.slick-arrow{
				background: white;
				&.slick-prev{
					grid-column: 1;
				}
				&.slick-next{
					grid-column: 3;
				}
			}
		}
	}
	@media (min-width: 992px) {
		&:not(.slick-slider){
			justify-content: center;
			padding: 0 64px;
			& > section,
			& > span{
				width: calc(50% - 16px);
			}
		}
		&.slick-slider{
			grid-template-columns: 40px 1fr 40px;
			column-gap: 24px;
			&:before{
				grid-column: 2;
				width: calc(50% - 16px);
			}
			.slick-list{
				grid-column: 2;
			}
			.slick-arrow{
				width: 100%;
			}
		}
	}
	& section{
		position: relative;
		display: grid;
		grid-template-columns: calc(100% - clamp(16px, calc(32 / 768 * 100dvw), 32px));
		justify-content: center;
		grid-row-gap: clamp(8px, calc(16 / 768 * 100dvw), 16px);
		&:not(:has(figure)):before{
			content: "";
			background: var(--dummy);
		}
		&:before,
		& figure img{
			aspect-ratio: 3 / 2;
			border-radius: 4px;
		}
		&:before,
		& [data-fav-id],
		& figure{
			grid-column: 1;
			grid-row: 1;
		}
		&:before,
		& [data-fav-id],
		& figure{
			margin-inline: calc(0px - clamp(8px, calc(16 / 768 * 100dvw), 16px));
		}
		& [data-fav-id]{
			justify-self: end;
		}
	}
	& h3{
		font-weight: 700;
		font-size: clamp(16px, calc(20 / 768 * 100dvw), 20px);
		letter-spacing: 0.025em;
	}
	& h3+div{
		display: contents;
		& button{
			&[data-fav-id]{
				position: relative;
				aspect-ratio: 1;
				width: 48px;
				background: silver;
				background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="fill: transparent; stroke: white; stroke-width: 2.4px; stroke-linecap: round; stroke-linejoin: round;"><path d="M11.96,20.97c-.88-.83-4.3-4.22-6.03-6.17-1.79-2.03-3.54-4.25-3.54-7.24,0-2.53,2.08-4.54,4.66-4.54,2.3,0,4.16,1.25,4.93,3.51h.02c.79-2.37,2.73-3.51,4.93-3.51,2.58,0,4.66,2.01,4.66,4.54,0,2.99-1.75,5.21-3.54,7.24-1.72,1.94-5.17,5.34-6.05,6.17h-.05Z"/></svg>') no-repeat center / 24px;
				font-size: 0;
				filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.3));
				opacity: 0;
				transition: opacity 0.2s ease-out;
				z-index: 2;
				&[data-fav-status]{
					opacity: 1;
				}
				&[data-fav-status="on"]{
					background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="fill: %23d92d1b; stroke: white; stroke-width: 2.4px; stroke-linecap: round; stroke-linejoin: round;"><path d="M11.96,20.97c-.88-.83-4.3-4.22-6.03-6.17-1.79-2.03-3.54-4.25-3.54-7.24,0-2.53,2.08-4.54,4.66-4.54,2.3,0,4.16,1.25,4.93,3.51h.02c.79-2.37,2.73-3.51,4.93-3.51,2.58,0,4.66,2.01,4.66,4.54,0,2.99-1.75,5.21-3.54,7.24-1.72,1.94-5.17,5.34-6.05,6.17h-.05Z"/></svg>');
				}
				&[data-fav-status="loading"]{
					background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="fill: none; stroke: white; stroke-width: 2.4px; stroke-linecap: round; stroke-linejoin: round;"><circle cx="12" cy="12" r="10" stroke-dasharray="48"><animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="1s" repeatCount="indefinite" /></circle></svg>');
					opacity: 0.5;
					pointer-events: none;
				}
			}
		}
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
			z-index: 1;
		}
	}
	& figure{
		display: grid;
		aspect-ratio: 3 / 2;
		overflow: hidden;
		& img{
			grid-column: 1;
			grid-row: 1;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		& figcaption{
			grid-column: 1;
			grid-row: 1;
			display: grid;
			align-content: end;
			justify-items: end;
			grid-row-gap: 8px;
			padding: clamp(8px, calc(16 / 768 * 100dvw), 16px);
			font-weight: 800;
			font-size: clamp(14px, calc(18 / 768 * 100dvw), 18px);
			letter-spacing: 0.025em;
			& span{
				display: block;
				padding: 0.25em 0.5em;
				background: white;
				border-radius: 4px;
				line-height: 1;
			}
		}
	}
}

#recommend{
	& hgroup{
		& p{
			background: linear-gradient(-90deg, currentColor 2em, var(--color-theme) 2em, var(--color-theme) 2.8em, currentColor 2.8em, currentColor 7.1em, var(--color-theme) 7.1em);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
	}
}

#recommendList{
	display: grid;
	&:not(.slick-slider){
		justify-content: center;
		& > section,
		& > span{
			&:nth-child(n+2){
				display: none;
			}
		}
	}
	&.slick-slider{
		grid-template-columns: auto 1fr auto;
		&:before{
			content: "";
			grid-row: 1;
			aspect-ratio: 3 / 2;
			background: red;
			opacity: 0.5;
			z-index: 1;
			visibility: hidden;
		}
		.slick-list{
			grid-row: 1 / 3;
			margin-inline: -12px;
		}
		.slick-slide{
			margin-inline: 12px;
		}
		.slick-arrow{
			grid-row: 1;
			align-self: center;
		}
	}
	@media (max-width: 991.98px) {
		&:not(.slick-slider){
			& > section,
			& > span{
				width: clamp(240px, calc(320 / 768 * 100dvw), 320px);
			}
		}
		&.slick-slider{
			&:before{
				grid-column: 1 / 4;
				justify-self: center;
				width: clamp(240px, calc(320 / 768 * 100dvw), 320px);
			}
			.slick-list{
				grid-column: 1 / 4;
				overflow: visible;
			}
			.slick-slide{
				width: clamp(240px, calc(320 / 768 * 100dvw), 320px);
			}
			.slick-arrow{
				background: white;
				&.slick-prev{
					grid-column: 1;
				}
				&.slick-next{
					grid-column: 3;
				}
			}
		}
	}
	@media (min-width: 992px) {
		&:not(.slick-slider){
			display: grid;
			column-gap: 24px;
			padding: 0 72px;
		}
		&.slick-slider{
			grid-template-columns: 48px 1fr 48px;
			column-gap: 24px;
			&:before{
				grid-column: 2;
			}
			.slick-list{
				grid-column: 2;
			}
			.slick-arrow{
			}
		}
	}
	@media (min-width: 992px) and (max-width: 1365.98px) {
		&:not(.slick-slider){
			grid-template-columns: repeat(3, 1fr);
		}
		&.slick-slider{
			&:before{
				width: calc((100% - (24px * 2)) / 3);
			}
		}
	}
	@media (min-width: 1366px) {
		&:not(.slick-slider){
			grid-template-columns: repeat(4, 1fr);
		}
		&.slick-slider{
			&:before{
				width: calc((100% - (24px * 3)) / 4);
			}
		}
	}
	& section{
		position: relative;
		display: grid;
		grid-template-columns: calc(100% - 16px);
		justify-content: center;
		grid-row-gap: 8px;
		&:not(:has(figure)):before{
			content: "";
			background: var(--dummy);
			border-radius: 4px;
		}
		&:before,
		& figure img{
			aspect-ratio: 3 / 2;
		}
		&:before,
		& [data-fav-id],
		& figure{
			grid-column: 1;
			grid-row: 1;
		}
		&:before,
		& [data-fav-id],
		& figure{
			margin-inline: -8px;
		}
		& [data-fav-id]{
			justify-self: end;
		}
	}
	& h3{
		font-weight: 700;
		letter-spacing: 0.025em;
	}
	& h3+div{
		display: contents;
		& button{
			&[data-fav-id]{
				position: relative;
				aspect-ratio: 1;
				width: 48px;
				background: silver;
				background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="fill: transparent; stroke: white; stroke-width: 2.4px; stroke-linecap: round; stroke-linejoin: round;"><path d="M11.96,20.97c-.88-.83-4.3-4.22-6.03-6.17-1.79-2.03-3.54-4.25-3.54-7.24,0-2.53,2.08-4.54,4.66-4.54,2.3,0,4.16,1.25,4.93,3.51h.02c.79-2.37,2.73-3.51,4.93-3.51,2.58,0,4.66,2.01,4.66,4.54,0,2.99-1.75,5.21-3.54,7.24-1.72,1.94-5.17,5.34-6.05,6.17h-.05Z"/></svg>') no-repeat center / 24px;
				font-size: 0;
				filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.3));
				opacity: 0;
				transition: opacity 0.2s ease-out;
				z-index: 2;
				&[data-fav-status]{
					opacity: 1;
				}
				&[data-fav-status="on"]{
					background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="fill: %23d92d1b; stroke: white; stroke-width: 2.4px; stroke-linecap: round; stroke-linejoin: round;"><path d="M11.96,20.97c-.88-.83-4.3-4.22-6.03-6.17-1.79-2.03-3.54-4.25-3.54-7.24,0-2.53,2.08-4.54,4.66-4.54,2.3,0,4.16,1.25,4.93,3.51h.02c.79-2.37,2.73-3.51,4.93-3.51,2.58,0,4.66,2.01,4.66,4.54,0,2.99-1.75,5.21-3.54,7.24-1.72,1.94-5.17,5.34-6.05,6.17h-.05Z"/></svg>');
				}
				&[data-fav-status="loading"]{
					background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="fill: none; stroke: white; stroke-width: 2.4px; stroke-linecap: round; stroke-linejoin: round;"><circle cx="12" cy="12" r="10" stroke-dasharray="48"><animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="1s" repeatCount="indefinite" /></circle></svg>');
					opacity: 0.5;
					pointer-events: none;
				}
			}
		}
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
			z-index: 1;
		}
	}
	& figure{
		& img{
			aspect-ratio: 3 / 2;
			object-fit: cover;
			border-radius: 4px;
		}
	}
}

.article{
	display: grid;
	justify-items: center;
	scroll-margin-top: clamp(24px, calc(32 / 768 * 100dvw), 32px);
	&:has(.heading){
		scroll-margin-top: calc(var(--anchor) + clamp(16px, calc(32 / 768 * 100dvw), 32px));
		&:before{
			content: "";
			width: 100%;
			border-bottom: 1px solid currentColor;
			margin-top: 16px;
		}
		.heading{
			order: -1;
		}
	}
	&:not(:first-child){
		&:has(.heading){
			margin-top: clamp(80px, calc(120 / 768 * 100dvw), 120px);
		}
		.subhead,
		.text,
		.wide,
		.medium,
		.grid,
		.column,
		.map,
		.movie,
		.comment{
			&:first-child{
				margin-top: clamp(48px, calc(56 / 768 * 100dvw), 56px);
			}
		}
	}
	.article:has(.link:last-child)+&,
	.article:has(.column:last-child)+&{
		.link:only-child,
		.column:only-child{
			margin-top: clamp(16px, calc(24 / 768 * 100dvw), 24px);
		}
	}
	.heading,
	.subhead,
	.text,
	.link,
	.column,
	.movie{
		width: min(var(--wrap-fit), 864px);
	}
	.grid{
		width: min(var(--wrap-fit), 1120px);
	}
	.wide,
	.medium{
		width: 100%;
	}
	.map,
	.toggle{
		width: min(100%, 1232px);
	}
	.comment{
		width: min(var(--wrap-fit), 956px);
	}
	.subhead,
	.text,
	.wide,
	.medium,
	.grid,
	.column,
	.map,
	.movie,
	.comment{
		&:not(:first-child){
			margin-top: clamp(16px, calc(24 / 768 * 100dvw), 24px);
		}
	}
	.link,
	.toggle{
		margin-top: clamp(48px, calc(56 / 768 * 100dvw), 56px);
	}
}

.heading{
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: baseline;
	column-gap: 0.5em;
	font-weight: 700;
	font-size: clamp(18px, calc(24 / 768 * 100dvw), 24px);
	letter-spacing: 0.1em;
	&:before{
		content: "";
		aspect-ratio: 1;
		width: 0.5em;
		background: currentColor;
		border-radius: 100%;
		transform: translateY(-0.1em);
	}
}

.subhead{
	font-weight: 700;
	letter-spacing: 0.1em;
}

.text{
	font-weight: 600;
	letter-spacing: 0.025em;
}

.link{
	& ul{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		grid-gap: 16px 24px;
	}
	& li{
		display: contents;
	}
	& a{
		display: grid;
		align-items: center;
		min-width: 224px;
		min-height: 48px;
		padding: 8px 16px;
		border: 1px solid currentColor;
		border-radius: 24px;
		color: inherit;
		font-weight: 800;
		font-size: 14px;
		letter-spacing: 0.1em;
		text-align: center;
		text-decoration: none;
	}
}

.wide{
	position: relative;
	display: grid;
	aspect-ratio: 3 / 2;
	z-index: 1;
	@media (min-width: 1200px) {
		max-height: 400px;
	}
	& dl{
		display: grid;
		grid-template-columns: min(var(--wrap-fit), 864px);
		justify-content: center;
		align-content: center;
		grid-row-gap: clamp(16px, calc(24 / 768 * 100dvw), 24px);
		padding: clamp(24px, calc(48 / 768 * 100dvw), 48px) 0;
		color: white;
		text-shadow: 0 0 5px color-mix(in srgb, transparent, black 50%);
	}
	& dt{
		align-self: end;
		font-weight: 700;
		font-size: clamp(20px, calc(32 / 768 * 100dvw), 32px);
		letter-spacing: 0.1em;
	}
	& dd:not(:has(img)){
		font-weight: 700;
		font-size: clamp(16px, calc(18 / 768 * 100dvw), 18px);
		letter-spacing: 0.1em;
	}
	& dd:has(img){
		display: contents;
		&:after{
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: color-mix(in srgb, transparent, black 25%);
			z-index: -1;
		}
		& img{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			z-index: -1;
		}
	}
}

.medium{
	display: grid;
	grid-template-columns: min(var(--wrap-fit), 864px);
	justify-content: center;
	.mediumSlide{
		display: grid;
		@media (max-width: 575.98px) {
			margin-inline: -24px;
		}
		&:not(.slick-slider){
			& > span,
			& > dl{
				grid-column: 1;
				grid-row: 1;
			}
		}
		&.slick-slider{
			grid-template-columns: auto 1fr auto;
			.slick-list{
				grid-column: 1 / 4;
				grid-row: 1;
			}
			.slick-arrow{
				grid-row: 1;
				align-self: center;
				margin-inline: clamp(16px, calc(24 / 768 * 100dvw), 24px);
				color: white;
			}
			.slick-prev{
				grid-column: 1;
			}
			.slick-next{
				grid-column: 3;
			}
		}
	}
	& h4{
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: baseline;
		column-gap: 0.25em;
		font-weight: 700;
		font-size: clamp(18px, calc(20 / 768 * 100dvw), 20px);
		letter-spacing: 0.1em;
		&:before{
			content: "";
			aspect-ratio: 1;
			width: 1em;
			background: var(--color-theme);
			transform: translateY(0.15em);
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="fill: none; stroke: black; stroke-miterlimit: 10; stroke-width: 2px;"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="5"/></svg>') no-repeat center / contain;
		}
		&:empty{
			display: none;
		}
	}
	& h4+div{
		margin-top: 16px;
	}
	& dl{
		display: grid;
		grid-gap: 16px;
		& dt{
			display: none;
		}
		& dd{
			@media (min-width: 576px) {
				& img{
					border-radius: 8px;
				}
			}
		}
	}
}

.grid{
	display: grid;
	grid-gap: 40px clamp(16px, calc(24 / 768 * 100dvw), 24px);
	@media (max-width: 767.98px) {
		grid-template-columns: repeat(2, 1fr);
		.gridItem:only-child{
			transform: translateX(calc(50% + clamp(8px, calc(12 / 768 * 100dvw), 12px)));
		}
	}
	@media (min-width: 768px) and (max-width: 1199.98px) {
		grid-template-columns: repeat(3, 1fr);
		&:has(.gridItem:last-child:nth-child(1)){
			.gridItem{
				grid-column: 2;
			}
		}
		&:has(.gridItem:last-child:nth-child(2)){
			.gridItem{
				transform: translateX(calc(50% + 12px));
			}
		}
	}
	@media (min-width: 1200px) {
		grid-template-columns: repeat(4, 1fr);
		&:has(.gridItem:last-child:nth-child(1)){
			.gridItem{
				grid-column: 2;
				transform: translateX(calc(50% + 12px));
			}
		}
		&:has(.gridItem:last-child:nth-child(2)){
			&:before{
				content: "";
			}
		}
		&:has(.gridItem:last-child:nth-child(3)){
			.gridItem{
				transform: translateX(calc(50% + 12px));
			}
		}
	}
	.gridItem{
		position: relative;
		display: grid;
		grid-template-columns: calc(100% - 16px);
		justify-content: center;
		align-content: start;
		grid-row-gap: 8px;
	}
	.gridTitle{
		font-weight: 600;
		font-size: 14px;
	}
	.gridText{
		font-weight: 500;
		font-size: 14px;
	}
	.gridPhoto{
		order: -1;
		margin-inline: -8px;
		& img{
			aspect-ratio: 3 / 2;
			object-fit: cover;
			border-radius: 8px;
		}
	}
	.gridLink{
		display: contents;
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
		}
	}
}

.column{
	display: grid;
	grid-row-gap: 16px;
	padding: clamp(24px, calc(40 / 768 * 100dvw), 40px);
	border: 1px solid currentColor;
	border-radius: clamp(16px, calc(32 / 768 * 100dvw), 32px);
	.columnTitle{
		font-weight: 700;
		font-size: 18px;
		letter-spacing: 0.1em;
	}
	.columnText{
		font-weight: 600;
	}
	.columnLink{
		display: flex;
		justify-content: end;
		& a{
			display: grid;
			grid-template-columns: 1fr auto;
			align-items: center;
			column-gap: 8px;
			color: inherit;
			font-weight: 600;
			font-size: 14px;
			letter-spacing: 0.15em;
			text-align: center;
			text-decoration: none;
			&:after{
				content: "";
				aspect-ratio: 1;
				width: 14px;
				background: var(--color-theme);
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><polygon points="0 14 6.5 7 0 0 1.5 0 8 7 1.5 14 0 14"/><polygon points="6 14 12.5 7 6 0 7.5 0 14 7 7.5 14 6 14"/></svg>') no-repeat center / contain;
			}
		}
	}
	.columnPhoto{
		& img{
			aspect-ratio: 3 / 2;
			object-fit: cover;
			border-radius: 8px;
		}
	}
	@media (max-width: 767.98px) {
		.columnLink{
			margin-top: 8px;
		}
		.columnPhoto{
			grid-row: 1;
		}
	}
	@media (min-width: 768px) {
		grid-template-rows: auto 1fr;
		&:has(.columnPhoto){
			grid-template-columns: auto 1fr;
			column-gap: 40px;
			.columnTitle{
				margin-top: 16px;
			}
		}
		.columnLink{
			margin-top: 16px;
		}
		.columnPhoto{
			grid-column: 1;
			grid-row: 1 / 4;
			width: clamp(240px, calc(400 / 1366 * 100dvw), 400px);
		}
	}
}

.map{
	display: grid;
	.mapEmbed,
	.mapApi{
		grid-column: 1;
		grid-row: 1;
	}
	.mapEmbed{
		justify-self: center;
		position: relative;
		display: grid;
		aspect-ratio: 16 / 9;
		width: min(var(--wrap-fit), 864px);
		border-radius: clamp(16px, calc(32 / 768 * 100dvw), 32px);
		transition: opacity 0.2s ease-out;
		overflow: hidden;
		cursor: pointer;
		z-index: 0;
		&.hide{
			opacity: 0;
			pointer-events: none;
		}
		&:after{
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: color-mix(in srgb, transparent, black 30%);
		}
		& iframe{
			position: absolute;
			top: -96px;
			left: -64px;
			width: calc(100% + 128px);
			height: calc(100% + 192px);
		}
		& button{
			align-self: center;
			justify-self: center;
			display: grid;
			align-items: center;
			min-width: 224px;
			min-height: 48px;
			padding: 8px 16px;
			background: var(--color);
			border-radius: 24px;
			color: white;
			font-weight: 800;
			font-size: 14px;
			letter-spacing: 0.1em;
			text-align: center;
			text-decoration: none;
			z-index: 1;
		}
	}
	.mapApi{
		position: relative;
		display: grid;
		@media (max-width: 991.98px) {
			.mapBody{
				height: clamp(480px, calc(560 / 768 * 100dvw), 560px);
			}
			.mapList{
				height: clamp(120px, calc(160 / 768 * 100dvw), 160px);
				border-bottom-width: 1px;
			}
		}
		@media (min-width: 992px) {
			display: grid;
			grid-template-columns: 1fr 360px;
			height: 560px;
			.mapList{
				border-width: 1px 0;
				& ul{
					padding: 40px;
				}
			}
		}
	}
	.mapBody{
		position: relative;
		background: #d9d9d9;
		&:not([data-map]){
			display: grid;
			place-content: center;
			grid-gap: 16px;
			overflow: hidden;
			& i{
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				grid-gap: 8px;
				& img{
					width: 34px;
					height: auto;
				}
			}
		}
		[id^="gMap"]{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
	}
	.mapList{
		position: relative;
		border: 0 solid #d9d9d9;
		& ul{
			counter-reset: count;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			display: grid;
			align-content: start;
			grid-row-gap: clamp(16px, calc(24 / 768 * 100dvw), 24px);
			padding: 24px;
			overflow-y: auto;
			scrollbar-color: var(--color-theme) transparent;
			scrollbar-width: thin;
		}
		& li{
			counter-increment: count;
			display: grid;
			grid-template-columns: auto 1fr;
			align-items: baseline;
			column-gap: 1em;
			color: inherit;
			font-weight: 600;
			letter-spacing: 0.05em;
			text-decoration: none;
			&:before{
				content: counter(count);
				display: grid;
				align-items: center;
				aspect-ratio: 1;
				width: 32px;
				padding-top: 1px;
				background: var(--color-theme);
				border-radius: 100%;
				color: white;
				font-weight: 600;
				font-size: 18px;
				font-family: 'Montserrat', var(--font);
				text-align: center;
			}
		}
	}
}

.movie{
	display: grid;
	.movieTitle{
		margin-top: 16px;
		font-weight: 700;
		font-size: clamp(16px, calc(18 / 768 * 100dvw), 18px);
		letter-spacing: 0.1em;
	}
	.movieText{
		margin-top: 16px;
		font-weight: 600;
		letter-spacing: 0.025em;
		&:first-child{
			margin-top: clamp(32px, calc(48 / 768 * 100dvw), 48px);
		}
	}
	.moviePlayer{
		order: -1;
		& iframe{
			aspect-ratio: 3 / 2;
			width: 100%;
			height: auto;
			border-radius: 8px;
			&.short{
				aspect-ratio: 9 / 16;
				max-width: min(100%, 328px);
			}
		}
	}
}

.comment{
	display: grid;
	grid-row-gap: 16px;
	& dl{
		display: grid;
		grid-template-rows: auto 1fr;
		column-gap: clamp(24px, calc(48 / 768 * 100dvw), 48px);
		width: min(100%, 752px);
		&:not(:has(img)):before{
			content: "";
			aspect-ratio: 1;
			width: clamp(96px, calc(120 / 768 * 100dvw), 120px);
			border-radius: 100%;
			background: var(--dummy);
		}
	}
	& dt{
		grid-row: 2;
		margin-top: 4px;
		font-weight: 600;
		font-size: clamp(10px, calc(12 / 768 * 100dvw), 12px);
		letter-spacing: 0.05em;
		text-align: center;
	}
	& dt+dd{
		align-self: start;
		position: relative;
		margin-top: clamp(16px, calc(24 / 768 * 100dvw), 24px);
		padding: clamp(16px, calc(24 / 768 * 100dvw), 24px);
		width: white;
		border: 1px solid currentColor;
		border-radius: 8px;
		letter-spacing: 0.05em;
		&:before{
			content: "";
			position: absolute;
			top: 24px;
			aspect-ratio: 8 / 14;
			width: 8px;
			background: currentColor url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14" style="fill: white;"><polygon points="8 1.33 1.52 7 8 12.67 8 1.33"/></svg>') no-repeat center right / 8px 14px;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 14"><polyline points="8 1.33 8 0 0 7 8 14 8 14 8 12.67"/></svg>') no-repeat center right / 8px 14px;
		}
	}
	& dd:has(img){
		width: clamp(96px, calc(120 / 768 * 100dvw), 120px);
		& img{
			aspect-ratio: 1;
			border-radius: 100%;
		}
	}
	.commentLeft{
		justify-self: start;
		grid-template-columns: auto 1fr;
		& dt{
			grid-column: 1;
		}
		& dt+dd{
			grid-column: 2;
			grid-row: 1 / 3;
			&:before{
				left: 0;
				transform: translateX(-100%);
			}
		}
	}
	.commentRight{
		justify-self: end;
		grid-template-columns: 1fr auto;
		& dt{
			grid-column: 2;
		}
		& dt+dd{
			grid-column: 1;
			grid-row: 1 / 3;
			&:before{
				right: 0;
				transform: translateX(100%) rotate(180deg);
			}
		}
	}
}

.toggle{
	.toggleItem{
		display: grid;
		&:after,
		.toggleTitle,
		.toggleText{
			width: min(var(--wrap-fit), 864px);
			margin-inline: auto;
		}
		&::details-content{
		}
		&:after{
			content: "";
			border-bottom: 1px solid #d9d9d9;
		}
		.toggleText{
			margin-top: 16px;
		}
		.toggleLink{
			width: min(var(--wrap-fit), 1008px);
			margin: 32px auto 0 auto;
		}
		& summary+div{
			padding-bottom: 32px;
			overflow: hidden;
		}
	}
	.toggleTitle{
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: baseline;
		column-gap: 8px;
		padding: 16px 0;
		font-weight: 700;
		letter-spacing: 0.1em;
		&:before{
			content: "";
			aspect-ratio: 1;
			width: 14px;
			background: var(--color-theme);
			transform: translateY(0.1em);
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" style="fill: none; stroke: black; stroke-linecap: round; stroke-miterlimit: 10; stroke-width: 2px;"><line x1="2" y1="10" x2="18" y2="10"/><line x1="10" y1="2" x2="10" y2="18"/></svg>') no-repeat center / contain;
		}
		[open] &:before{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" style="fill: none; stroke: black; stroke-linecap: round; stroke-miterlimit: 10; stroke-width: 2px;"><line x1="2" y1="10" x2="18" y2="10"/></svg>');
		}
	}
	.toggleText{
		font-weight: 600;
		font-size: 14px;
	}
	.toggleLink{
		display: grid;
		& dl{
			position: relative;
			display: grid;
			min-height: 72px;
			border-radius: 8px;
			overflow: hidden;
			&:has(img){
				& dt{
					background: color-mix(in srgb, transparent, black 20%);
					color: #fff;
					text-shadow: 0 0 5px color-mix(in srgb, transparent, black 50%);
				}
			}
			&:not(:has(img)){
				border: 1px solid #d9d9d9;
			}
		}
		& dt{
			display: grid;
			align-items: center;
			padding: 16px;
			font-weight: 600;
			font-size: 14px;
			pointer-events: none;
			z-index: 1;
		}
		& dd{
			display: contents;
			& img{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
			& a{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				font-size: 0;
			}
		}
		&.slick-slider{
			grid-template-columns: auto 1fr auto;
			column-gap: clamp(16px, calc(24 / 768 * 100dvw), 24px);
			.slick-list{
				margin-inline: -4px;
			}
			.slick-slide{
				width: 210px;
				margin-inline: 4px;
			}
			.slick-arrow{
				align-self: center;
				background: white;
			}
		}
		@media (max-width: 991.98px) {
			&:not(.slick-slider){
				justify-content: center;
				& > dl,
				& > span{
					width: 210px;
					&:nth-child(n+2){
						display: none;
					}
				}
			}
			&.slick-slider{
				.slick-list{
					overflow: visible;
				}
			}
		}
		@media (min-width: 992px) {
			&:not(.slick-slider){
				column-gap: 8px;
			}
		}
		@media (min-width: 992px) and (max-width: 1365.98px) {
			&:not(.slick-slider){
				grid-template-columns: repeat(3, 1fr);
				& > dl,
				& > span{
					&:nth-child(n+4){
						display: none;
					}
				}
			}
		}
		@media (min-width: 1366px) {
			&:not(.slick-slider){
				grid-template-columns: repeat(4, 1fr);
				& > dl,
				& > span{
					&:nth-child(n+5){
						display: none;
					}
				}
			}
		}
	}
}

.slick-arrow{
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	position: relative;
	aspect-ratio: 1;
	width: clamp(40px, calc(48 / 768 * 100dvw), 48px);
	border: 1px solid currentColor;
	border-radius: 100%;
	color: #9c9c9c;
	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 24 24" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><line x1="4.83" y1="11.93" x2="19.17" y2="11.93"/><polyline points="13.3 6.14 19.17 12 13.3 17.86"/></svg>') no-repeat center / 50%;
	}
	&.slick-prev:before{
		transform: scale(-1, 1);
	}
}