@charset "utf-8";
/* opacity
-------------------------------------------------------------------------------*/
/* flex display
-------------------------------------------------------------------------------*/
/* a button
-------------------------------------------------------------------------------*/
/* hover
-------------------------------------------------------------------------------*/
/* a current
-------------------------------------------------------------------------------*/
/* setPosCenter
-------------------------------------------------------------------------------*/
/* clearfix
-------------------------------------------------------------------------------*/
/* easing
-------------------------------------------------------------------------------*/
/* content
-----------------------------------------------------------------------------*/
.sub-character { height: 600px; }
.sub-character .content-inner { height: 600px; margin-top: -300px; }
.sub-character .content-inner .character-area { width: 480px; height: 420px; display: inline-block; position: absolute; }
.sub-character .content-inner .character-area.left { width: 350px; left: 60px; top: 70px; }
.sub-character .content-inner .character-area.left .character-visual-area { width: 160px; }
.sub-character .content-inner .character-area.right { right: 50px; top: 70px; }
.sub-character .content-inner .character-area.right .character-visual-area { width: 280px; }
.sub-character .content-inner .character-name-area { position: absolute; *text-align: center; width: 200px; right: 0; }
.sub-character .content-inner .character-name-area.no-voice { top: 10px; }
.sub-character .content-inner .character-name-area.no-voice .character-line { margin-top: 13px; }
.sub-character .content-inner .character-name-area .character-name { text-align: center; }
.sub-character .content-inner .character-name-area .character-name.anim { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 0 ")"; filter: alpha(opacity=0); zoom: 1; }
.sub-character .content-inner .character-name-area .character-voice { text-align: center; margin: 8px auto; vertical-align: middle; position: relative; }
.sub-character .content-inner .character-name-area .character-voice.anim { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 0 ")"; filter: alpha(opacity=0); zoom: 1; }
.sub-character .content-inner .character-name-area .character-voice .over { cursor: pointer; position: absolute; top: -8px; left: 0; right: 0; display: none; }
.sub-character .content-inner .character-name-area .character-voice .over.anim { display: block; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 0 ")"; filter: alpha(opacity=0); zoom: 1; }
.sub-character .content-inner .character-name-area .character-voice .over.show { display: block; }
.sub-character .content-inner .character-name-area .character-voice .off { cursor: pointer; }
.sub-character .content-inner .character-name-area .character-voice .off.hide { display: none; }
.sub-character .content-inner .character-name-area .character-voice .no-audio { display: none; }
.sub-character .content-inner .character-name-area .character-voice .no-audio.show { display: block; }
.sub-character .content-inner .character-name-area .character-line { margin-bottom: 20px; text-align: center; }
.sub-character .content-inner .character-name-area .character-line.anim { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 0 ")"; filter: alpha(opacity=0); zoom: 1; }
.sub-character .content-inner .character-name-area .character-texts { height: 380px; margin-right: 2px; text-align: center; }
.sub-character .content-inner .character-name-area .character-texts .character-texts-anim { zoom: 1; }
.sub-character .content-inner .character-name-area .character-texts .character-texts-anim:before, .sub-character .content-inner .character-name-area .character-texts .character-texts-anim:after { display: block; height: 0; visibility: hidden; content: "\0020"; }
.sub-character .content-inner .character-name-area .character-texts .character-texts-anim:after { clear: both; }
.sub-character .content-inner .character-name-area .character-texts .character-texts-anim.anim { height: 0%; overflow: hidden; }
.sub-character .content-inner .character-name-area .character-texts .character-texts-anim p { display: inline-block; vertical-align: top; overflow: hidden; width: 22px; }
.sub-character .content-inner .character-name-area .character-texts .character-texts-anim p:first-child { margin-right: 0; }
.sub-character .content-inner .character-name-area .character-texts .character-texts-anim p.anim img { margin-left: -10px; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 0 ")"; filter: alpha(opacity=0); zoom: 1; }
.sub-character .content-inner .character-visual-area { position: absolute; left: 0; top: 50px; text-align: center; }
.sub-character .content-inner .character-visual-area.anim { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" 0 ")"; filter: alpha(opacity=0); zoom: 1; }
.sub-character .content-inner #detail-haruka { width: 400px; }
.sub-character .content-inner #detail-haruka .character-visual-area { top: 30px; }
.sub-character .content-inner #detail-fuyuhi { width: 430px; }
.sub-character .content-inner #detail-fuyuhi .character-visual-area { width: 240px; }
.sub-character .content-inner #detail-kunihiko { width: 470px; }
.sub-character .content-inner #detail-kunihiko .character-name-area { width: 220px; }
.sub-character .content-inner #detail-kunihiko .new-icon { position: absolute; top: -1px; right: 20px; }
.sub-character.last-area { height: 700px; }
.sub-character.last-area .content-inner { height: 700px; margin-top: -350px; }