@charset "UTF-8";

.page_title_top {
	&::after {
		background-image: url("../../img/archive/news/banner.png");
	}
}

#contents {
	padding: 12rem 0 20rem;

	@media screen and (max-width: 767px) {
		padding: 0 0 10rem;
	}

	.edit-area {
		.archive-category {
			display: flex;
			flex-wrap: wrap;
			gap: 1.8rem;

			@media screen and (max-width: 767px) {
				gap: 1.5rem;
			}

			& li {
				& a {
					font-family: "Noto Sans JP";
					font-weight: 700;
					font-size: 2.2rem;
					letter-spacing: 0.05em;
					color: #267BCA;
					padding: 0 1.2rem;
					border: 0.2rem solid #267BCA;
					height: 3.8rem;
					border-radius: 1.9rem;
					display: flex;
					align-items: center;
					justify-content: center;

					@media screen and (max-width: 767px) {
						font-size: 1.6rem;
						padding: 0 1rem;
						height: 3rem;
						border-radius: 1.5rem;
					}
				}
			}

			

			& li.briefing {
				& a {
					border: 0.2rem solid #77b750 !important;
					color: #77b750 !important;
				}
			}

			& li.is {
				& a {
					border: 0.2rem solid #267bca !important;
					color: #267bca !important;
				}
			}

			& li.volunteer {
				& a {
					border: 0.2rem solid #db5f5f !important;
					color: #db5f5f !important;
				}
			}

			& li.thanks {
				& a {
					border: 0.2rem solid #f88634 !important;
					color: #f88634 !important;
				}
			}
			& li.active {
				& a {
					color: #fff !important;
					background-color: #267BCA !important;
					border: 0.2rem solid #267BCA !important;
				}
			}
		}

		.post-list {
			margin-top: 4rem;

			@media screen and (max-width: 767px) {
				margin-top: 2rem;
			}

			& li {
				& a {
					width: 100%;
					padding: 3rem 0;
					border-bottom: 0.1rem dashed #acacac;

					@media screen and (max-width: 767px) {
						padding: 2rem 0;
					}

					.first-row {
						display: flex;
						align-items: center;
						gap: 0.8rem;

						.list-date {
							font-family: "Roboto";
							font-weight: 500;
							font-size: 1.6rem;
							line-height: 1;
							letter-spacing: 0.05em;
							color: #267bca;

							@media screen and (max-width: 767px) {
								font-size: 1.4rem;
							}
						}

						.list-category {
							display: flex;
							gap: 0.8rem;
							align-items: center;

							& span {
								height: 2.2rem;
								border-radius: 1.1rem;
								padding: 0 1rem;
								font-family: "Noto Sans JP";
								font-weight: 700;
								font-size: 1.4rem;
								line-height: 2.2rem;
								letter-spacing: 0.05em;
								color: #ffffff;

								@media screen and (max-width: 767px) {
									font-size: 1.2rem;
								}
							}

							& span.briefing {
								background-color: #77b750;
							}

							& span.is {
								background-color: #267bca;
							}

							& span.volunteer {
								background-color: #db5f5f;
							}

							& span.thanks {
								background-color: #f88634;
							}
						}
					}

					.list-title {
						padding-top: 1.5rem;
						font-family: "Noto Sans JP";
						font-weight: 500;
						font-size: 1.8rem;
						line-height: 1.5;
						letter-spacing: 0.08em;

						@media screen and (max-width: 767px) {
							padding-top: 1rem;
							font-size: 1.6rem;
						}
					}
				}
			}
		}
	}
}


.no-content {
	margin-top: 4rem;
}