@charset "utf-8";

/*===============================================

 ● style.css 画面の横幅が769px以上

===============================================*/

@media screen and (min-width: 769px){

img{
	max-width: 100%;
	height: auto;
	width /***/: auto;
	}
#container{
	width: 100%;
	}
.sp { display: none; }

/*～以下、画面の横幅が768pxまでの場合のスタイル記入～*/

body {
	border-top: 8px solid #91908D;
	}

header {
	height: 272px;
	}
.wrapper {
	width: 1000px;
	margin: 0 auto 0 auto;
	}

header h1 {
	width: 124px;
	height: 40px;
	display: inline-block;
	*display: inline;
	*zoom: 1;
	vertical-align: top;
	margin-top: 20px;
	}
header p {
	width: 680px;
	font-size: 0.75em;
	display: inline-block;
	*display: inline;
	*zoom: 1;
	vertical-align: top;
	margin: 20px 0 0 20px;
	}
header h2 {
	width: 656px;
	height: auto;
	margin: 40px 0;
	}

nav {
	background: #91908D;
	}
nav ul {
	width: 1000px;
	height: 82px;
	margin: 0 auto 0 auto;
	}
nav li {
	width: 137px;
	display: inline-block;
	*display: inline;
	*zoom: 1;
	text-align: center;
	border-right: 1px solid #CCC;
	line-height: 82px;
	color: #7D7D7D;
	}
nav li:first-child {
	border-left: 1px solid #CCC;
	}
nav li a {
	color: #FFF;
	text-decoration: none;
	}
nav li a:hover {
	color: #FFF;
	text-decoration: underline;
	}
.fixed {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 10;
	}


section.main {
	width: 100%;
	max-width: 1000px;
	height: auto;
	margin: 0 auto 0 auto;
	}
div.slider li {
	list-style: none;
	width: 100%;
	max-width: 1000px;
	height: auto;
	}

.wrap {
	width: 960px;
	margin: 40px auto 0 auto;
	}

div.outline {
	width: 670px;
	border-top: 1px solid #CCC;
	font-size: 0.7em;
	float: left;
	}
div.outline h4 {
	width: 100%;
	max-width: 78px !important;
	height: auto;
	margin-top: -0.5em;
	}
div.outline dl {
	width: 320px;
	display: inline-block;
	*display: inline;
	*zoom: 1;
	vertical-align: top;
	margin: 20px 10px 0 0;
	}
div.outline dt {
	float: left;
	clear: left;
	width: 110px;
	}
div.outline dd {
	float: left;
	width: 210px;
	}

div.contact {
	width: 270px;
	border-top: 1px solid #CCC;
	float: right;
	font-size: 0.8em;
	}

div.contact h4 {
	width: 100%;
	max-width: 84px !important;
	height: auto;
	margin-top: -0.5em;
	}
div.contact h5 {
	margin: 15px 0 !important;
	}

p.fd {
	font-size: 0.8em;
	}
p.fd span {
	color: #DA0010;
	font-size: 2.2em;
	font-weight: bold;
	vertical-align: middle;
	}
p.add {
	font-size: 0.9em;
	margin-top: 10px;
	}
.btm-line {
	border-bottom: 1px solid #CCC;
	padding-bottom: 20px;
	}

p.check {
	padding: 0.8em;
	font-size: 0.7em;
	color: #888;
	background: #EEE;
	margin-top: 20px;
	}
p.check span {
	color: #C2579B;
	margin-right: 20px;
	}
p.txt_01 {
	font-size: 0.8em;
	color: #888;
	margin-top: 20px;
	word-wrap: break-all;
	}

div.totop {
	width: 1000px;
	height: 43px;
	background: url('../../common/images/bg_totop.gif') 0 0 no-repeat;
	display: block;
	margin: 40px auto 0 auto;
	}
div.totop img {
	float: right;
	}


/*-----------------------------------------------

 ROOM

-----------------------------------------------*/

section.room h2 {
	width: 100%;
	max-width: 246px;
	height: auto;
	}
div.roomPhoto_01 {
	max-width: 960px;
	height: auto;
	margin-top: 20px;
	}
div.roomInner_01 {
	width: 463px;
	}
