/* SIGVA site - the menu's 4th look (outputs/integration/modes-1019/lux/lux4.css, work61, 2026-10-20): the night-blue picture,
   dark blue translucent faces, 1px frames of pearl at 30 %, one accent (cyan) with a lit segment, a quiet metal for the small
   English labels, two corners cut by 11px (top left, bottom right), no round corners, no gloss, no blur. Type: IBM Plex Sans JP. */
@font-face { font-family: "Plex"; font-weight: 400; font-display: swap; src: url("assets/fonts/plex-400.woff") format("woff"); }
@font-face { font-family: "Plex"; font-weight: 500; font-display: swap; src: url("assets/fonts/plex-500.woff") format("woff"); }
@font-face { font-family: "Plex"; font-weight: 600; font-display: swap; src: url("assets/fonts/plex-600.woff") format("woff"); }
@font-face { font-family: "Plex"; font-weight: 700; font-display: swap; src: url("assets/fonts/plex-700.woff") format("woff"); }
:root {
  color-scheme: dark;
  --ink: #04070D;            /* the darkest of the night picture */
  --night: #070C16;
  --pearl: #F2F5F9;          /* text 1 */
  --silver: #A9B8C8;         /* text 2 */
  --steel: #74879A;          /* text 3: labels, never below this */
  --metal: #C9B88F;          /* the English labels and hairline ornaments only */
  --accent: #2BD4E8;
  --accent-soft: #8FF0FB;
  --accent-text: #032228;
  --frame: rgb(242 245 249 / 30%);
  --frame-strong: rgb(242 245 249 / 36%);
  --frame-hi: rgb(255 255 255 / 92%);
  --rule: rgb(255 255 255 / 14%);
  --rule-faint: rgb(255 255 255 / 8%);
  --face-top: rgb(20 30 50 / 82%);
  --face-bottom: rgb(10 16 30 / 86%);
  --panel: rgb(8 13 24 / 90%);
  --todo: #E9B86A;
  --cut: 11px;
  --wrap: 76rem;
  --gutter: 4rem;
  --font: "Plex", "IBM Plex Sans JP", "Yu Gothic UI", "Meiryo", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 4.5rem; }
body { margin: 0; background: var(--ink); color: var(--pearl); font: 400 1rem/1.85 var(--font); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-underline-offset: .28em; text-decoration-color: rgb(143 240 251 / 45%); }
a:hover { color: var(--accent-soft); }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
p, h1, h2, h3, ol, ul { margin: 0; }
h1, h2, h3 { font-weight: 600; line-height: 1.35; }
code { font: inherit; color: var(--accent-soft); overflow-wrap: anywhere; }
.wrap { width: min(calc(100% - var(--gutter) * 2), var(--wrap)); margin-inline: auto; }
.skip { position: absolute; z-index: 20; left: 1rem; top: .5rem; transform: translateY(-200%); background: var(--accent); color: var(--accent-text); padding: .5rem 1rem; }
.skip:focus { transform: none; }
.lbl { font-weight: 500; font-size: .8125rem; line-height: 1.4; letter-spacing: .34em; text-transform: uppercase; color: var(--metal); }
mark.todo { background: rgb(233 184 106 / 14%); color: var(--todo); box-shadow: inset 0 0 0 1px rgb(233 184 106 / 55%); padding: 0 .3em; font-weight: 500; }

