@charset "UTF-8";
/*----------------------------------------

	- header
	+ article
		- lnav
		+ main
			+ listCover
				- detail

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

/*----------------------------------------
	header
		中面で常にココは使います
----------------------------------------*/

#header_bg {
	top: 0;
}

/*----------------------------------------
	article
----------------------------------------*/

article {
	min-width: 1000px;
	width: 100%;
	background: url(/img/common_bg01.gif) repeat left top;
}

@media screen and (max-device-width:500px) {
	article {
		min-width: 500px;
		width: 500px;
	}
}

/*----------------------------------------
	nav 現在位置表示用
----------------------------------------*/
header nav ul li#nav01 {
	background: url(/img/common_nav_pc_bg01.png) no-repeat 1px 77px;
}

@media screen and (max-device-width:500px) {
	header nav ul li#nav01 {
		background: url(/img/common_nav_sp_bg01.png) no-repeat 20px 77px;
	}
}

/*----------------------------------------
	lnav
----------------------------------------*/

#lnav {
	width: 100%;
	margin-top: 161px;
	background-color: #fde07a;
}

@media screen and (max-device-width:500px) {
	#lnav {
		width: 100%;
		margin-top: 332px;
	}
}

#lnav ul {
	width: 1000px;
	margin: 0 auto;
}

@media screen and (max-device-width:500px) {
	#lnav ul {
		width: 100%;
		margin: 0;
		padding: 0;
		border-bottom: 1px solid #ffffff;
	}
}

#lnav ul li {
	float: left;
}

@media screen and (max-device-width:500px) {
	#lnav ul li {
		width: 249px;
		border-right: 1px solid #ffffff;
		border-bottom: 1px solid #ffffff;
	}
	#lnav ul li:nth-child(even) {
		width: 250px;
		border-right: none;
		border-bottom: 1px solid #ffffff;
	}
	#lnav ul li:last-child {
		border-bottom: none;
	}
}

#lnav ul li img {
	padding: 5px 29px 10px 29px;
}

#lnav ul li:nth-child(4) img {
	padding: 5px 28px 10px 28px;
}

@media screen and (max-device-width:500px) {
	#lnav ul li img {
		padding: 8px 70px 6px;
	}
	#lnav ul li:nth-child(even) img {
		padding: 8px 71px 6px 70px;
	}
}

/* new */
#lnav.newnav {
	background: #fde07a url(../../img/products/new_nav_bg01.gif) repeat-x left bottom;
}

#lnav.newnav ul li.on img,
#lnav.newnav ul li img:hover {
	background-color: #ffffff;
}

@media screen and (max-device-width:500px) {
	#lnav.newnav {
		background-image: none;
	}
}

/* choco */
#lnav.choconav {
	background: #fde07a url(../../img/products/choco_nav_bg01.gif) repeat-x left bottom;
}

#lnav.choconav ul li.on img,
#lnav.choconav ul li img:hover {
	background-color: #6c3e0e;
}

@media screen and (max-device-width:500px) {
	#lnav.choconav {
		background-image: none;
	}
}

/* premix */
#lnav.premixnav {
	background: #fde07a url(../../img/products/premix_nav_bg01.gif) repeat-x left bottom;
}

#lnav.premixnav ul li.on img,
#lnav.premixnav ul li img:hover {
	background-color: #f9a54b;
}

@media screen and (max-device-width:500px) {
	#lnav.premixnav {
		background-image: none;
	}
}

/* candy */
#lnav.candynav {
	background: #fde07a url(../../img/products/candy_nav_bg01.gif) repeat-x left bottom;
}

#lnav.candynav ul li.on img,
#lnav.candynav ul li img:hover {
	background-color: #fba6aa;
}

@media screen and (max-device-width:500px) {
	#lnav.candynav {
		background-image: none;
	}
}

/* ice */
#lnav.icenav {
	background: #fde07a url(../../img/products/ice_nav_bg01.gif) repeat-x left bottom;
}

#lnav.icenav ul li.on img,
#lnav.icenav ul li img:hover {
	background-color: #a8dbe3;
}

@media screen and (max-device-width:500px) {
	#lnav.icenav {
		background-image: none;
	}
}

/* nutrition */
#lnav.nutritionnav {
	background: #fde07a url(../../img/products/nutrition_nav_bg01.gif) repeat-x left bottom;
}

#lnav.nutritionnav ul li.on img,
#lnav.nutritionnav ul li img:hover {
	background-color: #8acc47;
}

@media screen and (max-device-width:500px) {
	#lnav.nutritionnav {
		background-image: none;
	}
}

/*----------------------------------------
	main
----------------------------------------*/

#main {
	width: 1000px;
	margin: 0 auto;
}

@media screen and (max-device-width:500px) {
	#main {
		width: 414px;
	}
}

#main h1#tit01 {
	padding: 30px 0 30px 30px;
}

@media screen and (max-device-width:500px) {
	#main h1#tit01 {
		padding-left: 20px;
	}
}

/* ice */
#main #tit01.icetit {
	display: table;
	padding: 30px 0 30px 30px;
}

#main #tit01.icetit h1,
#main #tit01.icetit p {
	display: table-cell;
	vertical-align: middle;
}

@media screen and (max-device-width:500px) {
	#main #tit01.icetit {
		display: block;
		padding-left: 20px;
		padding-right: 40px;
	}

	#main #tit01.icetit h1,
	#main #tit01.icetit p {
		display: block;
	}

	#main #tit01.icetit p {
		padding-top: 15px;
		text-indent: -1em;
		margin-left: 1em;
	}
}

/* nutrition */
#main h1#tit01.nutritiontit {
	padding: 26px 20px 26px 30px;
}

#main h1#tit01.nutritiontit img:first-of-type {
	float: left;
	padding: 4px 0;
}

#main h1#tit01.nutritiontit img:last-of-type {
	float: right;
}

@media screen and (max-device-width:500px) {
	#main h1#tit01.nutritiontit {
		padding-left: 20px;
		padding-right: 40px;
	}
}

#main p.nutritionbtn {
	padding: 10px 0 40px;
	text-align: center;
}

@media screen and (max-device-width:500px) {
	#main p.nutritionbtn {
		padding-right: 20px;
	}

	#main p.nutritionbtn img {
		width: 100%;
		height: auto;
	}
}

/*----------------------------------------
	listCover
----------------------------------------*/

ul.listCover {
	margin-left: -10px;
	padding-bottom: 30px;
	text-align: left;
}

ul.listCover li.listItem {
	display: inline-block;
	position: relative;
	width: 192px;
	margin: 0 0 8px 10px;
	padding: 12px 0;
	background-image: url(../../img/products/product_list_bg01.png), url(../../img/products/product_list_bg04.png);
	background-repeat: no-repeat, no-repeat;
	background-position: left top, left bottom;
	cursor: pointer;
}

ul.listCover li.listItem p.listmark {
	position: absolute;
	top: 12px;
	right: 12px;
}

ul.listCover li.listItem .list01 {
	padding-top: 18px;
}

/* choco */
ul.listCover li.listItem.chocolist .list01 {
	background: url(../../img/products/product_list_choco_t01.gif) no-repeat 12px top;
}

/* premix */
ul.listCover li.listItem.premixlist .list01 {
	background: url(../../img/products/product_list_premix_t01.gif) no-repeat 12px top;
}

/* candy */
ul.listCover li.listItem.candylist .list01 {
	background: url(../../img/products/product_list_candy_t01.gif) no-repeat 12px top;
}

/* ice */
ul.listCover li.listItem.icelist .list01 {
	background: url(../../img/products/product_list_ice_t01.gif) no-repeat 12px top;
}

/* nutrition */
ul.listCover li.listItem.nutritionlist .list01 {
	background: url(../../img/products/product_list_nutrition_t01.gif) no-repeat 12px top;
}

ul.listCover li.listItem .list01 img {
	padding: 0 35px 11px;
}

ul.listCover li.listItem .list01 div {
	padding-top: 4px;
	background-image: url(../../img/products/product_list_bg03.png), url(../../img/products/product_list_bg02.png);
	background-repeat: no-repeat, repeat-y;
	background-position: left bottom, left top;
}

ul.listCover li.listItem .list01 div p {
	display: table-cell;
	width: 148px;
	padding: 6px 22px;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
}

/* 詳細の枠部分 */
ul.listCover li.listItem .selfRep {
	display: none;
}

ul.listCover li.listItem .selfRep .selfRepBg {
	background-color: #ffffff;
}

ul.listCover li.expandField {
	position: relative;
	float: left;
	width: 1000px;
	margin: 3px 0 30px 10px;
	padding-top: 17px;
	background: url(../../img/products/product_detail_bg_line01.png) repeat-x left top;
	overflow: hidden;
}

@media screen and (max-device-width:500px) {
	ul.listCover li.expandField {
		width: 394px;
	}
}

ul.listCover li.expandField .selfRepInner {
	padding: 18px 0;
	border-right: 2px solid #e4d5c7;
	border-bottom: 2px solid #e4d5c7;
	border-left: 2px solid #e4d5c7;
	background-color: #ffffff;
}

ul.listCover li.expandField span.btnClose {
	position: absolute;
	top: 35px;
	right: 22px;
	display: block;
	width: 23px;
	height: 23px;
	background: url(../../img/products/product_detail_btn_close01.gif) no-repeat left top;
	overflow: hidden;
	cursor: pointer;
}

ul.listCover li.expandField span.btnPrev {
	position: absolute;
	top: 50%;
	left: 16px;
	display: block;
	width: 32px;
	height: 77px;
	margin-top: -30px;
	background: url(../../img/products/product_detail_btn_prev01.gif) no-repeat left top;
	overflow: hidden;
	cursor: pointer;
}

ul.listCover li.expandField span.btnNext {
	position: absolute;
	top: 50%;
	right: 16px;
	display: block;
	width: 32px;
	height: 77px;
	margin-top: -30px;
	background: url(../../img/products/product_detail_btn_next01.gif) no-repeat left top;
	overflow: hidden;
	cursor: pointer;
}

@media screen and (max-device-width:500px) {
	ul.listCover li.expandField span.btnClose,
	ul.listCover li.expandField span.btnPrev,
	ul.listCover li.expandField span.btnNext {
		display: none;
	}
}

/* 吹き出しの三角部分 5個並び */
ul.listCover li.expandField:nth-child(5n+2) span.detailArrow {
	position: absolute;
	top: 0;
	left: 88px;
	width: 16px;
	height: 17px;
	background: url(../../img/products/product_detail_bg_arrow01.png) no-repeat left top;
}

ul.listCover li.expandField:nth-child(5n+3) span.detailArrow {
	position: absolute;
	top: 0;
	left: 290px;
	width: 16px;
	height: 17px;
	background: url(../../img/products/product_detail_bg_arrow01.png) no-repeat left top;
}

ul.listCover li.expandField:nth-child(5n+4) span.detailArrow {
	position: absolute;
	top: 0;
	left: 492px;
	width: 16px;
	height: 17px;
	background: url(../../img/products/product_detail_bg_arrow01.png) no-repeat left top;
}

ul.listCover li.expandField:nth-child(5n+5) span.detailArrow {
	position: absolute;
	top: 0;
	right: 290px;
	width: 16px;
	height: 17px;
	background: url(../../img/products/product_detail_bg_arrow01.png) no-repeat left top;
}

ul.listCover li.expandField:nth-child(5n+6) span.detailArrow {
	position: absolute;
	top: 0;
	right: 88px;
	width: 16px;
	height: 17px;
	background: url(../../img/products/product_detail_bg_arrow01.png) no-repeat left top;
}

/* 吹き出しの三角部分 2個並び */
@media screen and (max-device-width:500px) {
	ul.listCover li.expandField:nth-child(even) span.detailArrow {
		position: absolute;
		top: 0;
		left: 88px;
		width: 16px;
		height: 17px;
		background: url(../../img/products/product_detail_bg_arrow01.png) no-repeat left top;
	}
	ul.listCover li.expandField:nth-child(odd) span.detailArrow {
		position: absolute;
		top: 0;
		left: 290px;
		width: 16px;
		height: 17px;
		background: url(../../img/products/product_detail_bg_arrow01.png) no-repeat left top;
	}
}

/* 詳細の中身 */
/*----------------------------------------
	detail
----------------------------------------*/
.detail {
	width: 820px;
	margin: 0 auto;
	padding: 20px;
	background-color: #fcf9eb;
}

