@layer page {
  :root {
    --op-navy: #17345c;
    --op-navy-deep: #0a192f;
    --op-gold: #c79223;
    --op-orange: #c45b14;
    --op-red: #b82b2b;
    --op-ink: #1f2937;
    --op-muted: #526276;
    --op-line: #d8dee8;
    --op-pale: #f5f7fa;
  }

  .optin-priority-page {
    margin: 0;
    color: var(--op-ink);
    background: #fff;
    font-family: "Noto Sans JP", sans-serif;
  }
  .optin-priority-page *,
  .optin-priority-page *::before,
  .optin-priority-page *::after {
    box-sizing: border-box;
  }
  .optin-priority-page .op-wrap {
    width: min(calc(100% - 48px), 1120px);
    margin-inline: auto;
  }
  .optin-priority-page .op-narrow {
    width: min(100%, 850px);
  }

  .op-hero {
    position: relative;
    overflow: hidden;
    padding: 88px 0 80px;
    background: linear-gradient(
      135deg,
      var(--op-navy-deep),
      #1d4775 68%,
      #215d8a
    );
    color: #fff;
  }
  .op-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(
        circle at 86% 25%,
        rgba(255, 255, 255, 0.14),
        transparent 34%
      ),
      linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size:
      auto,
      52px 52px,
      52px 52px;
    pointer-events: none;
  }
  .op-hero .op-wrap {
    position: relative;
    z-index: 1;
  }
  .op-kicker {
    margin: 0 0 15px;
    color: #f6dc8c;
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 0.1em;
  }
  .op-hero h1 {
    max-width: 980px;
    margin: 0;
    font-family: "Noto Serif JP", serif;
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 900;
    line-height: 1.25;
  }
  .op-hero h1 em {
    font-style: normal;
    color: #ffd66b;
  }
  .op-hero .op-lead {
    max-width: 820px;
    margin: 24px 0 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 1.05rem;
    line-height: 2;
  }
  .op-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-top: 25px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.82rem;
    font-weight: 700;
  }

  .op-jump {
    border-bottom: 1px solid var(--op-line);
    background: #f8fafc;
  }
  .op-jump .op-wrap {
    display: flex;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .op-jump a {
    flex: 0 0 auto;
    padding: 16px 18px;
    border-right: 1px solid var(--op-line);
    color: var(--op-navy);
    font-size: 0.85rem;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
  }
  .op-jump a:first-child {
    border-left: 1px solid var(--op-line);
  }
  .op-jump a:hover {
    background: #fff;
    color: var(--op-orange);
  }

  .op-verdict {
    margin: 58px 0 20px;
    padding: 4px 0 4px 25px;
    border-left: 6px solid var(--op-gold);
  }
  .op-verdict strong {
    display: block;
    margin-bottom: 13px;
    color: var(--op-red);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.1em;
  }
  .op-verdict p {
    margin: 0 0 10px;
    color: var(--op-navy);
    font-family: "Noto Serif JP", serif;
    font-size: clamp(1.22rem, 2.5vw, 1.75rem);
    font-weight: 900;
    line-height: 1.75;
  }
  .op-verdict .op-verdict-detail {
    color: var(--op-ink);
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1rem;
    font-weight: 500;
    line-height: 2;
  }

  .op-audience {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 34px 0 58px;
    border-top: 1px solid var(--op-line);
    border-bottom: 1px solid var(--op-line);
  }
  .op-audience a {
    min-width: 0;
    padding: 20px 22px;
    border-right: 1px solid var(--op-line);
    color: var(--op-ink);
    text-decoration: none;
  }
  .op-audience a:last-child {
    border-right: 0;
  }
  .op-audience strong {
    display: block;
    margin-bottom: 6px;
    color: var(--op-navy);
    font-size: 0.94rem;
  }
  .op-audience span {
    display: block;
    color: var(--op-muted);
    font-size: 0.82rem;
    line-height: 1.7;
  }
  .op-audience a:hover {
    background: #f8fafc;
  }

  .op-section {
    padding: 66px 0;
    border-top: 1px solid var(--op-line);
    scroll-margin-top: 95px;
  }
  .op-section:first-of-type {
    border-top: 0;
  }
  .op-section .op-section-no {
    display: block;
    margin-bottom: 9px;
    color: var(--op-orange);
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.1em;
  }
  .op-section h2 {
    max-width: 900px;
    margin: 0 0 22px;
    color: var(--op-navy);
    font-family: "Noto Serif JP", serif;
    font-size: clamp(1.65rem, 3vw, 2.45rem);
    line-height: 1.42;
  }
  .op-section h3 {
    margin: 34px 0 12px;
    padding-left: 14px;
    border-left: 4px solid var(--op-gold);
    color: var(--op-navy);
    font-size: 1.17rem;
    line-height: 1.65;
  }
  .op-section p {
    max-width: 850px;
    margin: 0 0 17px;
    font-size: 1rem;
    line-height: 2;
  }
  .op-section ul,
  .op-section ol {
    max-width: 850px;
    margin: 18px 0;
    padding-left: 1.45rem;
  }
  .op-section li {
    margin: 0.55em 0;
    line-height: 1.9;
  }
  .op-emphasis {
    font-weight: 900;
    color: var(--op-red);
  }
  .op-small {
    font-size: 0.87rem;
    color: var(--op-muted);
  }

  .op-citation-lead {
    color: var(--op-navy);
    font-weight: 900;
  }
  .op-key-points {
    counter-reset: keypoint;
    margin-top: 22px;
    padding: 0;
    border-top: 2px solid var(--op-navy);
    list-style: none;
  }
  .op-key-points li {
    counter-increment: keypoint;
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 8px 16px;
    margin: 0;
    padding: 20px 0;
    border-bottom: 1px solid var(--op-line);
  }
  .op-key-points li::before {
    content: counter(keypoint, decimal-leading-zero);
    grid-row: 1 / span 2;
    color: var(--op-orange);
    font-family: "Noto Serif JP", serif;
    font-size: 1.2rem;
    font-weight: 900;
  }
  .op-key-points strong {
    color: var(--op-navy);
  }

  .op-reading-key {
    max-width: 850px;
    margin: 28px 0;
    border-top: 2px solid var(--op-navy);
  }
  .op-reading-key > div {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 20px;
    padding: 18px 0;
    border-bottom: 1px solid var(--op-line);
  }
  .op-reading-key dt,
  .op-reading-key dd {
    margin: 0;
  }
  .op-reading-key dd {
    color: var(--op-muted);
    font-size: 0.92rem;
    line-height: 1.8;
  }
  .op-label {
    display: inline-block;
    margin-right: 0.4em;
    padding: 0.18em 0.55em;
    border: 1px solid currentColor;
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1.45;
    vertical-align: 0.08em;
    white-space: nowrap;
  }
  .op-label--source {
    color: var(--op-navy);
  }
  .op-label--analysis {
    color: var(--op-orange);
  }
  .op-label--practice {
    color: #16704a;
  }
  .op-note {
    max-width: 900px !important;
    margin-top: 28px !important;
    padding: 18px 0 18px 20px;
    border-left: 5px solid var(--op-gold);
    background: linear-gradient(90deg, #fff9e8, rgba(255, 249, 232, 0));
  }
  .op-note a {
    color: #075394;
    font-weight: 800;
  }

  .op-sequence {
    counter-reset: sequence;
    max-width: 950px !important;
    margin: 32px 0 !important;
    padding: 0 !important;
    border-top: 2px solid var(--op-navy);
    list-style: none;
  }
  .op-sequence li {
    counter-increment: sequence;
    display: grid;
    grid-template-columns: 54px minmax(150px, 230px) 1fr;
    gap: 18px;
    align-items: baseline;
    margin: 0;
    padding: 18px 0;
    border-bottom: 1px solid var(--op-line);
  }
  .op-sequence li::before {
    content: "0" counter(sequence);
    color: var(--op-orange);
    font-weight: 900;
  }
  .op-sequence strong {
    color: var(--op-navy);
  }
  .op-sequence span {
    color: var(--op-muted);
    font-size: 0.92rem;
  }

  .op-equation {
    max-width: 950px !important;
    margin: 30px 0 !important;
    padding: 26px 0;
    border-top: 3px solid var(--op-red);
    border-bottom: 1px solid var(--op-line);
    color: var(--op-navy);
    font-family: "Noto Serif JP", serif;
    font-size: clamp(1.05rem, 2.2vw, 1.45rem) !important;
    font-weight: 900;
    letter-spacing: 0.01em;
  }
  .op-equation span {
    display: block;
    margin-top: 12px;
    color: var(--op-muted);
    font-family: "Noto Sans JP", sans-serif;
    font-size: 0.86rem;
    font-weight: 500;
    line-height: 1.8;
  }
  .op-equation--positive {
    border-top-color: #16704a;
  }

  .op-three-step {
    display: grid;
    grid-template-columns: 1fr 54px 1fr 54px 1fr;
    align-items: center;
    margin: 32px 0 18px;
    padding: 25px 0;
    border-top: 1px solid var(--op-line);
    border-bottom: 1px solid var(--op-line);
  }
  .op-step {
    padding: 4px 18px;
  }
  .op-step b {
    display: block;
    margin-bottom: 8px;
    color: var(--op-navy);
    font-size: 1rem;
  }
  .op-step span {
    display: block;
    color: var(--op-muted);
    font-size: 0.88rem;
    line-height: 1.75;
  }
  .op-step-arrow {
    text-align: center;
    color: var(--op-orange);
    font-size: 1.6rem;
    font-weight: 900;
  }

  .op-figure {
    margin: 38px 0 18px;
  }
  .op-figure img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--op-line);
    background: #f4f7fa;
  }
  .op-figure figcaption {
    max-width: 900px;
    margin: 12px 0 0;
    color: var(--op-muted);
    font-size: 0.82rem;
    line-height: 1.75;
  }

  .op-law-gate {
    margin: 30px 0;
    padding: 22px 24px;
    border-top: 3px solid var(--op-navy);
    border-bottom: 1px solid var(--op-line);
    background: #f8fafc;
  }
  .op-law-gate b {
    display: block;
    margin-bottom: 8px;
    color: var(--op-navy);
    font-size: 1.05rem;
  }
  .op-law-gate p {
    margin: 0;
    font-size: 0.94rem;
    line-height: 1.9;
  }

  .op-matrix-wrap {
    overflow-x: auto;
    margin: 28px 0;
  }
  .op-matrix {
    width: 100%;
    min-width: 880px;
    border-collapse: collapse;
    font-size: 0.9rem;
  }
  .op-matrix th,
  .op-matrix td {
    padding: 15px 16px;
    border: 1px solid var(--op-line);
    vertical-align: top;
    line-height: 1.75;
    text-align: left;
  }
  .op-matrix th {
    background: var(--op-navy);
    color: #fff;
    font-weight: 900;
  }
  .op-matrix td:first-child {
    width: 105px;
    color: var(--op-navy);
    font-weight: 900;
    background: #f4f7fb;
  }
  .op-matrix td:nth-child(2) {
    width: 31%;
  }
  .op-matrix .op-no {
    color: var(--op-red);
    font-weight: 900;
  }
  .op-matrix--three {
    min-width: 760px;
  }
  .op-matrix--three td:first-child {
    width: 190px;
  }
  .op-matrix--three td:nth-child(2) {
    width: 40%;
  }

  .op-transition-list {
    counter-reset: transition;
    max-width: 950px !important;
    margin: 28px 0 !important;
    padding: 0 !important;
    border-top: 2px solid var(--op-navy);
    list-style: none;
  }
  .op-transition-list li {
    counter-increment: transition;
    display: grid;
    grid-template-columns: 52px minmax(180px, 250px) 1fr;
    gap: 18px;
    margin: 0;
    padding: 20px 0;
    border-bottom: 1px solid var(--op-line);
  }
  .op-transition-list li::before {
    content: counter(transition, decimal-leading-zero);
    color: var(--op-orange);
    font-family: "Noto Serif JP", serif;
    font-size: 1.1rem;
    font-weight: 900;
  }
  .op-transition-list strong {
    color: var(--op-navy);
  }
  .op-transition-list span {
    color: var(--op-muted);
    font-size: 0.9rem;
    line-height: 1.8;
  }
  .op-role-questions {
    max-width: 900px;
    margin-top: 22px;
    border-top: 1px solid var(--op-line);
  }
  .op-role-questions p {
    margin: 0;
    padding: 15px 0;
    border-bottom: 1px solid var(--op-line);
  }
  .op-role-questions strong {
    color: var(--op-navy);
  }

  .op-process {
    counter-reset: opprocess;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 28px 0;
    border-top: 1px solid var(--op-line);
    border-left: 1px solid var(--op-line);
  }
  .op-process div {
    min-height: 150px;
    padding: 20px;
    border-right: 1px solid var(--op-line);
    border-bottom: 1px solid var(--op-line);
  }
  .op-process div::before {
    counter-increment: opprocess;
    content: counter(opprocess);
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin-bottom: 10px;
    background: var(--op-navy);
    color: #fff;
    font-weight: 900;
  }
  .op-process b {
    display: block;
    margin-bottom: 7px;
    color: var(--op-navy);
    font-size: 0.94rem;
  }
  .op-process span {
    display: block;
    color: var(--op-muted);
    font-size: 0.83rem;
    line-height: 1.75;
  }

  .op-stop-list {
    margin: 25px 0;
    border-top: 1px solid var(--op-line);
  }
  .op-stop-list div {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 24px;
    padding: 17px 0;
    border-bottom: 1px solid var(--op-line);
  }
  .op-stop-list b {
    color: var(--op-red);
    font-size: 0.9rem;
  }
  .op-stop-list span {
    font-size: 0.92rem;
    line-height: 1.8;
  }

  .op-download {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: 34px;
    align-items: start;
    margin: 30px 0;
    padding: 28px 0;
    border-top: 3px solid var(--op-gold);
    border-bottom: 1px solid var(--op-line);
  }
  .op-download h3 {
    margin: 0 0 10px;
    padding: 0;
    border: 0;
  }
  .op-download p {
    margin: 0 0 13px;
  }
  .op-button {
    display: inline-block;
    margin: 8px 8px 0 0;
    padding: 12px 18px;
    background: var(--op-navy);
    color: #fff;
    font-size: 0.88rem;
    font-weight: 900;
    text-decoration: none;
  }
  .op-button--light {
    background: #eef3f8;
    color: var(--op-navy);
    border: 1px solid var(--op-line);
  }
  .op-related {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .op-related li {
    margin: 0;
    border-bottom: 1px solid var(--op-line);
  }
  .op-related a {
    display: block;
    padding: 12px 0;
    color: #075394;
    font-size: 0.88rem;
    font-weight: 800;
    text-decoration: none;
  }
  .op-related a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  .op-source {
    padding: 58px 0;
    background: #f6f8fb;
    border-top: 1px solid var(--op-line);
  }
  .op-source h2 {
    margin: 0 0 18px;
    color: var(--op-navy);
    font-family: "Noto Serif JP", serif;
    font-size: 1.55rem;
  }
  .op-source ol {
    margin: 0;
    padding-left: 1.35rem;
    max-width: 940px;
  }
  .op-source li {
    margin: 0.7em 0;
    color: var(--op-muted);
    font-size: 0.87rem;
    line-height: 1.8;
  }
  .op-source a {
    color: #075394;
    font-weight: 700;
  }
  .op-citation-format {
    max-width: 940px;
    margin: 26px 0 14px;
    padding-top: 20px;
    border-top: 1px solid var(--op-line);
    color: var(--op-ink);
    font-size: 0.9rem;
    line-height: 1.85;
  }

  @media (max-width: 900px) {
    .op-audience {
      grid-template-columns: repeat(2, 1fr);
    }
    .op-audience a:nth-child(2) {
      border-right: 0;
    }
    .op-audience a:nth-child(-n + 2) {
      border-bottom: 1px solid var(--op-line);
    }
    .op-three-step {
      grid-template-columns: 1fr;
    }
    .op-step-arrow {
      transform: rotate(90deg);
      padding: 6px;
    }
    .op-process {
      grid-template-columns: repeat(2, 1fr);
    }
    .op-download {
      grid-template-columns: 1fr;
    }
  }
  @media (max-width: 620px) {
    .optin-priority-page .op-wrap {
      width: min(calc(100% - 32px), 1120px);
    }
    .op-hero {
      padding: 60px 0 55px;
    }
    .op-hero .op-lead {
      font-size: 0.96rem;
    }
    .op-audience {
      grid-template-columns: 1fr;
    }
    .op-audience a {
      border-right: 0;
      border-bottom: 1px solid var(--op-line);
    }
    .op-audience a:last-child {
      border-bottom: 0;
    }
    .op-section {
      padding: 50px 0;
    }
    .op-section p {
      font-size: 0.95rem;
    }
    .op-process {
      grid-template-columns: 1fr;
    }
    .op-stop-list div {
      grid-template-columns: 1fr;
      gap: 5px;
    }
    .op-reading-key > div,
    .op-sequence li,
    .op-transition-list li {
      grid-template-columns: 1fr;
      gap: 6px;
    }
    .op-key-points li {
      grid-template-columns: 36px 1fr;
    }
  }
}