@charset "utf-8";

body {
    width: 100%;
    font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'MS PGothic', sans-serif;
}
#main {
    margin: 0 auto;
    width: 100%;
    min-width: 960px;
    position: relative;
    overflow: hidden;
}
#main #topWrap #top #bgm {
    position: absolute;
}
#bgm #bgm-switch {
    width: 124px;
    height: 30px;
    position: relative;
    background-image: url('../img/top/bg_switch.png');
}
#bgm #bgm-switch .on {
    left: 35px;
    background-position: 0 -30px;
}
#bgm #bgm-switch .off {
    left: 80px;
    background-position: -45px 0px;
}
#bgm #bgm-switch .on, #bgm #bgm-switch .off {
    position: absolute;
    top: 0;
}
#bgm #bgm-switch li {
    display: inline-block;
    display: block;
    width: 45px;
    height: 30px;
    background-image: url('../img/top/bgm_switch.png');
    background-repeat: no-repeat;
    text-indent: 100%;
    /*overflow: hidden;*/
    cursor: pointer;
}
#bgm #bgm-switch .on.current {
    background-position: 0 0;
}
#bgm #bgm-switch .off.current {
    background-position: -45px -30px;
    left: 80px;
}
#bgm #bgm-switch .on.current::before {
    content:" ";
    display:inline-block;
    width:30px;
    height:30px;
    background:url('../img/top/bgm_icon_play.png') no-repeat center center;
    background-size:contain;
    vertical-align:middle;
    position: absolute;
    top: 0;
    left: -25px;
}
#bgm #bgm-switch .off.current::before {
    content:" ";
    display:inline-block;
    width:30px;
    height:30px;
    background:url('../img/top/bgm_icon_stop.png') no-repeat center center;
    background-size:contain;
    vertical-align:middle;
    position: absolute;
    top: 0;
    left: -70px;
}
.js #bgm-attention {
    display: block;
}
#bgm-attention {
    background-color: rgba(0,0,0,0.8);
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 25;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
}
#bgm-attention .tabImg { display: none; }
#bgm-attention .for-pc, #bgm-attention .for-tb {
    display: none;
    position: absolute;
    width: 100%;
    top: 160px;
    text-align: center;
}
#bgm-attention .for-pc ul,
#bgm-attention .for-tb ul {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
}
#bgm-attention .for-pc ul li,
#bgm-attention .for-tb ul li {
    margin: 50px;
}
/* tab */
#tab #bgm-attention { background:url('../img/base_patrn.gif') repeat; }
#tab #bgm-attention .pcImg { display: none; }
#tab #bgm-attention .tabImg { display: block; }
/* WiiU */
#wiiu #bgm-attention { background:url('../img/base_patrn.gif') repeat; }
#wiiu #bgm-attention .for-tb ul li { display: inline-block; }


