@charset "UTF-8";
/* =========================================================
   コンポーネント
   記事本文で使う部品はすべてここで定義する。
   本文HTMLにはクラス名だけを書き、style属性は書かない。
   ========================================================= */

/* ---------------------------------------------------------
   ボタン
   --------------------------------------------------------- */
.cs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cs-sp-2);
  padding: .85em 1.6em;
  border-radius: var(--cs-r-full);
  font-size: var(--cs-fs-sm);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  transition: transform .18s var(--cs-ease), box-shadow .18s var(--cs-ease), background-color .18s var(--cs-ease);
}
.cs-btn:hover { transform: translateY(-1px); }
.cs-btn__arrow { flex-shrink: 0; }

.cs-btn--primary {
  background: var(--cs-green);
  color: var(--cs-text-invert);
  box-shadow: var(--cs-shadow);
}
.cs-btn--primary:hover { background: var(--cs-green-dark); color: var(--cs-text-invert); box-shadow: var(--cs-shadow-md); }

.cs-btn--action {
  background: var(--cs-accent);
  color: var(--cs-text-invert);
  box-shadow: 0 3px 10px rgba(242, 104, 60, .3);
}
.cs-btn--action:hover { background: var(--cs-accent-dark); color: var(--cs-text-invert); }

.cs-btn--outline {
  background: var(--cs-bg);
  color: var(--cs-navy);
  border: 1.5px solid var(--cs-border-strong);
}
.cs-btn--outline:hover { border-color: var(--cs-green); color: var(--cs-green-dark); }

.cs-btn--ghost { color: var(--cs-navy); background: var(--cs-bg-mute); }
.cs-btn--block { display: flex; width: 100%; }
.cs-btn--lg { padding: 1.05em 2em; font-size: var(--cs-fs-base); }

/* ---------------------------------------------------------
   バッジ・タグ
   --------------------------------------------------------- */
.cs-badge {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: .3em .8em;
  border-radius: var(--cs-r-full);
  font-size: var(--cs-fs-2xs);
  font-weight: 700;
  letter-spacing: .02em;
  background: var(--cs-green-light);
  color: var(--cs-green-dark);
}
.cs-badge--navy   { background: var(--cs-navy-light); color: var(--cs-navy); }
.cs-badge--accent { background: var(--cs-accent-light); color: var(--cs-accent-dark); }
.cs-badge--solid  { background: var(--cs-green); color: var(--cs-text-invert); }

.cs-tag {
  display: inline-block;
  padding: .35em .9em;
  border-radius: var(--cs-r-full);
  border: 1px solid var(--cs-border);
  font-size: var(--cs-fs-xs);
  color: var(--cs-text-muted);
  background: var(--cs-bg);
}
.cs-tag:hover { border-color: var(--cs-green); color: var(--cs-green-dark); }

/* ---------------------------------------------------------
   記事カード
   --------------------------------------------------------- */
