#shopcart-root { width: 100%; }

/* subheader */
.sc-subheader{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-bottom:1px solid #e6e6e6;
  background:#fff;
  position: sticky;
  top: 0;
  z-index: 500;
  flex-direction: column;
  gap:8px;
  top: var(--sc-header-offset, 0px);
}

/* タイトル行（スマホで表示、PCで非表示） */

.sc-subheader__titleline{
  display:block;
}

.sc-title--center{
  text-align:center;
  width:100%;
  font-size:16px;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.sc-subheader__left{ display:flex; align-items:center; gap:10px; min-width:0; }
.sc-title{ font-size:16px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.sc-subheader__right{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.sc-usertext{ font-size: 14px; font-weight: 600; }

/* category button */
.sc-catbtn{
  border:1px solid #ccc;
  background:#fff;
  padding:8px 10px;
  border-radius:10px;
  cursor:pointer;
  line-height:1;
}

/* PCではカテゴリボタン不要（左が常時見えるため） */
.sc-catbtn--mobile{ display:none; }
@media (max-width: 900px){
  .sc-catbtn--mobile{ display:inline-block; }
}

.sc-linkbtn{
  display:inline-block;
  padding:8px 10px;
  border-radius:10px;
  text-decoration:none;
  border:1px solid #ccc;
  background:#fff;
  font-weight:600;
}
.sc-linkbtn--primary{ border-color:#2f6df6; }

/* layout */
.sc-layout{
  display:flex;
  gap:12px;
  padding:12px;
  align-items:flex-start; /* 左を右に引っ張らない */
}

.sc-sidebar{
  width:320px;
  min-width:280px;
  border:1px solid #eee;
  border-radius:14px;
  background:#fff;
  overflow:hidden;

  /* ★スクロール追随（自然に“ついてくる”） */
  position: sticky;
  top: var(--sc-sticky-top, 72px);
  align-self: flex-start;
}

.sc-sidebar__title{
  padding:12px;
  font-weight:700;
  border-bottom:1px solid #eee;
  background:#fafafa;
}

.sc-catlist{ display:grid; gap:10px; padding:12px; }
.sc-catitem{
  display:block;
  padding:12px 10px;
  border:1px solid rgba(47,109,246,0.25);
  border-radius:12px;
  text-decoration:none;
  background:#fff;
}

/* カテゴリ文字は常に明朝体で統一 */
.sc-catlist,
.sc-catitem{
  font-family:
    "游明朝",
    "Yu Mincho",
    "ヒラギノ明朝 ProN",
    "Hiragino Mincho ProN",
    "MS P明朝",
    serif;
}

/* ☰ カテゴリボタン（文字だけ明朝にしたい場合） */
.sc-catbtn{
  font-family:
    "游明朝","Yu Mincho",
    "ヒラギノ明朝 ProN","Hiragino Mincho ProN",
    "MS P明朝",serif !important;
  font-weight: 700;
}
.sc-catitem:hover{ background:#f5f9ff; }

.sc-main{ flex:1; min-width:0; }

/* ★枠内スクロールを消すため、iframe自体は高さ固定しない（JSで設定） */
.sc-iframe{
  width:100%;
  border:0;
  display:block;
}
.sc-iframe--content{
  height: 400px; /* 初期値（JSがすぐ上書き） */
}

/* mobile drawer */
.sc-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 90;
}

@media (max-width: 900px) {
  .sc-layout{ padding:0; }

  /* mobileでは drawer */
  .sc-sidebar{
    position: fixed;
    top: var(--sc-drawer-top, 72px);
    left: -90%;
    width: 85%;
    max-width: 360px;
    height: calc(100vh - var(--sc-drawer-top, 72px));
    z-index: 100;
    border-radius: 0;
    transition: left .2s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  }
  .sc-sidebar.is-open{ left: 0; }

  .sc-main{ padding:12px; }

  .sc-backdrop.is-open{
    opacity: 1;
    pointer-events: auto;
  }
}

/* PCでは従来の1段に戻す */
@media (min-width: 901px){
  .sc-subheader{
    flex-direction: row;
    align-items:center;
    justify-content: space-between;
    gap:12px;
  }
  .sc-title--pc{ display:block; }
}

/* スマホでは左行にPCタイトルを出さない（潰れる原因なので） */
@media (max-width: 900px){
  .sc-title--pc{ display:none; }
  .sc-subheader__right{ flex-wrap:wrap; justify-content:flex-end; }
}

/* shopcart全体を「画面内レイアウト」にする */
#shopcart-root{
  width: 100%;
}


/* subheaderは固定（sticky）なのでレイアウト上は通常ブロックでOK */
.sc-layout{
  display: flex;
  gap: 12px;
  padding: 12px;
  align-items: flex-start;
}

/* 左は固定でOK（ページ自体がスクロールしないため） */
.sc-sidebar{
  height: 100%;
  overflow: auto; /* カテゴリが長い時だけ左でスクロールできる */
}

/* ★右だけスクロール */
.sc-main{
  flex: 1;
  min-width: 0;
}

/* iframeは右ペインにフィット */
.sc-iframe--content{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}


/* ===============================
   商品一覧 GRID 強制適用
   iframe撤去後の最終調整
================================ */

/* gridを確実に効かせる */
.sc-main .sc-goods .sc-goods__grid {
  display: grid !important;
  width: 100%;
  gap: 18px;
}

/* PC：3カラム */
@media (min-width: 1200px) {
  .sc-main .sc-goods .sc-goods__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* 中PC：2カラム */
@media (min-width: 901px) and (max-width: 1199px) {
  .sc-main .sc-goods .sc-goods__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* SP：1カラム */
@media (max-width: 900px) {
  .sc-main .sc-goods .sc-goods__grid {
    grid-template-columns: 1fr;
  }
}

/* ===============================
   商品カードUI（上書き追加）
   旧CSSの display/float/width を吸収して grid を安定させる
================================ */

/* gridの子要素が旧CSSで崩されるのを防ぐ */
.sc-main .sc-goods .sc-goods__grid > *{
  float: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0;          /* これがないと横はみ出しで崩れる時がある */
}

/* カード本体：縦積み固定（画像→名前→説明→価格→ボタン） */
.sc-main .sc-goodscard{
  display: flex !important;
  flex-direction: column;
  gap: 10px;

  border: 1px solid #eee;
  border-radius: 14px;
  background: #fff;
  padding: 12px;
  overflow: hidden;
}

/* 画像：無理にデカくしない（40〜60代女性の“落ち着き”優先） */
.sc-main .sc-goodscard__img{
  width: 100%;
  aspect-ratio: 4 / 3;     /* 商品写真がバラついても箱を揃える */
  object-fit: contain;     /* 食品は切り抜かない方が安心感出る */
  background: #fafafa;
  border-radius: 10px;
}

/* テキスト */
.sc-main .sc-goodscard__name{
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
}
.sc-main .sc-goodscard__desc{
  font-size: 14px;
  line-height: 1.5;
  color: #333;
  margin: 0;
}

/* 価格：視認性だけ上げる（ギラつかせない） */
.sc-main .sc-goodscard__price{
  font-size: 16px;
  font-weight: 800;
  margin-top: auto; /* ボタンを下に寄せたい場合の土台 */
}

/* ボタン：やわらかい丸み + 押しやすさ */
.sc-main .sc-goodscard__btn{
  display: inline-block;
  width: 100%;
  text-align: center;

  padding: 12px 10px;
  border-radius: 999px;
  border: 1px solid #ccc;
  background: #fff;
  text-decoration: none;
  font-weight: 700;
}
.sc-main .sc-goodscard__btn:hover{
  background: #f5f9ff;
}

/* ===============================
   商品一覧 GRID 強制適用（セレクタ修正版）
   “同一要素に sc-main/sc-goods/sc-goods__grid を載せても効く”
================================ */

/* gridを確実に効かせる */
.sc-goods__grid{
  display: grid !important;
  width: 100%;
  gap: 18px;
}

/* PC：3カラム */
@media (min-width: 1200px){
  .sc-goods__grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* 中PC：2カラム */
@media (min-width: 901px) and (max-width: 1199px){
  .sc-goods__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* SP：1カラム */
@media (max-width: 900px){
  .sc-goods__grid{
    grid-template-columns: 1fr;
  }
}

/* 旧CSSの float / width を無効化して grid を殺させない */
.sc-goods__grid > *{
  float: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0;
}

/* 画像をCSSで勝手に拡大しない（PHPで調整済み前提） */
.shopcart-item__photo img{
  width: auto !important;     /* 100%にしない */
  height: auto !important;
  max-width: 100%;            /* はみ出す時だけ縮む */
  display: block;
}

/* カテゴリ見出しがどこかで消されても出す */
.shopcart-category{
  display: block !important;
}

/* ===============================
   商品カードの見た目を整える（追加のみ）
   画像は拡大しない：max-width/height:auto だけ
=============================== */

/* grid側のカード */
.sc-goods__card{
  background:#fff;
  border:1px solid #eee;
  border-radius:14px;
  overflow:hidden;
}

/* head */
.sc-goods__head{
  padding:12px 12px 0;
}
.sc-goods__name{
  font-weight:700;
  line-height:1.35;
}
.sc-goods__code{
  opacity:.65;
  font-size:12px;
  margin-top:2px;
}

/* body layout（縦積みで自然に） */
.sc-goods__body{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:10px 12px 12px;
}

/* 画像：伸ばさない */
.sc-goods__photo img{
  display:block;
  max-width:100%;
  height:auto;
  border-radius:12px;
}

/* price */
.sc-goods__price{
  font-size:18px;
  font-weight:800;
  margin-top:2px;
}

/* description（読みやすさ優先） */
.sc-goods__desc{
  color:#333;
  line-height:1.55;
}

/* actions */
.sc-goods__actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:6px;
}
.sc-goods__btn{
  border-radius:12px;
  padding:10px 14px;
}
.sc-goods__pdfbtn{
  border:1px solid #ccc;
  background:#fff;
  border-radius:12px;
  padding:10px 14px;
  cursor:pointer;
}

/* =========================
   商品一覧：見た目を“カタログ風”に進化
   （画像ファイルは触らない / 伸ばさない）
========================= */

.shopcart-goodslist, .sc-goods__grid{
  gap: 22px; /* 詰まり感を減らす */
}

/* カード：影は控えめ、枠と余白で上品に */
.shopcart-item, .sc-goods__card{
  background: #fff;
  border: 1px solid #e9e9e9;
  border-radius: 12px;   /* カードは角丸OK、画像は丸めない */
  box-shadow: none;
  padding: 16px 16px 14px;
}

/* 商品名：中央寄せは“ポップ感”が出るので左寄せ推奨 */
.shopcart-item__name, .sc-goods__name{
  text-align: left;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 4px;
}

.shopcart-item__code, .sc-goods__code{
  text-align: left;
  font-size: 12px;
  opacity: .6;
  margin-bottom: 10px;
}

/* 画像：拡大しない。箱に合わせて“収める”だけ */
.shopcart-item__photo img, .sc-goods__photo img{
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 0 !important;   /* ←画像の角丸は不要：ここで殺す */
}

/* 説明：読みやすさ優先 */
.shopcart-item__desc, .sc-goods__desc{
  color: #333;
  line-height: 1.6;
  font-size: 13px;
  margin-top: 8px;
}

/* 価格：見せ場。赤はOKだが下品にならない程度に */
.sc-price, .shopcart-item__price{
  font-weight: 800;
  font-size: 18px;
  margin-top: 10px;
}

/* 下段（数量 + ボタン）を“整列”させる */
.shopcart-item__actions, .sc-goods__actions{
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  margin-top: 12px;
}

/* 数量UI */
.sc-qty{
  display:flex;
  align-items:center;
  gap: 8px;
}
.sc-qty__label{
  font-size: 12px;
  opacity: .75;
}
.sc-qty__select{
  height: 36px;
  padding: 0 10px;
  border: 1px solid #cfcfcf;
  border-radius: 10px;
  background: #fff;
}

/* ボタン：丸すぎない、でも柔らかい */
.shopcart-btn, .sc-goods__btn{
  height: 36px;
  padding: 0 16px;
  border-radius: 10px;
  font-weight: 700;
}

/* PDFボタン（ある場合）は主ボタンより弱く */
.openPdfBtn{
  height: 36px;
  padding: 0 14px;
  border: 1px solid #cfcfcf;
  border-radius: 10px;
  background: #fff;
}

.sc-goods__grid{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* ==================================================
   仕上げ：カード小型化 / 説明を画像横 / 価格・数量・カート横並び
   画像ファイルは触らない（CSSで拡大しない）
================================================== */

/* カード内は明朝（商品一覧だけ） */
.sc-card--compact,
.sc-card--compact *{
  font-family:
    "游明朝","Yu Mincho",
    "ヒラギノ明朝 ProN","Hiragino Mincho ProN",
    "MS P明朝","MS Mincho",
    serif;
}

/* グリッドは自然可変（3カラム固定から卒業） */
.sc-goods__grid{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

/* カードを小さく・上品に（余白を減らす） */
.sc-card--compact{
  padding: 12px 12px 10px;
  border: 1px solid #e7e7e7;
  border-radius: 10px;
  background: #fff;
}

/* 商品名：上にピタッと置く（余計な間隔を減らす） */
.sc-card--compact .sc-goods__head{
  padding: 0;
  margin: 0 0 8px;
}
.sc-card--compact .sc-goods__name{
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
  margin: 0;
}

/* 中段：画像 + 説明（横並び） */
.sc-card__mid{
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

/* 画像：拡大しない、角丸しない */
.sc-card__photo img{
  display:block;
  max-width: 120px;      /* ←カードがデカい原因を潰す */
  height:auto;
  border-radius: 0 !important;
}

/* 説明：横に置いて読みやすく */
.sc-card__desc{
  flex: 1;
  font-size: 13px;
  line-height: 1.6;
  color: #333;
  margin: 0;
}
.sc-card__desc.is-empty{
  min-height: 1em;
}

/* 下段：価格・数量・カート横並び（オシャレ＆コンパクト） */
.sc-card__bottom{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}

/* 価格：主役、でも品よく */
.sc-card__price{
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  margin: 0;
}

/* 数量 */
.sc-qty{
  display:flex;
  align-items:center;
  gap: 6px;
  white-space: nowrap;
  margin: 0;
}
.sc-qty__label{
  font-size: 12px;
  opacity: .7;
}
.sc-qty__select{
  height: 34px;
  padding: 0 10px;
  border: 1px solid #cfcfcf;
  border-radius: 8px;
  background: #fff;
}

/* カートへ：主ボタン、派手すぎない */
.sc-card__btn{
  height: 34px;
  padding: 0 14px;
  border-radius: 8px;
  font-weight: 700;
}

/* PDFはサブ扱いで下に置く（主導線を邪魔しない） */
.sc-card__sub{
  margin-top: 8px;
}
.sc-card__sub .openPdfBtn{
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid #cfcfcf;
  background: #fff;
}

/* ==================================================
   仕上げ2：横一列カード（画像左・右に情報）
   - ボタン主張を抑える
   - 幅が狭いときの文字ズレ（への字）を防ぐ
   - 数量まわりの余白を詰める
================================================== */

.sc-card2, .sc-card2 *{
  font-family:
    "游明朝","Yu Mincho",
    "ヒラギノ明朝 ProN","Hiragino Mincho ProN",
    "MS P明朝","MS Mincho",
    serif;
}

/* カード全体：コンパクト */
.sc-card2{
  border: 1px solid #e7e7e7;
  border-radius: 10px;
  background: #fff;
  padding: 10px;
}

/* 画像左・右情報 */
.sc-card2__row{
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

/* 画像：拡大しない＆角丸なし */
.sc-card2__photo img{
  display:block;
  width: 120px;        /* カードを小さくする核心 */
  max-width: 120px;
  height: auto;
  border-radius: 0 !important;
}

/* 右側 */
.sc-card2__main{
  flex: 1;
  min-width: 0; /* これがないと狭い幅で崩れる */
}

/* 商品名：必ず独立行＆説明と差別化 */
.sc-card2__name{
  font-weight: 700;
  font-size: 16px;
  line-height: 1.35;
  margin: 0 0 6px;
  padding: 0;
}
.sc-card2__nameLink{
  text-decoration: none;
  color: inherit;
  display: inline-block;
}

/* 説明：少し控えめ */
.sc-card2__desc{
  font-size: 13px;
  line-height: 1.6;
  color: #333;
  margin: 0 0 10px;
}

/* 下段バー：価格・数量・ボタンを一列で美しく */
.sc-card2__bar{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;      /* 狭くなったら自然に折り返す */
}

/* 価格：左に固定感、幅を食いすぎない */
.sc-card2__price{
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
}

/* 数量：余白を詰める（でかすぎ問題対策） */
.sc-card2__qty{
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}
.sc-card2__qty .sc-qty__label{
  font-size: 12px;
  opacity: .75;
}
.sc-card2__qty .sc-qty__select{
  height: 30px;              /* 小さく */
  padding: 0 8px;            /* 余白を縮小 */
  border: 1px solid #cfcfcf;
  border-radius: 8px;
  background: #fff;
}

/* カートボタン：主張を抑える（セカンダリ寄り） */
/* “への字”ズレ対策：line-height, padding, min-width を固定 */
.sc-card2__btn{
  height: 30px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid #cfcfcf;
  background: #fff;          /* 主張を抑える */
  font-weight: 700;
  line-height: 30px;         /* ←文字の縦位置を固定 */
  white-space: nowrap;       /* “へ”がはみ出すのを防ぐ */
  min-width: 92px;           /* 狭すぎると崩れるので下限 */
}
.sc-card2__btn:hover{
  background: #f7f7f7;
}

/* PDFはさらに控えめ */
.sc-card2__sub{ margin-top: 8px; }
.sc-card2__pdfbtn{
  height: 28px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid #d6d6d6;
  background: #fff;
  line-height: 28px;
  white-space: nowrap;
}

/* ==================================================
   13インチ対策：高さが足りないときカテゴリが見切れないようにする
   目的：左カテゴリは「画面内に収まる高さ」にして、中だけスクロール
================================================== */

/* サブヘッダー（sticky）の想定高さ。実測に合わせて微調整OK */
:root{
  --sc-subheader-h: 72px; /* だいたい */
  --sc-sidebar-gap: 12px; /* 上下余白 */
}

/* PCでも左サイドバーを「画面高さ内」に収める */
@media (min-width: 901px){

  /* stickyのtopがズレると地獄なので、変数で統一 */
  .sc-sidebar{
    top: calc(var(--sc-header-offset, 0px) + var(--sc-subheader-h) + var(--sc-sidebar-gap));
    max-height: calc(100vh - (var(--sc-header-offset, 0px) + var(--sc-subheader-h) + var(--sc-sidebar-gap) * 2));
    overflow: hidden; /* 外側は固定。中だけスクロールさせる */
  }

  /* 中のカテゴリリストだけスクロール */
  .sc-catlist{
    max-height: calc(100vh - (var(--sc-header-offset, 0px) + var(--sc-subheader-h) + 120px));
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 6px; /* スクロールバーで文字が隠れない */
  }

  /* カテゴリ見出し部分は固定で見えるように */
  .sc-sidebar__title{
    position: sticky;
    top: 0;
    z-index: 2;
  }
}

@media (min-width: 901px){
  .sc-subheader{
    padding: 8px 12px;   /* 縦を削る */
  }
  .sc-subheader__right{
    gap: 8px;
  }
  .sc-linkbtn, .sc-catbtn{
    padding: 7px 10px;   /* ボタンも少し薄く */
  }
}

/* ==================================================
   スマホ：カテゴリドロワーが最後まで見れない問題の確実な解決
   - ドロワー本体は画面内高さに固定
   - 中身（カテゴリ一覧）だけスクロール
   - iOSのvh問題にも強めに寄せる
================================================== */

:root{
  --sc-drawer-top: 72px;   /* サブヘッダーの高さ想定。ズレるなら数値だけ調整 */
}

/* iOS Safari対策：100vhより安定する場合がある */
@supports (height: 100dvh){
  .sc-sidebar{
    height: calc(100dvh - var(--sc-drawer-top)) !important;
  }
}

@media (max-width: 1100px){

  /* ドロワー本体：ここは“固定枠”にする */
  .sc-sidebar{
    top: var(--sc-drawer-top) !important;
    height: calc(100vh - var(--sc-drawer-top)) !important;
    overflow: hidden !important; /* ←本体でスクロールさせない */
    display: flex;
    flex-direction: column;
  }

  /* 見出しは固定（スクロールで消えない） */
  .sc-sidebar__title{
    flex: 0 0 auto;
    position: sticky;
    top: 0;
    z-index: 2;
  }

  /* カテゴリ一覧：ここ“だけ”スクロール */
  .sc-catlist{
    flex: 1 1 auto;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 24px; /* 最後の項目が指で触れる余白 */
  }

  /* ついでに押しやすさ（ペルソナ向け） */
  .sc-catitem{
    padding: 14px 12px;
    border-radius: 12px;
  }
}

/* ============================
   iOS Safari 対策：ボタン文字消失防止
   既存CSSは触らず、上書きのみ
============================ */

/* カートへボタン（iPhone文字消失対策） */
.sc-card2__btn,
.shopcart-btn{
  line-height: normal !important;   /* 固定line-heightを殺す */
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

/* 数量セレクト（iOSで文字が欠ける予防） */
.sc-qty__select{
  line-height: normal !important;
}

/* ============================
   iOS Safari 強制表示対策
   button文字が消える問題の最終兵器
============================ */

.sc-card2__btn,
.shopcart-btn{
  color: #333 !important;                     /* 明示 */
  -webkit-text-fill-color: #333 !important;   /* ← iOSの核心 */
  background-clip: padding-box;
}

.sc-flash{
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(10px);
  opacity: 0;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(0,0,0,0.85);
  color: #fff;
  z-index: 99999;
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
  max-width: calc(100% - 24px);
  text-align: center;
  font-size: 14px;
}
.sc-flash.is-show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}