@charset "UTF-8";


/*----------------------------------------------------
	Title
----------------------------------------------------*/
#mainTtlBox{
	background-size:cover;
	background-position:top center;
	height:424px;
	position:relative;
}
#mainTtlBox h1{
	width:980px;
	margin:auto;
	padding-top:60px;
}

@media only screen and (max-width: 767px){
	#mainTtlBox{
		margin-bottom: 22%;
    	padding-bottom: 23%;
		height:auto;
	}
	#mainTtlBox h1{
		width:100%;
		padding:0;
		padding-left:10px;
		padding-top:10px;
	}
	#mainTtlBox h1 img{
		width:32%;
	}
}

/******* variation ******/

.ayabe #mainTtlBox{
	background-image:url(../images/service/ayabe/mv.png);
}
.ninokuniso #mainTtlBox{
	background-image:url(../images/service/ninokuniso/mv.png);
}
.hinatakan #mainTtlBox{
	background-image:url(../images/service/hinatakan/mv.png);
}

/*----------------------------------------------------
	navi
----------------------------------------------------*/
.serviceNav {
	width:980px;
	margin:auto;
}
.serviceNav ul{
	position:absolute;
	bottom:-40px;
	display:table;
	width:980px;
}
.serviceNav ul li{
	background:#ffffff;
	display:table-cell;
}
.serviceNav ul li:first-of-type{
	border-radius:3px 0 0 3px;
    -webkit-border-radius: 3px 0 0 3px;
    -moz-border-radius: 3px 0 0 3px;
}
.serviceNav ul li:last-of-type{
	border-radius: 0 3px 3px 0;
    -webkit-border-radius: 0 3px 3px 0;
    -moz-border-radius: 0 3px 3px 0;
}
.serviceNav ul li a{
	display:block;
	text-indent: 150%;
	white-space: nowrap;
	overflow: hidden;
	padding:10px 0;
}
.serviceNav ul li span{
	display:block;
	width:192px;
	height:18px;
	border-right:1px solid #b3b2b2;
	padding:17px 25px 25px 25px;
	position:relative;
	margin:auto;
	box-sizing:content-box;
}
.serviceNav ul li:last-of-type span{
	border-right:none;
}
.serviceNav ul li span:before{
	content:"";
	border-bottom:5px solid #f5f5f5;
	position:absolute;
	left: 25px;
    right: 25px;
    bottom: 0;
	text-indent:0;
}
.serviceNav ul li.nav01 span{
	background:url(../images/service/common/nav_01.png) center 17px no-repeat;
}
.serviceNav ul li.nav02 span{
	background:url(../images/service/common/nav_02.png) center 17px no-repeat;
}
.serviceNav ul li.nav03 span{
	background:url(../images/service/common/nav_03.png) center 18px no-repeat;
}
.serviceNav ul li.nav04 span{
	background:url(../images/service/common/nav_04.png) center 18px no-repeat;
}

/******* variation ******/
.ayabe .serviceNav ul li:hover span:before{
	border-bottom:5px solid #f46299;
}
.ninokuniso .serviceNav ul li:hover span:before{
	border-bottom:5px solid #108ead;
}
.ninokuniso .serviceNav ul li.nav01 span{
	background-position: center -33px;
}
.ninokuniso .serviceNav ul li.nav02 span{
	background-position: center -33px;
}
.ninokuniso .serviceNav ul li.nav03 span{
	background-position: center -32px;
}
.ninokuniso .serviceNav ul li.nav04 span{
	background-position: center -32px;
}

.hinatakan .serviceNav ul li:hover span:before{
	border-bottom:5px solid #caa218;
}
.hinatakan .serviceNav ul li.nav01 span{
	background-position: center -83px;
}
.hinatakan .serviceNav ul li.nav02 span{
	background-position: center -83px;
}
.hinatakan .serviceNav ul li.nav03 span{
	background-position: center -82px;
}
.hinatakan .serviceNav ul li.nav04 span{
	background-position: center -82px;
}