.cs-card {
  display: flex;
  flex-direction: column;
  background: var(--cs-bg);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-r-lg);
  overflow: hidden;
  transition: box-shadow .2s var(--cs-ease), transform .2s var(--cs-ease), border-color .2s var(--cs-ease);
}
.cs-card:hover {
  box-shadow: var(--cs-shadow-md);
  transform: translateY(-2px);
  border-color: var(--cs-border-strong);
}
.cs-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--cs-bg-mute);
  overflow: hidden;
}
.cs-card__media img { width: 100%; height: 100%; object-fit: cover; }
.cs-card__cat {
  position: absolute;
  top: var(--cs-sp-3);
  left: var(--cs-sp-3);
  z-index: 1;
}
.cs-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--cs-sp-2);
  padding: var(--cs-sp-4) var(--cs-sp-4) var(--cs-sp-5);
  flex: 1;
}
.cs-card__title {
  font-size: var(--cs-fs-base);
  font-weight: 700;
  line-height: var(--cs-lh-snug);
  color: var(--cs-navy);
}
.cs-card:hover .cs-card__title { color: var(--cs-green-dark); }
.cs-card__excerpt {
  font-size: var(--cs-fs-sm);
  color: var(--cs-text-muted);
  line-height: var(--cs-lh-snug);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cs-card__meta {
  margin-top: auto;
  padding-top: var(--cs-sp-3);
  display: flex;
  align-items: center;
  gap: var(--cs-sp-3);
  font-family: var(--cs-font-num);
  font-size: var(--cs-fs-xs);
  color: var(--cs-text-faint);
}

/* 横並びの小カード（サイドバー・関連記事用） */
.cs-card-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: var(--cs-sp-3);
  align-items: start;
  padding-block: var(--cs-sp-3);
  border-bottom: 1px solid var(--cs-border);
}
.cs-card-row:last-child { border-bottom: 0; }
.cs-card-row__media {
  aspect-ratio: 16 / 10;
  border-radius: var(--cs-r-sm);
  overflow: hidden;
  background: var(--cs-bg-mute);
}
.cs-card-row__media img { width: 100%; height: 100%; object-fit: cover; }
.cs-card-row__title {
  font-size: var(--cs-fs-sm);
  font-weight: 700;
  line-height: var(--cs-lh-snug);
  color: var(--cs-navy);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cs-card-row:hover .cs-card-row__title { color: var(--cs-green-dark); }
.cs-card-row__rank {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: var(--cs-r-sm);
  background: var(--cs-navy);
  color: var(--cs-text-invert);
  font-family: var(--cs-font-num);
  font-size: var(--cs-fs-xs);
  font-weight: 700;
  margin-bottom: var(--cs-sp-1);
}

/* =========================================================
   ここから記事本文用コンポーネント
   ========================================================= */

/* ---------------------------------------------------------
   吹き出し（先生役＝ゆうや／質問役＝ぱうう）
   章の要点整理・例え話・読者の疑問の代弁に使う
   --------------------------------------------------------- */
.cs-speech {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: var(--cs-sp-3);
  align-items: start;
  margin-block: var(--cs-sp-6);
}
.cs-speech__avatar { text-align: center; }
.cs-speech__avatar img {
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  background: var(--cs-bg-mute);
  border: 2px solid var(--cs-border);
}
.cs-speech__name {
  display: block;
  margin-top: var(--cs-sp-1);
  font-size: var(--cs-fs-2xs);
  font-weight: 700;
  color: var(--cs-text-faint);
  line-height: 1.3;
}
.cs-speech__bubble {
  position: relative;
  padding: var(--cs-sp-4) var(--cs-sp-5);
  border-radius: var(--cs-r-lg);
  font-size: var(--cs-fs-sm);
  line-height: var(--cs-lh-snug);
}
.cs-speech__bubble > p { margin: 0; }
.cs-speech__bubble > p + p { margin-top: var(--cs-sp-3); }
.cs-speech__bubble::before {
  content: "";
  position: absolute;
  top: 18px;
  width: 0; height: 0;
  border-style: solid;
}

/* 質問役：左向き */
.cs-speech--ask .cs-speech__bubble {
  background: var(--cs-navy-light);
  color: var(--cs-text);
  border-top-left-radius: 4px;
}
.cs-speech--ask .cs-speech__bubble::before {
  left: -7px;
  border-width: 7px 8px 7px 0;
  border-color: transparent var(--cs-navy-light) transparent transparent;
}
.cs-speech--ask .cs-speech__avatar img { border-color: #d7e0ec; }

/* 先生役：右向き（行を反転） */
.cs-speech--teach {
  grid-template-columns: minmax(0, 1fr) 56px;
}
.cs-speech--teach .cs-speech__avatar { order: 2; }
.cs-speech--teach .cs-speech__bubble {
  order: 1;
  background: var(--cs-green-light);
  color: var(--cs-text);
  border-top-right-radius: 4px;
}
.cs-speech--teach .cs-speech__bubble::before {
  right: -7px;
  border-width: 7px 0 7px 8px;
  border-color: transparent transparent transparent var(--cs-green-light);
}
.cs-speech--teach .cs-speech__avatar img { border-color: #cfe6da; }

/* ---------------------------------------------------------
   この記事でわかること
   --------------------------------------------------------- */
.cs-summary {
  margin-block: var(--cs-sp-8);
  padding: var(--cs-sp-5) var(--cs-sp-6);
  background: var(--cs-bg-soft);
  border: 1px solid var(--cs-border);
  border-left: 4px solid var(--cs-green);
  border-radius: 0 var(--cs-r) var(--cs-r) 0;
}
.cs-summary__title {
  font-size: var(--cs-fs-xs);
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--cs-green-dark);
  margin-bottom: var(--cs-sp-3);
}
.cs-summary__list { display: grid; gap: var(--cs-sp-2); }
.cs-summary__list li {
  position: relative;
  padding-left: 26px;
  font-size: var(--cs-fs-sm);
  line-height: var(--cs-lh-snug);
  color: var(--cs-text-sub);
}
.cs-summary__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .32em;
  width: 17px; height: 17px;
  /* 緑の丸に白いチェック */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%2300874b'/%3E%3Cpath d='M6.7 11.4 3.5 8.2l1.2-1.2 2 2 4.6-4.6 1.2 1.2z' fill='%23fff'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------------------------------------------------------
   結論ボックス（H2直後に置く）
   --------------------------------------------------------- */
.cs-conclusion {
  margin-block: var(--cs-sp-6);
  padding: var(--cs-sp-5) var(--cs-sp-6);
  background: var(--cs-navy);
  color: var(--cs-text-invert);
  border-radius: var(--cs-r-lg);
}
.cs-conclusion__label {
  font-family: var(--cs-font-num);
  font-size: var(--cs-fs-2xs);
  font-weight: 700;
  letter-spacing: .14em;
  opacity: .75;
  margin-bottom: var(--cs-sp-2);
}
.cs-conclusion__title {
  font-size: var(--cs-fs-lg);
  font-weight: 800;
  line-height: var(--cs-lh-tight);
  margin-bottom: var(--cs-sp-3);
}
.cs-conclusion__body {
  font-size: var(--cs-fs-sm);
  line-height: var(--cs-lh-snug);
  opacity: .92;
}
.cs-conclusion__body > p + p { margin-top: var(--cs-sp-3); }

/* ---------------------------------------------------------
   注釈ボックス（ポイント／注意／補足）
   --------------------------------------------------------- */
.cs-note {
  margin-block: var(--cs-sp-6);
  padding: var(--cs-sp-4) var(--cs-sp-5);
  border-radius: var(--cs-r);
  border: 1px solid var(--cs-border);
  border-left: 4px solid var(--cs-green);
  background: var(--cs-green-tint);
}
.cs-note__title {
  display: flex;
  align-items: center;
  gap: var(--cs-sp-2);
  font-size: var(--cs-fs-xs);
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--cs-green-dark);
  margin-bottom: var(--cs-sp-2);
}
.cs-note__title svg { flex-shrink: 0; }
.cs-note > p, .cs-note ul, .cs-note ol {
  font-size: var(--cs-fs-sm);
  line-height: var(--cs-lh-snug);
  color: var(--cs-text-sub);
}
.cs-note > p + p { margin-top: var(--cs-sp-2); }

.cs-note--warn   { border-left-color: var(--cs-warn);   background: var(--cs-warn-bg); }
.cs-note--warn .cs-note__title { color: var(--cs-warn); }
.cs-note--danger { border-left-color: var(--cs-danger); background: var(--cs-danger-bg); }
.cs-note--danger .cs-note__title { color: var(--cs-danger); }
.cs-note--info   { border-left-color: var(--cs-info);   background: var(--cs-info-bg); }
.cs-note--info .cs-note__title { color: var(--cs-info); }

/* ---------------------------------------------------------
   表（横スクロールは表の中だけに閉じ込める）
   --------------------------------------------------------- */
.cs-tablewrap {
  margin-block: var(--cs-sp-6);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-r);
  background: var(--cs-bg);
}
.cs-tablewrap table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: var(--cs-fs-sm);
  line-height: var(--cs-lh-snug);
}
.cs-tablewrap th,
.cs-tablewrap td {
  padding: var(--cs-sp-3) var(--cs-sp-4);
  border-bottom: 1px solid var(--cs-border);
  text-align: left;
  vertical-align: top;
  /* 列が多い表は min-width:480px では足りず、セルが50pxまで潰れて
     文字が1〜2文字ずつ折り返してしまう。セル側にも下限を持たせて、
     圧縮ではなく横スクロールで逃がす。
     内側の余白ぶんを足しておかないと、文字が使える幅が残らない。 */
  min-width: calc(6em + var(--cs-sp-4) * 2);
}
/* スマホでは余白を削って、その分を文字に回す */
@media (max-width: 599px) {
  .cs-tablewrap th,
  .cs-tablewrap td {
    padding-inline: var(--cs-sp-3);
    min-width: calc(6em + var(--cs-sp-3) * 2);
  }
}
.cs-tablewrap thead th {
  background: var(--cs-navy);
  color: var(--cs-text-invert);
  font-weight: 700;
  font-size: var(--cs-fs-xs);
  letter-spacing: .03em;
  white-space: nowrap;
  position: sticky;
  top: 0;
}
.cs-tablewrap tbody tr:nth-child(even) { background: var(--cs-bg-soft); }
.cs-tablewrap tbody tr:last-child td { border-bottom: 0; }
.cs-tablewrap tbody th {
  font-weight: 700;
  color: var(--cs-navy);
  background: var(--cs-bg-soft);
  white-space: nowrap;
}
.cs-tablewrap__hint {
  display: block;
  padding: var(--cs-sp-2) var(--cs-sp-4);
  font-size: var(--cs-fs-2xs);
  color: var(--cs-text-faint);
  background: var(--cs-bg-soft);
  border-bottom: 1px solid var(--cs-border);
}
@media (min-width: 700px) { .cs-tablewrap__hint { display: none; } }

