/* CSS Document */

#main{
	margin-bottom: clamp(24px, calc(56 / 1200 * 100dvw), 56px);
	@media (max-width: 767.98px) {
		&:has(#rankingFix){
			margin-bottom: 0px;
		}
		#rankingFix{
			margin-top: clamp(24px, calc(56 / 1200 * 100dvw), 56px);
		}
	}
}

#outlineFix{
	position: fixed;
	top: clamp(56px, calc(64 / 768 * 100dvw), 64px);
	left: 0;
	width: 100%;
	background: #fff;
	border-top: clamp(2px, calc(4 / 768 * 100dvw), 4px) solid var(--color-theme);
	border-bottom: 1px solid #a9a9a9;
	transition: transform 0.2s ease-out;
	z-index: 10;
	&:not(.fix){
		transform: translateY(-100%);
	}
	[lsc-lb="List"]{
		display: none;
	}
	& h3{
		display: none;
	}
	& summary{
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;
		column-gap: 0.5em;
		min-height: 48px;
		padding: 0.25em 1em;
		color: var(--color-theme);
		font-weight: 700;
		letter-spacing: 0.05em;
		&:before{
			content: "";
			aspect-ratio: 1;
			width: 16px;
			background: currentColor;
			transform: translateY(5%);
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M48 144a48 48 0 1 0 0-96 48 48 0 1 0 0 96zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L192 64zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zM48 464a48 48 0 1 0 0-96 48 48 0 1 0 0 96zM96 256a48 48 0 1 0 -96 0 48 48 0 1 0 96 0z"/></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 384 512"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M55.1 73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L147.2 256 9.9 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192.5 301.3 329.9 438.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.8 256 375.1 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192.5 210.7 55.1 73.4z"/></svg>');
		}
	}
	& summary+div{
		border-top: 1px solid #a9a9a9;
		padding: 16px;
	}
	& ul{
		display: grid;
		grid-row-gap: 4px;
	}
	& a{
		display: block;
		color: inherit;
		text-decoration: none;
		.active &{
			color: var(--color-theme);
			font-weight: 500;
		}
	}
	@media (min-width: 1200px) {
		display: none;
	}
}

#detail{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	#title{
		grid-column: 1 / 4;
	}
	#article{
		grid-column: 2;
		margin-top: clamp(24px, calc(56 / 1200 * 100dvw), 56px);
	}
	#side{
		grid-column: 2;
		margin-top: clamp(24px, calc(56 / 1200 * 100dvw), 56px);
		&:not(:has(div)){
			display: none;
		}
	}
	@media (max-width: 1199.98px) {
		overflow: hidden;
		#side{
			#outline{
				display: none;
			}
		}
	}
	@media (min-width: 1200px) {
		&:has(#side div){
			grid-template-columns: 1fr calc(var(--wrap) - (320px + 32px)) calc(320px + 32px) 1fr;
			align-items: start;
			#title{
				grid-column: 1 / 5;
				#outline{
					display: none;
				}
			}
			#side{
				grid-column: 3;
				justify-self: end;
				position: sticky;
				top: 24px;
				display: grid;
				grid-row-gap: 32px;
				width: 320px;
				margin-top: clamp(24px, calc(56 / 1200 * 100dvw), 56px);
			}
		}
	}
}

