@charset "utf-8";


/*===========================  全体  ========================*/
html{
height:100%;
}

body {
	font: 100%/1.4 "メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
	color:#333;
	margin: 0;
	padding: 0;
	height:100%; 
	background:	url(../img/bg.gif);
	background: -moz-linear-gradient(top,  hsla(315,100%,13%,0) 0%, hsla(314,100%,6%,0) 54%, hsla(300,100%,0%,1) 100%),url(../img/bg.gif); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,hsla(315,100%,13%,0)), color-stop(54%,hsla(314,100%,6%,0)), color-stop(100%,hsla(300,100%,0%,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  hsla(315,100%,13%,0) 0%,hsla(314,100%,6%,0) 54%,hsla(300,100%,0%,1) 100%),url(../img/bg.gif); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  hsla(315,100%,13%,0) 0%,hsla(314,100%,6%,0) 54%,hsla(300,100%,0%,1) 100%),url(../img/bg.gif); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  hsla(315,100%,13%,0) 0%,hsla(314,100%,6%,0) 54%,hsla(300,100%,0%,1) 100%),url(../img/bg.gif); /* IE10+ */
	background: linear-gradient(to bottom,  hsla(315,100%,13%,0) 0%,hsla(314,100%,6%,0) 54%,hsla(300,100%,0%,1) 100%),url(../img/bg.gif); /* W3C */
    background-attachment: fixed !important;		
	font-size:13px;
	  -webkit-text-size-adjust: 100%;
}

ul, ol, dl { /* ブラウザー間の相違により、リストの余白とマージンをゼロに */
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* 上マージンを削除すると、マージンを含む div からマージンがはみ出す場合があるという問題を回避。残った下マージンにより、後続のエレメントからは離される。 */
	padding-right: 15px;
	padding-left: 15px; /* div 自体ではなく div 内でエレメントの両側に余白を追加すると、ボックスモデル計算が不要に。代わりに、両側に余白を指定した div をネストして使用することも。 */
}

h3 {
	background:url(../img/h3.gif);
	background-repeat:no-repeat;
	height:35px;
	color:FFF;
	margin:40px 0 10px 0 ;
	padding:10px 0 0 48px;
	font-size:16px;
	font-weight:bold;
}

h4,h5,h6 {
	font-size:14px;
	font-weight:bold;
}

a img { /* 一部のブラウザーでイメージをリンクで囲んだ場合に初期設定の青いボーダーを削除 */
	border: none;
}
a:link {
	color: #42413C;
	text-decoration: underline;
}
a:visited {
	color: #6E6C64;
	text-decoration: underline;
}
a:hover, a:active, a:focus { /* キーボードを使用するユーザーに対し、マウスを使用するユーザーと同じホバー効果を */
	text-decoration: none;
}

body > #container {
	height: auto;
}

table{
	width: 800px;
	margin:0 auto;
	border-collapse: collapse;
}
table th{
	width: 17%;
	padding: 4px;
	text-align: left;
	vertical-align: top;
	color: #333;
	background-color: #eee;
	border: 1px solid #b9b9b9;
}
table td{
	padding: 4px;
	background-color: #fff;
	border: 1px solid #b9b9b9;
}

th h3,th h4,th h5,th h6,th p,td h3,td h4,td h5,td h6,td p{
	margin:10px 0;
}

li {
	list-style:none;
}

#container {
	width: 1090px;
	background-image:url(../img/bg_lace01.png);
	background-repeat: repeat-y;
	margin: 0 auto;
	height:100%;
	min-height:100%;
	position:relative;
}




/*===========================  ヘッダ・ナビゲーション   ========================*/
#global_header {
	height:127px;
	width:1000px;
	background:url(../img/nav_head.gif);
	background-repeat:no-repeat;
	background-color: #000;
	padding:1px 0 0 45px;
}

nav#global_nav {
	width:850px;
	height:98px;
	position:absolute;
	top:27px;
	left:215px;
}

nav#global_nav ul li#nav_product,nav#global_nav ul li#nav_about,nav#global_nav ul li#nav_shop,nav#global_nav ul li#nav_blog,nav#global_nav ul li#nav_partner,nav#global_nav ul li#nav_recruit {
	float:left;
	height:30px;
	display:block;
	}

