/* CSS Document */

#detail{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	&>* {
		grid-column: 2;
	}
	& header{
		grid-column: 1 / 4;
		padding: clamp(24px, calc(56 / 1200 * 100dvw), 56px) 0;
		background: rgba(var(--color-theme-rgb), 0.15);
	}
}

#detailTitle{
	display: grid;
	grid-gap: 16px;
	margin: clamp(24px, calc(56 / 1200 * 100dvw), 56px) 0;
	& time{
		order: -1;
		color: var(--color-theme);
	}
}

#detailBody{
	.gallery{
		margin-top: clamp(56px, calc(96 / 1200 * 100dvw), 96px);
		& h3{
			display: none;
		}
		& ul{
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
			justify-content: center;
			align-items: center;
			grid-gap: clamp(16px, calc(32 / 1200 * 100dvw), 32px);
		}
		& a{
			position: relative;
			text-decoration: none;
			&:after{
				content: attr(data-caption);
				color: #000;
				margin-top: 1em;
			}
		}
		& img{
			aspect-ratio: 6 / 4;
			width: 100%;
			background: var(--color-bg);
			object-fit: contain;
			border-radius: 8px;
			overflow: hidden;
		}
	}
	.documents{
		margin-top: clamp(56px, calc(96 / 1200 * 100dvw), 96px);
		padding-top: 24px;
		border-top: 2px dotted #c2c2c2;
		& h3+div{
			padding: 16px 0 0 8px;
		}
		& ul{
			display: grid;
			justify-items: start;
			grid-row-gap: 8px;
		}
		& li{
			display: contents;
		}
		& a{
			display: grid;
			grid-template-columns: auto 1fr;
			column-gap: 0.5em;
			font-weight: 700;
			color: var(--color);
			&:before{
				content: "";
				aspect-ratio: 1;
				width: 18px;
				background: var(--color-theme);
				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 24 24"><path d="M3.9,13.2c0-.24.09-.47.26-.64s.4-.26.64-.26h8.4c.24,0,.47.09.64.26.17.17.26.4.26.64s-.09.47-.26.64c-.17.17-.4.26-.64.26H4.8c-.24,0-.47-.09-.64-.26-.17-.17-.26-.4-.26-.64ZM3.9,16.8c0-.24.09-.47.26-.64.17-.17.4-.26.64-.26h8.4c.24,0,.47.09.64.26s.26.4.26.64-.09.47-.26.64c-.17.17-.4.26-.64.26H4.8c-.24,0-.47-.09-.64-.26-.17-.17-.26-.4-.26-.64ZM17.37,6.41L12.19.77h0c-.45-.48-1.08-.77-1.76-.77H2.4C1.08,0,0,1.08,0,2.4v18c0,1.32,1.08,2.4,2.4,2.4h13.2c1.32,0,2.4-1.08,2.4-2.4v-12.36c0-.57-.2-1.17-.63-1.63ZM14.51,6.84h-2.88v-3.14l2.88,3.14ZM2.4,20.4V2.4h6.83v5.64c0,.32.13.62.35.85.22.23.53.35.85.35h5.17v11.16H2.4Z"/></svg>') no-repeat center / contain;
			}
			&:hover{
				color: var(--color-theme);
			}
		}
	}
}





#detailLink{}
	#detailLink *{
		margin: 0;
		padding: 0;
		color: inherit;
		font-size: inherit;
		}
	#detailLink a{
		display: block;
		border: 1px solid #ccc;
		text-decoration: none;
		transition: border-color 0.2s ease-out;
		}
		#detailLink a:hover{
			border-color: #0068b7;
			}
	#detailLink .microlink_card{
		display: flex;
		width: 100%;
		max-width: 100%;
		border: none;
		background: none;
		color: inherit;
		font-family: inherit;
		font-size: inherit;
		}
	#detailLink .microlink_card__media_video_wrapper{
		flex: 0 0 12em;
		}
	#detailLink .microlink_card__content{
		flex: 0 0 calc(100% - 12em);
		justify-content: flex-start;
		padding: 1em;
		}
		#detailLink .microlink_card__content *{
			flex-grow: inherit;
			}
	#detailLink .microlink_card__content_title{}
		#detailLink .microlink_card__content_title p{
			font-size: 1.2em;
			line-height: 1.5em;
			}
	#detailLink .microlink_card__content_description{
		width: 100%;
		margin-top: 0.5em;
		}
	#detailLink .microlink_card__content_url{
		margin-top: auto;
		padding-top: 1em;
		font-size: 0.85em;
		line-height: 1em;
		opacity: 0.5;
		}

#detailFile{
	position: relative;
	display: flex;
	}
	#detailFile *{
		margin: 0;
		padding: 0;
		color: inherit;
		font-size: inherit;
		}
	#detailFile figure{
		position: relative;
		flex: 0 0 12em;
		background: #f2f2f2;
		order: -1;
		}
	#detailFile dl{
		display: flex;
		flex-direction: column;
		flex: 0 0 calc(100% - 12em);
		padding: 1em;
		}
	#detailFile dt{
		font-weight: bold;
		font-size: 1.2em;
		line-height: 1.5em;
		}
	#detailFile dt+dd{
		margin-top: 0.5em;
		}
	#detailFile dt+dd+dd{
		margin-top: auto;
		padding-top: 1em;
		font-size: 0.85em;
		line-height: 1em;
		opacity: 0.5;
		}
	#detailFile a{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: 1px solid #ccc;
		color: transparent;
		z-index: 1;
		transition: border-color 0.2s ease-out;
		}
		#detailFile a:hover{
			border-color: #0068b7;
			}
	#detailFile .thumb{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		padding: 0;
		}

