@charset "UTF-8";
/* CSS Document */

.base {
	width: 666px;
}

img {
	display: inline;
}

#main {
	text-align: center;
}

#category_block .base {
	width: 940px;
}

#topFixed .base {
	width: 940px;
}

#main_block {
	width: 100%;
	min-width: 666px;
	background: url(/-/Media/com/learn-more/spot-treatment/acne-spot/column01/images/pc/bg.gif) top center;
	padding-top: 30px;
	padding-bottom: 50px;
}

#main_block .mainImage {

}

#main_block .mainContent {
	border: 13px solid #FFF;
	background: #fffdef;
	padding-top: 40px;
}

#main_block .mainContent .block {
	width: 574px;
	padding-bottom: 60px;
	margin: 0 auto 40px;
	background: url(/-/Media/com/learn-more/spot-treatment/acne-spot/column01/images/pc/heart_line.png) no-repeat center bottom;
}

#main_block .mainContent .block.last {
	background: none;
	margin-bottom: 0;
}

#main_block .mainContent .block .ttl {
	margin-bottom: 35px;
}

#main_block .mainContent .block .txt {
	text-align: left;
	color: #2f2f2f;
	font-size: 14px;
	font-size: 1.4rem;
	line-height: 2;
}

#main_block .mainContent .block .txt.roundTxt img {
	float: left;
	margin-right: 20px;
}

#main_block .mainContent .recommend {
	width: 610px;
	margin: 0 auto;
	height: 430px;
	background: url(/-/Media/com/learn-more/spot-treatment/acne-spot/column01/images/pc/recommend_bg.png) no-repeat top center;
	position: relative;
	padding-top: 50px;
}

#main_block .mainContent .recommend .icon {
	position: absolute;
	top: -25px;
	left: 296px;
}

#main_block .mainContent .recommend .ttl {
	margin-bottom: 15px;
}

#main_block .mainContent .recommend .products {
	width: 560px;
	margin: 0 auto;
}

#main_block .mainContent .recommend .products li {
	width: 280px;
	float: left;
	margin-bottom: 30px;
}

#main_block .mainContent .recommend .products li .left {
	float: left;
}

#main_block .mainContent .recommend .products li .right {
	width: 170px;
	float: right;
	text-align: left;
}

#main_block .mainContent .recommend .products li .right .ttl {
	margin-bottom: 5px;
	color: #2250b9;
	font-size: 12px;
	font-size: 1.2rem;
}

#main_block .mainContent .recommend .products li .right .txt {
	margin-bottom: 5px;
	font-size: 12px;
	font-size: 1.2rem;
}

#main_block .mainContent .recommend .products li .right .bounds {
	border: 1px solid #b7b7b7;
	font-size: 12px;
	font-size: 1.2rem;
	width: auto;
	padding: 5px;
	text-align: center;
	width: 70px;
}

#main_block .mainContent .recommend .products li .branName {
	margin-top: 5px;
	font-size: 12px;
	font-size: 1.2rem;
}

@media screen and (max-width: 768px){
	.pc { display: inline; }
	.sp { display: none; }

	.base {
		width: 80%; /*666*/
	}

	#category_block .base {
		width: 100%;
	}

	#topFixed .base {
		width: 100%;
	}

	#main_block {
		width: 100%;
		min-width: 0;
	}

	#main_block .mainContent .block {
		width: 86%; /*574*/
	}

	#main_block .mainContent .block .ttl.blockTtl1 {
		width: 59%;
		margin-left: auto;
		margin-right: auto;
	}

	#main_block .mainContent .block .ttl.blockTtl2 {
		width: 65%;
		margin-left: auto;
		margin-right: auto;
	}

	#main_block .mainContent .block .ttl.blockTtl3 {
		width: 48%;
		margin-left: auto;
		margin-right: auto;
	}

	#main_block .mainContent .block .ttl.blockTtl4 {
		width: 67%;
		margin-left: auto;
		margin-right: auto;
	}

	#main_block .mainContent .block .ttl.blockTtl5 {
		width: 63%;
		margin-left: auto;
		margin-right: auto;
	}

	#main_block .mainContent .block .txt.roundTxt img {
		width: 50%;
	}
}

