@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
*/

/* ─────────────────────────────────────────────
 *  フォロー（追従）バナー  最終版 style.css
 *   ─ PC：右下固定（幅 300px）
 *   ─ SP：画面下に幅100%で固定
 *   ※ 子テーマ（swell_child）にそのまま貼り付ければ動きます
 * ───────────────────────────────────────────── */

/* ========== デフォルト（PC 600px 以上）========== */
.follow-banner{
  position:fixed !important;   /* ← 競合を防ぐため !important */
  bottom:25px;                 /* PC での下端余白 */
  right:25px;                  /* PC での右端余白 */
  width:300px !important;      /* PC でのバナー幅 */
  z-index:999;                 /* ヘッダーより前面へ */
  border-radius:10px;          /* 角丸 (不要なら削除) */
  box-shadow:0 4px 12px rgba(0,0,0,.15); /* 影 (不要なら削除) */
  margin:0;                    /* WP が付与する余白を打ち消し */
}

/* 画像を全面クリックエリア化 */
.follow-banner a,
.follow-banner img{
  display:block !important;
  width:100% !important;
  height:auto !important;
}

/* ========== スマホ（599px 以下）========== */
@media (max-width:599px){
  .follow-banner{
    bottom:0 !important;       /* 画面最下部に固定 */
    left:0 !important;
    right:auto !important;
    width:100% !important;     /* 横幅いっぱい */
    border-radius:0 !important;
    box-shadow:none !important;
    /* iPhone X 系ホームインジケータとの重なりを避ける */
    padding-bottom:env(safe-area-inset-bottom);
    text-align:center;
  }
}