/* ### mixin.scss ### */
/* echoesLink animation */
@-webkit-keyframes animation {
    0% {
        width: 0;
    }

    100% {
        width: 30%;
    }
}

@keyframes animation {
    0% {
        width: 0;
    }

    100% {
        width: 30%;
    }
}

@-webkit-keyframes circle {
    0%, 100% {
        box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
    }

    12.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
    }

    25% {
        box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }

    37.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }

    50% {
        box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }

    62.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }

    75% {
        box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }

    87.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
    }
}

@keyframes circle {
    0%, 100% {
        box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
    }

    12.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
    }

    25% {
        box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }

    37.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }

    50% {
        box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }

    62.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }

    75% {
        box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
    }

    87.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
    }
}

/* echoesLink */
.echoesLink {
    font-family: "Hiragino Kaku Gothic ProN", "Helvetica Neue", Arial, "Hiragino Sans", Meiryo, sans-serif;
    text-align: center;
    position: fixed;
    transition: all .3s linear;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
}

.echoesLink * {
    margin: 0;
    padding: 0;
    font-size: 0;
    box-sizing: border-box;
}

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

.echoesLink.active {
    opacity: 1;
    visibility: visible;
}

.echoesLink.none {
    display: none;
}

.echoesLinkCont {
    opacity: 0;
    visibility: hidden;
    width: calc(680 / 750 * 100vw);
    position: fixed;
    top: 54%;
    left: 50%;
    z-index: 10000;
    transform: translate(-50%, -50%);
    transition: all .3s .5s ease;
}

.echoesLinkCont.active {
    opacity: 1;
    visibility: visible;
}

.echoesLinkLoading {
    opacity: 0;
    visibility: hidden;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 10000;
    transform: translate(-50%, -50%);
    transition: all .3s ease;
}

.echoesLinkLoadingItem {
    margin: calc(200 / 750 * 100vw) auto;
    font-size: calc(50 / 750 * 100vw);
    width: 1em;
    height: 1em;
    border-radius: 50%;
    position: relative;
    text-indent: -9999em;
    -webkit-animation: circle 1.3s infinite ease;
    animation: circle 1.3s infinite ease;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}

.echoesLinkLoadingTxt {
    margin-bottom: calc(65 / 750 * 100vw);
    font-size: calc(40 / 750 * 100vw);
    font-weight: 600;
    color: #fff;
    line-height: 1;
    display: inline-block;
    white-space: nowrap;
}

.echoesLinkLoadingTxt span {
    margin-left: calc(2 / 750 * 100vw);
    width: calc(20 / 750 * 100vw);
    height: calc(4 / 750 * 100vw);
    display: inline-block;
    vertical-align: middle;
    background-position: 0 0;
    background-repeat: repeat-x;
    background-size: calc(10 / 750 * 100vw) 100%;
    background-image: -webkit-linear-gradient(left, #fff, #fff calc(5 / 750 * 100vw), transparent calc(5 / 750 * 100vw));
    background-image: linear-gradient(to right, #fff, #fff calc(5 / 750 * 100vw), transparent calc(5 / 750 * 100vw));
    -webkit-animation: animation 1.3s linear infinite;
    animation: animation 1.3s linear infinite;
}

.echoesLinkLoading.active {
    opacity: 1;
    visibility: visible;
}

.echoesLinkWin, .echoesLinkLose {
    margin-bottom: calc(30 / 750 * 100vw);
}

.echoesLinkBanner {
    margin: calc(20 / 750 * 100vw) 0 0;
}

.echoesLinkOverlay {
    opacity: 1;
    visibility: visible;
    background: rgba(0, 0, 0, 0.8);
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 9999;
}

.echoesLinkClose {
    margin-top: calc(40 / 750 * 100vw);
    padding: calc(30 / 750 * 100vw) calc(70 / 750 * 100vw);
    font-size: calc(36 / 750 * 100vw);
    font-weight: 600;
    color: #737373;
    line-height: 1;
    display: inline-block;
    border-radius: calc(48 / 750 * 100vw);
    background-color: #fff;
    cursor: pointer;
}

@media screen and (min-width: 600px) and (max-width: 1024px) {
    .echoesLinkCont {
        width: calc(500 / 750 * 100vw);
    }

    .echoesLinkLoadingItem {
        margin: calc(140 / 750 * 100vw) auto;
        font-size: calc(45 / 750 * 100vw);
    }

    .echoesLinkLoadingTxt {
        margin-top: calc(40 / 750 * 100vw);
        margin-bottom: calc(100 / 750 * 100vw);
        font-size: calc(36 / 750 * 100vw);
    }

    .echoesLinkLoadingTxt span {
        margin-left: calc(2 / 750 * 100vw);
        width: calc(20 / 750 * 100vw);
        height: calc(4 / 750 * 100vw);
        background-size: calc(10 / 750 * 100vw) 100%;
        background-image: -webkit-linear-gradient(left, #fff, #fff calc(5 / 750 * 100vw), transparent calc(5 / 750 * 100vw));
        background-image: linear-gradient(to right, #fff, #fff calc(5 / 750 * 100vw), transparent calc(5 / 750 * 100vw));
    }

    .echoesLinkLoading.active {
        display: block;
    }

    .echoesLinkClose {
        padding: calc(20 / 750 * 100vw) calc(50 / 750 * 100vw);
        font-size: calc(28 / 750 * 100vw);
    }
}

@media screen and (min-width: 1025px) {
    .echoesLinkCont {
        width: 350px;
    }

    .echoesLinkLoadingItem {
        margin: 90px auto;
        font-size: 30px;
    }

    .echoesLinkLoadingTxt {
        margin-top: 20px;
        margin-bottom: 50px;
        font-size: 32px;
    }

    .echoesLinkLoadingTxt span {
        margin-left: 5px;
        width: 20px;
        height: 4px;
        background-size: 10px 100%;
        background-image: -webkit-linear-gradient(left, #fff, #fff 5px, transparent 5px);
        background-image: linear-gradient(to right, #fff, #fff 5px, transparent 5px);
    }

    .echoesLinkLoading.active {
        display: block;
    }

    .echoesLinkWin, .echoesLinkLose {
        margin-bottom: 20px;
    }

    .echoesLinkBanner {
        margin: 20px 0 0;
    }

    .echoesLinkClose {
        margin-top: 30px;
        padding: 20px 45px;
        font-size: 24px;
        border-radius: 48px;
    }
}

/*# sourceMappingURL=echoesLink.css.map */