@charset "utf-8";
/* ======================================================
 * mazet.css
 * ------------------------------------------------------
 * css for mazet brand page
====================================================== */
/* base
------------------------------------------------------ */

.grid__item.has-margin {
	margin-top: 2em; }
	@media screen and (max-width: 768px) {
		.grid.has-margin {
			margin-top: 10px; }
	}

.mainBanner .pageHeading.pageHeading--products:before {
	height: 320px; }
	.mainBanner .pageHeading.pageHeading--products .headline {
		display: none; }
	@media screen and (max-width: 768px) {
		.mainBanner .pageHeading.pageHeading--products:before {
			height: 250px;
			background-size: cover; }
		.mainBanner .pageHeading.pageHeading--products .pageHeading__body {
			position: relative; }
			.mainBanner .pageHeading.pageHeading--products .headline {
				display: block; }
			.giuseppe-coccoView .mainBanner .pageHeading.pageHeading--products .headline {
				position: absolute;
				top: 28px;
				left: 25px;
				width: 149px; }
			.plusnaturalView .mainBanner .pageHeading.pageHeading--products .headline {
				position: absolute;
				top: 14px;
				left: 27px;
				width: 247px; }
			.sweetsstickView .mainBanner .pageHeading.pageHeading--products .headline {
				position: absolute;
				top: 27px;
				left: 27px;
				width: 283px; }
			.saisonView .mainBanner .pageHeading.pageHeading--products .headline {
				position: absolute;
				top: 88px;
				left: 24px;
				width: 198px; }
	}

.imgHover:hover {
	text-decoration: none; }
.imgHover .figure {
	background: #ffffff;
	vertical-align: top; }
	.imgHover .figure > img {
		/* transition */
			-webkit-transition: opacity 0.2s ease-out;
			-moz-transition: opacity 0.2s ease-out;
			-ms-transition: opacity 0.2s ease-out;
		transition: opacity 0.2s ease-out;
		/* for chrome */
			-webkit-backface-visibility: hidden;
		backface-visibility: hidden; }
		.imgHover:hover .figure > img {
			opacity: 0.8;
			filter: alpha(opacity=80);
			-ms-filter: "alpha(opacity=80)";
			zoom: 1; }
.figure figcaption.highlight01 {
	margin-bottom: 0.5em;
	font-size: 16px;
	font-size: 1.6rem; }
	@media screen and (max-width: 768px) {
		.figure figcaption.highlight01 {
			font-size: 13px;
			font-size: 1.3rem; }
	}


.plusnaturalView__text01 {
	padding-top: 40px; }
.plusnaturalView__media01 {
	max-width: 880px;
	margin-left: auto;
	margin-right: auto; }
.plusnaturalView__media01 .media__image {
	width: 142px;
	margin-left: 50px; }
.plusnaturalView__media01 .media__text {
	float: left; }
.plusnaturalView__centeringItem {
	text-align: center; }
	.plusnaturalView__centeringItemText {
		display: inline-block;
		margin-top: 0;
		font-weight: bold; }
	.plusnaturalView__centeringItem .button {
		margin-top: 0;
		margin-left: 20px; }
	@media screen and (max-width: 768px) {
		.plusnaturalView__text01 {
			padding-top: 0; }
		.plusnaturalView__media01 {
			margin-left: -6px;
			margin-right: -6px; }
		.plusnaturalView__media01 .media__image {
			margin-left: 0; }
		.plusnaturalView__media01 .media__text {
			margin-top: 0;
			width: 75%; }
		.plusnaturalView__centeringItem .button {
			margin-top: 15px;
			margin-left: 0; }
	}


.sweetsstickView__tableItem {
	display: table;
	margin-top: 25px;
	margin-left: auto;
	margin-right: auto; }
	.sweetsstickView__tableItemImage {
		display: table-cell; }
	.sweetsstickView__tableItemText {
		display: table-cell;
		vertical-align: middle;
		padding-left: 20px; }
		.sweetsstickView__tableItemImage > *:first-child,
		.sweetsstickView__tableItemText > *:first-child {
			margin-top: 0; }
	@media screen and (max-width: 768px) {
		.sweetsstickView__tableItem {
			width: 100%;
			margin-top: 20px; }
			.sweetsstickView__tableItemImage {
				width: 70px; }
			.sweetsstickView__tableItemText {
				padding-left: 15px; }
	}


.lineupImage {
	margin-top: 40px !important;
	background: #f6f3a4; }
	@media screen and (max-width: 768px) {
		.lineupImage {
			margin-top: 20px !important; }
	}

/* SP
------------------------------------------------------ */
@media screen and (max-width: 768px) {
.sp-column-3 {
	width: 25% !important; }
.sp-column-4 {
	width: 33.33% !important; }
}


/* clearfix
=========================================*/
.store__media:after {
	content:" ";
	display:block;
	clear:both; }