@charset "utf-8";

  .scroll-container {
    height: 220vh; /* スクロールさせる距離 */
    /* 親要素をタイムラインの基準にする */
    view-timeline-name: --section-scroll;
    view-timeline-axis: block;
  }

  .sticky-wrapper {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .sticky-wrapper a {
    line-height: 0%; /* 画像の下の余白を消す */
  }
  .sticky-wrapper a:link,
  .sticky-wrapper a:visited {
    color: #fff;
  }

  .sliding-item {
    /* 1. 画像の本来のサイズから比率を定義 */
    --orig-width: 1014;
    --orig-height: 680;
    --aspect-ratio: calc(var(--orig-width) / var(--orig-height));
    
    /* 2. 現在の画面高さ(100vh)における「実際の画像の幅」を計算 */
    --actual-img-width: calc(90vh * var(--aspect-ratio));

    /* 3. 見た目の設定（ゆがませない） */
    height: 90vh;
    width: var(--actual-img-width);
    object-fit: cover;
    
    /* 4. アニメーション設定 */
    animation: move-x cubic-bezier(0.75, 0, 0.25, 1) both;
    animation-timeline: --section-scroll;
    animation-range: cover 25% cover 75%;
  }

    .sticky-wrapper .reverse {
    /* 4. アニメーション設定 */
    animation: move-x-reverse cubic-bezier(0.75, 0, 0.25, 1) both;
    animation-timeline: --section-scroll;
    animation-range: cover 25% cover 75%;
  }

  .red-btn {
    font-family: "M PLUS 1p", sans-serif;
    height:5vh;
    line-height:5vh;
    width:18em;
    text-align:center;
    font-size: 1.001em;
    border-radius:100px;
    background-color: rgba( 0, 0, 0, 1);
    color: white;
    margin:2vh auto;
    padding: 0.5vh;
    background-image: url("../images/icon_new-window.svg");
    background-repeat: no-repeat;
    background-position: right 12% center;
    background-size: 1.6em;
}

#data,
#footer{
  margin-top: 0 !important; /* red-btn のレイアウトに因り上部マージン削除 */
}

  @keyframes move-x {
    from { 
      transform: translateX(calc((var(--actual-img-width) / 2) - 50vw)); 
    }
    to { 
      transform: translateX(calc(50vw - (var(--actual-img-width) / 2))); 
    }
  }
  @keyframes move-x-reverse {
    from {
      transform: translateX(calc(50vw - (var(--actual-img-width) / 2)));
    }
    to { 
      transform: translateX(calc((var(--actual-img-width) / 2) - 50vw)); 
    }
  }

/* 画面幅が768px以上（タブレット・PC）で適用 */
@media screen and (min-width: 768px) {
  .scroll-container {
    /* パララックスが必要ない場合は、高さも100vhに詰めると余白が消えます */
    height: auto; 
    min-height: auto;
  }

  .sticky-wrapper {
    height: auto;
  }

  .sliding-item,
  .sticky-wrapper .reverse {
    /* 1. アニメーションを解除 */
    animation: none;
    
    /* 2. アニメーションで動かしていた位置を中央にリセット */
    transform: none;
    
    /* 3. 画像が画面幅より大きい場合に突き抜けないよう調整 */
    width: 100%;
    max-width: 960px; /* 画像の最大幅を制限 */
    object-fit: contain; /* 画面に収めるならcontain、隙間なく埋めるならcover */
    
    /* 4. view-timelineによる制御も無効化 */
    animation-timeline: auto;
  }

  .sticky-wrapper img {
    height: auto;
  }
}

/* 画面幅が1200px以上（大きなPC）で適用 */
@media screen and (min-width: 1200px) {
  /* 必要に応じて、最大幅の制限などを追加 */
  .sliding-item {
    max-width: 960px;
  }
}