/* 解説ブログ（/blog/）。style.css の色と書体を土台に、長文を読みやすく組む */
.blog-page { background: var(--ink); }
.blog-main { min-width: 0; }
/* 2カラム：左に本文・一覧、右にサイドバー（1024px未満は1列にしてサイドバーを下へ） */
.blog-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 3.5rem; align-items: start; width: min(1100px, 100%); margin: 0 auto; padding: 3rem 1.25rem 5rem; }
/* 列を中身の最小幅で広げない（長い題名がサイドバーを画面の外へ押し出した。2026-10-19） */
.blog-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem; align-self: stretch; align-content: start; }
.side-box { min-width: 0; padding: 1.3rem 1.2rem; border: 1px solid var(--line); background: var(--deep); }
.side-title { margin: 0 0 1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--line); color: var(--gold); font-size: .8rem; font-weight: 700; letter-spacing: .14em; }
.side-profile p { margin: 0 0 .8rem; color: #b7c0be; font-size: .88rem; line-height: 1.9; }
.side-profile .side-name { margin-bottom: .5rem; color: var(--paper); font: 600 1.05rem "Noto Serif JP", serif; }
.side-more { display: inline-block; margin-top: .4rem; color: var(--gold-pale); font-size: .86rem; text-decoration: none; }
.side-more:hover { text-decoration: underline; }
.side-cats { margin: 0; padding: 0; list-style: none; }
.side-cats a { display: flex; justify-content: space-between; align-items: center; min-height: 44px; border-bottom: 1px solid var(--line); color: var(--paper); font-size: .92rem; text-decoration: none; }
.side-cats li:last-child a { border-bottom: 0; }
.side-cats a:hover { color: var(--gold-pale); }
.side-cats span { color: var(--muted); font-size: .8rem; }
.side-app { display: grid; grid-template-columns: 56px 1fr; gap: .4rem 1rem; align-items: center; }
.side-app img { width: 56px; height: 56px; border-radius: 13px; box-shadow: 0 0 0 1px rgba(214, 178, 106, .45); }
.side-app p { margin: 0; color: #b7c0be; font-size: .82rem; line-height: 1.7; }
.side-app strong { display: block; color: var(--paper); font: 600 1rem "Noto Serif JP", serif; }
.side-store { grid-column: 1 / -1; display: grid; place-items: center; min-height: 44px; margin-top: .6rem; border-radius: 999px; background: var(--gold); color: #140e04; font-weight: 700; font-size: .9rem; letter-spacing: .1em; text-decoration: none; }
.side-store:hover { background: var(--gold-pale); }
/* 目次。サイドバーでは最後に置いて画面に追従させ、読んでいる節を金で示す */
.side-toc { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow-y: auto; }
.blog-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.blog-toc li { counter-increment: toc; }
.blog-toc a { display: grid; grid-template-columns: 1.6em 1fr; padding: .45rem 0; color: #b7c0be; font-size: .88rem; line-height: 1.6; text-decoration: none; }
.blog-toc a::before { content: counter(toc) "."; color: var(--muted); }
.blog-toc a:hover, .blog-toc a.is-current { color: var(--gold-pale); }
.blog-toc a.is-current::before { color: var(--gold); }
.blog-toc-title { margin: 0 0 .6rem; color: var(--gold); font-size: .8rem; font-weight: 700; letter-spacing: .14em; }
.blog-toc-inline { margin: 2rem 0 1rem; padding: 1.2rem 1.3rem; border: 1px solid var(--line); background: var(--deep); }
.blog-body .blog-toc-inline ol { margin: 0; padding: 0; }
.blog-body .blog-toc-inline li { margin: 0; font-size: inherit; line-height: inherit; }
.blog-body h2[id] { scroll-margin-top: 96px; }
/* 記事の小さな札（サムネイル＋題名）。サイドバー・あわせて読みたい・関連記事で共通 */
.blog-mini, .blog-rel { display: grid; color: inherit; text-decoration: none; }
.blog-mini { grid-template-columns: 96px 1fr; gap: .8rem; align-items: center; padding: .6rem 0; }
.blog-mini img, .blog-rel img { width: 100%; height: auto; border-radius: 6px; }
.blog-mini span, .blog-rel span { display: grid; gap: .2rem; }
.blog-mini small, .blog-rel small { color: var(--gold); font-size: .7rem; font-weight: 600; letter-spacing: .08em; }
.blog-mini strong { color: var(--paper); font-size: .86rem; font-weight: 600; line-height: 1.55; }
/* サイト共通の word-break: auto-phrase のままだと「モンスターコレクション」のような長いカタカナを折らず、320pxでページが横に広がる */
.blog-mini strong, .blog-rel strong { overflow-wrap: anywhere; }
.blog-mini:hover strong, .blog-rel:hover strong { color: var(--gold-pale); }
.blog-body .blog-also { margin: 2.6rem 0 0; padding: 1rem 1.2rem; border: 1px solid var(--gold); background: rgba(217, 184, 115, .05); }
.blog-body .blog-also p.blog-also-label { margin: 0 0 .2rem; color: var(--gold); font-size: .78rem; font-weight: 700; letter-spacing: .14em; line-height: 1.6; }
.blog-body .blog-also .blog-mini { grid-template-columns: 150px 1fr; padding: .4rem 0 0; }
.blog-body .blog-also .blog-mini strong { font-size: 1rem; }
.blog-body .blog-also a { overflow-wrap: normal; }
.blog-share { margin-top: 3.4rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.blog-share p { margin: 0 0 .8rem; color: var(--gold); font-size: .8rem; font-weight: 700; letter-spacing: .14em; }
.blog-share-links { display: flex; flex-wrap: wrap; gap: .6rem; }
.blog-share-links a, .blog-share-links button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1rem; border: 1px solid var(--line); background: transparent; color: var(--paper); font: inherit; font-size: .9rem; text-decoration: none; cursor: pointer; }
.blog-share-links a:hover, .blog-share-links button:hover { border-color: var(--gold); color: var(--gold-pale); }
.blog-rel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem 1.2rem; }
.blog-rel { gap: .6rem; align-content: start; }
.blog-rel strong { color: var(--paper); font: 600 .98rem/1.6 "Noto Serif JP", serif; }
.blog-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 3rem; }
.blog-pager a { display: grid; gap: .3rem; padding: 1rem 1.1rem; border: 1px solid var(--line); color: inherit; text-decoration: none; }
.blog-pager a:hover { border-color: var(--gold); }
.blog-pager-next { text-align: right; }
.blog-pager small { color: var(--gold); font-size: .78rem; letter-spacing: .08em; }
.blog-pager strong { color: var(--paper); font-size: .92rem; font-weight: 600; line-height: 1.6; }
.blog-all { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; margin: 2rem 0 0; }
.blog-all a { color: var(--gold-pale); font-size: .92rem; text-decoration: none; }
.blog-all a:hover { text-decoration: underline; }
.blog-byline em { color: var(--muted); font-style: normal; }

/* ヒーロー：種族の背景画を全面に敷き、左に題名、右に記事のカードを扇形に重ねる */
.blog-hero { position: relative; overflow: hidden; background: var(--ink); }
/* 見出しのカードを大きくしている間（/card-hover.js）は、はみ出しを切り取らない */
.blog-hero:has(.ch-hover) { overflow: visible; z-index: 30; }
.blog-hero::before { content: ""; position: absolute; inset: 0; background: var(--hero) center 42% / cover no-repeat; }
.blog-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,16,25,.94) 0%, rgba(7,16,25,.72) 45%, rgba(7,16,25,.25) 100%), linear-gradient(0deg, var(--ink) 0%, rgba(7,16,25,0) 38%); }
.blog-hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 2rem; width: min(1100px, 100%); min-height: 540px; margin: 0 auto; padding: 8rem 1.25rem 3.2rem; }
.blog-hero-copy { max-width: 600px; }
.blog-hero-copy h1 { margin: 0; color: var(--paper); font: 600 clamp(1.8rem, 3.6vw, 2.8rem)/1.45 "Noto Serif JP", serif; letter-spacing: .02em; text-wrap: balance; text-shadow: 0 2px 18px rgba(0,0,0,.6); }
.blog-hero-copy .blog-crumbs { margin-bottom: 1.6rem; }
.blog-hero-cards { display: flex; align-items: flex-end; padding: 0 1.5rem 1rem 0; }
.blog-hero-cards img { width: 168px; height: auto; margin-left: -56px; border-radius: 9px; box-shadow: 0 18px 40px rgba(0,0,0,.6); }
.blog-hero-cards img:first-child { margin-left: 0; }
.blog-hero-n2 img:nth-child(1) { transform: rotate(-6deg) translateY(10px); }
.blog-hero-n2 img:nth-child(2) { transform: rotate(6deg) translateY(10px); }
.blog-hero-n3 img:nth-child(1) { transform: rotate(-9deg) translateY(18px); }
.blog-hero-n3 img:nth-child(3) { transform: rotate(9deg) translateY(18px); }
/* 他の作品を紹介する記事の見出し：自分で撮った写真を右に置く（2026-10-20） */
.blog-hero-pic { padding: 0 1.5rem 1rem 0; }
.blog-hero-pic img { display: block; width: auto; max-width: 300px; max-height: 380px; border-radius: 8px; box-shadow: 0 18px 40px rgba(0,0,0,.6); }
.blog-hero-n4 img { width: 150px; }
.blog-hero-n4 img:nth-child(1) { transform: rotate(-12deg) translateY(26px); }
.blog-hero-n4 img:nth-child(2) { transform: rotate(-4deg) translateY(6px); }
.blog-hero-n4 img:nth-child(3) { transform: rotate(4deg) translateY(6px); }
.blog-hero-n4 img:nth-child(4) { transform: rotate(12deg) translateY(26px); }

