@charset "UTF-8";
/* CSS Document FOR TEPPEI ORGANICS */

/* IE 6 PNG FIX */
img, div { behavior: url(misc/iepngfix.htc) }


body{
	font: 12px/17px "Lucida Grande", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Geneva, Arial, Verdana, sans-serif;
	background-image:url(images/011.jpg);
	background-repeat:repeat-x;
	background-color:#FFF;
	text-align: center;
	}

a{
	color:#0077CC;
	text-decoration:none;
	}
a:hover{
	text-decoration:underline;
	}

img { border:0;}

table, td, p, div {
	margin:auto;
	}

* {margin:0; padding:0;}

/*---------------------------
	BASE　(ALL) 　　
---------------------------*/

#container930 {
width:930px;
text-align:center;
}

/* --  
#bg-shadow930{
	width:930px;
	background:url(images/bg-shadow.png);
	background-repeat:repeat-y;
	}

#bg-shadow-end{
	width:930px;
	height: 30px;
	background:url(images/bg-shadow_btm.png);
	background-repeat:no-repeat;
	}
---*/
/*-------------------------------------
	Header　
-------------------------------------*/
#header-jp {
	margin-top:15px;
	padding: 0;
	background-color: transparent;
	display:block;
	width: 900px;
	height:140px;
	background-image:url(images/bg-header-j_s1.gif);
	background-repeat:no-repeat;
	background-position:top;
}

#header-en {
	width: 900px;
	height:170px;
	padding-top: 15px;
	background-color: transparent;
	background-image: url(images/bg-header-en.gif);
	background-repeat: no-repeat;
}

#teppei-brandmark { 
margin-left: 15px; 
display:block; width:260px; 
height:140px; 
float:left; 
text-align:left;}

#intl-link  { 
display:block; 
width:250px; 
height:55px;  
margin: 0; 
float:right; 
text-align:right;}

/*-------------------------------------
CONTAINER OF NAVI /  maincontents /FOOTER
-------------------------------------*/

#body900 {
clear:both; /* This CLEARs the Header float*/
width:900px;
text-align:center;
background-color:#FFF;
border-left: 1px solid #CCC;
border-right: 1px solid #CCC;

}

/*-------------------------------------
 # Navi will be in pdw.css
-------------------------------------*/

/*-------------------------------------
	Toppage-left box TABLE elements　
-------------------------------------*/
#maincontents {
	clear:both; /* This CLEARs the navigation float*/
	width:900px;
	text-align:left;
	margin: 0; padding: 0;}
	
	
/*-------------------------------------
	Toppage-left box TABLE elements　
-------------------------------------*/
#top-main {background-image:url(images/sub_content_title_bg.gif);
background-repeat:repeat-x;
background-position:top left;
display:block; height: 45px;}

#top-contents1 { 
width:665px;  
height: 300px;
background-color:#9C9;
background-image: url(images/top-main-01.jpg);
background-repeat: no-repeat;
}

#top-contents2 { 
width:665px;  
height: 200px;
vertical-align:top;
background-color:#E4DBC8;
background-image: url(images/top-main-02.jpg);
	background-repeat: no-repeat;}
	
/*-------------------------------------
	Toppage- NEWS 900 IMAGE;
-------------------------------------*/	
#imglink {margin:0; padding: 0}
#imglink a:hover{text-decoration:none;}

/*-------------------------------------
	Toppage- NEWS AREA ELEMENTS
(900px - padding 10 x 6 - margin 15 x 4 - border 1 x 6　) / 3 =　258
Footer elementes takes care of clear:both;
-------------------------------------*/
#top-news{display:block; 
width:258px; height: 120px;
padding: 10px; 
margin: 15px 7px 15px 15px;
border: 1px solid #ccc;
background-color:#FFF;
float:left;
font-size: 11px;
}

#top-news ul{
	margin:0; padding:0;
	list-style-type:none;}
	
#top-news li{
	background-image:url(images/dot-thin.gif);
	background-repeat: repeat-x;
	background-position:bottom;
	}

#top-news li a{
	display:block;
	text-decoration:none;
	padding: 0 0 5px 15px;
	margin-top:5px;
	background:url(images/top-news-li.gif) no-repeat 0px 5px;
	}	

#top-news li a:hover{
	text-decoration: underline;
} 


/*--  	Toppage- NEWS 2   ---*/

