/* CSS Document */

#main{
	background: var(--object_01) no-repeat calc(0px - clamp(200px, calc(296 / 992 * 100dvw), 296px)) clamp(64px, calc(96 / 768 * 100dvw), 96px) / auto clamp(240px, calc(376 / 992 * 100dvw), 376px), var(--object_01) no-repeat calc(100% + clamp(200px, calc(296 / 992 * 100dvw), 296px)) calc(100% - 16px) / auto clamp(240px, calc(376 / 992 * 100dvw), 376px);
}

#detail{
	display: grid;
	grid-template-columns: min(var(--wrap-fit), 960px);
	justify-content: center;
	padding: clamp(24px, calc(48 / 768 * 100dvw), 48px) 0 clamp(64px, calc(96 / 768 * 100dvw), 96px) 0;
	overflow: hidden;
	#text{
		margin-top: clamp(32px, calc(40 / 768 * 100dvw), 40px);
	}
	#documents,
	#links{
		margin-top: clamp(32px, calc(40 / 768 * 100dvw), 40px);
	}
	#photo{
		grid-column: 1;
		grid-row: 2;
		margin-top: clamp(32px, calc(40 / 768 * 100dvw), 40px);
	}
}

#title{
	display: grid;
	grid-row-gap: 8px;
	& h2{
		display: grid;
		align-items: baseline;
		column-gap: 0.5em;
		font-weight: 600;
		font-size: clamp(24px, calc(40 / 768 * 100dvw), 40px);
		font-family: var(--font-min);
		letter-spacing: 0.05em;
		&:after{
			content: attr(data-ruby);
			grid-row: 1;
			font-size: 0.3em;
			letter-spacing: 0.05em;
		}
	}
	& h2+div{
		order: -1;
		display: grid;
		grid-gap: 4px 16px;
		@media (min-width: 576px) {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
		}
		& time{
			color: #666666;
			font-size: clamp(12px, calc(15 / 768 * 100dvw), 15px);
		}
		& ul{
			display: flex;
			flex-wrap: wrap;
			grid-gap: 4px;
			&:not(:has(li)){
				display: none;
			}
		}
		& li{
			display: grid;
			align-items: center;
			min-width: 5em;
			min-height: clamp(20px, calc(24 / 768 * 100dvw), 24px);
			padding: 0.25em 1em 0 1em;
			background: var(--color-theme);
			border-radius: clamp(10px, calc(12 / 768 * 100dvw), 12px);
			color: #fff;
			font-weight: 700;
			font-size: clamp(10px, calc(14 / 768 * 100dvw), 14px);
			line-height: 1.25;
			text-align: center;
			&.tagCheck{
				background: #e11c24;
				text-transform: uppercase;
			}
			&.tagNew{
				background: #dc501e;
				text-transform: uppercase;
			}
			&[data-cat="1"]{
				background: #005a8c;
			}
			&[data-cat="2"]{
				background: #5a8c46;
			}
			&[data-cat="3"]{
				background: #365383;
			}
			&[data-cat="4"]{
				background: #b09934;
			}
		}
	}
	& h2+div+div{
		color: var(--color-theme);
		font-weight: 600;
		font-size: clamp(18px, calc(24 / 768 * 100dvw), 24px);
		letter-spacing: 0.05em;
	}
}

#text{
	letter-spacing: 0.03em;
}

#documents,
#links{
	display: grid;
	& h3{
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: baseline;
		column-gap: 8px;
		color: var(--color-theme);
		font-weight: 700;
		font-size: clamp(16px, calc(18 / 768 * 100dvw), 18px);
		font-family: "Zen Kaku Gothic New", var(--font);
		letter-spacing: 0.05em;
		&:before{
			content: "";
			width: 4px;
			height: 1em;
			background: #a1cbed;
			transform: translateY(0.1em);
		}
	}
	& h3+div{
		justify-self: center;
		width: min(100%, 840px);
		margin-top: 16px;
	}
	& ul{
		display: flex;
		flex-wrap: wrap;
		grid-gap: 16px;
	}
	& li{
		display: contents;
	}
	& a{
		display: grid;
		grid-template-columns: 1fr 8px;
		align-items: center;
		column-gap: 8px;
		min-width: min(100%, 200px);
		min-height: 56px;
		padding: 4px 24px;
		background: white;
		border: 1px solid #365383;
		border-radius: 28px;
		color: var(--color-theme);
		font-weight: 600;
		text-align: center;
		text-decoration: none;
		&:after{
			content: "";
			aspect-ratio: 1;
			width: 20px;
		}
	}
}

#documents{
	& a{
		&: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 20 20" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5px;"><line x1="10.23" y1="1.39" x2="10.23" y2="8.39"/><polyline points="13.76 9.39 10.23 12.92 6.69 9.39"/><line x1="3.23" y1="15.91" x2="17.23" y2="15.91"/></svg>') no-repeat center / contain;
		}
	}
}

#links{
	& a{
		&:after{
			background: var(--color-theme) url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" style="fill: none; stroke: white; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5px;"><line x1="4.87" y1="10" x2="11.87" y2="10"/><polyline points="11.87 6.46 15.4 10 11.87 13.54"/></svg>') no-repeat center / contain;
			border-radius: 100%;
		}
	}
}

#photo{
	display: grid;
	grid-gap: clamp(24px, calc(32 / 768 * 100dvw), 32px) clamp(8px, calc(16 / 768 * 100dvw), 16px);
	& dl{
		display: grid;
		align-content: start;
		grid-row-gap: 8px;
		&:only-child{
			justify-self: center;
			width: min(100%, 800px);
		}
	}
	& dt{
		order: 1;
		font-weight: 600;
		font-size: clamp(14px, calc(18 / 768 * 100dvw), 18px);
		letter-spacing: 0.05em;
		text-align: center;
		&:empty{
			display: none;
		}
	}
	& img{
		aspect-ratio: 4 / 3;
		object-fit: contain;
	}
	@media (max-width: 991.98px) {
		&:has(dl:nth-child(3)){
			grid-template-columns: repeat(2, 1fr);
			& dl:nth-child(1){
				grid-column: 1 / 3;
			}
		}
	}
	@media (min-width: 992px) {
		&:has(dl:nth-child(2)){
			grid-template-columns: repeat(2, 1fr);
		}
		&:has(dl:nth-child(3)){
			grid-template-columns: repeat(3, 1fr);
		}
	}
}

#pagenation{
	margin-bottom: clamp(64px, calc(104 / 768 * 100dvw), 104px);
}