@charset "utf-8";
/*------------------------------------------------------------
	トープページ
------------------------------------------------------------*/
#main .temImg {
	height: 0;
	width: 100%;
	visibility: hidden;
}

#main .skinBox {
	padding-bottom: 145px;
	background: url(../img/lp/bg.jpg) no-repeat center bottom;
}

#main .skinBox .subBox {
	padding-top: 144px;
}

#main .skinBox .subBox h2 {
	margin-bottom: 99px;
}

#main .skinBox .subBox p {
	margin-bottom: 0;
	position: relative;
}

#main .skinBox .subBox .text {
	margin-bottom: 64px;
}

#main .skinBox02 {
	zoom:1;
	background: url(../img/lp/bg02.jpg) no-repeat center top #F2EDF8;
}

#main .skinBox02 .subBox {
	margin: 0 auto;
	padding: 82px 0 217px;
	width: 1280px;
	text-align: center;
}

#main .skinBox02 h3 {
	margin-bottom: 68px;
}

#main .skinBox02 .photo {
	margin-bottom: 140px;
}

#main .skinBox02 p {
	margin: 0 auto 61px;
	padding-bottom: 42px;
	width: 710px;
	border-bottom: 1px solid #8A7592;
}

#main .illuminateBox {
	background-color: #fff;
	border-top: 1px solid #E8DEF1;
}

#main .illuminateBox .subBox {
	margin: 0 auto;
	padding: 101px 0 175px;
	width: 1280px;
	position: relative;
}

#main .illuminateBox .subBox .textImg {
	position: absolute;
	top: 0;
	left: 0;
}

#main .illuminateBox h4 {
	margin-bottom: 59px;
	text-align: center;
}

#main .illuminateBox .inner {
	margin: 0 auto;
	padding: 0 172px 122px 270px;
	width: 838px;
}

#main .illuminateBox .inner .photoBox {
	float: left;
}

#main .illuminateBox .inner .textBox {
	padding-top: 6px;
	float: right;
	width: 415px;
}

#main .illuminateBox .inner .textBox p {
	font-size: 17px;
	line-height: 2.0;
}

#main .componentBox {
	margin: 0 auto 69px;
	width: 1019px;
}

#main .componentBox .title {
	text-align: center;
	margin-bottom: -12px;
}

#main .componentBox .sub {
	padding: 61px 41px 0px 37px;
	border: 1px solid #53335E;
}

#main .componentBox .luxuryBox {
	padding-bottom: 70px;
}

#main .componentBox .subLuxury {
	float: left;
	width: 427px;
}

#main .componentBox .subLuxury .photoBox {
	padding-top: 7px;
	float: left;
}

#main .componentBox .subLuxury .textBox {
	padding-top: 15px;
	width: 260px;
	float: right;
}

#main .componentBox .subLuxury02 .textBox {
	padding: 0;
}

#main .componentBox .subLuxury .textBox p {
	line-height: 2.0;
}


.floatR {
	float: right !important;
}

#main .plantBox {
	margin: 0 auto;
	width: 1019px;
}

#main .plantBox .subPlant {
	padding: 40px 45px 68px;
	float: left;
	width: 362px;
	border: 1px solid #52325D;
}

#main .plantBox .subPlant p {
	margin-bottom: 57px;
	text-align: center;
}

#main .plantBox .subPlant li {
	float: left;
	width: 181px;
}

#main .plantBox .subPlant li ul li {
	padding: 0 0 7px 1em;
	float: none;
	width: auto;
	text-indent: -1em;
}

#main .successBox {
	background-color: #fff;
	border-top: 1px solid #E8DEF1;
}

#main .successBox .subSuccess {
	margin: 0 auto;
	padding: 91px 0 207px;
	width: 1280px;
	position: relative;
}

#main .successBox .textImg {
	position: absolute;
	top: 0;
	right: 10px;
}

#main .successBox h4 {
	margin: 0 0 36px 150px;
}

#main .successBox p {
	margin: 0 0 34px 150px;
	width: 750px;
	font-size: 17px;
	line-height: 2.0;
}

#main .successBox .text {
	margin-bottom: 73px;
}

#main .successBox .photo {
	margin: 0 20px 78px 0;
	text-align: center;
}

#main .successBox .nanoBox {
	margin: 0 auto;
	padding: 15px 20px 14px;
	width: 758px;
	border: 1px solid #DDD;
}

#main .successBox .nanoBox .photoBox {
	padding-right: 30px;
	float: left;
}

