@charset "utf-8";


/* mainvisual
------------------------------------------------------------ */
.mainvisual {
	padding-top: 0;
	width: 100%;
	max-width: 100%;
	position: relative;
}

.pc-box-visual {
  margin: 0 auto;
  width: 100%;
	position: relative;
	display: block;
	background: url(/sp/meat/health/img/img_main_pc.jpg) no-repeat center top;
	background-size: auto 100%;
  position: relative;
  width: 100%;
  height: 0;
  padding-top: calc(500 / 1550 * 100%);
}

@media only screen and (max-width: 640px) {
	.pc-box-visual {
  	display: none;
	}
}

.sp-box-visual {
  margin: 0 auto;
  width: 100%;
	position: relative;
	display: none;
}

@media only screen and (max-width: 640px) {
	.sp-box-visual {
   display: block;
	}
}


.pc-box-visual svg {
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

.pc-box-visual h2 {
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}

.pc-box-visual .pc-box-link-wrap {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 3;
}

.pc-box-visual .pc-box-link-wrap .pc-box-link {
	max-width: 1200px;
	margin: 0 auto;
  width: 98%;
	position: relative;
	text-align: right;
}

.pc-box-visual .pc-box-link-wrap .pc-box-link div  {
	padding-top: 20px;
	display: block;
	vertical-align: top;
	text-align: right;
	width: auto;
}

.pc-box-visual .pc-box-link-wrap .pc-box-link div a {
	color: #FFFFFF;
  text-align: right;
	text-decoration: underline;
	margin-bottom: 0;
	display: inline-block;
	width: auto;
}

.pc-box-visual .pc-box-link-wrap .pc-box-link div a:hover {
	text-decoration: none;
}


.pc-box-visual .pc-box-link-wrap .pc-box-link div img {
	width: 15px;
	height: 15px;
	vertical-align: middle;
	margin-left: 7px;
	display: inline-block;
}

@media only screen and (max-width: 640px) {
	.pc-box-visual .pc-box-link-wrap .pc-box-link div img {
		width: 14px;
		height: 14px;
		vertical-align: middle;
		margin-left: 5px;
		position: relative;
	}
}



.pc-box-visual #move_bk01 {
fill:#FFFFFF;
}

.pc-box-visual .nami_bk01 {
fill:#E60012;
}

.pc-box-visual .nami_bk02 {
fill: none;
}

.pc-box-visual .niku_img {
fill:#FFFFFF;
}

.pc-box-visual .ha01, .pc-box-visual .ha02 {
fill:#E60012;
}

.pc-box-visual .t01_01,.pc-box-visual .t01_02,.pc-box-visual .t01_03,.pc-box-visual .t01_04,.pc-box-visual .t01_05,.pc-box-visual .t01_06,.pc-box-visual .t01_07,.pc-box-visual .t01_08,.pc-box-visual .t01_09,.pc-box-visual .t01_10,.pc-box-visual .t01_11,.pc-box-visual .t01_12,.pc-box-visual .t01_13 {
fill:#E60012;
}

.pc-box-visual .t02_01 {
fill:#FFFFFF;
}

.pc-box-visual .t02_02 {
fill:none;
stroke:#FFFFFF;
stroke-width:2;
stroke-miterlimit:10;
}

.pc-box-visual #main_img,
.pc-box-visual #txt02,
.pc-box-visual #cl01,
.pc-box-visual #cl02,
.pc-box-visual #cl03 {
  visibility: hidden;
}



/* area-intro
------------------------------------------------------------ */
.area-intro {
	max-width: 780px;
  width: 96%;
  position: relative;
	margin: 0 auto 60px;
	background-color: #FFFFFF;
	}


@media only screen and (max-width: 640px) {
  .area-intro {
  	max-width: 580px;
  	width: 90%;
		margin: 0 auto 70px;
		font-size: 14px;
  }
}

.area-intro:before {
	content: '';
	position: absolute;
	bottom: -20px;
	left: -200px;
	width: 196px;
	height: 185px;
  background: url(/sp/meat/health/img/top_bk_06.png) top right no-repeat;
	}
	
@media only screen and (max-width: 640px) {
	.area-intro:before {
		content: '';
		position: absolute;
		bottom: none;
		top: -10px;
		left: -40px;
		width: 98px;
		height: 93px;
  	background: url(/sp/meat/health/img/top_bk_06.png) top right no-repeat;
		background-size: auto 100%;
	}
}

@media only screen and (max-width: 420px) {
	.area-intro:before {
		display: none;
	}
}
	
.area-intro:after {
	content: '';
	position: absolute;
	top: -100px;
	right: -150px;
	width: 148px;
	height: 175px;
  background: url(/sp/meat/health/img/top_bk_07.png) top right no-repeat;
	}
	
