:root {
  --pink: #FF7796;
  --yellow: #FFDB48;
  --green: #B1D84B;
  --violet: #7288E0;
  --cyan: #64CBDD;
  --pale-pink: #FFF0F4;
  --pale-yellow: #FFFBE3;
  --pale-green: #F4F9EA;
  --pale-violet: #ECEFFE;
  --pale-cyan: #EEF9FE;
  --ink: #243342;
  --muted: #667789;
  --line: #E4ECF2;
  --paper: #FFFFFF;
  --soft: #F7FAFC;
  --saturation: 160%;
  --frost-white: rgba(255, 255, 255, 0.32);
  --frost-white-hover: rgba(255, 255, 255, 0.42);
  --frost-border: rgba(255, 255, 255, 0.42);
  --frost-blur: 22px;
  --frost-shadow: 0 4px 24px rgba(0, 0, 0, 0.20), 0 1.5px 6px rgba(0, 0, 0, 0.12);
  --frost-shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.12);
  --frost-radius: 1.4em;
}

* {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  margin: 0;
  background-color: #fff;
  color: var(--ink);
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.75;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

.mp-page {
  position: relative;
  overflow-x: clip;
  overflow-y: visible;
  padding-bottom: 0;
  isolation: isolate;
}

.bg-grain {
  display: none;
}

.mp-header,
.mp-notice,
.mp-main,
.mp-bottom-nav,
.mp-footer,
.mp-fixed {
  position: relative;
  z-index: 1;
}

.mp-header__bar,
.mp-notice__inner,
.mp-hero__card,
.mp-shortcut,
.mp-section__head,
.mp-feature,
.mp-prepare,
.mp-plan-card,
.mp-sold-card,
.mp-bottom-nav__item {
  position: relative;
}

.mp-header__bar::before,
.mp-notice__inner::before,
.mp-hero__card::before,
.mp-shortcut::before,
.mp-feature::before,
.mp-prepare::before,
.mp-plan-card::before,
.mp-sold-card::before,
.mp-bottom-nav__item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  display: none;
}

.mp-header__bar > *,
.mp-notice__inner > *,
.mp-hero__card > *,
.mp-shortcut > *,
.mp-feature > *,
.mp-prepare > *,
.mp-plan-card > *,
.mp-sold-card > *,
.mp-bottom-nav__item > * {
  position: relative;
  z-index: 1;
}

.mp-container {
  width: min(42rem, calc(100% - 2.4rem));
  margin: 0 auto;
}

.mp-header {
  padding: 0;
  background: transparent;
  color: var(--ink);
  position: sticky;
  top: 0;
  z-index: 180;
}

.mp-header__shell {
  position: relative;
  padding: 0.7rem 0 0.75rem;
  background: #fff;
  border-bottom: 1px solid #edf2f7;
  box-shadow: 0 0.4rem 1.2rem rgba(36, 51, 66, 0.05);
  overflow: hidden;
}

.mp-header__inner {
  width: min(calc(100% - 2.4rem), 120rem);
  margin: 0 auto;
}

.mp-header__top {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  gap: 0.9rem;
  align-items: center;
}

.mp-logo {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
}

.mp-logo__image {
  display: block;
  width: clamp(8.5rem, 14vw, 11.5rem);
  height: auto;
}

.mp-header__strip {
  position: relative;
  z-index: 1;
  background: #383838;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mp-header__id-icon {
  flex-shrink: 0;
  align-self: center;
}

.mp-header__strip-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.4rem;
  min-height: 2rem;
  padding-top: 0.18rem;
  padding-bottom: 0.18rem;
}

.mp-header__member,
.mp-header__nickname {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  min-width: 0;
  color: #9a9a9a;
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mp-header__nickname {
  position: relative;
  padding-left: 1.4rem;
}

.mp-header__nickname::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 1.1rem;
  background: #555555;
}

.mp-header__member strong,
.mp-header__nickname strong {
  overflow: hidden;
  color: #f0f0f0;
  font-size: 1.08em;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
}

.mp-header__menu {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.3rem;
  width: 3.6rem;
  height: 3.2rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid rgba(36, 51, 66, 0.18);
  border-radius: 0.8rem;
  background: #fff;
  box-shadow: 0 0.5rem 1.2rem rgba(36, 51, 66, 0.06);
  cursor: pointer;
  transition: background 200ms ease, box-shadow 200ms ease, transform 160ms ease;
}

.mp-header__menu span {
  display: block;
  width: 100%;
  height: 0.16rem;
  border-radius: 999px;
  background: var(--ink);
  transform-origin: center;
  transition: transform 220ms ease, opacity 160ms ease, background 200ms ease;
}

.mp-header__menu:active {
  transform: scale(0.94);
}

.mp-header__menu[aria-expanded="true"] {
  background: var(--ink);
  box-shadow: 0 0.7rem 1.6rem rgba(36, 51, 66, 0.24);
}

.mp-header__menu[aria-expanded="true"] span {
  background: #fff;
}

.mp-header__menu[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(0.5rem) rotate(45deg);
}

.mp-header__menu[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.mp-header__menu[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-0.5rem) rotate(-45deg);
}

.mp-carousel-section {
  position: relative;
  padding: 0.5rem 0 0.15rem;
  background: transparent;
}

.mp-carousel-section .mp-container {
  position: relative;
  z-index: 1;
  width: min(calc(100% - 1.2rem), 88rem);
}

.mp-carousel-section__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: 0.8rem;
  overflow-x: auto;
  padding-bottom: 0.2rem;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

.mp-carousel-section__rail::-webkit-scrollbar {
  display: none;
}

.mp-carousel-card {
  scroll-snap-align: start;
  position: relative;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 0;
  aspect-ratio: 1000 / 248;
  background: rgba(255, 255, 255, 0.46);
  box-shadow: 0 1rem 2.8rem rgba(36, 51, 66, 0.08);
  backdrop-filter: blur(20px) saturate(1.12);
  transition: box-shadow 180ms ease, background 180ms ease;
}

.mp-carousel-card:hover {
  box-shadow: 0 1.3rem 3rem rgba(36, 51, 66, 0.12);
  background: rgba(255, 255, 255, 0.58);
}

.mp-carousel-card__media {
  position: relative;
  inset: 0;
  overflow: hidden;
  background: #f3f7fb;
}

.mp-carousel-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mp-carousel-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(15, 22, 34, 0.06) 0%, rgba(15, 22, 34, 0) 28%, rgba(15, 22, 34, 0) 72%, rgba(15, 22, 34, 0.12) 100%);
  pointer-events: none;
}

.mp-carousel-card__body {
  display: none;
}

.mp-carousel-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  margin: 0.7rem 0 0;
}

.mp-carousel-dot {
  padding: 0;
  width: 0.7rem;
  height: 0.7rem;
  border: none;
  border-radius: 999px;
  background: rgba(36, 51, 66, 0.22);
  transition: background 180ms ease, transform 180ms ease;
}

.mp-carousel-dot:hover,
.mp-carousel-dot:focus-visible {
  background: rgba(36, 51, 66, 0.4);
  outline: none;
}

.mp-carousel-dot.is-active {
  background: var(--violet);
  transform: scale(1.2);
}

.mp-drawer {
  --mp-drawer-header-offset: 0px;
  position: fixed;
  inset: 0;
  z-index: 170;
  /* 透明なコンテナはクリックを透過させ、ヘッダーの×ボタンを常に押せるようにする
     (ドロワーが .mp-page の外にある場合でも × が効くようにするため) */
  pointer-events: none;
}

.mp-drawer[hidden] {
  display: none;
}

.mp-drawer__backdrop {
  position: absolute;
  inset: var(--mp-drawer-header-offset) 0 0 0;
  background: rgba(15, 22, 34, 0.34);
  backdrop-filter: blur(6px);
  animation: mpDrawerFadeIn 200ms ease both;
  pointer-events: auto;
}

.mp-drawer__panel {
  position: absolute;
  top: var(--mp-drawer-header-offset);
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  width: min(34rem, 90vw);
  height: calc(100% - var(--mp-drawer-header-offset));
  padding: 1.2rem 1.2rem 1.8rem;
  overflow-y: auto;
  background-color: hsl(248, 33%, 81%);
  background-image: url("../../img/mesh-gradient.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: auto 100%;
  box-shadow: -2rem 0 4rem rgba(36, 51, 66, 0.24);
  animation: mpDrawerSlideIn 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
  pointer-events: auto;
}

@keyframes mpDrawerFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes mpDrawerSlideIn {
  from { opacity: 0; transform: translateX(2.4rem); }
  to { opacity: 1; transform: translateX(0); }
}

.mp-drawer__close {
  align-self: flex-end;
  display: grid;
  place-items: center;
  flex: none;
  width: 4.4rem;
  height: 4.4rem;
  margin: -1.4rem -0.2rem -0.2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #5566cf;
  box-shadow: 0 0.4rem 1.1rem rgba(36, 51, 66, 0.22);
  cursor: pointer;
}

.mp-drawer__close svg {
  width: 1.9rem;
  height: 1.9rem;
}

.mp-drawer__card {
  flex: none;
  padding: 1.2rem 1.2rem 1.3rem;
  border-radius: 1.3rem;
  background: #fff;
  box-shadow: 0 0.6rem 1.6rem rgba(36, 51, 66, 0.16);
}

.mp-drawer__heading {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.9rem;
  color: #5566cf;
  font-size: 1.45rem;
  font-weight: 900;
}

.mp-drawer__heading::before {
  content: "";
  flex: none;
  width: 0.45rem;
  height: 1.45rem;
  border-radius: 1px;
  background: #5566cf;
}

.mp-drawer__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.9rem;
}

.mp-drawer__card-head .mp-drawer__heading {
  margin: 0;
}

.mp-drawer__gear {
  flex: none;
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  border: 1px solid #e3e6f3;
  border-radius: 0.7rem;
  background: #fff;
  color: #5566cf;
  box-shadow: 0 0.3rem 0.8rem rgba(36, 51, 66, 0.14);
}

.mp-drawer__gear svg {
  width: 2rem;
  height: 2rem;
  fill: #5566cf;
}

.mp-drawer__fields {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 0;
}

.mp-drawer__field {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.3rem;
  min-width: 0;
  padding: 0.55rem 0.8rem;
  border-radius: 0.8rem;
  background: #eef1f6;
  text-align: center;
}

.mp-drawer__field-label {
  color: #66788a;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
}

.mp-drawer__field-value {
  min-width: 0;
  color: #243342;
  font-size: 1.3rem;
  font-weight: 900;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.mp-drawer__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 4.2rem;
  padding: 0.7rem 3.2rem;
  border-radius: 0.9rem;
  color: #fff !important;
  font-size: 1.35rem;
  font-weight: 900;
  text-decoration: none;
}

