@charset "utf-8";
/* opacity
-------------------------------------------------------------------------------*/
/* flex display
-------------------------------------------------------------------------------*/
/* a button
-------------------------------------------------------------------------------*/
/* hover
-------------------------------------------------------------------------------*/
/* a current
-------------------------------------------------------------------------------*/
/* setPosCenter
-------------------------------------------------------------------------------*/
/* clearfix
-------------------------------------------------------------------------------*/
/* easing
-------------------------------------------------------------------------------*/
/* header
-----------------------------------------------------------------------------*/
#header { z-index: 30; }

/* content
-----------------------------------------------------------------------------*/
#content { width: 100%; height: 100%; position: relative; }

#index { height: 1450px; }
#index .content-inner { height: 1450px; margin-top: -725px; }
#index .content-inner #character-title-area { position: absolute; top: 35px; right: 80px; }
#index .content-inner #character-lists { position: relative; }
#index .content-inner #character-lists ul { position: absolute; }
#index .content-inner #character-lists ul li { display: inline-block; position: relative; }
#index .content-inner #character-lists ul li a { display: block; width: 100%; height: 100%; }
#index .content-inner #character-lists ul .name { position: absolute; top: 0; right: 0; }
#index .content-inner #character-lists ul .visual { position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; }
#index .content-inner #character-lists ul .over { display: none; }
#index .content-inner #character-lists ul .over.anim { display: block; opacity: 0; }
#index .content-inner #character-lists ul .over.show { display: block; }
#index .content-inner #character-lists ul#primal-list { top: 100px; right: 240px; }
#index .content-inner #character-lists ul#primal-list li { width: 300px; height: 393px; margin-left: 0; }
#index .content-inner #character-lists ul#main-list { top: 470px; right: 70px; }
#index .content-inner #character-lists ul#main-list li { width: 250px; height: 350px; margin-left: 40px; }
#index .content-inner #character-lists ul#main-list2 { top: 780px; right: 370px; }
#index .content-inner #character-lists ul#main-list2 li { width: 290px; height: 350px; margin-left: 20px; }
#index .content-inner #character-lists ul#sub-list { top: 1100px; right: 140px; }
#index .content-inner #character-lists ul#sub-list.chara-2 { right: 100px; }
#index .content-inner #character-lists ul#sub-list.chara-2 li { margin-right: 160px; }
#index .content-inner #character-lists ul#sub-list li { width: 190px; height: 240px; margin-right: 40px; }
#index .content-inner #character-lists ul#sub-list li#list-kunihiko { width: 230px; }
#index .content-inner #character-lists ul#sub-list .visual { top: 50px; }
#index .content-inner #character-lists #list-miku .new-icon { position: absolute; top: 0px; right: -25px; }
#index .content-inner #character-lists #list-kunihiko .new-icon { position: absolute; top: 0px; right: -25px; }
#index .content-inner #character-lists #list-siragiku .new-icon { position: absolute; top: 0px; right: -25px; }
#index .arrow-area { height: 63px; position: fixed; bottom: 0; width: 70px; right: 0; left: 0; margin: 0 auto; z-index: 50; }

.video-filter { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url(../../../assets/images/shared/filter.png) repeat; z-index: 5; }

/* arrow
-----------------------------------------------------------------------------*/
.arrow-top-area, .arrow-bottom-area { width: 70px; height: 50px; right: 0; left: 0; margin: 0 auto; display: none; position: absolute; z-index: 50; }
.arrow-top-area.show, .arrow-bottom-area.show { display: block; }
.arrow-top-area.fixed, .arrow-bottom-area.fixed { position: fixed; }
.arrow-top-area.fixed .arrow-top, .arrow-top-area.fixed .arrow-bottom, .arrow-bottom-area.fixed .arrow-top, .arrow-bottom-area.fixed .arrow-bottom { position: relative; }

.arrow-top-area { top: 0; }

.arrow-bottom-area { bottom: 0; }

.arrow-top, .arrow-bottom { width: 70px; height: 34px; position: absolute; cursor: pointer; left: 0; display: none; z-index: 50; }
.arrow-top.show, .arrow-bottom.show { display: block; }

.arrow-top { top: 20px; background: url(../../../assets/images/shared/arrow-top.png) no-repeat; }

.arrow-bottom { bottom: 20px; background: url(../../../assets/images/shared/arrow-bottom.png) no-repeat; }

/* footer
-----------------------------------------------------------------------------*/