@charset "utf-8";

/*---------------------------------------------
01. *, body
---------------------------------------------*/
*      { margin: 0px; padding: 0px; font-size: 100%; }
body   { height:100%; color: #555555; font-family: "ＭＳ Ｐゴシック", "MS PGothic", Arial, Helvetica, Verdana, sans-serif; text-align: left; background-color: #E1E1E1; }
hr     { display: none; }
img    { border: none; vertical-align: middle; }
sup, sub { font-size: 80%; background-color: #E1E1E1; }

a { overflow: hidden }
a:link            { color: #474786; text-decoration: underline; }
a:visited         { color: #555555; text-decoration: underline; }
a:hover, a:active { color: #474786; text-decoration: none; }
#wrap		{ width: 960px; height:auto; min-height:100%; background: url(../imgs/bg.jpg)  0 0 repeat; text-align: left; margin: 0 auto;}
/*---------------------------------------------
02. header
---------------------------------------------*/
#header         { width: 920px; height: 78px; margin: 0 0 0 20px; background: url(../imgs/header.jpg)  0 0 no-repeat; text-align: left;}
#headerLogo h1     { float: left; width: 255px; height: 45px; margin: 18px 0 0 26px; }
#search		{ float: right; width: 310px; margin: 25px 28px 0 0; text-align: right; font-size: 75%;}
#search input	{ margin: 2px 0 0 4px;}

/*---------------------------------------------
03. menu
---------------------------------------------*/
#menuArea{ clear: both; width: 920px; margin:  0 0 0 20px; height: 30px; background: url(../imgs/menu.jpg)  0 0;}
#menuArea ul{ padding: 0; margin: 0; list-style-type:none; }
#menuArea li{ float: left; padding: 0; margin: 0; text-indent:-9999px; }

#menuArea li a{ display: block; height: 30px; }

li.home a { width: 140px; background: url(../imgs/menu01.jpg)  0 0; }
li.home a:hover  { background: url(../imgs/menu01_on.jpg)  0 0; }
li.prod a { width: 130px; background: url(../imgs/menu02.jpg)  0 0; }
li.prod a:hover { background: url(../imgs/menu02_on.jpg)  0 0; }
li.print a { width: 130px; background: url(../imgs/menu03.jpg)  0 0; }
li.print a:hover  { background: url(../imgs/menu03_on.jpg)  0 0; }
li.dl a { width: 130px; background: url(../imgs/menu04.jpg)  0 0; }
li.dl a:hover  { background: url(../imgs/menu04_on.jpg)  0 0; }
li.com a { width: 130px; background: url(../imgs/menu05.jpg)  0 0; }
li.com a:hover  { background: url(../imgs/menu05_on.jpg)  0 0; }
li.con a { width: 130px; background: url(../imgs/menu06.jpg)  0 0; }
li.con a:hover  { background: url(../imgs/menu06_on.jpg)  0 0; }
li.qa a { width: 130px; background: url(../imgs/menu07.jpg)  0 0; }
li.qa a:hover  { background: url(../imgs/menu07_on.jpg)  0 0; }

/*---------------------------------------------
04. main
---------------------------------------------*/

#content { width: 920px; margin: 0 0 0 20px; padding: 0; text-align: left; }
.cl	{clear: both;}
#content h2 { width: 920px; height: 95px; padding: 0; margin: 0; background: url(../imgs/privecy_title.jpg) no-repeat left top; text-indent:-9999px;}
div#panli { margin: 10px 0 10px 20px;}
li.pan { display: inline; list-style-type:none; font-size: 75%; font-weight: bold;}
li.pan a { text-decoration: none; font-weight: normal;}
/*---------------------------------------------
04-01. 左メニュー
---------------------------------------------*/
#mainLeft { float: left; width: 240px; margin: 0px; padding: 0; text-align: center; }
#cate	{ width: 200px; margin: 0 auto 20px auto; padding: 0; border: 1px #ccc solid;}
#cate h3 { width: 198px; height: 23px; padding: 0; margin: 0; background: url(../imgs/info_t.jpg) no-repeat left top; text-indent:-9999px;}

*html body #cate ul { width: 198px; padding: 0; margin: 0; text-align: left;}
#cate ul { width: 198px; padding: 0; margin: 0; text-align: left; list-style: none;}

*html body #cate li { width: 198px; height: 30px; border-bottom: 1px dotted #CCC; padding: 0; margin: 0; background: url(../imgs/arrow.jpg) no-repeat 8px 0.75em;  list-style: none;}
#cate li { width: 198px; height:22px; border-bottom: 1px dotted #CCC; padding: 0; margin: 0; background: url(../imgs/arrow.jpg) 10px 25% no-repeat; padding-left:5px;}
*html body #cate li p { padding: 0; margin: 10px 0 0 30px; font-size: 75%; font-weight: bold; color: #474786;}
#cate li p { padding: 0; margin: 8px 0 0 30px; font-size: 75%; font-weight: bold; color: #474786;}
#cate li p a{ font-weight: normal;}
#fm{ width: 200px; padding: 0; margin: 10px auto;}

#apico{ width: 200px; height: 66px; padding: 0; margin: 10px auto;}
/*---------------------------------------------
04-2. カテゴリ一覧ページ
---------------------------------------------*/
#main { float: right; width: 666px; margin: 0px; padding: 0; text-align: left; }
#main h4 { width: 642px; height: 22px; padding: 0; margin: 0 0 5px 0; background: url(../products/imgs/h3_bg.jpg) no-repeat left top;}
#main h4  p{ padding: 0; margin: 4px 0 0 15px; color: #FFFFFF; font-weight: bold; font-size:75%;}
.cat{ width: 640px; padding: 0; margin: 0 0 15px 0;}
.line{ width: 600px; padding: 0; margin: 10px 5px 15px 5px; border-bottom: 1px dotted #CCC; font-size: 75%; line-height: 120%;}
.bb{font-weight: bold; color: #474786; margin: 0 0 5px 0;}
/*---------------------------------------------
04-3. カテゴリ大一覧ページ
---------------------------------------------*/
.cat2{ width: 640px; padding: 0; margin: 0 0 15px 0; border-bottom: 1px #ccc dotted; height: 100px;}
.cat2-l{ width: 100px; float:left; padding: 0; margin: 10px; text-align: center; border: 1px #ccc solid;}
.cat2-r{ width: 480px; float:right; padding: 0; margin: 10px; text-align: left;}
.scode	{ width: 450px; padding: 0; margin: 0 0 3px 0; font-size: 65%;}
ul.cnamelist	{ font-size: 75%; margin: 0; padding: 0; width: 450px;}
li.namelist	{ padding-left: 20px; background: url(../products/imgs/cate_arrow.jpg) no-repeat 0.2em 0.2em; margin: 0 0 5px 0; font-weight: bold; color: #414181;}
.prtxt	{ width: 450px; padding: 0; margin: 3px 0 5px 0; font-size: 75%;}
.price	{ width: 400px; height: 22px; padding: 0; margin: 0 0 3px 0; background: url(../products/imgs/price_bg.jpg) no-repeat 0 0; text-align: center;}
.price p{ font-size: 75%; padding: 0; margin: 5px 0 3px 0;}
.bbfont	{ font-weight: bold; color: #414181;}

.sbox { width: 640px; height: 26px; margin: 0 0 10px 0; padding: 0px; text-align: left; background-color: #F5F5F5; border: 1px #CCCCCC solid; }
.sboxLeft	{ float: left; width: 400px; margin:10px; font-weight: bold; font-size: 80%;}.sboxRight	{ float: right; width: 180px; margin: 5px; text-align: right; font-size: 80%;}
.orfont { font-weight: bold; color: #FF6600;}
.spage	{ width: 620px; margin: 0 0 10px 0; padding: 10px; font-size: 80%; text-align: right; word-spacing: 0.5em; font-weight: bold; border-bottom: dotted 1px #CCCCCC;}
/*---------------------------------------------
04-5. 詳細ページ
---------------------------------------------*/
#title	{ width: 640px; height: 57px; padding: 0; margin: 0; border-top: 4px solid #9999CC; background: url(../products/imgs/more_t_bg.jpg) no-repeat 0 0; }
#titletop-l{ width: 300px; float: left; font-size: 65%; text-align:left; margin: 5px 0 0 0;}
#titletop-r{ width: 300px; float: right; font-size: 65%; text-align:right; margin: 5px 0 0 0;}
#title h3{ font-size: 100%; font-weight: bold; color: #414181; margin: 30px 0 0 5px;}

#cont{ width: 640px; height: 300px; padding: 0; margin: 0;}
#cont img{float: left;}
#cont-r{ float: right; width: 310px; height: 300px; padding: 0; margin: 10px 10px 10px 20px;}
#icon	{ width: 310px; padding: 0; margin: 0 0 20px 0;}
#icon img{ padding: 0; margin: 3px; float: left;}
#prtxt2{ width: 310px; padding: 0; margin: 0 0 20px 0; font-size: 75%;}
#price1{ width: 310px; padding: 0; margin: 0; border-top: 1px dotted #ccc;}
#price1 p{ padding: 0; margin: 10px 0 5px 5px; font-size: 75%; }
#price2{ width: 310px; padding: 0; margin: 0; border-bottom: 1px dotted #ccc;}
#price2 p{ padding: 0; margin: 0px 0 10px 5px; font-size: 75%; }
#free{ width: 640px; height: 100%; padding: 0; margin: 0 0 20px 0; border: 1px solid #9999CC; }

#relation{ width: 640px; padding: 0; margin: 0 0 20px 0; }
#relation h4{ width: 640px; height: 16px; padding: 0; margin: 0 0 15px 0; background: url(../products/imgs/relation_t.gif) no-repeat left top; text-indent:-9999px;}
.rels{ width: 102px; padding: 0; margin: 10px; float:left;}
.rels img{ border: 1px solid #ccc;}
.rels-txt{ width: 100px; padding: 0; margin: 0px;}
.rels-txt p{ font-size: 65%; padding: 0; margin: 3px;}
/*---------------------------------------------
05. footer
---------------------------------------------*/
#footer         { clear: both; width: 920px; height: 96px; margin: 0px; background: url(../imgs/foot_bg.jpg)  0 0 repeat; border-top: 1px solid #cccccc;}
#footer ul { margin: 20px 0 20px 195px; list-style-type: none; text-align: center;}
#footer li { float: left; margin: 0 2px; padding: 0px; font-size: 65%; }

#copyright { width: 276px; height: 14px; padding: 0; margin: 20px 0 0 322px; background: url(../imgs/copy.gif) no-repeat 0 0; text-indent:-9999px;}