/* チャージルート全体図の見た目。色・箱・矢印はツール（../style.css）と同じ考え方にそろえている */
.mp { margin-top: 16px; padding: 30px 16px 26px; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); }
.mp__hint { margin: 0 0 14px; font-size: .8rem; font-weight: 700; color: var(--main-dark); background: #e3f6f4; border-radius: 8px; padding: 6px 12px; width: fit-content; }
.mp__board { position: relative; }
.mp__lines { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }

/* 線と矢印。選んでいるときは、関係する線を緑で太く、ほかは薄く */
.mp__edge { fill: none; stroke: var(--arrow); stroke-width: 1.6; transition: stroke .25s, stroke-width .25s, opacity .25s; }
/* カードからの線は数が多いので、普段は隠し、選んだときに関係する線だけ出す */
.mp__edge--card { display: none; }
.mp__board.is-filter .mp__edge--card.is-on { display: inline; }
/* 矢印の頭（map.js で線の向きに合わせて回転させて描く）。線と同じ色・同じ出し方 */
.mp__head { fill: var(--arrow); transition: fill .25s, opacity .25s; }
.mp__head--card { display: none; }
.mp__board.is-filter .mp__head { opacity: .12; }
.mp__board.is-filter .mp__head.is-on { opacity: 1; fill: var(--main-dark); }
.mp__board.is-filter .mp__head--card.is-on { display: inline; }
.mp__board.is-filter .mp__head.is-best { opacity: 1; fill: var(--best); }
.mp__board.is-filter .mp__edge { opacity: .12; }
.mp__board.is-filter .mp__edge.is-on { opacity: 1; stroke: var(--main-dark); stroke-width: 2.6; }
/* オレンジのルート（そのチャージ先の最大の還元率になるルート） */
.mp__board.is-filter .mp__edge.is-best { opacity: 1; stroke: var(--best); stroke-width: 3; }

/* 区間の還元率。白いふちどりで線の上でも読めるように */
.mp__rate { font-size: 11px; font-weight: 700; fill: var(--main-dark); text-anchor: middle; paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; transition: opacity .25s; }
.mp__rate.is-zero { fill: var(--muted); font-weight: 400; }
.mp__rate--card { display: none; }   /* カードからの線の数字は、カードを選んだときだけ */
.mp__board.is-card-mode .mp__rate--card.is-on { display: inline; }
.mp__board.is-filter .mp__rate { opacity: .2; }
.mp__board.is-filter .mp__rate.is-on { opacity: 1; }
.mp__board.is-filter .mp__rate.is-best:not(.is-zero) { fill: var(--best-ink); font-weight: 700; }   /* オレンジの矢印の数字もオレンジ（0%は元の色のまま） */

/* 箱：決済サービスはツールの図と同じ角丸の箱、カードは横長の小さな箱、最後のチャージ先は濃い色 */
.mp__node {
  position: absolute; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 6px 4px; font: inherit; font-size: 11.5px; font-weight: 700; line-height: 1.3; color: var(--ink); text-align: center;
  background: #f7f9fb; border: 1px solid var(--line); border-radius: 12px; cursor: pointer;
  transition: opacity .25s, border-color .25s, box-shadow .25s, transform .12s;
}
.mp__node:hover { border-color: var(--btn-line-hover); }
.mp__node:active { transform: scale(.97); }
.mp__node.is-card, .mp__node.is-start { flex-direction: row; justify-content: flex-start; gap: 8px; padding: 4px 8px; text-align: left; background: #fff; border-color: var(--btn-line); box-shadow: var(--shadow-sm); font-size: 11px; }
.mp__node.is-end { background: var(--dark); border-color: transparent; color: #fff; }
.mp__icon { display: block; flex: none; height: 26px; width: auto; }
.mp__icon--wide { height: 19px; }
.mp__node.is-card .mp__icon, .mp__node.is-start .mp__icon { height: 20px; }
.mp__node.is-card .mp__icon--wide { height: 16px; }
.mp__name { display: block; min-width: 0; overflow: hidden; text-wrap: balance; }
.mp__badge { display: block; margin-top: 1px; font-size: 10.5px; color: var(--main-dark); }
.mp__node.is-end .mp__badge { color: var(--accent); }
/* カードを選んだとき、そのチャージ先の最大の還元率まで出せる数字はオレンジ（濃い箱の上でも読めるよう、白い札にのせる） */
.mp__badge.is-best { color: var(--best-ink); }
.mp__node.is-end .mp__badge.is-best { margin-top: 3px; padding: 0 6px; border-radius: 999px; background: #fff; color: var(--best-ink); }
.mp__bestnote { margin: 12px 0 0; font-size: .78rem; color: var(--text); }
.mp__bestnote b { padding: 1px 6px; border-radius: 4px; background: var(--best-bg); color: var(--best-ink); }   /* 「オレンジのルート」の文字は薄いオレンジの背景 */
.mp__board.is-filter .mp__node { opacity: .3; }
.mp__board.is-filter .mp__node.is-on { opacity: 1; border-color: var(--main); }
.mp__board.is-filter .mp__node.is-sel { box-shadow: 0 0 0 3px rgba(42, 157, 149, .35); }
.mp__board.is-filter .mp__node.is-best { border: 2px solid var(--best); }
.mp__board.is-filter .mp__node.is-best.is-sel { box-shadow: 0 0 0 3px rgba(240, 140, 0, .25); }
/* アイコンの中の文字（GOLD・DEBIT）は大きくならないように固定 */
.mp__node svg text { font-size: 5.2px !important; }

/* スマホ（上から下）：文字を少し小さく */
.mp__board.is-vertical .mp__node { font-size: 10px; }
.mp__board.is-vertical .mp__node.is-card, .mp__board.is-vertical .mp__node.is-start { font-size: 10px; gap: 6px; padding: 3px 6px; }
.mp__board.is-vertical .mp__icon { height: 22px; }
.mp__board.is-vertical .mp__icon--wide { height: 16px; }
.mp__board.is-vertical .mp__badge { font-size: 9.5px; line-height: 1.2; }
.mp__board.is-vertical .mp__max { display: block; font-size: 8.5px; }   /* 細い箱では「最大」を数字の上の行に */
.mp__board.is-vertical .mp__node { padding: 6px 2px; }
.mp__board.is-vertical .mp__name { overflow: visible; }

/* 図の下の説明：選んだものに関係するルート */
.mp-info { margin-top: 16px; padding: 18px 16px; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); }
/* 見出し：左に緑の縦線（おすすめカードの見出しと同じ） */
.mp-info__title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 12px; font-size: 1.05rem; color: var(--ink); }
.mp-info__title::before { content: ""; flex: 0 0 4px; align-self: stretch; min-height: 1.1em; border-radius: 4px; background: linear-gradient(180deg, var(--main), #3fa7e0); }
.mp-info__title small { font-size: .78rem; font-weight: 400; color: var(--sub); }
.mp-info__title--card { margin-top: 28px; }
/* カード・サービスの説明（特徴・お得な発行方法・始め方） */
.mp-info__cardname { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: .95rem; font-weight: 700; color: var(--ink); }
.mp-info__cardname .mp__icon--wide { height: 26px; }
.mp-info__card { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fbfcfd; }
.mp-info__card .note-block + .note-block { margin-top: 12px; }
.mp-info__card .note-block.is-features li { line-height: 1.75; }   /* 特徴は1項目が長いので、行の間・項目の間を広めに */
.mp-info__card .note-block.is-features li + li { margin-top: 14px; }
.mp-info__card .note-block.is-features { margin-bottom: 16px; }
.mp-info__arrow { margin: 0 .35em; color: var(--muted); }
.mp-info__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.mp-info__row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 12px; width: 100%; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; font: inherit; font-size: .84rem; text-align: left; color: var(--text); background: #fff; cursor: pointer; transition: background .15s; }
.mp-info__row:hover { background: var(--hover); }
.mp-info__goal { font-size: .72rem; font-weight: 700; color: var(--main-dark); background: #e3f6f4; border-radius: 999px; padding: 1px 10px; white-space: nowrap; }
.mp-info__row b { color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mp-info__row b::after { content: "›"; margin-left: 8px; color: var(--muted); font-weight: 400; }
/* オレンジのルート：数字だけオレンジ（背景・枠・ルートの文字はほかと同じ） */
.mp-info__row.is-best b { color: var(--best-ink); }
.mp-info__more { margin: -6px 0 10px; font-size: .74rem; color: var(--sub); }   /* 見出しのすぐ下 */
@media (max-width: 600px) {
  .mp { padding: 24px 12px 20px; }
  .mp-info__row { grid-template-columns: 1fr auto; }
  .mp-info__goal { grid-column: 1 / -1; width: fit-content; }
}
.mp-info__card .rank__spec { margin: 0 0 12px; }
.mp__labels { z-index: 2; }   /* 還元率の数字は箱より手前 */
.mp__board.is-vertical .mp__rate { font-size: 10px; }