@charset "utf-8";

/*=================================================
Copy rights (c) 2010 volare.,inc all rights reserved.

100210 ver.1.0 created by ogawa volare.,inc

This css file defines all page's design and layout.

reset
clearfix
mainlayout
header

=================================================*/

/*==========================
reset
============================ */
/*
Copyright (c) 2008, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.6.0
*/
html{color:#000;background:#FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym {border:0;font-variant:normal;}
/* to preserve line-height and selector appearance */
sup {vertical-align:text-top;}
sub {vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
/*to enable resizing for IE*/
input,textarea,select{*font-size:100%;}
/*because legend doesn't inherit in IE */
legend{color:#000;}
del,ins{text-decoration:none;}

/** font reset
 * Percents could work for IE, but for backCompat purposes, we are using keywords.
 * x-small is for IE6/7 quirks mode.
 */
body {
	font:13px/1.231 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
	*font-size:small; /* for IE */
	*font:x-small; /* for IE in quirks mode */
}

/**
 * Nudge down to get to 13px equivalent for these form elements
 */ 
select,input,button,textarea {
	font:99% 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}

/**
 * To help tables remember to inherit
 */
table {
	font-size:inherit;font:100%;
}

/**
 * Bump up IE to get to 13px equivalent for these fixed-width elements
 */
pre,code,kbd,samp,tt {
	font-family:monospace;
	*font-size:108%;
	line-height:100%;
}

/*==========================
clearfix
============================ */

div#wrapper,
div#supple,
div#container,
div#information,
div#informationInner,
div#leftcolumn,
div#two_maincolumn,
div#three_maincolumn,
div#rightcolumn,
ul#headLine,
div#pageNumberArea,
div.listarea,
div.itemDetailBox,
div#listarea,
.clearFix{
zoom:1;
}

div#wrapper:after,
div#supple:after,
div#container:after,
div#information:after,
div#informationInner:after,
div#leftcolumn:after,
div#two_maincolumn:after,
div#three_maincolumn:after,
div#rightcolumn:after,
ul#headLine:after,
div#pageNumberArea:after,
div.listarea:after,
div.itemDetailBox:after,
div#listarea:after,
.clearFix:after{
content:".";
display:block;
clear:both;
font-size:0;
line-height:0;
visibility:hidden;
}

/*==========================
main layout
============================ */
body{
text-align:center;
color:#333;
word-break:break-all;
}

div#supple{
width:980px;
margin:0 auto;

}

div#container{
text-align:center;
}

div#leftcolumn{
width:160px;
float:left;
text-align:left;
}

div#two_maincolumn{
    width:810px;
    float:left;
    text-align:left;
}

div#three_maincolumn{
width:650px;
float:left;
text-align:left;
}

div#rightcolumn{
width:160px;
float:right;
background:#F0EEEA;
text-align:left;
}

div#footer{
clear:both;
text-align:right;
}

/*==========================
header
============================ */
* html div#header{
height:120px;/*IE6*/
}

div#header{
background:#F1EFEB url(../packages/default/img/pc/head/header_bg.jpg) left bottom repeat-x;
min-height:120px;
text-align:left;
padding: 0 5px 3px 5px;
}

div#header h1 {
color:#999;
text-decoration:none;
font-size:88%;
padding-top:5px;
}

div#header h1 a{
color:#999;
text-decoration:none;
/*font-size:88%;*/
}

/* header box top */

div#information{
background:url(../packages/default/img/pc/head/header_top.jpg) left top no-repeat;
padding-top:5px;
}

/* header box bottom */
div#informationInner{
background:url(../packages/default/img/pc/head/header_top.jpg) left bottom no-repeat;
clear:both;
padding-bottom:5px;
}

/* logo */
p#logo{
padding:5px 0 0 20px;
width:227px;
float:left;
}

/* text link line */
ul#headerTextlink{
width:200px;
float:left;
margin:5px 0 0 90px;
display:inline;
}

ul#headerTextlink li{
display:inline;
background:url(../packages/default/img/pc/head/textline_dot.gif) right center no-repeat;
padding-right:10px;
margin-right:5px;
}

