/* ==========================================
   parts.css - Component Index
   - Imports all component modules
   - Maintains loading order
   - Layer order: reset, tokens, base, layout, components, contents, page, utilities
========================================== */

/* Import component modules (components layer only) */
@layer components {
/* ==========================================
  Button Component
========================================== */
.button {
  --button-padding: var(--space-25);
  --button-max-width: 500px;
  --button-font-size: var(--font-size-22);
  --button-background-color: var(--color-monex-primary);
  --button-color: var(--color-black);
  --button-margin-top: 70px;
  --button-radius: var(--radius-8);

  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--button-color);
  background-color: var(--button-background-color);
  text-align: center;
  font-size: var(--button-font-size);
  font-weight: 700;
  padding: var(--button-padding);
  border-radius: var(--button-radius);
  width: var(--button-max-width);
  gap: var(--space-10);
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
  margin-top: var(--button-margin-top);
}
@media (max-width: 767px) {
  .button {
    --button-font-size: var(--font-size-18);
    --button-max-width: calc(100% - 40px);
    --button-margin-top: 50px;
  }
}
.button::after {
  --button-display: block;

  display: var(--button-display);
  width: 25px;
  height: 25px;
  content: "";
  background-image: url(/image/lp/mua-common/icon_arrow.svg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.button[href^="#"]::after {
  transform: rotate(90deg);
}
.button.-small {
  --button-padding: var(--space-16);
  --button-max-width: 230px;
  --button-font-size: var(--font-size-16);
  --button-margin-top: 30px;
}
@media (max-width: 767px) {
  .button.-small {
    --button-max-width: 100%;
  }
}
@media (max-width: 767px) {
  .button.-large {
    --button-padding: var(--space-25) var(--space-15);
  }
}
.button.-header {
  --button-padding: var(--space-20);
  --button-max-width: 248px;
  --button-font-size: var(--font-size-18);
  --button-margin-top: 0;
}
@media (max-width: 767px) {
  .button.-header {
    --button-padding: var(--space-07);
    --button-font-size: var(--font-size-12);
    --button-max-width: 90px;
    --button-radius: var(--radius-4);
  }
  .button.-header::after {
    --button-display: none;
  }
}
@media (any-hover: hover) {
  .button:hover {
    --button-background-color: var(--color-black);
    --button-color: var(--color-monex-primary);
  }
}

/* ==========================================
   arrow-container Component
========================================== */
.arrow-container {
  display: flex;
  gap: var(--space-16);
  align-items: center;
  justify-content: center;
}

.arrow-container .arrow-button {
  --arrow-button-size: 48px;
  --arrow-button-color: var(--color-monex-primary);

  width: var(--arrow-button-size);
  height: var(--arrow-button-size);
  border-radius: var(--radius-8);
  background-color: var(--arrow-button-color);
  color: var(--color-black);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    opacity 0.3s ease,
    background-color 0.3s ease;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
}

.arrow-button > svg {
  width: 15px;
}

.arrow-button.prev > svg {
  transform: rotate(-180deg);
}

@media (any-hover: hover) {
  .arrow-button:hover {
    background-color: var(--color-black);
    color: var(--color-monex-primary);
  }
  .arrow-button:hover > svg {
    fill: var(--color-monex-primary);
  }
}

/* ==========================================
   full-link Component
========================================== */
.full-link {
  --full-link-padding: var(--space-35);
  --full-link-font-size: var(--font-size-36);

  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-black);
  background-color: var(--color-monex-primary);
  text-align: center;
  font-size: var(--full-link-font-size);
  font-weight: 700;
  padding: var(--full-link-padding);
  width: 100%;
  gap: 10px;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}
.full-link:focus-visible {
  outline-offset: -4px;
}
@media (max-width: 767px) {
  .full-link {
    --full-link-padding: var(--space-25);
    --full-link-font-size: var(--font-size-20);
  }
}
.full-link::after {
  --full-link-size: 36px;

  display: flex;
  width: var(--full-link-size);
  height: var(--full-link-size);
  justify-content: center;
  align-items: center;
  content: "";
  background-image: url(/image/lp/mua-common/icon_arrow.svg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
@media (max-width: 767px) {
  .full-link::after {
    --full-link-size: 25px;
  }
}
@media (any-hover: hover) {
  .full-link:hover {
    background-color: var(--color-black);
    color: var(--color-monex-primary);
  }
}

/* ==========================================
   Heading Component
========================================== */
.heading-plain {
  font-size: var(--font-size-contents-list);
  font-weight: 700;
  line-height: var(--line-height-contents-list);
}
* > * + .heading-plain {
  margin-top: var(--space-16);
}
@media (max-width: 767px) {
  * > * + .heading-plain {
    margin-top: var(--space-20);
  }
}

.heading-small {
  --heading-small-font-size: var(--font-size-16);
  font-size: var(--heading-small-font-size);
  font-weight: inherit;
}
* > * + .heading-small {
  margin-top: var(--space-07);
}
@media (max-width: 767px) {
  .heading-small {
    --heading-small-font-size: var(--font-size-14);
  }
}

.heading-01 {
  font-weight: 700;
  font-family: var(--font-family-heading);
  font-size: min(var(--font-size-92), 7.83vw);
  line-height: 1.196;
  color: var(--color-category-primary);
}
@media (max-width: 767px) {
  .heading-01 {
    line-height: 1.2;
    font-size: var(--font-size-48);
  }
}

.heading-01 > .thin {
  letter-spacing: -11.96px;
}
@media (max-width: 767px) {
  .heading-01 > .thin {
    letter-spacing: -6px;
  }
}
.heading-01 > .small {
  font-size: min(var(--font-size-50), 4.26vw);
  display: block;
  line-height: normal;
  padding-top: 0;
}
@media (max-width: 767px) {
  .heading-01 > .small {
    font-size: var(--font-size-30);
  }
  .heading-01 > .small .emphasis {
    line-height: 1.1;
  }
}

.heading-02 {
  text-align: center;
  font-weight: 700;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
}
.heading-02:has(+ :not(.lead)) {
  margin-bottom: var(--space-80);
}
.heading-02:has(+ .lead) {
  margin-bottom: var(--space-50);
}
@media (max-width: 767px) {
  .heading-02:has(+ :not(.lead)) {
    margin-bottom: var(--space-60);
  }
}
.heading-02::after {
  content: "";
  background-image: var(--icon-heading-divider);
  display: block;
  width: 85px;
  height: 5px;
  margin-top: var(--space-30);
  margin-inline: auto;
}
.heading-02 .sub {
  --heading-02-sub-color: var(--color-category-secondary);
  --heading-02-sub-background-image: var(--icon-speech-tail);

  color: var(--heading-02-sub-color);
  display: block;
  font-family: var(--font-family-latin);
  font-size: var(--font-size-h2-sub);
  line-height: var(--line-height-h2-sub);
  width: fit-content;
  margin-inline: auto;
  position: relative;
  background-image: var(--heading-02-sub-background-image);
  background-size: 8px 16px;
  background-repeat: no-repeat;
  background-position: calc(50% - 2.7px) bottom;
  padding-bottom: var(--space-20);
  margin-bottom: var(--space-10);
}
.heading-02 .sub::before,
.heading-02 .sub::after {
  position: absolute;
  bottom: calc(16px - 2px);
  content: "";
  display: block;
  width: calc(50% - 6px);
  height: 2px;
  background-color: var(--heading-02-sub-color);
  border-radius: var(--radius-round);
}
.heading-02 .sub::before {
  left: 0;
}
.heading-02 .sub::after {
  right: 0;
}
.section-emphasis .heading-02 .sub {
  --heading-02-sub-color: var(--color-white);
  --heading-02-sub-background-image: url(/image/lp/mua-common/icon_speech-tail_white.svg);
}

.heading-03 {
  display: flex;
  align-items: center;
  font-size: var(--font-size-h3);
  padding: var(--space-22) var(--space-27);
  border-radius: var(--radius-8);
  border-left: var(--radius-8) solid var(--color-category-secondary);
  background-color: var(--color-category-primary);
  color: var(--color-white);
  line-height: var(--line-height-h3);
}
@media (max-width: 767px) {
  .heading-03 {
    flex-wrap: wrap;
  }
}
.heading-03 .prefix {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-family-latin);
  font-size: var(--font-size-20);
  vertical-align: 0.2em;
}
@media (min-width: 768px) {
  .heading-03 .prefix::after {
    content: "";
    background-color: var(--color-subtler);
    width: 25px;
    height: 1px;
    margin-inline: var(--space-15);
  }
}
.heading-03 .prefix > .number {
  font-size: var(--font-size-22);
  margin-left: var(--space-07);
  line-height: 0.8;
}
@media (max-width: 767px) {
  .heading-03 {
    padding: var(--space-18) var(--space-15) var(--space-18) var(--space-12);
  }
  .heading-03 .prefix {
    display: flex;
    width: 100%;
    margin-bottom: var(--space-05);
    font-size: var(--font-size-16);
  }
  .heading-03 .prefix > .number {
    font-size: var(--font-size-18);
    margin-top: -1px;
  }
}

.heading-04 {
  color: var(--color-white);
  text-align: center;
  font-size: var(--font-size-h4);
  font-weight: 700;
  line-height: var(--line-height-h4);
  background-color: var(--color-category-secondary);
  border-radius: var(--radius-8) var(--radius-8) 0 0;
  padding: var(--space-10);
}
@media (max-width: 767px) {
  .heading-04 {
    padding: var(--space-15) var(--space-20);
  }
}

/* ==========================================
   Voice Slider
========================================== */
.voice-slider-viewport {
  overflow: hidden;
  width: 100%;
  position: relative;
}

/* -------------------------------------------------- */

.voice-card {
  --voice-card-width: min(64.38vw, 1030px);

  width: var(--voice-card-width);
}

@media (max-width: 767px) {
  .voice-card {
    --voice-card-width: 88vw;
  }
}

/* -------------------------------------------------- */

.voice-slider-controls {
  --voice-slider-controls-width: min(64.38vw, 1030px);
  margin-top: var(--space-20);
  width: var(--voice-slider-controls-width);
  margin-inline: auto;
  position: relative;
}

@media (max-width: 767px) {
  .voice-slider-controls {
    --voice-slider-controls-width: 88vw;
  }
}

.arrow-container {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-20);
}

/* -------------------------------------------------- */

.voice-slider-dots {
  position: absolute;
  display: flex;
  gap: 10px;
  align-items: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* -------------------------------------------------- */

.voice-slider-dot {
  padding: 0;
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--color-category-primary);
  background-color: var(--color-white);
}

.voice-slider-dot.is-active {
  background-color: var(--color-category-primary);
}

/* ==========================================
   Voice Component
   Customer testimonial cards
========================================== */
.voice-card {
  --voice-card-border: 8px solid var(--color-category-primary);
  --voice-card-border-left: var(--voice-card-border);
  --voice-card-padding: var(--space-45) var(--space-70);
  --voice-card-gap: var(--space-50);

  display: flex;
  align-items: center;
  gap: var(--voice-card-gap);
  background-color: var(--color-category-secondary);
  border-left: var(--voice-card-border-left);
  border-radius: var(--radius-8);
  padding: var(--voice-card-padding);
}

@media (max-width: 767px) {
  .voice-card {
    --voice-card-border-left: 0;
    --voice-card-padding: var(--space-30) var(--space-25);
    --voice-card-gap: var(--space-20);

    border-bottom: var(--voice-card-border);
    flex-direction: column;
  }
}

.voice-avatar {
  --voice-avatar-size: 140px;

  background-color: var(--color-category-background);
  border-radius: var(--radius-round);
  flex-shrink: 0;
  width: var(--voice-avatar-size);
  height: var(--voice-avatar-size);
  overflow: hidden;
  position: relative;
}

.voice-avatar img {
  height: 100%;
  left: 0;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  width: 100%;
}

.voice-content {
  color: var(--color-white);
}

.voice-text {
  --voice-text-font-size: var(--font-size-16);
  --voice-text-line-height: 1.875;
  --voice-text-margin-bottom: var(--space-18);

  font-size: var(--voice-text-font-size);
  font-weight: 500;
  line-height: var(--voice-text-line-height);
  margin-bottom: var(--voice-text-margin-bottom);
}

@media (max-width: 767px) {
  .voice-text {
    --voice-text-font-size: var(--font-size-12);
    --voice-text-line-height: 1.714;
    --voice-text-margin-bottom: var(--space-15);
  }
}

.voice-attribution {
  --voice-attribution-font-size: var(--font-size-14);
  --voice-attribution-line-height: 1.857;
  font-size: var(--voice-attribution-font-size);
  font-weight: 700;
  line-height: var(--voice-attribution-line-height);

  @media (max-width: 767px) {
    --voice-attribution-font-size: var(--font-size-12);
    --voice-attribution-line-height: 1.667;
  }
}

/* ==========================================
   loop-slider-area Component
========================================== */
.loop-slider-area {
  overflow: hidden;
  position: relative;
  display: flex;
  width: 100%;
  z-index: var(--z-index-negative);
  margin-bottom: 20px;
}

.loop-slider-area > .slider {
  --animation-speed: 300s;

  display: flex;
  position: relative;
}

.loop-slider-area > .slider:nth-child(1) {
  animation: slide-loop var(--animation-speed) -150s linear infinite;
}
.loop-slider-area > .slider:nth-child(2) {
  animation: slide-loop2 var(--animation-speed) linear infinite;
}

@keyframes slide-loop {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

@keyframes slide-loop2 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-200%);
  }
}
.loop-slider-area > .slider > .item {
  --aspect-ratio: 548 / 322;
  --width: 548px;
  --height: 322px;
  --margin-inline: 10px;
  --border-radius: 8px;

  aspect-ratio: var(--aspect-ratio);
  width: var(--width);
  height: var(--height);
  overflow: hidden;
  flex-shrink: 0;
  margin-inline: var(--margin-inline);
  border-radius: var(--border-radius);
}

