@charset "utf-8";

#siteHeader {transform: translateY(-100px);}
.opshort #siteHeader{transform: translate(0,0);}

#contents{opacity:0;transition:opacity 0.6s ease;}
.windowloaded #contents{opacity:1;}


/**

    ビジュアル

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


#kv {height: 1107px; /*background: url(/img/pc/top/kv/bg.jpg) center top no-repeat;*/ position: relative; z-index: 0;}

#kvbg{height: 1107px; background: url(/img/pc/top/kv/bg.jpg) center top no-repeat; z-index: 0; position: absolute; left: 0; top: 0; width: 100%;}

@media screen and (min-width:1683px){
#kvbg {background-size: cover;}
}
/*
#kv::after {height: 1107px; background: url(/img/pc/top/kv.jpg) center top no-repeat; content: ''; width: 100%; position: absolute; left: 50%; top: 0; opacity: 0.8; margin-left: -50%; z-index: 5;}
*/

#kv i {position: absolute; left: 50%; top: 0; opacity: 1; display: block; backface-visibility: hidden; zoom:1;}

/*#kv i {border: 1px solid red;}*/
#kv i b{  /*will-change: transform;*//* transition:transform 0.6s 0.1s cubic-bezier(0.23, 1, 0.32, 1);*/ display: block;}
#kv i b em{display: block;}

#kv span {display: block; position: relative; /* will-change: transform;*/ transition:transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);}
#kv00 {position: absolute; z-index: 50; width: 1682px; height: 100%; left: 50%; top: 0; margin-left: -841px;}
#kv01 {position: absolute; z-index: 30; width: 1682px; height: 100%; left: 50%; top: 0; margin-left: -841px;}
#kv .a01 {margin: 473px 0 0 356px;}
#kv .a02 {margin: 412px 0 0 -671px;}
#kv .a03 {margin: 428px 0 0 -596px;}
#kv .a04 {margin: 396px 0 0 26px;}
#kv .a05 {margin: 234px 0 0 -310px;}

#kv i b{/*transition-delay: .7s; transform:scale(0.7) translate(-25vw,0);*/ opacity: 0}
/*
#kv01 i {opacity: 0;}
#kv.play #kv01 i {opacity: 1;}
#kv02 i {opacity: 0; transition: 0.3s;}
#kv.play #kv02 i {opacity: 1; transition-delay: 1.2s;}
#kv03 i {opacity: 0; transition: 0.3s;}
#kv.play #kv03 i {opacity: 1; transition-delay: 1.2s;}
*/

/*
#kv01 i b em{opacity: 0; transition-delay: .6s;}
*/
/*
#kv .a02 b{ transition-delay: .7s; transform:scale(0.7)  translate(25vw,0);}
#kv .a02 b em{ transition-delay: .6s;}
#kv .a03 b{ transition-delay: .6s; transform:scale(0.7)  translate(25vw,0);}
#kv .a03 b em{ transition-delay: .5s;}
#kv .a04 b{ transition-delay: .6s;}
#kv .a04 b em{ transition-delay: .5s;}
#kv .a05 b{ transition-delay: .2s; transform: translate3d(0,0,-100px) scale(3);}
#kv .a05 b em{ transition-delay: .16s;}
*/

#kv02 {position: absolute; z-index: 20; width: 1682px; height: 100%; left: 50%; top: 0; margin-left: -841px;}
#kv .b01 {margin: 74px 0 0 -710px;}
#kv .b02 {margin: 78px 0 0 -752px;}
#kv .b03 {margin: 219px 0 0 -798px;}
#kv .b04 {margin: 273px 0 0 -588px; z-index: 11;}
#kv .b05 {margin: 279px 0 0 -393px; z-index: 12;}
#kv02 i b{/*transform: translate(-100vw,0); transition-delay: 1.0s; position: relative; left: -100vw;*/}
/*
#kv .b02 b{ transition-delay: 1.3s;}
#kv .b03 b{ transition-delay: 1.7s;}
#kv .b04 b{ transition-delay: 1.6s;}
#kv .b05 b{ transition-delay: 1.5s;}
*/

#kv03 {position: absolute; z-index: 10; width: 1682px; height: 100%; left: 50%; top: 0; margin-left: -841px;}
#kv .c01 {margin: 30px 0 0 -38px;}
#kv .c02 {margin: 155px 0 0 314px;}
#kv .c03 {margin: 122px 0 0 470px;}
#kv .c04 {margin: 264px 0 0 384px;}
#kv .c05 {margin: 262px 0 0 146px; z-index: 11;}
#kv03 i b{/*transform: translate(100vw,0); transition-delay: 1.1s; position: relative; left: 100vw;*/}
/*
#kv .c02 b{ transition-delay: 1.3s;}
#kv .c03 b{ transition-delay: 1.4s;}
#kv .c04 b{ transition-delay: 1.6s;}
#kv .c05 b{ transition-delay: 1.5s;}
*/
/*
#kv.play i b{transform: translate(0,0) scale(1); opacity: 1;}
#kv.play i b em{transform: translate(0,0) scale(1); opacity: 1;}
*/

