@charset "UTF-8";
/* 入札システムCSSファイル */

body.samplebody {
	font-family: "meiryo", "メイリオ", "ヒラギノ角ゴPro W3", "Hiragino KaKu Gothic Pro", "ＭＳ Ｐゴシック", verdana, Osaka, "trebuchet ms", sans-serif;
	font-size: 80%;
	margin: 0px;
	padding: 0px;
	text-align: center; /* bodyのtext-alignをcenterとし、#container の横marginをautoとすることで、ページコンテンツ全体のセンタリングが出来ます */
	color: #333333;
	background-image: url(../../img/bg/bg_main_hottopic.gif); /* 全体の背景イメージをここで設定しています */
	background-repeat: repeat; /* 背景画像自体は 48px x 48px の大きさしかないので、繰り返し表示（タイリング）により、画面全体に適用しています */
}

.samplebody #container {
	width: 960px; /* メインエリアの幅は現在、1024px（モニタのVGA表示）に合わせることが主流です。スクロールバーやアプリケーションの枠幅を考慮し、1024よりも多少小さめの設定をします */
	margin: 0 auto; /* bodyのtext-alignをcenterとし、#container の横marginをautoとすることで、ページコンテンツ全体のセンタリングが出来ます */
	text-align: left;
	background: #fff;/* #ffffff（白）の短縮形　*/
	border-left: 10px solid #fff; /* コンテナ左に白の余白を作ります。デザイン上の措置です */
	border-right: 10px solid #fff; /* コンテナ右に白の余白を作ります。デザイン上の措置です */
	border-bottom: 20px solid #fff; /* コンテナ下、フッターとの境界に白の余白を作ります。デザイン上の措置です */
}


/* 共通クラス */

.clearfloat { /* このクラスは、div またはブレークエレメントに適用される必要があり、また、フローティングエレメントが完全に含まれているコンテナの末尾の直前にある最後のエレメントである必要があります */
	clear: both;
	height: 0;
	font-size: 1px;
	line-height: 0px;
}


/* ヘッダー */

.samplebody #header {
	margin: 0;
	padding: 2px 0 0 0; /* 上側のみの余白を作ります。 */
	width: 100%;
}

.samplebody #header .logo { /* ロゴ */
	margin: 5px 0 0 0;
	padding: 0;
	float: left;
	width: 300px;
	height: 60px;
	background: url(../img/img/c_logo2.png) no-repeat left top;
}

.samplebody #header .logo a {
	width: 300px;
	height: 60px;
	overflow: hidden;
	display: block;
	outline: none;
	text-indent: -9999px; /* text-indentをマイナスの値とすることで、画像上にテキストが表示されることを防げます */
}

.samplebody #header h1 {
	margin: 10px 0 5px 25px;
	padding: 0;
	float: left;
	width: 250px;
	height: 60px;
	line-height: 16px;
	font-size: 14px;
	font-weight: normal; /* h1タグは標準で太字設定になるので、標準のフォントの太さに変更します */
	color: #666666;
}

.samplebody #header .freedial { /* フリーダイヤル */
	margin: 5px 0 0 15px;
	padding: 0;
	float: left;
	width: 266px;
	height: 60px;
	background: url(../img/img/c_img_header_freedial2.gif) no-repeat;
	border: 0;
	text-indent: -9999px;
}

/*　追加　*/
.samplebody #header .freedial a:hover {
	background: url(../img/img/c_img_header_freedial2.gif) no-repeat;
}

.samplebody #header .freedial a {
	width: 266px;
	height: 60px;
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	outline: none;
}
/*　追加　*/

.samplebody #header .btn_reservation { /* お申し込み（リザベーション）ボタン */
	float: right;
	width: 93px;
	height: 60px;
	margin: 5px 0 0 18px;
	padding: 0;
	background: url(../img/btn/btn_header_rsv.jpg) no-repeat; /* 画像ボタンの一番簡単な設定方法は、divの背景にボタン画像を配置することです */
}

.samplebody #header .btn_reservation a:hover {
	background: url(../img/btn/btn_header_rsv_over.jpg) no-repeat; /* マウスオーバーでボタン画像を切り替える場合は、a:hover の背景にマウスオーバー時の画像を設定します */
}

.samplebody #header .btn_reservation a {
	width: 93px;
	height: 60px;
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	outline: none;
}

.samplebody #header .btn_contact { /* お問い合わせ（コンタクト）ボタン */
	float: right;
	width: 93px;
	height: 60px;
	margin: 5px 0 0 0px;
	padding: 0;
	background: url(../img/btn/c_btn_header_contact.gif) no-repeat;
}

.samplebody #header .btn_contact a:hover {
	background: url(../img/btn/c_btn_header_contact_over.gif) no-repeat;
}

.samplebody #header .btn_contact a {
	float: right;
	width: 93px;
	height: 60px;
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	outline: none;
}

.samplebody #header .btn_catalog { /* 資料請求（カタログ）ボタン */
	float: right;
	width: 93px;
	height: 60px;
	margin: 5px 0 0 0px;
	padding: 0;
	background: url(../img/btn/btn_header_catalog.jpg) no-repeat;
}

.samplebody #header .btn_catalog a:hover {
	background: url(../img/btn/btn_header_catalog_over.jpg) no-repeat;
}

.samplebody #header .btn_catalog a {
	width: 93px;
	height: 60px;
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	outline: none;
}


