/* =============================================================
   アスザック コラムシリーズ 共通CSS
   置き場所: 外観 → カスタマイズ → 追加CSS にこのまま貼り付け
   方針: .azc- で名前空間を切り、テーマCSSと衝突しないようにする
   配色: 信頼感のあるブルー系
   ============================================================= */

/* ---- カラー変数（ここだけ変えれば全体の色が変わる） ---- */
:root {
  --azc-primary:      #1c5da8;   /* メインのブルー */
  --azc-primary-dark: #15457d;   /* 見出し・リンクhover */
  --azc-accent:       #2f80ed;   /* アクセント（細い線・強調） */
  --azc-ink:          #1f2933;   /* 本文テキスト */
  --azc-muted:        #5b6b7b;   /* 補足テキスト */
  --azc-line:         #d9e2ec;   /* 罫線 */
  --azc-bg-soft:      #f4f8fd;   /* 淡いブルーの背景 */
  --azc-bg-cta:       #eef5fc;   /* CTA背景 */
  --azc-radius:       10px;
}

/* ---- 記事本文のラッパ（任意：本文全体を .azc-article で囲むと効く） ---- */
.azc-article {
  color: var(--azc-ink);
  line-height: 1.85;
  font-size: 1.02rem;
}
.azc-article p {
  margin: 0 0 1.4em !important;
  font-size: 1.02rem;
  line-height: 1.85;
}
.azc-article strong, .azc-article b { font-weight: 700 !important; }

/* ---- 見出し ----
   azc-article の入れ子に依存しないよう、見出し自身のクラスで直接指定。
   テーマに勝つため !important を明示 */
h2.azc-h2 {
  display: block !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: var(--azc-primary-dark) !important;
  margin: 2.4em 0 0.9em !important;
  padding: 0 0 0 0.6em !important;
  border-left: 5px solid var(--azc-primary) !important;
  border-bottom: none !important;
  background: none !important;
}
h3.azc-h3 {
  display: block !important;
  font-size: 1.18rem !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  color: var(--azc-primary-dark) !important;
  margin: 1.8em 0 0.6em !important;
  padding: 0 0 0.3em 0 !important;
  border-left: none !important;
  border-bottom: 1px solid var(--azc-line) !important;
  background: none !important;
}

/* ---- リスト ----
   リスト自身のクラスで直接指定。テーマの list-style:none / padding:0 に勝つ */
ul.azc-ul {
  list-style-type: disc !important;
  list-style-position: outside !important;
  margin: 0 0 1.5em !important;
  padding-left: 1.6em !important;
}
ul.azc-ul li {
  display: list-item !important;
  list-style: disc outside !important;
  margin: 0.45em 0 !important;
  padding-left: 0.2em;
}
ul.azc-ul li::marker { color: var(--azc-accent); }
/* テーマが li::before で独自マーカーを足す場合、二重になるのを防ぐ */
ul.azc-ul li::before { content: none !important; display: none !important; }

/* ---- 本文中リンク ---- */
.azc-article a {
  color: var(--azc-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .15s ease;
}
.azc-article a:hover { color: var(--azc-primary-dark); }

/* =============================================================
   回遊リンク（シリーズ内の関連記事）
   ============================================================= */
.azc-series {
  border: 1px solid var(--azc-line);
  border-top: 4px solid var(--azc-primary);
  border-radius: var(--azc-radius);
  padding: 20px 24px;
  background: var(--azc-bg-soft);
  margin: 2.4em 0 1.4em;
}
.azc-series__title {
  margin: 0 0 0.8em;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--azc-primary-dark);
}
.azc-article .azc-series__list,
.azc-series__list {
  list-style: none !important;
  list-style-type: none !important;
  margin: 0 !important;
  padding-left: 0 !important;
  line-height: 1.95;
}
.azc-series__list li {
  list-style: none !important;
  list-style-type: none !important;
  display: list-item !important;
  padding-left: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: none !important;
}
/* テーマが ::marker / ::before で疑似マーカーを足すのを両方潰す */
.azc-series__list li::marker { content: "" !important; color: transparent !important; }
.azc-series__list li::before { content: none !important; display: none !important; }
/* 回遊ボックス内に見出しスタイルが波及しても打ち消す */
.azc-series .azc-series__title {
  border: none !important;
  padding: 0 !important;
  font-size: 1.05rem !important;
  background: none !important;
}
/* リスト（ul）の直後に続く2つ目以降の小見出しには上余白を付ける
   （インラインstyleが!importantに負けるのを防ぐためCSSで明示） */