#title{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	padding-bottom: clamp(24px, calc(56 / 1200 * 100dvw), 56px);
	&:has(#profile) h2:before{
		-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M5.16,10.32c1.14,0,2.06.92,2.06,2.06v16.52c0,1.14-.92,2.06-2.06,2.06h-3.1c-1.14,0-2.06-.92-2.06-2.06V12.39c0-1.14.92-2.06,2.06-2.06h3.1ZM17.46,1.03c1.76,0,3.19,1.43,3.19,3.19v.27c0,.44-.08.88-.25,1.28l-1.82,4.55h10.32c1.71,0,3.1,1.39,3.1,3.1,0,1.27-.77,2.36-1.86,2.84,1.1.48,1.86,1.57,1.86,2.84,0,1.51-1.08,2.77-2.52,3.04.28.47.45,1.02.45,1.61,0,1.43-.97,2.63-2.28,2.99.14.35.22.74.22,1.14,0,1.71-1.39,3.1-3.1,3.1h-5.67c-2.34,0-4.62-.8-6.45-2.26l-.79-.63c-.98-.78-1.55-1.97-1.55-3.23v-12.04c0-.96.23-1.91.65-2.77l3.63-7.25c.54-1.08,1.65-1.76,2.86-1.76Z"/></svg>');
	}
	&>*{
		grid-column: 2;
	}
	&:before{
		content: "";
		grid-column: 1 / 4;
		grid-row: 1;
		background: var(--color-theme) url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1366 400"><path fill="white" opacity="0.1" d="M1366,23.59c-49.72-11.77-99.48-14.67-129.8-13.61-72.45,2.53-178.28,33.01-293.37,99-115.09,66-225.53,101.23-331.84,117.95-106.31,16.72-223.2,3.97-276.26-12.54s-163.7-59.58-216.27-89.37C118.46,125.02,65.87,92.63,0,85.07v262.08c42.97,5.38,91.05,1.56,142.21-15.86,145.25-49.45,176.76-76.57,288.31-79.7,111.56-3.13,200.19,20.55,289.72,42.68,89.53,22.12,389.57,114.18,563.27,86.69,29.99-4.75,57.55-11.84,82.48-20.89V23.59Z"/></svg>') no-repeat center -24px / max(640px, 100%) clamp(240px, calc(400 / 1200 * 100dvw), 400px);
	}
	&:after{
		content: "";
		grid-column: 1 / 4;
		grid-row: 3 / 7;
		margin-bottom: calc(0px - clamp(24px, calc(56 / 1200 * 100dvw), 56px));
		background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 390"><path fill="white" opacity="0.1" d="M267.64,329.57c-26.56,10.26-51.2,13.55-75.39,15.7-24.19,2.15-39.77-1.93-51.6-5.14-12.12-3.29-35.89-11.6-48.57-16.56,0,0-11.94-5.46-27.36-6.9-36.65-3.43-48.68,11.38-38.09,23.16,10.58,11.78,36.97,20.36,70.62,15.07,33.37-5.25,36.29-5.89,59.41-4.81,25.63,1.21,36.91,5.95,57.72,11.43,19.61,5.17,55.64,21.38,95.17,17.83,16.67-1.5,35.2-5.7,50.46-11.63v-50.61c-6.38-.91-12.73-1.13-18.07-1.13-16.41,0-47.73,3.32-74.29,13.58ZM322.15,267.87c-27.86-2.34-54.63-7.55-86.85-17.04-31.24-9.21-65.91-15.89-84.81-15.89s-53.6,2.16-57.48,23.03c-4.2,22.63,43.71,43.52,94.03,46.91,45.59,3.07,86.71-16.12,109.3-21.73,23.09-5.73,36.32-8.52,63.65-9.89v-6.46c-10.24,1.54-22.54,2.36-37.85,1.07ZM316.85,19.34c-30.02,17.21-58.82,26.4-86.55,30.76s-58.22,1.04-72.06-3.27-42.7-15.54-56.41-23.31c0,0-14.47-8.91-32.3-10.57C27.14,9.03,13.06,38.33,25.89,56.44c12.83,18.11,44.25,33.78,82.13,20.88s46.1-19.97,75.2-20.79,52.22,5.36,75.57,11.13c16.56,4.09,60.75,17.36,101.21,22.17V0c-13.2,4.22-27.86,10.57-43.15,19.34ZM274.96,100.55c-29.6-13.56-64.49-17.95-82.78-17.95s-48.45,2.29-54.85,26.65c-7.28,27.7,46.91,52.43,90.94,57.12,44.03,4.69,83.87-19.63,105.72-26.46,9.87-3.08,17.87-5.53,26.01-7.42v-11.1c-.35-.03-.69-.05-1.05-.09-26.95-2.85-54.4-7.19-84-20.75ZM211.72,197.06c-25.88,2.17-42.5-2.12-55.21-5.18-12.71-3.06-35.95-10.86-51.61-16.17,0,0-17.43-5.95-29.64-7.48-39.06-4.89-52.08,11.48-40.76,23.35,11.32,11.88,39.6,20.46,75.56,15.2,35.2-5.15,38.82-5.94,63.56-4.85,27.42,1.22,39.8,3.8,62.06,9.32,20.98,5.21,59.23,23.76,101.52,20.18,7.46-.63,15.17-1.66,22.8-3.06v-60.43c-18.5,1.16-44.71,4.95-67.62,13.29-28.42,10.34-54.78,13.66-80.66,15.83Z"/></svg>') no-repeat right top / min(45%, 360px) auto, url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 390"><path fill="white" opacity="0.1" d="M124.31,211.25c22.26-5.53,34.64-8.11,62.06-9.32,24.74-1.1,28.36-.3,63.56,4.85,35.96,5.26,64.24-3.32,75.56-15.2,11.32-11.88-1.7-28.24-40.76-23.35-12.21,1.53-29.64,7.48-29.64,7.48-15.65,5.32-38.9,13.11-51.61,16.17-12.71,3.06-29.33,7.35-55.21,5.18-25.88-2.17-52.24-5.49-80.66-15.83-22.91-8.34-49.12-12.13-67.62-13.29v60.43c7.62,1.4,15.34,2.43,22.8,3.06,42.29,3.58,80.54-14.97,101.52-20.18ZM131.72,166.37c44.03-4.69,98.22-29.42,90.94-57.12-6.4-24.36-36.56-26.65-54.85-26.65s-53.18,4.39-82.78,17.95S28,118.46,1.05,121.3c-.36.04-.69.06-1.05.09v11.1c8.14,1.89,16.14,4.33,26.01,7.42,21.85,6.83,61.68,31.15,105.72,26.46ZM176.77,56.54c29.1.82,37.31,7.89,75.2,20.79,37.89,12.9,69.3-2.77,82.13-20.88,12.83-18.11-1.25-47.42-43.64-43.49-17.83,1.65-32.3,10.57-32.3,10.57-13.71,7.77-42.57,19-56.41,23.31s-44.33,7.63-72.06,3.27c-27.73-4.36-56.53-13.55-86.55-30.76C27.86,10.57,13.2,4.22,0,0v89.84c40.46-4.81,84.64-18.08,101.21-22.17,23.35-5.77,46.47-11.95,75.57-11.13ZM172.96,304.88c50.31-3.39,98.23-24.27,94.03-46.91-3.88-20.87-38.57-23.03-57.48-23.03s-53.58,6.68-84.81,15.89c-32.21,9.5-58.98,14.71-86.85,17.04-15.31,1.28-27.6.47-37.85-1.07v6.46c27.34,1.37,40.56,4.15,63.65,9.89,22.59,5.61,63.71,24.8,109.3,21.73ZM295.28,316.67c-15.42,1.44-27.36,6.9-27.36,6.9-12.68,4.96-36.45,13.27-48.57,16.56-11.83,3.21-27.41,7.29-51.6,5.14-24.19-2.15-48.82-5.44-75.39-15.7-26.56-10.26-57.88-13.58-74.29-13.58-5.34,0-11.69.22-18.07,1.13v50.61c15.26,5.93,33.79,10.14,50.46,11.63,39.52,3.55,75.56-12.67,95.17-17.83,20.81-5.48,32.09-10.23,57.72-11.43,23.12-1.09,26.04-.44,59.4,4.81,33.65,5.29,60.04-3.29,70.62-15.07,10.58-11.78-1.44-26.6-38.09-23.16Z"/></svg>') no-repeat left bottom / min(45%, 360px) auto, #d3e3f2;
		z-index: -1;
	}
	& h2{
		grid-row: 1;
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 0.5em;
		margin: clamp(24px, calc(32 / 1200 * 100dvw), 32px) 0;
		color: #fff;
		font-weight: 700;
		font-size: clamp(24px, calc(32 / 768 * 100dvw), 32px);
		&:before{
			content: "";
			aspect-ratio: 1;
			width: 1em;
			background: currentColor;
			transform: translateY(calc(0.875em - 50%));
			-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.68,1.43c.68-.78,1.86-.86,2.65-.18l11.29,9.87c.78.68.86,1.86.18,2.65s-1.86.86-2.65.18l-1.3-1.14-4.72,6.31c.82,2.37.73,5.02-.39,7.41l-.35.74c-.25.54-.74.91-1.31,1.04-.58.13-1.18-.04-1.62-.43L4.34,15.55c-.44-.39-.68-.96-.64-1.54s.36-1.12.85-1.44l.68-.45c2.22-1.43,4.84-1.88,7.29-1.38l5.62-5.52-1.3-1.14c-.78-.68-.86-1.86-.18-2.65ZM8.14,22.6l2.82,2.47-4.32,4.94c-.68.78-1.86.86-2.65.18s-.86-1.86-.18-2.65l4.32-4.94Z"/></svg>') no-repeat center / contain;
		}
	}
	& h2+div{
		grid-row: 5;
		justify-self: center;
		width: min(100%, 720px);
		margin-top: clamp(24px, calc(48 / 1200 * 100dvw), 48px);
		font-weight: 500;
	}
	#photo{
		grid-column: 1 / 4;
		grid-row: 2;
		& img{
			aspect-ratio: 2 / 1;
			object-fit: cover;
		}
	}
	#date{
		grid-column: 1 / 4;
		grid-row: 3;
		margin: 16px;
	}
	#profile{
		grid-row: 4;
		justify-self: center;
		width: min(100%, 720px);
		margin-top: clamp(24px, calc(48 / 1200 * 100dvw), 48px);
	}
	#outline{
		grid-row: 6;
		justify-self: center;
		width: min(100%, 720px);
		margin-top: clamp(24px, calc(56 / 1200 * 100dvw), 56px);
		background: #fff;
	}
}

#date{
	& dl{
		font-weight: 500;
		font-size: clamp(12px, calc(14 / 768 * 100dvw), 14px);
	}
	& dt{
		padding: 0 0.5em;
		background: #fff;
		border-radius: 5px;
		text-align: center;
	}
	@media (max-width: 575.98px) {
		& dl{
			display: grid;
			grid-template-columns: auto auto;
			justify-content: end;
			grid-gap: 8px;
		}
	}
	@media (min-width: 576px) {
		& dl{
			display: flex;
			justify-content: flex-end;
			column-gap: 0.5em;
		}
		& dt:nth-of-type(n+2){
			margin-left: 0.5em;
		}
	}
}