@media only screen and (max-width: 640px) {
	.area-intro:after {
		content: '';
		position: absolute;
		bottom: none;
		top: -8px;
		right: -20px;
		width: 74px;
		height: 88px;
  	background: url(/sp/meat/health/img/top_bk_07.png) top right no-repeat;
		background-size: auto 100%;
	}
}

@media only screen and (max-width: 420px) {
	.area-intro:after {
		display: none;
	}
}

.area-intro h3 {
	font-size: 29px;
	line-height: 1.5;
	font-weight: bold;
	text-align: center;
	margin-bottom: 30px;
}

@media only screen and (max-width: 640px) {
  .area-intro h3 {
		font-size: 20px;
  }
}

.area-intro p {
	margin-bottom: 30px;
}

.intro-image {
	width: 100%;
}

@media only screen and (max-width: 640px) {
  .intro-image {
		max-width: 375px;
		width: 100%;
		margin: 0 auto;
  }
}


/* area-efficacy
------------------------------------------------------------ */
.area-efficacy {
	width: 100%;
	background: url(/sp/meat/health/img/top_bk_01.png) repeat center top;
}

@media only screen and (max-width: 640px) {
	.area-efficacy {
		font-size: 14px;
	}
}

.area-efficacy p {
	max-width: 780px;
	width: 96%;
	margin: 0 auto 50px;
}

@media only screen and (max-width: 640px) {
	.area-efficacy p {
		width: 90%;
	}
}

.area-efficacy .supervision-right p {
	margin-bottom: 10px !important;

}


/* area-category01
------------------------------------------------------------ */
.area-category01 {
	width: 100%;
	background: url(/sp/meat/health/img/top_bk_02.png) no-repeat center top;
}

@media only screen and (max-width: 640px) {
	.area-category01 {
  	background: url(/sp/meat/health/img/top_bk_02_sp_top.png) center top no-repeat,  url(/sp/meat/health/img/top_bk_02_sp_bottom.png) center bottom no-repeat,url(/sp/meat/health/img/top_bk_02_sp_center.png) center top repeat;
		background-size: 100% auto;
	}
}

.area-category02 {
	width: 100%;
	background: url(/sp/meat/health/img/top_bk_03.png) no-repeat center top;
}

@media only screen and (max-width: 640px) {
	.area-category02 {
  	background: url(/sp/meat/health/img/top_bk_03_sp_top.png) center top no-repeat,  url(/sp/meat/health/img/top_bk_03_sp_bottom.png) center bottom no-repeat,url(/sp/meat/health/img/top_bk_03_sp_center.png) center top repeat;
		background-size: 100% auto;
	}
}

.area-category03 {
	width: 100%;
	background: url(/sp/meat/health/img/top_bk_04.png) no-repeat center top;
}

@media only screen and (max-width: 640px) {
	.area-category03 {
  	background: url(/sp/meat/health/img/top_bk_04_sp_top.png) center top no-repeat,  url(/sp/meat/health/img/top_bk_04_sp_bottom.png) center bottom no-repeat,url(/sp/meat/health/img/top_bk_04_sp_center.png) center top repeat;
		background-size: 100% auto;
	}
}

.area-category04 {
	width: 100%;
	background: url(/sp/meat/health/img/top_bk_05.png) no-repeat center top;
}

@media only screen and (max-width: 640px) {
	.area-category04 {
  	background: url(/sp/meat/health/img/top_bk_05_sp_top.png) center top no-repeat,  url(/sp/meat/health/img/top_bk_05_sp_bottom.png) center bottom no-repeat,url(/sp/meat/health/img/top_bk_05_sp_center.png) center top repeat;
		background-size: 100% auto;
	}
}


/* area-howto-recipe
------------------------------------------------------------ */
@media only screen and (max-width: 640px) {
.area-howto-recipe {
	background: url(/sp/meat/health/img/recipe_bk_01.jpg) left 25% no-repeat, url(/sp/meat/health/img/recipe_bk_02.jpg) right bottom no-repeat;
}
}

/* カルーセル */
ul.carousel{
  width: 96%;
  padding: 0 15px;
  max-width: 1100px;
  margin: 0 auto;
}
.carousel li a {
  display: block;
  box-sizing: border-box;
  outline: none;
  background: none;
	max-width: 240px;
}
.carousel li a:hover {
  text-decoration: underline;
}
.carousel li img {
	max-width: 280px;
  width: 100%;
  height: auto;
	margin-bottom: 5px;
}

.carousel li a p {
	font-weight: normal !important;
	margin-bottom: 10px;
}

.carousel li a p.title {
}

.carousel li a p.title {
	position: relative;
	/*padding-left:1em;
	text-indent:-1em;*/
	text-align: left;
	margin-bottom: 5px;
	display: block;
	z-index: 2;
}

