/* 上下 */
.anm_up_down{
    animation: up_down 1.5s forwards;
    animation-iteration-count: infinite;
}
@keyframes up_down{
      0%{transform: translateY( .5rem);}
     50%{transform: translateY(-.5rem);}
    100%{transform: translateY( .5rem);}
}

/* 上下02 */
.anm_up_down02{
    animation: up_down02 1.5s forwards;
    animation-iteration-count: infinite;
}
@keyframes up_down02{
      0%{transform: translateY(-.5rem);}
     50%{transform: translateY( .5rem);}
    100%{transform: translateY(-.5rem);}
}

/* スイング */
.anm_swing{
    animation: swing 1.5s forwards;
    animation-iteration-count: infinite;
}
@keyframes swing{
      0%{transform:rotate( 5deg);}
     50%{transform:rotate(-5deg);}
    100%{transform:rotate( 5deg);}
}

/* ズーム */
.anm_jump{
    animation: jump 1.5s forwards;
    animation-iteration-count: infinite;
}
@keyframes jump{
      0%{transform: translateY( -1rem);}
     10%{transform: translateY(  0rem);}
     90%{transform: translateY(  0rem);}
    100%{transform: translateY( -1rem);}

}

/* ズーム */
.anm_zoom{
    animation: zoom 1.5s forwards;
    animation-iteration-count: infinite;
}
@keyframes zoom{
      0%{transform:scale(1);}
     50%{transform:scale(1.1);}
    100%{transform:scale(1);}
}

/*
* ---------------------------
* フェードインアアニメーション
* ---------------------------
*/

.anima-fadein-bottom{
    animation: anima-fadein-bottom 1s forwards;
}
@keyframes anima-fadein-bottom {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }
    to {
        opacity: 1;
        transform: translateY(0rem);
    }
}

.anima_fadein_right{
    animation: anima_fadein_right 1s forwards;
}
@keyframes anima_fadein_right {
    from {
        opacity: 0;
        transform: translateX(1rem);
    }
    to {
        opacity: 1;
        transform: translateX(0rem);
    }
}


.anima_fadein_left{
    animation: anima_fadein_left 1s forwards;
}
@keyframes anima_fadein_left {
    from {
        opacity: 0;
        transform: translateX(-1rem);
    }
    to {
        opacity: 1;
        transform: translateX(0rem);
    }
}


/* キラリンアニメーション */
.shiny:after{
    position:absolute;
    top:-200%;
    left:-200%;
    content:"";
    height:500%;
    width:70px;
    background:linear-gradient(90deg, rgba(255,255,255,0),rgba(255,255,255,0.6) 40%,rgba(255,255,255,0),rgba(255,255,255,0.6),rgba(255,255,255,0));
    transform: rotate(60deg);
    animation:10s shine infinite linear;
}

@keyframes shine{
    0%{
        left:-200%;
    }
    90%{
        left:-200%;
    }
    100%{
        left:200%;
    }
}


/* アドチャンス */
.gacha_chance {
    opacity: .7;
    animation: gachaChance 5s infinite; /* 3秒周期で繰り返し */
}
@keyframes gachaChance {
    0%, 100% {
        opacity: 1; /* 完全に表示 */
    }
    50% {
        opacity: 0; /* 完全に非表示 */
    }
}


/* レインボーアニメーション背景 */
@keyframes rainbow {
    100% { background-position: 200%; }
}

.bg-rainbow {
    background: linear-gradient(to right,
        #e60000,
        #f39800,
        #fff100,
        #009944,
        #0068b7,
        #1d2088,
        #920783,
        #e60000
    ) 0 / 200%;
    animation: rainbow 2s linear infinite;
}


/* キラキラ金色アニメーション背景 */
@keyframes golden-wave {
    100% { background-position: 200%; }

}

.bg-golden-wave {
    background: linear-gradient( to right,
        #d0a900,
        #fff6a3 40%,
        #ffffff 10%,
        #fff6a3 40%,
        #d0a900
    ) 0 / 200%;
    animation: golden-wave 2s linear infinite;
}


/* ガチャのホバーアニメーション */
.hover_anime:hover{
    position: relative;
    transform: scale(.97) translateY(0rem);
    opacity: .7;
    transition: all .2s;
}


/* 商品比率4x3 88:63 */
.ratio-3x4{
    --bs-aspect-ratio: 140% !important;
}