ul#headerTextlink li#headerTextlinkLast{
background:none;
padding-right:0;
margin-right:0;

}

ul#headerTextlink li a{
color:#978564;
text-decoration:none;
font-size:80%;

}

ul#headerTextlink li a:hover{
text-decoration:underline;
}

/* Carriage free */
p#headerFree{
width:109px;
float:left;
margin-top:5px;
}

/* mypage , member , cart button line */
ul#headLine{
background:url(../packages/default/img/pc/head/headline_bg.gif) left top no-repeat;
width:300px;
float:right;
padding:3px 5px;
margin-top:5px;
}

ul#headLine li{
display:inline;
margin-left:3px;
}

/* head search */
div#headSearch{
margin-left:10px;
background:url(../packages/default/img/pc/head/headsearch_bg.gif) left center no-repeat;
padding:5px 0 5px 10px;
}

div#headSearch img,
div#headSearch select,
div#headSearch input{
vertical-align:middle;
}

div#headSearch form{
display:inline;
}

div#headSearch input#name{
color:#999;
}


/* head hot keyword */
dl#headerHotkeyword,
dl#headerHotkeyword *{
display:inline;
}

dl#headerHotkeyword dt{
margin:0 10px 0 30px;

}

dl#headerHotkeyword li{
margin-left: 10px;
}

dl#headerHotkeyword li a{
color:#09f;
text-decoration:none;
}

dl#headerHotkeyword li a:visited{
color:#039;
}

dl#headerHotkeyword li a:hover,
dl#headerHotkeyword li a:active{
text-decoration:underline;
}

/* topic path */
p#topicPath{
background:#F0EEEA;
padding:3px 5px;
text-align:left;
font-size:79%;
}

p#topicPath a{
text-decoration:none;
color:#857558;
}
p#topicPath a:hover,
p#topicPath a:active{
text-decoration:underline;
}

/*==========================
TOP
============================ */


/*===========recomendarea*/
div.recomendarea{
padding-bottom:10px;
}

h2.recomHeading{
border-bottom:1px solid #ccc;
padding-bottom:5px;
margin:10px 5px;
}

div.recomendblock{
width:120px;
float:left;
margin-left:5px;
border-right:1px solid #ccc;
}

div.recomendblockLast{
border-right:none!important
}

div.recomendblock h3{
margin:5px;

}
div.recomendblock p.itemImages{
    min-height:100px;

}


p.itemImages{
text-align:center;
margin-bottom:5px;
}

p.recomPrice{
margin:5px;
}

p.recomPrice span{
color:#f00;
font-weight:bold;
font-family:verdana;
}

p.recomSnipet{
margin:5px;
}

/*===========news area*/

div#newsarea {
position:relative;
}

div#newsarea h2{
z-index:1;
}

div#newsarea dl{
margin:5px;
}

div#newsarea dl dt{
font-weight:bold;
margin-bottom:5px;
}

div#newsarea dl dd{
border-bottom:1px dashed #ccc;
padding-bottom:5px;
margin-bottom:5px;
}

p#rssIcon{
width:48px;
position:absolute;
top:-10px;
right:0px;
z-index:5;
}


/*==========================
item list
============================ */
div#three_maincolumn{
margin:5px;
}

h2#listtitle{
color:#71634A;
font-weight:bold;
font-size:130%;
border-left:8px solid #FFB0D8;
padding-left:10px;
margin:5px;
}

/* item count , soat */

div#pageNumberArea{
border:1px solid #88C4FF;
background:#DFEFFF;
padding:3px 5px;
margin:10px 0;
}

div#pageNumberArea p{
width:10em;
float:left;
}

div#pageNumberArea p span{
color:#f33;
font-weight:bold;
font-family:verdana;
}

div#pageNumberArea dl{
float:right;
margin-right:10px;
display:inline;
}

div#pageNumberArea dl *{
display:inline;
}

/* item price */
span.itemListPriceStrike{
text-decoration: line-through;

}

