:root {
  --tsukuaoldmin: "fot-tsukuaoldmin-pr6n", sans-serif;
  --lexia: "lexia-mono", serif;
  --dico: "dico-mono-slab", mono;
  --aktiv: "aktiv-grotesk", sans-serif;
}

@media screen and (min-width: 1400px) {
  :root {
    --vw-unit: calc(1px);
    --vw-unit-modal: calc(492 / 750 * 1px);
  }
}
@media screen and (max-width: 1399px) {
  :root {
    --vw-unit: calc(100vw / 1440);
    --vw-unit-modal: calc(100vw / 750 / 1440 * 492);
  }
}

/* =========================================================
全体
========================================================= */
* {
  -webkit-text-size-adjust: 100%;
}

.l-container {
  width: 100%;
}

.feature {
  width: 100%;
  margin: 0 auto;
  color: black;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  * {
    box-sizing: border-box;
  }

  img {
    width: 100%;
    height: auto;
    vertical-align: top;
  }

  a {
    color: inherit;
  }
}

.fadeimg {
  transition: 0.3s;
}

.contents {
  display: flex;
  flex-direction: column;
  width: calc(492 * var(--vw-unit));
  margin: 0 auto;
}

/* =========================================================
アニメーション
========================================================= */
.img[data-delighter],
.figure[data-delighter],
.film[data-delighter],
.download-image[data-delighter] {
  opacity: 0;
  &.started {
    opacity: 1;
  }
}

.bg-black {
  .img {
    opacity: 0;
  }
  &.started {
    .img {
      opacity: 1;
    }
  }
}
.img20 {
  transition-delay: 0.6s;
}
.img21 {
  transition-delay: 0.9s;
}
.img22 {
  transition-delay: 0.3s;
}

.download-images {
  .download-image {
    opacity: 0;
  }
  &.started {
    .download-image {
      opacity: 1;
    }
  }
}
.download-image01 {
  transition-delay: 0.3s;
}
.download-image02 {
  transition-delay: 0.6s;
}
.download-image03 {
  transition-delay: 0.9s;
}
.download-image04 {
  transition-delay: 1.2s;
}

.figure02,
.figure05,
.img31,
.img32 {
  transition-delay: 0.3s;
}

/* =========================================================
ヘッダー
========================================================= */
.hdr {
  width: 100%;
  position: relative;
}

.hdr-image {
  width: 100%;
  margin: 0 auto;
  img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    vertical-align: top;
  }
}

.hdr-title {
  pointer-events: none;
  position: absolute;
  top: 99px;
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 2;
  img {
    width: 594px;
  }
}

/* =========================================================
ヘッダー下文章
========================================================= */
.main-meta {
  width: calc(1080 * var(--vw-unit));
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  margin: 0 auto;
  margin-top: calc(227 * var(--vw-unit));
  margin-bottom: calc(154 * var(--vw-unit));
}
.main-meta-inr {
  width: calc(650 * var(--vw-unit));
}

.main-title {
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--vw-unit)) 0;
}
.main-title01 {
  width: calc(90 * var(--vw-unit));
  display: flex;
}
.main-title02 {
  width: calc(167 * var(--vw-unit));
  display: flex;
}

.main-lead-en {
  display: flex;
  flex-direction: column;
  font-size: calc(12 * var(--vw-unit));
  font-family: var(--lexia);
  font-weight: 300;
  color: #535353;
  margin-top: calc(23 * var(--vw-unit));
  margin-bottom: 0;
  line-height: 2;
  letter-spacing: 0.026em;
}
.main-lead-ja {
  display: flex;
  flex-direction: column;
  font-size: calc(13 * var(--vw-unit));
  font-family: var(--tsukuaoldmin);
  font-weight: 300;
  line-height: 2.1;
  letter-spacing: 0.04em;
  margin-top: calc(23 * var(--vw-unit));
  margin-bottom: 0;
}

