/**
    * Reset CSS
    */
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed,
    figure, figcaption, footer, header, hgroup,
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section {
    display: block;
    }
    body {
    line-height: 1;
    }
    ol, ul {
    list-style: none;
    }
    blockquote, q {
    quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    content: '';
    content: none;
    }
    table {
    border-collapse: collapse;
    border-spacing: 0;
    }
    
    
    /* Basics ######################################################### */

* { 
	margin: 0; padding: 0; 
} 

/* Headlines ######################################################### */		


h1 {
font-family: 'Signika', sans-serif;
	padding: 0 0 20px 0;
	margin: 0;
	font-size:400%;
	font-weight:300;
	line-height: 60px;
	color: #774f86;
	position:relative;
	letter-spacing:-1px;
}

h1 #jp
{
position:absolute;
top:22px;
line-height: 20px;
padding:0 0 0 20px;
font-size:20px;
color:#505050;
display:inline-block;
letter-spacing:1.3px;
}


h2 {
	font-size: 150%;
	color: #774f86;
	font-weight: normal;
	padding: 0 0 10px 0;

}

#clear{clear:both;}
#mo{display:none;}


#large
{
	font-size:120%;
	line-height:160%;
}

p#small
{
font-size:80%;
padding:5px;
line-height:140%;
}

p#backtotop
{
text-align:right;
padding:10px 0;
}

p#backtotop a
{
padding:15px;
line-height:100%;
display:inline-block;
background:#f0dc80;
color:#7f7233;
text-align:center;
text-decoration:none;
border:1px solid #d0bd63;
border-radius: 10px;
-webkit-border-radius: 10px;	/* Safari,Google Chrome */
-moz-border-radius: 10px;	/* Firefox */
}

p#backtotop a:hover
{
background:#d0bd63;
}


/* Links ######################################################### */	

a {color:#33a2b6; text-decoration: underline; outline: none}
a:hover {color:#666;text-decoration:none;}	



	
/* Images ######################################################### */	

img {
	border:0;
}

/* Base ######################################################### */	

 
html {
		background: url(../images/common/base_bg.jpg) repeat 0 0;
		padding:0;
		margin:0;

}

body {
font-family: 'Hiragino Gothic Pro', Meiryo, sans-serif;
		background: url(../images/common/bg.jpg) repeat 0 0;
	text-align: center;
	border: 0;
	font-size: 16px;
	color: #505050;
	line-height: 150%;
	min-width:1024px;
}

div.bodywrap
{
background: url(../images/common/blue_red_line.png) repeat-x 0 0;
height:100%;
}

a#backtotop
{
position:absolute;
right:0;
bottom:0;
}


/* Navigation ######################################################### */	


div#nav {
	height:20px;
	text-align:center;
	padding:0;
	margin:0;
}

div#nav ul
{
	padding:0;
	margin:0;
list-style:none;
width:95%;
margin:0 auto;
display:table;
/display:block;
}

div#nav li{
float:none;
padding:0 20px;
display:table-cell;
/display:inline; 
/float:left; 
/width:20%;
}

div#nav a{
border:2px solid #f4f1de;
color: #774f86;
text-decoration:none;
font-size:20px;
letter-spacing:1px;
padding:10px 20px;
border-radius: 10px;
-webkit-border-radius: 10px;	/* Safari,Google Chrome */
-moz-border-radius: 10px;	/* Firefox */
}

div#nav a:hover{
border:2px solid #9066a0;
background: #fff;
color:#774f86;
text-decoration:none;
}

div#topbar,div.footer
{
color:#fff;
background: url(../images/common/base_bg.jpg) repeat 0 0;
}

div#topbar p,div.footer p
{
text-align:left;
padding:15px 0;
margin: 0 auto;
width: 1000px;
}

div#topbar p img
{
height:25px;
width:auto;
}


.section {
	clear: both;
}


div.sectionbody {
background: url(../images/common/blue_red_line.png) repeat-x 0 5px;
	margin: 0 auto;
	width: 1000px;
	text-align:left;
	padding: 45px 0;
	position:relative;
	min-height:500px;
	}
	
