/* ============================================================
   SWELL 互換スタイル
   SWELL で作成した記事の装飾（ブロック・段落スタイル・マーカー等）を、
   このテーマの配色で最低限表示するためのスタイルです。
   新しく書く記事では WordPress 標準ブロックの使用をおすすめします。
   ============================================================ */

.article-content {
  --swl-box: rgba(176,186,200,0.04);
  --swl-line: rgba(176,186,200,0.18);
  --swl-accent: #2a52a8;
  --swl-good: #3fae8c;
  --swl-bad: #d86a6a;
  --swl-warn: #d9b24a;
}

/* ---------- 文字装飾 ---------- */
.article-content .swl-marker,
.article-content .mark_blue,
.article-content .mark_green,
.article-content .mark_yellow,
.article-content .mark_orange {
  background: linear-gradient(transparent 62%, rgba(42,82,168,0.55) 62%);
  color: var(--white);
}
.article-content .mark_yellow,
.article-content .swl-marker.mark_yellow { background: linear-gradient(transparent 62%, rgba(217,178,74,0.45) 62%); }
.article-content .mark_orange,
.article-content .swl-marker.mark_orange { background: linear-gradient(transparent 62%, rgba(232,140,70,0.45) 62%); }
.article-content .mark_green,
.article-content .swl-marker.mark_green  { background: linear-gradient(transparent 62%, rgba(63,174,140,0.45) 62%); }

.article-content .swl-bg-color { padding: 0 4px; }
.article-content .u-fz-xs { font-size: 0.75em; }
.article-content .u-fz-s  { font-size: 0.875em; }
.article-content .u-fz-l  { font-size: 1.2em; }
.article-content .u-fz-xl { font-size: 1.5em; }
.article-content .u-fw-bold, .article-content .u-fw-b { font-weight: 500; }
.article-content .u-ta-c { text-align: center; }
.article-content .u-ta-r { text-align: right; }

