/* reset css */
a, abbr, acronym, address, applet, article, aside, audio,
b, big, blockquote, body, caption, canvas, center, cite, code,
dd, del, details, dfn, dialog, div, dl, dt, em, embed,
fieldset, figcaption, figure, form, footer,
header, hgroup, h1, h2, h3, h4, h5, h6, html,
i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav,
object, ol, output, p, pre, q, ruby,
s, samp, section, main, small, span, strike, strong, sub, summary, sup,
tt, table, tbody, textarea, tfoot, thead, time, tr, th, td,
u, ul, var, video {
  font-family: inherit;
  font-size: 100%;
  font-weight: inherit;
  font-style: inherit;
  vertical-align: baseline;
  white-space: normal;
  text-align: left;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
}

article, aside, details, figcaption, figure, footer, header, hgroup,
menu, nav, section, main {
  display: block;
}

ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}


#aom {
  width:100%;
  background-image: url("../images/background.png");
  background-position:center 99px;
  position:relative;
}

#aom *,
.mfp-wrap * {
  box-sizing: border-box;
}


#aom .content {
  width:100%;
  min-width:1000px;
  margin:0 auto 50px;
  position:relative;
  overflow: hidden;
}

#aom .btn:hover,
.mfp-wrap .btn:hover {
  opacity: 0.7;
}

#aom .btn_cs {
  font-size: 0;
}

#aom .btn_cs:hover {
  opacity:1 !important;
}

#main {

}

#main .title {
  width:180px;
  height:59px;
  position:absolute;
  top: 25px;
  left:25px;
  z-index: 1;
}

#main .title img {
  width:100%;
}

#main .title.ended {
  width:800px;
  height:264px;
  position:absolute;
  top: 75px;
  left:0px;
  right:0px;
  bottom:auto;
  margin:auto;
  z-index: 1;
  -webkit-animation: animation 1200ms linear both;
  animation: animation 1200ms linear both;
}

@-webkit-keyframes animation {
  0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -500, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -500, 0, 1); }
  3.6% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -322.856, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -322.856, 0, 1); }
  7.21% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -171.983, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -171.983, 0, 1); }
  10.81% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -63.929, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -63.929, 0, 1); }
  14.31% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.381, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.381, 0, 1); }
  18.12% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -34.02, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -34.02, 0, 1); }
  21.92% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -42.486, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -42.486, 0, 1); }
  32.43% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -18.372, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -18.372, 0, 1); }
  42.94% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.067, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.067, 0, 1); }
  50.55% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -2.511, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -2.511, 0, 1); }
  71.47% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.002, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.002, 0, 1); }
  79.08% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.148, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.148, 0, 1); }
  100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}

@keyframes animation {
  0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -500, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -500, 0, 1); }
  3.6% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -322.856, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -322.856, 0, 1); }
  7.21% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -171.983, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -171.983, 0, 1); }
  10.81% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -63.929, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -63.929, 0, 1); }
  14.31% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.381, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.381, 0, 1); }
  18.12% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -34.02, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -34.02, 0, 1); }
  21.92% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -42.486, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -42.486, 0, 1); }
  32.43% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -18.372, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -18.372, 0, 1); }
  42.94% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.067, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.067, 0, 1); }
  50.55% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -2.511, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -2.511, 0, 1); }
  71.47% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.002, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.002, 0, 1); }
  79.08% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.148, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.148, 0, 1); }
  100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}




#main .volume_control {
  position:absolute;
  width: 185px;
  height: 60px;
  background-image: url("../images/volume.png");
  background-position: left top;
  top: 25px;
/*  left: calc(50% + 390px);*/
  right: 25px;
  z-index: 2;
}

#main .volume_control.volume_on {
  background-position: left bottom;
}

#main .volume_control a {
  display:block;
  width: 100%;
  height: 100%;
}

#main .movie_container {
  width:100%;
  height:1130px;
  background-position:top center;
  background-color: #000;
  text-align: center;
  position:relative;
  z-index: 0;
}

#main .movie_container video {
  width:100%;
  max-width:1800px;
  min-width:1500px;
  margin:0 auto;
}

