@charset "utf-8";

.main {
  margin-top: 150px;
}

.work_content {
  margin: 90px clamp(20px, 10vw, 220px);
}

.work-title {
  font-size: 30px;
  margin: 20px 0;
}

/* テーブル基本設定 */
.work-detail_table {
  margin-top: 80px;
  width: 100%;
  border-collapse: collapse;
}

/* 行 */
.work-detail_row {
  position: relative;
  width: 100%;
}

/* 行間（上下だけにする） */
.work-detail_head,
.work-detail_data {
  padding: 20px 0;
}

/* 見出し側 */
.work-detail_head {
  text-align: left;
  width: 20%;
  font-weight: normal;
}

/* データ側 */
.work-detail_data {
  width: 80%;
}

/* SVGの線 */
.work-detail_row::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px; /* SVGに合わせる */
  background: url("../img/works_line.svg") no-repeat center / cover;
}

.work-detail_table {
  border-spacing: 0;
}

@media (max-width: 768px) {
  .work_content {
    margin: 80px clamp(20px, 8vw, 80px);
  }

  .work-detail_head {
    width: 30%;
  }

  .work-detail_data {
    width: 70%;
  }
}

@media (max-width: 480px) {
  /* =====================
    全体余白
  ===================== */
  .work_content {
    margin: 80px 20px;
  }

  .work-title {
    font-size: 22px;
  }

  .work_img {
    width: 100%;
    height: auto;
  }

  /* =====================
    テーブル → 縦レイアウト🔥
  ===================== */
  .work-detail_table,
  .work-detail_row,
  .work-detail_head,
  .work-detail_data {
    display: block;
    width: 100%;
    padding: 0 0 15px;
  }

  .work-detail_row {
    margin-bottom: 25px;
    /* padding-bottom: 0 0 15px; */
  }

  /* 見出し（上） */
  .work-detail_head {
    font-size: 14px;
    /* margin-bottom: 5px; */
  }

  /* 内容（下） */
  .work-detail_data {
    font-size: 14px;
    line-height: 1.6;
  }

  /* 線ちょい調整 */
  .work-detail_row::after {
    height: 1px;
    background-size: cover;
  }
}