@charset "UTF-8";

/* ===============================
	base
 =============================== */
body {
	-webkit-text-size-adjust: 100%;
}

article * {
	box-sizing: border-box;
}

article {
	font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ",
		Meiryo, sans-serif;
	font-size: 1.2em;
	line-height: 1.6em;
	position: relative;
	padding-bottom: 1em;
}

sup {
	vertical-align: super;
}

img {
	vertical-align: bottom;
}

article img {
	width: 100%;
	border: 0;
	vertical-align: bottom;
}

a {
	/* スマホのハイライトデザインを無効にする */
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

a:focus {
	outline: none;
}

.mo a img {
	background-color: rgba(255, 255, 255, .01);
}

#socialArea li {
	margin-left: 6px;
}

/* ===============================
	loading
 =============================== */
#pageLoad {
	width: 100vw;
	height: 100vh;
	background-color: #fff;
	position: fixed;
	z-index: 999;
}

#pageLoad.loading {
	background-image: url(../images/pageloading.gif);
	background-position: center center;
	background-repeat: no-repeat;
}

/* ===============================
	utility
 =============================== */
ul.horizon:after {
	content: ".";
	display: block;
	clear: both;
	height: 0px;
	visibility: hidden;
	font-size: 0px;
}

ul.horizon {
	min-height: 1px;
	zoom: 1;
}

ul.dot {
	list-style: disc;
	padding-left: 1.5em;
}

ul.horizon li {
	float: left;
}

ul.star {
	padding-left: 1.5em;
}

ul.star li {
	text-indent: -1.5em;
}

ul.star li:BEFORE {
	content: "\203b";
	margin-right: 0.5em;
}

ul.disc {
	padding-left: 1.5em;
}

ul.disc li {
	text-indent: -1.5em;
}

ul.disc li:BEFORE {
	content: "\25cf";
	margin-right: 0.5em;
}

ul.square {
	list-style: none;
	padding-left: 1.5em;
}

ul.square li {
	text-indent: -1.5em;
}

ul.square li:BEFORE {
	content: "\25a0";
	margin-right: 0.5em;
}

.caption {
	font-size: 0.88em;
	line-height: 1.4em;
}

.fxs {
	font-size: 0.88em;
	line-height: 1.6em;
}

.fxl {
	font-size: 1.14em;
	line-height: 1.6em;
}

.mt05em {
	margin-top: 0.5em !important;
}

.mt1em {
	margin-top: 1em !important;
}

.mt2em {
	margin-top: 2em !important;
}

.mtl {
	margin-top: 3em;
}

.mb05em {
	margin-bottom: 0.5em !important;
}

.rdus {
	border-radius: 4px;
}

/* ===============================
	common style
 =============================== */
ul.menu li a,.frame {
	display: block;
	border: solid 1px #fff;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
	background: #fff;
}

ul.menu p {
	min-height: 3.4em;
	padding: 1em 0 0;
	font-size: 0.88em;
	line-height: 1.2em;
	font-weight: bold;
	text-align: center;
}

/* Color Setting : green */
article.green {
	background: #e3ece5;
}

article.green #naviArea .inBox {
	background-position: 188px 130px;
}

/* Color Setting : juice */
article.juice {
	background: #f6eded;
}

article.juice #naviArea .inBox {
	background-position: 322px 130px;
}

/* Color Setting : soy */
article.soy {
	background: #efede0;
}

article.soy #naviArea .inBox {
	background-position: 456px 130px;
}

/* Color Setting : soup */
article.soup {
	background: #edf2e4;
}

article.soup #naviArea .inBox {
	background-position: 590px 130px;
}

/* Color Setting : ginger */
article.ginger {
	background: #eee4dd;
}

article.ginger #naviArea .inBox {
	background-position: 725px 130px;
}

/* Color Setting : fiber */
article.fiber {
	background: #e3ebee;
}

article.fiber #naviArea .inBox {
	background-position: 862px 130px;
}

/* Color Setting : soy */
article.soy {
	background: #efede0;
}

article.soy #naviArea .inBox {
	background-position: 456px 130px;
}

/* ***** pageTop style ***** */
a#pageTop {
	width: 53px;
	height: 68px;
	background-image: url(../images/pagetop.png);
	background-repeat: no-repeat;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	text-decoration: none;
	position: fixed;
	bottom: 60px;
	right: 0;
	display: none;
}

a#pageTop:hover {
	background-position: 0 bottom;
}

/* ===============================
	device setting
 =============================== */
