@charset "UTF-8";


/* WEB予約 */
.contact_img{ 
  padding: .7em 0 .7em 0 ;
  cursor: pointer;
  width:320px;
  background-color: #96cac3;
  text-decoration: none;
  text-align: center;
}

.contact_img2 a{
	 font-size:18px;
	 color: #fff;
	 text-decoration: none;
	}
	
.contact_img2 {
  display: inline-block;
  vertical-align: middle;
 
}
@media (max-width:320px){
.contact_img{ 
  width:260px;
}
}

/* 詳しくみる */
.hvr-border-fade{
  padding:  0;
  cursor: pointer;
  width:180px;
  text-decoration: none;
  text-align:center;
  background-color:#003C7E;
}

.more_icon_box a{
	font-weight:bold;
	font-size:12px;
	color: #fff;
	text-decoration: none;
}

@media (max-width:767px){
.more_icon_box {
	line-height:200%;
}
}



/* ボタンのホバー */
.hover_black{
	background-color:#fff;
}  



/* #reserve,
.hvr-border-fade,
.contact_img{ 
   -webkit-transition: background-color 0.3s;
   -moz-transition:  background-color 0.3s;
	-ms-transition:  background-color 0.3s;
	-o-transition:  background-color 0.3s;
	transition: background-color 0.3s;
}

#reserve:hover,
.contact_img:hover{ 
  background-color:#F3B480;
} */

.hvr-border-fade:hover{ 
  background-color:#6B8CAF;
}





.fade{
	-webkit-transition: opacity 0.3s ;
	-moz-transition: opacity 0.3s ;
	-ms-transition: opacity 0.3s;
	-o-transition: opacity 0.3s ;
	transition: opacity 0.3s ;
	
}  

.fade:hover{
	filter: alpha(opacity=70);
	opacity: 0.7; 

}


.fourmenu_outer{
	-webkit-transition: opacity 0.3s ;
	-moz-transition: opacity 0.3s ;
	-ms-transition: opacity 0.3s;
	-o-transition: opacity 0.3s ;
	transition: opacity 0.3s ;
	-webkit-transform: translate3d(0, 0, 0);	
	
}  

.fourmenu_outer:hover{
	filter: alpha(opacity=70);
	opacity: 0.7;
}

.btn-more{
	display: inline-block;
}
.btn-more a{
	display: block;
	border: 1px solid #1a1a1a;
	width: 218px;
	height: 48px;
	text-align: center;
	line-height: 48px;
	font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}
.btn-more a:hover{
	opacity: 0.6;
	transition: opacity .3s;
}
.btn-more a span.line{
	display: inline-block;
	width: 70px;
	height: 1px;
	background: #000;
	position: relative;
	margin-left: 8px;
	margin-bottom: 4px;
}
.btn-more a span.line::after{
	content: '';
	display: block;
	position: absolute;
	width: 4px;
	height: 1px;
	transform: rotate(45deg);
	transform-origin: right;
	right: 0;
	background: #000;
}
.btn-more a:hover span.line{
	transform: translateX(8px);
	transition: all .3s;
}