/* CSS Document */

main{
	margin-bottom: clamp(32px, calc(64 / 1200 * 100vw), 64px);
}

#detail{}

#detailHeader{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	&>*{
		grid-column: 2;
	}
	& h2{
		margin-top: clamp(24px, calc(32 / 1200 * 100vw), 32px);
		color: var(--color-theme);
		font-weight: 700;
		font-size: clamp(24px, calc(32 / 768 * 100vw), 32px);
	}
	& h2+div{
		order: 1;
		margin-top: 24px;
		font-weight: 700;
	}
	#detailDate{
		margin-top: 8px;
	}
	#detailCategory{
		margin-top: 16px;
	}
	#detailPhoto{
		grid-column: 1 / 4;
		grid-row: 1;
	}
}

#detailDate{
	& dl{
		display: flex;
		flex-wrap: wrap;
		column-gap: 4px;
		font-weight: 700;
	}
	& dt{
		display: flex;
		column-gap: 4px;
		&:after{
			content: ":";
		}
	}
}

#detailCategory{
	& ul{
		display: flex;
		flex-wrap: wrap;
		grid-gap: 8px;
		& li{
		}
	}
	& li{
		display: contents;
	}
	& a{
		display: grid;
		align-items: center;
		min-height: 24px;
		padding: 0 1em;
		background: #736357;
		border-radius: 12px;
		color: #fff;
		font-weight: 700;
		font-size: 14px;
		text-align: center;
		text-decoration: none;
	}
}

#detailPhoto{
	& img{
		display: block;
		aspect-ratio: 3 / 2;
		width: 100%;
		object-fit: contain;
		@media (min-width: 992px) {
			aspect-ratio: unset;
			height: min(50vw, 640px);
		}
	}
}

#detailArticle{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	overflow: hidden;
	.title{
		margin-top: clamp(48px, calc(64 / 1200 * 100vw), 64px);
	}
	.photos{
		margin-top: clamp(24px, calc(32 / 1200 * 100vw), 32px);
	}
	.text{
		margin-top: clamp(16px, calc(24 / 1200 * 100vw), 24px);
	}
	.table{
		margin: auto;
		margin-top: clamp(32px, calc(48 / 1200 * 100vw), 48px);
		.title+&{
			margin-top: clamp(24px, calc(32 / 1200 * 100vw), 32px);
		}
	}
	.links{
		margin-top: clamp(32px, calc(48 / 1200 * 100vw), 48px);
		.title+&{
			margin-top: clamp(24px, calc(32 / 1200 * 100vw), 32px);
		}
	}
	.documents{
		margin: auto;
		margin-top: clamp(32px, calc(48 / 1200 * 100vw), 48px);
		.title+&{
			margin-top: clamp(24px, calc(32 / 1200 * 100vw), 32px);
		}
	}
	.column{
		margin-top: clamp(32px, calc(48 / 1200 * 100vw), 48px);
		.title+&{
			margin-top: clamp(24px, calc(32 / 1200 * 100vw), 32px);
		}
	}
	.movie{
		margin-top: clamp(32px, calc(48 / 1200 * 100vw), 48px);
		.title+&{
			margin-top: clamp(24px, calc(32 / 1200 * 100vw), 32px);
		}
	}
}

.title{
	display: grid;
	grid-gap: 0.25em 0.5em;
	font-weight: 700;
	font-size: clamp(24px, calc(28 / 768 * 100vw), 28px);
	&:after{
		content: "";
		height: clamp(2px, calc(3 / 768 * 100vw), 3px);
		background: linear-gradient(90deg, #ff7a5c, transparent);
	}
	@media (min-width: 576px) {
		justify-content: center;
	}
}

.photos{
	& ul{
		display: grid;
	}
	& li{
		grid-column: 1;
		grid-row: 1;
		position: relative;
		border-radius: clamp(24px, calc(32 / 1200 * 100vw), 32px);
		overflow: hidden;
		&:not([data-caption=""]):before{
			content: attr(data-caption);
			position: absolute;
			left: 0;
			bottom: 0;
			display: grid;
			align-items: end;
			width: 100%;
			height: min(50%, 120px);
			padding: clamp(16px, calc(24 / 1200 * 100vw), 24px);
			background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), transparent);
			border-radius: 0 0 16px 16px;
			color: #fff;
		}
	}
	& img{
		aspect-ratio: 3 / 2;
		object-fit: cover;
	}
	.slick-slider{
		display: grid;
		grid-template-columns: 0 1fr 0;
	}
	.slick-list{
		grid-column: 2;
	}
	.slick-arrow{
		align-self: center;
		justify-self: center;
		z-index: 1;
	}
}

.text{
	justify-self: center;
	width: min(100%, 980px);
}

