{{ block title }}
    
{{ endblock }}

{{ block content }}
  <div class="fade-in-out-container" id="animationContainer">
    <div class="green-bar"></div>
    <div class="fade-in-out" id="animatedText">
      This is a fading text with a green bar!
    </div>
  </div>
  <p>
    Other text that should be covered by the animation.
  </p>
  
  <script>
    function handleAnimationEnd() {
      document.getElementById('animationContainer').style.display = 'none';
    }

    document.getElementById('animatedText').addEventListener('animationend', handleAnimationEnd);
  </script>



<style>
    @keyframes fadeInOut {
      0% {
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
    }

    .fade-in-out-container {
      position: relative;
      margin-top: 20px;
      overflow: hidden;
      z-index: 2; /* スタッキング順序を調整 */
    }

    .fade-in-out {
      animation: fadeInOut 4s linear forwards;
      background-color: transparent;
      padding: 10px;
      color: white;
      text-align: center;
      position: relative;
      z-index: 3; /* スタッキング順序を調整 */
    }

    .green-bar {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 30px;
      background-color: lightgreen;
      z-index: 2; /* スタッキング順序を調整 */
    }
  </style>
    {{ next_button }}
{{ endblock }}