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

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

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after, q:before, q:after {
  content: none; }

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

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden; }

.clearfix {
  display: inline-block; }

/* Hides from IE Mac */
* html .clearfix {
  height: 1%; }

.clearfix {
  display: block; }

/* ---------- 初期 ---------- */
body {
  letter-spacing: 0;
  font-family: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif; }

img {
  width: 100%;
  max-width: 100%;
  height: auto;
  line-height: 0; }

a {
  text-decoration: none; }

strong {
  font-weight: bold; }

/* ---------- /共通部分 ---------- */
#jougetyuou {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  margin: auto; }

#kadomaru {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px; }

#resbtn {
  -webkit-appearance: none; }

.ancr {
  position: relative;
  transition: 0.5s; }

.anca {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 10;
  cursor: pointer; }

.ancr:hover {
  opacity: 0.75;
  transition: 0.5s;
  cursor: pointer; }

/* ---------- /参考タグ部分 ---------- */
.wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between; }

.font_shippori {
  font-family: "Shippori Mincho", serif; }

.font_madrone {
  font-family: madrone-std, serif;
  font-weight: 400;
  font-style: normal; }

.font_roc {
  font-family: roc-grotesk-wide, sans-serif !important;
  font-weight: 600 !important;
  font-style: normal; }

html {
  font-size: calc(1vw * 100 / 1440); }

