@charset "UTF-8";
/* CSS Document */
/* common
-------------------------------------------------- */
body {
	height: auto;
	overflow-x: hidden;
}
section .inner {
	position: relative;
	font-size:10px;
}
section .note {
	text-align: right;
	font-size: 0.625rem;
	color: #1f2774;
	line-height: 1.4;
}
@media only screen and (max-width: 640px) {
/*---- 	for-sp  ----*/
	body { font-size:8px;}
	section .note {
		text-align: left;
		color: #919599;
	}
}

main { 
	font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "Hiragino Sans", "sans-serif";
}


/* on / off
-------------------------------------------------- */
@media only screen and (min-width: 641px) {
	/*---- 	for-tb ----*/
	.tb, .pc {
		display: block;
	}
	.sp, .onlypc {
		display: none;
	}
	section .inner {
		margin: 0 auto;
		width: 96%;
	}
	
}
@media only screen and (min-width: 641px) and (max-width: 979px) {
	/*---- 	for-tb ----*/
	/*img { width:100%; height:auto;}*/
}
@media print, screen and (min-width: 980px) {
	/*---- for-pc ----*/
	.onlypc {
		display: block;
	}
	.tb, .sp {
		display: none;
	}
	
	section .inner {
		width: 1180px;
		margin: 0 auto;
	}
}
@media only screen and (max-width: 640px) {
	/*---- 	for-sp  ----*/
	.sp {
		display: block;
	}
	.tb, .pc {
		display: none;
	}
	
	section .inner {
		margin: 0;
	}
}

/* crumb
-------------------------------------------------- */
.crumb {
	display: flex;
}
.crumb li {
	margin-right: 1.1em;
	padding:.9em 0;
	font-size:1.2em;
	color: #919599;
}
.crumb li a {
	position: relative;
	padding-right: 1.6em;
	color: #919599;
}
.crumb li a::after {
	content:'';
	position: absolute;
	right: 0;
	top:3%;
	width:6px;
	height:13px;
	background:url("../../img/product/shapemoist/moist-bodymilk/icn_crumb.png") right 45% no-repeat;
	background-size:5px auto;
}

@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  ----*/
	.crumb { padding:0 4%;}
	.crumb li { font-size:1.05em;}
}


/* item--header
-------------------------------------------------- */
.detail {}

