/* =====================================================================
 * 記事本文の「クラス無し HTML」向けスタイル (2026-09 追加)
 *
 * 目的: エディタやマークダウン変換が出力する素直な HTML (h3 / p / ul / table / blockquote / figure) を、
 *       従来の class 付き HTML (h3_ttl_article, listType, tableArea_article など) と同じ見た目にする。
 * 方針: セレクタは .article-body 配下の「class 属性を持たない要素」だけに効かせる (:not([class]))。
 *       既存記事はすべて class 付きなので、このファイルの影響を一切受けない。
 * 名前付きブロック (cp-comment / cp-link / cp-ad) は新しい記事専用のクラス。
 * ===================================================================== */

/* 見出し ------------------------------------------------------------ */
.article-body h3:not([class]) {
  background-color: #F7F8CD;
  padding: 10px 15px;
  border-radius: 5px;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 1rem;
}
.article-body h4:not([class]),
.article-body h5:not([class]) {
  position: relative;
  padding-left: 25px;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 1rem;
}
.article-body h4:not([class])::before,
.article-body h5:not([class])::before {
  position: absolute;
  content: "";
  background-color: #D1D721;
  width: 15px;
  height: 15px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.article-body h5:not([class])::before { height: 2px; }

/* 段落 -------------------------------------------------------------- */
.article-body p:not([class]) { margin-bottom: 1.5rem; }
.article-body hr:not([class]) { margin: 2rem 0; }

/* リスト (listType 相当) ------------------------------------------- */
.article-body > ul:not([class]),
.article-body > ol:not([class]) {
  background-color: #F7F9FA;
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 1.5rem;
  list-style: none;
}
.article-body > ul:not([class]) > li {
  position: relative;
  margin-bottom: 10px;
  padding-left: 15px;
}
.article-body > ul:not([class]) > li::before {
  content: "";
  position: absolute;
  background-color: #D1D721;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  top: 10px;
  left: 0;
}
.article-body > ol:not([class]) { counter-reset: count 0; }
.article-body > ol:not([class]) > li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 10px;
}
.article-body > ol:not([class]) > li::before {
  content: counter(count);
  counter-increment: count 1;
  background-color: #D1D721;
  color: #fff;
  font-size: 14px;
  width: 24px;
  height: 24px;
  display: block;
  text-align: center;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
}
.article-body > ul:not([class]) > li:last-child,
.article-body > ol:not([class]) > li:last-child { margin-bottom: 0; }

/* 表 (tableArea_article 相当。PC では中央 10 カラム幅) ------------- */
.article-body > table:not([class]) {
  border-collapse: collapse;
  width: 100%;
  margin: 0 auto 1.5rem;
}
.article-body > table:not([class]) tr,
.article-body > table:not([class]) td,
.article-body > table:not([class]) th {
  border: 1px solid #D1D721;
}
.article-body > table:not([class]) td,
.article-body > table:not([class]) th { padding: 10px; }
.article-body > table:not([class]) th {
  background-color: #ffffee;
  font-weight: 600;
  width: 30%;
  text-align: left;
}

