@charset "utf-8";

/*---------------------------------------------------
	Title: style.css
	Description: Griot Store STYLE.CSS

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


/* ------------------------------------------------------------------------------------- BASE */



#container {
	padding:0;
	margin:0;
}


/* ------------------------------------------------------------------ HEADER */


#header {
	padding:0;
	margin:0;
}


/* ----------------------------------------------- SITE LOGO */

#header #pageheader {
	min-width:1150px;
	height:75px;
    /* min-widthの幅を指定 */
	width: expression(document.body.clientWidth < 1152? "1150px" : "auto");
}

#header #pageheader h1 a {
	width:400px;
	height:75px;
	display:block;
	text-indent:-9999px;
	overflow:hidden;
	background:url(../images/header.gif) left top no-repeat;
	float:left;
}

#header #pageheader #head-ad-box {
	width:300px;
	height:72px;
	float:left;
	text-align:center;
	font-size:11px;
	margin-top:3px;
}

#header #pageheader #info-box {
	max-width:350px;
	float:right;
	padding:3px 10px 0 0;
}

#header #pageheader #info-box h2 {
	color:#999999;
	font-size:14px;
	margin-bottom:3px;
}

#header #pageheader #info-box #info-list {
	font-size:95%;
	line-height:130%;
	padding-left:5px;
}

#header #pageheader #info-box #info-list .date {
	font-weight:bold;
	padding-right:5px;
}

/* ----------------------------------------------- GLOBAL MENU */

#header #headmenu {
	text-align:left;
	height:28px;
	background:url(../images/menu_bg.gif) left top repeat-x;
}

#header #headmenu ul {
	height:28px;
	padding-left:20px;
}

#header #headmenu li {
	float:left;
	padding-right:1px;
}

#header #headmenu li a {
	display:block;
	text-indent:-9999px;
	overflow:hidden;
}


#header #headmenu .menu-01 a {
	width:68px;
	height:28px;
	display:block;
	background:url(../images/menu_01.gif) left top no-repeat;
}

#header #headmenu .menu-02 a {
	width:108px;
	height:28px;
	display:block;
	background:url(../images/menu_02.gif) left top no-repeat;
}

#header #headmenu .menu-03 a {
	width:133px;
	height:28px;
	display:block;
	background:url(../images/menu_03.gif) left top no-repeat;
}

#header #headmenu .menu-04 a {
	width:98px;
	height:28px;
	display:block;
	background:url(../images/menu_04.gif) left top no-repeat;
}

#header #headmenu .menu-05 a {
	width:115px;
	height:28px;
	display:block;
	background:url(../images/menu_05.gif) left top no-repeat;
}

#header #headmenu li a:hover {
	background-position:bottom;
}

#header #headmenu .current a {
	background-position:bottom;
}

/* ------------------------------------------------------------------ CONTENTS */


#all-box {
	min-width:1150px;
	clear:both;
	background:url(../images/border.gif) top right repeat-y;
	margin:10px 0;
    /* min-widthの幅を指定 */
	width: expression(document.body.clientWidth < 1152? "1150px" : "auto");

}


#all-box #left {
    width:670px; 
	padding:10px 30px;
	float:left;
}

#all-box #right {
	width:350px;
	padding:10px 30px;
	float:right;
}


#all-box h2 {
	color:#999999;
	font-size:14px;
	height:30px;
	line-height:300%;
	padding-bottom:15px;
}

#all-box #contents {
	padding:10px;
	border:1px #1e1e1e solid;
	margin-bottom:10px;
}

#all-box .price {
	color:#6C9B23;
}

#all-box .title {
	font-weight:bold;
	line-height:110%;
}

#all-box .title a {
	color:#1e1e1e;
}

#all-box .title a:hover {
	color:#4e4e4e;
}

#all-box #more {
	clear:both;
	width:100%;
	text-align:right;
	padding-top:20px;
}

#all-box #more a {
	background:url(../images/arrow_right.gif) left bottom no-repeat;
	padding-left:20px;
}