#kv h1 {position: absolute; left: 50%; top: 768px; z-index: 200; margin-left: -227px;}
#kv h1 {transform: scale(3); opacity: 0; transform-origin: center center;}
.opshort #kv h1{transform: translate(0,0); opacity: 1;}




#kv a {transition:opacity 0.3s;}
#kv a:hover {opacity: 0.7;}

#kv i.anim em {animation: hurueru 1.2s 1;}
#kv i.anim2 em {animation: hurueru 1.5s 1;}
@keyframes hurueru {
    0% {transform: translate(0px, 0px)}
    25% {transform: translate(0px, -7px)}
    50% {transform: translate(0px, 0px)}
    75% {transform: translate(0px, 0px)}
    100% {transform: translate(0px, 0px)}
}

#kv .a01 em{width: 353px; height: 384px; background: url('/img/pc/top/kv/css_sprites.png') -987px -1654px;}
#kv .a02 em{width: 551px; height: 694px; background: url('/img/pc/top/kv/css_sprites.png') -1515px -637px;}
#kv .a03 em{width: 644px; height: 679px; background: url('/img/pc/top/kv/css_sprites.png') -851px -902px;}
#kv .a04 em{width: 505px; height: 711px; background: url('/img/pc/top/kv/css_sprites.png') -2186px -10px;}
#kv .a05 em{width: 644px; height: 872px; background: url('/img/pc/top/kv/css_sprites.png') -851px -10px;}
#kv .b01 em{width: 821px; height: 780px; background: url('/img/pc/top/kv/css_sprites.png') -10px -10px;}
#kv .b02 em{width: 475px; height: 643px; background: url('/img/pc/top/kv/css_sprites.png') -2186px -741px;}
#kv .b03 em{width: 651px; height: 607px; background: url('/img/pc/top/kv/css_sprites.png') -1515px -10px;}
#kv .b04 em{width: 376px; height: 471px; background: url('/img/pc/top/kv/css_sprites.png') -591px -1654px;}
#kv .b05 em{width: 318px; height: 588px; background: url('/img/pc/top/kv/css_sprites.png') -2711px -1441px;}
#kv .c01 em{width: 734px; height: 824px;background: url('/img/pc/top/kv/css_sprites.png') -10px -810px;}
#kv .c02 em{width: 266px; height: 322px;background: url('/img/pc/top/kv/css_sprites.png') -1360px -1654px;}
#kv .c03 em{width: 337px; height: 713px;background: url('/img/pc/top/kv/css_sprites.png') -2711px -708px;}
#kv .c04 em{width: 430px; height: 678px;background: url('/img/pc/top/kv/css_sprites.png') -2711px -10px;}
#kv .c05 em{width: 561px; height: 592px;background: url('/img/pc/top/kv/css_sprites.png') -10px -1654px;}

/*
#kv01 {transform: translateY(-140px);}
#kv .a01 {transform-origin: left bottom; transform: translate(0px,0) scale(0.9);}
#kv .a02 {transform-origin: right bottom; transform: translate(0px,0) scale(0.9);}
#kv .a03 {transform-origin: right bottom; transform: translate(0,0) scale(0.9);}
#kv .a04 {transform-origin: left bottom; transform: translate(0,0) scale(0.9);}
#kv .a05 {transform-origin: center bottom; transform: translate(0,-150px) scale(0.9);}
#kv02 {transform: translateY(-140px);}
#kv .b01 {transform-origin: right bottom; transform: translate(0px,0) scale(0.85);}
#kv .b02 {transform-origin: right bottom; transform: translate(0px,0) scale(0.85);}
#kv .b03 {transform-origin: right bottom; transform: translate(0,0) scale(0.85);}
#kv .b04 {transform-origin: right bottom; transform: translate(0,0) scale(0.85);}
#kv .b05 {transform-origin: right bottom; transform: translate(0,0) scale(0.85);}
#kv03 {transform: translateY(-140px);}
#kv .c01 {transform-origin: left bottom; transform: translate(-50px,0) scale(0.85);}
#kv .c02 {transform-origin: left bottom; transform: translate(50px,0) scale(0.85);}
#kv .c03 {transform-origin: left bottom; transform: translate(0,0) scale(0.85);}
#kv .c04 {transform-origin: left bottom; transform: translate(0,0) scale(0.85);}
#kv .c05 {transform-origin: left bottom; transform: translate(0,0) scale(0.85);}
*/

