@charset "utf-8";

/*============================================================
    VILLA LIFE INDAH　第二階層
  ============================================================ */
/*
layout.css
color:#7E5435;
point color2:#009DA5
point color3:#f2f2f2


/*--------------------------------------------------
   SECOND PAGES
 --------------------------------------------------*/  

/* BASIC
 --------------------------------------------------*/ 

/* EACH CONTENT
--------------------------------------------------------*/
.contact {
width: 100%;
height: auto;
margin:0 5px 50px;
padding-top:100px;
background:#fff;
overflow: hidden;
}

#rooms, #access{
width: 100%;
height: auto;
margin:0 5px 30px;
padding-top:100px;
background:#fff;
overflow: hidden;
}

#location{
width: 100%;
height: auto;
margin:0 0 30px;
padding-top:100px;
	
background-position: ;
background-color: #f2f2f2;
overflow: hidden;
}

#reservation {
width: 100%;
height: auto;
margin:0 0 50px;
padding-top:74px;
background:#fff;
overflow: hidden;
}


/*--------------------------------------------------
   ROOMS
 --------------------------------------------------*/ 
.section-plan img{
width: 80%;
height: auto;
margin:10px auto;
}
@media screen and (max-width: 767px) {
.section-plan img{
width: 100%;
height: auto;
margin:10px auto;
}
}
	
	
#rooms p{
 max-width: 900px;
	margin: 0 auto 0px;
	padding: 0 30px 10px;
	border-radius: 3px;
	box-shadow: 0 ;
	line-height: 1.8;
	text-align: left;
}
.room-section{
width: 100%;
height: auto;
padding:20px 20px 30px;
background-color: #f2f2f2;
text-align: left;
}

.bwhite{
margin:25px auto;
padding:0;
background-color: #fff;
}

.room-intro{
padding:20px 18px 20px 18px;
vertical-align: top;
line-height: 1.2;
}
.room-intro p{
line-height: 1.6;
	font-size: 96%;
}

.amenities{
width: 100%;
height: auto;
margin-top: 15px;
padding:20px 10px 80px;
background-color: #ffffff;
text-align: left;
}
.amenities table{
max-width: 800px;
margin:-15px auto;
height: auto;
padding:20px 20px 20px;
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
}
@media screen and (max-width: 767px) {
.room-intro{
padding:20px 0 20px;
vertical-align: top;
line-height: 1.2;
}
	
.amenities table{
padding:20px 4px 30px;
}
}
		
.amenities td{
padding:20px 5px;
line-height: 1.6;
}

.rules{
width: 100%;
margin-top: 15px;
padding:20px 10px 40px;
text-align: left;
}
.rules table{
max-width: 800px;
margin:-15px auto 20px;
height: auto;
padding:20px 20px 30px;
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
}

@media screen and (max-width: 767px) {
.rules table{
padding:20px 4px 0px;
}
}

.rules table td{
padding:20px 5px;
line-height: 1.6;
}

.rules table td p{
line-height: 1.4;
margin-bottom:5px;
}


/*--------------------------------------------------
   LOCATION
 --------------------------------------------------*/ 
#loca-intro-box{
margin:-50px 0;
padding:60px 0 60px;
background-image: url("../img/location/leaves-right.png"),url("../img/location/leaves-left.png");
background-position: top right, bottom left;
background-repeat: no-repeat;
}

.loca-intoro{
	margin: 0 auto 60px;
	text-align: left;
}
.loca-intoro p{
 max-width: 770px;
	margin: 0 auto 0px;
	padding: 0 30px 10px;
	line-height: 2.2;
	text-align: left;
}
@media (max-width: 767px) {
.loca-intoro p{
 max-width: 770px;
	margin: 0 auto 0px;
	padding: 0 12px 10px 14px;
	line-height: 2.0;
}
}	
.locaphoto-space{
max-width: 100%;
height: auto;
margin-right: auto; 
margin-left: auto; 
padding:35px 20px 10px 0px;
background-color: #fff;
overflow: hidden;
}

.co-bottom {
width: 96%;
height: auto;
overflow: hidden;
}
.co-bottom { 
  position: relative; 
  margin-right: auto; 
  margin-left: auto; 
}
.co-bottom :before, 
.co-bottom :after { 
  display: table; 
  content: " "; 
} 
.co-bottom :after { 
  clear: both; 
} 
.co-bottom  { 
  *zoom: 1; 
}
.loca-photo { 
 max-width: 96%;
	margin:auto;
	padding:0 5px 0 0;
}

.loca-photo .col-lg-0, .col-md-0{
	position: relative;
 width: 100%;
}
.loca-cap{
	position: absolute;
	max-width: 360px;
 bottom:0;
	right:0;
 font-family: 'Noto Serif JP', serif;
	text-align: left;
	margin:0px 0 50px 20px !important;
	padding: 5px 20px 10px 30px;
	background: #fff;
}
.loca-cap p{
	font-size:14px;
	line-height: 1.5 !important;
}
@media (max-width: 767px) {
.locaphoto-space{
padding:20px 0px 0px;
background-color: #fff;
overflow: hidden;
}
.loca-photo { 
 max-width: 100%;
	margin:0;
	padding:0;
}
.loca-cap{
	position: static;
 max-width: 100%;
	margin:-15px 0px 10px !important;
	padding: 0 10px 0;
	}
	.loca-cap p{
	 font-size:13px;
		text-align: left;
	}
	}
	
	
/*--------------------------------------------------
   ACCESS
 --------------------------------------------------*/ 
#access p{
margin:15px 5px;
line-height: 1.7;
text-align: left;
}

@media (max-width: 767px) {
.okinawamap img {
max-width: 80%;
margin-top:-10px;
height: auto;
}
}

.receeption img{
max-width: 100%;
height: auto;
margin:auto;
padding:10px 0 30px;
text-align: center;
}
@media (max-width: 767px) {
.receeption img{
max-width: 100%;
height: auto;
margin:auto;
padding:10px 0 30px;
text-align: center;
}
}	
	
	
.map-space{
width: 100%;
height: auto;
padding:60px 20px 30px;
background-color: #f2f2f2;
text-align: center;
}

.map{
  position: relative;
	 width: 90% !important;
  padding-bottom: 55%; /* 縦横比*/ 
  height: 0;
  overflow: hidden;
  margin:0 auto;
}
.map iframe { 
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 96% !important;
}
@media (max-width: 767px) {
  .map {
		  width: 100% !important;
    height: 96% !important;
    margin-left: 0px;
    margin-right: 0px;
    padding-bottom: 70%;  /* 縦横比*/
  }
}

/*--------------------------------------------------
   RESERVATION
 --------------------------------------------------*/ 
#reservation img {
margin:0 0 20px;
}

@media screen and (max-width: 767px) {
#reservation p {
margin:0 auto 20px;
padding: 0 20px;
text-align: left;
}
}



/* FOOTER
 ------------------------------------------------------*/
/*top-footer*/



/*---- MOBILE ------*/
@media screen and (max-width: 767px) {
#footer .col-sm-12{
 width: 100%;
}

}