* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  overflow-x: hidden; /* 横スクロールバーを強制非表示 */
}

body {
  background-color: linear-gradient(142deg,rgba(167, 191, 157, 1) 0%, rgba(224, 230, 119, 1) 100%);
  color: #fff;
  font-family: sans-serif;
}

header {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  color: #a7bf9d;
}

header h1 {
  display: flex;
  flex-direction: column;
  align-items: center;
}

header h1 img {
  width: 70%;
}


/* スクロールを固定して横に動かすための外枠 */
.scroll-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: linear-gradient(142deg,rgba(167, 191, 157, 1) 0%, rgba(224, 230, 119, 1) 100%);
}

/* パネルを横一列に並べるラッパー */
.parallax-wrapper {
  display: flex;
  flex-wrap: nowrap;
  width: 300vw; /* パネル3枚分（100vw × 3） */
  height: 100vh;
  will-change: transform; /* ブラウザのアニメーションを最適化 */
}

/* 1つの作品セクション（全画面） */
.panel {
  width: 100vw;
  height: 100vh;
  flex-shrink: 0; /* 横並びの時に要素が縮まないように固定（超重要！） */
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* 90vwの作品カード */
.work-card {
  width: 90vw;
  height: 80vh;
  position: relative;
  overflow: hidden; /* 画像のはみ出しを隠す */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 40px;
}

.work-info {
  position: relative;
  z-index: 2;
  text-shadow: 0 4px 10px rgba(0,0,0,0.7);
  
  /* ★重要：右側に少しマージン（余白）を作っておくことで、
     左に強く引っ張られた（xPercent: -40）ときにも文字が潰れにくくなります */
  padding-right: 10%; 
  will-change: transform; /* アニメーションの軽量化 */
}

/* 画像を囲むコンテナ */
.image-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}

/* 実際の画像：パララックスさせるために、カードの横幅より広く(120%)しておく */
.parallax-img {
  width: 120%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: -10%; /* 初期位置を少し左にずらす */
  will-change: transform;
}

/* 作品のテキスト情報 */
.work-info {
  position: relative;
  z-index: 2;
  text-shadow: 0 4px 10px rgba(0,0,0,0.7);
}

.work-info h2 {
  font-size: clamp(2rem, 5vw, 4rem);
  margin-bottom: 10px;
}

footer {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center; background: white; color: #a7bf9d;
}