#thunder {width: 100%; height: 100%;}
#thunder i {display: block; background: url(/img/pc/top/kv/v02.png) left top no-repeat; position: absolute; left: 50%; top: 0; width:485px; height: 535px; margin: 0 0 0 -243px; background-size: 100% auto; backface-visibility:hidden; transform-origin: center top; opacity: 0;}
#thunder i.v2 {background-image: url(/img/pc/top/kv/v03.png); width: 436px; height: 540px; margin-left: -218px;}
#thunder i.v3 {background-image: url(/img/pc/top/kv/v04.png); width: 829px; height: 558px; margin-left: -415px;}
#thunder i.r {transform: scale(-1,1) !important;}

#flame01 {width: 1682px; height: 699px; position: absolute; left: 50%; top: 350px; z-index: 20; margin: 0 0 0 -841px; background: url(/img/pc/top/kv/flame.png) center top no-repeat;}
#flame01 s{display: block; position: absolute; left: 0; top: 0; background: url(/img/pc/top/kv/flame.png) center top no-repeat;}
.flamewrap {opacity: 0; transform-origin: center bottom;}
.flamewrap s{opacity: 0; transform: scale(1); width: 100%; height: 100%; transform-origin: center bottom;}

/* 火の粉 */
.firewrap {width: 1682px; height: 699px; position: absolute; left: 50%; top: 350px; z-index: 21; margin: 0 0 0 -841px;}
.firewrap em {width: 100%; height: 100px; position: absolute; left: 0; top: 250px; display: block; opacity: 0;}
/* ←向き */
.firewrap em b {width: 60px; height: 67px; background: url(/img/pc/top/kv/fl01.png) right bottom no-repeat; position: absolute; left: 50%; top: 0; z-index: 100;}
.firewrap em b.c1 {background-image: url(/img/pc/top/kv/fl02.png);}
.firewrap em b.c2 {background-image: url(/img/pc/top/kv/fl03.png);}
.firewrap em b.r{display: none;}
/* →向き */
.firewrap em i {width: 126px; height: 86px; background: url(/img/pc/top/kv/fr01.png) left bottom no-repeat; position: absolute; left: 50%; top: 0; z-index: 100; margin-left: 126px;}
.firewrap em i.c1 {background-image: url(/img/pc/top/kv/fr02.png);}
.firewrap em i.c2 {background-image: url(/img/pc/top/kv/fr03.png);}
.firewrap em i.l{display: none;}

#firebg1 {position: absolute; left: 50%; top: -100px; height: 1000px; width: 1500px; overflow: hidden; z-index: 21; opacity: 0; margin-left: -750px;}
#firebg2 {position: absolute; left: 50%; top: -100px; height: 1000px; width: 1500px; overflow: hidden; z-index: 20; opacity: 0; margin-left: -750px;}
#firebg3 {position: absolute; left: 50%; top: -100px; height: 1000px; width: 1500px; overflow: hidden; z-index: 15; opacity: 0; margin-left: -750px;}

/* anim */
#fire05{width: 1682px; height: 550px; position: absolute; left: 50%; top: 350px; z-index: 21; margin: 0 0 0 -841px;}
#fire05 s {width: 200px; height: 200px; position: absolute; left: 50%; top: 50%; z-index: 100; margin: -70px 0 0 -800px; display: block;}
#fire05 s.p2 {margin: 0 0 0 600px;}
#fire05 i {width: 200px; height: 200px; position: absolute; left: 50%; top: 50%; z-index: 100; margin: 0px 0 0 -230px; display: block;}
#fire05 i.p2 {margin: 170px 0 0 170px;}
#fire05 b {width: 200px; height: 200px; position: absolute; left: 50%; top: 50%; z-index: 100; margin: -275px 0 0 80px; display: block;}
#fire05 b.p2 {margin: -250px 0 0 -320px;}
#fire05 .anim{ background: url(/img/pc/top/kv/anim.png) center top no-repeat; background-size: 100% auto; -webkit-animation: fire 0.7s steps(8) 1; animation: fire 0.7s steps(8) 1;}
@keyframes fire {
 100% {background-position: 0 -1600px;}
}
@-webkit-keyframes fire {
 100% {background-position: 0 -1600px;}
}

@media screen and (max-width:1400px){
/*
    h1,
    #kv00,
    #kv01,
    #kv02,
    #kv03,
    #kv04,
    #download,
    .flamewrap{zoom:80%;}
    #campaign{zoom:80%;}
  */  
}

