@charset "UTF-8";


#mainContainer {
	text-align: center;
}

	#mainContainer img {
		display: inline-block;
	}

	#mainContainer h2,
	#mainContainer h3 {
		margin-bottom: 50px;
	}

	/* MV
---------------------------------------------------------*/
	#mainContainer .slider li.mv01 {
		background: url(/-/Media/com/50megumi/201709/top/bg_mv01.jpg) top center no-repeat #fba6c7;
	}

	#mainContainer .slider li.mv02 {
		background: url(/-/Media/com/50megumi/201709/top/bg_mv02.jpg) top center no-repeat #febc92;
	}

	#mainContainer .slider li.mv03 {
		background: url(/-/Media/com/50megumi/201709/top/bg_mv03.jpg) top center no-repeat #ebd79a;
	}

	#mainContainer .slider li.mv04 {
		background: url(/-/Media/com/50megumi/20180320/top/bg_mv04.jpg) top center no-repeat #fff;
	}

	#mainContainer .bx-pager {
		padding: 0;
		margin: -25px 0 0 0;
		width: 100% !important;
	}

	#mainContainer .bx-wrapper {
		margin: 0;
	}

		#mainContainer .bx-wrapper .bx-next {
			right: 40px;
		}

		#mainContainer .bx-wrapper .bx-prev {
			left: 40px;
		}

		#mainContainer .bx-wrapper .bx-controls-direction a {
			width: 23px;
			height: 34px;
		}

		#mainContainer .bx-wrapper .bx-next {
			background: url(/-/Media/com/50megumi/201709/top/btn_arw_slider_next.png) no-repeat;
			left: 50%;
			margin-left: 450px;
		}

		#mainContainer .bx-wrapper .bx-prev {
			background: url(/-/Media/com/50megumi/201709/top/btn_arw_slider_prev.png) no-repeat;
			left: 50%;
			margin-left: -465px;
		}

		#mainContainer .bx-wrapper .bx-pager.bx-default-pager a {
			width: 13px;
			height: 14px;
			background: url(/-/Media/com/50megumi/201709/top/btn_pager_slider.png) center bottom no-repeat;
			margin: 0 3px;
		}

			#mainContainer .bx-wrapper .bx-pager.bx-default-pager a.active {
				background-position: center top;
			}

		#mainContainer .bx-wrapper img:hover {
			opacity: 1;
		}

	/* 50の恵みとは
---------------------------------------------------------*/
	#mainContainer #about {
		margin-top: -70px;
		padding-top: 70px;
	}

		#mainContainer #about > div {
			background: url(/-/Media/com/50megumi/201709/top/bg_about.jpg) top center repeat-x;
		}

		#mainContainer #about .inner {
			position: relative;
			padding-top: 75px;
		}

			#mainContainer #about .inner p.pkg {
				position: absolute;
				bottom: -63px;
				left: 50%;
				margin-left: -320px;
			}

				#mainContainer #about .inner p.pkg img {
					max-width: initial;
				}

		#mainContainer #about h2 + p {
			margin-bottom: 20px;
		}

		#mainContainer #about .bnr {
			background: #5b0201;
			padding: 70px 0;
		}

			#mainContainer #about .bnr .inner {
				padding-top: 0;
			}

			#mainContainer #about .bnr ul {
				margin: 0 -4px 0;
				font-size: 0;
				width: auto;
				zoom: 100%;
			}

				#mainContainer #about .bnr ul:after {
					content: "";
					clear: both;
					height: 0;
					display: block;
					visibility: hidden;
				}

				#mainContainer #about .bnr ul li {
					display: inline-block;
					margin-top: 15px;
					box-sizing: border-box;
					padding: 0 4px;
					width:25%;
				}


	/* 製品一覧
---------------------------------------------------------*/
	#mainContainer #product {
		padding: 60px 0 0;
	}

		#mainContainer #product section {
			margin-top: -70px;
			padding-top: 70px;
		}

			#mainContainer #product section .inner {
				padding: 80px 0 75px;
			}

		#mainContainer #product h3 + p {
			margin-bottom: 50px;
		}

		#mainContainer #product ul.anchor {
			margin-bottom: 70px;
		}

			#mainContainer #product ul.anchor li {
				display: inline-block;
				margin-left: 42px;
			}

				#mainContainer #product ul.anchor li:first-child {
					margin-left: 0;
				}

		#mainContainer #product section ul li {
			display: inline-block;
			margin-left: 42px;
		}

			#mainContainer #product section ul li:first-child,
			#mainContainer #product section#make ul li {
				margin-left: 0;
			}

		#mainContainer #product #skincare > div {
			background: url(/-/Media/com/50megumi/201709/top/bg_skincare.jpg) top center repeat-x;
		}

		#mainContainer #product #make > div {
			background: url(/-/Media/com/50megumi/201709/top/bg_make.jpg) top center repeat-x;
		}

		#mainContainer #product #haircare > div {
			background: url(/-/Media/com/50megumi/201709/top/bg_haircare.jpg) top center repeat-x;
		}

	/* other
---------------------------------------------------------*/
	#mainContainer #other {
		background: #520100;
		padding: 70px 0;
	}

		#mainContainer #other ul {
			margin: 0 -6px;
			zoom: 100%;
		}

			#mainContainer #other ul:after {
				content: "";
				clear: both;
				height: 0;
				display: block;
				visibility: hidden;
			}

			#mainContainer #other ul li {
				display: block;
				vertical-align: top;
				width: 25%;
				padding: 0 6px;
				box-sizing: border-box;
				float: left;
			}

				#mainContainer #other ul li:nth-child(2) dl {
					display: block;
					height: 200px;
					border: 1px solid #bb8382;
					padding: 0 6px;
					border-radius: 3px;
					box-sizing: border-box;
				}

				#mainContainer #other ul li dt {
					padding: 12px 0;
				}

				#mainContainer #other ul li dd + dd {
					margin-top: 6px;
				}


		#mainContainer #other #top_btn_cocoevent a {
			display: block;
			height: 200px;
			background: #fff;
			border-radius: 3px;
			color: #520100;
			position: relative;
			padding-top: 130px;
			box-sizing: border-box;
			font-size: 1.5rem;
			font-weight: bold;
		}

			#mainContainer #other #top_btn_cocoevent a:hover {
				opacity: 0.9;
				text-decoration: none;
			}

			#mainContainer #other #top_btn_cocoevent a:active,
			#mainContainer #other #top_btn_cocoevent a:focus {
				text-decoration: none;
			}

			#mainContainer #other #top_btn_cocoevent a:before {
				content: "";
				display: block;
				position: absolute;
				height: 118px;
				width: 216px;
				background: url(/-/Media/com/50megumi/201710/top/event01.png) no-repeat center center;
				background-size: 100% 100%;
				margin: auto;
				top: 6px;
				left: 0;
				right: 0;
			}

			#mainContainer #other #top_btn_cocoevent a:after {
				content: "";
				display: block;
				position: absolute;
				height: 37px;
				width: 216px;
				background: url(/-/Media/com/50megumi/201710/top/event02.png) no-repeat center center;
				background-size: 100% 100%;
				margin: auto;
				bottom: 10px;
				left: 0;
				right: 0;
			}

