:root{
  --ink:#151C24;
  --gray:#6B7684;
  --line:#E4E9EF;
  --tint:#F4F7FA;
  --key:#14486B;
  --key-t:#EAF1F7;
  --ease:cubic-bezier(.22,.61,.21,1);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:#fff; color:var(--ink);
  font-family:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN","Yu Gothic UI",Meiryo,sans-serif;
  font-size:16px; line-height:1.8; -webkit-font-smoothing:antialiased;
}
a{color:inherit}
:focus-visible{outline:3px solid var(--key);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.gate{
  min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:0; padding:40px 24px; text-align:center;
}

.mark{margin:0;line-height:1}
.mark .wm{display:block;font-style:normal;font-size:64px;font-weight:800;
  letter-spacing:.03em;line-height:1.1;color:var(--ink);margin:0 auto}

.lead{margin:22px 0 0;font-size:15px;color:var(--gray);letter-spacing:.04em}

.doors{margin-top:44px;width:100%;max-width:560px;
  display:grid;grid-template-columns:1fr;gap:14px}

.door{
  display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;
  align-items:center;gap:4px 16px;
  border:1px solid var(--line);border-radius:14px;padding:22px 24px;
  text-decoration:none;text-align:left;background:#fff;
  transition:border-color .18s var(--ease),background .18s var(--ease);
}

.door:hover{border-color:var(--key);background:var(--key-t)}
.dname{grid-column:1;grid-row:1;font-size:19px;font-weight:700;letter-spacing:.02em}
.ddesc{grid-column:1;grid-row:2;font-size:13.5px;color:var(--gray);line-height:1.8}
.dgo{grid-column:2;grid-row:1/3;font-size:20px;color:var(--key);font-weight:700}

.subs{margin-top:36px;display:flex;flex-wrap:wrap;justify-content:center;
  gap:8px 24px;font-size:13.5px}
.subs a{color:var(--gray);text-decoration:none;min-height:24px;display:inline-flex;align-items:center}
.subs a:hover{color:var(--key);text-decoration:underline}

.cr{margin:28px 0 0;font-size:12px;color:#9AA1A9;letter-spacing:.04em}

@media (max-width:640px){
  .mark .wm{font-size:min(44px,11.5vw)}
  .lead{margin-top:18px;font-size:14px}
  .doors{margin-top:32px}
  .door{padding:18px 20px}
  .dname{font-size:17px}
  .subs{margin-top:28px;gap:6px 18px}
}
@media (prefers-reduced-motion:reduce){ .door{transition:none} }