@charset "utf-8";



/*==================================================
枠線が伸びて出現 2 タイトル用
===================================*/

/*枠線が伸びて出現*/

.lineTriggerTitle{
    position: relative; /* 枠線が書かれる基点*/
    opacity:0;
  }
  
  .lineTriggerTitle.lineanime2{
    animation-name:lineAnimeBase2;
    animation-duration:1s;
    animation-fill-mode:forwards;
  }
  
  @keyframes lineAnimeBase2{
    from {
      opacity:0;
    }
  
    to {
      opacity:1;  
  }
  }
  
  /*上下線*/
  .lineTriggerTitle::before,
  .lineTriggerTitle::after{
    position: absolute;
    content:"";
    width:0;
    height:5px;
    background:#fff;/* 枠線の色*/
  }
  
  /*上線*/
  .lineTriggerTitle::before {
    top:0;
    left:0;
  }
  
  .lineTriggerTitle.lineanime2::before {
    animation: lineAnime2 .5s ease-out 0s forwards;/*表示されて0秒後に上線が0.5秒かけて表示*/
  }
  
  
  
  /*下線*/
  .lineTriggerTitle::after { 
    bottom:0;
    right:0;
  }
  
  .lineTriggerTitle.lineanime2::after {
    animation: lineAnime2 .5s ease-out 1s forwards;/*表示されて1秒後に下線が.5秒かけて表示*/
  }
  
  
  @keyframes lineAnime2 {
    0% {width:0%;}
    100%{width:100%;
  }
  }
  
  
  /*枠線内側の要素*/
  
  .lineTriggerTitle.lineanime2 .lineinappear2{
    animation: lineInnerAnime2 .8s linear 1.5s forwards;/*1.5秒後に中央のエリアが0.8秒かけて表示*/
    opacity: 0;/*初期値を透過0にする*/ 
  }
  
  @keyframes lineInnerAnime2{
    0% {opacity:0;}
    100% {opacity:1;}
  }
  
  /*==================================================
  END 枠線が伸びて出現 2
  ===================================*/
  
  
  
  
  /*==================================================
  枠線が伸びて出現 3 タイトル　画像の下部用
  ===================================*/
  
  /*枠線が伸びて出現*/
  
  .lineTriggerTitle3{
    position: relative; /* 枠線が書かれる基点*/
    opacity:0;
    background-color:#2e4a6eb8;
  }
  
  .lineTriggerTitle3.lineanime3{
    animation-name:lineAnimeBase3;
    animation-duration:1s;
    animation-fill-mode:forwards;
  }
  
  @keyframes lineAnimeBase3{
    from {
      opacity:0;
    }
  
    to {
      opacity:1;  
  }
  }
  
  /*上下線*/
  .lineTriggerTitle3::before,
  .lineTriggerTitle3::after{
    position: absolute;
    content:"";
    width:0;
    height:3px;
    background-color:var(--blue-color);/* 枠線の色*/
  }
  
  /*上線*/
  .lineTriggerTitle3::before {
    top:0;
    left:0;
  }
  
  .lineTriggerTitle3.lineanime3::before {
    animation: lineAnime2 .5s ease-out 0s forwards;/*表示されて0秒後に上線が0.5秒かけて表示*/
  }
  
  
  
  /*下線*/
  .lineTriggerTitle3::after { 
    bottom:0;
    right:0;
  }
  
  .lineTriggerTitle3.lineanime3::after {
    animation: lineAnime2 .5s ease-out 1s forwards;/*表示されて1秒後に下線が.5秒かけて表示*/
  }
  
  
  @keyframes lineAnime3 {
    0% {width:0%;}
    100%{width:100%;
  }
  }
  
  
  /*枠線内側の要素*/
  
  .lineTriggerTitle3.lineanime3 .lineinappear3{
  
    animation: lineInnerAnime3 .8s linear 1.5s forwards;/*1.5秒後に中央のエリアが0.8秒かけて表示*/
    opacity: 0;/*初期値を透過0にする*/ 
  }
  
  @keyframes lineInnerAnime3{
    0% {opacity:0;}
    100% {opacity:1;}
  }
  
  /*==================================================
  END 枠線が伸びて出現 3
  ===================================*/