body {
  font-family: Helvetica, '游ゴシック', 'Yu Gothic', YuGothic, HiraKakuProN-W3, 'メイリオ', Meiryo, sans-serif;
  color: #505050;
}

.text {
  font-weight: lighter;
  color: dimgray;
  letter-spacing: 0.05em;
}

.lead {
  font-family: 'Lato', sans-serif;
  /* font-family: 'Modern', sans-serif; */
  font-weight: 100;
  color: gainsboro;
  letter-spacing: 0.05em;
  font-size: medium;
}

/* nav */

nav img {
  height: 80px;
}

.nav-item {
  font-family: 'Lato', sans-serif;
  margin-left: 30px;
  letter-spacing: 0.05em;
}

/* top */

.top {
  background-image: url(../img/top2.jpg);
  background-position:center; 
  background-size: cover;
  height: 500px;
}

.top-text {
  font-family: 'Lato', sans-serif;
  font-weight: 100px;
  font-size: 60px;
  padding-top: 100px;
}

/* profile */

.profile-card {
  display: flex;
  flex-wrap: wrap;
  width: 540px;
  margin: auto;
  padding: 20px;
  box-shadow: 0 0 3px 0 rgb(0 0 0 / 16%);
}

.profile-card_image {
  width: 40%;
  padding-top: 25px;
  padding-right: 20px;
}

.profile-card_image img {
  height: 160px;
}

.profile-card_body {
  width: 60%;
}

.twitter img {
  height: 50px;
}

/* service */

.service {
  background-color: #eee;
}

.service-cards {
  display: flex;
  flex-wrap: wrap;
  min-width: 336px;
  margin: auto;
  padding: 20px;
  justify-content: space-around;
  background-color: #eee;
  /* background-color: #DFDFDF; */
}

.service-card {
  width: 30%;
  width: 336px;
  padding: 20px;
  box-shadow: 0 0 3px 0 rgb(0 0 0 / 16%);
  background-color: #FFF;
  margin-bottom: 20px;
}

.service-card_image {
  width: 160px;
  margin: auto;
}

/* work */

.work-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* max-width: 336px; */
  margin: auto;
}

.work-card {
  width: 30%;
  width: 336px;
  padding: 20px;
  box-shadow: 0 0 3px 0 rgb(0 0 0 / 16%);
  background-color: #FFF; 
}

img {
  max-width: 100%;
}

/* contact */

.contact {
  background-color: #eee;
}

.contact-icons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.contact-icon {
  padding: 20px;
}

/* contact */

.footer-nav {
  background-color: #eee;
}

/* footer */

footer {
  background-color: #454545;
  font-weight: lighter;
}

/* スマホ用 */

@media only screen and (max-width:767px) {

  nav img {
    height: 50px;
  }

  .top-text {
    font-size: 40px;
  }

  .top-lead {
    font-size: 14px;
  }

  .top {
    /* background-image: url(../img/top2.jpg);
    background-position:center; 
    background-size: cover; */
    height: 350px;
  }

  .service-cards {
     width: 336px;
  }

  .service-card {
    /* flex-direction: column; */
    /* width: 100%; */
    /* width: 336px; */
    margin-bottom: 20px;
  }

  .work-card {
    /* width: 336px; */
    margin-bottom: 20px;
  }

  .profile-card {
    width: 336px;
  }

  .profile-card_image {
    width: 100%;
    margin-bottom: 40px;
  }

  .profile-card_body {
    width: 100%;
  }

}