/* CSS Document */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Hina+Mincho&family=Kiwi+Maru:wght@300;400;500&family=Klee+One:wght@400;600&family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap');

:root{
	--detail-bg: #f2f2f2;
}

#detail{
	padding: 24px 0 clamp(64px, calc(80 / 1200 * 100vw), 80px) 0;
	&.lp{
		background: var(--detail-bg);
		&:has(#detailPhoto){
			padding-top: 0;
		}
	}
}

#detailHeader{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	&>*{
		grid-column: 2;
	}
	& h2{
		display: grid;
		grid-row-gap: 16px;
		color: var(--color-theme);
		font-weight: 700;
		font-size: clamp(24px, calc(32 / 768 * 100vw), 32px);
		&:empty{
			display: none;
		}
		&:after{
			content: "";
			height: 1px;
			background: var(--color);
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 1"><rect x="2" width="4" height="1"/></svg>') repeat center / 8px 1px;
		}
	}
	#detailText{
		margin-top: 32px;
	}
	#detailInfo{
		order: 1;
		margin-top: 24px;
	}
	#detailTag{
		margin-top: 24px;
	}
	#detailTable{
		order: 2;
	}
	#detailPhoto{
		order: -1;
		margin-bottom: 32px;
	}
	#detailShare{
		order: 1;
		margin-top: 16px;
	}
}

#detailText{
	font-weight: 700;
	font-size: clamp(16px, calc(18 / 768 * 100vw), 18px);
	.screen &{
		padding: 24px;
		background: #fff;
		border-radius: 10px;
	}
}

#detailInfo{
	display: grid;
	grid-row-gap: 8px;
	& dl{
		display: grid;
		grid-template-columns: auto 1fr;
		grid-gap: 8px 0;
		font-size: clamp(14px, calc(16 / 768 * 100vw), 16px);
	}
	& dt{
		display: grid;
		grid-template-columns: 1fr auto;
		&:after{
			content: ":";
			margin: 0 8px;
		}
	}
	& i{
		all: unset;
		display: grid;
		grid-template-columns: 16px auto;
		align-items: center;
		column-gap: 8px;
		font-size: clamp(14px, calc(16 / 768 * 100vw), 16px);
		&:before{
			content: "";
			aspect-ratio: 1;
			background: currentColor;
			-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="M14.5,8s-2,4-6.5,4S1.5,8,1.5,8c0,0,2-4,6.5-4s6.5,4,6.5,4Z" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round;"/><path d="M8,5c-1.66,0-3,1.34-3,3s1.34,3,3,3,3-1.34,3-3c0,0,0,0,0,0,0-1.66-1.34-3-3-3ZM8,9.39c-.77.06-1.44-.52-1.49-1.29s.52-1.44,1.29-1.49c.07,0,.13,0,.2,0,.15,0,.29.03.43.08l-.2.6c-.05.15-.01.32.09.44.1.12.26.18.42.15l.62-.11c0,.08,0,.16,0,.25,0,.75-.61,1.37-1.37,1.38Z"/></svg>') no-repeat center / contain;
		}
	}
}

#detailTag{
	/*
	& ul{
		display: flex;
		flex-wrap: wrap;
		grid-gap: 8px;
	}
	& li{
		display: contents;
	}
	& a{
		display: grid;
		align-items: center;
		min-height: 40px;
		padding: 2px 16px;
		border: 1px solid #b3b3b3;
		border-radius: 20px;
		color: inherit;
		font-size: clamp(14px, calc(16 / 768 * 100vw), 16px);
		text-decoration: none;
	}
	*/
	display: grid;
	grid-gap: 24px;
	@media (min-width: 576px) {
		grid-template-columns: auto 1fr;
	}
	& div{
		display: grid;
		grid-row-gap: 8px;
		@media (min-width: 576px) {
			display: contents;
		}
	}
	& h3{
		align-self: center;
		display: grid;
		grid-template-columns: 4px 1fr;
		column-gap: 16px;
		font-weight: 700;
		font-size: clamp(16px, calc(18 / 768 * 100vw), 18px);
		&:before {
			content: "";
			height: 1em;
			align-self: start;
			background: var(--color-theme);
			border-radius: 2px;
			transform: translateY(0.325em);
		}
	}
	& ul{
		display: flex;
		flex-wrap: wrap;
		grid-gap: 8px;
	}
	& li{
		display: contents;
	}
	& a{
		display: grid;
		align-items: center;
		min-height: 40px;
		padding: 2px 16px;
		border: 1px solid #b3b3b3;
		border-radius: 20px;
		color: inherit;
		font-size: clamp(14px, calc(16 / 768 * 100vw), 16px);
		text-decoration: none;
	}
}

#detailTable{
	display: grid;
	grid-template-columns: auto 1fr;
	width: min(100%, 960px);
	margin: clamp(64px, calc(80 / 1200 * 100vw), 80px) auto 0 auto;
	overflow: hidden;
	&:before{
		content: "";
		grid-row: 1;
		grid-column: 2;
		margin-top: 8px;
		border-width: 0 0 1px 1px;
		border-radius: 0 0 0 8px;
	}
	&:after{
		content: "";
		grid-column: 1 / 3;
		height: 1px;
		background: var(--color);
		-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 1"><rect x="2" width="4" height="1"/></svg>') repeat center / 8px 1px;
	}
	& h3{
		grid-row: 1;
		justify-self: start;
		display: grid;
		grid-template-columns: 16px 1fr 16px;
		font-weight: 700;
		font-size: clamp(18px, calc(20 / 768 * 100vw), 20px);
		letter-spacing: 0.5em;
		text-indent: 0.5em;
		text-align: center;
		&:before,
		&:after{
			content: ""
		}
		&:before{
			content: "";
			grid-column: 1 / 4;
			grid-row: 1;
			height: 8px;
			margin-right: -1px;
			border-width: 1px 1px 0 1px;
			border-radius: 8px 8px 0 0;
		}
		&:after{
			grid-column: 1;
			grid-row: 2;
			border-left: 1px solid currentColor;
		}
	}
	& h3+div{
		grid-column: 1 / 3;
		margin: 24px 0;
	}
	& ul{
		display: grid;
		grid-gap: 8px;
		&[lsc-lb="List"]{
			display: none;
		}
		&>li{
			&:nth-child(n+6){
				display: none;
			}
		}
		& span{
			display: inherit;
			grid-gap: inherit;
		}
	}
	& a{
		display: grid;
		grid-template-columns: 1em 1fr;
		grid-gap: 16px;
		color: inherit;
		text-decoration: none;
		&:before{
			content: "";
			aspect-ratio: 1;
			background: var(--color-theme-sub);
			transform: translateY(0.325em);
			-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="10 7 4 2 4 12 10 7"/></svg>') no-repeat center / contain;
		}
		&:hover{
			color: var(--color-theme);
		}
	}
	& menu{
		all: unset;
		box-sizing: border-box;
		grid-column: 1 / 3;
		display: grid;
		grid-template-columns: auto 32px;
		justify-content: start;
		align-items: center;
		grid-gap: 16px;
		margin-bottom: 16px;
		cursor: pointer;
		transition: all 0.2s ease-out;
		&:before,
		&:after{
			content: "";
			grid-column: 2;
			grid-row: 1;
			aspect-ratio: 1;
			width: clamp(24px, calc(32 / 768 * 100vw), 32px);
		}
		&:before{
			background: currentColor;
			border-radius: 100%;
		}
		&:after{
			background: #fff;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" style="fill: none; stroke: white; stroke-linecap: round; stroke-linejoin: round;"><polyline points="16 10 16 22"/><polyline points="12 18 16 22 20 18"/></svg>') no-repeat center / contain;
		}
		&:hover{
			color: var(--color-theme);
		}
	}
}

