html {
  scroll-behavior: smooth;
}

.info-title-wrappar {
  border-radius: 8px;
  background: #e8731f;
  padding: 10px;
  position: relative;
  width: 100%;
  max-width: 1080px;
  margin: 20px auto 0;
}

@media screen and (max-width: 1080px) {
  .info-title-wrappar {
    width: auto;
    margin-left: 15px;
    margin-right: 15px;
  }
}

/* h2 全体をフレックスにして縦中央揃え */
.info-title-wrappar h2.info-title {font-size: 14px;text-align: left;color: #fff;margin: 0;margin-right: 20px;display: flex;align-items: center;line-height: 1.3;}

/* ▼ アイコン用の「きっちりした箱」を作る */
.info-title-wrappar h2.info-title i {
  margin-right: 6px;
  width: 1em;
  height: 1em;
  font-size: 1.2em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ▼ 疑似要素： ボックス右端に配置 */
.info-title-wrappar::after {
  content: "";
  position: absolute;
  top: 45%;
  right: 1em;
  width: 8px;
  height: 8px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: translateY(-50%) rotate(45deg);
  transform-origin: center;
  transition: 0.15s;
}

/* ============================================================
   クーポンオーバーレイ スタイル
============================================================ */

#campaignOverlay {
  background: rgba(0,0,0,0.55) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

#overlayContent {
  width: 460px !important;
  max-width: 92vw !important;
  background: #fff !important;
  border: 15px solid #E8731F !important;
  border-radius: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25) !important;
}

@media screen and (min-width: 768px) {
  #overlayContent { width: 540px !important; }
}

#bannerWrapper {
  padding: 0 !important;
  width: 100% !important;
  max-width: 520px !important;
  position: relative !important;
  overflow: hidden !important;
  background: #E8731F !important;
  height: auto !important;
  min-height: 0 !important;
}
#campaignOverlay .mdc-banner-wrapper,
#campaignOverlay #bannerWrapper {
  background: #E8731F !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}



.mdc-coupon-body {
  padding: 28px 28px 24px !important;
  text-align: center !important;
  background: #fff !important;
  position: relative !important;
  z-index: 1 !important;
}

.mdc-title {
  font-size: 1.51rem !important;
  font-weight: 900 !important;
  color: #4d3c27 !important;
  letter-spacing: 0.08em !important;
  margin: 0 0 12px !important;
  padding-bottom: 12px !important;
  border-bottom: 2px solid #E8731F !important;
  position: relative !important;
  line-height: 1.4 !important;
}
.mdc-title::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  bottom: -11px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  border-left: 10px solid transparent !important;
  border-right: 10px solid transparent !important;
  border-top: 10px solid #E8731F !important;
}

.mdc-condition {
  font-size: 1.21rem !important;
  color: #4d3c27 !important;
  margin: 22px 0 4px !important;
  letter-spacing: 0.12em !important;
  font-weight: 600 !important;
}

.mdc-price {
  font-size: 5.3rem !important;
  font-weight: 900 !important;
  color: #E8731F !important;
  margin: 10px 0 18px !important;
  line-height: 1.1 !important;
}
.mdc-price-unit {
  font-size: 2.51rem !important;
  font-weight: 900 !important;
}

.mdc-coupon-label {
  font-size: 1.16rem !important;
  color: #4d3c27 !important;
  margin: 0 0 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
}

.mdc-banner-content-coupon {
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}
.mdc-banner-content-coupon span {
  display: inline-block !important;
  background: #E8731F !important;
  color: #fff !important;
  font-family: 'Open Sans', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', Sans-serif !important;
  font-size: 2.5rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.28em !important;
  padding: 10px 24px !important;
  border-radius: 0 !important;
  user-select: all !important;
}

@media screen and (max-width: 753px) {
  .mdc-banner-content-coupon span {
    font-size: 1.6rem !important;
  }
}

.mdc-sep {
  position: relative !important;
  border-top: 3px dotted #E8731F !important;
  margin: 0 !important;
  height: 0 !important;
  overflow: visible !important;
}
.mdc-dot-l,
.mdc-dot-r {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 32px !important;
  height: 32px !important;
  background: #E8731F !important;
  border-radius: 50% !important;
  display: block !important;
}
.mdc-dot-l { left: -16px !important; }
.mdc-dot-r { right: -16px !important; }

