/* =====================================================================
   Bloomy 記事用デザインシステム  bloomy-article-components.css
   2026-06-22 / 白ベース・ネイビー文字・淡いブルーのアクセント・清潔感・余白。
   子テーマ完結。SWELL本体は編集しない。.post_content にスコープして既存記事へ即適用。
   コンポーネント(.bloomy-*)は本文HTML/ショートコードで使用。
   ===================================================================== */
:root {
  --bloomy-navy: #0B2450;
  --bloomy-blue: #8FB3EA;
  --bloomy-blue-strong: #4f80d6;
  --bloomy-blue-light: #EAF3FF;
  --bloomy-border: #C9DAF8;
  --bloomy-bg: #F8FBFF;
  --bloomy-text: #10233F;
  --bloomy-muted: #5D6B82;
  --bloomy-radius-lg: 28px;
  --bloomy-radius-md: 18px;
  --bloomy-shadow: 0 14px 36px rgba(11, 36, 80, .08);
  --bloomy-shadow-sm: 0 4px 14px rgba(11, 36, 80, .05);
}

/* ===== 4. 本文タイポグラフィ（.post_content＝SWELL本文・全記事に即適用） ===== */
.post_content{color:var(--bloomy-text);line-height:1.9;font-size:16px;letter-spacing:.005em}
.post_content > p{margin:0 0 1.4em}
.post_content strong,.post_content b{color:var(--bloomy-navy);font-weight:700}
.post_content a{color:var(--bloomy-blue-strong);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.post_content a:hover{color:#2f63c2}
.post_content img{border-radius:var(--bloomy-radius-md)}

/* ===== 見出しのSWELL既定装飾を打ち消し（濃い青背景/囲み/長い横線/旧下線を除去） ===== */
/* 本文h2/h3＋関連記事タイトルh2の両方に適用。!importantでSWELL/旧CSSに勝つ。 */
.post_content h2, .post_content h3, .bloomy-related__title{
  background:none !important; border:none !important; box-shadow:none !important;
  border-radius:0 !important; text-align:left;
}
.post_content h2::before, .post_content h3::before, .bloomy-related__title::before{
  content:none !important; display:none !important; background:none !important; border:none !important;
}

/* ===== 2. H2＝ネイビー太字＋短い淡いブルー下線のみ ===== */
.post_content h2, .bloomy-related__title{
  font-size:23px; line-height:1.45; font-weight:800; color:var(--bloomy-navy);
  margin:2.4em 0 .95em; padding:0 0 .45em 0 !important; position:relative;
}
.post_content h2::after, .bloomy-related__title::after{
  content:"" !important; display:block !important; position:absolute; left:0; bottom:0;
  width:54px; height:3px; border-radius:3px; background:var(--bloomy-blue) !important; top:auto; right:auto;
}

/* ===== 3. H3＝左に細い淡いブルー縦線のみ（下線・背景なし） ===== */
.post_content h3{
  font-size:18px; line-height:1.5; font-weight:700; color:var(--bloomy-navy);
  margin:2em 0 .7em; padding:0 0 0 .7em !important; border-left:4px solid var(--bloomy-blue) !important;
}
.post_content h3::after{content:none !important; display:none !important;}
.post_content h4{font-size:16px;font-weight:700;color:var(--bloomy-navy);margin:1.5em 0 .55em;background:none !important;border:none !important}

/* ===== リスト（通常）・テーブル ===== */
.post_content ul{list-style:none;padding:0;margin:0 0 1.4em}
.post_content ul li{position:relative;padding:0 0 .55em 1.6em}
.post_content ul li::before{content:"";position:absolute;left:.1em;top:.5em;width:7px;height:7px;border-radius:50%;background:var(--bloomy-blue)}
.post_content ol{padding-left:1.4em;margin:0 0 1.4em}
.post_content ol li{padding:0 0 .5em .2em}
.post_content ol li::marker{color:var(--bloomy-blue-strong);font-weight:700}
.post_content table{width:100%;border-collapse:collapse;margin:0 0 1.6em;font-size:14.5px;border:1px solid var(--bloomy-border);border-radius:12px;overflow:hidden}
.post_content th,.post_content td{padding:11px 13px;border-bottom:1px solid #e7eefb;text-align:left;vertical-align:top}
.post_content th{background:var(--bloomy-blue-light);color:var(--bloomy-navy);font-weight:700}
.post_content tbody tr:last-child td{border-bottom:0}
.post_content tbody tr:nth-child(even) td{background:#fafcff}

/* ===== 1. 記事H1エリア（カテゴリ＋ライン＋H1＋リード＋メタ） ===== */
.bloomy-article-hero{background:#fff;border:1px solid var(--bloomy-border);border-radius:var(--bloomy-radius-lg);box-shadow:var(--bloomy-shadow);padding:30px 34px;margin:0 0 30px}
.bloomy-article-hero__cat{display:inline-block;font-size:13px;font-weight:700;color:var(--bloomy-blue-strong);letter-spacing:.04em;padding-bottom:8px;border-bottom:3px solid var(--bloomy-blue);margin-bottom:18px}
.bloomy-article-hero__title{font-size:30px;line-height:1.4;font-weight:800;color:var(--bloomy-navy);margin:0 0 14px}
.bloomy-article-hero__lead{font-size:15.5px;line-height:1.85;color:#3a4961;margin:0 0 18px}
.bloomy-article-hero__meta{display:flex;flex-wrap:wrap;gap:18px;font-size:13px;color:var(--bloomy-muted)}
.bloomy-article-hero__meta span{display:inline-flex;align-items:center;gap:6px}
.bloomy-article-hero__meta span::before{font-size:14px;opacity:.85}
.bloomy-article-hero__meta .m-date::before{content:"📅"}
.bloomy-article-hero__meta .m-read::before{content:"⏱"}
.bloomy-article-hero__meta .m-tag::before{content:"🔖"}

/* ===== 5. チェックリスト（白カード＋ブルー丸チェック＋注釈） ===== */
.bloomy-check-list{background:#fff;border:1px solid var(--bloomy-border);border-radius:var(--bloomy-radius-md);box-shadow:var(--bloomy-shadow-sm);padding:20px 22px;margin:1.9em 0}
.bloomy-check-list__title{font-weight:800;color:var(--bloomy-navy);font-size:16px;margin:0 0 .9em}
.bloomy-check-list ul{list-style:none;padding:0;margin:0}
.bloomy-check-list li{position:relative;padding:0 0 .7em 2em;color:var(--bloomy-text);font-size:15px;line-height:1.7}
.bloomy-check-list li::before{content:"✓";position:absolute;left:0;top:.05em;width:20px;height:20px;border-radius:50%;background:var(--bloomy-blue-light);color:var(--bloomy-blue-strong);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;border:1px solid var(--bloomy-border)}
.bloomy-check-list__note{margin:.6em 0 0;padding-top:.8em;border-top:1px solid #eef2f9;font-size:13px;color:var(--bloomy-muted)}

/* ===== 6. 補足/引用ブロック（白カード内に薄いブルーの引用ボックス） ===== */
.bloomy-note-quote{background:#fff;border:1px solid var(--bloomy-border);border-radius:var(--bloomy-radius-md);box-shadow:var(--bloomy-shadow-sm);padding:20px 22px;margin:1.9em 0}
.bloomy-note-quote__title{font-weight:800;color:var(--bloomy-navy);font-size:15px;margin:0 0 .7em}
.bloomy-note-quote__body{position:relative;background:var(--bloomy-blue-light);border-radius:14px;padding:16px 18px 16px 44px;color:var(--bloomy-text);font-size:14.5px;line-height:1.8}
.bloomy-note-quote__body::before{content:"\201C";position:absolute;left:14px;top:6px;font-size:34px;line-height:1;color:var(--bloomy-blue);font-weight:700}
.bloomy-note-quote__sub{margin:.8em 0 0;font-size:13px;color:var(--bloomy-muted)}

/* ===== 7. コールアウト（結論/注意/ポイント・情報） ===== */
.bloomy-callout{border-radius:var(--bloomy-radius-md);padding:18px 20px;margin:1.9em 0;border:1px solid var(--bloomy-border);background:#fff;box-shadow:var(--bloomy-shadow-sm)}
.bloomy-callout__title{display:flex;align-items:center;gap:8px;font-weight:800;font-size:16px;margin:0 0 .55em;color:var(--bloomy-navy)}
.bloomy-callout__title::before{font-size:18px;line-height:1}
.bloomy-callout p{margin:0 0 .6em}.bloomy-callout p:last-child{margin-bottom:0}
.bloomy-callout__sub{margin-top:.85em;padding-top:.7em;border-top:1px dashed var(--bloomy-border);font-size:13px;color:var(--bloomy-muted)}
.bloomy-callout--conclusion{border-color:var(--bloomy-border);background:var(--bloomy-bg)}
.bloomy-callout--conclusion .bloomy-callout__title{color:var(--bloomy-blue-strong)}
.bloomy-callout--conclusion .bloomy-callout__title::before{content:"✅"}
.bloomy-callout--info{border-color:var(--bloomy-border);background:var(--bloomy-blue-light)}
.bloomy-callout--info .bloomy-callout__title{color:var(--bloomy-blue-strong)}
.bloomy-callout--info .bloomy-callout__title::before{content:"ℹ️"}
.bloomy-callout--point{border-color:var(--bloomy-border);background:var(--bloomy-bg)}
.bloomy-callout--point .bloomy-callout__title{color:var(--bloomy-blue-strong)}
.bloomy-callout--point .bloomy-callout__title::before{content:"💡"}
/* 注意ボックス（黄系・コールアウトとは別扱い） */
.bloomy-callout--note{border-color:#efe2bf;background:#fdf9ee}
.bloomy-callout--note .bloomy-callout__title{color:#9a6b16}
.bloomy-callout--note .bloomy-callout__title::before{content:"⚠️"}

/* ===== 使い方3ステップ ===== */
.bloomy-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:1.9em 0}
.bloomy-step{background:var(--bloomy-bg);border:1px solid var(--bloomy-border);border-radius:14px;padding:16px 14px 15px;position:relative}
.bloomy-step__n{display:inline-block;font-size:13px;font-weight:800;color:var(--bloomy-blue-strong);letter-spacing:.06em;margin-bottom:.4em}
.bloomy-step__t{font-weight:700;color:var(--bloomy-navy);font-size:15px;margin-bottom:.3em}
.bloomy-step__d{font-size:13px;color:var(--bloomy-muted);line-height:1.6}
.bloomy-step:not(:last-child)::after{content:"›";position:absolute;right:-9px;top:50%;transform:translateY(-50%);color:var(--bloomy-blue);font-size:20px;font-weight:700;z-index:1}

/* ===== 比較2列 ===== */
.bloomy-compare2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:1.9em 0}
.bloomy-compare2__col{background:#fff;border:1px solid var(--bloomy-border);border-radius:14px;box-shadow:var(--bloomy-shadow-sm);padding:16px 18px}
.bloomy-compare2__h{font-weight:800;color:var(--bloomy-navy);font-size:15.5px;margin:0 0 .7em;padding-bottom:.5em;border-bottom:1px solid #eef2f9}

/* ===== FAQアコーディオン ===== */
.bloomy-faq{margin:1.4em 0 0.6em;display:flex;flex-direction:column;gap:9px}
.bloomy-faq details{background:#fff;border:1px solid var(--bloomy-border);border-radius:14px;overflow:hidden;box-shadow:var(--bloomy-shadow-sm)}
.bloomy-faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:15px 18px;font-weight:700;color:var(--bloomy-navy);font-size:15px}
.bloomy-faq summary::-webkit-details-marker{display:none}
.bloomy-faq summary::before{content:"Q";flex:none;width:24px;height:24px;border-radius:50%;background:var(--bloomy-blue-light);color:var(--bloomy-blue-strong);font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center}
.bloomy-faq summary::after{content:"⌄";margin-left:auto;color:var(--bloomy-blue);font-size:18px;transition:transform .2s}
.bloomy-faq details[open] summary::after{transform:rotate(180deg)}
.bloomy-faq__a{padding:0 18px 16px 52px;color:#3f4d62;font-size:14.5px;line-height:1.8}

/* ===== CTAカード（プランを探す） ===== */
.bloomy-cta{background:var(--bloomy-bg);border:1px solid var(--bloomy-border);border-radius:var(--bloomy-radius-lg);box-shadow:var(--bloomy-shadow);padding:26px 30px;margin:2.2em 0}
.bloomy-cta__label{font-size:13px;font-weight:700;color:var(--bloomy-blue-strong);margin:0 0 6px}
.bloomy-cta__title{font-size:22px;font-weight:800;color:var(--bloomy-navy);margin:0 0 8px;line-height:1.4}
.bloomy-cta__lead{font-size:14px;color:#3a4961;margin:0 0 16px}
.bloomy-cta__btn{display:inline-flex;align-items:center;gap:8px;background:var(--bloomy-blue-strong);color:#fff;text-decoration:none;font-weight:700;font-size:15px;padding:12px 22px;border-radius:999px;box-shadow:0 6px 16px rgba(79,128,214,.28)}
.bloomy-cta__btn:hover{background:#3f6fc8;color:#fff}
.bloomy-cta__note{display:flex;align-items:center;gap:7px;margin:14px 0 0;font-size:13px;color:var(--bloomy-muted)}
.bloomy-cta__note::before{content:"ℹ️";font-size:14px}

/* ===== 9. レスポンシブ（SP） ===== */
@media (max-width:600px){
  .post_content{font-size:15.5px;line-height:1.85}
  .post_content h2{font-size:20px}.post_content h3{font-size:17px}
  .bloomy-article-hero{padding:22px 18px;border-radius:20px}
  .bloomy-article-hero__title{font-size:23px}
  .bloomy-check-list,.bloomy-note-quote,.bloomy-callout,.bloomy-cta{padding:17px 16px}
  .bloomy-cta{padding:20px 18px}.bloomy-cta__title{font-size:19px}.bloomy-cta__btn{width:100%;justify-content:center}
  .bloomy-steps{grid-template-columns:1fr;gap:8px}
  .bloomy-step:not(:last-child)::after{content:"";right:auto;left:24px;top:auto;bottom:-7px;transform:none}
  .bloomy-compare2{grid-template-columns:1fr}
  .bloomy-faq__a{padding-left:18px}
}

/* ===== Bloomy 目次（白・追従サイドバー / 狭い画面は折りたたみ）2026-06-23 ===== */
.bloomy-toc{background:#fff;border:1px solid var(--bloomy-border);border-radius:var(--bloomy-radius-md);box-shadow:var(--bloomy-shadow-sm);padding:14px 16px;margin:1.5em 0}
.bloomy-toc__head{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;background:none;border:0;padding:0;cursor:pointer;font-family:inherit;text-align:left}
.bloomy-toc__title{font-weight:800;color:var(--bloomy-navy);font-size:14.5px;letter-spacing:.01em}
.bloomy-toc__chev{flex:none;width:8px;height:8px;border-right:2px solid #9aa7bd;border-bottom:2px solid #9aa7bd;transform:rotate(45deg);transition:transform .2s}
.bloomy-toc.is-collapsed .bloomy-toc__chev{transform:rotate(-45deg)}
.bloomy-toc__list{list-style:none;margin:.8em 0 0;padding:0;counter-reset:btoc}
.bloomy-toc.is-collapsed .bloomy-toc__list{display:none}
.bloomy-toc__list li{counter-increment:btoc;margin:0}
.bloomy-toc__link{display:block;color:var(--bloomy-text);font-size:13px;line-height:1.5;text-decoration:none;padding:5px 6px 5px 1.7em;position:relative;border-radius:7px;transition:background .15s,color .15s}
.bloomy-toc__link::before{content:counter(btoc);position:absolute;left:5px;top:5px;color:var(--bloomy-blue-strong);font-weight:800;font-size:11.5px}
.bloomy-toc__link:hover{background:var(--bloomy-blue-light);color:var(--bloomy-blue-strong)}
.bloomy-toc__link.is-active{background:var(--bloomy-blue-light);color:var(--bloomy-blue-strong);font-weight:700}
/* 広い画面：右マージンに追従 */
@media(min-width:1400px){
  .bloomy-toc{position:fixed;top:100px;right:28px;width:244px;max-height:calc(100vh - 140px);overflow:auto;margin:0;z-index:30}
  .bloomy-toc__list{max-height:none}
}

/* ===== 記事ヘッダーの詰まり緩和＋本文上の過大な余白(SWELL既定4em)を縮小 2026-06-23 ===== */
.l-mainContent__inner > .post_content{margin-top:1.5em}
.c-postTitle__ttl{line-height:1.5}
.c-breadcrumb,.p-breadcrumb,.c-breadcrumbs{margin-bottom:20px}
.p-articleMetas.-top{margin-top:14px;margin-bottom:.4em}
.c-postTitle{margin:.7em 0 1.3em}

/* ===== 関連記事ブロックの詳細度修正（.post_content ul/h2 の上書きを打ち消す）2026-06-23 ===== */
.post_content .bloomy-related__list{padding:0;margin:0;list-style:none}
.post_content .bloomy-related__title{margin-top:0}
.post_content .bloomy-related__lead{margin-top:0}
.post_content .bloomy-related__item{padding:0;margin:0}
.post_content .bloomy-related__item::before{content:none;display:none}

/* 前後記事ナビ(SWELL)は「あわせて読みたい」と役割重複のため非表示 2026-06-23 */
.post_content + .p-pnLinks, .p-pnLinks{display:none}
/* 関連カードの左ずれ堅牢化（グリッドを左から確実に充填） */
.post_content .bloomy-related__list{padding:0 !important;margin:0 !important;justify-items:stretch}
.post_content .bloomy-related__item{margin:0;padding:0;min-width:0}
.post_content .bloomy-related__card{width:100%;margin:0}

/* 記事フッターのカテゴリ＋点線(SWELL)はパンくず・関連ラベルと重複のため非表示 2026-06-23 */
.p-articleFoot,.p-articleMetas.-bottom{display:none !important}
/* FAQ(よくある質問)を縦に詰める */
.bloomy-faq{gap:7px}
.bloomy-faq summary{padding:11px 16px}
.bloomy-faq__a{padding-bottom:12px;line-height:1.7}

/* アイキャッチの影を弱く（SWELL本体 --swl-img_shadow が強く浮いて見えるため）2026-06-23 */
.p-articleThumb__img,.p-articleThumb__youtube{box-shadow:0 2px 10px rgba(36,59,99,.06)!important}