@charset "UTF-8";


/* --------------------------------------------------
		overrie
-------------------------------------------------- */

@media screen and (max-width: 736px) {
}


/* --------------------------------------------------
		component
-------------------------------------------------- */

@media screen and (max-width: 736px) {
}


/* --------------------------------------------------
		visual
-------------------------------------------------- */
.p-visual {
	background-image: url(../img/bg_visual.jpg);
}

@media screen and (max-width: 736px) {
.p-visual {
	background-image: url(../img/bg_visual_sp.jpg);
}
}


/* --------------------------------------------------
		howtoeat
-------------------------------------------------- */
.howtoeat {
	padding: 50px 0 130px;
}
.howtoeat-bnr {
	text-align: center;
	margin-bottom: 80px;
	position: relative;
	opacity: 0;
}
.howtoeat-bnr a {
	position: relative;
	overflow: hidden;
	display: inline-block;
	border-radius: 10px 10px;
	transition: transform .1s ease;
}
.howtoeat-bnr a:hover {
	transform: scale(1.03);
}
.howtoeat-list li {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
    background-color: #FFFFFF;
}
.howtoeat-list li:nth-child(2n) {
	-webkit-box-orient: horizontal;
	-webkit-box-direction: reverse;
	-ms-flex-direction: row-reverse;
	flex-direction: row-reverse;
}
.howtoeat-list li .image {
	width: 50%;
}
.howtoeat-list li .body {
	width: 50%;
}
.howtoeat-list li .inner {
	width: 320px;
	margin: 0 auto;
}
.howtoeat-list li .icon {
	position: relative;
	transform: rotate(5deg);
	width: 145px;
	margin: 0 auto 20px;
	opacity: 0;
}
.howtoeat-list li .title {
	font-size: 2.4rem;
	font-weight: bold;
	text-align: center;
	margin-bottom: 15px;
}
.howtoeat-list li .text {
	margin-bottom: 30px;
}

@media screen and (max-width: 736px) {
.howtoeat {
	padding: 30px 0 0;
}
.howtoeat-bnr {
	margin-bottom: 40px;
}
.howtoeat-bnr a:hover {
	transform: scale(1);
}
.howtoeat-list li {
	display: block;
}
.howtoeat-list li .image {
	width: 100%;
}
.howtoeat-list li .body {
	width: 100%;
}
.howtoeat-list li .inner {
	width: 89.33333333333333%;
	padding-bottom: 50px;
}
.howtoeat-list li .icon {
	width: 37.3134328358209%;
	margin-top: -14vw;
}
.howtoeat-list li .title {
	font-size: 2.0rem;
	margin-bottom: 10px;
}
.howtoeat-list li .text {
	margin-bottom: 20px;
}
.howtoeat-list li .button {
	width: 94.02985074626866%;
	margin: 0 auto;
}
}