@charset "utf-8";
/*
Theme Name: バンビの会
Theme URI: http://d-webjoy.com
Description: バンビの会で使用しているオリジナルテンプレート
Version: 1
Author: <a href="http://d-webjoy.com">合同会社WebJoy</a>
*/

body{
	background:url(images/bk_top_img.jpg) left 130px no-repeat;
	font-family:"メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:90%;
}

body #bk_head1{
	background:url(images/bk_top_img2.jpg) right 130px no-repeat;
}

body #bk_head2{
	background:url(images/top_img.png) center 130px no-repeat;
}

body.nextbody{
	background:url(images/next_img.jpg) center 130px no-repeat;
	font-family:"メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	-moz-background-size:100% auto;
	background-size:100% auto; 
}

body #wrapper{
	max-width:970px;
	width:100%;
	margin:0 auto;
}
.grecaptcha-badge { visibility: hidden; }
img{
	max-width:100%;
}

h4{
	font-weight:bold;
	font-size:120%;
}

h2 img{
	margin:0 auto;
}

/*---------------------------------------------------

#header

---------------------------------------------------*/

body #container{
	background:url(images/bk_header.jpg) left top repeat-x;
	text-align:left;
}

body #wrapper #header{
	width:100%;
	height:560px;
}
body.nextbody #wrapper #header{
	width:100%;
	height:230px;
}
body #wrapper #header #headerLeft{
	max-width:376px;
	width:39.6%;
	float:left;
}
body #wrapper #header #headerRight{
	max-width:376px;
	width:39.5%;
	float:right;
}
body #wrapper #header #headerRight ul.primaryMenu li img:hover,
body #wrapper #header #headerLeft ul.primaryMenu li img:hover{
	opacity: 0.7;
}

body #wrapper #header #headerLeft ul.primaryMenu li,
body #wrapper #header #headerRight ul.primaryMenu li{
	margin:0;
	padding:0;
	display:inline;
	width:50%;
}
body #wrapper #header #headerLeft ul.primaryMenu li.fontsize{
	display:none;
}
body #wrapper #header #headerLeft ul.gNav li,
body #wrapper #header #headerRight ul.gNav li{
	display:block;
	width:50%;
	float:left;
}

body #wrapper #header #headerCenter{
	max-width:198px;
	height:190px;
	width:20.85%;
	float:left;
	background:url(images/title.jpg) no-repeat;
}
body #wrapper #header #headerCenter h1{
	text-indent:-9999px;
	height:0;
}

/*---------------------------------------------------

トップページ

---------------------------------------------------*/

#top_width{
	width:100%;
	margin-top:3em;
	max-width:960px;
}

#top_width #floatLeft{
	width:56%;
	float:left;
}

#top_width #floatRight{
	width:42%;
	float:right;
}

#top_width #floatRight h3{
	border-top:1px #000 solid;
	border-bottom:1px #000 solid;
	padding:7px 0;
	margin:0 0 5px;
	font-size:120%;
	font-weight:bold;
}

#top_width #floatRight dl{
	border-bottom:1px #ccc dotted;
	padding:0 0 5px;
	margin:5px 0 5px;
	width:100%;
}

#top_width #floatRight dl dt{
	float:left;
	width:6em;
}

#top_width #floatRight dl dd{
	margin:0 0 0 6.5em;
}

#top_width #floatRight ul,
ul.shibulist{
	width:100%;
}
#top_width #floatRight ul li,
ul.shibulist li{
    display: inline-block;
    position: relative;}

#top_width #floatRight ul li{
    margin-right: 5px;
}

#top_width #floatRight ul li a{
    background: none repeat scroll 0 0 #AEE1DC;
    border-radius: 100px;
    color: #000;
    display: table-cell;
    font-size: 14px;
    height: 100px;
    margin: auto;
    padding: 10px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    vertical-align: middle;
    width: 100px;
    z-index: 0;
}
#top_width #floatRight ul li.banbi_illust span{
	display: inline-block;
	width: 120px;
	height: 120px;
    vertical-align: bottom;
}
ul.shibulist li a{
    background: none repeat scroll 0 0 #AEE1DC;
    border-radius: 80px;
    color: #000;
    display: table-cell;
    font-size: 14px;
    height: 80px;
    margin: auto;
    padding: 10px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    vertical-align: middle;
    width: 80px;
    z-index: 0;
}

