/* CSS Document */

#theme{}
	#theme header{
		display: grid;
		grid-template-columns: 1fr var(--wrap) 1fr;
		grid-gap: clamp(24px, 4.8vw, 32px) 0;
		margin: clamp(24px, 4.8vw, 32px) 0;
		}
		#theme header > *{
			grid-column: 2;
			}
	#theme h2{
		justify-self: center;
		}
	#theme h2+div{
		color: #4d4d4d;
		}
	#theme section{
		display: grid;
		grid-template-columns: 1fr var(--wrap) 1fr;
		grid-gap: clamp(24px, 4.8vw, 32px) 0;
		}
		#theme section > *{
			grid-column: 2;
			}
	#theme h3{
		display: none;
		}
	@media (min-width: 576px) {
		#theme h2+div{
			text-align: center;
			}
		}

#themeList{
	display: grid;
	grid-gap: clamp(32px, 6vw, 40px);
	align-items: start;
	}
	#themeList dl{
		position: relative;
		display: grid;
		grid-template-areas: 'photo';
		grid-gap: 8px;
		line-height: 1.75;
		}
		#themeList dl:before{
			content: "";
			grid-area: photo;
			aspect-ratio: 1 / 0.667;
			background: var(--dummy);
			background-size: cover;
			}
	#themeList dt{
		font-weight: 700;
		line-height: 1.65;
		}
	#themeList dd{
		display: contents;
		}
		#themeList dd img{
			grid-area: photo;
			aspect-ratio: 1 / 0.667;
			width: 100%;
			object-fit: cover;
			}
		#themeList dd a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
			}
	@media (min-width: 576px) and (max-width: 991.98px) {
		#themeList{
			grid-template-columns: repeat(2, 1fr);
			}
		}
	@media (min-width: 992px) {
		#themeList{
			grid-template-columns: repeat(3, 1fr);
			}
		}

#pagenation{
	margin: clamp(48px, 9.6vw, 64px) 0 clamp(64px, 14.4vw, 96px) 0;
	}