@charset "utf-8";
/*
Theme Name: kagurazaka
*/

/* =Reset default browser CSS.
Based on work by Eric Meyer:http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{border:0;font-family:inherit;font-size:100%;font-style:inherit;/*font-weight:inherit;*/margin:0;outline:0;padding:0;vertical-align:baseline;}
:focus{outline:0;}

ol, ul{list-style:none;}
table{border-collapse:separate;border-spacing:0;}
caption, th, td{font-weight:normal;text-align:left;}
blockquote:before, blockquote:after,q:before, q:after{content:"";}
blockquote, q{quotes:"" "";}
a img{border:0;}
figure{margin:0}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display:block;}
/* -------------------------------------------------------------- */

body{
color:#333;
/*font:12px verdana,"ヒラギノ丸ゴ ProN W4","Hiragino Maru Gothic ProN","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;*/
font: 16px	"游明朝体","Yu Mincho",YuMincho,"ヒラギノ明朝 ProN","Hiragino Mincho ProN","ipaexm",ipaexm,serif;
line-height:1.5;
background:#ffffff;
-webkit-text-size-adjust:100%;
background-image: url("images/common/bg_001.png");
background-repeat: repeat;
}

/*html{background:#ffffcc;}*/

/* リンク設定
------------------------------------------------------------*/
a{color:#337db6;text-decoration:none;}
a:hover{color:#246292; text-decoration: underline;}
a:active, a:focus{outline:0;}

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

/* フォーム
------------------------------------------------------------*/
input, textarea{
vertical-align:middle;
max-width:90%;
line-height:24px;
height:24px;
padding:1px 5px;
border:1px solid #ccc;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
font-size:100%;
color:#555;
}

textarea{
height:auto;
line-height:1.5;
}

input[type="submit"],input[type="reset"],input[type="button"]{
padding:3px 10px;
background:#f0f0f0;
border:0;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
line-height:1.5;
height:auto;
font-size:110%;
color:#fff;
}

input[type="submit"]:hover,input[type="reset"]:hover,input[type="button"]:hover{
background:#e4e4e4;
cursor:pointer;
}


/* 全体
------------------------------------------------------------*/
#wrapper{
margin:0 auto;
/*padding:0 1%;
width:98%;
position:relative;*/
}

.inner{
margin:0 auto;
width:100%;
}

.left{
	float: left;
}

.right{
	float: right;
}

.clearfix:after {
  content: "";
  clear: both;
  display: block;
}


/*************
/* ヘッダー
*************/

header{
width: 100%;
margin: 0 auto 0;
border-bottom: 5px solid #722d80;
	}

header #header_wrapper{
width: 960px;
margin: 0 auto 0;
}

/*header h1{
font-size:10px;
font-weight:normal;
}*/

header #logo{
margin: 15px 0 5px;
	}

header #header_wrapper .right{
width: 650px;
}

/*header h2{
font-size:10px;
font-weight:normal;
text-align: right;
}*/

#head_btn_area{
	/*width: 300px;*/
	/*width: 560px;*/
	width: 500px;
	float: right;
	margin: 15px 0 5px;
}

/*.btn_person{
	text-align: right;
}*/

.btn_person img.s-icon{
 width: 25px;
	margin-right: 10px;
}

#boxArea{
	display: table;
	padding: 0 10px 0 2px;
}

#boxArea div.sms-00{
	width:  72px;
	height: 22px;
	float: left;
	padding-right: 10px;
	margin-top: 4px;
}

#boxArea div.sms-01{
	width:  72px;
	height: 22px;
	float: left;
	padding-right: 8px;
	margin-top: 0px;
}

#boxArea div.sms-02{
	width: 86px;
	height: 22px;
	float:left;
	padding-right: 10px;
	margin-top: 4px;
}



/*************
/* ナビゲーション
*************/

nav#nav {
 height: 0px;
	width: 100%;
/*	background: #cc6666;*/
	margin: 0;
	display: inline-block;
	font-size: 14px;
}

#dropmenu {
 list-style-type: none;
 margin: 0px auto 200px;
 padding: 0;
 /*border-radius: 3px 3px 0 0;*/
	width: 820px;
}

#dropmenu li {
  position: relative;
  /*width:100px;*/
  float: left; 
  margin: 0;
  padding: 0 20px;
  text-align: center;
}

#dropmenu li a {
  display: block;
  margin: 0;
  padding: 0px 0 0px;
  color: #000;
  line-height: 1;
  border-left: 1px solid #ffffff;
  text-decoration: none;
}

#dropmenu li:last-child a {
  border-right: 1px solid #ffffff;
}

#dropmenu li ul {
  list-style: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin: 10px 0 0;
  padding: 0;
  border-radius: 3px 3px 3px 3px;
		z-index: 100;
}

#dropmenu li ul li{
  overflow: hidden; 
  width: 200%;
  height: 0;
  color: #ffffff;
  -moz-transition: .2s;
  -webkit-transition: .2s;
  -o-transition: .2s;
  -ms-transition: .2s;
  transition: .2s;    
}

#dropmenu li ul li a{
  padding: 13px 15px;
  background: #ffffff;
  text-align: left;
  font-size: 14px;
  font-weight: normal;
}

#dropmenu li:hover > a{
  color: #722d80;
}

#dropmenu > li:hover > a{
  border-radius: 3px 3px 0 0;
}

#dropmenu li:hover ul li{
  overflow: visible;    
  height: 38px;
  border-top: 0px solid #ffffff;
  border-bottom: 0px solid #006699;
}