#main #topWrap #top .logo3ds {
    position: absolute;
    top: 10px;
    right: 20px;
}
#main #topWrap {
    background: url('../img/top/main_v.jpg') no-repeat center top #fff;
}
#main #topWrap #top {
    position: relative;
    margin: 0 auto;
    width: 960px;
    height: 891px;
}
#main #topWrap #top h1 {
    position: absolute;
    top: 25px;
    left: 10px;
}
#main #topWrap #top .mainTank.retina {
    position: absolute;
    top: 250px;
    right: -100px;
    z-index: 10;
}
#main #topWrap #top .panel {
    position: absolute;
    width: 348px;
    height: 248px;
    top: 35px;
    right: 0;
    text-align: center;
}
#main #topWrap #top .panel .ytWrap div img {
    width: 74%;
    height: auto;
}
#main #topWrap #top .panel .movTtl {
    position: absolute;
    z-index: 10;
    top: 20px;
    left: 0;
    right: 0;
}
#main #topWrap #top .panel .ytWrap {
    position: relative;
    z-index: 2;
    top: 42px;
}
#main #topWrap #top .panel .ytWrap iframe {
    width: 240px;
    height: 150px;
}
#main #topWrap #top .panel .frame {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
}
#main #topWrap #top .spec {
    position: absolute;
    bottom: 10px;
    left: 0;
    background: url('../img/top/bg_spec.png') no-repeat center top;
    width: 562px;
    height: 184px;
}
#main #topWrap #top .spec .icon {
    position: absolute;
    top: 15px;
    left: 30px;
}
#main #topWrap #top .spec .cero {
    position: absolute;
    bottom: 15px;
    left: 58px;
}
#main #topWrap #top .spec .amiibo {
    position: absolute;
    bottom: 15px;
    left: 77px;
}
#main #topWrap #top .spec .release {
    position: absolute;
    top: 43px;
    right: 39px;
}
#main #topWrap #top .spec .price {
    position: absolute;
    top: 85px;
    right: 137px;
}
#main #topWrap #top .spec .dl {
    position: absolute;
    top: 120px;
    right: 30px;
}
#main #topWrap #top .spec .info {
    position: absolute;
    top: 135px;
    right: 30px;
}
#main #topWrap #top a.comic {
    position: absolute;
    bottom: 14px;
    right: 10px;
    z-index: 11;
}
#main #topWrap #top a.comic .anime {
    animation: shake 2s linear infinite;
    -webkit-animation: shake 2s linear infinite;
}
#main #topWrap #top .comic .balloon {
    position: absolute;
    top: -90px;
    left: -40px;
}
#main #topWrap #top .comic .anime {
    position: absolute;
    bottom: -5px;
    right: -5px;
}
/* ------------------------------
    MENU NAVI
------------------------------ */
#main #navWrap {
    position: relative;
    height: 150px;
    z-index: 20;
    background: url('../img/bg_menu.png') repeat-x left top;
    box-shadow: 0px -2px 5px #666, 0px 0px 0px #666, 0px 2px 5px #666, 0px 0px 0px #666;
}
#main #navWrap #nav {
    width: 960px;
    height: 150px;
    box-sizing: border-box;
    margin: 0 auto;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    background: url('../img/line_menu.png') no-repeat center center;
    padding-top: 10px;
}
#main #navWrap #nav li {
    height: 126px;
    width: 233px;
}
#main #navWrap #nav li a {
    width: 100%;
    height: 100%;
    display: inline-block;
}
/* WiiU用 */
#wiiu #main #navWrap #nav li {
    float: left;
}
#wiiu #main #navWrap #nav li:first-child { margin-left: 11px; }


/* ------------------------------
    #article
------------------------------ */
#main #article {
    background: url('../img/camoufla_ptrn.gif') repeat left top #fff;
    text-align: center;
}
#main #article #secAbout,
#main #article #secGamemode,
#main #article #secTanks {
    background: url('../img/cnts_bg_top.png') repeat-x left top;
    -webkit-animation: bgscroll 20s linear infinite;
    animation: bgscroll 20s linear infinite;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    overflow:hidden
}
#main #article #secChara {
    background: url('../img/cnts_bg_top.png') repeat-x left top;
    -webkit-animation: bgscroll 20s linear infinite;
    animation: bgscroll 20s linear infinite;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    overflow:hidden
}
#main #article h2 {
    padding: 43px 0 57px;
}
@-webkit-keyframes bgscroll {
 0% {background-position: 0 0;}
 100% {background-position: -1280px 0;}
}
@keyframes bgscroll {
 0% {background-position: 0 0;}
 100% {background-position: -1280px 0;}
}
@-webkit-keyframes bgscroll2 {
 0% {background-position: 0 0;}
 100% {background-position: 1280px 0;}
}
@keyframes bgscroll2 {
 0% {background-position: 0 0;}
 100% {background-position: 1280px 0;}
}
#main #article .tankAnime {
    position: absolute;
    top: 112px;
    left: 0;
    z-index: 2;
}
#main #article .tankAnime.re {
    position: absolute;
    top: 112px;
    right: 0;
    left: inherit;
    z-index: 2;
    -webkit-transform: scale(-1, 1);
        -ms-transform: scale(-1, 1);
            transform: scale(-1, 1);
}
#main #article .tankAnime .tankMov {
    -webkit-animation: tank 1s linear infinite;
    animation: tank 1s linear infinite;
}
#main #article .tankAnime .wheel {
    position: absolute;
    bottom: 7px;
    left: 70px;
    z-index: 3;
    -webkit-animation: rotateWheel 2s linear infinite;
    animation: rotateWheel 2s linear infinite;
}
#main #article .tankAnime .wheel2 {
    position: absolute;
    bottom: 13px;
    left: 8px;
    z-index: 3;
    -webkit-animation: rotateWheel 1.5s linear infinite;
    animation: rotateWheel 1.5s linear infinite;
}
#main #article .tankAnime .bomb {
    position: absolute;
    top: -70px;
    right: -100px;
    -webkit-animation: scale 6s linear infinite;
    animation: scale 6s linear infinite;
}
@-webkit-keyframes rotateWheel {
 0% { -webkit-transform: rotate(0); transform: rotate(0); }
 100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}