/* グローバルナビゲーション（ナビ） */

.samplebody #globalnavi {
	margin: 8px 0 0 0;
	padding: 0 1px 0 1px;
	width: 100%;
}

.samplebody #globalnavi .btn_top { /* トップページボタン１ */
	float: left;
	width: 137px;
	height: 35px;
	margin: 0;
	padding: 0;
	background: url(../img/btn/c_b_btn_top1.gif) no-repeat;
}

.samplebody #globalnavi .btn_top a:hover {
	background: url(../img/btn/b_btn_top1_over.gif) no-repeat;
}

.samplebody #globalnavi .btn_top a {
	width: 137px;
	height: 35px;
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	outline: none;
}

.samplebody #globalnavi .btn_feature { /* トップページボタン２ */
	float: left;
	width: 137px;
	height: 35px;
	margin: 0;
	padding: 0;
	background: url(../img/btn/c_b_btn_top2.gif) no-repeat;
}

.samplebody #globalnavi .btn_feature a:hover {
	background: url(../img/btn/b_btn_top2_over.gif) no-repeat;
}

.samplebody #globalnavi .btn_feature a {
	width: 137px;
	height: 35px;
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	outline: none;
}

.samplebody #globalnavi .btn_product { /* トップページボタン３ */
	float: left;
	width: 137px;
	height: 35px;
	margin: 0;
	padding: 0;
	background: url(../img/btn/c_b_btn_top3.gif) no-repeat;
}

.samplebody #globalnavi .btn_product a:hover {
	background: url(../img/btn/b_btn_top3_over.gif) no-repeat;
}

.samplebody #globalnavi .btn_product a {
	width: 137px;
	height: 35px;
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	outline: none;
}

.samplebody #globalnavi .btn_purchase { /* トップページボタン４ */
	float: left;
	width: 137px;
	height: 35px;
	margin: 0;
	padding: 0;
	background: url(../img/btn/c_b_btn_top4.gif) no-repeat;	
}

.samplebody #globalnavi .btn_purchase a:hover {
	background: url(../img/btn/b_btn_top4_over.gif) no-repeat;
}

.samplebody #globalnavi .btn_purchase a {
	width: 137px;
	height: 35px;
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	outline: none;
}

.samplebody #globalnavi .btn_support { /* トップページボタン５ */
	float: left;
	width: 137px;
	height: 35px;
	margin: 0;
	padding: 0;
	background: url(../img/btn/c_b_btn_top5.gif) no-repeat;
}

.samplebody #globalnavi .btn_support a:hover {
	background: url(../img/btn/b_btn_top5_over.gif) no-repeat;
}

.samplebody #globalnavi .btn_support a {
	width: 137px;
	height: 35px;
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	outline: none;
}

.samplebody #globalnavi .btn_map { /* トップページボタン６ */
	float: left;
	width: 137px;
	height: 35px;
	margin: 0;
	padding: 0;
	background: url(../img/btn/c_b_btn_top6.gif) no-repeat;
}

.samplebody #globalnavi .btn_map a:hover {
	background: url(../img/btn/c_b_btn_top6_over.gif) no-repeat;
}

.samplebody #globalnavi .btn_map a {
	width: 137px;
	height: 35px;
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	outline: none;
}

.samplebody #globalnavi .btn_aboutus { /* トップページボタン７ */
	float: left;
	width: 136px; /* ここだけ1px小さいのは、全体の幅とのバランスを取るためです */
	height: 35px;
	margin: 0;
	padding: 0;
	background: url(../img/btn/c_b_btn_top7.gif) no-repeat;
}

.samplebody #globalnavi .btn_aboutus a:hover {
	background: url(../img/btn/c_b_btn_top7_over.gif) no-repeat;
}

.samplebody #globalnavi .btn_aboutus a {
	width: 136px;
	height: 35px;
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	outline: none;
}


/* メインビジュアル */

.samplebody #mainvisual {
	margin: 0;
	padding: 0;
	width: 100%;
}

.samplebody #mainvisual .btn_mv_normal1 { /* メインビジュアル（通常時）*/
	float: left;
	margin: 0;
	padding: 0;
	width: 960px;
	height: 192px;
	background: url(../img/img/topimage1.gif) no-repeat;
}

.samplebody #mainvisual .btn_mv_normal1 a:hover { /* メインビジュアル（マウスオーバー時）*/
	background: url(../img/img/topimage2.gif) no-repeat;
}

.samplebody #mainvisual .btn_mv_normal1 a {
	width: 960px;
	height: 192px;
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	outline: none;
}
.samplebody #mainvisual .btn_mv_normal2 { /* メインビジュアル（通常時）*/
	float: left;
	margin: 0;
	padding: 0;
	width: 480px;
	height: 192px;
	background: url(../img/img/b_img_mainvisual2.jpg) no-repeat;
}

.samplebody #mainvisual .btn_mv_normal2 a:hover { /* メインビジュアル（マウスオーバー時）*/
	background: url(../img/img/b_img_mainvisual_over2.jpg) no-repeat;
}

.samplebody #mainvisual .btn_mv_normal2 a {
	width: 480px;
	height: 192px;
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	outline: none;
}

/* サブナビゲーション（ナビ） */

.samplebody #subnavi {
	margin: 0;
	padding: 0;
	width: 100%;
	border-bottom: 2px solid #ff3333; /* トップ部分とメインコンテンツの境界線を引いています。あくまでもデザイン上の措置です */
}