/* campaign */
#campaign {position: absolute; z-index: 100; right: 50%; top: 794px; width: 412px; height: 187px; font-size: 0; line-height: 1; margin-right: -660px;}
#campaign{transform: translate(500px,0);}
.opshort #campaign{transform: translate(0,0);}

@media screen and (min-width:1401px){
#campaign {margin: 0; right: 40px;}
}
#campaign .slick-arrow{background: url(/img/pc/top/arrow_left.png) left top no-repeat; width: 44px; height: 60px; border: none; font-size: 0; position: absolute; left: -40px; top:72px;}
#campaign .slick-slide {width: 412px; margin: 0 auto; height: 180px; }
#campaign .slick-slide a{display: block; position: relative; height: 180px; width: 410px; overflow: visible;}
#campaign .slick-slide img {width: 412px; height: auto; vertical-align: baseline; position: absolute; left: 0; bottom: 0;}
#campaign .slick-next{left: inherit; right: -40px; transform: rotate(180deg);}
#campaign .slick-dots {display: flex; justify-content: center;}
#campaign .slick-dots li {padding:12px 7px;}
#campaign .slick-dots button {width: 15px; height: 15px; background: #581051; border:none; border-radius: 15px; font-size: 0;}
#campaign .slick-dots .slick-active button {background: #a716b2;}
/* download */
#download {width: 486px; height: 221px; background: url(/img/pc/top/bg_download.png) left top no-repeat; position: absolute; left: 0; top: 771px; z-index: 200; font-size: 0; padding: 27px 0 0 52px; text-align: left;}
#download{transform: translate(-500px,0);}
.opshort #download{transform: translate(0,0);}
#download h2 {background: url(/img/pc/top/h2_download.png) left top no-repeat; width: 377px; height: 116px; position: absolute; left: 42px; top: -78px;}
#download p {position: relative; z-index: 10; display: inline-block; vertical-align: top; padding: 0 10px 7px 0;}
#download p.event {margin: -40px 0 0;}
#download ul {display: flex; position: relative; z-index: 10;}
#download ul li{padding: 0 5px 0 0;}
/* maintenance */
#maintenance {position: absolute; right: 15px; top: 76px; z-index: 200;}
#maintenance{transform: translate(500px,0);}
.opshort #maintenance{transform: translate(0,0);}

/**

    ムービー

**********************************************************/
#movies {background: url(/img/pc/top/movies/bg.png) center top no-repeat; height: 654px; margin-top: -90px; z-index: 100; position: relative; padding:0;}
#movies .wrap {transform: translate(0,82px); display: flex; width: 1358px;  height: 474px; margin: 0 auto; justify-content: center; align-content: center; align-items: center;}
#movies .slide{ width: 1358px; height: 474px; margin: 0 auto;}
#movies .slide::after {content: ''; background: url(/img/pc/top/movies/bg_movie.png) left top no-repeat; height: 436px; width: 100%; position: absolute; left: 0; top: 30px; z-index: -1;}
#movies .wrap .link{position: absolute; right: 0; top: 424px; z-index: 100; transition: 0.3s;}
#movies .wrap .link:hover {opacity: 0.7;}
#movies .moviewrap {/*background: url(/img/pc/top/movies/bg_movie.png) left top no-repeat;*/ height: 436px; margin: 30px 0 0; position: relative;}
#movies .moviewrap amp-img,
#movies .moviewrap img{position: absolute; left: 55px; top: 44px;}
#movies .slick-dots {display: flex; position: absolute; right: 80px; top: 348px;}
#movies .slick-dots li {padding:0 2px;}
#movies .slick-dots button {width: 185px; height: 48px; background:url(/img/pc/top/movies/btn_movie01.png) left top no-repeat; font-size: 0; opacity: 0.5; border: none; transition: opacity 0.3s;}
#movies .slick-dots .slick-active button {opacity: 1;}
#movies .slick-dots li:nth-child(2) button {background-image: url(/img/pc/top/movies/btn_movie02.png);}
#movies .slick-dots li:nth-child(3) button {background-image: url(/img/pc/top/movies/btn_movie03.png);}
#movies .player{position: absolute; left: 54px; top: 44px; z-index: 10; width: 600px; height: 337.5px;}
#movies .play a{width: 602px; height: 340px; position: absolute; left: 54px; top: 44px; z-index: 20; background: rgba(0,0,0,0.5); display: block;}
#movies .play a::after{content: ''; width: 50px; height: 50px; background: url(/img/pc/top/movies/btn_play.png) center center no-repeat; position: absolute; right: -10px; bottom: -8px; z-index: 30; transition: .3s; background-size: cover;}
#movies .play a:hover::after {transform: scale(1.2);}
@media screen and (min-width:1401px){
#movies {background-size: cover; height: 47vw;}
#movies .wrap {height: 33.857143vw;transform: translate(0,5.857143vw);}
#movies .wrap .link{top: 30.285714vw;}
}

