@charset "utf-8";
/* CSS Document */
.pagevisual {
  background: url("../img/page_visual.webp")no-repeat center;
  background-size: cover;
}
/* number */
.number {
  background: #ECEEEE;
  margin-top: 80px;
}
.num_inner {
  max-width: 1024px;
  margin: 0 auto;
  padding: 50px 0 140px;
  display: flex;
  flex-direction: column;
  gap: 80px;
}
.card_outer .card {
  .title {
    font-size: 3.2rem;
    font-weight: bold;
    letter-spacing: 2.56px;
  }
}
/* box_01 */
.box_01 {
  h2 {
    font-size: 2.4rem;
    font-weight: bold;
    color: #0959E2;
    line-height: 1;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid #0959E2;
  }
  .card_outer {
    min-height: 540px;
    display: flex;
    justify-content: center;
    gap: 20px;
    .card {
      background: #fff;
      border: 1px solid #0959E2;
    }
    /* card_01 */
    .card_01 {
      max-width: 589px;
      width: 100%;
      padding: 32px 60px;
      position: relative;
      .icon_01 {
        position: absolute;
        top: 32px;
        right: 188px;
      }
      .icon_02 {
        position: absolute;
        bottom: 0;
        right: 20px;
      }
      .card_inner {
        margin-top: 60px;

        .number_text {
          font-size: 2.4rem;
          font-weight: bold;
          line-height: 1;
          span {
            font-size: 17rem;
            height: 17rem;
            font-style: italic;
            font-weight: bolder;
            display: inline-block;
            color: #0B58E1;
            margin-right: 20px;
          }
        }

        .text {
          font-size: 2rem;
          font-weight: bold;
          line-height: 1.3;
          letter-spacing: 1.92px;
          text-align: left;
          margin-top: 70px;
        }
      }
    }

    /* card_02 */
    .card_02 {
      max-width: 415px;
      width: 100%;
      padding: 28px 46px;
      position: relative;
      .icon_03 {
        position: absolute;
        top: 24px;
        right: 22px;
      }
      .title {
        font-size: 2.4rem;
      }
      .card_inner {
        margin: 20px auto 0;
        max-width: 324px;
        display: flex;
        flex-direction: column;
        gap: 30px;

        .list{
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 50px;
          .list_left {
            .list_title {
              font-size: 2rem;
              font-weight: bold;
              line-height: 1.6;
              position: relative;
            }
          }
          .list_right .number_text {
            font-size: 2.4rem;
            font-weight: bold;
            position: relative;
            span {
              font-size: 6rem;
              font-style: italic;
              font-weight: bolder;
              display: inline-block;
              color: #0B58E1;
              margin-right: 10px;
            }
          }

          .list_right .number_text::after {
            content:"";
            display: block;
            height: 2px;
            background-color: #000;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
          }
          &:nth-child(1) .list_right .number_text::after {
            width: 32px;
            left: -44px;
          }
          &:nth-child(2) .list_right .number_text::after {
            width: 32px;
            left: -44px;
          }
          &:nth-child(3) .list_right .number_text::after {
            width: 60px;
            left: -72px;
          }
          &:nth-child(4) .list_right .number_text::after {
            width: 60px;
            left: -72px;
          }
          &:nth-child(5) .list_right .number_text::after {
            width: 60px;
            left: -72px;
          }
        }
      }
    }
  }
}

/* box_02 */
.box_02 {
  h2 {
    font-size: 2.4rem;
    font-weight: bold;
    color: #25B8FB;
    line-height: 1;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid #25B8FB;
  }
  .card_outer {
    min-height: 408px;
    display: flex;
    justify-content: center;
    gap: 20px;
    .card {
      background: #fff;
      border: 1px solid #25B8FB;
    }
    /* card_03 */
    .card_03 {
      max-width: 585px;
      width: 100%;
      padding: 32px 60px 90px;
      position: relative;
      .icon_04 {
        position: absolute;
        top: 31px;
        right: 45px;
      }
      .card_inner {
        margin-top: 30px;
        .number_box:not(:first-child) {
          margin-top: 50px;
        }
        .number_title {
          font-size: 2.4rem;
          font-weight: bold;
          letter-spacing: 1.92px;
        }
        .number_text {
          font-size: 2.4rem;
          font-weight: bold;
          line-height: 1;
          text-align: center;
          span {
            font-size: 17rem;
            height: 17rem;
            font-style: italic;
            font-weight: bolder;
            display: inline-block;
            color: #25B8FB;
            margin-right: 20px;
          }
        }
      }
    }

    /* card_04 */
    .card_04 {
      max-width: 419px;
      width: 100%;
      padding: 32px 32px 90px;
      position: relative;
      .icon_05 {
        position: absolute;
        top: 52px;
        right: 42px;
      }
      .card_inner {
        margin-top: 80px;

        .number_title {
          font-size: 2.4rem;
          font-weight: bold;
          letter-spacing: 1.92px;
        }
        .number_text {
          font-size: 2.4rem;
          font-weight: bold;
          line-height: 1;
          text-align: center;
          &:not(:first-child) {
            margin-top: 20px;
          }
          span {
            font-size: 17rem;
            height: 17rem;
            font-style: italic;
            font-weight: bolder;
            display: inline-block;
            color: #25B8FB;
            margin: 0 10px;
            .fs_8 {
              font-size: 8rem;
            }
          }
        }
      }
    }
  }
}

