/* =====================================================================
   本文の書式（v0.6.0）
   旧テーマ（vs_newspicks）の article.css v1.0.8 が本文に付けていたクラスを、
   新テーマの意匠で受ける。クラス名は既存記事の HTML にあるものをそのまま使う。
   参考：06_テーマ/_参考/article_v1.0.8.css

     .readTxt / .taidanBox   冒頭のリードと、それを包む枠
     .per01                  聞き手の質問（Q）
     .per02〜.per14          話し手の名前（「A氏：」など）。本番は per09 までしか書式が無かった
     .Box01                  実例ボックス（先頭の段落＝見出し）
     .yougoCap               用語解説
     .photo / .photoBox / ul.prof   写真とキャプション
     .profTxtBox             プロフィールのカード（dl > div > dt + dd）
     dl.companyInfo          企業情報の表（先頭の「項目／詳細」行は隠す）
     #ez-toc-container       目次（Easy Table of Contents）
   ===================================================================== */

.art .body{
  /* 話し手の色。カテゴリ色を流用するので、ダークモードの色も自動で切り替わる */
  --sp1:var(--key); --sp2:var(--c-aidx); --sp3:var(--shu); --sp4:var(--c-recruit);
  --sp5:var(--c-mgmt); --sp6:var(--c-tax); --sp7:var(--c-career); --sp8:var(--c-vendor);
}
.art .body img{max-width:100%;height:auto}
.art .body h3{font-size:var(--fz-lead);font-weight:700;line-height:1.7;margin:2em 0 .6em}
.art .body ul:not(.prof):not(.ez-toc-list),.art .body ol{margin:0 0 1.5em;padding-left:1.4em;line-height:1.95}
.art .body li{margin:.35em 0}
/* 旧テーマの ul.disc（灰色の地＋左の線の箇条書き）。「・」は線の内側に置く（v0.9.0。それまでは開示ブロックの .disc が当たり、「・」が線に重なっていた） */
.art .body ul.disc:not(.prof):not(.ez-toc-list){background:var(--bg2);border-left:3px solid var(--shu);padding:.9em 1.25em .9em 2.4em;
  font-size:var(--fz-sm);color:var(--ink2)}
.art .body ul.disc li{margin:.2em 0}
.art .body .tac{text-align:center}
/* base.css で img は display:block。中央寄せの中の画像は inline-block に戻さないと左に寄る */
.art .body .tac img{display:inline-block}

/* ── リード ─────────────────────────────── */
.art .body .taidanBox{margin:0 0 2.25em}
.art .body .readTxt{font-size:var(--fz-lead);line-height:2;color:var(--ink2);
  margin:0 0 2em;padding:.25rem 0 .25rem 1.25rem;border-left:3px solid var(--key)}

/* ── インタビュー：質問（Q） ─────────────── */
.art .body p:has(> .per01){margin-top:2.6em}
.art .body .per01{display:block;position:relative;padding-left:2.5rem;
  font-weight:700;line-height:1.85;color:var(--key)}
.art .body .per01::before{content:"Q";position:absolute;left:0;top:.18em;
  width:1.625rem;height:1.625rem;display:grid;place-items:center;
  background:var(--key);color:var(--bg);
  font-family:var(--fe);font-size:var(--fz-2xs);font-weight:700;line-height:1}

/* ── インタビュー：話し手 ───────────────── */
.art .body :is(.per02,.per03,.per04,.per05,.per06,.per07,.per08,.per09,.per10,.per11,.per12,.per13,.per14){
  font-weight:700;color:var(--sp,var(--ink))}
/* 名前の前に小さな色の四角。誰の発言かを色でも追えるようにする */
.art .body :is(.per02,.per03,.per04,.per05,.per06,.per07,.per08,.per09,.per10,.per11,.per12,.per13,.per14)::before{
  content:"";display:inline-block;width:.5em;height:.5em;margin-right:.45em;vertical-align:.12em;background:currentColor}
