#system {height: 3152px; z-index: 11; position: relative; padding: 89px 0 0; /*background: url(../images/system/base.jpg) center top no-repeat;*/}

#system .bg01{background: url(../images/system/bg.jpg) center bottom no-repeat; height: 100%; width: 100%; position: absolute; left: 0; top: 0; z-index: 0;}
#system .bg02{background: url(../images/system/bg_blur.jpg) center bottom no-repeat; height: 100%; width: 100%; position: absolute; left: 0; top: 0; z-index: 1;}


#system h2 {height: 54px; background: url(../images/system/h2.png) left top no-repeat; z-index: 10; position: relative; width: 1200px; margin: 0 auto -18px;}
#system h3 {height: 317px; background: url(../images/system/h3.png) center top no-repeat; background-size: auto 22.643vw; width: 100vw; min-width: 1200px; margin: 0 auto; position: relative; z-index: 10;}
#system h4 {position: absolute; left: 50%; top: 0;}

#system span.bg {width:649px; height: 214px; background: url(../images/system/h402.png) right top no-repeat; left: inherit; right: 50%; margin: 589px 0 0 -650px; z-index: 0; position: absolute;}

#system .h401 {width: 41.714vw; height: 153px; background: url(../images/system/h401.png) left top no-repeat; background-size: auto 9.857vw; margin: 320px 0 0 23px;}
#system .h403 {width: 41.286vw; height: 149px; background: url(../images/system/h403.png) right top no-repeat; background-size: auto 10.643vw; left: inherit; right: 50%; margin: 807px 59px 0 0;}
#system .h404 {width: 66vw; height: 316px; background: url(../images/system/h404.png) left top no-repeat; background-size: auto 22.571vw; margin: 1380px 0 0 -251px;}
#system .ss {position:absolute; left: 50%; top: 0; z-index: 10;}
#system .ss img {width: 100%; height: auto;}
#system .ss01 {width: 676px; margin: -154px 0 0 -571px;}
#system .ss02 {width: 529px; margin: -47px 0 0 36px;}
#system .ss03 {width: 700px; margin: 321px 0 0 -682px;}
#system .ss04 {width: 706px; margin: 472px 0 0 -46px;}
#system .ss05 {width: 758px; margin: 982px 0 0 -600px;}
#system .ss06 {width: 583px; margin: 956px 0 0 18px;}
#system .ss07 {width: 430px; margin: 1607px 0 0 270px; z-index: 2;}
#system .ss08 {width: 511px; margin: 1703px 0 0 -196px; z-index: 1;}
#system .ss09 {width: 482px; margin: 1504px 0 0 -600px; z-index: 0;}
#system dl {width: 1229px; height: 745px; position: absolute; left:50%; top: 2017px; margin: 0 0 0 -685px;}
#system dl dt {background: url(../images/system/endcopy.png) left top no-repeat; width: 1200px; height: 111px; position: absolute; left: 50%; top: 540px; margin: 0 0 0 -530px; z-index: 10;}
#system dl dd li{position: absolute; left: 50%; top: 0; z-index: 0;}
#system dl dd li:nth-child(1){background: url(../images/system/chara01.png) left top no-repeat; width: 475px; height: 601px; z-index: 1; margin: 0 0 0 -253px;}
#system dl dd li:nth-child(2){background: url(../images/system/chara02.png) left top no-repeat; width: 845px; height: 520px; z-index: 2; margin: 223px 0 0 -618px;}
#system dl dd li:nth-child(3){background: url(../images/system/chara03.png) left top no-repeat; width: 503px; height: 347px; z-index: 0; margin: 130px 0 0 109px;}

@media screen and (min-width:1921px){
    #system .bg01,
    #system .bg02{background-size: cover;}
}
@media screen and (min-width:1401px){
#system h3 {height: 317px; width: 100%; background-size: auto 317px;}
#system .h401 {width: 565px; height: 138px; margin: 320px 0 0 23px; background-size: auto 100%;}
#system .h403 {width: 578px; height: 150px; margin: 807px 59px 0 0; background-size: auto 100%;}
#system .h404 {width: 924px; height: 316px; margin: 1380px 0 0 -251px; background-size: auto 100%;}
}
@media screen and (max-width:1200px){
#system h3 {height: 317px; background-size: auto 272px; width: 1200px;}
#system .h401 {background-size: auto 100%; height: 117px; width: 587px;}
#system .h403 {background-size: auto 100%; height: 129px; width: 578px;}
#system .h404 {background-size: auto 100%; height: 266px; width: 924px;}
}