#top_width #floatRight ul li a:hover,
ul.shibulist li a:hover{
    background: none repeat scroll 0 0 #256660;
    color: #fff;
}
#voice{
	width:100%;
	max-width:800px;
	background:url(images/bk_message.jpg);
	border:2px #ccc solid;
	margin:3em auto 2em;
}

#voice h2{
	text-align:center;
	margin:20px auto;
}
#voice h3{
	font-size:150%;
	text-align:center;
}
#voice h4{
	font-size:100%;
	text-align:center;
	font-weight:bold;
	margin:0 0 1em;
}
#voice .voiceBox{
	width:70%;
	padding:2em;
	margin:0 auto 5em;
	border:1px #ccc solid;
	background:#fff;
}



/*---------------------------------------------------

固定ページ

---------------------------------------------------*/

#contents{
	width:100%;
	margin:0 0 3em;
}
#main{
	float:left;
	max-width:650px;
	width:70%;
	margin:0 2% 0 0;
	text-align: left;
}
#main h2{
	background:url(images/bk_h2.jpg) no-repeat center left #256660;
	padding:20px 0 12px 50px;
	color:#ffffff;
	font-size:140%;
	border-radius:5px;
	margin:0 0 10px;
}


#main h3{
	
	background:url(http://banbinokai.com/wp-content/uploads/2015/04/h3_mark.jpg) no-repeat center left;
	padding:2px 0 0 30px;
	border-bottom:solid 2px #FF9797;
	font-size:120%;
	margin:0 0 10px;
}

#main p{
	margin:10px 0;
	text-align:left;
}


#main table{
	width:100%;
	text-align:left;
	margin:0  0 1em;
}

#main table.tableTop{
	margin-top:1em;
}

#main table th{
	width:30%;
	background:#666;
	padding:15px 15px 15px 10px ;
	color:#ffffff;
	border:1px solid #fff;
}

#main table td{
	width:70%;
	background-color:#eee;
	padding:15px 15px 15px 10px ;
	border:1px solid #fff;
}

#enkaku{
	width:100%;
	text-align:left;
	margin:0 0 30px;
}

#enkaku dl{
	width:100%;
}

#enkaku dt{
	float:left;
	max-width:180px;
	width:30%;
	border-bottom:2px dotted #FF9797;
}

#enkaku dd{
	float:right;
	max-width:470px;
	width:70%;
	border-bottom:1px dotted #FF9797;
}

#step{
	background:url(http://banbinokai.com/wp-content/uploads/2015/04/bg_step.jpg) center top no-repeat;
	width:100%;
	min-height:200px;
	border:1px solid #FF9797;
	margin: 0 0 10px;
}

.stepbox{
	float:left;
	width:31%;
	padding:0 1%;
}

.stepbox span{
	display:block;
}

.stepbox h4{
	font-weight:bold;
	font-size:110%;
	margin:10px 0 5px;
	text-align:center;
}

.stepimg{
	text-align:center;
}

.stepbox p{
	font-size:80%;
}

#kaiin{
	width:100%;
}
#kaiin dl{
	width:31%;
	padding:0 1%;
	float:left;
}

#kaiin dl dt{
	background-color:#FF9797;
	padding:10px 0;
	text-align:center;
	border-radius:10px;
	color:#fff;
	margin:0  0 10px;
	font-weight:bold;
}

#kaiin dl dd p{
	border:1px solid #FF9797;
	/* Firefox */

	background: -moz-linear-gradient(top center, #fff 0%, #FFE3E3 100%);

/* Chrom と Safari */

	background: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#FFE3E3));

/* 共通 */

	background: linear-gradient(top center, #fff 0%, #FFE3E3 100%);
	
	padding:10px 2%;
	border-radius:10px;
	margin:0 0 5px;
}

.bold span{
	display:block;
	text-align:right;
	font-size:10px;
}

.naiyo{
	min-height:95px;
}
.bold{
	font-weight:bold;
	min-height:50px;
}
#main #kaiin dl dd p.one{
	font-size:120%;
	text-align:center;
	padding-top:30px;
}

body #main table.kaiin{
	width:100%;
	border:1px solid #FF9797;
}

body #main table.kaiin th{
	text-align:center;
	padding:10px;
	color:#ffffff;
	background-color:#FF7B7B;
	border:1px solid #FF9797;
}

body #main table.kaiin td{
	text-align:center;
	padding:10px;
	width:30%;
	background-color:#fff;
	border:1px solid #FF9797;
}

