@charset "UTF-8";
/* =========================================================
   記事・固定ページ（SWELLのページ）の本文スタイル
   トップページのデザイン（色・角丸・フォント）に合わせて SWELL の見出しを上書き
   #body_wrap を付けて SWELL の指定より優先させる
   ========================================================= */

/* ===== 記事タイトル ===== */
#body_wrap .c-postTitle__ttl{font-size:clamp(23px,3vw,30px);font-weight:900;line-height:1.5;letter-spacing:.04em}

/* ===== 見出し2：白い角丸ボックス＋左に緑のライン ===== */
#body_wrap .post_content h2{position:relative;background:#fff;color:var(--ink);font-size:clamp(20px,2.4vw,23px);font-weight:900;line-height:1.55;letter-spacing:.04em;padding:20px 26px 20px 50px;margin:80px 0 32px;border:0;border-radius:var(--r-sm)}
#body_wrap .post_content h2::before{content:"";position:absolute;left:26px;top:20px;bottom:20px;width:6px;height:auto;border:0;border-radius:3px;background:var(--teal)}
#body_wrap .post_content h2::after{content:none}

/* ===== 見出し3：点線＋左だけ緑の実線 ===== */
#body_wrap .post_content h3{position:relative;background:none;color:var(--ink);font-size:clamp(18px,2vw,20px);font-weight:900;line-height:1.6;letter-spacing:.04em;padding:0 0 12px;margin:56px 0 24px;border:0;border-bottom:2px dashed #D8D2CB;border-radius:0}
#body_wrap .post_content h3::before{content:"";position:absolute;left:0;top:auto;bottom:-2px;width:64px;height:2px;border:0;background:var(--teal)}
#body_wrap .post_content h3::after{content:none}

/* ===== 見出し4：左に緑の丸 ===== */
#body_wrap .post_content h4{position:relative;background:none;color:var(--ink);font-size:17px;font-weight:900;line-height:1.6;padding:0 0 0 22px;margin:40px 0 16px;border:0}
#body_wrap .post_content h4::before{content:"";position:absolute;left:2px;top:.55em;width:11px;height:11px;border:0;border-radius:50%;background:var(--teal)}
#body_wrap .post_content h4::after{content:none}

/* ===== 記事下の見出し（関連記事・この記事を書いた人 など） ===== */
#body_wrap .c-secTitle{position:relative;font-size:20px;font-weight:900;letter-spacing:.04em;line-height:1.5;padding:0 0 0 20px;border:0;background:none;text-align:left}
#body_wrap .c-secTitle::before{content:"";position:absolute;left:0;top:.2em;bottom:.2em;width:6px;height:auto;border:0;border-radius:3px;background:var(--teal)}
#body_wrap .c-secTitle::after{content:none}

@media (max-width:640px){
  #body_wrap .post_content h2{padding:16px 18px 16px 38px;margin:64px 0 24px}
  #body_wrap .post_content h2::before{left:18px;top:17px;bottom:17px;width:5px}
}

/* ===== パンくず：ヘッダーの下・記事タイトルの上（本文と同じ幅） ===== */
body:not(.crefus-standalone) #breadcrumb{padding:140px 0 0;background:none;box-shadow:none}
body:not(.crefus-standalone) #content{padding-top:20px}
#breadcrumb .p-breadcrumb__list{width:min(900px,100% - 2 * var(--swl-pad_container,4vw));max-width:none;margin:0 auto;padding:0;font-family:var(--jp);font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--ink);gap:.6em}
#breadcrumb .p-breadcrumb__item{gap:.6em;flex-shrink:0}
#breadcrumb .p-breadcrumb__item::after{opacity:.4}
#breadcrumb .p-breadcrumb__text .__home::before{display:none}
#breadcrumb .p-breadcrumb__text:hover span{opacity:1;color:var(--teal-d)}
/* 最後（今いるページ）も表示し、長いときは「…」で省略 */
#breadcrumb .p-breadcrumb__item:last-child{flex-shrink:1;min-width:0}
#breadcrumb .p-breadcrumb__item:last-child > span.p-breadcrumb__text{display:block;overflow:hidden;text-overflow:ellipsis;color:var(--ink-2);font-weight:500}
#breadcrumb .p-breadcrumb__item:last-child span{opacity:1}
@media (max-width:820px){
  body:not(.crefus-standalone) #breadcrumb{padding-top:90px}
  body:not(.crefus-standalone) #content{padding-top:16px}
  #breadcrumb .p-breadcrumb__list{font-size:11.5px}
}