/*-------------------------------------------------------------------------
 * motion　個別スタイル　motion20.css;
 *
 *-------------------------------------------------------------------------*/
 
/*-------------------------------------------------------
 	21-01)　スライド処理
-------------------------------------------------------- */
.panl_2101 {
	margin: 10px 0 10px 50px;;
	width: 400px;
	background: gray;
	background-color: #D8E2FA;
}
.panl_2101 dt{
	background:#7CADB6;
	border-bottom:1px solid #FFFFFF;
	cursor:pointer;
}
.panl_2101 dd{
	border:1px solid #7CADB6;
	border-top:none;
	height:300px;
	overflow:hidden;
}
.panl_2101 dd p{
	padding:  5px 10px 5px 10px;
}

/*-------------------------------------------------------
 	21-03) 自動スライド処理
-------------------------------------------------------- */
.mode_213{
	margin: 10px 0 10px 50px;;
	width: 400px;
}
.mode_213 ul {
}
.mode_213 li {
	float: left;
	width: 60px; 						/*ｾﾙの幅*/
	padding: 10px 0 0 20px;
	height: 30px;
	font-weight: bold;
	background-color: burlywood;
	list-style-type: none;
}
.mode_213 li a.selected{
	background:red;
}

/*-------------------------------------------------------
 	第2章 2-3
-------------------------------------------------------- */
.mode_231{
	margin: 10px 0 10px 50px;;
	width: 400px;
}
.mode_231 ul {
	width:400px;
}
.mode_231 li {
	float:left;
	padding: 0 0 0 20px;
	font-weight: bold;
	color: #446699;
	list-style-type: none;
}

/*-------------------------------------------------------
	31-02)	自動スライド＋選択処理
-------------------------------------------------------- */
.mode_3102{
	margin: 10px 0 10px 50px;;
	width: 400px;
}
.mode_3102 ul {
	width:400px;
}
.mode_3102 li {
	float:left;
	width: 60px; 					/*ｾﾙの幅*/
	height: 30px;
	padding: 10px 0 0 20px;
	font-weight: bold;
	font-size:16px;
	color: #446699;
	list-style-type: none;
	background-color: burlywood;
}
.mode_3102 li a.selected{
	background:red;
}
/*-------------------------------------------------------
 	21-06) シンプルなアコーディオンを作る　　たて型
-------------------------------------------------------- */	
.mode_2106{
}

.mode_2106 dl{
	width:600px;
	margin:50px auto;
}
.mode_2106 dt{
	line-height:35px;
	font-size:large;
	text-indent:3em;
	font-weight:bold;
	color:white;
	height:35px;
	cursor:pointer;
	background:url("../images/ani_background.jpg")
}
.mode_2106 dd.d01{
	margin:0;
	height:300px;
	background:#D4D0C8;
}
.mode_2106 dd p{
	margin:0;
	text-indent:1em;
	padding:20px;
}
/*-------------------------------------------------------
 	21-07) 使い勝手のいいアコーディオンを作る たて型、マウスオーバー
-------------------------------------------------------- */	
.mode_2107{
}
.mode_2107 dl{
	width:600px;
	margin:50px auto;
}
.mode_2107 dt{
	line-height:35px;
	font-size:large;
	text-indent:3em;
	font-weight:bold;
	color:white;
	height:35px;
	background:url("../images/ani_background.jpg")
}
.mode_2107 dt.over{
	background:url("../images/ani_background-over.jpg");
	cursor:pointer;
}
.mode_2107 dt.selected{
	background:url("../images/ani_background_selected.jpg");
	cursor:default;
	color:black;
}
.mode_2107 dd.d02,
.mode_2107 dd.d04{
	height:300px;
	background:#D4D0C8;
}
.mode_2107 dd p{
	text-indent:1em;
	padding:20px;
}