#top-news2 {display:block; 
width:258px; height: 120px;
padding: 10px; 
margin: 15px 8px;
border: 1px solid #ccc;
background-color:#FFF;
float:left; 
font-size: 11px;
}

/*--  	Toppage- NEWS 3   ---*/

#top-news3 {display:block; 
width:258px; height: 120px;
padding: 10px; 
margin: 15px 15px 15px 7px;
border: 1px solid #ccc;
background-color:#FFF;
float:left; 
}

/*-------------------------------------
	Footer Elementes　
-------------------------------------*/
#footer{
	clear:both; /* This CLEARs the Main Conotents float   */
	width:100%;
	height: auto;
	background:url(images/bg-footer.gif);
	background-color:#9C6B3A;
	text-align:center;
}

#footer a{
	color:#723E0C;
	text-decoration:none;
	}
#footer a:hover{
	color:#069;
	text-decoration:underline;
	}
	
#copy{
	text-align:left;
	color:#723E0C;
	float: left;
	margin: 15px 0 15px 15px;
	}
#copy2{
	text-align:right;
	color:#723E0C;
	float: right;
	margin: 15px 15px 15px 0;
	}
	

	

/*--------------------------------------------------------
	Sub-Content Design Elementes　
	
	Layout, Dot Lines
------------------------------------------------------*/

#sub_content_dot_ver {background-image:url(images/dot-tate.gif);
background-position:right;
background-repeat:repeat-y;
z-index: 10000;
}

#sub_content_dot_hor {background-image:url(images/dot-yoko.gif);
background-position:bottom;
background-repeat:repeat-x;
}

#sub_content_title {
	background-image:url(images/sub_content_title_bg.gif);
	background-position:top;
	background-repeat:repeat-x;
	display:block;
	padding: 15px 0 15px 15px;
	font-size:21px;
	font-weight:bold;
}


/*-------------------------------------
	Sub / Left Menu　
-------------------------------------*/

#left_menu {
	margin:0; padding:0;
	width: 200px; 
	list-style-type:none;
}

#left_menu p{
	height:10px;
 	}

/* this elements are for thin lines in left menu */
#left_menu li{
	background-image:url(images/dot-thin.gif);
	background-repeat: repeat-x;
	background-position:bottom;
	}


/* mouse-over in left menu */
#left_menu li a{
	display:block;
	text-decoration:none;
	padding: 10px 0 10px 30px;
	background:url(images/arrow-leftnavi.gif) no-repeat 15px 10px;
	}	

#left_menu li a:hover{
	background-position: -185px 10px;
	text-decoration: underline;
} 


.left_comment{display:block; width:180; margin:10px;}

/*-------------------------------------
	Sub / Main Content
-------------------------------------*/

/* Right TD ID, back-ground 
background-image:url(images/sub_content_agave_bg.jpg);
background-repeat:no-repeat;
	background-position:bottom;
	
	*/
#sub_main {
	padding: 15px 29px 20px 29px;
	text-align: left;}

/* Actual Main Content  */

.sub_main_img_mgn {margin-bottom:20px;}
.leftcolumn {width: 300px; float:left;}
.rightcolumn {width: 300px; float:right;}

#centercolum_dot td{
	
	padding:10px 0;
	background-image:url(images/dot-yoko.gif);
	background-repeat: repeat-x;
	background-position:bottom;
	vertical-align:top;
	}

.img_left {float:left; margin: 0 29px 20px 0;}
.img_right {float:right; margin: 0 0 20px 29px;}


/*-----------------------------
	Mail Form　
---------------------------*/
#inquiry td {padding: 7px 3px;}


/*-----------------------------
	ABOUT US   COMPANY INFO
---------------------------*/

#company_main { 
	background-image: url(../images/04company.jpg) ;
	background-repeat:no-repeat; 
	background-position:top left;
	padding: 0;
	text-align: left;}
	
table.company{
	float:left;
    border-top:1px solid #CCC;
    border-left:1px solid #CCC;
    border-collapse:collapse;
    border-spacing:0;
    background-color:#ffffff;
    empty-cells:show;
	margin: 15px 0;
}
.company th{
	border-right:1px solid #CCC;
	border-bottom:1px solid #CCC;
	padding:0.3em 1em;
	text-align:center;
	font-size:15px;
	font-weight: bold;
	color:#000;
}
.company td{
    border-right:1px solid #CCC;
    border-bottom:1px solid #CCC;
    padding:0.3em 1em;
}