.mdc-copy-btn {
  display: block !important;
  width: 100% !important;
  padding: 20px 0 !important;
  background: #fff !important;
  color: #4d3c27 !important;
  font-size: 1.35rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.1em !important;
  border: none !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  transition: background 0.2s, color 0.2s !important;
  margin: 0 !important;
  text-align: center !important;
}
.mdc-copy-btn:hover {
  background: #fff5ee !important;
  color: #E8731F !important;
}
.mdc-copy-btn:active {
  background: #ffe4cc !important;
}

.mdc-dont-show-wrapper {
  text-align: center !important;
  margin-top: 12px !important;
  padding: 0 !important;
  font-size: 14px !important;
  color: #fff !important;
}
.mdc-dont-show-wrapper label {
  cursor: pointer !important;
  font-weight: normal !important;
  color: #fff !important;
}
.mdc-dont-show-wrapper input[type="checkbox"] {
  margin-right: 6px !important;
  vertical-align: middle !important;
}

.mdc-copy-toast {
  font-size: 1.21rem !important;
  background: #4d3c27 !important;
  color: #fff !important;
  border-radius: 6px !important;
  padding: 8px 18px !important;
}

#campaignOverlay #closeOverlay {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 8px !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  border: none !important;
  background: rgba(0,0,0,0.7) !important;
  color: #fff !important;
  font-size: 30px !important;
  cursor: pointer !important;
}

/* ── 左端クーポンタブ（画像ボタン） ── */
#couponTabWrapper {
  position: fixed !important;
  left: 10px !important;
  bottom: 10px !important;
  z-index: 50000 !important;
  display: inline-block !important;
}

#couponTab {
  display: block !important;
  position: static !important;
  left: auto !important;
  bottom: auto !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  animation: couponTabPulse 2.5s ease-in-out infinite !important;
}

.coupon-tab-img {
  display: block !important;
  width: 180px !important;
  height: auto !important;
}

.coupon-tab-pc { display: block !important; }
.coupon-tab-sp { display: none !important; }

@media screen and (max-width: 480px) {
  .coupon-tab-pc { display: none !important; }
  .coupon-tab-sp { display: block !important; }
  .coupon-tab-img { width: 120px !important; }
}

/* ×ボタン */
#couponTabClose {
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  background: rgba(255,255,255,0.75) !important;
  border: none !important;
  color: #333 !important;
  font-size: 18px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  line-height: 1 !important;
  z-index: 50010 !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: auto !important;
}

@keyframes couponTabPulse {
  0%   { box-shadow: 3px 3px 10px rgba(150,150,150,0.4); }
  50%  { box-shadow: 3px 3px 22px rgba(150,150,150,0.9); }
  100% { box-shadow: 3px 3px 10px rgba(150,150,150,0.4); }
}
/* ── カーテン：左右に開くアニメーション（参考：webutubutu.com） ── */
.mdc-curtain {
  position: absolute !important;
  top: -15% !important;
  width: 51% !important;
  height: 130% !important;
  background: #E8731F !important;
  z-index: 10 !important;
  visibility: visible !important;
  box-shadow: none !important;
}
.mdc-curtain-left  { left: -1px !important; }
.mdc-curtain-right { right: -1px !important; }

@media screen and (max-width: 767px) {
  .mdc-curtain-right { right: -3px !important; }
}

/* mdc-play が付いたら開く */
#bannerWrapper.mdc-play .mdc-curtain-left {
  animation: curtainLeft 1.4s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}
#bannerWrapper.mdc-play .mdc-curtain-right {
  animation: curtainRight 1.4s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

@keyframes curtainLeft {
  0%   { transform: translateX(0); visibility: visible; }
  20%  { transform: rotate(0deg) translateX(0%); }
  60%  { transform: rotate(6deg) translateX(-50%); }
  80%  { opacity: 1; }
  100% { transform: rotate(0deg) translateX(-100%); opacity: 0; visibility: hidden; }
}
@keyframes curtainRight {
  0%   { transform: translateX(0); visibility: visible; }
  20%  { transform: rotate(0deg) translateX(0%); }
  60%  { transform: rotate(-6deg) translateX(50%); }
  80%  { opacity: 1; }
  100% { transform: rotate(0deg) translateX(100%); opacity: 0; visibility: hidden; }
}

#slider { background: #f8f7f5 !important; padding-bottom: 60px; position: relative; z-index: 0; /* ヘッダー(z-index:200)より下に固定してSwiper内部のz-indexが外に干渉しないようにする */ }
#slider .swiper-container { margin-bottom: 0 !important; }
#slider .swiper-pagination { bottom: 35px !important; }