@import url("rn-archive-filter.css");
/* 課題解決事例 一覧（archive-solution.php）— 先頭3件を 60° の斜面に沿ってずらした行組み＋4件目以降はカード
   デザイン: build_a_sub5.py solutions_list()。絞り込み帯は rn-archive-filter.css */

/* ---------------- 先頭3件の行組み ---------------- */
.rn-sol-archive__note { font-size: 11px; color: var(--rn-ink); }
.rn-sol-archive__note--more { margin-top: 64px; }
.rn-sol-rows { position: relative; margin-top: 20px; border-bottom: 1px solid var(--rn-line-light); }
.rn-sol-rows::before { content: ""; position: absolute; left: -18px; top: 0; width: 1.5px; height: 100%; background: var(--rn-gold); transform-origin: top left; transform: skewX(30deg); }
.rn-sol-row { --row: 220px; margin-left: calc(var(--i) * var(--row) * 0.57735); border-top: 1px solid var(--rn-line-light); }
.rn-sol-row__link { display: flex; align-items: center; gap: 36px; min-height: var(--row); padding: 20px 0; box-sizing: border-box; color: var(--rn-ink); transition: background .2s; }
.rn-sol-row__link:hover { background: rgba(17, 18, 20, 0.03); }
.rn-sol-row__num { width: 90px; flex-shrink: 0; font-size: 72px; font-weight: 300; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--rn-ink); }
.rn-sol-row__img { width: 250px; height: 170px; flex-shrink: 0; overflow: hidden; background: var(--rn-paper); }
.rn-sol-row__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.rn-sol-row__link:hover .rn-sol-row__img img { transform: scale(1.04); }
.rn-sol-row__body { display: block; flex: 1; min-width: 0; }
.rn-sol-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.rn-sol-row__meta time { margin-right: 8px; font-size: 11.5px; color: rgba(17, 18, 20, 0.6); }
.rn-sol-row__title { margin-top: 10px; font-size: 25px; line-height: 1.5; }
.rn-sol-row__title span { font-size: 17px; color: var(--rn-sub-light); }
.rn-sol-row__excerpt { display: block; margin-top: 8px; font-size: 13.5px; line-height: 1.85; color: var(--rn-sub-light); }
.rn-sol-row__arrow { flex-shrink: 0; padding-right: 8px; }
.rn-sol-row__arrow .rn-arrow { width: 20px; height: 20px; }

/* ---------------- 4件目以降のカード ---------------- */
.rn-sol-cards { margin-top: 14px; }
.rn-sol-cards .rn-card { height: 100%; }
.rn-card__sub { font-size: 13.5px; font-weight: 400; color: var(--rn-sub-light); }

@media (max-width: 1200px) {
  .rn-sol-row { margin-left: calc(var(--i) * 40px); }
  .rn-sol-rows::before { display: none; }
  .rn-sol-row__img { width: 200px; height: 136px; }
}
@media (max-width: 900px) {
  .rn-sol-row { margin-left: calc(var(--i) * 12px); }
  .rn-sol-row__link { flex-wrap: wrap; gap: 14px 16px; min-height: 0; padding: 22px 0; }
  .rn-sol-row__num { width: auto; font-size: 44px; }
  .rn-sol-row__img { order: -1; width: 100%; height: auto; aspect-ratio: 16 / 10; }
  .rn-sol-row__body { flex-basis: 100%; }
  .rn-sol-row__title { font-size: 20px; }
  .rn-sol-row__title span { font-size: 15px; }
  .rn-sol-row__excerpt br { display: none; }
  .rn-sol-row__arrow { display: none; }
}