@charset "utf-8";

/* ---------------------------
    main
--------------------------- */
main {
  padding-top: 152px; /*固定ヘッダー分*/
}

.origin-container {
  margin-top: 64px;
}

h1#sub-page__title {
  margin-bottom: 12px;
}

.customer-harassment__nowrap {
  display: inline-block;
}

.customer-harassment__meta {
  margin-bottom: 24px;
  text-align: right;
  line-height: 24px;
  letter-spacing: 0.51px;
}

/* 既存キャプションの opacity: 0.54 はコントラスト約3.5:1で WCAG 1.4.3（AA 4.5:1）を満たさないため、見出しは #666（約5.7:1）にする。 */
h2.table-layout__item--caption {
  flex-shrink: 0;
  width: 352px;
  padding: 0 16px;
  color: #666666;
  opacity: 1;
  font-size: 18px;
  font-weight: normal;
  line-height: 36px;
  letter-spacing: 0.58px;
}

.table-layout__item--content h3 {
  font-size: 18px;
  font-weight: bold;
  line-height: 36px;
}

.table-layout__item--content h3:not(:first-child) {
  margin-top: 32px;
}

.table-layout__item--content > *:not(:last-child) {
  margin-bottom: 18px;
}

.table-layout__item--content ol.customer-harassment__list,
.table-layout__item--content ol.customer-harassment__examples,
.table-layout__item--content ol.customer-harassment__sublist {
  width: auto;
  margin-left: 0;
  list-style: none;
}

.table-layout__item--content .customer-harassment__list > li {
  padding-left: 3em;
  text-indent: -3em;
}

.table-layout__item--content .customer-harassment__list > li:not(:last-child),
.table-layout__item--content .customer-harassment__sublist > li:not(:last-child) {
  margin-bottom: 8px;
}

.customer-harassment__sublist {
  text-indent: 0;
}

.table-layout__item--content .customer-harassment__sublist > li {
  padding-left: 1em;
  text-indent: -1em;
}

.table-layout__item--content .customer-harassment__examples > li:not(:last-child) {
  margin-bottom: 18px;
}

.table-layout__item--content .customer-harassment__examples-title {
  padding-left: 3em;
  font-weight: bold;
  text-indent: -3em;
}

.table-layout__item--content .customer-harassment__examples-title + p {
  padding-left: 3em;
}

.customer-harassment__examples li p {
  margin-bottom: 0;
}

.customer-harassment__signature {
  margin: 32px 0 128px;
  text-align: right;
}

@media screen and (max-width: 1280px) {
  h2.table-layout__item--caption {
    width: 25%;
  }
}

/* =================================================

    SP幅 (~768px)

================================================= */
@media screen and (max-width: 768px) {
  main {
    padding-top: 48px;
  }

  .origin-container {
    margin-top: 32px;
  }

  .customer-harassment__meta {
    font-size: 12px;
    line-height: 18px;
  }

  h2.table-layout__item--caption {
    width: 100%;
    margin-bottom: 6px;
    padding: 0;
    font-size: 16px;
    line-height: 28px;
  }

  .table-layout__item--content h3 {
    font-size: 16px;
    line-height: 28px;
  }

  .table-layout__item--content > *:not(:last-child),
  .table-layout__item--content p:not(:last-child),
  .table-layout__item--content ol:not(:last-child) {
    margin-bottom: 16px;
  }

  .table-layout__item--content .customer-harassment__list > li:not(:last-child),
  .table-layout__item--content .customer-harassment__sublist > li:not(:last-child) {
    margin-bottom: 8px;
  }

  .table-layout__item--content .customer-harassment__examples li p {
    margin-bottom: 0;
  }

  .customer-harassment__signature {
    margin: 24px 0 60px;
  }
}