:root{--color:#086c64;--tint:#e6f7ee;--ink:#173e38;--bright:#ffc96a}
*{box-sizing:border-box}html{font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;color:var(--ink);background:var(--tint)}
body{margin:0}a{color:var(--color);text-decoration-thickness:1px;text-underline-offset:.22em}a:focus-visible{outline:3px solid var(--color);outline-offset:2px}
.frame{width:min(100%,46rem);margin:auto;background:#fff;min-height:100vh;box-shadow:0 0 36px #182a3312}
.head{padding:12px clamp(16px,5vw,42px);background:var(--color);display:flex;align-items:center;justify-content:space-between;gap:12px;color:white}
.head a{color:inherit;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}.word{font:bold italic clamp(24px,6vw,34px)/1.1 Arial,sans-serif;letter-spacing:-.06em}
.head .back{font-size:.82rem;font-weight:bold}.head a:hover,.footer a:hover{text-decoration:underline}
main{padding:clamp(18px,5vw,40px)}.crumb{font-size:.77rem;color:var(--color);font-weight:bold;display:flex;gap:.7em;align-items:center;flex-wrap:wrap}
.crumb a{min-height:34px;display:inline-flex;align-items:center}.eyebrow{font-size:.8rem;color:var(--color);font-weight:bold;letter-spacing:.08em;margin:28px 0 5px}
h1{font-size:clamp(1.7rem,5.4vw,2.7rem);line-height:1.36;letter-spacing:-.045em;margin:.1em 0 .45em;font-weight:900}
h2{font-size:clamp(1.2rem,4.2vw,1.55rem);line-height:1.45;margin:1.7em 0 .5em}p,li{font-size:1rem;line-height:1.95}
.lead{margin:.75em 0 1.1em}ul{padding-left:1.35em}li{padding-left:.2em;margin:.5em 0}li::marker{color:var(--color)}
.hero{width:100%;height:auto;display:block;border-radius:16px}.prompt{padding:20px clamp(16px,4vw,32px);margin:26px 0;background:var(--tint);border-radius:16px}
.prompt h2{margin:0 0 .55em}.prompt p{margin:0}.try{display:grid;grid-template-columns:minmax(65px,100px) 1fr;align-items:center;gap:12px;font-size:.92rem;font-weight:700;margin-top:14px}
.try img{width:100%;height:auto;border-radius:6px;display:block}.links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.tile{border:1px solid #cbd4d1;background:#fff;border-radius:10px;padding:12px;display:flex;flex-direction:column;justify-content:center;min-height:52px;overflow-wrap:anywhere;font-size:.88rem;font-weight:650;text-decoration:none}
.tile:hover,.tile:focus-visible{background:var(--tint);border-color:var(--color)}.tile small{font-weight:400;color:var(--ink);margin-top:3px;font-size:.8rem;line-height:1.55}
.related{display:flex;align-items:center;justify-content:space-between;min-height:54px;gap:10px;border-bottom:1px solid #dce1df;font-weight:bold;text-decoration:none}.related::after{content:"→";flex-shrink:0}
.footer{padding:18px clamp(16px,5vw,42px);border-top:1px solid #dce1df;background:var(--tint);font-size:.86rem;font-weight:bold}.footer a{display:inline-flex;align-items:center;min-height:44px}
@media(max-width:360px){.links{grid-template-columns:1fr}}
.article-layout{display:block}.article-layout article,.article-layout aside{min-width:0}
.article-layout aside{border-top:1px solid #dce1df;padding-bottom:12px}
@media(min-width:960px){
 .frame{width:min(calc(100% - 64px),1200px)}
 .head,.footer{padding-inline:clamp(28px,4vw,55px)}
 main{padding:26px clamp(28px,4vw,55px) 44px}
 .article-layout{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(250px,1fr);gap:clamp(26px,4vw,56px);align-items:start}
 .article-layout article{padding-right:4px}
 .article-layout aside{margin-top:28px;border:1px solid #dce1df;border-top:3px solid var(--color);border-radius:0 0 12px 12px;padding:0 20px 18px;background:var(--tint)}
 .article-layout aside h2{font-size:1.1rem}
 .article-layout aside p{font-size:.9rem}.article-layout aside .links{grid-template-columns:1fr}
 .directory-layout{max-width:1100px}.directory-layout .lead{max-width:68ch}
}

@font-face{font-family:'NLive JP';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/nlive-jp-400.woff2') format('woff2')}
@font-face{font-family:'NLive JP';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/nlive-jp-700.woff2') format('woff2')}
html:lang(ja),html:lang(ja) body,html:lang(ja) body * {
    font-family:'NLive JP','BIZ UDPGothic','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif!important;
    font-synthesis:none;
}
html:lang(ja) {line-break:strict; word-break:normal; -webkit-text-size-adjust:100%}
html:lang(ja) body :is(h1,h2,h3,h4,strong,b,summary,dt) {
    font-weight:700; letter-spacing:normal; font-style:normal;
}
html:lang(ja) :is(p,dd,li,figcaption,small) {letter-spacing:normal}
html:lang(ja) body :is(p,dd) {line-height:1.85}
html:lang(ja) input::placeholder {font-family:inherit}
.jp-workintro {max-width:44em;margin:1em 0;color:inherit}
.jp-workintro p {margin:.6em 0}