@charset "utf-8";
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Reset
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
img,
picture,
video,
canvas {
  max-width: 100%;
  display: block;
}
.ticketBtn {
  display: none;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Common
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root {
  --PcScale: 1440;
  --SpScale: 750;

  --CommonColorBlue: rgba(0, 145, 183, 1);
  --CommonColorBgBlue: rgba(26, 156, 190, 1);
  --CommonColorLightBlue: rgba(178, 221, 204, 1);
  --CommonColorOrnage: rgba(240, 131, 0, 1);
  --CommonColorYellow: rgba(255, 254, 213, 1);
  --CommonColorWhite: rgba(255, 255, 255, 1);
  --CommonColorBlack: rgba(0, 0, 0, 1);

  --BaseFont: 'Zen Maru Gothic', sans-serif;
  --FontSizeMv: 1.388vw;
  --FontSizeMvSp: 4.26vw;
  --FontSize28: min(28px, 3.73vw);
  --FontSize32: min(32px, 4.266vw);
  --FontSize38: min(38px, 5.06vw);
  --FontSize42: min(42px, 5.6vw);

  --BaseFontRegular: 400; /* Regular */
  --BaseFontMedium: 500; /* Medium */
  --BaseFontBold: 600; /* SemiBold */
  --BaseFontBold: 700; /* Bold */
  --BaseFontBlack: 900; /* Black */

  --LineHeight100: 100%;
  --LineHeight120: 120%;
  --LineHeight150: 150%;
  --LineHeight170: 170%;
  --LineHeight200: 200%;
}

/* ================================
        Layout
================================ */
.Content {
  overflow: hidden;
  line-height: 1.6;
  font-family: var(--BaseFont);
  font-weight: var(--BaseFontMedium);
}

.Center {
  max-width: 750px;
  width: 100%;
  margin-inline: auto;
  position: relative;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  Section
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ================================
        Mv
================================ */
.Mv {
  background-image: url(../img/vendor/mv-bg.png);
  background-color: var(--CommonColorYellow);
  aspect-ratio: 2880 / 1536;
  width: 100%;
  height: auto;
  background-position: top center;
  background-size: 100%;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  margin-top: 80px;
}

.s .Mv {
  background-image: url(../img/vendor/mv-bg-sp.png);
  aspect-ratio: 750 / 1668;
  margin-top: 0;
}

.Mv h1 {
  width: 84.79vw;
  padding-top: 2.638vw;
}

.s .Mv h1 {
  width: 88vw;
}

.MvInner {
  width: 83.33vw;
  position: relative;
}

.s .MvInner {
  width: 100vw;
}

.MvText {
  position: absolute;
  right: -2vw;
  top: 0.476vw;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
}

.s .MvText {
  right: auto;
  top: auto;
  bottom: -128vw;
  justify-content: flex-end;
}

.Mv h2 {
  width: 28.22vw;
}

.s .Mv h2 {
  width: 76.93vw;
}

.MvText p {
  font-style: italic;
  font-size: var(--FontSizeMv);
  font-weight: var(--BaseFontMedium);
  color: var(--CommonColorBlue);
  margin-top: 0.694vw;
}

.s .MvText p {
  font-size: var(--FontSizeMvSp);
  margin-top: 3.73vw;
  padding-left: 6.66vw;
}

.MvText p span {
  color: var(--CommonColorOrnage);
}

/* ================================
        Point
================================ */
.Point {
  padding: min(160px, 15.2vw) 0 min(212px, 14.13vw);
  margin-top: max(-89px, -11.86vw);
  background-color: var(--CommonColorBgBlue);
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent min(4px, 0.53vw),
    var(--CommonColorBlue) min(4px, 0.53vw),
    var(--CommonColorBlue) min(11px, 1.46vw)
  );

  -webkit-mask-image:
    url(../img/vendor/parts-wave-top.png),
    linear-gradient(var(--CommonColorBlack), var(--CommonColorBlack));
  mask-image:
    url(../img/vendor/parts-wave-top.png),
    linear-gradient(var(--CommonColorBlack), var(--CommonColorBlack));

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-position:
    center top,
    left calc(27 / 750 * 100vw - 1px);
  mask-position:
    center top,
    left calc(27 / 750 * 100vw - 1px);

  -webkit-mask-size:
    100% calc(27 / 750 * 100vw),
    100% 100%;
  mask-size:
    100% calc(27 / 750 * 100vw),
    100% 100%;
}

.Point {
  margin-top: clamp(-52px, calc(-3.7258vw + 1.6513px), -27px);
}

@media (min-width: 1440px) {
  .Point {
    margin-top: clamp(-89px, calc(-3.3036vw - 4.4286px), -52px);
  }
}

.s .Point {
  margin-top: -4vw;
}

.PointDeco li {
  position: absolute;
}

.PointDeco li:nth-of-type(1) {
  width: min(279px, 37.2vw);
  top: 0;
  right: max(-134px, -17.86vw);
}
.PointDeco li:nth-of-type(2) {
  width: min(229px, 30.53vw);
  top: min(747px, 99.6vw);
  left: max(-82px, -10.93vw);
}

.PointDeco li:nth-of-type(3) {
  width: min(229px, 30.53vw);
  top: min(1153px, 153.7vw);
  right: max(-83px, -11.06vw);
}

.Point h2 {
  width: 56.8%;
  margin-inline: auto;
  padding-bottom: min(60px, 8vw);
  transform: translate(-12%);
}

.Point h3 {
  font-size: var(--FontSize32);
  color: var(--CommonColorWhite);
  padding-left: min(30px, 4vw);
  padding-bottom: min(10px, 1.33vw);
}

.PointText {
  width: 97.333%;
  margin-left: max(-42px, -5.6vw);
}

.PointPerson li:nth-of-type(1) {
  width: 89.6%;
  padding-top: min(48px, 6.4vw);
  transform: translateX(5.33%);
}

.PointPerson li:nth-of-type(2) {
  width: 88.2%;
  margin-top: -60%;
  transform: translateX(8.33%);
  z-index: 2;
  position: relative;
}

.PointPerson li:nth-of-type(3) {
  width: 80.73%;
  margin-top: -51%;
  transform: translateX(10.33%);
  z-index: 3;
  position: relative;
}

/* ================================
        Movie
================================ */
.Movie {
  margin-top: clamp(-404px, calc(-16.3934vw - 167.9005px), -294px);
  position: relative;
  padding-bottom: min(103px, 13.73vw);
  background: var(--CommonColorYellow);
}

@media (min-width: 1440px) {
  .Movie {
    margin-top: clamp(-404px, calc(1.7857vw - 429.7143px), -384px);
  }
}

.s .Movie {
  margin-top: -38vw;
}

.Movie::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 0;
  aspect-ratio: 1500 /114;
  width: 100%;
  height: auto;
  background: url(../img/vendor/movie-wave-top.png) no-repeat bottom -1% center;
  background-size: 100% 100%;
}

