@charset "UTF-8";

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

    @media (width <= 768px) {
      background-image: url('../img/business/mv_2x.png');
    }
  }

  /* =====================
    commitment
  ===================== */
  .commitment {
    padding-block-start: 113px;
    padding-block-end: 106px;
    background-color: #f8f4ef;

    @media (width <= 768px) {
      padding-block-start: calc((100 / 390) * 65 * 1vw);
      padding-block-end: calc((100 / 390) * 63 * 1vw);
    }
    .commitment_wrap {
      display: block flex;
      gap: 56px;

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

          @media (width <= 768px) {
            margin-block-start: calc((100 / 390) * 32 * 1vw);
          }
          & + .description {
            margin-block-start: 1.9em;
          }
        }
      }
      .picture {
        display: block flow;
        flex-shrink: 0;
      }
    }

    .point {
      margin-inline: 40px;
      border-radius: 10px;
      background-color: #fff;
      padding-inline: 40px;
      padding-block: 95px;
      margin-block-start: 80px;

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

      .point-list {
        margin-block-start: 56px;
        display: block flex;
        flex-direction: column;
        gap: 40px;
        padding-inline: 60px;

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

        & li {
          display: block flex;
          align-items: center;
          gap: 70px;

          @media (width <= 768px) {
            flex-direction: column;
            background-color: #f8f4ef;
            padding-inline: calc((100 / 390) * 16 * 1vw);
            padding-block: calc((100 / 390) * 16 * 1vw);
            gap: calc((100 / 390) * 16 * 1vw);
          }
          .point-icon {
            inline-size: 100px;
            aspect-ratio: 1/1;
            border-radius: 50rem;
            background-color: #cbb088;
            display: block grid;
            place-content: center;
            flex-shrink: 0;

            @media (width <= 768px) {
              inline-size: calc((100 / 390) * 80 * 1vw);
            }
          }
          @media (width <= 768px) {
            &[data-id='1'] {
              & img {
                inline-size: calc((100 / 390) * 43 * 1vw);
              }
            }
            &[data-id='2'] {
              & img {
                inline-size: calc((100 / 390) * 37 * 1vw);
              }
            }
            &[data-id='3'] {
              & img {
                inline-size: calc((100 / 390) * 31 * 1vw);
              }
            }
            &[data-id='4'] {
              & img {
                inline-size: calc((100 / 390) * 38 * 1vw);
              }
            }
            &[data-id='5'] {
              & img {
                inline-size: calc((100 / 390) * 40 * 1vw);
              }
            }
            &[data-id='6'] {
              & img {
                inline-size: calc((100 / 390) * 48 * 1vw);
              }
            }
          }
        }
      }
    }
  }

  /* =====================
    button_wrap
  ===================== */
  .business_btn_wrap {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url('../img/business/business_bg.png');
    inline-size: 100%;
    padding-block: 72px;

    @media (width <= 768px) {
      padding-block: calc((100 / 390) * 64 * 1vw);
      background-image: url('../img/business/business_bg_2x.png');
    }

    .business_btn_list {
      display: block grid;
      grid-template-columns: repeat(3, 280px);
      gap: 40px;
      justify-content: center;

      @media (width <= 768px) {
        grid-template-columns: 1fr;
        gap: calc((100 / 390) * 16 * 1vw);
      }

      & > li {
        .business_btn {
          display: block grid;
          place-content: center;
          justify-items: center;
          border-radius: 50rem;
          border: solid 2px #559359;
          text-align: center;
          inline-size: 280px;
          aspect-ratio: 1/1;

          &:after {
            content: '';
            display: block flow;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            background-image: url('../img/business/icon_btn-arrow.svg');
            inline-size: 10px;
            block-size: 24px;
            margin-block-start: 32px;
            flex-shrink: 0;
          }

          @media (width <= 768px) {
            inline-size: 100%;
            aspect-ratio: unset;
            grid-template-columns: max-content auto max-content;
            align-items: center;
            justify-content: space-between;
            padding-inline: calc((100 / 390) * 32 * 1vw);
            padding-block: calc((100 / 390) * 17 * 1vw);

            &:after {
              margin-block-start: 0;
              inline-size: calc((100 / 390) * 9 * 1vw);
              block-size: calc((100 / 390) * 23 * 1vw);
            }
          }

          .button_no {
            .title {
              font-family: var(--title);
              font-size: 16px;
              font-weight: 300;
              line-height: 1.2;
              color: #559359;
              text-transform: uppercase;

              @media (width <= 768px) {
                font-size: calc((100 / 390) * 14 * 1vw);
                line-height: 2;
              }
            }
            .number {
              font-family: var(--title);
              font-size: 40px;
              font-weight: 200;
              line-height: 1.2;
              color: #559359;

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

          .btn_title {
            margin-block-start: 12px;

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

            span[lang='en'] {
              font-family: var(--title);
              font-weight: 300;
              line-height: 1.2;
              color: #559359;
              text-transform: uppercase;
              border-bottom: 1px solid #559359;
              padding-bottom: 8px;
              padding-inline: 16px;

              @media (width <= 768px) {
                font-size: calc((100 / 390) * 15 * 1vw);
                padding-bottom: calc((100 / 390) * 4 * 1vw);
                padding-inline: calc((100 / 390) * 16 * 1vw);
              }
            }
            .title {
              font-size: 18px;
              font-weight: 500;
              line-height: 1.2;
              color: #559359;
              margin-block-start: 16px;

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

  /* =====================
    共通
  ===================== */
  .business-title_wrap {
    display: block flex;
    align-items: center;
    gap: 24px;

    @media (width <= 768px) {
      flex-direction: column;
      align-items: start;
      gap: calc((100 / 390) * 16 * 1vw);
    }
    .btn_no {
      inline-size: 126px;
      aspect-ratio: 1/1;
      border-radius: 50rem;
      border: solid 2px #559359;
      display: block grid;
      place-content: center;
      justify-items: center;

      @media (width <= 768px) {
        grid-template-columns: max-content max-content;
        inline-size: calc((100 / 390) * 170 * 1vw);
        aspect-ratio: unset;
        padding-block: calc((100 / 390) * 10 * 1vw);
        column-gap: calc((100 / 390) * 8 * 1vw);
        border-width: 1px;
      }
      .title {
        font-family: var(--title);
        font-weight: 300;
        line-height: 1.7;
        color: #559359;
        text-transform: uppercase;
      }
      .number {
        font-family: var(--title);
        font-size: 40px;
        font-weight: 200;
        line-height: 1;
        color: #559359;

        @media (width <= 768px) {
          font-size: calc((100 / 390) * 24 * 1vw);
        }
      }
    }
  }
  /* ==== wholesale ==== */
  .wholesale {
    background-color: #f1fbef;

    .wholesale-about {
      padding-block-start: 111px;
      padding-block-end: 29px;
      display: block flex;
      column-gap: 132px;

      @media (width <= 768px) {
        flex-direction: column-reverse;
        gap: calc((100 / 390) * 40 * 1vw);
        padding-block-start: calc((100 / 390) * 64 * 1vw);
        padding-block-end: calc((100 / 390) * 29 * 1vw);
      }

      .description_wrap {
        margin-block-start: 48px;

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

        .description + .description {
          margin-block-start: 1.8em;
        }
      }
      .picture {
        display: block flow;
        flex-shrink: 0;

        @media (width <= 768px) {
          & img {
            inline-size: calc((100 / 390) * 358 * 1vw);
          }
        }
      }
    }
    .wholesale-map {
      padding-block-start: 40px;
      padding-block-end: 109px;
      display: block flex;
      gap: 80px;

      @media (width <= 768px) {
        padding-block-start: calc((100 / 390) * 11 * 1vw);
        padding-block-end: calc((100 / 390) * 64 * 1vw);
        flex-direction: column;
        gap: calc((100 / 390) * 32 * 1vw);
      }

      .picture {
        display: block flow;
        flex-shrink: 0;

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

      .wrap {
        padding-inline-end: 72px;

        @media (width <= 768px) {
          padding-inline-end: 0;
        }
        .u-line-title {
          inline-size: 450px;
          margin-block-start: 8px;

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

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

          .cube-title {
            font-size: 20px;
            &::before {
              inline-size: 16px;
              block-size: 16px;
            }

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

            @media (width <= 768px) {
              margin-block-start: calc((100 / 390) * 8 * 1vw);
            }
          }
        }
        /* ご注文・お問い合わせはこちら */
        .wholesale-contact {
          border-radius: 10px;
          background-color: #fff;
          margin-block-start: 96px;
          padding-block-end: 24px;

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

          & > .title {
            font-size: 20px;
            font-weight: 500;
            color: #fff;
            background-color: var(--primary);
            border-radius: 10px 10px 0 0;
            text-align: center;
            padding-block: 19px;

            @media (width <= 768px) {
              font-size: calc((100 / 390) * 16 * 1vw);
              padding-block: calc((100 / 390) * 13 * 1vw);
              border-radius: calc((100 / 390) * 10 * 1vw) calc((100 / 390) * 10 * 1vw) 0 0;
            }
          }
          & > ul {
            inline-size: fit-content;
            margin-inline: auto;
            padding-block: 24px 12px;

            @media (width <= 768px) {
              padding-block: calc((100 / 390) * 16 * 1vw) calc((100 / 390) * 12 * 1vw);
            }
            .number_wrap {
              display: block grid;
              grid-template-columns: 60px 60px 1fr;
              align-items: center;

              @media (width <= 768px) {
                grid-template-columns: calc((100 / 390) * 40 * 1vw) calc((100 / 390) * 52 * 1vw) 1fr;
              }
              .title {
                display: inline-block;
                font-size: 24px;
                font-weight: 600;
                line-height: 1.5;

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

                @media (width <= 768px) {
                  width: calc((100 / 390) * 20 * 1vw);
                  height: calc((100 / 390) * 20 * 1vw);
                }
              }
              .number {
                display: inline-block;
                font-size: 32px;
                font-weight: 600;
                line-height: 1.5;

                @media (width <= 768px) {
                  font-size: calc((100 / 390) * 24 * 1vw);
                }
              }
            }
          }
          .ex {
            text-align: center;

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

  /* ==== EXPORT ==== */
  .export {
    padding-block: 112px 139px;

    @media (width <= 768px) {
      padding-block: calc((100 / 390) * 63 * 1vw) calc((100 / 390) * 64 * 1vw);
    }
    .u-inner {
      display: block flex;
      gap: 133px;

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

      .picture {
        display: block flow;
        flex-shrink: 0;

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

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

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

  /* ==== supermarket ==== */
  .supermarket {
    padding-block: 113px;
    background-color: #f1fbef;

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

    .supermarket-about {
      display: block flex;
      column-gap: 132px;

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

      .wrap {
        .description_wrap {
          margin-block-start: 48px;
          inline-size: 523px;

          @media (width <= 768px) {
            inline-size: 100%;
            margin-block-start: calc((100 / 390) * 32 * 1vw);
          }
          .description + .description {
            margin-block-start: 1.8em;
          }
        }

        .img_wrap {
          display: block flex;
          gap: 23px;
          margin-block-start: 55px;

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

          .picture {
            display: block flow;
            flex-shrink: 0;

            @media (width <= 768px) {
              & > img {
                inline-size: calc((100 / 390) * 175 * 1vw);
              }
            }
          }
        }
      }
      & > .picture {
        position: relative;
        display: block flow;
        flex-shrink: 0;

        &::after {
          content: '';
          display: block flow;
          background-repeat: no-repeat;
          background-size: contain;
          background-position: center;
          background-image: url('../img/business/supermarket_logo.png');
          inline-size: 274px;
          block-size: 126px;
          position: absolute;
          bottom: -42px;
          right: 50%;
          transform: translateX(50%);
        }

        @media (width <= 768px) {
          & > img {
            inline-size: calc((100 / 390) * 358 * 1vw);
          }
          &:after {
            display: none;
          }
        }
      }
    }

    /* 取り扱い商品 */
    .all-item {
      margin-block-start: 88px;
      padding-inline: 40px;

      @media (width <= 768px) {
        margin-block-start: calc((100 / 390) * 40 * 1vw);
        padding-inline: 0;
      }
      /* おすすめ */
      .recommend {
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        background-image: url('../img/business/recommend_bg.png');
        inline-size: 100%;
        border-radius: 10px;
        padding-inline: 80px;
        padding-block: 56px;
        margin-block-start: 40px;

        @media (width <= 768px) {
          background-image: url('../img/business/recommend_bg_2x.png');
          border-radius: calc((100 / 390) * 10 * 1vw);
          padding-inline: calc((100 / 390) * 16 * 1vw);
          padding-block: calc((100 / 390) * 32 * 1vw) calc((100 / 390) * 28 * 1vw);
          margin-block-start: calc((100 / 390) * 32 * 1vw);
        }

        & h4.title {
          font-size: 24px;
          font-weight: 600;
          color: #559359;

          @media (width <= 768px) {
            font-size: calc((100 / 390) * 16 * 1vw);
          }
        }
        & > ul {
          margin-block-start: 32px;
          display: block grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 20px;

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

          & > li {
            & h5.title {
              font-weight: 500;
              text-align: center;
              color: #332727;
              margin-block-start: 16px;

              @media (width <= 768px) {
                font-size: calc((100 / 390) * 14 * 1vw);
                margin-block-start: calc((100 / 390) * 4 * 1vw);
              }
            }
          }
        }
      }
      /* 商品一覧 */
      .item {
        margin-block-start: 40px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        background-image: url('../img/business/item_bg.png');
        inline-size: 100%;
        border-radius: 10px;
        padding-inline: 80px;
        padding-block: 56px;

        @media (width <= 768px) {
          background-image: url('../img/business/item_bg_2x.png');
          border-radius: calc((100 / 390) * 10 * 1vw);
          padding-inline: calc((100 / 390) * 16 * 1vw);
          padding-block: calc((100 / 390) * 32 * 1vw);
          margin-block-start: calc((100 / 390) * 32 * 1vw);
        }

        & h4.title {
          font-size: 24px;
          font-weight: 600;
          color: #559359;

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

        & > ul {
          display: block grid;
          grid-template-columns: repeat(6, 1fr);
          margin-block-start: 32px;
          border-bottom: 1px solid #fff;

          @media (width <= 768px) {
            grid-template-columns: repeat(3, 1fr);
            margin-block-start: calc((100 / 390) * 32 * 1vw);
            font-size: calc((100 / 390) * 14 * 1vw);
            line-height: 1.4;
          }
          .u-cube {
            padding-block: 15.5px;
            border-top: solid 1px #fff;

            @media (width <= 768px) {
              padding-block: calc((100 / 390) * 7.8 * 1vw);
              gap: calc((100 / 390) * 4 * 1vw);

              &:before {
                inline-size: calc((100 / 390) * 8 * 1vw);
                block-size: calc((100 / 390) * 8 * 1vw);
              }
            }
          }
          .column-2 {
            grid-column: span 2;

            @media (width <= 768px) {
              grid-column: span 3;
              padding-block: calc((100 / 390) * 15.5 * 1vw);
            }
          }
        }
      }
    }

    /* アクセス */
    .supermarket-access {
      margin-block-start: 88px;
      padding-inline: 40px;

      @media (width <= 768px) {
        padding-inline: 0;
        margin-block-start: calc((100 / 390) * 40 * 1vw);
      }
      .access_wrap {
        display: block flex;
        gap: 55px;
        margin-block-start: 36px;

        @media (width <= 768px) {
          flex-direction: column;
          gap: calc((100 / 390) * 36 * 1vw);
          margin-block-start: calc((100 / 390) * 36 * 1vw);
        }
        & iframe {
          inline-size: 600px;
          aspect-ratio: 600/400;

          @media (width <= 768px) {
            inline-size: calc((100 / 390) * 358 * 1vw);
            block-size: calc((100 / 390) * 200 * 1vw);
          }
        }
        .access_unit {
          & h3.title {
            font-size: 24px;
            color: #282828;

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

            @media (width <= 768px) {
              margin-block-start: calc((100 / 390) * 16 * 1vw);
            }
            .tr {
              display: block grid;
              grid-template-columns: 120px 1fr;
              margin-block-start: 16px;

              @media (width <= 768px) {
                grid-template-columns: calc((100 / 390) * 80 * 1vw) 1fr;
                margin-block-start: calc((100 / 390) * 16 * 1vw);
              }
              & dt {
                color: #282828;
              }
              & dd {
                color: #282828;

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

                .map-link {
                  margin-block-start: 24px;

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

                  .u-arrow {
                    &::after {
                      mask-image: var(--icon-link);
                      inline-size: 16px;
                      aspect-ratio: 1 / 1;
                    }
                    @media (width <= 768px) {
                      font-size: calc((100 / 390) * 15 * 1vw);
                      &::after {
                        inline-size: calc((100 / 390) * 16 * 1vw);
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}