* {
  margin: 0px;
  padding: 0px;
}
html{
  margin: 0px;
  padding: 0px;
  overflow:auto;
}
body{
  background: url(images/top_bg.jpg) repeat-x top;
  background-color: #fffaf6;
  font-family: "メイリオ",osaka,"ＭＳ Ｐゴシック",sans-serif;
  font-size: 90%;
  color: #333;
}
H1{
  margin: 0px 0px 10px 0px;
  font-family: "ヒラギノ明朝 Pro W6","Hiragino Mincho Pro","HGS明朝E","ＭＳ Ｐ明朝",serif;
  font-size: 24px;
  font-weight: bold;
  text-align: left;
  color: #666;
  padding:0px 5px 3px 15px;
  border-color:#997E00;
  border-width:0 0 3px 12px;
  border-style:solid;
  background:#fffaf6;
}
H2{
  font-family: "ヒラギノ明朝 Pro W6","Hiragino Mincho Pro","HGS明朝E","ＭＳ Ｐ明朝",serif;
  border-bottom: #f9e0e0 2px solid;
  border-left: #f9e0e0 0px solid;
  background-color: #ffe9f0;
  margin: 4px 5px 0px 15px;
  color: #666;
  font-size: 22px;
  border-top: #f9e0e0 2px solid;
  font-weight: bold;
  border-right: #f9e0e0 0px solid;
}
H3{
  font-family: "ヒラギノ明朝 Pro W6","Hiragino Mincho Pro","HGS明朝E","ＭＳ Ｐ明朝",serif;
  border-bottom: #b0ffb0 3px solid;
  text-align: left;
  border-left: #b0ffb0 0px solid;
  margin: 4px 5px 0px 15px;
  color: #666;
  font-size: 20px;
  border-top: #b0ffb0 0px solid;
  font-weight: bold;
  border-right: #b0ffb0 0px solid;
}
H4{
  font-family: "ヒラギノ明朝 Pro W6","Hiragino Mincho Pro","HGS明朝E","ＭＳ Ｐ明朝",serif;
  margin: 0px 4%;
  color: #666;
  font-size: 22px;
  font-weight: bold;
}
p{
  line-height:1.5;
  margin: 4px 10px 0px 20px;
}

a:link{
  color:#0066cc;
}
a:visited{
  color:#0066cc;
}

a:hover{
color:#c90;
text-decoration: underline;
}

a{
text-decoration:none;
font-weight : bold;
}
img{
  margin: 2px 10px 0px 0px;
}
#main_content{
  height: 1%;
  margin: 0px 2% 0px 2%;
  background-color:#fffaf6;
}

#topbar {
  background: url(images/logo.jpg);
  background-repeat:no-repeat;
  height: 90px;
  margin: 0px 0px 0px 12px;
  padding: 0;
}
#topbar #sitename {
  color: #EC4900;
  font-family: "ヒラギノ明朝 Pro W6","Hiragino Mincho Pro","HGS明朝E","ＭＳ Ｐ明朝",serif;
  font-size: 26px;
  font-weight : bold;
  margin: 52px 0px 0px 140px;
  padding-left: 8px;
  display: block;
  float: left;
}
#topbar #sitename span {
  color: #000000;
}
#topbar #sitename a {
  color: #E84002;
  text-decoration: none;
}
#topbar #sitename a:visited, active, hover {
  color: #E84002;
  text-decoration: none;
}

img.logo{
  padding-left:16px;
}
#top_menu{
  margin: 0px 4%;
  padding:8px;
}
ul.menu {
  list-style-type:none;
  display:block;
  width: auto;
  height:18px;
  margin:auto;
  padding:0;
}
.guide{
 margin: 16px 2px 2px 0px;
 text-align: right;
}
.guide_center{
 margin: 16px 2px 2px 0px;
 text-align: center;
}
ul.menu li {
display:inline;
}

a.nav:link, a.nav:visited {
  display:block; float:left;
  padding:4px 11px 0 26px;
  margin:0;
  width: auto;
  height:18px;
  text-align:center;
  line-height:18px;
  font-weight:bold;
  font-size:14px;
  text-decoration:none;
  color:#fff;
  background:url(images/bt_bg.jpg) no-repeat left;
}

a.nav:hover {
display:block;
float:left;
padding:4px 11px 0 26px;
margin:0;
width:auto;
height:18px;
text-align:center;
line-height:18px;
text-decoration:none;
color:#ffff00;
background:url(images/bt_bg_a.jpg) no-repeat left;
}

BLOCKQUOTE{
  margin: 4px 10px 0px 15px;
  border: 0px;
  padding: 5px 8px 5px 8px;
  background-color: #e3ffe5;
  font-size: 90%;
  color: #333;
  line-height:1.4;
  overflow-x: auto;
  overflow-y : hidden;
}

