/*base     ======================================
フォントや文字色、ベースカラーなど
=================================================*/

body {
  background: #eeeeee;
}


.wrap {
  position: relative;
  z-index: 1;
  overflow: hidden;
  margin: auto;
  max-width: 980px;
  filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.3));
}


/*layout   ======================================
header、footer、hamburger なども
=================================================*/

.header {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  background-color: #231815;
}

.footer_bg {
  margin: 0px auto 0;
  background: #222222;

}

@media screen and (min-width: 769px) {
  .fixed_icon {
    width: 70%;
    margin: auto;
  }
}

.fixed_icon_wrap {
  position: fixed;
  width: 100%;
  max-width: 100%;
  bottom: 0;
  left: 0;
  z-index: 8;
  background: #e70013;
}

.fixed_icon_inner div:hover {
  opacity: 0.7;
}


/*component =====================================
サイト内で何度も使いまわしたいもの(btnや各ブロックのタイトルなど)
=================================================*/

/*SPサイズのときのみ左右をトリミング*/
@media screen and (max-width: 768px) {
  .trimm {
    width: 130%;
    left: -15%;
    position: relative;
  }
}


/*カルーセル設定*/
 .splide__list {
   height: auto;   
}
#thumbnail-carousel .splide__list,
#thumbnail-carousel2 .splide__list,
#thumbnail-carousel3 .splide__list {
   justify-content: center;
   
}

#thumbnail-carousel .splide__track--nav>.splide__list>.splide__slide,
#thumbnail-carousel2 .splide__track--nav>.splide__list>.splide__slide {
    border: none!important;
    margin-right: 10px;
    width: 21% !important;
    height: auto !important;
    padding-top: 13.1%;
}

#thumbnail-carousel3 .splide__track--nav>.splide__list>.splide__slide {
    border: none!important;
    margin-right: 10px;
    width: 26% !important;
    height: auto !important;
    padding-top: 13.1%;
}

.splide__slide img {
  width: 100%;
  height: auto;
}

.splide__slide {
  opacity: 0.6;
}

.splide__slide:hover {
  opacity: 1;
  transition: 0.4s;
}

.splide__slide.is-active {
  opacity: 1;
}


.splide__arrow{
  background: #FFF;
  top:55%;
}

.splide__arrow img{
    width: 35px !important;
    height: 35px !important;
    max-width: 35px !important;
}


@media screen and (min-width: 769px) {
.splide__arrow img{
    width: 50px !important;
    height: 50px !important;
    max-width: 50px !important;
}
  }

  .btn--img2:hover,
a.btn--img2:hover{
  opacity: 1;
  transition: 0.4s;
}


/*contents  ======================================
各コンテンツごとの設定
=================================================*/

.sensing{
width: 11%;
  top: 67%;
  right: 19%;
}
.sensing_prelude{
width: 11%;
  top: 67%;
  right: 19%;
}

.bgColor--prelude{
  background: #000000;
}

.sensing_wrv{
width: 11%;
  top: 23%;
  right: 70%;
}

.sensing_zrv{
width: 11%;
  top: 44%;
  right: 70%;
}


.bgColor--smart{
  background: #dbdecb;
}

.bgColor--smart2{
  background: #fcdc0c;
}

.sensing_zrv{
width: 11%;
  top: 44%;
  right: 70%;
}

.sensing_n_box {
    width: 11%;
    top: 2.4%;
    right: 47.3%;
}

.sensing_fit{
  width: 11%;
    top: 0.9%;
    right: 44.9%;
}

.sensing_freed{
  width: 11%;
    top: 0.9%;
    right: 44.9%;
}

.sensing_stepwgn{
  width: 11%;
    top: 0.9%;
    right: 44.9%;
}

.bgColor--ev{
  background: #006ebb;
}

.bgColor--ev2{
  background: #fff;
}

.sensing_n_one_e{
  width: 11%;
    top: 1.8%;
    right: 69.5%;
}

.sensing_n_van_e{
  width: 11%;
    top: 1.8%;
    right: 69.5%;
}



.footer_caution {
  padding-top: 5%;
  padding-bottom: 35%;
}

@media screen and (min-width: 600px) {
.footer_caution {
  padding-top: 5%;
  padding-bottom: 200px;
}
}

.ancherlink {
  margin-bottom: 15vh;
}


/*表示のタイミングの調整*/
.fade_delay {
  animation-delay: 0.3s !important;
}

.fade_delay2 {
  animation-delay: 0.3s !important;
}

.fade_delay3 {
  animation-delay: 0.3s !important;
}

.video-frame {
  width: 80%;
  margin: auto;
}

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 の比率 (9 ÷ 16 = 0.5625) */
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 10px;
}

/* ---------- ショート動画サイズ調整 ---------- */
.shorts-embed {
  position: relative;
  width: 100%;
  max-width: 360px;
  /* 任意、スマホに合わせて調整 */
  aspect-ratio: 9 / 16;
  margin: 0 auto;
  /* 中央寄せ */
}

@media screen and (max-width: 768px) {
  .shorts-embed {
    width: 90%;
  }
}

.shorts-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* ---------- 画像ボタン ---------- */
.btn--img__hoverbig {
  transition: transform 0.3s ease;
  transform: scale(1);
  transition: 0.4s;
}

/* 表示時のボヨンアニメーション（表示後に少し遅れて） */
.btn--img__hoverbig--show {
  animation: big 0.6s 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  opacity: 1;
  /* 念のため */

}

@keyframes big {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

/* ホバー時のなめらかな拡大 */
.btn--img__hoverbig:hover {
  transform: scale(1.2) !important;
  transition: 0.4s;
}

/* 上下にクルッと回転するアニメーション */
.flipin--show {
  animation: flipin-rotate-x 0.4s ease-out forwards;
  transform-origin: bottom center;
}

@keyframes flipin-rotate-x {
  0% {
    opacity: 0;
    transform: perspective(600px) rotateX(-90deg) scale(0.8);
  }

  100% {
    opacity: 1;
    transform: perspective(600px) rotateX(0deg) scale(1);
  }
}