@charset "UTF-8";

/* =============================================
  TOP page — Key visual + News（パララックス連動）
============================================= */
.mv-news-parallax {
  position: relative;
  --kv-ratio: calc(2925 / 2000);
}

@media (min-width: 992px) {
  .mv-news-parallax {
    --kv-ratio: calc(1500 / 2000);
  }
}

.section-mv {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  z-index: 1;
}

.mv-news-parallax__gap {
  display: block;
  height: max(0px, calc(var(--kv-ratio) * 100vw - 100vh + 10vh + 8vh));
}

.section-mv__visual {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: calc(1 / var(--kv-ratio));
  overflow: hidden;
}

.section-mv__visual-img.lazy {
  opacity: 0;
  transform: scale(.98);
}

.section-mv__visual-img.lazy-done {
  opacity: 1;
  transform: scale(1);
  transition: opacity 1s ease-in, transform 1s ease-in;
}

.section-mv__visual-img {
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
  will-change: filter;
}

@media (max-width: 991.98px) {
  .section-mv__visual-img {
    background-image: url('../img/kv_smp.webp?0') !important;
  }
}

/* =============================================
  TOP page — News
============================================= */
.section-news {
  position: relative;
  z-index: 2;
  min-height: 80vh;
  display: flex;
  align-items: end;
}

.section-news__inner {
  max-height: 100vh;
  padding: 5em 0;
  min-height: 25vh;
  background: rgba(10, 10, 10, .72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  width: 100%;
}

.section-news__content {
  width: var(--container-width);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.5rem, 6vw, 5rem);
  align-items: start;
  margin: 0 auto;
}

.section-news__heading {
  text-align: center;
}

.section-news__heading .en {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: var(--fs-title);
  letter-spacing: .05em;
  line-height: 1;
}

.section-news__heading .jp {
  display: block;
  margin-top: .5em;
  font-size: clamp(.8rem, 1.4vw, 1.05rem);
  text-align: left;
}

.section-news__list {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 1.5rem);
  font-size: var(--fs-body);
}

.section-news__item {
  padding-bottom: clamp(1rem, 2vw, 1.5rem);
  border-bottom: 1px solid rgba(255, 255, 255, .3);
}


.section-news__item a .section-news__text {
  text-decoration: underline;
}

.section-news__link {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25em 1.5em;
}

.section-news__link:not(a) {
  cursor: default;
}

a.section-news__link {
  transition: color .3s ease;
}

@media (hover: hover) {
  a.section-news__link:hover {
    color: var(--color-red);
    opacity: 1;
  }
}

.section-news__date {
  font-size: clamp(.9rem, 1.6vw, 1.2rem);
  letter-spacing: .05em;
}

.section-news__text {
  font-size: clamp(.9rem, 1.6vw, 1.2rem);
}

@media (max-width: 991.98px) {
  .section-news__content {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .section-news__heading .jp {
    text-align: center;
  }
  .section-news {
    min-height: fit-content;
  }
}

/* =============================================
  TOP page — About
============================================= */
.section-about {
  position: relative;
  width: 100%;
  display: grid;
}

.section-about > * {
  grid-area: 1 / 1;
}

.section-stage {
  position: sticky;
  height: 100vh;
  top: 0;
  width: 100%;
  overflow: hidden;
  perspective: 800px;
  background-image: url(../img/about_bg.jpg);
  background-size: cover;
}

.section-stage::before {
  position: absolute;
  content: "";
  width: auto;
  aspect-ratio: 1200 / 1400;
  height: 90vh;
  background-image: url('../img/about-bg-shadow.png');
  background-size: contain;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.section-about__fade {
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(10, 10, 10, .5) 0%,
    transparent 15%,
    transparent 70%,
    rgba(10, 10, 10, .5) 100%
  );
}

@media (min-width: 992px) {
  .section-news {
    min-height: calc(100vh - var(--site-header-h));
  }

  .section-news__inner {
    max-height: calc(100vh - var(--site-header-h));
    /*margin-top: calc(var(--site-header-h) * -1);*/
  }

  .section-stage {
    top: var(--site-header-h);
    height: calc(100vh - var(--site-header-h));
  }

  .section-about__fade {
    top: var(--site-header-h);
    height: calc(100vh - var(--site-header-h));
  }
}

.section-about__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 1440 / 810;
  transform-style: preserve-3d;
}

@media (min-width: 992px) {
  .section-about__bg {
    top: 50%;
    transform: translateY(-50%);
  }
}

