/* =========================
  フェードイン
========================= */
.fadeUp,
.fadeLeft,
.fadeRight,
.fadeIn,
.fadeBlur{
  opacity: 0;
  transition:
    opacity .6s ease,
    transform .6s ease,
    filter .6s ease;
  will-change: opacity, transform, filter;
}

/* 下から */
.fadeUp{
  transform: translateY(20px);
}

/* 左から */
.fadeLeft{
  transform: translateX(-30px);
}

/* 右から */
.fadeRight{
  transform: translateX(30px);
}

/* その場で */
.fadeIn{
  transform: translateY(0);
}

/* ぼかしながら */
.fadeBlur{
  filter: blur(10px);
  transform: translateY(10px);
}

/* 発火後 */
.fadeUp.active,
.fadeLeft.active,
.fadeRight.active,
.fadeIn.active,
.fadeBlur.active{
  opacity: 1;
  transform: translate(0, 0);
  filter: blur(0);
}
/* 遅延 */
.delay-1{transition-delay: 0s;}
.delay-2{transition-delay: .15s;}
.delay-3{transition-delay: .3s;}
.delay-4{transition-delay: .45s;}
.delay-5{transition-delay: .6s;}
.delay-6{transition-delay: .75s;}
.delay-8{transition-delay: 1.5s;}
.delay-9{transition-delay: 2.5s;}
.delay-10{transition-delay: 3s;}
.delay-11{transition-delay: 4.5s;}


/* ==================================================
  罫線アニメ
==================================================== */
.headline{
  text-align:center;
  overflow:hidden;
  width: 100vw;
  /* 画面中央に配置した上で、画面の左端まで引き延ばす */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 100px;
  margin-bottom: 5px;
  font-family: "Work Sans", sans-serif;
  font-optical-sizing: auto;
}

.line{
  width:100%;
  height:1px;
  background:#000;
  transform:scaleX(0);
  transform-origin:left center;
}

.top,
.bottom{
  opacity:0;
  transition:.6s;
  font-style: italic;
}

.top{
  transform:translateY(20px);
      font-size: 1.4rem;
    font-weight: 500;
        line-height: 1rem;
}

.bottom{
  transform:translateY(-20px);
  font-size: 4.2rem;
  font-weight: 100;
  line-height: 3.9rem;
}

/* 発火後 */

.headline.active .line{
  animation:lineAnime .8s ease forwards;
}

.headline.active .top{
  animation:textTop .6s ease .8s forwards;
}

.headline.active .bottom{
  animation:textBottom .6s ease .8s forwards;
}

@keyframes lineAnime{
  to{
    transform:scaleX(1);
  }
}

@keyframes textTop{
  to{
    opacity:1;
    transform:translateY(-0px);
  }
}

@keyframes textBottom{
  to{
    opacity:1;
    transform:translateY(0px);
  }
}

/* ====================================
   こんな場面で　　下に伸びる罫線アニメ
==================================== */

.flow-animation{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.flow-title,
.flow-subtitle{
  margin:0;
  font-size:1rem;
  font-weight:600;
  line-height:1.1;
  letter-spacing:.08em;
}

.flow-line-wrap{
  height:20px;
  margin:3px 0;
  display:flex;
  align-items:flex-start;
  justify-content:center;
}

.flow-line{
  width:1px;
  height:0;
  background:#000;
  border-radius:999px;
}

.flow-mask{
  overflow:hidden;
}

.flow-subtitle{
  transform:translateY(110%);
  border: 1px #000 solid;
  padding: 3px 10px 2px 10px;
}

/* =========================
   アニメーション開始
========================= */

.flow-animation.active .flow-line{
  animation:lineGrow .7s cubic-bezier(.22,1,.36,1) forwards;
}

.flow-animation.active .flow-subtitle{
  animation:textSlide .45s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay:.7s;
}

/* Keyframes*/

@keyframes lineGrow{
  from{height:0;}
  to{height:20px;}
}
@keyframes textSlide{
  from{transform:translateY(110%);}
  to{transform:translateY(0);}
}



/* ==================================================
  PCレイアウト（画面幅 768px 以上で適用）
==================================================== */
@media screen and (min-width: 768px) {
  .headline{
  margin-top: 100px;
  margin-bottom: 15px;
}

}