/* ============================================================
   pulip メイクコラム 記事本文スタイル
   適用先：single-make-column の本文コンテナ
           .make-column-contents .contents

   設置場所：themes/pulip/assets/css/pulip-column.css
   読み込み：functions.php の wp_enqueue_scripts
   ※ 本文をラップする div は不要です
   ============================================================ */

.make-column-contents .contents {
  /* --- カラー（ここを変えれば全体の色味が変わります） --- */
  --pc-ink: #3f3833;         /* 本文の文字色（真っ黒より柔らかい茶墨） */
  --pc-muted: #6f665f;       /* 補助テキスト */
  --pc-accent: #b4707f;      /* アクセント：くすみローズ */
  --pc-accent-deep: #8f4f5f; /* アクセント濃色：リンク・CTA */
  --pc-tint: #f7ebed;        /* アクセントの淡色（マーカー・CTA背景） */
  --pc-cream: #fbf8f3;       /* リストボックスの背景 */
  --pc-line: #e9e1d8;        /* 罫線 */

  /* --- フォント --- */
  /* 見出しは明朝、本文はゴシック（雑誌的で上品な組み合わせ） */
  --pc-mincho: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
  --pc-gothic: "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Noto Sans JP", "Meiryo", sans-serif;

  color: var(--pc-ink);
  font-family: var(--pc-gothic);
  font-size: 1rem;
  line-height: 1.95;      /* 日本語は行間を広めに取ると読み疲れしない */
  letter-spacing: 0.04em;
  text-align: left;
}

/* 記事の先頭要素は上の余白を詰める */
.make-column-contents .contents > *:first-child {
  margin-top: 0;
}

/* ------------------------------------------------------------
   本文
   ------------------------------------------------------------ */
.make-column-contents .contents p {
  margin: 0 0 1.7em;
  line-height: 1.95;
}

/* 導入のリード文だけ少し大きく */
.make-column-contents .contents > p:first-of-type {
  font-size: 1.06rem;
  line-height: 2.05;
}

/* 強調は蛍光ペン風のマーカー（下半分だけ色を敷く） */
.make-column-contents .contents strong {
  font-weight: 700;
  padding: 0 0.1em;
  background: linear-gradient(transparent 62%, var(--pc-tint) 62%);
}

.make-column-contents .contents a {
  color: var(--pc-accent-deep);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
.make-column-contents .contents a:hover {
  color: var(--pc-accent);
}

/* 本文中に差し込んだ画像 */
.make-column-contents .contents figure {
  margin: 2.6em 0;
}
.make-column-contents .contents figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* ------------------------------------------------------------
   H2：アイライナーを引いたような、先細りするラインが目印
   ------------------------------------------------------------ */
.make-column-contents .contents h2 {
  position: relative;
  margin: 4.2em 0 1.4em;
  padding: 0 0 0.5em;
  border: none;
  background: none;
  font-family: var(--pc-mincho);
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: var(--pc-ink);
}

.make-column-contents .contents h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(
    90deg,
    var(--pc-accent) 0%,
    var(--pc-accent) 18%,
    rgba(180, 112, 127, 0.25) 55%,
    rgba(180, 112, 127, 0) 100%
  );
}

/* ------------------------------------------------------------
   H3：手順・実践パートの見出し。ゴシックで実用的に
   ------------------------------------------------------------ */
.make-column-contents .contents h3 {
  margin: 2.8em 0 1.1em;
  padding: 0 0 0 0.75em;
  border: none;
  border-left: 4px solid var(--pc-accent);
  border-radius: 0;
  background: none;
  font-family: var(--pc-gothic);
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--pc-ink);
}

/* ------------------------------------------------------------
   箇条書き：チェックリスト・ポイント整理用
   淡いボックスに入れて、文章の壁を視覚的に区切る
   ------------------------------------------------------------ */
.make-column-contents .contents ul {
  margin: 2em 0;
  padding: 1.6em 1.8em;
  list-style: none;
  background: var(--pc-cream);
  border: 1px solid var(--pc-line);
  border-radius: 10px;
}

.make-column-contents .contents ul li {
  position: relative;
  margin: 0 0 0.85em;
  padding: 0 0 0 1.5em;
  line-height: 1.85;
  list-style: none;
}

.make-column-contents .contents ul li:last-child {
  margin-bottom: 0;
}

/* パウダーを1点置いたような、にじみ付きのドット */
.make-column-contents .contents ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pc-accent);
  box-shadow: 0 0 0 4px var(--pc-tint);
}

/* ------------------------------------------------------------
   番号付きリスト：メイクの手順用。番号を丸チップで表示
   ------------------------------------------------------------ */
.make-column-contents .contents ol {
  margin: 2em 0;
  padding: 0;
  list-style: none;
  counter-reset: pulip-step;
}

.make-column-contents .contents ol li {
  counter-increment: pulip-step;
  position: relative;
  margin: 0 0 1.1em;
  padding: 0 0 0 3em;
  min-height: 2em;
  line-height: 1.85;
  list-style: none;
}

.make-column-contents .contents ol li:last-child {
  margin-bottom: 0;
}

.make-column-contents .contents ol li::before {
  content: counter(pulip-step);
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background: var(--pc-accent);
  color: #fff;
  font-family: var(--pc-gothic);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 2em;
  letter-spacing: 0;
  text-align: center;
}

/* 入れ子のリストはボックスを重ねない */
.make-column-contents .contents li ul,
.make-column-contents .contents li ol {
  margin: 0.8em 0 0;
  padding: 0;
  background: none;
  border: none;
}

/* ------------------------------------------------------------
   末尾のCTA（問い合わせ誘導の1文）
   ------------------------------------------------------------ */
.make-column-contents .contents > p:last-child {
  margin-top: 2.6em;
  margin-bottom: 0;
  padding: 1.6em 1.8em;
  background: var(--pc-tint);
  border-radius: 10px;
  font-weight: 700;
  line-height: 1.9;
  color: var(--pc-accent-deep);
}

/* ------------------------------------------------------------
   スマートフォン
   ------------------------------------------------------------ */
@media (max-width: 600px) {
  .make-column-contents .contents {
    font-size: 0.95rem;
    line-height: 1.9;
  }
  .make-column-contents .contents > p:first-of-type {
    font-size: 1rem;
  }
  .make-column-contents .contents h2 {
    margin-top: 3.2em;
    font-size: 1.3rem;
  }
  .make-column-contents .contents h3 {
    margin-top: 2.4em;
    font-size: 1.05rem;
  }
  .make-column-contents .contents ul {
    padding: 1.3em 1.3em;
  }
  .make-column-contents .contents ol li {
    padding-left: 2.6em;
  }
  .make-column-contents .contents > p:last-child {
    padding: 1.3em 1.3em;
  }
  .make-column-contents .contents figure {
    margin: 2em 0;
  }
}