@charset "utf-8";
/*-----------------------------------------------
 * CHARACTER
-------------------------------------------------*/
body[data-page="character"],
body[data-page="character"] #fullWrap {
	background-color: var(--chara-color);
}
body[data-page="character"] .fv__fix {
	position: fixed;
	top: min(calc(40 / var(--vw-min) * 100vw), 40px);
}
body[data-page="character"] .fv__fix.is-move,
body[data-page="character"] .fv__fix:has(.fv__menuBtn[aria-expanded="true"]) {
	top: 0;
	transition: top .45s cubic-bezier(.22, 1, .36, 1);
}
@media screen and (max-width:768px){
	body[data-page="character"] .fv__fix {
		top: calc(28 / var(--vw-min) * 100vw);
	}
}
@media (prefers-reduced-motion: reduce){
	body[data-page="character"] .fv__fix,
	body[data-page="character"] .fv__fix.is-move {
		transition: none;
	}
}
.charaPage {
	position: relative;
	padding-bottom: min(calc(100 / var(--vw-min) * 100vw), 100px);
	overflow: hidden;
}
@media screen and (max-width:768px){
	.charaPage {
		padding-bottom: calc(72 / var(--vw-min) * 100vw);
	}
}
.chara__ticker {
	width: 100%;
	height: min(calc(40 / var(--vw-min) * 100vw), 40px);
	position: relative;
	z-index: 5;
	overflow: hidden;
	background-color: #000;
}
@media screen and (max-width:768px){
	.chara__ticker {
		height: calc(28 / var(--vw-min) * 100vw);
	}
}
.chara__tickerLists {
	width: max-content;
	display: flex;
	flex-wrap: nowrap;
	animation: charaTicker 36s linear infinite;
}
.chara__tickerItem {
	font-size: min(calc(24 / var(--vw-min) * 100vw), 24px);
	color: #fff;
	line-height: min(calc(40 / var(--vw-min) * 100vw), 40px);
	letter-spacing: 0.06em;
	flex-shrink: 0;
	padding-right: min(calc(32 / var(--vw-min) * 100vw), 32px);
	white-space: nowrap;
}
@media screen and (max-width:768px){
	.chara__tickerItem {
		font-size: calc(16 / var(--vw-min) * 100vw);
		line-height: calc(28 / var(--vw-min) * 100vw);
		padding-right: calc(24 / var(--vw-min) * 100vw);
	}
}
@keyframes charaTicker {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}
.chara__logo {
	width: min(calc(200 / var(--vw-min) * 100vw), 200px);
	position: absolute;
	top: min(calc(80 / var(--vw-min) * 100vw), 80px);
	left: min(calc(40 / var(--vw-min) * 100vw), 40px);
	z-index: 4;
}
@media screen and (max-width:768px){
	.chara__logo {
		width: calc(152 / var(--vw-min) * 100vw);
		top: calc(42 / var(--vw-min) * 100vw);
		left: calc(10 / var(--vw-min) * 100vw);
	}
}
.chara__logo img {
	width: 100%;
	height: auto;
	pointer-events: none;
}
.chara__logoLink {
	width: 100%;
	height: 100%;
	display: block;
}
/* head */
.chara__head {
	text-align: center;
	position: relative;
	z-index: 2;
	padding-top: min(calc(170 / var(--vw-min) * 100vw), 170px);
}
@media screen and (max-width:768px){
	.chara__head {
		padding-top: calc(130 / var(--vw-min) * 100vw);
	}
}
.chara__catch {
	font-size: min(calc(16 / var(--vw-min) * 100vw), 16px);
	color: #000;
	line-height: 1;
	letter-spacing: 0.03em;
}
@media screen and (max-width:768px){
	.chara__catch {
		font-size: calc(11 / var(--vw-min) * 100vw);
	}
}
.chara__title {
	font-size: min(calc(96 / var(--vw-min) * 100vw), 96px);
	color: #000;
	line-height: 1;
	letter-spacing: 0;
	margin-top: min(calc(9 / var(--vw-min) * 100vw), 9px);
}
@media screen and (max-width:768px){
	.chara__title {
		font-size: calc(45 / var(--vw-min) * 100vw);
		margin-top: calc(8 / var(--vw-min) * 100vw);
	}
}