div.roomInner_01 h3 {
	width: 100%;
	max-width: 266px;
	height: auto;
	margin-top: 20px;
	}

div.roomPhoto_02 {
	max-width: 463px;
	height: auto;
	margin-top: 20px;
	float: left;
	}
div.roomInner_02 {
	width: 460px;
	float: right;
	margin-left: 20px;
	}
div.roomInner_02 h3 {
	width: 100%;
	max-width: 234px;
	height: auto;
	margin-top: 120px;
	}

/*-----------------------------------------------

 BATHROOM

-----------------------------------------------*/

section.bathroom h2 {
	width: 100%;
	max-width: 370px;
	height: auto;
	}
div.bathroomPhoto {
	max-width: 960px;
	height: auto;
	margin-top: 20px;
	}
div.bathroomInner {
	width: 960px;
	}
div.bathroomInner h3 {
	width: 100%;
	max-width: 237px;
	height: auto;
	margin-top: 20px;
	}

div.model {
	width: 960px;
	border-top: 1px solid #CCC;
	margin-top: 40px;
	}
div.model h4 {
	width: 100%;
	max-width: 120px;
	height: auto;
	margin-top: -0.8em;
	}
div.model dl {
	margin-top: 20px;
	}
div.model dt {
	color: #C8BB9B;
	font-size: 0.6em;
	font-weight: bold;
	}
div.model dd,div.model dd a {
	color: #221714;
	font-size: 0.8em;
	text-decoration: none;
	margin-bottom: 10px;
	}
div.model dd a:hover {
	color: #221714;
	font-size: 0.8em;
	text-decoration: underline;
	}



/*-----------------------------------------------

 OUTLINE

-----------------------------------------------*/

section.outline h2 {
	width: 100%;
	max-width: 113px;
	height: auto;
	}
section.outline h3 {
	width: 100%;
	max-width: 851px;
	height: auto;
	margin: 20px 0 40px 0;
	}

div.map {
	width: 400px;
	border-top: 1px solid #CCC;
	float: left;
	}
div.map h4 {
	width: 100%;
	max-width: 45px;
	height: auto;
	margin-top: -0.8em;
	}
div.map iframe {
	margin-top: 20px;
	}

div.equipment {
	width: 520px;
	border-top: 1px solid #CCC;
	float: right;
	}
div.equipment h4 {
	width: 100%;
	max-width: 102px;
	height: auto;
	margin-top: -0.5em;
	}
div.equipment dl {
	margin-top: 10px;
	}
div.equipment dt {
	font-size: 0.7em;
	font-weight: bold;
	color: #CCC;
	margin-top: 10px;
	}
div.equipment dd {
	font-size: 0.7em;
	color: #231815;
	}
div.plan {
	border-top: 1px solid #CCC;
	margin-top: 40px;
	}
div.plan h4 {
	width: 100%;
	max-width: 46px;
	height: auto;
	margin-top: -0.8em;
	}
div.plan p {
	width: 960px;
	margin-top: 20px;
	}



/*-----------------------------------------------

 CONTACT

-----------------------------------------------*/

section.contact {
	width: 960px;
	border-top: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
	}
section.contact h2 {
	width: 100%;
	max-width: 84px;
	height: auto;
	margin-top: -0.8em;
	}
div.shopPhoto {
	width: 300px;
	max-width: 300px;
	height: auto;
	float: left;
	}
div.shopInfo {
	font-size: 0.8em;
	width: 380px;
	float: left;
	margin: 0 20px 20px 20px;
	}
div.shopInfo h3 {
	height: 40px;
	background: url('../../common/images/logo_heyagime.gif') 0 0 no-repeat;
	background-size: contain;
	text-indent: 140px;
	margin-top: 10px;
	line-height: 3.0em;
	font-weight: bold;
	}
div.shopInfo li {
	margin-bottom: 0.2em;
	}
div.shopInfo span {
	font-size: 2.4em;
	font-weight: bold;
	color: #F00;
	margin-left: 10px;
	vertical-align: middle;
	}
div.btn_checkroom {
	width: 240px;
	float: left;
	}

/*-----------------------------------------------

 FOOTER

-----------------------------------------------*/

footer {
	width: 100%;
	max-width: 1000px;
	margin: 20px auto 40px auto;
	}

