@charset "UTF-8";


:root {
  --color-black: #231815;
  --color-white: #ffffff;

  --color-primary: #0555ff;
  --color-gray: #ccc;
  --color-orange: #e85302;
  --color-orange02: #ff5a00;

  --ja: "Noto Sans JP", sans-serif;
  --en: "Unbounded", sans-serif;
}

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

/*================================================
* subVisual
================================================*/
#subVisual.numbers {
  padding-bottom: 4.5vw;
}

#subVisual.numbers .wrap_md {
  margin-top: 16.3vw;
}

#subVisual.numbers p {
  color: var(--color-black);

  font-size: clamp(12px, 1.6rem, 1.6rem);
}

@media screen and (max-width:767px) {
  #subVisual.numbers {
    padding-bottom: 6rem;
  }
}

/*================================================
* numbersDetail
================================================*/
#numbersDetail {
  padding: 9rem 0;
  background: #eff1f5;
}


.numList {
  margin-top: 6rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4rem 2.5%;
}

.numBox.col1 {
  grid-column: span 1;
}

.numBox.col2 {
  grid-column: span 2;
}

.numBox.col3 {
  grid-column: span 3;
}

.numBox {
  background: var(--color-white);
  padding: 3.2rem 2.08vw;
  border: 1px solid #dddddd;
}

.numTtl {
  font-size: 2.4rem;
  font-weight: 500;
  padding-left: 3.4rem;
  position: relative;
  margin-bottom: 5.6rem;
}

.numTtl span {
  font-size: 1.6rem;
}

.numTtl::before {
  position: absolute;
  content: "";
  width: 1.4rem;
  height: 1.4rem;
  background: var(--color-primary);
  border-radius: 100%;
  left: 0;
  top: 2rem;
}

.numData {
  font-weight: 600;
  line-height: 1;
  text-align: center;
}

.numData .small {
  display: block;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 0.4rem;
}

.numData .num {
  color: var(--color-primary);
  font-family: var(--en);
  font-weight: 400;
}

.numData .f100 {
  font-size: 10rem;
}

.numData .f80 {
  font-size: 8rem;
}

.numData .f60 {
  font-size: 6rem;
}

.numData .f50 {
  font-size: 5rem;
}

.numData .f30 {
  font-size: 3rem;
}

.numData .f32 {
  font-size: 3.2rem;
}

.numData .f26 {
  font-size: 2.6rem;
}

.numData .en {
  font-family: var(--en);
  font-weight: 400;
}

.numNote {
  text-align: right;
  font-size: 1.4rem;
  font-weight: 400;
}

.numClm {
  display: flex;
}


/* box01 */
.numBox.box01 .numImg {
  width: 80%;
  margin: 4rem auto 1.5rem 6%;
}

/* box02 */
.numBox.box02 .numClm {
  justify-content: space-between;
}

.numBox.box02 .numItem {
  width: 45.5%;
}

.numBox.box02 .numItem .numClm {
  justify-content: center;
  gap: 10%;
}

.numBox.box02 .numItem {
  text-align: center;
  font-weight: 400;
}

.numBox.box02 .numItem .bl {
  color: #00aef7;
}

.numBox.box02 .numItem .or {
  color: var(--color-orange02);
}

.numBox.box02 .numItem .yw {
  color: #ffa800;
}

.numBox.box02 .numImg {
  margin-top: 1.5rem;
}

/* .numBox.box03 */

.numBox.box03 .numDatattl {
  justify-content: center;
  align-items: center;
  gap: 4rem;
  font-size: 3rem;
  font-weight: 600;
  margin-bottom: 4rem;
}


.numBox.box03 .numItem {
  width: 33.333%;
  border-right: 1px solid #dddddd;
}

.numBox.box03 .numItem:last-of-type {
  border: none;
}

.numBox.box03 .numItem h4 {
  text-align: center;
  font-size: 2.4rem;
  font-weight: 500;
}

.numBox.box03 .numImg_box {
  display: flex;
  align-items: start;
  justify-content: center;
  gap: 3rem;
  text-align: center;
}

.numBox.box03 .numImg_box .numImg {
  height: 10rem;
}

.numBox.box03 .numImg_box .numImg img {
  width: auto;
  max-width: unset;
  height: 100%;
}

.numBox.box03 .numImg_box .numData .unit {
  margin-top: 0.6rem;
}

.numBox.box03 .numNote {
  margin-top: 3rem;
}


