@charset "Shift_JIS";
/*
!!!!!!!!!!!!!!!!!!!!!!!!!!! CAUTION for Opera !!!!!!!!!!!!!!!!!!!!!!!!!!
@charset宣言の前に文字があると、最初のセレクタが反映されない。
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
*/

/*
*****************************************************
CSS skin settings
FileName:	style_muraki_common.css
Version:	2006/01/18
*****************************************************
*/


/* ####################### common ####################### */
/* ----------------------- anything ----------------------- */
* {
	line-height: 1.1;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}


/* ----------------------- anchor link ----------------------- */
a {
	color: #303050;
}

a:link {
	text-decoration: none;
	color: #303050;
}

a:visited {
	text-decoration: none;
	color: #303050;
}

a:hover {
	text-decoration: underline;
	color: #F03050;
}


/* ----------------------- img ----------------------- */
img {
	border: 0px solid #000000;
}


/* ----------------------- list tag ----------------------- */
ul, ol, li {
	list-style-type: disc;
}


/* ----------------------- definition tag ----------------------- */
dl, dt, dd {
	list-style-type: disc;
}


/* ----------------------- header tag ----------------------- */
h1, h2, h3, h4, h5, h6 {
	font-weight: bold;
	white-space: nowrap;
}


/* ----------------------- body and main class ----------------------- */
html {
	width: 100%;
	height: 100%;
}

body {
/* !CAUTION! */
	width: 100%;
/* ! end CAUTION end ! */
	height: 100%;
	color: #303050;
	background-color: #FFFFFF;
	text-align: left;
	background-image: url(../img/title002_02.gif);
	background-repeat: no-repeat;
	background-position: right top;
	font-family: "MS UI Gothic", Osaka, monospace;
	font-size: 100%;
	padding: 0px 5px 5px 5px;
/* !CAUTION! */
	margin: 0px;
/* ! end CAUTION end ! */
}
/*
!!!!!!!!!!!!!!!!!!!!!!!!!!! CAUTION for Firefox !!!!!!!!!!!!!!!!!!!!!!!!!!
Firefoxのためにbodyに widthj: 100%; を設定してはならない。
？？？
他の設定との兼ね合いで
横スクロールバーが表示されるという問題が発生する場合がある。
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
*/
/*
!!!!!!!!!!!!!!!!!!!!!!!!!!! CAUTION for Firefox !!!!!!!!!!!!!!!!!!!!!!!!!!
Firefoxのためにbodyに margin: 0px; を設定してはならない。
？？？
他の設定との兼ね合いで
横スクロールバーが表示されるという問題が発生する場合がある。
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
*/

/* $ TIPS $ */
html > body {
	max-width: 100%;
	min-width: 860px;
}
/* $ end TIPS end $ */
/*
$$$$$$$$$$$$$$$$$$$$$$$$$$$ TIPS for Firefox and Netscape $$$$$$$$$$$$$$$$$$$$$$$$$$$$
FirefoxとNetscapeのために html>body セレクタが必要。
body直下にheaderやfooterを置くと表示が崩れる。
（勝手に不要な縦スクロールバーが表示される。）
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
*/

#frame {
	width: 100%;
/* !CAUTION!
	height: 100%;
*/
}
/*
!!!!!!!!!!!!!!!!!!!!!!!!!!! CAUTION for Firefox and Mozilla !!!!!!!!!!!!!!!!!!!!!!!!!!
FirefoxとMozillaのために全コンテンツを包括する要素（div#frame）が必要。
body直下にheaderやfooterを置くと表示が崩れる。
（勝手に不要な縦スクロールバーが表示される。）
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
*/
/*
!!!!!!!!!!!!!!!!!!!!!!!!!!! CAUTION for Opera !!!!!!!!!!!!!!!!!!!!!!!!!!
Operaのために height: 100%; など高さ指定を行なってはならない。
画面外に余白が生まれ表示が乱れる。
（無意味な縦横スクロールバーが表示される。）
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
*/
/* ####################### END common END ####################### */