nav#global_nav ul li#nav_product a,nav#global_nav ul li#nav_about a,nav#global_nav ul li#nav_shop a,nav#global_nav ul li#nav_blog a,nav#global_nav ul li#nav_partner a,nav#global_nav ul li#nav_recruit a {
	display: block;
	overflow: hidden;
	height: 0px;
	padding-top: 98px;
}

nav#global_nav ul li#nav_product a { width: 138px; background-image:url(../img/nav_product.gif); }
nav#global_nav ul li#nav_about a { width: 175px; background-image:url(../img/nav_about.gif); }
nav#global_nav ul li#nav_shop a { width: 164px; background-image:url(../img/nav_shop.gif); }
nav#global_nav ul li#nav_blog a { width: 102px; background-image:url(../img/nav_blog.gif); }
nav#global_nav ul li#nav_partner a { width: 116px; background-image:url(../img/nav_partner.gif); }
nav#global_nav ul li#nav_recruit a { width: 125px; background-image:url(../img/nav_recruit.gif); }


nav#global_nav ul li#nav_product a:hover,nav#global_nav ul li#nav_about a:hover,nav#global_nav ul li#nav_shop a:hover,nav#global_nav ul li#nav_blog a:hover,nav#global_nav ul li#nav_partner a:hover,nav#global_nav ul li#nav_recruit a:hover { background-position: 0 -98px; }


/*===========================  左ぶらさがり部分   ========================*/
#nav_left {
	width: 342px;
	z-index: 100;
	position: absolute;
	left: -128px;
}
	

/* 花梨ロゴ */
#nav_karin a {
	display: block;
	overflow: hidden;
	height: 0px;
	width: 342px;
	background-image:url(../img/nav_karin.png);
	padding-top: 183px;
	text-align: center;
}

#nav_karin a:hover {
	background-position: 0 -183px;
}

/* Twitter */
#nav_twitter {
	display: block;
	overflow: hidden;
	height: 0px;
	width: 183px;
	background-image:url(../img/nav_twitter.png);
	padding-top: 91px;
	text-align: center;
	position:absolute;
	top:183px;
	left:49px
}

/* Facebook */
#nav_fb {
	display: block;
	overflow: hidden;
	height: 0px;
	width: 183px;
	background-image:url(../img/nav_fb.png);
	padding-top: 91px;
	text-align: center;
	position:absolute;
	top:274px;
	left:49px
}

/* Chatnoir Omega */
#nav_chatnoir a {
	display: block;
	overflow: hidden;
	height: 0px;
	width: 183px;
	background-image:url(../img/nav_chatnoir.png);
	padding-top: 138px;
	text-align: center;
	position:absolute;
	top:365px;
	left:49px
}

#nav_chatnoir a:hover {
	background-position: 0 -138px;
}

/* karinto */
#nav_karinto a {
	display: block;
	overflow: hidden;
	height: 0px;
	width: 183px;
	background-image:url(../img/nav_karinto.png);
	padding-top: 138px;
	text-align: center;
	position:absolute;
	top:503px;
	left:49px
}

#nav_karinto a:hover {
	background-position: 0 -138px;
}

/*Twitter・facebook数取得*/
#socialarea_twitter {
	position:absolute;
	top:198px;
	left:71px
}

iframe.twitter-share-button {
width: 58px!important;
}

#socialarea_facebook {
	position:absolute;
	top:288px;
	left:118px
}


/*===========================   スライダー  ========================*/
#slider{
     background : #fff url(images/loading.gif) no-repeat 50% 50%;
}

#slider img { display:none; }

/* ページャーに画像を使っている場合 */
.nivo-controlNav a img {
     display : bloack;
}

/*===========================   3列バナー  ========================*/
#banner_set {
	width:870px;
	margin:0 auto;
}

#banner_set img {
	margin:0 4px 10px 0;
}


#banner_set a:hover img{
	opacity:0.7;
filter: alpha(opacity=70);
-ms-filter: "alpha( opacity=70 )";

}

/*===========================   INFO(臨時)  ========================*/

