@charset "UTF-8";
/* CSS Document */
/* common
-------------------------------------------------- */
body {
	font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "Hiragino Sans", "sans-serif";
}
section .inner {
	position: relative;
}
section .note {
	text-align: right;
	font-size: 0.625rem;
	color: #1f2774;
	line-height: 1.4;
}
@media only screen and (max-width: 640px) {
	/*---- 	for-sp  ----*/
	section .note {
		text-align: left;
	}
}
/* on / off
-------------------------------------------------- */
@media only screen and (min-width: 641px) {
	/*---- 	for-tb ----*/
	.tb, .pc {
		display: block;
	}
	.sp, .onlypc {
		display: none;
	}
	section .inner {
		margin: 0 auto;
		max-width: 1024px;
	}
	.sec--ttl .sub--ttl {
		position: relative;
		margin:0 auto;
		padding: 1.8rem 0 0;
		text-align: center;
		background: url("/img/product/shapemoist/lotion_milk_2021/img_dot.png") center top no-repeat;
	}
}
@media only screen and (min-width: 641px) and (max-width: 979px) {
	/*---- 	for-tb ----*/
	/*img { width:100%; height:auto;}*/
	section .inner {
		margin: 0 2%;
	}
}
@media print, screen and (min-width: 980px) {
	/*---- for-pc ----*/
	.onlypc {
		display: block;
	}
	.tb, .sp {
		display: none;
	}
}
@media only screen and (max-width: 640px) {
	/*---- 	for-sp  ----*/
	.sp {
		display: block;
	}
	.tb, .pc {
		display: none;
	}
	/*img { width:100%; height:auto;}*/
	.sec--ttl .sub--ttl {
		position: relative;
		padding: 1.6rem 0 0;
		text-align: center;
		background: url("/img/product/shapemoist/lotion_milk_2021/img_dot.png") center top no-repeat;
		background-size: 20% auto;
	}
	section .inner {
		margin: 0 4%;
	}
}
/* moist--kv
-------------------------------------------------- */
@media only screen and (min-width: 641px) {
	/*---- 	for-tb ----*/
	.moist--kv .inner {
		max-width: 1366px;
		text-align: center;
	}
	.moist--kv .inner img {
		width: 100%;
		height: auto;
	}
}
@media only screen and (min-width: 641px) and (max-width: 979px) {
	/*---- 	for-tb ----*/
	.moist--kv .inner {
		margin: 0 auto;
	}
}
@media print, screen and (min-width: 980px) {
	/*---- for-pc ----*/
}
@media only screen and (max-width: 640px) {
	/*---- 	for-sp  ----*/
	.moist--kv .inner {
		margin: 0 auto;
	}
}
/* moist--intro
-------------------------------------------------- */
.moist--intro .btn--buy,
.buy--mid {
	position: relative;
	margin: 0 16.3265%;
}
.buy--mid {
	margin: 0 8.3265%;
}
.moist--intro .btn--buy::before,
.buy--mid::before {
	content: '';
	width: 32px;
	height: 1px;
	position: absolute;
	right: -25px;
	top: 50%;
	margin-top: -2px;
	background: url("/img/product/shapemoist/lotion_milk_2021/btn_buy_after.png") center top no-repeat;
}
.buy-tooltip {
	position: relative;
}
.dark-tooltip.north.medium .tip {
	border-width: 0 37px 11px 37px;
	margin-left: -37px;
	margin-top: -11px;
}
.dark-tooltip.dark {
	text-align: center;
	background: #1f2774;
}
.dark-tooltip.dark.north .tip {
	border-color: transparent transparent #1f2774 transparent;
}
.dark-tooltip p {
	text-align: center;
}
.dark-tooltip .buy-list {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 290px;
}
.dark-tooltip.medium {
	padding: 18px 15px;
	border-radius: 10px;
}
.dark-tooltip .buy-list li {
	width: 47.5%;
	padding: 0;
	float: none;
	border-radius: 0;
	background: none;
	margin: 12px 0 0;
}
.buy-list li:nth-child(2) {
	margin-bottom: 0;
}
.dark-tooltip .second {
	margin-top: 15px;
	padding-top: 15px;
	border-top: 1px solid #fff;
}
.dark-tooltip .buy-list li a {
	padding: 0;
	background: none;
}

