/* スラ読オン読 site pages (top, articles, policies).
   Concept: a page of a reference book being marked up with a red pen.
   Red = pen marks only. Pale blue = ruled lines and dividers only. One marker highlight per page at most. */
:root{
  --paper:#f3f5f2; --ink:#1c2430; --ink-2:#5a6472; --pencil:#d22b2b; --rule:#c9d6e6; --marker:#f3e26b;
  --mask-slash:url("/assets/pen-slash.svg"); --mask-slash-2:url("/assets/pen-slash-2.svg");
  --ja:"Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic",Meiryo,system-ui,sans-serif;
  --en:"Literata",Georgia,"Times New Roman",serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#161b22; --ink:#e6e9ee; --ink-2:#a3adba; --pencil:#ff6a5f; --rule:#2b3644; --marker:#5c5216;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#161b22; --ink:#e6e9ee; --ink-2:#a3adba; --pencil:#ff6a5f; --rule:#2b3644; --marker:#5c5216;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.9 var(--ja);letter-spacing:.01em;font-kerning:normal}
a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:var(--ink-2)}
a:hover{text-decoration-thickness:2px;text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
img,svg{max-width:100%}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.wrap{width:100%;max-width:1120px;margin:0 auto;padding-left:16px;padding-right:16px}
@media (min-width:720px){.wrap{padding-left:40px;padding-right:40px}}

/* Header: logo, two quiet links and one button, then a ruled line. */
.site-head{border-bottom:1px solid var(--rule)}
.head-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 24px;padding-top:14px;padding-bottom:14px}
.logo{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:19px;letter-spacing:.02em;text-decoration:none;color:var(--ink)}
.logo-mark{width:12px;height:28px;flex:none}
.logo-mark g{stroke:var(--pencil)}
.site-nav{display:flex;flex-wrap:wrap;align-items:center;gap:4px 20px;font-size:14px}
.site-nav a{text-decoration:none;color:var(--ink-2)}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--rule);text-decoration-thickness:2px}
.site-nav .cta{color:var(--paper);background:var(--ink);padding:4px 14px;border-radius:2px;font-weight:700}
.site-nav .cta:hover{color:var(--paper);text-decoration:none;background:var(--ink-2)}

/* Text column */
main{padding-top:28px;padding-bottom:64px}
article,.home .sec{max-width:42em}
h1,h2,h3{letter-spacing:-.01em;font-weight:700;line-height:1.45}
h1{font-size:clamp(28px,5.6vw,40px);margin:.15em 0 .55em}
h2{font-size:clamp(21px,3.4vw,25px);margin:2.4em 0 .7em;padding-bottom:.3em;border-bottom:1px solid var(--rule)}
h3{font-size:18px;margin:1.9em 0 .4em}
p,li{max-width:38em}
p{margin:0 0 1em}
ul,ol{padding-left:1.4em}
li+li{margin-top:.2em}
strong{font-weight:700}
em,i{font-style:normal}
:lang(en) em,em:lang(en),article em{font-family:var(--en)}
.lead{font-size:17px;color:var(--ink);margin-bottom:1.6em}
.small,.cite{font-size:13px;color:var(--ink-2);line-height:1.8}

/* Breadcrumb and byline: one small line each; items separated by space and a short ruled tick. */
.crumbs{font-size:13px;color:var(--ink-2);margin:0 0 4px}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center}
.crumbs li{max-width:none;margin:0}
.crumbs li+li::before,.meta span+span::before{content:"";display:inline-block;width:1px;height:.9em;background:var(--rule);margin:0 .75em;vertical-align:-.1em}
.crumbs a{color:var(--ink-2)}
.meta{font-size:13px;color:var(--ink-2);margin:0 0 .4em}
.meta a{color:var(--ink-2)}

/* Article table of contents: quiet, ruled. */
.toc{margin:2em 0;padding:.6em 0 .4em;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);font-size:15px}
.toc strong{display:block;font-size:14px;color:var(--ink-2)}
.toc ol{margin:.3em 0 .4em;padding-left:1.6em}
.toc a{text-decoration:none}
.toc a:hover{text-decoration:underline}