/* ---------------------------------------------------------
   手順（ステップ）
   --------------------------------------------------------- */
.cs-steps {
  margin-block: var(--cs-sp-6);
  display: grid;
  gap: 0;
  counter-reset: cs-step;
}
.cs-steps__item {
  position: relative;
  counter-increment: cs-step;
  padding: 0 0 var(--cs-sp-6) var(--cs-sp-10);
}
.cs-steps__item::before {
  content: counter(cs-step);
  position: absolute;
  left: 0; top: 0;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--cs-green);
  color: var(--cs-text-invert);
  font-family: var(--cs-font-num);
  font-size: var(--cs-fs-sm);
  font-weight: 700;
}
.cs-steps__item::after {
  content: "";
  position: absolute;
  left: 15px; top: 34px; bottom: 6px;
  width: 2px;
  background: var(--cs-border);
}
.cs-steps__item:last-child { padding-bottom: 0; }
.cs-steps__item:last-child::after { display: none; }
.cs-steps__title {
  font-size: var(--cs-fs-md);
  font-weight: 700;
  color: var(--cs-navy);
  line-height: var(--cs-lh-tight);
  padding-top: 3px;
  margin-bottom: var(--cs-sp-2);
}
.cs-steps__body { font-size: var(--cs-fs-sm); color: var(--cs-text-sub); line-height: var(--cs-lh-snug); }

