@charset "utf-8";
/* CSS Document */

.twoColHybLtHdr #container {
	width: 100%;
	text-align: left;
	margin: 0;
	padding: 0em;
	min-height: 100%;
	position: relative;
} 

#header {
	width: 870px;
	margin-right: auto;
	margin-left: auto;
	height: 160px;
	padding-top: 2%;
}
#header h1 {
	text-decoration: none;
	font-size: 10px;
	color: #666666;
	float: right;
	position: relative;
	top: 10px;
	font-weight: normal;
	font-family: Geneva, Arial, Helvetica, sans-serif;
}
#header img {
	float: left;
}
#header #menubar {
	height: 45px;
	width: 100%;
	clear: both;
	float: left;
	margin-top: 1em;
	visibility: hidden;
	display: none;
}
#header #menubar #menu {
	width: 860px;
	margin-right: auto;
	margin-left: auto;
	height: 50px;
	padding-left: 10px;
	text-align: center;
	position: relative;
	display: none;
}
#header #menubar #menu ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}
#header #menubar #menu li {
	display: block;
	float: left;
	width: 130px;
}
#header #menubar #menu a {
	height: 27px;
	display: block;
	width: 130px;
	float: left;
	color: #0099FF;
	text-decoration: none;
	font-size: 11px;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #CCCCCC;
	padding-top: 13px;
}
#header #menubar #menu a:hover {
	height: 27px;
	display: block;
	width: 130px;
	float: left;
	padding-top: 13px;
	color: #FFFFFF;
	text-decoration: none;
	font-size: 11px;
	background-color: #999999;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #CCCCCC;
}
.twoColHybLtHdr #header h1 {
	margin: 0; /* #header div の最後のエレメントのマージンを 0 に設定することにより、マージンの相殺（div 間の原因不明のスペース）が回避されます。div の周囲に境界線が適用されている場合は、境界線によってマージンの相殺が回避されるため、この操作は不要です */
	padding: 10px 0; /* マージンの代わりに余白を使用して、エレメントを div の端に接触しない位置に維持することができます */
}


.twoColHybLtHdr #container #contents {
	clear: both;
	height: auto;
	width: 870px;
	margin-right: auto;
	margin-left: auto;
	padding-bottom: 220px;

}

/* #sidebar1 に関するヒント：
1. 単位は相対単位であるため、サイドバーで余白を使用することは回避してください。標準に準拠したブラウザでは、余白は全体の幅に追加されるため、実際の幅が不特定の幅になります。 
2. サイドバーの値の単位として em が使用されているので、その幅が初期設定のテキストサイズに応じて変化することに注意してください。
3. 「.twoColHybLtHdr #sidebar1 p」ルールで見られるように、div の端と div に含まれるエレメントの間のスペースは、エレメントに左マージンと右マージンを適用することによって設定できます。
*/
.twoColHybLtHdr #sidebar1 {
	float: right;
	width: 220px;
	padding-right: 0;
	padding-bottom: 50px;
	padding-left: 0;
	height: 600px;
	margin-top: 3.4em;
	margin-right: 0%;
	margin-bottom: 0%;
	margin-left: 0%;
	padding-top: 0px;
	display: none;
}
.twoColHybLtHdr #sidebar1 #otherbox {
	background-image: url(../images/side-greeting.jpg);
	background-repeat: no-repeat;
	height: 200px;
	background-position: 10px top;
}
.annai-banner {
	text-decoration: none;
	position: relative;
	top: 100px;
	left: 75px;
	width: 97px;
	height: 17px;
}

