@charset "euc-jp";

/* CSS Information ==============================
File name: shop_concept.css
Editors: onecup
Last Editor: onecup
Date: 2010.02.14
Table of contents:
	+reset
	+ka-shop-common-concept_container
		+ka-shop-common-concept_upperblock
		+ka-shop-common-concept_Asideblock
			.ka-Aside-imgBlock
		+ka-shop-common-concept_Bsideblock
			.ka-Bside-imgBlock
		+ka-shop-common-concept_bottomblock
	+opacity
	+ColorBox
	+jQuery-cycle
	+s3slider

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



/*============================================
  +reset
============================================*/

div,
dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,
pre,
form,fieldset,
p,blockquote,
table,thead,tbody,tfoot,caption,th,td {
	margin: 0;
	padding: 0;
}


/*[lv1]======================================
  #ka-shop-common-concept_container
============================================*/

#ka-shop-common-concept_container {
	width: 944px;
	padding-top: 10px;
	padding-bottom: 20px;
	background-color: #dfd5c9;
	text-align: left;
	font-size: 12px;
	line-height: 1.7;
}


/*[lv2]==============================
  #ka-shop-common-concept_upperblock
===================================*/

#ka-shop-common-concept_upperblock {
	width: 944px;
}


/*[lv2]==============================
  #ka-shop-common-concept_Asideblock
===================================*/

#ka-shop-common-concept_Asideblock {
	width: 412px;
	float: left;
	padding-right: 20px;
	padding-left: 40px;
}

#ka-shop-common-concept_Asideblock h1 {
	padding-bottom: 10px;
}

#ka-shop-common-concept_Asideblock h2 {
	padding-top: 20px;
	padding-bottom: 10px;
}

#ka-shop-common-concept_Asideblock p.ka-text_small {
	font-size: x-small;
	padding-top: 5px;
	line-height: 1.2;
}

#ka-shop-common-concept_Asideblock p.ka-editor {
	padding-top: 20px;
	font-size: x-small;
	text-align: left;
}


/*[lv3]==============================
  .ka-Aside-imgBlock  
===================================*/

div.ka-Aside-imgBlock {
	width: 412px;
	padding-top: 20px;
}

div.ka-Aside-imgBlock p.posA {
	padding-right: 10px;
	padding-bottom: 10px;
	float: left;
}

div.ka-Aside-imgBlock p.posB {
	padding-bottom: 10px;
	float: right;
}

div.ka-Aside-imgBlock p.posAend {
	padding-right: 10px;
	padding-bottom: 0;
	float: left;
}

div.ka-Aside-imgBlock p.posBend {
	padding-bottom: 0;
	float: right;
}

div.ka-Aside-imgBlock p.imgCaptionA {
	width: 201px;
	float: left;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-right: 10px;
	font-size: x-small;
	line-height: 1.2;
}

div.ka-Aside-imgBlock p.imgCaptionB {
	width: 201px;
	float: right;
	padding-top: 5px;
	padding-bottom: 5px;
	font-size: x-small;
	line-height: 1.2;
}

/*[lv3]==============================
  type2
===================================*/


div.ka-Aside-imgBlock_type2 {
	width: 412px;
	padding-top: 5px;
}

div.ka-Aside-imgBlock_type2 p.posA {
	padding-right: 10px;
	padding-bottom: 10px;
	float: left;
}

div.ka-Aside-imgBlock_type2 p.posB {
	padding-bottom: 10px;
	float: right;
}

div.ka-Aside-imgBlock_type2 p.posAend {
	padding-right: 10px;
	padding-bottom: 0;
	float: left;
}

div.ka-Aside-imgBlock_type2 p.posBend {
	padding-bottom: 0;
	float: right;
}

div.ka-Aside-imgBlock_type2 p.imgCaptionA {
	width: 201px;
	float: left;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-right: 10px;
	font-size: x-small;
	line-height: 1.2;
}

div.ka-Aside-imgBlock_type2 p.imgCaptionB {
	width: 201px;
	float: right;
	padding-top: 5px;
	padding-bottom: 5px;
	font-size: x-small;
	line-height: 1.2;
}


/*[lv3]==============================
  type3
===================================*/


div.ka-Aside-imgBlock_type3 {
	width: 412px;
	padding-top: 10px;
}

div.ka-Aside-imgBlock_type3 p.posA {
	padding-right: 10px;
	padding-bottom: 10px;
	float: left;
}

div.ka-Aside-imgBlock_type3 p.posB {
	padding-bottom: 10px;
	float: right;
}

div.ka-Aside-imgBlock_type3 p.posAend {
	padding-right: 10px;
	padding-bottom: 0;
	float: left;
}

div.ka-Aside-imgBlock_type3 p.posBend {
	padding-bottom: 0;
	float: right;
}

div.ka-Aside-imgBlock_type3 p.imgCaptionA {
	width: 201px;
	float: left;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-right: 10px;
	font-size: x-small;
	line-height: 1.2;
}

div.ka-Aside-imgBlock_type3 p.imgCaptionB {
	width: 201px;
	float: right;
	padding-top: 5px;
	padding-bottom: 5px;
	font-size: x-small;
	line-height: 1.2;
}





/*[lv2]==============================
  #ka-shop-common-concept_Bsideblock
===================================*/

#ka-shop-common-concept_Bsideblock {
	width: 432px;
	float: left;
	padding-right: 40px;
}

#ka-shop-common-concept_Bsideblock h1 {
	padding-bottom: 10px;
}

#ka-shop-common-concept_Bsideblock h2 {
	padding-top: 20px;
	padding-bottom: 10px;
}

