@charset "UTF-8";


/* 要素リセット */
body
{
	width: 100%;
	background-color: #F2F2F1;
	text-align: center;
	margin: 0px auto;
	padding: 0;
}

img
{
	border-top: 0;
	border-right: 0;
	border-bottom: 0;
	border-left: 0;
	margin:0;
	padding:0;
}


/* リンク文字色 */
a:link {
	color: #2C2523;

	text-decoration: underline;
}
a:visited {
	color: #686564;
	text-decoration: underline;
}
a:hover {
	color: #F7C05B;
	text-decoration: none;
}
a:active {
	color: #F7C05B;
	text-decoration: none;
}


p {
	margin-top: 0.5em;
	margin-bottom: 2em;
	padding-right: 0.1em;
	padding-left: 0em;
	line-height: 1.4;
	text-align: left;
}

p.large {
	font-size: 1.5em;
	font-weight: bold;
	margin-bottom: -0.1em;
	color: #753B02;
}
p.indent {
	padding-left: 15px;
	background-image : url(image/arrow.gif);
	background-position: 3px 4px;
	background-repeat: no-repeat;
}

h2
{
	margin:0 0 0 30px;
}



.font-pink {
	color:#DA7185;
}
.font-skyblue {
	color:#58B3D2;
}
.font-orange {
	color:#ECA83E;
}


/*--------------------------------------------------------
  レイアウト設定
--------------------------------------------------------*/

#header
{
	width: 100%;
	margin: 0;
	padding: 0;
	height: 60px;
	background-color:#FFFFFF;

}

#navigation
{
/*
	position: absolute;
	top: 62px;
	left: 0px;
*/
	margin:0 0 0 0;
	padding:7px 0 0 0;
	width:100%;
	height: 150px;
	overflow: hidden;
	background-color:#ECEEEC;

	background-image : url(image/navigation-bg.gif);
	background-position: top left;
	background-repeat: repeat-x;
}

#topicpath
{
	width: 100%;
	margin:0;
	background-color:#F2F2F1;
}


#container
{
	width: 100%;
	margin:0;
	background-color:#F2F2F1;
}


#footer
{
	width: 100%;
	height:230px;
	margin: 0;
	padding: 0 0 0 0;
	background-color:#3D3E3D;

	background-image : url(image/footer-top.gif),url(image/footer-bottom.gif);
	background-position: left 15px,left 193px;
	background-repeat: repeat-x;

/* ie9以下 */
	background-image : url(image/footer-top.gif)\9;
	background-position: left 15px\9;

}










/*--------------------------------------------------------
  デザイン設定
--------------------------------------------------------*/


/* ヘッダー内パーツ */
#header-area
{
	margin: 0 auto;
	width:950px;
	height: 62px;
	overflow: hidden;
	margin:0 auto;
/*	background-color:red;*/

}

#header-area #header-title
{
	width:950px;
	height: 20px;
	margin: 0;
	padding:5px 0 0px 5px;
	text-align: left;
	font-weight: normal;
	line-height: 15px;
	font-size: 14px;
	color: #7FBE25;
}

#header-area #logo
{
	display: block;
	overflow: hidden;
	float:left;
	margin: 0;
	padding: 0;
	text-indent: -9999px;
	width: 145px;
	height: 32px;
	background-image : url(image/logo.gif);
	background-position: center left;
	background-repeat: no-repeat;
}

#header-area #header-navigation
{
	width: 420px;
	height: 30px;
	float:right;
	margin:0;
	padding:10px 10px 0 0;
}
#header-area #header-navigation li
{
	margin:5px 5px 0 0;
	padding:0 0 0 0;
	float:right;
	width: 120px;
	height: 20px;
	list-style-type: none;
	text-indent: 15px;
	background-image : url(image/arrow.gif);
	background-position: 6px 7px;
	background-repeat: no-repeat;
	text-align:left;
	text-indent:20px;
	border-right: 1px solid #C1C0C0;
	font-size:12px;
	font-weight: bold ;

}
#header-area #header-navigation li a:hover
{
	display:block;
	width:100%;
	height:25px;
	background-image : url(image/header-navigation-on.gif);
	background-position: left 20px;
	background-repeat: repeat-x;
}


