@charset "utf-8";


/* ---------------------------------------------------------------------------------
mainVisual */

#mainVisual{ height: 600px; width: 100%; display: table; position: relative;}
#mainVisual >.inner{ display: table-cell; vertical-align: middle; width: 100%; height: 100%;text-align: center;}
#mainVisual .videoContainer{  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 600px; 
    z-index: -10;
  overflow: hidden;}

#mainVisual video{
    background: transparent url('../images/subBG.jpg') 50% 50% / cover no-repeat ;
/* Make video to at least 100% wide and tall */
  min-width: 100%; 
  min-height: 600px; 
  
  /* Setting width & height to auto prevents the browser from stretching or squishing the video */
  width: auto;
  height: auto;
  
  /* Center the video */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

#mainVisual .white{ background-color: rgba(0,0,0,0); position: absolute; width: 100%; height: 100%; }



@media(max-width:750px){

#mainVisual{ height: 450px; width: 100%; display: table; position: relative;}
#mainVisual .videoContainer{ height: 450px; }
#mainVisual video{height: 450px; }

}

}

#mainVisual p{ }

.topCopy02{ text-align: center; display: block; color: #666; font-size: 30px; margin-bottom: 30px; line-height: 2em;}
.topCopy03{ text-align: center; display: block; color: #666; font-size: 16px; line-height: 2em;}


#villaCopy{padding: 100px 0; background: #efefef;}
#villaCopy p{font-family: serif;}



@media(max-width:750px){


.topCopy02{ text-align: center; display: block; color: #666; font-size: 38px; margin-bottom: 50px;}
.topCopy03{ text-align: center; display: block; color: #666; font-size: 26px; }

}





/* ---------------------------------------------------------------------------------
campaign */

#campaign >.inner{ width: 1000px; margin: 0 auto;}


@media(min-width:751px){
#campaign{ width: auto; background:#f9f9f9 ;padding: 30px 0;}
#campaign ul{ text-align: center;}
#campaign ul li{ width: 48%; display: inline-block;margin-right: 2%;}
#campaign ul li:nth-child(2n){ margin-right: 0;}
}

#campaign ul:before,
#campaign ul:after {content: " ";display:table;}
#campaign ul:after {clear: both;}
#campaign ul{*zoom: 1;}


@media(max-width:750px){

#campaign{ width: auto; background:#f9f9f9 ;padding: 20px 0;}
#campaign >.inner{ width: auto; margin: 0 auto;}
    
#campaign ul{}
#campaign ul li{ width: 700px; margin: 0 auto; margin-bottom: 20px;}
    #campaign ul li:last-child{margin-bottom: 0;}
}






/* ---------------------------------------------------------------------------------
information */


#information{ padding:75px 0 100px; background: #f0f0f0;}
#information >.inner{width: 600px; margin: 0 auto;}




@media(min-width:751px){
#information ul{ width: auto;}
#information ul li{padding: 30px 0; width: auto; background: url(../images/common/dotline.png) repeat-x left top; background-size:13px auto;}

#information ul li{ display: table; width: 100%}
#information ul li p{ display: table-cell;; padding: 4px 0; line-height: 1em;}
#information .date{ font-weight: bold; font-size: 13px; width:100px; }
#information .cat{font-size: 13px;width: 130px;}
#information .cat span{ background: #da7601; color: #fff; display: inline-block;  width: 130px; box-sizing: border-box; padding: 4px 0;  text-align: center;}

#information .cat span.plan{ background: #da017c;}
#information .title{font-size: 13px; padding-left: 10px;}
}

#information p.moreBtn{padding-top:30px ; background:url(../images/common/dotline.png) repeat-x left top;background-size:13px auto;}


@media(max-width:750px){

#information >.inner{width: 700px; margin: 0 auto;}
#information ul{ width: auto;}
#information ul li{padding: 30px 0; width: auto; background: url(../images/common/dotline.png) repeat-x left top; background-size:13px auto;}

#information .date{ font-weight: bold; font-size: 24px; width:auto; margin-right:10px; font-weight: bold;display: inline-block;}
#information .cat{font-size: 24px;width: auto; display: inline-block;}
#information .cat span{ background: #da7601; color: #fff; display: inline-block;  width: 130px; box-sizing: border-box; padding: 4px 0;  text-align: center;}
#information .title{font-size: 26px; padding-left: 0;padding-top: 10px;}
    
}


/* ---------------------------------------------------------------------------------
links */


#links{}
#links >.inner{}

.linkBlock{ display: block;width: 50%;height: 350px; position: relative;float: left; background: url(../images/top/pageImage00.jpg);  background-size:cover; }
.linkBlock >.inner{display: block; width: 100%; height: 350px; background: url(../images/top/shadow01.png) repeat-x center bottom;background-size:100% 100%;position: relative; bottom: 0;}
.linkBlock img{ position: absolute; bottom: 0; right: 0; width:100%; max-width: 600px; }
.linkBlock img.melt{  left: 0; }

.linkBlock.about{ background: url(../images/top/pageImage01.jpg) no-repeat center center; background-size:cover; }
.linkBlock.guestroom{ background: url(../images/top/pageImage02.jpg) no-repeat center center;background-size:cover;  }
.linkBlock.location{ background: url(../images/top/pageImage03.jpg) no-repeat center center; background-size:cover; }
.linkBlock.activity{ background: url(../images/top/pageImage04.jpg) no-repeat center center;background-size:cover;  }
.linkBlock.dougscoffee{ background: url(../images/top/pageImage05.jpg) no-repeat center center;background-size:cover;  }
.linkBlock.dougsexpress{ background: url(../images/top/pageImage06.jpg) no-repeat center center;background-size:cover;  }


#links >.inner:before,
#links >.inner:after {content: " ";display:table;}
#links >.inner:after {clear: both;}
#links >.inner{*zoom: 1;}

@media(max-width:750px){

    .linkBlock{ display: block;width: 100%;float: none;  height: 500px;}
    .linkBlock >.inner{ height: 500px;}
.linkBlock img{ max-width: none; }

}






.gallerySections{ width: 1000px; margin: 0 auto 50px;}

.gallerySections:before,
.gallerySections:after {content: " ";display:table;}
.gallerySections:after {clear: both;}
.gallerySections{*zoom: 1;}

.gallerySections #instagram{width: 490px; float: left; padding-top: 100px;}
.gallerySections #gallery{width: 490px; float: right; padding-top: 100px;}


@media(min-width:751px){
#gallery ul{ margin-bottom: 9px;}
#gallery ul li{width: 241px; margin-right: 5px; margin-bottom: 4px; float:left;}
#gallery ul li:nth-child(2n){ margin-right: 0;}
#gallery ul li a{}
#gallery ul:before,
#gallery ul:after {content: " ";display:table;}
#gallery ul:after {clear: both;}
#gallery ul{*zoom: 1;}
}


@media(max-width:750px){

.gallerySections{ width: auto; margin: 0 20px 50px;}
.gallerySections #instagram{width: auto; float: none; padding-top: 100px;}
.gallerySections #gallery{width: auto; float: none; padding-top: 100px;}
    
.gallerySections #gallery ul{
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 10px;
row-gap: 10px;
    }
    


}