@charset "UTF-8";

@import url("../content.css");


#mc-contents {
	padding-top: 0;
}

#main-cont-title {
	padding-top: 64px;
	position: absolute;
	top: 0;
}

/* Mainbanner */
#mainbanner {
	width: 100%;
	max-height: 960px;
	margin: 0;
	padding-top: 130px; /* 64px + 46px + 20px */
	position: relative;
	overflow: hidden;
	background: url(../../images/product/mainbanner_bg.jpg) 50% 50% no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box; 
	-o-box-sizing: border-box; 
	-ms-box-sizing: border-box; 
	box-sizing: border-box;
}

#mainbanner h2 {
	width: 37.207031%;
	width: calc((381 / 1024) * 100%);
	height: 0;
	margin: auto 0;
	//padding-top: 22.35625%;
	padding-top: calc((232 / 1024) * 100%);
	padding-bottom: 0;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 45px;
	display: block;
	overflow: hidden;
	background: url(../../images/product/mainbanner_catch@2x.png) 0 0 no-repeat;
	-webkit-background-size: auto 100%;
	-moz-background-size: auto 100%;
	background-size: auto 100%;
}

#mainbanner img {
	width: 37.988281%;
	width: calc((389 / 1024) * 100%);
	height: auto;
	margin-top: 16px;
	position: relative;
	bottom: 0;
	right: 24px;
	float: right;
}


/* Section 001 */
#sect001 {
	margin: 0;
	padding: 80px 0;
	position: relative;
}

#sect001 h2 {
	width: 44.824218%;
	width: calc((459 / 1024) * 100%);
	height: 0;
	margin: 0 auto 4em;
	padding-top: 9.765625%;
	padding-top: calc((100 / 1024) * 100%);
	padding-bottom: 0;
	position: relative;
	display: block;
	overflow: hidden;
	background: url(../../images/product/sect_001_main-titile@2x.png) 0 0 no-repeat;
	-webkit-background-size: auto 100%;
	-moz-background-size: auto 100%;
	background-size: auto 100%;
}

#sect001 p {
	font-size: 22px;
	color: #fff;
	margin: 0;
	padding: 0;
}


/* Section 002 */
#sect002 {
	margin: 0;
	padding: 80px 0;
	position: relative;
	background-color: #222324;
}

#sect002 h2 {
	//width: 40.820312%;
	//width: calc((418 / 1024) * 100%);
	width: 100%;
	height: 0;
	margin: 0 auto 3em;
	padding-top: calc(((34 + 20) / 1024) * 100%);
	padding-bottom: 0;
	position: relative;
	display: block;
	overflow: hidden;
	background: url(../../images/product/sect_002_main-title@2x.png) 50% 50% no-repeat;
	-webkit-background-size: auto 34px;
	-moz-background-size: auto 34px;
	background-size: auto 34px;
}

#sect002 h2:before, #sect002 h2:after {
	content: "";
	width: 100%;
	height: 1px;
	background-color: #8d8155;
	position: absolute;
	right: 0;
	left: 0;
}

#sect002 h2:before {
	top: 0;
}

#sect002 h2:after {
	bottom: 0;
}

#four-powers {
	margin: 0;
	padding: 0;
	position: relative;
}

#four-powers ol {
	margin: 0;
	padding: 0;
	display: -webkit-flex; 
	display: -ms-flexbox; 
	display: flex;
	-webkit-flex-direction: row; 
	-ms-flex-direction: row; 
	flex-direction: row;
	-webkit-flex-wrap: wrap; 
	-ms-flex-wrap: wrap; 
	flex-wrap: wrap;
	-webkit-justify-content: space-between; 
	-ms-flex-pack: justify;
	justify-content: space-between;
	//-webkit-align-items: center;
	//align-items: center;
}

#four-powers ol li {
	width: calc((492 / 1024)*100%);
	margin-bottom: calc((40 / 1024)*100%);
	padding: 15px 20px;
	position: relative;
	background-color: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .2);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-ms-border-radius: 4px;
	-o-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box; 
	-o-box-sizing: border-box; 
	-ms-box-sizing: border-box; 
	box-sizing: border-box;
}

@-moz-document url-prefix() { 
	#four-powers ol li {
	margin-bottom: 3em;
	}
}

#four-powers ol li:nth-last-child(-n + 2) {
	margin-bottom: 0;
}

#four-powers ol li img {
	max-width: 84px;
	max-height: 84px;
	margin-right: auto;
	margin-left: auto;
	position: absolute;
	right: 0;
	left: 0;
}

#four-powers ol li h3 {
	color: #d6c175;
	font-size: 22px;
	font-weight: normal;
	font-style: normal;
	text-align: center;
	margin: 0 0 14px;
	padding: 94px 0 10px;
	border-bottom: 1px solid rgba(255, 255, 255, .4);
}

#four-powers ol li h4 {
	color: #fff;
	font-size: 20px;
	font-weight: normal;
	font-style: normal;
	text-align: center;
	margin: 0 0 .5em;
	padding: 0;
}

