@charset "utf-8";
/* CSS Document */

img {
	vertical-align: middle;
	max-width: 100%;
	width: auto;
	height: auto;
}
body {
	-webkit-text-size-adjust: 100%;
	line-height: 1.5em;
	background: #dbdbdb;
	background: -moz-linear-gradient(top, #dbdbdb 0%, #b3b3b3 9%);
	background: -webkit-linear-gradient(top, #dbdbdb 0%, #b3b3b3 9%);
	background: linear-gradient(to bottom, #dbdbdb 0%, #b3b3b3 9%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dbdbdb', endColorstr='#b3b3b3', GradientType=0 );
}
.contents {
	max-width: 800px!important;
}
.wrapper {
	max-width: 800px;
	box-sizing: border-box;
	margin: 0 auto;
	text-align: center;
	background: #fff;
}
.inner {
	padding: 0 1rem;
}
.sp_only {
	display: block;
}
.pc_only {
	display: none;
}

@media screen and (min-width: 641px) {
	.sp_only {
		display: none;
	}
	.pc_only {
		display: block;
	}
}

/*--------------------------------------------
Flexbox
--------------------------------------------*/
/*--------------------------------------------
Flexbox SP基準なので縦並び
--------------------------------------------*/

.spFlexCol {
  -webkit-box-orient:vertical;/*--- Androidブラウザ 2つに分かれている ---*/
  -ms-flex-direction:column;/*--- ie10 ---*/
  -webkit-flex-direction:column;/*--- mac old safari ---*/
  flex-direction:column;
}

.spFlexCol > * {
	width:100%;
}

.spFlex2row2col {
  /* flexアイテムを複数行にするかどうか */
  /* box仕様のbox-linesに当たるが、androidブラウザは未対応 */
  /* wrapさせたい場合はandroid4DefaultBrowser.cssにて対応すること */
  -ms-flex-wrap:wrap;/*--- ie10 ---*/
  -webkit-flex-wrap:wrap;/*--- mac old safari ---*/
  flex-wrap:wrap;
}
.spFlex2row2col > * {
	width:50%;
	box-sizing:border-box;
}


@media screen and (min-width: 641px) {
	.flexRow {
		/* flexible boxの使用宣言（box,flexbox,flex） */
		-js-display:flex;/*--- ie8,9(flexibility.js) ---*/
		display:-webkit-box;/*--- Androidブラウザ用 ---*/
		display:-ms-flexbox;/*--- ie10 ---*/
		display:-webkit-flex;/*--- mac old safari ---*/
		display:flex;
		/* flexアイテムの横方向の位置揃え */
		-webkit-box-pack:justify;/*--- Androidブラウザ ---*/
		-ms-flex-pack:justify;/*--- ie10 ---*/
		-webkit-justify-content:space-between;/*--- mac old safari ---*/
		justify-content:space-between;
		/* flexアイテムの縦方向の整列 */
		-webkit-box-align:strech;/*--- Androidブラウザ ---*/
		-ms-flex-align:strech;/*--- ie10 ---*/
		-webkit-align-items:stretch;/*--- mac old safari ---*/
		align-items:stretch;
		/* flexアイテムの並び方向 */
		-webkit-box-orient:horizontal;-webkit-box-direction:normal;/*--- Androidブラウザ 2つに分かれている ---*/
		-ms-flex-direction:row;/*--- ie10 ---*/
		-webkit-flex-direction:row;/*--- mac old safari ---*/
		flex-direction:row;
		/* flexアイテムを複数行にするかどうか */
		/* box仕様のbox-linesに当たるが、androidブラウザは未対応 */
		/* wrapさせたい場合はandroid4DefaultBrowser.cssにて対応すること */
		-ms-flex-wrap:nowrap;/*--- ie10 ---*/
		-webkit-flex-wrap:nowrap;/*--- mac old safari ---*/
		flex-wrap:nowrap;
	}
	.flexRow > * {
		/**** flexible box関連指定 ****/
		/* flexアイテムの伸縮、アイテム幅の指定 */
		-webkit-box-flex:0.1;/*--- Androidブラウザ 要素がはみ出す場合があることへの対処 ---*/
		-ms-flex:1 0 auto;/*--- ie10 ---*/
		-webkit-flex:1 0 auto;/* mac old safari */
		flex:0 1 auto;/*--- flex-grow,flex-shrink,flex-basis ---*/
		/* 並び順の指定 */
		-webkit-box-ordinal-group:1;/*--- Androidブラウザ ---*/
		-ms-flex-order:0;/*--- ie10 ---*/
		-webkit-order:0;/*--- mac old safari ---*/
		order:0;
	}
}

/*--------------------------------------------
FV上
--------------------------------------------*/

@media screen and (max-width: 641px){
.topGroupName {
		padding:0;
	}
}

/*--------------------------------------------
FV
--------------------------------------------*/
#fv {
}

@media screen and (min-width: 641px) {
	#fv {
	}
}

/*--------------------------------------------
CV
--------------------------------------------*/
.cv {
	margin-bottom: 1rem!important;
}

.cv > div {
	background: #fff;
	border: 5px solid #fc7387;
	margin: 0 1rem 0.3rem;
}
.cv div img {
	
}
.cv h2 {
	background-color: #fc7387;
}
.cv h2 img {
	width: 90%;
	margin: 0.5rem 1rem 0.7rem;
}
.product {
	margin: 1.2rem 0.5rem 0;
}
.cv_lower {
	padding: 0 0.7rem 0.9rem 0.8rem;
}
.cv .value {
	padding: 0 1rem;
}
.cv .price {
	padding: 1rem 0;
}
.cv .note {
	padding-right: 1rem;
	color: #8d8d8d;
	text-align: right;
	font-size: 0.6rem!important;
}

@media screen and (min-width: 641px) {
	.cv h2 {
		padding: 0.5rem;
		margin-bottom: 1rem;
	}
	.product {
		margin: 1.5rem 1rem 0;
	}
	.cv_lower {
		padding: 0 1rem 2rem 1rem;
	}
	.cv .price {
		padding: 1.4rem 1.8rem;
	}
	.cv .note {
		padding-right: 1rem;
		color: #8d8d8d;
		text-align: right;
		font-size: 0.7rem!important;
	}
}


/*--------------------------------------------
ファンデーションのこんなお悩みありませんか？
--------------------------------------------*/
#trouble {
	background: url(../img/sp/bg_trouble01.jpg) no-repeat;
	background-size: 100% auto;
}

#trouble h2 {
	
}


@media screen and (min-width: 641px) {
	#trouble {
		background: url(../img/pc/bg_trouble01.jpg) no-repeat;
	}
	#trouble h2 {
		margin: 5rem 0 6rem;
	}
	#trouble p:nth-child(1) {
		margin-bottom: 3rem;
	}
}


/*--------------------------------------------
秘密を大解剖
--------------------------------------------*/
#secret {
	text-align: left;
	line-height: 1.8em;
	padding-bottom: 2rem;
}

#secret h2 {
	text-align: center;
}

#secret ul li {
	padding-bottom: 1rem;
	margin-bottom: 2rem;
	border-bottom: 1px solid #c1c1c1;
}

#secret ul li h3 {
	margin-bottom: 2rem;
}
#secret ul li#secret03 h3 {
	margin-bottom: 1.5rem;
}

#secret ul li h4 {
	margin-top: 1.5rem;
	margin-bottom: 0.7rem;
	color: #c21617;
	font-size: 1.4rem;
	font-weight: 500;
}
#secret ul li#secret03 h4 {
	margin-top: 2.5rem;
}
#secret ul li p {
	margin-bottom: 1rem;
	font-size: 1rem;
	color:#000;
}
#secret01_img {
	text-align: center;
	margin-top: 1rem;
}
#secret02_img {
	text-align: center;
}

.footnote {
	font-size: 0.6rem;
}
#secret ul li:nth-child(3) {
	border: none;
	padding-bottom: 0;
	margin-bottom: 0;
}