.twoColHybLtHdr #sidebar1 h3, .twoColHybLtHdr #sidebar1 p {
	margin-left: 10px; /* サイドバーに配置されるすべてのエレメントに左マージンと右マージンが設定されている必要があります */
	margin-right: 10px;
	padding: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
}
.twoColHybLtHdr #sidebar1 ul {
	list-style-type: none;
	padding: 0px;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 30px;
	margin-left: 0px;
}
.side-a-gyosei {
	background-image: url(../images/side-gyosei.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	display: block;
	height: 80px;
	width: 198px;
	margin: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	color: #FFFFFF;
	text-indent: -4000px;
	padding: 0px;
}
.side-a-houmu {
	background-image: url(../images/side-houmu.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	display: block;
	height: 80px;
	width: 198px;
	margin: 0px;
	padding: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	color: #FFFFFF;
	text-indent: -4000px;
}
.twoColHybLtHdr #sidebar1 #otherbox2 {
	text-decoration: none;
	height: 180px;
	width: 200px;
	margin: 0px;
	padding: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
.twoColHybLtHdr #sidebar1 #otherbox3 {
	height: 200px;
	width: 200px;
	padding-left: 1.4em;
}



/* #mainContent に関するヒント：
1. #mainContent と #sidebar1 の間のスペースは、#mainContent div の左マージンによって設定されます。#sidebar1 div に含まれるコンテンツの量に関係なく、#sidebar1 div のスペースは維持されます。#sidebar1 のコンテンツが終了した後のスペースに #mainContent div のテキストを挿入するには、この左マージンを削除します。
2. #mainContent div の幅より広いエレメントが #mainContent div 内に配置されると、フローティングエレメントの落下（フローティング状態ではない #mainContent 領域がサイドバーの下に配置されること）が発生する可能性があります。ハイブリッドレイアウトの場合（全体の幅の単位はパーセント、サイドバーの単位は em）、使用可能な幅を正確に計算できない場合があります。ユーザーのテキストサイズが平均よりも大きい場合、#sidebar1 div が広くなるため、#mainContent div のスペースが狭くなります。クライアントが Contribute を使用してコンテンツを追加する予定である場合は、この制限に注意してください。
3. 下の Internet Explorer の条件分岐コメントでは、#mainContent に「hasLayout」を設定するのにズームプロパティが使用されます。これにより、いくつかの IE 固有のバグを回避できます。
*/
.twoColHybLtHdr #mainContent {
	width: 630px;
	clear: left;
	padding-left: 10px;
	float: none;
	height: auto;
	margin: 0;
	padding-bottom: 5%;
} 
.twoColHybLtHdr #mainContent ul {
	color: #0099FF;
	text-decoration: none;
	line-height: 22px;
}


/* 再使用できる各種クラス */
.fltrt { /* このクラスは、ページ上でフローティングエレメントを右側に配置するのに使用できます。プローティングエレメントは、ページ上でその横に配置されるエレメントの前に配置される必要があります。 */
	float: right;
	margin-left: 8px;
}
.fltlft { /* このクラスは、ページ上でフローティングエレメントを左側に配置するのに使用できます */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* このクラスは、div またはブレークエレメントに適用される必要があり、また、フローティングエレメントが完全に含まれているコンテナの末尾の直前にある最後のエレメントである必要があります */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

#mainContent #service {
	height: 430px;
	margin: 0px;
	padding: 0em;
	width: 630px;
}
#mainContent #service ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}
#mainContent #service ul a {
	display: block;
	float: left;
	padding-right: 0.1em;
	padding-bottom: 0.1em;
}
#mainContent #service li {
	display: inline;
}

#mainContent #service img {
	border: 4px solid #FFFFFF;
}
#mainContent #service img:hover {
	border: 4px solid #FFFF00;
}
.service-logo {
	color: #FFFFFF;
	background-image: url(../images/service.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	text-indent: -2000px;
	height: 30px;
	width: 200px;
}
.navi-logo {
	color: #FFFFFF;
	background-image: url(../images/navi.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	text-indent: -2000px;
	height: 30px;
	width: 97%;
	border-top-width: 1px;
	border-top-style: dotted;
	border-top-color: #CCCCCC;
}
.news-logo {
	color: #FFFFFF;
	background-image: url(../images/news.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	text-indent: -2000px;
	height: 30px;
	width: 97%;
	border-top-width: 1px;
	border-top-style: dotted;
	border-top-color: #CCCCCC;
}
.books-logo {
	color: #FFFFFF;
	background-image: url(../images/books.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	text-indent: -2000px;
	height: 30px;
	width: 97%;
	border-top-width: 1px;
	border-top-style: dotted;
	border-top-color: #CCCCCC;
}
.top-greeting {
	color: #FFFFFF;
	text-indent: -3000px;
}
.side-a-6ppou {
	background-image: url(../images/6ppou.jpg);
	background-repeat: no-repeat;
	background-position: right top;
	display: block;
	height: 80px;
	width: 198px;
	margin: 0px;
	padding: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	color: #FFFFFF;
	text-indent: -4000px;
}
.side-a-hanrei {
	background-image: url(../images/hanrei.jpg);
	background-repeat: no-repeat;
	background-position: right top;
	display: block;
	height: 80px;
	width: 198px;
	margin: 0px;
	padding: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	color: #FFFFFF;
	text-indent: -4000px;
}

.twoColHybLtHdr #top-navi {
	margin: 0px;
	width: 640px;
	height: 270px;
	padding-top: 1em;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}

.twoColHybLtHdr #top-navi #houjin {
	height: auto;
	width: 280px;
	float: left;
	margin: 0px;
	display: inline-block;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 1em;
	border-right-width: 1px;
	border-right-style: dotted;
	border-right-color: #CCCCCC;
}
.twoColHybLtHdr #top-navi #kojin {
	height: auto;
	width: 280px;
	margin: 0px;
	float: left;
	display: inline-block;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 2.5em;
}
#top-navi ul {
	color: #333333;
	text-decoration: none;
	letter-spacing: 0.2em;
	line-height: 22px;
	font-size: 12px;
}
.border-left {
	text-decoration: none;
	padding-left: 5px;
	border-left-width: 7px;
	border-left-style: solid;
	border-left-color: #0099FF;
}
.title1 {
	font-family: "ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3";
	font-size: 44px;
	color: #0099FF;
	text-decoration: none;
	margin: 0px;
	padding: 0px;
	line-height: 44px;
}
.title2 {
	font-size: 22px;
	color: #0099FF;
	text-decoration: none;
	font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
	line-height: 24px;
	padding-top: 2%;
	padding-right: 0px;
	padding-left: 0px;
	font-weight: bold;
	margin: 0px;
}
.p-style1 {
	line-height: 24px;
	color: #0099FF;
	text-decoration: none;
	letter-spacing: 0.2em;
	font-size: 14px;
	width: 500px;
	display: inline-block;
}
.blockquote {
	font-size: 11px;
	color: #666666;
	text-decoration: none;
	background-image: url(../images/dq.gif);
	background-repeat: no-repeat;
	background-position: 5px top;
	display: inline-block;
	line-height: 20px;
	border-left-width: 1px;
	border-left-style: dotted;
	border-left-color: #CCCCCC;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #CCCCCC;
	padding-top: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
}
.marker {
	text-decoration: none;
	background-color: #FFFF66;
}