#business {
	list-style:square;
	display: block;
	text-decoration:none;
	padding: 5px 0 0 5px;
	list-style-position: inside;
}

/*-----------------------------
	PRODUCTS
---------------------------*/

	
table.product{
	float:left;
    border-top:1px solid #CCC;
    border-left:1px solid #CCC;
    border-collapse:collapse;
    border-spacing:0;
    empty-cells:show;
	margin-bottom: 20px;
	
}
.product td{
    border-right:1px solid #CCC;
    border-bottom:1px solid #CCC;
	background-color:#FFFFDD;
    padding:0.5em;
}

ul.product {
	list-style:square;
	display: block;
	text-decoration:none;
	list-style-position: outside;
	margin: 10px 0 10px 20px;
}

.product_import{display:block;
font-size:16px;
color:#390;
font-weight:bold;
width:640px;
padding: 15px 0 7px 0;
border-bottom:dotted 2px #390;
margin-bottom: 15px;}

table.productprice{
	float:left;
    border-top:1px solid #CCC;
    border-left:1px solid #CCC;
    border-collapse:collapse;
    border-spacing:0;
    empty-cells:show;
	margin-bottom: 20px;
	
}
.productprice td{
    border-right:1px solid #CCC;
    border-bottom:1px solid #CCC;
	background-color:#FFF;
    padding:0.5em;
}


/*-----------------------------
	Design Elementes　
---------------------------*/

.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both; height:0;
}

	
/*-----------------------------
	BUY 
---------------------------*/

.buybuttom


/*-----------------------------
	Font Elementes　
---------------------------*/

body, td, p { font: 12px/18px "Lucida Grande", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック",  "Lucida Sans Unicode", Arial, Verdana, sans-serif; background-color:#fff; color:#333; }

#maincontents p { margin-bottom: 21px; }
#maincontents p.quote { color:#333; font-size: 16px; line-height: 21px; padding:42px 0 0 42px; text-indent:-0.39em; }
#maincontents p.attri { color:#666666; font-size: 11px; line-height:15px; padding:0 0 20px 40px; }

#maincontents h1 {
	color: #390;
	font-weight: bold;
	font-size: 18px;
	line-height: 24px;
	margin-bottom: 16px;
}
#maincontents h1 span {color:#666;}
#maincontents h2 { color:#000; font-weight: bold; font-size: 16px; line-height: 21px; margin-bottom: 16px; }
#maincontents h3 { color:#666; font-weight: bold; font-size: 14px; line-height:1.5em; margin-bottom: 5px; }
#maincontents h4 { color:#000; font-weight: bold; font-size: 10px;  }
#maincontents p.intro { color:#333; font-size:16px; font-weight:normal; line-height:21px; margin-bottom: 30px;}


.more { text-align: right;}
a.more {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(images/arrow_more.gif) no-repeat scroll 100% 50%;
padding-right:10px;
white-space:nowrap;
}

.emp-clr {color: #FF0E00;} /*--  Emphasis Color   --*/
.gray {color: #A6A6A6;}

.txt-sm {
	font-size: 0.9em;}

.gray {color: #A6A6A6;}
.green {color: #390;}

ol {argin-left: 20px;}

strong, b { font-weight: bold; }
em, i { font-style: italic; }

/*TOP LINK */

#startselling a{
	display:block;
	height:60px;
	margin: 0;
	padding: 0;
	background-image:url(../images/start.gif);
	background-position:top;
	background-repeat:no-repeat;
	color: #FFF;
	font-size:24px;
	font-weight: bold;
	text-align: center;
}
#startselling a:hover {
	background-image:url(../images/start_f2.gif);
}


/*CHECKOUT */
.checkout {
	display:block;
	width:auto;
	padding: 10px;
	background-color:#EBEBEB;
	font-size: 14px;
	text-align:left;
	font-weight: bold;
	margin: 10px 0 20px 0;
	color: #000;
}

#nittsulink a{
	display:block;
	margin: 0;
	padding: 10px 0;
	background-color:#1845C2;
	color: #FFF;
	font-size:18px;
	font-weight: bold;
	text-align: center;
}
#nittsulink a:hover {
	background-color:#09C;
}



/* iPhone iTouch */
@media screen and (max-device-width: 480px) { html { -webkit-text-size-adjust: none; } }