lodging/*font-family: ro-nikkatsu-sei-kai-std, serif;
font-weight: 400;
font-style: normal;
font-family: source-han-serif-japanese, serif;
font-weight: 500;
*/
.pc{display: inline;}
.tb{display: none;}
.sp{display: none;}


#wrap a{
transition: all 0.3s;
}
#wrap a:hover{
transform: translateY(-15px);
}

 .tour_link a:hover{
	opacity: 0.5;
}

#wrap{
	margin: 0 auto;
	width:100%;
	background:url(../img/bg.jpg) repeat;
	font-family:“游ゴシック”, YuGothic, “メイリオ″, Meiryo, Arial, Roboto, “Droid Sans”, “Hiragino Kaku Gothic ProN”, sans-serif;
	line-height: 1.6;
	letter-spacing: 0.05em;
	font-size: 15px;
	/*padding-bottom: 15em;*/
}

#title{
	width: 100%;
	background: url(../img/main.jpg)  no-repeat center top;
	background-size:cover;
	height: 400px;
	max-height:600px;
}

.title_pun{
	font-size: 1.2rem;
	color: #ffffff;
	background: #151e49;
	width:100%;
	padding: 0.5em 12em;
	font-weight: bold;
}

/*#title {
  position: relative;
  height: 350px;
}
#title img {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  max-width: inherit;
}*/


/*.title, .blend{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}
*/
h1{
	font-size: 4.46rem;
	font-family: ro-nikkatsu-sei-kai-std, serif;
	font-style: normal;
	color: #ffffff;
	text-align: center;
	position: relative;
}



h1::before{
	content: "";
	position: absolute;
	background: url(../img/title_bg.png) no-repeat;
	width:320px;
	height:320px;
	top:-140%;
	left:40%;
}

.sub_title{
	font-size: 1.6rem;
	font-family: source-han-serif-japanese, serif;
	font-weight: 400;
	font-style: normal;
	color: #ffffff;
	text-align: center;
	margin-top: 3em;
	letter-spacing: 0.1em;
}

.yado_name{
	position: relative;
}

.area{
	position: absolute;
	/*background: #ae9886;*/
	border: #ae9886 solid 1px;
	width:100px;
	padding:0.3em 1em;
	font-size: 1rem;
	font-family: source-han-serif-japanese, serif;
	font-weight: 700;
	color: #ae9886;
	top: -20%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	text-align: center;
}

@media all and (-ms-high-contrast: none) {  /*IE11 webfontの代替と微調整*/
	.area{
		font-family: Yu Mincho;
		font-style: normal;
		top: -20%;
    left: 50%;
  transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);.sub_title
		padding:0.5em 1em 0.2em 1em;
}
}

.point_box{
	background: #151e49;
	width:950px;
	margin: 5em auto 1em auto;
	color: #ffffff;
	font-family: source-han-serif-japanese, serif;
	font-style: normal;
	font-size: 1.066rem;
	flex-basis: 100% ;
	flex-direction:column;
	padding: 2em 2em 1em 2em;
	position: relative;
}

.point{
	position: absolute;
	background: url(../img/point_obi.png) no-repeat;
	width:280px;
	height: 50px;
	top:-40px;
	left:0;
	padding: 0.5em 2em;
}

/*.point::before{
	content: "";
	position: absolute;
	background: url(../img/title_bg.png) no-repeat;
	width:320px;
	height:320px;
	top:-80%;
	left:40%;
*/
.point_box dl{
	display: flex;
	padding-bottom: 1.2em;
}

.point_box dt{
	/*flex-basis: 100px;*/
	padding-right: 2em;
}

.point_box dd{
	line-height: 1.4;
}

#main{
	background: url(../img/bg02.jpg) repeat;
	padding-top: 2em;
}

.main_box{
	width:950px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding-bottom: 2em;
	padding-top: 2em;
}

.main_box img{
	width:100%;
	height: 100%;
}

.main_box h2{
	font-size: 1.466rem;
	font-family: source-han-serif-japanese, serif;
	font-weight: 400;
	font-style: normal;
	color: #42210b;
	text-align: center;
	margin-top: 1em;
	margin-bottom: 1em;
	letter-spacing: 0.1em;
	padding-top: 1em;
	padding-bottom: 0.1em;
	display: inline;
	border-bottom: #42210b dotted 1px;
}
.main_box dt{
	font-weight: normal;
}
.main_box dt strong{
	font-size: 1.1em;
}
/*----------------------------------------------three*/
.main_box .three{
	display: flex;
	flex-wrap:wrap;
	padding: 1em 0;
}
.main_box .three dt{
flex-basis: calc((100% - 40px) / 3) ;
margin-right: 19.5px;
}

.main_box .three dt:nth-of-type(3){
	margin-right: 0;
}

