@charset "UTF-8";

/* =====================
  header active
===================== */
@layer style {
  [data-page='safety'] .header ul {
    --active-anchor: --service;

    &::before {
      opacity: 1;
    }
  }
}

/* =====================
  management
===================== */
.management {
  padding-block: 148px 160px;

  @media (width <=768px) {
    padding-block: var(--nudge-7);
  }

  /* ==== u-inner ==== */
  .u-inner {
    display: block grid;
    gap: 0 50px;
    align-items: start;

    @media (width > 768px) {
      grid-template-columns: auto 448px;
      padding-inline: 80px;
    }

    @media (width <=768px) {
      display: block flex;
      flex-direction: column;
      gap: var(--nudge-3);
    }

    /* ==== u-hgroup ==== */
    .u-hgroup {
      grid-row: 1 / 2;
      grid-column: 1 / 3;

      @media (width > 768px) {
        margin-block-end: -8px;
      }

      @media (width <=768px) {
        margin-block-end: var(--nudge-2);
      }
    }

    /* ==== catch ==== */
    >.catch {
      grid-row: 2 / 3;
      grid-column: 1 / 2;
      align-self: flex-end;
      margin-block-start: 28px;
      font-size: 36px;
      font-weight: 600;
      line-height: 1.5;

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

    /* ==== body ==== */
    >.body {
      grid-row: 3 / 4;
      grid-column: 1 / 2;

      @media (width > 768px) {
        align-self: center;
        margin-block-start: 14px;
      }
    }

    /* ==== >picture ==== */
    .picture {
      grid-row: 2 / 4;
      grid-column: 2 / 3;
      margin-block-start: 80px;
      margin-inline: auto;

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

    /* ==== g-mark ==== */
    .g-mark {
      display: block grid;
      grid-row: 4 / 5;
      grid-column: 1 / 3;
      grid-auto-flow: column;
      gap: 0 29px;
      align-items: flex-start;
      justify-content: start;
      padding-block: 40px 38px;
      padding-inline: 40px;
      margin-block-start: 60px;
      border: 1px solid #afb7bd;
      border-radius: 20px;

      @media (width > 768px) {
        inline-size: 960px;
        margin-inline: auto;
      }

      @media (width <=768px) {
        display: block flex;
        flex-direction: column;
        gap: var(--nudge-2);
        max-inline-size: 98%;
        padding-block: var(--nudge-3);
        padding-inline: var(--nudge-2);
        margin-block-start: 0;
        margin-inline: auto;
        border-radius: calc((100 / 390) * 20 * 1vw);
      }

      /* ==== img ==== */
      img {
        grid-row: 1 / 3;
        grid-column: 1 / 2;

        @media (width <=768px) {
          inline-size: calc((100 / 390) * 120 * 1vw);
          margin-inline: auto;
        }
      }

      /* ==== h3 ==== */
      h3 {
        grid-row: 1 / 2;
        grid-column: 2 / 3;
        margin-block-start: 13px;
        font-size: 30px;
        font-weight: 600;

        @media (width <=768px) {
          margin-block-start: 0;
          margin-inline: auto;
          font-size: calc((100 / 390) * 24 * 1vw);
          text-align: center;
        }
      }

      /* ==== p ==== */
      p {
        grid-row: 2 / 3;
        grid-column: 2 / 3;

        @media (width > 768px) {
          margin-block-start: -3px;
        }
      }
    }

    /* ==== wrapper ==== */
    .wrapper {
      display: block grid;
      grid-row: 5 / 6;
      grid-column: 1 / 3;
      gap: 119px;

      @media (width > 768px) {
        margin-block-start: 119px;
      }

      @media (width <=768px) {
        gap: var(--nudge-6);
        margin-block-start: var(--nudge-3);
      }
    }

    /* ==== .item ==== */
    .item {
      position: relative;
      padding-block-start: 22px;

      @media (width <=768px) {
        padding-block-start: var(--nudge-2);
      }

      &::before,
      &::after {
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 0;
        display: block flow;
        inline-size: 100%;
        block-size: 2px;
        content: '';

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

      &::before {
        background: #e6e6e6;
      }

      &::after {
        inline-size: 40px;
        background: var(--primary);

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

      /* ==== h3 ==== */
      h3 {
        font-family: var(--serif);
        font-size: 26px;
        font-weight: 600;
        color: var(--primary);

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

      /* ==== contents ==== */
      .contents {
        display: block grid;

        .section-wrapper {
          display: block grid;
          gap: 40px;
          margin-block-start: 40px;

          @media (width <=768px) {
            gap: var(--nudge-7);
            margin-block-start: var(--nudge-6);
          }
        }

        >p {
          margin-block-start: 38px;
          font-size: 15px;
          color: #111;

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

        section {
          display: block grid;
          gap: 20px;

          @media (width <=768px) {
            gap: var(--nudge-2);
          }

          .in-wrap {
            display: block grid;
            gap: 21px;

            @media (width <=768px) {
              gap: var(--nudge-4);
            }

            section {
              h5 {
                position: relative;
                padding-inline-start: 32px;
                font-size: 16px;
                font-weight: 700;

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

                  br {
                    display: none;
                  }
                }

                span:first-child {
                  position: absolute;
                  inset-block-start: 0;
                  inset-inline-start: 0;
                }
              }

              ol {
                margin-inline-start: 31px;

                @media (width <=768px) {
                  margin-inline-start: 6.9vw;
                }
              }
            }
          }
        }

        h4 {
          padding-block-end: 3px;
          font-size: 19px;
          font-weight: 700;
          color: var(--primary);
          border-block-end: 1px solid rgb(207 207 207 / 100%);

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

            br {
              display: none;
            }
          }
        }

        ul {
          display: block grid;
          gap: 20.3px;
          font-size: 15px;
          color: #111;

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

          li {
            position: relative;
            padding-inline-start: 23px;

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

            &::before {
              position: absolute;
              inset-block-start: 11.9px;
              inset-inline-start: 9.5px;
              inline-size: 3.75px;
              aspect-ratio: 3.75 / 4.05;
              content: '';
              background: currentcolor;
              border-radius: calc(infinity * 1px);

              @media (width <=768px) {
                inset-block-start: calc((100 / 390) * 11.9 * 1vw);
                inset-inline-start: calc((100 / 390) * 9.5 * 1vw);
                inline-size: calc((100 / 390) * 3.75 * 1vw);
              }
            }
          }
        }

        ol {
          display: block grid;
          gap: 20.3px;
          font-size: 15px;
          color: #111;

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

          li {
            position: relative;
            padding-inline-start: 14px;

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

            span:first-child {
              position: absolute;
              inset-block-start: 0;
              inset-inline-start: 0;
            }
          }
        }

        /* ==== unit ==== */
        .unit {
          padding-block: 39px 40.3px;
          padding-inline: 45px;
          margin-block-start: 38px;
          margin-inline: auto;
          font-size: 16px;
          color: #000;
          border: 1px solid #afb7bd;
          border-radius: 20px;

          @media (width > 768px) {
            inline-size: 960px;
          }

          @media (width <=768px) {
            inline-size: 100%;
            padding-block: var(--nudge-2);
            padding-inline: var(--nudge-2);
            margin-block-start: var(--nudge-3);
            font-size: calc((100 / 390) * 15 * 1vw);
            border-radius: calc((100 / 390) * 20 * 1vw);
          }

          ol {
            gap: 0;
            font-size: inherit;

            li {
              padding-inline-start: 18px;

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

          &:has(.picture) {
            text-align: center;

            p {
              translate: unset;
            }

            .picture {
              display: block flow;
              margin-block-start: 28px;
            }
          }

          @media (width > 768px) {
            >p {
              translate: -6px 0;
            }
          }
        }

        &:has(> .unit:nth-child(2)) {
          grid-template-columns: repeat(2, 1fr);
          gap: 20px;

          @media (width <=768px) {
            gap: var(--nudge-1);
          }

          @media (width > 768px) {
            max-inline-size: 960px;
            margin-inline: auto;
          }

          .unit {
            inline-size: 100%;
          }
        }
      }
    }

    .item[data-id='1']>p {
      margin-block-start: 40px;
      font-size: 15px;

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

/* =====================
  logistics
===================== */
.logistics {
  padding-block: 148px 160px;
  background: var(--bg2);

  @media (width <=768px) {
    padding-block: var(--nudge-7);
  }

  /* ==== u-inner ==== */
  .u-inner {
    display: block grid;
    gap: 0 80px;
    align-content: center;
    align-items: center;

    @media (width > 768px) {
      padding-inline: 80px;
    }

    @media (width <=768px) {
      display: block flex;
      flex-direction: column;
      gap: var(--nudge-4);
    }
  }

  /* ==== u-hgroup ==== */
  .u-hgroup {
    grid-row: 1 / 2;
    grid-column: 1 / 3;
    margin-block-end: 71px;

    @media (width <=768px) {
      margin-block-end: 0;
    }
  }

  /* ==== .figure ==== */
  .figure {
    grid-row: 2 / 5;
    grid-column: 1 / 2;
  }

  /* ==== catch ==== */
  .catch {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
    margin-block-start: 50px;
    font-size: 30px;
    font-weight: 600;

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

  /* ==== body ==== */
  .body {
    grid-row: 3 / 4;
    grid-column: 2 / 3;
    margin-block-start: 35px;

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

  /* ==== picture ==== */
  .picture {
    grid-row: 5 / 6;
    grid-column: 1 / 3;
    margin-block-start: 80px;
    margin-inline: auto;

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