@keyframes rotateWheel {
 0% { -webkit-transform: rotate(0); transform: rotate(0); }
 100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}
@-webkit-keyframes tank {
 0% { -webkit-transform: rotate(0); transform: rotate(0); }
 20% { -webkit-transform: rotate(-3deg); transform: rotate(-3deg); }
 40% { -webkit-transform: rotate(0); transform: rotate(0); }
 60% { -webkit-transform: rotate(-2deg); transform: rotate(-2deg); }
 100% { -webkit-transform: rotate(0); transform: rotate(0); }
}
@keyframes tank {
 0% { -webkit-transform: rotate(0); transform: rotate(0); }
 20% { -webkit-transform: rotate(-3deg); transform: rotate(-3deg); }
 40% { -webkit-transform: rotate(0); transform: rotate(0); }
 60% { -webkit-transform: rotate(-2deg); transform: rotate(-2deg); }
 100% { -webkit-transform: rotate(0); transform: rotate(0); }
}
@-webkit-keyframes scale {
 0% { -webkit-transform: scale(0); transform: scale(0); }
 20% { -webkit-transform: scale(-3deg); transform: scale(-3deg); }
 40% { -webkit-transform: scale(0); transform: scale(0); }
 60% { -webkit-transform: scale(-2deg); transform: scale(-2deg); }
 100% { -webkit-transform: scale(0); transform: scale(0); }
}
@keyframes scale {
    0% { opacity: 0; }
    50% { opacity: 0; }
    51% { opacity: 1; }
    54% { opacity: 0; }
    58% { opacity: 0; }
    59% { opacity: 1; }
    62% { opacity: 0; }
    100% { opacity: 0; }
}

/* ------------------------------
    ABOUT
------------------------------ */
/*#main #article #secAbout {
    background: url('../img/cnts_bg_top.png') repeat-x left top;
}*/
#main #article #secAbout #about {
    position: relative;
    height: 1038px;
    width: 960px;
    margin: 0 auto;
}
#main #article #secAbout #about .innerBox {
    position: relative;
    height: 640px;
}
#main #article #secAbout #about .innerBox .balloon {
    position: absolute;
    top: -40px;
    left: -55px;
    z-index: 2;
}
#main #article #secAbout #about .innerBox .naomi {
    position: absolute;
    top: -85px;
    right: -30px;
    z-index: 3;
}
#main #article #secAbout #about .innerBox .txt {
    position: absolute;
    top: -130px;
    right: 50px;
    z-index: 4;
}
#main #article #secAbout #about .innerBox .sshot {
    position: absolute;
    top: 260px;
    left: 10px;
    z-index: 1;
}
#main #article #secAbout #about .commander {
    position: relative;
    top: -35px;
    z-index: 2;
}
#main #article #secAbout #about .commander .voice {
    position: absolute;
    top: 150px;
    right: 25px;
}
/* wiiu */
#wiiu #main #article #secAbout #about .commander .voice { display: none; }

