@charset "UTF-8";

/* =====================
  c-title
===================== */
.c-title {
  position: relative;
  display: block flex;
  gap: 20px;
  align-items: baseline;

  @media (width <= 768px) {
    gap: calc((100 / 390) * 0 * 1vw);
  }

  &::before {
    position: absolute;
    inset-block-start: 10px;
    inset-inline-start: 0;
    inline-size: 8px;
    aspect-ratio: 1 / 1;
    content: '';
    background: var(--primary);
    border-radius: calc(infinity * 1px);
  }

  @media (width <= 768px) {
    &::before {
      inline-size: calc((100 / 390) * 6 * 1vw);
    }
  }

  & h2 {
    padding-inline-start: 10px;
    font-size: 40px;
    font-weight: 500;
    color: var(--text-primary);

    @media (width <= 768px) {
      padding-inline-start: calc((100 / 390) * 10 * 1vw);
      font-size: calc((100 / 390) * 24 * 1vw);
    }
  }

  & span[lang='en'] {
    font-family: var(--yugo);
    font-size: 14px;
    font-weight: 500;
    color: #98afe8;

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

  @media (width <= 768px) {
    flex-direction: column;
  }
}

/* =====================
  c-head
===================== */
.c-head {
  padding-block-end: 5px;
  font-size: 25px;
  font-weight: 700;
  color: var(--text-primary);
  border-bottom: 1px dashed #8b8b8b;

  @media (width <= 768px) {
    padding-block-end: calc((100 / 390) * 6 * 1vw);
    font-size: calc((100 / 390) * 18 * 1vw);
  }
}

/* =====================
  c-list
===================== */
.c-list {
  display: block grid;
  gap: 50px;
  margin-block-start: -9px;
  counter-reset: number;

  @media (width > 768px) {
    padding-block-start: 190px;
  }

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

  & li {
    display: block grid;
    grid-template-rows: auto 1fr;
    gap: 22px;
    counter-increment: number;

    @media (width > 768px) {
      block-size: 35vh;

      &:not(:last-child) {
        block-size: 100vh;
      }
    }

    @media (width <= 768px) {
      gap: calc((100 / 390) * 10 * 1vw);
    }

    & h4 {
      display: block flex;
      gap: 30px;
      align-items: center;
      align-self: flex-start;
      margin-block: calc((1em - 1lh) / 2);
      font-size: 20px;
      font-weight: 500;
      color: #3685bd;

      @media (width <= 768px) {
        gap: calc((100 / 390) * 10 * 1vw);
        align-items: center;
        font-size: calc((100 / 390) * 18 * 1vw);
      }
    }

    & h4::before {
      font-family: var(--title);
      font-size: 30px;
      font-weight: 400;
      content: '0' counter(number);
    }

    @media (width <= 768px) {
      & h4::before {
        display: block grid;
        place-content: center;
        align-items: center;
        inline-size: calc((100 / 390) * 25 * 1vw);
        block-size: calc((100 / 390) * 25 * 1vw);
        aspect-ratio: 1 / 1;
        font-size: calc((100 / 390) * 12 * 1vw);
        color: white;
        background: #3685bd;
        border-radius: calc(infinity * 1px);
      }
    }

    & p {
      align-self: flex-start;
    }
  }
}

/* =====================
  drawings
===================== */
.drawings {
  padding-block: 0 160px;
  margin-block-start: 119px;

  @media (width <= 768px) {
    padding-block: 0 16vw;
    margin-block-start: 16vw;
  }

  /* ==== u-inner ==== */
  .u-inner {
    padding-block-start: 50px;
    border-block-start: 1px solid var(--primary);

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

  /* ==== section1 ==== */
  & section[data-id='1'] {
    display: block grid;
    grid-template-columns: 450px auto;
    gap: 40px 80px;
    align-items: flex-start;
    padding-block: 41px 44px;

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

    /* ==== picture ==== */
    .picture {
      grid-area: 1 / 1 / 4 / 2;

      @media (width <= 768px) {
        block-size: 45vw;
        object-fit: cover;
      }
    }

    /* ==== lead ==== */
    .lead {
      grid-area: 1 / 2 / 2 / 3;
      font-size: 32px;
      font-weight: 400;
      color: var(--text-primary);

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

    /* ==== body ==== */
    .body {
      grid-area: 2 / 2 / 3 / 3;
      font-size: 16px;
      font-weight: 400;
      color: #000;

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

  & section[data-id='2'] {
    /* ==== picture ==== */
    .picture {
      display: block flow;
      max-inline-size: 1115px;
      margin-block-start: 60px;
      margin-inline: auto;

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

/* =====================
  bmi
===================== */
.bmi {
  padding-block: 160px;
  background: white;

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

  /* ==== u-inner ==== */
  .u-inner {
    padding-block-start: 50px;
    border-block-start: 1px solid var(--primary);

    @media (width <= 768px) {
      padding-block-start: 16vw;
    }
  }

  /* ==== head ==== */
  .head {
    display: block grid;
    gap: 4px;
    margin-block-start: 71px;
    font-size: 40px;
    font-weight: 500;
    color: var(--text-primary);
    text-align: center;

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

    & span[lang='en'] {
      display: block grid;
      grid-auto-flow: column;
      gap: 19px;
      justify-content: center;

      @media (width <= 768px) {
        gap: 0.5em;
      }
    }

    & span[lang='en'] > span {
      display: block flow;

      &::first-letter {
        color: #6e6ef8;
      }
    }

    & h2 {
      font-size: 20px;
      font-weight: 400;
      color: var(--text-primary);

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

  /* ==== section1 ==== */
  & section[data-id='1'] {
    display: block grid;
    grid-template-columns: auto 450px;
    gap: 41px 80px;
    margin-block-start: 90px;

    @media (width <= 768px) {
      display: block flex;
      flex-direction: column;
      gap: calc((100 / 390) * 20 * 1vw);
      margin-block-start: calc((100 / 390) * 20 * 1vw);
    }

    /* ==== picture ==== */
    .picture {
      grid-area: 1 / 2 / 4 / 3;

      @media (width <= 768px) {
        block-size: 45vw;
        object-fit: cover;
      }
    }

    /* ==== lead ==== */
    .lead {
      grid-area: 1 / 1 / 2 / 2;
      font-size: 32px;
      font-weight: 400;
      color: var(--text-primary);

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

      @media (width > 768px) {
        & span {
          display: block flow;
        }
      }
    }

    /* ==== body ==== */
    .body {
      grid-area: 2 / 1 / 3 / 2;
      color: #000;

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

  /* ==== section2 ==== */
  & section[data-id='2'] {
    margin-block-start: 114px;

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

    /* ==== contents ==== */
    .contents {
      display: block grid;
      grid-template-columns: 370px auto;
      gap: 80px;
      align-self: center;
      padding-inline: 40px;
      margin-block-start: 60px;

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

      /* ==== picture ==== */
      .picture {
        @media (width > 768px) {
          position: sticky;
          top: 25vh;
          left: 0;
        }

        @media (width <= 768px) {
          block-size: 45vw;
          object-fit: cover;
        }
      }
    }
  }

  /* ==== section3 ==== */
  & section[data-id='3'] {
    margin-block-start: 114px;

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

    /* ==== contents ==== */
    .contents {
      display: block grid;
      grid-template-columns: auto 370px;
      gap: 80px;
      align-self: center;
      padding-inline: 40px;
      margin-block-start: 60px;

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

      /* ==== picture ==== */
      .picture {
        grid-area: 1 / 2 / 2 / 3;

        @media (width > 768px) {
          position: sticky;
          top: 25vh;
          left: 0;
        }

        @media (width <= 768px) {
          block-size: 45vw;
          object-fit: cover;
        }
      }
    }
  }

  /* ==== section4 ==== */
  & section[data-id='4'] {
    margin-block-start: -16px;

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

    /* ==== contents ==== */
    .contents {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 40px;
      align-self: center;
      justify-content: space-between;
      padding-inline: 40px;
      margin-block-start: 60px;

      @media (width <= 768px) {
        display: block flex;
        flex-direction: column;
        padding-inline: 0;
        margin-block-start: calc((100 / 390) * 20 * 1vw);
      }

      /* ==== h4 ==== */
      & h4 {
        display: block flex;
        gap: 9px;
        align-items: center;
        padding-block: 18px;
        padding-inline: 29px;
        font-size: 20px;
        font-weight: 500;
        background: #d1e0eb;
        border-radius: 10px;

        @media (width <= 768px) {
          gap: calc((100 / 390) * 6 * 1vw);
          padding-block: calc((100 / 390) * 7 * 1vw);
          padding-inline: calc((100 / 390) * 16 * 1vw);
          font-size: calc((100 / 390) * 16 * 1vw);
          border-radius: calc((100 / 390) * 5 * 1vw);
        }

        &::before {
          inline-size: 18px;
          block-size: 16px;
          content: '';
          background-image: url('../img/business/list.svg');
          background-repeat: no-repeat;
          background-position: center;
          background-size: contain;
        }

        @media (width <= 768px) {
          &::before {
            inline-size: calc((100 / 390) * 14 * 1vw);
            block-size: calc((100 / 390) * 12 * 1vw);
          }
        }
      }

      /* ==== dl ==== */
      & dl {
        display: block grid;
        grid-template-columns: auto 1fr;
        gap: 8px 52px;
        margin-block-start: 30px;

        @media (width <= 768px) {
          grid-template-columns: 1fr auto;
          gap: calc((100 / 390) * 4 * 1vw) calc((100 / 390) * 52 * 1vw);
          justify-content: start;
          padding-inline: calc((100 / 390) * 8 * 1vw);
          margin-block-start: calc((100 / 390) * 20 * 1vw);
          font-size: calc((100 / 390) * 14 * 1vw);
        }

        /* ==== tr ==== */
        .tr {
          position: relative;
          display: block grid;
          grid-template-columns: subgrid;
          grid-column: 1 / -1;
        }

        @media (width <= 768px) {
          .tr::before {
            position: absolute;
            inset-block-start: 50%;
            inline-size: 100%;
            block-size: 1px;
            content: '';
            background: #111;
            opacity: 0.1;
            translate: 0 -50%;
          }
        }

        /* ==== dt ==== */
        & dt {
          @media (width <= 768px) {
            position: relative;
            z-index: 2;
            inline-size: fit-content;
            padding-inline-end: calc((100 / 390) * 8 * 1vw);
            background: white;
          }
        }

        /* ==== dd ==== */
        & dd {
          display: block flex;
          gap: 2px;
          align-items: center;

          @media (width <= 768px) {
            position: relative;
            z-index: 2;
            gap: calc((100 / 390) * 4 * 1vw);
            padding-inline-start: calc((100 / 390) * 8 * 1vw);
            background: white;
          }
        }

        & dd:where(.down, .up)::before {
          display: block flow;
          inline-size: 10.864px;
          aspect-ratio: 1 / 1;
          content: '';
          background-color: currentcolor;
          mask-image: var(--icon-arrow-down);
          mask-repeat: no-repeat;
          mask-position: center;
          mask-size: contain;
        }

        @media (width <= 768px) {
          & dd:where(.down, .up)::before {
            inline-size: calc((100 / 390) * 10 * 1vw);
          }
        }

        & dd:where(.up)::before {
          inline-size: 11.04px;
          background: #3685bd;
          mask-image: var(--icon-arrow-up);
          translate: 0 2px;
        }

        @media (width <= 768px) {
          & dd:where(.up)::before {
            inline-size: calc((100 / 390) * 10 * 1vw);
            translate: 0 0.1vw;
          }
        }

        /* ==== strong ==== */
        & strong {
          font-weight: 700;
          color: #3685bd;
        }
      }

      /* ==== ul ==== */
      & ul {
        margin-block-start: 30px;

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

  /* ==== section5 ==== */
  & section[data-id='5'] {
    margin-block-start: 114px;

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

    /* ==== picture ==== */
    .picture {
      display: block flow;
      max-inline-size: 1115px;
      margin-block-start: 61px;
      margin-inline: auto;

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

  /* ==== section6 ==== */
  & section[data-id='6'] {
    margin-block-start: 114px;

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

    /* ==== picture ==== */
    .picture {
      display: block flow;
      max-inline-size: 1120px;
      margin-block-start: 61px;
      margin-inline: auto;

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

  /* ==== section7 ==== */
  & section[data-id='7'] {
    margin-block-start: 113px;

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

    /* ==== body ==== */
    .body {
      padding-inline: 40px;
      margin-block-start: 60px;

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

/* =====================
  steel
===================== */
.steel {
  padding-block: 160px 199px;

  @media (width <= 768px) {
    padding-block: 0 24vw;
  }

  /* ==== u-inner ==== */
  .u-inner {
    padding-block-start: 50px;
    border-block-start: 1px solid var(--primary);

    @media (width <= 768px) {
      padding-block-start: 16vw;
    }
  }

  /* ==== section1 ==== */
  & section[data-id='1'] {
    margin-block-start: 40px;

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

    /* ==== unit1 ==== */
    .unit[data-id='1'] {
      display: block grid;
      grid-template-columns: 450px auto;
      gap: 41px 80px;

      @media (width <= 768px) {
        display: block flow;
        gap: calc((100 / 390) * 20 * 1vw);
      }

      /* ==== picture ==== */
      .picture {
        grid-area: 1 / 1 / 4 / 2;

        @media (width <= 768px) {
          block-size: 45vw;
          object-fit: cover;
        }
      }

      /* ==== lead ==== */
      .lead {
        grid-area: 1 / 2 / 2 / 3;
        font-size: 32px;
        font-weight: 400;
        color: var(--text-primary);

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

        & span {
          display: block flow;

          @media (width <= 768px) {
            display: inline;
          }
        }
      }

      /* ==== body ==== */
      .body {
        grid-area: 2 / 2 / 3 / 3;
        font-size: 400;
        color: #000;

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

    /* ==== list ==== */
    .list {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 35px;
      margin-block-start: 80px;

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

      & li {
        display: block grid;
        gap: 12px;

        @media (width <= 768px) {
          gap: calc((100 / 390) * 12 * 1vw);
        }
      }

      & h3 {
        display: block flex;
        gap: 9px;
        align-items: center;
        font-size: 20px;
        font-weight: 500;
        color: #3685bd;

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

        &::before {
          inline-size: 18px;
          block-size: 16px;
          content: '';
          background-image: url('../img/business/list.svg');
          background-repeat: no-repeat;
          background-position: center;
          background-size: contain;
        }

        @media (width <= 768px) {
          &::before {
            inline-size: calc((100 / 390) * 14 * 1vw);
            block-size: calc((100 / 390) * 12 * 1vw);
          }
        }
      }
    }
  }
}