@charset "utf-8";
.section_area.js-scrani .subContentsInner{
  opacity: 0;
  transition: opacity .6s ease 1s;
}
.section_area.js-scrani.is-ani .subContentsInner{
  opacity: 1;
}
/*-----------------------------------------------
 * CHARACTER
-------------------------------------------------*/
/* fullWrapIn */
#fullWrapIn{
	background-color: #FFF;
}
.section_area{
	padding-top:calc(130 / var(--vw-min) * 100vw);
}
.subContentsInner{
    width: 100%;
    margin: 0 auto;
    margin-top: calc(-70 / var(--vw-min) * 100vw);
}
@media screen and (max-width:767px){ 
	.subContentsInner{
		width: 100%;
		margin: 0 auto;
		margin-top: calc(-70 / var(--vw-min) * 100vw);
		padding:calc(48 / var(--vw-min) * 100vw) 0 0;
	}
}

/* bg */
.subBg{
	width: 100%;
	height: calc(130 / var(--vw-min) * 100vw);
	background: url(../img/news/bg_top.png) no-repeat center top;
	background-size: 100% auto;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
}
@media screen and (max-width:767px){ 
	.subBg{
		height: calc(160 / var(--vw-min) * 100vw);
		background: url(../img/news/bg_top_sp.png) no-repeat center top;
		background-size: 100% auto;
		min-height: unset;
	}
}
/* deco */
.subDecoWrap{
	width: min(calc(1100 / var(--vw-min) * 100vw),1100px);
	margin: 0 auto;
	position: relative;
}
@media screen and (max-width:767px){
	.subDecoWrap{
		width: 100%;
        z-index: 11;
	}
}
.subDeco{
	width: min(calc(820 / var(--vw-min) * 100vw),820px);
	position: absolute;
	right: 0;
	left: 0;
	margin: auto;
	display: flex;
	justify-content: space-between;
	top: max(calc(-150 / var(--vw-min) * 100vw),-150px);
	z-index: -1;
}
@media screen and (max-width:767px){ 
	.subDeco{
		width: calc(684 / var(--vw-min) * 100vw);
		position: absolute;
		left: calc(10 / var(--vw-min) * 100vw);
		right: unset;
		top: calc(-90 / var(--vw-min) * 100vw);
	}
}
.deco_cat1{
	width: min(calc(140 / var(--vw-min) * 100vw),140px);
	height: min(calc(160 / var(--vw-min) * 100vw),160px);
    /*animation: neko1 .4s ease-in-out 1;
    animation-fill-mode: forwards;*/
}
.deco_cat1 span{
	display: block;
	width: 100%;
	height: 100%;
	background: url(../img/common/deco/deco_cat4.png) no-repeat center center / contain;
    animation: poyoyon2 .6s  ease-in-out forwards;
    opacity: 0;
}
@media screen and (max-width:767px){ 
	.deco_cat1{
		width: calc(168 / var(--vw-min) * 100vw);
		height: calc(192 / var(--vw-min) * 100vw);
	}
}

