@charset "UTF-8";

/**************************************************
 * スキンケアページ 共通CSS
 * 
 * update:2024.11.13
 * by plane-plan
 * 
 **************************************************/



/* --------------------------------

 共通パーツ

-------------------------------- */

.offer_btn{
	display:block;
	overflow:hidden;
	text-align:center;
	margin:20px 0;
}

.offer_btn a{
	display:block;
	overflow:hidden;
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}

.offer_btn a:hover{
	opacity:0.5;
}



@media (max-width: 768px) {

	.offer_btn{
		margin:3vw 0;
	}

}

/* --------------------------------

 事実 満足度98.7%

-------------------------------- */
#fact{
	display:block;
	overflow:hidden;
	background-image:url('../../_images/fact/bg.webp');
	background-repeat:no-repeat;
	background-position:50% 0;
	background-size:cover;
	position:relative;
}

#fact::before{
	display:block;
	width:577px;
	height:811px;
	content:"";
	position:absolute;
	top:450px;
	right:calc(50% - 40px);
	background:url('../../_images/fact/pict.webp') no-repeat 0 0;
}

#fact > .innerFrame{
	padding:50px 0;
	text-align:center;
}


#fact h2{
	display:block;
	overflow:hidden;
	margin-bottom:30px;
}

#fact h2 img{
	width:100%;
	height:auto;
	max-width: 760px;
}


#fact > .innerFrame > p{
	display:block;
	overflow:hidden;
	text-align:center;
	width:528px;
	margin:50px 40px 70px;
	float:right;
}

#fact > .innerFrame > p > picture img{
	margin:52px auto;
}

#fact > .innerFrame > img:nth-child(5){
	margin-top:55px;
}



@media (max-width: 768px) {

	#fact{
		background-image:url('../../_images/fact/sp/bg.webp');
	}

	#fact::before{
		display:none;
	}

	#fact img{
		width:100%;
		height:auto;
		position:relative;
	}

	#fact h2{
		margin-bottom:0;
	}

	#fact > .innerFrame{
		padding:0 0;
	}

	#fact > .innerFrame > img:nth-child(2){
		width:45vw;
		height:auto;
		margin:6vw auto;
	}

	#fact > .innerFrame > p{
		width:100%;
		margin:0 0;
		float:none;
	}

	#fact > .innerFrame > p > img:nth-child(1){
		width:calc(100% - 12vw);
		margin:0 auto;
	}
	#fact > .innerFrame > p > picture img{
		margin:0 0;
	}
	#fact > .innerFrame > p > img:last-child{
		width:calc(100% - 12vw);
		margin:-6vw auto 0;
	}

	#fact > .innerFrame > picture{
		margin:6vw auto 0;
	}

	#fact > .innerFrame > img:nth-child(5){
		width:calc(100% - 12vw);
		margin:7vw auto 8vw;
	}

}



/* --------------------------------

 石鹸のここがすごい!

-------------------------------- */
#strength{
	display:block;
	overflow:hidden;
}

#strength h2{
	display:block;
	overflow:hidden;
	text-align:center;
	position:relative;
	z-index:10;
}

/*石鹸のここがすごい! 1*/
#strength01{
	display:block;
	overflow:hidden;
	padding:40px 0 70px;
	position:relative;
}

#strength01 > .imgFrame{
	display:block;
	overflow:hidden;
	width:664px;
	height:533px;
	position:absolute;
	top:115px;
	left:calc(50% + 40px);
}

#strength01 .innerFrame > p{
	display:inline-block;
	overflow:hidden;
	font-size:30px;
	line-height:175%;
	letter-spacing: 0.05em;
	color:#2e5b2e;
	margin:110px 0 20px;
}

#strength01 .innerFrame > p > sup{
	font-size:14px;
	top:-1.25em;
}
#strength01 .innerFrame > p+p.cautionTxt{
	display:block;
	font-size:12px;
	color:#000000;
	margin:0 0 20px;
}


/*石鹸のここがすごい! 2*/
#strength02{
	display:block;
	overflow:hidden;
	background-color:#e5eaf0;
	padding:40px 0 60px;
	text-align:center;
	position:relative;
}

#strength02 p{
	margin-top:40px;
}


/*石鹸のここがすごい! 3*/
#strength03{
	display:block;
	overflow:hidden;
	padding:40px 0 100px;
}

.interview{
	display:block;
	overflow:hidden;
	width:765px;
	height:415px;
	margin:45px auto 0;
	position:relative;
	background-repeat:no-repeat;
	background-position:0 0;
	background-size:contain;
}

.interview > .interviewBox{
	display:inline-block;
	overflow:hidden;
	position:absolute;
	top:50%;
	left:45px;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
}

.interview > .interviewBox > p{
	display:block;
	overflow:hidden;
	font-size:16px;
	line-height:155%;
}

.interview > .interviewBox > p > span{
	display:block;
	margin-top:0.25em;
}

.interview > .interviewBox.posR{
	left:auto;
	right:60px;
}

.interviewBox h3{
	display:block;
	overflow:hidden;
	font-size:24px;
	font-weight:300;
	line-height:175%;
	margin-bottom:1em;
	position:relative;
}



#strength03 .interview:nth-child(2){
	background-image: url('../../_images/strength/0303_a.webp');
}

#strength03 .interview:nth-child(3){
	background-image: url('../../_images/strength/0303_b.webp');
}

#strength03 .interview:nth-child(4){
	background-image: url('../../_images/strength/0303_c.webp');
}

#strength03 .interview:nth-child(5){
	background-image: url('../../_images/strength/0303_d.webp');
}




#strength03 .interview2:nth-child(2){
	background-image: url('../../_images/strength/0303_b.webp')!important;
}

#strength03 .interview2:nth-child(3){
	background-image: url('../../_images/strength/0303_c.webp')!important;
}




#strength03 p.cautionTxt{
	display:block;
	overflow:hidden;
	width: 765px;
	margin:1em auto 0;
}


@media (max-width: 768px) {

	#strength{
		display:block;
		overflow:hidden;
	}

	#strength h2{
		display:block;
		overflow:hidden;
		text-align:center;
		position:relative;
	}

	/*石鹸のここがすごい! 1*/
	#strength01{
		padding:7vw 0;
	}

	#strength01 > .imgFrame{
		display:block;
		overflow:hidden;
		width:100%;
		height:auto;
		position:relative;
		top:auto;
		left:auto;
		margin-top:7vw;
	}

	#strength01 > .innerFrame{
		margin-top:-7vw;
	}

	#strength01 > .innerFrame > p{
		display:block;
		overflow:hidden;
		padding:0 8vw;
		font-size:1.8rem;
		line-height:155%;
		color:#2e5b2e;
		position:relative;
		margin:-0 0;
	}

	#strength01 .innerFrame > p > sup{
		font-size:1.0rem;
		top:-0.75em;
	}
	#strength01 .innerFrame > p+p.cautionTxt{
		margin:1em 0 1em;
	}

	#strength01 > .innerFrame img:last-child{
		/*width:calc(100% - 6vw);*/
		margin:0 auto;
	}



	/*石鹸のここがすごい! 2*/
	#strength02{
		padding:7vw 0;
	}

	#strength02 p{
		margin-top:7vw;
	}



	/*石鹸のここがすごい! 3*/
	#strength03{
		padding:7vw 0;
	}

	.interview{
		display:block;
		overflow:hidden;
		width:88vw;
		height:auto;
		min-height:53vw;
		margin:6vw auto 0;
	}

	.interview > .interviewBox{
		display:block;
		position:relative;
		top:auto;
		left:auto;
		transform:unset;
		-webkit-transform:unset;
	}

	.interview > .interviewBox.posR{
		left:auto;
		right:auto;
	}

	.interviewBox h3{
		width:100%;
		height:48vw;
		font-size:1.7rem;
		line-height:175%;
		margin-bottom:0.5em;
	}

	.interviewBox h3 > span{
		display:inline-block;
		overflow:hidden;
		position:absolute;
		top:45%;
		left:1em;
		transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
	}

	.interview > .interviewBox.posR h3 > span{
		left:50%;
	}

	.interview > .interviewBox > p{
		font-size: 1.2rem;
		line-height: 155%;
		padding: 0 0;
	}

	.interview > .interviewBox > p > br{
		display:none;
	}

	#strength03 > .interview:nth-child(2){
		background-image: url('../../_images/strength/sp/0303_a.webp');
	}

	#strength03 > .interview:nth-child(3){
		background-image: url('../../_images/strength/sp/0303_b.webp');
	}

	#strength03 > .interview:nth-child(4){
		background-image: url('../../_images/strength/sp/0303_c.webp');
	}

	#strength03 > .interview:nth-child(5){
		background-image: url('../../_images/strength/sp/0303_d.webp');
	}


	#strength03 p.cautionTxt{
		width: 100%;
		padding:0 6vw;
	}

}