@media only screen and (max-width: 767px){
	.serviceNav {
		width:100%;
		padding-top:0;
	}
	.serviceNav ul{
		width:93%;
		height:auto;
		margin:auto;
		border-radius:3px;
		-webkit-border-radius:3px;
		-moz-border-radius:3px;
		padding-top:5px;
		display: -webkit-flex;
	    display: flex;
		flex-wrap:wrap;
		bottom:-30%;
		left:0;
		right:0;
	}
	.serviceNav ul li{
		background:#ffffff;
		display:block;
		width:50%;
		padding-bottom:10px;
		text-align:center;
	}
	.serviceNav ul li:nth-of-type(2n){
		border-left:1px solid #f5f5f5;
	}
	.serviceNav ul li:nth-of-type(1){
		border-radius:3px 0 0 0;
		-webkit-border-radius:3px 0 0 0;
		-moz-border-radius:3px 0 0 0;
		border-bottom:1px solid #f5f5f5;
	}
	.serviceNav ul li:nth-of-type(2){
		border-radius:0 3px 0 0;
		-webkit-border-radius:0 3px 0 0;
		-moz-border-radius:0 3px 0 0;
		border-bottom:1px solid #f5f5f5;
	}
	.serviceNav ul li:nth-of-type(4){
		border-radius:0 0 3px 0;
		-webkit-border-radius:0 0 3px 0;
		-moz-border-radius:0 0 3px 0;
	}
	.serviceNav ul li:nth-of-type(3){
		border-radius:0 0 0 3px;
		-webkit-border-radius:0 0 0 3px;
		-moz-border-radius:0 0 0 3px;
	}
	.serviceNav ul li a{
		text-indent:0;
		padding:0;
		color:#000;
		display:inline-block;
	}
	.serviceNav ul li span{
		width:100%;
		height:auto;
		margin:0;
		border:none;
		box-sizing:border-box;
		padding:17px 7px 17px 17px;
		font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
		background:none !important;
		position:relative;
	}
	.serviceNav ul li span:after{
		content:"";
		position:absolute;
		left:0;
		width:12px;
		height:12px;
		background-size:132px auto;
		background-image:url(../images/service/common/service_icon.png) !important;
		background-repeat:no-repeat;
	}
	
	.serviceNav ul li span:before{
		left: 0;
		right: 0;
	}
	
	/******* variation ******/
	.ayabe .serviceNav ul li.nav02 span:after{
		background-position:-40px 0;
	}
	.ayabe .serviceNav ul li.nav03 span:after{
		background-position:-80px 0;
	}
	.ayabe .serviceNav ul li.nav04 span:after{
		background-position:-120px 0;
	}
	
	.ninokuniso .serviceNav ul li.nav01 span:after{
		background-position:0 -38px;
	}
	.ninokuniso .serviceNav ul li.nav02 span:after{
		background-position:-40px -38px;
	}
	.ninokuniso .serviceNav ul li.nav03 span:after{
		background-position:-80px -38px;
	}
	.ninokuniso .serviceNav ul li.nav04 span:after{
		background-position:-120px -38px;
	}
	
	.hinatakan .serviceNav ul li.nav01 span:after{
		background-position:0 -76px;
	}
	.hinatakan .serviceNav ul li.nav02 span:after{
		background-position:-40px -76px;
	}
	.hinatakan .serviceNav ul li.nav03 span:after{
		background-position:-80px -76px;
	}
	.hinatakan .serviceNav ul li.nav04 span:after{
		background-position:-120px -76px;
	}
	
}



/*----------------------------------------------------
	contents
----------------------------------------------------*/
#contents{
	padding-top:90px;
}
#contents .inner{
	width:980px;
	margin:auto;
}

@media only screen and (max-width: 767px){
	#contents{
		padding-top:0px;
		padding-bottom:0;
	}
	#contents .inner{
		width:100%;
		padding:0 10px;
	}
}


