/* =========================
   Horizontal scroll (GSAP) - cleaned
========================= */
:root{
  /* 横スクロールのカード幅（端末サイズで自動調整） */
  --hcard-w: clamp(280px, 86vw, 420px);
}

.hscroll{ padding-top: 10px; }

/* 背景：画像なし（黄色） */
.hscroll__pin {
  height: 100vh;      /* 画面の高さに合わせる */
  min-height: 100vh;  /* 念のためminも指定 */
  
  display: flex;
  align-items: center; /* これで本当の画面中央に要素が来ます */
  justify-content: center; /* 念のため左右も中央寄せ */
  
  overflow: hidden;
  padding: 0;
  /* ▼▼▼ 追加：画像を上に持ち上げる設定 ▼▼▼ */
  /* 下に余白を作ることで、相対的に中心点が上にずれます */
  /* 8vh 〜 12vh くらいの間で調整すると「いい感じの高さ」になります */
  padding-bottom: 10vh;
  /* 念のため追加（paddingを含めて高さ計算する設定） */
  box-sizing: border-box;
  position: relative;
  z-index: 100 !important;
  background: var(--yellow, #E9C85B);
}

/* 黒いオーバーレイは使わない */
.hscroll__pin::before{ content: none; }

.hscroll__track{
  display: flex;
  gap: clamp(14px, 4vw, 48px);
  will-change: transform;

  /* カード1枚が常に中央に来る左右余白 */
  padding-inline: calc((100vw - var(--hcard-w)) / 2);
}

/* 横スクロール時のカード幅 */
.hscroll .problemCard{
  flex: 0 0 var(--hcard-w);
  margin: 0;
}

/* =========================
   Problem card - single image (SS風：角丸なし＋右影)
========================= */
.problemCard{
  /* 旧スタイルの影響を受けないように最小限で定義 */
  background: transparent;
  padding: 0;
  border-radius: 0;
  display: block;
}

.problemCard--single{
  /* single前提：カード自体は何も持たない */
  background: transparent;
  padding: 0;
  border-radius: 0;
}

/* フレーム（外枠） */
.problemCard--single .problemCard__images{
  position: relative;

  /* うっすらハイライト（黄色背景に馴染ませる） */
  background: rgba(255,255,255,.15);
  padding: 14px;

  border-radius: 0;      /* ←角丸なし */
  overflow: visible;     /* 影を外へ */

  /* 右に落ちる影 + 全体のふわ影 */
  box-shadow:
    18px 16px 0 rgba(0,0,0,.10),
    0 18px 38px rgba(0,0,0,.18);
}

/* 右側の“影の帯”（表紙っぽい感じ） */
.problemCard--single .problemCard__images::after{
  content:"";
  position: absolute;
  top: 10px;
  bottom: 10px;
  right: -18px;
  width: 18px;
  background: rgba(0,0,0,.18);
}

/* 中身：文字込み画像を切らない */
.problemCard--single .problemCard__images img{
  width: 100%;
  height: auto;
  display: block;

  border-radius: 0; /* ←角丸なし */
  background: #fff;

  outline: 1px solid rgba(0,0,0,.06);
  outline-offset: -1px;

  object-fit: contain;
}