.moist--intro .item--ul01 .item {
	position: relative;
}
.moist--intro .item--ul01 .emb--milk {
	position: absolute;
    left: 7.8%;
    top: -3.4em;
    width: 26.5%;
}
.emb--milk img { width:100%; height:auto;}

@media only screen and (min-width: 641px) {
	/*---- 	for-tb ----*/
	.moist--intro {
		padding: 3.25rem 0 3.25rem;
		background-image: url("/img/product/shapemoist/lotion_milk_2021/flower_l.png"), url("/img/product/shapemoist/lotion_milk_2021/flower_r.png"), url("/img/product/shapemoist/lotion_milk_2021/bg_water.jpg");
		background-position: left 88%, right 91%, center top;
		background-repeat: no-repeat, no-repeat, no-repeat;
		background-size: auto auto, auto auto, 100% auto;
	}
	.moist--intro .sec--ttl {
		margin-bottom: 5.75rem;
	}
	.moist--intro .sec--ttl h2 {
		padding: 0 5%;
		text-align: center;
	}
	.moist--intro .sec--ttl .sub--ttl {
		margin-top: -2rem;
	}
	.moist--intro .item--ul01 {
		display: flex;
		justify-content: space-between;
		margin-bottom: 1.1rem;
	}
	.moist--intro .item--ul01 li {
		position: relative;
		width: 47.8715%;
		padding: 0 0 2.0125rem;
		background: #e8f3ff;
	}
	.moist--intro .item--ul01 .item {
		margin: -3.5625rem 0 1.6rem;
		padding-left: 18%;
		text-align: center;
	}
	.moist--intro .item--ul01 .item--ul01--li02 .item {
		padding-left: 13%;
	}
	.moist--intro .item--ul01 .item img {
		height: 16rem;
		width: auto;
	}
	.moist--intro .item--ul01 .icn--ldk {
		left: -1%;
		top: 0.8rem;
		width: 29%;
	}
	.moist--intro .item--ul01 h3 {
		margin-bottom: 1.3rem;
		text-align: center;
	}
	.moist--intro .item--ul01 dl {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		padding: 0 5.3265% 0.75rem 8.3265%;
	}
	.moist--intro .item--ul01 dd {
		width: 68%;
	}
	.moist--intro .item--ul01 dd p {
		font-size: 1.25rem;
		line-height: 1.2;
	}
	.moist--intro .item--ul01 dd p small {
		display: block;
		font-size: 0.75rem;
	}
}
@media only screen and (min-width: 641px) and (max-width: 979px) {
	/*---- 	for-tb ----*/
	.moist--intro .item--ul01 h3 img {
		height: 20px;
	}
}
@media print, screen and (min-width: 980px) {
	/*---- for-pc ----*/
	.moist--intro {
		padding: 6.25rem 0 6.25rem;
	}
	.moist--intro .sec--ttl h2 {
		padding: 0 5% 0 0;
	}
	.moist--intro .sec--ttl .sub--ttl {
		margin-top: -2rem;
	}
	.moist--intro .item--ul01 .icn--ldk {
		position: absolute;
		left: -1.875rem;
		top: 0;
		width: auto;
	}
	.moist--intro .item--ul01 dd p {
		font-size: 1.875rem;
		line-height: 1.2;
	}
	.moist--intro .item--ul01 dd p small {
		display: block;
		font-size: 0.975rem;
	}
	.moist--intro .item--ul01 dl {
		padding: 0 10.3265% 0.75rem 16.3265%;
	}
	.moist--intro .item--ul01 .item img {
		width: auto;
		height: auto;
	}
	.moist--intro img {
		width: auto;
		height: auto;
	}
}
@media only screen and (max-width: 640px) {
	/*---- 	for-sp  ----*/
	.moist--intro {
		padding: 3.25rem 0 3.25rem;
		background: url("/img/product/shapemoist/lotion_milk_2021/bg_water.jpg") center top no-repeat;
		background-size: cover;
	}
	.moist--intro .sec--ttl {
		margin-bottom: 2.75rem;
	}
	.moist--intro .sec--ttl h2 {
		padding: 0 15.4% 0 0;
		text-align: center;
	}
	.moist--intro .sec--ttl .sub--ttl {
		margin-top: -3rem;
	}
	.moist--intro .sec--ttl .sub--ttl img {
		height: 20px;
		width: auto;
	}
	.moist--intro .item--ul01 {
		margin-bottom: 1.1rem;
	}
	.moist--intro .item--ul01 li {
		position: relative;
		width: 100%;
		padding: 0 0 2.0125rem;
		background: #e8f3ff;
	}
	.moist--intro .item--ul01 li:first-of-type {
		margin-bottom: 6rem;
	}
	.moist--intro .item--ul01 .item {
		margin: 0 0 1.6rem;
		padding-left: 18%;
		text-align: center;
	}
	.moist--intro .item--ul01 .item img {
		margin: -2.2625rem 0 0;
	}
	.moist--intro .item--ul01 .item--ul01--li02 .item {
		padding-left: 13%;
	}
	.moist--intro .item--ul01 .item img {
		height: 16rem;
		width: auto;
	}
	.moist--intro .item--ul01 .icn--ldk {
		left: 2.7%;
		top:3.6rem;
		width: 21.5%;
	}
	.moist--intro .item--ul01 .emb--milk {
		position: absolute;
		left: 13.8%;
		top: 1.6em;
		width: 22.5%;
	}
	
	.moist--intro .item--ul01 h3 {
		margin-bottom: 1.3rem;
		text-align: center;
	}
	.moist--intro .item--ul01 h3 img {
		height: 20px;
		width: auto;
	}
	.moist--intro .item--ul01 dl {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		padding: 0 5.3265% 0.75rem 8.3265%;
	}
	.moist--intro .item--ul01 dd {
		width: 68%;
	}
	.moist--intro .item--ul01 dd p {
		font-size: 1.5rem;
		line-height: 1.2;
	}
	.moist--intro .item--ul01 dd p small {
		display: block;
		font-size: 0.75rem;
	}
	.moist--intro .btn--buy {
		position: relative;
		margin: 0px 13.3265%;
	}
}
@media only screen and (max-width: 640px) {
	/*---- 	for-sp  ----*/
	.moist--intro2 {
		padding: 3.25rem 0 2.25rem;
		background: url("/img/product/shapemoist/lotion_milk_2021/bg_water.jpg") center top no-repeat;
		background-size: cover;
	}
	.moist--intro2 .inner {
		margin-top: -118px;
	}
}
/* .moist--award
-------------------------------------------------- */
.moist--award {
	text-align: center;
	background: #e7f0f7 url("/img/product/shapemoist/lotion_milk_2021/bg_award.jpg") center center no-repeat;
	background-size: cover;
}
@media only screen and (min-width: 641px) {
	/*---- 	for-tb ----*/
	.moist--award .inner {
		padding: 2.225rem 0 2rem;
	}
	.moist--award .award--ttl {
		margin: 0 auto 1.5rem;
	}
	.moist--award .ul--award01 {
		display: flex;
		justify-content: center;
		align-items: flex-end;
		margin-bottom: 2.5rem;
	}
	.moist--award .ul--award01 li {
		padding: 0 1rem;
	}
}
@media only screen and (min-width: 641px) and (max-width: 979px) {
	/*---- 	for-tb ----*/
	.moist--award .award--ttl {
		margin: 0 8.5% 1.5rem;
	}
	.moist--award .award--ttl img {
		width: 100%;
		height: auto;
	}
}
@media print, screen and (min-width: 980px) {
	/*---- for-pc ----*/
	.moist--award .inner {
		padding: 3.625rem 0 2rem;
	}
}
@media only screen and (max-width: 640px) {
	/*---- 	for-sp  ----*/
	.moist--award {
		padding: 2rem 0 2rem;
		background-size: cover;
	}
	.award--ttl {
		margin: 0 2.2% 20px;
	}
	.ul--award01 {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		margin: 0 auto 2rem;
		align-items: flex-end;
	}
	.ul--award01 li {
		width: 38%;
		padding: 0 3% 1rem;
	}
}
/* moist--datail
-------------------------------------------------- */
.moist--detail {
	background: url("/img/product/shapemoist/lotion_milk_2021/bg_water.jpg") top center no-repeat;
	background-size: cover;
}
.moist--detail .sec--ttl {
	margin-bottom: 6.625rem;
	text-align: center;
}
.moist--detail .sec--ttl h2 {
	margin-bottom: 1.25rem;
}
.moist--detail .sub--ttl {
	padding-top: 2.02rem;
}
.moist--detail .sub--ttl small {
	display: block;
	padding-top: 0.5rem;
	font-size: 0.625rem;
	color: #1f2774;
	line-height: 1.4;
}
.detail--item .detail--inner {
	position: relative;
	margin-bottom: 2rem;
	padding: 4.25rem 4.8828125% 0;
	background: #fff;
	box-shadow: 0px 0px 16px -6px rgba(0, 0, 0, 0.6);
}
.detail--item .note {
	margin-bottom: 6.25rem;
	text-align: left;
}
.detail--item dl {
	display: flex;
}
.detail--item dt {
	width: 34.199134%;
	text-align: center;
	
	position: relative;
	
	margin:0 5% 0 -2.4%;
}

