/*
 Theme Name:   Be-Theme for Bocci Online Shop
 Description:  Be-Theme for Bocci Online Shop
 Author:       N_oO
 Author URI:   http://www.be-index.com
 Version:      1.0.0
*/


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


/****** スタイルインクルード ******/
@import "./assets/css/default.css";
@import "./assets/js/slick/slick.css";
@import "./assets/js/slick/slick-theme.css";
@import "./assets/css/wp.css";
@import "./assets/css/hover-min.css";
@import "./assets/css/botton.css";
@import "./assets/js/fancybox/jquery.fancybox.css";
@import "./assets/css/shop.css";
@import "./assets/css/sns_btn.css";
@import "./assets/css/grid_item.css";
@import "./assets/css/grid_item_perf.css";
@import "./assets/css/gmap.css";
@import "./assets/css/accordion.css";
@import "./assets/css/tooltip.css";
@import "./assets/css/search.css";
@import "./assets/css/input.css";
@import "./assets/css/col.css";
@import "./assets/js/swiper/swiper.min.css";
@import "./assets/js/responsive.slider/responsive.slider.css";
@import "./assets/css/side-tab-style.css";
@import "./assets/css/dl_table.css";
@import "./assets/css/top_parent.css";



/****** カラースタイルインクルード ******/


/*
@import "./assets/css/color/white.css";
@import "./css/color/mulberry.css";
@import "./css/color/blue.css";
@import "./css/color/darkred.css";
@import "./css/color/burntumber.css";
@import "./css/color/brown_gloss.css";

@import "./assets/css/color/wine.css";
*/


/****** Header ******/

header {
	width: 100%;
}

#header-inner {
	width: 1220px;
	margin: 0 auto;
	overflow: hidden;
	*zoom: 1;
}

#tagline {
	float: left;
	padding-top: 5px;
	line-height: 160%;
	font-size: 85%;
}

#logo {
	padding:  0;
}

#logo a {
	display: block;
	max-width: 450px;
}

#telinfo{
	float: right;
	text-align:right;
	padding-top: 0px;
	margin-top: -65px;
	line-height: 150%;
	font-size: 85%;
	color: #000;
}

#telinfo .tel { 
	font-size:220%;
	color: #C00; 
	font-weight: bold;
	line-height: 110%;
	text-shadow:1px 1px 0 #fff;
}


/****** Navi ******/

#gnav {
	clear: both;
	width: 100%;
}

#gnav-btn {
	display :none;
}

#gnav nav {
	width: 1220px;
	margin: 0 auto 2px  auto;
	overflow: hidden;
	*zoom: 1;
}

#gnav nav ul {
	float: left;
}

#gnav nav ul li {
	float: left;
}

#gnav nav ul li a { 
	text-align: center;
	display: block;
	padding:20px 80px;
	font-size: 100%;
}
#gnav nav ul li.last a{padding: 12px 39px 8px; }
#gnav nav ul li.wide_nav a{padding: 12px 35px 8px; }

#gnav nav ul li a span{font-size:75%;display:block;margin-top: -7px;font-style: italic;}

#gnav nav ul li a:link,
#gnav nav ul li a:visited{
	text-decoration: none;
}
#gnav nav ul li a:hover,
#gnav nav ul li a:active,
#gnav nav ul li a.current, 
#gnav nav ul li.current-menu-item a, #gnav nav ul li a:hover, #gnav nav ul li a:active, #gnav navl ul li.current-menu-parent a {
	text-decoration: none;
}

/****** Web Font ******/

/* IE 
@font-face {
	font-family: iconfont;
	src: url(./css/fonts/CONDENSEicon.eot);
}*/
/* Firefox, Opera, Safari 
@font-face {
	font-family: iconfont;
	src: url(./css/fonts/CONDENSEicon.otf) format("truetype");
}

.icon {
	font-family: iconfont;
	font-weight: normal;
}

.icon-list:before {
	content: "\002c7";
}
*/
/****** Contents ******/
/*
#bk{
	
	background-image: url(./images/bk01.png),url(./images/body_bg.jpg);
    background-repeat: repeat-y,repeat;
	background-position: center top,left top;
}
*/
#contents {
	width: 1220px;
	margin: 0 auto;
	padding-top: 20px;
	overflow: hidden;
	*zoom: 1;

}

#braed{
	margin-bottom: 10px;
	padding: 0 10px;
	border-bottom: solid 1px #ddd;
}

