@charset "utf-8";

@import url(../../service/css/local.css);

/*
	デモ設定用 css

	01. body用
	02. h2ページタイトル
	03. ボタン用
	04. 事例ボタン用
	05. DEMO詳細用
	06. 機能一覧用
	
*/

/* 01. body用
************************************/

body#demo {
	background: url(../img/demo_back.jpg) repeat-x;
}

body#demo #main_contents,
body#demo_details #main_contents {
	margin: 0px 2px 10px 2px;
	width: 866px;
	height: auto;
}
*:first-child+html body#demo #main_contents,
*:first-child+html body#demo_details #main_contents {
	padding-bottom: 98px;
}

/*---- コンテンツボックス内パーツ ----*/
body#demo .tb_text_box,
body#demo .b_text_box,
body#demo_details .tb_text_box,
body#demo_details .b_text_box {
	margin: 0px auto;
	padding: 20px 0px;
	width: 822px;
	height: auto;
	line-height: 20px;
	text-align: justify;
}

body#demo .tb_text_box,
body#demo_details .tb_text_box {
	margin: 20px auto;
	border-top: 1px dotted #dddddd;
	border-bottom: 1px dotted #dddddd;
}

body#demo .b_text_box,
body#demo_details .b_text_box {
	border-bottom: 1px dotted #dddddd;
}

body#demo .text_box,
body#demo_details .text_box {
	margin: 0px auto;
	padding: 0px 0px 20px 0px;
	width: 822px;
	height: auto;
	line-height: 20px;
	text-align: justify;
}

/* 02. h2ページタイトル
************************************/

body#demo h2#page_title {
	margin: 0px 0px 20px 0px;
	padding: 10px 0px 10px 30px;
	width: 836px;
	height: auto;
	background: url(../../common/img/h2_arrow.gif) no-repeat left 17px;
	border-bottom: 1px solid #dcdcdc;
	color: #061f2f; 
}

*html body#demo h2#page_title {
	font-size: 1.6em;
}

*:first-child+html body#demo h2#page_title {
	font-size: 1.6em;
	background-position: left 19px;
}

body#demo h2.title_s {
	margin: 0px 0px 20px 0px;
	padding: 3px 0px 2px 30px;
	width: 368px;
	height: auto;
	background: #fbfbfb url(../img/h2_title_bar_s.gif) no-repeat left top;
	border: 1px solid #dcdcdc;
	font-size: 1.2em;
	color: #061f2f; 
}

body#demo h2.title_l,
body#demo_details h2.title_l {
	margin: 0px 0px 10px 0px;
	padding: 3px 0px 2px 30px;
	width: 790px;
	height: auto;
	background: #fbfbfb url(../img/h2_title_bar_l.gif) no-repeat left top;
	border: 1px solid #dcdcdc;
	font-size: 1.2em;
	color: #061f2f; 
}

/* 03. ボタン用
************************************/

p.synphos_btn {
	float: right;
	width: 168px;
}

p.synphos_btn a {
	display: block;
	margin: 0px auto;
	width: 168px;
	height: 30px;
	background: url(../img/synphos_btn.gif) no-repeat 0px 0px;
}
p.synphos_btn a:hover {
	background: url(../img/synphos_btn.gif) no-repeat 0px -30px;
}

p.demo_btn a {
	float: left;
	display: block;
	margin: 10px 10px 0px 25px;
	width: 168px;
	height: 30px;
	background: url(../img/demo_btn.gif) no-repeat 0px 0px;
}
*html p.demo_btn a {
	margin: 10px 0px 0px 15px;
}
p.demo_btn a:hover {
	background: url(../img/demo_btn.gif) no-repeat 0px -30px;
}

p.demo_btn2 a {
	display: block;
	margin: 0px auto;
	width: 168px;
	height: 30px;
	background: url(../img/demo_btn.gif) no-repeat 0px 0px;
}
p.demo_btn2 a:hover {
	background: url(../img/demo_btn.gif) no-repeat 0px -30px;
}

p.details_btn a {
	float: left;
	display: block;
	margin: 10px 10px 0px 0px;
	width: 168px;
	height: 30px;
	background: url(../img/details_btn.gif) no-repeat 0px 0px;
}
*html p.details_btn a {
	margin: 10px 0px 0px 5px;
}
p.details_btn a:hover {
	background: url(../img/details_btn.gif) no-repeat 0px -30px;
}

/* 04. デモコンテンツ一覧用
************************************/

.demo_box {
	float: left;
	margin: 20px 0px;
	padding: 0px;
	width: 400px;
	height: auto;
}


/* 05. DEMO詳細用
************************************/

body#demo_details {
	background: none;
}

body#demo_details #wrapper {
	clear: both;
	position:absolute;
	padding: 0px;
	width: 870px;
	height: 610px;
	min-height: 610px;
	top:50%;
	left:50%;
	font-size: 0.76em;
	margin: -305px 0px 0px -435px;
}

/*---- ヘッダ ----*/
body#demo_details #header {
	margin: 0px auto;
	padding: 0px;
	width: 870px;
	height: 42px;
}

body#demo_details #header h1 {
	float: left;
	width: 290px;
	height: 42px;
}

/*---- メニュー ----*/
body#demo_details #details_menu {
	float: left;
	margin: 0px;
	padding: 0px;
	width: 580px;
}

body#demo_details #details_menu ul {
	list-style: none;
}

body#demo_details #details_menu li {
	float: left;
}

body#demo_details #details_menu li.edu a,
body#demo_details #details_menu li.financial a,
body#demo_details #details_menu li.fran a,
body#demo_details #details_menu li.public a {
	display: block;
	margin: 0px;
	padding: 0px;
	width: 145px;
	height: 42px;
}
/* 教育機関 */
#details_menu li.edu a, #details_menu li.edu a:link {
	background: url(../img/demo_details_menu.gif) no-repeat 0px 0px;
}
#details_menu li.edu a:hover, #details_menu li.edu a#curent {
	background: url(../img/demo_details_menu.gif) no-repeat 0px -42px;
}
/* 金融機関 */
#details_menu li.financial a, #details_menu li.financial a:link {
	background: url(../img/demo_details_menu.gif) no-repeat -145px 0px;
}
#details_menu li.financial a:hover, #details_menu li.financial a#curent {
	background: url(../img/demo_details_menu.gif) no-repeat -145px -42px; 
}
/* フランチャイズ */
#details_menu li.fran a, #details_menu li.fran a:link {
	background: url(../img/demo_details_menu.gif) no-repeat -290px 0px;
}
#details_menu li.fran a:hover, #details_menu li.fran a#curent {
	background: url(../img/demo_details_menu.gif) no-repeat -290px -42px;
}

/* 公共機関 */
#details_menu li.public a, #details_menu li.public a:link {
	background: url(../img/demo_details_menu.gif) no-repeat -435px 0px;
}
#details_menu li.public a:hover, #details_menu li.public a#curent {
	background: url(../img/demo_details_menu.gif) no-repeat -435px -42px;
}

/*---- コピーライト ----*/
body#demo_details address {
	clear: both;
	margin: 25px 0px 0px 0px;
	padding: 5px 0px 0px 0px;
	font-style: normal;
	text-align: center;
	border-top: 1px dotted #dddddd;
}

/*---- フラッシュページ用 ----*/

body#flash address {
	margin: 0px;
	font-style: normal;
	text-align: center;
	font-size: 0.63em;
}

/* 06. 機能一覧用
************************************/