/*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: #000;
}

.fixed_icon_inner div:hover {
  opacity: 0.7;
}


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


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

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

#mainvisual {
  background: url(../images/main_bg.webp);
  background-size: 100% auto;
}

.mainvisual_title1.fadein--show {
  animation-delay: 1s !important;
}

.mainvisual_title1 {
  z-index: 2;
  width: 76%;
  top: 5%;
  left: 14%;
}

.mainvisual_title2 {
  z-index: 0;
}

.intro-nav {
  background: url(../images/bg_n-serise.webp) no-repeat left top;
  background-size: 100% auto;
  padding-top: 18%;
}
.intro-content {
    width: 90%;
  }

#tokuten,
.red-area {
  background: #e50020;
}



.tl_serise {
  width: 90%;
  margin: 0 auto;
}

@media screen and (min-width: 769px) {
  .intro-nav {
    padding-bottom: 15%;
  }

  .intro-content {
    width: 70%;
  }

  .tl_serise {
    width: 90%;
  }
}
.bg_zrv {
  background: #413b3c url(../images/bg_zrv.webp) repeat-x;
}
.bg_wrv {
  background: #b70019 url(../images/bg_wrv.webp) repeat-x;
}

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

.ancherlink {
  margin-bottom: 15vh;
}

.icon-plus {
  width: 10%;
  top: -1.5%;
  left: 45%;
  z-index: 10;
}

@media screen and (max-width: 768px) {
  #zrv.trimm,#wrv.trimm {
    width: 120%;
    left:-10%;
    margin: 0 auto;
  }

  .icon-plus {
    width: 10%;
    top: -20px;
    left: 45%;
  }
  .w80p.teaser {
    width: 70% !important;
  }
}

.bgColor--pink-stripe {
  background: #EAA1A8 url(../images/2_point_bg.webp);
}

.bgColor--brown {
  background: #ECE5DD;
}

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

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

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

.bgColor--nvane {
  background-color: #0064aa;
}

.bgColor--nvane2 {
  background-color: #cdebfb;
}

.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);
  }
}

.sensing {
  width: 15%;
}

.sensing-nbox {
  bottom: 25%;
  left: 26.5%;
}

.sensing-custom {
  bottom: 25%;
  left: 26.5%;
}

.sensing-joy {
  bottom: 25%;
  left: 27%;
}

.sensing-stepwgn-air {
  bottom: 23%;
  left: 38%;
}

.sensing-stepwgn-spada {
  bottom: 23%;
  left: 38%;
}

.sensing-stepwgn-premium {
  bottom: 29%;
  right: 4%;
}

.sensing-zrv {
  bottom: 22%;
  left: 32.5%;
}

.sensing-wrv {
  bottom: 19%;
  left: 36.5%;
}

.sensing-nvane {
  bottom: 30%;
  left: 19%;
}

.btn-ucar {
  width: 50%;
  bottom: 2.5%;
  left: 25%
}




.bg_info {
  background-image: url(../images/8_info_bg.webp);
  background-size: 100% auto;
  background-repeat: repeat-y;
}

@media screen and (min-width: 769px) {


  .cp1_sensing {
    width: 10.1%;
    top: 9.5%;
    left: 38.3%;
  }

}