.sec_privacy_body {
  background: #091b31;

  .wrap {
    margin: 0 auto;
    padding: 45px 40px 40px;
    max-width: 1440px;
    display: grid;
    grid-template-columns: minmax(190px, 240px) minmax(0, 1fr);
    gap: 54px;
  }

  .index {
    position: sticky;
    top: 30px;
    padding: 0 24px 8px 0;
    max-height: calc(100vh - 60px);
    align-self: start;
    display: grid;
    gap: 8px;
    overflow-y: auto;
    border-right: 1px solid #1d3657;

    a {
      padding: 8px 0 9px 14px;
      display: grid;
      gap: 1px;
      border-left: 2px solid #5375a8;
      color: #d5e1f0;
      font-size: 13px;
      font-weight: 600;
      line-height: 1.6em;
      transition: border-color .2s, color .2s;

      span { color: #83aff9; font-family: var(--font-en); font-size: 11px; line-height: 1.3em; letter-spacing: .12em; }
      &:hover, &:focus-visible { border-color: #49c8f6; color: #fff; }
    }
  }

  .main { min-width: 0; }

  .item {
    padding: 0 0 30px;
    margin-bottom: 28px;
    border-bottom: 1px solid #2b5a8b;
    scroll-margin-top: 32px;

    &:last-child { margin-bottom: 0; border-bottom: 0; }
    .heading { margin-bottom: 11px; display: flex; align-items: center; gap: 22px; }
    .number { min-width: 68px; display: inline-flex; align-items: center; gap: 16px; color: #7aabff; font-family: var(--font-en); font-size: 15px; font-weight: 600; line-height: 1.5em; letter-spacing: .08em; &::after { width: 34px; height: 2px; background: linear-gradient(90deg, #43c5f4, #8b5cff); content: ""; } }
    h2 { color: #fff; font-size: 19px; font-weight: 700; line-height: 1.6em; }
    .body { padding-left: 90px; color: #c0d0e4; font-size: 14px; line-height: 1.9em; }
    p + p, ul + p { margin-top: 12px; }
    ul { margin-top: 9px; padding-left: 1.3em; list-style: disc; li { padding-left: 3px; &::marker { color: #8bb7ef; } } }
    strong { color: #e9f3ff; font-weight: 700; }
  }

  @media (max-width: 1000px) {
    .wrap { padding: 40px 28px; grid-template-columns: minmax(150px, 200px) minmax(0, 1fr); gap: 30px; }
    .item { .body { padding-left: 0; } }
  }
  @media (max-width: 700px) {
    .wrap { padding: 30px 18px 42px; grid-template-columns: 1fr; gap: 28px; }
    .index { position: static; padding: 0 0 25px; max-height: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; overflow: visible; border-right: 0; border-bottom: 1px solid #2b5a8b; a { font-size: 12px; } }
    .item { padding-bottom: 25px; margin-bottom: 24px; scroll-margin-top: 85px; .heading { gap: 12px; } .number { min-width: 52px; gap: 8px; &::after { width: 22px; } } h2 { font-size: 17px; } .body { font-size: 13px; } }
  }
}
