@charset "UTF-8";

/* =========================================
   共通ベース（Q/A/！/？ と旧クラス対応）
   ========================================= */
:is(p,h1,h2,h3,h4,h5,h6):is(
  .is-style-text-with-icon,
  .is-style-text-with-icon-q,
  .is-style-text-with-icon-a,
  .is-style-text-with-icon-exclamation,
  .is-style-text-with-icon-question
) {
  position: relative;
  padding-left: 0;
  line-height: 1.6;
  overflow: visible;
  /* カスタムプロパティ */
  --icon-size: 1.6em;                 /* アイコンサイズ（文字サイズ追従） */
  --icon-gap: 0.6em;                  /* テキスト左端との間隔 */
  --icon-outdent: calc(var(--icon-size) + var(--icon-gap)); /* 左への飛び出し量 */
  --icon-color: #8a8f98;              /* デフォルト色（投稿側で上書き可能） */
  --icon-top: -0.5em;                 /* 上への飛び出し量 */
}

/* =========================================
   Q アイコン（新: -q / 旧: 無印 の両対応）
   ========================================= */
:is(p,h1,h2,h3,h4,h5,h6).is-style-text-with-icon-q::before,
:is(p,h1,h2,h3,h4,h5,h6).is-style-text-with-icon::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--icon-outdent));
  top: var(--icon-top);
  width: var(--icon-size);
  height: var(--icon-size);
  display: block;
  pointer-events: none;

  background-color: var(--icon-color);
  -webkit-mask: url("../svg/icon-q-mask.svg") no-repeat center / contain;
  mask: url("../svg/icon-q-mask.svg") no-repeat center / contain;
}

/* =========================================
   A アイコン
   ========================================= */
:is(p,h1,h2,h3,h4,h5,h6).is-style-text-with-icon-a::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--icon-outdent));
  top: var(--icon-top);
  width: var(--icon-size);
  height: var(--icon-size);
  display: block;
  pointer-events: none;

  background-color: var(--icon-color);
  -webkit-mask: url("../svg/icon-a-mask.svg") no-repeat center / contain;
  mask: url("../svg/icon-a-mask.svg") no-repeat center / contain;
}

/* =========================================
   ！ アイコン
   ========================================= */
:is(p,h1,h2,h3,h4,h5,h6).is-style-text-with-icon-exclamation::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--icon-outdent));
  top: var(--icon-top);
  width: var(--icon-size);
  height: var(--icon-size);
  display: block;
  pointer-events: none;

  background-color: var(--icon-color);
  -webkit-mask: url("../svg/icon-exclamation-mask.svg") no-repeat center / contain;
  mask: url("../svg/icon-exclamation-mask.svg") no-repeat center / contain;
}

/* =========================================
   ？ アイコン
   ========================================= */
:is(p,h1,h2,h3,h4,h5,h6).is-style-text-with-icon-question::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--icon-outdent));
  top: var(--icon-top);
  width: var(--icon-size);
  height: var(--icon-size);
  display: block;
  pointer-events: none;

  background-color: var(--icon-color);
  -webkit-mask: url("../svg/icon-question-mask.svg") no-repeat center / contain;
  mask: url("../svg/icon-question-mask.svg") no-repeat center / contain;
}

/* =========================================
   見出しの微調整（必要なら調整）
   ========================================= */
h1:is(.is-style-text-with-icon,.is-style-text-with-icon-q,.is-style-text-with-icon-a,.is-style-text-with-icon-exclamation,.is-style-text-with-icon-question) { --icon-top: -1.0em; }
h2:is(.is-style-text-with-icon,.is-style-text-with-icon-q,.is-style-text-with-icon-a,.is-style-text-with-icon-exclamation,.is-style-text-with-icon-question) { --icon-top: -0.95em; }
h3:is(.is-style-text-with-icon,.is-style-text-with-icon-q,.is-style-text-with-icon-a,.is-style-text-with-icon-exclamation,.is-style-text-with-icon-question) { --icon-top: -0.92em; }



/* =========================================
   モバイル調整
   ========================================= */
/* ===== モバイル時は「内側配置」に強制切替（はみ出し＆重なり防止） ===== */
@media (max-width: 699px){
  :is(p,h1,h2,h3,h4,h5,h6):is(
    .is-style-text-with-icon,
    .is-style-text-with-icon-q,
    .is-style-text-with-icon-a,
    .is-style-text-with-icon-exclamation,
    .is-style-text-with-icon-question
  ){
    --icon-size: 2.8em !important;
    --icon-gap: 0.4em;
    --icon-top: 0.1em;                         /* モバイルは通常位置 */
    padding-left: calc(var(--icon-size) + var(--icon-gap)) !important;
  }
  :is(p,h1,h2,h3,h4,h5,h6):is(
    .is-style-text-with-icon,
    .is-style-text-with-icon-q,
    .is-style-text-with-icon-a,
    .is-style-text-with-icon-exclamation,
    .is-style-text-with-icon-question
  )::before{
    left: 0;                                    /* 飛び出し禁止 */
    top: var(--icon-top);
  }
}