#secret ul li .inner {
	padding: 0 1rem;
}

#secret ul li:nth-child(3) .flexRow {
	margin-bottom: 1rem;
}

#secret ul li:nth-child(3) p span {
	color: #c21617;
}

#secret ul li:nth-child(3) .footnote {
	text-align: right;
}

#secret ul li p.coating {
	margin-bottom: 0.5rem;
}

#secret .note {
	font-size: 0.6rem!important;
	text-align: right;
}	

@media screen and (min-width: 641px) {
	#secret h2 {
		margin-bottom: 3rem;
	}

	#secret ul {
	}

	#secret ul li {
		padding-bottom: 3rem;
		margin-bottom: 3rem;
	}
	#secret ul li:nth-child(2) {
		padding-bottom: 0;
		margin-bottom: 3rem;
	}
	#secret ul li h3 {
		margin-bottom: 3rem;
		padding-left: 20px;
	}

	#secret ul li h4 {
		font-size: 2rem;
		font-weight: 500;
	}
	
	#secret ul li h4 span {
		font-size: 1rem;
		vertical-align: super;
	}

	#secret ul li p {
		margin-top: 1.5rem;
		color:#000;
		font-size:1.2rem;
	}
	#secret ul li p.coating {
		margin-bottom: 0;
		margin-top: 2rem;
	}
	#secret ul li:nth-child(3) .flexRow p {
		text-align: left;
		margin-top: 3rem;
	}
	#secret .note {
		font-size: 0.8rem!important;
		text-align: right;
	}	
}


/*--------------------------------------------
カバー力の秘密
--------------------------------------------*/

/*グロスフィルムパウダー*/
#gloss {
	background: url(../img/sp/bg_gloss01.png) no-repeat;
	background-size: 100% auto;
}

#gloss h3 {
	
}
#gloss ul li {
	padding: 0 1rem 1.5rem;
}

@media screen and (min-width: 641px) {
	#gloss {
		background: url(../img/pc/bg_gloss01.png) no-repeat;
		background-size: 100% auto;
		margin-bottom: 2rem;
	}
	#gloss h3 {
		padding: 4rem 0;	
	}
	#gloss ul {
		margin: 0 auto 2.5rem;
		width: 720px;
	}
	#gloss ul::after{
		content: "";
		display: block;
		clear: both;
	}
	#gloss ul li:nth-child(2) {
		float:left;
		padding: 0 1rem 0 0;
	}
	#gloss ul li:nth-child(3) {
		padding: 0;
	}
}


/*--------------------------------------------
透明感の秘密
--------------------------------------------*/

/*3種のパウダー*/

#powder {
	
}

#powder h3 {
	margin: 0 auto 1rem;
}

#powder .inner {
	background: #F5F5F5;
	padding: 2.5rem 0;
}
#powder p {
	padding: 0 1rem;
}

@media screen and (min-width: 641px) {
	#powder h3 {
		margin: 3rem auto 1.5rem;
	}
}


/*うるおい成分*/

#moisture {
		background: url(../img/sp/bg_moisture.jpg) no-repeat #e9f1fd;
		background-size: 100% auto;
}
#moisture h3 {
		margin-bottom:5rem;
}
#moisture ul li {
		margin:0 1rem 1rem;
}
#moisture .note {
	padding: 0 0.8rem 0.5rem 0;
	color: #717171;
	text-align: right;
	font-size: 0.5rem!important;
	line-height: 1.7em;
}

@media screen and (min-width: 641px) {
	#moisture {
		background: url(../img/pc/bg_moisture.jpg) no-repeat top #e9f1fd;
		background-size: 100% auto;
	}
	#moisture h3 {
		margin-bottom:7.2rem;
	}
	#moisture ul li {
			margin-bottom:1.1rem;
	}
	#moisture .note {
		padding-right: 3rem;
		font-size: 0.7rem!important;
		line-height: 1.7em;
	}
}