#detailPhoto{
	& img{
		aspect-ratio: 3 / 2;
		object-fit: contain;
		border-radius: 10px;
	}
	.lp &{
		grid-column: 1 / 4;
		& img{
			aspect-ratio: unset;
			object-fit: unset;
			border-radius: unset;
		}
	}
}

#detailShare{
	& h3{
		display: none;
	}
	& ul{
		display: flex;
		justify-content: end;
		column-gap: 8px;
	}
	& li{
		display: contents;
	}
	& a{
		display: grid;
		grid-template-columns: 14px auto;
		align-items: center;
		column-gap: 4px;
		min-height: 24px;
		padding: 0 8px;
		background: var(--color);
		border-radius: 12px;
		color: #fff;
		font-size: 10px;
		text-decoration: none;
		&:before{
			content: "";
			aspect-ratio: 1;
			background: currentColor;
		}
		&[href*="x.com"]{
			background: var(--color);
			&:before{
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M11.74,8.57L18.54.67h-1.61l-5.9,6.86L6.31.67H.87l7.13,10.38L.87,19.33h1.61l6.23-7.25,4.98,7.25h5.44l-7.4-10.76h0ZM9.53,11.14l-.72-1.03L3.06,1.88h2.48l4.64,6.64.72,1.03,6.03,8.63h-2.48l-4.92-7.04h0Z"/></svg>') no-repeat center / contain;
			}
		}
		&[href*="facebook.com"]{
			background: #0866ff;
			border-radius: 4px;
			&:before{
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><path d="M250,0C111.93,0,0,111.93,0,250c0,117.24,80.72,215.62,189.61,242.64v-166.24h-51.55v-76.4h51.55v-32.92c0-85.09,38.51-124.53,122.05-124.53h0c15.84,0,43.17,3.11,54.35,6.21v69.25h0c-5.9-.62-16.15-.93-28.88-.93-40.99,0-56.83,15.53-56.83,55.9v27.02h81.66l-14.03,76.4h-67.63v171.77c123.79-14.95,219.71-120.35,219.71-248.17C500,111.93,388.07,0,250,0Z"/></svg>') no-repeat center / contain;
			}
		}
		&[href*="line.me"]{
			background: #06c755;
			border-radius: 4px;
			&:before{
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240"><path d="M240,103.04c0-53.7-53.83-97.38-120-97.38S0,49.35,0,103.04c0,48.14,42.69,88.45,100.36,96.08,3.91.84,9.23,2.58,10.57,5.92,1.21,3.03.79,7.79.39,10.85,0,0-1.41,8.47-1.71,10.27-.52,3.03-2.41,11.87,10.39,6.47,12.81-5.4,69.11-40.69,94.28-69.67h0c17.39-19.07,25.72-38.43,25.72-59.92ZM77.66,131.76c0,1.27-1.03,2.29-2.29,2.29h-33.71c-1.27,0-2.29-1.03-2.29-2.29v-.04h0v-52.33c0-1.27,1.03-2.29,2.29-2.29h8.51c1.26,0,2.29,1.03,2.29,2.29v41.57h22.91c1.26,0,2.29,1.03,2.29,2.29v8.51ZM97.96,131.76c0,1.27-1.03,2.29-2.29,2.29h-8.51c-1.27,0-2.29-1.03-2.29-2.29v-52.37c0-1.27,1.03-2.29,2.29-2.29h8.51c1.27,0,2.29,1.03,2.29,2.29v52.37ZM155.89,131.76c0,1.27-1.03,2.29-2.29,2.29h-8.46c-.21,0-.41-.03-.6-.08-.01,0-.02,0-.03,0-.05-.01-.11-.03-.16-.05-.02,0-.05-.02-.07-.03-.04-.02-.07-.03-.11-.05-.04-.02-.07-.03-.11-.05-.02-.01-.04-.02-.07-.04-.05-.03-.1-.06-.14-.09,0,0-.02-.01-.03-.02-.22-.15-.43-.34-.59-.58l-23.99-32.4v31.1c0,1.27-1.03,2.29-2.29,2.29h-8.51c-1.27,0-2.29-1.03-2.29-2.29v-52.37c0-1.27,1.03-2.29,2.29-2.29h8.46s.05,0,.08,0c.04,0,.08,0,.12,0,.04,0,.08,0,.12.02.03,0,.07,0,.1.01.05,0,.09.02.14.03.03,0,.05.01.08.02.05.01.09.03.14.04.02,0,.05.02.07.03.05.02.09.04.13.06.02.01.05.02.07.04.04.02.08.05.13.07.02.01.05.03.07.04.04.03.08.05.12.08.02.02.04.03.06.05.04.03.08.07.12.11.01.01.03.03.04.04.05.05.09.09.14.14,0,0,.01.01.01.02.07.08.13.15.18.24l23.96,32.36v-31.11c0-1.27,1.03-2.29,2.29-2.29h8.51c1.27,0,2.29,1.03,2.29,2.29v52.37ZM202.37,87.9c0,1.27-1.03,2.29-2.29,2.29h-22.91v8.84h22.91c1.26,0,2.29,1.03,2.29,2.29v8.51c0,1.27-1.03,2.29-2.29,2.29h-22.91v8.84h22.91c1.26,0,2.29,1.03,2.29,2.29v8.51c0,1.27-1.03,2.29-2.29,2.29h-33.71c-1.27,0-2.29-1.03-2.29-2.29v-.04h0v-52.28h0v-.05c0-1.27,1.03-2.29,2.29-2.29h33.71c1.26,0,2.29,1.03,2.29,2.29v8.51Z"/></svg>') no-repeat center / contain;
			}
		}
	}
}

#detailArticle{
	margin-top: clamp(64px, calc(80 / 1200 * 100vw), 80px);
	overflow: hidden;
	& section{
		display: grid;
		grid-template-columns: 1fr min(var(--wrap-fit), 960px) 1fr;
		&>*{
			grid-column: 2;
		}
		&:nth-child(n+2) .title{
			margin-top: clamp(64px, calc(80 / 1200 * 100vw), 80px);
		}
	}
	.lp &{
		opacity: 0;
		transition: opacity 0.2s ease-out;
	}
	.done .lp &{
		opacity: 1;
	}
}

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

