@charset "utf-8";
/*-----------------------------------------------
 * firstview
-------------------------------------------------*/
.firstView {
	position: relative;
}
.firstView:before {
	content: "";
	position: absolute;
	left: 0;
	top: max(-18px, -1.5vw);
	right: 0;
	height: min(calc(148 / var(--vw-min) * 100vw), 148px);
	background: url(../../../assets/img/common/bg/fv_text_suikoden.svg) repeat-x 0 0 / auto 100%;
	animation: mv-text1 30s linear infinite;
	z-index: 1;
}
@keyframes mv-text1 {
	0% {
		background-position: 0 0;
	}
	100% {
		background-position: max(calc(-1107 / var(--vw-min) * 100vw),-1107px) 0;
	}
}
.firstView__inner {
	max-width: 1980px;
	margin: 0 auto;
	display: flex;
	position: relative;
	z-index: 2;
}
@media screen and (max-width:768px){
	.firstView:before {
		top: auto;
		bottom: max(-100px, -13.33333vw);
	}
	.firstView__inner {
		max-width: 100%;
		flex-direction: column;
	}
}

/* logoArea */
.firstView__logoArea {
	width: 35%;
	position: relative;
	z-index: 2;
}
.firstView__logoArea__inner {
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
@media screen and (max-width:768px){
	.firstView__logoArea {
		width: 100%;
		order: 2;
	}
	.firstView__logoArea__inner {
		position: relative;
		top: auto;
		left: auto;
		height: auto;
	}
}

/* logo */
.firstView__logo {
	background: url(../../../assets/img/common/logo/main_logo.png) no-repeat 0 0 / 100%;
	width: min(calc(440 / var(--vw-min) * 100vw), calc(440px * 1.6));
	height: min(calc(169 / var(--vw-min) * 100vw), calc(169px * 1.6));
	margin: auto;
	position: absolute;
	top: -2.5vw;
	bottom: 0;
	left: min(calc(40 / var(--vw-min) * 100vw), calc(40px * 1.6));
}
.firstView__logo img {
	width: 100%;
}
@media screen and (max-width:768px){
	.firstView__logo {
		width: calc(604 / var(--vw-min) * 100vw);
		height: calc(232 / var(--vw-min) * 100vw);
		position: relative;
		top: auto;
		bottom: auto;
		left: auto;
		margin: calc(40 / var(--vw-min) * 100vw) auto 0;
	}
}

/* catch */
.firstView__catch {
	background: url(../../../assets/img/top/fv_catch_en.png) no-repeat 0 0 / 100%;
	width: min(calc(528 / var(--vw-min) * 100vw), calc(528px * 1.4));
	height: min(calc(98 / var(--vw-min) * 100vw), calc(98px * 1.4));
	position: absolute;
	bottom: min(calc(20 / var(--vw-min) * 100vw), calc(20px * 1.6));
	left: min(calc(40 / var(--vw-min) * 100vw), calc(40px * 1.6));
}
@media screen and (max-width:768px){
	.firstView__catch {
		background-image: url(../../../assets/img/top/fv_catch_sp_en.png);
		width: calc(659 / var(--vw-min) * 100vw);
		height: calc(118 / var(--vw-min) * 100vw);
		position: relative;
		bottom: auto;
		left: auto;
		margin: calc(10 / var(--vw-min) * 100vw) auto 0;
	}
}

/* visualArea */
.firstView__visualArea {
	width: 65%;
	position: relative;
	z-index: 1;
}
.firstView__visual {
	overflow: hidden;
	width: 100%;
}
.firstView__visual img {
	width: 100%;
}
@media screen and (max-width:768px){
	.firstView__visualArea {
		width: 100%;
		order: 1;
	}
}

/* x */
.firstView__x {
	width: min(calc(120 / var(--vw-min) * 100vw), calc(120px * 1.4));
	height: min(calc(120 / var(--vw-min) * 100vw), calc(120px * 1.4));
	position: absolute;
	top: min(calc(20 / var(--vw-min) * 100vw), calc(20px * 1.2));
	right: min(calc(20 / var(--vw-min) * 100vw), calc(20px * 1.2));
	z-index: 10;
}
.firstView__x > a {
	border-radius: 50%;
	background: url(../../../assets/img/top/fv_xlink_en.png) no-repeat 0 0 / 100%;
	display: block;
	width: 100%;
	height: 100%;
}
@media screen and (hover: hover) and (pointer: fine) {
	.firstView__x > a {
		transition: filter .4s ease, transform .4s ease;
	}
	.firstView__x > a:hover {
		filter: brightness(150%);
		transform: scale(1.05);
	}
}
@media screen and (max-width:768px){
	.firstView__x {
		width: calc(450 / var(--vw-min) * 100vw);
		height: calc(100 / var(--vw-min) * 100vw);
		position: relative;
		top: auto;
		right: auto;
		margin: calc(60 / var(--vw-min) * 100vw) auto 0;
		order: 3;
	}
	.firstView__x > a {
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: calc(50 / var(--vw-min) * 100vw);
		background: #0E1B3C;
		background: linear-gradient(180deg,rgba(14, 27, 60, 1) 0%, rgba(13, 52, 123, 1) 100%);
		position: relative;
		filter: none;
	}
	.firstView__x > a:before {
		content: "";
		display: block;
		background: url(../../../assets/img/top/fv_xlink_text_en.png) no-repeat 0 0 / 100%;
		width: calc(257 / var(--vw-min) * 100vw);
		height: calc(35 / var(--vw-min) * 100vw);
	}
	.firstView__x > a:after {
		content: "";
		background: url(../../../assets/img/common/icon/icon_blank.svg) no-repeat 0 0 / 100%;
		width: calc(18 / var(--vw-min) * 100vw);
		height: calc(18 / var(--vw-min) * 100vw);
		margin: auto;
		position: absolute;
		top: 0;
		right: calc(40 / var(--vw-min) * 100vw);
		bottom: 0;
	}
}

/*-----------------------------------------------
 * Introduction
-------------------------------------------------*/
.introduction {
	position: relative;
}
.introduction:before {
	content: "";
	display: block;
	width: 100%;
	height: 150vh;
	min-height: calc(var(--common-min-height) * 1.5);
}
.introduction__inner {
	position: relative;
	z-index: 1;
}
@media screen and (max-width:768px){
	.introduction__inner {
		padding-bottom: calc(300 / var(--vw-min) * 100vw);
	}
}

/* fixed */
.introduction__fixedWrap {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
.introduction__fixed {
	display: flex;
	align-items: center;
	justify-content: center;
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	height: min(100dvh, 100%);
	min-height: var(--common-min-height);
}
.introduction__title {
	font-size: min(calc(156 / var(--vw-min) * 100vw), 156px);
	font-weight: 500;
	letter-spacing: -.03em;
	line-height: 1;
	position: absolute;
	bottom: -0.18em;
	right: 0;
	opacity: .1;
}
.introduction__text {
	font-size: min(calc(46 / var(--vw-min) * 100vw), 46px);
	line-height: 1.4;
	transform: scaleY(96%);
	text-align: center;
}
@media screen and (max-width:768px){
	.introduction__title {
		font-size: calc(130 / var(--vw-min) * 100vw);
	}
	.introduction__text {
		font-size: calc(44 / var(--vw-min) * 100vw);
	}
}

/* sec1 */
.introduction__sec1 {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 100%;
	max-width: var(--common-in-maxwidth);
	height: min(100vh, 100%);
	min-height: var(--common-min-height);
	margin: 0 auto;
	position: relative;
}
.introduction__visual {
	width: min(calc(380 / var(--vw-min) * 100vw), calc(380px * 1.2));
	position: absolute;
	top: max(-150px, -12.5vw);
	left: 0;
}
.introduction__visual:before {
	content: "";
	background-color: var(--color-blue);
	width: 100%;
	height: 100%;
	position: absolute;
	top: min(calc(40 / var(--vw-min) * 100vw), calc(40px * 1.2));
	left: min(calc(40 / var(--vw-min) * 100vw), calc(40px * 1.2));
	opacity: .2;
}
.introduction__visual > span {
	position: relative;
	z-index: 1;
}
.introduction__visual > span img {
	width: 100%;
}
@media screen and (max-width:768px){
	.introduction__sec1 {
		align-items: flex-start;
		justify-content: flex-start;
		flex-direction: column;
	}
	.introduction__visual {
		width: calc(380 / var(--vw-min) * 100vw);
		position: relative;
		left: auto;
	}
}

.introduction__sec1__textWrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 68.33333%;
	padding: 0 min(calc(100 / var(--vw-min) * 100vw), 100px);
}
.introduction__sec1__text {
	font-size: min(calc(18 / var(--vw-min) * 100vw), calc(18px * 1.1));
	line-height: 2;
	transform: scaleY(96%);
	text-shadow: 0px 0px 6px rgba(255, 255, 255, 1), 0px 0px 6px rgba(255, 255, 255, 1), 0px 0px 6px rgba(255, 255, 255, 1), 0px 0px 6px rgba(255, 255, 255, 1), 0px 0px 6px rgba(255, 255, 255, 1), 0px 0px 6px rgba(255, 255, 255, 1), 0px 0px 6px rgba(255, 255, 255, 1), 0px 0px 6px rgba(255, 255, 255, 1);
}
@media screen and (max-width:768px){
	.introduction__sec1__textWrap {
		margin-top: calc(240 / var(--vw-min) * 100vw);
		width: 100%;
		flex-direction: column;
		padding: 0 min(calc(100 / var(--vw-min) * 100vw), 100px);
	}
	.introduction__sec1__text {
		font-size: calc(26 / var(--vw-min) * 100vw);
	}
}

/* sec2 */
.introduction__sec2 {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	max-width: var(--common-in-maxwidth);
	height: min(100vh, 100%);
	min-height: var(--common-min-height);
	margin: 0 auto;
	position: relative;
}
.introduction__sec2__textWrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 68.33333%;
	padding: 0 min(calc(100 / var(--vw-min) * 100vw), 100px);
}
.introduction__sec2__text {
	font-size: min(calc(18 / var(--vw-min) * 100vw), calc(18px * 1.1));
	line-height: 2;
	transform: scaleY(96%);
	text-shadow: 0px 0px 6px rgba(255, 255, 255, 1), 0px 0px 6px rgba(255, 255, 255, 1), 0px 0px 6px rgba(255, 255, 255, 1), 0px 0px 6px rgba(255, 255, 255, 1), 0px 0px 6px rgba(255, 255, 255, 1), 0px 0px 6px rgba(255, 255, 255, 1), 0px 0px 6px rgba(255, 255, 255, 1), 0px 0px 6px rgba(255, 255, 255, 1);
}
@media screen and (max-width:768px){
	.introduction__sec2 {
		margin-top: calc(240 / var(--vw-min) * 100vw);
		align-items: flex-start;
		justify-content: flex-start;
		flex-direction: column;
	}
	.introduction__sec2__textWrap {
		width: 100%;
		flex-direction: column;
	}
	.introduction__sec2__text {
		font-size: calc(26 / var(--vw-min) * 100vw);
	}
}

