@charset "utf-8";


*{
  margin:0; padding:0;
}
img{
  border:0;
}

body {  
	font: 100% "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
	margin: 0; /* 複数の異なるブラウザの初期設定値に対応するため、body エレメントのマージンと余白を 0 にすることをお勧めします */
	padding: 0;
	text-align: center; /* これにより、IE 5* ブラウザではコンテナが中央揃えになります。そして、テキストは、#container セレクタの初期設定である左揃えに設定されます */
	color: #000000;
	background-color: #CDDEF3;
}
#container {  
	width: 800px;  /* ヘッダーイメージの800pxに合わせています。 */
	background: #FFFFFF;
	margin: 0 auto; /* 自動マージン（幅と連動）により、ページが中央揃えになります */
	border: 1px solid #000000;
	text-align: left; /* この設定は body エレメントの text-align: center より優先されます。 */
}
#header {  
	background: url(images/yoshida-logo_web.jpg) no-repeat;
	height: 87px;
	width: 800px;
	line-height: 1;
	color: #FFFFFF;
}
#header h1 {  
	margin: 0; /* #header div の最後のエレメントのマージンを 0 に設定することにより、マージンの相殺（div 間の原因不明のスペース）が回避されます。div の周囲に境界線が適用されている場合は、境界線によってマージンの相殺が回避されるため、この操作は不要です */
	padding: 0px; /* マージンの代わりに余白を使用して、エレメントを div の端に接触しない位置に維持することができます */
}

/* #head_menuは全ページに共通するメニューです。当初は６つに分けて定義します。 */
#head_menu{  
	display: block;
	padding-top: 1px;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 1px;
	margin: 0;
	
}
#head_menu:after{  
	clear: both;
	height: 0;
	display: block;
	visibility: hidden;
	
}
#head_menu ul *{  
	list-style-type:none;
	display:block;
	
}	
#head_menu ul li{  
	width:133px;
	height:31px;
	position:relative;
	float:left;
	
}
#head_menu ul li a{  
	width:133px;
	height:30px;
	text-align:center;
	color:#FFFFFF;
	line-height:30px;
	text-decoration:none;
	
}
#head_menu ul li a:hover{  
	color:#FFFFFF;
	text-decoration:none;
	
}
#head_menu ul li.off{  
	overflow:hidden;
	width:133px;
	
}
#head_menu ul li.on{  
	width:133px;
	
}
#head_menu ul>li.on{
	overflow:visible;/*×*/
	}

#head_menu ul li.a01 a{
  background:url(images/menu/a01.jpg) no-repeat;
}
#head_menu ul li.a01 a:hover{
  background:url(images/menu/a01_on.jpg) no-repeat;
}
#head_menu ul li.a02 a{
  background:url(images/menu/a02.jpg) no-repeat;
}
#head_menu ul li.a02 a:hover{
  background:url(images/menu/a02_on.jpg) no-repeat;
}
#head_menu ul li.a03 a{
  background:url(images/menu/a03.jpg) no-repeat;
}
#head_menu ul li.a03 a:hover{
  background:url(images/menu/a03_on.jpg) no-repeat;
}
#head_menu ul li.a04 a{
  background:url(images/menu/a04.jpg) no-repeat;
}
#head_menu ul li.a04 a:hover{
  background:url(images/menu/a04_on.jpg) no-repeat;
}
#head_menu ul li.a05 a{
  background:url(images/menu/a05.jpg) no-repeat;
}
#head_menu ul li.a05 a:hover{
  background:url(images/menu/a05_on.jpg) no-repeat;
}
#head_menu ul li.a06 a{
  background:url(images/menu/a06.jpg) no-repeat;
}
#head_menu ul li.a06 a:hover{
  background:url(images/menu/a06_on.jpg) no-repeat;
}

#mainContent {  
	background: #FFFFFF;
	padding-top: 40px;
	padding-right: 20px;
	padding-bottom: 0;
	padding-left: 20px;
}

