/* =============================================================
Beril Reward バナー 共通スタイル（単一の正）
canonical: public/reward-banner.css
・React … BerilRewardBanner.tsx から import して使用
・静的HTML … で読込
編集はこのファイルだけで行うこと。コピーを作らないこと。
他ページへ転用する手順
1) に を1行追加
2) バナーのマークアップを貼る（実体は BerilRewardBanner.tsx を参照）
・ヘッダー設置 data-brw-pos="header"（＋任意で class="brw-compact"）
・記事下/フッター data-brw-pos="footer"
注意
・CTAの data-brw="regist" / "detail" はGA4計測に使うため必ず維持すること
・背景写真は廃止済み。画像ファイル・base64を追加しないこと
・全セレクタに .brw-shell を前置し、padding / margin には !important を付けている。
設置先ページに ID + ユニバーサルのリセットがあると、クラスをいくら重ねても
詳細度で負けてバナーの余白が潰れるため（bowling_202607 で実際に発生）。
余白以外には !important を付けない方針。ルール追加時もこの2点を守ること。
============================================================= */
/* ===== Beril Reward バナー v11（白＋シャンパンゴールド／紫は差し色） ===== */.brw-shell{container-type:inline-size;width:100%}.brw-shell .brw-banner{
box-sizing:border-box;position:relative;display:block;width:100%;max-width:75rem;
margin:1.5rem auto!important;overflow:hidden;border-radius:1rem;text-decoration:none;
color:#1b1522;font-family:'Zen Kaku Gothic New','Hiragino Kaku Gothic ProN',sans-serif;
border:1.5px solid rgba(169,130,47,.55);
background:
radial-gradient(72% 60% at 88% 6%, rgba(191,146,52,.16), transparent 66%),
radial-gradient(60% 52% at 6% 92%, rgba(216,12,139,.09), transparent 68%),
linear-gradient(118deg,#fffdf7 0%,#faf0dc 46%,#f7e9cd 78%,#fffcf4 100%);
box-shadow:0 .5rem 1.4rem rgba(120,90,30,.14);
}.brw-shell .brw-banner *, .brw-shell .brw-banner *::before, .brw-shell .brw-banner *::after{box-sizing:border-box}.brw-shell .brw-inner{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;
gap:.7rem;padding:1.5rem 1.4rem!important}.brw-shell .brw-top{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}.brw-shell .brw-wordmark{font-size:1.05rem;font-weight:500;letter-spacing:.3em;color:#7f5f18}.brw-shell .brw-badge{display:inline-flex;align-items:center;gap:.4rem;font-size:.76rem;font-weight:700;
color:#8e0a5e;background:#fdeaf5;border:1.5px solid #d80c8b;border-radius:999px;
padding:.26rem .8rem!important;letter-spacing:.04em}.brw-shell .brw-badge::before{content:"";width:.42rem;height:.42rem;border-radius:50%;background:#d80c8b;
animation:brwBlink 1.9s infinite}
@keyframes brwBlink{0%,100%{opacity:1}50%{opacity:.2}}
/* 見出し：左に紫の縦罫／強調語に紫の下線 */.brw-shell .brw-head{position:relative;padding-left:.85rem!important;font-weight:700;font-size:1.85rem;
line-height:1.42;letter-spacing:-.016em;word-break:auto-phrase}.brw-shell .brw-head::before{content:"";position:absolute;left:0;top:.3em;bottom:.3em;width:2px;
border-radius:1px;background:linear-gradient(180deg,#d80c8b,rgba(216,12,139,.12))}.brw-shell .brw-g{background:linear-gradient(transparent 66%,rgba(216,12,139,.22) 0);padding-bottom:.05em!important}.brw-shell .brw-sub{font-size:.92rem;line-height:1.8;color:#5e5470;max-width:34rem}.brw-shell .brw-sub b{font-weight:700;color:#1b1522}.brw-shell .brw-btns{display:flex;gap:.7rem;margin-top:.35rem!important;position:relative;z-index:3}.brw-shell .brw-btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;
font-weight:700;border-radius:999px;min-height:3rem;padding:0 1.8rem!important;font-size:.98rem;
transition:transform 100ms ease-out}.brw-shell .brw-btn:active{transform:scale(.972)}.brw-shell .brw-btn-primary{background:linear-gradient(135deg,#d80c8b,#8e0a5e);color:#fff;
border:1.5px solid #8e0a5e;box-shadow:0 .4rem 1.1rem rgba(216,12,139,.26)}.brw-shell .brw-btn-ghost{background:rgba(255,255,255,.8);border:1.5px solid rgba(36,28,48,.55);color:#1b1522}.brw-shell .brw-corner-logo{position:absolute;right:1.4rem;bottom:1.2rem;height:1.5rem;width:auto;z-index:3}
/* --- variant="compact"（既存コンポーネントのクラス方式にも対応） --- */.brw-shell .brw-banner.brw-compact .brw-inner{padding:1.2rem 1.3rem!important;gap:.5rem}.brw-shell .brw-banner.brw-compact .brw-head{font-size:1.5rem}.brw-shell .brw-banner.brw-compact .brw-sub{display:none}.brw-shell .brw-banner.brw-compact .brw-corner-logo{display:none}
@container (max-width:44rem){.brw-shell .brw-banner.brw-compact .brw-head{font-size:1.3rem}
}
/* ヘッダー設置：現行どおり見出し1行＋ボタン1つの薄型 */.brw-shell .brw-banner[data-brw-pos="header"] .brw-inner{padding:1.2rem 1.3rem!important;gap:.5rem}.brw-shell .brw-banner[data-brw-pos="header"] .brw-head{font-size:1.5rem}.brw-shell .brw-brpc{display:inline}
@container (max-width:44rem){.brw-shell .brw-inner{padding:1.3rem 1.15rem!important}.brw-shell .brw-head{font-size:1.35rem;line-height:1.5}.brw-shell .brw-wordmark{font-size:.95rem;letter-spacing:.26em}.brw-shell .brw-badge{font-size:.7rem;padding:.2rem .62rem!important}.brw-shell .brw-sub{font-size:.86rem}.brw-shell .brw-btns{flex-direction:column;gap:.55rem}.brw-shell .brw-btn{width:100%;min-height:2.9rem}.brw-shell .brw-corner-logo{position:static;display:block;margin:.9rem auto 0!important;height:1.25rem}
}
/* ヘッダー設置時はスマホで最小高に */
@container (max-width:34rem){.brw-shell .brw-banner[data-brw-pos="header"] .brw-inner{padding:.85rem 1rem!important;gap:.42rem}.brw-shell .brw-banner[data-brw-pos="header"] .brw-wordmark{font-size:.86rem}.brw-shell .brw-banner[data-brw-pos="header"] .brw-badge{font-size:.62rem;padding:.14rem .5rem!important}.brw-shell .brw-banner[data-brw-pos="header"] .brw-head{display:none}.brw-shell .brw-banner[data-brw-pos="header"] .brw-btn{min-height:2.5rem;font-size:.86rem}
}
@media(prefers-reduced-motion:reduce){.brw-shell .brw-badge::before{animation:none}.brw-shell .brw-btn{transition:none}.brw-shell .brw-btn:active{transform:none;opacity:.84}
}