@import url(http://fonts.googleapis.com/css?family=Chango);
	     


/* 左に来る数値の枠 */     
div#wrapper2 { 
   position: relative; 
    width:1300px; 
    height: 900px;  
    background: #FFFFCC;  
    border: 5px solid #069;  
  
    margin-top: 50px;
  margin-left: 5px;  
    	
top: 0px;
/* bottom:150pxは下からの配置位置を指定する*/ 
left: 0px;
/* right:150pxは下からの配置位置を指定する*/
}   


.absolute-1    {  
    position: absolute;  
    margin-top:150px;/* ボックスの上の余白のサイズ指定 */
margin-left: 10px;/* ボックスの上の余白のサイズ指定 */
}  


.absolute-2    {  
    position: absolute;  
    margin-top:150px;/* ボックスの上の余白のサイズ指定 */
      margin-left: 820px;/* ボックスの上の余白のサイズ指定 */
}  


/* #はidの指定idを指定するときは#を付けるルール */ 
#canvas3{ 
	border:1px solid black;
border-radius: 20px;
width:400px; 

background-color:white;

}

/* 画面①の記述 */ 
/* #はidの指定idを指定するときは#を付けるルール */ 
#canvas2{ 
	border:3px solid black;
border-radius: 20px;
width:900px; 
height: 360px;
background-color:white;
/* 
static
特に配置方法を指定しません。この値のときには、top、bottom、left、rightは適用されません。これが初期値です。
relative
相対位置への配置となります。positionプロパティでstaticを指定した場合に表示される位置が基準位置となります。
absolute
絶対位置への配置となります。親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。親ボックスにpositionプロパティのstatic以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります。
fixed
絶対位置への配置となるのはabsoluteと同じですが、スクロールしても位置が固定されたままとなります。
*/
	

}


body { font-family: "Rounded Mplus 1c"; 
              
		background-color:#edede3;
		  
}
/* 左の数値枠 */
.com{ font-family: "Rounded Mplus 1c"; 
    position: absolute; 
    border:3px solid black;
  width:1200px; 
  height: 85px; 
    top:70px;
  margin-top: 0px;/* ボックスの上の余白のサイズ指定 */
    margin-left: 10px;/* ボックスの上の余白のサイズ指定 */
  margin-bottom: 0px;/* ボックスの上の余白のサイズ指定 */
   padding-left:10px;/*autoは右と左の余白を均等にしてくれる*/
	     margin-right:auto;/*autoは右と左の余白を均等にしてくれる*/
    
}


.com2{ font-family: "Rounded Mplus 1c"; 
  
    position: absolute; 
    border:3px solid black;
  width:400px; 
  height: 400px; 
    top:210px;
  margin-top: 0px;/* ボックスの上の余白のサイズ指定 */
    margin-left: 810px;/* ボックスの上の余白のサイズ指定 */
  margin-bottom: 0px;/* ボックスの上の余白のサイズ指定 */
   padding-left:10px;/*autoは右と左の余白を均等にしてくれる*/
	     margin-right:auto;/*autoは右と左の余白を均等にしてくれる*/
    
}


h2{
	font-family: "Rounded Mplus 1c";
	font-size : 38px;
  margin-top: 0;/* ボックスの上の余白のサイズ指定 */
    margin-bottom: 0;
}

h3{
	font-family: "Rounded Mplus 1c";
	font-size : 25px;
  margin-top: 30px;/* ボックスの上の余白のサイズ指定 */
  margin-bottom: 0;
    
    
}