#kaihou{
	width:100%;
}

#kaihou_img{
	float:left;
	width:30%;
}

#kaihou_table{
	float:right;
	width:70%;
}

#kaityo_img{
	text-align:center;
}


/*---------------------------------------------------

#sidebar

---------------------------------------------------*/

#sidebar{
	max-width:280px;
	float:right;
	width:28%;
}

#sidebar p{
	margin:0 0 1em;
}
#sidebar .joinLbl{
	background:#23655F;
	color: #fff;
	text-align: center;
	font-weight: bold;
	padding: 7px 7px 5px;
	font-size: 16px;
	border-radius: 5px 5px 0 0;
}
#sidebar .joinBox{
	border: 1px #23655F solid;
	background: #fff;
	padding: 10px;
	margin-bottom: 15px;
	border-radius: 0 0 5px 5px;
}
#sidebar .joinBox p{
	margin-bottom: 7px;
}
#sidebar .joinBox p:last-child{
	margin-bottom: 0;
}
#sidebar .joinBox p a img{
	transition: 0.3s;
}
#sidebar .joinBox p a img:hover{
	opacity: 0.8;
}
#sidebar .joinItem{
	border-bottom: 1px #23655F dotted;
	padding-bottom: 7px;
	margin-bottom: 7px;
}
#sidebar .joinItem:last-child{
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0;
}
#sidebar h3{
	background-color:#E49296;
	color:#ffffff;
	padding:2%;
	width:96%;
	font-size:120%;
	margin:0 0 5px;
	border:1px solid #E49296;
}

#sidebar #gnav{
	width:100%;
}

#sidebar ul{
	margin:0 0 1em;
}
#sidebar #gnav li{
list-style:none;
margin:0 0 5px;
text-align:left;
}


#sidebar #gnav li a{
	background:url(images/ic_sidebar.jpg) left center no-repeat #eee;
	padding:15px 0 15px 20px;
	display:block;
	text-decoration:none;
	color:#000;	
}
#sidebar #gnav li a:hover{
	background:url(images/ic_sidebar.jpg) left center no-repeat #ddd;
	font-weight:bold;
}

/*---------------------------------------------------

#footer

---------------------------------------------------*/

body #footer{
	background:#23655F;
	width:100%;
	padding:10px 0 5px;
}
body #footer *{
	color:#fff;
}

body #footer #footerBox{
	max-width:950px;
	width:100%;
	margin:0 auto;
}

body #footer dl{
	max-width:450px;
	width:47%;
	float:left;
}

body #footer #copy{
	float:right;
	max-width:450px;
	width:47%;
	padding:6% 0 0;
}

