@charset "UTF-8";
/*
 * 変数
 */
/*
 * ブレークポイント
 */
/*
 * 480pxより広くなったら改行なくす
 */
@media (min-width: 520px) {
  .br_sp {
    display: none;
  }
}

/*
 * 480pxより狭くなったら改行なくす
 */
@media (max-width: 520px) {
  .sp_br {
    display: none !important;
  }
}

/*
 * 780pxより狭くなったら改行なくす
 */
@media (max-width: 1024px) {
  .pc_br {
    display: none;
  }
}

/*
 * 780pxより狭くなったら改行
 */
@media (min-width: 1024px) {
  .tab_br {
    display: none;
  }
}

/*
 * トランジション
 */
input[type=submit], input[type=button] {
  line-height: 1;
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
}

/*
 * アニメーション
 */
.sa {
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.69, 0.03, 0.2, 1);
}

.sa.show {
  opacity: 1;
  transform: none;
}

.sa--up {
  transform: translate(0, 30px);
}

.sa--slidein {
  transition: 0.7s cubic-bezier(0.43, 0.05, 0.17, 1);
  transform: translateX(100%);
}

.sa--slidein-left {
  transition: 0.4s cubic-bezier(0.43, 0.05, 0.47, 1.32) 0.3s;
  transform: translateX(-80%);
  opacity: 0;
}

.sa--fadein {
  transition: transform 0.5s cubic-bezier(0.43, 0.05, 0.17, 1), opacity 0.5s cubic-bezier(0.18, 0.06, 0.23, 1) 0.1s;
  transform: translate(-3rem, 4rem) rotate(3deg);
}
@media (max-width: 520px) {
  .sa--fadein {
    transform: translate(-1rem, 2rem) rotate(3deg);
  }
}

.sa--fadein-r {
  transition: transform 0.5s cubic-bezier(0.43, 0.05, 0.17, 1), opacity 0.5s cubic-bezier(0.18, 0.06, 0.23, 1) 0.1s;
  transform: translate(4rem, 7rem) rotate(-3deg);
}
@media (max-width: 520px) {
  .sa--fadein-r {
    transform: translate(2rem, 5rem) rotate(-3deg);
  }
}

.bowns {
  transition: 0.5s cubic-bezier(0.075, 0.9, 0.39, 1.485), opacity 0.2s cubic-bezier(0.18, 0.06, 0.23, 1) 0.1s;
  transform: translateY(30px) scale(0.3);
  opacity: 0;
}

.bowns.is-show {
  opacity: 1;
  transform: none;
}

#splash {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: #E30013;
  z-index: 99;
  text-align: center;
  top: 0;
  left: 0;
}

.sub-main-area.loading {
  animation: top-l 3.2s cubic-bezier(0.69, 0.03, 0.2, 1) forwards;
  z-index: 100;
}

@keyframes top-l {
  0% {
    height: 20vh;
  }
  30% {
    height: 100vh;
  }
  60% {
    height: 100vh;
  }
  100% {
    height: 19vh;
  }
}
.logo-wrap.loading {
  animation: logo-ld 3.2s cubic-bezier(0.4, 0, 0.42, 1.03) forwards;
  position: absolute;
}
@media (max-width: 520px) {
  .logo-wrap.loading {
    animation: logo-ld-sp 3.2s cubic-bezier(0.4, 0, 0.42, 1.03) forwards;
  }
}

@keyframes logo-ld {
  0% {
    opacity: 0;
    position: absolute;
  }
  30% {
    opacity: 1;
    top: 50%;
  }
  60% {
    top: 50%;
  }
  70% {
    top: 50%;
  }
  100% {
    top: 9%;
  }
}
@keyframes logo-ld-sp {
  0% {
    opacity: 0;
    position: absolute;
  }
  30% {
    opacity: 1;
    top: 50%;
  }
  60% {
    top: 50%;
  }
  70% {
    top: 50%;
  }
  100% {
    top: 3%;
  }
}
.sublogo.loading {
  animation: sblog-ld 2.5s cubic-bezier(0.4, 0, 0.2, 1) 0.5s forwards;
  opacity: 0;
}