/*トップコンテンツ内の「体験＆販売」部分
---------------------------------------------------------------------------*/
#top_contents {  
	float: left;
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 10px;
}
#top_contents a {  
	background-image:url(images/icon.gif);
	background-repeat: no-repeat;
	text-indent: 20px;
	background-position: left center;
	text-decoration:none;
	color: #333;
	padding-top: 3px;
       padding-left: 20px;
	padding-bottom: 3px;
}
#top_contents a:hover {  
	color:#F00;
	text-decoration:none;
	
}
#top_left {  
	float: left;
	width: 200px;
	border: 2px double #CCC;
	margin-left: 20px;
	margin-top: 20px;
}
#top_left a {  
	background-image:url(images/icon.gif);
	background-repeat: no-repeat;
	text-indent: 20px;
	background-position: left center;
	text-decoration:none;
	color: #333;
	padding-top: 3px;
	padding-bottom: 3px;
}
#top_left a:hover {  
	color:#F00;
	text-decoration:none;
	
}
#top_left1 {  
	width: 196px;
	margin-left: 2px;
	margin-top: 2px;
	padding-top: 4px;
	background-color: #09C;
	color: #FFF;
	text-align: center;
	padding-bottom: 4px;
}
#top_left2 {  
	width: 196px;
	margin-left: 2px;
	margin-top: 2px;
	padding-top: 3px;
	padding-bottom: 2px;
}
#top_left2 ul * {  
	list-style-type:none;
	display:block;
}
#top_left2 ul li {  
	width: 172px;
	border: 2px double #09C;
	padding-left: 20px;
}
/*トップコンテンツ内の「窯元紹介」部分
---------------------------------------------------------------------------*/
#top_right {  
	width: 540px;
	border: 2px double #CCC;
	margin-left: 236px;
	margin-top: 20px;

  float : right;
}
#top_right a {  
	background-image:url(images/icon.gif);
	background-repeat: no-repeat;
	text-indent: 20px;
	background-position: left center;
	text-decoration:none;
	color: #333;
	padding-top: 3px;
	padding-bottom: 3px;
}
#top_right a:hover {  
	color:#F00;
	text-decoration:none;
}
#top_right1 {  
	width: 536px;
	margin-left: 2px;
	margin-top: 2px;
	padding-top: 4px;
	background-color: #09C;
	color: #FFF;
	text-align: center;
	padding-bottom: 4px;

}
#top_right2 {  
	width: 170px;
	margin-left: 2px;
	margin-top: 2px;
	padding-top: 3px;
	padding-bottom: 2px;
	position: absolute;
}
#top_right2 ul * {  
	list-style-type:none;
	display:block;
}
#top_right2 ul li {  
	width: 150px;
	border: 2px double #09C;
	padding-left: 20px;
	position: absolute;
}
#top_right3 {  
	width: 170px;
	margin-left: 183px;
	margin-top: 2px;
	padding-top: 3px;
	padding-bottom: 2px;
	position: absolute;
}
#top_right3 ul * {  
	list-style-type:none;
	display:block;
}
#top_right3 ul li {  
	width: 150px;
	border: 2px double #09C;
	padding-left: 20px;
}
#top_right4 {  
	width: 170px;
	margin-left: 364px;
	margin-top: 2px;
	padding-top: 3px;
	padding-bottom: 2px;
}
#top_right4 ul * {  
	list-style-type:none;
	display:block;
}
#top_right4 ul li {  
	width: 150px;
	border: 2px double #09C;
	padding-left: 20px;
}

#top_news {  
	width: 500px;
	margin-left: 20px;
	margin-top: 20px;
}
/*トップコンテンツ内の「新着情報・お知らせ」部分
---------------------------------------------------------------------------*/
#top_news dl.new {  
	height: 80px;
	overflow: auto;
	margin-left: auto;
	padding: 10px;
	margin-bottom: 20px;
	border: 2px solid #CCC;
}

#top_news dt {  
	font-weight: bold;
	font-size: 12px;
}

#top_news dd {  
	border-bottom: 1px solid #999;
	font-size: 14px;
}
/*トップコンテンツ内の「リンクバーナー」部分
---------------------------------------------------------------------------*/
#top_banner {  
	width: 240px;
	margin-left: 540px;
	margin-top: 20px;
	position: absolute;
}

/* #other_はホームと窯元紹介以外のページ共通です。
---------------------------------------------------------------------------*/
#other_index {  
	height: 30px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #09F;
	text-align: left;
}
#other_index a {  
	color: #ff3333;
}
#other_index a:hover {  
	color: #09C;
}
#other_main {  
	width: 748px;
	margin-top: 10px;
	border: 1px solid #356FAE;
	padding: 5px;
	margin-bottom: 10px;
}
.subtitle {  
	height: 20px;
	font-size: 16px;
	padding: 5px;
	text-align: left;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 5px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #356FAE;
	border-right-color: #356FAE;
	border-bottom-color: #356FAE;
	border-left-color: #356FAE;
	margin-top: 10px;
}
.contents {  
	padding: 5px;
	border: 1px solid #ccc;
	margin: 2px;
	text-align: left;
}
.contents_shouhin {  
	padding: 5px;
	border: 1px solid #ccc;
	text-align: left;
	margin: 2px;
}
.contents_shouhin img {  
	padding: 2px;
	border: 1px solid #ccc;
}

/*窯元紹介コンテンツ内の「メニュー」部分
---------------------------------------------------------------------------*/
/*サイド（メニュー）*/
#kama_side {  
	float: left;
	width: 150px;
	color: #FFFFFF;
	background-color: #356FAE;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 50px;
	padding-left: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
}

#kama_side p {  
	padding-top: 5px;
	padding-bottom: 5px;
	font-size: 90%;
}

#kama_side a {  
	color: #FFFFFF;
}

#kama_side li {  
	margin-bottom: 10px;
}

#kama_side .menu a {  
	width: 135px;
	color: #FFFFFF;
	text-decoration: none;
	padding-left: 10px;
	display: block;
	border-bottom-width: 1px;
	border-left-width: 5px;
	border-bottom-style: dotted;
	border-left-style: solid;
	border-bottom-color: #FFFFFF;
	border-left-color: #FFFFFF;
}

#kama_side .menu a:hover {  
	border-left: 5px solid #FF0000;
	background-color: #69F;
}

/*窯元紹介コンテンツ内の「コンテンツ」部分
---------------------------------------------------------------------------*/
#kama_main {  
	float: right;
	width: 570px;
	margin-top: 10px;
	border: 1px solid #CCC;
	padding: 5px;
	margin-bottom: 10px;
	font-size : 14px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
}
#kama_index {  
	float: right;
	width: 570px;
	margin-top: 10px;
	border: 1px solid #356FAE;
	padding: 5px;
	text-align: center;
	color: #FFF;
	background-color: #356FAE;
}


/* フッター情報 
---------------------------------------------------------------------------*/
#footer {  
	clear: both;
	text-align: center;
	font-size : 10px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
	color: #FFF;
	background-color: #356FAE;
	padding: 10px;
}
#footer p {  
	margin: 0; /* フッターの最初のエレメントのマージンを 0 に設定することにより、マージンの相殺（div 間のスペース）が回避されます */
	padding: 0; /* このエレメントの余白により、マージンの相殺を発生させることなく、マージンの効果とまったく同じように、スペースが設定されます */
}