/* box_03 */
.box_03 {
  h2 {
    font-size: 2.4rem;
    font-weight: bold;
    color: #063380;
    line-height: 1;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid #063380;
  }
  .flex_card_outer {
    display: flex;
    justify-content: center;
    gap: 20px;
  }
  .row_card_01 {
    max-width: 415px;
    width: 100%;
    .card_outer {
      display: flex;
      flex-direction: column;
      gap: 18px;
    }
  }
  .row_card_02 {
    width: 100%;
    .card_outer {
      width: 100%;
    }
  }
  .row_card_03 {
    width: 100%;
    .card_outer {
      width: 100%;
    }
  }
  .card_outer {
    .card {
      background: #fff;
      border: 1px solid #063380;
    }
    /* card_05 */
    .card_05 {
      min-height: 304px;
      width: 100%;
      padding: 32px 32px 40px;
      position: relative;
      .icon_06 {
        position: absolute;
        top: 28px;
        right: 32px;
      }
      .card_inner {

        .number_title {
          font-size: 2.4rem;
          font-weight: bold;
          letter-spacing: 1.92px;
        }
        .number_text {
          font-size: 2.4rem;
          font-weight: bold;
          line-height: 1;
          text-align: center;
          span {
            font-size: 17rem;
            height: 17rem;
            font-style: italic;
            font-weight: bolder;
            display: inline-block;
            color: #063380;
            margin-right: 20px;
          }
        }
      }
    }

    /* card_06 */
    .card_06 {
      min-height: 304px;
      width: 100%;
      padding: 32px 32px 40px;
      position: relative;
      .icon_07 {
        position: absolute;
        top: 38px;
        right: 30px;
      }
      .card_inner {

        .number_title {
          font-size: 2.4rem;
          font-weight: bold;
          letter-spacing: 1.92px;
        }
        .number_text {
          font-size: 2.4rem;
          font-weight: bold;
          line-height: 1;
          text-align: center;
          span {
            font-size: 17rem;
            height: 17rem;
            font-style: italic;
            font-weight: bolder;
            display: inline-block;
            color: #063380;
            margin-right: 20px;
          }
        }
      }
    }

    /* card_07 */
    .card_07 {
      height: 100%;
      width: 100%;
      min-height: 634px;
      max-width: 589px;
      padding: 32px 32px 40px;
      .card_inner {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        .icon_08 {
          margin-top: 40px;
        }
        .number_text {
          font-size: 2.4rem;
          font-weight: bold;
          line-height: 1;
          text-align: center;
          span {
            font-size: 9rem;
            height: 9rem;
            font-style: italic;
            font-weight: bolder;
            display: inline-block;
            color: #063380;
            margin-right: 10px;
          }
        }
        .number_text01 {
          position: absolute;
          top: -10px;
          left: 0;
        }
        .number_text02 {
          position: absolute;
          top: -10px;
          right: 0;
        }
        .number_text03 {
          position: absolute;
          bottom: 0;
          left: 0;
        }
        .number_text04 {
          position: absolute;
          bottom: 0;
          right: 0;
        }
      }
    }

    /* card_08 */
    .card_08 {
      margin-top: 32px;
      padding: 30px 32px 158px;
      position: relative;
      .card_inner {
        text-align: center;
        .number_textbox {
          .number_text {
            font-size: 2.4rem;
            font-weight: bold;
            line-height: 1;
            text-align: center;
            display: inline-block;
            span {
              font-size: 9rem;
              height: 9rem;
              font-style: italic;
              font-weight: bolder;
              display: inline-block;
              color: #063380;
              margin-right: 10px;
            }
          }
          .number_text01 {
            position: absolute;
            bottom: 56px;
            left: 120px;
          }
          .number_text02 {
            position: absolute;
            bottom: 56px;
            left: 290px;
          }
          .number_text03 {
            position: absolute;
            bottom: 56px;
            right: 290px;
          }
          .number_text04 {
            position: absolute;
            bottom: 56px;
            right: 60px;
          }
        }
      }
    }
  }
}
.entry {
  margin-top: 0;
}
@media screen and (max-width: 767px) {
  .num_inner {
    padding: 50px 5%;
  }
  .box_01 {
    .card_outer {
      flex-direction: column;
      .card_01 {
        max-width: none;
        padding: 20px 8% 120px;
        .icon_01 {
          right: 10px;
          img {
            width: 70%;
          }
        }
        .icon_02 {
          text-align: center;
          right: 50%;
          transform: translateX(50%);
          img {
            width: 70%;
          }
        }
        .card_inner {
          margin-top: 30px;
          .number_text {
            text-align: center;
            span {
              font-size: 8rem;
              height: 8rem;
              margin-right: 10px;
            }
          }
          .text {
            font-size: 1.8rem;
            margin-top: 20px;
          }
        }
      }
      .card_02 {
        max-width: none;
        padding: 20px 8%;
        .card_inner {
          max-width: 270px;
        .list {
          .list_left {
            .list_title {
              font-size: 1.8rem;
              }
            }
            .list_right .number_text {
              font-size: 2rem;
              span {
                font-size: 5rem;
              }
            }
            &:nth-child(1) .list_right .number_text::after {
              width: 20px;
              left: -32px;
            }
            &:nth-child(2) .list_right .number_text::after {
              width: 20px;
              left: -32px;
            }
            &:nth-child(3) .list_right .number_text::after {
              width: 32px;
              left: -44px;
            }
            &:nth-child(4) .list_right .number_text::after {
              width: 32px;
              left: -44px;
            }
            &:nth-child(5) .list_right .number_text::after {
              width: 32px;
              left: -44px;
            }
          }
        }
      }
    }
  }
  .box_02 {
    .card_outer {
      flex-direction: column;
      .card_03 {
        max-width: none;
        padding: 30px 5%;
        .icon_04 {
          top: 70px;
          right: 12%;
          text-align: end;
          img {
            width:65%;
          }
        }
        .card_inner {
          .number_box:not(:first-child) {
            margin-top: 20px;
          }
          .number_text {
            span {
              font-size: 10rem;
              height: 10rem;
            }
          }
        }
      }
      .card_04 {
        max-width: none;
        padding: 30px 5%;
        .icon_05 {
          top: 60px;
          right: 10%;
          text-align: end;
          img {
            width: 80%;
          }
        }
        .card_inner {
          margin-top: 40px;
          text-align: center;
          .number_text {
            display: inline-block;
            &:not(:first-child) {
              margin-top: 20px;
            }
            span {
              font-size: 10rem;
              height: 10rem;
              margin: 0;
              .fs_8 {
                font-size: 3rem;
                margin: 0 10px;
              }
            }
          }
        }
      }
    }
  }
  .box_03 {
    .flex_card_outer {
      flex-direction: column;
    }
    .card_outer {
      .card_05 {
        max-width: none;
        min-height: auto;
        padding: 20px 5%;
        .icon_06 {
          text-align: end;
          img {
            width: 80%;
          }
        }
        .card_inner {
          .number_text {
            span {
              font-size: 10rem;
              height: 10rem;
            }
          }
        }
      }
      .card_06 {
        max-width: none;
        min-height: auto;
        padding: 20px 5%;
        .icon_07 {
          text-align: end;
          img {
            width: 80%;
          }
        }
        .card_inner {
          .number_text {
            span {
              font-size: 10rem;
              height: 10rem;
            }
          }
        }
      }
      .card_07 {
        max-width: none;
        min-height: auto;
        padding: 20px 5% 50px;
        .card_inner {
          max-width: 320px;
          margin: 0 auto;
          .icon_08 {
            text-align: center;
            img {
              width: 55%;
            }
          }
          .number_text {
            font-size: 2rem;
            span {
              font-size: 6rem;
              height: 6rem;
              margin-right: 6px;
            }
          }
          .number_text01 {
            position: absolute;
            top: -10px;
            left: 0;
          }
          .number_text02 {
            position: absolute;
            top: -10px;
            right: 0;
          }
          .number_text03 {
            position: absolute;
            bottom: -10px;
            left: 0;
          }
          .number_text04 {
            position: absolute;
            bottom: -10px;
            right: 0;
          }
        }
      }
      .card_08 {
        padding: 20px 5% 100px;
        .card_inner {
          max-width: 300px;
          margin: 50px auto 0;
          position: relative;
          .number_textbox {
            .number_text {
              span {
                font-size: 6rem;
                height: 6rem;
              }
            }
            .number_text01 {
              position: absolute;
              bottom: auto;
              top: -50px;
              left: 0;
            }
            .number_text02 {
              position: absolute;
              bottom: -56px;
              left: 60px;
            }
            .number_text03 {
              position: absolute;
              bottom: auto;
              top: -50px;
              right: 20px;
            }
            .number_text04 {
              position: absolute;
              bottom: -56px;
              right: 0;
            }
          }
        }
      }
    }
    .row_card_01 {
      max-width: none;
    }
  }
}
@media print {
  .box_02 , .box_03 {
    display: block;
    break-before: page;
    margin-top: 300px;
  }
  .box_03 {
    & .card_outer {
        & .card_08 {
            & .card_inner {
                & .number_textbox {
                    .number_text {
                        bottom: 0px;
                    }
                }
            }
        }
    }
  }
}