@media (min-width: 2821px) {
  .loop-slider-area > .slider > .item {
    --width: 19.43vw;
    --height: 11.42vw;
    --margin-inline: 0.35vw;
  }
}

@media (max-width: 767px) {
  .loop-slider-area > .slider > .item {
    --width: 207px;
    --height: 121.63px;
    --margin-inline: 3.75px;
    --border-radius: 4px;
  }
}

.loop-slider-area > .slider > .item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================
   Text Component
========================================== */
*:has(> .emphasis) {
  --emphasis-size: min(8px, 0.66vw);
  padding-top: min(20px, 1.82vw);
}
@media (max-width: 767px) {
  *:has(> .emphasis) {
    --emphasis-size: 5px;
  }
}
.emphasis {
  position: relative;
}
.emphasis::after {
  content: "";
  position: absolute;
  top: max(-3px, -0.25vw);
  left: 50%;
  transform: translateX(-50%);
  width: var(--emphasis-size);
  height: var(--emphasis-size);
  background-color: var(--color-monex-primary);
  border-radius: 50%;
}
.lead-section .title .emphasis::after {
  top: max(-6px, -0.5vw);
}

.lead {
  text-align: center;
  font-size: var(--font-size-lg);
  line-height: var(--line-height-lg);
}
@media (max-width: 767px) {
  .lead {
    text-align: left;
  }
}

.note {
  font-size: var(--font-size-caution);
  line-height: 2;
}
.lead + .note {
  font-size: var(--font-size-14);
  line-height: 2.714;
  text-align: center;
}
@media (max-width: 767px) {
  .lead + .note {
    text-align: left;
    line-height: 2.286;
  }
}

/* ==========================================
   List Component
========================================== */
.bullet-list {
  list-style-type: disc;
  padding-left: 1.5em;
}
.bullet-list li::marker {
  font-size: 0.75em;
}

.check-list {
  --icon-size: 35px;

  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  font-size: var(--font-size-contents-recommend);
  font-weight: 700;
  line-height: var(--line-height-contents-recommend);
}
.check-list li {
  position: relative;

  display: flex;
  column-gap: var(--space-15);
}
.check-list li::before {
  --icon-size: 35px;

  content: "";
  display: inline-block;
  width: var(--icon-size);
  height: var(--icon-size);
  background-image: var(--icon-check);
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .check-list {
    gap: var(--space-16);
  }
}

@media (min-width: 768px) {
  .divider-list {
    display: flex;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
  }
  .divider-list li:nth-child(n + 2)::before {
    content: "|";
    padding-right: 1em;
    margin-left: 1em;
  }
}
@media (max-width: 767px) {
  .divider-list {
    list-style-type: disc;
    padding-left: 1.5em;
  }
  .divider-list li::marker {
    font-size: 0.75em;
  }
}

.underline-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-10) var(--space-30);
}
.underline-list li {
  border-bottom: 1px solid var(--color-subtler);
  padding-bottom: var(--space-14);
  line-height: 1.75;
  align-content: flex-end;
}
@media (max-width: 767px) {
  .underline-list {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .underline-list li {
    padding-bottom: var(--space-08);
    font-size: var(--font-size-14);
    line-height: 2;
  }
  .underline-list li:not(:first-child) {
    padding-top: var(--space-09);
  }
}

.underline-description-list {
  display: grid;
  flex-direction: column;
  row-gap: var(--space-16);
}
.underline-description-list > div {
  display: grid;
  grid-template-columns: clamp(100px, 16%, 160px) 1fr;
  gap: var(--space-05) var(--space-30);
}
.underline-description-list dt,
.underline-description-list dd {
  border-bottom: 1px solid var(--color-subtler);
  padding-bottom: var(--space-16);
}
.underline-description-list dt {
  font-weight: 700;
}
@media (max-width: 767px) {
  .underline-description-list > div {
    grid-template-columns: 1fr;
  }
  .underline-description-list dt {
    padding-bottom: 0;
    border-bottom: none;
  }
}

/* ==========================================
   Card Component
========================================== */
.card-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-30);
}
.card-list :where(img + *) {
  margin-top: var(--space-20);
}
.card-list :where(p) {
  margin-top: var(--space-15);
}
@media (max-width: 767px) {
  .card-list {
    grid-template-columns: 1fr;
  }
}
.lead + .card-list {
  margin-top: var(--space-80);
}
@media (max-width: 767px) {
  .lead + .card-list {
    margin-top: var(--space-60);
  }
}

.responsive-stack {
  display: grid;
  gap: var(--space-30);
}
:where(.responsive-stack:has(> :last-child:nth-child(2))) {
  grid-template-columns: repeat(2, 1fr);
}
:where(.responsive-stack:has(> :last-child:nth-child(3))) {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 767px) {
  .responsive-stack {
    grid-template-columns: 1fr;
  }
}