#profile{
	display: grid;
	align-items: start;
	grid-gap: clamp(16px, calc(32 / 1200 * 100dvw), 32px);
	padding: clamp(16px, calc(32 / 1200 * 100dvw), 32px);
	background: #fff;
	border: 1px solid var(--color-theme);
	border-radius: 10px;
	@media (min-width: 576px) {
		grid-template-columns: auto 1fr;
	}
	& div{
		display: grid;
		grid-row-gap: 8px;
		& dl{
			order: -1;
		}
	}
	& p{
		font-weight: 500;
	}
	& dl{
		display: grid;
		grid-template-columns: auto 1fr;
		justify-content: end;
		align-items: center;
		grid-gap: 0 16px;
		font-size: clamp(14px, calc(16 / 768 * 100dvw), 16px);
	}
	& dt{
		align-self: start;
		display: grid;
		grid-template-columns: auto auto;
		justify-content: center;
		align-items: center;
		min-height: 32px;
		padding: 0 1em;
		border: 1px solid var(--color-theme);
		border-radius: 16px;
		font-weight: 700;
		&:before{
			content: "";
			aspect-ratio: 1;
			height: 1em;
			background: var(--color-theme);
			transform: translateX(-0.5em);
			-webkit-mask: 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 / contain;
		}
		&[data-icon="por"]:before{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M2.04,5.86C2.04,2.62,4.71,0,8,0s5.97,2.62,5.97,5.86c0,3.71-3.73,8.15-5.29,9.84-.37.4-.98.4-1.35,0-1.56-1.69-5.29-6.14-5.29-9.84h0ZM8,7.95c1.1,0,1.99-.89,1.99-1.99s-.89-1.99-1.99-1.99-1.99.89-1.99,1.99.89,1.99,1.99,1.99Z"/></svg>');
		}
		&[data-icon="fav"]:before{
			aspect-ratio: 19 / 16;
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19 16"><path d="M8.96,1.97l.54.74.54-.74c.89-1.24,2.33-1.97,3.85-1.97,2.63,0,4.75,2.13,4.75,4.75v.09c0,4.01-5,8.66-7.6,10.65-.44.34-.99.5-1.54.5s-1.1-.16-1.54-.5C5.35,13.51.36,8.85.36,4.85v-.09C.36,2.13,2.49,0,5.11,0c1.52,0,2.96.73,3.85,1.97Z"/></svg>');
		}
	}
	& dd{
		display: contents;
		font-weight: 500;
		&:after{
			content: "";
			grid-column: 1 / 3;
			margin: 8px 0;
			border-bottom: 2px dotted var(--color-theme);
		}
	}
	& figure{
		order: -1;
		display: grid;
		grid-row-gap: 8px;
		& img{
			aspect-ratio: 1;
			object-fit: cover;
			border-radius: 100%;
		}
		& figcaption{
			color: var(--color-theme);
			font-weight: 700;
			font-size: clamp(16px, calc(18 / 768 * 100dvw), 18px);
			text-align: center;
		}
		@media (max-width: 575.98px) {
			justify-items: center;
			& img{
				width: 160px;
			}
		}
		@media (min-width: 576px) {
			width: clamp(160px, calc(200 / 1200 * 100dvw), 200px);
		}
	}
}

#article{
	display: grid;
	& section{
		&:nth-child(n+2){
			margin-top: clamp(48px, calc(80 / 1200 * 100dvw), 80px);
		}
	}
	.photo,
	.text,
	.documents,
	.article,
	.column:not(:first-child),
	.columnPhoto,
	.comment{
		margin-top: clamp(24px, calc(32 / 1200 * 100dvw), 32px);
	}
	.movie,
	.movie2,
	.links,
	.map{
		margin-top: clamp(16px, calc(24 / 1200 * 100dvw), 24px);
	}
	.articleSlide{
		margin-top: clamp(32px, calc(40 / 1200 * 100dvw), 40px);
	}
	[lsc-lt="List"]{
		display: none;
	}
}

#share{
	display: grid;
	justify-content: center;
	grid-row-gap: 16px;
	margin-top: clamp(24px, calc(56 / 1200 * 100dvw), 56px);
	& h3{
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		column-gap: 8px;
		font-weight: 700;
		text-transform: uppercase;
		&:before,
		&:after{
			content: "";
			border-bottom: 1px solid currentColor;
		}
	}
	& ul{
		display: flex;
		align-items: center;
		justify-content: center;
		column-gap: 24px;
		padding-bottom: 5px;
		filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.2));
	}
	& li{
		display: contents;
	}
	& a{
		display: block;
		aspect-ratio: 1;
		width: clamp(40px, calc(48 / 768 * 100vw), 48px);
		background: currentColor;
		border-radius: 100%;
		font-size: 0;
		&[href*="instagram.com"]{
			position: relative;
			background: #fff;
			&:before{
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				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;
				transform: scale(0.65);
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="white"><path d="M47.86,14.1c-.12-2.55-.52-4.3-1.12-5.83-.61-1.58-1.43-2.92-2.77-4.25-1.33-1.33-2.67-2.15-4.25-2.77-1.53-.59-3.27-1-5.83-1.12-2.56-.12-3.38-.14-9.9-.14s-7.34.03-9.9.14c-2.55.12-4.3.52-5.83,1.12-1.58.61-2.92,1.43-4.25,2.77-1.33,1.33-2.16,2.67-2.77,4.25-.59,1.53-1,3.27-1.12,5.83-.12,2.56-.14,3.38-.14,9.9s.03,7.34.14,9.9c.12,2.55.52,4.3,1.12,5.83.61,1.58,1.43,2.92,2.77,4.25,1.33,1.33,2.67,2.15,4.25,2.77,1.53.59,3.27,1,5.83,1.12,2.56.12,3.38.14,9.9.14s7.34-.03,9.9-.14c2.55-.12,4.3-.52,5.83-1.12,1.58-.61,2.92-1.43,4.25-2.77,1.33-1.33,2.15-2.67,2.77-4.25.59-1.53,1-3.27,1.12-5.83.12-2.56.14-3.38.14-9.9s-.03-7.34-.14-9.9ZM43.54,33.7c-.11,2.34-.5,3.61-.83,4.46-.44,1.12-.96,1.92-1.79,2.76-.84.84-1.64,1.36-2.76,1.79-.85.33-2.12.72-4.46.83-2.53.12-3.29.14-9.7.14s-7.17-.02-9.7-.14c-2.34-.11-3.61-.5-4.46-.83-1.12-.44-1.92-.96-2.76-1.79-.84-.84-1.36-1.64-1.79-2.76-.33-.85-.72-2.12-.83-4.46-.12-2.53-.14-3.29-.14-9.7s.02-7.17.14-9.7c.11-2.34.5-3.61.83-4.46.44-1.12.96-1.92,1.79-2.76.84-.84,1.64-1.36,2.76-1.79.85-.33,2.12-.72,4.46-.83,2.53-.11,3.29-.14,9.7-.14s7.17.02,9.7.14c2.34.11,3.61.5,4.46.83,1.12.44,1.92.96,2.76,1.79.84.84,1.36,1.64,1.79,2.76.33.85.72,2.12.83,4.46.12,2.53.14,3.29.14,9.7s-.02,7.17-.14,9.7ZM24,11.68c-6.81,0-12.32,5.52-12.32,12.32s5.52,12.32,12.32,12.32,12.32-5.52,12.32-12.32-5.52-12.32-12.32-12.32ZM24,32c-4.42,0-8-3.58-8-8s3.58-8,8-8,8,3.58,8,8-3.58,8-8,8ZM36.81,8.31c-1.59,0-2.88,1.29-2.88,2.88s1.29,2.88,2.88,2.88,2.88-1.29,2.88-2.88-1.29-2.88-2.88-2.88Z"/></svg>') no-repeat center / contain;
			}
		}
		&[href*="line.me"]{
			background: #74c36f url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="white"><path d="M48,20.61c0-10.74-10.77-19.48-24-19.48S0,9.87,0,20.61c0,9.63,8.54,17.69,20.07,19.22.78.17,1.85.52,2.11,1.18.24.61.16,1.56.08,2.17,0,0-.28,1.69-.34,2.05-.1.61-.48,2.37,2.08,1.29,2.56-1.08,13.82-8.14,18.86-13.93h0c3.48-3.81,5.14-7.69,5.14-11.98ZM15.53,26.35c0,.25-.21.46-.46.46h-6.74c-.25,0-.46-.21-.46-.46h0v-10.47c0-.25.21-.46.46-.46h1.7c.25,0,.46.21.46.46v8.31h4.58c.25,0,.46.21.46.46v1.7ZM19.59,26.35c0,.25-.21.46-.46.46h-1.7c-.25,0-.46-.21-.46-.46v-10.47c0-.25.21-.46.46-.46h1.7c.25,0,.46.21.46.46v10.47ZM31.18,26.35c0,.25-.21.46-.46.46h-1.69s-.08,0-.12-.02c0,0,0,0,0,0-.01,0-.02,0-.03-.01,0,0,0,0-.01,0,0,0-.02,0-.02,0s-.01,0-.02-.01c0,0,0,0-.01,0,0,0-.02-.01-.03-.02,0,0,0,0,0,0-.04-.03-.09-.07-.12-.12l-4.8-6.48v6.22c0,.25-.21.46-.46.46h-1.7c-.25,0-.46-.21-.46-.46v-10.47c0-.25.21-.46.46-.46h1.69s.01,0,.02,0c0,0,.02,0,.02,0,0,0,.02,0,.02,0,0,0,.01,0,.02,0,0,0,.02,0,.03,0,0,0,.01,0,.02,0,0,0,.02,0,.03,0,0,0,0,0,.01,0,0,0,.02,0,.03.01,0,0,0,0,.01,0,0,0,.02,0,.03.01,0,0,0,0,.01,0,0,0,.02.01.02.02,0,0,0,0,.01,0,0,0,.02.01.02.02,0,0,0,0,0,0,0,0,.02.02.03.03,0,0,0,0,0,0,.01.02.03.03.04.05l4.79,6.47v-6.22c0-.25.21-.46.46-.46h1.7c.25,0,.46.21.46.46v10.47ZM40.47,17.58c0,.25-.21.46-.46.46h-4.58v1.77h4.58c.25,0,.46.21.46.46v1.7c0,.25-.21.46-.46.46h-4.58v1.77h4.58c.25,0,.46.21.46.46v1.7c0,.25-.21.46-.46.46h-6.74c-.25,0-.46-.21-.46-.46h0v-10.46h0c0-.26.21-.47.46-.47h6.74c.25,0,.46.21.46.46v1.7Z"/></svg>') no-repeat center / 65%;
		}
		&[href*="x.com"]{
			background: #fff url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="black"><path d="M28.47,20.32L45.95,0h-4.14l-15.18,17.65L14.5,0H.52l18.34,26.69L.52,48h4.14l16.03-18.64,12.81,18.64h13.99l-19.02-27.68h0ZM22.79,26.92l-1.86-2.66L6.15,3.12h6.36l11.93,17.06,1.86,2.66,15.51,22.18h-6.36l-12.65-18.1h0Z"/></svg>') no-repeat center / 60%;
		}
		&[href*="facebook.com"]{
			background: #3b598c url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="white"><path d="M27.83,48v-16.82c1.62,0,5.65-.12,5.65-.12l.91-6.81h-6.55s.04-3.63.04-5.55c.15-1.59,1.17-2.41,2.7-2.56,1.17-.1,3.93-.27,3.93-.27v-6.19s-6.22-.67-9.12.51c-3.46,1.41-4.9,4.26-5.08,7.84-.09,1.72-.02,3.46-.03,5.2v.99c-1.72,0-4.98-.02-4.98-.02h-1.14l.03,6.99h6.06v16.81h7.57Z"/></svg>') no-repeat center bottom / 95%;
		}
	}
}

