/* Re:Life Lab — article (hand-written part).
   EDITORIAL = the reading column: type, space and thin rules; no boxes by default.
   DECISION  = a tool: navy surface, bracket mark, ochre action. It never looks like the editorial text. */

/* ---------- reading column ---------- */
body.rl-article,body.rl-article #container,body.rl-article .container{background:var(--paper)}
body.rl-article .content{margin:0}
body.rl-article .content-in,body.rl-article #content-in{display:block;width:auto;max-width:none;margin:0;padding:0}
body.rl-article .main,body.rl-article #main{width:auto;max-width:780px;margin:0 auto;padding:0 20px 56px;border:0;border-radius:0;background:var(--paper);float:none}
body.rl-article .sidebar{display:none}
body.rl-article .article{margin:0;padding:0}
.rl-ahead{padding-top:2px}
body.rl-article .article-header{display:flex;flex-direction:column}
body.rl-article .article-header>*{order:5}
body.rl-article .article-header .entry-title{order:1}
body.rl-article .article-header .rl-tl{order:2}
body.rl-article .article-header .rl-qa{order:3}
body.rl-article .article-header .eye-catch-wrap{order:4}
body.rl-article .article-header .sns-share,body.rl-article .article-header .ad-area{display:none}
/* ARTICLE TITLE */
body.rl-article .entry-title{font-family:var(--f-sans);font-size:24px;line-height:1.5;font-weight:700;color:var(--ink);letter-spacing:.01em;font-feature-settings:"palt" 1;word-break:auto-phrase;margin:4px 0 0;padding:0;border:0;background:none}
body.rl-article .eye-catch-wrap{margin:20px 0 0}
body.rl-article .eye-catch{margin:0;display:block}
body.rl-article .eye-catch img{display:block;width:100%;height:auto;border:1px solid var(--line)}
body.rl-article .eye-catch .cat-label{display:none}
.rl-tl{margin-top:12px!important}
.rl-qa{margin-top:16px!important}
.rl-qa__k{font-family:var(--f-num),var(--f-sans);font-size:13px;font-weight:700;letter-spacing:.16em;color:var(--ochre-t);line-height:1.5}
/* LEAD = the statement of the Quick Answer */
.rl-qa .rl-qa__p{font-size:17px;line-height:1.7;margin-top:2px}
.rl-fit .rl-fit__h{position:relative;padding-left:16px}
.rl-fit .rl-fit__h::before{content:"";position:absolute;left:0;top:.45em;width:8px;height:8px;border-radius:50%;background:var(--ochre)}
.rl-fit__no .rl-fit__h::before{background:none;border:1.5px solid var(--sub)}

/* ---------- BODY: the text written in the editor. Markup is untouched; only type and rhythm are set here. ---------- */
body.rl-article .entry-content{font-family:var(--f-sans);font-size:16px;line-height:1.95;color:var(--text);margin:28px 0 0;padding:0}
body.rl-article .entry-content>p{margin:0 0 1.35em}
body.rl-article .entry-content a{color:var(--navy)}
body.rl-article .article .entry-content h2{font-size:22px;line-height:1.55;font-weight:700;color:var(--ink);margin:60px 0 20px;padding:18px 0 0;border:0;border-top:2px solid var(--navy);border-radius:0;background:none;position:relative;font-feature-settings:"palt" 1}
body.rl-article .article .entry-content h2::before{content:"";position:absolute;left:0;top:-2px;width:56px;height:2px;background:var(--ochre);border:0}
body.rl-article .article .entry-content h2::after{content:none}
body.rl-article .article .entry-content h3{font-size:18px;line-height:1.6;font-weight:700;color:var(--ink);margin:40px 0 12px;padding:0 0 0 14px;border:0;background:none;position:relative}
body.rl-article .article .entry-content h3::before{content:"";position:absolute;left:0;top:.45em;width:3px;height:1em;background:var(--ochre);border:0}
body.rl-article .article .entry-content h3::after{content:none}
body.rl-article .entry-content table{font-size:14px;line-height:1.65;font-variant-numeric:tabular-nums}
body.rl-article .entry-content blockquote{margin:22px 0;padding:2px 0 2px 16px;border:0;border-left:2px solid var(--navy-line);background:none;color:inherit}
body.rl-article .entry-content blockquote::before,body.rl-article .entry-content blockquote::after{content:none}
body.rl-article .toc{border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;background:none;padding:14px 0;margin:24px 0 0;display:block;width:auto;font-size:14px}
body.rl-article .toc-title{font-size:15px;font-weight:700;color:var(--ink);text-align:left}
body.rl-article .article-footer{margin-top:40px}
body.rl-article .under-entry-content{margin:0}
body.rl-article .breadcrumb{font-size:13px;margin:28px 0 0;padding:12px 0 0;border-top:1px solid var(--line);color:var(--sub)}
body.rl-article .pager-post-navi,body.rl-article .author-box,body.rl-article .footer-meta{display:none}
.rl-ae{margin-top:56px!important}
.rl-ae h2{font-size:20px;line-height:1.5;margin:0 0 4px}
.rl-ae .rl-nx b{font-weight:700}

