@charset "utf-8";

/*-----------------------------------
KIHACHI CSS common.css
------------------------------------*/

body,div,p,ul,li,h1,h2,h3,h4,h5,h6{
	margin: 0;padding:0;
	color:#000;
	font-family:"ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
	font-weight:normal;
	}
h2{
	font-size:18px;
	}
.SP{
	display: none;
	}
span.br{
	display: block;
	}
/*------------------------------------------------*/


/*###############################################################*/
@media (max-width: 640px) {
	h2{
		font-size:22px;
		}
	.SP{
		display: block;
		}
	.PC{
		display: none;
		}
	span.br{
		display: inline;
		}
}
/*###############################################################*/
li{
	list-style: none;
	}
img{
	vertical-align: bottom;
	border:none;
	}
a{
	text-decoration:none;
	color:#000;
	}
a:hover {
	opacity:0.8;
	-moz-opacity:0.8;
	-webkit-opacity:0.8;
	-o-opacity:0.8;
	-ms-opacity:0.8;
	-khtml-opacity:0.8;
	filter:alpha(opacity=80);
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
	}

/*------------------------------------------------*/
.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
	}

/*.clearfix { display: inline-table; }*/

/* Hides from IE-mac ＼*/
* html .clearfix { height: 1%; }
/*.clearfix { display: block; }*/
/* End hide from IE-mac */

/*------------------------------------------------*/
a#pagetop{
	position: fixed;
	bottom:0;
	right:0;
	z-index: 15;
	background: #000;
	color: #fff;
	font-size:11px;
	line-height:11px;
	display: block;
	padding:10px;
	}
/*###############################################################*/
@media (max-width: 640px) {
	a#pagetop{
		position: fixed;
		bottom:0;
		right:0;
		z-index: 10;
		background: #000;
		color: #fff;
		font-size:14px;
		line-height:11px;
		display: block;
		padding:10px;
		}
}
/*###############################################################*/

body{
	text-align: center;
	}
body #header{
	width:100%;
	height:77px;
	background: #fff;
	position: fixed;
	z-index:10;
	top:0;
	/*IE8対応*/
	width:960px\9;
	top:0\9;left:0\9;right:0\9;bottom:0\9;
	margin-right:auto\9;margin-left:auto\9;
	}
body #header > .inner{
	width:100%;
	min-width:640px;
	text-align: left;
	margin: 0 auto;
	}
body #header > .inner > li{
	list-style:none;
	float: left;
	line-height:57px;
	padding:10px;
	width : 30%;
	}
body #header > .inner li:nth-child(2),
body #header > .inner > *:first-child + * {
	width:62%;
	text-align: center;
	float: right;
	}
body #header > .inner li h1{
	line-height:57px;
	}
body #header > .inner li h1 img{
	vertical-align:top;
}

body #header > .inner li ul#head-nav{
	margin:0 0 0 auto;
	width: 860px;
	z-index:100px;
	/*IE8対応*/
	width:420px\9;
	}
body #header > .inner li ul#head-nav li{
	float: left;
	width:89px;
	font-size:11px;
	border-right:1px solid #666;
	padding:0 10px;
	height:14px;
	line-height:14px;
	text-align: center;
	}
body #header > .inner li ul#head-nav li a{
	display: block;
	}

/*
body #header > .inner li ul#head-nav li:nth-last-child(1),
body #header > .inner li ul#head-nav > *:first-child{
	border-right:1px solid #fff;
	}
*/
body #header > .inner li strong{
	display: block;
	position: absolute;
	right:0;
	top:28px;
	font-size:28px;
	line-height:28px;
	padding-right:20px;
	}
body #header > .inner li p{
	display: block;
	position: absolute;
	right:0;
	top:38px;
	font-size:11px;
	padding-right:20px;
	height:10%;
	}
/*###############################################################*/
@media (max-width: 640px) {
	body #header{
		height:80px;
		z-index: 20;
		}
	body #header .inner li{
		background:#fff;
		width: 100%;
		text-align: left;
		padding-left: 53px !important;
		border-bottom: 1px solid #ccc;
		line-height:57px;
		float: none;
		padding:0;
		}

	body #header > .inner li ul#head-nav{
		display: none;
		}


	h1{
		margin:20px 0 0;
		padding:0;
		width:100%;
		/*border-bottom:1px solid #ccc;*/
		height:80px;
		}
	h1 img{
		width:330px;
		}
	body #header > .inner li strong{
		display:none;
		}
	body #header > .inner li p{
		display:none;
		}
	body #header #SP-menu{
		position: absolute;
		top:0;
		right:0;
		}
}
/*###############################################################*/


/*------------------------------------------------
Wrap
------------------------------------------------*/
div#wrap{
	padding-top:77px;
	}
/*###############################################################*/
@media (max-width: 640px) {
	div#wrap{
		padding-top:80px;
		width:640px;
		overflow: hidden;
		}
}
/*###############################################################*/

body#Story div#wrap,
body#Restaurant div#wrap,
body#Patisserie div#wrap,
body#content_page div#wrap{
	padding-top:80px;
	}
	
body#Story div#wrap.contact{
	padding-top:125px;
}

/*------------------------------------------------
メインビジュアル
------------------------------------------------*/
body .main-vis{
	position:relative;
	overflow: hidden;
	width:100%;
	width:960px\9;
	margin:0 auto;
	}

body .main-vis p.arrow{
	position:absolute;
	max-width:700px;
	top:28%;
	left:0;right:0;
	margin:0 auto;
	width:80%;
	}
body .main-vis p.arrow img{
	width:90%;
	}
body .main-vis .bxslider{

	}
body .main-vis .bxslider li{

	}

body .main-vis li img{
	width:100%;
	min-width:640px;
	/*IE8対応*/
	width:960px\9;
	}



body .main-vis-2{
	position:relative;
	margin: -20px 0 10px;
	}

body .main-vis-2 p.arrow{
	position:absolute;
	max-width:700px;
	top:18%;
	left:0;right:0;
	margin:0 auto;
	width:80%;
	z-index:999999;
	}
body .main-vis-2 p.arrow img{
	width:90%;
	}


/*###############################################################*/
@media (max-width: 640px) {
	body .main-vis p.arrow{
		top:30px;
		}
}
/*###############################################################*/

/*------------------------------------------------
ナビゲーション
------------------------------------------------*/
body #nav{
	width:100%;
	background:#DADFE2;
	color:#fff;
	overflow: hidden;
	z-index:9;
	padding-top:77px;
	margin-top: -77px;
	/*IE8対応*/
	width:960px\9;
	height:185px\9;
	left:0\9;right:0\9;bottom:0\9;
	margin:0 auto\9;
	padding:0px\9;
	}
