@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap");
body {
  font-size: 16px;
  font-family: "Noto Serif JP", serif;
  font-weight: 400;
  line-height: 1.75em;
  color: #fff; }

h1,
h2,
h3,
h4,
h5,
h6,
input,
button {
  font-size: 16px;
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
  line-height: 1.75em; }

.min {
  font-size: .8em; }

.strong {
  font-size: 1.2em; }

.chara-name-head {
  font-size: 1.5em;
  font-weight: 500; }

.chara-kana {
  letter-spacing: 2px; }

.story-text p {
  font-size: 1.2em;
  line-height: 1.8;
  letter-spacing: 2px; }

.ti-head {
  font-size: 1.5em; }

.flow-head {
  font-size: 1.3em;
  font-weight: bold; }

.ti-desc {
  letter-spacing: 2px;
  font-size: 1.3em;
  line-height: 1.8; }

td .strong {
  font-weight: bold;
  font-size: 1.3em; }

#hkgk .strong {
  line-height: 1.75em; }

@media screen and (max-width: 900px) {
  body {
    font-size: 15px;
    font-family: "Noto Serif JP", serif;
    font-weight: 400;
    line-height: 1.75em; } }
@media screen and (max-width: 540px) {
  body {
    font-size: 14px;
    font-family: "Noto Serif JP", serif;
    font-weight: 400;
    line-height: 1.75em; }

  .ti-head {
    font-size: 1.3em; }

  td .strong {
    font-size: 1.2em; } }
@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
@keyframes charaFade {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
@keyframes bounce {
  0% {
    transform: scale(1); }
  50% {
    transform: scale(0.95); }
  100% {
    transform: scale(1); } }
@keyframes menuAnim {
  0% {
    opacity: 0;
    top: -150px; }
  100% {
    opacity: 1;
    top: 0; } }
@keyframes cherryAnime {
  from {
    transform: rotate3d(1, 1, 1, 0deg); }
  25% {
    transform: rotate3d(1, 1, 1, 90deg); }
  50% {
    transform: rotate3d(1, 1, 1, 180deg); }
  75% {
    transform: rotate3d(1, 1, 1, 270deg); }
  to {
    transform: rotate3d(1, 1, 1, 360deg); } }
#loading {
  position: fixed;
  inset: 0;
  z-index: 99999; }
  #loading .title-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 900;
    width: 80%;
    max-width: 500px; }
    #loading .title-logo .title-logo-in {
      margin: 0 auto; }
  #loading #main__container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, white 0%, #ffebf1 100%);
    overflow: hidden;
    z-index: 1; }
  #loading .cherry {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    will-change: transform, opacity; }
  #loading .cherry__inner {
    border-radius: 40%;
    width: 100%;
    height: 100%; }

.fade {
  opacity: 0; }

.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0; }

html,
body {
  width: 100%;
  height: 100%;
  background-position: center;
  background-blend-mode: lighten;
  background-attachment: fixed;
  overflow-x: clip; }

header {
  width: 100%;
  z-index: 1;
  position: relative; }

img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto; }

section {
  display: block;
  position: relative;
  z-index: 0;
  padding: 120px 0; }

.inner-wrap {
  max-width: 1200px;
  width: calc(100% - 2em);
  padding: 0 1em;
  margin: 0 auto; }

.menu-box {
  position: fixed;
  right: 1em;
  top: 0;
  max-width: 150px;
  width: 100%;
  z-index: 11;
  cursor: pointer; }
  .menu-box .menu-btn {
    position: absolute;
    right: 0;
    top: 0;
    display: none; }
    .menu-box .menu-btn.menu-active {
      opacity: 0;
      display: block;
      animation: menuAnim .75s linear both; }
  .menu-box .menu-close {
    display: none; }

.ti-buy-btn {
  position: fixed;
  right: 0;
  bottom: 0;
  max-width: 150px;
  width: 20%;
  z-index: 8; }

.sns-bt {
  position: fixed;
  right: 1em;
  bottom: 120px;
  z-index: 5; }
  .sns-bt a {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1em auto;
    background: #000;
    border: solid 2px #fff;
    border-radius: 50px;
    width: 50px;
    height: 50px; }
    .sns-bt a img {
      max-width: 40px; }
    .sns-bt a.sns-line {
      background: #6db149; }
    .sns-bt a.sns-fb {
      background: #0061aa; }

#menu {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10;
  background: #000;
  width: 100%;
  height: 100%;
  display: none; }
  #menu .menu-in {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 768px;
    margin: 1em auto;
    z-index: 10;
    width: calc(100% - 2em); }
    #menu .menu-in a {
      color: #fff;
      display: block;
      text-align: center;
      margin: 1em auto;
      padding-bottom: 1em;
      border-bottom: solid 1px #fff;
      position: relative;
      z-index: 5; }
      #menu .menu-in a:hover {
        opacity: .5; }
  #menu::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(../images/bg-main.webp);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 1;
    filter: blur(15px);
    opacity: .5; }

a {
  transition-duration: .3s; }
  a:hover {
    opacity: .8; }

.bg-box {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: #f091ae; }
  .bg-box::after {
    content: "";
    background-image: url(../images/bg-main.webp);
    background-size: cover;
    background-position: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: .4;
    background-blend-mode: soft-light; }

#top .main-v .main-v-pc {
  display: block; }
#top .main-v .main-v-sp {
  display: none; }

#copy {
  padding: 120px 0;
  position: relative;
  z-index: 3;
  background: #fff;
  margin-top: -2px; }
  #copy .copy-head {
    max-width: 840px;
    margin: 0 auto; }
  #copy:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 400px;
    left: 0;
    top: -200px;
    background: url(../images/bg-buble.webp);
    background-size: cover;
    background-position: center top;
    z-index: -1; }
  #copy:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 400px;
    left: 0;
    bottom: -200px;
    background: url(../images/bg-buble.webp);
    background-size: cover;
    background-position: center bottom;
    z-index: -1; }

.head-box {
  max-width: 380px;
  margin: 0 auto 40px; }

