


@media (max-width:860px) {

}
@media (max-width:700px) {
}
@media (max-width:720px) {

}
.module-relation-flow__cell { display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 2px; background: var(--module-surface, #fff); border-color: var(--line2); text-align: center; padding: 14px 12px; border-radius: 10px; border: 1px solid var(--module-line-2, #d7dde6); }
.module-relation-flow__role { font-size: 13px; font-weight: 800; letter-spacing: .05em; color: var(--module-muted, #5c6779); margin-bottom: 7px; display: block; }
.module-relation-flow__syms { margin-bottom: 6px; display: flex; justify-content: center; gap: 5px; }
.module-relation-flow__value { font-size: 31px; letter-spacing: -.035em; display: block; font-weight: 800; line-height: 1.05; }
.module-relation-flow__value small { display: block; margin-left: 4px; margin-top: 3px; font-size: 15px; font-weight: 700; color: var(--module-muted, #5c6779); line-height: 1.4; }
.module-relation-flow__desc { font-size: 14px; color: var(--module-ink-2, #3f4859); line-height: 1.5; order: 1; display: block; margin-top: 4px; }
.module-relation-flow__media { align-self: end; margin-top: 8px; order: 2; display: grid; place-items: center; }
.module-relation-flow__img { width: 104px; border: 1px solid var(--module-line-2, #d7dde6); border-radius: 7px; background-color: var(--surf2); display: block; aspect-ratio: var(--module-type-relation-aspect, 745/1040); background-size: cover; background-position: center; }
.module-relation-flow__arrow { align-self: center; color: var(--module-muted, #5c6779); width: 44px; height: 38px; display: grid; place-items: center; }
@media (max-width: 900px) {
}
.module-relation-flow__info-box.module-relation-flow__info-box a.module-relation-flow__tlink, .module-relation-flow__info-box.module-relation-flow__info-box a.module-relation-flow__tlink:hover, .module-relation-flow__info-box.module-relation-flow__info-box a.module-relation-flow__tlink:focus-visible, .module-relation-flow__info-box.module-relation-flow__info-box a.module-relation-flow__matchup-triad-cell, .module-relation-flow__info-box.module-relation-flow__info-box a.module-relation-flow__matchup-triad-cell:hover, .module-relation-flow__info-box.module-relation-flow__info-box a.module-relation-flow__matchup-triad-cell:focus-visible, .module-relation-flow__toc-item--level-2 a.module-relation-flow__tlink:hover, .module-relation-flow__toc-item--level-2 a.module-relation-flow__matchup-triad-cell:hover, .module-relation-flow__toc-item--level-3 a.module-relation-flow__tlink:hover, .module-relation-flow__toc-item--level-3 a.module-relation-flow__matchup-triad-cell:hover, .module-relation-flow__related-card-title a.module-relation-flow__tlink:hover, .module-relation-flow__related-card-title a.module-relation-flow__matchup-triad-cell:hover {
  text-decoration: none;
}
a.module-relation-flow__matchup-triad-cell, a.module-relation-flow__matchup-triad-cell:hover, a.module-relation-flow__matchup-triad-cell:focus-visible, a.module-relation-flow__matchup-triad-cell:visited {
  text-decoration: none;
}
.u-figure-caption-note { margin:8px 0 14px; font-size:13px; color:var(--mut); line-height:1.55; }
.module-relation-flow__weakness-chain-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(360px,1fr)); gap:9px; }
.module-relation-flow__weakness-chain-grid>* { min-width:0; }
.module-relation-flow__weakness-chain-row { display:flex; align-items:center; gap:9px; padding:9px 11px; background:var(--surf); border:1px solid var(--line2); border-radius:var(--r-s); min-width:0; font-size:14px; }
.module-relation-flow__weakness-chain-row-subtitle { display:flex; align-items:center; gap:6px; min-width:0; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.module-relation-flow__weakness-chain-row-arrow { width:30px; height:13px; flex:0 0 auto; }
.module-relation-flow__weakness-chain-row-title { display:flex; align-items:center; gap:6px; min-width:0; margin-left:auto; color:var(--ink2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.module-relation-flow__weakness-chain-row--self { border-color:var(--warn); background:var(--warn-s); }

.module-relation-flow__matchup-triad-cell { position:relative; text-align:center; padding:14px 12px; border-radius:var(--r-s); border:1px solid var(--line2); background:var(--surf2); }

.module-relation-flow__rule-diagram { display:flex; align-items:stretch; gap:0; flex-wrap:wrap; margin:0 0 12px; padding:14px; border:1px solid var(--line); border-radius:var(--r); background:var(--surf2); }
.module-relation-flow__rule-diagram-subtitle { flex:1 1 150px; min-width:0; display:flex; flex-direction:column; gap:5px; align-items:center; padding:12px 10px; border:1px solid var(--line2); border-radius:var(--r-s); background:var(--surf); text-align:center; }
.module-relation-flow__rule-diagram-subtitle svg { width:34px; height:34px; display:block; }
.module-relation-flow__rule-diagram-key { font-size:13px; font-weight:800; color:var(--ink); }
.module-relation-flow__rule-diagram-value { font-size:13px; color:var(--mut); line-height:1.5; }
.module-relation-flow__rule-diagram-arrow { flex:0 0 42px; display:grid; place-items:center; color:var(--acc-i); }
.module-relation-flow__rule-diagram-arrow svg { width:30px; height:22px; display:block; }
@media (max-width:860px) {

}
@media (max-width:700px) {
.module-relation-flow__rule-diagram { flex-direction:column; }
.module-relation-flow__rule-diagram-subtitle { flex:1 1 auto; }
.module-relation-flow__rule-diagram-arrow { flex:0 0 34px; transform:rotate(90deg); }
}
a.module-relation-flow__matchup-triad-cell:hover { border-color:var(--acc); }
@media (max-width:720px) {

}
.module-relation-flow__cell {
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 2px;
  background: var(--surf);
  border-color: var(--line2);
}
.module-relation-flow__role { font-size: 13px; font-weight: 800; letter-spacing: .05em; color: var(--mut); margin-bottom: 0; }
.module-relation-flow__type-cell--self   .module-relation-flow__role { color: var(--acc-i); }
.module-relation-flow__type-cell--weak   .module-relation-flow__role { color: var(--dn); }
.module-relation-flow__type-cell--strong .module-relation-flow__role { color: var(--up); }
.module-relation-flow__syms { margin-bottom: 2px; }
.module-relation-flow__syms > * {
  border-radius: 50%; background: var(--surf); box-shadow: 0 0 0 2px var(--line2);
}
.module-relation-flow__value { font-size: 28px; letter-spacing: -.03em; }
.module-relation-flow__value small {
  display: block; margin-left: 0; margin-top: 3px;
  font-size: 13px; font-weight: 700; color: var(--mut); line-height: 1.4;
}
.module-relation-flow__desc { font-size: 14px; color: var(--ink2); line-height: 1.55; }
.module-relation-flow__media { align-self: end; margin-top: 10px; }
.module-relation-flow__img {
  width: 118px; border: 1px solid var(--line2); border-radius: 8px; background-color: var(--surf2);
}
.module-relation-flow__arrow { align-self: center; color: var(--mut); }
.module-relation-flow__cell { grid-template-rows: auto auto auto 1fr auto; }
.module-relation-flow__desc { order: 1; }
.module-relation-flow__media { order: 2; align-self: end; }
.module-relation-flow {
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 10px; align-items: stretch;
}
.module-relation-flow > * { min-width: 0 }
.module-relation-flow__cell {
  text-align: center; padding: 14px 12px; border-radius: 10px;
  border: 1px solid var(--module-line-2, #d7dde6);
  background: var(--module-surface, #fff);
}
.module-relation-flow__role {
  display: block; font-size: 13px; font-weight: 800; letter-spacing: .05em;
  color: var(--module-muted, #5c6779); margin-bottom: 7px;
}
.module-relation-flow__syms { display: flex; justify-content: center; gap: 5px; margin-bottom: 6px }
.module-relation-flow__value {
  display: block; font-size: 31px; font-weight: 800; letter-spacing: -.035em; line-height: 1.05;
}
.module-relation-flow__value small {
  font-size: 15px; font-weight: 700; color: var(--module-muted, #5c6779); margin-left: 4px;
}
.module-relation-flow__desc {
  display: block; font-size: 14px; color: var(--module-ink-2, #3f4859); margin-top: 4px; line-height: 1.5;
}
.module-relation-flow__media { display: grid; place-items: center; margin-top: 8px }
.module-relation-flow__img {
  display: block; width: 104px; aspect-ratio: var(--module-type-relation-aspect, 745/1040);
  border-radius: 7px; border: 1px solid var(--module-line-2, #d7dde6);
  background-size: cover; background-position: center;
}
.module-relation-flow__arrow { width: 44px; height: 38px; display: grid; place-items: center; color: var(--module-muted, #5c6779) }
.module-relation-flow__arrow svg {
  width: 100%; height: 100%; fill: none; stroke: currentColor;
  stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
}
@media (max-width: 900px) {
.module-relation-flow { grid-template-columns: 1fr }
.module-relation-flow__arrow { width: 38px; height: 34px; margin: 0 auto }
.module-relation-flow__arrow svg { transform: rotate(90deg) }
}





.module-relation-flow > .module-relation-flow__arrow:last-child { display: none; }


.module-relation-flow + .module-relation-flow__weakness-chain-grid,
.module-relation-flow__weakness-chain-grid + .module-relation-flow,
.module-relation-flow + .module-relation-flow__rule-diagram,
.module-relation-flow__weakness-chain-grid + .module-relation-flow__rule-diagram,
.module-relation-flow__rule-diagram + .module-relation-flow,
.module-relation-flow__rule-diagram + .module-relation-flow__weakness-chain-grid { margin-top: 22px; }



  .module-relation-flow__matchup-triad-cell--current { border-color:var(--acc); background:var(--acc-s); }
  .module-relation-flow__matchup-triad-cell--bad { border-color:color-mix(in srgb,var(--dn)45%,transparent); background:var(--dn-s); }
  .module-relation-flow__matchup-triad-cell--good { border-color:color-mix(in srgb,var(--up)45%,transparent); background:var(--up-s); }
  .module-relation-flow__matchup-triad-cell-rank { display:block; font-size:13px; font-weight:800; letter-spacing:.05em; color:var(--mut); margin-bottom:7px; }
  .module-relation-flow__matchup-triad-cell-subtitle { display:flex; justify-content:center; gap:5px; margin-bottom:6px; }
  .module-relation-flow__matchup-triad-cell-value { display:block; font-size:31px; font-weight:800; letter-spacing:-.035em; line-height:1.05; }
  .module-relation-flow__matchup-triad-cell-value small { font-size:15px; font-weight:700; color:var(--mut); margin-left:4px; }
  .module-relation-flow__matchup-triad-cell-description { display:block; font-size:14px; color:var(--ink2); margin-top:4px; line-height:1.5; }
  .module-relation-flow__matchup-triad-cell--current .module-relation-flow__matchup-triad-cell-value { color:var(--acc-i); }
  .module-relation-flow__matchup-triad-cell--bad .module-relation-flow__matchup-triad-cell-value { color:var(--dn); }
  .module-relation-flow__matchup-triad-cell--good .module-relation-flow__matchup-triad-cell-value { color:var(--up); }

  .module-relation-flow__matchup-triad-cell-description b { color:var(--ink); font-weight:700; }

  .module-relation-flow__type-cell--self { background: var(--acc-s); border-color: var(--module-accent, #5747e0); }
  .module-relation-flow__type-cell--weak { background: var(--dn-s); border-color: rgba(226,60,66,.45); }
  .module-relation-flow__type-cell--strong { background: var(--up-s); border-color: rgba(61,214,140,.45); }