body #nav.page-nav{
	height:60px\9;
}
body#Story #nav,
body#Restaurant #nav,
body#Patisserie #nav,
body#content_page #nav,
.layout_body #nav{
	position: fixed;
	top:98px;
	box-shadow: 0px 0px 10px #666;
	border-bottom:1px solid #fff;
	/*IE8対応*/
	height:60px\9;
	}
body #nav .inner{
	width:100%;
	min-width:640px;
	text-align: left;
	margin: 0 auto;
	}
body #nav .inner li{
	width : -webkit-calc(100% / 6 - 1px) ;
	width : calc(100% / 6 - 1px);
	float: left;
	background: #fff;
	text-align: center;
	font-size:13px;
	border-right:1px solid #666;
	/*IE8対応*/
	width:157px\9;
	}
body #nav .inner li a{
	text-align: center;
	display:block;
	text-align: center;
	line-height:57px;
	height:57px;
	background:#DADFE2;
	color:#000;
	}
body #nav .inner li:nth-last-child(1),
body #nav .inner > *:last-child + *{
	border-right:none;
	}

#menu-icon {
    display: none;
}


/*###############################################################*/
@media (max-width: 640px) {
	body #nav{
		color:#fff;
		}

	body #nav .inner li{
		width : -webkit-calc(100% / 3 - 1px) ;
		width : calc(100% / 3 - 1px);
		float: left;
		background: #fff;
		text-align: center;
		font-size:13px;
		border-right:1px solid #fff;
		border-bottom:1px solid #fff;
		}
	body#Story #nav,
	body#Restaurant #nav,
	body#Patisserie #nav,
	body#content_page #nav,
	.layout_body #nav{
		display: none;
		}
}

#menu-icon {
    display: block;
}


/*###############################################################*/


/*------------------------------------------------
ナビゲーション(固定版)
------------------------------------------------*/
body #nav-fix{
	width:100%;
	max-height:250px\9;
	background:#DADFE2;
	color:#fff;
	overflow: hidden;
	z-index:9;
	position:fixed;
	top:97px;
	box-shadow: 0px 0px 10px #666;
	border-bottom:1px solid #fff;
	/*IE8対応*/
	width:960px\9;
	height:185px\9;
	left:0\9;right:0\9;bottom:0\9;
	margin-right:auto\9;margin-left:auto\9;
	padding:0px\9;
	}
body #nav-fix .g_navi-kaiin img{
	width:100%;
}
/*###############################################################*/
@media (max-width: 640px) {
	body #nav-fix {
		width:100%;
		/*margin-left:-100px;*/
		/*margin-top: 24px;*/
		z-index: 19;
		}
	body #nav-fix .inner li{
		width : -webkit-calc(100% / 3 - 1px) !important;
		width : calc(100% / 3 - 1px) !important;
		float: left !important;
		background: #fff !important;
		text-align: center !important;
		font-size:13px !important;
		border-right:1px solid #fff !important;
		border-bottom:1px solid #fff !important;
	}
}
/*###############################################################*/
body #nav-fix .inner{
	width:100%;
	min-width:640px;
	text-align: left;
	margin: 0 auto;
	}
body #nav-fix .inner li{
	width : -webkit-calc(100% / 6 - 1px) ;
	width : calc(100% / 6 - 1px);
	float: left;
	background: #fff;
	text-align: center;
	font-size:13px;
	border-right:1px solid #666;
	/*IE8対応*/
	width:157px\9;
	}
body #nav-fix .inner li a{
	text-align: center;
	display:block;
	color:#fff;
	text-align: center;
	line-height:57px;
	background:#DADFE2;
	color:#000;
	}
body #nav-fix .inner li:nth-last-child(1),
body #nav-fix .inner > *:last-child + *{
	border-right:none;
	}
/*------------------------------------------------
バナー
------------------------------------------------*/
body #banner01{
	color:#fff;
	margin:20px 0;
width:100%;
	/*IE8対応*/
	width:960px\9;
	top:0\9;left:0\9;right:0\9;bottom:0\9;
	margin-right:auto\9;margin-left:auto\9;
	}
body #banner01 ul{
	width:100%;
	margin:0 auto;
	}
body #banner01 li{
	float: left;
	}
body #banner01 li.bnr-left{
	width : -webkit-calc(100%*0.7328125);
	width : calc(100%*0.7328125);
	}
body #banner01 li.bnr-right{
	width : -webkit-calc(100%*0.2671875);
	width : calc(100%*0.2671875);
	text-align: right;
	}
body #banner01 img{
	width : 100%;
	}

/*------------------------------------------------
GIFT FROM KIHACHI
------------------------------------------------*/
body #Gift{
	color:#fff;
	margin:20px 0;
	position:relative;
	/*IE8対応*/
	width:960px\9;
	top:0\9;left:0\9;right:0\9;bottom:0\9;
	margin-right:auto\9;margin-left:auto\9;
	}
body #Gift img{
	width : 100%;
	}
body #Gift h2{
	color:#000;
	line-height:57px;
	font-weight:normal;
	background:#fff;
	height:57px;
	position:absolute;
	top:0;
	width:100%;
	opacity:0.8;
	-moz-opacity:0.8;
	-webkit-opacity:0.8;
	-o-opacity:0.8;
	-ms-opacity:0.8;
	-khtml-opacity:0.8;
	filter:alpha(opacity=80);
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
	z-index:3;
	}
body #Gift p{
	color:#fff;
	line-height:57px;
	font-weight:normal;
	height:57px;
	position:absolute;
	top:130px;
	width:100%;
	font-size:22px;
	text-shadow: 2px 2px 12px #000000;
	z-index:3;
	}
body #Gift p a{
	color:#fff;
	}

body #Gift .inner{
	width:100%;
	text-align: left;
	margin: 0 auto;
	position:absolute;
	bottom:0;
	}
body #Gift .inner li{
	width : -webkit-calc(100% / 3.001) ;
	width : calc(100% / 3.001);
	float: left;
	text-align: center;
	font-size:14px;
	color:#fff;
	/*IE8対応*/
	width:320px\9;
	background-color:#666\9;
	}

body #Gift .inner li:nth-child(1),
body #Gift .inner > *:first-child{
	background-color:rgba(212,44,54,0.90);
	}
body #Gift .inner li:nth-child(2),
body #Gift .inner > *:first-child + *{
	background-color:rgba(153,153,153,0.90);
	}
body #Gift .inner li:nth-child(3),
body #Gift .inner > *:first-child + * + *{
	background-color:rgba(210,148,118,0.90);
	}