.mp-drawer__btn--member {
  background: linear-gradient(180deg, #6f9bf0, #3f6fd6);
  box-shadow: 0 0.5rem 1.2rem rgba(63, 111, 214, 0.3);
}

.mp-drawer__btn--chat {
  margin-bottom: 0.8rem;
  font-size: 1.45rem;
  background: linear-gradient(180deg, #ff8aa0, #ff6a86);
  box-shadow: 0 0.5rem 1.3rem rgba(255, 119, 150, 0.36);
}

.mp-drawer__btn-lead,
.mp-drawer__btn-icon,
.mp-drawer__btn-tail {
  position: absolute;
  display: grid;
  place-items: center;
}

.mp-drawer__btn-lead {
  left: 1.3rem;
}

.mp-drawer__btn-lead svg {
  width: 1.1rem;
  height: 1.1rem;
}

.mp-drawer__btn-icon {
  left: 1.4rem;
}

.mp-drawer__btn-icon svg {
  width: 2rem;
  height: 2rem;
}

.mp-drawer__btn-tail {
  right: 1.4rem;
}

.mp-drawer__btn-tail svg {
  width: 1.2rem;
  height: 1.2rem;
}

.mp-drawer__hours {
  margin: 0;
  color: #4a5765;
  font-size: 1.05rem;
  line-height: 1.6;
}

.mp-drawer__hours-label {
  display: block;
  font-weight: 800;
}

.mp-drawer__links {
  display: flex;
  flex-direction: column;
}

.mp-drawer__links a {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem 0.3rem;
  border-bottom: 1px solid #eef1f5;
  color: #243342;
  font-size: 1.35rem;
  font-weight: 800;
  text-decoration: none;
}

.mp-drawer__links a:last-child {
  border-bottom: 0;
}

.mp-drawer__links a::before {
  content: "";
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  margin-left: 0.2rem;
  border-top: 2px solid #5566cf;
  border-right: 2px solid #5566cf;
  transform: rotate(45deg);
}

.mp-notice {
  position: relative;
  margin: 0;
  padding: 0.5rem 0 0;
  background: transparent;
}

.mp-notice .mp-container {
  position: relative;
  z-index: 1;
  width: min(100% - 1.2rem, 88rem);
  margin: 0 auto;
}

.mp-notice__inner {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.7rem;
  min-height: 3.7rem;
  padding: 0.35rem 0.85rem;
  border: 1px solid #e7dfe6;
  border-radius: 999px;
  background: #fff;
  box-shadow: none;
  backdrop-filter: none;
  flex-wrap: nowrap;
  overflow: hidden;
}

.mp-notice__label {
  flex: 0 0 auto;
  padding: 0.25rem 0.8rem;
  border: 1px solid #ff3b30;
  border-radius: 999px;
  background: #ff3b30;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 900;
}

.mp-notice__text {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding-left: 0.7rem;
  border-left: 1px solid rgba(36, 51, 66, 0.14);
  overflow: hidden;
  color: var(--ink);
  font-size: 1.15rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mp-notice__mail {
  position: relative;
  display: grid !important;
  flex: 0 0 3rem;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-left: auto;
  border-radius: 50%;
  overflow: visible;
}

.mp-notice__mail img {
  width: 1.65rem;
  filter: brightness(0) invert(1);
}

.mp-notice__count {
  position: absolute;
  top: -0.2rem;
  right: -0.28rem;
  display: grid;
  place-items: center;
  min-width: 1.55rem;
  height: 1.55rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: #ff3b30;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1;
}

.mp-hero {
  margin-bottom: 1rem;
  padding: 0.9rem 0 1.2rem;
  background: linear-gradient(180deg, rgba(255, 196, 210, 0.96) 0%, rgba(255, 196, 210, 0.72) 100%);
}

.mp-hero__card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 2.4rem;
  background: rgba(255, 255, 255, 0.38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94), inset 0 -1px 0 rgba(255, 255, 255, 0.25), 0 1.8rem 5rem rgba(36, 51, 66, 0.14);
  backdrop-filter: blur(28px) saturate(1.22);
}

.mp-hero__visual {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: 1rem 1rem 0;
  overflow: hidden;
  border-radius: 1.8rem;
  background: rgba(255, 255, 255, 0.18);
}

.mp-hero__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mp-hero__visual::after {
  display: none;
}

.mp-hero__copy {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  padding: 1.3rem 1.5rem 1.5rem;
}

.mp-eyebrow {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 1.2rem;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  background: var(--pale-yellow);
  color: #6e5a00;
  font-size: 1.2rem;
  font-weight: 900;
}

.mp-hero__title {
  margin: 0;
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.2;
}

.mp-hero__lead {
  margin: 0.7rem 0 1rem;
  color: var(--muted);
  font-size: 1.2rem;
  font-weight: 700;
}

.mp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.mp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 4.4rem;
  padding: 0.9rem 1.8rem;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  font-size: 1.3rem;
  font-weight: 900;
  white-space: nowrap;
}

.mp-button.-primary {
  border-color: transparent;
  background: var(--violet);
  color: #fff;
  box-shadow: 0 0.9rem 1.8rem rgba(114, 136, 224, 0.2);
}

.mp-shortcuts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.mp-shortcut {
  display: grid;
  min-height: 7.6rem;
  padding: 1.15rem 1.2rem;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 2rem;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 0.8rem 2rem rgba(36, 51, 66, 0.06);
  backdrop-filter: blur(20px) saturate(1.12);
  transition: box-shadow 180ms ease, background 180ms ease;
}

.mp-shortcut:hover {
  box-shadow: 0 1rem 2.4rem rgba(36, 51, 66, 0.08);
  background: rgba(255, 255, 255, 0.98);
}

.mp-shortcut__label {
  color: var(--muted);
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mp-shortcut__title {
  margin-top: 0.3rem;
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1.35;
}

.mp-shortcut__text {
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 1.2rem;
  font-weight: 700;
}

.mp-shortcut.-guide {
  background: rgba(255, 255, 255, 0.96);
}

.mp-shortcut.-campaign {
  background: rgba(255, 255, 255, 0.96);
}

.mp-shortcut.-free {
  background: rgba(255, 255, 255, 0.96);
}

.mp-main {
  padding: 0.2rem 0 4rem;
}

.mp-band-wave {
  display: none;
}

.mp-band-wave svg {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.9;
}

.mp-band-wave--yellow {
  background: transparent;
}

.mp-band-wave--pink {
  background: transparent;
}

.mp-band-wave--cyan {
  background: transparent;
}

.mp-band-wave--green {
  background: transparent;
}

.mp-band-wave--violet {
  background: transparent;
}

.mp-band {
  --band-bg: transparent;
  --band-accent: var(--violet);
  position: relative;
  overflow: visible;
  padding: 1.4rem 0 2.4rem;
  background: var(--band-bg);
}

.mp-band > .mp-container {
  position: relative;
  z-index: 1;
}

.mp-band--pink {
  --band-bg: transparent;
  --band-accent: var(--pink);
}

.mp-band--blue,
.mp-band--yellow {
  --band-bg: transparent;
  --band-accent: var(--yellow);
}

.mp-band--green {
  --band-bg: transparent;
  --band-accent: var(--green);
}

.mp-band--violet {
  --band-bg: transparent;
  --band-accent: var(--violet);
}

.mp-band--cyan {
  --band-bg: transparent;
  --band-accent: var(--cyan);
}

.mp-section {
  margin-top: 0;
}

.mp-section__head {
  display: block;
  margin: 0 0 2.4rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  box-shadow: none;
}


.c-ttl01 {
  display: block;
  margin: 0;
}

.c-ttl01 .main {
  margin: 0;
  color: #444;
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: clamp(2.1rem, 5.4vw, 3.8rem);
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: 0;
  white-space: nowrap;
  transform: none;
  position: static;
}

.c-ttl01 .main::before,
.c-ttl01 .main::after {
  content: none !important;
  display: none !important;
}

.c-ttl01 .sub {
  display: none;
}

.c-ttl01 .main .js-blink-char {
  display: inline-block;
  opacity: 0;
}

.c-ttl01.is-blink .main .js-blink-char {
  opacity: 1;
  animation: wcCopyBlink 1.6s steps(1) both;
}

.c-ttl01 .main .js-blink-char:first-child {
  margin-left: -0.22em;
}

@keyframes wcCopyBlink {
  0%    { opacity: 0;    color: #ff7796; }
  12.5% { opacity: 0.5;  color: #ffdb48; }
  25%   { opacity: 1;    color: #b1d84b; }
  37.5% { opacity: 0.35; color: #64cbdd; }
  50%   { opacity: 1;    color: #7288e0; }
  62.5% { opacity: 0;    color: #ff7796; }
  75%   { opacity: 1;    color: #ffdb48; }
  87.5% { opacity: 0.6;  color: #b1d84b; }
  100%  { opacity: 1;    color: #444; }
}

.c-ttl01--banner {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}

.c-ttl01--banner .main {
  padding: 0;
  margin: 0;
}

.c-ttl01--banner .main span {
  display: inline-block;
  color: #fff;
}

.c-ttl01--banner__slash {
  display: flex;
  gap: 0.5rem;
}

.c-ttl01--banner__slash i {
  display: block;
  width: 1.6rem;
  height: 0.55rem;
  border-radius: 0.18rem;
  transform: skewX(-24deg);
  transform-origin: left bottom;
}

.c-ttl01--banner__slash i:nth-child(5n+1) { background: var(--pink); }
.c-ttl01--banner__slash i:nth-child(5n+2) { background: var(--yellow); }
.c-ttl01--banner__slash i:nth-child(5n+3) { background: var(--green); }
.c-ttl01--banner__slash i:nth-child(5n+4) { background: var(--violet); }
.c-ttl01--banner__slash i:nth-child(5n+5) { background: var(--cyan); }


.c-ttl01--hero .main {
  font-size: clamp(3.6rem, 7vw, 5.8rem);
  font-family: "Zen Maru Gothic", sans-serif;
  letter-spacing: 0.02em;
}

.c-ttl01--hero .c-ttl01--banner__slash {
  gap: 0.7rem;
}

.c-ttl01--hero .c-ttl01--banner__slash i {
  width: 2.6rem;
  height: 0.8rem;
  border-radius: 0.3rem;
}

.result_ttl {
  position: relative;
  z-index: 5;
}

.mp-section__eyebrow {
  display: none;
}

.mp-section__title {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
  transform: none;
  padding-left: 0;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: initial;
  color: inherit;
}

.mp-section__title::before {
  content: none;
  display: none;
}

.mp-section__note {
  display: none;
}

.mp-feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem;
  padding: 1.2rem;
  overflow: visible !important;
  border: 1px solid rgba(255, 255, 255, 0.96);
  border-radius: 2rem;
  background: rgba(255, 255, 255, 0.99);
  box-shadow: 0 0.6rem 1.4rem rgba(36, 51, 66, 0.05);
  backdrop-filter: blur(20px) saturate(1.12);
  transition: box-shadow 180ms ease;
}

.mp-feature:hover {
  box-shadow: 0 1.3rem 3rem rgba(36, 51, 66, 0.12);
}

.mp-feature__image {
  position: relative;
  overflow: hidden;
  margin: calc(-1.2rem - 1px) calc(-1.2rem - 1px) 0;
  border-radius: 2rem 2rem 0 0;
  background: #f3f7fb;
}

.mp-feature__image img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.mp-feature__body {
  display: flex;
  flex-direction: column;
}

.mp-plan-title {
  --d: 0.6em;
  --bleed-x: 1.1rem;
  --nx: calc(var(--bleed-x) - 0.125rem);
  position: relative;
  display: block;
  width: calc(100% + 2.4rem + 2 * var(--bleed-x));
  margin: calc(-1.4rem - var(--d)) calc(-1.2rem - var(--bleed-x)) 1rem;
  padding-block: 0.3rem 0.6rem;
  padding-inline: 1.2rem;
  border-style: solid;
  border-width: var(--d) var(--nx);
  border-image: conic-gradient(#0008 0 0) 50% / var(--d) var(--nx);
  clip-path: polygon(100% var(--d), var(--nx) var(--d), var(--nx) 0, 0 var(--d), 0 calc(100% - var(--d)), calc(100% - var(--nx)) calc(100% - var(--d)), calc(100% - var(--nx)) 100%, 100% calc(100% - var(--d)));
  background-color: #b1d84b;
  color: #fff !important;
  font-size: 2rem;
  font-weight: 900;
  line-height: 1.3;
  text-align: center;
}

.mp-data {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 0 0 1rem;
  border: 0;
  background: transparent;
}

.mp-data__summary {
  grid-column: 1 / -1;
  justify-self: start;
  width: fit-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.55em;
  margin-top: 0.8rem;
  margin-bottom: 0.15rem;
  padding: 0.26em 1.2em 0.26em 0.32em;
  border: 0;
  border-radius: 999px;
  background: #ECEFFE;
  color: #5566cf;
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1.4;
  text-align: left;
}

.mp-data__summary strong {
  font-size: 1.05em;
  white-space: nowrap;
  color: #3c4791;
}

.mp-data__summary::before {
  content: "";
  flex: none;
  align-self: center;
  width: 1.7em;
  height: 1.7em;
  border-radius: 50%;
  background-color: #7288E0;
  background-repeat: no-repeat;
  background-position: center 44%;
  background-size: 46%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 0 32 32'%3E%3Cg transform='translate(-309 -359)'%3E%3Cpath fill='%23ffffff' fill-rule='evenodd' d='M323,383 L325,383 L325,385 L323,385 L323,383 Z M323,387 L325,387 C326.104,387 327,386.104 327,385 L327,383 C327,381.896 326.104,381 325,381 L323,381 C321.896,381 321,381.896 321,383 L321,385 C321,386.104 321.896,387 323,387 L323,387 Z M315,383 L317,383 L317,385 L315,385 L315,383 Z M315,387 L317,387 C318.104,387 319,386.104 319,385 L319,383 C319,381.896 318.104,381 317,381 L315,381 C313.896,381 313,381.896 313,383 L313,385 C313,386.104 313.896,387 315,387 L315,387 Z M323,375 L325,375 L325,377 L323,377 L323,375 Z M323,379 L325,379 C326.104,379 327,378.104 327,377 L327,375 C327,373.896 326.104,373 325,373 L323,373 C321.896,373 321,373.896 321,375 L321,377 C321,378.104 321.896,379 323,379 L323,379 Z M315,375 L317,375 L317,377 L315,377 L315,375 Z M315,379 L317,379 C318.104,379 319,378.104 319,377 L319,375 C319,373.896 318.104,373 317,373 L315,373 C313.896,373 313,373.896 313,375 L313,377 C313,378.104 313.896,379 315,379 L315,379 Z M337,367 L311,367 L311,365 C311,363.896 311.896,363 313,363 L317,363 L317,364 C317,364.553 317.447,365 318,365 C318.553,365 319,364.553 319,364 L319,363 L329,363 L329,364 C329,364.553 329.447,365 330,365 C330.553,365 331,364.553 331,364 L331,363 L335,363 C336.104,363 337,363.896 337,365 L337,367 L337,367 Z M337,387 C337,388.104 336.104,389 335,389 L313,389 C311.896,389 311,388.104 311,387 L311,369 L337,369 L337,387 L337,387 Z M335,361 L331,361 L331,360 C331,359.448 330.553,359 330,359 C329.447,359 329,359.448 329,360 L329,361 L319,361 L319,360 C319,359.448 318.553,359 318,359 C317.447,359 317,359.448 317,360 L317,361 L313,361 C310.791,361 309,362.791 309,365 L309,387 C309,389.209 310.791,391 313,391 L335,391 C337.209,391 339,389.209 339,387 L339,365 C339,362.791 337.209,361 335,361 L335,361 Z M331,375 L333,375 L333,377 L331,377 L331,375 Z M331,379 L333,379 C334.104,379 335,378.104 335,377 L335,375 C335,373.896 334.104,373 333,373 L331,373 C329.896,373 329,373.896 329,375 L329,377 C329,378.104 329.896,379 331,379 L331,379 Z M331,383 L333,383 L333,385 L331,385 L331,383 Z M331,387 L333,387 C334.104,387 335,386.104 335,385 L335,383 C335,381.896 334.104,381 333,381 L331,381 C329.896,381 329,381.896 329,383 L329,385 C329,386.104 329.896,387 331,387 L331,387 Z'/%3E%3C/g%3E%3C/svg%3E");
}

.mp-data__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  padding: 1.1rem 0.6rem 1rem;
  border: 1px solid #DEE3FA;
  border-radius: 0.9rem;
  background: #fff;
  box-shadow: 0 0.3rem 0.9rem rgba(85, 102, 207, 0.07);
  text-align: center;
}

.mp-data__item::before {
  content: "";
  flex: none;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  background-color: #ECEFFE;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 54%;
}

.mp-data__item:nth-child(2)::before {
  background-size: 62%;
  background-position: center 58%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 122.88 96.04'%3E%3Cpath fill='%237288e0' fill-rule='evenodd' clip-rule='evenodd' d='M59.07,96.03L1.15,29.77h38.01L59.07,96.03L59.07,96.03L59.07,96.03z M61.18,0.11L45.89,25.24H77.6L61.18,0.11 L61.18,0.11z M82.18,25.07L65.17,0h31.45L82.18,25.07L82.18,25.07z M41.65,25.31L56.55,0H24.61L41.65,25.31L41.65,25.31z M101.71,2.98L86.67,25.24h36.21L101.71,2.98L101.71,2.98z M22.26,2.98l15.81,22.26H0L22.26,2.98L22.26,2.98L22.26,2.98z M44.73,29.57h33.63L62.04,95.04L44.73,29.57L44.73,29.57L44.73,29.57z M64.91,96.04l57.23-66.27l-38.01,0L64.91,96.04L64.91,96.04 L64.91,96.04z'/%3E%3C/svg%3E");
}

.mp-data__item:nth-child(3)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%237288e0' d='M488.455,274.707c-6.558-96.435-53.039-183.31-53.039-183.31c-1.602-5.504,1.366-11.313,6.777-13.252 l13.37-4.796c9.12-3.272,14.06-13.126,11.211-22.39l-11.7-38.144c-2.9-9.475-12.88-14.862-22.388-12.088L347.95,25.326 c-9.492,2.748-15.038,12.594-12.459,22.136c0,0,57.001,155.282,57.001,211.195c0,69.966-55.888,132.429-136.492,132.429 c-80.604,0-136.492-62.463-136.492-132.429c0-55.913,57.001-211.195,57.001-211.195c2.58-9.542-2.95-19.388-12.442-22.136 L79.332,0.728c-9.525-2.774-19.489,2.613-22.388,12.088L45.243,50.96c-2.849,9.264,2.091,19.118,11.211,22.39l13.353,4.796 c5.429,1.938,8.379,7.747,6.794,13.252c0,0-46.497,86.875-53.056,183.31C14.188,412.202,124.431,512,256,512 C387.586,512,497.812,412.202,488.455,274.707z M75.151,325.841c-9.542,0-17.264-7.738-17.264-17.28 c0-9.534,7.722-17.264,17.264-17.264c9.542,0,17.264,7.73,17.264,17.264C92.415,318.102,84.694,325.841,75.151,325.841z M87.56,199.178c-9.525,0-17.264-7.739-17.264-17.281c0-9.542,7.739-17.28,17.264-17.28c9.542,0,17.281,7.739,17.281,17.28 C104.841,191.439,97.102,199.178,87.56,199.178z M138.491,433.318c-9.542,0-17.28-7.755-17.28-17.272 c0-9.559,7.738-17.289,17.28-17.289c9.543,0,17.264,7.73,17.264,17.289C155.755,425.564,148.034,433.318,138.491,433.318z M373.526,433.318c-9.542,0-17.264-7.755-17.264-17.272c0-9.559,7.722-17.289,17.264-17.289c9.542,0,17.281,7.73,17.281,17.289 C390.806,425.564,383.068,433.318,373.526,433.318z M407.177,181.897c0-9.542,7.721-17.28,17.264-17.28 c9.542,0,17.28,7.739,17.28,17.28c0,9.542-7.738,17.281-17.28,17.281C414.898,199.178,407.177,191.439,407.177,181.897z M436.849,325.841c-9.543,0-17.264-7.738-17.264-17.28c0-9.534,7.721-17.264,17.264-17.264c9.542,0,17.28,7.73,17.28,17.264 C454.129,318.102,446.392,325.841,436.849,325.841z'/%3E%3C/svg%3E");
}

.mp-data__item:nth-child(4)::before {
  background-size: 70%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200.13 200.02'%3E%3Cg transform='translate(-248.44 -442.39)'%3E%3Cg transform='translate(-.96350 -1.0044)'%3E%3Cpath style='stroke:%237288e0;stroke-width:24.084;fill:none' d='m531.77 557.68c0 99.758-80.87 180.63-180.63 180.63-99.758 0-180.63-80.87-180.63-180.63 0-99.758 80.87-180.63 180.63-180.63 99.758 0 180.63 80.87 180.63 180.63z' transform='matrix(.41522 0 0 .41522 203.67 311.84)'/%3E%3Cpath style='stroke:%237288e0;stroke-width:40.139;fill:none' d='m531.77 557.68c0 99.758-80.87 180.63-180.63 180.63-99.758 0-180.63-80.87-180.63-180.63 0-99.758 80.87-180.63 180.63-180.63 99.758 0 180.63 80.87 180.63 180.63z' transform='matrix(.24913 0 0 .24913 261.99 404.46)'/%3E%3Cpath style='fill:%237288e0' d='m531.77 557.68c0 99.758-80.87 180.63-180.63 180.63-99.758 0-180.63-80.87-180.63-180.63 0-99.758 80.87-180.63 180.63-180.63 99.758 0 180.63 80.87 180.63 180.63z' transform='matrix(.12121 0 0 .12121 306.91 475.8)'/%3E%3Cpath d='m349.48 455.93v174.95' style='stroke:%237288e0;stroke-linecap:round;stroke-width:5;fill:none'/%3E%3Cpath style='stroke:%237288e0;stroke-linecap:round;stroke-width:5;fill:none' d='m436.98 543.41h-174.95'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.mp-data__item:nth-child(5)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%237288e0'%3E%3Cpath d='M487.492,105.476h-341.04h-2.468h-24.516h-94.96H0v24.508v252.024v24.516h24.508h94.96h24.516h2.468h341.04H512v-24.516V129.984v-24.508H487.492z M487.492,382.008h-341.04c0-7.452-6.041-13.476-13.5-13.476c-7.436,0-13.484,6.024-13.484,13.476h-94.96V129.984h94.96c0,7.452,6.048,13.484,13.484,13.484c7.459,0,13.5-6.032,13.5-13.484h341.04V382.008z'/%3E%3Cpath d='M132.952,267.717c-7.436,0-13.484,6.033-13.484,13.485c0,7.451,6.048,13.484,13.484,13.484c7.459,0,13.5-6.032,13.5-13.484C146.452,273.75,140.411,267.717,132.952,267.717z'/%3E%3Cpath d='M132.952,166.896c-7.436,0-13.484,6.04-13.484,13.499c0,7.452,6.048,13.484,13.484,13.484c7.459,0,13.5-6.032,13.5-13.484C146.452,172.936,140.411,166.896,132.952,166.896z'/%3E%3Cpath d='M132.952,217.306c-7.436,0-13.484,6.049-13.484,13.484c0,7.46,6.048,13.492,13.484,13.492c7.459,0,13.5-6.033,13.5-13.492C146.452,223.355,140.411,217.306,132.952,217.306z'/%3E%3Cpath d='M132.952,318.121c-7.436,0-13.484,6.032-13.484,13.491c0,7.444,6.048,13.485,13.484,13.485c7.459,0,13.5-6.041,13.5-13.485C146.452,324.153,140.411,318.121,132.952,318.121z'/%3E%3Crect x='250.806' y='180.653' width='167.024' height='18.161'/%3E%3Crect x='250.806' y='246.92' width='167.024' height='18.153'/%3E%3Crect x='332.5' y='313.186' width='85.331' height='18.161'/%3E%3C/svg%3E");
}

.mp-data__label {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #8B90C2;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

.mp-data__value {
  min-width: 0;
  margin: 0;
  padding: 0;
  color: #3c4791;
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1.3;
  text-align: center;
  overflow-wrap: anywhere;
}

.mp-plan-text {
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.55;
}

.mp-card-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.7rem;
  margin-top: auto;
}

.mp-card-actions__row {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
  gap: 0.7rem;
  width: 100%;
}

.mp-stock {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "remaining label notice"
    "remaining bar bar";
  align-items: center;
  column-gap: 1rem;
  row-gap: 0.32rem;
  width: 100%;
  flex: 0 0 auto;
  min-width: 0;
}

.mp-stock__label {
  display: contents;
}

.mp-stock__capacity-text {
  grid-area: label;
  align-self: end;
  color: #4b5563;
  font-size: 1.45rem;
  font-weight: 900;
  line-height: 1.2;
  text-align: left;
}

.mp-stock__capacity-text::before {
  content: "";
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  margin-right: 0.3em;
  vertical-align: -0.16em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='%234b5563'%3E%3Cpath d='M28.672,29.321c2.288,0,4.404-0.721,6.146-1.94c0.591-0.414,1.135-0.886,1.631-1.407c-0.857-1.237-1.542-2.598-2.038-4.048c-0.572-1.671-0.897-3.456-0.897-5.319c0-0.803,0.077-1.587,0.189-2.359c0.221-1.531,0.645-2.994,1.258-4.359c-1.769-1.282-3.937-2.046-6.288-2.046c-1.853,0-3.597,0.469-5.119,1.296c-1.826,0.992-3.332,2.498-4.324,4.324c-0.165,0.304-0.316,0.618-0.452,0.939c-0.543,1.285-0.844,2.698-0.844,4.18c0,1.483,0.301,2.895,0.844,4.18c0.136,0.321,0.287,0.635,0.452,0.939c0.798,1.47,1.934,2.726,3.297,3.68c0.331,0.231,0.671,0.45,1.027,0.644C25.074,28.852,26.818,29.321,28.672,29.321z'/%3E%3Cpath d='M34.758,69.991c-0.197-0.088-0.377-0.204-0.567-0.303c-3.354-1.753-5.663-5.245-5.663-9.284V42.959c0-2.39,0.521-4.658,1.438-6.711c0.663-1.485,1.538-2.852,2.588-4.067H24.1h0c-1.482,0-2.897,0.303-4.185,0.85c-3.865,1.642-6.594,5.482-6.594,9.928v16.137c0,1.072,0.329,2.07,0.891,2.9c0.936,1.383,2.519,2.296,4.306,2.296h0.567v22.1c0,1.072,0.329,2.07,0.891,2.9c0.374,0.553,0.853,1.031,1.406,1.406c0.553,0.374,1.181,0.645,1.856,0.784c0.337,0.069,0.687,0.106,1.044,0.106h8.783h0c0.659,0,1.286-0.137,1.868-0.363c-0.107-0.599-0.172-1.212-0.172-1.841V69.991z'/%3E%3Cpath d='M66.487,16.608c0,1.863-0.325,3.648-0.897,5.319c-0.496,1.45-1.181,2.811-2.038,4.047c0.495,0.521,1.04,0.994,1.631,1.407c1.742,1.219,3.858,1.94,6.146,1.94c1.854,0,3.597-0.47,5.119-1.296c0.356-0.194,0.696-0.412,1.027-0.644c2.775-1.942,4.593-5.156,4.593-8.799c0-4.078-2.273-7.624-5.62-9.443c-1.522-0.827-3.265-1.296-5.119-1.296c-2.351,0-4.519,0.764-6.288,2.046c0.613,1.366,1.037,2.829,1.258,4.36C66.409,15.021,66.487,15.805,66.487,16.608z'/%3E%3Cpath d='M82.746,34.649c-0.799-0.66-1.695-1.208-2.661-1.619c-1.288-0.547-2.703-0.85-4.185-0.85h0h-8.454c1.05,1.216,1.925,2.583,2.588,4.067c0.917,2.054,1.438,4.321,1.438,6.711v17.445c0,4.039-2.309,7.531-5.663,9.284c-0.19,0.099-0.37,0.216-0.566,0.303v19.393c0,0.629-0.065,1.242-0.172,1.842c0.582,0.227,1.208,0.363,1.867,0.363h0h8.783c0.357,0,0.706-0.037,1.044-0.106c2.362-0.487,4.152-2.59,4.152-5.09v-22.1h0.567c1.786,0,3.369-0.913,4.306-2.296c0.562-0.83,0.891-1.828,0.891-2.9V42.959c0-2.594-0.928-4.981-2.469-6.846C83.77,35.58,83.279,35.089,82.746,34.649z'/%3E%3Cpath d='M43.925,26.488c1.769,1.09,3.845,1.73,6.075,1.73c2.23,0,4.306-0.64,6.075-1.73c3.316-2.044,5.534-5.698,5.534-9.879C61.609,10.198,56.411,5,50,5c-6.411,0-11.609,5.198-11.609,11.609C38.391,20.79,40.609,24.444,43.925,26.488z'/%3E%3Cpath d='M66.151,62.584c0.285-0.672,0.443-1.409,0.443-2.181V42.959c0-0.401-0.02-0.797-0.06-1.187c-0.08-0.781-0.238-1.54-0.466-2.268c-1.481-4.735-5.919-8.196-11.125-8.196h0h-9.884c-1.202,0-2.362,0.184-3.455,0.526c-0.728,0.228-1.427,0.526-2.087,0.886c-0.99,0.54-1.895,1.219-2.687,2.011c-1.056,1.056-1.912,2.312-2.503,3.705c-0.444,1.045-0.739,2.166-0.859,3.337c-0.04,0.39-0.06,0.786-0.06,1.187v17.444c0,0.772,0.158,1.509,0.443,2.181c0.571,1.343,1.65,2.422,2.993,2.993c0.671,0.285,1.409,0.443,2.181,0.443h0.613v23.363c0,0.772,0.158,1.51,0.443,2.181c0.571,1.343,1.65,2.422,2.993,2.993c0.336,0.143,0.688,0.253,1.053,0.328C44.49,94.961,44.867,95,45.253,95h0h9.494c0.386,0,0.764-0.039,1.128-0.115c2.553-0.526,4.489-2.799,4.489-5.502V66.02h0h0.613c1.545,0,2.949-0.632,3.967-1.65C65.453,63.861,65.865,63.255,66.151,62.584z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.mp-stock__notice {
  grid-area: notice;
  justify-self: end;
  align-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  margin: 0 0 -0.2rem;
  padding: 0.25em 0.9em;
  border-radius: 0.7rem;
  background: #fff3d6;
  color: #b9852a;
  font-size: 1.2rem;
  animation: mp-stock-segment-blink 1.1s ease-in-out infinite;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
  transform: scale(0.55);
  transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mp-stock__notice.is-in {
  transform: scale(1);
}

.mp-stock__notice::before {
  content: "";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.3em;
  height: 1.3em;
  border-radius: 50%;
  background-color: #f0b429;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60%;
  color: #fff;
  font-size: 0.85em;
}

.mp-stock__remaining-text {
  grid-area: remaining;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.22rem;
  align-self: center;
  width: 6.1rem;
  height: 6.1rem;
  padding: 0.5rem;
  border-radius: 1.2rem;
  background: var(--violet);
  color: #fff !important;
  font-size: 1.15rem !important;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.mp-stock__remaining {
  display: block;
  font-size: 2rem;
  line-height: 1;
  margin-top: 0;
}

.mp-stock__arrows {
  display: none;
  flex-shrink: 0;
  align-items: center;
  gap: 0.15rem;
}

.mp-stock__arrow {
  flex-shrink: 0;
  width: 1.18rem;
  height: 1.18rem;
  margin-left: 0.18rem;
  color: #333;
  opacity: 0.25;
  animation: mp-stock-flow 1.2s ease-in-out infinite;
}

.mp-stock__arrow:first-child {
  margin-left: 0;
}
.mp-stock__arrow:nth-child(1) {
  animation-delay: 0s;
}

.mp-stock__arrow:nth-child(2) {
  animation-delay: 0.2s;
}

.mp-stock__arrow:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes mp-stock-flow {
  0%, 40%, 100% {
    opacity: 0.25;
  }
  20% {
    opacity: 1;
  }
}

.mp-stock__bar {
  display: flex;
  grid-area: bar;
  justify-content: flex-start;
  height: 1.55rem;
  border-radius: 999px;
  background: rgba(36, 51, 66, 0.1);
  overflow: hidden;
}

.mp-stock__fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.22) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.22) 50%,
    rgba(255, 255, 255, 0.22) 75%,
    transparent 75%,
    transparent
  );
  background-size: 1.1rem 1.1rem;
  animation: mp-stock-stripes 1.6s linear infinite;
}

.mp-stock--linear-ring .mp-stock__fill {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  background-color: currentColor;
  background-image: none;
  animation: none;
  z-index: 1;
  opacity: 0;
}

.mp-stock--linear-ring .mp-stock__fill::after {
  content: none;
  display: none;
}

.mp-stock--linear-ring .mp-stock__bar {
  position: relative;
  border-radius: 0;
  background-color: #e4e8ee;
}

.mp-stock--linear-ring .mp-stock__segments {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(40, minmax(0, 1fr));
  pointer-events: none;
}

.mp-stock--linear-ring .mp-stock__segment {
  min-width: 0;
  background: #e4e8ee;
  border-right: 0.2rem solid rgba(255, 255, 255, 0.95);
  animation: mp-stock-segment-blink 1.1s ease-in-out infinite;
}

.mp-stock--linear-ring .mp-stock__segment:last-child {
  border-right: 0;
}

.mp-stock--green.mp-stock--linear-ring .mp-stock__segment.is-filled {
  background: #3B82F6;
}

.mp-stock--lime.mp-stock--linear-ring .mp-stock__segment.is-filled {
  background: #14B8A6;
}

.mp-stock--yellow.mp-stock--linear-ring .mp-stock__segment.is-filled {
  background: #FACC15;
}

.mp-stock--orange.mp-stock--linear-ring .mp-stock__segment.is-filled {
  background: #FB923C;
}

.mp-stock--red.mp-stock--linear-ring .mp-stock__segment.is-filled {
  background: #EF4444;
}

.mp-stock--linear-ring .mp-stock__segment.is-last-filled {
  --mp-blink-min: 0.15;
}

@keyframes mp-stock-segment-blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: var(--mp-blink-min, 1);
  }
}

@keyframes mp-stock-stripes {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 1.1rem 0;
  }
}

.mp-stock--green .mp-stock__fill {
  background-color: #3B82F6;
}

.mp-stock--green .mp-stock__remaining-text {
  color: #2f5fcf;
  font-size: 1.2em;
}

.mp-stock--lime .mp-stock__fill {
  background-color: #14B8A6;
}

.mp-stock--lime .mp-stock__remaining-text {
  color: #0f9485;
  font-size: 1.2em;
}

.mp-stock--yellow .mp-stock__fill {
  background-color: #FACC15;
}

.mp-stock--yellow .mp-stock__remaining-text {
  color: #b58c0a;
  font-size: 1.2em;
}

.mp-stock--orange .mp-stock__fill {
  background-color: #FB923C;
}

.mp-stock--orange .mp-stock__remaining-text {
  color: #d9711f;
  font-size: 1.2em;
}

.mp-stock--red .mp-stock__fill {
  background-color: #EF4444;
}

.mp-stock--red .mp-stock__remaining-text {
  color: #d92d2d;
  font-size: 1.2em;
}

.mp-stock--critical .mp-stock__fill {
  animation: mp-stock-blink 1.8s ease-in-out infinite;
}

.mp-stock--critical .mp-stock__notice {
  --mp-blink-min: 0.15;
}

.mp-stock--linear-ring.mp-stock--critical .mp-stock__fill {
  animation: none;
}

.mp-stock--linear-ring.mp-stock--critical .mp-stock__fill::after {
  animation: mp-stock-segment-blink 1.2s ease-in-out infinite;
}

.mp-card-actions[data-stock-level="green"] .mp-stock__remaining-text {
  background: #3B82F6 !important;
}

.mp-stock--green .mp-stock__notice {
  background: #e8f0fe;
  color: #2454b8;
}

.mp-stock--green .mp-stock__notice::before {
  background-color: #3B82F6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
}

.mp-card-actions[data-stock-level="lime"] .mp-stock__remaining-text {
  background: #14B8A6 !important;
}

.mp-stock--lime .mp-stock__notice {
  background: #e3f8f5;
  color: #0f8a7c;
}

.mp-stock--lime .mp-stock__notice::before {
  background-color: #14B8A6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M15.362 5.214A8.252 8.252 0 0112 21 8.25 8.25 0 016.038 7.047 8.287 8.287 0 009 9.601a8.983 8.983 0 013.361-6.867 8.21 8.21 0 003 2.48z'/%3E%3Cpath fill='%23fff' d='M12.32 9.348c.391-.391.913-.6 1.46-.563A6.741 6.741 0 0115.75 12c0 2.485-1.59 4.605-3.75 5.385a3.728 3.728 0 01-1.014-3.726 4.5 4.5 0 011.34-3.31z'/%3E%3C/svg%3E");
}

.mp-card-actions[data-stock-level="yellow"] .mp-stock__remaining-text {
  background: #FACC15 !important;
}

.mp-stock--yellow .mp-stock__notice {
  background: #fef7da;
  color: #92710a;
}

.mp-stock--yellow .mp-stock__notice::before {
  background-color: #FACC15;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M3 2.25a.75.75 0 01.75.75v.54l1.838-.46a9.75 9.75 0 016.725.738l.108.054a8.25 8.25 0 005.58.652l3.109-.732a.75.75 0 01.917.81 47.784 47.784 0 00.005 10.337.75.75 0 01-.574.812l-3.114.733a9.75 9.75 0 01-6.594-.77l-.108-.054a8.25 8.25 0 00-5.69-.625l-2.202.55V21a.75.75 0 01-1.5 0V3A.75.75 0 013 2.25z'/%3E%3C/svg%3E");
}

.mp-card-actions[data-stock-level="orange"] .mp-stock__remaining-text {
  background: #FB923C !important;
}

.mp-stock--orange .mp-stock__notice {
  background: #ffe9d6;
  color: #b65b18;
}

.mp-stock--orange .mp-stock__notice::before {
  background-color: #FB923C;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M6 2v6h.01L6 8.01 10 12l-4 4 .01.01H6V22h12v-5.99h-.01L18 16l-4-4 4-3.99-.01-.01H18V2H6zm10 14.5V20H8v-3.5l4-4 4 4zm-4-5l-4-4V4h8v3.5l-4 4z'/%3E%3C/svg%3E");
}

.mp-card-actions[data-stock-level="red"] .mp-stock__remaining-text {
  background: #EF4444 !important;
}

.mp-stock--red .mp-stock__notice {
  background: #fde2e2;
  color: #b62b2b;
}

.mp-stock--red .mp-stock__notice::before {
  background-color: #EF4444;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='9' y='1' width='6' height='13' rx='3' fill='%23fff'/%3E%3Ccircle cx='12' cy='20.5' r='3.5' fill='%23fff'/%3E%3C/svg%3E");
}

@keyframes mp-stock-blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

.mp-price__icon {
  flex-shrink: 0;
  width: 2.7rem;
  height: 2.7rem;
  color: #fff !important;
}

.mp-details {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 5rem;
  padding: 0.8rem 3.6rem 0.8rem 1.4rem;
  border: 1px solid #7288E0;
  border-radius: 1.2rem;
  background: #fff;
  color: #5566cf !important;
  font-size: 1.8rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: 0 0.35rem 0.8rem rgba(85, 102, 207, 0.18);
}

.mp-details::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.6rem;
  width: 1rem;
  height: 1rem;
  border-top: 0.25rem solid #5566cf;
  border-right: 0.25rem solid #5566cf;
  transform: translateY(-50%) rotate(45deg);
}

.mp-info-tip {
  position: absolute;
  right: 0.8rem;
  bottom: 0.8rem;
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: rgba(36, 51, 66, 0.74);
  color: #fff !important;
  font-size: 1.3rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 0.3rem 0.8rem rgba(0, 0, 0, 0.25);
}

.mp-plan-card__region-badge {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  z-index: 2;
  padding: 0.6rem 1.5rem;
  border-radius: 999px;
  background: #7288E0;
  color: #fff;
  font-size: 1.4rem;
  font-weight: 900;
  line-height: 1.2;
  box-shadow: 0 0.3rem 0.8rem rgba(0, 0, 0, 0.25);
}

.mp-price {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  width: 100%;
  min-height: 5rem;
  padding: 0.8rem 1.2rem;
  border-radius: 1rem;
  background: var(--violet);
  color: #fff !important;
  font-size: 2.2rem;
  font-weight: 900;
  transition: background-color 400ms ease-in-out;
}

.mp-price__amount {
  flex: 1;
  text-align: center;
  white-space: nowrap;
}

.mp-regular-price {
  margin: 0 0 0.8rem;
  color: #9a9a9a;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: right;
}

.mp-card-actions__offer-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: nowrap;
}

.mp-card-actions__offer-row .mp-regular-price {
  flex: 1;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  font-size: 1.45rem;
  text-align: left;
  white-space: normal;
}

.mp-card-actions__offer-row .mp-price {
  width: auto;
  min-width: 14.6rem;
  flex: 0 0 auto;
}

.mp-card-actions__offer-row--regular .mp-regular-price {
  gap: 0.28rem;
}

.mp-regular-price--single .mp-regular-price__label {
  color: #7f8898;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0;
}

.mp-regular-price--single .mp-regular-price__sale {
  align-self: flex-end;
  color: #333;
  font-size: 2.15em;
  font-weight: 900;
}

.mp-regular-price__label {
  display: inline;
  line-height: 1.1;
}

.mp-regular-price__values {
  display: inline-flex;
  align-items: baseline;
  gap: 0.1rem;
  white-space: nowrap;
}

.mp-price--simple {
  gap: 0.7rem;
  min-height: 5.3rem;
  padding: 0.95rem 1.6rem;
  font-size: 2.05rem;
}

.mp-price--simple .mp-price__amount {
  flex: 0 0 auto;
}

.mp-price__play {
  display: inline-flex;
  flex: 0 0 auto;
  margin-right: 0.6rem;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: #fff;
}

.mp-price__play svg {
  width: 0.6rem;
  height: 0.85rem;
  color: var(--violet);
  transform: translateX(0.05rem);
}

.mp-plan-card--theme-green600 .mp-price__play svg {
  color: #6f8c2e;
}

.mp-price__simple-arrow {
  display: inline-block;
  flex: 0 0 auto;
  font-size: 0.52em;
  font-weight: 700;
  line-height: 1;
}

.mp-regular-price__amount {
  position: relative;
  display: inline-block;
  margin-left: 0.25em;
}

.mp-regular-price__amount::after {
  content: "";
  position: absolute;
  left: -0.05em;
  right: -0.05em;
  top: 50%;
  height: 0.08em;
  border-radius: 999px;
  background: currentColor;
  transform: translateY(-50%);
}

.mp-regular-price__sale {
  align-self: flex-end;
  color: #333;
  font-size: 1.92em;
  font-weight: 900;
  line-height: 1;
}

.mp-price__divider {
  flex-shrink: 0;
  width: 1px;
  height: 2.2rem;
  background: rgba(255, 255, 255, 0.55);
}

.mp-prepare {
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 2rem;
  background: rgba(0, 0, 0, 0.4);
  box-shadow: 0 0.6rem 1.4rem rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(20px) saturate(1.12);
}

.mp-prepare__title {
  margin: 0 0 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  font-family: "BIZ UDMincho", "Yu Mincho", "YuMincho", serif;
  font-size: clamp(1.4rem, 3.6vw, 2.2rem);
  font-weight: 400;
  text-align: center;
}

.mp-prepare__grid {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mp-prepare__item {
  --prepare-h: 3.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  min-height: var(--prepare-h);
  padding: 0 1.3rem 0 0;
  overflow: hidden;
  border: 1px solid #e7e7e7;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0.3rem 0.8rem rgba(0, 0, 0, 0.18);
}

.mp-prepare__name {
  display: inline-flex;
  align-items: center;
  gap: 0.9em;
  height: var(--prepare-h);
  overflow: hidden;
  color: #333;
  font-size: 1.4rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mp-prepare__icon-badge {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: calc(var(--prepare-h) * 1.6);
  height: var(--prepare-h);
  border-radius: 999px 0 0 999px;
  background: #3a3a3a;
}

.mp-prepare__icon {
  flex: none;
  width: calc(var(--prepare-h) * 0.5);
  height: calc(var(--prepare-h) * 0.5);
  color: #fff;
}

.mp-prepare__price {
  color: rgba(0, 0, 0, 0.55);
  font-size: 1.2rem;
  font-weight: 900;
  white-space: nowrap;
}

.mp-plan-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 72px;
}

.mp-plan-card {
  display: flex;
  flex-direction: column;
  overflow: visible !important;
  border: 1px solid rgba(255, 255, 255, 0.96);
  border-radius: 2rem;
  background: rgba(255, 255, 255, 0.99);
  box-shadow: 0 0.6rem 1.4rem rgba(36, 51, 66, 0.05);
  backdrop-filter: blur(20px) saturate(1.12);
  transition: box-shadow 180ms ease;
}

.mp-plan-card:hover {
  box-shadow: 0 1.3rem 3rem rgba(36, 51, 66, 0.12);
}

.mp-plan-card__image {
  position: relative;
  background: #f3f7fb;
  margin: -1px -1px 0;
  overflow: hidden;
  border-radius: 2rem 2rem 0 0;
}

.mp-plan-card__image img,
.mp-plan-card__image video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.mp-plan-card__body {
  display: flex;
  flex: 1.28;
  flex-direction: column;
  padding: 1.15rem;
}

.mp-plan-card__title {
  --d: 0.6em;
  --bleed-x: 1.1rem;
  position: relative;
  display: block;
  width: calc(100% + 2.3rem + 2 * var(--bleed-x));
  margin: calc(-1.15rem - var(--d) - 1px) calc(-1.15rem - var(--bleed-x)) -1.8rem;
  padding-block: 0.3rem 0.6rem;
  padding-inline: 1.2rem;
  --nx: calc(var(--bleed-x) - 0.125rem);
  border-style: solid;
  border-width: var(--d) var(--nx);
  border-image: conic-gradient(#0008 0 0) 50% / var(--d) var(--nx);
  clip-path: polygon(100% var(--d), var(--nx) var(--d), var(--nx) 0, 0 var(--d), 0 calc(100% - var(--d)), calc(100% - var(--nx)) calc(100% - var(--d)), calc(100% - var(--nx)) 100%, 100% calc(100% - var(--d)));
  background-color: #7288E0;
  color: #fff !important;
  font-size: 3rem;
  font-weight: 900;
  line-height: 1.3;
  text-align: center;
}

.mp-plan-card--theme-green600 .mp-plan-card__title {
  background-color: #91b13e;
}

.mp-plan-card--theme-green600 .mp-price {
  background: #91b13e !important;
}

.mp-plan-card--theme-green600 .mp-plan-card__region-badge {
  background: #91b13e;
}

.mp-plan-card--theme-green600 .mp-data__summary {
  background: #eef6dc;
  color: #5a7a1e;
}

.mp-plan-card--theme-green600 .mp-data__summary strong {
  color: #3e5614;
}

.mp-plan-card--theme-green600 .mp-data__summary::before,
.mp-plan-card--theme-green600 .mp-data__item::before {
  filter: hue-rotate(209deg) saturate(0.85);
}

.mp-plan-card--theme-green600 .mp-data__label {
  color: #8a9a5e;
}

.mp-plan-card--theme-green600 .mp-data__value {
  color: #4a6219;
}

.mp-plan-card .mp-data {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mp-plan-card .mp-data__value {
  max-width: 100%;
  text-align: center;
}

.mp-plan-card .mp-data--circle {
  grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(13rem, 16rem);
}

.mp-data--circle .mp-data__summary {
  grid-area: 1 / 1 / 2 / -1;
}

.mp-data--circle .mp-data__item:nth-child(2) {
  grid-area: 2 / 1;
}

.mp-data--circle .mp-data__item:nth-child(3) {
  grid-area: 2 / 2;
}

.mp-data--circle .mp-data__item:nth-child(4) {
  grid-area: 3 / 1;
}

.mp-data--circle .mp-data__item:nth-child(5) {
  grid-area: 3 / 2;
}

.mp-data--circle .mp-circle-stock {
  grid-area: 2 / 3 / 4 / 4;
}

.mp-data--circle .mp-data__item {
  justify-content: center;
  gap: 0.65rem;
}

.mp-data--circle .mp-data__item::before {
  width: 4.4rem;
  height: 4.4rem;
}

.mp-data--circle .mp-data__label {
  font-size: 1.3rem;
}

.mp-data--circle .mp-data__value {
  font-size: 1.6rem;
}

.mp-circle-stock {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 0.6rem;
  border: 1px solid #DEE3FA;
  border-radius: 0.9rem;
  background: #fff;
  box-shadow: 0 0.3rem 0.9rem rgba(85, 102, 207, 0.07);
}

.mp-circle-stock__ring-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.mp-circle-stock__ring {
  width: 100%;
  max-width: 13.5rem;
  aspect-ratio: 1;
  transform: rotate(-90deg);
}

.mp-circle-stock__track,
.mp-circle-stock__fill {
  fill: none;
  stroke-width: 16;
}

.mp-circle-stock__track {
  stroke: rgba(36, 51, 66, 0.12);
}

.mp-circle-stock__fill {
  stroke: #3fb869;
  stroke-linecap: butt;
  stroke-dasharray: 326.7256 326.7256;
  stroke-dashoffset: 0;
  transition: stroke 400ms ease-in-out;
}

.mp-circle-stock__notches {
  fill: none;
  stroke: #fff;
  stroke-width: 17;
  stroke-linecap: butt;
  stroke-dasharray: 1.4 5.135;
}

.mp-circle-stock__marker {
  fill: none;
  stroke: #fff;
  stroke-width: 16;
  stroke-linecap: butt;
  stroke-dasharray: 5.135 321.591;
  opacity: 0;
}

.mp-circle-stock__marker.is-active {
  animation: mp-circle-marker-flash 1.4s ease-in-out infinite;
}

@keyframes mp-circle-marker-flash {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 0.85;
  }
}

.mp-circle-stock__center {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translate(-50%, -50%);
  line-height: 1.1;
}

.mp-circle-stock__caption {
  color: #8B90C2;
  font-size: 1.4rem;
  font-weight: 700;
}

.mp-circle-stock__remaining {
  color: #3c4791;
  font-size: 4.2rem;
  font-weight: 900;
  transition: color 400ms ease-in-out;
}

.mp-circle-stock__capacity {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  margin: 0;
  color: #6A71A8;
  font-size: 1.3rem;
  font-weight: 700;
  white-space: nowrap;
}

.mp-circle-stock__capacity-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  background: #ECEFFE;
  color: #7288E0;
}

.mp-circle-stock__capacity-icon svg {
  width: 54%;
  height: 54%;
}

.mp-circle-stock__capacity-num {
  color: #5566cf;
  font-size: 1.5em;
  font-weight: 900;
}

.mp-circle-stock__soon {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  margin: 0.1rem 0 0;
  padding: 0.25em 0.9em;
  border-radius: 999px;
  background: #fff3d6;
  color: #b9852a;
  font-size: 1.2rem;
  font-weight: 900;
  white-space: nowrap;
}

.mp-circle-stock__soon::before {
  content: "!";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.3em;
  height: 1.3em;
  border-radius: 50%;
  background: #f0b429;
  color: #fff;
  font-size: 0.85em;
}

.mp-circle-stock--lime .mp-circle-stock__fill {
  stroke: #a3c93f;
}

.mp-circle-stock--lime .mp-circle-stock__remaining {
  color: #84a730;
}

.mp-circle-stock--yellow .mp-circle-stock__fill {
  stroke: #e8c542;
}

.mp-circle-stock--yellow .mp-circle-stock__remaining {
  color: #c4a213;
}

.mp-circle-stock--orange .mp-circle-stock__fill {
  stroke: #ff9a3d;
}

.mp-circle-stock--orange .mp-circle-stock__remaining {
  color: #e07b1f;
}

.mp-circle-stock--red .mp-circle-stock__fill {
  stroke: #ff4d4d;
}

.mp-circle-stock--red .mp-circle-stock__remaining {
  color: #e23b3b;
}

.mp-circle-stock--critical .mp-circle-stock__fill,
.mp-circle-stock--critical .mp-circle-stock__remaining {
  animation: mp-stock-blink 1.8s ease-in-out infinite;
}

.mp-free-card .mp-price {
  background: var(--green);
  color: #263a0c;
}

.mp-sold-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.mp-sold-card {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.96);
  border-radius: 2rem;
  background: rgba(255, 255, 255, 0.99);
  box-shadow: 0 0.6rem 1.4rem rgba(36, 51, 66, 0.05);
  backdrop-filter: blur(20px) saturate(1.12);
  transition: box-shadow 180ms ease;
}

.mp-sold-card:hover {
  box-shadow: 0 1.3rem 3rem rgba(36, 51, 66, 0.12);
}

.mp-sold-card > .mp-sold-card__image {
  position: relative;
  overflow: visible;
  z-index: 3;
}

.mp-sold-card__image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: grayscale(100%);
}

.mp-sold-card__stamp {
  position: absolute;
  z-index: 3;
  top: 62%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-6deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.45rem 0.4rem;
  border: 3px double #fff;
  border-radius: 0.3rem;
  background: #c81e1e;
  box-shadow: 0 0.5rem 1.2rem rgba(0, 0, 0, 0.4);
}

.mp-sold-card__stamp-text {
  writing-mode: vertical-rl;
  text-orientation: upright;
  color: #fff;
  font-size: 1.8rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1;
  white-space: nowrap;
}

.mp-sold-card__stamp-capacity {
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
}

.mp-sold-card__body {
  padding: 0.9rem;
}

.mp-sold-card__head {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0 0 0.4rem;
}

.mp-sold-card__title {
  margin: 0;
  text-align: left;
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1.35;
}

.mp-sold-card__price-inline {
  display: block;
  text-align: right;
  color: var(--muted);
  font-size: 0.85em;
  font-weight: 700;
}

.mp-bottom-nav {
  padding: 2rem 0;
  background: rgba(114, 136, 224, 0.92);
  border-top: 0;
}

.mp-bottom-nav__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.mp-bottom-nav__item {
  display: grid;
  place-items: center;
  min-height: 6.4rem;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 1.4rem;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 900;
  text-align: center;
}

.mp-bottom-nav__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 0.5rem;
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 1.5rem;
}

