/* 開業ページ 図表（mgv-open-）。visuals.css の .mgv 共通を前提に、追加classのみ定義 */

.mgv-open a { color: var(--mgv-blue); font-weight: 800; }

/* ---- cost ---- */
.mgv-open-mult { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 22px; padding: 14px 18px; background: var(--mgv-ink); color: #fff; border-left: 10px solid var(--mgv-mustard); }
.mgv-open-mult span { padding: 0 10px; font-size: 14px; font-weight: 800; background: var(--mgv-teal); color: var(--mgv-ink); }
.mgv-open-mult b { font-size: clamp(30px, 5vw, 52px); line-height: 1.2; font-weight: 900; color: var(--mgv-teal); }
.mgv-open-mult small { flex-basis: 100%; font-size: 14px; color: #cfe9ea; }
.mgv-open-bars { display: grid; gap: 14px; }
.mgv-open-bar-row { display: grid; grid-template-columns: 8.5em 1fr 9.5em; align-items: center; gap: 12px; font-size: 15px; }
.mgv-open-bar-y { font-weight: 800; line-height: 1.4; }
.mgv-open-bar-y small { display: block; font-size: 14px; font-weight: 700; color: var(--mgv-mute); }
.mgv-open-track { display: flex; height: 34px; background: #eef5f5; border: 2px solid var(--mgv-ink); }
.mgv-open-bar { display: block; height: 100%; }
.mgv-open-bar-old { background: var(--mgv-blue); }
.mgv-open-bar-now { background: var(--mgv-teal); }
.mgv-open-bar-range { background: repeating-linear-gradient(135deg, var(--mgv-teal) 0 6px, #fff 6px 12px); }
.mgv-open-bar-v { font-size: 16px; font-weight: 900; font-variant-numeric: tabular-nums; }
.mgv-open-axis { display: grid; grid-template-columns: 8.5em 1fr 9.5em; gap: 12px; font-size: 14px; color: var(--mgv-mute); }
.mgv-open-axis span:nth-child(1) { grid-column: 2; justify-self: start; }
.mgv-open-axis span:nth-child(2) { grid-column: 2; justify-self: center; margin-top: -1.6em; }
.mgv-open-axis span:nth-child(3) { grid-column: 2; justify-self: end; margin-top: -1.6em; }
.mgv-open-axis { margin-top: -4px; }
.mgv-open-axis span { position: relative; padding-top: 2px; }
.mgv-open-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 12px; font-size: 14px; }
.mgv-open-sw { display: inline-block; width: 18px; height: 12px; border: 2px solid var(--mgv-ink); }
.mgv-open-sw-now { background: var(--mgv-teal); }
.mgv-open-sw-range { background: repeating-linear-gradient(135deg, var(--mgv-teal) 0 4px, #fff 4px 8px); margin-left: 8px; }

/* ---- 共通のステップ（矢印で接続） ---- */
.mgv-open-steps { display: grid; gap: 26px; counter-reset: none; }
.mgv-open-steps-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mgv-open-steps-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mgv-open-steps-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; }
.mgv-open-step { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px 12px; background: #fff; border: 2px solid var(--mgv-ink); border-top: 8px solid var(--mgv-blue); font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.mgv-open-step:not(:last-child)::after { content: ""; position: absolute; right: -19px; top: 50%; width: 13px; height: 13px; border-top: 4px solid var(--mgv-ink); border-right: 4px solid var(--mgv-ink); transform: translateY(-50%) rotate(45deg); }
.mgv-open-no { align-self: flex-start; padding: 0 8px; font: 900 14px/1.5 "Helvetica Neue", Arial, sans-serif; background: var(--mgv-teal); color: var(--mgv-ink); }
.mgv-open-step > b { font-size: clamp(16px, 1.8vw, 19px); line-height: 1.4; font-weight: 900; }
.mgv-open-step ul { display: grid; gap: 4px; }
.mgv-open-step li { position: relative; padding-left: 1.1em; font-size: 14px; }
.mgv-open-step li::before { content: ""; position: absolute; left: 0; top: .65em; width: 7px; height: 7px; background: var(--mgv-blue); }
.mgv-open-s { font-size: 14px; color: var(--mgv-mute); }
.mgv-open-step-ink { background: var(--mgv-ink); color: #fff; border-top-color: var(--mgv-mustard); }
.mgv-open-step-ink .mgv-open-s { color: #cfe9ea; }
.mgv-open-step-ink li::before { background: var(--mgv-teal); }
.mgv-open-step-soft { background: var(--mgv-teal-soft); }
.mgv-open-chips { display: flex !important; flex-wrap: wrap; gap: 6px !important; }
.mgv-open-chips li { padding: 2px 10px; font-weight: 800; background: var(--mgv-teal-soft); border: 2px solid var(--mgv-ink); }
.mgv-open-chips li::before { display: none; }
.mgv-open-note-line { margin-top: 18px; padding: 12px 16px; font-size: 14px; font-weight: 800; border-left: 6px solid var(--mgv-mustard); background: #fbf7e8; }

/* 戻りの矢印 */
.mgv-open-back { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 10px 16px; border: 2px dashed var(--mgv-blue); font-size: 14px; font-weight: 800; color: var(--mgv-blue); }
.mgv-open-back-arr { flex: 0 0 40px; height: 14px; position: relative; background: linear-gradient(var(--mgv-blue), var(--mgv-blue)) 0 50% / 100% 3px no-repeat; }
.mgv-open-back-arr::before { content: ""; position: absolute; left: 0; top: 50%; width: 10px; height: 10px; border-left: 3px solid var(--mgv-blue); border-bottom: 3px solid var(--mgv-blue); transform: translateY(-50%) rotate(45deg); }

/* ---- domains ---- */
.mgv-open-dflow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; }
.mgv-open-dnode { display: flex; flex-direction: column; gap: 6px; padding: 18px 16px; border: 2px solid var(--mgv-ink); background: #fff; color: var(--mgv-ink) !important; text-decoration: none; font-weight: 400 !important; transition: transform .2s, box-shadow .2s; }
.mgv-open-dnode:hover, .mgv-open-dnode:focus-visible { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--mgv-teal); }
.mgv-open-dnode:focus-visible { outline: 3px solid var(--mgv-blue); outline-offset: 3px; }
.mgv-open-dno { align-self: flex-start; padding: 0 8px; font-size: 14px; font-weight: 800; background: var(--mgv-teal); color: var(--mgv-ink); }
.mgv-open-dnode b { font-size: clamp(18px, 2.2vw, 24px); line-height: 1.35; font-weight: 900; }
.mgv-open-dwhat { flex: 1; font-size: 14px; }
.mgv-open-dmore { align-self: flex-start; font-size: 14px; font-weight: 800; color: var(--mgv-blue); border-bottom: 2px solid var(--mgv-mustard); }
.mgv-open-d-back { background: var(--mgv-ink); color: #fff !important; }
.mgv-open-d-back .mgv-open-dmore { color: var(--mgv-teal); }
.mgv-open-d-ops { background: var(--mgv-teal-soft); }
.mgv-open-d-front { border-top: 8px solid var(--mgv-blue); }
.mgv-open-dlink { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; width: clamp(96px, 12vw, 150px); padding: 0 8px; text-align: center; font-size: 14px; font-weight: 800; line-height: 1.5; }
.mgv-open-darr { position: relative; display: block; width: 100%; height: 14px; background: linear-gradient(var(--mgv-ink), var(--mgv-ink)) 0 50% / calc(100% - 6px) 3px no-repeat; }
.mgv-open-darr::after { content: ""; position: absolute; right: 1px; top: 50%; width: 10px; height: 10px; border-top: 3px solid var(--mgv-ink); border-right: 3px solid var(--mgv-ink); transform: translateY(-50%) rotate(45deg); }
.mgv-open-goal { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 14px; padding: 14px 18px; background: var(--mgv-ink); color: #fff; border-left: 10px solid var(--mgv-mustard); }
.mgv-open-goal span { padding: 0 10px; font-size: 14px; font-weight: 800; background: var(--mgv-teal); color: var(--mgv-ink); }
.mgv-open-goal b { font-size: clamp(20px, 2.6vw, 26px); font-weight: 900; }

/* ---- tablet / mobile ---- */
@media (max-width: 960px) {
  .mgv-open-steps-4, .mgv-open-steps-5 { grid-template-columns: 1fr; gap: 24px; }
  .mgv-open-steps-3 { grid-template-columns: 1fr; gap: 24px; }
  .mgv-open-step:not(:last-child)::after { right: auto; left: 28px; top: auto; bottom: -19px; transform: rotate(135deg); }
  .mgv-open-dflow { grid-template-columns: 1fr; }
  .mgv-open-dlink { width: auto; flex-direction: row; justify-content: flex-start; gap: 12px; padding: 12px 6px 12px 22px; text-align: left; }
  .mgv-open-dlink .mgv-open-darr { flex: 0 0 14px; width: 14px; height: 38px; background: linear-gradient(var(--mgv-ink), var(--mgv-ink)) 50% 0 / 3px calc(100% - 6px) no-repeat; }
  .mgv-open-dlink .mgv-open-darr::after { right: auto; left: 50%; top: auto; bottom: 0; transform: translateX(-50%) rotate(135deg); }
}
@media (max-width: 720px) {
  .mgv-open-bar-row { grid-template-columns: 1fr; gap: 6px; }
  .mgv-open-bar-y small { display: inline; margin-left: 6px; }
  .mgv-open-axis { grid-template-columns: 1fr; }
  .mgv-open-axis span:nth-child(n) { grid-column: 1; }
  .mgv-open-axis { display: flex; justify-content: space-between; margin-top: 0; }
  .mgv-open-axis span:nth-child(n) { margin-top: 0; }
  .mgv-open-mult { padding: 12px 12px; border-left-width: 8px; }
  .mgv-open-goal { padding: 12px; border-left-width: 8px; }
  .mgv-open-back { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .mgv-open-dnode { transition: none; }
  .mgv-open-dnode:hover, .mgv-open-dnode:focus-visible { transform: none; }
}
/* Codexによる支給イラストの組み込みと、統合時の読みやすさ調整 */
.mgv-open-art{width:100%;aspect-ratio:1.7;object-fit:cover;margin-bottom:10px}.mgv-open-dnode{min-width:0;position:relative}.mgv-open-dlink{width:68px;font-size:13px;padding-inline:5px}.mgv-open-dnode b{font-size:21px}.mgv-open .mgv-open-dnode{padding:18px 14px}.mgv-open-dno{font-size:13px;padding-inline:4px}.mgv-open-dflow{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr)}
@media(max-width:960px){.mgv-open-dflow{grid-template-columns:1fr}.mgv-open-dlink{width:auto;font-size:14px}.mgv-open .mgv-open-dnode{padding:20px 110px 20px 18px}.mgv-open-art{position:absolute;right:12px;top:20px;width:85px;aspect-ratio:1;margin:0}.mgv-open-dnode b{font-size:23px}}