.detail--milk .emb--milk {
	position: absolute;
	right: 15%;
    top: 0;
    width: 25%;
}


.detail--item dd {
	width: 65%;
}
.detail--item dd h3 {
	margin-bottom: 1.25rem;
}
.detail--item dd h3 span {
	display: block;
	margin-bottom: 0.8rem;
}
.detail--item dd h4 {
	margin-bottom: 1.625rem;
}
.detail--item .check {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}
.detail--item .check li {
	margin-right: 2.5rem;
}
.detail--ing {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 3.75rem;
}
.detail--ing li {
	position: relative;
}
.detail--ing .title {
	padding: 1.1rem 0;
	text-align: center;
	background: #e8f3ff;
}
.detail--ing p {
	position: relative;
	padding: 2.875rem 5% 1.875rem 45%;
	font-size: 1.125rem;
	line-height: 1.55;
	font-weight: bold;
	color: #1f2774;
}
.detail--ing p::before {
	content: '';
	width: 1px;
	height: 6.4rem;
	position: absolute;
	left: -1.4rem;
	top: 2.8rem;
	background: #1f2774;
}
.detail--ing li:first-of-type p::before {
	width: 0;
}
/*---- lotion ----*/
.detail--lotion dt {
	margin-top: -7.5rem;
}
.icn--ldk {
	position: absolute;
	right: 4.8828125%;
	top: 3.1875rem;
	width: 132px;
}
.detail--lotion .detail--ing li {
	width: 47.6190%;
}
.detail--lotion .detail--ing p {
	/*padding-left:45%;*/
}
.detail--ing .lo--li01 p {
	background: url("/img/product/shapemoist/lotion_milk_2021/img_apple.png") 10% center no-repeat;
}
.detail--ing .lo--li02 p {
	background: url("/img/product/shapemoist/lotion_milk_2021/img_selamid.png") 10% center no-repeat;
}
.moist--harb {
	padding: 1.875rem 0 6.25rem;
}
/*---- milk ----*/
.detail--milk .check {
	margin-right: 20%;
}
.detail--milk .check li {
	margin: 0 1.875rem 1rem 0;
}
.detail--milk .detail--sub {
	position: absolute;
	right: 0;
	top: 3.1875rem;
}
.detail--milk .detail--ing {
	padding-bottom: 5.625rem;
}
.detail--milk .detail--ing li {
	width: 31.385281%;
}
.detail--milk .detail--ing p {
	font-size: 0.9375rem;
}
.detail--milk .detail--ing p::before {
	left: -0.8rem;
	height: 5.3rem;
	top: 1.8rem;
}
.detail--ing .mk--li01 p {
	background: url("/img/product/shapemoist/lotion_milk_2021/img_apple.png") 14% center no-repeat;
	background-size: 30% auto;
}
.detail--ing .mk--li02 p {
	background: url("/img/product/shapemoist/lotion_milk_2021/img_selamid.png") 14% center no-repeat;
	background-size: 30% auto;
}
.detail--ing .mk--li03 p {
	background: url("/img/product/shapemoist/lotion_milk_2021/img_pureOil.png") 14% center no-repeat;
	background-size: 30% auto;
}
@media only screen and (min-width: 641px) {
	/*---- 	for-tb ----*/
	.moist--detail .inner {
		padding: 5.625rem 0 5.625rem;
	}
	.moist--detail .sub--ttl img {
		margin: 0 auto;
	}
	.detail--milk .check.sp {
		display: none;
	}
}
@media only screen and (min-width: 641px) and (max-width: 979px) {
	/*---- 	for-tb ----*/
	.moist--detail .inner {
		padding: 3.625rem 0 3.625rem;
	}
	.icn--ldk {
		position: absolute;
		right: 1.882813%;
		top: -2.8125rem;
		width: 132px;
	}
	.icn--ldk img {
		width: 100%;
		height: auto;
	}
	.detail--item .check li {
		margin-bottom: 1.1rem;
	}
	.detail--item .check li:last-of-type {
		margin-bottom: 0;
	}
	.detail--lotion .detail--ing p {
		font-size: 14px;
		padding-left: 38%;
		background-size: 28% auto;
	}
	.detail--ing p::before {
		height: 6.4rem;
		left: -1.2rem;
		top: 2.7rem;
	}
	.moist--harb {
		padding-bottom: 3.25rem;
	}
	.detail--milk .detail--sub {
		position: absolute;
		right: 0;
		top: 1.1875rem;
		text-align: right;
	}
	.detail--milk .detail--sub img {
		width: 66%;
		height: auto;
	}
	.detail--milk .detail--ing {
		padding-bottom: 2rem;
	}
	.detail--milk .detail--ing .title {
		padding: 0.8rem 1rem;
	}
	.detail--item .note {
		margin-bottom: 3.25rem;
	}
}
@media print, screen and (min-width: 980px) {
	/*---- for-pc ----*/
}
@media only screen and (max-width: 640px) {
	/*---- 	for-sp  ----*/
	.moist--detail {
		padding: 3rem 0 0rem;
	}
	.moist--detail .sec--ttl {
		margin-bottom: 4.625rem;
	}
	.moist--detail h2 {
		margin: 0 3% 1.8rem;
	}
	.moist--detail .sub--ttl {
		margin: 0 2% 3rem;
	}
	.detail--item .detail--inner {
		margin-bottom: 1.1rem;
	}
	.detail--inner dl {
		display: block;
	}
	.detail--item dt {
		width:100%;
		margin: -6.7rem 0 2.4rem 0;
	}
	.detail--item dt .item--img--lotion {
		display: block;
		width: 50%;
		margin-left:36%;
	}
	/*---- detail--milk ----*/
	.detail--milk .detail--inner dt {
		/*width: 63%;
		margin: -6.7rem 0 2.4rem 36%;*/
		width: 100%;
		margin: -6.7rem 0 2.4rem 0;
	}
	.detail--milk .emb--milk { display:none;}
	.detail--item dd {
		width: 100%;
		margin: 0 auto;
	}
	.detail--item .icn--ldk {
		right: auto;
		left: 7%;
		top: 1.2rem;
		width: 24%;
	}
	.detail--item dd h3 {
		text-align: center;
	}
	.h3img {
		width: 86%;
		margin: 0 auto;
	}
	.detail--milk .h3img {
		width: 80%;
	}
	.detail--lotion dd h4 {
		margin: 0 5% 2rem;
	}
	.detail--milk dd h4 {
		margin: 0 9% 2rem;
	}
	.detail--item .check.pc {
		display: none;
	}
	/*---- lotion ----*/
	.detail--lotion .check {
		margin: 0 0 2rem;
		justify-content: space-between;
	}
	.detail--lotion .check li {
		width: 47.5%;
		margin: 0;
	}
	/*---- milk ----*/
	.detail--milk .check {
		margin: 0 0 2rem;
		justify-content: space-between;
	}
	.detail--milk .check li {
		width: 94%;
		margin: 0 3% 0;
		box-sizing: border-box;
	}
	.detail--item .check li:nth-child(even) {
		margin: 0;
	}
	.detail--ing {
		display: block;
	}
	.detail--lotion .detail--ing li {
		width: 100%;
	}
	.detail--ing p {
		padding: 1.5rem 0 2.275rem 41%;
		font-size: 1rem;
	}
	.detail--ing .lo--li01 p, .detail--ing .lo--li02 p {
		background-size: 27%;
	}
	.detail--ing p::before {
		width: 0;
	}
	.moist--harb {
		padding: 0 0 3.25rem;
	}
	.detail--milk .detail--sub {
		right: auto;
		left: 0;
		width: 30%;
	}
	.detail--milk .detail--ing {
		margin: 0;
		padding: 2rem 0 2.2rem;
	}
	.detail--milk .detail--ing li {
		width: 100%;
	}
	.detail--milk .detail--ing .title {
		padding: 0.5rem 3rem;
	}
	/*---- milk ----*/
	.detail--ing .mk--li01 p, .detail--ing .mk--li02 p, .detail--ing .mk--li03 p {
		padding-bottom: 2.2rem;
		background-size: 25%;
		background-position: 8% center;
	}
	.detail--item .note {
		margin-bottom: 3.25rem;
	}
}
/* moist--natural
-------------------------------------------------- */
.moist--natural {
	background: url("/img/product/shapemoist/lotion_milk_2021/bg_mutenka.jpg") center center no-repeat;
	background-size: cover;
}
.moist--natural .sec--ttl {
	text-align: center;
}
.moist--natural .sec--ttl h2 {
	margin-bottom: 1.125rem;
}
.moist--natural .sub--ttl {
	padding-top: 2.5rem;
}
.moist--natural .ul--natural01 {
	display: flex;
	justify-content: center;
	margin-top: 3.75rem;
}
.moist--natural .ul--natural01 li {
	padding: 0 10px;
}
@media only screen and (min-width: 641px) {
	/*---- 	for-tb ----*/
	.moist--natural .inner {
		padding: 5.625rem 0 5.625rem;
	}
	.moist--natural .sub--ttl img {
		margin: 0 auto;
	}
}
@media only screen and (min-width: 641px) and (max-width: 979px) {
	/*---- 	for-tb ----*/
}
@media print, screen and (min-width: 980px) {
	/*---- for-pc ----*/
}
@media only screen and (max-width: 640px) {
	/*---- 	for-sp  ----*/
	.moist--natural {
		padding: 3.25rem 0 6rem;
		background: #ecf2f7 url("/img/product/shapemoist/lotion_milk_2021/bg_natural_sp@2x.jpg") center bottom no-repeat;
		background-size: 100% auto;
	}
	.moist--natural h2 {
		margin: 0 6.4% 2rem;
	}
	.moist--natural .sub--ttl {
		margin: 0 12% 0;
	}
	.ul--natural01 {
		flex-wrap: wrap;
		justify-content: center;
	}
	.ul--natural01 li {
		width: 40%;
		padding: 0 12px 0;
		text-align: center;
	}
	.ul--natural01 li:nth-child(3) {
		width: 100%;
	}
	.ul--natural01 li img {
		height: 8.2rem;
		width: auto;
	}
}
/* moist--howto
-------------------------------------------------- */
.moist--howto .howto--ttl {
	position: relative;
	margin: 0 auto 3.625rem;
	text-align: center;
}
.moist--howto .howto--ttl::before {
	content: '';
	position: absolute;
	left: -1%;
	top: -7.3rem;
	width: 21.1914%;
	height: 9.2rem;
	background: url("/img/product/shapemoist/lotion_milk_2021/icon_howto.png") center center no-repeat;
	background-size: 100% auto;
}
.moist--howto .ul--howto01 li img {
	width: 100%;
	height: auto;
}
@media only screen and (min-width: 641px) {
	/*---- 	for-tb ----*/
	.moist--howto {
		padding: 4.875rem 0 4rem;
	}
	.moist--howto .howto--ttl img {
		margin: 0 auto;
	}
	.moist--howto .ul--howto01 {
		display: flex;
		justify-content: space-between;
	}
	.moist--howto .ul--howto01 li {
		width: 31.25%;
	}
	.moist--howto .ul--howto01 li .photo {
		margin-bottom: 1.25rem;
	}
	.moist--howto .ul--howto01 li p {
		text-align: center;
		font-size: 0.75rem;
		line-height: 1.5;
	}
}
@media only screen and (min-width: 641px) and (max-width: 979px) {
	/*---- 	for-tb ----*/
	.moist--howto .ul--howto01 li p {
		font-size: 14px;
	}
}
@media print, screen and (min-width: 980px) {
	/*---- for-pc ----*/
	.moist--howto {
		padding: 9.375rem 0 8.125rem;
	}
}
@media only screen and (max-width: 640px) {
	/*---- 	for-sp  ----*/
	.moist--howto {
		padding: 7rem 0 0;
	}
	.moist--howto .howto--ttl::before {
		left: -1%;
		top: -5.3rem;
		width: 45.1914%;
		height: 9.2rem;
		background: url(/img/product/shapemoist/lotion_milk_2021/icon_howto.png) center top no-repeat;
		background-size: 100% auto;
	}
	.ul--howto01 {
		margin: 0 12.02898%;
	}
	.ul--howto01 li {
		margin-bottom: 2.35rem;
	}
	.ul--howto01 p {
		margin-top: 1rem;
		line-height: 1.67;
		text-align: center;
		font-size: 12px;
	}
}
/* moist--image
-------------------------------------------------- */
.moist--image {
	position: relative;
	padding: 4.125rem 0 0;
	background: url("/img/product/shapemoist/lotion_milk_2021/bg_07.jpg") right top no-repeat;
	z-index: 2;
}
@media only screen and (min-width: 641px) {
	/*---- 	for-tb ----*/
}
@media only screen and (min-width: 641px) and (max-width: 979px) {
	/*---- 	for-tb ----*/
}
@media print, screen and (min-width: 980px) {
	/*---- for-pc ----*/
}
@media only screen and (max-width: 640px) {
	/*---- 	for-sp  ----*/
	.moist--image {
		padding: 0 0 2rem 0;
		background-size: 90%;
		background-position: right bottom;
	}
	.moist--image .inner {
		margin: 0 8% 0 0;
	}
}


