@charset "utf-8";
/* CSS Document */
body,html { height: 100%; margin: 0; background-color: #fff; transition: all .4s ease 0s;}
.view body {  background-color: #000;}
        canvas { opacity: 0; transition: opacity 1s ease 0s;}
        .views canvas { opacity: 1;}
        video,canvas { width: 100%; height: 100%; object-fit: cover; object-position: center; position: fixed; top:0; left: 0;}
		video { opacity: 0;}
        .view video { opacity: 0;}
        #shotButton { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); width: 80px; height: 80px; border-radius: 50%; border:2px solid #000; box-sizing: border-box;}
        .view #shotButton { display: none;}
		h1 { width: 100%; text-align: center; position: fixed; top:50%; left: 0; transform: translateY(-50%); margin: 0; color: #000; font-size: 8vw;font-family: "Kanit", sans-serif;font-weight: 500;}
.view h1 { color: #fff;}
		.views h1 { display: none; }

#back { width: 60px; height: 60px; position: fixed; top:0; left: 0; background-image: url("../img/back.svg"); background-repeat: no-repeat; background-size: 24px; background-position: center; cursor: pointer; display: none;}
.view #back { display: block;}