/* =========================================================
   ブログ記事用 装飾クラス（ar_ = article）
   本文を <div class="ar_post"> … </div> で囲んだ記事にだけ効きます。
   既存の記事には影響しません。
   ========================================================= */

#single .ar_post {
  --ar-green: #64AA0B;
  --ar-green-l: #86CB00;
  --ar-green-bg: #EEF8E2;
  --ar-ink: #26332A;
  --ar-line: #D6E9BE;
  color: var(--ar-ink);
  font-size: 16px;
  line-height: 1.95;
  letter-spacing: .02em;
}

#single .ar_post p {
  margin: 0 0 1.4em;
}

/* ---------- 見出し ---------- */
#single .ar_post h2 {
  position: relative;
  margin: 3.2em 0 1.2em;
  padding: .7em 1em .7em 1.1em;
  font-size: 1.35rem;
  line-height: 1.5;
  font-weight: bold;
  color: var(--ar-ink);
  background: #fff;
  border: none;
  border-left: 6px solid var(--ar-green);
  border-radius: 0 8px 8px 0;
  box-shadow: 0 2px 0 var(--ar-line);
  scroll-margin-top: 90px;
}

#single .ar_post h3 {
  display: flex;
  align-items: center;
  gap: .6em;
  margin: 2.2em 0 .9em;
  padding: 0 0 .5em;
  font-size: 1.12rem;
  line-height: 1.5;
  font-weight: bold;
  border-bottom: 2px dotted var(--ar-green-l);
}

#single .ar_post .ar_num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2em;
  height: 2em;
  font-size: .9rem;
  color: #fff;
  background: var(--ar-green);
  border-radius: 50%;
}

/* ---------- 導入文 ---------- */
#single .ar_post .ar_lead {
  margin: 0 0 2em;
  padding: 1.4em 1.5em .2em;
  background: #fff;
  border-radius: 10px;
  border: 1px solid var(--ar-line);
}

/* ---------- 目次 ---------- */
#single .ar_post .ar_toc {
  margin: 2em 0 2.4em;
  padding: 1.2em 1.5em;
  background: var(--ar-green-bg);
  border-radius: 10px;
}

#single .ar_post .ar_toc_ttl {
  margin: 0 0 .5em;
  font-weight: bold;
  color: var(--ar-green);
  letter-spacing: .1em;
}

#single .ar_post .ar_toc ol {
  margin: 0;
  padding-left: 1.4em;
  list-style: decimal;
}

#single .ar_post .ar_toc li {
  margin: .25em 0;
}

#single .ar_post .ar_toc a {
  color: var(--ar-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ar-line);
}

#single .ar_post .ar_toc a:hover {
  color: var(--ar-green);
  border-bottom-color: var(--ar-green);
}

/* ---------- 画像 ---------- */
#single .ar_post .ar_fig {
  margin: 1.8em 0 2em;
}

#single .ar_post .ar_fig img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

/* ---------- チェックリスト ---------- */
#single .ar_post .ar_check {
  margin: 1.2em 0 1.6em;
  padding: 1.2em 1.4em;
  list-style: none;
  background: #fff;
  border: 2px solid var(--ar-line);
  border-radius: 10px;
}

#single .ar_post .ar_check li {
  position: relative;
  margin: .4em 0;
  padding-left: 1.9em;
  line-height: 1.7;
}

#single .ar_post .ar_check li::before {
  content: "";
  position: absolute;
  left: .15em;
  top: .3em;
  width: 1.1em;
  height: 1.1em;
  background: var(--ar-green-l);
  border-radius: 50%;
}

#single .ar_post .ar_check li::after {
  content: "";
  position: absolute;
  left: .5em;
  top: .5em;
  width: .32em;
  height: .58em;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

/* ---------- ポイント（要点の一文） ---------- */
#single .ar_post .ar_point {
  position: relative;
  margin: 1.6em 0 2em;
  padding: 1.1em 1.4em 1.1em 3.4em;
  font-weight: bold;
  background: var(--ar-green-bg);
  border-radius: 10px;
}

#single .ar_post .ar_point::before {
  content: "POINT";
  position: absolute;
  left: 1em;
  top: 1.35em;
  font-size: .62rem;
  letter-spacing: .08em;
  color: #fff;
  background: var(--ar-green);
  padding: .1em .45em;
  border-radius: 3px;
  writing-mode: vertical-rl;
  line-height: 1.3;
}

