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

body {
background: #00334E;
background: linear-gradient(90deg,rgba(0, 51, 78, 1) 0%, rgba(152, 202, 205, 1) 51%, rgba(0, 51, 78, 1) 100%);
}


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

a:hover {
  cursor: pointer;
}

a.btn--img img:hover,
.btn--img:hover{
 opacity: 0.7;
 transition: 0.3s;
}

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

.footer{
  padding-bottom: 3vh;
}
@media screen and (min-width: 769px) {
.footer{
  padding-bottom: 100px;
}
}

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

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

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

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

.video-container {
  position: relative;
  padding-bottom: 57.1%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 3px solid #006fbc;
  border-radius: 10px;
box-sizing: border-box;
}

/*contents  ======================================
各コンテンツごとの設定
=================================================*/
.mainvisual_title {
  width: 100%;
  top: 0%;
  left: 0%;
  height: auto;
}
.mainvisual_bg {
transform: scale(1);
}

.stepwgn2_movie_bg{
  background-image: url(../images/4_stepwgn2_movie_bg.webp);
  background-size: 100% 100%;
}
.bk_edition{
background: #072355;
background: linear-gradient(90deg,rgba(7, 35, 85, 1) 0%, rgba(9, 43, 100, 1) 100%);
}

.sensing {
  width: 8%;
  top: 80.2%;
  left: 66.6%;
}

.stepwgn .sensing {
    width: 10%;
    top: 23.2%;
    left: 20.9%;
}
.stepwgn .zancre {
    width: 26%;
    top: 94.8%;
    left: 54.5%;
}

.stepwgn2 .sensing {
      width: 10%;
    top: 22.1%;
    left: 20.9%;
}
.stepwgn2 .zancre {
    width: 26%;
    top: 94.8%;
    left: 54.5%;
}

.stepwgn3 .sensing {
  width: 10%;
    top: 19%;
    left: 20.7%;
}
.stepwgn3 .zancre {
    width: 26%;
    top: 93.8%;
    left: 54.5%;
}

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


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


/* 表示時のボヨンアニメーション（表示後に少し遅れて） */
.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);
  }
}