/* ---------------------------------------------------------
   よくある質問
   --------------------------------------------------------- */
.cs-faq { margin-block: var(--cs-sp-6); display: grid; gap: var(--cs-sp-3); }
.cs-faq__item {
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-r);
  background: var(--cs-bg);
  overflow: hidden;
}
/* Q/Aのバッジは絶対配置で置く。
   grid で列を切ると、質問や答えの中に <a> などが直接置かれたときに
   1列目（24px）へ押し込まれて、文字が1文字ずつ折り返してしまう。
   アフィリエイトのテキストリンクが縦に潰れる事故の原因がこれだった。 */
.cs-faq__q {
  display: block;
  position: relative;
  width: 100%;
  padding: var(--cs-sp-4) calc(var(--cs-sp-4) + 20px + var(--cs-sp-3)) var(--cs-sp-4) calc(var(--cs-sp-4) + 24px + var(--cs-sp-3));
  font-size: var(--cs-fs-sm);
  font-weight: 700;
  color: var(--cs-navy);
  line-height: var(--cs-lh-snug);
  text-align: left;
  list-style: none;
}
.cs-faq__q::-webkit-details-marker { display: none; }
.cs-faq__q::before {
  content: "Q";
  position: absolute;
  left: var(--cs-sp-4);
  top: var(--cs-sp-4);
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--cs-navy);
  color: var(--cs-text-invert);
  font-family: var(--cs-font-num);
  font-size: var(--cs-fs-xs);
  font-weight: 700;
}
.cs-faq__q::after {
  content: "";
  position: absolute;
  right: var(--cs-sp-4);
  top: calc(var(--cs-sp-4) + .35em);
  width: 12px; height: 12px;
  background: var(--cs-text-muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 3.5 6 8.5l5-5' stroke='%23000' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 3.5 6 8.5l5-5' stroke='%23000' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform .2s var(--cs-ease);
}
.cs-faq__item[open] .cs-faq__q::after { transform: rotate(180deg); }
.cs-faq__a {
  display: block;
  position: relative;
  padding: 0 var(--cs-sp-4) var(--cs-sp-4) calc(var(--cs-sp-4) + 24px + var(--cs-sp-3));
  font-size: var(--cs-fs-sm);
  color: var(--cs-text-sub);
  line-height: var(--cs-lh-snug);
}
.cs-faq__a::before {
  content: "A";
  position: absolute;
  left: var(--cs-sp-4);
  top: 0;
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--cs-green-light);
  color: var(--cs-green-dark);
  font-family: var(--cs-font-num);
  font-size: var(--cs-fs-xs);
  font-weight: 700;
}
.cs-faq__a > p + p { margin-top: var(--cs-sp-2); }

