:root {
  /* 全角4文字分 */
  --num-width: 4ic;
  /* 真円の直径。フォント倍率が変わっても追従させたいのでem基準 */
  --circle-d: 2.6em;
}
@media screen and (max-width: 768px) {
  main {
    padding: 0 var(--space-small);
  }
}
.section.terms-privacy {
  padding-top: var(--space-medium);
  padding-bottom: var(--space-medium);
}
@media screen and (max-width: 768px) {
  .section.terms-privacy {
    padding-top: var(--space-small);
    padding-bottom: var(--space-small);
  }
}
.container {
  max-width: 100%;
  margin: 0 auto;
  background: var(--color-white);
  border-radius: var(--border-radius-large);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  animation: fadeIn 0.6s ease-out;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.top {
  background: var(--color-primary);
  color: var(--color-white);
  padding: var(--space-large) var(--space-medium);
  text-align: center;
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
}
@keyframes rotate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.top h2 {
  font-size: var(--font-size-large);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-x-small);
  position: relative;
  z-index: 1;
}
.top p {
  font-size: var(--font-size-medium);
  opacity: 0.9;
  position: relative;
  z-index: 1;
}
.terms-privacy-section {
  margin-bottom: var(--space-medium);
  padding: var(--space-medium);
  border-radius: 16px;
  background: #fafafa;
  border-left: 4px solid var(--color-primary);
  transition: 0.3s;
  -webkit-tap-highlight-color: transparent;
}

.terms-privacy-empty {
  margin: var(--space-medium) 0;
  padding: var(--space-x-large) var(--space-medium);
  text-align: center;
}

.terms-privacy-empty__title {
  color: var(--color-primary);
  font-size: var(--font-size-large);
  font-weight: var(--font-weight-bold);
}

.terms-privacy-empty__description {
  margin-top: var(--space-small);
  color: var(--color-dark-gray);
  font-size: var(--font-size-medium);
}
.terms-privacy-section:hover,
.terms-privacy-section:active {
  background: #f5f5f5;
  transform: translateX(2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
/*──────────────── 見出しは2列グリッド ──────────────*/
.terms-privacy-section h3 {
  display: grid;
  grid-template-columns: minmax(var(--circle-d), max-content) 1fr;
  column-gap: var(--space-x-small);
  align-items: center;
  color: #2c3e50;
  font-size: var(--font-size-large);
  margin-bottom: var(--space-small);
}
/*──────────────── バッジ（丸） ─────────────────*/
.terms-privacy-section__number {
  /* 真円中央揃え */
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: var(--circle-d);
  min-width: var(--circle-d);
  aspect-ratio: 1/1; /* 高さ＝幅 → 自動で真円 */
  border-radius: 50%;

  background: var(--color-primary);
  color: var(--color-white);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-medium);
  line-height: 1;
  white-space: nowrap;
  user-select: none;
}
/*──────────────── バッジ（角丸ピル） ───────────────*/
.terms-privacy-section__number.pill {
  /* グリッド左列いっぱい（--num-width） */
  width: var(--num-width);
  min-width: var(--num-width);

  /* 上下パディング */
  padding: 2px 10px;
  border-radius: 9999px;
}
.terms-privacy-section__content {
  color: #555;
  font-size: var(--font-size-medium);
  line-height: 1.8;
  word-break: break-word;
}
.terms-privacy-section__content p {
  margin-bottom: 10px;
}
.terms-privacy-section__content p:last-child {
  margin-bottom: 0;
}
.terms-privacy-section__content a {
  color: var(--color-primary);
}
.highlight {
  background: var(--color-secondary-background);
  border-left: 4px solid var(--color-secondary);
  padding: var(--space-medium);
  border-radius: var(--border-radius-medium);
  margin: var(--space-medium) 0;
}
.highlight h3 {
  color: #2c3e50;
  margin-bottom: var(--space-x-small);
  font-size: var(--font-size-medium);
}

.section.terms-privacy:has(.terms-privacy-empty) .highlight {
  display: none;
}

.bottom {
  background: var(--color-primary);
  color: var(--color-white);
  padding: var(--space-medium) var(--space-small);
  text-align: center;
  border-radius: 0 0 var(--border-radius-large) var(--border-radius-large);
}
.bottom p {
  opacity: 0.9;
  margin-bottom: var(--space-small);
}
.last-updated {
  font-size: var(--font-size-small);
  color: #e5efe9;
}
@media (max-width: 768px) {
  .terms-privacy-section {
    padding: var(--space-small);
    margin-bottom: var(--space-small);
  }
  .terms-privacy-section h3 {
    color: #2c3e50;
    margin-bottom: var(--space-small);
    display: flex;
    align-items: center;
  }
  .highlight {
    padding: var(--space-small);
    margin: var(--space-small) 0;
  }
}
@media (hover: none) {
  .terms-privacy-section:hover,
  .terms-privacy-section:active {
    background: #fafafa;
    transform: none;
    box-shadow: none;
  }
}