/* stylelint-disable no-descending-specificity */
/* stylelint-disable scss/no-global-function-names */
.landing-page {
  --color-base: #000;
  --color-white: #fff;
  --color-gray: #707070;
  --font-base: 'century-gothic', sans-serif;
}
@media (min-width: 1400px) {
  .landing-page {
    --container-size: calc(1px * calc(500 / 750));
  }
}
@media (min-width: 768px) {
  .landing-page {
    --rate: calc(100vw / 1200);
  }
}
@media (min-width: 768px) and (max-width: 1399.98px) {
  .landing-page {
    --container-size: calc(calc(100vw / 1200) * calc(500 / 750));
  }
}
@media (max-width: 767.98px) {
  .landing-page {
    --container-size: calc(100vw / 750);
  }
}

.landing-page * {
  box-sizing: border-box;
  font-family: var(--font-base);
  font-feature-settings: 'palt';
  line-height: 1;
  color: var(--color-base);
  letter-spacing: var(--letter-spacing, 0.05em);
}

.landing-page a {
  display: var(--display, block);
  transition: opacity 0.3s ease;
}

.landing-page a:hover {
  opacity: 0.7;
}

.landing-page img,
.landing-page picture {
  display: block;
}

.landing-page img,
.landing-page svg {
  width: 100%;
  height: auto;
  image-rendering: optimizequality;
}

.landing-page .animation-blur > * {
  opacity: 0;
  transition: opacity 0.6s linear;
  animation-duration: 1.2s;
  animation-fill-mode: both;
}

.landing-page .animation-blur > *:nth-child(n + 2) {
  animation-delay: 0.6s;
}

.landing-page .animation-blur.is-show > * {
  opacity: 1;
  animation-name: animation-blur;
}
@keyframes animation-blur {
  0% {
    filter: blur(5px);
    opacity: 0;
  }

  100% {
    filter: blur(0);
    opacity: 1;
  }
}

.landing-page .animation-shift > * {
  transition: opacity 0.6s ease;
}

.landing-page .animation-shift > *:first-child {
  z-index: 1;
  opacity: 1;
}

.landing-page .animation-shift > *:last-child {
  z-index: -1;
  opacity: 0;
}

.landing-page .animation-shift.is-show > *:first-child {
  z-index: -1;
  opacity: 0;
}

.landing-page .animation-shift.is-show > *:last-child {
  z-index: 1;
  opacity: 1;
}

.landing-page .animation-switch::after {
  transition: transform 0.6s ease;
}

.landing-page .animation-switch.is-clicked::after {
  transform: rotate(90deg);
}

.landing-page .animation-overlay {
  transition: background-color 0.6s ease;
}

.landing-page .animation-overlay > *:not(.animation-switch) {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.landing-page .animation-overlay.is-clicked {
  background-color: rgba(112, 112, 112, 0.5);
}

.landing-page .animation-overlay.is-clicked > *:not(.animation-switch) {
  visibility: visible;
  opacity: 1;
}
@media (min-width: 768px) {
  .landing-page .only-sp {
    display: none;
  }
}
@media (max-width: 767.98px) {
  .landing-page .without-sp {
    display: none;
  }
}
@media (min-width: 768px) {
  .landing-page > .landing-page__container {
    display: grid;
    grid-template-columns: calc(1050 * var(--container-size)) calc(750 * var(--container-size));
    place-content: center;
  }
}

.landing-page__heading {
  position: sticky;
  display: grid;
  place-content: center;
}
@media (min-width: 768px) {
  .landing-page__heading {
    top: 0;
    height: 100dvh;
  }
}
@media (max-width: 767.98px) {
  .landing-page__heading {
    top: 0;
    height: calc(1332 * var(--container-size));
  }
}

.landing-page__heading-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: no-repeat center/cover;
}
@media (min-width: 768px) {
  .landing-page__heading-background {
    background-image: url(../images/mv-background_lrg.jpg);
  }
}
@media (max-width: 767.98px) {
  .landing-page__heading-background {
    background-image: url(../images/mv-background_sml.jpg);
  }
}

