#character {height: 823px; z-index: 11; position: relative;}
#character .bg01{background: url(../images/character/bg.jpg) center top no-repeat; height: 100%; width: 100%; position: absolute; left: 0; top: 0; z-index: 0;}
#character .bg02{background: url(../images/character/bg_blur.jpg) center top no-repeat; height: 100%; width: 100%; position: absolute; left: 0; top: 0; z-index: 1;}
#character .line {width: 100%; display: block; position: absolute; left: 0; top: 378px; z-index: 2; height: 100%;}
#character .line i {background: #eaa000; opacity: 0.6; height: 2px; width: 100%; display: block; margin-bottom: 2px;}
#character h2 {height: 54px; background: url(../images/character/h2.png) left top no-repeat; top:80px; left:38px; position: absolute; z-index: 10; width: 100%;}

@media screen and (min-width:641px){
#character ul {height: 824px;}
#character::after{content: ''; width: 100%; height: 100%; background: rgba(0,0,0,0); position: absolute; left: 0; top: 0; z-index: 100;}
#character.end::after {display: none;}
#character ul li a{display: block; height: 823px; background-position: center bottom; background-repeat: no-repeat; position: absolute; right: 50%; bottom: 0; z-index: 10; backface-visibility: hidden; transition: 0.3s; transform-origin: center bottom;}
#character ul li a::after{content: ''; width: 74px; height: 245px; position: absolute; left: 0; top: 0; background-position: left top; background-repeat: no-repeat;}
#character ul li a[href*='chara01'] {background-image: url(../images/character/chara01.png); width: 376px; height: 531px; z-index: 13; margin-right: -205px;}
#character ul li a[href*='chara01']::after{background-image: url(../images/character/chara01-name.png); top: 152px; left: -52px;}
#character ul li a[href*='chara02'] {background-image: url(../images/character/chara02.png); width: 444px; height: 649px; z-index: 12; margin-right: 40px;}
#character ul li a[href*='chara02']::after{background-image: url(../images/character/chara02-name.png); width: 77px; height: 192px; left: 33px; top: 36px;}
#character ul li a[href*='chara03'] {background-image: url(../images/character/chara03.png); width: 516px; height: 833px; z-index: 11; margin-right: -500px;}
#character ul li a[href*='chara03']::after{background-image: url(../images/character/chara03-name.png); width: 83px; height: 254px; left: 387px; top: 117px;}
/*#character ul li a:hover{transition: 0.6s; filter: brightness(1.1); backface-visibility: hidden;}*/

#character ul li a i{display: block; position: absolute; left: 0; top: 0;}
#character ul li a i::after,
#character ul li a i::before{content: ''; width: 0; height: 0; border-style: solid; border-width: 5.5px 0 5.5px 10px; border-color: transparent transparent transparent #fff; position: absolute; left: 0; top: 0; z-index: 10;}
#character ul li a[href*='chara01'] i::after,
#character ul li a[href*='chara01'] i::before{left: 36px; top: 156px;}
#character ul li a[href*='chara02'] i::after,
#character ul li a[href*='chara02'] i::before{left: 126px; top: 45px;}
#character ul li a[href*='chara03'] i::after,
#character ul li a[href*='chara03'] i::before{left: 376px; top: 130px; border-width: 5.5px 10px 5.5px 0; border-color: transparent #fff transparent transparent;}

#character ul li a i::after {opacity: 0; transform: translate(-10px,0);}
#character ul li a:hover i::before {animation: arrowbefore .5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;}
#character ul li a:hover i::after  {animation: arrowafter .5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;}
#character ul li a[href*='chara03'] i::after {opacity: 0; transform: translate(10px,0);}
#character ul li a[href*='chara03']:hover i::before {animation: arrowbefore2 .5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;}
#character ul li a[href*='chara03']:hover i::after{animation: arrowafter2 .5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;}
}

@keyframes arrowbefore {
100%{transform: translate(10px,0); opacity: 0;}
}
@keyframes arrowafter {
 99% {transform: translate(0,0); opacity: 1;}
100% {opacity: 0;}
}
@keyframes arrowbefore2 {
100%{transform: translate(-10px,0); opacity: 0;}
}
@keyframes arrowafter2 {
 99% {transform: translate(0,0); opacity: 1;}
100% {opacity: 0;}
}


@media screen and (min-width:1921px){
    #character .bg01,
    #character .bg02{background-size: cover;}
}



