@charset "UTF-8";

/* =========================================================
   トプ100 ｜ 今回の対象外（includes/excluded.php・代表指示 2026-09-11）
   ---------------------------------------------------------
   流れの札3つ → 理由ごとの枠（件数＋理由＋代表例） → 注記の箇条書き。
   色は base.css の変数だけ。枠の作りは上位カードの良い点／気になる点の枠と同じ型
   （見出し帯＋白地）にして、記事の中で目が慣れた形を使い回す。
   ========================================================= */

.excluded { margin-top: 24px; }

.ranking-article .excluded__intro { margin-top: 0; }

/* ---------- 流れ：集めた → 順位を付けた → 載せられなかった ---------- */

.ranking-article .excluded__flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.ranking-article .excluded__step {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 12px 16px;
  background: var(--paper-2);
  border: 1px solid var(--hair);
  border-radius: var(--radius-md);
}

/* 最後の札（載せられなかった）だけ薄い柿色＝この節の主題 */
.ranking-article .excluded__step:last-child {
  background: var(--kaki-tint);
  border-color: var(--kaki-light);
}

.excluded__step-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

.excluded__step-count {
  font-family: var(--num);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink-deep);
}

.excluded__step:last-child .excluded__step-count { color: var(--kaki); }

.excluded__step-count small {
  margin-left: 2px;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--ink-soft);
}

.excluded__step-sub {
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ---------- 理由ごとの枠 ---------- */

.excluded__groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;   /* 片方の「すべて見る」を開いても隣の枠が伸びない */
  margin-top: 16px;
}

/* 奇数個のときの最後の枠は横いっぱい */
.excluded__group:last-child:nth-child(odd) { grid-column: 1 / -1; }

.excluded__group {
  min-width: 0;
  background: var(--paper);
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.ranking-article .excluded__title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  max-width: none;
  margin: 0;
  padding: 8px 12px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--hair);
  font-size: 0.875rem;
  line-height: 1.5;
}

.excluded__count {
  flex: 0 0 auto;
  font-family: var(--num);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--kaki);
}

.excluded__count small {
  margin-left: 1px;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--ink-soft);
}

.ranking-article .excluded__why {
  margin: 0;
  padding: 12px 12px 0;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--ink);
}

.ranking-article .excluded__examples {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 8px 12px 12px 24px;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.ranking-article .excluded__examples li { margin: 0; }

/* ---------- 「N件をすべて見る」の開閉（<details>・JS不要） ---------- */

.excluded__all {
  border-top: 1px solid var(--hair);
}

.excluded__all-summary {
  padding: 8px 12px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--kaki);
  cursor: pointer;
  list-style: none;                 /* 標準の三角は使わず、文の頭に自前の印 */
}

.excluded__all-summary::-webkit-details-marker { display: none; }

.excluded__all-summary::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  vertical-align: 2px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);        /* 閉じているとき右向き */
  transition: transform var(--transition);
}

.excluded__all[open] > .excluded__all-summary::before { transform: rotate(45deg); }   /* 開くと下向き */

.excluded__all-summary:hover,
.excluded__all-summary:focus-visible { background: var(--kaki-tint); }

/* 名前の一覧＝多い枠は2列（横いっぱいの枠は3列）。項目の途中で列が割れないように */
.ranking-article .excluded__names {
  columns: 2;
  column-gap: 16px;
  margin: 0;
  padding: 4px 12px 12px 24px;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.excluded__group:last-child:nth-child(odd) .excluded__names { columns: 3; }

.ranking-article .excluded__names li {
  margin: 0 0 2px;
  break-inside: avoid;
}

.excluded__names-n { margin-left: 2px; color: var(--ink-faint); }

.excluded__names-note {
  margin-left: 6px;
  color: var(--ink-faint);
}

.excluded__names-note::before { content: "— "; }

/* ---------- 注記 ---------- */

.excluded__notes {
  margin-top: 24px;
  padding: 12px 16px;
  border-left: 2px solid var(--hair-strong);
}

.ranking-article .excluded__notes-title {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}

.ranking-article .excluded__notes-list {
  display: grid;
  gap: 8px;
  margin: 8px 0 0;
  padding-left: 20px;
  font-size: 0.8125rem;
  line-height: 1.8;
  color: var(--ink-soft);
}

.ranking-article .excluded__notes-list li { margin: 0; }

.excluded__notes-lead {
  margin-right: 4px;
  color: var(--ink-deep);
  background: none;   /* 本文の strong の下線マーカーは付けない */
}

@media (max-width: 767px) {
  .ranking-article .excluded__flow,
  .excluded__groups { grid-template-columns: 1fr; }
  .excluded__group:last-child:nth-child(odd) { grid-column: auto; }
  .ranking-article .excluded__names,
  .excluded__group:last-child:nth-child(odd) .excluded__names { columns: 1; }
}