@charset "UTF-8";
html {
  min-height: 100%;
  background: #000; }

body > .wrap {
  height: auto; }

.wrap {
  position: relative;
  width: 100vw;
  height: 100%;
  min-height: 100vh;
  /*height: auto;*/
  display: block;
  background: url("../img26/home2/bg.jpg") center bottom no-repeat;
  background-size: cover;
  color: #9ba9ad;
  opacity: 0; }

.wrap.is-show {
  opacity: 1.0; }

.snsBox {
  display: flex;
  right: 20px;
  top: 10px;
  height: 30px;
  position: absolute;
  z-index: 10; }
  .snsBox li {
    margin: 0 4px;
    padding: 2px;
    height: 26px;
    width: auto; }
    .snsBox li img {
      width: auto;
      height: 100% !important; }

.homeWrap {
  display: block;
  width: 100vw;
  height: 46.3vw;
  margin: 0;
  padding: 0;
  background: url("../img26/home2/mv01.jpg") center top no-repeat;
  background-size: 100%;
  position: relative;
  z-index: 1; }
  .homeWrap .mv_R {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    left: 0;
    top: 0;
    background: url("../img26/home2/mv02.jpg") center top no-repeat;
    background-size: 100%;
    position: absolute;
    z-index: -1;
    opacity: 0;
    transition: 1.5s ease-in; }
  .homeWrap .mv_R.is-show {
    opacity: 1.0; }
  .homeWrap .mv_L {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    left: 0;
    top: 0;
    background: url("../img26/home2/mv03.jpg") center top no-repeat;
    background-size: 100%;
    position: absolute;
    z-index: 1;
    opacity: 0;
    transition: 1.5s ease-in; }
  .homeWrap .mv_L.is-show {
    opacity: 1.0; }
  .homeWrap .mainCopy {
    display: block;
    width: 80%;
    top: 1%;
    left: 10%;
    z-index: 6;
    opacity: 0;
    position: absolute;
    transition: 1.2s cubic-bezier(0.23, 1, 0.32, 1); }
  .homeWrap .mainCopy.is-show {
    width: 43.5%;
    left: 28.28%;
    opacity: 1.0; }
  .homeWrap .homeLogo {
    width: 25.36vw;
    left: 2.4%;
    bottom: 0;
    position: absolute;
    z-index: 6;
    opacity: 0;
    transition: 1.5s; }
  .homeWrap .homeLogo.is-show {
    opacity: 1.0; }
  .homeWrap .roadshow {
    width: 22.44vw;
    left: 28.85%;
    bottom: 2.6%;
    position: absolute;
    z-index: 6;
    opacity: 0;
    transition: 1.5s; }
  .homeWrap .roadshow.is-show {
    opacity: 1.0; }
  .homeWrap .home_txtBnr {
    width: 26vw;
    /*right: 14.85%;*/
    /*right: 1.2%;*/
    right: 16.85%;
    bottom: 2.4%;
    position: absolute;
    z-index: 6;
    opacity: 0;
    transition: 1.5s; }
  .homeWrap .home_txtBnr.is-show {
    opacity: 1.0; }
  .homeWrap .home_spotify {
    width: 30vw;
    height: 140px !important;
    right: 14.6%;
    bottom: -46px;
    line-height: 0;
    position: absolute;
    z-index: 6;
    opacity: 0;
    transition: 1.5s; }
  .homeWrap .home_spotify.is-show {
    opacity: 1.0; }
  .homeWrap .homeNav {
    display: block;
    left: 2.66%;
    top: 2%;
    width: 12vw;
    min-width: 150px;
    height: auto;
    margin: 0;
    padding: 0;
    text-align: center;
    position: absolute;
    z-index: 5;
    opacity: 0;
    transition: 1.5s; }
    .homeWrap .homeNav .movieMark {
      width: 54%;
      margin: 0 auto;
      position: relative;
      z-index: 6; }
    .homeWrap .homeNav ul {
      display: block;
      width: 100%;
      height: auto;
      background: #021833;
      background: linear-gradient(0deg, rgba(2, 24, 51, 0.3) 0%, rgba(47, 143, 221, 0.3) 100%);
      border: 2px solid #005982;
      margin-top: -1.2vw;
      padding: 2.6vw 12% 0.4vw 12%; }
    .homeWrap .homeNav li {
      display: block;
      margin: 0 0 20% 0;
      padding: 0; }
    .homeWrap .homeNav a img {
      width: 100%;
      transition: transform 0.3s; }
    .homeWrap .homeNav a img:hover {
      transform: scale(1.2);
      z-index: 8; }
  .homeWrap .homeNav.is-show {
    opacity: 1.0; }
  .homeWrap .mainBnrBox {
    display: block;
    width: 12%;
    max-width: 220px !important;
    height: auto;
    right: 1.2%;
    bottom: 2%;
    /*bottom: 3%;*/
    /*top: 40px;*/
    z-index: 5;
    position: absolute;
    opacity: 0;
    transition: 1.5s; }
    .homeWrap .mainBnrBox div {
      display: block;
      width: 100%;
      margin-top: 8%;
      margin-right: 0;
      margin-left: auto; }
      .homeWrap .mainBnrBox div img {
        width: 100%; }
      .homeWrap .mainBnrBox div a img {
        width: 100%;
        transition: transform 0.3s; }
      .homeWrap .mainBnrBox div a img:hover {
        transform: scale(1.2);
        z-index: 8; }
  .homeWrap .mainBnrBox.is-show {
    opacity: 1.0; }

.homeSubline {
  display: block;
  width: 100%;
  height: auto;
  background: black;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, black 95%, black 100%);
  margin: -5px 0 0 0;
  padding: 20px 0 30px 0;
  text-align: center;
  position: relative;
  z-index: 3;
  /*end officialBox*/ }
  .homeSubline .officialBox {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    width: 1170px;
    height: auto;
    margin: 0 auto;
    padding: 0;
    position: relative;
    /*conanOfficial*/ }
    .homeSubline .officialBox .conanOfficial {
      display: block;
      width: 610px;
      height: 146px;
      padding: 1px 18px;
      background-image: url(../img26/home2/ofBnr_left.svg), url(../img26/home2/ofBnr_right.svg);
      background-position: left top, right top;
      background-size: auto 100%, auto 100%;
      background-repeat: no-repeat;
      /*officialBnr*/ }
      .homeSubline .officialBox .conanOfficial .officialBnr {
        display: flex;
        width: 575px;
        height: 140px;
        margin: 0;
        padding: 24px 0;
        justify-content: space-around;
        align-items: center;
        border-top: 1px solid #848484;
        border-bottom: 1px solid #848484;
        position: relative; }
        .homeSubline .officialBox .conanOfficial .officialBnr h3 {
          display: block;
          width: 150px;
          height: 25px;
          left: 5px;
          top: -18px;
          position: absolute; }
        .homeSubline .officialBox .conanOfficial .officialBnr .bnr_official {
          display: block;
          width: auto;
          height: 66px;
          margin: 0 0; }
          .homeSubline .officialBox .conanOfficial .officialBnr .bnr_official img {
            display: block;
            width: auto;
            height: 66px;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box; }
          .homeSubline .officialBox .conanOfficial .officialBnr .bnr_official img.bnr {
            border: 1px solid #989898; }
          .homeSubline .officialBox .conanOfficial .officialBnr .bnr_official img.bnr2 {
            border: 1px solid rgba(0, 0, 0, 0); }
          .homeSubline .officialBox .conanOfficial .officialBnr .bnr_official a:hover img {
            background-color: #056773;
            border: 1px solid #00fae5; }
    .homeSubline .officialBox .billing {
      width: 52.4%; }
    .homeSubline .officialBox .spotify {
      display: block;
      width: 320px;
      height: 148px !important;
      overflow-y: hidden;
      padding: 0 5px 0 5px;
      margin: -1px auto 0 0; }
      .homeSubline .officialBox .spotify iframe {
        height: 156px !important; }
    .homeSubline .officialBox .spotify2 {
      display: block;
      width: 556px;
      height: 148px !important;
      overflow-y: hidden;
      padding: 0 5px 0 5px;
      margin: -1px auto 0 0; }
      .homeSubline .officialBox .spotify2 iframe {
        height: 156px !important; }
    .homeSubline .officialBox .subBnr {
      display: block;
      width: 236px; }

/*end subline*/
/*ページ下タイアップバナー*/
.footerBnr {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  max-width: 1200px;
  margin: 0 auto 30px auto;
  padding: 0;
  position: relative; }

.footerBnr p {
  display: block;
  width: auto;
  height: 60px;
  margin: 0 3px 10px 3px; }

.footerBnr p img {
  width: 156px;
  height: 60px; }

.footerBnr p.wide img {
  width: auto;
  height: 60px !important; }

/*---ムビチケ対応---*/
.mvck_bnrArea {
  display: flex;
  justify-content: space-between;
  width: 618px;
  height: auto;
  margin: 0 auto 10px auto;
  position: relative;
  color: rgba(0, 0, 0, 0);
  font-size: 1px; }

#mvck_online a {
  display: block;
  background: url("../banner/btn_mvck_online.png") no-repeat;
  background-size: cover;
  width: 200px;
  height: 40px;
  z-index: 10;
  border: 1px solid #fff;
  border-radius: 4px;
  cursor: pointer;
  opacity: 1;
  transition: .3s;
  color: rgba(0, 0, 0, 0);
  font-size: 1px; }

#mvck_online a:hover {
  opacity: 0.6; }

