@charset "utf-8";
@media screen and (min-width:767px){

.floating-banner {
    position: fixed; /* 追従 */
    z-index: 99999; /* 他の要素の下に隠れないように */
    top: 105px; /* バナーの上下の位置 */
   left: 5px; /* バナーの左右の位置 */
}
.pc {
    width: 200px; /* バナーの横幅を指定 */
}
.floating-banner:hover {
    opacity: .8; /* ホバーで少し透過 */
}
.sp {
    display: none; /* PCではスマホ用のバナーは非表示に */
}
@media screen and (max-width: 990px) { /* タブレット用のブレイクポイントを指定 */
    .pc {
        display: none; /* タブレットサイズ以下でPC用のバナーを非表示に */
    }
}

@media screen and (max-width: 560px) { /* スマホ用のブレイクポイントを指定 */
    .sp {
        display: inline-block; /* 消していたスマホ用のバナーを表示させる */
        width: 100vw; /* スマホの画面幅いっぱいにバナーを表示 */
    }
    .floating-banner  {
        top: unset; /* PCで指定していた上下の位置指定をクリア */
        right: 0; /* 左右の隙間が空かないように */
        bottom: 0; /* 画面の最下部にぴったりくっつくように指定 */
    }
}



#top{
	background: url(../images/room/top_bg.png) no-repeat center top;
	background-size: cover;
	height:450px;
	position: relative;
}
#top .on_text{
	max-width:1000px;
	height:350px;
	margin:0 auto;
	text-align: right;
	position:relative;
}
#top .on_text img{
	position:absolute;
	top:34%;
	right:9.5%;
}

/* nav */
#nav{
	max-width: 1000px;
	margin:90px auto 20px;
	text-align: center;
}
#nav ul{
	overflow: hidden;
}
#nav ul li{
	display: inline-block;
	width:23.5%;
	margin-right:0.5%;
}
#nav ul li:nth-of-type(4){
	margin:0;
}
#nav ul li a{
	display: block;
	transition: 0.2s ease-in-out;
}
#nav ul li a:hover{
	opacity:0.8;
}
#nav ul li figure{
	text-align: center;
}
#nav ul li img{
	width:100%;
}
#nav ul li figcaption{
	font-size: 1.2rem;
	color:#585454;
	margin-top:15px;
}

/* 共通部分 */
.title{
	text-align: center;
	background:rgba(155,142,128,.7);
	color:#fff;
	font-size: 1.5rem;
	padding:18px 0 15px;
	font-family: "游明朝体", "Yu Mincho", YuMincho, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
}
.photo_area{
	overflow: hidden;
	border-top:1px solid #fff;
}
.photo_area .photo01{
	float:left;
	width:49.9%;
	border-right:1px solid #fff;
}
.photo_area .photo01 img{
	float:right;
}
.photo_area .photo02{
	float:right;
	width:49.9%;
}
.text_area{
	width:1000px;
	margin:38px auto;
	color:#585454;
}
.text_area p{
	font-size:1.2rem;
	margin-bottom:36px;
	line-height: 1.8;
}
.text_area dl{
	overflow: hidden;
	font-size: 1.5rem;
	line-height: 2;
}
.text_area dt{
	width:20%;
	float: left;
}
.text_area dd{
	width:80%;
	float: left;
}
.dl{
	width:100%;
	color:#808080;
	background:rgba(155,142,128,.1);
}
.inner{
	max-width:1000px;
	margin:0 auto;
	padding: 60px 0;
}
.dl .inner p{
	width:700px;
	margin:0 auto;
	font-size: 0.82rem;
	text-align: center;
}
.dl ul{
	width:95%;
	margin:25px auto 0;
	overflow: hidden;
	text-align: center;
}
.dl li{
	display: block;
	float: left;
	width: 20%;
	padding-bottom:10px;
}
.dl li a{
	color:#808080;
	font-size: 0.82rem;
	text-decoration: underline;
}
.dl li a:hover{
	opacity: 0.8;
}
.to_pdf{
	width:700px;
	margin:25px auto 55px;
	text-align: center;
}
.to_pdf img{
	display: inline;
	vertical-align: middle;
}
.to_pdf p{
	display: inline;
	font-size:0.82rem;
	margin-left:5px;
}
}

@media screen and (min-width:1401px){
	.photo_area .photo01 img,
	.photo_area .photo02 img{
		width:100%;
	}
}