:root {
      --navy: #021154;
      --navy-deep: #000931;
      --blue: #1268ff;
      --blue-light: #2fe6ff;
      --white: #ffffff;
      --muted: #b8c8ff;
      --line: rgba(255, 255, 255, 0.18);
      --shadow-blue: rgba(8, 83, 255, 0.34);
      --content: min(1120px, calc(100% - 48px));
      font-family: "Inter", "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      color: #071b63;
      background: #f7fbff;
      font-family: inherit;
      line-height: 1.7;
    }

    a { color: inherit; text-decoration: none; }

    .site-header {
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      z-index: 20;
      color: #ffffff;
      background: rgba(0, 9, 49, 0.72);
      backdrop-filter: blur(18px);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .header-inner {
      width: min(1120px, calc(100% - 48px));
      min-height: 72px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      gap: 20px;
    }

    .brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
    .brand img { width: 105px; height: auto; }

    .header-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-left: auto;
      flex: 0 0 auto;
    }

    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      padding: 0 18px;
      border-radius: 999px;
      border: 1px solid transparent;
      font-size: 14px;
      font-weight: 800;
      line-height: 1;
      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
      white-space: nowrap;
    }

    .button:hover { transform: translateY(-1px); }

    .button-primary {
      color: #ffffff;
      background: linear-gradient(90deg, #1268ff 0%, #2fe6ff 100%);
      background-size: 300% 100%;
      background-position: 50% 0;
      box-shadow: 0 11px 24px rgba(8, 83, 255, 0.22);
    }

    .button-outline {
      color: #ffffff;
      border-color: rgba(255, 255, 255, 0.48);
      background: rgba(255, 255, 255, 0.05);
    }

    .terms-hero {
      position: relative;
      overflow: hidden;
      padding: 132px 0 62px;
      color: #ffffff;
      background:
        radial-gradient(circle at 86% 8%, rgba(47, 230, 255, 0.2), transparent 30%),
        radial-gradient(circle at 12% 86%, rgba(18, 104, 255, 0.34), transparent 32%),
        linear-gradient(135deg, #000927 0%, #001664 50%, #0719a0 100%);
    }

    .terms-hero::after {
      content: "";
      position: absolute;
      right: -18%;
      bottom: -150px;
      width: 720px;
      height: 300px;
      border: 1px solid rgba(85, 193, 255, 0.22);
      border-radius: 50%;
      transform: rotate(-16deg);
      pointer-events: none;
    }

    .terms-hero-inner { position: relative; z-index: 1; width: var(--content); margin: 0 auto; }

    .breadcrumb {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      margin: 0 0 28px;
      padding: 0;
      list-style: none;
      color: rgba(255, 255, 255, 0.72);
      font-size: 13px;
      font-weight: 700;
    }

    .breadcrumb a { color: #ffffff; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
    .breadcrumb li:not(:last-child)::after { content: ">"; margin-left: 8px; color: rgba(255, 255, 255, 0.5); }

    .terms-kicker { margin: 0 0 12px; color: var(--blue-light); font-size: 14px; font-weight: 900; }

    .terms-hero h1 {
      margin: 0;
      font-size: clamp(38px, 6vw, 64px);
      font-weight: 900;
      line-height: 1.18;
      letter-spacing: 0;
    }

    .terms-section {
      position: relative;
      overflow: hidden;
      padding: 72px 0 98px;
      background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    }

    .terms-section::before {
      content: "";
      position: absolute;
      right: -22%;
      top: 120px;
      width: 58%;
      height: 460px;
      border: 1px solid rgba(18, 104, 255, 0.1);
      border-radius: 50%;
      transform: rotate(-16deg);
      pointer-events: none;
    }

    .terms-container {
      position: relative;
      z-index: 1;
      width: min(960px, calc(100% - 48px));
      margin: 0 auto;
      padding: 54px 58px 60px;
      border: 1px solid #dce6ff;
      border-radius: 8px;
      background: #ffffff;
      box-shadow: 0 24px 54px rgba(24, 71, 153, 0.1);
    }

    .terms-container h2 {
      margin: 42px 0 14px;
      padding-top: 2px;
      color: #071b63;
      font-size: 22px;
      font-weight: 900;
      line-height: 1.55;
    }

    .terms-container h2:first-child { margin-top: 0; }

    .terms-container p {
      margin: 0 0 10px;
      color: #364872;
      font-size: 15px;
      font-weight: 600;
      line-height: 1.95;
    }

    .terms-container .terms-item {
      display: grid;
      grid-template-columns: 2.2em minmax(0, 1fr);
      column-gap: 0.1em;
      align-items: start;
    }

    .terms-container .terms-marker {
      color: #071b63;
      font-weight: 700;
      white-space: nowrap;
    }

    .terms-container .terms-sub-numbered {
      grid-template-columns: 2.7em minmax(0, 1fr);
      padding-left: 1.9em;
    }

    .terms-container .terms-bullet {
      grid-template-columns: 1.3em minmax(0, 1fr);
      padding-left: 1.2em;
    }

    .terms-date {
      margin-top: 42px !important;
      color: #071b63 !important;
      font-weight: 900 !important;
      text-align: right;
    }

    .site-footer {
      color: #ffffff;
      background: linear-gradient(135deg, #001464 0%, #05258f 100%);
      padding: 54px 0 50px;
    }

    .footer-inner {
      width: var(--content);
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 40px;
      align-items: end;
    }

    .footer-brand img { width: 220px; height: auto; max-width: 100%; }
    .footer-marks { margin-top: 18px; }
    .footer-marks img { width: 181px; height: auto; max-width: 100%; }

    .footer-links {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 22px;
      margin: 0 0 22px;
      padding: 0;
      list-style: none;
      font-size: 13px;
      font-weight: 800;
    }

    .footer-links a { color: rgba(255, 255, 255, 0.9); }
    .footer-links a:hover { color: #ffffff; }

    .copyright {
      margin: 0;
      text-align: right;
      color: rgba(255, 255, 255, 0.86);
      font-size: 12px;
      font-weight: 800;
    }

    @media (max-width: 980px) {
      .header-inner { min-height: 68px; }
      .button { min-height: 42px; padding: 0 14px; font-size: 13px; }
      .terms-hero { padding: 112px 0 54px; }
      .terms-container { padding: 42px 34px 48px; }
      .footer-inner { grid-template-columns: 1fr; align-items: start; }
      .footer-links { justify-content: flex-start; margin-bottom: 24px; }
      .copyright { text-align: left; }
    }

    @media (max-width: 640px) {
      :root { --content: min(100% - 24px, 560px); }
      .header-inner { width: var(--content); gap: 10px; }
      .brand img { width: 94px; }
      .header-actions { gap: 6px; }
      .button { min-height: 40px; padding: 0 11px; font-size: 12px; }
      .terms-hero { padding: 100px 0 44px; }
      .breadcrumb { margin-bottom: 22px; font-size: 12px; }
      .terms-hero h1 { font-size: clamp(34px, 12vw, 46px); }
      .terms-section { padding: 44px 0 70px; }
      .terms-container { width: var(--content); padding: 30px 20px 34px; }
      .terms-container h2 { margin-top: 34px; font-size: 19px; }
      .terms-container p { font-size: 14px; line-height: 1.9; }
      .terms-container .terms-item { grid-template-columns: 2.1em minmax(0, 1fr); }
      .terms-container .terms-sub-numbered { grid-template-columns: 2.5em minmax(0, 1fr); padding-left: 0.8em; }
      .terms-container .terms-bullet { grid-template-columns: 1.2em minmax(0, 1fr); padding-left: 0.6em; }
      .footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; font-size: 12px; }
    }

/* Blank lower pages prepared for future forms. */
.blank-page {
  min-height: calc(100vh - 320px);
  background: linear-gradient(180deg, #ffffff 0%, #f5faff 100%);
}