@charset "utf-8";
/********************
カタログダウンロードページ用CSS
  /products/catalog/
 ********************/

 .prod-section2 {
  overflow: hidden;
 }

.catalog-items {
  & > ul {
    display: grid;
    gap: min(3.51vw,48px);
    grid-template-columns: repeat(5,1fr);
    &.catalog-spview {
      display: none;
    }
  } 
}
@media (width <= 760px) {
  .catalog-items {
    & > ul {
      gap: 5.33vw;
      grid-template-columns: repeat(3,1fr);
      &.catalog-spview {
        display: grid;
        margin-block-start: 8vw;
      }
      #productCatalog & {
        & li.catalog-pcview {
          display: none;
        }
      }
    }
  }
}

.catalog-item {
  position: relative;
}

.catalog-item_link {
  display: block;
}

.catalog-item_name {
  margin-block-start: min(1.17vw,16px);
  font-size: min(1.17vw,16px);
  font-weight: 500;
  line-height: 1.7;
  transition: color 0.3s ease-out;
  #productCatalog & {
    font-size: min(1.46vw,20px);
  }
}
@media (width <= 760px) {
  .catalog-item_name {
    font-size: 3.47vw;
    #productCatalog & {
      font-size: 3.47vw;
    }
  }
}
@media(hover: hover) {
  .catalog-item_link:hover {
    .catalog-item_name {
      color: #6BBDDB;
    }
  }
}

.catalog-item_img {
  box-shadow: 0 1px 2px rgba(0,0,0,0.16);
  & img {
    width: 100%;
    /* height: 100%; */
    aspect-ratio: 210 / 297;
    object-fit: contain;
  }
}

.catalog-item_btnWrap {
  margin-block-start: min(1.17vw,16px);
}

.catalog-item_btn {
  position: relative;
  width: 100%;
  padding-block: min(0.44vw,6px);
  border: none;
  border-radius: min(0.44vw,6px);
  background-color: #F8F8F8;
  color: #036EB8;
  /* box-shadow: 0 1px 2px rgba(0,0,0,0.16); */
  font-size: min(1.17vw,16px);
  font-weight: 600;
  appearance: none;
  &::after {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: min(0.44vw,6px);
    background-color: #F8F8F8;
    box-shadow: 0 1px 2px rgba(0,0,0,0.16);
    content: "";
  }
  & > span {
    position: relative;
    display: inline-block;
    padding-inline-end: min(1.32vw,18px);
    pointer-events: none;
    &::after {
      position: absolute;
      top: 50%;
      right: 0;
      rotate: 180deg;
      translate: 0 -50%;
      display: block;
      width: min(0.73vw,10px);
      height: auto;
      aspect-ratio: 10/6;
      background: url(../img/catalog/icn_catalog_arrow.svg) no-repeat center/cover;
      transition: rotate 0.3s ease-out;
      content: "";
    }
  }
  &[aria-expanded="true"] {
    padding-block-end: min(1.46vw,20px);
    border-radius: min(0.44vw,6px) min(0.44vw,6px) 0 0;
    &::after {
      height: 200%;
    }
    & > span {
      &::after {
        rotate: 0deg;
      }
    }
  }
}
@media (width <= 760px) {
  .catalog-item_btn {
    padding-block: 2.13vw;
    padding-inline: 2.67vw;
    border-radius: 1.6vw;
    font-size: 3.47vw;
    text-align: left;
    & > span {
      padding-inline-end: 6.4vw;
      &::after {
        width: 2.67vw;
      }
    }
  }
}

.catalog-item_digital {
  display: block;
  width: 100%;
  padding-block: min(0.44vw,6px);
  border: none;
  border-radius: min(0.44vw,6px);
  background-color: #6BBDDB;
  color: #FFF;
  box-shadow: 0 1px 2px rgba(0,0,0,0.16);
  font-size: min(1.17vw,16px);
  font-weight: 600;
  text-align: center;
  appearance: none;
  & > span {
    position: relative;
    display: inline-block;
    padding-inline-end: min(1.83vw,25px);
    pointer-events: none;
    &::after {
      position: absolute;
      top: 50%;
      right: 0;
      translate: 0 -50%;
      display: block;
      width: min(1.1vw,15px);
      height: auto;
      aspect-ratio: 15/14;
      background: url(../img/catalog/icn_catalog_digital.svg) no-repeat center/cover;
      content: "";
    }
  }
}
@media (width <= 760px) {
  .catalog-item_digital {
    padding-block: 2.13vw;
    padding-inline: 2.67vw 1.87vw;
    border-radius: 1.6vw;
    font-size: 3.47vw;
    text-align: left;
    & > span {
      padding-inline-end: 8vw;
      &::after {
        width: 4vw;
      }
    }
  }
}

.catalog-variousItemsWrap {
  position: relative;
  z-index: 5;
  display: block;
  width: 100vw;
  /* margin-block-start: min(1.61vw,22px); */
  margin-inline: calc(50% - 50vw);
  background-color: #F8F8F8;
}
@media (width <= 760px) {
  .catalog-variousItemsWrap {
    margin-inline: -2.67vw;
  }
}

.catalog-variousItems {
  max-width: 1360px;
  margin-inline: auto;
  padding-block: min(7.32vw,100px);
  padding-inline: 60px;
  & > ul {
    display: grid;
    gap: min(6vw,82px) min(3.51vw,48px);
    grid-template-columns: repeat(5,1fr);
    max-width: 1240px;
    margin-inline: auto;
  }
}
@media (width <= 760px) {
  .catalog-variousItems {
    padding-block: 13.33vw;
    padding-inline: 2.67vw;
    & > ul {
      gap: 8vw 5.33vw;
      grid-template-columns: repeat(3,1fr);
    }
  }
}

.catalog-variousItem {
  display: block;
}

.catalog-variousItem_img {
  & img {
    aspect-ratio: 210 / 297;
    object-fit: contain;
  }
}

.catalog-variousItem_name {
  margin-block-start: min(1.17vw,16px);
  font-size: min(1.17vw,16px);
  font-weight: 500;
  line-height: 1.7;
  transition: color 0.3s ease-out;
}
@media (width <= 760px) {
  .catalog-variousItem_name {
    font-size: 3.47vw;
  }
}
@media(hover: hover) {
  .catalog-item_link:hover {
    .catalog-item_name {
      color: #6BBDDB;
    }
  }
}