/* =========================
   キャッチコピー
========================= */

.catchcopy{
  width: 100%;
  box-sizing: border-box;
  padding: 15px 2% 25px 2%;
  font-weight: 700;
  overflow: visible;
}

/* -------------------------
   1行目
------------------------- */

.catch_top{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 35px;
  line-height: 1.3;
  white-space: nowrap;
}

.catch_top span{
  display: block;
}

/* -------------------------
   2行目・3行目
------------------------- */

.catch_line{
  white-space: nowrap;
}

.catch_line1{
  margin-top: 40px;
  padding-left: 4%;
  font-size: 27px;
  line-height: 1.5;
}

.catch_line2{
  margin-top: 20px;
  padding-left: 7%;
  font-size: 27px;
  line-height: 1.5;
}

/* -------------------------
   最終行
------------------------- */

.catch_bottom{
  position: relative;
  width: 100%;
  min-height: 102px;
  margin-top: 40px;
}

.catch_more{
  position: absolute;
  left: 25%;
  top: 0;
  font-size: 38px;
  line-height: 1.4;
  white-space: nowrap;
}

.catch_last{
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 27px;
  line-height: 1.4;
  white-space: nowrap;
}

/* =========================
   独自スクロールアニメーション
   JSが有効な時だけ初期状態を非表示にする
========================= */

.catchcopy.catch_ready .catch_anim{
  opacity: 0;
  -webkit-filter: blur(22px);
  filter: blur(22px);
  -webkit-transform: translateY(-55px);
  transform: translateY(-55px);
  -webkit-animation: none;
  animation: none;
  will-change: opacity, filter, transform;
}

.catchcopy.catch_ready.catch_active .catch_anim{
  -webkit-animation-name: catchAppearance;
  animation-name: catchAppearance;
  -webkit-animation-duration: 1.35s;
  animation-duration: 1.35s;
  -webkit-animation-timing-function: cubic-bezier(.20,.72,.28,1);
  animation-timing-function: cubic-bezier(.20,.72,.28,1);
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

/* 1行目を順番に出し、その後に本文を続ける */
.catchcopy.catch_active .delay1{ -webkit-animation-delay: .05s; animation-delay: .05s; }
.catchcopy.catch_active .delay2{ -webkit-animation-delay: .18s; animation-delay: .18s; }
.catchcopy.catch_active .delay3{ -webkit-animation-delay: .31s; animation-delay: .31s; }
.catchcopy.catch_active .delay4{ -webkit-animation-delay: .44s; animation-delay: .44s; }
.catchcopy.catch_active .delay5{ -webkit-animation-delay: .78s; animation-delay: .78s; }
.catchcopy.catch_active .delay6{ -webkit-animation-delay: 1.12s; animation-delay: 1.12s; }
.catchcopy.catch_active .delay7{ -webkit-animation-delay: 1.50s; animation-delay: 1.50s; }
.catchcopy.catch_active .delay8{ -webkit-animation-delay: 1.82s; animation-delay: 1.82s; }

@-webkit-keyframes catchAppearance{
  0%{
    opacity: 0;
    -webkit-filter: blur(22px);
    filter: blur(22px);
    -webkit-transform: translateY(-55px);
    transform: translateY(-55px);
  }
  38%{
    opacity: .42;
    -webkit-filter: blur(11px);
    filter: blur(11px);
  }
  72%{
    opacity: .9;
    -webkit-filter: blur(3px);
    filter: blur(3px);
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
  }
  100%{
    opacity: 1;
    -webkit-filter: blur(0);
    filter: blur(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes catchAppearance{
  0%{
    opacity: 0;
    -webkit-filter: blur(22px);
    filter: blur(22px);
    -webkit-transform: translateY(-55px);
    transform: translateY(-55px);
  }
  38%{
    opacity: .42;
    -webkit-filter: blur(11px);
    filter: blur(11px);
  }
  72%{
    opacity: .9;
    -webkit-filter: blur(3px);
    filter: blur(3px);
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
  }
  100%{
    opacity: 1;
    -webkit-filter: blur(0);
    filter: blur(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}