@charset "UTF-8";
.p-panel-scroll {
  --panel-aspect-ratio: 600 / 1280; /* パネル表示領域のアスペクト比 */
  --panel-aspect-ratio-percent: calc(
    var(--panel-aspect-ratio) * 100%
  ); /* アスペクト比のパーセンテージ */
  --panel-width-percent: 35.234375%; /* パネルの幅 */
  --panel-gap-percent: calc(
    var(--panel-width-percent) / 2
  ); /* パネル同士の半分の重なり */
}

.p-panel-scroll__images {
  position: sticky;
  top: 0;
  padding: calc((100vh - var(--panel-aspect-ratio-percent)) / 2) 0;
}

.p-panel-scroll__images-inner {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: var(--panel-aspect-ratio-percent);
}

.p-panel-scroll__item {
  position: absolute;
  top: 0;
  width: var(--panel-width-percent);
  aspect-ratio: var(--panel-aspect-ratio);
}

.p-panel-scroll__item:nth-of-type(1) {
  left: 0;
  background-color: var(--color-primary);
}

.p-panel-scroll__item:nth-of-type(2) {
  left: calc(var(--panel-gap-percent));
  background-color: var(--color-secondary);
}

.p-panel-scroll__item:nth-of-type(3) {
  left: calc(var(--panel-gap-percent) * 2);
  background-color: var(--color-tertiary);
}

.p-panel-scroll__item:nth-of-type(4) {
  left: calc(var(--panel-gap-percent) * 3);
  background-color: var(--color-quaternary);
}

.p-panel-scroll__item:nth-of-type(5) {
  right: 0;
  background-color: var(--color-quinary);
}

.p-panel-scroll__placeholder {
  height: 150vh;
}