@charset "UTF-8";

:root {
  --sp-viewport: 416;
  --pc-viewport: 1200;
}

/* mv */
.mv {
  position: relative;
  margin-top: var(--size-40);
}

.mv__title {
  position: absolute;
  top: calc(23 / var(--sp-viewport) * 100vw);
  left: calc(129 / var(--sp-viewport) * 100vw);
  z-index: 2;
  width: calc(156 / var(--sp-viewport) * 100vw);
}

.mv__logo {
  position: absolute;
  top: calc(22 / var(--sp-viewport) * 100vw);
  right: calc(24 / var(--sp-viewport) * 100vw);
  z-index: 2;
  width: calc(90 / var(--sp-viewport) * 100vw);
}

.mv__copy {
  position: absolute;
  bottom: calc(25 / var(--sp-viewport) * 100vw);
  left: calc(23 / var(--sp-viewport) * 100vw);
  z-index: 2;
  width: calc(243 / var(--sp-viewport) * 100vw);
}

.mv__bg img {
  width: 100%;
}

@media screen and (min-width: 992px) {
  .mv {
    position: relative;
    margin-top: var(--size-36);
  }

  .mv__title {
    top: calc(31 / var(--pc-viewport) * 100vw);
    right: calc(35 / var(--pc-viewport) * 100vw);
    left: auto;
    width: calc(208 / var(--pc-viewport) * 100vw);
  }

  .mv__logo {
    top: auto;
    right: auto;
    bottom: calc(53 / var(--pc-viewport) * 100vw);
    left: calc(59 / var(--pc-viewport) * 100vw);
    width: calc(162 / var(--pc-viewport) * 100vw);
  }

  .mv__copy {
    bottom: calc(45 / var(--pc-viewport) * 100vw);
    left: calc(254 / var(--pc-viewport) * 100vw);
    width: calc(292 / var(--pc-viewport) * 100vw);
  }
}

/* gallery */
.gallery {
  margin-top: calc(60 / var(--sp-viewport) * 100vw);
}

.gallery figcaption {
  text-align: right;
  font-size: 12px;

  line-height: 1.8;
  color: var(--color-credit);
}

.gallery__block01 {
  width: calc(292 / var(--sp-viewport) * 100vw);
  margin-inline: auto;
}

.gallery__block02 {
  display: flex;
  flex-direction: column;
  gap: var(--size-2);
  margin-top: calc(54 / var(--sp-viewport) * 100vw);
  margin-inline: auto;
}

.gallery__img02 {
  width: calc(228 / var(--sp-viewport) * 100vw);
}

.gallery__img03 {
  align-self: end;
  width: calc(354 / var(--sp-viewport) * 100vw);
}

.gallery__block03 {
  margin-top: calc(80 / var(--sp-viewport) * 100vw);
}

.gallery__block04 {
  margin-top: calc(80 / var(--sp-viewport) * 100vw);
}

.gallery__block05 {
  display: flex;
  flex-direction: column;
  gap: var(--size-2);
  margin-top: calc(80 / var(--sp-viewport) * 100vw);
}

.gallery__img06 {
  width: calc(247 / var(--sp-viewport) * 100vw);
}

.gallery__img07 {
  align-self: flex-end;
  width: calc(361 / var(--sp-viewport) * 100vw);
}

.gallery__block06 {
  display: flex;
  flex-direction: column;
  gap: var(--size-2);
  margin-top: calc(80 / var(--sp-viewport) * 100vw);
}

.gallery__img08 {
  width: calc(243 / var(--sp-viewport) * 100vw);
}

.gallery__img09 {
  align-self: flex-end;
  width: calc(334 / var(--sp-viewport) * 100vw);
}

.gallery__img09 figcaption {
  text-align: left;
}

.gallery__block07 {
  display: flex;
  flex-direction: column;
  gap: var(--size-2);
  margin-top: calc(48 / var(--sp-viewport) * 100vw);
}

.gallery__img10 {
  width: calc(311 / var(--sp-viewport) * 100vw);
}

.gallery__img11 {
  align-self: flex-end;
  width: calc(254 / var(--sp-viewport) * 100vw);
}

.gallery__block08 {
  margin-top: calc(80 / var(--sp-viewport) * 100vw);
}

@media screen and (min-width: 992px) {
  .gallery {
    margin-top: calc(160 / var(--pc-viewport) * 100vw);
  }

  .gallery__block01 {
    width: calc(532 / var(--pc-viewport) * 100vw);
  }

  .gallery__block02 {
    flex-direction: row;
    gap: var(--size-4);
    margin-top: calc(94 / var(--pc-viewport) * 100vw);
    margin-left: calc(156 / var(--pc-viewport) * 100vw);
  }

  .gallery__img02 {
    width: calc(406 / var(--pc-viewport) * 100vw);
  }

  .gallery__img03 {
    margin-top: calc(178 / var(--pc-viewport) * 100vw);
    width: calc(574 / var(--pc-viewport) * 100vw);
  }

  .gallery__block03 {
    width: calc(652 / var(--pc-viewport) * 100vw);
    margin-top: calc(160 / var(--pc-viewport) * 100vw);
    margin-left: calc(130 / var(--pc-viewport) * 100vw);
  }

  .gallery__block04 {
    margin-top: calc(160 / var(--pc-viewport) * 100vw);
  }

  .gallery__block05 {
    flex-direction: row;
    justify-content: center;
    gap: var(--size-4);
    margin-top: calc(160 / var(--pc-viewport) * 100vw);
  }

  .gallery__img06 {
    width: calc(454 / var(--pc-viewport) * 100vw);
    margin-top: calc(427 / var(--pc-viewport) * 100vw);
  }

  .gallery__img07 {
    align-self: unset;
    width: calc(454 / var(--pc-viewport) * 100vw);
  }

  .gallery__block06 {
    flex-direction: row;
    gap: var(--size-4);
    margin-top: calc(160 / var(--pc-viewport) * 100vw);
    margin-left: calc(144 / var(--pc-viewport) * 100vw);
  }

  .gallery__img08 {
    width: calc(387 / var(--pc-viewport) * 100vw);
  }

  .gallery__img09 {
    align-self: unset;
    width: calc(588 / var(--pc-viewport) * 100vw);
    margin-top: calc(208 / var(--pc-viewport) * 100vw);
  }

  .gallery__img09 figcaption {
    text-align: right;
  }

  .gallery__block07 {
    flex-direction: row;
    gap: var(--size-4);
    margin-top: calc(133 / var(--pc-viewport) * 100vw);
    margin-left: calc(146 / var(--pc-viewport) * 100vw);
  }

  .gallery__img10 {
    width: calc(513 / var(--pc-viewport) * 100vw);
  }

  .gallery__img11 {
    align-self: unset;
    width: calc(343 / var(--pc-viewport) * 100vw);
    margin-top: calc(615 / var(--pc-viewport) * 100vw);
  }

  .gallery__block08 {
    margin-top: calc(160 / var(--pc-viewport) * 100vw);
  }
}