#four-powers ol li p {
	color: #fff;
	font-size: 16px;
	margin: 0;
	padding: 0;
}


/* buy now */
#sect-purchase {
	max-width: 1024px;
	height: auto;
	padding: 80px 10px 20px;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
}

#sect-purchase .detail {
	color: #fff;
	width: 100%;
	height: auto;
	margin: 0 0 50px;
	padding: 0;
	position: relative;
	display: -webkit-flex; 
	display: -ms-flexbox; 
	display: flex;
	-webkit-flex-direction: row; 
	-ms-flex-direction: row; 
	flex-direction: row;
	-webkit-flex-wrap: wrap; 
	-ms-flex-wrap: wrap; 
	flex-wrap: wrap;
	-webkit-justify-content: center; 
	-ms-flex-pack: justify;
	justify-content: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}

#sect-purchase .detail > div {
	width: 50%;
}

#sect-purchase .detail > div:first-child {
	text-align: center;
}

#sect-purchase .detail > div > img {
	max-width: 198px;
	margin-right: 20px;
	margin-left: 0;
}

#sect-purchase .detail .way {
	margin-bottom: 40px;
}

#sect-purchase .detail .way h5 {
	font-size: 16px;
	font-weight: normal;
	font-style: normal;
	margin: 0 0 .5em;
	padding: 0;
}

#sect-purchase .detail .way ul {
	margin-bottom: 20px;
}

#sect-purchase .detail .way ul li {
	font-size: 15px;
	margin-left: 1em;
	margin-bottom: .5em;
	padding: 0 0 0 15px;
	position: relative;
}

#sect-purchase .detail .way ul li:before {
	content: "";
	width: 8px;
	height: 8px;
	margin: 0 5px 0 0;
	padding: 0;
	display: block;
	position: absolute;
	top: .3em;
	left: 0;
	background-color: #088d09;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%;
}

#sect-purchase .detail .way p {
	font-size: 14px;
	text-align: center;
	margin: 0;
	padding: 5px 8px;
	border: 1px solid rgba(255, 255, 255, .3);
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-ms-border-radius: 3px;
	-o-border-radius: 3px;
	border-radius: 3px;
}

#sect-purchase .detail .buy h3 {
	font-size: 22px;
	font-weight: normal;
	font-style: normal;
	text-align: center;
	margin: 0 0 .5em;
	padding: 0;
}

#sect-purchase .detail .buy dl {
	font-size: 16px;
	width: 50%;
	margin: 0 auto 20px;
	padding: 0;
	position: relative;
}

#sect-purchase .detail .buy dl dt {
	position: absolute;
	left: 0;
	max-width: 7em;
	min-height: 1em;
	margin: 0 0 .3em;
	padding: 0 0 0 10px;
	overflow: hidden;
}

#sect-purchase .detail .buy dl dd {
	min-height: 1em;
	margin: 0 0 .3em;
	padding: 0 0 0 8em;
}

#sect-purchase .detail .buy .button_buy {
	width: 100%;
	padding: 0;
	margin: 0 auto;
	display: block;
	position: relative;
}

#sect-purchase .detail .buy .button_buy a {
	color: #45390c;
	font-size: 20px;
	text-decoration: none;
	text-align: center;
	width: 100%;
	height: 100%;
	padding: .8em 1.2em;
	display: block;
	background-color: #cfbd7c;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-ms-border-radius: 4px;
	-o-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box; 
	-o-box-sizing: border-box; 
	-ms-box-sizing: border-box; 
	box-sizing: border-box;
	-webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
	-o-transition: all 0.25s ease-in-out;
	-ms-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;
}

#sect-purchase .detail .buy .button_buy a:hover {
	color: #fff;
	background-color: #d5a90d;
}

.ingredient {
	padding: 10px 15px;
	background-color: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .3);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-ms-border-radius: 4px;
	-o-border-radius: 4px;
	border-radius: 4px;
}

.ingredient p {
	color: #fff;
	font-size: 11px;
}


/* Minimum width 959px and Tablet */
@media all and (max-width: 768px) and (min-width: 569px) {

/* Section 001 */
#sect001 {
	padding: 50px 0;
}

#sect001 h2 {
	margin: 0 auto 3em;
}

#sect001 p {
	font-size: 18px;
}


/* Section 002 */
#sect002 {
	padding: 50px 0;
}

#sect002 h2 {
	margin: 0 auto 2em;
	padding-top: calc(((34 + 30) / 1024) * 100%);
	-webkit-background-size: 50% auto;
	-moz-background-size: 50% auto;
	background-size: 50% auto;
}

#four-powers ol {
	-webkit-flex-direction: column; 
	-ms-flex-direction: column; 
	flex-direction: column;
}

#four-powers ol li {
	width: 100%;
	margin-bottom: 20px;
	padding: 12px 18px;
}