#main .movie_container .still_image {
  width:100%;
  height:845px;
  background-image: url("../images/main_still_image.png");
  background-size:cover;
  background-position:center center;
  position:absolute;
  top:0;
  left:0;
  display:none;
}

#main .main_description {
  width:100%;
  height:633px;
  background-image: url("../images/main_bottom.png");
  background-position:top center;
  background-repeat:no-repeat;
  position:absolute;
  top: 497px;
}

#main .main_description p {
  position:absolute;
  width: 811px;
  height: 171px;
  background-image: url("../images/main_text.png");
  top: 420px;
  left:0;
  right:0;
  margin:auto;
  font-size: 0;
}

#aom .content .charactor {
  z-index: 2;
  position:absolute;
}

#aom .content .charactor .btn {
  position:absolute;
  width: 146px;
  height: 72px;
}

#aom .content .charactor .btn a {
  display:block;
  width: 100%;
  height: 100%;
  font-size: 0;
}

#aom .content .description {
  z-index: 1;
  position:absolute;
}

#aom .content .description .title,
#aom .content .description .text {
  font-size: 0;
}

#aom .content .charactor_bg {
  z-index: 0;
  position:absolute;
}


/* prologue */

#prologue {
  height: 840px;
}

#prologue.content {
  margin-bottom: 30px;
}

#prologue.content .char_franchise_force {
  width: 993px;
  height: 663px;
  background-image: url("../images/franchise_force.png");
  top:142px;
  right:calc(50% - 150px);
}

#prologue.content .char_franchise_force .char01 {
  top: 172px;
  left: 691px;
  background-image: url("../images/franchise_force_btn_char01.png");
}

#prologue.content .char_franchise_force .char02 {
  top: 258px;
  left: 521px;
  background-image: url("../images/franchise_force_btn_char02.png");
}

#prologue.content .char_franchise_force .char03 {
  top: 177px;
  left: 350px;
  background-image: url("../images/franchise_force_btn_char03.png");
}

#prologue.content .char_franchise_force .btn_detail {
  width: 134px;
  height: 114px;
  position:absolute;
  right: 0px;
  bottom: 0px;
  background-image: url("../images/btn_detail_left.png");
}

#prologue.content .desc_prologue {
  width: 1197px;
  height: 682px;
  background-image: url("../images/prologue_bg.png");
  top:20px;
  left: calc(50% - 356px);
}

#prologue.content .desc_prologue .title {
  width: 437px;
  height: 57px;
  background-image: url("../images/prologue_title.png");
  position:relative;
  top:2px;
  left:425px;
}

#prologue.content .desc_prologue .text {
  width: 444px;
  height: 216px;
  background-image: url("../images/prologue_text.png");
  position:relative;
  top:25px;
  left:425px;
}

#prologue.content .bg_franchise_force {
  width: 995px;
  height: 649px;
  background-image: url("../images/franchise_force_bg.png");
  top:185px;
  right:calc(50% - 190px);
}


/* mayhem */

#mayhem {
  height: 860px;
}

#mayhem.content .char_bombshells {
  width: 993px;
  height: 687px;
  background-image: url("../images/bombshells.png");
  top:142px;
  left:calc(50% - 155px);
}

#mayhem.content .char_bombshells .char01 {
  top: 241px;
  left: 186px;
  background-image: url("../images/bombshells_btn_char01.png");
}

#mayhem.content .char_bombshells .char02 {
  top: 331px;
  left: 355px;
  background-image: url("../images/bombshells_btn_char02.png");
}

#mayhem.content .char_bombshells .char03 {
  top: 186px;
  left: 504px;
  background-image: url("../images/bombshells_btn_char03.png");
}

#mayhem.content .char_bombshells .btn_detail {
  width: 134px;
  height: 114px;
  position:absolute;
  left: 0px;
  bottom: 0px;
  background-image: url("../images/btn_detail_right.png");
}

#mayhem.content .char_bombshells .btn_detail.btn_cs {
  background-image: url("../images/btn_detail_right_cs.png");
}

