.mv{
    position: relative;
    aspect-ratio: 1580 / 872;
    background-image: url(../img/pc/mv/bg_img.png);
    background-size: cover;
    background-repeat: no-repeat;
  }
  
  
  .mv::before{
    content: "";
    position: absolute;
    width: 100%;
    height: 0;
    bottom: 0;
    left: 0;
    background: #B81C22;
    z-index: -1;
     transition: height 0.5s ease-out;
  }
  
  .mv__inner{
    height: 100%;
  }
  
  .mv__box{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100%;
  }
  
  .mv__top{
    width: calc((495 / 1580) * 100vw);
    transform: translate(-10px, 40px);
  }
  
  .mv__center{
    width: calc((607 / 1580) * 100vw);
  }
  
  .mv__bottom{
    width: calc((495 / 1580) * 100vw);
  }
  
  /* svgの動き(start) */
  .mv__center svg {
    max-width: 100%;
  }
  .mv__center svg .st0 {
    stroke-dasharray: 1000px;
    /* stroke: #B81C22; */
    stroke-width: 1px;
    animation: svgAnime 2s linear forwards;
  }
  
  @keyframes svgAnime {
      0% {
        stroke-dashoffset: 1000px;
        fill: transparent;
      }
      70% {
        stroke-dashoffset: 0px;
        fill: transparent;
      }
      99% {
        stroke-dashoffset: 0px;
        fill: #B81C22;
      }
      100% {
        stroke-dashoffset: 0px;
        fill: #B81C22;
      }
  }
  /* svgの動き (end)*/
  
  /* フェードアップアニメーション (start) */
  .mv__animation {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
  }
  
  .mv__animation.active {
    opacity: 1;
    transform: translateY(0);
  }
  /* フェードアップアニメーション (end) */
  
  
  /* 4秒後のcss */
  .mv.active{
    /* background-image: url(../img/pc/mv/hd_mv_bg.jpg); */
    background-size: cover;
    background-repeat: no-repeat;
    transition: transform 0.8s ease-out; 
  }
  
  .mv.active::before{
    height: 100%;
  }
  
  .mv.active .mv__center svg .st0{
    /* stroke: #fff; */
    fill: #fff!important;
  }
  
  .mv.active .mv__animation svg path{
    stroke: #FFF8F31A;
    fill: #FFF8F31A!important;
  }
  /* 4秒後のcss */
  
  /* 人アイコンcss */
  .mv__icon{
    opacity: 0;
    position: relative; 
  }
  
  .mv__icon img{
    display: block;
    width: 100%;
    height: 100%;
  }
  
  /* アイコン位置 */
  .mv__icon01{
    position: absolute;
    top: calc((100 / 1580) * 100vw);
    left: calc((220 / 1580) * 100vw);
    width: calc((274 / 1580) * 100vw);
  }
  
  /* .mv__off{
  opacity: 0;  
  }
  
  .mv__off.is-active{
    opacity: 1;
  }
   */
  .mv__on{
    position: absolute;
    top: 0;
    left: 0;
  }
  
  /* .mv__on.is-active{
    opacity: 1;
  }
   */
  @keyframes iconSwitcher {
    0%, 49% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
    51%, 100% {
      opacity: 0;
    }
  }
  
  .mv__icon .mv__off {
    animation: iconSwitcher 2.5s infinite;
  }
  
  .mv__icon .mv__on {
    animation: iconSwitcher 2.5s infinite reverse;
  }
  
  .mv__icon02{
    position: absolute;
    top: calc((40 / 1580) * 100vw);
    right: calc((309 / 1580) * 100vw);
    width: calc((225 / 1580) * 100vw);
  }
  
  .mv__icon03{
    position: absolute;
    bottom: calc((-50 / 1580) * 100vw);
    left: calc((14 / 1580) * 100vw);
    width: calc((523 / 1580) * 100vw);
  }
  
  .mv__icon04{
    position: absolute;
    top: calc((183 / 1580) * 100vw);
    right: 0;
    width: calc((435 / 1580) * 100vw);
  }
  
  .mv__icon05{
    position: absolute;
    bottom: calc((-50 / 1580) * 100vw);
    right: calc((350 / 1580) * 100vw);
    width: calc((270/ 1580) * 100vw);
  }
  
  .mv__circle{
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: calc((30 / 1580) * 100vw);
    width: calc((122 / 1580) * 100vw);
    height: calc((122 / 1580) * 100vw);
  }
  /* アイコン位置 */
  
  /* アイコンアニメーション */
  .mv__icon{
      opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
  }
  
  .mv__icon.add{
      opacity: 1;
    transform: translateY(0);
  }
  
  
  /* アイコンアニメーション */
  
  /* 人アイコンcss */
  
  /* サークルアニメーション */
  .mv__circle::before{
    background-image: url(../img/pc/mv/hd_scroll_arrow.svg);
    width: 40px;
    height: 56px;
  }
  
  
  /* 丸アイコンcss */
  .mv__items{
    opacity: 0;
  }
  
  .mv.active .mv__items{
    opacity: 1;
  }
  
  .mv__maru01 {
    position: absolute;
    top: calc((363 / 1580) * 100vw);
    left: calc((85 / 1580) * 100vw);
    width: calc((45 / 1580) * 100vw);
    height: calc((45 / 1580) * 100vw);;
  }
  
  .mv__maru02 {
    position: absolute;
    top: calc((345 / 1580) * 100vw);
    left: calc((133 / 1580) * 100vw);
      width: calc((20 / 1580) * 100vw);
    height: calc((20 / 1580) * 100vw);;
  }
  
  .mv__maru03 {
    position: absolute;
    top: calc((172 / 1580) * 100vw);
    left: calc((181 / 1580) * 100vw);
      width: calc((27 / 1580) * 100vw);
    height: calc((27 / 1580) * 100vw);;
  }
  
  .mv__maru04 {
    position: absolute;
    top: calc((484 / 1580) * 100vw);
    right: calc((395 / 1580) * 100vw);
      width: calc((35 / 1580) * 100vw);
    height: calc((35 / 1580) * 100vw);;
  }
  
  .mv__maru05 {
    position: absolute;
    bottom: calc((50 / 1580) * 100vw);
    right: calc((80 / 1580) * 100vw);
      width: calc((43 / 1580) * 100vw);
    height: calc((43 / 1580) * 100vw);;
  }
  
  .mv__maru06 {
    position: absolute;
    top: calc((20 / 1580) * 100vw);
    right: calc((506 / 1580) * 100vw);
      width: calc((16 / 1580) * 100vw);
    height: calc((16 / 1580) * 100vw);;
  }
  
  .mv__maru07 {
    position: absolute;
    top: calc((459 / 1580) * 100vw);
    right: calc((432 / 1580) * 100vw);
      width: calc((20 / 1580) * 100vw);
    height: calc((20 / 1580) * 100vw);;
  }
  
  
  /* 丸アイコンアニメーション */
  /* 上下にゆっくり */
  @keyframes float01 {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-20px); }
    100% { transform: translateY(0); }
  }
  
  /* 左右にゆらゆら */
  @keyframes float02 {
    0%   { transform: translateX(0); }
    50%  { transform: translateX(20px); }
    100% { transform: translateX(0); }
  }
  
  /* 斜めにふわふわ */
  @keyframes float03 {
    0%   { transform: translate(0,0); }
    25%  { transform: translate(15px,-15px); }
    50%  { transform: translate(0,-30px); }
    75%  { transform: translate(-15px,-15px); }
    100% { transform: translate(0,0); }
  }
  
  /* 回転しながら上下 */
  @keyframes float04 {
    0%   { transform: translateY(0) rotate(0deg); }
    50%  { transform: translateY(-25px) rotate(5deg); }
    100% { transform: translateY(0) rotate(0deg); }
  }
  
  /* 少し縮んだり膨らんだり */
  @keyframes float05 {
    0%   { transform: scale(1) translateY(0); }
    50%  { transform: scale(1.05) translateY(-15px); }
    100% { transform: scale(1) translateY(0); }
  }
  
  /* 左右＋回転 */
  @keyframes float06 {
    0%   { transform: translateX(0) rotate(0deg); }
    25%  { transform: translateX(10px) rotate(3deg); }
    50%  { transform: translateX(0) rotate(0deg); }
    75%  { transform: translateX(-10px) rotate(-3deg); }
    100% { transform: translateX(0) rotate(0deg); }
  }
  
  /* 大きな上下動＋ゆっくり */
  @keyframes float07 {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-40px); }
    100% { transform: translateY(0); }
  }
  
  .mv__maru01 {  animation: float01 4s ease-in-out infinite; }
  .mv__maru02 { animation: float02 5s ease-in-out infinite; }
  .mv__maru03 { animation: float03 6s ease-in-out infinite; }
  .mv__maru04 { animation: float04 7s ease-in-out infinite; }
  .mv__maru05 { animation: float05 6s ease-in-out infinite; }
  .mv__maru06 { animation: float06 5s ease-in-out infinite; }
  .mv__maru07 { animation: float07 8s ease-in-out infinite; }
  
  @media screen and (max-width: 768px) {
    .mv{
      /* aspect-ratio: unset;
      height: 100vh;
      margin: 0 auto; */
      aspect-ratio: 375 / 670;
      overflow-x: clip;
    }
  
    .mv.active{
      background-image: url(../img/sp/top/mv/mv_bg_img_sp.png);
    }
  
    .mv__top{
    width: calc((265 / 375) * 100vw);
    transform: translate(-10px, 40px);
  }
  
  .mv__center{
      width: calc((325 / 375) * 100vw);
  
  }
  
  .mv__bottom{
    width: calc((266 / 375) * 100vw);
  }
  
  .mv__icon01{
    position: absolute;
    top: calc((130 / 375) * 100vw);
    left: calc((0 / 375) * 100vw);
    width: calc((126 / 375) * 100vw);
  }
  
  .mv__icon02{
    position: absolute;
    top: calc((34 / 375) * 100vw);
    right: 0;
    width: calc((155 / 375) * 100vw);
  }
  
  .mv__icon03{
    position: absolute;
    bottom: calc((50 / 375) * 100vw);
    left: calc((-26 / 375) * 100vw);
    width: calc((194 / 375) * 100vw);
  }
  
  .mv__icon04{
    position: absolute;
    top: calc((332 / 375) * 100vw);
    right: calc((-15 / 375) * 100vw);
    width: calc((156 / 375) * 100vw);
  }
  
  .mv__icon05{
    position: absolute;
    bottom: 0;
    right: 0;
    width: calc((129/ 375) * 100vw);
  }
  
  .mv__circle{
      bottom: calc((20 / 375) * 100vw);
      width: calc((80 / 375) * 100vw);
      height: calc((80 / 375) * 100vw);
  }
  
  .mv__circle::before{
    width: 25px;
    height: 35px;
  }
  
  .mv__maru01 {
    position: absolute;
    bottom: calc((100 / 375) * 100vw);
    top: auto;
    left: calc((89 / 375) * 100vw);
    width: calc((11 / 375) * 100vw);
    height: calc((11 / 375) * 100vw);;
  }
  
  .mv__maru02 {
    position: absolute;
    top: auto;
    bottom: calc((70 / 375) * 100vw);
    left: calc((62 / 375) * 100vw);
    width: calc((12 / 375) * 100vw);
    height: calc((12 / 375) * 100vw);;
  }
  
  .mv__maru03 {
    position: absolute;
    top: calc((126 / 375) * 100vw);
    left: calc((102 / 375) * 100vw);
    width: calc((20 / 375) * 100vw);
    height: calc((20 / 375) * 100vw);;
  }
  
  .mv__maru04 {
    position: absolute;
    top: calc((129 / 375) * 100vw);
    bottom: auto;
    right: auto;
    left: calc((89 / 375) * 100vw);
      width: calc((15 / 375) * 100vw);
    height: calc((15 / 375) * 100vw);;
  }
  
  .mv__maru05 {
    position: absolute;
    bottom: calc((130 / 375) * 100vw);
    right: calc((33 / 375) * 100vw);
      width: calc((15 / 375) * 100vw);
    height: calc((15 / 375) * 100vw);;
  }
  
  .mv__maru06 {
    position: absolute;
    top: calc((215 / 375) * 100vw);
    right: calc((21 / 375) * 100vw);
    width: calc((14 / 375) * 100vw);
    height: calc((14 / 375) * 100vw);;
  }
  
  
  }
  
  .mv__message{
    text-align: center;
    background: #9C050B;
    color: #fff;
    line-height: 40px;
    font-size: 12px;
  }
  
  @media screen and (max-width: 768px) {
    .mv__message{
      line-height: 20px;
      font-size: 12px;
    }
  }