@charset "UTF-8";
/* ---------------------------------------- file info */
/* filename:service.css */
/* creation date:2016年1月14日 */
/* last updated:2016年1月14日 */
/* -------------------------------------------------- */

@media only screen and (min-width: 641px){

.listNav {
	background:#37B6B5;
	overflow:hidden;
	margin-top:-42px;
	padding:40px 0;
}
.listNav .inner {
	width:1000px;
	margin:0 auto;
	padding:40px 0 20px 0;
}
.listNav .inner article {
	text-align:center;
	width:33%;
	padding:0 15px;
	float:left;
}
.listNav .inner article h3 {
	font-size:157%;
	line-height:1.4;
	letter-spacing:3px;
	color:#fff;
}
.listNav .inner article strong {
	font-size:114%;
	border:3px solid #fff;
	display:inline-block;
	padding:6px;
	position:relative;
	color:#fff;
}
.listNav .inner article strong:after {
	width:100%;
	line-height:1;
	content:"▼";
	color:#fff;
	display:block;
	position:absolute;
	left:0;
	text-align:center;
	bottom:-1em;
}
.listNav .inner article figure {
	line-height:100px;
	padding:40px 0 25px;
}
.listNav .inner article h3 small {
	font-size:60%;
	line-height:1;
	letter-spacing:1px;
	color:#0C8280;
	display:block;
	padding:0 0 30px;
}
.listNav .inner article .more a {
	width:290px;
	height:40px;
	line-height:40px;
	color:#fff;
	text-align:center;
	background:#F6B032;
	display:block;
	margin:0 auto;
	border-radius:3px;
}
.listNav .inner article .more a:hover {
	background:#D46900;
}
#wideArea section {
	text-align:center;
	padding:100px 0;
	position:relative;
}
#wideArea section header figure {
	width:110px;
	height:110px;
	background:#fff;
	line-height:110px;
	border-radius:50%;
	margin:0 auto 15px;
}
#wideArea section:nth-of-type(2n+1) {
	background:#E0F4F3;
}
#wideArea section:nth-of-type(2n)  .flow li ,
#wideArea section:nth-of-type(2n) header figure {
	background:#eee;
}
#wideArea section:nth-of-type(2n) .merit ul {
	background:#E0F4F3;
}
#wideArea section:nth-of-type(2n)  .flow h4:after,
#wideArea section:nth-of-type(2n)  .flow h4:before{
	color:#E0F4F3;
}
#wideArea section header h3 {
	font-size:214%;
	line-height:1.1;
}
#wideArea section header small {
	color:#37b7b5;
}
#wideArea section .inner .catch {
	font-size:158%;
	font-weight:700;
	background:url(../../images/service/bg_point@2.png) no-repeat 50% 100%;
	background-size:837px auto;
	background:url(../../images/service/bg_point.png) no-repeat 50% 100% \9;
	padding:50px 0 15px;
	margin-bottom:30px;
}
#wideArea section .inner > p {
	font-size:114%;
	text-align:left;
	line-height:1.8;
	width:720px;
	margin:0 auto 30px;
}
#wideArea section .merit {
	position:relative;
}
#wideArea section .merit > ul {
	width:700px;
	font-size:114%;
	text-align:left;
	background:#fff;
	border-radius:10px;
	padding:25px 100px;
	margin:0 auto 50px;
}
#wideArea section .merit > ul li i {
	width:16px;
	height:16px;
	color:#fff;
	line-height:16px;
	background:#FFAE00;
	border-radius:50%;
	margin-right:8px;
}
#wideArea section .merit > ul li {
	font-weight: 700;
	padding:10px 0;
}

