@charset "utf-8";
/* CSS Document */


/* #supersize  z-index:10; */
/* #header 	z-index:100;*/
/* #contents_left  z-index:40; */
/* #contents_right  z-index:20; */
/* #footer   z-index:30 */


body{
	margin:0;
	padding:0;
	font-size:10pt;
	height:100%;
	width:100%;
	background:#000;
}
/* テキストとか　*/
p{
	margin:0;
	padding:0;
}
img{
	border:none;
}
.white{
	color:#ffffff;
}

a:hover img{
filter: alpha(opacity=80);
  -moz-opacity:0.8;
  opacity:0.8;
}
/*主にニュースで使用してます*/
h4{
	border-bottom:dashed #666666 1px;
}

/* 右寄せのテキストボックスです*/
.right_text{
	text-align:right;
	padding-bottom:10px;
	line-height:15px;
}
.right_text a{
	color:#fff;
}
.right_text a:hover{
	color:#E6BDBB;
}
/* 背景写真を載せてるボックスです　*/
div#supersize{
	position:absolute;
	z-index:10;
	margin:0;
	padding:0;
}
div#supersize img{
	height:100%;
	width:100%;
}



/* calenblosso のロゴを載せてるボックスです　*/
div#header{
	position:absolute;
	z-index:100;
	height:70px;
	width:315px;
	left:30px;
	top:30px;
	overflow:auto;
}

/* 　　　　　　　　　　　　　　　　　　*/
/* ここからは主にindexのCSSです　　　　*/
/* 　　　　　　　　　　　　　　　　　　*/

/* ナビメニューを載せてるボックスです　*/
div#contents_left{
	position:absolute;
	z-index:40;
	width:250px;
	height:100%;
	top:150px;
	left:50px;
}

ul.navi{
	background:url(http://www.calenblosso.jp/images/navi_01.png) no-repeat 0% 0%;
	margin:0;
	padding:20px 10px 10px 20px;
	list-style:none;
	width:220px;
	height:250px;
	
}
ul.navi li{
	margin:0;
	padding:0 0 20px 0;
	background:url(http://www.calenblosso.jp/images/hishiya_mark.png) no-repeat 0px 5px;
	line-height:30px;
	text-indent:50px;
}
ul.navi a{
	color:#ffffff;
	text-decoration:none;
}
ul.navi a:hover{
	color:#E6BDBB;
	text-decoration:none;
}
div#navi_bottom{
	background:url(http://www.calenblosso.jp/images/navi_02.png) repeat 0% 0%;
	padding:0;
	margin:0;
	width:250px;
	height:100%;
}
div.navi_bottom_banner{
	padding:0;
	margin:0 auto;
	text-align:center;
}

/*店長ブログバナーを載せてるボックスです*/
div#blog{
	position:absolute;
	z-index:100;
	padding:0;
	left:70px;
	bottom:60px;
	height:190px;
	width:210px;
	text-align:right;
}

/* ニュース　フェア・イベントを載せてるボックスです*/
div#contents_right{
	position:absolute;
	z-index:20;
	height:350px;
	width:402px;
	right:30px;
	top:30px;
}

div.textbox{
	background-color:#FFF;
	filter: alpha(opacity=90);
  -moz-opacity:0.9;
  opacity:0.9;
	padding:5px 10px 5px 10px;
	margin:0 0 20px 0;
	height:100px;
	width:380px;
	line-height:20px;
	overflow:auto;
	border-left:1px #32312e solid;
	border-right:1px #32312e solid;
	border-bottom:1px #32312e solid;

}
/*ニュース記事1項目*/
ul.newsbox{
	padding:5px;
	margin:0;
	height:40px;
	width:360px;
	border-bottom:#999 dashed 1px;
	list-style:none;
}


.news_contents{
	line-height:40px;
	

}
/*ニュース記事1項目　ニュースの写真*/

ul.newsbox li.photo{
	float:left;
	width:40px;
}

/*ニュース記事1項目　ニュースの記事*/
ul.newsbox li.text{
	float:left;
	margin:0 5px 0 5px;
	width:300px;
	line-height:40px;
}
div.textbox a{
	text-decoration:none;
	color:#333;
}
ul.newsbox li.text a:hover,ul.newsbox li.date a:hover{
	border-bottom:#666666 solid 1px;
}
/*オンラインショップロゴを載せてるボックスです*/
div#footer{
	position:absolute;
	z-index:50;
	padding:0;
	right:0;
	bottom:30px;
	height:100px;
	width:439px;
	text-align:right;
}