.backtolist {
	font-size: 10px;
	color: #999999;
	text-decoration: underline;
	padding-left: 5px;
	margin: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	top: -10px;
	position: relative;
}
/* ここから、下部の#globalmenu */

.twoColHybLtHdr #container #globalmenu {
	width: 100%;
	font-size: 10px;
	color: #0099FF;
	text-align: left;
	bottom: 0px;
	height: 220px;
	position: absolute;
	margin-top: 3em;
	background-image: url(../images/bkg1.jpg);
	background-repeat: repeat-x;
	display: none;
}
#globalmenu a {
	color: #0099FF;
	text-decoration: none;
}
#globalmenu a:hover {
	color: #33CCFF;
	text-decoration: none;
}


#globalmenu #menubox {
	width: 870px;
	padding-top: 40px;
	margin-top: 4ex;
	margin-right: auto;
	margin-left: auto;
}
.copyright {
	font-size: 10px;
	color: #0099FF;
	text-decoration: none;
	text-align: center;
	margin-bottom: 3em;
	height: 10px;
}

#menubox #left {
	width: 235px;
	float: left;
	margin-right: 20px;
	padding-left: 15px;
	border-left-width: 1px;
	border-left-style: dotted;
	border-left-color: #999999;
}
#menubox #middle {
	width: 235px;
	margin-right: 20px;
	float: left;
	padding-left: 15px;
	border-left-width: 1px;
	border-left-style: dotted;
	border-left-color: #999999;
}
#menubox #right {
	float: right;
	width: 235px;
	padding-left: 15px;
	border-left-width: 1px;
	border-left-style: dotted;
	border-left-color: #999999;
}
.title1-2 {
	font-family: "ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3";
	font-size: 42px;
	color: #0099FF;
	text-decoration: none;
	margin: 0px;
	line-height: 42px;
	padding-top: 1em;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
.table-style1 {
	width: 600px;
	margin-top: 2em;
	margin-bottom: auto;
	padding: 0px;
	margin-right: 0px;
	margin-left: 0px;
}
.hr1 {
	color: #FFFFFF;
	text-decoration: none;
	margin: 0px;
	padding: 0px;
	background-color: #FFFFFF;
}
.img-style1 {
	padding-top: 1em;
}

.inquiry-a {
	color: #FFFFFF;
	text-decoration: none;
	text-indent: -4000px;
	display: block;
	height: 22px;
	width: 115px;
	background-image: url(../images/inquiry.jpg);
	background-repeat: no-repeat;
	background-position: left top;
}
.inquiry-a:hover {
	color: #FFFFFF;
	text-decoration: none;
	text-indent: -4000px;
	display: block;
	height: 22px;
	width: 115px;
	background-image: url(../images/inquiry-hover.jpg);
	background-repeat: no-repeat;
	background-position: left top;
}
.p-style2 {
	line-height: 22px;
	color: #0099FF;
	text-decoration: none;
	letter-spacing: 0.2em;
	font-size: 14px;
	background-image: url(../images/dq.gif);
	background-repeat: no-repeat;
	background-position: left top;
	padding-left: 80px;
}
.a-style1 {
	font-size: 12px;
	text-decoration: none;
	background-color: #E6E6E6;
	text-align: center;
	width: 250px;
	margin-top: 20px;
	margin-bottom: 20px;
	border: 1px dashed #999999;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 0px;
	height: auto;
}
.a-style1:hover {
	font-size: 12px;
	color: #FFFFFF;
	text-decoration: none;
	background-color: #CCCC66;
	text-align: center;
	width: 250px;
	margin-top: 20px;
	margin-bottom: 20px;
	border: 1px dashed #999999;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 0px;
	height: auto;
}