/* =========================================================
   WILL CLENS / ORDER COMPLETE
   お問い合わせ完了ページ風
   既存ecforce CSS対策：
   #perform-view.wc-order-complete-page + !important
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

#perform-view.wc-order-complete-page {
  --wc-blue: #3c9fcf;
  --wc-text: #555;
  --wc-orange-1: #ff923d;
  --wc-orange-2: #ffb47b;
}


/* =========================================================
   RESET
========================================================= */

#perform-view.wc-order-complete-page,
#perform-view.wc-order-complete-page *,
#perform-view.wc-order-complete-page *::before,
#perform-view.wc-order-complete-page *::after {
  box-sizing: border-box !important;
}


#perform-view.wc-order-complete-page {
  position: relative !important;

  width: 100% !important;
  min-width: 0 !important;
  min-height: 100vh !important;

  margin: 0 !important;

  padding:
    64px 0 150px !important;

  overflow: hidden !important;

  color:
    var(--wc-text) !important;

  background:
    #fff !important;

  font-family:
    "Noto Sans JP",
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "Meiryo",
    sans-serif !important;

  font-weight:
    400 !important;

  line-height:
    1.7 !important;

  letter-spacing:
    0 !important;
}


#perform-view.wc-order-complete-page p,
#perform-view.wc-order-complete-page h1,
#perform-view.wc-order-complete-page h2,
#perform-view.wc-order-complete-page h3,
#perform-view.wc-order-complete-page a {
  font-family:
    inherit !important;
}


/* =========================================================
   FIXED BACKGROUND
========================================================= */

#perform-view.wc-order-complete-page::after {
  content:
    "" !important;

  position:
    fixed !important;

  inset:
    0 !important;

  z-index:
    0 !important;

  width:
    100% !important;

  height:
    100vh !important;

  background-image:
    url("../images/order/order-complete-back-fixed.png") !important;

  background-repeat:
    no-repeat !important;

  background-position:
    center top !important;

  background-size:
    100% auto !important;

  pointer-events:
    none !important;
}


#perform-view.wc-order-complete-page > * {
  position:
    relative !important;

  z-index:
    1 !important;
}


/* =========================================================
   ECFORCE OUTER RESET
========================================================= */

#perform-view.wc-order-complete-page
> .l-container__row {
  width:
    100% !important;

  max-width:
    none !important;

  margin-left:
    auto !important;

  margin-right:
    auto !important;

  padding-left:
    0 !important;

  padding-right:
    0 !important;
}


#perform-view.wc-order-complete-page
> .l-container__row.u-margin__top--80 {
  margin-top:
    14px !important;
}


#perform-view.wc-order-complete-page
> .l-container__row.u-margin__top--60 {
  margin-top:
    0 !important;
}


/* =========================================================
   STEP
========================================================= */

#perform-view.wc-order-complete-page
.c-steps_to_order {
  display:
    flex !important;

  align-items:
    flex-start !important;

  justify-content:
    center !important;

  width:
    80% !important;

  max-width:
    520px !important;

  margin:
    0 auto !important;

  padding:
    0 !important;
}


#perform-view.wc-order-complete-page
.c-steps_to_order__step {
  position:
    relative !important;

  display:
    block !important;

  flex:
    1 1 0 !important;

  width:
    auto !important;

  min-width:
    0 !important;

  margin:
    0 !important;

  padding:
    0 !important;

  text-align:
    center !important;
}


#perform-view.wc-order-complete-page
.c-steps_to_order__step:not(:last-child)::after {
  content:
    "" !important;

  position:
    absolute !important;

  top:
    17px !important;

  left:
    calc(50% + 22px) !important;

  width:
    calc(100% - 44px) !important;

  height:
    1px !important;

  background:
    #8fc9e2 !important;
}


#perform-view.wc-order-complete-page
.c-steps_to_order__number {
  position:
    relative !important;

  z-index:
    2 !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  width:
    34px !important;

  height:
    34px !important;

  min-width:
    34px !important;

  margin:
    0 auto 8px !important;

  padding:
    0 !important;

  border:
    1px solid var(--wc-blue) !important;

  border-radius:
    50% !important;

  background:
    #fff !important;

  color:
    var(--wc-blue) !important;

  font-family:
    Arial,
    sans-serif !important;

  font-size:
    13px !important;

  font-weight:
    400 !important;

  line-height:
    1 !important;
}


#perform-view.wc-order-complete-page
.c-steps_to_order__number.is-complete,
#perform-view.wc-order-complete-page
.c-steps_to_order__number.is-active {
  background:
    var(--wc-blue) !important;

  color:
    #fff !important;
}