.samplebody #subnavi .btn_submenu1 {/* サブナビゲーション１ */
	float: left;
	width: 137px;
	height: 36px;
	margin: 0;
	padding: 0;
	background: url(../img/btn/btn_subnavi_menu21.gif) no-repeat;
}

.samplebody #subnavi .btn_submenu1 a:hover {
	background: url(../img/btn/btn_subnavi_menu21_over.gif) no-repeat;
}

.samplebody #subnavi .btn_submenu1 a {
	width: 137px;
	height: 36px;
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	outline: none;
}

.samplebody #subnavi .btn_submenu2 {/* サブナビゲーション２ */
	float: left;
	width: 137px;
	height: 36px;
	margin: 0;
	padding: 0;
	background: url(../img/btn/btn_subnavi_menu22.gif) no-repeat;
}

.samplebody #subnavi .btn_submenu2 a:hover {
	background: url(../img/btn/btn_subnavi_menu22_over.gif) no-repeat;
}

.samplebody #subnavi .btn_submenu2 a {
	width: 137px;
	height: 36px;
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	outline: none;
}

.samplebody #subnavi .btn_submenu3 {/* サブナビゲーション３ */
	float: left;
	width: 137px;
	height: 36px;
	margin: 0;
	padding: 0;
	background: url(../img/btn/btn_subnavi_menu23.gif) no-repeat;
}

.samplebody #subnavi .btn_submenu3 a:hover {
	background: url(../img/btn/btn_subnavi_menu23_over.gif) no-repeat;
}

.samplebody #subnavi .btn_submenu3 a {
	width: 137px;
	height: 36px;
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	outline: none;
}

.samplebody #subnavi .btn_submenu4 {/* サブナビゲーション４ */
	float: left;
	width: 137px;
	height: 36px;
	margin: 0;
	padding: 0;
	background: url(../img/btn/btn_subnavi_menu24.gif) no-repeat;
}

.samplebody #subnavi .btn_submenu4 a:hover {
	background: url(../img/btn/btn_subnavi_menu24_over.gif) no-repeat;
}

.samplebody #subnavi .btn_submenu4 a {
	width: 137px;
	height: 36px;
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	outline: none;
}

.samplebody #subnavi .btn_submenu5 {/* サブナビゲーション５ */
	float: left;
	width: 137px;
	height: 36px;
	margin: 0;
	padding: 0;
	background: url(../img/btn/btn_subnavi_menu25.gif) no-repeat;
}

.samplebody #subnavi .btn_submenu5 a:hover {
	background: url(../img/btn/btn_subnavi_menu25_over.gif) no-repeat;
}

.samplebody #subnavi .btn_submenu5 a {
	width: 137px;
	height: 36px;
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	outline: none;
}

.samplebody #subnavi .btn_submenu6 {/* サブナビゲーション６ */
	float: left;
	width: 136px;
	height: 36px;
	margin: 0;
	padding: 0;
	background: url(../img/btn/btn_subnavi_menu26.gif) no-repeat;
}

.samplebody #subnavi .btn_submenu6 a:hover {
	background: url(../img/btn/btn_subnavi_menu26_over.gif) no-repeat;
}

.samplebody #subnavi .btn_submenu6 a {
	width: 136px;
	height: 36px;
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	outline: none;
}

.samplebody #subnavi .btn_submenu7 {/* サブナビゲーション７ */
	float: left;
	width: 136px;
	height: 36px;
	margin: 0;
	padding: 0;
	background: url(../img/btn/btn_subnavi_menu27.gif) no-repeat;
}

.samplebody #subnavi .btn_submenu7 a:hover {
	background: url(../img/btn/btn_subnavi_menu27_over.gif) no-repeat;
}

.samplebody #subnavi .btn_submenu7 a {
	width: 136px;
	height: 36px;
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	outline: none;
}


/* メインコンテナ */
/* サイドメニューとメインコンテンツの高さが異なる場合、直接サイドメニューとメインコンテンツのdivをfloatで設定すると、高さの低い方に背景画像が表示されてしまいます。*/
/* メインコンテナでサイドメニュー・メインコンテンツ双方を格納する「器」を用意することで、どちらの高さにも左右されず、ここで設定する背景（今回は白）が表示されます。*/
/* 今回のケースでは全体のコンテナの背景も白ですので影響はありませんが、もしサイドメニューの背景色と全体の背景色が異なる場合には、カバーを設置する方が良いです。 */

.samplebody #maincontainer {
	margin: 5px 0 0 0; /* サブナビからの上下マージンを15pxに設定 */
	padding: 0;
	background: #fff; /* chapter3-1で修正 */

}


/* サイドメニュー */

.samplebody #sidemenu {
	margin: 0;
	padding: 0;
	float: left;
	width: 220px;
}

.samplebody #sidemenu a:link { color: #333333; text-decoration: none; } /* text-decoration を none に設定することで、リンクの下線を非表示に出来ます */
.samplebody #sidemenu a:visited { color: #333333; text-decoration: none;  }
.samplebody #sidemenu a:hover { color: #ff3333; text-decoration: underline;  } /* マウスオーバー時にはリンクの下線を表示するように、underline設定をしています */
.samplebody #sidemenu a:active { color: #333333; text-decoration: none;  }

