@charset "UTF-8";
body {
  height: 100vh;
  overflow: hidden;
  background-color: #3b0100; }

body.is-show {
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll; }

/*--- wrap ---*/
.wrap {
  display: block;
  width: 100vw;
  height: auto;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  position: relative;
  opacity: 0;
  color: #fff;
  z-index: 2; }

.wrap.is-show {
  background: #000;
  opacity: 1; }

.wrap::before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-image: url("../img/home2/bg_sp.jpg");
  background-position: center top;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: -1; }

/*---------------
   smartphone
---------------*/
.mvBox {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0 0 3% 0;
  background: #000 url("../img/home3/mv_sp.jpg") right top no-repeat;
  background-size: 100%  auto;
  position: relative;
  z-index: 2; }
  .mvBox .release {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    width: 86%;
    max-width: 580px;
    margin: -5% auto 0 auto;
    padding: 0 0 2% 0;
    position: relative;
    z-index: 4; }
    .mvBox .release .bd_date {
      width: 65%;
      height: auto;
      padding: 0 3% 0 0; }
      .mvBox .release .bd_date img {
        width: 100%; }
    .mvBox .release .haishin {
      width: 35%;
      height: auto;
      padding: 0 0 0 0; }
      .mvBox .release .haishin img {
        width: 100%; }
  .mvBox .mv_inner {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0 0 4vw 0;
    overflow-x: hidden;
    position: relative; }
    .mvBox .mv_inner .mainCopy {
      display: block;
      width: 100%;
      height: 106.875vw;
      margin: 0;
      background: url("../img/home3/home_mainCopy.png") right top no-repeat;
      background-size: 18.4% auto;
      color: rgba(0, 0, 0, 0);
      position: relative; }
    .mvBox .mv_inner .logo {
      display: block;
      width: 96%;
      max-width: 720px;
      height: auto;
      margin: 0 auto;
      padding: 0;
      position: relative; }
    .mvBox .mv_inner .loadshow_txt {
      display: block;
      width: 60%;
      max-width: 380px;
      height: auto;
      margin: -2vw auto 0 auto;
      padding: 0;
      position: relative; }
    .mvBox .mv_inner .pc_mvLink {
      display: none; }
    .mvBox .mv_inner .sp_ofbnr {
      display: block;
      width: 90%;
      max-width: 720px;
      margin: 5% auto;
      padding: 0;
      position: relative; }
    .mvBox .mv_inner .pc_ofbnr {
      display: none; }
  .mvBox .mv_bnrArea {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 4% 10%;
    background: rgba(167, 1, 1, 0.5);
    position: relative; }
    .mvBox .mv_bnrArea .bnr {
      display: block;
      width: 100%;
      height: auto;
      max-width: 400px;
      margin: 4% auto;
      padding: 0; }
      .mvBox .mv_bnrArea .bnr img {
        width: 100%;
        height: auto; }

/*--ファーストビューここまで--*/
.sp_mvLink {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.7);
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  position: relative; }
  .sp_mvLink div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 33%;
    height: 10vw;
    max-height: 68px;
    border-right: 1px solid #fff; }
    .sp_mvLink div img {
      width: auto;
      height: 10vw;
      max-height: 52px;
      padding-left: 5%; }
  .sp_mvLink div:last-child {
    border-right: none; }

.sp_bnrBox {
  display: block;
  width: 100%;
  margin: 0;
  padding: 4% 6% 3% 6%;
  background: rgba(78, 6, 0, 0.7);
  border-bottom: 1px solid #fff;
  position: relative; }
  .sp_bnrBox div {
    width: 100%;
    max-width: 560px;
    margin: 0 auto 10px auto;
    padding: 0; }

/* home MOVIE*/
.home_movieBox {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 4% 6%;
  background: #362e2b;
  background: linear-gradient(0deg, rgba(54, 46, 43, 0.6) 35%, rgba(50, 20, 0, 0.8799719717) 100%);
  position: relative;
  z-index: 3; }
  .home_movieBox .more {
    display: block;
    width: 60%;
    height: auto;
    max-width: 200px;
    margin: -10px auto 0 auto;
    padding: 0 0 20px 0;
    position: relative; }
    .home_movieBox .more img {
      width: 100%;
      height: auto; }
  .home_movieBox .pc_trailer {
    display: none; }

