@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* 商品が売れました表示の基本スタイル */
.sale-notification {
    position: fixed;
    bottom: 100px; /* ← フッターにかぶらないように上げる */
    left: 50%;
    transform: translateX(-50%); /* ← 中央寄せ */
    background-color: #f89749 !important; /* ← 背景色オレンジ */
    color: white !important; /* ← 文字色白 */
    font-size: 14px !important; /* ← 小さめの文字サイズ */
    padding: 10px 20px;
    border-radius: 5px;
    z-index: 99999 !important; /* ← 最前面に表示 */
    opacity: 0; /* 初期状態では透明 */
    transition: opacity 1s ease-in-out; /* じわっと表示・消える */
}

/* スマホ・タブレット用調整 */
@media screen and (max-width: 768px) {
    .sale-notification {
        bottom: 120px; /* ← スマホ用の位置調整（フッターにかぶらない） */
        font-size: 12px !important; /* ← さらに小さく */
        padding: 8px 16px;
    }
}