@charset "utf-8";

#htlMainContent {
    width: calc(100% - 220px - 20px);
    float: left;
    margin-left: auto;
    margin-right: auto;
}

#r_wrapper{
  max-width: 950px;
  margin:0 auto 100px;
	color: #333;
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	position: relative;
}

/*
##01.スライダー
##02.メニュー
 */


/*
##01. スライダー
    画像6枚で調整
    枚数を減らす場合は
    .rslider_pic img のanimationの秒数を減らし、
    画像の枚数を減らす
    表示スピード変更は delay値を調整
 */

#r_slider{
  position: relative;
  width: 750px;
  margin:100px 0 0 auto;
  overflow: hidden;
  box-sizing: border-box;
	border-right: solid 40px #7bcccf;
border-top: solid 20px #7bcccf;
}

.rslider_pic img {
	position:absolute;
	width: 100%;
	top:0;
	left:100%;
	-moz-animation: imgTrans 30s infinite;
	-webkit-animation: imgTrans 30s infinite;
	animation: imgTrans 30s infinite;
}

#rslider_photo1 img{
  -moz-animation-delay: 0s;
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
}

#rslider_photo2 img{
  -moz-animation-delay: 5s;
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
}

#rslider_photo3 img{
  -moz-animation-delay: 10s;
  -webkit-animation-delay: 10s;
  animation-delay: 10s;
}

#rslider_photo4 img{
  -moz-animation-delay: 15s;
  -webkit-animation-delay: 15s;
  animation-delay: 15s;
}

#rslider_photo5 img{
  -moz-animation-delay: 20s;
  -webkit-animation-delay: 20s;
  animation-delay: 20s;
}

#rslider_photo6 img{
  -moz-animation-delay: 25s;
  -webkit-animation-delay: 25s;
  animation-delay: 25s;
}

.rslider_adjust{
	padding:26%;
}

@-webkit-keyframes imgTrans {
	0% { left:0%; opacity:0;}
  5% { left:0%;opacity:1; }
  20% { left:0%; opacity:1;}
  25% { left:0%;opacity:0; }
  26% { left:100%;opacity:0; }
  100% { left:100%; opacity:0;}
}
@-moz-keyframes imgTrans {q
	0% { left:0%; opacity:0;}
  5% { left:0%;opacity:1; }
  20% { left:0%; opacity:1;}
  25% { left:0%;opacity:0; }
  26% { left:100%;opacity:0; }
  100% { left:100%; opacity:0;}
}
@keyframes imgTrans {
	0% { left:0%; opacity:0;}
  5% { left:0%;opacity:1; }
  20% { left:0%; opacity:1;}
  25% { left:0%;opacity:0; }
  26% { left:100%;opacity:0; }
  100% { left:100%; opacity:0;}
}

/* ##01. スライダーここまで */

ul.logo {
	position: absolute;
	left:0;
	top: -90px;
	width: 150px;
	height: 180px;
	padding: 0;
	list-style: none;
	z-index: 99;
}
ul.logo li img {
	width: 150px;
}

ul.r_table-ul {
	position: absolute;
	right: 0;
	top: -100px;
	width: 85%;
	height: 90px;
	list-style: none;
	padding: 0;
	display: flex;
    justify-content: flex-end;
}
ul.r_table-ul li a {
	height: 100%;
	display: block;
	line-height: 90px;
	text-decoration: none;
	font-size: 1.2rem;
	color: #333;
	margin-left: 70px;
}

ul.r_table-ul li:first-child {
	text-align: left;
}
ul.r_table-ul li:first-child img {
	width: 150px;
	height: auto;
}