#navigation ul
{
	width:950px;
	margin:0 auto 0 auto;
	padding:0;
	list-style-type: none;
	overflow: hidden;
	height: 165px;

}
/*
#navigation ul:after
{
    content: ".";
    clear: both;
    height: 0;
    display: block;
    visibility: hidden;
}
*/

#navigation li
{
	display: block;
	float: left;
	line-height: 45px;
	overflow: hidden;
	width: 237px;
	height: 153px;
	margin:0 0 0 0px;
	padding:0;


	background-image : url(image/navigation-btn-left.gif);
	background-position: left top;
	background-repeat: no-repeat;

	color: #FFFFFF;
	font-size:18px;
	line-height: 18px;
	padding: 0;

}

#navigation li#charge
{
	background-image : url(image/navigation-btn-right.gif);
	background-position: left top;
	background-repeat: no-repeat;

}






#navigation li a,
#navigation li strong
{
	display: block;
	text-align: center;
	line-height: 50px;
	height: 50px;

}

#navigation a:link
{
	color: #FFFFFF;
	text-decoration: none;


}

#navigation a:visited
{
	color: #FFFFFF;
	text-decoration: none;
}
#navigation a:hover,
#navigation li strong
{

	color: #75B12D;
	background-color:#ffffff;
	text-decoration: none;

	background-image : url(image/navigation-on-bg.gif);
	background-position: top left;
	background-repeat: repeat-x;

}




#navigation a:active
{
	color: #75B12D;
	background-color:#ffffff;
	text-decoration: none;
}




#navigation span
{
	display:block;
	width:237px;
	height:100px;
	margin:0px;
	padding:0px 0px 0px 1px;
	overflow: hidden;
	text-indent: -9999px;
	background-position: 1px 1px;
	background-repeat: no-repeat;
}

#navigation #support span
{
	background-image : url(image/support-bg.gif);
}
#navigation #support span:hover
{
	background-image : url(image/support-on-bg.gif);
}
#support-body #navigation #support span
{
	background-image : url(image/support-on-bg.gif);

}


#navigation #function-introduction span
{
	background-image : url(image/function-introduction-bg.gif);
}
#navigation #function-introduction span:hover
{
	background-image : url(image/function-introduction-on-bg.gif);
	background-position: 2px 1px;
}
#function-introduction-body #navigation #function-introduction span
{
	background-image : url(image/function-introduction-on-bg.gif);
	background-position: 2px 1px;

}


#navigation #free-trial span
{
	background-image : url(image/free-trial-bg.gif);
}
#navigation #free-trial span:hover
{
	background-image : url(image/free-trial-on-bg.gif);
}
#free-trial-body #navigation #free-trial span,
#input-form-body #navigation #free-trial span
{
	background-image : url(image/free-trial-on-bg.gif);
}



#navigation #charge span
{
	background-image : url(image/charge-bg.gif);
}
#navigation #charge span:hover
{
	background-image : url(image/charge-on-bg.gif);
}
#charge-body #navigation #charge span
{
	background-image : url(image/charge-on-bg.gif);
}



#navigation img:hover
{
	background-color:#ffffff;
	margin:0px;
	padding:0px 0px 0px 1px;
}


#topicpath ol
{
	width: 920px;
	margin:0 auto;
	text-align: left;
	background-color:#FFFFFF;

	background-image : url(image/navigation_bottom.gif);
	background-position: top center;
	background-repeat: repeat-x;
	padding:30px 0 0 30px;

}
#topicpath ol li {
	display: inline;
	list-style-type: none;
	margin:0 0 0 5px;
}

#topicpath ol li:before {
	content: " > ";
}

#topicpath ol li:first-child:before {
	content:url(image/home-icon.gif);
	position: relative;
	top: 3px;
}
#topicpath ol li a
{
	color:#7ab52c;
	text-decoration: none;

}
#topicpath ol li a:hover
{
	color: #F7C05B;
	text-decoration: none;

}


#container dt {
	float: left;
	margin: 0;
	text-align: left;
	line-height: 1.4;
	font-weight: normal;
	width: 9em !important;
	padding-top: 5px;
	padding-right: 0;
	padding-bottom: 2px;
	padding-left: 15px;
	background-image : url(image/arrow.gif);
	background-position: 2px 8px;
	background-repeat: no-repeat;
}