/**

    ニュース TWITTER

**********************************************************/
#news {height:1079px; background: url(/img/pc/top/news/bg.jpg) center top no-repeat; margin-top: -63px; z-index: 50; padding: 147px 0 0;}
#news .wrap {width: 1264px; height: 591px; background: url(/img/pc/top/news/base.png) left top no-repeat; position: relative; left: 12px;}
#news .news {width: 610px; height: 385px; position: absolute; left: 70px; top: 132px; text-align: left;}
#news .news nav {white-space: nowrap;}
#news .news nav a {color: #b100ab; display: inline-block; vertical-align: top; font-size: 20px; font-weight: bold; text-decoration: none; margin-right: 20px; padding-right: 1.05em; position: relative;}
/*.macos #news .news nav a {font-size: 15px;}*/
#news .news nav a:hover{text-decoration: underline;}
#news .news nav a::after{content: '▼'; position: absolute; right: 0; top: 0.1em; transform: rotate(-90deg); transition: 0.3s; font-size: 16px;}
#news .news[data-show='all'] nav a[href='all'],
#news .news[data-show='game'] nav a[href='game'],
#news .news[data-show='campaign'] nav a[href='campaign'],
#news .news[data-show='other'] nav a[href='other'],
#news .news[data-show='event'] nav a[href='event']{color: #e0c300;}
#news .news[data-show='all'] nav a[href='all']::after,
#news .news[data-show='game'] nav a[href='game']::after,
#news .news[data-show='campaign'] nav a[href='campaign']::after,
#news .news[data-show='other'] nav a[href='other']::after,
#news .news[data-show='event'] nav a[href='event']::after{transform: rotate(0);}
#news .news .entries {height: 345px; overflow: hidden; overflow-y:auto; position: absolute; left: 0; bottom: 0; width: 100%;}
#news .news .entries .category{display: none;}
#news .news[data-show='all'] .entries .category[data-category='all'],
#news .news[data-show='game'] .entries .category[data-category='game'],
#news .news[data-show='campaign'] .entries .category[data-category='campaign'],
#news .news[data-show='other'] .entries .category[data-category='other'],
#news .news[data-show='event'] .entries .category[data-category='event']{display: block;}
#news .news .entries .category {padding-right: 20px;}
#news .news .entries .category li{border-bottom: 2px solid #4a4a4a; font-size: 18px; line-height: 24px; padding: 15px 0;}
#news .news .entries .category li span,
#news .news .entries .category li a{display: block; color: #fff; text-decoration: none; margin-top: 7px;}
#news .news .entries .category li a:hover{text-decoration: underline;}
#news .news .entries .category li i {color: #990094; font-weight:bold; font-style: normal; font-size: 16px; line-height: 20px; display: inline-block;}
#news .news .entries .category li b {display: inline-block; position: relative; line-height: 20px; font-size: 14px; margin-left: 20px; background: #990094;}
#news .news .entries .category li b::before{content: ''; width: 20px; height: 20px; background: #990094; position: absolute; left: -7px; top: 0; transform: skewX(-10deg); border-radius: 2px; z-index: -1;}
#news .news .entries .category li b::after{content: ''; width: 20px; height: 20px; background: #990094; position: absolute; right: -7px; top: 0; transform: skewX(-10deg); border-radius: 2px; z-index: -1;}
#news .twitter {position: absolute; left: 794px; top: 132px;}
#news #eye01 {width: 324px; height: 254px; position: absolute; left: 50%; top: 50%; z-index: 200; margin: 190px 0 0 -193px;}
#news #eye01 span{background: url(/img/pc/top/news/eye.png) left top no-repeat; width: 324px; height: 254px; z-index: 200; display: block;}
.nosafari #news #eye01 span{transition: 0.3s ease-out;}
.ie11 #news #eye01 ,
.edge #news #eye01 {transition: none;}
.ie11 #eye01 span,
.edge #eye01  span{transition: none;}

@media screen and (min-width:1401px){
#news {background-size: cover;}
}
/*
#news *::-webkit-scrollbar {width:8px; height: 8px;}
#news *::-webkit-scrollbar-track {border-radius: 8px;}
#news *::-webkit-scrollbar-thumb {background-color: #b100ab; border-radius: 8px; box-shadow: inset 0 0 6px #f117ff; border: 3px solid #f117ff; cursor: pointer;}
*/
/**

    gamesystem

***********************************************************/
#gamesystem {height: 2500px; z-index: 100; margin:  -134px 0 -533px;}

