/* ==========================================================================
   エディターで書かれた本文の見た目（共通）

   お役立ち情報（クラシックエディター）と固定ページ（ブロックエディター）で
   同じスタイルを使う。2箇所に同じ指定を持つと、片方だけ直して食い違うため
   ここに1本化している。

   書き手は「見出し2」「見出し3」「箇条書き」を選ぶだけで見た目が揃う。

   サイト全体の作りに合わせて、見出しは明朝（--font-jp）、本文はゴシック（--font-sans）。
   @since 1.68.0
   ========================================================================== */

.mg-entry {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 2.05;
  letter-spacing: var(--ls-base);
  color: var(--color-text);
}

.mg-entry > *:first-child { margin-top: 0; }
.mg-entry > *:last-child { margin-bottom: 0; }

.mg-entry p { margin: 0 0 1.9em; }

/* ----- 見出し ----- */

.mg-entry h2 {
  font-family: var(--font-jp);
  font-size: var(--fs-lg);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-base);
  margin: 3em 0 1.2em;
  padding-bottom: 0.6em;
  border-bottom: 1px solid var(--color-border);
}

.mg-entry h3 {
  font-family: var(--font-jp);
  font-size: var(--fs-md);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: 2.4em 0 0.9em;
  padding-left: 0.7em;
  border-left: 2px solid var(--color-secondary);
}

/* h4 まで使われても破綻しないように */
.mg-entry h4 {
  font-family: var(--font-jp);
  font-size: var(--fs-base);
  font-weight: 500;
  letter-spacing: var(--ls-tight);
  margin: 2em 0 0.7em;
}

/* ----- 箇条書き ----- */

/*
 * style.css で ul / ol のマーカーを全体的に消している（list-style: none）。
 * 本文は箇条書きが読み取れないと意味が通らないので、ここで戻す。
 * これを消すと点も番号も出なくなるので注意。
 */
.mg-entry ul,
.mg-entry ol {
  margin: 0 0 1.9em;
  padding-left: 1.4em;
}

.mg-entry ul { list-style: disc; }
.mg-entry ol { list-style: decimal; }
.mg-entry ul ul { list-style: circle; }

.mg-entry li { margin-bottom: 0.5em; }
.mg-entry li:last-child { margin-bottom: 0; }

.mg-entry ul li::marker { color: var(--color-secondary); }

.mg-entry ol li::marker {
  color: var(--color-secondary);
  font-family: var(--font-en);
}

.mg-entry li > ul,
.mg-entry li > ol { margin: 0.5em 0 0; }

/* ----- 引用 ----- */

.mg-entry blockquote {
  margin: 0 0 1.9em;
  padding: 1.2em 1.5em;
  background-color: var(--color-bg-soft);
  border-left: 2px solid var(--color-secondary);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.mg-entry blockquote > *:last-child { margin-bottom: 0; }

/* ブロックエディターの引用ブロック（出典つき）にも効かせる */
.mg-entry blockquote cite {
  display: block;
  margin-top: 0.8em;
  font-size: var(--fs-xs);
  font-style: normal;
}

/* ----- 表 ----- */

/*
 * 表は横幅を超えることがある。ページ全体を横スクロールさせないよう、
 * 表そのものに横スクロールを持たせる。
 */
.mg-entry table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 0 0 1.9em;
  font-size: var(--fs-sm);
}

.mg-entry th,
.mg-entry td {
  border: 1px solid var(--color-border);
  padding: 0.8em 1em;
  text-align: left;
  vertical-align: top;
}

.mg-entry th {
  background-color: var(--color-bg-soft);
  font-weight: 400;
  white-space: nowrap;
}

/* ----- 画像 ----- */

.mg-entry img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

.mg-entry figure { margin: 0 0 1.9em; }

.mg-entry figcaption {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  text-align: center;
  margin-top: 0.8em;
  letter-spacing: var(--ls-tight);
}

/* 回り込み（alignleft / alignright / aligncenter） */
.mg-entry .aligncenter { display: block; margin-right: auto; margin-left: auto; }
.mg-entry .alignleft { float: left; margin: 0 1.5em 1em 0; }
.mg-entry .alignright { float: right; margin: 0 0 1em 1.5em; }
.mg-entry::after { content: ""; display: block; clear: both; }

/* ----- 文字 ----- */

.mg-entry a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.mg-entry a:hover { color: var(--color-primary); }

/* 強調はゴールドのマーカー。太字だけだと目立たないため */
.mg-entry strong {
  font-weight: 500;
  background: linear-gradient(transparent 62%, rgba(201, 169, 110, 0.28) 62%);
}

.mg-entry hr {
  border: 0;
  border-top: 1px solid var(--color-border-soft);
  margin: 2.5em 0;
}

/* ----- スマホ ----- */

@media (max-width: 767px) {

  .mg-entry h2 { font-size: var(--fs-md); }
  .mg-entry h3 { font-size: var(--fs-base); }
}