@charset "UTF-8";
.ani_eachchar {
  position: relative;
}
.ani_eachchar .text-split {
  font-size: 40rem;
  -webkit-clip-path: inset(0 0 0);
          clip-path: inset(0 0 0);
}
.ani_eachchar .text-split .text-each {
  display: inline-block;
  opacity: 0;
  transform: translateY(100%);
}
.ani_eachchar .text-split .text-each.is-active {
  transition: 1s;
  opacity: 1;
  transform: translateY(0%);
}
.ani_eachchar .for-accessibility {
  position: absolute;
  width: 1px;
  height: 1px;
  clip: rect(0, 0, 0, 0);
}

/*
reveal effect のＣＳＳ設定
*/
/* revealContentを最初は消しておく */
.revealContent {
  opacity: 0;
}

/* revealActiveクラスが追加されて.3s後に表示する */
.revealActive .revealContent {
  transition-delay: 0.3s;
  opacity: 1;
}

.revealItem {
  display: inline-block;
  position: relative;
  overflow: hidden;
  color: transparent;
  /* 画像の場合 */
}
.revealItem img {
  opacity: 0;
  transition-delay: 0.3s;
}
.revealItem.move {
  color: transparent;
  animation: ShowFont 0.3s ease-in forwards;
  /* 画像の場合 */
}
.revealItem.move::before {
  animation: hideFromLeft 0.3s ease-in forwards, showFromLeft 0.3s ease-in forwards 0.3s;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(206, 229, 218);
  margin: 1px;
}
.revealItem.move img {
  opacity: 1;
}

/* revealItemフォントの動作 */
@keyframes ShowFont {
  99% {
    color: transparent;
  }
  100% {
    color: #000000;
  }
}
/* before擬似要素を左から右にスライドイン */
@keyframes hideFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0%);
  }
}
/* before擬似要素を左から右にスライドアウト */
@keyframes showFromLeft {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}
/* 画像を使うときはvertical-align bottomをしないと下に余白ができてしまうので注意！！ */
.revealImg {
  width: 300px;
  height: 200px;
  -o-object-fit: cover;
  object-fit: cover;
  vertical-align: bottom;
}

/* 枠線で囲ってから表示 */
.showinrect {
  position: relative;
  display: inline-block;
}
.showinrect::before, .showinrect::after, .showinrect span::before, .showinrect span::after {
  content: "";
  /*絶対配置で線の位置を決める*/
  position: absolute;
  background: #0481A2;
  /*線の形状*/
  width: 0;
  height: 2px;
  /*アニメーションの指定*/
  transition: all 0.2s linear;
}
.showinrect::before, .showinrect::after {
  width: 0;
  height: 2px;
}
.showinrect span::before, .showinrect span::after {
  width: 2px;
  height: 0;
}
.showinrect::before {
  left: 0;
  top: 0;
}
.showinrect::after {
  right: 0;
  bottom: 0;
  transition-delay: 0.4s;
}
.showinrect span::before {
  right: 0;
  top: 0;
  transition-delay: 0.2s;
}
.showinrect span::after {
  left: 0;
  bottom: 0;
  transition-delay: 0.6s;
}
.showinrect img {
  opacity: 0;
  z-index: 10;
  position: relative;
  transition: all 1s ease-out;
  transition-delay: 0.8s;
}
.showinrect.move::before, .showinrect.move::after {
  width: 100%;
}
.showinrect.move span::before, .showinrect.move span::after {
  height: 100%;
}
.showinrect.move img {
  opacity: 1;
}

.bg_parallax {
  position: relative;
  width: 100%;
  height: 700px;
  overflow: hidden;
}
.bg_parallax .parallax_img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
}