@charset "UTF-8";

.c-about {
  margin-top: 40px;
  text-align: center;
  position: relative;
}

.c-about__lead {
  font-family: "Noto Sans JP", serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.2;
}

.c-about__lead--small {
  font-size: 19px;
  position: relative;
  top: -2px;
}

.c-about__lead--color {
  margin-top: 5px;
  font-family: "Noto Sans JP", serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  background: -webkit-gradient(linear, left top, right top, from(#395AA8), color-stop(90%, #3184BD), color-stop(97%, #2E9CC9));
  background: linear-gradient(90deg, #395AA8 0%, #3184BD 90%, #2E9CC9 97%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.c-about__inner {
  position: relative;
  width: 100%;
  min-height: 700px;
  margin: 0 auto;
}

/* ===============================
   中央画像（PCデフォルト）
================================= */

.c-about__circle {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.c-about__circle img {
  width: 100%;
  max-width: clamp(350px, 30.2083333333vw, 435px);
}

.c-about__box-wrapper {
  width: 100%;
}

.c-about-box {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 8px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  max-width: clamp(295px, 31.9444444444vw, 460px);
}

.c-about-box__upper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: clamp(8px, 1.6666666667vw, 24px);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-top: clamp(5px, 1.3888888889vw, 20px);
  border-top: 1px solid #D9D9D9;
}

.c-about-box__left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: clamp(40px, 4.1666666667vw, 60px);
  height: clamp(40px, 4.1666666667vw, 60px);
  background-color: #DEE9FB;
  border-radius: 50%;
  font-size: clamp(16px, 2.2222222222vw, 32px);
  letter-spacing: 0.02em;
  line-height: 1.5;
  font-family: "Poppins", sans-serif;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.c-about-box__text {
  font-size: clamp(12px, 0.9722222222vw, 14px);
  line-height: 1.7142857143;
  margin-bottom: initial;
}

.c-about-box__title {
  font-size: clamp(16px, 1.9444444444vw, 28px);
  font-family: "Poppins", sans-serif;
  letter-spacing: 0.02em;
  font-weight: 600;
  background: -webkit-gradient(linear, left top, right top, from(#395AA8), color-stop(90%, #3184BD), color-stop(97%, #2E9CC9));
  background: linear-gradient(90deg, #395AA8 0%, #3184BD 90%, #2E9CC9 97%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  margin-bottom: initial;
}

.c-about-box__right {
  text-align: left;
}

.c-about-box__list {
  padding-left: 0;
}

.c-about-box__list li {
  position: relative;
  padding-left: 16px;
  list-style: none;
  text-align: left;
  font-size: 12px;
  line-height: 1.6;
  font-weight: 500;
}

/* 丸（グラデーション） */

.c-about-box__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: -webkit-linear-gradient(50deg, #345198 -18.05%, #2589B4 127.67%);
}

/* ===============================
   PC配置
   ※ HTML側で .c-about-box--01 ～ --05 を追加する前提
================================= */

.c-about-box--01 {
  top: clamp(55px, 55px + -30 * (100vw - 801px) / 639, 25px);
  right: clamp(-25px, -25px + 88 * (100vw - 801px) / 639, 63px);
  position: absolute;
  z-index: 2;
}

.c-about-box--02 {
  top: clamp(263px, 263px + 22 * (100vw - 801px) / 639, 285px);
  right: clamp(-70px, -70px + -25 * (100vw - 801px) / 639, -95px);
}

.c-about-box--03 {
  right: clamp(-5px, -5px + 35 * (100vw - 801px) / 639, 30px);
  bottom: clamp(-60px, 35px + -95 * (100vw - 801px) / 639, 35px);
}

.c-about-box--04 {
  left: -45px;
  bottom: clamp(70px, 70px + -30 * (100vw - 801px) / 639, 40px);
}

.c-about-box--05 {
  top: 180px;
  left: clamp(-60px, -60px + 15 * (100vw - 801px) / 639, -45px);
}

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

@media screen and (max-width: 800px) {
  .c-about__lead {
    font-size: 16px;
  }

  .c-about__lead--small {
    font-size: 8px;
  }

  .c-about__lead--none {
    display: none;
  }

  .c-about__lead--color {
    margin-top: 12px;
    font-size: 16px;
  }

  .c-about__inner {
    min-height: unset;
  }

  .c-about__circle {
    position: static;
    -webkit-transform: unset;
            transform: unset;
  }

  .c-about__box-wrapper {
    display: grid;
    place-content: center;
    place-items: center;
  }

  .c-about-box {
    position: static;
    width: 100%;
    max-width: 520px;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    border-bottom: 1px solid #D9D9D9;
    padding-top: 20px;
  }

  .c-about-box__upper {
    border-top: unset;
  }

  .c-about-box__left {
    width: 46px;
    height: 46px;
    font-size: 24px;
  }

  .c-about-box__text {
    font-size: 14px;
    text-align: left;
  }

  .c-about-box__title {
    font-size: 24px;
    margin-top: 0;
  }
}
/*# sourceMappingURL=c-about.css.map */