@charset "UTF-8";
/* cms 3/3 ｜ 含む: SNSボタン（cms-social） / 目次（cms-toc） / マーカー（蛍光ペン）：mark または .cms-marker / 関連記事リンクカード（cms-linkcard） / ★評価（cms-rating）：style="--score:4.5" / CTAバナー（cms-cta） / モバイル ｜ 元: blog-components.css */
.article .cms-acc--qa .cms-acc__body::before {
  content: "A";
  position: absolute;
  left: 14px;
  top: 14px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: #5b6fb0;
  color: #fff;
  font-weight: 800;
  font-size: 0.8125rem;
}

/* ===== SNSボタン（cms-social） ===== */
.article .cms-social { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; }
.article .cms-social__btn {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  color: #fff;
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-base), filter var(--transition-base);
}
.article .cms-social__btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.article .cms-social__btn svg { width: 22px; height: 22px; fill: currentColor; display: block; }
.article .cms-social__btn--x { background: #000; }
.article .cms-social__btn--instagram {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}
.article .cms-social__btn--line { background: #06c755; }
.article .cms-social__btn--youtube { background: #ff0000; }
/* ラベル付き（横長ピル）にしたいとき：--wide ＋ <span> でテキスト */
.article .cms-social__btn--wide {
  width: auto;
  grid-auto-flow: column;
  gap: 8px;
  padding: 0 18px;
  border-radius: var(--radius-lg);
  font-weight: 700;
  font-size: 0.875rem;
}

/* ===== 目次（cms-toc） ===== */
.article .cms-toc {
  margin: 24px 0;
  padding: 16px 20px;
  background: var(--color-primary-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.article .cms-toc__title { margin: 0 0 10px; font-weight: 700; font-size: 1rem; }
.article .cms-toc__list { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.article .cms-toc__list > li { counter-increment: toc; position: relative; padding-left: 1.9em; margin-bottom: 6px; }
.article .cms-toc__list > li::before {
  content: counter(toc) ".";
  position: absolute; left: 0; top: 0;
  color: var(--color-button-hover); font-weight: 700;
}
.article .cms-toc__sub { padding-left: 1.2em; margin: 4px 0; font-size: 0.9375rem; }
.article .cms-toc a { color: var(--color-text); text-decoration: none; }
.article .cms-toc a:hover { color: var(--color-button-hover); opacity: 1; }

/* ===== マーカー（蛍光ペン）：mark または .cms-marker ===== */
.article mark,
.article .cms-marker { background: linear-gradient(transparent 58%, #fff3a8 58%); color: inherit; padding: 0 1px; }
.article .cms-marker--pink { background: linear-gradient(transparent 58%, #ffd6e0 58%); }
.article .cms-marker--blue { background: linear-gradient(transparent 58%, #cfe6ff 58%); }

/* ===== 関連記事リンクカード（cms-linkcard） ===== */
.article .cms-linkcard {
  display: block;
  position: relative;
  margin: 20px 0;
  padding: 16px 44px 16px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: var(--color-text);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.article .cms-linkcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); opacity: 1; }
.article .cms-linkcard:focus-visible { outline: 2px solid var(--color-button-hover); outline-offset: 2px; opacity: 1; }
.article .cms-linkcard__label { display: inline-block; margin-bottom: 4px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; color: var(--color-button-hover); }
.article .cms-linkcard__title { display: block; font-weight: 700; color: var(--color-text); }
.article .cms-linkcard__desc { display: block; margin-top: 4px; font-size: 0.875rem; color: var(--color-text-sub); }
.article .cms-linkcard::after {
  content: "";
  position: absolute; right: 18px; top: 50%;
  width: 8px; height: 8px;
  border-right: 2px solid var(--color-button-hover);
  border-bottom: 2px solid var(--color-button-hover);
  transform: translateY(-50%) rotate(-45deg);
}

/* ===== ★評価（cms-rating）：style="--score:4.5" ===== */
.article .cms-rating { display: inline-flex; align-items: center; gap: 8px; }
.article .cms-rating__stars { position: relative; display: inline-block; font-size: 1.15rem; line-height: 1; letter-spacing: 2px; font-family: sans-serif; }
.article .cms-rating__stars::before { content: "★★★★★"; color: #e0e0e0; }
.article .cms-rating__stars::after {
  content: "★★★★★";
  position: absolute; left: 0; top: 0;
  width: calc(var(--score, 0) / 5 * 100%);
  overflow: hidden; white-space: nowrap;
  color: #f5a623;
}
.article .cms-rating__val { font-weight: 700; color: var(--color-text); }
/* スコアはクラスで指定（CSPがインラインstyleを許可しないため。--NN=スコア×10。0.5刻み・05=0.5〜50=5.0）。
   使い方：<span class="cms-rating cms-stars--45">…</span>（旧 style="--score:4.5" の置き換え） */
.article .cms-stars--05 { --score: 0.5; }
.article .cms-stars--10 { --score: 1; }
.article .cms-stars--15 { --score: 1.5; }
.article .cms-stars--20 { --score: 2; }
.article .cms-stars--25 { --score: 2.5; }
.article .cms-stars--30 { --score: 3; }
.article .cms-stars--35 { --score: 3.5; }
.article .cms-stars--40 { --score: 4; }
.article .cms-stars--45 { --score: 4.5; }
.article .cms-stars--50 { --score: 5; }

/* ===== CTAバナー（cms-cta） ===== */
.article .cms-cta {
  margin: 28px 0;
  padding: 24px;
  text-align: center;
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-accent));
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-lg);
}
.article .cms-cta__title { margin: 0 0 8px; font-weight: 700; font-size: 1.125rem; color: var(--color-text); }
.article .cms-cta__text { margin: 0 0 16px; font-size: 0.9375rem; color: var(--color-text-sub); }
.article .cms-cta .cms-btn { margin: 0 auto; }

/* ===== モバイル ===== */
@media (max-width: 600px) {
  .article .cms-bars__row { grid-template-columns: 1fr; gap: 4px; }
  .article .cms-flow__step { grid-template-columns: 40px 1fr; gap: 12px; }
  .article .cms-flow__step::before { left: 19px; }
  .article .cms-flow__marker { width: 40px; height: 40px; font-size: 1rem; }
}