/* CSS Document */

/*___________________________________________
Project:株式会社京食

社名:     株式会社クレヨン
Email:    info@crayon.co.jp
Website:  www.crayon.co.jp
____________________________________________*/

/* common
____________________________________________*/

*{
	margin:0;
	padding:0;
	list-style:none;
}

body{
	font-size:12px;
	line-height:140%;
	font-family:ＭＳ Ｐゴシック, Osaka, ヒラギノ角ゴ Pro W3;
	color:#000;
	background:url(../image/n_bg.jpg);
	background-position:center;
}

img{
	border:0;
}

h1{
	margin:0 auto;
	width:768px;
	height:24px;
	line-height:24px;
	font-weight:normal;
	font-size:12px;
	text-align:center;
}
a{
	text-decoration:none;
}
.clear{
	clear:both !important;
	width:0 !important;
	line-height:0 !important;
	height:0 !important;
	margin:0 !important;
	padding:0 !important;
	font-size:0 !important;
	overflow:hidden !important;
	background:none !important;
}
.ico_buttom{
	width:468px;
	margin-top:-5px;
	margin-bottom:15px;
	text-align:right;
	clear:both;
	display:block;
}
.top{
	width:468px;
	text-align:center;
	color:#000;
	height:20px;
	padding-top:10px;
	border-top:1px #ff4107 solid;
}
.top a{
	color:#000;
}
.top a:hover{
	color:#ff4107;
}
/* head
____________________________________________*/

#head{
	margin:0 auto;
	width:768px;
	height:234px;
	border-bottom:6px #bfbfbf solid;
}

/* main
____________________________________________*/

#main{
	margin:0 auto;
	padding-top:15px;
	width:768px;
	background:url(../image/main_bg.gif) repeat-y 180px 0;	
}
#menu{
	width:180px;
	text-align:center;
	float:left;
}
#menu ul{
	width:151px;
	margin:0 auto;
	margin-bottom:15px;
}
#menu ul li{
	height:32px;
	line-height:36px;
	background:url(../image/menu_bg.gif) no-repeat left top;
	overflow:hidden;
}
#menu ul li a{
	width:151px;
	height:32px;
	color:#000;
	display:block;
}
#menu ul li a:hover{
	color:#7f3106;
}
/* index content
_____________________________________*/
#content,
#gree_content,
#recr_content,
#reci_content,
#prod_content{
	margin-bottom:30px;
	width:528px;
	text-align:left;
	float:right;
}
#content{
	margin-bottom:0 !important;
}
#content h2{
	height:30px;
	line-height:30px;
	font-weight:normal;
	font-size:24px;
	text-align:left;
}

#content h3{
	margin-top:20px;
	width:468px;
	height:24px;
	line-height:24px;
	font-weight:normal;
	text-align:center;
	font-size:15px;
	background:url(../image/index_h2bg.gif) no-repeat;
}
/* scoll area 
____________________________*/
.h3_content {
	margin-top:6px;
	width:468px;
	height:144px;
	background:#dfdfdf;
	overflow:hidden;
}

.h3_content .top{
	position:absolute;
	top:0;
	height:15px;
	width:450px;
	background:#dfdfdf;	
}
.h3_content .bottom{
	position:absolute;
	top:129px;
	width:450px;
	height:15px;
	background:#dfdfdf;	
}

.h3_content .scoll_area{
	width:468px;
	height:161px;
	overflow:scroll;
	background:#dfdfdf;
}
.h3_content .scoll_area .content{
    margin:15px;
}

/* recr.html
_____________________________________________*/
.recr_content_h2{
	margin-top:15px;
	height:25px;
	padding-left:5px;
	font-size:15px;
	font-weight:normal;
	line-height:25px;
	background:url(../image/title_bg2.gif) no-repeat;
}
#recr_content p{
	padding:10px 0;
	width:468px;
	border-bottom:2px #ffff00 solid; 
}
#recr_content dl{
	margin-top:10px;
	width:468px;
	line-height:18px;
}
#recr_content dt{float:left;width:60px;}
#recr_content dd{width:400px;float:right;}


/* index_gree.html index_reci.html index_prod.html
_____________________________________________________________*/

#gree_content h2,
#reci_content h2,
#prod_content h2,
#recr_content h2{
	margin-top:15px;
	width:468px;
	height:26px;
	line-height:26px;
	font-size:25px;
	border-bottom:1px #9f9f9f solid;
}
.reci_top_icon{
	display:block;
	width:458px;
	margin:0;
	padding-bottom:5px;
	
}
.reci_top_icon p{
	float:left;
	margin:0;
	padding:0;
}
.reci_top_icon img{
	padding-top:20px;
	float:right;
}
#reci_content h2 img,
#gree_content h2 img,
#prod_content h2 img,
#recr_content h2 img{
	float:right;
	margin-top:3px;
}
.list_title{
	height:70px;
}

