@charset "UTF-8";


@import "reset.css";
@import "layout.css";
@import "mmenu.css";



/*
@media screen and (min-width: 0) and (max-width: 767px) {}
@media screen and (min-width: 768px) and (max-width: 1024px) {}
@media screen and (min-width: 1024px) {}
@media screen and (min-width: 1024px) and (max-width: 1680px) {}
@media screen and (min-width: 1681px) {}
*/

#loader-bg {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #fff;
  z-index: 1;
}
#loader {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin-top: -100px;
  margin-left: -100px;
  text-align: center;
  color: #eee;
  z-index: 2;
}


body{
	text-align:center;
	margin: 0 auto;}
	
#frontslide{
	clear: both;
	overflow: hidden;
	position:relative}


#frontslide .logo{
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	background: url(../images/front/icon.png) no-repeat;
	-moz-background-size:100% auto;
	background-size:100% auto;
	width: 80px;
	height: 80px;
}

#ticker{
	background: rgba(255, 255, 255, 0.7);
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0px;
	margin: 0 auto;
	overflow: hidden
}

@media  (min-width: 0px) and (max-width: 414px) {
	#ticker{
	height: 80px;
	overflow: hidden
	}
}	
@media  (min-width: 415px) {
	#ticker{
	height: 50px;
	overflow: hidden
	}

}


#ticker {
    padding: 18px 5% 10px;
    text-align: left;
}
 
#ticker ul {
    width: 100%;
    position: relative;
}
 
#ticker ul li {
    width: 100%;
    display: none;
}
/*
#frontslide .filter{
	height: 480px;
	position: absolute;
	display: block;
	width: 100%;
	background: url(../images/home/slide_filter.png);
	z-index: 10
}
*/

#slide{
	width: 100%;
	margin-bottom:0;
	z-index: 0}
	
#slide li{
	height: 100vh;
	background:no-repeat center fixed;
	background-size: cover;
	-moz-background-size:cover;}

/* =======================================
    Section
======================================= */
#ng{background: rgba(48, 42, 37, 1);}
#ng18 p{
	font-weight: bold;
	color: #ccc;
	padding-top: 1.5em;
	margin-bottom: .5em;
	text-align: left
	}
	
#ng18 a{
		text-decoration: none;
		background: #fff;
		color: #534d56;
		padding: .5em 1em;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		position: relative;
		font-size: smaller;
	}


@media (min-width: 0) and (max-width: 414px) {
	#ng18{
	text-align: center;
	padding: 20px 2em;
	margin: 0 auto;
	}
	
	#ng18 img{
		margin: 0 auto;
		text-align: cente
	}
	#ng18 p{
		padding-top: 1em;
		text-align: center;
	}
	#ng18 a{display: inline-block;
	}
}


@media screen and (min-width: 415px){
	#ng18{
	text-align: center;
	padding: 40px 3em;
	margin: 0 auto;
	width: 580px;
	}
	
	#ng18 img{
	float: left;
	margin-right: 1em
	}
	

}





#contents_wrap{
	position: relative;
	z-index: 30;
	padding: 0
}

@media (min-width: 0) and (max-width: 768px) {
	.topsec{
	padding: 50px 0 50px;
	text-align:left}
}

@media (min-width: 769px) and (max-width: 1400px) {
	.topsec{
	padding: 50px 0 50px;}

}

@media (min-width: 1401px) {
	.topsec{
	padding: 70px 0 70px;}
	
}

@media print {
	.topsec{
	padding: 70px 0 70px;}
}


@media (min-width: 0) and (max-width: 1023px){
	.top_inner{
	text-align:left;
	width:94%;
	margin:0 auto;}
}

@media (min-width: 1024px){
	.top_inner{
	text-align:left;
	width:84%;
	max-width: 1280px;
	margin:0 auto;}
}





.glay{
/* 	background:#E6E6E6 */
background: #F5F5F2
}


/* =======================================
    #service
======================================= */


#room{
	text-align: center;
	background: #eee3ef url(../images/pattern_a.png) ;
}

#room h2{
	font-family: 'Libre Baskerville', serif;
	letter-spacing: .1em;
	color: #312B26;
	text-align: center;
	font-size: 2em;
	margin-bottom: 20px
}

#room_inner{position: relative;overflow: hidden;}
	

#roomlist {
	width: 96%;
	margin: 0 auto 50px;
	overflow: hidden;
	
}
@media (min-width: 0) and (max-width: 414px){
	#roomlist {
		width: 90%;
		margin: 0 auto 20px;
		
	}
}

#roomlist .slick-list{padding: 10px 0 10px;}


#roomlist .slick-arrow{
	}

#roomlist .slick-prev,
#roomlist .slick-next
{
   position: absolute;
    top: 58%;
	color:#fff
	
}

