/* -----------------------
  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, 162px);
  height: min(23.75vw, 178px);
  background: url(../img/safety_design_ttl_icon_01.png) no-repeat center / contain;
  bottom: min(5.21vw, 39px);
  left: min(5.21vw, 39px);
  transform-origin: 80% 80%;
}
.safety .design .ttl::after {
  width: min(17.5vw, 131px);
  height: min(17.92vw, 134px);
  animation-direction: reverse;
  background: url(../img/safety_design_ttl_icon_02.png) no-repeat center / contain;
  bottom: min(6.25vw, 47px);
  right: min(9.38vw, 70px);
}

.safety .design .img-box {
  margin-top: max(-6.4vw, -48px);
}
.safety .design .img-box p:last-child {
  z-index: 2;
}


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

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

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

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

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

.safety .movie-area .movie-play-btn {
  position: absolute;
  top: min(45.63vw, 342px);
  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, 203px);
  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, 311px);
  right: 0;
}


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