/*----------------------------------------------------------------------
よく使うモジュール一覧
----------------------------------------------------------------------*/
.clearfix:after {
  content: url(../images/space.png);
  display: block;
  clear: both;
  height: 0;
}

.clearfix {
  display: inline-block;
}

.clearfix {
  display: block;
}

html {
  overflow-y: scroll;
}

sup,
sub {
  font-size: 65%;
}

img {
  height: auto;
  max-width: 100%;
  image-rendering: -webkit-optimize-contrast;
}

a {
  text-decoration: none;
}

a:active,
a:focus {
  outline: none;
}

.clear {
  clear: both;
}

.sp {
  display: none;
}

article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary {
  display: block;
}

/*
 * fade
 */
.fade {
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

.fade:hover {
  opacity: 0.8;
  filter: alpha(opacity=80);
}

.fuTrigger,
.flTrigger,
.fiTrigger,
.delayScroll li,
.box {
  opacity: 0;
}

.fadeUp {
  opacity: 0;
  animation: fadeUpAnime 1s cubic-bezier(0.22, 1, 0.36, 1) 0.5s 1 forwards;
}

@keyframes fadeUpAnime {
  0% {
    transform: translateY(60px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
  }

  80%,
  100% {
    opacity: 1;
  }
}

.fadeLeft {
  opacity: 0;
  animation: fadeLeftAnime 1s cubic-bezier(0.22, 1, 0.36, 1) 0.5s 1 forwards;
}

@keyframes fadeLeftAnime {
  0% {
    transform: translateX(-60px);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
  }

  80%,
  100% {
    opacity: 1;
  }
}

.fadeIn {
  animation-name: fadeInAnime;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeInAnime {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.shine {
  overflow: hidden;
}
.shine {
  pointer-events: auto;
  position: relative;
}

.shine::before {
  display: block;
  content: "";
  animation: shine 3s cubic-bezier(0.25, 0, 0.25, 1) 0s 1;
  background-color: #fff;
  width: 140%;
  height: 100%;
  transform: skewX(-45deg);
  top: 0;
  left: -160%;
  opacity: 0.5;
  position: absolute;
}

@keyframes shine {
  0% {
    left: -160%;
    opacity: 0;
  }
  70% {
    left: -160%;
    opacity: 0.5;
  }
  71% {
    left: -160%;
    opacity: 1;
  }
  100% {
    left: -20%;
    opacity: 0;
  }
}

.roTrigger {
  transform: translateY(60px);
}

/* PCサイズでのみopacityアニメーションを追加 */
@media screen and (min-width: 835px) {
  .rotationUp {
    opacity: 0;
    animation: rotationUpAnimeWithOpacity 1s cubic-bezier(0.22, 1, 0.36, 1) 0.5s 1 forwards;
  }
}
@keyframes rotationUpAnimeWithOpacity {
  0% {
    transform: translateY(60px) rotateY(0);
    opacity: 0;
  }
  100% {
    transform: translateY(0) rotateY(360deg);
    opacity: 1;
  }
}

.delay-00 {
  animation-delay: 0s;
}

.delay-05 {
  animation-delay: .5s;
}

.deley-01 {
  animation-delay: 1s;
}
.deley-02 {
  animation-delay: 1.5s;
}

@media screen and (max-width: 834px) {
  .pc {
    display: none;
  }

  .sp {
    display: block;
  }

  img {
    image-rendering: auto;
  }

.rotationUp {
  animation: rotationUpAnime 1s cubic-bezier(0.22, 1, 0.36, 1) 0.5s 1 forwards;
}

}

@keyframes rotationUpAnime {
  0% {
    transform: translateY(60px) rotateY(0);
  }
  100% {
    transform: translateY(0) rotateY(360deg);
  }
}