/* 3媒体共通の申し込みカード・画面下のバー・右の列の広告(設計 docs/設計_3媒体の右の列とCTA_20261108.md v2。部品 lib/cta_card.py)。
   色: まなび=サイトの --accent(オレンジ系)、補助金・media=ブランド #b41f24(cc-brand)。点滅・光る動きは使わない。押せる大きさは 48px 以上。 */
.cc .nw,.cc-bar .nw{display:inline-block}
.cc,.cc-bar{--c1:var(--accent,#e8a33d);--c2:#d48a1f;--ink:#2b1d05;--tint:#fff6ea;--line:#f1d3ad;--txt:#7a4a06}
.cc{border:1.5px solid var(--line);border-radius:14px;background:#fff;padding:14px 14px 12px;margin:16px 0 0;box-shadow:0 2px 10px rgba(0,0,0,.05);font-family:inherit;line-height:1.5}
.cc-brand,.cc-bar.cc-brand{--c1:#c8323a;--c2:#b41f24;--ink:#fff;--tint:#fdf0f0;--line:#efc3c5;--txt:#b41f24}
/* 案件ごとの色(render_card の tone。コミリクはカテゴリの青 #0070c0 系。2026-06-19 社長「記事ごとの青系に揃えて」) */
.cc-brand.cc-blue,.cc-bar.cc-brand.cc-blue{--c1:#2f8fd8;--c2:#0070c0;--tint:#eef6fc;--line:#b8d6ee;--txt:#005a9c}
.cc-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.cc-chip{font-size:12px;font-weight:700;line-height:1.3;padding:4px 8px;border-radius:4px;background:var(--tint);color:var(--txt);border:1px solid var(--line)}
.cc-chip-hot{background:#fff;color:var(--txt);border:1.5px solid var(--c2)}
.cc-name{margin:0 0 6px;font-size:17px;font-weight:800;line-height:1.4;display:block;color:var(--ink-name,#222)}   /* display:block(flex だと案件名の文節の span が別々の箱になり、語の途中で割れた=2026-11-09 デザインA2) */
.cc-pr{display:inline-block;margin-left:6px;vertical-align:middle;font-size:11px;font-weight:700;color:#666;border:1px solid #ccc;border-radius:4px;padding:1px 4px;line-height:1.3}
.cc-points{list-style:none;margin:0 0 10px;padding:0}
.cc-points li{position:relative;padding:0 0 0 22px;margin:0 0 5px;font-size:13.5px;line-height:1.55;color:#333}
.cc-points li:before{content:"";position:absolute;left:2px;top:4px;width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--c2);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3l2.6 2.5L12 5.4' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.cc-btn{display:flex;align-items:center;justify-content:center;gap:6px;min-height:52px;padding:10px 14px;border-radius:999px;background:linear-gradient(180deg,var(--c1),var(--c2));color:var(--ink)!important;font-weight:800;font-size:15.5px;line-height:1.35;text-decoration:none;text-align:center;box-shadow:0 4px 0 rgba(0,0,0,.12),0 6px 14px rgba(0,0,0,.12);transition:transform .2s ease-out,box-shadow .2s ease-out}
.cc-btn:hover{transform:translateY(1px);box-shadow:0 3px 0 rgba(0,0,0,.12),0 4px 10px rgba(0,0,0,.12)}
.cc-fb{padding-bottom:14px}
.cc-fb .cc-btn{font-size:15px;border-radius:14px}   /* 台帳に無い案件のボタンは文言が長い(3行になる)ので、卵形にならない角丸にする */
.cc .cc-arr,.cc-bar .cc-arr{flex:none;width:8px;height:8px;margin:0 2px 0 0;border:solid currentColor;border-width:2.6px 2.6px 0 0;transform:rotate(45deg);display:inline-block}
.cc-micro{margin:8px 0 0;font-size:12px;color:#666;line-height:1.5;text-align:center}
/* 画面下の固定バー(右の列が出る幅の手前でだけ出す)。本文の下に 88px の余白(.cc-bar-pad)を足す。まなびの比較表へのボタン(.quick-return.cc-lift)を上げる規則は、媒体ごとの物なので assets/site.css に置く */
.cc-bar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;align-items:center;gap:10px;padding:8px 16px calc(8px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line);box-shadow:0 -4px 14px rgba(0,0,0,.08)}
.cc-bar-txt{flex:1 1 auto;min-width:0}
.cc-bar-name{margin:0;font-size:13px;font-weight:800;line-height:1.3;display:block;color:var(--ink-name,#222)}
.cc-bar-name .cc-pr{margin-left:4px}
.cc-bar-sub{margin:1px 0 0;font-size:12px;color:var(--txt);font-weight:700;line-height:1.3}
.cc-bar-btn{flex:none;display:flex;align-items:center;gap:2px;min-height:48px;padding:0 12px 0 16px;border-radius:999px;background:linear-gradient(180deg,var(--c1),var(--c2));color:var(--ink)!important;font-weight:800;font-size:14px;text-decoration:none;box-shadow:0 3px 0 rgba(0,0,0,.12)}
.cc-bar-pad{height:88px}
@media(min-width:1280px){.cc-bar-w1280{display:none}}
@media(min-width:1024px){.cc-bar-w1024{display:none}}
/* 広告の枠(client と slot が空の間は HTML に出ない)。枠の大きさは固定して、読み込みの前後で本文がずれないようにする */
.bard-ad{margin:16px auto 0;width:fit-content;max-width:100%;display:flex;flex-direction:column;align-items:flex-start}
.bard-ad-label{margin:0 0 4px;font-size:11px;color:#727272;line-height:1.3}
.bard-ad-box{display:block;max-width:100%;overflow:hidden}
.bard-ad-in{margin:28px auto;clear:both}
.side-adtop:empty{display:none}
.side-adtop .bard-ad{margin:0 auto 16px}
/* 右の列の段(side-fit.js が data-fit を付ける)。中・低はカードの箇条を外して目次の高さを守る */
.side-stick[data-fit=mid] .cc-points,.side-stick[data-fit=low] .cc-points{display:none}
.side-stick[data-fit=mid] .cc-name,.side-stick[data-fit=low] .cc-name{margin-bottom:10px}
.side-stick[data-fit=low] .cc-chips{margin-bottom:6px}
.cc [hidden],.cc-bar [hidden]{display:none!important}