@charset "UTF-8";
/* =========================================
   modern-css-reset（最適化版）
========================================= */
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
    -o-tab-size: 4;
       tab-size: 4;
}

body {
  margin: 0;
  padding: 0;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
}

ul,
ol {
  padding: 0;
  margin: 0;
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

/* =========================================
   カンプ基準の設定値
========================================= */
/* =========================================
   ブレークポイント管理
========================================= */
/* =========================================
   vw/svw を簡単にする mixin（最適化）
========================================= */
/* PC/SP の font-size を 1 行で指定 */
/* 任意のプロパティを PC/SP まとめて指定（可変引数対応） */
/* =========================================
   基本スタイル
========================================= */
html {
  scroll-behavior: smooth;
}

body {
  color: #fff;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 500;
  background-color: #333;
  scroll-behavior: smooth;
}
@media screen and (min-width: 841px) {
  body {
    font-size: calc(24 / 1920 * 100vw);
  }
}
@media screen and (max-width: 840px) and (orientation: portrait) {
  body {
    font-size: calc(32 / 720 * 100vw);
  }
}

body.fixed {
  position: fixed;
  height: 100vh;
  overflow: hidden;
}

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

button {
  cursor: pointer;
  border: none;
  background: transparent;
}

.hidden {
  display: none !important;
}

.main {
  width: 100%;
  overflow-x: hidden;
}

h1 {
  margin: 0;
}

@media screen and (min-width: 841px) {
  .nopc {
    display: none !important;
  }
}

@media screen and (max-width: 840px) and (orientation: portrait) {
  .nosp {
    display: none !important;
  }
}

.flexbox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}
@media screen and (max-width: 840px) and (orientation: portrait) {
  .flexbox {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.inner {
  margin: auto;
  width: calc(1440 / 1920 * 100vw);
}
@media screen and (max-width: 840px) and (orientation: portrait) {
  .inner {
    width: 100%;
  }
}

#about p {
  opacity: 0;
}

#about p.animated {
  -webkit-animation: poyoyon 0.5s cubic-bezier(0.12, 0, 0.39, 0) 1 forwards;
          animation: poyoyon 0.5s cubic-bezier(0.12, 0, 0.39, 0) 1 forwards;
}

@-webkit-keyframes poyoyon {
  0% {
    -webkit-transform: translateX(140px);
            transform: translateX(140px);
    opacity: 0;
  }
  50% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  65% {
    -webkit-transform: translateX(30px);
            transform: translateX(30px);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  20%, 100% {
    opacity: 1;
  }
}

@keyframes poyoyon {
  0% {
    -webkit-transform: translateX(140px);
            transform: translateX(140px);
    opacity: 0;
  }
  50% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  65% {
    -webkit-transform: translateX(30px);
            transform: translateX(30px);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  20%, 100% {
    opacity: 1;
  }
}
#event {
  text-shadow: #000 0 0 calc(5 / 1920 * 100vw);
}
@media screen and (max-width: 840px) and (orientation: portrait) {
  #event {
    text-shadow: #000 0 0 calc(5 / 720 * 100vw);
  }
}
#event .animated .border {
  opacity: 1;
}
#event .animated .border.top,
#event .animated .border.bottom {
  -webkit-animation: stroke-width 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
          animation: stroke-width 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
#event .animated .border.right,
#event .animated .border.left {
  -webkit-animation: stroke-height 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
          animation: stroke-height 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
#event .large {
  opacity: 0;
}
#event .large.animated {
  -webkit-animation: popup 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
          animation: popup 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@-webkit-keyframes stroke-width {
  0% {
    width: 0;
    opacity: 1;
  }
  100% {
    width: calc(100% - 20 / 1920 * 100vw);
    @media screen and (max-width: 840px) and (orientation: portrait) {
      width: calc(100% - 20 / 720 * 100vw);
    }
    opacity: 1;
  }
}

