/* ==========================================================================
   ⚠️ 箱（margin / padding）の指定は必ず `.r-car ...` と書く（詳細度 0,2,0 以上）。
      ページ側に `* { margin: 0; padding: 0 }` があると、後に来る分だけ単一クラスが負ける。
      実際に renovy-pet-v2 で何件目かの罫線が添え書きに重なった（2026-10-04）。

   renovy カルーセル — 複数ブロックを並べて横に切り替える型
   正: renovy-web/assets/css/renovy-carousel.css（写し: /parts/renovy-carousel.css）
   規約: 枠で囲まない・角丸なし・影なし。中央だけが主役、左右は薄く小さく。
   前提: renovy-tokens.css を先に読む。
   ========================================================================== */
.r-car {
  --car-w: min(62vw, 720px);   /* 中央ブロックの幅 */
  --car-gap: clamp(16px, 3vw, 40px);
  --car-side: .46;             /* 左右の濃さ */
  --car-scale: .88;            /* 左右の大きさ */
  position: relative;
}

/* 見出し（任意）。英字ラベル → 明朝の見出し → 罫線 */
.r-car .r-car__head { text-align: center; margin-bottom: clamp(24px, 4vw, 40px); }
.r-car__head .label {
  font-family: var(--label); font-style: italic; font-size: 11px;
  letter-spacing: .22em; color: var(--ink-faint); text-transform: uppercase;
}
.r-car__head h2 {
  font-family: var(--serif); font-weight: 400; font-size: clamp(21px, 2.4vw, 29px);
  letter-spacing: .08em; color: var(--ink); margin-top: 12px;
}

/* 走る面。左右は画面の端まで見せる（本文幅で切らない） */
.r-car .r-car__track {
  display: flex; gap: var(--car-gap);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding-block: 8px;
  padding-inline: calc(50% - var(--car-w) / 2);
  scrollbar-width: none; -ms-overflow-style: none;
}
.r-car .r-car__track::-webkit-scrollbar { display: none; }

/* 1枚。既定は「脇」の見た目 */
.r-car .r-car__item {
  flex: 0 0 var(--car-w); scroll-snap-align: center;
  opacity: var(--car-side); transform: scale(var(--car-scale));
  transform-origin: center;
  transition: opacity .45s ease, transform .45s ease;
  will-change: opacity, transform;
}
.r-car .r-car__item.is-on { opacity: 1; transform: scale(1); }

.r-car .r-car__item figure { margin: 0; }
.r-car .r-car__item img { display: block; width: 100%; height: auto; }

/* 添え書き。写真 → 番号 → 見出し → 本文 の順 */
.r-car .r-car__cap { margin-top: 20px; }
.r-car .r-car__cap .n {
  font-family: var(--label); font-style: italic; font-size: 11px;
  letter-spacing: .2em; color: var(--ink-faint);
}
.r-car__cap h3 {
  font-family: var(--serif); font-weight: 400; font-size: clamp(17px, 1.6vw, 21px);
  letter-spacing: .08em; color: var(--ink); margin-top: 8px;
}
.r-car__cap p {
  font-family: var(--jp); font-weight: 400; font-size: 15px; line-height: 2.1;
  letter-spacing: .055em; color: var(--body); margin-top: 12px;
}
/* 脇のブロックの添え書きは読ませない（中央だけ読む） */
.r-car .r-car__item:not(.is-on) .r-car__cap p { visibility: hidden; }

/* 左右のボタン。塗らない・囲まない。明朝の矢印1文字 */
.r-car .r-car__nav {
  /* 写真の中央に置く。添え書きの長さで位置が動かないようにする。
     --car-ratio は写真の 高さ÷幅（既定 0.75 = 4:3）。違う比率のページは上書きする。 */
  position: absolute; top: 0; bottom: auto;
  height: calc(var(--car-w) * var(--car-ratio, .75));
  width: clamp(44px, 8vw, 72px);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: clamp(20px, 2.4vw, 28px);
  color: var(--ink); background: none; border: 0; cursor: pointer;
  opacity: .5; transition: opacity .3s; z-index: 2;
}
.r-car .r-car__nav:hover, .r-car .r-car__nav:focus-visible { opacity: 1; }
.r-car .r-car__nav--prev { left: 0; }
.r-car .r-car__nav--next { right: 0; }
/* 矢印。細い線 2 本の «く» 。見た目の定義がどこにも無く、全ページで矢印が描かれていなかった（2026-10-29） */
.r-car .r-car__chev { width: 12px; height: 12px; border-left: 1px solid currentColor; border-bottom: 1px solid currentColor; }
.r-car .r-car__chev--prev { transform: translateX(2px) rotate(45deg); }
.r-car .r-car__chev--next { transform: translateX(-2px) rotate(-135deg); }

/* 何枚目か。丸や塗りは使わず、短い罫線1本 */
.r-car .r-car__dots { display: flex; gap: 10px; justify-content: center; margin-top: clamp(24px, 4vw, 40px); }
.r-car .r-car__dots button {
  position: relative; width: 28px; height: 1px; padding: 0; border: 0; cursor: pointer;
  background: var(--line); transition: background .3s;
}
.r-car .r-car__dots button[aria-current="true"] { background: var(--ink); }
/* 線は1pxだが、指で押せるように当たりを広げる（44px 確保） */
.r-car .r-car__dots button::after { content: ""; position: absolute; inset: -22px -8px; }

/* 本文幅の中に置いたまま、左右を画面の端まで見切れさせる。
   祖先の余白が何 px でも必ず画面幅いっぱいになる書き方（--pad に依存しない）。 */
.r-car.r-car--bleed { width: 100vw; margin-inline: calc(50% - 50vw); max-width: none; }
.r-car--bleed .r-car__track { padding-inline: calc(50vw - var(--car-w) / 2); }

@media (max-width: 767px) {
  .r-car { --car-w: 74vw; --car-side: .4; --car-scale: .9; }
  .r-car .r-car__nav { width: 36px; }
  .r-car .r-car__cap p { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .r-car .r-car__track { scroll-behavior: auto; }
  .r-car .r-car__item { transition: none; }
}