.main_box .three dd{
	padding: 1em 0;
}
/*----------------------------------------------room*/
.main_box.room .flexbox {
    display: flex;
	margin-bottom: 1em;
}
.main_box.room .flexbox dl dt {
	padding-top: 1em;	
    margin-bottom: 0.5em;
}
.main_box.room .flexbox dl,.main_box.room dd.flexbox img, .main_box.room dd.flexbox p {
    width: 50%;
}
.main_box.room .flexbox dl:first-child{
	margin-right: 1.5em;
}
.main_box.room dd.flexbox img {
	margin-right: .5em;
}
/*----------------------------------------------onsen*/
.main_box.onsen img{
	height: auto;
}
.main_box.onsen .top {
    display: flex;
/*	align-items: flex-end;	*/
	margin-bottom: 1em;
}
.main_box.onsen .top dt{
	flex-basis: 70%;
	margin-right: 1em;
}
.main_box.onsen .top dd{
	width: 30%;
}	
.main_box.onsen	.bottom{
    display: flex;
}
.main_box.onsen	.bottom dl{
width: 33.33%;
margin-right: 19.5px;
}

.main_box.onsen	.bottom dl:nth-of-type(3){
	margin-right: 0;
}



.gradeup{
	width:80%;
	display: flex;
	flex-wrap: wrap;
	background-image: linear-gradient(45deg, #5e340f, #8c6a46);
	padding: 1em;
	position: relative;
}

/*.fuki{
    position: relative;
    background: #EEE;  /* 好みで色を変えてください */ 
   /* padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
}*/
.gradeup:before{
    content: '';
    position: absolute;
    top: -12%;
    left: 50%;
    transform: translateX(-50%);
    border-bottom: 25px solid #7b5632;  /* 好みで色を変えてください */ 
    border-right: 25px solid transparent;
    border-left: 25px solid transparent;
}

.gradeup div:nth-of-type(2){
	padding-left: 2em;
	color: #ffffff;
}

.gradeup_plan{
	font-size: 1.3rem;
	font-family: source-han-serif-japanese, serif;
	font-style: normal;
	padding: 0.5em 0;
}

.tour_link{
	background: #151e49;
	padding: 5em 0;
}

.tour_link ul{
	width:950px;
	margin: 0 auto;
	color: #ffffff;
	display: flex;
}

.tour_link li{
	/*padding: 1em;*/
	border-radius: 10px;
}

.lodging a{
	display: block;
	background: #ae9886;
	padding: 1em 2em 1em 1em;
	border-radius: 10px;
	text-align: right;
}

.jr a{
	display: block;
	background: #ae9886;
	padding: 1em 2em 1em 1em;
	border-radius: 10px;
	text-align: center;
}

.lodging, .jr{
	flex-basis:35%;
	/*padding-right: 10%;*/
	margin-right: 3%;
	position: relative;
	color: #FFF;
}

/*リンクない場合*//*.jr {
	display: block;
	background: #d1cecb;
	padding: 1em 2em 1em 1em;
	border-radius: 10px;
	text-align: center;
}*/

.pamphlet{
	flex-basis:35%;
	position: relative;
}

/*リンクある場合*/
.pamphlet a{
	display: block;
	border: #ffffff 1px solid;
	padding:  1em 2em 1em 1em;
	border-radius: 10px;
	text-align: center;
}

/*リンクない場合
.pamphlet  {
	display: block;
	background: #d1cecb;
	padding: 1em 2em 1em 1em;
	border-radius: 10px;
	text-align: center;
}*/

.pamphlet{
	flex-basis: 27%;
}

.lodging .icon, .jr .icon, .pamphlet .icon{
	position: absolute;
	top:48%;
	left:1em;
  width: 25px;/*アイコンの横幅指定*/
  transform: translateY(-50%);/*この指定で上下中央に*/
}

/*pagetop*/
#totop {
	position: fixed;
	bottom: 1em;
	right: 1em;
	z-index:50;
	width:4em;
	height:4em;
	border-radius:50%;
	overflow:hidden;
}

/*#toback{
	position: fixed;
	bottom: 1em;
	left: 1em;
	z-index:50;
	width:4em;
	height:4em;
	border-radius:50%;
	overflow:hidden;
}*/

#totop a{
	display:block;
	width:100%;
	height:100%;
	background-color:rgba(119,119,119,0.4);
	color:#FFF;
	font-size:22px;
	text-align:center;
}
#totop a:hover{
	text-decoration: none;
	background-color: #a5a5a5;
}

#gotop {display:none;}

#totop .material-icons{
	font-size: 50px;
}



/************************************************************
						タブレット対応
************************************************************/

/* 画面サイズ640xから959pxまではこのファイルのスタイルが適用される。 */
@media screen and (min-width:640px) and (max-width:959px) {


#wrap{
	width:100%;
	}
	
h1{
	font-size: 5.866rem;
	font-family: ro-nikkatsu-sei-kai-std, serif;
	font-style: normal;
	color: #ffffff;
	text-align: center;
	position: relative;
}