@keyframes stroke-width {
  0% {
    width: 0;
    opacity: 1;
  }
  100% {
    width: calc(100% - 20 / 1920 * 100vw);
    @media screen and (max-width: 840px) and (orientation: portrait) {
      width: calc(100% - 20 / 720 * 100vw);
    }
    opacity: 1;
  }
}
@-webkit-keyframes stroke-height {
  0% {
    height: 0;
    opacity: 1;
  }
  100% {
    height: calc(100% - 20 / 1920 * 100vw);
    @media screen and (max-width: 840px) and (orientation: portrait) {
      width: calc(100% - 20 / 720 * 100vw);
    }
    opacity: 1;
  }
}
@keyframes stroke-height {
  0% {
    height: 0;
    opacity: 1;
  }
  100% {
    height: calc(100% - 20 / 1920 * 100vw);
    @media screen and (max-width: 840px) and (orientation: portrait) {
      width: calc(100% - 20 / 720 * 100vw);
    }
    opacity: 1;
  }
}
@-webkit-keyframes popup {
  0% {
    -webkit-transform: translateY(calc(40 / 1920 * 100vw)) scale(0.7);
            transform: translateY(calc(40 / 1920 * 100vw)) scale(0.7);
    @media screen and (max-width: 840px) and (orientation: portrait) {
      -webkit-transform: translateY(calc(40 / 720 * 100vw)) scale(0.7);
              transform: translateY(calc(40 / 720 * 100vw)) scale(0.7);
    }
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) scale(1);
            transform: translateY(0) scale(1);
  }
  80%, 100% {
    opacity: 1;
  }
}
@keyframes popup {
  0% {
    -webkit-transform: translateY(calc(40 / 1920 * 100vw)) scale(0.7);
            transform: translateY(calc(40 / 1920 * 100vw)) scale(0.7);
    @media screen and (max-width: 840px) and (orientation: portrait) {
      -webkit-transform: translateY(calc(40 / 720 * 100vw)) scale(0.7);
              transform: translateY(calc(40 / 720 * 100vw)) scale(0.7);
    }
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) scale(1);
            transform: translateY(0) scale(1);
  }
  80%, 100% {
    opacity: 1;
  }
}
.scrollwrap {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
@media screen and (max-width: 840px) and (orientation: portrait) {
  .scrollwrap {
    top: 0;
    margin: auto;
  }
}
.scrollwrap .scrolldown {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  text-align: center;
  color: #fff;
  text-decoration: none;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  opacity: 0;
  background: linear-gradient(135deg, rgb(17, 0, 255), #0ff, rgb(255, 145, 0));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation: textgradient_animation 2s linear infinite;
          animation: textgradient_animation 2s linear infinite;
}
@media screen and (min-width: 841px) {
  .scrollwrap .scrolldown {
    font-size: calc(20 / 1920 * 100vw);
    bottom: calc(50 / 1920 * 100vw);
  }
}
@media screen and (max-width: 840px) and (orientation: portrait) {
  .scrollwrap .scrolldown {
    font-size: calc(28 / 720 * 100vw);
    bottom: calc(500 / 720 * 100vw);
  }
}
@-webkit-keyframes textgradient_animation {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0 0;
  }
}
@keyframes textgradient_animation {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0 0;
  }
}
.scrollwrap .circle-arrow {
  border-radius: 50%;
  position: relative;
  margin-inline: auto;
  -webkit-animation: pulse 2s infinite;
          animation: pulse 2s infinite;
}
@media screen and (min-width: 841px) {
  .scrollwrap .circle-arrow {
    width: calc(100 / 1920 * 100vw);
    height: calc(100 / 1920 * 100vw);
    margin-bottom: calc(12 / 1920 * 100vw);
  }
}
@media screen and (max-width: 840px) and (orientation: portrait) {
  .scrollwrap .circle-arrow {
    width: calc(100 / 720 * 100vw);
    height: calc(100 / 720 * 100vw);
    margin-bottom: calc(12 / 720 * 100vw);
  }
}
.scrollwrap .circle-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border-left: calc(3 / 1920 * 100vw) solid #0ff;
  border-bottom: calc(3 / 1920 * 100vw) solid #0ff;
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
          transform: translate(-50%, -50%) rotate(-45deg);
}
@media screen and (max-width: 840px) and (orientation: portrait) {
  .scrollwrap .circle-arrow::after {
    border-left-width: calc(3 / 720 * 100vw);
    border-bottom-width: calc(3 / 720 * 100vw);
  }
}
@media screen and (min-width: 841px) {
  .scrollwrap .circle-arrow::after {
    width: calc(30 / 1920 * 100vw);
    height: calc(30 / 1920 * 100vw);
    border-left-width: calc(2 / 1920 * 100vw);
    border-bottom-width: calc(2 / 1920 * 100vw);
  }
}
@media screen and (max-width: 840px) and (orientation: portrait) {
  .scrollwrap .circle-arrow::after {
    width: calc(30 / 720 * 100vw);
    height: calc(30 / 720 * 100vw);
    border-left-width: calc(2 / 720 * 100vw);
    border-bottom-width: calc(2 / 720 * 100vw);
  }
}
.scrollwrap .circle-arrow::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: calc(5 / 1920 * 100vw); /* 枠の太さ */
  border-radius: 50%;
  background: linear-gradient(135deg, rgb(17, 0, 255), #0ff, rgb(255, 145, 0));
  -webkit-mask: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff)) content-box, -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  -webkit-animation: roll 3s infinite;
          animation: roll 3s infinite;
}
@media screen and (min-width: 841px) {
  .scrollwrap .circle-arrow::before {
    padding: calc(5 / 1920 * 100vw);
  }
}
@media screen and (max-width: 840px) and (orientation: portrait) {
  .scrollwrap .circle-arrow::before {
    padding: calc(5 / 720 * 100vw);
  }
}
.scrollwrap.totop {
  position: fixed;
  z-index: 99;
  left: auto;
  top: auto;
}
@media screen and (min-width: 841px) {
  .scrollwrap.totop {
    right: calc(100 / 1920 * 100vw);
  }
}
@media screen and (max-width: 840px) and (orientation: portrait) {
  .scrollwrap.totop {
    right: calc(40 / 720 * 100vw);
  }
}
@media screen and (min-width: 841px) {
  .scrollwrap.totop {
    bottom: calc(100 / 1920 * 100vw);
  }
}
@media screen and (max-width: 840px) and (orientation: portrait) {
  .scrollwrap.totop {
    bottom: calc(100 / 720 * 100vw);
  }
}
@media screen and (min-width: 841px) {
  .scrollwrap.totop {
    width: calc(60 / 1920 * 100vw);
    height: calc(60 / 1920 * 100vw);
    margin-bottom: calc(12 / 1920 * 100vw);
  }
}
@media screen and (max-width: 840px) and (orientation: portrait) {
  .scrollwrap.totop {
    width: calc(80 / 720 * 100vw);
    height: calc(80 / 720 * 100vw);
  }
}
.scrollwrap.totop .scrolldown {
  -webkit-transform: none;
          transform: none;
  left: auto;
  opacity: 1;
  display: none;
  top: 0;
  left: 0;
}
@media screen and (min-width: 841px) {
  .scrollwrap.totop .scrolldown .circle-arrow {
    width: calc(60 / 1920 * 100vw);
    height: calc(60 / 1920 * 100vw);
  }
}
@media screen and (max-width: 840px) and (orientation: portrait) {
  .scrollwrap.totop .scrolldown .circle-arrow {
    width: calc(80 / 720 * 100vw);
    height: calc(80 / 720 * 100vw);
  }
}
.scrollwrap.totop .scrolldown .circle-arrow::after {
  -webkit-transform: translate(-50%, -50%) rotate(135deg);
          transform: translate(-50%, -50%) rotate(135deg);
}
@media screen and (min-width: 841px) {
  .scrollwrap.totop .scrolldown .circle-arrow::after {
    width: calc(20 / 1920 * 100vw);
    height: calc(20 / 1920 * 100vw);
    border-left-width: calc(2 / 1920 * 100vw);
    border-bottom-width: calc(2 / 1920 * 100vw);
  }
}
@media screen and (max-width: 840px) and (orientation: portrait) {
  .scrollwrap.totop .scrolldown .circle-arrow::after {
    width: calc(20 / 720 * 100vw);
    height: calc(20 / 720 * 100vw);
    border-left-width: calc(2 / 720 * 100vw);
    border-bottom-width: calc(2 / 720 * 100vw);
  }
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@-webkit-keyframes roll {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes roll {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
header {
  width: 100%;
  height: 100vh;
  z-index: 0;
}
header h1 {
  text-indent: -9999px;
  background-image: url(../img/logo.webp);
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat;
  overflow: hidden;
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 100%;
  height: 100vh;
  background-color: #000;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
header h1::after {
  content: "";
  display: block;
  width: 100%;
  height: 100vh;
  background-color: RGBa(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  opacity: 0;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
header h1.overlay::after {
  opacity: 1;
}

.hamburger {
  display: none;
}
@media screen and (max-width: 840px) and (orientation: portrait) {
  .hamburger {
    display: block;
    position: fixed;
    width: calc(60 / 720 * 100vw);
    height: calc(60 / 720 * 100vw);
    top: calc(40 / 720 * 100vw);
    right: calc(40 / 720 * 100vw);
    z-index: 999;
  }
  .hamburger span {
    display: block;
    width: 100%;
    height: calc(5 / 720 * 100vw);
    background: linear-gradient(189deg, rgb(252, 176, 69) 0%, rgb(253, 29, 29) 50%, rgb(131, 58, 180) 100%);
    position: absolute;
    -webkit-transition: 0.3s;
    transition: 0.3s;
  }
  .hamburger span:first-child {
    top: calc(14 / 720 * 100vw);
  }
  .hamburger span:last-child {
    bottom: calc(14 / 720 * 100vw);
  }
}
.hamburger.active span:first-child {
  -webkit-transform: rotate(315deg) translateY(calc(18 / 720 * 100vw));
          transform: rotate(315deg) translateY(calc(18 / 720 * 100vw));
}
.hamburger.active span:last-child {
  -webkit-transform: rotate(-315deg) translateY(calc(-18 / 720 * 100vw));
          transform: rotate(-315deg) translateY(calc(-18 / 720 * 100vw));
}

nav {
  background-color: #000;
  position: fixed;
  top: 0;
  right: 0;
  margin: auto;
  z-index: 999;
  width: 100%;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  width: calc(600 / 1920 * 100vw);
}
nav.hidden {
  opacity: 0;
}
@media screen and (min-width: 841px) {
  nav {
    top: calc(20 / 1920 * 100vw);
    right: calc(200 / 1920 * 100vw);
  }
}
@media screen and (max-width: 840px) and (orientation: portrait) {
  nav {
    top: calc(0 / 720 * 100vw);
    left: calc(0 / 720 * 100vw);
  }
}
@media screen and (max-width: 840px) and (orientation: portrait) {
  nav {
    width: 100%;
    height: 100vh;
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  nav.active {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    z-index: 998;
  }
}
nav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
}
@media screen and (min-width: 841px) {
  nav ul {
    gap: calc(20 / 1920 * 100vw);
  }
}
@media screen and (max-width: 840px) and (orientation: portrait) {
  nav ul {
    gap: calc(60 / 720 * 100vw);
  }
}
@media screen and (max-width: 840px) and (orientation: portrait) {
  nav ul {
    -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;
    height: 100vh;
  }
}
nav ul li a {
  color: #fff;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  display: block;
  position: relative;
}
@media screen and (min-width: 841px) {
  nav ul li a {
    font-size: calc(18 / 1920 * 100vw);
  }
}
@media screen and (max-width: 840px) and (orientation: portrait) {
  nav ul li a {
    font-size: calc(36 / 720 * 100vw);
  }
}
@media screen and (max-width: 840px) and (orientation: portrait) {
  nav ul li a {
    font-family: "Dela Gothic One", sans-serif;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: calc(600 / 720 * 100vw);
    height: calc(80 / 720 * 100vw);
    border-radius: calc(40 / 720 * 100vw);
    background: linear-gradient(189deg, rgb(252, 176, 69) 0%, rgb(253, 29, 29) 50%, rgb(131, 58, 180) 100%);
  }
}
nav ul li a::after {
  content: "";
  display: block;
  background: linear-gradient(189deg, rgb(252, 176, 69) 0%, rgb(253, 29, 29) 50%, rgb(131, 58, 180) 100%);
  width: 0%;
  position: absolute;
  left: 0;
  bottom: 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
@media screen and (min-width: 841px) {
  nav ul li a::after {
    height: calc(3 / 1920 * 100vw);
  }
}
@media screen and (max-width: 840px) and (orientation: portrait) {
  nav ul li a::after {
    height: calc(3 / 720 * 100vw);
  }
}
nav ul li a:hover::after {
  width: 100%;
}

.animation {
  display: none;
}

#hero,
section {
  position: relative;
  z-index: 1;
}

section {
  margin: auto;
}
@media screen and (min-width: 841px) {
  section {
    width: calc(1440 / 1920 * 100vw);
    padding: calc(200 / 1920 * 100vw) calc(0 / 1920 * 100vw);
  }
}
@media screen and (max-width: 840px) and (orientation: portrait) {
  section {
    width: calc(600 / 720 * 100vw);
    padding: calc(200 / 720 * 100vw) calc(0 / 720 * 100vw);
  }
}

#hero {
  height: 2;
  text-align: center;
  text-shadow: #000 0 0 calc(20 / 1920 * 100vw);
}
@media screen and (min-width: 841px) {
  #hero {
    font-size: calc(32 / 1920 * 100vw);
  }
}
@media screen and (max-width: 840px) and (orientation: portrait) {
  #hero {
    font-size: calc(26 / 720 * 100vw);
  }
}
#hero .text,
#hero .date,
#hero .title,
#hero .price {
  font-family: "Dela Gothic One", sans-serif;
}
#hero .title {
  color: rgba(255, 178, 13, 0.9333333333);
}
@media screen and (min-width: 841px) {
  #hero .title {
    font-size: calc(70 / 1920 * 100vw);
    padding-top: calc(100 / 1920 * 100vw);
  }
}
@media screen and (max-width: 840px) and (orientation: portrait) {
  #hero .title {
    font-size: calc(50 / 720 * 100vw);
    padding-top: calc(100 / 720 * 100vw);
  }
}
#hero .title .rubi {
  display: block;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(calc(145 / 1920 * 100vw));
          transform: translateX(calc(145 / 1920 * 100vw));
}
@media screen and (max-width: 840px) and (orientation: portrait) {
  #hero .title .rubi {
    -webkit-transform: translateX(calc(80 / 720 * 100vw));
            transform: translateX(calc(80 / 720 * 100vw));
  }
}
@media screen and (min-width: 841px) {
  #hero .title .rubi {
    font-size: calc(24 / 1920 * 100vw);
    top: calc(200 / 1920 * 100vw);
  }
}
@media screen and (max-width: 840px) and (orientation: portrait) {
  #hero .title .rubi {
    font-size: calc(24 / 720 * 100vw);
    top: calc(170 / 720 * 100vw);
  }
}
@media screen and (max-width: 840px) and (orientation: portrait) {
  #hero .text {
    font-size: calc(40 / 720 * 100vw);
  }
}
@media screen and (min-width: 841px) {
  #hero .text .large {
    font-size: calc(50 / 1920 * 100vw);
  }
}
@media screen and (max-width: 840px) and (orientation: portrait) {
  #hero .text .large {
    font-size: calc(50 / 720 * 100vw);
  }
}
@media screen and (min-width: 841px) {
  #hero .date,
  #hero .price {
    font-size: calc(40 / 1920 * 100vw);
  }
}
@media screen and (max-width: 840px) and (orientation: portrait) {
  #hero .date,
  #hero .price {
    font-size: calc(40 / 720 * 100vw);
  }
}

