@charset utf-8;
body {
font-family: Verdana, Roboto, “Droid Sans”, “游ゴシック”, YuGothic, “メイリオ”, Meiryo, “ヒラギノ角ゴ ProN W3”, “Hiragino Kaku Gothic ProN”, “ＭＳ Ｐゴシック”, sans-serif;
text-align:center;
font-size:98%;
}
.my-box {
  border-top: 2px solid red;    
  border-right: 3px dashed blue;
  border-bottom: 4px dotted green; 
  border-left: 1px solid purple;
}

        @keyframes rage-up-down {
            /* 0%, 100% は中央 */
            0%, 100% { 
                transform: translate(-50%, -50%) translateY(0px) rotate(0deg); 
            }
            15% { 
                transform: translate(-50%, -50%) translateY(-25px) rotate(3deg); 
            } 
            40% { 
                transform: translate(-50%, -50%) translateY(25px) rotate(-3deg); 
            } 
            65% { 
                transform: translate(-50%, -50%) translateY(-10px) rotate(1deg);
            }
        }

        .arrow-container {
            position: relative;
            width: 100%;
            height: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        
        .flow-arrow {
            animation-delay: var(--delay);
            
            position: absolute;
            left: 50%; /* 水平方向の中央に配置 */
            top: 50%; /* 垂直方向の中央に配置 */
            
            width: 80px; 
            height: 80px;
            
            /* 初期位置を正確に中央にセット */
            transform: translate(-50%, -50%); 
            animation: rage-up-down 0.5s ease-in-out infinite;
        }

        .flow-arrow::before,
        .flow-arrow::after {
            content: '';
            position: absolute;
            display: block;
            width: 40px;
            height: 10px;
            background-color: #FF0000; /* 赤色 */
            border-radius: 5px;
        }

        .flow-arrow::before {
            transform: rotate(45deg);
            top: 20px;
            left: 0;
        }

        .flow-arrow::after {
            transform: rotate(-45deg);
            bottom: 20px;
            left: 0;
        }
        .arrow-1 { left: 40%; }
        .arrow-2 { left: 50%; } /* 真ん中 */
        .arrow-3 { left: 60%; }

        @media (max-width: 600px) {
            .flow-arrow {
                width: 50px;
                height: 50px;
            }
            .arrow-1 { left: 35%; }
            .arrow-3 { left: 65%; }
        }

        .description {
            position: absolute;
            top: 1rem;
            color: #b00000;
            font-size: 1.2rem;
            font-weight: bold;
        }