/* .numBox.box04 */
.numBox.box04 {
  padding-bottom: 4rem;
}

.numBox.box04 .numClm {
  justify-content: center;
  gap: 13.5%;
}

.numBox.box04 .numImg {
  width: 31rem;
}

.numBox.box04 ul li {
  position: relative;
  font-size: 2rem;
  font-weight: 500;
  padding-left: 5.6rem;
}

.numBox.box04 ul li::before {
  position: absolute;
  content: "";
  width: 2.8rem;
  height: 2.8rem;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  background: var(--color-primary);
}

.numBox.box04 ul li:nth-child(2)::before {
  background: #ff5a00;
}

.numBox.box04 ul li:nth-child(3)::before {
  background: #00aef7;
}

.numBox.box04 ul li:nth-child(4)::before {
  background: #0cbc99;
}

.numBox.box04 ul li:nth-child(5)::before {
  background: #ffa800;
}

/* .numBox.box05 */
.numBox.box05 {
  padding-bottom: 6rem;
}

.numBox.box05 .numImg {
  width: 90.7rem;
  margin-left: 12%;
}

/* features */
.features {
  padding-top: 11rem;
}

.features .numTtl {
  font-size: 2rem;
  margin-bottom: 0;
}

.features .numSubTtl {
  text-align: center;
  font-size: 2.6rem;
  font-weight: 400;
  line-height: 1.46;
  margin-bottom: 3rem;
  margin-top: 5.6rem;
}

.features .numSubTtl:has(br) {
  margin-top: 2.6rem;
  margin-bottom: 1.8rem;
}

.features .numTtl::before {
  top: 1.6rem;
}

.features .numImg {
  height: 9rem;
  margin: 4rem auto 3rem;
}

.features .numImg img {
  width: auto;
  max-width: unset;
  height: 100%;
  margin: 0 auto;
}

.features .box09 .numImg {
  height: 13.6rem;
  margin-top: 1rem;
}

@media screen and (max-width:767px) {
  .numList {
    margin-top: 6rem;
    grid-template-columns: repeat(1, 1fr);
    gap: 3rem 0;
  }

  .numBox.col1,
  .numBox.col2,
  .numBox.col3 {
    grid-column: span 3;
    padding: 3.2rem 2rem;
  }

  .numTtl {
    font-size: 2rem;
    margin-bottom: 3.6rem;
    padding-left: 2.4rem;
  }

  .numTtl::before {
    width: 1rem;
    height: 1rem;
    top: 1.2rem;
  }

  .numTtl span {
    font-size: 1.4rem;
  }

  .numData .f100 {
    font-size: 8rem;
  }

  .numData .f80 {
    font-size: 6rem;
  }

  .numData .unit.f80 {
    font-size: 4rem;
  }

  .numData .f50 {
    font-size: 4rem;
  }

  .numData .unit.f50 {
    font-size: 3rem;
  }

  .numData .f30 {
    font-size: 2rem;
  }

  .numData .f26 {
    font-size: 1.8rem;
  }

  .numBox.box02 .numClm {
    flex-wrap: wrap;
    gap: 4rem;
  }

  .numBox.box02 .numItem {
    width: 100%;
  }

  /* .numBox.box03 */
  .numBox.box03 .numDatattl {
    flex-wrap: wrap;
    font-size: 2rem;
  }

  .numBox.box03 .numClm {
    flex-wrap: wrap;
  }

  .numBox.box03 .numItem {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #dddddd;
    padding: 2rem 0;
  }

  .numBox.box03 .numItem h4 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
  }

  /* .numBox.box04 */
  .numBox.box04 .numClm {
    flex-wrap: wrap;
    gap: 4rem;
  }

  .numBox.box04 ul li {
    font-size: 1.8rem;
    padding-left: 3.6rem;
  }

  .numBox.box04 ul li::before {
    width: 1.8rem;
    height: 1.8rem;
  }

  .numBox.box05 .numImg {
    width: 100%;
    margin-left: 0;
  }

  .features .numSubTtl:has(br),
  .features .numSubTtl {
    font-size: 2.2rem;
    margin-bottom: 3rem;
    margin-top: 3rem;
  }
}

/*================================================
* 
================================================*/

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

/*================================================
* 
================================================*/


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

/*================================================
* 
================================================*/

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

/*================================================
* 
================================================*/


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

/*================================================
* 
================================================*/

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

/*================================================
* 
================================================*/


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

/*================================================
 *  footer
 ================================================*/

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