/* ####################### setting ####################### */
/* ======================= parts (class or id) setting ======================= */
/* ----------------------- header ----------------------- */
#header {
	width: 100%;
	height: 72px;
	border: 0px solid #000000;
	border-left: 0px solid #B03050;
	border-bottom: 1px solid #000000;
	margin: 0px 0px 8px 0px;
	background-image: url(../img/title002_01.gif);
	background-repeat: no-repeat;
	background-position: 1px 6px;
}
/* ----------------------- END header END ----------------------- */


/* ----------------------- main menu ----------------------- */
#mainMenu {
	width: 100%;
	height: 33px;
	border: 0px solid #000000;
	display: block;
}

#mainMenu ul {
	width: 100%;
	height: 33px;
	display: block;
	padding: 0px 10px 0px 10px;
	white-space: nowrap;
	background-image: url(../img/mainmenu001_08.gif);
	background-repeat: repeat-x;
	background-position: 0px 0px;
}

#mainMenu li {
	height: 33px;
	width: 100px;
	list-style-type: none;
	display: inline;
	overflow: hidden;
}

#mainMenu li a {
	float: left;
	height: 33px;
	width: 100px;
	text-decoration: none;
	padding: 0px 0px 0px 0px;
	font-size: 0px;
	line-height: 0px;
	display: block;
	overflow: hidden;
	margin: 0px 0px 0px 0px;
	background-position: 0px 0px;
	background-repeat: no-repeat;
}

#mainMenu li a:link,
#mainMenu li a:visited {
	color: #FFFFFF;
}

#mainMenu li a:hover {
	color: #FFFFFF;
	background-position: 0px -33px;
}

#mainMenu li a#mainMenuIndex {
	background-image: url(../img/mainmenu001_01.gif);
}

#mainMenu li a#mainMenuShop {
	background-image: url(../img/mainmenu001_02.gif);
}

#mainMenu li a#mainMenuProducts {
	background-image: url(../img/mainmenu001_03.gif);
}

#mainMenu li a#mainMenuVineyard {
	background-image: url(../img/mainmenu001_04.gif);
}

#mainMenu li a#mainMenuMarch03 {
	background-image: url(../img/mainmenu001_05.gif);
}

#mainMenu li a#mainMenuBooks {
	background-image: url(../img/mainmenu001_05_02.gif);
}

#mainMenu li a#mainMenuMap {
	background-image: url(../img/mainmenu001_06.gif);
}

#mainMenu li a#mainMenuLink {
	background-image: url(../img/mainmenu001_07.gif);
}

#siteNavi {
	width: 100%;
	text-align: left;
	margin: 8px 0px 7px 0px;
	padding: 0px 0px 0px 10px;
	white-space: nowrap;
	font-size: 13px;
	line-height: 13px;
	white-space: nowrap;
	letter-spacing: 0.1em;
}
/* ----------------------- END main menu END ----------------------- */


/* ----------------------- main Content area ----------------------- */
#mainContent {
	width: 100%;
	display: block;
/* !CAUTION!
	height: 100%;
	max-height: 100%;
	min-height: 450px;
*/
}
/*
!!!!!!!!!!!!!!!!!!!!!!!!!!! CAUTION for Opera & Firefox !!!!!!!!!!!!!!!!!!!!!!!!!!
OperaとFirefoxのために height, max-height, min-height の設定しない。
設定すると .mainContent の高さが固定になり途中に #footer が被る。
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
*/