/*--------------------------------------------
BEFORE AFTER
--------------------------------------------*/
#secret02 {
	background: url(../img/sp/bg_secret02.png) no-repeat top;
	background-size: 100% auto;
	padding-bottom: 1rem;
}
#secret02 h2 {
		padding-top: 0;	
}
#secret02 .ba {
	padding: 0 3rem;
}

#secret02 .note {
	padding: 1.5rem 1rem 1.2rem;
	color: #717171;
	text-align: right;
	font-size: 0.5rem!important;
	line-height: 1.7em;
}

@media screen and (min-width: 641px) {
	#secret02 {
		background: url(../img/pc/bg_secret02.png) no-repeat top;
		padding-top: 8.5rem;
	}
	#secret02 h2 {
		margin-bottom: 3rem;
	}
	#secret02 .note {
		padding: 3rem 1rem 2rem;
		color: #717171;
		text-align: right;
		font-size: 0.7rem!important;
		line-height: 1.7em;
	}
}

	
/*--------------------------------------------
タイアップ実績
--------------------------------------------*/
#tieup {
	background: url(../img/sp/bg_tieup.jpg) no-repeat #000;
	background-size: 100% auto;
	padding-bottom: 2.5rem;
}

#tieup h2 {
	
}
#tieup .proof {
	
}

#tieup h3 {
	margin: 3rem auto 1rem;
}

#tieupList01 li,#tieupList02 li {
	width: 47%;
	float: left;
	margin-bottom: 2rem;
}

#tieupList01 li:nth-child(1),#tieupList02 li:nth-child(1) {
	margin: 0 6% 0 0;
}

#tieup .note {
	clear: both;
	text-align: right;
	color: #fff;
	padding: 1rem 0.6rem 0 0;
	font-size: 0.8rem!important;
}

#tieup a {
	display: block;
	font-size: 0.8rem;
	color: #fff;
	border-bottom: 1px #fff;
	text-align: left;
}

@media screen and (min-width: 641px) {
	#tieup {
		background: url(../img/pc/bg_tieup.jpg) no-repeat #000;
		background-size: 100% auto;
		padding-top: 8rem;
		padding-bottom: 4rem;
	}
	#tieup h2 {
		margin-bottom: 2.5rem;
	}
	#tieup h3 {
		margin: 7.5rem auto 2rem;
	}
	#tieup ul {
	}
	#tieup .inner {
		padding: 0;
	}
	#tieup a {
		font-size: 0.8rem;
		color: #fff;
		border-bottom: 1px #fff;
		text-align: left;
		padding: 1rem 0 0 1.5rem;
	}
	#tieup p {
		font-size: 0.8rem;
	}

}


/*--------------------------------------------
セット内容
--------------------------------------------*/
#items {
	padding: 1rem 1rem 0;
}
#items h2 {
	padding: 2rem 0 3em;
}
#items h3 {
	text-align: left;
	margin-top:1rem;
}
#items div {
	border-bottom: 1px solid #f3f3f3;
	padding-bottom:2rem;
	margin-bottom:2rem;
}
#items div:last-child {
	margin-bottom: 0;
	border-bottom: none;
}
#items .prd {
	width: 26%;
	float: left;
}
#items ul {
	width: 70%;
	float: right;
	text-align: left;
}

#items li {
	font-size: 1rem!important;
	line-height: 1.6em;
}

#items li:nth-child(1){
	margin-bottom: 0.8rem;
}

@media screen and (min-width: 641px) {
	#items {
		padding: 2rem;
	}
	#items h2 {
		padding: 2rem 0 4em;
	}
	#items div {
	}
	#items div:last-child {
		margin-bottom: 0;
		padding-bottom: 0;
		border-bottom: none;
	}
	#items .prd {
		width: 32%;
		float: left;
	}
	#items ul {
		width: 68%;
		float: right;
		text-align: left;
	}

	#items li {
		font-size: 1.1rem!important;
		line-height: 1.8em;
		padding-right: 4rem;
	}
}

/*--------------------------------------------
footer
--------------------------------------------*/

#footer {
	padding-bottom: 1rem!important;
}