/* ---------- NUMBER hierarchy: numbers use the number face; three sizes ---------- */
.rl-num{font-family:var(--f-num),var(--f-sans);font-variant-numeric:tabular-nums;font-weight:700;color:var(--navy);letter-spacing:-.01em}
.rl-num small{display:block;font-family:var(--f-sans);font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--sub)}
.rl-num b{display:block;line-height:1.05;font-weight:700}
.rl-num b span{font-family:var(--f-sans);font-size:.36em;margin-left:.2em;letter-spacing:0}
.rl-num em{display:block;font-family:var(--f-sans);font-style:normal;font-size:13px;font-weight:400;color:var(--sub);letter-spacing:0;margin-top:6px}
.rl-num--l b{font-size:72px}.rl-num--m b{font-size:40px}
b.rl-num--s{display:inline;font-size:1.08em}b.rl-num--s span{font-size:.8em;margin-left:.1em}
.rl-numrow{display:grid;gap:22px;border-top:2px solid var(--navy);padding-top:18px}

/* ---------- EXPERT COMMENT / 現場メモ: a person is writing this ---------- */
.rl-memo{margin:26px 0;padding:16px 0 4px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.rl-memo__who{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.rl-memo__mark{flex:none;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--sand);border:1px solid var(--sand-line);font-size:17px;font-weight:700;color:var(--ink)}
.rl-memo__who b{display:block;font-size:15px;line-height:1.4;color:var(--ink)}
.rl-memo__who small{display:block;font-size:13px;line-height:1.5;color:var(--sub)}
.rl-memo>p{font-size:16px;line-height:1.95;padding:0 0 14px 52px}

/* ---------- DECISION band: the tool, not the article ---------- */
.rl-dband{position:relative;background:var(--navy-d);color:#fff;padding:24px 22px 22px;margin:28px 0;border-radius:var(--r)}
.rl-dband::before{content:"";position:absolute;left:0;top:0;width:88px;height:3px;background:var(--ochre)}
.rl-dband__k{font-family:var(--f-num);font-size:13px;font-weight:700;letter-spacing:.2em;color:var(--gold)}
.rl-dband__t{font-size:24px;line-height:1.5;font-weight:700;color:#fff;margin-top:4px}
.rl-dband__d{font-size:14px;line-height:1.8;color:#C3CEDA;margin-top:6px;max-width:30em}
.rl-dband__go{display:inline-flex;align-items:center;justify-content:space-between;gap:18px;min-height:52px;min-width:180px;padding:0 18px 0 22px;margin-top:16px;background:var(--ochre);color:#fff!important;font-size:16px;font-weight:700;border-radius:var(--r)}
.rl-dband__go i{font-style:normal;font-family:var(--f-num);font-size:18px}
body:not(.rl-decision) .rl-dband__go{display:none}
.rl-dt .rl-lnk{color:var(--ochre-t)}

/* ---------- gallery page (local review) ---------- */
.rl-cgal-wrap{margin-top:0}
.rl-cgal{padding:34px 0;border-top:1px solid var(--line)}
.rl-cgal .rl-cgal__h{font-size:15px;line-height:1.5;color:var(--sub);font-weight:400;margin:2px 0 18px;padding:0;border:0}
.rl-cgal .rl-cgal__h::before{display:none}
.rl-tyspec{display:grid;gap:14px}
.rl-ty-brand{font-family:var(--f-num);font-size:22px;font-weight:700;color:var(--ink)}.rl-ty-brand span{color:var(--ochre)}
.rl-ty-page{font-size:34px;line-height:1.4;font-weight:700;color:var(--ink);font-feature-settings:"palt" 1}
.rl-ty-article{font-size:24px;line-height:1.5;font-weight:700;color:var(--ink)}
.rl-ty-lead{font-size:17px;line-height:1.7;font-weight:700;color:var(--ink)}
.rl-ty-h2{font-size:22px;line-height:1.55;font-weight:700;color:var(--ink);padding-top:16px;border-top:2px solid var(--navy)}
.rl-ty-h3{font-size:18px;font-weight:700;color:var(--ink);padding-left:14px;border-left:3px solid var(--ochre);line-height:1.4}
.rl-ty-body{font-size:16px;line-height:1.95}
.rl-ty-meta{font-size:13px;color:var(--sub);font-family:var(--f-num),var(--f-sans)}.rl-ty-cap{font-size:13px;line-height:1.75;color:var(--sub)}

@media (min-width:768px){
  body.rl-article .main,body.rl-article #main{padding:0 32px 72px}
  body.rl-article .entry-title{font-size:30px}
  body.rl-article .entry-content{font-size:17px}
  body.rl-article .article .entry-content h2{font-size:25px}
  body.rl-article .article .entry-content h3{font-size:20px}
  .rl-numrow{grid-template-columns:auto auto 1fr;gap:40px;align-items:end}
  .rl-num--l b{font-size:104px}.rl-num--m b{font-size:52px}
  .rl-dband{padding:32px 36px 30px}.rl-dband__t{font-size:28px}
  .rl-ty-page{font-size:48px}.rl-ty-article{font-size:30px}
}

/* ---------- fixes after the first local render ---------- */
body.rl-article .breadcrumb{font-size:13px;line-height:1.5;margin:0;padding:14px 0 6px;border:0;color:var(--sub)}
body.rl-article .breadcrumb a{color:var(--navy)}
body.rl-article .breadcrumb .fa,body.rl-article .breadcrumb [class*="fa-"]{display:none}
body.rl-article .article-header .rl-tl,body.rl-article .article-header .rl-qa p,body.rl-article .article-header .rl-qa ul,body.rl-article .article-header .rl-qa li{margin:0;padding-top:0;padding-bottom:0}
body.rl-article .article-header .rl-tl{margin-top:12px}
body.rl-article .article-header .rl-qa .rl-qa__p{margin-top:2px}
body.rl-article .article-header .rl-fit{margin-top:12px}
body.rl-article .article-header .rl-fit li{padding:3px 0 3px 16px}
body.rl-article .article-header .rl-fit .rl-fit__h{margin-bottom:4px;padding-left:16px}
body.rl-article .article-header .rl-qc__cap{margin-top:8px}
body.rl-article .article-header .rl-dt p{font-size:13px}
/* Cocoon's table of contents: same content and behaviour, quiet look */
body.rl-article .toc{box-shadow:none;max-width:none}
body.rl-article .toc .toc-title{padding:0;margin:0 0 6px;background:none}
body.rl-article .toc .toc-title::before{display:none}
body.rl-article .toc .toc-list,body.rl-article .toc .toc-content ol,body.rl-article .toc .toc-content ul{margin:0;padding:0;list-style:none}
body.rl-article .toc li{margin:0;padding:0;border:0}
body.rl-article .toc li::before{display:none}
body.rl-article .toc a{display:block;padding:9px 0;border-top:1px solid var(--line);color:var(--text);font-weight:400;text-decoration:none}
body.rl-article .toc li li a{padding-left:16px;font-size:13px}
@media (min-width:768px){body.rl-article .eye-catch-wrap{max-width:560px}}
/* gallery page (local): hide Cocoon's page furniture */
body.rl-gallery .toc,body.rl-gallery .sns-share,body.rl-gallery .date-tags,body.rl-gallery .sidebar{display:none}
body.rl-gallery .main{max-width:780px;margin:0 auto;width:auto;border:0;background:var(--paper);float:none}
body.rl-gallery .content-in{display:block;width:auto}
body.rl-gallery .entry-content .rl-cgal .rl-cgal__h{background:none;border:0;padding:0;margin:2px 0 18px;font-size:15px;font-weight:400;color:var(--sub)}
body.rl-gallery .entry-content .rl-cgal .rl-cgal__h::before,body.rl-gallery .entry-content .rl-cgal .rl-cgal__h::after{display:none}
/* phones: a wide table written in the editor scrolls inside itself; the page never scrolls sideways. CSS only — the table markup is not changed. */
@media (max-width:767px){body.rl-article .entry-content table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}}

/* ================= STAGE 1.5 ================= */
/* kicker (field + article type) under the breadcrumb */
body.rl-article .rl-ah__k{margin:0}
body.rl-article .rl-ah__k a{color:var(--ochre-t);min-height:44px;display:inline-flex;align-items:center}
body.rl-article .rl-ah__k span{margin-left:1em}
body.rl-article .breadcrumb{padding:14px 0 0}
body.rl-article .entry-title{margin-top:-2px}
/* table of contents: one quiet line, closed on phones */
body.rl-article .entry-content .rl-toc{margin:24px 0 0}
body.rl-article .entry-content .rl-toc ol{margin:0;padding:0 0 8px;list-style:none}
body.rl-article .entry-content .rl-toc li{margin:0;padding:0}
body.rl-article .entry-content .rl-toc li a{color:var(--text);text-decoration:none}
body.rl-article .entry-content .rl-toc summary{margin:0}
/* Article End replaces Cocoon's share row and category chip */
body.rl-has-end .article-footer .sns-share,body.rl-has-end .article-footer .sns-follow,body.rl-has-end .article-footer .entry-categories-tags{display:none}
body.rl-has-end .article-footer{margin-top:0}
.rl-ae .rl-ck__none{font-size:13px;line-height:1.7;color:var(--sub);margin-top:2px}
.rl-ae .rl-sh a{text-decoration:none}
.rl-ae .rl-more{display:flex;align-items:center;justify-content:space-between;min-height:52px;font-weight:700;color:var(--navy)}
.rl-ae .rl-more i{font-style:normal;font-family:var(--f-num);color:var(--ochre)}
/* Living Line eyecatch (local preview) */
.rl-eyeprev{margin:20px 0 0!important;order:4}
.rl-eyeprev .rl-eye{display:block;width:100%;height:auto;border:1px solid var(--line);background:#fff}
.rl-eyeprev__orig{display:none}
/* right rail: the contents of this article, the Decision entry where it helps, one next step. Wide screens only. */
.rl-rail{display:none}
.rl-sd__n{margin-top:22px;border-top:2px solid var(--navy);padding-top:10px}
.rl-sd__n p{font-size:13px;font-weight:700;letter-spacing:.14em;color:var(--ochre-t)}
.rl-sd__n a{display:block;padding:8px 0 10px;border-bottom:1px solid var(--line)}
.rl-sd__n .rl-k{display:block;font-size:13px;color:var(--sub);line-height:1.5}
.rl-sd__n b{display:block;font-size:14px;line-height:1.6;color:var(--ink)}
.rl-rail .rl-dt{margin-top:18px}
@media (min-width:768px){.rl-eyeprev{max-width:560px}}
@media (min-width:1024px){
  body.rl-has-rail .main,body.rl-has-rail #main{max-width:1128px;display:grid;grid-template-columns:minmax(0,740px) 280px;column-gap:44px;justify-content:center;align-items:start}
  body.rl-has-rail .main>*{grid-column:1;min-width:0}
  body.rl-has-rail .main>.rl-rail{display:block;grid-column:2;grid-row:1/span 12;position:sticky;top:88px;padding-top:58px;font-size:14px;max-height:calc(100vh - 100px);overflow:auto}
  body.rl-has-rail .entry-content .rl-toc{display:none}
  /* title and Trust Line on the left, eyecatch on the right, Quick Answer across */
  body.rl-article .article-header{display:grid;grid-template-columns:minmax(0,1fr) 248px;gap:0 28px;align-items:start}
  body.rl-article .article-header>*{grid-column:1}
  body.rl-article .article-header .eye-catch-wrap,body.rl-article .article-header .rl-eyeprev{grid-column:2;grid-row:1/4;align-self:center;margin:0!important;max-width:none}
  body.rl-article .article-header .rl-qa{grid-column:1/-1;margin-top:20px!important}
}
@media (min-width:1280px){body.rl-has-rail .main,body.rl-has-rail #main{max-width:1152px;grid-template-columns:minmax(0,740px) 300px;column-gap:48px}}
/* Article End: one rule between sections (the Decision line inside a section carries no rule of its own) */
.rl-ae .rl-dt{border:0;padding-bottom:0}
body.rl-article .article .entry-content h3::before{width:3px!important;height:1em!important;top:.5em;border-radius:0!important;background:var(--ochre)!important}
/* a jump from the table of contents lands below the sticky header */
body.rl-article .entry-content :is(h2,h3),body.rl-article .entry-content :is(h2,h3) span[id]{scroll-margin-top:84px}

/* ================= STAGE 1.6 ================= */
.rl-fit.rl-fit--one{grid-template-columns:1fr!important}
.rl-qa--d .rl-qc__cap{margin-top:8px}
/* Hub-centred breadcrumb */
body.rl-has-crumbs .main>.rl-bc{padding:10px 0 0;margin:0}
body.rl-has-crumbs .rl-ah__k span{margin-left:0}
body.rl-has-crumbs .rl-ah__k{min-height:0;padding:2px 0 6px}

/* ================= 0.9.8 candidate (Decision Experience, local only) =================
   Parts a Quick Answer may carry, each only when the brief has it: what the article lets you decide, what to check first (links to the
   article's own sections), when official information was checked and what was checked. Inside the one Quick Answer block: thin rules, no new boxes or colours. */
body.rl-article .article-header .rl-qa.rl-qa--below{order:4}
.rl-qa--brief .rl-qa__k{letter-spacing:.08em}
.rl-qa .rl-qa__d{font-size:17px;line-height:1.6;font-weight:600;color:var(--ink);margin-top:2px!important}
.rl-qa__ck{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.rl-qa .rl-qa__h{font-size:13px;font-weight:700;color:var(--ink);line-height:1.6}
body.rl-article .article-header .rl-qa .rl-qa__ck ol{margin:2px 0 0;padding:0 0 0 1.3em;list-style:decimal}
body.rl-article .article-header .rl-qa .rl-qa__ck li{font-size:15px;line-height:1.7;padding:3px 0}
.rl-qa__ck a{color:var(--navy);text-decoration:underline;text-decoration-color:var(--navy-line);text-underline-offset:4px}
.rl-qa .rl-qa__as{margin-top:10px!important;font-size:12.5px;line-height:1.7;color:var(--sub)}
.rl-qa .rl-qa__as small{font-size:inherit}
/* condition rows of a decision brief (OWNER design review 2026-10-27): conditions at 14px; on phones the condition sits on its own line above the answer
   instead of a narrow column, so long conditions do not break into 3 lines. Only briefs with "decides" — 1168 keeps its look. */
.rl-qa--brief .rl-qc__r span{font-size:14px}
@media (max-width:767px){
  .rl-qa--brief .rl-qc__r{grid-template-columns:minmax(0,1fr);gap:1px 0;padding:9px 0}
  .rl-qa--brief .rl-qc__r b{font-size:16px;line-height:1.6}
}
/* "次に確認すること" rows with a description: what the reader checks there leads, the article title follows quietly (same rows, no new box or colour) */
.rl-ae .rl-nx--desc a{gap:3px 12px}
.rl-ae .rl-nx--desc .rl-nx__d{font-size:16px;line-height:1.7;font-weight:600;color:var(--ink)}
.rl-ae .rl-nx--desc b{font-size:13.5px;line-height:1.6;font-weight:400;color:var(--sub)}