@charset "utf-8";

/* =Reset default browser CSS.
Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {border: 0;font-family: inherit;font-size: 100%;font-style: inherit;font-weight: inherit;margin: 0;outline: 0;padding: 0;vertical-align: baseline;}
:focus {outline: 0;}

ol, ul {list-style: none;}
table {border-collapse: separate;border-spacing: 0;}
caption, th, td {font-weight: normal;text-align: left;}
blockquote:before, blockquote:after,q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
a img{border: 0;}
figure{margin:0}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
#main img { width:100%;}

.clearfix:after {  
  content: ".";   
  display: block;   
  height: 0;   
  clear: both;   
  visibility: hidden;  
}    
.clearfix { display: inline-table; }  
.clear{clear: both;}
  
/* Hides from IE-mac \*/  
* html .clearfix { height: 1%; }  
.clearfix { display: block; }  
/* End hide from IE-mac */  

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

body{color:#333;font:14px verdana,"ヒラギノ丸ゴ ProN W4","Hiragino Maru Gothic ProN","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
line-height:1.6;background:#fff;-webkit-text-size-adjust: none;}

html{background:#a9cf6b;}

/* リンク設定
------------------------------------------------------------*/
a{color:#25b7c0;text-decoration:none;}
a:hover{color:#739938;}
a:active, a:focus{outline:0;}


/* 全体
------------------------------------------------------------*/
.wrapper{margin:0 auto;padding:0 1%;width:98%;position:relative;}
.inner{margin:0 auto;width:100%; clear: both;}


/*************
/* ヘッダー
*************/
h1{font-size:12px;line-height:1.6;font-weight:normal;background:#00a3af;color:#fff;}
#header{overflow:hidden;padding:5px 0 15px;}

* html #header{height:1%;}

#header .logo{float:left;padding:15px 0 0;}
.info{float:right;padding:15px 0 0;}

.tel strong{font-size:20px;font-weight:bold;}
.header_contact { display:block; background:#f8b500;text-align:center;padding:5px 10px; }
.header_contact a { color:#554738;}
.header_contact:hover { background:#f5e56b; }

/**************************
/* トップナビゲーション
**************************/
#menu {background:#83ccd2;}
ul#topnav{overflow:hidden;margin:10px 0 0 0; }

* html ul#topnav{height:1%;}

ul#topnav li{float:left;text-align:center;}
ul#topnav a{width:129px;font-size:15px;line-height:1.2;display:block;padding:10px 0;color:#fff;background:#00a3af;border-left:1px solid #008899;}
ul#topnav li span {font-family: “Times New Roman”, “游明朝”, YuMincho, “ヒラギノ明朝 ProN W3”, “Hiragino Mincho ProN”, “メイリオ”, Meiryo, serif; letter-spacing:0.1em; font-size:12px;}

ul#topnav li:first-child a,ul#topnav li:last-child a{width:129px;}
ul#topnav li.active a,ul#topnav a:hover{background:#008899;}


/**************************
/* メイン画像（トップページ+サブページ）
**************************/
#mainBanner{clear:both;margin:0 auto 20px; background: url(../images/index/main.jpg) no-repeat center top;background-attachment: relative;
	background-position: center center;min-height: 550px;width: 100%;
	-webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
	
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.slogan{/*position:absolute;*/max-width:100%; width:1010px;height:auto; margin:10px auto;padding:5px 15px;line-height:1.4;z-index:100;background: url(../images/index/tp2.png);}
.slogan h2{padding-bottom:10px;color:#fff;font-size:20px;}
.slogan p{font-size:14px;color:#eee;}

/**************************
/* メイン画像（下層ページ）
**************************/
.mainBanner-inner { position:relative;width:1040px;padding:0;margin:0 auto;}	
#mainBanner-plan{ position:relative; clear:both;margin:0 auto 20px auto; background: url(../images/plan/main.jpg) no-repeat center top;background-attachment: relative;
	background-position: center center;min-height: 280px;width: 100%;
	-webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#mainBanner-access{ position:relative;clear:both;margin:0 auto 20px auto; background: url(../images/access/main.jpg) no-repeat center top;background-attachment: relative;
	background-position: center center;min-height: 280px;width: 100%;
	-webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#mainBanner-studio{ position:relative;clear:both;margin:0 auto 20px auto; background: url(../images/studio/main.jpg) no-repeat center top;background-attachment: relative;
	background-position: center center;min-height: 280px;width: 100%;
	-webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#mainBanner-lodge{ position:relative;clear:both;margin:0 auto 20px auto; background: url(../images/cottage/main.jpg) no-repeat center top;background-attachment: relative;
	background-position: center center;min-height: 280px;width: 100%;
	-webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#mainBanner-restaurant{ position:relative;clear:both;margin:0 auto 20px auto; background: url(../images/restaurant/main.jpg) no-repeat center top;background-attachment: relative;
	background-position: center center;min-height: 280px;width: 100%;
	-webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#mainBanner-pension{ position:relative;clear:both;margin:0 auto 20px auto; background: url(../images/pension/main.jpg) no-repeat center top;background-attachment: relative;
	background-position: center center;min-height: 280px;width: 100%;
	-webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#mainBanner-link{ position:relative;clear:both;margin:0 auto 20px auto; background: url(../images/link/main.jpg) no-repeat center top;background-attachment: relative;
	background-position: center center;min-height: 280px;width: 100%;
	-webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.slogan02{position:absolute; top:100px; left:0;max-width:100%; width:300px;height:auto; margin:10px auto;padding:5px 15px;line-height:1.4;z-index:100;background: url(../images/index/tp2.png);}
.slogan02 h2{padding-bottom:5px;color:#fff;font-size:20px;}
.slogan02 p{font-size:14px;color:#eee;}


@media only screen and (max-width:480px){
	#mainBanner-studio , #mainBanner-access , #mainBanner-plan , #mainBanner-link , #mainBanner-pension , #mainBanner-lodge , #mainBanner-restaurant { min-height: 180px;}
	.slogan02{ top:30px; left:10px;}
}

/**************************
/* グリッド
**************************/
.gridWrapper {clear:both; padding:30px 0;overflow:hidden;}
.gridWrapper02{clear:both; background:#f5f5f5; margin:0;padding:30px 0;overflow:hidden;}

* html .gridWrapper{height:1%;}
	
.grid{float:left;}

.colDark,.colLight{padding-bottom:5px;border-top:3px solid #008899;}
.colLight{border-color:#83ccd2;}

.colDark h3,.colLight h3{ margin:10px 0 10px 5px;font-size:14px;font-weight:bold;}
.colDark a,.colLight a {display:block;padding:3px 5px;border-radius:3px;color:#fff;background:#00a3af;}

.colDark a:hover , .colLight a:hover {background:#f5e56b; color:#5a544b;}
.grid p{padding:5px 10px;}
.grid ul{margin:5px 10px;}
.grid li{padding:5px 0;list-style:inside;border-bottom:1px dashed #ebebeb;}
.gridWrapper img, .gridWrapper02 img {max-width:100%;height:auto;}

.readmore a {display:block;padding:3px 5px;border-radius:3px;color:#fff;background:#00a3af;}
.readmore a:hover {background:#f5e56b; color:#5a544b;}

/* フッター内のグリッド(3カラム) */
#footer .grid,#footer .col3{color:#fff;background:transparent;}
#footer .col3 ul{margin:0 0 10px 5px; width:100%;}
#footer .col3 li{
padding:0 6px 0 5px;
margin-bottom:3px;
list-style:none;
border-bottom:0;
display:inline-block;
border-right:1px solid #fff;
font-size:13px;
}


/*************
メイン コンテンツ
*************/
section.content{margin-bottom:40px;font-size:14px;overflow:hidden; position:relative;}

* html section.content{height:1%;}

section.content p{margin-bottom:5px;}

section h2 {margin-bottom:20px;font-size:22px;font-weight:700;}
.col2_R h3 ,.col4 h3{padding:5px 0;margin-bottom:10px;font-size:18px;font-weight:700;}
.midashi {border-left:8px solid #f8b500; padding-left:18px;}

.alignleft{float:left;clear:left;margin:3px 0px 10px 0px;}
.alignright{float:right;clear:right;margin:3px 0px 10px 0px;}

img.frame,#gallery img{
border:2px solid #fff;
box-shadow:0 0 2px rgba(0, 0, 0, 0.5);
-webkit-box-shadow:0 0 2px rgba(0, 0, 0, 0.5);
}

#sub p { margin-bottom:6px;}
#sub h3 {height:auto; margin:0 auto 10px auto;padding:5px 15px;line-height:1.6;background: url(../images/index/tp2.png); color:#fff;}

#gallery .gridWrapper{padding:0;}
#gallery img{margin:5px;}
section#gallery{overflow:visible;}

#gallery .caption { display:block; font-size:13px; text-align:center; color:#7d7d7d; margin-bottom:10px;}

/*プラン*/
.caption { display:block; font-size:13px; text-align:center; color:#7d7d7d;}
.plan_left{float:left;clear:left;margin:3px 30px 10px 0px;}
.plan_right{float:right;clear:right;margin:3px 0 10px 0px;}
.plan_left { width:60%;}
.plan_right { width:35%;}


/*アクセス*/
section h3.midashi { font-size:16px;background:#eae8e1; padding:6px 10px; margin-bottom:15px; font-weight:600;webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;behavior: url("../js/PIE/PIE.htc");position:relative; clear:both;}

/*スタジオ*/
.studio_left{float:left; width:48%;clear:left;margin:3px 20px 10px 0px;}
.studio_right{float:right;clear:right; width:48%;margin:3px 0 10px 0;}
.kizai_left{float:left; width:47%;clear:left;margin:5px 20px 5px 20px; border-right:dotted 1px #B4B2B2;}
.kizai_right{float:right;clear:right; width:45%;margin:5px 0 5px 0;}
.osusume { position:absolute; top:0px; right:20px; background:url(../images/index/tp2.png) repeat;padding:3px 10px; text-align:center;}
.osusume span { color:fff; }
.osusume:hover { background:#DAD1D1; border:#323131 1px solid; }
.osusume span a { color:#fff;}
.osusume span a:hover { color:#323131;}

/*ペンション*/
.osusume02 { background:url(../images/index/tp2.png) repeat;padding:3px 10px; text-align:center; width:200px;border:#323131 1px solid;}
.osusume02 span { color:fff; }
.osusume02:hover { background:#DAD1D1; border:#323131 1px solid; }
.osusume02 span a { color:#fff;}
.osusume02 span a:hover { color:#323131;}


/*************
テーブル
*************/
table.table{
border-collapse:collapse;
width:100%;
margin:10px auto;
}

table.table th,table.table td{
padding:5px 10px;
border:1px solid #67b5b7;
}

table.table tr:first-child th,table.table tr:first-child td{
border-top:#25b7c0 4px solid
}

table.table th{
font-weight:bold;
letter-spacing:1px;
white-space:nowrap;
background:#e6eae6;
}


/*************
/* フッター
*************/
#footer{clear:both;padding: 20px 0;overflow:hidden;background:#83ccd2;border-top:1px solid #2a83a2;}

* html #footer{height:1%;}

#footer a{color:#fff;}
#footer a:hover{color:#2a83a2;}
#footer .logo span { font-size:120%; line-height:2.5;}

#footer .copyright{font-size:11px; margin-top:30px;}

/* page top */
div.pageTop  { clear:both;position: fixed;bottom: 10px; right: 5px;cursor:pointer; z-index:1000;}



/* PC用 */
@media only screen and (min-width:960px){
	 .inner {width:1040px;padding:0;margin:0 auto;}	
	ul#topnav{width:1040px; margin:0 auto;padding:0;}	
	#main{float:right;width:770px; margin-top:20px; margin-bottom:40px;}
	#sub{float:left;width:235px;margin-top:20px;overflow:hidden; font-size:15px;}	
	
	
	/* グリッド */
	.grid{width:240px; margin-right:25px;}
	.grid:last-child {margin-right:0px;}	
	
	.col2{width:60%; float:left;}
	.col2_R { width:38%; float:right;}
	.col3{width:775px; float:right;}
	
	.col4 { width:47%; float:left; margin-right:6%;}
	.col4:last-child { margin-right:0;}
	.col4 img { width:240px; height:auto;}
	
	#gallery .grid{width:240px; margin-right:15px;}
	#gallery .grid img { height:230px;}
	 #sub .grid{width:100%;float:none;padding-bottom:30px;}
	 
	#fb { width:50%; margin:20px 0; float:left;}
	#g_map { width:50%; margin:20px 0; float:right;}
	.inner_btn { width:780px; margin:auto;}
	.inner_btn img { margin:5px;}
	
}


/* モニター幅960px以下 */
@media only screen and (max-width:960px){
	h1 p.inner{padding:0 2%;width:96%}
	#header .logo{padding-left:10px;}
	#header .info{padding-right:10px;}
	
	ul#topnav{clear:both;width:100%;}
	ul#topnav li{
	width:33%;
	margin:0 0 5px;
	border-right:1px solid #739938;
	box-sizing:border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
	}
	ul#topnav li:nth-child(3n){border-right:0;width:34%;}
	ul#topnav li a{width:100%;border-top:0;}
	ul#topnav li:first-child a,ul#topnav li:last-child a{width:100%;}
	
	.slogan{width:82%;height:auto;}
	
	.gridWrapper {width:90%; margin:0 auto;}	
	.gridWrapper02 .inner {width:90%; margin:0 auto;}
	
	.grid{width:48%;margin:1%;}
	
	.col4 { width:95%; float:none; margin:5px auto 30px auto;}
	.col4:last-child { margin-bottom:0px;}
	.col4 img { width:100%; height:auto;}
	
	.inner_btn { width:94%; margin:auto;}
	
	#gallery .grid{
	width:31%;
	margin:0 1%;
	padding:0;
	}
	
	#gallery .grid img{
	float:none;
	}
	
	section.content{padding:0 10px;}
	
	/*section.content img{
  max-width:90%;
	height:auto;
	}*/
	
	#sub .grid{padding-bottom:20px; width:60%; margin-right:20px;}
	
	#footer{padding:0;}
	
	#footer .grid{float:none;width:100%;margin-bottom:5px;text-align:center;}
	#fb { width:100%; margin:20px 0; float:none;}
	#g_map { width:100%; margin:20px 0; float:none;}
}


/* iPad 縦 */
@media only screen and (max-width:768px){
	#mainBanner{padding:3px;}
}


/* スマートフォン 横(ランドスケープ) */
@media only screen and (max-width:640px){
	.grid{width:100% !important;margin:auto;}
	.col2{width:100%;}
	.grid .col2_R { width:100%; float:none;}
	.col3{width:100%;}
	
	.col4 { width:95%; float:none; margin:5px auto 30px auto;}
	.col4:last-child { margin-bottom:0px;}
	.col4 img { width:100%; height:auto;}
	
	.grid img{float:none;margin:20px auto 10px;}
	
	.grid p{text-align:left;}
	
	img.frame,#gallery img{border-width:2px;}

  .alignleft,.alignright{
	float:none;
	display:block;
	margin:0 auto 10px;
	}
	
	#sub p { width:230px; margin:5px auto;}
	
	#footer .grid p,.copyright {text-align:center;}
	
	.inner_btn { width:98%; margin:auto;}
	.inner_btn img { margin:1px; width:200px;}
	
	/*プラン*/
.plan_left , .plan_right {float:none;margin:0 auto 20px auto !important; width:98%; }
.plan_left img { width:100%; margin:auto; text-align:center;}
}


/* スマートフォン 縦(ポートレート) */
@media only screen and (max-width:480px){
	#header .logo{ float:none; margin:auto; padding:10px; text-align:center;}
  .info{ float:none;  text-align:center; width:85%; margin:auto;padding:10px;}
	ul#topnav li{width:50%;}
	ul#topnav li:nth-child(3n) {border-right:1px solid #739938;width:50%;}	
	ul#topnav li:nth-child(2n),ul#topnav li:nth-child(6n){border-right:0;}
	
	#mainBanner{margin-left:1px;}
	
	.midashi{font-size:18px !important; line-height:1.4;}
	
	.inner_btn { width:235px; margin:auto;}
	.inner_btn img { margin:5px; width:100%;}
		
	#gallery img{ width:210px !important; height:auto; margin-left:14%;}
	
	/*スタジオ*/
.studio_left{float:none; width:98%;clear:left;margin:5px auto;}
.studio_right{float:none;width:98%;margin:5px auto;}
.kizai_left{float:none; width:98%;clear:left;margin:5px auto; border-right:none;}
.kizai_right{float:none;width:98%;margin:5px auto;}
.osusume { position: static; margin:20px;}

}

/* 汎用クラス
*************************************************************/
.mb0 { margin-bottom:0px !important;}
.mb5 { margin-bottom:5px !important; }
.mb10 { margin-bottom:10px !important; }
.mb15 { margin-bottom:15px !important; }
.mb20 { margin-bottom:20px !important; }
.mb25 { margin-bottom:25px !important; }
.mb30 { margin-bottom:30px !important; }
.mb35 { margin-bottom:35px !important; }
.mb40 { margin-bottom:40px !important; }
.mb45 { margin-bottom:45px !important; }
.mb50 { margin-bottom:50px !important; }
.mb80 { margin-bottom:80px !important; }

.mt10 { margin-top:10px !important; }
.mt20 { margin-top:20px !important; }
.mt30 { margin-top:30px !important; }

.ml15 { margin-left:15px !important; }
.mr15 { margin-right:15px !important; }
.mr25 { margin-right:25px !important; }

.mt-35 { margin-top:-35px; }
.mt-20 { margin-top:-20px; }

.pb20 { padding-bottom:20px !important; }

.w20p { width:20%;}

.ssmall { font-size:85%; line-height:1.4 !important;}
.small { font-size:95%; line-height:1.4 !important;}
.medium { font-size:110%;}
.big { font-size:120%;}
.strong { font-weight:bold;}
.hr {border-bottom:dotted 1px #6D5639; }

.red { color:#b7282e}
.olive { color:#808000;}
.blue { color: #00afcc;}
.orenge { color:#f08300;}
.darkblue { color:#008899;}

.center { text-align:center;}
.text_left { text-align:left; display:block;}
.img { width:100%; height:auto;}

@media only screen and (min-width:481px){
	.sp { display:none;}
}
.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
img {
  max-width: 100%;
  height: auto;
}
* {
  box-sizing: border-box;
}

body {
  overflow-x: hidden;
}
.fb-page,
.fb-page span,
.fb-page iframe {
  width: 100% !important;
}

/* イベント案内 スマホ表示・確定版 */
@media only screen and (max-width:768px) {

  .event-area {
    width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin: 0 !important;
    overflow: hidden;
    box-sizing: border-box;
  }

  .event-area .inner {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .event-area img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }

  .event-area h2,
  .event-area p {
    width: 100%;
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
}