/* //////////////////////////////////////////////////

Title : products.scss
For   : bell-c/

Created       : 2025-12-14
Last Modified : 2025-12-14

==========================================

Content

////////////////////////////////////////////////// */
/**
 * layout
 */
/* --- for small viewport --- */
@media (max-width: 767px) {
  .l-page-section:not(:first-of-type) {
    -webkit-padding-before: 4rem;
            padding-block-start: 4rem;
  }
}
/* --- for large viewport --- */
@media (min-width: 768px) {
  .l-page-section:not(:first-of-type) {
    -webkit-padding-before: 12rem;
            padding-block-start: 12rem;
  }
}
/**
 * common
 */
.p-products {
  -webkit-padding-after: 10rem;
          padding-block-end: 10rem;
}
.p-products__global-title {
  position: relative;
}
.p-products__global-title span {
  position: absolute;
  right: 0;
  color: #aeaeae;
  font-size: 0.35em;
}

/* --- for small viewport --- */
@media (max-width: 767px) {
  .p-products {
    -webkit-padding-after: 21rem;
            padding-block-end: 21rem;
  }
  .p-products__global-title span {
    bottom: 2.8rem;
  }
  .p-products__global-title + * {
    -webkit-margin-before: 3rem;
            margin-block-start: 3rem;
  }
  .p-products .l-page-section {
    padding-bottom: 8rem;
  }
  .p-products .c-page-item__sub-title {
    padding: 1.7rem 2rem;
    margin-bottom: 2.4rem;
  }
  .p-products .c-page-list {
    gap: 2rem;
    padding-left: 1.7rem;
    padding-right: 1.8rem;
    margin-bottom: 2.4rem;
  }
  .p-products .c-page-list > .c-page-list__item:first-of-type {
    padding-top: 2rem;
    border-top: 2px solid #eaeff1;
  }
  .p-products__accordion {
    max-width: 30rem;
    margin-inline: auto;
  }
}
/* --- for large viewport --- */
@media (min-width: 768px) {
  .p-products__global-title span {
    bottom: 3.2rem;
  }
  .p-products__global-title + * {
    -webkit-margin-before: 8rem;
            margin-block-start: 8rem;
  }
  .p-products .c-page-item__sub-title {
    font-size: 2.8rem;
    margin-bottom: 4rem;
  }
  .p-products .c-page-list {
    padding-inline: 12rem;
    margin-bottom: 6rem;
  }
}
/**
 * list
 */
.p-products-list {
  --contents-gutter: 2rem;
  max-width: calc(120rem + var(--contents-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--contents-gutter);
}
.p-products-list__container {
  --section-inner-border-radius: 0;
}
.p-products-list__panels {
  letter-spacing: 0.09em;
}
.p-products-list__panel {
  border-bottom: 0.2rem solid var(--color-light-gray);
}
.p-products-list__panel-thumbnail {
  margin-inline: auto;
}
.p-products-list__panel-thumbnail:not([data-thumbnail]) img {
  width: auto;
  height: 100%;
  margin: auto;
}
.p-products-list__panel-description {
  font-weight: 400;
  line-height: 1.8;
}
.p-products-list__panel-button {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--color-en);
  font-weight: 700;
  line-height: 1.5;
}
.p-products-list__panel-button::after {
  content: "";
  width: var(--panel-button-cion-size);
  height: var(--panel-button-cion-size);
  background-image: var(--icon-link-external-path);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center center;
}
.p-products-list__panel-button span {
  text-decoration: underline;
}