/* ani */
@keyframes neko1 {
  0% {
	opacity: 0;
    transform:translate(max(calc(-50 / var(--vw-min) * 100vw),-50px),min(calc(195 / var(--vw-min) * 100vw),195px)) ;
  }  60% {
	opacity: 0;
  }
  100% {
	opacity: 1;
    transform:translate(0, 0) ;
  }
}
/* ani */
@keyframes poyoyon2 {
	0%  {
	  transform: scale(1.0, 1.0) translate(0, 0);
	}
	15% {
	  transform: scale(0.98, 0.9) translate(0, 5px);
	}
	30% {
	  transform: scale(1.02, 1.0) translate(0, 8px);
	}
	50% {transform: scale(0.98, 1.05) translate(0, -8px);
	}
	70% {
	  transform: scale(1.0, 0.9) translate(0, 5px);
	}
	100% {
	  transform: scale(1.0, 1.0) translate(0, 0);
	}
	0%, 100% {
	  opacity: 1;
	}
}
/* main */
.main__Contents{
	width: 100%;
	position: relative;
	z-index: 2;
	padding-bottom:0;
	padding-top: min(calc(170 / var(--vw-min) * 100vw),170px);
}
@media screen and (max-width:767px){ 
	.main__Contents{
		padding-top: calc(272 / var(--vw-min) * 100vw);
		min-width: unset;
	}
}
/* section ttl */
.section__ttl{
	display: flex;
    margin-bottom: min(calc(40 / var(--vw-min) * 100vw),40px);
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.section__ttl_jp {
	color: var(--color-brown);
	font-family: var(--font-ja-sub);
	font-weight: 500;
}
/* area__inner */
.sub .area__inner{
	position: relative;
    z-index: 10;
	padding-bottom:min(calc(144 / var(--vw-min) * 100vw),144px);
	width: 100%;
	margin: 0 auto;
	padding-top: min(calc(96 / var(--vw-min) * 100vw),96px);
	background-color: #FFFDEF;
}
@media screen and (max-width:767px){ 
	.sub .area__inner{
		padding: 0 0 calc(170 / var(--vw-min) * 100vw);
	}
} 

/* ttl */
.character__ttl{
	margin-bottom:min(calc(56 / var(--vw-min) * 100vw),56px);
	display: flex;
	flex-direction: column;
	align-items: center;
}
.character__ttl_en{
	display: block;
	background: url(../img/common/ttl/ttl_character_en.svg)no-repeat center center / contain;
	width: min(calc(460 / var(--vw-min) * 100vw),460px);
	height:min(calc(70 / var(--vw-min) * 100vw),70px);
	margin-bottom:min(calc(10 / var(--vw-min) * 100vw),10px);
}
.character__ttl_jp{
	display: block;
	background: url(../img/common/ttl/ttl_character_jp.svg)no-repeat center center / contain;
	width: min(calc(118 / var(--vw-min) * 100vw),118px);
	height:min(calc(28 / var(--vw-min) * 100vw),28px);
}
@media screen and (max-width:767px){ 
	.character__ttl{
		padding: 0 calc(30 / var(--vw-min) * 100vw);
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: calc(44 / var(--vw-min) * 100vw);;
	}
	.character__ttl_en{
		width: calc(578 / var(--vw-min) * 100vw);
		height: calc(88 / var(--vw-min) * 100vw);
		margin-bottom: calc(20 / var(--vw-min) * 100vw);
	}
	.character__ttl_jp{
		width: calc(176 / var(--vw-min) * 100vw);
		height: calc(42 / var(--vw-min) * 100vw);
	}
}
/*-----------------------------------------------
 * DETAIL
-------------------------------------------------*/ 
.characterSwiperBlock{
    position: relative;
    padding-top: min(calc(38 / var(--vw-min) * 100vw),38px);
}
.characterSliderBg{
    background-color: #FFF5C1;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    height: min(calc(288 / var(--vw-min) * 100vw),288px);
}
@media screen and (max-width:767px){ 
    .characterSwiperBlock{
        padding-top:0;
    }
    .characterSliderBg{ 
        height: calc(856 / var(--vw-min) * 100vw);
        top: calc(180 / var(--vw-min) * 100vw);
    }
}
.characterSlider{
    padding-bottom: min(calc(38 / var(--vw-min) * 100vw),38px);
}
.charaBtnLists{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom:min(calc(56 / var(--vw-min) * 100vw),56px);
}
@media screen and (max-width:767px){ 
    .charaBtnLists{
        margin-bottom:0;
    }
}
/* charaBtn */
.charaBtnWrap{
    margin: 0 min(calc(10 / var(--vw-min) * 100vw), 10px);
}
.charaBtn{
    display: block;
    border:2px solid var(--color-brown);
    background-color: var(--color-main);
    width:min(calc(96 / var(--vw-min) * 100vw), 96px);
    height:min(calc(96 / var(--vw-min) * 100vw), 96px);
    border-radius: 50%;
    overflow: hidden;
    position: relative;
}
@media screen and (max-width:767px){ 
    .charaBtnWrap{
        margin: 0 calc(7 / var(--vw-min) * 100vw);
    }
    .charaBtn{
        border: calc(4 / var(--vw-min) * 100vw) solid var(--color-brown);
        width:calc(128 / var(--vw-min) * 100vw);
        height:calc(128 / var(--vw-min) * 100vw);
    }
}
.charaBtn img{
    width: 100%;
    height: auto;
}
.thumBox{
    display: block;
    transition: all .4s ease;
    background: none;
}
.charaBtn.is-active img{
    opacity: 0;
    transform: scale(2.12);
}

@media screen and (hover:hover) and (pointer: fine){
	.charaBtn:hover img{
        opacity: 0;
        /*transform: scale(2.12);*/
            transition: opacity .4s ease, transform 1s ease;

    }
}
.thumBg{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    transition: all .4s ease;
    opacity: 0;
}
.charaBtn:hover .thumBg,
.charaBtn.is-active .thumBg{
    opacity: 1;
}
.chara1 .thumBg{
    background: url(../img/character/thum_chara1_on.png) no-repeat center center / cover;
}
.chara2 .thumBg{
    background: url(../img/character/thum_chara2_on.png) no-repeat center center / cover;
}
.chara3 .thumBg{
    background: url(../img/character/thum_chara3_on.png) no-repeat center center / cover;
}
.chara4 .thumBg{
    background: url(../img/character/thum_chara4_on.png) no-repeat center center / cover;
}


.characterDetail{
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .4s ease;    
}
.swiper-slide-active .characterDetail{
    opacity: 1;
    animation-delay: .8s;
    animation: popup 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
 
  @keyframes popup {
	0% {
	  transform: translateY(40px) scale(0.8);
	  opacity: 0;
	}
	50% {
		transform: translateY(20px) scale(1.1);
	  }
	100% {
	  transform: translateY(0) scale(1.0);
	}
	80%, 100% {
	  opacity: 1;
	}
  }

@media screen and (max-width:767px){ 
    .characterDetailWrap{
        padding: 0 calc(40 / var(--vw-min) * 100vw);

    }
}
.characterDetail{
    display: flex;
    justify-content: center;
}
@media screen and (max-width:767px){ 
    .characterDetail{
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }
}
.characterDetail__img{
    width:min(calc(376 / var(--vw-min) * 100vw), 376px);
}
.characterDetail__img img{
    width:100%;
    height: auto;
}

.characterDetail__profile{
    width:min(calc(376 / var(--vw-min) * 100vw), 376px);
}
.characterDetail__profile img{
    width:100%;
    height: auto;
}
@media screen and (max-width:767px){ 
    .characterDetail__img{
        width:100%
    }
    .characterDetail__profile{
        width:100%
    }

}
@media screen and (max-width:767px){ 
    .character__nameWrap{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: calc(16 / var(--vw-min) * 100vw);
    }
}
.character__name{
    font-size: min(calc(56 / var(--vw-min) * 100vw), 56px);
    font-weight: 900;
    color: #764932;
}
.character__cv{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.cv__ttl{
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width:min(calc(32/ var(--vw-min) * 100vw), 32px);
    height:min(calc(32/ var(--vw-min) * 100vw), 32px);
    font-size: min(calc(14 / var(--vw-min) * 100vw), 14px);
    color: #FFF;
    margin-right: min(calc(9/ var(--vw-min) * 100vw), 9px);
    background: url(../img/character/cv_ttl_bg.svg) no-repeat center center / contain;
}
.cv__name{
    font-size: min(calc(24 / var(--vw-min) * 100vw), 24px);
    font-weight: 700;
}
@media screen and (max-width:767px){ 
    .character__name{
        font-size: calc(80 / var(--vw-min) * 100vw);
    }
    .cv__ttl{
        width:calc(60 / var(--vw-min) * 100vw);
        height:calc(60 / var(--vw-min) * 100vw);
        font-size: calc(26 / var(--vw-min) * 100vw);
        margin-right: calc(20 / var(--vw-min) * 100vw);
    }
    .cv__name{
        font-size: calc(40 / var(--vw-min) * 100vw);
    }
}
/* controlBlock */
.controlBlock{
   	width: min(calc(880 / var(--vw-min) * 100vw), 880px);
    margin: 0 auto;
    position: absolute;
    top:min(calc(122 / var(--vw-min) * 100vw), 122px);
    left: 0;
    right: 0;
    margin: auto;
	display: flex;
	padding: 0 min(calc(24 / var(--vw-min)* 100vw), 24px) 0;
	align-items: center;
	height: min(calc(44 / var(--vw-min)* 100vw), 44px);
}
@media screen and (max-width:767px){ 
	.controlBlock{
        width: 100%;
        top:calc(258 / var(--vw-min) * 100vw);
		height: calc(80 / var(--vw-min) * 100vw);
	}
}
.arrowBtn{
    background-color: var(--color-brown);
}
.arrowBtn span{
    background-color: #FFF;
}
@media screen and (max-width:767px){ 
    .arrowBtn{
        background-color: #764932;
    }
    .arrowBtn.arrowBtn._prev {
        left: calc(40 / var(--vw-min) * 100vw);
    }
    .arrowBtn.arrowBtn._next {
        right: calc(40 / var(--vw-min) * 100vw);
    }
}