/* =====================================================
   キャンペーンリボン（共通）
   使い方:
     <div class="cx-ribbon">
       <span class="band">テキスト</span>
       <span class="fold-l" aria-hidden="true"></span>
       <span class="fold-r" aria-hidden="true"></span>
     </div>
   修飾:
     .cx-ribbon--sm … コンパクト（LP内バッジ向け）
     .cx-ribbon--left … 左寄せ
     .cx-ribbon--on-light … 明るい背景向けの影
   ===================================================== */
.cx-ribbon{
  position:relative;display:table;margin:24px auto 0;
  filter:drop-shadow(0 6px 14px rgba(4,10,20,.45));
}
.cx-ribbon .band{
  position:relative;z-index:2;display:inline-block;
  background:linear-gradient(180deg,var(--gold-lt) 0%,var(--gold) 100%);
  color:var(--navy);
  font-family:"Zen Old Mincho",serif;font-weight:700;
  font-size:13.5px;letter-spacing:.3em;text-indent:.3em;
  padding:10px 36px 9px;
}
/* 帯の内側の点線（縫い目） */
.cx-ribbon .band::before{
  content:"";position:absolute;inset:3px;
  border:1px dashed rgba(10,30,60,.35);
  pointer-events:none;
}
/* 両端の垂れ（燕尾） */
.cx-ribbon::before,
.cx-ribbon::after{
  content:"";position:absolute;top:7px;width:34px;height:100%;z-index:0;
  background:linear-gradient(180deg,var(--gold) 0%,var(--gold-deep) 100%);
}
.cx-ribbon::before{
  left:-22px;
  clip-path:polygon(100% 0,0 0,32% 50%,0 100%,100% 100%);
}
.cx-ribbon::after{
  right:-22px;
  clip-path:polygon(0 0,100% 0,68% 50%,100% 100%,0 100%);
}
/* 帯と垂れをつなぐ折り返しの影 */
.cx-ribbon .fold-l,
.cx-ribbon .fold-r{
  position:absolute;top:100%;width:10px;height:7px;z-index:1;
  background:var(--gold-deep);
}
.cx-ribbon .fold-l{left:-10px;clip-path:polygon(100% 0,100% 100%,0 0);}
.cx-ribbon .fold-r{right:-10px;clip-path:polygon(0 0,0 100%,100% 0);}

/* 左寄せ */
.cx-ribbon--left{margin-left:0;margin-right:0;}

/* 明るい背景向け */
.cx-ribbon--on-light{
  filter:drop-shadow(0 4px 10px rgba(10,30,60,.18));
}

/* コンパクト（バナー／料金再案内向け） */
.cx-ribbon--sm{margin-top:0;margin-bottom:10px;}
.cx-ribbon--sm .band{
  font-size:11px;letter-spacing:.18em;text-indent:.18em;
  padding:5px 18px 4px;
}
.cx-ribbon--sm .band::before{inset:2px;}
.cx-ribbon--sm::before,
.cx-ribbon--sm::after{
  top:4px;width:22px;
}
.cx-ribbon--sm::before{left:-14px;}
.cx-ribbon--sm::after{right:-14px;}
.cx-ribbon--sm .fold-l,
.cx-ribbon--sm .fold-r{width:7px;height:5px;}
.cx-ribbon--sm .fold-l{left:-7px;}
.cx-ribbon--sm .fold-r{right:-7px;}

@media(max-width:520px){
  .cx-ribbon .band{
    font-size:12px;padding:9px 22px 8px;
    letter-spacing:.22em;text-indent:.22em;
  }
  .cx-ribbon--sm .band{
    font-size:10.5px;padding:5px 14px 4px;
    letter-spacing:.14em;text-indent:.14em;
  }
}