/* Shared by /lobby/, /lobby/book/ and /lobby/terms/: colour tokens, reset,
   masthead, footer and their responsive rules. Each page links this file right
   before its own <style>, so page rules keep winning ties exactly as when the
   same text sat inline. Rules whose text differs per page (.brand small,
   .sec-pad, .sec-head, .tag.on, …) stay inline on purpose. picture>source is
   hidden because a <source> inside a display:contents <picture> would otherwise
   become an empty flex/grid item (the masthead logo sits in a flex row) and
   collect a gap. Edit here, then npm run build && npm test — the screenshots
   must not move. */
  :root{
    --cream:#F7EFE2; /* 生成り（地） */
    --cream-2:#FBF6EC;
    --paper:#FFFDF8;
    --sumi:#211C19; /* 墨（基調文字） */
    --sumi-soft:rgba(33,28,25,.55);
    --line:rgba(140,59,46,.30); /* 罫線＝えんじ寄り */
    --hair:rgba(140,59,46,.15);
    --enji:#8C3B2E; /* アクセント1（罫線・見出し） */
    --enji-deep:#6E2C22;
    --salmon:#E8907A; /* アクセント2（面） */
    --salmon-soft:#F6C6B8;
    --grid:38px;
  }
  *{box-sizing:border-box}
  picture{display:contents}
  picture>source{display:none}
  html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
  body{
    margin:0;
    background:var(--cream);
    color:var(--sumi);
    font-family:"Zen Kaku Gothic New",-apple-system,BlinkMacSystemFont,"Hiragino Sans",sans-serif;
    font-weight:500;
    line-height:1.9;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{max-width:100%;height:auto;display:block}
  a{color:inherit;text-decoration:none}

  .grid-bg{
    background-image:
      linear-gradient(to right, var(--hair) 1px, transparent 1px),
      linear-gradient(to bottom, var(--hair) 1px, transparent 1px);
    background-size:var(--grid) var(--grid);
  }
  .wrap{max-width:1240px;margin:0 auto;padding:0 22px}
  .sec{border-bottom:1px solid var(--line)}

  .tag{
    font-family:"Archivo Black",sans-serif;
    font-size:10px;letter-spacing:.14em;text-transform:uppercase;line-height:1.5;
    color:var(--sumi-soft);
  }

  header.mast{border-bottom:1px solid var(--enji);background:var(--cream);position:sticky;top:0;z-index:20}
  .mast-in{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:11px 0}
  .brand{display:flex;align-items:center;gap:12px}
  .brand img{height:34px;width:auto}
  nav.mn{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
  nav.mn a{font-family:"Archivo Black",sans-serif;font-size:11px;letter-spacing:.13em;color:var(--sumi-soft)}
  nav.mn a:hover{color:var(--enji)}
  .btn{
    display:inline-flex;align-items:center;gap:10px;
    background:var(--salmon);color:#fff;border:1px solid var(--enji);
    font-weight:900;font-size:14px;letter-spacing:.08em;padding:12px 24px;
    box-shadow:3px 3px 0 var(--enji);
  }
  .btn:hover{background:var(--enji);color:var(--cream);box-shadow:3px 3px 0 var(--salmon)}
  .btn.sm{font-size:12px;padding:8px 15px;box-shadow:2px 2px 0 var(--enji)}
  .btn.sm:hover{box-shadow:2px 2px 0 var(--salmon)}

  /* フッター */
footer{background:var(--enji-deep);color:var(--cream);padding:44px 0 40px}
  .foot-top{display:flex;justify-content:space-between;align-items:flex-end;gap:26px;flex-wrap:wrap}
  .foot-logo{max-width:230px}
  .foot-logo img{width:100%}
  .foot-nav{display:flex;gap:20px;flex-wrap:wrap}
  .foot-nav a{font-family:"Archivo Black";font-size:12px;letter-spacing:.13em;color:rgba(247,239,226,.72)}
  .foot-nav a:hover{color:var(--cream)}
  .foot-nav a.on{color:var(--salmon)}
  .foot-info{
    margin-top:30px;padding-top:14px;border-top:1px solid rgba(247,239,226,.35);
    font-size:13px;line-height:2;color:var(--cream);
  }
  .foot-copy{margin-top:10px;font-size:11px;color:rgba(247,239,226,.6)}

  @media (max-width:860px){
    :root{--grid:30px}
    .mast-in{flex-wrap:wrap;gap:10px;justify-content:center;text-align:center}
    .brand{justify-content:center}
    nav.mn{order:3;width:100%;justify-content:center;gap:16px;border-top:1px solid var(--hair);padding-top:8px}
  }
  @media (max-width:520px){
    nav.mn a{font-size:10px}
  }