/*
 * 元テーマ（SWELL 2.19.0）に、なべちゃんの指示で足したもの（2026-10-12）。
 * 元テーマのCSS・旧DBの生成CSSは書き換えず、このファイルを生成CSSのあとに読む。
 *
 * 1. 本文の字の大きさ：PC・タブレット（600px 以上）18px、スマホ（599px 以下）17px。
 *    元テーマの設定「フォントサイズ」と同じ変数 --swl-fz--content に書く（元 classes/Style/Body.php と
 *    Style::generate_css() の 'tab' が min-width: 600px）。元の選択肢は PC が 14〜18px、
 *    スマホが 14〜16px と vw なので、スマホの 17px は選択肢の外の値。
 * 2. サイドバーの追従目次で、いま読んでいる見出しの項目を示す。印（is-current）は各サイトの main.js が付ける。
 * 3. 旧ポチップの箱のボタンと単独ボタン、「口コミを見る」の字の濃さ（調整の段の指示「コントラストが足りていなければ修正」に、
 *    見本を3案撮って聞いたなべちゃんの答え「案A 字だけ黒系」）。4サイトとも旧DBの pochipp_settings の色は同じ
 *    （Amazon #f99a0c・Yahoo! #438ee8・カスタム #5ca250・単独ボタン #069A8E。口コミの字 #599ba3 は旧プラグインの CSS）で、
 *    白い字が画素で測って Amazon 2.49・Yahoo! 3.64・カスタム 3.23・単独ボタン 3.48、口コミ 3.16 と 4.5:1 に届かなかった
 *    （manage の bg-contrast.sh・contrast.sh、鍋ログぶろぐの denon-perl-pro_review、幅 1280）。地の色（店の色）はそのまま、
 *    字だけ黒系にする（Amazon #222 で 7.32・Yahoo! #111 で 5.64・カスタム #111 で 6.06・単独ボタン #111 で 5.41。
 *    口コミは同じ色味で濃く #487d84 で 4.62）。楽天・メルカリは届いているので変えない。
 *    旧プラグインの CSS（このファイルより後に読む）が字の色を !important で書いているので、詳細度を上げて !important を付ける。
 *    単独ボタンの字は !important ではないので、詳細度だけ上げる。
 * 4. 画像が取れない商品の箱（2026-10-13、なべちゃんの回答「案B」。manage の tasks/nabe/done/manage_swell-noimage-productbox.md）：
 *    旧ポチップは画像が無いと画像の枠ごと出さず（共通部品の markup=pochipp）、PC は画像の列（140px）と間が空いたまま
 *    題名とボタンが右へ寄っていた。2026-09-26 に今の表示で選んだ案B（画像の場所に淡い地と箱の線画。manage の
 *    docs/product-hub.md「画像が取れないときの見た目」）を、共通部品の HTML は変えずに箱の疑似要素で出す
 *    （旧プラグインの CSS は箱の ::before・::after を使っていない）。PC・タブレットは画像の列（areaImg）に枠と線画、
 *    スマホの縦並びは画像と同じく上の真ん中に幅 120px で（線画は箱の余白 24px・360px 以下は 16px から位置を決める）。
 *    色は元テーマの変数に従う（淡い地 --color_gray・線 --color_border・線画は本文の色 --color_text を白へ 3 割寄せた色）。
 *    :has() の無い古いブラウザでは今までどおり空いたまま。画像のある箱には当たらない。
 */
:root{--swl-fz--content:17px}
@media screen and (min-width:600px){:root{--swl-fz--content:18px}}
.w-fixSide .p-toc__link.is-current{background:var(--color_main_thin);color:var(--color_main);font-weight:700}
.pochipp-box[data-btn-style=dflt] .-amazon>.pochipp-box__btn{color:#222!important}
.pochipp-box[data-btn-style=dflt] :is(.-yahoo,.-custom)>.pochipp-box__btn{color:#111!important}
.pochipp-inline__btnwrap>a.pochipp-inline__btn{color:#111}
.pochipp-box .pochipp-box__review span{color:#487d84!important}
.pochipp-box:not(:has(>.pochipp-box__image))::before{content:"";grid-area:areaImg;align-self:stretch;box-sizing:border-box;min-height:96px;background:var(--color_gray);border:1px solid var(--color_border);border-radius:4px}
.pochipp-box:not(:has(>.pochipp-box__image))::after{content:"";grid-area:areaImg;place-self:center;width:40px;height:40px;background:#707070;background:color-mix(in srgb,var(--color_text) 70%,#fff);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.2' stroke-linejoin='round'%3E%3Cpath d='M12 2.8 20.5 7.4v9.2L12 21.2 3.5 16.6V7.4z'/%3E%3Cpath d='M3.5 7.4 12 12l8.5-4.6M12 12v9.2M7.75 5.1l8.5 4.6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.2' stroke-linejoin='round'%3E%3Cpath d='M12 2.8 20.5 7.4v9.2L12 21.2 3.5 16.6V7.4z'/%3E%3Cpath d='M3.5 7.4 12 12l8.5-4.6M12 12v9.2M7.75 5.1l8.5 4.6'/%3E%3C/svg%3E") center/contain no-repeat}
@media screen and (max-width:599px){.pochipp-box[data-lyt-mb=vrtcl]:not(:has(>.pochipp-box__image))::before{display:block;width:120px;height:96px;margin:0 auto 16px}.pochipp-box[data-lyt-mb=vrtcl]:not(:has(>.pochipp-box__image))::after{position:absolute;top:52px;left:50%;margin-left:-20px}}
@media screen and (max-width:360px){.pochipp-box[data-lyt-mb=vrtcl]:not(:has(>.pochipp-box__image))::after{top:44px}}