@charset "utf-8";
/*
common.css
Copyright (C) MILBOOKS All Rights Reserved.
------------------------------------------------------------
1. [Main Layout] setting main structure layout
    1-1. Container
    1-2. Header
    1-3. Global Nav
    1-4. SearchBar
    1-5. Content
    1-6. Footer
2. [Content] common content layout
    2-1. Main | Primary | Sub / productList
    2-2. Main | Secondary | common
    2-3. Main | Secondary | Login, naviMenu, shoppingGuide
    2-4. Sub | View Cart
    2-5. Sub | Featured Item
    2-6. Sub | bookmark
3. Main / Primary / newArrived, newReleased, publishingItems

[Other]
    1. pageTop
    2. emptyCart
    3. error
    4. message
    5. calendar
    6. counter
    7. Search Area

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

/* ============================================
    1. [Main Layout] setting main structure layout
    ============================================ */

/* ------------------------------------------------------------
    1-1. Container
    ------------------------------------------------------------ */
div#container {
    width: 960px;
    min-height: 100%;
    margin: 0 auto;
    text-align: left;
    background: url(../images/bg_line00.gif) repeat-y 100% #ffffff; /*right side guide line */
    }

body > #container {
    height: auto;
    }

* html div#container { height: 100%; }

/* ------------------------------------------------------------
    1-2. Header
    ------------------------------------------------------------ */
div#header {
    width: 960px;
    z-index: 10; /* front of div#content */
    height: 100px;
    background: url(../images/bg_img20110820.png) repeat-x 100%; /* headerのbackground-image、デフォルトはbg_img20110820.png */
    position: relative;
    }

div#header div.siteName {
    width: 220px;
    overflow: hidden;
    position: absolute;
    top: 20px;
    left: 0px;
    z-index: 200
    }

div#header div.siteName a {
/*background: rgba(0, 0, 0, 0.6);*/
    background-color: #000;
    opacity: 0.75;
    filter:alpha(opacity=75);
    -ms-filter: "alpha( opacity=75 )";
    text-align: center;
    display: block;
    transition: 1s;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -ms-transition: 1s;
    }

div#header div.siteName a:hover { 
/*background: rgba(226, 0, 114, 1);*/
    background-color: #000;
    opacity: .9;
    filter:alpha(opacity=90);
    -ms-filter: "alpha( opacity=90)";
    }

div#header div.siteName a img {
    padding: 15px;
    }


/* ------------------------------------------------------------
    1-3. Global Nav
    ------------------------------------------------------------ */
div#header ul#navGlobal {
    width: 450px;
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 100
    }

/* NOTE: may need IE6 backgrond flicker fix */
div#header ul#navGlobal li {
    line-height:0;
    display: block;
    float: left;
    padding-left: 1px;
    overflow: hidden;
}

div#header ul#navGlobal li a {
    color: #cccccc;
    font-size: 85%;
    line-height: 1.5;
    text-align: center;
    display: block;
/*background-color: rgba(0, 0, 0, 0.7);*/
    background-color: #000;
    opacity:0.7;
    filter:alpha(opacity=70);
    -ms-filter: "alpha( opacity=70 )";
    width: 74px;
    padding: 3px 0;
    zoom: 1;
    }

div#header ul#navGlobal li a:hover { 
    color: #ffffff;
    background-color: #000;
    opacity: 1;
    filter:alpha(opacity=100);
    -ms-filter: "alpha( opacity=100 )";
    }

/* ------------------------------------------------------------
    1-4. Search Bar
    ------------------------------------------------------------ */
div#searchBar {
    text-align: center;
    background: url(../images/bg_line04.gif) repeat-x 100% top ;
    padding: 6px 0 5px;
    border-bottom: 1px solid #dcdcdc;
    }

div#searchBar form.formSearchbar {
    position: relative;
    display: block;
    width: 960px;
    height: 25px;
    }

div#searchBar select {
    width: 200px;
    height: 25px;
    outline: none;
    border: 1px solid #dcdcdc;
    }

