@charset "UTF-8";
/* CSS INFORMATION -====================================================
File name : subpage.css
Description : 下層
===================================================================== */
@-webkit-keyframes mask-tl {
  from {
    -webkit-mask-position: 100% 100%;
            mask-position: 100% 100%;
  }
  to {
    -webkit-mask-position: 0 0;
            mask-position: 0 0;
  }
}
@keyframes mask-tl {
  from {
    -webkit-mask-position: 100% 100%;
            mask-position: 100% 100%;
  }
  to {
    -webkit-mask-position: 0 0;
            mask-position: 0 0;
  }
}
@-webkit-keyframes mask-br {
  from {
    -webkit-mask-position: -100% 100%;
            mask-position: -100% 100%;
  }
  to {
    -webkit-mask-position: 100% 0%;
            mask-position: 100% 0%;
  }
}
@keyframes mask-br {
  from {
    -webkit-mask-position: -100% 100%;
            mask-position: -100% 100%;
  }
  to {
    -webkit-mask-position: 100% 0%;
            mask-position: 100% 0%;
  }
}
@-webkit-keyframes mask-none {
  to {
    -webkit-mask-image: none;
            mask-image: none;
  }
}
@keyframes mask-none {
  to {
    -webkit-mask-image: none;
            mask-image: none;
  }
}
@-webkit-keyframes fadeInBottom {
  0% {
    opacity: 0;
    -webkit-transform: translateY(5rem);
            transform: translateY(5rem);
  }
  80% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes fadeInBottom {
  0% {
    opacity: 0;
    -webkit-transform: translateY(5rem);
            transform: translateY(5rem);
  }
  80% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes huwahuwa {
  from {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  to {
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
}
@keyframes huwahuwa {
  from {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  to {
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
}
@-webkit-keyframes kurukuru {
  from {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes kurukuru {
  from {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
/* =====================================================================
    共通
======================================================================*/
.subpage-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -1;
}
.subpage-bg::before {
  content: "";
  position: absolute;
  display: block;
  top: 18.4rem;
  right: -40.4rem;
  width: 81.3rem;
  height: 11.7rem;
  background: url(../images/common/img_cloud02.png) no-repeat center/contain;
  mix-blend-mode: multiply;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .subpage-bg::before {
    top: 29.1rem;
    right: auto;
    left: -24rem;
  }
}
@media screen and (min-width: 768px) {
  .subpage-bg::after {
    content: "";
    position: absolute;
    display: block;
    top: 15.6rem;
    right: -23.8rem;
    width: 105rem;
    height: 10.6rem;
    background: url(../images/common/img_cloud01.png) no-repeat center/contain;
    z-index: -1;
  }
}
.subpage-bg-deco01 {
  position: absolute;
  top: 8.4rem;
  right: 0;
  margin-right: calc(55 / 750 * 100%);
  width: 16rem;
}
@media screen and (min-width: 768px) {
  .subpage-bg-deco01 {
    top: -18.9rem;
    right: -28.6rem;
    margin-right: 0;
    width: 57.6rem;
    -webkit-filter: drop-shadow(0 2.4rem 6.4rem rgba(66, 23, 77, 0.12));
            filter: drop-shadow(0 2.4rem 6.4rem rgba(66, 23, 77, 0.12));
  }
}
.subpage-bg-deco01 img {
  -webkit-animation: huwahuwa 2s infinite alternate ease-in-out;
          animation: huwahuwa 2s infinite alternate ease-in-out;
  will-change: transform;
}
@media screen and (max-width: 767px) {
  .subpage-bg-deco01::before {
    content: "";
    display: inline-block;
    position: absolute;
    bottom: 0;
    margin-bottom: -15%;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    width: 80%;
    padding-top: 3%;
    background: rgba(88, 31, 102, 0.7);
    border-radius: 50%;
    -webkit-filter: blur(1rem);
            filter: blur(1rem);
  }
}
.subpage-bg-deco02 {
  position: absolute;
  top: 0.8rem;
  left: -30rem;
  width: 60rem;
  -webkit-filter: drop-shadow(0 2.4rem 6.4rem rgba(66, 23, 77, 0.12));
          filter: drop-shadow(0 2.4rem 6.4rem rgba(66, 23, 77, 0.12));
}
.subpage-bg-deco02 img {
  -webkit-animation: kurukuru 20s linear infinite;
          animation: kurukuru 20s linear infinite;
}

.subpage-head {
  padding: 12rem 0 16rem;
}
@media screen and (min-width: 768px) {
  .subpage-head {
    padding-top: 8rem;
  }
}
.subpage-head > .inner {
  z-index: initial;
}
.subpage-head h2.sec-ttl {
  min-height: 9em;
  margin-bottom: 3rem;
}
@media screen and (min-width: 768px) {
  .subpage-head h2.sec-ttl {
    text-align: center;
    min-height: auto;
    font-size: 2.1rem;
    margin-bottom: 8rem;
  }
  .subpage-head h2.sec-ttl .en {
    letter-spacing: 0.1em;
  }
}

.grid {
  position: relative;
}
@media screen and (min-width: 768px) {
  .grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
  }
}
.grid .sub-ttl {
  position: relative;
}
@media screen and (min-width: 768px) {
  .grid .sub-ttl {
    padding-bottom: 25rem;
  }
}
.grid .sub-ttl::before {
  content: "";
  position: absolute;
  display: block;
  top: -6rem;
  right: -9.6rem;
  width: 24.2rem;
  height: 28rem;
  background: url(../images/common/img_deco04.png) no-repeat center/contain;
  -webkit-filter: drop-shadow(0 1.5rem 3rem rgba(66, 23, 77, 0.3));
          filter: drop-shadow(0 1.5rem 3rem rgba(66, 23, 77, 0.3));
  -webkit-animation: huwahuwa 1.5s infinite alternate ease-in-out;
          animation: huwahuwa 1.5s infinite alternate ease-in-out;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .grid .sub-ttl::before {
    top: auto !important;
    bottom: 0 !important;
    right: -10rem;
    width: 18.1rem;
    height: 21.1rem;
  }
}
@media screen and (min-width: 768px) {
  .grid .sub-ttl {
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }
}
@media screen and (min-width: 768px) {
  .grid-content {
    width: calc(880 / 1080 * 100%);
  }
}
@media screen and (min-width: 768px) {
  .grid.reverse {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}
@media screen and (max-width: 767px) {
  .grid.reverse .sub-ttl {
    padding: 0 4rem 0 0;
    border-image-width: 0 0.4rem 0 0;
    text-align: right;
  }
}
@media screen and (min-width: 768px) {
  .grid.reverse .sub-ttl {
    padding-bottom: 26rem;
  }
}
.grid.reverse .sub-ttl::before {
  top: -10rem;
  right: auto;
  left: -10.6rem;
  width: 26.1rem;
  height: 29.2rem;
  background-image: url(../images/common/img_deco03.png);
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
@media screen and (min-width: 768px) {
  .grid.reverse .sub-ttl::before {
    left: -10rem;
    width: 19.6rem;
    height: 21.9rem;
  }
}

.sub-ttl {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-bottom: 8rem;
  padding-left: 4rem;
  gap: 0.4em 0;
  font-size: 2.4rem;
  border-style: solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(180deg, #d4c7b4 0%, #f7fffe 20%, #c0f0ec 50%, #ebd3d8 65%, #fcefca 100%);
  border-image-width: 0 0 0 0.4rem;
}
.sub-ttl .ja {
  font-weight: bold;
  color: #ff3355;
  letter-spacing: 0.2em;
}
.sub-ttl .en {
  font-family: "Barlow", sans-serif;
  font-size: 266%;
}
.sub-ttl .en small {
  display: block;
  margin-top: 0.3em;
  font-size: 40%;
}
@media screen and (min-width: 768px) {
  .sub-ttl {
    margin-bottom: 0;
    padding: 3.4rem 0 0;
    -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
            writing-mode: vertical-rl;
    border-style: solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(270deg, #d4c7b4 0%, #f7fffe 20%, #c0f0ec 50%, #ebd3d8 65%, #fcefca 100%);
    border-image-width: 0.4rem 0 0 0;
  }
  .sub-ttl > * {
    text-align: left;
  }
  .sub-ttl .en small {
    margin: 0 0.4em 0 0;
  }
}

/* =====================================================================
    special
======================================================================*/
.article:not(:last-child) {
  margin-bottom: 4rem;
}
.article-header {
  position: relative;
  padding: 6rem calc(50 / 640 * 100%);
}
@media screen and (min-width: 768px) {
  .article-header {
    padding: 6rem calc(112 / 1080 * 100%);
  }
}
.article-header::before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, left top, right top, from(#b1fcf6), color-stop(50%, #ffffff), to(#f7c6d1));
  background: linear-gradient(90deg, #b1fcf6 0%, #ffffff 50%, #f7c6d1 100%);
  opacity: 0.75;
  mix-blend-mode: multiply;
  z-index: -1;
}
.article-header h3 {
  font-weight: bold;
  font-size: 133%;
  line-height: 1.5;
  color: #581f66;
}
@media screen and (min-width: 768px) {
  .article-header h3 {
    font-size: 155%;
  }
}
.article-header time {
  display: block;
  margin-top: 0.3em;
  font-family: "Barlow", sans-serif;
  font-weight: bold;
  color: #ff3355;
}
.article-content {
  padding: 6rem calc(65 / 640 * 100%);
  line-height: 1.666;
  background-color: rgba(255, 255, 255, 0.75);
}
@media screen and (min-width: 768px) {
  .article-content {
    padding: 6rem calc(112 / 1080 * 100%);
  }
}
.article-content > *:not(:last-child) {
  margin-bottom: 1.5em;
}
.article-content h4 {
  font-weight: bold;
  color: #ff3355;
}
.article-content p strong {
  font-weight: normal;
  background-color: #b1fcf6;
}
.article-content figure figcaption {
  margin-top: 0.3em;
  font-size: 83%;
}
@media screen and (min-width: 768px) {
  .article-content figure {
    margin-left: auto;
    margin-right: auto;
    width: 84.1121495327%;
  }
}

/* =====================================================================
    ticket
======================================================================*/
.ticket section:not(:last-child) {
  margin-bottom: 16rem;
}
.ticket-box:not(:last-child) {
  margin-bottom: 4rem;
}
@media screen and (max-width: 767px) {
  .ticket-box {
    margin-left: calc(-20 / 640 * 100%);
    width: calc(680 / 640 * 100%);
  }
}
.ticket-box h4 {
  position: relative;
  text-align: center;
  padding: 0.8em;
  font-weight: bold;
  font-size: 133%;
  color: #581f66;
  line-height: 1.4;
}
.ticket-box h4::before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, left top, right top, from(#b1fcf6), color-stop(50%, #ffffff), to(#f7c6d1));
  background: linear-gradient(90deg, #b1fcf6 0%, #ffffff 50%, #f7c6d1 100%);
  opacity: 0.75;
  mix-blend-mode: multiply;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .ticket-box h4 {
    font-size: 177%;
  }
}
.ticket-box-inner {
  padding: 9.4117647059%;
  background-color: rgba(255, 255, 255, 0.75);
}
@media screen and (min-width: 768px) {
  .ticket-box-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    padding: calc(64 / 1080 * 100%) calc(113 / 1080 * 100%);
  }
}
.ticket-box figure {
  margin: 0 auto 6.4rem;
  width: 72.4637681159%;
}
@media screen and (min-width: 768px) {
  .ticket-box figure {
    -ms-flex-negative: 0;
        flex-shrink: 0;
    margin: 0 7.4941451991% 0 0;
    width: 32.7868852459%;
  }
}
.ticket-box-right .ticket-box-desc:last-of-type {
  border-style: solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, #d4c7b4 0%, #f7fffe 20%, #c0f0ec 50%, #ebd3d8 65%, #fcefca 100%);
  border-image-width: 1px 0 1px 0;
}
@media screen and (min-width: 768px) {
  .ticket-box-right {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    width: 59.718969555%;
  }
}
.ticket-box-lead {
  margin-bottom: 6.4rem;
}
.ticket-box-lead dl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  line-height: 1.3;
}
.ticket-box-lead dl dt {
  text-align: center;
  padding: 0.3em 1em;
  min-width: 6.6em;
  border-radius: 2em;
  color: #ffffff;
  background-color: #42174d;
}
.ticket-box-lead dl dd {
  font-size: 160%;
  font-weight: bold;
  color: #ff3355;
}
.ticket-box-lead dl dd small {
  font-size: 50%;
}
.ticket-box-lead p {
  margin-top: 1.5em;
  font-weight: bold;
}
@media screen and (min-width: 768px) {
  .ticket-box-lead {
    margin-bottom: 4rem;
  }
  .ticket-box-lead dl {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .ticket-box-lead dl dt {
    margin-right: 3em;
    font-size: 122%;
  }
  .ticket-box-lead dl dd {
    font-size: 200%;
  }
}
.ticket-box-desc {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding: 2.4rem 0;
  line-height: 1.333;
  border-style: solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, #d4c7b4 0%, #f7fffe 20%, #c0f0ec 50%, #ebd3d8 65%, #fcefca 100%);
  border-image-width: 1px 0 0 0;
}
.ticket-box-desc dt {
  position: relative;
  padding-right: 0.8em;
  margin-right: 0.8em;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  color: #581f66;
}
@media screen and (min-width: 768px) {
  .ticket-box-desc dt {
    min-width: 7em;
  }
}
.ticket-box-desc dt::after {
  content: "";
  position: absolute;
  display: block;
  top: 0.12em;
  right: 0;
  width: 1px;
  height: 1em;
  border-right: 1px solid currentColor;
}
.ticket-box-desc dd {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  line-height: initial;
}
@media screen and (min-width: 768px) {
  .ticket-fee .grid {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
  .ticket-fee .grid .sub-ttl::before {
    right: auto;
    left: -4rem;
  }
}
@media screen and (min-width: 768px) {
  .ticket-guide .grid {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
  }
  .ticket-guide .grid .sub-ttl::before {
    left: auto;
    right: -10rem;
  }
}

/* fee
-----------------------------------------*/
.fee-table dl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-weight: bold;
}
.fee-table dl > * {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 1.5em 0;
  width: calc(33.3333333333% - 2px);
  line-height: 1.333;
  margin: 1px;
}
.fee-table dl > * small {
  font-size: 75%;
}
.fee-table dl dt {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  text-align: center;
  letter-spacing: 0.05em;
  color: #ffffff;
  background-color: rgba(255, 51, 85, 0.5);
}
.fee-table dl dd {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  text-align: center;
  color: #581f66;
  background-color: rgba(255, 255, 255, 0.75);
}

.notice {
  margin-top: 4rem;
}
.notice li {
  position: relative;
  margin-bottom: 1em;
  padding-left: 1.2em;
  font-size: 75%;
  line-height: 1.666;
}
.notice li::before {
  content: "●";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  color: #ff3355;
}

/* guide
-----------------------------------------*/
.guide-list > li {
  padding: 3rem 0;
  background-color: rgba(255, 255, 255, 0.75);
}
@media screen and (min-width: 768px) {
  .guide-list > li {
    padding: 0;
    background-color: transparent;
  }
}
@media screen and (max-width: 767px) {
  .guide-list > li:not(:last-child) {
    margin-bottom: 1.6rem;
  }
}
.guide-list > li h4,
.guide-list > li .guide-list-inner > * {
  padding: 3rem calc(60 / 640 * 100%);
}
@media screen and (min-width: 768px) {
  .guide-list > li h4,
  .guide-list > li .guide-list-inner > * {
    margin: 1px;
    padding: 3.5rem 4.5766590389%;
    background-color: rgba(255, 255, 255, 0.75);
  }
}
.guide-list > li h4 {
  width: 100%;
}
@media screen and (max-width: 767px) {
  .guide-list > li h4 {
    border-style: solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(90deg, #d4c7b4 0%, #f7fffe 20%, #c0f0ec 50%, #ebd3d8 65%, #fcefca 100%);
    border-image-width: 0 0 1px 0;
  }
}
@media screen and (min-width: 768px) {
  .guide-list > li h4 {
    display: grid;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 34.0961098398%;
  }
}
.guide-list > li h4 img {
  margin: auto;
  width: auto;
  height: 4.9rem;
}
@media screen and (min-width: 768px) {
  .guide-list > li h4 img {
    height: 3.4rem;
  }
}
.guide-list > li:first-child .guide-list-right {
  border-top: 1px solid #c0d3d4;
}
@media screen and (min-width: 768px) {
  .guide-list > li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}
@media screen and (max-width: 767px) {
  .guide-list-inner > *:not(:last-child) {
    padding-bottom: 3rem;
    border-style: solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(90deg, #d4c7b4 0%, #f7fffe 20%, #c0f0ec 50%, #ebd3d8 65%, #fcefca 100%);
    border-image-width: 0 0 1px 0;
  }
}
@media screen and (min-width: 768px) {
  .guide-list-inner {
    width: 66.3615560641%;
  }
  .guide-list-inner > * {
    min-height: 11.4rem;
  }
}

/* =====================================================================
    gallery
======================================================================*/
.gallery {
  /*  stage
  -----------------------------------------*/
}
.gallery-map {
  position: relative;
  margin: 0 calc(50% - 50vw) 16rem;
  overflow: hidden;
  border-style: solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, #d4c7b4 0%, #f7fffe 20%, #c0f0ec 50%, #ebd3d8 65%, #fcefca 100%);
  border-image-width: 0.4rem 0 0 0;
}
.gallery-map::before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, left top, right top, from(#b1fcf6), color-stop(50%, #ffffff), to(#f7c6d1));
  background: linear-gradient(90deg, #b1fcf6 0%, #ffffff 50%, #f7c6d1 100%);
  opacity: 0.75;
  mix-blend-mode: multiply;
}
.gallery-map::after {
  content: "";
  position: absolute;
  display: block;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.4rem;
  border-style: solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(270deg, #d4c7b4 0%, #f7fffe 20%, #c0f0ec 50%, #ebd3d8 65%, #fcefca 100%);
  border-image-width: 0 0 0.4rem 0;
}
.gallery-map-area {
  position: relative;
  font-size: 1rem;
  overflow-y: hidden;
  overflow-x: auto;
}
@media screen and (max-width: 767px) {
  .gallery-map-area {
    direction: rtl;
  }
}
.gallery-map-area::-webkit-scrollbar {
  height: 2em;
  background: rgba(177, 252, 246, 0.8);
}
.gallery-map-area::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 3em;
}
.gallery-map-inner {
  position: relative;
  width: 115.2em;
  margin: 0 2em;
  padding: 6em 4em;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
}
@media screen and (min-width: 768px) {
  .gallery-map-inner {
    margin: 0 auto;
  }
}
.gallery-tab li {
  position: absolute;
  top: 0;
  left: 0;
  width: 35.2em;
  z-index: 1;
}
.gallery-tab li a {
  -webkit-filter: drop-shadow(0 1em 4em rgba(66, 23, 77, 0.15));
          filter: drop-shadow(0 1em 4em rgba(66, 23, 77, 0.15));
}
.gallery-tab li:nth-child(1) {
  margin: 7.03125% 0 0 68.6631944444%;
}
.gallery-tab li:nth-child(2) {
  margin: 3.4722222222% 0 0 14.84375%;
}
.gallery-tab li:nth-child(3) {
  margin: 32.9861111111% 0 0 0;
}
.gallery-tab li:nth-child(4) {
  margin: 39.6701388889% 0 0 68.6631944444%;
}
.gallery-stage:not(:last-child) {
  margin-bottom: 16rem;
}
.gallery-stage-ttl {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 8rem;
  padding-left: 6.5em;
}
@media screen and (min-width: 768px) {
  .gallery-stage-ttl {
    margin-bottom: 0;
  }
}
.gallery-stage-ttl .num {
  position: absolute;
  top: -0.05em;
  left: 0;
  font-family: "Barlow", sans-serif;
  font-size: 12rem;
  line-height: 0.85;
  letter-spacing: 0;
  color: #581f66;
  white-space: nowrap;
}
.gallery-stage-ttl .num::before {
  content: "STAGE";
  display: inline-block;
  margin-right: 0.5em;
  font-size: 20%;
  font-weight: bold;
  letter-spacing: 0.1em;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
}
.gallery-stage-ttl h3 {
  font-size: 146%;
  font-weight: bold;
  min-height: 10rem;
  line-height: 1.333;
  color: #ff3355;
}
@media screen and (max-width: 767px) {
  .gallery-stage-ttl h3 {
    display: grid;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
@media screen and (min-width: 768px) {
  .gallery-stage-ttl h3 {
    font-size: 177%;
  }
}
.gallery-stage p {
  margin-bottom: 6rem;
}
@media screen and (min-width: 768px) {
  .gallery-stage-ttl,
  .gallery-stage p, .gallery-stage-img {
    padding-left: 20rem;
  }
}
.gallery-stage-img {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.gallery-stage-img::before {
  content: "";
  position: absolute;
  display: block;
  bottom: 0;
  left: 0;
  margin: 0 calc(50% - 50vw) calc(158 / 750 * 100%);
  width: 100vw;
  height: 0.4rem;
  border-style: solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, #d4c7b4 0%, #f7fffe 20%, #c0f0ec 50%, #ebd3d8 65%, #fcefca 100%);
  border-image-width: 0 0 0.4rem 0;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .gallery-stage-img::before {
    margin-bottom: calc(256 / 1920 * 100%);
  }
}
.gallery-stage-img::after {
  content: "";
  position: absolute;
  display: block;
  bottom: 0;
  left: 0;
  margin: 0 calc(50% - 50vw) calc(172 / 750 * 100%);
  width: calc(320 / 750 * 100%);
  height: 0.4rem;
  border-style: solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, #d4c7b4 0%, #f7fffe 20%, #c0f0ec 50%, #ebd3d8 65%, #fcefca 100%);
  border-image-width: 0 0 0.4rem 0;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .gallery-stage-img::after {
    width: calc(560 / 1920 * 100%);
    margin-bottom: calc(272 / 1920 * 100%);
  }
}
.gallery-stage-img button {
  margin: calc(32 / 640 * 100%) 0 0 calc(32 / 640 * 100%);
  width: calc(304 / 640 * 100%);
}
@media screen and (max-width: 767px) {
  .gallery-stage-img button:nth-child(2n+1) {
    margin-left: 0;
  }
  .gallery-stage-img button:nth-child(-n+2) {
    margin-top: 0;
  }
}
@media screen and (min-width: 768px) {
  .gallery-stage-img button {
    margin: calc(56 / 880 * 100%) 0 0 calc(56 / 880 * 100%);
    width: calc(256 / 880 * 100%);
  }
  .gallery-stage-img button:nth-child(3n+1) {
    margin-left: 0;
  }
  .gallery-stage-img button:nth-child(-n+3) {
    margin-top: 0;
  }
}

/*  popup
-----------------------------------------*/
.popup-stage-head {
  margin-bottom: 4rem;
  padding-bottom: 4rem;
  border-style: solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, #d4c7b4 0%, #f7fffe 20%, #c0f0ec 50%, #ebd3d8 65%, #fcefca 100%);
  border-image-width: 0 0 1px 0;
}
@media screen and (min-width: 768px) {
  .popup-stage-head {
    padding-left: 16.6666666667%;
    padding-right: 16.6666666667%;
  }
}
.popup-stage-head figure {
  margin-bottom: 6rem;
}
@media screen and (min-width: 768px) {
  .popup-stage-head figure {
    margin-bottom: 4rem;
  }
}
.popup-stage-head .popup-subttl {
  margin-bottom: 3rem;
}
@media screen and (min-width: 768px) {
  .popup-stage-head .popup-subttl {
    font-size: 166%;
  }
}

.text-link {
  position: relative;
  display: inline-block !important;
  margin: 0.8em 0.8em 0 0;
  padding-left: 1.7em;
  font-weight: bold;
  color: #ff3355;
  line-height: 1.4;
  text-decoration: none !important;
}
.text-link::before {
  content: "";
  position: absolute;
  display: block;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 0;
  width: 1.1em;
  height: 1.1em;
  -webkit-mask-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="%2332CD32" viewBox="0 0 24 24"><path class="st0" d="M12,0C5.4,0,0,5.4,0,12s5.4,12,12,12s12-5.4,12-12S18.6,0,12,0z M16.6,12.8l-5.7,4.9c-0.2,0.2-0.4,0.2-0.7,0.2 c-0.3,0-0.6-0.1-0.8-0.3c-0.4-0.4-0.3-1.1,0.1-1.4l4.8-4.2L9.7,7.8c-0.4-0.4-0.4-1-0.1-1.4C10,6,10.7,6,11.1,6.4l5.5,4.9 c0.2,0.2,0.3,0.5,0.3,0.8C16.9,12.3,16.8,12.6,16.6,12.8z"/></svg>');
          mask-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="%2332CD32" viewBox="0 0 24 24"><path class="st0" d="M12,0C5.4,0,0,5.4,0,12s5.4,12,12,12s12-5.4,12-12S18.6,0,12,0z M16.6,12.8l-5.7,4.9c-0.2,0.2-0.4,0.2-0.7,0.2 c-0.3,0-0.6-0.1-0.8-0.3c-0.4-0.4-0.3-1.1,0.1-1.4l4.8-4.2L9.7,7.8c-0.4-0.4-0.4-1-0.1-1.4C10,6,10.7,6,11.1,6.4l5.5,4.9 c0.2,0.2,0.3,0.5,0.3,0.8C16.9,12.3,16.8,12.6,16.6,12.8z"/></svg>');
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  background-color: #581f66;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
}
@media screen and (min-width: 768px) {
  .text-link:hover {
    opacity: 1;
  }
  .text-link:hover::before {
    -webkit-transform: translate(0.3em, -50%);
            transform: translate(0.3em, -50%);
  }
}

.tokyo-gallery .gallery-map-inner {
  padding-top: 0;
  padding-bottom: 0;
  width: 137.8em;
}
.tokyo-gallery .gallery-tab li:nth-child(1) {
  margin: 34.8330914369% 0 0 42.1625544267%;
}
.tokyo-gallery .gallery-tab li:nth-child(2) {
  margin: 2.6124818578% 0 0 51.9593613933%;
}
.tokyo-gallery .gallery-tab li:nth-child(3) {
  margin: 2.6124818578% 0 0 9.2162554427%;
}
.tokyo-gallery .gallery-tab li:nth-child(4) {
  margin: 34.8330914369% 0 0 15.0217706821%;
}

/* =====================================================================
    highlight
======================================================================*/
@media screen and (max-width: 767px) {
  .highlight .sec-ttl .en {
    letter-spacing: 0;
  }
}
.highlight section:not(:last-child) {
  margin-bottom: 16rem;
}
.highlight figure figcaption {
  margin-top: 0.5em;
  text-align: right;
  font-size: 80%;
  line-height: 1.3;
}
.highlight-list > li {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 6rem 0;
}
@media screen and (min-width: 768px) {
  .highlight-list > li {
    gap: 4rem 0;
  }
}
.highlight-list > li:not(:last-child) {
  margin-bottom: 12rem;
  padding-bottom: 16rem;
}
@media screen and (min-width: 768px) {
  .highlight-list > li:not(:last-child) {
    margin-bottom: 8rem;
    padding-bottom: 12rem;
  }
}
.highlight-list > li:not(:last-child)::after {
  content: "";
  position: absolute;
  display: block;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 20rem;
  height: 5.7rem;
  background: url(../images/common/img_deco06.png) no-repeat center/contain;
  -webkit-filter: drop-shadow(0 1.5rem 3rem rgba(66, 23, 77, 0.3));
          filter: drop-shadow(0 1.5rem 3rem rgba(66, 23, 77, 0.3));
}
@media screen and (min-width: 768px) {
  .highlight-list > li:not(:last-child)::after {
    width: 16rem;
    height: 4.6rem;
  }
}
@media screen and (min-width: 768px) {
  .highlight-list > li:first-child figure {
    -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
            order: -1;
  }
}
.highlight-list > li h4 {
  font-weight: bold;
  font-size: 146%;
  line-height: 1.454;
  color: #581f66;
}
.highlight-list > li h5 {
  font-weight: bold;
  font-size: 120%;
  line-height: 1.2;
  color: #ff3355;
}

.highlight-list-img {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 4rem 0;
}
@media screen and (min-width: 768px) {
  .highlight-list-img {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 3.2rem 0;
  }
}
.highlight-list-img > li {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .highlight-list-img > li {
    width: calc(424 / 880 * 100%);
  }
}
.highlight-list-desc {
  border-style: solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(270deg, #d4c7b4 0%, #f7fffe 20%, #c0f0ec 50%, #ebd3d8 65%, #fcefca 100%);
  border-image-width: 2px 0 0 0;
}
.highlight-list-desc dl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 1em 0;
  line-height: 1.666;
  border-style: solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(270deg, #d4c7b4 0%, #f7fffe 20%, #c0f0ec 50%, #ebd3d8 65%, #fcefca 100%);
  border-image-width: 0 0 2px 0;
}
.highlight-list-desc dl dt {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  padding-right: 1.1em;
  min-width: 10em;
  color: #581f66;
}
.highlight-list-desc dl dd .text-link {
  margin-top: 0;
  padding: 0 1.7em 0 0;
}
.highlight-list-desc dl dd .text-link::before {
  left: auto;
  right: 0;
}
.highlight .outline-catch {
  margin: 12rem auto;
  width: calc(605 / 640 * 100%);
}
@media screen and (min-width: 768px) {
  .highlight .outline-catch {
    margin: 8rem auto;
    width: calc(481 / 880 * 100%);
  }
}

/* =====================================================================
    english
======================================================================*/
.english section:not(:last-child) {
  margin-bottom: 16rem;
}
@media screen and (min-width: 768px) {
  .english .outline-list li h3 {
    width: 12.5em;
  }
}
.english-fee-table {
  margin-bottom: 8rem;
}
.english-fee-table h4 {
  margin-bottom: 1em;
  font-family: "Barlow", sans-serif;
  font-weight: bold;
  font-size: 133%;
  color: #581f66;
}
@media screen and (min-width: 768px) {
  .english-fee-table h4 {
    font-size: 155%;
  }
}
.english-fee-table .fee-table dl > * {
  padding: 1.2em;
}
.english-fee-table .fee-table dl:not(.fee-table-head) dt {
  text-align: left;
}
.english-fee-table .fee-table.column2 dl dt {
  width: 14em;
}
@media screen and (min-width: 768px) {
  .english-fee-table .fee-table.column2 dl dt {
    width: 22em;
  }
}
.english-ticket-btn {
  margin: 0 auto;
  padding-left: 3.6em;
  width: 48.8rem;
}
.english-ticket-btn::before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  left: 1.1em;
  margin: auto 0;
  width: 1.5em;
  height: 1.5em;
  background: url(../images/common/icon_ticket.png) no-repeat center/contain;
}
.english .noticepink {
  color: #fff;
  background-color: #ff3355;
  width: calc(640 / 640 * 100%);
  margin: 0 auto 1rem;
}
@media screen and (min-width: 768px) {
  .english .noticepink {
    width: calc(900 / 1080 * 100%);
  }
}
.english .noticepink p {
  padding: 2rem 3rem;
  text-align: center;
}
.english .noticepink p b {
  font-weight: 900;
  text-decoration: underline;
}
.english .noticepink_2 {
  margin-bottom: 5rem;
}


/* =====================================================================
    guide
======================================================================*/
.guide section:not(:last-child) {
  margin-bottom: 16rem;
}
.guide section h4 {
  text-align: center;
  margin-bottom: 8rem;
  font-weight: bold;
  font-size: 146%;
  line-height: 1.454;
  color: #ff3355;
}
@media screen and (min-width: 768px) {
  .guide section h4 {
    margin-top: 8rem;
    font-size: 177%;
  }
}
@media screen and (min-width: 768px) {
  .guide .grid:not(.reverse) .guide-head {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
  }
}
@media screen and (min-width: 768px) {
  .guide-head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .guide-head figure {
    width: calc(320 / 880 * 100%);
  }
}
.guide-head-right {
  margin-top: 8rem;
}
@media screen and (min-width: 768px) {
  .guide-head-right {
    margin-top: 0;
    width: calc(520 / 880 * 100%);
  }
}
.guide-head-right h5 {
  padding: 1em 0;
  font-weight: bold;
  font-size: 146%;
  line-height: 1.3;
  border-style: solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, #d4c7b4 0%, #f7fffe 20%, #c0f0ec 50%, #ebd3d8 65%, #fcefca 100%);
  border-image-width: 1px 0 1px 0;
}
@media screen and (min-width: 768px) {
  .guide-head-right h5 {
    padding: 0.6em 0;
    font-size: 177%;
  }
}
.guide-head-right h5 small {
  margin-left: 1.5em;
  font-size: 54%;
}
.guide-comment dt, .guide-profile dt {
  margin-bottom: 0.8em;
  font-family: "Barlow", sans-serif;
  font-size: 106%;
  color: #581f66;
}
.guide-comment {
  margin-top: 8rem;
}
@media screen and (min-width: 768px) {
  .guide-comment {
    margin-top: 4rem;
  }
}
.guide-profile {
  margin-top: 6rem;
  padding: 6.4rem;
  background-color: rgba(215, 206, 217, 0.3);
}
@media screen and (min-width: 768px) {
  .guide-profile {
    margin-top: 4rem;
    padding: 4rem 8rem;
  }
}
.guide-table {
  margin-top: 8rem;
}
@media screen and (min-width: 768px) {
  .guide-table {
    margin-top: 6.4rem;
  }
}
.guide-table dl {
  line-height: 1.666;
}
@media screen and (min-width: 768px) {
  .guide-table dl {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 1px;
  }
}
.guide-table dl > * {
  padding: 4rem 6.4rem;
}
@media screen and (min-width: 768px) {
  .guide-table dl > * {
    padding: 3rem 4.5rem;
  }
}
.guide-table dl dt {
  color: #ffffff;
  background-color: rgba(66, 23, 77, 0.5);
}
@media screen and (min-width: 768px) {
  .guide-table dl dt {
    text-align: center;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    width: 13em;
  }
}
.guide-table dl dd {
  background-color: rgba(255, 255, 255, 0.75);
}
@media screen and (min-width: 768px) {
  .guide-table dl dd {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
  }
}

/* =====================================================================
    goods
======================================================================*/
.goods section:not(:last-child) {
  margin-bottom: 16rem;
}
.goods-pickup {
  padding: 6.4rem;
  background-color: rgba(255, 255, 255, 0.75);
}
@media screen and (min-width: 768px) {
  .goods-pickup {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}
@media screen and (min-width: 768px) {
  .goods-pickup figure {
    width: 42.5531914894%;
  }
}
.goods-pickup-right {
  margin-top: 6.4rem;
}
@media screen and (min-width: 768px) {
  .goods-pickup-right {
    margin-top: 0;
    width: 51.8617021277%;
  }
}
.goods-pickup-right .goods-pickup-desc:last-of-type {
  border-style: solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, #d4c7b4 0%, #f7fffe 20%, #c0f0ec 50%, #ebd3d8 65%, #fcefca 100%);
  border-image-width: 1px 0 1px 0;
}
.goods-pickup-desc {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding: 2.4rem 0;
  line-height: 1.333;
  border-style: solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, #d4c7b4 0%, #f7fffe 20%, #c0f0ec 50%, #ebd3d8 65%, #fcefca 100%);
  border-image-width: 1px 0 0 0;
}
.goods-pickup-desc dt {
  position: relative;
  padding-right: 0.8em;
  margin-right: 0.8em;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  min-width: 4.5em;
  color: #581f66;
}
.goods-pickup-desc dt::after {
  content: "";
  position: absolute;
  display: block;
  top: 0.12em;
  right: 0;
  width: 1px;
  height: 1em;
  border-right: 1px solid currentColor;
}
.goods-pickup-desc dd {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  line-height: initial;
}
.goods-pickup-desc dd small {
  display: inline-block;
}
.goods-pickup p {
  margin-top: 6.4rem;
}
@media screen and (min-width: 768px) {
  .goods-pickup p {
    margin-top: 4rem;
  }
}
.goods-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 8rem;
}
@media screen and (min-width: 768px) {
  .goods-list {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 4rem calc(32 / 880 * 100%);
  }
}
.goods-list > li {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .goods-list > li {
    width: calc(272 / 880 * 100%);
  }
}
.goods-list > li figure {
  margin-bottom: 6rem;
}
@media screen and (min-width: 768px) {
  .goods-list > li figure {
    margin-bottom: 3rem;
  }
}
.goods-list > li h4 {
  font-weight: bold;
  font-size: 133%;
  line-height: 1.5;
  color: #ff3355;
}
.goods-list > li .price {
  margin-bottom: 0.3em;
  font-weight: bold;
  font-size: 120%;
  line-height: 1.5;
  color: #581f66;
}
.goods-list > li .price small {
  font-size: 70%;
}
@media screen and (min-width: 768px) {
  .goods-list > li .price {
    font-size: 111%;
  }
}

/* =====================================================================
    trivia
======================================================================*/
.trivia {
  padding-bottom: 0;
}
.trivia-wrap {
  position: relative;
  margin: 0 calc(50% - 50vw);
}
@media screen and (min-width: 768px) {
  .trivia-wrap {
    margin: 0 auto;
    width: 108rem;
  }
}
.trivia-wrap::after {
  content: "";
  position: fixed;
  display: block;
  top: calc(100vh - 35.7rem);
  left: 0;
  width: 100%;
  height: 35.7rem;
  background: url(../../assets/images/trivia/bg_todaiji.png) no-repeat top center/cover;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .trivia-wrap::after {
    background-size: contain;
  }
}
.trivia-wrap-group {
  position: sticky;
  top: 0;
  padding: 10vh 0;
  opacity: 0;
  -webkit-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.trivia-wrap-group.is-active {
  opacity: 1;
  pointer-events: all;
}
@media screen and (min-width: 768px) {
  .trivia-wrap-group {
    padding-top: calc(9.6rem + 10vh);
  }
}
.trivia-wrap-group:nth-child(odd) .trivia-item > li:nth-child(1) {
  left: 0;
  -webkit-transform: rotate(-15deg);
          transform: rotate(-15deg);
  z-index: 3;
}
@media screen and (min-width: 768px) {
  .trivia-wrap-group:nth-child(odd) .trivia-item > li:nth-child(1) {
    margin: 0 0 0 12.1rem;
  }
}
.trivia-wrap-group:nth-child(odd) .trivia-item > li:nth-child(2) {
  right: 0;
  margin: 11.9rem 0 0;
  font-size: 0.9em;
  z-index: 2;
}
@media screen and (min-width: 768px) {
  .trivia-wrap-group:nth-child(odd) .trivia-item > li:nth-child(2) {
    margin: 5.5rem 12rem 0 0;
    -webkit-transform: rotate(15deg);
            transform: rotate(15deg);
  }
}
.trivia-wrap-group:nth-child(odd) .trivia-item > li:nth-child(3) {
  right: 0;
  margin: 26rem 22rem 0 0;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
  font-size: 0.8em;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .trivia-wrap-group:nth-child(odd) .trivia-item > li:nth-child(3) {
    margin: 12.9rem 28.2rem 0 0;
    -webkit-transform: rotate(-15deg);
            transform: rotate(-15deg);
  }
}
.trivia-wrap-group:nth-child(odd) .trivia-item > li:nth-child(4) {
  right: 0;
  margin: 39rem 3.5rem 0 0;
  -webkit-transform: rotate(-15deg);
          transform: rotate(-15deg);
  font-size: 0.75em;
}
@media screen and (min-width: 768px) {
  .trivia-wrap-group:nth-child(odd) .trivia-item > li:nth-child(4) {
    right: auto;
    left: 0;
    margin: 20rem 0 0 30rem;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    font-size: 1em;
    z-index: 3;
  }
}
.trivia-wrap-group:nth-child(odd) .trivia-item > li:nth-child(5) {
  left: 0;
  margin: 46.5rem 0 0 3.6rem;
  font-size: 0.9em;
  z-index: 3;
}
@media screen and (min-width: 768px) {
  .trivia-wrap-group:nth-child(odd) .trivia-item > li:nth-child(5) {
    margin: 33rem 0 0 18rem;
    -webkit-transform: rotate(-30deg);
            transform: rotate(-30deg);
    z-index: 2;
  }
}
.trivia-wrap-group:nth-child(odd) .trivia-item > li:nth-child(6) {
  left: 0;
  margin: 68rem 0 0 9rem;
  -webkit-transform: rotate(-30deg);
          transform: rotate(-30deg);
  font-size: 0.75em;
  z-index: 2;
}
@media screen and (min-width: 768px) {
  .trivia-wrap-group:nth-child(odd) .trivia-item > li:nth-child(6) {
    margin: 43rem 0 0 45rem;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
.trivia-wrap-group:nth-child(odd) .trivia-item > li:nth-child(7) {
  left: 0;
  margin: 84rem 0 0 23.5rem;
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
  font-size: 0.8em;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .trivia-wrap-group:nth-child(odd) .trivia-item > li:nth-child(7) {
    left: auto;
    right: 0;
    margin: 53.3rem 31.2rem 0 0;
    -webkit-transform: rotate(15deg);
            transform: rotate(15deg);
  }
}
.trivia-wrap-group:nth-child(odd) .trivia-item > li:nth-child(8) {
  right: 0;
  margin: 60.5rem 0 0;
  font-size: 0.8em;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .trivia-wrap-group:nth-child(odd) .trivia-item > li:nth-child(8) {
    margin: 33.8rem 20rem 0 0;
    -webkit-transform: rotate(30deg);
            transform: rotate(30deg);
  }
}
.trivia-wrap-group:nth-child(even) .trivia-item > li:nth-child(1) {
  right: 0;
  margin: 0 1.6rem 0 0;
  z-index: 3;
}
@media screen and (min-width: 768px) {
  .trivia-wrap-group:nth-child(even) .trivia-item > li:nth-child(1) {
    margin: 0 25rem 0 0;
  }
}
.trivia-wrap-group:nth-child(even) .trivia-item > li:nth-child(2) {
  left: 0;
  margin: 8.3rem 0 0 9rem;
  font-size: 0.75em;
  -webkit-transform: rotate(-15deg);
          transform: rotate(-15deg);
  z-index: 2;
}
@media screen and (min-width: 768px) {
  .trivia-wrap-group:nth-child(even) .trivia-item > li:nth-child(2) {
    margin: 8.3rem 0 0 27rem;
  }
}
.trivia-wrap-group:nth-child(even) .trivia-item > li:nth-child(3) {
  right: 0;
  margin: 26rem 0 0 0;
  font-size: 0.9em;
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
}
@media screen and (min-width: 768px) {
  .trivia-wrap-group:nth-child(even) .trivia-item > li:nth-child(3) {
    margin: 13.6rem 14rem 0 0;
  }
}
.trivia-wrap-group:nth-child(even) .trivia-item > li:nth-child(4) {
  left: 0;
  margin: 24.8rem 0 0 2.9rem;
  font-size: 0.8em;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
}
@media screen and (min-width: 768px) {
  .trivia-wrap-group:nth-child(even) .trivia-item > li:nth-child(4) {
    margin: 16.1rem 0 0 15rem;
  }
}
.trivia-wrap-group:nth-child(even) .trivia-item > li:nth-child(5) {
  left: 0;
  margin: 50.1rem 0 0 20.6rem;
  font-size: 0.9em;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
  z-index: 2;
}
@media screen and (min-width: 768px) {
  .trivia-wrap-group:nth-child(even) .trivia-item > li:nth-child(5) {
    margin: 30rem 0 0 42.6rem;
  }
}
.trivia-wrap-group:nth-child(even) .trivia-item > li:nth-child(6) {
  left: 0;
  margin: 68.4rem 0 0 2.3rem;
  font-size: 0.82em;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .trivia-wrap-group:nth-child(even) .trivia-item > li:nth-child(6) {
    margin: 38.4rem 0 0 28.3rem;
  }
}
.trivia-wrap-group:nth-child(even) .trivia-item > li:nth-child(7) {
  right: 0;
  margin: 63.5rem -2rem 0 0;
  font-size: 0.8em;
  -webkit-transform: rotate(-30deg);
          transform: rotate(-30deg);
}
@media screen and (min-width: 768px) {
  .trivia-wrap-group:nth-child(even) .trivia-item > li:nth-child(7) {
    margin: 43.5rem 19rem 0 0;
  }
}
.trivia-wrap-group:nth-child(even) .trivia-item > li:nth-child(8) {
  right: 0;
  margin: 82.8rem 19.5rem 0 0;
  font-size: 0.75em;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
}
@media screen and (min-width: 768px) {
  .trivia-wrap-group:nth-child(even) .trivia-item > li:nth-child(8) {
    margin: 52.8rem 49.5rem 0 0;
  }
}
.trivia-item {
  position: relative;
  width: 100%;
  height: 105.9rem;
  max-height: 40vh;
  font-size: 4rem;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
}
@media screen and (min-width: 768px) {
  .trivia-item {
    height: 66rem;
    max-height: 10vh;
    font-size: 2.4rem;
  }
}
.trivia-item > li {
  position: absolute;
  display: grid;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  width: 10em;
  height: 6.2em;
  font-weight: bold;
  line-height: 1.194;
  letter-spacing: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  -webkit-filter: drop-shadow(0 0.5em 1em rgba(0, 0, 0, 0.1));
          filter: drop-shadow(0 0.5em 1em rgba(0, 0, 0, 0.1));
  cursor: pointer;
  opacity: 0;
  top: 20px;
  -webkit-transition: 0.8s ease;
  transition: 0.8s ease;
}
.trivia-item > li.is-show {
  opacity: 1;
  top: 0;
}
@media screen and (min-width: 768px) {
  .trivia-item > li:hover {
    -webkit-filter: drop-shadow(0 0.5em 1em rgba(0, 0, 0, 0.3));
            filter: drop-shadow(0 0.5em 1em rgba(0, 0, 0, 0.3));
  }
}
.trivia-item > li.red {
  color: #66333f;
  background-image: url(../../assets/images/trivia/img_sange_red.png);
}
.trivia-item > li.yellow {
  color: #664700;
  background-image: url(../../assets/images/trivia/img_sange_yellow.png);
}
.trivia-item > li.green {
  color: #296600;
  background-image: url(../../assets/images/trivia/img_sange_green.png);
}
.trivia-item > li.blue {
  color: #005a66;
  background-image: url(../../assets/images/trivia/img_sange_blue.png);
}
.trivia-item > li.purple {
  color: #453366;
  background-image: url(../../assets/images/trivia/img_sange_purple.png);
}

#trivia .popup-subttl {
  margin-bottom: 4rem;
  padding-bottom: 0.5em;
  border-style: solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg, #d4c7b4 0%, #f7fffe 20%, #c0f0ec 50%, #ebd3d8 65%, #fcefca 100%);
  border-image-width: 0 0 1px 0;
}
@media screen and (min-width: 768px) {
  #trivia .popup-subttl {
    font-size: 166%;
  }
}
#trivia figure {
  margin: 0 auto 4rem;
}
@media screen and (min-width: 768px) {
  #trivia figure {
    width: 66.6666666667%;
  }
}/*# sourceMappingURL=subpage.css.map */