@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Open+Sans:700');

.small_menu{
    display: block;    
    width: 446px;
    height: 50px;
    margin: 0 auto;
    text-align: center;
}

.small_menu > li{
    float: left;
    line-height: 50px;
    width: 148px;
}

.small_menu > li a:hover{
    color: #FF9900;
}

.small_menu > li > a{
    color: rgb(127, 127, 127);
}

.small_menu > li > .small_feature{
    color: #FF9900;
}

.use_sp{
    display: none;
}

.title{
    text-align: center;
    margin-top: 30px;
    font-size: 35px
}

.right_contents{
    width: 900px;
    height: 300px;
    margin: 75px auto 0 auto;
    position: relative;
}

.right_contents > h3{
    font-size: 18px;
}

.right_contents > p{
    font-size: 18px;
    line-height: 32px;
}

.right_contents > img{
    bottom: 10px;
    left: 650px;
    position: absolute;

}

.right_contents > .use_img2{
    position: absolute;
    left: 600px;
    bottom: 50px;
}

.right_contents > .use_img3{
    position: absolute;
    left: 560px;
    bottom: 100px;
}

.title_return{
    text-align: center;
    margin-top: 150px;
    font-size: 35px
}

.page_top{
    margin-top: 100px;
}

.main_use_active{
    text-decoration: underline;
}

@media (max-width: 480px) {
    .small_menu{
        display: block;    
        width: 100%;
        height: 50px;
        margin: 0 auto;
        text-align: center;
    }
    
    .small_menu > li{
        float: left;
        line-height: 50px;
        width: 33.3%;
    } 


    .use{
        display: none;
    }
    .use_sp{
        display: block;
        width: 80%;
        margin: 0 auto;
    }

    .title{
        text-align: center;
        margin-top: 30px;
        font-size: 35px
    }
    
    .right_contents{
        width: 100%;
        height: auto;
        margin: 75px auto 0 auto;
        text-align: center;
    }
    
    .right_contents > h3{
        font-size: 18px;
    }
    
    .right_contents > p{
        font-size: 18px;
        line-height: 40px;
    }
    
    .right_contents > img{
        position: static;
        margin: 25px 0;
    }
    
    .right_contents > .use_img2{
        position: static;
        left: 600px;
        bottom: 50px;
    }
    
    .right_contents > .use_img3{
        position: static;
        left: 560px;
        bottom: 100px;
        width: 90%;
    }
    
    .title_return{
        text-align: center;
        margin-top: 150px;
        font-size: 35px
    }
    
    .page_top{
        margin-top: 100px;
    }
    
    .main_use_active{
        text-decoration: underline;
    }
}    
@media screen and (min-width:600px) and (max-width:959px) {
    .small_menu{
        display: block;    
        width: 100%;
        height: 50px;
        margin: 0 auto;
        text-align: center;
    }
    
    .small_menu > li{
        float: left;
        line-height: 50px;
        width: 33.3%;
    } 


    .use{
        display: none;
    }
    .use_sp{
        display: block;
        width: 80%;
        margin: 0 auto;
    }

    .title{
        text-align: center;
        margin-top: 30px;
        font-size: 35px
    }
    
    .right_contents{
        width: 100%;
        height: auto;
        margin: 75px auto 0 auto;
        text-align: center;
    }
    
    .right_contents > h3{
        font-size: 18px;
    }
    
    .right_contents > p{
        font-size: 18px;
        line-height: 40px;
    }
    
    .right_contents > img{
        position: static;
        margin: 50px 0;
    }
    
    .right_contents > .use_img2{
        position: static;
        left: 600px;
        bottom: 50px;
    }
    
    .right_contents > .use_img3{
        position: static;
        left: 560px;
        bottom: 100px;
        width: 50%;
    }
    
    .title_return{
        text-align: center;
        margin-top: 150px;
        font-size: 35px
    }
    
    .page_top{
        margin-top: 100px;
    }
    
    .main_use_active{
        text-decoration: underline;
    }
}