/* --------------------------------

 EYE CATCH（石鹸で洗った肌で、オンナの青春。）

-------------------------------- */
#catch01{
	display:block;
	overflow:hidden;
	width:100%;
	height:538px;
	background:#ffffff url('../../_images/catch01/catch01_bg.webp') no-repeat 50% 0;
	position:relative;
}

#catch01 img{
	position:absolute;
	top:50%;
	left:calc(50% + 165px);
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
}


@media (max-width: 768px) {

	#catch01{
		height:auto;
		background:unset;
	}

	#catch01 img{
		position:relative;
		top:auto;
		left:auto;
		transform:unset;
		-webkit-transform:unset;
	}

}



/* --------------------------------

 EYE CATCH（年連を重ねるごとにきれいな肌でいたいから、私は石鹸を選びます。）

-------------------------------- */
#catch02{
	display:block;
	overflow:hidden;
	text-align:center;
}


#catch02 img{
	margin: 60px 0 60px;
}


@media (max-width: 768px) {

	#catch02 img{
		width: 100%;
		height:auto;
		margin:7vw 0 3vw;
	}

}



/* --------------------------------

 EYE CATCH（年連を重ねるごとにきれいな肌でいたいから、私は石鹸を選びます。）

-------------------------------- */
#catch03{
	display:block;
	overflow:hidden;
	text-align:center;
}


#catch03 > p{
	display:block;
	overflow:hidden;
	width:100%;
	height:884px;
	background:url('../../_images/catch03/catch03_bg.webp') no-repeat 50% 0;
	position:relative;
}

#catch03 > p img{
	display:inline-block;
	overflow:hidden;
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
}

@media (max-width: 768px) {

	#catch03 > p{
		height:auto;
		background:unset;
	}

	#catch03 > p img{
		display:block;
		overflow:hidden;
		position:relative;
		top:auto;
		left:auto;
		transform:unset;
		-webkit-transform:unset;
		width:100%;
		height:auto;
	}

}


/* --------------------------------

 この肌なら、クレンジング＆ダブル洗浄不要
 素肌ストレスフリー

-------------------------------- */

#catch04{
	display:block;
	overflow:hidden;
	text-align:center;
	background-color:rgba(185,0,127,0.2);
	padding:30px 0;
}



@media (max-width: 768px) {

	#catch04{
		padding:3vw 0;
	}

	#catch04 img{
		width:70vw;
		height:auto;
		margin:0 auto;
	}

}



/* --------------------------------

 朝用/夜用 洗顔石鹸

-------------------------------- */
#exclusive{
	display:block;
	overflow:hidden;
}

#exclusive .innerFrame{
	width:900px;
}

/*タイトルタブ*/
ul.tabBtns {
	display: block;
	overflow: hidden;
	width: 900px;
	margin: 0 auto 15px;
	border-bottom: 1px solid #366a37;
	line-height: 100%;
	font-size: 0;
}

ul.tabBtns > li {
	display: block;
	overflow: hidden;
	padding:0 12px;
	width: 50%;
	float: left;
	text-align:left;
	position:relative;
}

ul.tabBtns > li:nth-child(1){
	text-align:right;
}

ul.tabBtns > li > span {
	display: inline-block;
	overflow: hidden;
	padding: 0.5em 1em;
	font-size: 24px;
	line-height: 125%;
	color: #000000;
	text-decoration: none;
	border-top: 1px solid #366a37;
	border-left: 1px solid #366a37;
	border-right: 1px solid #366a37;
	opacity: 0.75;
}

#exclusive01 ul.tabBtns > li:nth-child(1) > span,
#exclusive02 ul.tabBtns > li:nth-child(2) > span {
	color: #ffffff;
	background-color: #366a37;
	opacity: 1.0;
	pointer-events: none;
}


/*説明タイトル*/
.infoBox{
	display:block;
	overflow:hidden;
	margin-top:45px;
}

.infoBox > h4{
	display:block;
	overflow:hidden;
	position:relative;
}

.infoBox > .ttlSub{
	display:none;
}


.infoBox > p{
	display:block;
	overflow:hidden;
	padding:0.5em 0;
	font-size:35px;
	line-height:125%;
}

.infoBox > strong {
	display: block;
	overflow: hidden;
	margin:0 auto;
	padding: 0.5em 0.5em;
	width:490px;
	font-size: 24px;
	line-height: 125%;
	font-weight:300;
	border: 1px solid #bd1a21;
}


/*成分表*/
.materials{
	display:block;
	position:relative;
}


.materials > ul{
	display:block;
	overflow:visible;
	width:900px;
	margin:0 auto;
	position:relative;
}
.materials > ul > li{
	display:block;
	width:50%;
	padding:20px 20px;
	float:left;
	position:relative;
}

.materials > ul > li > p{
	display:block;
	overflow:hidden;
	font-size:16px;
	line-height:155%;
}
.materials > ul > li > p > span{
	font-size:12px;
	line-height:155%;
}

.materials > p{
	display:block;
	overflow:hidden;
	clear:both;
	width:760px;
	margin:0 auto 0;
	padding-top:20px;
	text-align:left;
	font-size:16px;
	line-height:175%;
}

.materials > p.endTxt > sup{
	font-size:10px;
	top:-0.75em;
}

/*朝用洗顔石鹸*/
#exclusive01{
	display:block;
	overflow:hidden;
	text-align:center;
	position:relative;
	margin-top:75px;
}


#exclusive01 > .materials h2{
	display:block;
	height:452px;
	margin:0 auto;
	background:url('../../_images/exclusive/exclusive01_bg.webp') no-repeat 50% 0;
	position:relative;
}

#exclusive01 > .materials h2 img{
	position:absolute;
	bottom:100px;
	right:calc(50% + 122px);
}


/*夜専用石鹸*/
#exclusive02{
	display:block;
	overflow:hidden;
	text-align:center;
	position:relative;
	margin:120px 0 60px;
}

#exclusive02 > .materials h2{
	display:block;
	height:688px;
	margin:0 auto;
	background:url('../../_images/exclusive/exclusive02_bg.webp') no-repeat 50% 0;
	position:relative;
}

#exclusive02 > .materials h2 img{
	position:absolute;
	bottom:165px;
	left:calc(50% + 160px);
}


#exclusive02 .materials > ul::before{
	content:"";
	display:inline-block;
	overflow:hidden;
	width:444px;
	height:403px;
	background:url('../../_images/exclusive/exclusive02_a.webp') no-repeat 0 0;
	position:absolute;
	top:0;
	left:-55px;
}