#story {
  background-color: #8d4014;
  text-align: center;
  position: relative;
  z-index: 0;
  padding-top: 180px; }
  #story .inner-wrap {
    position: relative;
    z-index: 1; }
  #story::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 400px;
    left: 0;
    top: -1px;
    background: url(../images/bg-blur.webp);
    background-size: cover;
    background-position: center bottom;
    z-index: 1;
    mix-blend-mode: screen;
    pointer-events: none; }
  #story:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url(../images/bg-story.webp);
    background-size: cover;
    background-position: center top;
    background-blend-mode: soft-light;
    opacity: .2;
    z-index: 0; }
  #story .more-btn {
    max-width: 120px;
    padding: 1em;
    margin: 1em auto;
    border-top: solid 1px #fff;
    border-bottom: solid 1px #fff;
    margin-top: 40px;
    cursor: pointer; }
  #story .s-shadow {
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.6));
    /*  filter: drop-shadow(2px 2px 4px rgba(255, 255, 255, 0.5));
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); */ }
  #story .story-text {
    max-width: 800px;
    margin: 0 auto; }
    #story .story-text .bld {
      font-weight: bold; }
    #story .story-text p {
      margin-bottom: 1em; }
    #story .story-text .s-kazuha {
      color: #c6e37c;
      font-weight: bold; }
    #story .story-text .s-kotone {
      color: #ff8eb0;
      font-weight: bold; }
    #story .story-text .s-nagisa {
      color: #c6adff;
      font-weight: bold; }
    #story .story-text .s-misaki {
      color: #ebc35f;
      font-weight: bold; }
  #story .story-ac {
    display: none;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.6));
    /*  filter: drop-shadow(2px 2px 4px rgba(255, 255, 255, 0.5));
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); */ }

#character {
  padding-bottom: 0;
  margin-top: -310px; }
  #character .chara-sp {
    display: none; }
  #character .character-in {
    position: relative; }
    #character .character-in .chara-head {
      position: absolute;
      left: 1em;
      top: 65px;
      z-index: 0; }
      #character .character-in .chara-head img {
        width: 25vw;
        margin: 0;
        transform: rotate(-4.5deg);
        max-width: 380px; }
      #character .character-in .chara-head::after {
        content: "";
        background: #bba9c6;
        width: 100vw;
        height: 50vh;
        height: 50dvh;
        position: absolute;
        left: -100px;
        top: 8vh;
        z-index: -1;
        transform: rotate(7deg); }
    #character .character-in::after {
      content: "";
      background-color: #fff;
      background-image: url(../images/bg-chara.webp);
      background-size: cover;
      background-position: center top;
      background-repeat: no-repeat;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      --slope: 150px;
      clip-path: polygon(0 var(--slope), 100% 0, 100% 100%, 0 100%); }
  #character .chara-desc-box {
    background-color: #ab9bc9;
    padding: 60px 0;
    text-align: center;
    position: relative;
    border-bottom: solid 15px #a9bf70;
    z-index: 2;
    transition-duration: .3s; }
    #character .chara-desc-box.chara-nagisa {
      background-color: #ab9bc9; }
    #character .chara-desc-box.chara-misaki {
      background-color: #f3b518; }
    #character .chara-desc-box.chara-kazuha {
      background-color: #7bc49c; }
    #character .chara-desc-box.chara-kotone {
      background-color: #f6c7c7; }
    #character .chara-desc-box::before {
      content: "";
      position: absolute;
      width: 33%;
      height: 15px;
      left: 0;
      bottom: -15px;
      background: #ef9a29; }
    #character .chara-desc-box::after {
      content: "";
      position: absolute;
      width: 33%;
      height: 15px;
      right: 0;
      bottom: -15px;
      background: #f091ae; }
    #character .chara-desc-box .chara-name {
      margin-bottom: 1em; }
    #character .chara-desc-box .chara-desc-item {
      max-width: 500px;
      margin: 0 auto;
      position: relative;
      padding: 0 3em;
      width: calc(100% - 6em); }
      #character .chara-desc-box .chara-desc-item .chara-btn {
        position: absolute;
        z-index: 1;
        background-image: url(../images/tri.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        width: 2em;
        height: 2em;
        cursor: pointer;
        transition-duration: .3s; }
        #character .chara-desc-box .chara-desc-item .chara-btn.chara-prev {
          left: 0;
          top: 50%;
          background-image: url(../images/tri-prev.svg); }
          #character .chara-desc-box .chara-desc-item .chara-btn.chara-prev:hover {
            left: -.5em; }
        #character .chara-desc-box .chara-desc-item .chara-btn.chara-next {
          right: 0;
          top: 50%;
          background-image: url(../images/tri.svg); }
          #character .chara-desc-box .chara-desc-item .chara-btn.chara-next:hover {
            right: -.5em; }
  #character .character-box {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 120px; }
    #character .character-box .chara-flex {
      display: flex;
      align-items: flex-end;
      min-height: 450px; }
      #character .character-box .chara-flex .chara-item {
        width: 20%;
        transition-duration: .3s;
        filter: grayscale(1);
        cursor: pointer; }
        #character .character-box .chara-flex .chara-item.chara-active {
          width: 40%;
          filter: grayscale(0);
          pointer-events: none; }
    #character .character-box .chara-thm {
      width: 50%;
      margin-left: auto;
      pointer-events: none;
      z-index: 2;
      position: relative; }
      #character .character-box .chara-thm .chara-pick {
        display: none;
        animation: charaFade .5s linear both; }
        #character .character-box .chara-thm .chara-pick.chara-pick-active {
          display: block; }

