/* ============================================================
   けいさんカード — ブログ(/blog・/blog/<slug>)用の追加スタイル

   doc.css を読み込んだ上に重ねて使う。ラッパーは <div class="doc blog">。
   ・デザイントークン(:root)は doc.css のものを使う。ここでは再宣言しない
   ・全ルールを .blog 配下にスコープしてある。blog.css を読まないページには
     構造的に影響し得ないため、既存の about / guide / privacy は無変更でよい
   ・doc.css は編集しない(既存3ページの見た目を動かさないため)
   ============================================================ */

/* 本文中のリンクの色。doc.css の --sub(ひきざんの水色)を濃くしたもの。
   下線を使わず色だけでリンクを示すため、本文の文字(--ink)から離れた明るさを選んでいる
   (本文の文字とのコントラスト3.13:1 / 背景とのコントラスト3.30:1)。
   :root は doc.css のものを汚さないよう .blog にスコープして持たせる。 */
.blog {
  --link: #2b8fd0;
}

/* ---- 本文の基本 ---- */

/* 段落の余白。doc.css は「* { margin: 0 }」のあと .doc p に margin を
   与えていない(font-weight だけ)。既存3ページは連続する <p> が1箇所も
   ないため露呈していないが、記事は段落が主役なのでここで足す。
   なお doc.css の .doc-card p:last-child が詳細度で勝つので、
   カード内の最後の段落は従来どおり余白ゼロのまま。 */
.blog p {
  margin-bottom: 1.15em;
}

/* 本文中のリンクだけ、青文字・下線なしにする。
   doc.css の既定(本文と同じ文字色 + 黄土色の下線)は文章の中で見分けにくかった。
   青は色そのものが違うので視線が止まる。
   対象は本文の流れの中にあるリンクだけで、次のものは既存のまま変えない:
   ・パンくず(.blog-crumb) ・目次(nav.blog-toc) ・記事カード(a.blog-card)
   ・フッター(.doc-footer) ・ボタン(.doc-cta / .doc-brand)
   位置や形でリンクだと分かるものは、色を足すと画面がうるさくなるため。
   詳細度は .doc a(0,1,1)より高い(0,2,1)ので上書きできる。 */