#mvck_card a {
  display: block;
  background: url("../banner/mjrbnr_conan.gif") no-repeat;
  background-size: cover;
  width: 200px;
  height: 40px;
  z-index: 10;
  border: 1px solid #fff;
  border-radius: 4px;
  cursor: pointer;
  opacity: 1;
  transition: .3s;
  color: rgba(0, 0, 0, 0);
  font-size: 1px; }

#mvck_card a:hover {
  opacity: 0.6; }

#udcast a {
  display: block;
  background: url("../banner/bnr_udcast.png") no-repeat;
  background-size: cover;
  width: 200px;
  height: 40px;
  z-index: 10;
  border: 1px solid #fff;
  border-radius: 4px;
  cursor: pointer;
  opacity: 1;
  transition: .3s;
  color: rgba(0, 0, 0, 0);
  font-size: 1px; }

#udcast a:hover {
  opacity: 0.6; }

#mvckAll {
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(4, 60, 61, 0.86);
  width: 100%;
  height: 300px;
  position: fixed;
  left: 0;
  bottom: -320px;
  padding-bottom: 0;
  z-index: 55;
  border-top: 2px solid #00a3a5;
  box-sizing: border-box;
  cursor: pointer;
  opacity: 0;
  transition-property: all;
  transition: 1s cubic-bezier(0.075, 0.82, 0.165, 1); }

#mvckAll.is-show {
  bottom: 0;
  opacity: 1; }

#mvckArea {
  display: block;
  width: 860px;
  height: 169px;
  margin: auto;
  z-index: 10; }

#mvckClose {
  background: url("../banner/btn_close.png") no-repeat center;
  background-size: contain;
  width: 40px;
  height: 40px;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  cursor: pointer; }