@charset "UTF-8";
/* CSS Document Rev.20210715 */


/*--------------------
COMMON
--------------------*/
* {
	margin: 0;
	padding: 0;
	font-style: normal;
	border: 0;
	zoom: 1;
	box-sizing: border-box;}

html {
	height: 100%;
	font-size:15px;}

html>/**/body {
	overflow: -moz-scrollbars-vertical;}

html:first-child body {
	min-height: 100%;}

body {
	margin: 0;
	padding: 90px 0 0;
	border: 0;
	background: #eeeeee;
	color: #37393b;
	font-size: 100%;
	font-family: "ヒラギノ角ゴシック W3", Hiragino Kaku Gothic ProN, "ヒラギノ角ゴ ProN W3", "Noto Sans Japanese", Hiragino Sans, Meiryo, "メイリオ", Verdana, "ＭＳ Ｐゴシック", sans-serif;
    position:relative;}

strong {
	font-weight: bold;}
    
em{    
	background: linear-gradient(transparent 60%, rgba(255,180,0,1) 0%);}

img {
	max-width: 100%;
	height:auto;}

a img{
	display:block;}

a {
	text-decoration: none;
	color: #51769e;
	transition: .5s;}

a:hover {
	/**/
	opacity: 0.7;
	transition: .5s;}

p {
	/**/
	margin-bottom: 1.2em;}


.txt-center{text-align:center;}
.txt-left{text-align:left;}
.txt-right{text-align:right;}

.txt-xlarge{font-size:140%;}
.txt-large{font-size:120%;}
.txt-small{font-size:90%;}

.txt-red{}
.txt-orange{color:#ff6600;}

/*--------------------
GRID
--------------------*/
.grid,
.flex2,
.flex2-2,
.flex3,
.flex3-2,
.flex4,
.flex5 {
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: stretch;/*   Safari etc. */
	-ms-align-items: stretch;/*  IE10        */
	align-items: stretch;
	-webkit-flex-wrap: wrap;/* Safari6.1以降 */
	-ms-flex-wrap: wrap;/*IE10*/
	flex-wrap: wrap;}

/* 最終行の間隔調整 */
.flex4:before,
.flex5:before {
	content: "";
	display: block;
	order: 1;}

.flex3:after,
.flex3-2:after,
.flex4:after,
.flex5:after {
	content: "";
	display: block;}

.grid3-2 {
	width: 65.5%;}

.grid4-3 {
	width: 74.325%;}

.flex2>*,
.flex2-2>* {
	width: 48.25%;}

.grid4-2{
	width: 48.65%;}

.grid3-1,
.flex3>*,
.flex3-2>*,
.flex3:after,
.flex3-2:after {
	width: 31%;}

.grid4-1,
.flex4>*,
.flex4:before,
.flex4:after {
	width: 22.975%;}

.flex5>*,
.flex5:before,
.flex5:after {
	width: 18%;}

.flex2>*,
.flex2-2>*,
.flex3>*,
.flex3-2>*{
	margin-bottom: 4%;}

.grid>*,
.flex4>*,
.flex5>* {
	margin-bottom: 3%;}

@media screen and (max-width:640px) {
	.grid3-1,
	.grid3-2,
	.grid4-1,
	.grid4-2,
	.grid4-3,
	.flex2>*,
	.flex3>*,
	.flex3:after {
		width: 100%;}

	.flex2-2>*,
	.flex3-2>*,
	.flex4>*,
	.flex4:before,
	.flex4:after,
	.flex5>*,
	.flex5:before,
	.flex5:after {
		width: 47.5%;}

	.grid>*,
	.flex2>*,
	.flex2-2>*,
	.flex3-2>*,
	.flex3>*,
	.flex4>*,
	.flex5>* {
		margin-bottom: 6%;}
}

/*--------------------
HEADER
--------------------*/
header > div {
	height:80px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;/* Safari6.1以降 */
	-ms-flex-wrap: wrap;/*IE10*/
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: center;/*   Safari etc. */
	-ms-align-items: center;/*  IE10        */
	align-items: center;}

header {
	width: 100%;
	background: rgba(12,44,74,0.95);
	padding: 0 5%;
	position: fixed;
	top:0;
	left:0;
	z-index:100;
	font-family: 'Roboto',"ヒラギノ角ゴシック W3", Hiragino Kaku Gothic ProN, "ヒラギノ角ゴ ProN W3", "Noto Sans Japanese", Hiragino Sans, Meiryo, "メイリオ", Verdana, "ＭＳ Ｐゴシック", sans-serif;}

@media screen and (max-width: 1000px) {
	header{
		padding:0 60px 0 5%;}
}

header > div{
	width:100%;
    max-width:1000px;
	margin:0 auto;}

header > div >h1{
	display: block;
	text-indent: -9999px;
	margin-bottom: 0;
	width: 150px;
	height:80px;}

    header > div >h1 a {
        display: block;
        width: 100%;
        height: 100%;
        background: url("../imgs/logotype.png") no-repeat center left /contain;}

    nav a{
        display:inline-block;
        font-size:90%;
        margin-left:0.5em;
        font-weight:bold;
        color:rgba(12,44,74,0.95);
        box-shadow: 0px 1px 2px #000;
        padding:0.4em 0.8em;
        letter-spacing:.02em;
        white-space: nowrap;
        border:1px solid rgba(255,255,255,0.9);
        background:rgba(255,255,255,0.8);
        border-radius:4px;}

    nav a:first-child{
        margin-left:0;}

    nav a:before{
        display: inline-block;
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        margin-right:0.4em;}

    nav a.nav1:before{content: "\f5ad";}
    nav a.nav2:before{content: "\f007";}
    nav a.nav3:before{content: "\f057";}
    nav a.nav4:before{content: "\f059";}


#mobheadmenu{
display:none;
}

