:root{
  --paper:#F2F2EF;
  --ink:#191B24;
  --indigo:#27337A;
  --seal:#C9483A;
  --mist:#D6D7D0;
  --measure:34rem;
}
:root:not([data-theme="light"]){ color-scheme:light; }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#14151C;
    --ink:#E9E9E3;
    --indigo:#9FB0F0;
    --seal:#E4675A;
    --mist:#2C2E3A;
  }
}
:root[data-theme="dark"]{
  --paper:#14151C; --ink:#E9E9E3; --indigo:#9FB0F0; --seal:#E4675A; --mist:#2C2E3A;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  font-size:clamp(1.0625rem,0.98rem + 0.4vw,1.1875rem);
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
.jp{font-family:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",sans-serif}

.wrap{max-width:68rem;margin:0 auto;padding:0 clamp(1.5rem,5vw,4rem)}

a{color:inherit;text-decoration:none;border-bottom:1px solid var(--mist);transition:border-color .18s ease}
a:hover{border-color:var(--indigo)}
a:focus-visible{outline:2px solid var(--indigo);outline-offset:3px;border-radius:2px}

/* ---- masthead ---- */
.masthead{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:1.75rem 0 1.5rem;
  border-bottom:1px solid var(--mist);
}
.wordmark{font-size:1.0625rem;font-weight:500;letter-spacing:.005em;border:0}
.masthead nav{font-size:.9375rem;color:var(--indigo)}

/* ---- hero ---- */
.hero{
  display:grid;
  overflow:visible;
  grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  align-items:center;
  gap:clamp(1rem,4vw,3rem);
  padding:clamp(3.5rem,11vw,8rem) 0 clamp(3rem,8vw,6rem);
}
h1{
  font-size:clamp(2.5rem,1.4rem + 4.6vw,5.25rem);
  line-height:1.04;
  font-weight:500;
  letter-spacing:-0.022em;
  margin:0 0 1.5rem;
  text-wrap:balance;
}
.standfirst{
  margin:0;
  max-width:28rem;
  font-size:1.0625rem;
  line-height:1.7;
  color:color-mix(in srgb,var(--ink) 74%,var(--paper));
}
.seal{
  justify-self:end;
  font-size:clamp(12rem,31vw,27rem);
  line-height:.72;
  color:var(--seal);
  font-weight:700;
  user-select:none;
  margin-right:clamp(-5rem,-6vw,-1.5rem);
  transform-origin:60% 55%;
}
@media (prefers-reduced-motion:no-preference){
  .seal{animation:stamp .9s cubic-bezier(.16,1,.3,1) both}
}
@keyframes stamp{
  from{opacity:0;transform:scale(1.14) rotate(-2.5deg)}
  to{opacity:1;transform:none}
}

/* ---- gloss: what the mark means ---- */
.gloss{
  border-top:1px solid var(--mist);
  border-bottom:1px solid var(--mist);
  padding:2.25rem 0;
  display:grid;
  grid-template-columns:auto minmax(0,var(--measure));
  gap:clamp(1.5rem,5vw,3.5rem);
  align-items:start;
}
.gloss .kana{font-size:2.75rem;line-height:1;color:var(--indigo);font-weight:400}
.gloss p{margin:0;line-height:1.72}
.gloss p + p{margin-top:.85rem}

/* ---- apps ---- */
.apps{padding:clamp(3rem,7vw,5rem) 0 0}
h2{
  font-size:1.0625rem;font-weight:500;margin:0 0 1.75rem;
  letter-spacing:.005em;
}
.app{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:.5rem clamp(1.5rem,5vw,3rem);
  align-items:baseline;
  padding:1.6rem 0;
  border-top:1px solid var(--mist);
}
.app:last-of-type{border-bottom:1px solid var(--mist)}
.app h3{
  font-size:1.5rem;font-weight:500;margin:0;letter-spacing:-0.012em;
}
.app p{
  grid-column:1;margin:.35rem 0 0;max-width:var(--measure);
  color:color-mix(in srgb,var(--ink) 72%,var(--paper));
}
.status{
  font-size:.875rem;
  color:color-mix(in srgb,var(--ink) 60%,var(--paper));
  white-space:nowrap;
}

/* ---- contact ---- */
.contact{
  padding:clamp(3rem,7vw,5rem) 0 clamp(2.5rem,6vw,4rem);
  max-width:var(--measure);
}
.contact p{margin:0 0 .6rem}
footer{
  border-top:1px solid var(--mist);
  padding:1.5rem 0 3rem;
  font-size:.875rem;
  color:color-mix(in srgb,var(--ink) 58%,var(--paper));
}

@media (max-width:44rem){
  .hero{grid-template-columns:1fr;padding-top:2.5rem;gap:0}
  .seal{grid-row:1;justify-self:start;font-size:9rem;margin:0 0 .3em -.04em}
  .gloss{grid-template-columns:1fr;gap:1.25rem}
  .app{grid-template-columns:1fr}
  .status{grid-row:2;grid-column:1}
  .app p{grid-row:3}
}

/* ---- document pages (/support, /privacy) ---- */
.doc{padding:clamp(3rem,8vw,5.5rem) 0 clamp(2.5rem,6vw,4rem);max-width:40rem}
.doc h1{font-size:clamp(2.25rem,1.6rem + 2.6vw,3.5rem);margin-bottom:1rem}
.doc .standfirst{margin-bottom:2.5rem}
.doc h2{font-size:1.375rem;font-weight:500;letter-spacing:-0.01em;margin:3rem 0 .75rem;padding-top:2rem;border-top:1px solid var(--mist)}
.doc h3{font-size:1.0625rem;font-weight:700;margin:1.75rem 0 .4rem}
.doc p,.doc li{line-height:1.72}
.doc p{margin:0 0 .9rem}
.doc ul{margin:0 0 1rem;padding-left:1.2rem}
.doc li + li{margin-top:.35rem}
.doc a{border-color:color-mix(in srgb,var(--indigo) 45%,var(--paper))}
.doc .meta{font-size:.875rem;color:color-mix(in srgb,var(--ink) 60%,var(--paper))}
.doc table{width:100%;border-collapse:collapse;font-size:.9375rem;margin:0 0 1rem}
.doc th,.doc td{text-align:left;vertical-align:top;padding:.6rem .75rem .6rem 0;border-top:1px solid var(--mist)}
.doc th{font-weight:500}
.table-scroll{overflow-x:auto}
.masthead nav a + a{margin-left:1.25rem}