#detailWriter{
	display: grid;
	grid-gap: 16px 24px;
	margin-top: clamp(64px, calc(80 / 1200 * 100vw), 80px);
	& h3{
		align-self: center;
		display: grid;
		grid-template-columns: 4px 1fr;
		column-gap: 16px;
		font-weight: 700;
		font-size: clamp(20px, calc(24 / 768 * 100vw), 24px);
		&:before{
			content: "";
			height: 1em;
			align-self: start;
			background: var(--color-theme);
			border-radius: 2px;
			transform: translateY(0.325em);
		}
	}
	&:has(figure){
		@media (min-width: 768px) {
			grid-template-columns: min(30vw, 400px) 1fr;
			grid-template-rows: auto auto 1fr;
			&>*{
				grid-column: 2;
			}
			& h3{
				grid-column: 1 / 3;
			}
			& figure{
				grid-column: 1;
				grid-row: 2;
				margin-right: 8px;
			}
		}
	}
	& h4{
		font-size: clamp(18px, calc(20 / 768 * 100vw), 20px);
	}
	& h4+div{
		margin-top: 8px;
	}
	& h4+div+div{
		display: flex;
		justify-content: center;
		margin-top: 16px;
		& a{
			display: grid;
			grid-template-columns: auto auto;
			justify-content: center;
			align-items: center;
			column-gap: 1em;
			min-width: min(100%, 320px);
			min-height: clamp(56px, calc(64 / 768 * 100vw), 64px);
			padding: 8px 24px;
			background: #fff;
			border: 1px solid #b3b3b3;
			border-radius: clamp(28px, calc(40 / 768 * 100vw), 40px);
			color: inherit;
			font-size: clamp(16px, calc(18 / 768 * 100vw), 18px);
			letter-spacing: 0.1em;
			text-align: center;
			text-decoration: none;
			&:before,
			&:after{
				content: "";
				grid-column: 2;
				grid-row: 1;
				aspect-ratio: 1;
				width: clamp(24px, calc(32 / 768 * 100vw), 32px);
			}
			&:before{
				background: currentColor;
				border-radius: 100%;
			}
			&:after{
				background: #fff;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" style="fill: none; stroke: white; stroke-linecap: round; stroke-linejoin: round;"><polyline points="10 16 22 16"/><polyline points="18 12 22 16 18 20"/></svg>') no-repeat center / contain;
			}
			&:hover{
				background: var(--color);
				border-color:transparent;
				color: #fff;
				&:after{
					background: var(--color);
				}
			}
		}
	}
	& figure{
		order: -1;
		& img{
			aspect-ratio: 3 / 2;
			object-fit: contain;
			border-radius: 10px;
		}
	}
}

#recommend{
	grid-column: 1 / 4;
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	padding: clamp(64px, calc(80 / 1200 * 100vw), 80px) 0 clamp(96px, calc(120 / 1200 * 100vw), 120px) 0;
	background: #e6e5d5 url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 4" width="4" height="4" fill="%23f8f7e5"><rect width="2" height="2"/><rect x="2" y="2" width="2" height="2"/></svg>');
	overflow: hidden;
	&>*{
		grid-column: 2;
	}
	&:not(:has(dl)){
		& h2{
			display: grid;
			grid-template-columns: clamp(4px, calc(6 / 768 * 100vw), 6px) 1fr;
			column-gap: 16px;
			font-weight: 700;
			font-size: clamp(20px, calc(24 / 768 * 100vw), 24px);
			word-break: keep-all;
			overflow-wrap: anywhere;
			&:before{
				content: "";
				height: 1em;
				background: var(--color-theme);
				border-radius: 3px;
				transform: translateY(0.325em);
			}
		}
		& h2+div{
			margin-top: 24px;
		}
		& section{
			position: relative;
			display: grid;
			grid-template-rows: auto 1fr;
			grid-row-gap: 8px;
			&:not(:has(figure)):before{
				content: "";
				grid-column: 1;
				grid-row: 1;
				aspect-ratio: 3 / 2;
				border-radius: 10px;
				background: var(--dummy);
			}
			& h3{
				margin: 0 16px;
				font-size: clamp(14px, calc(18 / 768 * 100vw), 18px);
			}
			& h3+div{
				display: contents;
			}
			& a{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				font-size: 0;
			}
			& figure{
				grid-column: 1;
				grid-row: 1;
				margin-bottom: 8px;
				& img{
					aspect-ratio: 3 / 2;
					border-radius: 10px;
					object-fit: contain;
				}
			}
		}
	}
	&:has(dl){
		grid-row-gap: clamp(48px, calc(64 / 1200 * 100vw), 64px);
		& h2{
			display: none;
		}
		& h3{
			align-self: center;
			display: grid;
			grid-template-columns: 4px 1fr;
			column-gap: 16px;
			font-weight: 700;
			font-size: clamp(20px, calc(24 / 768 * 100vw), 24px);
			&:before{
				content: "";
				height: 1em;
				align-self: start;
				background: var(--color-theme);
				border-radius: 2px;
				transform: translateY(0.325em);
			}
		}
		& h3+div{
			margin-top: 24px;
		}
	}
	& dl{
		position: relative;
		display: grid;
		grid-template-rows: auto 1fr;
		grid-row-gap: 8px;
		&:not(:has(img)):before{
			content: "";
			grid-column: 1;
			grid-row: 1;
			aspect-ratio: 3 / 2;
			border-radius: 10px;
			background: var(--dummy);
		}
	}
	& dt{
		margin: 0 16px;
		font-size: clamp(14px, calc(18 / 768 * 100vw), 18px);
	}
	& dd{
		&:has(img){
			grid-column: 1;
			grid-row: 1;
			margin-bottom: 8px;
		}
		&:has(a){
			display: contents;
		}
		& img{
			aspect-ratio: 3 / 2;
			background: #fff;
			border-radius: 10px;
			object-fit: contain;
		}
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
		}
	}
	.slick-slider{
		display: grid;
		grid-template-columns: auto 1fr auto;
		overflow: hidden;
		&:before{
			content: "";
			grid-column: 1 / 4;
			grid-row: 1;
			aspect-ratio: 3 / 2;
			width: calc(100% - 100px);
			visibility: hidden;
		}
		@media (min-width: 576px) {
			&:before{
				width: calc((100% - 20px) / 2);
			}
		}
		@media (min-width: 922px) {
			&:before{
				width: calc((100% - 40px) / 3);
			}
		}
		@media (min-width: 1200px) {
			&:before{
				width: calc((100% - 60px) / 4);
			}
		}
	}
	.slick-list{
		grid-column: 1 / 4;
		grid-row: 1 / 3;
		margin: 0 -10px;
		@media (max-width: 575.98px) {
			padding-right: 100px;
		}
	}
	.slick-slide{
		margin: 0 10px;
	}
	.slick-arrow{
		all: unset;
		align-self: center;
		grid-row: 1;
		position: relative;
		z-index: 1;
		aspect-ratio: 36 / 80;
		width: 40px;
		border-radius: 8px;
		background: rgba(255, 255, 255, 0.6);
		font-size: 0;
		cursor: pointer;
		&:before{
			content: "";
			position: absolute;
			top: 0;
			width: calc(100% - 8px);
			height: 100%;
			background: var(--color);
			-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;"><polyline points="8 4 16 12 8 20"/></svg>') no-repeat center / 24px;
		}
	}
	.slick-prev{
		grid-column: 1;
		transform: translateX(-8px);
		&:before{
			right: 0;
			transform: scale(-1, 1);
		}
	}
	.slick-next{
		grid-column: 3;
		transform: translateX(8px);
		&:before{
			left: 0;
		}
	}
}