#all-box #pagetop {
	background:url(../images/arrow_top.gif) left top no-repeat;
	padding-left:17px;
}

/* ----------------------------------------------- PICK UP */

#pickup-box {
	padding:0;
	margin:0 0 0 0;
}

#pickup-box h2 {
	background:url(../images/icon_record.gif) top left no-repeat;
	text-indent:50px;
}

#pickup-box #contents {
	width:650px;
}

#pickup-box .left {
	width:202px;
	float:left;
	text-align:center;
	margin:5px 15px 5px 5px;
}

#pickup-box .right {
	width:420px;
	float:left;
}

#pickup-box .thumbnail {
	width:202px;
	height:202px;
        margin-bottom:10px;
}

#pickup-box .thumbnail a:hover img {
	border:1px #cccccc solid;
}


#pickup-box .title_line {
	border-bottom:1px #cccccc solid;
	margin:10px 0 0 0;
    
}


#pickup-box .title {
	float:left;
	padding:5px 0;
    width:300px;
	line-height:250%;
	font-size:130%;
	height:55px;
	top:10%;
}


#pickup-box .title a {
	color:#1e1e1e;
}

#pickup-box .title a:hover {
	color:#4e4e4e;
}

#pickup-box .artist {
	float:left;
	padding:5px 0;
        width:300px;
	line-height:110%;
}

#pickup-box .category {
	float:right;
	padding:5px 0;
}

#pickup-box .caption {
	font-weight:bold;
	font-size:110%;
	padding-top:20px;
	clear:both;
}

#pickup-box .detail {
	padding-top:10px;
}

#pickup-box .price {
    margin:15px 0 0 0;
}


/* ----------------------------------------------- LABEL BOX */

#allitem-box {
	padding:0;
	margin:0;
}

#allitem-box h2 {
	background:url(../images/icon_record.gif) top left no-repeat;
	text-indent:50px;
}


#allitem-box #category-box h3 {
	display:inline;
	color:#fff;
	font-size:12px;
	padding:2px 5px;
	position:relative;
	top:2px;
}

#allitem-box #category-box #category-box-inner {
    width:650px;
	padding:10px;
	margin-bottom:10px;
	border-width:1px;
	border-style:solid;
}

#allitem-box #category-box #item-grid li {
	display:block;
	width:152px;
	float:left;

	text-align:left;
	padding:5px;
	margin-bottom:10px;
}

#allitem-box #category-box #item-grid li .thumbnail {
	width:152px;
	height:152px;
	margin-bottom:10px;
}

#allitem-box #category-box #item-grid li img {
	width:150px;
	height:150px;
}

#allitem-box #category-box #item-grid li a:hover img {
	border-width:1px;
	border-style:solid;
}


/* ----------------------------------------------- MY BASKET */


#basket-box {
	padding:0;
	margin:0;
}


#basket-box h2 {
	background:url(../images/icon_basket.gif) top left no-repeat;
	text-indent:50px;
}

#basket-box h4 {
	padding-bottom:15px;
}

#basket-box #basket-item-list li {
	width:100%;
	clear:both;
	margin-bottom:20px;
	padding-bottom:5px;
	border-bottom:1px #cccccc solid;
}

#basket-box #basket-item-list .left {
	width:52px;
	height:52px;
	float:left;
	margin:5px 10px 5px 5px;
}

#basket-box #basket-item-list .left a:hover img {
	border:1px #cccccc solid;
}

#basket-box #basket-item-list .right {
	width:250px;
	float:left;
}

#basket-box #basket-item-list .number {
	text-align:right;
}

#basket-box #basket-item-list .checkbox {
	text-align:right;
}

#basket-box #basket-item-list .price {
	clear:both;
	text-align:right;
}

#basket-box #cost {
	clear:both;
	width:100%;
	height:1em;
}

#basket-box #cost .total {
	font-size:120%;
	font-weight:bold;
	float:left;
}

#basket-box #cost .price {
	font-size:200%;
	font-weight:bold;
        float:right;
}


#basket-box #total-cost {
	clear:both;
	width:100%;
	height:1em;
}

