@charset "euc-jp";
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@700&display=swap');

/*===============================
  PC 600px ~
===============================*/
@media screen and (min-width: 600px) {
  .pc_view {
    display: block;
  }

  .sp_view {
    display: none;
  }

  nav.ContentNavi01 {
    position: relative;
    z-index: 2;
  }
}

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

body {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  line-height: 1;
  background-color: #fff;
  text-align: left;
}

strong {
  font-weight: bold;
}

a:hover {
  opacity: 0.6;
  text-decoration: none !important;
}

a.disabled,
a.disabled:hover {
  opacity: 1;
  cursor: default;
  pointer-events: none;
}

footer {
  position: relative;
  z-index: 1;
}

#PageTop {
  background: #fff;
}

.kv_copy,
.kv_super,
.kv_logo,
.kv_people{
  display: none;
}

.kv h1 {
  position: relative;
  z-index: 1;
  max-width: 375px;
  margin: 0 auto;
}

.MainContent {
  position: relative;
  z-index: 2;
  width: 375px;
  margin: 0 auto;
  background-color: #fff;
}

.EventIntro {
  margin-bottom: 16px;
}

.EventDetail .DateTitle {
  font-size: 19px;
  font-weight: 600;
  color: #4A7360;
  text-align: center;
  margin-bottom: 11px;
}

.EventDetail .Date {
  font-size: 21px;
  font-weight: 600;
  color: #4A7360;
  text-align: center;
  margin-bottom: 46px;
}

.EventContent {
  margin: 0 23px 11px;
}

.CautionAreaText {
  font-size: 12px;
  color: #000;
  font-weight: 400;
  margin: 0 30px 40px;
  line-height: 1.3333333333333333;
}

.PresentArea {
  margin: 0 23px 50px;
}

.PresentTitle {
  font-size: 25px;
  color: #3F78B0;
  font-weight: 600;
  text-align: center;
  line-height: 1.08;
  margin-bottom: 15px;
}

.PriceTitle {
  font-size: 19px;
  font-weight: 600;
  color: #4A7360;
  text-align: center;
  margin-bottom: 10px;
}

.Price {
  font-size: 19px;
  font-weight: 600;
  color: #4A7360;
  text-align: center;
  margin-bottom: 14px;
}

.Price span {
  font-family: 'Manrope';
  font-weight: 700;
  font-size: 32px;
}

.PriceNotice {
  margin: 0 17px 40px 32px;
}

.PriceNotice li {
  position: relative;
  font-size: 13px;
  color: #000;
  font-weight: 400;
  line-height: 1.4615384615384615;
  padding-left: 1em;
}

.PriceNotice li::before {
  content: '\203B';
  position: absolute;
  left: 0;
}

.ApplyArea {
  padding: 0 0 35px;
  margin-bottom: 40px;
  background-color: #EDF3F3;
}

.ApplyTitle {
  width: 100%;
}

.ApplyArea p {
  margin: 15px 0 14px;
  font-size: 15px;
  color: #4A7360;
  font-weight: 600;
  line-height: 1.7333333333333334;
  text-align: center;
}

.ApplyArea .apply-button {
  display: block;
  width: 306px;
  margin: 0 auto;
}

.MovieArea {
  padding-bottom: 94px;
}

.MovieTitle {
  display: block;
  width: 161px;
  margin: 0 auto 9px;
}

.MovieThumb {
  width: 327px;
  margin: 0 auto;
  cursor: pointer;
}

/* Æ°²è */
.MovieModal {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 10000;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  overflow: hidden;
  overscroll-behavior: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.MovieModal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.MovieModalOverlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
}