/*-------------------------------------------------------
 	21-08.　アコーディオンを横向きに展開する　　横型、マウスオーバー
-------------------------------------------------------- */	
.mode_2108{
	width:600px;
	height:300px;
	margin:50px auto;
	overflow:hidden;
}
.mode_2108 dl{
	width:600px;
	height:300px;
}
.mode_2108 dt{
	width:35px;
	height:300px;
	float:left;
}
.mode_2108 dt span{
	display:block;
	width:100%;
	height:100%;
	text-indent:-9999px;
}
.mode_2108 dt span.over{
	cursor:pointer;
}
.mode_2108 dt span.selected{
	cursor:default;
}
.mode_2108 dt.step1 span{
	background:url("../images/ani_background-1.jpg");
}
.mode_2108 dt.step1 span.over{
	background:url("../images/ani_background-1-over.jpg");
}
.mode_2108 dt.step1 span.selected{
	background:url("../images/ani_background-1-selected.jpg");
}
.mode_2108 dt.step2 span{
	background:url("../images/ani_background-2.jpg");
}
.mode_2108 dt.step2 span.over{
	background:url("../images/ani_background-2-over.jpg");
}
.mode_2108 dt.step2 span.selected{
	background:url("../images/ani_background-2-selected.jpg");
}
.mode_2108 dt.step3 span{
	background:url("../images/ani_background-3.jpg");
}
.mode_2108 dt.step3 span.over{
	background:url("../images/ani_background-3-over.jpg");
}
.mode_2108 dt.step3 span.selected{
	background:url("../images/ani_background-3-selected.jpg");
}
.mode_2108 dd.d03,
.mode_2108 dd.d05{
	margin:0;
	width:495px;
	height:300px;
	float:left;
	background:#D4D0C8;
	overflow:hidden;
}
.mode_2108 dd  p{
	width:450px;
	text-indent:1em;
	padding:20px;
}

/*-------------------------------------------------------
 	21-09)  基本のﾀﾌﾞﾊﾟﾈﾙの作り方
-------------------------------------------------------- */	
#info_2109{
	width:500px;
}
#info_2109 ul.tab{
	padding:0;
}
#info_2109 ul.tab li{
	list-style-type:none;
	width:100px;
	height:40px;
	float:left;
}
#info_2109 ul.tab li a{
	outline:none;
	background:url("../images/ani_tab.jpg");
	display:block;
	color:blue;
	line-height:40px;
	text-align:center;
}
#info_2109 ul.tab li a.selected{
	background:url("../images/ani_tab_selected.jpg");
	text-decoration:none;
	color:#333;
	cursor:default;
}
#info_2109 ul.panel{
	clear:both;
	border:1px solid #9FB7D4;
	border-top:none;
	padding:0;
}
#info_2109 ul.panel li{
	list-style-type:none;
	padding:10px;
	text-indent:1em;
	color:#333;
}
/*-------------------------------------------------------
 	21-10. アニメーション効果でリッチなﾀﾌﾞﾊﾟﾈﾙに
-------------------------------------------------------- */	
#info_2110{
	width:500px;
}
#info_2110 ul.tab{
	padding:0;
}
#info_2110 ul.tab li{
	list-style-type:none;
	width:100px;
	height:40px;
	float:left;
}
#info_2110 ul.tab li a{
	outline:none;
	background:url("../images/ani_tab.jpg");
	display:block;
	color:blue;
	line-height:40px;
	text-align:center;
}
#info_2110 ul.tab li a.selected{
	background:url("../images/ani_tab_selected.jpg");
	text-decoration:none;
	color:#333;
	cursor:default;
}
#info_2110 ul.panel{
	clear:both;
	border:1px solid #9FB7D4;
	border-top:none;
	padding:0;
}
#info_2110 ul.panel li{
	list-style-type:none;
	padding:10px;
	text-indent:1em;
	color:#333;
}


/*-------------------------------------------------------
 	21-11. 簡単に更新できるﾀﾌﾞﾊﾟﾈﾙ　id要素
-------------------------------------------------------- */	
#info_2111{
	width:500px;
}
#info_2111 ul.tab{
	padding:0;
}
#info_2111 ul.tab li{
	list-style-type:none;
	width:100px;
	height:40px;
	float:left;
}
#info_2111 ul.tab li a{
	outline:none;
	background:url("../images/ani_tab.jpg");
	display:block;
	color:blue;
	line-height:40px;
	text-align:center;
}
#info_2111 ul.tab li a.selected{
	background:url("../images/ani_tab_selected.jpg");
	text-decoration:none;
	color:#333;
	cursor:default;
}
#info_2111 p.panel{
	clear:both;
	border:1px solid #9FB7D4;
	border-top:none;
	padding:10px;
	text-indent:1em;
	color:#333;
}
/*-------------------------------------------------------
 	3-4-1-3-2. 簡単に更新できるﾀﾌﾞﾊﾟﾈﾙ　クラス要素　s3-4-3 
-------------------------------------------------------- */	
.mode_3414{
	width:500px;
}
.mode_3414 ul.tab{
	padding:0;
}
.mode_3414 ul.tab li{
	list-style-type:none;
	width:100px;
	height:40px;
	float:left;
}
.mode_3414 ul.tab li a{
	outline:none;
	background:url("../images/ani_tab.jpg");
	display:block;
	color:blue;
	line-height:40px;
	text-align:center;
}
.mode_3414 ul.tab li a.selected{
	background:url("../images/ani_tab_selected.jpg");
	text-decoration:none;
	color:#333;
	cursor:default;
}
.mode_3414 p.panel{
	clear:both;
	border:1px solid #9FB7D4;
	border-top:none;
	padding:10px;
	text-indent:1em;
	color:#333;
}

