@import url(https://fonts.googleapis.com/css?family=Average+Sans);
#update {
  text-align: center;
}

/* -------------------------------------
 * style
 * ------------------------------------- */
body {
	margin: 0px;
	background-color: #036;
	color: #FFF;
}
.pagebody_f{
	margin-right: auto;
	margin-left: auto;
	width: 890px;
	margin-top: 30px;
	text-shadow:1px 1px 2px rgba(0,0,0,1);
}
.pagebody{
	margin-right: auto;
	margin-left: auto;
	width: 890px;
	margin-top: 50px;

}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
.kana{
	color: yellow;
	font-weight: bold;
	display: block;
	text-align: right;
		margin-top: 6px;

	padding-right: 2px;
}
.kana1{
	color: yellow;
	font-weight: bold;
	display: block;
	text-align: right;
	margin-top: -10px;
	padding-right: 2px;
}

h1{
	color:rgba(102,255,255,1);
	text-align: center;
	font-family: "Sawarabi Gothic";
	font-size: 250%;
	text-shadow:0 0 1px black, 1px 1px 5px black;
	letter-spacing:-2px;
}
h2{
	font-family: "Sawarabi Mincho";
}
li{
	list-style-type:none;
}

/*------- Keyboard ------- */
#keyboard {
	background: #f5f3f1;
	background: -webkit-linear-gradient(top, #e5e2e1, #f5f3f1, #e5e2e1);
	background: -moz-linear-gradient(top, #e5e2e1, #f5f3f1, #e5e2e1);
	background: -ms-linear-gradient(top, #e5e2e1, #f5f3f1, #e5e2e1);
	background: -o-linear-gradient(top, #e5e2e1, #f5f3f1, #e5e2e1);
	background: linear-gradient(to bottom, #e5e2e1, #f5f3f1, #e5e2e1);
	border-radius: 5px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(0, 0, 0, 0.3);
	-webkit-transform: rotateX(15deg);
	-ms-transform: rotateX(15deg);
	-o-transform: rotateX(15deg);
	padding-right: 8px;
	padding-left: 8px;
	padding-bottom: 10px;
	padding-top: 10px;
	margin-top:-5px;

}
#keyboard2 {
	border-radius: 5px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(0, 0, 0, 0.3);
	background-color: #06F;
	letter-spacing: 2px;
	text-align: center;
	font-size: 300%;
	padding-right: 8px;
	padding-left: 8px;
	color: #FFF;
	margin: 0px;
}
#keyboard3 {
	border-radius: 5px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(0, 0, 0, 0.3);
	background-color: #06F;
	letter-spacing: 2px;
	padding-right: 8px;
	padding-left: 8px;
	color: #FFF;
	padding-top: 1px;
	padding-bottom: 1px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 5px;
	margin-left: 0px;
}
#main {
  padding: 2px;
  background: #4d4d4d;
  border-radius: 4px;
  overflow: hidden;
}


/* no2 for first all keyboard */
#addition_wrap2 {
	background: #4d4d4d;
	border-radius: 0 0 4px 4px;
	position: relative;
	margin-top: -2px;
	margin-right: 0;
	margin-bottom: 0;
	padding-top: 0;
	padding-right: 2px;
	padding-bottom: 2px;
	padding-left: 2px;
}
#addition_wrap2:before, #addition_wrap2:after {
  content: "";
  width: 5px;
  height: 5px;
  background: #ebe8e7;
  border-top: 2px solid #4d4d4d;
  position: absolute;
  top: 0px;
}
#addition_wrap2:before {
  left: -5px;
  border-right: 2px solid #4d4d4d;
  border-radius: 0 5px 0 0;
}
#addition_wrap2:after {
  right: -5px;
  border-left: 2px solid #4d4d4d;
  border-radius: 5px 0 0 0;
}

#addition2 {
  overflow: hidden;
}
/* no2 end */

#addition_wrap {
  width: 650px;
  margin: -2px 0 0 85px;
  padding: 0 2px 2px;
  background: #4d4d4d;
  border-radius: 0 0 4px 4px;
  position: relative;
}
#addition_wrap:before, #addition_wrap:after {
  content: "";
  width: 5px;
  height: 5px;
  background: #ebe8e7;
  border-top: 2px solid #4d4d4d;
  position: absolute;
  top: 0px;
}
#addition_wrap:before {
  left: -5px;
  border-right: 2px solid #4d4d4d;
  border-radius: 0 5px 0 0;
}
#addition_wrap:after {
  right: -5px;
  border-left: 2px solid #4d4d4d;
  border-radius: 5px 0 0 0;
}

