@charset "UTF-8";

/*
Theme Name: ペンション「晴れたり曇ったり」
Description: 
*/

/* --------------------------------------------
 *    reset
 * -------------------------------------------- */
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, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-style:normal;
	font-weight: normal;
	font-size: 100%;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
html { overflow-y: scroll; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
input, textarea {
	margin: 0;
	padding: 0;
}
ol, ul { list-style:none; }
table {
    border-collapse: collapse; 
    border-spacing:0;
}
caption, th { text-align: left; }
a:focus { outline:none; }
.clearfix:after {
	content: "."; 
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.clearfix { min-height: 1px; }
* html .clearfix {
	height: 1px;
	/*\*//*/
	height: auto;
	overflow: hidden;
	/**/
}
.both { clear:both; }
.inline_block {  
	display: inline-block;  
	*display: inline;  
	*zoom: 1;  
}

/*** font
*********************************************************************/
/*
Font-size list (base: 14px)
 72% = 10px
 79% = 11px
 86% = 12px
 93% = 13px
100% = 14px
108% = 15px
115% = 16px
122% = 17px
129% = 18px
136% = 19px
143% = 20px
*/

/*** 初期設定
*********************************************************************/
body {
	background-color: #fff;
	font-family: "Helvetica Neue", Helvetica, Arial, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	font-size: 14px;
	line-height: 1.5;
}
img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}
.ie8 img { width: auto; }
a:hover img {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha(opacity=70)";
}

/** clearfix
===================================*/
.clearfix { zoom: 1; }
.clearfix:after {
	content: "";
	display: block;
	clear: both;
}

/*** layout
*********************************************************************/
#page {
	width: 100%;
	min-width: 1400px;
	background-image: url(common/bg01.jpg),
                      url(common/bg02.jpg);
	background-repeat: no-repeat,
                       no-repeat;
	background-position: center 800px,
                         center 1460px;
	margin-top: auto;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
}
#contents {
	width: 1400px;
	min-width: 1400px;
	margin: 0 auto;
}
#contentsInner {
	width: 960px;
	margin: 0 auto;
}

/** header
================================================*/
header {
	width: 100%;
	min-width: 1400px;
	margin-bottom: 50px;
	margin-right: auto;
	margin-left: auto;
}
#headerInner { 
	width: 100%;
	height: 600px;
	margin: 0 auto;
	overflow: hidden;
	background: url(common/waku-wood.jpg) bottom left repeat-x;
	position: relative;
}
h1#site-title-logo {
	position:absolute;
	z-index: 5;
	width: 190px;
	margin: 205px auto 0 605px;
}

/**  movie
----------------------------------------------- */
.movie {
	position:absolute;
	z-index:2;
	width:100%;
	height:538px;
	margin:auto;
	margin-top:12px;
	overflow: hidden;
	/*margin-left:50px;*/
}
.movie video{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: auto;
}
.cover {
	position:absolute;
	z-index:3;
	width:1300px;
	height:500px;
	margin:0 auto;
}

/** catch
----------------------------------------------- */
#catch { 
	position: absolute;
	z-index: 2;
	width:100%;
	height:550px;
	overflow: hidden;
	/*margin: 50px 0 0 51px;*/
}
#catch img{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
}

/** gNav
================================================*/
#gNav { 
	width: 820px;
	margin: 550px auto;
}
#gNav li {
	float: left;
	overflow: hidden;
	white-space: nowrap;
  	text-indent: 100%;	
}
#gNav li a {
	display: block;
	height: 50px;
	background-image: url(common/btn_gNav.png);
	background-repeat: no-repeat;
}

