@charset "utf-8";

/* test IMG */
.s-safety_assist__bgfull {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url('../../IMAGES/safety_assist/safetyAssist/_bg_1.jpg');
  opacity: 0.5;
}

.p-safety .s-utility__2 .s-utility__bgfull {
  background-image: url('../../IMAGES/safety_assist/safetyAssist/_bg_2.jpg');

}
.p-safety .s-accessories-modal__title{
  text-align: left;

}
/* test IMG */

#safetyAssist {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.p-safety .s-global__popup_comment{
  color: #fff;
  margin-top: 1vw;
}


/* header */
#safetyAssist .header {
  display: flex;
  align-items: flex-end;
  height: 7.4vw;
  padding-bottom: 1vw;
  padding-left: 4.61vw;
  font-size: 1.5vw;
  letter-spacing: 0.08em;
}

#safetyAssist .description {
  font-size: 1vw;
  line-height: 1.6;
  letter-spacing: 0.06em;
  padding-bottom: 2.1vw;
  padding-left: 4.61vw;
  padding-right: 4.61vw;
}

#safetyAssist .footer {
  padding-left: 4.61vw;
  padding-right: 4.61vw;
  padding-top: 1.2vw;
}

#safetyAssist .footer .s-global__blank_text_link p {
  color: #000000;
}

#safetyAssist .functions {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1480 / 980;
  background-image: url(../../IMAGES/safety_assist/safetyAssist/bg.webp);
  background-repeat: no-repeat;
  background-size: contain;
  margin-top: 0.5vw;
}

#safetyAssist .animetion-container {
  position: absolute;
  top: 10vw;
  left: 17vw;
  width: 32.66vw;
  height: 22.28vw;
}

#safetyAssist .function-icon {
  position: relative;
  margin: 0 auto;
}

#safetyAssist .function-icon._animetion {
  position: absolute;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

#safetyAssist .function-icon._animetion._open {
  opacity: 1;
}

#safetyAssist .function-icon._animetion._icon1 {
  top: -1.2vw;
  left: 15.34vw;
}

#safetyAssist .function-icon._animetion._icon2 {
  top: 0.6vw;
  left: 21.5vw;
}

#safetyAssist .function-icon._animetion._icon3 {
  top: 5.55vw;
  left: 26.92vw;
}

#safetyAssist .function-icon._animetion._icon4 {
  top: 12.3vw;
  left: 28.73vw;
}

#safetyAssist .function-icon._animetion._icon5 {
  top: 19.52vw;
  left: 26.3vw;
}

#safetyAssist .function-icon._animetion._icon6 {
  top: 24.86vw;
  left: 19.28vw;
}

#safetyAssist .function-icon._animetion._icon7 {
  top: 25.07vw;
  left: 10vw;
}

#safetyAssist .function-icon._animetion._icon8 {
  top: 19.5vw;
  left: 3.3vw;
}

#safetyAssist .function-icon._animetion._icon9 {
  top: 12vw;
  left: 1.06vw;
}

#safetyAssist .function-icon._animetion._icon10 {
  top: 5.6vw;
  left: 3.28vw;
}

#safetyAssist .function-icon._animetion._icon11 {
  top: 0.55vw;
  left: 8.25vw;
}


#safetyAssist .icon {
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  transform: translate(0, 0);
  cursor: pointer;
}

#safetyAssist .icon_inner {
  display: flex;
  position: relative;
}

#safetyAssist .icon_item {
  position: relative;
  width: 0.8vw;
  transition: transform 0.3s ease-in-out;
}

/* icon_image */
#safetyAssist .icon_image {
  position: relative;
  display: block;
  overflow: hidden;
  line-height: 0;
}

#safetyAssist .icon_image._animetion {
  width: 1.62vw;
  height: 1.62vw;
  transition: transform 0.3s;
}

#safetyAssist .icon_image img {
  width: 100%;
  height: 100%;
  line-height: 0;
}

