@charset "utf-8";

/* #mv
--------------------------------------------------*/

#mv {
    position: relative;
}
#mv .photo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url(../img/home/sp/img_mv.jpg) no-repeat center bottom / cover;
}

#mv .ttl {
    position: absolute;
    right: 0;
    bottom: 60px;
    left: 0;
    transition: all 1.5s ease;
    opacity: 0;
}

#mv .scroll {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0 auto;
    text-align: center;
    box-sizing: border-box;
    padding-bottom: 25px;
    overflow: hidden;
    transition: all .8s ease 1s;
    opacity: 0;
}

#mv .scroll .amiri {
    font-size: 10px;
    line-height: 1;
    color: #afa8a4;
}

#mv .scroll .bar {
    width: 1px;
    height: 0;
    background-color: #afa8a4;
    display: block;
    animation-name: scrollborder;
    animation-fill-mode:both;
    animation-duration:1.5s;
    animation-timing-function: cubic-bezier(0.15, 0.31, 0.24, 0.88);
    visibility: visible !important;
    animation-iteration-count: infinite;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

#mv.start .ttl {
    opacity: 1;
}

#mv.start .scroll {
    opacity: 1;
}

@keyframes scrollborder { 
    0% { height: 0; bottom: 20px; } 50% { height: 20px; bottom: 0; } 100% { height: 20px; bottom: -20px;  }
}

@media screen and (max-width: 768px) {

}




/* #merit
--------------------------------------------------*/

#merit {
    background: #eee8e1;
    padding: 25px 0;
}

@media screen and (max-width: 768px) {
    
}




/* #salonMenu
--------------------------------------------------*/

#salonMenu {
    padding: 35px 0;
}

#salonMenu .basicTips {
    text-align: center;
    margin-bottom: 20px;
}

#salonMenu .basicTips .ttl {
    font-size: 16px;
}

@media screen and (max-width: 768px) {
    
}




/* #salonMenu
--------------------------------------------------*/

#salonMenu .menuBox {}

#salonMenu .menuBox + .menuBox {
    margin-top: 30px;
}

#salonMenu .menuBox a {
    display: block;
    position: relative;
}

#salonMenu .menuBox .figure {
    max-width: 580px;
    width: 90.625%;
    margin-right: 0;
    margin-left: auto;
}

#salonMenu .menuBox .ttl {
    position: relative;
    max-width: 314px;
    width: 49.0625%;
    margin-top: -70px;
    transition: all 1.5s ease;
    transform: translateX(40px);
    opacity: 0;
}

#salonMenu .menuBox .arrow {
    position: absolute;
    right: 15px;
    bottom: 0;
    max-width: 85px;
    width: 13.2813%;
    transition: all 1s ease .8s;
    transform: translateX(-20px);
    opacity: 0;
}

#salonMenu .menuBox.active .ttl {
    transform: translateX(0);
    opacity: 1;
}

#salonMenu .menuBox.active .arrow {
    transform: translateX(0);
    opacity: 1;
}

@media screen and (max-width: 768px) {
    
}




/* #coupon
--------------------------------------------------*/

#coupon {
    background: #eee8e1;
    padding: 40px 0;
}

#coupon .bnr {
    margin-top: 20px;
    margin-bottom: 40px;
}

@media screen and (max-width: 768px) {
    
}




/* #salonGuide
--------------------------------------------------*/

#salonGuide {
    padding: 40px 0;
}

#salonGuide .figure {
    margin-bottom: 35px;
}

#salonGuide .btn {
    max-width: 195px;
    width: 100%;
    margin: 15px auto 0;
}
#salonGuide .btn a {
    display: block;
    background: #874b6a;
    font-size: 16px;
    line-height: 1;
    color: #FFF;
    text-align: center;
    padding: 15px 0;
}

@media screen and (max-width: 768px) {
    
}




/* #
--------------------------------------------------*/


@media screen and (max-width: 768px) {
    
}




/* #
--------------------------------------------------*/


@media screen and (max-width: 768px) {
    
}