/*枠線が伸びて出現*/
.line{
    position: relative; /* 枠線が書かれる基点*/
  }
  
  /*上下線*/
  .line::before,
  .line::after{
    position: absolute;
    content:"";
    width:0;
    height:2px;
    background:#619b27;/* 枠線の色*/
  }
  
  /*左右線*/
  .line2::before,
  .line2::after{
    position: absolute;
    content:"";
    width: 1px;
    height:0;
    background:#619b27;/* 枠線の色*/
  }
  
  /*上線*/
  .line::before {
      top:0;
      left:0;
      animation: lineAnime .5s linear 0s forwards;/*表示されて0秒後に上線が0.5秒かけて表示*/
  }
  
  /*右線*/
  .line2::before{ 
      top:0;
      right:0;
      animation: lineAnime2 .5s linear .5s forwards;/*表示されて0.5秒後に右線が0.5秒かけて表示*/
  }
  
  /*下線*/
  .line::after { 
      bottom:0;
      right:0;
      animation: lineAnime .5s linear 1s forwards;/*表示されて1秒後に下線が0.5秒かけて表示*/
  }
  
  /*左線*/
  .line2::after{ 
      bottom:0;
      left:0;
      animation: lineAnime2 .5s linear 1.5s forwards;/*表示されて1.5秒後に左線が0.5秒かけて表示*/
  }
  
  @keyframes lineAnime {
      0% {width:0%;}
      100%{width:100%;}
  }
  
  @keyframes lineAnime2 {
      0% {height:0%;}
      100%{height:100%;}
  }
  
  /*枠線内側の要素*/
  .line .lineinappear{
      animation: lineInnerAnime .5s linear 1.5s forwards;/*1.5秒後に中央のエリアが0.5秒かけて表示*/
      opacity: 0;/*初期値を透過0にする*/	
  }
  
  @keyframes lineInnerAnime{
      0% {opacity:0;}
      100% {opacity:1;}
  }