/* ---------------------------------------------------------
   チェックリスト
   --------------------------------------------------------- */
.cs-checklist { margin-block: var(--cs-sp-5); display: grid; gap: var(--cs-sp-2); }
.cs-checklist li {
  position: relative;
  padding-left: 30px;
  font-size: var(--cs-fs-sm);
  line-height: var(--cs-lh-snug);
  color: var(--cs-text-sub);
  padding: var(--cs-sp-2) 0;
  border-bottom: 1px dashed var(--cs-border);
}
.cs-checklist li:last-child { border-bottom: 0; }
.cs-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .2em;
  width: 18px; height: 18px;
  border: 2px solid var(--cs-green);
  border-radius: var(--cs-r-sm);
  background: var(--cs-bg);
}

/* ---------------------------------------------------------
   サービス紹介カード（アフィリエイト導線）
   --------------------------------------------------------- */
.cs-service {
  margin-block: var(--cs-sp-6);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-r-lg);
  background: var(--cs-bg);
  overflow: hidden;
  box-shadow: var(--cs-shadow-sm);
}
.cs-service__head {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: var(--cs-sp-3);
  align-items: center;
  padding: var(--cs-sp-4) var(--cs-sp-5);
  border-bottom: 1px solid var(--cs-border);
  background: var(--cs-bg-soft);
}
.cs-service__logo {
  width: 52px; height: 52px;
  border-radius: var(--cs-r);
  object-fit: contain;
  background: var(--cs-bg);
  border: 1px solid var(--cs-border);
}
.cs-service__name {
  font-size: var(--cs-fs-md);
  font-weight: 800;
  color: var(--cs-navy);
  line-height: var(--cs-lh-tight);
}
.cs-service__for {
  margin-top: var(--cs-sp-1);
  font-size: var(--cs-fs-xs);
  color: var(--cs-text-muted);
}
.cs-service__specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--cs-border);
}
.cs-service__spec {
  padding: var(--cs-sp-3) var(--cs-sp-2);
  text-align: center;
  border-right: 1px solid var(--cs-border);
}
.cs-service__spec:last-child { border-right: 0; }
.cs-service__spec-val {
  font-family: var(--cs-font-num);
  font-size: var(--cs-fs-md);
  font-weight: 800;
  color: var(--cs-green-dark);
  line-height: 1.3;
}
.cs-service__spec-key {
  font-size: var(--cs-fs-2xs);
  color: var(--cs-text-faint);
  margin-top: 2px;
}
.cs-service__body { padding: var(--cs-sp-4) var(--cs-sp-5); }
.cs-service__points { display: grid; gap: var(--cs-sp-2); }
.cs-service__points li {
  position: relative;
  padding-left: 18px;
  font-size: var(--cs-fs-sm);
  color: var(--cs-text-sub);
  line-height: var(--cs-lh-snug);
}
.cs-service__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .7em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cs-green);
}
.cs-service__foot { padding: 0 var(--cs-sp-5) var(--cs-sp-5); }
.cs-service__note {
  margin-top: var(--cs-sp-3);
  font-size: var(--cs-fs-2xs);
  color: var(--cs-text-faint);
  text-align: center;
}

/* ---------------------------------------------------------
   まとめCTA（記事末尾）
   --------------------------------------------------------- */