@media screen and (max-width: 480px){
	.pc { display: none; }
	.sp { display: inline; }


	img {
		max-width: 100%;
		height: auto;
		width /***/:auto;
		vertical-align: bottom;
	}

	.base {
		width: 100%;
		margin: 0 auto;
	}

	#category_block .base {
		width: 100%;
	}

	#main_block {
		width: 100%;
		min-width: 0;
		background: url(/-/Media/com/learn-more/spot-treatment/acne-spot/column01/images/sp/bg.gif) top center;
		background-size: contain;
		padding-top: 3%;
		padding-bottom: 13%;
	}

	#main_block .mainImage {
		width: 96.6666667%;
		margin: 0 auto;
	}

	#main_block .mainContent {
		width: 96.6666667%; /*464*/
		margin: 0 auto 13%;
		border: 9px solid #FFF;
		box-sizing: border-box;
		background: #fffdef;
		padding-top: 10%;
	}

	#main_block .mainContent .block {
		width: 90%; /*418*/
		padding-bottom: 20%;
		margin: 0 auto 10%;
		background: url(/-/Media/com/learn-more/spot-treatment/acne-spot/column01/images/sp/heart_line.png) no-repeat center bottom;
		background-size: contain;
	}

	#main_block .mainContent .block .ttl {
		margin: 0 auto 10%;
	}

	#main_block .mainContent .block .ttl.blockTtl1 { width: 80.6%; }
	#main_block .mainContent .block .ttl.blockTtl2 { width: 89.2%; }
	#main_block .mainContent .block .ttl.blockTtl3 { width: 65.8%; }
	#main_block .mainContent .block .ttl.blockTtl4 { width: 92.1%; }
	#main_block .mainContent .block .ttl.blockTtl5 { width: 87.3%; }

	#main_block .mainContent .block .txt {
		text-align: left;
		color: #2f2f2f;
		font-size: 14px;
		font-size: 1.4rem;
		line-height: 2;
	}

	#main_block .mainContent .block .txt.roundTxt img {
		float: left;
		margin-right: 3%;
		width: 50%;
	}

	#main_block .mainContent .recommend {
		width: 92%; /*428*/
		height: auto;
		margin: 0 auto;
		background: none;
		background-color: #FFF;
		border: 1px solid #ededed;
		position: relative;
		padding-top: 0;
		padding: 2% 0;
		margin-bottom: 5%;
	}

	#main_block .mainContent .recommend .inner {
		width: 95%; /*408*/
		height: auto;
		margin: 0 auto;
		background: none;
		border: 1px solid #ff6420;
		position: relative;
		padding: 10% 0 0 0;
		margin-bottom: 0;
	}

	#main_block .mainContent .recommend .icon {
		position: absolute;
		top: -2%;
		left: 47%;
		width: 9%;
	}

	#main_block .mainContent .recommend .ttl {
		margin: 0 auto 5%;
		width: 50%;
	}

	#main_block .mainContent .recommend .products {
		width: 87%; /*354*/
		margin: 0 auto;
	}

	#main_block .mainContent .recommend .products li {
		width: 100%;
		float: none;
		margin-bottom: 10%;
		border-bottom: 1px solid #c5c5c5;
		padding-bottom: 7%;
	}

	#main_block .mainContent .recommend .products li.last {
		border-bottom: none;
		padding-bottom: 0;
	}

	#main_block .mainContent .recommend .products li .left {
		float: left;
		width: 25%;
	}

	#main_block .mainContent .recommend .products li .right {
		width: 70%;
		float: right;
		text-align: left;
	}

	#main_block .mainContent .recommend .products li .right .ttl {
		margin-bottom: 3%;
		width: 100%;
		color: #2250b9;
		font-size: 12px;
		font-size: 1.2rem;
	}

	#main_block .mainContent .recommend .products li .right .txt {
		margin-bottom: 3%;
		font-size: 12px;
		font-size: 1.2rem;
	}

	#main_block .mainContent .recommend .products li .right .bounds {
		border: 1px solid #b7b7b7;
		font-size: 12px;
		font-size: 1.2rem;
		width: auto;
		padding: 5px;
		text-align: center;
		width: 70px;
	}

	#main_block .mainContent .recommend .products li .branName {
		margin-top: 5%;
		font-size: 12px;
		font-size: 1.2rem;
	}
}
