/* Topics page styles */
body.page-template-page-topics,
#topics-page {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: 'Zen Kaku Gothic New', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans JP', sans-serif;
}

/* 最新トピックス */
.topics-latest {
  padding: 72px 0 120px;
}

.section-title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 28px;
  border-left: 6px solid var(--c-accent);
  padding-left: 12px;
}

.topics-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,0.05);
  transition: transform .25s ease, box-shadow .25s ease;
}

.topics-card__media { 
  width: 100%; 
  background: #f7fbfc; 
  border-radius: 16px 16px 0 0;
  overflow: hidden;
}
.topics-card__thumb { 
  width: 100%; 
  height: auto; 
  display: block; 
  max-height: 400px;
  object-fit: cover;
}
.topics-card__thumb--placeholder { 
  width: 100%; 
  height: 200px; 
  background: repeating-linear-gradient(45deg, #eef7fa, #eef7fa 10px, #e4f3f8 10px, #e4f3f8 20px); 
}

.topics-card__body { 
  padding: 24px; 
}
.topics-card__date { color: var(--c-gray); font-size: 14px; display: block; margin-bottom: 6px; }
.topics-card__title { font-size: 20px; font-weight: 700; margin: 6px 0 10px; line-height: 1.6; }
.topics-card__content { 
  color: #333; 
  line-height: 1.9; 
  margin-bottom: 16px;
}

.topics-card__content p {
  margin-bottom: 16px;
}

.topics-card__content p:last-child {
  margin-bottom: 0;
}

.topics-card__content h1,
.topics-card__content h2,
.topics-card__content h3,
.topics-card__content h4,
.topics-card__content h5,
.topics-card__content h6 {
  margin: 24px 0 16px 0;
  font-weight: 700;
  line-height: 1.4;
}

.topics-card__content h1 { font-size: 24px; }
.topics-card__content h2 { font-size: 22px; }
.topics-card__content h3 { font-size: 20px; }
.topics-card__content h4 { font-size: 18px; }
.topics-card__content h5 { font-size: 16px; }
.topics-card__content h6 { font-size: 14px; }

.topics-card__content ul,
.topics-card__content ol {
  margin: 16px 0;
  padding-left: 24px;
}

.topics-card__content li {
  margin-bottom: 8px;
}

.topics-card__content blockquote {
  border-left: 4px solid var(--c-accent);
  padding-left: 16px;
  margin: 16px 0;
  font-style: italic;
  color: #666;
}

.topics-card__content img {
  max-width: 100%;
  height: auto;
  margin: 16px 0;
  border-radius: 8px;
}

.topics-card__content table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
}

.topics-card__content th,
.topics-card__content td {
  border: 1px solid #ddd;
  padding: 8px 12px;
  text-align: left;
}

.topics-card__content th {
  background-color: #f8f9fa;
  font-weight: 600;
}


.topics-empty { color: var(--c-gray); font-style: italic; }

/* レスポンシブ */
@media (max-width: 960px) {
  .topics-card__body { padding: 20px; }
}

@media (max-width: 600px) {
  .section-title { font-size: 22px; }
  .topics-card__title { font-size: 18px; }
}

/* ---- 以下、参考CSSからの有用スタイルをスコープして追記 ---- */

/* スコープされた軽量リセットとタイポ調整 */
#topics-page *,
body.page-template-page-topics * {
  box-sizing: border-box;
}

#topics-page img {
  max-width: 100%;
  height: auto;
  display: block;
}

#topics-page a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

#topics-page h2,
#topics-page h3 {
  line-height: 1.3;
  letter-spacing: 0.02em;
}

/* SVGの品質向上とアニメーション下準備（旧ラインSVGの名残。現状は影響なし） */
.st1 {
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.js--contents--svg {
  transition: stroke-dashoffset 1.2s ease;
}

/* セクションの間隔強化（余白多めのデザイン） */
#topics-page .topics-latest { margin-block-start: 0; }

/* タイトルのサイズをclampで可変に */
.section-title {
  font-size: clamp(22px, 2.3vw, 28px);
}

/* カードの視覚効果と比率制御 */
.topics-card__media {
  position: relative;
  background: #f7fbfc;
}

.topics-card__thumb,
.topics-card__thumb--placeholder {
  aspect-ratio: 16 / 9;
}

.topics-card__link:hover .topics-card__thumb {
  filter: saturate(1.05);
}

/* prefers-reduced-motion への配慮 */
@media (prefers-reduced-motion: reduce) {
  .js--contents--svg { transition: none; }
  .topics-card__link:hover { transform: none; box-shadow: 0 10px 24px rgba(0,0,0,0.05); }
}