@charset "UTF-8";
/* CSS Document */



/****************************************************************************
セクション　タイトルアニメーション
****************************************************************************/
.title,
.title-delay {
    display: flex;
    overflow: hidden;
    justify-content: center;
}



.title span {
    display: block;
    transform: translate(0, 105%);
    transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 1s;
}
/*ディレイを入れるやつと入れないやつの記述を分ける*/

.title-delay span {
    display: block;
    transform: translate(0, 105%);
    transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 1s 0.2s;
}


.title.-visible span,
.title-delay.-visible span {
    transform: translate(0, 0);
}

.title span:nth-child(2) {
    transition-delay: 0.06s;
}
.title span:nth-child(3) {
    transition-delay: 0.12s;
}
.title span:nth-child(4) {
    transition-delay: 0.18s;
}
.title span:nth-child(5) {
    transition-delay: 0.24s;
}
.title span:nth-child(6) {
    transition-delay: 0.30s;
}
.title span:nth-child(7) {
    transition-delay: 0.36s;
}
.title span:nth-child(8) {
    transition-delay: 0.42s;
}
.title span:nth-child(9) {
    transition-delay: 0.48s;
}
.title span:nth-child(10) {
    transition-delay: 0.54s;
}
.title span:nth-child(11) {
    transition-delay: 0.6s;
}
.title span:nth-child(12) {
    transition-delay: 0.66s;
}
.title span:nth-child(13) {
    transition-delay: 0.72s;
}
.title span:nth-child(14) {
    transition-delay: 0.78s;  
}


.title-delay span:nth-child(2) {
    transition-delay: 0.26s;
}
.title-delay span:nth-child(3) {
    transition-delay: 0.32s;
}
.title-delay span:nth-child(4) {
    transition-delay: 0.38s;
}
.title-delay span:nth-child(5) {
    transition-delay: 0.44s;
}
.title-delay span:nth-child(6) {
    transition-delay: 0.50s;
}
.title-delay span:nth-child(7) {
    transition-delay: 0.56s;
}
.title-delay span:nth-child(8) {
    transition-delay: 0.62s;
}
.title-delay span:nth-child(9) {
    transition-delay: 0.68s;
}
.title-delay span:nth-child(10) {
    transition-delay: 0.74s;
}
.title-delay span:nth-child(11) {
    transition-delay: 0.80s;
}
.title-delay span:nth-child(12) {
    transition-delay: 0.96s;
}
.title-delay span:nth-child(13) {
    transition-delay: 1.02s;
}
.title-delay span:nth-child(14) {
    transition-delay: 1.08s;  
}


    
/****************************************************************************
カーテンアニメーション
****************************************************************************/
/*カーテンアニメーションスクロールレフト*/
.curtain {
  position: relative;
    display:inline-block;
}

.curtain span {
  transition: all 0s 0.5s ease;
  opacity: 0;
  padding: 0;
}

.curtain.active {
    opacity: 1;
}

.curtain.active span {
  opacity: 1;
  color:#333;
}

.curtain:after {
  display: inline;
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  background: #000;
    z-index: 1000;
}

.curtain.active:after {
  animation: curtainEffect 1s ease-in-out 0s 1 normal both running;
}

@keyframes curtainEffect {
  0% {
    transform-origin: left center;
    transform: scaleX(0);
  }
  49.999% {
    transform-origin: left center;
    transform: scaleX(1);
  }
  50% {
    transform-origin: right center;
    transform: scaleX(1);
  }
  100% {
    transform-origin: right center;
    transform: scaleX(0);
  }
}

/*カーテンアニメーションスクロールレフト ホワイト*/
.curtain02 {
    position: relative;
    display:inline-block;
}

.curtain02 span {
    transition: all 0s 0.5s ease;
    opacity: 0;
    padding: 0;
}

.curtain02.active {
    opacity: 1;
}

.curtain02.active span {
    opacity: 1;
    color:#333;
}

.curtain02:after {
    display: inline;
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: scaleX(0);
    background: #FFF;
    z-index: 1000;
}

.curtain02.active:after {
    animation: curtainEffectWh 1s ease-in-out 0s 1 normal both running;
}