div#searchBar select.selectCategory {
    position: absolute;
    left: 10px;
    }

div#searchBar select.selectPrice {
    position: absolute;
    left: 750px;
    }

div#searchBar span.inputField {
    width: 518px;
    display: block;
    position: absolute;
    left: 220px;
    }

div#searchBar input.inputKeyword {
    width: 482px;
    height: 23px;
    padding: 0 1px 0 2px;
    border: 1px solid #dcdcdc;
    -webkit-border-top-left-radius: 2px;
    -webkit-border-bottom-left-radius: 2px;
    overflow: hidden;
    float: left;
    }

div#searchBar input.inputKeyword:focus {
    outline: 1px solid #cccccc;
    }

div#searchBar input.submitSearchbar {
    padding: 5px 8px 4px 8px;
    border-top: 1px solid #dcdcdc;
    border-right: 1px solid #dcdcdc;
    border-bottom: 1px solid #dcdcdc;
    border-left: none;
    -webkit-border-top-right-radius: 2px;
    -webkit-border-bottom-right-radius: 2px;
    }

/* ------------------------------------------------------------
    1-5. Content
    ------------------------------------------------------------ */
div#content {
    width: 960px;
    padding-bottom: 70px; /* must be same height as footer */
}

span.titleArea {
    height: 35px;
    display: block;
    background: url(../images/bg_line04.gif) repeat-x bottom ; 
    overflow: hidden;
    }

span.titleArea h1 {
    padding: 8px 10px 0 10px;
    }

/* ------------------------------------------------------------
    1-6. Footer
    ------------------------------------------------------------ */
div#footer {
    clear: both;
    width: 960px;
    height: 70px;/* must be same padding-bottom as the content */
    background: url(../images/bg_line01.gif) repeat-x 100% ; 
    z-index: 10; /* front of div#content */
    margin-top: -70px;
    margin-left: auto;
    margin-right: auto;
    bottom: 0px;
    }

div#footer div.siteInfo {
    height: 35px;
    overflow: hidden;
    background: #333333;
    }

div#footer div.siteInfo ul.utility li {
    padding-top: 11px;
    float: left;
    }

div#footer div.siteInfo ul.utility li a {
    color: #ffffff;
    font-size: 85%;
    padding: 0 1em 0 1em;
    border-right: 1px solid #ffffff;
    display: block;
    }

div#footer div.siteInfo ul.utility li a:hover {
    text-decoration: underline;
    }

div#footer div.siteInfo ul.utility li.ACCESS a {
    border: none;
    }

div#footer div.copyright {
    text-align: right;
    background: #000000;
    width: 800px;
    height: 35px;
    float: left;
    }

div#footer div.copyright h6 {
    color: #fff;
    font-family: 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック', sans-serif;
    font-size: 85%;
    letter-spacing: .03ex;
    padding-top: 12px;
    margin-right: 10px;
}

div#footer div.siteLogo {
    text-align: center;
    background: url(../images/bg_color.gif) repeat ;
    width: 160px;
    height: 35px;
    float: right;
    }

div#footer div.siteLogo a {
    display: block;
    }

div#footer div.siteLogo a img {
    width: 100px;
    height: auto;
    padding-top: 11px;
    }

/* ============================================
    2. [Content] common content layout
    ============================================ */
/* ------------------------------------------------------------
    2-1. Main | Primary | Sub / productList
    ------------------------------------------------------------ */
div#main div#primary ul.productList {
    width: 640px;
    height: auto;
    background: url(../images/bg_line03.gif) repeat-y 100% ;
    overflow: hidden;
   }

ul.productList li {
    width: 160px;
    height: 245px;
    background: url(../images/bg_line04.gif) repeat-x 100% bottom ;
    line-height: 0;
    display: block;
    float: left;
    }

ul.productList li a {
    display: block;
    }

ul.productList li h2 {
    display: block;
    padding: 9px 10px 10px 9px;
    }

ul.productList li h2:hover {
    padding: 7px ;
    border-top: 2px solid #dcdcdc;
    border-right: 3px solid #dcdcdc;
    border-bottom: 3px solid #dcdcdc;
    border-left: 2px solid #dcdcdc;
    }

ul.productList dl {
    position: relative;
    font-size: 85%;
    width: 141px;
    height: 226px;
    overflow: hidden;
    }

ul.productList dt, ul.productList dd.code {
    display: none;
    height: 0px;
    width: 0px;
    }

ul.productList dd.name {
/* 
    text-align: justify;
    text-justify: distribute; 
 */
    height: 4.5em;
    line-height: 1.5;
    overflow: hidden;
    position: absolute;
    top: 155px;
    left: 0px;
    }

ul.productList li dd.name a:hover {
    text-decoration: underline;
    color: #000;
    }

ul.productList dd.thum {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 141px;
    height: 141px;
    }

ul.productList dd.thum a {
    display: inline;
    vertical-align: middle;
    }

ul.productList dd.thum a img {
    vertical-align: middle;
    }

ul.productList dd.tag {
    height: 11px;
    line-height: 1em;
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 20;
    overflow: hidden;
    }

ul.productList dd.price {
    height: 11px;
    line-height: 1em;
    position: absolute;
    bottom: 0px;
    right: 1px;
    overflow: hidden;
    }


/* ------------------------------------------------------------
    2-2. Main | Secondary | common
    ------------------------------------------------------------ */
div#secondary li {
    line-height:0;
    display: inline;
    }

div#secondary li a {
    font-size: 93%; 
    line-height: 18px;
    padding: 9px 0 8px 11px ;
    display: block;
    background: url(../images/bgimg-grid02.gif) no-repeat center bottom ;
    zoom: 1;
    }

div#secondary li a:hover {
    color: #ffffff;
    background: url(../images/list_marker_on.gif) no-repeat 2px center #cccccc; /* listmarker */
    }

div#secondary li a.categoryOn {
    color: #333;
    background: no-repeat 2px center #dcdcdc; /* listmarker */
    }

div#secondary li a.categoryOn:hover {
    color: #ffffff;
    background: url(../images/list_marker_on.gif) no-repeat 2px center #cccccc; /* listmarker */
    }

div#secondary li a.listEnd {
    background: url(../images/bg_line04.gif) repeat-x 100% bottom ;
    }

div#secondary li a.listEnd:hover {
    color: #ffffff;
    background: url(../images/list_marker_on.gif) no-repeat 2px center #cccccc; /* listmarker */
    }

/* ------------------------------------------------------------
    2-3. Main | Secondary | Login, naviMenu, shoppingGuide, externalAd
    ------------------------------------------------------------ */
div#login,
div#naviMenu, 
div#shoppingGuide {
    width: 160px;
    height: auto;
    padding-bottom: 35px;
    overflow: hidden;
    }

div#amazonAD {
    width: 158px;
    height: 415px;
    overflow: hidden;
    padding-left: 1px;
    display:block;
    }

div#amazonAD2 { /* sold item */
    width: 160px;
    height: 634px;
    overflow: hidden;
    display:block;
    }

div#amazonAD3 {
    width: 160px;
    height: 700px;
    overflow: hidden;
    display:block;
    margin-bottom: 35px;
    }

div#googleAD {
    font-size: 11px;
    display:block;
    overflow: hidden;
    }

div#googleAD2 {
    display:block;
    width: 158px;
    overflow: hidden;
    padding-left: 1px;
    padding-bottom: 9px;
    background: url(../images/bg_line04.gif) repeat-x bottom;
    }


div#googleAD span.titleArea, 
div#googleAD2 span.titleArea {
    background: none;
    }

/* ------------------------------------------------------------
    2-4. Sub | View Cart
    ------------------------------------------------------------ */
div#viewCart {
    width: 160px;
    height: auto;
    padding-bottom: 35px;
    overflow: hidden;
    }