@media(max-width: 768px){
    header > div > nav{
display: none;    
    }

#mobheadmenu{
display:block;
width:90%;
max-width:1000px;
margin:10px auto;
}

    nav a{
    font-size:75%;
    margin-left:0;
    margin-right:0.5em;
    margin-bottom:0.5em;
    }

}


/* menu button */
.el_humburger {
  position: fixed;
  top: 28px;
  right: 20px;
  width: 19px;
  height: 25px;
  padding-top: 1px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-top: 0px;
  z-index: 330;
  cursor: pointer;
  pointer-events: auto;
  color: #000;
  text-align: center;}
 
@media screen and (max-width: 840px) {
  .el_humburger {
    display: block;
    height: 80px;
    }}
 
.el_humburger_wrapper {
  width: 19px;
  display: inline-block; }
 
.el_humburger_text {
  font-size: 12px;
  letter-spacing: 0.1em; }
 
.js_humburgerOpen .el_humburger_text.el_humburger_text__menu {
  display: none; }
 
.el_humburger_text.el_humburger_text__close {
  display: none; }
 
.js_humburgerOpen .el_humburger_text.el_humburger_text__close {
  display: block; }
 
@media screen and (max-width: 840px) {
  .el_humburger_text {
    font-size: 10px;
    padding-top: 2px; }

  .el_humburger_text svg path {
    -webkit-transition: all 200ms cubic-bezier(0.16, 0.52, 0.25, 1);
    -o-transition: all 200ms cubic-bezier(0.16, 0.52, 0.25, 1);
    transition: all 200ms cubic-bezier(0.16, 0.52, 0.25, 1);
    fill: #000; }

  .js_humburgerOpen .el_humburger_text svg path {
    fill: #000; } }
 
.el_humburger span.el_humburger_bar {
  display: block;
  width: 100%;
  margin: 0 auto 3px;
  height: 2px;
  background: #fff;
  border-radius:2px;
  -webkit-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out; }
 
.el_humburger span.el_humburger_bar:last-child {
  margin-bottom: 0; }
 
.js_humburgerOpen .el_humburger span.el_humburger_bar {
  background: #fbf9f9; }
 
@media screen and (max-width: 840px) {
  .el_humburger span.el_humburger_bar {
    left: 0;
    top: 0; } }
 
.js_humburgerOpen .el_humburger span.el_humburger_bar.top {
  -webkit-transform: translateY(3px) rotate(-45deg);
  -ms-transform: translateY(3px) rotate(-45deg);
  transform: translateY(3px) rotate(-45deg); }
 
.js_humburgerOpen .el_humburger span.el_humburger_bar.middle {
  opacity: 0; }
 
.js_humburgerOpen .el_humburger span.el_humburger_bar.bottom {
  -webkit-transform: translateY(-7px) rotate(45deg);
  -ms-transform: translateY(-7px) rotate(45deg);
  transform: translateY(-7px) rotate(45deg); }
 
.el_humburgerButton.el_humburgerButton__close {
  top: 2%;
  right: 2%; }
 
.el_humburgerButton__close span.el_humburger_bar {
  display: block;
  width: 35px;
  margin: 0 auto;
  height: 4px;
  background: #000; }
 
.el_humburgerButton__close span.el_humburger_bar.top {
  -webkit-transform: translateY(5px) rotate(-45deg);

  -ms-transform: translateY(5px) rotate(-45deg);
  transform: translateY(5px) rotate(-45deg); }
 
.el_humburgerButton__close span.el_humburger_bar.bottom {
  -webkit-transform: translateY(-6px) rotate(45deg);
  -ms-transform: translateY(-6px) rotate(45deg);
  transform: translateY(-6px) rotate(45deg); }
 
.navi {
  position: fixed;
  right: 0;
  top:0;
  height: 100%;
  background-color: rgba(58,58,64,0.95);
  width: 0;
  padding-top: 80px;
  padding-bottom: 100px;
  text-align:left;
  -webkit-transition: all 0.6s ease-out;
  -o-transition: all 0.6s ease-out;
  transition: all 0.6s ease-out;
  z-index: 320;
  overflow-x: hidden;
  overflow-y: scroll;
  -ms-overflow-style: none;    /* IE, Edge 対応 */
  scrollbar-width: none;       /* Firefox 対応 */
  }
.navi::-webkit-scrollbar {  /* Chrome, Safari 対応 */
   display:none;
}
  .js_humburgerOpen .navi {
    width: 400px; }
    @media screen and (max-width: 840px) {
      .js_humburgerOpen .navi {
        width: 100%;
        padding: 60px 0 0; } }
 
.navi_item,.navi_item2 {
  white-space: nowrap;}
  .navi_item.op_innerLink {
    cursor: pointer; }
  @media screen and (max-width: 840px) {
    .navi_item,.navi_item2 {
      margin-left: 0;} }

.navi a{
	display:block;
	font-weight:normal;
	padding:0.7em 2em;
	border-bottom:solid 1px rgba(255,255,255,.15);
  color:#fff;}
    @media screen and (max-width: 640px) {
    	.navi a{padding:0.8em 2em;}}

.navi_inner .navi_item:first-child a{
	border-top:solid 1px rgba(255,255,255,.15);}

.navi_inner .navi_item a{
	opacity:1;
	background:rgba(255,255,255,.15);}

.navi_inner .navi_item a:hover{
	opacity:1;
	background:rgba(255,255,255,.05);}

.navi_inner .navi_item2 a{
	opacity:1;
	background:rgba(255,255,255,.05);}

.navi_inner .navi_item2 a:hover{
	opacity:1;
	background:rgba(255,255,255,.15);}

.navi_inner .navi_item a:before{
	display: inline-block;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
    margin-right:0.5em;
	content: "\f105";}

.navi_inner .navi_item2 a:before{
	display: inline-block;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
    margin-right:0.5em;
	content: "\f0da";}


.navi_inner .navi_item.space:after{
	display:block;
	content:"";
	width:100%;
	height:4em;
	border-bottom:solid 1px rgba(255,255,255,.15);}

.navi small{
	margin-left:1.3em;
	font-size:80%;}

body:after{
	content:"";
	display:block;
	position:fixed;
	top:0;
	left:0;
	height:100vh;
	width:100%;
	z-index:-1;
	background:rgba(0,0,0,0);
  -webkit-transition: all 0.6s ease-out;
  -o-transition: all 0.6s ease-out;
  transition: all 0.6s ease-out;}

.js_humburgerOpen:after,
.js_humburgerOpen #firstview:after{
	background:rgba(35,65,97,.5);
	z-index:290;}

@media screen and (max-width: 640px) {

.navi_inner .navi_item.space:after{
	height:3em;}
.el_humburger{
	right:4%;}
}

/*--------------------
FOOTER
--------------------*/
footer {
    background-color: rgba(26,26,26,1.00);
    color:#fff;
    padding-top: 3em;
    padding-bottom: 3em;
    text-align:center;}

    footer nav{
    margin:0 auto;
    }

        footer nav a{
        font-size:90%;
        color:#ffffff;
        border:1px solid #fff;
        font-weight:normal;
        border-radius:4px;
        background-color:rgba(253,253,253,0);
        }

        footer nav a:hover{
        background-color:rgba(253,253,253,0.2);
        }

    address{
    margin:2em auto;
    font-size:75%;
    }

@media screen and (min-width: 640px) {

    footer nav{
    max-width:800px;
    }

        footer nav a{
        display:inline-block;
        margin:0.5em;
        padding:0.5em 0.75em;
        }

}

@media screen and (max-width: 640px) {

    footer nav{
    width:90%;
    }

        footer nav a{
        display:block;
        margin:1em;
        padding:1em;
        }

}

    footer img{
    width:100px;
    height:auto;
    margin-top:40px;}

    footer p{}

        footer p ruby{
        display:block;
        font-size:75%;
        }


#pagetop{
	position: fixed;
	bottom: 0px;
	right: 0px;
	font-size: 30px;
}

@media(max-width: 768px){
#pagetop{
	bottom: 10px;
	right: 0px;
}
}

#pagetop a {
color:rgba(219,219,219,1.00);
border-radius:2px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
padding: 10px;
text-align: center;
display: block;
opacity:0.8;
}

#pagetop a:before{
	display: inline-block;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
    margin-right:0.5em;
	content: "\f0aa";}

#pagetop a:hover {
	color:#ffffff;}


/*--------------------
CONTENTS
--------------------*/

#contents{
margin:20px auto 50px;
width:100%;
max-width:1000px;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: stretch;/*   Safari etc. */
-ms-align-items: stretch;/*  IE10        */
align-items: stretch;
-webkit-flex-wrap: wrap;/* Safari6.1以降 */
-ms-flex-wrap: wrap;/*IE10*/
flex-wrap: wrap;
flex-direction: row-reverse;
}