#mayhem.content .desc_mayhem {
  width: 1197px;
  height: 682px;
  background-image: url("../images/mayhem_bg.png");
  top:42px;
  right: calc(50% - 336px);
}

#mayhem.content .desc_mayhem .title {
  width: 456px;
  height: 55px;
  background-image: url("../images/mayhem_title.png");
  position:relative;
  top:3px;
  left:365px;
}

#mayhem.content .desc_mayhem .text {
  width: 434px;
  height: 348px;
  background-image: url("../images/mayhem_text.png");
  position:relative;
  top:25px;
  left:350px;
}

#mayhem.content .bg_bombshells {
  width: 995px;
  height: 649px;
  background-image: url("../images/bombshells_bg.png");
  top:205px;
  left:calc(50% - 190px);
}


/* legion */

#legion.content {
  height: 850px;
  margin-bottom: 25px;
}

#legion.content .char_firing_squad {
  width: 1127px;
  height: 647px;
  background-image: url("../images/firing_squad.png");
  top:162px;
  right:calc(50% - 288px);
}

#legion.content .char_firing_squad .char01 {
  top: 314px;
  left: 482px;
  background-image: url("../images/firing_squad_btn_char01.png");
}

#legion.content .char_firing_squad .char02 {
  top: 129px;
  left: 550px;
  background-image: url("../images/firing_squad_btn_char02.png");
}

#legion.content .char_firing_squad .char03 {
  top: 290px;
  left: 720px;
  background-image: url("../images/firing_squad_btn_char03.png");
}

#legion.content .char_firing_squad .btn_detail {
  width: 134px;
  height: 114px;
  position:absolute;
  right: 134px;
  bottom: 0px;
  background-image: url("../images/btn_detail_left.png");
}

#legion.content .char_firing_squad .btn_detail.btn_cs {
  background-image: url("../images/btn_detail_left_cs.png");
}

#legion.content .desc_legion {
  width: 1197px;
  height: 682px;
  background-image: url("../images/legion_bg.png");
  top:20px;
  left: calc(50% - 356px);
}

#legion.content .desc_legion .title {
  width: 409px;
  height: 57px;
  background-image: url("../images/legion_title.png");
  position:relative;
  top:2px;
  left:425px;
}

#legion.content .desc_legion .text {
  width: 400px;
  height: 349px;
  background-image: url("../images/legion_text.png");
  position:relative;
  top:25px;
  left:445px;
}

#legion.content .bg_firing_squad {
  width: 995px;
  height: 649px;
  background-image: url("../images/franchise_force_bg.png");
  top:190px;
  right:calc(50% - 190px);
}


/* mayhem */

#squad.content {
  height: 880px;
  margin-bottom: 10px;
}

#squad.content .char_carnage_a_trois {
  width: 993px;
  height: 833px;
  background-image: url("../images/carnage_a_trois.png");
  top:0px;
  left:calc(50% - 155px);
}

#squad.content .char_carnage_a_trois .char01 {
  top: 460px;
  left: 173px;
  background-image: url("../images/carnage_a_trois_btn_char01.png");
}

#squad.content .char_carnage_a_trois .char02 {
  top: 376px;
  left: 348px;
  background-image: url("../images/carnage_a_trois_btn_char02.png");
}

#squad.content .char_carnage_a_trois .char03 {
  top: 288px;
  left: 504px;
  background-image: url("../images/carnage_a_trois_btn_char03.png");
}

#squad.content .char_carnage_a_trois .btn_detail {
  width: 134px;
  height: 114px;
  position:absolute;
  left: 0px;
  bottom: 0px;
  background-image: url("../images/btn_detail_right.png");
}

#squad.content .char_carnage_a_trois .btn_detail.btn_cs {
  background-image: url("../images/btn_detail_right_cs.png");
}

#squad.content .desc_squad {
  width: 1197px;
  height: 682px;
  background-image: url("../images/squad_bg.png");
  top:45px;
  right: calc(50% - 336px);
}

#squad.content .desc_squad .title {
  width: 285px;
  height: 55px;
  background-image: url("../images/squad_title.png");
  position:relative;
  top:3px;
  left:360px;
}

