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

body {
  background: #d3eaf2;
}


.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: #004893;
}
.fixed_icon_inner div:hover {
  opacity: 0.7;
}
.fixed_icon_wrap .columns .column {
  width: calc(100% / 3);
}
@media screen and (min-width: 769px) {
  .fixed_icon_wrap .columns .column {
  width: calc(100% / 6);
}
}


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


/*SPサイズのときのみ左右をトリミング*/
@media screen and (max-width: 768px) {
.trimm{
  width: 130%;
  left: -15%;
  position: relative;
}
}
/*contents  ======================================
各コンテンツごとの設定
=================================================*/
.bgColor--darkblue {
  background:#004893;
}
#mainvisual {
  background: url(../images/1_mainvisual_bg.webp);
  background-size: 100% auto;
}
.mainvisual_title2.fadein--show {
  animation-delay: 1s !important;
}
.mainvisual_title1 {
  z-index: 2;
  width: 56%;
    top: 1%;
    left: 13%;
}
.mainvisual_title2 {
  z-index: 2;
  width: 90%;
  bottom: 3%;
  left:5%;;
}
.column3 {
  margin-right: 0 !important;
  width: calc(98% / 3) !important;
}
.bg--sokuno {
  background: #abdbe8 url(../images/sokunou_bg.webp) no-repeat;
  background-size: 100% auto;
}

.btn_shop {
  padding: 5% 0 3% 0;
}
.btn_shop a {
  width: 50%;
  margin: 0 auto;
}
#n-wgn .btn_shop {
  bottom:4.5%;
}
#n-one .btn_shop {
  bottom:4%;
}
#odyssey .btn_shop {
  bottom:4.5%;
}
#zrv .btn_shop {
  bottom:4.5%;
}

.footer_caution {
  padding-top: 5%;
  padding-bottom: 13%;
}
.footer {
  padding-bottom: 20%;
}
@media screen and (max-width: 768px) {
  .footer {
  padding-bottom: 35%;
}
}

.ancherlink {
  margin-bottom: 15vh;
}

.green-area {
  margin-top: 8%;
  background-color: #13B29D;
}
.icon-plus {
  width: 10%;
  top:-2%;
  left: 45%;
}
@media screen and (max-width: 768px) {
  .green-area {
  margin-top: 8%;
  background-color: #13B29D;
}
.icon-plus {
  width: 10%;
  top:-1.8%;
  left: 45%;
}
}
.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: 63%;
  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; /* 中央寄せ */
}

.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: 11.4%;
}
.sensing-nbox {
    width: 8%;
    top: 71%;
    left: 33.5%;
}
.sensing-nwgn {
        width: 8%;
    top: 64.6%;
    left: 54%;
}
.sensing-none {
        width: 8%;
    top: 63.4%;
    left: 54%;
}
.sensing-stepwgn {
        width: 8.3%;
    top: 8.2%;
    left: 23%
}
.sensing-odyssey {
         width: 8.3%;
        width: 8.3%;
    bottom: 27%;
    right: 34%;
}
.sensing-zrv {
       width: 8.3%;
    bottom: 31.5%;
    right: 38.7%;
}




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

  }