PRE
{
  BORDER-BOTTOM: #ccc 1px solid;
  BORDER-LEFT: #ccc 1px solid;
  PADDING-BOTTOM: 0.5em;
  LINE-HEIGHT: 1;
  BACKGROUND-COLOR: #eee;
  margin: 0px 0px 0px 20px;
  PADDING-LEFT: 0.5em;
  WIDTH: 90%;
  PADDING-RIGHT: 0.5em;
  FONT-SIZE: 95%;
  overflow-x: auto;
  overflow-y : hidden;
  BORDER-TOP: #ccc 1px solid;
  BORDER-RIGHT: #ccc 1px solid;
  PADDING-TOP: 0.5em
}

.HTML
{
  BACKGROUND-IMAGE: url(./images/html.gif);
  BACKGROUND-REPEAT: no-repeat;
  BACKGROUND-POSITION: right bottom
}

.CSS
{
  BACKGROUND-IMAGE: url(./images/css.gif);
  BACKGROUND-REPEAT: no-repeat;
  BACKGROUND-POSITION: right bottom
}

.PERL
{
  BACKGROUND-IMAGE: url(./images/perl.gif);
  BACKGROUND-REPEAT: no-repeat;
  BACKGROUND-POSITION: right bottom
}

.PHP
{
  BACKGROUND-IMAGE: url(./images/php.gif);
  BACKGROUND-REPEAT: no-repeat;
  BACKGROUND-POSITION: right bottom
}

OL
{
  margin: 10px 6px 10px 15px;
  line-height: 150%;
}
UL
{
  padding-bottom: 0px;
  line-height: 150%;
  margin: 0px 4%;
}
DL
{
  margin: 0px 4%;
  line-height: 150%;
}
UL
{
  list-style-image: url(icon/sakura_mark.png);
}
LI
{
  margin: 10px 6px 10px 15px;
}
DT
{
  padding-bottom: 0px;
  margin: 0.5em 2em 0px;
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0px;
}
LI P
{
  margin: 10px 10px 10px 20px;
}
DT P
{
  margin: 0px;
}
DD P
{
  margin: 0px;
}
LI PRE
{
  margin: 10px 10px 10px 20px;
}
DT
{
  color: #666;
  font-weight: bold;
}
DD
{
  padding-bottom: 0px;
  margin: 0px 2em 0px 4em;
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0px;
}
ADDRESS
{
  margin: 10px 20px 10px 30px;
  font-style: normal;
  color: #666;
  font-size: 100%;
  font-weight: bold;
}
EM
{
  font-style: normal;
  color: #c00
}
CAPTION{
  color: #090;
  font-size: 130%;
  font-weight: bold;
  TEXT-DECORATION: underline;
}
HR{
  CLEAR: both;
}
TABLE{
  margin: 10px 5px 10px 15px;
  background-color: #fffbf6;
}
TABLE TH{
  background-color: #ccc;
}

table.sample {
   border-spacing: 0px;   /* セルの間隔をなくす */
   font-family: Verdana,sans-serif;   /* フォントの指定 */
   font-size: smaller;   /* 文字サイズを小さめに */
}
/* セルのデザインのうちヘッダと中身の共通部分 */
table.sample th, table.sample td {
   border-width: 1px;   /* セルの枠線は太さ1ピクセル */
   border-style: solid;   /* セルの枠線は実線 */
   padding: 2px;   /* セル内側の余白は2ピクセル */
}
/* ヘッダセルのデザイン */
table.sample thead th {
   border-color: #ccffcc #7ca866 #7ca866 #ccffcc;
   background-color: #bceaa8;
}
table.sample tbody th {
   border-color: #ffffcc #aca866 #aca866 #ffffcc;
   background-color: #eceaa8;
}
/* セルのデザイン */
table.sample td {
   border-color: #ffffff #aca899 #aca899 #ffffff;
   background-color: #ecead8;
}

.header{
  border-bottom: #dd9 2px solid;
  text-align: left;
  border-left: #dd9 2px solid;
  padding-bottom: 0.5em;
  background-color: #ffc;
  margin: 0.5em 0px;
  padding-left: 1em;
  padding-right: 1em;
  border-top: #dd9 2px solid;
  border-right: #dd9 2px solid;
  padding-top: 0.5em;
}
.footer{
  margin: 10px 20px 10px 30px;
  background-color: #ffc;
  border-top: #dd9 2px solid;
  border-right: #dd9 2px solid;
  border-bottom: #dd9 2px solid;
  border-left: #dd9 2px solid;
  text-align: left;
}
.footer IMG{
  border-bottom-style: none;
  border-right-style: none;
  border-top-style: none;
  color: #fff;
  border-left-style: none;
}
.footer UL{
  margin: 0px;
}
.header UL{
  margin: 0px;
}
.footer HR{
    DISPLAY: none;
}
.header HR{
    DISPLAY: none;
}
.update{
    text-align: right;
}
.new{
    color: #f90;
    font-size: 80%;
    font-weight: normal;
}
.old{
    color: #090;
    font-size: 80%;
    font-weight: normal;
}
H3 .new{
    font-size: 70%;
}
H3 .old{
    font-size: 70%;
}