#perform-view.wc-order-complete-page
.c-steps_to_order__text {
  margin:
    0 !important;

  padding:
    0 !important;

  color:
    #555 !important;

  font-size:
    10px !important;

  font-weight:
    400 !important;

  line-height:
    1.45 !important;
}


/* =========================================================
   COMPLETE WRAPPER
========================================================= */

#perform-view.wc-order-complete-page
.wc-order-complete {
  width:
    86% !important;

  max-width:
    1080px !important;

  margin:
    58px auto 0 !important;

  padding:
    0 !important;
}


#perform-view.wc-order-complete-page
.wc-order-complete__inner {
  width:
    100% !important;

  margin:
    0 auto !important;

  padding:
    0 !important;

  text-align:
    center !important;
}


#perform-view.wc-order-complete-page
.wc-order-complete__header {
  width:
    100% !important;

  margin:
    0 auto !important;

  padding:
    0 !important;

  text-align:
    center !important;
}


/* =========================================================
   TITLE
========================================================= */

#perform-view.wc-order-complete-page
.wc-order-complete__title {
  margin:
    0 0 34px !important;

  padding:
    0 !important;

  color:
    var(--wc-blue) !important;

  font-size:
    31px !important;

  font-weight:
    600 !important;

  line-height:
    1.45 !important;

  letter-spacing:
    .08em !important;
}


/* =========================================================
   MESSAGE
========================================================= */

#perform-view.wc-order-complete-page
.wc-order-complete__message {
  width:
    100% !important;

  max-width:
    760px !important;

  margin:
    0 auto !important;

  padding:
    0 !important;

  text-align:
    center !important;
}


#perform-view.wc-order-complete-page
.wc-order-complete__message p {
  margin:
    0 0 8px !important;

  padding:
    0 !important;

  color:
    #666 !important;

  font-size:
    13px !important;

  font-weight:
    400 !important;

  line-height:
    1.85 !important;

  letter-spacing:
    .03em !important;
}


/* =========================================================
   ORDER NUMBER
========================================================= */

#perform-view.wc-order-complete-page
.wc-order-complete__order-number {
  margin:
    24px 0 0 !important;

  padding:
    0 !important;

  color:
    #666 !important;

  font-size:
    15px !important;

  font-weight:
    600 !important;

  line-height:
    1.6 !important;
}


/* =========================================================
   CHARACTER + CONTACT
========================================================= */

#perform-view.wc-order-complete-page
.wc-order-complete__contact {
  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  gap:
    38px !important;

  width:
    100% !important;

  max-width:
    760px !important;

  margin:
    54px auto 0 !important;

  padding:
    0 !important;
}


#perform-view.wc-order-complete-page
.wc-order-complete__character {
  flex:
    0 0 180px !important;

  width:
    180px !important;

  margin:
    0 !important;

  padding:
    0 !important;
}


#perform-view.wc-order-complete-page
.wc-order-complete__character img {
  display:
    block !important;

  width:
    100% !important;

  height:
    auto !important;

  margin:
    0 !important;

  padding:
    0 !important;
}


#perform-view.wc-order-complete-page
.wc-order-complete__contact-text {
  min-width:
    0 !important;

  margin:
    0 !important;

  padding:
    0 !important;

  text-align:
    left !important;
}


#perform-view.wc-order-complete-page
.wc-order-complete__contact-label {
  margin:
    0 0 7px !important;

  padding:
    0 !important;

  color:
    #555 !important;

  font-size:
    14px !important;

  font-weight:
    600 !important;

  line-height:
    1.6 !important;
}


#perform-view.wc-order-complete-page
.wc-order-complete__contact-mail {
  margin:
    0 !important;

  padding:
    0 !important;

  color:
    #555 !important;

  font-size:
    16px !important;

  font-weight:
    600 !important;

  line-height:
    1.6 !important;
}


#perform-view.wc-order-complete-page
.wc-order-complete__contact-mail a {
  color:
    #555 !important;

  text-decoration:
    none !important;
}


/* =========================================================
   TOP BUTTON
========================================================= */

#perform-view.wc-order-complete-page
.wc-order-complete__btn-wrap {
  width:
    100% !important;

  margin:
    56px auto 0 !important;

  padding:
    0 !important;

  text-align:
    center !important;
}


