/* 場面転換: 紫のずんぐりした下矢印3つ（1.5秒で8px上下） */
.deco-arrow-scene{text-align:center;margin:34px 0}
.deco-arrow-scene .downArrow{display:flex;justify-content:center;box-sizing:border-box;
  align-items:flex-start;animation:decoBtnAnime 1.5s ease infinite}
.deco-arrow-scene .downArrow>span{width:100px;height:65px;padding:0 10px;box-sizing:border-box}
.deco-arrow-scene .downArrow>span::before{content:"";display:block;margin:0 auto;
  width:50%;height:40%;background:#d096bb}
.deco-arrow-scene .downArrow>span::after{content:"";display:block;width:100%;height:60%;
  background:linear-gradient(to top right,transparent 49%,#d096bb 50%) top left/50% 100% no-repeat,
             linear-gradient(to top left,transparent 49%,#d096bb 50%) top right/50% 100% no-repeat}
@keyframes decoBtnAnime{0%{transform:translate(0,0)}50%{transform:translate(0,-8px)}100%{transform:translate(0,0)}}

/* 結果直前: 細いシェブロンが2本、上から降りて消える */
.deco-arrow-reveal{position:relative;height:50px;margin:24px 0}
.deco-arrow-reveal .cp_arrow{position:absolute;top:100%;left:50%;
  transform:translate(-50%,-50%);transform-origin:50% 50%;opacity:0}
.deco-arrow-reveal .cp_arrowfirst{animation:decoArrowMove 2s ease-in-out infinite}
.deco-arrow-reveal .cp_arrowsecond{animation:decoArrowMove 2s 1s ease-in-out infinite}
.deco-arrow-reveal .cp_arrow::before,.deco-arrow-reveal .cp_arrow::after{
  position:absolute;top:0;left:0;display:block;width:40px;height:3px;content:"";background:#E91E63}
.deco-arrow-reveal .cp_arrow::before{transform:rotate(30deg) translateX(-39%);transform-origin:top left}
.deco-arrow-reveal .cp_arrow::after{transform:rotate(-30deg) translateX(39%);transform-origin:top right}
@keyframes decoArrowMove{0%{top:40%;opacity:0}70%{opacity:1}100%{opacity:0}}

/* 証拠直前: 赤い太矢印3本が上から落ちてくる（2組が1秒ずれて連続） */
.deco-arrow-proof{width:100%;height:auto;margin:24px 0}
.deco-arrow-proof .arrowFlow__inner{padding-bottom:200px;overflow-y:hidden;position:relative}
.deco-arrow-proof .arrowFlow__beforeG,.deco-arrow-proof .arrowFlow__afterG{
  width:80%;max-width:400px;height:auto;margin:0 auto;display:flex;
  justify-content:space-evenly;align-items:flex-start;
  animation:decoArrowFlow 2s ease-in-out infinite;
  transform:translate(-50%,-300%);position:absolute;top:0;left:50%}
.deco-arrow-proof .arrowFlow__afterG{animation-delay:1s}
.deco-arrow-proof .arrow{display:inline-block;vertical-align:middle;color:#ba0d0d;line-height:1;
  position:relative;width:40px;height:60px;background:currentColor;margin:0 30px}
.deco-arrow-proof .arrow::before{content:"";display:inline-block;width:0;height:0;border-style:solid;
  border-width:50px 50px 0 50px;border-color:#ba0d0d transparent transparent transparent;
  position:absolute;bottom:-50px;left:50%;transform:translateX(-50%)}
@keyframes decoArrowFlow{0%{transform:translate(-50%,-300%)}60%{transform:translate(-50%,100%)}
  100%{transform:translate(-50%,400%)}}

/* 静止画で見るとき（スクショ検査・目視）: 動きを止めて、いちばん見えている瞬間で固定する */
.deco-static .deco-arrow-scene .downArrow,
.deco-static .deco-arrow-reveal .cp_arrow,
.deco-static .deco-arrow-proof .arrowFlow__beforeG,
.deco-static .deco-arrow-proof .arrowFlow__afterG{animation:none !important}
.deco-static .deco-arrow-reveal .cp_arrow{opacity:1;top:70%}
.deco-static .deco-arrow-reveal .cp_arrowsecond{top:30%}
.deco-static .deco-arrow-proof .arrowFlow__beforeG{transform:translate(-50%,10%)}
.deco-static .deco-arrow-proof .arrowFlow__afterG{display:none}