#roomlist .slick-prev:before,
#roomlist .slick-next:before
{
    color:#4DA6FF
}

#roomlist li{
	margin: 0 .2%
}

@media (min-width: 0) and (max-width: 414px){
	#roomlist li{
	margin: 0 .1%
	}
}


#roomlist li img{
	text-align:center;
	width:100%;
	height:auto}
	


#roomlist li a img {outline:none;}
a:focus{
	outline: none;
}

#roomlist li a{
display:block;
position: relative
}

.no{
	position: absolute;
	top: .5em;
	left: .5em;
	color: #fff
}


.more a{
	display: block;
	background: rgba(48, 42, 37, 1);
	text-align: center;
	color: #fff;
	margin: 0 1.5em;
	font-size: 1.3em;
	line-height: 2.8em;
	text-decoration: none;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	position: relative;
	behavior: url(/css/PIE.htc);
}




	
/* =======================================
    #newsheadline
======================================= */

#newsheadline{}

#hl_inner{
	text-align:left}

#newsheadline{width: 100%;
	margin: 0 auto
}

@media (min-width: 0) and (max-width: 414px){
	#newsheadline{width: 90%}
}

#info{
	}

	
#info h2{
	margin-bottom:.5em;
	padding:0 0 .9em .3em;
	font-size: 1.2em;
	letter-spacing: .1em;
	position:relative;
	-moz-background-size:100% auto;
	background-size:100% auto;
}
#info h2 span{
	font-size:1.2em;
	font-family: 'Libre Baskerville', serif;
	}


#info .date{padding-right:.8em;
	font-size: .9em;
	font-family: 'Libre Baskerville', serif;
	display: block;
	margin-bottom: .5em;
}
	
#info ul{margin-bottom: 1em}
#info ul li{
	padding: .8em;
	font-weight:bold;
}


#info ul li:nth-child(odd) {
    background-color: rgba(238, 238, 238, 0.5);   /* 奇数行の背景色 */
}
#info ul li:nth-child(even) {
    background-color: #eee;   /* 偶数行の背景色 */
}


.thumb{
	width: 70px;
	float: left;
	margin-right: 1.5em
}
.thumb img{
	width: 100%;
	height: auto;
}


#info ul li i{
	color:#57AADE;
	font-size:77%}
	
#info ul li a{font-size:1.1em}


@media (min-width: 0) and (max-width: 768px){
	#info h2{
		text-align: center;
		margin-bottom:.5em;
	}
	#info ul{margin-bottom: 1.5em}
	#info ul li a{display: block; margin-top: .2em}
	
	.news_more{
		width: 100%;
	}
	
	.news_more a{
	display: block;
	background: #57AADE;
	text-align: center;
	color: #fff;
	font-size: 1.3em;
	line-height: 2.8em;
	text-decoration: none;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	position: relative;
	}

}


@media (min-width: 769px){
	.news_more{
		width: 30%;
		float: right
	}
	.news_more a{
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	position: relative;
	display: block;
	padding: .5em .8em;
	background: #57AADE;
	color: #fff;
	text-decoration: none;
	text-align: center;
	}
	
	.news_more:after {   
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
	}

}

@media  (min-width: 0px) and (max-width: 768px) {
	#info{margin-bottom: 2em}
}	


@media  (min-width: 769px){
	#info{
		width: 48%;
		float: left
	}
	
	#tweet{
		width: 48%;
		float: right
	}
	
}

#tweet{
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	position: relative;
	border: solid 2px #DFE4EE
}

#sp_menu{
	padding-top: 20px;
	clear: both
}
@media  (min-width: 0px) and (max-width: 480px) {
	#sp_menu ul li{margin-bottom: 1em}
}	
@media  (min-width: 481px) {
	#sp_menu ul{
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
		margin: 0 -2% 0 0;
		overflow: hidden;
		zoom: 1;
	}
	#sp_menu ul li{
	    float: left;
	    margin: 0 2% 10px 0;
	    width: 48%;
	    display: inline;
	}
}
#sp_menu img{
	width: 100%;
	height: auto
}


/* =======================================
    #instagram
======================================= */
#instagram{
	background: #FAFAFA
}

#instagram h2{
	font-family: 'Libre Baskerville', serif;
	text-align: center;
	margin-bottom: 1em
}

#instagram h2:before {
	font-family: FontAwesome;
    content: "\f16d";
    font-size: 1.1em;
    padding-right: .5em;
}

/* =======================================
    #Map
======================================= */
#gmap{background: #eee3ef;}

@media (min-width: 0) and (max-width: 414px){
	.mappin a{
		display: block;
		line-height: 1.5em;
	}
	
	.mappin:before{
		font-size: 1.5em
	}
}