.mp-footer {
  padding: 0 0 5rem;
  background: #fff;
}

.mp-footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}

.mp-footer__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 2rem;
}

.mp-footer__links a {
  color: var(--muted);
  font-size: 1.2rem;
  font-weight: 900;
}

.mp-footer__copy {
  grid-column: 1 / -1;
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: 1.1rem;
}

.mp-fixed {
  position: fixed;
  z-index: 20;
  bottom: 1.6rem;
  left: 1.6rem;
  display: inline-flex;
  align-items: center;
  min-height: 4.2rem;
  padding: 0.8rem 1.4rem;
  border-radius: 999px;
  background: var(--violet);
  color: #fff;
  font-size: 1.2rem;
  font-weight: 900;
  box-shadow: 0 1rem 2.6rem rgba(114, 136, 224, 0.26);
}

@media (max-width: 640px) {
  body {
    font-size: 1.4rem;
  }

  .mp-container {
    width: min(100% - 2.4rem, 43rem);
  }

  .mp-header__top {
    gap: 0.35rem;
  }

  .mp-header__shell {
    padding: 0.6rem 0 0.65rem;
  }

  .mp-header__menu {
    width: 3rem;
    height: 3rem;
    padding: 0.45rem 0.7rem;
  }

  .mp-logo__image {
    width: 8rem;
  }

  .mp-header__strip-inner {
    gap: 1rem;
    min-height: 2.6rem;
  }

  .mp-header__member,
  .mp-header__nickname {
    font-size: 1.12rem;
  }

  .mp-header__nickname {
    padding-left: 1rem;
  }

  .mp-notice__text {
    white-space: nowrap;
  }

  .mp-data {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mp-data__item {
    padding: 0.9rem 0.5rem 0.85rem;
  }

  .mp-data__item::before {
    width: 3.2rem;
    height: 3.2rem;
  }

  .mp-carousel-card {
    aspect-ratio: 1000 / 248;
  }

  .mp-carousel-card__media {
    min-height: 0;
  }

  .mp-carousel-control {
    width: 3.4rem;
    height: 3.4rem;
    margin: 0 -0.4rem;
  }

  .mp-section__head {
    margin: 0 0 2rem;
  }

  .mp-section__title {
    margin: 0;
    transform: none;
  }

  .c-ttl01 .main {
    font-size: clamp(1.8rem, 8.4vw, 3.2rem);
    line-height: 1.4;
  }

  .mp-hero__copy {
    align-content: start;
    padding: 2.4rem;
  }

  .mp-footer__inner {
    grid-template-columns: 1fr;
  }

  .mp-bottom-nav__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mp-footer__links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mp-drawer__panel {
    width: min(28rem, 92vw);
  }
}

/* Frost pass based on the referenced frost.html .frost CSS. */
.mp-header__bar,
.mp-notice__inner,
.mp-hero__card,
.mp-shortcut,
.mp-section__head,
.mp-feature,
.mp-plan-card,
.mp-sold-card,
.mp-bottom-nav__item {
  overflow: hidden;
  border: 1px solid var(--frost-border) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  background-image: none !important;
  box-shadow: 0 0.8rem 2rem rgba(36, 51, 66, 0.06) !important;
  backdrop-filter: blur(8px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.05) !important;
}

.mp-feature {
  box-shadow: 0 0.6rem 1.4rem rgba(36, 51, 66, 0.45) !important;
}

.mp-plan-card {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.35) !important;
}

