/* ============================================================
 * v3-legal.css — group layer for about / tokusho / privacy / mentor
 * Load order: … → rin-v3.css → v3-site.css → v3-legal.css
 * Scope: body.v3-site[data-seg="about"], body.v3-site main.legal (tokusho, privacy),
 *        body.v3-site[data-seg="mentor"] (redirect stub)
 *
 * Colours, type and the component base come from v3-site.css.
 * This file only fixes the service table on phones, one spacing gap on about,
 * and the fallback message on the mentor redirect stub.
 * ============================================================ */

/* ---------- about: service table on phones ---------- */
/* The page CSS gives .tk-table min-width:560px, so on a 390px screen the 内容 column was cut
   off inside the scroll box. Below 720px each row is laid out as a two-line block:
   plan | price on the first line, 内容 across the full width underneath. The header row
   follows the same shape, so every label stays visible. */
@media (max-width: 720px) {
  body.v3-site[data-seg="about"] .tk-table-wrap { overflow-x: visible; }
  body.v3-site.v3-site[data-seg="about"] .tk-table.tk-table { display: block; min-width: 0; width: 100%; font-size: 15px; }
  body.v3-site.v3-site[data-seg="about"] .tk-table.tk-table :is(thead, tbody) { display: block; }
  body.v3-site.v3-site[data-seg="about"] .tk-table.tk-table :is(thead, tbody) tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    column-gap: 18px;
    padding: 18px 0;
    border-bottom: 1px solid var(--v3-rule);
  }
  body.v3-site.v3-site[data-seg="about"] .tk-table.tk-table thead tr { padding: 14px 0; border-bottom-color: var(--v3-rule-2); }
  body.v3-site.v3-site[data-seg="about"] .tk-table.tk-table :is(thead, tbody) tr :is(th, td) {
    display: block;
    padding: 0;
    border: 0;
    white-space: normal;
  }
  body.v3-site.v3-site[data-seg="about"] .tk-table.tk-table :is(thead, tbody) tr :is(th, td):nth-child(1) { color: var(--v3-text); }
  body.v3-site.v3-site[data-seg="about"] .tk-table.tk-table thead tr th:nth-child(1) { color: var(--v3-mute); }
  body.v3-site.v3-site[data-seg="about"] .tk-table.tk-table :is(thead, tbody) tr :is(th, td):nth-child(3) {
    grid-column: 1 / -1;
    margin-top: 10px;
  }
  body.v3-site.v3-site[data-seg="about"] .tk-table.tk-table tbody tr td:nth-child(3) { line-height: 1.9; }
}

/* ---------- about: closing link block ---------- */
/* .free-h carries 56px of top margin for use between blocks; as the first element of the
   last section it stacked on the section padding (160px above the label, 104px below). */
body.v3-site[data-seg="about"] .section .wrap > .free-h:first-child { margin-top: 0; }

/* ---------- mentor: redirect stub ---------- */
/* The page forwards to /#mentor at once; if it is ever seen, the message sits in the content column. */
body.v3-site[data-seg="mentor"] main {
  width: var(--content-width);
  margin-inline: auto;
  padding: 88px 0 104px;
  color: var(--v3-body);
  font-size: 16px;
  line-height: 2;
}
body.v3-site[data-seg="mentor"] main a {
  color: var(--v3-text);
  text-decoration: underline;
  text-decoration-color: var(--v3-accent);
  text-underline-offset: 5px;
}