/* ---- the bar: as the menu's top bar ---- */
.bar { position: sticky; top: 0; z-index: 10; background: linear-gradient(180deg, rgb(3 6 12 / 96%), rgb(6 10 18 / 90%)); }
.bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, rgb(255 255 255 / 34%), rgb(255 255 255 / 18%) 60%, rgb(255 255 255 / 6%)); }
.bar-inner { min-height: 3.5rem; display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
.mark { font-weight: 700; font-size: 1.5rem; line-height: 1; letter-spacing: .04em; text-decoration: none; color: var(--pearl); }
.mark b { color: var(--accent); font-weight: 700; }
.mark.small { font-size: 1.25rem; }
.tabs { display: flex; flex-wrap: wrap; gap: .25rem; margin-left: auto; }
.tabs a { position: relative; padding: .5rem 1rem; font-weight: 600; font-size: .875rem; letter-spacing: .12em; color: rgb(242 245 249 / 74%); text-decoration: none; white-space: nowrap; }
.tabs a:hover { color: #fff; }
.tabs a[aria-current]::after, .tabs a:hover::after { content: ""; position: absolute; left: 1rem; right: 1rem; bottom: .125rem; height: 2px; background: var(--accent-soft); box-shadow: 0 0 10px 1px rgb(43 212 232 / 55%); }
.lang { display: flex; gap: .75rem; font-weight: 600; font-size: .875rem; letter-spacing: .08em; color: var(--steel); }
.lang [aria-current] { color: var(--pearl); }
.lang a { color: var(--silver); text-decoration: none; }

/* ---- the hero: the night picture, a dark column on the right, the menu's numbered list ---- */
.hero { position: relative; isolation: isolate; overflow: hidden; border-bottom: 1px solid var(--rule); }
.hero-bg { position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(270deg, rgb(5 8 14 / 94%) 0, rgb(5 8 14 / 86%) 36%, rgb(5 8 14 / 0%) 70%),
  radial-gradient(120% 90% at 30% 60%, rgb(4 7 13 / 0%) 40%, rgb(4 7 13 / 80%) 100%),
  url("assets/night-sea.webp") 35% center / cover no-repeat; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 4rem; align-items: center; min-height: 38rem; padding-block: 5rem 4rem; }
.hero-copy .lbl { padding-bottom: .75rem; margin-bottom: 1.25rem; border-bottom: 1px solid; border-image: linear-gradient(90deg, rgb(201 184 143 / 75%), rgb(201 184 143 / 0%)) 1; width: fit-content; padding-right: 4rem; }
.hero h1 { font-weight: 600; font-size: clamp(3.5rem, 8vw, 6.5rem); line-height: 1; letter-spacing: .04em; }
.hero-caption { margin-top: 1.25rem; font-weight: 500; font-size: clamp(1.125rem, 2vw, 1.5rem); letter-spacing: .06em; color: var(--pearl); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-top: 2.25rem; }
.cta { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 17rem; height: 3.75rem; padding: 0 2rem; color: #fff; text-decoration: none; font-weight: 500; font-size: 1.0625rem; letter-spacing: .18em; isolation: isolate; }
.cta::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--frame-strong); clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.cta::after { content: ""; position: absolute; inset: 1px; z-index: -1; background: linear-gradient(180deg, var(--face-top), var(--face-bottom)); clip-path: polygon(calc(var(--cut) - .4px) 0, 100% 0, 100% calc(100% - var(--cut) + .4px), calc(100% - var(--cut) + .4px) 100%, 0 100%, 0 calc(var(--cut) - .4px)); }
.cta i { position: absolute; left: 1.375rem; bottom: 0; width: 2.875rem; height: 2px; background: var(--accent-soft); box-shadow: 0 0 12px 2px rgb(43 212 232 / 60%); transition: left .18s ease-out, width .18s ease-out; }
.cta:hover { color: #fff; }
.cta:hover::before { background: rgb(143 240 251 / 78%); }
.cta:hover::after { background: linear-gradient(180deg, rgb(26 60 76 / 90%), rgb(12 32 48 / 90%)); }
.cta:hover i { left: var(--cut); width: calc(100% - var(--cut) * 2); }
.quiet { font-weight: 500; font-size: .9375rem; letter-spacing: .06em; color: var(--silver); }
.hero-meta { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin-top: 2rem; font-weight: 500; font-size: .875rem; letter-spacing: .06em; color: var(--steel); }
.hero-meta span + span::before { content: "·"; margin-right: 1.5rem; color: var(--steel); }
.modes { list-style: none; padding: 0; border-left: 1px solid; border-image: linear-gradient(180deg, rgb(255 255 255 / 0%), rgb(255 255 255 / 16%) 24%, rgb(255 255 255 / 16%) 76%, rgb(255 255 255 / 0%)) 1; }
.mode { position: relative; display: grid; grid-template-columns: 3rem 1fr 1.5rem; gap: 1rem; padding: 1.375rem 1.5rem 1.375rem 2rem; }
.mode + .mode { border-top: 1px solid var(--rule-faint); }
.mode .idx { font-weight: 500; font-size: .875rem; letter-spacing: .2em; color: var(--steel); padding-top: .375rem; }
.mode-title { font-weight: 500; font-size: 1.5rem; line-height: 1.3; letter-spacing: .03em; }
.mode-lbl { margin-top: .25rem; font-weight: 500; font-size: .75rem; letter-spacing: .34em; color: var(--metal); }
.mode-text { margin-top: .375rem; font-size: .9375rem; color: var(--silver); }
.mode:first-child { background: linear-gradient(90deg, rgb(255 255 255 / 8%), rgb(255 255 255 / 1%)); box-shadow: inset 2px 0 0 var(--accent-soft); }
.ic { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; color: var(--silver); }
.mode .ic { margin-top: .5rem; }
.note { margin-top: 1rem; font-size: .8125rem; color: var(--steel); padding-left: 2rem; }

/* ---- sections ---- */
.sec { padding-block: 4.5rem; border-bottom: 1px solid var(--rule-faint); }
.sec:nth-of-type(odd) { background: linear-gradient(180deg, var(--night), var(--ink)); }
.sec-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 4rem; align-items: start; }
.sec-head h2 { margin-top: .875rem; font-size: clamp(1.5rem, 2.6vw, 2.125rem); letter-spacing: .03em; }
.sec-head .lead { margin-top: 1rem; color: var(--silver); max-width: 32rem; }
.sec-body > p { color: var(--silver); }
.sec-body > p + p, .sec-body > * + p { margin-top: 1rem; }
.feats { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 1.5rem; border-top: 1px solid var(--rule); }
.feats li { display: flex; align-items: center; gap: .75rem; padding: 1rem .25rem; border-bottom: 1px solid var(--rule); font-weight: 500; }
.feats .ic { color: var(--accent-soft); }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-bottom: 1.5rem; }
.plan, .panel { position: relative; isolation: isolate; padding: 1.5rem 1.5rem 1.375rem; background: rgb(242 245 249 / 24%);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.plan::before, .panel::before { content: ""; position: absolute; inset: 1px; z-index: -1; background: linear-gradient(180deg, rgb(10 16 28), rgb(6 10 19));
  clip-path: polygon(calc(var(--cut) - .4px) 0, 100% 0, 100% calc(100% - var(--cut) + .4px), calc(100% - var(--cut) + .4px) 100%, 0 100%, 0 calc(var(--cut) - .4px)); }
.plan::after, .panel::after { content: ""; position: absolute; left: 1.375rem; bottom: 0; width: 2.875rem; height: 2px; background: var(--accent-soft); box-shadow: 0 0 12px 2px rgb(43 212 232 / 55%); }
.plan-name, .panel-title { font-weight: 600; font-size: 1.125rem; letter-spacing: .14em; }
.plan-price { margin-top: .5rem; color: var(--steel); font-size: .9375rem; }
.plan-price b { font-weight: 500; font-size: 2rem; color: var(--pearl); letter-spacing: .02em; }
.plan-sub { margin-top: .25rem; font-size: .875rem; color: var(--silver); }
.plan ul { list-style: none; padding: 0; margin-top: 1rem; border-top: 1px solid var(--rule); }
.plan li { position: relative; padding: .5rem 0 .5rem 1.375rem; font-size: .875rem; color: var(--silver); border-bottom: 1px solid var(--rule-faint); }
.plan li::before { content: ""; position: absolute; left: .125rem; top: 1.05rem; width: .5rem; height: .25rem; border-left: 1.5px solid var(--accent-soft); border-bottom: 1.5px solid var(--accent-soft); transform: rotate(-45deg); }
.panel p + p { margin-top: .75rem; color: var(--silver); }
.doc-links { font-weight: 500; font-size: .9375rem; }
.notice { padding: .875rem 1rem; border-left: 2px solid var(--frame); background: rgb(255 255 255 / 3%); color: var(--silver); }
.faq details { border-bottom: 1px solid var(--rule); padding-block: 1rem; }
.faq details:first-child { border-top: 1px solid var(--rule); }
.faq summary { cursor: pointer; font-weight: 500; list-style-position: outside; }
.faq details p { margin-top: .75rem; color: var(--silver); }
.status-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: .875rem; border-bottom: 1px solid var(--rule); font-weight: 500; }
.chip { font-size: .8125rem; letter-spacing: .08em; color: var(--steel); box-shadow: inset 0 0 0 1px var(--frame); padding: .125rem .75rem; }
.sec .note { padding-left: 0; }

/* ---- the documents ---- */
.doc-page { padding-block: 4rem 5rem; background: linear-gradient(180deg, var(--night), var(--ink) 30rem); }
.doc-grid { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 4rem; align-items: start; }
.doc-grid.single { grid-template-columns: minmax(0, 1fr); }
.doc-side { position: sticky; top: 5.5rem; display: grid; border-left: 1px solid var(--rule); }
.doc-side a { padding: .625rem 1rem; font-weight: 500; font-size: .875rem; letter-spacing: .04em; color: var(--silver); text-decoration: none; }
.doc-side a[aria-current] { color: #fff; background: linear-gradient(90deg, rgb(255 255 255 / 10%), rgb(255 255 255 / 2%)); box-shadow: inset 2px 0 0 var(--accent-soft); margin-left: -1px; }
.doc { max-width: 52rem; overflow-wrap: anywhere; }
.doc h1 { margin-top: .875rem; font-size: clamp(1.75rem, 3vw, 2.375rem); letter-spacing: .03em; }
.doc-meta { margin-top: .75rem; font-size: .875rem; color: var(--steel); }
.doc > p, .doc > ol, .doc > ul, .doc > .table, .doc > blockquote { margin-top: 1.25rem; color: var(--silver); }
.doc > h1 + p:not(.doc-meta) { margin-top: 1.5rem; }
.doc h2 { margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); font-size: 1.25rem; letter-spacing: .02em; scroll-margin-top: 5rem; }
.doc h3 { margin-top: 2rem; font-size: 1rem; color: var(--accent-soft); font-weight: 600; }
.doc h2 + p, .doc h2 + ol, .doc h2 + ul, .doc h2 + .table, .doc h3 + p, .doc h3 + ol, .doc h3 + .table { margin-top: .875rem; }
.doc ol, .doc ul { padding-left: 1.5rem; }
.doc li + li { margin-top: .5rem; }
.doc strong { color: var(--pearl); font-weight: 600; }
.doc a { color: var(--accent-soft); }
.doc blockquote { padding: .75rem 1rem; border-left: 2px solid var(--frame); background: rgb(255 255 255 / 3%); }
.table { overflow-x: auto; box-shadow: inset 0 0 0 1px rgb(242 245 249 / 18%); }
.table table { width: 100%; border-collapse: collapse; font-size: .9375rem; line-height: 1.7; }
.table th, .table td { padding: .75rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
.table th { font-weight: 600; font-size: .8125rem; letter-spacing: .12em; color: var(--steel); background: rgb(255 255 255 / 3%); white-space: nowrap; }
.table td:first-child { color: var(--pearl); font-weight: 500; min-width: 8rem; }
.table tbody tr:last-child td { border-bottom: 0; }

/* ---- the foot ---- */
.foot { padding-block: 2.5rem 3rem; border-top: 1px solid var(--rule); background: var(--ink); }
.foot-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.5rem; }
.foot-links { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; font-weight: 500; font-size: .875rem; }
.foot-links a { color: var(--silver); text-decoration: none; }
.foot-links a:hover { color: var(--accent-soft); }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 2rem; font-size: .8125rem; color: var(--steel); }
/* the legal notice: one small, quiet line at the bottom of every page (the user, 2026-10-23) */
.foot-notice { font-size: .75rem; color: var(--steel); text-decoration: none; }
.foot-notice:hover { color: var(--silver); text-decoration: underline; }

