<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">@charset "utf-8";


@media screen and (min-width:641px){
/*

	PC STYLE

**************************************************************/

#characters {height: 788px; text-align: center; position: relative; background: url(/so4/images/characters/bg.jpg) center center no-repeat; background-size: cover;}

#characters h2 {margin: 73px 0 66px;}
#characters .wrap{background-image: url(/so4/images/characters/index.png); background-position: center top; background-repeat: no-repeat; height: 788px; border-top: 1px solid rgba(0,0,0,0); transition: 0.5s; z-index: 100;}

#characters .btn-characters {transform: skew(-26deg); margin-bottom: 80px; transition: 0.7s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}

#characters .btn-characters li {display: inline-block; padding: 0 4px;}
#characters .btn-characters li a {display: block; transform: skew(0deg); height: 200px !important; width: 160px !important; transition: 0.3s;background-color: rgba(255,255,255,0.3); opacity: 0;}
#characters .btn-characters li a:hover {opacity: 1;}

#characters .swiper-wrapper {width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: -1; opacity: 0; transition: 1s;}
#characters .swiper-slide{background-image: url(/so4/images/characters/index.png); background-position: center bottom; background-repeat: no-repeat; opacity: 0; transition: opacity 0.4s;}
#characters .swiper-slide-active{opacity: 1; transition-delay: 0.4s;}
#characters .swiper-slide.slide1 {background-image: url(/so4/images/characters/01.png);}
#characters .swiper-slide.slide2 {background-image: url(/so4/images/characters/02.png);}
#characters .swiper-slide.slide3 {background-image: url(/so4/images/characters/03.png);}
#characters .swiper-slide.slide4 {background-image: url(/so4/images/characters/04.png);}
#characters .swiper-slide.slide5 {background-image: url(/so4/images/characters/05.png);}
#characters .swiper-slide.slide6 {background-image: url(/so4/images/characters/06.png);}
#characters .swiper-slide.slide7 {background-image: url(/so4/images/characters/07.png);}
#characters .swiper-slide.slide8 {background-image: url(/so4/images/characters/08.png);}
#characters .swiper-slide.slide9 {background-image: url(/so4/images/characters/09.png);}
#characters .swiper-slide.slide10 {background-image: url(/so4/images/characters/10.png);}
#characters .swiper-slide.slide11 {background-image: url(/so4/images/characters/11.png);}
#characters .swiper-slide.slide12 {background-image: url(/so4/images/characters/12.png);}

#characters .swiper-button-next {background: url(/so4/images/btn-next.png) left top no-repeat; width: 66px; height: 115px; right: -67px; transition: 0.3s; z-index: 1000;}
#characters .swiper-button-prev {background: url(/so4/images/btn-prev.png) left top no-repeat; width: 66px; height: 115px; left: -67px; transition: 0.3s; z-index: 1000;}
#characters .swiper-button-disabled {opacity: 0;}
#characters .swiper-button-next:hover,
#characters .swiper-button-prev:hover {filter: brightness(1.5);}
#characters .swiper-button-next:hover {transform: translateX(5px);}
#characters .swiper-button-prev:hover {transform: translateX(-5px);}

#characters .close {background: url(/so4/images/btn-close.png) left top no-repeat; width: 114px; height: 114px; position: absolute; right: -9px; top: 46px; z-index: -1; opacity: 0; transition: 0.5s; cursor: pointer; transform:scale(0);}

#characters.show .swiper-wrapper {opacity: 1; z-index: 100;}
#characters.show .wrap {opacity: 0; z-index: -1;}
#characters.show .swiper-button-next {right: 0;}
#characters.show .swiper-button-prev {left: 0;}
#characters.show .close {opacity: 1; z-index:10000; transform: scale(1);}
#characters.show .close:hover {filter: brightness(1.5); transform:scale(0.95);}



}
@media screen and (min-width:1100px){}
@media screen and (min-width:1920px){

}



