/* 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) repeat center bottom;
	&:before{
		content: "NEWS";
		margin-bottom: clamp(8px, calc(24 / 1200 * 100dvw), 24px);
		color: #c8aa14;
		font: 700 clamp(32px, calc(68 / 768 * 100dvw), 68px) "Shippori Mincho", var(--font-min);
		letter-spacing: 0.1em;
	}
	& h2{
		display: grid;
		justify-content: center;
		grid-row-gap: 8px;
		color: #fff;
		font: 700 clamp(24px, calc(32 / 768 * 100dvw), 32px) "Shippori Mincho", var(--font-min);
		letter-spacing: 0.1em;
		text-align: center;
		&:after{
			content: "";
			height: 2px;
			margin: 0 -0.25em;
			background: linear-gradient(90deg, currentColor 50%, #c8aa14 50%);
		}
	}
}

#tab{
	position: relative;
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	background: var(--color-theme) var(--pattern) repeat center top;
	&:before{
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		border-bottom: 1px solid #717171;
		z-index: 1;
	}
	& ul{
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		justify-content: start;
		column-gap: clamp(4px, calc(8 / 768 * 100dvw), 8px);
	}
	& li{
		display: contents;
	}
	& a{
		position: relative;
		display: grid;
		align-content: center;
		align-items: center;
		padding: 0.5em 0;
		background: #adadad;
		border: solid #717171;
		border-width: 1px 1px 0 1px;
		border-radius: 4px 4px 0 0;
		color: #fff;
		font-weight: 500;
		font-size: clamp(16px, calc(18 / 768 * 100dvw), 18px);
		letter-spacing: 0.1em;
		line-height: 1.25;
		text-align: center;
		text-decoration: none;
		.select &{
			pointer-events: none;
			background: #fff;
			color: inherit;
			z-index: 2;
			&:after{
				content: "";
				position: absolute;
				left: 10%;
				bottom: 0;
				width: 80%;
				border-bottom: 2px solid var(--color-theme);
			}
		}
	}
	& span{
		font-size: clamp(12px, calc(14 / 768 * 100dvw), 14px);
	}
	@media (min-width: 992px) {
		& span{
			&:before{
				content: "（";
			}
			&:after{
				content: "）";
			}
		}
	}
}

#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="04"]{
						color: #1e4672;
					}
				}
			}
		}
		& 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);
}