@charset "UTF-8";

/* --------------------------------------------------------------------------------------
 基本設定
--------------------------------------------------------------------------------------- */

/* 基本フォント ------------------------------ */

body {
	color: #000000;
	font-family: Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 75%;
	line-height: 1.5;
}

html:not(:target) body {
	font-size: 12px;
}

input,textarea,select {
	font-family: Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 100%;
}

h1,h2,h3,h4,h5,h6 {
	font-size: 100%;
	font-weight: normal;
}

/*\*/
* html table {
	font-size: 100%;
	line-height: 1.5;
}
/**/


/* 基本タグ ------------------------------ */

body,div,
h1,h2,h3,h4,h5,h6,
dl,dt,dd,ul,ol,li,
p,blockquote,pre,cite,code,caption,
form,fieldset,legend,input,textarea,select,option,label {
	margin: 0;
	padding: 0;
}

body {
	background: #FFFFFF;
	text-align: center;
}

img,table {
	border: none;
}

table {
	border-collapse: collapse;
}

ul {
	list-style: none;
}

li img,
dt img {
	vertical-align: bottom;
}

address,em,cite {
	font-style: normal;
}


/* 基本テキストリンク ------------------------------ */

a {
	overflow: hidden;
}

a:link {
	color: #0000FF;
	text-decoration: underline;
}
a:visited {
	color: #0000FF;
	text-decoration: underline;
}
a:hover {
	color: #0000FF;
	text-decoration: none;
}
a:active {
	color: #0000FF;
	text-decoration: none;
}


/* --------------------------------------------------------------------------------------
 float解除
--------------------------------------------------------------------------------------- */

.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden;font-size: .1em;}
.clearfix { display:inline-block; }
/*\*/
* html .clearfix { height:1%; }
.clearfix { display:block; }
/**/


/* --------------------------------------------------------------------------------------
 レイアウト枠
--------------------------------------------------------------------------------------- */

div#wrap {
	width: 800px;
	margin: 0 auto;
	padding: 0 5px;
	background: url(../img/bg_01.gif) repeat-y left top;
	text-align: left;
}

/* hd ------------------------------ */

div#hd {
	padding: 12px 13px 11px 20px;
}

div#hd .logo {
	float: left;
}

div#hd .tel {
	float: right;
}

/* ft ------------------------------ */

div#ft {
	padding: 75px 0 28px;
}


/* greenBox ------------------------------ */

div.greenBox {
	width: 760px;
	margin: 0 auto;
	padding: 0 0 20px;
	background: #44af35;
}

div.greenBox .innerBox {
	width: 720px;
	margin: 0 auto;
	background: url(../img/bg_box01_rpt.gif) repeat-y left top;
}

div.greenBox .innerBoxTop {
	background: url(../img/bg_box01_top.gif) no-repeat left top;
}

div.greenBox .innerBoxBtm {
	background: url(../img/bg_box01_btm.gif) no-repeat left bottom;
}

div.greenBox .topGlay {
	background: url(../img/bg_box01_top2.gif) no-repeat left top;
}

/* yellowBox ------------------------------ */

div.yellowBox {
	width: 760px;
	margin: 0 auto;
	padding: 0 0 20px;
	background: #fccf00;
}

div.yellowBox .innerBox {
	width: 720px;
	margin: 0 auto;
	background: url(../img/bg_box02_rpt.gif) repeat-y left top;
}

div.yellowBox .innerBoxTop {
	background: url(../img/bg_box02_top.gif) no-repeat left top;
}

div.yellowBox .innerBoxBtm {
	background: url(../img/bg_box02_btm.gif) no-repeat left bottom;
}

/* contactBox ------------------------------ */

div.contactBox {
	width: 800px;
	padding: 16px 0 28px;
	background: url(../img/bg_box03.gif) repeat center top;
	text-align: center;
}

div.contactBox .btn {
	width: 698px;
	height: 110px;
	margin: 0 auto;
	background: url(../img/contact_btn_on.jpg) no-repeat left top;
	text-indent: -9999px;
}

div.contactBox .btn a {
	display: block;
	width: 698px;
	height: 110px;
	background: url(../img/contact_btn.jpg) no-repeat left top;
}