.movieArea {
  display: block;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding-top: 3.2vw;
  padding-bottom: 3vw;
  position: relative;
  z-index: 2; }
  .movieArea .tit_movie {
    display: block;
    width: 30%;
    max-width: 168px;
    margin: 10px auto 0 auto;
    position: relative;
    z-index: 4; }
    .movieArea .tit_movie span {
      display: inline-block;
      width: 100%;
      text-align: center; }
      .movieArea .tit_movie span img {
        display: block;
        width: 50%;
        max-width: 112px;
        margin: 0 auto;
        padding-top: 10px;
        padding-bottom: 16px; }
  .movieArea .thumbnail {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    width: 100%;
    margin: 0 auto;
    font-size: 1.3rem;
    line-height: 1.4;
    text-align: center;
    position: relative;
    color: #cea28d;
    font-family: 'Noto Serif JP', serif; }
    .movieArea .thumbnail div {
      width: 49%;
      height: auto;
      margin-bottom: 8px; }
    .movieArea .thumbnail div.wide {
      width: 100%;
      height: auto; }
    .movieArea .thumbnail .condensed {
      display: inline-block;
      transform: scale(0.7, 1);
      transform-origin: 0 center;
      width: 140%;
      letter-spacing: 0.02rem; }
  .movieArea #trailer {
    display: block;
    /*margin-top: -10px;*/
    padding: 0 0 10vw 0;
    z-index: 2;
    line-height: 1.0; }
  .movieArea #player {
    border: 1px solid #544330; }
  .movieArea ul.movieNav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: flex-start;
    width: 98%;
    max-width: 1120px;
    margin: 10px auto 20px auto;
    font-family: 'Noto Serif JP', serif; }
    .movieArea ul.movieNav li {
      display: block;
      margin: 0 2px 8px 2px;
      font-weight: 500;
      font-size: 14px;
      width: calc(24% - 2px);
      padding: 0;
      min-width: 80px;
      max-width: 220px;
      white-space: nowrap; }
    .movieArea ul.movieNav li.mid {
      display: block;
      margin: 0 2px 8px 2px;
      font-weight: 500;
      font-size: 14px;
      width: calc( 28% - 4px);
      padding: 0;
      min-width: 120px;
      max-width: 290px;
      white-space: nowrap; }
    .movieArea ul.movieNav li.half {
      display: block;
      margin: 0 2px 8px 2px;
      font-weight: 500;
      font-size: 14px;
      width: calc( 50% - 4px);
      padding: 0;
      min-width: 135px;
      max-width: 330px;
      white-space: nowrap; }
    .movieArea ul.movieNav li.wide {
      display: block;
      margin: 0 2px 8px 2px;
      font-weight: 500;
      font-size: 14px;
      width: calc( 100% - 4px);
      padding: 0;
      min-width: 135px;
      max-width: 420px;
      white-space: nowrap; }
    .movieArea ul.movieNav a {
      display: block;
      text-align: center;
      width: 100%;
      padding: 8px 8px;
      background-color: rgba(255, 255, 255, 0.3);
      cursor: pointer;
      line-height: 1;
      color: #fff;
      border: 1px solid rgba(255, 255, 255, 0.8);
      border-radius: 5px;
      border-radius: 5px;
      text-decoration: none;
      transition: .5s; }
    .movieArea ul.movieNav a:hover {
      background: #ff2a00;
      color: #fff;
      border: 1px solid #fd2a00;
      text-decoration: none; }
    .movieArea ul.movieNav .active a {
      display: block;
      text-align: center;
      width: 100%;
      padding: 8px 8px;
      cursor: default;
      line-height: 1;
      background: rgba(178, 33, 4, 0.6);
      color: #fff;
      border: 1px solid #cd2301;
      text-decoration: none; }

.bg_bl {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  background: transparent;
  position: relative;
  z-index: 2; }

h2.title {
  width: 100%;
  text-align: center;
  max-width: 500px;
  margin: 0 auto 20px auto; }

.anchor {
  display: block;
  width: 1px;
  margin: 0 auto 20px 0;
  padding: 20px 0 0 0; }

.billingBox {
  display: block;
  width: 100%;
  margin: 0;
  padding: 2%;
  background: rgba(78, 6, 0, 0.7);
  position: relative; }
  .billingBox img {
    display: block;
    width: 98%;
    max-width: 920px;
    margin: 0 auto;
    padding: 4% 0 4% 0; }

.tieup {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 2%;
  background: rgba(126, 18, 0, 0.7);
  position: relative; }
  .tieup .tieup_bnr {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0;
    position: relative; }
    .tieup .tieup_bnr div {
      display: block;
      width: 48%;
      max-width: 220px;
      height: auto;
      margin: 4px 2px;
      padding: 0; }
      .tieup .tieup_bnr div img {
        width: 100%;
        height: auto; }

.footer {
  background: rgba(0, 0, 0, 0.5); }
  .footer .share_tit {
    display: block;
    width: 16%;
    max-width: 78px;
    margin: 0 auto 10px auto;
    padding: 0;
    position: relative; }
  .footer .foot_sns {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 10px;
    position: relative; }
    .footer .foot_sns .sns_share {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 70%;
      max-width: 220px;
      margin: 0 auto 8px auto; }
      .footer .foot_sns .sns_share div {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 17%;
        margin: 0 3%; }
  .footer .footbnr {
    display: block;
    width: 70%;
    max-width: 400px;
    margin: 0 auto;
    padding: 0;
    position: relative; }
    .footer .footbnr img {
      padding: 5% 0 6% 0; }

