/* =================================
	Cast & Staff page
================================= */

/*	Illustration
============================== */

article#cast {
	.white-text-box {
		&::after {
			position: absolute;
			content: "";
			right: -100px;
			bottom: -20px;
			width: 260px;
			height: auto;
			aspect-ratio: 260 / 142;
			background: url("../img/cast_staff/img_tsukemono.png") no-repeat center center / contain;
		}
	}
}

article#staff {
	.white-text-box {
		&::after {
			position: absolute;
			content: "";
			left: -75px;
			bottom: -20px;
			width: 226px;
			height: auto;
			aspect-ratio: 226 / 132;
			background: url("../img/cast_staff/img_himono.png") no-repeat center center / contain;
		}
	}
}

@media all and (max-width: 1200px) {
	article#cast {
		.white-text-box {
			&::after {
				right: -10px;
			}
		}
	}

	article#staff {
		.white-text-box {
			&::after {
				left: -10px;
			}
		}
	}
}

@media all and (max-width: 767px) {
	article#cast {
		.white-text-box {
			&::after {
				right: -10px;
				bottom: -20px;
				width: 130px;
			}
		}
	}

	article#staff {
		.white-text-box {
			&::after {
				left: -10px;
				bottom: -20px;
				width: 113px;
			}
		}
	}
}

/*	Cast
============================== */

article#cast {
	.section {
		padding-bottom: 20px;

		.content {
			.cast_list {
				width: fit-content;
				margin: 0 auto;

				.cast_item {
					>span {
						display: inline-block;
					}

					&:not(:first-child) {
						margin-top: 10px;
					}

					&.margin_wide {
						margin-top: 35px;
					}
				}

				.chara_name {
					color: var(--accent);
					font-weight: bold;
					width: 10rem;
					text-align: right;
				}

				.cast_name {
					width: 13rem;

					&::before {
						content: "…";
						padding: 0 0.5rem;
					}
				}

				.cast_main {
					font-size: 1.25rem;
				}

				.cast_sub {
					font-size: 1rem;

					.cast_name {
						&::before {
							padding: 0 0.625rem;
						}
					}
				}
			}
		}
	}
}

@media all and (max-width: 767px) {
	article#cast {
		.section {
			.content {
				.white-text-box {
					padding-bottom: 55px;

					.cast_list {
						.cast_item {
							&:not(:first-child) {
								margin-top: 10px;
							}

							&.margin_wide {
								margin-top: 35px;
							}
						}

						.chara_name {
							width: min(8.57142857rem, 32vw);
						}

						.cast_name {
							width: min(11.14285714rem, 41.6vw);

							&::before {
								content: "…";
								padding: 0 min(0.5rem, 1.866667vw);
							}
						}

						.cast_main {
							font-size: min(1rem, 3.733333vw);
						}

						.cast_sub {
							font-size: min(0.85714286rem, 3.2vw);
						}
					}
				}
			}
		}
	}
}

/*	Staff
============================== */

article#staff {
	.section {
		padding-top: 20px;

		.content {
			.staff_title {
				font-size: 1.25rem;
				font-weight: bold;
				width: fit-content;
				margin: 0 auto;

				&:not(:first-child) {
					margin-top: 35px;
				}
			}

			.staff_list {
				font-size: 1rem;
				width: fit-content;
				margin: 0 auto;
				margin-top: 10px;
				text-align: center;
			}

			.staff_title_small {
				font-weight: bold;
				display: inline-block;
				margin-top: 15px;
			}
		}
	}
}

@media all and (max-width: 767px) {
	article#staff {
		.section {
			.content {
				.white-text-box {
					padding-bottom: 50px;
				}
			}
		}
	}
}