.order-hero-links {
  padding-block-start: var(--spacing-2xl);
}

.order-linkBtns {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6em;
  place-content: center;
  max-width: 960px;
}
.order-flow {
  .order-flow-lead {
    font-size: var(--text-3xl);
    font-weight: bold;
    text-align: center;
    line-height: 1.5;
    margin-block: var(--spacing-3xl);
  }

  .order-flow-list {
    --row-gap: 3rem;
    display: grid;
    grid-template-columns: 1fr 2fr;
    column-gap: var(--spacing-2xl);
    row-gap: var(--row-gap);
    margin-block: var(--spacing-4xl);

    > dt {
      display: grid;
      place-items: center;
      position: relative;
      min-height: 2lh;
      z-index: 1;
      font-size: var(--text-xl);
      font-weight: bold;
      text-align: center;
      color: var(--color-primary-300);
      container-type: inline-size;
      background-color: var(--color-white);
      border-style: solid;
      border-color: var(--color-primary-300);
      border-width: 1px 1px 0 1px;

      > span {
        padding: 0.5em clamp(0.5rem, 0.293rem + 0.88vw, 1rem);
      }

      &::before,
      &::after {
        position: absolute;
        z-index: -1;
        top: 100%;
        left: 0;
        content: "";
        display: block;
        border-style: solid;
        border-width: calc(var(--row-gap) - 0.2rem) 50cqw 0px 50cqw;
      }

      &::before {
        border-color: var(--color-primary-300) transparent transparent
          transparent;
      }
      &::after {
        border-color: var(--color-white) transparent transparent transparent;
        transform: translateY(-1px);
      }
    }

    > dd {
      display: grid;
      a {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        place-self: end;
        color: var(--color-primary-300);
        border-block-end: 1px solid currentColor;
        min-width: 16em;
        &::after {
          --size: 0.8em;
          content: "";
          display: block;
          background-color: currentColor;
          mask-image: url("../images/common/icon-arrow-right.svg");
          mask-repeat: no-repeat;
          mask-position: center;
          mask-size: contain;
          width: var(--size);
          height: var(--size);
        }
        @media (hover: hover) {
          &:any-link:hover {
            color: color-mix(
              in srgb,
              var(--color-primary-300),
              transparent 50%
            );
          }
        }
      }
    }
  }
}

.order-download {
  background-color: var(--color-primary-50);
  padding-block: var(--spacing-4xl);

  .order-download-inner {
    border: 1px solid var(--color-primary-300);
    background-color: var(--color-white);
    padding: var(--spacing-2xl);
    margin-inline: auto;
  }

  .order-download-title {
    color: var(--color-primary-300);
    font-size: var(--text-3xl);
    font-weight: bold;
    text-align: center;
  }

  .order-download-text {
    display: grid;
    row-gap: 2em;
    padding-block-start: var(--spacing-xl);

    > div {
      display: grid;
      row-gap: 0.5em;

      h3 {
        font-size: var(--text-lg);
        font-weight: bold;
      }

      ul {
        list-style: disc;
        padding-inline-start: 1.2em;
      }
    }
  }

  .order-download-link {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1em 2em;
    align-items: center;
    padding-block-start: var(--spacing-xl);

    p:first-child {
      font-size: var(--text-xl);
      font-weight: bold;
      grid-column: span 2;
    }

    a.order-download-button {
      place-self: center;
      font-size: var(--text-md);
      padding-block: var(--spacing-xs);
    }

    @media (width < 768px) {
      grid-template-columns: 1fr;

      p:first-child {
        grid-column: 1;
      }
    }
  }
}

.order-delivery {
  padding-block: var(--spacing-4xl);

  .order-delivery-title {
    color: var(--color-primary-300);
    font-size: var(--text-3xl);
    font-weight: bold;
    text-align: center;
  }
  .order-delivery-lead {
    text-align: center;
    padding-block-start: var(--spacing-xl);
  }
  .order-delivery-body {
    display: grid;
    grid-template-columns: auto 1fr;
    margin-block-start: var(--spacing-xl);
    border-width: 1px 0 1px 1px;
    border-style: solid;
    border-color: currentColor;

    > div {
      display: grid;
      grid-template-columns: subgrid;
      grid-column: span 2;
      &:not(:last-child) {
        border-bottom: 1px dashed currentColor;
      }

      > dt,
      > dd {
        padding: 1.5rem 2.5rem;
        border-right: 1px solid currentColor;
      }

      > dt {
        display: grid;
        place-items: center;
        background-color: var(--color-primary-50);
      }

      > dd li {
        padding-inline-start: 1em;
        &::before {
          content: "・";
          margin-inline-start: -1.4em;
        }
      }
    }

    @media (width < 768px) {
      grid-template-columns: 1fr;
      > div {
        grid-column: 1;
      }
    }
  }
  .order-delivery-link {
    display: grid;
    place-items: end;
    margin-block-start: var(--spacing-lg);

    a {
      font-size: var(--text-md);
      padding-block: var(--spacing-xs);
    }
  }
}

