/* 「関連するサービス」の節の見た目（ops/gen_related.py が作る節。2026-10-13 PM指示 #27 本題 3・元はここ 1 か所）
   .rel-list … リンクの札を並べる枠。.rel--em を付けた枠（/vigi/・/omada/）は、本文の文字の大きさ（em）に合わせて大きさを決める。 */
.rel-sec { padding-block: clamp(3rem, 6vw, 5rem); }
.rel-sec .rel-inner { width: min(1080px, 100% - 2rem); margin-inline: auto; }
.rel-sec .rel-title { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; line-height: 1.5; margin-bottom: 1.5rem; }
.rel-sec .rel-list { --rel-min: 240px; }
.related { background-color: #fff; }

.rel-list {
  --rel-u: 1rem; --rel-gap: 1rem; --rel-pad: 1.5rem; --rel-border: var(--color-itsn-blue, #1796D5); --rel-hover: var(--color-bg-soft, #F8F8F8);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--rel-min, 260px), 1fr)); gap: var(--rel-gap);
  max-width: 1080px; margin: 0; padding: 0; list-style: none;
}
.rel-list.rel--em { --rel-u: 1em; --rel-gap: 1.25em; --rel-pad: 1.5em; --rel-border: #0E7AB8; --rel-hover: #F8F8F8; max-width: none; }
.rel-link { display: block; height: 100%; padding: var(--rel-pad); border: 1px solid var(--rel-border); border-radius: 12px; background: #fff; color: #0A0E1A; text-decoration: none; }
.rel-link:hover, .rel-link:focus-visible { background: var(--rel-hover); }
.rel-name { display: block; font-weight: 700; font-size: calc(1.125 * var(--rel-u)); line-height: 1.6; text-decoration: underline; }
.rel--em .rel-name { font-weight: 600; }
.rel-text { display: block; margin-top: calc(0.5 * var(--rel-u)); font-size: var(--rel-u); line-height: 1.8; color: #495057; text-wrap: pretty; }