/* Example sentences: a ruled band; slashes are red pen strokes (mask SVG); the "/" text stays for copy and no-CSS. */
.ex{font:400 clamp(19px,2.6vw,22px)/2 var(--en);letter-spacing:0;margin:1.4em 0;padding:.55em 0 .65em;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);max-width:none}
.ex .s{color:var(--pencil);font-weight:700;margin:0 .25em}
@supports ((mask-image:url("x.svg")) or (-webkit-mask-image:url("x.svg"))){
  .ex .s,.hero-ja .s{display:inline-block;width:.5em;height:1.2em;margin:0 .22em 0 .12em;vertical-align:-.28em;color:transparent;background:var(--pencil);overflow:hidden;
    -webkit-mask:var(--mask-slash) center/contain no-repeat;mask:var(--mask-slash) center/contain no-repeat}
  .ex .s:nth-of-type(even){-webkit-mask-image:var(--mask-slash-2);mask-image:var(--mask-slash-2)}
}
.ex .ja{display:block;font:400 14px/1.7 var(--ja);color:var(--ink-2);margin-top:.3em;letter-spacing:.02em}

/* 結論 box: no frame; the summary line is underlined with a highlighter. Other notes are margin notes. */
div.note{margin:1.8em 0;padding:0}
div.note > p:first-child strong{text-decoration:underline;text-decoration-color:var(--marker);text-decoration-thickness:.5em;text-underline-offset:-.28em;text-decoration-skip-ink:none}
p.note{font-size:15px;color:var(--ink);padding-left:14px;border-left:2px solid var(--rule);margin:1.6em 0}
.cite{margin-top:2em}

table{border-collapse:collapse;width:100%;font-size:14px;margin:1.4em 0;line-height:1.7}
th,td{border-bottom:1px solid var(--rule);padding:8px 10px 8px 0;text-align:left;vertical-align:top}
thead th{border-bottom:2px solid var(--ink);font-weight:700}
.table-wrap{max-width:100%}
article table{display:block;overflow-x:auto}
@media (min-width:640px){article table{display:table}}

/* Buttons: square, ink. No arrows. */
.btn{display:inline-block;font-weight:700;text-decoration:none;border-radius:2px;padding:11px 22px;background:var(--ink);color:var(--paper);line-height:1.5}
.btn:hover{background:var(--ink-2);color:var(--paper);text-decoration:none}

/* Contents list (目次): title ……… reading time */
.contents{list-style:none;padding:0;margin:.6em 0 1.2em;max-width:42em}
.contents li{max-width:none;margin:0;padding:.55em 0;border-bottom:1px solid var(--rule)}
.contents li:first-child{border-top:1px solid var(--rule)}
.contents a{display:flex;align-items:last baseline;gap:.6em;text-decoration:none;font-weight:700}
.contents a:hover .c-t{text-decoration:underline;text-underline-offset:.22em}
.c-t{flex:0 1 auto}
.c-l{flex:1 1 2em;min-width:2em;border-bottom:2px dotted var(--ink-2);opacity:.6;transform:translateY(-.3em)}
.c-m{flex:none;font-weight:400;font-size:14px;color:var(--ink-2);font-feature-settings:"tnum"}
.contents p{font-size:14px;color:var(--ink-2);margin:.25em 0 0;max-width:36em}

/* Next to read + share */
.next-read{margin:3.2em 0 1em}
.next-read h2{margin-top:0}
.try-app{margin:1.4em 0 0}
.share{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px;font-size:14px;color:var(--ink-2);margin:2em 0}
.share a{color:var(--ink);font-weight:700}

/* Ad slots: empty until AdSense is enabled in /assets/ads.js. Never used on /app/. */
.ad-slot{margin:32px 0;min-height:0}
.ad-slot:empty{display:none}
.ad-label{font-size:11px;color:var(--ink-2);margin-bottom:2px}

main a{overflow-wrap:anywhere}