.cs-cta {
  margin-block: var(--cs-sp-10);
  padding: var(--cs-sp-6) var(--cs-sp-5);
  border-radius: var(--cs-r-lg);
  background: linear-gradient(160deg, var(--cs-navy) 0%, var(--cs-navy-mid) 100%);
  color: var(--cs-text-invert);
  text-align: center;
}
.cs-cta__label {
  font-family: var(--cs-font-num);
  font-size: var(--cs-fs-2xs);
  font-weight: 700;
  letter-spacing: .14em;
  opacity: .7;
}
.cs-cta__title {
  margin-top: var(--cs-sp-2);
  font-size: var(--cs-fs-lg);
  font-weight: 800;
  line-height: var(--cs-lh-tight);
}
.cs-cta__lead {
  margin-top: var(--cs-sp-3);
  font-size: var(--cs-fs-sm);
  line-height: var(--cs-lh-snug);
  opacity: .85;
}
.cs-cta__actions {
  margin-top: var(--cs-sp-5);
  display: grid;
  gap: var(--cs-sp-3);
}
@media (min-width: 620px) {
  .cs-cta { padding: var(--cs-sp-8); }
  .cs-cta__actions { grid-auto-flow: column; justify-content: center; }
}
.cs-cta__note { margin-top: var(--cs-sp-4); font-size: var(--cs-fs-2xs); opacity: .6; }

/* PR表記 */
.cs-pr {
  display: inline-block;
  padding: .2em .6em;
  border-radius: var(--cs-r-sm);
  background: var(--cs-bg-mute);
  color: var(--cs-text-faint);
  font-size: var(--cs-fs-2xs);
  letter-spacing: .04em;
}

/* ---------------------------------------------------------
   目次
   --------------------------------------------------------- */
.cs-toc {
  margin-block: var(--cs-sp-8);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-r-lg);
  background: var(--cs-bg-soft);
  overflow: hidden;
}
.cs-toc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cs-sp-3);
  padding: var(--cs-sp-4) var(--cs-sp-5);
  border-bottom: 1px solid var(--cs-border);
}
.cs-toc__title {
  display: flex;
  align-items: center;
  gap: var(--cs-sp-2);
  font-size: var(--cs-fs-sm);
  font-weight: 800;
  color: var(--cs-navy);
  letter-spacing: .04em;
}
.cs-toc__toggle {
  font-size: var(--cs-fs-xs);
  color: var(--cs-green-dark);
  font-weight: 700;
}
.cs-toc__body { padding: var(--cs-sp-4) var(--cs-sp-5); }
.cs-toc__list { counter-reset: cs-toc; display: grid; gap: var(--cs-sp-1); }
.cs-toc__list > li { counter-increment: cs-toc; }
/* 番号は絶対配置。grid で列を切ると、中身が増えたときに
   列がずれて文字が縦に潰れるため使わない。 */
.cs-toc__list > li > a {
  position: relative;
  display: block;
  padding: var(--cs-sp-2) 0 var(--cs-sp-2) 26px;
  font-size: var(--cs-fs-sm);
  font-weight: 700;
  color: var(--cs-text);
  line-height: var(--cs-lh-snug);
}
.cs-toc__list > li > a::before {
  content: counter(cs-toc);
  position: absolute;
  left: 0;
  top: var(--cs-sp-2);
  font-family: var(--cs-font-num);
  font-size: var(--cs-fs-xs);
  font-weight: 700;
  color: var(--cs-green);
}
.cs-toc__list > li > a:hover { color: var(--cs-green-dark); }
.cs-toc__sub { padding-left: 26px; display: grid; gap: 2px; margin-bottom: var(--cs-sp-2); }
.cs-toc__sub a {
  display: block;
  padding: var(--cs-sp-1) 0 var(--cs-sp-1) var(--cs-sp-4);
  font-size: var(--cs-fs-xs);
  font-weight: 400;
  color: var(--cs-text-muted);
  border-left: 2px solid var(--cs-border);
  line-height: var(--cs-lh-snug);
}
.cs-toc__sub a:hover { color: var(--cs-green-dark); border-left-color: var(--cs-green); }

/* ---------------------------------------------------------
   著者情報（E-E-A-T）
   --------------------------------------------------------- */
