/* ===== Rule Pages: Base ===== */
.rules,
.rules-index {
  max-width: 72ch;
  margin: 0 auto;
  line-height: 1.85;
  font-size: 16px;
}

@media (min-width: 768px) {
  .rules,
  .rules-index {
    font-size: 17px;
  }
}

.rules h1 {
  font-size: 1.8em;
  margin: 0 0 16px;
  line-height: 1.25;
}

.rules h2 {
  font-size: 1.35em;
  margin: 40px 0 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,0.08);
}

.rules h3 {
  font-size: 1.12em;
  margin: 24px 0 8px;
}

.rules p { margin: 10px 0; }
.rules ul,
.rules ol { margin: 10px 0 10px 1.2em; }
.rules li { margin: 6px 0; }
.rules strong { font-weight: 800; }

.rules-index h2 {
    font-size: 1.15em;
    margin: 18px 0 10px;
    padding-top: 0;
    border-top: none;
  }
  
/* ===== Rule Index Cards ===== */
.rules-index {
    max-width: 980px;
  }
  
  .rules-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 16px;
  }
  
  @media (min-width: 768px) {
    .rules-grid {
      grid-template-columns: 1fr 1fr;
    }
  }
  
  .rules-card {
    display: block;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 14px;
    padding: 14px 14px;
    text-decoration: none;
    color: inherit;
    background: rgba(0,0,0,0.02);
  }
  
  .rules-card:hover {
    background: rgba(0,0,0,0.04);
  }
  
  .rules-card .title {
    font-weight: 800;
    margin-bottom: 6px;
  }
  
  .rules-card .desc {
    opacity: .85;
    font-size: .95em;
  }
  
  /* ===== Info Boxes ===== */
.rules .box {
    border-radius: 12px;
    padding: 12px 14px;
    margin: 14px 0;
    border: 1px solid transparent;
  }
  
  .rules .box .label {
    font-weight: 700;
    margin-bottom: 6px;
  }
  
  .rules .box.note {
    background: rgba(0, 100, 255, 0.06);
    border-color: rgba(0, 100, 255, 0.18);
  }
  
  .rules .box.warn {
    background: rgba(255, 160, 0, 0.10);
    border-color: rgba(255, 160, 0, 0.24);
  }
  
  .rules .box.danger {
    background: rgba(255, 0, 0, 0.06);
    border-color: rgba(255, 0, 0, 0.18);
  }
  
  .rules details {
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 12px;
    padding: 10px 12px;
    margin: 10px 0;
    background: rgba(0,0,0,0.02);
  }
  
  .rules summary {
    cursor: pointer;
    font-weight: 700;
  }
  
  .rules details {
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 12px;
    padding: 10px 12px;
    margin: 10px 0;
    background: rgba(0,0,0,0.02);
  }
  
  .rules table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-size: .95em;
  }
  
  .rules th,
  .rules td {
    border: 1px solid rgba(0,0,0,0.12);
    padding: 8px 10px;
    vertical-align: top;
  }
  
  .rules th {
    background: rgba(0,0,0,0.04);
    font-weight: 800;
  }
  
  .rules .table-wrap {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.10);
  }
  

  .rules .backlink {
    margin-top: 20px;
  }
  .rules .backlink a {
    text-decoration: none;
    border-bottom: 1px solid rgba(0,0,0,0.25);
  }
  .rules .backlink a:hover {
    border-bottom-color: rgba(0,0,0,0.6);
  }

  .rules .anchor {
    text-decoration: none;
    opacity: .35;
    margin-left: 8px;
    font-size: .9em;
  }
  .rules h2:hover .anchor,
  .rules h3:hover .anchor { opacity: .8; }
  
  /* ===== Rule Local Navigation ===== */
    .rule-nav {
        margin: 12px 0 18px;
    }
  
  .rule-nav__inner {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 2px;
    border-bottom: 1px solid rgba(0,0,0,0.10);
  }
  
  .rule-nav__item {
    display: inline-block;
    white-space: nowrap;
    padding: 8px 10px;
    border-radius: 999px;
    text-decoration: none;
    color: inherit;
    background: rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.08);
    font-size: 0.95em;
  }
  
  .rule-nav__item:hover {
    background: rgba(0,0,0,0.06);
  }
  
  .rule-nav__item.is-active {
    font-weight: 800;
    background: rgba(0,0,0,0.08);
    border-color: rgba(0,0,0,0.18);
  }
  
/* ===== Glossary ===== */
.rules dl {
    margin: 12px 0 18px;
  }
  
  .rules dt {
    font-weight: 800; /* ★用語を太字に */
    margin-top: 14px;
  }
  
  .rules dd {
    margin: 6px 0 0 0;
    opacity: .92;
  }