@charset "SHIFT_JIS";

body {
font: 14px Verdana, Geneva, Arial, Helvetica, sans-serif;
/* font: 11px/140% Verdana, Geneva, Arial, Helvetica, sans-serif; */
/* font-family : sans-serif; */
//text-shadow:0 1px 1px #e0e0e0;
}

a {text-decoration:none;}

form {display: inline;}

div#msg {
padding:5px;
//border: solid 1px #ccc;
//width: 290px;
//height: 174px;
font-size: 12px;
color: #000000;
//color: #808080;
}


a:link{color: #666;}
a:visited{color: #666;}
a:hover{color: orange;}
a:active{color: orange;}


div#base {
background: url(./img/base.png);
background-size:cover;
background-repeat:no-repeat;
width: 495px;
height: 180px;
}

div#areaa {
background: url(./img/aBrown.png);
background-size:cover;
background-repeat:no-repeat;
width: 495px;
height: 180px;
}

div#areab {
background: url(./img/bWhite.png);
background-size:cover;
background-repeat:no-repeat;
width: 495px;
height: 180px;
}

div#areac {
background: url(./img/cBlue1.png);
background-size:cover;
background-repeat:no-repeat;
width: 495px;
height: 180px;
}

div#output1{
position: absolute;
font-size: 14px;
font-family: Verdana, Helvetica, sans-serif;
//font-weight: bold;
width: 100px;
padding: 5px;
text-align: center;
color: #cccccc;
//background-color: yellow;
text-shadow: none;

-webkit-transform: translate(-50px,130px) rotate(55deg);
-moz-transform: translate(-50px,130px) rotate(55deg);

-webkit-transform-origin: right bottom;
-moz-transform-origin: right bottom;
}


div#output2{
position: absolute;
font-size: 9px;
font-family: Verdana, Helvetica, sans-serif;
//font-weight: bold;
width: 50px;
padding: 0px;
text-align: center;
color: #cccccc;
//background-color: yellow;
text-shadow: none;

-webkit-transform: translate(355px,90px) rotate(0deg);
-moz-transform: translate(355px,90px) rotate(0deg);

-webkit-transform-origin: right bottom;
-moz-transform-origin: right bottom;
}


div#output3{
position: absolute;
font-size: 14px;
font-family: Verdana, Helvetica, sans-serif;
//font-weight: bold;
width: 100px;
padding: 5px;
text-align: center;
color: #cccccc;
//background-color: yellow;
text-shadow: none;

-webkit-transform: translate(210px,40px) rotate(-55deg);
-moz-transform: translate(210px,40px) rotate(-55deg);

-webkit-transform-origin: right bottom;
-moz-transform-origin: right bottom;
}


div#output4{
position: absolute;
font-size: 9px;
font-family: Verdana, Helvetica, sans-serif;
//font-weight: bold;
width: 50px;
padding: 0px;
text-align: center;
color: #cccccc;
//background-color: yellow;
text-shadow: none;

-webkit-transform: translate(355px,60px) rotate(0deg);
-moz-transform: translate(355px,60px) rotate(0deg);

-webkit-transform-origin: right bottom;
-moz-transform-origin: right bottom;
}


.textarea {
font: 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
border:0;
padding:5px;
//font-family:Arial;
color: #808080;
border:solid 1px #ccc;
margin: 0 0 10px;

-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;

//-moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.2);
//-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.2);
//box-shadow: inner 0 0 4px rgba(0,0,0,0.2);

}

.textarea:hover , focus, active {
border: solid 1px orange;
}




.button {
font: 14px Verdana, Geneva, Arial, Helvetica, sans-serif;
border-top: 1px solid #ccc;  
border-right: 1px solid #999;  
border-bottom: 1px solid #999;  
border-left: 1px solid #ccc;  
padding: 5px 10px;  
margin:0 0 5px;
font-weight: bold;  
cursor: pointer;  
color: #666;  

background: #fff;

//ボックス装飾
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;

//テキスト装飾
text-shadow:0 1px 1px #e0e0e0;
//text-shadow: 0 -1px 1px #FFF, -1px 0 1px #FFF, 1px 0 1px #aaa;  
//-webkit-box-shadow: 1px 1px 2px #E7E7E7;  
//-moz-box-shadow: 1px 1px 2px #E7E7E7;  

//背景色
background: -moz-linear-gradient(top, #fff, #F1F1F1 1%, #F1F1F1 50%, #DFDFDF 99%, #ccc);  
background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(0.01, #F1F1F1), color-stop(0.5, #F1F1F1), color-stop(0.99, #DFDFDF), to(#ccc));  

}


.button:hover , .button.touch{
border-top: 1px solid orange;  
border-right: 1px solid gold;  
border-bottom: 1px solid gold;  
border-left: 1px solid orange;  
background: #fff;
//background: #f5f5f5;
color: #666;
//color: #001231;
//background: -moz-linear-gradient(top, #fff, #e1e1e1 1%, #e1e1e1 50%, #cfcfcf 99%, #ccc);  
//background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(0.01, #e1e1e1), color-stop(0.5, #e1e1e1), color-stop(0.99, #cfcfcf), to(#ccc)); 
}

.button:active {
background: #ccc;  
padding: 4px 9px 4px;  
}