/* =================================================
  Layout / Container
================================================= */
.container {
  margin: 0 auto;
  width: min(750px, 100%);
  container-type: inline-size;
  container-name: page-container;
}

img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* =================================================
  PC時のみ 高さ固定（--h を使用）
================================================= */
@media (min-width: 768px) {
  img.js-mv-img,
  .mov > img,
  .rank5 > img,
  .rank4 > img,
  .rank3 > img,
  .rank2 > img,
  .rank1 > img,
  .message > img {
    height: calc(var(--h) * 1px);
  }
}

/* =================================================
  スマホ時：高さ固定解除（container query）
================================================= */
@supports (container-type: inline-size) {
  @container page-container (max-width: 767px) {
    img {
      height: auto;
    }
  }
}

/* container query 非対応ブラウザ用フォールバック */
@supports not (container-type: inline-size) {
  @media (max-width: 767px) {
    img {
      height: auto;
    }
  }
}

/* =================================================
  Section positioning
================================================= */
.mov,
.rank5,
.rank4,
.rank3,
.rank2,
.rank1,
.message {
  position: relative;
}

/* =================================================
  CTA
================================================= */
.cta {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  width: 79.6%;
  bottom: 6%;
}

.rank4 .cta {
  bottom: 9%;
}
.rank3 .cta {
  bottom: 7%;
}
.rank2 .cta {
  bottom: 4%;
}
.rank1 .cta {
  bottom: 0;
}
.message .cta {
  bottom: 19%;
}

/* =================================================
  Video
================================================= */
.video01,
.video02 {
  position: absolute;
  left: 50%;
  translate: -50% 0;
}

.video01 {
  bottom: 19%;
  width: 77%;
}

.video02 {
  bottom: 24%;
  width: 75.6%;
}

iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}

/* =================================================
  Message / Notes
================================================= */
.notes {
  position: absolute;
  left: 3%;
  bottom: 5%;
  font-size: 12px;
  line-height: 1.7;
  color: #000;
  text-align: left;
}

.notes p {
  padding-left: 1em;
  text-indent: -1em;
  margin: 0;
}

.notes p:last-child {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .notes {
    font-size: 16px;
  }
}