@charset "UTF-8";

/*============================================================
//  ヘッダー
//==========================================================*/

#header ul#gnavi li.top a{
	background-position:0 -51px;
}
#header ul#gnavi li.top a:hover{
	background-position:0 -51px;
}

/*============================================================
//  コンテンツ
//==========================================================*/

#maincontent {
	/* for firefox webkit バグ回避 */
	overflow:auto!important;
	overflow /**/: hidden;
	/* for firefox webkit バグ回避ここまで */
	margin:auto;
}

#maincontent div#top {
	margin:14px 14px 10px 14px;
	overflow:hidden;
}

#maincontent div#top .toppict {
	margin:0 0 0 10px;
}

.toppict .top_bottom_btn{
	width:155px;
	height:35px;
	margin:0;
	padding:18px 10px 36px 10px;
	background:url(../images/top_main_button_demo_bg.gif);
	float:left;
}

.toppict .enterprise_bottom_btn{
	width:155px;
	height:35px;
	margin:0;
	padding:18px 10px 33px 10px;
	background:url(../images/feature_for_enterprise_button_demo_bg.gif);
	float:left;
}

.toppict .health_bottom_btn{
	width:155px;
	height:35px;
	margin:0;
	padding:10px 10px 32px 10px;
	background:url(../images/feature_for_healthservice_button_demo_bg.gif);
	float:left;
}


.toppict .kenpo_bottom_btn{
	width:155px;
	height:35px;
	margin:0;
	padding:8px 10px 24px 10px;
	background:url(../images/feature_for_kenpo_button_demo_bg.gif);
	float:left;
}

.toppict .top_bottom_btn a,
.toppict .enterprise_bottom_btn a,
.toppict .health_bottom_btn a,
.toppict .kenpo_bottom_btn a {
	display: block;
	width:155px;
	height:35px;
	background-image:url(../images/top_main_button_demo_on.gif);
	background-repeat:no-repeat;
	background-position:0 0;
	text-indent:-9999px; /* テキストを画面の表示より外に */
	outline:none; /* リンク破線を不可視に */
}

.toppict .top_bottom_btn a:hover,
.toppict .enterprise_bottom_btn a:hover,
.toppict .health_bottom_btn a:hover,
.toppict .kenpo_bottom_btn a:hover {
	background-image:url(../images/top_main_button_demo_off.gif);
	background-repeat:no-repeat;
}


.toppict .top_bottom_txt{
	margin:0;
	padding:0;
	float:left;
}

.clearboth {
	clear: both;
}

#maincontent div#casepickup {
	margin:14px 0 14px 14px;
}


/* ターゲットユーザーごとの入り口 */

#body #target_banner {
	margin:8px 0 10px 22px;
}

#body #target_banner h2 {
	width:254px;
	float:left;
	margin:0 0 8px 0;}

#body #target_banner h2 a img{
	border:2px solid #fff;}

#body #target_banner h2 a:hover img{
	border:2px solid #d3d3e8;}

/* Whatsnewとバナー */

#whatsnewarea{
	margin:10px 28px;
}

#whatsnewarea .whatsnew {
	float:left;
}

#whatsnewarea .banner {
	float:right;
	width:130px;
	text-align:center;
	font-size:10px;
	line-height:130%;
}

#whatsnewarea .banner p {
	margin-bottom:6px;
}

#whatsnewarea .banner a {
	color:#444;
}

#whatsnewarea .banner a:hover {
	text-decoration:none;
	color:#005725;
}

#whatsnewarea ol {
	width:580px;
	height:120px;
	overflow:auto;
	border:1px solid #43564E;
	background-color:#F9F9F2;
	padding:6px 10px;
}


#whatsnewarea ol li span.date{
	display:block;
	width:110px;
	float:left;
}

#whatsnewarea ol li span.ci{
	display:block;
	width:446px;
	float:right;
}

#whatsnewarea ol li {
	clear:both;
}

#whatsnewarea ol li.an .date{
	background:url(../images/top/news_announce.gif) no-repeat right top;
}

#whatsnewarea ol li.up .date{
	background:url(../images/top/news_update.gif) no-repeat right top;
}


