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


#main-box{
margin: 130px auto 60px;
position: relative;
width: 94%;
max-width: 1600px;
}

#main-photo{
background-image: url(../img/common/in1.jpg);
background-position: center;
background-size: cover;
width: 65%;
}

#main-wrap{
background-color: rgba(255,255,255,0.3);
height: 600px;
box-sizing: border-box;
}

#main-text{
position: absolute;
top: 150px;
right: 6%;
font-size: 50px;
text-align: right;
letter-spacing: 2px;
line-height: 1.8;
font-family: 'Lora', serif;
overflow: hidden;
animation-name: maintext;
animation-duration: 1.5s;
animation-timing-function: ease;
animation-delay: 0;
animation-iteration-count: 1;
-webkit-animation-name: maintext;
-webkit-animation-duration: 1.5s;
-webkit-animation-timing-function: ease;
-webkit-animation-delay: 0;
-webkit-animation-iteration-count: 1;
}

@keyframes maintext{
0% {opacity: 0;margin-right: 5%}
100% {opacity: 1;margin-right: 0%}
}

@-webkit-keyframes maintext{
0% {opacity: 0;margin-right: 5%}
100% {opacity: 1;margin-right: 0%}
}





#index-box{
margin: 0 auto;
max-width: 1500px;
padding: 0 0 150px;
}















#intro-box{
background-image: url(../img/common/in3.jpg);
background-position: center;
background-size: cover;
margin: 0 3% 60px;
padding: 120px 3%;
}

#intro-text{
background-color: rgba(255,255,255,0.9);
padding: 40px 8% 60px;
box-sizing: border-box;
line-height: 2;
box-shadow: 1px 2px 2px #AAAAAA;
}

#intro-text h1{
line-height: 2;
padding-bottom: 8px;
margin-bottom: 20px;
border-bottom: 0.5px solid #888888;
}

#intro-text h1 span{
font-family: 'Lora', serif;
font-size: 24px;
letter-spacing: 3px;
margin-right: 12px;
}





#link-box{
margin: 0 1% 60px;
}

.hair-link{
float: left;
width: 46%;
display: block;
text-align: center;
margin: 0 2%;
box-sizing: border-box;
background-image: url(../img/index/hair.jpg);
background-position: center;
background-size: cover;
}

.eye-link{
float: left;
width: 46%;
display: block;
text-align: center;
margin: 0 2%;
box-sizing: border-box;
background-image: url(../img/index/eyelash.jpg);
background-position: center;
background-size: cover;
}

.hair-link h2{
padding: 60px 3%;
font-size: 22px;
letter-spacing: 2px;
font-family: 'Lora', serif;
background-color: rgba(255,255,255,0.3);
}

.eye-link h3{
padding: 60px 3%;
font-size: 22px;
letter-spacing: 2px;
font-family: 'Lora', serif;
background-color: rgba(255,255,255,0.3);
}

.hair-link h2:hover,.eye-link h3:hover{
background-color: rgba(0,0,0,0.6);
color: #FFFFFF;
}





#concept-box{
margin: 0 3% 250px auto;
width: 70%;
height: 600px;
position: relative;
background-image: url(../img/common/in2.jpg);
background-position: center;
background-size: cover;
}

#concept-text{
background-color: rgba(255,255,255,0.9);
position: absolute;
top: 250px;
left: -35%;
width: 75%;
box-sizing: border-box;
padding: 50px 6%;
box-shadow: 2px 6px 9px #CCCCCC;
font-size: 13px;
color: #666666;
}

#concept-title{
border-bottom: 0.5px solid #888888;
margin-bottom: 20px;
font-size: 13px;
color: #111111;
}

#concept-title span{
font-size: 24px;
letter-spacing: 2px;
font-family: 'Lora', serif;
margin-right: 5px;
}

#concept-text h4,#concept-text h5,#concept-text h6{
font-size: 15px;
margin-bottom: 5px;
color: #111111;
}






@media(min-width: 992px){




}


/*tablet*/
@media(min-width: 768px) and (max-width: 991px){



}

/*smart-phone*/
@media(max-width: 767px){


#main-box{
margin: 70px auto 60px;
}

#main-wrap{
height: 500px;
box-sizing: border-box;
}

#main-text{
font-size: 30px;
}




#intro-box{
margin: 0 3% 50px;
padding: 60px 5%;
}

#intro-text{
padding: 40px 8% 50px;
}

#intro-text h1 span{
font-size: 20px;
}



.hair-link h2{
padding: 60px 3%;
font-size: 18px;
}

.eye-link h3{
padding: 60px 3%;
font-size: 18px;
}




#concept-box{
margin: 0 3% 350px auto;
width: 80%;
height: 400px;
}

#concept-text{
top: 120px;
left: -15%;
width: 100%;
padding: 40px 8%;
font-size: 12px;
}

#concept-title{
font-size: 12px;
}

#concept-title span{
font-size: 20px;
}

#concept-text h4,#concept-text h5,#concept-text h6{
font-size: 14px;
margin-bottom: 5px;
}



}