/* =====================================================================
   SWELL（WordPressテーマ）のブロック出力を、WPのCSSなしで再現するための互換CSS — 2026-10-22
   記事本文（.post__body）の中だけに効かせる。SWELL本体のCSSは読み込まない（PHP/WPに依存しないため）
   対象：キャプション枠・吹き出し・FAQ・ステップ・ボタン・マーカー・表・画像・リスト・見出しスタイル・ブログパーツ
   ===================================================================== */
.post__body h2 { font-size: 2.4rem; padding: 0.6em 0 0.6em 1em; border-left: 4px solid var(--c-brand); background: var(--c-bg2); margin-top: 2.4em; border-radius: 0 0.6rem 0.6rem 0; }
.post__body h3 { font-size: 2rem; padding-bottom: 0.4em; border-bottom: 2px solid var(--c-line); margin-top: 2em; }
.post__body h4 { font-size: 1.7rem; margin-top: 1.6em; padding-left: 0.8em; border-left: 3px solid var(--c-line); }
.post__body h2.is-style-section_ttl { text-align: center; border: 0; background: none; padding: 0 0 0.6em; position: relative; }
.post__body h2.is-style-section_ttl::after { content: ''; display: block; width: 4rem; height: 2px; background: var(--c-brand); margin: 0.6em auto 0; }
.post__body h3.is-style-onborder_ttl, .post__body h3.is-style-onborder_ttl2 { border-bottom: 1px solid var(--c-line); }
.post__body h3.is-style-onborder_ttl::before, .post__body h3.is-style-onborder_ttl2::before { content: ''; display: inline-block; width: 0.8em; height: 0.8em; background: var(--c-brand); border-radius: 50%; margin-right: 0.5em; vertical-align: baseline; }
.post__body p { line-height: 2; }
.post__body a { color: var(--c-blue); text-decoration: underline; text-underline-offset: 0.2em; }
.post__body strong { font-weight: 700; }
.post__body img { border-radius: 0.8rem; }
.post__body figure { margin: 0; }
.post__body figcaption { font-size: 1.2rem; color: var(--c-muted); text-align: center; margin-top: 0.6rem; }
.post__body .wp-block-image img { margin-inline: auto; }
.post__body .aligncenter, .post__body .has-text-align-center { text-align: center; }
.post__body .has-text-align-left { text-align: left; }
.post__body .has-text-align-right { text-align: right; }

