/* clearfix */

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  margin: 0;
  padding: 0;
}

/* reset */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  border: 0;
  font-size: 14px;
  font: inherit;
  vertical-align: baseline;
  margin: 0;
  padding: 0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

/* tag */
body {
  line-height: 1;
  line-height: 150%;
}
ol, ul {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
html, body {
  font-size: 14px;
  font-family: 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  color: #333333;
  min-width: 960px;
}
a {
  color: #457b3a;
  text-decoration: none;
  /* animation */
  transition-property: background;
  transition-duration: 0.25s;
  transition-timing-function: ease-out;
}
a:hover {
  text-decoration: underline;
}
.inner {
  width: 960px;
  margin: 0 auto;
  position: relative;
}
.m20 {
	margin-top: 20px;
}


/* header */
.header {
	top: 0;
  width: 100%;
  height: 26px;
  padding: 22px 0;
  overflow: hidden;
  position: relative;
  background-color: #2f3740;
}
.header h1 {
  display: block;
  width: 133px;
  height: 26px;
  float: left;
}
.header h1 a,
.header h1 a .logo {
  display: block;
  height: 26px;
}
.header h1 a .logo {
  background: url(../images/logo.png) left top no-repeat;
}
.header .menu {
  position: relative;
  margin-left: 200px;
}
.header .menu ul {
  display: table;
  width: 100%;
  height: 26px;
}
.header .menu li {
  display: table-cell;
  vertical-align: bottom;
}
.header .menu li > a {
  display: block;
  padding: 0 10px;
  color: #fff;
}

/* content */
.content h2 {
  font-size: 22px;
  color: #333333;
  margin: 0 0 10px;
}

#top {
  text-align: center;
  padding: 30px 0;
  background-image: url(../images/topbg.png);
  background-repeat: repeat-x;
  background-position: center bottom;
}
#top > .arrow {
	position: absolute;
	margin-left: -30px;
	width: 60px;
	height:40px;
}
#top > h2,
#top > p {
  display: none;
}
#top > .demo {
  padding: 30px;
  margin-top: 30px;
  background: #2f3740;
  color: #fff;
}
#top > .demo > h3 {
  font-size: 18px;
  margin-bottom: 30px;
}
#top > .demo > a {
  display: block;
  width: 362px;
  height: 61px;
  text-align: center;
  margin: 0 auto;
  font-weight: bold;
  font-size: 17px;
  background: url(../images/btn_right.png) 0 0 no-repeat;
  color: #fff;
  line-height: 61px;
  margin-bottom: 30px;
}
#top > .demo > a:hover {
  text-decoration: none;
  opacity: 0.9;
}


/* section */
.section {
  padding: 40px 0;
  position: relative;
  text-align: center;
}
.section:nth-child(even) {
  background: #f3f3f3;
}

.totop {
	background-image: url(../images/backtotop.png);
	position: absolute;
	right: 25px;
	bottom: 25px;
	width: 23px;
	height: 23px;
}


/*about*/
#about{
	padding-top: 10px;
}

.point {
	display: inline-block;
	width: 255px;
	vertical-align: top;
	margin-top: 30px;
	margin-left: 16px;
	margin-right: 16px;
}

.point p{
	text-align: left;
}

.point h5 {
	font-weight: bold;
	margin: 10px;
}

.point img {
	display:block;
	clear:both;
}

/*intro*/
.functions {
	margin-top: 50px;
	margin: auto;
	padding:50px;
	max-width: 1200px;
}

.clearfix:after{
	content: "";
	clear: both;
	display: block;
}

.functions:nth-child(odd) > .p_L {
	max-width: 450px;
	text-align: left;
	display: inline;
}

.functions:nth-child(odd) > .img {
	width: 570px;
	float: right;
	margin-left: 5%;
	display: inline;
}

.functions:nth-child(even) > .p_L {
	max-width: 450px;
	text-align: right;
	display: inline;
}

.functions:nth-child(even) > .img {
	width: 570px;
	margin-right: 30px;
	float: left;
	display: inline;
}

.functions h3 {
	font-size: 20px;
	font-weight: 500;
	color: #333333;
	margin: 0 0 10px;
}


