/* ============================================================
     ▼ プライバシーポリシー ─ 法務ページ用の追加
        条文は読み飛ばされる前提ではなく「探して読む」もの。
        ① 条番号を左に出して、目で追える形にする
        ② 原文の羅列は箇条書きに開く（意味は変えない）
        ③ 本文幅を 34em に絞る。1行が長いと条文は追えない
     ============================================================ */
  /* 本文だけだと1100pxの版面の左半分しか埋まらないので、右に条文の目次を置いて
     2カラムにする。本文の左端はヒーローの見出しと揃えたままにしたいので、目次は右側。
     可読性のため本文は44em（≒40字）で止め、余った分は目次との溝にする。 */
  .legal-grid{display:grid;grid-template-columns:minmax(0,1fr) 208px;gap:0 56px;align-items:start}
  .legal{max-width:44em;min-width:0}
  .legal .art{scroll-margin-top:88px}

  .ptoc{position:sticky;top:88px;border-left:1px solid var(--n300);padding-left:20px}
  .ptoc-h{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.18em;
          color:var(--b600);margin:0 0 13px}
  .ptoc ol{list-style:none;margin:0;padding:0}
  .ptoc li{margin:0 0 9px}
  .ptoc a{display:flex;gap:9px;text-decoration:none;font-size:12px;line-height:1.6;
          color:var(--n500);transition:color .25s}
  .ptoc a .n{font-family:var(--mono);font-size:9.5px;font-weight:700;color:var(--b300);
             flex:0 0 auto;padding-top:2px;transition:color .25s}
  .ptoc a:hover{color:var(--n900)}
  .ptoc a.on{color:var(--b600);font-weight:700}
  .ptoc a.on .n{color:var(--b600)}

  @media (max-width:980px){
    /* 縦に積む。目次は本文の前に、横並びのチップとして出す */
    .legal-grid{grid-template-columns:1fr;gap:0}
    .legal{max-width:none;order:2}
    .ptoc{order:1;position:static;border-left:none;border-bottom:1px solid var(--n300);
          padding:0 0 16px;margin:0 0 28px}
    .ptoc ol{display:flex;flex-wrap:wrap;gap:7px 20px}
    .ptoc li{margin:0}
  }
  .legal .art{margin:0 0 clamp(22px,3vw,32px)}
  .legal .art:last-child{margin-bottom:0}
  .legal h2{font-family:var(--serif);font-size:clamp(16.5px,2.1vw,20px);font-weight:700;
            letter-spacing:.04em;line-height:1.6;margin:0 0 10px;display:flex;
            align-items:baseline;gap:11px}
  .legal h2::after{display:none}
  .legal h2 .no{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.16em;
                color:var(--b400);flex:0 0 auto;padding-top:2px}
  .legal p{font-size:13.5px;line-height:1.86;color:var(--n700);margin:0 0 9px}
  .legal p:last-child{margin-bottom:0}
  .legal ol,.legal ul{margin:0 0 9px;padding-left:0;list-style:none}
  .legal ol > li{position:relative;padding-left:27px;font-size:13.5px;line-height:1.86;
                 color:var(--n700);margin-bottom:7px;counter-increment:lg}
  .legal ol > li::before{content:counter(lg);position:absolute;left:0;top:3px;
                 font-family:var(--mono);font-size:10px;font-weight:700;color:var(--b600);
                 background:var(--b50);width:19px;height:19px;line-height:19px;text-align:center}
  .legal ol{counter-reset:lg}
  .legal ul > li{position:relative;padding-left:18px;font-size:13.5px;line-height:1.86;
                 color:var(--n700);margin-bottom:4px}
  .legal ul > li::before{content:"";position:absolute;left:2px;top:12px;width:7px;height:1px;
                 background:var(--b300)}
  .legal li ul{margin:5px 0 2px}
  .legal li ul > li{font-size:13px;color:var(--n500)}

  /* 問い合わせ窓口だけは枠で囲って探しやすくする */
  .legal .win{border:1px solid var(--n300);background:var(--n100);padding:18px 22px;margin-top:4px}
  .legal .win dl{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:0;font-size:13.5px}
  .legal .win dt{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.14em;
                 color:var(--b600);padding-top:5px}
  .legal .win dd{margin:0;color:var(--n900);font-weight:500;line-height:1.7}
  .legal .rev{margin-top:clamp(26px,3.4vw,38px);padding-top:16px;border-top:1px solid var(--n300);
              font-size:12px;color:var(--n500);font-family:var(--mono);letter-spacing:.08em}

  @media (max-width:760px){
    .legal{max-width:none}
    .legal h2{gap:9px}
    .legal .win{padding:18px 16px}
    .legal .win dl{grid-template-columns:1fr;gap:3px 0}
    .legal .win dt{padding-top:10px}
  }

  /* 法務ページのヒーロー。写真は薄く敷き、文字が主役になるようスクリムを控えめにする */
  .legal-hero h1{font-size:clamp(28px,4.2vw,46px)}
  .legal-hero .lead{max-width:44em;font-size:13.5px;line-height:1.95}
  .legal-hero .fvbg img{object-position:56% 38%}
  .legal-hero .scrim{background:
      linear-gradient(90deg, rgba(9,32,55,.50) 0%, rgba(9,32,55,.32) 40%,
                             rgba(9,32,55,.14) 74%, rgba(9,32,55,.06) 100%),
      linear-gradient(180deg, rgba(9,32,55,.30) 0%, rgba(9,32,55,.10) 44%, rgba(9,32,55,.34) 100%)}

  /* 現在地のナビ項目 */
  .nav ul a[aria-current]{color:var(--b600)}
  .nav ul a[aria-current]::after{transform:scaleX(1)}
  footer a[aria-current]{color:#fff;text-decoration:underline;text-underline-offset:3px}