/*
 * 旧サイト（WordPress・AFFINGER）から移した本文の装飾。
 * 文章は一字も変えず、テーマが付けていた class と inline の色指定に対して、こちらの CSS で見え方を付け直す。
 * 数値は 2026-09-05 に実サイト（https://dscoffeeroaster.com/grade-of-coffee-beans/）を Playwright で
 * 計測した値（getComputedStyle）。色・余白・字の大きさは元と同じにする。
 *   本文 17px / 行送り 34px / 文字色 #333 ／ 本文幅 858px
 *   h2 = 茶 #a58b6a の帯に白文字 25px ／ h3 = 赤いチェック印＋ #592000 の下線 20px ／ h4 = 16px 太字（地は inline の色）
 *   ○リスト（is-style-st-circle）= 橙 #dd8500 の点 8.5px ／ 丸番号（is-style-st-maruno）= えんじ #800000 の丸 25.5px
 *   タイトル付きの枠: freebox（inline の色）／ st-mybox（灰 #757575 の 2px 枠、題は枠線の上に白い影で乗る）
 *   ふきだし = 灰 #f9f9f9・角丸 7px・尾なし ／ 表 = 縞 #f0f0f0・見出し #fafafa ／ 引用 = 灰 #e8e8e8
 *   マーカー = 黄 #fff9c4（-s）と桃 #ffc4c4（-s-b）を下 30% に ／ 目次 = 灰 #f9f9f9・枠 #aaa・番号付き
 */