footer p {
	margin: 40px auto 0 auto;
	font-size: 0.7em;
	color: #888;
	text-align: center;
	}
p.ttl_footer {
	width: 100%;
	max-width: 331px;
	height: auto;
	}
p.logo_footer {
	width: 100%;
	max-width: 143px;
	height: auto;
	}

.fb-like-box,
.fb-like-box span,
.fb-like-box iframe[style] { 
	width: 100% !important;
	}


}/*ここまで*/


/*===============================================

 ● tablet.css 画面の横幅が768pxまで

===============================================*/

@media screen and (max-width:768px){
* {	font-family: 'Meiryo','Hiragino Kaku Gothic',sans-serif; }
img {
	max-width: 100%;
	height: auto;
	width /***/: auto;　
	}
#container {
	width: 100%;
	}

.pc { display: none; }

div.sp_header h1 {
	width: 90%;
	max-width: 556px;
	height: auto;
	margin: 0 auto 20px auto;
	position: relative;
	top: 40px;
	}

section.main {
	margin: 60px auto 0 auto;
	}
div.slider li {
	list-style: none;
	}

p.check {
	width: 90%;
	padding: 0.8em;
	font-size: 0.7em;
	color: #888;
	background: #EEE;
	margin: 20px auto 0 auto;
	}
p.check span {
	color: #C2579B;
	margin-right: 20px;
	}
div.nmp_01 {
	width: 150px;
	height: 72px;
	margin-left: auto;
	margin-top: 20px;
	}
p.txt_01 {
	width: 90%;
	font-size: 0.8em;
	color: #888;
	margin: 20px auto 0 auto;
	word-wrap: break-all;
	}
div.totop {
	max-width: 768px;
	height: 43px;
	background: url('../../common/images/bg_totop.gif') 0 0 no-repeat;
	display: block;
	margin: 40px auto 0 auto;
	}
div.totop img {
	float: right;
	}


/*-----------------------------------------------

 ROOM SP

-----------------------------------------------*/

section.room h2 {
	width: 80%;
	max-width: 245px;
	height: auto;
	margin: 40px auto 0 auto;
	}
div.roomPhoto_01,div.roomPhoto_02 {
	width: 100%;
	margin-top: 20px;
	}
div.roomInner_01 h3,div.roomInner_02 h3 {
	width: 80%;
	margin: 20px auto 0 auto;
	}



/*-----------------------------------------------

 BATHROOM SP

-----------------------------------------------*/

section.bathroom h2 {
	width: 80%;
	height: auto;
	margin: 40px auto 0 auto;
	}
div.bathroomPhoto {
	width: 100%;
	margin-top: 20px;
	}
div.bathroomInner h3 {
	width: 80%;
	height: auto;
	margin: 20px auto 0 auto;
	}

div.model {
	width: 80%;
	margin: 0 auto 0 auto;
	border-top: 1px solid #CCC;
	margin-top: 40px;
	}
div.model h4 {
	width: 100%;
	max-width: 120px;
	height: auto;
	margin-top: -0.8em;
	}
div.model dl {
	margin-top: 20px;
	}
div.model dt {
	color: #C8BB9B;
	font-size: 0.8em;
	font-weight: bold;
	}
div.model dd,div.model dd a {
	color: #221714;
	font-size: 0.8em;
	text-decoration: none;
	margin-bottom: 10px;
	}
div.model dd a:hover {
	color: #221714;
	text-decoration: underline;
	}


/*-----------------------------------------------

 OUTLINE

-----------------------------------------------*/

section.outline h2 {
	width: 100%;
	max-width: 113px;
	height: auto;
	margin: 40px auto 0 auto;
	}
section.outline h3 {
	width: 90%;
	max-width: 600px;
	height: auto;
	margin: 20px auto 40px auto;
	}

div.outline {
	max-width: 90%;
	border-top: 1px solid #CCC;
	font-size: 0.8em;
	margin: 0 auto 0 auto;
	}
div.outline h4 {
	width: 100%;
	max-width: 78px !important;
	height: auto;
	margin-top: -0.5em;
	}
div.outline dl {
	width: 90%;
	margin: 20px auto 0 auto;
	}
div.outline dt {
	float: left;
	clear: left;
	width: 50%;
	}
