@charset "UTF-8";
/* =====================================================================
   本文ブロックの描画スタイル（§4.2）。
   spansの装飾はclass指定で描画（inline styleは書かない）。
   公開ページ・エディタプレビューで共通利用。
   ===================================================================== */

/* 本文は16〜17px・行間1.8以上（調査レポート §4：業務システムより明確に緩める） */
.post-body { font-size: 17px; line-height: 1.95; color: var(--color-ink-body); }
.post-body > * + * { margin-top: 1.1em; }

/* 見出しは本文書体で組む（丸ゴシックはサイト名と記事タイトルだけの役割）。
   長い記事のリズムは書体ではなく「区切りの装置」と「上の余白」で作る。 */
.post-body .blk-h {
  font-family: var(--font-body);
  color: var(--color-ink-heading);
  line-height: 1.5;
}
/* h2＝節。上に大きく空け、下にキャラメルの短い太罫を敷く */
.post-body h2.blk-h {
  font-size: 21px; font-weight: 800; letter-spacing: .01em;
  margin-top: 2.8em; padding-bottom: 12px; position: relative;
}
.post-body h2.blk-h::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 60px; height: 3px; background: var(--color-line-accent);
}
/* h3＝節の中の区切り。色を変えず、左のキャラメルの細罫だけで示す */
.post-body h3.blk-h {
  font-size: 17.5px; font-weight: 800; margin-top: 1.9em;
  padding-left: 12px; border-left: 3px solid var(--color-line-accent);
}
.post-body .blk-p { font-size: 17px; line-height: 1.95; }

.post-body .blk-image { margin: 1.4em 0; }
.post-body .blk-image img {
  width: 100%; border-radius: var(--radius-photo);
  border: 1px solid var(--color-border);
}

/* インライン装飾（キー名→実色はtokens.cssのCSS変数） */
.post-body .b { font-weight: 700; }
.post-body .c-blue   { color: var(--blog-color-blue); }
.post-body .c-red    { color: var(--blog-color-red); }
.post-body .c-orange { color: var(--blog-color-orange); }
.post-body .c-green  { color: var(--blog-color-green); }
.post-body .c-gray   { color: var(--blog-color-gray); }
.post-body .s-small  { font-size: 0.82em; }
.post-body .s-large  { font-size: 1.28em; }

/* リンク（管理お知らせのみ生成。studio記事には出ない） */
.post-body .blk-link {
  color: var(--blog-color-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.post-body .blk-link:hover { text-decoration: none; }

/* =====================================================================
   本文中盤のCTA（CTA①）。ブロックエディタから挿入される {type:'cta'}。
   ボタン単独ではなくテキストリンクを併置する（併置でCTRが改善した事例が複数）。
   記事内CTAは中盤＋末尾の2箇所まで。3箇所目は保存時に破棄される。
   ===================================================================== */
/* CTA①（本文中盤）は「枠線」。塗りは記事末尾のCTA②だけが持つ。
   末尾CTAの方がクリック率が高いので、レンガの塗りという最も強い表現は末尾に取っておく。
   罫も1pxにして、記事末尾（3pxの太罫）より一段弱い扱いにしている。 */
.post-body .blk-cta {
  margin: 2.4em 0; padding: 20px 4px 22px; text-align: center;
  background: transparent;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  border-radius: var(--radius-card-lg);
}
.post-body .blk-cta__lead {
  font-family: var(--font-body); font-weight: 800; font-size: 15.5px; line-height: 1.7;
  color: var(--color-ink-heading); margin-bottom: 16px;
}
/* display:flex ＋ margin-inline:auto でボタンを必ず単独行にする。
   inline-flex のままだと広い画面でテキストリンクが横に回り込む。 */
.post-body .blk-cta__btn {
  display: flex; width: 100%; max-width: 340px; margin-inline: auto;
  background: transparent;
  border: 1.5px solid var(--color-spot);
  color: var(--color-spot-deep);
}
.post-body .blk-cta__btn:hover { background: var(--color-spot-tint); color: var(--color-spot-deep); }
.post-body .blk-cta__text {
  display: flex; align-items: center; justify-content: center; min-height: 40px;
  margin-top: 10px; font-size: 13px; color: var(--color-ink-body-light);
  text-decoration: underline; text-underline-offset: 2px;
}
.post-body .blk-cta__text:hover { color: var(--color-primary-deep); }
/* CTAブロックの前後は本文の行送りに巻き込まれないようにする */
.post-body > .blk-cta + * { margin-top: 2em; }

/* =====================================================================
   エディタ内のCTAブロック（.ed-cta）。公開時の .blk-cta とは別物で、
   入力欄の集合として編集する。スタジオ・お知らせ編集の両方で使う。
   ===================================================================== */
.ed-cta {
  margin: 1.4em 0; padding: 14px 14px 16px;
  background: var(--color-spot-tint);
  border: 1.5px dashed var(--color-spot-border);
  border-radius: var(--radius-card);
}
.ed-cta__head {
  font-family: var(--font-body); font-weight: 700; font-size: 12.5px;
  color: var(--color-spot-deep); margin-bottom: 10px;
}
.ed-cta__field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.ed-cta__field > span { font-size: 12px; color: var(--color-ink-body-light); font-weight: 700; }
.ed-cta__input {
  width: 100%; min-height: 44px; padding: 10px 12px;
  border: 1.5px solid var(--color-border); border-radius: var(--radius-btn);
  background: var(--color-white); color: var(--color-ink-body);
  font-family: var(--font-body); font-size: 16px; /* 16px未満はiOSで自動ズームする */
}
.ed-cta__input:focus { outline: none; border-color: var(--color-primary); }
.ed-cta__del {
  min-height: 40px; padding: 8px 14px; cursor: pointer;
  background: var(--color-white); color: var(--color-danger);
  border: 1.5px solid var(--color-danger-border); border-radius: var(--radius-btn);
  font-family: var(--font-body); font-weight: 700; font-size: 13px;
}
.ed-cta__del:hover { background: var(--color-danger-tint); }
.ed-cta__warn {
  font-size: 12.5px; line-height: 1.7; color: var(--color-danger);
  background: var(--color-danger-tint); border-radius: 8px; padding: 8px 10px; margin-top: 4px;
}