#container dd {
	margin: 0;
	padding-top: 5px;
	padding-right: 0;
	padding-bottom: 2px;
	text-align: left;
	line-height: 1.4;
	padding-left: 11em;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #dddddd;
}

#news
{
	padding:30px 0 10px 0;

}

#news dl
{
	clear: left;
	margin: 0 30px 100px 30px;
	padding: 0;
	width: 850px;

}

#news dd {
	margin:0;
	padding:5px 5px 5px 5px;
}




#news dt.news-icon span
{
	display:inline-block;
	margin:0 0 2px 10px;
	padding:3px 10px 0px 10px;
	line-height:120%;

	color:#ffffff;
	background-color:#AAC863;
	border-width: 1px;
	border-style: solid;
	border-color: #e2e2e2;
	border-radius: 6px;
	text-align: center;

}

#news dt.type1 span
{
	background-color:#AAC863;
}
#news dt.type2 span
{
	background-color:#E8AC51;
}
#news dt.type3 span
{
	background-color:#00AEE0;
}

#news dt.type4 span
{
	background-color:#DE6641;
}
#news dd a
{
	display:inline-block;
	text-indent:10px;
	background-image : url(image/arrow.gif)!important;
	background-position: 2px 5px;
	background-repeat: no-repeat;
	text-decoration: none;
}
#news dt {
	margin:0;
	width:105px!important;
	background-image: url();
}




#footer #footer-map
{
	text-indent:18px;
	list-style-type: none;
	height:175px;
	width:890px;
	margin:0 auto 0 auto;
	padding: 40px 30px 5px 30px;
	font-size:10px;
}


#footer #footer-map-top
{
	margin: 0 0 8px 5px!important;
	padding: 0;
	width:865px!important;
	list-style-type: none;
}
#footer #footer-map-top a
{
	text-decoration: none;
}

#footer #footer-map li
{
	width:140px;
	float: left;
	text-align: left;
	margin:0 0 0 5px;
	padding:0;
	height:18px;
	list-style-type: none;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #EAE8E8;
	background-image : url(image/arrow-w.gif);
	background-position: 3px 5px;
	background-repeat: no-repeat;
}
#footer #footer-map ul
{
	margin-top:5px;
	padding: 0;

}
#footer #footer-map ul li
{
	margin: 0px 0 0 0;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #EAE8E8;
	width:130px;
}

#footer a:link {
	color: #EAE8E8;
	text-decoration: none;
}
#footer a:visited
{
	color: #EAE8E8;
	text-decoration: none;
}

#footer a:hover {
	color: #F7C05B;
	text-decoration: none;
}
#footer a:active {
	color: #F7C05B;
	text-decoration: none;
}


/*--------------------------------------------------------
  共通レイアウトパーツ設定
--------------------------------------------------------*/

h2
{
	font-size:18px;
	margin-top:60px;
}

#skip {
	/* ヘッダースキップの非表示 */
	height: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	text-indent: -9999px;
}




#pagetop
{
	margin:0 auto 0 auto;
	padding:0;
	width:950px;
}

#pagetop a {
	display: block;
	margin:-20px 10px 0 0;
	line-height: 45px;
	text-indent:-10px;
	background-image : url(image/pagetop-bg.gif);
	background-repeat: no-repeat;
	background-position: center left;
	text-decoration: none;
	float: right;
	width:130px;
	height:45px;
	font-size:14px;
}

#pagetop a:hover
{
	background-image : url(image/pagetop-on-bg.gif);
	background-repeat: no-repeat;
	background-position: center left;
}


#text
{
	width: 950px;
	margin:0 auto;
	padding:10px 0 100px 0;
	text-align: left;
	background-color:#FFFFFF;
}


#text h3,#text p
{
	margin: 0 30px 0 30px;
}


#text h2
{
	padding: 0 0 0 15px;
	font-size:22px;
}

