/* 旧 body::before は削除してから貼り替え（二重に出ないように） */

/* 会員ログイン: 特典バナー
   .c-alert を flex にして ::before(大) / ::after(小) を先頭へ並べる。
   元の「ログインID…」「新規会員登録はこちら」は order:3 で下に残る。 */
.c-alert{
  display:flex;
  flex-direction:column;
}
.c-alert > *{ order:3; }

.c-alert::before{
  order:1;
  content:"会員登録＆初回ご購入で 500ポイント プレゼント";
  display:block;
  background:#fff8e8;
  border:2px solid #ffb300;
  border-bottom:none;
  border-radius:6px 6px 0 0;
  padding:16px 12px 10px;
  text-align:center;
  font-weight:bold;
  color:#c0392b;
  font-size:22px;
  line-height:1.35;
}

.c-alert::after{
  order:2;
  content:"さらに 100円→2ポイント還元 ＋ 会員限定メール／ポイントは次回のお買い物から使えます";
  display:block;
  background:#fff8e8;
  border:2px solid #ffb300;
  border-top:none;
  border-radius:0 0 6px 6px;
  padding:0 12px 12px;
  margin-bottom:14px;
  text-align:center;
  font-weight:bold;
  color:#c0392b;
  font-size:13px;
  line-height:1.5;
}

@media screen and (max-width:600px){
  .c-alert::before{ font-size:18px; }
  .c-alert::after { font-size:12px; }
}