/* ==================================================
   COMPANY PAGE
   WILL CLENS / brand.css準拠
================================================== */

.company-page {
  position: relative;
  padding-top: 120px;
  color: #555;
}

/* ==================================================
   BREADCRUMB
================================================== */

.company-breadcrumb {
  margin: 0 auto 42px;
  color: #555;
  font-size: 14px;
  line-height: 1.4;
}

.company-breadcrumb a {
  color: #555;
  text-decoration: none;
  transition: color 0.3s ease;
}

.company-breadcrumb a:hover {
  color: #3694c9;
}

.company-breadcrumb span {
  margin-inline: 6px;
}

.company-breadcrumb span[aria-hidden="true"] {
  color: #97cae3;
}

/* ==================================================
   HEADING
================================================== */

.company-heading {
  margin-bottom: 56px;
}

.company-heading__eyebrow {
  margin: 0 0 8px;
  color: #97cae3;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.company-heading__title {
  margin: 0;
  color: #3694c9;
  font-size: clamp(32px, 2.6vw, 48px);
  line-height: 1.3;
  font-weight: 600;
}

/* ==================================================
   CONTENT
================================================== */

.company-content {
  margin-top: 96px;
  padding-bottom: 120px;
}

.company-content__inner {
  max-width: 960px;
}

.company-richtext {
  color: #555;
  font-size: 15px;
  line-height: 1.9;
}

.company-richtext--mobile {
  display: none;
}

.free-page-content--mobile {
  display: none;
}

.company-richtext > :first-child {
  margin-top: 0;
}

.company-richtext > :last-child {
  margin-bottom: 0;
}

/* リッチテキストでtableを使用した場合 */
.company-richtext table {
  width: 100%;
  border: 0;
  border-collapse: collapse;
  table-layout: fixed;
}

.company-richtext tr {
  border-top: 1px solid #e5e5e5;
}

.company-richtext tr:first-child {
  border-top-color: #3694c9;
}

.company-richtext tr:last-child {
  border-bottom: 1px solid #3694c9;
}

.company-richtext th,
.company-richtext td {
  padding: 28px 24px;
  border: 0;
  text-align: left;
  vertical-align: top;
}

.company-richtext th {
  width: 30%;
  color: #3694c9;
  font-weight: 600;
}

.company-richtext td {
  width: 70%;
  color: #555;
}

.company-richtext th p,
.company-richtext td p {
  margin: 0;
}

/* リッチテキストで定義リストを使用した場合 */
.company-richtext dl {
  margin: 0;
  border-top: 1px solid #3694c9;
  border-bottom: 1px solid #3694c9;
}

.company-richtext dt,
.company-richtext dd {
  box-sizing: border-box;
  margin: 0;
  padding: 28px 24px;
}

.company-richtext dt {
  float: left;
  clear: left;
  width: 30%;
  border-top: 1px solid #e5e5e5;
  color: #3694c9;
  font-weight: 600;
}

.company-richtext dd {
  min-height: 84px;
  margin-left: 30%;
  border-top: 1px solid #e5e5e5;
}

.company-richtext dt:first-of-type,
.company-richtext dt:first-of-type + dd {
  border-top: 0;
}

.company-richtext dl::after {
  content: "";
  display: block;
  clear: both;
}

/* h2 / h3＋段落で入力した場合 */
.company-richtext h2,
.company-richtext h3 {
  position: relative;
  margin: 40px 0 18px;
  padding-left: 18px;
  color: #3694c9;
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.5;
  font-weight: 600;
}

.company-richtext h2::before,
.company-richtext h3::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 0;
  width: 4px;
  border-radius: 999px;
  background: #3694c9;
}

.company-richtext p {
  margin: 0 0 16px;
}

.company-richtext a {
  color: #3694c9;
  text-decoration: underline;
  transition: opacity 0.25s ease;
}

.company-richtext a:hover {
  opacity: 0.7;
}

/* ==================================================
   SP
================================================== */

@media (max-width: 1170px) {
  .company-page {
    padding-top: 92px;
  }

  .company-breadcrumb {
    margin-bottom: 28px;
    font-size: 11px;
  }

  .company-heading {
    margin-bottom: 36px;
  }

  .company-heading__eyebrow {
    font-size: 11px;
  }

  .company-content {
    margin-top: 64px;
    padding-bottom: 80px;
  }

  .company-richtext {
    font-size: 13px;
    line-height: 1.8;
  }

  .company-richtext--mobile {
    display: block;
  }

  .company-richtext--desktop {
    display: none;
  }

  .free-page-content--desktop {
    display: none;
  }

  .free-page-content--mobile {
    display: block;
  }

  .company-richtext th,
  .company-richtext td {
    display: block;
    width: 100%;
    padding: 0;
  }

  .company-richtext th {
    padding-top: 20px;
    padding-bottom: 6px;
  }

  .company-richtext td {
    padding-bottom: 20px;
  }

  .company-richtext dt,
  .company-richtext dd {
    float: none;
    width: 100%;
    min-height: 0;
    margin-left: 0;
    border-top: 0;
    padding-inline: 0;
  }

  .company-richtext dt {
    padding-top: 20px;
    padding-bottom: 6px;
  }

  .company-richtext dd {
    padding-top: 0;
    padding-bottom: 20px;
    border-bottom: 1px solid #e5e5e5;
  }

  .company-richtext dd:last-of-type {
    border-bottom: 0;
  }

  .company-richtext h2,
  .company-richtext h3 {
    margin-top: 28px;
    padding-left: 14px;
    font-size: clamp(16px, 4.5vw, 19px);
  }

  .company-richtext h2::before,
  .company-richtext h3::before {
    top: 4px;
    bottom: 4px;
    width: 3px;
  }
}

@media (max-width: 560px) {
  .company-richtext th,
  .company-richtext td,
  .company-richtext dt,
  .company-richtext dd {
    overflow-wrap: anywhere;
  }
}



.company-heading__title {
  font-size: var(--top-h1) !important;
}

.company-heading__eyebrow {
  font-size: var(--top-16) !important;
}

.company-breadcrumb {
  font-size: var(--top-small) !important;
}