.bslg-cta-card {
    position: relative;
    display: block;
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    border: 1px solid var(--bslg-cta-border);
    border-radius: var(--bslg-cta-radius);
    background: var(--bslg-cta-bg);
    color: var(--bslg-cta-text);
    text-decoration: none;
    font-family: "Yu Gothic", "YuGothic", "Meiryo", sans-serif;
}

a.bslg-cta-card:hover {
    color: var(--bslg-cta-text);
    text-decoration: none;
    opacity: 0.96;
}

.bslg-cta-shadow-none {
    box-shadow: none;
}

.bslg-cta-shadow-soft {
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.10);
}

.bslg-cta-shadow-strong {
    box-shadow: 6px 8px 18px rgba(0, 0, 0, 0.18);
}

.bslg-cta-content {
    position: relative;
    z-index: 2;
    padding: 28px 24px;
    text-align: center;
}

.bslg-cta-title {
    margin: 0 0 16px 0;
    color: var(--bslg-cta-title) !important;
    font-size: var(--bslg-cta-title-size, 23px) !important;
    line-height: 1.45;
    font-weight: var(--bslg-cta-title-weight, 800) !important;
    letter-spacing: 0.04em;
}

.bslg-cta-description {
    margin: 0;
    color: var(--bslg-cta-desc) !important;
    font-size: var(--bslg-cta-desc-size, 14px) !important;
    line-height: 1.8;
    font-weight: var(--bslg-cta-desc-weight, 400) !important;
}

.bslg-cta-button-wrap {
    margin-top: 20px;
}

.bslg-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    min-height: 40px;
    padding: 9px 18px;
    border: 1px solid var(--bslg-cta-btn-text);
    background: var(--bslg-cta-btn-bg);
    color: var(--bslg-cta-btn-text) !important;
    text-decoration: none;
    font-size: var(--bslg-cta-btn-size, 14px) !important;
    font-weight: var(--bslg-cta-btn-weight, 700) !important;
    line-height: 1.3;
}

.bslg-cta-button:hover {
    color: var(--bslg-cta-btn-text);
    text-decoration: none;
    opacity: 0.9;
}

.bslg-cta-image-wrap {
    position: relative;
    z-index: 2;
    overflow: hidden;
    height: var(--bslg-cta-image-height);
    border-radius: var(--bslg-cta-image-radius);
}

.bslg-cta-image-wrap img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--bslg-cta-object-position-x) var(--bslg-cta-object-position-y);
}

.bslg-cta-image-left,
.bslg-cta-image-right {
    display: grid;
    grid-template-columns: 42% 1fr;
    align-items: stretch;
}

.bslg-cta-image-right {
    grid-template-columns: 1fr 42%;
}

.bslg-cta-image-left .bslg-cta-image-wrap,
.bslg-cta-image-right .bslg-cta-image-wrap {
    height: auto;
    min-height: var(--bslg-cta-image-height);
    border-radius: 0;
}

.bslg-cta-image-left .bslg-cta-content,
.bslg-cta-image-right .bslg-cta-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.bslg-cta-bg-image {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-size: cover;
    background-position: var(--bslg-cta-object-position-x) var(--bslg-cta-object-position-y);
    opacity: 0.28;
}

.bslg-cta-image-background .bslg-cta-content {
    min-height: var(--bslg-cta-image-height);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.bslg-cta-ribbon {
    position: absolute;
    z-index: 5;
    top: 14px;
    width: 150px;
    padding: 7px 0;
    background: var(--bslg-cta-ribbon-bg);
    color: var(--bslg-cta-ribbon-text);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    transform-origin: center;
}

.bslg-cta-ribbon-right {
    right: -42px;
    transform: rotate(45deg);
}

.bslg-cta-ribbon-left {
    left: -42px;
    transform: rotate(-45deg);
}

/* -----------------------------------------------------------
   曲線装飾
   ----------------------------------------------------------- */
.bslg-cta-curve-top::before,
.bslg-cta-curve-both::before {
    content: "";
    position: absolute;
    left: -5%;
    right: -5%;
    top: -46px;
    z-index: 3;
    height: 92px;
    background: #ffffff;
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    pointer-events: none;
}

.bslg-cta-curve-bottom::after,
.bslg-cta-curve-both::after {
    content: "";
    position: absolute;
    left: -5%;
    right: -5%;
    bottom: -46px;
    z-index: 3;
    height: 92px;
    background: #ffffff;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    pointer-events: none;
}

@media screen and (max-width: 768px) {
    .bslg-cta-image-left,
    .bslg-cta-image-right {
        grid-template-columns: 1fr;
    }

    .bslg-cta-image-right .bslg-cta-image-wrap {
        order: -1;
    }

    .bslg-cta-content {
        padding: 24px 18px;
    }

    .bslg-cta-title {
        font-size: var(--bslg-cta-title-size, 20px) !important;
    }

    .bslg-cta-description {
        font-size: var(--bslg-cta-desc-size, 13px) !important;
    }

    .bslg-cta-button {
        width: 100%;
        max-width: 280px;
    }
}

/* -----------------------------------------------------------
   v1.2.2 Elementor寄せ追加設定
   ----------------------------------------------------------- */
.bslg-cta-card {
    min-height: var(--bslg-cta-box-height);
    transition: transform 0.25s ease, opacity 0.25s ease, box-shadow 0.25s ease;
}

.bslg-cta-card[style*="--bslg-cta-box-height: 0px"] {
    min-height: 0;
}

.bslg-cta-content {
    padding: var(--bslg-cta-pad-top) var(--bslg-cta-pad-right) var(--bslg-cta-pad-bottom) var(--bslg-cta-pad-left);
}

.bslg-cta-align-left .bslg-cta-content {
    text-align: left;
}

.bslg-cta-align-center .bslg-cta-content {
    text-align: center;
}

.bslg-cta-align-right .bslg-cta-content {
    text-align: right;
}

.bslg-cta-vpos-top .bslg-cta-content {
    justify-content: flex-start;
}

.bslg-cta-vpos-middle .bslg-cta-content {
    justify-content: center;
}

.bslg-cta-vpos-bottom .bslg-cta-content {
    justify-content: flex-end;
}

.bslg-cta-button {
    padding: var(--bslg-cta-btn-pad-top) var(--bslg-cta-btn-pad-right) var(--bslg-cta-btn-pad-bottom) var(--bslg-cta-btn-pad-left);
    border-color: var(--bslg-cta-btn-border);
    border-width: var(--bslg-cta-btn-border-width);
    border-radius: var(--bslg-cta-btn-radius);
}

.bslg-cta-hover-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--bslg-cta-overlay);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.bslg-cta-card:hover .bslg-cta-hover-overlay {
    opacity: 0.08;
}