#detailTemplate{
	margin-top: clamp(32px, 7.2vw, 48px);
	}

[class^="ratio"]{
	overflow: hidden;
	}
	[class^="ratio"] h3{
		all: initial;
		display: block;
		font: inherit;
		color: inherit;
		font-size: min(5vw, 1.5em);
		line-height: 1.5em;
		}
	[class^="ratio"] h3+div{
		display: grid;
		grid-gap: 2em;
		margin-top: 1.5em;
		}
	[class^="ratio"] figure{
		display: block;
		}
		[class^="ratio"] figure img{
			width: 100%;
			height: auto;
			}
		[class^="ratio"] figure figcaption{
			display: block;
			margin-top: 0.5em;
			font-size: 0.875em;
			line-height: 1.4em;
			text-align: center;
			}
[class^="ratio"]+[class^="ratio"]{
	margin-top: clamp(32px, 7.2vw, 48px);
	}
[class^="ratio"] .text-center{
	text-align: center;
	}
[class^="ratio"] .text-left{
	text-align: right;
	}
[class^="ratio"] .text-right{
	text-align: right;
	}
@media (max-width: 767.98px) and (orientation:landscape), (min-width: 768px) {
	[class^="ratio1-1"]{}
		[class^="ratio1-1"] h3+div{
			grid-template-columns: 1fr 1fr;
			}
	[class^="ratio1-1-1"]{}
		[class^="ratio1-1-1"] h3+div{
			grid-template-columns: 1fr 1fr 1fr;
			}
	[class^="ratio3-7"]{}
		[class^="ratio3-7"] h3+div{
			grid-template-columns: 3fr 7fr;
			}
	[class^="ratio7-3"]{}
		[class^="ratio7-3"] h3+div{
			grid-template-columns: 7fr 3fr;
			}
}

#pagenation{
	padding-top: 0;
	}




/* for lower */
@media (max-width: 1399.98px) {
/*1399px以下*/
}
@media (max-width: 1199.98px) {
/*1199px以下*/
}
@media (max-width: 991.98px) {
/*991px以下*/
}


/* Small */
@media (max-width: 767.98px) {
/*767以下px*/
#detailLink{}
	#detailLink .microlink_card{
		display: flex;
		flex-direction: column;
		height: auto;
		}
		#detailLink .microlink_card > *{
			}
#detailFile{
	display: flex;
	flex-direction: column;
	}
}
@media (max-width: 767.98px) and (orientation:portrait) {
/*767px以下 縦向き*/
#detailBody{}
	#detailBody .gallery{
		flex-wrap: wrap;
		}
		#detailBody .gallery span{
			width: 100%;
			}
}
@media (max-width: 767.98px) and (orientation:landscape) {
/*767px以下 横向き*/
}
@media (max-width: 767.98px) and (orientation:landscape), (min-width: 768px) {
/*767px以下 横向き, 768px以上,*/
#detailBody{}
	#detailBody .gallery{}
		#detailBody .gallery span{
			width: 50%;
			}
}
@media (max-width: 767.98px) and (orientation:landscape), (min-width: 768px) and (max-width: 991.98px) {
/*767px以下 横向き, 768px～991px*/
}


/* Medium */
@media (min-width: 768px) {
/*768px以上*/
#detailLink{}
	#detailLink .microlink_card__content_title p{
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		}
	#detailLink .microlink_card__content_description p{
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 4;
		height: 5.8em;
		text-overflow: inherit;
		white-space: inherit;
		overflow: hidden;
		}
#detailFile{}
	#detailFile dl{
		height: 12em;
		}
	#detailFile dt{
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		}
	#detailFile dt+dd{
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 4;
		height: 5.8em;
		overflow: hidden;
		}
}
@media (min-width: 768px) and (max-width: 1199.98px) {
/*768px～1199px*/
}
@media (min-width: 768px) and (max-width: 991.98px) {
/*768px～991px*/
}
@media (max-width: 767.98px) and (orientation:landscape), (min-width: 768px) {
/*767px以下 横向き, 768px以上,*/
}
@media (max-width: 767.98px) and (orientation:landscape), (min-width: 768px) and (max-width: 991.98px) {
/*767px以下 横向き, 768px～991px*/
}


/* Large */
@media (min-width: 992px) {
/*992px以上*/
}
@media (min-width: 992px) and (max-width: 1199.98px) {
/*992px～1199px*/
}


/* X-Large */
@media (min-width: 1200px) {
/*1200px以上*/
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
/*1200px～1399px*/
}


/* XX-Large */
@media (min-width: 1400px) {
/*1400px以上*/
}