.pr {
  color: rgb(186, 255, 75);
  font-weight: 700;
  text-align: center;
  margin-right: auto;
  margin-left: auto;
}
@media screen and (min-width: 841px) {
  .pr {
    font-size: calc(90 / 1920 * 100vw);
    margin-top: calc(200 / 1920 * 100vw);
    margin-bottom: calc(100 / 1920 * 100vw);
    width: calc(1600 / 1920 * 100vw);
  }
}
@media screen and (max-width: 840px) and (orientation: portrait) {
  .pr {
    font-size: calc(40 / 720 * 100vw);
    margin-top: calc(100 / 720 * 100vw);
    margin-bottom: calc(100 / 720 * 100vw);
    width: calc(660 / 720 * 100vw);
  }
}
.pr .inner {
  width: 100%;
  overflow: hidden;
}

#about {
  width: 100% !important;
  overflow: hidden;
}
@media screen and (min-width: 841px) {
  #about {
    padding-top: calc(300 / 1920 * 100vw);
    padding-bottom: calc(0 / 1920 * 100vw);
    margin-bottom: calc(100 / 1920 * 100vw);
  }
}
@media screen and (max-width: 840px) and (orientation: portrait) {
  #about {
    padding-top: calc(400 / 720 * 100vw);
    padding-bottom: calc(200 / 720 * 100vw);
    margin-bottom: calc(100 / 720 * 100vw);
  }
}
#about .bg {
  color: #fff;
  font-weight: 700;
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 0;
  opacity: 0.2;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
