@charset "utf-8";
/* CSS Document */
body { margin: 0; font-family: "Noto Sans JP", sans-serif;}
        canvas { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; position: fixed; top:0; left: 0; }
        #info { position: fixed; top: 10px; left: 10px; color: white; font-family: monospace; z-index: 3; }
		#audios { position: fixed; bottom: 0; left: 0; opacity: 0;}
		#play { -webkit-appearance:none;appearance:none; background: none; background-color: transparent; border:none; width: 80px; height: 80px; background-image: url("../img/play.svg"); background-repeat:no-repeat; background-size: 50px; background-position: center; cursor: pointer;}
		#start { width: 100%;height: 100svh; position: fixed; top:0; left: 0; display: flex;justify-content: center;align-items: center; z-index: 2; background-color: rgba(0,0,0,.8); display: none;}
		.intro #start { display: flex;}
		#close { width: 60px; height: 60px; position: fixed; top:0; right: 0; cursor: pointer; background-image: url("../img/close.svg"); background-position: center; background-repeat: no-repeat; z-index: 2;}
		.intro #close { display: none;}

#modal { width: 90%; position: fixed; top:50%; left: 50%; transform: translate(-50%,-50%); background-color: rgba(205, 0, 0, .8); padding: 6vw; box-sizing: border-box;z-index: 3;border:1px solid #fff; box-sizing: border-box; border-radius: .6em; color: #FFF; transition: all .4s ease 0s;
    }
#modal h1 { font-size: 7vw;}
#modal p { font-size: 4vw;}
#bt { cursor: pointer; background-color: #313131; display: inline-block; padding: .7em 2em; border-radius: .3em; color: #FFF; font-size: 3vw;}
.btBox { text-align: right; border-top:1px solid #FFF; padding-top: 6vw; margin-top: 6vw;}

#modal img { width: 100%; height: auto;}

.delete #modal { transform: translate(-50%,100%); opacity: 0;}

@media screen and (min-width:667px){
#modal h1 { font-size: 140%;}
#modal p { font-size: 100%;}
	#modal { padding: 30px;max-width: 600px;}
	#bt { font-size: 100%;}
	.btBox {  padding-top: 40px; margin-top: 40px;}
}

@media screen and (min-width:1000px){
	#modal h1 { font-size: 140%;}
#modal p { font-size: 100%;}
	#modal { padding: 30px;max-width: 600px;}
	#bt { font-size: 100%;}
	.btBox {  padding-top: 40px; margin-top: 40px;}
}