#side{
	@media (min-width: 1200px) {
		padding-bottom: 24px;
		overflow-y: auto;
	}
}

#outline{
	border: 1px solid var(--color-theme);
	border-radius: 10px;
	overflow: hidden;
	[lsc-lb="List"]{
		display: none;
	}
	& h3{
		margin: 0 16px;
		padding: 8px 0;
		color: var(--color-theme);
		font-weight: 700;
		font-size: clamp(16px, calc(20 / 768 * 100dvw), 20px);
		letter-spacing: 0.05em;
		text-align: center;
		border-bottom: 2px dotted currentColor;
	}
	& details{
		display: grid;
		&::details-content{
			all: unset;
		}
		& summary{
			order: 1;
		}
		&:not(:has(li:nth-child(6))) summary{
			display: none;
		}
	}
	& summary{
		display: grid;
		grid-template-columns: auto auto;
		justify-content: center;
		align-items: center;
		column-gap: 0.5em;
		min-height: 48px;
		padding: 0.25em 1em;
		background: var(--color-theme);
		color: #fff;
		font-weight: 700;
		font-size: clamp(16px, calc(18 / 768 * 100dvw), 18px);
		letter-spacing: 0.05em;
		cursor: pointer;
		&:after{
			content: "";
			aspect-ratio: 1;
			width: 12px;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" style="fill: none; stroke: black;"><polyline points="11 3.5 6 8.5 1 3.5"/></svg>') no-repeat center / contain;
		}
		[open] &:after{
			transform: scale(1, -1);
		}
	}
	& ul{
		display: grid;
		grid-row-gap: 8px;
		& span{
			display: grid;
			grid-row-gap: 8px;
		}
	}
	& a{
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 1em;
		color: inherit;
		font-weight: 500;
		text-decoration: none;
		&:before{
			content: "";
			width: 2px;
			height: 1em;
			background: var(--color-theme);
			transform: translateY(calc(0.875em - 50%));
		}
		.active &{
			color: var(--color-theme);
		}
	}
	@media (max-width: 1199.98px) {
		& details{
			margin-top: 8px;
			&:not([open]) li:nth-child(n+6){
				display: none;
			}
			& summary{
				margin-top: 16px;
			}
		}
		& ul{
			padding: 0 16px;
			&:not(:has(li:nth-child(6))){
				padding-bottom: 16px;
			}
		}
	}
	@media (min-width: 1200px) {
		& ul{
			padding: 16px;
			overflow-y: auto;
			[open] &{
				max-height: unset!important;
			}
		}
	}
}