#contents main{
width:77%;
}

#contents aside{
width:20%;}

    /*--サイドインフォ--*/
    #contents aside #hotelinfo{
    font-size:80%;
    color:#ffffff;
    background-color:rgba(12,44,74,1);
    padding:1.5em;
    border-radius:2px;
    margin-bottom:20px;
    }

        #contents aside #hotelinfo img{
        width:100%;
        height:auto;
        }

    /*--サイドメニュー--*/
    #contents aside ul{
    margin-bottom:20px;
    list-style:none;
    }

    #contents aside ul li{
    margin-bottom:10px;
    background-color:#fff;
    }

    #contents aside ul li a{
    display:block;
    border:1px solid #fff;
    background-size:contain;
    background-repeat:no-repeat;
    background-position:left;
    padding:0.8em 0.8em 0.8em 3.2em;
    font-size:90%;
    letter-spacing:0;
    }

    #contents aside ul li a.menu01{background-image:url("../imgs/menu_bg01.jpg");}
    #contents aside ul li a.menu02{background-image:url("../imgs/menu_bg02.jpg");}
    #contents aside ul li a.menu03{background-image:url("../imgs/menu_bg03.jpg");}
    #contents aside ul li a.menu04{background-image:url("../imgs/menu_bg04.jpg");}
    #contents aside ul li a.menu05{background-image:url("../imgs/menu_bg05.jpg");}

    #contents aside ul li a ruby{
    display:block;
    font-size:80%;
    line-height:1.2em;
    opacity:.5;
    }

   /*--選ばれる理由--*/

    #reason{
    margin-bottom:20px;}


    /*--サイドバナーエリア--*/
    #contents aside .bnarea,
    #contents aside .bnarea2{
    margin-bottom:20px;
    }

        #contents aside .bnarea a,
        #contents aside .bnarea2 a{
        display:block;
        width:100%;
        margin-bottom:10px;
        }

        #contents aside .bnarea a img,
        #contents aside .bnarea2 a img{
        width:100%;
        border-radius:2px;
        }