#dropmenu li:hover ul li:first-child{ 
  border-top: 0;
}
#dropmenu li:hover ul li:last-child{ 
  border-bottom: 0;
}

#dropmenu li:hover ul li:last-child a{ 
  border-radius: 0 0 3px 3px; 
}


/**************************
/* メイン画像（トップページ）
**************************/
#mainBanner{
margin:0px auto 20px;
text-align: center;
/*border-top: 5px solid #722d80;*/
border-bottom: none;
/*border-bottom: 10px solid #722d80;*/
}

#mainBanner img{
margin: 0px auto 0px;
}

#mainBanner .ttl-top{
margin: 0px auto 0px;
padding: 0px 0 5px;
background: #722d80;
}

#mainBanner p{
margin: 0px auto 0;
text-align: right;
background: #722d80;
color: #fff;
font-size: 24px;
width: 956px;
}

#mainBanner p span{
	color: #FB060A;
}

/**************************
/* TOP　お知らせ　タブ
**************************/

#top-news{
 width: 956px;
	margin: auto;
}

#top-news{
 width: 956px;
	margin: auto;
}

.tab{overflow:hidden;}
.tab li{border: 1px solid #7c7c7c; border-bottom: none; padding:10px 50px; float:left; margin-right:30px; font-size: 14px;}
.tab li.select{background:#7c7c7c; border: none; color: #fff; }
.content li{background:#fff; padding:20px;}
.hide {display:none;}	

table.tbl-news	{ border-spacing: 0px 10px; font-size: 90%; }	
table.tbl-news td	{ border-bottom: 1px solid #ddd; padding: 10px; }	

table.tbl-news td a{color:#0000ff;text-decoration:none;}
table.tbl-news td a:hover{color:#0000cc; text-decoration: underline;}

.i-event {padding: 5px 10px; background: #8b2e3c; color: #fff; text-align: center; width: 80px; display: inline-block; }	
.i-shop {padding: 5px 10px; background: #722d80; color: #fff; text-align: center; width: 80px; display: inline-block; }	
.cat-2 {padding: 5px 10px; background: #8b2e3c; color: #fff; text-align: center; width: 80px; display: inline-block; }	
.cat-3 {padding: 5px 10px; background: #722d80; color: #fff; text-align: center; width: 80px; display: inline-block; }	

.icon-box{width: 80px; text-align: center; }	
.day {padding: 0 10px 0; width: 160px; color: #999999; font-size: 80%; }
.tbl-txt{ text-align: left; width: 700px; }	

.post-categories{ margin: 0; background: #722d80; color: #fff; }	
.post-categories li{ margin: 0; background: #722d80; color: #fff; padding: 0; }	
.post-categories li a{ color: #fff; }	

li.noo table.tbl-news td.icon-box .i-news {
    padding: 5px 10px;
    background: #722d80;
    color: #fff;
    text-align: center;
    width: 80px;
    display: inline-block;
}
/**************************
/* TOP　祭り・地図バナー、神楽坂写真
**************************/

#top-map-area{
 width: 956px;
	margin: 100px auto 100px;
	text-align: center;
}

#top-map-area img{
 margin: 0 10px;
}

#top-sanpo-area{
	display: none;
	/* width: 956px;
	margin: 100px auto 100px;
	text-align: center; */
}

#top-sanpo-area img{
 margin: 0 10px;
}

#foot-img-area{
 width: 956px;
	margin: 100px auto 100px;
	text-align: center;
}

#foot-img-area img{
 margin: 0 10px;
}

#foot-bnr-area{
 width: 100%;
	margin: 100px auto 30px;
	text-align: center;
	background: #fff;
}

.ul-foot-bnr{
 /*width: 956px;*/
	width: 667px;
	margin: 30px auto 30px;
}

.ul-foot-bnr li{
 float: left;
	width: 200px;
	margin: 15px 10px 15px;
	border: 1px solid #ddd;
}

.ul-foot-bnr li a{
display: flex;
}




/**************************
/* フッター
**************************/


/*#contact-box{
 width: 105px;
	height: 91px;
	background-image: url("images/common/btn-contact.png");
	background-repeat: no-repeat;
	margin: 50px auto 50px;
	position: relative;
}

.contct-btn{
	font-size: 12px;
	text-align: center;
	color: #fff;
	position: absolute;
	top: 40%;
	left: 18%;
}

.contct-btn:hover{
	color: #fff;
}*/


#contact-box{
	margin: 50px auto 50px;
	width: 105px;
	height: 91px;
}

.contct-btn{
	display: inline-block;
	width: 105px;
	height: 91px;
	background-image: url("images/common/btn-contact.png");
	background-repeat: no-repeat;	
	font-size: 12px;
	text-align: center;
	color: #fff;
	vertical-align: bottom;
	padding-top:33px; 
}

.contct-btn:hover{
	color: #fff;
	opacity: 0.7;
 filter: alpha(opacity=70);
 -ms-filter: "alpha(opacity=70)";
}

footer{
 width: auto;
	padding: 40px 0px;
	margin: 0 auto 0;
	background: #f1ede1;
	color: #000;
	text-align: center;
/*	background-image: url("images/common/foot-rogo-01.png");
	background-repeat:no-repeat;
	background-position: bottom right;*/
	
background-image:
 url("images/common/icon-noren.png"), /* 最前面の背景レイヤーの背景画像 */
 linear-gradient( to bottom, rgba(255,255,255,0),  #fff );
background-repeat:
 no-repeat, /* 最前面の背景レイヤーに対応 */
	no-repeat;
background-position:
 30% 70%,/* 最前面の背景レイヤーに対応 */
	left;
}

/*.ul-footer-link{
 width: 350px;
	margin: 0px auto 0px;
	text-align: center;
	font-size: 14px;
}

.ul-footer-link li{
	float: left;
	margin: 5px 5px 5px;
	text-align: center;
}*/

.ul-footer-link{
 width: 350px;
	margin: 0px auto 0px;
	text-align: center;
	font-size: 14px;
}

.ul-footer-link li{
	margin: 5px 5px 5px;
 display: inline-block;
}

.footer-cp-area{
 text-align: center;
	color: #545454;
}

.footer-rogo{
 margin: 30px auto 30px;
}

footer a{
	/*color: #000;*/
	color: #545454;
}

.copyright{
	text-align: center;
	color: #545454;
}


#foot-txt-area{
	background: #722d80;
	padding: 10px;
	border-radius: 10px;
	margin: 0px auto 30px;
	width: 630px;
	opacity: 0.7;
}

#foot-txt-area h3{
text-align: center;
color: #fff;
font-weight: bold;
font-size: 140%;
}

#foot-txt-area p{
	margin: 10px auto 10px;
	color: #fff;
	font-weight: normal;
	font-size: 80%;
	text-align: center;
}






/**************************
/* コンテンツ　周辺公共機関
**************************/

h2.h2-01{
 width: 956px;
	border-bottom: 1px solid #ddd;
	padding: 5px 0 10px 35px;
	margin: 20px auto 30px;
	font-size: 24px;
 font-weight: bold;
	background-image: url("images/common/ttl-01.png");
	background-repeat:no-repeat;
	background-position: 0 40%;
}

h2.h2-02{
 width: 956px;
	border-bottom: 1px solid #ddd;
	padding: 5px 0 10px 35px;
	margin: 20px auto 30px;
	font-size: 24px;
 font-weight: bold;
	background-image: url("images/common/ttl-01.png");
	background-repeat:no-repeat;
	background-position: 0 40%;
	text-align: left;
}

	
	.hexagon {
  position: relative;
  width: 30px; 
  height: 17.32px;
  background-color: #8080ff;
  /*	border: 8.66px solid #8080ff;*/
  margin: 8.66px 0;
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
}

.hexagon:before {
  bottom: 100%;
  border-bottom: 8.66px solid #8080ff;
}

.hexagon:after {
  top: 100%;
  width: 0;
  border-top: 8.66px solid #8080ff;
}

	
#contents-area-01{
 width: 100%;
	background-color: #f1ede1;
	padding: 30px 0 100px;
}

.contents-area-01-box{
 width: 956px;
	margin: 0px auto 0px;
}

p.t-center{
 text-align: center;
}

h3.h3-01{
	background: #873b89;
 width: 940px;
	padding: 10px 0 10px 16px;
	margin: 20px auto 0px;
	font-size: 18px;
	color: #fff;
 font-weight: bold;
}

table.tbl-01 {
 width: 956px;
	border-spacing: 1px 1px;
	margin: 10px auto 50px;
}
	
table.tbl-01 th{
 background: #d0bad2;
	padding: 10px;
}

table.tbl-01 th a{
 color: #000;
}

table.tbl-01 td{
 background: #fff;
	padding: 10px;
}


/**************************
/* コンテンツ　店舗情報　一覧
**************************/


.ul-shop-list-box{
 width: 900px;
	margin: 0px auto 0px;
}

.ul-shop-list-box li{
	float: left;
	width: 260px;
	margin: 0px 20px;
}

.ul-shop-list-box h4.h4-02{
 background: #873b89;
 width: 90%;
	padding: 10px 10px 10px ;
	margin: 0px auto 0px;
	font-size: 18px;
	color: #fff;
	font-weight: bold;
}

.ul-shop-list{
 width: 90%;
	margin: 10px auto 0px;
}

.ul-shop-list li{
width: 260px;
margin: 0;
}



table.tbl-shop {
 width: 916px;
	border-spacing: 1px 1px;
	margin: 10px auto 50px;
}
	
table.tbl-shop th{
 background: #d0bad2;
	padding: 10px;
	text-align: center;
}

table.tbl-shop th a{
 color: #000;
}

table.tbl-shop td{
 background: #f2edf4;
	padding: 10px;
}





/**************************
/* コンテンツ　店舗情報　詳細
**************************/

.contents-area-02-box{
 width: 956px;
	margin: 0px auto 0px;
	padding: 20px 0 30px;
	background: #fff;
}

.contents-area-02-box p{
 text-align: left;
	width: 916px;
	margin: 10px auto;
}

table.tbl-02 {
 width: 916px;
	border-spacing: 1px 1px;
	margin: 10px auto 50px;
}
	
table.tbl-02 th{
 background: #d0bad2;
	padding: 10px;
}

table.tbl-02 th a{
 color: #000;
}

table.tbl-02 td{
 background: #f2edf4;
	padding: 10px;
}

.pagenav{
 width: 926px;
	margin: 0px auto 30px;
	padding: 20px 20px;
}

.pagenav .prev{
	float: left;
}

.pagenav .next{
	float: right;
}




.main,
.main li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.main {
	 margin: 0 auto 5px;
	 width: 916px;
		/* ▼画像高さ揃え */
	display:-webkit-box;
 display:-moz-box;
 display:-ms-flexbox;
 display:-webkit-flex;
 display:-moz-flex;
 display:flex;
 -webkit-box-lines:multiple;
 -moz-box-lines:multiple;
 -webkit-flex-wrap:wrap;
 -moz-flex-wrap:wrap;
 -ms-flex-wrap:wrap;
 flex-wrap:wrap;
	
}
.main li {
/*width: 360px;
height: 460px;*/
width: 910px;
height: 450px;
overflow: hidden;
border: 1px #ddd solid;
text-align: center;
display:-webkit-box;
display:-moz-box;
display:-ms-box;
display:-webkit-flexbox;
display:-moz-flexbox;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:-ms-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
	
	/* ▼センター揃え */
display: flex;          /* 2 */
justify-content: center;/* 3 */
align-items: center;    /* 4 */	
}
.main li.item2,
.main li.item3,
.main li.item4,
.main li.item5,
.main li.item6	{
 display: none;
}
	
.main li img {
 width: auto;
 height: auto;
	margin: auto;
	/*text-align: center;
	display: inline-flex;*/
}	
	
	
.main li:hover img {
  opacity: 0.8;
  filter: alpha(opacity=80);
  -ms-filter: "alpha(opacity=80)";
}
.thumb {
 margin: 50px auto 50px ;
	width: 916px;
}
.thumb li {
 margin: 0;
 padding: 0;
 list-style: none;
}
.thumb li {
 /*display: inline-block;*/
	float: left;
 width: 130px;
 height: 100px;
 overflow: hidden;
 cursor: pointer;
	text-align: center;
	margin: 0 4px 4px 0px;
	padding: 8px 8px 8px;
	border: 1px solid #ddd;
	
display:-webkit-box;
display:-moz-box;
display:-ms-box;
display:-webkit-flexbox;
display:-moz-flexbox;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:-ms-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}
	
.thumb li:last-child {
	margin: 0 0px 4px 0px;
	}
	
.thumb li img {
  width: 90%;
  height: auto;
	 margin: auto;
}
.thumb li:hover img {
  opacity: 0.8;
  filter: alpha(opacity=80);
  -ms-filter: "alpha(opacity=80)";
}	

/*#okzoom {
 width:300px;
 box-shadow: 0 3px 5px #888;
}*/
	
#okzoom,#okzoom1,#okzoom2,#okzoom3,#okzoom4,#okzoom5,#okzoom6 {
	/*box-shadow: 0 3px 5px #888;*/
 /*min-height: 600px;*/
	width:500px; 
	margin: 50px auto 50px;
}	
	
ui.main li img {
	margin: auto;
}		





/**************************
/* コンテンツ　神楽坂歳時記
**************************/


.contents-box-01{
 width: 900px;
	margin: 30px auto 40px;
}

.contents-box-01 img{
 border: 10px solid #fff;
 box-shadow:0px 0px 10px;
}

.contents-box-01 img.left{
	margin: 0px 20px 10px 0px;
}

.contents-box-01 img.right{
	margin: 0px 0px 10px 20px;
}

.contents-box-01 p{
 text-align: left;
	width: 90%;
	margin: 10px auto;
}

/*.contents-box-01 p{
	margin: 0px 5px 0px;
}
*/

.btn-area-01{
	margin: 20px auto 20px;
}

.btn-01{
 text-align: center;
	width: 300px;
	padding: 10px 10px 10px;
	background: #8b2e3c;
	color: #fff;
	display: block;
 margin: 50px auto 20px;
}

.btn-01:hover{
	color: #fff;
	opacity: 0.7;
 filter: alpha(opacity=70);
 -ms-filter: "alpha(opacity=70)";
}






/**************************
/* コンテンツ　周辺神社仏閣
**************************/

.bd-01{
	font-weight: bold;
	color: #873b89;
}

.bd-02{
	color: #873b89;
}




/**************************
/* コンテンツ　祭り
**************************/

table.tbl-fes {
 width: 916px;
	border-spacing: 1px 1px;
	margin: 10px auto 50px;
}

/*table.tbl-fes tr{
 border-bottom: 1px solid #000;
}*/
	
table.tbl-fes th{
 background: #d0bad2;
	padding: 10px;
}

table.tbl-fes th a{
 color: #000;
}

table.tbl-fes td.photo-01{
width: 100px;
}

table.tbl-fes td{
 background: #fff;
	padding: 10px;
	vertical-align: top;
	border-bottom: 1px solid #ddd;
}

.fes-box-img{
	margin: 50px auto 50px;
	text-align: center;

}

.fes-box-img img{
	max-width: 800px;
}
	
/**************************
/* コンテンツ　神楽坂まつり
**************************/

.contents-fes-box-01{
 width: 920px;
	margin: 0px auto 0px;
}

.contents-fes-box-01 h3.h3-01{
	background: #873b89;
 width: 900px;
	padding: 10px 10px 10px ;
	margin: 30px auto 0px;
	font-size: 18px;
	color: #fff;
	font-weight: bold;
}

h4.h4-01{
	width: 896px;
	padding: 0px 0px 0px ;
	margin: 30px auto 0px;
	font-size: 18px;
	color: #873b89;
	font-weight: bold;
	border-bottom: 1px dotted #873b89;
}

.contents-area-02-box p.p-txt-fes-01{
	width: 890px;
	padding: 0px 0px 0px ;
	margin: 10px auto 0px ;
}

.photo-k-fes-box-01{
	width: 890px;
	margin: 20px auto 0;
	/* ▼画像高さ揃え */
	display:-webkit-box;
 display:-moz-box;
 display:-ms-flexbox;
 display:-webkit-flex;
 display:-moz-flex;
 display:flex;
 -webkit-box-lines:multiple;
 -moz-box-lines:multiple;
 -webkit-flex-wrap:wrap;
 -moz-flex-wrap:wrap;
 -ms-flex-wrap:wrap;
 flex-wrap:wrap;
}

.photo-k-fes-box-01 li{
float: left;
margin-top: 10px;
	/* ▼センター揃え */
display: flex;          /* 2 */
justify-content: center;/* 3 */
align-items: center;    /* 4 */	
width: 445px;
}

.photo-k-fes-box-01 li img{
	max-width: 435px;
	margin: 3px;
}

.link-txt-fes-01{
	background: #7a0f1f;
	padding: 10px 10px;
	margin: 10px auto;
	text-align: center;
	display: block;
	color: #fff;
	width: 80%;
	border-radius: 5px;        /* CSS3草案 */  
 -webkit-border-radius: 5px;    /* Safari,Google Chrome用 */  
 -moz-border-radius: 5px;   /* Firefox用 */ 
}

.link-txt-fes-01:hover{
	color: #fff;
	opacity: 0.7;
 filter: alpha(opacity=70);
 -ms-filter: "alpha(opacity=70)";
}

.free-txt-fes-01{
	width: 890px;
	padding: 0px 0px 0px ;
	margin: 30px auto 60px ;
}




/**************************
/* コンテンツ　神楽坂MAP
**************************/

table.tbl-k-map {
 width: 916px;
	border-spacing: 1px 1px;
	margin: 10px auto 50px;
}

/*table.tbl-fes tr{
 border-bottom: 1px solid #000;
}*/
	
table.tbl-k-map th{
 background: #d0bad2;
	padding: 10px;
}

table.tbl-k-map th a{
 color: #000;
}

table.tbl-k-map td.photo-01{
width: 50px;
}

table.tbl-k-map td{
 background: #fff;
	padding: 10px;
	vertical-align: top;
	border-bottom: 1px solid #ddd;
}


	

/**************************
/* コンテンツ　FAQ
**************************/

#faq-block h1{
 background: #873b89;
 width: 940px;
	padding: 10px 0 10px 16px;
	margin: 20px auto 30px;
	font-size: 18px;
	color: #fff;
 font-weight: bold;
}

.faq-answer{
margin: 20px auto 60px;
width: 930px;	
}


/**************************
/* 個人情報保護方針
**************************/

p.p-privacy{
	width: auto;
	margin: 10px auto;
}

/**************************
/* お問い合わせ
**************************/

p.p-contact{
	width: auto;
	margin: 10px auto;
	text-align: center;
}

table.tbl-contact {
	border-spacing: 1px 1px;
	margin: 10px auto 50px;
	width: 90%;
}

table.tbl-contact tr{
 border-bottom: 1px solid #000;
}
	
table.tbl-contact th{
 background: #d0bad2;
	padding: 5px;
}

table.tbl-contact th a{
 color: #000;
}

table.tbl-contact td{
 background: #fff;
	padding: 5px;
	vertical-align: top;
	border-bottom: 1px solid #ddd;
}

.contact-box-btn{
	margin: 10px auto 20px;
	width: 80%;
	text-align: center;
}

.contact-box-btn .wpcf7-submit, .contact-box-btn input[type="submit"], .contact-box-btn input[type="reset"], .contact-box-btn input[type="button"] {
    padding: 10px 30px;
    background: #7a0f1f;
    border: 0;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    line-height: 1.5;
    height: auto;
    font-size: 110%;
    color: #fff;
	}

table.tbl-contact td input, table.tbl-contact td textarea {
    vertical-align: middle;
    width: 100%;
    line-height: 24px;
    height: auto;
    padding: 1px 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    font-size: 100%;
    color: #555;
} 

table.tbl-contact td input[type="checkbox"] {
    width: auto;
} 



/**************************
/* コンテンツ　神楽坂商店会とは
**************************/

.contents-area-about-box{
 /*width: 956px;*/
	width: auto;
	margin: 30px auto 0px;
	padding: 0px 0 30px;
	background: #fff;
}

.contents-area-about-box .left{
 width: 480px;
	margin: 0px 10px 0px 20px;
}

.contents-area-about-box .left01{
 /*width: 400px;*/
	width: 460px;
	margin: 0px 0px 0px 20px;
	background: #fff;
	float: left;
}

.contents-area-about-box h4.h4-01{
	background: #873b89;
 width: 400px;
	padding: 10px 10px 10px 10px;
	margin: 10px auto 0px;
	font-size: 18px;
	color: #fff;
 font-weight: bold;
	display: inline-block;
}

.p-box{
 text-align: center;
	margin: 50px auto 30px;
}


/**************************
/* コンテンツ　サイトマップ
**************************/

#contents-area-sitemap{
 width: 100%;
	background-color: #f1ede1;
	padding: 0px 0 100px;
}

