@charset "utf-8";
    
       
/* ==================== 余白の初期化 ==================== */

	*{
	  margin:0px;
	  padding:0px;
	}


	 
	 html {
	 height: auto;
	 margin: 10px 10px 0;
	}

/* ================== ページ全体の構成・背景の指定 ================== */
	 body {
		 margin: 0;
		 //padding-bottom: 70px;
		 // padding-top: 100px;
		background-image: url("../image001.gif");
	}
      
      
/* ================== Footerの割り付け================== */
	 footer{ 
		 clear:both;
		 background-color: #333;
		 //bottom: 0;
		 height: 15px;
		 //position: absolute;
		 width: auto;
		 padding:5px 50px;
		 color:#ddd;
		 font-size:small;
	}

/* ==================== canvasの指定 ==================== */
      
      canvas { background-color:#ffffff; 
		cursor: pointer;
		//width: 650px;
		//height: 500px;
		display:block;
		margin:0 auto;
		//float:left;

		border: 5px  solid #008899;
	  }

/* ==================== statusの指定 ==================== */
	div#status *{
	   font-size:small;
	   line-height:1.5;
 	   }
	div#status{
	   width:650px;	
		border: 5px  solid #ffaa99;
	   margin:0 auto;
	   //float:left;
	   line-height:5pt;
	  background-color: #b5b5b5;
	  }
	/*@media screen and (min-width: 900px) {
		canvas {margin-left:20px;float:left;}
		div#status{float:left;}
		div#article {clear:both;}
	}
	@media screen and (max-width: 899px) {
		canvas {margin:0 auto;}
		div#status{margin:0 auto;}
	}*/
	
	table{
		margin-left:10px;
		//color: #622;
		}



/* ==================== 本文（article）の指定 ==================== */
	div#article {
		clear:both;
	   //font-size:medium;
	  // font-family: "Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
	   face:"ＭＳ 明朝";
	  line-height:200%;
	   color: #000;
 	   }
 	 h1,h2{ color: #aa55aa; text-align:center;}
 	 h2 {
		font-size:130%;
	}

 	 sp1{color: #ff2222;}
 	 span.sousa_setumei{font-family: sans-serif; 
 	 			color:green; 
 	 			border-left:5px solid #208888;
 	 			border-bottom:1px solid #208888;
 	 			padding-left:10px;
 	 			padding-bottom:5px;
 	 			margin:30px auto 30px;
 	 			}
		<!--border-bottom:1px solid  #20aaaa; は，下線とその色指定-->
 	 
 	 <!--
      .color0 {
          color: #000000; } /* black */
      .color1 {
          color: #ff0000; } /* red */
      .color2 {
          color: #00ff00; } /* lime */
      .color3 {
          color: #0000ff; } /* blue */
      .color4 {
          color: #00cc00; } /* lightgreen */
      .color5 {
          color: #ff6600; } /* orange */
      .color6 {
          color: #ff00ff; } /* fuchsia */
      .color7 {
          color: #ccffff; } /* lightblue */
      .color8 {
          color: #ffffff; } /* white */
      .color9 {
          color: #000099; } /* darkblue */
   -->
  
  
  
  
/* ==================== ドロップダウンメニュー ==================== */
.drop-down{
	//border: 3px solid  red;
	width:90%;
	margin: 10px auto 30px;
}

#dropdown, #dropdown ul{
	list-style: none;
}
#dropdown{
	padding: 0 60px ;
	height: 35px;
	z-index: 100;
}
#dropdown >li{
	position: relative;
	border: 1px solid green;
	background: #eee;
}
#dropdown li{
	position: relative;
	background: #eee;
}
#dropdown a{
	display: block;
	height: 35px;
	text-decoration: none;
	-webkit-transition: none;
	-moz-transition: none;
	-o-transition: none;
	transition: none;
	font-size:100%;
}

/* メイン階層 */
#dropdown > li{
	float: left;
	width: 150px;
	text-align: center;
}
#dropdown > li > a{
	color: #818181;
	//text-shadow: 0 1px 1px #fff;
	color:#a55;
	line-height: 30px;
}
#dropdown > li:hover > a{
	background: #ecc;
	color: #2e8b57;
	-webkit-box-shadow: 0 12px 4px rgba(0,0,0,.3);
	-moz-box-shadow: 0 2px 4px rgba(0,0,0,.3);
	box-shadow: 0 2px 4px rgba(0,0,0,.3);
}

/* サブ階層 */
#dropdown ul{
	position: absolute;
	left: -18px;
	z-index: 9999;
	padding: 0.5em 0;
	width: 150px;
	border-bottom: 1px solid #bbb;
	-webkit-box-shadow: 0 2px 4px rgba(0,0,0,.3);
	-moz-box-shadow: 0 2px 4px rgba(0,0,0,.3);
	box-shadow: 0 2px 4px rgba(0,0,0,.3);
}
#dropdown ul a{
	border-top: 1px solid green;
	border-bottom: 1px solid green;
	border-left: 1px solid green;
	border-right: 1px solid green;
	line-height: 40px;
	padding: 0 1em;
	color: #a55;
}
#dropdown  li:hover > a{
	background: #ecc;
	color: #2e8b57;
}

#dropdown li ul a span{
	display: block;
	padding: 1em 0;
	border-top: 1px solid #bbb;
}

/**** 孫階層 ***/
#dropdown ul ul{
	top: 1px;
	left: 145px;
}

/**** icon *****/
#dropdown li.balloon-caret{
	position: absolute !important;
	top:-3px;
	left: 92px;
	width: 16px;
	height: 13px;
	background: url(../Guide/images/caret-top.png) no-repeat 0 0 !important;
}
#dropdown ul ul li.balloon-caret{
	top: 10px;
	left: -10px;
	width: 13px;
	height: 25px;
	background: url(../Guide/images/caret-left.png) no-repeat 0 0 !important;
}
#dropdown span.icon{
	position: absolute;
	border: none;
}
#dropdown li .icon{
	top: 13px;
	right: 5px;
	width: 10px;
	height: 10px;
	background: url(../Guide/images/arrow-down.png) no-repeat 0 0;
}
#dropdown ul .icon{
	top:13px;
	right: 5px;
	width: 10px;
	height: 10px;
	border: none;
	background: url(../Guide/images/arrow-right.png) no-repeat 0 0;
}
/*================??????========================*/


/*================表　組========================*/

		table.sample {
		   border-collapse: collapse;
		   border: 5px solid green solid; /* 外側の枠線 */
		}
	  table.sample td {
		  // border-collapse: collapse;
		   border-spaceng: 0px; 
		  // border-width: 1px 0px; /* 上下だけ引く */
		   border-bottom: 1px green solid;
		   padding: 0.5em;        /* セル内側の余白 */
		   text-align:center;
		}