/* CSS Document */

#main{
	margin-bottom: clamp(72px, calc(96 / 1200 * 100vw), 96px);
}

#detail{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	margin-top: clamp(24px, calc(32 / 1200 * 100vw), 32px);
	#detailBody,
	#detailFiles,
	#detailLinks{
		width: min(100%, 800px);
		margin-inline: auto;
	}
	#detailBody{
		margin-top: clamp(24px, calc(32 / 1200 * 100vw), 32px);
		}
	#detailFiles,
	#detailLinks{
		margin-top: clamp(48px, calc(64 / 1200 * 100vw), 64px);
	}
	#detailImages{
		grid-row: 2;
		margin-top: clamp(24px, calc(32 / 1200 * 100vw), 32px);
	}
}

#detailTitle{
	display: grid;
	grid-row-gap: 8px;
	& h2{
		order: 1;
		color: var(--color-theme);
		font: 700 40px 'eb-garamond', var(--font-min);
	}
	& h2+div{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		grid-gap: 8px 24px;
		font-weight: 600;
		font-size: 18px;
		letter-spacing: 0.06em;
	}
	& time{
		color: #707070;
	}
	& ul{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		column-gap: 8px;
	}
	& li{
		display: flex;
		align-items: center;
		min-width: 80px;
		min-height: 24px;
		padding: 0px 16px;
		border: 1px solid #41583F;
		border-radius: 12px;
		color: inherit;
		font-size: 12px;
		text-decoration: none;
		text-align: center;
		& span{
			display: flex;
			align-items: center;
			padding: 0px 16px;
			background: #E4EDE4;
			border-radius: 12px;
			transform: translateX(16px);
		}
		&.tagCheck{
			background: #41583F;
			color: #fff;
		}
		&.tagNew{
			background: #8D968D;
		}
	}
}

#detailBody{
	letter-spacing: 0.06em;
}

#detailFiles{
	& ul{
		display: grid;
		grid-gap: 16px;
	}
	& li{
		display: contents;
	}
	& a{
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		column-gap: 8px;
		min-height: 56px;
		padding: 8px clamp(24px, calc(32 / 768 * 100vw), 32px);
		border: 1px solid #41583F;
		border-radius: 28px;
		color: inherit;
		font-size: 24px;
		letter-spacing: 0.06em;
		text-decoration: none;
		&:after{
			content: "";
			aspect-ratio: 1;
			width: 24px;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="fill: none; stroke: black;"><path d="M10.93,0v17.5l5.07-5"/><path d="M.5,10.5v13h23v-13"/></svg>') no-repeat center / contain;
		}
	}
}

#detailLinks{
	& ul{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		grid-gap: 16px;
	}
	& li{
		display: contents;
	}
	& a{
		display: grid;
		grid-template-columns: 1fr auto;
		justify-content: center;
		align-items: center; 
		column-gap: 8px;
		min-width: min(100%, 186px);
		min-height: clamp(48px, calc(56 / 768 * 100vw), 56px);
		padding: 8px clamp(24px, calc(32 / 768 * 100vw), 32px);
		border: 1px solid #41583F;
		border-radius: clamp(24px, calc(28 / 768 * 100vw), 28px);
		color: inherit;
		font: 600 20px var(--font-min);
		text-align: center;
		text-decoration: none;
		&:after{
			content: "";
			aspect-ratio: 1;
			width: 32px;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 16" style="fill: none; stroke: black;"><polyline points="0 8 31 8 20 1"/></svg>') no-repeat center / contain;
		}
	}
}

#detailImages{
	& ul:has(li[data-caption]){
		display: grid;
		& li{
			grid-column: 1;
			grid-row: 1;
		}
		&:not(.slick-initialized) li:nth-child(n+2){
			visibility: hidden;
		}
	}
	& img{
		aspect-ratio: 3 / 2;
		object-fit: cover;
	}
	.slick-slider{
		display: grid;
		grid-template-columns: 0 1fr 0;
		.slick-list{
			grid-column: 2;
			grid-row: 1;
		}
		.slick-arrow{
			align-self: center;
			justify-self: center;
			grid-row: 1;
		}
		.slick-prev{
			grid-column: 1;
		}
		.slick-next{
			grid-column: 3;
		}
		.slick-dots{
			grid-column: 2;
			grid-row: 2;
			margin-top: clamp(24px, calc(32 / 1200 * 100vw), 32px);
		}
	}
	.slick-arrow{
		all: unset;
		box-sizing: border-box;
		cursor: pointer;
		position: relative;
		aspect-ratio: 1;
		width: clamp(32px, calc(64 / 1200 * 100vw), 64px);
		background: var(--color-theme);
		border-radius: 100%;
		color: #fff;
		font-size: 0;
		overflow: hidden;
		z-index: 1;
		&:before{
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="fill: none; stroke: black; stroke-width: 2px;"><polyline points="8 2 18 12 8 22"/></svg>') no-repeat center / 50%;
		}
		.slick-prev&:before{
			transform: scale(-1, 1);
		}
	}
	.slick-dots{
		display: flex;
		justify-content: center;
		align-items: center;
		grid-gap: 8px;
		margin: 0 24px;
		z-index: 1;
		& li{
			grid-row: 1;
			width: min(100%, 48px);
			height: 2px;
			background: #707070;
			cursor: pointer;
			overflow: hidden;
			&.slick-active{
				background: #000;
			}
		}
		& button{
			visibility: hidden;
		}
	}
}

#pagenation{
	margin-top: clamp(72px, calc(96 / 1200 * 100vw), 96px);
}