@charset "UTF-8";

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

#contents {
	padding: 12rem 0 20rem;

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

	.edit-area {
		.archive-category {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 3rem;

			@media screen and (max-width: 767px) {
				grid-template-columns: repeat(2, 1fr);
				gap: 1rem;
			}

			& li {
				& a {
					border: 0.3rem solid #BBBED0;
					height: 6rem;
					width: 100%;
					border-radius: 3rem;
					display: flex;
					justify-content: center;
					align-items: center;
					font-family: 'Noto Sans JP';
					font-weight: 700;
					font-size: 2.2rem;
					letter-spacing: 0.05em;
					color: #FFF;
					background-color: #BBBED0;

					@media screen and (max-width: 767px) {
						border: 0.2rem solid #5EA2E1;
						height: 3.8rem;
						border-radius: 1.9rem;
						font-size: 1.4rem;
					}
				}
			}

			& li.active {
				& a {
					color: #fff;
					background-color: #267BCA;
					border: 0.3rem solid #267BCA;
				}
			}
		}

		.post-list {
			margin-top: 6rem;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 7rem 4.5rem;

			@media screen and (max-width: 767px) {
				margin-top: 4rem;
				grid-template-columns: 1fr;
				gap: 4rem;
			}

			.staff-card {
				.staff-card__link {
					.staff-card__thumb {
						overflow: hidden;
						border-radius: 0 0 2rem 2rem;
						& img {
							aspect-ratio: 1;
							object-fit: cover;
							object-position: top center;
							width: 100%;
						}
					}

					.staff-card__body {

						.staff-card__job {
							margin-top: 3rem;
							font-family: 'Noto Sans JP';
							font-weight: 500;
							font-size: 1.8rem;
							line-height: 1;
							letter-spacing: 0.08em;
							color: #267bca;

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

						.staff-card__name {
							margin-top: 0.8rem;
							font-family: 'Noto Sans JP';
							font-weight: 700;
							font-size: 1.8rem;
							line-height: 1;
							letter-spacing: 0.08em;

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

						.staff-card__desc {
							margin-top: 1.8rem;
							font-family: 'Noto Sans JP';
							font-weight: 400;
							font-size: 1.8rem;
							line-height: 1.5;
							letter-spacing: 0.08em;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							overflow: hidden;

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

						.staff-card__tags {
							margin-top: 2rem;
							display: flex;
							flex-wrap: wrap;
							gap: 0.8rem;

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

							.staff-card__tag {
								font-family: 'Noto Sans JP';
								font-weight: 500;
								font-size: 1.4rem;
								letter-spacing: 0.05em;
								color: #fff;
								height: 3rem;
								border-radius: 1.5rem;
								background: #57A8F3;
								padding: 0 1.2rem;
								display: flex;
								justify-content: center;
								align-items: center;

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