@charset "UTF-8";
/*==================================================

	　　ペンションダックcss
	2019sep (c)Shokodo.Co.,Ltd

====================================================*/
/*
  フォント名は Win と Mac で少しだけ異なる。
  Windows: "游ゴシック", "Yu Gothic"
  Mac: "游ゴシック体", "YuGothic"
*/
@font-face {
  font-family: "YuGothic M";
  src: local("Yu Gothic Medium"),
       local("Yu Gothic");
  font-weight: 500;
       /*
         Chrome 58.0.3029.110 (64-bit) では
         "Yu Gothic Medium" を認識しないバグあるため
         "Yu Gothic" と font-weight も併せて指定。
       */
}
/*--------------------------------------------------------------------*/
html, body {
	padding: 0;
	margin: 0;
	height: 100%;
}
body {
	position: relative;
	width: 100%;
	font-size: 18px;
	line-height: 150%;
	color: #000;
	font-family: "游ゴシック体", YuGothic, "YuGothic M", sans-serif;
}
/*--------------------------------------------------------------------*/

/* font color---------------------------------------------------------*/
.orange { color: #ff9900; }
.blue { color: #0000fe; }
.red { color: #ff0000; }
/*--------------------------------------------------------------------*/
h1 {
	font-size: 180%;
	line-height: 200%;
}
h2 {
	font-size: 150%;
	line-height: 150%;
}
h3 {
	font-size: 120%;
	line-height: 120%;
}
.small { font-size: 75%; }
.regular { font-size: 90%; }
.large { font-size: 120%; }
/*--------------------------------------------------------------------*/

header {
	position: relative;
	height: 112px;
	background: blue url("img/titleback.jpg") no-repeat left center;
	color: #fff;
}
	header div.copy {
		position: absolute;
		bottom: 0;
		right: 30px;
	}
.wrap {
	min-height: calc(100vh - 242px);/*headerとfooterの高さ分マイナス*/

	display: flex;
	justify-content: space-between;
}
	nav {
		width: 200px;/*nav横幅固定*/
		height: 100%;
	}
		nav ul {
			list-style: none;
			margin: 1em;
			padding:0;
		}
		nav ul li {
			margin: 0 0 1em 0;
		}
			nav ul li.top {
				background: url("img/menu_top_s.jpg") no-repeat;
			}
			nav ul li.sisetu {
				background: url("img/menu_sisetu_s.jpg") no-repeat;
			}
			nav ul li.ryoukin {
				background: url("img/menu_ryoukin_s.jpg") no-repeat;
			}
			nav ul li.syokuji {
				background: url("img/menu_syokuji_s.jpg") no-repeat;
			}
			nav ul li.koutuu {
				background: url("img/menu_koutuu_s.jpg") no-repeat;
			}
			nav ul li.kankou {
				background: url("img/menu_kankou_s.jpg") no-repeat;
			}
			nav ul li.mail {
				background: url("img/menu_mail_s.jpg") no-repeat;
			}

				nav ul li.top a,
				nav ul li.sisetu a,
				nav ul li.ryoukin a,
				nav ul li.ryoukin a,
				nav ul li.syokuji a,
				nav ul li.koutuu a,
				nav ul li.kankou a,
				nav ul li.mail a {
					display: block;
				}
				nav ul li.top img,
				nav ul li.sisetu img,
				nav ul li.ryoukin img,
				nav ul li.ryoukin img,
				nav ul li.syokuji img,
				nav ul li.koutuu img,
				nav ul li.kankou img,
				nav ul li.mail img {
					border: none;
				}
				nav ul li.top a:hover,
				nav ul li.sisetu a:hover,
				nav ul li.ryoukin a:hover,
				nav ul li.syokuji a:hover,
				nav ul li.koutuu a:hover,
				nav ul li.kankou a:hover,
				nav ul li.mail a:hover {
					background: none;
				}
				nav ul li.top a:hover img,
				nav ul li.sisetu a:hover img,
				nav ul li.ryoukin a:hover img,
				nav ul li.syokuji a:hover img,
				nav ul li.koutuu a:hover img,
				nav ul li.kankou a:hover img,
				nav ul li.mail a:hover img {
					visibility: hidden;
				}

	section {
		width: 90%;
		margin:0;
		padding:0 0 2em 0;
	}
/* 各ページの背景指定-----------------------------------------------------------------------*/
		.con-top {
			background: url("img/bgimg03.jpg") right top no-repeat;
		}
		.con-sisetsu {
			background:url("img/bgimg04.jpg") right top repeat-y;
		}
		.con-ryokin {
			background:url("img/bgimg06.jpg") right top no-repeat fixed;
		}
		/*.con-syokuji {
			background:url("img/bgimg07.jpg") right top no-repeat fixed;
		}*/
		.con-map {
			background:url("img/bgimg06.jpg") right top no-repeat fixed;
		}
		.con-spot {
			background:url("img/bgimg07.jpg") right top repeat-y;
		}
		.con-form {
			background:url("img/bgimg08.jpg") right top no-repeat;
		}
/*---------------------------------------------------------------------------------------*/
footer {
	width: 100%;
	height: 130px;
	padding: 1em 0;
	box-sizing: border-box;
	background: blue;
	text-align: center;
	color: #fff;
}
	footer a,
	footer a:link,
	footer a:visited,
	footer a:active {
		color: white;
		text-decoration: none;
	}

/*========================================================================================
下層ページ
========================================================================================*/
		table {
			width: 40%;
			margin: 0;
			padding: 0;
			border-collapse: collapse;
			border: 1px solid #000;
		}
			table th {
				width: 25%;
				background: #ccffcc;
				font-weight: bold;
				border-right: 1px solid #000;
				border-bottom: 1px solid #000;
			}
			table td {
				padding: 15px;
				background: #fff;
				border-bottom: 1px solid #000;
			}
		.attention {
			width: 40%;
			margin: 0;
			padding: 1em;
			border: 1px solid #ccc;
			box-sizing: border-box;
			font-weight: bold;
			background: #fff;
		}
		table.ryokin {
			width: auto;
			margin: 0;
			padding: 0;
			font-size: 120%;
			text-align: right;
			border-collapse: collapse;
			border: 1px solid #000;
		}

.spot-frame {
	width: 50%;
	margin: 1em 0;

	display: flex;
	justify-content: space-between;
}
.spot-frame img {
	width: 400px;
	height: auto;
	margin-right: 3%;
}
	.spot-txt {
		width: 65%;
		color: #666;
	}

.flex-frame {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: stretch;
	align-content: flex-start;
}

.charges-frame {
	display: inline-block;
	max-width: 50%;
	padding: 1em;
	box-sizing: border-box;
	background: rgba(255,255,255,0.6);
}
	.charges-frame h2 {
		width: 100%;
		color: orange;
		text-shadow: 2px 1px 0 #000;
		font-weight: bold;
		padding-left: 13px;
		box-sizing: border-box;
		background: #fff;
		border-left: 8px solid blue;
	}
	.charges-frame .price-box {
		width: 90%;
		padding: 1em;
		margin: 1em auto;
		box-sizing: border-box;
		background: #fff;
		border: 1px solid #000;
		text-align: center;
		font-size: 120%;
	}
@media screen and (max-width: 796px) {
	.charges-frame {
		display: block;
		max-width: 100%;
	}
}