/* ....................... content ....................... */
.container {
	float: right;
	width: 100%;
/* $ TIPS $ */
	max-width: 100%;
	min-width: 550px;
/* $ end TIPS end $ */
/* !CAUTION!
	height: 100%;
	max-height: 100%;
	min-height: 450px;
*/
/* $ TIPS $ */
	margin: 0px 0px 0px -185px; /* -185px is negative margin. */
/* $ end TIPS end $ */
}
/*
$$$$$$$$$$$$$$$$$$$$$$$$$$$ TIPS for Opera $$$$$$$$$$$$$$$$$$$$$$$$$$
Operaのために max-width, min-width の設定を行なう。
これで float が意図した通りに並び、リキッドレイアウトも保たれる。
（ないと #content と #subMenu が上下に並ぶ。）
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
*/
/*
!!!!!!!!!!!!!!!!!!!!!!!!!!! CAUTION for Opera & Firefox !!!!!!!!!!!!!!!!!!!!!!!!!!
OperaとFirefoxのために height, max-height, min-height を設定しない。
設定すると .container の高さが固定になり途中に #footer が被る。
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
*/

.content {
/* !CAUTION!
	width: 100%;
*/
	max-width: 100%;
	min-width: 550px;
/* !CAUTION!
	float: right;
*/
/* $ TIPS $ */
	margin: 0px 0px 0px 185px; /* 185px is anti-margin for negative margin. */
/* $ end TIPS end $ */
/* !CAUTION!
	height: 100%;
	max-height: 100%;
	min-height: 450px;
*/
}
/*
!!!!!!!!!!!!!!!!!!!!!!!!!!! CAUTION for Opera & Firefox !!!!!!!!!!!!!!!!!!!!!!!!!!
OperaとFirefoxのために width: 100%; を設定しない。
設定すると横スクロールバーが表示される。
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
*/
/*
!!!!!!!!!!!!!!!!!!!!!!!!!!! CAUTION for IE !!!!!!!!!!!!!!!!!!!!!!!!!!
IEのために float: right; の設定はしない。
IEは内包した要素の幅に合わせるため、文章が少ないなどで幅が狭いと
包んだ要素を float: right; しているため、
メニューは左端、コンテンツは右端に寄り、中央に空白が生まれてしまう。
これで float が意図した通りに並び、リキッドレイアウトも保たれる。
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
*/
/*
!!!!!!!!!!!!!!!!!!!!!!!!!!! CAUTION for Firefox !!!!!!!!!!!!!!!!!!!!!!!!!!
Firefoxのために height, max-height, min-height を設定しない。
設定すると .content の高さが低い時に #footer が押し下げられて
不要な縦スクロールバーが表示される。
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
*/

/*
??????????????????????? TIPS : negative margin ???????????????????????
段組でリキッドレイアウトを行なうための設定。
実際の内容である要素（div.content1）を
包括する要素（div.container）でマージン指定するのがキモ。
??????????????????????????????????????????????????????????????????????
*/
/* ....................... END content END ....................... */


/* ....................... submenu ....................... */
#subMenu {
	float: left;
	width: 162px;
/* !CAUTION!
	height: 100%;
/* !CAUTION!
	max-height: 100%;
/* ! end CAUTION end !*/
	min-height: 450px;
	border: 0px solid #000000;
	border-left: 1px solid #CCCCCC;
	border-right: 1px solid #CCCCCC;
	border-bottom: 1px solid #CCCCCC;
	background-color: #EEEEEE;
	font-size: 13px;
	line-height: 1em;
}
/*
!!!!!!!!!!!!!!!!!!!!!!!!!!! CAUTION for Opera & Firefox !!!!!!!!!!!!!!!!!!!!!!!!!!
OperaとFirefoxのために height, max-height は設定しない。
min-height は指定しても問題ない。
設定すると #subMenu の高さが固定になり途中に #footer が被る。
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
*/

#subMenu ul {
	width: 160px;
/* !CAUTION!
	height: 100%;
	max-height: 100%;
	min-height: 450px;
/* ! end CAUTION end !*/
	display: block;
	white-space: nowrap;
	font-size: 13px;
	line-height: 1em;
/* $ TIPS $ */
	margin: 0px 0px 200% 0px;
