/* pages/foods.css */

body[data-path="/foods/"] {
}

body[data-path="/foods/about/"] {
  .p-supply {
    .c-media-grid {
      margin-block: calc(60 * 1rem / 16);
      @media (width >= 768px) {
        margin-block: 80px;
      }
    }
  }
  .p-partnership {
  }
}

body[data-path="/foods/strength/"] {
  .p-domestic-network {
  }
  .p-global-network {
  }
  .p-original-products {
  }
}

body[data-path="/foods/network/"] {
  .p-office-list {
  }

  .p-office {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(20 * 1rem / 16);
    /* margin-block-start: calc(40 * 1rem / 16); */
    @media (width >= 768px) {
      grid-template-columns: 1fr 50px 1fr;
      grid-template-rows: auto 30px auto 30px auto;
      grid-template-areas:
        "name . products-info"
        ". . products-info"
        "address . products-info"
        ". . products-info"
        "button . products-info";
      gap: unset;
      /* margin-block-start: 50px; */
    }

    .p-office__name {
      @media (width >= 768px) {
        grid-area: name;
      }
    }

    /* .p-office__badge {
      display: grid;
      place-content: center;
      padding-inline: calc(12 * 1rem / 16);
      padding-block: calc(6 * 1rem / 16);
      border-radius: calc(4 * 1rem / 16);
      background-color: var(--color--light-red);
      @media (width >= 768px) {
        padding-inline: 12px;
        padding-block: 6px;
        border-radius: 4px;
      }
    } */

    .p-office__address {
      line-height: 1.8;
      @media (width >= 768px) {
        grid-area: address;
      }
    }

    .p-office__button {
      justify-self: start;
      @media (width >= 768px) {
        grid-area: button;
      }
    }

    .p-office__products-info {
      padding-inline: calc(20 * 1rem / 16);
      padding-block: calc(20 * 1rem / 16);
      @media (width >= 768px) {
        grid-area: products-info;
        align-self: start;
        padding-inline: unset;
        padding-block: 20px;
      }

      & > div {
        @media (width >= 768px) {
          display: flex;
          align-items: center;
        }
      }

      ul {
        display: flex;
        justify-content: center;
        /* padding-inline: calc(15 * 1rem / 16);
        translate: 0 calc(-5 * 1rem / 16); */
        @media (width >= 768px) {
          padding-inline: 15px;
          translate: 0 -5px;
        }
      }

      li {
        display: flex;
        flex-flow: column;
        align-items: center;
        gap: calc(5 * 1rem / 16);
        min-inline-size: calc(110 * 1rem / 16);
        @media (width >= 768px) {
          gap: 5px;
          min-inline-size: 110px;
        }
      }

      span,
      small {
        white-space: nowrap;
      }

      dl {
        margin-block-start: calc(20 * 1rem / 16);
        /* padding-inline: calc(40 * 1rem / 16);
        padding-block: calc(5 * 1rem / 16); */
        line-height: 1.8;
        @media (width >= 768px) {
          margin-block-start: unset;
          padding-inline: 40px;
          padding-block: 5px;
          border-inline-start: 1px solid var(--color--gray);
        }
      }

      dt {
      }

      dt::after {
        content: "：";
      }

      dd {
      }
    }

    .p-office__icon {
      display: inline-block;
      inline-size: calc(62 * 1rem / 16);
      block-size: calc(62 * 1rem / 16);
      background-color: var(--color--red);
      mask-position: center;
      mask-repeat: no-repeat;
      mask-size: contain;
      @media (width >= 768px) {
        inline-size: 62px;
        block-size: 62px;
      }
    }

    .p-office__icon[data-type="seafood"] {
      mask-image: url("/assets/img/pages/foods/network/icon_seafood.svg");
    }

    .p-office__icon[data-type="meat"] {
      mask-image: url("/assets/img/pages/foods/network/icon_meat.svg");
    }

    .p-office__icon[data-type="agriculture"] {
      mask-image: url("/assets/img/pages/foods/network/icon_agriculture.svg");
    }

    .p-office__icon[data-type="ice"] {
      mask-image: url("/assets/img/pages/foods/network/icon_ice.svg");
    }
  }
}