/* SWELL のカラーパレット指定（ダーク背景で読めるように置き換え） */
.article-content [class*="has-swl-main-color"],
.article-content [class*="has-swl-main-thin-color"] { color: #7fa3e8 !important; }
.article-content [class*="has-swl-deep-01-color"] { color: #7fa3e8 !important; }
.article-content [class*="has-swl-deep-02-color"] { color: #6fd0a8 !important; }
.article-content [class*="has-swl-deep-03-color"] { color: #e8c46a !important; }
.article-content [class*="has-swl-deep-04-color"] { color: #e88a8a !important; }
.article-content [class*="has-swl-gray-color"] { color: var(--gray) !important; }
.article-content [class*="-background-color"][class*="has-swl-"] {
  background-color: rgba(30,58,122,0.25) !important;
  color: var(--silver-light);
}

/* 余白調整クラス */
.article-content .u-mb-0  { margin-bottom: 0 !important; }
.article-content .u-mb-5  { margin-bottom: 0.5em !important; }
.article-content .u-mb-10 { margin-bottom: 1em !important; }
.article-content .u-mb-20 { margin-bottom: 2em !important; }
.article-content .u-mb-30 { margin-bottom: 3em !important; }
.article-content .u-mb-40 { margin-bottom: 4em !important; }
.article-content .u-mb-60 { margin-bottom: 6em !important; }
.article-content .u-mb-80 { margin-bottom: 8em !important; }
.article-content .u-mb-ctrl + * { margin-top: 0 !important; }

/* ---------- 段落・グループのボックススタイル ---------- */
.article-content .is-style-border_sg,
.article-content .is-style-border_dg,
.article-content .is-style-border_sm,
.article-content .is-style-border_dm,
.article-content .is-style-bg_main,
.article-content .is-style-bg_main_thin,
.article-content .is-style-bg_gray,
.article-content .is-style-bg_stripe,
.article-content .is-style-bg_grid,
.article-content .is-style-crease,
.article-content .is-style-dent_box,
.article-content .is-style-emboss_box,
.article-content .is-style-kakko_box,
.article-content .is-style-big_kakko_box,
.article-content .is-style-stitch,
.article-content .is-style-sticky_box,
.article-content .is-style-balloon_box,
.article-content .is-style-balloon_box2,
.article-content .is-style-note_box,
.article-content .is-style-memo_box,
.article-content .is-style-alert,
.article-content .is-style-icon_good,
.article-content .is-style-icon_bad,
.article-content .is-style-icon_info,
.article-content .is-style-icon_announce,
.article-content .is-style-icon_pen,
.article-content .is-style-icon_book,
.article-content .is-style-big_icon_point,
.article-content .is-style-big_icon_check,
.article-content .is-style-big_icon_batsu,
.article-content .is-style-big_icon_hatena,
.article-content .is-style-big_icon_caution,
.article-content .is-style-big_icon_memo,
.article-content .is-style-big_icon_good,
.article-content .is-style-big_icon_bad {
  position: relative;
  padding: 20px 24px;
  background: var(--swl-box);
  border: 1px solid var(--swl-line);
  line-height: 1.9;
}

.article-content .is-style-border_dg,
.article-content .is-style-border_dm { border-style: dashed; }
.article-content .is-style-border_sm,
.article-content .is-style-border_dm { border-color: var(--swl-accent); }
.article-content .is-style-bg_main,
.article-content .is-style-bg_main_thin { background: rgba(30,58,122,0.28); border-color: transparent; }
.article-content .is-style-bg_stripe {
  background: repeating-linear-gradient(-45deg, rgba(176,186,200,0.04) 0 6px, transparent 6px 12px);
}
.article-content .is-style-stitch { border-style: dashed; outline: 6px solid var(--swl-box); outline-offset: -1px; }

/* 左にアクセント線＋アイコン */
.article-content .is-style-alert,
.article-content .is-style-memo_box,
.article-content .is-style-note_box,
.article-content [class*="is-style-icon_"],
.article-content [class*="is-style-big_icon_"] {
  border-left: 3px solid var(--swl-accent);
  padding-left: 52px;
}
.article-content .is-style-alert,
.article-content [class*="_caution"],
.article-content [class*="_announce"] { border-left-color: var(--swl-warn); }
.article-content [class*="_good"],
.article-content [class*="_check"] { border-left-color: var(--swl-good); }
.article-content [class*="_bad"],
.article-content [class*="_batsu"] { border-left-color: var(--swl-bad); }

.article-content .is-style-alert::before,
.article-content .is-style-memo_box::before,
.article-content .is-style-note_box::before,
.article-content [class*="is-style-icon_"]::before,
.article-content [class*="is-style-big_icon_"]::before {
  position: absolute;
  left: 18px;
  top: 20px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-en);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  color: var(--bg);
  background: var(--swl-accent);
  content: 'i';
}
.article-content .is-style-alert::before,
.article-content [class*="_caution"]::before,
.article-content [class*="_announce"]::before { content: '!'; background: var(--swl-warn); }
.article-content [class*="_good"]::before,
.article-content [class*="_check"]::before { content: '✓'; background: var(--swl-good); }
.article-content [class*="_bad"]::before,
.article-content [class*="_batsu"]::before { content: '×'; background: var(--swl-bad); }
.article-content [class*="_hatena"]::before { content: '?'; }
.article-content [class*="_point"]::before { content: '★'; font-size: 0.6rem; }
.article-content [class*="_pen"]::before,
.article-content [class*="_memo"]::before,
.article-content .is-style-memo_box::before { content: '✎'; }

/* ---------- リストスタイル ---------- */
.article-content ul.is-style-check_list,
.article-content ul.is-style-good_list,
.article-content ul.is-style-bad_list,
.article-content ul.is-style-triangle,
.article-content ul.is-style-index { list-style: none; margin-left: 0; }
.article-content ul.is-style-check_list > li,
.article-content ul.is-style-good_list > li,
.article-content ul.is-style-bad_list > li,
.article-content ul.is-style-triangle > li { position: relative; padding-left: 1.6em; }
.article-content ul.is-style-check_list > li::before,
.article-content ul.is-style-good_list > li::before { content: '✓'; position: absolute; left: 0; color: var(--swl-good); }
.article-content ul.is-style-bad_list > li::before { content: '×'; position: absolute; left: 0; color: var(--swl-bad); }
.article-content ul.is-style-triangle > li::before { content: '▸'; position: absolute; left: 0; color: var(--swl-accent); }

.article-content ol.is-style-num_circle { list-style: none; margin-left: 0; counter-reset: swlnum; }
.article-content ol.is-style-num_circle > li { position: relative; padding-left: 2.2em; counter-increment: swlnum; }
.article-content ol.is-style-num_circle > li::before {
  content: counter(swlnum);
  position: absolute; left: 0; top: 0.35em;
  width: 1.6em; height: 1.6em;
  border-radius: 50%;
  background: var(--swl-accent);
  color: var(--pure);
  font-family: var(--font-en);
  font-size: 0.8em;
  line-height: 1.6em;
  text-align: center;
}

.article-content .is-style-border_list,
.article-content .is-style-index { padding: 16px 20px 16px 2.4em; border: 1px solid var(--swl-line); }

/* ---------- 見出しスタイル ---------- */
.article-content .is-style-section_ttl {
  border-left: 0;
  padding-left: 0;
  text-align: center;
}

/* ---------- キャプションボックス ---------- */
.article-content .swell-block-capbox,
.article-content .cap_box {
  border: 1px solid var(--swl-line);
  background: var(--swl-box);
}
.article-content .cap_box_ttl {
  display: block;
  padding: 8px 20px;
  background: rgba(30,58,122,0.5);
  color: var(--white);
  font-weight: 400;
  font-size: 0.9rem;
  line-height: 1.6;
}
.article-content .cap_box_content { padding: 20px 24px; }
.article-content .cap_box_content > :first-child { margin-top: 0; }
.article-content .cap_box_content > :last-child { margin-bottom: 0; }

/* ---------- ボタン ---------- */
.article-content .swell-block-button { text-align: center; margin: 32px 0; }
.article-content .swell-block-button__link,
.article-content .swell-block-button a {
  display: inline-block;
  min-width: 60%;
  max-width: 100%;
  padding: 16px 36px;
  background: var(--blue);
  border: 1px solid var(--blue);
  color: var(--pure) !important;
  text-decoration: none !important;
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
  line-height: 1.6;
  transition: background var(--tr);
}
.article-content .swell-block-button__link:hover { background: var(--blue-light); }
.article-content .is-style-btn_line .swell-block-button__link {
  background: transparent;
  border-color: var(--silver);
  color: var(--silver-light) !important;
}

/* ---------- ステップ ---------- */
.article-content .swell-block-step { counter-reset: swlstep; }
.article-content .swell-block-step__item {
  position: relative;
  padding: 0 0 32px 56px;
  counter-increment: swlstep;
}
.article-content .swell-block-step__item::after {
  content: '';
  position: absolute;
  left: 17px; top: 40px; bottom: 4px;
  width: 1px;
  background: var(--swl-line);
}
.article-content .swell-block-step__item:last-child::after { display: none; }
.article-content .swell-block-step__number {
  position: absolute;
  left: 0; top: 2px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--swl-accent);
  color: var(--pure);
  font-family: var(--font-en);
  font-size: 0.65rem;
  line-height: 1.1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.article-content .swell-block-step__number .__label { font-size: 0.85em; }
.article-content .swell-block-step__title {
  display: block;
  color: var(--white);
  font-weight: 400;
  font-size: 1.05rem;
  margin-bottom: 8px;
  line-height: 1.6;
}
.article-content .swell-block-step__body > :first-child { margin-top: 0; }

/* ---------- FAQ ---------- */
.article-content .swell-block-faq__item {
  border: 1px solid var(--swl-line);
  margin-bottom: 16px;
}
.article-content .faq_q,
.article-content .faq_a {
  position: relative;
  padding: 16px 20px 16px 56px;
  line-height: 1.8;
}
.article-content .faq_q { color: var(--white); background: rgba(30,58,122,0.25); font-weight: 400; }
.article-content .faq_q::before,
.article-content .faq_a::before {
  position: absolute;
  left: 20px; top: 14px;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 1.1rem;
}
.article-content .faq_q::before { content: 'Q'; color: #7fa3e8; }
.article-content .faq_a::before { content: 'A'; color: var(--swl-warn); }
.article-content .faq_a > :first-child { margin-top: 0; }

/* ---------- 説明リスト ---------- */
.article-content .swell-block-dl { border-top: 1px solid var(--swl-line); }
.article-content .swell-block-dl__dt {
  color: var(--white);
  font-weight: 400;
  padding: 14px 0 4px;
}
.article-content .swell-block-dl__dd {
  padding: 0 0 14px;
  border-bottom: 1px solid var(--swl-line);
  margin: 0;
}

/* ---------- アコーディオン ---------- */
.article-content .swell-block-accordion__item {
  border: 1px solid var(--swl-line);
  margin-bottom: 12px;
}
.article-content .swell-block-accordion__title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  cursor: pointer;
  color: var(--white);
  background: rgba(30,58,122,0.2);
  list-style: none;
}
.article-content .swell-block-accordion__title::-webkit-details-marker { display: none; }
.article-content .swell-block-accordion__title::after { content: '+'; font-family: var(--font-en); color: var(--silver); }
.article-content details[open] > .swell-block-accordion__title::after { content: '−'; }
.article-content .swell-block-accordion__body { padding: 16px 20px; }

/* ---------- タブ（main.js で切替） ---------- */
.article-content .c-tabList {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  list-style: none;
  margin: 0;
  border-bottom: 1px solid var(--swl-line);
}
.article-content .c-tabList li { margin: 0; }
.article-content .c-tabList__button {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--silver);
  padding: 10px 18px;
  cursor: pointer;
  font-size: 0.875rem;
}
.article-content .c-tabList__button[aria-selected="true"] { color: var(--white); border-bottom-color: var(--blue-light); }
.article-content .c-tabBody__item { padding: 20px 0; }
.article-content .c-tabBody__item[aria-hidden="true"] { display: none; }

/* ---------- カラム・フルワイド ---------- */
.article-content .swell-block-columns__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.article-content .swell-block-column { flex: 1 1 240px; min-width: 0; }
.article-content .swell-block-fullWide {
  padding: 40px 24px;
  background: var(--navy);
  border: 1px solid var(--border);
}
.article-content .swell-block-fullWide__inner > :first-child { margin-top: 0; }

/* ---------- テーブル拡張 ---------- */
.article-content .td_to_th_ tbody tr > :first-child {
  background: rgba(30,58,122,0.25);
  color: var(--white);
}
.article-content .swl-cell-bg { background: rgba(30,58,122,0.2) !important; }

/* ---------- 吹き出し（SWELL 無効時は中身のみ残る場合の整形） ---------- */
.article-content .c-balloon { display: flex; gap: 16px; align-items: flex-start; }
.article-content .c-balloon__icon { flex: 0 0 64px; text-align: center; font-size: 0.7rem; color: var(--gray); }
.article-content .c-balloon__icon img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; margin: 0 auto 4px; border: 1px solid var(--swl-line); }
.article-content .c-balloon__text {
  position: relative;
  flex: 1;
  padding: 16px 20px;
  background: var(--swl-box);
  border: 1px solid var(--swl-line);
}

/* ---------- テーマ代替表示：ブログパーツ / 記事リンク ---------- */
.article-content .kb-blog-parts > :first-child { margin-top: 0; }

.article-content .kb-post-link {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--swl-line);
  background: var(--navy);
  text-decoration: none !important;
  color: var(--silver-light) !important;
  transition: border-color var(--tr);
}
.article-content .kb-post-link:hover { border-color: rgba(42,82,168,0.6); }
.article-content .kb-post-link__thumb { flex: 0 0 160px; }
.article-content .kb-post-link__thumb img { border: 0; aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.article-content .kb-post-link__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.article-content .kb-post-link__title { color: var(--white); font-weight: 400; line-height: 1.6; }
.article-content .kb-post-link__desc { font-size: 0.8rem; line-height: 1.7; color: var(--gray); }

@media (max-width: 600px) {
  .article-content .kb-post-link { flex-direction: column; align-items: stretch; }
  .article-content .kb-post-link__thumb { flex-basis: auto; }
}