.bl{padding-bottom:40px}
.bl-wrap{max-width:1040px;margin:0 auto;padding-bottom:64px}
.bl-head{padding:28px 0 24px;max-width:760px}
.bl-head h1{margin:14px 0 14px;font-size:clamp(32px,4.6vw,56px);line-height:1.04;letter-spacing:-.035em;font-weight:700;text-wrap:balance;text-align:start}
.bl-lead{margin:0;font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:var(--pp-mute);max-width:62ch;text-wrap:pretty}
.bl-meta{display:flex;flex-wrap:wrap;gap:6px 10px;margin:16px 0 0;font-size:.88rem;color:var(--pp-mute)}
.bl-chip{display:inline-block;padding:4px 12px;border-radius:999px;font-size:.8rem;font-weight:600;color:var(--pp-ink);background:rgba(45,212,191,.14);border:1px solid rgba(45,212,191,.45);text-decoration:none}
a.bl-chip:hover{background:rgba(45,212,191,.24)}
.bl-cover{display:block;width:100%;height:auto;aspect-ratio:1200/630;border-radius:18px;margin:8px 0 36px;background:rgba(11,11,15,.04);object-fit:cover}

.bl-grid{display:grid;grid-template-columns:minmax(0,230px) minmax(0,720px);gap:48px;align-items:start}
.bl-grid:not(:has(.bl-toc)){grid-template-columns:minmax(0,720px)}
.bl-toc{position:sticky;top:96px;font-size:.9rem;line-height:1.4}
.bl-toc b{display:block;margin-bottom:10px;font-weight:700}
.bl-toc ol{margin:0;padding:0;list-style:none;display:grid;gap:8px;border-inline-start:2px solid rgba(11,11,15,.12);padding-inline-start:14px}
.bl-toc a{color:var(--pp-mute);text-decoration:none}
.bl-toc a:hover{color:var(--pp-ink)}

.bl-body{font-size:1.06rem;line-height:1.75;min-width:0}
.bl-body h2{margin:2.2em 0 .6em;font-size:clamp(24px,2.6vw,32px);line-height:1.2;letter-spacing:-.02em;scroll-margin-top:96px;text-align:start}
.bl-body h3{margin:1.7em 0 .5em;font-size:1.2rem;line-height:1.3;scroll-margin-top:96px}
.bl-body>:first-child{margin-top:0}
.bl-body p{margin:0 0 1.1em;text-wrap:pretty}
.bl-body ul,.bl-body ol{margin:0 0 1.3em;padding-inline-start:1.4em}
.bl-body li{margin:.35em 0}
.bl-body a{color:var(--pp-ink);text-decoration:underline;text-decoration-color:var(--t1);text-decoration-thickness:2px;text-underline-offset:3px}
.bl-body a:hover{text-decoration-color:var(--pp-ink)}
.bl-body code{padding:1px 6px;border-radius:6px;background:rgba(11,11,15,.08);font-size:.92em}
.bl-body blockquote{margin:1.6em 0;padding:4px 0 4px 20px;border-inline-start:3px solid var(--t1);color:var(--pp-mute)}
.bl-body blockquote p{margin:0}
.bl-table{overflow-x:auto;margin:1.4em 0;border:1px solid rgba(11,11,15,.12);border-radius:12px}
.bl-table table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:520px}
.bl-table th,.bl-table td{padding:10px 14px;text-align:start;vertical-align:top;border-bottom:1px solid rgba(11,11,15,.08)}
.bl-table thead th{font-weight:700;background:rgba(11,11,15,.04)}
.bl-table tr:last-child>*{border-bottom:0}

.bl-cta{display:flex;flex-wrap:wrap;gap:20px 32px;align-items:center;justify-content:space-between;margin:56px 0 0;padding:28px 30px;border-radius:20px;border:1px solid rgba(45,212,191,.4);background:linear-gradient(135deg,rgba(45,212,191,.12),rgba(11,11,15,.02))}
.bl-cta h2{margin:0 0 6px;font-size:clamp(20px,2.2vw,26px);line-height:1.2;max-width:28ch}
.bl-cta p{margin:0;color:var(--pp-mute)}
.bl-cta-act{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
.bl-rel{margin-top:56px}
.bl-rel h2{font-size:clamp(22px,2.4vw,28px);margin:0 0 20px}

.bl-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.bl-pill{padding:7px 14px;border-radius:999px;font-size:.9rem;font-weight:600;color:var(--pp-mute);border:1px solid rgba(11,11,15,.16);text-decoration:none}
.bl-pill:hover{color:var(--pp-ink);border-color:rgba(11,11,15,.4)}
.bl-pill.is-on{color:var(--pp-ink);background:rgba(45,212,191,.16);border-color:rgba(45,212,191,.55)}

.bl-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px}
.bl-card{display:flex;flex-direction:column;border:1px solid rgba(11,11,15,.1);border-radius:16px;overflow:hidden;background:rgba(11,11,15,.025);transition:border-color .2s}
.bl-card:hover,.bl-card:focus-within{border-color:rgba(45,212,191,.5)}
.bl-card-img{display:block;aspect-ratio:1200/630;background:rgba(11,11,15,.04)}
.bl-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.bl-card-body{display:flex;flex-direction:column;gap:8px;padding:16px 18px 18px;flex:1}
.bl-card h3{margin:0;font-size:1.08rem;line-height:1.3}
.bl-card h3 a{color:inherit;text-decoration:none}
.bl-card p{margin:0;font-size:.92rem;line-height:1.5;color:var(--pp-mute)}
.bl-card .bl-chip{align-self:flex-start}
.bl-card-meta{margin-top:auto;font-size:.82rem;color:var(--pp-mute)}

.bl-pager{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;justify-content:center;margin-top:40px}
.bl-pager ol{display:flex;gap:6px;list-style:none;margin:0;padding:0}
.bl-pager a,.bl-pager span{display:inline-flex;min-width:40px;min-height:40px;padding:0 12px;align-items:center;justify-content:center;border-radius:10px;font-weight:600;text-decoration:none;color:var(--pp-ink)}
.bl-pager ol a{border:1px solid rgba(11,11,15,.16)}
.bl-pager ol a:hover{border-color:rgba(11,11,15,.4)}
.bl-pager [aria-current]{background:rgba(45,212,191,.2);border:1px solid rgba(45,212,191,.55)}
.bl-pager .is-off{opacity:.35}

@media (max-width:900px){
  .bl-grid{grid-template-columns:minmax(0,1fr);gap:20px}
  .bl-toc{position:static;padding:14px 16px;border:1px solid rgba(11,11,15,.12);border-radius:12px}
}
@media (max-width:560px){
  .bl-cta{padding:22px 20px}
  .bl-body{font-size:1rem}
}
a:focus-visible.bl-pill,.bl-chip:focus-visible,.bl-pager a:focus-visible,.bl-card a:focus-visible{outline:2px solid var(--t1);outline-offset:3px}
[lang=ja] .bl-body,[lang=zh] .bl-body{line-height:1.9}