/* stage */
.chara__stage {
	position: relative;
	z-index: 1;
}
.chara__slide {
	position: absolute;
	top: min(calc(469 / var(--vw-min) * 100vw), 469px);
	right: 0;
	left: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}
@media screen and (max-width:768px){
	.chara__slide {
		top: calc(321 / var(--vw-min) * 100vw);
	}
}
.chara__slideLine {
	font-size: min(calc(90 / var(--vw-min) * 100vw), 90px);
	color: #fff;
	line-height: 1;
	letter-spacing: 0.03em;
	width: max-content;
	display: flex;
	opacity: 0.1;
	animation: charaSlide 66s linear infinite;
}
@media screen and (max-width:768px){
	.chara__slideLine {
		font-size: calc(60 / var(--vw-min) * 100vw);
		animation-duration: 48s;
	}
}
.chara__slideLine span {
	padding-right: 0.4em;
	white-space: nowrap;
}
.chara__slideLine.--ghost {
	color: transparent;
	opacity: 1;
	-webkit-text-stroke: min(calc(2 / var(--vw-min) * 100vw), 2px) rgba(255, 255, 255, 0.18);
	animation-name: charaSlideBack;
}
@media screen and (max-width:768px){
	.chara__slideLine.--ghost {
		-webkit-text-stroke-width: calc(1.5 / var(--vw-min) * 100vw);
	}
}
@keyframes charaSlide {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}
@keyframes charaSlideBack {
	0% {
		transform: translateX(-50%);
	}
	100% {
		transform: translateX(0);
	}
}
.chara__role {
	font-size: min(calc(20 / var(--vw-min) * 100vw), 20px);
	color: var(--chara-color);
	line-height: 1;
	letter-spacing: 0.06em;
	text-align: center;
	width: 100%;
	margin-top: min(calc(22 / var(--vw-min) * 100vw), 22px);
	padding: min(calc(5.5 / var(--vw-min) * 100vw), 5.5px) 0;
	background-color: #000;
}
@media screen and (max-width:768px){
	.chara__role {
		font-size: calc(22 / var(--vw-min) * 100vw);
		width: calc(337 / var(--vw-min) * 100vw);
		position: absolute;
		top: calc(34 / var(--vw-min) * 100vw);
		left: calc(19 / var(--vw-min) * 100vw);
		z-index: 2;
		margin-top: 0;
		padding: calc(5.5 / var(--vw-min) * 100vw) 0;
	}
}