#single .ar_post .ar_point p {
  margin: 0;
}

/* ---------- 補足ボックス ---------- */
#single .ar_post .ar_note {
  margin: 1.6em 0 2em;
  padding: 1.2em 1.4em .1em;
  background: #FFFBEA;
  border: 1px solid #F1DE9C;
  border-radius: 10px;
}

/* ---------- マーカー ---------- */
#single .ar_post .ar_marker {
  background: linear-gradient(transparent 62%, rgba(168, 220, 60, .45) 62%);
  font-weight: bold;
}

/* ---------- まとめ・案内ボックス ---------- */
#single .ar_post .ar_cta {
  margin: 2.6em 0 1em;
  padding: 1.8em 1.6em 1.6em;
  text-align: center;
  background: #fff;
  border: 3px solid var(--ar-green-l);
  border-radius: 14px;
}

#single .ar_post .ar_cta p {
  margin: 0 0 1em;
}

#single .ar_post .ar_btn {
  display: inline-block;
  min-width: 260px;
  margin-top: .4em;
  padding: .85em 2em;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
  line-height: 1.5;
  background: var(--ar-green);
  border-radius: 999px;
  box-shadow: 0 4px 0 #4C8508;
  transition: transform .15s, box-shadow .15s;
}

#single .ar_post .ar_btn:hover {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #4C8508;
  color: #fff;
}

#single .ar_post .ar_btn::after {
  content: "\203A";
  margin-left: .7em;
  font-size: 1.2em;
}

/* ボタンを複数並べる */
#single .ar_post .ar_btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1em;
  margin-top: .4em;
}

#single .ar_post .ar_btns .ar_btn {
  margin-top: 0;
}

/* サブボタン（白地＋緑枠） */
#single .ar_post .ar_btn_sub {
  color: var(--ar-green);
  background: #fff;
  border: 2px solid var(--ar-green);
  box-shadow: 0 4px 0 var(--ar-line);
}

#single .ar_post .ar_btn_sub:hover {
  color: var(--ar-green);
  box-shadow: 0 2px 0 var(--ar-line);
}

/* ---------- 白いボックス ---------- */
#single .ar_post .ar_box {
  margin: 1.4em 0 1.6em;
  padding: 1.3em 1.5em .2em;
  background: #fff;
  border: 2px solid var(--ar-line);
  border-radius: 10px;
}

/* ---------- 紹介カード（ソフト・商品など） ---------- */
#single .ar_post .ar_card {
  margin: 1.6em 0 1.8em;
  padding: 1.4em 1.5em .3em;
  background: #fff;
  border-top: 5px solid var(--ar-green-l);
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(38, 51, 42, .07);
}

#single .ar_post .ar_card h3 {
  flex-wrap: wrap;
  margin: 0 0 .9em;
  font-size: 1.2rem;
}

/* ---------- ラベル ---------- */
#single .ar_post .ar_tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .4em;
}

#single .ar_post .ar_tag {
  display: inline-block;
  padding: .15em .75em;
  font-size: .78rem;
  font-weight: bold;
  line-height: 1.6;
  color: var(--ar-green);
  background: var(--ar-green-bg);
  border-radius: 999px;
}

#single .ar_post .ar_tag_free {
  color: #fff;
  background: #E8833A;
}

#single .ar_post .ar_tag_paid {
  color: #fff;
  background: #5B6B61;
}

/* ---------- スマホ ---------- */
@media screen and (max-width: 767px) {
  #single .ar_post {
    font-size: 15px;
  }

  #single .ar_post h2 {
    font-size: 1.15rem;
    padding: .6em .8em .6em .9em;
  }

  #single .ar_post h3 {
    font-size: 1.02rem;
  }

  #single .ar_post .ar_lead,
  #single .ar_post .ar_toc,
  #single .ar_post .ar_check,
  #single .ar_post .ar_note,
  #single .ar_post .ar_box,
  #single .ar_post .ar_card {
    padding-left: 1.1em;
    padding-right: 1.1em;
  }

  #single .ar_post .ar_btn {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    padding: .85em 1em;
  }
}