/* ==========================================
   faq-accordion Component
========================================== */
.faq-accordion-wrapper {
  display: flex;
  flex-direction: column;
  row-gap: var(--space-05);
}
.faq-accordion-wrapper details {
  border-radius: var(--radius-5);
  background-color: var(--color-category-background);
}
.faq-accordion-wrapper details summary {
  --q-icon-sizes: 40px;
  --accordion-icon-sizes: 25px;
  --accordion-icon-stroke: 3px;
  --summary-icon-gap: var(--space-30);
  --accordion-icon-color: var(--color-category-primary);

  display: flex;
  align-items: center;
  font-size: var(--font-size-contents-qa);
  font-weight: 500;
  line-height: var(--line-height-contents-qa);
  position: relative;
  padding: var(--space-14) var(--space-30);
  transition: all 0.3s ease;
}
@media (hover: hover) {
  .faq-accordion-wrapper details summary:hover {
    opacity: 0.8;
    cursor: pointer;
  }
}
.faq-accordion-wrapper details summary::before {
  flex-shrink: 0;
  margin-right: var(--space-10);
  content: "Q";
  display: inline-flex;
  width: var(--q-icon-sizes);
  height: var(--q-icon-sizes);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: var(--radius-round);
  color: var(--color-white);
  background-color: var(--color-category-secondary);
  font-family: var(--font-family-latin);
  font-size: var(--font-size-20);
  font-weight: 600;
}
.faq-accordion-wrapper details summary::after {
  position: absolute;
  top: 50%;
  right: var(--space-30);
  transform: translateY(-50%);
  content: "";
  display: inline-block;
  width: var(--accordion-icon-sizes);
  height: var(--accordion-icon-sizes);
  background:
    linear-gradient(var(--accordion-icon-color) 0 0) 50% 0 / var(--accordion-icon-stroke) 100%
    no-repeat,
    linear-gradient(var(--accordion-icon-color) 0 0) 0 50% / 100% var(--accordion-icon-stroke)
    no-repeat;
}
.faq-accordion-wrapper details[open] summary::after {
  background:
    linear-gradient(var(--accordion-icon-color) 0 0) 0 50% / 100% var(--accordion-icon-stroke)
    no-repeat;
}
.faq-accordion-wrapper details > div {
  padding-bottom: var(--space-30);
  padding-inline: var(--space-30);
}
.faq-accordion-wrapper details > div::before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--color-subtler);
  margin-bottom: var(--space-20);
}
@media (max-width: 767px) {
  .faq-accordion-wrapper details summary {
    --q-icon-sizes: 35px;
    --accordion-icon-sizes: 20px;
    --accordion-icon-stroke: 2px;
    --summary-icon-gap: var(--space-15);
    padding: var(--space-15) var(--space-50) var(--space-15) var(--space-15);
  }
  .faq-accordion-wrapper details summary::after {
    right: var(--space-15);
  }
  .faq-accordion-wrapper details summary::before {
    font-size: var(--font-size-16);
  }
  .faq-accordion-wrapper details > div {
    padding-bottom: var(--space-15);
    padding-inline: var(--space-15);
  }
  .faq-accordion-wrapper details > div::before {
    margin-bottom: var(--space-15);
  }
  .faq-accordion-wrapper details > div p {
    font-size: var(--font-size-14);
    line-height: 1.714;
  }
}

