/* ========================================
   rules.css (CLEAN)
   - mobile first
   - 重複/競合を整理
   - TOC追従/現在地ハイライト/進捗バーを統合
======================================== */

/* ========================================
   Anchor offset (fixed header)
   ======================================== */
:root{
  --anchor-offset: 130px; /* header 73px + 余白 */
}
[id]{ scroll-margin-top: var(--anchor-offset); }

/* ========================================
   Layout
   ======================================== */
.l-rulesGrid, .rules-grid{
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 1024px){
  .l-rulesGrid, .rules-grid{
    grid-template-columns: 320px 1fr;
    align-items: start;
  }
}

.l-rulesMain, .rules-main{
  display: grid;
  gap: 1.5rem;
}

.c-rulesSection, .rules-section{
  background: #fff;
  border-radius: 16px;
  padding: 1.5rem;
  border: 1px solid rgba(15,23,42,.07);
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}

.c-rulesSection__body, .rules-body{
  display: grid;
  gap: 1rem;
}

/* ========================================
   TOC
   ======================================== */
.c-rulesToc, .rules-toc{
  background: var(--white);
  border-radius: var(--radius-16, 16px);
  border: 1px solid rgba(15,23,42,.07);
  box-shadow: var(--shadow-card, 0 8px 18px rgba(0,0,0,.08));
  overflow: hidden;
}

.c-rulesToc__head, .rules-toc-head{
  padding: 1.5rem;
  border-bottom: 1px solid rgba(15,23,42,.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.c-rulesToc__title, .rules-toc-title{
  margin: 0;
  font-size: 1rem;
  font-weight: 900;
  color: var(--navy);
  letter-spacing: .02em;
}

.c-rulesToc__body, .rules-toc-body{ padding: 1rem; }

.c-rulesToc__list, .rules-toc-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .6rem; /* タップ間隔 */
}

.c-rulesToc__list a, .rules-toc-list a{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;

  padding: 1.5rem .75rem; /* 44px確保 */
  min-height: 44px;

  border-radius: 12px;
  text-decoration: none;
  color: var(--text);

  background: #fff;
  border-color: rgba(15,23,42,.08);

  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
}

.c-rulesToc__list a:hover, .rules-toc-list a:hover{
  border-color: rgba(7,132,198,.35);
  box-shadow: var(--shadow-card, 0 8px 18px rgba(0,0,0,.08));
  transform: translateY(-1px);
}

.c-rulesToc__num, .rules-toc-num{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;

  font-weight: 800;
  background: #f1f5f9;
  color: #334155;
  border: 1px solid rgba(15,23,42,.06);
  flex: 0 0 auto;
}

.c-rulesToc__text, .rules-toc-text{
  flex: 1;
  min-width: 0;
  font-weight: 700;
}

.c-rulesToc__arrow, .rules-toc-arrow{
  opacity: .85;
  color: rgba(15,23,42,.45);
  font-weight: 700;
}

/* Current highlight (TOC) */


.rules-toc-num{
  background: #0784c6; /* 既存のグリーン */
  color: #ffffff;      /* ← 白文字に固定 */
  font-weight: 900;
}

.c-rulesToc__list a[aria-current="true"], .rules-toc-list a[aria-current="true"]{ font-weight: 900; }

/* Sticky TOC + offset + scrollbar */
@media (min-width: 1024px){
  .c-rulesToc, .rules-toc{
    position: sticky;
    top: 110px; /* header 73 + 余白 */
    max-height: calc(100vh - 110px);
    overflow-y: auto;

    scrollbar-width: thin;
    scrollbar-color: rgba(7,132,198,.3) transparent;
  }
  body.has-scroll-indicator .c-rulesToc, .rules-toc{
    top: 160px; /* header + scroll-indicator + 余白 */
  }

  .c-rulesToc::-webkit-scrollbar, .rules-toc::-webkit-scrollbar{ width: 6px; }
  .c-rulesToc::-webkit-scrollbar-track, .rules-toc::-webkit-scrollbar-track{ background: transparent; }
  .c-rulesToc::-webkit-scrollbar-thumb, .rules-toc::-webkit-scrollbar-thumb{
    background: rgba(7,132,198,.3);
    border-radius: 3px;
  }
  .c-rulesToc::-webkit-scrollbar-thumb:hover, .rules-toc::-webkit-scrollbar-thumb:hover{
    background: rgba(7,132,198,.5);
  }
}

/* TOC "Back to top" button */
.c-rulesToc__top, .rules-toc-top{
  /* 下線を消す */
  text-decoration: none;

  /* 形を“ボタン”に固定 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;

  height: 32px;            /* 高さ固定 */
  padding: 0 .7rem;        /* 横だけ余白 */
  border-radius: 10px;

  font-size: .8rem;
  font-weight: 900;
  line-height: 1;          /* 文字の上下ブレ防止 */
  white-space: nowrap;

  color: #fff;
  background: #0b1220;
  border: 1px solid rgba(15,23,42,.22);

  box-shadow: none;        /* 目次は静かに */
}

.c-rulesToc__top:hover, .rules-toc-top:hover{
  background: #1a2332;
}
.c-rulesToc__top:active, .rules-toc-top:active{ transform: translateY(0); }
.c-rulesToc__top:focus-visible, .rules-toc-top:focus-visible{
  outline: 3px solid rgba(15,23,42,.35);
  outline-offset: 2px;
}
.c-rulesToc__top .icon-svg, .rules-toc-top .icon-svg{
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* ========================================
   Lists
   ======================================== */
.rules-ul,
.rules-ol{
  margin: 0;
  padding-left: 1.5rem;
  line-height: 1.75;
}
.rules-ul li,
.rules-ol li{ margin: .5rem 0; }

/* ========================================
   Tags
   ======================================== */


/* ========================================
   #talk-rules (section 4)
   ======================================== */
#talk-rules .c-ruleCard, #talk-rules .talk-rule-item{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 16px;
  padding: 1rem;
  background: #fff;
  margin-top: 1rem;
}

#talk-rules .c-ruleCard:first-of-type, #talk-rules .talk-rule-item:first-of-type{
  margin-top: .75rem;
}