body #Gift .inner li a{
	text-align: center;
	display:block;
	color:#ff0000;
	text-align: center;
	}
body #Gift .inner li img{
	width:98%;
	}
/*------------------------------------------------*/
@media (max-width: 640px) {
	body #Gift .inner{
		width:100%;
		text-align: left;
		margin: 0 auto;
		position:relative;
		}
	body #Gift .inner li{
		float:none;
		width:100%;
		}
}
/*------------------------------------------------*/

/*------------------------------------------------
VOICE
------------------------------------------------*/
body #Voice{
	color:#fff;
	overflow: hidden;
	margin:20px 0;
	position:relative;
	}
body #Voice h2{
	position:absolute;
	top:0;
	background:#fff;
	height:57px;
	line-height:57px;
	text-align: center;
	font-weight:normal;
	width:100%;
	opacity:0.8;
	-moz-opacity:0.8;
	-webkit-opacity:0.8;
	-o-opacity:0.8;
	-ms-opacity:0.8;
	-khtml-opacity:0.8;
	filter:alpha(opacity=80);
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
	z-index:3;
	}
body #Voice .inner{
	width:100%;
	min-width:640px;
	text-align: left;
	margin: 0 auto;
	/*IE8対応*/
	width:960px\9;
	}
body #Voice .inner li{
	width : -webkit-calc(100% / 5.001) ;
	width : calc(100% / 5.001);
	float: left;
	background: #fff;
	text-align: center;
	font-size:14px;
	/*IE8対応*/
	width:192px\9;
	position: relative;
	}
body #Voice .inner li img{
	width : 100%;
	}
body #Voice .inner li a{
	text-align: center;
	display:block;
	color:#fff;
	text-align: center;
	line-height:57px;
	}
body #Voice .inner li a p{
	position: absolute;
	top:40%;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
	z-index: 10;
	opacity:0;
	transition:all 0.3s;
	font-size:20px;
	color:#fff;
	text-shadow: 2px 2px 12px #000000;
	}
body #Voice .inner li a p img{
	width:50px;
	display: block;
	margin:0 auto;
	}
body #Voice .inner li a:hover p{
	opacity:1;
 	transition:all 0.3s;
	}
/*###############################################################*/
@media (max-width: 640px) {
	body #Voice .inner li{
		width : -webkit-calc(100% / 2.001) ;
		width : calc(100% / 2.001);
		float: left;
		background: #fff;
		text-align: center;
		font-size:14px;
		}
	body #Voice .inner li a p{
		opacity:1;
		}
}
/*###############################################################*/


/*------------------------------------------------
Recommend
------------------------------------------------*/
body #Recommend{
	background:#fff;
	color:#fff;
	overflow: hidden;
	margin:20px 0;
	/*IE8対応*/
	width:960px\9;
	top:0\9;left:0\9;right:0\9;bottom:0\9;
	margin-right:auto\9;margin-left:auto\9;
	}
body #Recommend .inner{
	width:100%;
	min-width:640px;
	text-align: left;
	margin: 0 auto;
	/*IE8対応*/
	width:960px\9;
	}
body #Recommend .inner li{
	width : -webkit-calc(96% / 2.001) ;
	width : calc(96% / 2.001);
	float: left;
	background: #fff;
	text-align: center;
	font-size:14px;
	padding : -webkit-calc(2% / 2.001) ;
	padding : calc(2% / 2.001);
	/*IE8対応*/
	width:442px\9;
	padding:19px\9;
	}
body #Recommend .inner li img{
	width : 100%;
	}
body #Recommend .inner li a{
	text-align: center;
	display:block;
	color:#fff;
	text-align: center;
	line-height:57px;
	}
/*###############################################################*/
@media (max-width: 640px) {
	body #Recommend .inner li{
		width :100%;
		float: none;
		background: #fff;
		text-align: center;
		padding : 1% 0;
		box-sizing : border-box;
		}
}
/*###############################################################*/


/*------------------------------------------------
About KIHACHI
------------------------------------------------*/
body #About{
	margin:20px 0;
	/*IE8対応*/
	width:960px\9;
	top:0\9;left:0\9;right:0\9;bottom:0\9;
	margin-right:auto\9;margin-left:auto\9;
	position:relative;
	}
body #About h2{
	position:absolute;
	top:0;
	background:#fff;
	height:57px;
	line-height:57px;
	text-align: center;
	font-weight:normal;
	width:100%;
	opacity:0.8;
	-moz-opacity:0.8;
	-webkit-opacity:0.8;
	-o-opacity:0.8;
	-ms-opacity:0.8;
	-khtml-opacity:0.8;
	filter:alpha(opacity=80);
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
	z-index:3;
	}
body #About img{
	width:100%;
	min-width:640px;
	}
/*###############################################################*/
@media (max-width: 640px) {
	body #About{
		overflow:hidden;
		}
	body #About h2{
		height:57px;
		line-height:57px;
		font-weight:normal;
		text-align: center;
		}
	body #About img{
		width:960px;
		}

}
/*###############################################################*/

/*------------------------------------------------
Ranking
------------------------------------------------*/
body #Ranking{
	margin:20px 0;
	/*IE8対応*/
	width:960px\9;
	top:0\9;left:0\9;right:0\9;bottom:0\9;
	margin-right:auto\9;margin-left:auto\9;
	}
body #Ranking h2{
	height:57px;
	line-height:57px;
	font-weight:normal;
	}
body #Ranking .inner{
	width:100%;
	min-width:640px;
	text-align: left;
	margin: 0 auto;
	}
body #Ranking .inner li{
	width : -webkit-calc(100% / 5.001) ;
	width : calc(100% / 5.001);
	float: left;
	background: #fff;
	text-align: center;
	font-size:14px;
	/*IE8対応*/
	width:192px\9;
	}
body #Ranking .inner li img{
	width : 100%;
	}
body #Ranking .inner li a{
	text-align: center;
	display:block;
	color:#fff;
	text-align: center;
	}
body #Ranking .inner li a p{
	padding:10px;
	height:4em;
	background-color:#DADFE2;
	}
body #Ranking .inner li a p strong{
	font-weight:bold;
	font-size:16px;
	line-height:1.0em;
	}
/*###############################################################*/
@media (max-width: 640px) {
	body #Ranking .inner li{
		width : -webkit-calc(100% / 3.001) ;
		width : calc(100% / 3.001);
		float: left;
		background: #fff;
		text-align: center;
		}
	body #Ranking .inner li a{
		line-height:1.2em;
		}
	body #Ranking .inner li a p{
		padding:10px;
		height:3em;
		background-color:#DADFE2;
		font-size:16px;
		}
	body #Ranking .inner li a p span{
		display: block;
		}
	body #Ranking .inner li a p strong{
		font-weight:bold;
		font-size:16px;
		}
	body #Cat-block div#PRICE .inner li {
		width: 100%;
		text-align: left;
		margin: 0 auto;
		font-size: 26px !important;
		line-height: 4em !important;
		border-bottom: 1px solid #ccc;
	}
}
/*###############################################################*/