#toc{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.2s ease-out;
	z-index: 200;
	&.fixed{
		visibility: visible;
		opacity: 1;
	}
	& h3{
		display: grid;
		grid-template-columns: auto auto;
		justify-content: center;
		align-items: center;
		column-gap: 8px;
		min-height: 40px;
		padding: 4px 16px;
		background: var(--color-theme);
		color: #fff;
		cursor: pointer;
		&:after{
			content: "";
			aspect-ratio: 1;
			width: 16px;
			background: currentColor;
			-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="7 10 12 4 2 4 7 10"/></svg>') no-repeat center / contain;
		}
		&.open:after{
			transform: scale(1, -1);
		}
	}
	& h3+div{
		background: #fff;
		border-bottom: 1px solid currentColor;
		padding: 16px;
		max-height: 8em;
		overflow-y: auto;
	}
	& ul{
		display: grid;
		grid-gap: 8px;
		&[lsc-lb="List"]{
			display: none;
		}
		&>li{
			&:nth-child(n+6){
				display: none;
			}
		}
		& span{
			display: inherit;
			grid-gap: inherit;
		}
	}
	& a{
		display: grid;
		grid-template-columns: 1em 1fr;
		grid-gap: 16px;
		color: inherit;
		text-decoration: none;
		&:before{
			content: "";
			aspect-ratio: 1;
			background: var(--color-theme-sub);
			transform: translateY(0.325em);
			-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="10 7 4 2 4 12 10 7"/></svg>') no-repeat center / contain;
		}
		&:hover{
			color: var(--color-theme);
		}
	}
	@media (min-width: 768px) {
		display: none;
	}
}

.animation{
	animation-duration: 1s;
	transition: visibility 0.2s ease-out 0.2s;
	&:not(.done){
		animation-name: none;
	}
}

.title{
	display: grid;
	grid-template-columns: 1em 1fr;
	grid-gap: 8px 16px;
	font-weight: 700;
	font-size: clamp(20px, calc(24 / 768 * 100vw), 24px);
	letter-spacing: 0.05em;
	&:before{
		content: "";
		aspect-ratio: 1;
		background: var(--color-theme-sub);
		transform: translateY(0.325em);
		-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><polyline points="16 10 16 22"/><path d="M13.33,0h-2.67v2.67h2.67V0ZM2.67,10.67H0v2.67h2.67v-2.67ZM6.35,4.45l-1.89-1.89-1.89,1.89,1.89,1.89,1.89-1.89ZM21.43,4.46l-1.89-1.89-1.89,1.89,1.89,1.89,1.89-1.89ZM12,4c-4.42,0-8,3.58-8,8s3.58,8,8,8,8-3.58,8-8-3.58-8-8-8ZM17.64,19.55l1.89,1.89,1.89-1.89-1.89-1.89-1.89,1.89ZM21.33,10.67v2.67h2.67v-2.67h-2.67ZM10.67,24h2.67v-2.67h-2.67v2.67ZM2.57,19.54l1.89,1.89,1.89-1.89-1.89-1.89-1.89,1.89Z"/></svg>') no-repeat center / contain;
	}
	&:after{
		content: "";
		grid-column: 1 / 3;
		height: 6px;
		border: 0 solid currentColor;
		border-width: 1px 0;
	}
}

.photos{
	margin-top: clamp(24px, calc(32 / 1200 * 100vw), 32px);
	overflow: hidden;
	& ul:has(li[data-caption]){
		display: grid;
		& li{
			grid-column: 1;
			grid-row: 1;
		}
		&:not(.slick-initialized) li:nth-child(n+2){
			visibility: hidden;
		}
	}
	& li{
		&[data-caption]:not([data-caption=""]){
			display: grid;
			grid-row-gap: 16px;
			&:before{
				content: attr(data-caption);
				order: 1;
				text-align: center;
			}
		}
		& img{
			aspect-ratio: 3 / 2;
			object-fit: contain;
			border-radius: 10px;
		}
	}
	.slick-slider{
		display: grid;
		grid-template-columns: auto 1fr auto;
		grid-template-rows: auto 1fr;
		&:before{
			content: "";
			grid-column: 1 / 4;
			grid-row: 1;
			aspect-ratio: 3 / 2;
			visibility: hidden;
		}
	}
	.slick-list{
		grid-column: 1 / 4;
		grid-row: 1 / 3;
		margin: 0 -10px;
	}
	.slick-slide{
		margin: 0 10px;
	}
	.slick-arrow{
		all: unset;
		align-self: center;
		grid-row: 1;
		position: relative;
		z-index: 1;
		aspect-ratio: 36 / 80;
		width: 40px;
		border-radius: 8px;
		background: rgba(255, 255, 255, 0.6);
		font-size: 0;
		cursor: pointer;
		&:before{
			content: "";
			position: absolute;
			top: 0;
			width: calc(100% - 8px);
			height: 100%;
			background: var(--color);
			-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;"><polyline points="8 4 16 12 8 20"/></svg>') no-repeat center / 24px;
		}
	}
	.slick-prev{
		grid-column: 1;
		transform: translateX(-8px);
		&:before{
			right: 0;
			transform: scale(-1, 1);
		}
	}
	.slick-next{
		grid-column: 3;
		transform: translateX(8px);
		&:before{
			left: 0;
		}
	}
	.slick-dots{
		grid-column: 1 / 4;
		grid-row: 2;
		align-self: start;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		grid-gap: 16px clamp(24px, calc(32 / 576 * 100vw), 32px);
		padding: 24px 0;
		&:has(li:only-child){
			display: none;
			}
		li{
			display: contents;
			}
		button{
			all: unset;
			box-sizing: border-box;
			aspect-ratio: 1;
			width: 9px;
			background: #b3b3b3;
			border-radius: 100%;
			font-size: 0;
			overflow: hidden;
			.slick-active &{
				background: var(--color-theme-sub);
			}
		}
	}
}