/**  #gNav Indivisual
----------------------------------------------- */
#gNav li#navHome a {
	width: 120px;
	background-position: left 0;
}
#gNav li#navHome a:hover, #gNav li#navHome a:active, .index #gNav li#navHome a {
	background-position: left -50px;
}
#gNav li#navRoom a {
	width: 140px;
	background-position: -120px 0;
}
#gNav li#navRoom a:hover, #gNav li#navRoom a:active, .room #gNav li#navRoom a {
	background-position: -120px -50px;
}
#gNav li#navCuisine a {
	width: 140px;
	background-position: -260px 0;
}
#gNav li#navCuisine a:hover, #gNav li#navCuisine a:active, .cuisine #gNav li#navCuisine a {
	background-position: -260px -50px;
}
#gNav li#navVacances a {
	width: 140px;
	background-position: -400px 0;
}
#gNav li#navVacances a:hover, #gNav li#navVacances a:active, .vacances #gNav li#navVacances a {
	background-position: -400px -50px;
}
#gNav li#navAccess a {
	width: 140px;
	background-position: -540px 0;
}
#gNav li#navAccess a:hover, #gNav li#navAccess a:active, .access #gNav li#navAccess a {
	background-position: -540px -50px;
}
#gNav li#navPlan a {
	width: 140px;
	background-position: -680px 0;
}
#gNav li#navPlan a:hover, #gNav li#navPlan a:active {
	background-position: -680px -50px;
}
#gNav li#navGuest a {
	width: 140px;
	background-position: right 0;
}
nav#gNav li#navGuest a:hover, #gNav li#navGuest a:active {
	background-position: right -50px;
}

/** contents
================================================*/
section, .section { 
	margin-bottom: 50px;
	overflow: hidden;
}
h2 { margin-bottom: 15px; }
h3 { margin-bottom: 5px; }

/**  top
----------------------------------------------- */
#topLead {
	width: 890px;
	height: 386px;
	padding: 40px 0 0 70px;
	background: url(images/bg_lead.jpg) top left no-repeat;
}
#topLead p { 
	width: 510px;
	color: #fff;
}
#appeal ul { overflow: hidden; }
#appeal li {
	width: 300px;
	float: left;
	margin-right: 30px;
}
#appeal li:last-child { margin-right: 0; }
#appeal li dt { margin-bottom: 5px; }
#appeal li dd { padding: 0 10px; }
#planArea { overflow: hidden; }
#planRss {
	width: 630px;
	float: left;
}
#sidebar {
	width: 250px;
	float: right;
}
#planSearch {
	width: 230px;
	height: 310px;
	padding: 10px;
	background: url(images/bg_plan-search.jpg) top left no-repeat;
	margin-bottom: 20px;
}
#planSearch h2 { 
	text-align: center;
	margin-bottom: 7px; 
}
#blog h2 { 
	text-align: center;
	margin-bottom: 9px; 
}
#searchBody, #blogBody {
	width: 230px;
	height: 270px;
	background-color: #fff;
	opacity: 0.85;
	filter: alpha(opacity=85);
	-ms-filter: "alpha(opacity=85)";
}

/**  room
----------------------------------------------- */
#roomLead {
	width: 960px;
	height: 460px;
	background: url(room/bg_lead.jpg) top left no-repeat;
}
#roomLead p { 
	margin: 40px 0 0 40px;
}
#roomLead.section{margin-bottom: 20px;}
ul#room { overflow: hidden; }
ul#room li { 
	width: 450px;
	float: left;
}
ul#room li:first-child { margin-right: 60px; }
ul#room li dt, ul#room li dd img { margin-bottom: 5px; }
ul#room li dt {
	background-color: #7B4A29;
	color: #fff;
	text-align: center;
	font-size: 115%;
	height: 30px;
	line-height: 30px;
}
dl#helston {
	width: 408px;
	height: auto;
}
dl#helston dt {
	font-weight: bold;
	font-size: 115%;
	margin-bottom: 5px;
}
dl.detail {
   border: 1px solid #999;
   border-top :0;
   background: #FCF4E9;
}
dl.detail dt {
   float: left;
   width: 10em;
   border-top: 1px solid #999;
   padding: 10px 0 0 10px;
}
dl.detail dd {
   margin-left: 10em;
   padding: 10px;
   border-top: 1px solid #999;
   border-left: 1px solid #999;
   background:#fff;
}