#ranking{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 8px;
	border: 1px solid var(--color-theme);
	border-radius: 10px;
	overflow: hidden;
	& h3{
		grid-column: 1 / 3;
		display: grid;
		grid-template-columns: auto auto;
		justify-content: center;
		align-items: center;
		column-gap: 0.5em;
		padding: 8px 16px;
		color: var(--color-theme);
		font-weight: 700;
		font-size: clamp(16px, calc(20 / 768 * 100dvw), 20px);
		letter-spacing: 0.05em;
		&:before{
			content: "";
			aspect-ratio: 24 / 20;
			height: 1em;
			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 24 20"><path d="M13.25,10h-2.5c-1.04,0-1.87.84-1.87,1.87v6.25c0,1.04.84,1.87,1.87,1.87h2.5c1.04,0,1.87-.84,1.87-1.87v-6.25c0-1.04-.84-1.87-1.87-1.87ZM5.13,12.5h-2.5c-1.04,0-1.87.84-1.87,1.87v3.75c0,1.04.84,1.87,1.87,1.87h2.5c1.04,0,1.87-.84,1.87-1.87v-3.75c0-1.04-.84-1.87-1.87-1.87ZM15.37,2.41l-2.04-.29h0l-.92-1.87c-.15-.32-.63-.34-.8,0l-.92,1.87-2.04.29c-.36.05-.52.5-.25.77l1.48,1.45-.35,2.03c-.05.36.32.64.66.48l1.83-.97,1.82.95c.34.17.71-.11.66-.48l-.35-2.03,1.48-1.43c.27-.27.11-.71-.25-.77ZM21.37,15h-2.5c-1.04,0-1.87.84-1.87,1.87v1.25c0,1.04.84,1.87,1.87,1.87h2.5c1.04,0,1.87-.84,1.87-1.87v-1.25c0-1.04-.84-1.87-1.87-1.87Z"/></svg>') no-repeat center / contain;
		}
	}
	& details{
		display: contents;
		&::details-content{
			grid-column: 1 / 3;
			grid-row: 3;
		}
		&[open]::details-content{
			z-index: 1;
		}
		&:nth-of-type(1) summary{
			margin-left: 16px;
		}
		&:nth-of-type(2) summary{
			margin-right: 16px;
		}
		&:not(:has(dl:nth-child(4))){
			& button{
				display: none;
			}
		}
	}
	& summary{
		display: grid;
		align-items: center;
		text-align: center;
		min-height: 48px;
		padding: 0.25em 0.5em;
		background: #e8e8e8;
		border-radius: 2px 2px 0 0;
		font-weight: 700;
		font-size: clamp(14px, calc(18 / 768 * 100dvw), 18px);
		letter-spacing: 0.05em;
		[open] &{
			background: #d3e3f2;
			pointer-events: none;
		}
	}
	& summary+div{
		padding: 0 16px;
		max-height: 337px;
		background: #d3e3f2;
		overflow-y: auto;
	}
	& dl{
		position: relative;
		display: grid;
		grid-template-columns: 120px 1fr;
		align-items: center;
		column-gap: 16px;
		padding: 16px 0;
		&:not(:has(img)):before{
			content: "";
			aspect-ratio: 3 / 2;
			background: var(--dummy);
			border-radius: 10px;
		}
		&:nth-child(n+2){
			border-top: 1px solid #fff;
		}
	}
	& dt{
		font-weight: 500;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		max-height: calc(1.65em * 3);
		overflow: hidden;
	}
	& dd{
		&:has(img){
			order: -1;
		}
		&:has(a){
			display: contents;
		}
		& img{
			aspect-ratio: 3 / 2;
			object-fit: cover;
			border-radius: 10px;
		}
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
		}
	}
	& button{
		all: unset;
		box-sizing: border-box;
		cursor: pointer;
		display: grid;
		align-items: center;
		width: 100%;
		min-height: 48px;
		padding: 0.25em 1em;
		background: var(--color-theme);
		color: #fff;
		font-weight: 700;
		font-size: clamp(16px, calc(18 / 768 * 100dvw), 18px);
		letter-spacing: 0.05em;
		text-align: center;
	}
}

#recommend{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	grid-row-gap: clamp(40px, calc(56 / 1200 * 100dvw), 56px);
	margin-top: clamp(40px, calc(56 / 1200 * 100dvw), 56px);
	overflow: hidden;
	& h2{
		display: grid;
		grid-row-gap: 0.5em;
		padding: 0 1em;
		color: inherit;
		font-weight: 700;
		font-size: clamp(18px, calc(22 / 768 * 100dvw), 22px);
		text-decoration: none;
		&:before,
		&:after{
			content: "";
			height: 8px;
			margin: 0 -1em;
			color: var(--color-theme);
		}
		&:before{
			border-top: 1px solid currentColor;
			border-bottom: 2px dotted currentColor;
		}
		&:after{
			border-top: 2px dotted currentColor;
			border-bottom: 1px solid currentColor;
		}
	}
	& h2+div{
		display: grid;
		margin-top: clamp(24px, calc(32 / 1200 * 100dvw), 32px);
		&:not(.slick-initialized){
			grid-template-columns: repeat(auto-fill, minmax(min(calc(50% - 24px), 248px), 1fr));
			grid-gap: clamp(24px, calc(32 / 1200 * 100dvw), 32px) 16px;
		}
	}
	& section{
		position: relative;
		display: grid;
		align-content: start;
		grid-row-gap: 8px;
		&:not(:has(img)):before{
			content: "";
			aspect-ratio: 1 / 0.75;
			background: var(--dummy);
			border-radius: 10px;
		}
	}
	& h3{
		font-weight: 700;
		font-size: clamp(16px, calc(18 / 768 * 100dvw), 18px);
	}
	& h3+div{
		display: contents;
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
		}
	}
	& figure{
		order: -1;
		& img{
			aspect-ratio: 1 / 0.75;
			object-fit: cover;
			border-radius: 10px;
		}
	}
	.slick-slider{
		grid-template-columns: auto 1fr auto;
		align-items: center;
		&:before{
			content: "";
			grid-column: 2;
			grid-row: 1;
			aspect-ratio: 1 / 0.75;
			width: calc(100% - 16px);
		}
		@media (min-width: 768px) {
			&:before{
				width: calc((100% - 16px) / 2);
			}
		}
		@media (min-width: 992px) {
			&:before{
				width: calc((100% - 32px) / 3);
			}
		}
		@media (min-width: 1200px) {
			&:before{
				width: calc((100% - 48px) / 4);
			}
		}
	}
	.slick-list{
		grid-column: 2;
		grid-row: 1 / 3;
		@media (max-width: 1199.98px) {
			overflow: visible;
		}
	}
	.slick-slide{
		margin: 0 8px;
	}
	.slick-arrow{
		width: 32px;
	}
}

#rankingFix{
	position: sticky;
	bottom: 80px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 8px;
	background: #fff;
	border: 1px solid var(--color-theme);
	border-radius: 10px 10px 0 0;
	overflow: hidden;
	z-index: 100;
	&:not(.open){
		& details{
			display: none;
		}
	}
	@media (min-width: 768px) {
		display: none;
	}
	& h3{
		grid-column: 1 / 3;
		display: grid;
		grid-template-columns: auto auto;
		justify-content: center;
		align-items: center;
		column-gap: 0.5em;
		padding: 8px 16px;
		color: var(--color-theme);
		font-weight: 700;
		font-size: clamp(16px, calc(20 / 768 * 100dvw), 20px);
		letter-spacing: 0.05em;
		&:before{
			content: "";
			aspect-ratio: 24 / 20;
			height: 1em;
			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 24 20"><path d="M13.25,10h-2.5c-1.04,0-1.87.84-1.87,1.87v6.25c0,1.04.84,1.87,1.87,1.87h2.5c1.04,0,1.87-.84,1.87-1.87v-6.25c0-1.04-.84-1.87-1.87-1.87ZM5.13,12.5h-2.5c-1.04,0-1.87.84-1.87,1.87v3.75c0,1.04.84,1.87,1.87,1.87h2.5c1.04,0,1.87-.84,1.87-1.87v-3.75c0-1.04-.84-1.87-1.87-1.87ZM15.37,2.41l-2.04-.29h0l-.92-1.87c-.15-.32-.63-.34-.8,0l-.92,1.87-2.04.29c-.36.05-.52.5-.25.77l1.48,1.45-.35,2.03c-.05.36.32.64.66.48l1.83-.97,1.82.95c.34.17.71-.11.66-.48l-.35-2.03,1.48-1.43c.27-.27.11-.71-.25-.77ZM21.37,15h-2.5c-1.04,0-1.87.84-1.87,1.87v1.25c0,1.04.84,1.87,1.87,1.87h2.5c1.04,0,1.87-.84,1.87-1.87v-1.25c0-1.04-.84-1.87-1.87-1.87Z"/></svg>') no-repeat center / contain;
		}
	}
	& details{
		display: contents;
		&::details-content{
			grid-column: 1 / 3;
			grid-row: 3;
		}
		&[open]::details-content{
			z-index: 1;
		}
		&:nth-of-type(1) summary{
			margin-left: 16px;
		}
		&:nth-of-type(2) summary{
			margin-right: 16px;
		}
		&:not(:has(dl:nth-child(4))){
			& button{
				display: none;
			}
		}
	}
	& summary{
		display: grid;
		align-items: center;
		text-align: center;
		min-height: 48px;
		padding: 0.25em 0.5em;
		background: #e8e8e8;
		border-radius: 2px 2px 0 0;
		font-weight: 700;
		font-size: clamp(14px, calc(18 / 768 * 100dvw), 18px);
		letter-spacing: 0.05em;
		[open] &{
			background: #d3e3f2;
			pointer-events: none;
		}
	}
	& summary+div{
		display: grid;
		padding: 16px 0;
		background: #d3e3f2;
		overflow-x: auto;
		& dl{
			grid-row: 1;
			&:nth-child(n+2){
				border-left: 1px solid #fff;
			}
		}
	}
	& dl{
		position: relative;
		display: grid;
		grid-template-columns: 120px 1fr;
		align-items: center;
		column-gap: 16px;
		width: 320px;
		padding: 0 16px;
		&:not(:has(img)):before{
			content: "";
			aspect-ratio: 3 / 2;
			background: var(--dummy);
			border-radius: 10px;
		}
	}
	& dt{
		font-weight: 500;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		max-height: calc(1.65em * 3);
		overflow: hidden;
	}
	& dd{
		&:has(img){
			order: -1;
		}
		&:has(a){
			display: contents;
		}
		& img{
			aspect-ratio: 3 / 2;
			object-fit: cover;
			border-radius: 10px;
		}
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
		}
	}
	& button{
		display: none;
	}
}

