/* =========================
   基本レイアウト
   ========================= */

.external-body {
  margin: 0;
  font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Meiryo",
    "メイリオ", "Osaka", "MS PGothic", "arial", "helvetica", "sans-serif";
  color: rgba(0, 0, 0, 0.87);
  font-size: 16px;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.5;
  min-height: 100vh;
}

/* ページ本体の横幅（タイトル〜テーブル） */
.external-main {
  max-width: 960px;
  width: 100%;
  margin: 0 auto 32px;
  padding: 48px 16px 48px 16px;
  box-sizing: border-box;
}

/* =========================
   ヘッダー（ロゴ＋シャドウ）
   ========================= */

.external-logo {
  width: 100%;
  padding: 18px 0 20px;
  background: #ffffff;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
}

.external-logo img {
  max-width: 140px;
  height: auto;
}

/* =========================
   タイトル・日付・説明文
   ========================= */

.external-card__header {
  margin-bottom: 24px;
}

/* 中央寄せタイトル＋下に横線 */
h5 {
  align-self: stretch;
  font-weight: bold;
  font-size: 24px;
  flex-grow: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  padding: 0 0 8px;
  margin: 0 0;
  border-bottom: solid 2px #37474f;
}

/* 右上の日付 */
.external-card__date {
  padding: 16px 0;
  height: 24px;
  align-self: stretch;
  flex-grow: 0;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0.15px;
  text-align: right;
  color: rgba(0, 0, 0, 0.87);
}

/* 説明テキスト */
.external-card__intro {
  margin-top: 16px;
}

.external-card__text {
  margin: 0 0 8px 0;
}

.external-card__intro p {
  flex-grow: 0;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0.15px;
  text-align: left;
  color: rgba(0, 0, 0, 0.87);
}

/* =========================
   テーブル
   ========================= */

.external-table-wrapper {
  margin: 48px 0;
}

.external-table {
  width: 100%;
  border-collapse: collapse;
}

.external-table__th,
.external-table__td {
  padding: 8px;
  border-bottom: solid 1px #e0e0e0;
  text-align: left;
  vertical-align: top;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
}

.padding-right-none {
  padding-right: 0;
}

.external-table__th {
  background-color: #eceff1;
  color: #37474f;
  font-size: 16px;
  height: 24px;
}

.col-category {
  width: 90px;
} /* 分類 */
.col-company {
  width: 140px;
} /* 事業者名 */
.col-service {
  width: 140px;
} /* サービス名 */
.col-optout {
  width: 180px;
} /* オプトアウト */
.col-privacy {
  width: 180px;
} /* 外部送信情報 */
.col-detail {
  width: 210px;
}

/* リンク */
.external-link {
  color: #0277bd;
  text-decoration: none;
}

.external-link:hover {
  text-decoration: underline;
}

/* =========================
   外部送信情報トグル
   ========================= */

.external-info-toggle {
  padding: 0;
  border: none;
  background: none;
  color: #0277bd;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
}

button:focus:not(:focus-visible) {
  outline: none;
}

.external-info-toggle__icon {
  width: 24px;
  height: 24px;
  position: relative;
  display: inline-block;
}

.external-info-toggle__icon::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../../images/icon-arrow-down.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: transform 0.2s ease;
  transform: rotate(0deg); /* 通常時：下向き */
}

/* 開いているときは上向きに回転 */
.external-info-toggle--open .external-info-toggle__icon::before {
  transform: rotate(180deg);
}

/* 詳細行 */

.external-info-detail-row[hidden] {
  display: none;
}

.external-info-detail__cell {
  padding: 8px;
  background: #f5f5f5;
  border-bottom: solid 1px #e0e0e0;
}

.external-info-detail {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.external-info-detail__block + .external-info-detail__block {
  margin-top: 8px;
}

.external-info-detail__label {
  font-weight: 600;
  margin-bottom: 2px;
  font-size: 16px;
}

.external-info-detail__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.15px;
  white-space: pre-wrap; /* 長文の折り返し */
  text-indent: 0;
}

.external-back-link-wrapper {
  text-decoration: none;
  text-align: right;
}

.external-back-link-wrapper:hover {
  text-decoration: underline;
}

.external-card__copy {
  margin: 0;
  color: #888;
}

/* =========================
   `972px以下の場合
   ========================= */

@media (max-width: 972px) {
  .external-table {
    colgroup {
      col { width: 100%;}
    }
    thead,
    tbody {
      tr {
        display: grid;
        grid-template-columns: repeat(1, auto);
      }
    }
    thead {
      tr {
        border-top: solid 1px #e0e0e0;
        margin-bottom: 25px;
      }
    }
  }
  .external-table__th {
    height: auto;
  }
  .external-row {
    border-top: solid 1px #e0e0e0;
  }
  .external-row:has(+ .external-info-detail-row[hidden]) {
    margin-bottom: 25px;
    &:nth-last-child(-n + 2) {
      margin-bottom: 0;
    }
  }
  .external-info-detail-row {
    margin-bottom: 25px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .external-info-toggle {
    width: 100%;
    justify-content: space-between;
  }
  .external-category-br {
    display: none;
  }
}