@media (max-width: 64rem) {
  :root { --gutter: 2rem; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; min-height: 0; padding-block: 3.5rem 3rem; }
  .sec-grid { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .doc-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .doc-side { position: static; display: flex; flex-wrap: wrap; border-left: 0; border-bottom: 1px solid var(--rule); }
  .doc-side a[aria-current] { margin-left: 0; box-shadow: inset 0 -2px 0 var(--accent-soft); }
}
@media (max-width: 40rem) {
  :root { --gutter: 1rem; }
  .bar-inner { gap: .5rem 1rem; padding-block: .5rem; }
  .tabs { order: 3; flex-basis: 100%; margin: 0; justify-content: space-between; }
  .tabs a { padding: .375rem .25rem; letter-spacing: .04em; font-size: .8125rem; }
  .tabs a[aria-current]::after, .tabs a:hover::after { left: .25rem; right: .25rem; }
  .lang { margin-left: auto; }
  .cta { min-width: 0; width: 100%; }
  .mode { grid-template-columns: 2.25rem 1fr; padding: 1.125rem 0 1.125rem 1rem; }
  .mode .ic { display: none; }
  .note { padding-left: 1rem; }
  .feats, .plans { grid-template-columns: 1fr; }
  .sec { padding-block: 3rem; }
  .table th, .table td { padding: .625rem .75rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }