@charset "UTF-8";

/* =====================
  c-local-nav
===================== */
.c-local-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 33px;
  justify-content: center;
  margin-inline: auto;

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

  @media only screen and (width <= 768px) {
    grid-template-columns: repeat(2, 1fr);
    gap: calc((100 / 390) * 16 * 1vw);
    align-items: center;
    justify-content: flex-start;
    padding-inline: calc((100 / 390) * 32 * 1vw);
    margin-inline: unset;
  }

  & button {
    display: block grid;
    gap: 7px;
    place-content: center;
    aspect-ratio: 1 / 1;
    font-size: 24px;
    font-weight: 700;
    color: white;
    text-shadow: 2px 2px 8px rgb(91 91 91 / 50%);
    border-radius: 20px;
    transition: all 250ms ease 0s;

    @media only screen and (width <= 768px) {
      gap: calc((100 / 390) * 2 * 1vw);
      font-size: calc((100 / 390) * 14 * 1vw);
      text-shadow: calc((100 / 390) * 2 * 1vw) calc((100 / 390) * 2 * 1vw) calc((100 / 390) * 8 * 1vw) rgb(91 91 91 / 50%);
      border-radius: calc((100 / 390) * 20 * 1vw);
    }

    &::before,
    &::after {
      display: block flow;
      content: '';
    }

    &::before,
    &::after {
      margin-inline: auto;
      content: '';
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }

    &::after {
      inline-size: 32px;
      aspect-ratio: 1 / 1;
      background-image: url('../img/_common/icon/arrow-circle-white-nofill.svg');
    }

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

  & button[data-id='ecoworld'] {
    background-color: var(--green);
    border: 1px solid var(--green);

    @media (any-hover: hover) {
      &:hover {
        background-color: color-mix(in srgb, var(--green) 80%, var(--black));
      }
    }

    &::before {
      inline-size: 70px;
      block-size: 69px;
      background-image: url('../img/_common/icon/recycle.svg');
    }

    @media only screen and (width <= 768px) {
      &::before {
        inline-size: calc((100 / 390) * 53 * 1vw);
        block-size: calc((100 / 390) * 61 * 1vw);
      }
    }
  }

  & button[data-id='relief'] {
    background-color: var(--yellow);
    border: 1px solid var(--yellow);

    @media (any-hover: hover) {
      &:hover {
        background-color: color-mix(in srgb, var(--yellow) 80%, var(--black));
      }
    }

    &::before {
      inline-size: 70px;
      block-size: 60px;
      background-image: url('../img/_common/icon/box.svg');
    }

    @media only screen and (width <= 768px) {
      &::before {
        inline-size: calc((100 / 390) * 54 * 1vw);
        block-size: calc((100 / 390) * 61 * 1vw);
      }
    }
  }

  & button[data-id='export'] {
    background-color: var(--sky);
    border: 1px solid var(--sky);

    @media (any-hover: hover) {
      &:hover {
        background-color: color-mix(in srgb, var(--sky) 80%, var(--black));
      }
    }

    &::before {
      inline-size: 116px;
      block-size: 60px;
      background-image: url('../img/_common/icon/ship.svg');
    }

    @media only screen and (width <= 768px) {
      &::before {
        inline-size: calc((100 / 390) * 88 * 1vw);
        block-size: calc((100 / 390) * 61 * 1vw);
      }
    }
  }

  & button[data-id='zeronet'] {
    background-color: var(--red);
    border: 1px solid var(--red);

    @media (any-hover: hover) {
      &:hover {
        background-color: color-mix(in srgb, var(--red) 80%, var(--black));
      }
    }

    &::before {
      inline-size: 82px;
      block-size: 60px;
      background-image: url('../img/_common/icon/hammer.svg');
    }

    @media only screen and (width <= 768px) {
      &::before {
        inline-size: calc((100 / 390) * 67 * 1vw);
        block-size: calc((100 / 390) * 61 * 1vw);
      }
    }
  }
}

