/* Generated from the approved homepage prototype. */
:root {
      --ink: #10213b;
      --muted: #61708a;
      --line: #dfe5ed;
      --paper: #ffffff;
      --wash: #f3f6fa;
      --blue: #1268f2;
      --cyan: #17c7df;
      --navy: #07152d;
      --radius: 24px;
      --shadow: 0 20px 60px rgba(16, 33, 59, .10);
    }

    * { box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      color: var(--ink);
      background: var(--paper);
      font-family: "Noto Sans JP", "BIZ UDPGothic", "Yu Gothic UI", Meiryo, sans-serif;
      font-feature-settings: "palt" 1;
      letter-spacing: .02em;
      line-height: 1.75;
      -webkit-font-smoothing: antialiased;
    }

    a { color: inherit; text-decoration: none; }
    button, input { font: inherit; }
    svg { display: block; }

    .sk-skip-link {
      position: fixed;
      z-index: 100;
      top: 12px;
      left: 12px;
      padding: 10px 16px;
      border-radius: 10px;
      color: #fff;
      background: var(--navy);
      transform: translateY(-160%);
    }

    .sk-skip-link:focus { transform: translateY(0); }

    .sk-wrap {
      width: min(1160px, calc(100% - 48px));
      margin-inline: auto;
    }

    .sk-site-header {
      position: sticky;
      z-index: 50;
      top: 0;
      border-bottom: 1px solid rgba(223, 229, 237, .8);
      background: rgba(255, 255, 255, .88);
      backdrop-filter: blur(18px);
    }

    .sk-header-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 78px;
    }

    .sk-brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-size: 22px;
      font-weight: 900;
      letter-spacing: -.04em;
    }

    .sk-brand-mark {
      display: grid;
      width: 40px;
      height: 40px;
      place-items: center;
      border-radius: 13px 13px 13px 5px;
      color: #fff;
      background: linear-gradient(145deg, var(--blue), var(--cyan));
      box-shadow: 0 9px 20px rgba(18, 104, 242, .26);
    }

    .sk-brand em { color: var(--blue); font-style: normal; }

    .sk-site-nav {
      display: flex;
      align-items: center;
      gap: 30px;
      color: #465570;
      font-size: 14px;
      font-weight: 700;
    }

    .sk-site-nav a { transition: color .2s ease; }
    .sk-site-nav a:hover { color: var(--blue); }

    .sk-nav-cta {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 10px 16px;
      border-radius: 999px;
      color: #fff !important;
      background: var(--ink);
    }

    .sk-hero {
      padding: 38px 0 92px;
      background:
        radial-gradient(circle at 83% 3%, rgba(23, 199, 223, .10), transparent 26%),
        linear-gradient(180deg, #fff 0%, #f7f9fc 100%);
    }

    .sk-hero-panel {
      position: relative;
      display: grid;
      min-height: 570px;
      padding: 72px;
      overflow: hidden;
      grid-template-columns: 1.12fr .88fr;
      gap: 64px;
      border-radius: 34px;
      color: #fff;
      background:
        radial-gradient(circle at 82% 16%, rgba(23, 199, 223, .35), transparent 22%),
        radial-gradient(circle at 96% 90%, rgba(18, 104, 242, .42), transparent 28%),
        linear-gradient(125deg, #061329 0%, #0b214b 57%, #0b3f8e 100%);
      box-shadow: 0 34px 100px rgba(7, 21, 45, .22);
    }

    .sk-hero-panel::before {
      position: absolute;
      right: -90px;
      bottom: -190px;
      width: 470px;
      height: 470px;
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: 50%;
      content: "";
    }

    .sk-hero-panel::after {
      position: absolute;
      top: -100px;
      right: 23%;
      width: 250px;
      height: 250px;
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 50%;
      content: "";
    }

    .sk-hero-copy, .sk-solution-visual { position: relative; z-index: 1; }

    .sk-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      margin: 0 0 22px;
      color: #93dff2;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: .1em;
    }

    .sk-eyebrow::before {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--cyan);
      box-shadow: 0 0 0 5px rgba(23, 199, 223, .14);
      content: "";
    }

    h1 {
      max-width: 660px;
      margin: 0;
      font-size: clamp(42px, 5.3vw, 70px);
      font-weight: 900;
      line-height: 1.15;
      letter-spacing: -.055em;
    }

    h1 .sk-accent { color: #5ee3f2; }

    .sk-hero-lead {
      max-width: 620px;
      margin: 24px 0 30px;
      color: #c8d4e7;
      font-size: 16px;
      line-height: 1.9;
    }

    .sk-search-box {
      display: flex;
      max-width: 650px;
      padding: 7px;
      border: 1px solid rgba(255, 255, 255, .22);
      border-radius: 17px;
      background: #fff;
      box-shadow: 0 16px 35px rgba(0, 0, 0, .2);
    }

    .sk-search-box label {
      display: flex;
      flex: 1;
      align-items: center;
      gap: 12px;
      min-width: 0;
      padding-left: 14px;
      color: #8490a3;
    }

    .sk-search-box input {
      width: 100%;
      min-width: 0;
      padding: 12px 0;
      border: 0;
      outline: 0;
      color: var(--ink);
      background: transparent;
      font-size: 15px;
    }

    .sk-search-box button {
      flex: 0 0 auto;
      padding: 12px 24px;
      border: 0;
      border-radius: 12px;
      color: #fff;
      background: var(--blue);
      font-weight: 800;
      cursor: pointer;
      transition: transform .2s ease, background .2s ease;
    }

    .sk-search-box button:hover { background: #0058dc; transform: translateY(-1px); }

    .sk-quick-links {
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
      margin-top: 18px;
      color: #cad6e8;
      font-size: 12px;
    }

    .sk-quick-links span { padding: 6px 2px; color: #8194b1; }
    .sk-quick-links a {
      padding: 6px 12px;
      border: 1px solid rgba(255, 255, 255, .15);
      border-radius: 999px;
      background: rgba(255, 255, 255, .07);
    }

    .sk-quick-links a:hover { border-color: rgba(94, 227, 242, .6); color: #fff; }

    .sk-solution-visual {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .sk-device {
      position: relative;
      width: min(100%, 310px);
      padding: 18px;
      border: 1px solid rgba(255, 255, 255, .16);
      border-radius: 31px;
      background: rgba(255, 255, 255, .1);
      box-shadow: inset 0 1px rgba(255,255,255,.16), 0 32px 70px rgba(0,0,0,.24);
      backdrop-filter: blur(12px);
      transform: rotate(2deg);
    }

    .sk-device-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 3px 6px 16px;
      color: #9db0ce;
      font-size: 11px;
      font-weight: 800;
    }

    .sk-device-screen {
      padding: 24px 20px;
      border-radius: 19px;
      color: var(--ink);
      background: #f8fbff;
    }

    .sk-device-label {
      margin: 0 0 17px;
      color: #72819a;
      font-size: 11px;
      font-weight: 800;
    }

    .sk-status-row {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 0 -2px 10px;
      padding: 12px;
      border-radius: 13px;
      background: #fff;
      box-shadow: 0 7px 20px rgba(16, 33, 59, .07);
    }

    .sk-status-icon {
      display: grid;
      flex: 0 0 34px;
      width: 34px;
      height: 34px;
      place-items: center;
      border-radius: 10px;
      color: #fff;
      background: linear-gradient(140deg, var(--blue), var(--cyan));
      font-size: 15px;
      font-weight: 900;
    }

    .sk-status-row strong { display: block; font-size: 12px; }
    .sk-status-row small { display: block; color: #8390a5; font-size: 10px; }

    .sk-solved {
      margin: 18px 0 0;
      padding: 13px;
      border-radius: 13px;
      color: #078368;
      background: #e5fbf5;
      font-size: 12px;
      font-weight: 800;
      text-align: center;
    }

    .sk-floating-note {
      position: absolute;
      top: 19%;
      right: -28px;
      padding: 10px 15px;
      border: 1px solid rgba(255,255,255,.35);
      border-radius: 12px;
      color: var(--ink);
      background: rgba(255, 255, 255, .93);
      box-shadow: 0 12px 30px rgba(0, 0, 0, .17);
      font-size: 11px;
      font-weight: 800;
      transform: rotate(-2deg);
    }

    .sk-trust-strip {
      display: grid;
      margin-top: -34px;
      padding: 25px 32px;
      position: relative;
      z-index: 2;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
      border: 1px solid var(--line);
      border-radius: 22px;
      background: rgba(255, 255, 255, .96);
      box-shadow: var(--shadow);
    }

    .sk-trust-item {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      font-size: 13px;
      font-weight: 800;
    }

    .sk-trust-icon {
      display: grid;
      width: 34px;
      height: 34px;
      place-items: center;
      border-radius: 10px;
      color: var(--blue);
      background: #edf4ff;
    }

    .sk-section { padding: 100px 0; }
    .sk-section.sk-soft { background: var(--wash); }

    .sk-section-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 36px;
    }

    .sk-section-kicker {
      display: block;
      margin-bottom: 8px;
      color: var(--blue);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .14em;
      text-transform: uppercase;
    }

    h2 {
      margin: 0;
      font-size: clamp(30px, 3.3vw, 44px);
      line-height: 1.35;
      letter-spacing: -.045em;
    }

    .sk-section-note { margin: 0; color: var(--muted); font-size: 14px; }
    .sk-text-link { color: var(--blue); font-size: 14px; font-weight: 800; }
    .sk-text-link:hover { text-decoration: underline; }

    .sk-category-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }

    .sk-category-card {
      position: relative;
      min-height: 188px;
      padding: 24px;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 21px;
      background: #fff;
      transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    }

    .sk-category-card:hover {
      border-color: #c7d7ef;
      box-shadow: 0 18px 45px rgba(16, 33, 59, .10);
      transform: translateY(-5px);
    }

    .sk-cat-icon {
      display: grid;
      width: 48px;
      height: 48px;
      margin-bottom: 31px;
      place-items: center;
      border-radius: 14px;
      color: var(--sk-cat, var(--blue));
      background: color-mix(in srgb, var(--sk-cat, var(--blue)) 11%, white);
      font-size: 18px;
      font-weight: 900;
    }

    .sk-category-card strong { display: block; font-size: 17px; }
    .sk-category-card small { color: var(--muted); font-size: 12px; }

    .sk-arrow {
      position: absolute;
      right: 22px;
      bottom: 24px;
      color: #9aa7b9;
      transition: color .2s ease, transform .2s ease;
    }

    .sk-category-card:hover .sk-arrow { color: var(--blue); transform: translateX(3px); }

    .sk-article-grid {
      display: grid;
      grid-template-columns: 1.2fr .9fr .9fr;
      gap: 20px;
    }

    .sk-article-card {
      display: flex;
      min-height: 410px;
      overflow: hidden;
      flex-direction: column;
      border: 1px solid var(--line);
      border-radius: 24px;
      background: #fff;
      transition: transform .25s ease, box-shadow .25s ease;
    }

    .sk-article-card:hover { box-shadow: var(--shadow); transform: translateY(-5px); }

    .sk-article-visual {
      position: relative;
      display: grid;
      min-height: 190px;
      place-items: center;
      overflow: hidden;
      color: #fff;
      background: var(--sk-visual, linear-gradient(135deg, #1268f2, #17c7df));
    }

    .sk-article-card.sk-featured .sk-article-visual { min-height: 230px; }

    .sk-article-visual::before,
    .sk-article-visual::after {
      position: absolute;
      border: 1px solid rgba(255,255,255,.25);
      border-radius: 50%;
      content: "";
    }

    .sk-article-visual::before { width: 180px; height: 180px; right: -60px; top: -90px; }
    .sk-article-visual::after { width: 120px; height: 120px; left: -40px; bottom: -65px; }

    .sk-visual-icon {
      display: grid;
      width: 80px;
      height: 80px;
      place-items: center;
      border: 1px solid rgba(255,255,255,.25);
      border-radius: 25px;
      background: rgba(255,255,255,.14);
      backdrop-filter: blur(8px);
      font-size: 34px;
      font-weight: 900;
      transform: rotate(-3deg);
    }

    .sk-article-body { display: flex; flex: 1; flex-direction: column; padding: 24px; }

    .sk-tag {
      align-self: flex-start;
      margin-bottom: 12px;
      padding: 4px 9px;
      border-radius: 999px;
      color: var(--blue);
      background: #edf4ff;
      font-size: 10px;
      font-weight: 900;
    }

    .sk-article-body h3 {
      margin: 0 0 10px;
      font-size: 17px;
      line-height: 1.55;
      letter-spacing: -.02em;
    }

    .sk-article-card.sk-featured h3 { font-size: 21px; }

    .sk-article-body p {
      margin: 0 0 20px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.8;
    }

    .sk-read-more {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: auto;
      color: #465570;
      font-size: 12px;
      font-weight: 800;
    }

    .sk-latest-layout {
      display: grid;
      grid-template-columns: 1.35fr .65fr;
      gap: 52px;
    }

    .sk-article-list { border-top: 1px solid var(--line); }

    .sk-article-row {
      display: grid;
      align-items: center;
      padding: 23px 2px;
      grid-template-columns: 108px 1fr 28px;
      gap: 22px;
      border-bottom: 1px solid var(--line);
      transition: padding .2s ease, color .2s ease;
    }

    .sk-article-row:hover { padding-left: 8px; color: var(--blue); }
    .sk-article-row .sk-meta { color: var(--muted); font-size: 11px; }
    .sk-article-row strong { font-size: 14px; line-height: 1.65; }
    .sk-article-row svg { color: #9ba8ba; }

    .sk-popular-box {
      position: sticky;
      top: 110px;
      align-self: start;
      padding: 30px;
      border-radius: 25px;
      color: #fff;
      background: var(--navy);
      box-shadow: 0 22px 60px rgba(7, 21, 45, .18);
    }

    .sk-popular-box .sk-section-kicker { color: #65dff0; }
    .sk-popular-box h3 { margin: 0 0 22px; font-size: 23px; }

    .sk-popular-list { display: grid; gap: 5px; }

    .sk-popular-list a {
      display: flex;
      align-items: center;
      gap: 13px;
      padding: 13px 0;
      border-bottom: 1px solid rgba(255,255,255,.1);
      color: #d0d9e8;
      font-size: 12px;
      line-height: 1.55;
    }

    .sk-popular-list a:last-child { border: 0; }
    .sk-popular-list a:hover { color: #fff; }

    .sk-rank {
      display: grid;
      flex: 0 0 26px;
      width: 26px;
      height: 26px;
      place-items: center;
      border-radius: 8px;
      color: var(--navy);
      background: #65dff0;
      font-size: 10px;
      font-weight: 900;
    }

    .sk-contact-section { padding: 0 0 100px; }

    .sk-contact-panel {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 36px;
      padding: 54px 62px;
      overflow: hidden;
      border-radius: 30px;
      background:
        radial-gradient(circle at 92% 20%, rgba(23,199,223,.25), transparent 25%),
        #0b214b;
      color: #fff;
    }

    .sk-contact-panel h2 { font-size: clamp(28px, 3vw, 40px); }
    .sk-contact-panel p { margin: 12px 0 0; color: #c2cfe2; font-size: 13px; }

    .sk-button-light {
      display: inline-flex;
      flex: 0 0 auto;
      align-items: center;
      gap: 10px;
      padding: 14px 21px;
      border-radius: 13px;
      color: var(--navy);
      background: #fff;
      font-size: 13px;
      font-weight: 900;
      box-shadow: 0 12px 30px rgba(0,0,0,.15);
    }

    .sk-site-footer { padding: 54px 0 34px; border-top: 1px solid var(--line); }

    .sk-footer-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 40px;
      padding-bottom: 45px;
    }

    .sk-footer-about { max-width: 420px; }
    .sk-footer-about p { margin: 14px 0 0; color: var(--muted); font-size: 12px; }

    .sk-footer-links { display: flex; flex-wrap: wrap; gap: 20px 30px; color: #53617a; font-size: 12px; font-weight: 700; }
    .sk-footer-links a:hover { color: var(--blue); }

    .sk-copyright {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      padding-top: 24px;
      border-top: 1px solid var(--line);
      color: #8a96a8;
      font-size: 10px;
    }

    .sk-mobile-menu { display: none; position: relative; }
    .sk-mobile-menu summary {
      display: grid;
      width: 38px;
      height: 38px;
      place-items: center;
      border-radius: 11px;
      background: var(--wash);
      cursor: pointer;
      list-style: none;
    }
    .sk-mobile-menu summary::-webkit-details-marker { display: none; }
    .sk-mobile-menu nav {
      position: absolute;
      top: 48px;
      right: 0;
      width: 210px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: #fff;
      box-shadow: var(--shadow);
    }
    .sk-mobile-menu nav a {
      display: block !important;
      padding: 11px 12px;
      border-radius: 9px;
      color: var(--ink);
    }
    .sk-mobile-menu nav a:hover { color: var(--blue); background: var(--wash); }

    @media (max-width: 980px) {
      .sk-site-nav a:not(.sk-nav-cta) { display: none; }
      .sk-hero-panel { padding: 56px 44px; grid-template-columns: 1fr .65fr; gap: 28px; }
      .sk-device { transform: scale(.9) rotate(2deg); }
      .sk-floating-note { right: -6px; }
      .sk-category-grid { grid-template-columns: repeat(2, 1fr); }
      .sk-article-grid { grid-template-columns: 1fr 1fr; }
      .sk-article-card.sk-featured { grid-column: 1 / -1; }
      .sk-article-card.sk-featured .sk-article-visual { min-height: 260px; }
      .sk-latest-layout { grid-template-columns: 1fr; }
      .sk-popular-box { position: static; }
    }

    @media (max-width: 720px) {
      .sk-wrap { width: min(100% - 30px, 1160px); }
      .sk-header-inner { min-height: 68px; }
      .sk-brand { font-size: 19px; }
      .sk-brand-mark { width: 36px; height: 36px; }
      .sk-nav-cta { display: none; }
      .sk-mobile-menu { display: block; }
      .sk-hero { padding: 18px 0 72px; }
      .sk-hero-panel { min-height: auto; padding: 42px 24px 30px; grid-template-columns: 1fr; border-radius: 26px; }
      h1 { font-size: clamp(39px, 12vw, 56px); }
      .sk-hero-lead { margin-top: 20px; font-size: 14px; }
      .sk-search-box { display: block; padding: 7px; }
      .sk-search-box label { padding: 3px 11px; }
      .sk-search-box button { width: 100%; }
      .sk-solution-visual { display: none; }
      .sk-trust-strip { margin-top: -24px; padding: 19px; grid-template-columns: 1fr; gap: 14px; }
      .sk-trust-item { justify-content: flex-start; }
      .sk-section { padding: 76px 0; }
      .sk-section-head { align-items: flex-start; flex-direction: column; margin-bottom: 27px; }
      .sk-category-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
      .sk-category-card { min-height: 155px; padding: 19px; }
      .sk-cat-icon { margin-bottom: 19px; }
      .sk-category-card small { display: none; }
      .sk-article-grid { grid-template-columns: 1fr; }
      .sk-article-card.sk-featured { grid-column: auto; }
      .sk-article-card, .sk-article-card.sk-featured { min-height: 0; }
      .sk-article-card .sk-article-visual, .sk-article-card.sk-featured .sk-article-visual { min-height: 200px; }
      .sk-article-row { grid-template-columns: 1fr 24px; gap: 12px; }
      .sk-article-row .sk-meta { grid-column: 1; }
      .sk-article-row strong { grid-column: 1; }
      .sk-article-row svg { grid-column: 2; grid-row: 1 / 3; }
      .sk-contact-panel { align-items: flex-start; padding: 40px 26px; flex-direction: column; }
      .sk-footer-top { flex-direction: column; }
      .sk-copyright { flex-direction: column; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      * { transition: none !important; }
    }