/* per03 が主な話し手（旧テーマの配色に合わせる）。10人目以降は色を一巡させる */
.art .body .per03{--sp:var(--sp1)} .art .body .per02{--sp:var(--sp2)}
.art .body .per04{--sp:var(--sp3)} .art .body .per05{--sp:var(--sp4)}
.art .body .per06{--sp:var(--sp5)} .art .body .per07{--sp:var(--sp6)}
.art .body .per08{--sp:var(--sp7)} .art .body .per09{--sp:var(--sp8)}
.art .body .per10{--sp:var(--sp2)} .art .body .per11{--sp:var(--sp3)}
.art .body .per12{--sp:var(--sp4)} .art .body .per13{--sp:var(--sp5)}
.art .body .per14{--sp:var(--sp6)}
/* 回答の段落と、その後に続く段落（話し手の名前が無い段落）は字下げして Q と揃える。
   旧テーマと同じ判定なので、Q&A の後ろの地の文も字下げになる */
.art .body p:has(:is(.per02,.per03,.per04,.per05,.per06,.per07,.per08,.per09,.per10,.per11,.per12,.per13,.per14)),
.art .body p:has(:is(.per02,.per03,.per04,.per05,.per06,.per07,.per08,.per09,.per10,.per11,.per12,.per13,.per14))
  ~ p:not(:has([class^="per"])):not(.readTxt){padding-left:2.5rem}

/* ── 実例ボックス・用語解説 ─────────────── */
.art .body .Box01{background:var(--bg2);border-left:3px solid var(--key);
  padding:1.25rem 1.5rem;margin:2.25em 0}
.art .body .Box01 > p{font-size:var(--fz-sm);line-height:1.95;color:var(--ink2);margin:0 0 .9em}
.art .body .Box01 > p:last-child{margin-bottom:0}
.art .body .Box01 > p:first-child{padding-bottom:.7em;margin-bottom:.8em;border-bottom:1px solid var(--rule)}
.art .body .Box01 > p:first-child strong{color:var(--ink);font-size:var(--fz-body)}
.art .body .yougoCap{border:1px solid var(--rule);padding:1rem 1.25rem;margin:2.25em 0;
  font-size:var(--fz-xs);line-height:1.95;color:var(--ink2)}

/* ── 写真とキャプション ─────────────────── */
.art .body .photoBox{margin:2.25em 0}
.art .body .photo{margin:2.25em 0;text-align:center}
.art .body .photoBox > .photo{margin:0}
.art .body .photo img{display:inline-block}
.art .body ul.prof{list-style:none;margin:.75em 0 0;padding:0;text-align:center;
  font-size:var(--fz-2xs);line-height:1.8;color:var(--ink3)}
.art .body ul.prof li{margin:0}

/* ── プロフィール（カード） ─────────────── */
.art .body .profTxtBox{margin:3em 0 0}
.art .body .profTxtBox dl{margin:0;display:grid;gap:1rem}
.art .body .profTxtBox dl > div{border:1px solid var(--rule);border-top:2px solid var(--ink);padding:1.25rem 1.5rem}
.art .body .profTxtBox dt{font-size:var(--fz-lead);font-weight:700;line-height:1.5;
  margin:0 0 .6rem;padding-bottom:.6rem;border-bottom:1px solid var(--rule2)}
.art .body .profTxtBox dt::before{content:"PROFILE";display:block;margin-bottom:.35rem;
  font-family:var(--fe);font-size:var(--fz-mark);font-weight:600;letter-spacing:.2em;color:var(--ink3)}
.art .body .profTxtBox dd{margin:0;font-size:var(--fz-xs);line-height:1.95;color:var(--ink2)}
/* 旧エディタが残した空の段落 */
.art .body .profTxtBox p:empty{display:none}

/* ── 企業情報（表） ─────────────────────── */
.art .body dl.companyInfo{display:grid;grid-template-columns:minmax(6em,9em) 1fr;margin:2.25em 0;
  border-top:2px solid var(--ink);border-bottom:1px solid var(--rule)}
.art .body .companyInfo dt:first-of-type,
.art .body .companyInfo dd:first-of-type{display:none}   /* 「項目／詳細」の見出し行 */
.art .body .companyInfo dt,.art .body .companyInfo dd{margin:0;padding:.85rem 1rem;border-top:1px solid var(--rule2)}
.art .body .companyInfo dt:nth-of-type(2),.art .body .companyInfo dd:nth-of-type(2){border-top:0}
.art .body .companyInfo dt{background:var(--bg2);font-size:var(--fz-xs);font-weight:700}
.art .body .companyInfo dd{font-size:var(--fz-sm);line-height:1.8;color:var(--ink2)}

