@charset "UTF-8";

body {
    opacity: 0;
    animation: bodyAppear .3s .3s forwards;
}



@keyframes bodyAppear {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


@media screen and (max-width:1024px) {}
@media screen and (max-width:767px) {
    .jobs__section--mv img{
        object-fit: cover;
        height: 100px;
    }
}
/*============================
	j-hairmake 
============================*/
.j-hairmake {
    padding-bottom: 0;
}
.j-hair__box{
    width: 95%;
    margin: 0 0 0 auto;
    padding: 60px 5% 80px;
    border-radius: 0 30px 0 30px;
}
.j-hair__box {
    background: rgba(240,238,234,.5);
}

.j-hair__img{
    max-width: 500px;
    width: 55%;
    margin: -100px 0 0 -10%;
}
.j-hair__txtwrap{
    width: 50%;
}
.j-hair__btm--txtwrap{
    width: 53%;
}
.j-hair__map{
    width: 40%;
}
.j-hair__map img{
    display: block;
    margin: 0 auto;
    max-width: 254px;
}
.j-hair__ul.ul01{
    width: 55%;
}
.j-hair__ul.ul02{
    width:40%;
}
.j-hair__video {
    display: block;
}

.j-hair__video.video01 {
    width: 22%;
}

.j-hair__video.video02 {
    width: 38%;
}

.j-hair__video.video03 {
    width: 38%;
}
.j-hair03__btm--txtwrap{
    width: 48%;
}
.j-hair03__btm--right{
    width: 50%;
}
.j-hair03__btm--img{
    max-width: 300px;
    width: 48%;
}
@media screen and (max-width:1024px) {
    .j-hair__box{
        width: 95%;
        margin: 0 0 0 auto;
        padding: 40px 5% 60px;
        border-radius: 0 20px 0 20px;
    }

    
    .j-hair__img{
        width: 55%;
        margin: -60px 0 0 -10%;
    }
    .j-hair__txtwrap{
        width: 50%;
    }

    .atc01 .j-hair__flex {
        margin-bottom: 20px;
    }
    .j-hair__btm--txtwrap{
        width: 53%;
    }
    .j-hair__map{
        width: 40%;
    }
    .j-hair__map img{
        width: 80%;
        margin: 0 auto;
    }
    .j-hair__ul.ul01{
        width: 55%;
    }
    .j-hair__ul.ul02{
        width:40%;
    }

    
    .j-hair__video.video01 {
        width: 22%;
    }
    
    .j-hair__video.video02 {
        width: 38%;
    }
    
    .j-hair__video.video03 {
        width: 38%;
    }
    .j-hair03__btm--txtwrap{
        width: 48%;
    }
    .j-hair03__btm--right{
        width: 50%;
    }
    .j-hair03__btm--img{
        width: 48%;
    }

}

@media screen and (max-width:767px) {
    .j-hair__box{
        width: 95%;
        margin: 0 0 0 auto;
        padding: 10px 5% 40px;
        border-radius: 0 20px 0 20px;
    }

    
    .j-hair__img{
        width: 100%;
        margin: -30px 0 30px -10%;
    }
    .j-hair__txtwrap{
        width: 100%;
    }

    .atc01 .j-hair__flex {
        margin-bottom: 30px;
    }
    .j-hair__btm--txtwrap{
        width: 100%;
        margin-bottom: 20px;
    }
    .j-hair__map{
        width: 100%;
    }
    .j-hair__map img{
        width: 80%;
        margin: 0 auto;
    }
    .j-hair__ul.ul01{
        width: 100%;
    }
    .j-hair__ul.ul02{
        width:100%;
    }

    
    .j-hair__video.video01 {
        width: 60%;
        margin-bottom: 10px;
    }
    
    .j-hair__video.video02 {
        width: 100%;
        margin-bottom: 10px;
    }
    
    .j-hair__video.video03 {
        width: 100%;
    }
    .j-hair03__btm--txtwrap{
        width: 100%;
        margin-bottom: 20px;
    }
    .j-hair03__btm--right{
        width: 100%;
        display: flex;
    }
    .j-hair03__btm--img{
        width: 48%;
    }

}


/*============================
  j-dressing 
============================*/
.j-dressing  {
    padding-bottom: 0;
}

.j-dress__img{
    width: 48%;
    max-width: 500px;
}

@media screen and (max-width:1024px) {
    .j-dress__img{
        width: 48%;
    }
    .j-dress__lead{
        text-align: left;
    }
    .j-dress__lead .spnone{
        display: none;
    }
}

@media screen and (max-width:767px) {
    .j-dress__img{
        width: 100%;
        margin: 0 auto 15px;
    }
}


/*============================
 j-attender
============================*/


.j-attend__item{
    width: 48%;
    max-width: 500px;
}

@media screen and (max-width:1024px) {
    .j-attend__item{
        width: 48%;
    }
}

@media screen and (max-width:767px) {
    .j-attend__ttl .small{
        font-size: 1.6rem;
    }
    .j-attend__item{
        width: 100%;
        margin: 0 auto 20px;
    }
}