/* layout: デザイン座標（PC 1366 / SP 375）で配置 */
.chara__layout {
	width: 100%;
	max-width: 1366px;
	height: min(calc(951 / var(--vw-min) * 100vw), 951px);
	position: relative;
	z-index: 1;
	margin: 0 auto;
}
@media screen and (max-width:768px){
	.chara__layout {
		height: auto;
		padding-top: calc(592 / var(--vw-min) * 100vw);
	}
}
.chara__identity,
.chara__nameBlock {
	display: contents;
}
.chara__name {
	height: min(calc(114 / var(--vw-min) * 100vw), 114px);
	display: flex;
	position: absolute;
	top: min(calc(123 / var(--vw-min) * 100vw), 123px);
	left: min(calc(133 / var(--vw-min) * 100vw), 133px);
	z-index: 2;
	align-items: flex-end;
}
@media screen and (max-width:768px){
	.chara__name {
		height: auto;
		display: block;
		top: calc(115 / var(--vw-min) * 100vw);
		left: calc(288 / var(--vw-min) * 100vw);
	}
}
.chara__name img,
.chara__attr img {
	width: min(calc(var(--logo-w) / var(--vw-min) * 100vw), calc(var(--logo-w) * 1px));
	max-width: none;
	height: auto;
	pointer-events: none;
}
@media screen and (max-width:768px){
	.chara__name img,
	.chara__attr img {
		width: calc(var(--logo-w) / var(--vw-min) * 100vw);
	}
}
.chara__cv {
	display: flex;
	position: absolute;
	top: min(calc(262 / var(--vw-min) * 100vw), 262px);
	left: min(calc(134 / var(--vw-min) * 100vw), 134px);
	z-index: 2;
	align-items: center;
}
@media screen and (max-width:768px){
	.chara__cv {
		flex-direction: column;
		top: calc((var(--cv-y) - 222) / var(--vw-min) * 100vw);
		left: calc(336 / var(--vw-min) * 100vw);
	}
}
.chara__cvMark {
	font-size: min(calc(16 / var(--vw-min) * 100vw), 16px);
	color: var(--chara-color);
	line-height: 1;
	letter-spacing: 0.03em;
	width: min(calc(30 / var(--vw-min) * 100vw), 30px);
	height: min(calc(30 / var(--vw-min) * 100vw), 30px);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: #000;
}
@media screen and (max-width:768px){
	.chara__cvMark {
		font-size: calc(12 / var(--vw-min) * 100vw);
		width: calc(22 / var(--vw-min) * 100vw);
		height: calc(22 / var(--vw-min) * 100vw);
	}
}
.chara__cvName {
	font-size: min(calc(28 / var(--vw-min) * 100vw), 28px);
	color: #000;
	line-height: 1;
	letter-spacing: 0.06em;
	margin-left: min(calc(10 / var(--vw-min) * 100vw), 10px);
}
@media screen and (max-width:768px){
	.chara__cvName {
		font-size: calc(17 / var(--vw-min) * 100vw);
		line-height: 1;
		letter-spacing: 0;
		text-align: center;
		width: 1em;
		margin-top: calc(3 / var(--vw-min) * 100vw);
		margin-left: 0;
	}
}
.chara__attr {
	width: max-content;
	position: absolute;
	top: min(calc(335 / var(--vw-min) * 100vw), 335px);
	left: min(calc(134 / var(--vw-min) * 100vw), 134px);
	z-index: 0;
}
@media screen and (max-width:768px){
	.chara__attr {
		top: calc((var(--attr-y) - 222) / var(--vw-min) * 100vw);
		left: calc(var(--attr-x) / var(--vw-min) * 100vw);
	}
}
.chara__attr img {
	vertical-align: top;
	pointer-events: none;
}
.chara__visual {
	width: min(calc(450 / var(--vw-min) * 100vw), 450px);
	position: absolute;
	top: min(calc(85 / var(--vw-min) * 100vw), 85px);
	left: min(calc(458 / var(--vw-min) * 100vw), 458px);
	z-index: 1;
}
@media screen and (max-width:768px){
	.chara__visual {
		width: calc(300 / var(--vw-min) * 100vw);
		top: calc(49 / var(--vw-min) * 100vw);
		left: calc(var(--visual-x) / var(--vw-min) * 100vw);
	}
}
.chara__visual img {
	width: 100%;
	height: auto;
	display: block;
	pointer-events: none;
}