/* moist--intro02
-------------------------------------------------- */
@media only screen and (min-width: 641px) {
	/*---- 	for-tb ----*/
}
@media only screen and (min-width: 641px) and (max-width: 979px) {
	/*---- 	for-tb ----*/
}
@media print, screen and (min-width: 980px) {
	/*---- for-pc ----*/
	.moist--intro02 {
		margin-top: -4.125rem;
	}
}
@media only screen and (max-width: 640px) {
	/*---- 	for-sp  ----*/
	.moist--intro02 {
		margin-top: -2.125rem;
		padding-top: 5.5rem;
	}
}


/* moist--movie
-------------------------------------------------- */
.moist--movie {
	background:url("/img/product/shapemoist/lotion_milk_2021/bg_movie.png") center top no-repeat;
	background-size:cover;
}
.moist--movie .inner {
	padding: 5.625rem 0 5.625rem;
}
section div .sec--ttl {
	text-align:center;
}
section div .sec--ttl h2 {
	margin-bottom: 1.25rem;
}
section div .sub--ttl {
	margin-bottom:2.2rem;
	text-align:center;
}
section div .sub--ttl img {
	margin:0 auto 4rem;
}

.movie--frame {
	margin:0 auto 6.28rem;
	max-width:94%;
}
.movie--frame video {
	max-width:100%;
}
.voice--warpper {
	max-width:78%;
	margin-top:-2.5rem;
	margin:0 auto;
}

