/* 2026-09-27: 簿記3級記事の末尾のみ。勉強方法の記事と同じFAQ・関連記事の見せ方。
   本文・図解・サービス案内には適用しない。 */
body.grade3-reading main > section.public-section.grade3-end-faq {
  padding: 64px 0;
  background: #e8f1ec;
  border-top: 1px solid #d3e2d9;
}
body.grade3-reading main > section.public-section.grade3-end-related {
  padding: 48px 0;
  background: #e8f1ec; /* FAQと同じ背景色 */
  border-top: 1px solid #dce5df;
}
.grade3-reading :is(.grade3-end-faq, .grade3-end-related) { scroll-margin-top: 110px; }
.grade3-reading main :is(.grade3-end-faq, .grade3-end-related) h2 {
  margin: 0 0 28px;
  padding: 0;
  border: 0;
  color: #183c42;
  font-size: clamp(23px, 2.6vw, 28px);
}
.grade3-reading .grade3-end-faq-list { display: grid; gap: 12px; }
.grade3-reading .grade3-end-faq-item {
  padding: 0;
  margin: 0;
  background: #fff;
  border: 1px solid #dce6e0;
  border-radius: 10px;
  overflow: hidden;
}
.grade3-reading .grade3-end-faq-item[open] { border-color: #99b6a9; }
.grade3-reading .grade3-end-faq-item summary {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 26px;
  align-items: center;
  gap: 16px;
  padding: 23px 26px;
  list-style: none;
  color: #1c4238;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.85;
  cursor: pointer;
}
.grade3-reading .grade3-end-faq-item summary::-webkit-details-marker { display: none; }
.grade3-reading .grade3-end-faq-item summary::after { content: none; }
.grade3-reading .grade3-end-q,
.grade3-reading .grade3-end-answer > span { color: #477f69; font-size: 12px; font-weight: 700; }
.grade3-reading .grade3-end-toggle { position: relative; width: 26px; height: 26px; background: #edf4f0; border-radius: 50%; }
.grade3-reading .grade3-end-toggle::before,
.grade3-reading .grade3-end-toggle::after { content: ''; position: absolute; top: 12px; left: 8px; width: 10px; height: 2px; background: #386d56; }
.grade3-reading .grade3-end-toggle::after { transform: rotate(90deg); }
.grade3-reading details[open] .grade3-end-toggle::after { transform: none; }
.grade3-reading .grade3-end-answer { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 16px; padding: 0 68px 25px 26px; }
.grade3-reading main .grade3-end-answer p { margin: 0; font-size: 15px; font-weight: 400; line-height: 2; color: #43594f; }
.grade3-reading .grade3-end-related-list { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid #dce5df; }
.grade3-reading .grade3-end-related-link { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 4px; border-bottom: 1px solid #dce5df; border-radius: 0; background: transparent; color: #244c3e; font-size: 15px; line-height: 1.8; font-weight: 600; text-decoration: none; }
.grade3-reading .grade3-end-related-link > span:first-child { min-width: 0; }
.grade3-reading .grade3-end-related-link strong { color: inherit; }
.grade3-reading .grade3-end-related-link .grade3-link-description { display: block; margin-top: 10px; padding-left: 20px; color: #526278; font-size: 14px; font-weight: 400; }
.grade3-reading .grade3-end-arrow { flex-shrink: 0; color: #507b65; }
.grade3-reading .grade3-end-related-link:hover { background: #f4f7f5; }
.grade3-reading .grade3-end-related-link:hover strong { text-decoration: underline; text-underline-offset: 4px; }
.grade3-reading .grade3-end-faq-item summary:focus-visible { outline-offset: -4px; }
@media (max-width: 600px) {
  body.grade3-reading main > section.public-section.grade3-end-faq,
  body.grade3-reading main > section.public-section.grade3-end-related { padding: 36px 0; }
  .grade3-reading .grade3-end-faq-item summary { grid-template-columns: 22px minmax(0, 1fr) 26px; gap: 10px; padding: 20px 16px; font-size: 14px; }
  .grade3-reading .grade3-end-answer { grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 0 18px 22px 16px; }
  .grade3-reading main .grade3-end-answer p { font-size: 14px; }
  .grade3-reading .grade3-end-related-link { gap: 14px; padding: 18px 0; font-size: 14px; }
}

/* 関連記事の説明文はタイトルから字下げし、本文との階層を示す。 */
@media (max-width: 600px) {
  .grade3-reading .grade3-end-related-link .grade3-link-description { padding-left: 14px; }
}