@charset "UTF-8";
/* Import Material Symbols Outlined font */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined');

.under-xsl {
  display: none;

  @media (max-width:499px) {
    display: inline;
  }
}

.case {
  padding: 20rem 0;

  @media (max-width:1200px) {
    padding: 12rem 0;
  }

  @media (max-width:834px) {
    padding: 8rem 0;
  }

  @media (max-width:640px) {
    padding: 6rem 0;
  }

  @media (max-width:449px) {
    padding: 4rem 0;
  }

  .circle {
    border: 1px solid #90cde2;
    display: inline-block;
    padding: .2rem 1.5rem .3rem;
    border-radius: 100vmax;
    background-color: hsl(0, 0%, 100%);
    white-space: nowrap;
    margin-right: 1.5rem;
    font-weight: bold;

    @media (max-width:640px) {
      margin-right: 1rem;
    }

    @media (max-width:449px) {
      margin-right: .5rem;
    }
  }
}

.case__inner {
  width: 90%;
  max-width: 1250px;
  margin: 0 auto;
}

.case__item {
  margin-top: 6rem;
  background-color: #ecf6fc;
  padding: 6rem;

  @media (max-width:834px) {
    margin-top: 4rem;
    padding: 4rem 5rem;
  }

  @media (max-width:640px) {
    margin-top: 3rem;
    padding: 3rem 3rem;
  }

  @media (max-width:449px) {
    margin-top: 2rem;
    padding: 3rem 2.5rem;
  }
}

.case__item-ttl {
  border-bottom: 1px solid #ccc;
  padding-bottom: 2rem;
  margin-bottom: 4rem;
  display: flex;
  align-items: center;
  gap: 4rem;

  @media (max-width:834px) {
    gap: 1rem;
  }

  @media (max-width:640px) {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    gap: 0.5rem;
  }

  @media (max-width:449px) {
    gap: 0;
  }
}

.case__item-ttl-heading {
  font-size: 30px;
  font-weight: 400;
  font-family: "Noto Serif Japanese", serif;

  @media (max-width:640px) {
    font-size: 24px;
  }

  @media (max-width:449px) {
    font-size: 21px;
  }
}

.case__ttl {
  text-align: center;
  line-height: 1;
}

.case__heading {
  font-size: 48px;
  margin-bottom: 3rem;
  color: #2464dd;
  font-family: "Noto Serif Japanese", serif;
  line-height: 1.3;

  @media (max-width:1200px) {
    font-size: 36px;
  }

  @media (max-width:834px) {
    font-size: 28px;
    margin-bottom: 2.5rem;
  }

  @media (max-width:640px) {
    font-size: 24px;
    margin-bottom: 2rem;
  }

  @media (max-width:449px) {
    font-size: 20px;
    margin-bottom: 1rem;
  }
}

.case__text {
  font-size: 20px;
  color: #2c354c;
  font-family: "Noto Serif Japanese", serif;
  line-height: 1.3;

  @media (max-width:1200px) {
    font-size: 18px;
  }

  @media (max-width:834px) {
    font-size: 16px;
  }

  @media (max-width:640px) {
    font-size: 14px;
  }
}

.case__number {
  font-family: 'Crimson Text', serif;
  color: #04b2cf;
  font-size: 60px;
  display: flex;
  align-items: center;
  font-weight: 400;
  line-height: 1;

  @media (max-width:640px) {
    font-size: 48px;
  }

  @media (max-width:449px) {
    font-size: 36px;
  }

  span {
    font-size: 30px;
    display: inline-block;
    margin-right: .5rem;

    @media (max-width:640px) {
      font-size: 24px;
    }

    @media (max-width:449px) {
      font-size: 21px;
    }
  }
}

.case__img-title {
  background-color: #04b2cf;
  color: #fff;
  font-size: 20px;
  padding: 5px;
  text-align: center;
  border-radius: 5px 5px 0 0;

  @media (max-width:834px) {
    font-size: 18px;
  }

  @media (max-width:640px) {
    font-size: 16px;
    line-height: 1.2;
  }

  @media (max-width:449px) {
    font-size: 14px;
    line-height: 1;
  }
}

.case__thumb {
  gap: 5rem;

  @media (max-width:640px) {
    gap: 3rem;
  }
}

