/*====================================*/
/* case
/*====================================*/
.case {
  width: 1060px;
  margin: 96px auto 0 auto;

  @media screen and (max-width: 767px) {
    width: calc(100% - 40px);
    margin: 44px auto 0 auto;
  }

  .case__introduce-text {
    text-align: center;

    @media screen and (max-width: 767px) {
      text-align: left;
    }
  }

  /* customer */
  .customer {
    margin-top: 80px;
    padding: 0 64px 64px 64px;
    position: relative;

    @media screen and (max-width: 767px) {
      margin-top: 52px;
      padding: 0 12px 24px 12px;
    }

    &::before {
      content: "";
      display: block;
      width: 100%;
      height: calc(100% - 60px);
      border: 3px solid #DFDFE4;
      border-radius: 24px;
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: -1;

      @media screen and (max-width: 767px) {
        height: calc(100% - 40px);
      }
    }

    .customer__title {
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;

      @media screen and (max-width: 767px) {
      }

      .customer__no {
        font-size: 24px;
        font-weight: 700;
        font-family: var(--font-en);
        color: var(--color-secondary);

        @media screen and (max-width: 767px) {
          font-size: 14px;
        }
      }

      .customer__text {
        font-size: 38px;
        font-weight: 700;
        line-height: 1.5em;
        display: inline-block;
        padding: 0 16px;
        background-color: #fff;

        @media screen and (max-width: 767px) {
          font-size: 16px;
        }
      }
    }

    /* base */
    .base {
      margin-top: 38px;
      display: flex;
      flex-flow: row;
      justify-content: space-between;
      align-items: flex-start;

      @media screen and (max-width: 767px) {
        margin-top: 10px;
        flex-flow: column;
        justify-content: center;
        align-items: center;
      }

      .figure {
        width: 480px;
        padding: 16px;
        border-radius: 6px;
        background-color: #F3ECE7;

        @media screen and (max-width: 767px) {
          width: 100%;
        }

        .figure__image {
          width: 100%;
          height: auto;
          display: block;
        }
      }

      .assets {
        width: 432px;
        padding: 16px;

        @media screen and (max-width: 767px) {
          width: 100%;
          margin-top: 24px;
          padding: 0;
        }

        table {
          width: 100%;
          margin-top: 12px;

          tr {
            border-bottom: 1px solid #C1C1CB;
          }

          th {
            width: 120px;
            padding: 16px 12px;
            line-height: 1.75em;
            color: var(--color-third);

            @media screen and (max-width: 767px) {
              width: 90px;
              padding: 12px 8px;
              font-size: 12px;
            }
          }

          td {
            padding: 16px 12px;
            line-height: 1.75em;

            @media screen and (max-width: 767px) {
              padding: 12px 8px;
              font-size: 12px;
            }
          }
        }

        .assets__text {
          font-size: 14px;
          margin-top: 12px;

          @media screen and (max-width: 767px) {
            font-size: 12px;
          }
        }
      }
    }

    /* consultation */
    .consultation {
      margin-top: 72px;

      @media screen and (max-width: 767px) {
        margin-top: 24px;
      }

      .consultation__left {
        width: 670px;
        margin-top: 32px;
        margin-right: auto;
        padding: 0 12px;
        display: flex;
        flex-flow: row;
        justify-content: flex-start;
        align-items: flex-start;

        @media screen and (max-width: 767px) {
          width: 100%;
          margin-top: 16px;
          padding: 0;
        }
      }

      .consultation__left--first {
        @media screen and (max-width: 767px) {
          margin-top: 32px;
        }
      }

      .consultation__right {
        width: 670px;
        margin-top: 32px;
        margin-left: auto;
        padding: 0 12px;
        display: flex;
        flex-flow: row;
        justify-content: flex-end;
        align-items: flex-start;

        @media screen and (max-width: 767px) {
          width: 100%;
          margin-top: 16px;
          padding: 0;
        }
      }

      .consultation__avatar--01 {
        width: 63px;
        height: auto;
        display: block;
        margin-right: 40px;

        @media screen and (max-width: 767px) {
          width: 44px;
          margin-right: 28px;
          flex-shrink: 0;
        }
      }

      .consultation__avatar--02 {
        width: 132px;
        height: auto;
        display: block;
        margin-left: 32px;

        @media screen and (max-width: 767px) {
          width: 90px;
          margin-left: 20px;
          flex-shrink: 0;
        }
      }

      .consultation__bubble {
        width: 568px;
        padding: 24px;
        background-color: #fff;
        border: 1px solid #DFDFE4;
        border-radius: 16px;
        position: relative;

        @media screen and (max-width: 767px) {
          width: calc(100% - 110px);
          padding: 12px;
          font-size: 12px;
          line-height: 1.75em;
        }

        &::after {
          content: "";
          display: block;
          width: 28px;
          height: 36px;
          background-image: url(/images/service/individual/case/bubble-w-pc.svg);
          background-repeat: no-repeat;
          background-position: center center;
          background-size: cover;
          position: absolute;
          margin: auto;
          top: 16px;
          right: -28px;

          @media screen and (max-width: 767px) {
            background-image: url(/images/service/individual/case/bubble-w-sp.svg);
            width: 16px;
            height: 22px;
            top: 16px;
            right: -16px;
          }
        }
      }

      .consultation__bubble--b {
        color: #634731;
        background-color: #E9DED3;
        position: relative;

        @media screen and (max-width: 767px) {
          width: calc(100% - 72px);
        }

        &::after {
          background-image: url(/images/service/individual/case/bubble-b-pc.svg);
          left: -28px;
          right: unset;

          @media screen and (max-width: 767px) {
            background-image: url(/images/service/individual/case/bubble-b-sp.svg);
            width: 15.5px;
            left: -15.5px;
          }
        }
      }
    }

    /* assignment */
    .assignment {
      margin-top: 72px;

      @media screen and (max-width: 767px) {
        margin-top: 40px;
      }

      .assignment__list {
        margin-top: 32px;
        padding: 0 12px;
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 16px;

        @media screen and (max-width: 767px) {
          margin-top: 16px;
          padding: 0 8px;
          gap: 8px;
        }
      }

      .assignment__item {
        width: 214px;
        height: 128px;
        display: flex;
        flex-flow: row;
        justify-content: center;
        align-items: center;
        background-color: #FCF9F9;
        border: 1px solid #F9F4F2;
        border-radius: 12px;
        font-weight: 700;
        color: #B68A69;
        text-align: center;
        line-height: 1.75em;

        @media screen and (max-width: 767px) {
          width: calc((100% - 8px)/2);
          height: 80px;
          font-size: 12px;
        }
      }
    }

    /* suggestion */
    .suggestion {
      margin-top: 72px;

      @media screen and (max-width: 767px) {
        margin-top: 32px;
      }

      .suggestion__list {
        margin-top: 32px;
        padding: 0 12px;

        @media screen and (max-width: 767px) {
          margin-top: 16px;
        }
      }

      .suggestion__item {
        display: flex;
        flex-flow: row;
        justify-content: flex-start;
        align-items: flex-start;
        margin-top: 16px;

        &::before {
          content: "";
          display: block;
          width: 8px;
          height: 8px;
          background-color: #2073EE;
          border-radius: 10px;
          margin-top: 11px;
          margin-right: 8px;
          flex-shrink: 0;
        }
      }

      .suggestion__item:first-child {
        margin-top: 0;
      }
    }
  }

  .customer:nth-child(n + 2) {
    margin-top: 130px;

    @media screen and (max-width: 767px) {
      margin-top: 30px;
    }
  }

  .sub-title {
    width: 100%;
    height: 32px;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    border-radius: 6px;
    background-color: var(--color-primary);
    color: #fff;

    @media screen and (max-width: 767px) {
      height: 36px;
    }
  }

  .sub-title--bottom {
    margin-top: 32px;

    @media screen and (max-width: 767px) {
      margin-top: 16px;
    }
  }

  .c-back-button {
    margin: 72px auto 0 auto;

    @media screen and (max-width: 767px) {
      margin: 32px auto 0 auto;
    }
  }
}

/*====================================*/
/* footer
/*====================================*/
.footer {
  margin-top: 128px;

  @media screen and (max-width: 767px) {
    margin-top: 45px;
  }
}