@charset "UTF-8";
/*-------------------------
  KV
-------------------------*/
.kv {
  position: relative; /* positionをrelativeに変更。 */
  width: 100vw;
  height: 100vh;
}
.kv__img {
  position: fixed; /* fixedに変更する。それ以外は同じ。 */
  /*top: 0;*/
  left: 0;
  display: block;
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-position: top;
  background-image: url(../img/im-kv-sp.jpg?20251029);
  z-index: var(--z-index-kv-img);
}
@media (min-width: 768px) {
  .kv__img {
    background-image: url(../img/im-kv-pc.jpg?20251029);
  }
}
/*-------------------------
  APP
-------------------------*/
.app {
  background: url(../img/bg-app-sp.jpg) center / cover no-repeat;
}
.app__box {
  max-width: var(--content-width);
  margin: 8vw auto 0;
  padding: 9vw 7vw;
  color: var(--white);
  background-color: rgba(0, 0, 0, 0.4);
}
.app__menu {
  margin: 4vw auto;
  display: flex;
  justify-content: space-between;
}
.app-stores {
  display: grid;
  margin: auto;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 0 3vw;
}
.app-stores__item--qr {
  display: none;
  max-width: 16vw;
  margin: 2.4vw auto 0;
  grid-area: 2 / 1 / 3 / 3;
}
@media (min-width: 768px) {
  .app {
    background-image: url(../img/bg-app-pc.jpg);
  }
  .app__box {
    margin-top: 50px;
    padding: min(6vw, 60px);
  }
  .app__menu {
    width: 470px;
    margin: 32px auto 20px;
  }
  .app-stores {
    align-items: center;
  }
  .app__menu li {
    width: 80px;
  }
  .app-stores {
    max-width: 540px;
    grid-template-columns: 1fr 1fr 80px;
    align-items: center;
    grid-template-rows: 1fr;
    gap: 26px;
  }
  .app-stores__item--qr {
    display: block;
    margin: 0;
    grid-area: none;
    grid-area: 1 / 3 / 2 / 4;
  }
}
/*-------------------------
  PROFILE
-------------------------*/
.profile__img {
  width: calc(195 / 375 * 100vw);
  margin: 8vw auto 10vw;
}
.profile__link {
  width: calc(204 / 375 * 100vw);
  height: 13vw;
  margin: 10vw auto 0;
}
.profile__box {
  width: var(--content-width);
  margin: 8vw auto 18vw;
}
@media (min-width: 768px) {
  .profile__box {
    margin: 50px auto 80px;
    display: flex;
    align-items: center;
    gap: 60px;
  }
  .profile__img {
    width: 328px;
    margin: 0;
  }
  .profile__info {
    width: 610px;
  }
  .profile__link {
    width: 275px;
    height: 70px;
    margin: 32px 0 0;
  }
}
/*-------------------------
  NEWS
-------------------------*/
.news-article {
  margin-top: 8vw;
}
.news-article__item {
  padding: 5vw 0 3vw;
}
.news-article__item:nth-child(odd) {
  border-top: 1px solid var(--gray);
  border-bottom: 1px solid var(--gray);
}
.news-article__link p {
  font-size: min(calc(14 / 375 * 100vw), 14px);
  font-weight: normal;
  letter-spacing: 0.09em;
  line-height: 1.8;
  color: var(--white);
}
.news-article__time,
.news-article__cat {
  font-family: "Josefin Sans";
  font-weight: 600;
  font-size: min(calc(13 / 375 * 100vw), 13px);
}
.news-article__time {
  color: var(--gray);
  line-height: 1;
}
.news-article__cat {
  color: var(--gold);
}
.news__link {
  width: min(calc(140 / 375 * 100vw), 140px);
  margin: 11vw auto 0;
}
@media (min-width: 768px) {
  .news-article {
    margin-top: 50px;
  }
  .news-article__item {
    padding: 20px 0 26px;
  }
  .news-article__time,
  .news-article__cat {
    font-size: min(calc(11 / 375 * 100vw), 11px);
  }
  .news__link {
    width: 160px;
    margin-top: 60px;
  }
}
/*-------------------------
  SCHEDULE
-------------------------*/
.schedule {
  background: url(../img/bg-schedule.jpg) center / cover no-repeat;
}
.schedule .swiper {
  margin-top: 7vw;
}
.schedule-item {
  padding: 5vw 4vw 3vw;
  background-color: var(--black);
}
.schedule-item__head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2vw;
  padding-bottom: 2vw;
  font-family: "Josefin Sans";
  font-weight: 600;
  font-size: min(calc(13 / 375 * 100vw), 13px);
  letter-spacing: 0.09em;
  border-bottom: solid 1px var(--white);
}
.schedule-item__time {
  color: var(--gray);
}
.schedule-item__cat {
  color: var(--gold);
}
.schedule-item__desc {
  font-weight: normal;
  font-size: min(calc(14 / 375 * 100vw), 14px);
  letter-spacing: 0.09em;
  line-height: 1.85;
  color: var(--white);
}
.schedule__link {
  width: min(calc(140 / 375 * 100vw), 140px);
  margin: 10vw auto 0;
}
@media (min-width: 768px) {
  .schedule .swiper {
    width: var(--content-width);
    margin: 50px auto;
  }
  .schedule .swiper-wrapper {
    display: flex;
    justify-content: space-between;
  }
  .schedule .swiper-slide {
    width: 32%;
  }
  .schedule-item {
    padding: 22px 18px;
  }
  .schedule-item__head {
    margin-bottom: 12px;
    padding-bottom: 12px;
  }
  .schedule__link {
    width: 160px;
    margin-top: 60px;
  }
}