@font-face {
    font-family: "FOT-RodinPro-UB";
    src: url("../font/FOT-RodinPro-UB_subset.otf") format("opentype");
}
@font-face {
    font-family: "NotoSansCJKjp";
    src: url("../font/NotoSansCJKjp_subset.otf") format("opentype");
}

body{
    background-color: #f5f4f6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

#root{
}

#main{
}

#bg {
}

.w-fill {
	width: 100%;
}
.z-index-1 {
    z-index: 1;
}


.main-image {
	position: relative;
}

.video-view video {
    width: 100%;
    display: block;
}

.contents {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;

	margin-top: -10%;
	position: relative;
}

.countdown-wrap {
	position: absolute;
	bottom: 9%;
	mix-blend-mode: hard-light;
}

.countdown-view {
    opacity: 0;
    display: block;

    height: auto;
	/* margin: 0 18px; */

	color: rgba(254, 127, 244, 0.95);
}

.countdown-view-anime {
	animation: visible-countdown 4.75s forwards linear 0s;
}

.countdown-view p {
	text-align: center;
	font-family: "FOT-RodinPro-UB", serif;
	font-style: italic;
	font-weight: 900;
	letter-spacing: 0.025vw;

	position: relative;
}


@keyframes visible-countdown {
    0% {
        opacity: 0;
        display:none;
    }

    84.2% {
        opacity: 0;
        display:none;

    }

    100% {
        opacity: 1;
        display:block;
    }
}

.float-contents {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;

	animation: visible-contents 5.33s ease-in 0s;
}

@keyframes visible-contents {
	0% {
		opacity: 0%;
		margin-top: 5vw;
	}

	81.2% {
		opacity: 0%;
		margin-top: 5vw;
	}

	93.7%{
		margin-top: 0vw;
	}

	100% {
		opacity: 1;
	}
}

.reaction-link:hover {
    opacity: 0.5;
}

.reaction-link:active {
    opacity: 0.5;
}

.copyright-view {
	font-size: 1.25vw;
	padding-bottom: 1vw;
	color: #323232;
}

@media (min-width: 1025px) {

    .countdown-view p {
		font-size: 12vw;
        text-shadow: 0 0 1.66vw #F600FF88;
    }

    .reaction-link-view {
        position: relative;
        margin-top: 3.5vw;
        padding-bottom: 8.95vw;
    }

    .reaction-link {
        display: inline;

    }
    #reaction-official-sns img{
        width: 30vw;
    }

    #reaction-twitter img{
        width: 16.7vw;
        padding-left: 0.41vw;
    }

    .external-link-view {
        padding-bottom: 3.5vw;
    }

    .footer-banner-content {
        display: inline;
        padding-left   : 0.41vw;
        padding-right   : 0.41vw;
    }

    .footer-banner-content img{
        width: 10vw;
    }

    .corporate-view {
        padding-bottom: 3.5vw;
    }

    .corporate-view img {
        width: 15vw;
    }

    .copyright-view {
        font-size: 1.25vw;
        padding-bottom: 1vw;
    }
}


@media (max-width: 1024px) {

    .countdown-view p {
		margin-left: -2vw;
		font-size: 11.5vw;
        text-shadow: 0 0 1.56vw #F600FF88;
    }

    .reaction-link-view {
        margin-top: 5%;

    }
    .reaction-link {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    #reaction-official-sns img{
        width: 50vw;
        padding-bottom: 2.34vw;
    }

    #reaction-twitter img{
        width: 27.8vw;
        padding-bottom: 7vw;
    }

    .external-link-view {
        padding-bottom: 6.83vw;
    }

    .footer-banner-content {
        display: inline;
        padding-left   : 0.7vw;
        padding-right   : 0.7vw;
    }

    .footer-banner-content img {
        width: 20vw;
    }

    .corporate-view {
        padding-bottom: 7vw;
    }

    .corporate-view img {
        width: 20vw;
    }

    .copyright-view {
        font-size: 2.4vw;
        padding-bottom: 1.8vw;
    }
}