@charset "utf-8";
/*-----------------------------------------------
 * CHARACTER
-------------------------------------------------*/
.subSecCont {
    padding: 0;
}
/** TITLE **/
.charaHead {
    padding-bottom: min(calc(60 / var(--vw-min) * 100vw), 60px);
    border-bottom: 1px solid var(--color-grey5);
}
@media screen and (max-width:768px){
    .charaHead {
        padding-bottom: 0;
        border-bottom: 0;
    }
}
.cont-tit {
    display: flex;
    align-items: flex-end;
    position: relative;
    z-index: 1;
    padding-left: min(calc(56 / var(--vw-min) * 100vw), 56px);
}
@media screen and (max-width:768px) {
    .cont-tit {
        display: flex;
        align-items: center;
        flex-direction: column;
        padding-bottom: calc(100 / var(--vw-min) * 100vw);
        border-bottom: unset;
        padding-left: 0;
    }
}
.newsDetail .cont-tit {
    border-bottom: unset;
}
.cont-tit .cont-tit-en{
    width: min(calc(432 / var(--vw-min) * 100vw),432px);
    height: min(calc(68 / var(--vw-min) * 100vw), 68px);
    display: block;
    position: relative;
    z-index: 1;
    background: url(../img/common/tit/tit_character.png)no-repeat center / contain;
}
@media screen and (max-width:768px){
    .cont-tit .cont-tit-en{
        width: calc(517 / var(--vw-min) * 100vw);
        height: calc(82 / var(--vw-min) * 100vw);
        margin-bottom: calc(18 / var(--vw-min) * 100vw);
    }
}
.cont-tit-ja {
    width: min(calc(143 / var(--vw-min) * 100vw), 143px);
    height: min(calc(34 / var(--vw-min) * 100vw), 34px);
    position: absolute;
    left: min(calc(490 / var(--vw-min) * 100vw),490px);
    background: url(../img/common/tit/tit_character-ja.svg)no-repeat center/contain;
}
@media screen and (max-width:768px){
    .cont-tit-ja {
        width: calc(209 / var(--vw-min) * 100vw);
        height: calc(50 / var(--vw-min) * 100vw);
        position: relative;
        left: unset;
    }
}
.chara__contTabWrap {
	width: calc(100% - min(calc(243 / var(--vw-min) * 100vw), 243px));
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 min(calc(67 / var(--vw-min) * 100vw), 67px);
    margin-top: min(calc(48 / var(--vw-min) * 100vw), 48px);
}	
@media screen and (max-width:768px){
	.chara__contTabWrap  {
		width: 100%;
		padding: 0 calc(24 / var(--vw-min) * 100vw);
	}
}
.chara__contTabLists {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}
.chara__contTabItem {
	width: calc(100% / 3);
	padding: 0 calc(9 / var(--vw-min) * 100vw);
}
@media screen and (min-width:769px){
	.chara__contTabItem:nth-child(n+4) {
		margin-top: min(calc(18 / var(--vw-min) * 100vw),18px);
	}	
}
@media screen and (max-width:768px){
	.chara__contTabItem {
		width: calc(100% / 2);
		padding: 0 calc(7 / var(--vw-min) * 100vw);
	}
	.chara__contTabItem:nth-child(n+3) {
		margin-top: calc(14 / var(--vw-min) * 100vw);
	}
}
.chara__contTabA {
	width: 100%;
	border-radius: calc(16 / var(--vw-min) * 100vw);
	display: block;
	position: relative;
	background-color: #4A31CC;
	border: calc(2 / var(--vw-min) * 100vw) solid #fff;
	transition: .3s ease;
}
@media screen and (max-width:768px){
	.chara__contTabA {
		border-radius: calc(20 / var(--vw-min) * 100vw);
		border: calc(2 / var(--vw-min) * 100vw) solid #fff; 
	}
}
.chara__contTabIn {
	border: calc(3 / var(--vw-min) * 100vw) solid #000;
	border-radius: calc(14 / var(--vw-min) * 100vw);
	overflow: hidden;
}
@media screen and (max-width:768px){
	.chara__contTabIn {
		border: calc(3 / var(--vw-min) * 100vw) solid #000;
		border-radius: calc(18 / var(--vw-min) * 100vw);
	}
}
.chara__tab-img {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
	margin: auto;
}
.chara__tab-img::before {
	content: "";
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
	mix-blend-mode: overlay;
	background: url(../img/common/bg/bg_charaTab.jpg)no-repeat center/cover;
	transition: .3s ease;
}
.chara__tab-img::after {
	content: "";
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
	opacity: 0;
	background: url(../img/common/bg/bg_charaTab.jpg)no-repeat center/cover;
	transition: .3s ease;
}
.chara__tab-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	-webkit-filter:grayscale(0);
    filter:grayscale(0);
	position: relative;
	z-index: 1;
	transition: .3s ease;
	pointer-events: none;
}
/** SWIPER **/
.charaSwiperWrap {
	padding-top: min(calc(56 / var(--vw-min) * 100vw),56px);
	display: none;
	opacity: 0;
	position: relative;
	animation: fadeIn .5s forwards;
}
.charaSwiperWrap.is-active {
	display: block;
}	
/*フェードインアニメ*/
@keyframes fadeIn{
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
}
@media screen and (max-width:768px){
	.charaSwiperWrap {
		width: 100%;
		margin-left: 0;
		padding-top: calc(60 / var(--vw-min) * 100vw);
	}
}
/** CONT SWIPER **/
.charaSwiper {
	position: relative;
}
.charaSwiperItem {
	width: 100%;
	position: relative;
}
.charaSwiperItemIn {
	width: calc(100% - 10%);
	position: relative;
	padding:min(calc(72 / var(--vw-min) * 100vw),72px) 0 0 min(calc(95 / var(--vw-min) * 100vw),95px);
}
@media screen and (max-width:768px){ 
	.charaSwiperItemIn {
		width: 100%;
		padding: calc(78 / var(--vw-min) * 100vw) 0 0 0;
	}
}
/** THUMB **/
.chara__thumbWrapIn {
	position: relative;
	z-index: 2;
}
@media screen and (min-width:1770px){
	.chara__thumbWrapIn {
		margin: 0 auto;
	}
}
.chara__thumbWrap.swiper {
	width:min(calc(720 / var(--vw-min) * 100vw),720px);
	margin: 0 auto min(calc(72 / var(--vw-min) * 100vw),72px);
}
@media screen and (max-width:768px){
	.chara__thumbWrap.swiper {
		width: calc(575 / var(--vw-min) * 100vw);
		margin: 0 auto;
		padding: 0 0 calc(10 / var(--vw-min) * 100vw);
	}
}
.chara__thumbLists {
	display: flex;
	align-items: center;
}
@media screen and (max-width:768px){ 
	.chara__thumbLists {
		width: 100%;
		flex-wrap: nowrap;
		margin: 0 auto;
	}
}
.chara__thumbItem {
	width: min(calc(90 / var(--vw-min) * 100vw),90px);
	height: min(calc(90 / var(--vw-min) * 100vw),90px);
	position: relative;
	opacity: 1;
	background: unset;
}
@media screen and (max-width:768px){
	.chara__thumbItem {
		width: calc(102 / var(--vw-min) * 100vw);
        height: calc(102 / var(--vw-min) * 100vw);
	}
}
@media screen and (min-width:769px){
	.chara__thumbItem {
		margin: 0 min(calc(6 / var(--vw-min) * 100vw),6px) min(calc(12 / var(--vw-min) * 100vw),12px);
	}
}
.deco_charaSelect {
	width: min(calc(47 / var(--vw-min) * 100vw),47px);
	height: min(calc(33 / var(--vw-min) * 100vw),33px);
	position: absolute;
	bottom: max(calc(-5 / var(--vw-min) * 100vw),-5px);
	right: 0;
	opacity: 0;
	background: url(../img/common/deco/deco_select.svg)no-repeat center /contain;
}
@media screen and (max-width:768px){
	.deco_charaSelect {
		width: calc(68 / var(--vw-min) * 100vw);
		height: calc(46 / var(--vw-min) * 100vw);
		right: calc(-10 / var(--vw-min) * 100vw);
		bottom: calc(-12 / var(--vw-min) * 100vw);
	}
}
.chara__thumbItem.swiper-slide-thumb-active .deco_charaSelect{
	opacity: 1;
}
.chara__thumbBg {
	width: min(calc(88 / var(--vw-min) * 100vw),88px);
	height: min(calc(88 / var(--vw-min) * 100vw),88px);
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	z-index: -1;
	border-radius: 50%;
	background-color: var(--color-red);
}
@media screen and (max-width:768px){
	.chara__thumbBg {
		width: calc(95 / var(--vw-min) * 100vw);
        height: calc(95 / var(--vw-min) * 100vw);
	}
}
.chara__thumbBg::before {
	content: "";
	width: min(calc(88 / var(--vw-min) * 100vw),88px);
	height: min(calc(88 / var(--vw-min) * 100vw),88px);
	position: absolute;
	top: min(calc(4 / var(--vw-min) * 100vw),4px);
	left: min(calc(4 / var(--vw-min) * 100vw),4px);
	z-index: -1;
	border-radius: 50%;
	background-color: var(--color-red);
}
@media screen and (max-width:768px){
	.chara__thumbBg::before  {
		width: calc(92 / var(--vw-min) * 100vw);
        height: calc(92 / var(--vw-min) * 100vw);
        top: calc(6 / var(--vw-min) * 100vw);
        left: calc(7 / var(--vw-min) * 100vw);
	}
}
.chara__thumb {
	width: min(calc(84 / var(--vw-min) * 100vw),84px);
	height: min(calc(84 / var(--vw-min) * 100vw),84px);
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	background-color: #fff;
	border-radius: 50%;
	border: min(calc(2 / var(--vw-min) * 100vw),2px) solid #fff;
	overflow: hidden;
	transition: .3s ease;
}
@media screen and (max-width:768px){
	.chara__thumb {
		width: calc(90 / var(--vw-min) * 100vw);
        height: calc(90 / var(--vw-min) * 100vw);
        border: calc(2 / var(--vw-min) * 100vw) solid #fff;
	}
}
.swiper-slide-thumb-active.chara__thumbItem .chara__thumb{
	background-color: #000;
}
.chara__thumb img {
	width: 100%;
	pointer-events: none;
	transition: .3s ease;
}
/** CHANGE BTN **/
.charaChangeBtnWrap {
	width: min(calc(114 / var(--vw-min) * 100vw),114px);
	height: min(calc(120 / var(--vw-min) * 100vw),120px);
	position: absolute;
	top: 0;
	right: 0;
}
@media screen and (max-width:768px){
	.charaChangeBtnWrap {
		width: calc(142 / var(--vw-min) * 100vw);
		height: calc(150 / var(--vw-min) * 100vw);
		top: calc(30 / var(--vw-min) * 100vw);
		right: calc(48 / var(--vw-min) * 100vw);
	}
}
.charaChangeBtn {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 0;
	transition: transform .4s ease;
}
.charaChangeBtn:before {
	content: "";
	width: 100%;
	height: 100%;
	margin: auto;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	-webkit-mask: url(../img/common/deco/deco_charaChangeTxt.svg) no-repeat center / contain;
	mask: url(../img/common/deco/deco_charaChangeTxt.svg) no-repeat center / contain;
	background-color: #fff;
	animation: rotate 18s linear infinite;
}
.charaChangeBtn__inner {
	width: min(calc(80 / var(--vw-min) * 100vw),80px);
	height: min(calc(80 / var(--vw-min) * 100vw),80px);
	position: relative;
	background-color: #fff;
	border-radius: 50%;
	overflow: hidden;
	transition: .3s ease;
}
@media screen and (max-width:768px){
	.charaChangeBtn__inner {
		width: calc(100 / var(--vw-min) * 100vw);
		height: calc(100 / var(--vw-min) * 100vw);
	}
}
.charaChangeBtn__inner img {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	object-fit: cover;
	opacity: 0;
	pointer-events: none;
	transition: .3s ease;
}
@keyframes rotate {
	from {
		transform:rotate(0deg);
	}
	to {
		transform:rotate(360deg);
	}
}
/** IMG MAIN **/
.chara__mainImgWrap {
	width: 58.6666%;/* 528 */
	position: absolute;
	right: max(calc(-50 / var(--vw-min) * 100vw),-50px);
	top: min(calc(110 / var(--vw-min) * 100vw),110px);
	margin: 0 min(calc(44 / var(--vw-min) * 100vw),44px) 0 0;
	pointer-events: none;
}
@media screen and (max-width:768px){  
	.chara__mainImgWrap {
		width: 100%;
		position: relative;
		top: unset;
		right: unset;
		margin: 0;
		padding: 0 calc(48 / var(--vw-min) * 100vw);
	}
}
.chara__mainImgLists {
	position: relative;
	width: 100%;
	padding-top: 102%;
}
.chara__mainImg {
	position: absolute;
	top: 0;
	opacity: 0; 
	transition: .3s ease;
}
.chara__mainImg.--active {
	opacity: 1;
}
.chara__mainImg img {
	width: 100%;
	pointer-events: none;
}
/** IMG FACE **/
@media screen and (max-width:768px){
	.chara__faceImgWrap {
		width: 50%;
	}
}
.chara__faceImgLists {
	position: relative;
	width: 100%;
	padding-top: 100%;
}
.chara__faceImg {
	position: absolute;
	top: 0; 
	opacity: 0;
	transition: .3s ease;
}
.chara__faceImg.--active {
	opacity: 1;
}
.chara__faceImg img {
	width: 100%;
	pointer-events: none;
}
/** TXT **/
.chara__txtWrap {
	width: 34.444%;/* 310 */
	position: relative;
}
@media screen and (max-width:768px){
	.chara__txtWrap {
		width: 100%;
		display: flex;
		padding: 0 calc(48 / var(--vw-min) * 100vw);
		margin-top: calc(64 / var(--vw-min) * 100vw);
	}
}
.chara__txt {
	font-size: min(calc(15 / var(--vw-min) * 100vw),15px);
	color: #fff;
	letter-spacing: 0.25em;
	padding: min(calc(36 / var(--vw-min) * 100vw),36px) 0 min(calc(30 / var(--vw-min) * 100vw),30px);
}
@media screen and (max-width:768px){
	.chara__txt {
		width: 50%;
		font-size: calc(24 / var(--vw-min) * 100vw);
		padding: 0;
	}
}
/** NAME **/
.chara__nameWrap {
	pointer-events: none;
}
.chara__name{
	font-size: min(calc(50 / var(--vw-min) * 100vw),50px);
}
.chara__name-en {
	font-size: min(calc(150 / var(--vw-min) * 100vw),150px);
	color: rgba(255, 255, 255, .25);
	font-weight: 700;
	line-height: .8;
	position: absolute;
	top: 0;
	left: min(calc(25 / var(--vw-min) * 100vw),25px);
	z-index: -1;
}
@media screen and (max-width:768px){
	.chara__name{
		font-size: calc(52 / var(--vw-min) * 100vw);
	}
	.chara__name-en {
		font-size: calc(128 / var(--vw-min) * 100vw);
		padding-left: calc(24 / var(--vw-min) * 100vw);
		left: 0;
	}
	.chara__name {
		font-size: calc(52 / var(--vw-min) * 100vw);
	}
}
.chara__heroName {
	font-size: min(calc(24 / var(--vw-min) * 100vw),24px);
	line-height: 1;
	color: #fff;
	font-weight: 700;
	/*margin-bottom: min(calc(26 / var(--vw-min) * 100vw),26px);*/
}
@media screen and (max-width:768px){
	.chara__heroName {
		font-size: calc(28 / var(--vw-min) * 100vw);
		padding-left: calc(48 / var(--vw-min) * 100vw);
		/*margin-bottom: calc(34 / var(--vw-min) * 100vw);*/
	}
	.chara__name {
		padding-left: calc(48 / var(--vw-min) * 100vw);
	}
}
.chara__heroName span {
	display: inline-block;
	background-color: #000;
}
.rt-larger {
	font-size: min(calc(13 / var(--vw-min) * 100vw),13px);
	color: #fff;
	margin-bottom: min(calc(7 / var(--vw-min) * 100vw),7px);
}
@media screen and (max-width:768px){
	.rt-larger  {
		font-size: calc(18 / var(--vw-min) * 100vw);
		margin-bottom: calc(8 / var(--vw-min) * 100vw);
	}
	_::-webkit-full-page-media, _:future, :root .rt-larger {
		margin-bottom: 0;
	}
}
.ruby_name {
	font-weight: 700;
	color: var(--color-red);
	-webkit-filter: drop-shadow(0px 0px 8px #000) drop-shadow(0px 0px 8px #000);
	filter: drop-shadow(0px 0px 8px #000) drop-shadow(0px 0px 8px #000);
}
@media screen and (max-width:768px){
	.ruby_name {
		-webkit-filter: drop-shadow(0px 0px 7px #000) drop-shadow(0px 0px 7px #000) drop-shadow(0px 0px 7px #000);
		filter: drop-shadow(0px 0px 7px #000) drop-shadow(0px 0px 7px #000) drop-shadow(0px 0px 7px #000);
	}
	_::-webkit-full-page-media, _:future, :root .ruby_name {
		-webkit-filter: drop-shadow(0px 0px 7px #000) drop-shadow(0px 0px 7px #000) drop-shadow(0px 0px 7px #000) drop-shadow(0px 0px 7px #000);
		filter: drop-shadow(0px 0px 7px #000) drop-shadow(0px 0px 7px #000) drop-shadow(0px 0px 7px #000) drop-shadow(0px 0px 7px #000);
	}
}
@media screen and (min-width: 769px) {
	.ruby_name_l{
		letter-spacing: -1.4px;
	}
}
/** DETAIL **/
.chara__detailWrap {
	color: #fff;
	display: flex;
	align-items: flex-end;
}
@media screen and (max-width:768px){
	.chara__detailWrap {
		padding-left: calc(48 / var(--vw-min) * 100vw);
	}
}
.chara__detail-tit {
	font-size: min(calc(18 / var(--vw-min) * 100vw),18px);
	padding-right: min(calc(13 / var(--vw-min) * 100vw),13px);
}
@media screen and (max-width:768px){
	.chara__detail-tit {
		font-size: calc(24 / var(--vw-min) * 100vw);
		padding-right: calc(16 / var(--vw-min) * 100vw);
	}
}
.chara__detail-name {
	font-size: min(calc(20 / var(--vw-min) * 100vw),20px);
	align-items: flex-end;
}
@media screen and (max-width:768px){
	.chara__detail-name {
		font-size: calc(26 / var(--vw-min) * 100vw);
	}
}
.chara__pv {
	margin-top: min(calc(14 / var(--vw-min) * 100vw),14px);
	position: relative;
	z-index: 100;
}
@media screen and (max-width:768px){
	.chara__pv {
		margin-top: calc(14 / var(--vw-min) * 100vw);
		padding-left: calc(48 / var(--vw-min)* 100vw);
	}
}
.chara__pvLinkA {
	font-size: min(calc(12 / var(--vw-min) * 100vw),12px);
	color: #fff;
	border-radius: min(calc(20 / var(--vw-min) * 100vw),20px);
	border: 1px solid #fff;
	display: inline-block;
	padding: min(calc(3 / var(--vw-min) * 100vw),3px) min(calc(15 / var(--vw-min) * 100vw),15px);
	text-decoration: none;
	-webkit-filter: drop-shadow(0px 0 min(calc(4 / var(--vw-min)* 100vw)) var(--color-red)) drop-shadow(0px 0 min(calc(4 / var(--vw-min)* 100vw)) var(--color-red));
	filter: drop-shadow(0px 0 min(calc(4 / var(--vw-min)* 100vw)) var(--color-red)) drop-shadow(0px 0 min(calc(4 / var(--vw-min)* 100vw)) var(--color-red));
	transition: .3s ease;
}
.charaSwiperItem.swiper-slide-active .chara__pvLinkA {
	pointer-events: auto;
}
@media screen and (max-width:768px){
	.chara__pvLinkA {
		font-size: calc(24 / var(--vw-min) * 100vw);
		border-radius: calc(25 / var(--vw-min) * 100vw);
		padding: calc(3 / var(--vw-min) * 100vw) calc(27 / var(--vw-min) * 100vw);
	}
}
.chara__pvDeco {
	width: min(calc(10 / var(--vw-min)* 100vw), 10px);
    height: min(calc(8 / var(--vw-min)* 100vw), 8px);
	display: inline-block;
    background: url(../img/common/deco/deco_movie-play.svg) no-repeat center / contain;
	margin: 0 min(calc(8 / var(--vw-min) * 100vw),8px) min(calc(1 / var(--vw-min) * 100vw),1px) 0;
}
@media screen and (max-width:768px){
	.chara__pvDeco {
		width: calc(17 / var(--vw-min) * 100vw);
		height: calc(15 / var(--vw-min) * 100vw);
		margin: 0 calc( 10/ var(--vw-min) * 100vw) calc(2 / var(--vw-min) * 100vw) 0;
	}
}
/** BG **/
.chara__bg {
	width: 100%;
	padding-top: 54.6255%;/* 620 */
	position: absolute;
	top: calc(80 / var(--vw-min) * 100vw);
	z-index: -2;
	overflow: hidden;
	pointer-events: none;
}
@media screen and (max-width:768px){
	.chara__bg {
		padding-top: 160%;/* 1200 */
	}
}
/** SWIPER ARROW **/
.charaSwiper__arrowWrap {
	width: 97%;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 2;
	margin: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	pointer-events: none;
}
@media screen and (max-width:768px){
	.charaSwiper__arrowWrap {
		width: 100%;
	}
}
@media screen and (min-width:769px){
	.chara__thumbWrapIn .charaSwiper__arrowWrap {
		width: min(calc(850 / var(--vw-min) * 100vw),850px);
	}
}
.charaSwiper__arrow {
	width: min(calc(28 / var(--vw-min) * 100vw), 28px);
	height: min(calc(43 / var(--vw-min) * 100vw), 43px);
	position: absolute;
	background: url(../img/common/deco/deco_arrow.svg)no-repeat center/contain;
	pointer-events: auto;
	transition: .3s ease;
}

@media screen and (max-width:768px){
	.charaSwiper__arrow {
		width: calc(40 / var(--vw-min) * 100vw);
		height: calc(64 / var(--vw-min) * 100vw);
	}
}
.js-charaSwiper__prev.charaSwiper__arrow,
.js-charaThumbSwiper__prev.charaSwiper__arrow {
	left: 0;
}
.js-charaSwiper__next.charaSwiper__arrow,
.js-charaThumbSwiper__next.charaSwiper__arrow {
	right: 0;
	transform: rotate(180deg);
}
@media screen and (max-width:768px){
	.js-charaSwiper__prev.charaSwiper__arrow,
.js-charaThumbSwiper__prev.charaSwiper__arrow {
		left: calc(24 / var(--vw-min) * 100vw);
	}
	.js-charaSwiper__next.charaSwiper__arrow,
.js-charaThumbSwiper__next.charaSwiper__arrow {
		right: calc(24 / var(--vw-min) * 100vw);

	}
}
.charaSwiper__arrow.swiper-button-disabled {
	opacity: 0;
}
.chara__thumbWrapIn .charaSwiper__arrow.swiper-button-disabled {
	opacity: 1;
}
/** THUMB ARROW **/
@media screen and (max-width:768px){
	.chara__thumbWrapIn {
		position: relative;
	}
	.charaThumbSwiper__arrowWrap {
		width: calc(654 / var(--vw-min) * 100vw);
		height: calc(112 / var(--vw-min) * 100vw);
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		z-index: 2;
		margin: auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		pointer-events: none;
	}
	.charaThumbSwiper__arrow {
		width: calc(40 / var(--vw-min) * 100vw);
		height: calc(64 / var(--vw-min) * 100vw);
		position: absolute;
		background: url(../img/common/deco/deco_arrow.svg)no-repeat center/contain;
		pointer-events: auto;
		transition: .3s ease;
	}
	.js-charaThumbSwiper__prev.charaThumbSwiper__arrow {
		left: calc(-24 / var(--vw-min) * 100vw);
	}
	.js-charaThumbSwiper__next.charaThumbSwiper__arrow {
		right: calc(-24 / var(--vw-min) * 100vw);
		transform: rotate(180deg);
	}
}
.chara__bg::before {
	content: "";
	width: 100%;
	height: 66.8065%;
	display: block;
	position: absolute;
	top: calc(50 / var(--vw-min) * 100vw);
	right: calc(-60 / var(--vw-min) * 100vw);
	opacity: 0;
	transform: rotate(-5deg) translate3d(0, 0, 0);
	background-repeat: no-repeat;
	background-size: 0% 100%;
	background-position: left bottom;
	transition: opacity .3s ease-out, background-size .6s;
}
/**
* BG
**/
#character .chara__haimawari .chara__bg::before {
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 21%, rgba(49, 41, 166, 1) 84%, rgba(59, 49, 200, .2));
}
#character .chara__popstep .chara__bg::before {
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 21%, rgba(250, 0, 138, 1) 84%, rgba(250, 0, 138, .2));
}
#character .chara__knuckle .chara__bg::before {
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 21%, rgba(74, 106, 29, 1) 84%, rgba(74, 106, 29, .2));
}
#character .chara__allmight .chara__bg::before {
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 21%, rgba(242, 218, 67, 1) 84%, rgba(242, 218, 67, .2));
}
#character .chara__aizawa .chara__bg::before {
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 21%, rgba(54, 72, 57, 1) 84%, rgba(54, 72, 57, .2));
}
#character .chara__mic .chara__bg::before {
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 21%, rgba(228, 149, 72, 1) 84%, rgba(228, 149, 72, .2));
}
#character .chara__midnight .chara__bg::before {
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 21%, rgba(107, 86, 167, 1) 84%, rgba(107, 86, 167, .2));
}
#character .chara__iida .chara__bg::before {
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 21%, rgba(58, 68, 122, 1) 84%, rgba(58, 68, 122, .2));
}
#character .chara__kugizaki .chara__bg::before {
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 21%, rgba(100, 153, 159, 1) 84%, rgba(58, 68, 122, .2));
}
#character .chara__tsukauchi .chara__bg::before {
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 21%, rgba(94, 88, 83, 1) 84%, rgba(94, 88, 83, .2));
}
#character .chara__hachisuka .chara__bg::before {
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 21%, rgba(232, 190, 81, 1) 84%, rgba(232, 190, 81, 1));
}
#character .chara__tochi .chara__bg::before {
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 21%, rgba(170, 128, 115, 1) 84%, rgba(170, 128, 115, 1));
}
#character .chara__tokage .chara__bg::before {
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 21%, rgba(96, 140, 132, 1) 84%, rgba(96, 140, 132, 1));
}
#character .chara__samazu .chara__bg::before {
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 21%, rgba(63, 72, 99, 1) 84%, rgba(63, 72, 99, 1));
}
#character .chara__namimaru .chara__bg::before {
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 21%, rgba(121, 103, 102, 1) 84%, rgba(121, 103, 102, 1));
}
#character .chara__iwako .chara__bg::before {
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 21%, rgba(158, 151, 171, 1) 84%, rgba(158, 151, 171, 1));
}
#character .chara__kugutsu .chara__bg::before {
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 21%, rgba(77, 68, 85, 1) 84%, rgba(77, 68, 85, 1));
}
#character .chara__tamagawa .chara__bg::before {
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 21%, rgba(240, 217, 134, 1) 84%, rgba(240, 217, 134, 1));
}
#character .chara__unagisawa .chara__bg::before {
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 21%, rgba(104, 81, 117, 1) 84%, rgba(104, 81, 117, 1));
}
#character .chara__tanuma .chara__bg::before {
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 21%, rgba(138, 139, 99, 1) 84%, rgba(138, 139, 99, 1));
}
#character .chara__brothers .chara__bg::before {
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 21%, rgba(205, 185, 108, 1) 84%, rgba(205, 185, 108, 1));
}
#character .chara__yakumaru .chara__bg::before {
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 21%, rgba(159, 114, 136, 1) 84%, rgba(159, 114, 136, 1));
}
#character .chara__yobayakawa .chara__bg::before {
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 21%, rgba(211, 245, 255, 1) 84%, rgba(211, 245, 255, 1));
}
#character .chara__stendhal .chara__bg::before {
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 21%, rgba(93, 6, 17, 1) 84%, rgba(93, 6, 17, 1));
}
#character .chara__makoto .chara__bg::before {
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 21%, rgba(107, 187, 176, 1) 84%, rgba(107, 187, 176, 1));
}
#character .chara__emperor .chara__bg::before {
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 21%, rgba(185, 153, 68, 1) 84%, rgba(185, 153, 68, 1));
}
#character .chara__captaincelebrity .chara__bg::before {
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 21%, rgba(240, 209, 102, 1) 84%, rgba(240, 209, 102, 1));
}
#character .chara__shoko .chara__bg::before {
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 21%, rgba(100, 90, 69, 1) 84%, rgba(100, 90, 69, 1));
}
#character .chara__feathers .chara__bg::before {
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 21%, rgba(141, 222, 220, 1) 84%, rgba(141, 222, 220, 1));
}
#character .chara__madhatter .chara__bg::before {
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 21%, rgba(64, 55, 72, 1) 84%, rgba(64, 55, 72, 1));
}
#character .chara__dancesquad .chara__bg::before {
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 21%, rgba(119, 176, 134, 1) 84%, rgba(119, 176, 134, 1));
}
#character .chara__thescarredman .chara__bg::before {
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 21%, rgba(255, 255, 121, 1) 84%, rgba(255, 255, 121, 1));
}
#character .chara__fatgum .chara__bg::before {
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 21%, rgba(224, 160, 23, 1) 84%, rgba(224, 160, 23, 1));
}
#character .chara__monika .chara__bg::before {
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 21%, rgba(188, 83, 86, 1) 84%, rgba(188, 83, 86, 1));
}
#character .chara__ichiro .chara__bg::before {
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 21%, rgba(188, 95, 95, 1) 84%, rgba(188, 95, 95, 1));
}
#character .chara__jiro .chara__bg::before {
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 21%, rgba(235, 190, 107, 1) 84%, rgba(235, 190, 107, 1));
}
#character .chara__kamachi .chara__bg::before {
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 21%, rgba(162, 163, 89, 1) 84%, rgba(162, 163, 89, 1));
}
#character .chara__oclock .chara__bg::before {
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 21%, rgba(166, 64, 87, 1) 84%, rgba(166, 64, 87, 1));
}
@media screen and (max-width:768px){
	.chara__bg::before {
		width: 120%;
	}
	#character .chara__haimawari .chara__bg::before {
		background-image: linear-gradient(179deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 5%, rgba(49, 41, 166, .8) 60%, rgba(49, 41, 166, .2));    
	}
	#character .chara__popstep .chara__bg::before {
		background-image: linear-gradient(179deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 5%, rgba(250, 0, 138, .8) 60%, rgba(250, 0, 138, .2));
	}
	#character .chara__knuckle .chara__bg::before {
		background-image: linear-gradient(179deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 5%, rgba(74, 106, 29, .8) 60%, rgba(74, 106, 29, .2));
	}
	#character .chara__allmight .chara__bg::before {
		background-image: linear-gradient(179deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 5%, rgba(242, 218, 67, .8) 60%, rgba(242, 218, 67, .2));
	}
	#character .chara__aizawa .chara__bg::before {
		background-image: linear-gradient(179deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 5%, rgba(54, 72, 57, .8) 60%, rgba(54, 72, 57, .2));
	}
	#character .chara__mic .chara__bg::before {
		background-image: linear-gradient(179deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 5%, rgba(228, 149, 72, .8) 60%, rgba(228, 149, 72, .2));
	}
	#character .chara__midnight .chara__bg::before {
		background-image: linear-gradient(179deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 5%, rgba(107, 86, 167, .8) 60%, rgba(107, 86, 167, .2));
	}
	#character .chara__iida .chara__bg::before {
		background-image: linear-gradient(179deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 5%, rgba(58, 68, 122, .8) 60%, rgba(58, 68, 122, .2));
	}
	#character .chara__kugizaki .chara__bg::before {
		background-image: linear-gradient(179deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 5%, rgba(100, 153, 159, .8) 60%, rgba(100, 153, 159, .2));
	}
	#character .chara__tsukauchi .chara__bg::before {
		background-image: linear-gradient(179deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 5%, rgba(94, 88, 83, .8) 60%, rgba(94, 88, 83, .2));
	}
	#character .chara__hachisuka .chara__bg::before {
		background-image: linear-gradient(179deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 5%, rgba(232, 190, 81, .8) 60%, rgba(232, 190, 81, .8));
	}
	#character .chara__tochi .chara__bg::before {
		background-image: linear-gradient(179deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 5%, rgba(170, 128, 115, .8) 60%, rgba(170, 128, 115, .8));
	}
	#character .chara__tokage .chara__bg::before {
		background-image: linear-gradient(179deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 5%, rgba(96, 140, 132, .8) 60%, rgba(96, 140, 132, .8));
	}
	#character .chara__samazu .chara__bg::before {
		background-image: linear-gradient(179deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 5%, rgba(63, 72, 99, .8) 60%, rgba(63, 72, 99, .8));
	}
	#character .chara__namimaru .chara__bg::before {
		background-image: linear-gradient(179deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 5%, rgba(121, 103, 102, .8) 60%, rgba(121, 103, 102, .8));
	}
	#character .chara__iwako .chara__bg::before {
		background-image: linear-gradient(179deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 5%, rgba(158, 151, 171, .8) 60%, rgba(158, 151, 171, .8));
	}
	#character .chara__kugutsu .chara__bg::before {
		background-image: linear-gradient(179deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 5%, rgba(77, 68, 85, .8) 60%, rgba(77, 68, 85, .8));
	}
	#character .chara__tamagawa .chara__bg::before {
		background-image: linear-gradient(179deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 5%, rgba(240, 217, 134, .8) 60%, rgba(240, 217, 134, .8));
	}
	#character .chara__unagisawa .chara__bg::before {
		background-image: linear-gradient(179deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 5%, rgba(104, 81, 117, .8) 60%, rgba(104, 81, 117, .8));
	}
	#character .chara__tanuma .chara__bg::before {
		background-image: linear-gradient(179deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 5%, rgba(138, 139, 99, .8) 60%, rgba(138, 139, 99, .8));
	}
	#character .chara__brothers .chara__bg::before {
		background-image: linear-gradient(179deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 5%, rgba(205, 185, 108, .8) 60%, rgba(205, 185, 108, .8));
	}
	#character .chara__yakumaru .chara__bg::before {
		background-image: linear-gradient(179deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 5%, rgba(159, 114, 136, .8) 60%, rgba(159, 114, 136, .2));
	}
	#character .chara__yobayakawa .chara__bg::before {
		background-image: linear-gradient(179deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 5%, rgba(211, 245, 255, .1) 60%, rgba(211, 245, 255, .1));
	}
	#character .chara__stendhal .chara__bg::before {
		background-image: linear-gradient(179deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 5%, rgba(93, 6, 17, .1) 60%, rgba(93, 6, 17, .1));
	}
	#character .chara__makoto .chara__bg::before {
		background-image: linear-gradient(179deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 5%, rgba(107, 187, 176, .1) 60%, rgba(107, 187, 176, .1));
	}
	#character .chara__emperor .chara__bg::before {
		background-image: linear-gradient(179deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 5%, rgba(185, 153, 68, .1) 60%, rgba(185, 153, 68, .1));
	}
	#character .chara__captaincelebrity .chara__bg::before {
		background-image: linear-gradient(179deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 5%, rgba(240, 209, 102, .1) 60%, rgba(240, 209, 102, .1));
	}
	#character .chara__shoko .chara__bg::before {
		background-image: linear-gradient(179deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 5%, rgba(100, 90, 69, .1) 60%, rgba(100, 90, 69, .1));
	}
	#character .chara__feathers .chara__bg::before {
		background-image: linear-gradient(179deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 5%, rgba(141, 222, 220, .1) 60%, rgba(141, 222, 220, .1));
	}
	#character .chara__madhatter .chara__bg::before {
		background-image: linear-gradient(179deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 5%, rgba(64, 55, 72, .1) 60%, rgba(64, 55, 72, .1));
	}
	#character .chara__dancesquad .chara__bg::before {
		background-image: linear-gradient(179deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 5%, rgba(119, 176, 134, .1) 60%, rgba(119, 176, 134, .1));
	}
	#character .chara__thescarredman .chara__bg::before {
		background-image: linear-gradient(179deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 5%, rgba(255, 255, 121, .1) 60%, rgba(255, 255, 121, .1));
	}
	#character .chara__fatgum .chara__bg::before {
		background-image: linear-gradient(179deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 5%, rgba(224, 160, 23, .1) 60%, rgba(224, 160, 23, .1));
	}
	#character .chara__monika .chara__bg::before {
		background-image: linear-gradient(179deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 5%, rgba(188, 83, 86, .1) 60%, rgba(188, 83, 86, .1));
	}
	#character .chara__ichiro .chara__bg::before {
		background-image: linear-gradient(179deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 5%, rgba(188, 95, 95, .1) 60%, rgba(188, 95, 95, .1));
	}
	#character .chara__jiro .chara__bg::before {
		background-image: linear-gradient(179deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 5%, rgba(235, 190, 107, .1) 60%, rgba(235, 190, 107, .1));
	}
	#character .chara__kamachi .chara__bg::before {
		background-image: linear-gradient(179deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 5%, rgba(162, 163, 89, .1) 60%, rgba(162, 163, 89, .1));
	}
	#character .chara__oclock .chara__bg::before {
		background-image: linear-gradient(179deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 5%, rgba(166, 64, 87, .1) 60%, rgba(166, 64, 87, .1));
	}
}
/** ACTIVE **/
.charaChangeBtn[data-now="1"] .changeIcon1{
	opacity: 1;
}
.charaChangeBtn[data-now="2"] .changeIcon2{
	opacity: 1;
}
.chara__contTabA.is-active .chara__tab-img img {
	-webkit-filter:grayscale(100%);
	filter:grayscale(100%);
}
.chara__contTabA.is-active .chara__tab-img::before {
	opacity: 0;
}
.chara__contTabA.is-active .chara__tab-img::after {
	opacity: 1;
}
/**  CHARACTER アニメーション **/
.chara__mainImgLists {
	opacity: 0;
	transform: translateY(20%);
	transition: .5s ease-out;
}
.chara__mainImg {
	opacity: 0;
	transform: translateY(10%);
	transition: .3s ease-out;
}
.charaSwiperItem .chara__mainImg.--active,
.charaSwiperItem.swiper-slide-active .chara__mainImgLists{
	opacity: 1;
	transform: translateY(0%);
}
.chara__faceImgLists,
.chara__faceImg {
	opacity: 0;
	transform-origin: 50% 50%;
	transform: scale(0.8);
	transition: .45s cubic-bezier(0.25, 1, 0.5, 1);
}
.charaSwiperItem .chara__faceImg.--active,
.charaSwiperItem.swiper-slide-active .chara__faceImgLists {
	transition-delay: .25s;
	opacity: 1;
	transform: scale(1);
}
.chara__name-en,
.chara__name,
.chara__detailWrap,
.chara__txt,
.chara__pv {
	opacity: 0;
	transform: translateX(-10%);
	transition: .3s ease-out;
}
.charaSwiperItem.swiper-slide-active .chara__name-en {
	opacity: 1;
	transform: translateX(0%);
	transition-delay: .1s;
}
.charaSwiperItem.swiper-slide-active .chara__name {
	opacity: 1;
	transform: translateX(0%);
	transition-delay: .2s;
	line-height: 1.2;
}
.charaSwiperItem.swiper-slide-active .chara__detailWrap {
	opacity: 1;
	transform: translateX(0%);
	transition-delay: .3s;
}
.charaSwiperItem.swiper-slide-active .chara__pv{
	opacity: 1;
	transform: translateX(0%);
	transition-delay: .4s;
}
.charaSwiperItem.swiper-slide-active .chara__txt {
	opacity: 1;
	transform: translateX(0%);
	transition-delay: .5s;
}
.charaSwiperItem.swiper-slide-active .chara__bg::before {
	background-size: 100% 100%;
	opacity: .8;
	background-position: right bottom;
}
/** hover **/
@media (hover: hover) and (pointer: fine){
	.chara__contTabItem .chara__contTabA:hover .chara__tab-img img {
		-webkit-filter:grayscale(100%);
		filter:grayscale(100%);
	}
	.chara__contTabItem .chara__contTabA:hover {
		background-color: #4A31CC;
	}
	.chara__contTabItem .chara__contTabA:hover .chara__tab-img::before {
		opacity: 0;
	}
	.chara__contTabItem .chara__contTabA:hover .chara__tab-img::after {
		opacity: 1;
	}
	.chara__thumb:hover {
	background-color: #000;
	}
	.chara__thumb:hover img {
	transform: scale(1.1);
	}
	.charaChangeBtnWrap a:hover .charaChangeBtn__inner {
	background-color: #000;
	}
	.charaChangeBtnWrap a:hover .charaChangeBtn__inner img {
	transform: scale(1.1);
	}
}