.landing-page__heading-desc {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
@media (min-width: 768px) {
  .landing-page__heading-desc {
    width: calc(490 * var(--rate));
    height: calc(349 * var(--rate));
    transform: translateX(calc(-5 * var(--container-size)));
  }
}
@media (max-width: 767.98px) {
  .landing-page__heading-desc {
    width: calc(750 * var(--container-size));
    height: calc(635 * var(--container-size));
    transform: translateY(calc(-14 * var(--container-size)));
  }
}

.landing-page__heading-desc > * {
  position: relative;
}

.landing-page__heading-desc::before {
  position: absolute;
  content: '';
  background-color: var(--color-white);
  transform: rotate(2.5deg);
}
@media (min-width: 768px) {
  .landing-page__heading-desc::before {
    top: calc(10 * var(--rate));
    left: calc(8 * var(--rate));
    width: 97%;
    height: 94%;
  }
}
@media (max-width: 767.98px) {
  .landing-page__heading-desc::before {
    top: calc(15 * var(--container-size));
    left: calc(1 * var(--container-size));
    width: 99%;
    height: 95%;
  }
}

.landing-page__heading-letters a {
  --display: flex;
  flex-direction: column;
  align-items: center;
}
@media (min-width: 768px) {
  .landing-page__heading-letters {
    padding-block-end: calc(20 * var(--container-size));
    padding-inline-end: calc(5 * var(--container-size));
  }
}
@media (max-width: 767.98px) {
  .landing-page__heading-letters {
    padding-block-end: calc(30 * var(--container-size));
  }
}

.landing-page__heading-letter {
  display: block;
}
@media (min-width: 768px) {
  .landing-page__heading-letter:first-child {
    width: calc(340 * var(--rate));
    padding-inline-end: calc(30 * var(--container-size));
  }
}
@media (max-width: 767.98px) {
  .landing-page__heading-letter:first-child {
    width: calc(597 * var(--container-size));
    padding-inline-end: calc(30 * var(--container-size));
  }
}
@media (min-width: 768px) {
  .landing-page__heading-letter:nth-child(2) {
    width: calc(200 * var(--rate));
    margin-block-start: calc(22 * var(--rate));
  }
}
@media (max-width: 767.98px) {
  .landing-page__heading-letter:nth-child(2) {
    width: calc(415 * var(--container-size));
    padding-inline-start: calc(4 * var(--container-size));
    margin-block-start: calc(41 * var(--container-size));
  }
}
@media (min-width: 768px) {
  .landing-page__heading-letter:last-child {
    width: calc(143 * var(--rate));
    margin-block-start: calc(41 * var(--rate));
  }
}
@media (max-width: 767.98px) {
  .landing-page__heading-letter:last-child {
    width: calc(268 * var(--container-size));
    margin-block-start: calc(80 * var(--container-size));
  }
}

.landing-page__heading-staff-credits {
  position: absolute;
}
@media (min-width: 768px) {
  .landing-page__heading-staff-credits {
    width: calc(348 * var(--rate));
    padding-block-end: calc(20 * var(--container-size));
    padding-inline-start: calc(8 * var(--container-size));
  }
}

.landing-page__credits {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.landing-page__credits-button {
  position: absolute;
  right: calc(20 * var(--container-size));
  bottom: calc(15 * var(--container-size));
  z-index: 10;
  width: calc(80 * var(--container-size));
  height: calc(80 * var(--container-size));
  pointer-events: auto;
  cursor: pointer;
}

.landing-page__credits-button::before,
.landing-page__credits-button::after {
  position: absolute;
  content: '';
  background-color: var(--color-white);
}

.landing-page__credits-button::before {
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  margin-block: auto;
}

.landing-page__credits-button::after {
  top: 0;
  right: 0;
  left: 0;
  width: 2px;
  height: 100%;
  margin-inline: auto;
}

.landing-page__credits-list {
  --letter-spacing: 0.06em;
  position: absolute;
  right: 0;
  bottom: calc(40 * var(--container-size));
  left: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: calc(15 * var(--container-size)) calc(19 * var(--container-size));
  justify-content: center;
  padding-inline: calc(105 * var(--container-size)) calc(120 * var(--container-size));
  margin-inline: auto;
  pointer-events: auto;
}

.landing-page__credit {
  font-size: calc(18 * var(--container-size));
  color: var(--color-white);
}

.landing-page__image {
  position: relative;
  background-color: #fff;
}

.landing-page__content {
  background-color: var(--color-white);
}

.landing-page__content[data-content='01'],
.landing-page__content[data-content='02'] {
  position: sticky;
  left: 0;
}

.landing-page__content[data-content='01'] {
  top: calc(-1125 * var(--container-size));
}

.landing-page__content[data-content='02'] {
  top: calc(-2250 * var(--container-size));
}

.landing-page__content[data-content='03'],
.landing-page__content[data-content='04'] {
  position: relative;
}

.landing-page__block {
  position: relative;
}

.landing-page__block[data-block='01-02'] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  place-items: center;
}

.landing-page__block[data-block='01-02'] > :nth-child(2) {
  grid-row: 2;
  grid-column: 1;
}
@media (min-width: 768px) {
  .landing-page__block[data-block='01-02'] > :nth-child(2) {
    width: calc(225 * var(--container-size));
  }
}
@media (max-width: 767.98px) {
  .landing-page__block[data-block='01-02'] > :nth-child(2) {
    width: calc(233 * var(--container-size));
  }
}

.landing-page__block[data-block='01-02'] > :last-child {
  grid-row: 2;
  grid-column: 2;
}

.landing-page__block[data-block='02-02'] {
  display: flex;
  flex-direction: column;
  padding-block: calc(235 * var(--container-size)) calc(288 * var(--container-size));
}
@media (min-width: 768px) {
  .landing-page__block[data-block='02-02'] {
    row-gap: calc(25 * var(--container-size));
    padding-inline: calc(163 * var(--container-size));
  }
}
@media (max-width: 767.98px) {
  .landing-page__block[data-block='02-02'] {
    row-gap: calc(24 * var(--container-size));
    padding-inline: calc(149 * var(--container-size));
  }
}
@media (min-width: 768px) {
  .landing-page__block[data-block='02-02'] > :first-child {
    padding-inline: calc(25 * var(--container-size));
  }
}
@media (max-width: 767.98px) {
  .landing-page__block[data-block='02-02'] > :first-child {
    padding-inline: calc(39 * var(--container-size));
  }
}

.landing-page__footer {
  position: relative;
  padding-block-start: calc(100 * var(--container-size));
  background-color: #fff;
}
@media (min-width: 768px) {
  .landing-page__footer {
    padding-block-end: calc(134 * var(--container-size));
  }
}
@media (max-width: 767.98px) {
  .landing-page__footer {
    padding-block-end: calc(14 * var(--container-size));
  }
}

.landing-page__footer-image {
  padding-inline: calc(135 * var(--container-size));
}

.landing-page__footer-letters {
  position: relative;
}
@media (min-width: 768px) {
  .landing-page__footer-letters {
    padding-inline: calc(81 * var(--container-size)) calc(110 * var(--container-size));
    margin-block-start: calc(-87 * var(--container-size));
  }
}
@media (max-width: 767.98px) {
  .landing-page__footer-letters {
    padding-inline: calc(65 * var(--container-size)) calc(113 * var(--container-size));
    margin-block-start: calc(-96 * var(--container-size));
  }
}

.landing-page__footer-letters > * {
  display: block;
}
@media (min-width: 768px) {
  .landing-page__footer-letters > :nth-child(2) {
    padding-inline: calc(104 * var(--container-size)) calc(77 * var(--container-size));
    margin-block-start: calc(37 * var(--container-size));
  }
}
@media (max-width: 767.98px) {
  .landing-page__footer-letters > :nth-child(2) {
    padding-inline: calc(107 * var(--container-size)) calc(55 * var(--container-size));
    margin-block-start: calc(26 * var(--container-size));
  }
}
@media (min-width: 768px) {
  .landing-page__footer-letters > :last-child {
    padding-inline: calc(217 * var(--container-size)) calc(188 * var(--container-size));
    margin-block-start: calc(22 * var(--container-size));
  }
}
@media (max-width: 767.98px) {
  .landing-page__footer-letters > :last-child {
    padding-inline: calc(232 * var(--container-size)) calc(168 * var(--container-size));
    margin-block-start: calc(20 * var(--container-size));
  }
}

.landing-page__footer-staff-credit {
  --letter-spacing: 0.06em;
  margin-block-start: calc(127 * var(--container-size));
  font-size: calc(18 * var(--container-size));
  line-height: 2.2;
  text-align: center;
}