.fr-view{
	font-weight: 500;
}

.title{
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 0.5em;
	color: inherit;
	font-weight: 700;
	font-size: clamp(18px, calc(22 / 768 * 100dvw), 22px);
	&:before{
		content: "";
		width: 3px;
		height: 1em;
		background: var(--color-theme);
		transform: translateY(calc(0.875em - 50%));
	}
	&:empty{
		display: none;
	}
}

.photo{
	display: grid;
	& dl{
		grid-column: 1;
		grid-row: 1;
		display: grid;
		&:nth-child(n+2){
			visibility: hidden;
		}
	}
	& dt{
		grid-column: 1;
		grid-row: 1;
		display: grid;
		align-content: end;
		padding: 8px 16px;
		background: linear-gradient(transparent, rgba(35, 24, 24, 0.1) 70%, rgba(35, 24, 24, 0.5) 85%, rgba(35, 24, 24, 0.9));
		border-radius: 10px;
		color: #fff;
		font-weight: 700;
		font-size: clamp(16px, calc(18 / 768 * 100dvw), 18px);
		pointer-events: none;
		z-index: 1;
		&:empty{
			display: none;
		}
	}
	& dd{
		grid-column: 1;
		grid-row: 1;
	}
	& img{
		aspect-ratio: 3 / 2;
		object-fit: cover;
		border-radius: 10px;
	}
	.slide{
		display: grid;
		grid-template-columns: 0 1fr 0;
		align-items: center;
		@media (min-width: 576px) {
			grid-template-columns: auto 1fr auto;
			column-gap: 16px;
		}
		.slick-list{
			@media (max-width: 575.98px) {
				overflow: visible;
			}
		}
		.slick-arrow{
			justify-self: center;
		}
	}
	.slideNav{
		margin-top: 16px;
		@media (min-width: 576px) {
			margin-inline: clamp(48px, calc(64 / 1200 * 100dvw), 64px);
		}
		& dt{
			display: none;
		}
		& img{
			border-radius: 8px;
		}
		.slick-list{
			margin: 0 -8px;
			&:only-child .slick-track{
				transform: unset !important;
			}
		}
		.slick-slide{
			margin: 0 8px;
			cursor: pointer;
		}
		.slick-arrow{
			display: none !important;
		}
	}
}

.columnLeft,
.columnRight{
	display: grid;
	grid-gap: 16px 32px;
}

.columnLeft{
	@media (min-width: 576px) {
		grid-template-columns: clamp(320px, calc(448 / 992 * 100dvw), 448px) 1fr;
		.columnPhoto{
			order: -1;
			align-self: start;
		}
	}
}

.columnRight{
	@media (min-width: 576px) {
		grid-template-columns: 1fr clamp(320px, calc(448 / 992 * 100dvw), 448px);
		.columnPhoto{
			order: 1;
			align-self: start;
		}
	}
}

.columnPhoto{
	display: grid;
	& dl{
		grid-column: 1;
		grid-row: 1;
		display: grid;
		&:nth-child(n+2){
			visibility: hidden;
		}
	}
	& dt{
		grid-column: 1;
		grid-row: 1;
		display: grid;
		align-content: end;
		padding: 8px 16px;
		background: linear-gradient(transparent, rgba(35, 24, 24, 0.1) 70%, rgba(35, 24, 24, 0.5) 85%, rgba(35, 24, 24, 0.9));
		border-radius: 10px;
		color: #fff;
		font-weight: 700;
		font-size: clamp(16px, calc(18 / 768 * 100dvw), 18px);
		pointer-events: none;
		z-index: 1;
		&:empty{
			display: none;
		}
	}
	& dd{
		grid-column: 1;
		grid-row: 1;
	}
	& img{
		aspect-ratio: 3 / 2;
		object-fit: cover;
		border-radius: 10px;
	}
	&.slick-slider{
		display: grid;
		grid-template-columns: 0 1fr 0;
		align-items: center;
		@media (min-width: 768px) {
			grid-template-columns: auto 1fr auto;
			grid-gap: 8px;
		}
		.slick-list{
			grid-column: 2;
			grid-row: 1;
		}
		.slick-arrow{
			justify-self: center;
			width: 32px;
		}
		.slick-dots{
			margin-top: 16px;
			&:has(li:only-child){
				display: none;
			}
		}
		.slick-dots{
			grid-column: 2;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-content: center;
			grid-gap: 8px;
			& li{
				aspect-ratio: 1;
				width: 10px;
				background: #bdbdbd;
				border-radius: 100%;
				overflow: hidden;
				&.slick-active{
					background: var(--color-theme);
				}
			}
			& button{
				visibility: hidden;
			}
		}
	}
}

.links{
	& ul{
		display: grid;
		justify-content: center;
		grid-gap: 16px;
		@media (min-width: 992px) {
			display: flex;
			& a{
				min-width: calc((100% - 32px) / 3);
			}
		}
	}
	& li{
		display: contents;
	}
	& a{
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		column-gap: 0.5em;
		min-width: min(100%, 240px);
		min-height: clamp(48px, calc(56 / 768 * 100dvw), 56px);
		padding: 0.25em 1.5em;
		background: var(--color-theme);
		border-radius: clamp(24px, calc(28 / 768 * 100dvw), 28px);
		color: #fff;
		font-weight: 700;
		letter-spacing: 0.05em;
		text-align: center;
		text-decoration: none;
		&:before,
		&:after{
			content: "";
			grid-column: 2;
			grid-row: 1;
			aspect-ratio: 1;
			width: 16px;
		}
		&:before{
			background: currentColor;
			border-radius: 100%;
		}
		&:after{
			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 16 16" style="fill: none; stroke: black; stroke-width: 1.5px;"><polyline points="6.25 11.5 9.75 8 6.25 4.5"/></svg>') no-repeat center / contain;
		}
	}
}

.documents{
	padding-top: 24px;
	border-top: 2px dotted #c2c2c2;
	& h4{
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 0.5em;
		color: inherit;
		font-weight: 700;
		font-size: clamp(16px, calc(18 / 768 * 100dvw), 18px);
		&:before{
			content: "";
			width: 3px;
			height: 1em;
			background: #d3e3f2;
			transform: translateY(calc(0.875em - 50%));
		}
	}
	& h4+div{
		padding: 8px 0 0 8px;
	}
	& ul{
		display: grid;
		justify-items: start;
		grid-row-gap: 4px;
	}
	& li{
		display: contents;
	}
	& a{
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 0.5em;
		font-weight: 700;
		&:before{
			content: "";
			aspect-ratio: 1;
			width: 16px;
			background: currentColor;
			transform: translateY(calc(0.875em - 50%));
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M4,0c-1.1,0-2,.9-2,2v12c0,1.1.9,2,2,2h8c1.1,0,2-.9,2-2V5.33c0-.53-.21-1.04-.58-1.42l-3.33-3.33c-.38-.37-.88-.58-1.41-.58H4ZM12.17,5.5h-2.92c-.42,0-.75-.33-.75-.75V1.83l3.67,3.67Z"/></svg>') no-repeat center / contain;
		}
	}
}

