:root {
  color-scheme: light;
  --ink: #102338;
  --muted: #486071;
  --blue: #15559e;
  --line: #d3e2eb;
  --tint: #eef6fb;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", sans-serif;
  color: var(--ink);
  background: #fff;
  font-synthesis: none;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
}
a {
  color: var(--blue);
  text-underline-offset: 0.18em;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a,
input,
select,
textarea {
  touch-action: manipulation;
}
button {
  cursor: pointer;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #247ac4;
  outline-offset: 3px;
}
[hidden],
html[data-lang="en"] [data-l="ja"],
html[data-lang="ja"] [data-l="en"] {
  display: none !important;
}
.wrap {
  width: min(1140px, calc(100% - 72px));
  margin-inline: auto;
}
.skip,
.trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 2;
  width: auto;
  height: auto;
  padding: 0.6rem;
  background: #fff;
  clip-path: none;
}
header {
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 76px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 19px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: -0.04em;
}
.brand img {
  border-radius: 9px;
}
.bar nav {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--tint);
  border-radius: 20px;
  padding: 3px;
}
.bar button {
  padding: 4px 12px;
  font-size: 14px;
  min-height: 34px;
  border: 0;
  background: transparent;
  border-radius: 18px;
  color: var(--muted);
}
html[data-lang="en"] button[data-set-lang="en"],
html[data-lang="ja"] button[data-set-lang="ja"] {
  background: #fff;
  box-shadow: 0 1px 4px #142d451c;
  color: var(--ink);
  font-weight: 700;
}
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(26px, 6vw, 88px);
  align-items: center;
  padding-block: clamp(30px, 6vw, 74px);
}
h1,
h2,
p {
  margin: 0;
}
.hero h1 {
  font-size: clamp(46px, 6.5vw, 93px);
  line-height: 1.02;
  letter-spacing: -0.072em;
  text-wrap: balance;
  max-width: 640px;
}
.hero h1 [lang="ja"] {
  font-size: 0.78em;
  letter-spacing: -0.045em;
  line-height: 1.23;
}
.lead {
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.5;
  max-width: 480px;
  color: var(--muted);
  margin-top: 24px;
}
.buttons {
  display: flex;
  align-items: center;
  gap: 18px 23px;
  flex-wrap: wrap;
  margin-top: 30px;
}
.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 11px 19px;
  border: 0;
  border-radius: 12px;
  background: var(--blue);
  color: white;
  text-decoration: none;
  font-weight: 650;
}
.primary:hover {
  background: #104780;
}
.primary:disabled {
  opacity: 0.65;
}
.text-link {
  font-weight: 600;
}
.product-shot {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 26px;
  min-height: 365px;
  height: clamp(365px, 35vw, 450px);
  background: #e4f2fa;
}
.product-shot::before,
.product-shot::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  z-index: -1;
}
.product-shot::before {
  width: 140%;
  height: 125%;
  top: 40%;
  right: -60%;
  background: #c5e4f6;
}
.product-shot::after {
  width: 65%;
  height: 55%;
  background: #d9edf9;
  top: 0;
  left: -26%;
}
.product-shot img {
  max-width: 74%;
  height: 86%;
  width: auto;
  display: block;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 12px 30px #22475829;
}
.features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  padding: 0 0 clamp(35px, 6vw, 75px);
}
.features > div {
  border-top: 2px solid var(--line);
  padding-top: 17px;
}
.features h2 {
  font-size: clamp(20px, 2vw, 25px);
  letter-spacing: -0.04em;
}
.features p,
.support-copy p {
  color: var(--muted);
  margin-top: 9px;
}
.support {
  background: #f1f6f9;
  border-block: 1px solid var(--line);
  scroll-margin-top: 1rem;
}
.support-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(30px, 9vw, 140px);
  padding-block: clamp(36px, 6vw, 76px);
}
.support h2 {
  font-size: clamp(33px, 4.4vw, 57px);
  line-height: 1.08;
  letter-spacing: -0.055em;
  text-wrap: balance;
}
.support-copy p {
  margin-top: 18px;
}
.support-copy > a {
  display: inline-block;
  margin-top: 15px;
}
form {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(18px, 3vw, 32px);
  align-self: start;
}
form label {
  display: block;
  font-weight: 620;
  margin-bottom: 5px;
}
input:not([type="hidden"]),
select,
textarea {
  width: 100%;
  border: 1px solid #9eb1bd;
  background: #fff;
  border-radius: 8px;
  padding: 9px 12px;
  margin-bottom: 15px;
  color: var(--ink);
}
textarea {
  resize: vertical;
  min-height: 66px;
}
#form-status [data-message] {
  display: none;
  margin-top: 12px;
}
#form-status[data-state="sending"] [data-message="sending"],
#form-status[data-state="success"] [data-message="success"],
#form-status[data-state="error"] [data-message="error"] {
  display: block;
}
#form-status[data-state="error"] {
  color: #9f2a2a;
}
.footer {
  display: grid;
  grid-template-columns: 1.05fr 1fr 1fr;
  gap: 24px;
  padding-block: 36px;
  font-size: 14px;
  color: var(--muted);
}
.footer a {
  display: block;
  width: fit-content;
  margin-bottom: 6px;
}
.footer p {
  margin-top: 4px;
}
.footer strong {
  font-size: 16px;
  color: var(--ink);
}
.document {
  max-width: 830px;
  padding-block: clamp(34px, 5vw, 66px);
  overflow-wrap: anywhere;
}
.document h1 {
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.16;
  letter-spacing: -0.045em;
  margin: 0 0 0.4em;
}
.document h2 {
  font-size: clamp(22px, 3vw, 28px);
  line-height: 1.25;
  letter-spacing: -0.028em;
  margin: 1.55em 0 0.45em;
}
.document p,
.document li {
  margin: 0.7em 0;
}
.document ul,
.document ol {
  padding-inline-start: 1.5em;
}
.document .doc-updated,
.disclosure-note {
  color: var(--muted);
}
.disclosure-note {
  padding: 14px 17px;
  background: var(--tint);
  border-radius: 8px;
  margin-bottom: 24px;
}
.table-wrap {
  overflow-x: auto;
  margin-block: 18px;
}
.table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
}
.table-wrap th,
.table-wrap td {
  text-align: start;
  vertical-align: top;
  border: 1px solid var(--line);
  padding: 9px;
}
.table-wrap th {
  background: var(--tint);
}
.table-wrap .kv td:first-child {
  width: 27%;
  font-weight: 600;
}
footer {
  border-top: 1px solid var(--line);
}
@media (max-width: 760px) {
  .wrap {
    width: calc(100% - 36px);
  }
  .bar {
    min-height: 64px;
  }
  .hero {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .product-shot {
    min-height: 260px;
    height: 320px;
  }
  .features {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .features p {
    margin-top: 4px;
  }
  .support-grid {
    grid-template-columns: 1fr;
  }
  .footer {
    grid-template-columns: 1fr 1fr;
  }
  .footer > div:first-child {
    grid-column: 1/-1;
  }
}
@media (max-width: 450px) {
  .brand {
    font-size: 16px;
    gap: 7px;
  }
  .bar button {
    padding-inline: 8px;
  }
  .brand img {
    width: 28px;
    height: 28px;
  }
  .footer {
    grid-template-columns: 1fr;
  }
  .lead {
    margin-top: 18px;
  }
  .document .table-wrap table:not(.kv) {
    min-width: 510px;
  }
  .product-shot {
    height: 300px;
  }
}