.section-about__bg-image {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ABOUTの文字の下に敷く、写真をぼかして沈める楕円 */
.section-about__vignette {
  position: absolute;
  left: 16.81%;
  top: 16.54%;
  width: 65.42%;
  height: 80vh;
  border-radius: 50%;
  background: rgba(10, 10, 10, .6);
  opacity: .1;
  box-shadow: 0 0 6.25rem 1.8125rem rgba(10, 10, 10, .5);
  backdrop-filter: blur(3.125rem);
  -webkit-backdrop-filter: blur(3.125rem);
  pointer-events: none;
}

.section-about__photo {
  position: absolute;
  overflow: hidden;
  transform: translateZ(0);
}

.section-about__photo-img {
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.section-about__photo--13 {
  left: 42vw;
  right: -2vw;
  top: 8vh;
  aspect-ratio: 461 / 259;
  opacity: .5;
}

.section-about__photo--11 {
  left: -13vw;
  right: 55vw;
  top: 16vh;
  aspect-ratio: 728 / 409;
  opacity: .8;
}

.section-about__photo--09 {
  left: 20vw;
  right: 35vw;
  top: 35vh;
  aspect-ratio: 585 / 329;
  opacity: .5;
}

.section-about__photo--12 {
  left: 30vw;
  right: -10vw;
  top: 47vh;
  aspect-ratio: 696 / 391;
  opacity: .5;
}

.section-about__photo--10 {
  left: -20vw;
  right: 45vw;
  top: 62vh;
  aspect-ratio: 985 / 554;
  opacity: .8;
}

.section-about__photo--08 {
  left: 35vw;
  right: -20vw;
  top: 2vh;
  aspect-ratio: 1080 / 720;
  opacity: .8;
}

@media (min-width: 992px) {
  .section-about__photo--13 {
    left: 55%;
    right: 15%;
    top: 10%;
  }

  .section-about__photo--11 {
    left: 15%;
    right: 57%;
    top: 13%;
  }

  .section-about__photo--09 {
    left: 38%;
    right: 44%;
    top: 38%;
  }

  .section-about__photo--12 {
    left: 58%;
    right: 15%;
    top: 53%;
  }

  .section-about__photo--10 {
    left: 8%;
    right: 55%;
    top: 55%;
  }

  .section-about__photo--08 {
    left: 55%;
    right: 8%;
    top: 0%;
  }
}

.section-about__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2em;
  max-width: 48rem;
  margin-inline: auto;
  padding: 23vh 0 17vh 0;
  text-align: center;
  opacity: 0;
  transition: opacity 1.3s ease;
}

.section-about__content.is-inview {
  opacity: 1;
}

.section-about__quote {
  width: clamp(4rem, 10vw, 6rem);
  opacity: .8;
}

.section-about__dash {
  width: clamp(8rem, 18vw, 12rem);
  opacity: .7;
}

.section-about__lead {
  font-family: var(--font-jp-heading);
  font-size: clamp(1.2rem, 5vw, 3.5rem);
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 5%;
  padding: .5em 0 1em 0;
  text-shadow: 0 0 .42em rgba(10, 10, 10, .3);
}

.section-about__highlight,
.section-about__body {
  font-family: var(--font-jp-heading);
  font-size: clamp(.7rem, 2.4vw, 1.6rem);
  font-weight: 900;
  line-height: 1.65;
  letter-spacing: 8%;
  text-shadow: 0 0 .42em rgba(10, 10, 10, .95);
}

.section-about__body--lg {
  font-size: clamp(1.05rem, 3.7vw, 2.45rem);
  line-height: 1.33;
  letter-spacing: 10%;
  padding: 1em 0 .5em 0;
  text-shadow: 0 0 .42em rgba(10, 10, 10, .3);
}

/* =============================================
  TOP page — Banner
============================================= */
.section-banner {
  padding: clamp(1.5rem, 5vw, 3rem) 0;
}

.section-banner__link {
  display: block;
  width: min(95%, 50rem);
  margin-inline: auto;
}

.section-banner__img {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1200 / 300;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

@media (max-width: 991.98px) {
  .section-about__content {
    gap: 1.5em;
  }
  .section-about__highlight,
  .section-about__body {
    font-size: clamp(.8rem, 4vw, 2.1rem);
  }
  .section-about__lead {
    font-size: clamp(1.2rem, 6.5vw, 3.5rem);
    padding: .5em 0 .5em 0;
  }
  .section-about__body--lg {
    font-size: clamp(1.05rem, 5vw, 2.45rem);
    padding: .5em 0 .5em 0;
  }
  .section-mv {
    height: auto;
    margin-bottom: 0;
  }
  .section-news__link {
    flex-direction: column;
  }
}