h2 {
	width: 100%;
    height: 115px;
	position: relative;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	margin: 50px 0;
	font-size: 3.0rem;
    display: block;
	box-sizing: border-box;
	border-bottom: solid 1px #ccc;
	padding-left: 60px;
	line-height: 115px;
}
h2:before {
    content: '';
    background-color: #ecf2f0;
    display: block;
    position: absolute;
    left: 0;
    height: 115px;
    width: 115px;
    border-radius: 50%;
    top: 0px;
    z-index: -1;
}
h3 {
	font-size: 1.2rem;
	margin-bottom: 15px;
}
div.about {
	width: 100%;
	position: relative;
}
div.about img {
	width: 70%;
  box-sizing: border-box;
	border-bottom: solid 50px #7bcccf;
border-left: solid 20px #7bcccf;
}
div.abouttext {
	width: 40%;
	background-color: #fff;
	padding: 30px 50px;
	position: absolute;
	bottom: -70px;
	right: 0;
	line-height: 2.0rem;
}
div.stay {
	width: 100%;
	position: relative;
}
div.staylead {
	position: relative;
	display: block;
	overflow: auto;
	margin-bottom: 30px;
}
div.stay img.stay01 {
	width: 55%;
	float: left;
}
div.staytext {
	width: 40%;
	float: right;
	line-height: 2.0rem;
}
div.staytext div.button {
	display: block;
	float: right;
	background-color: #7bcccf;
	color: #fff;
	border-radius: 30px;
	padding: 15px 40px;
	margin-top: 20px;
}
div.staytext div.button a {
	color: #fff;
	text-decoration: none;
}

div.stayphoto {
	width: 100%;
	display: flex;
    justify-content: center;
  align-items: center;
}
div.stayphoto img {
	width: 31%;
	height: auto;
	margin: 0 1%;
}

div.cafe {
	width: 100%;
}
div.cafe img {
	width: 100%;
}
div.cafe div.button {
	display: block;
	float: right;
	background-color: #7bcccf;
	color: #fff;
	border-radius: 30px;
	padding: 15px 40px;
	margin-top: 20px;
}
div.cafe div.button a {
	color: #fff;
	text-decoration: none;
}



h2.h1 {
	width: 100%;
    height: 115px;
	position: relative;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	margin-top: -65px;
	font-size: 5.0rem;
    display: block;
	text-align: right;
	letter-spacing: 0.2rem;
	border-bottom: 0px;
}
h2.h1:before {
    content: '';
    display: none;
}

#r_noneslider{
  position: relative;
  width: 750px;
  margin:100px 0 0 auto;
  overflow: hidden;
  box-sizing: border-box;
	border-left: solid 40px #7bcccf;
border-top: solid 20px #7bcccf;
}
#r_noneslider02 {
  position: relative;
  width: 750px;
  margin:100px 0 0 auto;
  overflow: hidden;
  box-sizing: border-box;
	border-left: solid 40px #7bcccf;
border-bottom: solid 20px #7bcccf;
}
.rnoneslider_pic img {
	position:absolute;
	width: 100%;
	top:0;
	left:0;
}

div.concept {
	width: 100%;
	position: relative;
	overflow: auto;
}
div.concepttext {
	width: 45%;
	float: left;
	line-height: 2.0rem;
}
div.concept img {
	width: 50%;
	height: auto;
	float: right;
}
div.room {
	width: 100%;
	position: relative;
	overflow: inherit;
	margin-bottom: 100px;
}
div.room img {
	width: 70%;
}
div.roomtext {
	width: 40%;
	background-color: #fff;
	padding: 30px 50px;
	position: absolute;
	bottom: -130px;
	right: 0;
	line-height: 2.0rem;
}
div.roomphoto {
	width: 100%;
	display: flex;
    justify-content: center;
  align-items: center;
}
div.roomphoto img {
	width: 31%;
	height: auto;
	margin: 0 1%;
}
div.facility {
	width: 100%;
	position: relative;
	overflow: inherit;
	margin-bottom: 100px;
}
div.facilityphoto {
	width: 100%;
	display: flex;
    justify-content: center;
  align-items: center;
	margin: 30px 0 50px;
}
div.facilityphoto img {
	width: 31%;
	height: auto;
	margin: 0 1%;
}
div.menu {
	width: 100%;
	position: relative;
}
div.menuphoto {
	width: 100%;
	display: flex;
    justify-content: center;
  align-items: top;
	margin: 30px 0 50px;
}
div.menuphoto div.menu01 {
	width: 30%;
	height: auto;
	margin: 0 1.5%;
	line-height: 1.7rem;
}
div.menuphoto img {
	width: 100%;
	margin-bottom: 15px;
}
div.menuphoto div.menu02 {
	width: 30%;
	height: auto;
	margin: 0 1.5%;
	line-height: 1.7rem;
}
div.menuphoto div.menu03 {
	width: 30%;
	height: auto;
	margin: 0 1.5%;
	line-height: 1.7rem;
}