#info {
	width:840px;
	margin:0px auto 30px auto;
	color:#333;
	font-size:14px;
	border:1px solid #333;
	padding:10px;
	text-align:left;
	line-height: 160%;
}
#info h2 {
	text-align:center;
	font-size:16px;
	margin:12px 0 10px 0;
}

/*===========================   新着情報  ========================*/
#whats-new {
	width:870px;
	margin:0 auto;
}

#whats-new h2,#backnumber h2  {
	overflow: hidden;
	height: 0px;
	background-image:url(../img/h_new.gif);
	padding-top: 53px;
	margin:0px 0 5px 0;
}

#whats-new ul {
	list-style:none;
	position:relative;
	top:-28px;
}

#backnumber ul {
	margin:20px 0 0 0;
}

#whats-new li,#backnumber li {
	border-bottom:#C90 dotted 1px;
	padding:7px;
}

#backnumber li {
	font-size:12px;
	padding:10px;

}

#whats-new li a,#backnumber li a{
	text-decoration:none;
	color: #C9456A;
}

#whats-new li a:hover,#backnumber li a:hover{
	text-decoration:none;
	background:#51325d;
	color:#FFF;
}
#whats-new img {
	position:relative;
	left:720px;
	top:-28px;
}

#whats-new a:hover img{
	opacity:0.6;
filter: alpha(opacity=60);
-ms-filter: "alpha( opacity=60 )";

}

/*===========================   メイン下部　全体  ========================*/
#widget {
	width:870px;
	margin:30px auto;
}

/*===========================  メイン下部　Twitter  ========================*/
#twitter {
	width:400px;
	float:left;
	margin:0 35px 40px 0;
}

#twitter h2 {
	overflow: hidden;
	height: 0px;
	background-image:url(../img/h_twitter.gif);
	padding-top: 53px;
	margin:20px 0 10px 0;
}


/*===========================  メイン下部　PV  ========================*/
#PV {
	width:400px;
	float:left;
	margin:0 0 40px 35px;
}

#PV  h2 {
	overflow: hidden;
	height: 0px;
	background-image:url(../img/h_pv.gif);
	padding-top: 53px;
	margin:20px 0;
}


#btn_PV a{
	display: block;
	overflow: hidden;
	height: 0px;
	width: 363px;
	background-image:url(../img/btn_pv.jpg);
	padding-top: 75px;
	margin:20px auto;

}

#btn_PV a:hover {
	background-position: 0 -75px;
}

/*===========================  メイン下部　LINK  ========================*/

#site_menu01 p{


	display:inline;
	position:relative;
	left:140px;
	padding:10px;

}
#site_menu01{
	clear:both;
	border-top:1px dotted #000;
	width:870px;
	margin:10px auto;
	padding:25px 0 0;
}

#site_menu02 p{
	display:inline;
	position:relative;
	left:50px;
	padding:10px;
}

#site_menu02{
	width:400px;
	margin:10px auto;
	padding:10px;

}

#site_link img {
		float:left;
		margin:0 20px 0 80px;
}


#site_link {
	clear:both;
	width:870px;
　　margin:20px auto;
	border-top:1px dotted #000;
	position:relative;
	margin:10px auto;
	padding:20px 0 ;
}


#site_link p{
	display:inline;
	margin:0;
	padding:0;
}


/*===========================   フッター  ========================*/
#global_footer {
	clear:both;
	display:block;
	height:100%;
	width:1000px;
	background:#000;
	color:#FFF;
	text-align:center;
	font-size:12px;
	margin:10px auto;
	padding:10px 0;
}

/*★★★★★★★★★★★★★   ここから個別ページ  ★★★★★★★★★★★★★*/
article#product,article#about,article#partner,article#recruit,article#mailform,article#music,article#calendar,#backnumber,#event {
	width:800px;
	margin:50px auto;	
}


/*===========================   Product  ========================*/

#product section {
	margin:60px auto;
}


#product h2 {
	overflow: hidden;
	height: 0px;
	background-image:url(../img/h_product.gif);
	padding-top: 53px;
	margin:0 auto;
}

/* タイトル */
#product h3 {
	width:500px;
	color:#B4855D;
	background:none;
	margin:0;
	padding:0 3px;
}

