@charset "utf-8";

/* __________ CHARACTER __________ */
/* キャラクターカラー */
#kihachi {
	--chara-color: var(--color-kihachi);
	--chara-rgb-color: var(--color-rgb-kihachi);
}
#inako {
	--chara-color: var(--color-inako);
	--chara-rgb-color: var(--color-rgb-inako);
}
#yosuke {
	--chara-color: var(--color-yosuke);
	--chara-rgb-color: var(--color-rgb-yosuke);
}
#seiroku {
	--chara-color: var(--color-seiroku);
	--chara-rgb-color: var(--color-rgb-seiroku);
}
#kengo {
	--chara-color: var(--color-kengo);
	--chara-rgb-color: var(--color-rgb-kengo);
}
#noriko {
	--chara-color: var(--color-noriko);
	--chara-rgb-color: var(--color-rgb-noriko);
}
#suzu {
	--chara-color: var(--color-suzu);
	--chara-rgb-color: var(--color-rgb-suzu);
}
#kate {
	--chara-color: var(--color-kate);
	--chara-rgb-color: var(--color-rgb-kate);
}
#yajiro {
	--chara-color: var(--color-yajiro);
	--chara-rgb-color: var(--color-rgb-yajiro);
}
#izo {
	--chara-color: var(--color-izo);
	--chara-rgb-color: var(--color-rgb-izo);
}

/* 選択ボタン */
.switch-list {
	--columns: 6;
	gap: calc(32 * var(--px));
}
.switch-item {
	grid-column: span 1 / span 1;
}
.btn.switch-btn {
	--btn-as: 1;
	padding: 0;
	border: 0;
}
@media (min-width: 960px) {
	.body-content.grid .character-switcher {
		--col-start: 9;
	}
}

/* キャラクター選択 */
.bg-chara-name > span {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
#kihachi .bg-kihachi,
#inako .bg-inako,
#yosuke .bg-yosuke,
#seiroku .bg-seiroku,
#kengo .bg-kengo,
#noriko .bg-noriko,
#suzu .bg-suzu,
#kate .bg-kate,
#yajiro .bg-yajiro,
#izo .bg-izo {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
.character-content > [class^="chara-"] {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
#kihachi .chara-kihachi,
#inako .chara-inako,
#yosuke .chara-yosuke,
#seiroku .chara-seiroku,
#kengo .chara-kengo,
#noriko .chara-noriko,
#suzu .chara-suzu,
#kate .chara-kate,
#yajiro .chara-yajiro,
#izo .chara-izo {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}


/* 背景 */
.body-content.grid .character-content {
	--col-start: 1;
	display: grid;
	width: 100%;
	justify-items: center;
	margin-top: calc(160 * var(--px));
}
.background-block {
	grid-column: 1 / -1;
	grid-row: 1 / -1;
	display: grid;
	justify-items: center;
	width: 100%;
	z-index: var(--z-bottom-level);
}
.bg-line {
	grid-column: 1 / -1;
	grid-row: 1 / -1;
	display: grid;
	width: 100%;
	grid-template-rows: repeat(3, calc(320 * var(--px)));
	transform: skewY(-10deg);
}
.line-top {
	grid-column: 1 / -1;
	grid-row: 1 / 3;
	background-image: linear-gradient(90deg, rgba(var(--chara-rgb-color), 1) 0%, rgba(var(--chara-rgb-color), .6) 75%, rgba(var(--chara-rgb-color), .05) 100%);
	z-index: var(--z-bottom-level);
	transform: translate3d(-100%, 0, 0);
}
.line-center {
	grid-column: 1 / -1;
	grid-row: 2 / 3;
	background-color: var(--chara-color);
	z-index: var(--z-lower-level);
	transform: scaleX(0) translate3d(0, 0, 0);
}
.line-bottom {
	grid-column: 1 / -1;
	grid-row: 2 / 4;
	background-image: linear-gradient(270deg, rgba(var(--chara-rgb-color), 1) 0%, rgba(var(--chara-rgb-color), .6) 75%, rgba(var(--chara-rgb-color), .05) 100%);
	z-index: var(--z-bottom-level);
	transform: translate3d(100%, 0, 0);
}
.chara-viewer.-active .line-top {
	animation: animationLineTopBottom var(--duration-500) var(--ease-in-out-expo) var(--duration-900) forwards;
}
.chara-viewer.-active .line-center {
	animation: animationLineCenter var(--duration-500) var(--ease-in-out-expo) var(--duration-500) forwards;
}
.chara-viewer.-active .line-bottom {
	animation: animationLineTopBottom var(--duration-500) var(--ease-in-out-expo) var(--duration-900) forwards;
}
@keyframes animationLineCenter {
	to { transform: scaleX(1.0) translate3d(0, 0, 0); }
}
@keyframes animationLineTopBottom {
	to { transform: translate3d(0, 0, 0); }
}
@media (min-width: 960px) {
	.bg-line {
		grid-template-rows: repeat(3, calc(346 * var(--px)));
	}
}


.bg-chara-name {
	grid-column: 1 / -1;
	grid-row: 1 / -1;
	display: grid;
	width: calc(824 * var(--px));
	height: auto;
	aspect-ratio: 1;
	color: var(--chara-color);
	background-color: var(--chara-color);
	border: 1px solid var(--color-denki-black);
	z-index: var(--z-middle-level);
	opacity: 0;
	overflow: hidden;
}
.bg-chara-name > span {
	grid-column: 1 / -1;
	grid-row: 1 / -1;
	transform: scale(1.01);
}
.chara-viewer.-active .bg-chara-name {
	animation: animationBGNameFade var(--duration-250) var(--ease-out-expo) var(--duration-300) forwards,
						 animationBGNameColor var(--duration-250) var(--ease-in-out-expo) var(--duration-600) forwards;
}
@keyframes animationBGNameFade {
	to { opacity: 1; }
}
@keyframes animationBGNameColor {
	to { color: var(--color-denki-black); }
}
@media (min-width: 960px) {
	.bg-chara-name {
		width: calc(864 * var(--px));
	}
}


/* 詳細 */
.character-content > [class^="chara-"] {
	grid-column: 1 / -1;
	grid-row: 1 / -1;
	width: calc(824 * var(--px));
	z-index: var(--z-top-level);
}
.figure {
	inline-size: calc(756 * var(--px));
	margin-inline: auto;
	clip-path: inset(0 0 100% 0);
}
.chara-viewer.-active .character-content .figure {
	animation: animationCharaFigure var(--duration-750) var(--ease-in-out-expo) var(--duration-1500) forwards;
}
@keyframes animationCharaFigure {
	to { clip-path: inset(0 0 0% 0); }
}
@media (min-width: 960px) {
	.character-content > [class^="chara-"] {
		width: calc(864 * var(--px));
	}
	.figure {
		inline-size: calc(816 * var(--px));
	}
}

.profile {
	margin-top: calc(64 * var(--px));
	opacity: 0;
}
.chara-viewer.-active .character-content .profile {
	animation: animationCharaProfile var(--duration-750) var(--ease-in-out-expo) var(--duration-1500) forwards;
}
@keyframes animationCharaProfile {
	to { opacity: 1; }
}
.prof-head:lang(ja) {
	display: flex;
	align-items: flex-end;
	column-gap: calc(32 * var(--px));
}
.prof-head:lang(en) {
	display: grid;
	row-gap: calc(24 * var(--px));
}
.furigana {
	color: var(--color-white);
	font-size: calc(24 * var(--px));
	letter-spacing: .05em;
}
.furigana:lang(ja) {
	font-weight: 800;
}
.furigana:lang(en) {
	font-weight: 900;
}
.name {
	position: relative;
	margin-block: var(--leading-trim);
	font-size: calc(72 * var(--px));
}
.name:lang(ja) {
	font-weight: 800;
	letter-spacing: .075em;
}
.name:lang(en) {
	font-weight: 900;
	letter-spacing: .05em;
}
.name-under {
	position: relative;
	color: var(--color-denki-black);
	-webkit-text-stroke: 2px currentColor;
	z-index: 1;
}
.name-upper {
	position: absolute;
	inset: 0;
	color: var(--color-white);
	z-index: 2;
}
.name-upper > span:first-child {
	color: var(--chara-color);
}
.va {
	display: flex;
	align-items: baseline;
	column-gap: calc(16 * var(--px));
	width: fit-content;
	padding-inline: calc(8 * var(--px));
	padding-block: calc(4 * var(--px));
	font-size: calc(24 * var(--px));
	font-weight: 700;
	color: var(--color-denki-black);
	background-color: var(--color-white);
	border: 2px solid var(--color-denki-black);
}
.va:before {
	color: var(--chara-color);
	font-size: calc(16 * var(--px));
	font-weight: 700;
}
.va:lang(ja):before {
	content: "CV";
}
.va:lang(en):before {
	content: "VA";
}
.liner {
	display: flex;
	margin-top: calc(40 * var(--px));
	height: auto;
	margin-inline: 0 auto;
}
.chara-kihachi .liner:lang(ja) { width: calc(260 * var(--px)); aspect-ratio: 260 / 50; }
.chara-kihachi .liner:lang(en) { width: calc(302 * var(--px)); aspect-ratio: 302 / 50; }
.chara-inako .liner:lang(ja) { width: calc(280 * var(--px)); aspect-ratio: 280 / 50; }
.chara-inako .liner:lang(en) { width: calc(335 * var(--px)); aspect-ratio: 335 / 50; }
.chara-yosuke .liner:lang(ja) { width: calc(314 * var(--px)); aspect-ratio: 314 / 108; }
.chara-yosuke .liner:lang(en) { width: calc(412 * var(--px)); aspect-ratio: 412 / 107; }
.chara-seiroku .liner:lang(ja) { width: calc(391 * var(--px)); aspect-ratio: 391 / 108; }
.chara-seiroku .liner:lang(en) { width: calc(414 * var(--px)); aspect-ratio: 414 / 107; }
.chara-kengo .liner:lang(ja) { width: calc(359 * var(--px)); aspect-ratio: 359 / 108; }
.chara-kengo .liner:lang(en) { width: calc(409 * var(--px)); aspect-ratio: 409 / 107; }
.chara-noriko .liner:lang(ja) { width: calc(289 * var(--px)); aspect-ratio: 289 / 50; }
.chara-noriko .liner:lang(en) { width: calc(154 * var(--px)); aspect-ratio: 154 / 50; }
.chara-suzu .liner:lang(ja) { width: calc(316 * var(--px)); aspect-ratio: 316 / 50; }
.chara-suzu .liner:lang(en) { width: calc(414 * var(--px)); aspect-ratio: 414 / 50; }
.chara-kate .liner:lang(ja) { width: calc(385 * var(--px)); aspect-ratio: 385 / 50; }
.chara-kate .liner:lang(en) { width: calc(410 * var(--px)); aspect-ratio: 410 / 50; }
.chara-yajiro .liner:lang(ja) { width: calc(328 * var(--px)); aspect-ratio: 328 / 50; }
.chara-yajiro .liner:lang(en) { width: calc(372 * var(--px)); aspect-ratio: 372 / 98; }
.chara-izo .liner:lang(ja) { width: calc(366 * var(--px)); aspect-ratio: 366 / 50; }
.chara-izo .liner:lang(en) { width: calc(409 * var(--px)); aspect-ratio: 409 / 50; }

.bio {
	margin-top: calc(32 * var(--px));
	color: var(--color-white);
	font-size: calc(28 * var(--px));
	font-weight: 500;
	line-height: 1.8;
	letter-spacing: .04em;
}
.face {
	margin-top: calc(64 * var(--px));
}
.inari-profile {
	display: grid;
	grid-template-columns: calc(160 * var(--px)) 1fr;
	column-gap: calc(16 * var(--px));
	margin-top: calc(128 * var(--px));
}
.inari-name {
	font-size: calc(40 * var(--px));
	font-weight: 700;
}
.inari-bio {
	margin-top: calc(8 * var(--px));
	color: var(--color-white);
	font-size: calc(28 * var(--px));
	font-weight: 500;
	line-height: 1.8;
	letter-spacing: .04em;
}
@media (min-width: 960px) {
}
@media (any-hover: hover) {
}