@media only screen and (min-width: 641px) {
/*---- 	for-tb ----*/
	.moist--movie .inner {
		padding: 5.625rem 0 5.625rem;
		text-align:center;
	}
	.voice--warpper {
		margin-left:22.5%;
	}
	.voice01 img {
		margin-left:-22.5%;
	}
	.voice02 img {
		margin-right:-22.5%;
	}
}
@media only screen and (min-width: 641px) and (max-width: 979px) {
/*---- 	for-tb ----*/
}
@media print, screen and (min-width: 980px) {
/*---- for-pc ----*/
}
@media only screen and (max-width: 640px) {
/*---- 	for-sp  ----*/
	.moist--movie {
		background:url("/img/product/shapemoist/lotion_milk_2021/bg_movie_sp@2x.jpg") center top no-repeat;
		background-size: cover;
	}
	.moist--movie .inner {
		padding:3.6rem 0 3rem;
	}
	.moist--movie .sec--ttl h2 img,
	.moist--checklist .sec--ttl h2 img {
		height:1.4rem;
		width:auto;
		margin:0 auto;
	}
	.moist--movie .sec--ttl .sub--ttl img {
		max-width:70%;
		margin-bottom: 2rem;
	}
	.movie--frame {
		margin: 0 auto 4.14rem;
		max-width: 100%;
	}

	.voice--warpper {
		max-width:100%;
	}
	.voice01 {
		margin-bottom:1rem;
	}
	
}


