/*
 * 足柄びより 記事固有コンポーネントCSS
 * ============================================================
 * バージョン: 1.0.0
 * 作成日: 2026-03-18
 * 元ファイル: article-styles-v2.css からの移行
 *
 * このファイルは子テーマ style.css に含まれていない
 * 記事固有コンポーネントのスタイルを定義する。
 * style.css の後に読み込まれる（functions.php で依存関係設定済み）。
 *
 * 含まれるコンポーネント:
 *   - 目次（ToC）
 *   - FAQ（カード型）
 *   - スクロールヒント
 *   - インフォグラフィック
 *   - コースカード（テーマカラー3種）
 *   - タイムライン（テーマカラー3種）
 *   - CTA sponsored リンク（a[rel*="sponsored"]）
 *   - 安全注意ボックス
 *   - PracticalInfoBox 旧クラス互換（h4, .info-grid, .info-label）
 *
 * style.css と重複する定義は含まない:
 *   - ベースフォント / 見出し / blockquote / テーブル基本 / リンク色
 *   - .pr-notice / .practical-info-box（BEM構造）
 * ============================================================ */

/* ==========================================================================
   1. 目次（ToC）
   ========================================================================== */
.toc-container {
  background: var(--as-bg-warm, #f7fafa);
  border: 1px solid var(--as-border, #E5E7EB);
  border-radius: 12px;
  padding: 20px 24px;
  margin: 1.5em 0 2em;
}
.toc-container .toc-title {
  font-size: 1rem;
  font-weight: bold;
  color: var(--as-primary, #1A6B5A);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--as-border, #E5E7EB);
}
.toc-container ol {
  margin: 0;
  padding-left: 1.5em;
  list-style: none;
  counter-reset: toc;
}
.toc-container li {
  margin: 6px 0;
  font-size: 0.9rem;
  line-height: 1.6;
  counter-increment: toc;
}
.toc-container li::before {
  content: counter(toc) ". ";
  color: var(--as-primary, #1A6B5A);
  font-weight: bold;
}
.toc-container a {
  color: #555;
  text-decoration: none;
}
.toc-container a:hover {
  color: var(--as-primary, #1A6B5A);
  text-decoration: underline;
}

/* ==========================================================================
   2. FAQ — カード型デザイン
   ========================================================================== */
.faq-section {
  margin: 1.5em 0;
}
.faq-item {
  margin-bottom: 12px;
  border: 1px solid var(--as-border, #E5E7EB);
  border-radius: 8px;
  overflow: hidden;
}
.faq-question {
  background: var(--as-bg-warm, #f7fafa);
  padding: 14px 16px;
  font-weight: bold;
  font-size: 0.95rem;
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
}
.faq-question .q-badge {
  background: var(--as-primary, #1A6B5A);
  color: #fff;
  border-radius: 50%;
  min-width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  flex-shrink: 0;
}
.faq-answer {
  padding: 14px 16px 14px 52px;
  font-size: 0.9rem;
  line-height: 1.8;
  margin: 0;
}

/* ==========================================================================
   3. スクロールヒント
   ========================================================================== */
.scroll-hint {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--as-text-muted, #9CA3AF);
  margin-top: 6px;
  padding-right: 4px;
}

/* ==========================================================================
   4. インフォグラフィック
   ========================================================================== */
.infographic-container {
  margin: 1.5em auto;
}
.infographic-container svg {
  max-width: 100%;
  height: auto;
}

/* ==========================================================================
   5. コースカード（テーマカラー3種）
   ========================================================================== */
.course-card {
  border: 1px solid var(--as-border, #E5E7EB);
  border-radius: 12px;
  overflow: hidden;
  margin: 1.5em 0 2em;
  background: #fff;
}
.course-header {
  padding: 14px 20px;
  font-weight: bold;
  font-size: 1.05rem;
  color: #fff;
}
.course-header.theme-a { background: var(--as-primary, #1A6B5A); }
.course-header.theme-b { background: #2D7D9A; }
.course-header.theme-c { background: #8B6914; }
.course-body {
  padding: 16px 20px;
}
.course-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
}
.tag-theme { background: #e8f5e9; color: #2e7d32; }
.tag-difficulty { background: #fff3e0; color: #e65100; }
.tag-season { background: #fce4ec; color: #c62828; }

/* ==========================================================================
   6. タイムライン（テーマカラー3種）
   ========================================================================== */
.timeline {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  position: relative;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 52px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--as-border, #E5E7EB);
}
.timeline li {
  display: flex;
  align-items: flex-start;
  padding: 8px 0;
  position: relative;
  font-size: 0.9rem;
  line-height: 1.6;
}
.tl-time {
  min-width: 44px;
  font-weight: bold;
  color: var(--as-primary, #1A6B5A);
  font-size: 0.9rem;
  padding-top: 2px;
}
.tl-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--as-primary, #1A6B5A);
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px var(--as-primary, #1A6B5A);
  margin: 5px 12px 0;
  flex-shrink: 0;
  z-index: 1;
}
.dot-b { background: #2D7D9A; box-shadow: 0 0 0 2px #2D7D9A; }
.dot-c { background: #8B6914; box-shadow: 0 0 0 2px #8B6914; }
.tl-content {
  flex: 1;
}
.tl-action {
  font-weight: bold;
  color: #333;
}
.tl-detail {
  display: block;
  font-size: 0.82rem;
  color: #777;
  margin-top: 2px;
}

/* ==========================================================================
   7. CTA — sponsored リンクボタン
   ========================================================================== */
a[rel*="sponsored"] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: var(--as-cta, #E67635);
  color: #fff;
  font-weight: bold;
  font-size: 0.95rem;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 3px 10px rgba(230, 118, 53, 0.3);
  transition: all 0.25s ease;
}
a[rel*="sponsored"]:hover {
  background: #d5682e;
  box-shadow: 0 5px 15px rgba(230, 118, 53, 0.45);
  transform: translateY(-1px);
}

/* ==========================================================================
   8. 安全注意ボックス
   ========================================================================== */
div[style*="FFF3E0"],
div[style*="FEF3C7"] {
  font-size: 0.9rem;
  line-height: 1.8;
}

/* ==========================================================================
   9. PracticalInfoBox — 旧クラス互換
   記事HTMLが旧構造（h4, .info-grid, .info-label）を使用している場合の互換
   子テーマ style.css の BEM構造（__header, __body, __grid）とは別
   ========================================================================== */
.practical-info-box h4 {
  background: var(--as-primary, #1A6B5A);
  color: #fff;
  margin: 0;
  padding: 12px 20px;
  font-size: 1rem;
  border-radius: 0;
}
.practical-info-box .info-grid {
  padding: 16px 20px;
  font-size: 0.9rem;
  line-height: 1.7;
  gap: 0.5em 1em;
}
.practical-info-box .info-label {
  font-size: 0.85rem;
  font-weight: bold;
  color: var(--as-primary, #1A6B5A);
}

/* ==========================================================================
   10. モバイル対応
   ========================================================================== */
@media (max-width: 768px) {
  .toc-container { padding: 16px; }
  .faq-answer { padding-left: 16px; }
  .course-meta { gap: 6px; }
  .tag { font-size: 0.75rem; padding: 2px 8px; }
  .timeline::before { left: 44px; }
  .tl-time { min-width: 38px; font-size: 0.82rem; }
}