.mp-notice__inner {
  border: 1px solid #e7dfe6 !important;
  background: rgba(255, 255, 255, 0.85) !important;
  box-shadow: 0 0.5rem 1.2rem rgba(36, 51, 66, 0.08) !important;
  backdrop-filter: blur(6px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(6px) saturate(1.05) !important;
}

.mp-hero__card,
.mp-feature,
.mp-plan-card {
  background: rgba(255, 255, 255, 0.98) !important;
}

.mp-button:not(.-primary) {
  border: 1px solid var(--frost-border) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  background-image: none !important;
  box-shadow: 0 0.4rem 1rem rgba(36, 51, 66, 0.05) !important;
  backdrop-filter: blur(8px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.05) !important;
}

.mp-notice__mail {
  border: 0 !important;
  background: #10B6D6 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.38), 0 0.35rem 0.8rem rgba(45, 112, 186, 0.2) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.mp-button.-primary,
.mp-price,
.mp-pill-button,
.mp-fixed {
  background: var(--violet) !important;
  background-image: none !important;
  box-shadow: var(--frost-shadow-soft) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
}

.mp-section__head .mp-section__title,
.mp-section__head .mp-section__note {
  color: var(--ink) !important;
}

.mp-section__head {
  color: var(--ink) !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.mp-header__bar::before,
.mp-notice__inner::before,
.mp-hero__card::before,
.mp-shortcut::before,
.mp-feature::before,
.mp-prepare::before,
.mp-plan-card::before,
.mp-sold-card::before,
.mp-bottom-nav__item::before {
  display: none;
}

.mp-header__bar > *,
.mp-notice__inner > *,
.mp-hero__card > *,
.mp-shortcut > *,
.mp-feature > *,
.mp-prepare > *,
.mp-plan-card > *,
.mp-sold-card > *,
.mp-bottom-nav__item > * {
  position: relative;
  z-index: 2;
}

.mp-header__bar::after,
.mp-notice__inner::after,
.mp-hero__card::after,
.mp-shortcut::after,
.mp-feature::after,
.mp-prepare::after,
.mp-plan-card::after,
.mp-sold-card::after,
.mp-bottom-nav__item::after {
  display: none;
}

.mp-button.-primary,
.mp-price,
.mp-pill-button,
.mp-fixed {
  background: var(--violet) !important;
  background-image: none !important;
}

.mp-button:not(.-primary) {
  background: rgba(255, 255, 255, 0.28) !important;
  background-image: none !important;
  border-color: var(--frost-border);
  color: var(--ink) !important;
  backdrop-filter: blur(10px) saturate(var(--saturation));
  -webkit-backdrop-filter: blur(10px) saturate(var(--saturation));
}

.mp-button::before,
.mp-button::after,
.mp-price::before,
.mp-price::after,
.mp-pill-button::before,
.mp-pill-button::after,
.mp-section__head::before,
.mp-section__head::after {
  content: none !important;
  display: none !important;
}

.mp-section__head {
  display: block;
  overflow: visible;
  margin: 0 0 2.4rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  box-shadow: none;
}

.mp-price--simple {
  --price-press: #4c5fb8;
  --price-press-glow: rgba(54, 66, 140, 0.35);
  position: relative;
  transform: translateY(0);
  box-shadow: 0 0.45rem 0 var(--price-press), 0 0.7rem 1.2rem var(--price-press-glow) !important;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.mp-price--simple:active,
.mp-price--simple.is-pressed {
  transform: translateY(0.45rem);
  box-shadow: 0 0 0 var(--price-press), inset 0 0.3rem 0.6rem rgba(0, 0, 0, 0.4), inset 0 -0.1rem 0.2rem rgba(255, 255, 255, 0.15) !important;
  transition: transform 60ms ease, box-shadow 60ms ease;
}

.mp-plan-card--theme-green600 .mp-price--simple {
  --price-press: #6f8c2e;
  --price-press-glow: rgba(80, 100, 30, 0.35);
}

.mp-section__head--weekly {
  overflow: visible;
  margin: 0 0 2.4rem;
}

.mp-section__head .mp-section__title {
  --heading-height: 5rem;
  --heading-center-width: 32rem;
  --heading-color: #68969E;
  --heading-accent: #ffffff;
  --heading-inset-shadow: none;
  display: grid;
  overflow: hidden;
  grid-template-columns: minmax(0, 1fr) var(--heading-center-width) minmax(0, 1fr);
  grid-template-rows: var(--heading-height);
  grid-auto-flow: column;
  align-items: stretch;
  gap: 0.8rem;
  width: 100%;
  height: var(--heading-height);
  min-height: var(--heading-height);
  max-height: var(--heading-height);
  margin: 0;
  background: transparent;
  color: var(--heading-accent) !important;
  font-size: clamp(2.2rem, 5.5vw, 3.4rem);
  line-height: 1.65em;
  transform: none;
}

.mp-section__head .mp-section__title::before,
.mp-section__head .mp-section__title::after {
  content: "" !important;
  display: block !important;
  grid-row: 1;
  align-self: stretch;
  height: var(--heading-height);
  min-height: var(--heading-height);
  max-height: var(--heading-height);
  background: var(--heading-color);
  box-shadow: var(--heading-inset-shadow);
  clip-path: polygon(var(--heading-height) 0, 100% 0, calc(100% - var(--heading-height)) 100%, 0 100%);
}

.mp-section__head .mp-section__title::after {
  content: none !important;
  display: none !important;
}


@media (max-width: 640px) {
  .mp-section__head:has(.mp-section__title) {
    width: calc(100vw + 20rem);
    margin-left: calc(50% - 50vw - 11rem);
  }

  .mp-section__head .mp-section__title {
    --heading-height: 4.3rem;
    font-size: clamp(2.3rem, 7vw, 2.6rem);
    line-height: 1.65em;
  }

  .mp-section__head .mp-section__title::before,
  .mp-section__head .mp-section__title::after {
    min-width: 3.25rem;
  }
}

/* Use the same full-bleed band treatment for every section title. */
.mp-section__head .mp-section__title {
  overflow: visible;
  column-gap: 0.4rem;
}

.mp-section__head .mp-section__title::before {
  width: calc(12rem + 100vw);
  min-width: calc(12rem + 100vw);
  justify-self: end;
  clip-path: polygon(var(--heading-height) 0, 100% 0, calc(100% - var(--heading-height)) 100%, 0 100%);
  transform: translateX(calc(var(--heading-height) - 1.4rem));
}

body {
  padding-bottom: 0;
}

.mp-footer {
  padding-bottom: calc(8.8rem + env(safe-area-inset-bottom));
}

.mp-bottom-nav {
  position: fixed !important;
  right: 0;
  bottom: calc(1.2rem + env(safe-area-inset-bottom));
  left: 0;
  z-index: 30;
  display: flex;
  justify-content: center;
  padding: 0 1.2rem;
  background: transparent !important;
  pointer-events: none;
}

.mp-tabbar {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: center;
  width: min(36.6rem, calc(100vw - 2.4rem));
  min-height: 6.8rem;
  padding: 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.54);
  border-radius: 99rem;
  background: rgba(255, 255, 255, 0.34);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.34),
    inset 0.2rem 0.3rem 0 -0.2rem rgba(255, 255, 255, 0.95),
    inset -0.2rem -0.2rem 0 -0.2rem rgba(255, 255, 255, 0.82),
    inset -0.3rem -0.8rem 0.1rem -0.6rem rgba(255, 255, 255, 0.58),
    inset -0.1rem 0.2rem 0.4rem -0.1rem rgba(36, 51, 66, 0.20),
    0 0.8rem 2.4rem rgba(36, 51, 66, 0.18);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  pointer-events: auto;
}

.mp-tabbar__item {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  height: 5.4rem;
  padding: 0.45rem 0.2rem 0.5rem;
  border-radius: 99rem;
  color: rgba(36, 51, 66, 0.78);
  font-size: 0.85rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.1;
  text-align: center;
  transition: color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.mp-tabbar__item.-active,
.mp-tabbar__item:focus-visible {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.42);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.42),
    inset 0.2rem 0.1rem 0 -0.1rem rgba(255, 255, 255, 0.95),
    inset -0.15rem -0.1rem 0 -0.1rem rgba(255, 255, 255, 0.75),
    inset -0.2rem -0.55rem 0.1rem -0.45rem rgba(255, 255, 255, 0.55),
    0 0.25rem 0.8rem rgba(36, 51, 66, 0.12);
  outline: none;
}

.mp-tabbar__icon {
  width: 2rem;
  height: 2rem;
  margin-bottom: 0.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mp-fixed {
  display: none;
}

/* Liquid glass switcher navigation. This section intentionally follows the referenced switcher source. */
.mp-bottom-nav .mp-tabbar {
  --c-glass: #bbbbbc;
  --c-light: #fff;
  --c-dark: #000;
  --c-content: #224;
  --c-action: #7288E0;
  --glass-reflex-dark: 1;
  --glass-reflex-light: 1;
  --saturation: 150%;
  --switcher-gap: 0.5rem;
  --switcher-x: calc((100% - 2.4rem - (var(--switcher-gap) * 5)) / 6);
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--switcher-gap);
  width: min(36.6rem, calc(100vw - 2.4rem));
  max-width: calc(100vw - 2.4rem);
  height: 7rem;
  box-sizing: border-box;
  padding: 0.8rem 1.2rem 1rem;
  margin: 0 auto;
  border: none;
  border-radius: 99em;
  font-size: 1rem;
  background-color: color-mix(in srgb, var(--c-glass) 12%, transparent);
  background-image: none !important;
  backdrop-filter: blur(8px) url(#mp-liquid-switcher) saturate(var(--saturation));
  -webkit-backdrop-filter: blur(8px) url(#switcher) saturate(var(--saturation));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent),
    inset 1.8px 3px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent),
    inset -2px -2px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent),
    inset -3px -8px 1px -6px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent),
    inset -0.3px -1px 4px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 12%), transparent),
    inset -1.5px 2.5px 0px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
    inset 0px 3px 4px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
    inset 2px -6.5px 1px -4px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
    0px 1px 5px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
    0px 6px 16px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent) !important;
  transition:
    background-color 400ms cubic-bezier(1, 0.0, 0.4, 1),
    box-shadow 400ms cubic-bezier(1, 0.0, 0.4, 1);
}