/*------------------------------------------------
newitems
------------------------------------------------*/
body #newitems{
	margin:20px 0;
	/*IE8対応*/
	width:960px\9;
	top:0\9;left:0\9;right:0\9;bottom:0\9;
	margin-right:auto\9;margin-left:auto\9;
	}
body #newitems h2{
	height:57px;
	line-height:57px;
	font-weight:normal;
	}
body #newitems .inner{
	width:100%;
	min-width:640px;
	text-align: left;
	margin: 0 auto;
	}
body #newitems .inner li{
	width : -webkit-calc(100% / 5.001) ;
	width : calc(100% / 5.001);
	float: left;
	background: #fff;
	text-align: center;
	font-size:14px;
	/*IE8対応*/
	width:192px\9;
	}
body #newitems .inner li img{
	width : 100%;
	}
body #newitems .inner li a{
	text-align: center;
	display:block;
	color:#fff;
	text-align: center;
	}
body #newitems .inner li a p{
	padding:10px;
	height:2em;
	background-color:#DADFE2;
	}
body #newitems .inner li a p strong{
	font-weight:bold;
	font-size:16px;
	line-height:1.0em;
	}
/*###############################################################*/
@media (max-width: 640px) {
	body #newitems .inner li{
		width : -webkit-calc(100% / 3.001) ;
		width : calc(100% / 3.001);
		float: left;
		background: #fff;
		text-align: center;
		}
	body #newitems .inner li a{
		line-height:1.2em;
		}
	body #newitems .inner li a p{
		padding:10px;
		height:2em;
		background-color:#DADFE2;
		font-size:16px;
		}
	body #newitems .inner li a p span{
		display: block;
		}
	body #newitems .inner li a p strong{
		font-weight:bold;
		font-size:16px;
		}
	body #Cat-block div#PRICE .inner li {
		width: 100%;
		text-align: left;
		margin: 0 auto;
		font-size: 26px !important;
		line-height: 4em !important;
		border-bottom: 1px solid #ccc;
	}
}
/*###############################################################*/


/*------------------------------------------------
PRICE & CATEGORY
------------------------------------------------*/
body #Cat-block{
	margin:20px 0;
	/*IE8対応*/
	width:960px\9;
	top:0\9;left:0\9;right:0\9;bottom:0\9;
	margin-right:auto\9;margin-left:auto\9;
	}
body #Cat-block div#PRICE{
	width : -webkit-calc(100% / 5.001) ;
	width : calc(100% / 5.001);
	float: left;
	/*IE8対応*/
	width:192px\9;
	}
body #Cat-block div#PRICE h2{
	
	}
body #Cat-block div#PRICE .inner{
	padding:20px;
	width:80%;
	text-align: left;
	margin: 0 auto;
	}
body #Cat-block div#PRICE .inner li{
	width:100%;
	text-align: left;
	margin: 0 auto;
	font-size: 14px;
	line-height: 3em;
	border-bottom:1px solid #ccc;
	}
body #Cat-block div#PRICE .inner li a{
	display:block;
	padding:0 10px;
	}
body #Cat-block div#PRICE .inner li a:hover{
	background: #f9e5be;
	}

body #Cat-block form .input-keyword{
	width:70%;
}
	
/*###############################################################*/
@media (max-width: 640px) {
	body #Cat-block{
		
		}
	body #Cat-block div#PRICE {
		width:100%;
		float: right;
		}
	body #Cat-block div#PRICE h2{

		}

	body #Cat-block div#PRICE input{
		width:100%;
		/*height:1.5em;*/
		}

	body #Cat-block div#PRICE input[value="検索"] {
		width:100px;
		height:1.5em;
		margin-left:208px;
		font-size:18px;
		}

	body #Cat-block div#PRICE .inner {
		margin: 0 auto 0% !important;
	}

}
/*###############################################################*/


body #Cat-block div#CATEGORY{
	width : -webkit-calc(100% / 5.001 * 4) ;
	width : calc(100% / 5.001 * 4);
	float: left;
	/*IE8対応*/
	width:768px\9;
	}

body #Cat-block h2{
	height:57px;
	line-height:57px;
	font-weight:normal;
	}
body #Cat-block div#CATEGORY .inner{
	width:100%;
	text-align: left;
	margin: 0 auto;
	}
body #Cat-block div#CATEGORY .inner li{
	width : -webkit-calc(96% / 4.001) ;
	width : calc(96% / 4.001);
	float: left;
	background: #fff;
	text-align: center;
	font-size:14px!important;
	padding : -webkit-calc(1.9% / 4.001) ;
	padding:calc(1.9% / 4.001 );
	/*IE8対応*/
	width:184px\9;
	padding:4px\9;
	}
body #Cat-block div#CATEGORY .inner li img{
	width : 100%;
	}
body #Cat-block div#CATEGORY .inner li a{
	text-align: center;
	display:block;
	color:#fff;
	text-align: center;
	line-height:1.5em;
	font-size:14px;
	}
body #Cat-block div#CATEGORY .inner li a p{
	padding:10px;
	height:1.5em;
	background-color:#DADFE2;
	overflow: hidden;
	}
body #Cat-block div#CATEGORY .inner li a p strong{
	font-weight:bold;
	font-size:14px;
	}
/*###############################################################*/
@media (max-width: 640px) {
	body #Cat-block div#CATEGORY{
		width:100%;
		}
	body #Cat-block div#CATEGORY .inner li{
		width : -webkit-calc(100% / 3.001) ;
		width : calc(100% / 3.001);
		float: left;
		font-size:16px;
		}
	body #Cat-block h2{
		width:640px;
		}

	body #Cat-block div#CATEGORY .inner li {
		font-size: 14px;
		padding: -webkit-calc(0);
		padding: 0;
	
	}
	
	body #Cat-block div.others_pc {
		display: none;
	}

}
/*###############################################################*/


body #Cat-block div#CATEGORY-sp{
	width : -webkit-calc(100% / 5.001 * 4) ;
	width : calc(100% / 5.001 * 4);
	float: left;
	/*IE8対応*/
	width:768px\9;
	}

body #Cat-block h2{
	height:57px;
	line-height:57px;
	font-weight:normal;
	}
