/*
Theme Name: PHOTOCARBLOG
Description: photocarbu.jp の theme（単独の theme、2026-10-05 から）。News Post 1.0.0（GPL-3.0、CREDITS.txt）の template・setup・asset を元にしている（独自 theme 化 Stage 3）。site の logic は plugin photocarbu-site-core。
Author: PHOTOCARBLOG
Version:     0.45.0
Requires at least: 6.5
Requires PHP: 7.4
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: photocarbu
*/

/*
 * S2-2（2026-10-01）: photocarbu-news-post-compat の CSS のうち、次の 3 つをここへ移した（中身は同じ）。
 * 親（News Post）の CSS の後に読み込む（functions.php、handle photocarbu-style、依存 pcj-style）。
 * compat は add_theme_support() の宣言を見て、同じ CSS を出さない。親 theme に戻せば compat が出す。
 * - pcj-staff-page-css   Staff ページ（旧 contributors テンプレートの本文）の横並び（compat PCJ_Staff_Page）
 * - pcj-archives-css     sidebar の Archives の年アコーディオン（markup は compat PCJ_Archives が描く）
 * - pcj-content-ui-css   sidebar の Categories の階層、single 本文の H2 / H3（並び順と階層の指定は compat PCJ_Content_UI）
 * Site_Colors の CSS は Customizer の保存値から作るので、ここではなく inc/site-colors.php が出す。
 *
 * S2-3（2026-10-01）: header / footer / nav の CSS を移した（中身は同じ）。宣言は pcj-header-ui / pcj-header-search / pcj-nav-mobile / pcj-footer-ui。
 * Brand（ロゴの lockup）の CSS は Site Logo の有無で変わるので inc/brand.php が出す（photocarbu-style の inline）。
 *
 * S2-4（2026-10-01）: 記事 card の metadata・記事の header・アイキャッチの fallback・single の breadcrumb の CSS を移した（中身は同じ）。
 *
 * S2-5（2026-10-01）: 目次・tag の帯・サムネイルの見せ方の CSS を移した（中身は同じ）。
 *
 * S2-6（2026-10-04）: TOP の highlights の見出しと間隔、view-all を出さない枠の CSS を移した（中身は同じ）。
 */


/* ---- Staff ページ（pcj-staff-page-css）---- */
/* 0.29.0（2026-10-20、User「デザインがちょっと昔だからモダンにかっこよく」）: カードの並び（PC 2 列・スマホ 1 列）、丸い画像、記事の数、枠のボタン。
   markup は site-core の [pcj_staff]（.contributor > .contributor-info > .contributor-avatar + .contributor-summary） */
