/* メインイメージ
-----------------------------------------------------------------------------*/
.whitening #m_img {background-image: url(../images/whitening/m_img.jpg);}



/* lead_box
-----------------------------------------------------------------------------*/
.whitening .lead_box .txt_icon{
	margin:2% 0 1% 0;}
	
.whitening .lead_box {
	margin-bottom:-5%;}	
	
	
	
/* blue_box
-----------------------------------------------------------------------------*/	
.whitening .bg_img{	
	background:url(../images/whitening/img1.png) no-repeat right bottom;}

.whitening .blue_bg{
	background-color:#EEFAFC;
	margin-top:15%;
	}
	
.whitening .blue_box{
	padding:3% 5%;
	position:relative;}	

.whitening .blue_box h4{
	text-align:center;
	color:#139FCC;
	font-size:130%;
	margin-bottom:2%;
	}
	
.whitening .blue_box .txt{
	width:78%;}		

.whitening .osusume_box {
	padding:0 10%;}	

.whitening .osusume_box .txt_icon{
	margin:8% 0 2% 0;
	text-align:center;}

.whitening .osusume_box .icon1,
.whitening .osusume_box .icon2,
.whitening .osusume_box .icon4,
.whitening .osusume_box .icon5,
.whitening .osusume_box .icon3,
.whitening .osusume_box .icon6{
	width:30%;
	float:left;
	padding:0 1.5%;
	margin-top:3%;}
	
.whitening .osusume_box .med_strong_o {
	padding-top:5%;}		



/* step_box
-----------------------------------------------------------------------------*/			
.whitening .step {
	padding:0 3%;}

.whitening .step .step_box{
	border:#58D0E2 solid 1px;
	padding:5%;
	position:relative;
	}

.whitening .step h4{
	background:#58D0E2;
	padding:7px 0;
	text-align:center;}

.whitening .step .step_box .flow1,
.whitening .step .step_box .flow2{
	width:30%;
	float:left;
	padding-right:3%;
	background:url(../images/whitening/arrow_s_pc.png) no-repeat right 120px;
	margin-right:2%}
	
.whitening .step .step_box .flow3{
	width:30%;
	float:right;}	
	
.whitening .step .step_box .flow4{
	width:30%;
	float:left;
	margin-right:2%}
		
	
.whitening .step .step_box .txt{
	font-size:90%;
	margin-top:3%;
	line-height:1.8em;}	

.whitening .btm_arrow{
	background:url(../images/whitening/arrow_m.png) no-repeat center bottom;
	padding-bottom:5%;
	margin-bottom:3%;}
	
.whitening .step .step_box .bg_img{
	position: absolute;
	bottom:0;
	right:2%;}	



/* anshin_box
-----------------------------------------------------------------------------*/		
.whitening .anshin{
	background:#FDFEDD;
	text-align: center;
	position:relative;
	margin-top:12%;
	padding:4% 0 0 0;
	margin-bottom:-100px;}
	
.whitening .anshin .anshin_title{
	position:absolute;
	top:-25px;
	left:0;
	right:0;}
	
.whitening .anshin dl{
	padding-bottom:5%;}		

.whitening .anshin dl.last{
	padding-bottom:8%;}		

.whitening .anshin dd span{
	font-weight:bold;}


/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
	
.whitening .blue_bg{
	background-color:#EEFAFC;
	margin-top:10%;
	}	
	
.whitening .lead_box .txt_icon{
	margin:5% 0 2% 0;}
		
.whitening .blue_box .txt{
	width:70%;}	
	
.whitening .blue_box{
	padding:3%;}
	
.whitening .anshin{
	background:#FDFEDD;
	text-align: center;
	position:relative;
	margin-top:12%;
	padding:7% 0 0 0;
	margin-bottom:-100px;}	
	
.whitening .anshin dl{
	padding-bottom:8%;}			
	
.whitening .step .step_box .bg_img{
	position: absolute;
	z-index:-1;
	bottom:0;
	right:2%;
	width:33%;}
	
.whitening .step .step_box .flow1,
.whitening .step .step_box .flow2{
	width:30%;
	float:left;
	padding-right:3.5%;
	background:url(../images/whitening/arrow_s_pc.png) no-repeat right 90px;
	margin-right:1.5%}						

}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
		
.whitening .lead_box .txt_icon{
	margin:5% 0 2% 0;}	
		
.whitening .osusume_box {
	padding:0%;
	text-align:center;}
	
.whitening .osusume_box .icon1,
.whitening .osusume_box .icon2,
.whitening .osusume_box .icon4,
.whitening .osusume_box .icon5,
.whitening .osusume_box .icon3,
.whitening .osusume_box .icon6{
	width:44%;
	float:left;
	padding:0 3%;
	margin-top:3%;}	
	
.whitening .blue_box{
	padding:5%;}
.whitening .blue_box .txt{
	width:100%;}

.whitening .bg_img{	
	background:none;}
	
.whitening .step {
	padding:0 3%;}

.whitening .step .step_box{
	text-align:center;
	}

.whitening .step h4{
	background:#58D0E2;
	padding:7px 0;
	text-align:center;}

.whitening .step .step_box .flow1,
.whitening .step .step_box .flow2{
	width:100%;
	float:none;
	padding-right:0%;
	background:url(../images/whitening/arrow_s_sp.png) no-repeat center bottom;
	margin-right:0%;
	padding-bottom:7%;}
	
.whitening .step .step_box .flow2,
.whitening .step .step_box .flow3{
	padding-top:4%;}	
	
.whitening .step .step_box .flow3{
	width:100%;
	float:none;}	
	
.whitening .step .step_box .flow4{
	width:100%;
	float:none;
	margin-right:0%;
	padding-bottom:0%;
	padding-top:4%;
	}
	
.whitening .btm_arrow{
	background:url(../images/whitening/arrow_m.png) no-repeat center bottom;
	padding-bottom:40px;
	margin-bottom:15px;}
	
.whitening .step .step_box .bg_img{
	position: absolute;
	z-index:-1;
	bottom:0;
	right:0;
	left:0;
	margin:0 auto;
	width:50%;}
	
.whitening .anshin{
	background:#FDFEDD;
	text-align: center;
	position:relative;
	margin-top:20%;
	padding:7% 0 0 0;
	margin-bottom:-20px;}
	
.whitening .anshin dl{
	padding-bottom:8%;}	
	
.whitening .anshin dd{
	text-align: left;}			
}