/* ==========================================================================
   その空間に、選ばれている。— 導入の実績（写真と出典：シーイヤー株式会社のプレスリリース／PR TIMES）
   写真が主役。PCは12列の格子に、横長（8列）・縦長（4列）・半分（6列）を組み合わせて並べる。
   同じ段の写真は同じ高さにそろえる（高さは格子の幅から計算）。写真の色には手を加えない。
   調整の目安：--adoption-gap（写真どうしの間隔）
   ========================================================================== */
.adoption { --adoption-gap: 20px; background: var(--paper); }
.adoption .eyebrow { color: var(--accent-strong); }
.adoption .wrap { border-top: 1px solid var(--line); padding-top: clamp(64px, 8vw, 96px); container-type: inline-size; }

.adoption-list {
  --g: var(--adoption-gap);
  --col: calc((100cqi - 11 * var(--g)) / 12);                 /* 1列の幅 */
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 52px var(--g);
}
.adoption-item { display: flex; flex-direction: column; }
/* 横長と縦長の段：横長（8列・3:2）の高さに、縦長もそろえる */
.adoption-item--wide { grid-column: span 8; }
.adoption-item--tall { grid-column: span 4; }
.adoption-item--wide, .adoption-item--tall { --photo-h: calc((var(--col) * 8 + var(--g) * 7) * 2 / 3); }
/* 半分ずつの段（6列・3:2） */
.adoption-item--half { grid-column: span 6; --photo-h: calc((var(--col) * 6 + var(--g) * 5) * 2 / 3); }

.adoption-photo { margin: 0; overflow: hidden; border-radius: var(--radius-l); background: var(--surface-2); }
.adoption-photo img { display: block; width: 100%; height: var(--photo-h); object-fit: cover; }
.adoption-body { padding: 18px 4px 0; }
.adoption-meta { display: flex; gap: 14px; align-items: baseline; font-size: 12.5px; color: var(--faint); }
.adoption-kind { font-weight: 600; color: var(--accent-strong); }
.adoption-name, .adoption-detail { word-break: auto-phrase; }
.adoption .nowrap { white-space: nowrap; }
.adoption-name { margin-top: 8px; font-size: 19px; font-weight: 600; line-height: 1.5; color: var(--ink); }
.adoption-detail { margin-top: 6px; max-width: 34em; font-size: 14px; line-height: var(--leading); color: var(--muted); }
.adoption-source { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 500; color: var(--accent-strong); }
.adoption-source:hover { text-decoration: underline; text-underline-offset: 4px; }
.adoption-note { margin-top: 36px; font-size: 12.5px; line-height: var(--leading-note); color: var(--faint); }

@media (max-width: 700px) {
  .adoption-list { grid-template-columns: 1fr; row-gap: 40px; }
  .adoption-item--wide, .adoption-item--tall, .adoption-item--half { grid-column: auto; }
  .adoption-photo { border-radius: var(--radius-m); }
  .adoption-photo img { height: auto; aspect-ratio: 3 / 2; }
  .adoption-item--tall .adoption-photo img { aspect-ratio: 4 / 5; }
  .adoption-name { font-size: 17px; }
}

/* ---------- 動き：写真にそっと近づく（ポインターのある端末） ---------- */
html[data-motion="on"] .adoption-photo img { transition: transform 1.2s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  html[data-motion="on"] .adoption-item:hover .adoption-photo img { transform: scale(1.03); }
}