html {
font-size: 62.5%;
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 16px;
font-size: 1.6rem;
color: #333;
font-family: "Sawarabi Mincho", YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
background: #FFF;
margin: 0;
}
img, iframe {
width:100%;
max-width: 100%;
height: auto;
vertical-align: bottom;
}
a {
color: #333;
}

.en , #sns h6, #gNav ul li a, #news time, #reserve ul li a, #footer p {
font-family: "Open Sans", Arial, Helvetica, "sans-serif";
}
a.btn {
display: table;
margin: 0 auto;
background: #666;
color: #fff;
border-radius: 3px;
}
a.btn i, #address ul li a i {
font-size: 0.8em;
padding-left: 8px;
}

#logo > div h1 {
color: #fff;
font-weight: bold;
}
#news > div {
background: #fff;
box-sizing: border-box;
padding: 4px;
}
#news > div > div {
border: 1px solid #bbb;
}
#news time {
color: #999;
font-size: 0.8em;
padding-bottom: 5px;
}

.slider {
position: relative;
}
#slider {
position: relative;
overflow: hidden;
width: 100% !important;
}
#slider ul {
position: relative;
margin: 0;
padding: 0;
width: 99999px;
overflow: hidden;
list-style: none;
}
#slider ul li {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
width: 100vw;
text-align: center;
}
#slider ul li .slide {
background-size: cover;
}

button.control_prev, button.control_next {
position: absolute;
top: 50%;
z-index: 10;
display: block;
border: none;
width: 2em;
height: 2em;
line-height: 1.9em;
background: rgba(255, 255, 255, 0.3);
color: #fff;
text-align: center;
text-decoration: none;
font-weight: 600;
font-size: 2rem;
opacity: 0.8;
cursor: pointer;
border-radius: 50%;
transform: translateY(-50%); }
button.control_prev:focus, button.control_next:focus {
outline: none;
border: 1px rgba(255, 255, 255, 0.5) solid; }
button.control_prev:hover, button.control_next:hover {
opacity: 1;
-webkit-transition: all 0.2s ease; }

button.control_prev {
left: 2rem; }

button.control_next {
right: 2rem; }

.progress {
position: absolute;
background: rgba(255, 255, 255, 0.3);
height: .5rem;
width: 100%;
bottom: 0;
border-top: 1px rgba(0, 0, 0, 0.15) solid;
}
.progress .bar {
height: 100%;
width: 0%;
background: #fff; }

.teaser {
position: absolute;
width: 100%;
}

#content > section {
background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.5) 71%, rgba(247,247,247,0.5) 100%);
background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.5) 71%,rgba(247,247,247,0.5) 100%);
background: radial-gradient(ellipse at center,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.5) 71%,rgba(247,247,247,0.5) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#80f7f7f7',GradientType=1 );
}
#content > section:nth-child(even) {
background: -moz-radial-gradient(center, ellipse cover,  rgba(241,241,241,0.5) 0%, rgba(241,241,241,0.5) 71%, rgba(234,234,234,0.5) 100%);
background: -webkit-radial-gradient(center, ellipse cover,  rgba(241,241,241,0.5) 0%,rgba(241,241,241,0.5) 71%,rgba(234,234,234,0.5) 100%);
background: radial-gradient(ellipse at center,  rgba(241,241,241,0.5) 0%,rgba(241,241,241,0.5) 71%,rgba(234,234,234,0.5) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80f1f1f1', endColorstr='#80eaeaea',GradientType=1 );
}
#content > section h2 {
display: block;
color: #c1c5b2;
}
#content > section h3 {
color: #fff;
background: #c1c5b2;
}

#stay > div {
margin: 0 auto;
}
#facility {
background: #fff;
box-shadow: 0 3px 8px 3px rgba(241,241,241,0.2);
}
#facility div.df {
display: flex;
}
#facility div.df img {
width: 50%;
height: 100%;
}
#facility dt:before {
content: "● ";
font-size: 0.5em;
}

#price p {
display: table;
margin: 0 auto;
}
#price p span, #address p span {
display: block;
font-size: 0.8em;
color: #A71719;
}
#price table {
width: 100%;
max-width: 480px;
margin: 0 auto;
}
#price table th, #price table td {
text-align: center;
box-sizing: border-box;
border: 1px solid #666;
background: #fff;
}
#price table th i {
font-size: 1.5em;
padding-right: 8px;
}
#price h4 {
text-align: center;
font-weight: bold;
}
#price ul {
display: table;
margin: 0 auto;
}

