@charset "utf-8";
/* ==========================================================================
記事本文スタイル（フロント ＋ 管理画面エディター 共通）
セレクタは必ず2系統で書くこと：
.article-body X … フロント（single.php の本文ラッパー）
＋ Classic Editor(TinyMCE) の
.editor-styles-wrapper X … ブロックエディター併用時
※ このファイルは wp-func/client/styles.php から
フロント enqueue / add_editor_style() / enqueue_block_editor_assets の
3箇所で読み込まれる。片方だけ直さないこと。
※ 画像パスは assets/css/ からの相対（../images/…）
========================================================================== */
/* --------------------------------------------------------------------------
トークン ＋ ベース
エディターの iframe には style.css の :root が届かないため、
ここで必要な変数を定義し直す
-------------------------------------------------------------------------- */
.article-body,
.editor-styles-wrapper {
--ab-text: #192E34;
--ab-water: #5EA7AF;
--ab-muted: #646363;
--ab-sub: #F6F6F6;
--ab-line: #E7E6E1;
--ab-border: #E0DFDA;
font-family: "Noto Sans", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 32px;
color: var(--ab-text);
word-break: break-word;
font-feature-settings: "palt" 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* フロントでは本文カラムの上に80px（デザイン実測）
padding は親テーマの .cps-post-main { padding-top: 20px } を打ち消すため */
.article-body {
margin-top: 80px;
padding: 0;
}
/* Classic Editor(TinyMCE) の iframe 本体だけに効く（フロントの .article-body は div） */
body.article-body {
margin: 0 auto;
padding: 24px;
max-width: 706px;
background: #FFF;
}
/* --------------------------------------------------------------------------
テキスト
-------------------------------------------------------------------------- */
/* padding-bottom:0 は親テーマの `.cps-post-main p { padding-bottom: 2rem }` 打ち消し。
これが残ると margin 37px と合算されて段落間が69pxになる */
.article-body p,
.editor-styles-wrapper p {
margin: 0 0 37px;
padding: 0;
font-size: 16px;
line-height: 32px;
color: var(--ab-text);
}
.article-body > *:last-child,
.editor-styles-wrapper > *:last-child {
margin-bottom: 0;
}
/* ホバーで変わるものは全部トランジションさせる。
text-decoration-line はアニメーションできないので、下線は常に引いておき
text-decoration-color を透明↔色で切り替える（＝下線がふわっと出る） */
.article-body a,
.editor-styles-wrapper a {
color: var(--ab-water);
text-decoration: underline;
text-decoration-color: currentColor;
text-underline-offset: 3px;
transition:
color 0.22s ease,
opacity 0.22s ease,
background-color 0.22s ease,
border-color 0.22s ease,
text-decoration-color 0.22s ease;
}
.article-body a:hover,
.editor-styles-wrapper a:hover {
opacity: 0.7;
color: var(--ab-water);
}
.article-body strong,
.editor-styles-wrapper strong,
.article-body b,
.editor-styles-wrapper b {
font-weight: 700;
color: var(--ab-text);
background: none;
}
/* 本文・リスト内の強調は water の細いマーカーで拾う。
（記事は「用語：説明」の形が非常に多いため、
見出しほど強くない“語の目印”としてトーンを合わせる）
表の中・見出しの中・JINパーツの中には出さない。 */
.article-body p > strong,
.article-body li > strong,
.editor-styles-wrapper p > strong,
.editor-styles-wrapper li > strong {
background: linear-gradient(transparent 62%, rgba(94, 167, 175, 0.26) 62%);
padding-bottom: 1px;
}
.article-body :is(table, [class*="balloon"], [class*="simple-box"], [class*="concept-box"], [class*="kaisetsu-box"], [class*="innerlink-box"], [class*="ranking"]) :is(p, li) > strong,
.editor-styles-wrapper :is(table, [class*="balloon"], [class*="simple-box"], [class*="concept-box"], [class*="kaisetsu-box"], [class*="innerlink-box"], [class*="ranking"]) :is(p, li) > strong {
background: none;
padding-bottom: 0;
}
.article-body em,
.editor-styles-wrapper em {
font-style: italic;
}
.article-body small,
.editor-styles-wrapper small {
font-size: 13px;
color: var(--ab-muted);
}
/* --------------------------------------------------------------------------
見出し
h2 はデザイン通り左に water の縦バー
-------------------------------------------------------------------------- */
.article-body h2,
.editor-styles-wrapper h2 {
position: relative;
margin: 48px 0 37px;
padding: 0 0 0 27px;
font-size: 24px;
font-weight: 600;
line-height: 1.6;
color: var(--ab-text);
background: none;
border: none;
}
/* 目次から飛んだときに見出しが上端に貼り付かないように。
TOC+ が見出しの中に入れる が着地点になるので [id] 全体に効かせる */
.article-body [id] {
scroll-margin-top: 24px;
}
.article-body h2::before,
.editor-styles-wrapper h2::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 5px;
background: var(--ab-water);
border: none;
}
.article-body h2::after,
.editor-styles-wrapper h2::after {
content: none;
}
.article-body h3,
.editor-styles-wrapper h3 {
margin: 37px 0 28px;
padding: 0;
font-size: 20px;
font-weight: 600;
line-height: 1.6;
color: var(--ab-text);
background: none;
border: none;
}
.article-body h3::before,
.editor-styles-wrapper h3::before,
.article-body h3::after,
.editor-styles-wrapper h3::after {
content: none;
}
.article-body h4,
.editor-styles-wrapper h4 {
margin: 32px 0 20px;
padding: 0;
font-size: 18px;
font-weight: 600;
line-height: 1.7;
color: var(--ab-text);
background: none;
border: none;
}
.article-body h4::before,
.editor-styles-wrapper h4::before,
.article-body h4::after,
.editor-styles-wrapper h4::after {
content: none;
}
.article-body h5,
.editor-styles-wrapper h5,
.article-body h6,
.editor-styles-wrapper h6 {
margin: 28px 0 16px;
padding: 0;
font-size: 16px;
font-weight: 600;
line-height: 1.7;
color: var(--ab-text);
background: none;
border: none;
}
.article-body h2:first-child,
.editor-styles-wrapper h2:first-child,
.article-body h3:first-child,
.editor-styles-wrapper h3:first-child,
.article-body h4:first-child,
.editor-styles-wrapper h4:first-child {
margin-top: 0;
}
/* --------------------------------------------------------------------------
リスト（reset.css でマーカーが消えるため復活させる）
-------------------------------------------------------------------------- */
.article-body ul,
.editor-styles-wrapper ul,
.article-body ol,
.editor-styles-wrapper ol {
margin: 0 0 37px;
padding: 0;
list-style: none;
}
.article-body li,
.editor-styles-wrapper li {
position: relative;
margin: 0 0 12px;
padding-left: 26px;
font-size: 16px;
line-height: 32px;
list-style: none;
}
.article-body li:last-child,
.editor-styles-wrapper li:last-child {
margin-bottom: 0;
}
.article-body ul > li::before,
.editor-styles-wrapper ul > li::before {
content: "";
position: absolute;
left: 4px;
top: 13px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--ab-water);
}
.article-body ol,
.editor-styles-wrapper ol {
counter-reset: ab-ol;
}
.article-body ol > li,
.editor-styles-wrapper ol > li {
counter-increment: ab-ol;
}
.article-body ol > li::before,
.editor-styles-wrapper ol > li::before {
content: counter(ab-ol) ".";
position: absolute;
left: 0;
top: 0;
font-weight: 700;
color: var(--ab-water);
}
/* 入れ子 */
.article-body li > ul,
.editor-styles-wrapper li > ul,
.article-body li > ol,
.editor-styles-wrapper li > ol {
margin: 12px 0 0;
}
/* エディター専用：親テーマの editor-style.css が li::after でマーカーを出すため、
こちらの li::before と二重になる（順序リストは番号が2つ出る）。
エディター側だけ止めてフロントと同じ見た目に揃える。
（body.article-body はTinyMCEのiframeでしか一致しない＝フロントには影響しない）
※ 吹き出し内の順序リストの番号もここで消えるが、実用上の影響はないと判断。 */
body.article-body ul > li::after,
body.article-body ol > li::after,
.editor-styles-wrapper ul > li::after,
.editor-styles-wrapper ol > li::after {
content: none;
}
/* --------------------------------------------------------------------------
テーブル
※ 記事によってはセルに直書きの style="padding:…;border:1px solid #ddd"
が入っているため、上書きに !important が必要
-------------------------------------------------------------------------- */
.article-body .table-scroll,
.editor-styles-wrapper .table-scroll {
margin: 0 0 37px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: 8px;
}
.article-body table,
.editor-styles-wrapper table {
width: 100%;
margin: 0 0 37px;
border-collapse: collapse;
border-spacing: 0;
font-size: 15px;
line-height: 1.8;
background: #FFF;
overflow: hidden;
border-radius: 8px;
}
.article-body .table-scroll table,
.editor-styles-wrapper .table-scroll table {
margin: 0;
min-width: 560px;
}
.article-body table th,
.editor-styles-wrapper table th {
padding: 14px 16px !important;
border: 1px solid var(--ab-border) !important;
background: var(--ab-text) !important;
color: #FFF !important;
font-weight: 600;
text-align: left;
vertical-align: middle;
}
.article-body table td,
.editor-styles-wrapper table td {
padding: 14px 16px !important;
border: 1px solid var(--ab-border) !important;
background: transparent;
vertical-align: top;
}
.article-body table tbody tr:nth-child(even) td,
.editor-styles-wrapper table tbody tr:nth-child(even) td {
background: var(--ab-sub);
}
.article-body table a,
.editor-styles-wrapper table a {
word-break: break-all;
}
/* --------------------------------------------------------------------------
区切り線 / 引用 / コード
-------------------------------------------------------------------------- */
.article-body hr,
.editor-styles-wrapper hr {
height: 1px;
margin: 48px 0 !important;
border: 0;
background: var(--ab-line);
}
.article-body blockquote,
.editor-styles-wrapper blockquote {
position: relative;
margin: 0 0 37px;
padding: 24px 28px;
background: var(--ab-sub);
border: none;
border-left: 3px solid var(--ab-water);
border-radius: 8px;
color: var(--ab-text);
}
.article-body blockquote::before,
.editor-styles-wrapper blockquote::before,
.article-body blockquote::after,
.editor-styles-wrapper blockquote::after {
content: none;
}
.article-body blockquote p:last-child,
.editor-styles-wrapper blockquote p:last-child {
margin-bottom: 0;
}
.article-body pre,
.editor-styles-wrapper pre {
margin: 0 0 37px;
padding: 20px 24px;
overflow-x: auto;
background: var(--ab-text);
color: #FFF;
border-radius: 8px;
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
font-size: 14px;
line-height: 1.8;
}
.article-body pre code,
.editor-styles-wrapper pre code {
padding: 0;
background: none;
color: inherit;
font-size: inherit;
}
.article-body code,
.editor-styles-wrapper code {
padding: 2px 6px;
background: var(--ab-sub);
border-radius: 4px;
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
font-size: 14px;
color: var(--ab-text);
}
/* --------------------------------------------------------------------------
画像
-------------------------------------------------------------------------- */
.article-body img,
.editor-styles-wrapper img {
max-width: 100%;
height: auto;
border-radius: 8px;
vertical-align: bottom;
}
/* 本文直下に裸で置かれた画像・段落の中身が画像だけのもの。
親テーマの `.cps-post-main img { margin-bottom: 20px }` が
段落マージンに上乗せされるのを止め、段落と同じ扱いにする */
.article-body > img,
.editor-styles-wrapper > img {
display: block;
margin: 0 0 37px;
}
.article-body p > img:only-child,
.editor-styles-wrapper p > img:only-child {
display: block;
margin-bottom: 0;
}
.article-body figure,
.editor-styles-wrapper figure {
margin: 0 0 37px;
}
.article-body figcaption,
.editor-styles-wrapper figcaption,
.article-body .wp-caption-text,
.editor-styles-wrapper .wp-caption-text {
margin-top: 10px;
font-size: 13px;
line-height: 1.8;
color: var(--ab-muted);
text-align: center;
}
/* --------------------------------------------------------------------------
FAQ アコーディオン（details / summary）
-------------------------------------------------------------------------- */
.article-body details,
.editor-styles-wrapper details {
margin: 0 0 28px;
}
.article-body summary,
.editor-styles-wrapper summary {
position: relative;
display: flex;
align-items: center;
gap: 7px;
padding: 15px 52px 14px 19px;
background: var(--ab-water);
border: 2px solid #FFF;
border-radius: 8px;
color: #FFF;
font-size: 15px;
font-weight: 500;
line-height: 32px;
cursor: pointer;
list-style: none;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.article-body summary::-webkit-details-marker,
.editor-styles-wrapper summary::-webkit-details-marker {
display: none;
}
.article-body summary::before,
.editor-styles-wrapper summary::before {
content: "Q.";
flex-shrink: 0;
font-size: 21px;
font-weight: 500;
line-height: 1;
}
.article-body summary::after,
.editor-styles-wrapper summary::after {
content: "";
position: absolute;
right: 19px;
top: 50%;
transform: translateY(-50%);
width: 17px;
height: 17px;
background: url(../images/ico/icoPlus.svg) no-repeat center center;
background-size: contain;
}
.article-body details[open] > summary,
.editor-styles-wrapper details[open] > summary {
background: #FFF;
border-color: var(--ab-water);
color: var(--ab-water);
}
.article-body details[open] > summary::after,
.editor-styles-wrapper details[open] > summary::after {
background-image: url(../images/ico/icoMinus.svg);
}
/* 閉じるアニメーション中は先に「閉じた見た目」へ戻す（assets/js/article.js） */
.article-body details.is-closing > summary {
background: var(--ab-water);
border-color: #FFF;
color: #FFF;
}
.article-body details.is-closing > summary::after {
background-image: url(../images/ico/icoPlus.svg);
}
.article-body details > *:not(summary),
.editor-styles-wrapper details > *:not(summary) {
margin-top: 20px;
}
.article-body details > *:last-child,
.editor-styles-wrapper details > *:last-child {
margin-bottom: 0;
}
/* 回答をスライドで開閉するためのラッパー（assets/js/article.js が生成） */
.article-body .faq__body {
margin-top: 0;
overflow: hidden;
transition: height 0.3s ease;
}
.article-body .faq__body > *:first-child {
margin-top: 20px;
}
.article-body .faq__body > *:last-child {
margin-bottom: 0;
}
@media (prefers-reduced-motion: reduce) {
.article-body .faq__body {
transition: none;
}
}
/* --------------------------------------------------------------------------
目次
Table of Contents Plus はリンク文字が空の目次しか出さないため非表示にし、
wp-func/client/article.php が組み立てた .toc を表示する
-------------------------------------------------------------------------- */
#toc_container {
display: none !important;
}
.article-body .toc,
.editor-styles-wrapper .toc {
display: block;
margin: 0 0 48px;
padding: 28px 32px;
background: var(--ab-sub);
border: none;
border-radius: 13px;
font-size: 15px;
}
.article-body .toc__title,
.editor-styles-wrapper .toc__title {
position: relative;
margin: 0 0 18px;
padding-left: 20px;
font-size: 18px;
font-weight: 600;
line-height: 1.6;
color: var(--ab-text);
}
.article-body .toc__title::before,
.editor-styles-wrapper .toc__title::before {
content: "";
position: absolute;
left: 0;
top: 0.2em;
bottom: 0.2em;
width: 3px;
background: var(--ab-water);
}
.article-body .toc__list,
.editor-styles-wrapper .toc__list {
margin: 0;
padding: 0;
list-style: none;
counter-reset: none;
}
.article-body .toc__item,
.editor-styles-wrapper .toc__item {
margin: 0 0 12px;
padding-left: 0;
line-height: 1.7;
font-weight: 600;
}
.article-body .toc__item:last-child,
.editor-styles-wrapper .toc__item:last-child {
margin-bottom: 0;
}
.article-body .toc__item::before,
.editor-styles-wrapper .toc__item::before,
.article-body .toc__subitem::before,
.editor-styles-wrapper .toc__subitem::before {
content: none;
}
.article-body .toc__sublist,
.editor-styles-wrapper .toc__sublist {
margin: 10px 0 0;
padding: 0 0 0 18px;
list-style: none;
}
.article-body .toc__subitem,
.editor-styles-wrapper .toc__subitem {
margin: 0 0 8px;
padding-left: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.7;
}
.article-body .toc a,
.editor-styles-wrapper .toc a {
color: var(--ab-text);
text-decoration: none;
}
.article-body .toc a:hover,
.editor-styles-wrapper .toc a:hover {
color: var(--ab-water);
text-decoration: underline;
opacity: 1;
}
/* --------------------------------------------------------------------------
記事下のタグ一覧（JIN の .tag-box）
-------------------------------------------------------------------------- */
.article-body .tag-box {
margin: 48px 0 0;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.article-body .tag-box span {
display: inline-flex;
}
.article-body .tag-box span a {
display: inline-flex;
align-items: center;
padding: 4px 12px;
font-family: "Open Sans", "Noto Sans", sans-serif;
font-size: 12px;
line-height: 1.4;
letter-spacing: 0.6px;
color: var(--ab-water);
background-color: transparent;
border: 1px solid var(--ab-water);
border-radius: 35px;
text-decoration: none;
transition:
color 0.22s ease,
background-color 0.22s ease,
border-color 0.22s ease;
}
.article-body .tag-box span a:hover {
background-color: var(--ab-water);
color: #FFF;
opacity: 1;
}
/* --------------------------------------------------------------------------
著者プロフィール／広告枠（残す・余白と枠のみ調整）
-------------------------------------------------------------------------- */
.article-body .author-box,
.article-body .profile-box,
.article-body .adarea-box,
.article-body .related-ad-unit-area {
margin: 48px 0 0;
}
.article-body .author-box,
.article-body .profile-box {
padding: 24px;
background: var(--ab-sub);
border: none;
border-radius: 13px;
}
/* --------------------------------------------------------------------------
JIN のパーツ（吹き出し／各種ボックス／ランキング等）との互換
JIN は本文の行間を `.cps-post-main p { padding-bottom: 2rem; line-height: 1.8em }`
で作り、文字サイズは em の相対指定でパーツ側に効かせている。
こちらの `.article-body p`（px 指定＋margin-bottom）がパーツの内側にも効くと
・吹き出しが間延びする（文字16px/行間32px になり、下に37pxの余白が付く）
・ボックスの下に余分な余白が残る
ため、パーツの内側だけ JIN の指定に戻す。
※ 新しいパーツを使い始めたらセレクタをここに足すこと。
-------------------------------------------------------------------------- */
.article-body :is([class*="balloon"],
[class*="simple-box"],
[class*="concept-box"],
[class*="kaisetsu-box"],
[class*="innerlink-box"],
[class*="jin-fusen"],
[class*="jin-ac-box"],
[class*="jin-2column"],
[class*="jin-3column"],
[class*="ranking"],
.jinlist,
.cps-table03) p,
.editor-styles-wrapper :is([class*="balloon"],
[class*="simple-box"],
[class*="concept-box"],
[class*="kaisetsu-box"],
[class*="innerlink-box"],
[class*="jin-fusen"],
[class*="jin-ac-box"],
[class*="jin-2column"],
[class*="jin-3column"],
[class*="ranking"],
.jinlist,
.cps-table03) p {
margin: 0;
/* JINはこの padding で行間を作っているので戻す */
padding: 0 0 2rem;
font-size: 1em;
line-height: 1.8em;
letter-spacing: 0.05em;
}
/* --------------------------------------------------------------------------
過去記事に直書きされている装飾ボックスの上書き
（旧・青系 #2c5aa0 系。本文は書き換えずCSSでトンマナに寄せる）
-------------------------------------------------------------------------- */
/* ※ 直書きは div だけでなく p / a にも付いているのでタグは限定しない */
.article-body [style*="f5f7fa"],
.editor-styles-wrapper [style*="f5f7fa"],
.article-body [style*="f8fafc"],
.editor-styles-wrapper [style*="f8fafc"],
.article-body [style*="f0f7ff"],
.editor-styles-wrapper [style*="f0f7ff"],
.article-body [style*="fafafa"],
.editor-styles-wrapper [style*="fafafa"],
.article-body [style*="fff8e1"],
.editor-styles-wrapper [style*="fff8e1"],
.article-body [style*="f7f9fc"],
.editor-styles-wrapper [style*="f7f9fc"],
.article-body [style*="e2e8f0"],
.editor-styles-wrapper [style*="e2e8f0"] {
background: var(--ab-sub) !important;
border-radius: 8px !important;
}
/* 旧配色の枠線・文字色をまとめて water / トンマナ側へ寄せる */
.article-body [style*="2c5aa0"],
.editor-styles-wrapper [style*="2c5aa0"],
.article-body [style*="4b7bec"],
.editor-styles-wrapper [style*="4b7bec"],
.article-body [style*="2c7be5"],
.editor-styles-wrapper [style*="2c7be5"],
.article-body [style*="f39c12"],
.editor-styles-wrapper [style*="f39c12"] {
border-color: var(--ab-water) !important;
}
.article-body div[style*="#ddd"],
.editor-styles-wrapper div[style*="#ddd"],
.article-body div[style*="e0e0e0"],
.editor-styles-wrapper div[style*="e0e0e0"],
.article-body div[style*="e0e6ed"],
.editor-styles-wrapper div[style*="e0e6ed"],
.article-body div[style*="e2e8f0"],
.editor-styles-wrapper div[style*="e2e8f0"] {
border-color: var(--ab-border) !important;
border-radius: 8px !important;
}
/* 旧配色のボタン（青系）は water の丸ボタンに */
.article-body a[style*="2c5aa0"],
.editor-styles-wrapper a[style*="2c5aa0"],
.article-body a[style*="4b7bec"],
.editor-styles-wrapper a[style*="4b7bec"],
.article-body a[style*="2c7be5"],
.editor-styles-wrapper a[style*="2c7be5"] {
background: var(--ab-water) !important;
border-color: var(--ab-water) !important;
color: #FFF !important;
border-radius: 25px !important;
text-decoration: none !important;
}
/* 見出し的に使われている旧配色の文字色 */
.article-body p[style*="f39c12"],
.editor-styles-wrapper p[style*="f39c12"],
.article-body p[style*="5a6a7a"],
.editor-styles-wrapper p[style*="5a6a7a"] {
color: var(--ab-text) !important;
}
.article-body div[style] p:last-child,
.editor-styles-wrapper div[style] p:last-child {
margin-bottom: 0;
}
/* --------------------------------------------------------------------------
SP
-------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
.article-body,
.editor-styles-wrapper {
font-size: 15px;
line-height: 29px;
}
.article-body {
margin-top: 3.2rem;
}
.article-body p,
.editor-styles-wrapper p {
margin-bottom: 24px;
font-size: 15px;
line-height: 29px;
}
.article-body h2,
.editor-styles-wrapper h2 {
margin: 36px 0 24px;
padding-left: 18px;
font-size: 19px;
}
.article-body h3,
.editor-styles-wrapper h3 {
margin: 28px 0 18px;
font-size: 17px;
}
.article-body h4,
.editor-styles-wrapper h4 {
margin: 24px 0 14px;
font-size: 16px;
}
.article-body ul,
.editor-styles-wrapper ul,
.article-body ol,
.editor-styles-wrapper ol {
margin-bottom: 24px;
}
.article-body li,
.editor-styles-wrapper li {
padding-left: 22px;
font-size: 15px;
line-height: 29px;
}
.article-body ul > li::before,
.editor-styles-wrapper ul > li::before {
top: 11px;
width: 7px;
height: 7px;
}
.article-body table,
.editor-styles-wrapper table {
font-size: 13px;
}
.article-body table th,
.editor-styles-wrapper table th,
.article-body table td,
.editor-styles-wrapper table td {
padding: 10px 12px !important;
}
.article-body hr,
.editor-styles-wrapper hr {
margin: 32px 0 !important;
}
.article-body blockquote,
.editor-styles-wrapper blockquote {
margin-bottom: 24px;
padding: 18px 20px;
}
.article-body summary,
.editor-styles-wrapper summary {
padding: 12px 42px 12px 14px;
font-size: 13px;
line-height: 1.7;
}
.article-body summary::before,
.editor-styles-wrapper summary::before {
font-size: 17px;
}
.article-body summary::after,
.editor-styles-wrapper summary::after {
right: 14px;
width: 14px;
height: 14px;
}
.article-body details > *:not(summary),
.editor-styles-wrapper details > *:not(summary) {
margin-top: 14px;
}
.article-body .toc,
.editor-styles-wrapper .toc {
margin-bottom: 32px;
padding: 20px;
font-size: 14px;
}
.article-body .toc__title,
.editor-styles-wrapper .toc__title {
font-size: 16px;
}
.article-body .toc__subitem,
.editor-styles-wrapper .toc__subitem {
font-size: 13px;
}
.article-body .tag-box,
.article-body .share,
.article-body .sns-top,
.article-body .author-box,
.article-body .profile-box,
.article-body .adarea-box,
.article-body .related-ad-unit-area {
margin-top: 32px;
}
}
/* ==========================================================================
親テーマに確実に勝たせるための上書き層
JIN は本文要素を、こちらと同等以上の詳細度で装飾してくる。
フロント : `.cps-post-main ol > li:before`（0,1,3）＝黒丸＋白数字
エディター: `.h2-style05 h2`（0,1,1）＝黒背景の見出し／
`body.mceContentBody img { margin-bottom:20px !important }`
そのため、ここだけ詳細度を一段上げて確実に上書きする。
フロント : .cps-post-main.article-body … → (0,2,x)
エディター: body.article-body … → (0,1,x+1)
※ フロントと編集画面の計算値を突き合わせて差が出た項目だけを列挙している。
新しく差が出たらここに足す。
========================================================================== */
/* --- ベース：エディターの font-weight:300 / 字間ズレを揃える --- */
.cps-post-main.article-body,
body.article-body,
.editor-styles-wrapper {
font-weight: 400;
letter-spacing: 0.05em;
}
/* --- 見出し：JIN の h2-style / h3-style 等の装飾を無効化 --- */
.cps-post-main.article-body :is(h2, h3, h4, h5, h6),
body.article-body :is(h2, h3, h4, h5, h6) {
background: none;
border: none;
border-radius: 0;
box-shadow: none;
color: var(--ab-text);
}
.cps-post-main.article-body :is(h3, h4, h5, h6)::before,
.cps-post-main.article-body :is(h2, h3, h4, h5, h6)::after,
body.article-body :is(h3, h4, h5, h6)::before,
body.article-body :is(h2, h3, h4, h5, h6)::after {
content: none;
}
/* JIN は `.cps-post-main h2,h3,h4,h5 { letter-spacing: 0 }` を持つので
エディター側も 0 に揃える */
.cps-post-main.article-body :is(h1, h2, h3, h4, h5, h6),
body.article-body :is(h1, h2, h3, h4, h5, h6) {
letter-spacing: 0;
}
.cps-post-main.article-body h5,
body.article-body h5 {
font-weight: 600 !important;
font-size: 16px;
line-height: 1.7;
}
/* エディター側は `strong { font-weight: 600 !important }` があるので !important で返す */
.cps-post-main.article-body strong,
body.article-body strong {
font-weight: 700 !important;
}
.cps-post-main.article-body hr,
body.article-body hr {
color: inherit;
}
/* --- リスト：JIN の黒丸＋白数字マーカーを消し、こちらのマーカーに統一 --- */
.cps-post-main.article-body :is(ul, ol),
body.article-body :is(ul, ol) {
margin: 0 0 37px;
padding: 0;
list-style: none;
}
/* `:is(ul, ol) li` にしているのは、親テーマの
`body.mceContentBody ul li` / `.cps-post-main ul li`（詳細度 0,1,3）に
勝つために要素をひとつ増やす必要があるため */
.cps-post-main.article-body :is(ul, ol) li,
body.article-body :is(ul, ol) li {
display: list-item;
position: relative;
margin: 0 0 12px;
padding: 0 0 0 26px;
font-size: 16px;
line-height: 32px;
}
.cps-post-main.article-body :is(ul, ol) li:last-child,
body.article-body :is(ul, ol) li:last-child {
margin-bottom: 0;
}
.cps-post-main.article-body :is(ul, ol) > li::after,
body.article-body :is(ul, ol) > li::after {
content: none;
}
/* JINのカスタマイザーは article.css より後ろのインライン