h1::before{
	content: "";
	position: absolute;
	background: url(../img/title_bg.png) no-repeat;
	/*top:80%;
	left:40%;*/
	 top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.title_pun{
	padding: 0.5em 5em;
	}

.sub_title{
	font-size: 1.8rem;
	font-family: source-han-serif-japanese, serif;
	font-weight: 400;
	font-style: normal;
	color: #ffffff;
	text-align: center;
	margin-top: 1em;
}
	
#main, .tour_link{
	padding: 1em 1.5em;
	}	
	
.main_box{
	padding-top: 0;
	}	
	
.gradeup{
	width:85%;
	}	
	
.gradeup:before{
	top:-8%;
	}	
	
.point_box, .main_box, .tour_link ul, #breadcrumb, #pagetop{
	width:100%;
	}
	
}

/************************************************************
						スマホ対応
************************************************************/
@media screen and (max-width:559px)  {

body {font-size:14px;}	
.pc{display: none;}
.tb{display: none;}
.sp{display: block;}
	
#wrap{
	padding-bottom: 1em;
	width:100%;
	}
	
.point_box, .main_box, .tour_link ul, #breadcrumb, #pagetop{
	width:100%;
	}


/*#title{
	width: 100%;
	position: relative;
	background: url(../img/total_main_sp.jpg)  no-repeat center top;
	background-size:cover;
	height: 350px;

}
	
/*.title, .blend{
	width:65%;
	}*/
	
#title{
	width: 100%;
	background: url(../img/main_sp.jpg)  no-repeat center top;
	background-size:cover;
	height: 350px;
	max-height:350px;
}
	

.area{
	top: -30%;
	}
	
@media all and (-ms-high-contrast: none) {  /*IE11 webfontの代替と微調整*/
	.area{
		font-family: Yu Mincho;
		font-style: normal;
		top: -30%;
}
}
	
	
.sub_title{
	font-size: 1.06rem;
	margin-top: 4em;
	}
	
h1{
	font-size: 3rem;
	}	
	
h1::before{
	content: "";
	position: absolute;
	background: url(../img/title_bg_sp.png) no-repeat;
	width:250px;
	height:250px;
	top:-170%;
	left:20%;
}
	
.title_pun{
	font-size: 1rem;
	padding: 0.5em 2em;
	}	
	
.point{
	height: 40px;
	}	

.point_box{
	font-size: 1.1em;
	padding: 1.5em;
	margin: 6em auto 0 auto;
	}	
	
.point_box dl{
	flex-direction:column;
	padding-bottom:1.7em;
	}	
	
.point_box dt{
	flex-basis: auto;
	padding-right: 0;
	padding-bottom: 0.3em;
	}	
	
.main{
	margin: 3em auto 0 auto;
	flex-direction:column;
	padding: 0 1.5em 2em 1.5em;
	}	
	
.main_box{
	padding: 0 1.5em;
	}
	
.main_box h2{
	font-size: 1.3rem;
	}
	
.main_box dt{
	flex-basis: auto;
	margin-right: 0;
	margin-bottom: 1em;
	}	
/*----------------------------------------------three*/
.main_box .three{
	display: block;
/*	
	flex-wrap:wrap;
	padding: 1em 0;*/
}
.main_box .three dt{
/*flex-basis: calc((100% - 40px) / 3) ;*/
margin-right: 0;
}
/*
.main_box .three dt:nth-of-type(3){
	margin-right: 0;
}

.main_box .three dd{
	padding: 1em 0;
}*/
/*----------------------------------------------room*/
.main_box.room .flexbox {
    display: block;
	
/*	margin-bottom: 1em;*/
}
/*.main_box.room .flexbox dl dt {
	padding-top: 1em;	
    margin-bottom: 0.5em;
}*/
.main_box.room .flexbox dl,.main_box.room dd.flexbox img, .main_box.room dd.flexbox p {
    width: 100%;
}
/*.main_box.room .flexbox dl:first-child{
	margin-right: 1.5em;
}
.main_box.room dd.flexbox img {
	margin-right: .5em;
}*/
/*----------------------------------------------onsen*/
/*.main_box.onsen img{
	height: auto;
}*/
.main_box.onsen .flexbox {
    display: block;
/*	

	margin-bottom: 1em;*/
}
.main_box.onsen .flexbox dt{
	width: 100%;
	margin-right: 0em;
}
.main_box.onsen .flexbox dd{
	width: 100%;
}	
	
.gradeup{
	width:90%;
	}	
	
.gradeup:before{
	top:-8%;
	}
	
.gradeup div:nth-of-type(2){
	padding-left: 0;
	}
	
.gradeup_plan {
	font-size: 1.1rem;
	}
	
.tour_link{
	padding: 3em 0;
	}	
	
.tour_link ul{
	flex-direction: column;
	}
	
.lodging, .jr, .pamphlet{
	margin: 5%;
	}
	
.lodging a, .jr a, .pamphlet a{
	text-align: center;
	padding: 1em 2em;
	}	
	
}
