/* 親テーマ style.css を継承していれば不要ですが、
   固有のスタイルはここにまとめておくと管理しやすいです */
.scroll-section {
  margin-top: 60px; /* 前セクションとの余白調整 */
}
.two-col-container {
  display: flex;
  gap: 20px;
}
.left-col { flex: 1; }
.right-col {
  width: 300px;
  position: relative;
}
.sticky-wrapper {
  /* static 時の幅 */
  width: 100%;
}

@media screen and (min-width: 961px) {
  /* ————————————————
     全体コンテナの幅制限解除
     ———————————————— */
  #mainContentInner.t--main-width {
    max-width: none   !important;
    width:     100%   !important;
    padding:   0      !important;
    margin:    0      !important;
  }

  /* ————————————————
     記事セクションの幅制限解除 ＋ 背景色指定
     ———————————————— */
  section#postContent.d--article-width-740 {
    max-width: none           !important;
    width:     100%           !important;
    margin:    0 auto         !important;
    padding-left: 50px        !important; /* 必要に応じて調整 */
    padding-right:50px        !important;
    background-color: #fff !important;  /* ← ここに好きなカラーコードを */
  }
}


 @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;
  }
}