/* ── 目次（Easy Table of Contents） ─────── */
.art #ez-toc-container{display:block;background:var(--bg2);border:0;border-top:2px solid var(--ink);
  padding:1.1rem 1.4rem 1.2rem;margin:2em 0;width:auto;box-shadow:none;border-radius:0}
.art #ez-toc-container .ez-toc-title-container{margin:0 0 .6rem}
.art #ez-toc-container .ez-toc-title{margin:0;font-size:var(--fz-xs);font-weight:700;color:var(--ink)}
.art #ez-toc-container .ez-toc-title::before{content:"CONTENTS";margin-right:.8em;
  font-family:var(--fe);font-size:var(--fz-mark);font-weight:600;letter-spacing:.2em;color:var(--ink3)}
.art #ez-toc-container ul{list-style:none;margin:0;padding:0}
.art #ez-toc-container nav > ul{counter-reset:toc}
.art #ez-toc-container nav > ul > li{counter-increment:toc;display:grid;grid-template-columns:1.9em 1fr;
  margin:.3em 0;font-size:var(--fz-sm);line-height:1.75}
.art #ez-toc-container nav > ul > li::before{content:counter(toc,decimal-leading-zero);
  font-family:var(--fe);font-size:var(--fz-2xs);font-weight:700;color:var(--key);padding-top:.2em}
.art #ez-toc-container nav > ul > li > ul{grid-column:2;margin:.2em 0 0}
.art #ez-toc-container a{color:var(--ink2);text-decoration:none}
.art #ez-toc-container a:hover{color:var(--key)}
/* 古い版のプラグインで作られた目次（ez-toc-v2_0_58 など）は、リンクの前に「1.」を自前で付け、
   開閉ボタンも出す。番号はこちらの 01・02… に揃え、ボタンは隠す */
.art #ez-toc-container nav a::before{content:none}
.art #ez-toc-container :is(.ez-toc-title-toggle,.ez-toc-pull-right,.ez-toc-btn,.ez-toc-toggle){display:none}

/* =====================================================================
   v0.6.1：旧テーマの style*.css にだけ書式があったもの
   調査：07_移行/本文クラス調査_2026-10-23.md
   ===================================================================== */

.art .body .fwb{font-weight:700}
.art .body .mw100 > *{max-width:100%}

/* ── 人物紹介（.prof-bottom > .left-prof + .right-prof）42本・主にインタビュー ── */
.art .body .prof-bottom{display:grid;grid-template-columns:clamp(4.5rem,20%,7.5rem) 1fr;gap:1.25rem;
  align-items:start;margin:3em 0 0;padding-top:1.25rem;border-top:2px solid var(--ink)}
.art .body .prof-bottom + .prof-bottom{margin-top:1.5rem;border-top-width:1px;border-top-color:var(--rule)}
.art .body .left-prof img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:50%;margin:0}
.art .body .right-prof{font-size:var(--fz-xs);line-height:1.9;color:var(--ink2)}
.art .body .right-prof p{font-size:inherit;line-height:inherit;margin:0 0 .5em}
.art .body .right-prof p:last-child{margin-bottom:0}
/* 名前の <strong> は、裸のときと <p> に包まれたとき（wpautop）の両方がある */
.art .body .right-prof > strong:first-child,
.art .body .right-prof > p:first-child > strong:only-child{display:block;font-size:var(--fz-lead);line-height:1.5;color:var(--ink);margin-bottom:.35rem}
.art .body .right-prof > strong:first-child::before,
.art .body .right-prof > p:first-child > strong:only-child::before{content:"PROFILE";display:block;margin-bottom:.3rem;
  font-family:var(--fe);font-size:var(--fz-mark);font-weight:600;letter-spacing:.2em;color:var(--ink3)}
/* 2つ目以降の <strong>（「■プロフィール」など）は小見出し */
.art .body .right-prof > strong:not(:first-child),
.art .body .right-prof > p:not(:first-child) > strong:only-child{display:block;margin-top:.6em;color:var(--ink)}

/* ── 画像を縦に並べた記事（.spc）70本 ── */
/* 1枚の資料を分割した画像なので、本番と同じく隙間・枠なしでつなげ、幅 600px で中央に（v0.8.6） */
.art .body .spc{display:grid;gap:0;max-width:600px;margin:2em auto;padding:0}
.art .body .spc img{display:block;width:100%;height:auto;margin:0;padding:0;border:0}