/* ------------------------------
    GAME MODE
------------------------------ */
#main #article #secGamemode {
    overflow: hidden;
}
#main #article #secGamemode #gamemode {
    position: relative;
    height: 1073px;
    width: 960px;
    margin: 0 auto;
}
#main #article #secGamemode #gamemode .slideWrap {
    position: relative;
    overflow-x: hidden;
    overflow-y: hidden;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 940px;
    height: 883px;
    margin: 0 auto;
}
input[type=radio] {
    display: none;
}
#mode1 {
    position: absolute;
    left: 0;
    top: 0;
}
#mode2 {
    position: absolute;
    left: 940px;
    top: 0;
}
#mode3 {
    position: absolute;
    left: 1880px;
    top: 0;
}
#mode4 {
    position: absolute;
    left: 2820px;
    top: 0;
}
#mode5 {
    position: absolute;
    left: 3760px;
    top: 0;
}
.slideArea {
    position: relative;
    width: 4700px;
    left: 0;
    top: 0;
    transition: all .3s ease-in-out;
}
#slider1:checked ~ .slideArea {
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0);
}
#slider2:checked ~ .slideArea {
    -webkit-transform: translateX(-940px);
        -ms-transform: translateX(-940px);
            transform: translateX(-940px);
}
#slider3:checked ~ .slideArea {
    -webkit-transform: translateX(-1880px);
        -ms-transform: translateX(-1880px);
            transform: translateX(-1880px);
}
#slider4:checked ~ .slideArea {
    -webkit-transform: translateX(-2820px);
        -ms-transform: translateX(-2820px);
            transform: translateX(-2820px);
}
#slider5:checked ~ .slideArea {
    -webkit-transform: translateX(-3760px);
        -ms-transform: translateX(-3760px);
            transform: translateX(-3760px);
}

#main #article #secGamemode #gamemode .slideArea .tag {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;-ms-flex-pack: justify;justify-content: space-between;
    margin: 20px auto 25px;
    width: 940px;
}
#main #article #secGamemode #gamemode .slideArea .tab {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;    -ms-flex-pack: center;    justify-content: center;
}
#main #article #secGamemode #gamemode .slideArea .tab label,
#main #article #secGamemode #gamemode .slideArea .tag label { display: inline-block; }
#main #article #secGamemode #gamemode .slideArea .tab label li {
    padding: 1em;
    width: 250px;
    height: 30px;
}
#main #article #secGamemode #gamemode .slideArea .slideBox .trailerNav {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-around;
        -ms-flex-pack: distribute;
            justify-content: space-around;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
}
#main #article #secGamemode #gamemode .slideArea .slideBox .trailerNav .panel {
    position: relative;
    width: 670px;
    height: 450px;
}
#main #article #secGamemode #gamemode .slideArea .slideBox .trailerNav .panel .ytWrap {
    position: relative;
    z-index: 2;
    top: 40px;
}
#main #article #secGamemode #gamemode .slideArea .slideBox .trailerNav .panel .ytWrap div img {
    width: 74%;
    height: auto;
}
#main #article #secGamemode #gamemode .slideArea .slideBox .trailerNav .panel .ytWrap a {
    display: block;
    width: 480px;
    height: 280px;
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
}
#main #article #secGamemode #gamemode .slideArea .slideBox .trailerNav .panel .ytWrap iframe {
    width: 480px;
}
#main #article #secGamemode #gamemode .slideArea .slideBox .trailerNav .panel .frame {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
}
#main #article #secGamemode #gamemode .slideArea .slideBox .trailerNav .panel .frame::after {
    content:" ";
    display:inline-block;
    width:80px;
    height:60px;
    background:url('../img/ytplayBtn.png') no-repeat center center;
    background-size:contain;
    vertical-align:middle;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}
#main #article #secGamemode #gamemode .slideArea .slideBox .trailerNav .next {
    -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
            transform: rotate(180deg);
}
#main #article #secGamemode #gamemode .slideArea .slideBox .txtBox {
    position: relative;
    height: 222px;
    z-index: 4;
}
/* WiiU */
#wiiu #main #article #secGamemode #gamemode .slideArea .slideBox .trailerNav { position: relative; }
#wiiu #main #article #secGamemode #gamemode .slideArea .slideBox .trailerNav .panel { margin: 0 auto; }
#wiiu #main #article #secGamemode #gamemode .slideArea .slideBox .trailerNav label:nth-child(1) { position: absolute; top: 50%; left: 0; }
#wiiu #main #article #secGamemode #gamemode .slideArea .slideBox .trailerNav label:nth-child(3) { position: absolute; top: 50%; right: 0; }



