/* NAZORU — shared styles for content pages (guides, about) */
:root{
  --ink:#0E0F12; --paper:#FFFFFF; --mist:#F4F4F1; --line:#E4E4DF;
  --blue:#0A4FA6; --sub:#6B6B64; --ease:cubic-bezier(.22,.61,.36,1);
  --display:'Archivo','Noto Sans JP',system-ui,sans-serif;
  --ui:'Space Grotesk','Noto Sans JP',system-ui,sans-serif;
  --jp:'Noto Sans JP','Space Grotesk',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--jp);line-height:1.85;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--blue)}
::selection{background:var(--blue);color:#fff}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}

/* header */
.sh{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)}
.sh .in{max-width:1080px;margin:0 auto;padding:0 22px;height:64px;display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:baseline;gap:8px;text-decoration:none;color:var(--ink)}
.brand b{font-family:var(--display);font-weight:900;letter-spacing:-.04em;font-size:20px}
.brand small{font-family:var(--ui);color:var(--sub);font-size:11px;letter-spacing:.1em}
.snav{display:flex;gap:16px;margin-left:auto;font-family:var(--ui);font-size:14px;font-weight:600}
.snav a{color:var(--ink);text-decoration:none;opacity:.85}
.snav a:hover{color:var(--blue);opacity:1}
.langsw{display:flex;gap:4px;font-family:var(--ui);font-size:12px;font-weight:600}
.langsw a{padding:4px 9px;border-radius:999px;text-decoration:none;color:var(--sub);border:1px solid var(--line)}
.langsw a.on{background:var(--ink);color:#fff;border-color:var(--ink)}
@media(max-width:640px){.snav a.hide-sm{display:none}}

/* article */
.wrap{max-width:760px;margin:0 auto;padding:34px 22px 70px}
.crumbs{font-family:var(--ui);font-size:12.5px;color:var(--sub);margin-bottom:16px}
.crumbs a{color:var(--sub);text-decoration:none}
.crumbs a:hover{color:var(--blue)}
article h1{font-family:var(--display);font-weight:900;letter-spacing:-.02em;line-height:1.15;
  font-size:clamp(1.8rem,4vw,2.6rem);margin:6px 0 8px}
.dek{color:#3a3b42;font-size:1.05rem;margin:0 0 8px}
.meta{font-family:var(--ui);font-size:12.5px;color:var(--sub);margin-bottom:26px}
article h2{font-family:var(--display);font-weight:800;letter-spacing:-.01em;font-size:1.5rem;
  margin:40px 0 10px;padding-top:8px}
article h3{font-size:1.15rem;margin:26px 0 6px}
article p{margin:0 0 16px}
article ul,article ol{margin:0 0 18px;padding-left:1.3em}
article li{margin:6px 0}
article strong{font-weight:700}
.callout{background:var(--mist);border:1px solid var(--line);border-left:4px solid var(--blue);
  border-radius:0 12px 12px 0;padding:14px 18px;margin:22px 0}
.callout p:last-child{margin:0}
.cta{display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:#fff;text-decoration:none;
  font-family:var(--ui);font-weight:700;font-size:15px;border-radius:999px;padding:13px 22px;margin:8px 0 4px;
  transition:.16s var(--ease)}
.cta:hover{box-shadow:0 10px 26px rgba(14,15,18,.18);transform:translateY(-1px);color:#fff}
.faqword{margin-top:8px}
.faqword details{border-bottom:1px solid var(--line);padding:2px}
.faqword summary{cursor:pointer;font-weight:700;padding:14px 2px;list-style:none}
.faqword summary::-webkit-details-marker{display:none}
.faqword p{margin:0 2px 14px;color:#3a3b42}

/* related cards */
.rel{margin:44px 0 0;border-top:1px solid var(--line);padding-top:24px}
.rel h2{font-size:1.2rem;margin:0 0 14px}
.relgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.relgrid{grid-template-columns:1fr}}
.relgrid a{display:block;border:1px solid var(--line);border-radius:12px;padding:14px 16px;text-decoration:none;
  color:var(--ink);transition:.15s var(--ease)}
.relgrid a:hover{border-color:var(--ink);transform:translateY(-2px)}
.relgrid b{display:block;font-size:.98rem}
.relgrid span{font-size:.82rem;color:var(--sub)}

/* ad slot */
.ad{margin:32px auto;max-width:728px;min-height:90px;display:flex;align-items:center;justify-content:center;
  background:var(--mist);border:1px dashed var(--line);border-radius:12px;overflow:hidden}
.ad .ph{font-family:var(--ui);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#aab0bb}
.ad ins{display:block;width:100%}

/* footer */
.sf{background:var(--ink);color:#EDEDEA;margin-top:20px}
.sf .in{max-width:1080px;margin:0 auto;padding:44px 22px 34px}
.sf .big{font-family:var(--display);font-weight:900;letter-spacing:-.04em;font-size:2.4rem;line-height:1}
.sf .fnav{display:flex;gap:16px;flex-wrap:wrap;margin-top:16px;font-family:var(--ui);font-size:13px}
.sf .fnav a{color:#ffffffb3;text-decoration:none}
.sf .fnav a:hover{color:#fff}
.sf .rule{margin-top:22px;padding-top:16px;border-top:1px solid #ffffff1a;font-family:var(--ui);font-size:12px;color:#ffffff66}

/* consent banner */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--ink);color:#EDEDEA;
  padding:16px 20px;display:none;box-shadow:0 -8px 30px rgba(0,0,0,.25)}
.consent.show{display:block}
.consent .cin{max-width:1080px;margin:0 auto;display:flex;gap:16px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.consent p{margin:0;font-family:var(--ui);font-size:13px;color:#cfd2d8;max-width:62ch;line-height:1.6}
.consent a{color:#fff}
.consent .btns{display:flex;gap:10px;flex-wrap:wrap}
.consent button{font-family:var(--ui);font-size:13px;font-weight:700;border-radius:999px;padding:10px 18px;cursor:pointer;border:1px solid #ffffff33}
.consent .acc{background:#fff;color:var(--ink);border-color:#fff}
.consent .rej{background:transparent;color:#fff}