#squad.content .desc_squad .text {
  width: 460px;
  height: 417px;
  background-image: url("../images/squad_text.png");
  position:relative;
  top:35px;
  left:350px;
}

#squad.content .bg_carnage_a_trois {
  width: 995px;
  height: 649px;
  background-image: url("../images/carnage_a_trois_bg.png");
  top:213px;
  left:calc(50% - 195px);
}


/* special move */

#special_move.content {
  height: 726px;
  background-image: url("../images/special_move_bg.png");
  background-position:center top;
  margin-bottom: -150px;
}

#special_move .title {
  width: 467px;
  height: 98px;
  background-image: url("../images/special_move_title.png");
  position:absolute;
  top:170px;
  left:calc(50% - 326px);
  font-size: 0;
}

#special_move .description {
  width: 616px;
  height: 176px;
  background-image: url("../images/special_move_text.png");
  position:absolute;
  top:345px;
  left:calc(50% - 468px);
  font-size: 0;
}


/* masterminds */

#masterminds {
  height: 700px;
  background-image: url("../images/masterminds_bg.png");
  background-position:center top;
  margin-bottom: 0;
}

#masterminds .title {
  width: 398px;
  height: 43px;
  background-image: url("../images/masterminds_title.png");
  position:absolute;
  top:184px;
  left:calc(50% - 199px);
  font-size: 0;
}

#masterminds .legion {
  width: 701px;
  height: 386px;
  background-image: url("../images/masterminds_legion_bg.png");
  position:absolute;
  top:250px;
  right:calc(50% - 88px);
  font-size: 0;
}

#masterminds .legion .text {
  width: 338px;
  height: 118px;
  background-image: url("../images/masterminds_legion_text.png");
  position:absolute;
  top: 25px;
  left: 306px;
  font-size: 0;
}

#masterminds .mayhem {
  width: 701px;
  height: 386px;
  background-image: url("../images/masterminds_mayhem_bg.png");
  position:absolute;
  top:290px;
  left:calc(50% - 88px);
  font-size: 0;
}

#masterminds .mayhem .text {
  width: 397px;
  height: 118px;
  background-image: url("../images/masterminds_mayhem_text.png");
  position:absolute;
  top: 246px;
  left: 95px;
  font-size: 0;
}


/* special */

#special.content {
  margin-bottom: 0;
}

#special .special01 {
  width: 1022px;
  height: 317px;
  background-image: url("../images/special_01.png");
  margin:0 auto -32px;
  font-size: 0;
}

#special .special01 .text {
  width: 463px;
  height: 156px;
  background-image: url("../images/special_01_text.png");
  position:relative;
  top: 117px;
  left: 268px;
}

#special .special01 .btn_detail {
  width: 200px;
  height: 130px;
  background-image: url("../images/special_01_btn.png");
  position:absolute;
  top: 127px;
  right: 50px;
}


#special .special01 .btn_detail a {
  display:block;
  width: 100%;
  height: 100%;
  font-size: 0;
}

#special .special02 {
  width: 1066px;
  height: 320px;
  background-image: url("../images/special_02.png");
  margin:0 auto -45px;
  position:relative;
  left:100px;
  font-size: 0;
}

#special .special02 .text {
  width: 503px;
  height: 153px;
  background-image: url("../images/special_02_text.png");
  position:relative;
  top: 122px;
  left: 67px;
}

#special .special03 {
  width: 1027px;
  height: 334px;
  background-image: url("../images/special_03.png");
  margin:0 auto;
  position:relative;
  font-size: 0;
}

#special .special03 .text {
  width: 463px;
  height: 150px;
  background-image: url("../images/special_03_text.png");
  position:relative;
  top: 134px;
  left: 324px;
}

#special .notice {
  width: 502px;
  height: 55px;
  background-image: url("../images/special_notice.png");
  margin: 25px auto 80px;
  font-size: 0;
}


/* movie */