#wideArea section .merit .comment {
	width:220px;
	height:220px;
	background:#f6b132;
	border-radius:50%;
	position:absolute;
	padding:35px 0 0 0;
	left:50%;
	top:80px;
	margin-left:200px;
}
#wideArea section .merit .comment:before {
	content:"";
	width:46px;
	height:34px;
	background:url(../../images/service/fig_check.png) no-repeat;
	background-size:46px auto;
	position:absolute;
	right:0px;
	top:-10px;
}
#wideArea section .merit .comment small {
	color:#fff;
	font-size:47%;
	display:block;
	padding-bottom:15px;
}
#wideArea section .merit .comment .ttl {
	color:#EC7B0B;
	line-height:1.2;
	font-weight:700;
	font-size:250%;
}
#wideArea section .merit .comment p {
	font-size: 114%;
}
#wideArea section .recommend {
	width:900px;
	font-size:143%;
	font-weight:700;
	text-align:left;
	position:relative;
	margin:0 auto 100px;
	padding-left:230px;
}
#wideArea section .recommend .ttl {
	width:200px;
	height:200px;
	line-height:200px;
	position:absolute;
	left:0;
	top:50%;
	margin-top:-100px;
}
#wideArea section .recommend strong {
	background:url(../../images/service/bg_green_old.png) repeat-x bottom;
	background-size:auto 10px;
}
#wideArea section .flow h4 {
	font-size:250%;
	line-height:1.2;
	color:#37b7b5;
	position:relative;
	margin-bottom:30px;
}
#wideArea section .flow h4:before {
	font-size:66%;
	content:"●";
	color:#fff;
	position:absolute;
	top:20px;
	left:50%;
	margin-left:-100px;
}
#wideArea section .flow h4:after {
	font-size:66%;
	content:"●";
	color:#fff;
	position:absolute;
	top:20px;
	right:50%;
	margin-right:-100px;
}
#wideArea section .flow h4 small {
	font-size:34%;
	display:block;
	color:#333;
}