.azc-series .azc-series__list + .azc-series__title {
  margin-top: 1.4em !important;
}
.azc-series__list a {
  color: var(--azc-primary);
  text-decoration: none;
}
.azc-series__list a:hover {
  color: var(--azc-primary-dark);
  text-decoration: underline;
}
/* 現在表示中の記事 */
.azc-series__current {
  font-weight: 700;
  color: var(--azc-ink);
}
.azc-series__current::after {
  content: "（この記事）";
  font-weight: 400;
  font-size: 0.85em;
  color: var(--azc-muted);
}

/* =============================================================
   CTA（問い合わせ誘導ボックス）
   ============================================================= */
.azc-cta {
  border: 1px solid var(--azc-line);
  border-radius: var(--azc-radius);
  padding: 22px 24px;
  background: var(--azc-bg-cta);
  margin: 1.4em 0 0;
  position: relative;
}
.azc-cta__head {
  margin: 0 0 0.5em;
  font-weight: 700;
  color: var(--azc-primary-dark);
  font-size: 1.05rem;
}
.azc-cta__body { margin: 0; color: var(--azc-ink); }
.azc-cta__btn,
.azc-cta a.azc-cta__btn {
  display: inline-block !important;
  margin-top: 1em;
  padding: 0.7em 1.6em !important;
  background: var(--azc-primary) !important;
  color: #fff !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  border-radius: 6px;
  border: none !important;
  transition: background .15s ease;
}
.azc-cta__btn:hover,
.azc-cta a.azc-cta__btn:hover { background: var(--azc-primary-dark) !important; color: #fff !important; }

/* =============================================================
   レスポンシブ
   ============================================================= */
@media (max-width: 600px) {
  .azc-article h2 { font-size: 1.3rem; }
  .azc-article h3 { font-size: 1.08rem; }
  .azc-series, .azc-cta { padding: 18px 16px; }
}

/* アクセシビリティ：動きを抑える設定を尊重 */
@media (prefers-reduced-motion: reduce) {
  .azc-article a, .azc-cta__btn { transition: none; }
}

/* =============================================================
   画像・図解まわり（追記）
   ============================================================= */

/* 図版の共通枠（SVG図解・写真の両方に使う） */
.azc-figure {
  margin: 1.8em 0;
  text-align: center;
}
.azc-figure svg {
  width: 100%;
  height: auto;
  max-width: 640px;
  border-radius: var(--azc-radius);
}
.azc-figure img {
  width: 100%;
  height: auto;
  border-radius: var(--azc-radius);
  display: block;
}
.azc-figure figcaption {
  margin-top: 0.6em;
  font-size: 0.86rem;
  color: var(--azc-muted);
  line-height: 1.6;
}

/* 写真の差し込み枠（画像未設定のときに見える説明用プレースホルダー） */
.azc-photo {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background:
    repeating-linear-gradient(
      45deg,
      var(--azc-bg-soft),
      var(--azc-bg-soft) 12px,
      #eaf2fb 12px,
      #eaf2fb 24px
    );
  border: 1px dashed var(--azc-accent);
  border-radius: var(--azc-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--azc-muted);
  font-size: 0.9rem;
  padding: 1em;
  box-sizing: border-box;
}
.azc-photo span { max-width: 80%; }

/* 横並び（図と本文、または図を2点並べる） */
.azc-cols {
  display: flex;
  gap: 20px;
  align-items: center;
  margin: 1.8em 0;
  flex-wrap: wrap;
}
.azc-cols > * { flex: 1 1 260px; margin: 0; }

/* SVG内の配色は各SVGの fill/stroke 属性で直接指定しているため、
   ここでの色指定は不要（環境差で効かないことがあるため属性方式に統一） */
.azc-figure svg text { fill: #1f2933; }

@media (max-width: 600px) {
  .azc-cols { gap: 12px; }
}