/* ジャンル */
#product h4 {
	width:500px;
	color:#752B66;
	font-size:12px;
	margin:0;
	padding:0 3px;
}

/* キャッチ */
#product h5 {
	clear:both;
	font-size:15px;
	font-weight:normal;
	color:#000;
	padding: 0 0 0 220px;
	border-bottom:1px dotted #326489;
	position:relative;
	top:-10px;
	margin-bottom:19px;
}

#product p {
	font-size:12px;
	margin:3px;
	padding:0px;

}

#product section img {
	/* 	傾き */
	width:auto;
	height:200;
	position:relative;
	top:-50px;
	left:-10px;
	float:left;
	/*border:2px solid #B4855D;*/
	/* シャドウ */
}


#product div {
	margin:-10px 0 0 210px;
	text-align:left;
}

#product table{
	width: 610px;
	border-collapse: collapse;
	margin:0 0 0 30px;
}

#product table th{
	width: 50%;
	padding: 1px 0;
	text-align: left;
	vertical-align: top;
	color: #333;
	border-style: none;
	}
	
#product table td{
	padding: 1px 0;
	border-style: none;
}

/*ボタン*/
.btn_product_site a,.btn_product_butaiura a,.btn_product_shop a,.btn_product_line a{
	display: block;
	float:left;
	overflow: hidden;
	height: 0px;
	width: 169px;
	padding-top: 35px;
	margin:20px 12px 40px;
}

.btn_product_site a:hover,.btn_product_butaiura a:hover,.btn_product_shop a:hover,.btn_product_line a:hover {
	background-position: 0 -35px;
}

.btn_product_site a{
	background-image:url(../img/btn_product_site.jpg);
}

.btn_product_butaiura a{
	background-image:url(../img/btn_product_butaiura.jpg);
}

.btn_product_shop a{
	background-image:url(../img/btn_product_shop.jpg);
}

.btn_product_line a{
	background-image:url(../img/btn_line_shop.jpg);
}

#product section span{
	clear:both;
	display:block;
	width:800px;
	height:18px;
	margin:0p; auto;
	background-image:url(../img/hr_01.gif);
}

#product aside a:hover img {
opacity:0.8;
filter: alpha(opacity=80);
-ms-filter: "alpha( opacity=80 )";
}


/*===========================  About   ========================*/

#about h2 {
	overflow: hidden;
	height: 0px;
	background-image:url(../img/h_about.gif);
	padding-top: 53px;
	margin:0 auto;
}

.about_atfirst {
	font-size:15px;
	line-height:1.8;
}

.about_atfirst p{
	margin-bottom:30px;
}

#about_sonoe {
	text-align:right;

}

.about_sonoe_name {
	margin:20px 0 20px 0;
	padding:20px 10px 10px 0px;
	border-bottom:1px #B4855D dashed;

}

.about_sonoe_name,#about_sonoe img {
	float:right;
	margin:20px 0 30px 5px;
}


.about_sonoe_writer {
	clear:both;
	padding:0;
}



/*===========================  Partner   ========================*/
#partner h2 {
	overflow: hidden;
	height: 0px;
	background-image:url(../img/h_partner.gif);
	padding-top: 53px;
	margin:0 auto;
}
#partner table {
	margin:30px 0 0 0 ;
}

#partner table th{
	width: 28%;
}

/*===========================  Recruit   ========================*/
#recruit h2 {
	overflow: hidden;
	height: 0px;
	background-image:url(../img/h_recruit.gif);
	padding-top: 53px;
	margin:0 auto;
}

#recruit img {
	padding:10px 20px;
}

/*===========================  Calendar   ========================*/
#calendar h2 {
	overflow: hidden;
	height: 0px;
	background-image:url(../img/h_calendar.gif);
	padding-top: 53px;
	margin:0 auto 20px;
}

#calendar h3 {
	background:none;
	margin:10px 0 5px 0;
	padding:10px 0 0 10px;
	font-size:16px;
	font-weight:bold;
	border-bottom:1px solid #333;
	color: #B17427;
}

#calendar p {
	margin:2px;
}

#calendar .month {
	font-size:30px;
	margin:0 10px 0 0;
}

#calendar .next_year {
	color: #8D8D8D;
}