/* -------------------------------------------------------------------------------------------------------*/

@media screen and (max-width: 1235px) {

	/* -------------------------------------------------------------------------------------------------------*/
	#mainContainer #about .bnr ul li {
		/*width: 23%;*/
	}
}

/* -------------------------------------------------------------------------------------------------------*/

@media screen and (max-width: 768px) {

	/* -------------------------------------------------------------------------------------------------------*/

	#mainContainer img {
		width: 100%;
		height: auto;
	}

	#mainContainer #about .inner:after {
		width: 100%;
	}

	#mainContainer h2 {
		margin-bottom: 20px;
	}

	#mainContainer h3 {
		margin-bottom: 30px;
	}

	/* MV
---------------------------------------------------------*/
	#mainContainer .bx-wrapper {
		padding: 0;
	}

	#mainContainer .slider li {
		background: none !important;
	}

	#mainContainer .bx-wrapper .bx-controls-direction a {
		width: 14px;
		height: 20px;
	}

	#mainContainer .bx-wrapper .bx-next {
		margin: -15px 0 0 0;
		left: initial;
		right: 5px;
		background: url(/-/Media/com/50megumi/201709/top/sp/btn_arw_slider_next.png) no-repeat;
		background-size: 100%;
	}

	#mainContainer .bx-wrapper .bx-prev {
		margin: -15px 0 0 0;
		left: 5px;
		background: url(/-/Media/com/50megumi/201709/top/sp/btn_arw_slider_prev.png) no-repeat;
		background-size: 100%;
	}

	#mainContainer .bx-pager {
		margin: -18px 0 0 0;
	}

	#mainContainer .bx-wrapper .bx-pager.bx-default-pager a {
		width: 12px;
		height: 12px;
		background: url(/-/Media/com/50megumi/201709/top/sp/btn_pager_slider.png) center bottom no-repeat;
		background-size: 100%;
	}

	/* 50の恵みとは
---------------------------------------------------------*/
	#mainContainer #about > div {
		background: url(/-/Media/com/50megumi/201709/top/sp/bg_about.jpg) top center no-repeat;
		background-size: 100%;
	}

	#mainContainer #about .inner {
		padding-top: 40px;
	}

	#mainContainer #about h2 + p {
		margin-bottom: 0;
	}

	#mainContainer #about .inner p.pkg {
		left: 0;
		margin: 0;
		padding: 0 10px;
		bottom: -3%;
	}

	#mainContainer #about .bnr {
		padding: 55px 20px 30px;
	}

		#mainContainer #about .bnr .inner {
			padding-left: 0;
			padding-right: 0;
		}

		#mainContainer #about .bnr ul {
			margin: 0;
			width: auto;
		}

			#mainContainer #about .bnr ul li {
				margin: 0;
				width: 100%;
				float: none;
				padding: 0;
			}

				#mainContainer #about .bnr ul li + li {
					margin-top: 10px;
				}

				#mainContainer #about .bnr ul li img {
					width: 100%;
				}

	/* 製品一覧
---------------------------------------------------------*/
	#mainContainer #product {
		padding: 40px 0 0;
	}

		#mainContainer #product h2 {
			margin-bottom: 30px;
		}

		#mainContainer #product h3 + p {
			margin-bottom: 30px;
		}

		#mainContainer #product ul.anchor {
			margin-bottom: 50px;
		}

			#mainContainer #product ul.anchor li {
				float: left;
				margin-left: 3.5%;
				width: 31%;
			}

		#mainContainer #product section .inner {
			padding: 50px 20px 45px;
		}

		#mainContainer #product section ul li {
			margin-left: 0;
			width: 100%;
		}

			#mainContainer #product section ul li + li {
				margin-top: 5px;
			}

		#mainContainer #product #skincare > div {
			background: url(/-/Media/com/50megumi/201709/top/sp/bg_skincare.jpg) top center no-repeat;
			background-size: 100%;
		}

		#mainContainer #product #make > div {
			background: url(/-/Media/com/50megumi/201709/top/sp/bg_make.jpg) top center no-repeat;
			background-size: 100%;
		}

		#mainContainer #product #haircare > div {
			background: url(/-/Media/com/50megumi/201709/top/sp/bg_haircare.jpg) top center no-repeat;
			background-size: 100%;
		}

	/* other
---------------------------------------------------------*/
	#mainContainer #other {
		padding: 40px 0 35px;
	}

		#mainContainer #other ul {
			margin: 0;
		}

			#mainContainer #other ul li {
				margin: 0 0 22px;
				width: auto;
				float: none;
			}

				#mainContainer #other ul li:nth-child(2) dl {
					height: auto;
					padding: 15px;
				}


				#mainContainer #other ul li dt {
					width: 68%;
					margin: 6px auto 22px;
					padding: 0;
				}

				#mainContainer #other ul li dd + dd {
					margin-top: 8px;
				}

		#mainContainer #other #top_btn_cocoevent a {
			height: auto;
			background: #fff url(/-/Media/com/50megumi/201710/top/event02.png) no-repeat right 4.5% bottom 20%;
			background-size: 42% auto;
			border-radius: 6px;
			color: #520100;
			position: static;
			padding: 8px 0;
			zoom: 100%;
		}

			#mainContainer #other #top_btn_cocoevent a span {
				display: block;
				width: 42%;
				font-size: 2.2rem;
				padding: 6% 0 0 0;
				float: right;
				margin-right: 4.5%;
			}

			#mainContainer #other #top_btn_cocoevent a:before {
				content: "";
				display: block;
				height: 0;
				width: 47.5%;
				padding-bottom: 26%;
				position: static;
				float: left;
				margin-left: 4.5%;
			}


			#mainContainer #other #top_btn_cocoevent a:after {
				content: "";
				clear: both;
				height: 0;
				width: 0;
				display: block;
				visibility: hidden;
				position: static;
			}
}