div.contactBox .btn a:hover {
	opacity: 0;
	filter: alpha(opacity=0);
	-ms-filter: "alpha(opacity=0)";
}


/* --------------------------------------------------------------------------------------
 コンテンツ
--------------------------------------------------------------------------------------- */

/* mainVisual ------------------------------ */

div#mainVisual {
	width: 800px;
	background: url(../img/mainvisual_bg01.jpg) no-repeat left top;
	padding: 22px 10px 0;
}

div#mainVisual h1 {
	width: 460px;
	height: 227px;
	background: url(../img/mainvisual_txt01.jpg) no-repeat left top;
	text-indent: -9999px;
}

div#mainVisual ul {
	padding: 43px 0px 25px;
}

div#mainVisual ul li {
	float: left;
	padding-right: 10px;
}
div#mainVisual ul li a:hover {
	opacity: 0.6;
}

/* case ------------------------------ */

div#case {
	margin: 24px 0 30px;
}

div#case h2 {
	width: 760px;
	height: 119px;
	background: url(../img/case_txt01.gif) no-repeat left top;
	text-indent: -9999px;
}

div#case div.greenBox .innerBoxBtm {
	padding-bottom: 3px;
}

div#case .txt01 {
	padding: 10px 0 39px;
	text-align: center;
}

div#case .block01 {
	position: relative;
	width: 680px;
	margin: 0 auto;
	padding: 0 0 17px;
}

div#case .block01 h3 {
	margin: 0 0 3px;
}

div#case .block01 .img01 {
	position: absolute;
	top: 77px;
	right: 0;
}

div#case .block01 .img02 {
	position: absolute;
	top: 75px;
	right: 0;
}

div#case .block01 .box .txt {
	width: 546px;
	padding: 10px 0;
	background: url(../img/bg_dot01.gif) repeat-x left top;
}

div#case .block01 .box .txt h4 {
	height: 21px;
	padding: 3px 0 0 30px;
	background: url(../img/ico_check.gif) no-repeat left top;
	color: #e8340c;
	font-size: 134%;
	line-height: 1.3;
}

div#case .block01 .box .txt p {
	padding: 0 0 0 30px;
	font-size: 117%;
	line-height: 1.6;
}

div#case .block01 .box .w100 {
	width: 100%;
}

div#case .block01 .box .bgNone {
	background: none;
}
div#case .block02 {
	position: relative;
	width: 640px;
	margin: 0 auto 30px;
	padding: 0 0 17px;
	background: #ececec;
	padding: 20px
}
div#case .block02 .txt01 {
	padding: 10px 0 20px;
	text-align: center;
}
div#case .block02 .txt02 {
	font-size: 134%;
	font-weight: bold;
}
div#case .block02 .txt03 {
	padding: 20px 0 0;
	text-align: center;
}
div#case .block02 p {
	font-size: 117%;
	line-height: 1.6;
}
div#case .color_red {
	color: #e8340c;
}

/* compare ------------------------------ */

div#compare {
	margin: 48px 0 31px;
}

div#compare h2 {
	width: 760px;
	height: 119px;
	background: url(../img/compare_txt01.gif) no-repeat left top;
	text-indent: -9999px;
}

div#compare div.yellowBox .innerBoxBtm {
	padding-bottom: 50px;
}

div#compare .txt01 {
	padding: 25px 0 0;
	text-align: center;
}

div#compare .txt02 {
	padding: 86px 0 0;
	background: url(../img/compare_bg01.gif) no-repeat center top;
	text-align: center;
}

div#compare table {
	margin: 21px auto 0;
	border: 3px solid #ffde00;
	border-spacing:0;
}

div#compare table th,
div#compare table td {
	padding: 0;
	border-top: 1px solid #ffde00;
	border-left: 3px solid #ffde00;
	border-spacing:0;
	vertical-align: middle;
}

div#compare table th {
	width: 125px;
	background: #fff7cf;
}

div#compare table td {
	width: 271px;
}

div#compare table .first th {
	border-bottom: 3px solid #ffde00;
}

div#compare table td.ico01 {
	width: 200px;
	padding: 5px 8px 5px 63px;
	background: url(../img/compare_ico01.gif) no-repeat left top;
}

