/* pages/news.css */

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

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

  .p-industry {
    padding-block: calc(40 * 1rem / 16);
    background-color: var(--color--red);
    @media (width >= 768px) {
      padding-block: 50px;
    }

    .c-box {
      @media (width >= 768px) {
        padding-inline: 100px;
      }
    }
  }
}

body[data-path="/refrigerator/technology/"] {
}

body[data-path="/refrigerator/network/"] {
  .p-header {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "filters"
      "regions"
      "links";
    row-gap: calc(40 * 1rem / 16);
    /* margin-block-start: calc(40 * 1rem / 16); */
    margin-block-start: calc(35 * 1rem / 16);
    @media (width >= 768px) {
      grid-template-columns: 470px 60px 1fr;
      grid-template-rows: auto 80px auto 30px auto;
      grid-template-areas:
        "title . regions"
        ". . regions"
        "filters . regions"
        ". . regions"
        "links . regions";
      gap: unset;
      margin-block-start: 40px;
    }

    .p-header__title {
      grid-area: title;
      margin-block: unset;
    }

    .p-header__filters {
      grid-area: filters;

      .c-panel {
        .c-panel__body {
          padding-block: calc(30 * 1rem / 16);
          @media (width >= 768px) {
            padding-block: 30px;
          }
        }
      }
    }

    .p-header__regions {
      grid-area: regions;
      position: relative;
      container-type: inline-size;
      aspect-ratio: 669 / 555;
      background-image: url("/assets/img/pages/refrigerator/network/index/header/img_map_sm.webp");
      background-position: left top;
      background-repeat: no-repeat;
      background-size: cover;
      @media (width >= 768px) {
        background-image: url("/assets/img/pages/refrigerator/network/index/header/img_map_md.webp");
      }

      & > ul {
        li {
          position: absolute;
          line-height: 0;
        }

        li:nth-of-type(1) {
          /* inset: calc(40 * 1rem / 16) auto auto calc(273 * 1rem / 16);
          @media (width >= 768px) {
            inset: 40px auto auto 273px;
          } */
          inset: calc(40 / 670 * 100cqi) auto auto calc(273 / 670 * 100cqi);
        }

        li:nth-of-type(2) {
          /* inset: calc(172.5 * 1rem / 16) auto auto calc(531 * 1rem / 16);
          @media (width >= 768px) {
            inset: 172.5px auto auto 531px;
          } */
          inset: calc(172.5 / 670 * 100cqi) auto auto calc(531 / 670 * 100cqi);
        }

        li:nth-of-type(3) {
          /* inset: calc(339 * 1rem / 16) auto auto calc(531 * 1rem / 16);
          @media (width >= 768px) {
            inset: 339px auto auto 531px;
          } */
          inset: calc(339 / 670 * 100cqi) auto auto calc(531 / 670 * 100cqi);
        }

        li:nth-of-type(4) {
          /* inset: calc(406 * 1rem / 16) auto auto calc(531 * 1rem / 16);
          @media (width >= 768px) {
            inset: 406px auto auto 531px;
          } */
          inset: calc(406 / 670 * 100cqi) auto auto calc(531 / 670 * 100cqi);
        }

        li:nth-of-type(5) {
          /* inset: calc(455.5 * 1rem / 16) auto auto calc(311.5 * 1rem / 16);
          @media (width >= 768px) {
            inset: 455.5px auto auto 311.5px;
          } */
          inset: calc(455.5 / 670 * 100cqi) auto auto calc(311.5 / 670 * 100cqi);
        }

        li:nth-of-type(6) {
          /* inset: calc(284 * 1rem / 16) auto auto calc(170.5 * 1rem / 16);
          @media (width >= 768px) {
            inset: 284px auto auto 170.5px;
          } */
          inset: calc(284 / 670 * 100cqi) auto auto calc(170.5 / 670 * 100cqi);
        }

        li:nth-of-type(7) {
          /* inset: calc(321 * 1rem / 16) auto auto 0;
          @media (width >= 768px) {
            inset: 321px auto auto 0;
          } */
          inset: calc(321 / 670 * 100cqi) auto auto 0;
        }

        li:nth-of-type(8) {
          /* inset: calc(506.5 * 1rem / 16) auto auto 118.5;
          @media (width >= 768px) {
            inset: 506.5px auto auto 118.5px;
          } */
          inset: calc(506.5 / 670 * 100cqi) auto auto calc(118.5 / 670 * 100cqi);
        }
      }

      .c-button {
        /* inline-size: calc(140 * 1rem / 16);
        block-size: calc(50 * 1rem / 16);
        padding-inline: calc(20 * 1rem / 16);
        padding-block: unset;
        @media (width >= 768px) {
          inline-size: 140px;
          block-size: 50px;
          padding-inline: 20px;
        } */
        inline-size: calc(140 / 670 * 100cqi);
        block-size: calc(50 / 670 * 100cqi);
        padding-inline: calc(20 / 670 * 100cqi);
        padding-block: unset;

        .c-text {
          font-size: calc(18 / 670 * 100cqi);
          translate: 0 -0.2em;
          @media (width >= 768px) {
            translate: unset;
          }
        }

        .c-icon--chevron-bottom {
          /* inline-size: calc(16 * 1rem / 16);
          block-size: calc(10 * 1rem / 16);
          @media (width >= 768px) {
            inline-size: 16px;
            block-size: 10px;
          } */
          inline-size: calc(16 / 670 * 100cqi);
          block-size: calc(9.99 / 670 * 100cqi);
        }
      }

      .c-button[aria-disabled="true"] {
        pointer-events: none;

        .c-text,
        .c-icon {
          opacity: 0.4;
        }
      }

      li:nth-of-type(5) .c-button {
        /* inline-size: calc(180 * 1rem / 16);
        @media (width >= 768px) {
          inline-size: 180px;
        } */
        inline-size: calc(180 / 670 * 100cqi);
      }

      @media (hover: hover) {
        .c-button .c-text {
          transition: opacity 0.2s ease 0s;
        }
      }
    }

    .p-header__links {
      grid-area: links;

      .c-icon--chevron-bottom {
        inline-size: calc(16 * 1rem / 16);
        block-size: calc(9.99 * 1rem / 16);
        @media (width >= 768px) {
          inline-size: 16px;
          block-size: 9.99px;
        }
      }
    }
  }

  .p-domestic {
    .p-domestic__region {
    }
  }

  .p-overseas {
    .p-overseas__region {
    }
  }

  .p-logistics-office {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto calc(20 * 1rem / 16) auto calc(20 * 1rem / 16) auto calc(20 * 1rem / 16) auto;
    grid-template-areas:
      "image"
      "."
      "name"
      "."
      "address"
      "."
      "button";
    @media (width >= 768px) {
      grid-template-columns: 158px 50px 1fr;
      grid-template-rows: auto 15px auto 25px auto;
      grid-template-areas:
        "image . name"
        "image . ."
        "image . address"
        "image . ."
        "image . button";
    }

    .p-logistics-office__image {
      grid-area: image;
    }

    .p-logistics-office__name {
      grid-area: name;
    }

    .p-logistics-office__address {
      grid-area: address;
    }

    .p-logistics-office__button {
      grid-area: button;
    }
  }

  .p-customs {
  }

  .p-customs-office {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto calc(20 * 1rem / 16) auto calc(20 * 1rem / 16) auto;
    grid-template-areas:
      "name"
      "."
      "address"
      "."
      "button";
    padding-inline: calc(20 * 1rem / 16);
    padding-block: calc(30 * 1rem / 16);
    border: 1px solid var(--color--border-gray);
    border-radius: calc(var(--border-radius--box) * 1rem / 16);
    @media (width >= 768px) {
      grid-template-rows: auto 15px auto 25px auto;
      padding-inline: 40px;
      padding-block: 40px;
      border-radius: calc(var(--border-radius--box) * 1px);
    }

    .p-customs-office__name {
      grid-area: name;
    }

    .p-customs-office__address {
      grid-area: address;
    }

    .p-customs-office__button {
      grid-area: button;
    }
  }
}