.mp-bottom-nav .switcher__legend,
.mp-bottom-nav .switcher__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  white-space: nowrap;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(100%);
  clip-path: inset(100%);
  overflow: hidden;
}

.mp-bottom-nav .switcher__filter {
  position: absolute;
  width: 0;
  height: 0;
  z-index: -1;
}

.mp-bottom-nav .mp-tabbar .switcher__option {
  --c: var(--c-content);
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.2rem;
  width: var(--switcher-x);
  height: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 0;
  border-radius: 99em;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--c);
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1;
  opacity: 1;
  cursor: pointer;
  transition: all 160ms;
}

.mp-bottom-nav .mp-tabbar .switcher__option:hover {
  --c: var(--c-action);
}

.mp-bottom-nav .mp-tabbar .switcher__option:hover .mp-tabbar__icon {
  scale: 1.16;
}

.mp-bottom-nav .mp-tabbar .switcher__option:has(input:checked) {
  --c: var(--c-content);
  cursor: auto;
}

.mp-bottom-nav .mp-tabbar .switcher__option:has(input:checked) .mp-tabbar__icon {
  scale: 1;
}

.mp-bottom-nav .mp-tabbar__icon {
  display: block;
  width: 2.05rem;
  height: 2.05rem;
  margin: 0;
  color: var(--c);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: scale 200ms cubic-bezier(0.5, 0, 0, 1);
}

