

:root {
  --hl: #51E7F2;
  --hl-hover: #8CF0F7;
  --hl: #51E7F2;
  --game-ink: var(--primary-dark);
}
.gapt__row em { background: rgba(81,231,242,.1); }
.float-cta { border-color: var(--tint-line); }

.nw { display: inline-block; }

.pswitch { display: flex; align-items: center; gap: .125rem; margin-left: 1.25rem; padding: .1875rem; border: 1px solid rgba(255,255,255,.55); border-radius: 100vh; background: rgba(255,255,255,.08); font-size: .75rem; font-weight: 700; line-height: 1; flex-shrink: 0; }
.pswitch a { display: flex; align-items: center; height: 1.75rem; padding: 0 .75rem; border-radius: 100vh; color: #fff; white-space: nowrap; transition: background-color .2s, color .2s; }
.pswitch a:hover { color: #fff; }
.pswitch a.is-current { background: #fff; color: var(--primary); }
.header.is-scrolled .pswitch { border-color: rgba(0,0,0,.16); background: rgba(255,255,255,.6); }
.header.is-scrolled .pswitch a { color: var(--text); }
.header.is-scrolled .pswitch a:hover { color: #fff; }
.header.is-scrolled .pswitch a.is-current { background: var(--primary); color: #fff; }
.pswitch--menu { display: none; }
.mobile-nav .pswitch--menu { display: inline-flex; margin: .5rem 0 1rem; border-color: rgba(0,0,0,.16); background: #fff; font-size: .8125rem; }
.mobile-nav .pswitch--menu a { height: 2.125rem; padding: 0 .85rem; color: var(--text); }
.mobile-nav .pswitch--menu a.is-current { background: var(--primary); color: #fff; }

.mv__support { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.25rem; color: #fff; font-size: .9375rem; font-weight: 700; text-decoration: underline; text-underline-offset: .3em; text-decoration-color: rgba(81,231,242,.7); }
.mv__support::after { content: "→"; color: #fff; }
.mv__support:hover { color: #B9C6E2; }
.mv__float { position: absolute; z-index: 4; display: flex; align-items: center; gap: .6rem; padding: .6rem .9rem; border-radius: .875rem; background: #fff; color: var(--text); box-shadow: 0 16px 36px rgba(0,0,0,.28); font-size: .8125rem; font-weight: 700; line-height: 1.45; animation: floatY 5s ease-in-out infinite; }
.mv__float small { display: block; font-size: .6875rem; font-weight: 700; color: var(--muted); }
.mv__float--pt { left: 4%; top: 6%; }
.mv__float--pt b { font-family: var(--font-num); font-size: 1.75rem; font-weight: 600; color: var(--primary); line-height: 1; }
.mv__float--pt b small { display: inline; font-size: .875rem; color: var(--primary); margin-left: .1rem; }
.mv__float--badge { right: 2%; top: 46%; animation-delay: -1.6s; }
.mv__float--badge img { width: 44px; height: 44px; }
.mv__float--rank { right: 10%; bottom: 4%; flex-direction: column; align-items: flex-start; gap: 0; padding: .65rem 1rem; background: var(--primary-dark); color: #fff; border: 1px solid rgba(81,231,242,.4); animation-delay: -3.2s; }
.mv__float--rank small { color: #B9C6E2; }
.mv__float--rank b { font-size: .9375rem; }
.mv__float--rank span { font-family: var(--font-num); font-size: 1.25rem; letter-spacing: .04em; }
.mv__float--rank i { font-style: normal; color: #fff; margin: 0 .2rem; }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.stall { margin-top: 3rem; }
.stall__flow { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .75rem; margin-bottom: 2rem; }
.stall__flow li { padding: .55rem 1.1rem; border-radius: 100vh; background: #fff; border: 1px solid var(--tint-line); font-size: .9375rem; font-weight: 700; color: var(--primary); }
.stall__flow li.is-stop { padding: 0; border: 0; background: none; }
.stall__flow li.is-stop i { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--text); color: #fff; font-style: normal; font-size: .875rem; }
.stall__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.stall__card { padding: 1.5rem 1.5rem 1.6rem; border-radius: var(--radius); background: #fff; border: 1px solid var(--tint-line); box-shadow: var(--shadow-soft); }
.stall__where { display: flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 700; color: var(--primary); }
.stall__where span { font-family: var(--font-num); font-size: 1.25rem; color: var(--primary); }
.stall__card h3 { margin: .35rem 0 .9rem; font-size: 1.375rem; }
.turn { margin-top: 2.5rem; padding: 2.25rem 2.5rem; border-radius: var(--radius); background: linear-gradient(135deg, var(--primary), var(--primary-mid)); color: #fff; }
.turn__label { display: inline-block; padding: .3rem 1rem; border-radius: 100vh; background: rgba(255,255,255,.14); color: #fff; font-size: .9375rem; font-weight: 700; }
.turn__title { margin-top: .75rem; font-size: 1.75rem; line-height: 1.5; }
.turn__title em { font-style: normal; color: var(--hl); }
.turn__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.5rem; }
.turn__list li { padding: 1.1rem 1.25rem; border-radius: .75rem; background: rgba(255,255,255,.08); }
.turn__list b { display: block; font-size: 1.125rem; }
.turn__list p { margin-top: .35rem; font-size: .9375rem; line-height: 1.75; color: rgba(255,255,255,.85); }

.pdca { display: grid; grid-template-columns: 360px 1fr; gap: 3rem; align-items: center; margin-top: 3rem; padding: 2.5rem; border-radius: var(--radius); background: linear-gradient(135deg, var(--primary), var(--primary-mid)); color: #fff; }
.pdca__ring { position: relative; width: 320px; aspect-ratio: 1; margin-inline: auto; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); }
.pdca__q { position: absolute; display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; background: #fff; color: var(--primary); font-family: var(--font-num); font-size: 2.75rem; font-weight: 600; box-shadow: 0 10px 24px rgba(0,0,0,.2); }
.pdca__q--p { left: 50%; top: -24px; transform: translateX(-50%); }
.pdca__q--d { right: -24px; top: 50%; transform: translateY(-50%); }
.pdca__q--c { left: 50%; bottom: -24px; transform: translateX(-50%); }
.pdca__q--a { left: -24px; top: 50%; transform: translateY(-50%); background: #fff; color: var(--primary); }
.pdca__core { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; font-size: 1.125rem; line-height: 1.6; letter-spacing: .08em; }
.pdca__list { display: grid; gap: .75rem; }
.pdca__list li { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem; align-items: start; padding: 1rem 1.25rem; border-radius: .75rem; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); }
.pdca__tag { display: inline-flex; justify-content: center; padding: .2rem .5rem; border-radius: 100vh; background: rgba(255,255,255,.14); font-family: var(--font-num); font-size: 1rem; letter-spacing: .1em; color: #fff; }
.pdca__list b { display: block; font-size: 1.1875rem; line-height: 1.4; }
.pdca__list p { margin-top: .25rem; font-size: .9375rem; line-height: 1.75; color: rgba(255,255,255,.85); }
.pdca + .showcase { margin-top: 4rem; }

.gapt--3 .gapt__row { grid-template-columns: 9.5rem 1.35fr 1fr; }
.gapt--3 .gapt__row--head > *:nth-child(2) { color: #fff; }
.gapt--3 + .point { margin-top: 2rem; }

.tabs--4 .tab { padding-inline: 1.25rem; font-size: 1rem; }
.feature__more { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.25rem; font-weight: 700; color: var(--primary); text-decoration: underline; text-underline-offset: .3em; }
.feature__more::after { content: "↓"; }
.feature__visual .layer { padding-bottom: 0; }
.shot-card--sub { width: 62%; margin: -22% 0 0 auto !important; z-index: 2; box-shadow: 0 24px 48px rgba(15,23,42,.26); }

#agent .point { margin-top: 3rem; }

.section--game { background:
  radial-gradient(circle at 12% 8%, rgba(47,91,200,.22), transparent 40%),
  radial-gradient(circle at 92% 60%, rgba(66,98,255,.12), transparent 45%),
  repeating-linear-gradient(135deg, rgba(66,98,255,.035) 0 2px, transparent 2px 18px),
  #F5F7FF; }
.arena__no { display: inline-grid; place-items: center; min-width: 2.5rem; height: 2.5rem; margin-right: .6rem; padding: 0 .5rem; border-radius: .6rem; background: var(--primary); color: #fff; font-family: var(--font-num); font-size: 1.125rem; font-weight: 600; vertical-align: middle; }
.arena { display: grid; grid-template-columns: 1fr 1.35fr; gap: 3rem; align-items: center; margin-top: 3.5rem; }
.arena > * { min-width: 0; }
.arena--flip .arena__text { order: 2; }
.arena__text h3 { margin-top: .9rem; font-size: 1.875rem; line-height: 1.45; }
.arena__text h3 em, .scoreboard h3 em, .badges h3 em { font-style: normal; color: var(--primary); }
.arena__text > p { margin-top: .9rem; color: var(--text-sub); line-height: 1.9; }
.arena__shot { transform: perspective(1800px) rotateY(-6deg); transform-origin: left center; }
.arena--flip .arena__shot { transform: perspective(1800px) rotateY(6deg); transform-origin: right center; }

.race { margin-top: 1.5rem; padding: 1.1rem 1.25rem; border-radius: var(--radius); background: var(--game-ink); color: #fff; box-shadow: 0 18px 40px rgba(15,23,42,.25); }
.race__row { display: grid; grid-template-columns: 1.75rem 6.5rem 1fr 3.5rem 2rem; gap: .6rem; align-items: center; padding: .45rem 0; font-size: .875rem; }
.race__rank { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: rgba(255,255,255,.12); font-family: var(--font-num); }
.race__row:first-child .race__rank { background: #fff; color: var(--primary); }
.race__bar { height: .55rem; border-radius: 100vh; background: rgba(255,255,255,.1); overflow: hidden; }
.race__bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--hl)); transition: width 1.4s cubic-bezier(.2,.8,.2,1); }
.is-in .race__bar i, .is-in .mission__bar i { width: var(--w); }
.race__pt { font-family: var(--font-num); font-size: 1rem; text-align: right; }
.race__up { color: #fff; font-weight: 700; font-size: .8125rem; }
.race__down { color: #B9C6E2; font-weight: 700; font-size: .8125rem; }
.race__note { margin-top: .35rem; font-size: .6875rem; color: rgba(255,255,255,.55); text-align: right; }

.scoreboard { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 4rem; }
.scoreboard > * { min-width: 0; padding: 1.75rem 2rem; border-radius: var(--radius); background: #fff; border: 1px solid var(--tint-line); box-shadow: var(--shadow-soft); }
.scoreboard h3, .badges h3 { font-size: 1.375rem; line-height: 1.4; }
.ptable { margin-top: 1.1rem; display: grid; gap: .5rem; }
.ptable li { display: flex; justify-content: space-between; align-items: center; padding: .6rem 1rem; border-radius: .6rem; background: var(--tint-light); font-weight: 700; }
.ptable b { font-family: var(--font-num); font-size: 1.375rem; font-weight: 600; color: var(--primary); }
.ptable b::after { content: "pt"; font-size: .8125rem; margin-left: .15rem; color: var(--primary); }
.scoreboard__note { margin-top: .9rem; font-size: .8125rem; color: var(--muted); }
.scoreboard .missions { display: flex; flex-direction: column; gap: .75rem; background: var(--game-ink); color: #fff; border-color: transparent; }
.missions h3 em { color: var(--hl) !important; }
.missions .arena__no { background: #fff; color: var(--primary); }
.mission { display: grid; grid-template-columns: 1fr 7rem 3rem; gap: .9rem; align-items: center; padding: .9rem 1rem; border-radius: .75rem; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); }
.mission b { display: block; font-size: 1rem; }
.mission small { font-size: .75rem; color: rgba(255,255,255,.65); }
.mission__bar { height: .5rem; border-radius: 100vh; background: rgba(255,255,255,.12); overflow: hidden; }
.mission__bar i { display: block; height: 100%; width: 0; background: var(--hl); border-radius: inherit; transition: width 1.4s cubic-bezier(.2,.8,.2,1) .2s; }
.mission__state { font-size: .8125rem; font-weight: 700; text-align: center; color: rgba(255,255,255,.8); }
.mission__state.is-done { padding: .2rem 0; border-radius: 100vh; background: #fff; color: var(--primary); }
.missions .scoreboard__note { color: rgba(255,255,255,.55); margin-top: auto; }

.ladder { margin-top: 1.5rem; display: grid; gap: .45rem; }
.ladder li { display: flex; align-items: center; gap: .9rem; padding: .6rem 1rem; border-radius: .6rem; background: #fff; border: 1px solid var(--tint-line); font-weight: 700; color: var(--text-sub); }
.ladder li:nth-child(1) { margin-right: 40%; } .ladder li:nth-child(2) { margin-right: 30%; } .ladder li:nth-child(3) { margin-right: 20%; } .ladder li:nth-child(4) { margin-right: 10%; }
.ladder span { font-family: var(--font-num); font-size: 1rem; color: var(--primary); min-width: 2.75rem; }
.ladder li.is-now { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 10px 24px rgba(66,98,255,.3); }
.ladder li.is-now span { color: #fff; }
.ladder li.is-now small { margin-left: auto; font-size: .75rem; color: #B9C6E2; }

.badges { margin-top: 4rem; padding: 2rem; border-radius: var(--radius); background: #fff; border: 1px solid var(--tint-line); box-shadow: var(--shadow-soft); }
.badges__shelf { display: grid; grid-template-columns: repeat(8, 1fr); gap: 1rem; margin-top: 1.5rem; }
.badges__shelf li { text-align: center; }
.badges__shelf img { width: 88px; height: 88px; margin: 0 auto; transition: transform .25s; }
.badges__shelf li:hover img { transform: translateY(-4px) rotate(-6deg) scale(1.06); }
.badges__shelf b { display: block; margin-top: .5rem; font-size: .875rem; line-height: 1.4; }
.badges__shelf small { display: block; margin-top: .15rem; font-size: .75rem; line-height: 1.5; color: var(--muted); }
.badges__shot { margin-top: 2rem !important; }
.section--game .point { margin-top: 3rem; background: #fff; border: 1px solid var(--tint-line); }

.roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; }
.role { display: flex; flex-direction: column; padding: 1.25rem 1.25rem 1.5rem; border-radius: var(--radius); background: #fff; border: 1px solid var(--tint-line); box-shadow: var(--shadow-soft); }
.role__shot { margin: 0 0 1.1rem; border-radius: .6rem; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16/10; }
.role__shot img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.role__who { display: inline-block; align-self: flex-start; padding: .2rem .8rem; border-radius: 100vh; background: var(--tint); color: var(--primary); font-size: .8125rem; font-weight: 700; }
.role h3 { margin-top: .7rem; font-size: 1.25rem; line-height: 1.5; }
.role h3 em { font-style: normal; color: var(--primary); }
.role > p:not(.role__who) { margin-top: .6rem; font-size: .9375rem; line-height: 1.8; color: var(--text-sub); }
.role__cases { margin-top: auto; padding-top: 1rem; display: grid; gap: .5rem; }
.role__cases li { padding: .6rem .85rem; background: var(--tint-light); border-radius: .5rem; font-size: .875rem; line-height: 1.6; }
.role__cases b { display: block; font-size: .8125rem; color: var(--primary); }

.support { display: grid; grid-template-columns: 1.5fr 1fr; gap: 2.5rem; align-items: start; margin-top: 3rem; }
.support > * { min-width: 0; }
.support__menu { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: #fff; border: 1px solid var(--tint-line); border-radius: var(--radius); overflow: hidden; }
.support__menu li { display: grid; grid-template-columns: 2.75rem 1fr; gap: .75rem; padding: 1.4rem 1.5rem; border-bottom: 1px solid var(--tint-line); }
.support__menu li:nth-child(odd) { border-right: 1px solid var(--tint-line); }
.support__menu li:nth-last-child(-n+2) { border-bottom: 0; }
.support__menu span { font-family: var(--font-num); font-size: 1.75rem; font-weight: 600; line-height: 1.1; color: var(--primary); }
.support__menu b { display: block; font-size: 1.125rem; line-height: 1.4; }
.support__menu p { margin-top: .3rem; font-size: .9375rem; line-height: 1.75; color: var(--text-sub); }
.support__plans { display: grid; gap: .75rem; padding: 2rem; border-radius: var(--radius); background: var(--primary-dark); color: #fff; }
.support__plans-title { font-size: 1.25rem; font-weight: 700; letter-spacing: .05em; margin-bottom: .25rem; }
.support__plans-title em { font-style: normal; color: var(--hl); }
.plan { padding: 1rem 1.1rem; border-radius: .75rem; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); }
.plan b { display: block; font-size: 1.0625rem; }
.plan p { margin-top: .2rem; font-size: .875rem; line-height: 1.7; color: rgba(255,255,255,.82); }
.support__plans .pill { margin-top: .75rem; justify-content: center; }

.family--3 { grid-template-columns: repeat(3, 1fr); }
.family--3 .fam { padding: 2rem; }
.family--3 .fam p { flex: 0; }
.family--3 .fam ul { flex: 1; }
.family--3 .fam .pill { align-self: flex-start; }

@media (max-width: 1280px) {
  .header__inner .pswitch--inline { display: none; }
  .pdca { grid-template-columns: 300px 1fr; gap: 2.5rem; }
  .pdca__ring { width: 260px; }
  .pdca__q { width: 80px; height: 80px; font-size: 2.25rem; }
  .gapt--3 .gapt__row { grid-template-columns: 8rem 1.35fr 1fr; }
  .badges__shelf { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
  .pdca, .support, .family--3, .arena, .scoreboard, .roles, .stall__cards, .turn__list { grid-template-columns: 1fr; }
  .arena--flip .arena__text { order: 0; }
  .arena__shot, .arena--flip .arena__shot { transform: none; }
  .pdca { padding: 3rem 1.25rem 1.5rem; }
  .pdca__ring { width: 240px; margin-bottom: 1rem; }
  .pdca__q { width: 72px; height: 72px; font-size: 2rem; }
  .gapt--3 .gapt__row { grid-template-columns: 1fr; }
  .gapt--3 .gapt__row--head { display: none; }
  .gapt--3 .gapt__row small { display: block; font-size: .75rem; font-weight: 700; color: #B9C6E2; letter-spacing: .05em; }
  .tabs--4 { grid-auto-flow: row; grid-template-columns: 1fr 1fr; width: 100%; }
  .shot-card--sub { width: 80%; margin-top: -10% !important; }
  .support__menu { grid-template-columns: 1fr; }
  .support__menu li:nth-child(odd) { border-right: 0; }
  .support__menu li:nth-last-child(2) { border-bottom: 1px solid var(--tint-line); }
  .mv__float--pt { left: 0; top: 0; }
  .mv__float--badge { right: 0; top: 40%; }
  .mv__float--rank { right: 4%; bottom: 0; }
  .turn { padding: 1.75rem 1.25rem; }
  .turn__title { font-size: 1.375rem; }
}
@media (max-width: 640px) {
  .pdca__list li { grid-template-columns: 1fr; gap: .4rem; }
  .pdca__tag { justify-self: start; }
  .tabs--4 { grid-template-columns: 1fr; }
  .support__plans { padding: 1.5rem 1.25rem; }
  .scoreboard > * { padding: 1.25rem; }
  .race__row { grid-template-columns: 1.6rem 5.5rem 1fr 3rem 1.6rem; gap: .4rem; font-size: .8125rem; }
  .mission { grid-template-columns: 1fr 3rem; }
  .mission__bar { grid-column: 1 / -1; grid-row: 2; }
  .badges { padding: 1.25rem; }
  .badges__shelf { grid-template-columns: repeat(2, 1fr); }
  .ladder li:nth-child(n) { margin-right: 0; }
  .mv__float { font-size: .6875rem; padding: .45rem .65rem; }
  .mv__float--pt b { font-size: 1.25rem; }
  .mv__float--badge img { width: 32px; height: 32px; }
  .mv__float--rank span { font-size: 1rem; }
  .stall__flow { gap: .4rem; }
  .stall__flow li { font-size: .8125rem; padding: .4rem .8rem; }
  .stall__flow li.is-stop i { width: 1.75rem; height: 1.75rem; font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .mv__float { animation: none; }
  .race__bar i, .mission__bar i { transition: none; }
}

.define { max-width: 880px; margin: 2rem auto 0; padding: 1.5rem 1.75rem; border-radius: var(--radius); background: var(--tint-light); border: 1px solid var(--tint-line); display: grid; gap: .6rem; }
.define p { font-size: 1rem; line-height: 1.95; }
.define p:first-child { font-weight: 700; }
.diff { margin-top: 3rem; }
.diff h3 { text-align: center; font-size: 1.5rem; }
.diff h3 em { font-style: normal; color: var(--primary); }
.diff ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.5rem; counter-reset: diff; }
.diff li { counter-increment: diff; padding: 1.25rem 1.4rem; border-radius: var(--radius); background: #fff; border: 1px solid var(--tint-line); box-shadow: var(--shadow-soft); }
.diff li::before { content: "0" counter(diff); display: block; font-family: var(--font-num); font-size: 1.5rem; font-weight: 600; color: var(--primary); line-height: 1; margin-bottom: .5rem; }
.diff b { font-size: 1.125rem; }
.diff p { margin-top: .35rem; font-size: .9375rem; line-height: 1.75; color: var(--text-sub); }
.diff + .showcase { margin-top: 4rem; }
.feature__note { margin-top: 1rem; padding: .75rem 1rem; border-radius: .5rem; background: #fff; border: 1px solid var(--line); font-size: .875rem; line-height: 1.7; color: var(--text-sub); }
.flow__price { max-width: 880px; margin: 2rem auto 0; text-align: center; font-size: .9375rem; color: var(--text-sub); }
.agent__title { font-size: 1.75rem; line-height: 1.6; margin-top: .75rem; }
.agent__title em { font-style: normal; color: var(--hl); }
@media (max-width: 900px) { .diff ol { grid-template-columns: 1fr; } .agent__title { font-size: 1.375rem; } }
.mv__title .mv__eyebrow { display: flex; white-space: normal; letter-spacing: .06em; line-height: 1.5; }
.form__done-title { font-size: 1.5rem; font-weight: 700; margin-top: 1rem; }
.cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin-top: 2.5rem; }
.cols a { display: flex; flex-direction: column; gap: .4rem; height: 100%; padding: 1.1rem 1.2rem; border-radius: var(--radius); background: #fff; border: 1px solid var(--tint-line); font-weight: 700; line-height: 1.6; transition: border-color .2s, transform .2s; }
.cols a:hover { border-color: var(--primary); transform: translateY(-2px); }
.cols small { align-self: flex-start; padding: .1rem .6rem; border-radius: 100vh; background: var(--tint); color: var(--primary); font-size: .75rem; }
@media (max-width: 1280px) { .cols { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .cols { grid-template-columns: 1fr; } }

:root { --cream: #F3F5FF; }
.hl { background: #D6DEFF; }
.brochure { background: #fff; border: 1px solid var(--tint-line); }
.gap > div:last-child dt { background: var(--primary); color: #fff; }

.c-title, .feature__title, .arena__text h3, .turn__title, .role h3, .stall__card h3 { word-break: keep-all; overflow-wrap: anywhere; }

.mv__sub { font-weight: 500; font-size: 1.0625rem; opacity: .92; }
.mv__note { margin-top: 1.25rem; font-size: .875rem; color: rgba(255,255,255,.75); letter-spacing: .04em; }
.mv__note + .mv__support { margin-top: .5rem; }
.mv__float-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--primary); color: #fff; font-style: normal; font-size: .9375rem; }
.mv__float--badge { right: 3%; }
.mv__float--rank { right: 6%; }

.turn { display: grid; grid-template-columns: auto 1fr; gap: .5rem 2rem; align-items: center; padding: 1.5rem 2rem; }
.turn__label { grid-row: span 2; align-self: center; }
.turn__title { margin: 0; font-size: 1.375rem; font-weight: 700; }
.turn__list { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 0; }
.turn__list li { padding: 0 0 0 1.5rem; background: none; border: 0; position: relative; }
.turn__list li::before { content: "✓"; position: absolute; left: 0; color: #fff; font-weight: 700; }
.turn__list b { font-size: 1rem; }

.pdca__note { grid-column: 1 / -1; margin-top: .25rem; font-size: .875rem; color: rgba(255,255,255,.78); text-align: right; }

.safe-ai { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 2rem; }
.safe-ai li { padding: 1.1rem 1.25rem 1.1rem 3rem; border-radius: .75rem; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); font-size: .9375rem; line-height: 1.75; color: rgba(255,255,255,.82); position: relative; }
.safe-ai li::before { content: "✓"; position: absolute; left: 1.1rem; top: 1rem; width: 1.3rem; height: 1.3rem; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--primary); font-size: .75rem; font-weight: 700; }
.safe-ai b { display: block; color: #fff; font-size: 1.0625rem; margin-bottom: .2rem; }

.tabs--5 .tab { padding-inline: 1rem; font-size: .9375rem; }

.fair { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin-top: 2rem; }
.fair li { padding: 1rem 1.1rem; border-radius: .75rem; background: rgba(255,255,255,.85); border: 1px solid var(--tint-line); font-size: .8125rem; line-height: 1.7; color: var(--text-sub); }
.fair b { display: block; margin-bottom: .25rem; font-size: .9375rem; color: var(--primary); }
.fair b::before { content: "✓ "; color: var(--primary); }

.arena:first-of-type { grid-template-columns: .85fr 1.5fr; }
.ptable b { font-size: 1.75rem; }
.ladder li { position: relative; overflow: hidden; }
.ladder__exp { position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background: var(--hl); transition: width 1.4s cubic-bezier(.2,.8,.2,1) .3s; }
.is-in .ladder__exp { width: var(--w); }

.plan small { display: block; margin-top: .4rem; font-size: .75rem; color: #B9C6E2; font-weight: 700; }
.flow__small { max-width: 880px; margin: 2.5rem auto 0; padding: 1.1rem 1.5rem; border-radius: var(--radius); background: #fff; border: 1px solid var(--tint-line); font-size: .9375rem; line-height: 1.8; }
.flow__small b { display: block; color: var(--primary); }
.brochure__list { margin: .75rem 0 1.25rem; display: grid; gap: .3rem; }
.brochure__list li { padding-left: 1.4rem; position: relative; font-weight: 700; }
.brochure__list li::before { content: "✓"; position: absolute; left: 0; color: var(--primary); }

@media (max-width: 1280px) {
  .fair { grid-template-columns: repeat(2, 1fr); }
  .tabs--5 { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); width: 100%; }
}
@media (max-width: 900px) {
  .turn { grid-template-columns: 1fr; }
  .turn__label { grid-row: auto; justify-self: start; }
  .safe-ai { grid-template-columns: 1fr; }
  .arena:first-of-type { grid-template-columns: 1fr; }
  .tabs--5 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .mv__float--badge, .mv__float--rank { display: none; }
  .mv__zuu { width: 5.5rem; left: .25rem; }
  .fair { grid-template-columns: 1fr; }
  .tabs--5 { grid-template-columns: 1fr; }
  .c-title { font-size: clamp(1.35rem, 6vw, 1.75rem); }
}
.mv__float--badge { right: auto; left: 64%; top: 52%; }
.mv__float--rank { right: auto; left: 34%; bottom: 0; }
.mv__title .mv__eyebrow { display: block; }
.mv__title .mv__eyebrow::before { content: none; }
.badges__shelf b, .badges h3, .ptable span, .mission b { word-break: keep-all; overflow-wrap: anywhere; }
@media (max-width: 900px) { .mv__float--badge { left: auto; right: 0; top: 40%; } .mv__float--rank { left: auto; right: 4%; } }

html { scroll-padding-top: calc(var(--header-h) + 16px); }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 200; padding: .6rem 1rem; border-radius: .5rem; background: var(--primary); color: #fff; font-weight: 700; }
.skip:focus { top: 1rem; }
.pdca__tag, .turn__label { background: rgba(0,0,0,.24); }
.ladder span, .feature__label, .ptable b::after, .mv__float--pt b small { color: var(--primary); }
.ladder li.is-now span { color: #fff; }
.ladder span { min-width: 4.25rem; }
.form label .req, .form legend .req { background: #c03c00; }
.form [aria-invalid="true"] { border-color: #c03c00; box-shadow: 0 0 0 3px rgba(192,60,0,.15); }
.race__note, .mv__float small { font-size: .75rem; }

.float-cta { visibility: hidden; transition: opacity .3s, transform .3s, visibility 0s .3s; }
.float-cta.is-show { visibility: visible; transition-delay: 0s; }

.mv__support { padding: .6rem 0; }
.footer li a { display: inline-block; padding: .55rem 0; }
.form__agree input, .checks input { width: 20px; height: 20px; }
.mobile-nav .pswitch--menu a { height: 2.75rem; }
.float-cta__close { width: 2rem; height: 2rem; }
.contact__tel a, .footer__tel a { color: inherit; }

.steps { list-style: none; padding: 0; margin: 0; }
.steps li { display: block; }
.steps .step { width: 100%; text-align: left; }
.step.is-active { background: rgba(81,231,242,.16); }
.steps__pause { margin-top: .75rem; padding: .45rem 1rem; border-radius: 100vh; border: 1px solid rgba(255,255,255,.35); background: transparent; color: #fff; font-size: .8125rem; font-weight: 700; cursor: pointer; }
.steps__pause:hover { background: rgba(255,255,255,.08); }
.progress { height: 4px; }

.mv__trust { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .9rem; }
.mv__trust li { padding: .25rem .7rem; border-radius: 100vh; border: 1px solid rgba(81,231,242,.45); font-size: .75rem; font-weight: 700; color: rgba(255,255,255,.9); }
.sec-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.5rem; margin-top: 3rem; padding: 1.5rem 2rem; border-radius: var(--radius); background: #fff; border: 1px solid var(--tint-line); }
.sec-cta p { font-weight: 700; }
.sec-cta__btns { display: flex; flex-wrap: wrap; gap: .75rem; }
.role__cta { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1rem; padding: .55rem 0; font-size: .9375rem; font-weight: 700; color: var(--primary); text-decoration: underline; text-underline-offset: .3em; }
.role__cta::after { content: "→"; }
.form__fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.form__fieldset legend { padding: 0; margin-bottom: .5rem; font-weight: 700; }
.form__more { margin-top: .25rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.form__more summary { cursor: pointer; font-weight: 700; color: var(--primary); padding: .4rem 0; }
.form__more .form__row { margin-top: 1rem; }
.form__next { margin-top: 1.25rem; padding: 1rem 1.25rem; border-radius: .75rem; background: var(--tint-light); text-align: left; }
.form__next b { color: var(--primary); }
.contact__trust { margin-top: 1.25rem; padding: 1rem 1.25rem; border-radius: var(--radius); background: #fff; border: 1px solid var(--tint-line); font-size: .875rem; line-height: 1.75; }
.contact__trust b { display: block; color: var(--primary); }
.faq__more { display: block; margin: 1.5rem auto 0; padding: .75rem 2rem; border-radius: 100vh; border: 2px solid var(--primary); background: #fff; color: var(--primary); font-weight: 700; cursor: pointer; }
.faq__cta { margin-top: 1.25rem; text-align: center; font-weight: 700; }
.faq__cta a { color: var(--primary); text-decoration: underline; text-underline-offset: .3em; }
.faq > #faqMore { display: grid; gap: inherit; }
.faq > #faqMore[hidden] { display: none; }

@media (max-width: 900px) {
  .sticky-cta { display: flex; gap: .5rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom)); background: rgba(255,255,255,.97); box-shadow: 0 -4px 16px rgba(0,0,0,.1); transition: opacity .25s; }
  .sticky-cta .pill { flex: 1; height: 3rem; font-size: .9375rem; padding: 0 .75rem; }
  .sticky-cta .pill--download { padding-right: .75rem; }
  .sticky-cta .pill--download .pill__badge { display: none; }
  body { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
  .cta-hidden .sticky-cta { opacity: 0; pointer-events: none; visibility: hidden; }
  .sec-cta { padding: 1.25rem; }
}
@media (max-width: 640px) {
  .c-title { letter-spacing: .04em; }
  .sec-cta__btns, .sec-cta__btns .pill { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tabpanel { animation: none !important; }
  .ladder__exp { transition: none; }
  .cols a:hover, .badges__shelf li:hover img { transform: none; }
}
.form legend .req { display: inline-block; margin-left: .5rem; padding: 0 .5rem; border-radius: 4px; color: #fff; font-size: .75rem; font-weight: 700; vertical-align: 2px; }

.race__keep { color: rgba(255,255,255,.5); font-weight: 700; font-size: .8125rem; }
.mvp { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .2rem 1rem; margin-top: auto; padding: 1rem 1.1rem; border-radius: .75rem; background: linear-gradient(135deg, rgba(81,231,242,.22), rgba(81,231,242,.06)); border: 1px solid rgba(81,231,242,.45); }
.mvp__label { grid-column: 1 / -1; font-size: .75rem; font-weight: 700; color: #B9C6E2; }
.mvp b { font-size: 1.25rem; }
.mvp__pt { font-family: var(--font-num); font-size: 1.75rem; color: #fff; }
.mvp__pt small { font-size: .875rem; margin-left: .1rem; }
.missions .scoreboard__note { margin-top: .5rem; }
.fair--band { margin-top: 2.5rem; }
@media (max-width: 640px) {
  .role__shot { display: none; }
}

.pill--hl { background: #51E7F2; color: var(--text); }
.pill--hl:hover { background: #8CF0F7; }
.pill--download .pill__badge { background: #51E7F2; color: var(--text); }

.support__menu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.support__col { padding: 1.5rem 1.4rem; border-right: 1px solid var(--tint-line); }
.support__col:last-child { border-right: 0; }
.support__head { display: flex; align-items: center; gap: .6rem; padding-bottom: .9rem; margin-bottom: .9rem; border-bottom: 1px solid var(--line); font-size: 1.125rem; font-weight: 700; color: var(--primary); }
.support__head span { font-family: var(--font-num); font-size: 1.5rem; font-weight: 600; color: var(--primary); }
.support__col ul { display: grid; gap: 1rem; }
.support__col li { display: block; padding: 0; border: 0; }
.support__col b { display: block; font-size: 1rem; line-height: 1.5; }
.support__col p { margin-top: .25rem; font-size: .875rem; line-height: 1.75; color: var(--text-sub); }
.support { grid-template-columns: 1.7fr 1fr; }
@media (max-width: 1280px) { .support { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .support__menu { grid-template-columns: 1fr; }
  .support__col { border-right: 0; border-bottom: 1px solid var(--tint-line); }
  .support__col:last-child { border-bottom: 0; }
}

.support { grid-template-columns: 1fr; gap: 1.5rem; }
.support__menu li, .support__menu li:nth-child(odd), .support__menu li:nth-last-child(-n+2) { border: 0; padding: 0; display: block; }
.support__col li + li { padding-top: 1rem; border-top: 1px solid var(--line); }
.support__col { padding: 1.75rem 1.75rem 2rem; }
.support__col b { font-size: 1.0625rem; }
.support__col p { font-size: .9375rem; }
.support__plans { grid-template-columns: repeat(3, 1fr) auto; align-items: stretch; gap: 1rem; padding: 1.75rem 2rem; }
.support__plans-title { grid-column: 1 / -1; margin: 0; }
.support__plans .pill { margin: 0; align-self: center; white-space: nowrap; }
@media (max-width: 1280px) {
  .support__plans { grid-template-columns: repeat(3, 1fr); }
  .support__plans .pill { grid-column: 1 / -1; justify-self: center; }
}
@media (max-width: 900px) {
  .support__plans { grid-template-columns: 1fr; padding: 1.5rem 1.25rem; }
  .support__plans .pill { justify-self: stretch; }
}

@media (min-width: 901px) {
  .mv { padding: 0; }
  .mv__inner { position: relative; display: block; width: min(85rem, 100%); max-width: none; height: 56.25rem; margin: 0 auto; padding: 0; }
  .mv__text { position: absolute; top: 15.625rem; left: 5.625rem; width: 35rem; }
  .mv__visual { position: absolute; top: 12.9375rem; left: 37.25rem; width: 59.375rem; padding: 0; }
}
.laptop__screen { aspect-ratio: 1.5625; }
.laptop__shot { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.mv { overflow: hidden; }
@media (min-width: 901px) {
  .mv__sub { margin-top: 1.25rem; line-height: 1.9; }
  .mv__cta { margin-top: 1.75rem; flex-wrap: nowrap; gap: .75rem; }
  .mv__cta .pill--lg { height: 4rem; font-size: 1.1875rem; padding-left: 1.75rem; padding-right: 5rem; }
  .mv__cta .pill--white { height: 4rem; padding: 0 1.5rem; white-space: nowrap; }
  .mv__note { margin-top: 1.25rem; }
  .mv__trust { margin-top: .6rem; }
  .mv__note + .mv__trust + .mv__support, .mv__support { margin-top: .4rem; }
}
.section--game { overflow-x: clip; }

@media (min-width: 1400px) {
  .header { height: 6.25rem; transition: height .3s, background .3s, box-shadow .3s; }
  .header.is-scrolled { height: 4.375rem; background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border-radius: 0 0 1.25rem 1.25rem; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
  .header .container { width: 100%; max-width: none; padding-inline: 2.5rem; }
  .header__inner { gap: 0; }
  .brand { margin-right: 0; flex-shrink: 0; }
  .brand__logo { width: 11.875rem; height: auto; transition: width .3s; }
  .header.is-scrolled .brand__logo { width: 8.875rem; }
  .header .pswitch { margin-left: 1.5rem; font-size: .8125rem; }
  .header .pswitch a { height: 1.875rem; padding: 0 .75rem; }
  .nav { margin-left: auto; margin-right: 2.5rem; gap: 2.5rem; }
  .nav a { font-size: .875rem; font-weight: 500; padding: 0; }
  .nav a::after { content: none; }
  .nav a:hover { color: var(--primary); }
  .header:not(.is-scrolled) .nav a:hover { color: #B9C6E2; }
  .header__btns { gap: .9375rem; }
  .header__btns .pill { height: 2.3125rem; padding: 0 1.5rem; font-size: .875rem; font-weight: 700; box-shadow: none; letter-spacing: 0; }
  .header__btns .pill--download { background: #4262FF; padding-right: 1.5rem; filter: none; }
  .header__btns .pill--download:hover { background: rgb(100%,86%,72%); color: #e94a00; }
  .header__btns .pill--download .pill__icon { width: 1rem; height: 1rem; margin-right: .625rem; }
  .header__btns .pill--download:hover .pill__icon { filter: invert(36%) sepia(90%) saturate(3000%) hue-rotate(5deg); }
  .header__btns .pill--hl:hover { background: #8CF0F7; }
}
@media (min-width: 1400px) and (max-width: 1599.98px) {
  .nav { gap: 1.75rem; margin-right: 1.75rem; }
}

@media (min-width: 1281px) and (max-width: 1399.98px) {
  .nav, .header__btns, .header__inner > .pswitch--inline { display: none; }
  .menu-btn { display: block; margin-left: auto; }
  .mobile-nav { position: fixed; inset: var(--header-h) 0 auto 0; z-index: 99; background: #fff; box-shadow: 0 16px 32px rgba(0,0,0,.12); padding: .5rem 1.25rem 1.5rem; display: none; }
  .mobile-nav.is-open { display: block; }
  .mobile-nav a { display: block; padding: .85rem .25rem; border-bottom: 1px solid var(--line); font-weight: 700; }
  .mobile-nav .btns { display: grid; gap: .75rem; margin-top: 1rem; }
  .mobile-nav .btns a { border-bottom: 0; }
  .mobile-nav .pill { width: 100%; }
  .mobile-nav .pswitch--menu a { display: flex; padding: 0 .85rem; border-bottom: 0; }
}

.gap > div:first-child dt { background: var(--tint-light); color: var(--text); }
@media (max-width: 640px) {
  .ladder li { flex-wrap: wrap; }
  .ladder li.is-now small { margin-left: 0; width: 100%; padding-left: 5.15rem; }
}

.role__cases { margin-top: 0; }
.role__cta { margin-top: auto; padding-top: 1.5rem; }
.role__cases + .role__cta { margin-top: auto; }

@media (max-width: 900px) {
  .mv__note, .mv__trust, .mv__support { display: none; }
}

.ty { position: relative; overflow: hidden; background: var(--primary-dark); color: #fff; }
.ty__bg { position: absolute; inset: 0; background: url("../img/mv-bg.jpg") center / cover no-repeat; opacity: .9; }
.ty__inner { position: relative; padding: 12.5rem 0 5rem; text-align: center; }
.ty__eyebrow { font-size: 1rem; font-weight: 700; letter-spacing: .1em; color: #B9C6E2; }
.ty__title { margin-top: .75rem; font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; letter-spacing: .08em; line-height: 1.45; }
.ty__lead { margin-top: 1.25rem; font-size: 1rem; line-height: 2; color: #fff; }
.ty-next .container { max-width: 62rem; }
.ty__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.ty__steps li { padding: 1.5rem 1.25rem; background: #fff; border: 1px solid var(--tint-line); border-radius: var(--radius); }
.ty__no { font-family: var(--font-num); font-size: 1.5rem; font-weight: 600; color: var(--primary); line-height: 1; }
.ty__steps h2 { margin-top: .6rem; font-size: 1.125rem; line-height: 1.5; color: var(--text); word-break: keep-all; overflow-wrap: anywhere; }
.ty__steps p { margin-top: .5rem; font-size: .9375rem; line-height: 1.8; color: var(--text-sub); }
.ty__note { margin-top: 1.75rem; font-size: .875rem; line-height: 1.9; color: var(--text-sub); }
.ty__note a { color: var(--primary); font-weight: 700; }
.ty__links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 2rem; margin-top: 2.5rem; }
.ty__link { font-weight: 700; color: var(--primary); text-decoration: underline; text-underline-offset: .3em; }
.ty__link::after { content: " →"; }
@media (max-width: 900px) {
  .ty__inner { padding: 8rem 0 3.5rem; }
  .ty__steps { grid-template-columns: 1fr; }
}

@media (min-width: 901px) {
  .roles { grid-template-rows: repeat(6, auto); row-gap: 0; }
  .role { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  .role__who { justify-self: start; }
  .role__cases { align-self: start; }
  .role__cta { align-self: end; justify-self: start; }
}

.pswitch--inline a { padding: 0 .6rem; }
@media (max-width: 1599px) { .pswitch--inline a { padding: 0 .5rem; font-size: .6875rem; } .pswitch { margin-left: .75rem; } }

.mv__float--rank .mv__float-txt { font-family: var(--font); font-size: .9375rem; letter-spacing: 0; }
.mv__float-ic { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: .75rem; background: var(--tint-light); color: var(--primary); font-family: var(--font-num); font-style: normal; font-size: 1.25rem; font-weight: 600; flex-shrink: 0; }

.kflow { margin-top: 3rem; padding: 2.25rem 2.5rem 2.5rem; border-radius: var(--radius); background: linear-gradient(135deg, var(--primary), var(--primary-mid)); color: #fff; }
.kflow__title { font-size: 1.375rem; font-weight: 700; text-align: center; letter-spacing: .05em; }
.kflow__title em { font-style: normal; color: var(--hl); }
.kflow__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 1.5rem; counter-reset: none; }
.kflow__list li { position: relative; padding: 1.25rem 1.25rem 1.4rem; border-radius: .75rem; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); }
.kflow__list li + li::before { content: "→"; position: absolute; left: -1.5rem; top: 50%; z-index: 1; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; margin-top: -.75rem; color: var(--hl); font-size: .9375rem; font-weight: 700; line-height: 1; }
.kflow__no { font-family: var(--font-num); font-size: 1.75rem; font-weight: 600; line-height: 1; color: var(--hl); }
.kflow__list b { display: block; margin-top: .5rem; font-size: 1.125rem; line-height: 1.45; }
.kflow__list p { margin-top: .35rem; font-size: .9375rem; line-height: 1.75; color: rgba(255,255,255,.85); }
.kflow + .diff { margin-top: 4rem; }
@media (max-width: 900px) {
  .kflow { padding: 1.75rem 1.25rem; }
  .kflow__list { grid-template-columns: 1fr; }
  .kflow__list li + li::before { content: "↓"; left: 50%; top: -1.5rem; margin: 0 0 0 -.75rem; }
}

.stall__flow { position: relative; gap: 0; row-gap: 4.5rem; counter-reset: stop; padding: 3rem 1.5rem 3.25rem; border-radius: var(--radius); background: rgba(255,255,255,.6); border: 1px solid var(--tint-line); }
.stall__flow::before { content: "仕事の流れ"; position: absolute; left: 0; right: 0; top: 1rem; text-align: center; font-size: .8125rem; font-weight: 700; letter-spacing: .1em; color: var(--text-sub); }
.stall__flow li:not(.is-stop) { position: relative; background: #fff; border-radius: .5rem; padding: .6rem 1.1rem; }
.stall__flow li:not(.is-stop) + li:not(.is-stop) { margin-left: 2.75rem; }
.stall__flow li:not(.is-stop) + li:not(.is-stop)::before { content: ""; position: absolute; left: -2.5rem; top: 50%; width: 2rem; height: 2px; margin-top: -1px; background: var(--primary); }
.stall__flow li:not(.is-stop) + li:not(.is-stop)::after { content: ""; position: absolute; left: -.6rem; top: 50%; margin-top: -.375rem; border-left: .5rem solid var(--primary); border-top: .375rem solid transparent; border-bottom: .375rem solid transparent; }

.stall__flow li.is-stop { position: relative; width: 7.5rem; height: 2.75rem; padding: 0; border: 0; background: none; counter-increment: stop; }
.stall__flow li.is-stop::before { content: ""; position: absolute; left: .4rem; right: .9rem; top: 50%; height: 2px; margin-top: -1px; background: repeating-linear-gradient(90deg, #9AA2B3 0 .45rem, transparent .45rem .9rem); }
.stall__flow li.is-stop::after { content: ""; position: absolute; right: .4rem; top: 50%; margin-top: -.375rem; border-left: .5rem solid #9AA2B3; border-top: .375rem solid transparent; border-bottom: .375rem solid transparent; }
.stall__flow li.is-stop span { position: absolute; left: 50%; top: calc(50% + 1.1rem); transform: translateX(-50%); display: flex; align-items: center; gap: .35rem; padding: .3rem .6rem; border-radius: .4rem; background: var(--text); color: #fff; font-size: .75rem; font-weight: 700; line-height: 1.3; white-space: nowrap; }
.stall__flow li.is-stop span::before { content: "0" counter(stop); font-family: var(--font-num); font-size: .8125rem; color: var(--hl); }
.stall__flow li.is-stop span::after { content: ""; position: absolute; left: 50%; top: -.4rem; margin-left: -.4rem; border-left: .4rem solid transparent; border-right: .4rem solid transparent; border-bottom: .4rem solid var(--text); }
@media (max-width: 1280px) {
  .stall__flow { padding-left: 1rem; padding-right: 1rem; }
  .stall__flow li:not(.is-stop) { padding: .5rem .8rem; font-size: .875rem; }
  .stall__flow li:not(.is-stop) + li:not(.is-stop) { margin-left: 2.25rem; }
  .stall__flow li:not(.is-stop) + li:not(.is-stop)::before { left: -2.05rem; width: 1.6rem; }
  .stall__flow li.is-stop { width: 6rem; }
  .stall__flow li.is-stop span { font-size: .6875rem; }
}
@media (max-width: 900px) {
  .stall__flow { flex-direction: column; align-items: center; flex-wrap: nowrap; row-gap: 0; padding: 2.75rem 1rem 1rem; }
  .stall__flow li:not(.is-stop) { min-width: 11rem; text-align: center; }
  .stall__flow li:not(.is-stop) + li:not(.is-stop) { margin-left: 0; margin-top: 1.75rem; }
  .stall__flow li:not(.is-stop) + li:not(.is-stop)::before { left: 50%; top: -1.6rem; width: 2px; height: 1.25rem; margin: 0 0 0 -1px; }
  .stall__flow li:not(.is-stop) + li:not(.is-stop)::after { left: 50%; top: -.55rem; margin: 0 0 0 -.375rem; border-left: .375rem solid transparent; border-right: .375rem solid transparent; border-top: .5rem solid var(--primary); border-bottom: 0; }
  .stall__flow li.is-stop { width: 11rem; height: 4rem; }
  .stall__flow li.is-stop::before { left: 1.5rem; right: auto; top: .3rem; bottom: .9rem; width: 2px; height: auto; margin: 0; background: repeating-linear-gradient(180deg, #9AA2B3 0 .45rem, transparent .45rem .9rem); }
  .stall__flow li.is-stop::after { left: 1.5rem; right: auto; top: auto; bottom: .3rem; margin: 0 0 0 -.3rem; border-left: .375rem solid transparent; border-right: .375rem solid transparent; border-top: .5rem solid #9AA2B3; border-bottom: 0; }
  .stall__flow li.is-stop span { left: 2.6rem; top: 50%; transform: translateY(-50%); }
  .stall__flow li.is-stop span::after { left: -.4rem; top: 50%; margin: -.4rem 0 0; border-top: .4rem solid transparent; border-bottom: .4rem solid transparent; border-right: .4rem solid var(--text); border-left: 0; }
}

@media (max-width: 640px) { .brochure { padding-top: 3.75rem; } .brochure__free { right: .9rem; top: .9rem; width: 3.25rem; height: 3.25rem; font-size: .875rem; } }