#left-column {
	float: right;
	width: 900px;
	padding-bottom: 20px;
	background-color:;
}

#left-column h1, #single-column h1{
	font-size: 145%;
	margin:0 0 20px 0;
	font-weight: bold;
	color: #000;
	letter-spacing:1px;
	border:solid 1px #ddd;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	padding: 8px 0 5px 10px;  
	text-shadow: 1px 1px 0 #fff, 2px 2px 0 #aaa;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,e5e5e5+100;White+3D */
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */	
}
#left-column h1 span a, #single-column h1 span a {/* タイトル編集ボタンの色 */
	text-decoration: none;
	color: #666;
}

#left-column h2, #single-column h2{
	position:relative;
	padding: 7px 0 3px 17px;
	margin-bottom: 15px;
	font-weight: bold;
	font-size: 18px;
	border-radius:3px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
}
 
#left-column h2:before, #single-column h2:before{
	content:''; 
	height:25px; 
	width:2px; 
	display:block; 
	position:absolute; 
	top:5px; 
	left:7px; 
	background-color:#fff;
	border-left: 4px solid #fff;
	border-radius:3px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
}

#left-column h3, #single-column h3{
	border-bottom: #999 solid 1px;
	margin:0 0 10px 0;
	color: #000;
	font-size: 120%;
	font-weight: bold;
}
#left-column h4, #single-column h4{
	border-left: #333 double 8px;
	padding: 3px 0 0 10px;
	margin:0 0 10px 0;
	font-size: 100%;
	font-weight: bold;
	color: #000;
}
#left-column h5, #left-column h6, #single-column h5, #single-column h6{
	font-size: 100%;
	font-weight: bold;
	color: #000;
}
#left-column p {
	margin-bottom:10px;
	
}

#left-column .wc-shortcodes-column p {
	margin-bottom:0px !important;
	
}

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


.item_box{
    position:relative;
    width:95%;
    padding:10px;
    border:solid 1px #CCC;
    margin-bottom:20px;
	border-radius: 6px;
}

#left-column .item_box h2{
	font-size: 120%;
	font-weight: bold;
	color: #000;
	 width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
}

.item_box img.img{
    display:block;
    width:20%;
    float:left;
	border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}


.news-box {
	font-size: 95%;
	color: #555;
	line-height: 160%;
}

.news-box dt {
	float: left;
	width: 10em;
}

.news-box dd {
	margin-left: 10em;
}



.single-exlist.wc-shortcodes-font-awesome-enabled .wc-shortcodes-toggle .wc-shortcodes-toggle-trigger a:before {
    content: none;
}
.page-id-1480513.wc-shortcodes-font-awesome-enabled .wc-shortcodes-toggle .wc-shortcodes-toggle-trigger a:before {
    content: "\f059";
}


#timelabel span.wpcf7-list-item{ display:block;}



#right-column {
	float: left;
	width: 300px;
	padding-bottom: 20px;
	background-color:;
}

.box {
	-webkit-box-shadow: inset 0px 0px 5px #666; /* Safari, Chrome用 */
	-moz-box-shadow: inset 0px 0px 5px #666; /* Firefox用 */
	box-shadow: inset 0px 0px 5px #666; /* CSS3 */
	-webkit-border-radius: 6px; /* Safari, Chrome用 */
	-moz-border-radius: 6px; /* Firefox用 */
	border-radius: 6px; /* CSS3 */
	background: #f1f1f1;
	padding:10px;
	margin-bottom:20px;
}
.box2 {
	-webkit-box-shadow: none; /* Safari, Chrome用 */
	-moz-box-shadow: none; /* Firefox用 */
	box-shadow: none; /* CSS3 */
	-webkit-border-radius: none; /* Safari, Chrome用 */
	-moz-border-radius: none; /* Firefox用 */
	border-radius: none; /* CSS3 */
	background: none;
	padding:0px;
	margin-bottom:20px;
}

.box2_img img{
	border:#999 solid 1px;
	border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
	
}
.single-exlist h1 img{
	margin: 0 3px 4px 0;
	border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
	
}


#right-column .box h2 {
	text-align: center;
	border-bottom: #666 1px solid;
    margin-bottom: 10px;
}
#left-column.box h2 {
	border-left: none !important;
	padding: 0 !important;
	margin: 0 0 5px 0 !important;
	font-size: 100% !important;
	border-bottom: 1px #999 solid;
	font-weight: bold;
	color: #000;
}

.popular_title {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
}


.box  p {
	font-size: 83%;
	line-height: 140%;
}