div.sectionbody_f {
background: url(../images/common/blue_red_line.png) repeat-x 0 5px;
	margin: 0 auto;
	width: 1000px;
	text-align:left;
	padding: 45px 0;
	position:relative;
	min-height:900px;
	}
	
	
div.contact {
background: url(../images/common/blue_red_line.png) repeat-x 0 bottom;
	}

 /* Intro ######################################################### */


#intro p{
width:450px;
}

#intro div.sectionbody{
background:url(../images/hairstylist/intro_photo.png) no-repeat 440px 90px;
min-height:480px;
}


#intro h1
{
padding:37px 0;
}


 /* About Plan ######################################################### */
 
 ul.steps
 {
 padding:20px 0;
 margin:0;
 }
 
  ul.steps li
 {
  padding:0;
 margin:0;
width:245px;
height:235px;
display:inline-block;
float:left;
background:url(../images/hairstylist/step_bg.png) no-repeat 0 0;
position:relative;
 }
 
ul.steps li span#no
 {
 position:absolute;
 top:20px;
right:60px;
color:#fff;
font-size:30px;
font-family:Century Gothic;
}

ul.steps li p
{
font-size:110%;
line-height:140%;
text-align:center;
padding:80px 30px 30px 30px;
}


div.sampleplan
{
clear:both;
padding:0;
display:inline-block;
height:100%;
}


div.file
{
width:655px;
float:left;
z-index:10;
font-size:110%;
}

div.file .filetop
{
background:url(../images/common/file_top.png) no-repeat 0 0;
height:126px;
}

div.file .filecontent
{
background:url(../images/common/file_mid.png) repeat-y 0 0;
padding:0 50px;
}

div.file h2
{
padding:30px 0 10px 0;
font-size:170%;
}

div.file img
{
margin:-5px 30px 10px 0;
float:right;
display:inline-block;
}

div.file img#aisan
{
float:left;
display:inline-block;
margin:0 30px;
}

div.file h3
{
font-size:110%;
color:#774f86;;
clear:both;
background:#e9dbeb;
padding:0 0;
line-height:45px;
height:45px;
overflow:hidden;
border-radius: 15px;
-webkit-border-radius: 15px;	/* Safari,Google Chrome */
-moz-border-radius: 15px;	/* Firefox */
}

div.file h3 #no
{
color:#fff;
background: #774f86;
padding:20px;
margin:0 10px 0 0;
}


div.file p
{
padding:20px;
}

div.file .filebot
{
margin:0;
padding:0;
background:url(../images/common/file_bot.png) no-repeat 0 0;
height:55px;
}

div.filecomment
{
width:330px;
float:right;
z-index:100;
padding:140px 0 0 0;
}

div.filecomment p
{
background:#f2e09f;
position:relative;
padding:30px;
margin:10px 0;
float:right;
line-height:160%;
border-radius: 15px;
-webkit-border-radius: 15px;	/* Safari,Google Chrome */
-moz-border-radius: 15px;	/* Firefox */
}

div.filecomment p img#arrow
{
position:absolute;
left:-50px;
top:50px;
}

div.filecomment p img#arrow2
{
position:absolute;
left:-50px;
top:80px;
}

div.price
{
border:6px solid #dbd7bd;
padding:40px 40px 20px 40px	;
border-radius: 15px;
-webkit-border-radius: 15px;	/* Safari,Google Chrome */
-moz-border-radius: 15px;	/* Firefox */
}

div.price h2{font-size:170%;}

#doller
{
margin-right:20px;
margin-top:-20px;
display:inline-block;
float:left;
}
	
div.price table
{
margin:20px 0 0 0;
width:100%;
clear:both;
}

div.price table th
{
padding:10px 15px;
background:#fff;
border-right:2px solid #f3f1dc;
border-bottom:5px solid #f3f1dc;
}

div.price table td
{
text-align:right;
padding:10px 15px;
background:#fff;
border-right:5px solid #f3f1dc;
border-bottom:5px solid #f3f1dc;
}

div.price table td#free
{
font-weight:bold;
color:#e44716;
}

