.cta-bnr-cmn {
    width:auto !important;
    -webkit-transition:0.2s cubic-bezier(0.63, 0.6, 0.82, 0.98);
    transition:0.2s cubic-bezier(0.63, 0.6, 0.82, 0.98);
    pointer-events:none;
    opacity:0;
}
.cta-normal,
.cta-normal.active,
.cta-bnr-cmn.active{
opacity:1;
pointer-events:auto
}
.cta-bnr-cmn-close{
cursor:pointer;
position:absolute;
/*top: 0px;
right: 0px;*/
z-index:9999;
opacity: 0;
visibility: hidden;
}
.cta-bnr-cmn-close::before{
    content:'';
    width:22px;
    height:22px;
    /*-webkit-box-shadow:0 0 8px rgba(0,0,0,0.1);
    box-shadow:0 0 8px rgba(0,0,0,0.1);*/
    background:#3B846A;
    display:block;
    background-size:8px auto;
    background-position:center center;
    background-repeat:no-repeat;
    position: absolute;
    top: 0px;
    right: 0px;
    border-radius:50%;
}
.cta-bnr-cmn-close::after{
    content:'';
    width:22px;
    height:22px;
    /*border-radius:50%;
    background:#FFF;*/
    display:block;
    color:#fff;
    /*background-image:url("data:image/svg+xml; charset=utf8,%3Csvg%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%20data-prefix%3D%22fas%22%20data-icon%3D%22times%22%20class%3D%22svg-inline--fa%20fa-times%20fa-w-11%22%20role%3D%22img%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20352%20512%22%3E%3Cpath%20fill%3D%22%23222%22%20d%3D%22M242.72%20256l100.07-100.07c12.28-12.28%2012.28-32.19%200-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48%200L176%20189.28%2075.93%2089.21c-12.28-12.28-32.19-12.28-44.48%200L9.21%20111.45c-12.28%2012.28-12.28%2032.19%200%2044.48L109.28%20256%209.21%20356.07c-12.28%2012.28-12.28%2032.19%200%2044.48l22.24%2022.24c12.28%2012.28%2032.2%2012.28%2044.48%200L176%20322.72l100.07%20100.07c12.28%2012.28%2032.2%2012.28%2044.48%200l22.24-22.24c12.28-12.28%2012.28-32.19%200-44.48L242.72%20256z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");*/
    background-image: url("data:image/svg+xml;utf8,<svg enable-background='new 0 0 16 16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='m4.6 4.6c.2-.2.5-.2.7 0l2.7 2.7 2.6-2.6c.2-.2.5-.2.7 0s.2.5 0 .7l-2.6 2.6 2.6 2.6c.2.2.2.5 0 .7s-.5.2-.7 0l-2.6-2.6-2.6 2.6c-.2.2-.5.2-.7 0s-.2-.5 0-.7l2.6-2.6-2.7-2.6c-.1-.2-.1-.6 0-.8z' fill='%23fff'/></svg>");
    background-size:20px auto;
    background-position:center center;
    background-repeat:no-repeat;
    position: absolute;
    top: 0px;
    right: 0px;
}

@media screen and (min-width: 576px) {
    .cta-popup.cta-right .cta-bnr-cmn-close {
        top: 8px;
        right: 36px;
    }
    .cta-popup.cta-left .cta-bnr-cmn-close {
        top: 8px;
        left: auto;
        right: 36px;
    }
}
@media screen and (max-width: 575.98px) {
    .cta-popup.cta-right .cta-bnr-cmn-close {
        top: 4px;
        right: 30px;
    }
    .cta-popup.cta-left .cta-bnr-cmn-close {
        top: 4px;
        left: auto;
        right: 30px;
    }
}
.cta-popup.cta-right .cta-bnr-cmn-close::before{
    top: 0px;
    left: -1px;
    right: auto;
}
.cta-popup.cta-right .cta-bnr-cmn-close::after{
    top: 0px;
    left: -1px;
    right: auto;
}
.cta-popup.cta-left .cta-bnr-cmn-close::before{
    top: 0px;
    left: -1px;
    right: auto;
}
.cta-popup.cta-left .cta-bnr-cmn-close::after{
    top: 0px;
    left: -1px;
    right: auto;
}

/* デフォルトではクローズボタンは透明で非表示 */
.cta-bnr-cmn-close.fade-in {
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 0.5s, visibility 0.5s;
    transition: opacity 0.5s, visibility 0.5s; /* 透明度と可視性のトランジション */
}

/* visibleクラスが追加されたら、クローズボタンを可視化 */
.cta-bnr-cmn-close.fade-in.visible {
    opacity: 1;
    visibility: visible;
}


.cta-popup{

    padding: 10px;

    /*
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,.15);
        box-shadow: 0px 0px 10px 0px rgba(0,0,0,.15);
        */
margin-bottom:0 !important;
-webkit-transform:translateY(40px);
        transform:translateY(40px);
position:fixed;
bottom:0;
z-index:217483647
}

.cta-popup a img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
vertical-align:bottom
}

.cta-popup a {
margin-bottom: 0;
padding-bottom: 0;
vertical-align: bottom;
display: inline-block;
/*-webkit-transition: all 0.08s;
        transition: all 0.08s;*/
}
.cta-popup .cta-desktop a {
    position: relative;
}
.cta-popup .cta-desktop a img:first-child,
.cta-popup .cta-desktop a img:nth-child(2) {
display: block;
/*-webkit-transition: opacity 0.08s ease-in-out;
transition: opacity 0.08s ease-in-out;*/
}
.cta-popup .cta-desktop a img:nth-child(3),
.cta-popup .cta-desktop a img:last-child {
position: absolute;
top: 0;
left: 0;
opacity: 0;
/*-webkit-transition: opacity 0.08s ease-in-out;
transition: opacity 0.08s ease-in-out;*/
}
.cta-popup .cta-desktop a:hover img:first-child,
.cta-popup .cta-desktop a:hover img:nth-child(2) {
opacity: 0;
}
.cta-popup .cta-desktop a:hover img:nth-child(3),
.cta-popup .cta-desktop a:hover img:last-child {
opacity: 1;
}

@media screen and (max-width: 349.98px) {
    .cta-popup a img{
        max-width:100% !important;
        max-height:100% !important;
        height: auto !important;
        width: auto !important;
    }
}

.cta-popup.active{
opacity:1;
-webkit-transform:translateY(0);
        transform:translateY(0);
pointer-events:auto
}
.cta-popup.cta-right{
right:0
}
.cta-popup.cta-left{
left:0
}
.cta-modal{
max-width:100% !important;
margin-bottom:0 !important;
position:fixed;
z-index:2147483647;
top:0;
right:0;
bottom:0;
left:0
}
.cta-modal-shadow{
background:rgba(0,0,0,0.4);
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
z-index:1
}
.cta-modal .cta-bnr-cmn-item{
-webkit-transform:translate(-50%, -50%);
        transform:translate(-50%, -50%);
position:absolute;
top:50%;
left:50%;
z-index:2
}
.cta-modal .cta-bnr-cmn-item img{
vertical-align:bottom;
max-width:100%;
max-height:100%;
height: auto;
width: auto;
}


@media screen and (max-width: 575.98px) {
    .cta-desktop {
        display: none;
    }
    .cta-mobile {
        display: block;
    }
}

@media screen and (min-width: 576px) {
    .cta-desktop {
        display: block;
    }
    .cta-mobile {
        display: none;
    }
}

/* EOF */