@charset "utf-8";

/* __________ STORY __________ */
.navigation .navigation-item {
	inline-size: calc(1.35 * var(--columns-size));
}
.story-content ~ .story-content {
	margin-top: calc(160 * var(--px));
}
@media (min-width: 960px) {
	.navigation .navigation-item {
		inline-size: calc(1.125 * var(--columns-size));
	}
}
/* 話数タイトル */
.episode-headline {
	display: grid;
	align-items: center;
	justify-items: center;
	grid-template-rows: repeat(7, 1fr);
	grid-template-columns: 1fr;
}
.episode-headline.-jp,
.episode-headline .-jp {
	font-family: var(--font-mplus1);
}
.episode-headline.-en,
.episode-headline .-en {
	font-family: var(--font-oswald);
}
.episode-bg {
	grid-column: 1 / -1;
	grid-row: 1 / -1;
	width: calc(456 * var(--px));
	color: rgb(175, 130, 25, 0.6);
}
.episode-number {
	grid-column: 1 / -1;
	grid-row: 3 / 4;
	font-size: calc(32 * var(--px));
	font-weight: 700;
	color: var(--color-red);
	margin-block: var(--leading-trim);
}
.episode-title {
	grid-column: 1 / -1;
	grid-row: 4 / 6;
	font-size: calc(56 * var(--px));
	font-weight: 700;
	margin-block: var(--leading-trim);
}

/* 場面写 */
.story-block {
	margin-top: calc(48 * var(--px));
}
.scene__thumbnails {
	display: flex;
	margin-top: calc(16 * var(--px));
}
.scene__btn {
	position: relative;
}
.scene__btn::after {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0;
	background-color: var(--color-red);
	transition: var(--trans-default);
}
.scene__btn.-active::after {
	opacity: .4;
}
@media (min-width: 960px) {
	.story-block.grid > * {
		--col-start: 7;
	}
}

/* あらすじ */
.story-synopsis-block {
	margin-top: calc(48 * var(--px));
}
.synopsis-text {
	font-size: calc(28 * var(--px));
	font-weight: 500;
	line-height: var(--leading-xl);
}

/* スタッフ・予告 */
.story-detail-block {
	display: grid;
	grid-template-columns: 1fr;
	column-gap: calc(48 * var(--px));
	row-gap: calc(64 * var(--px));
	margin-top: calc(64 * var(--px));
}
.story-staff-block,
.story-trailer-block {
	display: grid;
	align-content: start;
	row-gap: calc(24 * var(--px));
}
.story-detail-headline {
	padding-block: calc(8 * var(--px));
	padding-inline: calc(16 * var(--px));
	font-size: calc(24 * var(--px));
	font-weight: 500;
	color: var(--color-red);
	border: 1px solid currentColor;
}
.story-detail-headline.-jp {
	font-family: var(--font-mplus1);
}
.story-detail-headline.-en {
	font-family: var(--font-oswald);
}
.story-staff {
	display: grid;
	row-gap: calc(16 * var(--px));
	font-size: calc(24 * var(--px));
	font-weight: 500;
}
.trailer {
	display: grid;
	align-items: center;
	justify-items: center;
}
.trailer-thumb, .trailer-icon {
	grid-column: 1 / -1;
	grid-row: 1 / -1;
}
.trailer-icon {
	font-size: calc(80 * var(--px));
	color: var(--color-red);
}
@media (min-width: 960px) {
	.story-detail-block {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.story-staff {
		row-gap: calc(8 * var(--px));
		font-size: calc(20 * var(--px));
	}
}

/* セパレート背景 */
.story-content.separate-images {
	--col-start: 1;
	position: relative;
	aspect-ratio: 1920 / 960;
}
.separate-images .parallax-image {
	width: calc(960 * var(--px));
	height: calc(540 * var(--px));
}
.slideshow .separate-image {
	position: absolute;
	inset: 0;
	opacity: 0;
}
.slide-2 .separate-image {
	animation: animationSeparateSlide2 14s 0s infinite;
}
.slide-2 .separate-image:nth-child(2) {
  animation-delay: 7s;
}
@keyframes animationSeparateSlide2 {
  0%   { opacity: 0; }
	25%  { opacity: 1; }
  50%  { opacity: 1; }
	75%  { opacity: 0; }
  100% { opacity: 0; }
}
.slide-3 .separate-image {
	animation: animationSeparateSlide3 21s 0s infinite;
}
.slide-3 .separate-image:nth-child(2) {
  animation-delay: 7s;
}
.slide-3 .separate-image:nth-child(3) {
  animation-delay: 14s;
}
@keyframes animationSeparateSlide3 {
  0%     { opacity: 0; }
	16.66% { opacity: 1; }
  33.33% { opacity: 1; }
	50%    { opacity: 0; }
  100%   { opacity: 0; }
}
@media (min-width: 960px) {
	.story-content.separate-images {
		aspect-ratio: 1920 / 600;
	}
	.separate-images .parallax-image {
		width: calc(1920 * var(--px));
		height: calc(1080 * var(--px));
	}
}

/* セパレート背景 */
.relationship-content .sub-headline {
	display: grid;
	grid-template-columns: auto auto;
	justify-content: center;
	align-items: baseline;
	column-gap: calc(16 * var(--px));
}
.relationship-memo {
	font-size: calc(24 * var(--px));
}

@media (any-hover: hover) {
}