#basket-box #total-cost .total {
	font-size:100%;
	float:left;
}

#basket-box #total-cost .price {
	font-size:120%;
    float:right;
}

#basket-box #basket-item-list #total-price {
	clear:both;
}

#basket-box #total-price {
	clear:both;
	width:100%;
	height:1em;
	padding-top:15px;
}

#basket-box #total-price .total {
	font-size:120%;
	font-weight:bold;
	float:left;
}

#basket-box #total-price .price {
	font-size:200%;
	font-weight:bold;
    float:right;
}

#basket-box #total-price-option {
	clear:both;
	width:100%;
	height:1em;
}

#basket-box #total-price-option .item{
	font-size:100%;
	float:left;
	padding-top:5px;
}

#basket-box #total-price-option .price {
	font-size:120%;
    float:right;
	padding-top:5px;
}

#basket-box #basket-buy {
	width:100%;
	text-align:center;
	clear:both;
	padding-top:25px;
}

#basket-box #basket-buy a {
	display:block;
	width:294px;
	height:46px;
	text-indent:-9999px;
	overflow:hidden;
	margin:10px auto;
	background:url(../images/btn_buy.gif) top center no-repeat;
}

#basket-box #basket-buy a:hover {
	background-position:bottom;
}

#basket-box #basket-detailview {
	width:100%;
	text-align:center;
	clear:both;
}

#basket-box #basket-detailview a {
	display:block;
	width:294px;
	height:46px;
	text-indent:-9999px;
	overflow:hidden;
	margin:10px auto;
	background:url(../images/btn_basket.gif) top center no-repeat;
}

#basket-box #basket-detailview a:hover {
	background-position:bottom;
}

#basket-box #submit-box {
	width:100%;
	text-align:center;
	clear:both;
	padding-top:45px;
	padding-bottom:15px;
}

.submit-btn {
	clear:both;
}


#submit-01,#submit-02,#submit-04,#submit-05,#submit-06,#submit-07
,#submit-08,#submit-09 {
    border: 0px;
    width: 294px;
    height: 46px;
	text-indent:-9999px;
	overflow:hidden;
	margin-left:20px;
	margin-bottom:15px;
}


#submit-01 {
	float:left;
    background: url(../images/submit_01.gif) left top no-repeat;
}

#submit-02 {
	float:left;
    background: url(../images/submit_02.gif) left top no-repeat;
}

#submit-03 {
    border: 0px;
    width: 200px;
    height: 32px;
    background: url(../images/submit_03.gif) left top no-repeat;
	text-indent:-9999px;
	overflow:hidden;
	clear:both;
}

#submit-04 {
	float:left;
    background: url(../images/submit_04.gif) left top no-repeat;
}

#submit-05 {
	float:left;
    background: url(../images/submit_05.gif) left top no-repeat;
}

#submit-06 {
	float:left;
    background: url(../images/submit_06.gif) left top no-repeat;
}


#submit-07 {
	float:left;
    background: url(../images/submit_07.gif) left top no-repeat;
}

#submit-08 {
	float:left;
    background: url(../images/submit_08.gif) left top no-repeat;
}

#submit-09 {
	float:left;
    background: url(../images/submit_09.gif) left top no-repeat;
}


#basket-box #form {
	clear:both;
	padding-top:55px;
}

*html #basket-box #form {
	clear:both;
	padding-top:27px;
}

*+html #basket-box #form {
	clear:both;
	padding-top:27px;
}

#basket-box .form-inner {
	background:#EAEAEA;
	padding:20px;
}

.form td {
	padding:10px;
	
}

.orderflow ul {
	width:100%;
}

.orderflow li {
	width:142px;
	display:block;
	background:#E4ECF2;
	padding:10px;
	margin-bottom:20px;
	float:left;
	text-align:center;
	font-size:110%;
	font-weight:bold;
	color:#5FA4CE;
}

.orderflow .current {
	background:#287BC6;
	font-weight:bold;
	color:#fff;
}

#complete {
	height:300px;
	text-align:center;
}

#complete .main {
	font-size:180%;
	line-height:500%;
	font-weight:bold;
}