/* リスト */
.post__body ul, .post__body ol { padding-left: 1.6em; }
.post__body ul { list-style: disc; }
.post__body ol { list-style: decimal; }
.post__body li { margin: 0.4em 0; }
.post__body li > ul, .post__body li > ol { margin-top: 0.4em; }
.post__body ul.is-style-num_circle, .post__body ol.is-style-num_circle { list-style: none; counter-reset: swlnum; padding-left: 0; }
.post__body .is-style-num_circle > li { counter-increment: swlnum; position: relative; padding-left: 2.4em; }
.post__body .is-style-num_circle > li::before { content: counter(swlnum); position: absolute; left: 0; top: 0.35em; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--c-brand); color: #fff; font-size: 0.85em; font-weight: 700; display: flex; align-items: center; justify-content: center; font-family: var(--f-num); }
.post__body ul.is-style-note_list { list-style: none; padding-left: 0; }
.post__body ul.is-style-note_list > li { position: relative; padding-left: 1.6em; font-size: 0.95em; color: var(--c-sub); }
.post__body ul.is-style-note_list > li::before { content: '※'; position: absolute; left: 0; }
.post__body ul.is-style-check_list, .post__body ul.is-style-good_list { list-style: none; padding-left: 0; }
.post__body ul.is-style-check_list > li, .post__body ul.is-style-good_list > li { position: relative; padding-left: 1.8em; }
.post__body ul.is-style-check_list > li::before, .post__body ul.is-style-good_list > li::before { content: '✓'; position: absolute; left: 0; color: var(--c-brand); font-weight: 700; }
.post__body ul.is-style-bad_list { list-style: none; padding-left: 0; }
.post__body ul.is-style-bad_list > li { position: relative; padding-left: 1.8em; }
.post__body ul.is-style-bad_list > li::before { content: '×'; position: absolute; left: 0; color: #d9342b; font-weight: 700; }
.post__body .-list-under-dashed > li { border-bottom: 1px dashed var(--c-line); padding-bottom: 0.4em; }

/* 表 */
.post__body .wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.post__body table { width: 100%; border-collapse: collapse; font-size: 0.92em; line-height: 1.6; }
.post__body th, .post__body td { border: 1px solid var(--c-line); padding: 0.7em 0.9em; vertical-align: top; }
.post__body th { background: var(--c-bg2); font-weight: 700; }
.post__body thead th { background: #111; color: #fff; border-color: #111; }
.post__body .is-thead-centered thead th, .post__body .is-all-centered td, .post__body .is-all-centered th { text-align: center; }
.post__body .min_width30_ table { min-width: 30rem; }
.post__body table tr:nth-child(even) td { background: #fafafa; }

/* 区切り線 */
.post__body hr, .post__body .wp-block-separator { border: 0; border-top: 1px solid var(--c-line); margin: 3em auto; width: 100%; }

/* マーカー・文字色・サイズ（SWELLのインラインスタイル） */
.post__body .swl-marker { background: linear-gradient(transparent 60%, rgba(255, 235, 59, 0.75) 60%); font-weight: 700; }
.post__body .swl-marker.mark_yellow { background: linear-gradient(transparent 60%, rgba(255, 235, 59, 0.75) 60%); }
.post__body .swl-marker.mark_orange { background: linear-gradient(transparent 60%, rgba(255, 171, 64, 0.55) 60%); }
.post__body .swl-marker.mark_blue { background: linear-gradient(transparent 60%, rgba(100, 181, 246, 0.5) 60%); }
.post__body .swl-marker.mark_green { background: linear-gradient(transparent 60%, rgba(129, 199, 132, 0.5) 60%); }
.post__body .has-swl-main-color, .post__body .has-swl-deep-01-color { color: var(--c-brand); }
.post__body .has-swl-deep-02-color { color: var(--c-blue); }
.post__body .has-swl-deep-03-color { color: #d9342b; }
.post__body .has-swl-deep-04-color { color: #b7791f; }
.post__body .has-swl-deep-01-background-color { background: var(--c-brand); color: #fff; }
.post__body .has-swl-deep-04-background-color { background: #f6a21e; color: #fff; }
.post__body .has-swl-pale-01-background-color { background: #e8f6ea; }
.post__body .has-swl-pale-02-background-color { background: #eaf1fb; }
.post__body .has-swl-pale-03-background-color { background: #fdeaea; }
.post__body .has-swl-pale-04-background-color { background: #fff7e0; }
.post__body .swl-bg-color, .post__body .swl-cell-bg { padding: 0.1em 0.3em; border-radius: 0.3em; }
.post__body .has-background { padding: 1.2em 1.4em; border-radius: 0.8rem; }
.post__body .u-fz-xs { font-size: 0.8em; } .post__body .u-fz-s { font-size: 0.9em; } .post__body .u-fz-l { font-size: 1.15em; } .post__body .u-fz-xl { font-size: 1.3em; }
.post__body .has-huge-font-size { font-size: 1.8em; line-height: 1.4; }
.post__body .u-mb-0 { margin-bottom: 0 !important; } .post__body .u-mb-10 { margin-bottom: 1rem !important; } .post__body .u-mb-ctrl + * { margin-top: 0 !important; }
.post__body .swl-inline-icon { display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; margin-right: 0.3em; }

/* キャプション枠（swell-block-capbox） */
.post__body .swell-block-capbox { border: 2px solid var(--c-brand); border-radius: 0.8rem; margin: 2em 0; overflow: hidden; }
.post__body .cap_box_ttl { background: var(--c-brand); color: #fff; font-weight: 700; padding: 0.5em 1.2em; font-size: 0.95em; }
.post__body .cap_box_content { padding: 1.2em 1.4em; }
.post__body .cap_box_content > * + * { margin-top: 1em; }
.post__body .cap_box.-blue, .post__body .swell-block-capbox.has-swl-deep-02-border-color { border-color: var(--c-blue); } .post__body .cap_box.-blue .cap_box_ttl { background: var(--c-blue); }
.post__body .cap_box.-red { border-color: #d9342b; } .post__body .cap_box.-red .cap_box_ttl { background: #d9342b; }
.post__body .cap_box.-yellow { border-color: #f6a21e; } .post__body .cap_box.-yellow .cap_box_ttl { background: #f6a21e; }
.post__body .cap_box.-gray { border-color: #999; } .post__body .cap_box.-gray .cap_box_ttl { background: #999; }

/* 吹き出し（c-balloon） */
.post__body .c-balloon { display: flex; gap: 1.2rem; align-items: flex-start; margin: 2em 0; }
.post__body .c-balloon.-bln-right { flex-direction: row-reverse; }
.post__body .c-balloon__icon { flex: none; width: 6.4rem; text-align: center; }
.post__body .c-balloon__iconImg { width: 6.4rem; height: 6.4rem; border-radius: 50%; object-fit: cover; border: 1px solid var(--c-line); margin: 0; }
.post__body .c-balloon__iconName { display: block; font-size: 1rem; color: var(--c-muted); margin-top: 0.3rem; line-height: 1.3; }
.post__body .c-balloon__body { position: relative; background: #fff; border: 1px solid #ccc; border-radius: 1rem; padding: 1.2em 1.4em; max-width: 72%; }
.post__body .c-balloon.-bln-right .c-balloon__body { background: var(--c-bg2); }
.post__body .c-balloon__text { font-size: 0.95em; line-height: 1.8; }
.post__body .c-balloon__text > * + * { margin-top: 0.8em; }
.post__body .c-balloon__shapes { display: none; }
.post__body .c-balloon__body::before { content: ''; position: absolute; top: 2rem; left: -0.9rem; border: 0.9rem solid transparent; border-right-color: #ccc; border-left: 0; }
.post__body .c-balloon__body::after { content: ''; position: absolute; top: 2.1rem; left: -0.7rem; border: 0.8rem solid transparent; border-right-color: #fff; border-left: 0; }
.post__body .-bln-right .c-balloon__body::before { left: auto; right: -0.9rem; border-right: 0; border-left: 0.9rem solid #ccc; }
.post__body .-bln-right .c-balloon__body::after { left: auto; right: -0.7rem; border-right: 0; border-left: 0.8rem solid var(--c-bg2); }
@media (max-width: 599px) { .post__body .c-balloon__icon { width: 4.8rem; } .post__body .c-balloon__iconImg { width: 4.8rem; height: 4.8rem; } .post__body .c-balloon__body { max-width: none; } }

/* FAQ（swell-block-faq） */
.post__body .swell-block-faq { margin: 2em 0; }
.post__body .swell-block-faq__item { border: 1px solid var(--c-line); border-radius: 0.8rem; margin-bottom: 1.2rem; overflow: hidden; }
.post__body .faq_q, .post__body .faq_a { position: relative; padding: 1.1em 1.4em 1.1em 4em; }
.post__body .faq_q { font-weight: 700; background: var(--c-bg2); }
.post__body .faq_q::before, .post__body .faq_a::before { position: absolute; left: 1.2em; top: 0.95em; width: 1.8em; height: 1.8em; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--f-num); font-weight: 700; font-size: 0.9em; }
.post__body .faq_q::before { content: 'Q'; background: var(--c-brand); color: #fff; }
.post__body .faq_a::before { content: 'A'; background: var(--c-blue); color: #fff; }
.post__body .faq_a > * + * { margin-top: 0.8em; }

/* ステップ（swell-block-step） */
.post__body .swell-block-step { margin: 2em 0; counter-reset: swlstep; }
.post__body .swell-block-step__item { position: relative; padding: 0 0 2.4em 5.2rem; }
.post__body .swell-block-step__item:not(:last-child)::before { content: ''; position: absolute; left: 1.9rem; top: 4rem; bottom: 0; border-left: 2px dashed var(--c-line); }
.post__body .swell-block-step__number { position: absolute; left: 0; top: 0; width: 4rem; height: 4rem; border-radius: 50%; background: var(--c-brand); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--f-num); font-weight: 700; line-height: 1; counter-increment: swlstep; }
.post__body .swell-block-step__number .__label { font-size: 0.8rem; letter-spacing: 0.1em; }
.post__body .swell-block-step__number::after { content: counter(swlstep); font-size: 1.5rem; }
.post__body .swell-block-step__title { font-family: var(--f-serif); font-weight: 600; font-size: 1.1em; padding-top: 0.6rem; }
.post__body .swell-block-step__body { margin-top: 0.6em; }
.post__body .swell-block-step__body > * + * { margin-top: 0.8em; }

/* ボタン（swell-block-button） */
.post__body .swell-block-button { text-align: center; margin: 2em 0; }
.post__body .swell-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: 0.6em; min-height: 5.2rem; padding: 0.4em 2.4em; border-radius: 100rem; background: #111; color: #fff !important; font-weight: 700; text-decoration: none !important; box-shadow: 0 0.3rem 0 #000; }
.post__body .swell-block-button.green_ .swell-block-button__link, .post__body .swell-block-button.is-style-btn_solid.green_ .swell-block-button__link { background: var(--c-brand); box-shadow: 0 0.3rem 0 #006b10; }
.post__body .swell-block-button.red_ .swell-block-button__link { background: #d9342b; box-shadow: 0 0.3rem 0 #a8241d; }
.post__body .swell-block-button.-size-l .swell-block-button__link { min-width: min(100%, 36rem); font-size: 1.1em; }
.post__body .swell-block-button__link .__icon { display: none; }

/* カラム・グループ */
.post__body .wp-block-columns { display: flex; gap: 2rem; flex-wrap: wrap; }
.post__body .wp-block-column { flex: 1 1 0; min-width: 24rem; }
.post__body .wp-block-group { }
.post__body .is-style-browser_mac { border: 1px solid var(--c-line); border-radius: 0.8rem; padding: 1.6rem; box-shadow: var(--shadow); }
.post__body .p-blogParts > * + * { margin-top: 1.8em; }

/* 埋め込み（YouTube等） */
.post__body .wp-block-embed { margin: 2em 0; }
.post__body .wp-block-embed iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 0.8rem; }
.post__body iframe { max-width: 100%; }
/* 引用 */
.post__body blockquote { margin: 2em 0; padding: 1.2em 1.6em; border-left: 4px solid var(--c-line); background: var(--c-bg2); color: var(--c-sub); border-radius: 0 0.6rem 0.6rem 0; }