#ka-shop-common-concept_Bsideblock p.ka-text_small {
	font-size: x-small;
	padding-top: 5px;
	line-height: 1.2;
}

#ka-shop-common-concept_Bsideblock p.ka-editor {
	padding-top: 20px;
	font-size: x-small;
	text-align: right;
}

#ka-shop-common-concept_Bsideblock p.ka-indent {
	padding-left: 1em;
}


/*[lv3]==============================
  .ka-Bside-imgBlock
===================================*/

div.ka-Bside-imgBlock {
	width: 432px;
	padding-top: 20px;
}

div.ka-Bside-imgBlock p.posA {
	padding-right: 10px;
	padding-bottom: 10px;
	float: left;
}

div.ka-Bside-imgBlock p.posB {
	padding-bottom: 10px;
	float: right;
}

div.ka-Bside-imgBlock p.posAend {
	padding-right: 10px;
	padding-bottom: 0;
	float: left;
}

div.ka-Bside-imgBlock p.posBend {
	padding-bottom: 0;
	float: right;
}

div.ka-Bside-imgBlock p.imgCaptionA {
	width: 211px;
	float: left;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-right: 10px;
	font-size: x-small;
	line-height: 1.2;
}

div.ka-Bside-imgBlock p.imgCaptionB {
	width: 211px;
	float: right;
	padding-top: 5px;
	padding-bottom: 5px;
	font-size: x-small;
	line-height: 1.2;
}



/*[lv2]==============================
  #ka-shop-common-concept_bottomblock
===================================*/

#ka-shop-common-concept_bottomblock {
	width: 944px;
}



/*===================================
  +opacity
===================================*/

div#ka-shop-common-concept_Asideblock a:hover img,
div#ka-shop-common-concept_Bsideblock a:hover img {
	opacity: 0.6;                 /*firefox+*/
	filter: alpha(opacity=60);    /*IE*/
}


/*===================================
  +ColorBox
===================================*/

/*
    ColorBox Core Style
    The following rules are the styles that are consistant between themes.
    Avoid changing this area to maintain compatability with future versions of ColorBox.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative; overflow:visible;}
#cboxLoadedContent{overflow:auto;}
#cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}

/* 
    ColorBox example user style
    The following rules are ordered and tabbed in a way that represents the
    order/nesting of the generated HTML, so that the structure easier to understand.
*/
#cboxOverlay{background:#202020;}

#colorbox{}
    #cboxContent{margin-top:32px;}
        #cboxLoadedContent{background:#000; padding:1px;}
        #cboxLoadingGraphic{background:url(../images/colorbox/loading.gif) center center no-repeat;}
        #cboxLoadingOverlay{background:#000;}
        #cboxTitle{position:absolute; top:-22px; left:0; color:#fff;}
        #cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px;}
        #cboxSlideshow, #cboxPrevious, #cboxNext, #cboxClose{text-indent:-9999px; width:20px; height:20px; position:absolute; top:-20px; background:url(../images/colorbox/controls.png) 0 0 no-repeat;}
        #cboxPrevious{background-position:0px 0px; right:44px;}
        #cboxPrevious.hover{background-position:0px -25px;}
        #cboxNext{background-position:-25px 0px; right:22px;}
        #cboxNext.hover{background-position:-25px -25px;}
        #cboxClose{background-position:-50px 0px; right:0;}
        #cboxClose.hover{background-position:-50px -25px;}
        .cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious{right:66px;}
        .cboxSlideshow_on #cboxSlideshow{background-position:-75px -25px; right:44px;}
        .cboxSlideshow_on #cboxSlideshow.hover{background-position:-100px -25px;}
        .cboxSlideshow_off #cboxSlideshow{background-position:-100px 0px; right:44px;}
        .cboxSlideshow_off #cboxSlideshow.hover{background-position:-75px -25px;}




/*===================================
  +jQuery-cycle 
===================================*/
.pics {    
    width:   412px;
    height:  620px;
    padding: 0;  
    margin:  0;  
} 
 
.pics img {  
    padding: 0px;   
    width:  412px; 
    height: 620px; 
    top:  0; 
    left: 0;
}


/*=================================
  for s3slider
=================================*/

#s3slider {
   width: 412px; /* important to be same as image width */
   height: 620px; /* important to be same as image height */
   position: relative; /* important */
   overflow: hidden; /* important */
}

#s3sliderContent {
   width: 412px; /* important to be same as image width or wider */
   position: absolute; /* important */
   top: 0; /* important */
   left: 0;
   margin-left: 0; /* important */
}

.s3sliderImage {
   float: left; /* important */
   position: relative; /* important */
   display: none; /* important */
   background-color: #dfd5c9; /* opacity”wŒiF */
}

.s3sliderImage span {
   position: absolute; /* important */
   left: 0px;
   font: 10px/15px Arial, Helvetica, sans-serif;
   padding: 10px 13px;
   width: 412px;
   background-color: #000;
   filter: alpha(opacity=50); /* here you can set the opacity of box with text */
   -moz-opacity: 0.5; /* here you can set the opacity of box with text */
   -khtml-opacity: 0.5; /* here you can set the opacity of box with text */
   opacity: 0.5; /* here you can set the opacity of box with text */
   color: #fff;
   display: none; /* important */
   bottom: 8px;

   /*
       if you put
       top: 0; -> the box with text will be shown at the top of the image
       if you put
       bottom: 0; -> the box with text will be shown at the bottom of the image
   */
}

.clear {
   clear: both;
}