.contents-area-sitemap-box{
 width: 956px;
	margin: 0px auto 0px;
	padding: 0px 0 30px;
	background: #fff;
}

.contents-area-sitemap-box .left{
 width: 458px;
	margin: 0px auto 0px;
	padding: 10px 10px 10px;
	background: #fff;
}

.contents-area-sitemap-box h3.h3-01{
	background: #873b89;
 width: 438px;
	padding: 10px 10px 10px;
	margin: 0px auto 0px;
	font-size: 18px;
	color: #fff;
 font-weight: bold;
}

.contents-area-sitemap-box .ul-sitemap{
	margin: 10px 0px 0px 10px;
}


/**************************
/* ページTOP
**************************/

    #pageTop {
      position: fixed;
      bottom: 20px;
      right: 20px;
    }

    #pageTop a {
      display: block;
      z-index: 999;
      padding: 8px 4px 0 4px;
      border-radius: 30px;
      width: 35px;
      height: 35px;
      background-color: #722d80;
      color: #fff;
      font-weight: bold;
      text-decoration: none;
      text-align: center;
    }

    #pageTop a:hover {
      text-decoration: none;
      opacity: 0.7;
    }




/**************************
/* TOP スライダー
**************************/

.wideslider {
    width: 100%;
    text-align: left;
    position: relative;
    overflow: hidden;
}
 