/* 冷蔵倉庫拠点共通のスコープ */
body[data-path^="/refrigerator/network/*"] {
  --p-color--light-blue: #00baff;

  /* .p-hgroup {
    display: flex;
    flex-flow: column-reverse;
    margin-block: calc(35 * 1rem / 16) calc(40 * 1rem / 16);
    @media (width >= 768px) {
      margin-block: 40px 50px;
    }

    .c-heading {
      margin-block: unset;
    }
  } */

  .p-media-grid {
    .p-media-grid__map {
      iframe {
        aspect-ratio: 678 / 400;
        inline-size: 100%;
      }
    }

    .c-media-grid {
      @media (width >= 768px) {
        grid-template-columns: 470px 1fr;
      }
    }
  }

  .p-temp-data {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-radius: calc(4 * 1rem / 16);
    overflow: hidden;

    dt,
    dd {
      /* padding-inline: 1em; */
      padding-block: 0.6em;
      text-align: center;
    }

    dt {
      background-color: var(--color--text-black);
    }

    dd {
      background-color: var(--p-color--light-blue);
    }
  }

  .p-temp-data-table {
    .c-table {
      colgroup {
        col {
          inline-size: calc(100% / 3);
        }
      }

      thead {
        th {
          background-color: var(--color--gray);
          font-size: calc(18 * 1rem / 16);
          @media (width >= 768px) {
            font-size: calc(20 * 1rem / 16);
          }
        }
      }

      tbody {
        th,
        td {
          font-size: calc(15 * 1rem / 16);
          @media (width >= 768px) {
            font-size: calc(17 * 1rem / 16);
          }
        }

        th {
          background-color: var(--p-color--light-blue);
          color: var(--color--white);
        }

        td {
          /* letter-spacing: 0.0625em; */
          text-align: center;
        }
      }
    }
  }
}

/* 恵庭スマート物流センターだけのスコープ */
body[data-path="/refrigerator/network/eniwa/"] {
}

body[data-path="/refrigerator/customs/"] {
  .p-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "image1"
      "image2"
      "image3";
    gap: calc(40 * 1rem / 16);
    @media (width >= 768px) {
      grid-template-columns: 575px 150px 475px;
      grid-template-rows: auto 20px auto;
      grid-template-areas:
        "image1 . image2"
        "image1 . ."
        "image1 . image3";
      gap: unset;
    }

    & > *:nth-child(1) {
      grid-area: image1;
    }

    & > *:nth-child(2) {
      grid-area: image2;
    }

    & > *:nth-child(3) {
      grid-area: image3;
    }
  }
}

body[data-path="/refrigerator/service/"] {
  .p-media-grid {
    .c-media-grid {
      @media (width >= 768px) {
        grid-template-columns: 680px 1fr;
      }
    }
  }
}

body[data-path="/refrigerator/maintenance/"] {
}