.iryoList{
	margin:15px 0 30px;
}
.iryoList li{
	line-height:2;
}
.iryoList li a{
	color:#256660;
}
body #main table.sfaqTable tr td,
body #main table.sfaqTable tr th{
	width:auto !important;
}
/*入会フォーム*/
#main p.joinRequired{
	color: red;
	margin-top: 30px;
}
table.formTableArea tr th input[type="text"].bnb_shibu{
	width: 100px;
	padding: 5px;
	border-radius: 5px;
	margin-left: 5px;
	margin-right: 5px;
}
table.formTableArea tr td input[type="text"].bnb_postcode{
	width: 100px;
	margin-bottom: 10px;
}
table.formTableArea tr td input[type="text"].bnb_fax{
	margin-top: 10px;
	margin-bottom: 10px;
}
#main table th.formLbl{
	background: #23655F;
	padding: 0;
}
#main table th.formLbl p{
	text-align: center;
}
#main .goodsListBack{
	text-align: right;
	margin-bottom: 20px;
}
#main .goodsListBack a{
	text-decoration: none;
	color: #23655F;
	transition: 0.3s;
	border: 1px #23655F solid;
	border-radius: 5px;
	padding: 5px 8px;
	background: #fff;
}
#main .goodsListBack a:hover{
	opacity: 0.8;
}
#main h2.purchaseLbl{
	text-align: center;
	background: none;
	color: #23655F;
	font-weight: bold;
	font-size: 27px;
	padding: 0;
	margin: 0;
}
#main p.purchaseText{
	padding:0 0 30px;
	color: #23655F;
	text-align: center;
}
#main table.formTableArea tr td{
	line-height: 1.2;
}
#main table.formTableArea tr td,
#main table.formTableArea tr th{
	padding: 5px 15px;
}
table.formTableArea tr td input[type="text"],
table.formTableArea tr td input[type="email"],
table.formTableArea tr td input[type="number"]{
	padding: 5px;
	border-radius: 5px;
	width: calc(100% - 20px);
	border: 1px #ccc solid;
}
table.formTableArea tr td input[type="number"]{
	padding: 5px;
	border-radius: 5px;
	width: 60px;
}
table.formTableArea tr.quantityName td input,
table.formTableArea tr.quantityPrice td input{
	pointer-events: none;
	border: none;
	background: none;
}
#main p.joinSubmit{
	text-align: center;
}
p.joinSubmit input[type="submit"]{
	padding: 15px 25px;
	border-radius: 5px;
	cursor: pointer;
}
ul.check{
	border: 1px #23655F solid;
	padding: 5px;
	margin-bottom: 25px;
}
ul.check li{
	list-style: none;
	display: block;
	text-indent: -1.3em;
	margin-left:1.3em;
}
ul.check li:before{
	content: "※";
}
ul.check li p{
	display: inline;
}
ul.check li p span.redText,
ul.check li.redText p{
	color: red;
}
.goodsBox{
	width: 100%;
	margin-bottom: 60px;
	font-size: 0;
}
.goodsBox .goodsLeft{
	width: 220px;
	margin-right: 50px;
	display: inline-block;
	vertical-align: top;
	font-size: 16px;
}
.goodsBox .goodsLeft img{
	height: auto;
	border-radius: 15px;
}
.goodsBox .goodsRight{
	width: calc(100% - 270px);
	display: inline-block;
	vertical-align: top;
	font-size: 16px;
}
#main .goodsBox .goodsRight .goodsPriceBox{
	margin-top: 30px;
}
#main .goodsBox .goodsRight h2{
	padding: 0;
	background: none;
	color: #23655F;
	font-weight: bold;
	font-size: 28px;
	margin-bottom: 25px;
}
#main ul.goodsList{
	width: 100%;
	font-size: 0;
}
#main ul.goodsList li{
	width: 50%;
	display: inline-block;
	vertical-align: top;
	font-size: 16px;
	box-sizing: border-box;
	padding: 10px;
	transition: 0.3s;
}
#main ul.goodsList li:hover{
	opacity: 0.8;
}
#main ul.goodsList li a{
	text-decoration: none;
}
#main ul.goodsList li p{
	text-align: center;
	color: #23655F;
	font-weight: bold;
	display: none;
	margin-bottom: 5px !important;
}
#main ul.goodsList li p.goodsClick{
	margin-top: 0 !important;
	font-size: 14px;
}
#main ul.goodsList li figure{
	background: #efefef;
}
#main ul.goodsList li figure img{
    object-fit: contain;
	height: auto;
	display: none;
}
#top_width #floatLeft h3{
	border-top:1px #000 solid;
	border-bottom:1px #000 solid;
	padding:7px 0;
	margin:0 0 5px;
	font-size:120%;
	font-weight:bold;
}

div.homeGoodsContainer{
	margin-top: 30px;
	padding-right: 30px;
}
div.homeGoodsContainer ul.homeGoodsList{
	margin: 10px 0 15px;
	padding: 0;
}
div.homeGoodsContainer ul.homeGoodsList li{
	display: block;
	border-bottom: 1px #aaa dotted;
	padding-bottom: 15px;
	margin-bottom: 15px;
}
div.homeGoodsContainer ul.homeGoodsList li dl{
	margin: 0;
	padding: 0;
	font-size: 0;
}
div.homeGoodsContainer ul.homeGoodsList li dl dt{
	width: 70%;
	display: inline-block;
	vertical-align: top;
	box-sizing: border-box;
	margin: 0;
	padding: 0 30px 0 0;
	font-size: 16px;
}
div.homeGoodsContainer ul.homeGoodsList li dl dt h4{
	margin-bottom: 7px;
}
div.homeGoodsContainer ul.homeGoodsList li dl dt h4 a{
	font-size: 18px;
	font-weight: bold;
}
div.homeGoodsContainer ul.homeGoodsList li dl dd{
	width: 30%;
	display: inline-block;
	vertical-align: top;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-size: 16px;
}
div.homeGoodsContainer ul.homeGoodsList li dl dd img{
	height: auto;
}
ul.bnSns{
	margin: 45px 0 0;
	padding: 0;
	font-size: 0;
	text-align: center;
}
ul.bnSns li{
	display: inline-block;
	font-size: 16px;
	max-width: 300px;
	margin: 0 15px;
}
ul.bnSns li a{
	transition: 0.3s;
}
ul.bnSns li a:hover{
	opacity: 0.8;
}


