@charset "UTF-8";
/* ================================================================
   60-xwrite — Xwrite ネイティブ側の調律
   方針(キャンバス「Xwriteブロック調律」アートボード):
     構造・アイコン・開閉挙動はそのまま使い、子テーマ側では
     面色・罫色・角丸・余白・番号色の5点だけを継承させる。
     装飾(グラデーション・影・原色の見出し帯)は解除する方向にのみ触る。

   キャンバスは .wp-block-xwrite-toc / -faq / -step というセレクタを想定していたが、
   v4.0.6 の実体は 目次=.toc_block(the_content挿入・ブロックではない) /
   FAQ=.wp-block-xwrite-faq > .xw-block-faq__question|__answer /
   ステップ=.wp-block-xwrite-step > .xw-block-step__number|__title|__body /
   ふきだし=.wp-block-xwrite-fukidashi > .xw-block-chat。
   キャンバスのセレクタは §15 に逐語で残したうえで、実体側を併記する。
   ================================================================ */

/* ---------- 15. Xwrite ネイティブブロックの調律(正本 tokens.css §15 逐語) ---------- */
/* 目次：構造は触らず、面と罫だけそろえる */
.wp-block-xwrite-toc,
.xwrite-toc{
  background: var(--bk-surface-alt) !important;
  border: 1px solid var(--bk-line) !important;
  border-radius: var(--bk-r2) !important;
  padding: 20px 24px !important;
  font-size: 14.5px;
}
.wp-block-xwrite-toc a, .xwrite-toc a{ color: var(--bk-brand); line-height: 1.7; }
/* FAQ */
.wp-block-xwrite-faq, .xwrite-faq{
  background: var(--bk-surface) !important;
  border: 1px solid var(--bk-line) !important;
  border-radius: var(--bk-r2) !important;
}
.wp-block-xwrite-faq dt{ font-weight: 700; line-height: 1.8; }
.wp-block-xwrite-faq dd{ color: var(--bk-ink-2); line-height: 1.85; }
/* ステップ：番号色だけアクセントを継承 */
.wp-block-xwrite-step, .xwrite-step{ border-color: var(--bk-line) !important; }
.wp-block-xwrite-step .step-number,
.xwrite-step__num{
  color: var(--bk-accent) !important; background: none !important;
  font-family: var(--bk-font-num); font-weight: 700;
}

/* ================================================================
   実体側セレクタ(v4.0.6)
   ================================================================ */

/* ---- 目次 .toc_block ---- */
.toc_block{
  background: var(--bk-surface-alt);
  border: 1px solid var(--bk-line);
  border-radius: var(--bk-r2);
  margin: var(--bk-s5) 0;
}
.toc_block .toc__caption{
  padding: 20px 24px 12px; font-size: 14px; font-weight: 700; color: var(--bk-ink-2);
  justify-content: space-between;
}
.toc_block .toc__caption:has(> a)::before{ display: none; }   /* FA の丸アイコンを外す */
.toc_block .toc_toggle_button{
  margin-left: auto; font-family: var(--bk-font-num); font-size: 10.5px;
  font-weight: 400; color: var(--bk-ink-3);
}
.toc_block .toc{ padding: 0 24px 20px; }
.toc_block .toc > ol{ border-top: 0; padding-top: 0; padding-left: 0; counter-reset: bk-toc; }
.toc_block .toc ol{ padding-left: 0; }
.toc_block .toc li{
  position: relative; margin-top: 9px; padding-left: 0;
  font-size: 14.5px; line-height: 1.7;
}
.toc_block .toc > ol > li{ padding-left: 0; counter-increment: bk-toc; counter-reset: bk-toc-sub; }
.toc_block .toc > ol > li:first-child{ margin-top: 0; }
.toc_block .toc > ol > li > ol{ padding-left: 16px; }
.toc_block .toc > ol > li > ol > li{ counter-increment: bk-toc-sub; }
.toc_block a{ color: var(--bk-brand); }
.toc_block .toc > ol > li > a{ font-weight: 400; }
.toc_block .toc > ol > li > ol > li > a{ color: var(--bk-ink-2); }
/* 階層は「1.」「2-1.」の連番と字下げだけで表現(番号の背景色は付けない) */
.toc_block .toc > ol > li:not(.previous):has(> a) > a::before{
  content: counter(bk-toc) ". ";
  position: static; display: inline; top: auto; left: auto;
  font-family: var(--bk-font-sans); font-weight: 400; color: inherit;
}
.toc_block .toc > ol > li.next:has(> a) > a::before,
.toc_block .toc > ol > li.previous:has(> a) > a::before{ content: none; }
.toc_block .toc > ol > li > ol > li:has(> a) > a::before{
  content: counter(bk-toc) "-" counter(bk-toc-sub) ". ";
  position: static; display: inline; top: auto; left: auto;
  font-family: var(--bk-font-sans); font-weight: 400; color: inherit;
}
@media (max-width: 782px){
  .toc_block .toc__caption{ padding: 16px 18px 10px; font-size: 13px; }
  .toc_block .toc{ padding: 0 18px 16px; }
  .toc_block .toc li{ font-size: 14px; line-height: 1.6; margin-top: var(--bk-s2); }
}