.cs-author {
  margin-block: var(--cs-sp-8);
  padding: var(--cs-sp-5);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-r-lg);
  background: var(--cs-bg-soft);
}
.cs-author__head {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: var(--cs-sp-4);
  align-items: center;
}
.cs-author__avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  border: 2px solid var(--cs-bg);
  box-shadow: var(--cs-shadow-sm);
}
.cs-author__name { font-size: var(--cs-fs-md); font-weight: 800; color: var(--cs-navy); }
.cs-author__role { font-size: var(--cs-fs-xs); color: var(--cs-text-muted); margin-top: 2px; }
.cs-author__bio {
  margin-top: var(--cs-sp-4);
  font-size: var(--cs-fs-sm);
  color: var(--cs-text-sub);
  line-height: var(--cs-lh-snug);
}
.cs-author__facts {
  margin-top: var(--cs-sp-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--cs-sp-2);
}

/* ---------------------------------------------------------
   出典・参考
   --------------------------------------------------------- */
.cs-sources {
  margin-block: var(--cs-sp-6);
  padding: var(--cs-sp-4) var(--cs-sp-5);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-r);
  background: var(--cs-bg);
}
.cs-sources__title {
  font-size: var(--cs-fs-xs);
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--cs-text-muted);
  margin-bottom: var(--cs-sp-2);
}
.cs-sources ol { display: grid; gap: var(--cs-sp-1); counter-reset: cs-src; }
.cs-sources li {
  counter-increment: cs-src;
  font-size: var(--cs-fs-xs);
  color: var(--cs-text-muted);
  line-height: var(--cs-lh-snug);
  padding-left: 1.6em;
  position: relative;
}
.cs-sources li::before {
  content: "[" counter(cs-src) "]";
  position: absolute; left: 0;
  font-family: var(--cs-font-num);
  color: var(--cs-text-faint);
}

/* ---------------------------------------------------------
   引用
   --------------------------------------------------------- */
.cs-quote {
  margin-block: var(--cs-sp-6);
  padding: var(--cs-sp-4) var(--cs-sp-5);
  border-left: 3px solid var(--cs-border-strong);
  background: var(--cs-bg-soft);
  border-radius: 0 var(--cs-r) var(--cs-r) 0;
  font-size: var(--cs-fs-sm);
  color: var(--cs-text-sub);
  line-height: var(--cs-lh-snug);
}
.cs-quote cite {
  display: block;
  margin-top: var(--cs-sp-2);
  font-size: var(--cs-fs-xs);
  color: var(--cs-text-faint);
  font-style: normal;
}

/* ---------------------------------------------------------
   ページネーション
   --------------------------------------------------------- */
.cs-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--cs-sp-2);
  margin-top: var(--cs-sp-10);
}
.cs-pager a, .cs-pager span {
  display: grid;
  place-items: center;
  min-width: 40px; height: 40px;
  padding-inline: var(--cs-sp-3);
  border-radius: var(--cs-r-sm);
  border: 1px solid var(--cs-border);
  font-family: var(--cs-font-num);
  font-size: var(--cs-fs-sm);
  font-weight: 700;
  color: var(--cs-text-sub);
  background: var(--cs-bg);
}
.cs-pager a:hover { border-color: var(--cs-green); color: var(--cs-green-dark); }
.cs-pager .current { background: var(--cs-navy); border-color: var(--cs-navy); color: var(--cs-text-invert); }

/* 目次・カード内のリンクは本文リンクの下線を継承しない */
.cs-toc a,
.cs-card a,
.cs-card-row a,
.cs-widget a,
.cs-crumbs a,
.cs-author a { text-decoration: none; }

/* ---------------------------------------------------------
   検索フォーム
   --------------------------------------------------------- */
.cs-searchform { margin-bottom: var(--cs-sp-4); display: flex; gap: var(--cs-sp-2); }
.cs-searchform__input {
  flex: 1;
  min-width: 0;
  padding: .75em 1em;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-r-sm);
  background: var(--cs-bg);
  color: var(--cs-text);
  font-size: var(--cs-fs-sm);
}
.cs-searchform__input:focus { border-color: var(--cs-green); }

/* ヘッダーの検索パネル */
.cs-searchpanel {
  display: none;
  border-bottom: 1px solid var(--cs-border);
  background: var(--cs-bg-soft);
  padding-block: var(--cs-sp-4);
}
.cs-searchpanel.is-open { display: block; }
.cs-searchpanel .cs-searchform { margin-bottom: 0; }