#food > div > div > div p {
background: #fff;
box-sizing: border-box;
}
#food ul.df li a {
display: block;
text-align: center;
}

#access iframe {
filter:grayscale(100%);
-webkit-filter:grayscale(100%);
}

#address p span {
line-height: 100%;
}
#reserve h4 {
border-left: 4px solid #c1c5b2;
}
#reserveLink ul li a {
text-align: center;
}
#terms > div {
box-sizing: border-box;
border: 1px solid #dcdcdc;
}
#terms dt {
border-bottom: 1px solid #c1c5b2;
}
#terms dd:nth-last-child(1), #terms li:nth-last-child(1) {
padding-bottom: 0;
}
#terms dd > ol {
list-style-type: decimal;
margin-left: 24px;
}
#terms dd ol li ol {
list-style-type: lower-roman;
margin-right: 30px;
}

#footer {
background: #000;
color: #fff;
}
#footer h6 {
width: 40%;
max-width: 180px;
margin: 0 auto;
}
#footer p {
text-align: center;
}

@media (max-width: 767px){
p, li, dd {
line-height: 170%;
letter-spacing: 1px;
}
p {
font-size: 1.4rem;
}
.box {
width: 90%;
margin: 0 auto;
}
a.btn {
font-size: 1.3rem;
padding: 4px 10px;
width: 60%;
text-align: center;
}

body {
background: url("../images/bodybg.jpg") top center no-repeat;
background-size: auto 100vh;
background-attachment: fixed;
}
body:before{
content:" ";
display:block;
position:fixed;
top:0;
left:0;
z-index:-1;
width:100%;
height:100vh;
background: url("../images/bodybg.jpg") top center no-repeat;
background-size:cover;
}

#header {
position: relative;
}
#logo {
position: absolute;
width: 100%;
height: 40vh;
z-index: 2;
}
#logo > div {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
transform: translate(-50%,-50%);
text-align: center;
}
#logo > div img {
width: 50%;
}
#logo > div h1 {
font-size: 1.2rem;
}
#spDf {
position: relative;
display: flex;
flex-direction: column-reverse;
}
#news {
padding: 20px 5%;
width: 90%;
background: radial-gradient(ellipse at center,  rgba(241,241,241,0.5) 0%,rgba(241,241,241,0.5) 71%,rgba(234,234,234,0.5) 100%);
}
#news > div > div {
padding: 8px;
}
#news > div h4 {
font-size: 1.4rem;
padding-bottom: 3px;
margin-bottom: 3px;
}
#news > div p {
font-size: 1.2rem;
line-height: 160%;
}

#gNav {
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 100;
}
p.menu-btn {
position: absolute;
top: 10px;
right: 10px;
width: 30px;
height: 30px;
z-index: 100;
background: #fff;
border: 1px solid #999;
border-radius: 3px;
}
p.menu-btn:before {
display: block;
width: 30px;
text-align: center;
line-height: 30px;
font-family: "Font Awesome 5 Pro";
content: '\f0c9';
}
p.menu-btn.active:before {
content: '\f00d';
}
.menu-box > div {
display: none;
width: 100%;
background: #A89A7C;
}
.menu-box h2 {
height: 50px;
box-sizing: border-box;
padding: 7px 0 5px 5px;
font-size: 1.2rem;
color: #fff;
}
.menu-box h2 img {
width: 24%;
max-width: 100px;
padding-right: 5px;
vertical-align: middle;
}
.menu-box ul li:nth-child(1) a {
border-top: 1px solid #fff;
}
.menu-box ul li a {
display: block;
border-bottom: 1px solid #fff;
padding: 0.3em 0.7em;
font-size: 1.4rem;
color: #fff;
}
#sns h6, #sns ul li a i {
display: none;
}
#slider ul, #slider ul li, #slider ul li .slide, .teaser {
height: 40vh;
}
#slide1 {
background: url("../images/slider1x1.jpg") no-repeat center center;
background-size: cover;
}
#slide2 {
background: url("../images/slider2x1.jpg") no-repeat center center;
background-size: cover;
}
#slide3 {
background: url("../images/slider3x1.jpg") no-repeat center center;
background-size: cover;
}
#slide4 {
background: url("../images/slider4x1.jpg") no-repeat center center;
background-size: cover;
}
	
