@charset "UTF-8";

.main {
  /* =====================
    MV
  ===================== */
  .u-mv {
    background-image: url('../img/service/mv.png');
  }

  /* =====================
    thought
  ===================== */
  .thought {
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url('../img/service/thought_bg.png');
    inline-size: 100%;
    min-block-size: 678px;

    @media (width <= 768px) {
      min-block-size: unset;
      padding-block: calc((100 / 390) * 64 * 1vw);
    }

    .u-inner {
      padding-inline: 270px;

      @media (width <= 768px) {
        padding-inline: calc((100 / 390) * 16 * 1vw);
      }

      .wrap {
        block-size: inherit;
        background-color: #fff;
        padding-block-start: 100px;
        padding-block-end: 113px;

        @media (width <= 768px) {
          padding-inline: calc((100 / 390) * 16 * 1vw);
          padding-block-start: calc((100 / 390) * 64 * 1vw);
          padding-block-end: calc((100 / 390) * 64 * 1vw);
        }

        .u-content-catch {
          text-align: center;
          margin-block-start: 35px;

          @media (width <= 768px) {
            margin-block-start: calc((100 / 390) * 16 * 1vw);
          }
        }

        .description {
          text-align: center;
          margin-block-start: 49px;

          @media (width <= 768px) {
            text-align: left;
            margin-block-start: calc((100 / 390) * 16 * 1vw);
          }

          & + .description {
            margin-block-start: 29px;

            @media (width <= 768px) {
              margin-block-start: calc((100 / 390) * 16 * 1vw);
            }
          }
        }
      }
    }
  }

  /* =====================
    service
  ===================== */
  .service {
    position: relative;
    padding-block-start: 106px;
    padding-block-end: 120px;

    @media (width <= 768px) {
      padding-block-start: calc((100 / 390) * 46 * 1vw);
      padding-block-end: calc((100 / 390) * 80 * 1vw);
    }
    .u-inner {
      padding-inline: 80px;

      @media (width <= 768px) {
        padding-inline: calc((100 / 390) * 16 * 1vw);
      }

      .wrap {
        display: block grid;
        justify-content: space-between;
        column-gap: 62px;

        @media (width <= 768px) {
          column-gap: 0;
        }

        .u-h2-title {
          grid-area: 1/1/2/2;
        }

        .img {
          grid-area: 2/1/3/2;
          margin-block-start: 53px;
          margin-inline-start: 56px;

          @media (width <= 768px) {
            grid-area: 2/1/3/2;
            margin-block-start: calc((100 / 390) * 16 * 1vw);
            margin-inline: auto;
            inline-size: 100%;
          }
        }

        .list {
          grid-area: 1/2/3/3;
          margin-block-start: 119px;

          @media (width <= 768px) {
            grid-area: 3/1/4/2;
            margin-block-start: calc((100 / 390) * 32 * 1vw);
          }

          .item {
            & h3.title {
              font-size: 20px;
              font-weight: 500;
              color: var(--primary);

              @media (width <= 768px) {
                font-size: calc((100 / 390) * 20 * 1vw);
              }

              .block_title {
                display: inline-block;
                inline-size: 200px;
                padding-inline: 29px;
                border-radius: 5px;
                background-color: #0069a8;
                color: #fff;
                text-align: center;
                margin-inline-end: 27px;

                @media (width <= 768px) {
                  display: block flow;
                  inline-size: calc((100 / 390) * 200 * 1vw);
                  padding-inline: calc((100 / 390) * 29 * 1vw);
                  margin-inline-end: 0;
                }
              }
            }

            .description {
              margin-block-start: 8px;

              @media (width <= 768px) {
                margin-block-start: calc((100 / 390) * 8 * 1vw);
              }
            }

            & + .item {
              margin-block-start: 32px;

              @media (width <= 768px) {
                margin-block-start: calc((100 / 390) * 32 * 1vw);
              }
            }

            &[data-id='2'] {
              & h3.title {
                .block_title {
                  background-color: #3f9ccf;
                }
              }
            }

            &[data-id='3'] {
              & h3.title {
                .block_title {
                  background-color: #92c8e2;
                }
              }
            }
          }
        }
      }
    }
  }

  /* =====================
    service_list
  ===================== */
  .service_list {
    position: relative;
    padding-block-start: 112px;
    padding-block-end: 112px;

    @media (width <= 768px) {
      padding-block-start: calc((100 / 390) * 48 * 1vw);
      padding-block-end: calc((100 / 390) * 48 * 1vw);
    }
    .u-inner {
      padding-inline: 80px;

      @media (width <= 768px) {
        padding-inline: calc((100 / 390) * 16 * 1vw);
      }

      .list {
        .item {
          background-color: #fff;
          display: block grid;
          grid-template-columns: 380px auto;
          align-items: center;
          column-gap: 56px;
          padding-inline: 40px;
          padding-block: 48px;
          border-radius: 10px;

          @media (width <= 768px) {
            display: block flex;
            flex-direction: column-reverse;
            column-gap: 0;
            row-gap: calc((100 / 390) * 32 * 1vw);
            padding-inline: calc((100 / 390) * 16 * 1vw);
            padding-block: calc((100 / 390) * 32 * 1vw);
          }

          & + .item {
            margin-block-start: 40px;

            @media (width <= 768px) {
              margin-block-start: calc((100 / 390) * 40 * 1vw);
            }
          }

          .img {
            border-radius: 10px;

            @media (width <= 768px) {
              border-radius: calc((100 / 390) * 10 * 1vw);
              inline-size: 100%;
            }
          }

          .u-h2-title[data-size='small'] {
            grid-template-columns: 1fr;
            grid-template-rows: max-content max-content;
            align-items: baseline;
            justify-content: space-between;
            gap: 10px;
            padding-bottom: 14px;

            @media (width <= 768px) {
              display: block flex;
              flex-direction: column;
              gap: calc((100 / 390) * 10 * 1vw);
              padding-bottom: calc((100 / 390) * 14 * 1vw);
            }
          }

          .content-catch {
            font-size: 20px;
            font-weight: 500;
            color: var(--primary);
            margin-block-start: 16px;

            @media (width <= 768px) {
              font-size: calc((100 / 390) * 20 * 1vw);
              margin-block-start: calc((100 / 390) * 16 * 1vw);
            }
          }

          .description {
            margin-block-start: 16px;

            @media (width <= 768px) {
              margin-block-start: calc((100 / 390) * 16 * 1vw);
            }
          }
        }
      }
    }
  }
}