/*-------------------------------------------------------
 	3-4-2. 基本のﾀﾌﾞﾊﾟﾈﾙの作り方　s3-4-1 
-------------------------------------------------------- */	
#info_342{
	width:500px;
}
#info_342 ul.tab{
	padding:0;
}
#info_342 ul.tab li{
	list-style-type:none;
	width:100px;
	height:40px;
	float:left;
}
#info_342 ul.tab li a{
	outline:none;
	background:url("../images/ani_tab.jpg");
	display:block;
	color:blue;
	line-height:40px;
	text-align:center;
}
#info_342 ul.tab li a.selected{
	background:url("../images/ani_tab_selected.jpg");
	text-decoration:none;
	color:#333;
	cursor:default;
}
#info_342 ul.panel{
	clear:both;
	border:1px solid #9FB7D4;
	border-top:none;
	padding:0;
}
#info_342 ul.panel li{
	list-style-type:none;
	padding:10px;
	text-indent:1em;
	color:#333;
}
/*-------------------------------------------------------
 	21-11. 簡単に更新できるﾀﾌﾞﾊﾟﾈﾙ　id要素
-------------------------------------------------------- */	
#info_2111{
	width:500px;
}
#info_2111 ul.tab{
	padding:0;
}
#info_2111 ul.tab li{
	list-style-type:none;
	width:100px;
	height:40px;
	float:left;
}
#info_2111 ul.tab li a{
	outline:none;
	background:url("../images/ani_tab.jpg");
	display:block;
	color:blue;
	line-height:40px;
	text-align:center;
}
#info_2111 ul.tab li a.selected{
	background:url("../images/ani_tab_selected.jpg");
	text-decoration:none;
	color:#333;
	cursor:default;
}
#info_2111 p.panel{
	clear:both;
	border:1px solid #9FB7D4;
	border-top:none;
	padding:10px;
	text-indent:1em;
	color:#333;
}
/*-------------------------------------------------------
 	31-05. 簡単に更新できるﾀﾌﾞﾊﾟﾈﾙ　クラス要素
-------------------------------------------------------- */	
.mode_3106{
	width:500px;
}
.mode_3106 ul.tab{
	padding:0;
}
.mode_3106 ul.tab li{
	list-style-type:none;
	width:100px;
	height:40px;
	float:left;
}
.mode_3106 ul.tab li a{
	outline:none;
	background:url("../images/ani_tab.jpg");
	display:block;
	color:blue;
	line-height:40px;
	text-align:center;
}
.mode_3106 ul.tab li a.selected{
	background:url("../images/ani_tab_selected.jpg");
	text-decoration:none;
	color:#333;
	cursor:default;
}
.mode_3106 p.panel{
	clear:both;
	border:1px solid #9FB7D4;
	border-top:none;
	padding:10px;
	text-indent:1em;
	color:#333;
}
/*-------------------------------------------------------
 	21-12)　1.cssで装飾するシンプルなﾂｰﾙﾁｯﾌﾟ　s 
-------------------------------------------------------- */	
#info_2112{
}
#info_2112 a{color:#00CCFF;}
#info_2112 h1{
	width:80%;
	margin:10px auto;
}
#info_2112 p{margin:10px 10%;}
#info_2112 span.tooltip{
	line-height:1.5;
	color:white;
	width:200px;
	background:#FF9900;
	border:2px solid white;
	padding:1em;
	font-size:small;
}
/*-------------------------------------------------------
 	21-13)　透過GIFで作る固定位置のﾂｰﾙﾁｯﾌﾟ 
-------------------------------------------------------- */	
#info_2113{
	width:600px;
}
#info_2113 a{
	color:#FF9900;
}
#info_2113 h1{
	width:80%;
	margin:10px auto;
}
#info_2113 p{
	position:relative;
	margin:10px 10%;
}
#info_2113 div.tooltip{
	width:230px;
	position:absolute;
}
#info_2113 div.tooltip p{
	line-height:1.5;
	margin:0;
	font-size:small;
	background:url("../images/ani_tooltipBody.gif") top right;
	padding:10px 5px 0 40px;
}
#info_2113 div.tooltip img{
	vertical-align:top;
}
/*-------------------------------------------------------
 	21-14)　透過画像で作るタイマー式のﾂｰﾙﾁｯﾌﾟ　
-------------------------------------------------------- */	
#info_2114{
	width:600px;
}
#info_2114 h1{
	width:80%;
	margin:10px auto;
}
#info_2114 p{
	margin:10px 10%;
}
#info_2114 p.tooltip{
	line-height:1.5;
	color:white;
	margin:0;
	width:185px;
	height:86px;
	position:absolute;
	padding : 10px 20px 20px 10px;
	background:url("../images/ani_tooltip.png");
	font-size:small;
}
#info_2114 * html p.tooltip{
	background:none;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/ani_tooltip.png',sizingMethod='scale');
}
/*-------------------------------------------------------
 	21-15)　1. 基本のﾄﾞﾛｯﾌﾟダウンﾒﾆｭｰ s3-8-1 
-------------------------------------------------------- */	
.info_2115{
	zoom:1;
}
.info_2115 li{
	float:left;
	width:179px;
	height:48px;
	background:url("../images/ani_btn.png");
	position:relative;
	list-style-type:none;
}
.info_2115 li a{
	display:block;
	width:100%;
	height:100%;
	line-height:48px;
	text-indent:30px;
	font-weight:bold;
	color:#CFDFB5;
	text-decoration:none;
}
.info_2115 li a:hover{
	background:url("../images/ani_btn_over.png");
}
.info_2115 li ul.sub1{
	position:absolute;
}
.info_2115:after {
	height:0;
	visibility:hidden;
	content:".";
	display:block;
	clear:both;
}
/*-------------------------------------------------------
 	21-16)　多階層対応のﾄﾞﾛｯﾌﾟダウンﾒﾆｭｰ
-------------------------------------------------------- */	
.info_2116{
	zoom:1;
}
.info_2116 li{
	float:left;
	width:179px;
	height:48px;
	background:url("../images/ani_btn.png");
	position:relative;
	list-style-type:none;
}
* html .info_2116 li{
	display:inline;
	zoom:1;
}
*+html .info_2116 li{
	display:inline;
	zoom:1;
}
.info_2116 li a{
	display:block;
	width:100%;
	height:100%;
	line-height:48px;
	text-indent:30px;
	font-weight:bold;
	color:#CFDFB5;
	text-decoration:none;
	position:relative;
}
.info_2116 li a:hover{
	background:url("../images/ani_btn_over.png");
}
.info_2116 ul.sub2{display:none;}
* html .info_2116 ul.sub2{
	zoom:1;
	position:relative;
}
*+html .info_2116 ul.sub2{
	zoom:1;
	position:relative;
}
.info_2116 ul.sub2 li{
	float:none;
}
.info_2116 ul.sub2 li ul.sub2{
	position:absolute;
	left:179px;
	top:0;
}
.info_2116:after {
	height:0;
	visibility:hidden;
	content:".";
	display:block;
	clear:both;
}
/*-------------------------------------------------------
 	21-17)　1. 『閉じる』ﾎﾞﾀﾝでさらに使いやすく
-------------------------------------------------------- */	
#info_2117{}
#info_2117 dl dt{
	margin:20px 50px;
	font-size:large;
	border:1px solid #7BAEB5;
	border-left:1em solid #7BAEB5;
	padding-left:10px;
	width:600px;
	cursor:pointer;
}
*html #info_2117 dl dt{margin:10px 20px;}			/*for IE6 hack*/
#glayLayer_2117{
	display:none;
	position:fixed;
	left:0;
	top:0;
	height:100%;
	width:100%;
	background:#7BAEB5;
	filter:alpha(opacity=75);
	opacity: 0.75;
}
*html #glayLayer_2117{		/*for IE6 hack*/
	position:absolute;
	height:800px;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/ani_black.png',sizingMethod='scale');
	filter:alpha(opacity=60);
	opacity: 0.60;
}
#overLayer_2117{
	display:none;
	width:400px;
	background:white;
	padding:10px;
	position: fixed;
	top:50%;
	left:50%;
}
#overLayer_2117 img.close{
	position:absolute;
	top:-23px;
	right:0px; 	
	cursor:pointer;
}
*html #overLayer_2117{position: absolute;}			/*for IE6 hack*/
/*-------------------------------------------------------
 	3-9
-------------------------------------------------------- */	
.msg_line{
	margin:20px 50px;
	font-size:large;
	border-left:10px solid #7BAEB5;
	border-bottom:1px solid #7BAEB5;
	padding:10px;
	width:600px;
}