.bslg-cta-hover-zoom_in:hover {
    transform: scale(1.03);
}

.bslg-cta-hover-zoom_out:hover {
    transform: scale(0.98);
}

.bslg-cta-hover-move_left:hover {
    transform: translateX(-8px);
}

.bslg-cta-hover-move_right:hover {
    transform: translateX(8px);
}

.bslg-cta-hover-move_up:hover {
    transform: translateY(-8px);
}

.bslg-cta-hover-move_down:hover {
    transform: translateY(8px);
}

.bslg-cta-ribbon-right {
    right: calc(var(--bslg-cta-ribbon-distance) * -1);
}

.bslg-cta-ribbon-left {
    left: calc(var(--bslg-cta-ribbon-distance) * -1);
}

/* マスク */
.bslg-cta-mask .bslg-cta-image-wrap {
    background: transparent;
}

.bslg-cta-mask .bslg-cta-image-wrap img {
    clip-path: circle(45% at 50% 50%);
}

.bslg-cta-mask-circle .bslg-cta-image-wrap img {
    clip-path: circle(45% at 50% 50%);
}

.bslg-cta-mask-oval_vertical .bslg-cta-image-wrap img {
    clip-path: ellipse(35% 48% at 50% 50%);
}

.bslg-cta-mask-oval_horizontal .bslg-cta-image-wrap img {
    clip-path: ellipse(48% 34% at 50% 50%);
}

.bslg-cta-mask-round_square .bslg-cta-image-wrap img {
    clip-path: inset(5% 5% 5% 5% round 22%);
}

.bslg-cta-mask-round_rect .bslg-cta-image-wrap img {
    clip-path: inset(12% 4% 12% 4% round 20%);
}

.bslg-cta-mask-triangle .bslg-cta-image-wrap img {
    clip-path: polygon(50% 5%, 95% 92%, 5% 92%);
}

.bslg-cta-mask-diamond .bslg-cta-image-wrap img {
    clip-path: polygon(50% 5%, 95% 50%, 50% 95%, 5% 50%);
}

.bslg-cta-mask-pentagon .bslg-cta-image-wrap img {
    clip-path: polygon(50% 4%, 96% 38%, 78% 94%, 22% 94%, 4% 38%);
}

.bslg-cta-mask-hexagon .bslg-cta-image-wrap img {
    clip-path: polygon(25% 6%, 75% 6%, 98% 50%, 75% 94%, 25% 94%, 2% 50%);
}

.bslg-cta-mask-heptagon .bslg-cta-image-wrap img {
    clip-path: polygon(50% 4%, 88% 20%, 98% 58%, 72% 94%, 28% 94%, 2% 58%, 12% 20%);
}

.bslg-cta-mask-octagon .bslg-cta-image-wrap img {
    clip-path: polygon(30% 4%, 70% 4%, 96% 30%, 96% 70%, 70% 96%, 30% 96%, 4% 70%, 4% 30%);
}

/* -----------------------------------------------------------
   v1.2.4 リボン4隅配置
   ----------------------------------------------------------- */
.bslg-cta-ribbon-top_left {
    top: 14px;
    left: calc(var(--bslg-cta-ribbon-distance) * -1);
    right: auto;
    bottom: auto;
    transform: rotate(-45deg);
}

.bslg-cta-ribbon-top_right {
    top: 14px;
    right: calc(var(--bslg-cta-ribbon-distance) * -1);
    left: auto;
    bottom: auto;
    transform: rotate(45deg);
}

.bslg-cta-ribbon-bottom_left {
    bottom: 14px;
    left: calc(var(--bslg-cta-ribbon-distance) * -1);
    right: auto;
    top: auto;
    transform: rotate(45deg);
}

.bslg-cta-ribbon-bottom_right {
    bottom: 14px;
    right: calc(var(--bslg-cta-ribbon-distance) * -1);
    left: auto;
    top: auto;
    transform: rotate(-45deg);
}

/* 旧値互換 */
.bslg-cta-ribbon-left {
    top: 14px;
    left: calc(var(--bslg-cta-ribbon-distance) * -1);
    right: auto;
    bottom: auto;
    transform: rotate(-45deg);
}

.bslg-cta-ribbon-right {
    top: 14px;
    right: calc(var(--bslg-cta-ribbon-distance) * -1);
    left: auto;
    bottom: auto;
    transform: rotate(45deg);
}

/* -----------------------------------------------------------
   v1.2.5 リボン切れ対策
   ----------------------------------------------------------- */
.bslg-cta-card {
    overflow: visible;
}