@media screen and (min-width: 841px) {
  #about .bg {
    font-size: calc(100 / 1920 * 100vw);
  }
}
@media screen and (max-width: 840px) and (orientation: portrait) {
  #about .bg {
    font-size: calc(60 / 720 * 100vw);
  }
}
#about h2 {
  font-family: "Dela Gothic One", sans-serif;
}
@media screen and (min-width: 841px) {
  #about h2 .large {
    font-size: calc(60 / 1920 * 100vw);
  }
}
@media screen and (max-width: 840px) and (orientation: portrait) {
  #about h2 .large {
    font-size: calc(60 / 720 * 100vw);
  }
}
#about h2 .jp {
  display: block;
}
@media screen and (min-width: 841px) {
  #about h2 .jp {
    font-size: calc(28 / 1920 * 100vw);
  }
}
@media screen and (max-width: 840px) and (orientation: portrait) {
  #about h2 .jp {
    font-size: calc(28 / 720 * 100vw);
  }
}
#about .catch {
  font-weight: 700;
}
@media screen and (min-width: 841px) {
  #about .catch {
    font-size: calc(32 / 1920 * 100vw);
    margin-top: calc(100 / 1920 * 100vw);
  }
}
@media screen and (max-width: 840px) and (orientation: portrait) {
  #about .catch {
    font-size: calc(32 / 720 * 100vw);
    margin-top: calc(100 / 720 * 100vw);
  }
}

