/* ============================================================
  フラッシュメッセージ（汎用）  .al-toast
  画面の下に数秒だけ出るお知らせ。JSの alToast() から呼び出す。
  置き場所：子テーマ（biz-vektor-child）の CSS
============================================================ */
:root{
  --al-toast-bottom:24px;          /* 画面下からの距離（PC） */
  --al-toast-bottom-sp:96px;       /* スマホ：下のフローティングバナーと重ならない高さ */
}

/* 並べる箱（JSが自動で作る） */
.al-toast-area{
  position:fixed; left:0; right:0; bottom:calc(var(--al-toast-bottom) + env(safe-area-inset-bottom,0px));
  z-index:100001; display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:0 16px; pointer-events:none;
}
@media (max-width:768px){
  .al-toast-area{ bottom:calc(var(--al-toast-bottom-sp) + env(safe-area-inset-bottom,0px)); }
}

/* メッセージ本体 */
.al-toast{
  display:flex; align-items:center; gap:10px;
  max-width:min(100%,480px); padding:12px 18px;
  border-radius:10px; background:#3d2612; color:#fff;
  font-family:"Noto Sans JP",sans-serif; font-size:14px; font-weight:700; line-height:1.5;
  box-shadow:0 4px 16px rgba(0,0,0,.2);
  pointer-events:auto;
  opacity:0; transform:translateY(8px); transition:opacity .2s, transform .2s;
}
.al-toast.is-show{ opacity:1; transform:none; }
.al-toast__icon{ flex:none; width:20px; height:20px; }

/* 種類（色だけ変わる） */
.al-toast--info{    background:#3d2612; }   /* お知らせ（こげ茶） */
.al-toast--success{ background:#0a7d3e; }   /* 成功（緑） */
.al-toast--error{   background:#c8000f; }   /* エラー（赤） */

@media (prefers-reduced-motion:reduce){ .al-toast{ transition:none; } }
@media print{ .al-toast-area{ display:none!important; } }