/* ---- FAQ ---- */
.articleBody .wp-block-xwrite-faq{ margin: var(--bk-s5) 0; }
.articleBody .xw-block-faq{
  background: var(--bk-surface); border: 1px solid var(--bk-line);
  border-radius: var(--bk-r2); overflow: hidden;
}
.articleBody .xw-block-faq__question{
  font-size: 14.5px; font-weight: 700; line-height: 1.8; color: var(--bk-ink);
  background: none; border: 0; padding: 16px 20px;
}
.articleBody .xw-block-faq__answer{
  font-size: 13.5px; line-height: 1.85; color: var(--bk-ink-2);
  background: none; border: 0; padding: 0 20px 16px;
}
.articleBody .xw-block-faq__child-content + .xw-block-faq__child-content{ border-top: 1px solid var(--bk-line-soft); }

/* ---- ステップ(番号だけ --accent + 等幅・背景は付けない) ---- */
.articleBody .wp-block-xwrite-step{ margin: var(--bk-s5) 0; }
.articleBody .xw-block-step{
  background: var(--bk-surface); border: 1px solid var(--bk-line);
  border-radius: var(--bk-r2); padding: 20px;
}
.articleBody .xw-block-step__item + .xw-block-step__item{ border-top: 1px solid var(--bk-line-soft); }
.articleBody .xw-block-step__number,
.articleBody .xw-block-step__number--inner,
.articleBody .xw-block-step__number--label,
.articleBody .xw-block-step__number--number{
  background: none !important; border-color: var(--bk-line) !important;
  color: var(--bk-accent) !important;
  font-family: var(--bk-font-num); font-weight: 700; font-size: 12.5px;
}
.articleBody .xw-block-step__title{ font-size: 14.5px; font-weight: 700; }
.articleBody .xw-block-step__body{ font-size: 13px; line-height: 1.8; color: var(--bk-ink-2); }

/* ---- ふきだし(編集部の補足に限定。キャラ演出はしない) ---- */
.articleBody .wp-block-xwrite-fukidashi,
.articleBody .xw-block-chat{ margin: var(--bk-s5) 0; }
.articleBody .xw-block-chat .xw-block-chat__balloon,
.articleBody .xw-block-chat p{
  background: var(--bk-surface); border-color: var(--bk-line);
  border-radius: var(--bk-r2); font-size: 13.5px; line-height: 1.85; color: var(--bk-ink);
}