/* =========================================================
グループ
========================================================= */
.group {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.group01 {
  margin-bottom: calc(168 * var(--vw-unit));
}
.group02 {
  margin-bottom: calc(90 * var(--vw-unit));
}
.group03 {
  margin-bottom: calc(127 * var(--vw-unit));
}
.group04 {
  margin-bottom: calc(124 * var(--vw-unit));
}
.group05 {
  margin-bottom: calc(109 * var(--vw-unit));
}
.group06 {
  margin-bottom: calc(107 * var(--vw-unit));
}
.group07 {
  margin-bottom: calc(84 * var(--vw-unit));
}
.group08 {
  margin-bottom: calc(220 * var(--vw-unit));
}
.group09 {
  margin-bottom: calc(166 * var(--vw-unit));
}
.group10 {
  margin-bottom: calc(44 * var(--vw-unit));
}
.group11 {
  margin-bottom: calc(122 * var(--vw-unit));
}
.group12 {
  margin-bottom: calc(132 * var(--vw-unit));
}
.group13 {
  margin-bottom: calc(181 * var(--vw-unit));
}
.group14 {
  margin-bottom: calc(52 * var(--vw-unit));
}
.group15 {
  margin-bottom: calc(80 * var(--vw-unit));
}
.group16 {
  margin-bottom: calc(138 * var(--vw-unit));
}

/* =========================================================
テキスト
========================================================= */
.text-group {
  width: calc(363 * var(--vw-unit));
  align-self: flex-start;
  margin-left: calc(39 * var(--vw-unit));
}

.text-group-title01 {
  width: calc(360 * var(--vw-unit));
}
.text-group-title02 {
  width: calc(353 * var(--vw-unit));
}
.text-group-title03 {
  width: calc(183 * var(--vw-unit));
}
.text-group-title04 {
  width: calc(306 * var(--vw-unit));
}
.text-group-title05 {
  width: calc(229 * var(--vw-unit));
}
.text-group-title06 {
  width: calc(340 * var(--vw-unit));
}
.text-group-title07 {
  width: calc(309 * var(--vw-unit));
}
.text-group-title08 {
  width: calc(350 * var(--vw-unit));
}
.text-group-title09 {
  width: calc(300 * var(--vw-unit));
}
.text-group-title10 {
  width: calc(352 * var(--vw-unit));
}
.text-group-title11 {
  width: calc(317 * var(--vw-unit));
}
.text-group-title12 {
  width: calc(279 * var(--vw-unit));
}
.text-group-title13 {
  width: calc(404 * var(--vw-unit));
}
.text-group-title14 {
  width: calc(381 * var(--vw-unit));
}
.text-group-title15 {
  width: calc(374 * var(--vw-unit));
}
.text-group-title16 {
  width: calc(364 * var(--vw-unit));
}

.text-group-subtitle {
  font-size: calc(17 * var(--vw-unit));
  font-family: var(--tsukuaoldmin);
  font-weight: 300;
  letter-spacing: 0.04em;
  margin-top: calc(13 * var(--vw-unit));
}
.text-group-text {
  font-size: calc(14 * var(--vw-unit));
  font-family: var(--tsukuaoldmin);
  font-weight: 300;
  letter-spacing: 0.039em;
  line-height: 1.7;
  margin-top: calc(17 * var(--vw-unit));
  margin-bottom: calc(28 * var(--vw-unit));
}

.credits {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--vw-unit)) 0;
}
.credit-heading {
  width: calc(69 * var(--vw-unit));
  font-size: calc(12 * var(--vw-unit));
  font-family: var(--lexia);
  font-weight: 300;
  letter-spacing: 0.13em;
  margin: 0;
}
.credit {
  display: flex;
  ul {
    li {
      font-size: calc(12 * var(--vw-unit));
      font-family: var(--lexia);
      font-weight: 300;
      letter-spacing: 0.08em;
      line-height: 1.55;
      a {
        text-decoration: none;
        transition: 0.3s;
        span {
          text-decoration: underline;
          text-decoration-skip-ink: none;
          font-size: calc(11 * var(--vw-unit));
          font-family: var(--dico);
          letter-spacing: normal;
        }
        &:hover {
          opacity: 0.6;
        }
      }
    }
  }
}
.img11 .credit {
  margin-top: calc(18 * var(--vw-unit));
}

/* =========================================================
リンク画像
========================================================= */
.img {
  position: relative;
}

.img01 {
  width: 100%;
  margin-bottom: calc(10 * var(--vw-unit));
}
.img02 {
  width: calc(378 * var(--vw-unit));
  margin-bottom: calc(25 * var(--vw-unit));
  margin-left: calc(22 * var(--vw-unit));
}
.img03 {
  width: calc(414 * var(--vw-unit));
  margin-bottom: calc(43 * var(--vw-unit));
  align-self: center;
}
.img04 {
  width: calc(438 * var(--vw-unit));
  margin-bottom: calc(-55 * var(--vw-unit));
  margin-left: calc(3 * var(--vw-unit));
  z-index: 2;
}
.img05 {
  width: calc(312 * var(--vw-unit));
  margin-bottom: calc(-411 * var(--vw-unit));
  margin-left: calc(165 * var(--vw-unit));
}
.img06 {
  width: calc(442 * var(--vw-unit));
  margin-bottom: calc(40 * var(--vw-unit));
  align-self: center;
}
.img07 {
  width: 100%;
}
.img08 {
  width: 100%;
  margin-bottom: calc(40 * var(--vw-unit));
}
.img09 {
  width: calc(446 * var(--vw-unit));
  margin-bottom: calc(-46 * var(--vw-unit));
  align-self: flex-end;
}
.img10 {
  width: calc(531 * var(--vw-unit));
  margin-left: calc(-65 * var(--vw-unit));
  margin-bottom: calc(23 * var(--vw-unit));
}
.img11 {
  width: calc(390 * var(--vw-unit));
  margin-bottom: calc(114 * var(--vw-unit));
  align-self: center;
}
.img12 {
  width: 100%;
}
.img13 {
  width: 100%;
  margin-bottom: calc(47 * var(--vw-unit));
}
.img14 {
  width: calc(450 * var(--vw-unit));
  margin-bottom: calc(24 * var(--vw-unit));
  align-self: center;
}