/* ── 中央寄せの画像（.centerImg）26本 ── */
.art .body .centerImg{text-align:center;margin:2em 0}
.art .body .centerImg img{display:inline-block;max-width:100%;height:auto}

/* ── セミナー動画の講師紹介（dl.dlbox01 / dlbox02）36本 ── */
.art .body :is(.dlbox01,.dlbox02){margin:2.5em 0;padding:0;display:grid;gap:1.5rem}
.art .body :is(.dlbox01,.dlbox02) > div{display:grid;grid-template-columns:clamp(5.5rem,28%,11rem) 1fr;gap:1.25rem;
  align-items:start;padding-top:1.25rem;border-top:2px solid var(--ink)}
.art .body :is(.dlbox01,.dlbox02) dt{margin:0}
.art .body :is(.dlbox01,.dlbox02) dt img{display:block;width:100%;height:auto;margin:0}
.art .body :is(.dlbox01,.dlbox02) dd{margin:0;font-size:var(--fz-xs);line-height:1.9;color:var(--ink2)}
.art .body :is(.dlbox01,.dlbox02) dd .fwb{font-size:var(--fz-lead);line-height:1.5;color:var(--ink);margin:0 0 .5rem}

/* ── 松嶋さんの税務連載（#matsushimaNews）37本 ── */
.art #matsushimaNews section{margin:2em 0}
.art #matsushimaNews .title{display:inline-block;margin:0;padding:.35em .85em;
  background:var(--key);color:var(--bg);font-size:var(--fz-xs);font-weight:700;line-height:1.5}
.art #matsushimaNews .border1{background:var(--bg2);border-left:3px solid var(--key);
  padding:1rem 1.25rem;font-size:var(--fz-sm);line-height:1.95;color:var(--ink2)}
.art #matsushimaNews .border1 p{font-size:inherit;line-height:inherit;margin:0 0 .6em}
.art #matsushimaNews .border1 p:last-child{margin-bottom:0}
.art #matsushimaNews :is(.ol1,.ol2){margin:.4em 0;padding-left:1.5em}
.art #matsushimaNews .a2{font-weight:700;color:var(--link)}
.art #matsushimaNews .a2::before{content:"›";margin-right:.4em}
.art .body .dl03{display:grid;grid-template-columns:minmax(4em,6em) 1fr;gap:.25rem 1rem;margin:1em 0}
.art .body .dl03 dt{font-weight:700;font-size:var(--fz-xs);color:var(--ink)}
.art .body .dl03 dd{margin:0 0 .4em;font-size:var(--fz-sm);color:var(--ink2)}

/* ── 資料ダウンロードのリンク（div.link）21本・テンプレート ── */
.art .body div.link{text-align:center;margin:2em 0}
.art .body div.link > a{display:inline-flex;align-items:center;gap:.6em;padding:.85em 1.75em;
  border:1px solid var(--ink);color:var(--ink);font-size:var(--fz-sm);font-weight:700;text-decoration:none}
.art .body div.link > a::after{content:"→";font-family:var(--fe);font-weight:600}
.art .body div.link > a:hover{background:var(--key);border-color:var(--key);color:var(--bg)}

/* ── 旧テーマのショートコード [view_for_pc] / [view_for_nopc]（inc/legacy.php）── */
.tc-only-sp{display:none}
@media (max-width:47.99rem){
  .tc-only-pc{display:none}
  .tc-only-sp{display:block}
}
.art .body :is(.tc-only-pc,.tc-only-sp){text-align:center}
.art .body :is(.tc-only-pc,.tc-only-sp) img{display:inline-block;max-width:100%;height:auto}

/* =====================================================================
   v0.6.5：申込フォーム（Contact Form 7）
   セミナー30本・テンプレートのダウンロード20本・月刊誌1本。すべて同じ作り：
     form > div.fh-div.semi-form > h2 + table.fh-table（th＝項目名、td＝入力欄）
     必須は span.fc-r、ラジオの行は tr.semi-radio-ti（見出し）＋ tr.semi-radio（th が空）
   表は使わず、項目名と入力欄を横並び→幅が狭いと縦積みにする（メディアクエリなし）
   ===================================================================== */
