@charset "utf-8";
/* CSS Document */
body { margin: 0; background: #000; height: 100svh;font-family: "Afacad Flux", sans-serif;}
		.intro body { background-image: url("../img/Spinner-1s-200px.svg"); background-position: center; background-repeat: no-repeat; background-size: 15vw;}
		canvas { position: fixed; top:0; left: 0; object-fit: cover; width: 100%; height: 100svh;}
		button { position:fixed;transform:translate( -50%,0%); width: 15vw; height: 15vw; appearance:none; background: none; border:none; border-radius: 50%; background-color: rgba(0,0,0,.5); background-position: center; background-repeat: no-repeat; background-size: 8vw;  outline: none;}
		.input{ width: 12vw; height: 12vw; position: fixed; top:0; right: 0; background-image: url("../img/add.svg"); background-position: center; background-repeat: no-repeat; background-size: 6vw; }
input[type=file] { width: 100%; height: 100%; opacity: 0; outline: none;}

.play button { background-image: url("../img/play.svg");}
.pause button { background-image: url("../img/pause.svg");}

h2 { color: #FFF; text-align: center; width: 100%; position: fixed; top:50%; left: 0; transform: translateY(-50%); font-size: 5vw; z-index: 0; opacity: 0; margin: 0; font-style: normal;}
.suggest h2 { opacity: 1; z-index: 2;}

h1 { color: #FFF; text-align: center; width: 100%; position: fixed; top:50%; left: 0; transform: translateY(-50%); font-size: 12vw; z-index: 0; opacity: 0; margin: 0; font-style: normal;}
.intros h1 { opacity: 1; z-index: 2;}
div {  outline: none;}


input[type=range] {
  appearance: none;
  width: 100%;
  height: 2vw;
  border-radius: 9999px;
  background: linear-gradient(90deg, #ffffff 30%, #ffffff66 30%);
  cursor: pointer;
}

/* ツマミ：Chrome, Safari, Edge用 */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 6vw;
  height: 6vw;
  border-radius: 9999px;
  background: #ffffff;
  box-shadow: none;
}

/* ツマミ：Firefox用 */
input[type="range"]::-moz-range-thumb {
  border: none;
  width: 6vw;
  height:6vw;
  border-radius: 9999px;
  background: #ffffff;
  box-shadow: none;
}
#info { line-height: 1.3;}

@media (orientation: landscape) {
			h2 { font-size: 2.5vw;}

h1 { font-size: 6vw;}
	
	button { width: 7.5vw; height: 7.5vw; background-size: 4vw;}
		.input{ width: 6vw; height: 6vw;background-size: 3vw; }
	.volumeLabel { font-size: 2vw!important;}
	
	input[type=range] {
  height: .5vw;
}

/* ツマミ：Chrome, Safari, Edge用 */
input[type="range"]::-webkit-slider-thumb {
  
  width: 2vw;
  height: 2vw;
}

/* ツマミ：Firefox用 */
input[type="range"]::-moz-range-thumb {
  width: 2vw;
  height:2vw;
}
	#info { font-size: 1.5vw!important; line-height: 1.3; padding: 1.5vw;}
}