@charset "utf-8";

/* CSS Document */

.harepai .fadeDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    /*//アニメーション時間*/
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    /*//アニメーションさせるイージング*/
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    /*//繰り返し回数*/
    -webkit-animation-direction: normal;
    animation-direction: normal;
    /*//往復処理をするかどうか*/
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    /*//アニメーション後のスタイルをどうするか*/
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.poyoyon {
    animation: poyoyon 1s ease-in-out 1 forwards;
}

@keyframes poyoyon {
    0% {
        transform: scale(1.0, 1.0) translate(0, 0);
    }
    15% {
        transform: scale(0.98, 0.9) translate(0, 5px);
    }
    30% {
        transform: scale(1.02, 1.0) translate(0, 8px);
    }
    50% {
        transform: scale(0.98, 1.05) translate(0, -8px);
    }
    70% {
        transform: scale(1.0, 0.9) translate(0, 5px);
    }
    100% {
        transform: scale(1.0, 1.0) translate(0, 0);
    }
    0%,
    100% {
        opacity: 1;
    }
}

.btn_poyon {
    animation: btn_poyon 2s ease-out;
    opacity: 1;
}

@keyframes btn_poyon {
    0%,
    40%,
    60%,
    80% {
        transform: scale(1.0);
    }
    50%,
    70% {
        transform: scale(0.95);
    }
}


/*8時方向からのスライドアニメーション*/

.slideClock8 {
    animation: slideClock8 3s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}

@keyframes slideClock8 {
    0% {
        transform: translate(-180px, 60px);
        opacity: 0;
    }
    100% {
        transform: translate(0, 0);
    }
    20%,
    100% {
        opacity: 1;
    }
}


/*8時方向からのスライドアニメーション スクロール制御ver*/

.sc8.animeAdd {
    animation: sc8 3s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}

@keyframes sc8 {
    0% {
        transform: translate(-180px, 60px);
        opacity: 0;
    }
    100% {
        transform: translate(0, 0);
    }
    20%,
    100% {
        opacity: 1;
    }
}


/*10時方向からのスライドアニメーション*/

.slideClock10 {
    animation: slideClock10 3.5s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}

@keyframes slideClock10 {
    0% {
        transform: translate(-180px, -60px);
        opacity: 0;
    }
    100% {
        transform: translate(0, 0);
    }
    20%,
    100% {
        opacity: 1;
    }
}

/*1時方向からのスライドアニメーション*/
.slideClock1 {
    animation: slideClock1 3s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}

@keyframes slideClock1 {
    0% {
        transform: translate(180px, -180px);
        opacity: 0;
    }
    100% {
        transform: translate(0, 0);
    }
    20%,
    100% {
        opacity: 1;
    }
}


/*1時方向からのスライドアニメーション スクロール制御ver*/
.sc1.animeAdd {
    animation: sc1 3s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}

@keyframes sc1 {
    0% {
        transform: translate(180px, -180px);
        opacity: 0;
    }
    100% {
        transform: translate(0, 0);
    }
    20%,
    100% {
        opacity: 1;
    }
}

/*2時方向からのスライドアニメーション*/
.slideClock2 {
    animation: slideClock2 3s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}

@keyframes slideClock2 {
    0% {
        transform: translate(180px, -60px);
        opacity: 0;
    }
    100% {
        transform: translate(0, 0);
    }
    20%,
    100% {
        opacity: 1;
    }
}


/*2時方向からのスライドアニメーション スクロール制御ver*/
.sc2.animeAdd {
    animation: sc2 3s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}

@keyframes sc2 {
    0% {
        transform: translate(180px, -60px);
        opacity: 0;
    }
    100% {
        transform: translate(0, 0);
    }
    20%,
    100% {
        opacity: 1;
    }
}


/*4時方向からのスライドアニメーション*/

.slideClock4 {
    animation: slideClock4 2s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}

@keyframes slideClock4 {
    0% {
        transform: translate(180px, 60px);
        opacity: 0;
    }
    100% {
        transform: translate(0, 0);
    }
    20%,
    100% {
        opacity: 1;
    }
}


/*6時方向からのスライドアニメーション*/

.slideClock5 {
    animation: slideClock5 2.5s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}

@keyframes slideClock5 {
    0% {
        transform: translate(180px, 180px);
        opacity: 0;
    }
    100% {
        transform: translate(0, 0);
    }
    20%,
    100% {
        opacity: 1;
    }
}
/*6時方向からのスライドアニメーション*/

.slideClock7 {
    animation: slideClock7 2.5s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}

@keyframes slideClock7 {
    0% {
        transform: translate(-180px, 180px);
        opacity: 0;
    }
    100% {
        transform: translate(0, 0);
    }
    20%,
    100% {
        opacity: 1;
    }
}

.parent3Dtransform {
    transform-style: preserve-3d;
    perspective: 440px;
    position: relative;
    width: 100px;
    height: 100px;
}

.parent3Dtransform div {
    position: absolute;
    margin-top: 10px;
    width: 200px;
    height: 200px;
    line-height: 100px;
    text-align: center;
}

.rotateY {
    transform: rotateY(30deg);
    transform: rotateY(-0.5turn);
    transform: rotateY(2.0rad);
}

.duration02 {
    animation-duration: 2s !important;
}

.duration07 {
    animation-duration: 7s !important;
}