.film {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: calc(9 * var(--vw-unit));
  padding-right: calc(9 * var(--vw-unit));
  width: calc(492 * var(--vw-unit));
  height: calc(228 * var(--vw-unit));
  background: url(../img/bg_film.png) no-repeat;
  background-size: contain;
  rotate: -31deg;
  margin-left: calc(-48 * var(--vw-unit));
  margin-bottom: calc(-25 * var(--vw-unit));
  z-index: 3;

  .img15 {
    width: calc(232 * var(--vw-unit));
  }
  .img16 {
    width: calc(232 * var(--vw-unit));
  }
}

.img17 {
  width: calc(520 * var(--vw-unit));
  margin-left: calc(34 * var(--vw-unit));
  margin-bottom: calc(-27 * var(--vw-unit));
  z-index: 2;
}
.img18 {
  width: calc(476 * var(--vw-unit));
  margin-left: calc(-28 * var(--vw-unit));
  margin-bottom: calc(31 * var(--vw-unit));
}

.bg-black {
  display: flex;
  background-color: #0f0f0f;
  padding-top: calc(53 * var(--vw-unit));
  padding-bottom: calc(16 * var(--vw-unit));
  flex-direction: column;
  margin-bottom: calc(41 * var(--vw-unit));

  .img19 {
    width: 100%;
    margin-bottom: calc(-135 * var(--vw-unit));
  }
  .img20 {
    width: calc(258 * var(--vw-unit));
    margin-bottom: calc(-284 * var(--vw-unit));
    z-index: 2;
  }
  .img21 {
    width: calc(310 * var(--vw-unit));
    margin-bottom: calc(-76 * var(--vw-unit));
    align-self: flex-end;
    z-index: 3;
  }
  .img22 {
    width: calc(418 * var(--vw-unit));
    align-self: flex-end;
  }
}

.img23 {
  width: calc(426 * var(--vw-unit));
  margin-bottom: calc(50 * var(--vw-unit));
  margin-left: calc(39 * var(--vw-unit));
}
.img24 {
  width: calc(422 * var(--vw-unit));
  margin-bottom: calc(-60 * var(--vw-unit));
  margin-left: calc(25 * var(--vw-unit));
  z-index: 2;
}
.img25 {
  width: calc(368 * var(--vw-unit));
  margin-bottom: calc(33 * var(--vw-unit));
  margin-left: calc(134 * var(--vw-unit));
}
.img26 {
  width: 100%;
  margin-bottom: calc(23 * var(--vw-unit));
}
.img27 {
  width: calc(468 * var(--vw-unit));
  margin-bottom: calc(29 * var(--vw-unit));
  margin-left: calc(17 * var(--vw-unit));
}
.img28 {
  width: 100%;
  margin-bottom: calc(44 * var(--vw-unit));
}
.img29 {
  width: calc(466 * var(--vw-unit));
  margin-bottom: calc(26 * var(--vw-unit));
}
.img30 {
  width: calc(468 * var(--vw-unit));
  margin-bottom: calc(35 * var(--vw-unit));
  align-self: flex-end;
}
.img31 {
  width: calc(326 * var(--vw-unit));
  margin-bottom: calc(-104 * var(--vw-unit));
  margin-left: calc(20 * var(--vw-unit));
  z-index: 2;
}
.img32 {
  width: calc(392 * var(--vw-unit));
  margin-bottom: calc(40 * var(--vw-unit));
  margin-left: calc(84 * var(--vw-unit));
}
.img33 {
  width: 100%;
}