@keyframes curtainEffectWh {
  0% {
    transform-origin: left center;
    transform: scaleX(0);
  }
  49.999% {
    transform-origin: left center;
    transform: scaleX(1);
  }
  50% {
    transform-origin: right center;
    transform: scaleX(1);
  }
  100% {
    transform-origin: right center;
    transform: scaleX(0);
  }
}

/*カーテンアニメーションここまで*/



/****************************************************************************
スライドインアニメーション
****************************************************************************/
/*スクロールレフト*/
.slideIn-left.active {
  animation: slideInLeft 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}
 
@keyframes slideInLeft {
  0% {
    transform: translateX(-10%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 1;
  }
}


/*スクロールライト*/
.slideIn-right.active {
  animation: slideInRight 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}
 
@keyframes slideInRight {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 1;
  }
}



/*スクロールボトム*/
.slideIn-bottom {
    opacity: 0;
}

.slideIn-bottom.active {
  animation: slideInBottom 1s cubic-bezier(0.25, 1, 0.5, 1)  1 forwards;
}
 
@keyframes slideInBottom {
  0% {
    transform: translateY(20%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
  }
  40%,100% {
    opacity: 1;
  }
}



/*オンロードレフト*/
.slideInOnload-left.active {
  animation: slideInOnloadLeft 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}
 
@keyframes slideInOnloadLeft {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 1;
  }
}



/*オンロードライト*/
.slideInOnload-right.active {
  animation: slideInOnloadright 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}
 
@keyframes slideInOnloadright {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 1;
  }
}



/*ディレイ*/
.delay-01 {
    animation-delay: 0.1s!important;   
}
.delay-02 {
    animation-delay: 0.2s!important;   
}
.delay-03 {
    animation-delay: 0.3s!important;   
}
.delay-04 {
    animation-delay: 0.4s!important;   
}
.delay-05 {
    animation-delay: 0.5s!important;   
}
.delay-06 {
    animation-delay: 0.6s!important;   
}
.delay-07 {
    animation-delay: 0.7s!important;   
}
.delay-08 {
    animation-delay: 0.8s!important;   
}
.delay-085 {
    animation-delay: 0.85s!important;   
}
.delay-09 {
    animation-delay: 0.9s!important;   
}
.delay-095 {
    animation-delay: 0.95s!important;   
}
.delay-10 {
    animation-delay: 1s!important;   
}
.delay-105 {
    animation-delay: 1.05s!important;   
}
.delay-11 {
    animation-delay: 1.1s!important;   
}
.delay-115 {
    animation-delay: 1.15s!important;   
}
.delay-12 {
    animation-delay: 1.2s!important;   
}
.delay-125 {
    animation-delay: 1.25s!important;   
}
.delay-13 {
    animation-delay: 1.3s!important;   
}
.delay-135 {
    animation-delay: 1.35s!important;   
}
.delay-14 {
    animation-delay: 1.4s!important;   
}
.delay-145 {
    animation-delay: 1.45s!important;   
}
.delay-15 {
    animation-delay: 1.5s!important;   
}
.delay-155 {
    animation-delay: 1.55s!important;   
}
.delay-16 {
    animation-delay: 1.6s!important;   
}
.delay-165 {
    animation-delay: 1.65s!important;   
}
.delay-17 {
    animation-delay: 1.7s!important;   
}
.delay-175 {
    animation-delay: 1.75s!important;   
}
.delay-18 {
    animation-delay: 1.8s!important;   
}
.delay-185 {
    animation-delay: 1.85s!important;   
}
.delay-19 {
    animation-delay: 1.9s!important;   
}
.delay-20 {
    animation-delay: 2.0s!important;   
}
.delay-22 {
    animation-delay: 2.2s!important;   
}
.delay-24 {
    animation-delay: 2.4s!important;   
}
.delay-26 {
    animation-delay: 2.6s!important;   
}
.delay-28 {
    animation-delay: 2.8s!important;   
}
.delay-30 {
    animation-delay: 3.0s!important;   
}




/****************************************************************************
マウスホバーアニメーション
****************************************************************************/
/*a {
  position: relative;
  display: inline-block;
  text-decoration: none;
}
a::after {
  position: absolute;
  bottom: -2px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #FFF;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform .3s;
}
a:hover::after {
  transform-origin: left top;
  transform: scale(1, 1);

}*/

a:hover {
    opacity: 0.6;
}