@charset "utf-8";
/* ==================================================
   2026 SUMMER CAMPAIGN 追従バナー（TOPページのみ）
   ※掲載終了時は下記3点を削除してください
     ・/top.php 内「2026 SUMMER CAMPAIGN 追従バナー」ブロック
     ・/index/css/cp_bnr.css（本ファイル）
     ・/index/js/cp_bnr.js
================================================== */
.p-cpbnr {
  position: fixed;
  right: 8px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 8px + var(--cpbnr-foot, 0px));
  width: calc(100% - 16px);
  max-width: 420px;
  padding-top: 16px;
  z-index: 1015;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  -webkit-transform: translateY(16px);
  transform: translateY(16px);
  -webkit-transition: opacity 0.6s ease, -webkit-transform 0.6s ease;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.p-cpbnr.is-show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.p-cpbnr.is-closed {
  display: none;
}

.p-cpbnr__link {
  display: block;
  line-height: 0;
  -webkit-box-shadow: 0 2px 14px rgba(0, 0, 0, 0.25);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.25);
}

.p-cpbnr__link img {
  width: 100%;
  height: auto;
}

/* 閉じるボタン */
.p-cpbnr__close {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  margin: 0;
  border: 1px solid #cccccc;
  border-radius: 50%;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.p-cpbnr__close::before,
.p-cpbnr__close::after {
  content: "";
  display: block;
  position: absolute;
  top: 12px;
  left: 6px;
  width: 14px;
  height: 1px;
  background: #333333;
}

.p-cpbnr__close::before {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.p-cpbnr__close::after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/* TOPページでは既存の特設バナー（マニュファクチュール）を非表示
   ※他ページ（BRAND / NEWS など）では従来どおり表示されます */
body.home .fixedBnr {
  display: none;
}

/* PAGE TOPボタンが追従バナーに重ならないよう上へ逃がす
   ※ --cpbnr-h / --cpbnr-foot は /index/js/cp_bnr.js が設定
     --cpbnr-h … バナーの高さ（閉じたときは0）
     --cpbnr-foot … フッターに重ならないよう押し上げる量 */
body.home .pageTop:not(.scrolling) {
  bottom: calc(env(safe-area-inset-bottom, 0px) + max(var(--cpbnr-h, 0px) + 26px, 40px));
}

/* フッター手前で止まった状態でも重ならないように */
body.home .pageTop.scrolling {
  top: calc(-1 * max(var(--cpbnr-h, 0px) + 24px, 20px));
}

@media screen and (min-width: 641px) {
  .p-cpbnr {
    right: 16px;
    bottom: calc(16px + var(--cpbnr-foot, 0px));
    width: 380px;
    max-width: 42%;
  }
}

@media screen and (min-width: 1024px) {
  .p-cpbnr {
    right: 20px;
    bottom: calc(20px + var(--cpbnr-foot, 0px));
    width: 400px;
    max-width: 34%;
  }

  body.home .pageTop.scrolling {
    top: calc(-1 * max(var(--cpbnr-h, 0px) + 24px, 40px));
  }
}