.faq-accordion-wrapper details[open] > div {
  animation: fade-in 0.5s ease;
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* ==========================================
   video-embed Component
========================================== */
.video-embed {
  --video-embed-margin: 15px;

  margin-top: var(--video-embed-margin);
  text-align: center;
  position: relative;
  width: calc(min(calc(100% - var(--video-embed-margin) * 2), 1140px));
  padding-top: min(644px, 56.49%);
  margin-inline: auto;
}
@media (max-width: 767px) {
  .video-embed {
    --video-embed-margin: 5px;
  }
}
.video-embed::before {
  content: "";
  display: block;
  width: calc(100% + var(--video-embed-margin) * 2);
  height: calc(100% + var(--video-embed-margin) * 2);
  border-radius: var(--radius-8);
  background-color: var(--color-category-secondary);
  padding: var(--video-embed-margin);
  position: absolute;
  top: calc(var(--video-embed-margin) * -1);
  left: calc(var(--video-embed-margin) * -1);
}
.video-embed iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* ==========================================
   info-box Component
========================================== */
.info-box {
  --info-box-padding: var(--space-30) var(--space-50);
  --info-box-gap: var(--space-10);
  --info-box-width: fit-content;
  --info-box-text-align: center;
  --info-box-align-items: center;

  background-color: var(--color-white);
  border: 1px solid var(--color-subtler);
  border-radius: var(--radius-8);
  padding: var(--info-box-padding);
  text-align: var(--info-box-text-align);
  display: flex;
  flex-direction: column;
  gap: var(--info-box-gap);
  align-items: var(--align-items);
  justify-content: center;
  width: var(--info-box-width);
  margin-inline: auto;
}

@media (max-width: 767px) {
  .info-box {
    --info-box-padding: var(--space-20);
    --info-box-gap: var(--space-08);
    --info-box-width: 100%;
    --info-box-text-align: left;
    --info-box-align-items: baseline;
  }
}

/* ==========================================
   section Component
========================================== */
main > section {
  --section-bg-color: var(--color-white);
  --section-padding: var(--margin-gap-xl);

  position: relative;
  overflow: hidden;
  padding-block: var(--section-padding);
  background-color: var(--section-bg-color);
}
main > section::before {
  --section-bg-size: 855px;
  --section-bg-display: block;

  display: var(--section-bg-display);
  content: "";
  width: var(--section-bg-size);
  height: var(--section-bg-size);
  position: absolute;
  top: calc(var(--section-bg-size) / -2);
  left: min(100%, 50% + 800px);
  transform: translateX(-50%);
  background-image: url(/image/lp/mua-common/bg_dots.png);
  background-repeat: no-repeat;
  background-position: top right;
  background-size: contain;
}
@media (max-width: 767px) {
  main > section::before {
    --section-bg-display: none;
  }
}
section:has(> .heading-03) {
  display: flex;
  flex-direction: column;
  gap: var(--space-30);
  margin-top: var(--space-80);
}
@media (max-width: 767px) {
  section:has(> .heading-03) {
    margin-top: var(--space-60);
  }
}
main > section > * {
  position: relative;
  z-index: 1;
}
main > section > *:not(.voice-slider-viewport) {
  max-width: min(calc(100% - (var(--space-20) * 2)), calc(1210px - (var(--space-20) * 2)));
  margin-inline: auto;
}
.section-background {
  --section-bg-color: var(--color-category-background);
}
.section-emphasis {
  --section-bg-color: var(--color-category-secondary);
  --section-padding: var(--space-120) 165px;

  border-bottom: 6px solid var(--color-category-primary);
}
@media (max-width: 767px) {
  .section-emphasis {
    --section-padding: var(--margin-gap-xl);
  }
}
.section-emphasis::after {
  --section-bg-size: 855px;
  --section-bg-display: block;

  display: var(--section-bg-display);
  content: "";
  width: var(--section-bg-size);
  height: var(--section-bg-size);
  position: absolute;
  bottom: calc(var(--section-bg-size) / -2);
  left: calc(var(--section-bg-size) / -2);
  background-image: url(/image/lp/mua-common/bg_dots.png);
  background-repeat: no-repeat;
  background-position: top right;
  background-size: contain;
}
.section-emphasis :focus-visible {
  outline-color: var(--color-white);
}
@media (max-width: 767px) {
  .section-emphasis::after {
    --section-bg-display: none;
  }
}
.section-emphasis > *:not(.button) {
  color: var(--color-white);
}
.section-emphasis a:not([class]) {
  color: var(--color-white);
}

/* ==========================================
   profile-card Component
========================================== */
.profile-card {
  --profile-card-display: grid;

  display: var(--profile-card-display);
  grid-template-rows: subgrid;
  grid-row: span 3;
  text-align: left;
  padding: 0;
  width: 100%;
  border-radius: var(--radius-8);
  position: relative;
}
@media (max-width: 767px) {
  .profile-card {
    --profile-card-display: block;
  }
}
.profile-card:nth-child(n + 4) {
  margin-top: var(--space-30);
}
@media (max-width: 767px) {
  .profile-card:nth-child(n + 4) {
    margin-top: 0;
  }
}
.profile-card > .profile-info {
  --profile-info-padding: var(--space-30);

  padding: var(--profile-info-padding);
}
@media (max-width: 767px) {
  .profile-card > .profile-info {
    --profile-info-padding: var(--space-20);
  }
}

.profile-card-button {
  --profile-card-button-background-color: var(--color-monex-primary);
  --profile-card-button-color: var(--color-black);

  background-color: var(--profile-card-button-background-color);
  color: var(--profile-card-button-color);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  text-align: center;
  text-decoration: none;
  border: none;
  border-bottom-left-radius: var(--radius-8);
  border-bottom-right-radius: var(--radius-8);
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

.profile-card-button-text {
  font-family: var(--font-family-latin);
  font-weight: bold;
}

.profile-card-link {
  inset: 0;
  cursor: pointer;
  font-size: 1px;
  text-indent: -9999px;
  position: absolute;
  border-radius: var(--radius-8);
  z-index: 3;
}

.profile-card-button .profile-card-button-icon svg path {
  transition: fill 0.3s ease;
}

@media (any-hover: hover) {
  .profile-card-link:hover ~ .profile-card-button {
    --profile-card-button-background-color: var(--color-black);
    --profile-card-button-color: var(--color-monex-primary);
  }
  .profile-card-link:hover ~ .profile-image > .photo {
    transform: translateX(-50%) scale(1.07);
  }
  .profile-card-link:hover ~ .profile-card-button .profile-card-button-icon svg path {
    fill: var(--color-monex-primary);
  }
}

/* ==========================================
   profile-modal Component
========================================== */
[data-profile-slider] {
  width: 100%;
}
.profile-modal-slider-wrapper {
  --profile-modal-content-width: min(calc(100vw - 48px * 2 - 20px * 4));
  --profile-modal-content-height: calc(100svh - 117px - 91px);
  --profile-modal-content-margin: 21px;
  height: var(--profile-modal-content-height);
  max-height: 692px;
  border-radius: var(--radius-8);
  max-width: 1060px;
  width: var(--profile-modal-content-width);
  margin-inline: auto;
  margin-top: var(--profile-modal-content-margin);
}
@media (max-width: 767px) {
  .profile-modal-slider-wrapper {
    --profile-modal-content-width: min(calc(100vw - 20px * 2));
    --profile-modal-content-height: calc(100svh - 66px - 93px);
    --profile-modal-content-margin: -20px;
  }
}
.profile-modal {
  border: none;
  background: none;
  color: inherit;
  inset: unset;
  max-width: unset;
  max-height: unset;
  overflow: unset;
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: var(--space-20);
}
.profile-modal:not([open]) {
  display: none;
}
.profile-modal[open] {
  animation: dialog-fade-in 0.3s ease-out forwards;
}
body:has(.profile-modal[open]) {
  overflow: hidden;
}
.profile-modal::backdrop {
  background-color: rgba(0, 0, 0, 0.9);
}
.profile-modal-slider-wrapper .arrow-container {
  width: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.profile-modal .arrow-button.prev {
  position: absolute;
  left: calc((var(--arrow-button-size) + var(--space-20)) * -1);
}
.profile-modal .arrow-button.next {
  position: absolute;
  right: calc((var(--arrow-button-size) + var(--space-20)) * -1);
}
@media (max-width: 767px) {
  .profile-modal-slider-wrapper .arrow-container {
    position: relative;
    top: unset;
    transform: unset;
    margin-top: var(--space-10);
  }
  .profile-modal .arrow-button.prev {
    position: relative;
    left: 0;
  }
  .profile-modal .arrow-button.next {
    position: relative;
    right: 0;
  }
}
.profile-modal-content {
  --profile-modal-content-padding: var(--space-70);
  --profile-modal-content-height: calc(100svh - 117px - 91px);
  --profile-modal-content-column-gap: var(--space-60);
  --profile-modal-content-row-gap: var(--space-30);
  --profile-modal-content-columns: 370fr 470fr;

  background-color: var(--color-white);
  overflow-y: auto;
  height: var(--profile-modal-content-height);
  max-height: 692px;
  border-radius: var(--radius-8);
  max-width: 1060px;
  width: 100%;
  padding: var(--profile-modal-content-padding);
  display: grid;
  grid-template-columns: var(--profile-modal-content-columns);
  column-gap: var(--profile-modal-content-column-gap);
  row-gap: var(--profile-modal-content-row-gap);
  flex-shrink: 0;
  align-items: start;
}
@media (max-width: 767px) {
  .profile-modal-content {
    --profile-modal-content-padding: var(--space-15);
    --profile-modal-content-top: calc(50% - 14px);
    --profile-modal-content-height: calc(100svh - 66px - 93px);
    --profile-modal-content-gap: var(--space-15);
    --profile-modal-content-columns: 1fr;

    flex-direction: column;
    grid-template-rows: auto 1fr;
  }
}

.profile-modal-left {
  --profile-modal-left-column: 1fr;
  --profile-modal-left-rows: auto 1fr;
  --profile-modal-left-gap: var(--space-30);

  display: grid;
  grid-template-columns: var(--profile-modal-left-column);
  gap: var(--profile-modal-left-gap);
  grid-template-rows: var(--profile-modal-left-rows);
}

@media (max-width: 767px) {
  .profile-modal-left {
    --profile-modal-left-column: 137fr 157fr;
    --profile-modal-left-rows: 1fr;
    --profile-modal-left-gap: var(--space-20);

    align-items: flex-start;
    width: 100%;
  }
  .profile-modal-left > .profile-info > .name {
    font-size: var(--font-size-14);
    margin-bottom: var(--space-05);
  }
  .profile-modal-left > .profile-info > p {
    font-size: var(--font-size-10);
    line-height: 1.6;
  }
}
.profile-modal-description {
  --profile-modal-description-line-height: 2;

  font-size: var(--font-size-sm);
  line-height: var(--profile-modal-description-line-height);
}
@media (max-width: 767px) {
  .profile-modal-description {
    --profile-modal-description-line-height: 1.714;
  }
}
.profile-modal-close {
  --profile-modal-close-display: flex;
  --profile-modal-background-color: var(--color-white);
  --profile-modal-color: var(--color-black);

  display: var(--profile-modal-close-display);
  align-items: center;
  justify-content: center;
  gap: var(--space-10);
  padding: var(--space-15);
  border: 1px solid var(--color-black);
  border-radius: var(--radius-8);
  font-weight: 500;
  font-family: var(--font-family-latin);
  cursor: pointer;
  width: 160px;
  transition: all 0.3s ease;
  position: relative;
  margin-inline: auto;
  margin-top: auto;
  grid-column: 2 span;
  background-color: var(--profile-modal-background-color);
  color: var(--profile-modal-color);
}
@media (max-width: 767px) {
  .profile-modal-close {
    --profile-modal-close-display: none;
  }
}
.profile-modal-close > span {
  padding-right: 22px;
  line-height: 1;
}
.profile-modal-close::before,
.profile-modal-close::after {
  --profile-modal-close-background-color: var(--color-black);
  content: "";
  position: absolute;
  top: 50%;
  right: 41px;
  width: 15px;
  height: 1px;
  background-color: var(--profile-modal-close-background-color);
  transition: all 0.3s ease;
}
.profile-modal-close::before {
  transform: translateY(-50%) rotate(45deg);
}
.profile-modal-close::after {
  transform: translateY(-50%) rotate(-45deg);
}
@media (any-hover: hover) {
  .profile-modal-close:hover {
    --profile-modal-background-color: var(--color-black);
    --profile-modal-color: var(--color-white);
  }
  .profile-modal-close:hover::before,
  .profile-modal-close:hover::after {
    --profile-modal-close-background-color: var(--color-white);
  }
}

.dialog-close-button {
  --dialog-close-button-font-size: var(--font-size-16);
  --dialog-close-button-top: max(
    calc(50% - 692px / 2 - var(--dialog-close-button-height) / 2 - 21px),
    calc(50% - calc(100svh - 117px * 2) / 2 - var(--dialog-close-button-height) / 2 - 21px)
  );
  --dialog-close-button-left: min(
    calc(50% + 1060px / 2 - 32px),
    calc(50% + calc(100% - 176px) / 2 - 32px)
  );
  --dialog-close-button-padding-top: 34px;
  --dialog-close-button-height: 52.5px;
  --dialog-close-button-font-weight: 600;

  font-size: var(--dialog-close-button-font-size);
  display: block;
  position: absolute;
  top: var(--dialog-close-button-top);
  left: var(--dialog-close-button-left);
  transform: translate(-50%, -50%);
  color: var(--color-white);
  transition: opacity 0.3s ease;
  text-align: center;
  font-family: var(--font-family-latin);
  font-weight: var(--dialog-close-button-font-weight);
  letter-spacing: 0.16px;
  height: var(--dialog-close-button-height);
  padding-top: var(--dialog-close-button-padding-top);
}

@media (max-width: 767px) {
  .dialog-close-button {
    --dialog-close-button-font-size: var(--font-size-12);
    --dialog-close-button-top: max(
      calc(50% - 692px / 2 - var(--dialog-close-button-height)),
      calc(50% - calc(100svh - 66px - 93px) / 2 - var(--dialog-close-button-height) / 2 - 20px)
    );
    --dialog-close-button-left: calc(100% - 54.15px / 2 - 13px);
    --dialog-close-button-padding-top: 26px;
    --dialog-close-button-height: 44px;
    --dialog-close-button-font-weight: 700;
  }
}

@media (any-hover: hover) {
  .dialog-close-button:hover {
    opacity: 0.8;
  }
}

.dialog-close-button::before,
.dialog-close-button::after {
  --height: 55px;

  content: "";
  position: absolute;
  top: 12px;
  left: 50%;
  width: var(--height);
  height: 3px;
  background-color: var(--color-white);
  border-radius: calc(var(--height) / 2);
}
@media (max-width: 767px) {
  .dialog-close-button::before,
  .dialog-close-button::after {
    --height: 40px;
  }
}

.dialog-close-button::before {
  transform: translateX(-50%) rotate(24.5deg);
}

.dialog-close-button::after {
  transform: translateX(-50%) rotate(-24.5deg);
}

@keyframes dialog-fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
@keyframes backdrop-dialog-fade-in {
  0% {
    background-color: rgb(0 0 0 / 0%);
  }

  100% {
    background-color: rgb(0 0 0 / 70%);
  }
}

/* ==========================================
   profile-info Component
========================================== */
.profile-info {
  background-color: var(--color-white);
}
.profile-info > .name {
  font-size: var(--font-size-20);
  font-weight: bold;
  margin-bottom: var(--space-10);
  line-height: 1.1;
}
.profile-info > p {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}
.profile-info > .in-charge {
  font-weight: 700;
  margin-bottom: var(--space-05);
}

/* ==========================================
   profile-image Component
========================================== */
.profile-image {
  position: relative;
  width: 100%;
  aspect-ratio: 370 / 234;
  overflow: hidden;
  border-radius: var(--radius-8);
  background:
    linear-gradient(
      180deg,
      var(--color-category-gradation-b) 0%,
      var(--color-category-gradation-a) 100%
    ), linear-gradient(180deg, var(--color-white) 0%, var(--color-white-variant) 100%);
}
.profile-card > .profile-image {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.profile-image::before {
  --profile-image-block: 14.1%;
  --profile-image-inline: -31.4%;
  --profile-image-size: 121.6%;

  content: "";
  position: absolute;
  width: var(--profile-image-size);
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: var(--color-category-primary);
  z-index: 1;
  opacity: 0.07;
}

.profile-card:nth-child(4n + 1) .profile-image::before,
.u-bg-tl::before {
  top: var(--profile-image-block);
  left: var(--profile-image-inline);
}
.profile-card:nth-child(4n + 2) .profile-image::before,
.u-bg-bl::before {
  bottom: var(--profile-image-block);
  left: var(--profile-image-inline);
}
.profile-card:nth-child(4n + 3) .profile-image::before,
.u-bg-tr::before {
  top: var(--profile-image-block);
  right: var(--profile-image-inline);
}
.profile-card:nth-child(4n + 4) .profile-image::before,
.u-bg-br::before {
  bottom: var(--profile-image-block);
  right: var(--profile-image-inline);
}
.profile-image > .photo {
  --photo-width: 71.4%;
  --photo-height: 100%;

  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--photo-width);
  height: var(--photo-height);
  z-index: 2;
  transition: transform 0.5s ease;
}
.profile-image > .photo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* ==========================================
   profile-card-lists Component
========================================== */
.profile-card-lists {
  --profile-card-lists-gap: var(--space-30);

  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: var(--profile-card-lists-gap);
}
@media (max-width: 767px) {
  .profile-card-lists {
    grid-template-columns: 1fr;
    row-gap: var(--profile-card-lists-gap);
  }
}

/* ==========================================
   data-slider Component
========================================== */
[data-slider] {
  overflow: hidden;
  width: 100%;
  position: relative;
}
[data-slider-list] {
  display: flex;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  position: relative;
}

[data-slider-list-item] {
  transform: translateZ(0);
}

/* ==========================================
   hero-section Component
========================================== */
.hero-section {
  background-color: var(--color-category-background);
  overflow: hidden;
  position: relative;
  padding-inline: min(var(--space-20), 1.65vw);
}
@media (max-width: 767px) {
  .hero-section {
    padding-inline: 20px;
  }
}
.hero-section > .container {
  max-width: 1170px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 620fr 470fr;
  column-gap: min(81px, 6.69vw);
  grid-template-areas: "heading images" "points images";
  grid-template-rows: 1fr auto;
  align-items: center;
  padding-block: min(46px, 3.8vw) min(80px, 6.61vw);
}
@media (max-width: 767px) {
  .hero-section > .container {
    grid-template-areas: "heading" "images" "points";
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    padding-block: 25px 40px;
  }
}
.hero-section:has(.campaign-ribbon) > .container {
  padding-bottom: min(52px, 4.3vw);
}
@media (max-width: 767px) {
  .hero-section:has(.campaign-ribbon) > .container {
    padding-bottom: 30px;
  }
}
.hero-section::before {
  --section-bg-size: min(855px, 70.66vw);
  --section-bg-display: block;
  display: var(--section-bg-display);
  content: "";
  width: var(--section-bg-size);
  height: var(--section-bg-size);
  position: absolute;
  bottom: calc(var(--section-bg-size) / -2);
  left: min(100%, 50% + min(800px, 66.11vw));
  transform: translateX(-50%);
  background-image: url(/image/lp/mua-common/bg_dots.png);
  background-repeat: no-repeat;
  background-position: top right;
  background-size: contain;
  z-index: 0;
}
@media (max-width: 767px) {
  .hero-section::before {
    --section-bg-display: none;
  }
}
.hero-section .hero-title {
  grid-area: heading;
  margin-top: min(60px, 4.96vw);
  display: grid;
  row-gap: min(var(--space-25), 2.07vw);
}
@media (max-width: 767px) {
  .hero-section .hero-title {
    row-gap: 2px;
    margin-top: 0;
  }
}
.hero-section .hero-title > .lead {
  font-size: min(var(--font-size-22), 1.82vw);
  font-weight: 700;
  text-align: left;
}
@media (max-width: 767px) {
  .hero-section .hero-title > .lead {
    font-size: var(--font-size-15);
  }
}
.hero-section .point-lists {
  margin-top: min(var(--space-65), 5.37vw);
}
@media (max-width: 767px) {
  .hero-section .point-lists {
    margin-top: 25px;
  }
}
.hero-images {
  grid-area: images;
  position: relative;
}
.hero-images > picture {
  display: block;
  position: relative;
  z-index: 2;
}
.hero-images::before {
  --hero-images-transform: rotate(3deg);
  --hero-images-bottom: min(29px, 2.4vw);
  --hero-images-right: max(-29px, -2.4vw);
  --hero-images-width: min(475.611px, 39.3vw);
  --hero-images-height: min(489.304px, 40.4vw);
  --hero-images-border-radius: var(--radius-8);

  content: "";
  position: absolute;
  bottom: var(--hero-images-bottom);
  right: var(--hero-images-right);
  width: var(--hero-images-width);
  height: var(--hero-images-height);
  transform: var(--hero-images-transform);
  background-color: var(--color-category-primary);
  border-radius: var(--hero-images-border-radius);
  z-index: 1;
}
@media (max-width: 767px) {
  .hero-images::before {
    --hero-images-transform: rotate(0);
    --hero-images-bottom: -2.13vw;
    --hero-images-right: -2.13vw;
    --hero-images-width: 100%;
    --hero-images-height: calc(100% - min(5.48vw, 42px));
    --hero-images-border-radius: var(--radius-4);
  }
}
.hero-images > .large {
  --hero-images-column: span 2;

  grid-column: var(--hero-images-column);
}
@media (max-width: 767px) {
  .hero-images > .large {
    --hero-images-column: unset;

    grid-row: span 2;
    margin-top: -3.3vw;
  }
}
.hero-images img {
  width: 100%;
  height: auto;
}

/* ==========================================
   lead-section Component
========================================== */
.lead-section {
  --lead-section-padding: var(--space-20);

  padding-inline: var(--lead-section-padding);
}
@media (max-width: 767px) {
  .lead-section {
    --lead-section-padding: 0;
  }
}
.lead-section::before {
  display: none;
}
.lead-section .container {
  --lead-section-container-columns: min(50.58vw, 612px) 1fr;

  grid-template-columns: var(--lead-section-container-columns);
  column-gap: min(7.44vw, 90px);
  display: grid;
  grid-template-areas: "title text" "image text";
  grid-template-rows: auto 1fr;
}
@media (max-width: 767px) {
  .lead-section .container {
    grid-template-columns: 1fr;
    row-gap: 30px;
    grid-template-rows: unset;
    grid-template-areas: "title" "text" "image";
  }
}
.lead-section .title {
  grid-area: title;
  color: var(--color-category-primary);
  font-family: var(--font-family-heading);
  font-size: min(var(--font-size-34), 2.76vw);
  font-weight: 700;
  line-height: 1.676;
  margin-top: max(-26px, -2.11vw);
}
@media (max-width: 767px) {
  .lead-section .title {
    font-size: var(--font-size-25);
    padding-top: 0;
    line-height: 1.6;
  }
}
.lead-section img {
  --lead-section-img-margin-top: min(3.31vw, 40px);
  --lead-section-img-margin-inline: min(7.02vw, 85px) auto;
  --lead-section-img-width: min(345px, 28.05vw);

  grid-area: image;
  width: var(--lead-section-img-width);
  margin-inline: var(--lead-section-img-margin-inline);
  margin-top: var(--lead-section-img-margin-top);
}
@media (max-width: 767px) {
  .lead-section img {
    --lead-section-img-margin-top: 0;
    --lead-section-img-margin-inline: auto;
    --lead-section-img-width: 224px;
  }
}
.lead-section .text {
  grid-area: text;
}
.lead-section p {
  font-size: var(--font-size-18);
  line-height: 2;
}
@media (max-width: 767px) {
  .lead-section p {
    font-size: var(--font-size-16);
  }
}
.lead-section p + p {
  margin-top: var(--space-30);
}
@media (max-width: 767px) {
  .lead-section p + p {
    margin-top: var(--space-20);
  }
}

/* ==========================================
   merit-section Component
========================================== */
.merit-section > .container {
  display: grid;
  grid-template-areas: "image lead" "image text" "image button";
  grid-template-columns: min(610px, 49.59vw) 1fr;
  column-gap: min(50px, 4.07vw);
  grid-template-rows: auto auto 1fr;
  margin-top: var(--space-80);
}
@media (max-width: 767px) {
  .merit-section > .container {
    grid-template-areas: "image" "lead" "text" "button";
    grid-template-columns: 1fr;
    margin-top: var(--space-60);
  }
}
.merit-section > .container > .lead {
  grid-area: lead;
  font-size: var(--font-size-28);
  text-align: left;
  font-weight: 700;
  line-height: 1.5;
  margin-top: 0;
}
@media (max-width: 767px) {
  .merit-section > .container > .lead {
    margin-top: 17px;
    font-size: var(--font-size-24);
  }
}
.merit-section > .container > p {
  grid-area: text;
  margin-top: var(--space-15);
}
.merit-section > .container > picture {
  grid-area: image;
}
.merit-section > .container > picture img {
  width: 100%;
}
.merit-section > .container > .button {
  grid-area: button;
  align-self: baseline;
}

.merit-section > .card-list {
  margin-top: var(--space-80);
}
@media (max-width: 767px) {
  .merit-section > .card-list {
    margin-top: var(--space-60);
  }
}

/* ==========================================
  voice-section Component
========================================== */
.voice-section .voice-slider-viewport {
  margin-top: var(--space-80);
}
@media (max-width: 767px) {
  .voice-section .voice-slider-viewport {
    margin-top: var(--space-60);
  }
}

/* ==========================================
   figure-group Component
========================================== */
.figure-group {
  display: grid;
  gap: var(--space-30);
  grid-template-columns: repeat(2, 1fr);
  margin-top: var(--space-50);
}
@media (max-width: 767px) {
  .figure-group {
    grid-template-columns: 1fr;
    margin-top: var(--space-30);
  }
}
.figure-group figure > img {
  margin-inline: auto;
}
.figure-group figcaption {
  margin-top: var(--space-10);
  font-size: var(--font-size-14);
  line-height: 1.857;
}
@media (max-width: 767px) {
  .figure-group figcaption {
    margin-top: 0;
  }
}

/* ==========================================
   recommendation-area Component
========================================== */
.recommendation-area {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 767px) {
  .recommendation-area {
    grid-template-columns: 1fr;
    row-gap: var(--space-30);
  }
}
.recommendation-area > img {
  justify-self: center;
}
@media (max-width: 767px) {
  .recommendation-area > img {
    width: 65.33vw;
  }
}

/* ==========================================
   image-2col-area Component
========================================== */
.image-2col-area {
  --image-2col-area-columns: 1fr auto;
  display: grid;
  grid-template-columns: var(--image-2col-area-columns);
  gap: var(--space-50);
}
.image-2col-area.-thin {
  gap: var(--space-30);
}
.image-2col-area.-first-image {
  --image-2col-area-columns: auto 1fr;
}
@media (max-width: 900px) {
  .image-2col-area,
  .image-2col-area.-first-image {
    grid-template-columns: 1fr;
    row-gap: var(--space-30);
  }
}
.image-2col-area.-first-image > .image {
  --image-2col-area-order: -1;
  order: var(--image-2col-area-order);
}
@media (max-width: 900px) {
  .image-2col-area.-first-image > .image {
    --image-2col-area-order: unset;
  }
}
.image-2col-area > .image:has(img:nth-child(2)) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-20);
}
@media (max-width: 900px) {
  .image-2col-area > .image:has(img:nth-child(2)) {
    justify-self: center;
  }
  .image-2col-area > img {
    width: 36vw;
    margin-inline: auto;
  }
}
.image-2col-area > .image > img {
  margin-inline: auto;
}

/* ==========================================
   flow-lists Component
========================================== */
.flow-lists {
  --flow-lists-columns: repeat(auto-fit, minmax(100px, 1fr));
  --flow-lists-margin-top: calc(50px / 2);

  display: grid;
  grid-template-columns: var(--flow-lists-columns);
  column-gap: var(--space-30);
  grid-template-rows: auto auto auto;
  margin-top: var(--flow-lists-margin-top);
}
@media (max-width: 900px) {
  .flow-lists:has(li:nth-child(n + 3)) {
    --flow-lists-columns: 1fr;
    --flow-lists-margin-top: 0;
  }
}
@media (max-width: 767px) {
  .flow-lists {
    --flow-lists-columns: 1fr;
    --flow-lists-margin-top: 0;
  }
}
.flow-lists > li:has(> div) {
  position: relative;
}
@media (min-width: 768px) {
  .flow-lists > li {
    --flow-lists-background-color: var(--color-category-background);
    --flow-lists-padding: var(--space-50) var(--space-40);
    --flow-lists-grid-template-areas: "image title" "image text";

    padding: var(--flow-lists-padding);
    border-radius: var(--radius-8);
    background-color: var(--flow-lists-background-color);
    font-size: var(--font-size-14);
    line-height: 1.857;
    position: relative;
    display: grid;
    grid-template-areas: var(--flow-lists-grid-template-areas);
    grid-template-rows: auto auto 1fr;
    column-gap: var(--space-30);
  }
}
@media (max-width: 767px) {
  .flow-lists > li:not(:has(> div)),
  .flow-lists > li > div {
    --flow-lists-background-color: var(--color-category-background);
    --flow-lists-padding: var(--space-30) var(--space-20);
    --flow-lists-grid-template-areas: "image" "title" "text";

    padding: var(--flow-lists-padding);
    border-radius: var(--radius-8);
    background-color: var(--flow-lists-background-color);
    font-size: var(--font-size-14);
    line-height: 1.857;
    position: relative;
    display: grid;
    grid-template-areas: var(--flow-lists-grid-template-areas);
    grid-template-rows: auto auto 1fr;
    column-gap: var(--space-30);
  }
}
@media (min-width: 768px) {
  .flow-lists:has(li:nth-child(n + 3)) > li {
    --flow-lists-padding: var(--space-50) var(--space-25) var(--space-30) var(--space-25);
    --flow-lists-grid-template-areas: "image" "title" "text";
    --flow-lists-row-gap: 0;
  }
  .section-background .flow-lists > li {
    --flow-lists-background-color: var(--color-white);

    background-color: var(--flow-lists-background-color);
  }
}
@media (max-width: 900px) {
  .flow-lists:has(li:nth-child(n + 3)) > li:not(:has(> div)),
  .flow-lists:has(li:nth-child(n + 3)) > li > div {
    --flow-lists-padding: var(--space-30) var(--space-20);
    --flow-lists-grid-template-areas: "image" "title" "text";
    --flow-lists-row-gap: 0;
  }
  .section-background .flow-lists > li:not(:has(> div)),
  .section-background .flow-lists > li > div {
    --flow-lists-background-color: var(--color-white);

    background-color: var(--flow-lists-background-color);
  }
}
@media (max-width: 767px) {
  .flow-lists > li:not(:last-child) {
    margin-bottom: var(--space-48);
  }
}
@media (max-width: 900px) {
  .flow-lists:has(li:nth-child(n + 3)) > li:not(:last-child) {
    margin-bottom: var(--space-48);
  }
}
.flow-lists > li:not(:last-child)::after {
  --flow-lists-arrow-right: calc((12px + 11px) / -1);
  --flow-lists-arrow-top: 50%;
  --flow-lists-arrow-transform: translateY(-50%);

  content: "";
  display: block;
  width: 12px;
  height: 20px;
  background-image: url(/image/lp/mua-common/icon_arrow_02.svg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: var(--flow-lists-arrow-top);
  transform: var(--flow-lists-arrow-transform);
  right: var(--flow-lists-arrow-right);
}
@media (max-width: 767px) {
  .flow-lists > li:not(:last-child)::after {
    --flow-lists-arrow-top: unset;
    --flow-lists-arrow-transform: translateX(50%) rotate(90deg);
    --flow-lists-arrow-right: 50%;

    bottom: -36px;
  }
}
@media (max-width: 900px) {
  .flow-lists:has(li:nth-child(n + 3)) > li:not(:last-child)::after {
    --flow-lists-arrow-top: unset;
    --flow-lists-arrow-transform: translateX(50%) rotate(90deg);
    --flow-lists-arrow-right: 50%;

    bottom: -36px;
  }
}
.flow-lists > li img {
  grid-area: image;
  margin-inline: auto;
  background-color: var(--color-white);
  border-radius: var(--radius-round);
}
.flow-lists > li .title {
  --flow-lists-title-font-size: var(--font-size-24);
  --flow-lists-title-text-align: left;
  --flow-lists-title-margin-block: 0 var(--space-15);

  grid-area: title;
  text-align: var(--flow-lists-title-text-align);
  font-size: var(--flow-lists-title-font-size);
  font-weight: 700;
  line-height: 1.444;
  margin-block: var(--flow-lists-title-margin-block);
}
@media (max-width: 767px) {
  .flow-lists > li .title {
    --flow-lists-title-margin-block: var(--space-20) var(--space-14);
    --flow-lists-title-font-size: var(--font-size-20);
    --flow-lists-title-text-align: left;
  }
}
@media (max-width: 900px) {
  .flow-lists:has(li:nth-child(n + 3)) > li .title {
    --flow-lists-title-margin-block: var(--space-20) var(--space-14);
    --flow-lists-title-font-size: var(--font-size-20);
    --flow-lists-title-text-align: left;
  }
}
.flow-lists:has(li:nth-child(n + 3)) > li .title {
  --flow-lists-title-margin-block: var(--space-15) var(--space-10);
  --flow-lists-title-font-size: var(--font-size-18);
  --flow-lists-title-text-align: center;
}
@media (max-width: 900px) {
  .flow-lists:has(li:nth-child(n + 3)) > li .title {
    --flow-lists-title-text-align: left;
  }
}
.flow-lists > li p {
  grid-area: text;
}
.flow-lists:has(li:nth-child(n + 3)) > li p:not(.note) {
  font-size: var(--font-size-14);
}
@media (max-width: 767px) {
  .flow-lists:has(li:nth-child(n + 3)) > li p:not(.note) {
    font-size: var(--font-size-16);
  }
}

.flow-lists > li span {
  --flow-list-number-size: 50px;
  --flow-list-number-height: var(--flow-list-number-size);
  --flow-list-number-width: var(--flow-list-number-size);
  --flow-list-number-radius: var(--radius-round);
  --flow-list-number-top: calc(var(--flow-list-number-size) / -2);
  --flow-list-number-left: 50%;
  --flow-list-number-transform: translateX(-50%);
  --flow-list-number-font-size: var(--font-size-26);

  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  text-align: center;
  font-family: var(--font-family-latin);
  font-size: var(--flow-list-number-font-size);
  font-weight: 700;
  line-height: 1;
  border-radius: var(--flow-list-number-radius);
  background-color: var(--color-category-secondary);
  width: var(--flow-list-number-width);
  height: var(--flow-list-number-height);
  position: absolute;
  top: var(--flow-list-number-top);
  left: var(--flow-list-number-left);
  transform: var(--flow-list-number-transform);
}
@media (max-width: 900px) {
  .flow-lists:has(li:nth-child(n + 3)) > li span {
    --flow-list-number-radius: none;
    --flow-list-number-size: 50px;
    --flow-list-number-top: 0;
    --flow-list-number-left: 0;
    --flow-list-number-transform: unset;
    --flow-list-number-font-size: var(--font-size-26);

    border-top-left-radius: var(--radius-8);
    border-bottom-right-radius: var(--radius-8);
  }
}
@media (max-width: 767px) {
  .flow-lists > li span {
    --flow-list-number-radius: none;
    --flow-list-number-size: 50px;
    --flow-list-number-top: 0;
    --flow-list-number-left: 0;
    --flow-list-number-transform: unset;
    --flow-list-number-font-size: var(--font-size-26);

    border-top-left-radius: var(--radius-8);
    border-bottom-right-radius: var(--radius-8);
  }
}

/* ==========================================
   point-lists Component
========================================== */
.point-lists {
  --flow-lists-columns: repeat(auto-fit, minmax(100px, 1fr));

  display: grid;
  grid-template-columns: var(--flow-lists-columns);
  column-gap: min(var(--space-10), 0.83vw);
}
@media (max-width: 767px) {
  .point-lists {
    --flow-lists-columns: 1fr;
    row-gap: var(--space-07);
  }
}
.point-lists > li {
  --point-lists-padding: min(var(--space-30), 2.48vw) min(var(--space-20), 1.65vw);
  --point-lists-text-align: center;
  --point-lists-border: 3px;
  --point-lists-font-size: min(var(--font-size-16), 1.32vw);
  --point-lists-min-height: min(170px, 14.05vw);

  padding: var(--point-lists-padding);
  border-radius: var(--radius-8);
  border: var(--point-lists-border) solid var(--color-category-primary);
  background-color: var(--color-white);
  font-size: var(--point-lists-font-size);
  text-align: var(--point-lists-text-align);
  font-weight: 700;
  line-height: 1.625;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--point-lists-min-height);
}
@media (max-width: 767px) {
  .point-lists > li {
    --point-lists-padding: 0 var(--space-20) 0 var(--space-47);
    --point-lists-text-align: left;
    --point-lists-border: 2px;
    --point-lists-font-size: var(--font-size-12);
    --point-lists-min-height: 62px;
  }
}
.point-lists > li > span {
  --flow-list-number-size: min(42px, 3.47vw);
  --flow-list-number-height: var(--flow-list-number-size);
  --flow-list-number-width: var(--flow-list-number-size);
  --flow-list-number-radius: var(--radius-round);
  --flow-list-number-top: calc(var(--flow-list-number-size) / -2);
  --flow-list-number-left: 50%;
  --flow-list-number-transform: translateX(-50%);
  --flow-list-number-font-size: min(var(--font-size-22), 1.82vw);

  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  text-align: center;
  font-family: var(--font-family-latin);
  font-size: var(--flow-list-number-font-size);
  font-weight: 700;
  line-height: 0.5;
  border-radius: var(--flow-list-number-radius);
  background-color: var(--color-category-secondary);
  width: var(--flow-list-number-width);
  height: var(--flow-list-number-height);
  position: absolute;
  top: var(--flow-list-number-top);
  left: var(--flow-list-number-left);
  transform: var(--flow-list-number-transform);
}
@media (max-width: 767px) {
  .point-lists > li > span {
    --flow-list-number-radius: none;
    --flow-list-number-height: 100%;
    --flow-list-number-width: 35px;
    --flow-list-number-top: 0;
    --flow-list-number-left: 0;
    --flow-list-number-transform: unset;
    --flow-list-number-font-size: var(--font-size-16);

    border-top-left-radius: var(--radius-5);
    border-bottom-left-radius: var(--radius-5);
  }
}

/* ==========================================
   table Component
========================================== */
.table {
  --table-border-color: #d2d2d2;
  --table-th-color: #f0f0f0;

  table-layout: fixed;
  word-break: break-word;
  border-top: 1px solid var(--table-border-color);
  border-left: 1px solid var(--table-border-color);
  width: 100%;
}
.table caption {
  text-align: left;
  margin-bottom: 5px;
}
.table thead :where(th, td) {
  padding: 4px 10px 2px;
  background-color: var(--table-th-color);
  border-bottom: 1px solid var(--table-border-color);
  border-right: 1px solid var(--table-border-color);
  line-height: 1.29;
  font-weight: normal;
  white-space: normal;
  word-wrap: break-word;
}
.table tbody :where(th) {
  padding: 4px 10px 2px;
  background-color: var(--table-th-color);
  border-bottom: 1px solid var(--table-border-color);
  border-right: 1px solid var(--table-border-color);
  line-height: 1.29;
  font-weight: normal;
  white-space: normal;
  word-wrap: break-word;
}
.table tbody :where(td) {
  padding: 5px 10px;
  background-color: var(--color-white);
  border-bottom: 1px solid var(--table-border-color);
  border-right: 1px solid var(--table-border-color);
  white-space: normal;
  word-wrap: break-word;
}

/* ==========================================
   Page Top Button Component
========================================== */
.page-top-button {
  --page-top-button-size: 48px;
  position: fixed;
  bottom: var(--space-20);
  right: var(--space-20);
  z-index: var(--z-page-top);
  width: var(--page-top-button-size);
  height: var(--page-top-button-size);
  padding: var(--space-08);
  background-color: var(--color-white);
  color: var(--color-black);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 2px solid var(--color-category-primary);
  border-radius: var(--radius-8);
  transition: all 0.3s ease;
  opacity: 0;
  visibility: hidden;
  font-size: 0;
}

.page-top-button.is-visible {
  opacity: 1;
  visibility: visible;
}

.page-top-button::before,
.page-top-button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(50% - 1.5px);
  width: 3px;
  height: 10px;
  background-color: var(--color-black);
  transform-origin: 50% 1.5px;
}