.bslg-cta-ribbon {
    width: var(--bslg-cta-ribbon-width);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 左上 / 右上 */
.bslg-cta-ribbon-top_left {
    top: 14px;
    left: calc(var(--bslg-cta-ribbon-distance) * -1);
    right: auto;
    bottom: auto;
    transform: rotate(-45deg);
}

.bslg-cta-ribbon-top_right {
    top: 14px;
    right: calc(var(--bslg-cta-ribbon-distance) * -1);
    left: auto;
    bottom: auto;
    transform: rotate(45deg);
}

/* 左下 / 右下 */
.bslg-cta-ribbon-bottom_left {
    bottom: 14px;
    left: calc(var(--bslg-cta-ribbon-distance) * -1);
    right: auto;
    top: auto;
    transform: rotate(45deg);
}

.bslg-cta-ribbon-bottom_right {
    bottom: 14px;
    right: calc(var(--bslg-cta-ribbon-distance) * -1);
    left: auto;
    top: auto;
    transform: rotate(-45deg);
}

/* -----------------------------------------------------------
   v1.2.6 リボン角固定修正
   ----------------------------------------------------------- */
.bslg-cta-card {
    overflow: hidden;
}

/* リボンはカード外へ飛ばさず、角の中で斜め帯として見せる */
.bslg-cta-ribbon {
    width: var(--bslg-cta-ribbon-width);
    height: 28px;
    padding: 8px 0;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1;
}

/* 左上 / 右上 */
.bslg-cta-ribbon-top_left {
    top: calc(var(--bslg-cta-ribbon-distance) * 0.55);
    left: calc(var(--bslg-cta-ribbon-distance) * -0.78);
    right: auto;
    bottom: auto;
    transform: rotate(-45deg);
}

.bslg-cta-ribbon-top_right {
    top: calc(var(--bslg-cta-ribbon-distance) * 0.55);
    right: calc(var(--bslg-cta-ribbon-distance) * -0.78);
    left: auto;
    bottom: auto;
    transform: rotate(45deg);
}

/* 左下 / 右下 */
.bslg-cta-ribbon-bottom_left {
    bottom: calc(var(--bslg-cta-ribbon-distance) * 0.55);
    left: calc(var(--bslg-cta-ribbon-distance) * -0.78);
    right: auto;
    top: auto;
    transform: rotate(45deg);
}

.bslg-cta-ribbon-bottom_right {
    bottom: calc(var(--bslg-cta-ribbon-distance) * 0.55);
    right: calc(var(--bslg-cta-ribbon-distance) * -0.78);
    left: auto;
    top: auto;
    transform: rotate(-45deg);
}

/* 旧値互換 */
.bslg-cta-ribbon-left {
    top: calc(var(--bslg-cta-ribbon-distance) * 0.55);
    left: calc(var(--bslg-cta-ribbon-distance) * -0.78);
    right: auto;
    bottom: auto;
    transform: rotate(-45deg);
}

.bslg-cta-ribbon-right {
    top: calc(var(--bslg-cta-ribbon-distance) * 0.55);
    right: calc(var(--bslg-cta-ribbon-distance) * -0.78);
    left: auto;
    bottom: auto;
    transform: rotate(45deg);
}

/* -----------------------------------------------------------
   v1.2.7 リボンを画像ではなくカード角基準に固定
   ----------------------------------------------------------- */
.bslg-cta-card {
    overflow: hidden !important;
    isolation: isolate;
}

.bslg-cta-image-wrap,
.bslg-cta-content,
.bslg-cta-bg-image {
    z-index: 1;
}

.bslg-cta-ribbon {
    z-index: 50 !important;
    width: var(--bslg-cta-ribbon-width) !important;
    height: 28px;
    padding: 8px 0 !important;
    box-sizing: border-box;
    line-height: 1 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

/*
  Distance は「角から帯中心までの距離」として使う。
  左上の場合:
    top  = Distance
    left = Distance - (帯の長さ / 2)
  こうすると、帯の長さを変えてもカード角から大きく飛び出さない。
*/
.bslg-cta-ribbon-top_left {
    top: var(--bslg-cta-ribbon-distance) !important;
    left: calc(var(--bslg-cta-ribbon-distance) - (var(--bslg-cta-ribbon-width) / 2)) !important;
    right: auto !important;
    bottom: auto !important;
    transform: rotate(-45deg) !important;
}

.bslg-cta-ribbon-top_right {
    top: var(--bslg-cta-ribbon-distance) !important;
    right: calc(var(--bslg-cta-ribbon-distance) - (var(--bslg-cta-ribbon-width) / 2)) !important;
    left: auto !important;
    bottom: auto !important;
    transform: rotate(45deg) !important;
}

.bslg-cta-ribbon-bottom_left {
    bottom: var(--bslg-cta-ribbon-distance) !important;
    left: calc(var(--bslg-cta-ribbon-distance) - (var(--bslg-cta-ribbon-width) / 2)) !important;
    right: auto !important;
    top: auto !important;
    transform: rotate(45deg) !important;
}

.bslg-cta-ribbon-bottom_right {
    bottom: var(--bslg-cta-ribbon-distance) !important;
    right: calc(var(--bslg-cta-ribbon-distance) - (var(--bslg-cta-ribbon-width) / 2)) !important;
    left: auto !important;
    top: auto !important;
    transform: rotate(-45deg) !important;
}

/* 旧値互換 */
.bslg-cta-ribbon-left {
    top: var(--bslg-cta-ribbon-distance) !important;
    left: calc(var(--bslg-cta-ribbon-distance) - (var(--bslg-cta-ribbon-width) / 2)) !important;
    right: auto !important;
    bottom: auto !important;
    transform: rotate(-45deg) !important;
}

.bslg-cta-ribbon-right {
    top: var(--bslg-cta-ribbon-distance) !important;
    right: calc(var(--bslg-cta-ribbon-distance) - (var(--bslg-cta-ribbon-width) / 2)) !important;
    left: auto !important;
    bottom: auto !important;
    transform: rotate(45deg) !important;
}

/* -----------------------------------------------------------
   v1.2.8 開始アニメーション
   ----------------------------------------------------------- */
.bslg-cta-card[class*="bslg-cta-entrance-"]:not(.bslg-cta-entrance-none) {
    animation-duration: var(--bslg-cta-animation-duration);
    animation-delay: var(--bslg-cta-animation-delay);
    animation-fill-mode: both;
    animation-timing-function: ease;
}

.bslg-cta-entrance-fade_in {
    animation-name: bslgCtaFadeIn;
}

.bslg-cta-entrance-fade_in_down {
    animation-name: bslgCtaFadeInDown;
}

.bslg-cta-entrance-fade_in_left {
    animation-name: bslgCtaFadeInLeft;
}

.bslg-cta-entrance-fade_in_right {
    animation-name: bslgCtaFadeInRight;
}

.bslg-cta-entrance-fade_in_up {
    animation-name: bslgCtaFadeInUp;
}

.bslg-cta-entrance-zoom_in {
    animation-name: bslgCtaZoomIn;
}

.bslg-cta-entrance-zoom_out {
    animation-name: bslgCtaZoomOut;
}

.bslg-cta-entrance-slide_in_left {
    animation-name: bslgCtaSlideInLeft;
}

.bslg-cta-entrance-slide_in_right {
    animation-name: bslgCtaSlideInRight;
}

.bslg-cta-entrance-slide_in_up {
    animation-name: bslgCtaSlideInUp;
}

.bslg-cta-entrance-slide_in_down {
    animation-name: bslgCtaSlideInDown;
}

@keyframes bslgCtaFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes bslgCtaFadeInDown {
    from { opacity: 0; transform: translateY(-28px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes bslgCtaFadeInLeft {
    from { opacity: 0; transform: translateX(-28px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes bslgCtaFadeInRight {
    from { opacity: 0; transform: translateX(28px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes bslgCtaFadeInUp {
    from { opacity: 0; transform: translateY(28px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes bslgCtaZoomIn {
    from { opacity: 0; transform: scale(0.86); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes bslgCtaZoomOut {
    from { opacity: 0; transform: scale(1.12); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes bslgCtaSlideInLeft {
    from { transform: translateX(-60px); }
    to { transform: translateX(0); }
}

@keyframes bslgCtaSlideInRight {
    from { transform: translateX(60px); }
    to { transform: translateX(0); }
}

@keyframes bslgCtaSlideInUp {
    from { transform: translateY(60px); }
    to { transform: translateY(0); }
}

@keyframes bslgCtaSlideInDown {
    from { transform: translateY(-60px); }
    to { transform: translateY(0); }
}

/* -----------------------------------------------------------
   v1.2.9 画面内表示時に開始アニメーション
   ----------------------------------------------------------- */
.bslg-cta-card.bslg-cta-animate-ready:not(.bslg-cta-visible):not(.bslg-cta-entrance-none) {
    opacity: 0;
    animation-name: none !important;
}

.bslg-cta-card.bslg-cta-visible:not(.bslg-cta-entrance-none) {
    animation-duration: var(--bslg-cta-animation-duration);
    animation-delay: var(--bslg-cta-animation-delay);
    animation-fill-mode: both;
    animation-timing-function: ease;
}

/* -----------------------------------------------------------
   v1.3.0 リボンシャドウ
   ----------------------------------------------------------- */
.bslg-cta-ribbon-shadow-none {
    box-shadow: none;
}

.bslg-cta-ribbon-shadow-soft {
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.22);
}

.bslg-cta-ribbon-shadow-strong {
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.34);
}

/* -----------------------------------------------------------
   v1.3.1 レスポンシブ表示制御
   ----------------------------------------------------------- */
@media screen and (min-width: 1025px) {
    .bslg-cta-hide-desktop {
        display: none !important;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .bslg-cta-hide-tablet {
        display: none !important;
    }
}

@media screen and (max-width: 767px) {
    .bslg-cta-hide-mobile {
        display: none !important;
    }
}

/* -----------------------------------------------------------
   v1.3.2 開始アニメーション速度調整
   ----------------------------------------------------------- */
.bslg-cta-card.bslg-cta-visible:not(.bslg-cta-entrance-none),
.bslg-cta-card[class*="bslg-cta-entrance-"]:not(.bslg-cta-entrance-none) {
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* 同名 keyframes を後勝ちで上書きし、動きが見える距離に調整 */
@keyframes bslgCtaFadeInDown {
    from { opacity: 0; transform: translateY(-46px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes bslgCtaFadeInLeft {
    from { opacity: 0; transform: translateX(-46px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes bslgCtaFadeInRight {
    from { opacity: 0; transform: translateX(46px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes bslgCtaFadeInUp {
    from { opacity: 0; transform: translateY(46px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes bslgCtaZoomIn {
    from { opacity: 0; transform: scale(0.78); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes bslgCtaZoomOut {
    from { opacity: 0; transform: scale(1.22); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes bslgCtaSlideInLeft {
    from { transform: translateX(-96px); opacity: 0.25; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes bslgCtaSlideInRight {
    from { transform: translateX(96px); opacity: 0.25; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes bslgCtaSlideInUp {
    from { transform: translateY(96px); opacity: 0.25; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes bslgCtaSlideInDown {
    from { transform: translateY(-96px); opacity: 0.25; }
    to { transform: translateY(0); opacity: 1; }
}

/* -----------------------------------------------------------
   開始アニメーション移動量拡大
   ----------------------------------------------------------- */
/*
  Left / Right / Up / Down は 96px では小さく、
  Elementor の「端から来る」感が出ませんでした。
  vw/vh を使って大きく移動させます。
*/
@keyframes bslgCtaFadeInLeft {
    from { opacity: 0; transform: translateX(-45vw); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes bslgCtaFadeInRight {
    from { opacity: 0; transform: translateX(45vw); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes bslgCtaFadeInUp {
    from { opacity: 0; transform: translateY(22vh); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes bslgCtaFadeInDown {
    from { opacity: 0; transform: translateY(-22vh); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes bslgCtaSlideInLeft {
    from { opacity: 0.25; transform: translateX(-70vw); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes bslgCtaSlideInRight {
    from { opacity: 0.25; transform: translateX(70vw); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes bslgCtaSlideInUp {
    from { opacity: 0.25; transform: translateY(45vh); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes bslgCtaSlideInDown {
    from { opacity: 0.25; transform: translateY(-45vh); }
    to { opacity: 1; transform: translateY(0); }
}


/* -----------------------------------------------------------
   v1.3.32 リボン位置の再修正
   -----------------------------------------------------------
   斜めリボンはカード内で完結させる。
   既存保存値 ribbonDistance=42 を標準位置として扱い、カード外の4か所は hidden で隠す。
   ribbonWidth は帯の長さだけに使用する。
*/
.bslg-cta-card {
    overflow: hidden !important;
}

.bslg-cta-ribbon {
    position: absolute !important;
    z-index: 80 !important;
    width: var(--bslg-cta-ribbon-width) !important;
    min-width: var(--bslg-cta-ribbon-width) !important;
    max-width: none !important;
    height: 32px !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--bslg-cta-ribbon-bg) !important;
    color: var(--bslg-cta-ribbon-text) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    pointer-events: none !important;
    transform-origin: center center !important;
}

/*
   42px を標準位置にする。
   既存ブロックで保存済みの 42 が、リボンを中央へ食い込みすぎないようにする。
*/
.bslg-cta-ribbon-top_left,
.bslg-cta-ribbon-left {
    top: calc(16px + ((var(--bslg-cta-ribbon-distance) - 42px) * 0.35)) !important;
    left: calc((var(--bslg-cta-ribbon-width) * -0.32) + ((42px - var(--bslg-cta-ribbon-distance)) * 0.35)) !important;
    right: auto !important;
    bottom: auto !important;
    transform: rotate(-45deg) !important;
}

.bslg-cta-ribbon-top_right,
.bslg-cta-ribbon-right {
    top: calc(16px + ((var(--bslg-cta-ribbon-distance) - 42px) * 0.35)) !important;
    right: calc((var(--bslg-cta-ribbon-width) * -0.32) + ((42px - var(--bslg-cta-ribbon-distance)) * 0.35)) !important;
    left: auto !important;
    bottom: auto !important;
    transform: rotate(45deg) !important;
}

.bslg-cta-ribbon-bottom_left {
    bottom: calc(16px + ((var(--bslg-cta-ribbon-distance) - 42px) * 0.35)) !important;
    left: calc((var(--bslg-cta-ribbon-width) * -0.32) + ((42px - var(--bslg-cta-ribbon-distance)) * 0.35)) !important;
    right: auto !important;
    top: auto !important;
    transform: rotate(45deg) !important;
}

.bslg-cta-ribbon-bottom_right {
    bottom: calc(16px + ((var(--bslg-cta-ribbon-distance) - 42px) * 0.35)) !important;
    right: calc((var(--bslg-cta-ribbon-width) * -0.32) + ((42px - var(--bslg-cta-ribbon-distance)) * 0.35)) !important;
    left: auto !important;
    top: auto !important;
    transform: rotate(-45deg) !important;
}


/* -----------------------------------------------------------
   v1.3.33 リボン自動長さ・位置調整の最終整理
   -----------------------------------------------------------
   ・リボン長さの手入力は使わない。
   ・文字量に合わせて帯の長さを自動化する。
   ・位置調整は top/right/left/bottom に直接効かせる。
   ・カード外にはみ出た部分は hidden で隠す。
*/
.bslg-cta-card {
    overflow: hidden !important;
}

.bslg-cta-ribbon {
    position: absolute !important;
    z-index: 80 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    padding: 8px 42px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--bslg-cta-ribbon-bg) !important;
    color: var(--bslg-cta-ribbon-text) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    pointer-events: none !important;
    transform-origin: center center !important;
}

.bslg-cta-ribbon-top_left,
.bslg-cta-ribbon-left {
    top: calc(var(--bslg-cta-ribbon-distance) * 0.45) !important;
    left: calc(var(--bslg-cta-ribbon-distance) * -1.05) !important;
    right: auto !important;
    bottom: auto !important;
    transform: rotate(-45deg) !important;
}

.bslg-cta-ribbon-top_right,
.bslg-cta-ribbon-right {
    top: calc(var(--bslg-cta-ribbon-distance) * 0.45) !important;
    right: calc(var(--bslg-cta-ribbon-distance) * -1.05) !important;
    left: auto !important;
    bottom: auto !important;
    transform: rotate(45deg) !important;
}

.bslg-cta-ribbon-bottom_left {
    bottom: calc(var(--bslg-cta-ribbon-distance) * 0.45) !important;
    left: calc(var(--bslg-cta-ribbon-distance) * -1.05) !important;
    right: auto !important;
    top: auto !important;
    transform: rotate(45deg) !important;
}

.bslg-cta-ribbon-bottom_right {
    bottom: calc(var(--bslg-cta-ribbon-distance) * 0.45) !important;
    right: calc(var(--bslg-cta-ribbon-distance) * -1.05) !important;
    left: auto !important;
    top: auto !important;
    transform: rotate(-45deg) !important;
}

/* -----------------------------------------------------------
   v1.3.34 リボン位置を固定ロジックへ整理
   ----------------------------------------------------------- */
.bslg-cta-card {
    position: relative !important;
    overflow: hidden !important;
}

.bslg-cta-ribbon {
    position: absolute !important;
    z-index: 50 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 150px !important;
    max-width: none !important;
    min-height: 28px !important;
    height: auto !important;
    padding: 8px 22px !important;
    box-sizing: border-box !important;
    background: var(--bslg-cta-ribbon-bg) !important;
    color: var(--bslg-cta-ribbon-text) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    pointer-events: none !important;
    transform-origin: center center !important;
}

.bslg-cta-ribbon-top_right,
.bslg-cta-ribbon-right {
    top: 22px !important;
    right: -46px !important;
    left: auto !important;
    bottom: auto !important;
    transform: rotate(45deg) !important;
}

.bslg-cta-ribbon-top_left,
.bslg-cta-ribbon-left {
    top: 22px !important;
    left: -46px !important;
    right: auto !important;
    bottom: auto !important;
    transform: rotate(-45deg) !important;
}

.bslg-cta-ribbon-bottom_right {
    bottom: 22px !important;
    right: -46px !important;
    left: auto !important;
    top: auto !important;
    transform: rotate(-45deg) !important;
}

.bslg-cta-ribbon-bottom_left {
    bottom: 22px !important;
    left: -46px !important;
    right: auto !important;
    top: auto !important;
    transform: rotate(45deg) !important;
}


/* -----------------------------------------------------------
   v1.3.35 リボン位置を安定化
   -----------------------------------------------------------
   ・ユーザー操作は「リボン位置」だけ。
   ・リボン幅/距離の保存値は使わず、左上/右上/左下/右下を固定配置する。
   ・カード外にはみ出した4か所は非表示。
   ・リボン文字が長い場合は自動で帯が伸びる。
*/
.bslg-cta-card {
    position: relative !important;
    overflow: hidden !important;
}

.bslg-cta-ribbon {
    position: absolute !important;
    z-index: 80 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: max-content !important;
    min-width: 190px !important;
    max-width: none !important;
    min-height: 30px !important;
    height: auto !important;
    padding: 7px 34px !important;
    box-sizing: border-box !important;
    background: var(--bslg-cta-ribbon-bg) !important;
    color: var(--bslg-cta-ribbon-text) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    pointer-events: none !important;
    transform-origin: center center !important;
}

.bslg-cta-ribbon-top_left,
.bslg-cta-ribbon-left {
    top: 28px !important;
    left: -50px !important;
    right: auto !important;
    bottom: auto !important;
    transform: rotate(-45deg) !important;
}

.bslg-cta-ribbon-top_right,
.bslg-cta-ribbon-right {
    top: 28px !important;
    right: -50px !important;
    left: auto !important;
    bottom: auto !important;
    transform: rotate(45deg) !important;
}

.bslg-cta-ribbon-bottom_left {
    bottom: 28px !important;
    left: -50px !important;
    right: auto !important;
    top: auto !important;
    transform: rotate(45deg) !important;
}

.bslg-cta-ribbon-bottom_right {
    bottom: 28px !important;
    right: -50px !important;
    left: auto !important;
    top: auto !important;
    transform: rotate(-45deg) !important;
}


/* -----------------------------------------------------------
   v1.3.37 リボン位置の最終整理
   - 端からの距離はユーザー設定で反映
   - 帯の長さは文字量に合わせて自動
   - カード外にはみ出た部分は非表示
   ----------------------------------------------------------- */
.bslg-cta-card {
    overflow: hidden !important;
}

.bslg-cta-ribbon {
    position: absolute !important;
    z-index: 50 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    padding: 8px 34px !important;
    box-sizing: border-box !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    pointer-events: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform-origin: center center !important;
}

.bslg-cta-ribbon-top_left,
.bslg-cta-ribbon-left {
    top: var(--bslg-cta-ribbon-distance) !important;
    left: calc(var(--bslg-cta-ribbon-distance) * -1) !important;
    right: auto !important;
    bottom: auto !important;
    transform: rotate(-45deg) !important;
}

.bslg-cta-ribbon-top_right,
.bslg-cta-ribbon-right {
    top: var(--bslg-cta-ribbon-distance) !important;
    right: calc(var(--bslg-cta-ribbon-distance) * -1) !important;
    left: auto !important;
    bottom: auto !important;
    transform: rotate(45deg) !important;
}

.bslg-cta-ribbon-bottom_left {
    bottom: var(--bslg-cta-ribbon-distance) !important;
    left: calc(var(--bslg-cta-ribbon-distance) * -1) !important;
    right: auto !important;
    top: auto !important;
    transform: rotate(45deg) !important;
}

.bslg-cta-ribbon-bottom_right {
    bottom: var(--bslg-cta-ribbon-distance) !important;
    right: calc(var(--bslg-cta-ribbon-distance) * -1) !important;
    left: auto !important;
    top: auto !important;
    transform: rotate(-45deg) !important;
}


/* -----------------------------------------------------------
   v1.3.37 リボン端切れ修正
   - 端からの距離は「角へ掛ける位置」だけに使う
   - top/bottom は距離の40%、left/right は距離のマイナスで角へ逃がす
   - 帯は文字量に合わせて自動、ただし短すぎて文字が端で切れないよう最小長を確保
   - カード外にはみ出た部分だけを非表示
   ----------------------------------------------------------- */
.bslg-cta-card {
    position: relative !important;
    overflow: hidden !important;
}

.bslg-cta-ribbon {
    position: absolute !important;
    z-index: 90 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: max-content !important;
    min-width: 220px !important;
    max-width: none !important;
    min-height: 30px !important;
    height: auto !important;
    padding: 7px 46px !important;
    box-sizing: border-box !important;
    background: var(--bslg-cta-ribbon-bg) !important;
    color: var(--bslg-cta-ribbon-text) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    pointer-events: none !important;
    transform-origin: center center !important;
}

.bslg-cta-ribbon-top_right,
.bslg-cta-ribbon-right {
    top: calc(var(--bslg-cta-ribbon-distance) * 0.4) !important;
    right: calc(var(--bslg-cta-ribbon-distance) * -1) !important;
    left: auto !important;
    bottom: auto !important;
    transform: rotate(45deg) !important;
}

.bslg-cta-ribbon-top_left,
.bslg-cta-ribbon-left {
    top: calc(var(--bslg-cta-ribbon-distance) * 0.4) !important;
    left: calc(var(--bslg-cta-ribbon-distance) * -1) !important;
    right: auto !important;
    bottom: auto !important;
    transform: rotate(-45deg) !important;
}

.bslg-cta-ribbon-bottom_right {
    bottom: calc(var(--bslg-cta-ribbon-distance) * 0.4) !important;
    right: calc(var(--bslg-cta-ribbon-distance) * -1) !important;
    left: auto !important;
    top: auto !important;
    transform: rotate(-45deg) !important;
}

.bslg-cta-ribbon-bottom_left {
    bottom: calc(var(--bslg-cta-ribbon-distance) * 0.4) !important;
    left: calc(var(--bslg-cta-ribbon-distance) * -1) !important;
    right: auto !important;
    top: auto !important;
    transform: rotate(45deg) !important;
}


/* -----------------------------------------------------------
   v1.3.38 リボン最終修正
   - カード外にはみ出た部分は非表示
   - リボン本体は角のクリップ枠内に置く
   - 文字は常に帯の中央に配置し、開始位置をずらさない
   - リボン長さは文字量から自動計算した --bslg-cta-ribbon-auto-width を使う
   ----------------------------------------------------------- */
.bslg-cta-card {
    position: relative !important;
    overflow: hidden !important;
}

.bslg-cta-ribbon-wrap {
    position: absolute !important;
    z-index: 120 !important;
    width: 132px !important;
    height: 132px !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

.bslg-cta-ribbon-wrap-top_right,
.bslg-cta-ribbon-wrap-right {
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
}

.bslg-cta-ribbon-wrap-top_left,
.bslg-cta-ribbon-wrap-left {
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
}

.bslg-cta-ribbon-wrap-bottom_right {
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    top: auto !important;
}

.bslg-cta-ribbon-wrap-bottom_left {
    left: 0 !important;
    bottom: 0 !important;
    right: auto !important;
    top: auto !important;
}

.bslg-cta-ribbon-wrap .bslg-cta-ribbon {
    position: absolute !important;
    z-index: 121 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: var(--bslg-cta-ribbon-auto-width) !important;
    min-width: var(--bslg-cta-ribbon-auto-width) !important;
    max-width: none !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    background: var(--bslg-cta-ribbon-bg) !important;
    color: var(--bslg-cta-ribbon-text) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    pointer-events: none !important;
    transform-origin: center center !important;
}

.bslg-cta-ribbon-wrap .bslg-cta-ribbon-text {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.bslg-cta-ribbon-wrap-top_right .bslg-cta-ribbon,
.bslg-cta-ribbon-wrap-right .bslg-cta-ribbon {
    top: calc(var(--bslg-cta-ribbon-distance) * 0.38) !important;
    right: calc(var(--bslg-cta-ribbon-auto-width) * -0.34) !important;
    left: auto !important;
    bottom: auto !important;
    transform: rotate(45deg) !important;
}

.bslg-cta-ribbon-wrap-top_left .bslg-cta-ribbon,
.bslg-cta-ribbon-wrap-left .bslg-cta-ribbon {
    top: calc(var(--bslg-cta-ribbon-distance) * 0.38) !important;
    left: calc(var(--bslg-cta-ribbon-auto-width) * -0.34) !important;
    right: auto !important;
    bottom: auto !important;
    transform: rotate(-45deg) !important;
}

.bslg-cta-ribbon-wrap-bottom_right .bslg-cta-ribbon {
    bottom: calc(var(--bslg-cta-ribbon-distance) * 0.38) !important;
    right: calc(var(--bslg-cta-ribbon-auto-width) * -0.34) !important;
    left: auto !important;
    top: auto !important;
    transform: rotate(-45deg) !important;
}

.bslg-cta-ribbon-wrap-bottom_left .bslg-cta-ribbon {
    bottom: calc(var(--bslg-cta-ribbon-distance) * 0.38) !important;
    left: calc(var(--bslg-cta-ribbon-auto-width) * -0.34) !important;
    right: auto !important;
    top: auto !important;
    transform: rotate(45deg) !important;
}


/* -----------------------------------------------------------
   v1.3.39 リボン最終補正
   -----------------------------------------------------------
   ・リボンはカード角のクリップ枠の中だけで表示する。
   ・文字は帯中央固定。位置調整で文字開始位置を動かさない。
   ・帯の長さは文字量から自動計算した --bslg-cta-ribbon-auto-width を使う。
   ・カード外にはみ出る部分は非表示。
*/
.bslg-cta-card {
    position: relative !important;
    overflow: hidden !important;
}

.bslg-cta-ribbon-wrap {
    position: absolute !important;
    z-index: 90 !important;
    width: calc(var(--bslg-cta-ribbon-auto-width) * 0.72) !important;
    height: calc(var(--bslg-cta-ribbon-auto-width) * 0.72) !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

.bslg-cta-ribbon-wrap-top_right,
.bslg-cta-ribbon-wrap-right {
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
}

.bslg-cta-ribbon-wrap-top_left,
.bslg-cta-ribbon-wrap-left {
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
}

.bslg-cta-ribbon-wrap-bottom_right {
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    top: auto !important;
}

.bslg-cta-ribbon-wrap-bottom_left {
    left: 0 !important;
    bottom: 0 !important;
    right: auto !important;
    top: auto !important;
}

.bslg-cta-ribbon {
    position: absolute !important;
    z-index: 91 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: var(--bslg-cta-ribbon-auto-width) !important;
    min-width: var(--bslg-cta-ribbon-auto-width) !important;
    max-width: none !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 22px !important;
    box-sizing: border-box !important;
    background: var(--bslg-cta-ribbon-bg) !important;
    color: var(--bslg-cta-ribbon-text) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    text-align: center !important;
    overflow: visible !important;
    text-overflow: clip !important;
    transform-origin: center center !important;
}

.bslg-cta-ribbon-text {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    font: inherit !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: visible !important;
}

.bslg-cta-ribbon-wrap-top_right .bslg-cta-ribbon,
.bslg-cta-ribbon-wrap-right .bslg-cta-ribbon {
    top: calc(var(--bslg-cta-ribbon-auto-width) * 0.18) !important;
    right: calc(var(--bslg-cta-ribbon-auto-width) * -0.31) !important;
    left: auto !important;
    bottom: auto !important;
    transform: rotate(45deg) !important;
}

.bslg-cta-ribbon-wrap-top_left .bslg-cta-ribbon,
.bslg-cta-ribbon-wrap-left .bslg-cta-ribbon {
    top: calc(var(--bslg-cta-ribbon-auto-width) * 0.18) !important;
    left: calc(var(--bslg-cta-ribbon-auto-width) * -0.31) !important;
    right: auto !important;
    bottom: auto !important;
    transform: rotate(-45deg) !important;
}

.bslg-cta-ribbon-wrap-bottom_right .bslg-cta-ribbon {
    bottom: calc(var(--bslg-cta-ribbon-auto-width) * 0.18) !important;
    right: calc(var(--bslg-cta-ribbon-auto-width) * -0.31) !important;
    left: auto !important;
    top: auto !important;
    transform: rotate(-45deg) !important;
}

.bslg-cta-ribbon-wrap-bottom_left .bslg-cta-ribbon {
    bottom: calc(var(--bslg-cta-ribbon-auto-width) * 0.18) !important;
    left: calc(var(--bslg-cta-ribbon-auto-width) * -0.31) !important;
    right: auto !important;
    top: auto !important;
    transform: rotate(45deg) !important;
}


/* -----------------------------------------------------------
   v1.3.40 リボンを角ラベル方式へ変更
   -----------------------------------------------------------
   斜めリボンは文字位置・端切れが不安定になるため廃止。
   画像サンプルのような四角い角ラベルとして表示する。
   ・カード外へはみ出さない
   ・文字は中央配置
   ・端からの距離だけ反映
   ・過去版の rotate / ribbonWidth / autoWidth 計算を完全に上書き
*/
.bslg-cta-card {
    position: relative !important;
    overflow: hidden !important;
}

.bslg-cta-ribbon-wrap {
    position: absolute !important;
    z-index: 120 !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    pointer-events: none !important;
}

.bslg-cta-ribbon-wrap-top_left,
.bslg-cta-ribbon-wrap-left {
    top: min(max(var(--bslg-cta-ribbon-distance), 8px), 48px) !important;
    left: min(max(var(--bslg-cta-ribbon-distance), 8px), 48px) !important;
    right: auto !important;
    bottom: auto !important;
}

.bslg-cta-ribbon-wrap-top_right,
.bslg-cta-ribbon-wrap-right {
    top: min(max(var(--bslg-cta-ribbon-distance), 8px), 48px) !important;
    right: min(max(var(--bslg-cta-ribbon-distance), 8px), 48px) !important;
    left: auto !important;
    bottom: auto !important;
}

.bslg-cta-ribbon-wrap-bottom_left {
    bottom: min(max(var(--bslg-cta-ribbon-distance), 8px), 48px) !important;
    left: min(max(var(--bslg-cta-ribbon-distance), 8px), 48px) !important;
    right: auto !important;
    top: auto !important;
}

.bslg-cta-ribbon-wrap-bottom_right {
    bottom: min(max(var(--bslg-cta-ribbon-distance), 8px), 48px) !important;
    right: min(max(var(--bslg-cta-ribbon-distance), 8px), 48px) !important;
    left: auto !important;
    top: auto !important;
}

.bslg-cta-ribbon,
.bslg-cta-ribbon-wrap .bslg-cta-ribbon {
    position: static !important;
    z-index: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 16px) !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 10px 14px !important;
    box-sizing: border-box !important;
    background: var(--bslg-cta-ribbon-bg) !important;
    color: var(--bslg-cta-ribbon-text) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    pointer-events: none !important;
    transform: none !important;
    transform-origin: center center !important;
    border-radius: 0 !important;
}

.bslg-cta-ribbon-text,
.bslg-cta-ribbon-wrap .bslg-cta-ribbon-text {
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    font: inherit !important;
    line-height: 1.2 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}


/* -----------------------------------------------------------
   v1.3.41 角ラベルをボックスとして制御
   -----------------------------------------------------------
   斜めリボン計算は使わない。
   角ラベルは「幅・高さ・端からの距離・横位置・縦位置」で制御する。
*/
.bslg-cta-card {
    position: relative !important;
    overflow: hidden !important;
}

.bslg-cta-ribbon-wrap,
.bslg-cta-ribbon-wrap-top_left,
.bslg-cta-ribbon-wrap-left,
.bslg-cta-ribbon-wrap-top_right,
.bslg-cta-ribbon-wrap-right,
.bslg-cta-ribbon-wrap-bottom_left,
.bslg-cta-ribbon-wrap-bottom_right {
    position: absolute !important;
    z-index: 120 !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    pointer-events: none !important;
}

.bslg-cta-ribbon-wrap-top_left,
.bslg-cta-ribbon-wrap-left {
    top: calc(var(--bslg-cta-ribbon-distance) + var(--bslg-cta-ribbon-offset-y)) !important;
    left: calc(var(--bslg-cta-ribbon-distance) + var(--bslg-cta-ribbon-offset-x)) !important;
    right: auto !important;
    bottom: auto !important;
}

.bslg-cta-ribbon-wrap-top_right,
.bslg-cta-ribbon-wrap-right {
    top: calc(var(--bslg-cta-ribbon-distance) + var(--bslg-cta-ribbon-offset-y)) !important;
    right: calc(var(--bslg-cta-ribbon-distance) - var(--bslg-cta-ribbon-offset-x)) !important;
    left: auto !important;
    bottom: auto !important;
}

.bslg-cta-ribbon-wrap-bottom_left {
    bottom: calc(var(--bslg-cta-ribbon-distance) - var(--bslg-cta-ribbon-offset-y)) !important;
    left: calc(var(--bslg-cta-ribbon-distance) + var(--bslg-cta-ribbon-offset-x)) !important;
    right: auto !important;
    top: auto !important;
}

.bslg-cta-ribbon-wrap-bottom_right {
    bottom: calc(var(--bslg-cta-ribbon-distance) - var(--bslg-cta-ribbon-offset-y)) !important;
    right: calc(var(--bslg-cta-ribbon-distance) - var(--bslg-cta-ribbon-offset-x)) !important;
    left: auto !important;
    top: auto !important;
}

.bslg-cta-ribbon,
.bslg-cta-ribbon-wrap .bslg-cta-ribbon {
    position: static !important;
    z-index: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: var(--bslg-cta-ribbon-label-width) !important;
    min-width: 0 !important;
    max-width: none !important;
    height: var(--bslg-cta-ribbon-label-height) !important;
    min-height: 0 !important;
    padding: 10px 14px !important;
    box-sizing: border-box !important;
    background: var(--bslg-cta-ribbon-bg) !important;
    color: var(--bslg-cta-ribbon-text) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    pointer-events: none !important;
    transform: none !important;
    transform-origin: center center !important;
    border-radius: 0 !important;
}

.bslg-cta-ribbon-text,
.bslg-cta-ribbon-wrap .bslg-cta-ribbon-text {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    font: inherit !important;
    line-height: 1.2 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}


/* -----------------------------------------------------------
   v1.3.42 角ラベル最終補正
   -----------------------------------------------------------
   位置は view.php の inline style を最優先にする。
   過去の斜めリボンCSS・固定位置CSSをここで無効化する。
*/
.bslg-cta-card {
    position: relative !important;
    overflow: hidden !important;
}

.bslg-cta-card .bslg-cta-ribbon-wrap {
    position: absolute !important;
    z-index: 120 !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    pointer-events: none !important;
    transform: none !important;
}

.bslg-cta-card .bslg-cta-ribbon-wrap .bslg-cta-ribbon {
    position: static !important;
    z-index: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    pointer-events: none !important;
    transform: none !important;
    border-radius: 0 !important;
}

.bslg-cta-card .bslg-cta-ribbon-wrap .bslg-cta-ribbon-text {
    display: block !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    font: inherit !important;
    line-height: 1.2 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}


/* -----------------------------------------------------------
   v1.3.43 角ラベル最終整理
   位置=左上/右上/左下/右下、距離=選択した角からの余白。
   横位置調整・縦位置調整は廃止。
   ----------------------------------------------------------- */
.bslg-cta-card {
    position: relative !important;
    overflow: hidden !important;
}
.bslg-cta-ribbon-wrap {
    position: absolute !important;
    z-index: 120 !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    pointer-events: none !important;
}
.bslg-cta-ribbon-wrap-top_left,
.bslg-cta-ribbon-wrap-left {
    top: var(--bslg-cta-ribbon-distance) !important;
    left: var(--bslg-cta-ribbon-distance) !important;
    right: auto !important;
    bottom: auto !important;
}
.bslg-cta-ribbon-wrap-top_right,
.bslg-cta-ribbon-wrap-right {
    top: var(--bslg-cta-ribbon-distance) !important;
    right: var(--bslg-cta-ribbon-distance) !important;
    left: auto !important;
    bottom: auto !important;
}
.bslg-cta-ribbon-wrap-bottom_left {
    bottom: var(--bslg-cta-ribbon-distance) !important;
    left: var(--bslg-cta-ribbon-distance) !important;
    right: auto !important;
    top: auto !important;
}
.bslg-cta-ribbon-wrap-bottom_right {
    bottom: var(--bslg-cta-ribbon-distance) !important;
    right: var(--bslg-cta-ribbon-distance) !important;
    left: auto !important;
    top: auto !important;
}
.bslg-cta-ribbon-wrap .bslg-cta-ribbon {
    position: static !important;
    transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: var(--bslg-cta-ribbon-label-width) !important;
    height: var(--bslg-cta-ribbon-label-height) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 10px 14px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: center !important;
}