@charset "utf-8";

/* =========================================================
   wabi office — legal document pages
   /terms/ ・ /privacy/ ・ /tokusho/
   Loaded after site.css. Document typography only; every color,
   font and spacing unit comes from the site.css tokens.
   1. Page frame
   2. Document card
   3. Document typography
   4. Lists
   5. Definition table
   6. Document footer
   7. Tablet  (min-width: 640px)
   8. Desktop (min-width: 1024px)
   ========================================================= */

/* 1. Page frame ----------------------------------------- */
/* Legal pages carry no fixed CTA bar, so release the space
   site.css reserves for it on phones. */
body.page-legal main { padding-bottom: 0; }

@media (max-width: 639px) {
  body.page-legal .site-footer { padding-bottom: 24px; }
}

.legal-page { padding-block: 24px 44px; }

/* 2. Document card -------------------------------------- */
.legal {
  width: 100%;
  max-width: 800px;
  margin-inline: auto;
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
}

/* 3. Document typography -------------------------------- */
.legal h1 {
  font-size: 23px;
  font-weight: 700;
  line-height: 1.45;
  margin-top: 8px;
}

/* 第○条（…） */
.legal h2 {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
  margin: 32px 0 8px;
}

.legal p,
.legal ol,
.legal ul,
.legal .deftable {
  font-size: 14px;
  line-height: 1.9;
  color: var(--ink-soft);
}

.legal p + p { margin-top: 8px; }

.legal .lead { margin-top: 22px; }

/* The launch-blocker line that opens every draft document. */
.legal > .todo {
  align-self: flex-start;
  max-width: 100%;
  margin-top: 14px;
  padding: 7px 12px;
  border: 1px solid rgba(138, 106, 28, 0.3);
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.6;
}

/* Placeholders run long in legal prose, so let them wrap. */
.legal .todo {
  white-space: normal;
  overflow-wrap: break-word;
}

/* 4. Lists ---------------------------------------------- */
/* Article items: 1. 2. 3. … (site.css clears list markers) */
.legal ol {
  list-style: decimal;
  margin: 6px 0 0;
  padding-left: 1.8em;
}
.legal ol > li { margin: 2px 0; padding-left: 0.2em; }

/* Sub-items: （1）（2）… */
.legal ol.kago {
  list-style: none;
  padding-left: 0.2em;
  margin-top: 4px;
  counter-reset: kago;
}
.legal ol.kago > li {
  counter-increment: kago;
  position: relative;
  padding-left: 3.2em;
}
.legal ol.kago > li::before {
  content: "（" counter(kago) "）";
  position: absolute;
  left: 0;
  top: 0;
}

/* Unordered items inside the 特商法 table */
.legal ul {
  list-style: disc;
  margin: 6px 0 0;
  padding-left: 1.3em;
}
.legal ul > li { margin: 2px 0; padding-left: 0.2em; }

/* 5. Definition table ----------------------------------- */
.legal .deftable {
  width: 100%;
  border-collapse: collapse;
  margin-top: 24px;
  border-top: 1px solid var(--border-strong);
}
.legal .deftable th {
  width: 200px;
  text-align: left;
  vertical-align: top;
  padding: 13px 16px 13px 0;
  font-weight: 700;
  color: var(--ink);
  border-bottom: 1px solid var(--border);
}
.legal .deftable td {
  vertical-align: top;
  padding: 13px 0;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--border);
}
.legal .deftable td > ul:first-child { margin-top: 0; }
.legal .deftable .grp {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  margin-top: 10px;
}
.legal .deftable .grp:first-child { margin-top: 0; }
.legal .deftable .sub {
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--muted);
  margin-top: 6px;
}

/* Phones: stack each row as label over value. */
@media (max-width: 639px) {
  .legal .deftable,
  .legal .deftable tbody,
  .legal .deftable tr,
  .legal .deftable th,
  .legal .deftable td {
    display: block;
    width: auto;
  }
  .legal .deftable { border-top: 0; }
  .legal .deftable tr {
    padding: 12px 0;
    border-top: 1px solid var(--border);
  }
  .legal .deftable tr:first-child { border-top: 1px solid var(--border-strong); }
  .legal .deftable tr:last-child { border-bottom: 1px solid var(--border); }
  .legal .deftable th {
    padding: 0;
    border-bottom: 0;
    font-size: 12.5px;
    color: var(--muted);
  }
  .legal .deftable td {
    padding: 2px 0 0;
    border-bottom: 0;
  }
}

/* 6. Document footer ------------------------------------ */
.legal .docfoot {
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 16px;
}

.legal .related {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 12.5px;
}
.legal .related a { color: var(--ink-muted); }
.legal .related a:hover { color: var(--accent); text-decoration: underline; }
.legal .related [aria-current="page"] { color: var(--faint); }

/* 7. Tablet --------------------------------------------- */
@media (min-width: 640px) {
  .legal-page { padding-block: 40px 64px; }
  .legal { padding: 40px 36px; }
  .legal h1 { font-size: 28px; }
}

/* 8. Desktop -------------------------------------------- */
@media (min-width: 1024px) {
  .legal-page { padding-block: 56px 88px; }
  .legal { padding: 48px 56px; }

  .legal p,
  .legal ol,
  .legal ul,
  .legal .deftable { font-size: 15px; }

  .legal .deftable .grp,
  .legal .deftable .sub { font-size: 13px; }
}