@charset "UTF-8";

/* title */
.title {
    padding: 80px 24px 24px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.title h1 {
    font-family: "Manrope";
    font-weight: 600;
    font-size: 4rem;
}

.title h3 {
    font-size: 1rem;
    padding-bottom: 8px;
}

.container {
    padding: 0 24px 24px;
}

.kv {
    height: 180px;
    background: url(../img/about_kv.jpg)center center no-repeat;
    background-size: cover;
}

@media screen and (min-width:600px) {
    .title {
        padding: 120px 24px 24px;
    }

    .container {
        padding: 0 20px;
    }

    .kv {
        height: 520px;
    }
}

/* name */
/* .name {} */

.name .wrap {
    padding: 24px;
    position: relative;
}

.name h2 {
    font-size: 4rem;
    line-height: 1;
}

.first_name {
    text-shadow: 1px 1px 0 #333, 1px -1px 0 #333, -1px 1px 0 #333, -1px -1px 0 #333;
    color: #eee;
}

.name h3 {
    position: absolute;
    right: 24px;
    top: 88px;
}

@media screen and (min-width:600px) {
    .wrap {
        max-width: 800px;
        margin: 0 auto;
    }

    .name .wrap {
        padding: 120px 0 0;
    }

    .name h3 {
        right: 0;
        top: 156px;
    }
}

/* career */
.career {
    margin: 24px;
}

.career .wrap {
    border-top: #333 solid 0.5px;
}

.career_title {
    padding: 40px 0 24px;
    display: flex;
    align-items: flex-end;
}

.career h2 {
    padding-right: 8px;
}

.career span {
    padding-bottom: 8px;
    color: #555;
}

.career dl {
    display: flex;
    flex-wrap: wrap;
}

.career dt {
    padding-left: 10%;
    width: 30%;
    font-weight: normal;
    line-height: 2rem;
}

.career dd {
    width: 70%;
    line-height: 2rem;
}

@media screen and (min-width:600px) {
    .career h2 {
        padding-right: 16px;
    }

    .career span {
        padding-bottom: 12px;
        font-size: .8rem;
    }

    .career dt {
        width: 25%;
        line-height: 2.4rem;
    }

    .career dd {
        width: 75%;
        line-height: 2.4rem;
    }

}

/* strength */
.strength {
    margin: 24px;
}

.strength .wrap {
    border-top: #333 solid 0.5px;
}

.strength_title {
    padding: 40px 0 24px;
    display: flex;
    align-items: flex-end;
}

.strength h2 {
    padding-right: 8px;
}

.strength span {
    padding-bottom: 8px;
    color: #555;
}

.strength ul {
    padding-left: 10%;
}

.strength h3 {
    font-weight: bold;
}

.strength p {
    padding-bottom: 24px;
    line-height: 1.3;
}

@media screen and (min-width:600px) {
    .strength h2 {
        padding-right: 16px;
    }

    .strength span {
        padding-bottom: 12px;
        font-size: .8rem;
    }

    .strength h3 {
        line-height: 2.4;
    }

    .strength p {
        width: 90%;
        line-height: 1.8;
    }

}

/* photograph */
.photograph {
    margin: 24px;
}

.photograph .wrap {
    border-top: #333 solid 0.5px;
}

.photograph_title {
    padding: 40px 0 24px;
    display: flex;
    align-items: flex-end;
}

.photograph h2 {
    padding-right: 8px;
}

.photograph span {
    padding-bottom: 8px;
    color: #555;
}

.slider img {
    width: 88%;
    margin: 0 auto;
}

.slick-prev {
    left: -8px;
}

.slick-next {
    right: -8px;
}

.slick-prev:before,
.slick-next:before {
    color: #333;
    opacity: 1;
}

@media screen and (min-width:600px) {
    .photograph h2 {
        padding-right: 16px;
    }

    .photograph span {
        padding-bottom: 12px;
        font-size: .8rem;
    }

    .photograph h3 {
        line-height: 2.4rem;
    }

    .slider img {
        width: 100%;
    }

    .slick-prev {
        left: -24px;
    }

    .slick-next {
        right: -24px;
    }
}

/* works */
.works a {
    display: block;
    background-color: #333;
    padding: 120px 0;
}

.works span {
    color: #eee;
    margin-left: 24px;
}

.works h2 {
    font-family: "Manrope";
    font-size: 2.4rem;
    color: #eee;
    margin-left: 24px;
}

@media screen and (min-width:600px) {
    .works a {
        padding: 180px 0;
    }

    .works a:hover {
        opacity: 1;
    }

    .works span {
        margin-left: 80px;
        font-size: .8rem;
    }

    .works h2 {
        margin-left: 80px;
        font-size: 1.6rem;
    }

    .link-text {
        display: inline;
        position: relative;
        z-index: 1;
    }

    .link-text:after {
        animation-name: under-line;
        animation-duration: .3s;
        animation-fill-mode: forwards;
        content: '';
        position: absolute;
        left: 0;
        width: 0%;
        bottom: -8px;
        height: 1px;
        background: #eee;
        z-index: -1;
    }

    @keyframes under-line {
        0% {
            width: 0%;
        }

        100% {
            width: 100%;
        }
    }
}