@charset "UTF-8";
.bg {
    opacity: 0;
    transition: opacity 1s ease-out;
}
.bg.active {
    opacity: 1;
}
.bg-1 {
    background-image: url(../img/hairmoist/bg_1.jpg);
}
.bg-2 {
    background-image: url(../img/hairmoist/bg_2.jpg);
}
.top {
    position: relative;
    width: 100%;
}
.top:before {
    content:"";
    display: block;
    padding-top: 54.583%;
}
.top .ttl{
    position: absolute;
}
.top h1.ttl {
    top: 11.328vw;
}
.top p.ttl{
    bottom: 4vw;
    left: 16vw;
}
.top p.ttl img{
    width: 17.7vw;
}
.main{
    padding-bottom: 200px;
}
.index {
    margin-top: 190px;
}
.index__bg{
    background-color: rgba(255,255,255,.9);
}
.main h1.ttl {
    padding: 0;
}
.main .intro p{
    max-width: 420px;
}
.footer__menu li a{
    color: #806b28;
}
.copyright{
    color: #806b28;
}

.conv p.pre{
    font-size: 1.5rem;
    color: #806b28;
}
.conv p.conv__img .caption{
    font-size: 85%;
    padding-top: .8em;
    line-height: 1.6;
}
.conv__nav__list li{
    margin-top: 0;
}
.conv{
    padding-bottom: 0;
    background-color: rgba(255,255,255,.9);
}
.conv__nav{
    margin: 0 auto 65px;
}
.spOnly{
    display: none;
}
@media (max-width: 768px){
    .top:before{
        padding-top: 131.25%;
    }
    .bg-1 {
        background-image: url(../img/hairmoist/bg_1_sp.jpg);
    }
    .bg-2 {
        background-image: url(../img/hairmoist/bg_2_sp.jpg);
    }
    .main {
        padding-bottom: 45px;
    }
    .main h1.ttl img {
        width: 89.375%;
    }
    .top p.ttl {
        top: 5vw;
        right: 4vw;
        bottom: auto;
        left: auto;
    }
    .top p.ttl img {
        width: 37.5vw;
    }
    .top h1.ttl {
        top: auto;
        bottom: 5vw;
    }
    .index__bg {
        background-color: rgba(255,255,255,.85);
    }
    .index{
        margin-top: 0;
    }
    .footer{
        background-color: rgba(255,255,255,.85);
        position: relative;
        z-index: 2;
    }
    .conv{
        background-color: rgba(255,255,255,.85);
    }
    .conv p.pre{
        font-size: 1.4rem;
    }
    .conv p.conv__img .caption{
        width: 90%;
        margin: 0 auto;
        display: block;
    }    
    .conv__nav{
        margin: 0 auto;
    }
    .spOnly{
        display: block;
    }
}