:root {
      --color-primary: #0F2A4A;
      --color-primary-light: #1E4976;
      --color-primary-30: rgba(15, 42, 74, 0.30);
      --color-primary-78: rgba(15, 42, 74, 0.78);
      --color-primary-96: rgba(15, 42, 74, 0.96);
      --color-primary-04: rgba(15, 42, 74, 0.04);
      --color-accent: #2563EB;
      --color-accent-light: #3B73E8;
      --color-text: #1A2332;
      --color-text-muted: #5B6B7F;
      --color-bg: #FAFBFC;
      --color-bg-alt: #F3F5F8;
      --color-border: #E3E8EF;
      --color-white: #FFFFFF;
      --color-footer: #0A1E36;
      --color-calm-alert: #E8927C;
      --color-transparent: transparent;
      --color-white-04: rgba(255, 255, 255, 0.04);
      --color-white-08: rgba(255, 255, 255, 0.08);
      --color-white-10: rgba(255, 255, 255, 0.10);
      --color-white-20: rgba(255, 255, 255, 0.20);
      --color-white-50: rgba(255, 255, 255, 0.50);
      --color-white-55: rgba(255, 255, 255, 0.55);
      --color-white-65: rgba(255, 255, 255, 0.65);
      --color-white-68: rgba(255, 255, 255, 0.68);
      --color-white-70: rgba(255, 255, 255, 0.70);
      --color-white-75: rgba(255, 255, 255, 0.75);
      --color-white-76: rgba(255, 255, 255, 0.76);
      --color-white-95: rgba(255, 255, 255, 0.95);
      --shadow-sm: 0 1px 2px rgba(15, 42, 74, 0.06);
      --shadow-md: 0 4px 16px rgba(15, 42, 74, 0.08);
      --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      background: var(--color-bg);
      color: var(--color-text);
      font-family: "Noto Sans JP", sans-serif;
      -webkit-font-smoothing: antialiased;
    }

    .font-serif-jp {
      font-family: "Noto Serif JP", serif;
    }

    .hero-media {
      background-color: var(--color-primary);
    }

    .hero-video {
      height: 100%;
      inset: 0;
      object-fit: cover;
      object-position: center;
      position: absolute;
      width: 100%;
    }

    .hero-overlay {
      background:
        linear-gradient(
          90deg,
          var(--color-primary-96) 0%,
          var(--color-primary-78) 52%,
          var(--color-primary-30) 100%
        );
      inset: 0;
      position: absolute;
    }

    .hero-primary-button {
      background-color: var(--color-accent);
      box-shadow: var(--shadow-sm);
      color: var(--color-white);
      transition:
        background-color 0.3s var(--ease-out),
        box-shadow 0.3s var(--ease-out),
        transform 0.3s var(--ease-out);
    }

    .hero-primary-button:hover,
    .hero-primary-button:focus-visible {
      background-color: var(--color-accent-light);
      box-shadow: var(--shadow-md);
      transform: translateY(-2px);
    }

    .hero-secondary-button {
      background-color: var(--color-white-08);
      border-color: var(--color-white-20);
      color: var(--color-white);
      transition:
        background-color 0.3s var(--ease-out),
        border-color 0.3s var(--ease-out),
        transform 0.3s var(--ease-out);
    }

    .hero-secondary-button:hover,
    .hero-secondary-button:focus-visible {
      background-color: var(--color-white-10);
      border-color: var(--color-white);
      transform: translateY(-2px);
    }

    .nav-link {
      color: var(--color-text-muted);
      transition: color 0.3s var(--ease-out);
    }

    .nav-link:hover,
    .nav-link:focus-visible {
      color: var(--color-primary);
    }

    .primary-button {
      background-color: var(--color-primary);
      box-shadow: var(--shadow-sm);
      color: var(--color-white);
      transition:
        background-color 0.3s var(--ease-out),
        box-shadow 0.3s var(--ease-out),
        transform 0.3s var(--ease-out);
    }

    .primary-button:hover,
    .primary-button:focus-visible {
      background-color: var(--color-primary-light);
      box-shadow: var(--shadow-md);
      transform: translateY(-2px);
    }

    .secondary-button {
      background-color: var(--color-white);
      border-color: var(--color-border);
      color: var(--color-primary);
      transition:
        border-color 0.3s var(--ease-out),
        box-shadow 0.3s var(--ease-out),
        transform 0.3s var(--ease-out);
    }

    .secondary-button:hover,
    .secondary-button:focus-visible {
      border-color: var(--color-primary);
      box-shadow: var(--shadow-sm);
      transform: translateY(-2px);
    }

    .button-arrow {
      display: inline-block;
      transition: transform 0.3s var(--ease-out);
    }

    a:hover .button-arrow,
    a:focus-visible .button-arrow {
      transform: translateX(4px);
    }

    .content-card {
      background-color: var(--color-white);
      border-color: var(--color-border);
      box-shadow: var(--shadow-sm);
      transition:
        border-color 0.3s var(--ease-out),
        box-shadow 0.3s var(--ease-out),
        transform 0.3s var(--ease-out);
    }

    .content-card:hover {
      border-color: var(--color-primary);
      box-shadow: var(--shadow-md);
      transform: translateY(-4px);
    }

    .problem-card {
      overflow: hidden;
      position: relative;
    }

    .problem-card::before {
      background-color: var(--color-accent);
      content: "";
      height: 3px;
      left: 0;
      position: absolute;
      top: 0;
      transition: width 0.3s var(--ease-out);
      width: 48px;
    }

    .problem-card:hover::before {
      width: 100%;
    }

    .soft-card {
      background-color: var(--color-white);
      border-color: var(--color-border);
      box-shadow: var(--shadow-sm);
      transition:
        box-shadow 0.3s var(--ease-out),
        transform 0.3s var(--ease-out);
    }

    .soft-card:hover {
      box-shadow: var(--shadow-md);
      transform: translateY(-2px);
    }

    .reason-item .reason-number {
      color: var(--color-border);
      transition: color 0.3s var(--ease-out);
    }

    .reason-item:hover .reason-number {
      color: var(--color-accent);
    }

    .section-stage {
      isolation: isolate;
      overflow: hidden;
      position: relative;
    }

    .section-marker {
      color: var(--color-primary-04);
      font-family: "Noto Serif JP", serif;
      font-size: clamp(7rem, 15vw, 13rem);
      font-weight: 700;
      letter-spacing: -0.06em;
      line-height: 1;
      pointer-events: none;
      position: absolute;
      right: -0.04em;
      top: 0.18em;
      user-select: none;
      z-index: -1;
    }

    .section-marker-light {
      color: var(--color-white-04);
      z-index: 0;
    }

    .section-rule {
      background-color: var(--color-accent);
      height: 2px;
      width: 40px;
    }

    .strength-index {
      background-color: var(--color-primary);
      color: var(--color-white);
    }

    .reason-item {
      transition:
        background-color 0.3s var(--ease-out),
        padding-left 0.3s var(--ease-out),
        padding-right 0.3s var(--ease-out);
    }

    .reason-item:hover {
      background-color: var(--color-white);
      padding-left: 1.25rem;
      padding-right: 1.25rem;
    }

    .column-card-visual {
      background-color: var(--color-primary);
      min-height: 148px;
      overflow: hidden;
      position: relative;
    }

    .column-card-visual::before,
    .column-card-visual::after {
      border: 1px solid var(--color-white-20);
      content: "";
      height: 112px;
      position: absolute;
      transform: rotate(45deg);
      width: 112px;
    }

    .column-card-visual::before {
      right: -28px;
      top: -54px;
    }

    .column-card-visual::after {
      bottom: -70px;
      left: 34%;
    }

    .column-card-visual .visual-line {
      background-color: var(--color-white-20);
      height: 1px;
      position: absolute;
      right: 0;
      top: 50%;
      width: 42%;
    }

    .contact-stage {
      background-color: var(--color-primary);
      overflow: hidden;
      position: relative;
    }

    .contact-stage::after {
      border: 1px solid var(--color-white-10);
      content: "";
      height: 240px;
      position: absolute;
      right: -90px;
      top: -110px;
      transform: rotate(32deg);
      width: 240px;
    }

    .footer-link {
      color: var(--color-white-68);
      transition: color 0.3s var(--ease-out);
    }

    .footer-link:hover,
    .footer-link:focus-visible {
      color: var(--color-white);
    }

    .reveal {
      opacity: 0;
      transform: translateY(24px);
      transition:
        opacity 0.7s var(--ease-out),
        transform 0.7s var(--ease-out);
    }

    .reveal.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    #mobile-menu {
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transform: translateY(-8px);
      transition:
        max-height 0.3s var(--ease-out),
        opacity 0.3s var(--ease-out),
        transform 0.3s var(--ease-out);
    }

    #mobile-menu.is-open {
      max-height: 440px;
      opacity: 1;
      transform: translateY(0);
    }

    .menu-line {
      transform-origin: center;
      transition:
        opacity 0.3s var(--ease-out),
        transform 0.3s var(--ease-out);
    }

    #mobile-menu-btn[aria-expanded="true"] .menu-line:nth-child(1) {
      transform: translateY(6px) rotate(45deg);
    }

    #mobile-menu-btn[aria-expanded="true"] .menu-line:nth-child(2) {
      opacity: 0;
    }

    #mobile-menu-btn[aria-expanded="true"] .menu-line:nth-child(3) {
      transform: translateY(-6px) rotate(-45deg);
    }

    :focus-visible {
      outline: 3px solid var(--color-accent);
      outline-offset: 3px;
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

      *,
      *::before,
      *::after {
        animation: none !important;
        scroll-behavior: auto !important;
        transition: none !important;
      }

      .reveal {
        opacity: 1;
        transform: none;
      }
    }

    @media (max-width: 767px) {
      .hero-overlay {
        background:
          linear-gradient(
            90deg,
            var(--color-primary-96) 0%,
            var(--color-primary-78) 100%
          );
      }
    }