/* CSS Document */

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

#subject{
	justify-self: center;
	margin: clamp(24px, 4.8vw, 32px) 0;
	}

#detail{
	display: grid;
	padding: clamp(16px, 3.6vw, 24px);
	border: 2px solid var(--color-point);
	background: #fff;
	color: var(--color);
	margin-bottom: clamp(64px, 14.4vw, 96px);
	}
	#detail > *{
		grid-column: 1;
		}
	#detail #back{
		border: 0 solid var(--color-border);
		}
	@media (max-width: 767.98px) {
		#detail #back{
			margin-top: clamp(48px, 9.6vw, 64px);
			border-width: 1px 0;
			}
		}
	@media (min-width: 768px) {
		#detail{
			}
		#detail #detailHeader{
			grid-column: 1 / 3;
			}
		#detail #detailHeader+#detailText{
			grid-column: 1 / 3;
			}
		#detail #detailPhotos{
			grid-column: 2;
			grid-row: 2 / 6;
			justify-self: end;
			width: min(35vw, 320px);
			margin-left: 48px;
			}
		#detail #back{
			grid-column: 1 / 3;
			margin-top: 48px;
			border-top-width: 1px;
			transform: translateY(24px)
			}
		}
	@media (min-width: 992px) {
		#detail{
			padding: 48px;
			}
		#detail #back{
			transform: translateY(48px)
			}
		}

#detailHeader{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	grid-gap: 8px 16px;
	padding-bottom: clamp(16px, 3.6vw, 24px);
	border-bottom: 1px solid var(--color-border);
	}
	#detailHeader h2{
		order: 1;
		width: 100%;
		font: 500 clamp(20px, 4.2vw, 28px) var(--font-min);
		line-height: 1.65;
		}
	#detailHeader time{
		color: #595757;
		}
	#detailHeader ul{
		display: grid;
		grid-template-areas: 'main';
		width: 120px;
		}
	#detailHeader li{
		grid-area: main;
		padding: 2px;
		background: #fff;
		border: 1px solid var(--color-border);
		font-size: 14px;
		font-weight: 500;
		text-align: center;
		text-transform: uppercase;
		}
		#detailHeader li.tagCheck{
			background: var(--color-variable);
			}

#detailPhotos{
	margin-top: clamp(24px, 4.8vw, 32px);
	}
	#detailPhotos ul{
		display: grid;
		grid-gap: 24px;
		}
	#detailPhotos li{
		display: grid;
		grid-template-areas: 'photo';
		grid-gap: 8px;
		}
		#detailPhotos li:not([data-caption=""]):after{
			content: attr(data-caption);
			color: #4d4d4d;
			font-size: 14px;
			line-height: 1.65;
			pointer-events: none;
			}
		#detailPhotos li img{
			grid-area: photo;
			width: 100%;
			height: 100%;
			aspect-ratio: 1 / 0.667;
			object-fit: contain;
		background: #ccc;
			}

#detailText{
	margin-top: clamp(24px, 4.8vw, 32px);
	color: #4d4d4d;
	line-height: 1.65;
	}

:is(#detailDocuments, #detailLinks){
	margin-top: clamp(32px, 7.2vw, 48px);
	}
	:is(#detailDocuments, #detailLinks) h3{
		display: grid;
		grid-template-columns: 3px auto;
		grid-gap: 10px;
		font-size: clamp(18px, 3.6vw, 24px);
		font-weight: 700;
		line-height: 1.65;
		}
		:is(#detailDocuments, #detailLinks) h3:before{
			content: "";
			margin: 0.3em 0;
			background: var(--color-point);
			transform: translateY(0.1em);
			}
	:is(#detailDocuments, #detailLinks) h3+div{
		margin-top: clamp(16px, 3.6vw, 24px);
		}
	:is(#detailDocuments, #detailLinks) ul{
		display: grid;
		justify-content: start;
		grid-gap: 8px;
		}
	:is(#detailDocuments, #detailLinks) a{
		display: grid;
		grid-template-columns: auto 18px;
		grid-gap: 16px;
		align-items: center;
		min-height: 50px;
		margin: 0 auto;
		padding: 4px 16px;
		background: #fff;
		border: 1px solid var(--color-border);
		color: inherit;
		text-align: center;
		line-height: 1.65;
		text-decoration: none;
		}
		:is(#detailDocuments, #detailLinks) a:after{
			content: "";
			aspect-ratio: 1;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17.16 15.71"><polygon points="9.31 0 8.6 .71 15.25 7.35 0 7.35 0 8.35 15.25 8.35 8.6 15 9.31 15.71 17.16 7.85 9.31 0"/></svg>') center no-repeat;
			-webkit-mask-size: 17.16px 15.71px;
			background: currentColor;
			}
	@media (min-width: 576px) {
		:is(#detailDocuments, #detailLinks) h3{
			grid-template-columns: 4px auto;
			}
		}

#detailDocuments{}
	#detailDocuments a{
		grid-template-columns: 16px auto;
		}
		#detailDocuments a:after{
			order: -1;
			-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="m1,5H0v11h11v-1H1V5ZM4,0v12h12V0H4Zm11,11H5V1h10v10Z"/></svg>') ;
			-webkit-mask-size: 16px 16px;
			background: var(--color-point);
			}

#back{
	display: flex;
	justify-content: center;
	}
	#back a{
		display: grid;
		grid-template-columns: auto 50px;
		grid-template-areas: 'text icon';
		align-items: center;
		justify-content: center;
		grid-gap: 16px;
		min-height: 90px;
		padding: 8px;
		color: #595757;
		font-weight: 500;
		line-height: 1.65;
		text-decoration: none;
		}
		#back a:before{
			content: "";
			grid-area: icon;
			width: 50px;
			height: 50px;
			border: 1px solid var(--color);
			border-radius: 100%;
			}
		#back a:after{
			content: "";
			grid-area: icon;
			justify-self: center;
			width: 18px;
			height: 16px;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17.16 15.71"><polygon points="9.31 0 8.6 .71 15.25 7.35 0 7.35 0 8.35 15.25 8.35 8.6 15 9.31 15.71 17.16 7.85 9.31 0" /></svg>') center no-repeat;
			-webkit-mask-size: 17.16px 15.71px;
			background: var(--color);
			}