@charset "utf-8";
.kv { padding-top: 100px;}
.kv p.mark{ height: 48px; margin-bottom: 20px;}
.kv p.mark span{ position: relative; padding: 15px 50px; background: url(../img/bg-cross-bl.gif);
 -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px;
 color: #fff; font-size: 18px;
}
.kv p.mark span:after{ content:''; display: block; width: 72px; height: 100px; position: absolute; right: -30px; bottom: -15px;
 background: url(../img/worker.png) no-repeat 50% 0; background-size: 100% auto;
}
.kv h2{ margin-bottom: 30px; color: #158bd6; font-size: 28px;}
.kv p.read { color: #1ba66f;}
.kv p.read span{ display: block;}
.kv p.read br{ display: none;}

.sub { padding: 30px 0; background: #e4f4ff; text-align: center;}
.sub div { width: 100%; max-width: 850px; margin: 0 auto;}
.sub div img{ width: 100%; max-width: auto;}

.announce { padding: 40px 0; background: #158bd6 url(../img/bg-cross-bl.gif);}
.announce .inner{ width: 95%; max-width: 980px; margin: auto;}
.announce h2{ margin-bottom: 30px; color: #fff; font-size: 22px;}
.announce p.read{ margin-bottom: 30px; color: #fff; font-size: 18px;}
.announce p.txt { color: #e4f4ff; font-size: 14px; line-height: 1.8;}

.about{ padding: 80px 0; background: url(../img/bg-cross-wh.gif);}
.about .inner{ width: 94%; max-width: 900px; margin: 0 auto;}
.about h2 { margin-bottom: 30px; color: #158bd6; font-size: 22px; text-align: center;}
.about h2 span { padding-bottom: 5px; border-bottom: dashed 2px #158bd6;}
.about h2:before { content:''; display: inline-block; width: 34px; height: 34px; margin-right: 10px; vertical-align: middle;
	background: url(../img/icn-ttl.png) no-repeat 50% 50%; background-size: 100% auto;
}
.about p.read { margin-bottom: 30px; color: #1ba66f; font-size: 22px; text-align: center;}
.about p.read span{ display: block;}

.about ul.demand { margin-bottom: 20px; padding: 20px 0;
 background: url(../img/service/fig2.png) no-repeat 100% 50%; background-size: auto 98%;
}
.about ul.demand li{ margin-bottom: 10px; color: #158bd6;}

.about ul.sample { margin-bottom: 40px; font-size: 0; text-align: center;}
.about ul.sample li { display: inline-block; width: 45%; vertical-align: top;}
.about ul.sample li:nth-child(2){ position: relative; width: 10%; height: 1px;}
.about ul.sample li:nth-child(2) span{ position: absolute; top: 80px; left: 50%; margin-left: -20px;
 display: block; width: 40px; height: 54px;
 background: url(../img/arw.png) no-repeat 0 0;
}
.about ul.sample li dl dt{ width: 100%; margin-bottom: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; overflow: hidden;}
.about ul.sample li dl dt img{ width: 100%;}
.about ul.sample li dl dd{ color: #1ba66f; font-size: 14px;}

.about ul.step li { margin-bottom: 30px;}
.about ul.step li:last-child{ margin-bottom: 80px;}
.about ul.step li dl dt { width: 100px; margin-bottom: 5px; background: #158bd6;
 -moz-border-radius: 40px; -webkit-border-radius: 40px; border-radius: 40px;
 color: #fff; text-align: center;
}
.about ul.step li dl dd { color: #158bd6;}
.about ul.track { width: 100%; margin-bottom: 20px; font-size: 0; text-align: center;}
.about ul.track li{ display: inline-block; width: 31%; margin: 0 1%;}
.about ul.track li dl { background: #fff; overflow: hidden;
 -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;
}
.about ul.track li dl dt img{ width: 100%;}
.about ul.track li dl dd { padding: 15px 0; background: #158bd5; color: #fff; font-size: 16px;}
.about ul.track li dl dd span { display: block; font-size: 22px;}
.about p.note { color: #b0b1b6; font-size: 14px; text-align: center;}


.info { padding: 40px 0; background: #e4f4ff;}
.info .inner{ width: 95%; max-width: 980px; margin: auto;}
.info h2 { margin-bottom: 30px; color: #158bd6; font-size: 22px; font-weight: 100; text-align: center;}
.info h2 span{ padding: 12px 40px; background: #fff; border: solid 1px #158bd6;
 -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px;
}
.info h2 br{ display: none;}
.info p.txt{ margin-bottom: 30px; color: #158bd6; font-size: 14px; text-align: center;}
.info ul.point { margin-bottom: 30px; text-align: center; font-size: 0;}
.info ul.point li { box-sizing: border-box; display: inline-block; height: 100px; margin: 4px; background: #fff;
 color: #158bd6; font-size: 14px; line-height: 1.4; vertical-align: middle;
}
.info ul.point1 li { width: 100%; height: auto;}
.info ul.point2 li { width: 49%;}
.info ul.point3 li { width: 31%;}
.info ul.point4 li { width: 23%;}
.info ul.point5 li { width: 18%;}
.info ul.point6 li { width: 15%;}
.info ul.point7 li { width: 13%; font-size: 13px;}
.info ul.point li span{ display: block; font-size: 18px; font-wight: 700; font-weight: 700;}
.info ul.point1 li { padding: 30px; text-align: left; font-size: 14px;}
.info ul.point1 li span { margin-bottom: 10px; font-size: 18px; font-weight: 700;}
.info ul.point li.row1 { padding-top: 40px;}
.info ul.point li.row2 { padding-top: 30px;}
.info ul.point li.row3 { padding-top: 20px;}
.info ul.pointNav { text-align: center;}
.info ul.pointNav li { display: inline-block; margin: 0 10px;}
.info ul.pointNav li a { padding: 5px 20px; background: #158bd6; color: #fff; font-size: 14px;
 -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px;
}
.info ul.pointNav li a br{ display: none;}
.info .fig{ width: 252px; margin: 0 auto 20px;}
.info hr{ width: 90%; height: 1px; margin: 40px auto; border: none; border-bottom: dotted 2px #bde0f7;}
@media (max-width: 769px) {
	.kv h2{ font-size: 24px;}
	.kv p.read br{ display: block;}
	.about ul.demand { background-size: auto 80%;}

	.info ul.point li { font-size: 12px;}
	.info ul.point2 li { width: 48%;}
	.info ul.point2 li.row2 { padding-top: 25px;}
	.info ul.point7 li { width: 23%; font-size: 13px;}
	.info ul.point li span{ display: block; font-size: 16px; font-wight: 700; font-weight: 700;}
	.info ul.point1 li { padding: 30px; text-align: left; font-size: 14px;}
	.info ul.point1 li span { margin-bottom: 10px; font-size: 18px; font-weight: 700;}
	
}
@media (max-width: 641px) {
	.kv h2{ font-size: 20px;}
	.kv p.read { font-size: 14px;}
	.announce h2{ margin-bottom: 20px; font-size: 18px;}
	.announce p.read{ margin-bottom: 20px; font-size: 16px;}
	.announce p.txt { font-size: 13px;}

	.about p.read { font-size: 18px;}
	.about p.note { text-align: left;}
	.about ul.demand { background-size: auto 60%;}
	.about ul.track li dl dd { font-size: 14px;}
	.about ul.track li dl dd span { font-size: 18px;}
	
	.info ul.pointNav li { width: 30%; margin: 0 6px;}
	.info ul.pointNav li a { display: block;}
	.info ul.pointNav li a br{ display: block;}
	.info ul.point2 li { font-size: 11px;}
	.info ul.point5 li { width: 31%;}

}
@media (max-width: 481px) {
	.kv { padding-top: 60px;}
	.kv p.mark span{ padding: 12px 40px; font-size: 15px;}
	.kv h2 { font-size: 18px;}
	.kv h2 span { display: block;}
	.kv p.read { font-size: 13px;}

	.announce h2{ font-size: 16px;}
	.announce h2 br{ display: none;}
	.announce p.read{ font-size: 15px;}
	.announce p.txt { font-size: 13px; line-height: 1.6;}

	.about p.read { font-size: 16px; text-align: left;}
	.about p.read br{ display: none;}

	.about ul.demand { padding-bottom: 280px; background-position: 50% 100%; background-size: auto 280px;}
	.about ul.demand li{ margin-bottom: 5px; font-size: 15px;}

	.about ul.sample { width: 80%; margin: 0 auto 40px;}
	.about ul.sample li { display: block; width: 100%; vertical-align: top;}
	.about ul.sample li:nth-child(2){ position: relative; width: 100%; height: 80px;}
	.about ul.sample li:nth-child(2) span{ transform: rotate(90deg);
	 position: absolute; top: 50%; left: 50%; margin-left: -20px; margin-top: -30px;
	}

	.about ul.track li{ display: block; width: 80%; margin: 0 auto 10px;}
	.about ul.track li dl dd { padding: 10px 0; font-size: 16px;}
	.about ul.track li dl dd span { font-size: 22px;}

	.info h2 { padding: 6px 20px; font-size: 18px; line-height: 1.2;}

	.info h2 span { display: block;}
	.info h2 br{ display: block;}
	.info p.txt{ font-size: 12px;}
	.info p.txt br{ display: none;}
	.info ul.point li { font-size: 10px;}
	.info ul.point li span{ font-size: 15px;}
	.info ul.point1 li { padding: 20px;}
	.info ul.point1 li span { font-size: 16px;}
	.info ul.point2 li { width: 90%; font-size: 12px;}
	.info ul.point7 li { width: 31%;}

	.info ul.pointNav li { width: 80%; margin: 0 auto 10px;}


}