@media (max-width: 768px) {


	#exclusive .innerFrame{
		width:100%;
		padding:4vw 4vw;
	}


	/*タイトルタブ*/
	ul.tabBtns {
		width: calc(100% - 4vw);
		margin: 0 auto;
	}

	ul.tabBtns > li > span {
		margin: 0;
		font-size: 1.4rem;
	}


	/*説明タイトル*/
	.infoBox{
		margin-top:1em;
	}

	.infoBox > h4{
		width:100%;
		margin-bottom: 3vw;
	}

	.infoBox > h4 img{
		width:100%;
		height:auto;
	}

	.infoBox > .ttlSub{
		display:block;
	}

	.infoBox > .ttlSub > span{
		display:block;
		text-align:center;
		font-size:1.6rem;
		line-height:155%;
		letter-spacing:0.1em;
		margin-bottom:1em;
	}


	.infoBox > p{
		font-size:2.4rem;
	}

	.infoBox > strong {
		width:100%;
		font-size: 1.6rem;
	}


	/*成分表*/
	.materials{
		display:block;
		position:relative;
	}


	.materials > ul{
		overflow:hidden;
		width:100%;
		margin:0 auto 4vw;
	}

	.materials > ul > li{
		padding:0 0;
	}

	.materials > ul > li > p{
		font-size:1.2rem;
		margin-top:0;
	}
	.materials > ul > li > p > span{
		font-size:1.0rem;
	}

	.materials > p{
		width:100%;
		padding:0 6vw;
		font-size:1.2rem;
		padding-top:1em;
	}

	.materials > p.endTxt > sup{
		font-size:1.0rem;
		top:-0.5em;
	}

	/*朝用洗顔石鹸*/
	#exclusive01{
		margin:0 0 6vw;
	}

	#exclusive01 > .materials h2{
		height:auto;
		background:unset;
		margin:3vw auto 0;
	}

	#exclusive01 > .materials h2 img{
		position:relative;
		bottom:auto;
		right:auto;
	}


	/*夜専用石鹸*/
	#exclusive02{
		margin:0 0 6vw;
	}

	#exclusive02 > .materials h2{
		height:auto;
		background:unset;
		margin:3vw auto 0;
	}

	#exclusive02 > .materials h2 img{
		position:relative;
		bottom:auto;
		left:auto;
	}

	#exclusive02 .materials > ul{
		margin-top:12vw;
	}

	#exclusive02 .materials > ul::before{
		overflow:visible;
		width:75vw;
		height:75vw;
		top:-12vw;
		left:-25vw;
		background-size:contain;
	}


	#exclusive02 .materials > ul > li:nth-child(1){
		padding-top:0;
	}


}


/* --------------------------------

 未来の肌のための究極の2ステップ

-------------------------------- */
#twostep{
	display:block;
	overflow:hidden;
}

/*セクションカバー*/
#twostep > .coverBox{
	display:block;
	overflow:hidden;
	width:100%;
	height:835px;
	background:#ffffff url('../../_images/twostep/sec11_bg01.webp') no-repeat 50% 0;
	background-size:100% 835px;
	position:relative;
}

#twostep > .coverBox > .innerFrame{
	overflow:visible;
	width:559px;
}

#twostep > .coverBox > .innerFrame > h2{
	display:inline-block;
	overflow:hidden;
	position:absolute;
	top:105px;
	right:50%;
}

#twostep > .coverBox > .innerFrame > img:nth-child(3){
	position:absolute;
	top:520px;
	left:calc(50% - 250px);
}

#twostep > .coverBox > .innerFrame > img:nth-child(4){
	position:absolute;
	bottom:75px;
	left:20px;
}

#twostep > .coverBox > .innerFrame > img:nth-child(5){
	position:absolute;
	bottom:88px;
	right:-10px;
}

#twostep > .coverBox > p.cautionTxt{
	display:block;
	overflow:hidden;
	width: 100%;
	text-align: center;
	position:absolute;
	bottom:10px;
	left: 0;
}



/*基本データ*/
.dataText > h3{
	display:block;
	overflow:hidden;
	margin-bottom:1em;
	font-size: 26px;
	line-height: 175%;
	margin-bottom: 1em;
}

.dataText > h3 sup{
	font-size:12px;
	top:-1em;
}
.dataText > p{
	display:block;
	overflow:hidden;
	font-size:16px;
	line-height:200%;
}

.dataText > p.cautionTxt{
	margin-top:1em;
}


/*特徴*/
.soapInfo{
	display:block;
	overflow:hidden;
	width:745px;
	margin:30px auto 0;
	text-align:center;
}

.soapInfo h3{
	display:block;
	overflow:hidden;
	margin-bottom:30px;
}

.soapInfo h3 img{
	width:100%;
	height:auto;
}

#step01a p.cautionTxt,
#step01b p.cautionTxt{
	display:block;
	overflow:hidden;
	width:745px;
	text-align:left;
	margin:1em auto 0;
}


.soapInfo > .borderBox > .innerFrame{
	display:none;
}



/*成分*/
.soapMaterials{
	display:block;
	overflow:hidden;
	width:900px;
	text-align: center;
	margin:55px auto 0;
}

.soapMaterials > h3{
	display:block;
	overflow:hidden;
	text-align:center;
	font-size: 32px;
	line-height:175%;
	margin-bottom:65px;
}

.soapMaterials > p{
	display:block;
	overflow:hidden;
	font-size: 28px;
	line-height:175%;
	margin:1em 0;
}

.soapMaterials > ul{
	display:block;
	overflow:hidden;
}

.soapMaterials > ul > li{
	display:block;
	overflow:hidden;
	width:232px;
	text-align:left;
	float:left;
}

.soapMaterials > ul > li:last-child{
	width:203px;
}

.soapMaterials > ul > li > p{
	display:block;
	overflow:hidden;
	width:203px;
	margin-top:0.5em;
	font-size:16px;
	line-height:125%;
	text-align:left;
}

.soapMaterials > ul > li > p > span{
	font-size:14px;
}

#twostep h2{
	display:block;
	overflow:hidden;
	text-align:center;
	margin-bottom:35px;
}

#twostep .itemDiteil{
	display:block;
	overflow:hidden;
	position:relative;
	width:1000px;
	min-height:940px;
	margin:0 auto;
}

#twostep .itemDiteil > .imgBg{
	display:inline-block;
	overflow:hidden;
	position:absolute;
	top:0;
	right:calc(50% - 260px);
}
#twostep .itemDiteil > .imgBg img{
	width:100%;
	height:auto;
	max-width:715px;
}

#twostep .itemDiteil > .imgFrame{
	display:inline-block;
	overflow:hidden;
	position:absolute;
	bottom:0;
	right:0;
}

#twostep .itemDiteil > .imgFrame img{
	width:100%;
	height:auto;
}


#twostep .itemDiteil > .dataText{
	display:inline-block;
	overflow:hidden;
	width:340px;
	position:absolute;
	bottom:50px;
	right:50%;
}




/*Step 1 洗顔を極める、朝のスキンケアソープ*/
#step01a{
	display:block;
	overflow:hidden;
	padding:30px 0 100px;
}
#step01a .itemDiteil > .imgFrame{
	width:345px;
}


/*Step 1 洗顔を極める、夜のスキンケアソープ*/
#step01b{
	display:block;
	overflow:hidden;
	padding:30px 0 100px;
	background-color:#e5eaf0;
}
#step01b .itemDiteil > .imgFrame{
	width:469px;
}

#step01b .dataText > p br{
	display:none;
}


/*Step2 トリプルエッセンス美容液*/
#step02{
	display:block;
	overflow:hidden;
	width: 100%;
	background:url('../../_images/twostep/step02/sec1103_bg.webp') no-repeat 50% 0;
}

#step02 > h2{
	display:block;
	overflow:hidden;
	width:900px;
	margin:90px auto 0;
	padding-left: 35px;
	text-align:left;
}

#step02 > h2+p.cautionTxt{
	display: block;
	overflow: hidden;
	width: 800px;
	margin: 1em auto 0;
	text-align:left;
}

#step02 > h3{
	display:block;
	overflow:hidden;
	margin-top:25px;
	text-align:center;
}


