/* CSS Document */

#detail{
	display: grid;
	grid-template-columns: 1fr min(100%, 1044px) 1fr;
	justify-content: centere;
	width: var(--wrap);
	margin: 48px auto clamp(80px, calc(120 / 1200 * 100vw), 120px) auto;
	&:before{
		content: "";
		grid-column: 1 / 4;
		height: 6px;
		border: 1px solid currentColor;
		border-width: 1px 0;
	}
	&:after{
		content: "";
		grid-column: 1 / 4;
		grid-row: 3;
		border-bottom: 1px solid currentColor;
	}
	&>*{
		grid-column: 2;
	}
	#detailText{
		margin-top: 48px;
		}
	#detailDocuments{
		margin-top: 48px;
		}
	#detailLinks{
		margin-top: 48px;
	}
	#detailPhotos{
		margin-top: 48px;
	}
	@media (min-width: 992px) {
		&:after{
			margin-bottom: 32px;
		}
		&:has(#detailPhotos){
			#detailText{
				grid-row: 4;
				width: calc(100% - 440px);
			}
			#detailDocuments{
				grid-row: 5;
				width: calc(100% - 440px);
			}
			#detailLinks{
				grid-row: 6;
				width: calc(100% - 440px);
			}
			#detailPhotos{
				grid-row: 4 / 7;
				align-self: start;
				grid-template-columns: 360px;
				justify-content: end;
				z-index: 1;
			}
		}
	}
}

#detailHeader{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	grid-gap: clamp(8px, calc(16 / 768 * 100vw), 16px);
	padding: 16px 0 48px 0;
	& h2{
		order: 1;
		width: 100%;
		margin-top: 24px;
		font-weight: 700;
		font-size: clamp(22px, calc(24 / 768 * 100vw), 24px);
		letter-spacing: 0.1em;
	}
	& h2+div{
		display: contents;
		& time{
			align-self: center;
			font-size: clamp(14px, calc(16 / 768 * 100vw), 16px);
		}
		& ul{
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			column-gap: clamp(4px, calc(8 / 768 * 100vw), 8px);
		}
		& li{
			display: flex;
			align-items: center;
			font-size: clamp(12px, calc(16 / 768 * 100vw), 16px);
			&[class]{
				min-width: 32px;
				padding: 4px 1em;
				background: var(--color-tagNew);
				border-radius: 16px;
				color: #fff;
				&.tagCheck{
					background: var(--color-tagCheck);
				}
			}
			&:not([class]){
				&:before,
				&:after{
					content: "-";
				}
			}
		}
	}
	#detailShare{
		margin-left: auto;
	}
}

#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;
			}
		}
	}
}

#detailText{
	color: #666666;
}

#detailDocuments{
	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;
	}
	& h3{
		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: #fff;
		}
		&:after{
			border: 0 solid currentColor;
			border-width: 0 0 1px 1px;
			border-radius: 0 0 0 8px;
		}
	}
	& h3+div{
		margin: 24px 16px;
	}
	& 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);
		}
	}
}

#detailLinks{
	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;
	}
	& h3{
		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: #fff;
		}
		&:after{
			border: 0 solid currentColor;
			border-width: 0 0 1px 1px;
			border-radius: 0 0 0 8px;
		}
	}
	& h3+div{
		margin: 24px 16px;
	}
	& 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;"><rect x="7.5" y="3.5" width="13" height="13"/><polyline points="3.5 8.5 3.5 20.5 15.5 20.5"/></svg>') no-repeat center / contain;
		}
		&:hover{
			color: var(--color-theme);
		}
	}
}

#detailPhotos{
	display: grid;
	grid-gap: 32px;
	pointer-events: none;
	& figure{
		display: grid;
		grid-row-gap: 16px;
		& figcaption{
			font-size: clamp(12px, calc(14 / 768 * 100vw), 14px);
		}
	}
	& a{
		display: block;
		pointer-events: all;
	}
	& img{
		border-radius: 10px;
	}
}

#pagenation{
	margin-bottom: clamp(80px, calc(120 / 1200 * 100vw), 120px);
}