div#compare table td.ico02 {
	width: 196px;
	padding: 5px 8px 5px 67px;
	background: url(../img/compare_ico02.gif) no-repeat left top;
}

div#compare table td.ico03 {
	width: 196px;
	padding: 5px 8px 5px 67px;
	background: url(../img/compare_ico03.gif) no-repeat left top;
}

div#compare table td.long {
	line-height: 1.3;
}

div#compare table .color_red {
	color: #e8340c;
}

div#compare .table02 {
	border: 3px solid #ff9a84;
}

div#compare .table02 th,
div#compare .table02 td {
	border-top: 1px solid #ff9a84;
	border-left: 3px solid #ff9a84;
}

div#compare .table02 th {
	background: #ffe6e1;
}

/* layout ------------------------------ */

div#layout {
	margin: 58px 0 50px;
}

div#layout div.greenBox .topGlay {
	background: url(../img/bg_box01_top3.gif) no-repeat left top;
}

div#layout div.greenBox .innerBoxBtm {
	padding-bottom: 20px;
}

div#layout h2 {
	width: 760px;
	height: 119px;
	background: url(../img/layout_txt01.gif) no-repeat left top;
	text-indent: -9999px;
}

div#layout .txt01 {
	padding: 25px 0 34px;
	text-align: center;
}

div#layout .block01 {
	width: 680px;
	margin: 30px auto 0;
}

div#layout .block01 .txt {
	margin: 11px 0 16px;
	font-size: 109%;
	line-height: 1.4;
}

div#layout div.greenBox .campaign {
	position: relative;
	width: 720px;
	margin: 20px auto 0;
}

div#layout div.greenBox .campaign .innerBoxBtm {
	padding-bottom: 15px;
}

div#layout div.greenBox .campaign p {
	margin: 11px 30px 0;
}

div#layout div.greenBox .campaign p.img {
	position: absolute;
	top: 0;
	right: 20px;
	margin: 0;
}

/* merit ------------------------------ */

div#merit {
	margin: 58px 0 0;
}

div#merit h2 {
	padding: 9px;
	background: #fccf00;
}

div#merit h2 span {
	display: block;
	width: 348px;
	height: 35px;
	margin: 0 auto;
	background: url(../img/merit_txt01.gif) no-repeat left top;
	text-indent: -9999px;
}

div#merit .txt01 {
	padding: 6px 14px;
	text-align: right;
}

div#merit .block01 {
	background: url(../img/merit_bg01.jpg) no-repeat left top;
	padding-bottom: 18px;
}

div#merit .block01 h3 {
	width: 416px;
	height: 214px;
	margin: 0 auto 30px;
	background: url(../img/merit_txt02.jpg) no-repeat left top;
	text-indent: -9999px;
}

div#merit .block01 ul {
	float: left;
	width: 369px;
	padding: 0 0 0 25px;
}

div#merit .block01 ul li {
	margin: 14px 0 0;
}

div#merit .block01 ul.list02 {
	float: right;
	padding: 0;
}


/* customer ------------------------------ */

div#customer {
	margin: 59px 0 0;
}

div#customer h2 {
	padding: 17px 0 15px;
	background: #fccf00;
}

div#customer h2 span {
	display: block;
	width: 470px;
	height: 80px;
	margin: 0 auto;
	background: url(../img/customer_txt01.gif) no-repeat left top;
	text-indent: -9999px;
}

div#customer div.yellowBox .innerBoxBtm {
	padding: 25px 0 22px 20px;
}

div#customer dl {
	float: left;
	width: 215px;
	margin: 0 17px 0 0;
}

div#customer dl dt {
	margin: 0 0 5px;
}

/* flow ------------------------------ */

div#flow {
	margin: 51px 0 30px;
}

div#flow .greenBox {
	padding-bottom: 24px;
}

div#flow h2 {
	padding: 20px 0 16px;
	background: #44af35;
}

div#flow h2 span {
	display: block;
	width: 246px;
	height: 36px;
	margin: 0 auto;
	background: url(../img/flow_txt01.gif) no-repeat left top;
	text-indent: -9999px;
}

div#flow .txt01 {
	margin: 62px 0 0;
	text-align: center;
}

div#flow ul {
	padding: 22px;
}

div#flow ul li {
	float: left;
}