@media (max-width: 768px) {

	#twostep > .coverBox{
		width:100%;
		height:auto;
		background:unset;
		background-color: #eaeced;
	}

	#twostep > .coverBox > .innerFrame{
		width:100%;
	}

	#twostep > .coverBox > .innerFrame > h2{
		display:block;
		position:relative;
		top:auto;
		right:auto;
	}

	#twostep > .coverBox > .innerFrame > img{
	   display:none;
	}


	#twostep > .coverBox > p.cautionTxt{
		padding:0 6vw 1em;
		text-align: left;
		position:relative;
		bottom:auto;
		left:auto;
	}



	/*基本データ*/
	.dataText > h3{
		display:none;
	}

	.dataText > p{
		display:block;
		overflow:hidden;
		font-size:1.2rem;
		line-height:155%;
	}

	.dataText > p.cautionTxt{
		margin-top:1em;
	}


	/*特徴*/
	.soapInfo{
		width:calc(100% - 12vw);
		margin:3vw auto 0;
		border: 2px solid #000000;
		padding: 2px 2px;
	}

	.soapInfo .borderBox {
		display: block;
		overflow: hidden;
		width:100%;
		border:1px solid #000000;
		padding:3vw 3vw;
	}

	.soapInfo h3{
		margin-bottom:3vw;
		padding:0 3vw;
	}

	#lpbody .soapInfo h3 > img{
		width:53vw;
		height:auto;
	}

	#step01a p.cautionTxt,
	#step01b p.cautionTxt{
		width:100%;
	}

	#step01a p.cautionTxt,
	#step01b p.cautionTxt{
		width:100%;
	}

	.soapInfo + p.cautionTxt{
		padding:0 6vw;
	}

	.soapInfo > .borderBox > .innerFrame{
		display:block;
	}

	.soapInfo > .borderBox > .innerFrame > p {
		display: block;
		overflow: hidden;
		font-size: 1.8rem;
		line-height: 155%;
		margin-bottom: 0.5em;
	}

	.soapInfo > .borderBox > .innerFrame > p > sup{
		font-size: 1.0rem;
		top:-0.75em;
	}

	.soapInfo > .borderBox > .innerFrame > ul {
		display: block;
		overflow: hidden;
		padding: 0 4vw;
	}

	.soapInfo > .borderBox > .innerFrame > ul > li {
		display: block;
		overflow: hidden;
		padding: 0.5em 0;
	}

	.soapInfo > .borderBox > .innerFrame > ul > li > span {
		display: block;
		overflow: hidden;
		padding: 0.75em 0;
		font-size: 1.6rem;
		line-height: 125%;
		color: #ffffff;
	}

	.soapInfo > .borderBox > .innerFrame > ul > li > span > sup {
		font-size: 1.0rem;
		top: -1em;
	}

	.soapInfo .borderBox + img{
		display:none!important;
	}


	/*成分*/
	.soapMaterials{
		width:100%;
		padding:0 6vw;
		margin:6vw auto 0;
	}

	.soapMaterials > h3{
		font-size: 2.0rem;
		margin-bottom:1em;
		text-align:center;
	}

	.soapMaterials > p{
		font-size: 1.6rem;
		line-height:155%;
		margin:3vw 0;
	}


	.soapMaterials > ul > li{
		width:50%;
	}

	.soapMaterials > ul > li:last-child{
		width:50%;
	}

	.soapMaterials > ul > li > p{
		width:100%;
		font-size:1.4rem;
		min-height:4em;
		margin:0.5em 0 1em;
	}

	.soapMaterials > ul > li > p > span{
		font-size:1.2rem;
	}

	.soapMaterials > ul > li:nth-child(odd) {
		padding-right: 2vw;
	}

	.soapMaterials > ul > li:nth-child(even) {
		padding-left: 2vw;
	}


	#twostep h2{
		display:block;
		overflow:hidden;
		text-align:center;
		margin-bottom:3vw;
	}

	#twostep .itemDiteil{
		width:100%;
		height:auto;
		min-height:auto;
	}

	#twostep .itemDiteil > .imgBg{
		display:block;
		position:relative;
		top:auto;
		right:auto;
	}

	#twostep .itemDiteil > .imgFrame{
		margin-top: -30vw;
	}
	#twostep .itemDiteil > .imgFrame img{
		max-width:100%;
	}

	#twostep .itemDiteil > .imgFrame{
		display:block;
		overflow:hidden;
		width:100%;
		position:relative;
		bottom:auto;
		right:auto;
	}

	#twostep .itemDiteil > .dataText{
		display:block;
		width:100%;
		padding:0 6vw;
		position:relative;
		bottom:auto;
		right:auto;
	}


	/*Step 1 朝のスキンケアソープ*/
	#step01{
		padding:3vw 0 9vw;
	}


	/*Step 1 洗顔を極める、朝のスキンケアソープ*/
	#step01a{
		padding:6vw 0 6vw;
	}

	#step01a .borderBox > .innerFrame > ul > li > span {
		background-color: #76c9da;
	}


	/*Step 1 夜のスキンケアソープ*/
	#step01b{
		padding:0 0 6vw;
		background-color:#ffffff;
	}

	#step01b h2{
		display:none;
	}

	#step01b .borderBox > .innerFrame > ul > li > span {
		background-color: #2e5b2e;
	}


	/*Step 2 トリプルエッセンス美容液*/
	#step02{
		background:url('../../_images/twostep/step02/sp/sec1103_bg.webp') no-repeat 50% 0;
		background-size:contain;
	}

	#step02 > h2{
		width:100%;
		margin:7.8vw auto 0;
		padding-left: 0;
	}

	#step02 > h2 img{
		width:100%;
		height:auto;
	}

	#step02 > h2+p.cautionTxt{
		width: 100%;
		margin: 6vw auto 0;
		padding:0 6vw;
	}

	#step02 > h3{
		display:none;
	}

}



/* --------------------------------

 ロシオン エクラ ニュー エラ

-------------------------------- */
.new_era_ttl{
	background: #aa7612;
	padding:20px 0;
	color:#FFF;
	line-height:40px!important;
	text-align: center;
}

.new_era_ttl .bigtxt{
	font-size:35px;
	letter-spacing:1px;
	padding-bottom:5px;
}

.bigtxt .ls15{
	letter-spacing: -15px;
}

.new_era_ttl sup{
	font-size: 0.4em;
	top:-1.5em;
}

#new_era{
	display:block;
	overflow:hidden;
	width:900px;
	margin:0 auto 0;
}

#new_era > .itemDiteil{
	display:block;
	overflow:visible;
	position:relative;
	width:810px;
	min-height:565px;
	margin:0 auto;
	z-index: 110;
}

#new_era > .itemDiteil .imgFrame{
	display:inline-block;
	overflow:hidden;
	width: 170px;
	height:655px;
	position:absolute;
	top:0;
	right:135px;
}

#new_era .itemDiteil > .dataText{
	display:inline-block;
	overflow:hidden;
	width:auto;
	position:relative;
	bottom:auto;
	right:auto;
}

#new_era > .itemDiteil > .dataText > h3{
	margin:40px 0;
}


.keyPoint{
	display:block;
	overflow:hidden;
	width:810px;
	margin:0 auto;
	text-align:center;
}


.keyPoint > .catchImg{
	display:block;
	width:810px;
	height:418px;
	background:url('../../_images/twostep/step02/sec1103_b01.webp');
	position:relative;
	margin-bottom: 150px;
}

.keyPoint > .catchImg2{
	margin-bottom: 30px!important;
}


.keyPoint > .catchImg > picture img{
	position:absolute;
	top:50%;
	left:110px;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
}

.keyPoint > .catchImg > img:last-child{
	position:absolute;
	right:90px;
	bottom:-130px;
}


.keyPoint h4{
	display: block;
	overflow: hidden;
	width: 660px;
	margin: 0 auto;
	text-align: left;
}

.keyPoint h5{
	display: block;
	overflow: hidden;
	width: 660px;
	margin: 1em auto;
	font-size: 28px;
	font-weight:300;
	line-height: 155%;
	text-align: left;
}

.keyPoint h5 sup{
	font-size:12px;
	top:-1.0em;
}


#new02,
#new03{
	margin-top: 100px;
}

.new03{
	margin-top:0!important;
}

#new02 h5,
#new03 h5{
	text-align: center;
}

#new01{
	display: block;
	overflow: hidden;
}

#new01 p{
	display: block;
	/*overflow: hidden;*/
	width: 660px;
	margin: 0 auto;
	font-size:16px;
	line-height:175%;
	text-align: left;
	letter-spacing: 0.05em;
	/*white-space: nowrap;*/
}
#new01 p.cautionTxt{
	margin-top: 1em;
}
#new01 p.cautionTxt+p.cautionTxt{
	margin-top:0;
}

#new01 p sup{
	font-size:10px;
	top:-1em;
}

#new01 > .imgFrame{
	display:block;
	overflow:hidden;
}

#new01 > .imgFrame img{
	width:100%;
	height:auto;
}


ul.wcolum{
	display:block;
	overflow:hidden;
}

ul.wcolum > li{
	display:block;
	overflow:hidden;
	width:50%;
	float:left;
}