.list_title a,
.list_title1 a,
.list_title2 a{
	color:#000;
}

.list_title a:hover,
.list_title1 a:hover,
.list_title2 a:hover{
	color:#ff7f00;
}

.list_title li,
.list_title2 li{	
	line-height:19px;
	margin-top:10px;
}
.list_title li,
.list_title1 li,
.list_title2 li{
	padding-left:14px;
	width:100px;
	font-size:15px;
	background:url(../image/ico01.gif) no-repeat 0 3px;
	float:left;
}
.list_title2 li{
	width:215px;
}
.list_title2 .ico04{/*---prod.html----*/
	background:url(../image/ico04.gif) no-repeat 0 3px;
}
.list_title1{
	margin-top:10px;
}
.list_title1 li{
	margin-bottom:10px;
	width:160px;
	background:url(../image/ico03.gif) no-repeat 0 1px;
	line-height:100%;
}
.list_title1 .li{
	width:420px;
}
#reci_content dl a{
	color:#000;
}
#reci_content dl a:hover{
	color:#ff7f00;
}
#reci_content dl dd{
	width:219px;
	background:url(../image/reci_smbol.gif) no-repeat 0 5px;
	padding-left:15px;
	float:left;
	font-size:15px;
	line-height:24px;

}
#reci_content dl dt{
	clear:both;
	line-height:24px;
	margin:10px 0;
	width:453px;
	font-size:15px;
	background:url(../image/reci_smbol2.gif) no-repeat 0 5px;
	border-top:1px #7f3106 solid;
	border-bottom:1px #7f3106 dashed;
	padding-left:15px;
}
#reci_content .clear{
	height:20px!important;
}
#gree_content h3,
#reci_content h3,
#prod_content h3{
	height:24px;
	width:468px;
	font-size:15px;
	font-weight:normal;
	line-height:24px;
	background:url(../image/title_bg1.gif) no-repeat;
	padding-left:0.05em;
	clear:both;	
}

/*  prod.html
____________________________________________*/
#prod_content h3{
	margin-top:15px;
	color:#000;
	background:url(../image/title_bg4.gif) no-repeat;
}

#prod_content .chang_bg{
	background:url(../image/title_bg1.gif) no-repeat !important;
}
#prod_content .chang_bg1{
	background:url(../image/title_bg5.gif) no-repeat !important;
}
.prod_h3_intro{
	width:468px;
	margin:10px 0 30px 0;
}
.prod_banner,.cooking_banner{
	width:468px;
	height:481px;
	clear:both;
}
.prod_banner{
	background:url(../image/prod_banner.jpg) no-repeat;
}
.cooking_banner{
	background:url(../image/cooking_banner.jpg) no-repeat;
	margin-top:10px;
}
.prod_banner{
	font-size:14px;
	font-weight:bold;
	line-height:150%;
	letter-spacing:2px;
	margin-top:30px;
	}
.prod_banner_h3{
	color:#13007C;
	padding:10px 0;
	font-weight:bold;
	text-align:center;
	width:468px;
	font-size:13pt
	}
.prod_banner_div{
	padding-top:185px;
	padding-left:10px;
	width:300px;
}
.prod_banner_title{
	padding-top:80px;
	padding-left:30px;
	width:440px;
	}
.prod_h3_intro dd{
	display:block;
	padding-bottom:10px;
}
.prod_h3_intro p{
	width:215px;
	line-height:20px;
}
.prod_h3_intro img{
	float:right;
	clear:both;
}
.prod_h3_ol{
	margin-top:15px;
	width:468px;
	overflow:hidden;
}
.prod_h3_ol li{
	margin-right:15px;
	width:146px;
	float:left;
	text-align:center;
}
.prod_h3_ol .margin_clear{
	margin-right:0 !important;
}

