/* サムネのテンプレ（Thumb.astro）。
   寸法はすべてサムネの幅に対する割合（cqw）。カードでも記事の上でも、同じ絵がそのまま拡大・縮小される。
   高さは幅の 52.4cqw（1.91:1）。上 13cqw にラベル、下 9cqw に Kinapse の印、そのあいだが本文。 */

.th { line-height: 1.25; position: relative; container-type: inline-size; aspect-ratio: 1.91 / 1; border-radius: 6px; overflow: hidden; isolation: isolate; font-family: 'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', 'Noto Sans JP', sans-serif; color: var(--ink); }
.th-cover { border-radius: 0; }
.th-in { position: absolute; inset: 0; padding: 13cqw 6.5cqw 9.5cqw; display: flex; flex-direction: column; justify-content: center; gap: 2.4cqw; }
.th-in::before { content: ''; position: absolute; z-index: -1; right: -8cqw; bottom: -13cqw; width: 50cqw; height: 50cqw; background: url('/assets/img/kinapse-mark.svg') no-repeat center / contain; opacity: .13; transform: rotate(-12deg); }

.th-kicker { position: absolute; top: 5.2cqw; left: 6.5cqw; font-weight: 800; font-size: 3.6cqw; line-height: 1; padding: 1.4cqw 2.8cqw; border-radius: 999px; background: var(--ink); color: #fff; letter-spacing: .04em; white-space: nowrap; }
.th-kicker-text { font-weight: 800; font-size: 3.8cqw; letter-spacing: .2em; color: var(--mint-700); }
.th-title { display: flex; flex-direction: column; gap: .3cqw; font-weight: 800; font-size: 9cqw; line-height: 1.22; letter-spacing: .01em; }
.th-line { display: block; white-space: nowrap; }
.th em { font-style: normal; font-size: 1.28em; color: var(--mint-700); background: linear-gradient(transparent 64%, var(--lemon) 64%); padding: 0 .05em; }
.th-foot { position: absolute; left: 6.5cqw; bottom: 4cqw; display: flex; align-items: center; gap: 1.4cqw; font-family: 'Helvetica Neue', 'Hiragino Sans', 'Noto Sans JP', sans-serif; font-size: 2.8cqw; font-weight: 700; opacity: .72; white-space: nowrap; }
.th-foot img { width: 3.6cqw; height: 3.6cqw; }

/* ---------- 色 ---------- */
.th-mint { background: linear-gradient(135deg, #E6F7F2 0%, #BFEBDF 100%); }
.th-lemon { background: linear-gradient(135deg, #FFF8D6 0%, #FFE680 100%); }
.th-lemon em { color: var(--ink); background: linear-gradient(transparent 60%, #fff 60%); }
.th-ink { background: linear-gradient(135deg, #1E3A36 0%, #2B5A52 100%); color: #fff; }
.th-ink .th-in::before { background-image: url('/assets/img/kinapse-mark-white.svg'); opacity: .1; }
.th-ink .th-kicker { background: var(--lemon); color: var(--ink); }
.th-ink em { color: var(--lemon); background: none; }
.th-ink .th-kicker-text { color: var(--lemon); }
.th-white .th-ba-box { background: #F1F6F5; }
.th-white { background: #fff; box-shadow: inset 0 0 0 1px rgba(8, 19, 26, .12); }
.th-white .th-kicker { background: var(--mint); }

/* ---------- 背景画像 ---------- */
.th-bgimg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.th-bg .th-in::before { display: none; }
.th-bg-dark { color: #fff; }
.th-bg-dark .th-in { background: linear-gradient(100deg, rgba(14, 32, 29, .86) 0%, rgba(14, 32, 29, .62) 55%, rgba(14, 32, 29, .25) 100%); }
.th-bg-dark .th-kicker { background: var(--lemon); color: var(--ink); }
.th-bg-dark em { color: var(--lemon); background: none; }
.th-bg-light .th-in { background: linear-gradient(100deg, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .75) 60%, rgba(255, 255, 255, .35) 100%); }

/* ---------- 型 ---------- */
/* 大きな数字 */
.th-l-number .th-in { flex-direction: row; align-items: center; justify-content: flex-start; gap: 4cqw; }
.th-num { display: flex; align-items: baseline; gap: 1cqw; line-height: .9; flex: none; }
.th-num b { font-size: 21cqw; font-weight: 800; color: var(--mint-700); letter-spacing: -.02em; }
.th-num .th-unit { font-size: 7cqw; font-weight: 800; }
.th-ink .th-num b, .th-bg-dark .th-num b { color: var(--lemon); }
.th-lemon .th-num b { color: var(--ink); }
.th-l-number .th-title { font-size: 5.8cqw; }
.th-l-number em { font-size: 1.1em; }

/* 問いかけ */
.th-qmark { position: absolute; right: 5cqw; top: 50%; transform: translateY(-46%) rotate(8deg); font-size: 38cqw; font-weight: 800; line-height: 1; color: var(--mint); opacity: .32; z-index: -1; }
.th-ink .th-qmark { color: var(--lemon); opacity: .22; }
.th-lemon .th-qmark { color: #fff; opacity: .7; }

/* チェックリスト */
.th-l-checklist .th-title { font-size: 6cqw; }
.th-checks { display: flex; flex-direction: column; gap: .8cqw; }
.th-check { display: flex; align-items: center; gap: 1.8cqw; font-size: 4.2cqw; font-weight: 800; white-space: nowrap; }
.th-check i { font-style: normal; display: grid; place-items: center; width: 4.6cqw; height: 4.6cqw; border-radius: 1.2cqw; background: var(--mint); color: #fff; font-size: 3.6cqw; flex: none; }
.th-ink .th-check i { background: var(--lemon); color: var(--ink); }
.th-lemon .th-check i { background: var(--ink); }

/* ビフォー → アフター */
.th-ba { display: flex; align-items: center; gap: 1.8cqw; }
.th-ba-box { padding: 2.6cqw 3cqw; border-radius: 2.4cqw; background: rgba(255, 255, 255, .7); font-size: 5cqw; font-weight: 800; line-height: 1.25; white-space: nowrap; color: var(--ink-70); }
.th .th-ba-after { background: var(--ink); color: #fff; font-size: 6cqw; }
.th-ba-arrow { font-size: 6cqw; font-weight: 800; color: var(--mint-700); }
.th-ink .th-ba-box { background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .8); }
.th-ink .th-ba-box.th-ba-after { background: var(--lemon); color: var(--ink); }
.th-ink .th-ba-arrow { color: var(--lemon); }

/* 引用 */
.th-quote { position: relative; display: flex; flex-direction: column; gap: .3cqw; font-weight: 800; font-size: 6.8cqw; line-height: 1.25; padding-left: 5cqw; }
.th-quote::before { content: '“'; position: absolute; left: -1cqw; top: -6cqw; font-size: 22cqw; line-height: 1; color: var(--mint); opacity: .6; font-family: Georgia, serif; }
.th-lemon .th-quote::before { color: var(--ink); opacity: .25; }
.th-ink .th-quote::before { color: var(--lemon); opacity: .5; }
.th-source { font-size: 3.8cqw; font-weight: 800; padding-left: 5cqw; opacity: .8; }

/* 左右に分ける */
.th-l-split .th-in { flex-direction: row; padding: 0; gap: 0; }
.th-l-split .th-in::before { display: none; }
.th-split-l { width: 40cqw; flex: none; display: flex; align-items: baseline; justify-content: center; align-self: stretch; padding-top: 14cqw; gap: .6cqw; background: var(--ink); color: #fff; line-height: .9; }
.th-split-l b { font-size: 21cqw; font-weight: 800; color: var(--lemon); letter-spacing: -.02em; }
.th-split-l span { font-size: 7cqw; font-weight: 800; }
.th-split-r { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 3cqw; padding: 6cqw 5cqw 9cqw; }
.th-l-split .th-kicker { position: static; align-self: flex-start; }
.th-l-split .th-title { font-size: 6.8cqw; }
.th-l-split .th-foot { left: 45cqw; }
.th-ink.th-l-split .th-split-l { background: var(--lemon); }
.th-ink.th-l-split .th-split-l b, .th-ink.th-l-split .th-split-l span { color: var(--ink); }

/* ステップ */
.th-l-steps .th-title { font-size: 7.4cqw; }
.th-steps { display: flex; align-items: center; gap: 1.6cqw; margin-top: 1cqw; }
.th-step { display: flex; align-items: center; gap: 1.4cqw; font-size: 5cqw; font-weight: 800; white-space: nowrap; padding: 1.4cqw 2.6cqw 1.4cqw 1.4cqw; border-radius: 999px; background: rgba(255, 255, 255, .75); }
.th-step i { font-style: normal; display: grid; place-items: center; width: 5.4cqw; height: 5.4cqw; border-radius: 50%; background: var(--mint); color: #fff; font-size: 3.4cqw; }
.th-step-arrow { font-size: 6cqw; font-weight: 800; opacity: .5; }
.th-ink .th-step { background: rgba(255, 255, 255, .12); }
.th-ink .th-step i { background: var(--lemon); color: var(--ink); }

/* バッジ */
.th-l-badge .th-title { max-width: 62cqw; }
.th-badge { position: absolute; right: 6cqw; top: 50%; transform: translateY(-50%) rotate(-10deg); width: 27cqw; height: 27cqw; border-radius: 50%; display: grid; place-items: center; text-align: center; background: var(--lemon); color: var(--ink); font-size: 6.4cqw; font-weight: 800; line-height: 1.1; box-shadow: inset 0 0 0 1.2cqw var(--lemon), inset 0 0 0 1.6cqw var(--ink); }
.th-lemon .th-badge { background: var(--ink); color: var(--lemon); box-shadow: inset 0 0 0 1.2cqw var(--ink), inset 0 0 0 1.6cqw var(--lemon); }

/* シンプル */
.th-l-minimal .th-in { align-items: center; text-align: center; padding-top: 8cqw; gap: 1.6cqw; }
.th-l-minimal .th-title { align-items: center; font-size: 8cqw; }
.th-l-minimal .th-title::after { content: ''; width: 14cqw; height: 1cqw; border-radius: 1cqw; background: var(--mint); margin: 1.8cqw auto 0; }
.th-l-minimal em { background: none; }
.th-l-minimal .th-foot { left: 50%; transform: translateX(-50%); }
.th-l-minimal .th-in::before { right: auto; left: -10cqw; }

.th-l-quote .th-in { gap: 1.6cqw; }