/* Top style */

#contents {
    position         : relative;
}
/* top-image ------------------------ */
#top-image {
    position         : relative;
    margin-bottom    : 10%;
}

#top-image #img-top {
    width            : 100%;
    max-height       : 928px;
    min-height       : 832px;
    object-fit       : cover;
}
@media screen and (max-width: 600px) {
    #top-image #img-top {
        max-height       : 576px;
        min-height       : 512px;
        object-position  : 67% 90%;
    }
}

#top-image #c-name {
    position         : absolute;
    top              : 0;
    left             : 2%;
    letter-spacing   : 3px;
    font-size        : 1.4em;
}
@media screen and (max-width: 600px) {
    #top-image #c-name {
        left             : 3%;
        letter-spacing   : 2px;
        font-size        : 1.3em;
    }
}

#top-image #top-logo {
    position         : absolute;
    top              : 52%;
    left             : 0;
    width            : 12%;
    height           : 12%;
}
@media screen and (max-width: 600px) {
    #top-image #top-logo {
        top              : 36%;
        left             : 2%;
        width            : 20%;
        height           : 20%;
    }
}

#top-image #top-msg {
    position         : absolute; 
    top              : 66%;
    left             : 3%;
    letter-spacing   : 1px;
    font-size        : 0.9em;
}
@media screen and (max-width: 600px) {
    #top-image #top-msg {
        top              : 58%;
        font-size        : 0.6em;
    }
}
#img-scroll-down {
    max-width        : 30px;
    min-width        : 20px;
    position         : absolute;
    top              : 84%;
    left             : 4%;
}
#img-scroll-down-sp {
    display          : none;
}
@media screen and (max-width: 600px) {
    #img-scroll-down {
        display          : none;
    }
    #img-scroll-down-sp {
        position         : absolute;
        display          : flex;
        max-width        : 26px;
        top              : 78%;
        left             : 4%;
    }
}

/* about-us ------------------------ */
#about-us {
    margin-bottom    : 10%;
    text-align       : center;
}
#about-us #about-us_title {
    font-size        : 2.2em;
    margin-bottom    : 0;
}
#about-us #about-us-msg {
     margin-bottom   : 4%;
}
#about-us #about-us_title_sub {
    font-size        : 0.8em;
    margin-top       : 1px;
}
#about-us #about-us-msg p br {
    display          : none;
}
#about-us #view-more-about-us {
    margin-top       : 2%;
}
@media screen and (max-width: 600px) {
    #about-us {
        margin-top       : 16%;
        margin-bottom    : 20%;
    }
    #about-us #about-us_title {
        font-size        : 1.8em;
    }
    #about-us #about-us-msg {
         margin-bottom   : 8%;
    }
    #about-us #about-us-msg p br {
        display          : block;
    }
}

/* profile ------------------------ */
#profile {
    margin-bottom    : 10%;
    text-align       : center;
    position         : relative;
    display          : flex;
}
#profile div {
    width            : calc(50% - 10px);
    margin           : 5px;
}
@media screen and (max-width: 600px) {
    #profile {
        margin-bottom    : 20%;
        text-align       : left;
        flex-wrap        : wrap-reverse;
    }
    #profile div {
        width            : calc(100% - 10px);
    }
}
#profile #profile-img {
    display          : block;
}
#profile #profile-img #img-work{
    width            : 100%;
}
@media screen and (max-width: 600px) {
    #profile #profile-img {
        margin-left      : 10%;
    }
}

#profile #profile_title {
    font-size        : 2.2em;
    margin-bottom    : 0;
}
#profile #profile_title_sub {
    font-size        : 0.8em;
    margin-top       : 1px;
    margin-bottom    : 8%;
}
#profile #profile-msg #view-more-profile {
    margin-top       : 2%;
}
@media screen and (max-width: 600px) {
    #profile #profile-msg {
        margin-left      : 14%;
    }
    #profile #profile_title {
        margin-top       : 15px;
        font-size        : 1.8em;
    }
    #profile #profile_title_sub {
        margin-left: 10%;
    }
}

/* recruit ------------------------ */
#recruit {
    position         : relative;
    text-align       : center;
    max-width        : 100%;
    min-width        : 100%;
}
@media screen and (max-width: 600px) {
    #recruit {
        margin-bottom    : 10%;
        margin-bottom    : 150px;
    }
}
#recruit #img-bridge {
    max-width        : 100%;
    min-width        : 100%;
}
@media screen and (max-width: 600px) {
    #recruit #img-bridge {
        max-width        : 100%;
        object-fit       : cover;
    }
}
#recruit #recruit-msg {
    background-color : #fffffe;
    position         : absolute;
    width            : 34%;
    right            : 0%;
    bottom           : 0%;
}
@media screen and (max-width: 600px) {
    #recruit #recruit-msg {
        position         : absolute;
        text-align       : left;
        top              : 70%;
        left             : 22%;
        width            : auto;
    }
}
#recruit #recruit-msg #recruit_title {
    font-size        : 2.2em;
    margin-bottom    : 0;
}
#recruit #recruit-msg #recruit_title-sub {
    font-size        : 0.8em;
    margin-top       : 0;
    margin-bottom    : 8%;
}
#recruit #recruit-msg p br {
    display          : none;
}
#recruit #recruit-msg #view-more-recruit {
    margin-top       : 8%;
    padding-left     : 3%;
    padding-bottom   : 3%;
}
@media screen and (max-width: 600px) {
    #recruit #recruit-msg #recruit_title {
        font-size        : 1.8em;
        margin-top       : 15px;
    }
    #recruit #recruit-msg p {
        padding-left     : 16px;
        padding-right    : 16px;
    }
    #recruit #recruit-msg p br {
        display          : block;
    }
    #recruit #recruit-msg #view-more-recruit {
        padding-left     : 15px;
    }
}