/* components */
@import url("./../components/h1.css");
@import url("./../components/h2.css");
@import url("./../components/breadcrumb.css");
@import url("./../components/button.css");

/* ==================== 会社情報ページ ==================== */
.company {
  padding: 0 0 64px 0;
}

.company__inner {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 20px;
}

.company__content {
  margin-bottom: 60px;
}

/* 表組スタイル */
.company__content table {
  width: 100% !important;
  border-collapse: collapse !important;
  border: none !important;
  margin: 0 !important;
  background-color: transparent !important;
}

.company__content tbody {
  border: none !important;
}

.company__content tr {
  border-bottom: 1px solid #e6e6e6 !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
}

.company__content td {
  padding: 24px 0 !important;
  text-align: left !important;
  vertical-align: top !important;
  border: none !important;
  background-color: transparent !important;
  color: var(--color-body) !important;
  font-size: var(--font-size-16) !important;
  font-weight: 300 !important;
  line-height: var(--line-height-175) !important;
}

.company__content td:first-child {
  width: 120px !important;
  color: var(--color-main) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding-right: 32px !important;
}

/* 外部リンクボタン */
.company__link {
  display: flex;
  justify-content: center;
  margin-top: 60px;
}

.company__external-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 40px;
  background-color: var(--color-main);
  color: #fff;
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  border-radius: 4px;
  transition: opacity 0.3s ease;
  position: relative;
}

.company__external-link:hover {
  opacity: 0.8;
}

.company__external-link::after {
  content: "";
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* ==================== レスポンシブ ==================== */
@media (max-width: 768px) {
  .company {
    padding: 0 0 64px 0;
  }

  .company__inner {
    padding: 0;
  }

  .company__content {
    margin-bottom: 40px;
  }

  .company__content th,
  .company__content td {
    display: block;
    width: 100%;
    padding: 16px 0;
  }

  .company__content th {
    padding-bottom: 8px;
    padding-right: 0;
  }

  .company__content td {
    padding-top: 0;
  }

  .company__content td:first-child {
    width: 100%;
    padding-bottom: 0 !important;
  }

  .company__external-link {
    padding: 16px;
  }
}