#perform-view.wc-order-complete-page
.wc-order-complete__btn {
  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  gap:
    16px !important;

  width:
    260px !important;

  max-width:
    100% !important;

  min-height:
    52px !important;

  margin:
    0 auto !important;

  padding:
    0 28px !important;

  border:
    0 !important;

  border-radius:
    999px !important;

  background:
    linear-gradient(
      90deg,
      var(--wc-orange-1),
      var(--wc-orange-2)
    ) !important;

  color:
    #fff !important;

  font-size:
    12px !important;

  font-weight:
    500 !important;

  line-height:
    1 !important;

  text-decoration:
    none !important;

  box-shadow:
    0 5px 9px rgba(0,0,0,.17) !important;
}


#perform-view.wc-order-complete-page
.wc-order-complete__btn-arrow {
  position:
    relative !important;

  display:
    block !important;

  width:
    42px !important;

  height:
    1px !important;

  background:
    #fff !important;
}


#perform-view.wc-order-complete-page
.wc-order-complete__btn-arrow::after {
  content:
    "" !important;

  position:
    absolute !important;

  top:
    -4px !important;

  right:
    0 !important;

  width:
    9px !important;

  height:
    9px !important;

  border-top:
    1px solid #fff !important;

  border-right:
    1px solid #fff !important;

  transform:
    rotate(45deg) !important;
}


/* =========================================================
   NOW UNUSED
========================================================= */

#perform-view.wc-order-complete-page
.wc-order-complete__hidden-function {
  display:
    none !important;
}


/* =========================================================
   SP
========================================================= */

@media (max-width: 560px) {

  #perform-view.wc-order-complete-page {
    padding:
      80px 0 95px !important;
  }


  /* SPも同じ完了背景を使用 */
  #perform-view.wc-order-complete-page::after {
    background-image:
      url("../images/order/order-complete-back-fixed.png") !important;

    background-repeat:
      no-repeat !important;

    background-position:
      center top !important;

    /*
      横長画像なのでSPでは高さを基準に拡大
    */
    background-size:
      auto 100% !important;
  }


  /* STEP */
  #perform-view.wc-order-complete-page
  > .l-container__row.u-margin__top--80 {
    margin-top:
      28px !important;
  }


  #perform-view.wc-order-complete-page
  .c-steps_to_order {
    width:
      68% !important;
  }


  #perform-view.wc-order-complete-page
  .c-steps_to_order__step:not(:last-child)::after {
    top:
      19px !important;

    left:
      calc(50% + 24px) !important;

    width:
      calc(100% - 48px) !important;
  }


  #perform-view.wc-order-complete-page
  .c-steps_to_order__number {
    width:
      39px !important;

    height:
      39px !important;

    min-width:
      39px !important;

    font-size:
      13px !important;
  }


  #perform-view.wc-order-complete-page
  .c-steps_to_order__text {
    font-size:
      8px !important;
  }


  /* COMPLETE */
  #perform-view.wc-order-complete-page
  .wc-order-complete {
    width:
      81% !important;

    max-width:
      none !important;

    margin-top:
      46px !important;
  }


  /* TITLE */
  #perform-view.wc-order-complete-page
  .wc-order-complete__title {
    margin-bottom:
      24px !important;

    font-size:
      20px !important;

    line-height:
      1.5 !important;

    letter-spacing:
      .05em !important;
  }


  /* MESSAGE */
  #perform-view.wc-order-complete-page
  .wc-order-complete__message {
    max-width:
      100% !important;
  }


  #perform-view.wc-order-complete-page
  .wc-order-complete__message p {
    margin-bottom:
      9px !important;

    font-size:
      10px !important;

    line-height:
      1.85 !important;

    letter-spacing:
      0 !important;
  }


  #perform-view.wc-order-complete-page
  .wc-order-complete__message br {
    display:
      none !important;
  }


  /* ORDER NUMBER */
  #perform-view.wc-order-complete-page
  .wc-order-complete__order-number {
    margin-top:
      20px !important;

    font-size:
      11px !important;
  }


  /* CHARACTER + CONTACT */
  #perform-view.wc-order-complete-page
  .wc-order-complete__contact {
    flex-direction:
      column !important;

    gap:
      18px !important;

    width:
      100% !important;

    max-width:
      none !important;

    margin-top:
      36px !important;
  }


  #perform-view.wc-order-complete-page
  .wc-order-complete__character {
    flex:
      none !important;

    width:
      125px !important;
  }


  #perform-view.wc-order-complete-page
  .wc-order-complete__contact-text {
    width:
      100% !important;

    text-align:
      center !important;
  }


  #perform-view.wc-order-complete-page
  .wc-order-complete__contact-label {
    font-size:
      10px !important;

    line-height:
      1.65 !important;
  }


  #perform-view.wc-order-complete-page
  .wc-order-complete__contact-mail {
    font-size:
      11px !important;

    line-height:
      1.65 !important;

    word-break:
      break-all !important;
  }


  /* BUTTON */
  #perform-view.wc-order-complete-page
  .wc-order-complete__btn-wrap {
    margin-top:
      36px !important;
  }


  #perform-view.wc-order-complete-page
  .wc-order-complete__btn {
    width:
      180px !important;

    min-height:
      40px !important;

    padding:
      0 18px !important;

    gap:
      12px !important;

    font-size:
      10px !important;
  }


  #perform-view.wc-order-complete-page
  .wc-order-complete__btn-arrow {
    width:
      28px !important;
  }

}