#wideArea section .flow ul {
	width:650px;
	margin:0 auto;
}
#wideArea section .flow ul li {
	background:#fff;
	text-align:left;
	border-radius:10px;
	font-size:129%;
	font-weight:700;
	overflow:hidden;
	position:relative;
	margin-bottom:15px;
	padding:20px 20px 20px 80px;
}
#wideArea section .flow ul li .num {
	width:60px;
	height:300px;
	text-align:center;
	line-height:300px;
	color:#fff;
	background:#37b7b5;
	position:absolute;
	left:0;
	top:50%;
	margin-top:-150px;
}
#wideArea section#manager .comment {
	top:220px;
}
}
@media only screen and (max-width: 640px){
	.listNav {
		background:#37B6B5;
		overflow:hidden;
		margin-top:-30px;
	}
	.listNav .inner {
		margin:0 auto;
	}
	.listNav .inner article {
		text-align:center;
		width:33%;
		padding:20px 5px;
		float:left;
	}
	.listNav .inner article:nth-of-type(2) {
		background:#00C0BD;
	}
	.listNav .inner article h3 {
		line-height:2.8;
		letter-spacing:0px;
		color:#fff;
	}
	.listNav .inner article:nth-of-type(2) h3 {
		line-height:1.4;
	}
	.listNav .inner article strong {
		font-size:71%;
		line-height:1.2;
		border:2px solid #fff;
		display:inline-block;
		padding:6px 3px;
		position:relative;
		color:#fff;
	}
	.listNav .inner article strong:after {
		width:100%;
		line-height:1;
		content:"▼";
		color:#fff;
		display:block;
		position:absolute;
		left:0;
		text-align:center;
		bottom:-1em;
	}
	.listNav .inner article figure {
		line-height:70px;
		padding:10px 0 15px;
	}
	.listNav .inner article figure img {
		height:50px;
		width:auto;
	}
	.listNav .inner article h3 small {
		font-size:60%;
		line-height:1;
		letter-spacing:1px;
		color:#0C8280;
		display:block;
		padding:0 0 20px;
	}
	.listNav .inner article .more a {
		width:80px;
		height:40px;
		font-size:79%;
		line-height:40px;
		color:#fff;
		text-align:center;
		background:#F6B032;
		display:block;
		margin:0 auto;
		border-radius:3px;
		box-shadow:0px 2px 0 0 hsla(0,0%,0%,0.2);
	}
	.listNav .inner article .more a:hover {
		background:#D46900;
	}
	#wideArea section {
		text-align:center;
		padding:20px 0;
		position:relative;
	}
	#wideArea section header figure {
		width:80px;
		height:80px;
		background:#fff;
		line-height:80px;
		border-radius:50%;
		margin:0 auto 15px;
	}
	#wideArea section header figure img {
		height:50px;
		width:auto;
	}
	#wideArea section:nth-of-type(2n+1) {
		background:#E0F4F3;
	}
	#wideArea section:nth-of-type(2n)  .flow li ,
	#wideArea section:nth-of-type(2n) header figure {
		background:#eee;
	}
	#wideArea section:nth-of-type(2n) .merit ul {
		background:#E0F4F3;
	}
	#wideArea section:nth-of-type(2n)  .flow h4:after,
	#wideArea section:nth-of-type(2n)  .flow h4:before{
		color:#E0F4F3;
	}
	#wideArea section header h3 {
		font-size:158%;
		line-height:1.1;
	}
	#wideArea section header small {
		font-size:86%;
		color:#37b7b5;
	}
	#wideArea section .inner .catch {
		font-size:129%;
		font-weight:700;
		padding:20px 10px 0;
	}
	#wideArea section .inner > p {
		text-align:left;
		line-height:1.8;
		margin:20px;
	}
	#wideArea section .merit {
		position:relative;
	}
	#wideArea section .merit > ul {
		text-align:left;
		background:#fff;
		border-radius:10px;
		padding:15px;
		margin:0 10px;
	}
	#wideArea section .merit > ul li i {
		width:16px;
		height:16px;
		color:#fff;
		line-height:16px;
		background:#FFAE00;
		border-radius:50%;
		margin-right:8px;
	}
	#wideArea section .merit > ul li {
		padding:5px 0;
	}
	
	#wideArea section .merit .comment {
		background:#f6b132;
		padding:15px 0;
		margin:20px auto;
	}
	#wideArea section .merit .comment {
	}
	#wideArea section .merit .comment small {
		color:#fff;
		font-size:47%;
		display:block;
		padding-bottom:15px;
	}
	#wideArea section .merit .comment .ttl {
		color:#EC7B0B;
		line-height:1.2;
		font-weight:700;
		font-size:158%;
	}
	
	#wideArea section .recommend {
		font-size:114%;
		font-weight:700;
		text-align:center;
		position:relative;
		margin:0 auto 20px;
	}
	#wideArea section .recommend .ttl {
		text-align:left;
		padding-left:10px;
		margin:0 auto -20px;
		position:relative;
		top:-30px;
	}
	#wideArea section .recommend .ttl img {
		width:120px;
		height:auto;
		-webkit-transform: rotate(10deg); /* chrome、safari　*/
		-moz-transform: rotate(10deg); /* firefox　*/
		transform: rotate(10deg);
	}
	#wideArea section .recommend strong {
		background:url(../../images/service/bg_green_old.png) repeat-x bottom;
		background-size:auto 10px;
	}
	#wideArea section .flow h4 {
		font-size:171%;
		line-height:1.2;
		color:#37b7b5;
		position:relative;
		margin-bottom:30px;
	}
	#wideArea section .flow h4:before {
		font-size:66%;
		content:"●";
		color:#fff;
		position:absolute;
		top:15px;
		left:50%;
		margin-left:-70px;
	}
	#wideArea section .flow h4:after {
		font-size:66%;
		content:"●";
		color:#fff;
		position:absolute;
		top:15px;
		right:50%;
		margin-right:-70px;
	}
	#wideArea section .flow h4 small {
		font-size:34%;
		display:block;
		color:#333;
	}
	#wideArea section .flow > small {
		font-size:71%;
	}
	#wideArea section .flow ul {
		margin:0 10px;
	}
	#wideArea section .flow ul li {
		background:#fff;
		text-align:left;
		border-radius:5px;
		font-weight:700;
		overflow:hidden;
		position:relative;
		margin-bottom:5px;
		padding:10px 10px 10px 50px;
	}
	#wideArea section .flow ul li .num {
		width:40px;
		height:300px;
		text-align:center;
		line-height:300px;
		color:#fff;
		background:#37b7b5;
		position:absolute;
		left:0;
		top:50%;
		margin-top:-150px;
	}
	#wideArea section#manager .comment {
		top:220px;
	}
}