.lead{
	margin-top: clamp(24px, calc(40 / 1200 * 100vw), 40px);
	font-weight: 700;
}

.text{
	margin-top: clamp(24px, calc(40 / 1200 * 100vw), 40px);
	.lead+&{
		margin-top: 16px;
	}
	.screen &{
		padding: 24px;
		background: #fff;
		border-radius: 10px;
	}
}

.links{
	margin-top: clamp(32px, calc(40 / 1200 * 100vw), 40px);
	& ul{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		grid-gap: 16px 24px;
	}
	& li{
		display: contents;
	}
	& a{
		display: grid;
		grid-template-columns: auto auto;
		justify-content: center;
		align-items: center;
		column-gap: 1em;
		min-width: min(100%, 320px);
		min-height: clamp(56px, calc(64 / 768 * 100vw), 64px);
		padding: 8px 24px;
		background: #fff;
		border: 1px solid #b3b3b3;
		border-radius: clamp(28px, calc(40 / 768 * 100vw), 40px);
		color: inherit;
		font-size: clamp(16px, calc(18 / 768 * 100vw), 18px);
		letter-spacing: 0.1em;
		text-align: center;
		text-decoration: none;
		&:before,
		&:after{
			content: "";
			grid-column: 2;
			grid-row: 1;
			aspect-ratio: 1;
			width: clamp(24px, calc(32 / 768 * 100vw), 32px);
		}
		&:before{
			background: currentColor;
			border-radius: 100%;
		}
		&:after{
			background: #fff;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" style="fill: none; stroke: white; stroke-linecap: round; stroke-linejoin: round;"><polyline points="10 16 22 16"/><polyline points="18 12 22 16 18 20"/></svg>') no-repeat center / contain;
		}
		&:hover{
			background: var(--color);
			border-color:transparent;
			color: #fff;
			&:after{
				background: var(--color);
			}
		}
	}
}

.columnLeft,
.columnRight{
	margin-top: clamp(32px, calc(40 / 1200 * 100vw), 40px);
	.links{
		& ul{
			flex-direction: column;
			align-content: center;
		}
	}
	@media (min-width: 768px) {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr;
		column-gap: 24px;
		&:has(.lead){
			grid-template-rows: auto 1fr;
		}
		.photos{
			grid-row: 1 / 4;
		}
	}
}

.columnLeft{
	@media (min-width: 768px) {
		.photos{
			grid-column: 1;
		}
	}
}

.columnRight{
	@media (min-width: 768px) {
		.photos{
			grid-column: 2;
		}
	}
}

.documents{
	display: grid;
	margin-top: clamp(48px, calc(64 / 1200 * 100vw), 64px);
	overflow: hidden;
	&:after{
		content: "";
		height: 1px;
		background: var(--color);
		-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 1"><rect x="2" width="4" height="1"/></svg>') repeat center / 8px 1px;
	}
	& h4{
		position: relative;
		justify-self: start;
		display: grid;
		margin-right: 50%;
		padding: 8px 16px 0 16px;
		border-width: 1px 1px 0 1px;
		border-radius: 8px 8px 0 0;
		font-weight: 700;
		font-size: clamp(18px, calc(20 / 768 * 100vw), 20px);
		text-align: center;
		&:before,
		&:after{
			content: "";
			position: absolute;
			left: 100%;
			bottom: 0;
			width: 100vw;
			height: 16px;
		}
		&:before{
			background: var(--detail-bg);
		}
		&:after{
			border: 0 solid currentColor;
			border-width: 0 0 1px 1px;
			border-radius: 0 0 0 8px;
		}
	}
	& h4+div{
		margin: 24px 0;
	}
	& ul{
		display: grid;
		grid-gap: 16px;
	}
	& li{
		display: contents;
	}
	& a{
		display: grid;
		grid-template-columns: auto 24px;
		justify-self: start;
		align-items: center;
		column-gap: 8px;
		color: inherit;
		font-weight: 700;
		font-size: 14px;
		letter-spacing: 0.1em;
		text-decoration: none;
		&:after{
			content: "";
			aspect-ratio: 1;
			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;"><polyline points="1 14 1 23 23 23 23 14"/><polyline points="12 1 12 16"/><polyline points="7 11 12 16 17 11"/></svg>') no-repeat center / contain;
		}
		&:hover{
			color: var(--color-theme);
		}
	}
}

.movie{
	display: grid;
	grid-row-gap: clamp(32px, calc(48 / 1200 * 100vw), 48px);
	margin-top: clamp(32px, calc(48 / 1200 * 100vw), 48px);
	& iframe{
		justify-self: center;
		aspect-ratio: 16 / 9;
		width: 100%;
		height: auto;
	}
}

.movie2{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr));
	grid-gap: clamp(32px, calc(48 / 1200 * 100vw), 48px) 24px;
	margin-top: clamp(32px, calc(48 / 1200 * 100vw), 48px);
	& dl{
		display: grid;
		align-content: start;
	}
	& dt{
		position: relative;
		display: grid;
		padding: 16px 8px;
		font-weight: 700;
		font-size: clamp(18px, calc(20 / 768 * 100vw), 20px);
		&:after{
			content: "";
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 1px;
			height: 1px;
			background: var(--color);
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 1"><rect width="4" height="1"/></svg>') repeat center left / 8px 1px;
		}
	}
	& dd{
		&:nth-of-type(1){
			padding: 16px 8px;
		}
		&:has(iframe){
			order: -1;
		}
		&:has(a){
			display: flex;
			justify-content: center;
		}
		& iframe{
			justify-self: center;
			aspect-ratio: 16 / 9;
			width: 100%;
			height: auto;
		}
		& a{
			display: grid;
			grid-template-columns: auto auto;
			justify-content: center;
			align-items: center;
			column-gap: 1em;
			min-width: min(100%, 320px);
			min-height: clamp(56px, calc(64 / 768 * 100vw), 64px);
			padding: 8px 24px;
			background: #fff;
			border: 1px solid #b3b3b3;
			border-radius: clamp(28px, calc(40 / 768 * 100vw), 40px);
			color: inherit;
			font-size: clamp(16px, calc(18 / 768 * 100vw), 18px);
			letter-spacing: 0.1em;
			text-align: center;
			text-decoration: none;
			&:before,
			&:after{
				content: "";
				grid-column: 2;
				grid-row: 1;
				aspect-ratio: 1;
				width: clamp(24px, calc(32 / 768 * 100vw), 32px);
			}
			&:before{
				background: currentColor;
				border-radius: 100%;
			}
			&:after{
				background: #fff;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" style="fill: none; stroke: white; stroke-linecap: round; stroke-linejoin: round;"><polyline points="10 16 22 16"/><polyline points="18 12 22 16 18 20"/></svg>') no-repeat center / contain;
			}
			&:hover{
				background: var(--color);
				border-color:transparent;
				color: #fff;
				&:after{
					background: var(--color);
				}
			}
		}
	}
}

