/* 問題集（index.html）の一番上の「会社枠のプラスの期限」の帯（assets/company/company-banner.js が作る）。本人が承認した画面案のとおり。
   色は問題集のテーマの変数（--surface・--text・--accent・--separator）を使う。テーマが暗い表示でも読めるように、生の色は既定値だけにする。
   ホーム以外（問題を解いている間など）では出さない。#app の data-screen は app.js の render() が付ける。iOS の殻では出さない。 */
.cp-banner-slot{box-sizing:border-box;max-width:1200px;margin:0 auto -14px;padding:16px 12px 0}
body:has(#app:not([data-screen="home"])) .cp-banner-slot,html.is-native .cp-banner-slot{display:none}
.cp-banner{box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:0 12px;padding:10px 14px;border:1px solid var(--separator,#e5cdb8);border-radius:12px;background:var(--surface,#fff);background:linear-gradient(90deg,color-mix(in srgb,#f9c65d 16%,var(--surface,#fff)),color-mix(in srgb,var(--accent,#6535b5) 9%,var(--surface,#fff)));color:var(--text,#292622);font-size:14px;line-height:1.7}
.cp-banner__text{margin:0;min-width:0;overflow-wrap:anywhere}
.cp-banner__text b{color:var(--accent,#6535b5);font-weight:800;white-space:nowrap}
.cp-banner__go{flex:none;display:inline-flex;align-items:center;min-height:36px;padding:4px 16px;border-radius:999px;background:var(--accent,#6535b5);color:var(--qz-on-accent,#fff);font-weight:800;text-decoration:none}
.cp-banner__go:hover{filter:brightness(1.08)}
.cp-banner__close{flex:none;min-width:44px;min-height:44px;margin:-6px -8px -6px 0;padding:0;border:0;border-radius:10px;background:none;color:var(--text-2,#65594d);font:inherit;font-size:18px;cursor:pointer}
.cp-banner__close:hover{background:color-mix(in srgb,var(--accent,#6535b5) 10%,transparent)}
.cp-banner__go:focus-visible,.cp-banner__close:focus-visible{outline:3px solid var(--accent,#6535b5);outline-offset:2px}
@media(max-width:650px){.cp-banner-slot{padding:16px 16px 0}.cp-banner{margin:0}}