.order-links-section {
  background-color: var(--color-primary-100);
  padding-block: var(--spacing-3xl);

  .order-links-section-title {
    font-size: var(--text-xl);
    font-weight: bold;
    text-align: center;
  }

  .order-linkBtns {
    margin-block-start: var(--spacing-xl);
  }
}
.order-registration {
  padding-block: var(--spacing-4xl);

  .order-registration-lead {
    font-size: var(--text-3xl);
    font-weight: bold;
    text-align: center;
    padding-block-start: var(--spacing-xl);
  }

  .order-registration-subLead {
    font-size: var(--text-lg);
    text-align: center;
    padding-block-start: var(--spacing-lg);
  }

  .order-registration-body {
    display: grid;
    row-gap: var(--spacing-2xl);
    margin-block-start: var(--spacing-3xl);
  }

  .order-registration-block {
    display: grid;
    row-gap: var(--spacing-md);
    > h3 {
      font-size: var(--text-lg);
      color: var(--color-primary-300);
    }

    .order-registration-block-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 2em;
    }

    > ul {
      padding-inline-start: 1.2em;
      li {
        text-indent: -1em;
      }
    }

    p a {
      color: var(--color-primary-300);
      text-decoration: underline;
    }
  }
}

.order-discount {
  background-color: var(--color-gray-50);
  padding-block: var(--spacing-4xl);

  .order-discount-inner {
    display: grid;
    row-gap: var(--spacing-xl);
  }

  .order-discount-title {
    color: var(--color-primary-300);
    font-size: var(--text-3xl);
    font-weight: bold;
    text-align: center;
  }

  .order-discount-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 2.5rem;

    .order-discount-card {
      display: grid;
      grid-template-rows: auto auto 1fr;
      row-gap: 1rem;
      background-color: var(--color-white);
      padding: 1.2rem;
      container-type: inline-size;

      .order-discount-card-rate {
        color: var(--color-white);
        background-color: var(--color-primary-100);
        padding: 0.5em;
        font-size: min(15cqw, 3rem);
        font-weight: bold;
        text-align: center;
        line-height: 1;
        > em {
          font-size: 2em;
          font-family: var(--font-family-roboto);
          font-weight: 500;
          margin-inline-end: 0.1em;
          font-style: normal;
          > small {
            font-size: 0.8em;
          }
        }
      }
      .order-discount-card-title {
        text-align: center;
        font-weight: bold;
        font-size: var(--text-xl);
        > small {
          display: block;
          font-size: 0.72em;
        }
      }
      .order-discount-card-text {
        font-size: var(--text-sm);
      }
    }
  }

  .order-discount-note {
    display: grid;
    row-gap: 0.5em;
    font-size: var(--text-sm);
  }
}

.order-faq {
  display: grid;
  row-gap: var(--spacing-xl);
  padding-block: var(--spacing-4xl);

  .order-faq-lead {
    text-align: center;
    font-size: var(--text-3xl);
    font-weight: bold;
  }

  .order-faq-list {
    --base-fontSize: clamp(0.875rem, 0.849rem + 0.11vw, 0.938rem);
    --summary-fontSize: clamp(1rem, 0.948rem + 0.22vw, 1.125rem);
    display: grid;
    row-gap: calc(var(--base-fontSize) * 0.6);

    details {
      overflow: hidden;

      > summary,
      > div {
        display: grid;
        column-gap: calc(var(--base-fontSize) * 0.6);
        padding-inline: calc(var(--base-fontSize) * 1.2);
        padding-block: calc(var(--base-fontSize) * 1.2);

        &::before {
          text-transform: uppercase;
          font-family: var(--font-family-roboto);
          font-size: calc(var(--base-fontSize) * 2.2);
          font-weight: normal;
          color: #00a0e9;
          line-height: 1;
        }
      }
      > summary {
        grid-template-columns: auto 1fr auto;
        background-color: var(--color-primary-100);
        font-size: var(--summary-fontSize);
        font-weight: bold;

        &::before {
          content: "q.";
        }

        .toggleIcon {
          --size: 1.7em;
          position: relative;
          display: inline-block;
          place-self: center;
          width: var(--size);
          height: var(--size);
          &::before,
          &::after {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateX(-50%);
            content: "";
            display: inline-block;
            width: var(--size);
            height: 1px;
            background-color: currentColor;
            transition-duration: 0.3s;
            transition-timing-function: ease-out;
            transition-property: transform;
          }
          &::after {
            transform: translateX(-50%) rotate(90deg);
          }
        }
        &.js-isOpen {
          .toggleIcon {
            &::after {
              transform: translateX(-50%) rotate(0);
            }
          }
        }
      }
      > div {
        grid-template-columns: auto 1fr;
        > p {
          display: grid;
          row-gap: 1em;

          a {
            place-self: end;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: var(--color-primary-300);
            min-width: 18em;
            padding-block: 0.3em;
            border-block-end: 1px solid currentColor;
            &::after {
              --size: 1em;
              content: "";
              background-color: currentColor;
              mask-image: url("../images/common/icon-arrow-right.svg");
              mask-repeat: no-repeat;
              mask-position: center;
              mask-size: contain;
              width: var(--size);
              height: var(--size);
            }
          }
        }
        &::before {
          content: "a.";
        }
      }
    }
  }
}

