/* Basic-Elements
   ============== */
*{
	margin:0;
	padding:0;
	border:0;
}
ul li{list-style:none;}
A{color: #c88900;}
#beforeafter h2,h3,h5{margin:0; padding:0; background:none; text-decoration:none; border:0; font-size:0;}


/* BEFORE AFTER COMMON */
#beforeafter { width:768px; border:1px solid #ccc; margin:0; padding:0; font-size:14px;}
@media screen and (max-width: 640px){	#beforeafter { width:100%; background:#fff;} }


/* BEFORE AFTER HEADER */
#beforeafter h2 {width:100%; background:url(/img/column/beginner/before_after/before_after_top_bg.jpg) no-repeat; width:100%; min-height:160px; padding:0; margin:0;}
#beforeafter h2 p {margin:0; padding:0 0 8px 20px; font-size:14px; font-weight:normal;}
#beforeafter h2 p.head01 {padding-top:20px; line-height:1; font-size:0;}
#beforeafter h2 p.head02 {ine-height:1; font-size:0;}
@media screen and (max-width: 640px){
#beforeafter h2 {min-height:150px;}
#beforeafter h2 p {font-size:12px; padding:0 2%; line-height:1.4em;}
#beforeafter h2 p br {display:none;}
#beforeafter h2 p.head01 img {width:90%; margin:0 0 2% 0;}
#beforeafter h2 p.head02 img {width:50%; margin:0 0 4% 0;}
}

/* BEFORE AFTER NAV */
#salon_voice_page_out {	width:100%; margin: 20px auto 10px;	padding: 0;	text-align:center; overflow:hidden;}
#salon_voice_page li {	display:inline;	margin: 0 2px;	padding: 0;}
#salon_voice_page li span,#salon_voice_page li a{	display: inline-block;	margin-bottom: 5px;	padding: 1px 8px;	background: #fff;	border: 1px solid #339895;	text-decoration: none;	vertical-align: middle; color:#339895;}
#salon_voice_page li span{background:#43b6b2;	color:#FFF;}
#salon_voice_page li a:hover {	background:#43b6b2;	color:#FFF;}


/* BEFORE AFTER Profile */
.profile {width:728px; padding:0; margin:0 auto; overflow:hidden;}
.profile h3 { background:url(/img/column/beginner/before_after/before_after_glb_bg.jpg); font-weight:bold; padding:10px; font-size:16px;}
.profile_box {width:100%; margin:0; padding:10px; box-sizing:border-box; border:1px solid #333; overflow:hidden;}
.profile_box img {float:left; margin-right:10px;}
.profile_box .ttl {color: #da5067; font-weight: bold; margin-bottom: 10px;}
.profile_box .minibox {background: #fff1f1; width: 350px; float: right;margin-top: 3%;padding: 2%;font-size: 80%;line-height: 17px;}
@media screen and (max-width: 640px){
.profile {width:100%; background:#fff;}
.profile_box {font-size:95%;}
.profile_box img {float:left; width:30%;}
.profile_box .ttl {margin-bottom:1%;}
.profile_box .minibox { float:none; clear:both; width:100%; margin:2% auto 0;}
}

/* BEFORE AFTER LinkBtn */
ul.linkbtn {margin:30px auto;}
ul.linkbtn li {margin:10px 0; text-align:center;}
@media screen and (max-width: 640px){
ul.linkbtn {width:100%; margin:20px auto;}
ul.linkbtn li {margin:0;}
ul.linkbtn li img {width:90%;}
}

/* BEFORE AFTER First Impression */
.firstimpression {width:728px; padding:0; margin:0 auto; overflow:hidden;}
.firstimpression h3 {font-size:16px; font-weight:none; padding-bottom:5px; border-bottom:1px solid #000; margin-bottom:10px;}
.firstimpression img.photo {margin-right:2%; float:left; width:30%;}
@media screen and (max-width: 640px){
.firstimpression {width:94%; margin:0 auto;}
.firstimpression h3 {font-size:15px;}
.firstimpression h3 img {width:40%;}
}

/* BEFORE AFTER Report */
.report {width:708px; padding:10px; background:url(/img/column/beginner/before_after/before_cat01_sec03_bg.gif) repeat; margin:20px auto; overflow:hidden;}
.report .content {width:668px; padding:20px; background:#fff; overflow:hidden;}
.report .content img {float:right; margin-left:10px;}
.report .content h4 {font-size: 16px; font-weight: normal; color: #209082; margin:0 0 8px 0;}
.report .content p {margin:0 0 4px 0;}
@media screen and (max-width: 640px){
.report {width:94%; padding:3%; margin-top:10px;}
.report img {width:30%;}
.report .content {width:90%; padding:5%;}
}


/******  top_intro_sm  *******/
.arealink { width:94%; text-align:center; margin:20px auto; overflow:hidden;}
.arealink p { margin-bottom:10px;}
.arealink .btn{
  background: #06b3c1;
  background-image: -webkit-linear-gradient(top, #06b3c1, #058087);
  background-image: -moz-linear-gradient(top, #06b3c1, #058087);
  background-image: -ms-linear-gradient(top, #06b3c1, #058087);
  background-image: -o-linear-gradient(top, #06b3c1, #058087);
  background-image: linear-gradient(to bottom, #06b3c1, #058087);
  -webkit-border-radius: 4;
  -moz-border-radius: 4;
  border-radius: 4px;
  text-shadow: 1px 1px 3px #666666;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 20px 20px;
  border: solid #058087 1px;
  text-decoration: none;
  font-size:18px;
  margin:0 auto;
  font-weight:bold;
  display:inline-block;
  width:80%;
  margin:0 0 20px 0;
  overflow:hidden;
}
.arealink .btn:hover {
  background: #058087;
  background-image: -webkit-linear-gradient(top, #058087, #06b3c1);
  background-image: -moz-linear-gradient(top, #058087, #06b3c1);
  background-image: -ms-linear-gradient(top, #058087, #06b3c1);
  background-image: -o-linear-gradient(top, #058087, #06b3c1);
  background-image: linear-gradient(to bottom, #058087, #06b3c1);
  text-decoration: none;
}


/*-----------------------------------------------------
 2PAGE
------------------------------------------------------*/

/* BEFORE AFTER Compare */
.compare {width:728px; padding:0; margin:0 auto; overflow:hidden;}
.compare .ttl { background:url(/img/column/beginner/before_after/before_after_glb_bg.jpg); font-weight:bold; padding:10px; font-size:16px;}
.compare ul {width:100%; margin:10px auto; overflow:hidden;}
.compare li.photo {float:left; padding:0 10px 0 0;}
.compare li.photo img {width:435px;}
.compare li.txt {padding-top:20px;}
@media screen and (max-width: 640px){
.compare {width:100%;}
.compare li.photo {text-align:center; float:none;}
.compare li.photo img {width:90%;}
.compare li.txt {padding-top:5px;}
}

/* BEFORE AFTER Compare Section */
.comparesection {width:728px; padding:0; margin:20px auto; overflow:hidden;}

.secttl {width:728px; min-height:83px; margin-bottom:10px;}
.comparesection .sec01 {background:url(/img/column/beginner/before_after/before_cat02_sec01_icon_ph_face.jpg) no-repeat bottom left;}
.comparesection .sec02 {background:url(/img/column/beginner/before_after/before_cat02_sec01_icon_ph_mayu.jpg) no-repeat;}
.comparesection .sec03 {background:url(/img/column/beginner/before_after/before_cat02_sec01_icon_ph_nose.jpg) no-repeat;}
.comparesection .sec04 {background:url(/img/column/beginner/before_after/before_cat02_sec01_icon_ph_jaw.jpg) no-repeat;}
.comparesection .sec05 {background:url(/img/column/beginner/before_after/before_cat03_sec01_icon_ph_year.jpg) no-repeat;}
.comparesection .sec06 {background:url(/img/column/beginner/before_after/before_cat03_sec01_icon_ph_eri.jpg) no-repeat bottom left;}
.comparesection .sec07 {background:url(/img/column/beginner/before_after/before_cat03_sec01_icon_ph_neck.jpg) no-repeat;}

.secttl h3 {width:635px; font-weight:bold; margin-left:93px;font-size:18px; font-weight:bold; padding:10px 0; border-bottom:1px solid #333;}
.secttl p {width:635px; font-weight:bold; margin-left:93px;color:#5ca89d; font-size:14px; margin-top:10px; font-weight:none;}

.comparesection ul.ba_photo {width:100%; margin:10px auto; overflow:hidden;}
.comparesection ul.ba_photo li {float:left; width:46%; margin:0 2%;;}
.comparesection p {width:100%;}
.comparesection p.photo {text-align:center;}
.comparesection p.name img {height:20px; margin-bottom:4px;}
.comparesection p.photo img {width:100%;}

#before_voice {width:708px; margin:10px auto; padding:10px; background:url(/img/column/beginner/before_after/beginner_voice_bg.gif) repeat;}
#before_voice img {margin-bottom:10px;}
@media screen and (max-width: 640px){
.comparesection {width:100%;}
.secttl {width:100%;}
.secttl h3 {width:70%; margin-left:30%; padding:0 0 5px 0;}
.secttl p {width:70%; margin-left:30%; margin-top:5px; font-weight:normal; line-height:1.3em;}
.comparesection p.name img {height:15px;}
#before_voice {width:90%; padding:2%;}
}