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

body {
  height: 100vh;
  background: linear-gradient(0deg, #2b4671, #2b4671 27%, #eeeeee 27% 37%, #d1ab68 37% 100%);
  overflow: hidden; /* ページスクロールを無効にして動きを滑らかにする */
}

.image-row {
  /* 行と画像の高さを変数で管理し、背景グラデーション境界(37vh)に画像下端を揃える */
  --row-height: 60vh; /* 以前の値を参考として保持 */
  --img-height: calc(var(--row-height) * 0.6); /* 行高さの60% = 36vh */

  position: absolute; /* ビューポート基準で配置 */
  left: 0;
  right: 0;
  /* 画像行の下端を現在より1px低く配置 */
  /* ビューポート下端からの距離 = 100vh - 37vh - 227px */
  bottom: calc(100vh - 37vh - 227px);

  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: flex-end; /* 画像を行下端に揃える */
  /* 下端の余白をなくしてコンテナ下端と一致させる */
  padding: 1rem 1rem 0 1rem;
  height: var(--img-height);
  width: 100%;
  overflow-x: auto;
  overflow-y: visible; /* ホバー拡大で上が欠けないようにする */
  scroll-snap-type: none; /* 慣性スクロールを滑らかにするため無効 */
  -webkit-overflow-scrolling: touch;
  scroll-padding: 1rem;
  scroll-behavior: auto; /* JS側のスムーズスクロールを利用 */
  will-change: scroll-position; /* スクロールの描画を最適化 */
  transform: translateZ(0); /* GPUアクセラレーションを強制 */
}

/* 上段: img27-32 を50%サイズで表示 */
.image-row-top {
  --img-height-top: 18vh; /* メイン行高さの50% */

  position: absolute;
  left: 0;
  right: 0;
  /* メイン行の上に配置 */
  bottom: calc(100vh - 37vh + 18vh + 1rem);

  display: flex;
  flex-direction: row;
  gap: 12px; /* JavaScriptで動的に調整される */
  align-items: flex-end;
  padding: 1rem 1rem 0 1rem;
  height: var(--img-height-top);
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: none;
  scroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
  scroll-padding: 1rem;
  will-change: scroll-position; /* パララックスの描画を最適化 */
  transform: translateZ(0); /* GPUアクセラレーションを強制 */
}

.image-row-top {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.image-row-top::-webkit-scrollbar {
  display: none;
}

.image-row-top img {
  flex: 0 0 auto;
  height: 100%;
  width: auto;
  object-fit: cover;
  border-radius: 0;
  scroll-snap-align: center;
  box-shadow: none;
  transition: transform 180ms ease, opacity 180ms ease;
  opacity: 0.85;
  cursor: pointer;
  will-change: transform, opacity; /* ホバー時の変化を最適化 */
  transform: translateZ(0); /* GPUアクセラレーションを強制 */
}

.image-row-top img:hover {
  opacity: 1;
}

/* 行内スクロールバーを隠し、下部に代理バーを配置 */
.image-row {
  scrollbar-width: none; /* Firefox用 */
  -ms-overflow-style: none; /* IE 10+ 用 */
}
.image-row::-webkit-scrollbar {
  display: none; /* Chrome, Safari 用 */
}

/* 下部に固定する代理スクロールバー */
.scrollbar-proxy {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 14px; /* 表示されるスクロールバーの高さ */
  overflow-x: auto;
  overflow-y: hidden;
  background: transparent;
  z-index: 9999;
}
.scrollbar-inner {
  height: 1px; /* JSでスクロール幅に合わせるための極小要素 */
}

/* 上段用の代理スクロールバー */
.scrollbar-proxy-top {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 32px; /* 他の代理バーの上に重ねる */
  height: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  background: transparent;
  z-index: 9997;
}
.scrollbar-inner-top {
  height: 1px;
}
.scrollbar-proxy-top::-webkit-scrollbar {
  height: 10px;
}
.scrollbar-proxy-top::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.03);
}
.scrollbar-proxy-top::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.18);
  border-radius: 6px;
}

/* 代理スクロールバーのWebKit向けスタイル */
.scrollbar-proxy::-webkit-scrollbar {
  height: 10px;
}
.scrollbar-proxy::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.03);
}
.scrollbar-proxy::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.18);
  border-radius: 6px;
}

/* 2つ目の代理バーは非表示（下部に1本へ集約） */
.scrollbar-proxy-second,
.scrollbar-inner-second {
  display: none;
}

/* ライトボックス（オーバーレイ）のスタイル */
.lightbox {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}
.lightbox.open {
  display: flex;
}
.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
}
.lightbox-panel {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 10001;
}
.lightbox-panel img {
  width: 80%; /* 表示サイズを80%に調整 */
  height: auto;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.6);
}
.lightbox-close {
  position: absolute;
  --button-size: 46px;
  --button-offset-x: calc(50% + 445px);
  --symbol-size: 14px;
  --text-size: 10px;
  
  top: calc(1rem + 5px);
  right: auto;
  left: var(--button-offset-x);
  z-index: 10002;
  width: var(--button-size);
  height: var(--button-size);
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  border: 1px solid #3E2700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 200ms ease;
  padding: 0;
}