@media screen and (max-width:640px){
/*
    
    SP
    
*/
#character {height: 119.219vw; overflow: hidden; position: relative;}
#character .bg01{background: url(../images/character/bg-sp.jpg) center top no-repeat; width: 100vw; background-size: cover;}
#character .bg02{background: url(../images/character/bg_blur-sp.jpg) center top no-repeat; width: 100vw; background-size: cover;}
#character .line {top:43.75vw; width: 100vw; background:url(../images/character/bg_line.png) center top no-repeat; background-size: 100vw auto;}
#character .line i {display:none;}
#character h2 {height: 8.438vw; background: url(../images/character/h2.png) left top no-repeat; top: 7.656vw; left: 6.094vw; background-size: auto 100%;}
#character .spchara {background: url(../images/character/chara-sp.png) center bottom no-repeat; background-size: 100vw auto; height: 119.219vw; width: 100vw; position: absolute; left: 0; top: 0; z-index: 10; display: block;}
#character ul a{display: block; height: 50vw; width: 33vw; position: absolute; left: 0; top: 0; z-index: 10;}
#character ul li:nth-child(1) a {left: 26vw; top: 50vw; height: 70vw; width: 42vw; z-index: 21;}
#character ul li:nth-child(2) a {left: 0; top: 30vw; height: 88vw; width: 42vw; z-index: 20;}
#character ul li:nth-child(3) a {left: 50vw; top: 10vw; height: 118vw; width: 48vw; z-index: 20;}
#character ul b{display: block; height: 10vw; width: 10vw; position: absolute; left: 0; top: 0; z-index: 11;}
#character ul li:nth-child(1) b {left: 15.625vw; top: 72.813vw; width: 12.969vw; height: 29.844vw; z-index: 11; background: url(../images/character/chara01-name-sp.png) left top no-repeat / 100% auto;}
#character ul li:nth-child(2) b {left: 2.188vw; top: 29.375vw; width:11.563vw; height: 23.281vw; z-index: 11; background: url(../images/character/chara02-name-sp.png) left top no-repeat / 100% auto;}

#character ul li:nth-child(3) b {left: 84.844vw; top: 30vw; width: 11.719vw; height: 30.625vw; z-index: 11; background: url(../images/character/chara03-name-sp.png) left top no-repeat / 100% auto;}

}



/*
    
    character modal

*/
#charamodalbase {position: fixed; left: 0; top: 0; width: 100vw; height: 100%; background:#000; z-index: 10000; display: none;}
#charamodal {position: fixed; left: 0; top: 0; z-index: 10010; height: 100%; width: 100%; overflow: hidden; overflow-y: auto; font-size: 0; line-height: 1; display: none;}
#charamodal .in {max-width: 1400px; min-width: 780px; margin: 0 auto; position: relative; overflow: hidden;}
#charamodal span img,
#charamodal img.base{width: 100%; height: auto; max-width: 1400px; min-width: 780px;}
#charamodal .bg01{position: absolute; left: 0;top: 0; display: block;}
#charamodal .bg02{position: absolute; left: 0;top: 0; display: block;}
#charamodal .text{position: absolute; left: 0;top: 0; display: block; transform-origin: center bottom;}
#charamodal .name{position: absolute; left: 0;top: 0; display: block;}
#charamodal p.subject {background: url(../images/character/chara01/bg_sabject20.png) left top no-repeat; width: 246px; height: 288px; position: absolute; left: 67px; bottom: 67px; z-index: 100; display: none;}
#charamodal p.subject a{display: block; background: url(../images/character/chara01/btn_subject20.png) center center no-repeat; width: 171px; height: 41px; border: 1px solid #838383; position: absolute; left: 74px; top: 115px; transition: 0.3s;}
#charamodal p.subject a:hover{background-color: rgba(255,255,255,0.5); border-color:#fff;}
#charamodal p.reanbell {background: url(../images/character/chara01-02/bg_reanbell.png) left top no-repeat; width: 237px; height: 289px; position: absolute; left: 52px; bottom: 45px; z-index: 100; display: none;}
#charamodal p.reanbell a{display: block; background: url(../images/character/chara01-02/btn_reanbell.png) center center no-repeat; width: 142px; height: 41px; border: 1px solid #838383; position: absolute; left: 94px; top: 137px; transition: 0.3s;}
#charamodal p.reanbell a:hover{background-color: rgba(255,255,255,0.5); border-color:#fff;}