.Movie::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: min(3px, 0.4vw);
  aspect-ratio: 1500 / 6;
  background: url(../img/vendor/section-line-bg.png) repeat-x center;
  background-size: contain;
}

.Movie h2 {
  width: 91.33%;
  margin-inline: auto;
  padding-top: min(56px, 7.46vw);
}

.Movie h3 {
  font-size: var(--FontSize32);
  font-weight: var(--BaseFontBold);
  color: var(--CommonColorBlue);
  padding-bottom: min(48px, 6.4vw);
  margin-top: max(-20px, -2.66vw);
  text-align: center;
}

.MovieSliderWrap {
  position: relative;
  max-width: 750px;
  margin-inline: auto;
}

.MovieSlider {
  overflow: visible;
  position: relative;
}

.MovieSlide {
  position: relative;
  z-index: 0;
  width: min(630px, 84vw);
  height: auto;
}

.MovieSlide::after {
  content: '';
  position: absolute;
  top: 93%;
  left: 50%;
  transform: translateX(-50%);
  width: min(120px, 16vw);
  height: min(60px, 8vw);
  background: url(../img/vendor/movie-bottom.png) no-repeat center;
  background-size: contain;
}

.MovieSlideName {
  position: absolute;
  aspect-ratio: 404 / 177;
  width: min(202px, 26.93vw);
  height: auto;
  background: url(../img/vendor/movie-name.png) no-repeat center;
  background-size: contain;
  top: 0;
  left: min(20px, 2.666vw);
  z-index: 10;
  display: flex;
  justify-content: center;
  text-align: center;
  font-size: var(--FontSize42);
  color: var(--CommonColorBlue);
  font-weight: var(--BaseFontBold);
}