.mp-bottom-nav .mp-tabbar::after {
  content: "";
  position: absolute;
  left: 0.4rem;
  top: 0.4rem;
  display: block;
  width: calc(var(--switcher-x) + 1.6rem);
  height: calc(100% - 1rem);
  border-radius: 99em;
  background-color: color-mix(in srgb, var(--c-glass) 36%, transparent);
  z-index: 0;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent),
    inset 2px 1px 0px -1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent),
    inset -1.5px -1px 0px -1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent),
    inset -2px -6px 1px -5px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent),
    inset -1px 2px 3px -1px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
    inset 0px -4px 1px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
    0px 3px 6px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent);
}

.mp-bottom-nav .mp-tabbar:has(input[c-option="1"]:checked)::after {
  translate: 0 0;
  transform-origin: right;
  transition: background-color 400ms cubic-bezier(1, 0.0, 0.4, 1), box-shadow 400ms cubic-bezier(1, 0.0, 0.4, 1), translate 400ms cubic-bezier(1, 0.0, 0.4, 1);
  animation: scaleToggle 440ms ease;
}

.mp-bottom-nav .mp-tabbar:has(input[c-option="2"]:checked)::after {
  translate: calc((var(--switcher-x) + var(--switcher-gap)) * 1) 0;
  transition: background-color 400ms cubic-bezier(1, 0.0, 0.4, 1), box-shadow 400ms cubic-bezier(1, 0.0, 0.4, 1), translate 400ms cubic-bezier(1, 0.0, 0.4, 1);
  animation: scaleToggle2 440ms ease;
}

