@charset "UTF-8";
/* ==========================================================
   BLACK FRIDAY 2026  (/shop/pages/black-friday-2026)
   すべて .bf26 配下にスコープ。ブレークポイントはテーマに合わせ 640px
   ========================================================== */

.bf26 {
  --bf-text: #2f2f2f;
  --bf-tan: #c1ad95;
  --bf-brown: #a76d46;
  --bf-bg: #f6f6f6;
  --bf-dark: #373838;
  --bf-line: #cdcdcd;
  --bf-en: futura-pt, "Futura PT", Futura, "Century Gothic", sans-serif;
  --bf-jp: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Helvetica Neue", Arial, Meiryo, sans-serif;
  --bf-num: "Helvetica Neue", Helvetica, Arial, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  color: var(--bf-text);
  font-family: var(--bf-jp);
  font-size: 16px;
  line-height: 1.8;
  text-align: left;
  -webkit-text-size-adjust: 100%;
}
.bf26 *,
.bf26 *::before,
.bf26 *::after { box-sizing: border-box; }
.bf26 h1, .bf26 h2, .bf26 h3, .bf26 p, .bf26 ul, .bf26 li {
  margin: 0; padding: 0; font-weight: 400; list-style: none; border: 0; background: none;
}
.bf26 img { max-width: 100%; height: auto; vertical-align: bottom; border: 0; }
.bf26 a { color: inherit; text-decoration: none; }
.bf26 s { text-decoration: line-through; }
.bf26 small { font-size: inherit; }
.bf26 .bf26-sp { display: none; }
.bf26 .bf26-inner { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 50px; }

/* ---------- FV ---------- */
.bf26 .bf26-fv { line-height: 0; }
.bf26 .bf26-fv img { width: 100%; height: auto; }

/* ---------- 20% / 25% バッジ ---------- */
.bf26 .bf26-lead { padding-top: 74px; text-align: center; }
.bf26 .bf26-lead__badges { display: flex; justify-content: center; gap: 46px; }
.bf26 .bf26-lead__badges img { width: 360px; height: auto; }