#gamesystem::after{content: '';  width: 1703px; height: 222px; position: absolute; left: 50%; bottom: 330px; z-index:1200; margin-left: -700px; transform: translate(-144px,16px);}
#gamesystem .bg {width: 1400px; height: 100%; position: absolute; left: 50%; top: 0; margin-left: -700px; z-index: 10;}
.lazyimgload #gamesystem::after{background: url(/img/pc/top/gamesystem/bg02.png) center top no-repeat;}
.lazyimgload #gamesystem .bg{ background: url(/img/pc/top/gamesystem/bg.png) left top no-repeat;}

#gamesystem ul {position: absolute; left: 50%; bottom: 360px; width: 1400px; margin-left: -700px; z-index: 0;}
#gamesystem .playerwrap {position: absolute; top: 590px;height: 788px;  left: 0; width: 100%;}
#gamesystem #player04 {position: absolute; left: 50%; top: 0; height: 788px; width: 1400px; margin-left: -700px; z-index: 0;}
#gamesystem .playerwrap::after{content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; background: rgba(0,0,0,0.3);}
#gamesystem header {background: url(/img/pc/top/gamesystem/title.png) center top no-repeat; width:747px; height: 239px; position: absolute; left: 50%; top: 175px; margin-left: -343px; z-index: 50; margin-top: -40px;}
#gamesystem .battle {background: url(/img/pc/top/gamesystem/battle.png) center top no-repeat; width: 1037px; height: 290px; position: absolute; left: 50%; top: 388px; margin-left: -632px; z-index: 30;}
#gamesystem .story {background: url(/img/pc/top/gamesystem/story.png) center top no-repeat; width: 1125px; height: 304px; position: absolute; left: 50%; top: 1228px; margin-left: -615px; z-index: 30;}
#gamesystem .chara {position: absolute; left: 50%; top: 0; z-index: 10; transition: 0.5s cubic-bezier(0.645, 0.045, 0.355, 1); opacity: 0; transform: translate(-50vw,0);}
#gamesystem .chara02,
#gamesystem .chara04{transform: translate(50vw,0);}
#gamesystem .chara.fadein {opacity: 1; transform: translate(0,0);}
#gamesystem .chara01{margin: -146px 0 0 -998px;}
#gamesystem .chara02{margin: -15px 0 0 -59px;}
#gamesystem .chara03{margin: 0 0 0 -914px; top: inherit; bottom: 984px;}
#gamesystem .chara04{margin: 0 0 0 209px; z-index: 30; top: inherit; bottom:478px;}
#eye02 {width: 554px; height: 202px; position: absolute; left: 50%; top: 100%; margin: -400px 0 0 88px; z-index: 1300;}
#eye02 span{width: 554px; height: 202px; display: block; position: absolute; left: 0; top: 0; background-position: left top; background-repeat: no-repeat;}
.nosafari #news #eye02 span{transition:0.5s cubic-bezier(0.175, 0.885, 0.32, 1.375);}
.ie11 #eye02 span,
.edge #eye02 span{transition: none;}
#eye02.fadein span {opacity: 1;}
#eye02 span:nth-child(1) {background-image: url(/img/pc/top/gamesystem/eye01.png);}
#eye02 span:nth-child(2) {background-image: url(/img/pc/top/gamesystem/eye02.png);}
#eye02 span:nth-child(3) {background-image: url(/img/pc/top/gamesystem/eye03.png);}
@media screen and (min-width:1401px){
#gamesystem {height: 178.571429vw; margin:-9.571429vw 0 -38.071vw;}
#gamesystem::after{background-size: cover !important; width:121.642857vw; height: 15.857143vw; bottom:23.571vw;  margin-left: -50vw; transform: translate(-10.285714vw,1.142857vw);}
#gamesystem .bg {width: 100%; height: 100%; position: absolute; left: 0; top: 0; margin-left: 0; background-size: 100% auto !important;}
#gamesystem ul {width: 100vw !important; margin-left: -50vw; z-index: 0; bottom: 25.714vw;}
#gamesystem ul li {float: left; width: 100vw !important;}
#gamesystem ul img {width: 100vw !important; height: auto;}
#gamesystem ul.slide01 img,
#gamesystem ul.slide01 li{height: 65.066667vw !important;}
#gamesystem ul.slide02 img,
#gamesystem ul.slide02 li{height: 53.333333vw !important;}
#gamesystem ul.slide03 img,
#gamesystem ul.slide03 li{height: 40.4vw !important;}

#gamesystem .playerwrap {top: 42.143vw;height: 56.285714vw;}
#gamesystem #player04 {height: 56.285714vw; width: 100vw; margin-left: -50vw;}
#gamesystem header {background-size: cover; width:53.357143vw; height: 17.071429vw; top:12.5vw; margin-left: -24.5vw; z-index: 50;}
#gamesystem .battle {background-size: cover; width: 74.071vw; height: 20.714vw; top: 27.714vw; margin-left: -45.142857vw; z-index: 30;}
#gamesystem .story {background-size: cover; width:80.357vw; height: 21.714vw; top: 87.714vw; margin-left: -43.928571vw; z-index: 30;}

#gamesystem .chara03{bottom: 70.286vw;}
#gamesystem .chara04{bottom: 34.143vw;}

}