/*ここからメールフォーム*/
div#webdock_background {
	margin: 0px;
	padding: 0px;
	filter: alpha(opacity=85);
	-moz-opacity: 0.85;
	-khtml-opacity: 0.85;
	opacity: 0.85;
	width: 600px;
	height: 100%;
	z-index: 10;
	position: fixed!important;
	position/**/:  absolute;
	top: 0;
	right: -600px;
	background-color: #000000;
	font-size: 12px;
	text-align: center;
	_top: expression(document.documentElement && document.documentElement.scrollTop  || document.body && body.scrollTop  || 0 + 0 + 'px');
}
div#webdock_body {
	margin: 0px;
	padding: 20px;
	width: 600px!important;
	width/**/: 600px;
	z-index: 20;
	position: fixed!important;
	position/**/:  absolute;
	overflow: hidden;
	top: 0;
	right: -600px;
	font-size: 12px;
	color: #FFFFFF;
	text-align: left;
	_top: expression(document.documentElement && document.documentElement.scrollTop  || document.body && body.scrollTop  || 0 + 0 + 'px');
}
.webdock_documents {
	display: none;
}
.webdock_click {
	cursor: pointer;
}
.webdock_closed {
	cursor: pointer;
	text-align: right;
	padding: 0px;
	margin: 0px;
}
/*                                            */
/*  news.htmlのCSS　　　　　　    　　　　　 */
/*                                            */
#news{
	position:absolute;
	z-index:30;
	margin-left:-350px;
	padding:0;
	top:150px;
	left:50%;
	width:750px;
}
.news_box{
	margin:0 auto;
	padding:10px;
	height:100%;
	width:730px;
	line-height:25px;
	color:#000;
	text-align:left;
	background-color:#dcdddd;
}
.news_photo_box{
	margin:0;
	padding:0;
	float:left;
}

div.news_box a{
	width:670px;
	text-decoration:none;
	color:#000;
	}

div.news_box a:hover{
	text-decoration:none;
	color:#C00;
	}
	
div.to_online{
	padding:10px;
	line-height:15px;
	background:#992D5A;
	width:420px;
	line-height:20px;
	clear:both;
}
div.to_online a{
	color:#fff;
}
div.to_online a:hover{
	color:#E6BDBB;
}
/*   買い物カゴ     */
div.shoping{
	margin:5px 30px 0 10px;
	padding:0;
	float:left;
	text-align:right;
}
div.shoping2{
	margin:5px 5px 0 0px;
	padding:0;
	float:left;
	text-align:right;
}
div.shoping3{
	margin:5px 0 0 0px;
	padding:0;
	float:left;
	text-align:right;
}

ul.item130px {
clear:both;
height:200px;
list-style:none outside none;
margin:0;
padding:10px 0 0;
width:700px;
}
ul.item130px li {
display:block;
float:left;
height:190px;
margin:0 0 0 0;
padding:5px;
text-align:right;
width:130px;
}
/*                                            */
/*  materialのCSS　　　　　　　　　　　　　　 */
/*                                            */


