/* CSS Document */

#topics{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	padding: clamp(40px, calc(64 / 768 * 100dvw), 64px) 0 clamp(64px, calc(96 / 768 * 100dvw), 96px) 0;
	background: var(--object_01) no-repeat calc(0px - clamp(200px, calc(296 / 992 * 100dvw), 296px)) clamp(64px, calc(96 / 768 * 100dvw), 96px) / auto clamp(240px, calc(376 / 992 * 100dvw), 376px), var(--object_01) no-repeat calc(100% + clamp(200px, calc(296 / 992 * 100dvw), 296px)) calc(100% - 16px) / auto clamp(240px, calc(376 / 992 * 100dvw), 376px);
	overflow: hidden;
	& h2{
		display: grid;
		justify-items: center;
		text-align: center;
		grid-row-gap: 0.5em;
		color: var(--color-theme);
		font-weight: 700;
		font-family: 'Zen Kaku Gothic New', var(--font);
		font-size: clamp(18px, calc(28 / 768 * 100dvw), 28px);
		letter-spacing: 0.05em;
		&:before{
			content: attr(data-caption);
			order: -1;
			color: #a1cbed;
			font-weight: 600;
			font-size: clamp(24px, calc(64 / 992 * 100dvw), 64px);
			font-family: 'Shippori Mincho', var(--font-min);
			letter-spacing: 0.05em;
			line-height: 1;
			white-space: nowrap;
		}
		&:after{
			content: "";
			order: -1;
			aspect-ratio: 32 / 2;
			width: clamp(24px, calc(32 / 768 * 100dvw), 32px);
			background: linear-gradient(90deg, #a1cbed 50%, currentColor 50%);
		}
	}
	#tab{
		justify-self: center;
		width: min(100%, 960px);
		margin-top: clamp(32px, calc(64 / 768 * 100dvw), 64px);
	}
	#list{
		margin-top: clamp(32px, calc(56 / 768 * 100dvw), 56px);
		@media (min-width: 992px) {
			justify-self: center;
			width: min(100%, 1000px);
			padding: clamp(16px, calc(32 / 768 * 100dvw), 32px);
			background: white;
			border-radius: clamp(8px, calc(16 / 768 * 100dvw), 16px);
		}
	}
	#pagenation{
		margin-top: clamp(64px, calc(96 / 768 * 100dvw), 96px);
	}
}

#tab{
	position: relative;
	&:before{
		content: "";
		position: absolute;
		left: 50%;
		bottom: 0;
		width: 100dvw;
		border-bottom: 4px solid var(--color-theme);
		transform: translateX(-50%);
	}
	& ul{
		display: grid;
		column-gap: 8px;
		@media (min-width: 992px) {
			grid-template-columns: repeat(4, 1fr);
		}
	}
	& li{
		grid-row: 1;
		display: grid;
	}
	& a{
		display: grid;
		align-items: center;
		min-height: clamp(48px, calc(56 / 768 * 100dvw), 56px);
		padding: 8px;
		background: white;
		border: 1px solid var(--color-theme);
		border-width: 1px 1px 0 1px;
		border-radius: clamp(4px, calc(8 / 768 * 100dvw), 8px) clamp(4px, calc(8 / 768 * 100dvw), 8px) 0 0;
		font-weight: 700;
		font-size: clamp(12px, calc(20 / 768 * 100dvw), 20px);
		font-family: 'Zen Kaku Gothic New', var(--font);
		letter-spacing: 0.05em;
		text-align: center;
		text-decoration: none;
		[class="[& tab-all &]"] &,
		.select &{
			background: var(--color-theme);
			color: white;
		}
	}
}

#list{
	display: grid;
	& section{
		align-self: start;
		position: relative;
		display: grid;
		grid-template-columns: clamp(80px, calc(160 / 768 * 100dvw), 160px) 1fr;
		grid-template-rows: auto 1fr;
		column-gap: clamp(16px, calc(24 / 768 * 100dvw), 24px);
		padding: 16px 0;
		&:not(:has(img)):before{
			content: "";
			grid-column: 1;
			grid-row: 1 / 3;
			align-self: start;
			aspect-ratio: 4 / 3;
			background: var(--dummy);
　		}
		&:nth-child(n+2){
			border-top: 1px solid currentColor;
		}
		&:first-child{
			margin-top: -16px;
		}
		&:last-child{
			margin-bottom: -16px;
		}
		&:has(a){
			padding-right: 24px;
			&:after{
				content: "";
				position: absolute;
				top: 50%;
				right: 0;
				aspect-ratio: 1;
				width: clamp(16px, calc(24 / 768 * 100dvw), 24px);
				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 24 24" style="fill: none; stroke: black; stroke-miterlimit: 10; stroke-width: 4px;"><polyline points="7.49 2.97 16.51 12 7.49 21.03"/></svg>') no-repeat center / contain;
				transform: translateY(-50%);
			}
		}
		& h3{
			grid-column: 2;
			grid-row: 2;
			align-self: center;
		}
		& h3+div{
			grid-column: 2;
			grid-row: 1;
			margin-bottom: 8px;
		}
		& figure{
			grid-column: 1;
			grid-row: 1 / 3;
			align-self: start;
		}
	}
	& h3{
		order: 1;
		font-weight: 700;
		font-size: clamp(16px, calc(18 / 768 * 100dvw), 18px);
		letter-spacing: 0.05em;
		word-break: keep-all;
		overflow-wrap: anywhere;
	}
	& h3+div{
		display: grid;
		grid-gap: 4px 16px;
		@media (min-width: 576px) {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
		}
	}
	& time{
		color: #666666;
		font-size: clamp(12px, calc(15 / 768 * 100dvw), 15px);
	}
	& ul{
		display: flex;
		flex-wrap: wrap;
		grid-gap: 4px;
		&:not(:has(li)){
			display: none;
		}
	}
	& li{
		display: grid;
		align-items: center;
		min-width: 5em;
		min-height: clamp(20px, calc(24 / 768 * 100dvw), 24px);
		padding: 0.25em 1em 0 1em;
		background: var(--color-theme);
		border-radius: clamp(10px, calc(12 / 768 * 100dvw), 12px);
		color: #fff;
		font-weight: 700;
		font-size: clamp(10px, calc(14 / 768 * 100dvw), 14px);
		line-height: 1.25;
		text-align: center;
		&.tagCheck{
			background: #e11c24;
			text-transform: uppercase;
		}
		&.tagNew{
			background: #dc501e;
			text-transform: uppercase;
		}
		&[data-cat="1"]{
			background: #005a8c;
		}
		&[data-cat="2"]{
			background: #5a8c46;
		}
		&[data-cat="3"]{
			background: #365383;
		}
		&[data-cat="4"]{
			background: #b09934;
		}
	}
	& a{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		font-size: 0;
	}
	& img{
		aspect-ratio: 4 / 3;
		width: ;
		object-fit: cover;
	}
}