/*---------------------ここから SVGアニメーション ----------------------*/

@import url('https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c');



#drawing {

    /*
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
*/
}



tspan {

    stroke-width: 0.1;
    /*stroke: #e600ff;*/
    stroke:#f33;
    fill: #7fffd4;
    font-size: 60px;
}


.plus_ani_style{
    animation:anim 3s ease-in 0s forwards;
    stroke-dasharray: 1240px; 
    stroke-dashoffset: 1240px;
    font-family: 'M PLUS Rounded 1c';
}

input[type=text] {
    width: 100%;
  font-family: 'Inconsolata';
  font-size: 14px;
  outline: none;
  color: #666;
}





.start_ani{
    animation:anim 3s ease-in 0s forwards;
    stroke:#dddddd;
  }
    @keyframes anim{
    0%{stroke-width: 2px; /*stroke-dashoffset:150px;stroke-dasharray: 150px;*/}
    100%{stroke-dashoffset:0px;  fill:#00bfff; stroke:#fff; stroke-width: 1px; /*font-family: 'M PLUS Rounded 1c';*/}
    }

    /*---------------------ここまで SVGアニメーション ----------------------*/

.chara_wakeup{
    /*animation:wakeup 0.8s ease-in 0s forwards;*/
    animation:wakeup .8s ease-in 0s forwards;
    stroke:#dddddd;
  }
    @keyframes wakeup{
    0%{transform:rotateX(80deg) scale(0.5); opacity:0; /*stroke-dashoffset:150px;stroke-dasharray: 150px;*/}
    100%{transform:rotateX(0deg) scale(1); opacity:1; /*font-family: 'M PLUS Rounded 1c';*/}
    }








/* 吹き出し本体 */
.balloon2{
    position: relative;
    padding: 20px;
    border-radius: 10px;
    color: #ffffff;
    background-color: #0888ff;
   /* margin-right: 110px;  */        /* 右に余白を設ける */
   margin-right:1rem;
   margin-top:1rem;
  }
  /* 画像 - 絶対配置で右上に配置 */
  .balloon2 .icon{
    position: absolute;
    /*right: -110px;*/
    right: -3.5rem;
    top: 1rem;
    top: 0;
  }
  /* 三角アイコン */
  .balloon2::before{
    content: '';
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    right: -15px;
    top: 20px;
    border-left: 15px solid #0888ff;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
  }




.balloon_parent{
    width: 300px;
    right: 7rem;
    position: absolute;
}

.flash{
    animation: flash 1s linear infinite;
}

@keyframes flash {
    0% {
      opacity: 1;
    }
  
    50% {
      opacity: 0;
    }
} 





.jaga_to_front{
    /* animation: jaga2front 2s linear ;*/
    animation-name: jaga2front;
    animation-timing-function:ease-in;
    animation-duration: 5s;
    animation-delay: 0.5s;
     animation-fill-mode: forwards;
  }
@keyframes jaga2front {
    
       
        
}

@keyframes __jaga2front {
    0% {
        transform: translate(0px, 0);
    }
  
    50%{
        /*
        margin-top:20vh;
        margin-right:30vw;
        */
      }  

    100% {
       /* left:48vw;*/
        transform: translate(-40vw, 48vh);
       /*
        margin-top:48vh;
        margin-right:40vw;
        */
    }
}