@charset "UTF-8";
/*
@include sp($point-sp){}
@include pc($point-pc) {}
*/
/* CSS Document */
@media screen and (max-width: 768px) {
  .forSP.inline {
    display: inline; } }

@media screen and (min-width: 769px) {
  body#stage_20mistral {
    padding-top: 95px; } }

@media screen and (min-width: 769px) {
  #hero {
    height: 750px;
    background: #417eab url(../img/bg-imagearea.jpg) no-repeat center center;
    background-size: cover; } }

@media screen and (max-width: 768px) {
  #hero {
    height: auto;
    background: #417eab url(../img/bg-imagearea-sp.jpg) no-repeat center center;
    background-size: cover; } }

#hero img {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  margin: 0 auto; }
  @media screen and (min-width: 769px) {
    #hero img {
      width: 960px;
      height: 750px; } }
  @media screen and (max-width: 768px) {
    #hero img {
      width: 100%;
      height: auto; } }

#contents {
  background: url(../img/bg_contents.jpg) no-repeat center top;
  background-size: cover;
  background-attachment: fixed;
  color: #fff;
  font-family: 'Noto Sans JP', sans-serif;
  box-shadow: inset 0 10px 20px rgba(2, 47, 120, 0.4); }
  #contents #contents_inner {
    background: transparent;
    border-radius: 0;
    margin-top: 0; }
  #contents #anchorlink {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 800px;
    margin: 40px auto; }
    @media screen and (max-width: 768px) {
      #contents #anchorlink {
        width: 100%;
        margin: 2rem auto; } }
    #contents #anchorlink li {
      width: calc((100% - 7em) / 8);
      margin: 0 1rem 1rem 0; }
      @media screen and (max-width: 768px) {
        #contents #anchorlink li {
          width: calc((100% - 1em) / 2); } }
      @media screen and (max-width: 768px) {
        #contents #anchorlink li:nth-child(2n) {
          margin-right: 0; } }
      #contents #anchorlink li:nth-child(8),
      #contents #anchorlink li:last-child {
        margin-right: 0; }
      #contents #anchorlink li.wide {
        width: calc((((100% - 7em) / 8) * 4) + 3em); }
        @media screen and (max-width: 768px) {
          #contents #anchorlink li.wide {
            width: 100%; } }
      #contents #anchorlink li a {
        display: block;
        box-sizing: border-box;
        padding: 1rem 0;
        background: rgba(70, 148, 209, 0.5);
        text-align: center;
        color: #fff;
        font-size: 1.2rem;
        font-weight: bold;
        text-decoration: none;
        transition: 0.3s; }
        @media screen and (max-width: 768px) {
          #contents #anchorlink li a {
            width: 100%;
            text-align: center;
            margin-left: 0;
            padding: 0.75rem 0;
            font-size: 1.4rem; } }
        #contents #anchorlink li a:hover {
          background-color: #4694d1; }
  #contents .stage_sec {
    margin: 120px 0; }
    @media screen and (max-width: 768px) {
      #contents .stage_sec {
        margin: 80px 0; } }
    #contents .stage_sec > .inner {
      width: 640px;
      margin: 0 auto;
      text-align: left; }
      @media screen and (max-width: 768px) {
        #contents .stage_sec > .inner {
          width: auto; } }
    #contents .stage_sec .ttl_sec {
      position: relative;
      display: inline-block;
      margin-bottom: 2rem;
      padding: 0.6rem 1.2rem;
      font-size: 2rem;
      font-weight: bold; }
      @media screen and (max-width: 768px) {
        #contents .stage_sec .ttl_sec {
          font-size: 1.8rem; } }
      #contents .stage_sec .ttl_sec span {
        position: relative; }
      #contents .stage_sec .ttl_sec:before {
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        min-height: 100%;
        content: "";
        background-color: #4694d1;
        mix-blend-mode: multiply; }
    #contents .stage_sec .ttl_sub {
      margin: 2rem auto 1rem;
      background-color: #865b3f; }
      @media screen and (max-width: 768px) {
        #contents .stage_sec .ttl_sub {
          width: 100%; } }
      #contents .stage_sec .ttl_sub span {
        display: inline-block;
        padding: 1.2rem 2.4rem;
        color: #fff;
        font-size: 1.8rem;
        line-height: 1.4;
        letter-spacing: 0.1em; }
        @media screen and (max-width: 768px) {
          #contents .stage_sec .ttl_sub span {
            display: block;
            font-size: 1.5rem; } }
    #contents .stage_sec .ttl_sub2 {
      position: relative;
      margin: 0 auto 1.5rem;
      font-size: 1.8rem;
      letter-spacing: 0.1em;
      font-weight: bold; }
      @media screen and (max-width: 768px) {
        #contents .stage_sec .ttl_sub2 {
          width: 100%;
          font-size: 1.6rem; } }
      #contents .stage_sec .ttl_sub2:before {
        display: inline-block;
        margin-right: 0.5rem;
        content: "●"; }
    #contents .stage_sec .desc {
      font-size: 1.6rem;
      line-height: 2;
      font-family: 'Noto Sans JP', serif; }
      @media screen and (max-width: 768px) {
        #contents .stage_sec .desc {
          font-size: 1.4rem; } }
    #contents .stage_sec .text {
      margin-bottom: 1rem;
      font-size: 1.6rem;
      line-height: 2; }
      @media screen and (max-width: 768px) {
        #contents .stage_sec .text {
          font-size: 1.4rem; } }
      #contents .stage_sec .text a {
        color: #4a3124;
        text-decoration: none; }
        #contents .stage_sec .text a:hover {
          text-decoration: underline; }
    #contents .stage_sec strong.ticket-release {
      color: #fff33f;
      font-size: 2.2rem;
      letter-spacing: 0.05em; }
      @media screen and (max-width: 768px) {
        #contents .stage_sec strong.ticket-release {
          font-size: 1.8rem; } }
    #contents .stage_sec .tel {
      margin: 0.5rem auto 1rem;
      font-size: 2.4rem;
      font-family: 'Lato', sans-serif;
      letter-spacing: 0.1em; }
      @media screen and (max-width: 768px) {
        #contents .stage_sec .tel {
          font-size: 2rem;
          line-height: 1.6; } }
    #contents .stage_sec .list_footnote {
      width: 480px;
      margin: 0 auto 2rem;
      font-size: 1.2rem;
      line-height: 1.8;
      text-align: left; }
      @media screen and (max-width: 768px) {
        #contents .stage_sec .list_footnote {
          width: 100%; } }
      #contents .stage_sec .list_footnote li {
        position: relative;
        padding-left: 1.6rem; }
        #contents .stage_sec .list_footnote li:before {
          position: absolute;
          display: block;
          top: 0;
          left: 0;
          width: 1.2rem;
          height: 1.2rem;
          content: "※"; }
    #contents .stage_sec .footnote {
      font-size: 1.3rem;
      line-height: 1.5; }
    #contents .stage_sec .img {
      margin: 0 auto; }
      #contents .stage_sec .img img {
        width: 100%; }
      @media screen and (max-width: 768px) {
        #contents .stage_sec .img {
          width: 100%;
          max-width: 360px; } }
    #contents .stage_sec .btn_link {
      margin: 0 auto 2rem; }
      #contents .stage_sec .btn_link a {
        display: inline-block;
        box-sizing: border-box;
        margin-left: 2rem;
        padding: 2rem 3.6rem;
        background: rgba(70, 148, 209, 0.5);
        border: 2px solid #fff;
        color: #fff;
        font-size: 1.6rem;
        font-weight: bold;
        text-decoration: none;
        line-height: 1.2;
        transition: 0.3s; }
        #contents .stage_sec .btn_link a:first-child {
          margin-left: 0; }
          @media screen and (max-width: 768px) {
            #contents .stage_sec .btn_link a:first-child {
              margin-top: 0; } }
        @media screen and (max-width: 768px) {
          #contents .stage_sec .btn_link a {
            width: 100%;
            text-align: center;
            margin-left: 0;
            padding: 1.5rem 0;
            font-size: 1.4rem; } }
        #contents .stage_sec .btn_link a:hover {
          background-color: #4694d1; }
    #contents .stage_sec .anchor_link {
      margin: 0 auto 2rem; }
      #contents .stage_sec .anchor_link a {
        position: relative;
        display: inline-block;
        box-sizing: border-box;
        padding: 0 0 1.2rem;
        color: #4a3124;
        font-size: 1.6rem;
        font-weight: bold;
        text-decoration: none;
        line-height: 1.4;
        transition: 0.3s; }
        #contents .stage_sec .anchor_link a:after {
          position: absolute;
          bottom: 0;
          left: 50%;
          margin-left: -0.2rem;
          content: "";
          width: 0.6rem;
          height: 0.6rem;
          border-left: 2px solid #4a3124;
          border-bottom: 2px solid #4a3124;
          transform: rotate(-45deg);
          transition: 0.3s; }
        #contents .stage_sec .anchor_link a:hover {
          text-decoration: underline; }
          #contents .stage_sec .anchor_link a:hover:after {
            bottom: -0.4rem; }
    #contents .stage_sec .list-price {
      margin: 2rem 0 2rem;
      font-size: 2.2rem;
      line-height: 2;
      letter-spacing: 0.05em; }
      @media screen and (max-width: 768px) {
        #contents .stage_sec .list-price {
          font-size: 1.8rem; } }
      #contents .stage_sec .list-price.first {
        margin-top: 0; }
      #contents .stage_sec .list-price li {
        position: relative; }
        #contents .stage_sec .list-price li:before {
          display: inline-block;
          margin-right: 0.5em;
          content: "●"; }
    #contents .stage_sec#lead {
      margin: 8vw 0; }
      @media screen and (min-width: 769px) {
        #contents .stage_sec#lead {
          display: none; } }
      #contents .stage_sec#lead .desc {
        text-align: center;
        font-weight: bold;
        font-size: 3.2vw; }
    #contents .stage_sec#story .ttl_story {
      width: 180px;
      margin-bottom: 1.6rem; }
      @media screen and (max-width: 768px) {
        #contents .stage_sec#story .ttl_story {
          width: 50%; } }
      #contents .stage_sec#story .ttl_story img {
        width: 100%; }
    #contents .stage_sec#story .desc {
      display: inline-block;
      text-align: left;
      white-space: nowrap; }
      @media screen and (max-width: 768px) {
        #contents .stage_sec#story .desc {
          white-space: normal; } }
    #contents .stage_sec#cast .list_cast li {
      display: inline-block;
      margin-right: 2rem;
      font-size: 1.8rem;
      line-height: 2;
      letter-spacing: 0.1em;
      font-weight: bold; }
      @media screen and (max-width: 768px) {
        #contents .stage_sec#cast .list_cast li {
          font-size: 1.8rem; } }
      #contents .stage_sec#cast .list_cast li.strong:before {
        content: "／　"; }
      #contents .stage_sec#cast .list_cast li .sub {
        font-size: 1.3rem;
        font-weight: normal; }
        @media screen and (max-width: 768px) {
          #contents .stage_sec#cast .list_cast li .sub {
            font-size: 1.2rem; } }
    #contents .stage_sec#cast .img {
      width: 100%;
      margin-top: 6rem; }
    #contents .stage_sec#timetable .img {
      width: 100%;
      margin-bottom: 2rem; }
    #contents .stage_sec#ticket-buy .ticket_howtobuy {
      margin: 0 auto 4rem; }
      @media screen and (max-width: 768px) {
        #contents .stage_sec#ticket-buy .ticket_howtobuy {
          margin: 4.8rem auto; } }
      @media screen and (max-width: 768px) {
        #contents .stage_sec#ticket-buy .ticket_howtobuy .text {
          text-align: left; } }
      #contents .stage_sec#ticket-buy .ticket_howtobuy .text a {
        position: relative;
        padding-left: 1.6rem; }
        #contents .stage_sec#ticket-buy .ticket_howtobuy .text a:before {
          position: absolute;
          display: block;
          top: 1rem;
          left: 0;
          width: 0.4rem;
          height: 0.4rem;
          border-top: 2px solid #fff;
          border-right: 2px solid #fff;
          content: "";
          transform: rotate(45deg); }
    #contents .stage_sec#ticket-buy #corich_frame {
      width: 340px;
      margin: 0 0 1rem; }
      @media screen and (max-width: 768px) {
        #contents .stage_sec#ticket-buy #corich_frame {
          width: 100%; } }
      #contents .stage_sec#ticket-buy #corich_frame p.mobile {
        margin-bottom: 1rem;
        font-size: 1.3rem;
        line-height: 1.4; }
        #contents .stage_sec#ticket-buy #corich_frame p.mobile a {
          color: #fff;
          text-decoration: none; }
      #contents .stage_sec#ticket-buy #corich_frame iframe {
        margin-bottom: 1rem; }
    #contents .stage_sec#price .box {
      padding: 1rem;
      background-color: rgba(6, 42, 112, 0.5);
      text-align: center; }
      @media screen and (max-width: 768px) {
        #contents .stage_sec#price .box {
          text-align: left; } }
      #contents .stage_sec#price .box .mark {
        display: block;
        width: 240px;
        max-width: 100%;
        height: auto;
        margin: 0 auto 1rem; }
    #contents .stage_sec#theater .name_theater {
      margin-bottom: 1rem;
      font-size: 2.2rem;
      font-weight: bold;
      line-height: 1.6; }
      @media screen and (max-width: 768px) {
        #contents .stage_sec#theater .name_theater {
          font-size: 1.8rem; } }
    #contents .stage_sec#theater .data_theater {
      margin-bottom: 2rem;
      display: block;
      font-size: 1.8rem;
      line-height: 1.6;
      font-weight: normal; }
      @media screen and (max-width: 768px) {
        #contents .stage_sec#theater .data_theater {
          font-size: 1.5rem; } }
    #contents .stage_sec#theater .img {
      width: 100%;
      margin-bottom: 2rem; }
    @media screen and (max-width: 768px) {
      #contents .stage_sec#theater .text {
        text-align: left;
        font-size: 1.3rem; } }
    #contents .stage_sec#hanamaki {
      padding: 1rem;
      border: 1px solid #694B3A;
      background-color: #fff; }
      @media screen and (max-width: 768px) {
        #contents .stage_sec#hanamaki {
          padding: 0.5rem; } }
      #contents .stage_sec#hanamaki > .inner {
        width: auto;
        padding: 3rem 4rem 2rem;
        border: 1px solid #694B3A;
        background-color: #ECECCC; }
        @media screen and (max-width: 768px) {
          #contents .stage_sec#hanamaki > .inner {
            padding: 1rem; } }
      #contents .stage_sec#hanamaki .ttl_hanamaki {
        width: 480px;
        margin: 0 auto 3rem; }
        @media screen and (max-width: 768px) {
          #contents .stage_sec#hanamaki .ttl_hanamaki {
            width: auto; } }
        #contents .stage_sec#hanamaki .ttl_hanamaki img {
          width: 100%; }
      #contents .stage_sec#hanamaki .wrap_cols {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        color: #694B3A; }
        @media screen and (max-width: 768px) {
          #contents .stage_sec#hanamaki .wrap_cols {
            display: block; } }
        #contents .stage_sec#hanamaki .wrap_cols.col2 .col {
          width: calc((100% - 4rem) / 2); }
          @media screen and (max-width: 768px) {
            #contents .stage_sec#hanamaki .wrap_cols.col2 .col {
              width: auto;
              margin-bottom: 4rem; } }
          @media screen and (max-width: 768px) {
            #contents .stage_sec#hanamaki .wrap_cols.col2 .col:last-child {
              margin-bottom: 0; } }
          #contents .stage_sec#hanamaki .wrap_cols.col2 .col .ttl_col {
            position: relative;
            margin-bottom: 2rem;
            text-align: center;
            font-size: 1.8rem;
            line-height: 1.4;
            font-weight: bold; }
            #contents .stage_sec#hanamaki .wrap_cols.col2 .col .ttl_col span {
              display: inline-block; }
            #contents .stage_sec#hanamaki .wrap_cols.col2 .col .ttl_col:before,
            #contents .stage_sec#hanamaki .wrap_cols.col2 .col .ttl_col:after {
              position: absolute;
              display: block;
              top: 50%;
              width: calc(160px / 4);
              height: calc(133px / 4);
              transform: translateY(-50%);
              content: "";
              background-repeat: no-repeat;
              background-position: 0 0;
              background-size: cover; }
            #contents .stage_sec#hanamaki .wrap_cols.col2 .col .ttl_col:before {
              left: 0;
              background-image: url(../img/ttl_col-l.png); }
            #contents .stage_sec#hanamaki .wrap_cols.col2 .col .ttl_col:after {
              right: 0;
              background-image: url(../img/ttl_col-r.png); }
          #contents .stage_sec#hanamaki .wrap_cols.col2 .col .desc {
            margin-bottom: 1rem;
            font-size: 1.4rem;
            line-height: 1.6; }
          #contents .stage_sec#hanamaki .wrap_cols.col2 .col .img {
            margin-bottom: 2rem; }
            #contents .stage_sec#hanamaki .wrap_cols.col2 .col .img img {
              width: 100%; }
          #contents .stage_sec#hanamaki .wrap_cols.col2 .col .place_kenji .ttl_place {
            margin-bottom: 0.6rem;
            padding: 0.6rem 0;
            background-color: #694B3A;
            color: #fff;
            text-align: center;
            font-size: 1.6rem; }
    #contents .stage_sec#staff .ttl_staff_sub {
      display: inline-block;
      margin: 2rem 0 0.6rem;
      padding: 0.2rem 0.7rem 0.2rem 0.8rem;
      border: 1px solid #fff;
      font-size: 1.4rem;
      letter-spacing: 0.1em; }
      @media screen and (max-width: 768px) {
        #contents .stage_sec#staff .ttl_staff_sub {
          font-size: 1.5rem; } }
    #contents .stage_sec#staff .list_staff {
      margin-bottom: 1rem;
      font-size: 1.4rem;
      line-height: 1.6; }
      #contents .stage_sec#staff .list_staff li {
        display: inline-block;
        margin-right: 1rem; }
        #contents .stage_sec#staff .list_staff li .sub {
          font-size: 1.2rem; }
    #contents .stage_sec#forCOVID19 .inner,
    #contents .stage_sec#importantAnnouncement .inner {
      width: 720px;
      margin: 0 auto;
      padding: 4rem;
      background-color: rgba(2, 47, 120, 0.67); }
      @media screen and (max-width: 768px) {
        #contents .stage_sec#forCOVID19 .inner,
        #contents .stage_sec#importantAnnouncement .inner {
          width: auto;
          padding: 2rem 1rem; } }
    #contents .stage_sec#forCOVID19 h2,
    #contents .stage_sec#importantAnnouncement h2 {
      margin-bottom: 2rem;
      font-size: 1.8rem;
      font-weight: bold;
      line-height: 1.4;
      text-align: center; }
      @media screen and (max-width: 768px) {
        #contents .stage_sec#forCOVID19 h2,
        #contents .stage_sec#importantAnnouncement h2 {
          text-align: center; } }
    #contents .stage_sec#forCOVID19 h3,
    #contents .stage_sec#importantAnnouncement h3 {
      position: relative;
      margin-top: 4rem;
      margin-bottom: 1.4rem;
      padding: 0.8rem 0 0.8rem 1rem;
      border-left: 8px solid #4694d1;
      background-color: #022f78;
      font-size: 1.6rem;
      font-weight: bold;
      line-height: 1.4;
      text-align: left; }
    #contents .stage_sec#forCOVID19 h4,
    #contents .stage_sec#importantAnnouncement h4 {
      margin-top: 1.4rem;
      margin-bottom: 1.2rem;
      line-height: 1.4;
      font-size: 1.3rem;
      font-weight: bold;
      text-align: left; }
    #contents .stage_sec#forCOVID19 p,
    #contents .stage_sec#importantAnnouncement p {
      margin-bottom: 1.2rem;
      font-size: 1.2rem;
      line-height: 1.8;
      text-align: left; }
      #contents .stage_sec#forCOVID19 p.notice,
      #contents .stage_sec#importantAnnouncement p.notice {
        margin: 3.6rem auto 1.2rem;
        padding: 0.5rem 1rem;
        border: 6px solid #4694d1;
        background-color: #022f78;
        text-align: center; }
        #contents .stage_sec#forCOVID19 p.notice span,
        #contents .stage_sec#importantAnnouncement p.notice span {
          font-size: 1.8rem;
          margin-bottom: 0.5rem;
          letter-spacing: 0.1em;
          font-weight: bold; }
          @media screen and (max-width: 768px) {
            #contents .stage_sec#forCOVID19 p.notice span,
            #contents .stage_sec#importantAnnouncement p.notice span {
              font-size: 1.5rem; } }
    #contents .stage_sec#forCOVID19 a,
    #contents .stage_sec#importantAnnouncement a {
      position: relative;
      display: inline-block;
      padding-left: 1.6rem;
      color: #fff;
      text-decoration: none;
      transition: 0.3s; }
      @media screen and (max-width: 768px) {
        #contents .stage_sec#forCOVID19 a,
        #contents .stage_sec#importantAnnouncement a {
          text-decoration: underline; } }
      #contents .stage_sec#forCOVID19 a:hover,
      #contents .stage_sec#importantAnnouncement a:hover {
        color: #fff33f;
        text-decoration: underline; }
        #contents .stage_sec#forCOVID19 a:hover:before,
        #contents .stage_sec#importantAnnouncement a:hover:before {
          left: 3px;
          border-color: #fff33f; }
      #contents .stage_sec#forCOVID19 a:before,
      #contents .stage_sec#importantAnnouncement a:before {
        position: absolute;
        display: block;
        top: 9px;
        left: 0;
        width: 4px;
        height: 4px;
        content: "";
        border-right: 2px solid #fff;
        border-bottom: 2px solid #fff;
        transform: rotate(-45deg);
        transition: 0.3s; }
    #contents .stage_sec#forCOVID19 ul,
    #contents .stage_sec#importantAnnouncement ul {
      margin-bottom: 1.2rem;
      font-size: 1.2rem;
      line-height: 1.8;
      text-align: left; }
      #contents .stage_sec#forCOVID19 ul li,
      #contents .stage_sec#importantAnnouncement ul li {
        position: relative;
        margin-bottom: 1.2rem;
        padding-left: 1.6rem; }
        #contents .stage_sec#forCOVID19 ul li:before,
        #contents .stage_sec#importantAnnouncement ul li:before {
          position: absolute;
          display: block;
          top: 0;
          left: 0;
          width: 1.2rem;
          height: 1.2rem; }
        #contents .stage_sec#forCOVID19 ul li ul,
        #contents .stage_sec#importantAnnouncement ul li ul {
          margin-top: 1rem; }
      #contents .stage_sec#forCOVID19 ul.list_dot > li:before,
      #contents .stage_sec#importantAnnouncement ul.list_dot > li:before {
        content: "・"; }
      #contents .stage_sec#forCOVID19 ul.list_square > li:before,
      #contents .stage_sec#importantAnnouncement ul.list_square > li:before {
        content: "■"; }

@media screen and (max-width: 768px) {
  #hero {
    height: auto; }
    #hero img {
      position: relative;
      top: auto;
      left: auto;
      transform: translateX(0);
      width: 100%;
      height: auto; } }