/* $ end TIPS end $ */
}
/*
!!!!!!!!!!!!!!!!!!!!!!!!!!! CAUTION for Firefox & Netscape & Opera !!!!!!!!!!!!!!!!!!!!!!!!!!
FirefoxとNetscapeのために height は設定しない。
Operaのために max-height と min-height は指定しない。
設定すると #subMenu の高さが固定になり途中に #footer が被る。
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
*/
/*
$$$$$$$$$$$$$$$$$$$$$$$$$$$ TIPS for IE $$$$$$$$$$$$$$$$$$$$$$$$$$
IEのために margin-bottom: 200%; の設定を行なう。
mainContent, subMenu で height: 100%; を設定すると
#footer がコンテンツに被るため、 ul の下マージンを設定することで
被りを回避しつつIEので #subMenu の高さを確保するため。
ないと #subMenu が li の数だけの高さしか得られない。
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
*/

#subMenu li {
	width: 160px;
	height: 31px;
	list-style-type: none;
	border: 0px solid #000000;
	border-top: 1px solid #CCCCCC;
	border-bottom: 1px solid #CCCCCC;
	display: block;
	overflow: hidden;
}

#subMenu li a {
	width: 153px;
	height: 19px;
	border-left: 5px solid #888888;
	padding: 4px 0px 0px 4px;
	margin: 5px 0px 5px 7px;
	text-decoration: none;
	font-weight: bold;
	text-align: left;
	display: block;
	letter-spacing: -0.04em;
}

#subMenu li a:link,
#subMenu li a:visited {
	color: #505070;
}

#subMenu li a:hover {
	color: #D03050;
	border-left: 5px solid #FF6666;
	background-color: #FFF0F6;
}
/* ....................... END submenu END ....................... */
/* ----------------------- END main content area END ----------------------- */


/* ----------------------- footer ----------------------- */
#footer{
	clear: both;
/* $ TIPS $ */
	float: left;
/* $ end TIPS end $ */
	width: 100%;
	max-width: 100%;
	min-width: 860px;
	height: 30px;
	background-color: #DEDEA9;
	border: 0px solid #000000;
	border-top: 1px solid #D0D080;
	border-bottom: 1px solid #D0D080;
	text-align: center;
	padding: 6px 10px 0px 10px;
	margin: 8px 0px 8px 0px;
	white-space: nowrap;
	overflow: hidden;
}
/*
$$$$$$$$$$$$$$$$$$$$$$$$$$$ TIPS for Netscape $$$$$$$$$$$$$$$$$$$$$$$$$$
NNのために float の設定を行なう。
#subMenu の高さが .content より高くて（メニュー項目が多い時）
これで #footer と #subMenu の間に設定されたマージンを生かすため。
（ないと #footer と #subMenu の間のマージンが無視される。）
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
*/

#contactUs {
	float: left;
	text-align: left;
	height: 12px;
	font-size: 12px;
	font-weight: bold;
	line-height: 1em;
	background-image: url(../img/icon001.gif);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	padding: 0px 0px 0px 25px;
	white-space: nowrap;
}

#hyouji {
	float: right;
	text-align: left;
	height: 12px;
	font-size: 12px;
	font-weight: bold;
	line-height: 1em;
	background-repeat: no-repeat;
	background-position: 0px 0px;
	padding: 1px 0px 0px 0px;
	white-space: nowrap;
}

a#contactUs:link,
a#contactUs:visited {
	text-decoration: none;
}

a#contactUs:hover {
	text-decoration: none;
	background-position: 0px -13px;
}

#statement {
	float: right;
	height: 13px;
	text-align: right;
	font-size: 12px;
	font-weight: bold;
	background-image: url(../img/icon002.gif);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	padding: 0px 0px 0px 15px;
	white-space: nowrap;
	line-height: 1em;
}

a#statement:link,
a#statement:visited {
	text-decoration: none;
}

a#statement:hover {
	text-decoration: none;
	background-position: 0px -13px;
}

#copyright {
	text-align: center;
	font-size: 12px;
	font-weight: normal;
	white-space: nowrap;
	line-height: 1em;
}
/* ----------------------- END footer END ----------------------- */
/* ======================= END parts (class or id) setting END ======================= */


