@charset "UTF-8";
/* CSS Document */
main {
  width: 100%;
  max-width: 1280px;
  margin-right: auto;
  margin-left: auto;
}
/* top */
.section-top {
  margin-top: 216px;
  margin-bottom: 248px;
}
.section-top p {
  color: #333;
  line-height: 160%; /* 54px */
}
.section-top p b {
  font-weight: 600;
}
.section-top p span {
  font-size: 3.2rem;
  line-height: 160%;
}
@media (max-width: 1312px) {
  .section-top {
    margin: 114px 16px 128px 16px;
  }
}
/* works */
.section-works {
  width: auto;
  padding-bottom: 176px;
}
.section-works h3 {
  margin-bottom: 16px
}
.section-works h6 {
  margin-bottom: 8px;
}
.section-works ul {
  display: flex;
  justify-content: space-between;
  list-style: none;
  flex-wrap: wrap;
}
.section-works ul li {
  width: 100%;
  max-width: 620px;
  flex-direction: column;
  margin-bottom: 64px;
}
.section-works__website-image {
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 6px;
}
.section-works__website-image img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 0% 50%;
}
.section-works__tag {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
	gap:4px;
}
.section-works__title-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}

@media (max-width: 1312px) {
  .section-works {
    margin: 0 16px;
    padding-bottom: 160px;
  }
  .section-works h3 {
    margin-bottom: 8px
  }
  .section-works h6 {
    margin-bottom: 6px;
  }
  .section-works ul {
    flex-flow: column;
    margin-bottom: 16px;
  }
  .section-works ul li {
    width: 100%;
    max-width: 1312px;
    margin-bottom: 40px;
  }
  .section-works__website-image {
    margin-bottom: 6px;
  }
  .section-works__tag {
    margin-bottom: 8px;
  }
  .section-works__see-more-works {
    text-align: center;
    width: 100%;
  }
}
/* about */
.section-about {
  width: auto;
  margin: 0 auto;
  max-width: 960px;
  padding-bottom: 200px;
}
.section-about__profile {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.section-about__profile__portrait {
  height: 240px;
  width: 240px;
  background-image: url("../image/index/portrait.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 50%;
}
.section-about__profile__text {
  max-width: 680px;
}
.section-about__profile__text h3 {
  margin-bottom: 8px;
}
.section-about__profile__text ul li {
  margin-left: 16px;
  margin-bottom: 12px;
	
}
@media (max-width: 1312px) {
  .section-about {
    margin: 0 16px;
    padding-bottom: 160px;
  }
  .section-about__profile {
    flex-flow: column;
  }
  .section-about__profile__portrait {
    margin-bottom: 8px;
  }
  .section-about__profile__text {
    width: 100%;
  }
  .section-about__profile__text p {
    width: 100%;
  }
  .section-about__profile__text h3 {
    text-align: center;
    margin-bottom: 16px;
  }
}