/* icon_text */
#safetyAssist .icon_text {
  position: absolute;
  height: 2.68vw;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.9vw;
  line-height: 1.5;
  text-shadow: 2px 1px 2px #666;
  letter-spacing: 0.08vw;
}

#safetyAssist .icon_text._t1 {
  top: -1.68vw;
  left: -2.65vw;
  width: 9.16vw;
}

#safetyAssist .icon_text._t2 {
  top: 0vw;
  left: 2.6vw;
  width: 11.1vw;
}

#safetyAssist .icon_text._t3 {
  top: 0.2vw;
  left: 2.3vw;
  width: 8.81vw;
}

#safetyAssist .icon_text._t4 {
  top: -0.32vw;
  left: 2.2vw;
  width: 18.81vw;
}

#safetyAssist .icon_text._t5 {
  top: -1.4vw;
  left: 2.1vw;
  width: 21.75vw;
}

#safetyAssist .icon_text._t6 {
  top: -0.5vw;
  left: 2.76vw;
  width: 25.16vw;
}

#safetyAssist .icon_text._t7 {
  top: -0.6vw;
  left: -17vw;
  width: 15.63vw;
  text-align: right;
}

#safetyAssist .icon_text._t8 {
  top: -0.3vw;
  left: -12.2vw;
  width: 11.5vw;
  text-align: right;
}

#safetyAssist .icon_text._t9 {
  top: 0;
  left: -10.62vw;
  width: 9.97vw;
  text-align: right;
}

#safetyAssist .icon_text._t10 {
  top: -0.5vw;
  left: -13vw;
  width: 12.42vw;
  text-align: right;
}

#safetyAssist .icon_text._t11 {
  top: -1vw;
  left: -14vw;
  width: 13.31vw;
  text-align: right;
}



#safetyAssist .icon_text img {
  width: 100%;
  height: auto;
}

/* icon */
#safetyAssist .icon._detail {
  width: 6.84vw;
  height: 6.84vw;
  margin: 0 auto;
  border: solid 0.21vw #1eb9df;
  border-radius: 50%;
}

#safetyAssist .icon._function {
  position: absolute;
}

#safetyAssist .icon._function .icon_image {
  position: relative;
  overflow: visible;
}

#safetyAssist .icon._function .icon_image::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3.25vw;
  height: 3.25vw;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-image: url(../../IMAGES/safety_assist/safetyAssist/grow_hover.png);
  background-size: 100% 100%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.4s;
}

#safetyAssist .icon._function .icon_image img {
  position: relative;
  opacity: 0;
  animation-delay: 0s;
  animation-fill-mode: both;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

#safetyAssist .icon._function .icon_image img._animation {
  animation-name: loopIconDot;
}

#safetyAssist .icon._function._top .icon_text {
  flex: inherit;
}

#safetyAssist .icon._function:hover .icon_image::before {
  transform: translate(-50%, -50%) scale(1);
}

#safetyAssist .icon._function._active .icon_image::before {
  transform: translate(-50%, -50%) scale(1);
}



@-webkit-keyframes loopIconDot {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }

  50% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(0.8);
    opacity: 0;
  }
}

@keyframes loopIconDot {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }

  50% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(0.8);
    opacity: 0;
  }
}




.p-safety .s-utility__2 .s-utility__content1 .s-utility__bg {
  background-image: url('../../IMAGES/safety_assist/safetyAssist/img_02_01.webp');
  aspect-ratio: 740/365;
}

.p-safety .s-utility__2 .s-utility__content2 .s-utility-index__item_2 .s-utility__bg {
  background-image: url('../../IMAGES/safety_assist/safetyAssist/img_02_02.webp');
  aspect-ratio: 311/175;
  height: auto;
  position: initial;
}

.p-safety .s-utility__2 .s-utility__content2 .s-utility-index__item_3 .s-utility__bg {
  background-image: url('../../IMAGES/safety_assist/safetyAssist/img_02_03.webp');
  aspect-ratio: 311/175;
  height: auto;
  position: initial;
}