#content > section {
padding-top: 40px;
}
#content > section > div.box {
padding-bottom: 40px;
}
#content > section h2 {
font-size: 4rem;
}
#content > section h3 {
font-size: 1.8rem;
letter-spacing: 2px;
padding: 3px 6px;
margin-bottom: 24px;
}
	
#outline p {
padding-bottom: 20px;
}
#outline div.text {
padding-bottom: 20px;
}
#outline div.photo {
display: flex;
}
#outline div.photo img {
width: 50%;
height: 100%;
}

#content > section#stay {
padding-top: 30px;
}
#stay > div {
width: 90%;
margin: 0 auto;
transform: translateY(30px);
}
#facility {
padding: 10px;
}
#facility h4, #price h4 {
font-size: 1.8rem;
padding-bottom: 12px;
}
#facility div.df {
padding-bottom: 12px;
}
#facility dl {
padding-bottom: 24px;
}
#facility dt {
font-size: 1.5rem;
padding-bottom: 4px;
}
#facility dd {
font-size: 1.4rem;
padding-bottom: 16px;
}
#facility p {
font-size: 1.3rem;
line-height: 130%;
}
	
#price p {
padding-bottom: 16px;
}
#price table {
margin-bottom: 30px;
border-collapse: separate;
border-spacing: 0 10px;
}
#price table th, #price table td {
display: block;
width: 100%;
box-sizing: border-box;
padding: 8px;
font-size: 1.4rem;
}
#price table th {
background: #eee;
}

#food > div {
width: 90%;
margin: 0 auto;
padding-bottom: 40px;
}
#food > div > div p {
padding: 10px;
margin-bottom: 20px;
}
#food ul li:nth-child(1) {
margin-bottom: 10px;
}
#food > div > div > div {
padding-bottom: 220px;
background: url("../images/maps.jpg") no-repeat center bottom;
background-size: auto 200px;
}

#access div.text {
padding-bottom: 20px;
}
#access iframe {
height: 50vh;
}

#reserve div.df {
padding-bottom: 40px;
}
#reserve h4 {
font-size: 1.6rem;
padding: 1px 0 1px 6px;
margin-bottom: 16px;
}
#address address {
font-size: 1.5rem;
padding-bottom: 8px;
}
#address p, #reserveLink p {
padding-bottom: 8px;
}
#address ul li a i {
display: none;
}
#address, #address ul, #reserveLink ul#online {
padding-bottom: 20px;
}
#reserveLink ul#online li:nth-child(1) {
padding-bottom: 8px;
}
	
#terms > div {
padding: 10px;
}
#terms dt {
font-size: 1.6rem;
padding-bottom: 8px;
margin-bottom: 8px;
}
#terms dd, #terms dd > ol {
font-size: 1.4rem;
padding-bottom: 30px;
}
#terms li {
padding-bottom: 8px;
}
#terms dd ol li ol, #terms dd ol li ul {
font-size: 1.2rem;
padding: 8px 0 0 18px;
}
	
#footer {
padding: 8px 0;
}
#footer h6 {
padding-bottom: 14px;
}
#footer p {
font-size: 1.1rem;
}
}