/* 画像 (row > col-lg-8 offset-lg-2 相当。PC では中央 8 カラム幅) ---- */
.article-body figure:not([class]) {
  margin: 0 auto 1.5rem;
  text-align: center;
}
.article-body figure:not([class]) img,
.article-body p:not([class]) > img:only-child {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
.article-body figure:not([class]) figcaption {
  font-size: 14px;
  color: #8A99A3;
  margin-top: .5rem;
}

/* 引用 (gray_bg3 btn_opacity p-lg-4 p-3 mb-4 fontS 相当) ------------ */
.article-body blockquote:not([class]) {
  background-color: #F7F9FA;
  padding: 1rem;
  margin-bottom: 1.5rem;
  font-size: 14px;
  border-radius: 5px;
}
.article-body blockquote:not([class]) p:last-child { margin-bottom: 0; }
.article-body blockquote:not([class]) cite {
  display: block;
  margin-top: .5rem;
  font-style: normal;
  color: #8A99A3;
}

/* 名前付きブロック ------------------------------------------------- */
/* 専門家のコメント (導入文 = 看護師イラスト付き)。cp-comment--writer は監修者のコメント */
/* grid にしておくと、エディタで枠の中に段落が増えても右に並ばず下に積まれる */
.article-body .cp-comment {
  display: grid;
  grid-template-columns: 95px minmax(0, 1fr);
  column-gap: 25px;
  align-items: center;
  padding-bottom: 40px;
  border-bottom: 2px solid #D1D721;
  margin-bottom: 40px;
}
.article-body .cp-comment img {
  grid-column: 1;
  grid-row: 1 / span 30;
  width: 95px;
  height: 95px;
  object-fit: contain;
}
.article-body .cp-comment > :not(img) {
  grid-column: 2;
  min-width: 0;
}
.article-body .cp-comment p {
  font-weight: 700;
  margin: 0;
}
.article-body .cp-comment .cp-comment__body p + p { margin-top: .75rem; }
.article-body .cp-comment--writer {
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
}

/* 関連記事へのリンク枠 */
.article-body .cp-link {
  background-color: #F7F9FA;
  padding: 1rem;
  margin-bottom: 1.5rem;
  border-radius: 5px;
}
.article-body .cp-link .cp-link__label {
  font-size: 14px;
  color: #8A99A3;
  margin-bottom: .25rem;
}
.article-body .cp-link a {
  font-weight: 700;
  color: #EA6C6C;
}
.article-body .cp-link a:hover { opacity: .6; }

/* Amazon などの商品紹介枠 (adArea 相当) */
.article-body .cp-ad {
  background-color: #F7F9FA;
  padding: 1rem;
  margin-bottom: 1.5rem;
  border-radius: 5px;
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}
.article-body .cp-ad .cp-ad__image {
  flex: 0 0 25%;
  text-align: center;
}
.article-body .cp-ad .cp-ad__image img { max-width: 100%; height: auto; }
.article-body .cp-ad .cp-ad__body { flex: 1; min-width: 0; }
.article-body .cp-ad .cp-ad__title { font-weight: 700; margin-bottom: .5rem; }
.article-body .cp-ad .cp-ad__text { font-size: 14px; margin-bottom: 1rem; }
.article-body .cp-ad .cp-ad__button {
  display: inline-block;
  min-width: 50%;
  color: #fff;
  text-align: center;
  padding: 15px;
  border-radius: 5px;
  background-color: #FF9900;
  text-decoration: none;
}
.article-body .cp-ad .cp-ad__button:hover { opacity: .6; }

/* PC (Bootstrap の lg 以上) の幅・余白 ----------------------------- */
@media (min-width: 992px) {
  .article-body > table:not([class]) { width: 83.3333%; }
  .article-body figure:not([class]) { width: 66.6667%; }
  .article-body blockquote:not([class]),
  .article-body .cp-ad { padding: 1.5rem; }
}

/* スマホ ----------------------------------------------------------- */
@media (max-width: 767.98px) {
  .article-body h3:not([class]) { padding: 8px 10px; }
  .article-body h4:not([class]),
  .article-body h5:not([class]) { padding-left: 20px; }
  .article-body h4:not([class])::before { width: 10px; height: 10px; }
  .article-body h5:not([class])::before { width: 10px; }
  .article-body > ul:not([class]),
  .article-body > ol:not([class]) { padding: 15px; }
  .article-body .cp-comment { display: block; }
  .article-body .cp-comment img { margin: 0 auto 1rem; display: block; }
  .article-body .cp-ad { display: block; }
  .article-body .cp-ad .cp-ad__image { margin-bottom: 1rem; }
  .article-body .cp-ad .cp-ad__button { display: block; }
}