@charset "UTF-8";

*{
    padding: 0;
    margin: 0;
}

html{
    font-size:62.5%;
}

body{
    width:100%;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

section{
    margin: 0 20rem;
}

img{
    width:80%;
    height:60%;
    max-width: 100%;
    height: auto;

}


.flex{
    display: flex;
}

div.inner{
    width: 100%;
    text-align: center;
    font-size: 2rem;
    margin: 0 3rem;
}

/*-----top-----*/
#top{
    background-color: #aac2e7;
    margin-top: 10rem;
}

#top h2{
    font-size: 3rem;
    color:#3d77dc
}


div.btn h2{
        width: 60%;
        height: 60%;
        line-height: 200px;
        background-color: #ffffff;
        border-radius: 50%;
        text-align: center;
}

p.top-text, p.middle-text, p.bottom-text{
    display: inline-block;
    text-align: left;
    margin-top: 8rem;
}

/*----main-title---*/
#main-title{
    background-color: #5584d5;
    padding: 4rem 15rem 5rem ;
}

div.title h1{
    font-size: 10rem;
    color:  #ffffff;
}

div.title p{
    font-size: 6rem;
    color:  #ffffff;
    text-align: right;
}


/*------middle-----*/
#middle{
    background-color: #66d350;
}

#middle h2{
    font-size: 3rem;
    color:#107118
}

/*-------bottom------*/
#bottom{
    background-color: #ebdc4d;
}

#bottom h2{
    font-size: 3rem;
    color:#a3b126
}

/*---others---*/
#others{
    margin-top: 1rem;
}

h3{
    font-size: 3rem;
    text-align: center;
}

p.blue{
    font-size: 2rem;
    color: #5584d5;
    text-align: center;
 
}

/*----access----*/
#access{
    margin-bottom: 10rem;
}

h4{
    font-size: 4rem;
    margin-top: 1rem;
}
#access div.flex{
    width: 100%;
    font-size: 3rem;
}


div.access{
    padding-left: 5rem;
}