/* ---- 本文のネイティブ表(wp:table)= .bk-table と同じ版面にそろえる ---- */
.articleBody .wp-block-table{ margin: var(--bk-s6) 0 var(--bk-s3); }
.articleBody .wp-block-table > table{
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--bk-surface);
  border: 1px solid var(--bk-line); border-radius: var(--bk-r2);
  overflow: hidden;
}
.articleBody .wp-block-table th{
  background: var(--bk-surface-alt); color: var(--bk-ink-2);
  font-size: 13px; font-weight: 700; text-align: left;
  padding: 13px 18px; border: 0; border-bottom: 1px solid #DAD4C8;
}
.articleBody .wp-block-table td{
  padding: 15px 18px; font-size: 14.5px; line-height: 1.75;
  border: 0; border-bottom: 1px solid var(--bk-line-soft); vertical-align: top;
}
.articleBody .wp-block-table tbody tr:nth-child(even) td{ background: var(--bk-surface-zebra); }
.articleBody .wp-block-table tbody tr:last-child td{ border-bottom: 0; }
.articleBody .wp-block-table td:first-child,
.articleBody .wp-block-table thead th:first-child{ font-weight: 700; }
/* 数値列は等幅右揃え(2列目以降が数値のみのとき効く指定は書けないので、
   記事側で td に class="is-num" を付ける運用。既定でも数字は tabular に寄せる) */
.articleBody .wp-block-table td.is-num,
.articleBody .wp-block-table th.is-num{
  font-family: var(--bk-font-num); font-variant-numeric: tabular-nums; text-align: right;
}
.articleBody .wp-block-table figcaption{
  font-size: var(--bk-fs-micro); line-height: 1.7; color: var(--bk-ink-3);
  margin: var(--bk-s2) 0 0; text-align: left;
}
@media (max-width: 782px){
  .articleBody .wp-block-table{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .articleBody .wp-block-table > table{ min-width: 560px; }
  .articleBody .wp-block-table th,
  .articleBody .wp-block-table td{ padding: 11px 12px; font-size: 13.5px; }
  .articleBody .wp-block-table td:first-child,
  .articleBody .wp-block-table thead th:first-child{
    position: sticky; left: 0; background: var(--bk-surface); z-index: 1;
  }
  .articleBody .wp-block-table tbody tr:nth-child(even) td:first-child{ background: var(--bk-surface-zebra); }
}

/* ---- 引用・リスト・強調(本文の基礎) ---- */
.articleBody blockquote{
  border-left: 2px solid var(--bk-accent); padding-left: var(--bk-s4);
  margin: var(--bk-s6) 0; color: var(--bk-ink-2); font-size: 14.5px; line-height: 1.9;
  background: none;
}
.articleBody ul, .articleBody ol{ padding-left: 1.4em; margin: 0 0 var(--bk-s5); }
.articleBody li{ margin-top: var(--bk-s2); line-height: 1.9; }
.articleBody strong{ font-weight: 700; }
.articleBody figure img{ border-radius: var(--bk-r2); }

/* ---- 広告ラベル(既定ではOFF。有効化したときにキャンバスの面へ寄せる) ---- */
.notice-label{
  background: var(--bk-accent-tint); border: 1px solid var(--bk-accent-line);
  border-radius: var(--bk-r1); color: var(--bk-accent);
  font-size: var(--bk-fs-micro); line-height: 1.7;
}
.notice-label .icon-info{ color: var(--bk-accent); }

/* ---- 親テーマの既定を打ち消す(自前の版面が持つため) ---- */
.pagetop{ display: none; }                       /* キャンバスに戻るボタンはない */
.articleHeader__sns, .articleFooter__sns{ display: none; }
.side{ margin: 0; font-size: inherit; line-height: inherit; }
.side .widget-area{ margin: 0; }
.main{ max-width: none; }
.bk-article > .articleContainer{ margin: 0; }
.bk-arthead{ margin: 0; }
/* 記事カラムの部品間は 28px(キャンバス 記事/PC の gap)。ヘッダー → 本文もこれに合わせる */
.bk-article .articleBody{ margin: 28px 0 0; }
@media (max-width: 782px){ .bk-article .articleBody{ margin-top: var(--bk-s4); } }
/* .contents の既定余白は 40-front で 0 にしてある。自前の帯・グリッドが余白を持つ。 */