/*----------
   TABLET
----------*/
@media screen and (min-width: 600px) and (max-width: 799px) {
  .mvBox .mv_bnrArea {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 4% 4%;
    background: rgba(167, 1, 1, 0.5);
    position: relative; }
    .mvBox .mv_bnrArea .bnr {
      display: block;
      width: 48%;
      height: auto;
      max-width: 380px;
      margin: 1% 1%;
      padding: 0; }
      .mvBox .mv_bnrArea .bnr img {
        width: 100%;
        height: auto; } }
@media screen and (min-width: 800px) and (max-width: 1023px) {
  .mvBox .mv_bnrArea {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 4% 16%;
    background: rgba(167, 1, 1, 0.5);
    position: relative; }
    .mvBox .mv_bnrArea .bnr {
      display: block;
      width: 48%;
      height: auto;
      max-width: 380px;
      margin: 1% 1%;
      padding: 0; }
      .mvBox .mv_bnrArea .bnr img {
        width: 100%;
        height: auto; }

  h2.title {
    width: 100%;
    text-align: center;
    max-width: 500px;
    margin: 0 auto 20px auto; }

  .anchor {
    display: block;
    width: 1px;
    margin: 0 auto 20px 0;
    padding: 40px 0 0 0; }

  .inner_wrap {
    display: block;
    width: 80%;
    max-width: 1200px;
    margin: 0 auto 5vw auto;
    padding: 0;
    position: relative; }
    .inner_wrap .catch {
      width: 100%;
      max-width: 500px;
      margin: 0 auto 20px 0; }
    .inner_wrap .catch_taC {
      width: 100%;
      max-width: 460px;
      margin: 0 auto 40px auto; }
    .inner_wrap p {
      font-family: YakuHanMPs,'Noto Serif JP', serif;
      font-weight: 300;
      text-align: justify;
      font-size: 1.4rem;
      margin-bottom: 30px; }
    .inner_wrap .storyTxt {
      font-family: YakuHanMP,'Noto Serif JP', serif;
      display: block;
      width: 100%;
      font-size: 1.56rem;
      letter-spacing: 0.08rem;
      line-height: 2.0;
      margin-bottom: 20px;
      text-align: center; }
    .inner_wrap .storyTxt_last {
      margin-bottom: 5px; } }
