@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');
.topics-page{background:#f7f8f9}.topics-main{padding-bottom:clamp(90px,11vw,165px)}.topics-content{max-width:1260px;min-height:clamp(520px,60vh,740px);padding-top:clamp(28px,3vw,46px)}
.topics-filter{display:flex;align-items:center;gap:12px;margin-bottom:10px}.topics-filter>p{margin:0;color:#8a8e93;font-family:'Barlow','Helvetica Neue',Arial,sans-serif;font-size:11px;font-weight:800;letter-spacing:.2em;white-space:nowrap}.topics-filter-buttons{display:flex;flex-wrap:wrap;gap:5px}.topics-filter button{border:1px solid #c5c9cd;background:transparent;color:#656a70;padding:6px 10px;font-size:11px;font-weight:700;line-height:1;transition:color .25s,border-color .25s,background-color .25s}.topics-filter button:hover{color:var(--blue);border-color:var(--blue)}.topics-filter button[aria-pressed=true]{color:#fff;border-color:var(--blue);background:var(--blue)}
.topics-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(18px,2.4vw,36px);row-gap:14px;padding-top:14px}.topics-card{min-width:0}.topics-card:first-child{grid-column:1/-1}.topics-card[hidden]{display:none}.topics-card>a{display:grid;grid-template-columns:minmax(150px,40%) minmax(0,1fr);gap:clamp(16px,1.8vw,26px);align-items:center;height:100%;padding:14px;background:linear-gradient(135deg,rgba(255,255,255,.78) 0%,rgba(255,255,255,.38) 68%,rgba(0,100,212,.055) 100%);color:inherit;text-decoration:none;overflow:hidden;transition:background .35s ease}.topics-card:first-child>a{grid-template-columns:minmax(360px,42%) minmax(0,1fr);gap:clamp(32px,4vw,62px);padding:18px}.topics-list.is-filtered .topics-card:first-child{grid-column:auto}.topics-list.is-filtered .topics-card:first-child>a{grid-template-columns:minmax(150px,40%) minmax(0,1fr);gap:clamp(16px,1.8vw,26px);padding:14px}.topics-card>a:hover{background:linear-gradient(135deg,rgba(255,255,255,.88) 0%,rgba(255,255,255,.46) 64%,rgba(0,100,212,.09) 100%)}.topics-thumb{aspect-ratio:16/9;overflow:hidden;background:#dfe2e5}.topics-thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .65s cubic-bezier(.22,1,.36,1)}.topics-card:hover .topics-thumb img{transform:scale(1.025)}.topics-card-body{min-width:0;padding-right:clamp(8px,1.5vw,24px)}.topics-meta{display:flex;align-items:center;gap:10px;color:#797e84;font-family:'Barlow','Helvetica Neue',Arial,sans-serif;font-size:10px;font-weight:800;letter-spacing:.08em}.topics-meta span{color:var(--blue)}.topics-card h2{margin:7px 0 0;font-family:'Helvetica Neue',Arial,'Hiragino Kaku Gothic ProN',Meiryo,sans-serif;font-size:clamp(15px,1.05vw,18px);font-weight:700;line-height:1.45;letter-spacing:-.025em;transition:color .25s}.topics-card:first-child h2{font-size:clamp(20px,1.7vw,25px)}.topics-list.is-filtered .topics-card:first-child h2{font-size:clamp(15px,1.05vw,18px)}.topics-card>a:hover h2{color:var(--blue)}.topics-excerpt{max-width:590px;margin:16px 0 0;color:#5f646a;font-size:14px;line-height:1.85}.topics-list.is-filtered .topics-excerpt{display:none}.topics-empty{grid-column:1/-1;margin:80px 0;text-align:center;color:#777c82;font-size:14px}.topics-page footer{background:#fcfcfc;content-visibility:visible;isolation:isolate;overflow:hidden}.topics-page footer>.footer-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;display:block;pointer-events:none}
.topic-detail-main{padding-bottom:clamp(90px,11vw,160px)}.topic-article{max-width:1040px;padding-top:clamp(48px,6vw,88px)}.article-header{max-width:none;margin:0 0 clamp(38px,4.5vw,62px)}.article-header .topics-meta{margin-bottom:16px}.article-header h1{max-width:980px;margin:0;font-family:'Helvetica Neue',Arial,'Hiragino Kaku Gothic ProN',Meiryo,sans-serif;font-size:clamp(22px,2.45vw,33px);font-weight:700;line-height:1.48;letter-spacing:-.02em}.article-hero{max-width:1040px;margin:0;aspect-ratio:16/9;overflow:hidden;background:#dfe2e5}.article-hero img{display:block;width:100%;height:100%;object-fit:cover}.article-body{max-width:1040px;margin:clamp(44px,5.5vw,74px) 0 0;font-size:16px;line-height:2.05;letter-spacing:.015em}.article-body>p,.article-body>h2{max-width:900px}.article-body h2{margin:2.6em 0 .8em;font-size:clamp(22px,2.2vw,28px);line-height:1.55}.article-body p{margin:0 0 1.6em}.article-body a{color:var(--blue);border-bottom:1px solid currentColor;padding-bottom:2px}.article-body a:hover{opacity:.7}.article-body strong{font-weight:800}.article-body u{text-decoration-color:var(--blue);text-decoration-thickness:1px;text-underline-offset:4px}.article-body small{color:#74797e;font-size:13px;line-height:1.8}.article-body figure{margin:clamp(42px,5vw,68px) 0}.article-body figure img{display:block;width:100%;height:auto}.article-body figcaption{margin-top:10px;color:#7b8085;font-size:12px;line-height:1.7}.article-nav{max-width:1040px;margin:clamp(70px,9vw,125px) auto 0;padding-top:24px;border-top:1px solid #d8dade;display:flex;justify-content:space-between;gap:20px}.article-nav a{color:#111;text-decoration:none;font-family:'Barlow','Helvetica Neue',Arial,sans-serif;font-size:13px;font-weight:800;letter-spacing:.08em;transition:color .25s}.article-nav a:hover{color:var(--blue)}
.topics-card h2{letter-spacing:.006em}.topics-excerpt{letter-spacing:.014em}.article-header h1{letter-spacing:.004em}.article-body{letter-spacing:.025em}.article-body h2{letter-spacing:.012em}
@media(max-width:900px){.topics-list{grid-template-columns:1fr}.topics-card:first-child{grid-column:auto}.topics-card>a{grid-template-columns:28% minmax(0,1fr);gap:20px;padding:13px}.topics-card:first-child>a{grid-template-columns:42% minmax(0,1fr);gap:24px;padding:15px}.topics-card:first-child h2{font-size:20px}.topics-excerpt{font-size:13px;line-height:1.7;margin-top:11px}}
@media(min-width:721px){.topics-card h2{font-size:clamp(14px,.9vw,16px)}.topics-card:first-child h2{font-size:clamp(18px,1.35vw,21px)}.topics-list.is-filtered .topics-card:first-child h2{font-size:clamp(14px,.9vw,16px)}}
@media(max-width:720px){.topics-content{padding-top:34px}.topics-filter{align-items:flex-start;gap:10px}.topics-filter>p{margin-top:6px}.topics-filter button{padding:6px 8px;font-size:10px}.topics-card>a,.topics-card:first-child>a{grid-template-columns:34% minmax(0,1fr);gap:14px;padding:11px}.topics-card-body{padding-right:4px}.topics-card h2,.topics-card:first-child h2{font-size:16px;margin-top:7px;line-height:1.5;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.topics-excerpt{display:none}.topics-meta{gap:8px;font-size:9px}.article-header h1{font-size:21px;line-height:1.55}.article-body{font-size:15px;line-height:1.95}.article-body figure{margin:38px 0}.article-nav{margin-top:70px}}
.article-body strong,.article-body b{font-family:Arial,'Yu Gothic UI Semibold','Yu Gothic UI','Yu Gothic','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;font-weight:800!important;-webkit-text-stroke:.18px currentColor;text-shadow:.012em 0 currentColor}.article-body .article-image{margin-right:auto}.article-body .article-image-large{width:100%}.article-body .article-image-medium{width:66.666%}.article-body .article-image-small{width:33.333%}
.article-body{font-family:'Noto Sans JP',Meiryo,'Yu Gothic UI',sans-serif;font-weight:400}.article-body strong,.article-body b{font-family:inherit;font-weight:700!important;-webkit-text-stroke:0;text-shadow:none}.article-body h2{font-family:inherit;font-weight:700}
@media(max-width:480px){.topics-filter{display:block}.topics-filter>p{margin:0 0 10px}.article-nav{flex-direction:column}.article-nav a:last-child{text-align:right}}
@media(prefers-reduced-motion:reduce){.topics-filter button,.topics-thumb img,.topics-card h2,.article-nav a{transition:none}.topics-card:hover .topics-thumb img{transform:none}}
.article-body figure,.article-body .article-image{margin-top:18px;margin-bottom:18px}.article-body p:has(+ figure),.article-body h2:has(+ figure){margin-bottom:0}.article-body figure+h2{margin-top:0}

/* v78: topic navigation becomes two aligned rows on smartphones. */
@media(max-width:600px){
  .article-nav{display:flex;flex-direction:column;gap:0;padding-top:0}
  .article-nav a{display:block;width:100%;padding:22px 0;line-height:1.45}
  .article-nav a+a{border-top:1px solid #d4d7da;text-align:right}
}

/* v79: mirror the Works detail navigation structure and spacing. */
.article-nav{display:grid;grid-template-columns:1fr 1fr;gap:0;padding-top:0;border-top:1px solid #c6cacf}
.article-nav a{display:flex;flex-direction:column;gap:9px;padding:32px 0 45px;font-size:inherit}
.article-nav a:last-child{align-items:flex-end;text-align:right}
.article-nav span{color:#858a90;font-size:10px;font-weight:800;letter-spacing:.14em}
.article-nav strong{font-size:18px;font-weight:800;letter-spacing:.03em}
.article-nav a:hover strong{color:var(--blue)}
@media(max-width:600px){
  .article-nav{grid-template-columns:1fr}
  .article-nav a{width:100%;padding:26px 0 30px;line-height:1.45}
  .article-nav a:last-child{align-items:flex-start;text-align:left;border-top:1px solid #d4d7da}
}

/* Article thumbnails belong to listings / sharing, not the article header. */
.topic-article>.article-hero{display:none}
.topic-article>.article-body{margin-top:0}

.article-back{display:inline-block;margin:0 0 clamp(28px,3vw,40px) 5px;color:inherit;border:0;text-decoration:none;font-family:'Barlow','Helvetica Neue',Arial,sans-serif;font-size:12px;font-weight:800;letter-spacing:.08em;cursor:pointer;transition:color .25s,transform .4s cubic-bezier(.22,1,.36,1)}
.article-back:hover,.article-back:focus-visible{color:var(--blue);transform:translateX(-5px)}
@media(prefers-reduced-motion:reduce){.article-back{transition:none}}

.article-return{margin-top:clamp(40px,5vw,64px)}
.article-return .article-back{margin-bottom:0}

/* Article navigation and metadata share one row; keep the title below. */
.article-topline{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:16px;margin-bottom:22px}
.article-topline .article-back{margin:0 0 0 5px;white-space:nowrap}
.article-topline .topics-meta{min-width:0;margin:0;justify-content:flex-end;flex-wrap:wrap;text-align:right}
.article-topline .topics-meta time{white-space:nowrap}
.article-topline .topics-meta span{max-width:100%;overflow-wrap:anywhere}
.article-header h1{overflow:visible;overflow-wrap:anywhere;word-break:normal;text-overflow:clip}
@media(max-width:720px){.article-topline{column-gap:12px;margin-bottom:18px}}

/* The article footer mirrors the top navigation / metadata row. */
.article-return.article-topline{margin-bottom:0}

/* The hit area stays still while the label moves beyond its aligned edge. */
.article-back{padding-inline:2px;transition:color .25s}
.article-back:hover,.article-back:focus-visible{transform:none}
.article-back>.arrow-link-label{display:inline-block;pointer-events:auto;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.article-back:hover>.arrow-link-label,.article-back:focus-visible>.arrow-link-label{transform:translateX(-5px)}
@media(prefers-reduced-motion:reduce){
  .article-back,.article-back>.arrow-link-label{transition:none}
  .article-back:hover>.arrow-link-label,.article-back:focus-visible>.arrow-link-label{transform:none}
}

.article-back,.article-topline .article-back{margin-left:-2px}

/* v10-61: shared article typography and single-pixel dividers. */
.article-header h1,.article-body,.topics-card h2{font-family:'Helvetica Neue',Arial,'Hiragino Kaku Gothic ProN',Meiryo,sans-serif}
.article-body hr{height:0;min-height:0;border:0;border-top:1px solid var(--line);background:none;box-shadow:none;opacity:1}

/* Let mobile titles carry useful context; shared CSS sizes the filter controls. */
@media(max-width:720px){
  .topics-list.is-filtered .topics-card:first-child>a{grid-template-columns:34% minmax(0,1fr);gap:14px;padding:11px}
  .topics-card h2,.topics-card:first-child h2,.topics-list.is-filtered .topics-card:first-child h2{
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
    white-space:normal;overflow:hidden;text-overflow:clip;overflow-wrap:anywhere;
    font-size:14px;line-height:1.55;
  }
}
@media(max-width:600px){.topics-list .topics-meta time{display:none}}