.scroll-section {
position: relative; /* absolute 時の基準に */
}
.two-col-container {
display: flex;
align-items: flex-start;
gap: 20px;
}
.left-col {
flex: 1;
}
.left-col .content-item {
margin-bottom: 40px;
}
.left-col img {
width: 100%;
height: auto;
display: block;
}
.left-col p {
margin: 8px 0 0;
}

.right-col {
width: 300px;       /* 固定幅 */
position: relative; /* absolute 時の基準に */
}

/* static 時は .right-col 幅に合わせる */
.sticky-wrapper {
width: 100%;
}
.sticky-wrapper img {
width: 100%;
height: auto;
display: block;
}
.sticky-wrapper p {
margin: 8px 0 0;
}



@media screen and (min-width: 961px) {
  .scroll-section > .two-col-container {
    position:   relative !important;
    display:    flex     !important;
    width:      90vw     !important;   /* ビューポートの90%幅 */
    max-width:  none     !important;

    /* ─── ここを変更 ───
       left:50% で要素の左端をビューポート中央へ寄せ、
       margin-left:-45vw で自身の幅の半分（90vw÷2）だけ戻す */
    left:       50%      !important;
    margin-left:-45vw    !important;

    gap:        20px     !important;
  }
}

  /* 左 60% */
  .scroll-section .left-col {
    flex: 0 0 60% !important;
    max-width: 60% !important;
    position: static !important;
  }
  /* 右 40% */
  .scroll-section .right-col {
    flex: 0 0 40% !important;
    max-width: 40% !important;
    position: relative !important;
  }

  /* 画像は常にカラム幅いっぱい */
  .scroll-section img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
}