p.q{
	background:url(../images/qa_q.gif) no-repeat left top;
	padding-left:35px;
	margin:10px 10px 5px 0;
	color:#003344;
	font-size:120%;
	font-weight:bold;
}

p.a{
	background:url(../images/qa_a.gif) no-repeat left top;
	padding-left:35px;
	margin:5px 10px 15px 0;
	color:#523E32;
}

p.uv{
	background:url(../images/uservoice_uv.gif) no-repeat left top;
	
	margin-top:15px;
	padding:4px 10px 8px 65px;
	color:#7C4829;
	font-size:120%;
	font-weight:bold;
}

p.ans{
	background:url(../images/uservoice_ans.gif) no-repeat left top;
	padding:4px 10px 16px 65px;
	margin:5px 10px 15px 0;
	color:#555511;
}

p.readcopy_uv {
	margin-top:12px;
	margin-bottom:24px;
	color:#555511;
}

span.gen {font-weight:normal;}

.line{
	border-top:dashed 1px #aaaaaa;
	margin:8px 20px 8px 24px;
	height:2px;
}

.arrow{
	background:url(../images/arrow.gif) no-repeat bottom left;
	padding-top:6px;
	padding-left:19px;
}

.arrow a{
	color:#222266;
}

#maincontent ul.list_maru_topic li{
	background:url(../images/list_maru_topic.gif) no-repeat left top;
	list-style-type:none;
	margin:0;
	padding:0 10px 10px 24px;
	vertical-align:text-top;
}

#maincontent #top table.charge {
	margin-left:24px;
	width:720px;
    border-top:1px solid #3955B5;
    border-left:1px solid #3955B5;
    border-collapse:collapse;
    border-spacing:0;
    background-color:#ffffff;
    empty-cells:show;
}

#maincontent #top table.charge caption{
	margin:4px 0;
	text-align:left;
}

#maincontent #top table.charge th {
	width:240px;
    border-right:1px solid #3955B5;
    border-bottom:1px solid #3955B5;
    background-color:#F4F3F9;
    background-position:left top;
    padding:0.3em 1em;
    color:#3944aa;
	text-align:left;
	font-weight:normal;
}

#maincontent #top table.charge td {
	width:240px;
    border-right:1px solid #3955B5;
    border-bottom:1px solid #3955B5;
    padding:0.3em 1em;
}
#maincontent #top table.charge td.option {
	width:480px;
}

/*機能紹介*/
#function_01,
#function_02,
#function_03,
#function_04,
#function_05,
#function_06{
	margin:10px 0 20px 22px;
}

#function_01{
	background:url(../images/function_bg_01.gif) bottom left no-repeat;
}

#function_02{
	background:url(../images/function_bg_02.gif) bottom left no-repeat;
}

#function_03{
	background:url(../images/function_bg_03.gif) bottom left no-repeat;
}

#function_04{
	background:url(../images/function_bg_04.gif) bottom left no-repeat;
}

#function_05{
	background:url(../images/function_bg_05.gif) bottom left no-repeat;
}

#function_06{
	background:url(../images/function_bg_06.gif) bottom left no-repeat;
}

.funtion-left{
	width:355px;
	margin:0 0 0 0;
	float:left;
}

.funtion-right{
	width:355px;
	margin:0 0 0 20px;
	float:left;
}

.funtion_txt{
	margin:0 15px 10px 13px;
	width:701px;
}
	
.funtion-left_txt,
.funtion-right_txt{
	margin:0 15px 10px 13px;
}


.funtion-img{
	float:left;
	margin:0 10px 30px 0;
}	



/*demo*/
#top .demotop{
	margin:10px 0 0 15px;
	background:url(../images/c-navi_demo_img_flowbg.gif) no-repeat;
	width:758px;
	height:340px;
}


#top #top_z-index{
	margin:0 0 0 10px;
	height:130px;
}

#top .pict1{
	position:relative;
	z-index:0;
	top:0px;
	left:0px;
	height:46px;
	width:756px;
}

#top .pict2{
	position:relative;
	z-index:1;
	top:10px;
	left:12px;
	width:736px;
	height:60px;
}

#top .pict3{
	position:relative;
	z-index:2;
	vertical-align:bottom;
	top:-48px;
	left:0;
	width:294px;
}

