@charset "UTF-8";

.bgGray {
  background-color: var(--color-gray-50);
}
.b-advantage {
  position: relative;
  display: grid;
  place-items: center;
  row-gap: clamp(2rem, 1.171rem + 3.54vw, 4rem);
  padding-block: clamp(2rem, 1.171rem + 3.54vw, 4rem);

  &::before {
    content: "";
    position: absolute;
    bottom: max(-7vw, -82px);
    left: 50%;
    transform: translateX(-50%);
    width: min(96%, 1590px);
    aspect-ratio: 1590 / 360;
    background: url(../images/advantage/advantage-01.svg) center bottom / contain no-repeat;
  }
  a {
    text-decoration: underline;
    color: #00a0e9;
  }
}
.b-advantage-title {
  text-align: center;
  font-size: clamp(1.25rem, 0.939rem + 1.33vw, 2rem);
  color: #00a0e9;
}
.b-advantage-example {
  display: grid;
  row-gap: clamp(1rem, 0.586rem + 1.77vw, 2rem);
  width: 100%;

  > ul {
    margin-top: var(--spacing-2xl);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: clamp(1rem, 0.586rem + 1.77vw, 2rem);

    @media (max-width: 768px) {
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    }
    > li {
      display: grid;
      place-content: center;
      background-color: #ffffff;
      border-radius: calc(infinity * 1px);
      padding: clamp(1rem, 0.586rem + 1.77vw, 2rem) clamp(2rem, 1.171rem + 3.54vw, 4rem);
      font-size: clamp(1rem, 0.948rem + 0.22vw, 1.125rem);
      font-weight: bold;

      > p em {
        color: #00a0e9;
      }
    }
  }
}

.b-reasons {
  .b-reasons-inner {
    display: grid;
    row-gap: var(--spacing-2xl);
    padding-block: var(--spacing-4xl);
  }
  .b-reasons-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    grid-template-rows: repeat(3, auto);
    gap: var(--spacing-3xl) var(--spacing-xl);
    padding-inline: var(--spacing-4xl);

    > li {
      display: grid;
      grid-row: span 3;
      grid-template-rows: subgrid;
      row-gap: var(--spacing-sm);
      justify-items: center;

      > h3 {
        text-align: center;
        place-self: center;
        font-size: var(--text-xl);
      }
    }
  }
}

.b-results {
  .b-results-inner {
    display: grid;
    row-gap: var(--spacing-2xl);
    padding-block: var(--spacing-4xl);
  }
  .b-results-list {
    > li {
      display: flex;
      gap: var(--spacing-3xl);

      &:not(:last-child) {
        margin-bottom: var(--spacing-3xl);
      }
      &:nth-child(odd) {
        flex-direction: row-reverse;
      }
      dl {
        width: 50%;

        dt {
          font-size: var(--text-2xl);

          span {
            display: block;
            line-height: var(--line-height-xs);
            font-family: "Roboto", sans-serif;
            font-size: 3.5rem;
            color: var(--color-primary-300);
          }
        }
        dd {
          margin-top: var(--spacing-md);;
          font-size: var(--text-lg);
        }
      }
      figure {
        flex: 1;
      }
      @media screen and (max-width: 768px) {
        flex-direction: column;

        &:nth-child(odd) {
          flex-direction: column;
        }
        dl {
          width: 100%;
        }
      }
    }
  }
}

.b-voice {
  .b-voice-inner {
    padding-block: var(--spacing-4xl);
  }
  .b-voice-leadText {
    font-size: var(--text-3xl);
    font-weight: bold;
    text-align: center;
    line-height: 1.5;
    padding-block-start: var(--spacing-3xl);
  }
  .b-voice-list {
    margin-top: var(--spacing-3xl);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-xl);

    > li {
      width: calc((100% - ((var(--spacing-xl) * 2))) / 3);
      background-color: var(--color-white);
      display: flex;
      flex-direction: column;

      @media screen and (max-width: 768px) {
        width: 100%;
      }
      dl {
        height: 100%;
        display: flex;
        flex-direction: column;

        dt {
          min-height: calc(1.62em * 3);
          margin: 5% 5% 0;
          line-height: var(--line-height-sm);
          font-size: var(--text-lg);

          @media screen and (max-width: 768px) {
            min-height: initial;
          }
        }
        dd {
          &:not(:last-child) {
            margin: 5% 5% 10%;
          }
          &:last-child {
            margin-top: auto;
            padding: 2.5% 5%;
            background-color: var(--color-primary-100);
            text-align: right;
          }
        }
      }
    }
  }
}

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

  .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-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.";
        }
      }
    }
  }
}