@charset "utf-8";
@font-face {
    font-family: 'TmonMonsori';
    src: url('https://cdn.jsdelivr.net/gh/wizfile/font/TmonMonsori.eot');
    src:url('https://cdn.jsdelivr.net/gh/wizfile/font/TmonMonsori.woff') format('woff');
    font-style: normal;
}

body, html {margin: 0; padding: 0;font-family: Arial, sans-serif;}
body {width: 100%; background-color: #000;overflow-x: auto; overflow-y: scroll;user-select: none;
    -webkit-user-select: none; /* For Safari */
    -moz-user-select: none; /* For Firefox */
    -ms-user-select: none; /* For Internet Explorer/Edge */
    position: relative
}

.fr {float: right}
.fl {float: left}
.cl {clear: both}

#project_box {width: 100%;background-color: #383333;margin: auto}

#container {width: 100%;min-width: 800px;margin: auto;}

.teaser {position: relative;width: 100%;height: 99vh;background: url('../img/countdown/countdown.jpg') no-repeat center center;background-size: cover;display: flex;align-items: center;justify-content: center;color: #fffaf5;border-radius: 30px;overflow: hidden}

.overlay {position: absolute; bottom: 0; left: 0; width: 100%; height: 15%; background: #fffaf5; clip-path: polygon(0 145%, 100% 0, 100% 100%);}

.countdown {position: absolute;bottom: 10%;right: 8%;transform: rotate(-6deg);font-family: "Noto Sans JP"}
.countdown .time {display: table-cell;}
.countdown .time dt {font-size: 0.6em;}
.countdown .time span {font-size: 4.5em;font-weight: bold;line-height: 0.8em}

.open-date {color: #bf3b46;font-family: 'TmonMonsori';display: block;font-size: 1.2em;position: absolute;right: 8%;bottom: 25%;transform: rotate(-6deg)}

.jua-regular {font-family: "Jua", sans-serif;font-weight: 400;font-style: normal;}

#youtube {width: 100%;height: 100%;position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0,0,0,0.35);z-index: 1000;}
#youtube .close {width: 100px;height: 100px; position: absolute;top: -10%;right: -10%;color: #fff;font-size: 2em;cursor: pointer}
.frame {width: 50%; height: 60%;background-color: transparent;position: relative;top: 50%;left: 50%;transform: translate(-50%,-50%)}


#footer {padding:40px 60px}
.f-logo {width: 40%}
.f-logo a {padding-right: 10px}
.f-logo a:first-of-type img {width: 30%;padding-bottom: 20px}
.f-logo a:last-of-type img {width: 30%}
.f-icon{width: 45%;text-align: right}
.f-icon a img {width: 5%; padding-left: 20px;}
.f-icon a:nth-of-type(2) img {width: 6.5%; padding-left: 20px;}
.f-icon span {font-size: 1em; color: #716262;}

@media (min-width: 3841px){
    .teaser {height: auto;overflow: hidden;border-radius: 30px 30px 0 0}
    .overlay {clip-path: polygon(0 100%, 100% 0%, 100% 100%)!important;}
    .countdown {;bottom: 218px!important;transform: rotate(-4deg)!important;}
    .open-date {;bottom: 30px!important;transform: rotate(-4deg)!important;}
    .responsive-box {position: relative;width:100%;padding-bottom: 50%; background-color:  #fffaf5;border-radius: 0 0 30px 30px}
    .responsive-box .content {position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
}

@media(min-width:3000px){
    #project_box {width: 3840px;}
    #container {width: 100%;max-width: 3840px;margin: auto;}
    .teaser {height: 1902px}
    .overlay {width: 100%; height: 280px;clip-path: polygon(0 145%, 100% 0, 100% 100%);}
    .countdown {;bottom: 195px;right: 315px;transform: rotate(-6deg);}
    .countdown .time {display: table-cell;padding:0 15px}
    .countdown .time dt {font-size: 21px;}
    .countdown .time span {font-size: 130px;line-height: 120px}
    .open-date {font-size: 68px;right: 315px;bottom: 25px;transform: rotate(-6deg);}
    #youtube .close {top: -2%!important;right: -6%!important;font-size: 3em}

    
    #footer {padding:60px 160px}
    .f-logo a {padding-right: 20px}
    .f-logo a:first-of-type img {height: 70px;padding-bottom: 27px}
    .f-logo a:last-of-type img {height: 96px}
    .f-icon a img {padding-left: 30px}
    .f-icon span {font-size: 32px; color: #716262;padding-right: 96px;vertical-align: }
    
    #youtube a {width: 100px;height: 100px;top: 28%;right: 33%;transform: translate(-50%,-50%);font-size: 100px;}
    .frame {width: 1920px; height: 1080px;top: 50%;left: 50%;transform: translate(-50%,-50%)}
}

@media(min-width:1900px){
    .countdown {position: absolute;bottom: 10.7%;right: 8%;transform: rotate(-6deg);font-family: "Noto Sans JP"}
    .open-date {right: 8%;bottom: 35%;transform: rotate(-6deg)}
    #youtube .close {top: -8%;right: -7.5%}
}

@media(min-width:1600px){
    #youtube .close {top: -9%;right: -8.5%}
}

@media(max-width:800px){
    .overlay {bottom: 0; left: 0; width: 100%; height: 18%; clip-path: polygon(0 110%, 100% 0, 100% 100%);}
    .countdown {;bottom: 9.5%;right: 20%;transform: rotate(-10deg);font-family: "Noto Sans JP"}
    .countdown .time dt {font-size: 0.6em;}
    .countdown .time span {font-size: 3.5em;line-height: 0.8em}
    .open-date {font-size: 1em;right: 19%;bottom: 25%;transform: rotate(-10deg)}
    #youtube .close {top: -10%;right: -19%}
}