/* Re:Life Lab — Editorial R3 (theme 0.9.0, hand-written). Loaded last, only while RELIFE_EDITORIAL is on (body.rl-r3). Every rule is under body.rl-r3 (not .rl-ed: that class is the editor block at the end of an article).
   The approved R3 direction moved onto the existing parts: one editorial serif for the headings, lighter weights, fine rules instead of thick bars and arrows,
   lists that read as an index. Boxes stay only where the reader decides something (comparison tables, the conclusion box, the CTA).
   The markup, the article bodies and the affiliate links are not changed; colours are the existing tokens (navy / sand / ochre / off-white). */

/* 0. The heading face. Default = the device's own Mincho. With RELIFE_WEBFONT (body.rl-wf) Noto Serif JP 600 comes first; until it arrives the device face is shown. */
body.rl-r3{--f-ed:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif CJK JP","Noto Serif JP",serif}
body.rl-r3.rl-wf{--f-ed:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif CJK JP",serif}

/* 1. Headings: serif 600 (the only weight the web font loads), a little more letter space, no bar under or before them. */
body.rl-r3 :is(.rl-hero .rl-hero__title,.rl-hh .rl-hh__title,.rl-sec__h h2,.rl-br__h h2,.rl-tr h2,.rl-lt__h h2,.rl-ae h2,.rl-up__main h3,.rl-cg__name,.rl-ft__close){font-family:var(--f-ed);font-weight:600;letter-spacing:.04em;font-feature-settings:"palt" 1}
body.rl-r3 .rl-hero .rl-hero__title{font-size:30px;line-height:1.45}
body.rl-r3 .rl-hh .rl-hh__title{font-size:30px;line-height:1.4}
body.rl-r3 :is(.rl-sec__h h2,.rl-br__h h2){font-size:23px;line-height:1.55}
body.rl-r3 .rl-tr h2{font-size:21px;line-height:1.6}
body.rl-r3 .rl-hh{border-bottom:1px solid var(--line)}
body.rl-r3 .rl-hh::after{display:none}
body.rl-r3 .rl-hero--b .rl-hero__in::after{height:1px;background:var(--line)}

/* 2. Section labels: a short ochre line and quiet small text (the Living Line once per section), not a bold coloured field label. */
body.rl-r3 :is(.rl-sec__k,.rl-hh__k,.rl-hero__k){font-weight:500;letter-spacing:.16em;color:var(--sub)}
body.rl-r3 :is(.rl-sec__k,.rl-hh__k,.rl-hero__k) svg{display:none}
body.rl-r3 :is(.rl-sec__k,.rl-hh__k,.rl-hero__k)::before{content:"";width:28px;height:1px;background:var(--ochre);flex:none}
body.rl-r3 .rl-sec__h p{font-size:15px}

/* 3. Lists read as an index: fine top rules instead of thick navy bars, no arrow at the end of each row, titles in a lighter weight. The whole row stays the link. */
body.rl-r3 :is(.rl-cg,.rl-cd,.rl-rt,.rl-ch,.rl-rl,.rl-hf,.rl-qa,.rl-cb,.rl-sd__n,.rl-next .rl-nx,.rl-ae section:first-child){border-top-width:1px}
body.rl-r3 .rl-lt__h{border-bottom-width:1px}
body.rl-r3 :is(.rl-qa,.rl-ae section:first-child)::before{display:none}
body.rl-r3 :is(.rl-rt li a,.rl-ch a,.rl-hubmain .rl-nx a,.rl-ae .rl-nx a)::after{content:none}
body.rl-r3 :is(.rl-rt li a,.rl-ch a,.rl-hubmain .rl-nx a,.rl-ae .rl-nx a){grid-template-columns:1fr}
body.rl-r3 :is(.rl-cd,.rl-rl) a>i{display:none}
body.rl-r3 :is(.rl-cd,.rl-rl) a{grid-template-columns:1fr}
body.rl-r3 .rl-rl a{grid-template-columns:44px 1fr}
body.rl-r3 .rl-cd b{font-family:var(--f-ed);font-weight:600;font-size:18px;letter-spacing:.04em}
body.rl-r3 .rl-rl b{font-family:var(--f-ed);font-weight:600;letter-spacing:.04em}
body.rl-r3 .rl-rt h3{font-family:var(--f-ed);font-weight:600;letter-spacing:.04em}
body.rl-r3 .rl-rt li b,body.rl-r3 .rl-ch b{font-weight:500}
body.rl-r3 .rl-rt li:first-child b{font-weight:600}
body.rl-r3 :is(.rl-st b,.rl-up__phrase,.rl-fe b,.rl-hubmain .rl-nx b){font-weight:600;letter-spacing:.02em}
body.rl-r3 .rl-st a:first-child b,body.rl-r3 .rl-fe b{font-family:var(--f-ed);letter-spacing:.04em}
body.rl-r3 .rl-tr__pts li{font-weight:500}
body.rl-r3 :is(.rl-rt li a,.rl-ch a,.rl-cd a,.rl-st a,.rl-rl a,.rl-hubmain .rl-nx a):hover b{text-decoration:underline;text-decoration-color:var(--ochre);text-underline-offset:5px;text-decoration-thickness:1px}
body.rl-r3 .rl-eye{border-color:transparent}
body.rl-r3 :is(.rl-rt summary,.rl-hub .rl-mr>summary,.rl-toc summary){font-weight:600}

/* 4. "まず考えること": the number in the serif, the point in a lighter weight. */
body.rl-r3 .rl-hf li::before{font-family:var(--f-ed);font-weight:600;color:var(--ochre)}
body.rl-r3 .rl-hf b{font-weight:600}

/* 5. Fields ("何を見直しますか"): no boxes. A fine navy line over each field, a large serif name, the line icon kept. */
body.rl-r3 .rl-cg{border-top:0;column-gap:20px}
body.rl-r3 .rl-cg__c,body.rl-r3 .rl-cg__c:nth-child(odd),body.rl-r3 .rl-cg__c:nth-child(even){padding:16px 0 12px;border:0;border-top:1px solid var(--navy)}
body.rl-r3 .rl-cg__name{font-size:20px}

/* 6. Hub first view: the branches read as numbered reader questions with "N本の記事へ" (R3), each a link of at least 64px. */
body.rl-r3 .rl-hh__lead{font-weight:500;font-size:17px}
body.rl-r3 .rl-hh__br{counter-reset:rlq;border-top:1px solid var(--line)}
body.rl-r3 .rl-hh__br a{grid-template-columns:30px 1fr;grid-template-areas:"n q" "n go";gap:2px 8px;align-items:start;padding:14px 0}
body.rl-r3 .rl-hh__br a::before{counter-increment:rlq;content:counter(rlq,decimal-leading-zero);grid-area:n;font-family:var(--f-ed);font-weight:600;font-size:15px;line-height:1.75;color:var(--ochre)}
body.rl-r3 .rl-hh__br a>span:first-child{grid-area:q}
body.rl-r3 .rl-hh__br b{font-family:var(--f-ed);font-weight:600;font-size:18px;line-height:1.55;letter-spacing:.04em}
body.rl-r3 .rl-hh__br .rl-n{grid-area:go;justify-self:start;font-family:var(--f-sans);font-weight:500;font-size:13px;color:var(--navy)}
body.rl-r3 .rl-hh__br .rl-n::after{content:"の記事へ ›";color:var(--ochre)}
body.rl-r3 .rl-hh__br i{display:none}
body.rl-r3 .rl-hh__br a:hover b{text-decoration:underline;text-decoration-color:var(--ochre);text-underline-offset:5px;text-decoration-thickness:1px}

/* 7. TOP hero on phones (R3): the heading has the full width, the four fields sit right under the main line (rl_top_editorial adds them; 2 × 2, 48px rows). */
.rl-hero__fields{display:none}
@media (max-width:767px){
  body.rl-r3 .rl-hero__fields{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;margin:14px 0 4px;border-top:1px solid var(--sand-line)}
  body.rl-r3 .rl-hero__fields a{display:flex;align-items:center;gap:8px;min-height:48px;border-bottom:1px solid var(--sand-line);font-family:var(--f-ed);font-weight:600;font-size:16px;letter-spacing:.04em;color:var(--ink)}
  body.rl-r3 .rl-hero__fields .rl-ic{width:18px;height:18px;color:var(--ochre)}
  body.rl-r3 .rl-hero__cta:has(+ .rl-hero__fields) .rl-lnk{display:none}
  body.rl-r3 .rl-hero__lead{margin-bottom:12px}
}
@media (max-width:479px){body.rl-r3 .rl-hero__ill{display:none}body.rl-r3 .rl-hero{padding-bottom:22px}}

/* 8. Articles: a serif title and serif section headings without bars, a calmer body, the boxes kept where the reader decides. */
body.rl-r3.rl-article .entry-title{font-family:var(--f-ed);font-weight:600;font-size:25px;line-height:1.55;letter-spacing:.03em}
body.rl-r3.rl-article .article .entry-content h2{font-family:var(--f-ed);font-weight:600;font-size:23px;line-height:1.6;letter-spacing:.03em;margin:60px 0 20px;padding:0;border-top:0}
body.rl-r3.rl-article .article .entry-content h2::before{display:none}
body.rl-r3.rl-article .article .entry-content h3{font-family:var(--f-ed);font-weight:600;letter-spacing:.03em;padding-left:0}
body.rl-r3.rl-article .article .entry-content h3::before{content:none!important;display:none!important}
body.rl-r3.rl-article .eye-catch img{border:0}
body.rl-r3 .rl-qa .rl-qa__p{font-weight:600}
body.rl-r3 .rl-toc li a::before{font-family:var(--f-ed);font-weight:600}
body.rl-r3.rl-bridge .entry-content .rl-b--concl{border-top:1px solid var(--navy)!important}
body.rl-r3.rl-bridge .entry-content .rl-b--concl::before{display:none}
body.rl-r3.rl-bridge .entry-content .rl-b--concl>:first-child,body.rl-r3.rl-bridge .entry-content .rl-b--concl>:first-child strong{font-weight:600!important}
body.rl-r3.rl-bridge .entry-content .rl-b--memo{border-left-width:2px}
body.rl-r3.rl-bridge .entry-content .rl-b--memo::before{font-weight:600}
body.rl-r3.rl-bridge .entry-content .rl-b--tb th,body.rl-r3.rl-bridge .entry-content .rl-b--tb thead td,body.rl-r3.rl-bridge .entry-content .rl-b--tb table:not(:has(th)) tr:first-child td,body.rl-r3.rl-bridge .entry-content table.rl-b--tb:not(:has(th)) tr:first-child td{border-top-width:1px!important}
body.rl-r3.rl-bridge .entry-content .rl-b--talk:not(.rl-b--talk-ed) :is(b,strong){font-weight:600!important}
/* the affiliate button keeps its colours, text and link; it only stops growing wider than 380px (R3) */
body.rl-r3.rl-bridge .entry-content .rl-b--cta:not(.rl-b--cta-list) a[style*="background"]{max-width:380px!important;min-height:52px}
body.rl-r3 .rl-menu a:not(.rl-btn){font-weight:500}

/* 9. 0.9.1 (PHASE 14 QA) — the list pages (category / search) read like the rest of R3: a serif title on a fine rule, rows as an index without arrows. */
body.rl-r3.rl-archive .rl-arh{border-bottom-width:1px}
body.rl-r3.rl-archive .rl-arh::after{display:none}
body.rl-r3.rl-archive .rl-arh .archive-title{font-family:var(--f-ed);font-weight:600;letter-spacing:.04em}
body.rl-r3.rl-archive .rl-arh__hub .rl-k{font-weight:500;letter-spacing:.14em}
body.rl-r3.rl-archive .rl-arh__hub b{font-family:var(--f-ed);font-weight:600;letter-spacing:.04em}
body.rl-r3.rl-archive .rl-arh__hub i{display:none}
body.rl-r3.rl-archive .rl-arh__hub{grid-template-columns:1fr}
body.rl-r3.rl-archive .rl-arow::after{content:none}
body.rl-r3.rl-archive .rl-arow{grid-template-columns:minmax(0,1fr)}
body.rl-r3.rl-archive .rl-arow .rl-arow__t{font-weight:500}
body.rl-r3.rl-archive .rl-arow:hover .rl-arow__t{text-decoration-color:var(--ochre)}
/* Safari does not break Japanese by phrase (word-break:auto-phrase): keep the last one or two characters of a heading from falling alone onto a new line. */
body.rl-r3 :is(.rl-hh__title,.rl-sec__h h2,.rl-br__h h2,.rl-rt h3,.rl-rt h3>span,.rl-tr h2,.rl-arh .archive-title),body.rl-r3.rl-article .entry-title,body.rl-r3.rl-article .article .entry-content :is(h2,h3){text-wrap:balance}
body.rl-r3 :is(.rl-ft__close,.rl-fe b,.rl-cg__name){text-wrap:pretty}

/* 10. 0.9.3 (Site UX PHASE C) — the pages that kept the sans heading under R3: the not-found page and the fixed pages (about, policies) get the serif title and section
   headings; their body text, lists and tables are not changed. Section labels wrap in balanced lines, and on a phone the TOP hero label keeps its last characters
   on the line (it left "ア" alone at 375px with the wide R3 letter space). */
body.rl-r3.rl-404 .rl-e404 .rl-e404__t{font-family:var(--f-ed);font-weight:600;letter-spacing:.04em;font-feature-settings:"palt" 1;text-wrap:balance}
body.rl-r3.rl-page .entry-title{font-family:var(--f-ed);font-weight:600;letter-spacing:.04em;text-wrap:balance}
body.rl-r3.rl-page .article .entry-content :is(h2,h3){font-family:var(--f-ed);font-weight:600;letter-spacing:.03em;text-wrap:balance}
body.rl-r3 :is(.rl-sec__k,.rl-hh__k,.rl-hero__k){text-wrap:balance}
body.rl-r3.rl-archive .rl-arh__t2{font-family:var(--f-ed);font-weight:600;letter-spacing:.04em}
body.rl-r3 :is(.rl-cg .rl-go span,.rl-cg__more .rl-go span,.rl-cg__q){text-wrap:balance}     /* the TOP field links in two columns on a phone left "い" alone */
@media (max-width:479px){body.rl-r3 .rl-hero__k{letter-spacing:.08em}}
@media (max-width:359px){body.rl-r3 .rl-hero__fields a{font-size:15px;letter-spacing:0}}
body.rl-r3 .rl-cb__meta .rl-go span{white-space:nowrap}
/* The list rows of 0.9.2 (rl-archive--v8) put the kind and date in a 132px column and the title beside it from 768px. The 0.9.1 R3 rule above made every row one
   column, so the title fell into an extra column and the kind / date were squeezed under it (overlapping at 768 and 1440). R3 keeps the two columns, without the arrow column. */
@media (min-width:768px){body.rl-r3.rl-archive.rl-archive--v8 .rl-arow{grid-template-columns:132px minmax(0,1fr)}}

/* local review only: the note on a block that waits for a decision (never printed on the public site) */
body.rl-r3 .rl-pend{margin:0 0 12px;padding:8px 12px;border-left:2px solid var(--ochre);background:var(--sand);font-size:13px;line-height:1.7;color:var(--sub)}

@media (min-width:768px){
  body.rl-r3 .rl-hero .rl-hero__title{font-size:40px;line-height:1.42}
  body.rl-r3 .rl-hh .rl-hh__title{font-size:40px}
  body.rl-r3 :is(.rl-sec__h h2,.rl-br__h h2){font-size:28px}
  body.rl-r3 .rl-hh__lead{font-size:19px}
  body.rl-r3 .rl-hh__br{border-top:0}
  body.rl-r3 .rl-hh__br a{border-top:1px solid var(--navy)}
  body.rl-r3 .rl-cg__name{font-size:22px}
  body.rl-r3.rl-article .entry-title{font-size:32px}
  body.rl-r3.rl-article .article .entry-content h2{font-size:27px;margin-top:72px}
}
@media (min-width:1024px){
  body.rl-r3 .rl-hero .rl-hero__title,body.rl-r3 .rl-hero--b .rl-hero__title{font-size:44px}
  body.rl-r3 .rl-hh .rl-hh__title{font-size:46px}
  body.rl-r3 .rl-br__h h2{font-size:30px}
  body.rl-r3.rl-article .entry-title{font-size:34px}
}
@media (min-width:1280px){body.rl-r3 .rl-hero .rl-hero__title,body.rl-r3 .rl-hero--b .rl-hero__title{font-size:50px}}

/* 0.9.9 — contrast (OWNER 2026-11-01, PHASE 2 E). Ochre #B9822B as small text was 3.12:1 on the cream page (2.84:1 on sand), under WCAG AA 4.5:1.
   Text set in ochre now uses the darker ochre that labels already use (--ochre-t #8A5A00: 5.55:1 on cream, 5.05:1 on sand, 5.93:1 on white).
   Arrows, icons and lines keep the brand ochre (they are marks, not text). */
body.rl-r3 .rl-hh__br a::before,body.rl-r3 .rl-hh__br .rl-n::after,body.rl-r3 .rl-hf li::before,body.rl-r3 .relife-steps li::before{color:var(--ochre-t)}