#addition {
  overflow: hidden;
}






.key, .f_key {
  width: 40px;
  height: 45px;
  margin: 2px;
  border-width: 3px 7px 10px;
  border-style: solid;
  border-radius: 4px;
  float: left;
}
.key.pressed, .f_key.pressed {
  -webkit-transform: scale(0.95, 0.95);
  -moz-transform: scale(0.95, 0.95);
  -ms-transform: scale(0.95, 0.95);
  -o-transform: scale(0.95, 0.95);
  transform: scale(0.95, 0.95);
  background:red;
  color:white;
  font-weight:bold;
  text-shadow:0 0 3px rgba(0,0,0,.9);
  
}

.key {
  background: #d3cfcc;
  border-color: #ece8e4 #dedad6 #c9c4c4;
}

.f_key {
  background: #a8aeb8;
  border-color: #c4c7cc #adb9cc #96a6bd;
}

.key .keycap {
  width: 33px;
  height: 40px;
  padding: 5px 0 0 7px;
  font-size: 16px;
  line-height: 1;
  /*
  background: #f5f3f1;
  background: -webkit-linear-gradient(left, #e5e2e1, #f5f3f1, #e5e2e1);
  background: -moz-linear-gradient(left, #e5e2e1, #f5f3f1, #e5e2e1);
  background: -ms-linear-gradient(left, #e5e2e1, #f5f3f1, #e5e2e1);
  background: -o-linear-gradient(left, #e5e2e1, #f5f3f1, #e5e2e1);
  background: linear-gradient(to right, #e5e2e1, #f5f3f1, #e5e2e1);
  */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  position: relative;
  color:white;
  text-shadow:1px 1px 3px rgba(0,0,0,1);
}

.f_key .keycap {
  width: inherit;
  height: inherit;
  font-size: 15px;
  line-height: 45px;
  text-indent: 7px;
  
  background: #cdd3de;
  background: -webkit-linear-gradient(left, #bbc3d2, #cdd3de, #bbc3d2);
  background: -moz-linear-gradient(left, #bbc3d2, #cdd3de, #bbc3d2);
  background: -ms-linear-gradient(left, #bbc3d2, #cdd3de, #bbc3d2);
  background: -o-linear-gradient(left, #bbc3d2, #cdd3de, #bbc3d2);
  background: linear-gradient(to right, #bbc3d2, #cdd3de, #bbc3d2);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  position: relative;
}

.top {
  padding: 3px 5px 0 0;
  font-size: 12px;
  font-style: italic;
  text-align: right;
  line-height: 1;
  display: block;
}

.bottom {
  width: inherit;
  line-height: 20px;
  display: block;
}

.side {
	font-size: 10px;
	line-height: 1;
	display: block;
	position: absolute;
	left: 15px;
	/* bottom: -10px;*/
	-webkit-transform: rotateX(50deg);
	-moz-transform: rotateX(50deg);
	-ms-transform: rotateX(50deg);
	-o-transform: rotateX(50deg);
	transform: rotateX(50deg);
}

.f_key .side {
	left: 39px;
}

.k13 .side {
  right: 7px;
  text-align: right;
}

/*------- key width ------- */
.k27, .k18.left {
  width: 38px;
  border-right-width: 9px;
}

.k192, .fn, .k18.right {
  width: 38px;
  border-left-width: 9px;
}

.k192 .keycap {
  width: 30px;
}

.k9 {
  width: 66px;
  border-right-width: 10px;
}

.k8 {
	width: 36px;
	border-left-width: 10px;
}

.k17 {
  width: 55px;
  border-right-width: 10px;
}


.k13 {
	width: 67px;
}
.k20 {
	width: 87px;
  border-right-width: 10px;
}


.k16.left {
  width: 113px;
  border-right-width: 10px;
}

.k16.right {
  width: 77px;
  border-left-width: 10px;
}

.k93 {
  width:55px;
}
.k91 .top, .k93 .top {
  font-size: 13px;
}
.k91 .bottom, .k93 .bottom {
  font-size: 20px;
}

.k91.left {
  border-right-width: 10px;
}

.k93.right {
  border-left-width: 10px;
}

.k32 {
  width: 185px;
  border-width: 3px 8px 10px;
}
.k32 .keycap {
  width: 180px;
}
.k32.pressed {
  -webkit-transform: scale(0.98, 0.95);
  -moz-transform: scale(0.98, 0.95);
  -ms-transform: scale(0.98, 0.95);
  -o-transform: scale(0.98, 0.95);
  transform: scale(0.98, 0.95);
}



.k242{
	  border-left-width: 10px;
	  width:72px;
}

.k28,.k24{
	width:59px;
}
h5{
	font-size: 200%;
	margin:0;
	padding:0;
}
.footer {
	text-align: center;
	border: 10px solid #099;
	border-radius: 30px;
	padding: 10px;
	font-size: 200%;
	font-style: italic;
	font-weight: bold;
	margin-top: 20px;
	text-shadow: 2px 2px 3px #999;
	width: 80%;
	margin-right: auto;
	margin-left: auto;
	background: white;
	color: #930;
}
#kbd1{
	vertical-align: top;
	box-shadow: 1px 1px 1px #333;

}
#kbd1:hover{
	margin-top:-1px;
	box-shadow: 2px 2px 5px #333;
}
#kbd1:active{
	margin-top:2px;
	box-shadow: -1px -1px 1px #333;
	
	
}
.keycupdot {
	color: #F00;
	font-weight: bold;
}
.keycupdotf {
	color: #F00;
	font-weight: bold;
	font-size: 20%;
}

#top {
	background-color: #099;
	height: 35px;
	box-shadow: 2px 2px 3px rgba(0,51,102,.8);
	padding-right: 10px;
	padding-left: 10px;
	padding-top: 5px;
}
#top ul li{
	list-style-type: none;

}
#top ul li a{
	display: block;
	background-color: #CCC;
	box-shadow: 1px 1px 2px rgba(204,204,204,.8);
	border-radius: 20px;
	color: #fff;
	font-weight: bold;
	text-align: center;
	padding-right: 5px;
	padding-left: 5px;
	text-shadow: 1px 1px 1px;


}