.article2{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr));
	grid-gap: clamp(32px, calc(48 / 1200 * 100vw), 48px) 24px;
	margin-top: clamp(32px, calc(48 / 1200 * 100vw), 48px);
	& dl{
		display: grid;
		align-content: start;
		&:not(:has(img)){
		}
	}
	& dt{
		position: relative;
		display: grid;
		padding: 16px 8px;
		font-weight: 700;
		font-size: clamp(18px, calc(20 / 768 * 100vw), 20px);
		&:after{
			content: "";
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 1px;
			height: 1px;
			background: var(--color);
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 1"><rect width="4" height="1"/></svg>') repeat center left / 8px 1px;
		}
	}
	& dd{
		&:nth-of-type(1){
			padding: 16px 8px;
		}
		&:has(img){
			order: -1;
		}
		&:has(a){
			display: flex;
			justify-content: center;
		}
		& img{
			aspect-ratio: 3 / 2;
			object-fit: contain;
			border-radius: 10px;
		}
		& a{
			display: grid;
			grid-template-columns: auto auto;
			justify-content: center;
			align-items: center;
			column-gap: 1em;
			min-width: min(100%, 320px);
			min-height: clamp(56px, calc(64 / 768 * 100vw), 64px);
			padding: 8px 24px;
			background: #fff;
			border: 1px solid #b3b3b3;
			border-radius: clamp(28px, calc(40 / 768 * 100vw), 40px);
			color: inherit;
			font-size: clamp(16px, calc(18 / 768 * 100vw), 18px);
			letter-spacing: 0.1em;
			text-align: center;
			text-decoration: none;
			&:before,
			&:after{
				content: "";
				grid-column: 2;
				grid-row: 1;
				aspect-ratio: 1;
				width: clamp(24px, calc(32 / 768 * 100vw), 32px);
			}
			&:before{
				background: currentColor;
				border-radius: 100%;
			}
			&:after{
				background: #fff;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" style="fill: none; stroke: white; stroke-linecap: round; stroke-linejoin: round;"><polyline points="10 16 22 16"/><polyline points="18 12 22 16 18 20"/></svg>') no-repeat center / contain;
			}
			&:hover{
				background: var(--color);
				border-color:transparent;
				color: #fff;
				&:after{
					background: var(--color);
				}
			}
		}
	}
}

.article3{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(calc(50% - 24px), 240px), 1fr));
	grid-gap: clamp(32px, calc(48 / 1200 * 100vw), 48px) 24px;
	margin-top: clamp(32px, calc(48 / 1200 * 100vw), 48px);
	& dl{
		display: grid;
		grid-template-rows: auto auto auto 1fr;
		align-content: start;
		&:not(:has(img)){
			grid-template-rows: auto auto 1fr;
		}
		&:after{
			content: "";
			grid-row: 3;
			height: 1px;
			background: var(--color);
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 1"><rect width="4" height="1"/></svg>') repeat center left / 8px 1px;
		}
	}
	& dt{
		display: grid;
		padding: 16px 8px;
		font-weight: 700;
		font-size: clamp(16px, calc(18 / 768 * 100vw), 18px);
	}
	& dd{
		&:nth-of-type(1){
			margin: 16px 8px;
			font-size: clamp(14px, calc(16 / 768 * 100vw), 16px);
			&.limit{
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				max-height: calc(1.65em * 3);
				overflow: hidden;
			}
		}
		&:has(img){
			order: -1;
		}
		&:has(a){
		}
		& img{
			aspect-ratio: 3 / 2;
			object-fit: contain;
			border-radius: 10px;
		}
		& a{
			display: grid;
			grid-template-columns: auto auto;
			justify-content: center;
			align-items: center;
			column-gap: 1em;
			min-height: clamp(56px, calc(64 / 768 * 100vw), 64px);
			padding: 8px 1em;
			background: #fff;
			border: 1px solid #b3b3b3;
			border-radius: clamp(28px, calc(40 / 768 * 100vw), 40px);
			color: inherit;
			font-size: clamp(14px, calc(16 / 768 * 100vw), 16px);
			letter-spacing: 0.1em;
			text-align: center;
			text-decoration: none;
			&:before,
			&:after{
				content: "";
				grid-column: 2;
				grid-row: 1;
				aspect-ratio: 1;
				width: clamp(24px, calc(32 / 768 * 100vw), 32px);
			}
			&:before{
				background: currentColor;
				border-radius: 100%;
			}
			&:after{
				background: #fff;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" style="fill: none; stroke: white; stroke-linecap: round; stroke-linejoin: round;"><polyline points="10 16 22 16"/><polyline points="18 12 22 16 18 20"/></svg>') no-repeat center / contain;

			}
			&:hover{
				background: var(--color);
				border-color:transparent;
				color: #fff;
				&:after{
					background: var(--color);
				}
			}
		}
	}
}

.articleSlide{
	margin-top: clamp(32px, calc(48 / 1200 * 100vw), 48px);
	& dl{
		position: relative;
		display: grid;
		grid-row-gap: 8px;
		&:nth-child(n+2){
			display: none;
		}
	}
	& dt{
		margin: 0 8px;
		font-weight: 700;
		font-size: clamp(14px, calc(16 / 768 * 100vw), 16px);
	}
	& dd{
		&:nth-of-type(1){
			display: none;
		}
		&:has(img){
			order: -1;
		}
		&:has(a){
			display: contents;
		}
		& img{
			aspect-ratio: 3 / 2;
			object-fit: contain;
			border-radius: 10px;
		}
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
		}
	}
	&.slick-slider{
		display: grid;
		grid-template-columns: auto 1fr auto;
		@media (max-width: 575.98px) {
			overflow: hidden;
		}
		&:before{
			content: "";
			grid-column: 1 / 4;
			grid-row: 1;
			aspect-ratio: 3 / 2;
			width: calc(100% - 100px);
			visibility: hidden;
		}
		@media (min-width: 576px) {
			&:before{
				width: calc((100% - 20px) / 2);
			}
		}
		@media (min-width: 768px) {
			&:before{
				width: calc((100% - 40px) / 3);
			}
		}
		@media (min-width: 1200px) {
			&:before{
				width: calc((100% - 60px) / 4);
			}
		}
	}
	.slick-list{
		grid-column: 1 / 4;
		grid-row: 1 / 3;
		margin: 0 -10px;
		overflow: visible;
		@media (max-width: 575.98px) {
			padding-right: 100px;
		}
	}
	.slick-slide{
		margin: 0 10px;
	}
	.slick-arrow{
		all: unset;
		align-self: center;
		grid-row: 1;
		position: relative;
		z-index: 1;
		aspect-ratio: 36 / 80;
		width: 40px;
		border-radius: 8px;
		background: rgba(255, 255, 255, 0.6);
		font-size: 0;
		cursor: pointer;
		&:before{
			content: "";
			position: absolute;
			top: 0;
			width: calc(100% - 8px);
			height: 100%;
			background: var(--color);
			-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;"><polyline points="8 4 16 12 8 20"/></svg>') no-repeat center / 24px;
		}
	}
	.slick-prev{
		grid-column: 1;
		transform: translateX(-8px);
		&:before{
			right: 0;
			transform: scale(-1, 1);
		}
	}
	.slick-next{
		grid-column: 3;
		transform: translateX(8px);
		&:before{
			left: 0;
		}
	}
	.slick-dots{
		grid-column: 1 / 4;
		grid-row: 3;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		grid-gap: 16px clamp(24px, calc(32 / 576 * 100vw), 32px);
		margin-top: 24px;
		&:has(li:only-child){
			display: none;
			}
		li{
			display: contents;
			}
		button{
			all: unset;
			box-sizing: border-box;
			aspect-ratio: 1;
			width: 9px;
			background: #b3b3b3;
			border-radius: 100%;
			font-size: 0;
			overflow: hidden;
			.slick-active &{
				background: var(--color-theme-sub);
			}
		}
	}
}