/*----------
   PC
----------*/
@media screen and (min-width: 1024px) {
  body {
    font-size: 1.6rem;
    line-height: 1.8; }

  .wrap::before {
    background-image: url("../img/home2/bg_pc.png");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: -1; }

  .mvBox {
    display: block;
    width: 100%;
    height: 48vw;
    /*max-height: 1100px!important;*/
    margin: 0;
    padding: 0;
    background: #fff url("../img/home3/mv_pc.jpg") right center no-repeat;
    background-size: cover;
    position: relative; }
    .mvBox .release {
      display: flex;
      flex-wrap: nowrap;
      justify-content: flex-end;
      align-items: center;
      width: 33%;
      margin: 0 5px 0 auto;
      padding: 0;
      right: 10px;
      bottom: 0.6%;
      position: absolute; }
      .mvBox .release .bd_date {
        width: 68%;
        height: auto;
        padding: 0 3% 0 0; }
        .mvBox .release .bd_date img {
          width: 100%;
          margin-top: 10%; }
      .mvBox .release .haishin {
        width: 35%;
        height: auto;
        padding: 0 0 0 0; }
        .mvBox .release .haishin img {
          width: 100%; }
    .mvBox .mv_inner {
      display: block;
      width: 99%;
      /*max-width: 1800px;*/
      height: auto;
      /*min-height: 46vw;*/
      margin: 0 0 0 auto;
      padding: 0;
      top: 0;
      left: 0;
      position: absolute; }
      .mvBox .mv_inner .pc_left {
        display: block;
        width: 40%;
        height: auto;
        margin-left: 1vw;
        margin-right: auto;
        padding: 2% 0 6% 0;
        position: relative; }
        .mvBox .mv_inner .pc_left .logo {
          display: block;
          width: 100%;
          max-width: 900px;
          height: auto;
          margin: 25px auto 0 auto;
          padding: 0;
          position: relative; }
        .mvBox .mv_inner .pc_left .pc_mvLink {
          display: flex;
          flex-wrap: nowrap;
          justify-content: flex-start;
          width: 96%;
          max-width: 860px;
          margin: 0 auto;
          position: relative; }
          .mvBox .mv_inner .pc_left .pc_mvLink div {
            width: 30%;
            margin: -1% 1% 0 1%;
            padding: 0; }
        .mvBox .mv_inner .pc_left .mv_xlink {
          display: block;
          width: 34%;
          height: auto;
          margin: 3% auto 8% auto;
          padding: 0;
          position: relative; }
          .mvBox .mv_inner .pc_left .mv_xlink img {
            width: 100%; }
        .mvBox .mv_inner .pc_left .sp_ofbnr {
          display: none; }
        .mvBox .mv_inner .pc_left .pc_ofbnr {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          width: 90%;
          margin: 4% auto;
          position: relative; }
          .mvBox .mv_inner .pc_left .pc_ofbnr .bnr_rect {
            display: block;
            width: 80%;
            height: auto;
            margin: 0 auto 10px auto;
            padding: 0; }
          .mvBox .mv_inner .pc_left .pc_ofbnr .bnr_rect2 {
            display: block;
            width: 70%;
            height: auto;
            margin: 0 auto 10px auto;
            padding: 0; }
      .mvBox .mv_inner .mainCopy {
        display: block;
        width: 7%;
        height: 40vw;
        margin: 0;
        background: url("../img/home3/home_mainCopy.png") right top no-repeat;
        background-size: auto 92%;
        color: rgba(0, 0, 0, 0);
        right: 0;
        top: 0;
        position: absolute; }
      .mvBox .mv_inner .loadshow_txt {
        display: block;
        width: 20%;
        /*max-width: 340px;*/
        height: auto;
        right: 0;
        bottom: 3%;
        padding: 0;
        position: absolute; }
    .mvBox .mv_bnrArea {
      display: flex;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 64px;
      margin: 0;
      padding: 0 0;
      background: rgba(126, 33, 0, 0.6);
      bottom: 0;
      position: absolute; }
      .mvBox .mv_bnrArea .bnr {
        display: block;
        width: 250px;
        height: auto;
        max-width: 250px;
        margin: 0 2px;
        padding: 0; }
        .mvBox .mv_bnrArea .bnr img {
          width: 250px;
          height: auto; }

  .sp_mvLink {
    display: none; }

  /*--ファーストビューここまで--*/
  .sp_bnrBox {
    display: none; }

  .home_movieBox .more {
    max-width: 250px; }
  .home_movieBox .movieArea {
    display: none; }
  .home_movieBox .pc_trailer {
    display: block;
    width: 100%;
    height: auto;
    margin: 10px auto 0 auto;
    padding: 0 0 20px 0;
    text-align: center;
    position: relative; }
  .home_movieBox .thumbnail {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    width: 98%;
    max-width: 990px;
    margin: 0 auto 10px auto;
    font-size: 1.4rem;
    line-height: 1.4;
    text-align: center;
    position: relative;
    color: #cea28d;
    font-family: 'Noto Serif JP', serif; }
    .home_movieBox .thumbnail div {
      width: 32%;
      height: auto; }
    .home_movieBox .thumbnail div.wide {
      width: 100%;
      height: auto; }
    .home_movieBox .thumbnail .condensed {
      display: inline-block;
      transform: scale(0.7, 1);
      transform-origin: 0 center;
      width: 140%;
      letter-spacing: 0.04rem; }

  h2.title {
    width: 100%;
    text-align: center;
    max-width: 760px;
    margin: 0 auto 30px auto; }

  .anchor {
    display: block;
    width: 1px;
    margin: 0 auto 40px 0;
    padding: 40px 0 0 0; }

  .inner_wrap {
    display: block;
    width: 80%;
    max-width: 1024px;
    margin: 0 auto 20px auto;
    padding: 0;
    position: relative; }
    .inner_wrap .catch {
      width: 100%;
      max-width: 520px;
      margin: 0 auto 20px 0; }
    .inner_wrap .catch_taC {
      width: 100%;
      max-width: 520px;
      margin: 0 auto 40px auto; }
    .inner_wrap p {
      font-family: YakuHanMPs,'Noto Serif JP', serif;
      font-weight: 300;
      text-align: justify;
      font-size: 1.6rem;
      margin-bottom: 30px; }
    .inner_wrap .storyTxt {
      font-family: YakuHanMPs,'Noto Serif JP', serif;
      display: block;
      width: 100%;
      font-size: 1.8rem;
      letter-spacing: 0.08rem;
      line-height: 2.2;
      margin-bottom: 30px;
      text-align: center; }
    .inner_wrap .storyTxt_last {
      margin-bottom: 20px; }

  .is-hidden {
    visibility: hidden;
    opacity: 0; }

  .line_head {
    margin-top: 40px; }

  .line_btm {
    margin-bottom: 40px; } }
/* PC ここまで */