/*
Theme Name: Shindanshi Compass
Theme URI: https://shindanshi-compass.com/
Author: 診断士講座コンパス 運営者
Author URI: https://shindanshi-compass.com/
Description: 中小企業診断士の講座・教材比較サイト「診断士講座コンパス」専用オリジナルテーマ。合格者の一次情報を軸にした誌面風・罫線中心の編集デザイン（デザインモックv2準拠）。クラシックテーマ。
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: shindanshi-compass
Tags: two-columns, right-sidebar, custom-menu, featured-images
*/

/* =====================================================
   デザイントークン（デザインモックv2より移植）
   ===================================================== */
:root{
  --paper:#f5f3ed; --card:#fffefb; --ink:#23262d; --navy:#1d2f4a;
  --accent:#bc4a26; --accent-dark:#a03d1d; --good:#2c6e49; --bad:#9c3a32;
  --gold:#a87b00; --rule:#c9c2b2; --rule-dark:#23262d; --muted:#6d6f75;
  --serif:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif JP",serif;
  --sans:"Yu Gothic Medium","YuGothic","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.9;font-size:15.5px;-webkit-text-size-adjust:100%}
a{color:inherit}
img{max-width:100%;height:auto}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}

/* アクセシビリティ（WP標準クラス） */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}
.skip-link:focus{clip:auto;clip-path:none;height:auto;width:auto;left:8px;top:8px;background:var(--ink);color:#fff;padding:10px 16px;z-index:100;text-decoration:none}

/* ========== header ========== */
header.site{background:var(--card);border-bottom:1px solid var(--rule-dark)}
.h-top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;max-width:1120px;margin:0 auto;padding:18px 24px 14px}
.logo{text-decoration:none}
.logo .name{font-family:var(--serif);font-weight:700;font-size:1.5rem;letter-spacing:.06em;color:var(--ink)}
.logo .name i{font-style:normal;color:var(--accent)}
.logo .sub{font-size:.68rem;letter-spacing:.3em;color:var(--muted);margin-top:-2px}
.h-note{font-size:.7rem;color:var(--muted);text-align:right;line-height:1.6}
.h-note b{color:var(--ink)}
nav.g{border-top:1px solid var(--rule)}
nav.g .in{max-width:1120px;margin:0 auto;padding:0 24px;display:flex;align-items:stretch}
nav.g ul{list-style:none;display:flex;flex-wrap:wrap;margin:0;padding:0}
nav.g a{display:block;padding:11px 20px 10px;font-size:.85rem;letter-spacing:.1em;text-decoration:none;border-left:1px solid var(--rule);position:relative}
nav.g ul li:last-child a{border-right:1px solid var(--rule)}
nav.g a:hover{background:#efece3}
nav.g a.diag-link{margin-left:auto;background:var(--navy);color:#fff;border-left:none;border-right:none;padding:11px 26px 10px}
nav.g a.diag-link:hover{background:#16243a}
/* 現在ページの下線 */
nav.g ul li.current-menu-item > a{border-bottom:2px solid var(--accent)}

/* ========== hero (誌面風・非対称2カラム) ========== */
.hero{background:var(--card);border-bottom:1px solid var(--rule)}
.hero .in{max-width:1120px;margin:0 auto;padding:52px 24px 56px;display:grid;grid-template-columns:1.5fr 1fr;gap:56px;align-items:start}
.kicker{font-size:.78rem;letter-spacing:.24em;color:var(--accent);font-weight:700}
.kicker::after{content:"";display:block;width:44px;border-top:2px solid var(--accent);margin-top:8px}
.hero h1{font-family:var(--serif);font-size:clamp(1.6rem,3.2vw,2.35rem);font-weight:700;line-height:1.62;letter-spacing:.03em;margin:20px 0 16px}
.hero h1 u{text-decoration:none;border-bottom:3px solid var(--accent);padding-bottom:2px}
.hero p.lead{font-size:.92rem;color:#4a4d55;max-width:34em}
.hero .btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.btn{display:inline-block;text-decoration:none;font-weight:700;font-size:.92rem;letter-spacing:.08em;padding:14px 30px;border-radius:3px;text-align:center}
.btn-fill{background:var(--accent);color:#fff;border:1px solid var(--accent)}
.btn-fill:hover{background:var(--accent-dark)}
.btn-line{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--card)}
/* 証拠の目録カード */
.proof{border:1px solid var(--rule-dark);background:var(--card);position:relative;margin-top:6px}
.proof .cap{position:absolute;top:-11px;left:14px;background:var(--card);padding:0 10px;font-family:var(--serif);font-size:.8rem;letter-spacing:.2em;color:var(--ink)}
.proof ul{list-style:none;padding:22px 4px 8px}
.proof li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 18px;font-size:.85rem;border-bottom:1px dotted var(--rule)}
.proof li:last-child{border-bottom:none}
.proof li b{font-family:var(--serif);color:var(--navy)}
.proof li .st{font-size:.72rem;color:var(--accent);font-weight:700;letter-spacing:.1em;white-space:nowrap}
.proof .foot{border-top:1px solid var(--rule-dark);padding:10px 18px;font-size:.72rem;color:var(--muted)}

/* ========== section heads(雑誌の柱) ========== */
section.blk{padding:60px 0 8px}
.sec-head{display:flex;align-items:baseline;gap:18px;border-bottom:1px solid var(--rule-dark);padding-bottom:12px;margin-bottom:30px}
.sec-head .no{font-family:var(--serif);font-size:2rem;color:var(--accent);line-height:1}
.sec-head h2{font-family:var(--serif);font-size:1.45rem;font-weight:700;letter-spacing:.05em}
.sec-head p{margin-left:auto;font-size:.78rem;color:var(--muted)}

/* 用途別ベスト: 罫線区切りのリスト型（カード羅列を避ける） */
.best{border:1px solid var(--rule-dark);background:var(--card)}
.best .row{display:grid;grid-template-columns:11em 1fr 9em 11em;gap:18px;align-items:center;padding:20px 22px;border-bottom:1px solid var(--rule)}
.best .row:last-child{border-bottom:none}
.best .use{font-size:.8rem;letter-spacing:.08em;color:var(--card);background:var(--navy);align-self:start;justify-self:start;padding:3px 12px}
.best .row.hot .use{background:var(--accent)}
.best h3{font-family:var(--serif);font-size:1.15rem;letter-spacing:.04em}
.best .why{font-size:.82rem;color:#4a4d55}
.best .sc{text-align:right;font-family:var(--serif)}
.best .sc b{font-size:1.6rem;color:var(--navy)}
.best .sc small{font-size:.72rem;color:var(--muted)}
.best .stars{color:var(--gold);font-size:.8rem;letter-spacing:1px;display:block}
.best a.go{font-size:.82rem;font-weight:700;text-decoration:none;border:1px solid var(--ink);padding:9px 0;text-align:center;border-radius:3px}
.best a.go:hover{background:var(--ink);color:var(--card)}

/* 比較表 */
.table-scroll{overflow-x:auto;border:1px solid var(--rule-dark);background:var(--card)}
table.cmp{border-collapse:collapse;width:100%;min-width:780px;font-size:.85rem}
table.cmp th,table.cmp td{padding:13px 14px;text-align:center;vertical-align:middle;border-bottom:1px solid var(--rule)}
table.cmp thead th{background:var(--navy);color:#fff;font-weight:600;font-size:.78rem;letter-spacing:.1em}
table.cmp td.name{text-align:left;white-space:nowrap}
table.cmp td.name b{font-family:var(--serif);font-size:.98rem}
table.cmp td.name small{display:block;color:var(--muted);font-size:.72rem}
table.cmp tr.pick td{background:#faf6ec}
table.cmp td.score{font-family:var(--serif);font-size:1.05rem}
.pr{font-size:.62rem;color:var(--accent);border:1px solid var(--accent);padding:1px 5px;margin-left:7px;vertical-align:2px;letter-spacing:.1em}
td .mini-btn{display:inline-block;background:var(--accent);color:#fff;font-weight:700;font-size:.78rem;border-radius:3px;padding:8px 16px;text-decoration:none;white-space:nowrap;letter-spacing:.05em}
td .mini-btn:hover{background:var(--accent-dark)}
td .mini-btn.sub{background:transparent;color:var(--ink);border:1px solid var(--ink)}
td .mini-btn.sub:hover{background:var(--ink);color:#fff}
.note{font-size:.74rem;color:var(--muted);margin-top:10px}

/* 診断バナー: 藍のフラット面＋縦書き */
.diag{background:var(--navy);color:#fff;display:grid;grid-template-columns:auto 1fr auto;gap:34px;align-items:center;padding:30px 36px;margin-top:48px}
.diag .tate{writing-mode:vertical-rl;font-family:var(--serif);font-size:1.05rem;letter-spacing:.35em;border-right:1px solid #ffffff55;padding-right:20px}
.diag h3{font-family:var(--serif);font-size:1.3rem;letter-spacing:.05em;margin-bottom:4px}
.diag p{font-size:.83rem;color:#c3cbdb}
.diag .btn-fill{background:#fff;color:var(--navy);border-color:#fff}
.diag .btn-fill:hover{background:#e8e4d8}

/* ========== 記事レイアウト(サイドバー付き2カラム) ========== */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;align-items:start;margin-top:34px}
.article{background:var(--card);border:1px solid var(--rule-dark);padding:44px clamp(22px,4vw,52px) 48px}
.a-meta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;font-size:.75rem;color:var(--muted)}
.a-meta .cat{color:var(--card);background:var(--navy);padding:2px 12px;letter-spacing:.1em;text-decoration:none}
.article h1.title{font-family:var(--serif);font-size:1.6rem;line-height:1.65;letter-spacing:.02em;margin:14px 0 10px}
.pr-note{border:1px solid var(--rule);background:#f4f1e9;font-size:.73rem;color:var(--muted);padding:8px 14px;margin:16px 0 30px}
.article h2{font-family:var(--serif);font-size:1.32rem;letter-spacing:.04em;margin:52px 0 20px;padding:0 0 10px 16px;border-bottom:1px solid var(--rule-dark);border-left:4px solid var(--navy)}
.article h3{font-family:var(--serif);font-size:1.08rem;margin:36px 0 14px;padding-left:14px;position:relative}
.article h3::before{content:"";position:absolute;left:0;top:.35em;bottom:.35em;width:3px;background:var(--accent)}
.article p{margin:0 0 1.4em;font-size:.92rem}
.article .eyecatch{display:block;margin:0 0 26px;border:1px solid var(--rule)}

/* 本文（エディタ由来コンテンツ）の基本整形 */
.entry-content ul,.entry-content ol{margin:0 0 1.4em 1.6em;font-size:.92rem}
.entry-content blockquote{border-left:3px solid var(--rule);padding:4px 0 4px 18px;color:#4a4d55;margin:0 0 1.4em}
.entry-content table{border-collapse:collapse;width:100%;font-size:.87rem;margin:0 0 1.4em}
.entry-content table th,.entry-content table td{border:1px solid var(--rule);padding:9px 12px}
.entry-content table th{background:#faf8f2;font-weight:700}
.entry-content .wp-block-image{margin:0 0 1.4em}
.entry-content figcaption{font-size:.74rem;color:var(--muted);text-align:center;margin-top:6px}
.alignleft{float:left;margin:0 20px 12px 0}
.alignright{float:right;margin:0 0 12px 20px}
.aligncenter{display:block;margin-left:auto;margin-right:auto}
.wp-caption{max-width:100%}
.wp-caption-text{font-size:.74rem;color:var(--muted);text-align:center}

/* 目次（JSで自動生成） */
.toc{border:1px solid var(--rule-dark);padding:20px 26px;margin:28px 0;background:#faf8f2}
.toc b{font-family:var(--serif);letter-spacing:.2em;font-size:.85rem;display:block;border-bottom:1px solid var(--rule);padding-bottom:8px;margin-bottom:10px}
.toc ol{margin-left:1.5em;font-size:.86rem}
.toc li{padding:3px 0}
.toc a{color:var(--navy)}

/* 評価スコア表: 罫線の成績表風 */
.scorebox{border:1px solid var(--rule-dark);margin:28px 0;background:var(--card)}
.scorebox .head{display:flex;flex-wrap:wrap;align-items:baseline;gap:16px;padding:16px 22px;border-bottom:1px solid var(--rule-dark)}
.scorebox .head b{font-family:var(--serif);font-size:1.05rem}
.scorebox .head .stars{color:var(--gold);font-size:.85rem;letter-spacing:2px}
.scorebox .head .total{margin-left:auto;font-family:var(--serif)}
.scorebox .head .total b{font-size:2rem;color:var(--accent)}
.scorebox .head .total small{color:var(--muted);font-size:.75rem}
.scorebox .body{padding:18px 22px 20px;display:grid;gap:11px}
.axis{display:grid;grid-template-columns:12em 1fr 3em;align-items:center;gap:14px;font-size:.84rem}
.axis .lb small{color:var(--muted)}
.bar{height:8px;background:#e7e3d7;position:relative}
.bar i{display:block;height:100%;background:var(--navy)}
.axis b{text-align:right;font-family:var(--serif);font-size:1rem}

/* メリデメ: 罫線2カラム */
.merideme{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--rule-dark);margin:28px 0;background:var(--card)}
.md{padding:0}
.md+.md{border-left:1px solid var(--rule)}
.md .h{font-family:var(--serif);letter-spacing:.15em;font-size:.88rem;padding:10px 18px;border-bottom:1px solid var(--rule)}
.md.good .h{color:var(--good)} .md.bad .h{color:var(--bad)}
.md ul{list-style:none;margin:0;padding:12px 18px 16px;display:grid;gap:9px;font-size:.85rem}
.md.good li::before{content:"○";color:var(--good);font-weight:700;margin-right:9px}
.md.bad li::before{content:"△";color:var(--bad);font-weight:700;margin-right:9px}

/* 向く人/向かない人 */
.fit{border:1px solid var(--rule-dark);margin:28px 0;font-size:.86rem;background:var(--card)}
.fit .row{display:grid;grid-template-columns:10em 1fr}
.fit .row+.row{border-top:1px solid var(--rule)}
.fit .k{padding:14px 18px;font-family:var(--serif);display:flex;align-items:center;border-right:1px solid var(--rule)}
.fit .row:first-child .k{color:var(--good)} .fit .row:last-child .k{color:var(--bad)}
.fit .v{padding:14px 18px}

/* 合格者コメント: 人物味は写真枠で出す */
.voice{display:grid;grid-template-columns:74px 1fr;gap:16px;margin:30px 0;align-items:start}
.voice .photo{width:74px;height:74px;border:1px solid var(--rule-dark);background:#e9e5d9;display:flex;align-items:center;justify-content:center;font-size:.62rem;color:var(--muted);text-align:center;line-height:1.5;overflow:hidden}
.voice .photo img{width:100%;height:100%;object-fit:cover}
.voice .bubble{border:1px solid var(--rule-dark);background:var(--card);padding:16px 20px;font-size:.88rem;position:relative}
.voice .bubble::before{content:"";position:absolute;left:-9px;top:24px;width:16px;height:16px;background:var(--card);border-left:1px solid var(--rule-dark);border-bottom:1px solid var(--rule-dark);transform:rotate(45deg)}
.voice .bubble b{color:var(--accent)}
.voice .who{font-size:.72rem;color:var(--muted);margin-top:6px}

/* 口コミ: 引用風 */
.review-list{margin:28px 0;border-top:1px solid var(--rule-dark)}
.rv{display:grid;grid-template-columns:10em 1fr;gap:18px;padding:16px 6px;border-bottom:1px solid var(--rule)}
.rv .side{font-size:.74rem;color:var(--muted)}
.rv .side .lab{display:block;font-family:var(--serif);color:var(--ink);font-size:.85rem}
.rv .side .stars{color:var(--gold);letter-spacing:1px}
.rv p{font-size:.87rem;margin:0;padding-left:16px;border-left:2px solid var(--rule)}

/* CTA: 帯封風 */
.ctabox{border:1px solid var(--accent);outline:3px solid #f3e3da;margin:34px 0;padding:26px 30px;background:var(--card);text-align:center;position:relative}
.ctabox .cap{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--card);color:var(--accent);font-family:var(--serif);letter-spacing:.25em;font-size:.8rem;padding:0 16px;white-space:nowrap}
.ctabox .p1{font-family:var(--serif);font-size:1.12rem;margin-bottom:4px}
.ctabox .p2{font-size:.8rem;color:var(--muted);margin-bottom:16px}
.ctabox .btn{width:min(420px,100%)}
.ctabox .micro{font-size:.7rem;color:var(--muted);margin-top:10px}

/* ランキング: 番付表風 */
.rank{border:1px solid var(--rule-dark);margin:28px 0;background:var(--card)}
.rk{display:grid;grid-template-columns:5.5em 1fr auto;gap:18px;align-items:center;padding:18px 22px;border-bottom:1px solid var(--rule)}
.rk:last-child{border-bottom:none}
.rk .pos{font-family:var(--serif);text-align:center;line-height:1.2}
.rk .pos b{font-size:1.9rem}
.rk .pos small{display:block;font-size:.68rem;letter-spacing:.2em;color:var(--muted)}
.rk:nth-child(1) .pos b{color:var(--accent)}
.rk h4{font-family:var(--serif);font-size:1.05rem}
.rk .meta{font-size:.78rem;color:var(--muted);margin:0}
.rk .right{text-align:right;display:grid;gap:8px;justify-items:end}
.rk .stars{color:var(--gold);font-size:.8rem}

/* POINT/注意 */
.box{border:1px solid var(--rule-dark);margin:26px 0;font-size:.87rem;background:var(--card)}
.box .tab{display:inline-block;font-family:var(--serif);letter-spacing:.2em;font-size:.75rem;color:#fff;padding:3px 14px;margin:-1px 0 0 -1px}
.box.point .tab{background:var(--good)} .box.warn .tab{background:var(--bad)}
.box .in{padding:12px 18px 14px}

/* ========== 固定ページ（1カラム広め） ========== */
.page-single .article{max-width:860px;margin:34px auto 0}
.page-single .article h1.title{margin-top:0}

/* ========== アーカイブ（罫線区切りのリスト型） ========== */
.page-head{padding:44px 0 0}
.page-head h1{font-family:var(--serif);font-size:1.5rem;letter-spacing:.04em;border-bottom:1px solid var(--rule-dark);padding-bottom:12px}
.page-head h1 small{font-size:.78rem;color:var(--muted);font-family:var(--sans);margin-left:14px;letter-spacing:.1em}
.page-head .desc{font-size:.85rem;color:var(--muted);margin-top:10px}
.arch-list{border:1px solid var(--rule-dark);background:var(--card)}
.arch-item{padding:22px 24px;border-bottom:1px solid var(--rule)}
.arch-item:last-child{border-bottom:none}
.arch-item .t{font-family:var(--serif);font-size:1.12rem;line-height:1.6;margin:8px 0 6px;font-weight:700}
.arch-item .t a{text-decoration:none}
.arch-item .t a:hover{text-decoration:underline}
.arch-item .ex{font-size:.85rem;color:#4a4d55;margin:0 0 6px}
.arch-item .more{font-size:.8rem;color:var(--navy);font-weight:700;text-decoration:none}
.arch-none{background:var(--card);border:1px solid var(--rule-dark);padding:30px;font-size:.9rem}
/* ページネーション */
.pagination{margin:28px 0 0;text-align:center}
.pagination .page-numbers{display:inline-block;border:1px solid var(--ink);padding:8px 14px;margin:0 3px 6px;text-decoration:none;font-size:.85rem;background:var(--card)}
.pagination .page-numbers.current{background:var(--ink);color:var(--card)}
.pagination .page-numbers.dots{border:none;background:transparent}

/* 検索フォーム */
.search-form{display:flex;gap:0;max-width:420px}
.search-form input[type="search"]{flex:1;border:1px solid var(--ink);background:var(--card);padding:10px 14px;font-size:.9rem;font-family:var(--sans);border-radius:3px 0 0 3px}
.search-form button{border:1px solid var(--ink);background:var(--ink);color:var(--card);padding:10px 20px;font-size:.85rem;letter-spacing:.1em;cursor:pointer;border-radius:0 3px 3px 0;font-family:var(--sans)}
.search-form button:hover{background:var(--navy);border-color:var(--navy)}

/* 404 */
.error-404{background:var(--card);border:1px solid var(--rule-dark);margin:44px auto;max-width:640px;padding:44px 36px;text-align:center}
.error-404 .code{font-family:var(--serif);font-size:2.6rem;color:var(--accent);line-height:1}
.error-404 h1{font-family:var(--serif);font-size:1.3rem;margin:14px 0 10px}
.error-404 p{font-size:.88rem;color:#4a4d55;margin-bottom:20px}
.error-404 .search-form{margin:0 auto 20px}

/* ========== footer ========== */
footer.site{background:var(--ink);color:#c9c5ba;margin-top:64px;padding:44px 0 24px;font-size:.8rem}
footer .cols{display:flex;flex-wrap:wrap;gap:34px;justify-content:space-between;margin-bottom:26px}
footer .cols b{color:#f5f3ed;font-family:var(--serif);letter-spacing:.1em;display:block;margin-bottom:8px}
footer .cols ul{list-style:none;margin:0;padding:0}
footer .cols a{color:#c9c5ba;text-decoration:none;display:block;margin-bottom:6px}
footer .cols a:hover{text-decoration:underline}
footer .cr{border-top:1px solid #ffffff26;padding-top:16px;text-align:center;color:#8e8b81;letter-spacing:.05em}

/* ===== sidebar ===== */
aside.sb{display:grid;gap:26px;position:sticky;top:20px}
.sb-box{border:1px solid var(--rule-dark);background:var(--card)}
.sb-box .h{font-family:var(--serif);letter-spacing:.2em;font-size:.82rem;padding:10px 16px;border-bottom:1px solid var(--rule-dark);background:#faf8f2}
.sb-box .in{padding:16px}
.sb-prof{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:center;margin-bottom:10px}
.sb-prof .ph{width:64px;height:64px;border:1px solid var(--rule-dark);background:#e9e5d9;display:flex;align-items:center;justify-content:center;font-size:.6rem;color:var(--muted);text-align:center;line-height:1.5;overflow:hidden}
.sb-prof .ph img{width:100%;height:100%;object-fit:cover}
.sb-prof b{font-family:var(--serif)}
.sb-prof small{display:block;color:var(--muted);font-size:.72rem}
.sb-box .in p{font-size:.8rem;margin-bottom:8px}
.sb-box .in .more{font-size:.78rem;color:var(--navy);font-weight:700;text-decoration:none}
.sb-pop{list-style:none;margin:0;padding:0}
.sb-pop li{display:grid;grid-template-columns:2.2em 1fr;gap:10px;padding:10px 16px;border-bottom:1px dotted var(--rule);font-size:.82rem;align-items:baseline}
.sb-pop li:last-child{border-bottom:none}
.sb-pop .n{font-family:var(--serif);font-size:1.05rem;color:var(--accent)}
.sb-pop a{text-decoration:none;line-height:1.55}
.sb-pop a:hover{text-decoration:underline}
.sb-diag{background:var(--navy);color:#fff;padding:22px 18px;text-align:center}
.sb-diag .t{font-family:var(--serif);font-size:1.02rem;letter-spacing:.1em;margin-bottom:4px}
.sb-diag p{font-size:.75rem;color:#c3cbdb;margin-bottom:14px}
.sb-diag .btn{display:block;background:#fff;color:var(--navy);border-radius:3px;padding:11px;font-size:.85rem}
.sb-cat{list-style:none;margin:0;padding:0}
.sb-cat li{border-bottom:1px dotted var(--rule)}
.sb-cat li:last-child{border-bottom:none}
.sb-cat a{display:flex;justify-content:space-between;padding:9px 16px;font-size:.83rem;text-decoration:none}
.sb-cat a:hover{background:#f4f1e9}
.sb-cat small{color:var(--muted)}
/* ウィジェットを追加した場合の汎用整形 */
.sb-widget{border:1px solid var(--rule-dark);background:var(--card);padding:16px}
.sb-widget .widget-title{font-family:var(--serif);letter-spacing:.2em;font-size:.82rem;border-bottom:1px solid var(--rule-dark);margin:-16px -16px 12px;padding:10px 16px;background:#faf8f2}
.sb-widget ul{list-style:none;margin:0;padding:0}
.sb-widget li{padding:6px 0;border-bottom:1px dotted var(--rule);font-size:.83rem}
.sb-widget li:last-child{border-bottom:none}
.sb-widget a{text-decoration:none}
.sb-widget a:hover{text-decoration:underline}

/* ========== ヒーロー（背景画像＋左寄せ1カラム） ========== */
/* 背景画像は hero.php 側で inline style（get_template_directory_uri）指定 */
.hero.hero-visual{background-color:var(--card);background-size:cover;background-position:right center;background-repeat:no-repeat}
.hero.hero-visual .in{display:block;padding:64px 24px 68px}
/* 可読性確保: 紙色の単色半透明パネル（グラデーションは使わない） */
.hero-copy{max-width:640px;background:rgba(255,254,251,.82);padding:26px 30px 30px}

/* ========== 網羅比較（収録42サービス・カテゴリ別6ブロック） ========== */
.cmpz{display:grid;gap:28px}
.cmpz-b{border:1px solid var(--rule-dark);background:var(--card)}
.cmpz-b .bh{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:11px 18px;border-bottom:1px solid var(--rule-dark);background:#faf8f2}
.cmpz-b .bh .t{font-family:var(--serif);font-weight:700;letter-spacing:.08em;font-size:.98rem}
.cmpz-b .bh small{font-size:.72rem;color:var(--muted);letter-spacing:.05em}
.cmpz-scroll{overflow-x:auto}
table.cmpz-t{border-collapse:collapse;width:100%;min-width:640px;font-size:.82rem}
table.cmpz-t th,table.cmpz-t td{padding:9px 16px;text-align:left;border-bottom:1px dotted var(--rule);vertical-align:top;line-height:1.7}
table.cmpz-t thead th{font-size:.7rem;letter-spacing:.14em;color:var(--muted);font-weight:600;border-bottom:1px solid var(--rule);white-space:nowrap}
table.cmpz-t td.nm b{font-family:var(--serif);font-size:.9rem}
table.cmpz-t td:nth-child(2),table.cmpz-t td:nth-child(3){white-space:nowrap}
table.cmpz-t tbody tr:last-child td{border-bottom:none}
.cmpz-b .bf{display:block;border-top:1px solid var(--rule);padding:10px 18px;font-size:.8rem;font-weight:700;color:var(--navy);text-decoration:none;text-align:right}
.cmpz-b .bf:hover{background:#f4f1e9}

/* ========== 運営者紹介（誌面風・罫線囲み） ========== */
.author-box{border:1px solid var(--rule-dark);background:var(--card);position:relative;padding:34px 36px 30px;max-width:860px;margin:0 auto}
.author-box .cap{position:absolute;top:-12px;left:22px;background:var(--card);padding:0 12px;font-family:var(--serif);font-size:.8rem;letter-spacing:.2em;color:var(--ink)}
.author-box .lead-txt{font-family:var(--serif);font-size:1.05rem;line-height:2;margin-bottom:10px}
.author-box p{font-size:.9rem;margin-bottom:8px}
.author-box .more{font-size:.85rem;color:var(--navy);font-weight:700;text-decoration:none}
.author-box .more:hover{text-decoration:underline}

/* ========== レスポンシブ（モックv2準拠） ========== */
@media(max-width:960px){
  .hero .in{grid-template-columns:1fr;gap:34px}
  .layout{grid-template-columns:1fr}
  aside.sb{position:static}
  .best .row{grid-template-columns:1fr;gap:8px}
  .best .sc{text-align:left}
  .diag{grid-template-columns:1fr;gap:18px}
  .diag .tate{writing-mode:horizontal-tb;border-right:none;border-bottom:1px solid #ffffff55;padding:0 0 12px}
  .merideme{grid-template-columns:1fr}
  .md+.md{border-left:none;border-top:1px solid var(--rule)}
  .rv{grid-template-columns:1fr;gap:6px}
  nav.g .in{flex-wrap:wrap}
  nav.g a.diag-link{margin-left:0}
  .h-top{flex-direction:column;align-items:flex-start;gap:8px}
  .h-note{text-align:left}
  /* ヒーロー（背景画像版）: スマホはパネルを全幅に */
  .hero.hero-visual .in{padding:44px 24px 48px}
  .hero-copy{max-width:none;padding:20px 18px 22px}
  /* 網羅比較: 小見出しを縦積みに */
  .cmpz-b .bh{flex-direction:column;align-items:flex-start;gap:2px}
  /* 運営者紹介 */
  .author-box{padding:28px 20px 24px}
}


/* v5: 画像・表組の余白調整 */
.article figure{margin:2.4em 0}
.article figure img{display:block;width:100%;height:auto;border:1px solid var(--rule)}
.article figure figcaption{font-size:.78rem;color:var(--muted);margin-top:.7em;line-height:1.7}
.article .table-scroll{margin:2.2em 0}
.article h2 + figure,.article h3 + figure{margin-top:1.6em}


/* v6: スマホ横はみ出し対策 */
/* ページ全体が横スクロールしないようにする（表は表自身の中でスクロールさせる） */
html,body{max-width:100%;overflow-x:hidden}
img,figure,iframe,video{max-width:100%}
.article{overflow-wrap:break-word;word-break:break-word}

/* grid/flex の子要素は既定の min-width:auto で中身に押し広げられる。0を明示して封じる */
.layout,.layout>*{min-width:0}
.cmpz,.cmpz-b,.cmpz-b>*{min-width:0}
.best,.best .row,.best .row>*{min-width:0}
.blk,.wrap,section,article,aside{min-width:0}
.table-scroll,.cmpz-scroll{max-width:100%;-webkit-overflow-scrolling:touch}

/* スクロールできることを視覚的に示す（右端の影） */
.table-scroll,.cmpz-scroll{
  background-image:linear-gradient(to right,var(--card),var(--card)),
                   linear-gradient(to right,rgba(35,38,45,.14),rgba(35,38,45,0));
  background-position:right center,right center;
  background-repeat:no-repeat;
  background-size:24px 100%,14px 100%;
  background-attachment:local,scroll;
}

@media(max-width:768px){
  /* 表の最小幅を詰めてスクロール量を減らす */
  table.cmp{min-width:600px;font-size:.8rem}
  table.cmp th,table.cmp td{padding:10px 10px}
  table.cmpz-t{min-width:520px;font-size:.78rem}
  table.cmpz-t th,table.cmpz-t td{padding:8px 11px}
  /* 「横スクロールできます」のヒント */
  .table-scroll::before,.cmpz-scroll::before{content:none}
  .wrap{padding:0 16px}
  .article{padding:28px 16px 32px}
  .hero.hero-visual .in{padding:36px 16px 40px}
  .hero h1{font-size:1.35rem;line-height:1.6}
  .hero-copy{padding:18px 14px 20px}
  .sec-head{flex-wrap:wrap;gap:8px}
  .sec-head p{margin-left:0;flex-basis:100%}
  .scorebox .axis{grid-template-columns:8.5em 1fr 2.6em;gap:8px;font-size:.78rem}
  .fit .row{grid-template-columns:1fr}
  .fit .k{border-right:none;border-bottom:1px solid var(--rule)}
  .rk{grid-template-columns:1fr;gap:10px}
  .rk .right{justify-items:start}
  .voice{grid-template-columns:1fr}
  .voice .bubble::before{display:none}
  .ctabox{padding:22px 16px 18px}
  .ctabox .cap{font-size:.72rem;letter-spacing:.15em}
  footer .cols{flex-direction:column;gap:20px}
}
@media(max-width:420px){
  .article h1.title{font-size:1.3rem}
  .article h2{font-size:1.12rem;padding-left:12px}
  .logo .name{font-size:1.25rem}
}


/* v8: PCでは表を収める（min-widthはスマホ幅でのみ効かせる） */
table.cmp{min-width:0}
table.cmpz-t{min-width:0}
@media(min-width:769px){
  /* PC: 横スクロールを発生させない。長い列は折り返す */
  table.cmp td,table.cmp th{white-space:normal}
  table.cmp td.name{white-space:normal}
  .table-scroll,.cmpz-scroll{background-image:none}
}
@media(max-width:768px){
  /* スマホ: 読める幅を確保してスクロールさせる */
  table.cmp{min-width:600px}
  table.cmpz-t{min-width:520px}
}


/* v9: スマホ用ハンバーガーメニュー */
.nav-toggle{display:none;align-items:center;gap:8px;background:var(--navy);color:#fff;border:none;border-radius:3px;padding:9px 14px;font-family:inherit;font-size:.82rem;letter-spacing:.1em;cursor:pointer}
.nav-toggle .bars{display:inline-block;width:16px;height:12px;position:relative}
.nav-toggle .bars span{position:absolute;left:0;width:100%;height:2px;background:#fff;transition:transform .2s,opacity .2s}
.nav-toggle .bars span:nth-child(1){top:0}
.nav-toggle .bars span:nth-child(2){top:5px}
.nav-toggle .bars span:nth-child(3){top:10px}
body.nav-open .nav-toggle .bars span:nth-child(1){transform:translateY(5px) rotate(45deg)}
body.nav-open .nav-toggle .bars span:nth-child(2){opacity:0}
body.nav-open .nav-toggle .bars span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

@media(max-width:960px){
  .h-top{flex-direction:row;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
  .h-note{display:none}
  .nav-toggle{display:inline-flex}
  /* メニュー本体: 既定は閉じる */
  nav.g{display:none;border-top:1px solid var(--rule)}
  body.nav-open nav.g{display:block}
  nav.g .in{display:block;padding:0}
  nav.g a{display:block;padding:14px 20px;border-left:none;border-bottom:1px solid var(--rule)}
  nav.g a:last-of-type{border-right:none}
  nav.g a.diag-link{margin-left:0;text-align:center;border-bottom:none}
  nav.g ul{list-style:none;margin:0;padding:0}
  nav.g li a{display:block;padding:14px 20px;border-bottom:1px solid var(--rule);text-decoration:none}
}
@media(max-width:768px){
  .logo .name{font-size:1.15rem}
  .logo .sub{font-size:.62rem}
  .nav-toggle{padding:8px 12px;font-size:.78rem}
}


/* v10: スマホナビを縦1列に */
@media(max-width:960px){
  nav.g .in{display:block!important;flex-wrap:nowrap;padding:0}
  nav.g ul{display:block!important;list-style:none;margin:0;padding:0;width:100%}
  nav.g li{display:block!important;width:100%;float:none;border:none}
  nav.g li a,nav.g > .in > a{display:block!important;width:100%;box-sizing:border-box;text-align:left;padding:15px 20px;border:none;border-bottom:1px solid var(--rule)}
  nav.g a.diag-link{text-align:center;border-bottom:none;background:var(--navy);color:#fff}
}


/* v11: ハンバーガーメニュー（アイコン＋下にMENU表記・枠なし） */
.nav-toggle{
  display:none;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  background:transparent;border:none;border-radius:0;padding:2px 4px;cursor:pointer;
  color:var(--ink);line-height:1;
}
.nav-toggle .bars{display:block;width:26px;height:18px;position:relative}
.nav-toggle .bars span{position:absolute;left:0;width:100%;height:2px;background:var(--ink);border-radius:1px;transition:transform .22s ease,opacity .16s ease}
.nav-toggle .bars span:nth-child(1){top:0}
.nav-toggle .bars span:nth-child(2){top:8px}
.nav-toggle .bars span:nth-child(3){top:16px}
.nav-toggle .txt{font-family:"Helvetica Neue",Arial,sans-serif;font-size:.58rem;letter-spacing:.14em;font-weight:700;color:var(--ink)}
body.nav-open .nav-toggle .bars span:nth-child(1){transform:translateY(8px) rotate(45deg)}
body.nav-open .nav-toggle .bars span:nth-child(2){opacity:0}
body.nav-open .nav-toggle .bars span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

@media(max-width:960px){
  /* ヘッダー: ロゴ左・メニュー右 */
  .h-top{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:12px;flex-wrap:nowrap;padding:14px 16px}
  .nav-toggle{display:inline-flex;flex:none}
  .h-note{display:none}

  /* 展開メニュー: 帯状の項目を縦に積む */
  nav.g{display:none;border-top:1px solid var(--rule-dark)}
  body.nav-open nav.g{display:block}
  nav.g .in{display:block!important;padding:0}
  nav.g ul{display:block!important;list-style:none;margin:0;padding:0;width:100%}
  nav.g li{display:block!important;width:100%;float:none;border:none}
  nav.g li a,nav.g > .in > a{
    display:block!important;width:100%;box-sizing:border-box;
    padding:15px 20px;text-align:left;text-decoration:none;
    background:#f4f1e9;border:none;border-bottom:1px solid var(--card);
    font-size:.92rem;letter-spacing:.06em;
  }
  nav.g li a:hover{background:#ebe7dc}
  nav.g a.diag-link{background:var(--navy);color:#fff;text-align:center;border-bottom:none;letter-spacing:.1em}
  nav.g a.diag-link:hover{background:#16243a}
}


/* v12: 引用スクリーンショット */
.article figure.site-shot{margin:2.4em 0;padding:14px;border:1px solid var(--rule);background:#fbfaf6}
.article figure.site-shot img{border:1px solid var(--rule-dark);width:100%;height:auto;display:block}
.article figure.site-shot figcaption{font-size:.78rem;color:var(--muted);margin-top:.8em;line-height:1.8}
.article figure.site-shot .src{font-size:.72rem;color:var(--muted)}
.article figure.site-shot .src a{color:var(--navy);word-break:break-all}


/* v13: 記事一覧への導線 */
.kiji-more{margin-top:18px;text-align:right}
.kiji-more a{font-family:var(--serif);font-size:.92rem;color:var(--navy);text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:2px}
.kiji-more a:hover{color:var(--accent)}

/* カテゴリ一覧ページ */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0;border:1px solid var(--rule-dark);background:var(--card)}
.cat-grid .cell{padding:20px 22px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.cat-grid .cell h3{font-family:var(--serif);font-size:1.05rem;margin-bottom:6px}
.cat-grid .cell h3 a{color:var(--navy);text-decoration:none}
.cat-grid .cell h3 a:hover{color:var(--accent)}
.cat-grid .cell p{font-size:.82rem;color:var(--muted);margin:0}
.cat-grid .cell .cnt{font-size:.72rem;color:var(--accent);font-weight:700}
@media(max-width:768px){
  .cat-grid{grid-template-columns:1fr}
  .cat-grid .cell{border-right:none}
}


/* v14: 運営者アイコン */
img.ph{width:64px;height:64px;border-radius:50%;object-fit:cover;border:1px solid var(--rule-dark);background:var(--paper);display:block}
.author-box img.ph{width:88px;height:88px}
.voice img.ph{width:74px;height:74px}


/* v15: 記事一覧（カード） */
.page-lead{margin-bottom:34px}
.page-lead .page-title{font-family:var(--serif);font-size:1.7rem;letter-spacing:.04em;margin-bottom:14px}
.page-lead p{font-size:.92rem}
.list-h{font-family:var(--serif);font-size:1.35rem;letter-spacing:.05em;margin:44px 0 20px;padding:0 0 10px 14px;border-bottom:1px solid var(--rule-dark);border-left:4px solid var(--navy)}
.post-cards{display:grid;gap:0;border:1px solid var(--rule-dark);background:var(--card)}
.pc-item{display:grid;grid-template-columns:220px minmax(0,1fr);gap:20px;padding:20px 22px;border-bottom:1px solid var(--rule);align-items:start}
.pc-item:last-child{border-bottom:none}
.pc-thumb{display:block;line-height:0}
.pc-thumb img{width:100%;height:auto;border:1px solid var(--rule);display:block}
.pc-noimg{display:block;width:100%;padding-top:66%;background:#efece3;border:1px solid var(--rule)}
.pc-meta{display:flex;align-items:center;gap:12px;font-size:.74rem;color:var(--muted);margin-bottom:8px}
.pc-cat{background:var(--navy);color:#fff;text-decoration:none;padding:2px 10px;letter-spacing:.06em}
.pc-cat:hover{background:var(--accent)}
.pc-title{font-family:var(--serif);font-size:1.08rem;line-height:1.6;margin-bottom:8px}
.pc-title a{color:var(--ink);text-decoration:none}
.pc-title a:hover{color:var(--accent)}
.pc-ex{font-size:.83rem;color:#4a4d55;margin:0;line-height:1.85}
.pager{margin:26px 0}
.pager ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px;justify-content:center;padding:0}
.pager a,.pager span{display:inline-block;padding:9px 15px;border:1px solid var(--rule-dark);text-decoration:none;font-size:.85rem;color:var(--ink);background:var(--card)}
.pager .current{background:var(--navy);color:#fff;border-color:var(--navy)}
.pager a:hover{background:#f4f1e9}
@media(max-width:768px){
  .pc-item{grid-template-columns:1fr;gap:12px;padding:16px}
  .pc-thumb img{max-height:210px;object-fit:cover}
  .list-h{font-size:1.18rem}
}


/* v16: カテゴリ表示の調整 */
.cat-grid .cell.is-empty{opacity:.55}
.cat-grid .cell.is-empty .cnt{color:var(--muted)}
.archive .post-cards,.search .post-cards{margin-top:8px}
.navigation.pagination{margin:26px 0}
.navigation.pagination .nav-links{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.navigation.pagination .page-numbers{display:inline-block;padding:9px 15px;border:1px solid var(--rule-dark);text-decoration:none;font-size:.85rem;color:var(--ink);background:var(--card)}
.navigation.pagination .page-numbers.current{background:var(--navy);color:#fff;border-color:var(--navy)}
.navigation.pagination a.page-numbers:hover{background:#f4f1e9}
.arch-none{border:1px solid var(--rule-dark);background:var(--card);padding:28px 24px;font-size:.9rem}


/* v17: 講座診断フォーム */
.shindan-intro{font-size:.95rem;margin-bottom:26px}
#shindan-form{margin:0 0 30px}
.sq{border:1px solid var(--rule-dark);background:var(--card);padding:20px 22px;margin-bottom:18px}
.sq .q{font-family:var(--serif);font-size:1.06rem;letter-spacing:.03em;margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--rule)}
.sq .q .no{color:var(--accent);margin-right:8px}
.opt{display:flex;align-items:center;gap:10px;padding:13px 15px;border:1px solid var(--rule);margin-bottom:8px;cursor:pointer;font-size:.92rem;background:var(--paper)}
.opt:last-child{margin-bottom:0}
.opt:hover{background:#f0ece1}
.opt input{width:18px;height:18px;accent-color:var(--navy);flex:none;margin:0}
.opt input:checked + span{font-weight:700;color:var(--navy)}
.sq-error{color:var(--bad);font-weight:700;font-size:.9rem;margin:0 0 14px;padding:12px 16px;border:1px solid var(--bad);background:#fdf3f2}
.shindan-submit{text-align:center;margin:28px 0}
.shindan-submit .btn{min-width:min(360px,100%);font-size:1rem;padding:16px 30px;cursor:pointer}
.shindan-note{font-size:.78rem;color:var(--muted);text-align:center}
@media(max-width:768px){
  .sq{padding:16px 14px}
  .sq .q{font-size:.98rem}
  .opt{padding:14px 12px;font-size:.88rem}
}


/* v18: 公式サイトボタン（記事内・外部リンクは別タブで開く） */
.article .offbtn{margin:2.2em 0;text-align:center}
.article .offbtn a{
  display:inline-block;width:100%;max-width:min(460px,100%);box-sizing:border-box;
  text-decoration:none;font-weight:700;font-size:.95rem;letter-spacing:.06em;line-height:1.55;
  padding:16px 24px;border-radius:3px;text-align:center;
  background:var(--accent);color:#fff;border:1px solid var(--accent)
}
.article .offbtn a:hover{background:var(--accent-dark);color:#fff}
.article .offbtn a.sub{background:transparent;color:var(--navy);border-color:var(--navy)}
.article .offbtn a.sub:hover{background:var(--navy);color:#fff}
.article .offbtn a .arw{font-weight:400;margin-left:.45em}
.article .offbtn .micro{display:block;margin-top:.7em;font-size:.72rem;color:var(--muted);letter-spacing:.02em}
@media(max-width:768px){
  .article .offbtn a{font-size:.9rem;padding:15px 16px}
}

/* 見出し直下に置く比較用スクリーンショットは少し詰める */
.article h2 + figure.site-shot,
.article h3 + figure.site-shot{margin-top:1.4em}

/* 記事内の外部リンクであることの明示（本文中テキストリンク） */
.article .ext-note{font-size:.78rem;color:var(--muted)}


/* ========== v19: サイドバーのスクロール追従 ========== */

/* v6 で入れた overflow-x:hidden は、overflow-y を auto に計算させて
   body 自身をスクロールコンテナ化するため、配下の position:sticky を無効化する。
   clip なら横はみ出しを止めつつスクロールコンテナを作らないので sticky が生きる。 */
@supports (overflow-x:clip){
  html,body{overflow-x:clip}
}

@media(min-width:961px){
  .layout{align-items:start}
  aside.sb{position:sticky;align-self:start;top:20px}
  /* 追従中に中身が長くても、記事の終端で自然に止まる（.layout が含みブロック） */
}