body{
}

#header{
background: -webkit-gradient(linear, left top, right bottom, from(#0066ff), to(#00ccff));
background: -moz-linear-gradient(left,  #0066ff,  #00ccff);
filter: progid:  
DXImageTransform.Microsoft.gradient(  
startColorstr='#0066ff', endColorstr='#00ccff', GradientType=1);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#0066ff', endColorstr='#00ccff', GradientType=0)";
background: -ms-linear-gradient(left,  #0066ff,  #00ccff);
}


#wrapper{
width:90%;
margin:0 auto;
max-width:1260px;
min-width:780px;
border-right: 2px solid #ddd;
border-left: 2px solid #ddd;

}
#koukoku{
padding-top:100px;
float:left;
}

img#k{
border: none;
width:80px;
height:30px;
padding-top:25px;
padding-left:25px;
}

#contents{
overflow:hidden;
padding:20px 0;
}


#navi{
width:25%;
float:left;
list-style: none; 
}

#navi ul{ 
margin: 0; 
padding: 0; 
list-style-type: none; 
}
#navi li{ 
display: inline; 
padding: 0; 
margin: 0; 
}

#navi li a{
display: block; 
border-left: 16px solid #474655;
border-top: 1px solid #474655;
border-right: 1px solid #474655;
border-bottom: 1px solid #474655;
background-color: #fff;
padding: 3px 10px;
text-decoration: none;
color: #333;
width: 80%; 
margin: 1px 0px;
text-align: left;
font-size: 24px;
}
#navi li a:hover{
border-left: 8px solid #474655;
border-top: 1px solid #474655;
border-right: 1px solid #474655;
border-bottom: 1px solid #474655;
background-color: #d7efd7;
}


#main{
width:75%;
float:left;

}
img{
display: block;
width:600px;
height:450px;
margin-right:auto;
margin-left:auto;
}

img.top{
width:400px;
height:60px;
margin-right:auto;
margin-left:auto;
margin-top:50px;
margin-bottom:50px
}
p{
font-size:20px;
padding-left:3%;
color:black;
font-weight:bold;
}

p#top{
font-size:32px;
color:lime;
}
p#s{
font-size:16px;
font-weight:normal;
}

span#l{
padding-left:7%;
}
span#c{
padding-left:32%;
}

span#r{
padding-left:50%;
}
span#b{
color:blue;
font-weight:bold;
}


h1#top{
font-family: "ＭＳ Ｐゴシック","ＭＳ ゴシック",sans-serif;
font-size:26pt;
color:#118011;
}
h3{
padding-left:5%;
color:#333333;
}
h4{
padding-left:8%;
font-size:14px;
color:#333333;
font-weight:normal;
}


.centerdiv{ /*IE method of centering a relative div*/
text-align: center;
}
.centerdiv>div{ /*Proper way to center a relative div*/
margin: 0 auto;
}

#footer{
text-align:right;
font-size: 16px;
background-color:#c0c0c0;
}

//mail form
form {
  /* Just to center the form on the page */
  margin: 0 auto;
  width: 400px;

  /* To see the limits of the form */
  padding: 1em;
  border: 1px solid #CCC;
  border-radius: 1em;
}

div + div {
  margin-top: 1em;
}

label {
  /* To make sure that all label have the same size and are properly align */
  display: inline-block;
  width: 90px;
  text-align: right;
}

input, textarea {
  /* To make sure that all text field have the same font settings
     By default, textarea are set with a monospace font */
  font: 1em sans-serif;

  /* To give the same size to all text field */
  width: 300px;

  -moz-box-sizing: border-box;
       box-sizing: border-box;

  /* To harmonize the look & feel of text field border */
  border: 1px solid #999;
}

input:focus, textarea:focus {
  /* To give a little highligh on active elements */
  border-color: #000;
}

textarea {
  /* To properly align multiline text field with their label */
  vertical-align: top;

  /* To give enough room to type some text */
  height: 5em;

  /* To allow users to resize any textarea vertically
     It works only on Chrome, Firefox and Safari */
  resize: vertical;
}

.button {
  /* To position the buttons to the same position of the text fields */
  padding-left: 90px; /* same size as the label elements */
}

button {
  /* This extra magin represent the same space as the space between
     the labels and their text fields */
  margin-left: .5em;
}