body {
  background: #000; }

/* PC */
@media screen and (min-width: 769px) {
  .sponly {
    display: none !important; }

  #navArea {
    position: relative; }

  /*ハンバーガー メニュー*/
  nav.hum {
    display: block;
    position: fixed;
    top: 0;
    right: -393rem;
    /*bottom: 0;*/
    width: 393rem;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    background: rgba(215, 0, 5, 0.9);
    -webkit-overflow-scrolling: touch;
    transition: all .5s;
    z-index: 21;
    opacity: 1;
    box-sizing: border-box;
    padding: 113rem 0 0; }
    nav.hum ul {
      text-align: center; }
      nav.hum ul li:nth-child(n+2) {
        margin-top: 45rem; }
      nav.hum ul li a {
        display: block;
        font-size: 14rem;
        line-height: 1.28em;
        color: #fff; }
    nav.hum .sns {
      margin-top: 50rem;
      text-align: center; }
      nav.hum .sns a {
        display: inline-block;
        width: 37rem; }

  .open nav.hum {
    right: 0;
    opacity: 1; }

  /*============
  .toggle_btn
  =============*/
  .toggle_btn {
    display: block;
    position: fixed;
    top: 47rem;
    right: 54rem;
    width: 40rem;
    height: 30rem;
    transition: all .5s;
    cursor: pointer;
    z-index: 23; }

  .toggle_btn span {
    display: block;
    position: absolute;
    left: 0;
    width: 40rem;
    height: 3.5rem;
    background-color: #E60012;
    transition: all .5s;
    box-shadow: 0 3rem 6rem rgba(0, 0, 0, 0.5); }

  .toggle_btn span:nth-of-type(1) {
    top: 0; }

  .toggle_btn span:nth-of-type(2) {
    top: 13rem; }

  .toggle_btn span:nth-of-type(3) {
    top: 26rem; }

  .open .toggle_btn span {
    background: #fff;
    box-shadow: none; }

  .open .toggle_btn span:nth-of-type(1) {
    -webkit-transform: translateY(13rem) rotate(-315deg);
    transform: translateY(13rem) rotate(-315deg); }

  .open .toggle_btn span:nth-of-type(2) {
    opacity: 0; }

  .open .toggle_btn span:nth-of-type(3) {
    -webkit-transform: translateY(-13rem) rotate(315deg);
    transform: translateY(-13rem) rotate(315deg); }

  /*============
  #mask
  =============*/
  #mask {
    display: none;
    transition: all .5s; }

  .open #mask {
    display: block;
    transition: all .5s;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    z-index: 20; }

  #mv {
    width: 100%;
    height: 806rem;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    /* #main_cont（z-index: 2）の下に配置 */
    will-change: opacity;
    /* ブラウザの描画を最適化 */ }
    #mv .mv_cont {
      width: 100%;
      height: 100%;
      background-image: url("../img/mv.webp");
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover; }

  #main_cont {
    width: 100%;
    padding-top: 806rem;
    position: relative;
    z-index: 2;
    overflow: hidden; }
    #main_cont .chara {
      position: absolute; }
    #main_cont .sec_ttl {
      font-size: 42rem;
      line-height: 1.309em;
      color: #fff;
      text-align: center; }

  #concept .inner {
    color: #fff;
    text-align: center;
    padding: 86rem 0 105rem;
    position: relative; }
    #concept .inner h2 {
      margin-bottom: 42rem; }
    #concept .inner .concept_main {
      width: 887rem;
      margin: 0 auto; }
    #concept .inner .concept_txt {
      width: 704rem;
      margin: 24rem auto 45rem; }
    #concept .inner .concept_btn {
      width: 374rem;
      margin: 0 auto 92rem; }
      #concept .inner .concept_btn a {
        display: block;
        width: 100%;
        font-size: 22rem;
        line-height: 1;
        font-weight: bold;
        color: #fff;
        text-align: center;
        padding: 26rem 0 28rem;
        background: url("../img/concept_btn.png") no-repeat center;
        background-size: contain;
        transition: 0.3s; }
        #concept .inner .concept_btn a:hover {
          filter: brightness(1.2); }
    #concept .inner .date_ttl {
      font-size: 58.62rem;
      line-height: 0.9em;
      margin-bottom: 40rem; }
      #concept .inner .date_ttl span {
        display: inline-block;
        font-size: 32rem; }
    #concept .inner .date_box {
      width: 940rem;
      margin: 0 auto;
      display: flex;
      justify-content: space-between; }
      #concept .inner .date_box dl {
        width: 419rem;
        box-sizing: border-box;
        padding: 17rem 0;
        border: solid 1rem #fff; }
        #concept .inner .date_box dl dt {
          font-size: 32rem;
          line-height: 1;
          color: #E60012;
          margin-bottom: 5rem; }
        #concept .inner .date_box dl dd {
          font-size: 36rem;
          line-height: 1; }
          #concept .inner .date_box dl dd span {
            font-size: 22rem; }
    #concept .inner .chara01 {
      width: 368rem;
      top: 75rem;
      left: 0; }
    #concept .inner .chara02 {
      width: 357rem;
      top: 376rem;
      right: 0; }

  #ticket {
    position: relative; }
    #ticket .bg {
      background: url("../img/ticket_bg_02.png") no-repeat center top #E60012;
      background-size: cover; }
    #ticket .inner {
      width: 940rem;
      margin: 0 auto;
      padding: 105rem 0 174rem;
      position: relative;
      z-index: 2; }
      #ticket .inner h2 {
        color: #000;
        margin-bottom: 50rem; }
      #ticket .inner .ticket_box {
        color: #fff;
        box-sizing: border-box;
        padding: 30rem 35rem 45rem;
        background: #000; }
        #ticket .inner .ticket_box .ticket_box_head {
          display: flex;
          justify-content: flex-start;
          padding-left: 8rem;
          box-sizing: border-box;
          position: relative; }
          #ticket .inner .ticket_box .ticket_box_head::after {
            position: absolute;
            content: "";
            width: 108rem;
            height: 1rem;
            bottom: -25rem;
            left: 8rem;
            background: #fff; }
          #ticket .inner .ticket_box .ticket_box_head .day_box {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-right: 56rem; }
            #ticket .inner .ticket_box .ticket_box_head .day_box .day {
              font-size: 40rem;
              line-height: 1;
              color: #E60012;
              margin-right: 19rem; }
            #ticket .inner .ticket_box .ticket_box_head .day_box .time {
              font-size: 18rem;
              line-height: 0.88em;
              font-weight: bold; }
              #ticket .inner .ticket_box .ticket_box_head .day_box .time span {
                display: inline-block;
                font-size: 13rem; }
        #ticket .inner .ticket_box .price {
          font-size: 16rem;
          line-height: 1.6875em;
          font-weight: 500;
          margin: 50rem 0 20rem; }
        #ticket .inner .ticket_box .causion {
          font-size: 12rem;
          line-height: 1.5em; }
      #ticket .inner .ticket_update {
        color: #fff;
        box-sizing: border-box;
        padding: 30rem 35rem 35rem;
        background: #000;
        margin: 20rem 0; }
        #ticket .inner .ticket_update .ticket_update_enttl {
          font-size: 40rem;
          line-height: 1;
          color: #E60012;
          padding-left: 8rem; }
        #ticket .inner .ticket_update .ticket_update_ttl {
          font-size: 18rem;
          line-height: 1;
          font-weight: 500;
          padding-left: 8rem;
          position: relative;
          margin: 10rem 0 55rem; }
          #ticket .inner .ticket_update .ticket_update_ttl::after {
            position: absolute;
            content: "";
            width: 108rem;
            height: 1rem;
            bottom: -25rem;
            left: 8rem;
            background: #fff; }
        #ticket .inner .ticket_update .price {
          font-size: 16rem;
          line-height: 1.6875em;
          font-weight: 500;
          margin-bottom: 10rem; }
        #ticket .inner .ticket_update .causion {
          font-size: 12rem;
          line-height: 1.5em; }
      #ticket .inner h3 {
        font-size: 38rem;
        line-height: 1;
        color: #fff;
        text-align: center;
        padding: 6rem 0 3rem;
        background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000 50%, rgba(0, 0, 0, 0) 100%);
        margin: 50rem 0 20rem; }
      #ticket .inner .ticket_sch dl {
        color: #fff;
        padding: 25rem 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #000; }
        #ticket .inner .ticket_sch dl:nth-child(n+2) {
          margin-top: 20rem; }
        #ticket .inner .ticket_sch dl:last-child {
          padding: 22rem 0; }
        #ticket .inner .ticket_sch dl dt {
          width: 240rem;
          font-size: 18rem;
          line-height: 1.5em;
          font-weight: bold;
          text-align: center; }
        #ticket .inner .ticket_sch dl dd {
          flex: 1;
          font-size: 16rem;
          line-height: 1.6875em;
          font-weight: 500; }
          #ticket .inner .ticket_sch dl dd .small {
            font-size: 12rem;
            line-height: 2.25em; }
          #ticket .inner .ticket_sch dl dd a {
            color: #fff; }
      #ticket .inner .ticket_accord {
        margin-top: 50rem; }
        #ticket .inner .ticket_accord .accord_ttl {
          padding: 24rem 0;
          text-align: center;
          background: url("../img/accord_ttl_bg.png") no-repeat center;
          background-size: cover;
          cursor: pointer;
          transition: 0.3s; }
          #ticket .inner .ticket_accord .accord_ttl:hover {
            filter: brightness(1.2); }
          #ticket .inner .ticket_accord .accord_ttl span {
            display: inline-block;
            font-size: 19rem;
            line-height: 1;
            font-weight: bold;
            color: #fff;
            padding-right: 27rem;
            position: relative; }
            #ticket .inner .ticket_accord .accord_ttl span::before {
              position: absolute;
              content: "";
              width: 16rem;
              height: 16rem;
              top: 50%;
              right: 0;
              transform: translateY(-50%) rotate(180deg);
              background: url("../img/accord_arrow.png") no-repeat;
              background-size: contain; }
          #ticket .inner .ticket_accord .accord_ttl.open span::before {
            transform: translateY(-50%) rotate(0); }
        #ticket .inner .ticket_accord .accord_box {
          display: none;
          box-sizing: border-box;
          padding: 55rem 55rem;
          background: #000; }
          #ticket .inner .ticket_accord .accord_box .accord_box_txt {
            font-size: 16rem;
            line-height: 1.6875em;
            font-weight: 500;
            color: #fff; }
            #ticket .inner .ticket_accord .accord_box .accord_box_txt a {
              color: #fff;
              text-decoration: underline; }
            #ticket .inner .ticket_accord .accord_box .accord_box_txt span {
              display: inline-block;
              font-size: 12rem;
              line-height: 2.25em; }
    #ticket .chara03 {
      width: 346rem;
      top: -259rem;
      left: 0; }
    #ticket .chara04 {
      width: 303rem;
      top: 708rem;
      left: 0;
      z-index: 3; }
    #ticket .chara05 {
      width: 349rem;
      top: 1656rem;
      left: 0;
      z-index: 3; }
    #ticket .chara06 {
      width: 153rem;
      top: 58rem;
      right: 67rem; }
    #ticket .chara07 {
      width: 299rem;
      top: 855rem;
      right: 0;
      z-index: 3; }
    #ticket .chara08 {
      width: 297rem;
      top: 1812rem;
      right: 0; }

  #cast {
    position: relative; }
    #cast h2 {
      width: 100%;
      font-size: 34rem;
      position: absolute;
      top: 93rem; }
    #cast .cast_main {
      background: url("../img/cast_main_bg.png") no-repeat center;
      background-size: cover; }
      #cast .cast_main .cast_main_cont {
        display: none;
        width: 100%;
        min-height: 671rem;
        box-sizing: border-box;
        padding: 250rem 0 45rem;
        position: relative; }
        #cast .cast_main .cast_main_cont.active {
          display: block; }
        #cast .cast_main .cast_main_cont .cast_main_box {
          width: 940rem;
          margin: 0 auto;
          color: #fff; }
          #cast .cast_main .cast_main_cont .cast_main_box .name_area {
            display: inline-block;
            margin-bottom: 25rem; }
            #cast .cast_main .cast_main_cont .cast_main_box .name_area .ja_name {
              font-size: 66rem;
              line-height: 1.2em;
              margin-bottom: 10rem; }
            #cast .cast_main .cast_main_cont .cast_main_box .name_area .en_name {
              width: 530rem;
              display: flex;
              justify-content: space-between;
              align-items: center;
              position: relative; }
              #cast .cast_main .cast_main_cont .cast_main_box .name_area .en_name .en {
                font-size: 16rem;
                line-height: 1.5em; }
              #cast .cast_main .cast_main_cont .cast_main_box .name_area .en_name .line {
                width: 317rem;
                height: 1rem;
                background: #fff; }
          #cast .cast_main .cast_main_cont .cast_main_box .txt_area {
            width: 530rem; }
            #cast .cast_main .cast_main_cont .cast_main_box .txt_area .txt {
              font-size: 16rem;
              line-height: 1.5em;
              min-height: 210rem; }
        #cast .cast_main .cast_main_cont .cast_main_img {
          width: 673rem;
          position: absolute;
          bottom: 0;
          right: 0; }
    #cast .cast_list {
      padding: 48rem 0 55rem;
      background: url("../img/cast_list_bg.png") no-repeat center;
      background-size: cover; }
      #cast .cast_list .cast_list_cont {
        width: 1211rem;
        margin: 0 auto;
        position: relative; }
        #cast .cast_list .cast_list_cont .cast_list_boxes {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          display: flex;
          justify-content: flex-start;
          flex-wrap: wrap; }
          #cast .cast_list .cast_list_cont .cast_list_boxes .cast_list_box {
            width: 173rem;
            height: 173rem;
            position: relative; }
            #cast .cast_list .cast_list_cont .cast_list_boxes .cast_list_box a.cast_list_link {
              width: 122.33rem;
              height: 122.33rem;
              display: block;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translateX(-50%) translateY(-50%) rotate(45deg);
              z-index: 2;
              transition: 0.3s;
              cursor: pointer; }
              #cast .cast_list .cast_list_cont .cast_list_boxes .cast_list_box a.cast_list_link:hover {
                background: rgba(0, 0, 0, 0.16); }
            #cast .cast_list .cast_list_cont .cast_list_boxes .cast_list_box:nth-child(n+7) {
              top: -86.5rem; }
            #cast .cast_list .cast_list_cont .cast_list_boxes .cast_list_box:nth-child(n+14) {
              top: -173rem; }
            #cast .cast_list .cast_list_cont .cast_list_boxes .cast_list_box:nth-child(1) {
              margin-left: 89rem; }
            #cast .cast_list .cast_list_cont .cast_list_boxes .cast_list_box:nth-child(6) {
              margin-right: 83rem; }
            #cast .cast_list .cast_list_cont .cast_list_boxes .cast_list_box:nth-child(14) {
              margin-left: 89rem; }

  .content_bg {
    width: 100%;
    background: url("../img/content_bg.webp") no-repeat center top;
    background-size: 100% auto;
    position: relative;
    padding: 120rem 0 240rem; }
    .content_bg .chara19 {
      width: 227rem;
      top: 121rem;
      left: 48rem; }
    .content_bg .chara10 {
      width: 350rem;
      top: 901rem;
      left: 0; }
    .content_bg .chara11 {
      width: 350rem;
      top: 1849rem;
      left: 0; }
    .content_bg .chara12 {
      width: 350rem;
      top: 2797rem;
      left: 0; }
    .content_bg .chara13 {
      width: 350rem;
      top: 3745rem;
      left: 0; }
    .content_bg .chara17 {
      width: 303rem;
      top: 4693rem;
      left: 10rem; }
    .content_bg .chara20 {
      width: 296rem;
      top: 641rem;
      right: 0; }
    .content_bg .chara14 {
      width: 296rem;
      top: 1589rem;
      right: 0; }
    .content_bg .chara15 {
      width: 296rem;
      top: 2537rem;
      right: 0; }
    .content_bg .chara16 {
      width: 296rem;
      top: 3485rem;
      right: 0; }
    .content_bg .chara18 {
      width: 296rem;
      top: 4433rem;
      right: 0; }

  #sch .inner {
    width: 940rem;
    margin: 0 auto 100rem; }
    #sch .inner h2 {
      margin-bottom: 50rem; }

  #match .inner {
    width: 940rem;
    margin: 0 auto 100rem; }
    #match .inner h2 {
      margin-bottom: 50rem; }
    #match .inner .match_cont .match_box:nth-child(n+2) {
      margin-top: 50rem; }
    #match .inner .match_cont .match_box .match_box_icon {
      padding: 4rem 0;
      text-align: center;
      background: #000;
      box-shadow: 0 0 20rem #E60012;
      margin-bottom: 15rem; }
      #match .inner .match_cont .match_box .match_box_icon .icon {
        display: inline-block;
        width: 105rem;
        color: #fff; }

  #goods .inner {
    width: 940rem;
    margin: 0 auto; }
    #goods .inner h2 {
      margin-bottom: 50rem; }
    #goods .inner .goods_img img:nth-child(n+2) {
      margin-top: 20rem; }
    #goods .inner .goods_accord {
      margin: 50rem 0 68rem; }
      #goods .inner .goods_accord .accord_ttl {
        padding: 24rem 0;
        text-align: center;
        background: url("../img/accord_ttl_bg.png") no-repeat center;
        background-size: cover;
        cursor: pointer;
        transition: 0.3s; }
        #goods .inner .goods_accord .accord_ttl:hover {
          filter: brightness(1.2); }
        #goods .inner .goods_accord .accord_ttl span {
          display: inline-block;
          font-size: 19rem;
          line-height: 1;
          font-weight: bold;
          color: #fff;
          padding-right: 27rem;
          position: relative; }
          #goods .inner .goods_accord .accord_ttl span::before {
            position: absolute;
            content: "";
            width: 16rem;
            height: 16rem;
            top: 50%;
            right: 0;
            transform: translateY(-50%) rotate(180deg);
            background: url("../img/accord_arrow.png") no-repeat;
            background-size: contain; }
        #goods .inner .goods_accord .accord_ttl.open span::before {
          transform: translateY(-50%) rotate(0); }
      #goods .inner .goods_accord .accord_box {
        display: none;
        box-sizing: border-box;
        padding: 55rem 55rem;
        border: solid 1rem #fff;
        background: #000; }
        #goods .inner .goods_accord .accord_box .accord_box_txt {
          font-size: 16rem;
          line-height: 1.6875em;
          font-weight: 500;
          color: #fff; }
          #goods .inner .goods_accord .accord_box .accord_box_txt a {
            color: #fff;
            text-decoration: underline; }
          #goods .inner .goods_accord .accord_box .accord_box_txt span {
            display: inline-block;
            font-size: 14rem;
            line-height: 1.92em; }
    #goods .inner .goods_causion {
      padding: 50rem 0 80rem;
      color: #fff;
      border: solid 1rem #fff; }
      #goods .inner .goods_causion .goods_causion_ttl {
        font-size: 22rem;
        line-height: 1.5em;
        font-weight: 500;
        text-align: center;
        margin-bottom: 15rem; }
      #goods .inner .goods_causion .goods_causion_box {
        width: 820rem;
        margin: 0 auto;
        padding-top: 30rem;
        border-top: solid 1rem #fff; }
        #goods .inner .goods_causion .goods_causion_box dl:nth-child(n+2) {
          margin-top: 16rem; }
        #goods .inner .goods_causion .goods_causion_box dl dt {
          font-size: 16rem;
          line-height: 1.5em;
          font-weight: 500; }
        #goods .inner .goods_causion .goods_causion_box dl dd {
          font-size: 12rem;
          line-height: 2em; }
          #goods .inner .goods_causion .goods_causion_box dl dd.big {
            font-size: 16rem;
            line-height: 1.5em; }
          #goods .inner .goods_causion .goods_causion_box dl dd a {
            color: #fff;
            text-decoration: underline; }

  .float {
    width: 266rem;
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 10;
    transform: translateY(100%);
    /* 最初は下に隠しておく */
    opacity: 0;
    /* 最初は透明にしておく */
    transition: transform 0.2s ease, opacity 0.2s ease;
    /* アニメーションの速度と動き方 */ }
    .float.is-active {
      transform: translateY(0);
      /* 定位置に戻る */
      opacity: 1;
      /* クッキリ表示する */ }
    .float .float_box {
      width: 100%;
      padding: 75rem 0 8rem;
      background: url("../img/float_bg.png") no-repeat center;
      background-size: 100% 100%; }
      .float .float_box .float_btn {
        width: 242rem;
        margin: 0 auto;
        display: flex;
        justify-content: space-between; }
        .float .float_box .float_btn .btn {
          width: 115rem; }
          .float .float_box .float_btn .btn a {
            display: block;
            width: 100%;
            transition: 0.3s; }
            .float .float_box .float_btn .btn a:hover {
              filter: brightness(1.2); } }