.page-top-button::before {
  transform: translateY(-50%) rotate(45deg);
}

.page-top-button::after {
  transform: translateY(-50%) rotate(-45deg);
}

@media (any-hover: hover) {
  .page-top-button:hover {
    background-color: var(--color-category-primary);
  }
  .page-top-button:hover::before,
  .page-top-button:hover::after {
    background-color: var(--color-white);
  }
}

/* ==========================================
   campaign-ribbon Component
========================================== */
.campaign-ribbon {
  --campaign-ribbon-padding: min(26px, 2.14vw);
  --campaign-ribbon-border-width: 4px;

  border-radius: var(--radius-8);
  border: var(--campaign-ribbon-border-width) solid var(--color-category-primary);
  background-color: var(--color-white);
  max-width: 1170px;
  margin-inline: auto;
  margin-bottom: min(70px, 5.79vw);
  position: relative;
  z-index: 1;
}
@media (max-width: 767px) {
  .campaign-ribbon {
    --campaign-ribbon-border-width: 3px;
  }
}
.campaign-area {
  --campaign-area-padding: min(16px, 1.32vw) min(14px, 1.16vw) min(18px, 1.49vw) min(23px, 1.9vw);
  --campaign-area-size: 14px;
  --campaign-area-left: calc((var(--campaign-area-size) + 4px) * -1);
  --campaign-area-top: max(-23px, -1.9vw);

  position: absolute;
  left: var(--campaign-area-left);
  top: var(--campaign-area-top);
  background-color: var(--color-monex-primary);
  padding: var(--campaign-area-padding);
  display: grid;
  grid-template-areas: "title title" "number percent" "number off";
  justify-content: left;
  align-items: center;
}
@media (max-width: 767px) {
  .campaign-area {
    --campaign-area-size: 7px;
    --campaign-area-padding: 8px 6px 11px 13px;
    --campaign-area-left: calc((var(--campaign-area-size) + 3px) * -1);
    --campaign-area-top: -13px;
  }
}
.campaign-area::before {
  content: "";
  position: absolute;
  bottom: -9px;
  left: 0;
  width: var(--campaign-area-size);
  height: 9px;
  background-color: #a6871b;
  clip-path: polygon(0 0, 100% 100%, 100% 0);
  z-index: -1;
}
@media (max-width: 767px) {
  .campaign-area::before {
    bottom: -5px;
    height: 5px;
  }
}
.campaign-area::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 100%;
  right: -19px;
  top: 0;
  background-color: var(--color-monex-primary);
  clip-path: polygon(0% 0%, 100% 0, 1px 50%, 100% 100%, 0% 100%);
}
@media (max-width: 767px) {
  .campaign-area::after {
    right: -11px;
    width: 12px;
  }
}
.campaign-area > .title {
  --campaign-area-title-font-size: min(var(--font-size-22), 1.82vw);
  --campaign-area-title-padding-bottom: min(9px, 0.75vw);
  --campaign-area-title-margin-bottom: min(12px, 0.99vw);
  --campaign-area-title-background-image: url(/image/lp/mua-common/line_dotts_pc.svg);

  grid-area: title;
  display: inline-block;
  font-family: var(--font-family-latin);
  font-size: var(--campaign-area-title-font-size);
  letter-spacing: 0.88px;
  background-image: var(--campaign-area-title-background-image);
  background-position: bottom right;
  background-repeat: no-repeat;
  background-size: contain;
  padding-bottom: var(--campaign-area-title-padding-bottom);
  font-weight: 700;
  margin-bottom: var(--campaign-area-title-margin-bottom);
}
@media (max-width: 767px) {
  .campaign-area > .title {
    --campaign-area-title-font-size: var(--font-size-12);
    --campaign-area-title-padding-bottom: 6px;
    --campaign-area-title-margin-bottom: 6px;
    --campaign-area-title-background-image: url(/image/lp/mua-common/line_dotts_sp.svg);
  }
}
.campaign-area > .number {
  --campaign-area-number-font-size: min(var(--font-size-72), 5.95vw);

  grid-area: number;
  font-size: var(--campaign-area-number-font-size);
  font-family: var(--font-family-robot);
  line-height: 0.7;
  font-weight: 700;
}
@media (max-width: 767px) {
  .campaign-area > .number {
    --campaign-area-number-font-size: var(--font-size-40);
  }
}
.campaign-area > .percent {
  --campaign-area-percent-font-size: min(var(--font-size-38), 3.14vw);

  grid-area: percent;
  font-size: var(--campaign-area-percent-font-size);
  font-family: var(--font-family-latin);
  line-height: 0.8;
  font-weight: 700;
}
@media (max-width: 767px) {
  .campaign-area > .percent {
    --campaign-area-percent-font-size: var(--font-size-22);
    --campaign-area-percent-margin-top: 0;
  }
}
.campaign-area > .off {
  --campaign-area-off-font-size: min(var(--font-size-20), 1.67vw);

  grid-area: off;
  font-size: var(--campaign-area-off-font-size);
  font-family: var(--font-family-latin);
  line-height: 0.8;
  font-weight: 700;
  align-self: flex-start;
}
@media (max-width: 767px) {
  .campaign-area > .off {
    --campaign-area-off-font-size: var(--font-size-11);
    align-self: stretch;
  }
}

