@charset "utf-8";

.headimg{
	width: 100%;
	min-width: 960px;
	height: 285px;
	text-align: center;
	background: url(../../img/treatment/headimg.jpg) center center;
background-size: cover;
}
.headimg h2{
	font-size: 48px;
	font-weight: normal;
	line-height: 1;
	color: #FFF;
	padding: 110px 0 0;
}

@media screen and (max-width: 480px) {
.headimg{
	width: 100%;
	min-width: auto;
	height: 137px;
}
.headimg h2{
	font-size: 24px;
	font-weight: normal;
	line-height: 1;
	color: #FFF;
	padding: 55px 0 0;
}
}



/* ----------------------------------------------------------------------
 sec01
---------------------------------------------------------------------- */

#sec01{
	width: 100%;
	min-width: 960px;
}
#sec01 p.lead{
	font-size: 48px;
	color: #000;
	padding:70px 0 60px;
	text-align: center;
}
br.sp{
display: none;
}
#sec01 .con{
	width: 100%;
}
#sec01 .con .item{
	float: left;
	width: 32%;
	margin: 0 2% 20px 0;
	overflow:		hidden;
	position:		relative;	/* 相対位置指定 */
}
#sec01 .con .item:nth-child(3n){
	margin: 0 0 20px 0;
}


#sec01 .con .item p {
	font-size:		18px;
	line-height: 1.8;
	text-align: 		center;
	padding:50px 0 0;
	color:			#fff;
}
#sec01 .con .item .mask {
	width:			100%;
	height:			100%;
	position:		absolute;	/* 絶対位置指定 */
	top:			0;
	left:			0;
	opacity:		0;	/* マスクを表示しない */
	background-color:	#71b937;	/* マスクは半透明 */
	-webkit-transition:	all 0.2s ease;
	transition:		all 0.2s ease;
}
#sec01 .con .item:hover .mask {
	opacity:		1;	/* マスクを表示する */
}
#sec01 .con .item a.btn{
	font-size: 18px;
	line-height: 46px;
	display: block;
	width:260px;
	border: 1px solid #FFF;
	margin: 25px auto 0;
	color: #FFF;
	text-align: center;
	background: url(../../img/yaji01.png) no-repeat 10px 16px;
}
#sec01 .con .item a.btn:hover{
	background: url(../../img/yaji01.png) no-repeat 10px 16px rgba(255,255,255,0.3)
}

@media screen and (max-width: 480px) {
br.sp{
display: block;
}
	#sec01{
	width: 100%;
	min-width: auto;
}
#sec01 p.lead{
	font-size: 24px;
	color: #000;
	padding:30px 0 20px;
	text-align: center;
}
#sec01 .con{
	width: 80%;
	margin: 0 10%;
}
#sec01 .con .item{
	float: none;
	width: 100%;
	margin: 0 0 20px 0;
	overflow:		hidden;
	position:		relative;	/* 相対位置指定 */
}
#sec01 .con .item:nth-child(3n){
	margin: 0 0 20px 0;
}
#sec01 .con .item p {
	font-size:		16px;
	text-align: 		center;
	padding:35px 0 0;
	color:			#fff;
}

#sec01 .con .item:hover .mask {
	opacity:		1;	/* マスクを表示する */
}
#sec01 .con .item a.btn{
	font-size: 16px;
	line-height: 40px;
	display: block;
	width:70%;
	border: 1px solid #FFF;
	margin: 20px auto 0;
	color: #FFF;
	text-align: center;
	background: url(../../img/yaji01.png) no-repeat 10px 14px;
}
	#sec01 .con .item a.btn:hover{
	background: url(../../img/yaji01.png) no-repeat 10px 14px rgba(255,255,255,0.3)
}
}

/* ----------------------------------------------------------------------
 info
---------------------------------------------------------------------- */

#info{
	width: 100%;
	background: #FFF;
	color: #000;
	text-align: center;
	padding: 80px 0;
}
#info h2{
	font-size: 48px;
	font-weight: bold;
	line-height: 1;
	color: #000;
	padding:0 0 50px;
}
#info .con{
	width: 960px;
	margin: 0 auto;
	padding: 0 0 0;
}
#info .con .shop{
	width: 280px;
	margin: 0 20px 30px;
	float: left;
	text-align: left;
}
#info .con .shop #map, #info .con .shop #map2, #info .con .shop #map3, #info .con .shop #map4{
  width: 100%;
  height: 280px;
	margin: 0 0 20px;
  }

#info .con .shop p{
	font-size: 18px;
}
#info .con .shop p.tel{
	font-size: 30px;
	line-height:1;
	background: url(../../img/tel01.png) no-repeat 0;
	padding: 20px 0 20px 35px;
}
#info .con .shop a.btn{
	font-size: 18px;
	line-height: 46px;
	display: block;
	width:278px;
	border: 1px solid #828282;
	margin: 0 auto;
	color: #828282;
	text-align: center;
	background: url(../../img/yaji02.png) no-repeat 10px 16px;
}
#info .con .shop a.btn:hover{
	background: url(../../img/yaji02.png) no-repeat 10px 16px rgba(130,130,130,0.1);
}

@media screen and (max-width: 480px) {
	#info{
	width: 100%;
	background: #FFF;
	color: #000;
	text-align: center;
	padding: 40px 0;
}
#info h2{
	font-size: 26px;
	font-weight: bold;
	line-height: 1;
	color: #000;
	padding:0 0 25px;
}
#info .con{
	width: 80%;
	margin: 0 auto;
	padding: 0 0 0;
}
#info .con .shop{
	width: 100%;
	margin: 0 0 25px;
	float: left;
	text-align: left;
}
#info .con .shop #map, #info .con .shop #map2, #info .con .shop #map3, #info .con .shop #map4{
  width: 100%;
  height: 280px;
	margin: 0 0 20px;
  }

#info .con .shop p{
	font-size: 18px;
}
#info .con .shop p.tel{
	font-size: 30px;
	line-height:1;
	background: url(../../img/tel01.png) no-repeat 0;
	padding: 20px 0 20px 35px;
}
#info .con .shop a.btn{
	font-size: 18px;
	line-height: 46px;
	display: block;
	width:auto;
	border: 1px solid #828282;
	margin: 0 auto;
	color: #828282;
	text-align: center;
	background: url(../../img/yaji02.png) no-repeat 10px 16px;
}
#info .con .shop a.btn:hover{
	background: url(../../img/yaji02.png) no-repeat 10px 16px rgba(130,130,130,0.1);
}

}