/* CSS Document */

* {
	padding:0;
	margin:0px;
	outline:none;
	}
html, body {
	-webkit-text-size-adjust:100%;
	
}
html {
	font-family: "source-han-sans-cjk-ja", sans-serif;
	font-weight: 500;
	font-style: normal;
	overflow: auto;
}	
body {
	overflow: hidden;
	text-align:center;
	color: #595757;
	line-height: 1.6;
}
img {
	vertical-align:top;
	border:0;
	width: 100%;
	height: auto;
	image-rendering: -webkit-optimize-contrast;
	}
a {
	text-decoration: none;
}

li {
	list-style-type: none;
}
p,a,li,div {
	max-height: 100%;
}

/* --- class and other set --- */


.clearfix:after {
    content:"";
    display:block;
    clear:both;
}
@media only screen and (min-width: 768px) {
.left {
	float: left;
}
.right {
	float: right;
}
}

.shadow {
	box-shadow:rgba(0, 0, 0, 0.2) 2px 2px 3px 3px;
}
.just {
	text-align: justify;
}
@media only screen and (max-width: 767px) {
	html { font-size: 5.8vw;}
	.contents {
		margin: 0 1rem;
	}
	.pc {
		display: none;
	}
}
@media only screen and (min-width: 768px) {
	html { font-size: 1.6vw;}
	.contents {
		margin: 0 auto;
		width: 100%;
		box-sizing: border-box;
		padding: 0 3rem;
	}
	.sp {
		display: none;
	}
}
@media only screen and (min-width: 1250px) {
	.contents {
		max-width: 1250px;
	}
	html { font-size: 20px;}
}


/* --- orginal set --- */
.inner { width: 100%; height: 100%; position: relative; }


/* --- titleArea --- */
#header .btnarea{ width: 100%; }
#header .btnarea .inner { display: flex; align-items: center; justify-content: center;}
#header h1,
#header #menu { background-image: url(../images/bg1.jpg); background-repeat: no-repeat; background-size: cover; color: #fff;}
#header #menu a { color: #fff;}


#slide { width: 100%; overflow: hidden; font-size: 0;}
#slide .container { width: 500%; height: 100%; text-align: left;}
#slide .container > div { width: 20%; height: 100%; background-repeat: no-repeat; background-size: cover; display: inline-block; background-position: center center;}
#slide .container > div:nth-child(1) { background-image: url(../images/img0_1.jpg);}
#slide .container > div:nth-child(2) { background-image: url(../images/img0_2.jpg);}
#slide .container > div:nth-child(3) { background-image: url(../images/img0_3.jpg);}
#slide .container > div:nth-child(4) { background-image: url(../images/img0_4.jpg);}
#slide .container > div:nth-child(5) { background-image: url(../images/img0_1.jpg);}

/* -----追加----- */
#header-nav {
	display: none;
}
#header-nav ul {
	height: 70px;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: row;
	position: fixed;
	bottom: 0;
	background: linear-gradient(180deg, #827E79 0%, #5A4A37 100%);
	z-index: 1;
}
#header-nav li {
	height: 100%;
	width: 25%;
	display: flex;
	justify-content: center;
	align-items: center;
}
#header-nav ul li a img{
    width: auto;
    height: 40px;
}
#header-nav li a{
	height: 40px;
}
#header-nav li + li {
	border-left: 1px solid #fff;
}
#menuopen {
	height: 25px;
}
/* -----追加----- */

