@charset "utf-8";
/* CSS Document */

html {
	overflow-y: scroll; /* ★常にスクロールバーを出しておく。*/
}
body {
	color: #696969;
}
a {
	color: #696969;
	text-decoration: none;
}
a:hover {
	color: #999;
	text-decoration: underline;
}
#container {
	margin: 0px auto;
	width: 750px;
	background: #dad8b6 repeat-y;
	background-image: linear-gradient(90deg, #6c0a0a 0px, #721b1a 75px, #4f0506 250px);
	background-size: 250px 1px;
	line-height: 1.5;
}
#header {
	background: #222;
	padding: 10px 20px;
	min-height: 70px;
}
#header #logo {
	float: left;
	width: 200px;
}
#header #utility {
	text-align: right;
}
#header #utility ul li {
	display: inline;
	padding: 2px 0px 2px 20px;
	margin-left: 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 75%;
}
#header #utility ul .contact {
	background: url(../images/113_asaba_images/icon_mail.svg) no-repeat left center;
}
#header #utility ul .sitemap {
	background: url(../images/113_asaba_images/icon_sitemap.svg) no-repeat left center;
}
#header #utility p {
	font-size: 87.5%;
	padding-top: 5px;
}
#sidebar {
	width: 217px;
	padding-left: 23px; /* ★各子要素でpaddingをかけなくてもよいように、親要素でpaddingをもうける。*/
	clear: left;
	float: left;
	overflow: hidden;
}
#sidebar #nav {
	margin-bottom: 4px;
	margin-left: 17px;
}
#sidebar #nav li {
	width: 170px;
	border-top: 1px solid rgba(255, 255, 255, 0.2); /* ★透明度：20% */
	border-bottom: 1px solid rgba(0, 0, 0, 0.4); /* ★透明度：40% */
}
#sidebar #nav li:first-child {
	border-top: none;
}
#sidebar #nav li:last-child {
	border-bottom: none;
}
#sidebar #nav li a {
	line-height: 40px;
	display: block;
	font-family: "Times New Roman", Times, serif;
	color: #fff;
	background: url(../images/113_asaba_images/icon_ornament.png) no-repeat left center;
	padding-left: 20px;
	text-shadow: 3px 3px 3px #000; /* ★水平, 垂直, (影のぼかし半径), 色の指定 */
	letter-spacing: 0.1em;
}
#sidebar #nav li a:hover {
	background: url(../images/113_asaba_images/icon_ornament_on.png) no-repeat left center;
	color: #c28a58;
	text-decoration: none;
	text-shadow: 0 0 10px #e3cc2f; /* ★位置をずらさずその場にshadowを入れることで光彩効果。*/
}
/* ★ナビゲーション用のカレント設定 */
#home #nav .home a,
#about #nav .nav1 a,
#guestroom #nav .nav2 a,
#restaurant #nav .nav3 a,
#wedding #nav .nav4 a,
#spa #nav .nav5 a {
	color: #c28a58;
}
#sidebar #reservation {
	width: 204px;
	margin-bottom: 20px;
	padding-bottom: 10px;
	background: #b3aeaf;
	background-image: linear-gradient(90deg, #bdbbbb 0%, #d4d4d2 6%, #b3aeaf 100%);
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 4px 4px 3px rgba(0, 0, 0, 0.4); /* ★水平, 垂直, ぼかし距離, 広がり距離, 色の指定 */
}
#sidebar #reservation h2 {
	background: #191919; /* 古いブラウザ向けに補助的に指定 */
	background: rgba(25, 25, 25, 0.65);
	padding: 8px 15px;
	line-height: 1;
	color: #d0cecf;
}
#sidebar #reservation h2 span {
	display: block;
	font-size: 75%;
	color: #8c8b8c;
	font-family: "Arial Black", Gadget, sans-serif;
}
#sidebar #reservation dl {
	padding: 10px 15px;
}
#sidebar #reservation dl dt {
	font-size: 87.5%;
	margin-top: 5px;
	margin-bottom: 5px;
	padding-left: 5px;
	border-left: 3px solid #721a19;
}
#sidebar #reservation p {
	text-align: right;
	padding-right: 15px;
}
#sidebar #reservation p input {
	padding: 2px 5px;
	font-size: 75%;
}
.txtInput {
	padding: 3px 0px;
	width: 170px;
}
#sidebar #banners li {
	margin-bottom: 15px;
}
#home #contents {
	width: 500px;
	padding: 0;
}
/* 下層ページ */
#contents {
	float: right;
	width: 420px;
	padding: 14px 40px;
}
#contents h2 {
	color: #6b0808;
	background: url(../images/113_asaba_images/icon_ornament.png) no-repeat left center;
	margin-bottom: 6px;
	padding-left: 20px;
}
#contents h2 span {
	font-size: 75%;
	font-weight: 500;
	color: #696969;
}
#home #contents p {
	margin: 0;
}
#contents p {
	margin: 10px;
	font-size: 87.5%;
}
#footer {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 75%;
	background: #222 url(../images/113_asaba_images/footer_logo.gif) no-repeat 591px center;
	padding: 15px 20px;
	clear: both;
}
#footer ul {
	margin-bottom: 5px;
}
#footer ul li {
	display: inline;
}
#footer ul li+li::before {
	content: " | ";
}
/* ★フッター用のカレント設定 */
#home #footer .home a,
#about #footer .nav1 a,
#guestroom #footer .nav2 a,
#restaurant #footer .nav3 a,
#wedding #footer .nav4 a,
#spa #footer .nav5 a,
#contact .contact a,
#sitemap .sitemap a {
	color: #999;
	text-decoration: underline;
}
.img-responsive {
	width: 100%;
	max-width: 100%;
	height: auto;
}