#main .successBox .nanoBox .textBox {
	padding-top: 23px;
}

#main .successBox .nanoBox p {
	font-size: 14px;
	margin: 0;
	width: auto;
}

#main .securityBox {
	padding-bottom: 107px;
	background-color: #fff;
}

#main .securityBox .subSecurity {
	margin: 0 auto;
	width: 1280px;
	position: relative;
}

#main .securityBox .subSecurity .textImg {
	position: absolute;
	top: -94px;
	left: 0;
}

#main .securityBox h4 {
	margin-bottom: 54px;
	text-align: center;
}

#main .securityBox .textP {
	margin-bottom: 35px;
	text-align: center;
}

#main .securityBox .textImg02 {
	margin-bottom: 135px;
	text-align: center;
}

#main .securityBox .monitorBox {
	margin: 0 auto;
	width: 812px;
}

#main .securityBox .monitorBox p {
	margin-bottom: 6px;
	text-align: center;
}

#main .securityBox .list {
	margin-right: -17px;
	overflow: hidden;
	zoom:1;
}

#main .securityBox .list li {
	margin: 17px 17px 0 0;
	padding: 25px 20px 19px;
	float: left;
	width: 354px;
	border: 1px solid #DDD;
}

#main .securityBox .list li dt {
	margin-bottom: 14px;
}

#main .securityBox .list li dd {
	line-height: 2.0;
}

#main .shineBox {
	padding: 62px 0 70px;
	zoom:1;
	background: url(../img/lp/bg03.jpg) no-repeat center top #C4CAE0;
}

#main .shineBox .subShine {
	margin: 0 auto;
	width: 1280px;
}

#main .shineBox h4 {
	margin-bottom: 83px;
	text-align: center;
}

#main .shineBox .futureBox {
	padding: 0 132px 20px 205px;
}

#main .shineBox .futureBox .future {
	float: left;
	width: 440px;
	position: relative;
}

#main .shineBox .futureBox .future p {
	position: absolute;
	top: 52px;
	right: 96px;
}

#main .shineBox .futureBox .future .link {
	position: absolute;
	top: 117px;
	right: 129px;
}

#main .shineBox .futureBox .future .link a:hover img {
	filter: alpha(opacity=70);
	opacity: 0.7;
}

#main .shineBox .futureBox .future02 {
	float: right;
}

#main .shineBox .futureBox .future02 p {
	right: -13px;
}

#main .shineBox .futureBox .future02 .link {
	right: 20px;
}

#main .shineBox .btn {
	text-align: center;
}

#main .shineBox .spBg02,
#main .shineBox .spBg01,
#main .securityBox .spLink {
	display: none;
}

/*おすすめの使い方*/
#main .UseBox {
	padding: 62px 0 20px;
	zoom:1;
	background: #ffffff;
}

#main .UseBox .subUse_PC {
	margin: 0 auto;
	width: 1280px;
}

#main .UseBox .subUse_SP {
	display: none;
}


/*AGの商品紹介*/

#main .AG_Box_PC {
	padding: 62px 0 70px;
	zoom:1;
	background: center top #ffffff;
}

#main .AG_Box_SP {
	display: none;
}

#main .AG_Box_PC .subAG {
	margin: 0 auto;
	width: 1280px;
}

#main .AG_Box_PC h4 {
	margin-bottom: 43px;
	text-align: center;
}

#main .AG_Box_PC .futureBox {
	padding: 40px 65px 20px 66px;
}

#main .AG_Box_PC .subAG .futureBox .future, 
#main .AG_Box_PC .subAG .futureBox .future02,
#main .AG_Box_PC .subAG .futureBox li{
	float: left;
}

#main .AG_Box_PC .subAG .futureBox .future {
	width: 622px;
	margin-right: 12px;
}

#main .AG_Box_PC .subAG .btn {
	text-align: center;
}

#main .AG_Box_PC .subAG .future .link a:hover img,
#main .AG_Box_PC .subAG .future02 .link a:hover img {
	filter: alpha(opacity=70);
	opacity: 0.7;
}