.case__img-wrapper {
  background-color: #fff;
  border-radius: 5px;
  position: relative;

  .wrap {
    padding: 3rem;

    @media (max-width:834px) {
      padding: 2rem;
    }
    @media (max-width:640px) {
      padding: 1.5rem;
    }

    @media (max-width:449px) {
      padding: 1rem;
    }
  }

  &:first-child {
    &::after {
      content: "";
      display: block;
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-bottom: 15px solid transparent;
      border-left: 19px solid #b4d9f0;
      background: none;
      position: absolute;
      top: 50%;
      left: calc(100% + 2rem);
      transform: translateY(-50%);
    }
  }
}

@media (max-width:640px) {
  .case__img-wrapper:first-child::after {
    left: calc(100% + 1.2rem);
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 15px solid #b4d9f0;
  }
}

@media (max-width:449px) {
  .case__img-wrapper:first-child::after {
    left: calc(100% + .8em);
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 12px solid #b4d9f0;
  }
}

.before__img,
.after__img {
  position: relative;

  &.wrap {
    &::after {
      content: "\e8ff";
      font-family: 'Material Symbols Outlined';
      color: #8d8d8d;
      font-size: 3.2rem;
      position: absolute;
      bottom: 1.5rem;
      right: 2rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;

      @media (max-width:834px) {
        font-size: 2.8rem;
        bottom: 1rem;
        right: 1.5rem;
      }
      @media (max-width:449px) {
        font-size: 2.4rem;
        bottom: .5rem;
        right: 1rem;
      }
    }
  }
}

.case__list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 6rem;
  gap: 4rem;

  @media (max-width:1200px) {
    margin-top: 5rem;
    gap: 3rem;
  }

  @media (max-width:834px) {
    margin-top: 4rem;
    gap: 2rem;
  }

  @media (max-width:640px) {
    margin-top: 3rem;
    gap: 1.5rem;
  }

  @media (max-width:449px) {
    flex-direction: column;
    margin-top: 2rem;
    gap: 1.5rem;
  }
}

.case__treatment-details {
  margin-top: 6rem;
  display: flex;
  align-items: flex-start;

  span.circle {
    margin-right: 3.5rem;
  }

  @media (max-width:1200px) {
    margin-top: 3rem;
  }

  @media (max-width:834px) {
    margin-top: 3rem;
  }

  @media (max-width:640px) {
    margin-top: 3rem;
  }

  @media (max-width:449px) {
    margin-top: 2.5rem;
    flex-direction: column;
    gap: 1.5rem;
  }
}

.case__caution {
  margin-top: 6rem;
  display: flex;
  align-items: flex-start;

  @media (max-width:1200px) {
    margin-top: 3rem;
  }

  @media (max-width:834px) {
    margin-top: 2rem;
  }

  @media (max-width:640px) {
    margin-top: 2rem;
  }

  @media (max-width:449px) {
    margin-top: 1.5rem;
    flex-direction: column;
    gap: 1.5rem;
  }

  span.circle {
    margin-right: 3.5rem;

    @media (max-width:640px) {
      margin-right: 2.5rem;
    }

    @media (max-width:449px) {
      margin-right: 1.5rem;
    }
  }
}

.case__risk {
  background-color: #fff;
  border-radius: 2rem;
  padding: 4rem 6rem 5rem;
  margin-top: 6rem;

  @media (max-width:834px) {
    margin-top: 4rem;
    padding: 4rem 4rem;
  }

  @media (max-width:640px) {
    margin-top: 3rem;
    padding: 3rem 3rem;
  }

  @media (max-width:449px) {
    margin-top: 2rem;
    padding: 1.5rem 1.5rem;
  }

  span {
    display: block;
  }

  .title {
    font-size: 24px;
    color: #04b2cf;
    font-weight: bold;
    margin-bottom: 2rem;

    @media (max-width:640px) {
      font-size: 20px;
      margin-bottom: 1rem;
    }

    @media (max-width:449px) {
      font-size: 18px;
    }
  }

  .desc {
    display: flex;
    align-items: flex-start;

    &::before {
      content: "\e5ca";
      font-family: 'Material Symbols Outlined';
      margin-right: 1.5rem;
      display: inline-flex;
      width: 22px;
      height: 22px;
      background-color: #04b2cf;
      border-radius: 100vmax;
      color: #fff;
      font-size: 16px;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;

      @media (max-width:640px) {
        margin-right: .5rem;
      }
    }
  }
}