.movie{
	display: grid;
	grid-row-gap: clamp(16px, calc(24 / 1200 * 100dvw), 24px);
	& iframe{
		order: 1;
		aspect-ratio: 16 / 9;
		width: 100%;
		height: auto;
	}
	.short{
		aspect-ratio: 9 / 16;
	}
}

.movie2{
	&:has(dl:nth-child(2)){
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: clamp(24px, calc(32 / 1200 * 100dvw), 32px) 16px;
		align-items: start;
	}
	& dl{
		position: relative;
		display: grid;
		grid-row-gap: 8px;
	}
	& dt{
		font-weight: 700;
		font-size: clamp(16px, calc(18 / 768 * 100dvw), 18px);
	}
	& dd{
		font-weight: 500;
		&:has(iframe){
			order: -1;
		}
		&:has(a){
			display: contents;
		}
		& iframe{
			aspect-ratio: 16 / 9;
			width: 100%;
			height: auto;
			&.short{
				aspect-ratio: 9 / 16;
			}
		}
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
		}
	}
}

.article{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: clamp(24px, calc(32 / 1200 * 100dvw), 32px) 16px;
	@media (min-width: 768px) {
		grid-template-columns: repeat(3, 1fr);
	}
	& dl{
		position: relative;
		align-content: start;
		display: grid;
/*		grid-template-rows: auto 1fr;*/
		grid-template-rows: auto;
		grid-row-gap: 8px;
/*		&:has(img){
			grid-template-rows: auto auto 1fr;
		}*/
	}
	& dt{
		font-weight: 700;
		font-size: clamp(16px, calc(18 / 768 * 100dvw), 18px);
	}
	& dd{
		font-weight: 500;
		&:has(img){
			order: -1;
		}
		& img{
			aspect-ratio: 3 / 2;
			object-fit: cover;
			border-radius: 10px;
		}
		&:has(a){
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			grid-gap: 16px;
			margin-top: 8px;
		}
		& a{
			display: grid;
			grid-template-columns: 1fr auto;
			align-items: center;
			column-gap: 0.5em;
			min-width: min(100%, 196px);
			min-height: 40px;
			padding: 0.25em 1.5em;
			background: var(--color-theme);
			border-radius: 20px;
			color: #fff;
			font-weight: 700;
			letter-spacing: 0.05em;
			text-align: center;
			text-decoration: none;
			&:before,
			&:after{
				content: "";
				grid-column: 2;
				grid-row: 1;
				aspect-ratio: 1;
				width: 16px;
			}
			&:before{
				background: currentColor;
				border-radius: 100%;
			}
			&:after{
				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 16 16" style="fill: none; stroke: black; stroke-width: 1.5px;"><polyline points="6.25 11.5 9.75 8 6.25 4.5"/></svg>') no-repeat center / contain;
			}
		}
	}
}

.articleSlide{
	display: grid;
	&:not(.slick-initialized){
		grid-template-columns: repeat(auto-fill, minmax(min(calc(50% - 24px), 248px), 1fr));
		grid-gap: clamp(24px, calc(32 / 1200 * 100dvw), 32px) 16px;
	}
	& dl{
		position: relative;
		display: grid;
		grid-row-gap: 8px;
		&:not(:has(img)):before{
			content: "";
			aspect-ratio: 3 / 2;
			background: var(--dummy);
			border-radius: 10px;
		}
	}
	& dt{
		font-weight: 700;
		font-size: clamp(16px, calc(18 / 768 * 100dvw), 18px);
	}
	& dd{
		font-weight: 500;
		&:has(img){
			order: -1;
		}
		& img{
			aspect-ratio: 3 / 2;
			object-fit: cover;
			border-radius: 10px;
		}
		&:has(a){
			display: flex;
			justify-content: center;
			margin-top: 8px;
		}
		& a{
			display: grid;
			grid-template-columns: 1fr auto;
			align-items: center;
			column-gap: 0.5em;
			min-width: min(100%, 196px);
			min-height: 40px;
			padding: 0.25em 1.5em;
			background: var(--color-theme);
			border-radius: 20px;
			color: #fff;
			font-weight: 700;
			letter-spacing: 0.05em;
			text-align: center;
			text-decoration: none;
			&:before,
			&:after{
				content: "";
				grid-column: 2;
				grid-row: 1;
				aspect-ratio: 1;
				width: 16px;
			}
			&:before{
				background: currentColor;
				border-radius: 100%;
			}
			&:after{
				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 16 16" style="fill: none; stroke: black; stroke-width: 1.5px;"><polyline points="6.25 11.5 9.75 8 6.25 4.5"/></svg>') no-repeat center / contain;
			}
		}
	}
	&.slick-slider{
		grid-template-columns: auto 1fr auto;
		align-items: center;
		&:before{
			content: "";
			grid-column: 2;
			grid-row: 1;
			aspect-ratio: 3 / 2;
			width: calc(100% - 16px);
		}
		@media (min-width: 768px) {
			&:before{
				width: calc((100% - 16px) / 2);
			}
		}
		@media (min-width: 992px) {
			&:before{
				width: calc((100% - 32px) / 3);
			}
		}
	}
	.slick-list{
		grid-column: 2;
		grid-row: 1 / 3;
		@media (max-width: 1199.98px) {
			overflow: visible;
		}
	}
	.slick-slide{
		margin: 0 8px;
	}
	.slick-arrow{
		width: 32px;
	}
}

.map{
	display: grid;
	grid-row-gap: 16px;
	& summary{
		order: 1;
		justify-self: center;
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		column-gap: 0.5em;
		min-width: min(100%, 180px);
		min-height: 40px;
		padding: 0.25em 1em 0.25em 1.5em;
		background: var(--color-theme);
		border-radius: 20px;
		color: #fff;
		font-weight: 700;
		letter-spacing: 0.05em;
		text-align: center;
		text-decoration: none;
		&:before,
		&:after{
			content: "";
			grid-column: 2;
			grid-row: 1;
			aspect-ratio: 1;
			width: 16px;
		}
		&:before{
			background: currentColor;
			border-radius: 100%;
		}
		&:after{
			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 16 16" style="fill: none; stroke: black;"><polyline points="5 6.5 8 9.5 11 6.5"/></svg>') no-repeat center / contain;
		}
		[open] &:after{
			transform: scale(1, -1);
		}
	}
	& summary+div{
		display: grid;
		&:before{
			content: "";
			grid-column: 1;
			grid-row: 1 / 3;
			border: 1px solid #c2c2c2;
			pointer-events: none;
			z-index: 1;
		}
		.mapBody{
			grid-column: 1;
			grid-row: 1;
		}
		.mapList{
			grid-column: 1;
			grid-row: 2;
		}
		.mapText{
			margin-top: 16px;
		}
		@media (max-width: 767.98px) {
			.mapBody{
				height: 400px;
			}
			.mapList{
				height: 200px;
			}
		}
		@media (min-width: 768px) {
			grid-template-columns: 60% 1fr;
			&:before{
				grid-column: 1 / 3;
				grid-row: 1;
			}
			.mapBody{
				grid-column: 1;
				grid-row: 1;
				height: 400px;
			}
			.mapList{
				grid-column: 2;
				grid-row: 1;
				height: 400px;
			}
			.mapText{
				grid-column: 1 / 3;
				justify-self: center;
			}
		}
		@media (min-width: 1200px) {
			grid-template-columns: 500px 1fr;
		}
	}
	.mapText{
		margin-top: 16px;
	}
}

