/*
Theme Name: 拡張図鑑（SANGO子テーマ）
Theme URI: https://kakucho-zukan.com/
Description: 拡張図鑑のための SANGO 子テーマ。ヘッダー・フッター・一覧ページの見た目を、確定デザイン「案A30W」に合わせます。親テーマ（SANGO）は書き換えません。
Author: 拡張図鑑 編集部
Template: sango-theme
Version: 0.9.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kakucho-zukan-child
*/

/* =====================================================================
   B章（SANGO向け）＝テーマの部品に当てる指定だけ。
   自前の部品（kz- で始まるもの）の指定は、管理画面の「外観 → カスタマイズ → 追加CSS」に
   貼る `拡張図鑑_追加CSS_本番用.css` ＋ `追加分_本番用.css`（D章）の側にあります。
   ここを分けているのは、テーマを替えたときにこのファイルだけ作り直せばよくするためです。
   ===================================================================== */

:root{
  --kz-ink:#162F3A;
  --kz-ink-weak:#4A5E66;
  --kz-green:#4FCB8A;
  --kz-ink-hover:#24495A;
  --kz-gray:#F3F5F4;
  --kz-tint:#F7F7F5;
  --kz-line:#E4E4E4;
  --kz-marker:#FFE566;
  --kz-font:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;  /* 0.9.4：Webフォント（Zen Kaku Gothic New）をやめ、端末の標準の字体に */
}