.coupon-code {
  --coupon-code-color: var(--color-category-secondary);
  --coupon-code-width: min(220px, 18.18vw);

  text-align: center;
  border: 2px solid var(--coupon-code-color);
  align-self: anchor-center;
  margin-left: auto;
  width: var(--coupon-code-width);
}
@media (max-width: 767px) {
  .coupon-code {
    --coupon-code-width: 100%;

    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: var(--space-10);
  }
}
.coupon-code > .title {
  --coupon-code-title-font-size: min(var(--font-size-16), 1.32vw);
  --coupon-code-title-padding-block: min(7px, 0.58vw);

  font-size: var(--coupon-code-title-font-size);
  color: var(--color-white);
  background-color: var(--coupon-code-color);
  border: 2px solid var(--coupon-code-color);
  padding-block: var(--coupon-code-title-padding-block);
}
@media (max-width: 767px) {
  .coupon-code > .title {
    --coupon-code-title-font-size: var(--font-size-14);
    --coupon-code-title-padding-block: 7px;
  }
}
.coupon-code > .code {
  --coupon-code-code-font-size: min(var(--font-size-18), 1.57vw);
  --coupon-code-code-padding-block: min(3px, 0.25vw);

  font-size: var(--coupon-code-code-font-size);
  color: var(--coupon-code-color);
  font-weight: bold;
  padding-block: var(--coupon-code-code-padding-block);
}
@media (max-width: 767px) {
  .coupon-code > .code {
    --coupon-code-code-font-size: var(--font-size-16);
    --coupon-code-code-padding-block: 5px;
  }
}
.campaign-period {
  --campaign-period-font-size: min(var(--font-size-22), 1.82vw);
  --campaign-period-line-height: 1;
  --campaign-period-padding-block: min(15px, 1.25vw) min(13px, calc(1.25vw - 2px));

  background-color: var(--color-category-primary);
  color: var(--color-white);
  text-align: center;
  font-weight: bold;
  font-size: var(--campaign-period-font-size);
  line-height: var(--campaign-period-line-height);
  padding-block: var(--campaign-period-padding-block);
}
@media (max-width: 767px) {
  .campaign-period {
    --campaign-period-font-size: var(--font-size-12);
    --campaign-period-line-height: 1.7;
    --campaign-period-padding-block: 8px 4px;
  }
}
.price-area {
  --price-area-padding: min(15px, 1.25vw) min(var(--space-20), 1.65vw) min(13px, calc(1.25vw - 2px))
    min(205px, 16.94vw);

  text-align: center;
  display: flex;
  align-items: center;
  padding: var(--price-area-padding);
}
@media (max-width: 767px) {
  .price-area {
    --price-area-padding: 12px;

    flex-wrap: wrap;
    justify-content: center;
  }
}
.price-area > .arrow {
  width: min(45px, 3.72vw);
  margin-inline: min(var(--space-25), 2.07vw) min(var(--space-15), 1.24vw);
}
@media (max-width: 767px) {
  .price-area > .arrow {
    width: min(45px, 12vw);
    margin-inline: min(25px, 6.67vw);
    margin-top: 10px;
  }
}
@media (max-width: 767px) {
  .price-area > .normal {
    margin-left: min(95px, 25.33vw);
  }
}
@media (max-width: 369px) {
  .price-area > .normal {
    margin-left: 20px;
    width: 100%;
  }
}
.price-area > .normal > .title {
  --price-area-normal-title-font-size: min(var(--font-size-28), 2.31vw);

  font-size: var(--price-area-normal-title-font-size);
  font-weight: 700;
}
@media (max-width: 767px) {
  .price-area > .normal > .title {
    --price-area-normal-title-font-size: min(var(--font-size-19), 5.07vw);
  }
}
.price-area > .normal > .price {
  --price-area-normal-price-font-size: min(var(--font-size-24), 1.98vw);

  display: block;
  font-size: var(--price-area-normal-price-font-size);
  font-weight: 700;
  line-height: 1.2;
}
@media (max-width: 767px) {
  .price-area > .normal > .price {
    --price-area-normal-price-font-size: min(var(--font-size-16), 4.26vw);
  }
}
@media (max-width: 767px) {
  .price-area > .down {
    margin-top: 10px;
    width: 100%;
  }
}
.price-area > .down > .price {
  --price-area-down-price-font-size: min(var(--font-size-100), 8.26vw);

  color: var(--color-category-secondary);
  font-size: var(--price-area-down-price-font-size);
  font-weight: 700;
  line-height: 1;
  font-family: var(--font-family-robot);
}
@media (max-width: 767px) {
  .price-area > .down > .price {
    --price-area-down-price-font-size: var(--font-size-65);
  }
}
.price-area > .down > .en {
  --price-area-down-en-font-size: min(var(--font-size-30), 2.5vw);

  font-size: var(--price-area-down-en-font-size);
  font-weight: 700;
  line-height: 1;
}
@media (max-width: 767px) {
  .price-area > .down > .en {
    --price-area-down-en-font-size: var(--font-size-20);
  }
}