@media only screen and (min-width: 768px) {
#header{ width: 100vw; height: 100vh; overflow: hidden;}
#header .btnarea{ justify-content: center; height: 4rem;}
#header .btnarea .logo { width: 10rem; height: 2.2rem;}
#header h1 { line-height: 5rem; font-size: 2.8rem;}
#header h1 span { font-size: 1.3rem; vertical-align: baseline;}
#header #menu { width: 100vw; height: 3rem; overflow: hidden;}
#header.float #menu { position: fixed; top: 0; left: 0; z-index: 1; }
#header #menu ul { display: block; width: 100%; height: 100%; font-size: 0;}
#header #menu li { display: inline-block; height: 100%; transition: all ease .2s;}
#header #menu li a { display: block; height: 100%;}
#header #menu li a span { display: block; line-height: 1.3rem; font-size: 0.9rem; margin-top: 0.8rem; padding: 0 2rem; border-right: 2px solid #fff;}
#header #menu ul li:nth-of-type(1) a span { border-left: 2px solid #fff; }
#header #menu li:hover { background-color: rgba(0,0,0,0.15);}

#slide { height: calc(100% - 12rem - 0.65rem); position: relative;}
#slide .controller > div { position: absolute; height: 100%; width: 6%; top: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; background-color: rgba(0,0,0,0); transition: all ease .2s;}
#slide .controller > div:hover { background-color: rgba(0,0,0,.2);}
#slide .controller > div img { width: 1.4rem;}
#slide .controller div.fwd { right: 0;}
#slide .controller div.rwd { left: 0;}
}
@media only screen and (max-width: 767px) {
/* #header { padding-top: 4rem;} */
/* #header .menubtn { width: 2rem; height: 2rem; display: flex; justify-content: center; align-items: center; position:absolute; top: 1rem;right: 1rem;} */
/* #header .btnarea { justify-content: space-between; height: 4rem;position: fixed; left: 0; top: 0; background-color: #fff; z-index: 1;} */
#header .btnarea {height: 4rem;}
#header .btnarea .logo { width: 8rem; height: 1.8rem; }
#header .btnarea .menubtn img { width: 80%;}

/* -----追加----- */
#header-nav {
	display: block;
}
#menu .menubtn { width: 2rem; height: 2rem; display: flex; justify-content: center; align-items: center; position:absolute; top: 1rem;right: 1rem;}
/* -----追加----- */

#header #menu { position: fixed; width: 100%; height: 100vh; top: 0; right: -100%; transition: all ease .3s; z-index: 1;}
#header #menu .menubtn img { width: 70%; }
#header.open #menu { right: 0;}
#header #menu ul { display: block; width: 80%; margin: 0 10%; padding: 4rem 0 0;}
#header #menu li { border-bottom: 0.1rem solid #fff; text-align: left; }
#header #menu li:nth-of-type(1) { border-top: 0.1rem solid #fff;}
#header #menu li a { display: block; font-size: 1rem; line-height: 3; padding-left: 2em;}
#header h1 { line-height: 2.5rem; font-size: 2rem; padding: 1.25rem 0;}


#slide { height: 83vw;}
}

/* --- main --- */