#charamodal .close {position: absolute; right: 0; top: 0; width: 50px; height: 50px; overflow: hidden; margin-top:0px;}
#charamodal .close a {display: block; background: url(../images/btn_close.png) center center no-repeat ; width: 50px; height: 50px; background-size: 31px auto; transition: 0.3s;}
#charamodal .close a:hover{transform: scale(1.2);}
#charamodal .arr {position: absolute; right: 0; top: 50%; margin-top: -25px; width: 50px; height: 50px; padding: 0 10px 0 0; overflow: hidden;}
#charamodal .arr a {display: block; width: 50px; height: 50px; position: relative; transition: 0.3s;}
#charamodal .arr a::after,
#charamodal .arr a::before{content: ''; width: 0; height: 0; border-style: solid; border-width: 18.5px 0 18.5px 32px; border-color: transparent transparent transparent #fff; position:absolute; left: 50%; top: 50%; margin: -20px 0 0 -18.5px;}
#charamodal .arr {right: -0px;}
#charamodal .arr.prev {right: inherit; left: -0px; padding: 0 0 0 5px;}
#charamodal .arr.prev a::after {transform: rotate(-180deg);}
#charamodal .arr.next a::before {transform: translate(-75%,0); opacity: 0;}
#charamodal .arr.next a:hover::before {animation: arrowbefore3 .5s cubic-bezier(0.215, 0.61, 0.355, 1) 1;}
#charamodal .arr.next a:hover::after  {animation: arrowafter3 .5s cubic-bezier(0.215, 0.61, 0.355, 1) 1;}
#charamodal .arr.prev a::before {transform: translate(75%,0) rotate(180deg); opacity: 0;}
#charamodal .arr.prev a:hover::before {animation: arrowbefore4 .5s cubic-bezier(0.215, 0.61, 0.355, 1) 1;}
#charamodal .arr.prev a:hover::after  {animation: arrowafter4 .5s cubic-bezier(0.215, 0.61, 0.355, 1) 1;}
@media screen and (min-width:1401px){
#charamodal .close {width: 1400px; right: 50%; margin-right: -700px;}
#charamodal .close a {float: right;}
}
@media screen and (min-width:1560px){
#charamodal .arr.next {width: 780px; text-align: right; right: 50%; margin-right: -780px; z-index: 0;}
#charamodal .arr.next a{float: right;}
#charamodal .arr.prev {width: 780px; text-align: right; left: 50%; margin-left: -780px; z-index: 0;}
}
@media screen and (max-width:1400px){
#charamodal p.subject {background-size: cover; width: 17.571vw; height: 20vw; left: 4.786vw; bottom: 4.786vw;}
#charamodal p.subject a{background-size: cover;  width: 12.214vw; height: 2.929vw; left: 5.286vw; top: 8.214vw;}
#charamodal p.reanbell {background-size: cover; width: 16.929vw; height: 20.643vw; left: 3.714vw; bottom: 3.214vw;}
#charamodal p.reanbell a{background-size: cover; width: 10.143vw; height: 2.929vw; left: 6.714vw; top: 9.786vw;}
}

@media screen and (max-width:640px){
#charamodal {background: url(../images/character/bg_modal-sp.jpg) center top no-repeat; background-size: cover;}
#charamodal .in {max-width: 100vw; width: 100vw; height: auto; margin: 0 !important;}
#charamodal span img,
#charamodal img.base{width: 100vw !important; height: auto; min-width: inherit;}
#charamodal .bg01{width: 100vw; height: auto; z-index: 0; position: static;}
#charamodal .text{width: 100vw; height: auto; z-index: 1;}
#charamodal .close {z-index: 1000; position: fixed; top: 3.125vw !important; right: 3.75vw; width: auto; height: auto; margin-top: 0 !important;}
#charamodal .close a {background: url(../images/btn_close.png) center center no-repeat; width: 11.563vw; height: 11.563vw; background-size: 7.969vw auto; transition: 0.3s;}

#charamodal .arr {position: absolute; right: 0; top: 86.094vw; margin-top:0; width: auto; height: auto; padding: 0 3.125vw 0 0; z-index: 100;}
#charamodal .arr a {width: 5.938vw; height: 5vw;}
#charamodal .arr a::after,
#charamodal .arr a::before{content: ''; width: 0; height: 0; border-style: solid; border-width: 2.5vw 0 2.5vw 5.938vw; border-color: transparent transparent transparent #fff; position: absolute; left: 0; top: 0; margin: 0;}
#charamodal .arr {right: 0;}
#charamodal .arr.prev {right: inherit; left: 3.125vw; padding: 0;}
#charamodal .arr.prev a::after {transform: rotate(-180deg);}

#charamodal p.subject {background:none; width: 37.656vw; height: 45vw; position: absolute; left: 55.938vw; bottom: 53.125vw; z-index: 100; display: none;}
#charamodal p.subject a{background: url(../images/character/chara01/sp/btn_subject20.png) center center no-repeat; background-size: cover; width: 100%; height:100%; border: none; left: 0; top: 0;}
#charamodal p.subject a:hover{background-color: rgba(255,255,255,0); border-color:#fff;}

#charamodal p.reanbell {background:none; width: 40.156vw; height: 45.156vw; position: absolute; left: 57.5vw; bottom: 25vw; z-index: 100; display: none;}
#charamodal p.reanbell a{display: block; background: url(../images/character/chara01-02/sp/btn_reanbell.png) center center no-repeat; background-size: cover; width: 100%; height:100%; border:none; left: 0; top: 0; transition: 0.3s;}
#charamodal p.reanbell a:hover{background-color: rgba(255,255,255,0); border-color:#fff;}


}



