/* Cute Article Styles — 見出し h2 / h3 / h4（SWELL .post_content 内のみ上書き）
   方針：本文のボックス・カード（ピンクの枠）と見分けがつくよう、見出しは「枠で囲まない」。
   h2 = 大きな文字＋ハートアイコン＋二色の下線／h3 = ラベンダーの縦バー／h4 = 小さな丸 */

/* --------------------------------------------------------------------------
   h2
   -------------------------------------------------------------------------- */
body .post_content h2 {
  position: relative;
  margin: 3.4em 0 1.3em;
  padding: 0 0 .6em 2.05em !important;
  background: none !important;
  border: 0 !important;
  border-bottom: 2px solid var(--cas-pink-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--cas-text) !important;
  font-family: var(--cas-font-heading);
  font-size: 1.45em;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .02em;
  scroll-margin-top: 90px;
}
/* ハートのアイコン（端末のフォントに左右されないよう SVG で描画） */
body .post_content h2::before {
  content: "" !important;
  position: absolute;
  left: 0;
  top: .12em;
  width: 1.45em;
  height: 1.45em;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--cas-pink-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 20.3s-7.2-4.4-7.2-10A4.1 4.1 0 0 1 12 7.6a4.1 4.1 0 0 1 7.2 2.7c0 5.6-7.2 10-7.2 10z'/%3E%3C/svg%3E") center / 62% no-repeat !important;
  transform: none;
}
/* 下線の左だけ濃いピンクにして、見出しの始まりを示す */
body .post_content h2::after {
  content: "" !important;
  position: absolute;
  left: 0;
  right: auto;
  top: auto;
  bottom: -3px;
  width: 4.2em;
  height: 4px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--cas-pink-deep) !important;
  transform: none;
}

/* --------------------------------------------------------------------------
   h3
   -------------------------------------------------------------------------- */
body .post_content h3 {
  position: relative;
  margin: 2.6em 0 1em;
  padding: .1em 0 .1em .95em !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--cas-text) !important;
  font-family: var(--cas-font-heading);
  font-size: 1.2em;
  font-weight: 700;
  line-height: 1.55;
  scroll-margin-top: 90px;
}
body .post_content h3::before {
  content: "" !important;
  position: absolute;
  left: 0;
  top: .2em;
  bottom: .2em;
  width: 5px;
  height: auto;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: var(--cas-lav) !important;
  box-shadow: none;
  transform: none;
}
body .post_content h3::after { content: none !important; }

/* --------------------------------------------------------------------------
   h4
   -------------------------------------------------------------------------- */
body .post_content h4 {
  position: relative;
  margin: 2em 0 .8em;
  padding: 0 0 0 1.1em !important;
  background: none !important;
  border: 0 !important;
  color: var(--cas-pink-deep) !important;
  font-family: var(--cas-font-heading);
  font-size: 1.05em;
  font-weight: 700;
  line-height: 1.55;
}
body .post_content h4::before {
  content: "" !important;
  position: absolute;
  left: .1em;
  top: .55em;
  width: .5em;
  height: .5em;
  border: 0;
  border-radius: 50%;
  background: var(--cas-pink) !important;
}
body .post_content h4::after { content: none !important; }

/* 見出しの直後の段落は詰めすぎない */
body .post_content h2 + p,
body .post_content h3 + p { margin-top: 0; }

/* --------------------------------------------------------------------------
   スマホ
   -------------------------------------------------------------------------- */
@media (max-width: 599px) {
  body .post_content h2 {
    margin-top: 2.8em;
    padding-left: 1.85em !important;
    font-size: 1.25em;
  }
  body .post_content h2::before { width: 1.35em; height: 1.35em; top: .1em; }
  body .post_content h2::after { width: 3.6em; }
  body .post_content h3 { font-size: 1.1em; }
}
