/* ==========================================================================
   ぷいくま24時 SEASON3 - ルールページ 専用スタイル
   既存のHTML構造・クラス名はそのまま、パステル系デザインに合わせて再配色。
   共通トークン/ヘッダーは css/theme.css を参照
   ========================================================================== */

#rule-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px 80px;
  font-family: var(--font);
  line-height: 1.9;
  color: var(--ink);
}

/* ---------- MV（ページ上部の小さいロゴリンク） ---------- */

.mv-area {
  margin: 30px auto 20px;
  text-align: center;
}
.mv-area h1 a img,
.mv-area h1 img {
  width: 70%;
  max-width: 380px;
  margin: 0 auto;
  filter: drop-shadow(0 8px 14px rgba(93, 70, 45, 0.18));
}

/* ---------- 目次 ---------- */

.entry-content.nav-area { margin: 20px 0 40px; }

.entry-content .table-of-contents {
  position: relative;
  margin: 0;
  padding: 2.2em 1.8em 1.6em;
  border: 2px dashed var(--gold);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.entry-content .table-of-contents::before {
  content: "目次";
  display: block;
  position: absolute;
  top: -18px;
  left: 24px;
  padding: 6px 18px;
  color: #fff;
  background: linear-gradient(135deg, var(--gold-deep), var(--gold));
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 900;
  transform: rotate(-4deg);
  box-shadow: var(--shadow-soft);
}

.entry-content .table-of-contents ul { padding-left: 0; }

.entry-content .table-of-contents li {
  margin: 0.3em 0 0.8em 1.2em;
  list-style-type: decimal;
  line-height: 1.6;
  font-weight: 700;
  color: var(--ink);
}
.entry-content .table-of-contents li::marker { color: var(--pink-deep); }

.entry-content .table-of-contents li ul { margin: 0.4em 0 0.8em 0.5em; padding: 0; }
.entry-content .table-of-contents li ul li {
  margin: 0.15em 0 0 1em;
  list-style-type: disc;
  font-weight: 500;
  font-size: 0.92em;
  color: var(--ink-soft);
}
.entry-content .table-of-contents li ul li::marker { color: var(--mint-deep); }

.entry-content .table-of-contents a {
  color: inherit;
  display: inline-block;
  text-decoration: none;
  border-bottom: 2px solid var(--gold);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.entry-content .table-of-contents a:hover { color: var(--pink-deep); border-color: var(--pink-deep); }
.entry-content .table-of-contents ul li a { border-bottom: 1px dotted var(--ink-soft); }

/* ---------- ルールセクション ---------- */

.rule-area {
  margin: 0 auto;
  color: var(--ink);
}

.rule-item {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 28px 34px;
  box-shadow: var(--shadow-soft);
  border: 1.5px solid var(--line);
}
.rule-item + .rule-item { margin-top: 18px; }

@media screen and (max-width: 767px) {
  .rule-item { padding: 20px 16px; }
}

.rule-item .item-wrap { text-align: center; }

.rule-item .item-wrap .text-block {
  display: inline-block;
  text-align: left;
}

.rule-item .item-ttl {
  font-size: 1.3rem;
  font-weight: 900;
  margin-bottom: 14px;
  text-align: center;
  color: var(--ink);
}

.rule-item .item-sub-ttl {
  font-size: 1.05rem;
  font-weight: 900;
  margin-bottom: 8px;
  text-align: center;
  color: var(--pink-deep);
}
.rule-item .item-sub-ttl:not(:first-child) { margin-top: 1em; }

/* ---------- マーカー ---------- */

.marker-pink   { background: linear-gradient(transparent 55%, var(--pink) 55%); }
.marker-orange { background: linear-gradient(transparent 55%, var(--gold-pale) 55%); }
.marker-blue   { background: linear-gradient(transparent 55%, var(--sky) 55%); }
.marker-purple { background: linear-gradient(transparent 55%, var(--lavender) 55%); }

/* ---------- 更新履歴 ---------- */

.rule-item .update-wrap { text-align: center; }
.rule-item .update-block { overflow-y: auto; max-height: 6em; }
.rule-item .update-item {
  display: flex;
  flex-wrap: wrap;
  text-align: left;
  width: 80%;
  margin: 0 auto;
  padding-bottom: 6px;
  border-bottom: 1px dotted var(--line);
  font-size: 0.88rem;
}
.rule-item .update-item dt { width: 18%; color: var(--gold-deep); font-weight: 700; }
.rule-item .update-item dd { width: 78%; }
@media screen and (max-width: 767px) {
  .rule-item .update-item { flex-direction: column; width: 100%; }
  .rule-item .update-item dt,
  .rule-item .update-item dd { width: 100%; }
}

/* ---------- リスト ---------- */

.list-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: left;
}

.rule-item .item-wrap ul,
.rule-item .item-wrap ol {
  list-style: none;
  list-style-position: inside;
  padding-left: 0;
  margin-bottom: 0.5em;
}
.rule-item .item-wrap ul > li,
.rule-item .item-wrap ol > li {
  margin-top: 1em;
  position: relative;
  padding-left: 1.2em;
}
.rule-item .item-wrap ul > li::before {
  content: "";
  position: absolute;
  top: 0.65em;
  left: 0;
  width: 0.7em;
  height: 0.7em;
  background-color: var(--pink-deep);
  border-radius: 9999px;
}
.rule-item .item-wrap ol {
  list-style-type: decimal;
  list-style-position: outside;
  padding-left: 1.2em;
}
.rule-item .item-wrap ol > li { padding-left: 0; }
.rule-item .item-wrap ol > li::marker { color: var(--gold-deep); font-weight: 900; }

/* ---------- 定義リスト（表組み代わり） ---------- */

.rule-item .item-wrap dl {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8em 1.2em;
  margin-top: 0.6em;
  margin-bottom: 0.6em;
}
.rule-item .item-wrap dl > dt,
.rule-item .item-wrap dl > dd {
  /* dd はブラウザ既定で margin-inline-start:40px が付くため明示的にリセット
     （リセットしないと mobile の column レイアウトで align-items:center の
     基準幅が dd分だけ広がり、dt/dd 双方が右にズレてカード枠からはみ出す） */
  margin: 0;
}
.rule-item .item-wrap dl > dt {
  flex-basis: 35%;
  font-weight: 900;
  color: var(--gold-deep);
}
.rule-item .item-wrap dl > dd { flex-basis: calc(65% - 1.2em); }

@media screen and (max-width: 767px) {
  .rule-item .item-wrap dl { flex-direction: column; gap: 0; width: 100%; }
  .rule-item .item-wrap dl > dt {
    margin-top: 0.8em;
    width: 100%;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--gold);
    color: #fff;
  }
  .rule-item .item-wrap dl > dd { width: 100%; padding: 4px 4px 0; }
}