.s .MovieSlideName {
  left: -2.666vw;
}

.MovieSlideName span {
  transform: translateX(max(-10px, -1.33vw));
}

.MovieSlideFrame {
  position: relative;
  background: var(--CommonColorBlue);
  border-radius: 30px;
  overflow: hidden;
  border: min(10px, 1.33vw) solid var(--CommonColorBlue);
  z-index: 10;
}

.MovieSlidePlayer {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  cursor: pointer;
  z-index: 3;
  border-radius: 20px;
}

.MovieSlidePlayer iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 101%;
  height: 101%;
  border: none;
  z-index: 0;
  border-radius: 20px;
}

.MovieSlideThumbnail {
  width: 101%;
  height: 101%;
  object-fit: cover;
  position: relative;
  z-index: 1;
}

.MovieSlidePlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  z-index: 2;
}

.MovieSliderControls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: min(80px, 9.66vw);
  margin-top: min(90px, 12vw);
}

.MovieSliderPrev,
.MovieSliderNext {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  width: min(17px, 2.26vw);
  flex-shrink: 0;
}

.MovieSliderPrev img,
.MovieSliderNext img {
  width: 100%;
  display: block;
}

.MovieSliderPrev.swiper-button-disabled,
.MovieSliderNext.swiper-button-disabled {
  /* opacity: 0.3; */
  cursor: default;
  pointer-events: none;
}

.MovieSliderPagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: min(16px, 2.13vw);
  width: auto !important;
}

.s .MovieSliderPagination {
  gap: 1.06vw;
}

.MovieSliderPagination .swiper-pagination-bullet {
  width: min(20px, 2.66vw);
  height: min(20px, 2.66vw);
  background-color: var(--CommonColorLightBlue);
  opacity: 1;
  margin: 0;
  transition: all 0.3s;
}

.MovieSliderPagination .swiper-pagination-bullet-active {
  width: min(20px, 2.66vw);
  height: min(20px, 2.66vw);
  background-color: var(--CommonColorBlue);
}

/* ================================
        Drink Menu
================================ */
.Drink {
  background: var(--CommonColorYellow);
  padding: min(120px, 16vw) 0 min(200px, 26.66vw);
  color: var(--CommonColorBlue);
}

.Drink h2 {
  width: 85.2%;
  margin-inline: auto;
  padding-bottom: min(80px, 10.66vw);
}

.Drink h3 {
  /* width: 92%; */
  margin-inline: auto;
  padding-bottom: min(40px, 5.333vw);
}

.DrinkItem {
  padding: 0 min(30px, 4vw) min(80px, 10.66vw);
}

.DrinkItem ul {
  font-size: var(--FontSize38);
  line-height: var(--LineHeight170);
}

.DrinkItem ul li {
  position: relative;
  padding-left: min(43px, 5.73vw);
}

.DrinkItem ul li::before {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: min(24px, 3.2vw);
  height: min(24px, 3.2vw);
}

.DrinkLine {
  padding: min(52px, 6.93vw) 0;
}

.DrinkMenu {
  position: relative;
}

.Drink h4 {
  position: absolute;
  left: 0;
  top: 0;
  font-size: var(--FontSize38);
  line-height: var(--LineHeight120);
  font-weight: var(--BaseFontBold);
}