@keyframes sblog-ld {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
/*** 下から登場するアニメーション ***/
@keyframes updown-anim {
  0% {
    transform: translateY(110%); /*表示範囲外から*/
  }
  100% {
    transform: translateY(0); /*通常の位置へ*/
  }
}
/*** 横から登場するアニメーション ***/
@keyframes rightdown-anim {
  0% {
    transform: translateX(-110%); /*表示範囲外から*/
  }
  100% {
    transform: translateX(0); /*通常の位置へ*/
  }
}
/*** 横から登場するアニメーション ***/
@keyframes leftdown-anim {
  0% {
    transform: translateX(110%); /*表示範囲外から*/
  }
  100% {
    transform: translateX(0); /*通常の位置へ*/
  }
}
/*** 横から登場するアニメーション ***/
@keyframes leftdown-anim-sp {
  0% {
    transform: translateX(182%); /*表示範囲外から*/
  }
  100% {
    transform: translateX(0); /*通常の位置へ*/
  }
}
/*** アニメーションさせる要素 ***/
.updown {
  display: flex;
  overflow: hidden;
}
@media (max-width: 520px) {
  .updown {
    flex-wrap: wrap;
  }
}

.updown span {
  transform: translateY(110%); /*下（範囲外）に隠しておく*/
  display: block; /*ブロック要素に変更*/
}

/*** アニメーションさせる要素 ***/
.rightdown {
  display: flex;
  overflow: hidden;
  width: 50%;
}
@media (max-width: 1024px) {
  .rightdown {
    width: 66%;
  }
}
@media (max-width: 1024px) {
  .rightdown {
    width: 60%;
  }
}

.rightdown span {
  transform: translateX(-110%); /*下（範囲外）に隠しておく*/
  display: block; /*ブロック要素に変更*/
}

/*** アニメーションさせる要素 ***/
.leftdown {
  display: flex;
  overflow: hidden;
}

.leftdown span {
  transform: translateX(110%); /*下（範囲外）に隠しておく*/
  display: block; /*ブロック要素に変更*/
  margin-block-start: 8px;
  margin-block-end: -8px;
}
@media (max-width: 520px) {
  .leftdown span {
    transform: translateX(182%); /*下（範囲外）に隠しておく*/
  }
}

/*** スクロールで画面に入った場合 ***/
.updown.active span {
  animation: 0.45s updown-anim cubic-bezier(0.69, 0.03, 0.2, 1) forwards; /*一度だけのアニメーション（終了時点で固定）*/
}

/*** スクロールで画面に入った場合 ***/
.rightdown.active span {
  animation: 0.6s rightdown-anim cubic-bezier(0.43, 0.05, 0.17, 1) 0.3s forwards; /*一度だけのアニメーション（終了時点で固定）*/
}

/*** スクロールで画面に入った場合 ***/
.leftdown.active span {
  animation: 0.4s leftdown-anim cubic-bezier(0.64, 0.01, 0.51, 1.11) 0.3s forwards; /*一度だけのアニメーション（終了時点で固定）*/
}
@media (max-width: 520px) {
  .leftdown.active span {
    animation: 0.45s leftdown-anim-sp ease-in-out 0.3s forwards; /*一度だけのアニメーション（終了時点で固定）*/
  }
}

/*** 各文字のアニメーション遅延時間 ***/
.updown span:nth-child(1),
.rightdown span:nth-child(1),
.leftdown span:nth-child(1) {
  animation-delay: 0s;
}

.updown span:nth-child(2),
.rightdown span:nth-child(2),
.leftdown span:nth-child(2) {
  animation-delay: 0.05s;
}

.updown span:nth-child(3),
.rightdown span:nth-child(3),
.leftdown span:nth-child(3) {
  animation-delay: 0.1s;
}

.updown span:nth-child(4),
.rightdown span:nth-child(4),
.leftdown span:nth-child(4) {
  animation-delay: 0.15s;
}

.updown span:nth-child(5),
.rightdown span:nth-child(5),
.leftdown span:nth-child(5) {
  animation-delay: 0.2s;
}

.updown span:nth-child(6),
.rightdown span:nth-child(6),
.leftdown span:nth-child(6) {
  animation-delay: 0.25s;
}

.updown span:nth-child(7),
.rightdown span:nth-child(7),
.leftdown span:nth-child(7) {
  animation-delay: 0.3s;
}

.updown span:nth-child(8),
.rightdown span:nth-child(8),
.leftdown span:nth-child(8) {
  animation-delay: 0.35s;
}

.updown span:nth-child(9),
.rightdown span:nth-child(9),
.leftdown span:nth-child(9) {
  animation-delay: 0.4s;
}

.updown span:nth-child(10),
.rightdown span:nth-child(10),
.leftdown span:nth-child(10) {
  animation-delay: 0.45s;
}

.updown span:nth-child(11),
.rightdown span:nth-child(11),
.leftdown span:nth-child(11) {
  animation-delay: 0.5s;
}

.updown span:nth-child(12),
.rightdown span:nth-child(12),
.leftdown span:nth-child(12) {
  animation-delay: 0.55s;
}

.updown span:nth-child(13),
.rightdown span:nth-child(13),
.leftdown span:nth-child(13) {
  animation-delay: 0.6s;
}

.updown span:nth-child(14),
.rightdown span:nth-child(14),
.leftdown span:nth-child(14) {
  animation-delay: 0.65s;
}

.updown span:nth-child(15),
.rightdown span:nth-child(15),
.leftdown span:nth-child(15) {
  animation-delay: 0.7s;
}

.mask-bg {
  color: transparent;
  display: inline-block;
  overflow: hidden;
  position: relative;
  transition: color 0ms 450ms;
  opacity: 0;
}

.mask-bg::after {
  background: #E30013;
  bottom: 0;
  content: "";
  display: block;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(-101%, 0);
}

.mask-bg-wh::after {
  background: white;
}

.mask-bg.is-animated {
  color: #1F1F1F;
  animation: mask-bg-op 0.7s cubic-bezier(0.8, 0, 0.17, 1) forwards;
}

@keyframes mask-bg-op {
  0% {
    opacity: 0;
  }
  40%, 60% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
.mask-bg-wh.is-animated {
  color: white;
}

.mask-bg.is-animated::after {
  animation: mask-bg 0.7s cubic-bezier(0.8, 0, 0.17, 1);
}

@keyframes mask-bg {
  0% {
    transform: translate(-101%, 0);
  }
  40%, 60% {
    transform: translate(0, 0%);
  }
  100% {
    transform: translate(100%, 0);
  }
}
.slide-tit-jp {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  padding-right: 13%;
  transform: translate(-101%, 0);
}

.txtmask {
  animation: txtmask 0.5s cubic-bezier(0.71, 0.02, 0.35, 1) forwards;
}

@keyframes txtmask {
  from {
    transform: translate(-101%, 0);
  }
  to {
    transform: translate(0, 0);
  }
}

/*# sourceMappingURL=animation.css.map */