.textresizer{
	display: inline-block;
}
#fontsizebox {
	position: absolute;
	top: 20px;
	right: 10px;
}

#fontsizebox ul{
 list-style-type:none;

}
#fontsizebox a{
	display:block;
	background:rgba(153,153,153,1);
	border-radius:50%;
	width:30px;
	margin-bottom:1px;
	padding-top:5px;
	height:25px;
	text-align:center;
	text-shadow:0 0  2px rgba(51,51,51,.5);
	box-shadow:1px 1px 1px rgba(0,0,0,.7);
	color :#FFF;
}
#fontsizebox a:hover{
background:red;
}


.k49, .k81, .k65, .k90{
background: rgb(1,121,168);
background: -moz-radial-gradient(center, ellipse cover,  rgba(1,121,168,1) 0%, rgba(53,135,165,1) 52%, rgba(1,121,168,1) 100%);
background: -webkit-radial-gradient(center, ellipse cover,  rgba(1,121,168,1) 0%,rgba(53,135,165,1) 52%,rgba(1,121,168,1) 100%);
background: radial-gradient(ellipse at center,  rgba(1,121,168,1) 0%,rgba(53,135,165,1) 52%,rgba(1,121,168,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0179a8', endColorstr='#0179a8',GradientType=1 );
	} /*左小指*/


.k50,.k87,.k83,.k88,.k57,.k79,.k76,.k190,.k48{
background: rgb(224,86,0);
background: -moz-radial-gradient(center, ellipse cover,  rgba(224,86,0,1) 0%, rgba(219,149,52,1) 53%, rgba(224,86,0,1) 100%);
background: -webkit-radial-gradient(center, ellipse cover,  rgba(224,86,0,1) 0%,rgba(219,149,52,1) 53%,rgba(224,86,0,1) 100%);
background: radial-gradient(ellipse at center,  rgba(224,86,0,1) 0%,rgba(219,149,52,1) 53%,rgba(224,86,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e05600', endColorstr='#e05600',GradientType=1 );
	} /*右薬指*/


.k51,.k69,.k68,.k67,.k56,.k73,.k75,.k188{
background: rgb(204,0,0);
background: -moz-radial-gradient(center, ellipse cover,  rgba(204,0,0,1) 0%, rgba(204,36,36,1) 51%, rgba(204,28,28,1) 51%, rgba(204,0,0,1) 100%);
background: -webkit-radial-gradient(center, ellipse cover,  rgba(204,0,0,1) 0%,rgba(204,36,36,1) 51%,rgba(204,28,28,1) 51%,rgba(204,0,0,1) 100%);
background: radial-gradient(ellipse at center,  rgba(204,0,0,1) 0%,rgba(204,36,36,1) 51%,rgba(204,28,28,1) 51%,rgba(204,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc0000', endColorstr='#cc0000',GradientType=1 );
	}/*中指*/

.k189,.k222,.k220,.k80,.k192,.k219,.k187,.k186,.k221,.k191,.k226
{
background: rgb(1,121,168);
background: -moz-radial-gradient(center, ellipse cover,  rgba(1,121,168,1) 0%, rgba(53,135,165,1) 52%, rgba(1,121,168,1) 100%);
background: -webkit-radial-gradient(center, ellipse cover,  rgba(1,121,168,1) 0%,rgba(53,135,165,1) 52%,rgba(1,121,168,1) 100%);
background: radial-gradient(ellipse at center,  rgba(1,121,168,1) 0%,rgba(53,135,165,1) 52%,rgba(1,121,168,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0179a8', endColorstr='#0179a8',GradientType=1 );
	}/*右小指*/


.k52,.k53,.k82,.k84,.k70,.k71,.k86,.k66{
background: rgb(32,83,234);
background: -moz-radial-gradient(center, ellipse cover,  rgba(32,83,234,1) 0%, rgba(53,101,232,1) 53%, rgba(32,83,234,1) 100%);
background: -webkit-radial-gradient(center, ellipse cover,  rgba(32,83,234,1) 0%,rgba(53,101,232,1) 53%,rgba(32,83,234,1) 100%);
background: radial-gradient(ellipse at center,  rgba(32,83,234,1) 0%,rgba(53,101,232,1) 53%,rgba(32,83,234,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2053ea', endColorstr='#2053ea',GradientType=1 );

	}/*左人差し指*/
.k54,.k55,.k89,.k85,.k72,.k74,.k78,.k77{
background: rgb(41,191,0);
background: -moz-radial-gradient(center, ellipse cover,  rgba(41,191,0,1) 0%, rgba(52,216,34,1) 50%, rgba(41,191,0,1) 100%);
background: -webkit-radial-gradient(center, ellipse cover,  rgba(41,191,0,1) 0%,rgba(52,216,34,1) 50%,rgba(41,191,0,1) 100%);
background: radial-gradient(ellipse at center,  rgba(41,191,0,1) 0%,rgba(52,216,34,1) 50%,rgba(41,191,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#29bf00', endColorstr='#29bf00',GradientType=1 );
	
	}/*右人差し指*/
.menu {
	background-color: rgba(0,215,0,0.9);
	height: 30px;
	box-shadow: 2px 2px 3px rgba(0,51,102,.8);
}
.myButton {
	-moz-box-shadow:inset 1px 1px 2px 0px #cc9e14;
	-webkit-box-shadow:inset 1px 1px 2px 0px #cc9e14;
	box-shadow:inset 1px 1px 2px 0px #cc9e14;
	background-color:#eae0c2;
	-moz-border-radius:11px;
	-webkit-border-radius:11px;
	border-radius:11px;
	border:2px solid #b0a07b;
	display:inline-block;
	cursor:pointer;
	color:#505739;
	font-family:Arial;
	font-size:12px;
	padding:7px 18px;
	text-decoration:none;
	text-shadow:0px 1px 2px #ffffff;
	margin-top:0;
}
.myButton:hover {
	background-color:#ccc2a6;
}
.myButton:active {
	position:relative;
	top:1px;
}

#ballMenuContainer {
	position: absolute;
	right: 10%;
}


@-webkit-keyframes pulse {
    0% {
      -webkit-transform: scale(1) rotate(0deg); 
    }
    50% {
      -webkit-transform: scale(1.1) rotate(-5deg); 
    }
    100% {
      -webkit-transform: scale(1) rotate(0deg); 
    }
}
@-o-keyframes pulse {
    0% {
      -o-transform: scale(1) rotate(0deg); 
    }
    50% {
      -o-transform: scale(1.1) rotate(-5deg); 
    }
    100% {
      -o-transform: scale(1) rotate(0deg); 
    }
}
@-moz-keyframes pulse {
    0% {
      -moz-transform: scale(1) rotate(0deg); 
    }
    50% {
      -moz-transform: scale(1.1) rotate(-5deg); 
    }
    100% {
      -moz-transform: scale(1) rotate(0deg); 
    }
}
@keyframes pulse {
    0% {
      transform: scale(1) rotate(0deg); 
    }
    50% {
      transform: scale(1.1) rotate(-5deg); 
    }
    100% {
      transform: scale(1) rotate(0deg); 
    }
}

@-webkit-keyframes bump {
  0% {
      top: 0;
  }
  5% {
      top: 3px;
  }
  10% {
      top:0;
  }
  100% {
      top:0;
  }
}
@-o-keyframes bump {
  0% {
      top: 0;
  }
  5% {
      top: 3px;
  }
  10% {
      top:0;
  }
  100% {
      top:0;
  }
}
@-moz-keyframes bump {
  0% {
      top: 0;
  }
  5% {
      top: 3px;
  }
  10% {
      top:0;
  }
  100% {
      top:0;
  }
}
@keyframes bump {
  0% {
      top: 0;
  }
  5% {
      top: 3px;
  }
  10% {
      top:0;
  }
  100% {
      top:0;
  }
}


.menuBall {
	position: relative;
	width: 50px;
	height: 30px;
	display: inline-block;
	margin-right: 5px;
	margin-bottom: 5px;
	margin-left: 5px;
}

.ball {
    position:absolute;
    width:100%;
    height:100%;
    -moz-border-radius: 25%;
    -webkit-border-radius: 25%;
    -o-border-radius: 25%;
    border-radius: 25%;
    border: 1px dashed #fff;
    margin: 10px;
    text-decoration: none;
}
.ball2 {
    position:absolute;
    width:100%;
    height:100%;
    -moz-border-radius: 25%;
    -webkit-border-radius: 25%;
    -o-border-radius: 25%;
    border-radius: 25%;
    border: 2px solid #FF0;
    margin: 10px;
    text-decoration: none;
}

.ball:hover {
    -webkit-animation: pulse 1s ease 0s infinite normal;
    -o-animation: pulse 1s ease 0s infinite normal;
    -moz-animation: pulse 1s ease 0s infinite normal;
    animation: pulse 1s ease 0s infinite normal;
}
.redball {
    background-color: #d90e23;
    -moz-box-shadow: 0 0 0 3px #d90e23, 2px 1px 4px 4px rgba(10,10,0,.5);
    -webkit-box-shadow: 0 0 0 3px #d90e23, 2px 1px 4px 4px rgba(10,10,0,.5);
    -o-box-shadow: 0 0 0 3px #d90e23, 2px 1px 4px 4px rgba(10,10,0,.5);
    box-shadow: 0 0 0 3px #d90e23, 2px 1px 6px 4px rgba(10,10,0,.5);
  
    background-image: -moz-linear-gradient(0deg, rgba(0,0,0,.25) 50%, transparent 10%),-moz-linear-gradient(rgba(0,0,0,.25) 50%, transparent 50%);
    background-image: -webkit-linear-gradient(0deg, rgba(0,0,0,.25) 50%, transparent 10%),-webkit-linear-gradient(rgba(0,0,0,.25) 50%, transparent 50%);
    background-image: -o-linear-gradient(0deg, rgba(0,0,0,.25) 50%, transparent 10%),-o-linear-gradient(rgba(0,0,0,.25) 50%, transparent 50%);
    background-size:10px 10px;
}

.blueball {
    -moz-box-shadow: 0 0 0 3px #d6385b, 2px 1px 4px 4px rgba(10,10,0,.5);
    -webkit-box-shadow: 0 0 0 3px #d6385b, 2px 1px 4px 4px rgba(10,10,0,.5);
    -o-box-shadow: 0 0 0 3px #d6385b, 2px 1px 4px 4px rgba(10,10,0,.5);
    box-shadow: 0 0 0 3px #d6385b, 2px 1px 6px 4px rgba(10,10,0,.5);

    background-image: -webkit-linear-gradient(35deg, #9f2e86 25%, transparent 25%, transparent 75%, #9f2e86 75%, #9f2e86), 
    -webkit-linear-gradient(-35deg, #9f2e86 25%, transparent 25%, transparent 75%, #9f2e86 75%, #9f2e86);
    background-image: -moz-linear-gradient(35deg, #9f2e86 25%, transparent 25%, transparent 75%, #9f2e86 75%, #9f2e86), 
    -moz-linear-gradient(-35deg, #9f2e86 25%, transparent 25%, transparent 75%, #9f2e86 75%, #9f2e86);
    background-size:20px 20px;  
    background-color: #d6385b;
}

.yellowball {
    background-color: #7968a8;
    -moz-box-shadow: 0 0 0 3px #7968a8, 2px 1px 4px 4px rgba(10,10,0,.5);
    -webkit-box-shadow: 0 0 0 3px #7968a8, 2px 1px 4px 4px rgba(10,10,0,.5);
    box-shadow: 0 0 0 3px #7968a8, 2px 1px 6px 4px rgba(10,10,0,.5);
  
    background-image: -webkit-linear-gradient(90deg, transparent 50%, rgba(99,138,190,1) 50%);
    background-image: -moz-linear-gradient(90deg, transparent 50%, rgba(99,138,190,1) 50%);
    background-size: 8px 8px;
}

.greenball {
    -moz-box-shadow: 0 0 0 3px #65b37a, 2px 1px 4px 4px rgba(10,10,0,.5);
    -webkit-box-shadow: 0 0 0 3px #65b37a, 2px 1px 4px 4px rgba(10,10,0,.5);
    box-shadow: 0 0 0 3px #65b37a, 2px 1px 6px 4px rgba(10,10,0,.5);

    background:
        -webkit-radial-gradient(#e8b15e 4px, transparent 6px);
    background:
        -moz-radial-gradient(#e8b15e 4px, transparent 6px);
    background-size: 20px 20px;
  
    background-image: -webkit-radial-gradient(#e8b15e 15%, transparent 16%),
        -webkit-radial-gradient(#e8b15e 15%, transparent 16%);
    background-image: -moz-radial-gradient(#e8b15e 15%, transparent 16%),
        -moz-radial-gradient(#e8b15e 15%, transparent 16%);
    background-color: #65b37a;
    background-size:30px 30px;
    background-position: 0 0, 20px 20px;
}
.blackball {
	-moz-box-shadow: 0 0 0 3px #65b37a, 2px 1px 4px 4px rgba(10,10,0,.5);
	-webkit-box-shadow: 0 0 0 3px #65b37a, 2px 1px 4px 4px rgba(10,10,0,.5);
	box-shadow: 0 0 0 3px #65b37a, 2px 1px 6px 4px rgba(10,10,0,.5);
	background-size: 20px 20px;
	background-color: #FC0;
	background-size: 30px 30px;
	background-position: 0 0, 20px 20px;
}
.menuText {
    font-family: 'IdolwildRegular' , Verdana, Helvetica, Sans-Serif;
    font-size: 12px;
	font-weight:bold;
    color: #ffffff;
    position: relative;
    vertical-align: middle;
    text-align: center;
    top: 0;
	line-height:120%;
}
.menuText2 {
	font-family: 'IdolwildRegular', Verdana, Helvetica, Sans-Serif;
	font-size: 18px;
	font-weight: bold;
	color: #ffffff;
	position: relative;
	vertical-align: top;
	text-align: center;
	text-shadow: 1px 1px 3px rgba(51,51,51,.8);
	top: 3px;
	line-height:120%;
}
#menuBall1 {
  -webkit-animation: bump 6s linear 0s infinite normal;
}
#menuBall2 {
  -webkit-animation: bump 6s linear .5s infinite normal;
}
#menuBall3 {
  -webkit-animation: bump 6s linear 1s infinite normal;
}
#menuBall4 {
  -webkit-animation: bump 6s linear 1.5s infinite normal;
}

#menuBall1 {
  -moz-animation: bump 6s linear 0s infinite normal;
}
#menuBall2 {
  -moz-animation: bump 6s linear .5s infinite normal;
}
#menuBall3 {
  -moz-animation: bump 6s linear 1s infinite normal;
}
#menuBall4 {
  -moz-animation: bump 6s linear 1.5s infinite normal;
}

#menuBall1 {
  -o-animation: bump 6s linear 0s infinite normal;
}
#menuBall2 {
  -o-animation: bump 6s linear .5s infinite normal;
}
#menuBall3 {
  -o-animation: bump 6s linear 1s infinite normal;
}
#menuBall4 {
  -o-animation: bump 6s linear 1.5s infinite normal;
}

#menuBall1 {
  animation: bump 6s linear 0s infinite normal;
}
#menuBall2 {
  animation: bump 6s linear .5s infinite normal;
}
#menuBall3 {
  animation: bump 6s linear 1s infinite normal;
}
#menuBall4 {
  animation: bump 6s linear 1.5s infinite normal;
}
#menuBallr1{
  -webkit-animation: bump 6s linear 1s infinite normal;
  -o-animation: bump 6s linear 1s infinite normal;
  -moz-animation: bump 6s linear 1s infinite normal;
       animation: bump 6s linear 1s infinite normal;

}
#menuBallr2 {
  animation: bump 6s linear 1.5s infinite normal;
}

div#partyInfo {
    position: absolute;
    bottom: 30%;
    top: 30%;
    left: 20%;
    right: 20%;
    margin: 5px;
    padding: 8px;
    z-index: 2000;
    text-shadow: -1px -1px #65b37a;
    font-family: 'IdolwildRegular' , Verdana, Helvetica, Sans-Serif;
    font-size: 2.5em;
    color: #FFFFFF;
    border-radius: 10px;
    border: 2px dashed #fff;
    background-color: #d90e23;
    -moz-box-shadow: 0 0 0 3px #d90e23, 2px 1px 4px 4px rgba(10,10,0,.5);
    -webkit-box-shadow: 0 0 0 3px #d90e23, 2px 1px 4px 4px rgba(10,10,0,.5);
    -o-box-shadow: 0 0 0 3px #d90e23, 2px 1px 4px 4px rgba(10,10,0,.5);
    box-shadow: 0 0 0 3px #d90e23, 2px 1px 6px 4px rgba(10,10,0,.5);
}

#darkMe {
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width: 100%;
    background: rgba(0,0,0,0.65);
    z-index: 1000;
    -webkit-filter: blur(3px);
}

#darkMe.hideMe, #partyInfo.hideMe {
    visibility: hidden;
}

