/* ============================================================
   20-parts.css — ないおと部品(盤カード/一覧カード/連番バンド/入門タイル/
   カテゴリ導入/編集後記/前後ナビ/コメント/節見出し/About/404)
   旧 style.css の R2 §4〜§10 を移設。クラス名は不変。
   ============================================================ */

/* --- 4. 盤カード（もしも かんたんリンク 再スキン） ---------------------- */
.easyLink-box{ display:grid !important; grid-template-columns:120px 1fr !important; gap:22px !important;
  border:1px solid var(--nai-ink) !important; border-radius:0 !important; box-shadow:none !important;
  background:var(--nai-paper) !important; padding:20px !important; margin:var(--nai-s5) 0 !important; }
.easyLink-img .easyLink-img-pht{ border:1px solid var(--nai-rule-mid); }
.easyLink-info-name, .easyLink-info-name a{ font-family:var(--nai-font-jp); font-size:19px;
  font-weight:600; line-height:1.6; letter-spacing:.02em; color:var(--nai-ink);
  border-bottom:none; }
.easyLink-info-maker, .easyLink-info-model{ font-family:var(--nai-font-mono); font-size:10px;
  letter-spacing:.12em; color:var(--nai-meta); }
.easyLink-info-btn{ display:flex; flex-wrap:wrap; gap:10px;
  margin:16px 0 0; padding:0; list-style:none; }
.easyLink-info-btn a{ display:inline-flex; align-items:center; gap:8px;
  background:var(--nai-ink) !important; color:var(--nai-paper) !important;
  border:none !important; border-radius:0 !important; box-shadow:none !important;
  padding:11px 22px; font-family:var(--nai-font-jp); font-size:12.5px; letter-spacing:.08em; }