.MovieModalContent {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  width: 100%;
  max-width: 960px;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.MovieModal.is-open .MovieModalContent {
  opacity: 1;
  transform: translateY(0);
}

.MovieModalClose {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 36px;
  line-height: 40px;
  cursor: pointer;
}

.MovieModalFrame {
  position: relative;
  width: 100%;
  max-height: calc(100vh - 84px);
  max-height: calc(100dvh - 84px);
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}

.MovieModalFrame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

html.is-movie-modal-open,
body.is-movie-modal-open {
  overflow: hidden;
}

@media screen and (min-width: 1200px) {
  .MainColumn {
    position: relative;
  }

  .kv_logo_wrap,
  .kv_super_wrap {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
  }

  .kv {
    position: relative;
    z-index: 1;
    width: 100vw;
    margin-top: -87px;
    padding-top: 87px;
  }

  .kv::before {
    content: '';
    position: fixed;
    top: -87px;
    left: 0;
    width: 100%;
    height: calc(100vh + 87px);
    background-image: url(../img/kv_bg.jpg);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    z-index: 0;
    pointer-events: none;
  }

  .kv h1 {
    width: 52.910052910052904vw;
    max-width: none;
    aspect-ratio: 800 / 783;
  }

  .kv picture {
    display: block;
    width: 100%;
    height: 100%;
  }

  .kv picture img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .kv_logo {
    display: block;
    position: absolute;
    top: 9.25925925925926vw;
    right: 4.761904761904762vw;
    width: 14.550264550264549vw;
    object-fit: contain;
  }

  .kv_super {
    display: block;
    position: absolute;
    top: 30.82010582010582vw;
    left: 16.865079365079367vw;
    width: 12.83068783068783vw;
    object-fit: contain;
  }

  .kv_copy {
    display: block;
    position: fixed;
    bottom: 1.5873015873015872vw;
    left: 3.6375661375661372vw;
    width: 15.740740740740741vw;
    object-fit: contain;
  }

  .kv_people {
    display: block;
    position: fixed;
    bottom: 0;
    right: 8.663492063492063vw;
    width: 22.42063492063492vw;
    object-fit: contain;
  }
  .MainContent {
    width: max(24.801587301587304vw, 375px);
    padding-top: 107px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 127px);
    container-type: inline-size;
  }

  .EventIntro {
    margin-bottom: 16px;
    margin-bottom: 4.2667cqw;
  }

  .EventDetail .DateTitle {
    font-size: 19px;
    font-size: 5.0667cqw;
    margin-bottom: 11px;
    margin-bottom: 2.9333cqw;
  }

  .EventDetail .Date {
    font-size: 21px;
    font-size: 5.6cqw;
    margin-bottom: 46px;
    margin-bottom: 12.2667cqw;
  }

  .EventContent {
    margin: 0 23px 11px;
    margin: 0 6.1333cqw 2.9333cqw;
  }

  .CautionAreaText {
    font-size: 12px;
    font-size: 3.2cqw;
    margin: 0 30px 40px;
    margin: 0 8cqw 10.6667cqw;
  }

  .PresentArea {
    margin: 0 23px 50px;
    margin: 0 6.1333cqw 13.3333cqw;
  }

  .PresentTitle {
    font-size: 25px;
    font-size: 6.6667cqw;
    margin-bottom: 15px;
    margin-bottom: 4cqw;
  }

  .PriceTitle {
    font-size: 19px;
    font-size: 5.0667cqw;
    margin-bottom: 10px;
    margin-bottom: 2.6667cqw;
  }

  .Price {
    font-size: 19px;
    font-size: 5.0667cqw;
    margin-bottom: 14px;
    margin-bottom: 3.7333cqw;
  }

  .Price span {
    font-size: 32px;
    font-size: 8.5333cqw;
  }

  .PriceNotice {
    margin: 0 17px 40px 32px;
    margin: 0 4.5333cqw 10.6667cqw 8.5333cqw;
  }

  .PriceNotice li {
    font-size: 13px;
    font-size: 3.4667cqw;
  }

  .ApplyArea {
    padding: 0 0 35px;
    padding: 0 0 9.3333cqw;
    margin-bottom: 40px;
    margin-bottom: 10.6667cqw;
  }

  .ApplyArea p {
    margin: 15px 0 14px;
    margin: 4cqw 0 3.7333cqw;
    font-size: 15px;
    font-size: 4cqw;
  }

  .ApplyArea .apply-button {
    width: 306px;
    width: 81.6cqw;
  }

  .MovieArea {
    padding-bottom: 94px;
    padding-bottom: 25.0667cqw;
  }

  .MovieTitle {
    width: 161px;
    width: 42.9333cqw;
    margin: 0 auto 9px;
    margin: 0 auto 2.4cqw;
  }

  .MovieThumb {
    width: 327px;
    width: 87.2cqw;
  }
}

@media screen and (min-width: 600px) and (max-width: 1199px) {
  .kv {
    position: relative;
    z-index: 1;
    width: 100vw;
    margin-top: -87px;
    padding-top: 87px;
  }

  .kv::before {
    content: '';
    position: fixed;
    top: -87px;
    left: 0;
    width: 100%;
    height: calc(100vh + 87px);
    background-image: url(../img/kv_bg.jpg);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    z-index: 0;
    pointer-events: none;
  }
}