#howtoplay {
  background: #fff;
  position: relative;
  z-index: 1;
  padding-bottom: 0; }
  #howtoplay .inner-wrap {
    max-width: 1400px; }
  #howtoplay .flow-head {
    color: #f091ae;
    margin: 1rem 0; }
  #howtoplay .flow-box {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    width: calc(100% - 50px - 2em);
    padding: 0 calc(25px + 1em); }
  #howtoplay .flow-swiper {
    overflow: hidden;
    padding-top: 40px;
    padding-bottom: 10px;
    width: 100%; }
  #howtoplay .flow-btn {
    padding: 1rem 2rem;
    background: #f091ae;
    border: solid 1px #f091ae;
    display: block;
    margin: 1rem auto;
    text-align: center;
    width: fit-content;
    border-radius: 15px 0;
    color: #fff; }
    #howtoplay .flow-btn:hover {
      background: #fff;
      color: #f091ae; }
  #howtoplay .swiper-slide {
    height: initial; }
  #howtoplay .flow-item {
    position: relative;
    margin: 0 1%;
    z-index: 2; }
    #howtoplay .flow-item .flow-thm {
      width: calc(100% - 2em);
      margin: 0 auto; }
    #howtoplay .flow-item .flow-thm-flex {
      width: calc(100% - 2em);
      margin: 0 auto;
      display: flex;
      align-items: flex-end; }
      #howtoplay .flow-item .flow-thm-flex .col-l {
        width: 30%; }
      #howtoplay .flow-item .flow-thm-flex .col-r {
        width: 65%;
        margin-left: auto;
        transform: rotate(5deg); }
    #howtoplay .flow-item::after {
      content: "";
      position: absolute;
      right: -10px;
      top: 0;
      width: 1px;
      height: 100%;
      background: #f2f2f2; }
    #howtoplay .flow-item.last-item::after {
      display: none; }
  #howtoplay .slide-img {
    box-sizing: border-box;
    width: 100%;
    /* transform: translateY(-20%); */
    position: relative;
    z-index: 1; }
  #howtoplay .flow-textbox {
    padding: 1em;
    position: relative;
    z-index: 1; }
  #howtoplay .swiper-btn {
    position: absolute;
    right: 0;
    top: 50%;
    background: url(../images/tri-b.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 25px;
    height: 25px;
    cursor: pointer;
    transition-duration: .3s; }
    #howtoplay .swiper-btn.swiper-prev {
      right: initial;
      left: 0;
      transform: rotate(-180deg); }
    #howtoplay .swiper-btn.pc-no-active {
      opacity: 0;
      pointer-events: none; }
  #howtoplay .flow-item {
    color: #333; }
  #howtoplay .sankajyo {
    max-width: 760px;
    margin: 20px auto 0; }
  #howtoplay .notice-list li {
    padding-left: 1em;
    position: relative; }
    #howtoplay .notice-list li:before {
      content: "※";
      position: absolute;
      left: 0;
      top: 0; }

#play {
  background: #fff;
  position: relative;
  z-index: 1; }
  #play .play-flex {
    display: flex;
    margin: 0 auto;
    max-width: 900px; }
    #play .play-flex .play-item {
      width: 18%;
      margin: 1% auto;
      text-align: center;
      color: #333; }
      #play .play-flex .play-item img {
        max-width: 200px; }

