.horizontal-scroll-section {
  height: 100vh;
  width: 100%;
  /* overflow: hidden; ブロックで設定 */
  /* padding: 0; ブロックで設定 */
  max-width: 100%;
  box-sizing: border-box;
}

/* この要素自体は動かず、横に動くコンテンツの「窓」の役割 */
.horizontal-scroll-container {
  height: 100%;
  width: 100%;
  /* overflow: hidden; ブロックで設定 */
  /* padding: 0; ブロックで設定 */
  margin: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* 横スクロールするコンテンツのコンテナ */
.horizontal-scroll-container > .horizontal-panel-wrapper {
  display: flex;
  flex-wrap: nowrap;
  width: max-content; /* 子要素の合計幅になるように */
  height: 100%;
  /* padding: 0; ブロックで設定 */
  /* margin: 0; ブロックで設定 */
  box-sizing: border-box ;
}

/* 横スクロールする各パネル (子要素を指定) */
.horizontal-scroll-container > .horizontal-panel-wrapper > * {
  min-width: calc(var(--sv-width, 100vw)); /* ビューポート幅に合わせる */
  width: calc(var(--sv-width, 100vw));
  max-width: none;
  height: 100%;
  flex-shrink: 0; /* パネルが縮まないように */
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  /* overflow: hidden; ブロックで設定 */
}