.table{
	justify-self: center;
	width: min(100%, 980px);
	& table{
		display: grid;
		grid-gap: 8px 24px;
		width: 100%;
		&:after{
			content: "";
			border-bottom: 1px solid currentColor;
			margin-top: 8px;
		}
	}
	& tbody{
		display: contents;
	}
	& tr{
		display: contents;
		&:before{
			content: "";
			margin-bottom: 8px;
			border-bottom: 1px solid currentColor;
		}
		&:nth-of-type(n+2):before{
			margin-top: 8px;
		}
	}
	& td{
		all: unset;
		display: block;
		&:nth-child(1){
			color: var(--color-theme);
			font-weight: 700;
		}
		.fr-view table &{
			border: none;
		}
	}
	@media (min-width: 576px) {
		& table{
			grid-template-columns: auto 1fr;
			&:after{
				grid-column: 1 / 3;
			}
		}
		& tr:before{
			grid-column: 1 / 3;
		}
		& td:nth-child(1){
			max-width: 240px;
		}
	}
}

.links{
	& ul{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		grid-gap: 16px clamp(24px, calc(48 / 1200 * 100vw), 48px);
	}
	& li{
		display: contents;
	}
	& a{
		display: grid;
		grid-template-columns: auto auto;
		justify-content: center;
		align-items: center;
		column-gap: 8px;
		min-width: clamp(220px, calc(260 / 768 * 100vw), 260px);
		min-height: 48px;
		padding: 4px 24px;
		background: #fff;
		border: 2px solid var(--color-theme);
		border-radius: 24px;
		color: inherit;
		font-weight: 700;
		text-decoration: none;
		&:before{
			content: "";
			aspect-ratio: 1;
			width: 14px;
			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 14 14"><polygon points="13 7 0 14 0 0 13 7"/></svg>') no-repeat center / contain;
		}
	}
}

.documents{
	justify-self: center;
	width: min(100%, 980px);
	& ul{
		display: grid;
		&:before{
			content: "";
			border-bottom: 1px solid currentColor;
		}
	}
	& li{
		border-bottom: 1px solid currentColor;
	}
	& a{
		display: grid;
		grid-template-columns: 24px 1fr;
		align-items: center;
		column-gap: 8px;
		min-height: 48px;
		padding: 4px 0;
		color: inherit;
		font-weight: 700;
		text-decoration: none;
		&:before{
			content: "";
			aspect-ratio: 1;
			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 448 512"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M256 32c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 210.7-41.4-41.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l96 96c12.5 12.5 32.8 12.5 45.3 0l96-96c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 242.7 256 32zM64 320c-35.3 0-64 28.7-64 64l0 32c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-32c0-35.3-28.7-64-64-64l-46.9 0-56.6 56.6c-31.2 31.2-81.9 31.2-113.1 0L110.9 320 64 320zm304 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"/></svg>') center no-repeat;
			-webkit-mask-size: contain;
		}
	}
}

.column{
	position: relative;
	display: grid;
	grid-gap: 16px clamp(24px, calc(48 / 1200 * 100vw), 48px);
	padding: clamp(24px, calc(48 / 1200 * 100vw), 48px);
	border: 1px solid currentColor;
	border-radius: clamp(24px, calc(32 / 1200 * 100vw), 32px);
	@media (min-width: 768px) {
		grid-template-rows: auto 1fr;
		&:has(figure){
			grid-template-columns: 1fr auto;
		}
	}
	& h4{
		color: var(--color-theme);
		font-weight: 700;
		font-size: clamp(20px, calc(27 / 768 * 100vw), 24px);
		letter-spacing: 0.1em;
		z-index: 1;
	}
	& h4+div+div{
		display: flex;
		justify-content: center;
		& a{
			display: grid;
			grid-template-columns: auto auto;
			justify-content: center;
			align-items: center;
			column-gap: 8px;
			min-width: clamp(220px, calc(260 / 768 * 100vw), 260px);
			min-height: 48px;
			padding: 4px 24px;
			background: var(--color-theme);
			border-radius: 24px;
			color: #fff;
			font-weight: 700;
			text-decoration: none;
			&:before{
				content: "";
				aspect-ratio: 1;
				width: 14px;
				background: currentColor;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><polygon points="13 7 0 14 0 0 13 7"/></svg>') no-repeat center / contain;
			}
		}
	}
	& figure{
		grid-row: 2;
		z-index: 1;
		@media (min-width: 768px) {
			grid-column: 2;
			grid-row: 1 / 4;
			width: min(30vw, 360px);
		}
		& img{
			aspect-ratio: 3 / 2;
			object-fit: cover;
			border-radius: 16px;
		}
	}
}

.movie{
	& iframe{
		aspect-ratio: 16 / 9;
		width: 100%;
		height: auto;
		border-radius: clamp(24px, calc(32 / 1200 * 100vw), 32px);
	}
}

.slick-arrow{
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	position: relative;
	aspect-ratio: 1;
	width: clamp(40px, calc(64 / 1200 * 100vw), 64px);
	background: #736357;
	border-radius: 100%;
	color: #fff;
	font-size: 0;
	&: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 40 40" fill="white"><polygon points="17 15 25 20 17 25 17 15"/></svg>') no-repeat center / contain;
	}
	&.slick-prev:before{
		transform: scale(-1, 1);
	}
}