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

	/* 全体の外枠をつくる*/
div#waku{
  width:1100px;
  height:800px;
  background: #FFFFCC;
  border: 5px solid #069; 
  margin-top: 50px;
  margin-left:5px;
}


/* canvasの枠をつくる*/
div#canvaswaku{
  width:1000px;
  height:700px;
  margin: 20px;
  border: solid 5px #aac5de;
  border-bottom: solid 5px #5989cf;
  border-radius: 9px;
  padding:0px;
  background: white;
  
}



body { font-family: "Rounded Mplus 1c"; 
              
		background-color:#edede3;
		  
}

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;
    
    
}


/* ボタンの枠をつくる*/
.buttonwaku{
  width:155px;
  height:460px;
  margin: 5px;
  border: inset 10px #ff0000;
  padding:5px;
  background: white;
    float : right;
  
}
	


/* rangeの枠をつくる*/
.rangewaku{
  width:960px;
  height:150px;
  margin: 5px;
  border: inset 10px #FFFFCC;
  padding:5px;
  background: #FFFFDD;
    float : left;
  
}
/* 文字色指定 */

.c1-ex1 { 
    margin:0px;
  font-family: "Rounded Mplus 1c";
  font-size : 25px;
  color : #6666FF;

} 
.c1-ex2 { 
    margin:0px;
  font-family: "Rounded Mplus 1c";
  font-size : 25px;
  color : black;

} 


/* キャンバスフレーム領域内に文字列をつくる */
div#canvaswaku div.moji{
	height : 40px ;
	position : absolute ;
	top:200px; 
	left:350px;
	
	background-color: rgba(0,255,255,0.3);
}

.botton1 {
    
  border-radius: 5px;
  margin:0px;/* ボックスの上の余白のサイズ指定 */
  font-family: 'Caesar Dressing', cursive;;
  font-size : 20px;
  width:150px;
  height: 70px; 
  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 {
  
  border-radius: 5px;
  font-family: 'Caesar Dressing', cursive;;
  font-size : 20px;
  width:70px;
  height: 70px; 
  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 {
  
  border-radius: 100px;
  font-family: 'Caesar Dressing', cursive;;
  font-size : 20px;
  width:60px;
  height: 60px; 
  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 {  
  border-radius: 100px;
  font-family: 'Caesar Dressing', cursive;;
  font-size : 15px;
  font-weight: 900; 
  width:150px;
  height: 40px; 
  color : black;  
background-image:-webkit-gradient(/*古いIOS Android3対応*/
	    linear,
	    left top, left bottom,
	    from(#B6FF01),
	    to(#FFFF00));

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

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

}

/*　文字ごとボタン*/
.square_btn1{
    text-decoration: none;
    font-weight: bold;
    font-size: 30px;
    color: #799dec;
    text-shadow: 0px 4px 2px rgba(0, 0, 0, 0.32), 0px 1px 0px #6182ca, 0px 2px 0px #4f6aa7, 0px 3px 0px #5470ad;
}
.square_btn1:active {
    top: 4px;
	box-shadow: none;
}


/*　文字ごとボタン*/
.square_btn2{
    text-decoration: none;
    font-weight: bold;
    font-size: 30px;
    color: #A7F1FF;
    text-shadow: 0px 4px 2px rgba(0, 0, 0, 0.32), 0px 1px 0px #6182ca, 0px 2px 0px #4f6aa7, 0px 3px 0px #5470ad;
}
.square_btn2:active {
    top: 4px;
  box-shadow: none;
    color:#ffff00;
}

/*　文字ごとボタン*/
.square_btn3{
    text-decoration: none;
    font-weight: bold;
    font-size: 30px;
    color: #A7F1FF;
    text-shadow: 0px 4px 2px rgba(0, 0, 0, 0.32), 0px 1px 0px #6182ca, 0px 2px 0px #4f6aa7, 0px 3px 0px #5470ad;
}
.square_btn3:active {
    top: 4px;
  box-shadow: none;
    color:#ffff00;
}

/*　文字ごとボタン*/
.square_btn4{
    text-decoration: none;
    font-weight: bold;
    font-size: 30px;
    color: #A7F1FF;
    text-shadow: 0px 4px 2px rgba(0, 0, 0, 0.32), 0px 1px 0px #6182ca, 0px 2px 0px #4f6aa7, 0px 3px 0px #5470ad;
}
.square_btn4:active {
    top: 4px;
  box-shadow: none;
    color:#ffff00;
}


.botton5 {
  
  border-radius: 100px;
  top:0px;
    
    margin-top:690px;/* ボックスの上の余白のサイズ指定 */
  margin-left: 200px;/* ボックスの上の余白のサイズ指定 */
    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(#D7EEFF),
	    to(#00ECFF));

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

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

}



.botton6 {
  position: absolute;  
  border-radius: 100px;
  top:0px;
    
     margin-top:690px;/* ボックスの上の余白のサイズ指定 */
  margin-left: 350px;/* ボックスの上の余白のサイズ指定 */
    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%で色を濃く*/

}



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

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

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

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

}


.botton8 {
  position: absolute;  
  border-radius: 100px;
  top:0px;
    
    margin-top:70px;/* ボックスの上の余白のサイズ指定 */
  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(#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%で色を濃く*/


}


html {
    font-size:75%;
}

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

    background-color:rgba(0, 0, 0, 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: 2px solid #069; 
   color:black;
    width:100px;
    height:30px;

     background-color:#9999FF;

    -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"]:hover::-webkit-slider-thumb {
    background-color:#FF6699;
}


[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;
}