/* -----------------------
  safety
----------------------- */
.safety {
  background: url(../img/safety_bg.png) no-repeat center top / 100% auto;
}

.safety .grid-box {
  display: grid;
}
.safety .grid-box > * {
  grid-area: 1 / 1;
}

/* ---- design ---- */
.safety .design {
  background: url(../img/safety_design_bg.png) no-repeat center bottom / 100% auto;
}

.safety .design .ttl {
  position: relative;
}
.safety .design .ttl::before,
.safety .design .ttl::after {
  content: '';
  position: absolute;
  animation: kakukaku 1s steps(2, end) infinite;
}
.safety .design .ttl::before {
  width: min(21.67vw, 208px);
  height: min(23.75vw, 228px);
  background: url(../img/safety_design_ttl_icon_01.png) no-repeat center / contain;
  bottom: min(5.21vw, 50px);
  left: min(5.21vw, 50px);
  transform-origin: 80% 80%;
}
.safety .design .ttl::after {
  width: min(17.5vw, 168px);
  height: min(17.92vw, 172px);
  animation-direction: reverse;
  background: url(../img/safety_design_ttl_icon_02.png) no-repeat center / contain;
  bottom: min(6.25vw, 60px);
  right: min(9.38vw, 90px);
}

.safety .design .img-box p:last-child {
  z-index: 2;
}


/* ---- pass ---- */
.safety .pass {
  background: url(../img/safety_pass_bg.png) no-repeat center top / cover;
  margin-top: max(-13.54vw, -130px);
}

.safety .pass .marker {
  mix-blend-mode: multiply;
}

/* ---- comparison ---- */
.safety .comparison {
  background: url(../img/safety_comparison_bg.png) no-repeat center top / cover;
  padding-bottom: min(16.46vw, 158px);
}

/* ---- difference ---- */
.safety .difference {
  margin-top: max(-16.46vw, -158px);
  background: url(../img/safety_difference_bg_top.png) no-repeat center top min(16.46vw, 158px) / 100% auto;
}

.safety .movie-area {
  position: relative;
  margin-bottom: max(-12.08vw, -116px);
  z-index: 3;
}
.safety .movie-wrap {
  overflow: hidden;
  line-height: 0;
  width: 75.94%;
  height: min(66.77vw, 641px);
  position: absolute;
  top: min(45.63vw, 438px);
  left: min(12.29vw, 118px);
  border-radius: min(6.25vw, 60px);
}
.safety .movie-wrap .movie {
  max-width: 100%;
  height: auto;
  object-fit: cover;
  vertical-align: bottom;
}
.safety .movie-02 {
  border-top: min(1.04vw, 10px) solid #363834;
}

.safety .movie-area .movie-play-btn {
  position: absolute;
  top: min(45.63vw, 438px);
  left: 0;
}
.safety .movie-area .movie-play-btn img {
  max-width: 200%;
  width: 101%;
  height: 101%;
  margin-top: max(-0.1vw, -1px);
}
.safety .movie-area .txt-last {
  width: 100%;
  position: absolute;
  bottom: min(27.08vw, 260px);
  left: 0;
  animation: flash 1.5s ease-in-out infinite;
}

.safety .difference .icon-box {
  position: relative;
}
.safety .difference .icon-box .icon {
  display: block;
  position: absolute;
  bottom: min(41.46vw, 398px);
  right: 0;
}


@keyframes flash {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}