ul.wcolum > li > h4,
ul.wcolum > li > p{
	display:block;
	overflow:hidden;
	width:326px;
	margin:0 auto;
	text-align:left;
}
ul.wcolum> li > h4{
	font-size:24px;
	line-height:155%;
	padding:0.5em 0;
}
ul.wcolum > li > p{
	font-size:16px;
	line-height:155%;
}


#new03 p{
	display: block;
	overflow: hidden;
	width:894px;
	margin: 0 auto 2em;
	text-align: left;
}

#new03 p > span{
	display: block;
	overflow: hidden;
	font-size: 21px;
	line-height: 125%;
	margin:0.5em 0;
}


#new_era > .soapInfo{
	width:793px;
	margin:100px auto 0;
}


@media (max-width: 768px) {
	
	.new_era_ttl{
	padding:25px 0;
	font-size:28px;
	line-height: 40px;
	}

	.new_era_ttl sup{
	top:-1em;
	}
	
	.new_era_ttl .cautionTxt{
	font-size:1.2rem!important;
	}
	
	.catch_d2{
		margin:0!important;
	}
	
	#new_era{
		width:100%;
	}

	#new_era > .itemDiteil{
		overflow:hidden;
		width:100%;
		margin:7vw 0 0;
		min-height:auto;
	}

	#new_era > .itemDiteil .imgFrame{
		display:block;
		width: 100%;
		height:auto;
		position:relative;
		bottom:auto;
		right:auto;
		margin-top:0;
	}

	#new_era > .itemDiteil .imgFrame img{
		width:100%;
		height:auto;
	}

	#new_era .itemDiteil > .dataText{
		display:block;
		width:100%;
		position:relative;
		bottom:auto;
		right:auto;
	}

	#new_era .itemDiteil > .dataText > img:nth-child(1){
		display:none;
	}

	#new_era .itemDiteil > .dataText > p{
		margin:6vw 0 6vw;
		padding:0 6vw;
	}

	#new_era .itemDiteil > .dataText > p > br{
		display:none;
	}

	.keyPoint{
		width:100%;
	}

	.keyPoint > .catchImg{
		width:100%;
		height:auto;
		background:unset;
		margin-bottom: 6vw;
	}


	.keyPoint > .catchImg > picture img{
		position:relative;
		top:auto;
		left:auto;
		transform: unset;
		-webkit-transform:unset;
		width:100%;
		height:auto;
	}

	.keyPoint > .catchImg > img:last-child{
		display:none!important;
	}

	.keyPoint h4{
		width: 100%;
		margin: 0 auto;
		text-align: center;
	}

	.keyPoint h4 img{
		width:100%;
		height:auto;
	}

	.keyPoint h5{
		width: 100%;
		padding: 0 2vw;
		font-size: 2.1rem;
		line-height: 125%;
		font-weight: normal;
		text-align:center;
		margin:1em 0;
	}

	.keyPoint h5 sup{
		font-size:1.0rem;
		top:-1.0em;
	}

	#new02,
	#new03{
		margin-top: 6vw;
	}

	#new02 h5,
	#new03 h5{
		text-align: center;
	}

	#new01{
		/**/
	}

	#new01 p{
		width: 100%;
		padding:0 6vw;
		font-size: 1.4rem;
		letter-spacing:normal;
		white-space:initial;
	}

	#new01 p.cautionTxt{
		text-indent:-1em;
		padding-left:calc(1em + 6vw);
	}

	ul.wcolum{
		padding: 0 3vw;
		margin-bottom: 5vw;
	}

	ul.wcolum > li{
		padding: 0 3vw;
	}

	ul.wcolum > li > h4,
	ul.wcolum > li > p{
		width:100%;
	}

	ul.wcolum> li > h4{
		font-size:1.4rem;
		font-weight:700;
	}
	ul.wcolum > li > p{
		font-size:1.2rem;
	}

	#new03 p{
		width:100%;
		padding:0 4vw;
		margin: 0 auto;
	}

	#new03 p > span{
		font-size: 1.6rem;
		margin: 0.5em 0 4vw;
	}


	#new_era > .soapInfo{
		width:100%;
		margin:6vw auto 0;
	}
}


/* --------------------------------

 天然成分100%の力を1本に凝縮

-------------------------------- */
#components{
	display: block;
	overflow:hidden;
	margin-bottom:100px;
}

.components{
	margin-bottom:30px!important;
}

#components > .innerFrame{
	width:900px;
}

#components h3{
	display: block;
	overflow: hidden;
	text-align: center;
}

#components ul{
	display: block;
	overflow: hidden;
	margin-top: 50px;
}

#components ul > li{
	display:block;
	overflow: hidden;
	width: 25%;
	padding:0 0 14px;
	float: left;
}

#components ul > li > p{
	font-size: 14px;
	line-height: 125%;
	margin-top:0.5em;
}


@media (max-width: 768px) {

	#components{
		margin-bottom:6vw;
	}

	#components > .innerFrame{
		width:100%;
	}

	#components h3 img{
		width:50vw;
		height:auto;
		margin:0 auto;
	}

	#components ul{
		margin: 0 auto;
		width:calc(100% - 8vw);
	}

	#components ul > li{
		width:50%;
		padding:0;
	}

	#components ul > li:nth-child(odd) {
		padding-right: 2vw;
	}

	#components ul > li:nth-child(even) {
		padding-left: 2vw;
	}

	#components ul > li > p{
		margin:0.5em 0 1em;
		font-size: 1.2rem;
	}

}



/* --------------------------------

 フランスのコスメ大賞で大賞を受賞しました。

-------------------------------- */
#getprize{
	display:block;
	overflow:hidden;
	background-color:#fffbf3;
	padding-bottom:25px;
}

#getprize > .coverBox{
	display:block;
	overflow:hidden;
	width:100%;
	height:565px;
	padding-top:40px;
	text-align: center;
	background:url('../../_images/getprize/bg.webp') no-repeat 50% 50%;
	background-size:cover;
	position:relative;
}

.getprize_coverBox2{
	height:450px!important;
}

#getprize > h2{
	display:block;
	overflow:hidden;
	text-align:center;
	position:relative;
	margin-top:-75px;
}

#getprize > h3{
	display:block;
	overflow:hidden;
	text-align:center;
	position:relative;
	font-size:26px;
	line-height:175%;
	margin:40px 0;
}

#getprize > h3 sup{
	font-size:14px;
	top:-1.0em;
}

#getprize > .innerFrame{
	width:740px;
}

ul#commentList{
	display:block;
	overflow:hidden;
}

ul#commentList > li{
	display:block;
	overflow:hidden;
	width:50%;
	padding-bottom:30px;
	float:left;
}

ul#commentList > li > img{
	position:relative;
	vertical-align:middle;
	margin-right:20px;
	float:left;
}

ul#commentList > li > .cmtTxt{
	display:inline-block;
	overflow:hidden;
	position:relative;
}

ul#commentList > li > .cmtTxt > h4{
	display:block;
	overflow:hidden;
	font-size:21px;
	line-height:125%;
	margin-bottom:0.25em;
}

ul#commentList > li > .cmtTxt > ul{
	display:block;
	overflow:hidden;
	list-style-type: disc;
	padding-left: 1.5em;
	font-size:16px;
	line-height:155%;
}


@media (max-width: 768px) {

	#getprize{
		padding-bottom:25px;
	}
	
	.getprize2{
		padding-bottom:0!important;
	}

	#getprize > .coverBox{
		height:auto;
		padding-top:0;
		background:unset;
	}
	
	.getprize_coverBox2{
		height:auto!important;
	}

	#getprize > .coverBo img{
		width:100%;
		height:auto;
	}

	#getprize > h2{
		margin:0 0 6vw;
		padding:0 3vw;
	}

	#getprize > h3{
		font-size:1.4rem;
		line-height:155%;
		margin:3vw 0;
		padding:0 3vw;
	}

	#getprize > h3 sup{
		font-size:1.0rem;
	}

	#getprize > .innerFrame{
		width:100%;
		padding:0 6vw;
	}

	ul#commentList{
		display:block;
		overflow:hidden;
	}

	ul#commentList > li{
		width:100%;
		padding-bottom:1em;
	}

	ul#commentList > li > img{
		width:15vw;
		height:auto;
		margin-right:3vw;
	}

	ul#commentList > li > .cmtTxt{
		/**/
	}

	ul#commentList > li > .cmtTxt > h4{
		font-size:1.4rem;
		margin-bottom:0.25em;
	}


	ul#commentList > li > .cmtTxt > ul{
		font-size:1.2rem;
	}

	ul#commentList > li > .cmtTxt > ul > li{
		list-style-type: inherit;
	}

}




