/* CSS Document */

:where(#subject, #detail, #back){
	width: var(--wrap);
	margin: var(--space) auto;
	}

#detailTitle{
	display: grid;
	grid-gap: calc(var(--space) / 2) 0;
	}
	#detailTitle:before{
		content: attr(data-type);
		grid-column: 1;
		grid-row: 1;
		padding: min(calc(var(--space) / 2), 1.5em);
		border: solid currentColor;
		border-width: 1px 0 0 1px;
		font-family: var(--font-min);
		}
		#detailTitle[data-type="お知らせ"]{}
			#detailTitle[data-type="お知らせ"]:before{
				color: var(--primary-color);
				}
		#detailTitle[data-type="イベント"]{}
			#detailTitle[data-type="イベント"]:before{
				color: var(--secondary-color);
				}
	#detailTitle h2{
		font-family: var(--font-min);
		font-size: min(4vw, 1.5em);
		letter-spacing: 0.1em;
		line-height: 1.3em;
		}
	#detailTitle time{
		grid-column: 1;
		grid-row: 1;
		justify-self: end;
		align-self: center;
		}

#detailPhoto{
	width: min(100%, 855px);
	margin: var(--space) auto 0 auto;
	}
	#detailPhoto li{
		position: relative;
		background: #ccc;
		}
		#detailPhoto li:before{
			content: "";
			display: block;
			padding-top: 66.66%;
			}
		#detailPhoto li img{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			}
	#detailPhoto .slick-arrow{
		position: absolute;
		top: 50%;
		width: 2em;
		height: 2em;
		padding: 0;
		background: none;
		border: 1px solid #fff;
		white-space: nowrap;
		text-indent: 100vw;
		overflow: hidden;
		transform: translateY(-50%) rotate(-45deg);
		z-index: 1;
		}
	#detailPhoto .slick-arrow{
		position: absolute;
		top: 50%;
		}
	#detailPhoto .slick-prev{
		left: 1em;
		border-width: 1px 0 0 1px;
		}
	#detailPhoto .slick-next{
		right: 1em;
		border-width: 0 1px 1px 0;
		}

#detailText{
	margin-top: calc(var(--space) / 2);
	}
	#detailText p+p{
		margin-top: 1em;
		}

#detailData{
	margin-top: var(--space);
	}
	#detailData dl{
		display: grid;
		grid-template-columns: auto auto;
		justify-content: start;
		grid-gap: 1em;
		line-height: 1.5em;
		}

#back{
	display: flex;
	justify-content: center;
	}


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


/* Small */
@media (max-width: 575.98px) {
/*575px以下*/
}


/* Medium */
@media (min-width: 576px) {
/*576px以上*/
}
@media (min-width: 576px) and (max-width: 991.98px) {
/*576px～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以上*/
}