@charset "utf-8";

body{
	font-family: "ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3", 
		"Hiragino Kaku Gothic Pro", Osaka, 
		Arial, Helvetica, sans-serif;
}
.gameboard{
	border: solid red(255,128,0) 1px;
	border-top: solid red(255,128,0) 10px;
	width: 484px;
    height: auto;
	padding: 20px;
	margin: auto;
	background-image:url("../images/stageback.jpg");
	box-shadow: 0px 0px 36px #444666;
	box-shadow: 0px 0px 36px #444444;
	border-radius: 8px;
	position: relative;
}

.gameboard h1{
	color:rgb(255, 200, 200);
	font-size: 24px;
	text-align: center;	
	letter-spacing: 1em;
	line-height: 24px;
	margin-bottom: 10px;
}

.toolbar{
	background-color: white;
	padding: 4px 18px;
	margin-bottom: 20px;
	border-radius: 4px;
	color:#C207F2;
	line-height: 30px;
	height: 32px;
}
.toolbar span{
	font-size: 32px;
	margin: 0px 20px 0px 3px; 
}

#cvs_stage{
	box-shadow: 0px 0px 36px 2px 
		rgb(255, 200, 200);
}

button {
	color: #6EDD98;
	background-color: white;
	border-radius: 10px;
	border: solid gray;
	height:100px;
	vertical-align:top;
}
button:hover{
	color:white;
	background-color:#172589;
}
#btn_restart{
	float:none;
}

#title{
	display: none;
	background-image:url("../images/img/title.jpg");
}
#gameclear{
	display: none;
	background-image:url("../images/img/clear.jpg");
	background-position: 0px -6px;
}
.dialogbox{
	position: absolute;
	top: 80px;
	left:20px;
	width: 480px;
	height: 480px;
	box-shadow: 0px 0px 2px 2px 
		black;
	box-shadow: 0px 0px 2px 2px 
		black;
    font-size: 50px;
}
#title button{
	position: absolute;
	top: 80px;
	left: 200px;
	box-shadow: 0px 0px 24px 6px #FFFF22;
    font-size: 50px;
}
#gameclear button{
	position: absolute;
	top: 80px;
	left:200px;
	box-shadow: 0px 0px 24px 6px #FFFF22;
}

/*** 雪玉（共通） ***/
.snowss div{
  position: fixed; /*画面固定*/
  top: -250px; /*初期位置*/
  left: 0;
  border-radius: 50%; /*丸型*/
  background: #fff; /*雪の色*/
  opacity: 0.9; /*若干透明に*/
}

/*** 小さい雪玉 ***/
.snowss div:nth-child(1){
  width: 10px;
  height: 10px;
  filter: blur(2px); /*ぼかし*/
  /* ±240pxの範囲で影(複製)を作る */
  box-shadow:
    5vw -40px 0 #fff,
    10vw 150px #fff,
    15vw -230px #fff,
    22vw 240px #fff,
    30vw 120px #fff,
    35vw -180px #fff,
    44vw 240px #fff,
    50vw 0 #fff,
    60vw 180px #fff,
    68vw 40px #fff,
    74vw -130px #fff,
    81vw -240px #fff,
    88vw 100px #fff,
    95vw 60px #fff;
    animation: fall 12s linear infinite;/*落下*/
}

/*** 小さい雪玉2 ***/
.snowss div:nth-child(2){
  width: 10px;
  height: 10px;
  filter: blur(2px); /*ぼかし*/
  /* ±240pxの範囲で影(複製)を作る */
  box-shadow:
    7vw 220px 0 #fff,
    35vw 20px #fff,
    68vw 100px #fff,
    93vw -190px #fff;
  animation: fall 12.5s linear infinite;/*落下*/
  animation-delay: 6s; /*開始遅延*/
}

/*** 中ぐらいの雪玉 ***/
.snowss div:nth-child(3){
  width: 14px;
  height: 14px;
  filter: blur(3px); /*ぼかし*/
  /* ±233pxの範囲で影(複製)を作る */
  box-shadow:
    12vw 5px 0 #fff,
    32vw -100px #fff,
    45vw -180px #fff,
    68vw 40px #fff,
    77vw 65px #fff,
    94vw 230px #fff;
  animation: fall 10s linear infinite; /*落下*/
  animation-delay: 6s; /*開始遅延*/
}

/*** 大きめの雪玉 ***/
.snowss div:nth-child(4){
  width: 20px;
  height: 20px;
  filter: blur(8px); /*ぼかし*/
  /* ±222pxの範囲で影(複製)を作る */
  box-shadow:
    40vw -200px #fff,
    80vw 220px #fff;
  animation: fall 7s linear infinite; /*落下*/
  animation-delay: 4s; /*遅延*/
}

/*** 落下アニメーション ***/
@keyframes fall{
  0%{
    top: -250px;
  }
  100% {
    top: calc(100% + 250px);
  }
}