#text h3
{
	margin-top:60px;
	margin-left:35px;
	padding: 0;
	color:#ffffff;
	width:845px;
	height:40px;
	font-size:20px;
}
#text .title-size
{
	line-height: 42px;
	text-indent:20px;
	background-repeat: no-repeat;
	background-position: center left;
}
#text .subtitle-size
{
	margin-top:5px;
	line-height: 40px;
	text-indent:20px;
	background-repeat: no-repeat;
	background-position: center left;
}
#text .title-white
{
	background-color:#ffffff;
}



/*
#text h4
{
	margin-top:10px;
	margin-left:35px;
	padding: 0;
	color:#ffffff;
	width:845px;
	height:40px;
	font-size:18px;
	font-weight:normal;
}
#text h4.title-size
{
	line-height: 42px;
	text-indent:20px;
	background-repeat: no-repeat;
	background-position: center left;
}*/



#text p
{
	margin: 10px 70px 30px 40px;
	padding: 20px 30px 20px 20px;
	background-color:#F1F3F1;
	border-radius:15px;
}

#text .bg-color-white
{
	background-color:#ffffff;
}



#text .box
{
	margin:0 30px 30px 30px;
	padding:0;
	width:890px;
	vertical-align:top;
}

#text .box .center
{
	text-align:center;
}


#text .box p
{
	display:block;
	display:block;
	margin:5px 0 0 0;
	padding:20px;
	border-radius:15px;
}


#text .box .box-size-half
{
	width:435px;
}

#text .box .box-size-half h4
{
	margin-left:0px!important;
	margin-top:20px!important;
}
#text .box .box-size-quarter
{
	width:170px;
}


#text .box .box-left
{
	float: left;
	margin:5px 0 0 5px;
	padding:0;
/*	background-color:skyblue;*/
}
#text .box .box-right
{
	float: right;
	padding:0;
	margin:5px 5px 0 0px;
/*	background-color:pink;*/
}
#text .box .box-top
{
	padding:15px;
/*	background-color:yellow;*/
}
#text .box .box-bottom
{
	padding:15px;
/*	background-color:green;*/

}
#text .top-100
{
	margin-top:100px;
}
#text .top-200
{
	margin-top:200px;
}
#text .bottom-100
{
	margin-bottom:100px;
}
#text .bottom-200
{
	margin-bottom:200px;
}
#text .height-300
{
	height:300px;
}


#text .button-box
{
	height:60px;

}
#text .button-box
{
	margin-top:5px;
	margin-left:250px;
}

#text .button-box a
{
	display:inline-block;
	color:#ffffff;
/*	background-color:#7ab52c;*/
	background-color:#3785b1;
	border:0;
	margin:5px;
	padding-top:15px;
	padding-left:5px;
	font-size:18px;
	width:330px;
	height:40px;
	-moz-border-radius: 10px 10px 10px 10px;
	-webkit-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;
	cursor:pointer;
	text-align: center;
}


#text .button-box a:hover
{
	color:#F7C05B;
/*
	opacity: 0.8;
	filter: alpha(opacity=80);
	-ms-filter: "alpha(opacity=80)";
*/
}

#text a.introduction-example {
	display:inline-block;
	background-color:#7ab52c;
	text-align: center;
	padding-left:5px;
	margin-top:50px;

}

#text a.next-page {
	display:inline-block;
	background-color:#F94230;
	text-align: center;
	margin-top:50px;
	margin-left:0px;
	padding-right:20px;
	padding-left:20px;
	width:auto;

}




#copyrights {
	width: 950px;
	height: 30px;
	margin:-20px auto 0 auto;
	padding:0;

}

#copyrights p {
	margin:0 5px 0 0;
	padding: 0;
	text-align: right;
	line-height: 24px;
	color: #FFFFFF;
}


ul.point-list{
  counter-reset:list;
  list-style-type:none;
	margin-top: 30px;
	margin-bottom: 30px;
  padding: 0px;
}

ul.point-list li{
  position:relative;
  line-height: 30px;
  margin:10px 10px 10px 50px;
  padding-left: 15px;
  font-weight: bold;
}

ul.point-list li:before{
	counter-increment: list;
  content: "";
  display: block;
  position: absolute;
  left: 0px;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background: #56BDDE;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);}
	#text .bg-color-blue
	{
		background-image : url(image/bg-color-blue.gif);
	}