@charset "UTF-8";

/*=============================================================
#mainimage
=============================================================*/

#mainimage {
width: 100%;
height: 100vh;
position: relative;
overflow: hidden;
z-index: 0;
}

#mainimage video{
position: absolute;
width: 100%;
height:100vh;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1000;
object-fit: cover;
}

#mainimage .logo{
position: absolute;
width: 163px;
  top: 10%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
}
#mainimage .copy{
position: absolute;
width: 100%;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
}
/*====== 9-1-1 縦線が動いてスクロールを促す =======*/

/*スクロールダウン全体の場所*/
.scrolldown1{
    /*描画位置※位置は適宜調整してください*/
  position:absolute;
  left:50%;
  bottom:10px;
    /*全体の高さ*/
  height:50px;
}

/*Scrollテキストの描写*/
.scrolldown1 span{
    /*描画位置*/
  position: absolute;
  left:-15px;
  top: -15px;
    /*テキストの形状*/
  color: #eee;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
}

/* 線の描写 */
.scrolldown1::after{
  content: "";
    /*描画位置*/
  position: absolute;
  top: 0;
    /*線の形状*/
  width: 1px;
  height: 30px;
  background: #eee;
    /*線の動き1.4秒かけて動く。永遠にループ*/
  animation: pathmove 1.4s ease-in-out infinite;
  opacity:0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
  0%{
    height:0;
    top:0;
    opacity: 0;
  }
  30%{
    height:30px;
    opacity: 1;
  }
  100%{
    height:0;
    top:50px;
    opacity: 0;
  }
}

/*=============================================================
#Identity
=============================================================*/
#Identity{
padding: 60px 0;
text-align: center;
}
#Identity .logo{
width: 100px;
margin: auto;
}
#Identity p{
line-height: 2.5em;
}
#Identity .img{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
#Identity .img li{
width: 49%;
margin-bottom: 1%;
}
/*=============================================================
#Service
=============================================================*/
#Service{
padding: 60px 0;
text-align: center;
}
#Service ul li.Eyebrow{
background: url("../image/Service_Eyebrow.jpg");
background-repeat: no-repeat;
background-size:80% auto;
background-position: right;
}
#Service ul li.Aesthetic{
background: url("../image/Service_Aesthetic.jpg");
background-repeat: no-repeat;
background-size:80% auto;
background-position: left;
}
#Service ul li.Haircare{
background: url("../image/Service_Haircare.jpg");
background-repeat: no-repeat;
background-size:80% auto;
background-position: right;
}
#Service ul li.Makeup{
background: url("../image/Service_Makeup.jpg");
background-repeat: no-repeat;
background-size:80% auto;
background-position: left;
}
#Service ul li.Eyelash{
background: url("../image/Service_Eyelash.jpg");
background-repeat: no-repeat;
background-size:80% auto;
background-position: right;
}
#Service ul li.Bridal{
background: url("../image/Service_Bridal.jpg");
background-repeat: no-repeat;
background-size:80% auto;
background-position: left;
}
#Service ul li.Nail{
background: url("../image/Service_Nail.jpg");
background-repeat: no-repeat;
background-size:80% auto;
background-position: right;
}
#Service ul li:nth-child(odd){
margin: 30px 0 30px auto;
text-align: left;
}
#Service ul li:nth-child(even){
margin: 30px auto 30px 0;
text-align: right;
}
#Service ul li{
height: 120px;
}
#Service ul li .body{
position: relative;
height: 120px;
}
#Service ul li h3{
display: block;
margin: 0 0 0 auto;
font-size: 30px;
position: absolute;
top: 50%;
left: 0;
transform:  translateY(-50%);
-webkit- transform: translateY(-50%);
}
#Service ul li:nth-child(even) h3{
right: 0;
}
#Service ul li h3 a{
color: #333;
background: #fff;
padding: 8px 20px;
}
/*=============================================================
#Recruit
=============================================================*/
#Recruit{
margin: 80px 0;
padding: 60px 0;
text-align: center;
background: url("../image/Recruit_bg.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
#Recruit p{
line-height: 2.5em;
}