@charset "utf-8";

/* FutureShop Commerce Creator top parts spacing */
:root {
  --top-part-gap-pc: 72px;
  --top-part-gap-sp: 48px;
  --top-part-gap-compact-pc: 40px;
  --top-part-gap-compact-sp: 28px;
  --top-part-inner-gap-pc: 48px;
  --top-part-inner-gap-sp: 34px;
  --top-heading-gap-pc: 28px;
  --top-heading-gap-sp: 20px;
}

.top-part {
  display: flow-root;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0;
}

.top-part *,
.top-part *::before,
.top-part *::after {
  box-sizing: border-box;
}

.top-part ~ .top-part {
  margin-top: var(--top-part-space-before, var(--top-part-gap-pc));
}

.top-part--compact {
  --top-part-space-before: var(--top-part-gap-compact-pc);
  --top-part-space-before-sp: var(--top-part-gap-compact-sp);
}

.top-part--footer,
.top-part--no-gap,
.top-part.no-gap {
  --top-part-space-before: 0;
  --top-part-space-before-sp: 0;
}

.top-part > :first-child {
  margin-top: 0;
}

.top-part > :last-child {
  margin-bottom: 0;
}

.top-part :where(.h2A) {
  margin-top: 0;
  margin-bottom: var(--top-heading-gap-pc);
}

.top-part :where(.h2A .subText) {
  display: block;
  margin-top: 8px;
}

.top-part > section + section,
.top-part > div > section + section,
.top-part > div > section > section + section {
  margin-top: var(--top-part-inner-gap-pc);
}

.top-part > .container + section,
.top-part > section > .container + section {
  margin-top: var(--top-part-inner-gap-pc);
}

.top-part > .container + .banner-grid {
  margin-top: var(--top-heading-gap-pc);
}

#payment_cp_content.top-part ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#payment_cp_content.top-part li + li {
  margin-top: 16px;
}

@supports selector(:has(*)) {
  #payment_cp_content.top-part:not(:has(li:not([style*="display: none"]))) {
    display: none;
  }
}

.top-part--footer footer {
  margin-top: 0;
}

@media (max-width: 750px) {
  .top-part ~ .top-part {
    margin-top: var(--top-part-space-before-sp, var(--top-part-space-before, var(--top-part-gap-sp)));
  }

  .top-part :where(.h2A) {
    margin-bottom: var(--top-heading-gap-sp);
  }

  .top-part > section + section,
  .top-part > div > section + section,
  .top-part > div > section > section + section {
    margin-top: var(--top-part-inner-gap-sp);
  }

  .top-part > .container + section,
  .top-part > section > .container + section {
    margin-top: var(--top-part-inner-gap-sp);
  }

  .top-part > .container + .banner-grid {
    margin-top: var(--top-heading-gap-sp);
  }
}