/* Re:Life Lab — Hub (hand-written part). Cocoon's page area becomes a full-width column that carries the Hub sections (same approach as the TOP). */
body.rl-hub,body.rl-hub #container,body.rl-hub .container{background:var(--bg)}
body.rl-hub .content,body.rl-hub #content{margin:0;padding:0}
body.rl-hub .content-in,body.rl-hub #content-in{display:block;width:auto;max-width:none;margin:0;padding:0}
body.rl-hub .main,body.rl-hub #main{width:auto;max-width:none;margin:0;padding:0;border:0;border-radius:0;background:none;float:none}
body.rl-hub .content-top,body.rl-hub .content-bottom,body.rl-hub .sidebar{display:none}
.rl-hubmain{display:block}
.rl-hubmain .rl-rt li a{text-decoration:none}
.rl-hubmain .rl-nx a{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center;min-height:64px;padding:12px 0;border-bottom:1px solid var(--line)}
.rl-hubmain .rl-nx a::after{content:"→";font-family:var(--f-num);color:var(--ochre);grid-row:1/3;grid-column:2}
.rl-hubmain .rl-nx .rl-k{font-size:13px;font-weight:700;color:var(--ochre-t);letter-spacing:.06em}
.rl-hubmain .rl-nx b{font-size:17px;color:var(--ink)}
.rl-hub .rl-rt h3>span{min-width:0;overflow-wrap:anywhere}
@media (max-width:359px){.rl-hub .rl-rt h3{flex-wrap:wrap}.rl-hub .rl-ph{word-break:normal;overflow-wrap:anywhere}}
/* Stage 1.7 — "ほかの記事を見る": one quiet block per branch, a step weaker than the routes */
.rl-hub .rl-mr{margin-top:30px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.rl-hub .rl-mr>summary{display:flex;align-items:center;gap:12px;min-height:56px;font-size:15px;font-weight:700;color:var(--navy);cursor:pointer;list-style:none}
.rl-hub .rl-mr>summary::-webkit-details-marker{display:none}
.rl-hub .rl-mr>summary small{font-family:var(--f-num),var(--f-sans);font-size:13px;font-weight:400;color:var(--sub)}
.rl-hub .rl-mr>summary::after{content:"＋";margin-left:auto;color:var(--ochre);font-size:17px}
.rl-hub .rl-mr[open]>summary::after{content:"－"}
.rl-hub .rl-mr__in{padding:2px 0 14px}
.rl-hub .rl-mr__k{font-size:13px;line-height:1.6;color:var(--sub);margin:14px 0 2px}
.rl-hub .rl-mr ol{margin:0;padding:0;list-style:none}
.rl-hub .rl-mr li a{display:grid;grid-template-columns:1fr auto;gap:0 10px;align-items:center;min-height:44px;padding:7px 0;border-top:1px solid var(--line);text-decoration:none}
.rl-hub .rl-mr li a::after{content:"→";font-family:var(--f-num);color:var(--navy-line)}
.rl-hub .rl-mr li b{font-size:14px;line-height:1.6;font-weight:400;color:var(--text)}
@media (min-width:768px){.rl-hub .rl-mr__in{columns:2;column-gap:36px}.rl-hub .rl-mr__in>ol{break-inside:avoid}.rl-hub .rl-mr__k{break-after:avoid}}

/* 0.5.0 — which article to read first. The first article of a route is marked; the following ones are a step quieter. PC: two columns (titles wrap less). */
.rl-hub .rl-rt li:first-child a::before{content:"まず読む";grid-column:1;font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--ochre-t);line-height:1.6}
.rl-hub .rl-rt li:first-child a::after{grid-row:1/3}
.rl-hub .rl-rt li:not(:first-child) a::after{content:none}
.rl-hub .rl-rt li:not(:first-child) a{min-height:40px;padding:7px 0}
.rl-hub .rl-rt li:not(:first-child) b{color:var(--text)}
.rl-hub .rl-rt h3 small{font-size:12px;color:var(--sub);opacity:.75}
@media (min-width:1024px){.rl-hub .rl-rts.rl-rts--3{grid-template-columns:1fr 1fr;gap:34px 56px}}