/* --- for small viewport --- */
@media (max-width: 767px) {
  .p-products-list {
    --product-list-spacer: 10rem;
  }
  .p-products-list#products {
    -webkit-padding-after: calc(var(--product-list-spacer) / 2);
            padding-block-end: calc(var(--product-list-spacer) / 2);
  }
  .p-products-list#manufacturers {
    -webkit-padding-before: calc(var(--product-list-spacer) / 2);
            padding-block-start: calc(var(--product-list-spacer) / 2);
  }
  .p-products-list__panels {
    display: grid;
    grid-template-columns: 100%;
    place-items: center;
    row-gap: 2rem;
    -webkit-padding-after: 2rem;
            padding-block-end: 2rem;
  }
  .p-products-list__panel {
    flex-shrink: 0;
    width: 90%;
    -webkit-padding-after: 2rem;
            padding-block-end: 2rem;
  }
  .p-products-list__panel-thumbnail:not([data-thumbnail]) {
    height: 3rem;
  }
  .p-products-list__panel-thumbnail[data-thumbnail] {
    width: 85%;
  }
  .p-products-list__panel-description {
    -webkit-margin-before: 1em;
            margin-block-start: 1em;
    font-size: 1.2rem;
  }
  .p-products-list__panel-button {
    --panel-button-cion-size: 1.2rem;
    gap: 0.5rem;
    -webkit-margin-before: 1em;
            margin-block-start: 1em;
    font-size: 1rem;
  }
}
/* --- for large viewport --- */
@media (min-width: 768px) {
  .p-products-list {
    --product-list-spacer: 27rem;
  }
  .p-products-list#products {
    -webkit-padding-after: calc(var(--product-list-spacer) / 2);
            padding-block-end: calc(var(--product-list-spacer) / 2);
  }
  .p-products-list#manufacturers {
    -webkit-padding-before: calc(var(--product-list-spacer) / 2);
            padding-block-start: calc(var(--product-list-spacer) / 2);
  }
  .p-products-list__panels {
    display: grid;
    -moz-column-gap: 6rem;
         column-gap: 6rem;
    row-gap: 5rem;
  }
  .p-products-list__panels:not([data-panels=manufacturers]) {
    grid-template-columns: repeat(3, 1fr);
  }
  .p-products-list__panels[data-panels=manufacturers] {
    grid-template-columns: repeat(2, 1fr);
  }
  .p-products-list__panel {
    -webkit-padding-after: 4rem;
            padding-block-end: 4rem;
  }
  .p-products-list__panel[data-panel-layout=horizontal] {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: 25% 1fr auto;
    align-items: center;
    -moz-column-gap: 10rem;
         column-gap: 10rem;
  }
  .p-products-list__panel[data-panel-layout=horizontal] > * {
    -webkit-margin-before: 0 !important;
            margin-block-start: 0 !important;
  }
  .p-products-list__panel[data-panel-layout=horizontal] .p-products-list__panel-thumbnail {
    width: 100%;
    height: auto;
  }
  .p-products-list__panel[data-panel-layout=horizontal] .p-products-list__panel-thumbnail img {
    width: 100%;
    height: auto;
  }
  .p-products-list__panel:not(.p-products-list__panel[data-panel-layout=horizontal]) {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .p-products-list__panel-thumbnail:not([data-thumbnail]) {
    width: auto;
    height: 5rem;
  }
  .p-products-list__panel-thumbnail[data-thumbnail*=skkynet] {
    width: 80%;
  }
  .p-products-list__panel-thumbnail[data-thumbnail*=puerto] {
    width: 29rem;
  }
  .p-products-list__panel-thumbnail[data-thumbnail*=kobata] {
    width: 31.2rem;
  }
  .p-products-list__panel-thumbnail[data-thumbnail*=anchorz] {
    width: 24.4rem;
  }
  .p-products-list__panel-thumbnail + .p-products-list__panel-button {
    -webkit-margin-before: auto;
            margin-block-start: auto;
    -webkit-padding-before: 1.6rem;
            padding-block-start: 1.6rem;
  }
  .p-products-list__panel-description {
    -webkit-padding-before: 1.6rem;
            padding-block-start: 1.6rem;
    font-size: 1.8rem;
  }
  .p-products-list__panel-description + .p-products-list__panel-button {
    -webkit-margin-before: auto;
            margin-block-start: auto;
    -webkit-padding-before: 3.2rem;
            padding-block-start: 3.2rem;
  }
  .p-products-list__panel-button {
    --panel-button-cion-size: 1.6rem;
    gap: 0.6rem;
    font-size: 1.6rem;
  }
}
/*# sourceMappingURL=products.css.map */