#complete .sub {
	font-size:100%;
	font-weight:nomal;
}

/* ----------------------------------------------- GUIDE */


#guide-box {
	padding:0;
	margin:0;
}


#guide-box h2 {
	background:url(../images/icon_guide.gif) top left no-repeat;
	text-indent:50px;
}

#guide-box #guide-list li {
	height:40px;
	background:url(../images/icon_rivet.gif) center left no-repeat;
	text-indent:40px;
	line-height:300%;
}




#guide-innerbox {
	margin:0;
	padding:0;
}

#guide-innerbox h2 {
	height:30px;
	line-height:200%;
	background:url(../images/icon_rivet.gif) top left no-repeat;
	text-indent:40px;
}

#guide-innerbox #submit-box {
	width:100%;
	text-align:center;
	clear:both;
	padding-top:45px;
	padding-bottom:15px;
}


#guide-innerbox .deal_tb td {
	padding:5px;
}



/* ----------------------------------------------- AD */


#ad-box {
	padding-top:20px;
	margin:0;
}

#ad-box #ad-list li {
    width:350px;
	text-align:center;
	margin-bottom:10px;
    clear:both;
over-flow:hidden;
}

#ad-box #ad-list #image {
    width:350px;
    clear:both;
}


/* ----------------------------------------------- TOPIC PATH */

#topic-path ul {
	position:relative;
	top:2px;
}

#topic-path #topic-path-list li {
	display:inline;
	padding-right:12px;
	background:url(../images/topic-path-arrow.gif) right bottom no-repeat;
}

*html #topic-path #topic-path-list li {
	display:inline;
	padding-right:8px;
	margin-right:4px;
	background:url(../images/topic-path-arrow.gif) right bottom no-repeat;
}

#topic-path #topic-path-list .last-child {
	padding:2px 5px;
}

*html #topic-path #topic-path-list .last-child {
	padding:2px 2px 2px 5px;
}

#topic-path #topic-path-list .last-child a {
	color:#ffffff;
}

#topic-path #topic-path-list .last-child a:hover {
	color:#1e1e1e;
}



/* ----------------------------------------------- CATEGORY ALL ITEM LIST */


#list-box #list-box-header {
    width:670px;
	height:53px;
	clear:both;
	float:left;
	border-width:1px;
	border-style:solid;
}

#list-box h3 {
	float:left;
	margin:10px;
	color:#ffffff;
	font-size:140%;
	line-height:200%;
	border-right:2px #ffffff solid;
	padding-right:20px;
}

#list-box .category-detail {
	padding:10px;
	color:#ffffff;
	font-size:95%;
	line-height:120%;
}

#list-box #category-list-box-inner {
	clear:both;
        width:650px;
	padding:10px;
	border-width:1px;
	border-style:solid;
}


#list-box #item-grid li {
	width:628px;
	margin:0 auto 10px auto;
	padding:10px;
	border:1px #cccccc solid;
	clear:both;
}

#list-box #item-grid li:last-child {
	margin-bottom:0px;
}


#list-box #item-grid .left {
	width:152px;
	float:left;
	text-align:center
}

#list-box #item-grid .left img {
	margin-bottom:10px;
}

#list-box #item-grid .left a img {
	border:1px #ffffff solid;
}

#list-box #item-grid .left a:hover img {
	border:1px #cccccc solid;
}

#list-box #item-grid .left .price {
	margin-bottom:5px;
}

#list-box #item-grid .right {
	width:448px;
	float:right;
}

#list-box #item-grid .right .title {
	font-size:120%;
	padding-bottom:7px;
	margin-bottom:5px;
	border-bottom:1px #cccccc solid;
}

#list-box #item-grid .right .artist {
	float:left;
}

#list-box #item-grid .right .category {
	float:right;
}

#list-box #item-grid .right .caption {
	width:100%;
	padding:10px 0;
	clear:both;
}


#list-box #list-box-footer {
    width:670px;
	clear:both;
	margin-bottom:30px;
	border-width:1px;
	border-style:solid;
}