@media screen and (max-device-width:500px) {
	.detail {
		width: 285px;
		margin: 0 auto;
	}
}

.detail .detail_l {
	float: left;
	width: 285px;
}

@media screen and (max-device-width:500px) {
	.detail .detail_l {
		float: none;
		padding-bottom: 20px;
	}
}

.detail .detail_l img:nth-child(2) {
	padding-top: 10px;
}

.detail .detail_r {
	float: right;
	width: 510px;
}

@media screen and (max-device-width:500px) {
	.detail .detail_r {
		float: none;
		width: 285px;
	}
}

/* choco */
.detail.chocodetail .detail_r {
	position: relative;
	background: url(../../img/products/product_detail_choco_t01.gif) no-repeat left top;
}

/* premix */
.detail.premixdetail .detail_r {
	position: relative;
	background: url(../../img/products/product_detail_premix_t01.gif) no-repeat left top;
}

/* candy */
.detail.candydetail .detail_r {
	position: relative;
	background: url(../../img/products/product_detail_candy_t01.gif) no-repeat left top;
}

/* ice */
.detail.icedetail .detail_r {
	position: relative;
	background: url(../../img/products/product_detail_ice_t01.gif) no-repeat left top;
}

/* nutrition */
.detail.nutritiondetail .detail_r {
	position: relative;
	background: url(../../img/products/product_detail_nutrition_t01.gif) no-repeat left top;
}

@media screen and (max-device-width:500px) {
	.detail.chocodetail .detail_r,
	.detail.premixdetail .detail_r,
	.detail.candydetail .detail_r,
	.detail.icedetail .detail_r,
	.detail.nutritiondetail .detail_r {
		background: none;
	}
}

.detail .detail_r p.detailmark {
	position: absolute;
	top: 0;
	right: 0;
}

@media screen and (max-device-width:500px) {
	.detail .detail_r p.detailmark {
		position: static;
		padding-left: 103px;
	}
}

.detail .detail_r h1 {
	padding: 25px 78px 11px 0;
	background-image: url(../../img/products/product_detail_line01_01.gif), url(../../img/products/product_detail_line01_03.gif), url(../../img/products/product_detail_line01_02.gif);
	background-repeat: no-repeat, no-repeat, repeat-x;
	background-position: left bottom, right bottom, left bottom;
	font-weight: bold;
}

@media screen and (max-device-width:500px) {
	.detail .detail_r h1 {
		padding-right: 0;
		word-break: break-all;
	}
	/* choco */
	.detail.chocodetail .detail_r h1 {
		background-image: url(../../img/products/product_detail_choco_t01.gif), url(../../img/products/product_detail_line01_01.gif), url(../../img/products/product_detail_line01_03.gif), url(../../img/products/product_detail_line01_02.gif);
		background-repeat: no-repeat, no-repeat, no-repeat, repeat-x;
		background-position: left top, left bottom, right bottom, left bottom;
	}
	/* premix */
	.detail.premixdetail .detail_r h1 {
		background-image: url(../../img/products/product_detail_premix_t01.gif), url(../../img/products/product_detail_line01_01.gif), url(../../img/products/product_detail_line01_03.gif), url(../../img/products/product_detail_line01_02.gif);
		background-repeat: no-repeat, no-repeat, no-repeat, repeat-x;
		background-position: left top, left bottom, right bottom, left bottom;
	}	
	/* candy */
	.detail.candydetail .detail_r h1 {
		background-image: url(../../img/products/product_detail_candy_t01.gif), url(../../img/products/product_detail_line01_01.gif), url(../../img/products/product_detail_line01_03.gif), url(../../img/products/product_detail_line01_02.gif);
		background-repeat: no-repeat, no-repeat, no-repeat, repeat-x;
		background-position: left top, left bottom, right bottom, left bottom;
	}
	/* ice */
	.detail.icedetail .detail_r h1 {
		background-image: url(../../img/products/product_detail_ice_t01.gif), url(../../img/products/product_detail_line01_01.gif), url(../../img/products/product_detail_line01_03.gif), url(../../img/products/product_detail_line01_02.gif);
		background-repeat: no-repeat, no-repeat, no-repeat, repeat-x;
		background-position: left top, left bottom, right bottom, left bottom;
	}
	/* nutrition */
	.detail.nutritiondetail .detail_r h1 {
		background-image: url(../../img/products/product_detail_nutrition_t01.gif), url(../../img/products/product_detail_line01_01.gif), url(../../img/products/product_detail_line01_03.gif), url(../../img/products/product_detail_line01_02.gif);
		background-repeat: no-repeat, no-repeat, no-repeat, repeat-x;
		background-position: left top, left bottom, right bottom, left bottom;
	}	
}

