@charset "utf-8";

/*-----
 * Default Layout
 */
/*
 * トップ
 */
/* ビジュアル */
#visual {
	box-sizing: border-box;
	height: 100vh;
	min-height: 763px;
	padding-top: 69px;
}
#visual p {
	overflow: hidden;
	width: 100%;
	height: 100%;
	background: url(../img/visual.png) no-repeat 50% 50%;
	text-indent: 100%;
	white-space: nowrap;
}
/* コンテンツメニュー */
#menu {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	padding: 198px 0 98px;
}
#menu > div {
	flex: 0 0 auto;
	width: 227px;
	height: 194px;
	margin: 0 14px 42px;
}
#menu p {
	position: relative;
	width: inherit;
	height: inherit;
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: 50% 50%;
}
#menu-about p {
	background-image: url(../img/m_about.png);
}
#menu-products p {
	background-image: url(../img/m_products.png);
}
#menu-goji-berry p {
	background-image: url(../img/m_goji_berry.png);
}
#menu-ingredients p {
	background-image: url(../img/m_ingredients.png);
}
#menu-faq p {
	background-image: url(../img/m_faq.png);
}
#menu a {
	overflow: hidden;
	display: block;
	width: 225px;
	height: 192px;
	border: 1px solid #eee;
	color: inherit;
	text-decoration: none;
	text-indent: 100%;
	white-space: nowrap;
}
#menu-products a:before {
	position: absolute;
	z-index: 2;
	top: -103px;
	left: 38px;
	width: 146px;
	height: 174px;
	background: url(../img/m_products_img.png) no-repeat 0 0;
	content: "";
}
#menu-goji-berry a:before {
	position: absolute;
	top: -66px;
	left: 49px;
	width: 132px;
	height: 126px;
	background: url(../img/m_goji_berry_img.png) no-repeat 0 0;
	content: "";
}
/* Default Layout */


/*-----
 *  PC Layout: >= 768px
 */
@media screen and (min-width:768px) {
	/* コンテンツメニュー */
	#menu a {
		transition: all 0.3s ease;
	}
	#menu a:hover {
		width: 207px;
		height: 174px;
		border: 10px solid #e63556;
	}
} /* PC Layout */


/*-----
 *  Mobile Layout: 480px, 320px
 */
@media screen and (max-width:767px) {
	/* ビジュアル */
	#visual {
		position: relative;
		height: 568px;
		min-height: 0;
		padding-top: 0;
	}
	#visual:after {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 8px;
		width: 30px;
		height: 16px;
		margin: 0 auto;
		background: url(../img/sp_arrow.png) no-repeat 50% 0;
		background-size: contain;
		content: "";
	}
	#visual p {
		height: 502px;
		background-image: url(../img/sp_visual.png);
		background-size: auto 502px;
	}
	/* コンテンツメニュー */
	#menu {
		flex-direction: column;
		justify-content: flex-start;
		padding: 48px 0 64px;
	}
	#menu > div {
		width: 100%;
		height: auto;
		margin: 27px 0 0;
	}
	#menu-goji-berry {
		margin-top: 87px !important;
	}
	#menu-products {
		margin-top: 122px !important;
	}
	#menu p {
		width: 210px;
		height: 180px;
		margin: 0 auto;
		background-size: contain;
	}
	#menu-about p {
		background-image: url(../img/sp_m_about.png);
	}
	#menu-products p {
		background-image: url(../img/sp_m_products.png);
	}
	#menu-goji-berry p {
		background-image: url(../img/sp_m_goji_berry.png);
	}
	#menu-ingredients p {
		background-image: url(../img/sp_m_ingredients.png);
	}
	#menu-faq p {
		background-image: url(../img/sp_m_faq.png);
	}
	#menu a {
		box-sizing: border-box;
		width: 100% !important;
		height: 100% !important;
		border-color: #eff0f2;
	}
	#menu a:before {
		background-size: contain;
	}
	#menu-products a:before {
		top: -95px;
		left: 36px;
		width: 135px;
		height: 158px;
		background-image: url(../img/sp_m_products_img.png);
	}
	#menu-goji-berry a:before {
		top: -60px;
		left: 45px;
		width: 123px;
		height: 117px;
		background-image: url(../img/sp_m_goji_berry_img.png);
	}
} /* Mobile Layout */