.lightbox-close-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.lightbox-close-symbol {
  font-size: var(--symbol-size);
  font-weight: bold;
  color: #3E2700;
  font-family: serif;
  line-height: 1;
}

.lightbox-close-text {
  font-size: var(--text-size);
  font-weight: bold;
  color: #3E2700;
  font-family: serif;
  line-height: 1;
}
.lightbox-close:hover {
  background: rgba(62, 39, 0, 0.05);
}

.image-row::-webkit-scrollbar {
  height: 10px;
}
.image-row::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.04);
}
.image-row::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.18);
  border-radius: 6px;
}

.image-row img {
  flex: 0 0 auto;
  /* 行の高さに合わせて画像の下端を揃える */
  height: 100%;
  width: auto;
  object-fit: cover;
  border-radius: 0;
  scroll-snap-align: center;
  box-shadow: none;
  transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 180ms ease, filter 180ms cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0.95;
  cursor: pointer;
  filter: drop-shadow(0 0 0 transparent);
  transform-origin: center bottom; /* 下端を支点に拡大して背景に沈まないようにする */
  will-change: transform, filter; /* ホバー時の変化を最適化 */
  backface-visibility: hidden; /* レンダリングを安定させる */
  transform: translateZ(0); /* GPUアクセラレーションを強制 */
}

.image-row img:hover {
  transform: scale(1.05) translateY(-2px) translateZ(0); /* わずかに持ち上げ、上端が欠けないようにする */
  box-shadow: none;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 8px rgba(255, 255, 255, 0.4));
}

/* 2段目: img21-26 を1段目の下に配置 */
.image-row-second {
  --img-height-second: 36vh;

  position: absolute;
  left: 0;
  right: 0;
  /* 1段目の下に配置（1段目の下端は37vhなので少し下げる） */
  bottom: calc(100vh - 37vh - var(--img-height-second) - 2rem - 100px);

  display: flex;
  flex-direction: row;
  gap: 600px;
  align-items: flex-end;
  padding: 1rem 1rem 0 1rem;
  height: var(--img-height-second);
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: none; /* パララックスを滑らかにするため無効 */
  scroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
  scroll-padding: 1rem;
  will-change: scroll-position; /* パララックスのスクロール描画を最適化 */
  transform: translateZ(0); /* GPUアクセラレーションを強制 */
}

.image-row-second {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.image-row-second::-webkit-scrollbar {
  display: none;
}

.image-row-second img {
  flex: 0 0 auto;
  height: 60%;
  width: auto;
  object-fit: cover;
  border-radius: 0;
  scroll-snap-align: center;
  box-shadow: none;
  transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 180ms ease, filter 180ms cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0.95;
  cursor: pointer;
  filter: drop-shadow(0 0 0 transparent);
  transform: translateZ(0); /* GPUアクセラレーションを強制 */
  backface-visibility: hidden; /* レンダリングを安定させる */
  will-change: transform, filter; /* ホバー時の変化を最適化 */
}

.image-row-second img:hover {
  transform: scale(1.05) translateY(-2px) translateZ(0);
  box-shadow: none;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 8px rgba(255, 255, 255, 0.4));
}

/* img24専用: 高さ30%に縮小 */
.image-row-second img[alt="img24"] {
  height: 30%;
  margin-left: -500px;
}

/* img23とimg24: ホバーを連動させる */
.image-row-second img[alt="img23"].hovered-group,
.image-row-second img[alt="img24"].hovered-group {
  transform: scale(1.05) translateY(-2px);
  box-shadow: none;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 8px rgba(255, 255, 255, 0.4));
}

/* img23とimg24: 連動ホバーの設定 */
.image-row-second img[alt="img23"],
.image-row-second img[alt="img24"] {
  position: relative;
}

.image-row-second img[alt="img23"]:hover,
.image-row-second img[alt="img24"]:hover,
.image-row-second img[alt="img23"]:hover ~ img[alt="img24"],
.image-row-second img[alt="img24"]:hover {
  transform: scale(1.05) translateY(-2px);
  box-shadow: none;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 8px rgba(255, 255, 255, 0.4));
}

/* 連続して見えるように影を付与 */
.image-row-second img[alt="img23"]:hover,
.image-row-second img[alt="img24"]:hover {
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 8px rgba(255, 255, 255, 0.4));
}

/* 3段目: img33-36 を20%サイズで表示（ホバーなしで背景に馴染ませる） */
.image-row-third {
  --img-height-third: 7.2vh; /* 36vhの20% */

  position: absolute;
  left: 0;
  right: 0;
  /* 2段目の下に配置 */
  bottom: calc(100vh - 37vh - var(--img-height-third) - 2rem - 100px);

  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: flex-end;
  padding: 1rem 1rem 0 1rem;
  height: var(--img-height-third);
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-padding: 1rem;
}

.image-row-third {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.image-row-third::-webkit-scrollbar {
  display: none;
}

/* 余白を確保するためのプレースホルダー */