.samplebody #sidemenu h3 { /* サイドメニューの各カテゴリのヘッダーを h3 タグで実装します */
	background: url(../img/bg/c_b_bg_sidemenu_header_arrow.gif) no-repeat;
	width: 100%;
	height: 30px;
	text-indent: 22px;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: normal;
	line-height: 32px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	display: block;
	cursor: pointer;
}

.samplebody #sidemenu h3 a:link, .samplebody #sidemenu h3 a:visited, .samplebody #sidemenu h3 a:active {
	display: block;
	color: #FFFFFF;
	text-decoration: none;
}

.samplebody #sidemenu h3 a:hover {
	color: #FFFFFF;
	text-decoration: underline;
}

.samplebody #sidemenu .top-margin15 { /* メニュー間の高さ調整に使用します */
	margin-top: 15px;
}

.samplebody #sidemenu .cover { /* サイドメニューの表示エリアの左右部分の枠だけを用意します */
	margin: 0;
	padding: 0;
	font-size: 12px;
	line-height: 1.5em;
	border-left: 1px solid #cc3300; /* 左側の枠をborder-leftで描画します */
	border-right: 1px solid #cc3300; /* 右側の枠をborder-rightで描画します */
}

.samplebody #sidemenu .cover_footer { /* サイドメニューの表示エリアの下側の枠は角が丸いので、画像で用意します */
	background: url(../img/bg/c_b_bg_sidemenu_footer.gif) no-repeat;
	width: 220px;
	height: 8px;
	margin: 0;
	padding: 0;
}

.samplebody #sidemenu ul.link { /* サイドメニューの各要素はリストで用意します */
	list-style-type: none; /* リストのマーカーをオリジナルの画像で設定するので、標準のリストマーカーを使用しない設定にします */
	margin: 0;
	padding: 0;
}

.samplebody #sidemenu ul.link li { /* サイドメニューの各要素を表示するリストの表示設定です */
	background: url(../img/lst/list_arrow_blue_normal.gif) 1.0em 0.8em no-repeat; /* リストのマーカーを画像で設定します */
	text-indent: 2.2em;
	font-size: 12px;
	height: 22px;
	line-height: 22px;
	margin: 0 0 0 0;
	padding: 2px 0 2px 0;
	border-bottom: 1px dotted #051394; /* 各リストの下側に境界線の点線を描画します */
	text-decoration: none;
	cursor: pointer; /* cursor: pointerを設定することで、リストの表示領域にマウスカーソルがオーバーした時点でカーソルがクリック可能カーソルに変化します */
}

.samplebody #sidemenu ul.link li a {
	text-indent: 2.2em;
	font-size: 12px;
	height: 22px;
	line-height: 22px;
	margin: 0 0 0 0;
	padding: 0 0 2px 0;
	cursor: pointer;
	display: block;
	outline: none;
}

.samplebody #sidemenu ul.link li.lastitem { /* 各リストの最終アイテムについては、下側の境界線を描画しないようにします */
	background: url(../img/lst/list_arrow_blue_normal.gif) 1.0em 0.8em no-repeat;
	text-indent: 2.2em;
	font-size: 12px;
	height: 22px;
	line-height: 22px;
	margin: 0 0 0 0;
	padding: 2px 0 0 0;
	border-bottom: none; /* 先程の "border-bottom: 1px dotted #cccccc;" と比較すると、ここでは下線が描画されないことが分かります */
}

.samplebody #sidemenu .onepoint { /* ワンポイント画像メニューの画像設定 */
	background: url(../img/img/img_sidemenu_onepoint.jpg) no-repeat left top;
	width: 220px;
	height: 65px;
	padding: 0;
	margin: 0;
	font-size: 12px;
	font-weight: normal;
	line-height: 18px;
	color: #051394;
}

.samplebody #sidemenu .onepoint a {
	margin: 0;
	padding: 8px 8px 8px 71px;
	color: #333333;
	cursor: pointer;
	outline: none;
	display: block;
}

.samplebody #sidemenu .onepoint a:hover {
	color: #00cc66;
}


/* サイドメニューに協賛会社のリンク */

.samplebody #sidemenu .btn_sidemenu1 {/* サイドナビゲーション１ */
	float: left;
	width: 220px;
	height: 65px;
	margin: 0;
	padding: 0;
	background: url(../img/btn/b_lside_gbtn1.png) no-repeat;
}

.samplebody #sidemenu .btn_sidemenu1 a:hover {
	background: url(../img/btn/b_lside_gbtn1_over.png) no-repeat;
}

.samplebody #sidemenu .btn_sidemenu1 a {
	width: 220px;
	height: 50px;
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	outline: none;
}

.samplebody #sidemenu .btn_sidemenu2 {/* サイドナビゲーション２ */
	float: left;
	width: 220px;
	height: 65px;
	margin: 0;
	padding: 0;
	background: url(../img/btn/b_lside_gbtn2.png) no-repeat;
}

.samplebody #sidemenu .btn_sidemenu2 a:hover {
	background: url(../img/btn/b_lside_gbtn5_over.png) no-repeat;
}

.samplebody #sidemenu .btn_sidemenu2 a {
	width: 220px;
	height: 65px;
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	outline: none;
}

.samplebody #sidemenu .btn_sidemenu3 {/* サイドナビゲーション３ */
	float: left;
	width: 220px;
	height: 65px;
	margin: 0;
	padding: 0;
	background: url(../img/btn/b_lside_gbtn3.png) no-repeat;
}