.wooddeck{
	display: flex;
	justify-content: space-between;
	margin-bottom: 50px;
}

.slider-box {
    width: 500px;
    margin: 0 auto;
  }

/**  cuisine
----------------------------------------------- */
#cuisineLead {
	width: 960px;
	height: 460px;
	background: url(cuisine/bg_lead.jpg) top left no-repeat;
}
#cuisineLead p { margin: 30px 20px 0 600px; }
ul#cuisine { overflow: hidden; }
ul#cuisine li { 
	width: 450px;
	float: left;
}
ul#cuisine li:first-child { margin-right: 60px; }
ul#cuisine li dt, ul#cuisine li dd img { margin-bottom: 5px; }
ul#cuisine li dt, ul#cuisinePlans li dt {
	background-color: #7B4A29;
	color: #fff;
	text-align: center;
	font-size: 115%;
	height: 30px;
	line-height: 30px;
}
ul#cuisinePlans li {
	width: 450px;
	float: left;
	margin-bottom: 30px;
}
ul#cuisinePlans li:first-child { margin-right: 60px; }
ul#cuisinePlans li:last-child { margin-bottom: 0; }
ul#cuisinePlans li dt, ul#cuisinePlans li dd img { margin-bottom: 5px; }
ul#cuisinePlans li#kani { width: 960px; }
ul#cuisinePlans li#kani dl {
	margin-left: 470px;
}

/**  vacances
----------------------------------------------- */
#vacancesLead { margin-bottom: 20px; }
ul#spotDetail li {
	padding: 20px;
	border: 1px solid #ccc;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	overflow: hidden;
	margin-bottom: 20px;
}
ul#spotDetail li dt {
	width: 300px;
	float: left;
}
ul#spotDetail li dd {
	margin-left: 320px;
}
ul#spotDetail li dd h3 {
	font-size: 115%;
	font-weight: bold;
	margin-bottom: 5px;
}

/**  access
----------------------------------------------- */
.location {
	padding: 5px 10px;
	background-color: #7B4A29;
	color: #fff;
}
.transportation p, .transportation li { line-height: 30px; }
#gMap {
	width: 956px;
	height: 456px;
	padding: 1px;
	border: 1px solid #ccc;
}
.accessDetail { margin-bottom: 30px; }
dl.info dt { 
	font-size: 115%;
	font-weight: bold; 
}

/**  pagetop
----------------------------------------------- */
#page-top {
	display: none;
	position: fixed;
	bottom: 20px;
	right: 20px;
	font-size: 86%;
}
#page-top a {
    background: #FCF4E9;
    text-decoration: none;
    color: #7B4A29;
    width: 70px;
    height: 70px;
    line-height: 70px;
    text-align: center;
    display: block;
    border-radius: 50%;
    border: 1px solid #FCF4E9;
}
#page-top a:hover {
	color: #FCF4E9;
    text-decoration: none;
    background: #7B4A29;
    border: 1px solid #7B4A29;
}

/** footer
================================================*/
footer { 
	width: 100%;
	min-width: 960px;
	height: 270px;
	margin: 0 auto;
	background: url(common/bg_footer.jpg) top left repeat-x;
}
#footerInner {
	width: 960px;
	margin: 0 auto;
	overflow: hidden;
}
ul#footerMenu { 
	height: 40px;
	line-height: 40px;
	text-align: center;
}
ul#footerMenu li { 
	display: inline-block;
	font-size: 86%; 
}
ul#footerMenu li a {
	color: #7B4A29;
	text-decoration: none;
}
ul#footerMenu li a:hover {
	text-decoration: underline;
}
ul#footerMenu li:after {
    content: "/";
    margin: 0 10px 0 10px;
}
ul#footerMenu li:last-child:after {  content: " "; }
#siteInfo { 
	height: 140px;
	padding: 30px 0;
	overflow: hidden;
}
dl#address { 
	float: left; 
	overflow: hidden;
}
dl#address dt {
	width: 140px;
	float: left;
}
dl#address dd { margin-left: 150px; }
.yado { float: right; }
.yado p { font-size: 86%; }
.copy {
	height: 30px;
	line-height: 30px;
	text-align: center;
	color: #fff;
}