/* moist--checklist
-------------------------------------------------- */
.moist--checklist {
	/*padding: 3.25rem 0 3.25rem;*/
	background-image: url("/img/product/shapemoist/lotion_milk_2021/flower_l.png"), url("/img/product/shapemoist/lotion_milk_2021/flower_r.png"), 
		url("/img/product/shapemoist/lotion_milk_2021/bg_checklist.png");
	background-position: left 88%, right 91%, center bottom;
	background-repeat: no-repeat, no-repeat, no-repeat;
	background-size: auto auto, auto auto, cover;
}
.moist--checklist .inner {
	padding: 5.625rem 0 12.625rem;
}
.checklist--inner img {
	width:100%;
	height:auto;
}
.checklist--inner ul {
	position:relative;
	display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
	max-width:876px;
	margin:0 auto 2rem;
}
.checklist--inner ul li {
	width:416px;
	margin-bottom:1rem;
}

.checklist--inner ul::before {
	content:"";
	position:absolute;
	right:-38px;
	top:-126px;
	width:195px;
	height:83px;
	background: url("/img/product/shapemoist/lotion_milk_2021/icn_check_list.png") center center no-repeat;
}

.checklist--inner ul::after {
	content:"";
	position:absolute;
	right: -97px;
    bottom: -126px;
	width:133px;
	height:214px;
	background: url("/img/product/shapemoist/lotion_milk_2021/img_check_products.png") center center no-repeat;
}