.category01 .carousel li a p.title {
	color: #EB6D4C;
}

.category02 .carousel li a p.title {
	color: #F5A21B;
}

.category03 .carousel li a p.title {
	color: #E84480;
}

.category04 .carousel li a p.title {
	color: #956134;
}

.carousel li a:hover p.title {
	color: #222222 !important;
}

.carousel li a p.link {
  text-align: right;
	text-decoration: underline;
	margin-bottom: 0;
}


.category01 .carousel li a p.link {
	color: #EB6D4C;
}

.category02 .carousel li a p.link {
	color: #F5A21B;
}

.category03 .carousel li a p.link {
	color: #E84480;
}

.category04 .carousel li a p.link {
	color: #956134;
}

.carousel li a p.link:after {
	content: '';
	background: url(/sp/meat/health/img/column_arrow_01.svg) no-repeat center center;
	background-size: auto 15px;
	width: 15px;
	height: 15px;
	display: inline-block;
	vertical-align: middle;
	margin-left: 7px;
}

@media only screen and (max-width: 640px) {
	.carousel li a p.link:after {
		background: url(/sp/meat/health/img/column_arrow_01.svg) no-repeat center center;
		background-size: auto 14px;
		width: 14px;
		height: 14px;
		margin-left: 5px;
	}
}

.category01 .carousel li a p.link:after {
	background: url(/sp/meat/health/img/column_arrow_01.svg) no-repeat center center;
	background-size: auto 15px;
}

.category02 .carousel li a p.link:after {
	background: url(/sp/meat/health/img/column_arrow_02.svg) no-repeat center center;
	background-size: auto 15px;
}

.category03 .carousel li a p.link:after {
	background: url(/sp/meat/health/img/column_arrow_03.svg) no-repeat center center;
	background-size: auto 15px;
}

.category04 .carousel li a p.link:after {
	background: url(/sp/meat/health/img/column_arrow_04.svg) no-repeat center center;
	background-size: auto 15px;
}

@media only screen and (max-width: 640px) {
	.category01 .carousel li a p.link:after {
		background: url(/sp/meat/health/img/column_arrow_01.svg) no-repeat center center;
		background-size: auto 14px;
	}
	.category02 .carousel li a p.link:after {
		background: url(/sp/meat/health/img/column_arrow_02.svg) no-repeat center center;
		background-size: auto 14px;
	}
	.category03 .carousel li a p.link:after {
		background: url(/sp/meat/health/img/column_arrow_03.svg) no-repeat center center;
		background-size: auto 14px;
	}
	.category04 .carousel li a p.link:after {
		background: url(/sp/meat/health/img/column_arrow_04.svg) no-repeat center center;
		background-size: auto 14px;
	}
}

.carousel li a:hover p.link {
	text-decoration: none;
}

.carousel-health-3col li a,
.carousel-health-4col li a {
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
	filter: none !important;
  text-align: left !important;
	text-decoration: none !important;
}

.carousel-health-3col li,
.carousel-health-4col li {
  padding: 0 10px !important;
}

.carousel-health-3col li a:hover,
.carousel-health-4col li a:hover {
  background: none;
  transition: all 0.2s ease;
}

.carousel-health-3col li a:hover img,
.carousel-health-4col li a:hover img {
  opacity: 1;
}

.slick-prev:before {
  content: "";
  display: block;
  left: 0;
  background: url("/shared/img/svg/cur01.svg")no-repeat;
  width: 18px;
  height: 30px;
}
.slick-next:before{
  content: "";
  display: block;
  right: 0;
  background: url("/shared/img/svg/cur02.svg")no-repeat;
  width: 18px;
  height: 30px;
}
.slick-prev{
  left: -18px;
	display: block;
	width: 18px;
	height: 30px;
}
.slick-next{
  right: -18px;
	display: block;
	width: 18px;
	height: 30px;
}
.slick-dots{
  left: 0;
  right: 0;
  margin: auto;
  bottom: -45px!important;
}
.slick-dots li{
  width: 20px;
  padding: 0;
}
.slick-dots li button{
  width: 0;
  height: 0;
  padding: 0;
}
.slick-dots li button:before{
  content: "";
  width: 13px;
  height: 13px;
  background: url("/shared/img/dot_carousel_off.png");
  background-size: 13px 13px;
  opacity: 1;
  right: 0;
  left: 0;
  margin: auto!important;
}
.slick-dots li.slick-active button:before{
  background: url("/shared/img/dot_carousel_on.png");
  background-size: 13px 13px;
}
@media only screen and (max-width: 640px) {
  ul.carousel{
    padding: 0;
  }
  .carousel-3col li{
    padding: 0 7px;
  }
}