#event .en {
  font-family: "Dela Gothic One", sans-serif;
  display: block;
  text-align: center;
}
@media screen and (min-width: 841px) {
  #event .en {
    font-size: calc(60 / 1920 * 100vw);
  }
}
@media screen and (max-width: 840px) and (orientation: portrait) {
  #event .en {
    font-size: calc(40 / 720 * 100vw);
  }
}
#event h2 {
  text-align: center;
}
#event .event_cat {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  background-color: RGBa(0, 0, 0, 0.5);
  position: relative;
}
@media screen and (max-width: 840px) and (orientation: portrait) {
  #event .event_cat {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
@media screen and (min-width: 841px) {
  #event .event_cat {
    padding: calc(40 / 1920 * 100vw);
  }
}
@media screen and (max-width: 840px) and (orientation: portrait) {
  #event .event_cat {
    padding: calc(40 / 720 * 100vw);
  }
}
#event .event_cat .border {
  content: "";
  position: absolute;
  opacity: 0;
}
#event .event_cat .border.top,
#event .event_cat .border.bottom {
  width: calc(100% - 20 / 1920 * 100vw);
}
@media screen and (max-width: 840px) and (orientation: portrait) {
  #event .event_cat .border.top,
  #event .event_cat .border.bottom {
    width: calc(100% - 100 / 720 * 100vw);
  }
}
#event .event_cat .border.top {
  border-top-width: calc(3 / 1920 * 100vw);
  border-top-style: solid;
  right: 0;
  top: 0;
}
@media screen and (max-width: 840px) and (orientation: portrait) {
  #event .event_cat .border.top {
    border-width: calc(8 / 720 * 100vw);
  }
}
#event .event_cat .border.bottom {
  border-bottom-width: calc(3 / 1920 * 100vw);
  border-bottom-style: solid;
  left: 0;
  bottom: 0;
}
@media screen and (max-width: 840px) and (orientation: portrait) {
  #event .event_cat .border.bottom {
    border-width: calc(8 / 720 * 100vw);
  }
}
#event .event_cat .border.right,
#event .event_cat .border.left {
  height: calc(100% - 20 / 1920 * 100vw);
}
@media screen and (max-width: 840px) and (orientation: portrait) {
  #event .event_cat .border.right,
  #event .event_cat .border.left {
    height: calc(100% - 40 / 720 * 100vw);
  }
}
#event .event_cat .border.right {
  border-right-width: calc(3 / 1920 * 100vw);
  border-right-style: solid;
  right: 0;
  top: 0;
}
@media screen and (max-width: 840px) and (orientation: portrait) {
  #event .event_cat .border.right {
    border-width: calc(8 / 720 * 100vw);
  }
}
#event .event_cat .border.left {
  border-left-width: calc(3 / 1920 * 100vw);
  border-left-style: solid;
  left: 0;
  bottom: 0;
}
@media screen and (max-width: 840px) and (orientation: portrait) {
  #event .event_cat .border.left {
    border-width: calc(8 / 720 * 100vw);
  }
}
#event .event_cat h3 {
  margin-top: 0;
  position: relative;
}
@media screen and (min-width: 841px) {
  #event .event_cat h3 {
    font-size: calc(40 / 1920 * 100vw);
    margin-right: calc(60 / 1920 * 100vw);
  }
}
@media screen and (max-width: 840px) and (orientation: portrait) {
  #event .event_cat h3 {
    font-size: calc(40 / 720 * 100vw);
    margin-right: calc(60 / 720 * 100vw);
  }
}
#event .event_cat h3 .line {
  width: 0%;
  display: block;
  position: absolute;
  left: 0;
  -webkit-transition: 2s;
  transition: 2s;
}
@media screen and (min-width: 841px) {
  #event .event_cat h3 .line {
    height: calc(3 / 1920 * 100vw);
    bottom: calc(0 / 1920 * 100vw);
  }
}
@media screen and (max-width: 840px) and (orientation: portrait) {
  #event .event_cat h3 .line {
    height: calc(3 / 720 * 100vw);
    bottom: calc(0 / 720 * 100vw);
  }
}
#event .event_cat.animated h3 .line {
  width: 100%;
}
#event .taiken {
  width: calc(680 / 1920 * 100vw);
}
@media screen and (max-width: 840px) and (orientation: portrait) {
  #event .taiken {
    width: 100%;
    margin-bottom: calc(40 / 720 * 100vw);
  }
}
#event .taiken .border {
  border-color: rgb(17, 0, 255);
}
#event .taiken h3 .line {
  background-color: rgb(17, 0, 255);
}
#event .tenji {
  width: calc(680 / 1920 * 100vw);
  margin-right: 0;
  margin-left: auto;
}
@media screen and (max-width: 840px) and (orientation: portrait) {
  #event .tenji {
    width: 100%;
  }
}
#event .tenji .border {
  border-color: #0ff;
}
#event .tenji h3 .line {
  background-color: #0ff;
}
#event .stage {
  width: calc(1440 / 1920 * 100vw);
  position: relative;
}
@media screen and (max-width: 840px) and (orientation: portrait) {
  #event .stage {
    width: 100%;
  }
}
@media screen and (min-width: 841px) {
  #event .stage {
    padding: calc(40 / 1920 * 100vw);
    margin: calc(50 / 1920 * 100vw) calc(100 / 1920 * 100vw) calc(50 / 1920 * 100vw) calc(0 / 1920 * 100vw);
  }
}
@media screen and (max-width: 840px) and (orientation: portrait) {
  #event .stage {
    padding: calc(40 / 720 * 100vw);
    margin: calc(0 / 720 * 100vw);
  }
}
@media screen and (max-width: 840px) and (orientation: portrait) {
  #event .stage {
    margin: calc(40 / 720 * 100vw) auto;
  }
}
#event .stage .border {
  border-color: rgb(255, 145, 0);
}
#event .stage h3 .line {
  background-color: rgb(255, 145, 0);
}
#event .large {
  text-align: center;
}
@media screen and (min-width: 841px) {
  #event .large {
    font-size: calc(60 / 1920 * 100vw);
    margin-top: calc(200 / 1920 * 100vw);
  }
}
@media screen and (max-width: 840px) and (orientation: portrait) {
  #event .large {
    font-size: calc(60 / 720 * 100vw);
    margin-top: calc(200 / 720 * 100vw);
  }
}
#event .large .suki {
  color: #ff9720;
  font-family: "Dela Gothic One", sans-serif;
}
@media screen and (min-width: 841px) {
  #event .large .suki {
    font-size: calc(100 / 1920 * 100vw);
  }
}
@media screen and (max-width: 840px) and (orientation: portrait) {
  #event .large .suki {
    font-size: calc(100 / 720 * 100vw);
  }
}
#event .large .synchro {
  color: #fbff06;
  font-family: "Dela Gothic One", sans-serif;
}
@media screen and (min-width: 841px) {
  #event .large .synchro {
    font-size: calc(140 / 1920 * 100vw);
  }
}
@media screen and (max-width: 840px) and (orientation: portrait) {
  #event .large .synchro {
    font-size: calc(140 / 720 * 100vw);
  }
}