.detail .detail_r section {
	padding: 17px 0 15px;
}

.detail .detail_r section h1,
.detail.chocodetail .detail_r section h1,
.detail.premixdetail .detail_r section h1,
.detail.candydetail .detail_r section h1,
.detail.icedetail .detail_r section h1,
.detail.nutritiondetail .detail_r section h1 {
	padding: 0 0 8px;
	background: none;
	font-weight: normal;
}

.detail .detail_r div {
	width: 510px;
	margin-bottom: 10px;
}

@media screen and (max-device-width:500px) {
	.detail .detail_r div {
		width: 285px;
	}
}

.detail .detail_r div dl {
	padding: 0;
	background: none;
}

.detail .detail_r div dl dt {
	padding: 5px 10px 3px;
	text-align: center;
}

.detail .detail_r div dl dd {
	padding: 8px 10px 9px;
	text-align: center;
}

.detail .detail_r > div > dl:last-of-type dd {
	padding: 8px 0 0;
}

.detail .detail_r div dl dd.t_align01 {
	text-align: left;
}

.detail .detail_r div dl dd.t_align01 > p {
	padding: 0 10px 14px;
}

.detail .detail_r div div {
	margin-bottom: 0;
}

.detail .detail_r div dl dd div div p {
	padding: 0 0 5px 10px;
	border-bottom: solid 1px #a0774d;
}

.detail .detail_r div dl dd div div ul {	
	padding: 4px 0 20px 10px;
	background: none;
	overflow: hidden;
}

@media screen and (max-device-width:500px) {
	.detail .detail_r div dl dd div div ul {
		width: auto;
	}
}

.detail .detail_r div dl dd div div ul:first-of-type {	
	padding-bottom: 26px;
}

.detail .detail_r div dl dd div div ul li {
	float: left;
	margin-right: 6px;
	margin-top: 6px;
	padding: 5px 10px 4px;
	background: transparent;
	border: 1px solid #6c3e0e;
	color: #6c3e0e;
	font-weight: bold;
}

@media screen and (max-device-width:500px) {
	.detail .detail_r div dl dd div div ul li {
		float: left !important;
		padding: 5px 10px 4px !important;
	}
}

.detail .detail_r div dl dd div div ul li.allergie_on {
	color: #fff;
	background: #cc2403;
	border: 1px solid #cc2403;
}

.detail .detail_r div dl dd div div p.no_allergie {	
	margin-top: 10px;
	padding: 0 0 20px 10px;
	border-bottom: none;
}

/* choco */
.detail.chocodetail .detail_r div dl dt {
	background-color: #a0774d;
}

/* premix */
.detail.premixdetail .detail_r div dl dt {
	background-color: #f9a54b;
}

/* candy */
.detail.candydetail .detail_r div dl dt {
	background-color: #fba6aa;
}

/* ice */
.detail.icedetail .detail_r div dl dt {
	background-color: #a8dbe3;
}

/* nutrition */
.detail.nutritiondetail .detail_r div dl dt {
	background-color: #7cbf4d;
}

.detail .detail_r dl {
	padding: 18px 0 17px;
	background: url(../../img/products/product_detail_line02.png) repeat-x left top;
}

.detail .detail_r dl dt {
	font-weight: bold;
}

.detail .detail_r ul {
	padding: 11px 0 0 0;
	background: url(../../img/products/product_detail_line02.png) repeat-x left top;
}

.detail .detail_r ul li {
	float: left;
	padding-top: 10px;
}

.detail .detail_r ul li:nth-child(even) {
	padding-left: 10px;
}

@media screen and (max-device-width:500px) {
	.detail .detail_r ul {
		width: 245px;
		padding: 11px 20px 0;
	}
	.detail .detail_r ul li,
	.detail .detail_r ul li:nth-child(even) {
		float: none;
		padding-left: 0;
	}
}