.order-form-hero-list {
  padding-block-start: var(--spacing-xl);
}
.order-form-list {
  display: grid;
  row-gap: 1em;
  max-width: 960px;

  li {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1em;
    margin-bottom: 0.5em;
    line-height: 1.6;
    font-size: var(--text-lg);

    &::before {
      --size: 0.8em;
      content: "";
      display: inline-block;
      background-color: var(--color-primary-300);
      mask-image: url("../images/order/icon-arrow-right-double.svg");
      mask-repeat: no-repeat;
      mask-position: center;
      mask-size: contain;
      width: var(--size);
      height: var(--size);
      margin-block: 0.4em;
    }

    a {
      color: var(--color-primary-300);
      text-decoration: underline;

      &:hover {
        color: var(--color-primary-200);
      }
    }
  }
}

.order-form {
  background-color: var(--color-gray-50);
  padding-block: var(--spacing-2xl);

  .order-form-title {
    color: var(--color-primary-300);
    font-size: var(--text-3xl);
    font-weight: bold;
    text-align: center;
    padding-block: var(--spacing-2xl);
  }

  form {
    display: grid;
    row-gap: var(--spacing-sm);
  }

  a {
    color: var(--color-primary-300);
    text-decoration: underline;
  }

  .forminator-label {
    display: flex !important;
    align-items: center;
    line-height: 1 !important;
    column-gap: 0.5em;
    font-size: var(--text-lg) !important;
    padding-bottom: 1em;

    &:has(.forminator-required) {
      > span {
        display: none;
      }
      &::after {
        content: "必須";
        color: var(--color-white);
        font-size: var(--text-xs);
        padding: 0.3em 0.7em;
        background-color: var(--color-black);
      }
    }
  }
  .forminator-description {
    padding-bottom: 1em !important;
  }

  .forminator-input,
  .forminator-textarea {
    width: 100%;
    border: 1px solid var(--color-gray-200);
    border-radius: 0.33rem !important;
    padding: 0.7em 1em !important;
  }

  .forminator-row-last > *:has(.forminator-button-submit) {
    display: flex;
    place-content: center;
  }

  .forminator-button-submit {
    --color-positive: var(--color-primary-300);
    --color-negative: var(--color-white);
    display: inline-grid !important;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md) !important;
    border: 1px solid currentcolor !important;
    border-radius: 0px !important;
    min-width: 21rem !important;
    color: var(--color-positive) !important;
    font-size: var(--text-lg) !important;
    font-weight: bold !important;
    text-align: center !important;
    text-decoration: none !important;
    background-color: unset;

    @media (hover: hover) {
      &:hover {
        color: var(--color-negative) !important;
        background-color: var(--color-positive);
        border: 1px solid var(--color-positive) !important;
        box-shadow: none !important;
      }
    }
  }
  .forminator-error-message {
    margin-top: 1em !important;
    border-radius: 0.5em !important;
    padding: 0.7em 1em !important;
    color: red !important;
  }
}

.forminator-ui#forminator-module-634.forminator-design--default
  .forminator-label
  .forminator-required {
  color: transparent !important;
}

.forminator-ui#forminator-module-634.forminator-design--default
  .forminator-label
  .forminator-required::after {
  content: "必須";
  color: var(--color-white);
  font-size: var(--text-xs);
  padding: 0 0.7em;
  background-color: var(--color-black);
}

/* サンクスページのスタイル */
.thanks-hero {
  > h1::before {
    white-space: pre-wrap;
  }
}

.thanks-button-back {
  display: grid;
  place-items: center;
  padding-block-end: var(--spacing-4xl);
}