#ticket {
  width: calc(100% - 120px);
  margin: 0 auto;
  color: #1a1a1a;
  position: relative;
  z-index: 4; }
  #ticket .inner-wrap {
    width: 100%;
    padding: 0; }
  #ticket .ti-desc .sp {
    display: none; }
  #ticket .ticket-bg-in {
    max-width: initial;
    background: rgba(255, 255, 255, 0.9);
    margin: 0 auto;
    padding: 90px 0; }
  #ticket .ti-item {
    max-width: 800px;
    margin: 0px auto 80px; }
    #ticket .ti-item .tab-list {
      display: flex;
      max-width: 540px;
      margin: 40px auto;
      width: calc(100% - 2em); }
      #ticket .ti-item .tab-list .tab-item {
        width: calc(48% - 2rem);
        margin: 0 auto;
        position: relative;
        padding: .75rem 1rem;
        z-index: 0;
        text-align: center;
        cursor: pointer;
        transition-duration: .3s;
        border: solid 1px #9e5c33;
        background: rgba(255, 255, 255, 0);
        color: #9e5c33;
        border-radius: 100px; }
        #ticket .ti-item .tab-list .tab-item.tab-active {
          color: #fff;
          background: #9e5c33; }
        #ticket .ti-item .tab-list .tab-item:hover {
          color: #fff;
          background: #9e5c33; }
    #ticket .ti-item .ticket-table {
      display: none; }
      #ticket .ti-item .ticket-table.ticket-1 {
        display: block; }
    #ticket .ti-item .u22-table-head {
      text-align: center;
      border-top: solid 1px #fff;
      padding-top: 40px;
      max-width: 940px;
      margin: 0 auto; }
      #ticket .ti-item .u22-table-head span {
        display: block;
        margin: 1em auto;
        position: relative;
        color: #f6832e;
        text-align: center;
        padding: .25em 2em;
        width: fit-content;
        z-index: 1; }
        #ticket .ti-item .u22-table-head span::after {
          content: "";
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background: #fff;
          transform: skewX(160deg);
          z-index: -1;
          transition-duration: .3s; }
    #ticket .ti-item table {
      width: 100%;
      max-width: 768px;
      margin: 40px auto; }
      #ticket .ti-item table.u22-table {
        margin-top: 20px; }
      #ticket .ti-item table .sp {
        display: none; }
      #ticket .ti-item table tr {
        display: flex; }
        #ticket .ti-item table tr th,
        #ticket .ti-item table tr td {
          width: calc(33% - 1em);
          padding: .5em;
          position: relative;
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-flow: wrap; }
          #ticket .ti-item table tr th:after,
          #ticket .ti-item table tr td:after {
            content: "";
            width: 1px;
            height: 80%;
            background: #1a1a1a;
            position: absolute;
            right: 0;
            top: 10%; }
          #ticket .ti-item table tr th .sp,
          #ticket .ti-item table tr td .sp {
            display: none; }
      #ticket .ti-item table.u22-table tr td,
      #ticket .ti-item table.u22-table tr th {
        width: calc(50% - 1em); }
      #ticket .ti-item table thead td::after,
      #ticket .ti-item table thead th::after {
        display: none; }
  #ticket .ticket-notice {
    text-align: center;
    position: relative; }
    #ticket .ticket-notice::before {
      content: "";
      width: calc(50% - 9em);
      height: 1px;
      background: #1a1a1a;
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      z-index: 1; }
    #ticket .ticket-notice:after {
      content: "";
      width: calc(50% - 9em);
      height: 1px;
      background: #1a1a1a;
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      z-index: 1; }
    #ticket .ticket-notice .notice-head {
      padding: 0 3em;
      position: relative;
      z-index: 0;
      cursor: pointer;
      margin-left: -1em; }
      #ticket .ticket-notice .notice-head::after {
        content: "";
        position: absolute;
        right: 1em;
        top: .25em;
        z-index: 0;
        background: url(../images/arrow.svg);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        width: 1em;
        height: 1em;
        transition-duration: .3s; }
      #ticket .ticket-notice .notice-head.ticket-notice-active:after {
        transform: rotate(180deg); }
  #ticket .ti-box {
    text-align: center; }
    #ticket .ti-box .ti-head {
      padding: 1em;
      text-align: center;
      border-top: solid 1px #1a1a1a;
      border-bottom: solid 1px #1a1a1a;
      margin-bottom: 20px; }
  #ticket .fc-box {
    text-align: center;
    margin: 40px auto; }
    #ticket .fc-box a {
      display: block;
      max-width: 420px;
      margin: 0 auto; }
  #ticket .ticket-notice-ac {
    max-width: 940px;
    width: 100%;
    margin: 1em auto;
    display: none; }
    #ticket .ticket-notice-ac p {
      padding-left: 1em;
      margin-bottom: 1em;
      padding-bottom: 1em;
      border-bottom: solid 1px #1a1a1a;
      position: relative;
      text-align: left; }
      #ticket .ticket-notice-ac p::after {
        content: "・";
        position: absolute;
        left: 0;
        top: 0; }
    #ticket .ticket-notice-ac .repeat-link {
      color: #f091ae;
      text-decoration: underline;
      cursor: pointer; }
      #ticket .ticket-notice-ac .repeat-link:hover {
        text-decoration: initial; }
  #ticket .place .ti-item:last-of-type {
    margin-bottom: 0; }
  #ticket .place .ticket-api-box {
    padding: 1em; }
  #ticket .place .place-box iframe {
    width: 100%;
    display: block; }
  #ticket .place .place-box .place-item {
    text-align: center; }
    #ticket .place .place-box .place-item .place-name-head {
      color: #fff;
      background: #9e5c33;
      border-radius: 50px 50px 0 0;
      padding: 1em; }
    #ticket .place .place-box .place-item .place-ac {
      background: #fff; }
      #ticket .place .place-box .place-item .place-ac a {
        color: #f091ae;
        text-decoration: underline; }
        #ticket .place .place-box .place-item .place-ac a:hover {
          text-decoration: initial; }
    #ticket .place .place-box .place-item .place-open {
      color: #fff;
      background: #9e5c33;
      border-radius: 0 0 50px 50px;
      padding: 1em 3em;
      cursor: pointer;
      position: relative;
      border-top: solid 1px #fff; }
      #ticket .place .place-box .place-item .place-open::after {
        content: "";
        position: absolute;
        top: 1.5em;
        right: 2em;
        background: url(../images/arrow-w.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        width: 1em;
        height: 1em;
        transition-duration: .3s; }
      #ticket .place .place-box .place-item .place-open.place-active::after {
        transform: rotate(180deg); }
    #ticket .place .place-box .place-item .data-item {
      padding: 1em;
      width: calc(100% - 2em); }
      #ticket .place .place-box .place-item .data-item .data-flex {
        display: flex;
        align-items: center; }
        #ticket .place .place-box .place-item .data-item .data-flex iframe {
          width: 48%;
          height: 300px;
          display: block; }
        #ticket .place .place-box .place-item .data-item .data-flex .place-desc-in {
          width: 48%;
          margin: 0 auto;
          text-align: left; }
  #ticket .place .place-next {
    text-align: center;
    margin: 40px auto 0;
    width: fit-content;
    color: #9e5c33;
    font-weight: bold; }
  #ticket .u22 {
    display: flex;
    align-items: center;
    max-width: 900px;
    margin: 40px auto; }
    #ticket .u22 .col-l {
      width: 20%; }
    #ticket .u22 .col-r {
      width: calc(80% - 1em);
      margin-left: 1em; }
      #ticket .u22 .col-r a {
        color: #f091ae;
        text-decoration: underline; }

#notice {
  position: relative;
  padding: 0;
  text-align: center;
  z-index: 3; }
  #notice .inner-wrap {
    position: relative;
    z-index: 1;
    max-width: 1000px; }
  #notice::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 400px;
    left: 0;
    top: 0%;
    background: url(../images/bg-blur.webp);
    background-size: cover;
    background-position: center bottom;
    z-index: 1;
    mix-blend-mode: screen;
    pointer-events: none; }
  #notice::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 400px;
    left: 0;
    top: -200px;
    background: url(../images/bg-buble.webp);
    background-size: cover;
    background-position: center top;
    z-index: 0; }
  #notice .notice-in {
    background: #b15c2b;
    padding: 180px 0 120px; }
    #notice .notice-in:before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-image: url(../images/bg-footer.webp);
      background-size: cover;
      background-position: center;
      background-blend-mode: soft-light;
      opacity: .2;
      z-index: 0; }
  #notice .notice-item {
    margin-bottom: 40px; }
    #notice .notice-item .notice-ac-head {
      border-bottom: solid 1px #fff;
      padding-bottom: 1em;
      margin-bottom: 1em;
      text-align: left;
      position: relative;
      padding-left: 1em;
      cursor: pointer; }
      #notice .notice-item .notice-ac-head::after {
        content: "";
        position: absolute;
        right: 1em;
        top: 0;
        width: 1em;
        height: 1em;
        background: url(../images/arrow-w.svg);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        transition-duration: .3s; }
      #notice .notice-item .notice-ac-head.notice-active:after {
        transform: rotate(180deg); }
    #notice .notice-item .notice-ac {
      display: none;
      text-align: left; }
    #notice .notice-item .read-box .read-head {
      margin-bottom: .5em;
      padding-bottom: .5em;
      border-bottom: dashed 1px #fff;
      margin-top: 1em; }
    #notice .notice-item .read-box.mark-box p {
      padding-left: 1em;
      position: relative;
      text-align: left; }
      #notice .notice-item .read-box.mark-box p::after {
        content: "・";
        position: absolute;
        left: 0;
        top: 0; }
    #notice .notice-item .read-box a {
      color: #fff;
      text-decoration: underline; }
      #notice .notice-item .read-box a:hover {
        text-decoration: initial; }