/*===============================*/
#mode1 .commander {
    position: absolute;
    bottom: -16px;
    left: 0;
    z-index: 3;
}
#mode1 .eye {
    position: absolute;
    bottom: 56px;
    left: 31px;
    z-index: 4;
}
#mode1 .balloon {
    position: absolute;
    top: -100px;
    right: 0;
    z-index: 2;
}
#mode2 .commander {
    position: absolute;
    bottom: -16px;
    right: 20px;
    z-index: 3;
}
#mode2 .eye {
    position: absolute;
    bottom: 56px;
    right: 112px;
    z-index: 4;
}
#mode2 .balloon {
    position: absolute;
    top: -90px;
    left: 20px;
    z-index: 2;
}
#mode3 .commander {
    position: absolute;
    bottom: -16px;
    right: 20px;
    z-index: 3;
}
#mode3 .eye {
    position: absolute;
    bottom: 56px;
    right: 112px;
    z-index: 4;
}
#mode3 .balloon {
    position: absolute;
    top: -85px;
    left: 15px;
    z-index: 2;
}
#mode4 .commander {
    position: absolute;
    bottom: 0;
    left: 15px;
    z-index: 3;
}
#mode4 .balloon {
    position: absolute;
    top: -90px;
    right: -20px;
    z-index: 2;
}
#mode5 .commander {
    position: absolute;
    bottom: -16px;
    left: 20px;
    z-index: 3;
}
#mode5 .eye {
    position: absolute;
    bottom: 56px;
    left: 51px;
    z-index: 4;
}
#mode5 .balloon {
    position: absolute;
    top: -95px;
    right: -35px;
    z-index: 2;
}

/* ------------------------------
    TANKS
------------------------------ */
#main #article #secTanks #tanks {
    position: relative;
    height: 1240px;
    width: 960px;
    margin: 0 auto;
}
#main #article #secTanks #tanks .tankBox {
    width: 944px;
    height: 1008px;
    margin: 20px auto 0;
    background: url('../img/tanks/bg_tanks.png') no-repeat center top;
}
#main #article #secTanks #tanks .tankBox .tankList {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding: 10px;
    -webkit-align-items: flex-end;
        -ms-flex-align: end;
            align-items: flex-end;
}
#main #article #secTanks #tanks .tankBox .tankList li {
    margin-bottom: 17px;
}
#tanks .tankBox .tankList .tank03,
#tanks .tankBox .tankList .tank06 {
    margin-left: 20px;
}
#tanks .tankBox .tankList .tank05,
#tanks .tankBox .tankList .tank10 {
    margin-right: 20px;
}
#tanks .tankBox .tankList .tank11 {
    margin-left: 10px;
}
#tanks .tankBox .tankList .tank14 {
    margin-right: 10px;
}