.wideslider ul,
.wideslider ul li {
    float: left;
    display: inline;
    overflow: hidden;
}
 
.wideslider ul li img {
    width: 100%;
    display: none;
}
 
.wideslider_base {
    top: 0;
    position: absolute;
}
.wideslider_wrap {
    top: 0;
    position: absolute;
    overflow: hidden;
 
}
.slider_prev,
.slider_next {
    top: 0;
    overflow: hidden;
    position: absolute;
    z-index: 100;
    cursor: pointer;
}
.slider_prev {background: #fff url(../img/prev.jpg) no-repeat right center;}
.slider_next {background: #fff url(../img/next.jpg) no-repeat left center;}
 
.pagination {
    bottom: 0px;
    left: 0;
    width: 100%;
    height: 15px;
    text-align: center;
    position: absolute;
    z-index: 200;
	   background: #722d80;
	   padding-top: 10px;
}
 
.pagination a {
    margin: 0 5px;
    width: 15px;
    height: 15px;
    display: inline-block;
    overflow: hidden;
    background: #333;
}
.pagination a.active {
    filter:alpha(opacity=100)!important;
    -moz-opacity: 1!important;
    opacity: 1!important;
}
 
 
/* =======================================
    ClearFixElements
======================================= */
.wideslider ul:after {
    content: ".";
    height: 0;
    clear: both;
    display: block;
    visibility: hidden;
}
 
.wideslider ul {
    display: inline-block;
    overflow: hidden;
}





/**************************
/* 検索結果　
**************************/

#pagination {
 width: 95%;
	margin: 40px auto 60px;
}

#pagination li {
	float: left;
}