/* =========================================================
あしらい
========================================================= */
.figure01 {
  width: calc(332 * var(--vw-unit));
  margin-bottom: calc(38 * var(--vw-unit));
  margin-left: calc(147 * var(--vw-unit));
}
.figure02 {
  width: calc(295 * var(--vw-unit));
  margin-left: calc(-64 * var(--vw-unit));
  margin-bottom: calc(90 * var(--vw-unit));
  z-index: 2;
}
.figure03 {
  width: calc(422 * var(--vw-unit));
  margin-bottom: calc(37 * var(--vw-unit));
}
.figure04 {
  width: calc(353 * var(--vw-unit));
  margin-left: calc(156 * var(--vw-unit));
  margin-bottom: calc(-156 * var(--vw-unit));
}
.figure05 {
  width: calc(264 * var(--vw-unit));
  margin-bottom: calc(-33 * var(--vw-unit));
}
.figure06 {
  width: calc(599 * var(--vw-unit));
  margin-left: calc(-72 * var(--vw-unit));
  margin-bottom: calc(-432 * var(--vw-unit));
}
.figure07 {
  width: 100%;
  margin-bottom: calc(42 * var(--vw-unit));
}
.figure08 {
  width: 100%;
  margin-bottom: calc(147 * var(--vw-unit));
}

/* =========================================================
動画
========================================================= */
.main-movie {
  width: calc(330 * var(--vw-unit));
  video {
    width: 100%;
    height: auto;
    vertical-align: top;
  }
}

.movies {
  width: calc(610 * var(--vw-unit));
  display: flex;
  margin-bottom: calc(82 * var(--vw-unit));
  flex-direction: column;
  align-items: center;
  align-self: center;
}

.movie {
  width: calc(444 * var(--vw-unit));
  display: flex;
  flex-direction: column;
  gap: calc(17 * var(--vw-unit));

  video {
    width: 100%;
    height: auto;
    vertical-align: top;
  }
  & + .movie {
    margin-top: calc(39 * var(--vw-unit));
  }
}

.movie-meta {
  display: flex;
  gap: 0 calc(18 * var(--vw-unit));
}

.movie-title {
  width: calc(157 * var(--vw-unit));
  margin-bottom: calc(50 * var(--vw-unit));
}

.movie-heading {
  width: 4em;
  font-size: calc(14 * var(--vw-unit));
  font-family: var(--lexia);
  font-weight: 300;
  letter-spacing: 0.09em;
  line-height: 1.7;
}

.movie-text {
  font-size: calc(11 * var(--vw-unit));
  font-family: var(--lexia);
  font-weight: 300;
  letter-spacing: 0.01em;
  line-height: 1.67;
  margin: 0;
  width: fit-content;
}

/* =========================================================
スライド
========================================================= */
.slick-slide {
  & > div {
    display: flex;
  }
}

/* =========================================================
ダウンロードリンク
========================================================= */
.download {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: calc(101 * var(--vw-unit));

  * {
    font-family: var(--lexia);
    font-weight: 300;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
  }
}

.download-images {
  width: 100%;
}
.download-image {
  position: relative;
}
.download-image01 {
  width: calc(422 * var(--vw-unit));
  position: relative;
}
.download-image02 {
  width: calc(320 * var(--vw-unit));
  margin-top: calc(-234 * var(--vw-unit));
  margin-left: calc(174 * var(--vw-unit));
}
.download-image03 {
  width: calc(264 * var(--vw-unit));
  margin-top: calc(-364 * var(--vw-unit));
  margin-left: calc(169 * var(--vw-unit));
}
.download-image04 {
  width: calc(416 * var(--vw-unit));
  margin-top: calc(-280 * var(--vw-unit));
  margin-left: calc(-90 * var(--vw-unit));
  margin-bottom: calc(10 * var(--vw-unit));
}

.download-heading {
  font-size: calc(16 * var(--vw-unit));
  margin-top: calc(5 * var(--vw-unit));
}
.download-link {
  margin-top: calc(11 * var(--vw-unit));
  display: flex;
  gap: 0 calc(14 * var(--vw-unit));
  align-items: center;
  cursor: pointer;
}
.dowload-arrow {
  font-family: var(--aktiv);
  font-size: calc(9 * var(--vw-unit));
}
.dowload-text {
  font-size: calc(14 * var(--vw-unit));
  text-decoration: underline;
}

/* =========================================================
スタッフクレジット
========================================================= */
.staff-credits {
  display: flex;
  gap: 0 calc(62 * var(--vw-unit));
  align-self: center;
  font-size: calc(13 * var(--vw-unit));
  font-family: var(--lexia);
  font-weight: 300;
  letter-spacing: 0.1em;
  line-height: 1.28;
  text-transform: uppercase;
  margin-bottom: calc(181 * var(--vw-unit));
}
.staff-credit {
  display: flex;
  flex-direction: column;
  gap: calc(46 * var(--vw-unit)) 0;
}
.staff-group {
  display: flex;
  flex-direction: column;
  gap: calc(17 * var(--vw-unit)) 0;
}