.prod_h3_ol dt{
	font-size:15px;
}
#prod_content .list_titles{
	font-size:15px;
}
#prod_content .list_titles h3{
	margin-bottom:5px;
	color:#ff0000;
	font-weight:bold;
	font-size:18px;
	padding-left:18px;
	background:url(../image/pro_1.gif) no-repeat 0 3px;
}
#prod_content .list_titles .h3{
	background:url(../image/prod_ico1.gif) no-repeat 0 3px;
}
#prod_content .list_titles ul{
	padding-left:15px;
	background:url(../image/list_title.gif) no-repeat 0 3px;
}
#prod_content .list_titles .ul{
	padding-left:15px;
	background:url(../image/list_title1.gif) no-repeat 0 3px;
}
#prod_content .list_titles ul li{
	height:24px;
}
#prod_content .list_titles ul li a{
	color:#000;
}
#prod_content .list_titles ul li a:hover{
	color:#ff0000;
}
#prod_content .pro_01{
	width:468px;
}
#prod_content .pro_01 p{
	margin:10px auto;
}
#prod_content .pro_04{
	width:468px;
}
#prod_content .pro_04 dl,
#prod_content .pro_04 dd{
	clear:both;
	margin-top:5px;
}
#prod_content .pro_04 dd span{
	display:block;
	font-size:18px;
	font-weight:bold;
	line-height:24px;
	margin-bottom:29px;
}
#prod_content .pro_04 .ddd{
	float:left;
	width:150px;
}
#prod_content .pro_04 .dd{
	width:300px;
	margin-left:170px;
	clear:none;
}
#prod_content .pro_05{
	width:468px;
}
#prod_content .pro_05 h4{
	margin:0;
	padding:0;
}
#prod_content .pro_05 p img{
	margin:20px auto;
}
#prod_content .pro_05 div{
	padding:5px;
	border-left:1px #b2b2b2 solid;
	border-right:1px #b2b2b2 solid;
}
#prod_content .pro_05 .v1{
	margin-top:-5px;;
	background:#fff2e6;
}
#prod_content .pro_05 .v2{
	text-align:center;
	background:#ffe5cc;
}
#prod_content .pro_05 em,
#prod_content .pro_07 em{
	font-style:normal;
	color:#ff0000;
}
#prod_content .pro_05 .v3,
#prod_content .pro_07 .v1{
	padding-left:2px;
	background:#ffbf80;
	border-bottom:1px #b2b2b2 solid;
}
#prod_content .pro_06,
#prod_content .pro_066,
#prod_content .pro_006{
	margin:10px 0 30px 0;
	width:468px;
	height:40px;
	padding-top:6px;
	background:url(../image/pro_06_1.gif) no-repeat;	
}
#prod_content .pro_006{
	padding-top:16px;
}
#prod_content .pro_066{
	background:url(../image/pro_06_11.gif) no-repeat;
}
#prod_content .list_title3{
	margin-bottom:-10px;
	color:#ff0000;
	font-weight:bold;
	padding-left:18px;
	font-size:18px;
	background:url(../image/pro_1_2.gif) no-repeat 0 3px;
}
#prod_content .pro_07{
	width:468px;
	margin-top:10px;
}

#prod_content .pro_07 ul{
	margin-top:-5px;
	width:466px;
	background:#fff2e6;
	border:1px #b2b2b2 solid;
	border-top:none;
	border-bottom:none;
}
#prod_content .pro_07 ul li{
	margin-bottom:10px;
	padding:5px;
}
#prod_content .pro_07 ul .li{
	margin-bottom:0px;
}
#prod_content .pro_07 ul li span{
	color:#ff0000;
}
#prod_content .pro_07 .big{
	font-size:24px;
	font-weight:bold;
}
#prod_content .pro_07 .small{
	font-size:6px;
	font-weight:normal;
	letter-spacing:0.1em;
}
/* reci.html
_____________________________________________*/
#reci_content ol{
	width:448px;
}
#reci_content ol li{
	list-style:decimal;
	color:#7F3106;
	margin-left:22px;
}
#reci_content ol li p{
	color:#000;
	margin:0;
}
#reci_content h3{
	color:#fff;
	background:url(../image/title_bg3.gif) no-repeat;
}

#reci_content p{
	margin-top:10px;
	margin-bottom:40px;
}
#reci_content h4{
	margin-top:30px;
	width:468px;
	font-size:15px;
	line-height:22px;
	font-weight:normal;
	border-top:1px #7f3106 solid;
	background:url(../image/reci_line2.gif) no-repeat left bottom;
}
#reci_content h4 span{
	float:right;
	color:#7f3106;
	display:inline;
}
.reci_h3_intro{
	margin-top:15px;
	width:468px;
}
.reci_h3_intro dl{
	width:165px;
	float:right;
}
.reci_h3_intro dl dt,.prod_h3_intro dt{
	color:#ff7f00;
}

.reci_h3_intro p{
	margin-top:5px;
	color:#7f3106;
	line-height:16px;
}

.reci_h3_intro p img{
	padding-right:5px;
	float:left;
}

.reci_linebg{
	background:url(../image/reci_line1.gif) no-repeat 25px 10px;
}
/* gree.html
________________________________________*/
#gree_content h3{
	margin-top:8px;
	font-weight:bold;
}
.list_content{
	margin:10px 0;
	font-size:12px;
	line-height:18px;
}
.list_content li{
	margin:10px 0;
}
.list_content dd{
	padding-left:5px;
}
.position{
	width:468px;
}
.position dl{
	clear:both;
}
.position dt{
	float:left;
	font-weight:bold;
	width:100px;
	margin-top:10px;
	clear:both;
}
.position .dd{
	float:right;
	margin-top:10px;
}
.position dd{
	width:360px;
	float:right;
	clear:right;
}