.p-safety .l-body .s-global__popup_area {
  padding-top: 2vw;
}

.s-global__popup_area .s-global__popup_lead {
  font-size: 1vw;
  margin-bottom: 0.6vw;
}

.p-safety .l-body .s-utility-index__item_1 .s-global__blank_text_link {
  align-items: center;
}

.p-safety .l-body .s-utility-index__item_1 .s-global__blank_text_link .white_text {
  color: #fff;
}

.p-safety .s-utility__2 .s-utility-index__item_1 {
  position: absolute;
  right: 4.5vw;
  top: 26.5vw;
}
.p-safety [data-component-id="package-modal1"].c-modal  .s-global__popup_title {
    margin: 1vw 0 0vw 0;
}
.p-safety [data-component-id="package-modal1"].c-modal  .s-global__popup_lead {
    margin-top: 0.7vw;
    margin-bottom: 0.3vw;
}
.p-safety [data-component-id="package-modal1"].c-modal  .swiper-slide .s-modal-movie__content{
    margin-top: 0vw;
    padding-top: 0;

}
.p-safety [data-component-id="package-modal1"].c-modal  .swiper-slide:nth-child(1) .s-modal-movie__content .s-global__popup_title{
    margin-top: 0.5vw;


}
@media screen and (max-width: 700px) {


  .is-wide .l-main__item {
    width: 100%;
  }

  .l-main__content {
    width: 100%;
  }

  #safetyAssist .animetion-container {
    top: 17vw;
    left: 33vw;
    width: 42.66vw;
    height: 29.28vw;
  }
}



