@charset "utf-8";



/* -------------------------------------------------------------



   Theme Name: CSS coding contest 01                              

   Version: 1.0

   Latest update: 2007/04/22                                                 

   Description: For CSS coding contest 01 "Coder's High" participation.

   Author: Yoshiko Utsunoiya                                    

   Theme URI: http://pea-nuts.org/                              



   Checked and valided by W3C(R) Validator.                     

   http://jigsaw.w3.org/css-validator/                          



 -------------------------------------------------------------- */



/* -------------------------------------------------------------



   1：基本構造

   2：ベースレイアウト  各ページ共通

   3：コンテンツレイアウト

   4：問合せフォーム

   5：サイドバーレイアウト



 -------------------------------------------------------------- */





/* 1：基本構造------------------------------------------------- */

body {

	margin: 0 0 10px 0;

	font-size: 75%;

	font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3" ,Verdana, Arial, Helvetica, sans-serif;

	text-align: center;

	}



img {

	border: 0;

	}

	

a {

	color: #006699;

	}



a:hover {

	text-decoration: none;

	}



p {

	margin: 0;

	padding: 7px 0;

	line-height: 130%;

	}



h2 {

	font-size: 100%;

	margin: 0 0 15px 0;

	padding: 0 0 2px 0;

	border-bottom: 2px solid #ddd;

	}



h3 {

	font-size: 100%;

	margin: 0;

	}

	

address {

	background: #0271B4;

	color: #fefefe;

	font-style: normal;

	padding: 5px;

	letter-spacing: 1px;

	}

	

span {

	color: #999477;

	font-family: Tahoma, Arial, Helvetica, sans-serif;

	font-size: 80%;

	font-weight: normal;

	letter-spacing: 1px;

	}



input, textarea {

	border: 1px solid #7F9DB9;

	margin: 0;

	padding:0;

	}



form {

	margin: 0;

	}



/* 2：ベースレイアウト  各ページ共通--------------------------- */

/* 見出し */

h1 {

	width: 249px;

	height: 88px;

	background: url(images/title.gif) left top no-repeat;

	position: absolute;

	left: 50%;

	top: 0;

	margin: 0 0 0 -442px;

	padding: 0;

	z-index: 1;

	text-indent:-9999px;

	}



h1 a{

	width: 249px;

	height: 88px;

	display:block;

}



#wrapper {

	width: 800px;

	margin: auto;

	text-align: left;

	}



#description {

	font-size: 90%;

	font-weight: normal;

	text-align: right;

	margin: 0;

	height: 19px;

	line-height: 150%;

	}



#menu {

	height: 20px;

	text-align: right;

	}



/* ヘッダーナビゲーションメニュー */

#header_navi {

	background: url(images/navi_bg.gif) left top repeat-x;

	}



#header_navi ul li {

	display: block;

	float: left;

	width: 98px;

	height: 54px;

	list-style: none;

	margin: 0;

	padding: 0;

	}



#header_navi ul li a {

	display: block;

	width: 98px;

	height: 54px;

	overflow: hidden;

	}



#header_navi ul li a:hover {

	display: block;

	width: 98px;

	height: 54px;

	background: url(images/navi_hover.gif) 1px 100% no-repeat;

	}



/* ページメイン */

#main {

	background: url(images/main_bg.gif) left top repeat-y;

	margin-bottom: 10px;

	}

	

#contents {

	margin-left: 210px;

	padding: 20px 0 0 20px;

	}



/* フッター設定 */

#footer {		

	clear: both;

	background: #fff url(images/footer_bg.jpg) left top repeat-x;

	font-size: 90%;

	text-align: center;

	}



#footer_navi {

	padding: 15px;

	}



#rss {

	margin: 0 0 0 513px;

	text-indent: -9999px;

	}



#rss a {

	width: 54px;

	height: 14px;

	display: block;

	text-decoration: none;

	background: url(images/rss.gif) left top no-repeat;

	overflow: hidden;

	}



/* トップに戻る */

.to_top {

	clear: both;

	text-align: right;

	margin: 0;

	}

	

/* 3：コンテンツレイアウト------------------------------------- */

/* コンテンツ内リスト */

#contents ul {

	margin: 0;

	padding: 0 0 0 18px;

	line-height: 200%;

	}