/* ---------------------------------------------------------
   空の状態（検索0件・404）
   --------------------------------------------------------- */
.cs-empty {
  max-width: 40rem;
  margin-inline: auto;
  padding-block: var(--cs-sp-12);
  text-align: center;
}
.cs-empty__code {
  font-family: var(--cs-font-num);
  font-size: 4rem;
  font-weight: 800;
  color: var(--cs-border-strong);
  line-height: 1;
  margin-bottom: var(--cs-sp-4);
}
.cs-empty__title {
  font-size: var(--cs-fs-lg);
  font-weight: 800;
  color: var(--cs-navy);
  line-height: var(--cs-lh-tight);
}
.cs-empty__lead {
  margin-top: var(--cs-sp-4);
  font-size: var(--cs-fs-sm);
  color: var(--cs-text-muted);
  line-height: var(--cs-lh-snug);
}
.cs-empty .cs-searchform { margin-top: var(--cs-sp-6); }
.cs-empty .cs-chips { margin-top: var(--cs-sp-6); }
.cs-empty__actions { margin-top: var(--cs-sp-8); }

/* サイドバーの補助文 */
.cs-widget__or {
  margin-top: var(--cs-sp-4);
  margin-bottom: var(--cs-sp-2);
  font-size: var(--cs-fs-xs);
  color: var(--cs-text-faint);
  text-align: center;
}

/* セクション末尾の「もっと見る」 */
.cs-section__more { margin-top: var(--cs-sp-8); text-align: center; }

/* 検索結果ヘッダーのフォーム */
.cs-archhead__form { margin-top: var(--cs-sp-5); max-width: 34rem; }

/* 吹き出しアイコンは遅延読み込みの対象外にする（小さく、会話の流れを止めないため） */
.cs-speech__img { background: var(--cs-bg-mute); }

/* ---------------------------------------------------------
   横型の記事カード（一覧向け）
   サムネイルを左、テキストを右に置いて一覧性を上げる。
   縦型カードより1画面に多く並び、見出しを追いやすい。
   --------------------------------------------------------- */
.cs-hcard {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: var(--cs-sp-4);
  /* start にしないと、行の高さに引き伸ばされて
     サムネイルの縦横比が壊れ、隣のテキストに重なる */
  align-items: start;
  padding: var(--cs-sp-4);
  background: var(--cs-bg);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-r-lg);
  transition: border-color .18s var(--cs-ease), box-shadow .18s var(--cs-ease);
}
.cs-hcard:hover { border-color: var(--cs-green); box-shadow: var(--cs-shadow); }

@media (min-width: 700px) {
  .cs-hcard { grid-template-columns: 220px minmax(0, 1fr); gap: var(--cs-sp-6); padding: var(--cs-sp-5); }
}

.cs-hcard__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--cs-r);
  overflow: hidden;
  background: var(--cs-bg-mute);
}
.cs-hcard__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cs-hcard__body {
  display: flex;
  flex-direction: column;
  gap: var(--cs-sp-2);
  min-width: 0;
}
.cs-hcard__cat {
  align-self: flex-start;
  font-size: var(--cs-fs-2xs);
  font-weight: 700;
  color: var(--cs-green-dark);
  background: var(--cs-green-light);
  padding: .25em .7em;
  border-radius: var(--cs-r-sm);
}
.cs-hcard__title {
  font-size: var(--cs-fs-base);
  font-weight: 700;
  line-height: var(--cs-lh-snug);
  color: var(--cs-navy);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cs-hcard:hover .cs-hcard__title { color: var(--cs-green-dark); }
.cs-hcard__excerpt {
  font-size: var(--cs-fs-sm);
  color: var(--cs-text-muted);
  line-height: var(--cs-lh-snug);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 699px) {
  .cs-hcard__excerpt { display: none; }
  .cs-hcard__title { -webkit-line-clamp: 3; font-size: var(--cs-fs-sm); }
}
.cs-hcard__meta {
  margin-top: auto;
  padding-top: var(--cs-sp-2);
  display: flex;
  gap: var(--cs-sp-4);
  font-family: var(--cs-font-num);
  font-size: var(--cs-fs-xs);
  color: var(--cs-text-faint);
}

/* 一覧の並び */
.cs-list { display: grid; gap: var(--cs-sp-4); }