@charset "UTF-8";

html{
	-webkit-text-size-adjust: 100%
}

body {
    padding: 0px;
    margin: 0px;
    overflow-y: auto;
    overflow-x: hidden;
    min-width: 300px;
    font-size: 12px;
	line-height: 23px;
	letter-spacing: 0.05em
    background-color: rgb(255, 255, 255);
}

label.error{
	color: red;
}

.story-contents{
  	background-image: url(../img/story_back.jpg);
  	background-repeat: no-repeat;
  	background-size: 100%;
  	background-position: center center;
  	background-attachment: fixed;
	padding-top: 30px;
	padding-bottom: 30px;
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape){
	.story-contents{
		background-repeat: repeat;
		background-position: top;
	}
}

@media screen and (max-width: 1024px) {
	.story-contents{
		background-repeat: repeat;
		background-position: top;
		padding-top: 0px;
		padding-bottom: 0px;
	}
}

a:link { color:#000000; text-decoration:none }
a:visited { color:#000000; text-decoration:none }
a:hover { color:#000000; text-decoration:none }
a:active { color:#000000; text-decoration:none }

.header-menu {
	padding-top: 70px;
	padding-bottom: 25px;
	text-align: center;

	font-family: 'Arial';
	font-weight: 400;
	font-size: 10px;
	line-height: 14px;
}

.menu-item{
	padding: 5px 25px;
	letter-spacing: 0.35em;
}

@media screen and (max-width: 600px){
	.header-menu{
		padding-top: 30px;
		padding-bottom: 15px;
		text-align: center;
		display: flex;
	}
	.menu-item{
		padding: 15px 15px;
	}
}

.top-title {
	padding-top: 55px;
	padding-bottom: 25px;
	text-align: center;
}

@media screen and (max-width: 480px){
	.top-title img{
		max-width: 80%;
		height: auto;
	}
}

.title{
	padding-top: 5px;
	font-family: 'Montserrat';
	font-weight: 400;
	font-size: 16px;
	line-height: 22px;
	letter-spacing: 0.1em;
}

.subheading{
	font-family: 'Frank Ruhl Libre';
	font-weight: 400;
	font-size: 16px;
	line-height: 22px;
	font-style: italic;
}

.heading3{
	padding: 5px;
	font-family: 'Montserrat';
	font-weight: 400;
	font-size: 16px;
	line-height: 1px;
	letter-spacing: 0.1em
}

.heading3-news{
	padding: 5px;
	font-family: 'Montserrat';
	font-weight: 400;
	font-size: 24px;
	line-height: 30px;
	letter-spacing: 0.1em
}

.top-image {
	padding-top: 25px;
	padding-bottom: 25px;
	text-align: center;
}

@media screen and (max-width: 480px){
	.top-image img{
		max-width: 100%;
		height: auto;
	}
}

.about {
	padding-top: 40px;
	padding-bottom: 25px;
	text-align: center;
	width: 450px;
	margin-right: auto;
	margin-left : auto;
}

@media screen and (max-width: 480px){
	.about{
		width: 300px;
	}
}

#about-text{
	padding-top: 20px;
	font-family: 'Roboto Slab Light';
	font-weight: 400;
	font-size: 12px;
	line-height: 23px;
	font-style: italic;
	letter-spacing: 0.05em;
	color: #757575;
}

#news-text{
	padding-top: 20px;
	text-align: left;
	font-family: 'Roboto Slab Light';
	font-weight: 400;
	font-size: 14px;
	line-height: 23px;
	font-style: italic;
	letter-spacing: 0.05em;
	color: #757575;
}

.rooms {
	padding-top: 30px;
	padding-bottom: 25px;
	text-align: center;
	
	height: 830px;
	width: 1000px;
	margin-top: 40px;
	margin-right: auto;
	margin-left : auto;

  	background-image: url(../img/room_back.jpg);
  	background-repeat: no-repeat;
  	background-size: 100%;
  	background-position: center center;
  	/* background-attachment: fixed; */
}

@media only screen and (min-width: 1280px) {
	.rooms{
		background-attachment: fixed; 
	}
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape){
	.rooms{
		background-attachment: scroll; 
	}
}

.rooms-box{
	width: 600px;
	margin-top: 40px;
	margin-bottom: 30px;
	margin-right: auto;
	margin-left : auto;
	background-color: rgb(255, 255, 255);
}

.rooms-box-in{
	width: 500px;
	margin-right: auto;
	margin-left : auto;

	padding-top: 30px;
	padding-bottom: 40px;
}

#rooms-text{
	padding-top: 20px;
	font-family: 'Roboto Slab Light';
	font-weight: 400;
	font-size: 12px;
	line-height: 23px;
	font-style: italic;
	letter-spacing: 0.05em;
	color: #757575;
}

.rooms-book{
	padding-top: 30px;
	padding-bottom: 30px;
	text-align: center;
}

@media screen and (max-width: 480px){
	.rooms{
		padding-top: 15px;
		padding-bottom: 30px;
		width: 100%;
		background-repeat: repeat;
	}

	.rooms-box{
		width: 400px;
	}

	.rooms-box-in{
		width: 320px;
		padding-bottom: 20px;
	}
}

.services {
	padding-top: 65px;
	padding-bottom: 25px;
	text-align: center;
}

.col2{
	display: flex;
	width: 1000px;
	margin-right: auto;
	margin-left : auto;
	padding: 0px;
}

.col2 li {
 	width: calc(100% / 2);
	list-style: none;
}

.col3{
	display: flex;
	width: 1000px;
	margin-right: auto;
	margin-left : auto;
	padding: 0px;
}

.col3 li {
 	width: calc(100% / 3);
	list-style: none;
}

.services-box{
	margin-top: 15px;
	padding-top: 60px;
	padding-left: 0px;
	padding=right: 20px;
	text-align: center;
}

.services-img{
	height: 50px;
}

.services-title{
	padding-top: 10px;
	font-family: 'Montserrat';
	font-weight: 400;
	font-size: 12px;
	line-height: 13px;
	letter-spacing: 0.1em;
}

.services-text{
	padding-top: 10px;
	padding-left: 30px;
	padding-right: 30px;
	font-family: 'Roboto Slab Light';
	font-weight: 400;
	font-size: 12px;
	line-height: 23px;
	font-style: italic;
	letter-spacing: 0.05em;
	color: #757575;
}

@media screen and (max-width: 480px){
	.col3{
		display: inline;
		width: 400px;
	}

	.col3 li {
		width: 320px;
		margin-right: auto;
		margin-left : auto;
	}
}
.gallery {
	padding-top: 60px;
	padding-bottom: 10px;
	text-align: center;
}

.mb30{
	margin-bottom: 30px;
}	

.swiper-container{
	padding-top: 30px;
	width: 80%;
	text-align: center;
}

.swiper-container .swiper-slide img{
	max-width: 100%;
	height: auto;
}


.contact-us {
	padding-top: 60px;
	padding-bottom: 25px;
	text-align: center;
}

.contact-text{
	padding-top: 10px;
	font-family: 'Roboto Slab Light';
	font-weight: 400;
	font-size: 12px;
	line-height: 23px;
	font-style: italic;
	letter-spacing: 0.05em;
	color: #757575;
}

.contact-box {
	position: relative;
	width: 500px;
	margin-right: auto;
	margin-left : auto;
}

@media screen and (max-width: 480px){
	.contact-box{
		width: 400px;
	}
}
.contact-box input[type=text] {
	font: 15px/24px Raleway;
	box-sizing: border-box;
	width: 100%;
	margin: 8px 0;
	padding: 0.3em;
	transition: 0.3s;
	border: 1px solid #757575;
	outline: none;
}

.contact-box input[type=text]:focus {
	border-color: #da3c41;
}

.contact-box input[type=text] {
	padding-left: 20px;
}

.contact-box textarea {
	font: 15px/24px Raleway;
	box-sizing: border-box;
	width: 100%;
	margin: 8px 0;
	padding: 0.3em;
	transition: 0.3s;
	border: 1px solid #757575;
	outline: none;
}

.contact-box textarea:focus {
	border-color: #da3c41;
}

.contact-box textarea {
	padding-left: 20px;
}

.contact-box input[type=submit] {
	font: 12px/20px Raleway;
	letter-spacing: 0.15em;
	box-sizing: border-box;
	width: 25%;
	margin: 18px 0;
	padding: 10px 30px;
	transition: 0.3s;
	border: 1px solid #757575;
	outline: none;
	background-color: #ffffff;
}

.contact-box input[type=submit]:hover{
	color: #ffffff;
	background-color: #757575;
}

@media screen and (max-width: 480px){
	.contact-box input[type=submit]{
		padding: 10px 20px;
	}
}

iframe{
	-webkit-filter: grayscale(1);
	filter: grayscale(1);
}

.book-r{
	margin: 30px 5px 15px;
	padding: 15px 25px;
	border: 1px solid #757575;

	font-family: 'Raleway';
	font-weight: 400;
	font-size: 12px;
	line-height: 12px;
	letter-spacing: 0.15em;
	color: #757575;
}

.book-r:link { color:#757575; text-decoration:none }
.book-r:visited { color:#757575; text-decoration:none }
.book-r:hover{
	color: #ffffff;
	background-color: #757575;
	text-decoration: none;
}
.book-r:active { color:#757575; text-decoration:none }

.book-s{
	margin: 30px 5px 15px;
	padding: 15px 25px;
	border: 1px solid #757575;

	font-family: 'Raleway';
	font-weight: 400;
	font-size: 12px;
	line-height: 12px;
	letter-spacing: 0.15em;
	color: #ffffff;
}

.book-s:link { color:#ffffff; text-decoration:none }
.book-s:visited { color:#ffffff; text-decoration:none }
.book-s:hover{
	color: #000000;
	background-color: #ffffff;
	text-decoration: none;
}
.book-s:active { color:#ffffff; text-decoration:none }

.story-box{
	padding: 5px;
	width: 900px;
	margin-right: auto;
	margin-left : auto;
	background-color:rgba(0,0,0,0.75);
}

.story {
	padding-top: 30px;
	padding-bottom: 15px;
	text-align: center;
	color: #ffffff;
}

.story-cover{
	padding-top: 20px;
	padding-bottom: 10px;
	text-align: left;
	width: 600px;
	margin-right: auto;
	margin-left : auto;

	font-family: 'Montserrat';
	font-weight: 400;
	font-size: 12px;
	line-height: 15px;
	letter-spacing: 0.2em;
	color: #ffffff;
}

.story-cover-heading{
	padding-top: 0px;
	padding-bottom: 30px;
	font-size: 14px;
	line-height: 20px;
	font-weight: bold;
}

.story-text{
	padding-top: 20px;
	padding-bottom: 10px;
	text-align: left;
	width: 600px;
	margin-right: auto;
	margin-left : auto;

	font-family: 'Robot Slab Light';
	font-weight: 400;
	font-size: 12px;
	line-height: 23px;
	letter-spacing: 0.05em;
	color: #ffffff;
}

.story-text-heading{
	padding-top: 0px;
	padding-bottom: 30px;
	font-size: 14px;
	line-height: 20px;
	font-weight: bold;
}

.story-name{
	margin-top: 0px;
	margin-bottom: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
	font-size: 12px;
	font-weight: bold;
}

.story-english{
	margin-top: 20px;
	margin-bottom: 50px;
	padding-top: 20px;
	padding=bottom: 20px;
	text-align: left;
	width: 575px;
	margin-right: 0px;
	margin-left: auto;
}

.story-book{
	padding-top: 30px;
	padding-bottom: 30px;
	text-align: left;
	width: 600px;
	margin-right: auto;
	margin-left : auto;
}

@media screen and (max-width: 900px) {
	.story-box{
		width: 100%;
	}

	.story-cover{
		width: 80%;
		margin-right: auto;
		margin-left : auto;
	}

	.story-text{
		padding-top: 10px;
		padding-bottom: 10px;
		width: 80%;
		margin-right: auto;
		margin-left : auto;
	}

	.story-english{
		width: 95%;
		margin-right: 0px;
		margin-left: auto;
	}

	.story-book{
		width: 80%;
		margin-right: auto;
		margin-left : auto;
	}
}

.ref {
	padding-top: 30px;
	padding-bottom: 25px;
	text-align: center;
}

.ref-img{
	margin-top: 30px;
	padding-top: 0px;
	width: 100%;
	border: 1px solid #CCCCCC;
}

.ref-title{
	padding-top: 0px;
	font-family: 'Montserrat';
	font-weight: 400;
	font-size: 12px;
	line-height: 13px;
	letter-spacing: 0.1em;
}

.ref-text{
	padding-top: 10px;
	padding-left: 30px;
	padding-right: 30px;
	font-family: 'Roboto Slab Light';
	font-weight: 400;
	font-size: 12px;
	line-height: 23px;
	font-style: italic;
	letter-spacing: 0.05em;
	color: #757575;
}

.footer {
	padding-top: 30px;
	padding-bottom: 25px;
	text-align: center;
}

.social-link{
	padding: 15px;
	height: 61px;
	width: 61px;
}

.social-icon{
	height: 27px;
	width: 27px;
	margin-top: auto;
	margin-bottom: auto;
	margin-right: auto;
	margin-left : auto;
}

.thanks-contents {
	padding-top: 30px;
	padding-bottom: 25px;
	text-align: center;
}

.thanks-title{
	padding-top: 20px;
	padding-bottom: 10px;
	text-align: center;

	font-family: 'Montserrat';
	font-weight: 400;
	font-size: 16px;
	line-height: 15px;
	letter-spacing: 0.2em;
	color: #757575;
}

.thanks-text{
	padding-top: 20px;
	padding-bottom: 10px;
	text-align: center;

	font-family: 'Montserrat';
	font-weight: 400;
	font-size: 12px;
	line-height: 20px;
	letter-spacing: 0.2em;
	color: #757575;
}

*, *::before, *::after {
  box-sizing:border-box;
}
.clearfix::after {
  content:'';
  display:block;
  clear:both;
}