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


/* 左に来る数値の枠 */     
div#wrapper2 { 
   position: relative; 
    width:1300px; 
    height: 700px;  
    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: 0px;/* ボックスの上の余白のサイズ指定 */
}  


.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:1200px; 
height: 400px;
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:900px; 
  height: 120px; 
    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: 5px;
  top:0;
    
    margin-top:0px;/* ボックスの上の余白のサイズ指定 */
  margin-left: 50px;/* ボックスの上の余白のサイズ指定 */
    padding-top:0;
    font-family: 'Caesar Dressing', cursive;;
font-size : 20px;
width:200px;
height: 28px; 
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: 5px;
  top:0px;
    
    margin-top:0px;/* ボックスの上の余白のサイズ指定 */
  margin-left: 350px;/* ボックスの上の余白のサイズ指定 */
    padding-top:0;
    font-family: 'Caesar Dressing', cursive;;
font-size : 20px;
width:200px;
height: 28px; 
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: 700px;/* ボックスの上の余白のサイズ指定 */
    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:170px;/* ボックスの上の余白のサイズ指定 */
  margin-left: 0px;/* ボックスの上の余白のサイズ指定 */
    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:230px;/* ボックスの上の余白のサイズ指定 */
  margin-left: 0px;/* ボックスの上の余白のサイズ指定 */
    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:290px;/* ボックスの上の余白のサイズ指定 */
  margin-left: 0px;/* ボックスの上の余白のサイズ指定 */
    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%で色を濃く*/

}



html {
    font-size:75%;
}

[type="range"] {
    -webkit-appearance:none;
/*スライダーの黒い幅を変える*/
cursor:pointer;
position:relative;
    width:200px;
    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:30px;
    height:30px;

     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:50px;
    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;
}

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

    

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

    

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

    

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

    

}
.p{
	top:0px;
	left:300px
		  
	      }