#pagination li:nth-child(2) {
	float: right;
}


.s-box01{
	/*margin: 10px 0 10px 15px;*/
	margin: 0px auto 0px;
	font-size: 80%;
	float: right;
}


.s-box01 input[type="submit"] {
	color: #000;
	background: #ddd;
}















/**************************
/* TOP　サービス
**************************/

#top-service{
background-image:
 url("images/common/bg-01.png");
	/*padding: 0px 0px 200px;*/
	padding: 0px 0px 0px; 
}

#top-service .h1-box{
background-image:
 url("images/common/service_bg_01.png"), /* 最前面の背景レイヤーの背景画像 */
 linear-gradient( to top, rgba(255,255,255,0),  #fff );
background-repeat:
 no-repeat, /* 最前面の背景レイヤーに対応 */
	no-repeat;
background-position:
 top center,/* 最前面の背景レイヤーに対応 */
	left;
background-size:
	/*contain 100%,*/
	100% auto,
 auto auto;
/* 表示画像の高さ ÷ 表示画像の幅 × 100 */	
padding-top: 30.83%;
}

#top-service h1{
width: 816px;
margin: -15.83% auto 0;
font: 44px	"游明朝体","Yu Mincho",YuMincho,"ヒラギノ明朝 ProN","Hiragino Mincho ProN","ipaexm",ipaexm,serif;
color: #fff;
font-weight: bold;
text-shadow: 2px 2px 4px rgba(30,30,30,1);
-webkit-text-shadow: 1px 1px 4px rgba(30,30,30,1);
}