div#viewCart dl {
    height: 46px;
    background: url(../images/bgimg-grid02.gif) no-repeat center bottom ;
    padding: 7px 10px 7px 9px;
    overflow: hidden;
    }

div#viewCart dt {
    font-size: 93%;
    line-height: 23px;
    float: left;
    }

div#viewCart dd {
    font-size: 93%;
    line-height: 23px;
    text-align: right;
    }

div#viewCart p {
    font-size: 85%;
    line-height: 1.5;
    }

div#viewCart div.soryoMuryou {
    width: 160px;
    height: 80px;
    overflow: hidden;
    background: url(../images/bg_line04.gif) repeat-x 100% bottom ;
    }

div#viewCart p.commentSoryo {
    padding: 10px 10px 9px 9px;
    background: url(../images/bgimg-grid02.gif) no-repeat center bottom ;
    }

div#viewCart .infoSoryo {
    display: block;
    padding: 10px 10px 9px 9px;
}

div#viewCart .infoSoryo img {
    padding: 1px 0;
}

div#viewCart p span {
    font-weight: bold;
    text-decoration: underline;
    }

div#viewCart p a {
    text-indent: -9999px;
    display: block;
    background: url(../images/img_viewcart.gif) no-repeat center;
    width: 141px;
    height: 25px;

    }

div#viewCart p a:hover {
    background: url(../images/img_viewcart_on.gif) no-repeat center;
    }

/* ------------------------------------------------------------
    2-5. Sub | Featured Item
    ------------------------------------------------------------ */
div#recommendItems {
    width: 160px;
    height: auto;
    padding-bottom: 35px;
    }

div#recommendItems ul.productList {
    width: 160px;
    height: auto;
    overflow: hidden;
   }

div#recommendItems ul.productList li {
    width: 160px;
    height: 245px;
    background: url(../images/bg_line04.gif) repeat-x 100% bottom ;
    line-height: 0;
    display: block;
    float: left;
    }

div#recommendItems ul.productList li a dd.randamTitle {
    font-weight: bolder;
    color: #000000;
    width: 200px;
    height: 245px;
    position: absolute;
    top: -10px;
    left: -10px;
    }


/* ------------------------------------------------------------
    2-6. Sub | bookmark
    ------------------------------------------------------------ */
div#bookmark {
    background: url(../images/bg_line04.gif) repeat-x 100% bottom ;
    width: 160px;
    height: auto;
    margin-bottom: 35px;
    overflow: hidden;
    }

div.bookmarkButton {
    text-align: center;
    height: 26px;
    padding-top: 9px;
    padding-left: 5px;
    overflow: hidden;
    }

div.bookmarkButton a.feed {
    display: block;
    background: url(../images/feed.gif) no-repeat ;
    width: 16px;
    height: 16px;
    margin: 0 0 0 2px;
    float: left;
    }

div.bookmarkButton a.share {
    display: block;
    background: url(../images/memolane.gif) no-repeat ;
    width: 16px;
    height: 16px;
    float: left;
    }

/* ------------------------------------------------------------
    3. Main / Primary / newArrived, newReleased, publishingItems
    ------------------------------------------------------------ */

div#newArrived, div#blowoutPrice, div#newReleased, div#sameCategories, div#requestSeaching, div.publishingItems {
    padding-bottom: 35px;
    }

div#newArrived span.titleArea h1, 
div#blowoutPrice span.titleArea h1, 
div#newReleased span.titleArea h1, 
div#sameCategories span.titleArea h1, 
div#requestSeaching span.titleArea h1, 
div.publishingItems span.titleArea h1 {
    float: left;
    }

span.titleArea a {
    font-size: 85%;
    background: url(../images/img_listlink.png) no-repeat right 0;
    padding-top: 14px;
    padding-right: 25px;
    float: right;
    }

span.titleArea a:hover {
    text-decoration: underline;
    background: url(../images/img_listlink.png) no-repeat right -28px;
    }