/*------------------------------------------------
 	31-07)　カルーセルパネルを自動的にスライドさせる 
-------------------------------------------------- */	
#move_3107Wrap{
	margin:10px auto;
	width:620px;
	height:135px;
	padding:5px;
	background:url("../images/ani_background.gif");
	position:relative;
}

#move_3107Prev{
	position:absolute;
	top:65px;
	left:-8px;
	cursor:pointer;
}
#move_3107Next{
	position:absolute;
	top:65px;
	right:-8px;
	cursor:pointer;
}
#move_3107{
	width:100%;
	height:100%;
	overflow:hidden;
}

#move_3107Inner ul.column{
	width:605px;
	height:105px;
	padding:15px 0 15px 15px;
	list-style-type:none;
	float:left;
}
#move_3107Inner ul.column li{
	float:left;
	margin-right:10px;
	display:inline;
}
#move_3107Inner ul.column li img{border:none;}
/*-------------------------------------------------------
 	31-08)　カルーセルパネルを1画像のみ自動的にスライドさせる 
-------------------------------------------------------- */	
#move_3108Wrap{
	margin: 0 auto;
	width: 180px;
	height: 130px;
	padding: 5px;
	position: relative;
}
#move_3108Prev{
	position:absolute;
	top:65px;
	left:-8px;
	cursor:pointer;
}
#move_3108Next{
	position:absolute;
	top:65px;
	right:-8px;
	cursor:pointer;
}
#move_3108{
	width:100%;
	height:100%;
	overflow:hidden;
	}
