/* TOP(LP)と同じヘッダーをコラム系ページでも使うためのナビCSS（main.cssから抽出） */
:root{--green:#15cf78;--green-hover:#11b86a;--black:#15152b;--gray:#767f93}
.nav{position:fixed;top:0;left:0;right:0;z-index:100;height:64px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(0,0,0,.06);font-family:'DM Sans','Noto Sans JP',sans-serif}
.nav-inner{width:100%;max-width:1200px;padding:0 32px;display:flex;align-items:center;justify-content:space-between}
.nav-logo{display:flex;align-items:center;gap:10px}
.nav-logo-img{height:30px;width:auto;display:block}
.nav-tagline{font-size:.72rem;font-weight:500;color:var(--gray);letter-spacing:.02em;line-height:1.3}
.nav-links{display:flex;gap:32px;align-items:center}
.nav-links a{font-size:.85rem;font-weight:500;color:var(--gray);transition:color .2s;text-decoration:none}
.nav-links a:hover{color:var(--black)}
a.nav-cta{font-size:.82rem;font-weight:700;color:#fff !important;background:var(--green);padding:10px 24px;border-radius:980px;transition:all .2s}
.nav-cta:hover{background:var(--green-hover)}
@media(max-width:734px){.nav-links{display:none}.nav-inner{justify-content:center}.nav-tagline{display:none}}

/* TOP(LP)と同じフッター */
.footer{text-align:center;padding:32px 24px;border-top:1px solid rgba(0,0,0,.06);background:#fff;font-family:'DM Sans','Noto Sans JP',sans-serif}
.footer p{font-size:.72rem;color:var(--gray);margin:0}
.footer a{color:var(--gray);font-size:.72rem;margin:0 8px;text-decoration:none}
.footer a:hover{color:var(--black)}

/* ===== サイドバー「人気記事」（番号はサムネの文字に被らないよう画像の外＝タイトルの左に置く） ===== */
.side-rank{display:flex;flex-direction:column;gap:26px;list-style:none;margin:0;padding:0}
.side-rank-item{display:flex;flex-direction:column;gap:12px;text-decoration:none}
.side-rank-img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;background:#fff;display:block}
.side-rank-row{display:flex;gap:12px;align-items:flex-start}
.side-rank-no{flex-shrink:0;width:28px;height:28px;border-radius:6px;background:#15152b;color:#fff;font:700 15px/28px 'DM Sans',sans-serif;text-align:center;margin-top:1px}
.side-rank li:nth-child(-n+3) .side-rank-no{background:#cb9d20}
.side-rank-title{font-size:16px;font-weight:700;line-height:1.6;color:#15152b;word-break:auto-phrase}
.side-rank-item:hover .side-rank-title{color:#0a7f48}