/* ============================================
    [Other]
    ============================================ */
/* ------------------------------------------------------------
    1. pageTop
    ------------------------------------------------------------ */

html > body #back-top {
    position: fixed;
    bottom: 2px;
    right: 2px;
    z-index: 500;
}

#back-top a {
	/* background color transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
	}

#back-top a:hover {
	color: #000;
}

/* arrow icon (span tag) */
#back-top span {
	width: 30px;
	height: 30px;
	display: block;
	background: #666 url(../images/img_backtoTop.png) no-repeat center center;
	/* rounded corners */
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	/* background color transition */
	transition: 1s;
	-webkit-transition: 1s;
	-moz-transition: 1s;
    opacity:0.5;
    filter:alpha(opacity=50);
    -ms-filter: "alpha( opacity=50 )";
}

#back-top a:hover span {
    background-color: #000;
    opacity:1;
    filter:alpha(opacity=100);
    -ms-filter: "alpha( opacity=100 )";
}

/* ------------------------------------------------------------
    2. emptyCart
    ------------------------------------------------------------ */
div#emptyCart {
    height: 100px;
    text-align: center;
    padding: 200px 0 150px;
    }

div#emptyCart p {
    padding-left: 0.8em;
    line-height: 1.5;
    }

div#emptyCart input {
    margin-top: 20px;
    }

/* ------------------------------------------------------------
    3. error
    ------------------------------------------------------------ */
div#error {
    width: 800px;
    height: 100px;
    text-align: center;
    margin-top: -80px;
    margin-left: -400px;
    position: absolute;
    top: 50%;
    left: 50%;
    }

div#error p {
    font-size: 93%;
    padding-left: 0.8em;
    line-height: 1.5;
    }

div#error p span {
    text-decoration: underline;
    }

div#error input {
    margin-top: 20px;
    }

/* ------------------------------------------------------------
    4. message
    ------------------------------------------------------------ */
div#message {
    width: 800px;
    height: 100px;
    text-align: center;
    margin-top: -80px;
    margin-left: -400px;
    position: absolute;
    top: 50%;
    left: 50%;
    }

div#message p {
    font-size: 93%;
    padding-left: 0.8em;
    line-height: 1.5;
    }

div#message p span {
    text-decoration: underline;
    }

div#message p.sendMail {
    font-size: 100%;
    text-decoration: underline;
    padding: 20px 0 0 0;
    }

div#message input {
    margin-top: 20px;
    }


/* ------------------------------------------------------------
    5. calendar
    ------------------------------------------------------------ */
div#orderForm table#shopSchedule tr td div#thisMonth {
    text-align: center;
    float: left;
    width: 200px;
    }

div#orderForm table#shopSchedule tr td div#nextMonth {
    text-align: center;
    float: left;
    width: 200px;
    padding-left: 18px;
    }

div#thisMonth p, 
div#nextMonth p {
    font-size: 85%;
    padding: 0 0 3px 0;
    }

div#thisMonth table, 
div#nextMonth table {
    width: 200px;
    font-size: 85%;
    height: auto;
    background-color: #dcdcdc;
    border-collapse: separate;
    border-spacing: 1px;
    margin: 0 auto 10px;
    }

div#thisMonth table th, 
div#nextMonth table th,
div#thisMonth table td,
div#nextMonth table td {
    text-align: center;
    vertical-align: middle;
    }

div#thisMonth table .sunday, 
div#nextMonth table .sunday {
    color: #cc0000;
    }

div#thisMonth table .saturday, 
div#nextMonth table .saturday {
    color: #0000cc;
    }

div#thisMonth table .holiday, 
div#nextMonth table .holiday {
    background-color: #FFCCCC;
   }

/* ------------------------------------------------------------
    6. counter
    ------------------------------------------------------------ */
div#counter {
    width: 0;
    height: 0;
    display: none;
    }

/* ------------------------------------------------------------
    7. Search Area
    ------------------------------------------------------------ */
