/* はじめに。style.css・flow.css・fm.css の上に重ねる */
.top .lead a { color: #1d4ed8; text-underline-offset: 2px; }
.ix-themes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ix-themes li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 12px; padding: 10px 12px; color: var(--muted); }
.ix-themes li.pub { background: var(--paper); border: 1px solid var(--line); color: var(--ink2); }
.ix-n { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font: 600 13px var(--latin); background: #e2e8f0; color: #475569; }
.ix-themes li.pub .ix-n { background: #0f766e; color: #fff; }
.ix-themes b { font-size: 14.5px; color: var(--ink); }
.ix-themes p { margin: 3px 0 0; font-size: 12.5px; }
.ix-tabs { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 6px !important; }
.ix-tabs a { font-size: 12.5px; font-weight: 700; color: #0f766e; background: #f0fdfa; border: 1px solid #99f6e4; border-radius: 999px; padding: 2px 10px; text-decoration: none; }
.ix-tabs a:hover { border-color: #0f766e; }
.ix-soon { display: inline-block; font-size: 11px !important; font-weight: 700; border-radius: 6px; padding: 0 7px; background: #e2e8f0; color: #475569; }
.ix-co { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 12px; align-items: start; }
.ix-prof { padding: 12px 16px; }
.ix-prof dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 14px; font-size: 13px; }
.ix-prof dt { font-weight: 700; color: var(--muted); font-size: 12px; }
.ix-prof dd { margin: 0; color: var(--ink2); }
.ix-flowmap { display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) 24px minmax(0, 1fr); grid-auto-rows: auto; gap: 8px 4px; align-items: center; }
.ix-sys { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.ix-sys:hover { border-color: #0f766e; }
.ix-sys b { font-size: 14px; }
.ix-sys span { font-size: 11.5px; color: var(--muted); }
.ix-sys.acc { align-self: stretch; justify-content: center; background: #f0fdfa; border-color: #99f6e4; }
.ix-arrow { text-align: center; font: 600 16px var(--latin); color: #94a3b8; }
.ix-arrow.long { height: 2px; background: #cbd5e1; position: relative; margin: 0 6px; }
.ix-arrow.long::after { content: ""; position: absolute; right: -4px; top: -5px; border: 6px solid transparent; border-left-color: #cbd5e1; border-right: 0; }
.ix-order { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; counter-reset: o; }
.ix-order li { counter-increment: o; }
.ix-order a { display: flex; flex-direction: column; gap: 3px; height: 100%; box-sizing: border-box; text-decoration: none; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.ix-order a:hover { border-color: #0f766e; }
.ix-order a b::before { content: counter(o) ". "; font-family: var(--latin); color: #0f766e; }
.ix-order a span { font-size: 12.5px; color: var(--ink2); }
.ix-whenh { margin: 16px 0 8px; font-size: 14px; }
.ix-when { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ix-when a { display: flex; flex-direction: column; gap: 3px; height: 100%; box-sizing: border-box; text-decoration: none; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.ix-when a:hover { border-color: #0f766e; }
.ix-when a span { font-size: 12.5px; color: var(--ink2); }
.ix-tabs a:focus-visible, .ix-sys:focus-visible, .ix-order a:focus-visible, .ix-when a:focus-visible, .top .lead a:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
@media (max-width: 1100px) {
  .ix-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ix-co { grid-template-columns: minmax(0, 1fr); }
  .ix-order, .ix-when { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .ix-themes, .ix-order, .ix-when { grid-template-columns: minmax(0, 1fr); }
  /* スマホでは矢印の図をやめて、システムを縦に並べる */
  .ix-flowmap { grid-template-columns: minmax(0, 1fr); }
  .ix-flowmap .ix-arrow { display: none; }
  .ix-flowmap > * { grid-row: auto !important; grid-column: auto !important; }
}