/* コラム（/column/）の一覧と記事で共有するスタイル。トークンはトップ（lp/index.html）・/shamenikki/ と揃える */
@font-face { font-family: AdjustedYuGothic; font-weight: 400; src: local("Yu Gothic Medium"); }
@font-face { font-family: AdjustedYuGothic; font-weight: 700; src: local("Yu Gothic Bold"); }
:root {
  --text: #23221e;
  --text-sub: #706d65;
  --bg: #f8f7f6;
  --surface: #ffffff;
  --border: #d6d3d0;
  --primary: #0077c7;
  --primary-dark: #005fa0;
  --link: #0071c1;
  --pink: #ff4979;
  --stone02: #edebe8;
  --dark: #23221e;
  --radius: 6px;
  --shadow-soft: 0 1px 2px rgba(35,34,30,.06), 0 8px 24px rgba(35,34,30,.10);
  --font: AdjustedYuGothic, "Yu Gothic", YuGothic, "Hiragino Sans", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; font-family: var(--font); color: var(--text); background: var(--bg); line-height: 1.6; font-size: 17px; -webkit-font-smoothing: antialiased; }
a { color: var(--link); }
h1, h2, h3 { line-height: 1.35; margin: 0; overflow-wrap: break-word; }
p { margin: 0; overflow-wrap: break-word; }
.container { width: 100%; max-width: 960px; margin: 0 auto; padding: 0 20px; }
.nb { display: inline-block; }

