:root {
    --clip-popup-border-radius:60px;
    --clip-popup-top: -110px;
    --clip-popup-width: 410px;
    --clip-popup-height: 80px;
    --clip-popup-triangle-pos: 50%;
    --ckip-popup-triangle-height: 15px;
}
.clipTutorialPopupBG {
    position: absolute;
    display: block;
    top: var(--clip-popup-top);
    left: -80px;
    width: var(--clip-popup-width);
    height: var(--clip-popup-height);
    background: linear-gradient(-84deg, #f06829 29%, #dc1f67 100%);
    border-radius: var(--clip-popup-border-radius);
    -webkit-border-radius: var(--clip-popup-border-radius);
    -moz-border-radius: var(--clip-popup-border-radius);
    filter: drop-shadow(0px 0px 4px #A3A3A3);
    z-index: 10;
    opacity: 0;
}
/* KARTEによりクラス操作しポプアップの表示を制御 */
.isShow {
    transition: 0.3s;
    opacity: 1;
}
.isHide {
    transition: 0.3s;
    opacity: 0;
}
.clipTutorialPopupBG:before {
    content: "";
    position: absolute;
    top: 100%;
    left: var(--clip-popup-triangle-pos);
    margin-left: calc(var(--ckip-popup-triangle-height) - var(--ckip-popup-triangle-height) - var(--ckip-popup-triangle-height));
    border: var(--ckip-popup-triangle-height) solid transparent;
    border-top: var(--ckip-popup-triangle-height) solid #ef503b;
}
.clipTutorialPopup {
    position: absolute;
    display: block;
    top: 2.7px;
    left: 3px;
    width: calc(var(--clip-popup-width) - 6px);
    height: calc(var(--clip-popup-height) - 6px);
    background: #fff;
    border-radius: var(--clip-popup-border-radius);
    -webkit-border-radius: var(--clip-popup-border-radius);
    -moz-border-radius: var(--clip-popup-border-radius);
}
.clipTutorialPopup:before {
    content: "";
    position: absolute;
    display: block;
    top: 100%;
    left: calc(var(--clip-popup-triangle-pos) - 0%);
    margin-left: calc(var(--ckip-popup-triangle-height) - var(--ckip-popup-triangle-height) - var(--ckip-popup-triangle-height));
    border: var(--ckip-popup-triangle-height) solid transparent;
    border-top: var(--ckip-popup-triangle-height) solid #fff;
}
.clipTutorialPopup .title {
    text-align: center;
    color: #de0202;
    font-weight: 600;
    font-size: 20px;
    margin: 7px 0 2px 0;
    padding: 0;
}
.clipTutorialPopup p {
    text-align: center;
    font-weight: 400;
    font-size: 16px;
}

@media only screen and (max-width:979px) {
    :root {
        --clip-popup-top: -85px;
        --clip-popup-width: 90vw;
        --clip-popup-height: 65px;
        --ckip-popup-triangle-height: 8px;
        --clip-popup-triangle-top: -16px;
    }
    .clipTutorialPopupBG {
        top: 130%;
        left: 50%;
        margin-left: auto;
        margin-right: auto;
        transform: translate(-50%, 0)
    }
    .clipTutorialPopupBG:before {
        top: var(--clip-popup-triangle-top);
        margin-right: calc(
          var(--ckip-popup-triangle-height) - var(--ckip-popup-triangle-height) -
            var(--ckip-popup-triangle-height)
        );
        border: var(--ckip-popup-triangle-height) solid transparent;
        border-bottom: var(--ckip-popup-triangle-height) solid #ef503b;
    }
    .clipTutorialPopup .title {
        font-size: 15px;
    }
    .clipTutorialPopup p {
        font-size: 12px;
    }
    .clipTutorialPopup:before {
        top: var(--clip-popup-triangle-top);
        margin-left: calc(
          var(--ckip-popup-triangle-height) - var(--ckip-popup-triangle-height) -
            var(--ckip-popup-triangle-height)
        );
        border: var(--ckip-popup-triangle-height) solid transparent;
        border-bottom: var(--ckip-popup-triangle-height) solid #fff;
    }
}