/* =====================
  c-article
===================== */
.c-article {
  position: relative;
  padding-block: 92px 96px;
  overflow: clip;

  @media only screen and (width <= 768px) {
    padding-block: calc((100 / 390) * 63.2 * 1vw) calc((100 / 390) * 65 * 1vw);
  }

  .u-inner {
    position: relative;

    &::before {
      position: absolute;
      inset-block-start: -172px;
      inset-inline-start: -159px;
      z-index: 7;
      display: block flow;
      inline-size: 420px;
      aspect-ratio: 1 / 1;
      pointer-events: none;
      content: '';
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }

    @media only screen and (width <= 768px) {
      &::before {
        inset-block-start: -26.6vw;
        inset-inline-start: -10.2vw;
        inline-size: calc((100 / 390) * 170 * 1vw);
      }
    }
  }

  &:last-child {
    padding-block-end: 91px;

    @media only screen and (width <= 768px) {
      padding-block-end: 16.3vw;
    }
  }

  .u-hgroup {
    @media only screen and (width <= 768px) {
      margin-inline: auto;
    }
  }
}

/* =====================
  introduction
===================== */
.introduction {
  padding-block: 120px 97px;

  @media only screen and (width <= 768px) {
    padding-block: calc((100 / 390) * 80 * 1vw) calc((100 / 390) * 64 * 1vw);
  }

  /* ==== u-inner ==== */
  .u-inner {
    display: block grid;
    grid-template-columns: 630px auto;
    gap: 105px 43px;
    padding-inline: 40px;

    @media only screen and (width <= 768px) {
      display: block flex;
      flex-direction: column;
      gap: 6.2vw;
      padding-inline: 0;
    }
  }

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

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

  /* ==== body ==== */
  .body {
    grid-area: 1 / 2 / 2 / 3;
    font-size: 18px;
    line-height: 2;
    color: var(--black);

    @media only screen and (width <= 768px) {
      padding-inline: calc((100 / 390) * 16 * 1vw);
      font-size: calc((100 / 390) * 15 * 1vw);
      line-height: 1.8;
    }
  }

  /* ==== c-local-nav  ==== */
  .c-local-nav {
    grid-area: 2 / 1 / 3 / 3;

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

/* =====================
  ecoworld
===================== */
.ecoworld {
  background: #f6fff9;

  /* ==== u-inner ==== */
  .u-inner {
    display: block grid;
    grid-template-columns: 558px auto;
    gap: 39px 73px;
    align-items: flex-start;
    padding-inline: 80px;

    &::before {
      background-image: url('../img/business/top/ecoworld/icon.webp');
    }

    @media only screen and (width <= 768px) {
      display: block flex;
      flex-direction: column;
      gap: 6.1vw;
      padding-inline: calc((100 / 390) * 16 * 1vw);
    }
  }

  /* ==== u-hgroup ==== */
  .u-hgroup {
    grid-area: 1 / 1 / 2 / 2;

    @media (width > 768px) {
      margin-inline-start: 158px;
    }
  }

  /* ==== body ==== */
  .body {
    grid-area: 2 / 1 / 3 / 2;
    font-size: 18px;
    color: var(--black);

    @media only screen and (width <= 768px) {
      padding-inline-end: calc((100 / 390) * 14 * 1vw);
      margin-block-start: calc((100 / 390) * 2 * 1vw);
      font-size: calc((100 / 390) * 15 * 1vw);
    }

    & p {
      line-height: 2;

      @media only screen and (width <= 768px) {
        line-height: 1.8;
      }
    }

    & p + p {
      margin-block-start: 36px;

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

  /* ==== picture ==== */
  .picture {
    grid-area: 1 / 2 / 3 / 3;
    margin-block-start: 7px;

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

  /* ==== marquee ==== */
  .marquee {
    display: block flex;
    grid-area: 3 / 1 / 5 / 3;
    gap: 16px;
    inline-size: 100vw;
    margin-block-start: 18px;
    margin-inline: calc(50% - 50vw);

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

    &::before,
    &::after {
      display: block flow;
      flex-shrink: 0;
      inline-size: 2096px;
      block-size: 160px;
      content: '';
      background-image: url('../img/business/top/ecoworld/02.webp');
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      animation: marquee 200s linear 0s infinite normal none running;
    }

    @media only screen and (width <= 768px) {
      &::before,
      &::after {
        inline-size: calc((100 / 390) * 1528 * 1vw);
        block-size: calc((100 / 390) * 120 * 1vw);
      }
    }
  }

  /* ==== banner ==== */
  .banner {
    grid-area: 5 / 1 / 6 / 3;
    margin-block-start: 17px;
    margin-inline: auto;

    @media only screen and (width <= 768px) {
      padding-inline: calc((100 / 390) * 16.4 * 1vw);
      margin-block-start: 6.5vw;
    }
  }
}

/* =====================
  relief
===================== */
.relief {
  background: #fffdf4;

  /* ==== u-inner ==== */
  .u-inner {
    &::before {
      background-image: url('../img/business/top/relief/icon.webp');
    }

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

  /* ==== section1 ==== */
  & section[data-id='1'] {
    display: block grid;
    grid-template-columns: 558px auto;
    gap: 8px 73px;
    align-items: flex-start;
    padding-inline: 80px;

    @media only screen and (width <= 768px) {
      display: block flex;
      flex-direction: column;
      gap: 6vw;
      padding-inline: 0;
    }

    /* ==== u-hgroup ==== */
    .u-hgroup {
      grid-area: 1 / 1 / 2 / 2;

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

    /* ==== body ==== */
    .body {
      grid-area: 2 / 1 / 3 / 2;
      margin-block: calc((1em - 1lh) / 2);
      font-size: 18px;
      line-height: 2;
      color: var(--black);

      @media only screen and (width <= 768px) {
        padding-inline: calc((100 / 390) * 0 * 1vw);
        margin-block-start: 0;
        font-size: calc((100 / 390) * 15 * 1vw);
        line-height: 1.8;
      }
    }

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

      @media (width > 768px) {
        translate: 0 2px;
      }

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

  /* ==== section2 ==== */
  & section[data-id='2'] {
    display: block grid;
    grid-template-columns: 598px auto;
    gap: 23px 43px;
    align-items: center;
    max-inline-size: 1201px;
    padding-block: 59px 79px;
    padding-inline: 80px;
    margin-block-start: 90px;
    margin-inline: auto;
    background: var(--white);
    border: 2px solid var(--yellow);
    border-radius: 20px;

    @media only screen and (width <= 768px) {
      display: block flex;
      flex-direction: column;
      gap: 3.7vw;
      max-inline-size: unset;
      padding-block: calc((100 / 390) * 35 * 1vw) calc((100 / 390) * 46 * 1vw);
      padding-inline: calc((100 / 390) * 16 * 1vw);
      margin-block-start: calc((100 / 390) * 38 * 1vw);
      border: calc((100 / 390) * 2 * 1vw) solid var(--yellow);
      border-radius: calc((100 / 390) * 20 * 1vw);
    }

    .head {
      grid-area: 1 / 1 / 2 / 3;
      font-size: 32px;
      font-weight: 500;
      color: var(--blue);
      text-align: center;

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

    .body {
      grid-area: 2 / 1 / 3 / 2;
      font-size: 18px;
      line-height: 2;
      color: var(--black);

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

      @media only screen and (width <= 768px) {
        font-size: calc((100 / 390) * 15 * 1vw);
        line-height: 1.8;
        translate: calc((100 / 390) * 2 * -1 * 1vw) calc((100 / 390) * 0 * -1 * 1vw);
      }
    }

    .picture {
      grid-area: 2 / 2 / 3 / 3;
      justify-self: flex-end;

      @media (width > 768px) {
        translate: 2px 1px;
      }

      @media only screen and (width <= 768px) {
        padding-inline: calc((100 / 390) * 14 * 1vw);
        margin-block-start: calc((100 / 390) * 9 * 1vw);
      }
    }
  }

  /* ==== section3 ==== */
  & section[data-id='3'] {
    display: block grid;
    grid-template-columns: 495px 545px;
    align-items: center;
    justify-content: space-between;
    padding-block: 80px 0;
    padding-inline: 67px 80px;

    @media only screen and (width <= 768px) {
      display: block flex;
      flex-direction: column;
      gap: 8vw;
      padding-block: 10.7vw 0;
      padding-inline: 0;
    }

    .head {
      grid-area: 1 / 1 / 2 / 2;

      @media (width > 768px) {
        translate: 13px 0;
      }

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

    .list {
      grid-area: 1 / 2 / 2 / 3;

      @media only screen and (width <= 768px) {
        inline-size: 100%;
      }

      & a {
        display: block grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        padding-block: 15px;
        padding-inline: 40px;
        font-size: 20px;
        line-height: 2;
        color: var(--black);
        border-block-start: 1px solid var(--grey);
        border-block-end: 1px solid transparent;
        transition: background 250ms ease 0s;
        will-change: background;

        @media only screen and (width <= 768px) {
          padding-block: 4.7vw 4.5vw;
          padding-inline: calc((100 / 390) * 16 * 1vw);
          font-size: calc((100 / 390) * 15 * 1vw);
        }

        @media (any-hover: hover) {
          &:hover {
            background: color-mix(in srgb, var(--yellow) 20%, transparent);
          }
        }

        &::after {
          inline-size: 32px;
          aspect-ratio: 1 / 1;
          content: '';
          background-image: url('../img/_common/icon/arrow-circle-blue.svg');
          background-repeat: no-repeat;
          background-position: center;
          background-size: contain;
        }

        @media only screen and (width <= 768px) {
          &::after {
            inline-size: calc((100 / 390) * 28 * 1vw);
          }
        }
      }

      & li:last-child a {
        border-block-end-color: var(--grey);
      }
    }

    .banner {
      grid-area: 2 / 1 / 3 / 3;
      margin-block-start: 80px;
      margin-inline: auto;

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

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

/* =====================
  export
===================== */
.export {
  background: var(--back);

  /* ==== u-inner ==== */
  .u-inner {
    &::before {
      background-image: url('../img/business/top/export/icon.webp');
    }

    display: block grid;
    gap: 67px;
    align-items: flex-start;
    padding-inline: 40px;

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

  /* ==== section1 ==== */
  & section[data-id='1'] {
    display: block grid;
    grid-template-columns: 559px 490px;
    gap: 45px 71px;
    align-items: flex-start;
    padding-inline: 40px;

    @media only screen and (width <= 768px) {
      display: block flex;
      flex-direction: column;
      gap: calc((100 / 390) * 24 * 1vw);
      padding-inline: calc((100 / 390) * 16 * 1vw);
    }

    /* ==== u-hgroup ==== */
    .u-hgroup {
      grid-area: 1 / 1 / 2 / 2;

      @media (width > 768px) {
        margin-inline-start: 157px;
      }
    }

    /* ==== body ==== */
    .body {
      grid-area: 2 / 1 / 3 / 2;
      font-size: 18px;

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

      & p {
        line-height: 2;
        color: var(--black);

        @media only screen and (width <= 768px) {
          line-height: 1.8;
          letter-spacing: calc((100 / 390) * 0.3 * -1 * 1vw);

          & + p {
            letter-spacing: unset;
          }
        }
      }
    }

    /* ==== picture ==== */
    .picture {
      grid-area: 1 / 2 / 3 / 3;
      margin-block-start: 10px;

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

  /* ==== section1 ==== */
  & section[data-id='2'] {
    display: block grid;
    gap: 80px;
    margin-block-start: 1px;

    @media only screen and (width <= 768px) {
      gap: 8.1vw;
      margin-block-start: 0;
    }

    /* ==== flow ==== */
    .flow {
      inline-size: fit-content;
      margin-inline: auto;
      text-align: center;

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

    /* ==== archive ==== */
    .archive {
      inline-size: 100%;
      max-inline-size: 960px;
      padding-block: 53px 43px;
      padding-inline: 70px;
      margin-inline: auto;
      background: white;
      border: 2px solid var(--main);
      border-radius: 20px;

      @media only screen and (width <= 768px) {
        max-inline-size: calc((100 / 390) * 356 * 1vw);
        padding-block: calc((100 / 390) * 3.6 * 1vw) calc((100 / 390) * 35.6 * 1vw);
        padding-inline: calc((100 / 390) * 19 * 1vw);
        margin-inline: auto;
        background: white;
        border: 1px solid var(--main);
        border-radius: calc((100 / 390) * 20 * 1vw);
      }

      & h3 {
        position: relative;
        inline-size: fit-content;
        padding-block-end: 1px;
        padding-inline: 10px;
        font-weight: 500;
        color: var(--black);
        border-block-end: 1px solid currentcolor;

        @media only screen and (width <= 768px) {
          padding-block-end: calc((100 / 390) * 1.2 * 1vw);
          padding-inline: calc((100 / 390) * 10 * 1vw);
          font-size: calc((100 / 390) * 15 * 1vw);
        }
      }

      & picture {
        display: block;
        translate: 83px -4px;

        @media only screen and (width <= 768px) {
          translate: 0 4.2vw;
        }
      }
    }
  }
}

/* =====================
  zeronet
===================== */
.zeronet {
  background: #fff9f9;

  /* ==== u-inner ==== */
  .u-inner {
    &::before {
      background-image: url('../img/business/top/zeronet/icon.webp');
    }

    display: block grid;
    grid-template-columns: 558px auto;
    gap: 15px 73px;
    align-items: flex-start;
    padding-inline: 80px;

    @media only screen and (width <= 768px) {
      display: block flex;
      flex-direction: column;
      gap: 6vw;
      padding-inline: calc((100 / 390) * 16 * 1vw);
    }
  }

  /* ==== u-hgroup ==== */
  .u-hgroup {
    grid-area: 1 / 1 / 2 / 2;

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

  /* ==== body ==== */
  .body {
    grid-area: 2 / 1 / 3 / 2;
    font-size: 18px;
    line-height: 2;
    color: var(--black);

    @media only screen and (width <= 768px) {
      font-size: 15px;
      line-height: 1.8;
      letter-spacing: calc((100 / 390) * 0.3 * -1 * 1vw);
    }
  }

  /* ==== picture ==== */
  .picture {
    grid-area: 1 / 2 / 3 / 3;
    margin-block-start: 5px;

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

  /* ==== marquee ==== */
  .marquee {
    display: block flex;
    grid-area: 3 / 1 / 5 / 3;
    gap: 16px;
    inline-size: 100vw;
    margin-block-start: 66px;
    margin-inline: calc(50% - 50vw);

    @media only screen and (width <= 768px) {
      gap: calc((100 / 390) * 12 * 1vw);
      margin-block-start: 6.3vw;
    }

    &::before,
    &::after {
      display: block flow;
      flex-shrink: 0;
      inline-size: 4032px;
      block-size: 160px;
      content: '';
      background-image: url('../img/business/top/zeronet/02.webp');
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      animation: marquee 200s linear 0s infinite normal none running;
    }

    @media only screen and (width <= 768px) {
      &::before,
      &::after {
        inline-size: calc((100 / 390) * 2936 * 1vw);
        block-size: calc((100 / 390) * 120 * 1vw);
      }
    }
  }

  /* ==== banner ==== */
  .banner {
    grid-area: 5 / 1 / 6 / 3;
    margin-block-start: 40px;
    margin-inline: auto;

    @media only screen and (width <= 768px) {
      margin-block-start: 6.6vw;
    }

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