body {
    margin: 0;
    padding: 0;
}

#home {
    /*margin: 0 10%;
    background-color: rgba(228, 239, 253, 0.966);
    */
}

input:focus {
    background-color: rgb(228, 239, 253);
}

.body-margin {
    margin: 5% 10%;
}

.title {
    text-align: center;
    margin: 5% auto;
}

span>img {
    height: 50px;
}

/* Header section */
#head {
    display: flex;
    height: 20vw;
    margin: 0 10%;
}

.res-header-wrap {
    display: none;
}

.logo {
    width: 70%;
    margin: auto;
}

.logo>a>img {
    width: 30%;
}

.sns {
    width: 30%;
    display: flex;
    justify-content: flex-end;
}

.sns-icon {
    width: 8%;
    margin: auto 10% auto 0;
}

.sns-icon:hover {
    filter: grayscale(100);
}

/* Navigation section */
#nav {
    display: flex;
    justify-content: center;
    margin: 0 auto 3% auto;
}

.nav-item {
    width: 22%;
    text-align: center;
    font-size: 20px;
    font-weight: 800;
    position: relative;
}

.nav-item>a {
    color: rgb(93, 158, 255);
    text-decoration: none;
}

.nav-item>a:hover {
    text-decoration: none;
}

.nav-item>.nav-img {
    position: absolute;
    width: 50%;
    top:-45px;
    left: 70px;
    z-index: -1;
    display: none;
}

.nav-item:hover + .nav-item>.nav-img{
    display: block;
}


/* Works */
#works {
}

.works-wrap {
    display: flex;
}

.graphic {
    flex-direction: row-reverse;
}

.works-img {
    width: 50%;
}

.works-detail {
    width: 50%;
    padding: 2% 0;
}

.works-detail>h2 {
    color: rgb(93, 158, 255);
}

.works-detail>p {
    margin: 0 5%;;
}

/* skills */
#skills {
    text-align: center;
}

.skills-wrap {
    display: flex;
}

.skills-img {
    width: 50%;
}

.skills-img>img {
    opacity: 0.05;
    height: 300px;
    width: 100%;
}

.skills-detail {
    width: 50%;
    padding: 2% 0;
}

.skills-detail>h2 {
    color: rgb(93, 158, 255);
}

.icons>img {
    width: 20%;
    margin: auto;
}

/* blog */
#blog {
    text-align: center;
}

#blog>p {
    width: 60%;
    margin: 0 auto 5% auto;
}

#blog>a>img {
    width: 60%;
    opacity: 0.2;
}

#blog>a>img:hover {
    opacity: 1;
}

/* language */
#language {
    margin: 5% 10% 13% 10%;
    text-align: center;
}

.language-img>h2 {
    color: rgb(93, 158, 255);
}

.language-img>p {
    width: 80%;
    margin: 1% auto;
}

.language-wrap {
    display: flex;
}

.language-img {
    width: 50%;
    height: 400px;
}

.language-img>a>img {
    width: 80%;
    height: 300px;
    opacity: 0.5;
    transition: 1s;
}

.language-img>a>img:hover {
    width: 90%;
    height: 350px;
    opacity: 1;
}

/* footer */
#footer {
    margin: 5% 10% 0 10%;
    text-align: center;
}

.footer-wrap {
    display: flex;
}

.footer-content {
    width: 30%;
    margin: 0 auto;
}

.footer-menu>ul {
    list-style-type: none;
}

.footer-blog {
    padding: 1%;
}

.footer-sns {
    text-align: center;
}

.footer-facebook, .footer-twitter, .footer-instagram {
    text-align: center;
    margin: 0 auto;
}

.profile {
}

.profile-sns {
    display: flex;
    flex-direction: row;
}

.profile-facebook, .profile-twitter, .profile-instagram {
    margin: auto;
}

/* copyright */
#copyright {
    margin: 0 auto;
}


/* Portfolio page */

.wireframe-img {
    height: 100%;
    text-align: center;
}

.wireframe-img>a>img {
    height: 100vh;
    margin: 0 auto;
    text-align: center;
}

.banner-img {
    width: 100%;
    height: 50vh;
    margin: auto;
    text-align: center;
}

.banner-img>a {
    margin: auto;
}

.banner-img>a>img {
    height: 50vh;
    margin: auto;
}

#graphicDesign {
    margin: auto;
}

.shutterstock-title {
    width: 100%;
}

.shutterstock-wrap {
    display: flex;
}

.shutterstock {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    width: 30%;
}

.shutterstock-img {
    height: 92%;
}

.shutterstock-img>a>img {
    margin: auto;
}


/* About page */
#about-content {
    margin: 5% 10%;
}

.about-nav {
    display: flex;
    width: 100%;
    height: 370px;
    align-items: flex-end;
}

.about-nav-child {
    margin: 0 auto;
    width: 25%;
}

#qs, #travel, #hobby {
    display: none;
}

#biography-btn {
    width: 50%;
}

#qs-btn, #travel-btn, #hobby-btn {
    width: 16%;
}

#biography-btn, #qs-btn, #travel-btn, #hobby-btn {
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-top: 1px solid black;
    /*border-bottom: 1px solid black;*/
    border-top-left-radius: 10%;
    border-top-right-radius: 10%;
}
#biography-btn>img, #qs-btn>img, #travel-btn>img, #hobby-btn>img {
    border-top-left-radius: 10%;
    border-top-right-radius: 10%;
}

#biography-btn:hover, #qs-btn:hover, #travel-btn:hover, #hobby-btn:hover {
    opacity: 0.5;
    cursor: pointer;
}

.transition {
    width: 50%;
    transition: 1s;
}