body #Cat-block div#CATEGORY-sp .inner{
	width:100%;
	text-align: left;
	margin: 0 auto;
	}
body #Cat-block div#CATEGORY-sp .inner li{
	width : -webkit-calc(96% / 4.001) ;
	width : calc(96% / 4.001);
	float: left;
	background: #fff;
	text-align: center;
	font-size:14px!important;
	padding : -webkit-calc(1.9% / 4.001) ;
	padding:calc(1.9% / 4.001 );
	/*IE8対応*/
	width:184px\9;
	padding:4px\9;
	}
body #Cat-block div#CATEGORY-sp .inner li img{
	width : 100%;
	}
body #Cat-block div#CATEGORY-sp .inner li a{
	text-align: center;
	display:block;
	color:#fff;
	text-align: center;
	line-height:1.5em;
	font-size:14px;
	}
body #Cat-block div#CATEGORY-sp .inner li a p{
	padding:10px;
	height:1.5em;
	background-color:#DADFE2;
	overflow: hidden;
	}
body #Cat-block div#CATEGORY-sp .inner li a p strong{
	font-weight:bold;
	font-size:14px;
	}
/*###############################################################*/
@media (max-width: 640px) {
	body #Cat-block div#CATEGORY-sp{
		width:100%;
		}
	body #Cat-block div#CATEGORY-sp .inner li{
		width : -webkit-calc(100% / 3.001) ;
		width : calc(100% / 3.001);
		float: left;
		font-size:16px;
		}
	body #Cat-block h2{
		width:640px;
		}

	body #Cat-block div#CATEGORY-sp .inner li {
		font-size: 14px;
		padding: -webkit-calc(0);
		padding: 0;
	
	}
	
	body #Cat-block div.others_pc {
		display: none;
	}

}
/*###############################################################*/



/*------------------------------------------------
Story
------------------------------------------------*/
body#Story .main-vis h2,
body#content_page .main-vis h2,
.layout_body .main-vis h2{
	color:#fff;
	line-height:1.7em;
	font-weight:normal;
	position:absolute;
	top :175px;
	width:100%;
	font-size:26px;
	color:#fff;
	text-shadow: 2px 2px 12px #000000;
	z-index:5;
	}
body#Story .main-vis h2 a,
body#content_page .main-vis h2 a{
	color:#fff;
	}
/*###############################################################*/
@media (max-width: 640px) {
	body#Story .main-vis h2,
	body#content_page .main-vis h2{
		top :80px;
		}
}
/*###############################################################*/
body#Story .main-vis p,
body#content_page .main-vis p {
	color:#fff;
	line-height:2em;
	font-weight:normal;
	position:absolute;
	top :10%;
	width:100%;
	font-size:26px;
	color:#fff;
	text-shadow: 2px 2px 12px #000000;
	}
/*------------------------------------------------
Gift
------------------------------------------------*/

body#Story #Gift p{
	color:#fff;
	font-weight:normal;
	position:absolute;
	top:60px;
	width:100%;
	font-size:22px;
	line-height:2.5em;
	color:#fff;
	text-shadow: 2px 2px 12px #000000;
	}
/*###############################################################*/
@media (max-width: 640px) {
	body#Story #Gift{
		background: #666;
		overflow: hidden;
		}
	body#Story #Gift img{
		width:1280px;
		background: #666;
		overflow: hidden;
		}
	body#Story #Gift p{
		line-height:1.5em;
		}
}
/*###############################################################*/

#block-uchiiwai,
#block-seasonal,
#block-petit-gift,
#voice01,#voice02,#voice03,#voice04,#voice05{
	padding-top:147px;
	margin-top: -147px;
	}
@media (max-width: 640px) {
#block-uchiiwai, #block-seasonal, #block-petit-gift, #voice01, #voice02, #voice03, #voice04, #voice05 {
    padding-top: 0;
    margin-top: 0;
}
}

/*------------------------------------------------
Detail
------------------------------------------------*/
body .Detail{
	margin:60px 0;
	/*IE8対応*/
	width:960px\9;
	top:0\9;left:0\9;right:0\9;bottom:0\9;
	margin-right:auto\9;margin-left:auto\9;
	}
body .Detail h2{
	font-size:22px;
	}

body .Detail p{
	line-height:4em;
	}
	body#Story #block-petit-gift .Detail{
		border-bottom:1px solid #ccc; 
		padding-bottom:60px;
		margin-bottom:-60px;
		}
/*###############################################################*/
@media (max-width: 640px) {
	body .Episode ul li{
		float: none;
		width:100%;
		}
	body .Detail p{
		font-size:15px;
		margin:1em;
		text-align: left;
		line-height:3em;
		margin-top: -70px;
		}
}
/*###############################################################*/


/*------------------------------------------------
Detail2
------------------------------------------------*/
body .Detail2{
	margin:20px 0;
	border-bottom:1px solid #ccc;
	/*IE8対応*/
	width:960px\9;
	top:0\9;left:0\9;right:0\9;bottom:0\9;
	margin-right:auto\9;margin-left:auto\9;
	}
body .Detail2 h2{
	font-size:22px;
	line-height:57px;
	height:57px;
	}
body .Detail2 ul{
	margin:20px 0;
	}
body .Detail2 ul li{
	width : -webkit-calc(100% / 3.001) ;
	width : calc(100% / 3.001);
	float: left;
	/*IE8対応*/
	width:320px\9;
	}
body .Detail2 ul li img{
	width : 95%;
	}
body .Detail2 ul li p{
	font-size:13px;
	width : 70%;
	margin:0 auto;
	padding-bottom:30px;
	text-align: left;
	}
/*###############################################################*/
@media (max-width: 640px) {
	body .Detail2 ul li{
		width :100%;
		float: none;
		}
	body .Detail2 ul li p{
		font-size:14px;
		width : 90%;
		}
}
/*###############################################################*/

/*------------------------------------------------
Detail-recommend
------------------------------------------------*/
body .Detail-recommend{
	margin:20px 0;
	border-bottom:1px solid #ccc;
	/*IE8対応*/
	width:960px\9;
	top:0\9;left:0\9;right:0\9;bottom:0\9;
	margin-right:auto\9;margin-left:auto\9;
	}
body .Detail-recommend h2{
	font-size:22px;
	line-height:57px;
	height:57px;
	}
body .Detail-recommend ul{
	margin:20px 0;
	}
body .Detail-recommend ul li{
	width : -webkit-calc(100% / 4.001) ;
	width : calc(100% / 4.001);
	float: left;
	min-height:200px;
	margin-bottom:20px;
	/*IE8対応*/
	width:240px\9;
	position: relative;
	}
