/*
 * 全ページ共通のヘッダー・フッター（2026-11-09 PDのトップ・記事と同じ組み方に作り替え）。
 * HTMLは ~/re-lp-tools/re_chrome.py が出す。トップは index.html、記事は guide.css と一緒に読む。
 */
:root{
  --rx-ink:#1c2836; --rx-sub:#5a6573; --rx-line:#e1e4ea; --rx-paper:#fbfaf7;
  --rx-navy:#13284b; --rx-navy2:#0b1a33; --rx-blue:#2f5bea; --rx-gold:#b8924a; --rx-mark:#f2dd9b;
  --rx-sans:'Zen Kaku Gothic New','Hiragino Kaku Gothic ProN','Noto Sans JP',system-ui,sans-serif;
  --rx-min:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',serif;
  --rx-en:'Inter','Helvetica Neue',Arial,sans-serif;
}
body{ margin:0; background:var(--rx-paper); }
.rx-hd *, .rx-hd *::before, .rx-hd *::after, .rx-ft *, .rx-ft *::before, .rx-ft *::after{ box-sizing:border-box; }
.rx-hd a, .rx-ft a{ text-decoration:none; color:inherit; }
.rx-hd p, .rx-ft p, .rx-ft ul{ margin:0; padding:0; }
.rx-in{ max-width:1180px; width:calc(100% - 64px); margin-inline:auto; }

/* ヘッダー */
.rx-hd{ position:sticky; top:0; z-index:60; background:rgba(251,250,247,.97); backdrop-filter:blur(8px); border-bottom:1px solid var(--rx-line); color:var(--rx-ink); font-family:var(--rx-sans); }
.rx-hd .rx-in{ display:flex; align-items:center; gap:24px; min-height:72px; }
.rx-logo{ margin-right:auto; display:flex; flex-direction:column; line-height:1; font-family:var(--rx-en); color:var(--rx-navy); }
.rx-logo b{ font-size:21px; font-weight:800; letter-spacing:.16em; }
.rx-logo span{ margin-top:5px; font-size:9.5px; font-weight:700; letter-spacing:.42em; color:var(--rx-blue); }
.rx-nav{ display:flex; align-items:center; gap:clamp(14px,2vw,26px); }
.rx-nav a{ position:relative; font-size:13.5px; font-weight:700; letter-spacing:.04em; color:var(--rx-ink); }
.rx-nav a:hover{ color:var(--rx-blue); }
.rx-nav a[aria-current]::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--rx-gold); }
.rx-ask{ display:inline-flex; align-items:center; gap:8px; padding:11px 22px; border-radius:999px; background:var(--rx-navy); color:#fff !important; font-size:13.5px; font-weight:700; letter-spacing:.04em; transition:background .2s; white-space:nowrap; }
.rx-ask:hover{ background:var(--rx-blue); }
.rx-ask i{ font-style:normal; font-family:var(--rx-en); }
.rx-menu{ display:none; position:relative; }
.rx-menu summary{ list-style:none; cursor:pointer; width:44px; height:44px; display:grid; place-content:center; gap:5px; border:1px solid var(--rx-line); border-radius:50%; background:#fff; }
.rx-menu summary::-webkit-details-marker{ display:none; }
.rx-menu summary span{ display:block; width:18px; height:2px; background:var(--rx-navy); transition:transform .2s,opacity .2s; }
.rx-menu[open] summary span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.rx-menu[open] summary span:nth-child(2){ opacity:0; }
.rx-menu[open] summary span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.rx-menu__p{ position:absolute; right:0; top:54px; width:min(300px,calc(100vw - 32px)); padding:10px 18px 16px; background:#fff; border:1px solid var(--rx-line); border-radius:16px; box-shadow:0 24px 50px -20px rgba(15,30,56,.35); display:flex; flex-direction:column; }
.rx-menu__p a{ padding:12px 2px; border-bottom:1px solid var(--rx-line); font-size:14px; font-weight:700; }
.rx-menu__p a:last-child{ border-bottom:0; }
.rx-menu__p .rx-ask{ margin-top:10px; justify-content:center; }

/* フッター */
.rx-ft{ position:relative; overflow:hidden; background:#0b1730; color:rgba(255,255,255,.72); font-family:var(--rx-sans); padding:72px 0 0; }
.rx-ft__top{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,.12); }
.rx-ft .rx-logo{ color:#fff; }
.rx-ft .rx-logo span{ color:#8fa8ff; }
.rx-ft__tag{ margin-top:26px !important; font-family:var(--rx-min); font-weight:500; font-size:clamp(24px,2.8vw,34px); line-height:1.5; letter-spacing:.05em; color:#fff; }
.rx-ft__d{ margin-top:14px !important; font-size:13px; line-height:1.9; color:rgba(255,255,255,.6); }
.rx-ft__ask{ display:flex; flex-direction:column; align-items:flex-end; gap:22px; text-align:right; }
.rx-ft__ask p{ font-size:16px; line-height:1.8; color:rgba(255,255,255,.75); }
.rx-ft__ask a{ display:inline-flex; align-items:center; gap:12px; padding:20px 36px; border-radius:999px; background:var(--rx-mark); color:#0b1730; font-size:16px; font-weight:700; letter-spacing:.06em; transition:background .2s,transform .2s; }
.rx-ft__ask a:hover{ background:#fff; transform:translateY(-2px); }
.rx-ft__cols{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px; padding:44px 0; border-bottom:1px solid rgba(255,255,255,.12); }
.rx-ft__h{ display:flex; align-items:center; gap:10px; padding-bottom:12px; margin-bottom:14px !important; border-bottom:1px solid rgba(255,255,255,.14); font-family:var(--rx-en); font-size:12.5px; font-weight:700; letter-spacing:.14em; color:#fff; }
.rx-ft__h::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--c,#8fa8ff); }
.rx-ft__col ul{ list-style:none; display:grid; gap:4px; }
.rx-ft__col li a{ display:inline-block; padding:4px 0; font-size:13px; line-height:1.6; transition:color .2s,transform .2s; }
.rx-ft__col li a:hover{ color:#fff; transform:translateX(3px); }
.rx-ft__bot{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:22px 0 30px; font-size:12px; color:rgba(255,255,255,.5); }
.rx-ft__bot a{ border-bottom:1px solid rgba(255,255,255,.3); }
.rx-ft__big{ margin:0 !important; text-align:center; font-family:var(--rx-min); font-size:clamp(64px,13vw,190px); line-height:.82; letter-spacing:.02em; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.1); white-space:nowrap; user-select:none; }

@media (max-width:1020px){
  .rx-nav{ display:none; }
  .rx-menu{ display:block; }
  .rx-ft__cols{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .rx-ft__top{ flex-direction:column; align-items:flex-start; }
  .rx-ft__ask{ align-items:flex-start; text-align:left; }
}
@media (max-width:640px){
  .rx-in{ width:calc(100% - 32px); }
  .rx-hd .rx-in{ gap:10px; min-height:64px; }
  .rx-logo b{ font-size:17px; }
  .rx-logo span{ font-size:8px; letter-spacing:.34em; }
  .rx-hd .rx-in > .rx-ask{ padding:9px 14px; font-size:12px; }
  .rx-ft{ padding-top:52px; }
  .rx-ft__cols{ grid-template-columns:minmax(0,1fr); gap:24px; }
  .rx-ft__ask a{ padding:16px 28px; }
}
@media (prefers-reduced-motion:reduce){ .rx-ask, .rx-ft a, .rx-menu summary span{ transition:none; } }