@media screen and (max-width: 700px) {

  .is-wide .l-main__item {
    width: 100%;
  }

  .l-main__content {
    width: 100%;
  }

  #safetyAssist .animetion-container {
    top: 17vw;
    left: 33vw;
    width: 42.66vw;
    height: 29.28vw;
  }

  #safetyAssist .header {
    height: 11vw;
    padding-bottom: 1.6vw;
    padding-left: 6.7vw;
    font-size: 2.2vw;
    letter-spacing: 0.1em;
  }

  #safetyAssist .description {
    font-size: 1.35vw;
    line-height: 1.8;
    letter-spacing: 0.06em;
    padding-bottom: 3vw;
    padding-left: 6.7vw;
    padding-right: 4.61vw;
  }

  #safetyAssist .animetion-container {
    top: 13.8vw;
    left: 30.9vw;
    width: 54.6vw;
    height: 35.5vw;
  }

  /* icon_image */
  #safetyAssist .icon_image {
    position: relative;
    display: block;
    overflow: hidden;
    line-height: 0;
  }

  #safetyAssist .icon_image._animetion {
    width: 2.36vw;
    height: 2.36vw;
    transition: transform 0.3s;
  }

  #safetyAssist .icon_image img {
    width: 100%;
    height: 100%;
    line-height: 0;
  }

  /* icon_text */
  #safetyAssist .icon_text {
    position: absolute;
    height: 3.9vw;
  }

  #safetyAssist .icon_text img {
    width: 100%;
    height: auto;
  }

  /* icon */
  #safetyAssist .icon._detail {
    width: 6.84vw;
    height: 6.84vw;
    margin: 0 auto;
    border: solid 0.21vw #1eb9df;
    border-radius: 50%;
  }

  #safetyAssist .icon._function {
    position: absolute;
  }

  #safetyAssist .icon._function .icon_image {
    position: relative;
    overflow: visible;
  }

  #safetyAssist .icon._function .icon_image::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3.25vw;
    height: 3.25vw;
  }

  #safetyAssist .icon._function .icon_image img {
    position: relative;
    opacity: 0;
    animation-delay: 0s;
    animation-fill-mode: both;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
  }

  #safetyAssist .icon._function .icon_image img._animation {
    animation-name: loopIconDot;
  }

  #safetyAssist .icon._function._top .icon_text {
    flex: inherit;
  }

  #safetyAssist .icon._function:hover .icon_image::before {
    transform: translate(-50%, -50%) scale(1);
  }

  #safetyAssist .icon._function._active .icon_image::before {
    transform: translate(-50%, -50%) scale(1);
  }



  #safetyAssist .function-icon._animetion._icon1 {
    top: -1.2vw;
    left: 15.34vw;
  }

  #safetyAssist .function-icon._animetion._icon2 {
    top: 1.6vw;
    left: 25.5vw;
  }

  #safetyAssist .function-icon._animetion._icon3 {
    top: 9vw;
    left: 32.92vw;
  }

  #safetyAssist .function-icon._animetion._icon4 {
    top: 19vw;
    left: 35.73vw;
  }

  #safetyAssist .function-icon._animetion._icon5 {
    top: 29.52vw;
    left: 32.3vw;
  }

  #safetyAssist .function-icon._animetion._icon6 {
    top: 37.3vw;
    left: 22.28vw;
  }

  #safetyAssist .function-icon._animetion._icon7 {
    top: 37.5vw;
    left: 8.2vw;
  }

  #safetyAssist .function-icon._animetion._icon8 {
    top: 29.5vw;
    left: -1vw;
  }

  #safetyAssist .function-icon._animetion._icon9 {
    top: 19vw;
    left: -3.94vw;
  }

  #safetyAssist .function-icon._animetion._icon10 {
    top: 8.8vw;
    left: -1.2vw;
  }

  #safetyAssist .function-icon._animetion._icon11 {
    top: 1.55vw;
    left: 6.25vw;
  }

  #safetyAssist .icon_text {
    font-size: 1.25vw;
  }

  #safetyAssist .icon_text._t1 {
    top: -1.9vw;
    left: -2.65vw;
    width: 15vw;
  }

  #safetyAssist .icon_text._t2 {
    top: 0.3vw;
    left: 3vw;
    width: 15vw;
  }

  #safetyAssist .icon_text._t3 {
    top: 0.2vw;
    left: 3.7vw;
    width: 15vw;
  }

  #safetyAssist .icon_text._t4 {
    top: -0.5vw;
    left: 3.2vw;
    width: 25vw;
  }

  #safetyAssist .icon_text._t5 {
    top: -2.2vw;
    left: 3.4vw;
    width: 35vw;
  }

  #safetyAssist .icon_text._t6 {
    top: -0.5vw;
    left: 4vw;
    width: 50vw;
  }

  #safetyAssist .icon_text._t7 {
    top: -0.6vw;
    left: -26.4vw;
    width: 25vw;
  }

  #safetyAssist .icon_text._t8 {
    top: -0.6vw;
    left: -26.8vw;
    width: 25vw;
  }

  #safetyAssist .icon_text._t9 {
    top: -0.8vw;
    left: -26.2vw;
    width: 25vw;
  }

  #safetyAssist .icon_text._t10 {
    top: -0.5vw;
    left: -26vw;
    width: 25vw;
  }

  #safetyAssist .icon_text._t11 {
    top: -1.5vw;
    left: -26vw;
    width: 25vw;
  }

.p-safety .s-utility__2 .s-utility-index__item_1 {
    position: absolute;
    right: 6.5vw;
    top: 39vw;
}

  .p-safety .l-body .s-utility-index__item_1 .s-global__blank_text_link {
    font-size: 1.4vw;
    align-items: center;
  }
  .p-safety .s-utility__2 .s-utility__content2 {
    padding: 5.5vw 6.62vw 6.62vw 6.62vw;

}
 .p-safety .s-utility__2 .s-global__blank_text_link {

    margin-top: 2.4vw;

}.s-global__popup_area .s-global__popup_lead {
    font-size: 1.6vw;
    margin-bottom: 0.6vw;
}
.p-safety.c-modal.c-modal__alpha-88 .c-modal__close {
   top: -6vw;
}
}