/*----------------------------------------------------
	section
----------------------------------------------------*/
#contents section{
	padding-bottom:80px;
}
@media only screen and (max-width: 767px){
	#contents section{
		padding-bottom:30px;
	}
}

/*----------------------------------------------------
	h2
----------------------------------------------------*/
section h2{
	
}
section h2 span{
	text-indent: 150%;
	white-space: nowrap;
	overflow: hidden;
	height:24px;
	box-sizing:content-box;
}

#aboutBox h2 span{
	background-image:url(../images/service/common/about_ttl.png),url(../images/common/bg_01.png);
	background-repeat:no-repeat, repeat;
	background-position:top center, left;
	width:136px;
}
#serviceBox h2 span{
	background-image:url(../images/service/common/service_ttl.png),url(../images/common/bg_01.png);
	background-repeat:no-repeat, repeat;
	background-position:top center, left;
	width:191px;
}
#photoBox h2 span{
	background-image:url(../images/service/common/photo_ttl.png),url(../images/common/bg_01.png);
	background-repeat:no-repeat, repeat;
	background-position:top center, left;
	width:235px;
}
#accessBox h2 span{
	background-image:url(../images/service/common/access_ttl.png),url(../images/common/bg_01.png);
	background-repeat:no-repeat, repeat;
	background-position:top center, left;
	width:129px;
}

/******* variation ******/
.ninokuniso section h2 span{
	background-position: center -60px !important;
}
.hinatakan section h2 span{
	background-position: center -120px !important;
}

@media only screen and (max-width: 767px){
	section h2 span{
		text-indent:0;
		height:24px;
		box-sizing:content-box;
		background-image:url(../images/common/bg_01.png) !important;
		background-repeat:repeat !important;
		position:relative;
		font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
		font-weight:normal;
		width:auto !important;
		padding-left:34px !important;
	}
	section h2 span:before{
		content:"";
		width:20px;
		height:20px;
		background-size:200px auto;
		background-image:url(../images/service/common/service_icon.png) !important;
		background-repeat:no-repeat;
		position:absolute;
		top:1px;
		left:10px;
	}
	
	/******* variation ******/
	.ayabe #serviceBox h2 span:before{
		background-position:-60px 0;
	}
	.ayabe #photoBox h2 span:before{
		background-position:-120px 0;
	}
	.ayabe #accessBox h2 span:before{
		background-position:-180px 0;
	}
	
	.ninokuniso #aboutBox h2 span:before{
		background-position:0 -58px;
	}
	.ninokuniso #serviceBox h2 span:before{
		background-position:-60px -58px;
	}
	.ninokuniso #photoBox h2 span:before{
		background-position:-120px -58px;
	}
	.ninokuniso #accessBox h2 span:before{
		background-position:-180px -58px;
	}
	
	.hinatakan #aboutBox h2 span:before{
		background-position:0 -116px;
	}
	.hinatakan #serviceBox h2 span:before{
		background-position:-60px -116px;
	}
	.hinatakan #photoBox h2 span:before{
		background-position:-120px -116px;
	}
	.hinatakan #accessBox h2 span:before{
		background-position:-180px -116px;
	}
}


/*----------------------------------------------------
	about
----------------------------------------------------*/
#aboutBox .shadow .shadowInr{
	background:#ffffff;
	border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
	padding:30px 30px 0 30px;
	height:270px;
}

 /****** copyBox ******/
#aboutBox .copyBox{
	width:620px;
	height:270px;
	float:left;
}
#aboutBox .copyBox .copyInr{
}
#aboutBox .copyBox .copyInr h3{
	padding-bottom:30px;
}


 /****** outlineBox ******/
#aboutBox .outlineBox{
	width:330px;
	float:right;
	height:270px;
	font-size:12px;
}
#aboutBox .outlineInr h3{
	padding-bottom:15px;
}
#aboutBox .outlineInr dl{
	position:relative;
	line-height:1.6;
	height:100px;
}