.service-box{
	width: 816px;
	margin: 0 auto 0;
}

#top-service h2{
margin: 0 auto 0;
padding: 10px 10px 10px;
font: 22px	"游明朝体","Yu Mincho",YuMincho,"ヒラギノ明朝 ProN","Hiragino Mincho ProN","ipaexm",ipaexm,serif;
color: #fff;
/*font-weight: bold;*/
line-height: 1;
background: #cc6666;
border-radius: 8px;        /* CSS3草案 */  
-webkit-border-radius: 8px;    /* Safari,Google Chrome用 */  
-moz-border-radius: 8px;   /* Firefox用 */ 
}


/**************************
/* TOP サービス おすすめ商品
**************************/

.container-grid-5{
	width: 790px;
	margin: 20px auto 100px;
	display: grid;
 grid-gap:10px;
	grid-template-columns: 150px 150px 150px 150px;
 grid-template-rows: 177px 177px 177px ;
}

.container-grid-5 .item{
	 background: #fff;
  padding: 8px 8px 20px;
  border-radius: 8px;
  border: 1px solid #ccc;
	 box-shadow: 1px 1px 2px rgba(153,153,153,1);
  -webkit-box-shadow: 1px 1px 2px rgba(153,153,153,1);
}

.container-grid-5 .item h3{
 width: auto;
	border-radius: 8px;
	background-color: #336633;
	color: #fff;
	padding: 3px 3px 3px;
	text-align: center;
}

.container-grid-5 .item img{
 width: 100%;
}

.container-grid-5 .grid-box-01{
 grid-column: 4 / 6;
	grid-row: 1 / 3;
}

.container-grid-5 .grid-box-02{
 grid-column: 1 / 3;
	grid-row: 2 / 4;
}