@media all and (min-width: 0) and (max-width: 768px)  {
	#main .temImg {
		padding: 0 9% 0 23%;
		width: auto;
	}
	
	#main .temImg > div {
		width: 30%;
	}
	
	#main .temImg img {
		width: 100%;
	}
	
	#main .skinBox {
		padding-bottom: 27px;
		/*background-size: 100% 100%;*/
		background-image: none;
	}
	
	#main .skinBox .subBox {
		padding-top: 21px;
	}
	
	#main .skinBox .subBox h2 {
		margin-bottom: 8px;
		width: 51%;
	}
	
	#main .skinBox .subBox p {
		width: 75%;
	}
	
	#main .skinBox .subBox .text {
		margin-bottom: 22px;
	}
	
	#main .skinBox02 {
		background: none #F3EDF9;
	}
	
	#main .skinBox02 .subBox {
		padding: 11px 0 56px;
		width: auto;
	}
	
	#main .skinBox02 .subBox img {
		width: 100%;
	}
	
	#main .skinBox02 h3 {
		margin: 0 auto 8px;
		width: 55%;
	}
	
	#main .skinBox02 .photo {
		margin: 0 7px 30px;
	}
	
	#main .skinBox02 p {
		margin-bottom: 40px;
		padding-bottom: 0;
		width: 76%;
		border-bottom: none;
	}
	
	#main .skinBox02 .photo02 {
		margin: 0 20px;
	}
	
	#main .illuminateBox .subBox {
		padding: 18px 0 5px;
		width: auto;
	}

	#main .illuminateBox .subBox img {
		width: 100%;
	}
	
	#main .illuminateBox .subBox .textImg {
		display: none;
	}
	
	#main .illuminateBox h4 {
		margin: 0 auto 7px;
		width: 90%;
	}
	
	#main .illuminateBox .inner {
		width: auto;
		padding: 0 10px 17px;
	}
	
	#main .illuminateBox .inner .photoBox {
		padding: 38px 0 0 10px;
		width: 48%;
	}
	
	#main .illuminateBox .inner .textBox {
		padding-left: 56%;
		width: auto;
		float: none;
	}
	
	#main .illuminateBox .inner .textBox p {
		font-size: 9px;
	}
	
	#main .componentBox {
		margin: 0 6px 20px;
		width: auto;
	}
	
	#main .componentBox .title {
		margin: 0 5px -5px;
	}
	
	#main .componentBox .title img {
		display: block;
	}
	
	#main .componentBox .sub {
		padding: 10px 10px 0;
	}
	
	#main .componentBox .luxuryBox {
		padding-bottom: 10px;
	}
	
	#main .componentBox .subLuxury {
		margin-bottom: 0px;
		width: auto;
		float: none;
	}
	
	#main .componentBox .subLuxury .photoBox {
		width: 26%;
	}
	
	#main .componentBox .subLuxury .textBox {
		padding-left: 30%;
		width: auto;
		float: none;
	}
	
	#main .componentBox .subLuxury .textBox p {
		font-size: 9px;
	}
	
	#main .plantBox {
		width: auto;
	}
	
	#main .plantBox .subPlant {
		padding: 20px 15px;
		width: auto;
		float: none !important;
		margin: 0 6px 15px;
	}
	
	#main .plantBox .subPlant p {
		margin: 0 auto 15px;
		width: 65%;
	}
	
	#main .plantBox .subPlant li {
		width: auto;
		float: none;
	}
	
	#main .successBox .subSuccess {
		padding: 16px 13px 25px;
		width: auto;
	}

	#main .successBox .subSuccess img {
		width: 100%;
	}
	
	#main .successBox .textImg {
		display: none;
	}
	
	#main .successBox h4 {
		margin: 0 0 12px;
	}
	
	#main .successBox p {
		margin: 0;
		width: auto;
		font-size: 9px;
	}
	
	#main .successBox .text {
		margin-bottom: 20px;
	}
	
	#main .successBox .photo {
		margin: 0 5px 23px;
	}
	
	#main .successBox .nanoBox {
		padding: 10px;
		width: auto;
	}
	
	#main .successBox .nanoBox .photoBox {
		padding: 0;
		width: 25%;
	}
	
	#main .successBox .nanoBox .textBox {
		padding: 0 0 0 32%;
	}
	
	#main .successBox .nanoBox p {
		font-size: 9px;
	}
	
	#main .securityBox {
		padding-bottom: 0;
	}
	
	#main .securityBox img {
		width: 100%;
	}
	
	#main .securityBox .subSecurity {
		padding: 20px 0 0;
		width: auto;
		border-top: 1px solid #DFD6EB;
	}
	
	#main .securityBox .subSecurity .textImg {
		display: none;
	}
	
	#main .securityBox h4 {
		margin: 0 auto 20px;
		width: 83%;
	}
	
	#main .securityBox .textP {
		margin: 0 auto 15px;
		width: 72%;
	}
	
	#main .securityBox .textImg02 {
		margin: 0 15px 20px;
	}
	
	#main .securityBox .monitorBox {
		padding: 10px;
		width: auto;
		border-top: 1px solid #DFD6EB;
	}
	
	#main .securityBox .monitorBox p {
		margin-bottom: 10px;
		width: 47%;
	}

	#main .securityBox .monitorBox p img {
		display: block;
	}
	
	#main .securityBox .list {
		margin: 0;
	}
	
	#main .securityBox .list li {
		margin: 0 0 10px;
		padding: 10px;
		width: auto;
		float: none;
		height: auto !important;
	}

	#main .securityBox .list .liStyle {
		display: none;
	}
	
	#main .securityBox .list li dt {
		margin-bottom: 10px;
		width: 30%;
	}

	#main .securityBox .list li dt img {
		display: block;
	}

	#main .securityBox .list li dd {
		font-size: 9px;
	}
	
	#main .securityBox .spLink {
		display: block;
	}

	#main .securityBox .spLink a {
		padding: 7px 5px;
		display: block;
		color: #fff;
		text-align: center;
		position: relative;
		background-color: #999;
	}
	
	#main .securityBox .spLink a:after {
		width: 12px;  
		height: 16px;
		background: url(../img/lp/icon.gif) no-repeat left top;
		background-size: 6px 8px;
		position: absolute;  
		top: 39%;  
		left: 15px;  
		content: ""; 
	}
	
	#main .shineBox {
		padding: 15px 0;
		position: relative;
		background: none #C4CAE0;
	}

	#main .shineBox img {
		width: 100%;
	}
	
	#main .shineBox .subShine {
		width: auto;
		position: relative;
	}
	
	#main .shineBox h4 {
		margin: 0 10px 15px;
	}
	
	#main .shineBox .futureBox {
		padding: 0 10px 35px 10%;
	}
	
	#main .shineBox .futureBox .future {
		width: 45%;
	}
	
	#main .shineBox .futureBox .future .photo {
		width: 53%;
		margin: 0 auto 10px;
	}
	
	#main .shineBox .futureBox .future p {
		margin-bottom: 15px;
		position: inherit;
		right: 0;
		top: 0;
		width: 80%;
	}
	
	#main .shineBox .futureBox .future .link{
		position: inherit;
		right: 0;
		top: 0;
		width: 70%;
	}
	
	#main .shineBox .futureBox .future02 .photo {
		width: 100.5%;
	}
	
	#main .shineBox .btn {
		margin: 0 auto;
		width: 50%;
		background-color: #fff;
	}
		
	#main .shineBox .spBg01 {
		top: 0;
		right: 0;
		width: 47%;
		display: block;
		position: absolute;
	}
	
	#main .shineBox .spBg02 {
		bottom: 0;
		left: 0;
		width: 65%;
		display: block;
		position: absolute;
	}
	
	/*おすすめの使い方*/
	#main .UseBox {
	padding: 30px 0 10px;
	zoom:1;
	background: #ffffff;
	}

	#main .UseBox .subUse_PC {
	display: none;
	}

	#main .UseBox .subUse_SP {
	display: block;
	}


	/*AGの商品紹介*/

	#main .AG_Box_SP {
	padding: 30px 0 20px;
	display: block;
	background: center top #ffffff;
	}

	#main .AG_Box_PC {
	display: none;
	}

	#main .AG_Box_SP .subAG {
	margin: 0 auto;
	width: 100%;
	}

	#main .AG_Box_SP h4 {
	margin-bottom: 20px;
	text-align: center;
	}

	#main .AG_Box_SP .futureBox {
	padding: 0 0 20px;
	}

	#main .AG_Box_SP .subAG .futureBox .future, 
	#main .AG_Box_SP .subAG .futureBox .future02{
	float: left;
	}
	
	#main .AG_Box_SP .subAG .futureBox li {
	float: none;
	}

	#main .AG_Box_SP .subAG .futureBox .future,
	#main .AG_Box_SP .subAG .futureBox .future02{
	width: 50%;
	margin-right: 0;
	}
	
	#main .AG_Box_SP .subAG .futureBox .link a{
	display: block; 
	width: 100%;
	float: none;
	}
	
	#main .AG_Box_SP .subAG .futureBox .link a img {
	margin: 0 auto;
	display: block;
	width: 60%;
	}

	#main .AG_Box_SP .subAG .btn {
	text-align: center;
	}
	
	#main .AG_Box_SP .subAG .btn img {
	width: 50%;
	}

}