footer {
  background: #fff;
  color: #333;
  position: relative;
  z-index: 2;
  padding: 90px 0; }
  footer .ft-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 500px;
    margin: 40px auto; }
  footer .pop-bnr-flex {
    max-width: 840px;
    margin: 40px auto;
    display: flex; }
    footer .pop-bnr-flex .bnr-item {
      width: 48%;
      margin: 1% auto;
      cursor: pointer;
      display: block; }
  footer .ft-sns {
    text-align: center;
    margin: 0 auto; }
    footer .ft-sns .ft-sns-flex {
      display: flex;
      max-width: 230px;
      margin: 1em auto; }
      footer .ft-sns .ft-sns-flex a {
        display: block;
        width: 27%;
        margin: 0 3%; }
  footer .copy-right {
    text-align: center; }

#rdg-pop,
#hkgk-pop {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 110;
  display: none;
  color: #1a1a1a; }
  #rdg-pop .close-bt,
  #hkgk-pop .close-bt {
    position: absolute;
    top: -50px;
    right: -50px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    background: #fff;
    border: solid 2px #9e5c33;
    padding: 2px; }
    #rdg-pop .close-bt:before,
    #hkgk-pop .close-bt:before {
      content: "";
      width: 100%;
      height: 3px;
      background: #9e5c33;
      position: absolute;
      right: 0;
      top: 50%;
      transform: rotate(-45deg); }
    #rdg-pop .close-bt:after,
    #hkgk-pop .close-bt:after {
      content: "";
      width: 100%;
      height: 3px;
      background: #9e5c33;
      position: absolute;
      right: 0;
      top: 50%;
      transform: rotate(45deg); }
  #rdg-pop p,
  #hkgk-pop p {
    margin-bottom: 1em; }
  #rdg-pop .rdg-in,
  #hkgk-pop .rdg-in {
    width: calc(90% - 2em - 6px);
    padding: 1em;
    border: solid 3px #9e5c33;
    max-width: 500px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #fff; }
  #rdg-pop .youtube iframe,
  #hkgk-pop .youtube iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    display: block; }
  #rdg-pop .img,
  #hkgk-pop .img {
    width: 100%;
    height: auto; }
  #rdg-pop .rdg-text,
  #hkgk-pop .rdg-text {
    margin: 1em auto; }
  #rdg-pop .btn,
  #hkgk-pop .btn {
    max-width: 280px;
    text-align: center;
    padding: .5em;
    display: block;
    width: calc(100% - 3em - 4px);
    background: #9e5c33;
    color: #fff;
    margin: 0 auto;
    transition-duration: .3s;
    border: solid 2px #9e5c33;
    padding-right: 2.5em;
    position: relative; }
    #rdg-pop .btn:after,
    #hkgk-pop .btn:after {
      content: "";
      width: 1em;
      height: 1em;
      background-image: url(../images/tri.svg);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      position: absolute;
      right: 1em;
      top: 50%;
      transform: translateY(-50%);
      transition-duration: .3s; }
    #rdg-pop .btn:hover,
    #hkgk-pop .btn:hover {
      background: rgba(0, 0, 0, 0);
      color: #9e5c33; }
      #rdg-pop .btn:hover::after,
      #hkgk-pop .btn:hover::after {
        background-image: url(../images/tri-br.svg);
        right: .5em; }
  #rdg-pop .x-btn,
  #hkgk-pop .x-btn {
    max-width: 280px;
    text-align: center;
    padding: .5em;
    display: block;
    width: calc(100% - 3em - 4px);
    background: #000;
    color: #fff;
    margin: 0 auto;
    transition-duration: .3s;
    border: solid 2px #000;
    padding-right: 2.5em;
    position: relative;
    margin-top: 1em; }
    #rdg-pop .x-btn:after,
    #hkgk-pop .x-btn:after {
      content: "";
      width: 1.5em;
      height: 1.5em;
      background-image: url(../images/btn-x.svg);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      position: absolute;
      right: 1em;
      top: 50%;
      transform: translateY(-50%);
      transition-duration: .3s; }
    #rdg-pop .x-btn:hover,
    #hkgk-pop .x-btn:hover {
      background: rgba(0, 0, 0, 0);
      color: #000; }
      #rdg-pop .x-btn:hover::after,
      #hkgk-pop .x-btn:hover::after {
        background-image: url(../images/btn-x-blk.svg); }
  #rdg-pop .pop-logo-box,
  #hkgk-pop .pop-logo-box {
    width: 50%;
    max-width: 280px;
    margin: 0 auto 1em; }

#hkgk {
  padding-bottom: 300px;
  color: #000;
  background: #fefefe;
  position: relative;
  z-index: 0;
  text-align: center; }
  #hkgk .hkgk-head {
    max-width: 540px;
    margin: 1em auto 40px;
    padding: 1em 0;
    border-top: solid 1px #9e5c33;
    border-bottom: solid 1px #9e5c33; }
  #hkgk p {
    margin: 1em auto 0; }
  #hkgk .link-btn {
    max-width: 280px;
    text-align: center;
    padding: .5em;
    display: block;
    width: calc(100% - 3em - 4px);
    background: #9e5c33;
    color: #fff;
    margin: 0 auto;
    transition-duration: .3s;
    border: solid 2px #9e5c33;
    padding-right: 2.5em;
    position: relative;
    margin-top: 1em; }
    #hkgk .link-btn:after {
      content: "";
      width: 1em;
      height: 1em;
      background-image: url(../images/tri.svg);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      position: absolute;
      right: 1em;
      top: 50%;
      transform: translateY(-50%);
      transition-duration: .3s; }
    #hkgk .link-btn:hover {
      background: rgba(0, 0, 0, 0);
      color: #9e5c33; }
      #hkgk .link-btn:hover::after {
        background-image: url(../images/tri-br.svg);
        right: .5em; }