@keyframes arrowbefore3 {
 99% {transform: translate(0,0); opacity: 1;}
100% {opacity: 0;}
}
@keyframes arrowafter3 {
100%{transform: translate(75%,0); opacity: 0;}
}

@keyframes arrowbefore4 {
 99% {transform: translate(0,0) rotate(180deg); opacity: 1;}
100% {opacity: 0;}
}
@keyframes arrowafter4 {
100%{transform: translate(-75%,0) rotate(180deg); opacity: 0;}
}


/* animation */
#character {background: #000;}
#character .animation {display: block; position: absolute; left: 0; top: 20%;}
#character .bg01 {opacity: 1; transition:1s cubic-bezier(0.23, 1, 0.32, 1);}
#character .bg02 {opacity: 0; transition:1.5s cubic-bezier(0.23, 1, 0.32, 1);}
#character ul li a::after,
#character ul li i::before{opacity:0; transform: translate(-30px,0); transition: 0.5s 0.75s cubic-bezier(0.215, 0.61, 0.355, 1);}
#character ul li a{opacity: 0; transition: opacity 1.5s 0.3s cubic-bezier(0.23, 1, 0.32, 1),transform 0.5s 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);}
#character ul li:nth-child(2) a{transform: translate(-150px,0); -webkit-transform: translate(-150px,0);}
#character ul li:nth-child(3) a{transform: translate(150px,0); -webkit-transform: translate(150px,0);}
#character ul li:nth-child(3) a::after,
#character ul li:nth-child(3) i::before {transform: translate(30px,0);}
/*#character ul {opacity: 0; filter: brightness(0); transition:1.5s 0.2s cubic-bezier(0.23, 1, 0.32, 1);}*/
#character .line i {opacity: 0; -webkit-transform: translate(0,0); transition: 1.5s 1s ease-out;}
#character .fadein ~ .bg02 {opacity: 1;}
#character .fadein ~ .line i {opacity: 0.6; transform: translate(0,0); -webkit-transform: translate(0,0);}
#character .fadein ~ .wrap ul  {opacity: 1; filter: brightness(1);}
#character .fadein ~ .wrap ul li a {transform: translate(0,0); opacity: 1;}
#character .fadein ~ .wrap ul li a::after,
#character .fadein ~ .wrap ul li i::before{opacity:1; transform: translate(0,0);}
@media screen and (max-width:640px){
#character ul b,
#character .spchara{opacity: 0; filter: brightness(0); transition:1.5s 0.2s cubic-bezier(0.23, 1, 0.32, 1);}
#character .fadein ~ .wrap ul b {opacity: 1; filter: brightness(1);}
#character .fadein ~ .spchara  {opacity: 1; filter: brightness(1);}
#character .line  {opacity: 0; -webkit-transform: translate(0,0); transition: 1.5s 1s ease-out;}
#character .fadein ~ .line {opacity: 0.6; transform: translate(0,0); -webkit-transform: translate(0,0);}
}


#character.end .wrap ul li a { transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1) !important; transition-delay: 0 !important;}
#character.end .wrap ul li a:hover{transform: scale(1.07);}
#character.end .wrap ul li:nth-child(2) a:hover{transform: scale(1.04);}
#character.end .wrap ul li:nth-child(3) a:hover{transform: scale(1.03);}

#character[data-active='#chara01'].end .wrap ul li a[href*='chara02'],
#character[data-active='#chara01'].end .wrap ul li a[href*='chara03'] {opacity:0.7;}
#character[data-active='#chara01'].end .wrap ul li a[href*='chara02'] {transform: translate(-50px,0) scale(0.95); transform-origin: left bottom;}
#character[data-active='#chara01'].end .wrap ul li a[href*='chara03'] {transform: translate(50px,0) scale(0.95); transform-origin: right bottom;}

#character[data-active='#chara02'].end .wrap ul li a[href*='chara01'],
#character[data-active='#chara02'].end .wrap ul li a[href*='chara03'] {opacity:0.5; transform: translate(50px,0) scale(0.95); transform-origin: right bottom;}

#character[data-active='#chara03'].end .wrap ul li a[href*='chara01'],
#character[data-active='#chara03'].end .wrap ul li a[href*='chara02'] {opacity:0.5; transform: translate(-50px,0) scale(0.95); transform-origin: left bottom;}