#contents ul li {

	list-style: none;

	margin: 0;

	padding: 0 10px;

	background: url(images/point.gif) 0 10px no-repeat;

	}



/* コンテンツ内画像 */

#contents a img {

	border: 2px solid #333;

	}



#contents a:hover img {

	border: 2px solid #86C8EF;

	}



/* パンくずリスト */

#breadcrumbs {

	font-size: 90%;

	background: url(images/breadcrumbs.gif) left top no-repeat;

	padding: 5px 10px;

	margin-bottom: 20px;

	}



/* 最新情報　トップページのみ*/

.container {

	display: block;

	width: 180px;

	height: 250px;

	float: left;

	background: url(images/container_bg.gif) left bottom no-repeat;

	margin: 5px 0 30px 7px;

	padding: 0;

	}



.container h3 {

	background: url(images/h3_bg.gif) left top no-repeat; 

	padding: 12px 15px 12px 30px;

	}



.container p {

	padding: 10px 10px 0 10px;

	font-size: 90%;

	line-height: 130%;

	}



/* 過去の記事一覧を見る */

#review {

	text-indent: -9999px;

	padding: 10px 0 20px 422px;

	margin-bottom: 20px;

	background: url(images/line.gif) left bottom repeat-x;

	}



#review a {

	text-decoration: none;

	width: 142px;

	height: 20px;

	display: block;

	background: url(images/review.gif) left top no-repeat;

	overflow: hidden;

	}



#review a:hover {

	text-decoration: none;

	background: url(images/review_hover.gif) left top no-repeat;

	}



/* 個別製品紹介 */

#product1 {

	padding: 0 3px;

	margin: 0;

	}



#product1 p {

	font-size: 98%;

	}



#product_body {

	width: 360px;

	float: left;

	margin: 0 5px 0 0;

	}



#product_body h3 {

	font-size: 120%;

	background: url(images/products_title.gif) left top no-repeat;

	font-weight: bold;

	padding: 8px 23px;

	margin: 0;

	}



/* 拡大・縮小指定 */

#button {

	text-indent: -9999px;

	padding: 10px 0 10px 416px;

	margin-bottom: 10px;

	background: url(images/line2.gif) right bottom no-repeat;

	}



#button a {

	text-decoration: none;

	width: 142px;

	height: 20px;

	display: block;

	background: url(images/review.gif) left top no-repeat;

	overflow: hidden;

	}



#button a:hover {

	text-decoration: none;

	background: url(images/review_hover.gif) left top no-repeat;

	}



/* 注文する */

#product_img p {

	text-align: right;

	margin: 0;

	padding: 0;

	}



#order {

	width: 191px;

	height: 31px;

	color: #ffe;

	background: url(images/order.gif);

	font-weight: bold;

	border: none;

	margin-right: 3px;

	}



/* 製品詳細 */

#product_detail {

	margin-top: 20px;

	}

	

table {

	font-size: 90%;

	line-height: 150%;

	margin: auto;

	background: url(images/price_bottom.gif) left bottom no-repeat;

	}



th {

	font-size: 110%;

	background: url(images/price_top.gif) left top no-repeat;

	color: #666;

	text-align: left;

	padding: 10px 0 5px 25px;

	letter-spacing: 1px;

	}



td {

	font-size: 100%;

	}



.td1 {

	width: 65px;

	padding: 2px;

	text-indent: -9999px;

	}



.td2 {

	padding: 2px 15px 2px 0;

	}



.td2_end {

	padding: 2px 15px 10px 0;

	}



td span {

	font-size: 100%;

	font-weight: bold;

	color: #333;

	}



#price {

	background: url(images/price.gif) 18px 3px no-repeat;

	}	



#material {

	background: url(images/material.gif) 17px 2px no-repeat;

	}	



#remarks {

	background: url(images/remarks.gif) 17px 3px no-repeat;

	}	



/* お客様の声 */

#product2 {

	padding: 0 3px 20px 3px;

	margin-bottom: 20px;

	background: url(images/line.gif) left bottom repeat-x;

	}



#product2 h4 {

	background: url(images/comment_top.gif) left top no-repeat;

	margin: 20px 0 0 0;

	padding: 12px 30px;

	font-size: 100%;

	color: #666;

	}



