@charset "UTF-8";

/* An isolated transplant of the selected OWN YOUR GROWTH frame. */
.mg-growth {
  --mg-cyan: #72dbe7;
  --mg-line: rgba(107, 179, 203, .25);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: radial-gradient(ellipse at 80% 35%, #123d54a1, transparent 62%), #04121d;
  color: #e8f2f5;
  font-family: "Manrope", "Noto Sans JP", sans-serif;
  font-size: 15px;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
}
.mg-growth *, .mg-growth *::before, .mg-growth *::after { box-sizing: border-box; }
.mg-growth :is(h2, p) { margin: 0; }
.mg-growth [hidden] { display: none !important; }
.mg-inner { width: calc(100% - 112px); max-width: 1550px; margin-inline: auto; padding-block: 130px 115px; }
.mg-kicker { display: flex; align-items: center; gap: 30px; margin-bottom: 70px; color: #93afbd; font-size: 10px; font-weight: 700; line-height: 1.6; letter-spacing: .08em; }
.mg-kicker > span:first-child { color: var(--mg-cyan); }
.mg-kicker > span:last-child { letter-spacing: .02em; }
.mg-kicker > i { height: 1px; flex: 1; background: linear-gradient(90deg, #3d879a85, #3d879a15); }
.mg-layout { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 4%; }
.mg-copy, .mg-interactive { min-width: 0; }
.mg-growth .mg-title { font-size: clamp(46px, 5.9vw, 92px); font-weight: 900; line-height: 1.25; letter-spacing: -.065em; color: #e8f2f5; }
.mg-title > span { color: var(--mg-cyan); }
.mg-growth .mg-lead { margin: 36px 0 22px; font-size: 25px; font-weight: 700; line-height: 1.7; letter-spacing: -.035em; }
.mg-growth .mg-description { max-width: 390px; color: #a5bcc8; font-size: 13px; line-height: 2.2; }
.mg-growth .mg-link { display: flex; align-items: center; justify-content: space-between; gap: 28px; max-width: 380px; min-height: 60px; margin-top: 30px; padding-block: 15px; border-bottom: 1px solid #477789; color: #c0dce6; text-decoration: none; font-size: 12px; font-weight: 700; line-height: 1.7; }
.mg-link > span { color: var(--mg-cyan); font-family: Arial, sans-serif; font-size: 23px; transition: transform .35s; }
.mg-link:hover { color: #eafaff; border-color: var(--mg-cyan); }
.mg-link:hover > span { transform: translate(4px, -4px); }
.mg-growth :is(a, button):focus-visible { outline: 2px solid #8de2ec; outline-offset: 5px; }
.mg-switch { display: flex; width: max-content; max-width: 100%; margin: 0 auto; padding: 0; border: 1px solid #44758b; background: #03121bcc; }
.mg-switch > button { border: 0; border-radius: 0; padding: 13px 20px; background: none; color: #9bb5c3; font: inherit; font-size: 10px; line-height: 1.5; cursor: pointer; transition: background .4s, color .4s; }
.mg-switch > button[aria-pressed="true"] { color: #d8f2f7; background: #12394b; box-shadow: inset 0 -2px #73d2e2; font-weight: 700; }
.owned-position-preview .mg-growth .mg-channel-key { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; }
.owned-position-preview .mg-channel-key li { min-width: 0; padding: 11px 2px 10px; border-top: 1px solid #bb847266; }
.owned-position-preview .mg-channel-key strong { display: block; color: #edc6bb; font-size: 12px; font-weight: 700; line-height: 1.7; }
.owned-position-preview .mg-channel-key span { display: block; margin-top: 4px; color: #9bb2bf; font-size: 10px; line-height: 1.7; }
.owned-position-preview .mg-channel-key:not([hidden]) + .mg-stage { margin-top: 20px; }
.mg-stage { position: relative; width: 100%; aspect-ratio: 1.2; margin-top: 40px; perspective: 900px; color: var(--mg-cyan); transition: color .7s; }
.mg-orbit { position: absolute; inset: 0; transform: rotateX(18deg) rotateZ(-9deg); filter: drop-shadow(0 0 25px #00eaff13); }
.mg-orbit svg { display: block; width: 100%; height: 100%; overflow: visible; }
.mg-ring, .mg-core { stroke: currentColor; fill: none; stroke-width: 1; opacity: .25; }
.mg-core { stroke-dasharray: 2 7; opacity: .3; }
.mg-spoke { fill: none; stroke: currentColor; stroke-width: .5; opacity: .2; }
.mg-flow-arc { stroke: url(#mg-flow-gradient); stroke-width: 2; fill: none; stroke-dasharray: 5 20; animation: mg-flow-run 12s linear infinite; filter: drop-shadow(0 0 7px var(--mg-cyan)); }
.mg-flow-point { fill: currentColor; filter: drop-shadow(0 0 6px var(--mg-cyan)); }
.mg-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 36%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; flex-direction: column; border: 1px solid #6cc5d9; border-radius: 50%; background: radial-gradient(circle, #22748d40, #051925 75%); box-shadow: 0 0 75px #44b5d01c, inset 0 0 55px #43aeca1f; text-align: center; }
.mg-center > span { font-size: 7px; letter-spacing: .12em; }
.mg-center strong { display: block; margin: 9px 0; font-size: 38px; font-weight: 800; line-height: 1.35; letter-spacing: .05em; }
.mg-center small { font-size: 8px; color: #d1e6ed; }
.mg-node { position: absolute; min-width: 120px; padding: 13px 10px; border: 0; border-bottom: 2px solid #67bcd0; border-radius: 2px; transform: translate(-50%, -50%) skew(-5deg); background: #071e2aeb; text-align: center; }
.mg-node small { display: block; font-size: 6px; letter-spacing: .13em; color: #9bb2bf; }
.mg-node b { display: block; margin-top: 4px; color: #dcecf2; font-size: 14px; font-weight: 800; }
.mg-node-top { top: 14%; left: 50%; }
.mg-node-right { top: 50%; left: 85%; }
.mg-node-bottom { top: 86%; left: 50%; }
.mg-node-left { top: 50%; left: 15%; }
.mg-summary { border: 1px solid #5b98ac45; border-left: 3px solid #6dc6d9; padding: 15px 8px 15px 20px; background: linear-gradient(90deg, #103c4e47, transparent); color: #b1d9e5; text-align: left; font-size: 17px; font-weight: 600; }
.mg-summary span { margin-right: 12px; color: var(--mg-cyan); }
.mg-footer { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 12px; padding-top: 13px; }
.mg-growth .mg-note { flex: 1 1 340px; color: #9bb2bf; font-size: 10px; line-height: 1.9; }
.mg-pause { margin-left: auto; padding: 3px 7px; border: 1px solid #44758b; background: transparent; color: #a5bcc8; font: inherit; font-size: 9px; line-height: 1.6; cursor: pointer; }
.mg-borrowed-only, .mg-drain-lines { display: none !important; }
.mg-stage[data-mode="borrowed"] { color: #dd9885; }
.mg-stage[data-mode="borrowed"] .mg-borrowed-only, .mg-stage[data-mode="borrowed"] .mg-drain-lines { display: block !important; }
.mg-stage[data-mode="borrowed"] :is(.mg-owned-only, .mg-ring, .mg-core, .mg-spoke, .mg-flow-arc, .mg-flow-point) { display: none !important; }
.mg-stage[data-mode="borrowed"] .mg-center { border-color: #956f66; background: radial-gradient(circle, #a9563f25, #051925 80%); box-shadow: 0 0 60px #ad674b13; }
.mg-stage[data-mode="borrowed"] .mg-node { border-bottom-color: #bb847255; }
.mg-stage[data-mode="borrowed"] .mg-node-right b { color: #edb5a4; }
.mg-growth.mg-enhanced [data-mg-reveal] { opacity: 0; transform: translateY(32px); transition: opacity 1s ease, transform 1.2s cubic-bezier(.16, 1, .3, 1); }
.mg-growth.mg-enhanced [data-mg-reveal].mg-visible { opacity: 1; transform: none; }
.mg-growth[data-mg-paused="true"] .mg-flow-arc, .motion-paused .mg-flow-arc, .motion-reduced .mg-flow-arc { animation-play-state: paused !important; }
.mg-growth[data-mg-paused="true"] .mg-flow-point, .motion-paused .mg-flow-point, .motion-reduced .mg-flow-point { display: none; }
.mg-growth[data-mg-paused="true"] [data-mg-reveal], .motion-paused .mg-growth [data-mg-reveal], .motion-reduced .mg-growth [data-mg-reveal] { opacity: 1; transform: none; transition: none; }
@keyframes mg-flow-run { to { stroke-dashoffset: -100; } }

@media (max-width: 1200px) {
  .mg-inner { width: calc(100% - 80px); }
  .mg-growth .mg-title { font-size: 5.7vw; }
  .mg-center strong { font-size: 32px; }
  .mg-node { min-width: 100px; }
  .mg-node b { font-size: 12px; }
}
@media (max-width: 900px) {
  .mg-inner { width: calc(100% - 48px); padding-block: 85px; }
  .mg-kicker { gap: 20px; margin-bottom: 45px; font-size: 9px; }
  .mg-layout { grid-template-columns: 1fr; gap: 50px; }
  .mg-growth .mg-title { font-size: 9.3vw; }
  .mg-growth .mg-description { max-width: 600px; }
  .mg-interactive { max-width: 600px; width: 100%; margin-inline: auto; }
  .mg-switch > button { padding: 12px 25px; font-size: 12px; }
  .mg-stage { margin-top: 30px; }
  .mg-center strong { font-size: 40px; }
  .mg-center > span { font-size: 8px; }
  .mg-center small { font-size: 10px; }
  .mg-node { min-width: 120px; }
  .mg-node b { font-size: 14px; }
}
@media (max-width: 520px) {
  .owned-position-preview .mg-growth .mg-channel-key { grid-template-columns: 1fr; gap: 0; margin-top: 20px; }
  .owned-position-preview .mg-channel-key li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-block: 9px; }
  .owned-position-preview .mg-channel-key strong { font-size: 11px; }
  .owned-position-preview .mg-channel-key span { margin-top: 0; text-align: right; font-size: 10px; }
  .mg-inner { width: calc(100% - 36px); padding-block: 64px; }
  .mg-kicker { gap: 16px; margin-bottom: 35px; font-size: 7px; }
  .mg-kicker > span:last-child { display: none; }
  .mg-growth .mg-title { font-size: 11.6vw; line-height: 1.25; }
  .mg-growth .mg-lead { margin: 25px 0 17px; font-size: 20px; }
  .mg-growth .mg-description { font-size: 12px; }
  .mg-layout { gap: 35px; }
  .mg-switch { width: 100%; justify-content: center; }
  .mg-switch > button { flex: 1; padding: 12px 9px; font-size: 10px; }
  .mg-stage { margin: 28px 0 15px; aspect-ratio: 1.08; }
  .mg-center { width: 41%; }
  .mg-center > span { font-size: 6px; letter-spacing: .03em; }
  .mg-center strong { margin: 6px 0; font-size: 28px; }
  .mg-center small { font-size: 7px; }
  .mg-node { min-width: 84px; padding: 9px 6px; }
  .mg-node small { font-size: 5px; }
  .mg-node b { margin-top: 3px; font-size: 10px; }
  .mg-node-left { left: 12%; }
  .mg-node-right { left: 88%; }
  .mg-summary { padding: 14px 10px; font-size: 12px; }
  .mg-growth .mg-note { font-size: 9px; }
}
@media (max-width: 360px) {
  .mg-switch > button { font-size: 9px; }
  .mg-center strong { font-size: 23px; }
  .mg-node { min-width: 74px; }
}
@media (prefers-reduced-motion: reduce) {
  .mg-growth *, .mg-growth *::before, .mg-growth *::after { animation: none !important; transition: none !important; }
  .mg-growth [data-mg-reveal] { opacity: 1 !important; transform: none !important; }
  .mg-growth .mg-flow-point { display: none; }
}