.introduction__line {
	letter-spacing: 0em;
	margin: 0 0.2em;
}

/*-----------------------------------------------
 * Staff&Cast
-------------------------------------------------*/
.staffcast {
	padding-top: min(calc(160 / var(--vw-min) * 100vw), 160px);
}
.scListsBox {
	display: flex;
	padding: min(calc(80 / var(--vw-min) * 100vw), 80px) min(calc(80 / var(--vw-min) * 100vw), 80px) 0 min(calc(40 / var(--vw-min) * 100vw), 40px);
}
.scListsWrap {
	width: 50%;
	padding-left: min(calc(40 / var(--vw-min) * 100vw), 40px);
}
.scLists__title {
	background: #0E1B3C;
	background: linear-gradient(180deg,rgba(14, 27, 60, 1) 0%, rgba(13, 52, 123, 1) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size: min(calc(60 / var(--vw-min) * 100vw), 60px);
	font-weight: 500;
	letter-spacing: -.03em;
	line-height: 1.2;
	margin-bottom: min(calc(50 / var(--vw-min) * 100vw), 50px);
}
@media screen and (max-width:768px){
	.staffcast {
		padding-top: calc(180 / var(--vw-min) * 100vw);
	}
	.scListsBox {
		flex-direction: column;
		padding: calc(60 / var(--vw-min) * 100vw) calc(40 / var(--vw-min) * 100vw) 0;
	}
	.scListsWrap {
		width: 100%;
		padding-left: 0;
	}
	.scListsWrap:not(:first-of-type) {
		margin-top: calc(100 / var(--vw-min) * 100vw);
	}
	.scLists__title {
		font-size: calc(80 / var(--vw-min) * 100vw);
		text-align: center;
		margin-bottom: calc(60 / var(--vw-min) * 100vw);
	}
}

/* dl */
.scLists__item:not(:first-child) {
	margin-top: min(calc(46 / var(--vw-min) * 100vw), 46px);
}
.scLists__item > dt {
	display: flex;
	align-items: center;
	font-size: min(calc(18 / var(--vw-min) * 100vw), 18px);
	letter-spacing: 0;
	line-height: 1;
	margin-bottom: 0.5em;
	opacity: .6;
}
.scLists__item > dt:after {
	content: "";
	display: block;
	background-color: var(--color-blue);
	width: 1em;
	height: 1px;
	transform: rotate(-45deg);
	margin: 0 0.7em;
}
.scLists__item > dd {
	font-size: min(calc(22 / var(--vw-min) * 100vw), 22px);
	letter-spacing: 0.04em;
}
.scLists__item > dd.has-comment {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.scLists__item > dd > span {
	font-size: 70%;
}
@media screen and (max-width:768px){
	.scLists__item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.scLists__item:not(:first-child) {
		margin-top: calc(46 / var(--vw-min) * 100vw);
	}
	.scLists__item > dt {
		font-size: calc(24 / var(--vw-min) * 100vw);
	}
	.scLists__item > dd {
		font-size: calc(28 / var(--vw-min) * 100vw);
		text-align: center;
	}
	.scLists__item > dd > span {
		margin-top: -0.1em;
		display: block;
	}
	.scLists.is-cast .scLists__item {
		flex-direction: row;
		align-items: flex-start;
	}
	.scLists.is-cast .scLists__item > dt {
		display: flex;
		justify-content: flex-end;
		width: 50%;
		margin-bottom: 0;
	}
	.scLists.is-cast .scLists__item > dd {
		width: 50%;
		flex-wrap: wrap;
		margin-top: -0.45em;
	}
}

/* name */
.scLists__name {
	display: flex;
	align-items: center;
	white-space: nowrap;
}

/* comment */
.scLists__comment {
	display: flex;
	align-items: center;
	width: 100%;
}
.scLists__comment:before {
	content: "";
	background-color: var(--color-blue);
	display: block;
	width: 100%;
	height: 1px;
	margin-right: min(calc(40 / var(--vw-min) * 100vw), 40px);
}
@media screen and (max-width:768px){
	.scLists__comment:before {
		margin-right: calc(30 / var(--vw-min) * 100vw);
	}
}
.scLists__comment > a {
	display: block;
	font-size: min(calc(26 / var(--vw-min) * 100vw), 26px);
	letter-spacing: -.01em;
	line-height: 1.2;
	text-decoration: none;
	position: relative;
	padding-right: min(calc(30 / var(--vw-min) * 100vw), 30px);
}
.scLists__comment > a:before {
	content: "";
	background-color: var(--color-blue);
	border-radius: 50%;
	width: min(calc(21 / var(--vw-min) * 100vw), 21px);
	height: min(calc(21 / var(--vw-min) * 100vw), 21px);
	margin: auto;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
}
.scLists__comment > a:after {
	content: "";
	background-color: #fff;
	-webkit-mask: url(../../../assets/img/common/icon/icon_plus.svg) no-repeat center / contain;
	mask: url(../../../assets/img/common/icon/icon_plus.svg) no-repeat center / contain;
	width: min(calc(7 / var(--vw-min) * 100vw), 7px);
	height: min(calc(7 / var(--vw-min) * 100vw), 7px);
	margin: auto;
	position: absolute;
	top: 0;
	right: min(calc(7 / var(--vw-min) * 100vw), 7px);
	bottom: 0;
	z-index: 2;
}
@media screen and (hover: hover) and (pointer: fine) {
	.scLists__comment > a:before {
		transition: transform .8s var(--easing-outquart);
	}
	.scLists__comment > a:hover:before {
		transform: scale(1.3);
	}
	.scLists__comment > a:after {
		transition: transform .8s var(--easing-outquart);
	}
	.scLists__comment > a:hover:after {
		transform: rotate(180deg) scale(1.5);
	}
}
@media screen and (max-width:768px){
	.scLists__comment > a {
		font-size: calc(30 / var(--vw-min) * 100vw);
		padding-right: calc(50 / var(--vw-min) * 100vw);
	}
	.scLists__comment > a:before {
		width: calc(31 / var(--vw-min) * 100vw);
		height: calc(31 / var(--vw-min) * 100vw);
	}
	.scLists__comment > a:after {
		width: calc(13 / var(--vw-min) * 100vw);
		height: calc(13 / var(--vw-min) * 100vw);
		right: calc(8 / var(--vw-min) * 100vw);
	}
}

/*-----------------------------------------------
 * Character
-------------------------------------------------*/
.character {
	padding-top: min(calc(180 / var(--vw-min) * 100vw), 180px);
}

/* thumb */
.charaThumbLists {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: min(calc(40 / var(--vw-min) * 100vw), 40px);
}
.charaThumbLists > li {
	width: min(calc(80 / var(--vw-min) * 100vw), 80px);
	height: min(calc(80 / var(--vw-min) * 100vw), 80px);
	margin: 0 min(calc(10 / var(--vw-min) * 100vw), 10px);
}
.charaThumbLists > li > a {
	border-radius: 50%;
	border: 1px solid var(--color-blue);
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
}
.charaThumbLists > li > a:before {
	content: "";
	background-color: var(--color-blue);
	border-radius: 50%;
	width: min(calc(5 / var(--vw-min) * 100vw), 5px);
	height: min(calc(5 / var(--vw-min) * 100vw), 5px);
	margin: auto;
	position: absolute;
	top: max(-20px, -1.66666vw);
	right: 0;
	left: 0;
	transform: scale(0);
	transition: transform .4s ease;
}
.charaThumbLists > li > a.is-active:before {
	transform: scale(1);
}
@media screen and (max-width:768px){
	.charaThumbLists > li > a:before {
		width: calc(8 / var(--vw-min) * 100vw);
		height: calc(8 / var(--vw-min) * 100vw);
		top: -2.66666vw;
	}
}
.charaThumbLists > li > a > span {
	border-radius: 50%;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.charaThumbLists > li > a img {
	width: 100%;
	height: 100%;
	opacity: .6;
	transition: opacity .3s ease;
}
.charaThumbLists > li > a.is-active img {
	opacity: 1;
}
@media screen and (hover: hover) and (pointer: fine) {
	.charaThumbLists > li > a img {
		transition: transform .6s var(--easing-outquart);
	}
	.charaThumbLists > li > a:hover img {
		transform: scale(1.1);
	}
}

/* charaLists */
.charaListsArea {
	margin-top: min(calc(80 / var(--vw-min) * 100vw), 80px);
}
.charaLists {
	width: 100%;
	position: relative;
	z-index: 1;
}
.charaLists__item {
	width: 100%;
}
.charaLists__item__inner {
	width: 66.66666%;
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
	z-index: 2;
}
@media screen and (max-width:768px){
	.charaListsArea {
		margin-top: calc(60 / var(--vw-min) * 100vw);
	}
	.charaLists__item__inner {
		width: calc(590 / var(--vw-min) * 100vw);
		max-width: 100%;
	}
}

/* img */
.charaLists__img {
	width: min(calc(308 / var(--vw-min) * 100vw), calc(308px * 1.5));
	margin: 0 auto;
	position: relative;
	z-index: 10;
	opacity: 0;
	transform: translateX(-10%);
	transition: transform .8s var(--easing-outquart), opacity .3s ease;
}
.charaLists__item.swiper-slide-active .charaLists__img {
	transition-delay: 0.1s;
	opacity: 1;
	transform: translateX(0px);
}
.charaLists__img img {
	width: 100%;
}
.charaLists__img.is-chara3 {
	width: min(calc(359 / var(--vw-min) * 100vw), calc(359px * 1.5));
	transform: translateX(-6%);
}
@media screen and (max-width:768px){
	.charaLists__img {
		width: calc(398 / var(--vw-min) * 100vw);
	}
	.charaLists__img.is-chara3 {
		width: calc(449 / var(--vw-min) * 100vw);
	}
}

/* bg */
.charaLists__bgWrap {
	display: flex;
	width: 50%;
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 1;
}
.charaLists__bg {
	width: min(calc(200 / var(--vw-min) * 100vw), calc(200px * 1.5));
	height: 0;
	overflow: hidden;
	position: relative;
	flex-shrink: 0;
	transition: height .6s var(--easing-outquart);
}
.charaLists__item.swiper-slide-active .charaLists__bg {
	transition-delay: .3s;
	height: min(calc(500 / var(--vw-min) * 100vw), calc(500px * 1.5));
}
.charaLists__bg.is-chara1 { background-color: var(--color-riliu); }
.charaLists__bg.is-chara2 { background-color: var(--color-jowy); }
.charaLists__bg.is-chara3 { background-color: var(--color-nanami); }
.charaLists__bg img {
	width: 100%;
	margin: auto;
	position: absolute;
	right: 0;
	top: 0;
	left: 0;
	z-index: 2;
}
@media screen and (max-width:768px){
	.charaLists__bgWrap {
		width: 100%;
		left: 0;
	}
	.charaLists__bg {
		margin-left: 50%;
	}
}

.charaLists__enWrap {
	width: min(calc(160 / var(--vw-min) * 100vw), 160px);
	margin-left: min(calc(60 / var(--vw-min) * 100vw), 60px);
	opacity: 0;
	transform: translateX(20%);
	transition: transform .8s var(--easing-outquart), opacity .3s ease;
}
.charaLists__item.swiper-slide-active .charaLists__enWrap {
	transition-delay: 0.5s;
	opacity: 1;
	transform: translateX(0px);
}
.charaLists__en {
	font-size: min(calc(200 / var(--vw-min) * 100vw), 200px);
	font-weight: 500;
	letter-spacing: -.04em;
	line-height: 1;
	transform: rotate(90deg);
	white-space: nowrap;
	opacity: .1;
	height: min(calc(160 / var(--vw-min) * 100vw), 160px);
}
@media screen and (max-width:768px){
	.charaLists__enWrap {
		position: absolute;
		top: 0;
		left: 0;
		margin-left: 0;
	}
}

/* text */
.charaLists__textWrap {
	width: 32%;
	position: absolute;
	top: 8%;
	left: 0;
	z-index: 11;
}
@media screen and (max-width:768px){
	.charaLists__textWrap {
		width: 100%;
		position: relative;
		top: auto;
		left: auto;
		margin-top: calc(40 / var(--vw-min) * 100vw);
	}
}

.charaLists__name {
	font-size: min(calc(40 / var(--vw-min) * 100vw), 40px);
	letter-spacing: 0;
	opacity: 0;
	transform: translateX(-10%);
	transition: transform .8s var(--easing-outquart), opacity .3s ease;
}
.charaLists__item.swiper-slide-active .charaLists__name {
	transition-delay: 0.5s;
	opacity: 1;
	transform: translateX(0px);
}
.charaLists__name > span {
	margin-left: 0;
}
.charaLists__enName {
	font-size: min(calc(14 / var(--vw-min) * 100vw), 14px);
	line-height: 1;
	letter-spacing: -.03em;
	opacity: 0;
	transform: translateX(-10%);
	transition: transform .8s var(--easing-outquart), opacity .3s ease;
}
.charaLists__item.swiper-slide-active .charaLists__enName {
	transition-delay: 0.6s;
	opacity: 1;
	transform: translateX(0px);
}
@media screen and (max-width:768px){
	.charaLists__name {
		font-size: calc(60 / var(--vw-min) * 100vw);
	}
	.charaLists__enName {
		font-size: calc(26 / var(--vw-min) * 100vw);
	}
}

.charaLists__cv {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-top: min(calc(30 / var(--vw-min) * 100vw), 30px);
	opacity: 0;
	transform: translateX(-10%);
	transition: transform .8s var(--easing-outquart), opacity .3s ease;
}
.charaLists__item.swiper-slide-active .charaLists__cv {
	transition-delay: 0.7s;
	opacity: 1;
	transform: translateX(0px);
}
.charaLists__cv > dt {
	display: flex;
	align-items: center;
	font-size: min(calc(14 / var(--vw-min) * 100vw), 14px);
	letter-spacing: 0;
	line-height: 1;
	width: 100%;
}
.charaLists__cv > dt:after {
	content: "";
	background-color: var(--color-blue);
	width: min(calc(60 / var(--vw-min) * 100vw), 60px);
	height: 1px;
	margin-left: 1em;
	width: 100%;
}
.charaLists__cv > dd {
	font-size: min(calc(22 / var(--vw-min) * 100vw), 22px);
	letter-spacing: 0;
	line-height: 1;
	margin-left: 0;
	margin-top: 0.8em;
}
@media screen and (max-width:768px){
	.charaLists__cv {
		align-items: center;
		flex-direction: row;
		margin-top: calc(40 / var(--vw-min) * 100vw);
	}
	.charaLists__cv > dt {
		font-size: calc(22 / var(--vw-min) * 100vw);
		width: auto;
	}
	.charaLists__cv > dt:after {
		width: calc(100 / var(--vw-min) * 100vw);
	}
	.charaLists__cv > dd {
		font-size: calc(30 / var(--vw-min) * 100vw);
		margin-left: 1em;
		margin-top: 0;
	}
}

.charaLists__prf {
	margin-top: min(calc(50 / var(--vw-min) * 100vw), 50px);
	opacity: 0;
	transform: translateX(-10%);
	transition: transform .8s var(--easing-outquart), opacity .3s ease;
}
.charaLists__item.swiper-slide-active .charaLists__prf {
	transition-delay: 0.8s;
	opacity: 1;
	transform: translateX(0px);
}
.charaLists__prf > dt {
	display: flex;
	align-items: center;
	font-size: min(calc(14 / var(--vw-min) * 100vw), 14px);
	letter-spacing: 0;
	line-height: 1;
	margin-bottom: 1.2em;
}
.charaLists__prf > dt:after {
	content: "";
	background-color: var(--color-blue);
	width: 100%;
	height: 1px;
	margin-left: 1em;
}
.charaLists__prf > dd {
	border-bottom: 1px solid var(--color-blue);
	font-size: min(calc(15 / var(--vw-min) * 100vw), 15px);
	line-height: 1.8;
	letter-spacing: 0.02em;
	padding-bottom: 1.6em;
	position: relative;
	text-shadow: 0px 0px 6px rgba(255, 255, 255, 1), 0px 0px 6px rgba(255, 255, 255, 1), 0px 0px 6px rgba(255, 255, 255, 1), 0px 0px 6px rgba(255, 255, 255, 1), 0px 0px 6px rgba(255, 255, 255, 1), 0px 0px 6px rgba(255, 255, 255, 1), 0px 0px 6px rgba(255, 255, 255, 1), 0px 0px 6px rgba(255, 255, 255, 1);
}
@media screen and (max-width:768px){
	.charaLists__prf > dt {
		font-size: calc(22 / var(--vw-min) * 100vw);
	}
	.charaLists__prf > dd {
		font-size: calc(24 / var(--vw-min) * 100vw);
		text-shadow: none;
	}
}

/* color */
.charaLists__color {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
.charaLists__color:before,
.charaLists__color:after {
	content: "";
	background-color: var(--color-blue);
	width: min(calc(200 / var(--vw-min) * 100vw), calc(200px * 1.5));
	height: min(calc(500 / var(--vw-min) * 100vw), calc(500px * 1.5));
	position: absolute;
	top: 0;
	z-index: 1;
}
.charaLists__color:before { left: 0; }
.charaLists__color:after { right: 0; }
.charaLists__color.is-chara1:before,.charaLists__color.is-chara1:after { background-color: var(--color-riliu);}
.charaLists__color.is-chara2:before,.charaLists__color.is-chara2:after { background-color: var(--color-jowy);}
.charaLists__color.is-chara3:before,.charaLists__color.is-chara3:after { background-color: var(--color-nanami);}
.charaLists__color.is-chara4:before,.charaLists__color.is-chara4:after { background-color: var(--color-viktor);}
.charaLists__color.is-chara5:before,.charaLists__color.is-chara5:after { background-color: var(--color-flik);}
.charaLists__item.swiper-slide-active .charaLists__color {
	opacity: 0;
}
@media screen and (max-width:768px){
	.charaLists__color:before { left: -2vw; }
	.charaLists__color:after { right: -2vw; }
}

/* navArea */
.charaLists__navArea {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 83%;
	height: min(calc(500 / var(--vw-min) * 100vw), calc(500px * 1.5));
	max-width: 1530px;
	margin: auto;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 2;
	pointer-events: none;
}
.charaLists__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--color-blue);
	border-radius: 50%;
	width: min(calc(50 / var(--vw-min) * 100vw), 50px);
	height: min(calc(50 / var(--vw-min) * 100vw), 50px);
	pointer-events: auto;
}
.charaLists__nav:before {
	content: "";
	display: block;
	background-color: var(--color-blue);
	-webkit-mask: url(../../../assets/img/common/icon/arrow_l.svg) no-repeat center / contain;
	mask: url(../../../assets/img/common/icon/arrow_l.svg) no-repeat center / contain;
	width: min(calc(12 / var(--vw-min) * 100vw), 12px);
	height: min(calc(23 / var(--vw-min) * 100vw), 23px);
}
.charaLists__nav.is-next:before {
	-webkit-mask-image: url(../../../assets/img/common/icon/arrow_r.svg);
	mask-image: url(../../../assets/img/common/icon/arrow_r.svg);
}
@media screen and (hover: hover) and (pointer: fine) {
	.charaLists__nav {
		transition: background-color .5s ease;
	}
	.charaLists__nav:hover {
		background-color: var(--color-blue);
	}
	.charaLists__nav:before {
		transition: transform .3s ease, background-color .3s ease;
	}
	.charaLists__nav:hover:before {
		background-color: #fff;
		transform: translateX(-30%);
	}
	.charaLists__nav.is-next:hover:before {
		transform: translateX(30%);
	}
}
@media screen and (max-width:768px){
	.charaLists__navArea {
		width: calc(150 / var(--vw-min) * 100vw);
		height: calc(64 / var(--vw-min) * 100vw);
		max-width: 100%;
		top: calc(566 / var(--vw-min) * 100vw);
		left: auto;
		bottom: auto;
		right: calc(40 / var(--vw-min) * 100vw);
	}
	.charaLists__nav {
		width: calc(64 / var(--vw-min) * 100vw);
		height: calc(64 / var(--vw-min) * 100vw);
	}
	.charaLists__nav:before {
		width: calc(16 / var(--vw-min) * 100vw);
		height: calc(30 / var(--vw-min) * 100vw);
	}
}

/*-----------------------------------------------
 * loading, firstAnimation, scrollAnimation
-------------------------------------------------*/
/* loading */
.loading {
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 999;
}
.loading__logo {
	background: url(../../../assets/img/common/logo/main_logo.png) no-repeat center / 100%;
	width: min(calc(440 / var(--vw-min) * 100vw), calc(440px * 1.6));
	height: min(calc(169 / var(--vw-min) * 100vw), calc(169px * 1.6));
	margin: auto;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
@media screen and (max-width:768px){
	.loading__logo {
		width: calc(604 / var(--vw-min) * 100vw);
		height: calc(232 / var(--vw-min) * 100vw);
	}
}

/* firstAnimation */
.firstView__logo,
.firstView__catch {
	transform: scale(1.3);
	opacity: 0;
	-webkit-filter: blur(15px);
	-moz-filter: blur(15px);
	filter: blur(15px);
	transition: transform 1.5s var(--easing-outquart),
				opacity .5s var(--easing-outquart),
				filter 1.5s var(--easing-outquart);
}
.firstView__catch.is-ani {
	transition-delay: 0.3s;
}
.firstView__logo.is-ani,
.firstView__catch.is-ani {
	transform: scale(1);
	opacity: 1;
	-webkit-filter: blur(0);
	-moz-filter: blur(0);
	filter: blur(0);
}
.menuArea,
.firstView__x {
	opacity: 0;
	transition: opacity .5s ease;
}
.menuArea.is-ani,
.firstView__x.is-ani {
	transition-delay: 1s;
	opacity: 1;
}
.firstView__visual img {
	transform: scale(1.2);
	filter:brightness(250%);
	transition: all 3.5s var(--easing-outquart);
}
.firstView__visual.is-ani img {
	transform: scale(1);
	filter:brightness(100%);
}

/* scrollAnimation */
.introduction__sec1__text,
.introduction__sec2__text,
.scLists__item,
.charaThumbLists,
.charaListsArea {
	opacity: 0;
	-webkit-filter: blur(15px);
	-moz-filter: blur(15px);
	filter: blur(15px);
	transition: opacity .5s var(--easing-outquart),
				filter 1.5s var(--easing-outquart);
}
.introduction__sec1__text.is-ani,
.introduction__sec2__text.is-ani,
.scLists__item.is-ani,
.charaThumbLists.is-ani,
.charaListsArea.is-ani {
	opacity: 1;
	-webkit-filter: blur(0);
	-moz-filter: blur(0);
	filter: blur(0);
}