/* WiiU */
#wiiu #main #article #secTanks #tanks .tankBox .tankList {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#wiiu #main #article #secTanks #tanks .tankBox .tankList li {
    position: absolute;
    height: auto;
    margin-bottom: 1.7%
}
#wiiu #main #article #secTanks #tanks .tankBox .tankList li img {
    width: 100%;
    height: auto;
}
#wiiu #main #article #secTanks #tanks .tankBox .tankList li:first-child { width: 30%; top: 1%; left: 1%; }
#wiiu #main #article #secTanks #tanks .tankBox .tankList li.tank01 { width: 31.875%; top: 3%; left: 33%; }
#wiiu #main #article #secTanks #tanks .tankBox .tankList li.tank02 { width: 27.1875%; top: 3.4%; left: 69%; }
#wiiu #main #article #secTanks #tanks .tankBox .tankList li.tank03 { width: 25.625%; top: 27%; left: 5%; }
#wiiu #main #article #secTanks #tanks .tankBox .tankList li.tank04 { width: 29.0625%; top: 28%; left: 35%; }
#wiiu #main #article #secTanks #tanks .tankBox .tankList li.tank05 { width: 26.5625%; top: 26%; left: 69%; }
#wiiu #main #article #secTanks #tanks .tankBox .tankList li.tank06 { width: 13.4375%; top: 48%; left: 5%; }
#wiiu #main #article #secTanks #tanks .tankBox .tankList li.tank07 { width: 13.4375%; top: 48.8%; left: 22%; }
#wiiu #main #article #secTanks #tanks .tankBox .tankList li.tank08 { width: 15.625%; top: 49.6%; left: 39%; }
#wiiu #main #article #secTanks #tanks .tankBox .tankList li.tank09 { width: 14.0625%; top: 50%; left: 60%; }
#wiiu #main #article #secTanks #tanks .tankBox .tankList li.tank10 { width: 17.8125%; top: 49.6%; left: 78%; }
#wiiu #main #article #secTanks #tanks .tankBox .tankList li.tank11 { width: 19.6875%; top: 64%; left: 3%; }
#wiiu #main #article #secTanks #tanks .tankBox .tankList li.tank12 { width: 23.75%; top: 64.3%; left: 25%; }
#wiiu #main #article #secTanks #tanks .tankBox .tankList li.tank13 { width: 17.5%; top: 64.5%; left: 52.5%; }
#wiiu #main #article #secTanks #tanks .tankBox .tankList li.tank14 { width: 23.125%; top: 64%; left: 73%; }
#wiiu #main #article #secTanks #tanks .tankBox .tankList li.tank15 { width: 22.8125%; top: 82%; left: 2%; }
#wiiu #main #article #secTanks #tanks .tankBox .tankList li.tank16 { width: 24.0625%; top: 81.7%; left: 27%; }
#wiiu #main #article #secTanks #tanks .tankBox .tankList li.tank17 { width: 17.8125%; top: 82%; left: 54%; }
#wiiu #main #article #secTanks #tanks .tankBox .tankList li.tank18 { width: 22.5%; top: 83%; left: 74%; }

/* ------------------------------
    CHARACTERS
------------------------------ */
#main #article #secChara #chara {
    position: relative;
    height: 880px;
    width: 960px;
    margin: 0 auto;
}
#main #article #secChara #chara .lead {
    margin: 20px auto 0;
}
#main #article #secChara #chara .charaBox {
    width: 1077px;
    height: 641px;
    margin: -60px 0 0 -66px;
    background: url('../img/characters/bg_chara.png') no-repeat center top;
}
#main #article #secChara #chara .charaBox .charaList {
    position: relative;
}
#chara .charaBox .charaList .chara01 { position: absolute; top: 272px; left: 472px; z-index: 13; }
#chara .charaBox .charaList .chara02 { position: absolute; top: 365px; left: 116px; z-index: 12; }
#chara .charaBox .charaList .chara03 { position: absolute; top: 397px; left: 611px; z-index: 11; }
#chara .charaBox .charaList .chara04 { position: absolute; top: 255px; left: 368px; z-index: 10; }
#chara .charaBox .charaList .chara05 { position: absolute; top: 298px; left: 794px; z-index: 9; }
#chara .charaBox .charaList .chara06 { position: absolute; top: 263px; left: 173px; z-index: 8; }
#chara .charaBox .charaList .chara07 { position: absolute; top: 218px; left: 559px; z-index: 7; }
#chara .charaBox .charaList .chara08 { position: absolute; top: 146px; left: 659px; z-index: 6; }
#chara .charaBox .charaList .chara09 { position: absolute; top: 108px; left: 850px; z-index: 5; }
#chara .charaBox .charaList .chara10 { position: absolute; top: 111px; left: 722px; z-index: 4; }
#chara .charaBox .charaList .chara11 { position: absolute; top: 174px; left: 234px; z-index: 3; }
#chara .charaBox .charaList .chara12 { position: absolute; top: 121px; left: 215px; z-index: 2; }
#chara .charaBox .charaList .chara13 { position: absolute; top: 8px; left: 10px; z-index: 1; }