/*info.html
----------------------------------------*/	
.subBox{
     width:469px;
	 font-size:12px;
	 margin:10px 0 0px 0px;
	 height:320px;
}

.subBox ul{
	display:block;
	height:280px;
	width:100%;
	clear:both;
	float:left;
}

.subBox ul li{
	list-style-type:none;
	float:left;
	clear:both;
	height:30px;
	padding-bottom:2px;
	display:block;
	width:469px;
}
.boxTitle{
	clear:both;
	padding:2px;
	text-align:left;
	line-height:2em;
}
.lp, .lp1{
	background:#ececec;
    width:142px;
	text-align:left;
	float:left;
	height:30px;
	line-height:30px;
	padding-left:10px;
	margin:0;
}
.lp1{

	height:60px;
	padding-top:15px;
}
.rp, .rp1{
    width:310px;
	float:right;
	text-align:left;
	background:#ececec;
	height:26px;
	padding-top:4px;
	padding-left:5px;	
}
.rp1{
	height:73px;
	padding-top:2px;
}
.rp1 textarea{
	width:280px;
	height:65px;
}
.btnBox{
	clear:both;
	margin-top:5px;
	text-align:center;
	float:left;
	width:100%;
}
.btnBox input{
	margin:0 15px 0 15px;
}
.clearBox{
	height:0;
	clear:both;
	background:none;
	font-size:0;
	line-height:0;
	border:0 none;
}	
.info_title{
	background:no-repeat center;
	height:52px;
	width:499px;
	border-bottom:2px solid #980065;
	background:url(../image/info_title.jpg) no-repeat left top;
	margin-top:5px;
}

/* index_news
_____________________________________________*/
.newsPage{
	height:136px;
	overflow:auto;
	overflow-y:scroll;
	overflow-x:visible;
	width:464px;
	padding:4px 0 4px 4px;
	line-height:150%;
}

.newsPage ul{
	margin:0;
	padding:0;
}

.newsPage li{
	list-style-position:outside;
	list-style-type:none;
	background-position:2px 1px;
	clear:both;
	margin-bottom:4px;
	line-height:130%;
	background:url(../img/qp.jpg) no-repeat;
	background-position:0 3px;
}

.newstitle{
	line-height:100%;
}

li.newscontent{
	clear:both;
	margin-bottom:8px;
	background:none;
}

.i_cms{
	width:100%;
	clear:both;
	position:relative;
	height:44px;
}

.fll{
	float:left;
}

.LoginBox{
	position:absolute;
	height:100px;
	width:180px;
	border:1px solid #666666;
	background:#fff;
	left:250px;
	top:60px;
	z-index:100000;
	padding-left:5px;
}
.hform{
	margin:0;
	padding:0;
	clear:both;
}
.LoginInput{
	float:right;
	border:1px solid #666;
	width:100px;
	height:16px;
	padding:2px 0 0 2px;
}
.EnterButton{
	clear:both;
	width:100%;
	text-align:center;
}
.EnterButton input{
	margin:0 auto;
	margin-top:5px;
}
.LoginBox_close{
	width:165px;
	height:25px;
	text-align:right;
}
.LoginBox_text{
	width:165px;
	height:25px;
}
.LoginBox_text span{
	color:#333;
	width:30px;
	font-size:12px;
	font-weight:bold;
	float:left;
	line-height:120%;
}
.LoginBox_botton{
	width:165px;
	height:25px;
	text-align:center;
}

.LoginBox_show{
	width:51px;
	height:30px;
	position:absolute;
	left:228px;
	top:0px;
	z-index:100;
	background:url(images/nt.jpg);
	background-position:150px 0px;
}

.cms_bu{
	position:absolute;
	left:330px;
	top:20px;
	width:60px;
	height:24px;
	background:url(../image/index_h2bg.gif) no-repeat;
	background-position:330px top;
}
.oran_color{
	color:#FF7F00;
}
.o_c{
	color:#7F3106;
}
/* footer
_____________________________________________*/

#footer{
    margin:0 auto;
	height:100px;
	width:768px;
	clear:both;
}
.copyright{
	height:30px;
	text-align:center;
	color:#fff;
	line-height:30px;
	background:#3f3f3f;
	clear:both;
}
#footer ul{
	margin:0 auto;
	width:475px;
}
#footer ul li{
	line-height:30px;
	float:left;
}
#footer ul li a{
	color:#000;
}
#footer ul li a:hover{
	text-decoration:underline;
}
.pppic{
	margin-top:5px;
	width:468px;
}
.pppic span{
	margin-top:30px;
	width:200px;
	display:block;
	margin-left:165px;	
}
.pppic .img{
	float:left;
}