/* ---------- テキストユーティリティ（色・テーマ非依存、そのまま踏襲） ---------- */

.tBold { font-weight: 700 !important; }
.mt00 { margin-top: 0 !important; }
.mt05em { margin-top: 0.5em; }
.mb05em { margin-bottom: 0.5em; }
.mt1em { margin-top: 1em; }
.tL { text-align: left !important; }
.tC { text-align: center !important; }
.tR { text-align: right !important; }
.tdU { text-decoration: underline; }
.fs1_2 { font-size: 1.2em; }
.fs1_5 { font-size: 1.5em; }
.fs2 { font-size: 2em; }
.dIb { display: inline-block !important; }
.db { display: block !important; }
.dF { display: flex; }
.dFg20 { display: flex; gap: 20px; }
.w40 { width: 40%; }
.w50 { width: 50%; }
.w60 { width: 60%; }
.w80 { width: 80%; }
.w100px { width: 100px; }
.mlrAuto { margin-left: auto; margin-right: auto; }

.spContent { display: none; }
@media screen and (max-width: 767px) {
  .spW100p { width: 100%; }
  .spContent { display: block; }
}

/* ---------- ページトップへ戻る ---------- */

.pagetop {
  transition: opacity 0.15s ease;
  height: 48px;
  width: 48px;
  position: fixed;
  right: 24px;
  bottom: 24px;
  background: linear-gradient(135deg, var(--gold-deep), var(--gold));
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 40;
  box-shadow: var(--shadow-soft);
}
.pagetop__arrow {
  height: 9px;
  width: 9px;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  transform: translateY(20%) rotate(-45deg);
}