/* SP */
@media screen and (max-width: 768px) {
  .pconly {
    display: none !important; }

  html {
    font-size: calc(1vw * 100 / 393); }

  #navArea {
    position: relative; }

  /*ハンバーガー メニュー*/
  nav.hum {
    display: block;
    position: fixed;
    top: 0;
    right: -393rem;
    /*bottom: 0;*/
    width: 393rem;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    background: rgba(215, 0, 5, 0.9);
    -webkit-overflow-scrolling: touch;
    transition: all .5s;
    z-index: 21;
    opacity: 1;
    box-sizing: border-box;
    padding: 113rem 0 0; }
    nav.hum ul {
      text-align: center; }
      nav.hum ul li:nth-child(n+2) {
        margin-top: 45rem; }
      nav.hum ul li a {
        display: block;
        font-size: 14rem;
        line-height: 1.28em;
        color: #fff; }
    nav.hum .sns {
      margin-top: 50rem;
      text-align: center; }
      nav.hum .sns a {
        display: inline-block;
        width: 37rem; }

  .open nav.hum {
    right: 0;
    opacity: 1; }

  /*============
  .toggle_btn
  =============*/
  .toggle_btn {
    display: block;
    position: fixed;
    top: 19rem;
    right: 18rem;
    width: 23rem;
    height: 16rem;
    transition: all .5s;
    cursor: pointer;
    z-index: 23; }

  .toggle_btn span {
    display: block;
    position: absolute;
    left: 0;
    width: 23rem;
    height: 2rem;
    background-color: #E60012;
    transition: all .5s;
    box-shadow: 0 3rem 6rem rgba(0, 0, 0, 0.5); }

  .toggle_btn span:nth-of-type(1) {
    top: 0; }

  .toggle_btn span:nth-of-type(2) {
    top: 7rem; }

  .toggle_btn span:nth-of-type(3) {
    top: 14rem; }

  .open .toggle_btn span {
    background: #fff;
    box-shadow: none; }

  .open .toggle_btn span:nth-of-type(1) {
    -webkit-transform: translateY(7rem) rotate(-315deg);
    transform: translateY(7rem) rotate(-315deg); }

  .open .toggle_btn span:nth-of-type(2) {
    opacity: 0; }

  .open .toggle_btn span:nth-of-type(3) {
    -webkit-transform: translateY(-7rem) rotate(315deg);
    transform: translateY(-7rem) rotate(315deg); }

  /*============
  #mask
  =============*/
  #mask {
    display: none;
    transition: all .5s; }

  .open #mask {
    display: block;
    transition: all .5s;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    z-index: 20; }

  #mv {
    width: 100%;
    height: 449rem;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    /* #main_cont（z-index: 2）の下に配置 */
    will-change: opacity;
    /* ブラウザの描画を最適化 */ }
    #mv .mv_cont {
      width: 100%;
      height: 100%;
      background-image: url("../img/mv_sp.webp");
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover; }

  #main_cont {
    width: 100%;
    padding-top: 449rem;
    position: relative;
    z-index: 2;
    overflow: hidden; }
    #main_cont .chara {
      position: absolute; }
    #main_cont .sec_ttl {
      font-size: 18rem;
      line-height: 1.277em;
      color: #fff;
      text-align: center; }

  #concept .inner {
    color: #fff;
    text-align: center;
    padding: 59rem 0 58rem;
    position: relative; }
    #concept .inner h2 {
      margin-bottom: 39rem; }
    #concept .inner .concept_main {
      width: 100%;
      margin: 0 auto; }
    #concept .inner .concept_txt {
      width: 335rem;
      margin: 11rem auto 42rem; }
    #concept .inner .concept_btn {
      width: 215rem;
      margin: 0 auto 60rem;
      position: relative;
      z-index: 3; }
      #concept .inner .concept_btn a {
        display: block;
        width: 100%;
        font-size: 12rem;
        line-height: 1;
        font-weight: bold;
        color: #fff;
        box-sizing: border-box;
        padding: 16rem 0 16rem;
        background: url("../img/concept_btn_sp.png") no-repeat center;
        background-size: contain; }
    #concept .inner .date_ttl {
      font-size: 18rem;
      line-height: 0.9em;
      margin-bottom: 15rem; }
      #concept .inner .date_ttl span {
        display: inline-block;
        font-size: 10rem; }
    #concept .inner .date_box {
      width: 348rem;
      margin: 0 auto;
      display: flex;
      justify-content: space-between; }
      #concept .inner .date_box dl {
        width: 167rem;
        box-sizing: border-box;
        padding: 7rem 0;
        border: solid 1rem #fff; }
        #concept .inner .date_box dl dt {
          font-size: 13rem;
          line-height: 1;
          color: #E60012;
          margin-bottom: 2rem; }
        #concept .inner .date_box dl dd {
          font-size: 14rem;
          line-height: 1; }
          #concept .inner .date_box dl dd span {
            font-size: 9rem; }
    #concept .inner .chara01 {
      width: 104rem;
      top: 47rem;
      left: 0; }
    #concept .inner .chara02 {
      width: 104rem;
      top: 332rem;
      right: 0; }

  #ticket {
    position: relative; }
    #ticket .bg {
      background: url("../img/ticket_bg_02_sp.png") no-repeat center top;
      background-size: cover; }
    #ticket .inner {
      padding: 59rem 0 69rem;
      position: relative;
      z-index: 2; }
      #ticket .inner h2 {
        font-size: 20rem;
        color: #000;
        margin-bottom: 33rem; }
      #ticket .inner .ticket_box {
        width: 270rem;
        margin: 0 auto;
        color: #fff;
        box-sizing: border-box;
        padding: 15rem 19rem;
        background: #000; }
        #ticket .inner .ticket_box .ticket_box_head {
          padding-bottom: 13rem;
          border-bottom: solid 1rem #fff; }
          #ticket .inner .ticket_box .ticket_box_head .day_box {
            display: flex;
            justify-content: flex-start;
            align-items: center; }
            #ticket .inner .ticket_box .ticket_box_head .day_box:first-child {
              margin-bottom: 15rem; }
            #ticket .inner .ticket_box .ticket_box_head .day_box .day {
              font-size: 22rem;
              line-height: 1;
              color: #E60012;
              margin-right: 13rem; }
            #ticket .inner .ticket_box .ticket_box_head .day_box .time {
              font-size: 12rem;
              line-height: 1.33em;
              font-weight: bold; }
        #ticket .inner .ticket_box .price {
          font-size: 14rem;
          line-height: 1.5em;
          font-weight: 500;
          margin: 13rem 0; }
        #ticket .inner .ticket_box .causion {
          font-size: 12rem;
          line-height: 1.5em; }
      #ticket .inner .ticket_update {
        width: 270rem;
        margin: 20rem auto;
        color: #fff;
        box-sizing: border-box;
        padding: 15rem 18rem 15rem;
        background: #000; }
        #ticket .inner .ticket_update .ticket_update_enttl {
          font-size: 22rem;
          line-height: 1;
          color: #E60012; }
        #ticket .inner .ticket_update .ticket_update_ttl {
          font-size: 12rem;
          line-height: 1.33em;
          font-weight: 500;
          position: relative;
          padding-bottom: 13rem;
          border-bottom: solid 1rem #fff;
          margin: 10rem 0 13rem; }
        #ticket .inner .ticket_update .price {
          font-size: 14rem;
          line-height: 1.5em;
          font-weight: 500;
          margin-bottom: 12rem; }
        #ticket .inner .ticket_update .causion {
          font-size: 12rem;
          line-height: 1.5em; }
      #ticket .inner .ticket_img {
        width: 270rem;
        margin: 0 auto; }
      #ticket .inner h3 {
        width: 333rem;
        margin: 39rem auto 20rem;
        font-size: 19rem;
        line-height: 1;
        color: #fff;
        text-align: center;
        padding: 6rem 0 7rem;
        background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000 50%, rgba(0, 0, 0, 0) 100%); }
      #ticket .inner .ticket_sch {
        width: 270rem;
        margin: 0 auto; }
        #ticket .inner .ticket_sch dl {
          color: #fff;
          padding: 23rem 20rem 22rem;
          background: #000; }
          #ticket .inner .ticket_sch dl:nth-child(n+2) {
            margin-top: 20rem; }
          #ticket .inner .ticket_sch dl:last-child {
            padding: 25rem 20rem; }
          #ticket .inner .ticket_sch dl dt {
            font-size: 16rem;
            line-height: 1.5em;
            font-weight: bold;
            text-align: center;
            padding-bottom: 15rem;
            border-bottom: solid 1rem #fff;
            margin-bottom: 15rem; }
          #ticket .inner .ticket_sch dl dd {
            font-size: 14rem;
            line-height: 1.5em;
            font-weight: 500; }
            #ticket .inner .ticket_sch dl dd .small {
              display: inline-block;
              font-size: 12rem;
              line-height: 1.5em;
              font-weight: 400;
              margin-top: 15rem; }
            #ticket .inner .ticket_sch dl dd ul li.apply {
              display: flex;
              justify-content: space-between; }
              #ticket .inner .ticket_sch dl dd ul li.apply .left {
                width: 4em; }
              #ticket .inner .ticket_sch dl dd ul li.apply .dot {
                width: 1em; }
              #ticket .inner .ticket_sch dl dd ul li.apply .right {
                display: block;
                flex: 1; }
                #ticket .inner .ticket_sch dl dd ul li.apply .right a {
                  display: inline-block;
                  color: #fff;
                  word-break: break-all; }
            #ticket .inner .ticket_sch dl dd ul li .indent {
              display: inline-block;
              box-sizing: border-box;
              padding-left: 5em;
              text-indent: -5em; }
      #ticket .inner .ticket_accord {
        width: 270rem;
        margin: 23rem auto 0; }
        #ticket .inner .ticket_accord .accord_ttl {
          padding: 16rem 0;
          text-align: center;
          background: url("../img/accord_ttl_bg.png") no-repeat center;
          background-size: cover;
          cursor: pointer; }
          #ticket .inner .ticket_accord .accord_ttl span {
            display: inline-block;
            font-size: 12rem;
            line-height: 1;
            font-weight: bold;
            color: #fff;
            padding-right: 17rem;
            position: relative; }
            #ticket .inner .ticket_accord .accord_ttl span::before {
              position: absolute;
              content: "";
              width: 10rem;
              height: 10rem;
              top: 50%;
              right: 0;
              transform: translateY(-50%) rotate(180deg);
              background: url("../img/accord_arrow.png") no-repeat;
              background-size: contain; }
          #ticket .inner .ticket_accord .accord_ttl.open span::before {
            transform: translateY(-50%) rotate(0); }
        #ticket .inner .ticket_accord .accord_box {
          display: none;
          box-sizing: border-box;
          padding: 50rem 20rem;
          background: #000; }
          #ticket .inner .ticket_accord .accord_box .accord_box_txt {
            font-size: 14rem;
            line-height: 1.92em;
            font-weight: 500;
            color: #fff; }
            #ticket .inner .ticket_accord .accord_box .accord_box_txt a {
              color: #fff;
              text-decoration: underline; }
            #ticket .inner .ticket_accord .accord_box .accord_box_txt span {
              display: inline-block;
              font-size: 12rem; }
    #ticket .chara03 {
      width: 97rem;
      top: 73rem;
      left: 0;
      z-index: 3; }
    #ticket .chara04 {
      width: 86rem;
      top: 784rem;
      left: 0;
      z-index: 3; }
    #ticket .chara05 {
      width: 98rem;
      top: 1490rem;
      left: 0;
      z-index: 3; }
    #ticket .chara19 {
      width: 72rem;
      top: 2195rem;
      left: 1rem; }
    #ticket .chara06 {
      width: 49rem;
      top: 363rem;
      right: 10rem; }
    #ticket .chara07 {
      width: 84rem;
      top: 1020rem;
      right: 0;
      z-index: 3; }
    #ticket .chara08 {
      width: 84rem;
      top: 1729rem;
      right: 0;
      z-index: 3; }
    #ticket .chara20 {
      width: 84rem;
      top: 2434rem;
      right: 0;
      z-index: 3; }

  #cast {
    position: relative; }
    #cast h2 {
      width: 100%;
      font-size: 18rem;
      position: absolute;
      top: 55rem; }
    #cast .cast_main {
      background: url("../img/cast_main_bgs_sp.png") no-repeat center bottom #000;
      background-size: 100% auto; }
      #cast .cast_main .cast_main_cont {
        display: none;
        width: 100%;
        min-height: 391rem;
        box-sizing: border-box;
        padding: 114rem 0 10rem;
        position: relative; }
        #cast .cast_main .cast_main_cont.active {
          display: block; }
        #cast .cast_main .cast_main_cont .cast_main_box {
          width: 339rem;
          margin: 0 auto;
          color: #fff;
          position: relative;
          z-index: 3; }
          #cast .cast_main .cast_main_cont .cast_main_box .name_area {
            display: inline-block;
            margin-bottom: 10rem; }
            #cast .cast_main .cast_main_cont .cast_main_box .name_area .ja_name {
              font-size: 24rem;
              line-height: 1.45em;
              margin-bottom: 7rem; }
            #cast .cast_main .cast_main_cont .cast_main_box .name_area .en_name {
              width: 178rem;
              display: flex;
              justify-content: space-between;
              align-items: center;
              position: relative; }
              #cast .cast_main .cast_main_cont .cast_main_box .name_area .en_name .en {
                font-size: 8rem;
                line-height: 1em; }
              #cast .cast_main .cast_main_cont .cast_main_box .name_area .en_name .line {
                width: 92rem;
                height: 1rem;
                background: #fff; }
          #cast .cast_main .cast_main_cont .cast_main_box .txt_area {
            width: 236rem; }
            #cast .cast_main .cast_main_cont .cast_main_box .txt_area .txt {
              font-size: 14rem;
              line-height: 1.5em;
              min-height: 210rem; }
        #cast .cast_main .cast_main_cont .cast_main_img {
          width: 100%;
          position: absolute;
          bottom: 0;
          right: 0; }
    #cast .cast_list {
      padding: 22rem 0 19rem;
      background: url("../img/cast_list_bg_sp.png") no-repeat center;
      background-size: cover; }
      #cast .cast_list .cast_list_cont {
        width: 338rem;
        margin: 0 auto;
        position: relative; }
        #cast .cast_list .cast_list_cont .cast_list_boxes {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          display: flex;
          justify-content: flex-start;
          flex-wrap: wrap; }
          #cast .cast_list .cast_list_cont .cast_list_boxes .cast_list_box {
            width: 48rem;
            height: 48rem;
            position: relative; }
            #cast .cast_list .cast_list_cont .cast_list_boxes .cast_list_box a.cast_list_link {
              width: 33.94rem;
              height: 33.94rem;
              display: block;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translateX(-50%) translateY(-50%) rotate(45deg);
              z-index: 2;
              transition: 0.3s;
              cursor: pointer; }
              #cast .cast_list .cast_list_cont .cast_list_boxes .cast_list_box a.cast_list_link:hover {
                background: rgba(0, 0, 0, 0.16); }
            #cast .cast_list .cast_list_cont .cast_list_boxes .cast_list_box:nth-child(n+7) {
              top: -22rem; }
            #cast .cast_list .cast_list_cont .cast_list_boxes .cast_list_box:nth-child(n+14) {
              top: -46rem; }
            #cast .cast_list .cast_list_cont .cast_list_boxes .cast_list_box:nth-child(1) {
              margin-left: 25rem; }
            #cast .cast_list .cast_list_cont .cast_list_boxes .cast_list_box:nth-child(6) {
              margin-right: 25rem; }
            #cast .cast_list .cast_list_cont .cast_list_boxes .cast_list_box:nth-child(14) {
              margin-left: 25rem; }

  .content_bg {
    width: 100%;
    background: url("../img/content_bg_sp.webp") no-repeat center top 258rem;
    background-size: 100% auto;
    position: relative;
    padding: 60rem 0 90rem; }
    .content_bg .chara10 {
      width: 103rem;
      top: 0;
      left: 0; }
    .content_bg .chara11 {
      width: 103rem;
      top: 705rem;
      left: 0; }
    .content_bg .chara12 {
      width: 103rem;
      top: 1410rem;
      left: 0; }
    .content_bg .chara13 {
      width: 103rem;
      top: 2116rem;
      left: 0; }
    .content_bg .chara17 {
      width: 91rem;
      top: 2821rem;
      left: 0; }
    .content_bg .chara14 {
      width: 93rem;
      top: 380rem;
      right: 0; }
    .content_bg .chara15 {
      width: 93rem;
      top: 1086rem;
      right: 0; }
    .content_bg .chara16 {
      width: 93rem;
      top: 1791rem;
      right: 0; }
    .content_bg .chara18 {
      width: 93rem;
      top: 2496rem;
      right: 0; }

  #sch .inner {
    width: 270rem;
    margin: 0 auto 30rem; }
    #sch .inner h2 {
      margin-bottom: 23rem; }

  #match .inner {
    width: 270rem;
    margin: 0 auto 30rem; }
    #match .inner h2 {
      margin-bottom: 23rem; }
    #match .inner .match_cont .match_box:nth-child(n+2) {
      margin-top: 14rem; }
    #match .inner .match_cont .match_box .match_box_icon {
      padding: 4rem 0;
      text-align: center;
      background: #000;
      box-shadow: 0 0 20rem #E60012;
      margin-bottom: 15rem; }
      #match .inner .match_cont .match_box .match_box_icon .icon {
        display: inline-block;
        width: 105rem;
        color: #fff; }

  #goods .inner {
    width: 270rem;
    margin: 0 auto; }
    #goods .inner h2 {
      margin-bottom: 23rem; }
    #goods .inner .goods_img img:nth-child(n+2) {
      margin-top: 11rem; }
    #goods .inner .goods_accord {
      margin: 23rem 0 56rem; }
      #goods .inner .goods_accord .accord_ttl {
        padding: 16rem 0;
        text-align: center;
        background: url("../img/accord_ttl_bg_02_sp.png") no-repeat center;
        background-size: cover;
        cursor: pointer; }
        #goods .inner .goods_accord .accord_ttl span {
          display: inline-block;
          font-size: 12rem;
          line-height: 1;
          font-weight: bold;
          color: #fff;
          padding-right: 17rem;
          position: relative; }
          #goods .inner .goods_accord .accord_ttl span::before {
            position: absolute;
            content: "";
            width: 10rem;
            height: 10rem;
            top: 50%;
            right: 0;
            transform: translateY(-50%) rotate(180deg);
            background: url("../img/accord_arrow.png") no-repeat;
            background-size: contain; }
        #goods .inner .goods_accord .accord_ttl.open span::before {
          transform: translateY(-50%) rotate(0); }
      #goods .inner .goods_accord .accord_box {
        display: none;
        box-sizing: border-box;
        padding: 26rem 19rem 37rem;
        background: #000;
        border: solid 1rem #fff; }
        #goods .inner .goods_accord .accord_box .accord_box_txt {
          font-size: 14rem;
          line-height: 1.92em;
          font-weight: 500;
          color: #fff; }
          #goods .inner .goods_accord .accord_box .accord_box_txt a {
            color: #fff;
            text-decoration: underline;
            word-break: break-all; }
          #goods .inner .goods_accord .accord_box .accord_box_txt span {
            display: inline-block;
            font-size: 12rem; }
    #goods .inner .goods_causion {
      padding: 15rem 0;
      color: #fff;
      border: solid 1rem #fff; }
      #goods .inner .goods_causion .goods_causion_ttl {
        font-size: 14rem;
        line-height: 1.5em;
        font-weight: 500;
        text-align: center;
        margin-bottom: 10rem; }
      #goods .inner .goods_causion .goods_causion_box {
        width: 237rem;
        margin: 0 auto;
        padding-top: 15rem;
        border-top: solid 1rem #fff; }
        #goods .inner .goods_causion .goods_causion_box dl:nth-child(n+2) {
          margin-top: 16rem; }
        #goods .inner .goods_causion .goods_causion_box dl dt {
          font-size: 14rem;
          line-height: 1.5em;
          font-weight: 500; }
        #goods .inner .goods_causion .goods_causion_box dl dd {
          font-size: 12rem;
          line-height: 1.5em; }
          #goods .inner .goods_causion .goods_causion_box dl dd a {
            color: #fff;
            text-decoration: underline;
            word-break: break-all; }

  .float {
    width: 142rem;
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 10; }
    .float .float_box {
      width: 100%;
      padding: 40rem 0 4rem;
      background: url("../img/float_bg_sp.png") no-repeat center;
      background-size: 100% 100%; }
      .float .float_box .float_btn {
        width: 129rem;
        margin: 0 auto;
        display: flex;
        justify-content: space-between; }
        .float .float_box .float_btn .btn {
          width: 62rem; }
          .float .float_box .float_btn .btn a {
            display: block;
            width: 100%; } }