#perform-view.wc-order-complete-page .wc-order-complete__title {
  font-size: var(--top-h1) !important;
}

#perform-view.wc-order-complete-page .c-steps_to_order__text {
  font-size: var(--top-16) !important;
}

/* =========================================================
   WILL CLENS / ORDER COMPLETE FINAL OVERRIDE
   現行の他下層ページと同じ --top-* 基準
   2026-09-25
========================================================= */

/* ---------------------------------------------------------
   COLOR / BACKGROUND
--------------------------------------------------------- */
#perform-view.wc-order-complete-page {
  --wc-blue: #3694c9 !important;
  background: #fff !important;
}

#perform-view.wc-order-complete-page::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
}


/* ---------------------------------------------------------
   CONTENT WIDTH
   PC max-width:1000px / TB・SP 90%
--------------------------------------------------------- */
#perform-view.wc-order-complete-page .wc-order-complete {
  width: calc(100% - 64px) !important;
  max-width: 1000px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#perform-view.wc-order-complete-page .wc-order-complete__message,
#perform-view.wc-order-complete-page .wc-order-complete__contact {
  max-width: 760px !important;
}


/* ---------------------------------------------------------
   TYPOGRAPHY
--------------------------------------------------------- */

/* H1 */
#perform-view.wc-order-complete-page .wc-order-complete__title {
  font-size: var(--top-h1) !important;
  font-weight: 600 !important;
}

/* 通常本文 */
#perform-view.wc-order-complete-page .wc-order-complete__message p,
#perform-view.wc-order-complete-page .wc-order-complete__contact-label,
#perform-view.wc-order-complete-page .wc-order-complete__contact-mail,
#perform-view.wc-order-complete-page .wc-order-complete__btn {
  font-size: var(--top-16) !important;
}

/* 注文番号 */
#perform-view.wc-order-complete-page .wc-order-complete__order-number {
  font-size: var(--top-20) !important;
  font-weight: 600 !important;
}

/* ステップ */
#perform-view.wc-order-complete-page .c-steps_to_order__text {
  font-size: var(--top-small) !important;
}


/* ---------------------------------------------------------
   TOP BUTTON
   共通オレンジCTA
--------------------------------------------------------- */
#perform-view.wc-order-complete-page .wc-order-complete__btn {
  width: 280px !important;
  max-width: 100% !important;
  min-height: 60px !important;
  padding: 0 24px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background:
    linear-gradient(
      110deg,
      #ff8c35 0%,
      #f99a52 50%,
      #f7ad75 100%
    ) !important;
  color: #fff !important;
  font-size: var(--top-16) !important;
  font-weight: 600 !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, .16) !important;
}


/* ---------------------------------------------------------
   TABLET / SP
--------------------------------------------------------- */
@media (max-width: 1170px) {
  #perform-view.wc-order-complete-page .wc-order-complete {
    width: 90% !important;
    max-width: 1000px !important;
  }

  #perform-view.wc-order-complete-page::after {
    content: none !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
  }
}

@media (max-width: 770px) {
  #perform-view.wc-order-complete-page {
    padding-top: 92px !important;
  }

  #perform-view.wc-order-complete-page .wc-order-complete {
    width: 90% !important;
    max-width: none !important;
  }

  #perform-view.wc-order-complete-page .wc-order-complete__message {
    max-width: 100% !important;
  }

  #perform-view.wc-order-complete-page .wc-order-complete__contact {
    flex-direction: column !important;
    width: 100% !important;
    max-width: none !important;
    gap: 18px !important;
  }

  #perform-view.wc-order-complete-page .wc-order-complete__contact-text {
    width: 100% !important;
    text-align: center !important;
  }

  #perform-view.wc-order-complete-page .wc-order-complete__btn {
    width: min(280px, 100%) !important;
    min-height: 54px !important;
  }
}