@charset "UTF-8";
/* =========================================================
   DOG LUCK — ブログ用クローム差し替え
   SWELLの枠組み・サイドバー・本文はそのまま。ヘッダー/フッターの
   「見た目」だけ独自(bespoke)に置き換える。SWELL本来のヘッダー/フッターを隠す。
   ※ ブログ(dl_is_blog_context)でのみ読み込み。
   ========================================================= */

/* ---- SWELL本来のヘッダー一式を隠す（独自ヘッダーを wp_body_open で注入済み） ---- */
.l-header,
#header,
.l-fixHeader,
#fix_header,
.p-spMenu,
#sp_menu,
.l-header__menuBtn,
.l-header__customBtn {
  display: none !important;
}

/* 独自ヘッダーは position:fixed。SWELLヘッダーの高さが消える分、本文を下げて重なりを防ぐ */
#body_wrap {
  padding-top: 84px;
}
@media (max-width: 768px) {
  #body_wrap { padding-top: 68px; }
}

/* ---- SWELL本来のフッター・固定ボタンを隠す（独自フッター＋追従CTA＋下部バーに置換） ---- */
#footer.l-footer,
.p-fixBtns,
.c-fixBtns,
.p-pagetopBtn,
.c-pagetopBtn,
#page_top,
.p-pagetop {
  display: none !important;
}

/* ---- 追従「ご購入」ボタン（front-page.css相当をブログにも適用）----
   これが無いとSVGにサイズが効かず巨大な青いカートが出るため必須。
   既定は非表示、site.jsがスクロールで .is-visible を付けて表示。 */
.floating-cta {
  position: fixed;
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: 150;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  background: var(--shu);
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.86rem;
  letter-spacing: 0.14em;
  padding: 1em 1.8em;
  border-radius: 999px;
  box-shadow: 0 18px 40px -18px rgba(26, 24, 22, .6);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), background .4s, visibility .5s;
  text-decoration: none;
}
.floating-cta.is-visible { opacity: 1; visibility: visible; transform: none; }
.floating-cta:hover { background: var(--ink); color: #fff; }
.floating-cta .cart-ico { display: inline-flex; }
.floating-cta .cart-ico svg { width: 1.15em; height: 1.15em; display: block; }
@media (max-width: 768px) { .floating-cta { display: none !important; } }