/* Rayne-Lab article readability / citation / future side-voice hooks */
.article-shell{width:min(920px,100%)}
.article-body,.article-footer{width:min(760px,100%);margin-left:auto;margin-right:auto}
.article-header h1{
  font-size:clamp(1.9rem,4.15vw,3.05rem);
  line-height:1.24;
  letter-spacing:-.015em;
  text-wrap:balance;
  overflow-wrap:break-word;
  word-break:auto-phrase;
}
.article-deck{
  margin:.85rem 0 0;
  max-width:52rem;
  color:var(--muted);
  font:500 clamp(1rem,2.1vw,1.25rem)/1.65 "Shippori Mincho",serif;
  letter-spacing:.02em;
  text-wrap:balance;
}
.article-body a[href^="http"]{text-underline-offset:.18em;text-decoration-thickness:1px}
.article-body p:has(> a[href^="http"]){overflow-wrap:anywhere}
.article-view-switch{
  display:flex;gap:.45rem;align-items:center;margin:1.15rem 0 0;
  font-size:.72rem;letter-spacing:.06em
}
.article-view-switch a,.article-view-switch span{
  display:inline-flex;align-items:center;min-height:34px;padding:.45rem .8rem;
  border:1px solid var(--border);text-decoration:none
}
.article-view-switch .is-current{border-color:rgba(210,170,77,.58);color:var(--gold-soft)}
.seo-related-articles{
  width:min(760px,100%);
  margin:3.1rem auto 1.5rem;
  padding:1.35rem 1.45rem 1.15rem;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.seo-related-articles h2{
  margin:.25rem 0 .8rem;
  font-size:clamp(1.15rem,2.4vw,1.45rem);
  line-height:1.5;
}
.seo-related-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.35rem;
}
.seo-related-list a{
  display:block;
  padding:.58rem .1rem;
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--border) 70%,transparent);
}
.seo-related-list li:last-child a{border-bottom:0}
.seo-related-list a:hover{text-decoration:underline;text-underline-offset:.2em}
@media(max-width:680px){
  .article-shell{width:100%}
  /* WEB-179: 本文を16pxへ上げ h2 も 25.6px になった結果、スマホで h1(28.1px) と
     h2 の差が 1.10倍しか無くなっていた。記事タイトルが節見出しと同じ大きさに見える。
     下限を 2.05rem(32.8px) へ上げて、h1 > h2 の落差を作り直す。 */
  .article-header h1{font-size:clamp(2.05rem,7.6vw,2.4rem);line-height:1.3;text-wrap:pretty}
  .article-view-switch{flex-wrap:wrap}
  .seo-related-articles{padding:1.15rem 1rem 1rem;margin-top:2.5rem}
}