div.price b
{
font-size:120%;
font-weight:bold;
}


 /* LifeStyle ######################################################### */
 
  div.lifestyle 
  {
 font-size:90%;
  }
 
 div.lifestyle  ul.lifestyle1
 {
  margin:-50px 0 0 0;
 }
 
  div.lifestyle  ul.lifestyle3
 {
  margin:-10px 0 0 0;
 }
 
  div.lifestyle li
  { 
  width:28%;
  float:left;
  padding:0 30px 0 10px;
  }
  
   /* Testimonials ######################################################### */
   
.testimonials p
{
padding:0 10px;
line-height:160%;
}

#kana
{
margin:0 20px 10px 10px;
float:left;
}
 
 div.fromowner
 {
 line-height:160%;
 margin:20px;
 background:#f9f8ee;
 padding:30px 40px;
 border-radius: 15px;
-webkit-border-radius: 15px;	/* Safari,Google Chrome */
-moz-border-radius: 15px;	/* Firefox */
position:relative;
 }
 
  div.fromowner #title
 {
position:absolute;
top:-40px;
right:100px;
 }
 
 #yoko
 {
margin:-10px 30px 20px 0;
float:left;
 }
 
 
  /* Contact ######################################################### */
  
  div.contact b
  {
  font-weight:bold;
  font-size:110%;
  }

 a#contact:hover img
 {
 opacity:0.7;
 }
  
 p.contact
 {
 line-height:30px;
 }
 
 
 /* FORM ######################################################### */
 
 div.formbox{
width:900px;
float:left;
display:inline;
line-height:180%;
padding:5px 0px;
 }
 
 
 div.f_left{
float:left;
display:inline;
 }
 
 div.f_title{
width:200px;
float:left;
display:inline;
 }
 
 div.f_right{
width:700px;
float:left;
display:inline;
 }
 
  div.fr_right{
width:700px;
float:left;
display:inline;
 }
 
 div.f_right input{
height:20px;
width:200px;
 }
 
 div.f_right span{
font-weigth:normal;
color:red;
 }
 
div.f_left span.red_font{
color:red;
font-weight:bold;
}
 
 /* Footer ######################################################### */
 
div.footer
 {
 font-size:80%;
 line-height:140%;
 padding:20px;
 }
 
 div.footer a
{
color:#fff;
text-decoration:underline;
 }
 
div.footer a:hover
{
color:#fff;
text-decoration:none;
 }
 
 div.footer p#clear
{
color:#ccc;
font-size:12px;
 }

 
  /* Back to Top ######################################################### */
 
 p#backtop {
	position: fixed;
	bottom: 60px;
	margin-left:10px;
}
p#backtop a {
	width: 70px;
	display: block;
	text-align: center;
	font: 11px/100% Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	color: #bbb;
	/* background color transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
p#backtop a:hover {
	color: #000;
}
/* arrow icon (span tag) */
p#backtop span {
	width: 70px;
	height: 70px;
	display: block;
	margin-bottom: 7px;
	background: #e0d9cc url(../images/common/up-arrow2.png) no-repeat center center;
	/* rounded corners */
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	/* background color transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
p#backtop a:hover span {
	background-color: #7f735e;
}


 
/* Mobile CSS ######################################################### */
@media screen and (max-device-width: 480px), 
      screen and (max-device-width: 960px) and (-webkit-min-device-pixel-ratio: 2) {

html {-webkit-text-size-adjust: none;}
body{font-size:25px;}
h1 {font-size:300%;}
#mo{display:inline;}
div#topbar p img{height:auto;}
div.sectionbody {width: 970px;}
div.sampleplan {width: 1000px;margin:0 0 0 -20px;}
ul.steps li{width:240px;}
div#nav a{font-size:24px;}
ul.steps{font-size:22px;}
ul.steps br,#intro p br,ul.steps li p br,div.filecontent br,div.lifestyle br {display:none;}
div.filecomment{padding:40px 0 0 0;}
div.lifestyle,p.testimonials,div.fromowner {font-size:27px;}

h1 #jp
{font-size:20px;)

p.contact { font-size:140%;line-height:180%; }

a{-webkit-tap-highlight-color: #FF0}

div.filecomment{padding:100px 0 0 0;}

}