/* ======================= tag setting ======================= */
h2 {
	width: 100%;
	max-width: 100%;
	min-width: 550px;
	font-size: 100%;
	line-height: 1.5em;
	border: 0px solid #000000;
	border-left: 5px solid #B03050;
	border-bottom: 1px solid #000000;
	margin: 0px 0px 10px 0px;
	padding: 5px 0px 2px 18px;
	letter-spacing: 0.2ex;
	white-space: nowrap;
}

h3 {
	font-size: 90%;
	line-height: 1em;
	border: 0px solid #000000;
	border-left: 3px solid #B03050;
	margin: 8px 0px 10px 0px;
	padding: 0px 0px 0px 13px;
	letter-spacing: 0.2ex;
	white-space: nowrap;
}

div.pack {
	border-top: 1px solid #FFFFFF;
}

p {
	font-size: 90%;
	font-weight: normal;
	line-height: 1.6em;
	text-indent: 2ex;
	letter-spacing: 0.06ex;
	padding: 0px 13px 20px 0px;
	min-width: 200px;
}

em {
	font-weight: bold;
	font-style: normal;
}

em a:link,
em a:visited,
em a:hover {
	color: #D03050;
}

.container img {
	border: 1px solid #DDDDDD;
	margin: 5px 13px 5px 0px;
}

.container ul {
	margin: 0px 0px 0px 40px;
}

.container li {
	font-size: 90%;
/* !CAUTION! */
	margin: 0px 0px 10px 0px;
/* ! end CAUTION end ! */
}
/*
!!!!!!!!!!!!!!!!!!!!!!!!!!! CAUTION for Netscape !!!!!!!!!!!!!!!!!!!!!!!!!!
Netscapeのために margin-bottom は設定しない。
設定すると #footer の位置に影響が出る場合がある。
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
*/

/* $ TIPS $ */
.container li + li {
	margin: 10px 0px 0px 0px;
}
/* $ end TIPS end $ */
/*
$$$$$$$$$$$$$$$$$$$$$$$$$$$ TIPS for Opera $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
Operaのために li+li を設定する。
この設定でリスト間のマージンを空けられる。
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
*/

.container li .linkName {
	font-weight: bold;
	line-height: 1.8em;
}

.container li .linkURL {
	font-weight: normal;
	line-height: 1em;
}

.container dl {
	margin: 0px 0px 0px 23px;
}

.container dt {
	font-size: 90%;
	font-weight: bold;
	line-height: 1.5em;
}

.container dd {
	font-size: 90%;
	font-weight: normal;
	line-height: 1.5em;
	margin: 0px 0px 10px 0px;
	padding: 0px 0px 0px 2.2ex;
}
/* ======================= END tag setting END ======================= */
/* ####################### END setting END ####################### */


/* ----------------------- class setting ----------------------- */

.floatLeft {
	float: left;
	clear: both;
}

.floatRight {
	float: right;
	clear: both;
}

.imgMargin {
	margin-left: 335px;
	list-style: inside;
}

.imgMargin230 {
	margin-left: 230px;
	list-style: inside;
}

.nowrap {
	white-space: nowrap;
}

.behind {
	visibility: hidden;
}

.note {
	font-size: 0.8em;
	font-weight: normal;
}

.thin {
	font-size: 0.8em;
	font-weight: normal;
} 

.bold {
	font-weight: bold;
}

.smallerFont {
	font-size: 0.8em;
} 

.clear {
	clear: both;
}

.mapzoom {
	height: 15px;
	background-image: url(../img/icon003.gif);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	padding: 2px 0px 0px 20px;
	text-indent: 0ex;
	margin: 0px;
	font-size: 13px;
	font-weight: bold;
	line-height: 1em;
}

.return {
	height: 15px;
	background-image: url(../img/icon004.gif);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	padding: 3px 0px 0px 28px;
	text-indent: 0ex;
	margin: 0px;
	font-size: 13px;
	font-weight: bold;
	line-height: 1em;
}
/* ----------------------- END class setting END----------------------- */