/* related category */
dl#relatedCategory{
margin-top:10px;
padding:5px;
text-align:left;
background:#f3f3f3;
border:2px solid #ccc;
zoom:1;
line-height:1.6;
}

dl#relatedCategory dt{
font-weight:bold;
}

/* link color */
div#two_maincolumn a,
div#three_maincolumn a,
div#undercolumn a{
color:#06c;
}

div#two_maincolumn a:vited,
div#three_maincolumn a:visited,
div#undercolumn a:visited{
color:#036;
}

div#two_maincolumn a:hover,
div#three_maincolumn a:hover,
div#three_maincolumn a:active.
div#undercolumn a:hover,
div#undercolumn a:active{
color:#09f;
}

/*============ item list */

/* main block */
div.listarea{
margin-bottom:10px;
padding-bottom:5px;
border-bottom:dashed 1px #88C4FF;
}

/* image */
div.listphoto{
width:130px;
float:left;
margin-right:10px;
text-align:center;
display:inline;
}

/* center block */
div.listCenterBlock{
width:500px;
/*width:330px;*/
float:left;
}

ul.status_icon li{
display:inline;
}

div.listCenterBlock h3{
font-size:130%;
font-weight:bold;
margin:8px 0;
}

/* right block */
div.listRgihtBlock{
width:170px;
float:left;
margin-top:10px;
}

div.listRgihtBlock img{
margin-top:10px;
}


div.listRgihtBlock p.classOpt select{
    max-width:170px;

}

/*
div.listRgihtBlock p.classOpt select option{
    width:auto;

}*/

/* comment */

p.listcomment{
margin:10px 0;
}

/* pager */

p#listPager{
text-align:center;
padding-top:10px;
clear:both;
}

p#listPager strong{
font-weight:bold;
margin-right:5px;
padding:3px 8px;
zoom:1;
}

p#listPager a{
background:#DFEFFF;
border:1px solid #06c;
padding:3px 8px;
text-decoration:none;
margin-right:5px;
zoom:1;
}

p#listPager a:hover{
border:1px solid #66B3FF;
}

/*========= item detail */

div.itemDetailBox div#listarea{
margin-top:10px;
}

div.itemDetailBox h2#listtitle{
margin-bottom:10px;
}

div#itemMainComment{
clear:both;
margin:10px 0;
padding:10px 0;
border-top:1px solid #ccc;
}

p#itemMainCommentTobuy{
text-align:center;
clear:both;
padding-top:20px;
}

div.itemDetailBox div.listphoto{
    width:260px;
}

div.itemDetailBox div.listCenterBlock{
    width:360px;
    line-height:1.6;
}


div.itemDetailBox div.listRgihtBlock{
    width:170px;
margin-left:10px;
display:inline;
}

.cartbtn{
    margin-top:10px;
    text-align:center;
}

p.toCustomervoicearea a{
    background:url(/user_data/packages/default/img/pc/item/huki.jpg) left 3px no-repeat;
    padding-left:15px;
}

.itemDetailBox table.itemSpec{
    border:2px solid #ccc;
    margin:10px;
    width:90%;
}
.itemDetailBox table.itemSpec th,
.itemDetailBox table.itemSpec td{
    border:1px solid #ccc;
    padding:5px;
    background:#fff;
}



/*========= customervoice */
div#customervoicearea{
clear:both;
border:5px solid #ddd;
padding:20px;
}

div#customervoicearea h3{
color:#71634A;
font-weight:bold;
font-size:130%;
border-left:8px solid #FFB0D8;
padding-left:10px;
margin:5px 0;
}

div#customervoicearea .stars{
color:#f60;
}

div#customervoicearea .voicetitle{
font-weight:bold;
}

div#customervoicearea .reviewerName{
display:block;
}

div#customervoicearea dl{
line-height:1.6;
}

div#customervoicearea dt{
margin-top:10px;
}

div#customervoicearea dd{
margin:5px;
padding-bottom:10px;
border-bottom:1px solid #ccc;
}

p.commentButton{
text-align:center;
}

