@charset "UTF-8";
/* CSS Document */
/* 
-------------------------------------------------- */
.detail .item--category span {
	width:216px;
	display: inline-block;
	text-align: center;
	box-sizing: border-box;
}

section .note { color: #919599;}

@media print, screen and (min-width: 641px) {
/*---- for-pc ----*/

}
@media print, screen and (min-width: 980px) {
/*---- for-pc ----*/
}
@media only screen and (max-width: 640px) {
/*---- 	for-sp  ----*/

}


/* tobe--area
-------------------------------------------------- */
.tobe--area {
	background:#f9f9f9;
}
.tobe--area .txt ul {
	display: flex;
	flex-wrap: wrap;
}
.tobe--area .txt ul li {
	width:50%;
	color: #00ab84;
	box-sizing: border-box;
}
.tobe--area .txt ul li::before {
	width:25px;
	height:20px;
	background: url("../../img/product/shapemoist/moist-n-lotion/icn_check.png") center center no-repeat;
	background-size: 100% auto;
}

.tobe--area .txt_01 p {
	text-align:center;
	color: #00ab84;
}
.tobe--area .txt_02 { text-align: right; line-height: 1;}

@media print, screen and (min-width: 641px) {
/*---- for-pc ----*/
	.merchandise--area .txt_01 {
		margin-right:16.6%;
	}
	
	.n--lotion .tobe--area .txt {
		padding-right: 5%;
	}
	.n--lotion .tobe--area .txt ul {
		margin-right: 10%;
	}
	.tobe--area .txt_01 {
		margin-bottom:12px;
		padding:14px 14px 1px;
		border-radius: 10px;
	}
}
@media print, screen and (min-width: 980px) {
/*---- for-pc ----*/
}
@media only screen and (max-width: 640px) {
/*---- 	for-sp  ----*/
	.merchandise--area .txt_01 {
		margin-bottom:15px;
	}
	.tobe--area .txt {
		padding:3.2em 0 0;
	}
	.tobe--area .txt_01 {
		margin:0 0.884% 12px;
		padding:10px 14px 4px;
		text-align: center;
		border-radius: 10px;
	}
	.tobe--area .txt ul {
		margin:0 7.5% 20px;
	}
	.tobe--area .txt ul li {
		padding-left: 1.9em;
	}
	
	.tobe--area .txt ul li::before {
		width:15px;
		height:13px;
		background: url("../../img/product/shapemoist/moist-n-lotion/icn_check.png") center center no-repeat;
		background-size: 100% auto;
	}
}


/* .howto--area .inner
-------------------------------------------------- */
.howto--area .inner {
	background:#f9f9f9;
}
.howto--area .title { color: #00ab84;}
.howto--area .title::before { background: #00ab84;}

@media print, screen and (min-width: 641px) {
/*---- for-pc ----*/
	.howto--area { margin-top:50px;}
	.howto--area .inner {
		flex-direction: row-reverse;
	}
	
	.howto--area .photo { margin-right:0;}
	
	.n--lotion .howto--area .inner::before {
		width:151px;
		height:140px;
		right:auto;
		left: /*-52px*/ 0;
		bottom:/*-72px*/0;
		transform: rotate(0) translate(-35%, 42%);
		background: url("../../img/product/shapemoist/moist-n-lotion/img_06_pc.png") center center no-repeat;
		background-size:100% auto;
	}
	
	.n--lotion.n--gel .howto--area .inner::before {
		width:168px;
		height:134px;
		right:auto;
		left: /*-52px*/ 0;
		bottom:/*-72px*/0;
		transform: rotate(0) translate(-35%, 42%);
		background: url("../../img/product/shapemoist/moist-n-gel/img_06_pc.png") center center no-repeat;
		background-size:100% auto;
	}
}
@media print, screen and (min-width: 980px) {
/*---- for-pc ----*/
	.howto--area .txt { padding-left:7.65%;}
}
@media only screen and (max-width: 640px) {
/*---- 	for-sp  ----*/
}


/* 
-------------------------------------------------- */
@media print, screen and (min-width: 641px) {
/*---- for-pc ----*/
}
@media print, screen and (min-width: 980px) {
/*---- for-pc ----*/
}
@media only screen and (max-width: 640px) {
/*---- 	for-sp  ----*/
}


/* 
-------------------------------------------------- */
@media print, screen and (min-width: 641px) {
/*---- for-pc ----*/
}
@media print, screen and (min-width: 980px) {
/*---- for-pc ----*/
}
@media only screen and (max-width: 640px) {
/*---- 	for-sp  ----*/
}


/* 
-------------------------------------------------- */
@media print, screen and (min-width: 641px) {
/*---- for-pc ----*/
}
@media print, screen and (min-width: 980px) {
/*---- for-pc ----*/
}
@media only screen and (max-width: 640px) {
/*---- 	for-sp  ----*/
}


/* 
-------------------------------------------------- */
@media print, screen and (min-width: 641px) {
/*---- for-pc ----*/
}
@media print, screen and (min-width: 980px) {
/*---- for-pc ----*/
}
@media only screen and (max-width: 640px) {
/*---- 	for-sp  ----*/
}


/* 
-------------------------------------------------- */
@media print, screen and (min-width: 641px) {
/*---- for-pc ----*/
}
@media print, screen and (min-width: 980px) {
/*---- for-pc ----*/
}
@media only screen and (max-width: 640px) {
/*---- 	for-sp  ----*/
}
/* 
-------------------------------------------------- */
@media print, screen and (min-width: 641px) {
/*---- for-pc ----*/
}
@media print, screen and (min-width: 980px) {
/*---- for-pc ----*/
}
@media only screen and (max-width: 640px) {
/*---- 	for-sp  ----*/
}