div#searchArea {
    width: 960px;
    background: url(../images/bg_line00.gif) repeat-y 100% bottom #ffffff;
    clear: both;
    }

div#searchArea p.formSearchbar {
    width: 960px;
    height: 25px;
    text-align: center;
    background: url(../images/bg_line04.gif) repeat-x 100% top;/*right side guide line */
    padding: 6px 0 5px 0;
    border-bottom: 1px solid #dcdcdc;
    position: relative;
    display: block;
    }

p.formSearchbar select {
    width: 200px;
    height: 25px;
    outline: none;
    border: 1px solid #dcdcdc;
    }

p.formSearchbar select.selectCategory {
    position: absolute;
    left: 10px;
    }

p.formSearchbar select.selectPrice {
    position: absolute;
    left: 750px;
    }

p.formSearchbar span.inputField {
    width: 518px;
    display: block;
    position: absolute;
    left: 220px;
    }

p.formSearchbar input[type=text] {
    width: 482px;
    height: 23px;
    padding: 0 1px 0 2px;
    border: 1px solid #dcdcdc;
    -webkit-border-top-left-radius: 2px;
    -webkit-border-bottom-left-radius: 2px;
    overflow: hidden;
    float: left;
    }

p.formSearchbar input[type=text]:focus {
    outline: 1px solid #cccccc;
    }

p.formSearchbar input.submitSearchButton {
    padding: 5px 8px 4px 8px;
    border-top: 1px solid #dcdcdc;
    border-right: 1px solid #dcdcdc;
    border-bottom: 1px solid #dcdcdc;
    border-left: none;
    -webkit-border-top-right-radius: 2px;
    -webkit-border-bottom-right-radius: 2px;
    }

/*現在未使用
div#searchArea div#keywordList {
    background: url(../images/bg_line05.gif) repeat-y 100% bottom ;
    height: 0;
    overflow: hidden;
    transition: height 0.4s ease-in-out;
    -webkit-transition: height 0.4s ease-in-out;
    -moz-transition: height 0.4s ease-in-out;
    -o-transition: height 0.4s ease-in-out;
    -ms-transition: height 0.4s ease-in-out;
    }

right side guide line div#searchArea:hover div#keywordList {
    height: 567px;
    border-bottom: 1px solid #dcdcdc;
    transition: height 1.8s ease-in-out;
    -webkit-transition: height 1.8s ease-in-out;
    -moz-transition: height 1.8s ease-in-out;
    -o-transition: height 1.8s ease-in-out;
    -ms-transition: height 1.8s ease-in-out;
    }
*/

div#keywordList2 {
    background: url(../images/bg_line05.gif) repeat-y 100% bottom ;
    }

p.column {
    width: 160px;
    float: left;
    padding-bottom: 7px;
    }

p.column span.keywordListTitle {
    font-family: 'Arimo', arial, serif; 
    font-size: 108%;
    color: #000000;
    background: url(../images/bg_line04.gif) repeat-x 100% bottom ;
    display: block;
    padding: 9px 10px;
    }

p.column span {
    display: block;
    padding: 3px 2px 0 9px;
    }

p.column span.listTop {
    padding: 9px 2px 0 9px;
    }

p.column span.listBorder {
    background: url(../images/bgimg-grid02.gif) no-repeat center top ;
    padding: 7px 2px 0 9px;
    margin-top: 5px;
    }


p.column span input {
    line-height: 13px;
    display: inline;
    margin: 0;
    float: left;
    border: none;
    outline: none;
    }

*:first-child+html p.column span input,
* html p.column span input {
    width: 13px;
    height: 13px;
    zoom: 1;
    }

p.column span label {
    font-size: 85%;
    line-height: 13px;
    width: 131px;
    float: right;
    display: block;
    }

*:first-child+html p.column span label, 
* html p.column span label {
    padding-top: 2px;
    line-height: 10px;
    }

p.column span label:hover {
    text-decoration: underline;
    cursor: pointer;
    }