.Drink h4 ._large {
  font-size: var(--FontSize42);
}

.Drink h4 ._small {
  font-size: var(--FontSize32);
  font-weight: var(--BaseFontMedium);
}

.Drink h4 ._img {
  display: block;
  width: min(315px, 42vw);
  padding-bottom: min(10px, 1.33vw);
}

.DringImg {
  position: relative;
  z-index: 2;
}

.DringImg img {
  position: relative;
  z-index: 1;
}

/* --------------
	Beer
-----------------*/
.DrinkItem._beer ul li::before {
  background: url(../img/vendor/icon-dot-b.png) no-repeat center;
  background-size: contain;
}

.DrinkItem._beer .DringImg {
  width: min(733px, 97.73vw);
  margin-inline: auto;
}

/* --------------
	Sour
-----------------*/
.DrinkItem._sour ul li::before {
  background: url(../img/vendor/icon-dot-g.png) no-repeat center;
  background-size: contain;
}

.DrinkItem._sour .DringImg {
  width: min(719px, 95.86vw);
  margin-inline: auto;
  display: flex;
  justify-content: center;
}

.DrinkItem._sour .DringImg::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -21%);
  aspect-ratio: 1752 / 760;
  width: min(876px, 116.8vw);
  background: url(../img/vendor/drink-wave-g.png) no-repeat center;
  background-size: 100%;
  z-index: 0;
}

/* --------------
	HighBall
-----------------*/
.DrinkItem._hb ul li::before {
  background: url(../img/vendor/icon-dot-o.png) no-repeat center;
  background-size: contain;
}

.DrinkItem._hb .DringImg {
  width: min(684px, 91.2vw);
  margin-inline: auto;
  display: flex;
  justify-content: center;
  padding-top: min(60px, 8vw);
}

.DrinkItem._hb .DringImg::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -21%);
  aspect-ratio: 1752 / 760;
  width: min(876px, 116.8vw);
  background: url(../img/vendor/drink-wave-o.png) no-repeat center;
  background-size: 100%;
  z-index: 0;
}

/* --------------
	SoftDrink
-----------------*/
.DrinkItem._soft {
  padding-bottom: 0;
}

.DrinkItem._soft ul li::before {
  background: url(../img/vendor/icon-dot-p.png) no-repeat center;
  background-size: contain;
}

.DrinkItem._soft .DringImg {
  width: min(604px, 80.53vw);
  margin-inline: auto;
  display: flex;
  justify-content: center;
  margin-top: max(-80px, -10.66vw);
}

.DrinkItem._soft .DringImg::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -8%);
  aspect-ratio: 1752 / 760;
  width: min(876px, 116.8vw);
  background: url(../img/vendor/drink-wave-p.png) no-repeat center;
  background-size: 100%;
  z-index: 0;
}

/* ================================
        Schedule
================================ */
.Schedule {
  padding: min(130px, 8.66vw) 0 min(89px, 11.86vw);
  margin-top: max(-89px, -11.86vw);
  background-color: var(--CommonColorBgBlue);
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent min(4px, 0.53vw),
    var(--CommonColorBlue) min(4px, 0.53vw),
    var(--CommonColorBlue) min(11px, 1.46vw)
  );

  -webkit-mask-image:
    url(../img/vendor/parts-wave-top.png),
    linear-gradient(var(--CommonColorBlack), var(--CommonColorBlack));
  mask-image:
    url(../img/vendor/parts-wave-top.png),
    linear-gradient(var(--CommonColorBlack), var(--CommonColorBlack));

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-position:
    center top,
    left calc(27 / 750 * 100vw - 1px);

  mask-position:
    center top,
    left calc(27 / 750 * 100vw - 1px);

  -webkit-mask-size:
    100% calc(27 / 750 * 100vw),
    100% 100%;
  mask-size:
    100% calc(27 / 750 * 100vw),
    100% 100%;
}