@media screen and (max-width: 900px) {
  #top .main-v .main-v-pc {
    display: none; }
  #top .main-v .main-v-sp {
    display: block; }

  section {
    padding: 90px 0; }

  #copy {
    padding: 60px 0; }
    #copy::before {
      top: -100px;
      height: 200px; }
    #copy::after {
      bottom: -100px;
      height: 200px; }

  #story {
    padding-top: 120px; }
    #story::before {
      height: 250px; }

  #ticket {
    width: calc(100% - 2em);
    padding: 30px 0; }
    #ticket .ticket-bg-in {
      padding: 60px 2em; }

  #notice:before {
    height: 250px; }
  #notice::after {
    top: -100px;
    height: 200px; }
  #notice .notice-in {
    padding: 120px 0 60px; }

  #character .character-in .chara-head::after {
    top: 40px; }
  #character .character-box .chara-flex {
    min-height: 300px; }
    #character .character-box .chara-flex.chara-pc {
      display: none; }
  #character .chara-desc-item.chara-pc {
    display: none; }
  #character .chara-desc-box .chara-sp {
    overflow: hidden;
    margin: 0 auto;
    padding: 0 2em;
    width: calc(100% - 4em); }
    #character .chara-desc-box .chara-sp .chara-desc-item {
      width: 100%;
      padding: 0; }
  #character .chara-sp {
    display: block;
    position: relative; }
    #character .chara-sp .chara-btn {
      position: absolute;
      z-index: 1;
      background-image: url(../images/tri.svg);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      width: 2em;
      height: 2em;
      cursor: pointer;
      transition-duration: .3s; }
      #character .chara-sp .chara-btn.swiper-prev {
        left: 0;
        top: 50%;
        background-image: url(../images/tri-prev.svg); }
        #character .chara-sp .chara-btn.swiper-prev:hover {
          left: -.5em; }
      #character .chara-sp .chara-btn.swiper-next {
        right: 0;
        top: 50%;
        background-image: url(../images/tri.svg); }
        #character .chara-sp .chara-btn.swiper-next:hover {
          right: -.5em; }
      #character .chara-sp .chara-btn.pc-no-active {
        opacity: 1;
        pointer-events: initial; }
      #character .chara-sp .chara-btn.sp-no-active {
        opacity: 0;
        pointer-events: none; }

  #howtoplay .swiper-btn.pc-no-active {
    opacity: 1;
    pointer-events: initial; }
  #howtoplay .swiper-btn.sp-no-active {
    opacity: 0;
    pointer-events: none; } }
@media screen and (max-width: 540px) {
  .sns-bt {
    bottom: 60px; }
    .sns-bt a {
      width: 45px;
      height: 45px; }
      .sns-bt a img {
        width: 30px; }

  .head-box {
    max-width: 240px;
    margin-bottom: 20px; }

  .menu-box {
    max-width: 100px; }

  #story .more-btn {
    max-width: 90px; }

  #character .character-in::after {
    --slope: 90px; }
  #character .character-in .chara-head {
    top: 25px; }
    #character .character-in .chara-head:after {
      top: 0; }
    #character .character-in .chara-head img {
      width: 90%;
      max-width: 180px;
      transform: rotate(-7deg); }
  #character .chara-desc-box .chara-desc-item {
    padding: 0 3em;
    width: calc(100% - 6em); }
  #character .character-box .chara-flex {
    min-height: 250px; }
    #character .character-box .chara-flex .chara-item {
      width: 15%;
      transform: scale(1.5); }
      #character .character-box .chara-flex .chara-item.chara-active {
        width: 55%; }
  #character .chara-sp .chara-btn {
    width: 1.5em;
    height: 1.5em; }

  #play .play-flex {
    flex-flow: wrap;
    max-width: 280px;
    margin: 0 auto; }
    #play .play-flex .play-item {
      width: 40%;
      margin: 5%; }

  #ticket .ticket-bg-in {
    padding: 2em 1em;
    width: calc(100% - 2em); }
  #ticket .ti-item {
    margin-bottom: 40px; }
    #ticket .ti-item .tab-list {
      margin: 20px auto; }
      #ticket .ti-item .tab-list .tab-item {
        width: calc(44% - 1rem);
        padding: .25rem .5rem;
        margin: 0 auto; }
    #ticket .ti-item table tr td {
      width: calc(50% - 4em); }
      #ticket .ti-item table tr td .sp {
        display: block; }
    #ticket .ti-item table tr th {
      width: 6em; }
      #ticket .ti-item table tr th .sp {
        display: block; }
  #ticket .ti-desc .sp {
    display: block; }
  #ticket .u22 {
    flex-direction: column; }
    #ticket .u22 .col-l {
      max-width: 200px;
      width: 100%;
      margin-bottom: 1em; }
    #ticket .u22 .col-r {
      width: 100%; }
  #ticket .place .place-box .place-item .place-name-head {
    border-radius: 20px 20px 0 0; }
  #ticket .place .place-box .place-item .place-open {
    border-radius: 0 0 20px 20px; }
  #ticket .place .place-box .place-item .data-item .data-flex {
    flex-direction: column; }
    #ticket .place .place-box .place-item .data-item .data-flex iframe {
      width: 100%;
      margin: 1em auto; }
    #ticket .place .place-box .place-item .data-item .data-flex .place-desc-in {
      width: 100%;
      margin: 1em auto; }

  #rdg-pop .close-bt,
  #hkgk-pop .close-bt {
    right: -5px; }
  #rdg-pop .rdg-box,
  #hkgk-pop .rdg-box {
    max-height: 70dvh;
    overflow-x: auto; }

  footer {
    padding: 60px 0; }
    footer .pop-bnr-flex {
      flex-direction: column;
      margin-top: 0; }
      footer .pop-bnr-flex .bnr-item {
        max-width: 280px;
        margin: 0 auto .5em;
        width: 100%; } }
@media screen and (min-width: 1400px) {
  #story::before {
    height: 550px; } }