.samplebody #sidemenu .btn_sidemenu3 a:hover {
	background: url(../img/btn/b_lside_gbtn3_over.png) no-repeat;
}

.samplebody #sidemenu .btn_sidemenu3 a {
	width: 220px;
	height: 65px;
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	outline: none;
}

.samplebody #sidemenu .btn_sidemenu4 {/* サイドナビゲーション４ */
	float: left;
	width: 220px;
	height: 65px;
	margin: 0;
	padding: 0;
	background: url(../img/btn/b_lside_gbtn4.png) no-repeat;
}

.samplebody #sidemenu .btn_sidemenu4 a:hover {
	background: url(../img/btn/b_lside_gbtn4_over.png) no-repeat;
}

.samplebody #sidemenu .btn_sidemenu4 a {
	width: 220px;
	height: 65px;
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	outline: none;
}



/* メインコンテンツ */

.samplebody #maincontent {
	float: left; /* float:right とすることにより、メインコンテンツ領域の右端を960px（全体のページ幅）にぴったり合わせることが出来ます。*/
	width: 740px;
	margin: 0 0 0 10px;
	padding: 0;
}

.samplebody #maincontent .locationlist { /* 「パンくずリスト」＝「現在閲覧中のページ位置表示リスト」 の表示エリアを用意します */
	margin: 0 0 0 5px;
	padding: 0;
	font-size: 12px;
	width: 100%;
	height: 15px;
	line-height: 15px; /* height（領域の高さ）とline-height（テキスト一行の高さ）を同じ値とすることで、高さ方向のセンタリングが出来ます */
}

.samplebody #maincontent .locationlist a {
	color: #051394;
}


/* メインコンテンツ上側 2列トピック表示 */

.samplebody #maincontent .topcontent { /* トップ位置のコンテンツは左右に2つ用意することにします */
	width: 100%;
	margin: 10px 0 0 20px;
	padding: 0;
}

.samplebody #maincontent .topcontent a {
	text-decoration: none;
	color: #333;
}

.samplebody #maincontent .topcontent a:hover {
	text-decoration: underline;
	color: #051394;
}

.samplebody #maincontent .topcontent .inner-left { /* 左側コンテンツ */
	float: left;
	width: 370px;
	border-bottom: 2px solid #051394; /* コンテンツ下側の境界線を border-bottom により記述します */
}

.samplebody #maincontent .topcontent .inner-right { /* 右側コンテンツ */
	float: right;
	width: 370px;
	border-bottom: 2px solid #051394; /* コンテンツ下側の境界線を border-bottom により記述します */
}

.samplebody #maincontent .topcontent h3 { /* コンテンツのタイトルをh3タグで用意します */
	background: url(../img/bg/bg_main_topicicon.gif) no-repeat left top;
	margin: 0;
	padding: 7px 0 7px 0;
	width: 280px;
	height: 16px;
	float: left;
	font-size: 16px;
	line-height: 16px;
	border-bottom: 1px solid #4B4B4B;
	text-indent: 20px;
	text-decoration: none;
	overflow: hidden;
	color: #4B4B4B;
}

.samplebody #maincontent .topcontent .top_more { /* 「もっと見る」の表示用エリアを float を用いて、h3タグ領域の右側に用意します */
	background: url(../img/lst/list_arrow_blue_normal.gif) 0.5em center no-repeat;
	margin: 0;
	padding: 0;
	width: 80px;
	height: 30px;
	float: left;
	font-size: 12px;
	line-height: 30px;
	border-bottom: 1px solid #051394;
	text-indent: 18px;
	text-decoration: none;
	overflow: hidden;
}


.samplebody #maincontent .topcontent .hottopic { /* コンテンツ上部の画像エリア（ホットトピック）の描画領域を用意します */
	background: url(../img/bg/bg_main_hottopic.gif) no-repeat;
	width: 370px;
	height: 80px;
	margin: 10px 0 0 0;
	padding: 0;
}

.samplebody #maincontent .topcontent .hottopic .image { /* 画像エリアの画像表示です */
	float: left;
	width: 74px;
	height: 74px;
	margin: 3px 3px;
	padding: 0;
}

.samplebody #maincontent .topcontent .hottopic .content { /* 画像エリア右側のテキスト表示です */
	float: right;
	width: 270px;
	height: 74px;
	margin: 0 5px 0 0;
	padding: 0;
	font-size: 12px;
	line-height: 18px;
	overflow: hidden; /* overflow: hidden を設定することで、テキストが表示エリアからはみ出た場合に「はみ出た部分を非表示とする」ことが出来ます */
}

.samplebody #maincontent .topcontent .hottopic .content h4 { /* 画像エリア右側のテキストのタイトルです */
	font-size: 14px;
	line-height: 14px;
	margin: 5px 0 0 8px;
	padding: 0;
}

.samplebody #maincontent .topcontent .hottopic .content p { /* 画像エリア右側のテキストの本文です */
	font-size: 12px;
	line-height: 18px;
	margin: 9px 0 0 8px;
	padding: 0;
}

.samplebody #maincontent .topcontent .content_main { /* トピックス本体の表示エリアです */
	margin: 5px 0 0 0;
	padding: 0;
}

.samplebody #maincontent .topcontent .content_main h4 { /* トピックス本体のリスト、左側のタイトルをh4タグで表示します */
	background: url(../img/lst/list_arrow_blue_normal.gif) 0.5em center no-repeat;
	margin: 0;
	padding: 0;
	width: 160px;
	height: 30px;
	float: left;
	font-size: 12px;
	line-height: 30px;
	border-top: 1px dotted #051394;
	text-indent: 20px;
	overflow: hidden;
}