.blog p a,
.blog blockquote a,
.blog td a,
.blog figcaption a,
.blog ul li a:not(.blog-card) {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: var(--link);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
/* 押したときの手応え(下線なしなので、押せたことを色で返す) */
.blog p a:active,
.blog blockquote a:active,
.blog td a:active,
.blog figcaption a:active,
.blog ul li a:not(.blog-card):active {
  opacity: 0.6;
}

/* 本文の画像。doc.css には img の基本ルールがなく、そのままだと横にあふれる。
   display:block は figure の中だけに限定する。全 img に当てると
   doc.css の .doc-icon(vertical-align で文字の横に置いている)が崩れる。 */
.blog img {
  max-width: 100%;
  height: auto;
}
.blog figure {
  margin: 24px 0;
}
.blog figure img {
  display: block;
  margin: 0 auto;
  border-radius: 12px;
}
.blog figcaption {
  font-size: 0.85rem;
  opacity: 0.75;
  text-align: center;
  padding-top: 8px;
  line-height: 1.7;
}

/* 見出しは語の途中で改行させない(lp.css と同じ方針)。
   keep-all にすると読点・空白・<wbr> だけが改行位置になるので、
   長い見出しには HTML 側で <wbr> を入れて折り返し位置を用意する。
   overflow-wrap: anywhere は安全網。<wbr>を入れ忘れて1行に収まらない見出しが
   来たとき、はみ出すのではなくどこかで折り返させる(はみ出しは実測で確認済み)。 */
.blog h1,
.blog h2,
.blog h3 {
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

/* 目次から飛んだときに見出しがヘッダーぎわに貼りつかないようにする */
.blog h2[id],
.blog h3[id] {
  scroll-margin-top: 16px;
}

/* ---- 記事のヘッダー部 ---- */

.blog-crumbs {
  font-size: 0.8rem;
  opacity: 0.7;
  margin-bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
}
/* パンくずは下線なし(doc.css の .doc a に勝つよう a. で詳細度を上げる) */
.blog a.blog-crumb {
  text-decoration: none;
}
.blog a.blog-crumb:hover {
  text-decoration: underline;
  text-decoration-color: var(--sun-deep);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* 公開日・更新日・署名 */
.blog-meta {
  font-size: 0.85rem;
  opacity: 0.75;
  margin-bottom: 20px;
}

/* ---- 目次 ---- */

.blog nav.blog-toc {
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 14px 18px;
  margin: 24px 0 32px;
}
.blog-toc-title {
  font-weight: 900;
  font-size: 0.95rem;
  margin-bottom: 4px;
}
.blog nav.blog-toc ol {
  margin: 0;
  padding-left: 1.3em;
  font-size: 0.9rem;
}
.blog nav.blog-toc li {
  margin-bottom: 2px;
}

/* ---- 引用・表・区切り ---- */

.blog blockquote {
  margin: 20px 0;
  padding: 4px 0 4px 16px;
  border-left: 8px solid var(--sun);
  opacity: 0.9;
}
.blog blockquote p:last-child {
  margin-bottom: 0;
}

/* 表は lp.css の .compare table(171-198行)から移植。
   狭い画面ではみ出す場合があるので、必ず .blog-table-wrap で包む。 */
.blog-table-wrap {
  overflow-x: auto;
  margin: 20px 0;
}
.blog table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
  font-size: 0.85rem;
  line-height: 1.6;
}
.blog th,
.blog td {
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}
.blog thead th {
  font-weight: 900;
  border-bottom: 2px solid var(--ink);
  background: var(--sun-soft);
}
.blog tbody tr + tr td {
  border-top: 1.5px dashed var(--grid);
}

.blog hr {
  border: 0;
  border-top: 2px dashed var(--grid);
  margin: 32px 0;
}

/* 蛍光ペン風の強調(lp.css の .pain-close strong と同じ) */
.blog-mark {
  background: linear-gradient(transparent 60%, var(--sun-soft) 60%);
  font-weight: 900;
}

/* ---- スマホフレーム(lp.css 109-123行と同じ定義) ----
   LP と記事で見た目を揃えるため、意図的に同じクラス名・同じ値にしてある。
   片方だけ直すと LP と記事でスクショの枠が食い違うので、両方直すこと。 */
.blog .phone {
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 34px;
  padding: 10px;
  box-shadow: var(--shadow);
  width: min(64vw, 260px);
  margin: 24px auto;
}
.blog .phone img {
  border-radius: 22px;
  border: 1.5px solid var(--grid);
}

/* ---- 記事一覧・関連記事のカード ----
   doc.css の .doc ul(0,1,1)と .doc a(0,1,1)に負けるので、
   ul.〜 / a.〜 で詳細度を上げる(doc.css 63-65行と同じ作法)。 */
.blog ul.blog-list {
  list-style: none;
  padding-left: 0;
  margin: 8px 0 0;
  display: grid;
  gap: 16px;
}
.blog ul.blog-list li {
  margin-bottom: 0;
}
.blog a.blog-card {
  display: block;
  text-decoration: none;
  color: var(--ink);
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 16px 18px;
}
.blog a.blog-card:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 var(--ink);
}
.blog-card-date {
  display: block;
  font-size: 0.78rem;
  opacity: 0.7;
}
/* カード全体がリンクなので、下線はタイトルだけに付けて「押せる」ことを示す */
.blog-card-title {
  display: block;
  font-weight: 900;
  font-size: 1.05rem;
  line-height: 1.5;
  margin-top: 2px;
  text-decoration: underline;
  text-decoration-color: var(--sun-deep);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.blog-card-desc {
  display: block;
  font-size: 0.85rem;
  margin-top: 6px;
}

.blog-related {
  margin-top: 40px;
}

/* ---- 広告枠 ----
   中身は AdSense の審査通過後に入れる。先に高さを予約しておくことで、
   広告が読み込まれたときにページが飛び跳ねない(CLS対策)。
   min-height は 300x250 バナー + ラベルぶん。モバイル390pxでは
   336x280 が溢れるため 300x250 を基準にしている。 */
.blog-ad {
  min-height: 280px;
  margin: 32px 0;
  display: grid;
  place-items: center;
}
.blog-ad::before {
  content: 'スポンサーリンク';
  font-size: 0.7rem;
  opacity: 0.5;
}

/* ---- 広い画面 ---- */
/* doc.css にはメディアクエリが1つもないので、ここが唯一のブレークポイント */
@media (min-width: 720px) {
  .blog h1 {
    font-size: 2rem;
  }
}