/* common */
.title-area {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--gap-md);
  margin-bottom: var(--gap-2xl);
}
.title-area .title-zone {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
}
.sub-title {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
}

/* home */
#home .width-wrap > * + * {
  margin-top: var(--gap-2xl);
}
#home .title-area {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-md);
}
#home .title-area .top500 {
  display: inline;
}
#home .btn-area {
  border-bottom: 1px solid var(--brdr-str);
}
#home .contents-area {
  display: flex;
  justify-content: space-between;
}
#home .contents-area .box {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
}
#home .contents-area .line {
  width: 1px;
  align-self: stretch;
  background: var(--brdr-def);
}

/* services */
#services .contents-area {
  display: flex;
  flex-direction: column;
  gap: var(--gap-2xl);
}
#services .contents-area .title-zone {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
  padding-bottom: var(--gap-sm);
}

/* about */
#about .contents-area {
  display: flex;
  gap: var(--gap-3xl);
}
#about .contents-area > * {
  flex: 1;
}
#about .contents-area .text-zone {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}
#about .contents-area .text-zone p:nth-child(1) {
  word-break: keep-all;
}

/* clients */
#clients .contents-area {
  display: flex;
  flex-direction: column;
  gap: var(--gap-2xl);
}
#clients .contents-area .title-zone {
  margin-bottom: var(--gap-md);
}
#clients .tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-xs);
}

/* contact */
#contact .contents-area {
  display: flex;
  gap: var(--gap-3xl);
}
#contact .info-zone {
  flex-shrink: 0;
  width: 360px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
}
#contact .info-zone li {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
}
#contact .info-zone .label {
  flex-shrink: 0;
  width: 44px;
}
#contact .form-zone {
  flex: 1;
}
#contact .form-zone form {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xl);
}
#contact .form-zone .btn-plc {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@media all and (max-width: 1250px) {
  /* ccommon */
  .title-area {
    flex-direction: column;
    align-items: flex-start;
  }
  .title-area .title-zone {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
  }
  /* about */
  #about .contents-area {
    flex-direction: column;
  }
  #about .contents-area .text-zone p > span {
    display: block;
  }
  /* contact */
  #contact .contents-area {
    flex-direction: column;
  }
}
@media all and (max-width: 1024px) {
  /* home */
  #home .width-wrap {
    padding-top: 52px;
  }
  #home .contents-area .box {
    width: 245px;
  }
}
@media all and (max-width: 900px) {
  #home .contents-area .box {
    width: auto;
  }
}
@media all and (max-width: 720px) {
  #home .contents-area {
    flex-direction: column;
    gap: var(--gap-2xl);
  }
  #home .contents-area .line {
    display: none;
  }
}
@media all and (max-width: 500px) {
  /* home */
  #home .width-wrap {
    padding-top: 40px;
  }
  /* about */
  #about .contents-area .text-zone p > span {
    display: inline;
  }
  #about .contents-area .text-zone p:nth-child(1) {
    word-break: break-all;
  }
}