.site-header { background: var(--surface); border-bottom: 1px solid var(--border); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.logo img { height: 24px; width: auto; display: block; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 14px 28px; border-radius: var(--radius); font-size: 17px; font-weight: 700; text-decoration: none; background: var(--primary); color: #fff; }
.btn:hover { background: var(--primary-dark); }
.btn-sm { min-height: 40px; padding: 8px 16px; font-size: 15px; }
.media-name { color: var(--text); text-decoration: none; display: flex; flex-direction: column; line-height: 1.2; }
.media-tag { font-size: 11px; color: var(--text-sub); letter-spacing: .04em; }
.media-main { font-size: 20px; font-weight: 700; letter-spacing: .06em; display: flex; align-items: baseline; gap: 8px; }
.media-by { font-size: 12px; font-weight: 400; color: var(--text-sub); letter-spacing: 0; }

.crumbs { font-size: 13px; color: var(--text-sub); padding-top: 12px; }
.crumbs a { color: var(--text-sub); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.crumbs li + li::before { content: "›"; margin-right: 4px; }

/* ---- 一覧 ---- */
.list-head { padding: 28px 0 8px; }
.list-head h1 { font-size: 28px; }
.list-head p { color: var(--text-sub); margin-top: 8px; }
.post-list { list-style: none; margin: 20px 0 56px; padding: 0; display: grid; gap: 14px; }
.post-list a { display: block; height: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; text-decoration: none; color: var(--text); box-shadow: var(--shadow-soft); }
.post-list a:hover { border-color: var(--primary); }
.post-list h2 { font-size: 17px; }
.post-list p { color: var(--text-sub); font-size: 15px; margin-top: 6px; }
.post-list time { display: block; color: var(--text-sub); font-size: 13px; margin-top: 8px; }
.empty { color: var(--text-sub); margin: 20px 0 56px; }

/* ---- 記事 ---- */
.article { max-width: 720px; margin: 0 auto; padding: 24px 20px 48px; }
.article-head h1 { font-size: 26px; }
.article-meta { color: var(--text-sub); font-size: 13px; margin-top: 10px; }
.article-meta time + time::before { content: "・"; }
.article-byline { color: var(--text-sub); font-size: 13px; margin-top: 4px; }
.article-hero { margin: 24px 0 0; }
.article-hero img { width: 100%; height: auto; border-radius: var(--radius); display: block; background: var(--stone02); }
.article-lead { margin-top: 20px; }
.toc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 20px; margin: 24px 0 8px; }
.toc p { font-weight: 700; font-size: 15px; }
.toc ol { margin: 8px 0 0; padding-left: 1.4em; font-size: 15px; }
.toc li + li { margin-top: 4px; }
.article-body h2 { font-size: 22px; margin: 44px 0 14px; padding-bottom: 8px; border-bottom: 2px solid var(--text); scroll-margin-top: 16px; }
.article-body h3 { font-size: 19px; margin: 28px 0 10px; }
.article-body p { margin: 14px 0; }
.article-body ul, .article-body ol { margin: 14px 0; padding-left: 1.4em; }
.article-body li + li { margin-top: 6px; }
.article-body strong { background: linear-gradient(transparent 62%, #ffe3ea 62%); }
.article-body figure { margin: 24px 0; }
.article-body figure img { width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--border); display: block; background: var(--stone02); }
.article-body figcaption, .article-hero figcaption { font-size: 13px; color: var(--text-sub); margin-top: 6px; text-align: center; }
.table-wrap { overflow-x: auto; margin: 20px 0; }
.article-body table { width: 100%; border-collapse: collapse; font-size: 15px; background: var(--surface); }
.article-body th, .article-body td { border: 1px solid var(--border); padding: 10px 12px; text-align: left; vertical-align: top; }
.article-body th { background: var(--stone02); white-space: nowrap; }
.note-box { background: var(--surface); border-left: 4px solid var(--primary); border-radius: 0 var(--radius) var(--radius) 0; padding: 14px 18px; margin: 20px 0; font-size: 16px; }
.note-box p { margin: 0; }
.note-box p + p { margin-top: 8px; }
.note-box ul { margin: 8px 0 0; padding-left: 1.2em; }
.note-small { font-size: 13px; color: var(--text-sub); }
/* 元の写真→仕上がり を左右に並べる */
.before-after { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 20px 0 6px; }
.before-after figure { margin: 0; }

/* 記事内・末尾の申込への導線 */
.cta-box { background: var(--surface); border: 2px solid var(--primary); border-radius: var(--radius); padding: 20px; margin: 32px 0; text-align: center; }
.cta-box .cta-title { font-weight: 700; font-size: 18px; }
.cta-box .cta-text { color: var(--text-sub); font-size: 15px; margin: 8px 0 16px; }
.cta-box .btn { width: 100%; max-width: 360px; }
.cta-box .cta-note { color: var(--text-sub); font-size: 13px; margin-top: 8px; }
.cta-cast { border-color: #06c755; }
.cta-cast .btn { background: #06c755; }
.cta-cast .btn:hover { background: #05a948; }

/* カード: 左に正方形のサムネ・右にテーマ・タイトル・日付（一覧と記事末尾で共有） */
.post-list a { display: flex; gap: 14px; align-items: flex-start; }
.post-list img { flex: none; width: 88px; height: 88px; object-fit: cover; border-radius: 4px; background: var(--stone02); }
.post-list a > div { min-width: 0; }
.post-list .empty { margin: 0; }
.post-pillar { display: inline-block; font-size: 12px; font-weight: 700; color: var(--primary); }
.pillar-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.pillar-chip { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font-size: 14px; text-decoration: none; }
.pillar-chip.is-current { background: var(--text); border-color: var(--text); color: #fff; }

/* 記事末尾の回遊（同じテーマの記事・新着記事・テーマから探す） */
.related { border-top: 1px solid var(--border); margin-top: 48px; padding-top: 8px; }
.related:empty { display: none; }
.related h2 { font-size: 18px; margin: 24px 0 12px; }
.related .post-list { margin: 0; gap: 10px; }
.post-mini a { padding: 12px; }
.post-mini img { width: 72px; height: 72px; }
.post-mini h3 { font-size: 15px; margin-top: 2px; }
.post-mini time { margin-top: 4px; }
.related .pillar-chips { margin-top: 0; }
.more-all { margin-top: 20px; font-size: 15px; font-weight: 700; }

.site-footer { background: var(--dark); color: #8f8c86; text-align: center; padding: 32px 0; font-size: 13px; }
.site-footer a { color: #cbc9c4; }
.site-footer p + p { margin-top: 8px; }

@media (min-width: 760px) {
  .list-head { padding: 48px 0 8px; }
  .list-head h1 { font-size: 34px; }
  .post-list { grid-template-columns: 1fr 1fr; }
  .related .post-list { grid-template-columns: 1fr; }
  .article { padding-top: 40px; }
  .article-head h1 { font-size: 32px; }
  .article-body h2 { font-size: 24px; }
}

/* ---- FV（コラムのヘッダー・記事の上部） ---- */
.site-header { background: #1d1b33; border-bottom: 0; }
.site-header .container { height: 64px; }
.media-name { flex-direction: row; align-items: center; gap: 10px; color: #fff; }
.media-icon { width: 36px; height: 36px; flex: none; border-radius: 8px; }
.media-text { display: flex; flex-direction: column; line-height: 1.2; }
.media-tag { color: #b9b4d6; }
.media-by { color: #b9b4d6; }
.crumbs ol { flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }
.crumbs li:last-child { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.article-head { padding-top: 4px; }
.article-pillar { display: inline-block; font-size: 13px; font-weight: 700; color: #fff; background: var(--pink); border-radius: 999px; padding: 3px 12px; margin-bottom: 10px; text-decoration: none; }
.article-hero { margin: 16px 0 0; }
.article-hero img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 20%; }
/* 記事の最後の運営元のバナー（PR と明記） */
.cta-banner { position: relative; background: #1d1b33; border-color: #1d1b33; color: #fff; padding-top: 28px; }
.cta-banner .cta-text, .cta-banner .cta-note { color: #b9b4d6; }
.cta-banner .btn { background: var(--pink); }
.cta-banner .btn:hover { background: #e63e6b; }
.cta-pr { position: absolute; top: 10px; left: 12px; font-size: 11px; color: #b9b4d6; border: 1px solid #4a4670; border-radius: 4px; padding: 0 6px; line-height: 18px; }
/* StudioMaker のロゴ（認知のため各所に置く。明るい背景は logo-horizontal、暗い背景は白文字の版） */
.sm-logo { display: block; height: 24px; width: auto; }
.media-by { display: inline-flex; align-items: center; gap: 6px; }
.media-by .sm-logo { height: 16px; }
.h1-by { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; font-size: .5em; font-weight: 400; color: var(--text-sub); letter-spacing: 0; }
.h1-logo { height: 22px; }
/* ヘッダーと一覧の見出し: StudioMaker のロゴ＋細い区切り＋「コラム」（ロゴの添え字に見えるよう細く小さく） */
.media-main { align-items: center; gap: 10px; }
.media-main .sm-logo { height: 18px; }
.media-col, .h1-brand span { font-weight: 400; letter-spacing: .12em; padding-left: 10px; border-left: 1px solid currentColor; line-height: 1; }
.media-col { font-size: 14px; opacity: .85; }
.h1-brand { display: flex; align-items: center; gap: 12px; }
.h1-brand .h1-logo { height: 26px; }
.h1-brand span { font-size: 20px; color: var(--text-sub); padding-left: 12px; }
.note-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.note-head .sm-logo { height: 18px; }
.banner-logo { display: flex; justify-content: center; margin: 0 0 12px; }
.banner-logo .sm-logo { height: 56px; }
.footer-logo { display: inline-flex; margin-bottom: 6px; }
.footer-logo .sm-logo { height: 24px; }
.note-box .note-head strong { background: none; }