div.outline dd {
	float: left;
	width: 50%;
	}

div.contact {
	width: 90%;
	border-top: 1px solid #CCC;
	font-size: 0.8em;
	margin: 40px auto 0 auto;
	}

div.contact h4 {
	width: 100%;
	max-width: 84px !important;
	height: auto;
	margin-top: -0.5em;
	}
div.contact h5 {
	margin: 15px 0 !important;
	}

p.fd {
	font-size: 0.8em;
	}
p.fd span {
	color: #DA0010;
	font-size: 2.2em;
	font-weight: bold;
	vertical-align: middle;
	}
p.add {
	font-size: 0.9em;
	margin-top: 10px;
	}
.btm-line {
	border-bottom: 1px solid #CCC;
	padding-bottom: 20px;
	}



div.map {
	width: 90%;
	border-top: 1px solid #CCC;
	margin: 40px auto 0 auto;
	}
div.map h4 {
	width: 100%;
	max-width: 45px;
	height: auto;
	margin-top: -0.8em;
	}
div.map iframe {
	width: 100% !important;
	margin-top: 20px;
	}

div.equipment {
	width: 90%;
	border-top: 1px solid #CCC;
	margin: 40px auto 0 auto;
	}
div.equipment h4 {
	width: 100%;
	max-width: 102px;
	height: auto;
	margin-top: -0.5em;
	}
div.equipment dl {
	margin-top: 10px;
	}
div.equipment dt {
	font-size: 0.8em;
	font-weight: bold;
	color: #CCC;
	margin-top: 10px;
	}
div.equipment dd {
	font-size: 0.8em;
	color: #231815;
	}

div.plan {
	width: 90%;
	border-top: 1px solid #CCC;
	margin: 40px auto 0 auto;
	}
div.plan h4 {
	width: 100%;
	max-width: 46px;
	height: auto;
	margin-top: -0.8em;
	}
div.plan p {
	max-width: 100%;
	margin-top: 20px;
	}



/*-----------------------------------------------

 CONTACT

-----------------------------------------------*/

section.contact {
	width: 90%;
	border-top: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
	margin: 40px auto 0 auto;
	}
section.contact h2 {
	width: 100%;
	max-width: 84px;
	height: auto;
	margin-top: -0.8em;
	}
div.shopPhoto {
	width: 100%;
	height: auto;
	margin-top: 20px;
	}
div.shopInfo {
	font-size: 0.8em;
	}
div.shopInfo h3 {
	height: 40px;
	background: url('../../common/images/logo_heyagime.gif') 0 0 no-repeat;
	background-size: contain;
	text-indent: 140px;
	margin: 10px 0 10px 0;
	line-height: 3.0em;
	font-weight: bold;
	}
div.shopInfo li {
	margin-bottom: 0.2em;
	}
div.shopInfo span {
	font-weight: bold;
	color: #F00;
	margin-left: 10px;
	vertical-align: middle;
	}
div.btn_checkroom {
	width: 80%;
	margin: 40px auto 20px auto;
	}

/*-----------------------------------------------

 FOOTER

-----------------------------------------------*/

footer {
	margin: 20px 0 40px 0;
	}
div.btn_officialsite {
	width: 50%;
	height: auto;
	margin: 40px auto 40px auto;
	}
footer p {
	width: 90%;
	margin: 40px auto 0 auto;
	font-size: 0.7em;
	color: #888;
	text-align: center;
	}
p.ttl_footer {
	width: 90%;
	max-width: 331px;
	height: auto;
	margin: 40px auto 0 auto;
	}
p.logo_footer {
	width: 100%;
	max-width: 143px;
	height: auto;
	}

.fb-like-box,
.fb-like-box span,
.fb-like-box iframe[style] { 
	width: 100% !important;
	}


}/*ここまで*/

/*===============================================

 ● smart.css  画面の横幅が640pxまで

===============================================*/

@media screen and (max-width: 640px){

* {font-family: 'Meiryo','Hiragino Kaku Gothic',sans-serif;}
img{
	max-width: 100%;
	height: auto;
	width /***/:auto;　
	}
#container{
	width: 100%;
	}





/*～以下、画面の横幅が640pxまでの場合のスタイル記入～*/


}/*ここまで*/