@charset "utf-8";
/* CSS Document */

body .sp{
    display: block;
}

body .pc{
    display: none;
}

/*ここからハンバーガーメニュー*/

.menu-btn {
    width: 58px;
    height: 62px;
}

nav.sp ul{
    width: 85%;
}

nav.sp ul li{
    line-height: 1;
    width: 85%;
}

nav.sp ul li:nth-child(2),nav.sp ul li:nth-child(3),nav.sp ul li:last-child{
    width: 70%;
    margin: 1em auto;
}

nav.sp ul li:nth-child(2) img{
    width: 62%;
}

nav.sp ul li:last-child img{
    width: 86%;
}

nav.sp ul li a{
    padding: 7px 0;
}




#wrap{
    width: 90%;
    border-radius: 30px;
    margin-bottom: 20vw;
}

#wrap .tensaku{
    width: 30%;
    margin-top: -5vw;
    margin-left: 58vw;
}

#rogo {
    width: 85%;
    margin: 25vw auto 18vw;
}

main{
    padding-top: 22vw;
}

.about-portfolio {
    width: 75%;
    margin: 0 auto;
    margin-top: 4vw;
    font-size: 14px;
}

.about-portfolio_text {
    padding-right:2em;
}

#scroll {
    width: 10%;
    margin: 25vw auto 0;
}

#about-here{
    width: 90%;
    margin: 0 auto;
}

main .sp-br{
    display: inline-block;
}

#work {
    width: 52%;
    margin-top: 23vw;
}

main .work-line {
    width: 55%;
    margin: 12vw auto;
}

main .workbox{
    width: 85%;
}

.workbox-in p {
    font-size: 16px;
}

.workbox-in {
    width: 90%;
}

.workbox-in h3 {
    width: 80%;
    margin: 6vw auto 0;
}

.workbox-in .banner-h3 {
    width: 65%;
    margin: 6vw auto 0;
}

.workbox-in .others-h3 {
    width: 63%;
    margin: 6vw auto 0;
}

.workbox-in .web-h3{
    width: 75%;
    margin: 6vw auto 0;
}

.workbox-in p.more{
    width: 30vw;
}

main #about-me {
    width: 85%;
    margin: 15vw auto 8vw;
}

main #about-me img {
    width: 68%;
}



main .about-me-wrap .me-img {
    width: 65%;
}

main .about-me-wrap .about-me-wrap-in {
    width: 90%;
    margin: 5vw auto 0;
}

main .about-me-wrap .about-me-wrap-in h3 {
    width: 30%;
    margin-left:2em;
}

main .about-me-wrap .about-me-wrap-in .aboutme-name {
    font-size:20px;
}

main .aboutme-skill-h3 {
    width: 90%;
}

main .aboutme-skill-h3 .skill-in-l {
    margin: 18vw auto 0;
    font-size: 18px;
}

main .aboutme-skill {
    margin-top: 10vw;
    width: 90%;
}

main .aboutme-skill h4 {
    width: 35%;
    padding-left: 1em;
}

main .aboutme-skill p {
    width: 60%;
    font-size: 16px;
    margin-left: 0.5em;
}

main #contact {
    width: 55%;
    margin: 20vw 0 10vw 5vw;
}

main .mailto {
    font-size: 18px;
}

main .mailto img {
    width: 8vw;
}

main .me-last {
    width: 55%;
    margin: 20vw auto 3vw;
}

main .last-text {
    font-size: 16px;
    margin-bottom: 20vw;
}