#venue h2 .bg {
  display: inline-block;
  background-color: #000;
}
@media screen and (min-width: 841px) {
  #venue h2 .bg {
    padding: calc(2 / 1920 * 100vw) calc(10 / 1920 * 100vw);
  }
}
@media screen and (max-width: 840px) and (orientation: portrait) {
  #venue h2 .bg {
    padding: calc(2 / 720 * 100vw) calc(10 / 720 * 100vw);
  }
}
@media screen and (min-width: 841px) {
  #venue .website {
    margin-bottom: calc(100 / 1920 * 100vw);
  }
}
@media screen and (max-width: 840px) and (orientation: portrait) {
  #venue .website {
    margin-bottom: calc(100 / 720 * 100vw);
  }
}
#venue a {
  text-decoration: underline;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
#venue a:hover {
  opacity: 0.7;
}
#venue iframe {
  width: 100%;
}
@media screen and (min-width: 841px) {
  #venue iframe {
    margin-top: calc(5 / 1920 * 100vw);
  }
}
@media screen and (max-width: 840px) and (orientation: portrait) {
  #venue iframe {
    margin-top: calc(10 / 720 * 100vw);
  }
}

@media screen and (min-width: 841px) {
  footer {
    padding: calc(40 / 1920 * 100vw) calc(0 / 1920 * 100vw);
  }
}
@media screen and (max-width: 840px) and (orientation: portrait) {
  footer {
    padding: calc(60 / 720 * 100vw) calc(0 / 720 * 100vw);
  }
}
footer small {
  text-align: center;
  display: block;
  width: 100%;
}