/* ==========================================================================
   アコーディオン（<details>/<summary>）— 宅建業の主力ページ用
   適用範囲：.acc / .acc-list / .acc-cta / .acc-tools のみ。他のページには影響しない。
   本文は初期HTMLにすべて含める。JavaScriptがなくても開閉できる（標準の details）。
   ========================================================================== */

.article-body .acc-list { margin: 0 0 40px; border-top: 1px solid var(--ink); }
.article-body .acc-list + .acc-list { margin-top: -24px; }

/* ---- 項目 ---- */
.article-body .acc {
  border-bottom: 1px solid var(--line);
  --shu: #B03A2E;
}
.article-body .acc > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  column-gap: 16px;
  align-items: center;
  min-height: 64px;
  padding: 18px 4px 18px 6px;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.3s var(--ease);
}
.article-body .acc > summary::-webkit-details-marker { display: none; }
.article-body .acc > summary::marker { content: ""; }
.article-body .acc > summary:hover { background: var(--washi); }
.article-body .acc > summary:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}
/* 番号つき（01〜） */
.article-body .acc--num > summary { grid-template-columns: 44px minmax(0, 1fr) 24px; }
.acc-n {
  grid-row: 1 / span 2;
  font-family: var(--font-en);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--shu);
}
.article-body .acc .acc-title {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--font-jp-heading);
  font-size: 17.5px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.acc-desc {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--charcoal);
  opacity: 0.85;
}
/* ＋／− 表示（細い線で描画） */
.article-body .acc > summary::after {
  content: "";
  grid-column: -2;
  grid-row: 1 / span 2;
  justify-self: end;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(var(--ink), var(--ink)) center / 100% 1.5px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 1.5px 100% no-repeat;
  transition: background-size 0.25s var(--ease);
}
.article-body .acc[open] > summary::after {
  background-size: 100% 1.5px, 1.5px 0;
}
.article-body .acc[open] > summary { background: var(--washi); }

/* ---- 展開部分 ---- */
.article-body .acc-body { padding: 8px 6px 26px 6px; }
.article-body .acc--num > .acc-body { padding-left: 66px; }
.article-body .acc-body > :last-child { margin-bottom: 0; }
.article-body .acc-body h3 { font-size: 16px; margin: 22px 0 8px; }

/* よくある質問：質問を項目名に */
.article-body .acc--faq .acc-title { font-size: 16px; }
.article-body .acc--faq .acc-title::before {
  content: "Q. ";
  color: var(--shu);
  font-family: var(--font-en);
  font-weight: 600;
}

/* コラム一覧：リンクの列を整える */
.article-body .acc-body ul li a { text-underline-offset: 4px; }

/* ---- 項目の間の短い相談導線（新しいカードは作らず、罫線で区切る） ---- */
.article-body .acc-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  margin: -12px 0 48px;
  padding: 18px 0 18px 18px;
  border-left: 2px solid var(--shu, #B03A2E);
}
.article-body .acc-cta p { margin: 0; font-size: 14px; line-height: 1.8; color: var(--ink); flex: 1 1 260px; }
.article-body .acc-cta .btn-primary { background: #B03A2E; border-color: #B03A2E; color: #fff; }
.article-body .acc-cta .btn-primary:hover { background: #8E2C22; border-color: #8E2C22; }

/* ---- すべて開く／閉じる（JSがあるときだけ表示） ---- */
.acc-tools { display: flex; justify-content: flex-end; margin: 0 0 14px; }
.acc-toggle-all {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--ink);
  padding: 4px 2px;
  font-family: var(--font-jp-body);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--ink);
  cursor: pointer;
}
.acc-toggle-all:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ---- セクション見出し（アコーディオンの群の頭） ---- */
.article-body h2.acc-group-title { margin-top: 56px; padding-top: 0; border-top: 0; }

@media (max-width: 640px) {
  .article-body .acc > summary { min-height: 60px; padding: 16px 0 16px 2px; column-gap: 12px; }
  .article-body .acc--num > summary { grid-template-columns: 34px minmax(0, 1fr) 20px; }
  .article-body .acc .acc-title { font-size: 16px; }
  .article-body .acc-body { padding: 4px 2px 22px; }
  .article-body .acc--num > .acc-body { padding-left: 2px; }
  .article-body .acc-cta { padding-left: 14px; margin-bottom: 40px; }
  .article-body .acc-cta .btn { width: 100%; }
}

/* 印刷時は本文を読めるように */
@media print {
  .article-body .acc > summary::after { display: none; }
}