.lead{
    BORDER-BOTTOM: #fefef9 thin outset;
    BORDER-LEFT: #fefef9 thin outset;
    PADDING-BOTTOM: 1em;
    BACKGROUND-COLOR: #ffffe9;
    PADDING-LEFT: 1em;
    PADDING-RIGHT: 1em;
    BORDER-TOP: #fefef9 thin outset;
    BORDER-RIGHT: #fefef9 thin outset;
    PADDING-TOP: 1em
}

DIV.lead P{
    LINE-HEIGHT: 1.3;
    MARGIN: 0.35em
}

.column{
  overflow-x: auto;
  overflow-y : hidden;
  font-family: Verdana, sans-serif;
  margin: 0px 4%;
  font-size: 100%;
  background-color: #eee;
  border-top: #ccc 2px solid;
  border-right: #ccc 2px solid;
  border-bottom: #ccc 2px solid;
  border-left: #ccc 2px solid;
}
.navbar{
  border-bottom: #ccc 2px solid;
  border-left: #ccc 2px solid;
  padding-bottom: 0.5em;
  background-color: #eee;
  margin: 1em 0.5em;
  padding-left: 1em;
  padding-right: 1em;
  border-top: #ccc 2px solid;
  border-right: #ccc 2px solid;
  padding-top: 0.5em;
}
P.image{
  text-align: center;
  padding-bottom: 1em;
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 1em;
}
P.image IMG{
    DISPLAY: block;
}
.selectsheet{
    text-align: right;
    WIDTH: 15em;
    FLOAT: right;
}
.invisible-counter{
    margin: 0px;
}
DIV.banner{
    FLOAT: right;
}
DIV.banner IMG{
  border-bottom: medium none;
  border-left: medium none;
  color: #ffe;
  border-top: medium none;
  border-right: medium none;
}
.name{
  color: #060;
  font-weight: bold;
}
CENTER{
  border-bottom: #ccc 2px solid;
  text-align: center;
  border-left: #ccc 2px solid;
  padding-bottom: 0.5em;
    margin: 0.5em 0px;
    padding-left: 0px;
    padding-right: 0px;
    border-top: #ccc 2px solid;
    border-right: #ccc 2px solid;
    padding-top: 0.5em;
}
CENTER IMG{
    border-bottom: medium none;
    border-left: medium none;
    border-top: medium none;
    border-right: medium none;
}
.menu H1{
    border-bottom: medium none;
    text-align: center;
    border-left: medium none;
    padding-bottom: 0px;
    margin: 0px 0px 0.2em;
    padding-left: 0px;
    padding-right: 0px;
    background-REPEAT: no-repeat;
    FONT-FAMILY: Osaka, sans-serif;
    background-POSITION: center center;
    LETTER-SPACING: 0.8em;
    color: #ccc;
    font-size: 300%;
    border-top: medium none;
    border-right: medium none;
    padding-top: 1.5em;
}
H1 SPAN.subtitle{
    DISPLAY: block;
    LETTER-SPACING: normal;
    color: #666;
    font-size: 33%;
}
.menu .mainmenu{
    margin-TOP: 2em;
}
.menu .mainmenu H2{
    Z-INDEX: 2;
    POSITION: relative;
    border-bottom-color: #cfc;
    border-right-WIDTH: 2px;
    background-color: #eefff8;
    border-top-color: #cfc;
    margin: 0px;
    WIDTH: 25%;
    border-top-WIDTH: 2px;
    border-bottom-WIDTH: 2px;
    border-right-color: #cfc;
    border-left-color: #cfc;
    border-left-WIDTH: 2px;
}
.menu .mainmenu DL{
    Z-INDEX: 1;
    border-bottom: #dd9 2px solid;
    POSITION: relative;
    border-left: #dd9 2px solid;
    padding-bottom: 1em;
    background-color: #ffc;
    margin: -2em 5% 2em;
    padding-left: 30%;
    padding-right: 0px;
    border-top: #dd9 2px solid;
    border-right: #dd9 2px solid;
    padding-top: 0px;
}
.visible-counter IMG{
    border-bottom: medium none;
    border-left: medium none;
    color: #ffe;
    border-top: medium none;
    border-right: medium none;
}
.visivle-counter{
  margin: 1em 0px 0px;
  clear: both
}