/**

    キャラクター

**********************************************************/
#character{height: 1442px; padding: 1px 0 0; z-index: 10;}
.lazyimgload #character {background: url(/img/pc/top/character/bg.jpg) center top no-repeat;}
#character .characters {/*background: url(/img/pc/top/character/characters.png) center top no-repeat;*/ height: 1055px; width: 1795px; z-index: 10; position: absolute; left: 50%; top: 0; margin: 357px 0 0 -897px;}

#character .characters span {position: absolute; left: 50%; top: 0; width: 1795px; display: block; height: auto; margin-left: -897px; z-index: 10;}
#character .characters span.c1{z-index: 11; top: 49px; transform: translate(20px,-150px); opacity: 0;}
#character .characters span.c2{z-index: 12; top: 37px; transform: translate(-20px,150px); opacity: 0;}
#character .characters span.c3{z-index: 13; top: 363px; transform: scale(1.3); opacity: 0;}
#character .characters i {display: block; width: 3px; height: 3px; z-index: 100; background: red; position: absolute; left: 50%; top: 20%; opacity: 0;}
#character .characters i.fadein ~ span.c1{transform: translate(0,0); opacity: 1; transition: 0.5s 0.1s cubic-bezier(0.23, 1, 0.32, 1);}
#character .characters i.fadein ~ span.c2{transform: translate(0,0); opacity: 1; transition: 0.5s 0.2s cubic-bezier(0.23, 1, 0.32, 1);}
#character .characters i.fadein ~ span.c3{transform: scale(1); opacity: 1; transition: 0.5s 0.5s cubic-bezier(0.23, 1, 0.32, 1);}

#character h2 {background: url(/img/pc/top/character/h2.png) center top no-repeat; height: 181px; margin: 209px 0 0; z-index: 100;}
#character p{position: absolute; left: 50%; bottom: 0; z-index: 100;}
#character p.copy {margin: 0 0 84px -543px; transform: translateY(-15px);}
#character p.link {z-index: 110; margin: 0 0 195px 314px;}
#character p.link a{transition: 0.3s;}
#character p.link a:hover{opacity: 0.7}
@media screen and (min-width:1401px){
#character {background-size: 100% auto !important;}
}
@media screen and (min-width:1796px){
#cahracter {height: 80.334262vw;}
#character .characters{width: 100vw; height: 58.774373vw; margin: 19.888579vw 0 0 -50vw; background-size: cover;}
#character .characters img {width: 100%; height: 100%;}
#character .characters span {left: 0; top: 0; width:100vw; margin-left: 0;}
#character .characters span.c1{top: 2.728285vw; transform: translate(1.113586vw,-8.351893vw);}
#character .characters span.c2{top: 2.060134vw; transform: translate(-1.113586vw,8.351893vw);}
#character .characters span.c3{top: 20.211581vw;}

}

/**

    ブルーレイ

**********************************************************/
#bluraybox{/*background: url(/img/pc/top/bluraybox/bg.jpg) center top no-repeat;*/ height: 2326px; margin-top: -660px; z-index: 0;}
#bluraybox .bg{ height: 100%; width: 100%; position: absolute; left: 0; top: 0; margin-left: 0; z-index: 0;}
#bluraybox article {width: 1400px; height: 1062px; position: absolute; left: 50%; top:900px; margin-left: -700px; z-index: 10;}

.lazyimgload #bluraybox .bg{background: url(/img/pc/top/bluraybox/bg.jpg) center top no-repeat; background-size: auto 100%;}
.lazyimgload #bluraybox article{background: url(/img/pc/top/bluraybox/bg02.png) center top no-repeat; }

/*
#bluraybox article{opacity: 0; transform: translate(0,20vw);}
#bluraybox article.fadein {opacity: 1; transform: translate(0,0); transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);}*/