/*feature*/
.featurelist {
	width: 20%;
	display: inline-block;
	vertical-align: top;
	margin-top: 20px;
	text-align: left;
	margin: 15px;
}
.featurelist li {
	padding-left: 19px;
}
.featurelist h3 {
	height: 15px;
	font-weight: bold;
	text-indent: 20px;
	line-height: 23px;
	padding-top: 5px;
	color: #333333;
	border-bottom: #c4c4c4 solid 1px;
	background-repeat: no-repeat;
	background-position: left center;
	margin: 0 0 10px;
	padding-bottom: 10px;
}

.feature_work_icon {
	background-image: url(../images/mark_feature_work.png);
}
.feature_customer_icon {
	background-image: url(../images/mark_feature_customer.png);
}
.feature_document_icon {
	background-image: url(../images/mark_feature_document.png);
}
.feature_feature_icon {
	background-image: url(../images/mark_feature_manage.png);
}


/*price*/
.priceinfo {
	width: 655px;
	margin: auto;
	padding-top: 20px;
}
#price .attention {
	margin-top: 8px;
	font-size: 12px;
	text-align: left;
	color: #df4d4d;
}

.demo > .login {
  display: table;
  width: 550px;
  margin: 0 auto;
}
.demo > .login > div {
  display: table-cell;
  width: 250px;
  text-align: left;
}
.demo > .login h4 {
	color: white;
	font-size: 12px;
  display: inline-block;
  background: #417d33;
  border-radius: 2px;
  padding: 3px 6px;
  margin-bottom: 5px;
}
.demo > .login dl {
  display: block;
}
.demo > .login dt,
.demo > .login dd {
  display: inline-block;
  padding: 7px 1px;
  padding-bottom: 0;
}
.demo > .login dt:after {
  content: ": ";
}


/*demo*/
#demo .attention {
	font-size: 18px;
	color: #457b3a;
}


/*submit*/
.submitlink {
	display: inline-block;
	width: 389px;
	height: 73px;
	text-align: center;
	margin: 0 auto;
	font-weight: bold;
	font-size: 20px;
	color: #fff;
	line-height: 73px;
  margin: 20px 30px 20px;
	background: url(../images/btn_large.png) 0 0 no-repeat;
}


/* footer */
.footer {
  bottom: 0;
  background: #2f3740;
  color: white;
  width: 100%;
  height: 48px;
  padding: 36px 0;
  text-align: center;
}
.footer > .menu {
  margin: 0 auto 20px;
}
.footer > .menu li {
  display: inline;
  margin: 0 5px;
}
.footer > .menu li a {
  color: white;
}
.footer > address {
  margin: 20px auto 0;
}

/* privacy*/

#privacy {
        width: 700px;
        margin: auto;
        padding-top: 40px;
}

.content #privacy p{
        margin: 0 0 37px;
}

.content #privacy .t_right{
        text-align: right;
}

.content #privacy h2{
        text-align: center;
}

.content #privacy ul,
.content #privacy ol{ padding: 0 0 0 20px; }
.content #privacy ol.kiyaku li{ margin: 2px 0 0 3px; }
.content #privacy ul li{
        margin: 0 0 20px;
        padding: 0 0 0 -20px;
        list-style-type: disc;
}
.content #privacy ol li{
        margin: 0 0 20px;
        padding: 0 0 0 -20px;
        list-style-type: decimal;
}
.content #privacy li ul li{      margin-bottom: 5px; list-style-type: disc;}
.content #privacy li ol li{      margin-bottom: 5px; list-style-type: decimal;}

.content #privacy dt{
        font-weight: bold;
}

.content #privacy p.midashi{
	font-size: 18px;
	text-decoration: underline;
        font-weight: bold;
}

.content #privacy p.comidashi{
        font-size: 15px;
        text-decoration: underline;
        font-weight: bold;
	margin: 10px 0 10px;
}


/* law */
#law {
        width: 700px;
        margin: auto;
        padding-top: 40px;
}
#law table {
        margin-top: 30px;
	margin-left: auto;
	margin-right: auto;
	border-top:1px solid #663300;
	border-left:1px solid #663300;
	border-collapse:collapse;
	border-spacing:0;
	background-color:#ffffff;
	empty-cells:show;
}
#law table td{
    border-right:1px solid #663300;
    border-bottom:1px solid #663300;
    padding:0.3em 1em;
    text-align:left;
}
#law table th{
    border-right:1px solid #663300;
    border-bottom:1px solid #663300;
    padding:0.3em 1em;
    text-align:center;
}