/*=========ticketapi===========*/
.ticketWrap {
  margin: 0 auto;
  padding: 20px 6%;
  position: relative;
  width: 88%;
  transition: height 0.7s;
  background: #b3b3b3; }

.ticketWrap .naviBox {
  height: 80px;
  margin: 0;
  padding: 0 0 0 0;
  overflow: hidden; }

.ticketWrap .naviBox .prevBtn {
  width: 50px;
  height: 80px;
  background: #f091ae;
  z-index: 5;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  cursor: pointer;
  position: absolute;
  top: 20px;
  left: 0%; }

.ticketWrap .naviBox .prevBtn:after {
  content: "";
  width: 12px;
  height: 12px;
  border: 0;
  border-top: solid 3px #fff;
  border-right: solid 3px #fff;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
  margin: -8px 0 0 -3px;
  position: absolute; }

.ticketWrap .naviBox .nextBtn {
  width: 50px;
  height: 80px;
  background: #f091ae;
  z-index: 5;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 0%; }

.ticketWrap .naviBox .nextBtn:after {
  content: "";
  width: 12px;
  height: 12px;
  border: 0;
  border-top: solid 3px #fff;
  border-right: solid 3px #fff;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  margin: -8px 0 0 -10px;
  position: absolute; }

.ticketWrap .naviBox .prevBtn:hover,
.ticketWrap .naviBox .nextBtn:hover {
  opacity: 0.7; }

.ticketWrap .naviBox .prevBtn span,
.ticketWrap .naviBox .nextBtn span {
  display: none; }

.ticketWrap .naviBox .comm {
  width: 100%;
  top: 25px;
  font-size: 14px;
  color: #ffffff;
  text-align: center;
  font-weight: bold;
  position: relative;
  display: none; }

.ticketWrap .naviBox ul {
  background: rgba(0, 0, 0, 0.2);
  height: 80px;
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /* overflow-x: scroll; */
  width: 100%;
  margin: 0;
  padding: 0;
  z-index: 3;
  position: relative; }

.ticketWrap .naviBox ul::-webkit-scrollbar {
  height: 0; }

.ticketWrap .naviBox ul li {
  margin: 0 2px 0 0;
  position: relative;
  cursor: pointer;
  opacity: 0.85;
  width: 80px;
  height: 80px; }

.ticketWrap .naviBox ul li .scheduleBox {
  background: #ffffff;
  display: block;
  width: 80px;
  height: 80px;
  text-align: center;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  position: relative;
  color: #676767;
  text-align: center;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center; }

.ticketWrap .naviBox ul li.cr {
  opacity: 1; }

.ticketWrap .naviBox ul li.cr .scheduleBox {
  background: #fbe663; }

.ticketWrap .naviBox ul li .scheduleBox:hover {
  opacity: 0.7; }

.ticketWrap .naviBox ul li .scheduleBox .date {
  width: 100%;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  top: 28px; }

.ticketWrap .naviBox ul li .scheduleBox .state {
  bottom: 10px;
  width: 100%;
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  color: #676767;
  margin-top: 10px; }

.ticketWrap .naviBox ul li .scheduleBox .state span {
  font-size: 10px;
  font-weight: 500; }

.ticketWrap .naviBox ul li .scheduleBox.present .state span {
  color: #32b16c; }

.ticketWrap .naviBox ul li .scheduleBox.present .state span:before {
  content: "○"; }

.ticketWrap .naviBox ul li .scheduleBox.sold .state {
  color: #9d9d9d; }

.ticketWrap .naviBox ul li .scheduleBox.sold .state span:before {
  content: "✕"; }

.ticketWrap .naviBox ul li .scheduleBox.few .state {
  color: #960b0b; }

.ticketWrap .naviBox ul li .scheduleBox.few .state span:before {
  content: "△"; }

.ticketWrap .detailsWrap {
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.7s 0.2s; }

.ticketWrap .detailsWrap.loading {
  opacity: 0;
  transition-duration: 0s;
  transition-delay: 0s; }

.ticketWrap .detailsBox .tit {
  margin: 0;
  padding: 20px 0 20px 0;
  font-size: 20px;
  letter-spacing: 0.1em;
  line-height: 1;
  color: #FFE200;
  font-weight: 500;
  text-align: center;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: flex-end;
  align-items: flex-end;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline; }
  .ticketWrap .detailsBox .tit p {
    margin-bottom: 0; }

.ticketWrap .detailsBox .tit .tit01 {
  font-size: 25px;
  margin-right: 5px;
  padding-bottom: 2px; }

.ticketWrap .detailsBox .details {
  background: #f091ae;
  padding: 2%;
  color: #fff; }
  .ticketWrap .detailsBox .details h4:after {
    display: none; }

.ticketWrap .detailsBox .details h4 {
  margin: 0 0 0 0;
  padding: 0 0 5px 0;
  font-size: 15px;
  letter-spacing: 0;
  line-height: 1;
  border-bottom: 2px solid #bfbfbf;
  position: relative;
  text-align: left; }

.ticketWrap .detailsBox .details a.scrap {
  position: absolute;
  top: 0;
  right: 0;
  padding-right: 15px;
  color: #0e70bb !important;
  font-size: 15px; }

.ticketWrap .detailsBox .details .no_events {
  text-align: center;
  margin: 50px auto;
  opacity: 0.5; }

/*===================sp=*/
@media screen and (max-width: 860px) {
  .ticketWrap .naviBox ul li .scheduleBox:hover {
    opacity: 1; }

  .ticketWrap .detailsBox .details h4 {
    margin: 0 0 0 0;
    padding: 0 0 5px 0;
    font-size: 15px;
    letter-spacing: 0;
    line-height: 1;
    border-bottom: 2px solid #bfbfbf;
    position: relative;
    line-height: 2;
    text-align: center; }

  .ticketWrap .detailsBox .details a.scrap {
    position: relative;
    right: 0;
    text-align: right; }

  .ticketWrap .naviBox .prevBtn:hover,
  .ticketWrap .naviBox .nextBtn:hover {
    opacity: 1; } }
/*====================*/
.ticketWrap .detailsBox .details a.scrap:after {
  content: "";
  width: 8px;
  height: 8px;
  border: 0;
  border-top: solid 2px #0e70bb;
  border-right: solid 2px #0e70bb;
  top: 50%;
  right: 0;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  margin: -5px 0 0 0px;
  position: absolute; }

.ticketWrap .detailsBox .details a.scrap:hover {
  text-decoration: none;
  opacity: 0.7; }

.ticketWrap .detailsBox .details ul {
  /*
                        margin-left: -15px;
                        margin-right: -15px;
                        list-style: none;
                        display: block;
                        margin: 0 -5px;
                        padding: 0;
                        margin-bottom: 50px;
*/
  width: 102%;
  list-style: none;
  display: block;
  margin-bottom: 50px;
  margin-top: 2%; }

.ticketWrap .detailsBox .details ul:before,
.ticketWrap .detailsBox .details ul:after {
  content: " ";
  display: table; }

.ticketWrap .detailsBox .details ul:after {
  clear: both; }

.ticketWrap .detailsBox .details ul li {
  /*
                        position: relative;
                        float: left;
                        width: 23%;
                        min-height: 1px;
                        padding-left: 15px;
                        padding-right: 15px;
                        padding: 0 0 0 5px;
                        margin: 15px 10px 0 0;
*/
  position: relative;
  float: left;
  width: 23%;
  min-height: 1px;
  margin-right: 2%;
  margin-top: 2%; }

/*===================sp=*/
@media screen and (max-width: 860px) {
  .ticketWrap .detailsBox .details ul li {
    position: relative;
    float: left;
    width: 94%;
    min-height: 1px;
    padding-left: 3%;
    padding-right: 3%;
    margin: 15px auto 0 auto; }

  .ticketWrap .detailsBox .details a.scrap:hover {
    text-decoration: none;
    opacity: 1; } }
/*====================*/
.ticketWrap .detailsBox .details ul li .scheduleBox {
  position: relative;
  padding: 1em 8%;
  background: #fff;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  z-index: 1;
  color: #ffffff;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center; }

.ticketWrap .detailsBox .details ul li .scheduleBox a {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  color: #ffffff; }

.ticketWrap .detailsBox .details ul li .scheduleBox .time {
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  margin-right: 10px; }

.ticketWrap .detailsBox .details ul li .scheduleBox .state {
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  /* 							margin-left: 10px; */ }

.ticketWrap .detailsBox .details ul li .scheduleBox:hover {
  opacity: 0.7; }

.ticketWrap .detailsBox .details ul li .scheduleBox.present {
  background: #32b16c; }

.ticketWrap .detailsBox .details ul li .scheduleBox.present .state span:before {
  content: "○"; }

.ticketWrap .detailsBox .details ul li .scheduleBox.sold {
  background: #969696; }

.ticketWrap .detailsBox .details ul li .scheduleBox.sold .state span:before {
  content: "✕"; }

.ticketWrap .detailsBox .details ul li .scheduleBox.few {
  background: #960b0b; }

.ticketWrap .detailsBox .details ul li .scheduleBox.few .state span:before {
  content: "△"; }

.ticketWrap .detailsBox .details ul li .scheduleBox.remaining {
  color: #f84141; }

.ticketWrap .detailsBox .details .buyWrap {
  width: 100%;
  margin: 20px auto 0 auto;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between; }

.ticketWrap .detailsBox .details .buyWrap .ticketBox {
  width: 48%; }

/*===================sp=*/
@media screen and (max-width: 860px) {
  .ticketWrap .detailsBox .details .buyWrap {
    width: 100%;
    margin: 20px auto 0 auto;
    display: block; }

  .ticketWrap .detailsBox .details .buyWrap .ticketBox {
    width: 100%;
    margin: 0 0 0 0; }

  .ticketWrap .detailsBox .details ul li .scheduleBox:hover {
    opacity: 1; } }
/*====================*/
.ticketWrap .detailsBox .details .ticketBox {
  margin-left: -15px;
  margin-right: -15px;
  margin: 0 -7px 0 -7px; }

.ticketWrap .detailsBox .details .ticketBox:before,
.ticketWrap .detailsBox .details .ticketBox:after {
  content: " ";
  display: table; }

.ticketWrap .detailsBox .details .ticketBox:after {
  clear: both; }

.ticketWrap .detailsBox .details .ticketBox .ticketItem {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  margin: 0 0 15px;
  padding: 0 7px 0 7px; }

.ticketWrap .detailsBox .details .ticketBox .ticket-item:last-child {
  margin-bottom: 0; }

.ticketWrap .detailsBox .details .ticketBox .ticketItem:nth-of-type(2n) + div.ticketItem {
  clear: left; }

.ticketWrap .detailsBox .details .ticketBox .ticketItem p {
  font-size: 10px;
  margin: 0; }

.ticketWrap .detailsBox .details .ticketBox .ticketItem a.ticket {
  display: block;
  margin: 0 0 15px 0;
  padding: 10px 2% 10px 2%;
  width: 96%;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  border: none;
  background: #ffffff; }

.ticketWrap .detailsBox .details .ticketBox .ticketItem a.ticket:hover {
  opacity: 0.7; }

.ticketWrap .detailsBox .details .ticketBox .ticketItem a.ticket.scrap {
  background: #f34f49; }

.ticketWrap .detailsBox .details .ticketBox .ticketItem a.ticket.scrap:hover {
  opacity: 0.7; }

.ticketWrap .detailsBox .details .ticketBox .ticketItem a.ticket.eplus {
  background: #e85298; }

.ticketWrap .detailsBox .details .ticketBox .ticketItem a.ticket.eplus:hover {
  opacity: 0.7; }

.ticketWrap .detailsBox .details .ticketBox .ticketItem a.ticket.pia {
  background: #36c; }

.ticketWrap .detailsBox .details .ticketBox .ticketItem a.ticket.pia:hover {
  opacity: 0.7; }

.ticketWrap .detailsBox .details .ticketBox .ticketItem a.ticket.lawson {
  background: #1a9fdd; }

.ticketWrap .detailsBox .details .ticketBox .ticketItem a.ticket.lawson:hover {
  opacity: 0.7; }

._scheduler_container ._description_container ._description_item {
  padding: 0 0.7em; }

._scheduler_container ._scheduler_event_wrapper ._scheduler_event_timeBox_text ._timeBox_symbol {
  margin: initial !important; }

/*===================sp=*/
@media screen and (max-width: 860px) {
  .ticketWrap .detailsBox .details .ticketBox .ticketItem a.ticket:hover,
  .ticketWrap .detailsBox .details .ticketBox .ticketItem a.ticket.scrap:hover,
  .ticketWrap .detailsBox .details .ticketBox .ticketItem a.ticket.eplus:hover,
  .ticketWrap .detailsBox .details .ticketBox .ticketItem a.ticket.pia:hover,
  .ticketWrap .detailsBox .details .ticketBox .ticketItem a.ticket.lawson:hover {
    opacity: 1; } }
/*====================*/

/*# sourceMappingURL=style.css.map */