/* ---------- ボタン ---------- */
.bf26 .bf26-btn {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 100%; height: 52px; padding: 0 56px; text-indent: .12em;
  border: 1px solid #9c9c9c; background: #fff; color: var(--bf-text);
  font-size: 15px; line-height: 1.2; letter-spacing: .12em;
  transition: background-color .3s, color .3s, border-color .3s;
}
.bf26 .bf26-btn::after {
  content: ""; position: absolute; top: 50%; right: 22px; width: 26px; height: 5px; margin-top: -4px;
  border-bottom: 1px solid currentColor; border-right: 1px solid currentColor; transform: skewX(45deg);
}
.bf26 .bf26-btn:hover { background: var(--bf-dark); border-color: var(--bf-dark); color: #fff; }
.bf26 .bf26-btn--anchor { width: 330px; height: 56px; margin: 43px auto 0; font-size: 16px; }
.bf26 .bf26-btn--dark {
  width: 470px; height: 76px; margin: 0 auto; padding: 0 96px; text-indent: .08em;
  background: var(--bf-dark); border-color: var(--bf-dark); color: #fff; font-size: 23px; letter-spacing: .08em;
}
.bf26 .bf26-btn--dark::after { right: 34px; width: 48px; height: 6px; margin-top: -5px; }
.bf26 .bf26-btn--dark:hover { background: #fff; color: var(--bf-dark); }

/* ---------- 見出し ---------- */
.bf26 .bf26-head { padding-bottom: 30px; border-bottom: 1px solid var(--bf-line); text-align: center; }
.bf26 .bf26-head__jp { display: block; font-size: 34px; line-height: 1.4; letter-spacing: .2em; text-indent: .2em; font-weight: 300; }
.bf26 .bf26-head__en { display: block; margin-top: 12px; font-family: var(--bf-en); font-size: 20px; line-height: 1.3; letter-spacing: .12em; text-indent: .12em; }

/* ---------- キャンペーン概要 ---------- */
.bf26 .bf26-about { padding-top: 96px; scroll-margin-top: 150px; }
.bf26 .bf26-about__lead { margin-top: 30px; font-size: 16px; line-height: 30px; letter-spacing: .04em; text-align: center; }
.bf26 .bf26-cards { display: flex; justify-content: space-between; gap: 28px; margin-top: 54px; }
.bf26 .bf26-card { flex: 1 1 0; min-height: 247px; padding: 32px 24px 28px; background: var(--bf-bg); }
.bf26 .bf26-card__ttl { font-size: 20px; line-height: 1.5; letter-spacing: .1em; text-align: center; }
.bf26 .bf26-card__num { margin-top: 12px; font-family: var(--bf-en); font-size: 46px; line-height: 1.2; letter-spacing: .01em; text-align: center; white-space: nowrap; }
.bf26 .bf26-card__num--date { font-size: 39px; line-height: 1.42; letter-spacing: 0; }
.bf26 .bf26-nw { white-space: nowrap; }
.bf26 .bf26-card__num small { font-size: .68em; }
.bf26 .bf26-card__num .bf26-off-txt { margin-left: .16em; font-size: .72em; }
.bf26 .bf26-card__txt { margin-top: 20px; font-size: 12px; line-height: 25px; letter-spacing: .02em; }

.bf26 .bf26-flow { display: flex; align-items: center; justify-content: center; margin-top: 72px; }
.bf26 .bf26-flow li {
  display: flex; align-items: center; justify-content: center; width: 210px; height: 61px;
  border: 1px solid #9c9c9c; background: #fff; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: .06em; text-align: center;
}
.bf26 .bf26-flow li + li { position: relative; margin-left: 80px; }
.bf26 .bf26-flow li + li::before {
  content: ""; position: absolute; top: 50%; left: -47px; width: 11px; height: 11px; margin-top: -6px;
  border-top: 1px solid #555; border-right: 1px solid #555; transform: rotate(45deg);
}
.bf26 .bf26-flow .is-sale { border-color: var(--bf-tan); background: var(--bf-tan); color: #fff; }
.bf26 .bf26-flow .is-member { border-color: var(--bf-brown); background: var(--bf-brown); color: #fff; }

/* ---------- 対象商品 ---------- */
.bf26 .bf26-items { padding-top: 92px; scroll-margin-top: 150px; }
.bf26 .bf26-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 86px 41px; margin-top: 57px; }
.bf26 .bf26-item { display: flex; flex-direction: column; min-width: 0; }
.bf26 .bf26-item__img { position: relative; display: block; background: #f2f2f3; }
.bf26 .bf26-item__img img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: opacity .3s; }
.bf26 .bf26-item__img:hover img { opacity: .8; }
.bf26 .bf26-off {
  position: absolute; top: -9px; left: -8px; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 72px; height: 72px; border-radius: 50%; background: var(--bf-tan); color: #fff; font-family: var(--bf-en); line-height: 1; text-align: center;
}
.bf26 .bf26-off b { font-size: 26px; font-weight: 400; letter-spacing: .02em; }
.bf26 .bf26-off b small { font-size: .62em; }
.bf26 .bf26-off i { margin-top: 1px; font-size: 17px; font-style: normal; letter-spacing: .02em; }
.bf26 .bf26-item__name { margin-top: 22px; font-family: var(--bf-en); font-size: 20px; line-height: 1.4; letter-spacing: .06em; }
.bf26 .bf26-item__regular { margin-top: 4px; font-size: 13px; line-height: 1.7; letter-spacing: .04em; }
.bf26 .bf26-item__regular s { font-family: var(--bf-num); }
.bf26 .bf26-prices { margin: 18px 0 30px; }
.bf26 .bf26-price { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; min-height: 30px; }
.bf26 .bf26-price + .bf26-price { margin-top: 8px; }
.bf26 .bf26-price__label { font-size: 13px; font-weight: 600; line-height: 1.3; letter-spacing: .02em; }
.bf26 .bf26-price__val { display: flex; align-items: center; margin-left: auto; }
.bf26 .bf26-price__tag {
  display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 23px; margin-right: 11px;
  border: 1px solid #555; font-family: var(--bf-num); font-size: 13px; line-height: 1; letter-spacing: 0;
}
.bf26 .bf26-price__yen { font-family: var(--bf-num); font-size: 20px; line-height: 1.2; letter-spacing: -.01em; white-space: nowrap; }
.bf26 .bf26-price__yen small { margin-left: 4px; font-size: 11px; letter-spacing: 0; }
.bf26 .bf26-price.is-member { color: var(--bf-brown); }
.bf26 .bf26-price.is-member .bf26-price__tag { border-color: #d9b9a3; }
.bf26 .bf26-item .bf26-btn { margin-top: auto; }
.bf26 .bf26-note { margin-top: 36px; font-size: 12px; line-height: 1.8; letter-spacing: .02em; }

/* ---------- 会員登録 ---------- */
.bf26 .bf26-member { max-width: 1200px; margin: 100px auto 0; padding: 70px 100px 46px; background: var(--bf-bg); scroll-margin-top: 150px; }
.bf26 .bf26-member .bf26-head { padding-bottom: 0; border-bottom: 0; }
.bf26 .bf26-steps { display: flex; justify-content: space-between; gap: 30px; margin-top: 54px; }
.bf26 .bf26-step { position: relative; flex: 1 1 0; min-height: 207px; padding: 36px 24px 30px; background: #fff; }
.bf26 .bf26-step__no { position: absolute; top: -31px; left: 14px; color: var(--bf-tan); font-family: var(--bf-en); font-size: 50px; font-weight: 300; line-height: 1; letter-spacing: .04em; }
.bf26 .bf26-step__ttl { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 86px; text-align: center; }
.bf26 .bf26-step__sub { display: block; font-size: 16px; line-height: 1.5; letter-spacing: .02em; }
.bf26 .bf26-step__main { display: block; font-size: 26px; font-weight: 500; line-height: 1.4; letter-spacing: .02em; }
.bf26 .bf26-step__main--num { font-family: var(--bf-en); font-size: 46px; font-weight: 400; line-height: 1.15; color: #111; }
.bf26 .bf26-step__main--num small { font-size: .72em; }
.bf26 .bf26-step__main em { font-size: 1.36em; font-style: normal; letter-spacing: .06em; }
.bf26 .bf26-step__sub--after { font-size: 20px; }
.bf26 .bf26-step__txt { margin-top: 14px; font-size: 12px; line-height: 21px; letter-spacing: .02em; }
.bf26 .bf26-member__cta { margin-top: 48px; text-align: center; }
.bf26 .bf26-member__login { margin-top: 26px; font-size: 15px; line-height: 1.6; letter-spacing: .04em; text-align: center; }
.bf26 .bf26-member__login a { text-decoration: underline; text-underline-offset: 3px; }
.bf26 .bf26-member__login a:hover { text-decoration: none; }

/* ---------- Instagram (visumo) ---------- */
.bf26 .bf26-insta { margin-top: 150px; }
.bf26 .bf26-insta .link_btn { padding-top: 50px; text-align: center; line-height: 0; }
.bf26 .bf26-insta .link_btn a { display: inline-block; transition: opacity .3s; }
.bf26 .bf26-insta .link_btn a:hover { opacity: .7; }

/* ==========================================================
   SP
   ========================================================== */
@media only screen and (max-width: 640px) {
  .bf26 .bf26-pc { display: none; }
  .bf26 .bf26-sp { display: inline; }
  .bf26 .bf26-inner { padding: 0 22px; }

  .bf26 .bf26-lead { padding-top: 34px; }
  .bf26 .bf26-lead__badges { flex-direction: column; align-items: center; gap: 22px; }
  .bf26 .bf26-lead__badges img { width: 252px; }

  .bf26 .bf26-btn { height: 30px; padding: 0 30px; font-size: 10px; letter-spacing: .1em; text-indent: .1em; }
  .bf26 .bf26-btn::after { right: 12px; width: 15px; height: 4px; margin-top: -3px; }
  .bf26 .bf26-btn--anchor { width: 100%; max-width: 281px; height: 55px; margin-top: 34px; padding: 0 56px; font-size: 14px; }
  .bf26 .bf26-btn--anchor::after { right: 24px; width: 26px; height: 5px; margin-top: -4px; }
  .bf26 .bf26-btn--dark { width: 100%; max-width: 331px; height: 52px; padding: 0 64px; font-size: 16px; }
  .bf26 .bf26-btn--dark::after { right: 24px; width: 34px; height: 5px; margin-top: -4px; }

  .bf26 .bf26-head { padding-bottom: 20px; }
  .bf26 .bf26-head__jp { font-size: 22px; }
  .bf26 .bf26-head__en { margin-top: 8px; font-size: 12px; }

  .bf26 .bf26-about { padding-top: 84px; scroll-margin-top: 66px; }
  .bf26 .bf26-about__lead { margin-top: 24px; font-size: 13px; line-height: 23px; letter-spacing: 0; }
  .bf26 .bf26-cards { flex-direction: column; gap: 20px; margin-top: 30px; }
  .bf26 .bf26-card { flex: none; min-height: 0; padding: 20px 19px 20px; }
  .bf26 .bf26-card__ttl { font-size: 15px; }
  .bf26 .bf26-card__num { margin-top: 2px; font-size: 36px; }
  .bf26 .bf26-card__num--date { font-size: 34px; line-height: 1.3; }
  .bf26 .bf26-card__txt { margin-top: 8px; line-height: 22px; letter-spacing: 0; }

  .bf26 .bf26-flow { justify-content: space-between; margin-top: 24px; }
  .bf26 .bf26-flow li { flex: 0 0 27.2%; width: auto; height: 60px; font-size: 13px; font-weight: 400; }
  .bf26 .bf26-flow li + li { margin-left: 0; }
  .bf26 .bf26-flow li + li::before { left: auto; right: calc(100% + 9px); width: 9px; height: 9px; margin-top: -5px; }
  .bf26 .bf26-flow .is-regular { border-color: var(--bf-dark); background: var(--bf-dark); color: #fff; }

  .bf26 .bf26-items { padding-top: 80px; scroll-margin-top: 66px; }
  .bf26 .bf26-list { grid-template-columns: repeat(2, 1fr); gap: 52px 16px; margin-top: 38px; }
  .bf26 .bf26-off { top: -4px; left: -4px; width: 34px; height: 34px; }
  .bf26 .bf26-off b { font-size: 13px; }
  .bf26 .bf26-off i { margin-top: 0; font-size: 8px; }
  .bf26 .bf26-item__name { margin-top: 8px; font-size: 13px; }
  .bf26 .bf26-item__regular { margin-top: 0; font-size: 10px; letter-spacing: 0; }
  .bf26 .bf26-prices { margin: 8px 0 14px; }
  .bf26 .bf26-price { min-height: 20px; }
  .bf26 .bf26-price + .bf26-price { margin-top: 2px; }
  .bf26 .bf26-price__label { font-size: 8px; letter-spacing: 0; }
  .bf26 .bf26-price__tag { width: 34px; height: 13px; margin-right: 5px; font-size: 7px; }
  .bf26 .bf26-price__yen { font-size: 13px; }
  .bf26 .bf26-price__yen small { margin-left: 2px; font-size: 7px; }
  .bf26 .bf26-note { margin-top: 26px; font-size: 10px; }

  .bf26 .bf26-member { margin-top: 70px; padding: 44px 22px 40px; scroll-margin-top: 66px; }
  .bf26 .bf26-member .bf26-head__jp { font-size: 20px; letter-spacing: .14em; text-indent: .14em; }
  .bf26 .bf26-steps { flex-wrap: wrap; gap: 32px 20px; margin-top: 44px; }
  .bf26 .bf26-step { flex: 1 1 calc(50% - 10px); min-height: 0; padding: 24px 9px 22px; }
  .bf26 .bf26-step:nth-child(3) { flex-basis: 100%; }
  .bf26 .bf26-step__no { top: -17px; left: 9px; font-size: 30px; }
  .bf26 .bf26-step__ttl { min-height: 62px; }
  .bf26 .bf26-step__sub { font-size: 11px; letter-spacing: 0; white-space: nowrap; }
  .bf26 .bf26-step__main { font-size: 17px; }
  .bf26 .bf26-step__main--num { font-size: 30px; }
  .bf26 .bf26-step__sub--after { font-size: 13px; }
  .bf26 .bf26-step:nth-child(3) .bf26-step__main { font-size: 26px; }
  .bf26 .bf26-step__txt { margin-top: 6px; line-height: 20px; letter-spacing: 0; }
  .bf26 .bf26-member__cta { margin-top: 40px; }
  .bf26 .bf26-member__login { margin-top: 16px; font-size: 14px; }

  .bf26 .bf26-insta { margin-top: 70px; }
  .bf26 .bf26-insta .link_btn { padding-top: 30px; }
  .bf26 .bf26-insta .link_btn img { width: 260px; height: auto; }
}