@media(max-width: 768px){
#contents main{
width:90%;
margin:0 auto;
}

#contents aside{
width:90%;
margin:40px auto 0;}

    #contents aside #hotelinfo,
    #contents aside ul{
    display:none;}

    #contents aside .bnarea,
    #contents aside .bnarea2{
    width:100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: stretch;/*   Safari etc. */
	-ms-align-items: stretch;/*  IE10        */
	align-items: stretch;
	-webkit-flex-wrap: wrap;/* Safari6.1以降 */
	-ms-flex-wrap: wrap;/*IE10*/
	flex-wrap: wrap;}

        #contents aside .bnarea a,
        #contents aside .bnarea2 a{
        width:47.5%;
        margin-bottom:5%;
        }

    #reason{
    display:none;}

}


/*--------------------
PAGE
--------------------*/

#breadcrumbs {
	display: block;
	width: 100%;
	padding: 0.75em 1em;
	background: #fff;
	font-size: 80%;
    border-radius:4px;
    margin-bottom:20px;}

#breadcrumbs a:after{
	display: inline-block;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin: 0 0.7em;
	color: #ccc;
	content: "\f105";}


main h1{
    padding:1em;
    margin-bottom:1em;
    font-size:140%;
    color:#fff;
	background: rgba(12,44,74,1);}