/*   materialの全体   */
div.material_box{
	position:absolute;
	z-index:50;
	height:750px;
	width:1024px;
	top:100px;
	left:50%;
	margin-left:-512px;
}
/*   materialの西陣織り写真 material_nishizin.html  */
div.material_photo_nishi{
	margin:0;
	padding:0;
	height:550px;
	width:1024px;
	background:url(http://www.calenblosso.jp/images/nishi.jpg) no-repeat 0% 0%;
}
/*   materialのエンボスゼブラ写真 material_ez.html  */
div.material_photo_ez{
	margin:0;
	padding:0;
	height:550px;
	width:1024px;
	background:url(http://www.calenblosso.jp/images/EZ_photo.jpg) no-repeat 0% 0%;
}
/*   materialのPゼブラ写真 material_pz.html  */
div.material_photo_pz{
	margin:0;
	padding:0;
	height:550px;
	width:1024px;
	background:url(http://www.calenblosso.jp/images/pz.jpg) no-repeat 0% 0%;
}
/*   materialのナイロン（ゼブラ）写真 material_snowman.html  */
div.material_photo_sm{
	margin:0;
	padding:0;
	height:550px;
	width:1024px;
	background:url(http://www.calenblosso.jp/images/snowman.jpg) no-repeat 0% 0%;
}
/*   materialのギアナ写真 material_giana.html  */
div.material_photo_giana{
	margin:0;
	padding:0;
	height:550px;
	width:1024px;
	background:url(http://www.calenblosso.jp/images/giana.jpg) no-repeat 0% 0%;
}
/*   sandalのcafeの写真 material_cafe.html  */
div.material_photo_cafe{
	margin:0;
	padding:0;
	height:550px;
	width:1024px;
	background:url(http://www.calenblosso.jp/images/cafe_zouri.jpg) no-repeat 0% 0%;
}
/*   sandalの花緒サンダルの写真 material_hanao.html  */
div.material_photo_hanao{
	margin:0;
	padding:0;
	height:550px;
	width:1024px;
	background:url(http://www.calenblosso.jp/images/hanao_sandal.jpg) no-repeat 0% 0%;
}
/*   sandalのzettaの写真 material_hanao.html  */
div.material_photo_zetta{
	margin:0;
	padding:0;
	height:550px;
	width:1024px;
	background:url(http://www.calenblosso.jp/images/zetta_image.jpg) no-repeat 0% 0%;
}
/*   商品説明ボックス  */
div.material_word{
	padding:10px;
	margin:10px;
	height:490px;
	width:230px;
	background-color:#000000;
	filter: alpha(opacity=80);
  -moz-opacity:0.8;
  opacity:0.8;
	float:right;
	line-height:25px;
	color:#FFF;
}
div.material_word_link{
	margin:0;
	padding:2px;
	background:#725743;
}
/*   商品説明ボックス＿タイトル  */
span.title{
	font-size:15pt;
	font-weight:bold;
}
div.material_word a{
	color:#fff;
	border-bottom:1px #fff solid;
}
div.material_word a:hover{
	color:#E6BDBB;
	border-bottom:1px #E6BDBB solid;
}
/*   布サンプル置き場  */
div.material_cloth{
	padding:0;
	margin:450px 0 0 0;
	height:100px;
	width:740px;
	float:left;
}
ul.cloth_navi{
	padding:0 0 0 0;
	margin:10px 0 10px 5px;
	height:80px;
	width:700px;
	list-style:none;
}
ul.cloth_navi li{
	float:left;
	margin:0 20px 0 0px;
	padding:0;
	height:80px;
	width:120px;
	background:#FFF;
}
/*   リンク置き場  */
ul.sandal_navi{
	clear:both;
	padding:0 0 0 0;
	margin:5px 0 5px 15px;
	height:100px;
	list-style:none;

}
ul.sandal_navi li{
	float:left;
	margin:0 15px 0 0px;
	padding:0;
	height:100px;
	width:100px;
	background:#999;
}
ul.material_navi{
	clear:both;
	padding:0 0 0 0;
	margin:5px 0 5px 65px;
	height:100px;
	list-style:none;
}
ul.material_navi li{
	float:left;
	margin:0 15px 0 0px;
	padding:0;
	height:100px;
	width:100px;
	background:#999;
}


/*topへ戻る*/

div.to_top{
	text-align:center;
	height:25px;
	width:120px;
	float:right;
	margin:0;
	padding:0;
	background:url(http://www.calenblosso.jp/images/foot_top.png) no-repeat 0% 0%;
	line-height:25px;
	color:#FFF;
}

div.to_top a{
	color:#FFF;
	text-decoration:none;
}
div.to_top a:hover{
	color:#E6BDBB;
	text-decoration:none;
}

/*　　　　　　　　　　　　　　　　　  */
/*　ここからの主な使用コンテンツは　  */
/*　work.html consept.html news.html　*/
/*　repair.html　　　　　　　　　　　 */

/*コンテンツ*/

div#contents{
	position:absolute;
	z-index:30;
	margin-left:-350px;
	padding:0;
	top:150px;
	left:50%;
	width:750px;
	background-color:#000000;
	filter: alpha(opacity=80);
  -moz-opacity:0.8;
  opacity:0.8;
	}
div.contents_field{
	margin:0 auto;
	height:100%;
	width:680px;
	line-height:25px;
	color:#ffffff;
	text-align:center;
}
/*ここからコンセプトCSS*/
#grid-content {
	overflow: hidden;
	height: 0;
}
#grid-content div.tate {
    width:200px;
	margin:0;
	padding:0;
}
#grid-content div.yoko {
    width:300px;
	margin:0;
	padding:0;
}

/*ここからOEMのCSS*/
div.contents_oem{
position:absolute;
	z-index:30;
	margin-left:-350px;
	padding:0;
	top:150px;
	left:50%;
	width:750px;
	background-color:#000000;
}

div.about_oem{
	margin:0 auto;
	height:100%;
	width:680px;
	line-height:25px;
	color:#ffffff;
	text-align:center;
}

/*　カラーボックスその１
    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:hidden;
}
#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;
}

/* カラーボックスその２さらに続きます
    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:url(http://www.calenblosso.jp/images/overlay.png) 0 0 repeat;
}
#colorbox{
	}
    #cboxTopLeft{
		width:21px; 
		height:21px; 
		background:url(http://www.calenblosso.jp/images/controls.png) -100px 0 no-repeat;
		}
    #cboxTopRight{
		width:21px;
		height:21px; 
		background:url(http://www.calenblosso.jp/images/controls.png) -129px 0 no-repeat;
		}
    #cboxBottomLeft{
		width:21px; 
		height:21px; 
		background:url(http://www.calenblosso.jp/images/controls.png) -100px -29px no-repeat;
		}
    #cboxBottomRight{
		width:21px; 
		height:21px; 
		background:url(http://www.calenblosso.jp/images/controls.png) -129px -29px no-repeat;
		}
    #cboxMiddleLeft{
		width:21px; 
		background:url(http://www.calenblosso.jp/images/controls.png) left top repeat-y;
		}
    #cboxMiddleRight{
		width:21px; 
		background:url(http://www.calenblosso.jp/images/controls.png) right top repeat-y;
		}
    #cboxTopCenter{
		height:21px; 
		background:url(http://www.calenblosso.jp/images/border.png) 0 0 repeat-x;
		}
    #cboxBottomCenter{
		height:21px; 
		background:url(http://www.calenblosso.jp/images/border.png) 0 -29px repeat-x;
		}
    #cboxContent{
		background:#fff;
		}
        #cboxLoadedContent{
			margin-bottom:28px;
			}
        #cboxTitle{
			position:absolute; 
			bottom:3px; 
			left:0; 
			text-align:center;
			width:100%; 
			color:#949494;
			}
        #cboxCurrent{
			position:absolute; 
			bottom:3px;
			left:58px; 
			color:#949494;
			}
        #cboxSlideshow{position:absolute;
		bottom:3px; 
		right:30px; 
		color:#0092ef;
		}
        #cboxPrevious{
			position:absolute;
			bottom:0;
			left:0px;
			background:url(http://www.calenblosso.jp/images/controls.png) -75px 0px no-repeat; 
			width:25px;
			height:25px; 
			text-indent:-9999px;
			}
        #cboxPrevious.hover{
			background-position:-75px -25px;
			}
        #cboxNext{
			position:absolute; 
			bottom:0; 
			left:27px; 
			background:url(http://www.calenblosso.jp/images/controls.png) -50px 0px no-repeat;
			width:25px; 
			height:25px; 
			text-indent:-9999px;
			}
        #cboxNext.hover{
			background-position:-50px -25px;
			}
        #cboxLoadingOverlay{
			background:url(http://www.calenblosso.jp/images/loading_background.png) center center no-repeat;
			}
        #cboxLoadingGraphic{
			background:url(http://www.calenblosso.jp/images/loading.gif) center center no-repeat;
			}
        #cboxClose{
			position:absolute; 
			bottom:0; right:0;
			background:url(http://www.calenblosso.jp/images/controls.png) -25px 0px no-repeat;
			width:25px;
			height:25px;
			text-indent:-9999px;
			}
        #cboxClose.hover{
			background-position:-25px -25px;
			}

/*　カラーボックスその３
    The following fixes png-transparency for IE6.  
    It is also necessary for png-transparency in IE7 & IE8 to avoid 'black halos' with the fade transition
    
    Since this method does not support CSS background-positioning, it is incompatible with CSS sprites.
    Colorbox preloads navigation hover classes to account for this.
    
    !! Important Note: AlphaImageLoader src paths are relative to the HTML document,
    while regular CSS background images are relative to the CSS document.
*/
.cboxIE #cboxTopLeft{
	background:transparent;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/borderTopLeft.png, sizingMethod='scale');
	}
.cboxIE #cboxTopCenter{
	background:transparent; 
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/borderTopCenter.png, sizingMethod='scale');
	}
.cboxIE #cboxTopRight{
	background:transparent;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/borderTopRight.png, sizingMethod='scale');
	}
.cboxIE #cboxBottomLeft{
	background:transparent;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/borderBottomLeft.png, sizingMethod='scale');
	}
.cboxIE #cboxBottomCenter{
	background:transparent;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/borderBottomCenter.png, sizingMethod='scale');
	}
.cboxIE #cboxBottomRight{
	background:transparent;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/borderBottomRight.png, sizingMethod='scale');
	}
.cboxIE #cboxMiddleLeft{
	background:transparent; 
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/borderMiddleLeft.png, sizingMethod='scale');
	}
.cboxIE #cboxMiddleRight{
	background:transparent; 
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/borderMiddleRight.png, sizingMethod='scale');
	}