/* profile */
.chara__profile {
	width: min(calc(330 / var(--vw-min) * 100vw), 330px);
	position: absolute;
	top: min(calc(64 / var(--vw-min) * 100vw), 64px);
	left: min(calc(903 / var(--vw-min) * 100vw), 903px);
	z-index: 2;
	padding-top: min(calc(71 / var(--vw-min) * 100vw), 71px);
}
@media screen and (max-width:768px){
	.chara__profile {
		width: calc(330 / var(--vw-min) * 100vw);
		position: relative;
		top: auto;
		left: auto;
		margin: 0 auto;
		padding-top: calc(68 / var(--vw-min) * 100vw);
	}
}
.chara__profileLabel {
	width: min(calc(207 / var(--vw-min) * 100vw), 207px);
	position: absolute;
	top: 0;
	left: min(calc(196 / var(--vw-min) * 100vw), 196px);
	z-index: 2;
}
@media screen and (max-width:768px){
	.chara__profileLabel {
		width: calc(207 / var(--vw-min) * 100vw);
		left: calc(193 / var(--vw-min) * 100vw);
	}
}
.chara__profileLabel img {
	width: 100%;
	height: auto;
	display: block;
	pointer-events: none;
}
.chara__profileCard {
	height: min(calc(432 / var(--vw-min) * 100vw), 432px);
	box-sizing: border-box;
	position: relative;
	padding: min(calc(22 / var(--vw-min) * 100vw), 22px) min(calc(20 / var(--vw-min) * 100vw), 20px) min(calc(75 / var(--vw-min) * 100vw), 75px);
	background-color: #fff;
	border: min(calc(2 / var(--vw-min) * 100vw), 2px) solid #000;
	transform: rotate(-3deg);
}
@media screen and (max-width:768px){
	.chara__profileCard {
		height: calc(432 / var(--vw-min) * 100vw);
		padding: calc(22 / var(--vw-min) * 100vw) calc(20 / var(--vw-min) * 100vw) calc(75 / var(--vw-min) * 100vw);
		border-width: calc(2 / var(--vw-min) * 100vw);
	}
}
.chara__profileItem {
	display: flex;
	align-items: center;
	padding: min(calc(8 / var(--vw-min) * 100vw), 8px) 0 min(calc(10 / var(--vw-min) * 100vw), 10px);
	border-bottom: min(calc(2 / var(--vw-min) * 100vw), 2px) solid var(--chara-color);
}
@media screen and (max-width:768px){
	.chara__profileItem {
		padding: calc(8 / var(--vw-min) * 100vw) 0 calc(10 / var(--vw-min) * 100vw);
		border-bottom-width: calc(2 / var(--vw-min) * 100vw);
	}
}
.chara__profileDt {
	font-size: min(calc(16 / var(--vw-min) * 100vw), 16px);
	color: #000;
	line-height: 1.2;
	width: min(calc(110 / var(--vw-min) * 100vw), 110px);
	flex-shrink: 0;
}
@media screen and (max-width:768px){
	.chara__profileDt {
		font-size: calc(16 / var(--vw-min) * 100vw);
		width: calc(110 / var(--vw-min) * 100vw);
	}
}
.chara__profileDd {
	font-size: min(calc(20 / var(--vw-min) * 100vw), 20px);
	color: #000;
	line-height: 1.3;
	letter-spacing: 0.06em;
}
@media screen and (max-width:768px){
	.chara__profileDd {
		font-size: calc(20 / var(--vw-min) * 100vw);
	}
}
.chara__profileCopy {
	font-size: min(calc(18 / var(--vw-min) * 100vw), 18px);
	color: #000;
	line-height: 1.45;
	letter-spacing: 0.06em;
	margin-top: min(calc(14 / var(--vw-min) * 100vw), 14px);
}
@media screen and (max-width:768px){
	.chara__profileCopy {
		font-size: calc(18 / var(--vw-min) * 100vw);
		margin-top: calc(14 / var(--vw-min) * 100vw);
	}
}
.chara__barcode {
	width: min(calc(286 / var(--vw-min) * 100vw), 286px);
	height: auto;
	position: absolute;
	bottom: min(calc(18 / var(--vw-min) * 100vw), 18px);
	left: min(calc(20 / var(--vw-min) * 100vw), 20px);
}
@media screen and (max-width:768px){
	.chara__barcode {
		width: calc(286 / var(--vw-min) * 100vw);
		bottom: calc(18 / var(--vw-min) * 100vw);
		left: calc(20 / var(--vw-min) * 100vw);
	}
}