#movie.content {
  width: 786px;
  height: 640px;
  min-width:auto;
  margin: 0 auto 80px;
  position:relative;
  border: 1px solid rgba(220, 100, 255, 0.35);
  border-radius: 5px;
  background-color: #2d1c39;
}

#movie .videos {
  width: 768px;
  height: 450px;
  position:absolute;
  top:8px;
  left:8px;
  background-color:#000;
}

#movie .btn_play {
  width: 134px;
  height: 134px;
  background-image: url("../images/movie_btn_play.png");
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
}

#movie .btn_play a {
  display:block;
  width: 100%;
  height: 100%;
}

#movie .tab {
  position:absolute;
  left: 9px;
  bottom: 9px;
}

#movie .tab ul {
  width: 768px;
  margin: 13px auto 0;
  justify-content:space-between;
}


#movie .tab ul li {
  display:block;
  float: left;
  width: 254px;
  height: 54px;
  margin: 0 1px;
  background-color: #3c1e5a;
  border-radius: 4px;
  border:1px solid #643282;
  text-align: center;
  line-height: 54px;
  font-size: 14px;
  color: #dcc8dc;
}

#movie .tab ul li a {
  display:block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
  text-align: center;
}

#movie .tab ul li.active {
  color: #3c1e5a;
  background-color: #ffdc00;
  border-color: #ffdc00;
}

#movie .tab ul li.active a {
  pointer-events:none;
}

#movie .tab ul li.active:hover {
  opacity:1;
}


/* footer */

#footer.content {
  width: 1192px;
  height: 373px;
  min-width:auto;
  background-image: url("../images/footer.png");
  margin: 0 auto 50px;
}

#footer .title {
  width: 330px;
  height: 26px;
  background-image: url("../images/foote_title.png");
  margin: 115px auto 0;
}

#footer .text {
  width: 431px;
  height: 155px;
  background-image: url("../images/foote_text.png");
  margin: 10px auto 0;
}

.copyright {
  text-align: center;
  font-size: 10px;
  color: #78648c;
  margin: 50px auto 0px;
  padding-bottom: 100px;
  width: 1200px;
}


/**
 *   inview items
 */

#aom .inview_slide_right {
  transform: translateX(-120px);
  transition-duration: 0.6s;
  opacity: 0;
}

#aom .inview .inview_slide_right {
  transform: translateX(0px);
  opacity: 1;
}

#aom .inview_slide_left {
  transform: translateX(120px);
  transition-duration: 0.6s;
  opacity: 0;
}

#aom .inview .inview_slide_left {
  transform: translateX(0px);
  opacity: 1;
}

#aom .inview_bounce {
  opacity: 0;
}

#aom .inview .inview_bounce {
  animation-name: bounce;
  animation-duration: 0.6s;
  animation-timing-function: ease-in;
  animation-delay: 0.3s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

@keyframes bounce {
  0% {
    transform: scale(0.7);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  45% {
    transform: scale(1.3);
  }

  65% {
    transform: scale(1.0);
  }

  85% {
    transform: scale(1.15);
  }

  100% {
    transform: scale(1.0);
    opacity: 1
  }
}

#aom .inview_slide_bottom {
  transform: translateY(-80px);
  transition-duration: 0.6s;
  opacity: 0;
}

#aom .inview.inview_slide_bottom {
  transform: translateY(0px);
  opacity: 1;
}

#page_top {
  width: 75px;
  height: 75px;
  background-image: url("../images/pagetop.png");
  position:fixed;
  bottom:50px;
  left:calc(50% + 470px);
  z-index: 999;
  font-size: 0;
}

#page_top a {
  display:block;
  width: 100%;
  height: 100%;
}

/* modal contents */

.char_modal_container {
  width: 807px;
  height: 812px;
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
  background-image: url("../images/char_modal_bg.png");
}

.char_modal_container .mfp-close {
  position:absolute;
  width: 60px;
  height: 60px;
  top: 186px;
  right: -72px;
  background-image: url("../images/btn_modal_close.png");
  font-size: 0;
  opacity: 1;
}

.char_modal_container .mfp-close:hover {
  opacity: 0.7;
}

