<!-- スクロールに合わせてSVGのグラデーション線が伸びていく表現 -->
    <section class="section">
      <div class="scroll-gradation">
        <div class="scroll-gradation__image">
          <svg
            xmlns="<http://www.w3.org/2000/svg>"
            width="295"
            height="1512"
            viewBox="0 0 295 1512"
            fill="none"
          >
            <path
              d="M180.621 40.0098C180.621 40.0098 60.1206 305.01 41.1206 453.01C22.1206 601.01 251.62 718.51 254.621 962.01C257.621 1205.51 159.12 1315.01 71.1206 1471.01"
              stroke="url(#paint0_linear_6190_4)"
              stroke-width="80"
              stroke-linecap="round"
            />
            <defs>
              <linearGradient
                id="paint0_linear_6190_4"
                x1="147.345"
                y1="40.0098"
                x2="147.345"
                y2="1471.01"
                gradientUnits="userSpaceOnUse"
              >
                <stop stop-color="#78C8FF" />
                <stop offset="0.221154" stop-color="#3C96C8" />
                <stop offset="0.461538" stop-color="#145AA0" />
                <stop offset="0.721154" stop-color="#0A326E" />
                <stop offset="1" stop-color="#00143C" />
              </linearGradient>
            </defs>
          </svg>
          <div class="scroll-gradation__img1 js-scroll animated__fadeIn">
            <img src="./img/sea1.webp" alt="" />
          </div>
          <div class="scroll-gradation__img2 js-scroll animated__fadeIn">
            <img src="./img/sea2.webp" alt="" />
          </div>
          <div class="scroll-gradation__img3 js-scroll animated__fadeIn">
            <img src="./img/sea3.webp" alt="" />
          </div>
        </div>
      </div>
    </section>

.section {
  min-height: 100vh;
  font-family: "Noto Sans JP";
}

.scroll-gradation__section {
}

.scroll-gradation {
  position: relative;
  background: url(../img/blue.webp) no-repeat center center / cover;
}

//SVG
.scroll-gradation__image {
  width: 214px;
  margin-inline: auto;
}

.scroll-gradation__img1 {
  position: absolute;
  width: 300px;
  top: 400px;
  left: 200px;
  img {
    width: 100%;
    aspect-ratio: 300/193;
    object-fit: cover;
    object-position: bottom;
  }
}

.scroll-gradation__img2 {
  position: absolute;
  width: 300px;
  top: 600px;
  right: 200px;
  img {
    width: 100%;
  }
}

.scroll-gradation__img3 {
  position: absolute;
  width: 300px;
  top: 900px;
  left: 400px;
  img {
    width: 100%;
  }
}

//=====================================
//   スクロールに合わせてSVGを表示する
//=====================================
window.addEventListener("load", function () {
  gsap.registerPlugin(ScrollTrigger);
  const path = document.querySelector("path");
  const length = path.getTotalLength();

  path.style.strokeDasharray = length;
  path.style.strokeDashoffset = length; 

  gsap.to(".scroll-gradation__image path", {
    strokeDashoffset: "0",
    ease: "none",
    scrollTrigger: {
      trigger: ".scroll-gradation",
      start: "top top", // 要素の先頭がviewportの上端に来た時
      end: "bottom bottom", // 要素のおしりがviewportの下端に来た時
      scrub: true, //trueはスクロールにピッタリ追従、1は1秒かけて追いつく
      // markers: true,
    },
  });
});