#bluraybox article header {background: url(/img/pc/top/bluraybox/title.png) center top no-repeat; height: 288px; position: absolute; left: 50%; top: 133px; z-index: 10; width: 900px; margin-left: -450px;}
#bluraybox article img.jacket{position: absolute; left: 50%; top: 508px; margin-left: -485px;}
#bluraybox article span {display: block; background: url(/img/pc/top/bluraybox/detail.png) left top no-repeat; width: 626px; height: 308px; position: absolute; left: 50%; top: 508px; margin-left: -44px; z-index: 0;}
#bluraybox p.link {position: absolute; left: 50%; bottom: 554px; z-index: 100; margin-left: 256px;}
#bluraybox p.link a{transition: 0.3s;}
#bluraybox p.link a:hover{opacity: 0.7;}
#bluraybox .bluraybox_chara02 { height: 1016px; width: 416px; position: absolute; right: 0; bottom: 1160px; z-index: 1; padding-top: 387px;}
#bluraybox .bluraybox_chara03 { height: 754px; width: 100%; position: absolute; left: 50%; bottom: 0; margin-left: -700px; z-index: 20;}
@media screen and (min-width:1401px){
#bluraybox {background-size: 100% auto; height: 166.142857vw; margin-top: -47.143vw;}
#bluraybox .bluraybox_chara02 { height: 72.571vw; width: 29.714vw; position: absolute; right: 0; bottom: 82.857vw; z-index: 1; padding-top: 27.643vw;}
#bluraybox .bluraybox_chara02 img {width: 100%; height: auto;}
#bluraybox .bluraybox_chara03 {margin: 0; width: 100%; background-size: cover; height: 53.857143vw; left: 0; margin-bottom: 0;}
#bluraybox .bluraybox_chara03 img {width: 100%; height: auto;}

#bluraybox article {width: 100%; height: 75.857143vw; background-size:cover !important; left: 0; top:64.285714vw; margin-left: 0;}
#bluraybox article header {height: 20.571429vw; background-size: auto 100%; top: 9.5vw; z-index: 10; width: 64.285714vw; margin-left: -32.142857vw;}
#bluraybox article img.jacket{top: 36.285714vw;}
#bluraybox article span {top: 36.285714vw;}
#bluraybox p.link {bottom: 39.571429vw;}
}
.bluraybox_chara01 {/*background: url(/img/pc/top/bluraybox/chara01.png) center top no-repeat;*/ height: 1016px; width: 294px; position: absolute; left: 0; bottom:1160px; z-index: 100;}
@media screen and (min-width:1401px){
.bluraybox_chara01 {height: 72.571429vw; width: 21vw; position: absolute; left: 0; bottom:82.857vw; background-size: cover;}
.bluraybox_chara01 img {width: 100%; height: auto;}
}


.pagetopwrap {position: relative; z-index: 200; min-width: 1400px; }
.pagetop{position:absolute;right:23px;bottom:-78px;z-index:1000;width:164px;height:200px;transform:translateY(0);transition:transform 0.5s ease-in-out;opacity:1; font-size: 0;}
.pagetop.show{transform:translateY(0);}
.pagetop.scrollup{transform:translateY(0);}
.pagetop.end{opacity:0;}
.pagetop::after{content:'';width:100%;height:100%;background:url(/img/pc/top/pagetop.png) left top no-repeat;position:absolute;left:0;top:0;z-index:-1;transition:0.3s;}
.pagetop.scrollup p{position:relative; z-index: 100;}
.pagetop a{position:relative;display:block;width:164px;height:200px;z-index:10;}
.pagetop a::after{content:'';width:100%;height:100%;background:url(/img/pc/top/pagetop.png) left -200px no-repeat;position:absolute;left:0;top:0;opacity:1; z-index: -1;}
.pagetop a::before{content:'';width:100%;height:100%;background:url(/img/pc/top/pagetop.png) left -400px no-repeat;position:absolute;left:0;top:0;opacity:0; z-index: -1;}
.pagetop:hover::after{opacity:0.5;transform:scale(0.9);}
.pagetop.scrollup::after{transform:scale(0);opacity:0;transition:0.2s;}
.pagetop.scrollup.pata a::after{opacity:0;}
.pagetop.scrollup.pata a::before{opacity:1;}


/**

    siteFooter
    
**************************************************************/    
#siteFooter {margin-top: -24px;}

.fire{
  width:16px;
  height:32px;
  position:absolute;
  background: url(/img/pc/top/kv/particle3.png);
  background-size: cover;
  border-radius: 100%;
  z-index:2;
  left: 0; bottom: 0;
  overflow: hidden;
  /*box-shadow: 0px 0px 3px red;*/
}
#firebg2 .fire{
  width:21px;
  height:21px;
  background: url(/img/pc/top/kv/particle.png);
}
#firebg3 .fire{
  width:16px;
  height:32px;
  background: url(/img/pc/top/kv/particle2.png);
}

#firebg1,
#firebg2,
#firebg3{opacity:0;}

#fire05 {}