.column{
	display: grid;
	grid-template-columns: 0 1fr 0;
	grid-gap: 16px 24px;
	margin-top: clamp(24px, calc(40 / 1200 * 100vw), 40px);
	padding-bottom: 32px;
	background: #fcf6bb;
	border-radius: 10px;
	overflow: hidden;
	&:before{
		content: attr(data-index);
		grid-column: 1 / 4;
		grid-row: 1;
		display: grid;
		align-items: center;
		min-height: clamp(56px, calc(64 / 1200 * 100vw), 64px);
		margin-bottom: 8px;
		background: var(--color-theme) url("/common/images/pattern.webp") center;
		color: #fff;
		font-size: clamp(18px, calc(20 / 768 * 100vw), 20px);
		text-align: center;
	}
	:has([content*="okayama-kanko.jp/mimasaka/"]) &:before,
	:has([content*="okayama-kanko.jp/wake/"]) &:before,
	:has([content*="okayama-kanko.jp/setouchi/"]) &:before{
		background: var(--color-theme);
	}
	&>*{
		grid-column: 2;
	}
	&:has(figure){
		@media (min-width: 768px) {
			grid-template-columns: 0 min(30vw, 400px) 1fr 0;
			grid-template-rows: auto auto 1fr;
			&:before{
				grid-column: 1 / 5;
			}
			&>*{
				grid-column: 3;
			}
			& figure{
				grid-column: 2;
				grid-row: 2 / 5;
				margin-right: 8px;
			}
		}
	}
	& h4{
		font-size: clamp(18px, calc(20 / 768 * 100vw), 20px);
	}
	& h4+div{
	}
	& h4+div+div{
		display: flex;
		justify-content: center;
		margin-top: 16px;
		& a{
			display: grid;
			grid-template-columns: auto auto;
			justify-content: center;
			align-items: center;
			column-gap: 1em;
			min-width: min(100%, 320px);
			min-height: clamp(56px, calc(64 / 768 * 100vw), 64px);
			padding: 8px 24px;
			background: #fff;
			border: 1px solid #b3b3b3;
			border-radius: clamp(28px, calc(40 / 768 * 100vw), 40px);
			color: inherit;
			font-size: clamp(16px, calc(18 / 768 * 100vw), 18px);
			letter-spacing: 0.1em;
			text-align: center;
			text-decoration: none;
			&:before,
			&:after{
				content: "";
				grid-column: 2;
				grid-row: 1;
				aspect-ratio: 1;
				width: clamp(24px, calc(32 / 768 * 100vw), 32px);
			}
			&:before{
				background: currentColor;
				border-radius: 100%;
			}
			&:after{
				background: #fff;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" style="fill: none; stroke: white; stroke-linecap: round; stroke-linejoin: round;"><polyline points="10 16 22 16"/><polyline points="18 12 22 16 18 20"/></svg>') no-repeat center / contain;
			}
			&:hover{
				background: var(--color);
				border-color:transparent;
				color: #fff;
				&:after{
					background: var(--color);
				}
			}
		}
	}
	& figure{
		order: -1;
		& img{
			aspect-ratio: 3 / 2;
			object-fit: contain;
			border-radius: 10px;
		}
	}
}

.comment{
	grid-column: 2;
	display: grid;
	grid-row-gap: clamp(24px, calc(40 / 1200 * 100vw), 40px);
	margin-top: clamp(24px, calc(32 / 1200 * 100vw), 32px);
	& dl{
		display: grid;
		grid-template-columns: clamp(80px, calc(100 / 1200 * 100vw), 100px) clamp(24px, calc(40 / 1200 * 100vw), 40px) 1fr;
		grid-template-rows: auto 1fr;
		grid-gap: 8px 0;
		font-size: clamp(14px, calc(16 / 768 * 100vw), 16px);
		&:not(:has(img)):before{
			content: "";
			grid-column: 1;
			grid-row: 1;
			align-self: end;
			aspect-ratio: 1;
			width: clamp(64px, calc(80 / 1200 * 100vw), 80px);
			background: #f2f2f2 url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path opacity="0.2" d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512l388.6 0c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304l-91.4 0z"/></svg>') center bottom no-repeat;
			background-size: 70%;
			border-radius: 100%;
		}
		&:after{
			content: "";
			grid-column: 2;
			grid-row: 1 / 3;
			justify-self: end;
			aspect-ratio: 1;
			width: clamp(16px, calc(24 / 1200 * 100vw), 24px);
			margin-top: clamp(32px, calc(40 / 1200 * 100vw), 40px);
			background: #fdf3d4;
			transform: translateY(-50%);
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><polygon points="0 12 24 0 24 24 0 12"/></svg>') no-repeat center / contain;
		}
	}
	& dt{
		font-weight: 700;
	}
	& dd{
		&:nth-of-type(1){
			grid-row: 1 / 3;
			align-self: start;
			display: grid;
			align-items: center;
			padding: clamp(24px, calc(32 / 1200 * 100vw), 32px);
			background: #fdf3d4;
			border-radius: clamp(10px, calc(20 / 1200 * 100vw), 20px);
		}
		&:has(img){
			grid-column: 1;
			grid-row: 1;
			align-self: end;
			width: clamp(64px, calc(80 / 1200 * 100vw), 80px);
		}
		& img{
			aspect-ratio: 1;
			border-radius: 100%;
			object-fit: contain;
			overflow: hidden;
		}
	}
	.commentRight {
		grid-template-columns: 1fr clamp(32px, calc(48 / 1200 * 100vw), 48px) 80px;
		&:before {
			grid-column: 3;
			justify-self: end;
		}
		&:after{
			justify-self: start;
			background: #d0eaff;
			transform: translateY(-50%) scale(-1, 1);
		}
		& dd{
			&:nth-of-type(1){
				grid-column: 1;
				background: #d0eaff;
			}
			&:has(img){
				grid-column: 3;
				justify-self: end;
			}
		}
	}
}

