@charset "UTF-8";

.page-banner {
	&:after {
		content: "";
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
		width: 100rem;
		height: 60rem;
		background: url("../../img/archive/staff/banner-img.png") no-repeat center left / contain;
		@media screen and (max-width: 767px) {
			width: 35.7rem;
			height: 21.4rem;
			top: unset;
			transform: unset;
			bottom: 0;
		}
	}
}

#contents {
	padding-top: 12rem;
	padding-bottom: 25.6rem;
	@media screen and (max-width: 767px) {
		padding-top: 6rem;
		padding-bottom: 6rem;
	}
	.common-list.archive-category {
		margin-bottom: 8rem;
		display: flex;
		gap: 3.2rem;
		@media screen and (max-width: 767px) {
			margin-bottom: 4rem;
			gap: 1rem 2%;
			flex-wrap: wrap;
		}
		& li {
			@media screen and (max-width: 767px) {
				width: 49%;
			}
			& a {
				height: 6rem;
				border-radius: 10rem;
				padding-left: 6.4rem;
				padding-right: 4rem;
				border: 0.15rem solid #e60012;
				display: flex;
				align-items: center;
				font-family: var(--zen);
				font-style: normal;
				font-weight: 500;
				font-size: 1.8rem;
				line-height: 100%;
				letter-spacing: 0.1em;
				color: #000000;
				position: relative;
				white-space: nowrap;
				@media screen and (max-width: 767px) {
					height: 4.8rem;
					width: 100%;
					font-size: 1.4rem;
					padding-left: 4rem;
					justify-content: center;
				}
				&:before {
					content: "";
					position: absolute;
					left: 3.2rem;
					top: 50%;
					transform: translateY(-50%);
					width: 1.7rem;
					height: 1.7rem;
					border-radius: 1.7rem;
					border: 0.15rem solid #e60012;
					@media screen and (max-width: 767px) {
						left: 2rem;
						width: 1.2rem;
						height: 1.2rem;
						border-radius: 1.2rem;
					}
				}
			}
		}
		& li.active {
			& a {
				background: radial-gradient(51.5% 134.36% at 4.08% -8.33%, #ffc2c7 0%, #e00012 100%);
				color: #fff;
				&:before {
					border: 0.15rem solid #fff;
				}
			}
		}
	}
	.staff {
		display: flex;
		flex-wrap: wrap;
		gap: 3.2rem;
		align-items: stretch;
		@media screen and (max-width: 767px) {
			gap: 2rem;
			flex-direction: column;
			width: 100%;
		}
		& li {
			width: 43rem;
			background-color: #f3f5f6;
			border-radius: 2rem;
			@media screen and (max-width: 767px) {
				width: 100%;
			
			}
			& a {
				
				padding: 3.2rem;
				
				box-sizing: border-box;
				@media screen and (max-width: 767px) {
					padding: 2rem;
					width: 100%;
				}
				.thumbnail {
					width: 36rem;
					height: 36rem;
					border-radius: 36rem;
					overflow: hidden;
					margin-bottom: 1rem;
					@media screen and (max-width: 767px) {
						width: 29rem;
						height: 29rem;
						border-radius: 29rem;
						margin: 0 auto 1rem;
					}
					& img {
						width: 100%;
					}
				}
				.list-category {
					display: flex;
					flex-wrap: wrap;
					gap: 1rem;
					
					& span {
						font-family: var(--zen);
						font-style: normal;
						font-weight: 700;
						font-size: 1.8rem;
						line-height: 2.6rem;
						display: flex;
						align-items: center;
						letter-spacing: 0.05em;
						color: #ffffff;
						height: 3.7rem;
						border-radius: 2rem;
						background-color: #e00012;
						padding: 0 2.4rem;
						box-sizing: border-box;
						margin-bottom: 1rem;
						@media screen and (max-width: 767px) {
							font-size: 1.4rem;
							line-height: 1;
							height: 2.6rem;
							padding: 0 1.4rem;
						}
					}
				}
				.list-title {
					font-family: var(--zen);
					font-style: normal;
					font-weight: 700;
					font-size: 1.8rem;
					line-height: 150%;
					letter-spacing: 0.05em;
					color: #000000;
					margin-bottom: 1rem;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					@media screen and (max-width: 767px) {
						font-size: 1.4rem;
					}
					& br {
						display: none;
					}
				}
				.flex-info {
					display: flex;
					gap: 1.6rem;
					@media screen and (max-width: 767px) {
						gap: 1rem;
					}
					.start {
						font-family: var(--zen);
						font-style: normal;
						font-weight: 500;
						font-size: 1.6rem;
						line-height: 150%;
						letter-spacing: 0.05em;
						color: #000000;
						@media screen and (max-width: 767px) {
							font-size: 1.4rem;
						}
					}
					.name {
						font-family: var(--zen);
						font-style: normal;
						font-weight: 500;
						font-size: 1.8rem;
						line-height: 150%;
						letter-spacing: 0.05em;
						color: #000000;
						@media screen and (max-width: 767px) {
							font-size: 1.4rem;
						}
					}
				}
			}
			&:hover {
				background: #e60012;
				transition: all 0.3s ease-in;
				opacity: 0.75;
				.thumbnail {
					border: 2px solid #f3f5f6;
					transition: all 0.3s ease-in;
				}
				.list-category {
					& span {
						color: #e00012;
						background-color: #fff;
					}
				}

				.list-title {
					color: #fff;
				}
				.flex-info {
					.start {
						color: #fff;
					}
					.name {
						color: #fff;
					}
				}
			}
		}
	}
}