/* --------------------------------

 去年より今年、今日より明日。どんどん私の肌が好きになる。

-------------------------------- */
#about{
	display:block;
	overflow:hidden;
}

#about > .coverBox{
	display:block;
	overflow:hidden;
	width:100%;
	height:573px;
	padding-top:40px;
	text-align: center;
	background:url('../../_images/about/sec13_bg.webp') no-repeat 50% 0;
	position:relative;
}

#about > .coverBox img{
	position:absolute;
	bottom:70px;
	right:calc(50% - 65px);
}


#about h2{
	display:inline-block;
	overflow:hidden;
}

#about h2 > span{
	display:none;
}

#about p{
	display:inline-block;
	overflow:hidden;
}


/*ところでP.G.C.D.ってどんなスキンケア？*/
#about01{
	display:block;
	overflow:hidden;
	width:900px;
	margin:50px auto 0;
}

#about01 > h2{
	float:right;
}

#about01 > p{
	margin-top:85px;
}

#about01 > p.cautionTxt{
	margin-top: 0.5em;
}


/*たった2ステップで本当にキレイになれるかしら。*/
#about02{
	display:block;
	overflow:hidden;
	width:900px;
	margin:75px auto 0;
}

#about02 > h2{
	float:left;
	margin-left:90px;
}

#about02 > p{
	margin-top:50px;
	float:right;
}



@media (max-width: 768px) {

	#about{
		margin:3vw 0 0;
	}

	#about > .coverBox{
		height:auto;
		padding:0 2vw;
		background:unset;
	}

	#about > .coverBox img{
		position:relative;
		bottom:auto;
		right:auto;
		width:100%;
		height:auto;
	}

	#about h2{
		display:block;
	}

	#about h2 > img{
		display:none;
	}

	#about h2 > span{
		display: block;
		overflow: hidden;
		font-size: 2.4rem;
		line-height: 155%;
		font-weight: normal;
		text-align: center;
		padding: 1em 0;
	}

	#about p{
		display:block;
		padding:0 4vw;
	}

	#about p img{
		width:100%;
		height:auto;
	}



	/*ところでP.G.C.D.ってどんなスキンケア？*/
	#about01{
		width:100%;
		margin:0 0;
	}

	#about01 > h2{
		float:none;
	}

	#about01 > p{
		margin-top:0;
		float:none;
	}


	/*たった2ステップで本当にキレイになれるかしら。*/
	#about02{
		width:100%;
		margin:0 0;
	}

	#about02 > h2{
		float:none;
		margin-left:0;
	}
	#about02 > p{
		margin-top:0;
		float:none;
	}


}


/* --------------------------------

　P.G.C.Dって高いの？安いの？

-------------------------------- */
#price{
	display:block;
	overflow:hidden;
	width:940px;
	margin:65px auto 0;
	position:relative;
	padding-bottom:20px;
	z-index:120;
}

#price::before{
	content:"";
	display:block;
	overflow:hidden;
	width:100%;
	height: 477px;
	background-color:#fffbf3;
	position:absolute;
	bottom:0;
	left:0;
}

#price > .innerFrame{
	width:900px;
	margin:0 auto 0;
	border:1px solid #231815;
}

#price h2{
	display:block;
	overflow:hidden;
	margin:55px 0;
	text-align:center;
}

#price h2 > span{
	display:none;
}

#price .columBox{
	display:block;
	overflow:hidden;
	padding:65px 80px;
}

#price .columBox > img{
	float:right;
}


#price .columBox > .columInner{
	display:inline-block;
	overflow:hidden;
	width:300px;
}

#price .columBox > .columInner > h3{
	display:block;
	overflow:hidden;
	font-size:24px;
	line-height:200%;
	margin-bottom:1em;
}

#price .columBox > .columInner > p{
	display:block;
	overflow:hidden;
	font-size:16px;
	line-height:200%;
	text-align: justify;
}


@media (max-width: 768px) {

	#price{
		width:100%;
		margin:0 auto 0;
		padding-bottom:3vw;
	}

	#price::before{
		display:none;
	}

	#price > .innerFrame{
		width:100%;
		border:none;
	}

	#price h2{
		margin:6vw 0 6vw;
	}

	#price h2 img{
		display:none;
	}

	#price h2 > span{
		display:block;
		font-size:2.4rem;
		line-height:155%;
		font-weight:300;
	}


	#price .columBox{
		padding: 5vw 4vw 5vw;
		background-color:#fffbf3;
	}

	#price .columBox > img{
		float:right;
	}


	#price .columBox > .columInner{
		display:block;
		width:100%;
	}

	#price .columBox > .columInner > h3{
		font-size:1.6rem;
		line-height:175%;
		margin-bottom:1em;
	}
	#price .columBox > .columInner > h3 > br:nth-child(1){
		display:none;
	}

	#price .columBox > .columInner > p{
		font-size:1.4rem;
		line-height:155%;
		padding: 0 0;
		margin-bottom:3vw;
	}


}


/* --------------------------------

 P.G.C.Dの結論

-------------------------------- */
#conclusion{
	display:block;
	overflow:hidden;
	background-color:#edf0f4;
	padding-top:210px;
	position:relative;
	margin-top:-120px;
}

.conclusion2{
	padding-top:50px!important;
	margin-top:0!important;
}

#conclusion > .innerFrame{
	width:840px;
}


#conclusion > .innerFrame > h2{
	display:block;
	overflow:hidden;
	text-align:center;
}

#conclusion > .innerFrame > h2 > span{
	display:none;
}

#conclusion > .innerFrame > h3{
	display:block;
	overflow:hidden;
	text-align:center;
	font-size:28px;
	line-height:175%;
	margin:45px 0 90px;
}


#conclusion .columBox{
	display:block;
	/*overflow:hidden;*/
	width:840px;
	margin:0 auto ;
}


#conclusion00 > .columInner{
	display:inline-block;
	overflow:hidden;
	width:400px;
	margin-top:55px;
}

#conclusion00  > .columInner > p{
	display:block;
	overflow:hidden;
	font-size:16px;
	line-height:200%;
	text-align: justify;
}

#conclusion00  > .columInner > p sup{
	font-size: 10px;
	top: -0.5em;
}

#conclusion00 > .columInner > p.cautionTxt{
	margin-top:2em;
}


#conclusion00 > img{
	float:right;
}



/*手間もお金もシンプルに！*/
#conclusion01{
	display:block;
	overflow:hidden;
	background-color:#edf0f4;
	position:relative;
	text-align:center;
}

#conclusion01 > h2{
	display:block;
	overflow:hidden;
	font-size:26px;
	line-height:175%;
	margin:75px 0 60px;
}


/*美容の時間とお金を最小化。*/
#conclusion02{
	display:block;
	overflow:hidden;
	background:#edf0f4 url('../../_images/conclusion/sec1306_c.webp') no-repeat 50% bottom;
	position:relative;
}

.conclusion02_2{
	background:none!important;
	padding:20px 0 60px!important;
}

#conclusion02 > h2{
	display:block;
	overflow:hidden;
	font-size:28px;
	line-height:175%;
	text-align:center;
	margin-top:50px;
}

#conclusion02 > .innerFrame{
	width:100%;
}

#conclusion02 > .innerFrame > h3{
	display:none;
}

#conclusion02 .columBox{
	display:block;
	position:relative;
	z-index:170;
}

#conclusion02 .columInner{
	display:inline-block;
	overflow:hidden;
	width: 350px;
}

#conclusion02 .columInner > h4{
	display:block;
	overflow:hidden;
	font-size:28px;
	line-height:175%;
	margin-bottom:1em;
}

#conclusion02 .columInner > p{
	display:block;
	overflow:hidden;
	font-size:16px;
	line-height:175%;
}


#columA{
	height:540px;
}