#darkMe.showMe, #partyInfo.showMe{
    visibility:visible;
}
#only_here {
	height: auto;
	width: 95%;
	margin-right: auto;
	margin-left: auto;
	border-top-width: 3px;
	border-right-width: 3px;
	border-bottom-width: 3px;
	border-left-width: 3px;
	border-top-style: groove;
	border-right-style: inset;
	border-bottom-style: inset;
	border-left-style: groove;
	border-top-color: #787878;
	border-right-color: #999999;
	border-bottom-color: #999999;
	border-left-color: #787878;
	background-color: #000;
}
/*timer*/
.button-container {
	border: 3px solid #9B9B9B;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	position: relative;
	cursor: pointer;
	margin-top: 2px;
	margin-right: auto;
	margin-left: auto;
	box-shadow: inset 1px 1px 1px 1px rgba(153,153,153,.7), 1px 1px #999;
	background-color: rgba(93,93,93,1);
}
button {
	cursor: pointer;
	background-color: red;
	text-align: center;
	display: block;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	box-shadow: 1px 1px 3px rgba(153,0,0,.7);
	margin-top: 5px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
button, button:focus {
  border:none;
  outline:none;
}
.square {
  width: 20px;
  height: 20px;
  margin: 5px auto 0 auto;
  border-radius: 5px;
}
#timeroutput {
	opacity: 0;
	color: #FFFFFF;
	font-size: 16px;
	margin-left: 50px;
	margin-top: -120px;
}
.show {
    margin-top: 0 !important;
    opacity: 1 !important;
}
/* 上に戻るボタン */
.pagetop {
	color: #fff;
	background-color: rgba(0,0,0,0.3);
	text-decoration: none;
	position: fixed;
	bottom: 1rem;
	right:10rem;
	font-size: 1.5rem;
	width: 3.3rem;
	height: 3.3rem;
	line-height: 3.3rem;
	border-radius: 3.3rem;
	text-align: center;
	cursor: pointer;
}

.pagetop:hover {
	color: #fff;
	background-color: #ed702b;
	text-decoration: none;
}