@media print, screen and (min-width: 641px) {
/*---- for-pc ----*/
	.detail { 
		margin-bottom:5.6em;
		background: rgb(245,245,245);
		background: -moz-linear-gradient(90deg, rgba(245,245,245,1) 0%, rgba(245,245,245,1) 50%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
		background: -webkit-linear-gradient(90deg, rgba(245,245,245,1) 0%, rgba(245,245,245,1) 50%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
		background: linear-gradient(90deg, rgba(245,245,245,1) 0%, rgba(245,245,245,1) 50%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f5f5f5",endColorstr="#ffffff",GradientType=1);
	}
	
	.detail .inner {
		display: flex;
	}
	.detail .inner > div { width:50%;}
	.detail .detai--txt {
		padding:0 0 0 30px;
		box-sizing: border-box;
	}	
}
@media print, screen and (min-width: 980px) {
/*---- for-pc ----*/
	.detail .detai--txt {
		padding:4.5em 0 0 60px;
		box-sizing: border-box;
	}	
}
@media only screen and (max-width: 640px) {
/*---- 	for-sp  ----*/
	.detail .detai--txt {
		padding:6em 5.33333%;
	}
}

.detail .item--category {
	margin-bottom: 1.5em;
}
.detail .item--category span {
	display: inline-block;
	padding:.4em 1.2em .3em;
	font-size:1.6em;
	color: #AE9E65;
	border: 1px solid #AE9E65;
}
.detail .item--name {
	display: flex;
	align-items: center;
	margin-bottom: .9em;
	color: #1E2676;
	font-size: 2.4em;
	font-weight: bold;
}
.detail .item--name span span {
	margin-right:1em;
	padding:.25em 1.4em .2em;
	font-size:12px;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-weight: 700;
	background: #ffff00;
}
.detail .item--copy {
	margin-bottom: 1.1em;
	font-size:14px;
	color: #1E2676;
	line-height: 1.8;
}
.detail .item--copy small {
	display: block;
	font-size:12px;
	color: #919599;
}
.detail .item--price {
	margin-bottom: 1.3em;
	font-size:2.4em;
	color: #1E2676;
}
.detail .item--price strong { font-weight: bold;}
.detail .item--price small {
	font-size:16px;
}
.detail .item--price small span { margin-left: 1.2em;}

@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  ----*/
	.detail .item--category span { padding: .7em 1.2em .6em ; font-size: 1.2em;}
	.detail .item--name { font-size:1.4em;}
	.detail .item--name span span {  font-size:11px;}
}

.item--buy {
	position: relative;
	margin-bottom: 28px;
}
.item--buy .btn--buy {
	position: relative;
	color: #fff;
	font-size:1.6em;
	line-height: 4em;
	text-align: center;
	background: #1E2676;
}
.item--buy .btn--buy::after {
	content:'';
	position: absolute;
	top:50%;
	transform: translateY(-50%);
	right:16px;
	width:14px;
	height:14px;
	background: url("../../img/product/shapemoist/moist-bodymilk/icn_buylink.svg") center center no-repeat;
	background-size: 100% auto;
}

.item--buy:hover { cursor: pointer;}
.ul--buy {
	position: absolute;
	left: 0;
	top:100%;
	width:100%;
	border-left :1px solid #aaa;
	border-right:1px solid #aaa;
	z-index: 4;
	
	display: none;
}
.ul--buy li {
	text-align: center;
	padding:12px 0;
	border-bottom:1px solid #aaa;
	background: #fff;
}
.ul--buy li a { display: block;}

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

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

.item--ingredient {
}
.item--ingredient dl {
	position: relative;
	border-top: 1px solid #919599;
	border-bottom: 1px solid #919599;
	background: #F5F5F5;
	width:100%;
}
.item--ingredient dt {
	padding:20px 16px;
	font-size:1.6em;
	font-weight: bold;
	color: #1E2676;
}
.item--ingredient dt:hover { cursor: pointer;}
.item--ingredient dt::before,
.item--ingredient dt::after {
	content:'';
	position: absolute;
	right:16px;
	top:50%;
	transform: translateY(-50%);
	background: #1E2676;
}
.item--ingredient dt::before {
	height:23px;
	width:1px;
	transform: translate(-12px, -50%);
}
.item--ingredient dt::after {
	height:1px;
	width:23px;
}
.item--ingredient dd {
	position: absolute;
	left: 0;
	top:100%;
	width:99.8%;
	
	padding:2px 13px 22px;
	font-size:1.4em;
	line-height: 1.45;
	box-sizing: border-box;
	background: #F5F5F5;
	border-bottom: 1px solid #919599;
	z-index: 3;
	
	display: none;
}
@media only screen and (max-width: 640px) {
/*---- 	for-sp  ----*/
	.item--ingredient dd {
		font-size:1.2em;
	}
}



/* moist--kv
-------------------------------------------------- */
@media print, screen and (min-width: 641px) {
/*---- for-pc ----*/
	.moist--kv {
		margin-bottom: 8.3em;
	}
}
@media print, screen and (min-width: 980px) {
/*---- for-pc ----*/
}
@media only screen and (max-width: 640px) {
/*---- 	for-sp  ----*/
}


/* merchandise--area
-------------------------------------------------- */
.merchandise--area h1 {
	margin-bottom: 1em;
	font-size:2.4em;
	font-weight: bold;
	line-height: 1.8;
}
.merchandise--area p {
	margin-bottom: 2em;
	font-size:1.6em;
	line-height: 1.8;
}

@media print, screen and (min-width: 641px) {
/*---- for-pc ----*/
	.merchandise--area { margin-bottom:10em;}
	.merchandise--area .fxpc {
		display: flex;
		flex-direction: row-reverse;
	}
	
	.merchandise--area .photo {
		width:38.98305084745763%;
		margin-bottom: 20px;
	}
	.merchandise--area .txt {
		width:60%;
		padding-top: 4em;
	}

	.merchandise--area .fxpc .fxpc {
		max-width:620px;
		justify-content: space-between;
		flex-direction: row;
	}
	.merchandise--area .fxpc .fxpc div { width:49%;}
	.merchandise--area .note {
		display: block;
		width:38.98305084745763%;
		margin-left: 61%;
		font-size:12px;
		text-align: left;
		color: #919599;
		line-height: 1.44;
	}
}
@media print, screen and (min-width: 980px) {
/*---- for-pc ----*/
}
@media only screen and (max-width: 640px) {
/*---- 	for-sp  ----*/
	.merchandise--area {
		padding:4em 5.33333%;
	}
	.merchandise--area h1 {
		margin: 30px 0 .2em;
		font-size:1.6em;
	}
	.merchandise--area p {
		font-size:1.2em;
	}
	.merchandise--area .fxpc .fxpc {
		margin:3.5em 10% 3em;
	}
	.merchandise--area .fxpc .fxpc div:nth-child(1) { margin-bottom:2.2em;}
}


/* tobe--area
-------------------------------------------------- */
.tobe--area {
	background: #f8FBFB;
}
.tobe--area .txt ul li { position: relative;}
.tobe--area .txt ul li::before {
	content:'';
	position: absolute;
	left: 0;
	top:50%;
	width:16px;
	height: 18px;
	transform: translateY(-50%);
	background: url("../../img/product/shapemoist/moist-bodymilk/icn_check.png") center center no-repeat;
	background-size: 17px auto;
}
.tobe--area h1 { margin-bottom:3.2em;}
.tobe--area .txt ul {
	margin-bottom: 2.6em;
}
.tobe--area .txt ul li {
	position: relative;
	padding-left:1.4em;
	font-size:2.2em;
	font-weight: bold;
	color: #388BBA;
	line-height: 1.9;
}
.tobe--area .txt_01 {
	padding: 2.5em 0 1.4em;
	background: #fff;
	border-radius: 70px;
}
.tobe--area .txt_01 p {
	margin-bottom: .6em;
	font-size:1.6em;
	font-weight: bold;
	color: #388BBA;
	text-align: center;
	line-height: 1.3;
}
@media print, screen and (min-width: 641px) {
/*---- for-pc ----*/
	.tobe--area {
		padding:45px 0;
	}
	.tobe--area .inner {
		display: flex;
		justify-content: space-between;
	}
	.tobe--area .photo {
		width:40.67796610169492%;
	}
	.tobe--area .txt {
		width:50%;
		padding:3.4em 17.744% 0 0;
		box-sizing: border-box;
	}
	
	.tobe--area .txt ul li { font-size:16px;}

}
@media print, screen and (min-width: 980px) {
/*---- for-pc ----*/
	.tobe--area .txt ul li { font-size:22px;}
}
@media only screen and (max-width: 640px) {
/*---- 	for-sp  ----*/
	.tobe--area {
		padding:5.33333% 5.33333% 3.1em;
	}
	.tobe--area .txt {
		padding:3.2em 11.884% 0;
	}
	.tobe--area .txt h1 { margin:0 11px 2em;}
	.tobe--area .txt ul { margin:0 0 1.6em 16px;}
	.tobe--area .txt ul li {
		font-size:1.3em;
		line-height: 2.1;
	}
	.tobe--area .txt ul li::before {
		width:11px;
		background: url("../../img/product/shapemoist/moist-bodymilk/icn_check.png") center center no-repeat;
		background-size:11px auto;
	}
	.tobe--area .txt_01 p {
		font-size: 11px;
	}
	.tobe--area .txt_01 {
		padding: 2em 0 1.4em;
	}
}


/* aroma--area
-------------------------------------------------- */
.aroma--area {}
.aroma--area .txt ul li strong { font-weight: bold;}

.aroma--area h1 {
	margin-bottom: .7em;
	font-size:2.4em;
	font-weight: bold;
}
.aroma--area .txt p { font-size:1.6em;}

.aroma--area .txt ul {
	width:100%;
	max-width:400px;
	margin:5.3em 0 0;
}
.aroma--area .txt ul li {
	margin: 0 0 8px;
	padding:.5em 2em;
	font-size:1.6em;
	color: #006CB8;
	border-radius: 20px;
	background: #f8FBFB;
	white-space: nowrap;
}

@media print, screen and (min-width: 641px) {
/*---- for-pc ----*/
	.aroma--area .inner {
		display: flex;
		flex-direction: row-reverse;
		justify-content: space-between;
	}
	.aroma--area .photo {
		width:58.1355932203389%;
	}
	.aroma--area .txt {
		width:40%;
		padding: 12em 0 0;
	}
	.aroma--area h1 {
		margin-bottom: .7em;
		font-size:2.4em;
		font-weight: bold;
	}
	.aroma--area .txt p { font-size:1.6em;}
	

	
}
@media print, screen and (min-width: 980px) {
/*---- for-pc ----*/
}
@media only screen and (max-width: 640px) {
/*---- 	for-sp  ----*/
	.aroma--area .txt {
		margin:0 6%;
	}
	.aroma--area h1 { font-size:1.6em;}
	.aroma--area .txt p,
	.aroma--area .txt ul li { font-size:1.2em;}
	.aroma--area .txt ul { margin:2.2em 0 4em;}
	.aroma--area .txt ul li { padding:.7em 2em;}
}


/* howto--area
-------------------------------------------------- */
.howto--area {}
.howto--area .inner {
	position: relative;
	background: #f8FBFB;
	box-sizing: border-box;
}
.howto--area .title {
	position: relative;
	padding-left: 63px;
	font-weight: bold;
	color: #388BBA;
}
.howto--area .title::before {
	content:'';
	position: absolute;
	left: 0;
	top:50%;
	width:47px;
	height:1px;
	background: #006CB8;	
}


@media print, screen and (min-width: 641px) {
/*---- for-pc ----*/
	.howto--area .inner {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding:24px;
	}
	.howto--area .photo {
		width:370px;
		margin-right: 78px;
	}
	.howto--area .txt {
		width:calc(100% - 478px);
	}
	.howto--area .txt--inner { width:420px;}
	.howto--area .title {
		margin-bottom: 1.2em;
		font-size:2.5em;
	}
	.howto--area p {
		font-size:1.6em;
		line-height: 1.8;
	}
	.howto--area .inner::before {
		content:'';
		position: absolute;
		right:0;
		bottom:0;
		transform: translate(40%, 40%) rotate(1.7deg);
		width:222px;
		height:222px;
		background:url("../../img/product/shapemoist/moist-bodymilk/img_06_pc.png") center center no-repeat;
		background-size:100% auto;
	}
}
@media print, screen and (min-width: 980px) {
/*---- for-pc ----*/
}
@media only screen and (max-width: 640px) {
/*---- 	for-sp  ----*/
	.howto--area .inner {
		padding:5.33333% 5.33333% 3.1em;
	}
	.howto--area .txt {
		padding:3.2em 0 0;
	}
	.howto--area .title {
		margin-bottom: 1em;
		font-size:1.6em;
	}
	.howto--area .title::before {
		top:33%;
	}
	.howto--area p {
		font-size:1.2em;
		line-height: 1.8;
	}
}


/* 
-------------------------------------------------- */
@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  ----*/
}