.char_modal_container .btn_next {
  position:absolute;
  top: 258px;
  right: -72px;
  z-index: 1050;
}

.char_modal_container .btn_prev {
  position:absolute;
  top: 332px;
  right: -72px;
  z-index: 1051;
}

.char_modal_container .char {
  position:relative;
  width: 807px;
  height: 812px;
  padding-top: 104px;
}

.char_modal_container .char .name {
  width: 520px;
  text-align: right;
  z-index: 1052;
}

.char_modal_container .char .name_jp {
  width: 284px;
  height: 38px;
  background-image: url("../images/char_name_jp_bg.png");
  text-align: center;
  line-height: 38px;
  margin-top: 10px;
  margin-left: 236px;
  color: #ffdcff;
  font-size: 14px;
  z-index: 1053;
}

.char_modal_container .char .lead {
  width: 520px;
  text-align: right;
  color: #f078ff;
  font-size: 20px;
  margin-top: 12px;
  z-index: 1054;
}

.char_modal_container .char .desc {
  width: 520px;
  text-align: right;
  color: #f0d2ff;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.7;
  z-index: 1055;
}

.char_modal_container .char .ability_title {
  position:absolute;
  top: 485px;
  left: 420px;
  z-index: 1056;
}

.char_modal_container .char .ability {
  width: 360px;
  position:absolute;
  top: 515px;
  left: 160px;
  z-index: 1057;
}

.char_modal_container .char .ability dl dt {
  float:left;
  clear: left;
  display:flex;
  align-items: center;
  justify-content: center;
  width:150px;
  height: 74px;
  margin-bottom: 5px;
  background-image: url("../images/char_ability_bg.png");
  color: #f0d2ff;
  font-size: 14px;
  text-align: center;
}

.char_modal_container .char .ability dl dd {
  height: 74px;
  width:209px;
  display:flex;
  align-items: center;
  margin-left: 140px;
  margin-bottom: 5px;
  background-image: url("../images/char_ability_bg.png");
  background-position: right top;
  color: #f0d2ff;
  font-size: 12px;
  padding-left: 10px;
}

.char_modal_container .char .image {
  position:absolute;
  bottom: 65px;
}
.char_modal_container .char03 .image {
  right: -40px;
}
.char_modal_container .char02 .image {
  right: 10px;
}
.char_modal_container .char01 .image {
  right: -70px;
}
.char_modal_container .char04 .image {
  right: 10px;
}
.char_modal_container .char05 .image {
  right: -110px;
  bottom: -10px;
}
.char_modal_container .char06 .image {
  right: -130px;
}
.char_modal_container .char07 .image {
  right: -40px;
}
.char_modal_container .char08 .image {
  right: 20px;
}
.char_modal_container .char09 .image {
  right: -300px;
}
.char_modal_container .char10 .image {
  right: -140px;
}
.char_modal_container .char11 .image {
  right: 3px;
}
.char_modal_container .char12 .image {
  right: -95px;
}

/* overlay at start */
.mfp-fade.mfp-bg {
  opacity: 0;

  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
/* overlay animate in */
.mfp-fade.mfp-bg.mfp-ready {
  opacity: 0.8;
}
/* overlay animate out */
.mfp-fade.mfp-bg.mfp-removing {
  opacity: 0;
}

/* content at start */
.mfp-fade.mfp-wrap .mfp-content {
  opacity: 0;

  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
/* content animate it */
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
  opacity: 1;
}
/* content animate out */
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
  opacity: 0;
}
#aom .banner { text-align: center; margin: 0 auto;}

/* Update 20171221 */
.banner_dlc {
  background-color: rgba(149, 69, 231, 0.15);
  padding: 24px 0 30px;
  line-height: 0;
  font-size: 0;
  margin-bottom: 20px;
}
.banner_dlc .image a {
  display: block;
  width: 770px;
  height: 206px;
  margin: 0 auto;
  background: url(../images/dlc_bnr.png) no-repeat 0 0;
}
.banner_dlc .image a:hover {
  opacity: 0.7;
}
#masterminds.content {
  margin-bottom: 0;
}