#top .ttl{
	width:754px;
	height:47px;
	margin:0 0 10px -10px;
	padding:0;
}

#top .ttl .ttl_l{
	width:563px;
	margin:0;
	padding:0;
	float:left;
}

#top .ttl .ttl_r {
	float: left;
	margin:0;
	padding:0;
	width: 191px;
	height: 47px;
	background:  url(../images/c-navi_demo_ti_11_mouseout.gif);
}

#top .ttl .ttl_r a {
	display: block;
	width:191px;
	height:47px;
	background-repeat:no-repeat;
	background-position:0 0;
	text-indent:-9999px; /* テキストを画面の表示より外に */
	outline:none; /* リンク破線を不可視に */
}

#top .ttl .ttl_r a:hover {
	background: url(../images/c-navi_demo_ti_11_mouseover.gif);
}


#top .demo{
	margin:0 0 0 22px;
	height:598px;
	clear:both;
}

*:first-child+html #top .demo{
	margin:30px 0 0 22px;
	height:598px;
	clear:both;
}

#top .demo .l_ketai{
	margin:0;
	background:url(../images/c-navi_ktai-frame.gif) no-repeat top left;
	width:270px;
	height:443px;
	padding:51px 30px 32px 26px;
	float:left;
}

#top .demo .r_ketai{
	margin:11px 14px 0 14px;
	width:400px;
	float:left;
	height:540px;
}

/*#top .demo img{
	clear:both;
	margin:0 10px 0 0;
}*/

#top .demo .demoback{
	text-align:right;
	clear:both;
	margin:0;
	padding:0;
}

#top .demo .demo-img{
	float:left;
	width:528px;
	height:486px;
}

#top .demo .demo-img_10,
#top .demo .demo-img_13{
	float:left;
	width:176px;
	height:486px;
}
#top .demo .demo-img_11{
	float:left;
	width:176px;
	height:218px;
	vertical-align:top;
}
#top .demo .demo-img_12{
	float:left;
	width:176px;
	height:271px;
	vertical-align:bottom;
}


.margin_r30{
	margin-right:30px;
}

.margin_r15{
	margin-right:15px;
}

.margin_b15{
	margin-bottom:15px;
}

.margin_l140{
	margin-left:140px;
}

.margin_-t15{
	margin-top:-15px;
	padding:0;
}

#top ul.maru_list{
	padding:0;
}

#top ul.maru_list li.maru_list_01,
#top ul.maru_list li.maru_list_02,
#top ul.maru_list li.maru_list_03,
#top ul.maru_list li.maru_list_04,
#top ul.maru_list li.maru_list_05{
	padding-left:17px;
	list-style:none;
	margin-bottom:10px;
	background-position:0px 2px;
	background-repeat:no-repeat;
}

#top ul.maru_list li.maru_list_01{
	background-image:url(../images/c-navi_demo_maru_01.gif);
}

#top ul.maru_list li.maru_list_02{
	background-image:url(../images/c-navi_demo_maru_02.gif);
}

#top ul.maru_list li.maru_list_03{
	background-image:url(../images/c-navi_demo_maru_03.gif);
}

#top ul.maru_list li.maru_list_04{
	background-image:url(../images/c-navi_demo_maru_04.gif);
}

#top ul.maru_list li.maru_list_05{
	background-image:url(../images/c-navi_demo_maru_05.gif);
}

#top #l-box{
	text-align:left;
	width:700px;
}

#top #l-box .l-img{
	float:left;
	text-align:left;
	margin-right:10px;
	clear:both;
}

#top #l-box .l-txt{
	float:left;
	text-align:left;
	line-height:180%;
	width:380px;
}

#top #l-box .l-txt strong{
	font-size:140%;
}

#top #l-box .l-txt p{
	margin:10px 0 0 0;
}

#top #l-box button{
margin:0;
padding:0;
color: #339;
border:none;
/*border:1px solid #fff;*/
background-color:#fff;
text-align:left;
cursor:pointer;
}

#top #l-box .l-txt p.arrow{
	padding-left:19px;
	background:url(../images/arrow.gif) no-repeat left bottom;
}