.page-template-page-templatescontributors-php .entry-content #main-content #primary.content-area{width:auto;max-width:none;float:none}
.page-template-page-templatescontributors-php .entry-content #content > article{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
.page-template-page-templatescontributors-php .entry-content #content > article > .contributor{margin:0;min-width:0}
.page-template-page-templatescontributors-php .entry-content #content > article > br{display:none}
.page-template-page-templatescontributors-php .entry-content .contributor-info{display:flex;flex-direction:column;align-items:flex-start;height:100%;box-sizing:border-box;padding:28px 26px 26px;background:var(--theme-background-hue);border:1px solid var(--theme-border-hue);transition:border-color .2s,transform .2s,box-shadow .2s}
.page-template-page-templatescontributors-php .entry-content .contributor-info:hover{border-color:var(--theme-primary-hue);transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.08)}
.page-template-page-templatescontributors-php .entry-content .contributor-avatar{width:88px;height:88px;margin:0 0 18px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 1px var(--theme-border-hue),0 0 0 5px var(--theme-background-hue-light)}
.page-template-page-templatescontributors-php .entry-content .contributor-avatar img{display:block;width:100%;height:100%;object-fit:cover;margin:0}
.page-template-page-templatescontributors-php .entry-content .contributor-summary{display:flex;flex-direction:column;flex:1 1 auto;width:100%;min-width:0}
.page-template-page-templatescontributors-php .entry-content .contributor-name{margin:0;font-size:1.4rem;line-height:1.3;letter-spacing:.02em}
.page-template-page-templatescontributors-php .entry-content .contributor-summary .contributor-meta{margin:6px 0 14px;font-size:12px;letter-spacing:.12em;color:var(--theme-primary-hue)}
.page-template-page-templatescontributors-php .entry-content .contributor-summary .contributor-bio{flex:1 1 auto;margin:0 0 22px;font-size:14px;line-height:1.85}
.page-template-page-templatescontributors-php .entry-content .contributor-posts-link{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;padding:9px 18px;border:1px solid var(--theme-text-hue);color:var(--theme-text-hue);background:transparent;font-size:13px;letter-spacing:.08em;text-decoration:none;line-height:1.2;transition:background .2s,color .2s}
.page-template-page-templatescontributors-php .entry-content .contributor-posts-link::after{content:"\2192";transition:transform .2s}
.page-template-page-templatescontributors-php .entry-content .contributor-posts-link:hover,.page-template-page-templatescontributors-php .entry-content .contributor-posts-link:focus-visible{background:var(--theme-text-hue);color:var(--theme-background-hue)}
.page-template-page-templatescontributors-php .entry-content .contributor-posts-link:hover::after{transform:translateX(3px)}
.page-template-page-templatescontributors-php .entry-content .contributor-posts-link br{display:none}
@media (prefers-reduced-motion:reduce){.page-template-page-templatescontributors-php .entry-content .contributor-info,.page-template-page-templatescontributors-php .entry-content .contributor-posts-link,.page-template-page-templatescontributors-php .entry-content .contributor-posts-link::after{transition:none}.page-template-page-templatescontributors-php .entry-content .contributor-info:hover{transform:none}}
/* ---- 記事の最後の寄稿者（0.30.0、2026-10-20、User「この感じで作ってみてほしい」）: スタッフのカードと同じ決まりで横長（スマホは縦）。markup は site-core の PCJ_Author_Box ---- */
.pcj-author-box{clear:both;margin:48px 0 8px}
.entry-content p.pcj-author-box-label,.pcj-author-box .pcj-author-box-label{margin:0 0 12px;font-size:12px;letter-spacing:.16em;color:var(--theme-primary-hue)}
.pcj-author-box .contributor{margin:0}
.pcj-author-box .contributor-info{display:flex;align-items:flex-start;gap:24px;padding:28px;background:var(--theme-background-hue);border:1px solid var(--theme-border-hue);transition:border-color .2s,box-shadow .2s}
.pcj-author-box .contributor-info:hover{border-color:var(--theme-primary-hue);box-shadow:0 10px 24px rgba(0,0,0,.06)}
.pcj-author-box .contributor-avatar{flex:0 0 88px;width:88px;height:88px;margin:0;border-radius:50%;overflow:hidden;box-shadow:0 0 0 1px var(--theme-border-hue),0 0 0 5px var(--theme-background-hue-light)}
.pcj-author-box .contributor-avatar img{display:block;width:100%;height:100%;object-fit:cover;margin:0;max-width:none}
.pcj-author-box .contributor-summary{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.entry-content .pcj-author-box .contributor-name{margin:0;font-family:var(--heading-font,inherit);font-size:1.35rem;font-weight:700;line-height:1.3;letter-spacing:.02em}
.entry-content .pcj-author-box .contributor-meta{margin:4px 0 12px;font-size:12px;letter-spacing:.12em;color:var(--theme-primary-hue)}
.entry-content .pcj-author-box .contributor-bio{margin:0 0 18px;font-size:14px;line-height:1.85}
.pcj-author-box .contributor-posts-link{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;padding:9px 18px;border:1px solid var(--theme-text-hue);color:var(--theme-text-hue);background:transparent;font-size:13px;letter-spacing:.08em;text-decoration:none;line-height:1.2;transition:background .2s,color .2s}
.pcj-author-box .contributor-posts-link::after{content:"\2192";transition:transform .2s}
.pcj-author-box .contributor-posts-link:hover,.pcj-author-box .contributor-posts-link:focus-visible{background:var(--theme-text-hue);color:var(--theme-background-hue)}
.pcj-author-box .contributor-posts-link:hover::after{transform:translateX(3px)}
@media (max-width:600px){.pcj-author-box .contributor-info{flex-direction:column;gap:16px;padding:24px 22px}}
@media (prefers-reduced-motion:reduce){.pcj-author-box .contributor-info,.pcj-author-box .contributor-posts-link,.pcj-author-box .contributor-posts-link::after{transition:none}}
/* 0.32.1（2026-10-21、見直し）: 旧の横並びの時のスマホ用の規則（767px 以下の margin・gap・画像 96px）を外した。カードの規則と競合していた */

/* ---- sidebar の Archives（pcj-archives-css）---- */
.pcj-archives{list-style:none;margin:0;padding:0}
.pcj-archives__year{margin:0}
.pcj-archives__details{border-block-end:1px solid var(--theme-border-hue,#eee)}
.pcj-archives__summary{cursor:pointer;padding:6px 2px;font-weight:600;list-style:none;display:flex;align-items:center;gap:6px}
.pcj-archives__summary::-webkit-details-marker{display:none}
.pcj-archives__summary::before{content:"";flex:0 0 auto;width:0;height:0;border-inline-start:5px solid currentColor;border-block-start:4px solid transparent;border-block-end:4px solid transparent;transition:transform .15s;opacity:.7}
.pcj-archives__details[open] .pcj-archives__summary::before{transform:rotate(90deg)}
.pcj-archives__summary:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.pcj-archives__months{list-style:none;margin:0 0 6px;padding:0 0 0 16px;display:flex;flex-wrap:wrap;gap:2px 10px}
.pcj-archives__month{margin:0}
.pcj-archives__month a{display:inline-block;padding:2px 0;font-size:.9em;opacity:.85;text-decoration:none}
.pcj-archives__month a:hover{text-decoration:underline;opacity:1}

/* ---- sidebar の Categories と single の H2 / H3（pcj-content-ui-css）---- */
.wp-block-categories>.cat-item>a{font-weight:600}
.wp-block-categories .children{margin:0;padding:0;list-style:none}
.wp-block-categories .children>li{display:flex;align-items:baseline;gap:.3em;padding-inline-start:2px}
.wp-block-categories .children>li::before{content:"\251C\2500";flex:0 0 auto;opacity:.4;font-feature-settings:normal;pointer-events:none}
.wp-block-categories .children>li:last-child::before{content:"\2514\2500"}
.wp-block-categories .cat-item>a{display:inline-block}
body.single-post .entry-content h2{margin-block:1.8em .9em;padding:.6em .8em;background:rgba(0,0,0,.035);border-inline-start:3px solid rgba(0,0,0,.32);border-radius:2px}
body.single-post .entry-content h3{margin-block:1.4em .7em;padding-inline-start:.65em;border-inline-start:2px solid rgba(0,0,0,.18)}

/* ---- header の topbar の Sign In の器、hamburger の寄せ（pcj-header-ui） ---- */
.theme-top-header .top-header-right .header-button{display:none}
@media(max-width:991px){
	.theme-main-header .theme-main-header-wrapper{justify-content:flex-end}
}

/* ---- nav の右端の検索（pcj-header-search） ---- */
.theme-top-header{display:none!important}
.main-navigation{display:flex;align-items:center;gap:8px}
.main-navigation>div{flex:1 1 auto;min-width:0}
.pcj-nav-search__toggle{margin-inline-start:auto}
@media(max-width:991px){
	.main-navigation{gap:4px}
	.main-navigation>div{order:1;flex:1 1 auto}
	.main-navigation .pcj-nav-search__toggle{order:2;margin-inline-start:auto;flex:0 0 auto;padding:0 .5em}
	.main-navigation .menu-toggle{order:3;flex:0 0 auto;margin-inline-start:0}
	.pcj-nav-search__panel .pcj-nav-search__form{width:100%}
}
.pcj-nav-search__toggle{background:none;border:0;padding:0 .35em;margin:0;cursor:pointer;color:inherit;font-size:inherit;line-height:1;display:inline-flex;align-items:center}
.pcj-nav-search__toggle:hover,.pcj-nav-search__toggle:focus{opacity:.7}
.pcj-nav-search__panel{padding-block:10px;display:none}
.pcj-nav-search__panel.is-open{display:block}
.pcj-nav-search__form{display:flex;gap:8px;align-items:center}
.pcj-nav-search__input{flex:1 1 auto;min-width:0;padding:.45em .7em;border:1px solid var(--theme-border-hue,#d8d8d8);border-radius:3px;font-size:var(--typo-xs,.875rem)}
.pcj-nav-search__submit{flex:0 0 auto;padding:.45em 1em;cursor:pointer;border:1px solid var(--theme-border-hue,#d8d8d8);background:none;color:var(--theme-text-hue,#333);border-radius:3px;font-size:var(--typo-xs,.875rem);white-space:nowrap;letter-spacing:.04em;line-height:1.4}

/* ---- 狭い画面の category の横並びと子の panel（pcj-nav-mobile） ---- */
@media(max-width:991px){
	.menu-toggle{display:none!important}
	.primary-nav,.primary-nav-container,.header-nav,.main-navigation{min-width:0;width:100%;flex:1 1 auto}
	.main-navigation{display:flex;align-items:center;gap:6px}
	.main-navigation>div{order:1;flex:1 1 auto;min-width:0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
	.main-navigation>div.pcj-nav-scroll{margin-inline-start:-10px}
	.pcj-nav-scroll #primary-menu{justify-content:flex-start}
	.main-navigation>div.pcj-nav-fits{margin-inline-start:0}
	.pcj-nav-fits #primary-menu{justify-content:center;padding-inline-start:var(--pcj-nav-reserve,38px)}
	.main-navigation>div::-webkit-scrollbar{display:none}
	.main-navigation .pcj-nav-search__toggle{order:2;flex:0 0 auto;margin-inline-start:0}
	#primary-menu{display:flex!important;position:static!important;width:auto!important;flex-wrap:nowrap!important;background:none!important;box-shadow:none!important;text-align:left;margin:0;padding:0}
	#primary-menu>li{flex:0 0 auto;border:0!important;position:static;display:flex;align-items:center}
	#primary-menu>li>a{display:inline-block;padding:12px 10px;white-space:nowrap;text-transform:none}
	#primary-menu>li.menu-item-has-children>a{display:none}
	#primary-menu>li.menu-item-has-children>a::after{content:none!important}
	.pcj-parent{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:12px 10px;margin:0;border:0;background:none;cursor:pointer;color:inherit;font:inherit;line-height:1.4;white-space:nowrap}
	.pcj-parent::after{content:"";flex:0 0 auto;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform 150ms ease}
	.pcj-parent[aria-expanded="true"]::after{transform:translateY(2px) rotate(-135deg)}
	.pcj-parent:focus-visible{outline:2px solid currentColor;outline-offset:-2px}
	#pcj-subpanel{position:absolute;left:0;top:100%;width:100%;z-index:9999;background:var(--theme-background-hue,#fff);box-shadow:var(--shadow);border-block-start:1px solid #f1f1f1;max-height:70vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
	#pcj-subpanel[hidden]{display:none}
	#pcj-subpanel .sub-menu{display:block!important;height:auto!important;transform:none!important;overflow:visible!important;margin:0!important;padding:0;list-style:none;position:static!important;width:auto!important;background:none!important;box-shadow:none!important}
	#pcj-subpanel .sub-menu li{margin:0;border-block-end:1px solid #f1f1f1}
	#pcj-subpanel .sub-menu li:last-child{border-block-end:0}
	#pcj-subpanel .sub-menu a{display:block;padding:14px 18px;white-space:normal;text-decoration:none}
	#pcj-subpanel .pcj-parent-archive a{font-weight:600}
	#primary-menu .sub-menu{display:none}
}
@media(min-width:992px){
	.pcj-parent{display:none!important}
	#pcj-subpanel{display:none!important}
	#primary-menu .pcj-parent-archive{display:none!important}
}

/* ---- footer の情報行と navigation（pcj-footer-ui） ---- */
.site-footer .lower-footer .site-info{text-align:center}
.pcj-footer-nav{display:block;margin:0 0 .5em}
.pcj-footer-nav a{text-decoration:none}
.pcj-footer-nav a:hover{text-decoration:underline}
.pcj-footer-nav .pcj-sep{margin:0 .5em;opacity:.55}
@media (max-width:600px){
	.site-footer .lower-footer{padding-bottom:96px}
}

/* ---- 記事 card の metadata 行と並び、記事の header の tag（pcj-card-meta） ---- */
.single-card-container .single-card-detail .card-categories{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;}
.single-card-container .single-card-detail .card-categories .cat-links,.single-card-container .single-card-detail .card-categories .pcj-tag-links{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 0;}
.single-card-container .single-card-detail .card-categories a.pcj-post-tag{z-index:1;position:relative;display:inline-flex;align-items:center;line-height:1.6;padding:0 5px;font-weight:400;text-decoration:none;margin-inline-end:4px;font-size:calc(var(--typo-xxs) - 1px);color:inherit;opacity:.75;border:1px solid currentColor;border-radius:2px;background:none;}
.single-card-container .single-card-detail .card-categories a.pcj-post-tag::before{content:none;}
.single-card-container .single-card-detail .card-categories a.pcj-post-tag:hover,.single-card-container .single-card-detail .card-categories a.pcj-post-tag:focus{opacity:1;}
.single-card-container .single-card-detail{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto 1fr auto;align-items:start;}
.single-card-container .single-card-detail>.card-categories{grid-area:1/1/2/3;}
.single-card-container .single-card-detail>.card-title{grid-area:2/1/3/3;}
.single-card-container .single-card-detail>.post-exerpt{grid-area:3/1/4/3;}
.single-card-container .single-card-detail>.post-button{grid-area:4/1/5/2;align-self:end;}
.single-card-container .single-card-detail>.card-meta{grid-area:4/2/5/3;align-self:end;justify-self:end;text-align:right;padding-top:.5em;padding-inline-start:.75em;}
@media(max-width:480px){
	.single-card-container .single-card-detail>.post-button{grid-area:4/1/5/3;}
	.single-card-container .single-card-detail>.card-meta{grid-area:5/1/6/3;}
}
.entry-cat .card-categories{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 6px;}
.pcj-entry-tags{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 6px;}
a.pcj-entry-tags__link{z-index:1;position:relative;display:inline-flex;align-items:center;line-height:1.4;padding:1px 5px;font-weight:400;text-decoration:none;font-size:calc(var(--typo-xxs) - 1px);color:inherit;opacity:.75;border:1px solid currentColor;border-radius:2px;background:none;}
a.pcj-entry-tags__link::before{content:none;}
.single-card-container .single-card-detail .card-categories a.post-category,body.single .single-page .page-header-content .entry-cat .cat-links a.post-category{top:calc(-1 * var(--pcj-label-lift));}
.single-card-container .single-card-detail .card-categories a.post-category::before,body.single .single-page .page-header-content .entry-cat .cat-links a.post-category::before{top:var(--pcj-label-lift);}
:root{--pcj-label-lift:.5px}
@media(max-width:965px){
	:root{--pcj-label-lift:1px}
}
.single-card-container .single-card-detail .card-categories a.post-category,.single-card-container .single-card-detail .card-categories a.post-category::before,body.single .single-page .page-header-content .entry-cat .cat-links a.post-category,body.single .single-page .page-header-content .entry-cat .cat-links a.post-category::before{border-radius:2px;}
@media(max-width:965px){
	.single-card-container .single-card-detail .card-categories a.pcj-post-tag{line-height:calc(1.6em - 2px);padding-bottom:2px;}
	a.pcj-entry-tags__link{line-height:calc(1.4em - 2px);padding-bottom:3px;}
	.entry-cat .pcj-entry-tags{position:relative;top:-1px;}
}
a.pcj-entry-tags__link:hover,a.pcj-entry-tags__link:focus{opacity:1;}
.single-card-container .single-card-detail .card-meta .post-date a::before,.single-card-container .single-card-detail .card-meta .relative-time::before{display:none;}
.single-card-container .single-card-detail .card-meta .post-date a,.single-card-container .single-card-detail .card-meta .relative-time{margin-inline-start:0;}
.single-card-container .single-card-image>a{overflow:hidden;border-radius:var(--curve-border);}
.single-card-container .single-card-image>a img{scale:1;transition:transform .25s ease,scale .25s ease;}   /* 0.35.2: AF の 4% の拡大（scale）は hover の規則で持ち、外した時も .25s で戻る（keyframes の中だと一瞬で戻る） */
/* 0.35.0（2026-10-27、User「マウスオーバーで、ファインダーを覗いた時のように一回ピントが外れて AF が合ってまた鮮明に」「置き換えでよい」）:
   カードの写真に hover すると、ボケる → AF が迷う（ボケが 2 回揺れる）→ 合焦（真ん中の AF の枠が緑に光る）。四隅にファインダーの枠。
   前の「少し浮いて大きくなる」は置き換え。hover の無い端末と、動きを減らす設定の人には出さない。ボケの縁が透けないよう、動きの間は 4% 大きく。
   0.35.1（User「オンホバー一度すると視差しなくなる」）: 拡大は transform でなく scale で（傾きの transform を上書きしない。タップの後に :hover が残っても止まらない）。
   マウスの端末（hover:hover かつ pointer:fine）だけに絞る */
.single-card-container .single-card-image>a{position:relative;}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
	.single-card-container:hover .single-card-image>a img{scale:1.04;animation:pcj-af-focus .75s ease-out both;}
	.single-card-container .single-card-image>a::before,
	.single-card-container .single-card-image>a::after{content:"";position:absolute;pointer-events:none;opacity:0;z-index:1;}
	/* 四隅の枠（ファインダーの角） */
	.single-card-container .single-card-image>a::before{inset:9%;
		background:
			linear-gradient(#fff,#fff) left top/16px 2px no-repeat,linear-gradient(#fff,#fff) left top/2px 16px no-repeat,
			linear-gradient(#fff,#fff) right top/16px 2px no-repeat,linear-gradient(#fff,#fff) right top/2px 16px no-repeat,
			linear-gradient(#fff,#fff) left bottom/16px 2px no-repeat,linear-gradient(#fff,#fff) left bottom/2px 16px no-repeat,
			linear-gradient(#fff,#fff) right bottom/16px 2px no-repeat,linear-gradient(#fff,#fff) right bottom/2px 16px no-repeat;
		filter:drop-shadow(0 0 1px rgba(0,0,0,.6));}
	/* 真ん中の AF の枠。合焦で緑 */
	.single-card-container .single-card-image>a::after{left:50%;top:50%;width:34px;height:24px;margin:-12px 0 0 -17px;border:2px solid #fff;border-radius:2px;box-shadow:0 0 1px rgba(0,0,0,.6);}
	.single-card-container:hover .single-card-image>a::before{animation:pcj-af-frame 1.1s ease-out both;}
	.single-card-container:hover .single-card-image>a::after{animation:pcj-af-point 1.1s ease-out both;}
}
@keyframes pcj-af-focus{
	0%{filter:blur(0);}
	14%{filter:blur(6px);}
	32%{filter:blur(2px);}
	46%{filter:blur(4px);}
	62%,100%{filter:blur(0);}
}
/* 0.35.0（User「画面の傾きで写真が動くも追加して、スマホはそっちが楽しめる」）: hover の無い端末で、傾き（assets/js/card-tilt.js が html に pcj-tilt と
   --pcj-tx / --pcj-ty）に合わせて写真を少し動かす。縁が見えないよう 8% 大きく */
@media (hover:none) and (prefers-reduced-motion:no-preference){
	html.pcj-tilt .single-card-container .single-card-image>a img{transform:scale(1.08) translate(var(--pcj-tx,0),var(--pcj-ty,0));transition:transform .12s linear;will-change:transform;}
}
@keyframes pcj-af-frame{0%{opacity:0;}10%,75%{opacity:1;}100%{opacity:0;}}
@keyframes pcj-af-point{
	0%{opacity:0;border-color:#fff;transform:scale(1.3);}
	12%{opacity:1;transform:scale(1);}
	58%{border-color:#fff;}
	62%,78%{opacity:1;border-color:#4cff4c;}
	100%{opacity:0;border-color:#4cff4c;}
}

/* ---- アイキャッチが無い記事のロゴの fallback（pcj-thumbnail-fallback） ---- */
img.pcj-thumbnail-fallback,.single-card-container .single-card-image > a img.pcj-thumbnail-fallback,body.single .single-page>.post-thumbnail img.pcj-thumbnail-fallback{display:block;width:100%;height:auto;aspect-ratio:1/0.7;object-fit:contain;box-sizing:border-box;padding:18% 0;background:var(--theme-background-hue-light,#f7f6f6);max-width:100%}
@media(min-width:768px){
	body.single .single-page>.post-thumbnail img.pcj-thumbnail-fallback{padding:25% 0}
}

/* ---- single の breadcrumb（pcj-breadcrumb） ---- */
.single-page > #breadcrumb-list{margin-block-end:clamp(10px,2vw,16px)}
.single-page > #breadcrumb-list .trail-items{flex-wrap:wrap}

/* ---- 記事の目次（pcj-toc-view） ---- */
.pcj-toc{margin-block:1.7em;padding:16px 18px;background:rgba(0,0,0,.025);border:1px solid rgba(0,0,0,.10);border-radius:3px}
.pcj-toc__title{font-weight:600;margin-block-end:.55em;letter-spacing:.02em}
.pcj-toc__list{margin:0;padding-inline-start:1.5em;line-height:1.95}
.pcj-toc__list>li{margin:0}
.pcj-toc__list a{text-underline-offset:2px}
@media(max-width:480px){
	.pcj-toc{padding:14px 15px;margin-block:1.5em}
	.pcj-toc__list{padding-inline-start:1.3em}
}
body.single-post .entry-content h2{scroll-margin-top:24px}

/* ---- header の tag の帯と MORE の panel（pcj-tag-nav-view） ---- */
/* 0.32.0（2026-10-20、User「タグ、開いたときと閉じたとき隙間変わるの気になる、狭い方にあわせたい」）: 開いた panel の横の隙間 7px をやめ、帯と同じ（タグの矢印の分の 14.5px だけ）に */
.pcj-tag-nav__link{display:inline-block;padding:.14em .65em;border:1px solid var(--theme-border-hue,#d8d8d8);border-radius:999px;font-size:var(--typo-xs,.8125rem);line-height:1.6;text-decoration:none;white-space:nowrap}
.pcj-tag-nav__link:hover{border-color:currentColor}
.pcj-tag-nav__bar{display:flex;align-items:center;gap:10px}
.pcj-tag-nav__inner{min-width:0;display:flex;align-items:center;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.pcj-tag-nav__inner::-webkit-scrollbar{display:none}
.pcj-tag-nav__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:nowrap}
.pcj-tag-nav__item{margin:0;flex:0 0 auto}
.pcj-tag-nav__more{flex:0 0 auto;padding:.14em .8em;border:1px solid var(--theme-border-hue,#d8d8d8);border-radius:0;background:none;color:inherit;font:inherit;font-size:var(--typo-xs,.8125rem);line-height:1.6;font-weight:600;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;cursor:pointer}
.pcj-tag-nav__more:hover,.pcj-tag-nav__more:focus{border-color:currentColor}
/* 0.34.12（2026-10-27、User「タグの MORE ボタン、色を反転できる？」）: 黒い地に白い字（カテゴリーの札と同じ向き）。hover は少し薄く */
.pcj-tag-nav__more{background:var(--theme-text-hue,#222);border-color:var(--theme-text-hue,#222);color:#fff}
.pcj-tag-nav__more:hover,.pcj-tag-nav__more:focus{border-color:var(--theme-text-hue,#222);opacity:.85}
.pcj-tag-nav__more-swap{display:grid;place-items:center}
.pcj-tag-nav__more-swap>.pcj-tag-nav__more-text{grid-area:1/1}
.pcj-tag-nav__more [data-state="open"]{visibility:hidden}
.pcj-tag-nav__more[aria-expanded="true"] [data-state="closed"]{visibility:hidden}
.pcj-tag-nav__more[aria-expanded="true"] [data-state="open"]{visibility:visible}
.pcj-tag-nav__panel{padding-block:10px 12px}
.pcj-tag-nav__panel[hidden]{display:none}
.pcj-tag-nav__all{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 0;max-height:340px;overflow-y:auto;overscroll-behavior:contain}
.pcj-tag-nav__all .pcj-tag-nav__item{flex:0 0 auto}
/* 0.17.4（2026-10-17、User の判断「幅によって出る線はなしでいい」）: メニューの行の下の黒い線（幅 991 以下で出ていた）を全部の幅で出さない。
   幅 992 以上のタグの帯の下の黒い線と、991 以下のタグの帯の下の灰色の線はそのまま */
.theme-main-header .theme-main-header-wrapper{border-block-end:none}
@media(min-width:992px){
	.pcj-tag-nav{border-block-end:1px solid var(--theme-text-hue,#222);padding-block:6px 8px;margin-block-end:clamp(20px,3vw,34px)}
	.pcj-tag-nav__bar{justify-content:center;gap:7px}
	.pcj-tag-nav__inner{flex:0 1 auto;gap:10px}
	.pcj-tag-nav__list{gap:5px 7px}
}
@media(max-width:991px){
	.pcj-tag-nav{display:block;padding-block:8px;border-block-end:1px solid var(--theme-border-hue,#e2e2e2);margin-block-end:16px}
	.pcj-tag-nav__bar{justify-content:center}   /* 0.39.0（User「右に空白ができる大きさがある」）: 992px 未満も、タグが収まる幅ではメニューと同じく真ん中に（MORE はタグのすぐ後ろ）。溢れる幅では inner が縮んで（min-width:0）左から並び MORE は右端のまま */
	.pcj-tag-nav__inner{flex:0 1 auto;gap:8px}
	.pcj-tag-nav__list{gap:6px}
}

/* ---- サムネイルの見せ方（pcj-thumb-framing-view） ---- */
.single-card-container .single-card-image img.pcj-thumb-nocrop,body.single .single-page>.post-thumbnail img.pcj-thumb-nocrop{object-fit:contain;background:var(--theme-background-hue-light,#f7f6f6);}
body.single .single-page>.post-thumbnail img[style*="aspect-ratio"]{height:auto}

/* ---- TOP の highlights（pcj-top-sections） ---- */
#pcj_highlights_news_section .news-highlights-container{border-block:0;padding-block:0}
#pcj_highlights_news_section{margin-top:-8px;margin-bottom:16px}
#pcj_highlights_news_section+*{margin-top:16px}
@media(max-width:600px){
	#pcj_highlights_news_section .news-highlights-icon{padding:6px 10px}
	#pcj_highlights_news_section .news-highlights-icon .highlights-title{display:block;white-space:nowrap}
}

/* ---- TOP の注目の記事とおすすめ記事の view-all を出さない（pcj-top-blocks） ---- */
#pcj_banner_section .main-banner>.header-title>.view-all,#pcj_editor_choice_section>.site-container-width>.header-title>.view-all{display:none}

/* ---- ギャラリーを画面の幅に収める（0.12.1、2026-10-11 mobile の修正） ----
 * 親の .gallery-columns-N は repeat(N, 1fr)。grid の 1fr は中身（画像の width 属性）より狭くならないので、
 * mobile で 5 列の thumbnail（150px）が画面の外へはみ出していた。列の数はそのまま、列を縮められるようにする */
.gallery-columns-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.gallery-columns-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.gallery-columns-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.gallery-columns-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.gallery-columns-6{grid-template-columns:repeat(6,minmax(0,1fr))}
.gallery-columns-7{grid-template-columns:repeat(7,minmax(0,1fr))}
.gallery-columns-8{grid-template-columns:repeat(8,minmax(0,1fr))}
.gallery-columns-9{grid-template-columns:repeat(9,minmax(0,1fr))}
.gallery-item{min-width:0}
.gallery-item img{max-width:100%;height:auto}
.gallery-caption{overflow-wrap:anywhere}
@media(max-width:600px){.gallery{grid-gap:.5em}}

/* ---- back-to-top を footer の上に乗せる時、位置は animation しない（0.12.1） ----
 * 親の a.pcj-scroll-to-top は transition が all（0.3s）。assets/js/scroll-top-dock.js が位置を変えると 0.3s 遅れて追いかけ、
 * その間に footer の link に重なる。mobile では位置を transition の対象から外す（fade・hover・色の変化はそのまま） */
@media(max-width:767px){a.pcj-scroll-to-top{transition-property:opacity,visibility,transform,box-shadow,background-color,color}}
/* 0.34.10（2026-10-26）: アイキャッチと重なる本文の 1 枚目を外した時に残す、その写真のキャプションの文（inc/single-thumb-dedupe.php）。上の写真の説明として、キャプションと同じ見た目に */
.entry-content .pcj-thumb-caption{margin:0 0 1.5em;text-align:center;font-size:.9em;opacity:.85}
/* 0.34.7（2026-10-23、User「人気記事のサムネの右下に人気順位をつけたい」）: TOP の人気記事の帯のサムネの右下に No.1〜 */
#pcj_highlights_news_section .content-img{position:relative}
#pcj_highlights_news_section .pcj-rank{position:absolute;right:0;bottom:0;padding:2px 4px 1px;background:rgba(17,17,17,.82);color:#fff;font:700 10px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.02em;pointer-events:none}
/* 0.34.6（2026-10-23、User「箇条書き右寄りなのを直したい」）: block の箇条書き（ul/ol.wp-block-list）は blocks.min.css の .entry-content ul:not([class*="wp-"]) から外れ、
   theme.css の ul{margin-left:3em} とブラウザの padding-left 40px が重なって本文より約 90px 右に寄っていた。点を本文の左端に揃える */
.entry-content ul.wp-block-list,.entry-content ol.wp-block-list{margin:0 0 1.5em;padding-left:1.5em}
.entry-content li>ul.wp-block-list,.entry-content li>ol.wp-block-list{margin:0;padding-left:1.5em}
.entry-content .wp-block-list li{padding:2px 0}
/* 0.13.0: /blog/gallery/ の記事の写真の grid（page-gallery.php）。PC・mobile とも 5 列の正方形、隙間なし、文字なし。
   blocks.min.css の .entry-content ul:not([class*="wp-"])（左の margin・li の上下の padding）より強くするため ul.…／li.… で書く */
.entry-content ul.pcj-post-gallery{list-style:none;margin:0 0 1.5em;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0}
.entry-content ul.pcj-post-gallery>li.pcj-post-gallery__item{display:block;margin:0;padding:0;min-width:0}
/* 正方形の枠を先に確保し（CLS なし）、画像は枠の中に重ねる。読み込み前と失敗時は枠の色 */
.pcj-post-gallery__item a{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:#ebe9e8}
.pcj-post-gallery__img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover}
.pcj-post-gallery__item.is-nocrop .pcj-post-gallery__img{object-fit:contain}
/* src の無い img（JS が読む前・JS が無い時）は見せない。JS が無い時は noscript の img が出る */
.pcj-post-gallery__img[data-src]:not([src]){opacity:0}
/* 出方（script）: 読み込みと decode の後、画面に入った時に 1 回だけ fade と小さな scale。時間差は script が付ける */
.pcj-post-gallery.is-js .pcj-post-gallery__img{opacity:0;transform:scale(1.035);transition:opacity .5s ease-out,transform .5s ease-out}
.pcj-post-gallery.is-js .pcj-post-gallery__img.is-shown{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.pcj-post-gallery.is-js .pcj-post-gallery__img{transform:none;transition:none}}
/* hover（mouse の端末だけ）でタイルを少し大きく、隣の上に浮かせる */
@media(hover:hover){
.pcj-post-gallery__item a{transition:transform .2s ease,box-shadow .2s ease}
.pcj-post-gallery__item a:hover{z-index:1;transform:scale(1.06);box-shadow:0 6px 18px rgba(0,0,0,.28)}
}
@media(prefers-reduced-motion:reduce){.pcj-post-gallery__item a{transition:none}}
/* 隙間が無いので focus の枠はタイルの内側に（白と黒の 2 重で、明るい写真でも暗い写真でも見える） */
.pcj-post-gallery__item a:focus{outline:none}
.pcj-post-gallery__item a:focus-visible::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 5px #111;pointer-events:none}
/* 0.13.5（2026-10-13）: 固定ページで footer の下に 24px の白い帯が出ていた。親の theme.css の `.post, .page { margin: 0 0 1.5em }` は記事の枠（article.page）向けだが、
   WordPress は固定ページの body にも class page を付けるので body にも下の margin が付いていた。body だけを 0 に戻す（article.page の余白はそのまま） */
body.page{margin-bottom:0}
/* 0.14.0（2026-10-17）: LP の page template（inc/landing-page.php）。本文は 760px の中央寄せ、block の「幅広」は 1200px、「全幅」は画面いっぱい */
body.pcj-lp{background:#fff;margin:0}
.pcj-lp-header{display:flex;justify-content:center;align-items:center;padding:10px 16px;border-bottom:1px solid #e5e5e5;background:#fff}
.pcj-lp-logo{display:block;line-height:0}
.pcj-lp-logo img{display:block;height:28px;width:auto}
.pcj-lp-main{overflow-x:clip}
.pcj-lp-article{margin:0}
.pcj-lp-content{margin:0;padding:32px 0 48px}
.pcj-lp-blank .pcj-lp-content{padding-top:0}
.pcj-lp-content>*{box-sizing:border-box;max-width:760px;margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px}
.pcj-lp-content>.alignwide{max-width:1200px}
.pcj-lp-content>.alignfull{max-width:none;padding-left:0;padding-right:0}
.pcj-lp-content>.alignfull.wp-block-group{padding-left:16px;padding-right:16px}
.pcj-lp-content>.alignfull.wp-block-group>*{max-width:760px;margin-left:auto;margin-right:auto}
.pcj-lp-content .wp-block-button__link{text-decoration:none}
.pcj-lp-content img{max-width:100%;height:auto}
.pcj-lp-footer{border-top:1px solid #e5e5e5;background:#fff;padding:20px 16px 28px;text-align:center}
.pcj-lp-footer-text{margin:0;font-size:13px;line-height:1.8;color:#666}
.pcj-lp-footer-text a{color:inherit}
/* 0.18.0（2026-10-17、User の判断）: タグの形をそろえる（右端が三角・角丸なし）。対象: TOP の上部のタグの帯（PC・スマホ）、カードのタグ、記事の見出しの下のタグ。
   TOP のタグの帯は 2/3 の大きさ（文字 16px → カードのタグと同じ約 11.8px）。カテゴリー（黒い地の四角）とは見分けがつくようにする。
   0.18.1（User の判断「背景色なし、枠線だけ」「カテゴリーと高さを合わせ、文字は上下の真ん中を確実に」）:
   - 高さ・文字の位置はカテゴリーと同じ数字で組む: カテゴリーは「行の高さ 1.6em + 上下の余白 1px」で、文字だけ --pcj-label-lift 持ち上げる。
     タグは「高さ 1.6em + 2px（枠線の 1px を上下の余白の代わりに）」、行の高さを lift の 2 倍だけ減らし、その分を下の余白に回して文字を lift 持ち上げる
   - 地の色なし・枠線だけ。四角の部分は左・上・下の枠線、三角は ::after の正方形を 45 度回して上と右の枠線で描く
     （正方形の辺 = 高さ × 0.7071 + 1px。中心を四角の右端に置くと、三角の先が高さの半分だけ右へ出る。+1px はつなぎ目のすき間を詰めるため） */
.pcj-tag-nav__link,
.single-card-container .single-card-detail .card-categories a.pcj-post-tag,
a.pcj-entry-tags__link{
	--pcj-tag-h:calc(1.6em + 2px);
	--pcj-tag-h:round(nearest, calc(1.6em + 2px), 1px);   /* 整数の px に丸める（カテゴリーと同じ値。小数だと行の位置で 1px ずれて見える） */
	position:relative;display:inline-flex;align-items:center;box-sizing:border-box;height:var(--pcj-tag-h);top:0;
	border:0;border-radius:0;background:none;color:var(--pcj-tag-fg,#444);opacity:1;
	padding:0 calc(.25em + 1px) var(--pcj-chip-nudge,0px) calc(.6em + 1px);line-height:1;isolation:isolate;   /* 0.18.4: 輪郭は ::after の 1 つの形（前の枠線の 1px 分を余白に） */
	margin-inline-end:calc(var(--pcj-tag-h) / 2 + 4px);clip-path:none;font-weight:400;text-decoration:none;
}
.pcj-tag-nav__link::after,
.single-card-container .single-card-detail .card-categories a.pcj-post-tag::after,
a.pcj-entry-tags__link::after{
	/* 0.18.4（User の指摘「付け根に段差」）: 四角と三角を 1 つの輪郭（1 本の帯）として切り抜いて描く（別々の部品だと付け根で太さと位置が食い違った）。
	   箱は本体と同じ位置から、幅は本体 + 三角（高さの半分）。外側: 左上 → 四角の右上 → 三角の先 → 四角の右下 → 左下。
	   内側は線の太さ 1px だけ内へ。45 度の突き合わせなので、内側の角は四角の右端より 0.414px（√2 − 1）左、三角の先は 1.414px（√2）左。
	   外側と内側を evenodd の 1 つの多角形にする（左上の 0,0 → 1px,1px の切れ目は 2 回通るので消える） */
	content:"";position:absolute;box-sizing:border-box;pointer-events:none;z-index:1;
	top:0;left:0;right:auto;bottom:auto;border:0;border-radius:0;transform:none;
	width:calc(100% + var(--pcj-tag-h) / 2);height:100%;
	--pcj-tag-r:calc(100% - var(--pcj-tag-h) / 2);
	background:var(--pcj-tag-line,#a8a8a8);
	clip-path:polygon(evenodd,
		0 0,var(--pcj-tag-r) 0,100% 50%,var(--pcj-tag-r) 100%,0 100%,0 0,
		1px 1px,1px calc(100% - 1px),calc(var(--pcj-tag-r) - .414px) calc(100% - 1px),calc(100% - 1.414px) 50%,calc(var(--pcj-tag-r) - .414px) 1px,1px 1px);
}
/* 0.18.2（User の要望「マウスを乗せた時に地の色」）: 三角の内側は ::before（線の ::after の下）で塗る。普段は透明 */
.pcj-tag-nav__link::before,
.single-card-container .single-card-detail .card-categories a.pcj-post-tag::before,
a.pcj-entry-tags__link::before{
	/* 0.18.4: マウスを乗せた時の地の色も、四角 + 三角を 1 つの形で塗る（輪郭の ::after の下）。カテゴリーの ::before の指定（left:0・z-index:-1 など）は打ち消す */
	content:"";position:absolute;pointer-events:none;z-index:-1;top:0;left:0;right:auto;bottom:auto;border-radius:0;transform:none;
	width:calc(100% + var(--pcj-tag-h) / 2);height:100%;
	background:var(--pcj-tag-fill,transparent);
	clip-path:polygon(0 0,calc(100% - var(--pcj-tag-h) / 2) 0,100% 50%,calc(100% - var(--pcj-tag-h) / 2) 100%,0 100%);
}
.pcj-tag-nav__link:hover,.pcj-tag-nav__link:focus-visible,
.single-card-container .single-card-detail .card-categories a.pcj-post-tag:hover,
.single-card-container .single-card-detail .card-categories a.pcj-post-tag:focus,
a.pcj-entry-tags__link:hover,a.pcj-entry-tags__link:focus{--pcj-tag-line:#333;--pcj-tag-fill:var(--pcj-tag-hover-bg,#e9e9e9);color:#111;background:none}
.pcj-tag-nav__link,a.pcj-entry-tags__link{font-size:calc(var(--typo-xxs) - 1px)}
.pcj-tag-nav__more{font-size:calc(var(--typo-xxs) - 1px);padding:0 .8em;line-height:1.6;height:calc(1.6em + 2px);display:inline-flex;align-items:center}
.pcj-tag-nav__list{gap:4px 0;padding-inline-end:4px}
.pcj-entry-tags{gap:4px 0}
.entry-cat .pcj-entry-tags{top:0}
/* 0.18.1: カテゴリー（黒い地）もタグと同じ組み方にする（User の判断「カテゴリーと高さを合わせ、文字は上下の真ん中を確実に」）:
   どちらも整数の高さの箱（--pcj-tag-h）・行の高さ 1・上下の真ん中（align-items:center）。前のカテゴリーの「文字の箱を lift だけ上へ、
   黒い地を lift だけ下へ」のずらしはやめる（箱が小数の位置になり、行によって 1px ずれて見えた）。文字の位置の補正は --pcj-chip-nudge を両方に同じだけ */
.single-card-container .single-card-detail .card-categories a.post-category,body.single .single-page .page-header-content .entry-cat .cat-links a.post-category{
	--pcj-tag-h:calc(1.6em + 2px);--pcj-tag-h:round(nearest, calc(1.6em + 2px), 1px);
	box-sizing:border-box;height:var(--pcj-tag-h);line-height:1;top:0;display:inline-flex;align-items:center;padding:0 6px var(--pcj-chip-nudge,0px);
}
.single-card-container .single-card-detail .card-categories a.post-category::before,body.single .single-page .page-header-content .entry-cat .cat-links a.post-category::before{top:0;bottom:0}
.entry-cat .card-categories,.pcj-entry-tags{align-items:center}
body.single .single-page .page-header-content .entry-cat .cat-links{display:inline-flex;flex-wrap:wrap;align-items:center}   /* 記事のページのカテゴリーの入れ物も上下の真ん中でそろえる（block だと文字の下端に合わせて 2px 下がっていた） */
/* 0.18.1（User の判断）: メニューの行とタグの帯の間の隙間を半分に（PC の幅。文字の間 約 21px → 約 10px） */
@media(min-width:992px){
	.pcj-tag-nav{padding-block-start:0;margin-block-start:-5px}
}
/* 0.18.1（User の判断「野暮ったく見える」）: Popular の帯の記事のタイトルは太字にしない */
#pcj_highlights_news_section .highlights-content .content-title,#pcj_highlights_news_section .highlights-content .content-title a{font-weight:400}   /* 親の CSS の a の 600 より強くするため区画の id を付ける */
/* 0.18.1（User の判断）: PC の幅で、新着記事の 2 件目以降のタイトルを 2/3 の大きさに（20px → 約 13.3px）。タブレット・スマホは今のまま */
@media(min-width:992px){
	#pcj_banner_section .banner-carousel>.slider-container:nth-child(n + 2) .single-card-container .single-card-detail .card-title{font-size:calc(var(--typo-sm) * 2 / 3);line-height:1.45}   /* 親の theme.css の入れ子の指定より強くするため区画の id を付ける */
}
/* 0.18.5（User の指摘「記事のページと TOP でカテゴリー、タグの隙間が違う」）: 記事のページの見出しの上だけ、カテゴリーとタグの入れ物に横の隙間 6px があり、
   カテゴリーの右の 4px と合わせて 10px だった。TOP のカード・上部のタグの列と同じ 4px（カテゴリーの右の 4px だけ）にそろえる */
.entry-cat .card-categories{gap:4px 0}
/* 0.18.6（User の判断「入力欄は半分でキーワードに・検索ボタンも入力欄と高さを合わせて」）: header の検索の入力欄を枠の半分の幅に
   （前は枠からボタンを引いた残り全部）、ボタンは入力欄と同じ高さ（align-items:stretch。前は center で入力欄が約 7px 低かった） */
.pcj-nav-search__form{align-items:stretch}
.pcj-nav-search__input{flex:0 1 50%}
/* 0.18.7（User の判断「サーチブロック中央揃えがいいね」）: 検索の入力欄とボタンの組を枠の中央に */
.pcj-nav-search__form{justify-content:center}
/* 0.19.0（User の要望）: SNS のボタン（site-core の PCJ_Social）。正方形・白地に細線と形、マウスを乗せるとその色の地に白。
   色は既定でサイトカラー（--theme-primary-hue）、SNS の設定で指定すると入れ物の --pcj-social-color。
   自分の画像に差し替えたものは画像を枠いっぱいに。TOP はフッターの上の中央（アカウントへのリンク）、記事は作者の下（共有） */
.pcj-social__list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.pcj-social__list li{margin:0;padding:0;list-style:none}
.pcj-social{--pcj-social-c:var(--pcj-social-color,var(--theme-primary-hue,#515151))}
.pcj-social__btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;box-sizing:border-box;border:1px solid var(--pcj-social-c);background:#fff;color:var(--pcj-social-c);text-decoration:none;overflow:hidden;transition:background-color .15s,color .15s}
.pcj-social__btn:hover,.pcj-social__btn:focus-visible{background:var(--pcj-social-c);color:#fff}
.pcj-social__btn:focus-visible{outline:2px solid var(--pcj-social-c);outline-offset:2px}
.pcj-social__svg{width:18px;height:18px;display:block}
.pcj-social__img{width:100%;height:100%;object-fit:cover;display:block}
.pcj-social__btn:hover .pcj-social__img{opacity:.85}
.pcj-social--follow{display:flex;justify-content:center;padding:28px 0 32px}
.pcj-social--share{margin:10px 0 0}
.pcj-social--share .pcj-social__btn{width:32px;height:32px}
.pcj-social--share .pcj-social__svg{width:16px;height:16px}
/* 0.20.0（User の要望）: 一覧の続きを足す（assets/js/list-more.js）の「もっと見る」。ページ送りと同じ白黒の四角 */
.pcj-list-more{display:flex;justify-content:center;margin:24px 0 8px}
.pcj-list-more[hidden]{display:none}
.pcj-list-more__btn{min-width:12em;padding:.7em 1.6em;border:1px solid var(--theme-primary-hue,#515151);background:#fff;color:var(--theme-primary-hue,#515151);font-size:var(--typo-xs,.875rem);letter-spacing:.06em;cursor:pointer;border-radius:0}
.pcj-list-more__btn:hover,.pcj-list-more__btn:focus-visible{background:var(--theme-primary-hue,#515151);color:#fff}
.pcj-list-more__btn[disabled]{opacity:.6;cursor:default}
/* 0.20.1（User の要望「ギャラリーみたいにリッチに」）: 一覧の続きで足したカードの出方。画像が読めて画面に入った時に、下から少し浮かんで fade。
   時間差は list-more.js が付ける。動かすのはカードの入れ物（画像の hover の transform とぶつからない）。出し終わったら class を外す */
.archive-area>.pcj-lm-card{opacity:0;transform:translateY(18px) scale(.985);transition:opacity .55s ease-out,transform .55s ease-out}
.archive-area>.pcj-lm-card.is-shown{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.archive-area>.pcj-lm-card{opacity:1;transform:none;transition:none}}
/* 0.21.1（User の指摘「カテゴリー（メニュー）の下の隙間を上の隙間と同じに」）: 991px 以下で、メニューの文字 → タグの隙間（約 29〜31px）を
   ロゴの下の線 → メニューの文字（約 18px）にそろえる。PC は 0.18.1 で 12 / 12 にそろっている。差は幅で 10〜14px なので 2 段 */
@media(max-width:991px){.pcj-tag-nav{margin-block-start:-11px}}
@media(max-width:480px){.pcj-tag-nav{margin-block-start:-13px}}
/* 0.24.0（2026-10-20、User「上下のマージン広く見えすぎる、上下そろえて今の半分くらい」）: Popular の帯の上下の余白をそろえて 10px に。
   今まで: タグの帯 → 記事 PC 29px・スマホ 18px、記事 → 下の区画の線 約 18px。下は帯と次の区画の margin（重なって大きい方）を 8px に（記事の下の 2px と合わせて 10px） */
#pcj_highlights_news_section{margin-top:-27px;margin-bottom:8px}
#pcj_highlights_news_section+*{margin-top:8px}
@media(max-width:991px){#pcj_highlights_news_section{margin-top:-16px}}
@media(min-width:992px) and (max-width:1149px){#pcj_highlights_news_section{margin-top:calc(-27px + (1150px - 100vw) * .032)}}   /* この幅では上の隙間が 5〜10px と幅で変わるので、幅に合わせて足す */
/* 0.24.0（User「タイトル 3/4 くらいにしたい」）: TOP の注目の記事（左右交互のカード）のタイトルを 3/4 に（PC 29px → 約 22px、スマホ 26px → 約 19px）、新着記事の 1 件目を PC で 3/4（25px → 約 19px）・タブレット・スマホで 2 件目以降と同じ（22px → 約 18px）。
   新着記事の 2 件目以降（0.18.1 で PC は 2/3）はそのまま */
#pcj_banner_section .main-banner .single-card-container.list-card .single-card-detail .card-title{font-size:calc((var(--typo-md) + 4px) * .75)}   /* 元は theme.css の var(--typo-md) + 4px */
#pcj_banner_section .banner-carousel>.slider-container:first-child .single-card-container .single-card-detail .card-title{font-size:calc(var(--typo-md) * .75)}
/* タブレット・スマホでは 3/4 だと 2 件目以降（var(--typo-sm)、約 18px）より小さくなるので、2 件目以降と同じに */
@media(max-width:991px){#pcj_banner_section .banner-carousel>.slider-container:first-child .single-card-container .single-card-detail .card-title{font-size:var(--typo-sm)}}
/* 記事カードの抜粋（0.28.0）: 行数で切る（inc/card-excerpt.php）。行数は場所ごとの --pcj-excerpt-lines */
.single-card-container .single-card-detail .post-exerpt p.pcj-clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--pcj-excerpt-lines,2);line-clamp:var(--pcj-excerpt-lines,2);overflow:hidden}
/* 0.32.3（2026-10-21、User「一覧系の記事タイトル、TOP と見比べると文字サイズでかいかも」）: 記事一覧・カテゴリー・タグ・寄稿者・検索の一覧のカードの題を TOP の区画（注目・
   日記・ランダム）と同じ var(--typo-sm)（PC 25px → 20px、スマホ 約 22px → 約 18px）に。元は theme.css の var(--typo-md)。TOP（page）と single の関連記事（もう --typo-sm）は変えない */
.blog .single-card-container .single-card-detail .card-title,.archive .single-card-container .single-card-detail .card-title,.search .single-card-container .single-card-detail .card-title{font-size:var(--typo-sm)}
/* 0.32.4（2026-10-21、User「記事ページは 3/4 くらいの大きさにしたい、タイトル」）: 記事ページ（single）の題を 3/4 に（PC 39px → 約 29px、スマホ 約 32px → 約 24px）。元は theme.css の var(--typo-xl)。固定ページ・一覧は変えない */
body.single .single-page .page-header-content .entry-header .entry-title{font-size:calc(var(--typo-xl) * .75)}
/* 0.32.4（User「すぐ下のこれも揃えたい、時計マークがずれてる」）: 記事ページの題の下の日付の行。時計のマークは flex の箱の中央合わせで文字より上に出ていた → 文字と同じ大きさの inline にして
   文字の中心に（-.1em）、著者のマークも同じ形。行の左端を題にそろえる（元は 8px 右）。日付と著者の間に 10px */
body.single .single-page .page-header-content .entry-meta .post-date{display:inline;margin-inline-start:0}
body.single .single-page .page-header-content .entry-meta .post-date::before,body.single .single-page .page-header-content .entry-meta .post-author a::before{font-size:var(--typo-xxs);line-height:1;display:inline-block;vertical-align:-.1em;padding-inline-end:5px}
body.single .single-page .page-header-content .entry-meta .post-author{margin-inline-start:10px}
/* 0.34.1（2026-10-21、User「SNS ボタン、時間・スタッフの列に持ってこれないかな」）: 記事ページの日付・著者の行の右に共有のボタンを並べる（content-single.php の .entry-meta-row）。
   狭い幅で入り切らなければボタンだけ次の行へ。ボタンの上の 10px の余白は無くし、行の中で縦の中心をそろえる */
body.single .single-page .page-header-content .entry-meta-row{display:flex;flex-wrap:wrap;align-items:center;column-gap:14px;row-gap:6px;padding-bottom:10px}   /* 下の 10px は theme.css の .entry-meta の padding-bottom をこちらへ */
body.single .single-page .page-header-content .entry-meta-row .entry-meta{margin-block:0;padding-block:0}
body.single .single-page .page-header-content .entry-meta-row .pcj-social--share{margin:0 0 0 auto}   /* 0.34.2（User「SNS 右揃えが良くない？」）: 行の右端に。折り返した時もその行の右端 */
/* 0.34.3（2026-10-22、User「タイトル長え、パーツごとに調整できるように」）: TOP の枠ごとの見た目（表示設定「TOP の枠」の「見た目」）。
   題の行数で切る（.pcj-title-clamp ＋ --pcj-title-lines）、題を小さく（.pcj-title-s 85% / .pcj-title-xs 72%、元は theme.css の var(--typo-sm)）。抜粋の行数は p の --pcj-excerpt-lines */
.blog-editors-choice.pcj-title-clamp .single-card-container .single-card-detail .card-title a{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--pcj-title-lines,2);line-clamp:var(--pcj-title-lines,2);overflow:hidden}
.blog-editors-choice.pcj-title-s .container-wrap .single-card-container .single-card-detail .card-title{font-size:calc(var(--typo-sm) * .85)}
.blog-editors-choice.pcj-title-xs .container-wrap .single-card-container .single-card-detail .card-title{font-size:calc(var(--typo-sm) * .72)}

/* ---- 0.38.0（2026-11-01、User「ヘッダーを薄く・追従」）: メニューの行の追従（inc/sticky-header.php・assets/js/sticky-header.js）。
   body.pcj-stuck は script が付ける（ロゴと題の段を通り過ぎた時）。--pcj-stuck-h は行の高さ。.pcj-stuck-space は元の場所の空き ---- */
.pcj-stuck-space{height:0}
.pcj-stuck-brand{display:none;align-items:center;gap:8px;flex:0 0 auto;text-decoration:none;color:var(--site-title-hue,inherit);white-space:nowrap;margin-inline-end:18px}
.pcj-stuck-brand__logo{display:block;height:28px;width:auto}
.pcj-stuck-brand__name{font-family:var(--site-title-font);font-weight:700;font-size:var(--typo-sm,1rem);line-height:1}
body.pcj-stuck #masthead .theme-main-header{position:fixed;top:0;left:0;right:0;z-index:1000;background:var(--theme-background-hue,#fff);box-shadow:0 1px 0 var(--theme-border-hue,#e5e5e5),0 10px 24px -16px rgba(0,0,0,.35)}
body.pcj-stuck #masthead .theme-main-header .theme-main-header-wrapper{border-block-start-color:transparent}
body.admin-bar.pcj-stuck #masthead .theme-main-header{top:32px}
@media(max-width:782px){body.admin-bar.pcj-stuck #masthead .theme-main-header{top:46px}}
@media(max-width:600px){body.admin-bar.pcj-stuck #masthead .theme-main-header{top:0}}   /* 600px 以下の管理バーは一緒にスクロールして消える */
@media(min-width:992px){
	body.pcj-stuck .pcj-stuck-brand{display:inline-flex}
	body.pcj-stuck #masthead .theme-main-header-wrapper{justify-content:flex-start}
	body.pcj-stuck #masthead .theme-main-header-wrapper .primary-nav{flex:1 1 auto;min-width:0}
}
/* 固定中は、sidebar の sticky（theme.css の top:40px）と記事の見出しの scroll-margin（上の 24px）を行の高さぶん下げる */
body.pcj-stuck .theme-wrapper #secondary,body.pcj-stuck .widget-element-section .widget-element-wrap .secondary-widget-section{top:calc(var(--pcj-stuck-h,50px) + 16px)}
body.pcj-stuck .banner-section-wrapper .main-banner,body.pcj-stuck .banner-section-wrapper .banner-slider-area{top:var(--pcj-stuck-h,50px)}
.pcj-sticky-on body.single-post .entry-content h2{scroll-margin-top:calc(var(--pcj-stuck-h,50px) + 24px)}

/* ---- 0.38.1（2026-11-01、User「区画の見出しの形を揃える」）: 区画の見出しを TOP の枠の見出し（theme.css の .header-title: 上に 2px の線、serif の太字、
   calc(var(--typo-sm) + 2px)）と同じ形に。対象は sidebar のウィジェットの見出し（block の h2）、記事の下の関連記事、コメントの見出し。
   ページの題（h1.page-title）・目次の「目次」・Popular Posts の札・footer の小見出しは役割が違うのでそのまま ---- */
#secondary .widget > h2.wp-block-heading,#secondary .widget .wp-block-group__inner-container > h2.wp-block-heading:first-child,
.related-posts > .related-title,#comments.comments-area .comments-title{
	margin:0 0 18px;padding-block-start:12px;border-block-start:2px solid var(--theme-border-hue);
	font-family:var(--heading-font);font-weight:700;line-height:1;font-size:calc(var(--typo-sm) + 2px);color:var(--theme-text-hue)
}
.related-posts{margin-block-start:34px}

/* ---- 0.39.0（2026-11-02、User「タグ・ラベルをフラットに、差し色を 1 色に」）: Customizer「タグと差し色」（inc/look.php）。未設定なら何も変わらない ---- */
/* タグの形「四角」（body.pcj-tag-flat）: 0.18.x の矢印の切り抜き（::after の輪郭・::before の塗り）をやめ、角 3px の枠だけ。高さ・文字の位置・hover の変数はそのまま */
body.pcj-tag-flat :is(.pcj-tag-nav__link,.single-card-container .single-card-detail .card-categories a.pcj-post-tag,a.pcj-entry-tags__link){
	border:1px solid var(--pcj-tag-line,#a8a8a8);border-radius:3px;background:var(--pcj-tag-fill,transparent);
	padding-inline:calc(.5em + 1px);margin-inline-end:4px;   /* 間はカテゴリーの札とタグの間（4px）と同じ。矢印の時の見た目の間も 4px */
}
body.pcj-tag-flat :is(.pcj-tag-nav__link,.single-card-container .single-card-detail .card-categories a.pcj-post-tag,a.pcj-entry-tags__link)::after,
body.pcj-tag-flat :is(.pcj-tag-nav__link,.single-card-container .single-card-detail .card-categories a.pcj-post-tag,a.pcj-entry-tags__link)::before{content:none}
body.pcj-tag-flat .pcj-tag-nav__more{border-radius:3px}
body.pcj-tag-flat .single-card-container .single-card-detail .card-categories a.post-category,body.pcj-tag-flat.single .single-page .page-header-content .entry-cat .cat-links a.post-category{border-radius:3px}
body.pcj-tag-flat .single-card-container .single-card-detail .card-categories a.post-category::before,body.pcj-tag-flat.single .single-page .page-header-content .entry-cat .cat-links a.post-category::before{border-radius:3px}
/* 差し色（body.pcj-accent、:root の --pcj-accent は inc/look.php が出す）。カテゴリーの札はサイトカラーのまま */
body.pcj-accent .pcj-tag-nav__more{background:var(--pcj-accent);border-color:var(--pcj-accent)}
body.pcj-accent .pcj-tag-nav__more:hover,body.pcj-accent .pcj-tag-nav__more:focus{border-color:var(--pcj-accent)}
body.pcj-accent #pcj_highlights_news_section .news-highlights-icon{background-color:var(--pcj-accent)}
body.pcj-accent a.pcj-scroll-to-top{background-color:var(--pcj-accent)}
body.pcj-accent .widget.widget_search .wp-block-search__inside-wrapper .wp-block-search__button{background-color:var(--pcj-accent)}
body.pcj-accent .main-navigation ul .current_page_item>a,body.pcj-accent .main-navigation ul .current-menu-item>a,body.pcj-accent .main-navigation ul .current_page_ancestor>a,body.pcj-accent .main-navigation ul .current-menu-ancestor>a{color:var(--pcj-accent)}
body.pcj-accent .header-title a.view-all:hover,body.pcj-accent .header-title a.view-all:focus-within{color:var(--pcj-accent)}
body.pcj-accent .entry-content a:not(.wp-block-button__link):not(.post-category):not(.pcj-entry-tags__link):not(.pc-item__btn):not(.pc-item__thumb),body.pcj-accent .comment-content a{color:var(--pcj-accent);text-decoration-color:color-mix(in srgb,var(--pcj-accent) 45%,transparent)}
body.pcj-accent .entry-content a:not(.wp-block-button__link):not(.pc-item__btn):not(.pc-item__thumb):hover,body.pcj-accent .comment-content a:hover{color:var(--pcj-accent);text-decoration-color:var(--pcj-accent)}
body.pcj-accent :is(.pcj-tag-nav__link,.single-card-container .single-card-detail .card-categories a.pcj-post-tag,a.pcj-entry-tags__link):is(:hover,:focus,:focus-visible){--pcj-tag-line:var(--pcj-accent);--pcj-tag-hover-bg:color-mix(in srgb,var(--pcj-accent) 10%,#fff);color:var(--pcj-accent)}
/* 0.39.0（User「タグと MORE の高さがちょっとずれてる」）: タグの li は list-item で 16px の行（24px）の中にタグ（21px）が baseline で乗り、MORE は帯の真ん中に置かれていたので約 2px ずれていた。
   li をタグと同じ高さにし（行の箱を作らない）、MORE の高さもタグと同じ整数の px に丸める。矢印の形の時も同じ */
.pcj-tag-nav__list{align-items:center}
.pcj-tag-nav__item{display:flex;align-items:center;line-height:1}
.pcj-tag-nav__more{height:calc(1.6em + 2px);height:round(nearest, calc(1.6em + 2px), 1px)}

/* ---- 0.40.0（2026-11-02、User「カテゴリーページにパンくず・3 列」）: 一覧（カテゴリー・タグ・記事一覧）のパンくずを題の上に（template）。間隔を記事のページに合わせ、
   題の上下の余白を詰める。「カテゴリー: 」の接頭辞は inc/archive-header.php。列の数は Customizer（記事一覧ページ の Column 3）---- */
.site-main > #breadcrumb-list .breadcrumb-trail.breadcrumbs{padding:0 0 clamp(10px,2vw,16px)}
.site-main > .page-header{margin-block-end:clamp(18px,3vw,28px)}
.site-main > .page-header .page-title{margin-block:0}
.site-main > .page-header .archive-description{margin-block-start:.5em}
.site-main > .page-header .archive-description p:last-child{margin-block-end:0}
/* 0.40.1（2026-11-02、User「カードにぶら下げてるカテゴリーにも差し色」）: カテゴリーの札（カード・記事の頭）も差し色に。札の色は card-meta.php が inline の --custom-categories-hue に
   var(--pcj-label-hue, var(--theme-primary-hue)) を書くので、ここで --pcj-label-hue を出すと差し色、無ければサイトカラー。category ごとの色（term meta）は inline でそのまま優先 */
body.pcj-accent{--pcj-label-hue:var(--pcj-accent)}
/* 0.40.2（2026-11-02、User「このアクティブの色じゃないかな」）: ページ送りの今のページ（numeric）と「もっと見る」（load_more）も差し色に */
body.pcj-accent nav.navigation.pagination .nav-links span.current{background-color:var(--pcj-accent);border-color:var(--pcj-accent)}
body.pcj-accent nav.navigation.pagination .nav-links a:hover,body.pcj-accent nav.navigation.pagination .nav-links a:focus{border-color:var(--pcj-accent);color:var(--pcj-accent)}   /* theme の hover（文字と枠がサイトカラー、塗らない）と同じ作りで色だけ差し色 */
body.pcj-accent .pcj-list-more__btn{border-color:var(--pcj-accent);color:var(--pcj-accent)}
body.pcj-accent .pcj-list-more__btn:hover,body.pcj-accent .pcj-list-more__btn:focus-visible{background:var(--pcj-accent);color:#fff}

/* ---- 0.41.0（2026-11-02、User「ニュースのカードを文字先行に」）: 写真の無い記事のカード（inc/text-card.php、body.pcj-textcard が既定）。
   fallback のロゴ（img.pcj-thumbnail-fallback）が入る写真の箱を出さず、カードを薄い地の箱にして題と抜粋を先に。:has() の無いブラウザは今までどおりロゴ ---- */
body.pcj-textcard .single-card-container:has(> .single-card-image img.pcj-thumbnail-fallback){background:var(--theme-background-hue-light,#f7f6f6);border-radius:var(--curve-border,4px);padding:16px 18px 14px;box-sizing:border-box}
body.pcj-textcard .single-card-container .single-card-image:has(img.pcj-thumbnail-fallback){display:none}
body.pcj-textcard .single-card-container:has(> .single-card-image img.pcj-thumbnail-fallback) .single-card-detail{padding-block-start:0}
body.pcj-textcard .single-card-container.list-card:has(> .single-card-image img.pcj-thumbnail-fallback) .single-card-detail{padding:0}
body.pcj-textcard .archive-area.grid-view article:has(> .single-card-container img.pcj-thumbnail-fallback) > .single-card-container{height:100%}   /* 一覧の grid では行の高さに合わせる（隣の写真のカードと下端をそろえる） */
body.pcj-textcard.single .single-page > .post-thumbnail:has(img.pcj-thumbnail-fallback){display:none}

/* ---- 0.41.1（2026-11-02、User「スマホのナビの溢れ」）: 992px 未満でメニューが横スクロールになる時、右に続きがあれば右端をぼかして小さな矢印、
   左へ送った分があれば左端をぼかす（class は inc/header.php の script）。項目の左右の余白を 10px → 8px に詰めて 1 つでも多く見せる ---- */
@media(max-width:991px){
	#primary-menu>li>a{padding-inline:8px}
	.main-navigation{position:relative}
	.main-navigation>div.pcj-nav-scroll{--pcj-nav-fade-l:0px;--pcj-nav-fade-r:0px;
		-webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--pcj-nav-fade-l),#000 calc(100% - var(--pcj-nav-fade-r)),transparent 100%);
		mask-image:linear-gradient(to right,transparent 0,#000 var(--pcj-nav-fade-l),#000 calc(100% - var(--pcj-nav-fade-r)),transparent 100%)}
	.main-navigation>div.pcj-nav-scroll.pcj-nav-more{--pcj-nav-fade-r:44px}
	.main-navigation>div.pcj-nav-scroll.pcj-nav-begun{--pcj-nav-fade-l:28px}
	.main-navigation.pcj-nav-more::after{content:"";position:absolute;top:50%;right:calc(var(--pcj-nav-reserve,38px) + 4px);width:7px;height:7px;margin-top:-5px;
		border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);opacity:.55;pointer-events:none}
}

/* ---- 0.42.0（2026-11-02、User「薄く」「サイドバーの目次の追従」）---- */
/* ロゴと題の段を薄く（body.pcj-header-compact、Customizer「ヘッダー」、既定 on）: 余白 16 → 10px、題 約 31 → 26px、キャッチ 16 → 14px、ロゴ 44 → 36px（スマホ 36 → 30px） */
body.pcj-header-compact .site-middle-header .site-middle-header-wrapper{padding-block:10px}
body.pcj-header-compact .site-branding .site-identity .site-title{font-size:calc(var(--typo-lg) * .84)}
body.pcj-header-compact .site-branding .site-identity .site-description{font-size:calc(var(--typo-xs) - 2px);margin-top:2px}
body.pcj-header-compact .site-branding .site-identity .site-title a::before,body.pcj-header-compact .site-branding .site-logo img{width:36px;height:36px}
@media(max-width:767px){
	body.pcj-header-compact .site-branding .site-identity .site-title a::before,body.pcj-header-compact .site-branding .site-logo img{width:30px;height:30px}
}
/* 右の列の目次（inc/side-toc.php）: 右の列が横にある幅（992px 以上）だけ。今の節は太字と差し色 */
.pcj-side-toc{display:none}
@media(min-width:992px){
	.pcj-side-toc{display:block}
	.pcj-side-toc__list{margin:0;padding-inline-start:1.4em;line-height:1.7;font-size:var(--typo-xs,.9375rem)}
	.pcj-side-toc__list>li{margin:0 0 .25em}
	.pcj-side-toc__list a{text-decoration:none;color:inherit;opacity:.8}
	.pcj-side-toc__list a:hover{opacity:1;text-decoration:underline}
	.pcj-side-toc__list>li.is-current>a{opacity:1;font-weight:600;color:var(--pcj-accent,var(--theme-primary-hue,#515151))}
}
/* パンくずを 1 行に（0.42.0、User「画面からはみ出たら…にするのは SEO 的にだめ？」→ CSS で切るだけなら HTML の文字と構造化データ（BreadcrumbList）は残るので問題なし）:
   最後の項目（記事の題）だけ幅に収まらない分を「…」に。他の項目は折り返さない */
#breadcrumb-list ul.trail-items,.single-page > #breadcrumb-list ul.trail-items{display:flex;flex-wrap:nowrap;align-items:baseline;overflow:hidden;max-width:100%}   /* 記事の 0.x の flex-wrap:wrap（上の行）より強く */
#breadcrumb-list ul.trail-items li{flex:0 0 auto;white-space:nowrap}
#breadcrumb-list ul.trail-items li:last-child{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
/* 1 行になったので記事のパンくずの上下も詰める（User「上下詰められるんじゃない？」）: theme の上下 20px の padding を外し、一覧（0.40.0）と同じ下だけの余白に。上はヘッダー下の 24px がそのまま */
.single-page > #breadcrumb-list .breadcrumb-trail.breadcrumbs{padding:0}
.single-page > #breadcrumb-list{margin-block-end:clamp(12px,2vw,18px)}

/* ---- 0.42.2（2026-11-02、User「スペースがあるときは検索バーを右に出していいかも」）: 992px 以上では、検索の欄をメニューの行の中・右側に横並びで出す
   （下に 1 段増えない。追従中の行でも高さが変わらない）。992px 未満は今までどおり行の下 ---- */
@media(min-width:992px){
	.theme-main-header .header-nav{display:flex;align-items:center;gap:8px}
	.theme-main-header .header-nav>.main-navigation{flex:0 1 auto;min-width:0}
	.theme-main-header .pcj-nav-search__panel.is-open{display:block;flex:0 0 auto;padding-block:0}
	.theme-main-header .pcj-nav-search__panel .site-container-width{width:auto;max-width:none;padding:0}
	.theme-main-header .pcj-nav-search__form{justify-content:flex-start;gap:6px}
	.theme-main-header .pcj-nav-search__input{flex:0 0 220px;padding:.3em .6em}
	.theme-main-header .pcj-nav-search__submit{padding:.3em .8em}
	/* 追従中（小さいロゴと題が左にある）に開いた時は、題の文字を隠して入力欄も少し短くし、メニューが 2 段に折れないようにする（容器の幅 1022px） */
	body.pcj-stuck .pcj-stuck-brand:has(~ .primary-nav .pcj-nav-search__panel.is-open) .pcj-stuck-brand__name{display:none}
	body.pcj-stuck .theme-main-header .pcj-nav-search__panel.is-open .pcj-nav-search__input{flex-basis:180px}
}

/* ---- 0.43.0（2026-11-02、User「SP は目次が実質なくなる。上へ戻るの横に今いる章の名前の箱、押すとトグルで開く」）: スマホの「今いる章」の札と開く目次（inc/side-toc.php）。
   上へ戻るのボタン（右 40px・下 40px・40px 角）の左に、同じ高さの札。押すと上に章の一覧。992px 以上は右の列の目次があるので出さない ---- */
.pcj-mtoc{display:none}
@media(max-width:991px){
	.pcj-mtoc{display:block;position:fixed;z-index:11;inset-block-end:40px;inset-inline-start:14px;inset-inline-end:94px}
	.pcj-mtoc[hidden]{display:none}
	.pcj-mtoc__btn{display:flex;align-items:center;gap:8px;max-width:100%;height:40px;padding:0 12px 0 10px;border:1px solid var(--theme-border-hue,#c7c7c7);border-radius:var(--curve-border,4px);
		background:var(--theme-background-hue,#fff);color:var(--theme-text-hue,#222);font:inherit;font-size:var(--typo-xxs,.8125rem);line-height:1.2;text-align:left;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.12)}
	.pcj-mtoc__icon{flex:0 0 auto;width:14px;height:10px;border-block:2px solid var(--pcj-accent,var(--theme-primary-hue,#515151));position:relative;opacity:.85}
	.pcj-mtoc__icon::before{content:"";position:absolute;left:0;right:0;top:50%;margin-top:-1px;border-top:2px solid var(--pcj-accent,var(--theme-primary-hue,#515151))}
	.pcj-mtoc__label{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
	.pcj-mtoc__label.is-roll{animation:pcj-mtoc-roll .32s cubic-bezier(.2,.7,.2,1) both}
	@keyframes pcj-mtoc-roll{from{transform:translateY(70%);opacity:0}to{transform:none;opacity:1}}
	@media(prefers-reduced-motion:reduce){.pcj-mtoc__label.is-roll{animation:none}}
	.pcj-mtoc__list{position:absolute;inset-block-end:calc(100% + 8px);inset-inline-start:0;right:-80px;max-width:calc(100vw - 28px);max-height:min(60vh,420px);overflow-y:auto;overscroll-behavior:contain;
		margin:0;padding:8px 0 8px 2.2em;list-style:decimal;background:var(--theme-background-hue,#fff);border:1px solid var(--theme-border-hue,#c7c7c7);border-radius:var(--curve-border,4px);box-shadow:0 6px 24px rgba(0,0,0,.18);
		font-size:var(--typo-xs,.9375rem);line-height:1.5}
	.pcj-mtoc__list[hidden]{display:none}
	.pcj-mtoc__list>li{margin:0;padding:6px 12px 6px 2px}
	.pcj-mtoc__list a{color:inherit;text-decoration:none;display:block}
	.pcj-mtoc__list>li.is-current{font-weight:600;color:var(--pcj-accent,var(--theme-primary-hue,#515151))}
}
/* 0.43.0（User「SP のときヘッダーにロゴないのもったいない」）: 992px 未満でも追従中の行の左に小さいロゴ（絵だけ、題の文字なし） */
@media(max-width:991px){
	body.pcj-stuck .pcj-stuck-brand{display:inline-flex;margin-inline-end:6px}
	body.pcj-stuck .pcj-stuck-brand__name{display:none}
}

/* ---- 0.43.1（2026-11-02、User「SP で他ボタンの高さ違うの気になる。上に戻るボタンを下げていいかも」）: theme の上へ戻るは hover / focus で 10px 浮く。
   スマホでは押した後に hover が残って浮いたままになり、札（下 40px）と高さがずれて見えた。浮くのはマウスのある端末だけにし、スマホでは札と上へ戻るを揃えて少し下（下 24px）に ---- */
@media(hover:none){a.pcj-scroll-to-top:hover,a.pcj-scroll-to-top:focus{transform:none;box-shadow:none}}
@media(max-width:991px){
	a.pcj-scroll-to-top{inset-block-end:24px;inset-inline-end:14px}
	.pcj-mtoc{inset-block-end:24px;inset-inline-end:68px}
}
/* 0.43.1（User「見出しの先頭の少し濃い部分を差し色にするのもあり」）: 本文の h2 の左の線（3px）と h3 の線（2px）を差し色に（差し色がある時だけ。h3 は少し薄く） */
body.pcj-accent.single-post .entry-content h2{border-inline-start-color:var(--pcj-accent)}
body.pcj-accent.single-post .entry-content h3{border-inline-start-color:color-mix(in srgb,var(--pcj-accent) 55%,transparent)}

/* ---- 0.43.2（2026-11-02、User「メニュー開いたときタグ見えるの気になる」）: 992px 未満でタグの帯はメニューの行に 13px 食い込む（margin-top -13px）ので、
   子の一覧（#pcj-subpanel、行の下端から）を開くと帯の上 13px が覗いた。開いている間は帯を見えなくする（場所は取ったまま） ---- */
@media(max-width:991px){
	.theme-main-header:has(#pcj-subpanel:not([hidden])) ~ .pcj-tag-nav{visibility:hidden}
}

/* ---- 0.43.3（2026-11-02、User「アマゾンのアフィリンクを形良く入れたい」）: 商品カード（site-core 0.30.0 の [pc_item]）の見た目。薄い地の箱に 自分の写真 + 商品名 + 一言 + 差し色のボタン、右上に PR。
   記事の頭の注記（.pc-item-disclosure）は小さく薄く ---- */
.pc-item-disclosure{font-size:var(--typo-xxs,.8125rem);color:#777;margin:0 0 1.2em}
.pc-item{position:relative;display:flex;gap:18px;align-items:center;margin:1.8em 0;padding:16px 18px;background:var(--theme-background-hue-light,#f7f6f6);border:1px solid var(--theme-border-hue,#e5e5e5);border-radius:var(--curve-border,4px)}
.pc-item__pr{position:absolute;top:8px;right:10px;font-size:10px;line-height:1;letter-spacing:.08em;padding:3px 5px;border:1px solid #bbb;border-radius:2px;color:#777;background:#fff}
.pc-item__thumb{flex:0 0 150px;display:block;line-height:0}
.pc-item__thumb img{width:150px;height:150px;object-fit:cover;border-radius:3px;display:block}
.pc-item__body{flex:1 1 auto;min-width:0}
.pc-item__name{margin:0 0 .35em;padding-right:36px;font-weight:600;font-size:var(--typo-sm,1.05rem);line-height:1.4}
.pc-item__note{margin:0 0 .8em;font-size:var(--typo-xs,.9375rem);color:#555;line-height:1.6}
.pc-item__actions{margin:0}
.pc-item__btn,.entry-content .pc-item__btn,body.pcj-accent .entry-content a.pc-item__btn{display:inline-block;padding:.55em 1.3em;border-radius:3px;font-size:var(--typo-xs,.9375rem);font-weight:600;text-decoration:none;line-height:1.3;color:#fff;background:var(--pcj-accent,var(--theme-primary-hue,#515151));border:1px solid transparent}   /* 本文の a の色（差し色・下線）より強く */
.pc-item__btn:hover,.pc-item__btn:focus-visible,body.pcj-accent .entry-content a.pc-item__btn:hover{color:#fff;opacity:.9;text-decoration:none}
.pc-item__btn--amazon::after{content:" ↗";font-weight:400;opacity:.85}
@media(max-width:600px){
	.pc-item{flex-direction:column;align-items:stretch;gap:12px;padding:14px}
	.pc-item__thumb{flex:0 0 auto;align-self:center}
	.pc-item__thumb img{width:140px;height:140px}
	.pc-item__btn,.entry-content .pc-item__btn,body.pcj-accent .entry-content a.pc-item__btn{display:block;text-align:center}
}

/* ---- 0.43.4（2026-11-02、User「目次のハイライト色だけじゃなくて先頭に ▷ を入れたい」）: 右の列の目次の今の節に ▷。全部の項目に同じ幅の印の場所を取り（透明）、
   今の節だけ見せる → 切り替わっても文字が左右に動かない ---- */
@media(min-width:992px){
	.pcj-side-toc__list{padding-inline-start:0;list-style:none}
	.pcj-side-toc__list a{display:flex;gap:.35em;align-items:baseline}
	.pcj-side-toc__list a::before{content:"▷";flex:0 0 1em;font-size:.85em;opacity:0;color:var(--pcj-accent,var(--theme-primary-hue,#515151))}
	.pcj-side-toc__list>li.is-current>a::before{opacity:1}
}