/* change */
@media (prefers-reduced-motion: no-preference){
	.chara__slide,
	.chara__visual,
	.chara__name,
	.chara__cv,
	.chara__attr,
	.chara__stage > .chara__role,
	.chara__profile {
		animation-timing-function: cubic-bezier(.22, 1, .36, 1);
		animation-fill-mode: both;
	}
	.chara__slide {
		animation-duration: .9s;
		animation-name: charaInFade;
	}
	.chara__visual {
		animation-duration: .8s;
		animation-name: charaInVisual;
	}
	.chara__name {
		animation-duration: .7s;
		animation-delay: .08s;
		animation-name: charaInName;
	}
	.chara__stage > .chara__role {
		animation-duration: .5s;
		animation-delay: .12s;
		animation-name: charaInRise;
	}
	.chara__cv {
		animation-duration: .5s;
		animation-delay: .16s;
		animation-name: charaInRise;
	}
	.chara__attr {
		animation-duration: .65s;
		animation-delay: .2s;
		animation-name: charaInAttr;
	}
	.chara__profile {
		animation-duration: .6s;
		animation-delay: .18s;
		animation-name: charaInRise;
	}
	.chara__profileCard {
		animation: charaInCard .7s cubic-bezier(.34, 1.56, .64, 1) .22s both;
	}
}
@keyframes charaInFade {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes charaInVisual {
	0% {
		opacity: 0;
		transform: translateY(min(calc(48 / var(--vw-min) * 100vw), 48px)) scale(.96);
		clip-path: inset(22% 0 0 0);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
		clip-path: inset(0);
	}
}
@keyframes charaInName {
	0% {
		opacity: 0;
		transform: translateX(min(calc(-36 / var(--vw-min) * 100vw), -36px)) skewX(-12deg);
		clip-path: inset(0 100% 0 0);
	}
	100% {
		opacity: 1;
		transform: translateX(0) skewX(0);
		clip-path: inset(0);
	}
}
@keyframes charaInRise {
	0% {
		opacity: 0;
		transform: translateY(min(calc(20 / var(--vw-min) * 100vw), 20px));
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes charaInAttr {
	0% {
		opacity: 0;
		transform: translateY(min(calc(16 / var(--vw-min) * 100vw), 16px));
		clip-path: inset(100% 0 0 0);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
		clip-path: inset(0);
	}
}
@keyframes charaInCard {
	0% {
		opacity: 0;
		transform: translateY(min(calc(28 / var(--vw-min) * 100vw), 28px)) rotate(-14deg) scale(.92);
	}
	100% {
		opacity: 1;
		transform: translateY(0) rotate(-3deg) scale(1);
	}
}
@media screen and (max-width:768px){
	@keyframes charaInVisual {
		0% {
			opacity: 0;
			transform: translateY(calc(48 / var(--vw-min) * 100vw)) scale(.96);
			clip-path: inset(22% 0 0 0);
		}
		100% {
			opacity: 1;
			transform: translateY(0) scale(1);
			clip-path: inset(0);
		}
	}
	@keyframes charaInName {
		0% {
			opacity: 0;
			transform: translateX(calc(-36 / var(--vw-min) * 100vw)) skewX(-12deg);
			clip-path: inset(0 100% 0 0);
		}
		100% {
			opacity: 1;
			transform: translateX(0) skewX(0);
			clip-path: inset(0);
		}
	}
	@keyframes charaInRise {
		0% {
			opacity: 0;
			transform: translateY(calc(20 / var(--vw-min) * 100vw));
		}
		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}
	@keyframes charaInAttr {
		0% {
			opacity: 0;
			transform: translateY(calc(16 / var(--vw-min) * 100vw));
			clip-path: inset(100% 0 0 0);
		}
		100% {
			opacity: 1;
			transform: translateY(0);
			clip-path: inset(0);
		}
	}
	@keyframes charaInCard {
		0% {
			opacity: 0;
			transform: translateY(calc(28 / var(--vw-min) * 100vw)) rotate(-14deg) scale(.92);
		}
		100% {
			opacity: 1;
			transform: translateY(0) rotate(-3deg) scale(1);
		}
	}
}

/* hand */
.chara__hand {
	width: min(calc(100 / var(--vw-min) * 100vw), 100px);
	height: min(calc(66 / var(--vw-min) * 100vw), 66px);
	display: block;
	position: absolute;
	top: min(calc(307 / var(--vw-min) * 100vw), 307px);
	z-index: 3;
	background: url(../img/common/deco/deco_hand.svg) no-repeat center / contain;
}
@media screen and (max-width:768px){
	.chara__hand {
		width: calc(60 / var(--vw-min) * 100vw);
		height: calc(40 / var(--vw-min) * 100vw);
		top: calc(399 / var(--vw-min) * 100vw);
	}
}
.chara__hand.--prev {
	left: min(calc(16 / var(--vw-min) * 100vw), 16px);
	transform: scaleX(-1);
}
@media screen and (max-width:768px){
	.chara__hand.--prev {
		left: calc(18 / var(--vw-min) * 100vw);
	}
}
.chara__hand.--next {
	right: min(calc(17 / var(--vw-min) * 100vw), 17px);
}
@media screen and (max-width:768px){
	.chara__hand.--next {
		right: calc(20 / var(--vw-min) * 100vw);
	}
}
@media (hover: hover) and (pointer: fine){
	.chara__hand {
		transition: opacity .3s, transform .3s;
	}
	.chara__hand.--prev:hover {
		opacity: .7;
		transform: scaleX(-1) translateX(min(calc(8 / var(--vw-min) * 100vw), 8px));
	}
	.chara__hand.--next:hover {
		opacity: .7;
		transform: translateX(min(calc(8 / var(--vw-min) * 100vw), 8px));
	}
}
@media (hover: hover) and (pointer: fine) and (max-width: 768px){
	.chara__hand.--prev:hover {
		transform: scaleX(-1) translateX(calc(8 / var(--vw-min) * 100vw));
	}
	.chara__hand.--next:hover {
		transform: translateX(calc(8 / var(--vw-min) * 100vw));
	}
}

/* select */
.chara__select {
	max-width: 1366px;
	position: relative;
	z-index: 2;
	margin: min(calc(35 / var(--vw-min) * 100vw), 35px) auto 0;
	padding: 0 min(calc(9 / var(--vw-min) * 100vw), 9px);
}
@media screen and (max-width:768px){
	.chara__select {
		margin-top: calc(72 / var(--vw-min) * 100vw);
		padding: 0;
	}
}
.chara__selectHead {
	align-items: center;
	justify-content: space-between;
	padding: 0 calc(20 / var(--vw-min) * 100vw) 0 calc(18 / var(--vw-min) * 100vw);
}
@media screen and (max-width:768px){
	.chara__selectHead {
		display: flex;
		position: relative;
		z-index: 3;
	}
}
.chara__selectHead .chara__hand {
	position: relative;
	top: auto;
	right: auto;
	left: auto;
	flex-shrink: 0;
	padding: 0;
	border: 0;
	cursor: pointer;
}
.chara__selectHead .chara__hand.is-limit {
	opacity: .35;
	pointer-events: none;
}
.chara__selectLabel {
	font-size: min(calc(24 / var(--vw-min) * 100vw), 24px);
	color: #000;
	line-height: 1;
	letter-spacing: 0.03em;
	text-align: center;
}
@media screen and (max-width:768px){
	.chara__selectLabel {
		font-size: calc(20 / var(--vw-min) * 100vw);
		touch-action: pan-y;
		user-select: none;
		cursor: grab;
	}
}
.chara__doorLists {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: min(calc(10 / var(--vw-min) * 100vw), 10px);
	padding-top: min(calc(40 / var(--vw-min) * 100vw), 40px);
}
@media screen and (max-width:768px){
	.chara__doorLists {
		justify-content: flex-start;
		gap: calc(8.6 / var(--vw-min) * 100vw);
		overflow-x: auto;
		overflow-y: clip;
		margin-top: calc(-37 / var(--vw-min) * 100vw);
		padding: calc(80 / var(--vw-min) * 100vw) calc(108 / var(--vw-min) * 100vw) calc(56 / var(--vw-min) * 100vw);
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}
	.chara__doorLists::-webkit-scrollbar {
		display: none;
	}
}
.chara__doorItem {
	flex-shrink: 0;
}
@media screen and (max-width:768px){
	.chara__doorItem {
		scroll-snap-align: center;
	}
}
.chara__doorLink {
	width: min(calc(184 / var(--vw-min) * 100vw), 184px);
	height: min(calc(290 / var(--vw-min) * 100vw), 290px);
	display: block;
	position: relative;
	background-color: var(--door);
	border-radius: 48.91% 48.91% 0 0 / 31.03% 31.03% 0 0;
}
@media screen and (max-width:768px){
	.chara__doorLink {
		width: calc(158.5 / var(--vw-min) * 100vw);
		height: calc(250 / var(--vw-min) * 100vw);
	}
}
.chara__doorLink::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background-color: rgba(0, 0, 0, 0.3);
}
.chara__doorFace {
	width: 66.8%;
	position: absolute;
	top: -31.5%;
	left: 36.7%;
	z-index: 10;
	opacity: 0;
	pointer-events: none;
	transform-origin: center bottom;
	transition: opacity .2s, transform .3s cubic-bezier(.4, 0, 1, 1);
	transform: translateY(45%) scale(.45);
}
.chara__doorFace img {
	width: 100%;
	height: auto;
	display: block;
	pointer-events: none;
}
.chara__doorPanel {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	display: block;
	position: absolute;
	inset: 0;
	z-index: 2;
	background-color: var(--door);
	border: min(calc(1.769 / var(--vw-min) * 100vw), 1.769px) solid #000;
	border-radius: 48.91% 48.91% 0 0 / 31.03% 31.03% 0 0;
	transform-origin: center center;
	transition: transform .55s cubic-bezier(.22, 1, .36, 1);
}
@media screen and (max-width:768px){
	.chara__doorPanel {
		border-width: calc(1.5 / var(--vw-min) * 100vw);
	}
}
.chara__doorItem.is-current .chara__doorPanel,
.chara__doorLink:focus-visible .chara__doorPanel {
	transform: translate(-1.09%, 7.71%) rotate(12deg) skewX(12deg);
}
.chara__doorItem.is-current .chara__doorFace,
.chara__doorLink:focus-visible .chara__doorFace {
	opacity: 1;
	transform: translateY(0) scale(1);
	transition: opacity .25s .12s, transform .5s cubic-bezier(.34, 1.56, .64, 1) .12s;
}
@media (hover: hover) and (pointer: fine){
	.chara__doorLink:hover .chara__doorPanel {
		transform: translate(-1.09%, 7.71%) rotate(12deg) skewX(12deg);
	}
	.chara__doorLink:hover .chara__doorFace {
		opacity: 1;
		transform: translateY(0) scale(1);
		transition: opacity .25s .12s, transform .5s cubic-bezier(.34, 1.56, .64, 1) .12s;
	}
}
.chara__doorPlate {
	width: auto;
	height: 21.02%;
	display: block;
	position: absolute;
	top: 18.96%;
	left: 50%;
	transform: translateX(-50%);
}
.chara__doorKnob {
	width: 10.58%;
	height: auto;
	position: absolute;
	top: 50%;
	left: 80.29%;
}