#comments_body {

	margin: 0;

	padding: 0 12px 10px 25px;

	background: url(images/comment_bottom.gif) left bottom no-repeat;

	}

	

#product2 h5 {

	font-size: 100%;

	margin: 0;

	}



#product2 .comments_name {

	font-size: 90%;

	}

	

/* 続きを読む */

#product2 .more{

	text-indent: -9999px;

	padding: 10px 0 0 436px;

	}



#product2 .more a {

	text-decoration: none;

	width: 87px;

	height: 20px;

	display: block;

	background: url(images/more.gif) left top no-repeat;

	overflow: hidden;

	}



#product2 .more a:hover {

	text-decoration: none;

	background: url(images/more_hover.gif) left top no-repeat;

	}



/* その他の製品紹介 */

#product3 {

	padding: 0 3px;

	}



#product3 .product_other_img {

	float: left;

	margin: 0 18px 12px 0;

	}



#product3 .product_other {

	padding: 0 2px 0 0;

	height: 114px;

	}



#product_other_view {

	font-size: 80%;

	text-indent: -9999px;

	padding: 10px 0 20px 448px;

	margin-bottom: 20px;

	background: url(images/line.gif) left bottom repeat-x;

	}	



#product_other_view a {

	text-decoration: none;

	width: 119px;

	height: 20px;

	display: block;

	background: url(images/all.gif) left top no-repeat;

	overflow: hidden;

	}



#product_other_view a:hover {

	text-decoration: none;

	background: url(images/all_hover.gif) left top no-repeat;

	}



/* 4：問合せフォーム---------------------------------------------- */

#form_title {

	background: url(images/form_title.gif) left bottom no-repeat;

	margin: 0 0 0 3px;

	padding: 10px 5px 15px 5px;

	}



fieldset {

	padding: 0 0 5px 0;

	margin: 0 3px 30px 3px;

	border: none;

	background: url(images/comment_bottom.gif) left bottom no-repeat;

	}



fieldset dl { 

	margin: 0; 

	padding: 4px 10px; 

	} 

fieldset dt { 

	margin: 0; 

	padding: 5px 0 0 2px; 

	width: 140px;

	} 

fieldset dd { 

	font-size: 90%; 

	margin: -22px 0 0 0; 

	padding: 6px 0 8px 140px;	

	border-top: 1px solid #ccc;

	} 



fieldset dt img {

	vertical-align: middle;

	border: none;

	}

	

fieldset .dd_top {

	border-top: 0;

	}



fieldset p {

	text-align: center;

	margin: 0;

	}



#preview {

	width: 110px;

	height: 31px;

	color: #ffe;

	background: url(images/submit.gif);

	font-weight: bold;

	border: none;

	}



/* 5：サイドバーレイアウト--------------------------------------- */

#sidebar {

	width: 210px;

	float: left;

	}

	

#sidebar img {

	border: 2px solid #ffe;

	}



#sidebar h2 {

	margin: 0;

	width: 210px;

	border: none;

	padding: 23px 0 12px 0;

	text-indent: 15px;

	}

	

#products_mene h2 {

	color: #ffe;

	background: url(images/products_menu.gif);

	}



#products_mene ul {

	margin: 0 5px 5px 5px;

	padding: 20px 10px 10px 10px;

	border: 1px solid #ccc;

	background: #fff url(images/products_menu_bg.gif) left top repeat-x;

	}



#products_mene ul li {

	width: 160px;

	height: 20px;

	display: block;

	list-style: none;

	border-bottom: 1px solid #ccc;

	padding: 5px 7px;

	line-height: 200%;

	text-indent: 20px;

	}



#products_mene ul li a {

	width: 160px;

	height: 20px;

	display: block;

	background: url(images/arrow.gif) 4px 5px no-repeat;

	}



#products_mene ul li a:hover {

	background: url(images/arrow_hover.gif) 4px 5px no-repeat;

	}

	

#other_survice h2 {

	background: url(images/survice_menu_bg.gif) left top no-repeat;

	}



#other_survice span {

	color: #666;

	}



#other_survice ul {

	margin: 0 5px 5px 5px;

	padding: 0;

	list-style: none;

	}



#other_survice ul li{

	margin: 0;

	padding: 0;

	}