#aboutBox .outlineInr dt{
	position:absolute;
}
#aboutBox .outlineInr dd:before{
	content:"：";
	padding-right:10px;
	position:absolute;
	left:60px;
}
#aboutBox .outlineInr dd{
	padding-left:80px;
	position:relative;
}
#aboutBox .outlineInr .btn{
	padding-top:15px;
	margin-top:15px;
	border-top:1px solid #a4a4a4;
	text-align:center;
}
#aboutBox .outlineInr .btn a{
	display:block;
	border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
	display:inline-block;
	width:180px;
	height:38px;
	vertical-align:middle;
}
#aboutBox .outlineInr .btn a img{
	margin-top:14px;
}

/******* variation ******/
.ayabe #aboutBox .outlineInr .btn a{
	background:#f46299;
}
.ninokuniso #aboutBox .outlineInr .btn a{
	background:#108ead;
}
.hinatakan #aboutBox .outlineInr .btn a{
	background:#caa218;
}


@media only screen and (max-width: 767px){
	#aboutBox .shadow .shadowInr{
		padding:10px;
		height:auto;
	}
	
	 /****** copyBox ******/
	#aboutBox .copyBox{
		width:100%;
		height:auto;
		float:none;
	}
	#aboutBox .copyBox .copyInr h3{
		padding-bottom:15px;
	}
	
	/******* variation ******/
	.ayabe #aboutBox .copyBox .copyInr h3{
		color:#f46299;
	}
	.ninokuniso #aboutBox .copyBox .copyInr h3{
		color:#108ead;
	}
	.hinatakan #aboutBox .copyBox .copyInr h3{
		color:#caa218;
	}
	
	
	 /****** outlineBox ******/
	#aboutBox .outlineBox{
		width:100%;
		float:none;
		height:auto;
		margin-top:20px;
	}
	#aboutBox .outlineInr h3{
		padding-bottom:10px;
	}
	#aboutBox .outlineInr dl{
		height:auto;
	}
	#aboutBox .outlineInr .btn a{
		color:#fff;
		height:40px;
		line-height:40px;
	}
}


/*----------------------------------------------------
	service
----------------------------------------------------*/
#serviceBox .serviceItem{
	float:left;
	width:476px;
	margin-right:28px;
	margin-bottom:20px;
}
#serviceBox .serviceItem:nth-of-type(2n){
	margin-right:0;
}
.serviceItem img{
	border-radius:3px 3px 0 0;
    -webkit-border-radius:3px 3px 0 0;
    -moz-border-radius:3px 3px 0 0;
}
.serviceItem div{
	background:#ffffff;
	border-radius:0 0 3px 3px;
    -webkit-border-radius: 0 0 3px 3px;
    -moz-border-radius:0 0 3px 3px;
	padding:20px;
}
.serviceItem div h3{
	line-height: 1.4;
	font-weight:bold;
	font-size:18px;
	padding-bottom:16px;
}
@media only screen and (max-width: 767px){
	#serviceBox .serviceItem{
		float:left;
		width:100%;
		margin-right:0;
		margin-bottom:10px;
	}
	.serviceItem img{
		width:100%;
	}
	.serviceItem div{
		background:#ffffff;
		padding:10px;
	}
	.serviceItem div h3{
		font-size:14px;
		padding-bottom:10px;
	}
	.serviceItem div{
		font-size:12px;
	}
}


/******* variation ******/
.ayabe .serviceItem div h3{
	color:#f46299;
}
.ninokuniso .serviceItem div h3{
	color:#108ead;
}
.hinatakan .serviceItem div h3{
	color:#caa218;
}