.easyLink-info-btn a:hover{ background:var(--nai-accent) !important; }
/* Spotify(カスタムボタン)だけブランド色を6pxのドットで残す */
.easyLink-info-btn a.easyLink-info-btn-custom::before{ content:""; display:inline-block;
  width:6px; height:6px; border-radius:50%; background:#1DB954; }
/* DISCヘッダと開示は疑似要素で(記事HTML変更なしで全カードに効かせる) */
.easyLink-box::before{ content:"DISC ／ 取り上げた作品・機材"; grid-column:1 / -1;
  font-family:var(--nai-font-mono); font-size:9.5px; letter-spacing:.18em; color:var(--nai-meta);
  border-bottom:1px solid #D8CFBA; margin:-20px -20px 0; padding:10px 20px; }
.easyLink-box::after{ content:"※ 本欄はアフィリエイト広告を含む"; grid-column:1 / -1;
  font-family:var(--nai-font-mono); font-size:9.5px; letter-spacing:.1em; color:var(--nai-meta);
  border-top:1px solid var(--nai-rule-hair); margin:0 -20px -20px; padding:9px 20px; }
.easyLink-img .easyLink-img-pht{ max-width:100%; height:auto; }
.easyLink-arrow-left, .easyLink-arrow-right{ display:none; }
@media (max-width:700px){
  .easyLink-box{ grid-template-columns:1fr; }
  .easyLink-info-btn{ flex-direction:column; }
  .easyLink-info-btn a{ justify-content:center; }
}

/* --- 5. 一覧カード（A型）・連番バンド ---------------------------------- */
.nai-card{ display:grid; grid-template-columns:150px 1fr; gap:var(--nai-s4);
  align-items:start; padding:22px 0; border-bottom:1px solid var(--nai-rule-thin);
  color:var(--nai-ink); text-decoration:none; }
.nai-card:last-of-type{ border-bottom:1px solid var(--nai-ink); }
.nai-card-meta{ display:flex; align-items:baseline; gap:var(--nai-s2); margin-bottom:7px;
  font-family:var(--nai-font-mono); font-size:9.5px; letter-spacing:.16em; color:var(--nai-meta); }
.nai-card-kicker{ font-size:15px; line-height:1.6; color:var(--nai-accent); margin-bottom:4px; }
.nai-card-title{ font-size:var(--nai-fs-card); font-weight:600; line-height:1.55; margin-bottom:8px; }
.nai-card-lead{ margin:0; font-size:13px; line-height:1.9; color:var(--nai-ink-3); }
.nai-card--feature{ grid-template-columns:340px 1fr; border-bottom:1px solid var(--nai-ink); }
.nai-card--feature .nai-card-title{ font-size:27px; }
.nai-run{ display:flex; align-items:baseline; gap:14px; padding:16px 0 8px;
  border-bottom:1px solid var(--nai-ink); font-family:var(--nai-font-mono);
  font-size:var(--nai-fs-meta); letter-spacing:.2em; color:var(--nai-ink); }
.nai-run em{ font-family:var(--nai-font-jp); font-style:normal; font-size:12px;
  letter-spacing:0; color:var(--nai-ink-3); }
.nai-run a{ margin-left:auto; letter-spacing:.14em; }
@media (max-width:700px){
  .nai-card{ grid-template-columns:96px 1fr; gap:14px; padding:16px 0; }
  .nai-card-lead{ display:none; }
  .nai-card-kicker{ font-size:12.5px; }
  .nai-card--feature{ grid-template-columns:1fr; }
  .nai-card--feature .nai-card-title{ font-size:20px; }
}

/* --- 6. 入門タイル ------------------------------------------------------ */
.nai-guides{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.nai-guide{ display:flex; flex-direction:column; min-height:132px; padding:15px;
  background:var(--nai-paper); border:1px solid #D8CFBA;
  color:var(--nai-ink); text-decoration:none; }
.nai-guide-cat{ font-family:var(--nai-font-mono); font-size:9px; letter-spacing:.16em;
  color:var(--nai-meta); }
.nai-guide-title{ margin-top:auto; font-size:15px; font-weight:600; line-height:1.6; }
.nai-guide-sub{ margin-top:6px; font-size:11.5px; line-height:1.7; color:var(--nai-ink-3); }
.nai-guide:hover{ border-color:var(--nai-ink); }
@media (max-width:700px){
  .nai-guides{ grid-template-columns:1fr 1fr; gap:10px; }
  .nai-guide{ min-height:96px; padding:12px; }
  .nai-guide:last-child{ grid-column:1 / -1; min-height:0; }
}

/* --- 7. カテゴリ導入・子カテゴリチップ --------------------------------- */
.nai-cat-intro{ max-width:44em; margin:20px 0 var(--nai-s4); font-size:14.5px;
  line-height:2.05; color:var(--nai-ink-2); }
.nai-cat-hub{ display:grid; grid-template-columns:220px 1fr; gap:var(--nai-s4);
  align-items:start; padding:20px; margin:0 0 var(--nai-s5);
  background:var(--nai-paper); border:1px solid var(--nai-ink); }
.nai-cat-hub-label{ font-family:var(--nai-font-mono); font-size:9.5px;
  letter-spacing:.2em; color:var(--nai-accent); margin-bottom:10px; }
.nai-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.nai-chip{ display:inline-flex; align-items:baseline; gap:8px; padding:7px 13px;
  background:var(--nai-paper); border:1px solid var(--nai-rule-mid);
  font-size:12.5px; color:var(--nai-ink-2); text-decoration:none; }
.nai-chip b{ font-family:var(--nai-font-mono); font-size:10px; font-weight:400;
  color:var(--nai-meta-2); }
.nai-chip:hover, .nai-chip[aria-current="page"]{ border-color:var(--nai-ink); color:var(--nai-ink); }
@media (max-width:700px){ .nai-cat-hub{ grid-template-columns:1fr; } }

/* --- 9. 編集後記・前後ナビ・コメント ----------------------------------- */
.nai-note{ margin:var(--nai-s6) 0 0; padding-top:var(--nai-s3);
  border-top:1px solid var(--nai-ink); }
.nai-note-head{ margin-bottom:var(--nai-s2); font-family:var(--nai-font-mono);
  font-size:var(--nai-fs-meta); letter-spacing:.24em; color:var(--nai-meta); }
.nai-note p{ margin:0 0 14px; font-size:14.5px; line-height:2.1; color:#3A352E; }
.nai-note-sign{ text-align:right; font-size:13px; letter-spacing:.06em; }
.nai-adjacent{ display:grid; grid-template-columns:1fr 1fr; gap:1px;
  margin:var(--nai-s5) 0 0; background:#D3CAB5; border:1px solid #D3CAB5; }
.nai-adjacent a{ padding:18px 20px; background:var(--nai-paper);
  color:var(--nai-ink); text-decoration:none; }
.nai-adjacent a + a{ text-align:right; }
.nai-adjacent span{ display:block; margin-bottom:9px; font-family:var(--nai-font-mono);
  font-size:9.5px; letter-spacing:.18em; color:var(--nai-meta); }
.nai-comments{ margin:var(--nai-s6) 0 0; padding-top:var(--nai-s3);
  border-top:1px solid var(--nai-ink); }
.nai-comments summary{ display:flex; align-items:center; gap:14px; list-style:none;
  cursor:pointer; font-family:var(--nai-font-mono); font-size:var(--nai-fs-meta);
  letter-spacing:.2em; color:var(--nai-meta); }
.nai-comments summary::-webkit-details-marker{ display:none; }
.nai-comments summary b{ margin-left:auto; padding:9px 18px; border:1px solid var(--nai-ink);
  font-family:var(--nai-font-jp); font-size:12.5px; font-weight:400;
  letter-spacing:.06em; color:var(--nai-ink); }
@media (max-width:700px){
  .nai-adjacent{ grid-template-columns:1fr; }
  .nai-adjacent a + a{ text-align:left; }
}

/* --- 10. 節見出し・About・404・広告表記 -------------------------------- */
.nai-sec-head{ display:flex; align-items:center; gap:14px; margin-bottom:var(--nai-s1); }
.nai-sec-head h2, .nai-sec-head h3{ margin:0; padding:0; border:none; background:none;
  font-size:17px; font-weight:600; letter-spacing:.08em; }
.nai-sec-head small{ font-family:var(--nai-font-mono); font-size:var(--nai-fs-meta);
  letter-spacing:.16em; color:var(--nai-meta-2); }
.nai-sec-head i{ flex:1; height:4px; border-top:1px solid var(--nai-ink);
  border-bottom:1px solid var(--nai-ink); }
.nai-about{ padding:18px; background:var(--nai-paper); border:1px solid #D8CFBA; }
.nai-about p{ margin:0 0 var(--nai-s2); font-size:12px; line-height:1.95; color:var(--nai-ink-2); }
.nai-404{ width:760px; max-width:100%; margin:0 auto; padding:56px 0 20px; text-align:center; }
.nai-404-num{ font-family:var(--nai-font-latin); font-size:112px; line-height:1;
  color:var(--nai-accent); }
.nai-404 h1{ margin:26px 0 var(--nai-s3); font-size:27px; font-weight:600; letter-spacing:.06em; }
.nai-404 p{ max-width:34em; margin:0 auto var(--nai-s5); font-size:14.5px;
  line-height:2.05; color:var(--nai-ink-2); }
.nai-search{ display:flex; max-width:480px; margin:0 auto;
  background:var(--nai-paper); border:1px solid var(--nai-ink); }
.nai-search input{ flex:1; padding:13px 14px; font-family:var(--nai-font-jp);
  font-size:13px; background:none; border:none; }
.nai-search button{ padding:13px 22px; background:var(--nai-ink); color:var(--nai-paper);
  border:none; font-family:var(--nai-font-jp); font-size:12.5px; letter-spacing:.08em; cursor:pointer; }
.nai-ad-note{ padding:14px 0; text-align:center; font-size:12px; color:var(--nai-ink-2);
  background:var(--nai-paper); border-top:1px solid var(--nai-rule-mid); }
@media (max-width:700px){
  .nai-404{ padding:34px 16px 16px; }
  .nai-404-num{ font-size:76px; }
}