@media screen and (max-width: 640px) {
	#mainContainer #other #top_btn_cocoevent a span {
		font-size: 1.5rem;
	}
}

@media screen and (max-width: 480px) {
	#mainContainer #other #top_btn_cocoevent a:before {
		width: 35%;
		padding-bottom: 26%;
		background: url(/-/Media/com/50megumi/201710/top/event01.png) no-repeat center center;
		background-size: auto 100%;
		margin-left: 3%;
	}

	#mainContainer #other #top_btn_cocoevent a span {
		font-size: 1.3rem;
		padding: 4% 0 0 0;
		width: 58%;
		margin-right: 3%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	#mainContainer #other #top_btn_cocoevent a {
		background: #fff url(/-/Media/com/50megumi/201710/top/event02.png) no-repeat right 4.5% bottom 20%;
		background-size: 58% auto;
	}
}


#ii_movie {
	max-width: 700px;
	margin: 0 auto;
	padding: 50px 0 55px;
}

	#ii_movie p {
		color: #fff;
		font-size: 1.5rem;
	}

#ii_movie_wrap {
	width: 100%;
	padding-top: 56.25%;
	margin: 0 0 6px 0;
	position: relative;
}

	#ii_movie_wrap iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

@media screen and (max-width: 768px) {
	#ii_movie {
		padding: 6% 0 8% 0;
	}

		#ii_movie p {
			font-size: 1.4rem;
		}
}



