*{
    font-family: 'Helvetica',
    Arial, 'Noto Serif JP', serif;
    font-size:105%;
    color:#808287; 
}
html{
    font-size:10px;
}

img{
    max-width:100%;
}

#top{
    background-color:#f7f7f7;
    text-align:center;
    margin-bottom:2.5rem;   
}

header{
    position:relative;
    width:100%;
    height:auto;
    padding:2rem 0;
    box-shadow: 0px 20px 20px -20px rgba(0, 0, 0, 0.2);
    z-index: 200;
}

header h1{
    margin-bottom:0;
}

.logo{
    width:30%;
}

h3{
    position:relative;
    text-align:center;
    font-size:2rem;
    line-height:4rem;
    /* display:inline-block; */
    margin-bottom:10px;
    /* border-bottom:solid 1px #b0b3b6; */
    /* text-decoration: underline #b0b3b6; */
}
h3::before {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    width: 80%;
    height: 1px;
    margin: 0 auto;
    text-align: center;
    background-image: -webkit-linear-gradient(left, transparent, #b0b3b6 25%, #b0b3b6 75%, transparent);
    background-image: linear-gradient(to right, transparent, #b0b3b6 25%, #b0b3b6 75%, transparent);
    background-position: center;
    background-repeat: no-repeat;
}

#intro{
    background-color:#FFF;
    margin-bottom:2.5rem;
}

#intro h4{
    margin-bottom:3rem;
}

#intro .title {
    text-align:center;
    width: 70%;
    height: 30%;
    margin-left:15%;
    background: none;
    border:solid 1px #CCC;
    border-radius: 50%;
    font-size:1.8rem;
    line-height:50px;
    margin-bottom:1rem;
}

.intro-box{
    /* height:43vh; */
    margin-top:2.5rem;
    background:url('../img/intro_bg.jpg') no-repeat center center;
    background-size:50%;

}

#intro .leads{
    margin:1rem 0 1rem;
    font-size:1.3rem;
}

#intro .intro-icons{
    width:80%;
}

#about{
    margin-bottom:2rem;
}

.graph{
    max-width:100%;
    margin-top:2rem;
}

.zeal-img{
    width:50%;
    display:block;
    margin:0 auto 3rem;
}

.lipo-ex{
}

#feature{
    padding:2rem;
    background-color:#f7f7f7;
}

#feature h4{
    margin-top:2rem;
    font-size:1.6rem;
    font-weight: bold;
}

.feature-img{
    display:block;
    width:60%;
    margin:1rem auto;
}

#info{
    padding:2rem;
}

#faq{  
}


.package{
    width:80%;
}

.package-info{
    width:60%;
}

.btn-primary{
    background-color:green;
    border-color:green;
    text-align:center;

}

.btn-primary a{
    color:#FFF;
    text-decoration:none;
}

p, li{
    font-size:1.4rem;
    line-height:2.3rem;
}

dt{
    font-size:1.6rem;
    line-height:2.4rem;
    background-color:#EEE;
    padding:0.5rem;
}

dd{
    font-size:1.6rem;
    line-height:2.4rem;
    padding:0.5rem;
}

.shop-btn{
    width:90%;
    background-color:#cbcaba;
    padding:1rem;
    font-size:1.2rem;
}

.shop-btn:hover{
    background-color:#a6a698;
    color:#FFF;
}


.totop a{
    display:block;
    text-align:center;
    width:140px;
    padding:5px;
    border-radius: 10px;
    background:none;
    border:solid 1px #76787a;
    color:#76787a;
    text-decoration: none;
}
.pc{
    display:none;
}

footer{
    background-color:#aaadb0;
    padding:50px 0;
    text-align:center;
}

footer p{
    color:#FFF;
}

@media screen and (min-width: 641px) {/* スマホ以上*/
    h3{
        margin-top:4rem;
        font-size:3rem;
        margin-bottom:4rem;
    }
    p,li{
        font-size:1.7rem;
        line-height:2.7rem;
    }

    .package{
        width:65%;
        text-align:right;
    }

    .small{
        font-size:14px;
    }

    dt,th{
        font-size:1.8rem;
        line-height:2.4rem;
    }
    
    dd,td{
        font-size:1.7rem;
        line-height:2.6rem;
    }

    #faq{}
    #faq dl{

    }

    a{
      transition:0.8s;  
    }

    .button{
        cursor:pointer;
    }

    #intro{
        /* height:580px; */
        /* background-size:26%; */
        background-size:cover;
        font-size:2rem;
        margin-bottom:50px;
    }

    #intro .title {
        text-align:center;
        margin-left:37%;
        width: 120px;
        height: 60px;
        background: none;
        border:solid 1px #CCC;
        border-radius: 50%;
        font-size:2.8rem;
        line-height:50px;
    }

    #intro .intro-icons{
        width:53%;
    }

   .intro-box{
     height:580px;
    }

    #intro .leads{
        margin:5rem 0 2rem;
        font-size:2.3rem;
        line-height:3.6rem;
    }
    .pc{
        display:block;
    }

    .pc a{
        color:#7d7d72;
    }

    .logo{
        width:25%;
    }

    #info{
        margin-top:80px;
    }

    #about{
        margin-bottom:50px;
    }

    #about p{
        font-size: 2rem;
        line-height: 4.3rem;
    }

    .zeal-img{
        width:26%;
        margin-bottom:2rem;
    }

    .graph{
        width:55%;
        margin:3.5rem auto 0;
    }

    #feature h4{
        margin-top:2rem;
        font-size:2rem;
        font-weight: bold;
        padding-bottom:1.5rem;
    }

    #feature p{
        line-height:2.8rem;
        padding-right:1rem;
    }

    .japanmade, .looks{
        margin-top:4rem;
    }

    .feature-img{
        float:left;
        width:200px;
        margin:0 1.8rem 0 0;
    }

    .shop-btn{
        width:50%;
        padding:2rem;
        font-size:2rem;
        transition: 1s;
        margin-top:30px;
    }

    .shop-btn:hover{
        cursor: pointer;
        letter-spacing: 0.3rem;
    }

    .totop a{
        width:200px;
        padding:20px;
    }

    .totop a:hover{
        background-color:#76787a;
        border:solid 1px #76787a;
        color:#FFF;
    }  

}