.cardRotateLeft {
    transform-style: preserve-3d;
    animation: rotate-anime-3d-L 20s ease-in-out infinite;
  }
  @keyframes rotate-anime-3d-L {
    0%  {transform: rotateY(0);}
    12.5%  {transform: rotateY(-180deg);}
    25%  {transform: rotateY(-360deg);}
    37.5%  {transform: rotateY(-180deg);}
    50%  {transform: rotateY(0);}
    62.5%  {transform: rotateY(180deg);}
    75%  {transform: rotateY(360deg);}
    87.5%  {transform: rotateY(180deg);}
    100%  {transform: rotateY(0);}
  }
.cardRotateRight {
    transform-style: preserve-3d;
    animation: rotate-anime-3d-R 14s ease-in-out infinite;
  }
  @keyframes rotate-anime-3d-R {
    0%  {transform: rotateY(0);}
    12.5%  {transform: rotateY(180deg);}
    25%  {transform: rotateY(360deg);}
    37.5%  {transform: rotateY(180deg);}
    50%  {transform: rotateY(0);}
    62.5%  {transform: rotateY(-180deg);}
    75%  {transform: rotateY(-360deg);}
    87.5%  {transform: rotateY(-180deg);}
    100%  {transform: rotateY(0);}
  }
/*ディレイ 0.1～0.9s*/  
.animate__delay-01s {
    animation-delay: calc(var(--animate-delay) * 0.1);
}
.animate__delay-02s {
    animation-delay: calc(var(--animate-delay) * 0.2);
}
.animate__delay-03s {
    animation-delay: calc(var(--animate-delay) * 0.3);
}
.animate__delay-04s {
    animation-delay: calc(var(--animate-delay) * 0.4);
}
.animate__delay-05s {
    animation-delay: calc(var(--animate-delay) * 0.5);
}
.animate__delay-06s {
    animation-delay: calc(var(--animate-delay) * 0.6);
}
.animate__delay-07s {
    animation-delay: calc(var(--animate-delay) * 0.7);
}
.animate__delay-08s {
    animation-delay: calc(var(--animate-delay) * 0.8);
}
.animate__delay-09s {
    animation-delay: calc(var(--animate-delay) * 0.9);
}
/*ディレイ 1.0～1.9s*/ 
.animate__delay-1s {
    animation-delay: calc(var(--animate-delay) * 1);
}
.animate__delay-101s {
    animation-delay: calc(var(--animate-delay) * 1.1);
}
.animate__delay-102s {
    animation-delay: calc(var(--animate-delay) * 1.2);
}
.animate__delay-103s {
    animation-delay: calc(var(--animate-delay) * 1.3);
}
.animate__delay-104s {
    animation-delay: calc(var(--animate-delay) * 1.4);
}
.animate__delay-105s {
    animation-delay: calc(var(--animate-delay) * 1.5);
}
.animate__delay-106s {
    animation-delay: calc(var(--animate-delay) * 1.6);
}
.animate__delay-107s {
    animation-delay: calc(var(--animate-delay) * 1.7);
}
.animate__delay-108s {
    animation-delay: calc(var(--animate-delay) * 1.8);
}
.animate__delay-109s {
    animation-delay: calc(var(--animate-delay) * 1.9);
}
/*ディレイ 2.0～2.9s*/
.animate__delay-2s {
    animation-delay: calc(var(--animate-delay) * 2);
}
.animate__delay-201s {
    animation-delay: calc(var(--animate-delay) * 2.1);
}
.animate__delay-202s {
    animation-delay: calc(var(--animate-delay) * 2.2);
}
.animate__delay-203s {
    animation-delay: calc(var(--animate-delay) * 2.3);
}
.animate__delay-204s {
    animation-delay: calc(var(--animate-delay) * 2.4);
}
.animate__delay-205s {
    animation-delay: calc(var(--animate-delay) * 2.5);
}
.animate__delay-206s {
    animation-delay: calc(var(--animate-delay) * 2.6);
}
.animate__delay-207s {
    animation-delay: calc(var(--animate-delay) * 2.7);
}
.animate__delay-208s {
    animation-delay: calc(var(--animate-delay) * 2.8);
}
.animate__delay-209s {
    animation-delay: calc(var(--animate-delay) * 2.9);
}
/*ディレイ 3.0～3.9s*/
.animate__delay-3s {
    animation-delay: calc(var(--animate-delay) * 3);
}
.animate__delay-301s {
    animation-delay: calc(var(--animate-delay) * 3.1);
}
.animate__delay-303s {
    animation-delay: calc(var(--animate-delay) * 3.2);
}
.animate__delay-303s {
    animation-delay: calc(var(--animate-delay) * 3.3);
}
.animate__delay-304s {
    animation-delay: calc(var(--animate-delay) * 3.4);
}
.animate__delay-305s {
    animation-delay: calc(var(--animate-delay) * 3.5);
}
.animate__delay-306s {
    animation-delay: calc(var(--animate-delay) * 3.6);
}
.animate__delay-307s {
    animation-delay: calc(var(--animate-delay) * 3.7);
}
.animate__delay-308s {
    animation-delay: calc(var(--animate-delay) * 3.8);
}
.animate__delay-309s {
    animation-delay: calc(var(--animate-delay) * 3.9);
}