#right-column .box li {
	padding: 5px 0px;
	text-align: center;
}

#right-column .tel { 
	font-size:150%;
	color: #C00; 
	font-weight: bold;
	line-height: 110%;
	text-shadow: 1px 1px 1px #999;
}

#right-column .tel a:hover {
	text-decoration: none;
}

#right-column .follow li a {
	display: block;
	padding:10px 0;
	width:100%;
	color:#fff;
}

.cat_link {
	line-height:0;
	margin:0 0 10px 0;
}

.follow .flink { margin-right:10px;}
.follow .follow-tw a {
	background-color: #55acee;
}

.follow .follow-fb a {
	background-color: #3b5998;
}

.follow .follow-google a {
	background-color: #dd4b39;
}

.follow .follow-hatena a {
	background-color: #2c6ebd;
}

.icon-hatebu:before {

}

div.contact_form dl dt span.indis {
    color: #CC0000;
    font-size: 120%;
}

#colorm {
	color: #FFF;
	background-color:#000;
	text-align:center;
	margin:auto;
}

.modosu{
	text-align:center;
	margin: 20px auto;
}

/***** contact *******/
div.contact_form{ margin:10px 0; padding:10px;}
div.contact_form dl{padding:10px; }
div.contact_form dl dt  { margin:0 0 5px 0; font-size: 105%;}
/*div.contact_form dl dt:before {
	font-family: iconfont;
	font-weight: normal;
	content: "\00D1";
	 margin:0 2px 0 0;
}*/
div.contact_form dl dd { margin:5px 0 10px 30px;font-size:90%;}
div.contact_form dl dt span.indis{ color:#CC0000;}
div.contact_form dl dt span.example{ margin-left:20px; padding-left:10px; font-size:80%; border-left: 1px dotted #999999;}
div.contact_form dl dd  .wpcf7-list-item { display:block;}

.item_img{float: left; margin:0 10px 0 0;}
.wpcf7-form .testarea  {width: 50%}    /*入力フィールド幅*/
.wpcf7-form textarea    {width: 100%}   /*テキストエリア幅*/

/***** Tel *******/
.tel_info{ color:#EC0000; font-size:200%; font-weight: bold; margin:10px 0 0 5px;}
.tel_info a:link,
.tel_info a:visited,
.tel_info a:hover,
.tel_info a:active {
	text-decoration: none;
	color: #EC0000;
}
/*.tel_info a:before {
	font-family: iconfont;
    content: ";"  !important;
}
*/

/****** Footer ******/
footer {
	width: 100%;
	-moz-box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.5);
	-webkit-box-shadow: inset 1px 4px 9px -6px rgba(0, 0, 0, 0.5);
	box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.5);
	padding:0 0 10px 0;
}

#footer-inner {
	width: 1220px;
	margin: 0 auto;
	padding: 10px 0 10px;
	background: url() no-repeat top center;
}


#footer-inner section.col {
	float: left;
	width: 313px;
	margin: 0 10px;
	line-height: 140%;
}
#footer-inner section.col h1 {
	margin: 5px 0 5px 0;
	font-size: 100%;
	font-weight: bold;
	color: #fff;
}

#footer-inner section.col p {
	font-size: 83%;
	line-height: 140%;
}

#copyright, footer nav{
	text-align: center;
}



footer #copyright ul li, footer nav  ul li {
	display: inline-block;
	*display: inline;
	*margin-bottom: 12px;
	padding: 0 10px 0 15px;
	line-height: 100%;
	font-size: 80%;
	border-left: solid 1px #ccc;
	*zoom: 1;
}

footer #copyright ul li:first-child, footer nav  ul li:first-child {
	border-left: none;
}

footer #footer-inner .menu-footercolnav-container ul li {
	line-height: 130%;
	font-size: 80%;
	margin:0 0 0 20px;
	position: relative;
}
footer #footer-inner .menu-footercolnav-container ul li a {
	color:#fff !important;
}
footer #footer-inner .menu-footercolnav-container ul li::after {
	display: block;
	content: '';
	position: absolute;
	top: .3em;
	left: -1em;
	width: 6px;
	height: 6px;
	background-color: #3498db;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}


/******* Else setting *******/