@media screen and (max-width:640px){

/*

	SP STYLE

**************************************************************/

#characters {height: 196.875vw; text-align: center; position: relative; background: url(/so4/images/characters/sp/bg.jpg) center top no-repeat; background-size: cover;}

#characters h2 {margin: 9.35vw 0 10.2vw; position: relative; z-index: 0;}

#characters .wrap{background-image: url(/so4/images/characters/sp/index.png); background-position: center top; background-repeat: no-repeat; height: 196.875vw; border-top: 1px solid rgba(0,0,0,0); transition: 0.5s; z-index: 100; background-size: 100% auto;}
#characters .btn-characters {transform: skew(-26deg); margin-bottom: 0px; padding: 0; text-align: left;}
#characters .btn-characters + .btn-characters {margin-top: 2.6vw;}
#characters .btn-characters li {display: inline-block; padding: 0 1.1vw 0 0; transform: translateX(-0.7vw); width: 26.1vw;}
#characters .btn-characters li:nth-child(n+4) {margin: 0; margin-top: 2.4vw; transform: translateX(19.5vw);}
#characters .btn-characters li a {display: block; transform: skew(0deg); height: 38.25vw !important; width: 25vw !important; background-color: rgba(255,255,255,0);}

.androidbrowser #characters .btn-characters {text-align: center;}
.androidbrowser #characters .btn-characters li {width: 26.1vw;}


#characters .swiper-wrapper {width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: -1; opacity: 0; transition: 1s;}
#characters .swiper-slide{background-image: url(/so4/images/characters/sp/index.png); background-position: center bottom; background-repeat: no-repeat; background-size: 100% auto; transition: 0.4s; opacity: 0;}
#characters .swiper-slide-active{opacity: 1; transition-delay: 0.4s;}

#characters .swiper-slide.slide1 {background-image: url(/so4/images/characters/sp/01.png);}
#characters .swiper-slide.slide2 {background-image: url(/so4/images/characters/sp/02.png);}
#characters .swiper-slide.slide3 {background-image: url(/so4/images/characters/sp/03.png);}
#characters .swiper-slide.slide4 {background-image: url(/so4/images/characters/sp/04.png);}
#characters .swiper-slide.slide5 {background-image: url(/so4/images/characters/sp/05.png);}
#characters .swiper-slide.slide6 {background-image: url(/so4/images/characters/sp/06.png);}
#characters .swiper-slide.slide7 {background-image: url(/so4/images/characters/sp/07.png);}
#characters .swiper-slide.slide8 {background-image: url(/so4/images/characters/sp/08.png);}
#characters .swiper-slide.slide9 {background-image: url(/so4/images/characters/sp/09.png);}
#characters .swiper-slide.slide10 {background-image: url(/so4/images/characters/sp/10.png);}
#characters .swiper-slide.slide11 {background-image: url(/so4/images/characters/sp/11.png);}
#characters .swiper-slide.slide12 {background-image: url(/so4/images/characters/sp/12.png);}

#characters .swiper-button-next {background: url(/so4/images/btn-next.png) left top no-repeat; background-size: 100% auto; width: 9.375vw; height: 17.8125vw; right: -11vw; transition: 0.3s; z-index: 1000;}
#characters .swiper-button-prev {background: url(/so4/images/btn-prev.png) left top no-repeat; background-size: 100% auto; width: 9.375vw; height: 17.8125vw; left: -11vw; transition: 0.3s; z-index: 1000;}
#characters .swiper-button-disabled {opacity: 0;}

#characters .close {background: url(/so4/images/btn-close.png) left top no-repeat; background-size: 100% auto; width: 16.25vw; height: 16.25vw; position: absolute; left: .125vw; top: 3.9875vw; z-index: -1; opacity: 0; transition: 0.5s; cursor: pointer; transform:scale(0);}

#characters.show .swiper-wrapper {opacity: 1; z-index: 100;}
#characters.show .wrap {opacity: 0; z-index: -1;}
#characters.show .swiper-button-next {right: 0;}
#characters.show .swiper-button-prev {left: 0;}
#characters.show .close {opacity: 1; z-index:10000; transform: scale(1);}



}

</pre></body></html>