body .Detail-recommend ul li img{
	width : 95%;
	margin-bottom:10px;
	}
body .Detail-recommend ul li p{
	font-size:15px;
	width : 70%;
	margin:0 auto;
	padding-bottom:30px;
	height:4em;
	}
body .Detail-recommend ul li p span{
	display:block;
	color: #666;
	}
body .Detail-recommend ul li p span.zero:before{
	display: block;
	content:"送料無料";
	background-color:#ff0000;
	color:#fff;
	font-size:12px;
	position:absolute;
	top:0;
	right:3%;
	padding:3px 4px;
	}
body .Detail-recommend ul li p span.komi:before{
	display: block;
	content:"送料込";
	background-color:#ff0000;
	color:#fff;
	font-size:12px;
	position:absolute;
	top:0;
	right:3%;
	padding:3px 4px;
	}
	
/*###############################################################*/
@media (max-width: 640px) {
	body .Detail-recommend ul li{
		width : -webkit-calc(100% / 2) ;
		width : calc(100% / 2);
		}
}
/*###############################################################*/

/*------------------------------------------------
カスタム
------------------------------------------------*/

body #uchiiwai h2{
	background: #fee9e9;
	}
body #kisetsu h2{
	background: #beecfb;
	}
body #kisetsu ul li p{
	text-align: center;
	}
body #chottoshita h2{
	background: #DADFE2;
	}


/*------------------------------------------------
Episode
------------------------------------------------*/
body .Episode{
	margin:20px 0;
	border-bottom:1px solid #ccc;
	position: relative;
	/*IE8対応*/
	width:960px\9;
	top:0\9;left:0\9;right:0\9;bottom:0\9;
	margin-right:auto\9;margin-left:auto\9;
	}
body .Episode h2{
	font-size:22px;
	background: #fee9e9;
	line-height:57px;
	height:57px;
	}
body .Episode ul{
	margin:20px 0;
	}
body .Episode ul li{
	width : -webkit-calc(100% / 3 ) ;
	width : calc(100% / 3);
	float: left;
	/*IE8対応*/
	width:320px\9;
	}
body .Episode ul li:nth-child(2),
body .Episode ul > *:first-child + *{
	width : -webkit-calc(100% / 3 *2) ;
	width : calc(100% / 3 *2);
	float: left;
	/*IE8対応*/
	width:960px\9;
	}
body .Episode ul li img{
	width : 100%;
	max-width:300px;
	}
body .Episode ul li h3{
	font-size:22px;
	width : -webkit-calc(100% -40px) ;
	width : calc(100% -40px);
	min-width: 640px;
	margin:0 auto;
	padding:0 20px;
	text-align: left;
	box-sizing: border-box;
	}
body .Episode ul li h4{
	font-size:20px;
	width : -webkit-calc(100% -40px) ;
	width : calc(100% -40px);
	margin:10px auto;
	padding:0 20px;
	text-align: left;
	/*IE8対応*/
	width:920px\9;
	}
body .Episode ul li h4 span{
	font-size:14px;
	color:#999;
	display: block;
	margin:5px 0 20px 0;
	}

body .Episode ul li p{
	font-size:14px;
	width : -webkit-calc(100% -40px) ;
	width : calc(100% -40px);
	margin:0 auto;
	padding:0 20px;
	text-align: left;
	line-height:2em;
	/*IE8対応*/
	width:920px\9;
	}
body .Episode ul li a{
	font-size:13px;
	width:240px;
	margin:20px;
	padding:10px 0px 10px 10px;
	text-align: left;
	line-height:1.2em;
	display: block;
	/*position: absolute;
	bottom:0;
	left:-webkit-calc(100%/3+10px) ;
	left:calc(100%/3+10px) ;*/
	background:red;
	color:#fff;
	text-align: center;
	z-index:3;
	}
body .Episode ul li a:hover{

	}
/*###############################################################*/
@media (max-width: 640px) {
	body .Episode ul li{
		float: none;
		width:100%;
		}
	body .Episode ul li h3{
		font-weight: bold;
		padding:10px;
		font-size:20px;
		}
	body .Episode ul li h4{
		padding:0 10px;
		font-size:30px;
		}
	body .Episode ul li img{
		width:40%;
		}
	body .Episode ul li p{
		font-size:14px;
		margin:0 auto;
		padding:20px 20px 40px 20px;
		text-align: left;
		line-height:2em;
		width:600px;
		}
}
/*###############################################################*/


/*------------------------------------------------
profile
------------------------------------------------*/
body#Story .container,
body#Restaurant .container{
	padding-top: 157px;
	}

body#Restaurant div#shop-list,
body#Patisserie div#shop-list{
	min-width:640px;
	border-top:1px solid #ccc;
	}
body#Restaurant div#shop-list h2,
body#Patisserie div#shop-list h2{
	margin:2em auto
	}
body#Restaurant div#shop-list .inner,
body#Patisserie div#shop-list .inner{

	}
body#Restaurant div#shop-list .inner li,
body#Patisserie div#shop-list .inner li{
	float: left;
	width : -webkit-calc(100% / 4) ;
	width : calc(100% / 4);
	}
body#Restaurant div#shop-list .inner li img,
body#Patisserie div#shop-list .inner li img{
	width:95%;
	}
body#Restaurant div#shop-list .inner li p,
body#Patisserie div#shop-list .inner li p{
	width:90%;
	line-height:1.2em;
	height:3em;
	margin:1em auto 0 auto;
	font-size:13px;
	}
body#Restaurant div#shop-list .inner li p span,
body#Patisserie div#shop-list .inner li p span{
	display:block;
	}


/*------------------------------------------------
Footer
------------------------------------------------*/
body #footer{
	margin:20px 0 0 0;
	height:300px;
	/*IE8対応*/
	width:960px\9;
	top:0\9;left:0\9;right:0\9;bottom:0\9;
	margin-right:auto\9;margin-left:auto\9;

	}

body #footer .calendar iframe{
	width:100%;
	height:200px;
}

body #footer #foot{
	border-top:4px solid #565656;
width:100%;
	}
body #footer #foot td{
	text-align: center;
	}
body #footer #foot td img{
	margin-top:-4px;
	}

body #footer div,
body #footer td{
	font-size:11px;
	line-height:2em;
	text-align: left;
	}

body #footer .calframe_rakuten td{
	text-align: center;
	}
body #footer a{
	text-decoration:underline;
	}

/*------------------------------------------------
SP-Footer
------------------------------------------------*/
body #SP-footer{
	margin:20px 0;
	}
body #SP-footer ul{
	border-top:1px solid #ccc;
	margin:20px 0;
	}
body #SP-footer li{

	}