/* 暗い地のページ（店主）では文字色を地に合わせる。紙の地（記事）では元記事と同じ #333 */
.article-body { --art-text: var(--color-ink); }
[data-theme="paper"] .article-body { --art-text: #333; }
/* 書体は旧サイトと同じ端末の標準ゴシック（Windows ではメイリオ、Mac ではヒラギノ）。Web フォントより読み慣れた字で読む */
.article, .article-body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Hiragino Kaku Gothic ProN", Meiryo, "メイリオ", sans-serif; font-weight: 400; }
.article-body { --art-h2: #a58b6a; --art-h3-line: #592000; --art-check: #d32f2f; --art-maroon: #800000; --art-orange: #dd8500; --art-gray: #f9f9f9; --art-gray-2: #f0f0f0; --art-line: #ddd; --art-link: #2f6a9e; color: var(--art-text); font-size: 17px; line-height: 2; word-break: normal; }
/* 本文は語や文節で揃えず自然に折る（元記事と同じ。文節折りだと右端がガタつく）。リンクの青は元の #4682b4 より少し濃くして白地で 4.5:1 を満たす。添え書きは 14px 未満にしない（検査の基準） */
.article-body p { margin: 0 0 20px; }
.article-body a { color: var(--art-link); text-decoration: underline; }
.article-body strong, .article-body b { font-weight: 700; }

/* ---- 見出し ---- */
.article-body h2 { margin: 20px 0; padding: 10px 20px; background: var(--art-h2); color: #fff; font-size: 25px; line-height: 40px; font-weight: 700; }
.article-body h3 { position: relative; margin: 20px 0; padding: 10px 20px 10px 55px; border-bottom: 2px solid var(--art-h3-line); color: var(--art-text); font-size: 20px; line-height: 30px; font-weight: 700; }
.article-body h3::before { content: "✔"; position: absolute; left: 15px; top: 8px; color: var(--art-check); font-size: 26px; line-height: 30px; }
.article-body h4 { margin: 20px 0; padding: 10px 15px; font-size: 16px; line-height: 26px; font-weight: 700; }
.article-body h4.has-white-background-color { background: #fff; }
.article-body h5 { margin: 20px 0 10px; font-size: 16px; font-weight: 700; }
.article-body .has-very-dark-gray-color { color: #313131; }
.article-body .has-white-color { color: #fff; }

/* ---- 強調 ---- */
.article-body .st-mymarker-s { background: linear-gradient(transparent 70%, #fff9c4 0%); font-weight: 700; }
.article-body .st-mymarker-s-b { background: linear-gradient(transparent 70%, #ffc4c4 0%); font-weight: 700; }
.article-body .oomozi { font-size: 1.25em; font-weight: 700; }
.article-body .komozi { font-size: .85em; }
/* テーマのアイコン（svg）は落としてあるので何も出さない */
.article-body i[class^="st-"] { display: none; }

/* ---- 画像 ---- */
.article-body img { height: auto; max-width: 100%; }
.article-body figure { margin: 0 0 20px; }
.article-body figure.aligncenter, .article-body .wp-block-image { text-align: center; }
.article-body figure.aligncenter img, .article-body .wp-block-image img { margin-inline: auto; }
.article-body .is-style-rounded img { border-radius: 12px; }
.article-body .wp-block-image figcaption { margin: 6px 0 0; color: #757575; font-size: 14px; line-height: 1.4; text-align: center; }
.article-body .alignwide, .article-body .alignfull { max-width: 100%; }

/* ---- 段落のスタイル（AFFINGER の段落ブロック） ---- */
.article-body p.is-style-st-paragraph-link { display: flex; align-items: center; gap: 10px; margin: 0 0 40px; padding: 14.4px 17.28px; border-radius: 5px; background: #fafafa; font-size: 14.4px; line-height: 21.6px; }
.article-body p.is-style-st-paragraph-link::before { content: "🔗"; flex: 0 0 auto; padding-right: 11.52px; border-right: 1px solid var(--art-line); color: #c2c2c2; font-size: 14px; }
.article-body p.is-style-st-paragraph-point, .article-body p.is-style-st-paragraph-bigginer, .article-body p.is-style-st-paragraph-kaiwa-b { position: relative; padding: 14.4px 17.28px 14.4px 44px; border-radius: 5px; background: #fafafa; }
.article-body p.is-style-st-paragraph-point::before, .article-body p.is-style-st-paragraph-bigginer::before, .article-body p.is-style-st-paragraph-kaiwa-b::before { content: "●"; position: absolute; left: 17px; top: 14px; color: var(--art-orange); font-size: .8em; }

/* ---- リスト ---- */
.article-body ul, .article-body ol { margin: 0 0 20px 16px; padding: 0 0 0 16px; }
.article-body li { padding: 4.25px 0; }
.article-body ul ul, .article-body ol ul { margin: 0 0 0 17px; padding: 5px 0 0 17px; }
/* ○リスト: 橙の点 */
.article-body ul.is-style-st-circle, .article-body ol.is-style-st-circle, .article-body ul.is-style-st-circle-border, .article-body ol.is-style-st-circle-border { list-style: none; margin-left: 0; padding-left: 0; }
.article-body ul.is-style-st-circle > li, .article-body ol.is-style-st-circle > li, .article-body ul.is-style-st-circle-border > li, .article-body ol.is-style-st-circle-border > li { position: relative; padding: 4.25px 0 4.25px 34px; }
.article-body ul.is-style-st-circle-border > li, .article-body ol.is-style-st-circle-border > li { padding-top: 8.5px; padding-bottom: 8.5px; border-bottom: 1px dotted var(--art-line); }
.article-body ul.is-style-st-circle > li::before, .article-body ol.is-style-st-circle > li::before, .article-body ul.is-style-st-circle-border > li::before, .article-body ol.is-style-st-circle-border > li::before { content: ""; position: absolute; left: 12px; top: calc(4.25px + 13px); width: 8.5px; height: 8.5px; border-radius: 50%; background: var(--art-orange); }
.article-body ul.is-style-st-circle-border > li::before, .article-body ol.is-style-st-circle-border > li::before { top: calc(8.5px + 13px); }
/* 丸番号: えんじの丸に白い数字 */
.article-body ol.is-style-st-maruno, .article-body ul.is-style-st-maruno { list-style: none; margin-left: 0; padding-left: 0; counter-reset: st-section; }
.article-body ol.is-style-st-maruno > li, .article-body ul.is-style-st-maruno > li { position: relative; padding: 4.25px 0 4.25px 38.25px; counter-increment: st-section; }
.article-body ol.is-style-st-maruno > li::before, .article-body ul.is-style-st-maruno > li::before { content: counter(st-section); position: absolute; left: 0; top: 8.5px; width: 25.5px; height: 25.5px; border-radius: 50%; background: var(--art-maroon); color: #fff; font-size: 14px; line-height: 25.5px; text-align: center; font-weight: 700; }
.article-body ul.is-style-st-square-checkbox { list-style: none; margin-left: 0; padding-left: 0; }
.article-body ul.is-style-st-square-checkbox > li { position: relative; padding-left: 34px; }
.article-body ul.is-style-st-square-checkbox > li::before { content: "✔"; position: absolute; left: 8px; top: 4px; color: var(--art-check); }
.article-body ul.has-background { margin-left: 0; padding: 24px 32px 32px 24px; }
.article-body ul.has-background > li { padding-left: 34px; }
.article-body .has-very-light-gray-background-color { background-color: #fafafa; }

/* ---- タイトル付きの枠。色・枠線・角丸は元記事の inline style（サニタイズで通す）が効く ---- */
.article-body .freebox { position: relative; margin: 0 0 20px; padding: 0 0 10px; border: 1px solid var(--art-maroon); border-radius: 0 10px 10px 10px; background: #fff; font-size: 14px; line-height: 24px; }
.article-body .freebox .p-entry-f { display: inline-block; margin: 0; padding: 3px 20px; background: var(--art-maroon); color: #fff; font-size: 15px; line-height: 27px; }
.article-body .freebox .freebox-title-text { color: #fff; }
.article-body .free-inbox { padding: 10px 15px; }
.article-body .free-inbox > :last-child, .article-body .st-in-mybox > :last-child { margin-bottom: 0; }
.article-body .freebox .p-free, .article-body .free-inbox p { margin: 0 0 10px; font-size: 17px; line-height: 34px; }
.article-body .free-inbox ul, .article-body .free-inbox ol, .article-body .st-in-mybox ul, .article-body .st-in-mybox ol { margin-bottom: 0; }
.article-body .st-mybox { position: relative; margin: 25px 0 20px; padding: 0 20px; border: 2px solid #757575; border-radius: 5px; background: #fff; }
.article-body .st-mybox-title { position: absolute; top: -7.5px; left: 10px; margin: 0; padding: 0 10px 0 5px; color: var(--art-maroon); font-size: 15px; line-height: 15px; font-weight: 700; background: linear-gradient(0deg, #fff 0%, #fff 55%, transparent 55%); text-shadow: 3px 0 0 #fff, -3px 0 0 #fff, 0 3px 0 #fff, 0 -3px 0 #fff, 2px 2px 0 #fff, -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff; }
.article-body .st-mybox-title::before { content: "✔"; margin-right: 4px; color: inherit; }
.article-body .st-in-mybox { padding: 20px 0; }
.article-body .st-in-mybox p { margin: 0 0 10px; font-size: 17px; line-height: 34px; }
.article-body .is-style-st-group-line { padding: 0 0 0 20px; border-left: 1px solid #eee; }
.article-body .wp-block-st-blocks-midashi-box > :first-child { margin-top: 0; }

/* ---- ふきだし（尾は無い。顔は 80px、ふきだしは灰の角丸） ---- */
.article-body .st-kaiwa-box { display: flex; align-items: flex-start; margin: 0 0 20px; }
.article-body .st-kaiwa-face, .article-body .st-kaiwa-face2 { flex: 0 0 80px; width: 80px; text-align: center; }
.article-body .st-kaiwa-face img, .article-body .st-kaiwa-face2 img { display: block; width: 80px; height: 80px; margin: 0 auto; border-radius: 60px; object-fit: cover; }
.article-body .st-kaiwa-face-name, .article-body .st-kaiwa-face-name2 { color: #616161; font-size: 14px; line-height: 1.5; }
.article-body .st-kaiwa-area, .article-body .st-kaiwa-area2 { flex: 1 1 auto; min-width: 0; padding-top: 10px; }
.article-body .st-kaiwa-hukidashi { margin: 0 0 0 20px; padding: 15px 20px; border-radius: 7px; background: var(--art-gray); }
.article-body .st-kaiwa-hukidashi2 { margin: 0 20px 0 0; padding: 15px 20px; border-radius: 7px; background: var(--art-gray); }
.article-body .st-kaiwa-hukidashi-content p { margin: 0; }
.article-body .st-kaiwa-hukidashi-content p + p { margin-top: 10px; }

/* ---- 表（縞・見出しは薄い灰・罫線は無い） ---- */
.article-body figure.wp-block-table { margin: 0 0 20px; overflow-x: auto; }
.article-body table { width: 100%; margin: 0 0 20px; border-collapse: collapse; background: rgb(255 255 255 / 58%); }
.article-body table.has-fixed-layout { table-layout: fixed; }
.article-body th { padding: 7.2px; background: #fafafa; font-size: 14.4px; line-height: 24px; font-weight: 400; text-align: left; vertical-align: top; }
.article-body td { padding: 10px; font-size: 15px; line-height: 27px; text-align: left; vertical-align: top; }
.article-body .is-style-stripes tbody tr:nth-child(odd) { background: var(--art-gray-2); }
.article-body .wp-block-table figcaption { margin: -10px 0 20px; color: #757575; font-size: 14px; text-align: center; }

/* ---- 二段組み・メディアと文章 ---- */
.article-body .wp-block-columns { display: flex; gap: 2em; align-items: flex-start; margin: 0 0 28px; }
.article-body .wp-block-column { flex: 1 1 0; min-width: 0; }
.article-body .wp-block-column > :first-child { margin-top: 0; }
.article-body .wp-block-media-text { display: grid; grid-template-columns: 50% 1fr; gap: 0; align-items: center; margin: 0 0 20px; }
.article-body .wp-block-media-text.has-media-on-the-right { grid-template-columns: 1fr 50%; }
.article-body .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media { order: 2; }
.article-body .wp-block-media-text__media { margin: 0; }
.article-body .wp-block-media-text__content { padding: 0 8%; }
.article-body .wp-block-media-text__content > :first-child { margin-top: 0; }
.article-body .wp-block-media-text__content > :last-child { margin-bottom: 0; }
.article-body .wp-block-group { margin: 0 0 20px; }
@media (max-width: 700px) {
  .article-body .wp-block-columns { flex-direction: column; gap: 0; }
  .article-body .wp-block-column { flex-basis: auto !important; }
  /* inline の grid-template-columns（サニタイズで通している）より優先する */
  .article-body .wp-block-media-text, .article-body .wp-block-media-text.has-media-on-the-right { grid-template-columns: 1fr !important; }
  .article-body .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media { order: 0; }
  .article-body .wp-block-media-text__content { padding: 8% 0 0; }
  .article-body .st-kaiwa-face, .article-body .st-kaiwa-face2 { flex-basis: 60px; width: 60px; }
  .article-body .st-kaiwa-face img, .article-body .st-kaiwa-face2 img { width: 60px; height: 60px; }
  .article-body .st-kaiwa-hukidashi { margin-left: 10px; }
  .article-body .st-kaiwa-hukidashi2 { margin-right: 10px; }
}
/* 空白ブロック。高さは元記事の inline style（height: 30px 等）が効く。無いときの既定 */
.article-body .wp-block-spacer { height: 30px; margin: 0 0 20px; }

/* ---- 引用（灰の箱、左上に引用符） ---- */
.article-body blockquote { position: relative; margin: 20px 0; padding: 50px 20px 20px; background: #e8e8e8; color: var(--art-text); font-size: 16px; }
.article-body blockquote::before { content: "\201C"; position: absolute; left: 20px; top: 20px; color: #e0e0e0; font-size: 40px; line-height: 1; font-family: Georgia, serif; }
.article-body blockquote > :last-child { margin-bottom: 0; }
.article-body cite { display: block; margin: -10px 0 0; color: #616161; font-size: 14.4px; font-style: normal; } /* 元は #9e9e9e（2.2:1）。灰の地で読める濃さに */

/* ---- 目次（Easy Table of Contents）: 灰の箱に番号付き ---- */
.article-body [class*="ez-toc-v"] { margin: 0 0 16px; padding: 10px 20px 10px 10px; border: 1px solid #aaa; border-radius: 4px; background: var(--art-gray); box-shadow: 0 1px 1px rgb(0 0 0 / 5%); }
.article-body .ez-toc-title { margin: 0 0 6px; font-size: 16px; line-height: 1.45; font-weight: 700; }
.article-body .ez-toc-title-toggle, .article-body .ez-toc-toggle, .article-body .ez-toc-icon-toggle-span, .article-body .eztoc-hide { display: none; }
.article-body .ez-toc-list, .article-body .ez-toc-list ul { list-style: none; margin: 0; padding: 0; font-size: 16px; line-height: 24px; counter-reset: toc; }
.article-body .ez-toc-list ul { margin-left: 24px; font-size: 15.2px; }
.article-body .ez-toc-list li { padding: 0; counter-increment: toc; }
.article-body .ez-toc-list li::before { content: counter(toc) ". "; color: #444; font-weight: 500; }
.article-body .ez-toc-list a { color: #444; font-weight: 500; text-decoration: none; }
.article-body .ez-toc-list a:hover { text-decoration: underline; }

/* ---- 関連記事（shortcode-kanren） ---- */
.article-body .kanren { margin: 0 0 20px; padding: 20px 0 0; }
.article-body .kanren dl { display: grid; grid-template-columns: 200px 1fr; gap: 15px; margin: 0 0 20px; padding: 0 0 20px; border-bottom: 1px dotted var(--art-line); }
.article-body .kanren dt, .article-body .kanren dd { margin: 0; }
.article-body .kanren .kanren-t { margin: 0 0 5px; padding-right: 20px; font-size: 15px; line-height: 27px; font-weight: 700; }
.article-body .kanren .kanren-t a { color: var(--art-text); font-size: 16px; line-height: 26px; text-decoration: none; }
.article-body .kanren .blog_info, .article-body .kanren .smanone, .article-body .kanren .st-excerpt { font-size: 14.4px; line-height: 1.7; color: #555; }
.article-body .kanren .blog_info a { color: var(--art-text); }
.article-body .st-catgroup { margin: 0; }
.article-body .st-catgroup .catname { display: inline-block; margin: 5px 0 0; padding: 6px 8px; border-radius: 2px; background: #f3f3f3; color: var(--art-text); font-size: 14px; line-height: 1.5; }
.article-body .st-catgroup a { text-decoration: none; }
@media (max-width: 700px) { .article-body .kanren dl { grid-template-columns: 1fr; } }

.article-body .clearfix::after { content: ""; display: table; clear: both; }
/* 旧サイトの SNS アイコンのブロックは URL が未設定（https://#）のまま残っていたので出さない（文章の照合のため markup は残す） */
.article-body .wp-block-social-links { display: none; }