@charset "UTF-8";
/* -----------------------------------------------
  Variables
--------------------------------------------------*/
:root {
  --color-text: #000;
  --color-bg: #ffffff;
  --color-base: #004098;
  --color-base2: #1b73ec;
  --color-base3: #619edb;
  --color-link: #004098;
  --color-hover: #004098;
  --color-visited: #012659;
  --color-error: #dd0000;
  --swiper-theme-color: #004098;
}

/* -----------------------------------------------
  Mixins
--------------------------------------------------*/
.container {
  background: rgba(255, 255, 255, 0.85);
}

.products__list {
  display: flex;
  flex-wrap: wrap;
  gap: min(6rem, 4.6153846154vw);
}
@media all and (max-width: 768px) {
  .products__list {
    flex-direction: column;
    row-gap: 2rem;
  }
}
.products__list-item {
  position: relative;
  padding: min(4rem, 3.0769230769vw);
  background: rgba(0, 64, 152, 0.9);
  color: #fff;
  transition: 0.3s;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex: 1;
}
@media all and (max-width: 768px) {
  .products__list-item {
    padding: 4.8309178744vw;
    flex-wrap: nowrap;
    column-gap: 3.6231884058vw;
  }
}
@media all and (min-width: 769px) {
  .products__list-item:first-child {
    flex-wrap: nowrap;
    flex: 0 0 100%;
    gap: min(6rem, 4.6153846154vw);
    min-height: min(40rem, 30.7692307692vw);
  }
  .products__list-item:first-child figure {
    width: min(46rem, 35.3846153846vw);
    margin: 0;
  }
}
@media all and (max-width: 768px) {
  .products__list-item:first-child {
    flex-wrap: wrap;
  }
  .products__list-item:first-child figure {
    flex: 100%;
    margin-block: 4rem;
  }
}
@media all and (min-width: 769px) {
  .products__list-item:hover {
    background: rgba(230, 236, 245, 0.85);
    color: var(--color-text);
  }
}
.products__list-item h2 {
  font-size: min(3.6rem, 2.7692307692vw);
  margin: 0;
}
@media all and (max-width: 768px) {
  .products__list-item h2 {
    font-size: 6.038647343vw;
  }
}
.products__list-item h3 {
  font-size: min(2rem, 1.5384615385vw);
  margin: 0;
}
@media all and (max-width: 768px) {
  .products__list-item h3 {
    font-size: 1.8rem;
  }
}
.products__list-item p {
  margin-block: 3rem 0;
}
@media all and (max-width: 768px) {
  .products__list-item p {
    margin-block: 2rem;
  }
}
.products__image {
  width: min(27.5rem, 21.1538461538vw);
  margin: 0 auto min(5rem, 3.8461538462vw);
}
@media all and (max-width: 768px) {
  .products__image {
    flex: 0 0 31.4009661836vw;
    margin: 0 auto;
  }
}
.products__title {
  display: flex;
  align-items: center;
  column-gap: min(2rem, 1.5384615385vw);
  margin-bottom: 2.5rem;
}
@media all and (max-width: 768px) {
  .products__title {
    align-items: baseline;
    margin-bottom: 2rem;
  }
}

/* 製品情報 */
.products-feature {
  background: var(--color-base);
  padding-block: 6rem;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  counter-reset: section-counter;
}
@media all and (min-width: 769px) {
  .products-feature .inner {
    max-width: min(110rem, 84.6153846154vw);
    margin-inline: auto;
  }
}
@media all and (max-width: 768px) {
  .products-feature .inner {
    padding-inline: 4.8309178744vw;
  }
}
.products-feature .c-heading--center {
  color: #fff;
}
.products-feature .c-heading--center::before {
  background: #fff;
}
.products-feature .c-heading--center::after {
  background: rgba(255, 255, 255, 0.1);
}
.products-feature .feature-box {
  position: relative;
  background: #fff;
  padding: 4rem 3rem 2rem;
  border-radius: 0.5rem;
  counter-increment: section-counter;
}
.products-feature .feature-box::after {
  content: "0" counter(section-counter);
  position: absolute;
  right: 0.5rem;
  bottom: 0;
  font-family: "Barlow", sans-serif;
  font-size: 8rem;
  font-weight: bold;
  line-height: 0.8;
  color: var(--color-base);
}
.products-feature .feature-box ul li {
  color: var(--color-base);
  font-size: 1.5rem;
  font-weight: bold;
}
.products-feature .feature-title {
  color: var(--color-base);
  font-size: 2.2rem;
  text-align: center;
  margin-top: 0;
}
.products-feature .feature-title span {
  background: #f0e126;
}

/* 対応規格・導入事例 */
@media all and (min-width: 769px) {
  .products-standard .c-heading--center,
  .products-case .c-heading--center {
    width: fit-content;
  }
}
@media all and (max-width: 768px) {
  .products-standard .section-link,
  .products-case .section-link {
    margin-top: 2.5rem;
    justify-content: center;
  }
}

.products-case .section__link {
  margin-top: 3rem;
  justify-content: center;
}

@media all and (max-width: 768px) {
  .products-standard h3 {
    text-align: center;
  }
}
.products-standard table {
  margin-block: 0;
}
.products-standard table th {
  width: fit-content;
}

/* ご依頼の流れ */
@media all and (max-width: 768px) {
  .products-flow .column__wrapper {
    padding-bottom: 2rem;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .products-flow .column__wrapper .flow-box {
    flex: 0 0 100%;
    scroll-snap-align: start;
  }
}
.products-flow .flow-box p {
  font-size: 1.5rem;
  line-height: 1.6;
  margin-block: 0;
}
@media all and (max-width: 768px) {
  .products-flow .flow-box {
    text-align: center;
  }
}
.products-flow .flow-image {
  text-align: center;
  margin-bottom: 2rem;
}
.products-flow .flow-image img {
  height: 12.2rem;
}
.products-flow .flow-title {
  position: relative;
  color: var(--color-base);
  font-size: 1.8rem;
  text-align: center;
  margin-top: 0;
  margin-bottom: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.products-flow .flow-title::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 3rem;
  height: 1px;
  background: var(--color-base);
}
.products-flow .flow-pagination {
  display: flex;
  justify-content: center;
  gap: 4px;
}
.products-flow .flow-pagination button {
  width: 1.2rem;
  height: 1.2rem;
  border: none;
  background: rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: 0.3s;
  transform: scale(0.5);
  pointer-events: none;
}
.products-flow .flow-pagination button.active {
  background: var(--color-base);
}

/* テーブル（ユニット種類） */
table.products-table {
  margin-bottom: 5rem;
}
table.products-table th, table.products-table td {
  padding-block: 1.3rem;
  padding-inline: 0;
  text-align: center;
}