body #SP-footer li a{
	display: block;
	font-size:16px;
	line-height:3em;
	border-bottom:1px solid #ccc;
	text-align: left;
	background: url(http://shop.kihachi.jp/img/sp/list_allow_gray.jpg)no-repeat 20px 50%;
	background-size:auto 30% ;
	text-indent: 35px;
	}
body #SP-footer #link-rakuten img{
	width:100px;
	}


/*------------------------------------------------
SP-header-nav
------------------------------------------------*/


#ham-menu {
    background-color: #fff;
    box-sizing: border-box;
    height: 100%;
    padding: 10px 20px;
    position: fixed;
    right: -450px;
    top: 0;
    transition: transform 0.13s linear 0s;
    width: 450px;
    z-index: 1000;
	overflow: scroll;
}

#ham-menu ul li {
    text-align: left;
    font-size: 19px;
	font-weight: bold;
}

#ham-menu ul li a {
    margin: 25px 0;
	padding: 10px 0;
	display:block;
}

#ham-menu ul li a:after {
	content:"＞";
	float:right;
}


#menu-background {
	background-color: #333; /*黒背景*/
	display: block;
	height: 100%;
	opacity: 0;
	position: fixed;
	right: 0;
	top: 0;
	transition: all 0.13s linear 0s; /*0.3s はアニメーションにかかる時間*/
	width: 100%;
	z-index: -1;
}
#menu-icon {
	display: none;
    cursor: pointer;
    height: 34px;
    position: fixed;
    right: 34px;
    text-align: center;
    top: 32px;
    width: 40px;
    transition: all 0.13s linear 0s;
    z-index: 1000;
}
.menu-cb {
	display: none; /*チェックボックス本体は消しておく*/
}
 #menu-cb:checked ~ #ham-menu, #menu-cb:checked ~ #menu-icon {
 transform: translate(-450px); /*メニュー本体横幅 width と合わせる*/
}
 #menu-cb:checked ~ #menu-background {
 opacity: 0.8;
 z-index: 999;
}

.menu-trigger,
.menu-trigger span {
  display: inline-block;
  transition: all .2s;
  box-sizing: border-box;
}
.menu-trigger {
  position: relative;
  width: 50px;
  height: 44px;
}
.menu-trigger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #000;
}
.menu-trigger span:nth-of-type(1) {
  top: 0;
}
.menu-trigger span:nth-of-type(2) {
  top: 15px;
}
.menu-trigger span:nth-of-type(3) {
  bottom: 0;
}


.menu-trigger.active-m span:nth-of-type(1) {
  -webkit-transform: translateY(15px) rotate(-45deg);
  transform: translateY(15px) rotate(-45deg);
  background-color: #fff;
}
.menu-trigger.active-m span:nth-of-type(2) {
  opacity: 0;
  background-color: #fff;
}
.menu-trigger.active-m span:nth-of-type(3) {
  -webkit-transform: translateY(-15px) rotate(45deg);
  transform: translateY(-15px) rotate(45deg);
  background-color: #fff;
}
@media (max-width: 640px) {
#menu-icon {
	display: block;
}

}

	.h-cart {
		display: none;
		cursor: pointer;
		height: auto;
		position: fixed;
		right: 92px;
		text-align: center;
		top: 30px;
		width: 44px;
		transition: all 0.13s linear 0s;
		z-index: 900;
	}

	/*------------------------------------------------
	SP-header-search
	------------------------------------------------*/
	
	
	#search-float {
		background-color: rgba(0,0,0,0.2);
		box-sizing: border-box;
		height: 100%;
		padding: 10px 20px;
		position: fixed;
		right: -550px;
		top: 0;
		transition: transform 0.13s linear 0s;
		width: 550px;
		z-index: 1000;
		overflow: scroll;
	}
	
#search-float ul li {
    text-align: left;
    font-size: 19px;
    font-weight: bold;
    margin: 9px 0;
}

#search-float ul li form {
    background: #fff;
}
	
	#search-background {
		background-color: #333; /*黒背景*/
		display: block;
		height: 100%;
		opacity: 0;
		position: fixed;
		right: 0;
		top: 0;
		transition: all 0.13s linear 0s; /*0.3s はアニメーションにかかる時間*/
		width: 100%;
		z-index: -1;
	}

#search-icon.search-trigger.active-s{
	right:20px;
}

	#search-icon {
		display: none;
		cursor: pointer;
		height: auto;
		position: fixed;
		right: 160px;
		text-align: center;
		top: 32px;
		width: 35px;
		transition: all 0.13s linear 0s;
		z-index: 900;
	}
	
	.search-trigger.active-s p img {
		opacity: 0;
	}
	#search-cb {
		display: none; /*チェックボックス本体は消しておく*/
	}
	 #search-cb:checked ~ #search-float, #search-cb:checked ~ #search-icon {
	 transform: translate(-550px); /*メニュー本体横幅 width と合わせる*/
	}
	 #search-cb:checked ~ #search-background {
	 opacity: 0.8;
	 z-index: 800;
	}
	
	.search-trigger,
	.search-trigger span {
	  display: inline-block;
	  transition: all .2s;
	  box-sizing: border-box;
	}
	.search-trigger {
	  position: relative;
	  width: 50px;
	  height: 44px;
	}
	.search-trigger span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 4px;
		background-color: rgba(0,0,0,0);
	}
	.search-trigger span:nth-of-type(1) {
	  top: 0;
	  
	}
	.search-trigger span:nth-of-type(2) {
	  bottom: 0;
	}
	
	
	.search-trigger.active-s span:nth-of-type(1) {
	  -webkit-transform: translateY(15px) rotate(-45deg);
	  transform: translateY(15px) rotate(-45deg);
	  background-color: #fff;
	}
	.search-trigger.active-s span:nth-of-type(2) {
	  -webkit-transform: translateY(-15px) rotate(45deg);
	  transform: translateY(-15px) rotate(45deg);
	  background-color: #fff;
	}

#search-float .input-keyword {
    width: 80%;
    border: 0;
    padding: 2px 10px;
}
#search-float .input-submit {
    width: 12%;
    padding: 2%;
    vertical-align: middle;
    box-sizing: border-box;
}

#search-float .search-float-tags {
    margin: 0 -3%;
}

/*#search-float .search-float-tags input,*/ #search-float .search-float-tags li {
    background: none;
    border: solid 2px #fff;
    color: #fff !important;
    float: left;
    margin: 3%;
    padding: 2% 6%;
}
#search-float .search-float-tags li a {
    color: #fff !important;
}