.checklist--inner p {
	text-align: center;
}
.checklist--inner p img {
	max-width:550px;
	margin:0 auto;
}
@media only screen and (min-width: 641px) and (max-width: 979px) {
/*---- 	for-tb ----*/
	.moist--checklist .inner {
		padding: 5.625rem 0 10.625rem;
		text-align:center;
	}
}
@media only screen and (min-width: 480px) and (max-width: 768px) {
/*---- 	for-ipad ----*/
	.checklist--inner ul {
		max-width:80%;
	}
	.checklist--inner ul li {
		width:48%;
		margin-bottom:1rem;
	}
	.checklist--inner ul::after {
		right: 0;
		right: -11%;
    	bottom: -66px;
		width:88px;
		height:142px;
		background-size: 100% auto;
	}
}
@media only screen and (min-width: 641px) and (max-width: 979px) {
/*---- 	for-tb ----*/
}
@media print, screen and (min-width: 980px) {
/*---- for-pc ----*/
}
@media only screen and (max-width: 640px) {
/*---- 	for-sp  ----*/
	.moist--checklist {
		background-image: 
			url("/img/product/shapemoist/lotion_milk_2021/bg_checklist_sp@2x.png");
		background-position: center bottom;
		background-repeat: no-repeat, no-repeat, no-repeat;
		background-size: 100% 100%;
	}
	.moist--checklist .inner {
		padding:3.6rem 0 5.25rem;
	}
	.moist--checklist .sec--ttl .sub--ttl img {
		max-width:74%;
		margin-bottom: 2rem;
	}
	.checklist--inner ul {
		display:block;
		width:90%;
		max-width: none;
		margin:0 auto 3rem;
	}
	.checklist--inner ul li {
		width:100%;
		margin-bottom:1.1rem;
	}
	.checklist--inner ul li img {
		width:100%; height: auto;
	}
	.checklist--inner ul::after { width:0;}
	
	.checklist--inner ul::before {
		right: -4.8%;
   		top: -25px;
		width:90px;
		height:38px;
		background: url("/img/product/shapemoist/lotion_milk_2021/icn_check_list.png") center center no-repeat;
		background-size:cover;
	}
	.checklist--inner p {
		text-align: center;
		width:64%;
		margin:0 auto;
	}
	.checklist--inner p img {
		max-width:100%;
		margin:0 auto;
	}
}


/* btn追加　21/10/09
-------------------------------------------------- */
.buy--mid {
	margin-top:25px;
}
.buy--mid
@media only screen and (min-width: 641px) and (max-width: 979px) {
	/*---- 	for-tb ----*/
}
@media only screen and (min-width: 641px) and (max-width: 979px) {
	/*---- 	for-tb ----*/
}
@media print, screen and (min-width: 980px) {
	/*---- for-pc ----*/
}
@media only screen and (max-width: 640px) {
	/*---- 	for-sp  ----*/
}


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


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


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


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


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