@charset "UTF-8";
/*====================================================*/
/* TOP アニメーション */
/*====================================================*/
.mv-container {
    position: relative;
}
.animation {
    position: absolute;
    z-index: -5;
}

/*====================================================*/
/* TOP SPアニメーション */
/*====================================================*/
.animation {
    top: 10%;
    transform: translateY(-10%);
    -webkit-transform: translateY(-10%);
}
#sp_anime {
    width: 100%;
}
.sp.cls-1 {
    fill: none;
    stroke: #444;
    stroke-miterlimit: 10;
    stroke-width: .5px;
}
@-webkit-keyframes animate-svg-stroke-1 {
    0% {
      stroke-dashoffset: 850.459228515625px;
      stroke-dasharray: 850.459228515625px;
    }
  
    100% {
      stroke-dashoffset: 0;
      stroke-dasharray: 850.459228515625px;
    }
}
@keyframes animate-svg-stroke-1 {
    0% {
      stroke-dashoffset: 850.459228515625px;
      stroke-dasharray: 850.459228515625px;
    }
  
    100% {
      stroke-dashoffset: 0;
      stroke-dasharray: 850.459228515625px;
    }
}
.sp.svg-elem-1 {
    -webkit-animation: animate-svg-stroke-1 3s linear 1s both;
    animation: animate-svg-stroke-1 3s linear 1s both;
}
  
@media print,screen and (max-width: 1024px){
    #pc_anime {
        display: none;
    }
}

/*====================================================*/
/* TOP PCアニメーション */
/*====================================================*/
@media print,screen and (min-width: 1025px){
    .animation {
        top: 50%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
    }
    #sp_anime {
        display: none;
    }
    svg#pc_anime {
        width: 100%;
    }
    .pc.cls-1 {
        fill: none;
        stroke: #444;
        stroke-miterlimit: 10;
        stroke-width: .5px;
    }
    @-webkit-keyframes animate-svg-stroke-1 {
        0% {
        stroke-dashoffset: 1540.02587890625px;
        stroke-dasharray: 1540.02587890625px;
        }
    
        100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 1540.02587890625px;
        }
    }
    @keyframes animate-svg-stroke-1 {
        0% {
        stroke-dashoffset: 1540.02587890625px;
        stroke-dasharray: 1540.02587890625px;
        }
    
        100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 1540.02587890625px;
        }
    }
    .pc.svg-elem-1 {
        -webkit-animation: animate-svg-stroke-1 4s cubic-bezier(0.39, 0.575, 0.565, 1) 0s both;
        animation: animate-svg-stroke-1 4s cubic-bezier(0.39, 0.575, 0.565, 1) 0s both;
    }
}