#columA::before{
	content:"";
	display:inline-block;
	overflow:hidden;
	width:459px;
	height:638px;
	background:url('../../_images/conclusion/sec1306_a.webp') no-repeat 0 0;
	position:absolute;
	top:0;
	right:calc(50% - 30px);
}
#columA.columBox > .columInner{
	float:right;
	margin-top: 115px;
	width: calc(100% - 460px);
}


#columB{
	height:490px;
}

#columB::before{
	content:"";
	display:inline-block;
	overflow:hidden;
	width:277px;
	height:416px;
	background:url('../../_images/conclusion/sec1306_b.webp') no-repeat 50% 0;
	position:absolute;
	top:0;
	right:0;
}
#columB > .columInner{
	margin-top:85px;
}

#columC{
	height:515px;
}

#columC > .columInner{
	float:right;
	margin-top: 115px;
}


@media (max-width: 768px) {

	#conclusion{
		background-color:#ffffff;
		padding-top:6vw;
		margin-top:0;
	}
	
	.conclusion02_2{
	padding:20px 0!important;
}

	#conclusion > .innerFrame{
		width:100%;
	}

	#conclusion > .innerFrame > h2{
	}

	#conclusion > .innerFrame > h2 img{
		display:none;
	}

	#conclusion > .innerFrame > h2 > span{
		display:block;
		position:relative;
		font-size:2.2rem;
		font-weight:300;
		color:#025F33;
		line-height:155%;
	}
	#conclusion > .innerFrame > h2 > span::after{
		display:block;
		overflow:hidden;
		content:"";
		width: 3.5em;
		margin:0.5em auto 0;
		border-top:1px solid #231815;
	}




	#conclusion > .innerFrame > h3{
		font-size:1.8rem;
		margin:1em 0;
	}

	#conclusion .columBox{
		width:100%;
	}


	#conclusion00{
		width:100%;
		margin:0 auto ;
	}

	#conclusion00 > img{
		display:block;
		margin:6vw auto 3vw;
		width:calc(100% - 18vw);
		height:auto;
		float:none;
	}

	#conclusion00 > .columInner{
		display:block;
		width:100%;
		margin-top:0;
		padding:0 3vw;
	}

	#conclusion00 > .columInner > p{
		font-size:1.4rem;
		line-height:175%;
		padding:0 3vw;
	}

	#conclusion00 > .columInner > p.cautionTxt{
		margin-top:0.25em;
	}


	/*手間もお金もシンプルに！*/
	#conclusion01{
		background-color:#ffffff;
	}

	#conclusion01 > h2{
		font-size:2.0rem;
		line-height:155%;
		margin:1em 0;
	}



	/*美容の時間とお金を最小化。*/
	#conclusion02{
		background:unset;
	}

	#conclusion02 > h2{
		font-size:2.0rem;
		line-height:155%;
		margin:6vw 0;
	}

	#conclusion02 > .innerFrame{
		width:100%;
		padding: 9vw 0 9vw;
		background:#edf0f4 url('../../_images/conclusion/sp/conclusion02_01.webp') no-repeat 0 0;
		background-size: 100% auto;
	}

	#conclusion02 > .innerFrame > h3{
		display: block;
		overflow: hidden;
		font-size: 1.8rem;
		line-height: 155%;
		text-align: center;
	}

	#conclusion02 > .innerFrame > h3 > span {
		display: block;
		overflow: hidden;
		font-size: 1.4rem;
		line-height: 155%;
	}


	#conclusion02 .columBox{
		padding: 0 4vw;
	}

	#conclusion02 .columInner{
		display:block;
		width: 100%;
	}

	#conclusion02 .columInner > h4{
		font-size:1.6rem;
		line-height:155%;
		margin-bottom:1em;
	}

	#conclusion02 .columInner > p{
		font-size:1.2rem;
		line-height:175%;
		padding:0 0;
	}


	#columA{
		height:auto;
	}

	#columA::before{
		 display:none;
	}
	#columA.columBox > .columInner{
		float:none;
		width:100%;
		margin-top:18vw;
	}


	#columB{
		height:auto;
	}

	#columB::before{
		 display:none;
	}
	#columB > .columInner{
		margin-top:85px;
	}

	#columC.columBox{
		background:url('../../_images/conclusion/sp/conclusion02_02.webp') no-repeat right 0;
		background-size: auto 36vw;
		height:auto;
		min-height:calc(32vw + 15vw);
	}

	#columC > .columInner{
		float:none;
		padding-top: 15vw;
		margin-top:0;
	}

}


/* --------------------------------

 石鹸で洗うと結局、何がいいの？

-------------------------------- */
#feature{
	display:block;
	overflow:hidden;
	background:url('../../_images/feature/bg.webp') no-repeat 50% 0;
	background-size:cover;
	padding-bottom: 130px;
	position:relative;
}

#feature::before{
	content:"";
	display:inline-block;
	overflow:hidden;
	width:488px;
	height:404px;
	background:url('../../_images/strength/0301.webp') no-repeat 0 0;
	background-size:contain;
	position:absolute;
	top:560px;
	left:calc(50% + 60px);
}
#feature > h2{
	display:block;
	overflow:hidden;
	margin:95px 0 38px;
	text-align:center;
}

#feature > h3{
	display:block;
	overflow:hidden;
	text-align:center;
	margin-bottom:70px;
}

#feature .columBox{
	display:block;
	width:750px;
	margin:0 auto 50px;
	clear:both;
	position:relative;
}



#feature .columBox > img{
	position:relative;
	vertical-align:middle;
	margin-right:20px;
}
#feature .columBox > .columInner{
	display:inline-block;
	overflow:hidden;
	width: 550px;
	position:relative;
	vertical-align:middle;
}

#feature .columBox > .columInner.sizsS{
	width:400px;
}

#feature .columBox > .columInner > h4{
	display:block;
	overflow:hidden;
	font-size: 26px;
	line-height: 155%;
	color:#2e5b2e;
}

#feature .columBox > .columInner > p{
	display:block;
	overflow:hidden;
	font-size: 16px;
	line-height: 175%;
	margin-top: 1em;
}


#point01 > .imgFrame{
	display:inline-block;
	float:left;
}

#point01 .columInner + img{
	display:none;
}

#point05::before{
	content:"";
	display:inline-block;
	overflow:hidden;
	width:412px;
	height:305px;
	background:url('../../_images/feature/point03.webp') no-repeat 0 0;
	background-size:contain;
	position:absolute;
	top:-70px;
	left:calc(50% + 130px);
}


@media (max-width: 768px) {

	#feature{
		background:none;
		padding:9vw 0 3vw;
	}

	#feature::before{
		display:none;
	}
	#feature > h2{
		margin:0 0;
	}
	#feature > h2 > img{
		width:60vw;
		height:auto;
		margin:0 auto;
	}

	#feature > h3{
		margin:6vw 0 6vw;
	}
	#feature > h3 > img{
		width:75vw;
		height:auto;
		margin:0 auto;
	}

	#feature .columBox{
		width:100%;
		margin:0 auto 6vw;
	}



	#feature .columBox > img{
		position:relative;
		vertical-align:middle;
		margin-right:20px;
	}
	#feature .columBox > .columInner{
		display:block;
		width: 100%;
	}

	#feature .columBox > .columInner.sizsS{
		width:400px;
	}

	#feature .columBox > .columInner > h4{
		font-size:1.6rem;
		text-align:center;
	}

	#feature .columBox > .columInner > p{
		font-size: 1.2rem;
		line-height: 175%;
		padding:0 6vw;
		margin-top: 1em;
	}


	#point01 > .imgFrame{
		display:block;
		overflow:hidden;
	}

	#point01 > .imgFrame img{
		width:100%;
		height:auto;
	}

	#point01.columBox > .columInner > h4{
		display:none;
	}

	#point01 .columInner + img{
		display:block;
		overflow:hidden;
		width:80vw;
		height:auto;
		float:right;
		margin-right:0;
	}

	#point04.columBox > img{
		display:block;
		width:25vw;
		height:auto;
		margin:0 auto 3vw;
	}

	#point05::before{
		display:block;
		overflow:hidden;
		width:100%;
		height:60vw;
		background-position:50% 50%;
		position:relative;
		top:auto;
		left:auto;
	}
	#point06.columBox > img{
		display:block;
		width:25vw;
		height:auto;
		margin:0 auto 3vw;
	}

}