main h2{
    margin-bottom:1em;
    font-size:140%;
    color:rgba(12,44,74,1);
    border-bottom:5px solid rgba(12,44,74,1);
}

main h3{
    margin-bottom:1em;
    font-size:120%;
    color:rgba(12,44,74,1);
}

main h4{
    font-size:100%;
    color:rgba(12,44,74,1);
}

main h3:before{
	display: inline-block;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-right:0.5em;
	color:rgba(12,44,74,1);
	content: "\f138";}

main p{
    margin-bottom:2em;}

main ul{
    padding-left:2em;
    margin-bottom:2em;}

.box_white{
background:#ffffff;
padding:1.5em;
border-radius:4px;
margin-bottom:2em;
}

.box_white ol{
padding:10px 20px 0;
}

main .box_white p:last-child,
main .box_white ul,
main .box_white ol:last-child{
    padding-bottom:0;}




.box_notice{
color:#777;
font-size:90%;
}

main table{
    width:100%;
    margin-bottom:2em;}

main table th,
main table td{
padding:1em;
text-align:left;
}

main table th{
width:25%;
color:#fff;
background:rgba(12,44,74,0.3);}

main table td{
background:#fff;}

.box_white table td{background:rgba(12,44,74,0.1);}


@media(max-width: 768px){
main table th,
main table td{
display: block;
width:100%;
}

}


div.ggmap{
margin-bottom:2em;
}

main img{
margin-bottom:2em;
}

main dl{
margin-bottom:2em;}

main dl dt{
font-weight:bold;
}

main dl dt:first-child{
padding-top:1em;
border-top:1px solid #ccc;
}

main dl dd{
margin-bottom:1em;
padding-bottom:1em;
border-bottom:1px solid #ccc;
}

.box_faq{
background:#fff;
}

.box_faq dt{
margin-bottom:0.5em;
}

.box_faq dt:before{
	display: inline-block;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin: 0 0.5em;
	color: #ccc;
	content: "\f059";}

.box_faq dd{
padding-left:2em;
padding-right:1em;
}



.faqlink{
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: stretch;/*   Safari etc. */
	-ms-align-items: stretch;/*  IE10        */
	align-items: stretch;
	-webkit-flex-wrap: wrap;/* Safari6.1以降 */
	-ms-flex-wrap: wrap;/*IE10*/
	flex-wrap: wrap;}

/* 最終行の間隔調整 */
.faqlink:before{
	content: "";
	display: block;
	order: 1;}

.faqlink:after{
	content: "";
	display: block;}

.faqlink>*,
.faqlink:before,
.faqlink:after {
	width: 22.975%;}

.faqlink>*{
	margin-bottom: 3%;}

@media screen and (max-width:640px) {

	.faqlink>*,
	.faqlink:before,
	.faqlink:after{
		width: 47.5%;}

	.faqlink>*{
		margin-bottom: 6%;}
}

.faqlink a{
font-size:90%;
padding:0.75em 1em;
background:#fff;
text-align:center;
border-radius:4px;
}
.faqlink a:hover{
color:#fff;
background:rgba(12,44,74,1);}

.flex2 div img,
.flex4 div img,
.flex3-2 div img{
width:100%;
height:auto;
margin-bottom:0;
}

.flex2 div p,
.flex4 div p,
.flex3-2 div p{
font-size:80%;
}

/*--客室--*/

.roomlist{}

.roomlist a{
display:block;
background:#fff;
}

.roomlist a img,.roomlist a h3,.roomlist a p{margin-bottom:0;}

.roomlist a img{}

.roomlist a h3{
font-size:110%;
color:#fff;
background-color:rgba(12,44,74,1);
margin:0 auto;
text-align:center;
padding:1em;}

main .roomlist a h3:before{
	display: none;}

    .roomlist a h3 ruby{
    display:block;
    font-size:70%;
    border-top:1px solid rgba(255,255,255,0.3);
    padding-top:0.5em;
    margin-top:0.5em;
    }


.roomlist a p.room_capacity{
font-size:80%;
color:#777;
padding:1em;
}

.roomlist a p.room_info{
font-size:90%;
padding:0 1em 1em;
}

.roomphoto{
margin-top:0;
margin-bottom:0;
}

.roomphoto img{
margin-top:0;
margin-bottom:0
}

.roomprice{
display:block;
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
padding-top:1em;
margin-top:1em;
padding-bottom:1em;
margin-bottom:2em;
font-size:110%;
font-weight: bold;
}

.roomreserve{
display: block;
width:50%;
font-size:120%;
padding:1em 0;
color:#fff;
background:rgba(12,44,74,1);
border-radius:5px;
margin:0 auto 1em;
text-align: center;
}

    .roomreserve:before{
        display: inline-block;
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        margin-right:0.5em;
        content: "\f5ad";}

.roomyakkan{
display: block;
width:50%;
font-size:120%;
padding:1em 0;
color:#486C85;
font-size:small;
background:rgba(240,240,255,1);
border-radius:5px;
margin:0 auto 1em;
text-align: center;
}

    .roomyakkan:before{
        display: inline-block;
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        margin-right:0.5em;
        content: "\f06a";}

@media(max-width: 768px){
.roomreserve,.roomyakkan{
width:100%;
}

}

/*--プラン表示--*/

table.planlist{
border-collapse: collapse;
border-spacing: 0;
margin-bottom:0;
}

table.planlist th,
table.planlist td{
background:#fff;
color:#666;
font-size:80%;
border-bottom:1px solid #ccc;
}

table.planlist th{
white-space: nowrap;
}

table.planlist td{}

table.planlist td.planlistopen{
white-space: nowrap;
width:150px;
}

    table.planlist td.planlistopen a{
    width:100%;
    }

    table.planlist td.planlistopen a:before{
        display: inline-block;
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        margin-right:0.5em;
        content: "\f078";}

table.planlist2{
border-collapse: collapse;
border-spacing: 0;
margin-bottom:0;
}

table.planlist2 th,
table.planlist2 td{
background:#f6f6f6;
color:#666;
font-size:80%;
border-bottom:1px solid #ccc;
}

table.planlist2 th{
white-space: nowrap;
}

@media(max-width: 768px){

table.planlist th,
table.planlist td{
width:100%;

}
table.planlist td.planlistopen{
width:100%;
border-bottom:2px solid #666;
}

}

.roomfacirity{}

.roomfacirity td{
font-size:90%;
width:50%;
}

@media(max-width: 768px){
.roomfacirity{
border-collapse: collapse;
border-spacing: 0;}

.roomfacirity td{
width:100%;
border-bottom:1px solid #ccc;
}

}

/*--------------------
INDEX
--------------------*/

#blk_news{
list-style:none;
padding:0;
margin-left:0;}