.mapBody{
	position: relative;
	background: #e8e8e8;
	[LSC-LT="dummy"] &{
		padding: 16px;
	}
	[id^="gMap"]{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}

.mapList{
	padding: clamp(24px, calc(32 / 1200 * 100dvw), 32px) 16px;
	overflow-y: auto;
	& ul{
		display: grid;
		grid-row-gap: 8px;
	}
	& li{
		counter-increment: count;
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;
		column-gap: 8px;
		font-weight: 500;
		&:before{
			content: counter(count);
			align-self: start;
			display: grid;
			align-items: center;
			aspect-ratio: 1;
			width: 32px;
			background: var(--color-theme);
			border-radius: 16px;
			color: #fff;
			font-weight: 700;
			text-align: center;
		}
	}
}

.mapText{
	font-weight: 500;
	font-size: clamp(12px, calc(14 / 768 * 100dvw), 14px);
}

.column{
	position: relative;
	border: 5px solid #d3e3f2;
	border-radius: 10px;
	& h4{
		display: grid;
		grid-template-columns: auto auto;
		justify-content: center;
		align-items: center;
		column-gap: 16px;
		min-height: 48px;
		padding: 8px 16px;
		background: #d3e3f2;
		border-radius: 5px 5px 0 0;
		color: var(--color-theme);
		font-weight: 700;
		font-size: 22px;
		text-align: center;
		&:before{
			content: "";
			align-self: start;
			aspect-ratio: 36 / 56;
			width: 36px;
			margin: -8px 0;
			background: var(--color-theme);
			transform: translateY(-16px);
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 56" style="fill: none; stroke: black; stroke-linecap: round; stroke-miterlimit: 10; stroke-width: 2.74px;"><path d="M25.99,11.99l7.7,28.72c1.49,5.56-1.84,11.33-7.4,12.82l-1.92.51c-5.56,1.49-11.33-1.84-12.82-7.4L2.22,11.86C1.1,7.68,3.6,3.34,7.78,2.22l1.44-.39c4.18-1.12,8.62,1.76,9.63,5.56l7.63,28.46c.76,2.85-.94,5.82-3.8,6.58l-.99.26c-2.85.76-5.82-.94-6.58-3.8l-6.19-23.12"/></svg>') no-repeat center / contain;
		}
	}
	& h4+div{
		display: grid;
		padding: clamp(24px, calc(32 / 1200 * 100dvw), 32px) 16px;
	}
	& h5{
		padding-bottom: 1em;
		border-bottom: 2px dotted #c2c2c2;
		color: var(--color-theme);
		font-weight: 700;
		font-size: clamp(16px, calc(18 / 768 * 100dvw), 18px);
	}
	& h5+div{
		margin-top: 16px;
	}
	& h5+div+div{
		margin-top: clamp(24px, calc(32 / 1200 * 100dvw), 32px);
		& ul{
			display: grid;
			justify-content: center;
			grid-gap: 16px;
			@media (min-width: 992px) {
				display: flex;
				& a{
					min-width: calc((100% - 32px) / 3);
				}
			}
		}
		& li{
			display: contents;
		}
		& a{
			display: grid;
			grid-template-columns: 1fr auto;
			align-items: center;
			column-gap: 0.5em;
			min-width: min(100%, 240px);
			min-height: 40px;
			padding: 0.25em 1.5em;
			background: var(--color-theme);
			border-radius: 20px;
			color: #fff;
			font-weight: 700;
			letter-spacing: 0.05em;
			text-align: center;
			text-decoration: none;
			&:before,
			&:after{
				content: "";
				grid-column: 2;
				grid-row: 1;
				aspect-ratio: 1;
				width: 16px;
			}
			&:before{
				background: currentColor;
				border-radius: 100%;
			}
			&:after{
				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 16 16" style="fill: none; stroke: black; stroke-width: 1.5px;"><polyline points="6.25 11.5 9.75 8 6.25 4.5"/></svg>') no-repeat center / contain;
			}
		}
	}
	& figure{
		order: -1;
		& img{
			aspect-ratio: 3 / 2;
			object-fit: cover;
			border-radius: 10px;
		}
	}
	@media (max-width: 767.98px) {
		& figure{
			margin-bottom: 16px;
		}
	}
	@media (min-width: 768px) {
		&:has(img){
			& h4+div{
				grid-template-columns: auto 1fr;
				grid-template-rows: auto 1fr;
			}
			& h5+div+div{
				grid-column: 1 / 3;
			}
		}
		& figure{
			grid-column: 1;
			grid-row: 1 / 3;
			align-self: start;
			width: 264px;
			margin-right: 16px;
		}
	}
}

.comment{
	display: grid;
	grid-row-gap: 16px;
	& dl{
		display: grid;
		grid-template-rows: auto 1fr;
		grid-gap: 4px clamp(24px, calc(40 / 768 * 100dvw), 40px);
		width: calc(100% - clamp(32px, calc(104 / 1200 * 100dvw), 104px));
		&:not(:has(img)):before{
			content: "";
			justify-self: center;
			aspect-ratio: 1;
			width: min(100%, 80px);
			background: var(--dummy);
			border-radius: 100%;
			outline: 3px solid;
		}
	}
	& dt{
		font-weight: 500;
		font-size: clamp(10px, calc(12 / 768 * 100dvw), 12px);
		text-align: center;
	}
	& dt+dd{
		position: relative;
		grid-row: 1 / 3;
		align-self: start;
		margin-top: 8px;
		padding: 16px;
		border-radius: 10px;
		font-weight: 500;
		&:before{
			content: "";
			position: absolute;
			top: 16px;
			aspect-ratio: 1;
			width: clamp(16px, calc(24 / 768 * 100dvw), 24px);
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3.25,24h20.75s0-21.15,0-21.15L1.7,19.27c-2.04,1.5-.98,4.73,1.55,4.73Z"/></svg>') no-repeat center / contain;
		}
	}
	& dd{
		&:has(img){
			justify-self: center;
			width: min(100%, 80px);
		}
		& img{
			aspect-ratio: 1;
			object-fit: cover;
			border-radius: 100%;
			outline: 3px solid;
		}
	}
}

.commentLeft{
	grid-template-columns: clamp(72px, calc(96 / 768 * 100dvw), 96px) 1fr;
	&:before{
		grid-column: 1;
		grid-row: 1;
		outline-color: var(--color-theme) !important;
	}
	& dt{
		grid-column: 1;
		grid-row: 2;
	}
	& dt+dd{
		background: #d3e3f2;
		&:before{
			left: 0;
			background: #d3e3f2;
			transform: translateX(-100%);
		}
	}
	& dd:has(img){
		grid-column: 1;
		grid-row: 1;
		& img{
			outline-color: var(--color-theme);
		}
	}
}

.commentRight{
	justify-self: end;
	grid-template-columns: 1fr clamp(72px, calc(96 / 768 * 100dvw), 96px);
	&:before{
		grid-column: 2;
		grid-row: 1;
		outline-color: #f4a11a !important;
	}
	& dt{
		grid-column: 2;
		grid-row: 2;
	}
	& dt+dd{
		background: #efe8d3;
		&:before{
			left: 100%;
			background: #efe8d3;
			transform: scale(-1, 1);
		}
	}
	& dd:has(img){
		grid-column: 2;
		grid-row: 1;
		& img{
			outline-color: #f4a11a;
		}
	}
}

.slick-arrow{
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	position: relative;
	aspect-ratio: 1;
	width: clamp(32px, calc(48 / 1200 * 100dvw), 48px);
	background: #e8e8e8;
	border-radius: 100%;
	color: #fff;
	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: 3px;"><polyline points="8.5 3 17.5 12 8.5 21"/></svg>') no-repeat center / 50%;
	}
	&.slick-prev:before{
		transform: scale(-1, 1);
	}
}