/*.container-grid-5 .grid-box-03{
 grid-column: 4 / 3;
	grid-row: 2 / 4;
}
*/

/**************************
/* TOP サービス 商品のご案内
**************************/

.container-grid-3{
	width: 790px;
	margin: 20px auto 100px;
	display: grid;
 grid-gap:25px;
	grid-template-columns: 248px 248px 248px;
 grid-template-rows: 200px 200px 200px ;
}

.container-grid-3 .item-box{
	 background: #fff;
  padding: 8px 8px 8px;
  border-radius: 8px;
  border: 1px solid #ccc;
	 box-shadow: 1px 1px 2px rgba(153,153,153,1);
  -webkit-box-shadow: 1px 1px 2px rgba(153,153,153,1);
	text-align: center;
	height: 140px;
	vertical-align: middle;
}

.container-grid-3 .item h3{
 width: auto;
	border-radius: 8px;
	background-color: #cc6666;
	color: #fff;
	padding: 8px 3px 8px;
	text-align: center;
	margin: 8px auto 0;
}

.container-grid-3 .box-chaitya h3{
	background-color: #996699;
}

.container-grid-3 .item img{
 width: auto;
}


/**************************
/* TOP サービス 最新入荷商品
**************************/

.container-grid-3-01{
	width: 790px;
	margin: 20px auto 100px;
	display: grid;
 grid-gap:60px;
	grid-template-columns: 220px 220px 220px;
 grid-template-rows: 280px ;
}

.container-grid-3-01 .item{
	background: #fff;
 padding: 8px 8px 8px;
 border-radius: 8px;
 border: 1px solid #ccc;
	box-shadow: 1px 1px 2px rgba(153,153,153,1);
 -webkit-box-shadow: 1px 1px 2px rgba(153,153,153,1);
	text-align: left;
}

.container-grid-3-01 .item-box{
	 background: #fff;
  padding: 3px 3px 3px;
  border: 1px solid #ccc;
	 box-shadow: 1px 1px 2px rgba(153,153,153,1);
  -webkit-box-shadow: 1px 1px 2px rgba(153,153,153,1);
	 text-align: center;
}

.container-grid-3-01 .item img{
 width: auto;
}

.container-grid-3-01 .item p{
margin: 10px 5px 20px;
}

.container-grid-3-01 .item p a{
	font-weight: bold;
	color: #990000;
}



#top-information0 .h1-box{
background-image:
 url("images/common/service_bg_02.png"), /* 最前面の背景レイヤーの背景画像 */
 linear-gradient( to bottom, rgba(255,255,255,0),  #fff );
background-repeat:
 no-repeat, /* 最前面の背景レイヤーに対応 */
	no-repeat;
background-position:
 top center,/* 最前面の背景レイヤーに対応 */
	left;
background-size:
	/*contain 100%,*/
	100% auto,
 auto auto;
/* 表示画像の高さ ÷ 表示画像の幅 × 100 */	
padding-top: 30.83%;
}

#top-information0 h1{
width: 816px;
margin: -15.83% auto 0;
font: 44px	"游明朝体","Yu Mincho",YuMincho,"ヒラギノ明朝 ProN","Hiragino Mincho ProN","ipaexm",ipaexm,serif;
color: #fff;
font-weight: bold;
text-shadow: 2px 2px 4px rgba(30,30,30,1);
-webkit-text-shadow: 1px 1px 4px rgba(30,30,30,1);
}



/**************************
/* TOP　Information
**************************/

#top-information{
/*background-image:
 url("images/common/bg-01.png");*/
	padding: 0px 0px 0px; 
}

#top-information .h1-box{
background-image:
 url("images/common/service_bg_02.png"), /* 最前面の背景レイヤーの背景画像 */
 linear-gradient( to bottom, rgba(255,255,255,0),  #fff );
background-repeat:
 no-repeat, /* 最前面の背景レイヤーに対応 */
	no-repeat;
background-position:
 top center,/* 最前面の背景レイヤーに対応 */
	left;
background-size:
	/*contain 100%,*/
	100% auto,
 auto auto;
/* 表示画像の高さ ÷ 表示画像の幅 × 100 */	
padding-top: 30.83%;
}

#top-information h1{
width: 816px;
margin: -15.83% auto 0;
font: 44px	"游明朝体","Yu Mincho",YuMincho,"ヒラギノ明朝 ProN","Hiragino Mincho ProN","ipaexm",ipaexm,serif;
color: #fff;
font-weight: bold;
text-shadow: 2px 2px 4px rgba(30,30,30,1);
-webkit-text-shadow: 1px 1px 4px rgba(30,30,30,1);
}

.information-box{
	width: 816px;
	margin: 0 auto 0;
}

#top-information h2{
margin: 0 auto 0;
padding: 10px 10px 10px;
font: 22px	"游明朝体","Yu Mincho",YuMincho,"ヒラギノ明朝 ProN","Hiragino Mincho ProN","ipaexm",ipaexm,serif;
color: #fff;
/*font-weight: bold;*/
line-height: 1;
background: #cc6666;
border-radius: 8px;        /* CSS3草案 */  
-webkit-border-radius: 8px;    /* Safari,Google Chrome用 */  
-moz-border-radius: 8px;   /* Firefox用 */ 
}

#top-information h2 span{
	float: right;
	color: #fff;
}

#top-information h2 span a{
	color: #fff;
}




/*inst*/
.insta_btn {
  display: inline-block;
  text-align: center;/*中央揃え*/
  color: #2e6ca5;/*文字色*/
  font-size: 17px;/*文字サイズ*/
  text-decoration: none;/*下線消す*/
}
.ooi{
  padding-left:5px;
}