table{ width:100%; border: 1px #ccc solid;}
th, td{font-size:86%;}
table thead th {font-size:120%; color: #990000; padding: 5px; border-width: 0 0 1px 1px; border-color: #ccc; border-style: solid; background: #ddd; font-weight: bold;  text-align: center;}
table thead td { color: #990000; padding: 5px; border-width: 0 0 1px 1px; border-color: #ccc; border-style: solid;  font-weight: bold; }
table tbody th { color: #555555; padding: 5px; border-width: 0 0 1px 1px; border-color: #ccc; border-style: solid; background: #eee; font-weight: bold; }
table tbody td {  padding: 5px; border-width: 0 0 1px 1px; border-color: #ccc; border-style: solid;}
table tbody td ol {margin: 0;padding: 0 0 0 23px;}
#left-column table tbody td p{margin-bottom:0px;line-height: 150%;}
/*table tbody tr:hover td, 
table tbody tr:hover th{ background: #E4E4E4; color: #FF0000;}*/

table.tbs1{
	margin-bottom:10px;
	}
table.tbs1 td a img {
	min-width:120px !important;
	min-height:100px !important;
	max-width:120px;
	max-height:100px;
	
	}


/******  ページネーション ******/
.next-prev-navi {margin: 10px auto; text-align:center;}
.next-prev-navi .next a, .next-prev-navi .prev a{white-space: nowrap; color: #666666; padding: 2px .4em; border:solid 1px #ccc; border-radius: 3px; text-decoration:none; background:white; line-height:2.5em; }
.next-prev-navi .next a:hover, .next-prev-navi .prev a:hover{ background: #2693FF; color:white;}
.next-prev-navi .next{ float: left;}
.next-prev-navi .prev{ float: right;}

/******  検索Search　ページネーション ******/
.pagenavi { margin: 1em auto; line-height:2em; text-align:center;}
a.page-numbers, .pagenavi .current {  padding: 2px .4em;  border-radius: 3px; text-decoration:none;}




.banner-column {
	margin-bottom:30px;
}
.wc-shortcodes-one-half, .wc-shortcodes-one-third, .wc-shortcodes-two-third, .wc-shortcodes-three-fourth, .wc-shortcodes-one-fourth, .wc-shortcodes-one-fifth, .wc-shortcodes-two-fifth, .wc-shortcodes-three-fifth, .wc-shortcodes-four-fifth, .wc-shortcodes-one-sixth, .wc-shortcodes-five-sixth {
    margin-left: 1%;
}

.wc-shortcodes-one-half { width: 49.5% }
.wc-shortcodes-one-third { width: 32.6% }
.wc-shortcodes-two-third { width: 65.33% }
.wc-shortcodes-one-fourth { width: 22% }
.wc-shortcodes-three-fourth { width: 74% }
.wc-shortcodes-one-fifth { width: 16.8% }
.wc-shortcodes-two-fifth { width: 37.6% }
.wc-shortcodes-three-fifth { width: 58.4% }
.wc-shortcodes-four-fifth { width: 67.2% }
.wc-shortcodes-one-sixth { width: 13.33% }
.wc-shortcodes-five-sixth { width: 82.67% }	


	.display_block{ 
		display: none;
	}




@media screen and (max-width: 1300px) {
	.display_none{ 
		display: none;
	}
	.display_block{ 
		display: block;
	}	

}

@media screen and (max-width: 1150px) {
	#bk{
	background: none;
	}

	#header-inner {
		width: 97%;
	}
	
	#telinfo{
		display:;
		float:none;
		text-align: right;
		padding-top: 0px;
		margin-top: -58px;
		line-height: 150%;
		font-size: 85%;
		color: #000;
	}

	#gnav nav {
		width: 97%;
	}
	
	#gnav nav ul li a, #gnav nav ul li.last a {
		padding: 8px 22px 6px;
		font-size: 85%;
	}

	#contents {
		width: 100%;
	}
	#braed{
		width: 90%;
		margin: 0 auto;
	}

	#left-column, #single-column, #right-column, #footer-inner{
		float: none;
		width: 97%;
		margin: 0 auto;

	}
	#single-column {
		margin-bottom: 30px;
	}
	
	#single-column section.col {
		width: 29%;
		margin:0 0.6%;
	}

	 #right-column .box {
		width: 29%;
		margin:0 0.6%;
	}

	#right-column .box {
		float: left;
	}

	#footer-inner section.col {
		width: 29%;
		margin:0 2%;
	}

	.smartphone-none-adhome{ 
		display:none;
	}

}



/*-----------------------------------------------------	*/
/*	for - 767px					*/
/*-----------------------------------------------------	*/