#move_3108 li{
	float:left;
	margin-right:10px;
	padding:15px 0 15px 15px;
	list-style-type:none;
	display:inline;
}
#move_3108 li img{border:none;}
/*-------------------------------------------------------
 	31-09) カルーセルパネルを1画像のみ自動的にスライドさせる 
-------------------------------------------------------- */	
#move_3109Wrap{
	margin: 0 auto;
	width: 400px;
	height: 300px;
	padding: 5px;
	position: relative;
}

#move_3109Prev{
	position:absolute;
	top:65px;
	left:-30px;
	cursor:pointer;
}
#move_3109Next{
	position:absolute;
	top:65px;
	right:-30px;
	cursor:pointer;
}
#move_3109{
	width:100%;
	height:100%;
	overflow:hidden;
	}
#move_3109 li{
	float:left;
	margin-right:10px;
	padding:15px 0 15px 15px;
	list-style-type:none;
	display:inline;
}
#move_3109 li img{border:none;}
/*-------------------------------------------------------
 	31-10) 自動的にスライドさせる
-------------------------------------------------------- */	
#move_3110Wrap{
	margin: 0 auto;
	width: 400px;
	height: 300px;
	padding: 5px;
	position: relative;
}

#move_3110Prev{
	position:absolute;
	top:65px;
	left:-30px;
	cursor:pointer;
}
#move_3110Next{
	position:absolute;
	top:65px;
	right:-50px;
	cursor:pointer;
}
#move_3110{
	width:100%;
	height:100%;
	overflow:hidden;
	}
#move_3110 li{
	float:left;
	margin-right:10px;
	padding:15px 0 15px 15px;
	list-style-type:none;
	display:inline;
}
#move_3110 li img{	border:none;}
/*-------------------------------------------------------
 	31-11)　カルーセルパネルを1画像のみ自動的にスライドさせる　 
-------------------------------------------------------- */	
#move_3111Wrap{
	margin: 0 auto;
	width: 400px;
	height: 300px;
	padding: 5px;
	position: relative;
}
#move_3111Prev{
	position:absolute;
	top:65px;
	left:-30px;
	cursor:pointer;
}
#move_3111Next{
	position:absolute;
	top:65px;
	right:-30px;
	cursor:pointer;
}
#move_3111{
	width:100%;
	height:100%;
	overflow:hidden;
	}