.citation{
	display: grid;
	grid-gap: 16px 24px;
	width: min(100%, 800px);
	margin: clamp(48px, calc(64 / 1200 * 100vw), 64px) auto 0 auto;
	padding: 24px;
	background: #fcf6bb;
	border-radius: 10px;
	overflow: hidden;
	&:has(figure){
		@media (min-width: 768px) {
			grid-template-columns: min(30vw, 300px) 1fr;
			grid-template-rows: auto 1fr;
			&>*{
				grid-column: 2;
			}
			& figure{
				grid-column: 1;
				grid-row: 1 / 4;
			}
		}
	}
	& h4{
		display: grid;
		grid-gap: 16px;
		margin-top: 8px;
		font-size: clamp(18px, calc(20 / 768 * 100vw), 20px);
		&:after{
			content: "";
			height: 1px;
			background: var(--color);
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 1"><rect width="4" height="1"/></svg>') repeat center left / 8px 1px;
		}
	}
	& h4+div{
	}
	& h4+div+div{
		display: flex;
		justify-content: end;
		margin-top: 16px;
		& a{
			display: grid;
			grid-template-columns: auto auto;
			justify-content: center;
			align-items: center;
			column-gap: 1em;
			color: inherit;
			font-size: clamp(16px, calc(18 / 768 * 100vw), 18px);
			letter-spacing: 0.1em;
			text-align: center;
			text-decoration: none;
			&:before,
			&:after{
				content: "";
				grid-column: 2;
				grid-row: 1;
				aspect-ratio: 1;
				width: clamp(24px, calc(32 / 768 * 100vw), 32px);
			}
			&:before{
				background: currentColor;
				border-radius: 100%;
			}
			&:after{
				background: #fff;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" style="fill: none; stroke: white; stroke-linecap: round; stroke-linejoin: round;"><polyline points="10 16 22 16"/><polyline points="18 12 22 16 18 20"/></svg>') no-repeat center / contain;

			}
			&:hover{
				color: var(--color-theme);
			}
		}
	}
	& figure{
		order: -1;
		& img{
			aspect-ratio: 3 / 2;
			object-fit: contain;
			border-radius: 10px;
		}
	}
}

.map{
	display: grid;
	margin-top: clamp(32px, calc(40 / 1200 * 100vw), 40px);
	& menu+span{
		display: block;
		padding-top: 32px;
	}
}

.mapBody{
	position: relative;
	background: #ccc;
	border-radius: 10px;
	overflow: hidden;
	@media (max-width: 767.98px) {
		height: min(640px, 80dvh);
	}
	@media (min-width: 768px) {
		aspect-ratio: 3 / 2;
	}
	@media (min-width: 922px) {
		aspect-ratio: 2 / 1;
	}
	& iframe,
	& [id^="gMap"]{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}

.mapList{
	padding: 24px 0;
	@media (max-width: 575.98px) {
		max-height: 240px;
		overflow-y: auto;
	}
	& ul{
		counter-reset: count;
		display: grid;
		grid-gap: 16px 24px;
		@media (min-width: 576px) {
			grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
		}
	}
	& li{
		display: grid;
		grid-template-columns: 40px auto 32px;
		align-items: center;
		grid-gap: 16px;
		cursor: pointer;
		&:before{
			counter-increment: count;
			content: counter(count);
			align-self: start;
			display: grid;
			align-content: center;
			aspect-ratio: 1;
			background: var(--color-theme-sub);
			border-radius: 100%;
			color: #fff;
			text-align: center;
		}
		&:after{
			content: "";
			aspect-ratio: 1;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" style="fill: none; stroke: white; stroke-linecap: round; stroke-linejoin: round;"><polyline points="10 16 22 16"/><polyline points="18 12 22 16 18 20"/></svg>') no-repeat center / contain;
		}
	}
}

.mapText{
	display: grid;
	grid-row-gap: 16px;
	&:before{
		content: "";
		height: 1px;
		background: var(--color);
		-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 1"><rect width="4" height="1"/></svg>') repeat center left / 8px 1px;
	}
}

.mapToggle{
	all: unset;
	box-sizing: border-box;
	position: relative;
	display: grid;
	grid-template-columns: auto auto;
	justify-content: center;
	align-items: center;
	column-gap: 1em;
	width: min(100%, 400px);
	min-height: clamp(56px, calc(64 / 768 * 100vw), 64px);
	margin: 0 auto;
	padding: 8px 48px;
	background: #fff;
	border: 1px solid #b3b3b3;
	border-radius: clamp(28px, calc(40 / 768 * 100vw), 40px);
	font-size: clamp(14px, calc(18 / 768 * 100vw), 18px);
	letter-spacing: 0.1em;
	text-align: center;
	cursor: pointer;
	transition: all 0.2s ease-out;
	&:before,
	&:after{
		content: "";
		aspect-ratio: 1;
		background: currentColor;
	}
	&:before{
		width: 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="M15.32,6.59c0-1.83-1.5-3.31-3.33-3.31s-3.31,1.48-3.31,3.31,1.48,3.31,3.31,3.31,3.33-1.48,3.33-3.31ZM13.59,19.08c2.14-4.23,5.13-9.81,5.13-12.44C18.72,3.04,15.73.11,11.99,0c-3.74.11-6.73,3.04-6.73,6.64,0,3.13,3.61,9.79,5.08,12.44-5.29.18-9.35,1.2-9.35,2.45,0,1.37,4.92,2.48,11,2.48s11.02-1.11,11.02-2.48c0-1.25-4.1-2.27-9.42-2.45ZM7.21,6.59c0-2.64,2.14-4.78,4.78-4.78s4.8,2.14,4.8,4.78-2.15,4.78-4.8,4.78-4.78-2.14-4.78-4.78ZM11.99,22.62c-3.67,0-6.64-.68-6.64-1.5,0-.72,2.28-1.33,5.31-1.47.12.21.37.69.4.74.16.3.47,1.14.93,1.3.46-.15.79-.99.94-1.3.11-.22.25-.5.37-.74,3.04.14,5.34.75,5.34,1.47,0,.83-2.98,1.5-6.65,1.5Z"/></svg>') no-repeat center / contain;
	}
	&:after{
		position: absolute;
		top: 50%;
		right: 24px;
		width: 16px;
		transform: translateY(-50%);
		-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="0 8 16 8"/><polyline points="8 0 8 16"/></svg>') no-repeat center / contain;
	}
	&:hover{
		background: var(--color);
		border-color:transparent;
		color: #fff;
	}
	&.open:after{
		-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="0 8 16 8"/></svg>') no-repeat center / contain;
	}
}