.insta_btn:hover {/*ホバー時*/
  color:#668ad8;/*文字色*/
  transition: .5s;/*ゆっくり変化*/
}

.insta_btn .insta{/*アイコンの背景*/
  position: relative;/*相対配置*/
  display: inline-block;
  width: 50px;/*幅*/
  height: 50px;/*高さ*/
  vertical-align: middle;/*垂直中央に*/
  background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;/*グラデーション①*/
  overflow: hidden;/*はみ出た部分を隠す*/
  border-radius: 13px;/*角丸に*/

}

.insta_btn .insta:before{/*グラデーションを重ねるため*/
  content: '';
  position: absolute;/*絶対配置*/
  top: 23px;/*ずらす*/
  left: -18px;/*ずらす*/
  width: 60px;/*グラデーションカバーの幅*/
  height: 60px;/*グラデーションカバーの高さ*/
  background: -webkit-radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
  background: radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);/*グラデーション②*/
}

.insta_btn .fa-instagram {/*アイコン*/
  color: #FFF;/*白に*/
  position: relative;/*z-indexを使うため*/
  z-index: 2;/*グラデーションより前に*/
  font-size: 35px;/*アイコンサイズ*/
  line-height: 50px;/*高さと合わせる*/
}

.snss{
width:300px;
overflow:hidden;
margin:30px auto 30px auto;
}
.face{
float:left;
width:150px;
padding-top: 10px;
}
.ins{
float:right;
width:150px
}

.fleft{
float:left;
width:55%;
margin-bottom:20px;
}
.fright{
float:right;
width:40%;
}

.sa07,.sa09,.sa11{
background: #873b89;
padding:5px;
margin-bottom:10px;
color:#fff;
font-weight:bold;
}
.sa08,.sa10,.sa12{
margin-bottom:10px;
}
.boxx{
overflow:hidden;
padding:0 20px 0 20px;
}
.sa12{
float:left;
width:65%;
}
.sa13{
float:right;
width:30%;
}
.ok{
text-align:center;
width:20px;
height:20px;
margin:30px auto 30px auto;
}
.ok img{
text-align:center;
}
.boxx img{
width:100%;
height:auto;
}

.mainV{
position:relative;
height:403px;
margin-bottom:50px;
}
.satitle{
    font-size: 20px;
    font-weight: bold;
    text-align: right;
    margin-top: -76px;
    padding:0 20px 0 20px;
}
.sa01 {
    position: absolute;
    top: 259px;
    left: 57px;
    font-size: 100px;
color:#fff;
font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;
}
.sap {
    position: absolute;
    left: 487px;
    width: 414px;
    top: 88px;
    display: block;
    border: 1px solid #cccccc;
    background-color: #fff;
    padding: 5px;
    transform: rotate( 5deg );
    margin: -70px 0px 0px;
    -webkit-box-shadow: 1px 1px 10px 1px #ccc;
    -moz-box-shadow: 1px 1px 10px 1px #ccc;
    box-shadow: 1px 1px 10px 1px #ccc;
}
.sap img{
    width:100%;
    height:auto;
}


.tyu {
    background-image: url(images/tti.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 28px;
    margin: 0 20px 30px 20px;
    font-size: 20px;
    font-weight: bold;
    color: #6d287c;
    padding: 40px;
}

.pc{
display:inherit;
}
.sp{
display:none;
}

.sanpo{
width:90%;
margin:20px auto 20px auto;
overflow:hidden;
}
.sanpo li{
width:45%;
padding:15px;
float:left;
background-image: url(images/bgbg.jpg);
background-repeat: no-repeat;
background-size: cover;
color:#fff;
margin-bottom:20px;
}
.sanpo li:nth-child(even){
float:right;
}
.sanpo li img{
width:100%;
height:auto;
}
.sanpo li .titi{
border-bottom:3px #fff double;
padding-bottom:5px;
margin-bottom:10px;
font-size:20px;
}
.sanpo li .syas {
height:150px;
overflow:hidden;
}
.sanpo li .noo{
margin-top:-60px;
font-size:50px;
text-align:right;
font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;
}
.sanpo li .nexx {
display:block;
float:right;
}
.sanpo li .nexx a{
color:#fff;
background-color:#a479ad;
display:block;
text-align:center;
padding:5px;
margin-top:10px;
width:200px;
}

.gmap{
width:100%;
height:300px;
}
.gmap iframe{
width:100%;
height:300px;
}

.wwa{
width:916px;
margin:0 auto 20px auto;
background:#fff;
text-align:center;
padding:20px;
}


.youtube{
width:1000px;
margin:50px auto 50px auto;
}
.youtube2 {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube2 iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

.tbl-txt .notranslate{
font-weight:bolder;
text-decoration: underline;
}

.ico-pshop{
font-weight:normal!important;
}

a .ico-pshop {
font-weight:normal!important;
color:#333;
text-decoration: none!important;
}

/**************************

/* TOP　Information 20181121

**************************/
.icon-box span.event {
    width: 100%;
    background: #f2b3ff;
    padding: 5px;
}
.icon-box span.info {
    width: 100%;
    background: #b3fff8;
    padding: 5px;
}
.icon-box span.n-shop {
    width: 100%;
    background: #f0ffb3;
    padding: 5px;
}
/**************************

/* ショップ詳細 20181122

**************************/
.main li img {
    width: 100%;
    height: 460px;
    margin: auto;
    object-fit: cover;
}