/* Footer = 奥付 (colophon) */
.site-foot{border-top:1px solid var(--rule);padding:40px 0 36px;font-size:13px;color:var(--ink-2)}
.colophon{max-width:340px;border-top:2px solid var(--ink);border-bottom:1px solid var(--ink);padding:.9em 0 .7em;margin-bottom:1.6em;color:var(--ink)}
.colophon-title{font-size:18px;font-weight:700;margin:0 0 .5em;letter-spacing:.06em}
.colophon dl{margin:0;font-size:13px}
.colophon dl div{display:grid;grid-template-columns:4.5em 1fr;gap:0 .8em;padding:.1em 0}
.colophon dt{color:var(--ink-2);text-align-last:justify}
.colophon dd{margin:0}
.site-foot nav{display:flex;flex-wrap:wrap;gap:2px 18px;margin-bottom:8px}
.site-foot a{color:var(--ink-2)}
.site-foot p{margin:0;max-width:none}

/* ---------- Top page ---------- */
.home{padding-top:0}
.hero{padding:clamp(36px,7vw,88px) 0 24px;max-width:none}
.hero-en{font:400 clamp(25px,3.7vw,42px)/1.6 var(--en);letter-spacing:-.005em;margin:0 0 .5em;max-width:none;color:var(--ink)}
.hero-en .chunk{display:block}
.hero-slash{display:inline-block;width:.5em;height:1.18em;vertical-align:-.24em;margin-left:.1em;overflow:visible}
.hero-slash g{stroke:var(--pencil)}
.hero-slash path{stroke-width:3.3}
.hero-slash path+path{stroke-width:5}
.hero-slash path{stroke-dasharray:1;stroke-dashoffset:1;animation:pen .26s cubic-bezier(.5,0,.3,1) forwards}
.hero-slash path+path{animation-duration:.16s}
.hero-slash.d1 path{animation-delay:.45s}
.hero-slash.d2 path{animation-delay:.7s}
@keyframes pen{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion: reduce){
  .hero-slash path{animation:none;stroke-dashoffset:0}
}
.hero-ja{font-size:14px;color:var(--ink-2);margin:0 0 .2em;max-width:none}
.demo-cap{font-size:12px;color:var(--ink-2);margin:0 0 clamp(28px,5vw,52px)}
.hero h1{font-size:clamp(28px,4.4vw,44px);margin:0 0 .5em;max-width:none}
.hero .lead{max-width:36em}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin:1.6em 0 0}
.text-link{font-weight:700}

.home .sec{margin-top:clamp(48px,7vw,80px)}
.home .sec h2{margin-top:0}

/* 使い方: ①–④ with a small line drawing */
@counter-style circled{system:fixed;symbols:"①" "②" "③" "④" "⑤" "⑥";suffix:""}
.steps{list-style:none;counter-reset:st;padding:0;margin:0;max-width:52em}
.home .sec:has(.steps){max-width:52em}
.steps li{counter-increment:st;display:grid;grid-template-columns:2.2em 1fr;gap:.2em .8em;padding:1em 0;border-bottom:1px solid var(--rule);max-width:none;margin:0}
.steps li:first-child{border-top:1px solid var(--rule)}
.steps li::before{content:counter(st,circled);font-size:24px;line-height:1.3;font-weight:400;color:var(--ink)}
.steps b{display:block;font-size:17px;margin-bottom:.15em}
.step-fig{display:none;color:var(--ink-2)}
.step-fig .pen{stroke:var(--pencil)}
@media (min-width:640px){
  .steps li{grid-template-columns:2.2em 1fr 132px;gap:.2em 1.4em;align-items:start}
  .step-fig{display:block;width:132px;height:84px}
}

/* できること: ruled notebook lines, one item per line */
.features{margin:0}
.features div{display:grid;grid-template-columns:1fr;padding:.65em 0;border-bottom:1px solid var(--rule)}
.features div:first-child{border-top:1px solid var(--rule)}
.features dt{font-weight:700}
.features dd{margin:0}
@media (min-width:640px){.features div{grid-template-columns:10em 1fr;gap:1em}}

/* PDFは送信しません: a note in the margin with one red pen line */
.promise{padding-left:16px;border-left:2px solid var(--pencil);margin-bottom:1em}
mark{background:none;color:inherit;text-decoration:underline;text-decoration-color:var(--marker);text-decoration-thickness:.5em;text-underline-offset:-.28em;text-decoration-skip-ink:none}

/* The h2 rule already opens a list: no doubled line. */
h2 + .contents li:first-child,h2 + .steps li:first-child,h2 + .features div:first-child{border-top:0}
@media (max-width:639px){.hero-en .chunk{display:inline}}