.charaModal {
    position: relative;
    width: 688px;
    height: 372px;
    margin: 0 auto;
}
.charaModal .mfp-close {
    color: #FFF;
    right: -6px;
    text-align: right;
    padding-right: 6px;
    width: 100%;
    margin-top: -45px;
}

#chara01 { background: url('../img/characters/bg_chara01.png')  no-repeat center top; }
#chara02 { background: url('../img/characters/bg_chara02.png')  no-repeat center top; }
#chara03 { background: url('../img/characters/bg_chara03.png')  no-repeat center top; }
#chara04 { background: url('../img/characters/bg_chara04.png')  no-repeat center top; }
#chara05 { background: url('../img/characters/bg_chara05.png')  no-repeat center top; }
#chara06 { background: url('../img/characters/bg_chara06.png')  no-repeat center top; }
#chara07 { background: url('../img/characters/bg_chara07.png')  no-repeat center top; }
#chara08 { background: url('../img/characters/bg_chara08.png')  no-repeat center top; }
#chara09 { background: url('../img/characters/bg_chara09.png')  no-repeat center top; }
#chara10 { background: url('../img/characters/bg_chara10.png')  no-repeat center top; }
#chara11 { background: url('../img/characters/bg_chara11.png')  no-repeat center top; }
#chara12 { background: url('../img/characters/bg_chara12.png')  no-repeat center top; }
#chara13 { background: url('../img/characters/bg_chara13.png')  no-repeat center top; }
#chara01.charaModal .charaImg { position: absolute; top: -55px; left: 20px; }
#chara01.charaModal .charaTxt { position: absolute; top: -20px; left: -10px; }
#chara02.charaModal .charaImg { position: absolute; top: 40px; left: -70px; }
#chara02.charaModal .charaTxt { position: absolute; top: 120px; left: 170px; }
#chara03.charaModal .charaImg { position: absolute; top: 50px; left: 55px; }
#chara03.charaModal .charaTxt { position: absolute; top: 50px; left: 5px; }
#chara04.charaModal .charaImg { position: absolute; top: -45px; left: 35px; }
#chara04.charaModal .charaTxt { position: absolute; top: -15px; left: 0; }
#chara05.charaModal .charaImg { position: absolute; top: -45px; left: -35px; }
#chara05.charaModal .charaTxt { position: absolute; top: -20px; left: -15px; }
#chara06.charaModal .charaImg { position: absolute; top: -45px; left: -25px; }
#chara06.charaModal .charaTxt { position: absolute; top: -30px; left: -5px; }
#chara07.charaModal .charaImg { position: absolute; top: -60px; left: 40px; }
#chara07.charaModal .charaTxt { position: absolute; top: -30px; left: 0; }
#chara08.charaModal .charaImg { position: absolute; top: -95px; left: 35px; }
#chara08.charaModal .charaTxt { position: absolute; top: -25px; left: 0; }
#chara09.charaModal .charaImg { position: absolute; top: -70px; left: 20px; }
#chara09.charaModal .charaTxt { position: absolute; top: -25px; left: 0; }
#chara10.charaModal .charaImg { position: absolute; top: -60px; left: 5px; }
#chara10.charaModal .charaTxt { position: absolute; top: -25px; left: 0; }
#chara11.charaModal .charaImg { position: absolute; top: 0; left: -110px; }
#chara11.charaModal .charaTxt { position: absolute; top: -10px; left: 150px; }
#chara12.charaModal .charaImg { position: absolute; top: 25px; left: -60px; }
#chara12.charaModal .charaTxt { position: absolute; top: -15px; left: 170px; }
#chara13.charaModal .charaImg { position: absolute; top: -150px; left: -100px; }
#chara13.charaModal .charaTxt { position: absolute; top: -15px; left: 165px; }
.charaModal .charaImg {
    z-index: 2;
}
.charaModal .charaTxt {
    z-index: 3;
}
.charaModal .charaInfo {
    position: absolute;
    top: 0;
    right: 0;
    width: 688px;
    height: 370px;
    padding-left: 225px;
    box-sizing: border-box;
}
.charaModal .charaInfo .name {
    position: relative;
    top: 30px;
    right: 0;
    z-index: 4;
}
.charaModal .charaInfo .lead {
    position: relative;
    top: 40px;
    right: -10px;
    z-index: 4;
}
.charaModal .charaInfo .tag {
    position: absolute;
    top: -5px;
    right: -20px;
    z-index: 5;
}
.charaModal .charaInfo .blow {
    position: absolute;
    top: 170px;
    right: 325px;
}
.charaModal .charaInfo .btnVoice {
    position: absolute;
    top: 280px;
    right: 322px;
    z-index: 30;
}
.charaModal .charaInfo .panel {
    position: absolute;
    width: 287px;
    height: 181px;
    top: 162px;
    right: 28px;
    margin: 0 auto;
    text-align: center;
}
.charaModal .charaInfo .panel .ytWrap {
    position: relative;
    z-index: 2;
    top: 12px;
    left: 12px;
    text-align: center;
    width: 260px;
    height: 156px;
    border-radius: 8px;
    overflow: hidden;
}
.charaModal .charaInfo .panel .ytWrap.soon {
    background: url('../img/characters/coming_soon.png') no-repeat center center;
}
.charaModal .charaInfo .panel .ytWrap > div {
    width: 260px;
    height: 156px;
    margin: 0 auto;
    border-radius: 8px;
    overflow: hidden;
}
.charaModal .charaInfo .panel .ytWrap > div span::after {
    content:" ";
    display:inline-block;
    width:60px;
    height:50px;
    background:url('../img/ytplayBtn.png') no-repeat center center;
    background-size:contain;
    vertical-align:middle;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}
