:root {
      --ink: #292432;
      --muted: #686274;
      --violet: #65449a;
      --violet-dark: #39245f;
      --violet-soft: #f3eff9;
      --violet-line: #e4dcef;
      --white: #ffffff;
      --page: #fbfaff;
      --max: 1160px;
      --radius: 18px;
      --shadow: 0 18px 50px rgba(54, 34, 85, .09);
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      background: var(--page);
      font: 16px/1.7 Inter, "Segoe UI", Arial, sans-serif;
    }
    img { display: block; max-width: 100%; height: auto; }
    a { color: var(--violet); text-underline-offset: 3px; }
    a:hover { color: var(--violet-dark); }
    .page { width: min(var(--max), calc(100% - 40px)); margin-inline: auto; }
    .topline { height: 7px; background: linear-gradient(90deg, #39245f, #7251a5, #c2b1dc); }
    .hero { padding: 48px 0 34px; }
    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(360px, .94fr);
      gap: 38px;
      align-items: center;
      padding: clamp(24px, 4vw, 48px);
      border: 1px solid var(--violet-line);
      border-radius: 26px;
      background: linear-gradient(135deg, #fff 2%, #f4f0fa 100%);
      box-shadow: var(--shadow);
    }
    .eyebrow, .section-kicker {
      margin: 0 0 10px;
      color: var(--violet);
      font-size: 11px;
      font-weight: 850;
      letter-spacing: .15em;
      text-transform: uppercase;
    }
    h1, h2, h3 { font-family: Inter, "Segoe UI", Arial, sans-serif; line-height: 1.2; }
    h1 {
      max-width: 650px;
      margin: 0;
      color: var(--violet-dark);
      font-size: clamp(34px, 4.6vw, 56px);
      letter-spacing: -.045em;
    }
    .hero-copy { max-width: 620px; margin: 18px 0 22px; color: #514b5b; font-size: 17px; }
    .product-label {
      display: inline-flex;
      gap: 8px;
      align-items: center;
      margin: 18px 0 0;
      padding: 7px 12px;
      border: 1px solid var(--violet-line);
      border-radius: 999px;
      color: var(--violet-dark);
      background: #fff;
      font-size: 12px;
      font-weight: 750;
    }
    .quick-specs { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin: 22px 0 24px; }
    .quick-spec {
      padding: 12px 14px;
      border: 1px solid #e8e1f0;
      border-radius: 12px;
      background: rgba(255,255,255,.86);
    }
    .quick-spec strong { display: block; color: var(--violet-dark); font-size: 16px; line-height: 1.35; }
    .quick-spec span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.4; }
    .actions { display: flex; gap: 10px; flex-wrap: wrap; }
    .button {
      display: inline-flex;
      min-height: 47px;
      align-items: center;
      justify-content: center;
      padding: 12px 19px;
      border: 1px solid var(--violet);
      border-radius: 9px;
      color: #fff;
      background: var(--violet);
      font-size: 13px;
      font-weight: 800;
      text-decoration: none;
      transition: background .18s ease, transform .18s ease;
    }
    .button:hover { color: #fff; background: var(--violet-dark); transform: translateY(-1px); }
    .button.secondary { color: var(--violet-dark); background: #fff; }
    .button.secondary:hover { color: var(--violet-dark); background: var(--violet-soft); }
    .visual {
      overflow: hidden;
      margin: 0;
      padding: 12px;
      border: 1px solid var(--violet-line);
      border-radius: var(--radius);
      background: #fff;
    }
    .visual img { width: 100%; height: auto; border-radius: 11px; object-fit: contain; }
    figcaption { padding: 9px 4px 1px; color: var(--muted); font-size: 11px; line-height: 1.45; }
    .section { padding: 68px 0; }
    .section.muted { background: var(--violet-soft); }
    .section-head { max-width: 760px; margin: 0 auto 34px; text-align: center; }
    .section-head h2 { margin: 0 0 12px; color: var(--violet-dark); font-size: clamp(27px, 3.5vw, 39px); letter-spacing: -.035em; }
    .section-head p:last-child { margin: 0; color: var(--muted); }
    .split {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 34px;
      align-items: center;
    }
    .split.reverse .visual { order: 2; }
    .copy h2 { margin: 0 0 14px; color: var(--violet-dark); font-size: clamp(26px, 3.2vw, 36px); letter-spacing: -.03em; }
    .copy p { color: #514b5b; }
    .copy p:last-child { margin-bottom: 0; }
    .check-list { padding: 0; margin: 17px 0 0; list-style: none; }
    .check-list li { position: relative; margin: 0 0 10px; padding-left: 30px; color: #45404f; }
    .check-list li::before {
      content: "✓";
      position: absolute;
      top: 2px;
      left: 0;
      display: grid;
      width: 19px;
      height: 19px;
      place-items: center;
      border-radius: 50%;
      color: #fff;
      background: var(--violet);
      font-size: 11px;
      font-weight: 900;
    }
    .mode-grid, .indication-grid, .detail-grid, .tips-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap: 16px;
    }
    .mode-card, .indication-card, .detail-card, .tip-card {
      padding: 21px;
      border: 1px solid var(--violet-line);
      border-radius: 15px;
      background: #fff;
    }
    .mode-card h3, .indication-card h3, .detail-card h3, .tip-card h3 {
      margin: 0 0 8px;
      color: var(--violet-dark);
      font-size: 17px;
    }
    .mode-card p, .indication-card p, .detail-card p, .tip-card p { margin: 0; color: var(--muted); font-size: 14px; }
    .mode-label {
      display: inline-block;
      margin-bottom: 12px;
      padding: 5px 9px;
      border-radius: 999px;
      color: var(--violet-dark);
      background: var(--violet-soft);
      font-size: 10px;
      font-weight: 850;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .notice {
      margin-top: 22px;
      padding: 16px 18px;
      border-left: 4px solid var(--violet);
      border-radius: 10px;
      color: #514b5b;
      background: #f8f5fc;
      font-size: 13px;
    }
    .indication-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .indication-card { min-height: 150px; }
    .detail-grid { grid-template-columns: repeat(3, minmax(0,1fr)); margin-top: 22px; }
    .detail-card .symbol {
      display: grid;
      width: 42px;
      height: 42px;
      place-items: center;
      margin-bottom: 14px;
      border-radius: 12px;
      color: var(--violet-dark);
      background: var(--violet-soft);
      font-size: 13px;
      font-weight: 900;
    }
    .spec-wrap { overflow: hidden; border: 1px solid var(--violet-line); border-radius: 16px; background: #fff; box-shadow: 0 10px 35px rgba(54,34,85,.05); }
    .spec-table { width: 100%; border-collapse: collapse; }
    .spec-table th, .spec-table td { padding: 14px 18px; border-bottom: 1px solid #eee9f3; text-align: left; vertical-align: top; }
    .spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }
    .spec-table th { width: 34%; color: #403455; background: #faf8fd; font-size: 13px; font-weight: 800; }
    .spec-table td { color: #554e60; font-size: 14px; }
    .spec-note { margin: 13px 0 0; color: var(--muted); font-size: 12px; }
    .faq { max-width: 900px; margin: 0 auto; }
    .faq details { margin-bottom: 10px; border: 1px solid var(--violet-line); border-radius: 13px; background: #fff; }
    .faq summary {
      position: relative;
      padding: 17px 48px 17px 19px;
      cursor: pointer;
      color: var(--violet-dark);
      font-size: 14px;
      font-weight: 800;
      list-style: none;
    }
    .faq summary::-webkit-details-marker { display: none; }
    .faq summary::after { content: "+"; position: absolute; top: 8px; right: 18px; color: var(--violet); font-size: 24px; font-weight: 400; }
    .faq details[open] summary::after { content: "−"; }
    .faq-answer { padding: 0 19px 18px; color: var(--muted); font-size: 13px; }
    .faq-answer p { margin: 0; }
    .cta-panel {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 24px;
      align-items: center;
      padding: clamp(24px, 4vw, 42px);
      border: 1px solid #ded4eb;
      border-radius: 22px;
      color: #fff;
      background: linear-gradient(130deg, #39245f, #694b95);
    }
    .cta-panel h2 { margin: 0 0 8px; color: #fff; font-size: clamp(23px, 3vw, 31px); }
    .cta-panel p { margin: 0; color: #eee8f5; }
    .cta-panel .button { border-color: #fff; color: var(--violet-dark); background: #fff; white-space: nowrap; }
    .cta-panel .button:hover { background: #f1eafa; }
    footer { padding: 26px 0 38px; border-top: 1px solid var(--violet-line); color: var(--muted); font-size: 12px; }
    .footer-note { max-width: 980px; margin: 0 auto; }
    @media (max-width: 860px) {
      .hero-grid, .split { grid-template-columns: 1fr; }
      .split.reverse .visual { order: 0; }
      .indication-grid, .detail-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
      .cta-panel { grid-template-columns: 1fr; }
      .cta-panel .button { justify-self: start; }
    }
    @media (max-width: 560px) {
      body { font-size: 15px; }
      .page { width: min(var(--max), calc(100% - 28px)); }
      .hero { padding: 24px 0 8px; }
      .hero-grid { gap: 24px; padding: 22px 17px; border-radius: 18px; }
      h1 { font-size: 35px; }
      .hero-copy { font-size: 15px; }
      .quick-specs { gap: 8px; }
      .quick-spec { padding: 10px; }
      .quick-spec strong { font-size: 14px; }
      .section { padding: 49px 0; }
      .section-head { margin-bottom: 25px; }
      .mode-grid, .indication-grid, .detail-grid, .tips-grid { grid-template-columns: 1fr; }
      .indication-card { min-height: auto; }
      .visual { padding: 8px; }
      .spec-table th, .spec-table td { padding: 11px 12px; }
      .spec-table th { width: 39%; font-size: 11px; }
      .spec-table td { font-size: 12px; }
      .actions .button { width: 100%; }
      .cta-panel { padding: 24px 19px; }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { transition-duration: .01ms !important; }
    }