#move_3111 li{
	float:left;
	margin-right:10px;
	padding:15px 0 15px 15px;
	list-style-type:none;
	display:inline;
}
#move_3111 li img{border:none;}
/*-------------------------------------------------------
 	31-12)　カルーセルパネルを1画像のみ自動的にスライドさせる　 
-------------------------------------------------------- */	
#move_3112Wrap{
	margin: 0 auto;
	width: 400px;
	height: 300px;
	padding: 5px;
	position: relative;
}
#move_3112Prev{
	position:absolute;
	top:65px;
	left:-30px;
	cursor:pointer;
}
#move_3112Next{
	position:absolute;
	top:65px;
	right:-30px;
	cursor:pointer;
}
#move_3112{
	width:100%;
	height:100%;
	overflow:hidden;
	}
#move_3112 li{
	float:left;
	margin-right:10px;
	padding:15px 0 15px 15px;
	list-style-type:none;
	display:inline;
}
#move_3112 li img{border:none;}

/*-------------------------------------------------------
 	3-2-4.　画像の追加に対応、スライド式ギャラリーに改造する s3-2-3 
-------------------------------------------------------- */	
/*　ﾘｽﾄ領域 */
#navi_324{
	width:300px;
	float:left;
	overflow:hidden;
}
#navi_324 .pageWrap{
	width:900px;
}
#navi_324 .pageWrap .page{
	width:300px;
	float:left;
}
#navi_324 ul{
	height:300px;
}
#navi_324 li{
	list-style-type:none;
	width:150px;
	float:left;
}
#navi_324 li img{
	border:3px solid white;
}
#navi_324 p{
	clear:both;
	width:300px;
	padding:10px 0;
	text-align:center;
}
#navi_324 p img{
	cursor:pointer;
}
/*　表示領域　*/
#main_324{
	width:300px;
	float:right;
}
#main_324 img{
	position:absolute;
	border:3px solid white;
}
/*-------------------------------------------------------
 	3-7-5. クロスﾌﾞﾗｳｻﾞｰで使える透過PNG対応のロールオーバー s3-7-4 
-------------------------------------------------------- */	
#info_375{
	width:600px;
	height:400px;
	background:url("../images/ani_background.jpg");
	margin:10px auto;
}
#info_375 ul{
	padding: 10px;
	margin:0;
}
#info_375 ul li{
	width:140px;
	height:40px;
	list-style-type:none;
	float:left;
}
#info_375 ul li img{
	width:140px;
	height:40px;
	border:none;
}
/*-------------------------------------------------------
 	3-9-4. IE限定のSetExpressionを使う s3-9-3 
-------------------------------------------------------- */	
#info_394{
	float:left;
}
#info_394 ul{
	width:680px;
}
#info_394 ul li{
	float:left;
	list-style-type:none;
}
#info_394 ul li img{
	border:0;
	margin:10px;
}
#glayLayer_394{
	display:none;
	position:fixed;
	left:0;
	top:0;
	height:100%;
	width:100%;
	background:black;
	filter:alpha(opacity=60);
	opacity: 0.60;
}
*html #glayLayer_394{position:absolute;}			/*for IE6 hack*/
#overLayer_394{
	display:none;
	position: fixed;
	top:50%;
	left:50%;
	margin-top:-244px;
	margin-left:-325px;
}
*html #overLayer_394{position: absolute;}			/*for IE6 hack*/
/*-------------------------------------------------------
 	3-9
-------------------------------------------------------- */	
.msg_line{
	margin:20px 50px;
	font-size:large;
	border-left:10px solid #7BAEB5;
	border-bottom:1px solid #7BAEB5;
	padding:10px;
	width:600px;
}
*html .msg_line{margin:10px 20px;}			/*for IE6 hack*/
/*-------------------------------------------------------
 	41-01.　CSS3を使った実装（ストライプテーブル） 
-------------------------------------------------------- */
#tbl_411{
	width: 600px;
	float: left;
	margin: 10px 0 0 35px;
}
#tbl_411 tr{
	height:30px;					/* ｾﾙの高さ　*/			
	background-color: #99CCFF;		/* 水色　*/
}
#tbl_411 tr:nth-child(even){
	background-color:#C0C0C0;		/* 灰色　*/
}
#tbl_411 th{
	width:120px;					/*ｾﾙのサイズ幅*/
	text-align:center;
	color:white;
	background-color:maroon;		/* 栗色　*/		
}
#tbl_411 th:nth-child(odd){
	background-color:orange;		/* オレンジ色　*/
}
#tbl_411 td{
	text-align: right;
	padding:  0 10px 0 20px;
	font-size: small;
}
#tbl_411 td.left  {text-align: left;}
#tbl_411 td.center{text-align: center;}
	