.mp-bottom-nav .mp-tabbar:has(input[c-option="3"]:checked)::after {
  translate: calc((var(--switcher-x) + var(--switcher-gap)) * 2) 0;
  transition: background-color 400ms cubic-bezier(1, 0.0, 0.4, 1), box-shadow 400ms cubic-bezier(1, 0.0, 0.4, 1), translate 400ms cubic-bezier(1, 0.0, 0.4, 1);
  animation: scaleToggle3 440ms ease;
}

.mp-bottom-nav .mp-tabbar:has(input[c-option="4"]:checked)::after {
  translate: calc((var(--switcher-x) + var(--switcher-gap)) * 3) 0;
  transition: background-color 400ms cubic-bezier(1, 0.0, 0.4, 1), box-shadow 400ms cubic-bezier(1, 0.0, 0.4, 1), translate 400ms cubic-bezier(1, 0.0, 0.4, 1);
  animation: scaleToggle2 440ms ease;
}

.mp-bottom-nav .mp-tabbar:has(input[c-option="5"]:checked)::after {
  translate: calc((var(--switcher-x) + var(--switcher-gap)) * 4) 0;
  transition: background-color 400ms cubic-bezier(1, 0.0, 0.4, 1), box-shadow 400ms cubic-bezier(1, 0.0, 0.4, 1), translate 400ms cubic-bezier(1, 0.0, 0.4, 1);
  animation: scaleToggle2 440ms ease;
}