.art .wpcf7{margin:2.5em 0}
.art .wpcf7 form{background:var(--bg2);border-top:2px solid var(--ink);padding:1.5rem clamp(1rem,4vw,2rem) 2rem}
.art .wpcf7 .semi-form > h2{margin-top:0}
.art .wpcf7 table{display:block;width:100%;margin:0;border:0;border-collapse:collapse}
.art .wpcf7 tbody{display:block}
.art .wpcf7 tr{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem 1.25rem;
  padding:.8rem 0;border-bottom:1px solid var(--rule)}
.art .wpcf7 :is(th,td){display:block;padding:0;border:0;background:none;text-align:left;vertical-align:middle}
.art .wpcf7 th{flex:1 1 9rem;font-size:var(--fz-sm);font-weight:700;color:var(--ink)}
.art .wpcf7 td{flex:999 1 17rem;min-width:0}
.art .wpcf7 :is(th,td) p{margin:0;font-size:inherit;line-height:1.6}
.art .wpcf7 :is(th,td):only-child{flex-basis:100%}
.art .wpcf7 th:empty{display:none}
/* ラジオの見出し行と選択肢の行はひとまとまりに見せる */
.art .wpcf7 tr.semi-radio-ti{border-bottom:0;padding-bottom:0}
.art .wpcf7 tr.semi-radio{padding-top:.5rem}
.art .wpcf7 tr:last-child{border-bottom:0}
.art .wpcf7 .fc-r{margin-left:.5em;font-size:var(--fz-2xs);font-weight:700;color:var(--warn)}

/* 入力欄 */
.art .wpcf7 .wpcf7-form-control-wrap{display:block}
.art .wpcf7 :is(input[type=text],input[type=email],input[type=tel],input[type=url],input[type=number],input[type=date],select,textarea){
  display:block;width:100%;box-sizing:border-box;margin:0;padding:.7em .85em;border:1px solid var(--rule);border-radius:0;
  background:var(--bg);color:var(--ink);font:inherit;font-size:var(--fz-body);line-height:1.5}
.art .wpcf7 textarea{min-height:8em;resize:vertical}
.art .wpcf7 .w50{max-width:16em}
.art .wpcf7 :is(input,select,textarea):focus{outline:2px solid var(--key);outline-offset:-1px;border-color:var(--key)}
.art .wpcf7 ::placeholder{color:var(--ink3)}

/* ラジオ・チェックボックス */
.art .wpcf7 .wpcf7-list-item{display:inline-flex;margin:.2em 1.5em .2em 0}
.art .wpcf7 .wpcf7-list-item label{display:inline-flex;align-items:center;gap:.45em;cursor:pointer;font-size:var(--fz-sm)}
.art .wpcf7 :is(input[type=radio],input[type=checkbox]){width:1.1em;height:1.1em;margin:0;accent-color:var(--key)}

/* 送信 */
.art .wpcf7 tr:has(input[type=submit]){padding-top:1.5rem}
.art .wpcf7 tr:has(input[type=submit]) td{text-align:center}
.art .wpcf7 input[type=submit]{display:inline-block;width:100%;max-width:22rem;padding:1em 1.5em;border:0;border-radius:0;
  background:var(--key);color:var(--bg);font:inherit;font-size:var(--fz-body);font-weight:700;letter-spacing:.06em;cursor:pointer}
.art .wpcf7 input[type=submit]:hover{background:var(--link)}
.art .wpcf7 input[type=submit]:disabled{opacity:.5;cursor:default}

/* エラー・送信結果 */
.art .wpcf7 .wpcf7-not-valid{border-color:var(--warn)}
.art .wpcf7 .wpcf7-not-valid-tip{display:block;margin-top:.35em;font-size:var(--fz-2xs);color:var(--warn)}
.art .wpcf7 .wpcf7-response-output{margin:1.25rem 0 0;padding:.85rem 1rem;border:1px solid var(--rule);border-left:3px solid var(--key);
  background:var(--bg);font-size:var(--fz-sm)}
.art .wpcf7 form:is(.invalid,.unaccepted,.spam,.failed,.aborted) .wpcf7-response-output{border-left-color:var(--warn)}
.art .wpcf7 form.init .wpcf7-response-output:empty{display:none}
/* 備考欄（textarea）の行は項目名を上にそろえる。注意書きだけの行は小さめの文字 */
.art .wpcf7 tr:has(textarea){align-items:flex-start}
.art .wpcf7 tr:has(textarea) th{padding-top:.75em}
.art .wpcf7 td:only-child{font-size:var(--fz-xs);color:var(--ink2)}