.staff {
  margin: 0;
}
.staff-gap {
  display: flex;
  flex-direction: column;
  gap: calc(5 * var(--vw-unit)) 0;
}

.staff-small-text {
  font-size: calc(11 * var(--vw-unit));
  text-transform: none;
  letter-spacing: 0.1em;
}

/* =========================================================
モーダル
========================================================= */
.modal::-webkit-scrollbar {
  display: none;
}

.modal {
  scrollbar-width: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  z-index: 200;
  flex-direction: column;
  align-items: center;
  background-color: #ededed;
  opacity: 0;
  pointer-events: none;
  transition: 0.1s;
  overflow: auto;
  &.active {
    opacity: 1;
    pointer-events: all;
  }
}

.modal-content {
  padding-top: calc(208 * var(--vw-unit-modal));
  padding-bottom: calc(208 * var(--vw-unit-modal));
  background-color: #ededed;
  position: relative;
}
.modal-close {
  z-index: 300;
  position: fixed;
  width: calc(80 * var(--vw-unit-modal));
  height: calc(80 * var(--vw-unit-modal));
  display: grid;
  place-items: center;
  top: 0;
  right: 0;
  cursor: pointer;
  img {
    width: calc(22 * var(--vw-unit-modal));
  }
}

.modal-heading {
  text-align: center;
  font-size: calc(25 * var(--vw-unit-modal));
  font-family: var(--lexia);
  font-weight: 300;
  letter-spacing: 0.1em;
  margin-bottom: calc(107 * var(--vw-unit-modal));
  text-transform: uppercase;
}
.poster-images {
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* 各イメージ */
.poster-image {
  position: relative;
  > a {
    display: block;
  }
}

.poster-image01 {
  width: calc(590 * var(--vw-unit-modal));
  align-self: center;
}
.poster-image02 {
  width: calc(590 * var(--vw-unit-modal));
  align-self: center;
  margin-top: calc(129 * var(--vw-unit-modal));
}
.poster-image03 {
  width: calc(422 * var(--vw-unit-modal));
  margin-top: calc(117 * var(--vw-unit-modal));
  margin-left: calc(60 * var(--vw-unit-modal));
}
.poster-image04 {
  width: calc(496 * var(--vw-unit-modal));
  margin-top: calc(29 * var(--vw-unit-modal));
  margin-left: calc(232 * var(--vw-unit-modal));
}
.poster-image05 {
  width: calc(590 * var(--vw-unit-modal));
  margin-top: calc(88 * var(--vw-unit-modal));
  align-self: center;
}
.poster-image06 {
  width: calc(750 * var(--vw-unit-modal));
  margin-top: calc(101 * var(--vw-unit-modal));
  z-index: 2;
}
.poster-image07 {
  width: calc(542 * var(--vw-unit-modal));
  margin-top: calc(-23 * var(--vw-unit-modal));
  margin-left: calc(172 * var(--vw-unit-modal));
}

/* テキスト */
.poster-meta {
  font-size: calc(23 * var(--vw-unit-modal));
  font-family: var(--lexia);
  font-weight: 300;
  letter-spacing: 0.1em;
}

.poster-image01,
.poster-image02,
.poster-image05 {
  .poster-meta {
    margin-top: calc(29 * var(--vw-unit-modal));
    display: flex;
    justify-content: space-between;
  }
}

.poster-image03 {
  .poster-meta {
    position: absolute;
    bottom: calc(60 * var(--vw-unit-modal));
    right: calc(-179 * var(--vw-unit-modal));
  }
}

.poster-image04 {
  .poster-meta {
    position: absolute;
    bottom: calc(143 * var(--vw-unit-modal));
    left: calc(-103 * var(--vw-unit-modal));
  }
}

.poster-image06 {
  .poster-meta {
    position: absolute;
    bottom: calc(-2 * var(--vw-unit-modal));
    left: calc(70 * var(--vw-unit-modal));
  }
}

.poster-image07 {
  .poster-meta {
    position: absolute;
    bottom: calc(26 * var(--vw-unit-modal));
    right: calc(31 * var(--vw-unit-modal));
  }
}

.poster-name {
  text-transform: uppercase;
  span {
    font-size: calc(20 * var(--vw-unit-modal));
  }
}

.poster-link {
  text-decoration: underline;
  transition: 0.3s;
  &:hover {
    opacity: 0.6;
  }
}