#list-box-footer #list-navi {
	padding:10px;
	margin:0;
	text-align:center;
	font-size:110%;
}

#list-box-footer #list-navi li {
	display:inline;
	padding:0 5px 0 10px;
	border-left:1px #ffffff solid;
}

#list-box-footer #list-navi .first-child {
	display:inline;
	border-left:none;
}

#list-box-footer #list-navi li a {
	color:#ffffff;
}

#list-box-footer #list-navi li a:hover , #list-box-footer #list-navi .current a {
	color:#1e1e1e;
}



/* ----------------------------------------------- DETAIL */


#detail-box #detail-box-header {
    width:670px;
	height:53px;
	clear:both;
	border-width:1px;
	border-style:solid;
}

#detail-box h3 {
	float:left;
	margin:10px;
	color:#ffffff;
	font-size:140%;
	line-height:200%;
	border-right:2px #ffffff solid;
	padding-right:20px;
}

#detail-box .detail-artist {
	padding:10px 10px 0 10px;
	color:#ffffff;
	font-size:95%;
	line-height:110%;
}

#detail-box .detail-label {
	padding:10px 10px 0 10px;
	color:#ffffff;
	font-size:95%;
	line-height:110%;
}

#detail-box #detail-box-inner {
	clear:both;
    width:650px;
	padding:10px;
	border-width:1px;
	border-style:solid;
}

#detail-box #item-box .left {
	width:252px;
	float:left;
	text-align:center
}

#detail-box #item-box .left img {
	margin-bottom:10px;
}

#detail-box #item-box .left a img {
	border:1px #ffffff solid;
}

#detail-box #item-box .left a:hover img {
	border:1px #cccccc solid;
}

#detail-box #item-box .left .price {
	margin-bottom:5px;
}

#detail-box #item-box .right {
	width:388px;
	float:right;
}

#detail-box #item-box .right .title {
	font-size:120%;
	padding-bottom:7px;
	margin-bottom:5px;
	border-bottom:1px #cccccc solid;
}

#detail-box #item-box .right .artist {
	float:left;
}

#detail-box #item-box .right .category {
	float:right;
}

#detail-box #item-box .right .caption {
	width:100%;
	padding:10px 0;
	clear:both;
}

#detail-box #detail-box-footer {
    width:670px;
	clear:both;
	margin-bottom:30px;
	border-width:1px;
	border-style:solid;
}

#detail-box #detail-box-footer h4 {
	font-size:120%;
	color:#ffffff;
	padding:10px;
}

#detail-box #detail-box-footer a {
	color:#ffffff;
}

#detail-box #detail-box-footer a:hover {
	color:#1e1e1e;
}

#detail-box #detail-box-footer img {
	margin-bottom:10px;
}

#detail-box #detail-box-footer .price {
	color:#ffffff;
}

#detail-box #detail-box-footer #recommend-list #item-grid {
	margin-left:20px;
	width:650px;
	overflow:hidden;
}

#detail-box #detail-box-footer #recommend-list #item-grid li {
	float:left;
	height:200px;
	width:111px;
	margin-right:18px;
}

#detail-box #detail-box-footer a img {
	border-width:1px;
	border-style:solid;
}

#detail-box #detail-box-footer a:hover img {
	border:1px #ffffff solid;
}


/* ------------------------------------------------------------------ FOOTER */


#footer {
    width:100%;
	clear:both;
        text-indent:20px;
	padding-bottom:15px;
	background:#1e1e1e;
	color:#fff;
}


/* ----------------------------------------------- FOOT MENU */

#footer #footmenu {
	width:100%;
	padding-top:10px;
}

#footer #footmenu li {
	display:inline;
	border-left:1px #ffffff solid;
	padding:0 3px 0 5px;
}

#footer #footmenu .first-child {
	border-left:none;
	padding:0 3px 0 0;
}

#footer #footmenu li a {
	color:#ffffff;
}

#footer #footmenu li a:hover {
	color:#cccccc;
}

/* ----------------------------------------------- FOOT GUIDE */

#footer #foot-guide-list {
	width:100%;
	padding-bottom:10px;
}

