@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;
}
.clear{
	clear:both;
}


a:hover img{
filter: alpha(opacity=80);
  -moz-opacity:0.8;
  opacity:0.8;
}
hr.shop_line{
border:2px dotted #aaaaaa;
margin-bottom:10px;
}
hr.shop_line_02{
border:1px dotted #aaaaaa;
padding:5px 0;
}
a.link_shouhin{
	padding:5px;
	border:#666 1px solid;
	margin:10px 0;
}
/*主にニュースで使用してます*/
h4{
	clear:both;
	border-bottom:dashed #666666 1px;
}

.online{
padding:10px;
margin:0 0 10px 0;
}
.online_photo{
float:left;
margin:0 20px 10px 0;
padding:0;
}
.online_text{
float:left;

}
.online_same{
clear:both;
padding:0;
margin:15px 0 15px 0;
}


/* 右寄せのテキストボックスです*/
.right_text{
	clear:both;
	text-align:right;
	padding-bottom:10px;
	line-height:15px;
}
.right_text a{
	color:#fff;
}
.right_text a:hover{
	
}
/* 背景写真を載せてるボックスです　*/
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 0px 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;
}

/*ブログバナーを載せてるボックスです*/

.blog{
	width:208px;
	height:38px;
	margin:0 auto 2px auto;
	padding:0;
	background:url(http://www.calenblosso.jp/images/blog_bg.jpg) no-repeat;
	display:block;
		border:#CCCCCC 1px solid;
}
.blog_photo{
	padding:0;
	margin:2px;
	float:left;
	width:51px;
	height:34px;

	}
	
a img { border-style:none; }
.blog_text{
	padding:4px;
	float:left;
	width:143px;
	height:15px;
	color:#ffffff;
	font-size:11px;
}
.blog_link{
	padding:0 2px 5px 2px;
	float:left;
	width:143px;
	height:9px;
	color:#cccccc;
	font-size:10px;
	text-align:right;
}

/*TWITTER画像中央配置用*/
.category_image2{
	margin:0 auto;
	width:210px;
	text-align:center;
}

.category_image2 p {  
     display: table-cell;  
     vertical-align: middle;  
     margin: 0; 
	 padding:0;
 }  
    
 /*for IE6 */  
 * html .category_image2 p {  
     display: inline;  
     zoom: 1;  
 }  
    
 /*for IE7 */  
 *:first-child+html .category_image2 p {  
    display: inline;  
    zoom: 1;  
 } 
 .category_image2 a{
	 text-decoration:none;
} 
/* ニュース　フェア・イベントを載せてるボックスです*/
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{
	clear:both;
	padding:5px;
	margin:0;
	height:40px;
	width:360px;
	border-bottom:#999 dashed 1px;
	list-style:none;
}
ul.openhours{
	clear:both;
	list-style:none;
	width:393px;
	padding:0;
	margin:0 0 20px 0;
	min-height:180px;
}

.openhours li{
	float:left;
	border:1px solid #bbbbbb;
    border-left:none;
    padding:5px;
	height:30px;
	width:150px;
	display:block;
}
.margin20{
	margin-top:20px;
}

.openhours li.date{
    border-left:1px solid #bbbbbb;
		width:220px;
}
.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:#5369B5;
	}
div.textbox a:hover{
	color:#5369B5;
	}
	
ul.newsbox li.text a:hover,ul.newsbox li.date a:hover,div.under a:hover{
	border-bottom:#6B342E solid 1px;
	color:#5369B5;
}
.under a:visited{
	color:#94503F;
}
/*オンラインショップロゴを載せてるボックスです*/
div#footer{
	position:absolute;
	z-index:50;
	padding:0;
	right:0;
	bottom:30px;
	height:120px;
	width:439px;

}
/*TWITTER画像中央配置用*/
.category_image{
	margin:0 0 0 200px;
}

.category_image p {  
     display: table-cell;  
     vertical-align: middle;  
     margin: 0; 
	 padding:0;
 }  
    
 /*for IE6 */  
 * html .category_image p {  
     display: inline;  
     zoom: 1;  
 }  
    
 /*for IE7 */  
 *:first-child+html .category_image p {  
    display: inline;  
    zoom: 1;  
 }  
 .category_image a{
	 text-decoration:none;
} 
/*ここからメールフォーム*/
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;
	color:#000;
	text-decoration:none;
	}

div.news_box a:hover{
	color:#C00;
	text-decoration:underline;
	}
	
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;
}
.font_size_s{
	font-size:8pt;
}
.red{
	color:#C12024;
}
/*  sutoma用タグ     */
.koiai{
	color:#00F;
}
ul.sutoma{
	font-size:90%;
	list-style:none;
	width:730px;
	height:330px;
	padding:0;
	margin:0 0 20px 0;
	text-align:center;
}
ul.sutoma li{
	float:left;
	width:140px;
	height:310px;
	margin:0 2px 0 0;
	padding:10px 1px 1px 1px;
	background:#FFF;
	border:1px solid #274a78; 
}
ul.sutoma li img{
margin:10px 0;
}
ul.sutoma a{
	line-height:120%;
		color:#00F;
}
.mini_box{
	padding:4px;
	margin:0 10px;
	border:1px solid #274a78;
}
/*   買い物カゴ     */
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;
}
/*                                            */
/*  otorihiki.htmlのCSS　　　　　　    　　　　　 */
/*  
*/
.touroku{
	float:left;
	margin-right:15px;
	padding:0;
}
.touroku .button {
    padding: 10px 15px;
	margin-bottom:5px;
    display: inline;
    background: #777 url(button.png) repeat-x bottom;
    border: none;
    color: #fff;
    cursor: pointer;
    font-weight: bold;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    text-shadow: 1px 1px #666;
    }
.touroku .button:hover {
    background-position: 0 -48px;
    color:#C8E6F7;
    }
.touroku .button:active {
    background-position: 0 top;
    position: relative;
    top: 1px;
    padding: 6px 10px 4px;
    }

.touroku .button.blue {
	background-color: #2c6da0; 
}
.touroku .button.blue a:hover{
	color:#C8E6F7;
}
/*                                            */
/*  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/803.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_onlineshop{
	text-align:center;
	height:25px;
	width:200px;
	float:right;
	margin:0 0px 10px 0;
	padding:0;
	background:url(http://www.calenblosso.jp/images/to_online.png) no-repeat 0% 0%;
	line-height:25px;
	color:#FFF;
}
div.to_onlineshop a{
	color:#FFF;
	text-decoration:none;
}
div.to_onlineshop a:hover{
	color:#E6BDBB;
	text-decoration:none;
}
/*topへ戻る*/

div.to_top{
	clear:both;
	text-align:center;
	height:25px;
	width:120px;
	float:right;
	margin:0 0px 30px 0;
	padding:0;
	background:url(http://www.calenblosso.jp/images/foot_top.png) no-repeat 0% 0%;
	line-height:25px;
	color:#FFF;
}
div.margin_20{
	margin-right:20px;
}
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;
}
/*ここからcompanyCSS*/
.company_text {
	text-align:left;
	width:450px;
	padding-left:100px;
}


/*ここから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');
	}