/* CSS Document */

main{
	display: grid;
	grid-template-rows: auto 1fr auto
}

#detail{
	width: var(--wrap);
	margin: clamp(32px, 7.2vw, 48px) auto;
	display: grid;
	}

#detailTitle{
	display: flex;
	flex-direction: column-reverse;
	align-items: flex-start;
	margin-bottom: calc(clamp(32px, 7.2vw, 48px) / 2);
	}
	#detailTitle div{
		display: flex;
		gap: 16px;
		margin-bottom: 0.5em;
		}
	#detailTitle time{
		font-weight: normal;
		opacity: 0.5;
		}
	#detailTitle ul{
		opacity: 0.5;
		}

#detailFigure{
	margin-bottom: 16px;
	}

#detailBody{}
	#detailBody .gallery{
		display: flex;
		justify-content: center;
		align-items: center;
		grid-gap: 1em;
		margin-top: clamp(32px, 7.2vw, 48px);
		}
		#detailBody .gallery img{
			width: 100%;
			}
	#detailBody .files{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		grid-gap: 1em;
		margin-top: clamp(32px, 7.2vw, 48px);
		}

#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 a[href]:not([href^="http"]) {
			display: grid;
			grid-template-columns: min(30vw,200px) 1fr;
			}
		#detailLink a[href]:not([href^="http"]):before {
			content: attr(data-href);
			display: block;
			color: var(--color-theme);
			padding: 10px;
			grid-column: 2;
			}
		#detailLink a[href]:not([href^="http"]):after {
			content: attr(data-desc);
			display: block;
			padding: 10px;
			grid-column: 2;
			}
		#detailLink a[href]:not([href^="http"]) img {
			display: block;
			width: min(30vw,200px);
			aspect-ratio: 1;
			object-fit: cover;
			grid-row: 1/3;
			}
	#detailLink .microlink_card{
		display: flex;
		width: 100%;
		max-width: 100%;
		border: none;
		background: none;
		color: inherit;
		font-family: inherit;
		font-size: inherit;
		}
		#detailLink img+.microlink_card {
			display: grid;
			grid-template-columns: 0 auto;
			}
	#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 > *{
			}
		#detailLink img+.microlink_card {
			display: grid;
			grid-template-rows: 0 auto;
			grid-template-columns: auto;
			}
#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以上*/
}