:root {
      --deep: #062c88;
      --blue: #0747be;
      --bright: #176ce7;
      --sky: #6bc9f9;
      --ink: #061b4e;
      --line: #c9def4;
      --soft: #eaf7ff;
    }

    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      background: #fff;
      font-family: "Noto Sans JP", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
      -webkit-font-smoothing: antialiased;
    }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; }

    .column-shell { overflow: hidden; }
    .column-hero {
      position: relative;
      min-height: 668px;
      overflow: hidden;
      color: #fff;
      background:
        radial-gradient(circle at 96% 0, rgba(35, 121, 232, .38) 0 142px, transparent 143px),
        radial-gradient(circle at 0 62%, rgba(72, 143, 236, .34) 0 78px, transparent 79px),
        linear-gradient(150deg, #052b8a 0%, #04379e 56%, #0756c8 100%);
    }
    .column-hero::before {
      position: absolute;
      top: 138px;
      left: 4px;
      width: 122px;
      height: 118px;
      opacity: .65;
      background: radial-gradient(circle, #22a7ff 0 4px, transparent 5px) 0 0 / 27px 27px;
      content: "";
    }
    .column-hero::after {
      position: absolute;
      right: -50px;
      bottom: -93px;
      left: -55px;
      height: 180px;
      border-radius: 50% 50% 0 0;
      background: #fff;
      box-shadow: 0 -20px 0 #6ed0ff;
      content: "";
      transform: rotate(2deg);
    }

    .article-topbar {
      position: relative;
      z-index: 20;
      display: flex;
      height: 116px;
      padding: 24px 30px;
      align-items: center;
      justify-content: space-between;
    }
    .article-brand {
      display: flex;
      width: 170px;
      flex-direction: column;
      color: #fff;
      font-weight: 900;
      letter-spacing: .02em;
      line-height: 1;
    }
    .article-brand small {
      margin-top: 7px;
      font-size: .58em;
      letter-spacing: .08em;
    }
    .menu-button {
      display: grid;
      width: 82px;
      height: 82px;
      padding: 0;
      place-items: center;
      border: 0;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 10px 25px rgba(0, 24, 98, .24);
      cursor: pointer;
    }
    .menu-button span,
    .menu-button span::before,
    .menu-button span::after {
      display: block;
      width: 32px;
      height: 4px;
      border-radius: 999px;
      background: #0647ad;
      content: "";
      transition: .2s ease;
    }
    .menu-button span { position: relative; }
    .menu-button span::before { position: absolute; top: -12px; }
    .menu-button span::after { position: absolute; top: 12px; }
    .menu-button[aria-expanded="true"] span { background: transparent; }
    .menu-button[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
    .menu-button[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }
    .article-menu {
      position: absolute;
      z-index: 19;
      top: 104px;
      right: 26px;
      display: grid;
      width: min(330px, calc(100% - 52px));
      padding: 22px;
      gap: 4px;
      border-radius: 26px;
      color: #0a3f99;
      background: #fff;
      box-shadow: 0 20px 60px rgba(0, 21, 79, .28);
    }
    .article-menu[hidden] { display: none; }
    .article-menu a {
      padding: 15px 18px;
      border-radius: 14px;
      font-weight: 800;
    }
    .article-menu a:hover,
    .article-menu a:focus-visible { background: #e9f6ff; outline: none; }

    .hero-content {
      position: relative;
      z-index: 2;
      max-width: 860px;
      margin: 0 auto;
      padding: 0 30px;
      text-align: center;
    }
    .hero-kicker {
      display: inline-flex;
      min-height: 54px;
      margin: 0;
      padding: 8px 34px;
      align-items: center;
      justify-content: center;
      gap: 10px;
      border-radius: 999px;
      color: #0643a0;
      background: #e1f5ff;
      font-size: 23px;
      font-weight: 900;
      letter-spacing: .05em;
      box-shadow: 0 6px 18px rgba(0, 33, 105, .18);
    }
    .hero-kicker img {
      width: 36px;
      height: 36px;
      border-radius: 9px;
      object-fit: cover;
    }
    .hero-content h1 {
      margin: 28px 0 0;
      color: #fff;
      font-size: 72px;
      line-height: 1.18;
      font-weight: 900;
      letter-spacing: .12em;
      text-shadow: 0 5px 0 rgba(0, 20, 78, .22);
    }
    .hero-rule {
      width: 62px;
      height: 5px;
      margin: 30px auto 26px;
      border-radius: 999px;
      background: #61cfff;
    }
    .hero-lead {
      margin: 0;
      font-size: 24px;
      line-height: 1.75;
      font-weight: 700;
      letter-spacing: .08em;
    }
    .hero-visual {
      display: block;
      width: 248px;
      height: 205px;
      margin: 28px 70px 0 auto;
      border: 8px solid rgba(255,255,255,.12);
      border-radius: 22px;
      object-fit: cover;
      background: #fff;
      box-shadow: 0 24px 48px rgba(0, 20, 92, .26);
    }

    .article-main {
      position: relative;
      z-index: 4;
      max-width: 860px;
      margin: -4px auto 0;
      padding: 34px 48px 64px;
      background: #fff;
    }
    .filter-bar {
      display: flex;
      margin: 0 0 40px;
      gap: 16px 20px;
      justify-content: center;
      flex-wrap: wrap;
    }
    .filter-button {
      min-height: 54px;
      padding: 9px 34px;
      border: 2px solid #0b58d7;
      border-radius: 999px;
      color: #0642a0;
      background: #fff;
      cursor: pointer;
      font-weight: 800;
      letter-spacing: .04em;
      transition: .2s ease;
    }
    .filter-button:hover,
    .filter-button:focus-visible,
    .filter-button.is-active {
      color: #fff;
      background: #084bc2;
      box-shadow: 0 8px 18px rgba(8, 69, 180, .2);
      outline: none;
    }

    .article-list { display: grid; }
    .article-card {
      position: relative;
      display: grid;
      min-height: 178px;
      padding: 17px 56px 17px 0;
      grid-template-columns: 236px 1fr;
      gap: 26px;
      align-items: center;
      border-bottom: 1px solid var(--line);
      transition: background .2s ease, transform .2s ease;
    }
    .article-card[hidden] { display: none; }
    .article-card:hover,
    .article-card:focus-visible {
      z-index: 1;
      border-radius: 18px;
      background: #f5fbff;
      box-shadow: 0 8px 24px rgba(3, 52, 130, .1);
      outline: none;
      transform: translateY(-2px);
    }
    .article-thumb {
      width: 236px;
      height: 160px;
      overflow: hidden;
      border-radius: 12px;
      background: #e3f5ff;
    }
    .article-thumb img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .article-meta {
      display: flex;
      margin: 0 0 12px;
      align-items: center;
      gap: 10px;
      color: #64779f;
      font-size: 17px;
      font-weight: 700;
    }
    .article-label {
      padding: 4px 11px;
      border-radius: 5px;
      color: #0750b2;
      background: #dff2ff;
      font-size: 15px;
      font-weight: 800;
    }
    .article-copy h2 {
      margin: 0 0 13px;
      color: #071b4f;
      font-size: 23px;
      line-height: 1.55;
      font-weight: 800;
    }
    .article-summary {
      display: block;
      margin: -4px 0 12px;
      color: #42577d;
      font-size: 15px;
      line-height: 1.7;
    }
    .article-read {
      display: inline-block;
      color: #0750b2;
      font-size: 14px;
      font-weight: 900;
    }
    .article-date { margin: 0; }
    .article-arrow {
      position: absolute;
      top: 50%;
      right: 12px;
      width: 17px;
      height: 17px;
      border-top: 4px solid #0750bd;
      border-right: 4px solid #0750bd;
      transform: translateY(-50%) rotate(45deg);
    }

    .article-cta {
      display: grid;
      margin-top: 28px;
      padding: 22px 28px;
      grid-template-columns: 92px 1fr auto;
      gap: 20px;
      align-items: center;
      border: 1px solid #64adf6;
      border-radius: 16px;
      background: #eaf7ff;
    }
    .article-cta img {
      width: 92px;
      height: 92px;
      border: 2px solid #7cbbf7;
      border-radius: 50%;
      object-fit: cover;
      background: #fff;
    }
    .article-cta h2 {
      margin: 0 0 6px;
      color: #0647aa;
      font-size: 23px;
      line-height: 1.35;
    }
    .article-cta p {
      margin: 0;
      font-size: 16px;
      line-height: 1.6;
    }
    .article-cta a {
      display: inline-flex;
      min-height: 60px;
      padding: 10px 30px;
      align-items: center;
      border-radius: 999px;
      color: #fff;
      background: #084bc2;
      box-shadow: 0 8px 18px rgba(5, 67, 172, .22);
      font-weight: 800;
      white-space: nowrap;
    }
    .article-cta a:hover,
    .article-cta a:focus-visible { background: #063992; outline: 3px solid #7bcfff; outline-offset: 3px; }

    .empty-state {
      padding: 50px 20px;
      color: #566b92;
      text-align: center;
      font-weight: 700;
    }

    @media (max-width: 650px) {
      .column-hero { min-height: 334px; }
      .column-hero::before {
        top: 69px;
        width: 61px;
        height: 59px;
        background-size: 14px 14px;
      }
      .column-hero::after {
        right: -25px;
        bottom: -47px;
        left: -28px;
        height: 90px;
        box-shadow: 0 -10px 0 #6ed0ff;
      }
      .article-topbar {
        height: 58px;
        padding: 12px 15px;
      }
      .article-brand { width: 100px; font-size: 15px; }
      .article-brand small { margin-top: 4px; font-size: 9px; }
      .menu-button { width: 41px; height: 41px; }
      .menu-button span,
      .menu-button span::before,
      .menu-button span::after { width: 17px; height: 2px; }
      .menu-button span::before { top: -6px; }
      .menu-button span::after { top: 6px; }
      .article-menu { top: 54px; right: 13px; padding: 12px; border-radius: 16px; }
      .article-menu a { padding: 11px 13px; font-size: 14px; }
      .hero-content { padding: 0 15px; }
      .hero-kicker { min-height: 27px; padding: 4px 17px; gap: 5px; font-size: 12px; }
      .hero-kicker img { width: 18px; height: 18px; border-radius: 5px; }
      .hero-content h1 { margin-top: 14px; font-size: 37px; }
      .hero-rule { width: 31px; height: 3px; margin: 15px auto 13px; }
      .hero-lead { font-size: 12px; }
      .hero-visual {
        width: 124px;
        height: 103px;
        margin: 14px 34px 0 auto;
        border-width: 4px;
        border-radius: 11px;
      }
      .article-main { padding: 17px 24px 32px; }
      .filter-bar { margin-bottom: 20px; gap: 8px; }
      .filter-button { min-height: 27px; padding: 5px 12px; border-width: 1px; font-size: 10px; }
      .article-card {
        min-height: 89px;
        padding: 8px 28px 8px 0;
        grid-template-columns: 118px 1fr;
        gap: 13px;
      }
      .article-thumb { width: 118px; height: 80px; border-radius: 6px; }
      .article-meta { margin-bottom: 5px; gap: 5px; font-size: 9px; }
      .article-label { padding: 2px 6px; border-radius: 3px; font-size: 8px; }
      .article-copy h2 { margin-bottom: 5px; font-size: 12px; line-height: 1.5; }
      .article-summary { display: none; }
      .article-read { font-size: 9px; }
      .article-arrow { right: 6px; width: 9px; height: 9px; border-width: 2px; }
      .article-cta {
        margin-top: 14px;
        padding: 11px 14px;
        grid-template-columns: 46px 1fr;
        gap: 10px;
        border-radius: 8px;
      }
      .article-cta img { width: 46px; height: 46px; }
      .article-cta h2 { margin-bottom: 3px; font-size: 12px; }
      .article-cta p { font-size: 9px; }
      .article-cta a {
        min-height: 32px;
        padding: 6px 16px;
        grid-column: 1 / -1;
        justify-content: center;
        font-size: 11px;
      }
    }

    /* The shared header replaces the article-only top bar. */
    body.seo-index-original .article-topbar { display: none !important; }