.transition2 {
    width: 16%;
    transition: 1s;
}

.travel-wrap {
    height: 400px;
}

.travel-proverb {
    font-size: 30px; 
    text-align: center; 
    padding: 30px; 
    margin:0; 
    color:black;"
}

.travel-image-wrap {
    position: relative;
}

.travel-image {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}

.travel-image:hover {
    opacity: 1;
}

.travel-image>a>img {
    height: 100%;
    width: 100%;
}

.res-travel-title {
    display: none;
}

.about-hr {
    display: none;
}

.res-hobby-title {
    display: none;
}



/* Contact page */

#form {
    margin: 5% auto 35% auto;
    height: 500px;
}

#contact-btn {
    width: 30%; 
    margin:0 auto;
    display: block; 
    font-family: Arial, Helvetica, sans-serif; 
    font-weight: 700;
}

#contact-btn:hover {
    cursor: pointer;
    background-color: rgb(93, 158, 255);
    color: white;
    box-shadow: none;
}



/* test */

#skills, #language, #graphicDesign, #about-content, #contact {
    background-image: url("images/bg-img.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}


.res-web-design {
    display: none;
}


/* Responsive */

@media (max-width:700px) {


    /* index.html */

    /* header */
    #head {
        margin: auto;
        width: 100%;
    }

    .res-header-wrap {
        display: flex;
        flex-direction: row;
    }

    .res-profile-btn {
        width: 25%;
    }

    .res-profile-btn>a {
        padding: 0;
        line-height: 0;
    }

    .res-menu {
        width: 25%;
    }

    .res-logo {
        margin: 0 auto;
        width: 50%;
        text-align: center;
    }

    .res-logo>a>img {
        width: 50%;
        
    }

    .desk-logo {
        display: none;
    }

    .logo>a>img {
        width: 80%;
        text-align: center;
    }

    .sns {
        display: none;
    }

    .sns-icon {
        width: 30%;
        margin-right: 0;
        text-align: center;
    }

    .sns-icon>a>img {
        width: 50%;
        
    }

    #nav {
        display: none;
    }

    .res-nav {

    }

    .res-nav-item>a:hover {
        color: rgb(93, 158, 255);
    }

    /* Works */


    #works {
        margin: 0 auto;
    }

    .title {
        margin: 5% auto;
        text-align: center;
    }

    .works-wrap {
        width: auto;
        flex-direction: column;
        height: auto;
        margin: 0 10%;
    }

    .works-img {
        width: 100%;
    }

    .works-img>img {
        width: 100%;
        height: auto;
    }

    .works-detail>p {
        margin: auto;
    }

    .res-title {
        display: block;
        margin: 0 auto 5% auto;
    }

    .desk-title {
        display: none;
    }

    .works-detail {
        width: 100%;
    }

    /* Skills */

    #skills {
        margin-bottom: 15%;
    }

    .skills-wrap {
        flex-direction: column-reverse;
        width: 100%;
        height: auto;
    }

    .skills-img {
        width: 100%;
        height: auto;
    }

    .skills-detail {
        width: 100%;
        height: auto;
    }


    /* blog */

    #blog {
        margin-bottom: 15%;
    }

    #blog>p {
        width: 100%;
    }

    #blog>a>img {
        width: 100%;
    }


    /* language */

    #language {
        margin-bottom: 0;
    }

    .language-wrap {
        flex-direction: column;
        height: auto;
    }

    .language-img {
        width: 100%;
        height: auto;
    }

    .language-img>p {
        width: 100%;
    }

    .language-img>a>img {
        height: auto;
        width: 100%;
    }

    .language-wrap {
        width: 100%;
    }

    .japanese-language {
        margin-bottom: 15%;
    }

    .language-img>a>img:hover {
        opacity: 1;
    }


    /* footer */

    .footer-wrap {
        display: none;
    }

    .profile-btn {
        display: none !important;
    }


    /* portfolio page */

    .banner-img {
        height: auto;
    }

    .banner-img>a>img {
        height: auto;
    }

    #graphicDesign {
        margin: auto;
    }

    .shutterstock-wrap {
        flex-direction: column;
    }

    .shutterstock {
        width: 100%;
    }


    /* about page */

    .about-nav {
        height: auto;
    }

    #about-content {
        margin: 0 10%;
    }

    #travel {
        width: 100%;
    }

    .travel-proverb {
        font-size: 20px;
        font-style: italic;
    }

    .travel-wrap {
        height: auto;
        margin: auto;
    }

    .travel-image-wrap {
        height: 200px;
    }

    .desk-travel-title {
        display: none;
    }

    .res-travel-title {
        display: block;
    }

    .about-hr {
        display: block;
    }

    .desk-hobby-title {
        display: none;
    }

    .res-hobby-title {
        display: block;
    }

    .hobby-wrap:nth-child(1) {
        width: auto;
        height: auto;
        margin-top: 10%;
    }


    /* contact page */

    #form {
        width: auto;
        margin: 0 10%;
        height: auto;
    }

    form {
        width: 100%;

    }

    #contact-btn {
        width: 50%;
    }

    #copyright {
        margin-top: 20%;
    }


    /* heading width */

    .works-heading {
        width: 9em;
    }

    .skills-heading {
        width: 8em;
    }

    .blog-heading {
        width: 7em;
    }

    .language-heading {
        width: 16em;
    }

    .web-heading {
        width: 6em;
    }

    .webdesign-heading {
        width: 9em;
    }

    .webbanner-heading {
        width: 10em;
    }

    .graphicDesign-heading {
        width: 18em;
    }

    .about-heading {
        width: 13em;
    }

    .contact-heading {
        width: 12em;
    }
}