.charaModal .charaInfo .panel .ytWrap > div img {
    width: 100%;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
}
.charaModal .charaInfo .panel .ytWrap iframe {
    width: 260px;
    height: 156px;
    border-radius: 8px;
}
.charaModal .charaInfo .panel .frame {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
/* wiiu */
#wiiu .charaModal .charaInfo .btnVoice { display: none; }

/* ------------------------------
    MODAL
------------------------------ */
.mfp-arrow.mfp-arrow-right {
    background: url('../img/gamemode/arrw_off.png') no-repeat center center;
    -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
            transform: rotate(180deg);
}
.mfp-arrow.mfp-arrow-left {
    background: url('../img/gamemode/arrw_off.png') no-repeat center center;
}
.mfp-first .mfp-arrow-left,
.mfp-last .mfp-arrow-right { display: none; }

/* ------------------------------
    FOOTER
------------------------------ */
.pageTop {
    position: fixed;
    bottom: 10px;
    right: 0;
    z-index: 1000;
    margin: 0 auto;
    padding-right: 20px;
    box-sizing: border-box;
}
#sns {
    width: 960px;
    margin: 0 auto;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: flex-end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    box-sizing: border-box;
}
@media all and (max-width: 960px) {
    #sns {
        padding-right: 60px;
    }
}
#sns li {
    width: 50px;
    margin: 0 15px 15px 0;
}
#sns li img {
    width: 100%;
    height: auto;
}
#footer {
    background: url('../img/bg_footer.png') repeat-x left top;
    padding: 30px;
    font-size: 16px;
    min-width: 960px;
    box-sizing: border-box;
}
#footer ul {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
}
#footer ul li {
    padding: 0 1em;
}
#footer ul li:first-child {
    border-right: 1px solid #666;
    padding-left: 0;
}
#footer .copyR {
    text-align: right;
    margin-top: -10px;
}
/* WiiU */
#wiiu #sns { text-align: right; }
#wiiu #sns li { display: inline-block; }
#wiiu #footer ul li { display: inline-block; }


/* animation */
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
@-webkit-keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  50% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  52% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }
  54% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }
  56% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }
  58% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }
  60% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  50% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  52% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }
  54% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }
  56% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }
  58% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }
  60% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}
@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
  animation-duration: 0.6s;
  -webkit-animation-duration: 0.6s;
}
@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
  animation-duration: 0.6s;
  -webkit-animation-duration: 0.6s;
}
@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
  animation-duration: 0.6s;
  -webkit-animation-duration: 0.6s;
}