@media (min-width: 768px){
body:before{
content:" ";
display:block;
position:fixed;
top:0;
left:0;
z-index:-1;
width:100%;
height:100vh;
background: url("../images/bodybg.jpg") center center no-repeat;
background-size:cover;
}
a.btn {
font-size: 14px;
font-size: 1.4rem;
padding: 6px 18px;
}

#header, #spDf {
position: relative;
}
#logo, #news {
position: absolute;
width: 100%;
height: 100vh;
z-index: 2;
}
#logo > div {
position: absolute;
top: 50%;
left: 20px;
width: 400px;
text-align: center;
transform: translateY(-50%);
}
#logo > div h1 {
letter-spacing: 2px;
font-size: 1.8rem;
}
#gNav {
position: fixed;
width: 120px;
height: 100vh;
top: 0;
right: 0;
z-index: 100;
background: #A89A7C;
}
.menu-box h2, p.menu-btn {
display: none;
}
#mainNav {
position: absolute;
top: 50%;
left: 5px;
transform: translateY(-50%);
}
#mainNav ul li {
padding: 5px 0;
}
#mainNav ul li a {
display: block;
color: #333;
transition: .6s;
padding-left: 18px;
position: relative;
}
#mainNav ul li a.active {
color: #fff;
}
#mainNav ul li a.active:before {
position: absolute;
top: 50%;
left: 3px;
transform: translateY(-40%);
content: "\f054";
font-family: "Font Awesome 5 Pro";
font-size: 0.6em;
}
#sns {
position: absolute;
bottom: 120px;
left: 50%;
transform: translateX(-50%);
}
#sns h6, #sns ul li a {
color: #fff;
}
#sns h6 {
font-size: 18px;
font-size: 1.8rem;
text-align: center;
}
#sns ul {
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
#sns ul li {
padding: 0 6px;
}
#sns ul li a {
font-size: 20px;
font-size: 2rem;
}
#sns ul li a span {
display: none;
}
#news > div {
position: absolute;
bottom: 50px;
left: 20px;
width: 400px;
}
#news > div > div {
padding: 10px;
}
#slider ul, #slider ul li, #slider ul li .slide, .teaser {
height: 100vh;
}

.df {
display: flex;
}
#outline div.df, #food ul.df, #access div.df, #reserve div.df {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
#outline div.text, #outline div.photo {
width: 48%;
}
#facility h4, #price h4 {
font-size: 20px;
font-size: 2rem;
padding-bottom: 16px;
}
#facility div.df {
padding-bottom: 16px;
}
#facility dl {
padding-bottom: 30px;
}
#facility dt {
font-size: 16px;
font-size: 1.6rem;
padding-bottom: 6px;
}
#facility dd {
font-size: 14px;
font-size: 1.4rem;
padding-bottom: 20px;
}
#facility p {
font-size: 12px;
font-size: 1.2rem;
line-height: 120%;
}

#price p {
padding-bottom: 20px;
}
#price table {
margin-bottom: 40px;
}
#price table th, #price table td {
width: 50%;
padding: 8px;
}
#price table tr:nth-child(odd) th, #price table tr:nth-child(even) td {
background: #eee;
}

#food ul.df li {
width: 48%;
}

#access div.df {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
#access div.text {
width: 48%;
}

#reserve div.df {
padding-bottom: 30px;
}
#reserve h4 {
font-size: 20px;
font-size: 2rem;
padding: 2px 0 2px 7px;
margin-bottom: 20px;
}
#address, #reserveLink {
width: 48%;
}
#address address {
font-size: 18px;
font-size: 1.8rem;
padding-bottom: 10px;
}
#address p, #address ul, #reserveLink ul#online {
padding-bottom: 30px;
}
#reserveLink ul#online li:nth-child(1) {
padding-bottom: 10px;
}
#reserveLink ul li a {
width: 120px;
}
	
#terms > div {
overflow-y: auto;
height: 400px;
padding: 20px;
}
#terms dt {
font-size: 20px;
font-size: 2rem;
padding-bottom: 10px;
margin-bottom: 10px;
}
#terms dd, #terms dd > ol {
font-size: 15px;
font-size: 1.5rem;
padding-bottom: 40px;
}
#terms li {
padding-bottom: 10px;
}
#terms dd ol li ol, #terms dd ol li ul {
font-size: 13px;
font-size: 1.3rem;
padding: 10px 0 0 20px;
}
	
#footer {
padding: 30px 120px 30px 0;
}
#footer h6 {
padding-bottom: 20px;
}
#footer p {
font-size: 12px;
font-size: 1.2rem;
}
}

@media (min-width:768px) and (max-width:1023px){
p {
line-height: 180%;
}
#news > div h4 {
font-size: 1.5rem;
padding-bottom: 4px;
margin-bottom: 4px;
}
#news > div p {
font-size: 1.3rem;
line-height: 140%;
}
#slide1 {
background: url("../images/slider1x2.jpg") no-repeat center center;
background-size: cover;
}
#slide2 {
background: url("../images/slider2x2.jpg") no-repeat center center;
background-size: cover;
}
#slide3 {
background: url("../images/slider3x2.jpg") no-repeat center center;
background-size: cover;
}
#slide4 {
background: url("../images/slider4x2.jpg") no-repeat center center;
background-size: cover;
}