@media screen and (max-width:640px){
/*
    SP
*/
#system {height: 657.031vw; width: 100vw; padding:14.063vw 0;}
#system .bg01{background: url(../images/system/bg-sp.jpg) center top no-repeat; background-size: cover; height: 100%; width: 100%; position: absolute; left: 0; top: 0; z-index: 0;}
#system .bg02{display: none;}
#system h2 {height: 8.438vw; background: url(../images/system/h2.png) center top no-repeat; background-size: auto 100%; width: 100vw; margin: 0 auto 4.0vw;}
#system h3 {height: 20.156vw; background: url(../images/system/h3-sp.png) center top no-repeat; background-size: 100vw auto; width: 100vw; min-width: inherit; margin: 0 auto; position: relative; z-index: 10;}

#system h4 {position: absolute; left: 0; top: 0;}
#system .h401 {width: 100vw; height: 21.094vw; background: url(../images/system/h401-sp.png) left top no-repeat; background-size: 100vw auto; margin: 99.5vw 0 0;}
#system .h402,
#system .bg{display: none;}
#system .h403 {width: 100vw; height: 22.656vw; background: url(../images/system/h403-sp.png) left top no-repeat; background-size: 100vw auto; margin: 214.4vw 0 0; right: inherit;}
#system .h404 {width: 100vw; height: 21.563vw; background: url(../images/system/h404-sp.png) left top no-repeat; background-size: 100vw auto; margin: 335.7vw 0 0;}

#system .ss {left: inherit; left: 0;}
#system .ss01 {width: 84.219vw; margin: 5.2vw 0 0 12.4vw;}
#system .ss02 {width: 74.531vw; margin: 52.4vw 0 0 2.6vw;}

#system .ss01 {width: 79.063vw; margin: 5.55vw 0 0 3.0vw; z-index: 0;}
#system .ss02 {width: 76.563vw; margin: 44.2vw 0 0 20.17vw; z-index: 1;}
#system .ss03 {width: 86.719vw; margin: 0; margin: 124.8vw 0 0 2.7vw;}
#system .ss04 {width: 82.5vw; margin: 0; margin: 158.8vw 0 0 14.3vw;}
#system .ss05 {width:86.25vw; margin: 0; margin: 239.2vw 0 0 3.1vw; z-index: 0;}
#system .ss06 {width: 78.906vw; margin: 0; margin: 276.8vw 0 0 18.1vw; z-index: 1;}
#system .ss07 {width: 67.263vw; margin: 0; margin: 428.0vw 0 0 30.1vw; z-index: 1;}
#system .ss08 {width: 80.044vw; margin: 0; margin: 460.7vw 0 0 2.75vw; z-index: 2;}
#system .ss09 {width:75vw; margin: 0; margin: 360.4vw 0 0 12.5vw; z-index: 0;}

#system dl {height: 95.313vw; width: 100vw; left: 0; margin:522.5vw 0 0; top: 0;}
#system dl dt {background: url(../images/system/endcopy-sp.png) left top no-repeat; background-size: 100vw auto; width: 100vw; height: 23.438vw; position: absolute; left: 0; top: 0; margin: 63.0vw 0 0 0; z-index: 10;}
#system dl dd li{position: absolute; left: 0; top: 0; z-index: 0;}
#system dl dd li:nth-child(1){background: url(../images/system/chara01-sp.png) left top no-repeat; background-size: 100vw auto; width:100vw; height: 100%; z-index: 1; margin: 0;}
#system dl dd li:nth-child(2){background: url(../images/system/chara02-sp.png) left top no-repeat; background-size: 100vw auto; width: 100vw; height: 100%; z-index: 2; margin:0;}
#system dl dd li:nth-child(3){background: url(../images/system/chara03-sp.png) left top no-repeat; background-size: 100vw auto; width: 100vw; height: 100%; z-index: 0; margin:0;}

}


/* animation */
#system .dlanim {border: 5px solid red; position: absolute; left: 50%; top: 2260px; opacity: 0; display: block;}
#system .ss.animation {opacity: 0; transform: translate(-50px,0);}
#system .ss.animation.fadein{opacity:1; transform: translate(0,0); transition: 0.75s 0.1s cubic-bezier(0.215, 0.61, 0.355, 1);}
@media screen and (max-width:640px){
#system .dlanim {border: 5px solid red; position: absolute; left: 0; top: 530vw;}
}