/* 0.5.1 — "次にすること" at the end of the electricity & gas Hub (static rows in the template). The rows are the existing field rows; only the frame is new. */
.rl-next .rl-nx{border-top:2px solid var(--navy)}
.rl-next .rl-nx b{line-height:1.6}
@media (min-width:768px){.rl-next .rl-nx{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;border-top:0}.rl-next .rl-nx a{border-top:2px solid var(--navy);border-bottom:0;margin-bottom:8px}}
/* 0.5.1 — "まず考えること" (body.rl-hf2: the electricity & gas Hub). Same tokens and rules as before; type contrast and spacing only. */
body.rl-hf2 .rl-hf li{grid-template-columns:30px 1fr;padding:18px 0}
body.rl-hf2 .rl-hf li::before{font-size:18px;line-height:26px}
body.rl-hf2 .rl-hf b{font-size:17px;line-height:26px;letter-spacing:.01em}
body.rl-hf2 .rl-hf span span{margin-top:6px;font-size:14px;line-height:1.85;color:var(--text)}
@media (min-width:768px){
  body.rl-hf2 .rl-hf li{grid-template-columns:1fr;padding:16px 0 4px}
  body.rl-hf2 .rl-hf li::before{font-size:15px;line-height:1.4;margin-bottom:6px}
  body.rl-hf2 .rl-hf b{font-size:18px;line-height:1.5}
  body.rl-hf2 .rl-hf span span{margin-top:8px;font-size:14px}
}
/* 0.9.4 — the way to the full lists at the end of the articles (every Hub, made in inc/hub.php). Quieter than the routes; same row rhythm as "ほかの記事を見る". */
.rl-hub .rl-hl{margin-top:30px;border-top:1px solid var(--line)}
.rl-hub .rl-hl__k{margin:14px 0 2px;font-size:13px;line-height:1.6;color:var(--sub)}
.rl-hub .rl-hl a{display:grid;grid-template-columns:1fr auto;gap:0 12px;align-items:center;min-height:48px;padding:8px 0;border-bottom:1px solid var(--line);text-decoration:none}
.rl-hub .rl-hl a b{font-size:15px;line-height:1.6;font-weight:700;color:var(--navy)}
.rl-hub .rl-hl a small{font-family:var(--f-num),var(--f-sans);font-size:13px;color:var(--sub);white-space:nowrap}
.rl-hub .rl-hl a small::after{content:"→";margin-left:10px;font-family:var(--f-num);color:var(--ochre)}
.rl-hub .rl-hl a:hover b{text-decoration:underline;text-decoration-color:var(--ochre);text-underline-offset:5px}
@media (min-width:768px){.rl-hub .rl-hl{display:grid;grid-template-columns:1fr 1fr;column-gap:36px}.rl-hub .rl-hl__k{grid-column:1/-1}}
/* 0.9.5 — a route whose "まず読む" Blog Operations holds (Content Map → hub_lead_hold): every row reads like the following rows. */
.rl-hub .rl-rt[data-rl-nolead] li:first-child a::before{content:none}
.rl-hub .rl-rt[data-rl-nolead] li:first-child a{min-height:40px;padding:7px 0}
.rl-hub .rl-rt[data-rl-nolead] li:first-child b{color:var(--text)}
body.rl-r3 .rl-hub .rl-rt[data-rl-nolead] li:first-child b,body.rl-r3.rl-hub .rl-rt[data-rl-nolead] li:first-child b{font-weight:500}
/* 0.9.5 — the line under a route that some articles were held from (inc/hub.php rl_hub_held_note): quiet, one line, an in-page link to the full lists. */
.rl-hub .rl-rt__rest{margin:10px 0 0;font-size:13px;line-height:1.7}
.rl-hub .rl-rt__rest a{display:inline-flex;align-items:center;min-height:44px;color:var(--sub);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px}
.rl-hub .rl-rt__rest a::after{content:"↓";margin-left:6px;color:var(--ochre)}