#search-float #close-btn2 {

    width: 94%;
    text-align: center;
    color: #000;
    background: #fff;
    vertical-align: middle;
    padding: 14px;
    height: auto;
	display: block;
}

#ham-menu #close-btn1 {

    width: 94%;
    text-align: center;
    color: #fff;
    background: #000;
    vertical-align: middle;
    padding: 14px;
    height: auto;
	display:block;

}

	@media (max-width: 640px) {
	#search-icon {
		display: block;
	}
	.h-cart {
		display: block;
	}
	}



/*------------------------------------------------
swiper
------------------------------------------------*/

.swiper-container {
	width: 100%;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 35px;
}
.swiper-slide {
	text-align: center;
	font-size: 18px;
	background: #fff;
	/* Center slide text vertically */
        display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}

/*------------------------------------------------
accordion_index
------------------------------------------------*/
.accordionbox{
	margin: 10px auto 40px;
}
.accordionlist{
	margin: 0;
}
.accordionlist dt{
    display:block;
    padding: 6% 0;
}

.accordionbox .gift_ac01 {
    background: #d8414a !important;
	color: #fff;
}

.accordionbox .gift_ac02 {
    background: #a3a3a3 !important;
	color: #fff;
}

.accordionbox .gift_ac03 {
    background: #d69e83 !important;
	color: #fff;
}

.accordionlist dt p {
    font-size: 26px;
    color: #fff;
    display: inline;
	vertical-align: middle;
}


.accordionlist dt .title {
    display: inline-block;
    margin-right: 15px;
	vertical-align: middle;
}
.accordionlist dd{
    display:none;
	padding: 0 0 20px;
	margin: 0 !important;
}

.accordionlist dd a {
    border: 2px solid #fff;
    border-radius: 50px;
    display: block;
    width: 200px;
    font-size: 24px;
	padding: 5px;
    margin: 20px auto 0;
	color: #fff;
}

.accordion_icon,
.accordion_icon span {
	display: inline-block;
	transition: all .2s;
	box-sizing: border-box;
}
.accordion_icon {
	/*position: relative;*/
	vertical-align:middle;
}
.accordion_icon span {
    /*position: absolute;*/
    width: 42px;
    height: 42px;
    background: url(/img/sp/arrow_sp.png) 50% no-repeat;
    background-size: 100%;
	vertical-align:middle;
}
.accordion_icon span {
	transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
}
/*＋、×切り替え*/
.accordion_icon.active span {
    transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
}






.accordionbox-others{
	margin: 10px auto;
}
.accordionlist-others{
	margin: 0;
}
.accordionlist-others dt{
    display:block;
    padding: 6% 0;
}

.accordionbox-others .footer_ac {
	color: #fff;
}

.accordionlist-others dt p {
    font-size: 26px;
    color: #fff;
    display: inline;
	vertical-align: middle;
}

.accordionlist-others ul li h3 {
    font-size: 20px;
    color: #000;
    vertical-align: middle;
    font-weight: 100;
    display: block;
    border-bottom: 1px solid #ccc;
	padding: 1%;
}

.accordionlist-others dd p {
    margin-bottom: 0 !important;
    padding: 3% 0;
}

.accordionlist-others ul{
	background: #fff;
}

.accordionlist-others li{
	margin:2% 0;
}

.accordionlist-others dt {
	background: #999;
}

.accordionlist-others dt .title {
    display: inline-block;
    margin-right: 15px;
	vertical-align: middle;
}
.accordionlist-others dd{
    display:none;
	margin: 0 !important;
}

.accordionlist-others dd a {
    border: 1px solid #ccc;
    display: block;
    width: 100%;
    font-size: 40px;
    color: #000;
    background: #fff;
    box-sizing: border-box;
    font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
    font-weight: normal;
}


/*------------------------------------------------
accordion_story
------------------------------------------------*/
.accordionbox_story{
	/*margin: 10px auto 40px;*/
}
.accordionlist_story{
	margin: 0;
}
.accordionlist_story  dt{
    display:block;
    padding: 0;
}

.accordionlist_story dt p {
    font-size: 26px;
    color: #fff;
    display: inline;
}


.accordionlist_story dt .title {
	vertical-align: middle;
}
.accordionlist_story dd{
    display:none;
	padding: 0;
	margin: 0 !important;
}

.accordionlist_story dd a {
    border: 2px solid #fff;
    border-radius: 50px;
    display: block;
    width: 200px;
    font-size: 24px;
	padding: 5px;
    margin: 20px auto 0;
	color: #fff;
}

.accordion_icon_story,
.accordion_icon_story span {
	display: inline-block;
	transition: all .2s;
	box-sizing: border-box;
}
.accordion_icon_story {
    position: relative;
    bottom: 100px;
}
.accordion_icon_story span {
    /*position: absolute;*/
    width: 42px;
    height: 42px;
    background: url(/img/sp/arrow_sp.png) 50% no-repeat;
    background-size: 100%;
}
.accordion_icon_story span {
	transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
}
/*＋、×切り替え*/
.accordion_icon_story.active span {
    transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
}

#accordionbox_story .bx-controls{
	display:none;

}

/*------------------------------------------------
SP非表示　PC表示
------------------------------------------------*/
.disp-pc {
	display: block !important;
}
.disp-sp {
	display: none;
}

@media (max-width: 640px) {
.disp-pc {
	display: none !important;
}
.disp-sp {
	display: block !important;
}

.sp-kaiin {
    height: auto;
    margin-top: 30px;
    margin-bottom: 20px;
}

/*#CATEGORY-sp, #PRICE-2, #Ranking {
    margin-top: -240px !important;
    padding-top: 240px !important;
}*/
#CATEGORY-sp {
	z-index: 0 !important;
}
#PRICE-2 {
	z-index: 1 !important;
}
#Ranking {
	z-index: 2 !important;
}


}



div#info-bnr {
    width: 160px;
	position: fixed;
	z-index: 99999;
	bottom: 240px;
	left: 0;
	border: 1px solid #CCCCCC;
	box-shadow: 0 0 9px #CCC;
	background: #fff;
	padding-top: 1%;
}

span.info-bnr-md {
    font-size: 1.3em;
    text-align: left;
    color: #ff4140;
    font-weight: bold;
}

.info-bnr-btn{
    background: #ff6968;
    font-weight: bold;
    margin-top: 10px;
}
.info-bnr-btn a{
	color:#fff !important;
	text-decoration: none !important;
}

div#info-bnr-frame iframe {
    height: 48em;
	width: 100%;
}
div#info-bnr-frame {
	margin-top: -200px;
    padding-top: 200px;
	z-index: -1;
}

.info-pc,.sp-info {
    /*display: none !important;*/
}