/* guide article readability patch (2026-10-09)
   basis: research/deep_dive/findings/2026-10-09_ブログの読みやすさ.md
   load after base.css/site.css and put class="sheet guide" on the article sheet */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.guide{max-width:760px}
.guide article{font-size:16px;line-height:1.8;letter-spacing:.02em}
.guide article p,.guide article ul,.guide article ol,.guide article ol.steps>li,.guide .say,.guide .toc,.guide .sym,.guide .cause,.guide .plain-links{font-size:16px}
.guide article p{margin:0 0 1.2em}
.guide article li{margin:4px 0}
.guide h2{font-size:22px;line-height:1.4;margin:56px 0 16px;padding-bottom:4px;scroll-margin-top:12px}
.guide h2 .num{flex:none}
.guide .note,.guide .crumb,.guide .who,.guide .t th{font-size:14px}
.guide .crumb{margin-bottom:10px}
.guide .t td{font-size:15px;padding:9px 8px}
.guide .t th{padding:8px}
.guide .t td.r,.guide .t th:last-child{white-space:nowrap}
.guide .say{padding:8px 14px}
.guide article p a,.guide article li a,.guide .say a{text-decoration-thickness:2px;text-underline-offset:.2em}
.guide .work{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
.guide .calc .row{gap:10px}
.guide .calc .row span:last-child{white-space:nowrap}
/* table that scrolls sideways on phones */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:8px 0}
.tw .t{min-width:520px;margin:0}
.tw .t td:first-child,.tw .t th:first-child{position:sticky;left:0;background:var(--paper)}
.tw .t tr.hot td:first-child{background:var(--hl)}
/* toc: big tap targets */
.guide .toc .sym{gap:0 18px}
.guide .toc .sym a{display:block;padding:9px 4px;min-height:44px;text-decoration:none;border-bottom:1px dashed var(--rule)}
.guide .toc .sym a:hover{background:var(--hl)}
.backtoc{text-align:right;font-size:13px;margin:22px 0 -30px}
.backtoc a{color:var(--sub)}
/* answer-first box right under the title */
.answer{border:2px solid var(--ink);background:#fff8d6;padding:12px 18px;margin:18px 0}
.answer b.h{display:block;font-size:13px;letter-spacing:.15em;color:var(--red);margin-bottom:4px}
.answer ol{margin:0;padding-left:1.4em}
.answer li{margin:4px 0;font-weight:700}
.answer li span{font-weight:400}
.point{padding:8px 14px;margin:14px 0;border-left:4px solid #d6b800;background:rgba(255,240,160,.35)}
@media(max-width:560px){
  .guide article{line-height:1.7}
  .guide h2{font-size:20px;margin-top:44px}
  .guide .line{gap:8px}
  .guide .line>img,.guide .line.big>img{width:48px;height:48px}
  .guide .line>div{max-width:none;flex:1;min-width:0}
  .guide .line.big .say{font-size:17px}
  .backtoc{margin-bottom:-24px}
  .guide .work{grid-template-columns:1fr}
  /* "now" table: stack each row on phones instead of scrolling */
  .now .tw .t{min-width:0}
  .now .t tr:first-child{display:none}
  .now .t tr{display:grid;grid-template-columns:1fr auto;border-bottom:1px solid var(--rule)}
  .now .t td{border:none;padding:6px 4px 2px}
  .now .t td:first-child{position:static;font-weight:700;background:none}
  .now .t td:nth-child(2){grid-column:1/-1;grid-row:2;padding:0 4px 8px}
  .now .t tr.hot{background:var(--hl)}
  .now h2{flex-wrap:wrap}
  .now .upd{margin-left:0}
}
/* older guides: number sits outside the link */
.guide .toc .sym li{display:flex;align-items:center;margin:0}
.guide .toc .sym li>.no{flex:none}
.guide .toc .sym li>a{flex:1}
/* hero with the two face photos, narrower sheet */
@media(min-width:561px) and (max-width:1099px){
.guide .hero-top{grid-template-columns:1fr 210px}
.guide .hero-art{height:210px}
.guide .hero-art .p1{width:170px;height:170px}
.guide .hero-art .p2{width:86px;height:86px;bottom:18px}
}
@media(max-width:560px){.guide .hero-top{grid-template-columns:1fr}.guide .hero-art{display:none}}
@media(min-width:1100px){.guide .hero-top{grid-template-columns:1fr}.guide .hero-art{display:none}}
.guide .h-long{white-space:normal!important;font-size:32px!important;line-height:1.3!important}
@media(max-width:700px){.guide .h-long{font-size:26px!important}}
.guide h1{text-wrap:balance}
/* motion: only the excited (mosaic) Bokky shakes once as it scrolls into view; everything else stays still */
.mo .guide .line.k.big.in>img{animation:shake .5s .15s 2}
.mo .guide .line.k.big.in .say{animation:pop .35s .1s both}
@keyframes shake{0%,100%{transform:scaleX(-1) translateX(0)}25%{transform:scaleX(-1) translateX(-4px) rotate(-3deg)}75%{transform:scaleX(-1) translateX(4px) rotate(3deg)}}
@keyframes pop{0%{transform:scale(.92)}60%{transform:scale(1.04)}100%{transform:scale(1)}}
/* phones: boxes become bands across the paper, text lines up with body text */
@media(max-width:560px){
.sheet.guide{max-width:none}
.guide .answer,.guide .now,.guide .toc,.guide .calc{border-left:0;border-right:0;border-top-width:2px;border-bottom-width:2px;margin:24px -18px;padding:14px 18px}
.guide .now{padding-bottom:10px}
.guide .now h2{margin-top:0}
.guide .answer ol{padding-left:1.5em}
.guide .work{border-width:1.5px;padding:12px;margin:24px 0}
.guide .tw{margin:8px -18px;padding:0 18px}
.guide .line{margin:16px 0}
.guide .line.big>img{width:56px;height:56px}
.guide .say{padding:10px 14px}
.guide article li{margin:6px 0}
}
@media(max-width:560px){.guide .h-long{font-size:23px!important}}
/* key points: yellow highlighter on bold text */
.guide article p b,.guide article li b,.guide .say b{background:linear-gradient(transparent 58%,var(--hl) 58%);padding:0 1px}
/* big numbers */
.stat{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));border:2px solid var(--ink);margin:14px 0 18px;background:rgba(255,255,255,.4)}
.stat>div{padding:10px 14px;border-right:1px solid var(--ink)}
.stat>div:last-child{border-right:none}
.stat .n{font-family:"BIZ UDGothic",monospace;font-size:40px;font-weight:700;line-height:1.1;color:var(--red)}
.stat .u{font-size:16px;font-weight:700;margin-left:3px}
.stat .l{display:block;font-size:14px;color:var(--sub);margin-top:2px}
@media(max-width:560px){.stat>div{border-right:none;border-bottom:1px solid var(--ink)}.stat>div:last-child{border-bottom:none}.stat .n{font-size:34px}}
/* wide screens: text column + sticky sidebar */
.side{display:none}
@media(min-width:1100px){
  .sheet.guide{max-width:1180px;padding-left:44px;padding-right:44px}
  .gwrap{display:grid;grid-template-columns:minmax(0,700px) 300px;gap:52px;justify-content:center}
  .side{display:block;position:sticky;top:18px;align-self:start;margin-top:40px}
  .side-card{border:2px solid var(--ink);background:var(--paper);box-shadow:3px 4px 0 rgba(0,0,0,.15)}
  .side-card img{width:100%;height:auto;display:block}
  .side-card p{font-size:12px;color:var(--sub);margin:4px 8px;text-align:right}
  .side-toc{border:1.5px solid var(--ink);background:var(--paper);margin-top:18px;padding:10px 14px;font-size:14px;line-height:1.5}
  .side-toc b{display:block;font-size:13px;letter-spacing:.1em;color:var(--red);margin-bottom:4px}
  .side-toc ol{margin:0;padding-left:1.4em}
  .side-toc li{margin:0;border-bottom:1px dashed var(--rule)}
  .side-toc li a{display:block;padding:6px 0;color:var(--ink);text-decoration:none}
  .side-toc li a:hover{background:var(--hl)}
  .side-toc .side-top{display:block;text-align:right;font-size:12px;color:var(--sub);margin-top:8px}
  .guide article>.toc,.guide .backtoc{display:none}
}
@media(min-width:1500px){
  .sheet.guide{max-width:1360px}
  .gwrap{grid-template-columns:minmax(0,780px) 340px;gap:64px}
  .guide article,.guide article p,.guide article ul,.guide article ol,.guide article ol.steps>li,.guide .say,.guide .cause,.guide .plain-links{font-size:17px}
  .guide h2{font-size:24px}
  .guide .h-long{font-size:38px!important}
}
.guide .calc .row:last-child span:last-child{color:var(--red);font-size:26px;font-family:"BIZ UDGothic",monospace}
/* one big takeaway line under each heading (skim layer) */
.guide .key{font-size:21px;font-weight:800;line-height:1.55;margin:6px 0 16px;padding:10px 16px;border-left:6px solid var(--red);background:#fff8d6;letter-spacing:.01em}
.guide .cause{font-size:18px;font-weight:700}
.guide article p b,.guide article li b{font-size:1.08em}
@media(min-width:1500px){.guide .key{font-size:23px}}
@media(max-width:560px){.guide .key{font-size:19px;padding:8px 12px}.guide .cause{font-size:17px}}
/* collapsed details + more air between sections */
.guide details.more{margin:10px 0 6px;font-size:15px}
.guide details.more>summary{cursor:pointer;display:inline-block;color:var(--sub);font-size:14px;border:1px solid var(--rule);padding:3px 12px;background:rgba(255,255,255,.5);list-style:none}
.guide details.more>summary::-webkit-details-marker{display:none}
.guide details.more>summary::before{content:"＋ ";color:var(--red)}
.guide details.more[open]>summary::before{content:"－ "}
.guide details.more[open]>*:not(summary){margin-top:8px}
.guide details.more ul,.guide details.more p{font-size:15px}
.guide details.src{margin-top:48px}
.guide article{line-height:1.9}
.guide h2{margin-top:72px}
.guide article ul>li{margin:8px 0}
@media(max-width:560px){.guide article{line-height:1.8}.guide h2{margin-top:56px}}
/* wide screens: paper spans almost the whole screen (社長 2026-10-10「左右が空白」) */
@media(min-width:1100px){
  .sheet.guide{max-width:none;width:auto;margin-left:3vw;margin-right:3vw}
  .gwrap{grid-template-columns:minmax(0,760px) 340px;gap:56px}
}
@media(min-width:1500px){
  .gwrap{grid-template-columns:minmax(0,800px) 380px;gap:72px}
}
@media(min-width:1100px){.gnav,.fnav,footer{max-width:none;margin-left:3vw;margin-right:3vw}}
/* wide screens: scale text and columns with the screen (about 42 chars per line) */
@media(min-width:1100px){
  .gwrap{grid-template-columns:minmax(0,clamp(700px,40vw,1040px)) clamp(300px,19vw,480px);gap:clamp(48px,4vw,96px)}
  .guide article{font-size:clamp(16px,.95vw,22px)}
  .guide article p,.guide article ul,.guide article ol,.guide article ol.steps>li,.guide .say,.guide .cause,.guide .plain-links,.guide details.more ul,.guide details.more p{font-size:1em}
  .guide .key{font-size:1.3em}
  .guide h2{font-size:1.4em}
  .guide .h-long{font-size:2.2em!important}
  .guide .hero .sub{font-size:1.15em}
  .guide .note,.guide .crumb,.guide .who,.guide .t th,.guide details.more>summary{font-size:.85em}
  .guide .t td{font-size:.92em}
  .guide .stat .n{font-size:2.5em}
  .guide .line>img{width:4em;height:4em}
  .guide .line.big>img{width:7em;height:7em}
  .guide .line.big .say{font-size:1.2em}
  .side-toc{font-size:clamp(14px,.8vw,18px)}
}
/* body column sits in the exact center of the screen; sidebar hangs to its right (社長 10/10「本文は真ん中」) */
@media(min-width:1700px){
  .gwrap{grid-template-columns:minmax(0,1fr) minmax(0,clamp(700px,40vw,1040px)) minmax(0,1fr);gap:0}
  .gwrap>article{grid-column:2}
  .gwrap>.side{grid-column:3;justify-self:start;width:clamp(300px,19vw,480px);margin-left:clamp(48px,4vw,96px)}
}
@media(min-width:1350px){
  .gwrap{grid-template-columns:minmax(0,1fr) minmax(0,clamp(700px,40vw,1040px)) minmax(0,1fr);gap:0}
  .gwrap>article{grid-column:2}
  .gwrap>.side{grid-column:3;justify-self:start;margin-left:clamp(28px,3vw,96px);width:min(calc(100% - clamp(28px,3vw,96px)),480px)}
}
/* left column: sticky table of contents; right: art + other guides (社長 10/10 案1) */
.side-l{display:none}
.side-more{border:1.5px solid var(--ink);background:var(--paper);margin-top:18px;padding:10px 14px;font-size:clamp(14px,.8vw,18px);line-height:1.5}
.side-more b{display:block;font-size:.9em;letter-spacing:.1em;color:var(--red);margin-bottom:4px}
.side-more ul{list-style:none;margin:0;padding:0}
.side-more li{border-bottom:1px dashed var(--rule)}
.side-more li a{display:block;padding:7px 0;color:var(--ink);text-decoration:none}
.side-more li a:hover{background:var(--hl)}
@media(min-width:1100px) and (max-width:1349px){.guide article>.toc{display:block}.guide .backtoc{display:block}}
@media(min-width:1350px){
  .gwrap>article,.gwrap>.side,.gwrap>.side-l{grid-row:1}
  .gwrap>.side-l{display:block;grid-column:1;justify-self:end;position:sticky;top:18px;align-self:start;margin-top:40px;margin-right:clamp(28px,3vw,96px);width:min(calc(100% - clamp(28px,3vw,96px)),360px)}
  .side-l .side-toc{margin-top:0}
}