#blk_news li{
background:#fff;
border-bottom:1px solid #ddd;
padding:0.75em 1em;
margin-bottom:0;
}

.news_date{
display:block;
font-size:80%;
color:#999;
}

.news_txt{}

.indextopics{}

.indextopics img{
width:120px;
height:120px;
float:left;
margin-right:30px;
margin-bottom:0;
}

/* micro clearfx */
.cf:before, .cf:after {
    content:"";
    display:table
}
.cf:after { clear:both }
.cf { zoom:1 } /* IE 6/7用。不要なら削除可。 */

/*--------------------
SLIDE
--------------------*/
#viewer{
width:100%;
height:400px;
overflow:hidden;
margin-bottom:30px;
position:relative;
}

#viewer > img {
    width: 100%;
    height:400px;
    position: absolute;
    top:0;
    left:0;
    z-index:-2;
}

@media(max-width: 768px){

#viewer{
width:100%;
height:200px;
overflow:hidden;
margin-bottom:30px;
position:relative;
}

#viewer > img {
    width: 100%;
    height:200px;
    position: absolute;
    top:0;
    left:0;
    z-index:-2;}

}

/*--------------------
FORM
--------------------*/

.telno{
display: block;
font-size:150%;
border:1px solid #ccc;
border-radius:8px;
padding:1em;
margin:1em auto;
text-align: center;
width:50%;
}

    .telno:before{
        display: inline-block;
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        margin-right:0.5em;
        content: "\f095";}


@media(max-width: 768px){

.telno{
width:100%;
}

}

#mailform{}

    #mailform table{}

        #mailform table td{}

        #mailform table th{}

#f_name,
#f_ad1,
#f_ad2,
#f_tel,
#f_mail,
select,
textarea{
border:1px solid #ccc;
font-size:110%;
border-radius:4px;
padding:0.6em;
}

#f_name{width:50%;}
#f_ad1{width:25%;}
#f_ad2{width:100%;}
#f_tel{width:50%;}
#f_mail{width:100%;}
select{width:50%;}
textarea{width:100%;}
#sendbutton{}

input[type="submit"]{
    display:block;
	font-size:120%;
	width:50%;
	padding:0.5em;
	margin:0 auto;
    text-align:center;
	background:#bfd7e0;}

input[type="submit"]:hover{
	background:#bfd7dd;
}


span.notice{
font-size:80%;
margin-left:1em;
}



.roomphototxt1{
color:#555;
font-size:90%;
margin:0.5em 0 0.5em;
border-bottom:1px solid #446078;
}

.roomphototxt2{
color:#555;
font-size:80%;
line-height:1.2em;
margin:0;
}