/* --------------------------------

 EYE CATCH（試作・試用を100回以上重ねた、スキンケアソープ。）

-------------------------------- */

#catch05{
	display:block;
	overflow:hidden;
	height:508px;
	background:#ffffff url('../../_images/catch05/bg.webp') no-repeat 50% 0;
	background-size:cover;
	position:relative;
}

#catch05 img{
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
}



@media (max-width: 768px) {

	#catch05{
		height:auto;
		background:unset;
	}

	#catch05 img{
		position:relative;
		top:auto;
		left:auto;
		transform:unset;
		-webkit-transform: unset;
		width:100%;
		height:auto;
	}

}


/* --------------------------------

 スキンケアソープで「人も地球も美しく」

-------------------------------- */
#environment{
	display:block;
	overflow:hidden;
	background:#d5e0e5 url('../../_images/environment/sec16_bg.webp') no-repeat 50% 0;
	position:relative;
	padding-top:100px;
}

#environment > .innerFrame{
	width:800px;
	text-align:center;
}

#environment > .innerFrame > h3{
	display:none;
}

#environment .dataText{
	display:block;
	overflow:hidden;
	width:380px;
	text-align:left;
}

#environment .dataText > h2{
	display:block;
	overflow:hidden;
	margin-bottom:1em;
	font-weight:normal;
}

#environment .dataText > h2 > span{
	display:block;
	overflow:hidden;
	font-size:22px;
	line-height:155%;
}

#environment .dataText > h2 > span > strong{
	display:block;
	overflow:hidden;
	font-size:32px;
	font-weight:normal;
	line-height:155%;
}

#environment .dataText > h2 > img{
	display:none;
}

#environment .dataText > p{
	display:block;
	overflow:hidden;
	font-size: 16px;
	line-height: 200%;
}

#environment > .innerFrame img{
	margin-top:40px;
}

#environment > ul{
	display:flex;
	flex-direction: column;
	margin-top:75px;
}

#environment > ul > li{
	background-repeat:no-repeat;
	background-position:50% 50%;
}

#environment > ul > li > img{
	display:none;
}

#environment > ul > li:nth-child(1){
	height:425px;
	background-image:url('../../_images/environment/sec16_04a.webp');
}
#environment > ul > li:nth-child(2){
	height:665px;
	background-image:url('../../_images/environment/sec16_04b.webp');
}
#environment > ul > li:nth-child(3){
	height:425px;
	background-image:url('../../_images/environment/sec16_04c.webp');
}
#environment > ul > li:nth-child(4){
	height:584px;
	background-image:url('../../_images/environment/sec16_04d.webp');
}


#endCopy{
	display: block;
	overflow: hidden;
	text-align:center;
	padding:50px 0;
	position:relative;
	background: rgb(51,102,51);
	background: -moz-linear-gradient(-45deg, rgb(51,102,51) 20%, rgb(54,106,55) 70%, rgb(33,126,58) 100%);
	background: -webkit-linear-gradient(-45deg, rgb(51,102,51) 20%,rgb(54,106,55) 70%,rgb(33,126,58) 100%);
	background: linear-gradient(135deg, rgb(51,102,51) 20%,rgb(54,106,55) 70%,rgb(33,126,58) 100%);
}

#endCopy > h3,
#endCopy > p{
	display:none;
}



@media (max-width: 768px) {

	#environment{
		background:none;
		padding-top:0;
	}

	#environment > .innerFrame{
		width:100%;
	}

	#environment > .innerFrame > h3{
		display:block;
		overflow: hidden;
		font-size: 1.8rem;
		line-height: 155%;
		font-weight: normal;
		margin: 1em 0;
		text-align: center;
	}

	#environment .dataText{
		width:100%;
	}

	#environment .dataText > h2{
		margin-bottom:0;
	}

	#environment .dataText > h2 > span{
		display:none
	}

	#environment .dataText > h2 > img{
		display:block;
		width:100%;
		height:auto;
		margin-top:0;
	}

	#environment .dataText > p{
		padding:1em 6vw;
		font-size: 1.4rem;
		line-height: 155%;
	}

	#environment > .innerFrame img{
		width:calc(100% - 6vw);
		margin:3vw auto 0;
	}

	#environment > .innerFrame > img:last-child{
		display:none;
	}

	#environment > ul{
		margin-top:6vw;
	}

	#environment > ul > li{
		height:auto!important;
		background:unset!important;
	}

	#environment > ul > li > img{
		display:block;
		width:100%;
		height:auto;
	}

	#environment > ul > li:nth-child(1){
		order: 0;
	}
	#environment > ul > li:nth-child(2){
		order: 1;
	}
	#environment > ul > li:nth-child(3){
		order: 2;
	}
	#environment > ul > li:nth-child(4){
		order: 4;
	}
	#environment > ul > li:nth-child(5){
		order: 3;
	}

	#endCopy{
		color:#ffffff;
		text-align:center;
		font-weight: 300;
		padding:10vw 0;
	}

	#endCopy img{
		display:none;
	}

	#endCopy > h3{
		display: block;
		overflow: hidden;
		font-size: 2.2rem;
		line-height: 125%;
		margin-bottom: 1em;
	}

	#endCopy > p{
		display: block;
		overflow: hidden;
		font-size: 1.6rem;
		line-height: 125%;
	}

}



/*1週間で、百円玉1枚分のプラスチックを食べているとしたら*/
#problemText{
	display:block;
	overflow:hidden;
	width:570px;
	margin:70px auto 30px;
	text-align:left;
}

#problemText > h3{
	display:block;
	overflow:hidden;
	font-size:32px;
	line-height:155%;
	margin-bottom:0.75em;
}

#problemText > p{
	display:block;
	overflow:hidden;
	font-size:16px;
	line-height:175%;
}

#problemText > p.alRight{
	margin-top:1em;
	text-align:right;
	font-size:12px;
}


@media (max-width: 768px) {

	#problemText{
		width:100%;
		margin:6vw auto 6vw;
		padding:0 3vw;
	}

	#problemText > h3{
		font-size:2.4rem;
		line-height:155%;
		text-align:center;
	}

	#problemText > p{
		font-size:1.4rem;
	}

	#problemText > p.alRight{
		font-size:1.0rem;
	}

}

/* --------------------------------

 短LP用　tabFrame2

-------------------------------- */

.item_name{
	text-align: center;
	font-size:24px!important;
	padding:100px 0 15px;
}

.bg_beige{
	background-color:#ebe8dd!important;
	padding-bottom: 50px!important;
}

.tabFrame2{
	display:block!important;
}

.tabFrame2 h2{
	font-size:2.2rem;
	padding:0.75em 0;
	text-align:center;
	line-height:155%;
	color:#FFF;
	display:block;
	overflow:hidden;
}

.tabFrame2_sktr h2{
	background-color:#2D6782;
}

.tabFrame2_nfd h2{
	background-color:#AD155A;
}

#offer_nfdsktr h1{
	padding:100px 0;
	font-size:35px;
	text-align: center;
	line-height: 45px;
}

.width_461{
	max-width:461px;
	text-align: center;
	margin: 0 auto;
}

@media (max-width: 768px) {
	
	.item_name{
		font-size:20px!important;
		padding:20px 0 0;
		line-height: 30px;
	}
		
	.bg_beige{
		padding-bottom: 30px!important;
	}
		
	#offer_nfdsktr h1{
		padding:50px 0;
		font-size:23px;
		line-height: 35px;
		letter-spacing: -1px;
	}
		
	#offer_nfdsktr .ls15{
		letter-spacing: -15px;
	}
}



/* --------------------------------

 ショッピング情報

-------------------------------- */
#shopInfo label{
	background-color:#EDEBE3;
}

#shopInfo .accBody{
	border-color:#EDEBE3;
}
span.icnOc{
	background-color:#21482d;
}


/*製品名設定*/
.nameTrial::before{
	content:"「2ステップトライアルセット」"
}

.nameSet::before{
	content:"「ノーファンデ素肌美セット」"
}

.nameReguler::before{
	content:"「定期BOX20 スキンケア」"
}