html{
	height: 100%;
}

/* 全体の設定 */

*{
	margin: 0; 
	padding: 0; 
	font: normal normal normal 100% 2em; 
	border: none; 
}

body{
	text-align: center; 
	height: 100%;
	background-color: #fbf0f1;
	font-style: normal; 
	font-family: "メイリオ",Meiryo,sans-serif;
	font-size: 80%;
	color: #000000; 
}



/* =====コンテナ===== */
#container {
	position: relative; 
	width: 70%;
	margin: 0 auto;  /* センタリングの胆 */
	text-align: left; 
	min-height: 100%;
}

body > #container {
height: auto;
}


@media screen and ( max-width:750px ){
	#container{
	width: 95%;
	}
}


/* =====ヘッダ===== */

#header {
  display: table;
  text-align: center;
  width: 100%;
  background-color: #df7281; 
color: white; 
font-weight: bold; 
height: 5em;
font-size: 100%;
}


/* FOLLOW LOGO CALL*/
.follow,
.logo,
.call {
  display: table-cell;
  vertical-align: middle;
}

.follow{
  width: 160px;
}

.fa-twitter{
	color: white; }
.fa-facebook-square{
	color: white; }
.fa-bold{
	color: white; }
	
.follow a:link{
	color: white; }
.follow a:visited{
	color: white; }

.logo a:link {
	text-decoration: none; 
	color: white; 
}
.logo a:visited{
	color: white; 
}




.logo img{
	height: 6em; 
	border: none; 

}


.call img{
	height: 4.5em; 
	border: none; 

}



.logo-2 img{
	height: 8em; 
	border: none; 
	vertical-align: top; 
	float: left; 
	margin-right: 1em; 
}


.call {
  width: 160px;
  text-align: left; 
  padding-left: 0.5em;
}

.call-bar {
display: none;/*非表示*/
}

/* スマホだけに適用するCSS */
@media screen and ( max-width:479px )
{
	.follow, .call
	{
		display: none ;		/* 非表示にする */
	}
}

@media screen and ( max-width:479px )
{
	.call-bar
	{
	display: block; /*表示*/
	text-align: center;
	width: 100%;
	height: auto;
	background-color: #df7281; 
	padding-top: 0.5em;
	}
	.call-bar img{
	max-width: 90%;
	height: auto;
	}
}

/* MENU*/
.menu-table {
	display: table; 
	table-layout: fixed; 
	text-align: center;
	width: 100%;
	background-color: white;
	height: 4em; 
	border-bottom: 1px solid #df7281; 
	 font-size: 120%;
}

.menu-table li {
 display: table-cell;
 vertical-align: middle; 
 border-left: 1px solid pink;

}

.menu-table li:first-child {
 border-left: none;
}

.menu-table li a {
  color: black;
  display: block;
  text-decoration: none;
  padding: 10px 0;
  font-weight: bold; 
}


p.sub{
font-weight: normal;
font-size: 80%;

}

/* =====中央部===== */
#center {
width: 100%; 
height: auto;
line-height: 1.5em; 
background-color: white; 
margin-top: 0em;
padding-bottom: 1em;
}




/* =====main img box===== */
#mainimg img{
	width: 100%;		/* 横幅 */
	height: auto
}



/* =====sub-box===== */
div.boxwrap{
background-color: white;
display: flex; /* Flex box--float 使わずに横並び*/
justify-content:center;　/*flex boxの水平位置指定*/
margin-bottom: 1em;
}

div.box{
background-color: #fbf0f1;
width: calc(33.3% - 10px);
margin: 5px; 
height: auto;
font-size: 110%;
padding: 0.5em 0.5em 1em;/*上　左右　下*/
border-radius: 5px; /*角を丸くする*/
text-align: center; 
font-size: 110%;
font-weight: bold; 
}

div.box img{
width: 100%;
margin-bottom: 1em; 
}

/* スマホ */
@media screen and ( max-width:750px )
{
	div.boxwrap{
	display: block;
	margin-bottom: 1em;
	}
	
	div.box{
	width: calc(97% - 30px);
	margin: 15px; 
}

div.box img{
width: 80%;
margin-bottom: 1em;
}
}




/*  sub-main */
.sub-main {
width: 100%; 
height: auto; 
}

div.greetings {
margin: 1em; 
padding: 1em; 
background-color: white; 	
text-indent: 1em; 
font-size: 120%;
}

div.info {
margin: 1em auto 1em;/*上　左右　下*/
padding: 1em; 
background-color: pink; 	
text-indent: 1em; 
font-size: 120%;
border-radius: 5px;
width: 80%;
}

p.notice{
font-weight: bold;
font-size: 100%;
color: black;
padding-bottom: 1em;
}

div .description{
	margin: 0 1em 1em 1em;
	padding: 1em; 
	font-size: 115%; 
}

div .description-c{
	margin: 1em; 
	padding: 1em; 
	font-size: 115%;
	text-align: center; 
}

/* スマホだけに適用するCSS */
@media screen and ( max-width:479px )
{
div .description-c img{
	width: 100%;
}


}

h2{
margin: 1em 0em;  	
padding: 0.5em; 
background-color:  #df7281; 
width: 8em; 
color: white; 
text-align: justify; /*両端揃え IE only*/
text-justify: auto; /*両端揃え IE only*/
letter-spacing: 0.3em; 
}

h3{
margin: 1em 0em;  	
padding: 0.5em; 
background-color:  #fbf0f1; 
width: 9em; 
letter-spacing: 0.1em; 
}


