/* maskteiki__promo-lp */
.maskteiki__promo-lp {
    background: #fff7f6;
    text-align: center;
    overflow: hidden;
    font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
    font-weight: bold;
    /* float ↓ */
    position: relative;
}

.maskteiki__promo-lp .promo-area {
    box-shadow: 0 0 40px rgb(149 89 118 / 50%);
    margin: auto;
    max-width: 700px;
    position: relative;
}

/* btn - float */
#floatArea{
    display: none;
}

#floatBtn01 {
    /* display: none; */
    text-align: center;
    position: fixed;
    bottom: 150px;
    left: 0;
    right: 0;
    z-index: 10;
}

#floatBtn01.move {
    animation-name: contraction;
    animation-iteration-count: infinite;
    animation-duration: 3000ms;
}

@keyframes contraction {
    0% {
        transform: scale(1, 1);
    }

    5% {
        transform: scale(0.98, 0.95);
    }

    10% {
        transform: scale(1, 1);
    }

    15% {
        transform: scale(0.98, 0.95);
    }

    20% {
        transform: scale(1, 1);
    }

    25% {
        transform: scale(0.98, 0.95);
    }

    30% {
        transform: scale(1, 1);
    }
}

#floatBtn01 a {
    display: inline-block;
    pointer-events: auto;
    background: linear-gradient(125deg, #7ee184 0%, #1ed26f 40%, #0fbd98 100%);
    color: #fff;
    border: 5px solid #24b864;
    text-shadow: 2px 2px 7px #42b163, -2px -2px 7px #42b163, -2px 2px 0 #42b163, 2px -2px 7px #42b163, 0px 2px 7px #42b163, 0 -2px 7px #42b163, -2px 0 7px #42b163, 2px 0 7px #42b163;
    padding: 2rem 3rem;
    width: 550px;
    border-radius: 60px;
    font-size: clamp(24px, 4.75vw, 44px);
    letter-spacing: 4px;
    position: relative;
    overflow: hidden;
}

#floatBtn01.move a::before {
    content: "";
    position: absolute;
    display: block;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.45) 85%, rgba(255, 255, 255, 0.1) 94%, rgba(255, 255, 255, 0.35) 98%, rgba(255, 255, 255, 0) 100%);
    width: 50px;
    height: 50px;
    top: -60px;
    left: -60px;
    animation-name: shine-run;
    animation-delay: 0;
    animation-duration: 3000ms;
    animation-timing-function: ease-in;
    animation-iteration-count: infinite;
}

@keyframes shine-run {

    0% {
        transform: scale(1) rotate(50deg);
        opacity: 1;
    }

    40% {
        transform: scale(50) rotate(50deg);
        opacity: 0;
    }

    100% {
        transform: scale(50) rotate(50deg);
        opacity: 0;
    }

}

a#other-mask {
    color: #b8419a !important;
    position: absolute;
    bottom: 200px;
    right: 34%;
    text-decoration: underline !important;
    letter-spacing: 2px;
}

a#other-mask.hide {
    display: none;
}

a#other-mask p {
    font-size: clamp(20px, 1.65vw, 30px);
}

img.hide {
    display: none;
}

@media screen and (max-width:767px) {

    #floatBtn01 a {
        width: 80%;
        padding: 1.25rem;
        border: 3px solid #24b864;
        letter-spacing: 3px;
        font-weight: 600;
    }

    a#other-mask {
        bottom: 80px;
        right: 28%;
    }

}

/* btn - float02 */
#floatBtn02 .col-3,
#floatBtn02 .col-4,
#floatBtn02 .col-5 {
    margin: auto;
}

#floatBtn02 {
    display: none;
    text-align: center;
    position: fixed;
    bottom: 150px;
    left: 0;
    right: 0;
    z-index: 10;
    background: #fff;
    /* box-shadow: 0 -5px 5px; */
    margin: auto;
    max-width: 700px;
}

#floatBtn02 a {
    background: #c9338e;
    display: block;
    text-align: center;
    max-width: 95%;
    text-decoration: none;
    font-family: 'Noto Sans JP', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    letter-spacing: 2px;
    font-size: clamp(14px, 2.35vw, 22px);
    border-radius: 3px;
}

#floatBtn02 a p {
    margin-bottom: 0;
    padding: 25px;
}

@media screen and (max-width:767px) {

    #floatBtn02 a p {
        padding: 5px;
    }

}