#mainContainer #product section ul#top_sclist {
	text-align: center;
}

	#mainContainer #product section ul#top_sclist li:last-child {
		margin-top: 32px;
		margin-left: 0;
	}


#top_lead {
	margin-top:-20px;
	padding: 0 0 120px 0;
}

	#top_lead h3 {
		margin: 0 0 30px 0;
		font-size: 3.6rem;
		color: #B52042;
		font-family: "FOT-マティス ProN B";
		letter-spacing: 0.2em;
	}

		#top_lead h3 small {
			font-size: 1.6rem;
		}

	#top_lead p {
		margin: 0 0 20px 0;
		font-size: 2.0rem;
		color: #520100;
		font-family: "FOT-マティス ProN DB";
		letter-spacing: 0.2em;
		line-height: 1.9;
	}

		#top_lead p small {
			font-size: 1.1rem;
		}


		#top_lead p.lead_cap {
			font-size: 1.3rem;
			line-height:1.4;
		}


@media screen and (max-width: 768px) {
	#top_lead {
		margin-top: 0;
		padding: 0 0 22% 0;
	}

		#top_lead h3 {
			margin: 0 0 20px 0;
			font-size: 2.8rem;
		}

			#top_lead h3 small {
				font-size: 1.4rem;
			}

		#top_lead p {
			margin: 0 0 10px 0;
			font-size: 1.8rem;
		}

			#top_lead p small {
				font-size: 1.1rem;
			}


			#top_lead p.lead_cap {
				font-size: 1.2rem;
			}
}

@media screen and (max-width: 480px) {
	#top_lead {
		padding: 0 0 24% 0;
	}

		#top_lead h3 {
			margin: 0 0 10px 0;
			font-size: 2.0rem;
			letter-spacing: 0.1em;
			text-align: left;
		}

		#top_lead .pc_only {
			display: none;
		}

		#top_lead h3 small {
			font-size: 1.1rem;
		}

		#top_lead p {
			margin: 0 0 10px 0;
			font-size: 1.5rem;
			line-height: 1.75;
			letter-spacing: 0.1em;
			text-align: left;
		}

			#top_lead p small {
				font-size: 1.0rem;
			}


			#top_lead p.lead_cap {
				font-size: 1.1rem;
			}
}