.flex {
  display: flex;
}
.flex.column {
  flex-direction: column;
}

/* ──────────────────────────────────────
   パララックス（汎用）
   data-parallax 属性を持つ要素の内側の
   .parallax-img をスクロールに合わせて動かす
────────────────────────────────────── */
.parallax-bg {
  position: relative;
  overflow: hidden;
}
.parallax-img {
  position: absolute;
  top: -30%;
  left: 0;
  width: 100%;
  height: 160%;
  object-fit: cover;
  object-position: center;
  will-change: transform;
}

/* SPではスクロール量が少なく、160%拡大だと寄りすぎて見えるため
   パララックスの「のりしろ」を外し、通常のcover表示にする */
@media (max-width: 560px) {
  .parallax-img {
    top: 0;
    height: 100%;
    transform: none !important;
  }
}