/* ==========================================
   campaign-price Component
========================================== */
.campaign-price em {
  font-style: normal;
}
.campaign-price > .normal {
  display: inline-block;
}
@media (max-width: 767px) {
  .campaign-price > .normal {
    font-size: var(--font-size-14);
  }
}
.campaign-price:has(.down) > .normal {
  text-decoration: line-through;
}
.campaign-price > .down {
  --cacampaign-price-down: var(--space-20);
  --cacampaign-price-display: inline-block;

  display: var(--cacampaign-price-display);
  margin-left: var(--cacampaign-price-down);
}
@media (max-width: 767px) {
  .campaign-price > .down {
    --cacampaign-price-down: 0;
    --cacampaign-price-display: block;
  }
}
.campaign-price > .down em {
  color: var(--color-category-secondary);
  font-size: var(--font-size-18);
  font-weight: 700;
}
.campaign-price > .period {
  grid-column: span 2;
  color: var(--color-white);
  font-weight: 700;
  background-color: var(--color-category-secondary);
  display: inline-block;
  padding: var(--space-08) var(--space-15);
  margin-top: var(--space-10);
}
@media (max-width: 767px) {
  .campaign-price > .period {
    width: 100%;
    text-align: center;
  }
}
.campaign-price > .coupon {
  grid-column: span 2;
  margin-top: var(--space-10);
}
.campaign-price > .coupon em {
  color: var(--color-category-secondary);
  font-weight: 700;
}
}

@layer utilities {
  /* ==========================================
   Utility Components - Minimal & Limited
   Following AI Guidelines: minimal utilities only
========================================== */
@media (min-width: 768px) {
  .u-sp-only {
    display: none;
  }
}

@media (max-width: 767px) {
  .u-only-pc {
    display: none;
  }
}

.u-image-radius {
  border-radius: var(--radius-8);
}

.u-image-border {
  border: 1px solid var(--color-subtler);
}

.u-mt-05 {
  margin-top: var(--space-05);
}

.u-mt-10 {
  margin-top: var(--space-10);
}

.u-mt-20 {
  margin-top: var(--space-20);
}

.u-mt-30 {
  margin-top: var(--space-30);
}

.u-w-500 {
  width: 100%;
  max-width: 500px;
}

.u-tight-letter-spacing {
  letter-spacing: -0.03em;
}
}