/* CSS Document */

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

#title{
	position: relative;
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	justify-items: center;
	padding: clamp(24px, calc(56 / 1200 * 100dvw), 56px) 0 clamp(32px, calc(72 / 1200 * 100dvw), 72px) 0;
/*	background: var(--color-theme) var(--pattern-01) repeat center;*/
	background: var(--color-theme);
	&:before{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: var(--color);
		mix-blend-mode: screen;
		opacity: 0.3;
		-webkit-mask: var(--pattern-01) center;
		-webkit-mask-size: 344px 86px;
	}
	& h2{
		position: relative;
		display: grid;
		justify-content: center;
		grid-row-gap: 8px;
		color: #fff;
		font: 700 clamp(24px, calc(32 / 768 * 100dvw), 32px) "Zen Old Mincho", var(--font-min);
		letter-spacing: 0.1em;
		text-align: center;
		&:before{
			content: "NEWS";
			color: #c8aa14;
			font: 700 clamp(40px, calc(68 / 768 * 100dvw), 68px) "Zen Old Mincho", var(--font-min);
			letter-spacing: 0.15em;
			@media (min-width: 768px) {
				margin-bottom: clamp(8px, calc(16 / 1200 * 100dvw), 16px);
			}
		}
		&:after{
			content: "";
			margin: 0;
			width: 5em;
			height: 2px;
			margin: 0 auto;
			background: linear-gradient(90deg, currentColor 50%, #c8aa14 50%);
		}
	}
}

#list{
	width: var(--wrap);
	margin: clamp(40px, calc(80 / 1200 * 100dvw), 80px) auto 0 auto;
	@media (max-width: 991.98px) {
		& section{
			& h3{
				margin-top: 8px;
			}
			& ul{
				display: flex;
				flex-wrap: wrap;
			}
		}
	}
	@media (min-width: 992px) {
		display: grid;
		grid-template-columns: auto auto auto 1fr;
		& section{
			grid-template-columns: subgrid;
			grid-column: span 4;
			align-items: center;
			column-gap: 16px;
			& h3+div{
				display: contents;
			}
			& ul{
				display: grid;
				&:nth-of-type(2){
					justify-items: start;
					& li{
						min-width: 8em;
					}
				}
			}
		}
	}
	& section{
		position: relative;
		display: grid;
		padding: 16px 0;
		border-bottom: 1px solid #999;
		& h3{
			order: 1;
		}
	}
	& h3{
		font-size: 18px;
		letter-spacing: 0.1em;
	}
	& h3+div{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		grid-gap: 4px 8px;
		& time{
			letter-spacing: 0.05em;
		}
		& ul{
			grid-gap: 8px;
			&:nth-of-type(1){
				& li{
					display: grid;
					align-items: center;
					min-height: 20px;
					padding: 0 1em;
					background: var(--color-theme);
					border-radius: 2px;
					color: #fff;
					font-size: 14px;
					letter-spacing: 0.05em;
					text-transform: uppercase;
					text-align: center;
					&.tagNew{
						background: #d80c18;
					}
				}
			}
			&:nth-of-type(2){
				& li{
					display: grid;
					align-items: center;
					min-height: 24px;
					padding: 0 1em;
					border: 1px solid currentColor;
					border-radius: 12px;
					color: var(--color-theme);
					font-size: 14px;
					letter-spacing: 0.05em;
					text-align: center;
					&[data-cat="02"]{
						color: #e71f19;
					}
					&[data-cat="03"]{
						color: #1e643c;
					}
				}
			}
		}
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
		}
	}
}

#pagenation{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	margin-top: clamp(32px, calc(72 / 1200 * 100dvw), 72px);
}