h4{
margin: 1em 0em;  	
padding: 0.5em; 
background-color:  #df7281; 
font-size: 1.5em;
color: white;
width: 23em;
text-align: justify; /*両端揃え IE only*/
text-justify: auto; /*両端揃え IE only*/
letter-spacing: 0.3em; 
}

div .price{
border: thick #fbf0f1 double;  
padding: 0.5em; 
max-width: 28em; 
line-height: 150%;
margin: -0.5em 0em 1em; /*[上］ と ［左右］ と ［下］*/
}

div .price-d{
padding: 0em 1.5em 0em; 
font-size: 100%; 
margin: 0em 0em 2em; 
}

@media screen and ( max-width:479px )
{
div .price-d{
padding: 0.5; 
}
}


table{
margin-bottom: 1em;
border: 1px grey solid; 
border-collapse: collapse;
font-size: 120%;
}

td, th{
border: 1px grey solid; 
padding: 1em; 
}


img.right{
float: right; 
width: 30%
}

/* スマホだけに適用するCSS */
@media screen and ( max-width:479px )
{
	img.right {
	float: none;
	width: 100%;
	}
	
	h4 {
	width: 95%;
	line-height: 1.5em;
	}
	
table{
margin-bottom: 1em;
border: 1px grey solid; 
border-collapse: collapse;
font-size: 90%;
}	

}


/*Weather 単品　右寄せの場合　class="weather"を指定
.weather{
float: right;
width: 180px;
border:1px dotted #df7281;
border-radius: 5px;
margin-top: -3em;
margin-bottom: 1em;
margin-right: 0.5em;
padding: 0.3em;
text-align: center;
}*/




.sns{
float: right;
width: 27em;
height: 130px;
margin-top: 0em;
margin-left: 1em;
margin-bottom: 1em;
border:1px dotted #df7281;
border-radius: 5px;
padding: 0.3em 0em;
text-align: center;
line-height: 1.7em;
font-size: 110%;
}


.sns2{
display: inline-block;/*中央寄せの中の左揃え*/
text-align: left;
}


.weather{
float: right;
width: 250px;
height: 130px;
border:1px dotted #df7281;
border-radius: 5px;
margin-left: 0.5em;
margin-right: 1em;
margin-bottom: 1em;
padding: 0.3em;
text-align: center;
font-size: 110%;
}


@media screen and ( max-width:750px ){
	.sns{
	float: none;
	width: 90%;
	margin: 15px; 
	height: auto;
	}
	.weather{
	float: none; 
	width: 90%;
	margin: 15px; 

	}

}


/* 料金表*/
.room
{
margin: 1em; 
padding: 1em; 
background-color: pink; 	
border-radius: 5px;
text-align: center;
width: 50%;
}



/* スマホだけに適用するCSS */
@media screen and ( max-width:479px )
{
	.room
	{
		width: 85%;
	}
	
	#flower
	{
	display: none;
	}
}





/* =====フッタ===== */
#footer {
width: 100%; 
height: auto; 
position: absolute;
/*bottom: 0;  中身が少ないとき*/
background-color: #df7281; 
color: white; 
text-align: center;
padding: 1em 0em;
font-size: 90%; 
}

div.kw{
border-bottom: dashed thin lightpink;
margin-bottom: 0.5em;
padding-bottom: 0.5em;

}

/* =====Link===== */

#center a:hover{
color: red; 
text-decoration: underline; 
}

.description a:link, a:visited{
color: #042c87; 
text-decoration: underline; 
}

.sns a:link, a:visited{
color: #042c87; 
text-decoration: none; 
}


/* ----google map---*/
.ggmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
 
.ggmap iframe,
.ggmap object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

 /* font awsome */
	.icon {
		text-decoration: none;
		color: black;
	}
			.icon:before {
			display: inline-block;
			font-family: FontAwesome;
			font-size: 1.25em;
			text-decoration: none;
			font-style: normal;
			font-weight: normal;
			line-height: 1;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
		}
		
		.icon > .label {
			display: none;
		}

/*gallery*/
#gallery {
  max-width: 100%;  /* 可変幅*/
  margin: 0 auto;
  display: flex;    /* 親要素 flex コンテナ */
  flex-flow: wrap;  /* 左から右に折り返し */
}
#gallery dl {
/*  flex: 200px; */   /* IE10-モダンブラウザ対応 */
  float: left;    /* IE9 以前のブラウザ対応 */ /* float は必須 */
  margin-right: 5px;
  margin-bottom: 1em;
  padding: 0;
  background-color: #fbf0f1;
  border: 0.5px dotted #fbf0f1;
  text-align: center;  /* 画像を中心配置 */
  width: 31%;
}

#gallery dl img {
  border: 0;
  width: 100%;
  height: auto;

}
#gallery dt { /*title*/
  margin: 0;
  padding: 0.5em;
  height: 1.5em;
  text-align: center; 
  font-size: 90%;
  font-weight: bold;
	background-color: #fbf0f1;
}
#gallery dd {
  margin: 0;
  padding: 0;
}
#gallery dd.comment {
  height: 5em;  /* コメント文字数により調整 */
  padding: 1em; 
  line-height: 1.3;
  text-align: left;
  font-size: 80%;
  background-color: #fbf0f1;
}


/* スマホだけに適用するギャラリーのCSS */
@media screen and ( max-width:479px )
{
#gallery dl {
  width: 100%; 
}

#gallery dd.comment {
  height: auto; 
  padding: 1em; 
  font-size: 90%;
}

}

/*---
https://ics.media/entry/13117
http://degitekunote.com/blog/2014/12/05/css3-display-flex/
http://delaymania.com/201410/web/css-table-cell-03/
---*/