#content > section {
padding-top: 60px;
}
#content > section > div.box {
padding-bottom: 60px;
}
#content > section h2 {
font-size: 6rem;
}
#content > section h3 {
font-size: 2rem;
letter-spacing: 3px;
padding: 4px 8px;
margin-bottom: 30px;
}

#outline div.df {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
#outline p {
padding-bottom: 30px;
}
#content > section#stay {
padding-top: 30px;
}
#stay > div {
transform: translateY(30px);
}
#facility {
padding: 20px;
}
	
#food > div {
padding-bottom: 80px;
}
#food > div > div p {
padding: 30px;
margin-bottom: 30px;
}

#access iframe {
height: 600px;
}
}

@media (min-width:768px) and (max-width:879px){
#stay > div {
margin-left: 20px;
margin-right: 140px;
}
}
@media (min-width: 880px){
#stay > div {
max-width: 640px;
}
}

@media (min-width: 1024px){
a[href^="tel:"] {
pointer-events: none;
}

p {
line-height: 220%;
}
#news > div h4 {
font-size: 16px;
font-size: 1.6rem;
padding-bottom: 5px;
margin-bottom: 5px;
}
#news > div p {
font-size: 14px;
font-size: 1.4rem;
line-height: 150%;
}
#slide1 {
background: url("../images/slider1x3.jpg") no-repeat center center;
background-size: cover;
}
#slide2 {
background: url("../images/slider2x3.jpg") no-repeat center center;
background-size: cover;
}
#slide3 {
background: url("../images/slider3x3.jpg") no-repeat center center;
background-size: cover;
}
#slide4 {
background: url("../images/slider4x3.jpg") no-repeat center center;
background-size: cover;
}
	
#content > section {
padding-top: 80px;
}
#content > section > div.box {
padding-bottom: 80px;
}
#content > section h2 {
font-size: 100px;
font-size: 10rem;
}
#content > section h3 {
font-size: 30px;
font-size: 3rem;
letter-spacing: 4px;
padding: 4px 10px;
margin-bottom: 40px;
}
	
#outline p {
padding-bottom: 40px;
}
#content > section#stay {
padding-top: 40px;
}
#stay > div {
transform: translateY(40px);
}
#facility {
padding: 30px;
}
	
#food > div {
padding-bottom: 80px;
}
#food > div > div p {
padding: 30px;
margin-bottom: 30px;
}

#access iframe {
height: 600px;
}
}

@media (min-width:1024px) and (max-width:1919px){
#slide1 {
background: url("../images/slider1x3.jpg") no-repeat center center;
background-size: cover;
}
#slide2 {
background: url("../images/slider2x3.jpg") no-repeat center center;
background-size: cover;
}
#slide3 {
background: url("../images/slider3x3.jpg") no-repeat center center;
background-size: cover;
}
#slide4 {
background: url("../images/slider4x3.jpg") no-repeat center center;
background-size: cover;
}
}

@media (min-width:768px) and (max-width:1263px){
.box, #food > div {
margin-left: 20px;
margin-right: 140px;
}
}

@media (min-width:768px) and (max-width:1227px){
#food > div > div > div {
padding-bottom: 330px;
background: url("../images/maps.jpg") no-repeat center bottom;
background-size: auto 300px;
}
}

@media (min-width: 1228px){
#food > div > div {
background: url("../images/maps.jpg") no-repeat right center;
background-size: 55% auto;
}
#food > div > div > div {
max-width: 480px;
}
}

@media (min-width: 1264px){
.box {
max-width: 1024px;
margin: 0 auto;
}
#food > div {
width: 90%;
margin: 0 auto;
}
}

@media (min-width: 1920px){
#slide1 {
background: url("../images/slider1x4.jpg") no-repeat center center;
background-size: cover;
}
#slide2 {
background: url("../images/slider2x4.jpg") no-repeat center center;
background-size: cover;
}
#slide3 {
background: url("../images/slider3x4.jpg") no-repeat center center;
background-size: cover;
}
#slide4 {
background: url("../images/slider4x4.jpg") no-repeat center center;
background-size: cover;
}
}