/*-------------------------------------------------------
 	41-02.　CSSのクラスを使ったストライプテーブルの実装
-------------------------------------------------------- */	
#tbl_412{
	float: left;
	margin: 10px 0 0 35px;
	width: 600px;
}	
#tbl_412 tr{
	height:30px;					/* ｾﾙの高さ　*/			
	background-color: #99CCFF;		/* 水色　*/
}
#tbl_412 tr.even{background-color: #C0C0C0;}		/*灰色*/
#tbl_412 th{
	width:120px;					/*ｾﾙのサイズ幅*/
	text-align:center;
	background-color: #000080;		/*紺色*/
	color: white;
}
#tbl_412 th.odd{background-color: #3399FF;}
#tbl_412 td{
	text-align: right;
	padding:  0 10px 0 20px;
	font-size:small;
}
#tbl_412 td.left  {text-align: left;}
#tbl_412 td.center{text-align: center;}
/*-------------------------------------------------------
 	41-03.　jqueryを使った実装1
-------------------------------------------------------- */	
#tbl_413{
	width: 600px;
	float: left;
	margin: 10px 0 0 35px;
}
#tbl_413 tr{
	height: 30px; 					/* ｾﾙの高さ　*/
	background-color: #C0C0C0;		/*薄い灰色*/
}
#tbl_413 th{
	width:120px;
	text-align:center;
	background-color:#000080;		/*紺色*/
	color:white;
}
#tbl_413 td{
	width:120px;			/*ｾﾙのサイズ幅*/
	padding:5px;
	text-align: right;
	font-size:small;
}
#tbl_413 td.left{text-align: left;}
#tbl_413 td.center{text-align: center;}
/*-------------------------------------------------------
 	41-04.　jqueryを使った実装2
-------------------------------------------------------- */	
#tbl_414{
	width: 600px;
	float: left;
	margin: 10px 0 0 35px;
}
#tbl_414 tr{
	height: 30px; 					/* ｾﾙの高さ　*/
	background-color: #C0C0C0;		/*薄い灰色*/
}
#tbl_414 .odd{background-color: #808080;}		/*濃い灰色*/
#tbl_414 .even{background-color: #99CCFF;}		/*水色*/
#tbl_414 th{
	width:120px;
	text-align:center;
	background-color:#000080;		/*紺色*/
	color:white;
}
#tbl_414 td{
	width:120px;			/*ｾﾙのサイズ幅*/
	padding:5px;
	text-align: right;
	font-size:small;
}
#tbl_414 td.left  {text-align: left;}
#tbl_414 td.center{text-align: center;}
/*-------------------------------------------------------
 	41-05.　jqueryを使った実装3
-------------------------------------------------------- */	
#tbl_415{
	width: 600px;
	float: left;
	margin: 10px 0 0 35px;
}
#tbl_415 tr{
	height: 30px; 					/* ｾﾙの高さ　*/
	background-color: #C0C0C0;		/*灰色*/
}
#tbl_415 .odd{background-color: #808080;}		/*濃灰色*/
#tbl_415 .even{background-color: #99CCFF;}		/*水色*/
#tbl_415 th{
	width:120px;
	text-align:center;
	background-color:#000080;		/*紺色*/
	color:white;
}
#tbl_415 td{
	width:120px;			/*ｾﾙのサイズ幅*/
	padding:5px;
	text-align: right;
	font-size:small;
}
#tbl_415 td.left  {text-align: left;}
#tbl_415 td.center{text-align: center;}
/*-------------------------------------------------------
 	41-06.　行のハイライト　  
-------------------------------------------------------- */	
#tbl_416{
	width: 600px;
	float: left;
	margin: 10px 0 0 35px;
}
#tbl_416 tr{
	height: 30px; 					/* ｾﾙの高さ　*/
	background-color: #C0C0C0;		/*灰色*/
}
#tbl_416 .even{background-color:#3399FF;}
#tbl_416 .odd{background-color: #808080;}		/*濃灰色*/
#tbl_416 tr:not(:first-child):hover{background-color:#00FFFF;}
#tbl_416 th{
	width:120px;
	text-align:center;
	background-color:#000080;		/*紺色*/
	color:white;
}
#tbl_416 td{
	width:120px;					/*ｾﾙのサイズ幅*/
	padding:5px;
	text-align: right;
	font-size:small;
}
#tbl_416 td.left  {text-align: left;}
#tbl_416 td.center{text-align: center;}
/*-------------------------------------------------------
 	41-07.　列のハイライト 
-------------------------------------------------------- */	
#tbl_417{
	width: 600px;
	float: left;
	margin: 10px 0 0 35px;
}
#tbl_417 tr{
	height: 30px; 					/* ｾﾙの高さ　*/
	background-color: #C0C0C0;		/*灰色*/
}
#tbl_417 .even {background-color:#3399FF;}
#tbl_417 .odd  {background-color: #808080;}		/*濃灰色*/
#tbl_417 .hover{background-color: #B2D8FF;}
#tbl_417 th{
	width:120px;
	text-align:center;
	background-color: #000080;		/*紺色*/
	color:white;
}
#tbl_417 td{
	width:120px;			/*ｾﾙのサイズ幅*/
	padding:5px;
	text-align: right;
	font-size:small;
}
#tbl_417 td.left  {text-align: left;}
#tbl_417 td.center{text-align: center;}

