@charset "UTF-8";
/* CSS Document */

body {
background:#000;
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
}
img , video {
vertical-align: bottom;
}
#wrap {
width: 100%;
height: 100vh;
height: 100dvh;
overflow: hidden;
position: relative;
}
.movie {
position: relative;
width: 100%;
padding-top: 56.25%;
}
.movie > video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
height: 100dvh;
z-index: 1;
}
#wrap button {
display: block;
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
}
#wrap button[onclick="playWithSound()"]{
transform: translateY(-50%) translateX(-120%);
}
#wrap button[onclick="playWithoutSound()"]{
transform: translateY(-50%) translateX(20%);
}

button {
background-color: rgba(0,0,0,0.6);
border: none;
cursor: pointer;
outline: none;
padding: 0;
appearance: none;
color: #fff;
border: 3px solid #fff;
border-radius: 50%;
}
#wrap i {
display: block;
}

.skip {
z-index: 4;
position: fixed;
bottom: 10px; 
right: 10px;
padding: 6px 40px;
}
.skip a{
color: #fff;
font-family: Meiryo;
}

@media (max-width: 560px){
button {
font-size: 13px;
width: 30vw;
height: 30vw;
}
#wrap i {
padding-top: 6px;
}
}

@media (min-width: 561px){
button {
font-size: 18px;
width: 200px;
height: 200px;
}
#wrap i {
padding-top: 10px;
}
}