@media screen and (max-width: 767px) {

	#header-inner {
		width: 100%;
	}

	#tagline {
		float: none;
		padding: 15px 0 5px;
		text-align: center;
	}
    span.kaiin {
	    display: block;
	}
	#logo {
		padding: 0 0 15px;
	}

	#logo a {
		margin: 0 auto;
		max-width:400px;
	}
	
	#gnav {
		padding-top: 5px;
	}

	#gnav-btn {
		display: block;
		width: 50px;
		margin: 0 auto 4px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
	}

	#gnav-btn a {
		display: block;
		height: 25px;
		line-height: 25px;
		color: #ccc;
		font-size: 14px;
		border: solid 1px #111;
		text-align: center;
		vertical-align: top;
		text-decoration: none;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		-webkit-text-shadow: 0px -1px 0px #700;
		text-shadow: 0px -1px 0px #111;
		
	}
	
	#telinfo{
		display:;
		text-align: center;
		margin: 0px 5px;
	}	

	#gnav-btn a:link,
	#gnav-btn a:visited {
		background: url(./images/bg_gradient.png) repeat-x #444;
		background: -moz-linear-gradient(top, #444, #333);
		background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#333));
		background: -webkit-linear-gradient(top, #444, #333);
		background: -o-linear-gradient(top, #444, #333);
		background: linear-gradient(to bottom, #444, #333);
	}
	#gnav-btn a:hover,
	#gnav-btn a:active,
	#gnav-btn a.current {
		background: url(./images/bg_gradient.png) repeat-x #555;
		background: -moz-linear-gradient(top, #555, #444);
		background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#444));
		background: -webkit-linear-gradient(top, #555, #444);
		background: -o-linear-gradient(top, #555, #444);
		background: linear-gradient(to bottom, #555, #444);
	}

	#gnav nav {
		width: 100%;
		overflow: hidden;
	}

	#gnav nav ul {
		display: none;
		float: none;
		width: 100%;
		border-left: none;
		border-right: none;
	}

	#gnav nav ul li {
		float: none;
		width: 100%;
	}

	#gnav nav ul li a,#gnav nav ul li.last a {
		text-align:left;
		display: block;
		padding: 10px 5% 8px;
		font-size: 90%;
		border-left: none;
		border-right: none;
		zoom: 1;
	}
	
	#gnav nav ul li a span{display: none;}

	a:link {
		text-decoration: underline;
		color: #c00;
	}
	
	#right-column .box{
		width: 42%;
		margin:0 1% 10px;
	}


	div.contact_form{ padding-left:0px;}
	div.contact_form dl{padding-left:0px; }
	div.contact_form dl dd { margin-left:5px;}
		
	.item_img{ float:none; margin:0 0 10px 0;}
	.wpcf7-form .testarea  {width: 90%}    /*入力フィールド幅*/
	.wpcf7-form textarea    {width: 100%}   /*テキストエリア幅*/


	.googlead{ 
		display:none;
	}


	footer #copyright ul li {
		display: block;
		  line-height: 150%;
		border-left: solid 0px #ccc !important;
	}

}






/*-----------------------------------------------------	*/
/*	for - 600px					*/
/*-----------------------------------------------------	*/

@media screen and (max-width: 600px) {



	#right-column .box, #footer-inner section.col{
		float: none;
		width: auto;
		margin-bottom: 20px;
	}
	
	.smartphone-none-gmap{ 
		display:none;
	}
	section.rate_number div.num {
	float: none;
	width: 98%;
	line-height: 140%;
	}
	section.rate_number div.num span.nu{
	font-size:200%;
	line-height:120%;
	}
}


/*-----------------------------------------------------	*/
/*	for - 479px					*/
/*-----------------------------------------------------	*/

@media screen and (max-width: 479px) {


	
	.smartphone-none ,#braed, .ad{ 
		display:none;
	}

	.news-box dt {
		float: none;
		width: auto;
	}

	.news-box dd {
		margin: 0 0 10px 0;
	}

	#right-column {
		*margin-bottom: 0;
	}

	#right-column-inner {
		width: 100%;
	}

	#right-column .box, #footer-inner section.col{
		float: none;
		width: auto;
		margin-bottom: 20px;
	}

	#right-column .box .tel {
		font-size: 150%;
	}

	#right-column .btn {
		height: 40px;
		margin: 10px auto 0;
		border-radius: 25px;
		font-size: 90%;
	}

	#right-column .btn a {
		height: 40px;
		line-height: 40px;
		border-radius: 20px;
	}
	


}