.botton1 {
  position: absolute;  
  border-radius: 50px;
  top:0;
    
    margin-top:545px;/* ボックスの上の余白のサイズ指定 */
  margin-left: 60px;/* ボックスの上の余白のサイズ指定 */
    padding-top:0;
    font-family: 'Caesar Dressing', cursive;;
font-size : 35px;
width:500px;
height: 40px; 
color : #FFFFCC;

    
background-image:-webkit-gradient(/*古いIOS Android3対応*/
	    linear,
	    left top, left bottom,
	    from(#CCFFFF),
	    to(#003300));

background-image:-webkit-linear-gradient(/*IOS Android Safari対応*/
	    top,
	    #CCFFFF 0%,
	    #003300 100%);

background-image:linear-gradient(/*linear-gradientはグラデーション指定*/
	    to bottom,/*上から下へグラーデーション、to topでは下から上になる*/
	    #CCFFFF 0%,/*グラデーションの下の部分を0%で色を薄く*/
	    #006699 50%,/*グラデーションの真ん中を白くする*/
	    #003300 100%);/*グラデーションの下の部分を100%で色を濃く*/

}

.botton2 {
  position: absolute;  
  border-radius: 50px;
  top:0px;
    
    margin-top:745px;/* ボックスの上の余白のサイズ指定 */
  margin-left: 1000px;/* ボックスの上の余白のサイズ指定 */
    padding-top:0;
    font-family: 'Caesar Dressing', cursive;;
font-size : 35px;
width:200px;
height: 100px; 
color : #FFFFCC;

    
background-image:-webkit-gradient(/*古いIOS Android3対応*/
	    linear,
	    left top, left bottom,
	    from(#FFCCCC),
	    to(#FF3366));

background-image:-webkit-linear-gradient(/*IOS Android Safari対応*/
	    top,
	    #FFCCCC 0%,
	    #FF3366 100%);

background-image:linear-gradient(/*linear-gradientはグラデーション指定*/
	    to bottom,/*上から下へグラーデーション、to topでは下から上になる*/
	    #FFCCCC 0%,/*グラデーションの下の部分を0%で色を薄く*/
	    #FF3399 50%,/*グラデーションの真ん中を白くする*/
	    #FF3366 100%);/*グラデーションの下の部分を100%で色を濃く*/

}


.botton3 {
  position: absolute;  
  border-radius: 100px;
  top:0px;
    
    margin-top:0px;/* ボックスの上の余白のサイズ指定 */
  margin-left: 850px;/* ボックスの上の余白のサイズ指定 */
    padding-top:0;
    font-family: 'Caesar Dressing', cursive;;
font-size : 20px;
width:55px;
height: 55px; 
color : #FFFFCC;

    
background-image:-webkit-gradient(/*古いIOS Android3対応*/
	    linear,
	    left top, left bottom,
	    from(#C0C0C0),
	    to(#000000));

background-image:-webkit-linear-gradient(/*IOS Android Safari対応*/
	    top,
	    #C0C0C0 0%,
	    #000000 100%);

background-image:linear-gradient(/*linear-gradientはグラデーション指定*/
	    to bottom,/*上から下へグラーデーション、to topでは下から上になる*/
	    #C0C0C0 0%,/*グラデーションの下の部分を0%で色を薄く*/
	    #000000 50%,/*グラデーションの真ん中を白くする*/
	    #000000 100%);/*グラデーションの下の部分を100%で色を濃く*/

}


.botton4 {
  position: absolute;  
  border-radius: 100px;
  top:0px;
    
    margin-top:0px;/* ボックスの上の余白のサイズ指定 */
  margin-left: 400px;/* ボックスの上の余白のサイズ指定 */
    padding-top:0;
    font-family: 'Caesar Dressing', cursive;;
font-size : 15px;
font-weight: 900; 
width:130px;
height: 35px; 
color : black;

    
background-image:-webkit-gradient(/*古いIOS Android3対応*/
	    linear,
	    left top, left bottom,
	    from(#B6FF01),
	    to(#228B22));

background-image:-webkit-linear-gradient(/*IOS Android Safari対応*/
	    top,
	    #B6FF01 0%,
	    #228B22 100%);

background-image:linear-gradient(/*linear-gradientはグラデーション指定*/
	    to bottom,/*上から下へグラーデーション、to topでは下から上になる*/
	    #B6FF01 0%,/*グラデーションの下の部分を0%で色を薄く*/
	    #B6FF01 50%,/*グラデーションの真ん中を白くする*/
	    #228B22 100%);/*グラデーションの下の部分を100%で色を濃く*/

}


.botton5 {
  position: absolute;  
  border-radius: 100px;
  top:0px;
    
    margin-top:0px;/* ボックスの上の余白のサイズ指定 */
  margin-left: 550px;/* ボックスの上の余白のサイズ指定 */
    padding-top:0;
    font-family: 'Caesar Dressing', cursive;;
font-size : 15px;
font-weight:900;
width:130px;
height: 35px; 
color : black;

    
background-image:-webkit-gradient(/*古いIOS Android3対応*/
	    linear,
	    left top, left bottom,
	    from(#FF6699),
	    to(#FF3333));

background-image:-webkit-linear-gradient(/*IOS Android Safari対応*/
	    top,
	    #FF6699 0%,
	    #FF3333 100%);

background-image:linear-gradient(/*linear-gradientはグラデーション指定*/
	    to bottom,/*上から下へグラーデーション、to topでは下から上になる*/
	    #FF6699 0%,/*グラデーションの下の部分を0%で色を薄く*/
	    #FF3333 50%,/*グラデーションの真ん中を白くする*/
	    #FF3333 100%);/*グラデーションの下の部分を100%で色を濃く*/

}



.botton6 {
  position: absolute;  
  border-radius: 100px;
  top:0px;
    
    margin-top:170px;/* ボックスの上の余白のサイズ指定 */
  margin-left: 700px;/* ボックスの上の余白のサイズ指定 */
    padding-top:0;
    font-family: 'Caesar Dressing', cursive;;
font-size : 15px;
font-weight:900;
width:130px;
height: 35px; 
color : black;

    
background-image:-webkit-gradient(/*古いIOS Android3対応*/
	    linear,
	    left top, left bottom,
	    from(#DDDDDD),
	    to(#888888));

background-image:-webkit-linear-gradient(/*IOS Android Safari対応*/
	    top,
	    #DDDDDD 0%,
	    #888888 100%);

background-image:linear-gradient(/*linear-gradientはグラデーション指定*/
	    to bottom,/*上から下へグラーデーション、to topでは下から上になる*/
	    #DDDDDD 0%,/*グラデーションの下の部分を0%で色を薄く*/
	    #888888 50%,/*グラデーションの真ん中を白くする*/
	    #888888 100%);/*グラデーションの下の部分を100%で色を濃く*/

}


.botton9 {
  position: absolute;  
  border-radius: 100px;
  top:0px;
    
    margin-top:520px;/* ボックスの上の余白のサイズ指定 */
  margin-left: 10px;/* ボックスの上の余白のサイズ指定 */
    padding-top:0;
    font-family: 'Caesar Dressing', cursive;;
font-size : 30px;
font-weight: bold; 
width:85px;
height: 85px; 
color : black;

    
background-image:-webkit-gradient(/*古いIOS Android3対応*/
	    linear,
	    left top, left bottom,
	    from(#FFCCCC),
	    to(#66CCFF));

background-image:-webkit-linear-gradient(/*IOS Android Safari対応*/
	    top,
	    #FFCCCC 0%,
	    #66CCFF 100%);

background-image:linear-gradient(/*linear-gradientはグラデーション指定*/
	    to bottom,/*上から下へグラーデーション、to topでは下から上になる*/
	    #FFCCCC 0%,/*グラデーションの下の部分を0%で色を薄く*/
	    #66CCFF 50%,/*グラデーションの真ん中を白くする*/
	    #66CCFF 100%);/*グラデーションの下の部分を100%で色を濃く*/


}


.botton10 {
  position: absolute;  
  border-radius: 100px;
  top:0px;
    
    margin-top:520px;/* ボックスの上の余白のサイズ指定 */
  margin-left: 110px;/* ボックスの上の余白のサイズ指定 */
    padding-top:0;
    font-family: 'Caesar Dressing', cursive;;
font-size : 30px;
font-weight: bold; 
width:85px;
height: 85px; 
color : black;

    
background-image:-webkit-gradient(/*古いIOS Android3対応*/
	    linear,
	    left top, left bottom,
	    from(#1BFF4A),
	    to(#E6FFE9));

background-image:-webkit-linear-gradient(/*IOS Android Safari対応*/
	    top,
	    #1BFF4A 0%,
	    #E6FFE9 100%);

background-image:linear-gradient(/*linear-gradientはグラデーション指定*/
	    to bottom,/*上から下へグラーデーション、to topでは下から上になる*/
	    #1BFF4A 0%,/*グラデーションの下の部分を0%で色を薄く*/
	    #1BFF4A 50%,/*グラデーションの真ん中を白くする*/
	    #E6FFE9 100%);/*グラデーションの下の部分を100%で色を濃く*/


}



.botton11 {
  position: absolute;  
  border-radius: 100px;
  top:0px;
    
    margin-top:520px;/* ボックスの上の余白のサイズ指定 */
  margin-left: 210px;/* ボックスの上の余白のサイズ指定 */
    padding-top:0;
    font-family: 'Caesar Dressing', cursive;;
font-size : 30px;
font-weight: bold; 
width:85px;
height: 85px; 
color : black;

    
background-image:-webkit-gradient(/*古いIOS Android3対応*/
	    linear,
	    left top, left bottom,
	    from(#FFCCCC),
	    to(#66CCFF));

background-image:-webkit-linear-gradient(/*IOS Android Safari対応*/
	    top,
	    #FFCCCC 0%,
	    #66CCFF 100%);

background-image:linear-gradient(/*linear-gradientはグラデーション指定*/
	    to bottom,/*上から下へグラーデーション、to topでは下から上になる*/
	    #FFCCCC 0%,/*グラデーションの下の部分を0%で色を薄く*/
	    #66CCFF 50%,/*グラデーションの真ん中を白くする*/
	    #66CCFF 100%);/*グラデーションの下の部分を100%で色を濃く*/

}



.botton12 {
  position: absolute;  
border-radius: 20px;
border-radius: 20px;
  top:0px;
    
    margin-top:520px;/* ボックスの上の余白のサイズ指定 */
  margin-left: 610px;/* ボックスの上の余白のサイズ指定 */
    padding-top:0;
    font-family: 'Rounded Mplus 1c', cursive;;
font-size : 30px;
font-weight: bold; 
width:150px;
height: 85px; 
color : black;

    
background-image:-webkit-gradient(/*古いIOS Android3対応*/
	    linear,
	    left top, left bottom,
	    from(#1BFF4A),
	    to(#E6FFE9));

background-image:-webkit-linear-gradient(/*IOS Android Safari対応*/
	    top,
	    #1BFF4A 0%,
	    #E6FFE9 100%);

background-image:linear-gradient(/*linear-gradientはグラデーション指定*/
	    to bottom,/*上から下へグラーデーション、to topでは下から上になる*/
	    #1BFF4A 0%,/*グラデーションの下の部分を0%で色を薄く*/
	    #1BFF4A 50%,/*グラデーションの真ん中を白くする*/
	    #E6FFE9 100%);/*グラデーションの下の部分を100%で色を濃く*/


}



html {
    font-size:75%;
}

[type="range"] {
    -webkit-appearance:none;
/*スライダーの黒い幅を変える*/
cursor:pointer;
position:relative;
    width:400px;
    vertical-align:middle;

    background-color:rgba(255, 255, 255, 1.0);

   -webkit-box-shadow:0px 1px 3px rgba(0, 0, 0, 0.2) inset;
       -moz-box-shadow:0px 1px 3px rgba(0, 0, 0, 0.2) inset;
                  box-shadow:0px 1px 3px rgba(0, 0, 0, 0.2) inset;

    -webkit-border-radius:24px;
         -moz-border-radius:24px;
                   border-radius:24px;
}
/*つまみの形状*/
[type="range"]::-webkit-slider-thumb {
    -webkit-appearance:none;

    cursor:pointer;

    position:relative;
    z-index:5;

    border:none;
    width:50px;
    height:50px;

     background-color:rgba(255, 160, 225, 1.0);

    -webkit-border-radius:20px;
         -moz-border-radius:20px;
                    border-radius:20px;
}

[type="range"]:focus,
[type="range"]:focus::-webkit-slider-thumb,
[type="range"]:active,
[type="range"]:active::-webkit-slider-thumb {
    cursor:ew-resize;
    outline:none;
}

[type="range"]:active::-webkit-slider-thumb {
    background-color:rgba(255, 20, 147, 1.0);
}


[type="text"] {
    -webkit-appearance:none;
/*スライダーの黒い幅を変える*/
    cursor:pointer;
		width:100px;
		height: 50px;
		  font-size : 55px;
    vertical-align:middle;

    background-color:rgba(255, 255, 255, 1.0);

   -webkit-box-shadow:0px 1px 3px rgba(0, 0, 0, 0.2) inset;
       -moz-box-shadow:0px 1px 3px rgba(0, 0, 0, 0.2) inset;
                  box-shadow:0px 1px 3px rgba(0, 0, 0, 0.2) inset;

    -webkit-border-radius:24px;
         -moz-border-radius:24px;
                   border-radius:24px;
}


.box13 {
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #FFF;
    background: #6eb7ff;
    border-bottom: solid 6px #3f87ce;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
    border-radius: 9px;
}
.box13 p {
    margin: 0; 
    padding: 0;
}


.botton13 {
  position: absolute;  
 top:120px;
    
    margin-top:25px;/* ボックスの上の余白のサイズ指定 */
  margin-left: 200px;/* ボックスの上の余白のサイズ指定 */
    padding-top:0;
    font-family: 'Rounded Mplus 1c', cursive;;
font-size : 30px;
font-weight: bold; 
width:150px;
height: 85px; 

 
    color: #FFF;
    background: #6eb7ff;
    border-bottom: solid 6px #3f87ce;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 1);
    border-radius: 9px;

}


.botton14 { /* マイナス10HZの方のボタン */
  position: absolute;  
 top:120px;
    
    margin-top:25px;/* ボックスの上の余白のサイズ指定 */
  margin-left:20px;/* ボックスの上の余白のサイズ指定 */
    margin-bottom:10px;/* ボックスの上の余白のサイズ指定 */
    padding-top:0;
    font-family: 'Rounded Mplus 1c', cursive;;
font-size : 30px;
font-weight: bold; 
width:150px;
height: 85px; 

 
    color: #FFF;
    background: #FF99CC;
    border-bottom: solid 6px #FF6699;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 1);
    border-radius: 9px;

}

.waku1{ 
  position: absolute; 
    top:0px;
    
  margin-top:520px;/* ボックスの上の余白のサイズ指定 */
    margin-left:500px;/* ボックスの上の余白のサイズ指定 */
   background: white;
    
    border:3px solid black;
  width:380px; 
  height: 250px; 
    
    
}


.waku2{ 
  position: absolute; 
    top:0px;
    
  margin-top:520px;/* ボックスの上の余白のサイズ指定 */
    margin-left:50px;/* ボックスの上の余白のサイズ指定 */
   background: white;
    
    border:3px solid black;
  width:380px; 
  height: 250px; 
    
    
}



.botton15 {
  position: absolute;  
 top:0px;
    
    margin-top:50px;/* ボックスの上の余白のサイズ指定 */
  margin-left: 200px;/* ボックスの上の余白のサイズ指定 */
    padding-top:0;
    font-family: 'Rounded Mplus 1c', cursive;;
font-size : 30px;
font-weight: bold; 
width:150px;
height: 85px; 

 
    color: black;
    background: #FFFF22;
    border-bottom: solid 6px #FFD700;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 1);
    border-radius: 3px;

}


.botton16 { /* マイナス10HZの方のボタン */
  position: absolute;  
 top:0px;
    
    margin-top:50px;/* ボックスの上の余白のサイズ指定 */
  margin-left:20px;/* ボックスの上の余白のサイズ指定 */
    margin-bottom:10px;/* ボックスの上の余白のサイズ指定 */
    padding-top:0;
    font-family: 'Rounded Mplus 1c', cursive;;
font-size : 30px;
font-weight: bold; 
width:150px;
height: 85px; 

 
    color: black;
    background: #99FFFF;
    border-bottom: solid 6px #3399FF;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 1);
    border-radius: 0px;

}



.botton17 { /* 音楽再生ボタン 世界のおわり*/
  position: absolute; 
   border-radius: 0px; 
 top:0px;
    
    margin-top:370px;/* ボックスの上の余白のサイズ指定 */
  margin-left:950px;/* ボックスの上の余白のサイズ指定 */
    margin-bottom:10px;/* ボックスの上の余白のサイズ指定 */
    padding-top:0;
    font-family: 'Rounded Mplus 1c', cursive;;
font-size : 30px;
font-weight: bold; 
width:300px;
height: 100px; 

 
    color: black;
    background: #99FFFF;
    border-bottom: solid 6px #3399FF;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 1);
    

}


.botton18 { /* RESET再生ボタン */
  position: absolute;  
 top:0px;
    
    margin-top:150px;/* ボックスの上の余白のサイズ指定 */
  margin-left:950px;/* ボックスの上の余白のサイズ指定 */
    margin-bottom:10px;/* ボックスの上の余白のサイズ指定 */
    padding-top:0;
    font-family: 'Rounded Mplus 1c', cursive;;
font-size : 30px;
font-weight: bold; 
width:300px;
height: 150px; 

 
    color: black;
    background: #99FFFF;
    border-bottom: solid 6px #3399FF;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 1);
    border-radius: 0px;

}



.botton19 { /* 音楽再生ボタン カントリーロード*/
  position: absolute; 
   border-radius: 0px; 
 top:0px;
    
    margin-top:230px;/* ボックスの上の余白のサイズ指定 */
  margin-left:950px;/* ボックスの上の余白のサイズ指定 */
    margin-bottom:10px;/* ボックスの上の余白のサイズ指定 */
    padding-top:0;
    font-family: 'Rounded Mplus 1c', cursive;;
font-size : 30px;
font-weight: bold; 
width:300px;
height: 100px; 

 
    color: black;
    background: #FFCC33;
    border-bottom: solid 6px #FF9900;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 1);
    

}


.botton20 { /* 音楽再生ボタン カントリーロード*/
  position: absolute; 
   border-radius: 0px; 
 top:0px;
    
    margin-top:500px;/* ボックスの上の余白のサイズ指定 */
  margin-left:950px;/* ボックスの上の余白のサイズ指定 */
    margin-bottom:10px;/* ボックスの上の余白のサイズ指定 */
    padding-top:0;
    font-family: 'Rounded Mplus 1c', cursive;;
font-size : 30px;
font-weight: bold; 
width:300px;
height: 100px; 

 
    color: black;
    background: #66FF33;
    border-bottom: solid 6px #FF9900;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 1);
    

}


.botton21 { /* 音楽再生ボタン カントリーロード*/
  position: absolute; 
   border-radius: 0px; 
 top:0px;
    
    margin-top:630px;/* ボックスの上の余白のサイズ指定 */
  margin-left:950px;/* ボックスの上の余白のサイズ指定 */
    margin-bottom:10px;/* ボックスの上の余白のサイズ指定 */
    padding-top:0;
    font-family: 'Rounded Mplus 1c', cursive;;
font-size : 30px;
font-weight: bold; 
width:300px;
height: 100px; 

 
    color: black;
    background: #33FFFF;
    border-bottom: solid 6px #33FFFF;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 1);
    

}