@charset "utf-8";

/*============================================================
   YAGAJI STAY　第２階層
  ============================================================ */
/*
layout.css
color:#5e4126;
point color1:#00a7d3
point color2:#00b3cd
point color3:#5dc2d0
*/

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

/* BASIC
 --------------------------------------------------*/ 
.english{
  padding:10px 0 20px 10px !important;
  color:#94673c;
  font-size: 15.2px !important;
  font-size: 1.52rem !important; 
		line-height: 150% !important;
}

@media (max-width: 767px) {
.english{ 
  font-size: 97% !important;
  letter-spacing:0.07em;
}
}
.english2{
  padding:0 0 15px !important;
  color:#94673c;
  font-size: 14.2px !important;
  font-size: 1.42rem !important; 
		line-height: 145% !important;
}
@media (max-width: 767px) {
.english2{ 
  font-size: 97% !important;
  letter-spacing:0.07em;
}
}

.english3{
  width: 94%; 
		margin-top:-5px auto 5px !important;
  padding:-5px 0 30px !important;
  color:#94673c;
  font-size: 14.4px !important;
  font-size: 1.44rem !important; 
		line-height: 145% !important;
}
@media (max-width: 767px) {
.english2{ 
  font-size: 97% !important;
  letter-spacing:0.07em;
}
}
/* EACH CONTENT
--------------------------------------------------------*/
#room,#speciality,#location,#access,#contact {
width: 100%;
height: auto;
margin:80px auto 0;
padding-top: 20px 10px;
text-align:center;
overflow: hidden;
}

/* h1 sub */
.lowercase{
font-size:50%;
display:block;
font-style:40% !important;
font-weight: 100 !important;
}
/* h2 sub */
.lowercase2{
font-size:60%;
font-style:40% !important;
font-weight: 100 !important;
}

.outline {
width: 94%;
margin:5px auto 0px;
padding-top:20px;
text-align: center;
overflow: hidden;
}

.outline p {
font-size: 100%;
padding:10px 30px 10px;
line-height: 1.8;
text-align: left !important;
}
@media screen and (max-width: 767px) {
.outline p {
width: 98%;
padding:0px 40px 10px !important;
line-height: 1.6;
text-align: left;
}
}



.outline2 {
width: 94%;
margin:5px auto 0px;
padding:20px 5px 0;
text-align: center;
}

.outline2 p {
width: 88%;
font-size: 100%;
margin:0px auto 0px;
padding:10px 30px 10px;
line-height: 1.8;
text-align: left;
}

@media screen and (max-width: 767px) {
.outline2 p {
width: 100%;
font-size: 100%;
margin:0px auto 0px;
padding:10px 18px 10px 20px;
line-height: 1.8;
text-align: left;
}
}

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

@media (min-width: 768px) and (max-width: 1199px) {
.pract{
max-width: 88%;
}	
}	
@media (max-width: 767px) {
.pract{
max-width: 98%;
}	
}


/*--------------------------------------------------
   ROOM
 --------------------------------------------------*/

.roomphoto1r{
text-align: right;
}	
.roomphoto1r img{
margin: 40px 0 20px 20px;
width: 84%;
}	
@media screen and (max-width: 767px) {
.roomphoto1r{
text-align: center;
}	
.roomphoto1r img{
margin: 30px auto 0px !important;
text-align: center;
width: 98%;
}
}

.roomphoto1l{
text-align: left;
}	
.roomphoto1l img{
margin: 40px 0 20px 20px;
width: 84%;
}	
@media screen and (max-width: 767px) {
.roomphoto1l{
text-align: center;
}	
.roomphoto1l img{
margin: 30px auto 0px !important;
text-align: center;
width: 98%;
}
}


.roomphoto2 img{
margin: 0 auto 0px;
padding-bottom: 40px!important;
max-width: 98%;
}


.sandbrown {
width: 100%;
margin:5px auto 10px;
padding:20px 0px 10px;
background-color: #cac3bc;
text-align: center;
overflow: hidden;
}
@media screen and (max-width: 767px) {
.sandbrown {
padding:20px 15px 30px;
}
}

/* ROOM CONDITIONS
--------------------------------------------------------*/
.room-conditions{
width: 84%;
margin:0 auto -10px;
padding:20px 0px 10px;
text-align: center;
overflow: hidden;
}

.room-conditions p{
max-width: 790px;
font-size: 99%;
margin:5px auto 10px;
padding:20px 30px 20px;
line-height: 1.8;
text-align: left;
}

.faci_inner{
background:#F1EBE7; 
margin:10px auto 30px;
padding:20px 30px 20px;
line-height: 1.6;
text-align:left;
border-radius: 15px;
}

.faci_inner dl{
padding:5px 20px 20px 30px;
}

@media screen and (max-width: 767px) {
.room-conditions{
width: 92%;
}

.faci_inner{
background:#F1EBE7; 
margin:10px auto 30px;
padding:5px 26px 20px;
line-height: 1.6;
text-align:left;
border-radius: 15px;
}

.faci_inner dl{
padding:0px 20px 10px;
}
}