#main { background-image: url(../images/bg.jpg); background-repeat: repeat-y; background-size: 100% auto;}
#main section h2 { background-image: url(../images/bg1.jpg); background-size: cover;  color: #fff;}
#main section .btn { border-radius: 0.4rem; background-color: #000; overflow: hidden; }
#main section .btn a { display: block; background-image: url(../images/bg2.jpg); background-size: cover; transition: all ease .2s; color: #fff;}
#main section .btn a:hover { opacity: 0.9;}
section p.ttl { color: #8c5416; line-height: 1.3;}
#main section figure.imgarea { border-radius: 0.4rem; overflow: hidden;}
@media only screen and (min-width: 768px) {
#main { padding-bottom: 2rem;}
#main section { padding: 0 0 4rem 0;}
#main section h2 { font-size: 1.4rem; line-height: 2rem; padding: 0.75rem 0 0.85rem; margin-bottom: 4rem;}
#main section .btn { width: 22rem; line-height: 3rem; font-size: 0.9rem; margin: 0 auto;}
section .contents p.exp { font-size: 1rem; margin: -1.5rem 0 2.5rem 0;}
#main section figure.imgarea { width: 30rem; margin: 2.5rem auto 3rem;}
}
@media only screen and (max-width: 767px) {
#main { padding-bottom: 1rem;}
#main section { padding: 0 0 2rem 0;}
#main section h2 { font-size: 1.05rem; line-height: 2rem; padding: 0.45rem 0 0.55rem; margin-bottom: 2rem;}
#main section .btn a { line-height: 1.3rem; font-size: 0.8rem; padding: 0.5rem 0;}
#main section figure.imgarea { margin: 1.5rem 0;}
section .contents p.exp { font-size: 0.8rem; margin: -0.5rem 0 1.5rem 0; text-align:justify;}
}


/* --- #section1 --- */
section#section1 p:nth-of-type(1) span { color:#8c5416;  font-weight: 600;}
section#section1 ul { text-align: left;}
section#section1 ul li { line-height: 1.73; margin: 0.2rem 0 0; font-weight: 600;}
section#section1 ul li span { display: inline-block; width: 1.44em; height: 1.44em; font-size: 120%; line-height: 1.44; border-radius: 0.72em; color: #fff; text-align: center; margin: 0 0.3rem 0 0; vertical-align: top;}
section#section1 ul li:nth-child(odd) span { background-color: #8c5416; }
section#section1 ul li:nth-child(even) span { background-image: url(../images/bg1.jpg); }

@media only screen and (min-width: 768px) {
section#section1 { padding-top: 4rem;}
section#section1 p:nth-of-type(1) { font-size: 1.5rem;}
section#section1 p:nth-of-type(2) { font-size: 0.9rem;}
section#section1 ul { display: inline-block; width: auto; margin: 1.5rem auto 2rem;}
section#section1 ul li { font-size: 1.5rem; }
}
@media only screen and (max-width: 767px) {
section#section1 .contents { margin: 0 2rem; text-align: left;}
section#section1 { padding-top: 2rem;}
section#section1 p:nth-of-type(1) { font-size: 1.1rem;}
section#section1 p:nth-of-type(2) { font-size: 0.8rem; text-align: justify;}
section#section1 ul { display: block; margin: 1.5rem 0;}
section#section1 ul li { font-size: 1.05rem; }

}


/* --- #section2 #guestroom--- */
section#guestroom .unit { text-align: left; }
section#guestroom .unit figure { border-radius: 0.4rem 0.4rem 0.4rem 0; overflow: hidden;}
section#guestroom .unit .txtarea { position: relative;}
section#guestroom .unit .txtarea div.chart { position: absolute;}
section#guestroom .unit p:nth-of-type(1) { background-image: url(../images/mat.svg); background-size: 100% auto; background-position: left bottom; background-repeat: no-repeat; overflow: hidden;}
section#guestroom p.note { margin: 1em 0 2em;}

@media only screen and (min-width: 768px) {
section#guestroom .shelf { display: flex; justify-content: space-between; width: 92%; margin: 0 4%;}
section#guestroom .unit { width: 46%;  margin-bottom: 2.5rem;}
section#guestroom .unit .txtarea { min-height: 6.5rem;}
section#guestroom .unit .txtarea div.chart { right: 0.1rem; top: 1rem;}
section#guestroom .unit .txtarea div.chart img { height: 5.5rem; width: auto;}
section#guestroom .unit p { padding-left: 0.9rem;}
section#guestroom .unit p:nth-of-type(1) { font-size: 0.8rem; line-height: 2.05rem; width: 16.3rem;}
section#guestroom .unit p:nth-of-type(2) { font-size: 0.7rem; margin: 1em 0 0.5em;}
section#guestroom .unit p:nth-of-type(3) { font-size: 0.6rem;}
section#guestroom p.note { font-size: 0.8rem;}
}
@media only screen and (max-width: 767px) {
section#guestroom .unit { margin-bottom: 2rem;}
section#guestroom .unit .txtarea { min-height: 5rem;}
section#guestroom .unit .txtarea div.chart { right: -0.5rem; top: 1rem;}
section#guestroom .shelf:nth-of-type(1) .unit .txtarea div.chart img { height: 3.6rem; width: 2.7rem;}
section#guestroom .shelf:nth-of-type(2) .unit .txtarea div.chart img { height: 3.6rem; width: 4.18rem;}
section#guestroom .unit p { padding-left: 0.4rem;}
section#guestroom .unit p:nth-of-type(1) { font-size: 0.6rem; line-height: 1.5rem; width: 72%;}
section#guestroom .unit p:nth-of-type(2) { font-size: 0.6rem; margin: 1em 0 0.5em;}
section#guestroom .unit p:nth-of-type(3) { font-size: 0.5rem;}
section#guestroom p.note { font-size: 0.6rem; margin-bottom: 1.5em;}
}


/* --- #section3 #mapAR--- */

section#mapAR figure { display: flex; width: 100%; justify-content: space-between;}
section#mapAR figure img { width: 44%;}
section#mapAR .contents p.exp { line-height: 1.8;}
section#mapAR .shelf p { text-align: right;}

@media only screen and (min-width: 768px) {
section#mapAR p.ttl { font-size: 1.9rem; padding: 3rem 0 3rem 1em;}
section#mapAR .shelf { margin: 0 18%;}

section#mapAR .contents .shelf p { font-size: 0.6rem; margin: 0.5em 0 0 0;}
}
@media only screen and (max-width: 767px) {
section#mapAR p.ttl { font-size: 1.2rem; padding: 1rem 0 1rem 0.5em;}
section#mapAR .contents .shelf p { font-size: 0.5rem; margin: 0.5em 0 0 0;}
}

/* --- #section4 #self-checkin--- */

@media only screen and (min-width: 768px) {
}
@media only screen and (max-width: 767px) {
}

/* --- #section5 #mobile-order--- */

@media only screen and (min-width: 768px) {
}
@media only screen and (max-width: 767px) {
}

/* --- #section6 #renewal-stay--- */
section#renewal-stay table { border-collapse: collapse; }
section#renewal-stay th, section#renewal-stay table td { border: 0.1rem solid #666; }
section#renewal-stay tr th:nth-of-type(1),section#renewal-stay tr td:nth-of-type(1) { background-color: #231815; color: #fff;}
section#renewal-stay tr th:nth-of-type(2),section#renewal-stay tr td:nth-of-type(2) { background-color: #ccc;}
section#renewal-stay tr th:nth-of-type(3),section#renewal-stay tr td:nth-of-type(3) { background-color: #d7c380;}
section#renewal-stay tr th:nth-of-type(4),section#renewal-stay tr td:nth-of-type(4) { background-color: #1e6aab; color: #fff;}
section#renewal-stay tr th:nth-of-type(5),section#renewal-stay tr td:nth-of-type(5) { background-color: #fff;}

@media only screen and (min-width: 768px) {
section#renewal-stay p.ttl {font-size: 1.5rem; margin: -1rem 0 1rem 0;}
section#renewal-stay table { width: 30rem; margin: 2rem auto 3rem;}
section#renewal-stay th,
section#renewal-stay td { padding: 0.5rem;}
section#renewal-stay th { font-size: 0.8rem;}
section#renewal-stay td { font-size: 0.7rem;}
}
@media only screen and (max-width: 767px) {
section#renewal-stay p.ttl {font-size: 1rem; margin: -1rem 0 1rem 0;}
section#renewal-stay table { margin: 1rem auto 1rem;}
section#renewal-stay th, section#renewal-stay table td { border: 0.05rem solid #666; padding: 0.25rem;}
section#renewal-stay th { font-size: 0.35rem;}
section#renewal-stay td { font-size: 0.35rem;}
}

@media only screen and (min-width: 768px) {
}
@media only screen and (max-width: 767px) {
}











/* --- bottom --- */

.links a {
	display: inline-block;
	color: #4d4d4d;
	margin: 0 4em;
}

.links a:hover { text-decoration: underline; }

.pagetop a {
	display: block;
	width: 2rem;
	height: 2rem;
	position: fixed;
	right: -2.5rem;
	bottom: 3.5rem;
	border: 1px solid #999;
	background-color: rgba(255,255,255, .5);
	transition: all ease .2s;
}
.pagetop a:hover { background-color: rgba(255,255,255, 1);}
.pagetop a img { width: 75%; margin-top: 0.6rem;}
.pagetop.show a { right: 1rem;}


@media only screen and (min-width: 768px) {
section#footer { padding-bottom: 2rem;}
section#footer #contact { padding: 3rem 0 3.5rem;}
section#footer #contact p:nth-child(1){ font-size: 1.2rem; margin: 0 0 0.75rem;}
section#footer #contact p:nth-child(3) { font-size: 0.9rem; }
section#footer #contact p:nth-child(3) strong { font-size: 2rem; line-height: 1.3; font-weight: 600;}
section#footer #contact p:nth-child(2) { font-size: 0.9rem; margin-bottom: 0.75rem;}

.links {
	border-top: 1px solid #4d4d4d;
	border-bottom: 1px solid #4d4d4d;
}
.links a { font-size: 0.7rem; line-height: 3;}
}
@media only screen and (max-width: 767px) {
section#footer #contact { padding: 2rem 0;}
section#footer #contact p:nth-child(1){ font-size: 0.8rem; margin: 0 0 0.75rem;}
section#footer #contact p:nth-child(3) { font-size: 0.8rem; }
section#footer #contact p:nth-child(3) strong { font-size: 1.5rem; line-height: 1.3; font-weight: 600;}
section#footer #contact p:nth-child(2) { font-size: 0.7rem; margin: 1.5em 0; line-height: 1.3;}
.links { padding: 1rem 0 6rem; }
.links a { display: block; font-size: 0.75rem; margin:0; line-height: 3; border-top: 1px solid #4d4d4d;}
.links a:last-child { border-bottom: 1px solid #4d4d4d;}
/*
.pagetop a {
	width: 1.5rem;
	height: 1.5rem;
	right: 1rem;
	bottom: 1rem;
}
.pagetop a:active { background-color: rgba(255,255,255, 1);}
.pagetop a img { margin-top: 0.4rem;}
*/
}

.copyright {
    font-size: 12px;
    text-align: center;
    padding-top: 2em;
}


@media only screen and (max-width: 767px) {
    .copyright {
    padding-bottom: 100px;
    }
}
@media only screen and (min-width: 768px) {
}











/* --- bottom area --- */

@media only screen and (min-width: 768px) {
}
@media only screen and (max-width: 767px) {
}