@charset "UTF-8";

.page_title_top {
	padding-top: 16rem;

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

#breadcrumbs {
	margin-bottom: 5rem;
	padding: 0 !important;
}

#contents {
	padding: 17rem 0 20rem;

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

	.staff-single {
		.staff-main {
			display: grid;
			grid-template-columns: 3fr 2fr;
			gap: 6rem;

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

			.staff-main__body {
				@media screen and (max-width: 767px) {
					order: 2;
				}
				.box {
					display: flex;
					align-items: center;

					& p {
						font-family: "Noto Sans JP";
						font-weight: 700;
						font-size: 2.2rem;
						line-height: 1;
						letter-spacing: 0.08em;
						color: #267bca;

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

				.staff-main__page-name {
					margin-top: 2rem;
					font-family: "Noto Sans JP";
					font-weight: 700;
					font-size: 3.8rem;
					line-height: 1;
					letter-spacing: 0.08em;

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

				.staff-main__care-house {
					margin-top: 3rem;
					font-family: "Noto Sans JP";
					font-weight: 700;
					font-size: 2.2rem;
					line-height: 1;
					letter-spacing: 0.08em;

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

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

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

					.staff-main__tag {
						height: 3rem;
						border-radius: 1.5rem;
						padding: 0 1.2rem;
						background-color: #98aac2;
						font-family: "Noto Sans JP";
						font-weight: 700;
						font-size: 1.4rem;
						letter-spacing: 0.05em;
						color: #ffffff;
						display: flex;
						justify-content: center;
						align-items: center;

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

				.staff-main__bio {
					margin-top: 5rem;
					font-family: "Noto Sans JP";
					font-weight: 400;
					font-size: 1.8rem;
					line-height: 1.67;
					letter-spacing: 0.08em;

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

			.staff-main__thumb {
				@media screen and (max-width: 767px) {
					order: 1;
				}
				& img {
					/* object-fit: cover;
					aspect-ratio: 1; */
					vertical-align: middle;
					width: 100%;
				}
			}
		}

		.staff-episodes {
			margin-top: 10rem;

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

			.staff-episode {
				margin-top: 6rem;

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

				.staff-episode__title {
					position: relative;
					padding-left: 3.5rem;
					font-family: "Noto Sans JP", sans-serif;
					font-weight: 700;
					font-size: 2.4rem;
					line-height: 1.5;
					letter-spacing: 0.08em;
					color: #267bca;

					&::before {
						content: "";
						position: absolute;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
						width: 2.7rem;
						height: 2.7rem;
						border-radius: 0.5rem;
						background-color: #267bca;
					}

					@media screen and (max-width: 767px) {
						padding-left: 3rem;
						font-size: 1.8rem;
						&::before {
							top: 0.6rem;
							transform: unset;
							width: 1.6rem;
							height: 1.6rem;
						}
					}
				}

				.staff-episode__inner {
					margin-top: 2rem;
					display: grid;
					grid-template-columns: 1fr auto;
					gap: 4rem;

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

					.staff-episode__content {
						font-family: "Noto Sans JP";
						font-weight: 400;
						font-size: 1.6rem;
						line-height: 1.67;
						letter-spacing: 0.08em;

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

					.staff-episode__thumb {
						& img {
							width: 48rem;
							/* object-fit: cover;
							aspect-ratio: 1.5; */

							@media screen and (max-width: 767px) {
								width: 100%;
							}
						}
					}
				}
			}
		}

		.back-btn {
			margin: 6rem auto 0;

			@media screen and (max-width: 767px) {
				margin: 4rem auto 0;
			}
		}
	}
}