#footer #foot-guide-list li {
	display:inline;
	border-left:1px #5e5e5e solid;
	padding:0 3px 0 5px;
}

#footer #foot-guide-list .first-child {
	border-left:none;
	padding:0 3px 0 0;
}

#footer #foot-guide-list .first-child a {
	color:#ffffff;
}

#footer #foot-guide-list .first-child a:hover {
	color:#cccccc;
}

/* ----------------------------------------------- COPY RIGHT */

#footer .copyright {
	clear:both;
}


/* ------------------------------------------------------------------------------------- CUSTOM */



/* ----------------------------------------------- LABEL COLOR */


/* ---------------------------- YELLOW */
#all-box .yellow h3 , .yellow .category-detail {
	background:#D8AE00;
}

#all-box .yellow #category-box-inner {
	border:#D8AE00;
}

#allitem-box .yellow #item-grid li a:hover img {
	border:#D8AE00;
}

#all-box .yellow #topic-path #topic-path-list .last-child {
	background:#D8AE00;
}

.yellow #list-box-header , .yellow #detail-box-header {
	border:#D8AE00;
	background:#D8AE00;
}

.yellow #category-list-box-inner , .yellow #detail-box-inner , .yellow #detail-box-footer a img {
	border:#D8AE00;
}

.yellow #list-box-footer , .yellow #detail-box-footer {
	border:#D8AE00;
	background:#D8AE00;
}




/* ---------------------------- GREEN */
#all-box .green h3 , .green .category-detail {
	background:#63931F;
}

#all-box .green #category-box-inner {
	border:#63931F;
}

#allitem-box .green #item-grid li a:hover img {
	border:#63931F;
}

#all-box .green #topic-path #topic-path-list .last-child {
	background:#63931F;
}

.green #list-box-header , .green #detail-box-header {
	border:#63931F;
	background:#63931F;
}

.green #category-list-box-inner , .green #detail-box-inner , .green #detail-box-footer a img {
	border:#63931F;
}

.green #list-box-footer , .green #detail-box-footer {
	border:#63931F;
	background:#63931F;
}


/* ---------------------------- BLUE */
#all-box .blue h3 , .blue .category-detail {
	background:#358FBC;
}

#all-box .blue #category-box-inner {
	border:#358FBC;
}

#allitem-box .blue #item-grid li a:hover img {
	border:#358FBC;
}

#all-box .blue #topic-path #topic-path-list .last-child {
	background:#358FBC;
}

.blue #list-box-header , .blue #detail-box-header{
	border:#358FBC;
	background:#358FBC;
}

.blue #category-list-box-inner , .blue #detail-box-inner , .blue #detail-box-footer a img {
	border:#358FBC;
}

.blue #list-box-footer , .blue #detail-box-footer {
	border:#358FBC;
	background:#358FBC;
}


/* ---------------------------- PURPLE */
#all-box .purple h3 , .purple .category-detail {
	background:#795193;
}

#all-box .purple #category-box-inner {
	border:#795193;
}

#allitem-box .purple #item-grid li a:hover img {
	border:#795193;
}

#all-box .purple #topic-path #topic-path-list .last-child {
	background:#795193;
}

.purple #list-box-header , .purple #detail-box-header {
	border:#795193;
	background:#795193;
}

.purple #category-list-box-inner , .purple #detail-box-inner .purple #detail-box-footer a img {
	border:#795193;
}

.purple #list-box-footer , .purple #detail-box-footer {
	border:#795193;
	background:#795193;
}



.err_msg{
	color:#ff0000;
	font-size:80%;
}
.tokka{
	color:#ff0000;
	font-size:100%;
}


/* ---------------------------- SITEMAP */

#map01{
width:500px;
font-size:11px;
line-height:18px;
float:left;
margin:0 0 40px 20px;
}

.map01{
width:700px;
font-size:12px;
line-height:20px;
float:left;
margin:0 0 30px 20px;
}

.map01_01{
margin-left:30px;
}

.map01_02{
margin:0 0 15px 30px;
}