.blog-crumbs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.4rem; color: var(--muted); font-size: .82rem; letter-spacing: .06em; }
.blog-crumbs a { color: var(--muted); text-decoration: none; }
.blog-crumbs a:hover { color: var(--gold-pale); }

.blog-head { padding-bottom: 2.2rem; border-bottom: 1px solid var(--line); }
.blog-head h1 { margin: 0; color: var(--paper); font: 600 clamp(1.7rem, 5vw, 2.6rem)/1.45 "Noto Serif JP", serif; letter-spacing: .02em; text-wrap: balance; }
.blog-byline { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin: 1.4rem 0 0; color: var(--muted); font-size: .86rem; }
.blog-byline span { color: var(--gold); font-weight: 600; letter-spacing: .06em; }
.blog-lead { margin: 1.6rem 0 0; color: var(--gold-pale); font: 500 1.08rem/2 "Noto Serif JP", serif; }

.blog-body { padding-top: 1rem; }
.blog-body h2 { margin: 3.6rem 0 1.2rem; padding-bottom: .7rem; border-bottom: 1px solid var(--line); color: var(--gold-pale); font: 600 clamp(1.3rem, 3.6vw, 1.6rem)/1.5 "Noto Serif JP", serif; letter-spacing: .03em; }
.blog-body h3 { margin: 2.4rem 0 .8rem; color: var(--paper); font-size: 1.12rem; font-weight: 700; }
.blog-body p, .blog-body li { color: #cdd3d0; font-size: 1.02rem; line-height: 2.05; }
.blog-body p { margin: 0 0 1.4rem; }
.blog-body ul, .blog-body ol { margin: 0 0 1.6rem; padding-left: 1.4rem; }
.blog-body li { margin-bottom: .4rem; }
.blog-body strong { color: var(--paper); }
.blog-body a { color: var(--gold-pale); overflow-wrap: anywhere; }
/* 表は横に溢れたら表だけを横へ送る（ページ全体を横に揺らさない） */
.blog-body table { display: block; width: 100%; max-width: 100%; overflow-x: auto; margin: 0 0 1.8rem; border-collapse: collapse; font-size: .92rem; }
.blog-body th, .blog-body td { padding: .7rem .6rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; line-height: 1.8; }
.blog-body th { color: var(--gold); font-weight: 600; white-space: nowrap; }
.blog-body td { color: #cdd3d0; min-width: 7em; }
.blog-body blockquote { margin: 0 0 1.6rem; padding: 1rem 1.2rem; border: 1px solid var(--line); background: var(--deep); color: var(--paper); }

/* 本文のカード画像。2〜4枚を横に並べ、小画面では2枚ずつ */
.blog-body .blog-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 2rem 0 2.4rem; }
.blog-body .blog-cards img { flex: 1 1 0; min-width: 0; max-width: 200px; height: auto; border-radius: 10px; box-shadow: 0 14px 30px rgba(0, 0, 0, .5); }
/* カードの詳細ページへのリンクで包んだ画像（2026-10-18）。並びは包まない画像と同じにする */
.blog-body .blog-cards .blog-card-link { flex: 1 1 0; min-width: 0; max-width: 200px; display: block; }
.blog-body .blog-cards .blog-card-link img { display: block; width: 100%; max-width: none; }
.blog-body .blog-cards figcaption { flex: 0 0 100%; color: var(--muted); font-size: .86rem; line-height: 1.8; text-align: center; }
.blog-body .blog-cards figcaption a { margin-left: .6em; color: var(--gold-pale); white-space: nowrap; }
/* 物語の肖像（金の二重線の額） */
.blog-body .blog-portrait { width: min(320px, 78%); margin: 2.6rem auto 2.8rem; text-align: center; }
.blog-body .blog-portrait img { display: block; width: 100%; height: auto; padding: 5px; border: 1px solid var(--gold); outline: 1px solid var(--line); outline-offset: 4px; background: #0b0d12; }
.blog-body .blog-portrait figcaption { margin-top: 1.1rem; color: var(--muted); font-size: .86rem; line-height: 1.8; }
/* 自分で撮った写真（2026-10-20 ゲームマーケットの記事）。横長は本文幅、縦長は細くして中央に置く */
.blog-body .blog-photo { margin: 2rem auto 2.4rem; text-align: center; }
.blog-body .blog-photo img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 14px 30px rgba(0, 0, 0, .5); }
.blog-body .blog-photo.is-tall { width: min(360px, 80%); }
.blog-body .blog-photo figcaption { margin-top: .9rem; color: var(--muted); font-size: .86rem; line-height: 1.8; }
.blog-app { margin-top: 4rem; padding: 1.8rem 1.6rem; border: 1px solid var(--line); background: var(--deep); }
.blog-app-kicker { margin: 0 0 .6rem; color: var(--gold); font-size: .8rem; font-weight: 600; letter-spacing: .14em; }
.blog-app-copy { margin: 0; color: #cdd3d0; line-height: 1.9; }
.blog-app-actions { display: grid; gap: 1.2rem; margin-top: 1.4rem; }
/* トップの「App Storeで遊ぶ」札（top.css の .store-card）と同じ形。横幅いっぱいで押しやすくする */
.blog-app-store { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; width: 100%; padding: 14px; background: #0d151c; border: 1px solid var(--line); color: var(--paper); text-decoration: none; box-shadow: 0 18px 40px rgba(0, 0, 0, .55); transition: border-color .25s ease, transform .15s ease; }
.blog-app-store::before { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(217, 184, 115, .12); pointer-events: none; }
.blog-app-store img { width: 64px; height: 64px; border-radius: 15px; box-shadow: 0 0 0 1px rgba(214, 178, 106, .45); }
.blog-app-store-text { display: grid; line-height: 1.35; }
.blog-app-store-text small { color: var(--muted); font-size: .68rem; font-weight: 500; letter-spacing: .16em; }
.blog-app-store-text strong { font: 600 1.15rem "Noto Serif JP", serif; letter-spacing: .1em; white-space: nowrap; }
.blog-app-store-text span { color: var(--gold); font-size: .72rem; font-weight: 500; letter-spacing: .1em; }
.blog-app-store-get { display: grid; place-items: center; min-width: 76px; height: 40px; padding: 0 16px; border-radius: 999px; background: var(--gold); color: #140e04; font-size: .95rem; font-weight: 700; letter-spacing: .14em; transition: background .2s ease; }
.blog-app-store:hover { border-color: var(--gold); }
.blog-app-store:hover .blog-app-store-get { background: var(--gold-pale); }
.blog-app-store:active { transform: translateY(1px); }
.blog-app-store:focus-visible { outline: 2px solid var(--gold-pale); outline-offset: 4px; }
.blog-app .story-link { justify-self: start; margin-top: 0; }

.blog-related { margin-top: 4rem; }
.blog-related h2 { margin: 0 0 1.4rem; color: var(--gold-pale); font: 600 1.15rem "Noto Serif JP", serif; }

.blog-index-head { margin-bottom: 1rem; }
/* カテゴリへのリンク。押せる大きさ（高さ44px）を取り、今いるカテゴリは金の枠で示す */
.blog-cats { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1.4rem; }
.blog-cats a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1rem; border: 1px solid var(--line); color: var(--paper); font-size: .92rem; letter-spacing: .06em; text-decoration: none; }
.blog-cats a:hover { border-color: var(--gold); }
.blog-cats a[aria-current="page"] { border-color: var(--gold); color: var(--gold-pale); background: rgba(217, 184, 115, .08); }
.blog-list-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; }
.blog-cat-label { color: var(--gold); font-size: .8rem; font-weight: 600; letter-spacing: .08em; }
.blog-list { margin: 0; padding: 0; list-style: none; }
.blog-list li { border-bottom: 1px solid var(--line); }
.blog-list a { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: center; gap: 1.4rem; padding: 1.8rem 0; color: inherit; text-decoration: none; }
.blog-list img { width: 100%; height: auto; border-radius: 8px; box-shadow: 0 10px 24px rgba(0,0,0,.45); }
.blog-list-text { display: grid; gap: .5rem; }
.blog-list time { color: var(--muted); font-size: .82rem; }
.blog-list strong { color: var(--paper); font: 600 1.25rem/1.6 "Noto Serif JP", serif; }
.blog-list span { color: #b7c0be; font-size: .94rem; line-height: 1.9; }
.blog-list a:hover strong { color: var(--gold-pale); }

footer a { color: var(--muted); }
@media (max-width: 1023px) {
  .blog-layout { grid-template-columns: minmax(0, 1fr); gap: 3rem; padding: 2.4rem 1.1rem 4rem; }
  .blog-side { max-width: 640px; }
  .side-toc { display: none; }
}
@media (max-width: 600px) {
  .blog-rel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem .9rem; }
  .blog-rel strong { font-size: .88rem; }
  .blog-pager { grid-template-columns: 1fr; }
  .blog-pager-next { text-align: left; }
  .blog-body .blog-also .blog-mini { grid-template-columns: 110px 1fr; }
  .blog-body .blog-also .blog-mini strong { font-size: .92rem; }
}
@media (max-width: 860px) {
  /* サイト共通の「小画面ではメニューの nav を畳む」指定（style.css の .has-menu nav）がページ内の nav にも効くため、パンくずとカテゴリは表示を戻す */
  .has-menu .blog-crumbs, .has-menu .blog-cats { position: static; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 0; border: 0; background: none; }
  .has-menu .blog-crumbs { gap: .5rem; }
  .has-menu .blog-cats { gap: .5rem; }
  .has-menu .blog-crumbs a { display: inline; min-height: 0; padding: 0; border: 0; color: var(--muted); font-size: inherit; letter-spacing: normal; }
  .has-menu .blog-cats a { display: inline-flex; justify-content: center; min-height: 44px; padding: 0 1rem; border: 1px solid var(--line); font-size: .9rem; letter-spacing: .06em; }
  .has-menu .blog-cats a[aria-current="page"] { border-color: var(--gold); color: var(--gold-pale); }
  .has-menu .blog-crumbs a::after, .has-menu .blog-cats a::after { content: none; }
  .blog-hero-inner { grid-template-columns: 1fr; min-height: 0; gap: 1.4rem; padding: 6.2rem 1.1rem 2.2rem; }
  .blog-hero::after { background: linear-gradient(0deg, var(--ink) 0%, rgba(7,16,25,.86) 45%, rgba(7,16,25,.45) 100%); }
  .blog-hero-cards { order: -1; justify-content: center; padding: .6rem 0 .8rem; }
  .blog-hero-cards img, .blog-hero-n4 img { width: 104px; margin-left: -30px; }
  .blog-hero-pic { order: -1; display: flex; justify-content: center; padding: .6rem 0 .8rem; }
  .blog-hero-pic img { max-width: 70%; max-height: 240px; }
  .blog-hero-cards img:first-child { margin-left: 0; }
  .blog-list a { grid-template-columns: 1fr; gap: .9rem; }
  .blog-app { padding: 1.5rem 1.1rem; }
  .blog-body .blog-cards { gap: 12px; }
  .blog-body .blog-cards img { flex: 0 0 calc(50% - 6px); max-width: none; }
  .blog-body .blog-cards .blog-card-link { flex: 0 0 calc(50% - 6px); max-width: none; }
  .blog-app-store { gap: 12px; padding: 12px; }
  .blog-app-store img { width: 56px; height: 56px; border-radius: 13px; }
  .blog-app-store-text strong { font-size: 1.05rem; letter-spacing: .06em; }
  .blog-app-store-get { min-width: 64px; height: 40px; padding: 0 14px; font-size: .9rem; letter-spacing: .1em; }
  .blog-app .story-link { justify-self: start; }
  footer { grid-template-columns: 1fr; }
}

/* 本文直後のアプリの案内。記事のサムネイルを背に敷き、カードと金の大きなボタンで遊ぶ先を示す */
.blog-cta { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2rem; margin-top: 3.6rem; padding: 2.2rem 2rem; overflow: hidden; border: 1px solid var(--gold); background: var(--deep); }
.blog-cta::before { content: ""; position: absolute; inset: 0; background: var(--cta) center / cover no-repeat; opacity: .35; }
.blog-cta::after { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(217, 184, 115, .22); background: linear-gradient(90deg, rgba(7,16,25,.35), rgba(7,16,25,.88) 45%); pointer-events: none; }
.blog-cta > * { position: relative; z-index: 1; }
.blog-cta-cards { display: flex; align-items: flex-end; padding: .6rem 0 .4rem .4rem; }
.blog-cta-cards img { width: 104px; height: auto; margin-left: -46px; border-radius: 7px; box-shadow: 0 14px 30px rgba(0,0,0,.6); }
.blog-cta-cards img:first-child { margin-left: 0; }
.blog-cta-n2 .blog-cta-cards img:nth-child(1) { transform: rotate(-6deg); }
.blog-cta-n2 .blog-cta-cards img:nth-child(2) { transform: rotate(6deg); }
.blog-cta-n3 .blog-cta-cards img:nth-child(1) { transform: rotate(-9deg) translateY(10px); }
.blog-cta-n3 .blog-cta-cards img:nth-child(3) { transform: rotate(9deg) translateY(10px); }
.blog-cta-kicker { margin: 0 0 .4rem; color: var(--gold); font-size: .8rem; font-weight: 700; letter-spacing: .14em; }
.blog-cta-title { margin: 0 0 .6rem; color: var(--paper); font: 600 1.7rem/1.3 "Noto Serif JP", serif; letter-spacing: .1em; }
.blog-cta-text { margin: 0 0 1.3rem; color: #cdd3d0; font-size: .95rem; line-height: 1.9; }
.blog-cta-button { display: flex; align-items: center; gap: .9rem; min-height: 60px; padding: 8px 22px 8px 10px; border-radius: 999px; background: linear-gradient(180deg, #f0d99f, #d9b873); color: #140e04; font-size: 1.08rem; font-weight: 800; letter-spacing: .08em; text-decoration: none; box-shadow: 0 10px 28px rgba(217, 184, 115, .28), inset 0 1px 0 rgba(255,255,255,.5); transition: transform .15s ease, box-shadow .2s ease; }
.blog-cta-button img { width: 44px; height: 44px; border-radius: 11px; box-shadow: 0 0 0 1px rgba(20, 14, 4, .35); }
.blog-cta-button span { flex: 1; }
.blog-cta-button b { font-size: 1.2rem; transition: transform .2s ease; }
.blog-cta-button:hover { box-shadow: 0 14px 34px rgba(217, 184, 115, .42), inset 0 1px 0 rgba(255,255,255,.5); }
.blog-cta-button:hover b { transform: translateX(4px); }
.blog-cta-button:active { transform: translateY(1px); }
.blog-cta-button:focus-visible { outline: 2px solid var(--gold-pale); outline-offset: 4px; }
.blog-cta-sub { display: inline-block; margin-top: .9rem; color: var(--gold-pale); font-size: .88rem; text-decoration: none; }
.blog-cta-sub:hover { text-decoration: underline; }
/* パソコンで読んでいる人へ、iPhoneで読み取るQRコードを出す（2026-10-20。サイトの訪問の多くがパソコンで、ストアへの流入がほぼ0だった） */
.blog-cta-qr { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 861px) {
  .blog-cta-qr { display: flex; align-items: center; gap: .9rem; margin-top: 1.1rem; }
  .blog-cta-qr img { flex: none; width: 92px; height: 92px; padding: 5px; border-radius: 6px; background: #fff; }
  .blog-cta-qr p { margin: 0; color: #cdd3d0; font-size: .82rem; line-height: 1.7; }
}
/* 権利表記と非公式の断り。関連記事の下に小さく置く */
.blog-notice { margin-top: 3rem; padding: 1rem 1.2rem; border: 1px solid var(--line); }
.blog-notice p { margin: 0; color: var(--muted); font-size: .76rem; line-height: 1.75; }
.blog-notice p + p { margin-top: .6rem; }
.blog-notice + .blog-refs { margin-top: 2rem; }
/* 参考資料は関連記事の下へ回し、小さな文字で詰めて並べる */
.blog-refs { margin-top: 3.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.blog-refs h2 { margin: 0 0 .8rem; color: var(--muted); font: 700 .8rem "Noto Sans JP", sans-serif; letter-spacing: .14em; }
.blog-refs ul, .blog-refs ol { margin: 0; padding-left: 1.1rem; }
.blog-refs li { margin: 0 0 .35rem; color: var(--muted); font-size: .76rem; line-height: 1.65; }
.blog-refs p { margin: .8rem 0 0; color: var(--muted); font-size: .76rem; line-height: 1.7; }
.blog-refs a { color: #a9b3ad; overflow-wrap: anywhere; text-decoration-color: rgba(169, 179, 173, .4); }
.blog-refs a:hover { color: var(--gold-pale); }
/* 原点の記憶（制作ノート）の書き方：旧 /episode/ の語りの調子を本文の中で再現する */
.blog-body .blog-memory-lead { margin-bottom: 2.4rem; color: var(--gold-pale); font: 600 clamp(1.5rem, 3vw, 2.1rem)/1.6 "Noto Serif JP", serif; }
.blog-body .memory-rule { margin: clamp(3rem, 7vw, 5rem) 0; }
.blog-body .blog-memory-vow { margin: 3rem 0 1.4rem; padding: 0 0 0 1.6rem; border: 0; border-left: 2px solid var(--gold); background: none; color: var(--gold-pale); font: 600 clamp(1.6rem, 3.6vw, 2.6rem)/1.55 "Noto Serif JP", serif; }
.blog-body .blog-memory-closing { margin-top: 4.5rem; padding-top: 2.4rem; border-top: 1px solid var(--line); color: var(--paper); font: 600 clamp(1.15rem, 2vw, 1.45rem)/1.9 "Noto Serif JP", serif; }
.blog-body .blog-memory-note { margin-top: 2.4rem; padding: 1rem 1.2rem; border: 1px solid var(--line); color: var(--muted); font-size: .85rem; line-height: 1.8; }
@media (max-width: 600px) {
  .blog-cta { grid-template-columns: 1fr; gap: 1.2rem; padding: 1.6rem 1.1rem 1.4rem; text-align: center; }
  .blog-cta::after { background: linear-gradient(180deg, rgba(7,16,25,.3), rgba(7,16,25,.9) 42%); }
  .blog-cta-cards { justify-content: center; padding: .4rem 0 0; }
  .blog-cta-cards img { width: 92px; margin-left: -34px; }
  .blog-cta-button { text-align: left; font-size: 1rem; }
  .blog-cta-title { font-size: 1.45rem; }
}