/*========= cart */

div#one_maincolumn{
width:700px;
margin:10px auto;
text-align:left;
}

div#one_maincolumn h2{
color:#71634A;
font-weight:bold;
font-size:130%;
border-left:8px solid #FFB0D8;
padding:5px 0 5px 10px;
margin:5px 0;
text-align:left;
border-bottom:1px solid #ccc;
}

div#under02column_cart{
text-align:center;
}

div#one_maincolumn table{
border:3px solid #ccc;
margin:20px auto;
width:98%;
}

div#one_maincolumn table th,
div#one_maincolumn table td{
border:1px solid #ccc;
padding:5px;
}

div#one_maincolumn table th{
background:#f3f3f3;
text-align:center;
/*
white-space: nowrap;
*/
}

/* item photo , name */
td.phototd{
text-align:left!important;
}

td.phototd img{
vertical-align:middle;
}

div.tblareabtn{
text-align:center;
}

p.empty{
margin:20px;
}

p.backShopping{
border:2px solid #ccc;
padding:10px;
margin:20px;
}

td.centertd{
text-align:center;
}

.nowrap{
white-space:nowrap;
}

/*==========================
my page
============================ */

/*========= layout form */
div#mynavarea{
width:160px;
float:left;
border:2px solid #D0CABD;
margin-right:5px;
background:#F0EEEA;
display:inline;
}

div#mycontentsarea{
width:530px;
float:left;
}

div#mycontentsarea table{
width:98%;
}

/*  layout form  left column*/

div#mynavarea h3{
text-align:center;
font-weight:bold;
padding:5px 0;
border-bottom:1px solid #ccc;
color:#71634A;
}

p.memberName,
p.usablePoint{
margin:5px;
}

p.memberName span{
font-weight:bold;
}

p.usablePoint em{
font-size:120%;
font-weight:bold;
color:#f33;
}

div#mynavarea ul.button_like{
background:#fff;
margin:2px;
}

div#mynavarea ul.button_like li{
border-bottom:1px solid #ccc;
padding:5px;
}


/* layout form  right column*/

div#mycontentsarea h3{
margin-bottom:5px;
padding:5px;
border:2px solid #D0CABD;
background:#F0EEEA;
font-weight:bold;
font-size:120%;
color:#71634A;
}

/* form table */

table.delivname{
width:520px;
}

table.delivname th{
width:7em;
}

span.attention{
color:#f33;
}

.addbtn,
.tblareabtn{
text-align:center;
margin:20px;
}


/* new window*/

div#windowarea{
width:500px;
margin:10px auto;
}


div#windowarea h2{
margin-bottom:5px;
padding:5px;
border:2px solid #D0CABD;
background:#F0EEEA;
font-weight:bold;
font-size:120%;
color:#71634A;

}

div#windowarea table{
border:3px solid #ccc;
margin:20px auto;
text-align:left;
}

div#windowarea table th,
div#windowarea table td{
border:1px solid #ccc;
padding:5px;
}

div#windowarea table th{
background:#f3f3f3;
text-align:center;
}

div#windowarea div.btn{
margin:20px 0;
}

/*========= login form */

div.loginarea{
border:3px solid #ccc;
margin:10px;
}

div.loginarea p{
margin:10px;
}

div.inputbox02{
text-align:center;
margin:10px;
}


.attention{
color:#f00;
}



/*==========================
undercolumn
============================ */

div#undercolumn h2{
color:#71634A;
font-weight:bold;
font-size:130%;
border-left:8px solid #FFB0D8;
padding:5px 0 5px 10px;
margin:5px 0;
text-align:left;
border-bottom:1px solid #ccc;
}


div#undercolumn table{
border:3px solid #ccc;
margin:20px auto;
width:98%;
line-height:2;
}

div#undercolumn table th,
div#undercolumn table td{
border:1px solid #ccc;
padding:5px 10px;
}

div#undercolumn table th{
background:#f3f3f3;
text-align:center;
width:10em;
}


/*==========================
left culumn
============================ */

/* category tree */

