@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-button-gap: 24px;
}

.top-part {
  box-sizing: border-box;
  width: 100%;
}

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

.top-part--isolate {
  display: flow-root;
}

.top-wrap>.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:not(.highlight):not(.highlightArea2)> :first-child {
  margin-top: 0;
}

.top-part:not(.highlight):not(.highlightArea2)> :last-child {
  margin-bottom: 0;
}

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

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

.top-wrap .btnWrap,
.top-part .btnWrap,
.top-spFullBleed .btnWrap {
  margin-top: var(--top-button-gap) !important;
}

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

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

.top-part:not(.highlight):not(.highlightArea2)>.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;
}

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

.top-wrap .check_latest_parts.top-part {
  margin-top: var(--top-part-gap-pc) !important;
}

.top-geniCommitment {
  padding-top: var(--top-part-gap-pc);
  padding-bottom: var(--top-part-gap-pc);
}

.footerShoppingGuide.top-part {
  padding-bottom: 56px !important;
}

.footerShoppingGuide.top-part .shoppingGuide2 {
  padding-bottom: 0 !important;
}

@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 (min-width: 751px) {
  .top-wrap>.TOP-h1 {
    margin-bottom: 0 !important;
  }

  .top-wrap>.TOP-h1~.top-part.highlightArea2.top-spFullBleed {
    margin-top: 32px !important;
    padding-top: 0 !important;
  }

  .top-wrap>.TOP-h1~.top-part.highlightArea2.top-spFullBleed>.hotKeywords:first-child {
    padding-top: 0 !important;
  }
}

@media (max-width: 750px) {

  html,
  body {
    overflow-x: clip;
  }

  @supports not (overflow: clip) {

    html,
    body {
      overflow-x: hidden;
    }
  }

  .top-part:not(.top-part--contained),
  .top-spFullBleed {
    box-sizing: border-box;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  .mainSliderSec.top-spFullBleed {
    overflow: hidden;
  }

  .mainSliderSec.top-spFullBleed .slick-list {
    overflow: hidden;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .mainSliderSec.top-spFullBleed .slick-slide,
  .mainSliderSec.top-spFullBleed .slick-slide>div {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .mainSliderSec.top-spFullBleed .mainSliderSec__inner,
  .mainSliderSec.top-spFullBleed .mainSlider,
  .mainSliderSec.top-spFullBleed picture,
  .mainSliderSec.top-spFullBleed img,
  .conceptE__bg.top-spFullBleed picture,
  .conceptE__bg.top-spFullBleed img {
    width: 100%;
    max-width: 100%;
  }

  .mainSliderSec.top-spFullBleed img,
  .conceptE__bg.top-spFullBleed img {
    display: block;
    height: auto;
  }

  .mainSliderSec.top-spFullBleed .slick-dots {
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    list-style: none;
  }

  .mainSliderSec.top-spFullBleed .slick-dots li {
    width: auto !important;
    max-width: none !important;
    margin-left: 6px !important;
    margin-right: 6px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .voice__sec.top-spFullBleed,
  .child__sec.top-spFullBleed {
    box-sizing: border-box;
    padding-top: var(--top-part-gap-sp) !important;
    padding-bottom: var(--top-part-gap-sp) !important;
  }

  .voice__sec.top-spFullBleed .container,
  .voice__sec.top-spFullBleed .container__review {
    max-width: 100%;
  }

  .conceptE__bg.top-spFullBleed {
    width: 100vw;
    max-width: 100vw;
    overflow: hidden;
  }

  .top-wrap>.top-part~.top-part {
    margin-top: var(--top-part-space-before-sp, var(--top-part-space-before, var(--top-part-gap-sp))) !important;
  }

  .top-wrap .check_latest_parts.top-part {
    margin-top: var(--top-part-gap-sp) !important;
  }

  .top-geniCommitment {
    padding-top: var(--top-part-gap-sp) !important;
    padding-bottom: var(--top-part-gap-sp) !important;
  }

  .footerShoppingGuide.top-part {
    padding-bottom: 40px !important;
  }

  .top-wrap>.top-part.highlight,
  .top-wrap>.top-part.highlightArea2 {
    padding-top: var(--top-part-gap-sp) !important;
    padding-bottom: var(--top-part-gap-sp) !important;
  }

  .top-wrap>.top-part.highlight> :first-child,
  .top-wrap>.top-part.highlightArea2> :first-child {
    margin-top: 0;
  }

  .top-wrap>.top-part.highlight> :last-child,
  .top-wrap>.top-part.highlightArea2> :last-child {
    margin-bottom: 0;
  }

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

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

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

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

  .top-wrap > .top-part.highlightArea2.top-spFullBleed.top-keywordRankingArea {
    padding-top: 0 !important;
  }

}