.samplebody #maincontent .topcontent .content_main p { /* トピックス本体のリスト、右側の本文をpタグで表示します */
	margin: 0;
	padding: 0;
	width: 200px;
	height: 30px;
	float: left;
	font-size: 12px;
	line-height: 30px;
	border-top: 1px dotted #051394;
	text-indent: 5px;
	overflow: hidden;
}


/* メインコンテンツ下側 1列本文表示 */

.samplebody #maincontent .main_header { /* メインコンテンツ本文のタイトル＋表示切り替えタブ表示用ヘッダー */
	margin: 5px 0 0 0;
	padding: 0;
	border-bottom: 2px solid #4B4B4B; /* タブ下側の下線をここで描画します */
}

.samplebody #maincontent .main_header a {
	text-decoration: underline;
	color: #FF0000;
}

.samplebody #maincontent .main_header a:hover {
	text-decoration: underline;
	color: #00cc66;
}

.samplebody #maincontent .main_header h3 { /* メインコンテンツ本文のタイトルをh3タグで実装します */
	background: url(../img/bg/bg_main_topicicon.gif) no-repeat left top;
	margin: 0;
	padding: 6px 0 6px 0;
	width: 740px;
	height: 18px;
	float: left;
	font-size: 18px;
	line-height: 18px;
	border-bottom: 1px solid #4B4B4B;
	text-indent: 20px;
	text-decoration: none;
	overflow: hidden;
	color: #666666;
}

.samplebody #maincontent .main_header TH { /* メインコンテンツ本文のタイトルをTHタグで実装します */
  font-size         : 10pt;
/*  background        : #ffffd9;
  border            : 1px solid #666666;
  padding           : 3px;*/
}

.samplebody #maincontent .main_header TD { /* メインコンテンツ本文のタイトルをTDタグで実装します */
  font-size         : 10pt;
/*  background        : #ffffd9;
  border            : 1px solid #666666;
  padding           : 3px;*/
}


.samplebody #maincontent .main_header .top_more { /* メインコンテンツ本文に対する「別のコンテンツ」へのリンク場所をh3タグ領域の右側に用意します */
	background: url(../img/lst/list_arrow_blue_normal.gif) 0.5em center no-repeat;
	margin: 0;
	padding: 0;
	width: 240px;
	height: 30px;
	float: left;
	font-size: 14px;
	line-height: 30px;
	border-bottom: 1px solid #4B4B4B;
	text-indent: 22px;
	text-decoration: none;
	overflow: hidden;
}
.samplebody #maincontent .main_header ul.tab { /* コンテンツのタブ切り替えをリストで実装します */
	list-style-type: none;
	margin: 15px 0 0 0;
	padding: 0;
}

.samplebody #maincontent .main_header ul.tab li.normal { /* 非選択のタブ表示設定 */
	background: url(../img/btn/btn_main_tab.jpg) no-repeat;
	text-indent: 28px;
	width: 227px;
	height: 38px;
	margin: 0 0 0 15px;
	padding: 13px 0 0 0;
	float: left;
	font-size: 14px;
	line-height: 38px;
}

.samplebody #maincontent .main_header li.selected { /* 選択中のタブ表示設定 */
	background: url(../img/btn/btn_main_tab_selected.jpg) no-repeat;
	text-indent: 30px;
	width: 227px;
	height: 45px;
	margin: 0 0 0 15px;
	padding: 6px 0 0 0;
	font-size: 16px;
	float: left;
	color: #ffffff;
	line-height: 45px;
}

.samplebody #maincontent p.main_textarea { /* メインコンテンツ本文領域 */
	margin: 10px 20px 0 20px;
	padding: 0;
	width: 720px;
	font-size: 14px;
	line-height: 22px;
	color: #333;
}

.samplebody #maincontent .btn_pagetop { /* 「このページの先頭へ」ボタンを画面に対して右揃えで表示します */
	background: url(../img/lst/list_arrow_blue_up.gif) 0 0.6em no-repeat;
	font-size: 12px;
	line-height: 20px;
	height: 20px;
	text-indent: 15px;
	margin: 0 20px 0 20px;
	padding: 0;
	float: right;
}

.samplebody #maincontent .btn_pagetop_cover {
	margin: 5px 0 0 0;
	padding: 0;
	width: 100%;
}

.samplebody #maincontent .btn_pagetop_cover a {
	text-decoration: none;
	color: #333;
}

.samplebody #maincontent .btn_pagetop_cover a:hover {
	text-decoration: underline;
	color: #4B4B4B;
}



/* サイドメニュー右 */

.samplebody #sidemenu_r {
	margin: 0;
	padding: 0;
	float: right;
	width: 240px;
}

.samplebody #sidemenu_r a:link { color: #333333; text-decoration: none; } /* text-decoration を none に設定することで、リンクの下線を非表示に出来ます */
.samplebody #sidemenu_r a:visited { color: #333333; text-decoration: none;  }
.samplebody #sidemenu_r a:hover { color: #ff3333; text-decoration: underline;  } /* マウスオーバー時にはリンクの下線を表示するように、underline設定をしています */
.samplebody #sidemenu_r a:active { color: #333333; text-decoration: none;  }