/*--------------------------------------------------
   LOCATION
 --------------------------------------------------*/
.overlooking{
margin:10px auto 0px;
text-align: center;
overflow: hidden;
}
.overlooking img{
width: auto;
max-height:880px;
margin:10px auto -30px;
}
.overlooking p{
margin:10px auto 0px;
text-align: center;
}

@media screen and (max-width: 767px){
.overlooking {
margin:-10px auto 30px;
}
.overlooking img{
width:100% !important;
height:auto !important;
margin:50px auto 0px;
padding:0;
}
.overlooking p{
width: 100%;
margin:0px auto 0px;
text-align: left !important;
}
}

.neighborhood{
width: 100%;
margin:50px auto 55px;
padding:30px 0px 45px;
background-color: #cac3bc;
text-align: center;
overflow: hidden;
}
@media screen and (max-width: 767px) {
.neighborhood {
margin-top:0;
padding:10px 15px 30px;
}
}
.neighborhood img{
margin:25px auto 0;
}

.captions{
font-size: 93%;
letter-spacing: 0.06em;
padding:0 5px;
line-height: 1.4;
text-align: left;
}


.spots{
margin-bottom:50px;
}
.spots img{
padding:20px auto 0;
}

.spot-wrap{
margin:40px auto 30px;
padding: 10px 20px 20px 10px;
background: rgba(255,255,255,0.5); /* #fff */
overflow: hidden;
}
@media screen and (max-width: 1299px) {
.spot-wrap{
width: 98%;
margin:35px auto !important;
padding: 0px 20px 10px !important;
background: rgba(255,255,255,0.5); /* #fff */
overflow: hidden;
}
}
@media (max-width: 768px) {
.spot-wrap{
width: 98%;
margin:35px auto !important;
padding: 0px 10px 10px !important;
background: rgba(255,255,255,0.5); /* #fff */
overflow: hidden;
}
}

/*--------------------------------------------------
  SPECIALITY
 --------------------------------------------------*/ 
.eachspec {
width: 100%;
margin:5px auto 10px;
padding:40px 0px 40px;
text-align: center;
overflow: hidden;
}
@media screen and (max-width: 767px) {
.eachspec {
margin:5px auto 10px;
padding:20px 0 30px;
}
}
.eachspec img{
margin:0 auto 10px;
padding:0 5px 0;
}

.eachspec p {
max-width: 940px;
font-size: 102%;
margin:15px auto 0px;
padding:0px 30px 20px;
line-height: 1.8;
text-align: left;
}

.bc01{
width: 100%;
margin:30px auto 40px;
padding:40px 0px 40px;
background-color: #cac3bc;
text-align: center;
overflow: hidden;
}

.villaentrance img{
margin: 30px 0 50px 40px;
width: 80% !important;
}	
@media screen and (max-width: 767px) {
.villaentrance img{
margin: 30px auto 50px;
text-align: center;
width: 96%;
}
}
.specis img{
margin:10px auto 40px;
text-align: center;
}
@media screen and (max-width: 767px) {
.specis img{
margin:0 auto 0;
padding-top:0;
text-align: center;
min-height: auto;
}	
}		
	
.lowercase{
font-size:50%;
display:block;
font-style:40% !important;
font-weight: 100 !important;
}


/*--------------------------------------------------
   ACCESS
 --------------------------------------------------*/ 

#access p{
margin:5px 0 10px;
padding:0;
line-height: 1.7;
}	
@media screen and (max-width: 767px) {
#access p{
font-size: 98%;
}	
}


.mainlandmap img{
margin-bottom: 10px;
width: 92%;
}	
@media screen and (max-width: 767px) {
.mainlandmap img{
margin-bottom: 0;
width: 100%;
}
}

/* Google Map */ 
.map-box {
max-width: 100%;
width: 1260px;
margin: 0 auto;
padding:0px 0 20px;
}
.map {
height: 0;
overflow: hidden;
padding-bottom: 64.100%;
position: relative;
}
.map iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 94%;
margin-top: 0;
}

/* ACCESS PHOTOS
--------------------------------------------------------*/
.directions {
width: 100%;
margin:5px auto 10px;
padding:30px 0px 40px;
background-color: #cac3bc;
text-align: center;
overflow: hidden;
}
@media screen and (max-width: 767px) {
.directions {
padding:20px 15px 30px;
}
}
.directions p {
max-width: 800px;
font-size: 98%;
margin:5px auto 10px;
padding:20px 30px 20px;
line-height: 1.8;
text-align: left;
}
	
	
/* TRANSPORTATION
--------------------------------------------------------*/
.transportations{
width: 90%;
margin:0 auto 60px;
padding:20px 0px 30px;
text-align: center;
overflow: hidden;
}

.transportations p{
max-width: 780px;
font-size: 99%;
margin:5px auto 10px;
padding:20px 30px 20px;
line-height: 1.8;
text-align: left;
}

.route_inner{
width: 94%;
background:#F1EBE7; 
margin:20px auto 30px;
padding:20px 30px 20px;
text-align:left;
border-radius: 15px;
}