.mp-bottom-nav .mp-tabbar:has(input[c-option="6"]:checked)::after {
  translate: calc((var(--switcher-x) + var(--switcher-gap)) * 5) 0;
  transform-origin: left;
  transition: background-color 400ms cubic-bezier(1, 0.0, 0.4, 1), box-shadow 400ms cubic-bezier(1, 0.0, 0.4, 1), translate 400ms cubic-bezier(1, 0.0, 0.4, 1);
  animation: scaleToggle3 440ms ease;
}

@keyframes scaleToggle {
  0% { scale: 1 1; }
  50% { scale: 1.1 1; }
  100% { scale: 1 1; }
}

@keyframes scaleToggle2 {
  0% { scale: 1 1; }
  50% { scale: 1.2 1; }
  100% { scale: 1 1; }
}

@keyframes scaleToggle3 {
  0% { scale: 1 1; }
  50% { scale: 1.1 1; }
  100% { scale: 1 1; }
}

/* Liquid glass pill footer nav, adapted from dist/nav-home.html. */
.segmented.nav-bar {
  --nav-step: calc((min(480px, calc(100vw - 16px)) - 12px) / 5);
  --c-glass: #1a1a1a;
  font-size: 17px;
  position: fixed;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  translate: -50%;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 6px;
  width: min(480px, calc(100vw - 16px));
  height: 56px;
  padding: 6px;
  border: none;
  border-radius: 99em;
  background-color: color-mix(in srgb, var(--c-glass, #bbbbbc) 30%, transparent);
  backdrop-filter: blur(8px) saturate(150%);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent),
    inset 1px 2px 0px -1px color-mix(in srgb, #fff 70%, transparent),
    inset -1px -1px 0px -1px color-mix(in srgb, #fff 55%, transparent),
    0px 4px 12px 0px color-mix(in srgb, #000 12%, transparent);
  transition: background-color 160ms ease-out;
}

.nav-bar[data-active="1"] { --c-glass: #1a1a1a; }
.nav-bar[data-active="2"] { --c-glass: var(--violet); }
.nav-bar[data-active="3"] { --c-glass: #3b82f6; }
.nav-bar[data-active="4"] { --c-glass: #ef4444; }
.nav-bar[data-active="5"] { --c-glass: #34a853; }

.segmented__option {
  position: relative;
  z-index: 1;
  flex: 1;
  height: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2em;
  border-radius: 99em;
  text-decoration: none;
  white-space: nowrap;
}

.nav-bar .segmented__option {
  color: #fff;
}

.segmented__option:nth-child(1):hover { color: #1a1a1a; }
.segmented__option:nth-child(2):hover { color: var(--violet); }
.segmented__option:nth-child(3):hover { color: #3b82f6; }
.segmented__option:nth-child(4):hover { color: #ef4444; }
.segmented__option:nth-child(5):hover { color: #34a853; }

.segmented__option.active {
  cursor: default;
}

.segmented__option.active:hover {
  color: #fff;
}

.segmented__icon {
  display: block;
  width: 1.55em;
  height: 1.55em;
  transition: scale 120ms ease-out;
}

.segmented__cart {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.9em;
  height: 1.55em;
}

.segmented__cart .segmented__icon {
  width: 1.5em;
  height: 1.5em;
}

.segmented__option:nth-child(3) .segmented__icon {
  transform: scale(0.9);
}

.segmented__cart-count {
  position: absolute;
  top: -0.35em;
  right: -0.28em;
  z-index: 1;
  display: grid;
  place-items: center;
  min-width: 1.4em;
  height: 1.4em;
  padding: 0 0.25em;
  border: 0;
  border-radius: 999px;
  background: #ff3b30;
  color: #fff;
  font-size: 0.75em;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
}

.segmented__option:hover .segmented__icon {
  scale: 1.15;
}

.segmented__option.active .segmented__icon {
  scale: 1;
}

.segmented__label {
  font-size: 0.75em;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  transform: translateY(-3px);
}

.segmented__option:nth-child(2) .segmented__label,
.segmented__option:nth-child(3) .segmented__label,
.segmented__option:nth-child(4) .segmented__label {
  letter-spacing: 0;
  transform: translateY(-3px) scaleX(0.9);
}

.segmented::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 6px;
  width: var(--nav-step);
  height: calc(100% - 12px);
  border-radius: 99em;
  background-color: color-mix(in srgb, var(--c-glass, #bbbbbc) 50%, transparent);
  z-index: 0;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent),
    inset 2px 1px 0px -1px color-mix(in srgb, #fff 90%, transparent),
    inset -1.5px -1px 0px -1px color-mix(in srgb, #fff 80%, transparent),
    inset -1px 1px 2px -1px color-mix(in srgb, #000 14%, transparent),
    0px 2px 5px 0px color-mix(in srgb, #000 6%, transparent);
  transition:
    translate 160ms ease-out,
    background-color 160ms ease-out,
    box-shadow 160ms ease-out;
}

@keyframes nav-stretch {
  0%, 100% { scale: 1 1; }
  48% { scale: 1.32 1; }
}

.nav-bar[data-active="1"]::after { translate: 0 0; animation: nav-stretch 180ms ease-out; }
.nav-bar[data-active="2"]::after { translate: var(--nav-step) 0; animation: nav-stretch 180ms ease-out; }
.nav-bar[data-active="3"]::after { translate: calc(var(--nav-step) * 2) 0; animation: nav-stretch 180ms ease-out; }
.nav-bar[data-active="4"]::after { translate: calc(var(--nav-step) * 3) 0; animation: nav-stretch 180ms ease-out; }
.nav-bar[data-active="5"]::after { translate: calc(var(--nav-step) * 4) 0; animation: nav-stretch 180ms ease-out; }

.nav-bar[data-no-anim]::after {
  animation: none !important;
}

.nav-bar[c-previous="1"][data-active="2"]::after,
.nav-bar[c-previous="1"][data-active="3"]::after,
.nav-bar[c-previous="1"][data-active="4"]::after,
.nav-bar[c-previous="1"][data-active="5"]::after,
.nav-bar[c-previous="2"][data-active="3"]::after,
.nav-bar[c-previous="2"][data-active="4"]::after,
.nav-bar[c-previous="2"][data-active="5"]::after,
.nav-bar[c-previous="3"][data-active="4"]::after,
.nav-bar[c-previous="3"][data-active="5"]::after,
.nav-bar[c-previous="4"][data-active="5"]::after {
  transform-origin: left;
}

.nav-bar[c-previous="2"][data-active="1"]::after,
.nav-bar[c-previous="3"][data-active="1"]::after,
.nav-bar[c-previous="3"][data-active="2"]::after,
.nav-bar[c-previous="4"][data-active="1"]::after,
.nav-bar[c-previous="4"][data-active="2"]::after,
.nav-bar[c-previous="4"][data-active="3"]::after,
.nav-bar[c-previous="5"][data-active="1"]::after,
.nav-bar[c-previous="5"][data-active="2"]::after,
.nav-bar[c-previous="5"][data-active="3"]::after,
.nav-bar[c-previous="5"][data-active="4"]::after {
  transform-origin: right;
}