@media only screen and (min-width : 971px) {
	body #container img.off970{
		display:inline;
	}
	body #container img.on970{
		display:none;
	}
}
@media only screen and (max-width : 970px) {
	body #container img.off970{
		display:none;
	}
	body #container img.on970{
		display:inline;
	}
	body #container{
		background:url(http://banbinokai.com/wp-content/uploads/2015/04/font-size_bk.jpg) repeat-x top left;
	}
	body #wrapper #header #headerCenter{
		background:none;
	}
}

@media only screen and (min-width : 761px) {
#sHead{
	display:none;
}
body #wrapper #header ul.gNav.spnav{
	display: none;
}
/*---------------------------------------------------

#スマホ

---------------------------------------------------*/
/*パソコン版画像*/
.pBlock{
	display:block;
}
.sBlock{
	display:none;
}
}
@media only screen and (max-width : 760px) {
	#contents{
		display: block !important;
		max-width: 90%;
		margin: 0 auto;
	}
	div.homeGoodsContainer{
		padding-right: 0;
		margin-bottom: 45px;
	}
	div.homeGoodsContainer ul li dl dt h4{
		text-align: left;
	}
	#main ul.goodsList{
		padding: 0 15px;
		box-sizing: border-box;
		margin-bottom: 45px;
	}
	#main .goodsBox .goodsRight h2{
		text-align: center;
	}
	.goodsBox .goodsLeft{
		margin-bottom: 15px;
	}
	.goodsBox .goodsLeft,
	.goodsBox .goodsRight{
		display: block;
		width: 100%;
	}
	.goodsBox .goodsLeft figure{
		max-width: 350px;
		margin: 0 auto;
	}
	#sHead img.shead1{
		display:block;
	}
	#sHead img.shead2{
		display:none;
	}

	#main{
		float:none;
		width:100%;
		padding: 0 15px;
		box-sizing: border-box;
		max-width:none;
	}
	body #footer dl,
	body #footer #copy{
		width:100%;
		float:none;
	}
	body #bk_head1,
	body #bk_head2,
	body,body.nextbody{
		background:none;
	}
	#top_width #floatLeft{
		float:none;
		width:100%;
		text-align:center;
	}
	#top_width #floatRight{
		float:none;
		width:100%;
	}
	body #wrapper #header,
	body.nextbody #wrapper #header{
		height:auto;
	}
	#sidebar{
		float:none;
		max-width:none;
		width:100%;
		margin:0 0 15px;
	}
	#sidebar .sideItem p{
		text-align: center;
	}
	ul.primaryMenu{
		display:none;
	}
	div#headerCenter{
		display:none;
	}
	body #wrapper #header #headerLeft,
	body #wrapper #header #headerRight{
		margin:0 0 1em;
		width:50%;
		float:left;
	}
	ul.gNav{
		width:100%;
	}
	/*スマホ版画像*/
	.sBlock{
		display:block;
	}
	.pBlock{
		display:none;
	}
	body #wrapper #header ul.gNav.pcnav{
		display: none;
	}
	body #wrapper #header #headerLeft{
		width: 40%;
	}
	body #wrapper #header #headerRight{
		width: 60%;
	}
	body #wrapper #header ul.gNav li{
		text-align: center;
		background: url("images/bk_header_sp.jpg") center center / auto 100%;
		padding: 0 5px;
		box-sizing: border-box;
	}
	body #wrapper #header #headerRight ul.gNav li{
		width: 33.33%;
	}
	body #wrapper #header #headerLeft,
	body #wrapper #header #headerRight{
		max-width: none;
	}
	ul.bnSns{
		padding-bottom: 30px;
	}
	ul.bnSns li{
		display: block;
		max-width: none;
		text-align: center;
		margin-bottom: 15px;
		box-sizing: border-box;
	}
	ul.bnSns li a{
		display: inline-block;
		max-width: 300px;
	}
}
@media only screen and (max-width : 380px) {
	#sHead img.shead1{
		display:none;
	}
	#sHead img.shead2{
		display:block;
	}
	body #wrapper #header #headerLeft,
	body #wrapper #header #headerRight{
		width:100%;
		float:none;
		margin:0;
	}
}
input[type="password"]{
border:1px #ccc solid;
}