/*-------------------------------------------------------
 	41-08.　行列のハイライト　 
-------------------------------------------------------- */	
#tbl_418{
	width: 600px;
	float: left;
	margin: 10px 0 0 35px;
}
#tbl_418 tr{
	height: 30px; 					/* ｾﾙの高さ　*/
	background-color: #C0C0C0;		/*灰色*/
}
#tbl_418 .even{background:#3399FF;}
#tbl_418 .odd{background:#C0C0C0;}
#tbl_418 .hover{background:#B2D8FF;}
#tbl_418 th{
	width:120px;
	text-align:center;
	background-color: #000080;		/*紺色*/
	color:white;
}
#tbl_418 td{
	width:120px;			/*ｾﾙのサイズ幅*/
	padding:5px;
	text-align: right;
	font-size:small;
}
#tbl_418 td.left{text-align: left;}
#tbl_418 td.center{text-align: center;}
/*-------------------------------------------------------
 	31-13.　画像の選択　 
-------------------------------------------------------- */	
#mode_3113{
	float:left;
	width:640px;
	padding:10px;
}
* html #mode_3113{
	width:660px;
	height:425px;
}
/*-------------------------------------------------------
 	31-13.　画像の表示部　 
-------------------------------------------------------- */	
#mode_3113-img{
	width:350px;
	float:left;
	height:425px;
	background-color:#000;
	overflow:hidden;
	position:relative;
}
#mode_3113-img img{margin:0;}
#mode_3113-img p{
	padding:10px 8px;
	font-size:14px;
	line-height:20px;
	/*background-color:#000;*/
	color:#fff;
	margin:0;
}
#mode_3113-img p span{font-weight:bold;}
#mode_3113-img p span a,
#mode_3113-img p span a:active,
#mode_3113-img p span a:visited{
  color:#7d7137;
}
#mode_3113-img p span a:hover{color:#d7cea8;}
/*-------------------------------------------------------
 	31-13.　画像の選択部　 
-------------------------------------------------------- */	
#mode_3113-list{
	float:right;
	width:280px;
	margin:0;
	padding:0;
}
#mode_3113-list.scrol{
	height: 460px;
	overflow:auto;
}

#mode_3113-list li{
	margin:0px 0px 0px 0px;
	_margin:0px 0px 0px 0px;
	border-bottom:dashed 1px #999;
	padding:3px 3px 6px 17px;
	_padding:3px 3px 3px 18px;
	height:47px;
	list-style-type:none;
}
* html #mode_3113-list li{height:56px;}
#mode_3113-list li h3{
	margin:0;
	padding-top:4px;
	line-height:14px;
	font-size:13px;
	font-weight:normal;
}
#mode_3113-list li h3 a{color: #000000;}
#mode_3113-list li h3 span{
	display:block;
	font-size:12px;
	font-weight:normal;
	color:#7d7137;
	display:block;
}
#mode_3113-list li.current{
	background:url("../images/feature-back.jpg") no-repeat scroll left center transparent;
	font-weight:bold;
}
#mode_3113-list li.current h3{
	font-weight:bold;
	color:#7d7137;
}
#mode_3113-list li.current h3 a{
	font-weight:bold;
	color:#7d7137;
}
#mode_3113-list li.current h3 span{font-weight:normal;}
/*-------------------------------------------------------
 	31-13.　画像の選択　 
-------------------------------------------------------- */	
.mode_3113-img-item{
	display:none;
	left:0px;
	top:0px;
	position:absolute;
}