#calendar table{
	width: 800px;
	margin:0 auto;
	border-collapse: collapse;
}

#calendar table th{
	width: 10%;
	background-color: #FFF;
	border: none;
}

#calendar table td{
	background-color: #fff;
	border: none;
}

#calendar .right_line{
	border-right:1px solid #ccc;
}


/*===========================  Karin Music   ========================*/
#music h2 {
	overflow: hidden;
	height: 0px;
	background-image:url(../img/h_music.gif);
	padding-top: 53px;
	margin:0 auto;
}

/*===========================  メールフォーム   ========================*/
#mailform h2 {
	overflow: hidden;
	height: 0px;
	background-image:url(../img/h_mailform.gif);
	padding-top: 53px;
	margin:0 auto 30px;
}
#mailform img {
	width:150px;
	height:auto;
	margin:0 0 20px 0;
}

#mailform p {
	margin:0;
	padding:20px 0 2px;
}

#mailform textarea{
	width:500px;
	border: 1px solid #000;
	background: #E5DEE7;
}

#mailform input {
	border: 1px solid #000;
	background: #E5DEE7;
}

/*===========================  汎用   ========================*/
.txt_bold {
	font-weight:bold;
}

.txt_red {
	color:#C03;
}

.txt_blue {
	color: #006ACC;
}

.txt_left {
	text-align:left;
	
}

.txt_right {
	text-align:right
}

.txt_center {
	text-align:center;
}

.margin_top_5px {
	margin-top:5px;
}

.margin_top_10px {
	margin-top:10px;
}

.margin_left_20px {
	margin-left:20px;

}

.margin_bottom_5px {
	margin-bottom:5px;
}


.margin_bottom_10px {
	margin-bottom:10px;
}

.margin {
	margin:5px;
}

.margin {
	margin:10px;
}

.inline {
	display:inline;
}

padding_top_5px {
	padding-top:5px;
}


padding_top_10px {
	padding-top:10px;
}

padding_bottom_5px {
	padding-bottom:5px;
}

padding_bottom_10px {
	padding-bottom:10px;
}


/*===========================  イベントPOP   ========================*/
#top_pop img {
	 width: 284px;
	 height: 135px;
	 z-index: 11;
	 position:fixed;
	bottom:10px;
	right:50%;
	margin-right:-830px;
	 opacity: 0.5;
	 filter: alpha(opacity=50);
	 -moz-opacity: 0.5;	
}

a.clickbtn_green {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#87e0fd+0,53cbf1+40,05abe0+100;Blue+3D+%23+16 */
background: #87e0fd; /* Old browsers */
background: -moz-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0 ); /* IE6-9 */
	    border: 1px solid #0099CC;
	    color: #FFFFFF;
	    border-radius: 4px;
	    -moz-border-radius: 4px;
	    -webkit-border-radius: 4px;
	    -moz-box-shadow: 1px 1px 1px rgba(000,000,000,0.3);
	    -webkit-box-shadow: 1px 1px 1px rgba(000,000,000,0.3);
		width:auto;
	    min-width: 100px;
	    padding: 6px 6px;
		text-decoration: none;!important;
		font-size:14px;
		display: inline-block;
}


a.clickbtn:hover ,a.clickbtn_red:hover ,a.clickbtn_green:hover ,a.btn_hover:hover {
  opacity: 0.7;
  filter: alpha(opacity=70); /* ie lt 8 */
  -ms-filter: "alpha(opacity=70)"; /* ie 8 */
  -moz-opacity: 0.7; /* FF lt 1.5, Netscape */
  -khtml-opacity: 0.7; /* Safari 1.x */
  zoom: 1;
}

.goods-rahu-div { display:inline-block;}

.goods-rahu-div table {
	width: 350px;
	margin:0 auto;
	border-collapse: collapse;
}

.goods-rahu th{
	width: 110px;
	padding: 4px;
	text-align: center;
	vertical-align: top;
	color: #333;
	background-color: #eee;
	border: 1px solid #b9b9b9;
}
.img-guard{
user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-webkit-user-select:none;
-khtml-user-select:none;
-webkit-user-drag: none;
-khtml-user-drag: none;
-webkit-touch-callout: none;
}