/* ---------- B-S1. 全体の字体・色（SANGOの初期値を上書き） ---------- */
body,
body.custom-background,
#container,
.entry-content,
input,
textarea,
button,
select{
  font-family:var(--kz-font);
  color:var(--kz-ink);
}
body{font-weight:500;letter-spacing:.03em;background:#fff;}
#container{background:#fff;}
a{color:var(--kz-ink);}
.main-c,.main-c-before::before{color:var(--kz-green);}
.main-bc{background-color:var(--kz-green);}

/* ---------- B-S2. 幅（PC＝1024px以上。中身の最大幅1040px・本文780px） ---------- */
#inner-content.wrap,
.wrap{max-width:1040px;}
#main{max-width:100%;}
@media only screen and (min-width:1024px){
  #content #inner-content{display:flex;gap:40px;align-items:flex-start;}
  #content #main{flex:1 1 auto;min-width:0;max-width:780px;}
  #content #sidebar1{flex:0 0 300px;width:300px;}
  #content.one-column #inner-content{display:block;}
  #content.one-column #main{max-width:100%;margin:0 auto;}
}
@media only screen and (max-width:1023px){
  #content #sidebar1{width:100%;float:none;margin-top:40px;}
}

/* ---------- B-S2b. トップページだけ、中身を画面いっぱいに（緑の顔を端まで出すため） ---------- */
.kz-front #content{padding-left:0;padding-right:0;}
.kz-front #content > #inner-content.wrap{max-width:none;padding:0;margin:0;width:100%;}
.kz-front #content #main{max-width:none;width:100%;margin:0;}
.kz-front .entry-content{margin:0;padding:0;}
.kz-front #main > article,.kz-front #entry{margin:0;}

/* ---------- B-S2e. 記事・固定ページのPC表示を「灰色の地＋白いカード」に（0.9.5、2026-11-03 清野さん指示）
   ・対象は記事（.single）と固定ページ（.page）だけ。トップ（.kz-front）・一覧・カテゴリは今のまま。
   ・PC（1024px以上）だけ。1023px以下（タブレット・スマホ）は今のまま。
   ・1列（body に kz-1col。functions.php の kzc_is_one_column() が付ける）＝今の形。
       サイドバーを出さず、白いカード（最大860px・padding 32px 36px 40px・角丸10px）を中央に。本文の幅は 860-72-80＝708px。
       中身の最大幅・ヘッダー・フッターは1040pxのまま。
   ・2列（kz-2col。サイドバーを出すように戻したとき）＝スレッドワークの実測に合わせた形。
       中身の最大幅1160px（左右20px）／カード784px／間36px／サイドバー300px（ウィジェットは白いカード）。本文の幅は632px。
       ヘッダー・フッターも1160pxに揃える。サイドバーの追従は入れていない（2026-11-03 依頼の変更で不要に）。
   ・H1（記事のタイトル）は28→26px。追加CSSの .entry-title{font-size:28px} に勝つよう、.kz を付けて強くしている。 ---------- */
@media only screen and (min-width:1024px){
  body.kz-1col:not(.kz-front),body.kz-2col:not(.kz-front),
  .kz-1col:not(.kz-front) #container,.kz-2col:not(.kz-front) #container{background:#F2F0F7;} /* 2026-11-03 清野さん決定：地の色はスレッドワークと同じ rgb(242,240,247) */
  .kz-1col:not(.kz-front) #content,.kz-2col:not(.kz-front) #content{padding-bottom:0;background:transparent;}
  .kz-1col:not(.kz-front) #main,.kz-2col:not(.kz-front) #main{box-sizing:border-box;padding:32px 36px 40px;background:#fff;border-radius:10px;}
  .kz-1col:not(.kz-front) #main > article,.kz-2col:not(.kz-front) #main > article{background:transparent;}
  /* 1列 */
  .kz-1col:not(.kz-front) #content > #inner-content.wrap{padding-top:24px;padding-bottom:56px;}
  .kz-1col:not(.kz-front) #content #main,
  .kz-1col:not(.kz-front) #content.one-column #main{max-width:860px;margin:0 auto;}
  .kz-1col:not(.kz-front) #sidebar1{display:none;}
  /* 2列 */
  .kz-2col:not(.kz-front) #content > #inner-content.wrap{max-width:1160px;width:auto;box-sizing:border-box;margin:0 auto;padding:24px 20px 56px;gap:36px;}
  .kz-2col:not(.kz-front) #content #main{max-width:784px;}
  .kz-2col:not(.kz-front) #sidebar1 .widget{background:#fff;border-radius:10px;padding:18px;margin-bottom:20px;}
  .kz-2col:not(.kz-front) .kz-hd-in,.kz-2col:not(.kz-front) .kzf-in{max-width:1160px;}
  /* タイトル */
  .kz .entry-title,.kz .single-title,.kz .page-title{font-size:26px;}
}

/* ---------- B-S2c. ヘッダーのロゴの大きさ（見本は高さ28px） ---------- */
.kz-logo img,.kz-logo-img{display:block;height:28px;width:auto;}
.kz-logo.has-img::before{content:none;}

/* ---------- B-S2d. 自前のリストに、テーマの「・」（点）を出さない ---------- */
.entry-content .kz-wants,
.entry-content .kz-cards,
.entry-content .kz-catcards,
.entry-content .kz-tags,
.entry-content .kz-pager,
.entry-content .kz-osusume,
.entry-content .kz-car-track,
.entry-content .kz-filters ul,
.entry-content .kz-hd-menu ul,
.entry-content .kzf-nav{list-style:none;margin-left:0;padding-left:0;}
.entry-content .kz-wants li,
.entry-content .kz-cards > li,
.entry-content .kz-catcards li,
.entry-content .kz-tags li,
.entry-content .kz-pager li,
.entry-content .kz-osusume li,
.entry-content .kz-car-track > li,
.entry-content .kz-filters li,
.entry-content .kzf-nav li{list-style:none;margin:0;padding:0;background:none;}
.entry-content .kz-wants li::before,
.entry-content .kz-cards > li::before,
.entry-content .kz-catcards li::before,
.entry-content .kz-tags li::before,
.entry-content .kz-osusume li::before{content:none;}
.entry-content .kz-tags li.fact,
.entry-content .kz-tags li.feat{padding:2px 9px;}
.entry-content .kz-tags li.feat{padding:1px 12px;}

/* ---------- B-S3. 記事の上（パンくず・タイトル・更新日・カテゴリの札） ---------- */
#breadcrumb,.breadcrumb{font-size:12.5px;color:var(--kz-ink-weak);}
#breadcrumb a,.breadcrumb a{color:var(--kz-ink);font-weight:700;text-decoration:none;}
.entry-title,.single-title,.page-title{font-size:28px;line-height:1.55;font-weight:700;color:var(--kz-ink);}
.entry-meta,.entry-time{font-size:13.5px;font-weight:700;color:var(--kz-ink);}
@media only screen and (max-width:767px){
  .entry-title,.single-title,.page-title{font-size:22px;}
}

/* ---------- B-S4. 本文の見出し
   0.9.4（2026-11-03 清野さん決定）：H2は下に線（緑の四角なし）、H3は左に緑の四角。
   ・本文の直下の見出し（.entry-content > h2 / h3）＝H2 24px・下に2pxの灰色の線／H3 20px・緑の四角12px。
     スマホ（767px以下）はH2 22px・H3 19px。行間1.5。H2の上の余白56px・H3の上の余白28px。
   ・部品の中の見出し（あわせて読む・「AとBで迷ったら」・この記事について）は前のまま（下の2行の指定）。
   ・追加CSSの B-3 にも同じ指定があります。 ---------- */
.entry-content h2{
  background:none;border:0;padding:0;margin:44px 0 14px;
  font-size:21px;color:var(--kz-ink);display:flex;align-items:center;gap:10px;
}
.entry-content h2::before{content:"";width:14px;height:14px;background:var(--kz-green);border-radius:4px;flex:0 0 auto;}
.entry-content h2::after{display:none;}
.entry-content h3{border:0;padding:0;font-size:17px;color:var(--kz-ink);}
.entry-content h3::before,.entry-content h3::after{display:none;}
/* 本文の直下の見出し */
.entry-content > h2{display:block;margin:56px 0 18px;padding:0 0 10px;border-bottom:2px solid var(--kz-dash);font-size:24px;line-height:1.5;}
.entry-content > h2::before{display:none;}
.entry-content > h3{position:relative;margin:28px 0 10px;padding:0 0 0 22px;font-size:20px;line-height:1.5;}
.entry-content > h3::before{content:"";display:block;position:absolute;left:0;top:calc((1.5em - 12px) / 2);width:12px;height:12px;border-radius:3.5px;background:var(--kz-green);}
.entry-content > h2 + h3{margin-top:18px;}
@media only screen and (max-width:767px){
  .entry-content > h2{font-size:22px;}
  .entry-content > h3{font-size:19px;}
}
.entry-content a{color:var(--kz-ink);font-weight:700;}
.entry-content a:hover{color:var(--kz-green);}

/* ---------- B-S4b. タイトル下のカテゴリの札 ---------- */
.kz-cat-pills{margin:8px 0 0;display:flex;flex-wrap:wrap;gap:6px;}
.kz-cat-pills .kz-pill{text-decoration:none;}

/* ---------- B-S4c. 拡張ごとの区切り（灰色の点線）と、記事末尾の折りたたみ ----------
   追加CSSのA章は Cocoon のクラス（.article）に当てているため、SANGOでは効きません。
   同じ見た目を .entry-content に当て直しています。 */
.entry-content h2.kz-item{border-top:2px dashed #CDD4D2;padding-top:30px;margin-top:40px;}
.entry-content details.kz-about > summary{list-style:none;}
.entry-content details.kz-about > summary::marker,
.entry-content details.kz-about > summary::-webkit-details-marker{content:"";display:none;}
.entry-content details.kz-about > summary::before{content:"";flex:0 0 12px;width:12px;height:12px;border-radius:4px;background:var(--kz-green);}
.entry-content details.kz-about > summary::after{
  content:"";flex:0 0 9px;width:9px;height:9px;margin-left:auto;
  border-right:2px solid var(--kz-ink);border-bottom:2px solid var(--kz-ink);transform:rotate(45deg);
}
.entry-content details.kz-about[open] > summary::after{transform:rotate(-135deg);}

/* ---------- B-S4d. 本文の表（0.9.4で追加）
   ・スマホ（600px以下）：狭い列（「目的」など）が1文字ずつ折り返されないよう、文字13px＋セルの最小幅。
     はみ出す分は今の枠（.kz-tablebox）の中で横にスクロール。製品名の列は左に残る。
   ・PC（601px以上）：手で作る表（.kz-hayami-hand）は横スクロールにせず幅に収める。製品名・目的・利用者数の列に最小幅、
     最終更新日は折り返さない。残りの幅は「できること」などの列で吸収。
   ・早見表（.kz-quick）は対象外。ふつうの表ブロック（.wp-block-table）は記事（.single-post）だけ。固定ページの表は今のまま。
   ・記事に直接書いてある min-width:600px は !important で上書き。
   ・列の番号（2列目・3列目…）は束1の6列の表（製品名／目的／できること／料金／利用者数・評価（件数）／最終更新日）に合わせた指定。
   ・追加CSSの A-10 にも同じ指定があります。 ---------- */
@media only screen and (max-width:600px){
  .entry-content .kz-tablebox table,.single-post .entry-content .wp-block-table table{font-size:13px;line-height:1.6;}
  .entry-content .kz-tablebox th,.entry-content .kz-tablebox td,
  .single-post .entry-content .wp-block-table th,.single-post .entry-content .wp-block-table td{padding:8px 10px;min-width:6em;}
  .entry-content .kz-tablebox .name{min-width:8em;}
  .entry-content .kz-hayami-hand th:nth-child(2),.entry-content .kz-hayami-hand td:nth-child(2){min-width:7.5em;}
  .entry-content .kz-hayami-hand th:nth-child(3),.entry-content .kz-hayami-hand td:nth-child(3){min-width:9.5em;}
  .entry-content .kz-hayami-hand table{min-width:52em !important;}
}
@media only screen and (min-width:601px){
  .entry-content .kz-hayami-hand table{min-width:0 !important;}
  .entry-content .kz-hayami-hand thead th{white-space:normal;}
  .entry-content .kz-hayami-hand th,.entry-content .kz-hayami-hand td{padding:10px;}
  .entry-content .kz-hayami-hand .name{min-width:7.5em;}
  .entry-content .kz-hayami-hand th:nth-child(2),.entry-content .kz-hayami-hand td:nth-child(2){min-width:7em;}
  .entry-content .kz-hayami-hand td:nth-child(5){min-width:6.5em;}
  .entry-content .kz-hayami-hand td:nth-child(6){white-space:nowrap;}
}
/* 「← → 横にスクロールできます」は、表が本当にはみ出すときだけ出す。
   assets/kz-scroll-hint.js が、はみ出すときは kz-hint-on、収まるときは kz-hint-off を付ける。
   JSが動かないときは、スマホ（600px以下）だけ出す。 */
@media only screen and (min-width:601px){ .kz-scroll-hint{display:none;} }
.kz-scroll-hint.kz-hint-on{display:block;}
.kz-scroll-hint.kz-hint-off{display:none;}

/* ---------- B-S5. 目次 ---------- */
.toc,.sng-toc{background:var(--kz-gray);border:0;border-radius:12px;}
/* 中身が無い目次の枠は出さない（トップ・固定ページ） */
.toc:empty,.sng-toc:empty{display:none;}
.kz-front .toc,.kz-front .sng-toc{display:none;}

/* ---------- B-S6. 広告の枠・記事の余白 ---------- */
.ads-in-contents,.ad-area{margin:26px 0;}

/* ---------- B-S7. 消すもの（デザインに無いもの） ---------- */
.fab-btn,#fab__contents,.fab__close-cover,#fab{display:none !important;}   /* シェアの丸ボタン */
.sns-btn,.share-btns,.footer-contents .sharing{display:none !important;}    /* シェアボタン */
#footer-menu,.footer-links,#page-top-wrap .footer-menu__btn{display:none !important;}
.footer,#footer{background:transparent;}                                    /* フッターは子テーマで作る */

/* ---------- B-S8. サイドバー（記事ページだけ出す） ---------- */
#sidebar1 .widget{margin-bottom:28px;}
#sidebar1 .widgettitle,#sidebar1 .widget-title,#sidebar1 h4{
  font-size:15px;font-weight:700;color:var(--kz-ink);
  display:flex;align-items:center;gap:8px;background:none;border:0;padding:0;margin:0 0 10px;
}
#sidebar1 .widgettitle::before,#sidebar1 .widget-title::before,#sidebar1 h4::before{
  content:"";width:12px;height:12px;border-radius:4px;background:var(--kz-green);flex:0 0 auto;
}
#sidebar1 .search-form input[type="search"],
#sidebar1 input[type="search"]{
  width:100%;box-sizing:border-box;border:2px solid var(--kz-ink);border-radius:10px;padding:10px 12px;font:inherit;
}

/* ---------- B-S9. 一覧ページ（子テーマの category.php などで自前のカードを出すので、親の余白だけ） ---------- */
.kz-archive{padding-bottom:20px;}

/* ---------- B-S10. コメント欄は出さない ---------- */
#comments,.comments-area{display:none !important;}

/* ---------- B-S4e. 比較表の「続きを見る（残りN件）」（0.9.6、2026-11-03 清野さん指示）
   assets/kz-table-more.js が、行が多い比較表（スマホ8行以上・PC12行以上）の続きを畳み、ボタンで全部出す。
   ボタンの見た目はスレッドワークの参考画像（白地・紺の細い線・丸い角・中央）に合わせた。 ---------- */
.entry-content .kz-hayami-hand tbody tr.kz-row-hidden{display:none;}
.entry-content .kz-more-btn{display:block;margin:14px auto 6px;padding:11px 28px;background:#fff;color:var(--kz-ink);border:1.5px solid var(--kz-ink);border-radius:999px;font-size:15px;font-weight:700;line-height:1.4;cursor:pointer;font-family:inherit;}
.entry-content .kz-more-btn:hover{background:var(--kz-gray);}
.entry-content .kz-more-btn:focus-visible{outline:2px solid var(--kz-green);outline-offset:2px;}