.samplebody #sidemenu_r h3 { /* サイドメニューの各カテゴリのヘッダーを h3 タグで実装します */
	background: url(../img/bg/c_b_bg_sidemenu_header_arrow.gif) no-repeat;
	width: 100%;
	height: 30px;
	text-indent: 22px;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: normal;
	line-height: 32px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	display: block;
	cursor: pointer;
}

.samplebody #sidemenu_r h3 a:link, .samplebody #sidemenu_r h3 a:visited, .samplebody #sidemenu_r h3 a:active {
	display: block;
	color: #FFFFFF;
	text-decoration: none;
}

.samplebody #sidemenu_r h3 a:hover {
	color: #FFFFFF;
	text-decoration: underline;
}

.samplebody #sidemenu_r .top-margin15 { /* メニュー間の高さ調整に使用します */
	margin-top: 15px;
}

.samplebody #sidemenu_r .cover { /* サイドメニューの表示エリアの左右部分の枠だけを用意します */
	margin: 0;
	padding: 0;
	font-size: 12px;
	line-height: 1.5em;
	border-left: 1px solid #051394; /* 左側の枠をborder-leftで描画します */
	border-right: 1px solid #051394; /* 右側の枠をborder-rightで描画します */
}

.samplebody #sidemenu_r .cover_footer { /* サイドメニューの表示エリアの下側の枠は角が丸いので、画像で用意します */
	background: url(../img/bg/c_b_bg_sidemenu_footer.gif) no-repeat;
	width: 220px;
	height: 2px;
	margin: 0;
	padding: 0;
}

.samplebody #sidemenu_r ul.link { /* サイドメニューの各要素はリストで用意します */
	list-style-type: none; /* リストのマーカーをオリジナルの画像で設定するので、標準のリストマーカーを使用しない設定にします */
	margin: 0;
	padding: 0;
}

.samplebody #sidemenu_r ul.link li { /* サイドメニューの各要素を表示するリストの表示設定です */
	background: url(../img/lst/list_arrow_blue_normal.gif) 1.0em 0.8em no-repeat; /* リストのマーカーを画像で設定します */
	text-indent: 2.2em;
	font-size: 12px;
	height: 22px;
	line-height: 22px;
	margin: 0 0 0 0;
	padding: 2px 0 2px 0;
	border-bottom: 1px dotted #051394; /* 各リストの下側に境界線の点線を描画します */
	text-decoration: none;
	cursor: pointer; /* cursor: pointerを設定することで、リストの表示領域にマウスカーソルがオーバーした時点でカーソルがクリック可能カーソルに変化します */
}

.samplebody #sidemenu_r ul.link li a {
	text-indent: 2.2em;
	font-size: 12px;
	height: 22px;
	line-height: 22px;
	margin: 0 0 0 0;
	padding: 0 0 2px 0;
	cursor: pointer;
	display: block;
	outline: none;
}

.samplebody #sidemenu_r ul.link li.lastitem { /* 各リストの最終アイテムについては、下側の境界線を描画しないようにします */
	background: url(../img/lst/list_arrow_blue_normal.gif) 1.0em 0.8em no-repeat;
	text-indent: 2.2em;
	font-size: 12px;
	height: 22px;
	line-height: 22px;
	margin: 0 0 0 0;
	padding: 2px 0 0 0;
	border-bottom: none; /* 先程の "border-bottom: 1px dotted #cccccc;" と比較すると、ここでは下線が描画されないことが分かります */
}

.samplebody #sidemenu_r .onepoint { /* ワンポイント画像メニューの画像設定 */
	background: url(../img/img/img_sidemenu_onepoint.jpg) no-repeat center top;
	width: 240px;
	height: 87px;
	padding: 0;
	margin: 0;
	font-size: 12px;
	font-weight: normal;
	line-height: 18px;
	color: #051394;
}

.samplebody #sidemenu_r .onepoint a {
	margin: 0;
	padding: 8px 8px 8px 71px;
	color: #051394;
	cursor: pointer;
	outline: none;
	display: block;
}

.samplebody #sidemenu_r .onepoint a:hover {
	color: #051394;
}


/* サイドメニューに協賛会社のリンク */

.samplebody #sidemenu_r .btn_sidemenu1 {/* サイドナビゲーション１ */
	float: left;
	width: 240px;
	height: 80px;
	margin: 0;
	padding: 0;
	background: url(../img/btn/b_side_gbtn1.png) no-repeat;
}

.samplebody #sidemenu_r .btn_sidemenu1 a:hover {
	background: url(../img/btn/b_side_gbtn1_over.png) no-repeat;
}

.samplebody #sidemenu_r .btn_sidemenu1 a {
	width: 240px;
	height: 80px;
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	outline: none;
}

.samplebody #sidemenu_r .btn_sidemenu2 {/* サイドナビゲーション２ */
	float: left;
	width: 240px;
	height: 52px;
	margin: 0;
	padding: 0;
	background: url(../img/btn/b_side_gbtn2.png) no-repeat;
}

.samplebody #sidemenu_r .btn_sidemenu2 a:hover {
	background: url(../img/btn/b_side_gbtn2_over.png) no-repeat;
}

.samplebody #sidemenu_r .btn_sidemenu2 a {
	width: 240px;
	height: 52px;
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	outline: none;
}