/*** attachment
*********************************************************************/
.indent {
	padding-left: 1em; /* 1文字分の左パディング */
	text-indent: -1em; /* 最初の行だけを1文字分左に */
}
.notice { color: #990000; }
.attention { 
	background-color: #DCD1B3;
	color: #990000;
}
.waku {
	padding: 15px;
	border: 1px solid #ccc;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	overflow: hidden;
}
.mb05 { margin-bottom: 5px; }
.mb10 { margin-bottom: 10px; }
.mb20 { margin-bottom: 20px; }
.mb30 { margin-bottom: 30px; }
.mb40 { margin-bottom: 40px; }
.mb50 { margin-bottom: 50px; }
.mt10 { margin-top: 10px; }
.mt15 { margin-top: 15px; }
.mt20 { margin-top: 20px; }
.mt30 { margin-top: 30px; }
.mt60 { margin-top: 60px; }
.mL10 { margin-left: 10px; }
.pt05 { padding-top: 5px; }
.pt20 { padding-top: 20px; }
.middle { text-align: center; }
.txt12 { font-size: 86%; }
.txt16 { font-size: 115%; }
.bold { font-weight: bold; }
.bbn { border-bottom: none; }
.nmt10 { margin-top: -10px; }
.fR { float: right; }
.fL { float: left; }
img.aligncenter { 
    display: block;
    margin: 0 auto;
}
img.alignright {
    float: right;
    margin: 0 0 20px 20px;
}
img.alignleft {
    float: left;
    margin: 0 20px 20px 0;
}
.aligncenter { 
    display: block;
    margin: 0 auto;
}
.alignright {
    float: right;
    margin: 0 0 20px 20px;
}
.alignleft {
    float: left;
    margin: 0 20px 20px 0;
}
.valignmiddle { vertical-align: middle; }
#page header .header_box {
	padding: 0px;
	width: 1400px;
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: 10px;
	margin-left: auto;
}
#page header .header_box hr {
	margin: 0px;
	padding: 0px;
	clear: both;
	float: none;
	border-width: 0px;
	border-style: none;
}

#page header .header_box h1 {
	height: 68px;
	width: 140px;
	float: right;
	margin-top: 5px;
	padding: 0px;
	margin-right: 15px;
	margin-bottom: 0px;
	margin-left: 0px;

}
#page header .header_box .header_tel {
	padding: 0px;
	float: right;
	width: 300px;
	margin-top: 0px;
	margin-right: 15px;
	margin-bottom: 0px;
	margin-left: 0px;
}
#page header .header_box .header_banner {
	margin: 0px;
	padding: 0px;
	float: right;
	width: 300px;
}
#contentsInner .kome {
	padding: 20px;
	text-align: center;
	color: #FFF;
	background-color: #DB6D00;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 50px;
	margin-left: 0px;
	font-weight: bold;
}
#contentsInner .kome02 {
	padding: 10px;
	text-align: center;
	color: #FFF;
	background-color: #DB6D00;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 25px;
	margin-left: 0px;
	font-weight: bold;
}

/*追加css*/
.caution{
	width: 100%;
	text-align: center;
	margin: 30px auto;
}
.youshitsu,
.washitsu{
	box-sizing: border-box;
	padding: 15px;
    border: 1px solid #ccc;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 20px;
}
.w420{
	width: 420px;
}
.w450{
	width: 450px;
}
.w500{
	width: 500px;
}
.youshitsu h3,
.washitsu h3{
	font-size: 20px;
	font-weight: bold;
	color: #666;
}
.youshitsu h4{
	font-size: 115%;
	text-align: center;
	background: #7b4a29;
	color: #fff;
	padding: 5px 0;
}
.youshitsu .alignleft,
.youshitsu .alignright,
.washitsu .alignleft,
.washitsu .alignright{
	margin: 0;
}