@media print , screen and (min-width: 415px) {
	.pc {
		display: block;
	}
	.sp {
		display: none;
	}
	#wrapper {
		min-width: 980px;
		overflow: hidden;
	}
	article {
		padding-bottom: 5em;
	}
	header {
		display: none;
	}
	#naviArea {
		height: 240px;
		background: url(../images/bg-navi.png) repeat-x left top;
		margin-bottom: 15px;
	}
	#naviArea .inBox {
		padding-bottom: 55px;
		background-image: url(/juicer/recipe/common/images/navi-visit.png);
		background-repeat: no-repeat;
		background-position: 0 0;
	}
	#naviArea:BEFORE {
		content: "";
		display: block;
		width: 100%;
		padding-top: 80px;
		background: url(../images/navi-ttl.png) no-repeat center 15px;
	}
	#naviArea ul li {
		width: 135px;
		height: 110px;
	}
	.bgImgLink a,#naviArea ul li a {
		display: block;
		width: 100%;
		height: 100%;
		background-position: 0 0;
		background-repeat: no-repeat;
		overflow: hidden;
		text-indent: 100%;
		white-space: nowrap;
		text-decoration: none;
	}
	#naviArea ul li a[href$="/recipe/"] {
		background-image: url(../images/navi_top-.png);
	}
	#naviArea ul li a[href$="/recipe/"]:hover,#naviArea ul li a[href$="/recipe/"].active
		{
		background-image: url(../images/navi_top.png);
	}
	#naviArea ul li a[href$="/category/"] {
		background-image: url(../images/navi_green-.png);
	}
	#naviArea ul li a[href$="/category/"]:hover,#naviArea ul li a[href$="/category/"].active
		{
		background-image: url(../images/navi_green.png);
	}
	#naviArea ul li a[href$="/juice/"] {
		background-image: url(../images/navi_juice-.png);
	}
	#naviArea ul li a[href$="/juice/"]:hover,#naviArea ul li a[href$="/juice/"].active
		{
		background-image: url(../images/navi_juice.png);
	}
	#naviArea ul li a[href$="/soy/"] {
		background-image: url(../images/navi_soy-.png);
	}
	#naviArea ul li a[href$="/soy/"]:hover,#naviArea ul li a[href$="/soy/"].active
		{
		background-image: url(../images/navi_soy.png);
	}
	#naviArea ul li a[href$="/soup/"] {
		background-image: url(../images/navi_soup-.png);
	}
	#naviArea ul li a[href$="/soup/"]:hover,#naviArea ul li a[href$="/soup/"].active
		{
		background-image: url(../images/navi_soup.png);
	}
	#naviArea ul li a[href$="/ginger/"] {
		background-image: url(../images/navi_ginger-.png);
	}
	#naviArea ul li a[href$="/ginger/"]:hover,#naviArea ul li a[href$="/ginger/"].active
		{
		background-image: url(../images/navi_ginger.png);
	}
	#naviArea ul li a[href$="/fiber/"] {
		background-image: url(../images/navi_fiber-.png);
	}
	#naviArea ul li a[href$="/fiber/"]:hover,#naviArea ul li a[href$="/fiber/"].active
		{
		background-image: url(../images/navi_fiber.png);
	}
	#footerNaviArea {
		display: none;
	}
	.baseWidth {
		width: 950px;
		margin-right: auto;
		margin-left: auto;
	}
	.box {
		padding: 1em 1em;
	}
	.table {
		display: table;
		width: 100%;
	}
	.tableCell {
		display: table-cell;
		width: 50%;
		vertical-align: top;
	}
	.tableCell.vm {
		vertical-align: middle;
	}
	ul.col2 li {
		width: 47%;
		float: left;
		margin-left: 6%;
		margin-top: 3%;
	}
	ul.col2 li:nth-child(2) {
		margin-top: 0;
	}
	ul.col2 li:nth-child(2n-1) {
		margin-left: 0;
	}
	ul.col4 li {
		width: 23%;
		float: left;
		margin-left: 2.6%;
		margin-top: 2.6%;
	}
	ul.col4 li:nth-child(2),ul.col4 li:nth-child(3),ul.col4 li:nth-child(4)
		{
		margin-top: 0;
	}
	ul.col4 li:nth-child(4n-3) {
		margin-left: 0;
	}
	ul.col3 li {
		width: 31%;
		float: left;
		margin-left: 3.5%;
	}
	ul.col3 li:nth-child(2),ul.col3 li:nth-child(3) {
		margin-top: 0;
	}
	ul.col3 li:nth-child(3n-2) {
		margin-left: 0;
	}
	ul li:FIRST-CHILD {
		margin-top: 0;
		margin-left: 0;
	}
}

@media screen and (max-width: 414px) {
	.pc {
		display: none;
	}
	.sp {
		display: block;
	}
	article {
		font-size: 1.1em;
		line-height: 1.6em;
	}
	#header {
		min-width: 100%;
		width: 100%;
		height: auto;
		padding: 0 0 15px;
	}
	#utilityNav,#categoryId {
		display: none;
	}
	#productFooter {
		display: none;
	}
	#footerColumn {
		width: 100%;
	}
	#footerColumn ul li {
		display: none;
	}
	#footerColumn ul li#copyright {
		display: block;
		width: 100%;
		padding: 0;
		text-align: center;
	}
	#breadCrumb {
		display: none;
	}
	#naviArea {
		display: none;
	}
	nav.drawer-nav a {
		color: #36221b;
		text-decoration: none;
	}
	nav.drawer-nav a:hover {
		color: #7e6b5a;
	}
	nav.drawer-nav .drawer-brand {
		padding: 0 0.5em;
	}
	nav.drawer-nav a.drawer-menu-item {
		padding: 0.75em 0.5em 0.75em 1.5em;
		border-top: dotted 1px #36221b;
		background-image: url(../images/navi-arrow.png);
		background-repeat: no-repeat;
		background-position: 0.4em center;
		background-size: 8px;
	}
	nav.drawer-nav li:first-child a.drawer-menu-item {
		border-top: none;
	}
	#footerNaviArea {
		border-top: solid 1px #36221b;
		font-size: 0.88em;
		line-height: 1.2em;
		padding-top: 1em;
		margin-top: 5em;
	}
	#footerNaviArea a {
		display: block;
		text-decoration: none;
		text-align: center;
		background: #36221b;
		color: #fff;
		padding: 0.5em 0;
	}
	.baseWidth {
		padding-left: 10px;
		padding-right: 10px;
	}
	.tableCell.right {
		margin-top: 2em;
	}
	ul.col2 li,ul.col4 li {
		width: 47%;
		float: left;
		margin-top: 4%;
		margin-left: 6%;
	}
	ul.col2 li:nth-child(2n-1),ul.col4 li:nth-child(2n-1) {
		margin-left: 0;
	}
}

@media print {
	.printNl {
		page-break-before: always;
	}
}

/* ===============================
	drawer.min.css
 =============================== */
.drawer-hamburger {
	padding: 10px .75rem 30px;
}