@charset "utf-8";

/************************************************/
/*  Application all                             */
/************************************************/

html,body{
  line-height:1.3;
  font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",Verdana,Arial,"ＭＳ Ｐゴシック",sans-serif;
  font-size:small;
  margin:0;
  padding:0;
}

body{
  color:#fff;
  background:url(../img/back_html.gif) 0 0 #06f;
}

table{
  text-align:left;
  font-size:small;
}


a{text-decoration:underline;}
a:link{color:#05c;}
a:visited{color:#70a;}
a:hover{color:#3ac;}

img{
  border:0;
}

h1,h2,h3,h4,h5,h6{
  font-size:small;
  margin:0;
}

form{
  padding:0;
  margin:0;
}

p{
  padding:0;
  margin:0;
}

hr{
  height:1px;
  padding:0;
  margin:0;
  border:0;
}

address,em{
  font-style:normal;
}

.clear{
  clear:both;
  font:normal 1px monospace;
}



/************************************************/
/*  Flame layout                                */
/************************************************/

#container{
  width:738px;
}

#header{
  width:734px;
  border:2px solid #000;
  background:url(../img/back_header.jpg) 0 0 no-repeat;
}

#body{
  width:734px;
  border-width:0 2px 2px 2px;
  border-style:solid;
  border-color:#000;
  background:url(../img/back_navigation.gif) 0 0 repeat-y #fff;
}

#body:after{
  content:".";
  height:0;
  clear:both;
  display:block;
  visibility:hidden;
}


#navigation{
  float:left;
  width:114px;
}


#contents{
  float:right;
  color:#333;
  width:620px;
  background:#fff;
}

#contents div#wrap{
  padding:10px 10px 15px;
}

#contents p#pagetop{
  clear:both;
  text-align:right;
  padding:15px 10px 10px;
}


#footer{
  color:#fff;
  padding:10px 10px 15px;
}



/************************************************/
/* Clear Default CSS                            */
/************************************************/

#header ul,#footer ul,#navigation ul{
  list-style:none;
  padding:0;
  margin:0;
}



/************************************************/
/*  Decoration                                  */
/************************************************/

/** Header **************************************/

#header h1{
  text-align:right;
  width:730px;
  height:40px;
  padding-top:50px;
  background:url(../img/back_header.jpg) 0 0 no-repeat;
}

#header h1 a{
  display:block;
  text-decoration:none;
  width:525px;
  height:40px;
  margin:0 0 0 209px;
  background:transparent;
}

#header h1 a span{
  visibility:hidden;
}



/** Navigation **********************************/

#navigation h2{
  line-height:25px;
  color:#eee;
  padding:0 3px;
  background:#000;
}

#navigation ul{
  margin-bottom:25px;
}

#navigation ul li{
  position:relative;
  z-index:0;
  border-bottom:solid 1px #000;
  background:url(../img/back_navigation.gif) 0 0;
}

#navigation ul li a{
  display:block;
  text-decoration:none;
  line-height:26px;
  color:#fff;
  width:100px;
  padding-left:14px;
  background:url(../img/icon_navigation.gif) 0 50% no-repeat;
}

#navigation ul li a:hover{
  color:#00f;
  background:url(../img/menu_back02.gif) 0 0 #ddf;
}

#navigation ul li ul{
  display:none;
}

#navigation ul li:hover{
  z-index:1;
  background:url(../img/menu_back02.gif) 0 0 #ddf;
}

#navigation ul li:hover a{
  color:#00f;
  background:none;
}


#navigation ul li:hover ul{
  display:block;
  position:absolute;
  z-index:2;
  top:3px;
  left:90px;
  width:170px;
  border-width:1px 1px 0 1px;
  border-style:solid;
  border-color:#fff;
  background:url(../img/back_html.gif) 0 0;
}

#navigation ul li:hover ul li{
  width:170px;
  border-color:#fff;
  background:none;
}

#navigation ul li:hover ul li a{
  line-height:23px;
  color:#fff;
  width:160px;
  padding:0 5px;
}

#navigation ul li:hover ul li a:hover{
  color:#00f;
  background-image:none;
  background-color:#cff;
}

#navigation p{
  text-align:center;
  width:104px;
  margin:0 5px;
}

#navigation p img{
  vertical-align:middle;
  margin-bottom:10px;
}



/** Contents ************************************/

p#pagetop a{
  color:#05c;
  padding-left:15px;
  background:url(../img/icon_02.gif) 0 50% no-repeat;
}

p#pagetop a:hover{color:#3ac;}



/** Footer **************************************/

#footer ul{
  line-height:23px;
  margin:0 0 5px 0;
  border-left:1px solid #eee;
}

#footer ul li{
  display:inline;
  padding:0 5px;
  border-right:1px solid #fff;
}

#footer ul li a{
  text-decoration:none;
  color:#fff;
}

#footer ul li a:hover{
  color:#ce0;
  text-decoration:underline;
}