* { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;
      color: #0f172a;
      background: #ffffff;
      line-height: 1.7;
    }
    a { text-decoration: none; }
    img { max-width: 100%; }

    .container {
      width: min(1120px, calc(100% - 32px));
      margin: 0 auto;
      position: relative;
      z-index: 1;
    }

    .sp-break { display: none; }

    .section {
      padding: 88px 0;
      position: relative;
      overflow: hidden;
    }

    .eyebrow {
      display: inline-block;
      font-size: 28px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      margin-bottom: 14px;
    }

    h1, h2, h3, p { margin: 0; }

    h1 {
      font-size: clamp(2.2rem, 5vw, 4.2rem);
      line-height: 1.15;
      letter-spacing: -0.02em;
    }

    h2 {
      font-size: clamp(1.8rem, 3.5vw, 3rem);
      line-height: 1.25;
      letter-spacing: -0.02em;
    }

    h3 {
      font-size: clamp(1.25rem, 2.5vw, 1.8rem);
      line-height: 1.35;
    }

    p.lead {
      font-size: 1.15rem;
      margin-top: 24px;
    }

    .hero {
      position: relative;
      overflow: hidden;
      color: #ffffff;
      background:
        radial-gradient(circle at top right, rgba(59,130,246,0.34), transparent 25%),
        radial-gradient(circle at left, rgba(16,185,129,0.22), transparent 22%),
        linear-gradient(135deg, #020617 0%, #0f172a 100%);
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(rgba(16, 161, 93, 0.55), rgba(2,6,23,0.7)), url('./images/111341_m.jpg') center/cover;
      opacity: 1;
      pointer-events: none;
    }

    .hero::after {
      content: "";
      position: absolute;
      right: -120px;
      bottom: -120px;
      width: 420px;
      height: 420px;
      background: radial-gradient(circle, rgba(52,211,153,0.20), transparent 68%);
      filter: blur(18px);
      pointer-events: none;
    }

    .hero-grid {
      display: grid;
      gap: 40px;
      align-items: center;
      grid-template-columns: 1.15fr 0.85fr;
    }

    .pill {
      display: inline-block;
      padding: 8px 14px;
      border-radius: 999px;
      font-size: 18px;
      border: 1px solid rgba(255,255,255,0.18);
      background: rgba(255,255,255,0.08);
      backdrop-filter: blur(10px);
      margin-bottom: 18px;
      box-shadow: 0 8px 24px rgba(15,23,42,0.24);
    }

    .hero p.lead { color: #dbeafe; max-width: 760px; }

    .button-row {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 32px;
      align-items: stretch;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 54px;
      padding: 0 24px;
      border-radius: 18px;
      font-weight: 700;
      text-align: center;
      line-height: 1.35;
      transition: transform .2s ease, opacity .2s ease, background .2s ease, box-shadow .2s ease;
    }

    .btn:hover {
      transform: translateY(-2px);
    }

    .btn-primary {
      background: #3b82f6;
      color: #ffffff;
      box-shadow: 0 16px 40px rgba(59,130,246,0.35);
    }

    .btn-secondary {
      color: #ffffff;
      border: 1px solid rgba(255,255,255,0.18);
      background: rgba(255,255,255,0.06);
      backdrop-filter: blur(8px);
    }

    .glass-card {
      padding: 28px;
      border-radius: 28px;
      border: 1px solid rgba(255,255,255,0.16);
      background: rgba(255,255,255,0.10);
      backdrop-filter: blur(14px);
      box-shadow: 0 28px 70px rgba(2,6,23,0.42);
    }

    .glass-card ul,
    .list,
    .faq-list,
    .plain-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .check-list li,
    .plain-list li,
    .list li {
      display: flex;
      gap: 12px;
      align-items: flex-start;
    }

    .check-list li + li,
    .plain-list li + li,
    .list li + li {
      margin-top: 14px;
    }

    .icon {
      flex: 0 0 26px;
      width: 26px;
      height: 26px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 700;
      margin-top: 2px;
    }

    .icon-green {
      color: #86efac;
      background: rgba(52,211,153,0.16);
    }

    .icon-blue {
      color: #2563eb;
      background: #dbeafe;
    }

    .icon-violet {
      color: #7c3aed;
      background: #ede9fe;
    }

    .notice {
      margin-top: 20px;
      padding: 16px 18px;
      border-radius: 18px;
      font-weight: 700;
      background: rgba(253,224,71,0.14);
      color: #fef3c7;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
    }

    .muted-section {
      background: linear-gradient(180deg, #d0eae9 0%, #fefefe 100%);
          }

    .muted-section::before {
      content: "";
      position: absolute;
      inset: 0;
      background: url('https://images.unsplash.com/photo-1526378722484-cc5c5109c79d?auto=format&fit=crop&w=1600&q=80') center/cover;
      opacity: 0.06;
      pointer-events: none;
    }

    .section-head {
      max-width: 760px;
      margin-bottom: 40px;
      position: relative;
      z-index: 1;
    }

    .cards-3,
    .cards-2 {
      display: grid;
      gap: 24px;
      position: relative;
      z-index: 1;
    }

    .cards-3 { grid-template-columns: repeat(3, 1fr); }
    .cards-2 { grid-template-columns: repeat(2, 1fr); }

    .card {
      background: rgba(255,255,255,0.92);
      border: 1px solid rgba(229,231,235,0.92);
      border-radius: 28px;
      padding: 28px;
      box-shadow: 0 14px 40px rgba(15,23,42,0.08);
      backdrop-filter: blur(6px);
      transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    }

    .card:hover {
      transform: translateY(-4px);
      box-shadow: 0 22px 50px rgba(15,23,42,0.12);
      border-color: rgba(191,219,254,0.95);
    }

    .card.soft {
      background: linear-gradient(180deg, rgba(248,250,252,0.96), rgba(255,255,255,0.96));
    }

    .risk-tag,
    .step-tag {
      color: #ffffff;
      background: linear-gradient(135deg, #00040c, #5e98f7);
      box-shadow: 0 8px 18px rgba(37,99,235,0.25);
    }

    .risk-tag {
      color: #fff;
      background: linear-gradient(135deg, #00040c, #5e98f7);    }

    .step-tag {
      color: #ffffff;
      background: linear-gradient(135deg, #00040c, #5e98f7);
      box-shadow: 0 8px 18px rgba(37,99,235,0.2);
    }

    .dark-section {
      color: #ffffff;
      background: linear-gradient(180deg, #020617 0%, #0f172a 100%);
    }

    .dark-section::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(rgba(121, 187, 226, 0.78), rgba(2,6,23,0.88)), url('./images/007.jpg') center/cover;

      pointer-events: none;    }

    .dark-grid {
      display: grid;
      gap: 32px;
      grid-template-columns: 1.1fr 0.9fr;
      align-items: start;
      position: relative;
      z-index: 1;
    }

    .dark-text {
      color: #cbd5e1;
    }

    .highlight-box {
      border-radius: 28px;
      padding: 30px;
      border: 1px solid rgba(96,165,250,0.35);
      background: linear-gradient(180deg, rgba(96,165,250,0.18), rgba(59,130,246,0.08));
      box-shadow: 0 18px 44px rgba(2,6,23,0.18);
      backdrop-filter: blur(10px);
    }

    .compare-box {
      margin-top: 28px;
      padding: 24px;
      border-radius: 20px;
      background: rgba(2,6,23,0.38);
      border: 1px solid rgba(255,255,255,0.08);
    }

    .compare-label {
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.08em;
      color: #86efac;
    }

    .compare-text {
      margin-top: 6px;
      font-size: 1.1rem;
    }

    .arrow {
      font-size: 28px;
      margin: 14px 0;
    }

    .green-panel {
      background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
      border: 1px solid #bfdbfe;
      border-radius: 28px;
      padding: 30px;
      box-shadow: 0 14px 34px rgba(59,130,246,0.1);
    }

    .gray-panel {
      background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
      border: 1px solid #e2e8f0;
      border-radius: 28px;
      padding: 30px;
      box-shadow: 0 14px 34px rgba(15,23,42,0.06);
    }

    .section-solution {
      background: linear-gradient(180deg,#ffffff 0%, #f8fbff 100%);
    }

    .section-solution::before {
      content: "";
      position: absolute;
      inset: 0;
      background: url('https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?auto=format&fit=crop&w=1600&q=80') center/cover;
      opacity: 0.04;
      pointer-events: none;
    }

    .section-case {
      background: linear-gradient(180deg,#f8fafc 0%, #f1f5f9 100%);
    }

    .section-case::before {
      content: "";
      position: absolute;
      inset: 0;
      background: url('./images/002.jpg') center/cover;
      opacity: 0.4;
      pointer-events: none;
    }

    .cta {
      color: #ffffff;
      background: linear-gradient(135deg, #1e40af 0%, #2563eb 60%, #3b82f6 100%);
      text-align: center;
    }

    .cta::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(rgba(121, 187, 226, 0.78), rgba(2,6,23,0.88)), url('./images/003.jpg') center/cover;

      
      pointer-events: none;
    }

    .cta p.lead {
      color: #dbeafe;
      max-width: 760px;
      margin-left: auto;
      margin-right: auto;
    }

    .cta .btn {
      margin-top: 30px;
      background: #ffffff;
      color: #1d4ed8;
      font-size: 1.05rem;
      box-shadow: 0 20px 50px rgba(15,23,42,0.16);
    }

    .subnote {
      margin-top: 14px;
      font-size: 14px;
      color: #dbeafe;
    }

    .faq-item + .faq-item {
      margin-top: 16px;
    }

    .faq-item {
      border: 1px solid #e5e7eb;
      border-radius: 24px;
      background: rgba(255,255,255,0.94);
      padding: 24px;
      box-shadow: 0 10px 30px rgba(15,23,42,0.05);
      backdrop-filter: blur(6px);
    }

    .faq-q {
      font-weight: 800;
      font-size: 1.08rem;
    }

    .faq-a {
      margin-top: 10px;
      color: #475569;
    }

    footer {
      padding: 48px 0;
      border-top: 1px solid #e5e7eb;
      background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    }

    footer p {
      margin-top: 14px;
      color: #475569;
    }

    @media (max-width: 960px) {
      .hero-grid,
      .dark-grid,
      .cards-3,
      .cards-2 {
        grid-template-columns: 1fr;
      }

      .section {
        padding:

    @media (max-width: 640px) {
      .container {
        width: min(1120px, calc(100% - 24px));
      }

      .glass-card,
      .card,
      .green-panel,
      .gray-panel,
      .highlight-box,
      .faq-item {
        padding: 22px;
        border-radius: 22px;
      }

      .btn {
        width: 100%;
      }
    }
 * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;
      color: #0f172a;
      background: #ffffff;
      line-height: 1.7;
    }
    a { text-decoration: none; color: inherit; }
    input, select, textarea, button { font: inherit; }

    .container {
      width: min(1120px, calc(100% - 32px));
      margin: 0 auto;
      position: relative;
      z-index: 1;
    }

    .section {
      padding: 88px 0;
      position: relative;
      overflow: hidden;
    }

    h1, h2, h3, p { margin: 0; }

    h1 {
      font-size: clamp(2.1rem, 5vw, 3.8rem);
      line-height: 1.15;
      letter-spacing: -0.02em;
    }

    h2 {
      font-size: clamp(1.7rem, 3.5vw, 2.6rem);
      line-height: 1.25;
      letter-spacing: -0.02em;
    }

    h3 {
      font-size: clamp(1.15rem, 2.2vw, 1.45rem);
      line-height: 1.35;
    }

    p.lead {
      font-size: 1.08rem;
      margin-top: 20px;
    }

    .eyebrow {
      display: inline-block;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      margin-bottom: 14px;
      color: #dbeafe;
    }

    .hero {
      color: #ffffff;
      background:
        radial-gradient(circle at top right, rgba(59,130,246,0.34), transparent 25%),
        radial-gradient(circle at left, rgba(96,165,250,0.22), transparent 22%),
        linear-gradient(135deg, #020617 0%, #0f172a 100%);
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(rgba(2,6,23,0.58), rgba(2,6,23,0.74)),
        url('./images/111341_m.jpg') center/cover;
      opacity: 1;
      pointer-events: none;
    }

    .hero-grid {
      display: grid;
      gap: 32px;
      align-items: start;
      grid-template-columns: 0.9fr 1.1fr;
    }

    .pill {
      display: inline-block;
      padding: 8px 14px;
      border-radius: 999px;
      font-size: 14px;
      border: 1px solid rgba(255,255,255,0.18);
      background: rgba(255,255,255,0.08);
      backdrop-filter: blur(10px);
      margin-bottom: 18px;
      box-shadow: 0 8px 24px rgba(15,23,42,0.24);
    }

    .hero p.lead {
      color: #dbeafe;
      max-width: 640px;
    }

    .info-card,
    .form-card,
    .note-card,
    .faq-card {
      border-radius: 28px;
      box-shadow: 0 18px 48px rgba(15,23,42,0.10);
    }

    .info-card {
      padding: 28px;
      border: 1px solid rgba(255,255,255,0.16);
      background: rgba(255,255,255,0.10);
      backdrop-filter: blur(14px);
      color: #e2e8f0;
    }

    .info-list,
    .merit-list,
    .faq-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .info-list li,
    .merit-list li {
      display: flex;
      gap: 12px;
      align-items: flex-start;
    }

    .info-list li + li,
    .merit-list li + li {
      margin-top: 14px;
    }

    .icon {
      flex: 0 0 26px;
      width: 26px;
      height: 26px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 700;
      margin-top: 2px;
      color: #bfdbfe;
      background: rgba(96,165,250,0.16);
    }

    .form-wrap {
      background: linear-gradient(180deg, #f8fbff 0%, #eff6ff 100%);
    }

    .form-wrap::before {
      content: "";
      position: absolute;
      inset: 0;
      background: url('https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?auto=format&fit=crop&w=1600&q=80') center/cover;
      opacity: 0.04;
      pointer-events: none;
    }

    .form-card {
      background: rgba(255,255,255,0.94);
      border: 1px solid rgba(191,219,254,0.8);
      padding: 34px;
      backdrop-filter: blur(8px);
      position: relative;
      z-index: 1;
    }

    .form-head {
      margin-bottom: 26px;
    }

    .form-head p {
      color: #475569;
      margin-top: 10px;
    }

    .form-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 18px 20px;
    }

    .field {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .field.full {
      grid-column: 1 / -1;
    }

    .label {
      font-size: 0.96rem;
      font-weight: 700;
      color: #1e3a8a;
    }

    .required {
      display: inline-block;
      margin-left: 8px;
      padding: 2px 8px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 700;
      color: #ffffff;
      background: linear-gradient(135deg, #2563eb, #60a5fa);
      vertical-align: middle;
    }

    .optional {
      display: inline-block;
      margin-left: 8px;
      padding: 2px 8px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 700;
      color: #1d4ed8;
      background: #dbeafe;
      vertical-align: middle;
    }

    .control,
    .textarea,
    .select {
      width: 100%;
      border: 1px solid #cbd5e1;
      border-radius: 16px;
      background: #ffffff;
      padding: 14px 16px;
      color: #0f172a;
      transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
      box-shadow: inset 0 1px 2px rgba(15,23,42,0.03);
    }
    .back-btn {
  background: rgba(255,255,255,0.96);
  color: #0f172a;
  border: 1px solid #93c5fd;
  box-shadow: 0 8px 22px rgba(15,23,42,0.08);
}

    .control:focus,
    .textarea:focus,
    .select:focus {
      outline: none;
      border-color: #60a5fa;
      box-shadow: 0 0 0 4px rgba(96,165,250,0.18);
    }

    .textarea {
      min-height: 150px;
      resize: vertical;
    }

    .hint {
      font-size: 0.86rem;
      color: #64748b;
    }

    .check-area {
      margin-top: 24px;
      padding: 18px;
      border-radius: 18px;
      background: #eff6ff;
      border: 1px solid #bfdbfe;
    }

    .checkbox {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      color: #334155;
      font-size: 0.95rem;
    }

    .checkbox input {
      margin-top: 4px;
      accent-color: #2563eb;
    }

    .button-row {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 28px;
      align-items: stretch;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 56px;
      padding: 0 24px;
      border-radius: 18px;
      font-weight: 700;
      text-align: center;
      line-height: 1.35;
      border: none;
      cursor: pointer;
      transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
    }

    .btn:hover { transform: translateY(-2px); }

    .btn-primary {
      background: linear-gradient(135deg, #2563eb, #3b82f6);
      color: #ffffff;
      box-shadow: 0 16px 40px rgba(59,130,246,0.28);
    }

    .btn-secondary {
      background: #ffffff;
      color: #1d4ed8;
      border: 1px solid #bfdbfe;
    }

    .section-mini {
      padding: 72px 0;
      background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    }

    .cards-2 {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
    }

    .note-card,
    .faq-card {
      background: rgba(255,255,255,0.96);
      border: 1px solid #dbeafe;
      padding: 28px;
    }

    .note-card h3,
    .faq-card h3 {
      color: #1d4ed8;
      margin-bottom: 14px;
    }

    .faq-item + .faq-item {
      margin-top: 14px;
    }

    .faq-q {
      font-weight: 800;
      color: #0f172a;
    }

    .faq-a {
      margin-top: 6px;
      color: #475569;
    }

    footer {
      padding: 42px 0;
      border-top: 1px solid #e5e7eb;
      background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    }

    footer p {
      margin-top: 12px;
      color: #475569;
    }

    @media (max-width: 960px) {
      .hero-grid,
      .cards-2,
      .form-grid {
        grid-template-columns: 1fr;
      }

      .section {
        padding: 72px 0;
      }

      .hero-grid {
        gap: 24px;
      }
    }

    @media (max-width: 640px) {
      .container {
        width: min(1120px, calc(100% - 20px));
      }

      .section {
        padding: 56px 0;
      }

      h1 {
        font-size: clamp(1.95rem, 9vw, 2.8rem);
        line-height: 1.18;
      }

      h2 {
        font-size: clamp(1.5rem, 7vw, 2.1rem);
        line-height: 1.3;
      }

      p.lead {
        font-size: 1rem;
        margin-top: 16px;
      }

      .pill,
      .eyebrow {
        font-size: 12px;
      }

      .info-card,
      .form-card,
      .note-card,
      .faq-card {
        padding: 20px;
        border-radius: 22px;
      }

      .button-row {
        gap: 10px;
      }

      .btn {
        width: 100%;
        min-height: 52px;
        border-radius: 16px;
      }

      .textarea {
        min-height: 130px;
      }
    }