@charset "utf-8";

/* main box */

.main-box {
  padding: 0;
  margin-top: -50vh;
}

/* back star */

.header-container {
  background-color: #345083;
}

.header-box01 {
  background-image: url(../img/back.jpg);
  background-repeat: repeat;
  background-attachment: fixed;
  background-size: cover;
  width: 100%;
  margin-top: 0;
  height: 123vh;
  clip-path: circle(50% at 50% 0);
  z-index: -8;
}

@media screen and (min-width: 701px) {
  .header-box01 {
    margin: -10vh 0 0 0;
    width: 100%;
    height: 120vh;
    clip-path: circle(64.1% at 51% 0);
  }
}

@media screen and (min-width: 1025px) {
  .header-box01 {
    margin-top: 0;
    clip-path: circle(60% at 50% 0);
    height: 150vh;
  }
}

/* title */
.title-box {
  display: flex;
  flex-direction: column;
  width: 80%;
  padding: 20vh 0;
  margin: 0 auto;
  text-align: center;
}

.title-box h2 {
  margin-top: 10vh;
  font-size: 2em;
}

.title-box p {
  text-align: center;
  letter-spacing: 0.7em;
}

.schedule-box-container {
  margin: -50vh 0;
}

.schedule-box-container h3 {
  position: relative;
  z-index: 9;
  width: fit-content;
  font-size: 1.5em;
  margin: 0 auto 2em;
}

@media screen and (min-width: 702px) {
  .title-box {
    padding: 30vh 0;
  }

  .schedule-box-container {
    margin: -40vh 0 0;
  }
}

@media screen and (min-width: 1025px) {
  /* title */

  .title-box h2 {
    font-size: 2.5em;
  }

  .title-box p {
    letter-spacing: 1.5em;
  }

  .schedule-box-container {
    margin: -60vh 0 0;
  }
}

/* swiper */

.swiper {
  /*スライダーの幅と高さを調整*/
  width: 90%;
  height: 150px;
  margin: 0.5rem auto 2rem;
}

.swiper-slide {
  /*スライド要素の幅と高さを調整*/
  width: 100%;
  height: 100%;
  text-align: center;
  /*テキストの位置調整*/
  display: flex;
  justify-content: center;
  align-items: center;

  /*テキストの色と太さを指定*/
  color: #fff;
  font-weight: bold;
}

.swiper-slide p {
  font-size: 0.9em;
}

strong {
  font-weight: bold;
  font-size: 1.5em;
}

/*各スライドの背景色の設定*/
.slide1 {
  color: #345083;
  background-color: #d6efee;
}

.slide2 {
  color: #345083;
  background-color: #d6efee;
}

.slide3 {
  color: #345083;
  background-color: #d6efee;
}
.slide4 {
  color: #345083;
  background-color: #d6efee;
}

.slide5 {
  color: #345083;
  background-color: #d6efee;
}

.slide6 {
  color: #345083;
  background-color: #d6efee;
}

.slide-cap {
  color: #fff;
  background-color: deeppink;
  width: 90%;
  margin: 0.2em auto 0;
  border-radius: 3px;
}

.slide-schedule {
  margin-top: 0.5em;
  font-size: 0.8em;
}

.slide-cap p {
  font-size: 8px;
}



@media screen and (min-width: 702px) {
  .swiper {
    /*スライダーの幅と高さを調整*/
    width: 80%;
    height: 250px;
  }

  .swiper-slide p {
    font-size: 1em;
  }

  strong {
    font-size: 2em;
  }

  .slide-cap {
    margin: 0.5em auto 0;
    width: 80%;
    border-radius: 3px;
  }

  .slide-schedule {
    margin-top: 1em;
    font-size: 1em;
  }

  .slide-cap p {
    font-size: 12px;
  }
}

@media screen and (min-width: 702px) {
  .swiper {
    /*スライダーの幅と高さを調整*/
    width: 90%;
    height: 250px;
  }


}


@media screen and (min-width: 1025px) {
  .swiper {
    /*スライダーの幅と高さを調整*/
    width: 80%;
    height: 250px;
  }

  .swiper-slide p {
    font-size: 1em;
  }

  strong {
    font-size: 2em;
  }

  .slide-cap {
    margin: 0.5em auto 0;
    width: 80%;
    border-radius: 3px;
  }

  .slide-schedule {
    margin-top: 1em;
    font-size: 1em;
  }

  .slide-cap p {
    font-size: 12px;
  }
}

@media screen and (min-width: 702px) {
  .swiper {
    /*スライダーの幅と高さを調整*/
    width: 90%;
    height: 250px;
  }
}

/* 鑑賞方法 */
.schedule-view {
  padding: 20vh 0 0 0;
}

.schedule-view-tx {
  position: relative;
  color: #ffffff;
  bottom: -30vh;
  left: 20px;
  text-decoration: none;
  display: block;
  margin: 0 auto;
  width: 80%;
  padding: 16px 20px;
  transform: rotate(0deg);
}

.arrow5 {
  width: 48px;
  height: 1px;
  background: #ffffff;
  position: absolute;
  top: 80%;
  right: 62px;
}

.arrow6 {
  width: 1px;
  height: 12px;
  background: #ffffff;
  position: absolute;
  top: calc(90% + 3px);
  right: 70px;
  transform: rotate(-130deg);
  transform-origin: top left;
}

@media screen and (min-width: 702px) {
  .schedule-view {
    height: 0vh;
    margin: -20vh 0 0;
    padding: 2em;
  }

  .schedule-view-tx {
    left: 15%;
    width: 65%;
  }

  .arrow5 {
    right: calc(40% + 62px);
  }

  .arrow6 {
    right: calc(40% + 70px);
  }
}

@media screen and (min-width: 1025px) {
  .schedule-view-tx {
    left: 15%;
    width: 50%;
  }

  .arrow5 {
    right: calc(50% + 62px);
  }

  .arrow6 {
    right: calc(50% + 70px);
  }
}

/* footer */

.footer-back {
  height: 60vh;
  background: url(../img/wave-haikei.svg);
  background-size: cover;
}

.footer-box01 {
  /* margin: 100vh 0 0 0; */
  width: 100%;
}

@media screen and (min-width: 702px) {

  .footer-back {
    height: 60vh;
    background: url(../img/wave-haikei.svg);
    background-size: cover;
  }

  .footer-box01 {
    margin-bottom: -20vh;
    padding-top: 10vh;
  }
}

@media screen and (min-width: 1025px) {
  .footer-back {
    height: 80vh;
    background: url(../img/wave-haikei.svg);
    background-size: cover;
  }

  .footer-box01 {
    height: 15vh;
    margin-bottom: 0vh;
    padding-top: 10vh;
  }
}