#talk-rules .c-ruleCard__title, #talk-rules .rules-h3{
  font-size: 1.02rem;
  font-weight: 900;
  letter-spacing: .01em;
  margin: 0 0 .6rem;
  display: flex;
  align-items: center;
  gap: .55rem;
}

#talk-rules .c-ruleCard__title::before, #talk-rules .rules-h3::before{
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: currentColor;
  opacity: .18;
}

#talk-rules .rules-ul,
#talk-rules .rules-ol{
  margin-top: .35rem;
}

/* ========================================
   #talk-rules (section 5)
   Compliance section balance tune (no markup change)
========================================================= */
/* 1) quick-summary（主役）→少しだけ締めて余白を整える */
.c-quickSummary, .quick-summary{
  border-radius: var(--c-radius);
  padding: 1.05rem 1.15rem;
  margin: 0 0 var(--c-gap);
  /* 既存が強すぎる場合は背景を少し落とす */
  background: rgba(7,132,198,.06);
  border-left: 5px solid rgba(7,132,198,.55);
  --c-radius: 16px;
  --c-pad: 1rem;
  --c-gap: .9rem;
}

/* 中の行間を少し締める */
.c-quickSummary__points, .summary-points{
  margin-top: .65rem;
  gap: .55rem;
}

/* 3) 「3つの鉄則」見出し → “区切り”に寄せて軽くする */
.rules-midtitle{
  margin: 1.05rem 0 0;
  padding: .75rem 1rem;
  border-radius: var(--c-radius);

  background: rgba(7,132,198,.05);
  border: 1px solid rgba(7,132,198,.16);
  border-left: 5px solid rgba(7,132,198,.50);

  font-size: 1.02rem;
  font-weight: 900;
  letter-spacing: .02em;
}