#four-powers ol li:nth-last-child(-n + 2) {
	margin-bottom: 20px;
}

#four-powers ol li:last-child {
	margin-bottom: 0;
}

#four-powers ol li img {
	max-width: 64px;
	max-height: 64px;
}

#four-powers ol li h3 {
	font-size: 19px;
	margin: 0 0 14px;
	padding: 74px 0 10px;
}

#four-powers ol li h4 {
	font-size: 17px;
}

#four-powers ol li p {
	font-size: 14px;
}


/* buy now */
#sect-purchase {
	padding: 50px 0 0;
}

#sect-purchase .detail {
	width: calc(100% - 30px);
	margin: 0 0 50px;
}

#sect-purchase .detail > div > img {
	width: 50%;
	margin-right: 0;
}

#sect-purchase .detail .way {
	margin-bottom: 40px;
}

#sect-purchase .detail .way h5 {
	font-size: 14px;
}

#sect-purchase .detail .way ul {
	margin-bottom: 20px;
}

#sect-purchase .detail .way ul li {
	font-size: 13px;
}

#sect-purchase .detail .way p {
	font-size: 11px;
}

#sect-purchase .detail .buy h3 {
	font-size: 20px;
	text-align: center;
}

#sect-purchase .detail .buy dl {
	font-size: 13px;
	width: 60%;
	margin-right: auto;
	margin-left: auto;
}

#sect-purchase .detail .buy .button_buy a {
	font-size: 18px;
	padding: .7em 1em;
}

.ingredient {
	width: calc(100% - 30px);
	margin-right: auto;
	margin-left: auto;
	padding: 8px 12px;
}

.ingredient p {
	font-size: 10px;
}


}


/* Phone Landscape (Retina) */
@media all and (max-width: 568px) {

/* Mainbanner */
#mainbanner {
	padding-top: 92px; /* 46px + 46px */
}

#mainbanner h2 {
	padding-top: calc((232 / 568) * 100%);
	left: 30px;
	background-position: 50%;
	-webkit-background-size: 100% auto;
	-moz-background-size: 100% auto;
	background-size: 100% auto;
}


/* Section 001 */
#sect001 {
	padding: 40px 0;
}

#sect001 h2 {
	width: 100%;
	margin: 0 auto 3em;
	padding-top: calc((100 / 568) * 100%);
	background-position: 50% 0;
	-webkit-background-size: 80% auto;
	-moz-background-size: 80% auto;
	background-size: 80% auto;
}

#sect001 p {
	font-size: 16px;
}


/* Section 002 */
#sect002 {
	padding: 40px 0;
}

#sect002 h2 {
	margin: 0 auto 2em;
	padding-top: calc(((34 + 30) / 568) * 100%);
	-webkit-background-size: 90% auto;
	-moz-background-size: 90% auto;
	background-size: 90% auto;
}

#four-powers ol {
	-webkit-flex-direction: column; 
	-ms-flex-direction: column; 
	flex-direction: column;
}

#four-powers ol li {
	width: 100%;
	margin-bottom: 20px;
	padding: 12px 18px;
}

#four-powers ol li:nth-last-child(-n + 2) {
	margin-bottom: 20px;
}

#four-powers ol li:last-child {
	margin-bottom: 0;
}

#four-powers ol li img {
	max-width: 64px;
	max-height: 64px;
}

#four-powers ol li h3 {
	font-size: 19px;
	margin: 0 0 14px;
	padding: 74px 0 10px;
}

#four-powers ol li h4 {
	font-size: 17px;
}

#four-powers ol li p {
	font-size: 14px;
}


/* buy now */
#sect-purchase {
	padding: 40px 0 0;
}

#sect-purchase .detail {
	margin: 0 0 50px;
	-webkit-flex-direction: column; 
	-ms-flex-direction: column; 
	flex-direction: column;
}

#sect-purchase .detail > div {
	width: calc(100% - 30px);
}

#sect-purchase .detail > div:first-child {
	margin-bottom: 20px;
}

#sect-purchase .detail > div > img {
	width: 30%;
	margin-right: 0;
}

#sect-purchase .detail .way {
	margin-bottom: 40px;
}

#sect-purchase .detail .way h5 {
	font-size: 14px;
}

#sect-purchase .detail .way ul {
	margin-bottom: 20px;
}

#sect-purchase .detail .way ul li {
	font-size: 13px;
}

#sect-purchase .detail .way p {
	font-size: 11px;
}

#sect-purchase .detail .buy h3 {
	font-size: 20px;
	text-align: center;
}

#sect-purchase .detail .buy dl {
	font-size: 13px;
	width: 60%;
	margin-right: auto;
	margin-left: auto;
}

#sect-purchase .detail .buy .button_buy a {
	font-size: 18px;
	padding: .7em 1em;
}

.ingredient {
	width: calc(100% - 30px);
	margin-right: auto;
	margin-left: auto;
	padding: 8px 12px;
}

.ingredient p {
	font-size: 10px;
}

}