@charset "UTF-8";

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

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

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

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

.mv__copy {
  position: absolute;
  bottom: calc(20 / var(--sp-viewport) * 100vw);
  left: calc(26 / var(--sp-viewport) * 100vw);
  z-index: 2;
  width: calc(257 / 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(50 / var(--pc-viewport) * 100vw);
    left: calc(79 / var(--pc-viewport) * 100vw);
    width: calc(208 / var(--pc-viewport) * 100vw);
  }

  .mv__logo {
    top: calc(44 / var(--pc-viewport) * 100vw);
    right: calc(55 / var(--pc-viewport) * 100vw);
    width: calc(162 / var(--pc-viewport) * 100vw);
  }

  .mv__copy {
    bottom: calc(48 / var(--pc-viewport) * 100vw);
    right: calc(43 / var(--pc-viewport) * 100vw);
    left: auto;
    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 {
  display: grid;
  width: calc(292 / var(--sp-viewport) * 100vw);
  margin-inline: auto;
}

.gallery__block02 {
  display: flex;
  justify-content: center;
  gap: var(--size-2);
  margin-top: calc(80 / var(--sp-viewport) * 100vw);
  margin-inline: auto;
}

.gallery__img02 {
  width: calc(227 / var(--sp-viewport) * 100vw);
  margin-top: calc(49 / var(--sp-viewport) * 100vw);
}

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

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

.gallery__img04 {
  width: calc(316 / var(--sp-viewport) * 100vw);
  margin-left: auto;
}

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

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

.gallery__img06 {
  position: relative;
  width: calc(312 / var(--sp-viewport) * 100vw);
  margin-left: auto;
  margin-right: calc(16 / var(--sp-viewport) * 100vw);
}

.gallery__img06 figcaption {
  position: absolute;
  right: 0;
  top: 100%;
}

.gallery__block06 {
  display: flex;
  gap: var(--size-2);
  margin-top: var(--size-2);
}

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

.gallery__img08 {
  width: calc(187 / var(--sp-viewport) * 100vw);
  margin-top: calc(169 / var(--sp-viewport) * 100vw);
}

.gallery__block07 {
  width: calc(207 / var(--sp-viewport) * 100vw);
  margin-top: calc(80 / var(--sp-viewport) * 100vw);
  margin-inline: auto;
}

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

.gallery__block09 {
  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 {
    display: grid;
    width: calc(471 / var(--pc-viewport) * 100vw);
    margin-inline: auto;
  }

  .gallery__block02 {
    gap: var(--size-4);
    margin-top: calc(92 / var(--pc-viewport) * 100vw);
  }

  .gallery__img02 {
    width: calc(561 / var(--pc-viewport) * 100vw);
    margin-top: calc(120 / var(--pc-viewport) * 100vw);
  }

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

  .gallery__block03 {
    gap: var(--size-4);
    margin-top: calc(120 / var(--pc-viewport) * 100vw);
  }

  .gallery__img04 {
    width: calc(582 / var(--pc-viewport) * 100vw);
    margin-left: calc(355 / var(--pc-viewport) * 100vw);
  }

  .gallery__img05 {
    width: calc(415 / var(--pc-viewport) * 100vw);
    margin-left: calc(173 / var(--pc-viewport) * 100vw);
  }

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

  .gallery__img06 {
    position: relative;
    width: calc(556 / var(--pc-viewport) * 100vw);
    margin-left: calc(356 / var(--pc-viewport) * 100vw);
  }

  .gallery__img06 figcaption {
    position: absolute;
    right: 0;
    top: 100%;
  }

  .gallery__block06 {
    display: flex;
    gap: var(--size-4);
    margin-top: var(--size-4);
  }

  .gallery__img07 {
    width: calc(404 / var(--pc-viewport) * 100vw);
    margin-left: calc(168 / var(--pc-viewport) * 100vw);
  }

  .gallery__img08 {
    width: calc(309 / var(--pc-viewport) * 100vw);
    margin-top: calc(303 / var(--pc-viewport) * 100vw);
  }

  .gallery__block07 {
    width: calc(319 / var(--pc-viewport) * 100vw);
    margin-top: calc(120 / var(--pc-viewport) * 100vw);
    margin-left: calc(640 / var(--pc-viewport) * 100vw);
  }

  .gallery__block08 {
    width: calc(578 / var(--pc-viewport) * 100vw);
    margin-top: calc(120 / var(--pc-viewport) * 100vw);
    margin-left: calc(192 / var(--pc-viewport) * 100vw);
  }

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