/* 4) 見出し直下の説明文 → 近づけて薄く */
.c-rulesSection__body > p,.rules-body > p{
  margin: .35rem 0 .8rem;
  color: rgba(15,23,42,.62);
  font-size: .92rem;
  line-height: 1.6;
}

/* 5) 3カード：間延びを解消して“まとまり”を作る */
.c-ruleCard, .talk-rule-item{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: var(--c-radius);
  padding: 1.05rem 1.1rem;
  background: #fff;

  /* うっすら左ラインで「ルール項目感」 */
  border-left: 4px solid rgba(7,132,198,.35);
}

/* 最初だけ余白を少しだけ詰める */
.c-ruleCard:first-of-type, .talk-rule-item:first-of-type{
  margin-top: .6rem;
}

/* 6) カードのタイトルと本文の距離を詰めて読みやすく */
.c-ruleCard__title, .rules-h3{
  font-size: 1.02rem;
  font-weight: 900;
  letter-spacing: .02em;
  margin: 0 0 .35rem;
  display: flex;
  align-items: center;
  gap: .55rem;
}

/* 左の丸：主張を少し落として“うるささ”を消す */
.c-ruleCard__title::before,.rules-h3::before{
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #0784c6;
  opacity: .75;
  flex: 0 0 auto;
}


/* ========================================
   #process (steps)
   ======================================== */
.c-processSteps, .process-steps{
  list-style: none;
  margin: .9rem 0 0;
  padding: 0;
  display: grid;
  gap: .75rem;
}

.c-processSteps .c-processSteps__item, .c-processSteps .step, .process-steps .c-processSteps__item, .process-steps .step{
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  gap: .8rem;
  padding: .9rem 1rem;
  border: 1px solid rgba(15,23,42,.10);
  border: 1px solid rgba(15,23,42,.12);
  background: #ffffff;
}

.c-processSteps .c-processSteps__item::after, .c-processSteps .step::after, .process-steps .c-processSteps__item::after, .process-steps .step::after{
  content: "";
  position: absolute;
  left: 22px; /* step-num の中心 */
  top: 100%;
  width: 2px;
  height: .75rem;
  background: rgba(15,23,42,.10);
}

.c-processSteps .c-processSteps__item:last-child::after, .c-processSteps .step:last-child::after, .process-steps .c-processSteps__item:last-child::after, .process-steps .step:last-child::after{ display: none; }

.c-processSteps .c-processSteps__num, .c-processSteps .step-num, .process-steps .c-processSteps__num, .process-steps .step-num{
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #f1f5f9;          /* 薄グレー */
  border: 2px solid #94a3b8;    /* slate */
  color: #0f172a;               /* 濃ネイビー */
  font-weight: 900;
  font-family: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.c-processSteps .c-processSteps__title, .c-processSteps .step-title, .process-steps .c-processSteps__title, .process-steps .step-title{
  font-weight: 800;
  letter-spacing: .01em;
}

@media (min-width: 900px){
  .c-processSteps, .process-steps{
    grid-template-columns: 1fr 1fr;
    gap: .9rem;
  }
  .c-processSteps .c-processSteps__item::after, .c-processSteps .step::after, .process-steps .c-processSteps__item::after, .process-steps .step::after{ display: none; }
}


/* Current highlight (shortcuts) */


/* ========================================
   Mid heading
   ======================================== */
.rules-midtitle{
  margin: 1.25rem 0 0;
  padding: .85rem 1rem;
  border-radius: 14px;

  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: .01em;

  background: rgba(7,132,198,.08);
  border: 1px solid rgba(7,132,198,.22);
  border-left: 6px solid #0784c6;

  display: flex;
  align-items: baseline;
  gap: .5rem;
}

.rules-midtitle span{
  font-size: .9rem;
  font-weight: 800;
  color: rgba(15,23,42,.62);
}