@charset "UTF-8";
/* *** variables model *** */
/* radius */
/* *** common variables *** */
/* break point 
---------------------------------------------- */
/* hover style
---------------------------------------------- */
/* color
---------------------------------------------- */
/* *** ①One-Tone *** */
/* *** ②Two-Tone *** */
/* *** mixins *** */
/* break point */
/* hover */
/* -----------------------------------------------
  ① clamp関数
----------------------------------------------- */
/* --- 10px = 1rem --- */
/* -----------------------------------------------
  ② Y軸減少計算
----------------------------------------------- */
/* --- 画面を縮小させた際にコンテンツのY軸距離を広げる関数 --- */
.bev-contents {
  /* PCレイアウト */
}
@media (min-width: 769px) {
  .bev-contents {
    /* PCでも固定配置 */
  }
  .bev-contents #car {
    width: 80px;
    position: fixed;
    top: 40%; /* ★PCのクルマ固定位置（画面上部からの%） */
    left: 0;
    z-index: 100;
    pointer-events: none;
    will-change: transform;
    margin-left: -40px; /* 要素の中心を座標に合わせるためのネガティブマージン */
  }
  .bev-contents {
    /* PC道路デザイン */
  }
  .bev-contents .car-path-base {
    stroke: #E4E4E4;
    stroke-width: 80px;
  }
  .bev-contents .car-path-line {
    stroke: #fff;
    stroke-width: 5px;
    stroke-dasharray: 40 40;
  }
}
.bev-contents {
  /* SPレイアウト */
}
@media (max-width: 768px) {
  .bev-contents {
    /* SP時はクルマを画面上端に固定 */
  }
  .bev-contents #car {
    width: 45px;
    position: fixed !important; /* スクロールさせない */
    top: 35%; /* ★SPのクルマ固定位置 */
    left: 5%;
    margin-left: 24px; /* 道路幅48pxの半分 */
    transform: translateX(-50%);
    z-index: 100;
    pointer-events: none;
  }
  .bev-contents .balloon-container {
    width: 78px !important;
  }
  .bev-contents .car-path-base {
    stroke: #E4E4E4;
    stroke-width: 40px;
  }
  .bev-contents .car-path-line {
    stroke: #fff;
    stroke-width: 1px;
  }
}
.bev-contents {
  /* 道路共通スタイル */
}
.bev-contents .car-path-base, .bev-contents .car-path-line {
  fill: none;
  stroke-linecap: butt;
  stroke-linejoin: round;
}
.bev-contents .car-animation-area {
  position: relative;
  width: 100%;
}
.bev-contents .road-sp {
  display: block;
  background-image: url(/bev/factory/images/bg_road_sp.webp);
  background-position: top center;
  background-repeat: repeat-y;
  position: absolute;
  top: 0;
  left: 5%;
  width: 48px;
  height: 100%;
  z-index: 1;
}
.bev-contents #svg-canvas-pc {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.bev-contents #car {
  z-index: 5;
  opacity: 0;
  visibility: hidden; /* 初期チラつき防止 */
  transition: opacity 0.3s ease;
  line-height: 0;
}
.bev-contents #car.is-visible {
  opacity: 1;
  visibility: visible;
}
.bev-contents #car img.car-body {
  width: 100%;
  height: auto;
  display: block;
}
.bev-contents {
  /* 吹き出し設定 */
}
.bev-contents .balloon-container {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  pointer-events: none;
  margin-bottom: 5px;
}
.bev-contents .process-balloon {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scale(0);
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}
.bev-contents .process-balloon.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) scale(1);
  animation: balloonBounceDouble 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes balloonBounceDouble {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0) translateY(40px);
  }
  40% {
    opacity: 1;
    transform: translateX(-50%) scale(1.2) translateY(-20px);
  }
  60% {
    transform: translateX(-50%) scale(0.8) translateY(10px);
  }
  80% {
    transform: translateX(-50%) scale(1.1) translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) scale(1) translateY(0);
  }
}
.bev-contents {
  /* Gool! の表示 06完成検査のみ */
}
.bev-contents .process06 .content-gap.p-relative {
  position: relative;
}
.bev-contents .process06 .content-gap .goal-wrap {
  position: absolute;
  bottom: 0;
  z-index: 12;
}
@media (min-width: 769px) {
  .bev-contents .process06 .content-gap .goal-wrap {
    left: -20px;
    width: 120px;
  }
}
@media (max-width: 768px) {
  .bev-contents .process06 .content-gap .goal-wrap {
    left: -10px;
    width: 80px;
  }
}
.bev-contents .process06 .content-gap .goal-wrap img {
  display: block;
  transform-origin: center center;
  will-change: transform;
}/*# sourceMappingURL=vehicle_animation.css.map */