.Schedule h2 {
  width: 93.86%;
  margin-inline: auto;
  padding-bottom: min(50px, 6.666vw);
}

.ScheduleCard {
  background-image: url(../img/vendor/schedule-card.png);
  background-position: center;
  background-size: 100%;
  aspect-ratio: 1391/1005;
  width: 92%;
  margin-inline: auto;
  background-repeat: no-repeat;
  position: relative;
  color: var(--CommonColorBlue);
}

.Schedule h3 {
  text-align: center;
  font-size: var(--FontSize32);
  transform: translateY(88%);
  display: block;
}

.Schedule h3 span {
  position: relative;
}

.Schedule h3 span::before {
  display: inline-block;
  content: '';
  width: min(15px, 2vw);
  height: min(24px, 3.2vw);
  background: url(../img/vendor/icon-slash-l.png) no-repeat center;
  background-size: contain;
  margin-right: min(15px, 2vw);
  transform: translateY(5%);
}

.Schedule h3 span::after {
  display: inline-block;
  content: '';
  width: min(15px, 2vw);
  height: min(24px, 3.2vw);
  background: url(../img/vendor/icon-slash-r.png) no-repeat center;
  background-size: contain;
  margin-left: min(15px, 2vw);
  transform: translateY(5%);
}

.ScheduleText {
  text-align: center;
  transform: translateY(26%);
  font-size: var(--FontSize32);
}

.ScheduleText div span {
  font-size: var(--FontSize28);
}

.Schedule h4 {
  font-size: var(--FontSize42);
  font-weight: bold;
}

.Schedule h4.ScheduleDay span {
  position: relative;
  display: inline-block;
  padding-left: min(70px, 9.33vw);
  margin-bottom: min(10px, 1.33vw);
}

.Schedule h4.ScheduleDay span::before {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: min(56px, 7.46vw);
  height: min(56px, 7.46vw);
  background: url(../img/vendor/icon-sun.png) no-repeat center;
  background-size: contain;
}

.Schedule h4.ScheduleNight span {
  position: relative;
  padding-left: min(62px, 8.266vw);
  margin-bottom: min(10px, 1.33vw);
}

.Schedule h4.ScheduleNight span::before {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: min(48px, 6.4vw);
  height: min(48px, 6.4vw);
  background: url(../img/vendor/icon-moon.png) no-repeat center;
  background-size: contain;
}

.ScheduleLine {
  width: min(525px, 70vw);
  margin-inline: auto;
  padding: min(30px, 4vw) 0;
}

.SchedulePerson li {
  position: absolute;
}

.SchedulePerson li:nth-of-type(1) {
  width: min(325px, 43.33vw);
  left: max(-100px, -13.33vw);
  bottom: max(-89px, -11.86vw);
}

.SchedulePerson li:nth-of-type(2) {
  width: min(254px, 33.86vw);
  right: max(-75px, -10vw);
  bottom: max(-89px, -11.86vw);
}

/* ================================
        Notes
================================ */
.Notes {
  background: var(--CommonColorYellow);
  padding: min(80px, 10.66vw) 0 min(100px, 13.33vw);
}

.NotesBox {
  margin-inline: min(30px, 4vw);
  background: var(--CommonColorWhite);
  color: var(--CommonColorBlack);
  padding: min(40px, 5.33vw) min(40px, 4.8vw);
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: min(16px, 3.2vw);
  line-height: var(--LineHeight170);
}

@media (min-width: 768px) {
  .NotesBox {
    margin-inline: clamp(-20px, calc((750px - 100vw) / 2 + 20px), 0px);
    padding: 50px 36px;
    font-size: 15px;
  }
}

.NotesTtl {
  font-weight: 700;
  margin-bottom: min(8px, 1.06vw);
}

.NotesList li {
  position: relative;
  text-align: left;
  padding-left: 1em;
}

.NotesList li::before {
  content: '・';
  position: absolute;
  top: 0;
  left: 0;
}