/* ブログ記事の部品（本体サイトに統合した記事用）2026-10-17
   見た目は SWELL で作った記事の実測値をもとに、本体サイトの色（紺 #263743・コーラル）に寄せている */
.hh-article-body { --hh-navy: #263743; --hh-navy-deep: #04384c; --hh-coral: #e8794a; --hh-text: #333; --hh-gray: hsla(0,0%,78%,.15); --hh-border: hsla(0,0%,78%,.5); }

/* 本文の基本 */
.hh-article-body .post_content { color: var(--hh-text); font-size: 16px; line-height: 1.9; font-weight: 500; }
.hh-article-body .post_content > * { margin-bottom: 2em; }
.hh-article-body .post_content p { margin: 0 0 2em; }
.hh-article-body .post_content a { color: #1176d4; }
.hh-article-body .post_content strong { font-weight: 700; }
.hh-article-body .post_content h2 { background: var(--hh-navy-deep); color: #fff; font-size: 1.4em; font-weight: 700; line-height: 1.4; padding: .75em 1em; margin: 4em -16px 2em; border-radius: 0; }
.hh-article-body .post_content h3 { font-size: 1.3em; font-weight: 700; line-height: 1.4; padding: 0 .5em .5em; margin: 3em 0 2em; border-bottom: 2px solid var(--hh-navy-deep); }
.hh-article-body .post_content h4 { font-size: 1.1em; font-weight: 700; margin: 2.5em 0 1.5em; padding-left: .6em; border-left: 4px solid var(--hh-navy-deep); }
.hh-article-body .post_content .has-large-font-size { font-size: 20px; line-height: 1.9; margin-bottom: 2.5em; }
.hh-article-body .post_content ul, .hh-article-body .post_content ol { padding-left: 1.5em; }
.hh-article-body .post_content li { margin: 4px 0; }
.hh-article-body .post_content img { max-width: 100%; height: auto; }
.hh-article-body .post_content figure { margin-left: 0; margin-right: 0; }
.hh-article-body .post_content .wp-block-image.aligncenter { text-align: center; }
.hh-article-body .post_content .wp-block-image figcaption, .hh-article-body .post_content .blocks-gallery-caption { font-size: 12.8px; color: #666; text-align: center; margin-top: .5em; }
.hh-article-body .post_content .is-style-shadow img { box-shadow: 0 4px 16px rgba(0,0,0,.12); }
.hh-article-body .post_content .wp-block-spacer { margin-bottom: 0; }

/* マーカー */
.swl-marker.mark_yellow { background: linear-gradient(transparent 64%, #fcf69f 0%); padding: 0 2px; font-weight: 700; }
.swl-marker.mark_blue { background: linear-gradient(transparent 64%, #b7e3ff 0%); padding: 0 2px; font-weight: 700; }

/* 表 */
.hh-article-body .post_content table { border-collapse: collapse; width: 100%; font-size: 16px; line-height: 1.6; }
.hh-article-body .post_content th, .hh-article-body .post_content td { border: 1px solid #dcdcdc; padding: 8px 12px; }
.hh-article-body .post_content th { background: var(--hh-navy-deep); color: #fff; font-weight: 700; }
.hh-article-body .post_content .wp-block-table { overflow-x: auto; }

/* 引用 */
.hh-article-body .post_content blockquote { background: var(--hh-gray); padding: 24px 32px 24px 48px; position: relative; border: 0; margin: 0 0 2em; }
.hh-article-body .post_content blockquote::before { content: "\201C"; position: absolute; left: 16px; top: 8px; font-size: 40px; color: #bbb; line-height: 1; font-family: Georgia, serif; }
.hh-article-body .post_content blockquote p { margin: 0; }
.hh-article-body .post_content blockquote cite { display: block; font-size: 12.8px; color: #666; margin-top: .8em; font-style: normal; }
.hh-article-body .post_content blockquote cite::before { content: "— "; }

/* 段落スタイル（SWELL と同じクラス名） */
.hh-article-body .post_content .is-style-icon_good, .hh-article-body .post_content .is-style-icon_bad, .hh-article-body .post_content .is-style-icon_announce, .hh-article-body .post_content .is-style-icon_point { position: relative; padding: 16px 16px 16px 68px; border-radius: 2px; line-height: 1.9; }
.hh-article-body .post_content .is-style-icon_good::before, .hh-article-body .post_content .is-style-icon_bad::before, .hh-article-body .post_content .is-style-icon_announce::before, .hh-article-body .post_content .is-style-icon_point::before { font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 22px; top: 50%; transform: translateY(-50%); font-size: 22px; }
.hh-article-body .post_content .is-style-icon_good::after, .hh-article-body .post_content .is-style-icon_bad::after, .hh-article-body .post_content .is-style-icon_announce::after, .hh-article-body .post_content .is-style-icon_point::after { content: ""; position: absolute; left: 52px; top: 25%; height: 50%; border-right: 1px solid; opacity: .4; }
.hh-article-body .post_content .is-style-icon_good { background: #ecffe9; } .hh-article-body .post_content .is-style-icon_good::before { content: "\f164"; color: #3cd250; } .hh-article-body .post_content .is-style-icon_good::after { border-color: #3cd250; }
.hh-article-body .post_content .is-style-icon_bad { background: #eafaff; } .hh-article-body .post_content .is-style-icon_bad::before { content: "\f165"; color: #4b73eb; } .hh-article-body .post_content .is-style-icon_bad::after { border-color: #4b73eb; }
.hh-article-body .post_content .is-style-icon_announce { background: #fff5f0; } .hh-article-body .post_content .is-style-icon_announce::before { content: "\f0a1"; color: #ffa537; } .hh-article-body .post_content .is-style-icon_announce::after { border-color: #ffa537; }
.hh-article-body .post_content .is-style-icon_point { background: #fff8ec; } .hh-article-body .post_content .is-style-icon_point::before { content: "\f0eb"; color: #ffa639; } .hh-article-body .post_content .is-style-icon_point::after { border-color: #ffa639; }
.hh-article-body .post_content .is-style-big_icon_point { position: relative; border: 2px solid #ffa639; padding: 40px 32px 32px; margin: 40px 0 2em; }
.hh-article-body .post_content .is-style-big_icon_point::before { content: "\f0eb"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 15px; top: -21px; width: 40px; height: 40px; border-radius: 50%; background: #ffa639; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.hh-article-body .post_content .is-style-bg_stripe { background-image: linear-gradient(-45deg, transparent 25%, hsla(0,0%,78%,.15) 25%, hsla(0,0%,78%,.15) 50%, transparent 50%, transparent 75%, hsla(0,0%,78%,.15) 75%, hsla(0,0%,78%,.15)); background-size: 8px 8px; padding: 24px; }

/* リストのスタイル */
.hh-article-body .post_content ol.is-style-num_circle { list-style: none; counter-reset: li; padding-left: 4px; }
.hh-article-body .post_content ol.is-style-num_circle li { position: relative; padding-left: 32px; counter-increment: li; }
.hh-article-body .post_content ol.is-style-num_circle li::before { content: counter(li); position: absolute; left: 0; top: .1em; width: 22px; height: 22px; border-radius: 50%; background: var(--hh-navy-deep); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.hh-article-body .post_content ul.is-style-check_list { list-style: none; padding-left: 0; }
.hh-article-body .post_content ul.is-style-check_list li { position: relative; padding-left: 26px; }
.hh-article-body .post_content ul.is-style-check_list li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 0; top: 0; color: var(--hh-navy-deep); }

/* 吹き出し */
.hh-balloon { display: flex; align-items: flex-start; gap: 16px; margin: 0 0 2em; }
.hh-balloon.-right { flex-direction: row-reverse; }
.hh-balloon__icon { flex: 0 0 80px; text-align: center; }
.hh-balloon__img { width: 80px; height: 80px; object-fit: cover; border-radius: 6px; display: block; margin: 0 auto; }
.hh-balloon__name { display: block; font-size: 11px; color: #666; margin-top: 4px; line-height: 1.3; }
.hh-balloon__text { position: relative; flex: 0 1 auto; max-width: 560px; background: #e2f6ff; border-radius: 8px; padding: 16px; line-height: 1.6; }
.hh-balloon__text p { margin: 0 !important; }
.hh-balloon__text p + p { margin-top: .8em !important; }
.hh-balloon__text::before { content: ""; position: absolute; top: 20px; border: 8px solid transparent; }
.hh-balloon.-left .hh-balloon__text::before { left: -16px; border-right-color: #e2f6ff; }
.hh-balloon.-right .hh-balloon__text::before { right: -16px; border-left-color: #e2f6ff; }
.hh-balloon.-red .hh-balloon__text { background: #fff2f0; } .hh-balloon.-red.-left .hh-balloon__text::before { border-right-color: #fff2f0; } .hh-balloon.-red.-right .hh-balloon__text::before { border-left-color: #fff2f0; }
.hh-balloon.-green .hh-balloon__text { background: #effae9; } .hh-balloon.-green.-left .hh-balloon__text::before { border-right-color: #effae9; } .hh-balloon.-green.-right .hh-balloon__text::before { border-left-color: #effae9; }
.hh-balloon.-yellow .hh-balloon__text { background: #fff9e3; } .hh-balloon.-yellow.-left .hh-balloon__text::before { border-right-color: #fff9e3; } .hh-balloon.-yellow.-right .hh-balloon__text::before { border-left-color: #fff9e3; }
.hh-balloon.-gray .hh-balloon__text { background: #f1f1f1; } .hh-balloon.-gray.-left .hh-balloon__text::before { border-right-color: #f1f1f1; } .hh-balloon.-gray.-right .hh-balloon__text::before { border-left-color: #f1f1f1; }

/* FAQ */
.hh-faq { margin: 0 0 2em; border-top: 1px solid var(--hh-border); }
.hh-faq__item { border-bottom: 1px solid var(--hh-border); }
.hh-faq__q, .hh-faq__a { position: relative; padding: 16px 16px 16px 48px; margin: 0; }
.hh-faq__q { font-weight: 700; line-height: 1.5; }
.hh-faq__a { line-height: 1.6; }
.hh-faq__a p { margin: 0 !important; } .hh-faq__a p + p { margin-top: .8em !important; }
.hh-faq__q::before, .hh-faq__a::before { position: absolute; left: 8px; top: 12px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-family: Barlow, Arial, sans-serif; font-size: 18px; }
.hh-faq__q::before { content: "Q"; color: var(--hh-navy-deep); }
.hh-faq__a::before { content: "A"; color: var(--hh-coral); }

/* 手順 */
.hh-step { margin: 0 0 2em; counter-reset: step; }
.hh-step__item { position: relative; padding: 0 0 48px 64px; counter-increment: step; }
.hh-step__item::before { content: ""; position: absolute; left: 23px; top: 48px; bottom: 0; border-left: 2px solid var(--hh-border); }
.hh-step__item:last-child { padding-bottom: 8px; } .hh-step__item:last-child::before { display: none; }
.hh-step__num { position: absolute; left: 0; top: 0; width: 48px; height: 48px; border-radius: 50%; background: var(--hh-navy-deep); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.hh-step__label { font-size: 9px; font-family: Barlow, Arial, sans-serif; letter-spacing: .05em; }
.hh-step__num::after { content: counter(step); font-size: 18px; font-weight: 700; font-family: Barlow, Arial, sans-serif; }
.hh-step__title { font-size: 20px; font-weight: 700; line-height: 1.8; min-height: 48px; display: flex; align-items: center; }
.hh-step__body { margin-top: 12px; } .hh-step__body p { margin-bottom: 1em; }

/* 記事カード */
.hh-card { margin: 0 0 2em; max-width: 880px; }
.hh-card__inner { position: relative; display: flex; gap: 16px; align-items: center; border: 1px solid var(--hh-border); border-radius: 8px; padding: 25px 24px 24px; color: inherit; text-decoration: none; background: #fff; transition: box-shadow .2s; }
.hh-card__inner:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.hh-card__caption { position: absolute; top: -12px; left: 12px; background: #fdfdfd; border: 1px solid var(--hh-border); border-radius: 2px; padding: 0 6px; font-size: 12px; line-height: 22px; color: #666; }
.hh-card__thumb { flex: 0 0 160px; width: 160px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; }
.hh-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hh-card__body { flex: 1 1 auto; min-width: 0; }
.hh-card__title { display: block; font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--hh-navy); }
.hh-card__excerpt { display: block; font-size: 12.8px; color: #666; line-height: 1.4; margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hh-card__draft { color: #c23e46; font-size: 12px; margin-left: 6px; }

/* ボタン（SWELL のボタンブロックの見た目） */
.hh-article-body .post_content .wp-block-button__link { background: var(--hh-coral); color: #fff; border-radius: 9999px; padding: 12px 24px; font-weight: 700; text-decoration: none; }
.hh-article-body .post_content .is-style-outline .wp-block-button__link { background: transparent; color: var(--hh-coral); border: 2px solid var(--hh-coral); }

/* ギャラリー（core/gallery） */
.hh-article-body .post_content .wp-block-gallery { display: flex; flex-wrap: wrap; gap: 8px; }
.hh-article-body .post_content .wp-block-gallery.columns-2 > figure { flex: 0 0 calc(50% - 4px); margin: 0; }
.hh-article-body .post_content .wp-block-gallery.columns-3 > figure { flex: 0 0 calc(33.333% - 6px); margin: 0; }
.hh-article-body .post_content .wp-block-gallery.is-cropped img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.hh-article-body .post_content .wp-block-gallery .blocks-gallery-caption { flex: 0 0 100%; }

@media (max-width: 768px) {
  .hh-article-body .post_content h2 { margin-left: 0; margin-right: 0; font-size: 1.25em; }
  .hh-balloon__icon { flex-basis: 56px; } .hh-balloon__img { width: 56px; height: 56px; }
  .hh-balloon__text { max-width: none; }
  .hh-card__thumb { flex-basis: 110px; width: 110px; }
  .hh-card__inner { padding: 20px 14px 14px; }
  .hh-step__item { padding-left: 56px; } .hh-step__num { width: 44px; height: 44px; } .hh-step__item::before { left: 21px; }
  .hh-article-body .post_content .is-style-icon_good, .hh-article-body .post_content .is-style-icon_bad, .hh-article-body .post_content .is-style-icon_announce, .hh-article-body .post_content .is-style-icon_point { padding: 14px 14px 14px 44px; }
  .hh-article-body .post_content .is-style-icon_good::before, .hh-article-body .post_content .is-style-icon_bad::before, .hh-article-body .post_content .is-style-icon_announce::before, .hh-article-body .post_content .is-style-icon_point::before { left: 12px; font-size: 18px; }
  .hh-article-body .post_content .is-style-icon_good::after, .hh-article-body .post_content .is-style-icon_bad::after, .hh-article-body .post_content .is-style-icon_announce::after, .hh-article-body .post_content .is-style-icon_point::after { display: none; }
  .hh-article-body .post_content .wp-block-gallery.columns-3 > figure { flex-basis: calc(50% - 4px); }
}

/* 画像の幅（SWELL の幅指定をクラスに置き換えたもの） */
.hh-article-body .post_content .wp-block-image.hh-w70 { width: 70%; margin-left: auto; margin-right: auto; }
.hh-article-body .post_content .wp-block-image.hh-w70 img { width: 100%; }
.hh-article-body .post_content .wp-block-image.hh-w100 { width: 100%; }
.hh-article-body .post_content .wp-block-image.hh-w100 img { width: 100%; }
.hh-article-body .post_content .wp-block-image.hh-w480px { max-width: 480px; margin-left: auto; margin-right: auto; }
.hh-article-body .post_content .wp-block-image.hh-w480px img { width: 100%; }
.hh-article-body .post_content .wp-block-image.hh-w260px { max-width: 260px; margin-left: auto; margin-right: auto; }
@media (max-width: 768px) { .hh-article-body .post_content .wp-block-image.hh-w70 { width: 100%; } }

/* 目次 */
.hh-toc { margin: 0 auto 3em; max-width: 800px; padding: 28px 32px; background-image: linear-gradient(-45deg, transparent 25%, hsla(0,0%,78%,.15) 25%, hsla(0,0%,78%,.15) 50%, transparent 50%, transparent 75%, hsla(0,0%,78%,.15) 75%, hsla(0,0%,78%,.15)); background-size: 8px 8px; border-bottom: 4px double hsla(0,0%,78%,.5); }
.hh-toc__title { text-align: center; font-size: 18px; font-weight: 700; margin: 0 0 14px; color: #263743; }
.hh-toc__title::before { content: "\f03a"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-right: 8px; color: #e8794a; }
.hh-toc__list { margin: 0; padding-left: 1.4em; counter-reset: toc; list-style: none; }
.hh-toc__list li { counter-increment: toc; position: relative; margin: 6px 0; line-height: 1.6; }
.hh-toc__list li::before { content: counter(toc) "."; position: absolute; left: -1.4em; color: #e8794a; font-weight: 700; font-family: Barlow, Arial, sans-serif; }
.hh-toc__list a { color: #263743; text-decoration: none; border-bottom: 1px solid hsla(0,0%,78%,.6); }
.hh-toc__list a:hover { border-bottom-color: #263743; }
.hh-article-body .post_content h2 { scroll-margin-top: 90px; }
@media (max-width: 768px) { .hh-toc { padding: 20px 18px; } }

/* 2026-10-17 オーナー指示: 文字を全体に1段ずつ細く（強弱の関係はそのまま） */
.hh-article-body .post_content { font-weight: 400; }
.hh-article-body .post_content strong, .hh-article-body .post_content b { font-weight: 600; }
.hh-article-body .post_content h2, .hh-article-body .post_content h3, .hh-article-body .post_content h4 { font-weight: 600; }
.hh-article-body .post_content .has-large-font-size strong { font-weight: 600; }
.swl-marker.mark_yellow, .swl-marker.mark_blue { font-weight: 600; }
.hh-faq__q { font-weight: 600; } .hh-faq__a { font-weight: 400; }
.hh-step__title { font-weight: 600; } .hh-step__num::after { font-weight: 600; }
.hh-card__title { font-weight: 600; }
.hh-balloon__text { font-weight: 400; }
.hh-toc__title { font-weight: 600; } .hh-toc__list { font-weight: 400; }
.hh-article-body .post_content th { font-weight: 600; }
.hh-article-title { font-weight: 600 !important; }
.hh-authorbox__name { font-weight: 600; }

/* =====================================================================
   2026-10-17 読みやすさの作り直し（オーナー指摘「のっぺりして見づらい」）
   原因: 1行49字・字間1.6px・背景に記事が溶けている → 白い面・1行約38字・字間を詰める
   ===================================================================== */
.blog-article-page .hh-article { max-width: 860px; background: #fff; border-radius: 16px; padding: 56px 72px 64px; box-shadow: 0 2px 24px rgba(38,55,67,.06); box-sizing: border-box; }
.hh-article-body .post_content { font-size: 17px; line-height: 2; letter-spacing: .03em; color: #2a2f33; }
.hh-article-body .post_content p { margin: 0 0 1.8em; }
.hh-article-body .post_content li { letter-spacing: .03em; }
.hh-article-title { letter-spacing: .02em; }
.hh-article-body .post_content h2 { margin: 3.6em -72px 1.6em; padding: .9em 72px; font-size: 1.32em; letter-spacing: .04em; line-height: 1.5; }
.hh-article-body .post_content h3 { margin: 2.8em 0 1.4em; font-size: 1.2em; letter-spacing: .04em; border-bottom: 2px solid #04384c; padding: 0 0 .45em; }
.hh-article-body .post_content h3::before { content: ""; display: inline-block; width: 6px; height: 1em; background: #e8794a; margin-right: 10px; vertical-align: -0.12em; border-radius: 2px; }
.hh-article-body .post_content .has-large-font-size { font-size: 21px; line-height: 1.75; letter-spacing: .02em; }
.hh-article-body .post_content .hh-toc { margin-left: 0; margin-right: 0; }
.hh-article-body .post_content blockquote { border-radius: 8px; }
.hh-article-body .post_content .wp-block-table table { font-size: 15px; letter-spacing: .02em; }
.hh-balloon__text { font-size: 16px; letter-spacing: .02em; line-height: 1.75; }
.hh-article-eyecatch { border-radius: 12px; }

/* FAQ（Q は色付き、A は白。SONOMAMA の見せ方を本体の色で） */
.hh-faq { border-top: 0; display: grid; gap: 20px; margin: 0 0 2.4em; }
.hh-faq__item { border: 1px solid #dfe7ec; border-radius: 10px; overflow: hidden; background: #fff; }
.hh-faq__q { background: #eef4f7; color: #04384c; font-weight: 600; font-size: 16.5px; line-height: 1.6; padding: 16px 20px 16px 64px; letter-spacing: .02em; }
.hh-faq__a { background: #fff; color: #2a2f33; font-size: 16px; line-height: 1.85; padding: 18px 20px 20px 64px; letter-spacing: .02em; }
.hh-faq__q::before, .hh-faq__a::before { left: 18px; width: 30px; height: 30px; border-radius: 6px; font-size: 16px; font-family: Barlow, Arial, sans-serif; font-weight: 700; }
.hh-faq__q::before { content: "Q"; background: #04384c; color: #fff; top: 14px; }
.hh-faq__a::before { content: "A"; background: #fff; color: #e8794a; border: 2px solid #e8794a; box-sizing: border-box; top: 16px; }

@media (max-width: 1024px) {
  .blog-article-page .hh-article { padding: 44px 40px 52px; }
  .hh-article-body .post_content h2 { margin-left: -40px; margin-right: -40px; padding-left: 40px; padding-right: 40px; }
}
@media (max-width: 768px) {
  .blog-article-page .hh-article { padding: 28px 20px 36px; border-radius: 12px; box-shadow: none; }
  .hh-article-body .post_content { font-size: 16px; line-height: 1.95; letter-spacing: .02em; }
  .hh-article-body .post_content h2 { margin: 3em -20px 1.4em; padding: .8em 20px; font-size: 1.18em; }
  .hh-article-body .post_content .has-large-font-size { font-size: 19px; }
  .hh-faq__q { padding: 14px 14px 14px 54px; font-size: 15.5px; }
  .hh-faq__a { padding: 14px 14px 16px 54px; font-size: 15px; }
  .hh-faq__q::before, .hh-faq__a::before { left: 12px; width: 28px; height: 28px; }
}

/* 見出しの紺帯を白い面の端まで（max-width:100% の打ち消し） */
.hh-article-body .post_content h2 { max-width: none; width: auto; }
/* 本文は文節改行（auto-phrase）をやめ、行末まで詰める。見出し・短い要素は文節改行のまま */
.hh-article-body .post_content p, .hh-article-body .post_content li, .hh-article-body .post_content td, .hh-article-body .post_content th,
.hh-article-body .post_content blockquote, .hh-faq__a, .hh-balloon__text, .hh-step__body, .hh-card__excerpt { word-break: normal; line-break: strict; overflow-wrap: anywhere; }
@media (max-width: 768px) {
  .hh-faq__q { padding: 13px 12px 13px 46px; }
  .hh-faq__a { padding: 13px 12px 15px 46px; }
  .hh-faq__q::before, .hh-faq__a::before { left: 10px; width: 26px; height: 26px; font-size: 14px; }
  .hh-faq__q::before { top: 13px; } .hh-faq__a::before { top: 14px; }
}

/* 2026-10-17 オーナー指摘「もう少し広くていい」: 白い面を本文エリアいっぱいに。1行が長くなりすぎないよう PC は 18px */
.blog-article-page .hh-article { max-width: none; width: 100%; }
@media (min-width: 1025px) {
  .hh-article-body .post_content { font-size: 18px; }
}

/* 2026-10-17 「この記事で分かること」の囲み。SWELL の「上だけ角丸の色帯＋チェックリスト」を1つの箱に見せる */
.hh-article-body .post_content .has-text-align-center { text-align: center; }
.hh-article-body .post_content .wp-block-group.has-background[style*="8px 8px 0 0"] {
  background: #04384c !important; border-radius: 12px 12px 0 0 !important;
  padding: 14px 24px !important; margin: 2.4em 0 0 !important;
}
.hh-article-body .post_content .wp-block-group.has-background[style*="8px 8px 0 0"] p {
  margin: 0; font-size: 16px; font-weight: 600 !important; letter-spacing: .12em; line-height: 1.6;
}
.hh-article-body .post_content .wp-block-group.has-background[style*="8px 8px 0 0"] p::before {
  content: "\f0eb"; font-family: "Font Awesome 6 Free"; font-weight: 400; margin-right: .6em; color: #f4a37f;
}
.hh-article-body .post_content .wp-block-group.has-background[style*="8px 8px 0 0"] + ul.is-style-check_list {
  margin: 0 0 2.4em !important; padding: 26px 36px 24px; background: #f5f9fb;
  border: 2px solid #04384c; border-top: 0; border-radius: 0 0 12px 12px;
}
.hh-article-body .post_content .wp-block-group.has-background[style*="8px 8px 0 0"] + ul.is-style-check_list li {
  padding: 10px 0 10px 36px; margin: 0; line-height: 1.7; font-weight: 500; border-bottom: 1px dashed #c9d8e0;
}
.hh-article-body .post_content .wp-block-group.has-background[style*="8px 8px 0 0"] + ul.is-style-check_list li:last-child { border-bottom: 0; }
.hh-article-body .post_content .wp-block-group.has-background[style*="8px 8px 0 0"] + ul.is-style-check_list li::before {
  content: "\f00c"; font-size: 11px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; line-height: 22px;
  text-align: center; border-radius: 50%; background: #e8794a; color: #fff;
}
@media (max-width: 768px) {
  .hh-article-body .post_content .wp-block-group.has-background[style*="8px 8px 0 0"] { padding: 12px 16px !important; }
  .hh-article-body .post_content .wp-block-group.has-background[style*="8px 8px 0 0"] + ul.is-style-check_list { padding: 16px 16px 14px; }
  .hh-article-body .post_content .wp-block-group.has-background[style*="8px 8px 0 0"] + ul.is-style-check_list li { padding-left: 32px; font-size: 15px; }
}

/* =====================================================================
   2026-10-17 文字サイズの固定（オーナー決定「H1 は何px、H2 は何px と固定」）
   ここ以外で文字サイズを決めない。記事内の「大きい文字」「小さい文字」や直書きの font-size もこの値に揃える。
   ブログの作り方: ~/.claude/skills/blog-harness の「文字サイズ表」と同じ値。
   ===================================================================== */
.blog-article-page {
  --hh-fs-h1: 30px; --hh-fs-h2: 24px; --hh-fs-h3: 20px; --hh-fs-h4: 18px;
  --hh-fs-body: 18px; --hh-fs-lead: 20px; --hh-fs-small: 14px;
  --hh-fs-balloon: 16px; --hh-fs-table: 15px; --hh-fs-caption: 13px;
}
@media (max-width: 1024px) {
  .blog-article-page { --hh-fs-body: 17px; --hh-fs-lead: 19px; }
}
@media (max-width: 768px) {
  .blog-article-page {
    --hh-fs-h1: 22px; --hh-fs-h2: 20px; --hh-fs-h3: 18px; --hh-fs-h4: 16px;
    --hh-fs-body: 16px; --hh-fs-lead: 17px; --hh-fs-small: 13px;
    --hh-fs-balloon: 15px; --hh-fs-table: 14px; --hh-fs-caption: 12px;
  }
}
.blog-article-page .hh-article-title { font-size: var(--hh-fs-h1) !important; line-height: 1.5; }
.hh-article-body .post_content { font-size: var(--hh-fs-body) !important; }
.hh-article-body .post_content h2 { font-size: var(--hh-fs-h2) !important; }
.hh-article-body .post_content h3 { font-size: var(--hh-fs-h3) !important; }
.hh-article-body .post_content h4, .hh-article-body .post_content h5, .hh-article-body .post_content h6 { font-size: var(--hh-fs-h4) !important; }
/* 「大きい文字」は1種類だけ（本文より一回り大きい） */
.hh-article-body .post_content .has-large-font-size,
.hh-article-body .post_content .has-x-large-font-size,
.hh-article-body .post_content .has-xx-large-font-size,
.hh-article-body .post_content .has-huge-font-size { font-size: var(--hh-fs-lead) !important; line-height: 1.8; }
.hh-article-body .post_content .has-medium-font-size { font-size: var(--hh-fs-body) !important; }
.hh-article-body .post_content .has-small-font-size,
.hh-article-body .post_content .has-tiny-font-size,
.hh-article-body .post_content [style*="font-size"]:not(h1):not(h2):not(h3):not(h4) { font-size: var(--hh-fs-small) !important; }
.hh-article-body .post_content .has-large-font-size *, .hh-article-body .post_content .has-small-font-size * { font-size: inherit !important; }
.hh-article-body .post_content table, .hh-article-body .post_content .wp-block-table table { font-size: var(--hh-fs-table) !important; }
.hh-article-body .post_content figcaption, .hh-article-body .post_content cite { font-size: var(--hh-fs-caption) !important; }
.hh-balloon__text, .hh-balloon__text p { font-size: var(--hh-fs-balloon) !important; }
.blog-article-page { --hh-fs-faq-q: 17px; --hh-fs-faq-a: 16px; }
@media (max-width: 768px) { .blog-article-page { --hh-fs-faq-q: 16px; --hh-fs-faq-a: 15px; } }
.hh-faq__q { font-size: var(--hh-fs-faq-q) !important; }
.hh-faq__a, .hh-faq__a p { font-size: var(--hh-fs-faq-a) !important; }
/* 2026-10-17 オーナー指示「結論などの大きい文字は 24px でドカーンと」 */
.blog-article-page { --hh-fs-lead: 24px; }
@media (max-width: 1024px) { .blog-article-page { --hh-fs-lead: 22px; } }
@media (max-width: 768px) { .blog-article-page { --hh-fs-lead: 20px; } }
.hh-article-body .post_content .has-large-font-size { line-height: 1.65; }
/* 旧ブログの星マーク（[review_stars]） */
.hh-stars { color: #f2b01e; letter-spacing: .08em; white-space: nowrap; font-size: .95em; }

/* 2026-10-17 移行した旧記事の崩れ対策
   ・画像の回り込み（左寄せ/右寄せ）をやめて中央に。後ろの吹き出し等が横に押し込まれて幅ゼロになるのを防ぐ
   ・手順の見出しが折り返さない／Instagram 埋め込みがスマホで枠からはみ出す */
.hh-article-body .post_content .wp-block-image .alignleft,
.hh-article-body .post_content .wp-block-image .alignright,
.hh-article-body .post_content figure.alignleft,
.hh-article-body .post_content figure.alignright { float: none !important; margin-left: auto !important; margin-right: auto !important; display: block; }
.hh-article-body .post_content .wp-block-image img { max-width: 100%; height: auto; }
.hh-article-body .post_content .hh-balloon { clear: both; }
.hh-step__title { flex-wrap: wrap; min-width: 0; }
.hh-step__title > * { min-width: 0; word-break: normal; overflow-wrap: anywhere; }
.hh-article-body .post_content .instagram-media,
.hh-article-body .post_content iframe.instagram-media { min-width: 0 !important; max-width: 100% !important; width: 100% !important; box-sizing: border-box; }
@media (max-width: 768px) { .hh-article-body .post_content .wp-block-image[style*="width:"] { width: 100% !important; } }
.hh-article-body .post_content .instagram-media-registered,
.hh-article-body .post_content blockquote[class*="instagram-media"] { min-width: 0 !important; max-width: 100% !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box; }
.hh-article-body .post_content blockquote[class*="instagram-media"] { overflow: hidden; }
.hh-article-body .post_content blockquote[class*="instagram-media"] a, .hh-article-body .post_content blockquote[class*="instagram-media"] p { white-space: normal !important; overflow-wrap: anywhere; }
/* 旧ブログと同じ見出しの目印（記事内リンクの飛び先）。固定ヘッダーに隠れないよう余白 */
.hh-article-body .post_content .hh-anchor { display: block; height: 0; scroll-margin-top: 110px; }