@charset "UTF-8";

.clear::after {
    content: "";
    clear: both;
    display: block;
}

/* ----------------
header
-------------------*/
.header {
    padding: 0;
}

.navbar {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.header_inner {
    display: flex;
    align-items: center;
    height: 60px;
}

.inner {
    width: 1060px;
    max-width: 100%;
    margin: 0 auto;
    padding-left: 30px;
    padding-right: 30px;
}

.header_logo {
    font-size: 32px;
    font-weight: bold;
}

.header_nav {
    display: flex;
    margin-left: auto;
}

.header_link {
    color: #333;
    margin-left: 32px;
}

/* ----------------
main-visual
-------------------*/
.main-visual {
    background-image: url(../img/jamie-street-gZlQZFCA1Vc-unsplash.jpg);
    background-size: cover;
}

/* ----------------
section
-------------------*/
.section {
    padding: 100px 0;
}

.section-title {
    text-align: center;
    font-size: 44px;
}

.section-subtitle {
    text-align: center;
}

/* ----------------
profile
-------------------*/
.profile {
    background-color: beige;
}

img {
    width: 100%;
    height: auto;
    min-width: 100%;
}

.profile-left {
    float: left;
    width: 48%;
}

.profile-right {
    float: right;
    width: 48%;
}

.profile-nametitle {
    font-size: 14px;
}

.profile-name {
    font-size: 24px;
    font-weight: bold;
}

/* ----------------
service
-------------------*/
.section.section--gray {
    background-color: #eee;
}

.inner {
    width: 1060px;
    max-width: 100%;
    margin: 0 auto;
    padding-left: 30px;
    padding-right: 30px;
}

.section__body {
    margin-top: 50px;
}

.service__cards {
    display: flex;
    flex-wrap: wrap;
}

.service__card {
    width: calc(33.3% - 24px * 2 / 3);
}

.service__card:nth-child(n + 2) {
    margin-left: 24px;
}

.service-card {
    padding: 24px 20px;
    background: #fff;
}

.service-card__image {
    text-align: center;
}

.service-card__title {
    margin-top: 16px;
    font-weight: 600;
    font-size: 22px;
    text-align: center;
}

.service-card__content {
    line-height: 1.8;
    margin-top: 12px;
}

/* ----------------
works
-------------------*/
.work__cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.work__card {
    width: calc(33.3% - 24px * 2 / 3);
    box-shadow: 0 0 3px 0 rgb(0 0 0 / 16%);
}

.work__card:not(:nth-child(3n + 1)) {
    margin-left: 24px;
}

.work-card__image {
    text-align: center;
}

.work-card__image img {
    width: 100%;
    height: 180px;
}

.work-card__body {
    padding: 12px 12px 20px;
}

.work-card__title {
    font-weight: 500;
    font-size: 18px;
}

.work-card__comment {
    font-size: 14px;
    color: #555;
    line-height: 1.6;
    margin-top: 8px;
}

.work-card__link {
    text-align: center;
    margin-top: 20px;
}

/* ----------------
contact
-------------------*/
.contact__message {
    text-align: center;
}

.contact__message-form {
    text-align: center;
    padding: 24px;
    margin-left: 200px;
}

/* ----------------
footer
-------------------*/
footer {
    background: #555;
    color: #fff;
    padding: 12px 0;
    font-size: 13px;
    font-family: sans-serif;
    letter-spacing: 0.05em;
}

.footer__copyright {
    text-align: center;
}