.samplebody #sidemenu_r .btn_sidemenu3 {/* サイドナビゲーション３ */
	float: left;
	width: 240px;
	height: 52px;
	margin: 0;
	padding: 0;
	background: url(../img/btn/b_side_gbtn3.png) no-repeat;
}

.samplebody #sidemenu_r .btn_sidemenu3 a:hover {
	background: url(../img/btn/b_side_gbtn3_over.png) no-repeat;
}

.samplebody #sidemenu_r .btn_sidemenu3 a {
	width: 240px;
	height: 52px;
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	outline: none;
}

.samplebody #sidemenu_r .btn_sidemenu4 {/* サイドナビゲーション４ */
	float: left;
	width: 240px;
	height: 52px;
	margin: 0;
	padding: 0;
	background: url(../img/btn/b_side_gbtn4.png) no-repeat;
}

.samplebody #sidemenu_r .btn_sidemenu4 a:hover {
	background: url(../img/btn/b_side_gbtn4_over.png) no-repeat;
}

.samplebody #sidemenu_r .btn_sidemenu4 a {
	width: 240px;
	height: 52px;
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	outline: none;
}

.samplebody #sidemenu_r .btn_sidemenu5 {/* サイドナビゲーション５ */
	float: left;
	width: 240px;
	height: 52px;
	margin: 0;
	padding: 0;
	background: url(../img/btn/b_side_gbtn5.png) no-repeat;
}

.samplebody #sidemenu_r .btn_sidemenu5 a:hover {
	background: url(../img/btn/b_side_gbtn5_over.png) no-repeat;
}

.samplebody #sidemenu_r .btn_sidemenu5 a {
	width: 240px;
	height: 52px;
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	outline: none;
}

.samplebody #sidemenu_r .btn_sidemenu6 {/* サイドナビゲーション６ */
	float: left;
	width: 240px;
	height: 52px;
	margin: 0;
	padding: 0;
	background: url(../img/btn/b_side_gbtn6.png) no-repeat;
}

.samplebody #sidemenu_r .btn_sidemenu6 a:hover {
	background: url(../img/btn/b_side_gbtn6_over.png) no-repeat;
}

.samplebody #sidemenu_r .btn_sidemenu6 a {
	width: 240px;
	height: 52px;
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	outline: none;
}

/* chapter6-1で修正・追加 */

/* フッター */

.samplebody #footer {
	background: #000000;
	padding: 12px 0 10px 0;
	margin: 0;
	width: 100%;
	color: #FFFFFF;
	font-size: 12px;
	text-align: center;
	line-height: 22px;
}

.samplebody #footer a {
	color: #ffffff;
	text-decoration: none;
}

.samplebody #footer a:hover {
	text-decoration: underline;
}

.samplebody #footer ul {
	display: inline; /* display: inline を設定することで、横方向表示リスト（一行表示リスト）を作成できます */
	margin: 0;
	padding: 0;
	border-left: 1px solid #ffffff; /* ul の左側境界線と、li の右側境界線により、表示項目間のセパレータ（境界線）を描画します */
}

.samplebody #footer li {
	display: inline; /* display: inline を設定することで、横方向表示リスト（一行表示リスト）を作成できます */
	padding-left: 7px;
	padding-right: 7px;
	border-right: 1px solid #ffffff; /* ul の左側境界線と、li の右側境界線により、表示項目間のセパレータ（境界線）を描画します */
}

.samplebody #footer p {
	margin: 0;
	padding: 5px 0;
}


/* プルダウンメニューの追加 */

#dropmenu {
  list-style-type: none;
  width: 960px;
  margin: 0px auto 0px;
  padding: 0;
  position: fixed; /*relative→fixed */
z-index: 100 /*一番前に持ってきた */
}
#dropmenu li {
  position: relative;
  width: 20%;
  float: left;
  margin: 0;
  padding: 0;
  text-align: center;
}
#dropmenu li a {
  display: block;
  margin: 0;
  padding: 16px 0;
  background: #ff9900;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  text-decoration: none;
}
#dropmenu li ul {
  list-style: none;
  position: absolute;
  z-index: 100;
  top: 100%;
  left: 0;
  width: 100%;
  margin: 0;
  padding: 0;
}
#dropmenu li ul li {
  overflow: hidden;
  width: 100%;
  height: 0;
  color: #fff;
  transition: .2s;
}
#dropmenu li ul li a {
  padding: 13px 15px;
  background: #ff0000;
  text-align: left;
  font-size: 12px;
  font-weight: normal;
}
#dropmenu > li:hover > a {  background: #ff0000 }
#dropmenu > li:hover li:hover > a {  background: #cc0000 }
#dropmenu > li:hover > ul > li {
  overflow: visible;
  height: 38px;
}
#dropmenu li ul li ul {
  top: 0;
  left: 100%;
}
#dropmenu li:last-child ul li ul {
  left: -100%;
  width: 100%;
}
#dropmenu li ul li ul:before {
  position: absolute;
  content: "";
  top: 13px;
  left: -20px;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-left-color: #cc9900;
}
#dropmenu li:last-child ul li ul:before {
  position: absolute;
  content: "";
  top: 13px;
  left: 200%;
  margin-left: -20px;
  border: 5px solid transparent;
  border-right-color: #cc9900;
}
#dropmenu li ul li:hover > ul > li {
  overflow: visible;
  height: 38px;
}
#dropmenu li ul li ul li a {  background: #616d0b }
#dropmenu li:hover ul li ul li a:hover {  background: #005ebb }