@charset "UTF-8";
/* ==========================================================
	mainVisual
========================================================== */
#mainVisual {
	position: relative;
	background: url("../img/top/mainVisual_bg.png") center 0 no-repeat;
	background-size: 180% auto;
	background-color: #e3f23a;
	padding-bottom: 1.5em;
}
#mainVisual h1 {
	width: 90%;
	margin: 0 auto;
	padding-top: 8vw;
	padding-bottom: 5vw;
}
#mainVisual .balloon {
	position: absolute;
	width: 30%;
	left: 50%;
	top: 25vw;
	margin: 0 auto;
	margin-left: 15%;
	padding-top: 10vw;
}
#mainVisual .img {
	width: 65%;
	margin-left: 8%;
	padding-bottom: .5em;
}
@media only screen and (max-width: 767px) {
}
@media only screen and (min-width: 768px) {
	#mainVisual {
		height: 500px;
		background-position: right 0;
		background-size: auto auto;
		padding-bottom: 0;
	}
	#mainVisual h1 {
		width: 606px;
		margin-left: 5%;
		padding: 120px 0 0 0;
	}
	#mainVisual .balloon {
		width: 16%;
		max-width: 157px;
		top: 34px;
		left: 5%;
		margin: 0;
		margin-left: 575px;
		padding: 0;
	}
	#mainVisual .img {
		position: absolute;
		width: 41%;
		max-width: 499px;
		bottom: -40px;
		right: 4%;
		margin: 0;
		padding-bottom: 0;
		z-index: 2;
	}
	
	#mainVisual .btnBox {
		margin-left: 20px;
	}
	#mainVisual .btnBox .btn {
		width: 12em;
	}
	#mainVisual .btnBox .btn {
		margin: 50px 0 0 5%;
	}
}
/* ==========================================================
	fiald
========================================================== */
#field .serviceList li {
	background-color: #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
	margin-bottom: 20px;
	padding: 15px;
}
#field .serviceList li a {
	display: block;
	text-decoration: none;
}
#field .serviceList li a .txt {
	padding-bottom: .5em;
}
#field .serviceList li a .txt h3 {
	text-align: center;
	font-size: 23px;
	line-height: 1.4;
	padding-bottom: .5em;
}
@media only screen and (max-width: 767px) {
	#field .serviceList li a .txt br {
		display: none;
	}
}
@media only screen and (min-width: 768px) {
	#field .serviceList::after { content: ""; display: block; clear: both; }
	#field .serviceList li {
		float: left;
		width: 48%;
		margin-left: 4%;
		margin-bottom: 4%;
		padding: 40px;
	}
	#field .serviceList li:nth-child(2n+1) {
		clear: both;
		margin-left: 0;
	}
	#field .serviceList li a {
		display: block;
		text-decoration: none;
	}
	#field .serviceList li a:hover {
		opacity: .6;
	}
	#field .serviceList li a .img {
		padding-bottom: .4em;
	}
	#field .serviceList li a .txt {
		text-align: center;
		font-size: 18px;
	}
	#field .serviceList li a .txt p {
		height: 5em;
	}
	#field .serviceList li a .txt .name {
		font-size: 28px;
		padding-bottom: .2em;
	}
}
/* ==========================================================
	advantage
========================================================== */
#advantage ul li {
	padding: 1em 0;
}
#advantage ul li .img {
	padding-bottom: .5em;
}
#advantage ul li .txt .name {
	text-align: center;
	font-size: 20px;
	padding-bottom: .5em;
}
@media only screen and (max-width: 767px) {
}
@media only screen and (min-width: 768px) {
	#advantage ul li {
		padding: 0;
	}
	#advantage ul li::after { content: ""; display: block; clear: both; }
	#advantage ul li .img {
		float: left;
		width: 48%;
	}
	#advantage ul li:nth-child(even) .img {
		float: right;
	}
	#advantage ul li .txt {
		float: right;
		width: 48%;
		font-size: 18px;
		padding-top: 4em;
	}
	#advantage ul li:nth-child(even) .txt {
		float: left;
	}
	#advantage ul li .txt .name {
		text-align: left;
		font-size: 34px;
	}
}
/* ==========================================================
	service
========================================================== */
#service .serviceList li {
	position:relative;
	background-color: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	margin-bottom: 15px;
	padding: 15px;
}
#service .serviceList li a {
	text-decoration: none;
}
#service .serviceList li .img {
	padding-bottom: 1em;
}
#service .serviceList li .img img {
	vertical-align: bottom;
}
#service .serviceList li .txt p {
	line-height: 1.48;
}
#service .serviceList li .txt h3 {
	color: #555;
	font-size: 22px;
	line-height: 1.4;
	font-weight: bold;
	text-align: center;
	padding-bottom: .2em;
}
#service .serviceList li .txt h3 small {
	font-size: 60%;
}
#service .serviceList li .txt h3 icon {
	color: #df003a;
	position: relative;
	top: -.2em;
	left: .5em;
	font-size: 60%;
}
@media only screen and (max-width: 767px) {
	#service .serviceList li .txt p br {
		display: none;
	}
}
@media only screen and (min-width: 768px) {
	#service .serviceList::after { content: ""; display: block; clear: both; }
	#service .serviceList li {
		float: left;
		width: 49%;
		margin-bottom: 2%;
	}
	#service .serviceList li:nth-child(odd) {
		margin-right: 2%;
	}
	#service .serviceList li::after { content: ""; display: block; clear: both; }
	#service .serviceList li a::after { content: ""; display: block; clear: both; }
	#service .serviceList li .img {
		float: left;
		width: 38%;
		padding-bottom: 0;
	}
	#service .serviceList li .txt {
		float: right;
		width: 58%;
	}
	#service .serviceList li .txt p {
		font-size: 14px;
	}
	#service .serviceList li .txt h3 {
		font-size: 20px;
		line-height: 1.2;
		text-align: left;
		padding-bottom: .4em;
	}
	#service .serviceList li .txt .btnTxt {
		padding-bottom: 0;
		line-height: 1;
	}
	#service .serviceList li a {
		display: block;
		-moz-transition: all 0.3s;
		-o-transition: all 0.3s;
		-webkit-transition: all 0.3s;
		transition: all 0.3s;
	}
	#service .serviceList li a:hover {
		opacity: .6;
	}
}
@media only screen and (min-width: 1100px) {
	#service .serviceList li .txt p {
		font-size: 16px;
	}
	#service .serviceList li .txt h3 {
		font-size: 24px;
	}
}