/* box layout */
div#categoryarea{
background:#F0EEEA;
padding:5px;
}

ul#categorytree li.level1{
border:1px solid #D0CABD;
background:#fff;
padding:5px;
margin-bottom:3px;
}

/* main heading */
div#categoryarea h2{
margin:5px 0;
}

/* category sub heading */
ul#categorytree li h3{
padding:3px 0 3px 13px;
background:url(../packages/default/img/pc/category/category_head.gif) left bottom no-repeat;
}

ul#categorytree li h3 a{
color:#847355;
font-weight:bold;
}

/* category list style */
ul#categorytree li a{
text-decoration:none;
color:#333;
}

ul#categorytree li a:hover{
text-decoration:underline;
}

ul#categorytree li.level2{
margin:5px 0 5px 10px;
}

/*active link*/
li a.onlink{
background:url(../packages/default/img/pc/category/category_alow.gif) left center no-repeat;
padding-left:10px;
}

/* cart */
div.in_cart{
text-align:right;
}

span.itemListPrice{
font-family:verdana;
color:#f33;
font-size:140%;
font-weight:bold;
}


/*==========================
right column
============================ */

div#rightcolumn div.subNavBox{
background:url(../packages/default/img/pc/rightcolumn/right_c_border.gif) bottom repeat-x;
padding:10px 0;
}

/*========== cart */
div#cartarea{
color:#71634A;

margin:0 5px;
}

div#cartarea h2{
margin-bottom:10px;
}

div#cartarea .cartareaItem{
margin:5px;
}

div#cartarea .cartareaFree{
color:#CC0033;
font-weight:bold;
}

div#cartarea .btn{
text-align:center;
margin:10px;
}

/*==========login area*/

div#loginarea{
color:#71634A;
padding-bottom:10px;
background:url(../packages/default/img/pc/rightcolumn/right_c_border.gif) bottom repeat-x;
margin:0 5px;
}

div#login{
background:url(../packages/default/img/pc/rightcolumn/right_c_border.gif) top repeat-x;
padding-top:5px;
}

div#loginarea h2{
margin:10px 0;
}

div#rightcolumn dl.loginForm{
margin:5px 0 0 5px;
}

div#rightcolumn dl.loginForm dd{
margin-bottom:3px;
}

div#rightcolumn p.loginButton{
text-align:center;
margin:5px;
}

ul.loginOption{
margin-top:10px;
text-align:center;
}

ul.loginOption li{
margin-bottom:5px;
}

/*QR*/
div#qr{
    padding:10px 5px;

}

div#qr p{
    margin-top:10px;
    text-align:center;

}


/*==========================
footer
============================ */
ul#guidearea{
border-top:1px solid #E7E3DC;
padding:5px;
}

ul#guidearea li{
display:inline;
margin-left:20px;
}

div#footer a{
color:#0099FF;
text-decoration:none;
}

div#footer a:hover{
text-decoration:underline;
}

p#pagetop{
clear:both;
padding:10px 5px;
}
*:first-child+html p#pagetop{
padding-top:30px;
}

p#pagetop a{
background:url(../packages/default/img/pc/common/pageup.gif) left no-repeat;
padding-left:15px;
}

/*==========================
elements
============================ */
div#supple .buttonHover a:hover{
	filter: alpha(opacity=60);
	-moz-opacity:0.6;
	opacity:0.6;
}

div#supple .center{
text-align:center;
}

div#supple .m10{
margin:10px;
}


/* features */
div#feature div.featureInner {
    width:313px;
    float:left;
    margin-bottom:10px;
    border:3px solid #ddd;
}

div#feature div.odd {
    margin-right:10px;
}

div#feature p.headimg{
    text-align:center;
    margin:10px 0;
}

div#feature p.featureImage{
    text-align:center;
    margin:10px 0;
}

div#feature h3{
   font-weight:bold;
   font-size:130%;
   margin:10px;
}

div#feature p.featurePrice,
div#feature p.featureText{
    margin:10px;

}


.mt10{
    margin-top:10px!important;


}