/*アニメーション*/
/*https://copypet.jp/codedescription/1100/*/
.cp_arrows {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    /*transform: rotate(-90deg);*/
}

.cp_arrows .cp_arrow {
    /*矢印を配置するベースの設定*/
    position: absolute;
    width: 30px;
    height: 10px;
    /*スタートは透明*/
    opacity: 0;
    /*スタートは30%に縮小*/
    transform: scale(0.3);
    animation: arrow-move07 3s ease-out infinite;
}

.cp_arrows .cp_arrow:first-child {
    /*1秒ずらしてアニメーション*/
    animation: arrow-move07 3s ease-out 1s infinite;
}

.cp_arrows .cp_arrow:nth-child(2) {
    /*2秒ずらしてアニメーション*/
    animation: arrow-move07 3s ease-out 2s infinite;
}

.cp_arrows .cp_arrow:before,
.cp_arrows .cp_arrow:after {
    /*矢印全体の設定*/
    position: absolute;
    content: '';
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    /*transform: rotate(-90deg);*/
    width: 50%;
    height: 100%;
    background: #f32179;
    border-radius: 2px;
}

.cp_arrows .cp_arrow:before {
    /*矢印左の線の位置と傾斜*/
    left: 1px;
    transform: skewY(30deg);
}

.cp_arrows .cp_arrow:after {
    /*矢印左の線の位置と傾斜*/
    right: 1px;
    transform: skewY(-30deg);
}

@keyframes arrow-move07 {
    25% {
        opacity: 0.6;
    }

    43% {
        transform: translateY(1em);
        opacity: 0.8;
    }

    62% {
        transform: translateY(2em);
        opacity: 1;
    }

    100% {
        transform: translateY(3em) scale(0.5);
        opacity: 0;
    }
}