@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(26 / var(--sp-viewport) * 100vw);
  right: calc(23 / var(--sp-viewport) * 100vw);
  z-index: 2;
  width: calc(159 / var(--sp-viewport) * 100vw);
}

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

.mv__copy {
  position: absolute;
  bottom: calc(39 / var(--sp-viewport) * 100vw);
  left: calc(42 / var(--sp-viewport) * 100vw);
  z-index: 2;
  width: calc(235 / 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(52 / var(--pc-viewport) * 100vw);
    right: calc(56 / var(--pc-viewport) * 100vw);
    width: calc(211 / var(--pc-viewport) * 100vw);
  }

  .mv__logo {
    top: auto;
    bottom: calc(54 / var(--pc-viewport) * 100vw);
    left: calc(56 / var(--pc-viewport) * 100vw);
    width: calc(156 / var(--pc-viewport) * 100vw);
  }

  .mv__copy {
    bottom: calc(50 / var(--pc-viewport) * 100vw);
    left: calc(242 / var(--pc-viewport) * 100vw);
    width: calc(286 / var(--pc-viewport) * 100vw);
  }
}

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

.gallery figure {
  position: relative;
}

.gallery figcaption {
  position: absolute;
  left: 0;
  top: 100%;
  font-size: 12px;
  line-height: 1.8;
  color: var(--color-credit);
}

.gallery__block01 figcaption {
  padding-left: var(--size-10);
}

.gallery__block02 {
  width: calc(322 / var(--sp-viewport) * 100vw);
  margin-top: calc(80 / var(--sp-viewport) * 100vw);
  margin-left: auto;
}

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

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

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

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

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

.gallery__img05-5 {
  display: none;
}

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

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

.gallery__img07 {
  width: calc(323 / 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(255 / var(--sp-viewport) * 100vw);
}

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

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

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

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

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

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

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

.gallery__img14 {
  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(750 / var(--pc-viewport) * 100vw);
    margin-left: calc(139 / var(--pc-viewport) * 100vw);
  }

  .gallery__block01 figcaption {
    padding-left: 0;
  }

  .gallery__block02 {
    width: calc(543 / var(--pc-viewport) * 100vw);
    margin-top: var(--size-4);
    margin-left: calc(570 / var(--pc-viewport) * 100vw);
  }

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

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

  .gallery__img04 {
    align-self: unset;
    width: calc(437 / var(--pc-viewport) * 100vw);
    margin-top: calc(306 / var(--pc-viewport) * 100vw);
  }

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

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

  .gallery__img05-5 {
    display: block;
    width: calc(452 / var(--pc-viewport) * 100vw);
    margin-top: calc(120 / var(--pc-viewport) * 100vw);
    margin-left: calc(132 / var(--pc-viewport) * 100vw);
  }

  .gallery__block05 {
    flex-direction: row-reverse;
    gap: var(--size-4);
    margin-top: calc(120 / var(--pc-viewport) * 100vw);
    margin-right: calc(122 / var(--pc-viewport) * 100vw);
  }

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

  .gallery__img07 {
    width: calc(453 / var(--pc-viewport) * 100vw);
    margin-top: calc(362 / var(--pc-viewport) * 100vw);
  }

  .gallery__block06 {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: var(--size-4);
    margin-top: calc(120 / var(--pc-viewport) * 100vw);
    margin-left: calc(169 / var(--pc-viewport) * 100vw);
  }

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

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

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

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

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

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

  .gallery__img12 {
    width: calc(452 / var(--pc-viewport) * 100vw);
    margin-top: calc(277 / var(--pc-viewport) * 100vw);
  }

  .gallery__img13 {
    width: calc(823 / var(--pc-viewport) * 100vw);
    margin-top: calc(120 / var(--pc-viewport) * 100vw);
    margin-left: calc(193 / var(--pc-viewport) * 100vw);
  }

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