/*----------------------------------------------------
	photo
----------------------------------------------------*/
#photoBox .bx-wrapper{
	position:relative;
}
#photoBox .bx-controls-direction a{
	text-indent: 150%;
	white-space: nowrap;
	overflow: hidden;
	width:18px;
	height:32px;
	position:absolute;
	top:0;
	bottom:0;
	margin:auto;
}
#photoBox .bx-prev{
	background:url(../images/service/common/photo_arrow_l.png) left center no-repeat;
	left:-90px;
	
}
#photoBox .bx-next{
	background:url(../images/service/common/photo_arrow_r.png) left center no-repeat;
	right:-90px;
}

#photoBox .bxslider span{
	display:block;
}

.bx-wrapper{
	position: relative;
	z-index:1;
	box-shadow:0px 4px 6px -3px rgba(0,0,0,0.3);
	-moz-box-shadow:0px 4px 6px -3px rgba(0,0,0,0.3);
	-webkit-box-shadow:0px 4px 6px -3px rgba(0,0,0,0.3);
	margin:auto;
}
.bx-wrapper:before,
.bx-wrapper:after{
	content: "";
	position: absolute;
	width: 30%;
	height:10px;
	bottom: 15px;
	z-index: -1;
}
.bx-wrapper:before{
    left: 5px;
    box-shadow: 0 15px 10px #a2a2a2;
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg);
}
.bx-wrapper:after{
    right: 5px;
    box-shadow: 0 15px 10px #a2a2a2;
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    transform: rotate(5deg);
}
#bx-pager{
	letter-spacing:-40em;
}
#bx-pager a{
	display:block;
	letter-spacing:normal;
	float:left;
	margin:30px 28px 0 0;
}
#bx-pager a:nth-of-type(4n){
	margin-right:0;
}
#bx-pager span{
	display:inline-block;
	background:#e2dcc6;
}
#photoBox .shadow img,
.bxslider img{
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}

@media only screen and (max-width: 767px){
	#bx-pager{
		display:none;
	}
	
	#photoBox .bx-controls-direction a{
		text-indent: 150%;
		white-space: nowrap;
		overflow: hidden;
		width:20px;
		height:20px;
		position:absolute;
		background-size:contain;
	}
	#photoBox .bx-prev{
		left:5px;
		
	}
	#photoBox .bx-next{
		right:5px;
	}

}
/*----------------------------------------------------
	access
----------------------------------------------------*/
#contents section#accessBox{
	padding: 0;
}
#accessBox .gmBox{
	height:290px;
}

#accessBox ul{
	display:table;
	width:980px;
	padding-top:33px;
}
#accessBox ul li{
	display:table-cell;
	border-left:1px solid #a4a4a4;
	width:245px;
	padding:0 10px;
}
#accessBox ul li:last-of-type{
	border-right:1px solid #a4a4a4;
}
#accessBox ul li dl{
	text-align:center;
	text-shadow: -1px 1px 0 rgba(255,255,255,0.5);
	line-height:1.6;
}
#accessBox ul li dt{
	font-weight:bold;
	font-size:18px;
	padding-bottom:10px;
}
#accessBox ul li dd{
	font-size:12px;
}

@media only screen and (max-width: 767px){
	#accessBox .gmBox iframe{
		width:100%;
	}
	#accessBox ul{
		width:100%;
		padding:30px 10px 0 10px;
		display: -webkit-flex;
	    display: flex;
		flex-wrap:wrap;
	}
	#accessBox ul li{
		display:block;
		width:50%;
		padding:5px;
		border:none;
	}
	#accessBox ul li:nth-of-type(2n){
		border-left:1px solid #a4a4a4;
	}
	#accessBox ul li:nth-of-type(-n+2){
		border-bottom:1px solid #a4a4a4;
	}
	#accessBox ul li:last-of-type{
		border-right:none;
	}
	#accessBox ul li dt{
		font-size:14px;
	}
}

/******* variation ******/
.ayabe #accessBox ul li dt{
	color:#f46299;
}
.ninokuniso #accessBox ul li dt{
	color:#108ead;
}
.hinatakan #accessBox ul li dt{
	color:#caa218;
}