@charset "utf-8";



.notxt
{
	text-indent:100%;
    white-space:nowrap;
    overflow:hidden;
	list-style:none;
	font-size:0px;
	*text-indent:-9999px; /* IE6 */
	}
	

@media print, screen and (min-width: 481px) {
  .br_pc {
    display: block;
  }
  .hide_pc {
    display: none;
  }
}

@media screen and (max-width: 480px) {
  .br_sp {
    display: block;
  }
  .hide_sp {
    display: none;
  }
  
}


/*main*/
#main{
	/*min-width:950px;*/
	width:1100px;
	margin:0px auto 30px auto;
	padding:0px 0px 0px 0px;
	overflow:hidden;
	position:relative;
	
}

@media screen and (max-width: 480px) {
#main{
	min-width:100%;
	width:100%;
	margin:0px auto 30px auto;
}


}

/*head*/
#head{
	width:100%;
	max-width:950px;
	margin:0 auto;
 }
 
#head .logo{
	display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-pack:justify;
-ms-flex-pack:justify;
justify-content:space-between;
}

#head .dp_head{
	display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
 
@media screen and (max-width: 480px) {
#head{
	max-width:100%;
 }

#head .logo p{
	height:28px;
	margin: 5px 0 0 0;
}

#head img{
	width:100%;
	height:100%;
}

}


#top{
	background:url(../img/main_bg.jpg) top center no-repeat;
	width:100%;
	height:851px;
	margin:0 auto;
	
}

#top .inner{
	width:1100px;
	margin:0 auto;
	padding:40px 0 0 0;	
}

#top .inner .txt_01{
	margin: 0px 0px 0px 450px;
}

#top .inner .txt_02{
	margin: 350px 0 0 380px;
}

#bnr{
	margin:0;
	padding:0;
}

#hotel{
	margin:0;
	padding:0;
}

#hotel h3{
	margin:0 0 25px 0;
}

#hotel .detail{
	width:460px;
	height:430px;
	background: linear-gradient(90deg,#76CC8F, #78B42B);
	background: -moz-linear-gradient(90deg,#76CC8F, #78B42B); 
background: -webkit-linear-gradient(90deg,#76CC8F, #78B42B); 
background: linear-gradient(to 90deg,#76CC8F, #78B42B);
	display: flex; 
    flex-direction: column;
    justify-content: center;
    /*align-items: center;*/ 
	padding: 0 0 15px 30px; 
}

#hotel .sapporo{
	background:url(../img/hotel_sapporo.jpg) top center no-repeat;
	width:100%;
	height:668px;
	margin:0 auto;
	position:relative;
	margin:0 auto 20px auto;
}

#hotel .sapporo .detail{
	position:absolute;
	top: 100px;
    left: 55px;
}

#hotel .kussharo{
	background:url(../img/hotel_kussharo.jpg) top center no-repeat;
	width:100%;
	height:650px;
	margin:0 auto;
	position:relative;
	margin:0 auto 20px auto;
}

#hotel .kussharo .detail{
	position:absolute;
	top: 170px;
    left: 575px;
}

#hotel .kushiro{
	background:url(../img/hotel_kushiro.jpg) top center no-repeat;
	width:100%;
	height:680px;
	margin:0 auto;
	position:relative;
	margin:0 auto 20px auto;
}

#hotel .kushiro .detail{
	position:absolute;
	top: 50px;
    left: 55px;
}

#hotel .shinfurano{
	background:url(../img/hotel_furano.jpg) top center no-repeat;
	width:100%;
	height:670px;
	margin:0 auto;
	position:relative;
	margin:0 auto 20px auto;
}

#hotel .shinfurano .detail{
	position:absolute;
	top: 170px;
    left: 575px;
}


#hotel .hakodate{
	background:url(../img/hotel_oonuma.jpg) top center no-repeat;
	width:100%;
	height:669px;
	margin:0 auto;
	position:relative;
	margin:0 auto 20px auto;
}

#hotel .hakodate .detail{
	width:520px;
	position:absolute;
	top: 50px;
    left: 55px;
}





#hotel .detail h4{
	margin:0 0 0 -20px;
}

#hotel .detail p{
	font-size:20px;
	color:#FFFFFF;
	text-align:left;
	line-height:180%;
}

#hotel .detail .detail_tel{
	margin:0 0 15px 0;
}

#hotel .detail .detail_in,
#hotel .detail .detail_out{
	display:flex;
	margin: 0 0 10px 0;
}

#hotel .detail .detail_in .tit,
#hotel .detail .detail_out .tit{
	border:#FFFFFF 1px solid;
	padding: 0 10px;
    margin: 0 10px 0 0;
	width: 130px;
    text-align: center;
}

#hotel .detail .btn_detail{
	font-size:18px;
	letter-spacing:5px;
	border:#FFFFFF 1px solid;
	padding: 5px 10px;
	color:#fff;
    margin: 15px 10px 15px 0;
	width: 400px;
    text-align: center;
	transition: 0.3s;
}

#hotel .detail .btn_select{
	font-size:18px;
	letter-spacing:5px;
	background:#4C9015;
	padding: 5px 10px;
	color:#fff;
    margin: 0 10px 0 0;
	width: 400px;
    text-align: center;
	transition: 0.3s;
}

#hotel .detail .btn_detail:hover,
#hotel .detail .btn_select:hover{
	transition: 0.3s;
	background:#FFF;
	color:#4C9015;
}


#main .open{
	transform-origin:center top;
	animation:showopen 1.5s both;
}
@keyframes showopen {
	0% {
		transform:translate(1em,1em);
		opacity:0;
		text-shadow:0 0 0 #0f0;
	}
	
	100% {
		transform:translate(0,0);
		opacity:1;
		text-shadow:none;
	}
}


#main .open2{
	transform-origin:center top;
	animation:showopen2 1.5s both;
}

@keyframes showopen2 {
	0% {
		transform:translate(-1em,1em);
		opacity:0;
		text-shadow:0 0 0 #0f0;
	}
	
	100% {
		transform:translate(0,0);
		opacity:1;
		text-shadow:none;
	}
}

#main .open3{
	transform-origin:center top;
	animation:showopen3 2s both;
}

@keyframes showopen3 {
	0% {
		transform:translate(0,0);
		opacity:0;
		text-shadow:0 0 0 #0f0;
	}
	
	100% {
		transform:translate(0,0);
		opacity:1;
		text-shadow:none;
	}
}