.mainarea  *, .mainarea  *:before, .mainarea *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

.mainarea a:hover img{
	opacity: 1;
	filter: alpha( opacity=100 );
}




/* */
.mainimgarea{
position:relative;
padding:0;
margin-bottom:20px;

}
.mainimgarea .ttlbox{
padding:0;
}
.mainimgarea .ttlbox h1{
}
.mainimgarea .ttlbox .textmain{
line-height: 1.6;
font-size: 0.92em;
padding-left:10px;
padding-right:10px;
z-index:23;
color:#000;
}
.mainimgarea .ttlbox .title{
z-index:13;

}
.mainimgarea .imgmain{
top:0px;left:0px;
z-index:3;
margin-bottom: 10px;
}


/* before */
.mainimgarea .beforebox{
padding:0;
}
.mainimgarea .beforestylearea{
with:100%;
}
.mainimgarea .beforebox .head{
font-size:0.8em;
font-weight:800;
color: #ca4141;
padding: 0 10px;
}
.beforestylearea{
}
.beforestylearea .beforestyle{
width: 21%;
height: auto;
float:left;
margin-left:10px;
}
.beforestylearea .beforestyle img{
}
.mainimgarea .beforebox .comment{
padding: 10px 10px;
font-size:0.8em;
line-height:1.6;
}

@media (min-width: 1200px) {

.mainimgarea .imgmain{
width:600px;
float:left;
}

.mainimgarea .beforebox{
width:600px;
float:left;
}

}

/* */
.advicearea{
margin-bottom:20px;
padding:10px;
border: 1px solid #ca4141;
border-radius: 15px;
}
.advicearea h2{
margin-bottom:20px;
}
.advicearea h2 > span{
display:none;
}

.advicearea .stylist {
}
.advicearea .stylist img{
}
.advicearea .stylist .logo{
font-size: 0.85em;
font-weight:900;
color: #ca4141;
}
.advicearea .title{
box-shadow: none; 
margin: 0; 
display: block; 
border:none;
line-height: 1.2; 

position:relative;
padding:0;
font-size:1.1em;
font-weight:900;
margin-bottom: 0.2em;

}
.advicearea .people{
margin-bottom: 1.0em;
}
.advicearea .people a{
font-size: 0.88em;
text-decoration: underline;
}
.advicearea .stylist .body{
font-size: 0.92em;
}

.advicearea .item {
}
.advicearea .item .title {
margin-top: 10px;
font-size:1.1em;
margin-bottom: 0.2em;
}
.advicearea .item .people a{
font-size: 1.0em;
font-weight:900;
text-decoration: underline;
}
.advicearea .item .body {
font-size: 0.93em
}
.advicearea .item img{

}


@media (max-width: 480px) {
.advicearea .stylist {
width: 100%;
text-align:center;
margin-bottom:10px;
}
.advicearea .stylist img{
float:none
width: 100%;
}
.advicearea .stylist p,
.advicearea .body,
.advicearea .people{
text-align:left;
}

.advicearea .item {
}


}
@media (min-width: 481px) and (max-width: 767px){
.advicearea .stylist {
float:none;
margin-bottom:10px;
}
.advicearea .stylist img{
float:left;
max-width: 50%;
margin-right: 10px;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.advicearea .stylist {
float:left;
max-width: 500px;
margin-bottom:10px;
margin-right: 10px;
}
.advicearea .stylist img{
float:left;
max-width: 50%;
margin-right: 10px;
}
.advicearea .item {
float:left;
max-width: 300px
}

}
@media (min-width: 992px) and (max-width: 1199px) {
.advicearea .stylist {
float:left;
max-width: 500px;
margin-bottom:10px;
margin-right: 10px;
}
.advicearea .stylist img{
float:left;
max-width: 50%;
margin-right: 10px;
}
.advicearea .item {
float:left;
max-width: 400px
}
}
@media (min-width: 1200px) {
.advicearea .stylist {
float:left;
max-width: 700px;
margin-bottom:10px;
margin-right: 10px;
}
.advicearea .stylist img{
float:left;
max-width: 50%;
margin-right: 10px;
}
.advicearea .item {
float:left;
max-width: 400px
}
}



/* */
.proarea{
margin-bottom:20px;

}
.proarea h2{
margin: 10px;
margin-bottom:20px;
}

.processarea{
margin: 0 0;
margin: 0px 5px;
}
.processarea .process{
margin: 10px 5px;
float:left;
text-align:center;
}
.processarea .process img{
margin:auto;
width: 100%;
}
@media (max-width: 480px) {
.processarea .process{
width: 100%;
}
}
@media (min-width: 481px) and (max-width: 767px){
.processarea .process{
width: 23%;
min-height: 420px;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.processarea .process{
width: 23%;
min-height: 440px;
max-height: 440px;
overflow:hidden;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.processarea .process{
width: 23%;
min-height: 500px;
}
}
@media (min-width: 1200px) {
.processarea .process{
width: 23%;
min-height: 500px;
}
}



.processarea .process p{
text-align:left;
padding-top:0.6em;
line-height:1.2;
font-size: 15px;
}



/* */
.styleorder{
position:relative;
zoom:1;
}
.styleorder-inner{
margin: 0 8px 16px 8px;
}


.styleorder:after{
content: "";
    display: block;
    clear: both;
}

.styleorder .image{
margin-bottom:8px;
}
.styleorder .fullangle{
margin-bottom:8px;
}
.styleorder .menubox{
border-radius: 5px;
padding:8px;
margin-bottom:8px;
font-size: 12px;
}
.styleorder .text .h4{
font-weight: bold;
margin-bottom: 0.5em;
}


/* AFLOAT */
.advicearea h2{
background-image:url(../../image/technique/common/ttl_advicearea.png);
height: 50px;
}

.proarea h2{
background-image:url(../../image/technique/common/ttl_proarea.png);
height: 50px;
}

.styleorder h2{
background-image:url(../../image/technique/common/ttl_styleorder.png);
border:none;
text-indent:-1000px;
height: 50px;
}




