html {
    height: 100%;
}
body {
    height: 100%;
    display: flex;
    flex-direction: column;
 }

a {
    color:#000;
    text-decoration: none;
}





 /*typekit*/
.wf-loading {
    font-family: "garamond-premier-pro";
    visibility: hidden;
}
.wf-active {
    visibility: visible;
}

#header{
    margin:20px;
    /*display:flex;*/
    align-items: center;
    justify-content: space-between;
    font-size:25px;
}
#header a:first-child{
    margin-right:10px;
}

#header .enter{
    font-family: "garamond-premier-pro";
    font-size: 18px;
    text-decoration: none;
}
#footer{
    font-family: "garamond-premier-pro";
    font-size: 18px;
    margin:20px;
    display:flex;
}
#footer p{
    margin-right:3px;
    white-space: nowrap;
    font-family: "garamond-premier-pro";
    font-size: 18px;
}

#header .img-container{
    width:100px;
}

#phase2{
    flex:1 0 auto;
    position:relative;
}

#title,
#japan,
#world{
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position:absolute;
    width:100%;
    height:50%;
    z-index: -100;
   

}
#title .img-container{
    width:140px;
}

.mainTitle{
    font-family: "garamond-premier-pro";
    font-size: 10vw;
    line-height:13vw;
    text-decoration: none;

}
.mainTitle img{
    width:100%;
}

.country{
    font-family: "garamond-premier-pro-display";
    font-size: 7vw;
    line-height:12vw;

}

.date{
    font-family: "garamond-premier-pro-display";
    font-size: 20vw;
    line-height:28vw;

}

.countdown,
.countdown-world{
    display:flex;
    justify-content: center;
    font-family: "garamond-premier-pro-display";
    text-align:center;
    padding:0;
}

.countdown li,
.countdown-world li{
    list-style: none;
    margin-right:15px;
}

.countdown li:last-child,
.countdown-world li:last-child{
    margin-right:0;
}

.countdown-number{
    font-size:6vw;
    line-height:1vw;
}

.countdown-str{
    font-size:3vw;
}

.marquee {
    overflow: hidden;
}

#xs-sns{
    margin:20px 40px 20px 20px;
    text-align:right;
    font-size:20px;
}

#xs-sns a:first-child{
    margin-right:40px;
}

@media only screen
and (max-width: 768px)
and (orientation:landscape) {
    .mainTitle{
        font-size:6vw;
        line-height:7vw;
    }

    .country{
        font-size: 3vw;
        line-height:4vw;

    }

    .date{
        font-size: 10vw;
        line-height:14vw;

    }

    .countdown-number{
        font-size:4vw;
        line-height:2vw;
    }

    .countdown li,
    .countdown-world li{
        list-style: none;
        margin-right:15px;
    }

    .countdown-str{
        font-size:2vw;
        line-height:1vw;
    }
}


@media  (min-width:768px)
and (max-width: 1024px){
    .mainTitle{
        font-size:60px;
        line-height:80px;
    }

    .country{
        font-size: 30px;
        line-height:60px;

    }

    .date{
        font-size: 100px;
        line-height:170px;
    }

    .countdown-number{
        font-size:40px;
        line-height:30px;
    }

    .countdown-str{
        font-size:16px;
    }
}

@media (min-width: 1024px) {
    .mainTitle{
        font-size:60px;
        line-height:80px;
    }

    .country{
        font-size: 30px;
        line-height:60px;

    }

    .date{
        font-size: 100px;
        line-height:170px;
    }

    .countdown-number{
        font-size:40px;
        line-height:30px;
    }

    .countdown-str{
        font-size:16px;
    }
}


@media only screen
and (min-width: 1024px)
and (orientation:landscape) {
    .mainTitle{
        font-size:60px;
        line-height:80px;
    }

    .country{
        font-size: 50px;
        line-height:60px;

    }

    .date{
        font-size: 130px;
        line-height:170px;
    }


    .countdown li,
    .countdown-world li{
        list-style: none;
        margin-right:25px;
    }

    .countdown-number{
        font-size:40px;
        line-height:30px;
    }

    .countdown-str{
        font-size:16px;
    }

}