@charset "utf-8";

/* MARK:除去対象物質テーブル */
.removal-table {
  margin-top: 0;
  /* width: fit-content; */
  /* width: 56.440rem; */
  width: fit-content;
  display: flex;
  flex-direction: column;
}

.removal-table__header {
  border: 2px solid var(--c-secondary);
  padding: 0.5rem 1.6rem 0.4rem;
  /* width: 56.440rem; */
}

.removal-table__header-text {
  font-size: var(--fluid-14-16);
  line-height: 1.8;
  color: var(--c-text);
}

.removal-table__columns-header {
  display: grid;
  grid-template-columns: 15.4rem 3rem 12.95rem 12.95rem 12.95rem;
  gap: 1rem;
  /* padding: 1rem 0; */
  /* border-bottom: 1px solid #DDD; */
  margin-top: clamp(2rem, 0.967rem + 0.265vw, 3rem);
  /* width: 56.5rem; */
  /* width: 52rem; */
}

.removal-table__col-name {
  font-size: var(--fluid-14-16);
  color: var(--c-text);
  display: grid;
  align-items: end;
}

.removal-table__col-info {
  /* width: 3rem; */
}

.removal-table__col-type {
  font-size: var(--fz-16);
  color: var(--c-text);
  text-align: center;
  /* width: 13rem; */
  padding: 0.6rem 0;
  display: grid;
  align-items: center;
}

.removal-table__row {
  display: grid;
  grid-template-columns: 15.4rem 3rem 12.95rem 12.95rem 12.95rem;
  gap: 1rem;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid #DDD;
  min-height: 4.8rem;
}

.removal-table__name {
  font-size: var(--fluid-14-16);
  line-height: 1.8;
  color: var(--c-text);
  white-space: nowrap;
}

.removal-table__name sup {
  font-size: 0.7em;
  top: -0.5em;
}

.removal-table__info-btn {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: var(--c-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  font-size: var(--fz-18);
}

.removal-table__info-btn:hover {
  opacity: 0.8;
}

.removal-table__info-icon {
  color: #fff;
  font-size: var(--fz-14);
  font-weight: 400;
  line-height: 1;
}

.removal-table__value {
  font-size: var(--fluid-14-16);
  text-align: center;
  color: var(--c-text);
  /* width: 12.9rem; */
  flex-shrink: 0;
}

.removal-table__value--no {
  color: var(--c-text);
}

/* ポップアップ */
.removal-popup {
  position: absolute;
  left: 0;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
}

.removal-popup[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.removal-popup__content {
  position: relative;
  background-color: #fff;
  border: 1px solid var(--c-primary);
  border-radius: 0.6rem;
  padding: 1.9rem 1.9rem 2rem;
  width: 31rem;
  max-width: calc(100vw - 4rem);
  /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); */
}

.removal-popup__title {
  font-size: var(--fz-18);
  color: var(--c-text);
  line-height: 1;
  margin-bottom: 0.8rem;
}

.removal-popup__description {
  font-size: var(--fluid-14-16);
  line-height: 1.6;
  color: var(--c-text);
}

.removal-popup__close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 3.2rem;
  height: 3.2rem;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.removal-popup__close svg {
  width: 100%;
  height: 100%;
}

.removal-table__col-type-std {
  color: #FFF !important;
  background-color: var(--c-secondary)
}

.removal-table__col-type-high {
  color: #FFF !important;
  background-color: var(--c-primary)
}

.removal-table__col-type-max {
  color: #FFF !important;
  background-color: var(--c-third)
}

@media (min-width: 768px) {
  .removal-table {
    margin-top: 0;
    width: 100%;
  }

  .removal-table__header {
    padding: 0.9rem 1.6rem 0.8rem;
  }

  .removal-table__columns-header {
    display: grid;
    grid-template-columns: 1fr 3rem 21.3rem 21.3rem 21.3rem;
    gap: 2rem;
    padding: 0;
    border-bottom: 1px solid #DDD;
    width: 100%;
    align-items: end;
  }

  .removal-table__col-name {
    color: var(--c-text);
    padding-bottom: 1rem;
  }

  .removal-table__col-info {
    width: 3rem;
  }

  .removal-table__col-type {
    font-size: var(--fz-16);
    color: var(--c-text);
    text-align: center;
    /* padding: 0.2rem 0 0.8rem; */
  }

  .removal-table__row {
    grid-template-columns: 1fr 3rem 21.3rem 21.3rem 21.3rem;
    gap: 2rem;
    min-height: 4.8rem;
    padding: 0.9rem 0 1rem;
  }

  .removal-table__name {
    width: 25rem;
  }

  .removal-table__info-btn {
    width: 3rem;
    height: 3rem;
  }

  .removal-table__info-icon {
    font-size: var(--fz-18);
  }

  .removal-table__value {
    width: auto;
  }

  .removal-popup {
    left: auto;
  }

  .removal-popup__content {
    width: 35rem;
    padding: 1.9rem;
  }

  .removal-popup__title {
    font-size: var(--fz-18);
  }

}

.cartridge-cycle {
  background-color: #FFF;
  padding: 5rem 2rem 5rem;
  border-radius: 0 0 0.6rem 0.6rem
}

.cartridge-cycle__heading {
  font-size: var(--fluid-20-32);
  color: var(--c-primary);
  text-align: center;
}

.cartridge-cycle__lead {
  font-size: var(--fluid-14-18);
  text-align: center;
  margin-top: clamp(1rem, -1.371rem + 0.608vw, 3.3rem);
}

.cartridge-cycle__table {
  margin-top: clamp(2rem, 0.967rem + 0.265vw, 3rem);
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: var(--fz-16);
}

.cartridge-cycle__table-head {
  background-color: var(--c-primary-10);
}

.cartridge-cycle__table-header {
  white-space: nowrap;
  font-weight: 400;
  padding-block: 0.5rem;
  font-size: var(--fluid-09-16);
}

.cartridge-cycle__table-header:not(:last-child) {
  border-right: 1px solid #DDD;
}

.cartridge-cycle__table-cell {
  padding-block: 0.9rem;
  text-align: center;
  border-bottom: 1px solid #DDD;
}

.cartridge-cycle__table-cell:not(:last-child) {
  border-right: 1px solid #DDD;
}

.cartridge-cycle__table-cell--cycle {
  color: var(--c-primary);
  font-weight: 500;
}

.cartridge-cycle__link {
  margin-top: 3rem;
  margin-inline: auto;
  /* width: 23.4rem; */
}

.cartridge-cycle__link-2 {
  margin-top: 1.5rem;
}

.cartridge-cycle__subscription {
  border-radius: 0.6rem;
  padding-block: 2.4rem 3rem;
  background-color: #eff2f8;
  margin-top: 3rem;
  display: grid;
  justify-items: center;
  padding-inline: 2rem;
}

.cartridge-cycle__subscription-text {
  text-align: center;
  font-size: var(--fluid-14-18);
  white-space: nowrap;
}

@media (min-width: 768px) {
  .cartridge-cycle {
    padding: 5rem 10rem 10rem;
  }



  .cartridge-cycle__table-header {
    padding-block: 1rem;
  }

  .cartridge-cycle__link {
    /* margin-top: 1.7rem; */
    margin-top: 4rem;
  }

  .cartridge-cycle__link-2 {
    margin-top: 1.7rem;
  }

  .cartridge-cycle__subscription {
    margin-top: 5rem;
    padding-block: 4.4rem 5rem;
  }

}

/* MARK:除去能力 */
.removal-capability {
  background-color: #FFF;
  padding: 5rem 2rem 0;
}

.removal-capability__heading {
  font-size: var(--fluid-24-36);
  color: var(--c-primary);
  text-align: center;
}

.removal-capability__badge {
  width: 6.8rem;
  margin-inline: auto;
  margin-top: 3rem;
}

.removal-capability__lead {
  margin-top: 2rem;
  font-size: var(--fluid-18-24);
  text-align: justify;
}

.removal-capability__description {
  font-size: var(--fluid-14-18);
  margin-top: 1.5rem;
  text-align: justify;
}

.removal-capability__note {
  font-size: var(--fluid-12-14);
  margin-top: 2rem;
}

.removal-capability__link {
  margin-top: 2.5rem;
}

.btn-border__body.multi {
  font-size: var(--fluid-14-20);
  padding-block: 0.5rem
}

@media (min-width: 768px) {
  .removal-capability {
    padding: 10rem 10rem 0;
  }

  .removal-capability__badge {
    width: 13.6rem;
    margin-top: 0;
    margin-inline: 0;
    padding-top: 1rem;
  }

  .removal-capability__lead {
    margin-top: 0;
  }

  .removal-capability__note {
    margin-top: 1.5rem;
  }

  .removal-capability__link {
    width: 49rem;
    margin-inline: auto;
    margin-top: 4.6rem;
  }

  .btn-border__body.multi {
    padding-block: 1.2rem;
    /* margin-top: 4.6rem; */
  }

  .removal-capability__wrapper {
    display: grid;
    gap: 5rem;
    width: 100%;
    margin-top: 3rem;
    grid-template-columns: 13.6rem 1fr;
  }

}

/* MARK:除去能力 */
.cartridge-notes {
  background-color: #fff;
  padding: 5rem 2rem 0;
  /* overflow-y: hidden; */
  /* overflow-x: auto; */
  position: relative;
}

.cartridge-notes__scroll {
  display: block;
  padding-inline: 0;
  overflow-y: visible;
  overflow-x: auto;
  width: 100%;
  flex-direction: column;
  position: relative;
}

@media (min-width: 768px) {
  .cartridge-notes__scroll {
    overflow-x: visible
  }
}

.cartridge-notes__scroll-inner {
  display: inline-flex;
  flex-direction: column;
  position: relative;
  /* width: 100%; */
}

.cartridge-notes__scroll-outer {
  position: relative
}

@media (min-width: 768px) {
  .cartridge-notes__scroll-inner {
    display: flex
  }
}

.cartridge-notes__overray {
  background-color: hsl(0deg 0% 0% / 25%);
  position: absolute;
  inset: 0;
  display: grid;
  align-items: start;
  justify-items: center;
  padding-top: 6rem;
}

@media (min-width: 768px) {
  .cartridge-notes__overray {
    display: none
  }
}

.cartridge-notes__overray-icon {
  background-color: hsl(0deg 0% 0% / 50%);
  width: 10rem;
  aspect-ratio: 1;
  height: auto;
  border-radius: 0.6rem;
  display: grid;
  place-items: center;
}

.cartridge-notes__overray-icon-image {
  width: 6.4rem;
}

.cartridge-notes__title {
  font-size: var(--fluid-20-32);
  color: var(--c-primary);
  text-align: center;
  margin-top: 0;
  /* width: 100%; */
}

.cartridge-notes__sup {
  font-size: 0.6em;
  display: inline-block;
  top: -0.5em
}

.cartridge-notes__heading {
  font-size: var(--fluid-14-16);
  margin-top: clamp(1.8rem, -0.162rem + 0.503vw, 3.7rem);
}

.cartridge-notes__list {
  font-size: var(--fluid-12-14);
  padding-left: 0;
  margin-top: clamp(0.5rem, 1.515rem + -0.132vw, 1rem);
}

.cartridge-notes__item {
  position: relative;
  padding-left: 2rem;
}

.cartridge-notes__item::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.8em;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background-color: currentColor;
}

.cartridge-notes__item+.cartridge-notes__item {
  margin-top: 1px;
  text-align: justify;
}

.cartridge-footnotes {
  padding-left: 3.4rem;
  list-style: none;
  counter-reset: footnote;
  font-size: var(--fz-12);
  margin-top: 2.5rem;
}

.cartridge-footnotes__item {
  position: relative;
  counter-increment: footnote;
  text-align: justify;
}

.cartridge-footnotes__item::before {
  content: "※" counter(footnote);
  position: absolute;
  left: -3.4rem;
}

.cartridge-notes__action {
  background-color: var(--c-primary-10);
  padding: 3.0rem 3.8rem;
  border-radius: 0.6rem;
  margin-top: 2.5rem;
}

@media (min-width: 768px) {
  .cartridge-notes {
    padding: 5rem 10rem 0;
  }



  .cartridge-notes__action {
    margin-bottom: 4.3rem;
    margin-top: 4.5rem;
    padding: 5rem 34.1rem;
  }

  .cartridge-footnotes {
    font-size: var(--fz-14);
  }
}

/* MARK:浄水カートリッジ適応タイプ一覧 */
.compatible-types {
  margin-top: 0;
  background-color: #FFF;
  padding: 3rem 2rem 0;
}

.compatible-types__list {
  display: grid;
  gap: 3rem;
  margin-top: clamp(4rem, 2.967rem + 0.265vw, 5rem);
}

.compatible-types__list-bath {
  margin-top: 3rem;
}

.type-card {
  border-radius: 0.6rem;
  background-color: var(--c-primary-10);
  padding: 1rem;
}

.compatible-types__item:has(.cart-purchase) .type-card {
  border-radius: 0.6rem 0.6rem 0 0;
}

.type-card__title {
  color: var(--c-primary);
  font-size: var(--fluid-14-16);
  text-align: center;
  font-weight: 500;
}

.type-card__title span {
  white-space: nowrap;
}

.type-card__title span:not(:last-child)::after {
  content: "／";
}

.type-card__faucets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1rem;
}

.type-card__faucet:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  max-width: 50%;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .type-card__faucet:last-child:nth-child(odd) {
    grid-column: auto;
    max-width: none;
    margin-inline: 0;
  }
}

.type-card__faucet img {
  overflow: hidden;
  border-radius: 0.6rem;
  object-fit: cover;
  padding: 2rem;
  /* box-sizing: content-box; */
  background: #FFF;
  /* width: calc(100% - 2rem); */
  /* height: auto; */
  aspect-ratio: 1;
}

.type-card__cartridge {
  width: 20rem;
  border-radius: 0.6rem;
  margin-top: 1rem;
  background-color: #FFF;
  padding: 0 1rem 1rem;
  margin-inline: auto;
  border: 1px solid var(--c-secondary);
}

.type-card__cartridge:not(:has(.type-card__cartridge-label)) {
  display: grid;
  place-items: center;
}

.type-card__cartridge-image-photo {
  width: 12rem;
  margin-inline: auto;
}

.type-card__cartridge-label {
  font-size: var(--fluid-12-14);
  font-weight: 500;
  color: #FFF;
  min-height: 2.2rem;
  display: grid;
  align-items: center;
  text-align: center;
}

.type-card__cartridge-label+.type-card__cartridge-label {
  margin-top: 0.4rem
}

.type-card__cartridge-label--standard {
  /* font-size: var(--fz-12); */
  /* font-weight: 500; */
  /* color: #FFF; */
  background-color: var(--c-secondary);
  /* display: block; */
}

.type-card__cartridge-label--high {
  background-color: var(--c-primary);
}

.type-card__cartridge-label--max {
  background-color: var(--c-third);
}

.type-card__caption {
  font-size: var(--fluid-12-14);
  margin-top: 1rem;
  /* display: flex; */
  align-items: center;
  text-align: justify;
  flex-wrap: wrap;
}

.type-card__caption-cartridge {
  color: #FFF;
  background-color: var(--c-third);
  font-size: var(--fz-12);
  display: inline-block;
  padding: 0.1rem 0.5rem;
  margin-inline: 0.5em;
}

@media (min-width: 768px) {
  .compatible-types {
    padding: 5rem 10rem 0;
  }


  .type-card {
    display: grid;
    grid-template-columns: 9rem 1fr 20rem;
    gap: 1rem;
  }

  .type-card__title {
    display: flex;
    flex-direction: column;
    text-align: left;
  }

  .type-card__title span {
    display: block;
  }

  .type-card__title span:not(:last-child)::after {
    content: none;
  }

  .type-card__faucets {
    grid-template-columns: repeat(4, 16rem);
    margin-top: 0;
  }

  .type-card__cartridge {
    margin-top: 0;
    padding-bottom: 0;
  }

}

/* 浄水カートリッジ適応タイプ ガイド */
.cartridge-guide {
  background-color: #fff;
  padding-top: 3rem
}

.cartridge-guide__header {
  background-color: var(--c-primary-10);
  border-radius: 0.4rem;
  padding: 1rem 0rem 1.4rem;
  text-align: center;
  margin-top: 3rem;
}

.cartridge-guide__header-bath {
  margin-top: 0;
}

.cartridge-guide__title {
  color: var(--c-primary);
  font-size: var(--fluid-20-32);
}

.cartridge-guide__description {
  font-size: var(--fluid-14-18);
  margin-top: 1rem;
  text-align: center;
}

.cartridge-guide__code {
  margin-top: 1rem;
}

.cartridge-guide__code-text {
  font-size: var(--fluid-14-20);
  text-align: center;
}

.cartridge-guide__code-image {
  margin-top: 1rem;
}

@media (min-width: 768px) {
  .cartridge-guide__header {
    margin-top: 5rem;
    padding: 2rem 0;
  }

  .cartridge-guide__header-bath {
    margin-top: 0;
  }

  .cartridge-guide__description {
    margin-top: 2rem;
    text-align: center;
  }

  .cartridge-guide__code-text {
    margin-top: 2rem;
  }

  .cartridge-guide__code-image {
    width: 63.6rem;
    margin-inline: auto;
  }
}

.recommend-cartridge__grid {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows:
    auto
    /* 1: title */
    auto
    /* 2: image */
    auto
    /* 3: price */
    auto
    /* 4: spec-heading */
    auto
    /* 5: spec-label (ろ過流量) */
    auto
    /* 6: spec-value */
    auto
    /* 7: spec-label (最小動水圧) */
    auto
    /* 8: spec-value */
    auto
    /* 9: spec-label (材料の種類) */
    auto
    /* 10: spec-value */
    auto
    /* 11: spec-label (ろ材の種類) */
    auto;
  /* 12: spec-value */
  margin-top: 7.3rem;
}

.recommend-cartridge__card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 12;
}

.recommend-cartridge__title {
  text-align: center;
  color: #FFF;
  display: grid;
  align-items: center;
  position: relative;
  line-height: 1.4;
  padding-block: 0.8rem 0.6rem;
}

.recommend-cartridge__target {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.1em;
  font-size: 0.9rem;
  white-space: nowrap;
}

.recommend-cartridge__target::before,
.recommend-cartridge__target::after {
  content: "";
  display: block;
  width: 1em;
  height: 1px;
  background: currentColor;
  flex-shrink: 0;
}

.recommend-cartridge__count {
  font-size: 1.6rem;
  display: block;
  font-weight: 400;
  white-space: nowrap;
}

.recommend-cartridge__type {
  font-size: 1rem;
  line-height: 1.4;
  display: block;
  border-top: 1px solid #ffffff47;
  margin-inline: 1rem;
  padding-top: 0.6rem;
  white-space: nowrap;
  margin-top: 0.5rem;
}

.recommend-cartridge__image {
  margin-block: 1rem;
}

.recommend-cartridge__price {
  text-align: center;
}

.recommend-cartridge__price-amount {
  font-weight: 500;
  font-size: var(--fz-20);
}

/* 3カラム横断: spec-heading, spec-label */
.recommend-cartridge__spec-heading {
  font-size: var(--fz-14);
  margin-top: 2.2rem;
}

/* ヘッダー要素を非表示 */
.recommend-cartridge__card .recommend-cartridge__spec-heading,
.recommend-cartridge__card .recommend-cartridge__spec-label {
  /* display: none; */
  visibility: hidden;
  white-space: nowrap;
}

@media (min-width: 768px) {

  .recommend-cartridge__card .recommend-cartridge__spec-heading,
  .recommend-cartridge__card .recommend-cartridge__spec-label {
    /* display: none; */
    visibility: visible;
    font-size: var(--fz-16);
  }
}

.recommend-cartridge__card:first-child .recommend-cartridge__spec-heading,
.recommend-cartridge__card:first-child .recommend-cartridge__spec-label {
  /* subgrid内で3カラム分の幅を確保 */
  /* display: block; */
  width: calc((100% * 3) + (0.5rem * 2));
  overflow: visible;
  white-space: nowrap;
  font-weight: 400;
  visibility: visible;
  white-space: nowrap;
}

@media (min-width: 768px) {

  .recommend-cartridge__card:first-child .recommend-cartridge__spec-heading,
  .recommend-cartridge__card:first-child .recommend-cartridge__spec-label {
    /* subgrid内で3カラム分の幅を確保 */
    width: calc((100% * 3) + (0.5rem * 2));
    overflow: visible;
    white-space: nowrap;
    font-weight: 400;
    font-size: var(--fz-16);
  }
}

.recommend-cartridge__spec-label {
  text-align: center;
  font-size: var(--fz-12);
  background-color: var(--c-primary-10);
  line-height: 1.4;
  padding-block: 0.5rem;
  /* margin-top: 1rem; */
  font-weight: 400;
  /* opacity: 0.5; */
  white-space: nowrap;
}

@media (min-width: 768px) {
  .recommend-cartridge__spec-label {
    background-color: unset;
    text-align: left;
  }
}

.recommend-cartridge__spec-value {
  font-size: var(--fz-12);
  text-align: center;
  white-space: nowrap;
}

.recommend-cartridge__badge {
  position: absolute;
  left: 50%;
  top: 0;
  font-size: var(--fluid-18-32);
  transform: translate(-50%, -100%);
  color: var(--c-primary);
  white-space: nowrap;
  font-weight: 500;
  padding-bottom: 1rem;
}

.recommend-cartridge__title--standard {
  background-color: var(--c-secondary)
}

.recommend-cartridge__title--high {
  background-color: var(--c-primary)
}

.recommend-cartridge__title--max {
  background-color: var(--c-third)
}

.cartridge-note {
  font-size: var(--fluid-12-14);
  margin-top: 1.3rem;
  text-align: justify;
}

@media (min-width: 768px) {
  .recommend-cartridge__grid {
    margin-top: 11.4rem;
    gap: 0.5rem 2rem;
  }

  .recommend-cartridge__title {
    min-height: 10rem;
    white-space: nowrap;
    padding-block: 1.5rem 1.3rem;
  }

  .recommend-cartridge__target {
    font-size: 1.2rem;
  }

  .recommend-cartridge__count {
    font-size: var(--fz-24);
  }

  .recommend-cartridge__type {
    font-size: 1.6rem;
    margin-inline: 3.5rem;
    padding-top: 0.6rem;
    margin-top: 0.4rem;
  }

  .recommend-cartridge__image {
    margin-block: 1rem;
  }

  .recommend-cartridge__price {
    font-size: var(--fz-14);
    text-align: left;
  }

  .recommend-cartridge__price-amount {
    font-weight: 500;
    font-size: var(--fz-24);
  }

  .recommend-cartridge__spec-heading {
    border-bottom: 1px solid #DDD;
    width: auto !important;
    padding-bottom: 0.5rem;
  }

  .recommend-cartridge__spec-label {
    width: auto !important;
  }

  .recommend-cartridge__spec-value {
    font-size: var(--fz-16);
    text-align: justify;
  }

  .recommend-cartridge__spec-row {
    border-bottom: 1px solid #DDD;
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
    padding-block: 0.2rem 0.5rem;
  }

  .recommend-cartridge__spec-row-sm {
    display: grid;
    grid-template-columns: auto auto;
  }

  .recommend-cartridge__spec-row-sm,
  .recommend-cartridge__spec-row-sm * {
    font-size: var(--fz-14) !important;
    display: grid;
    grid-auto-columns: auto 1fr;
    justify-content: start;
    align-items: baseline;
  }

  .recommend-cartridge__spec-row-sm .recommend-cartridge__spec-label::before {
    content: "●"
  }

  .recommend-cartridge__spec-row-sm .recommend-cartridge__spec-label::after {
    content: "…"
  }

  .recommend-cartridge__spec-row-sm .recommend-cartridge__spec-label {
    display: flex
  }

  .recommend-cartridge__spec-row-sm .recommend-cartridge__spec-label {
    white-space: nowrap
  }

  .recommend-cartridge__card .recommend-cartridge__spec-row-sm {
    margin-top: 2rem;
  }

  .recommend-cartridge__spec-row-sm+.recommend-cartridge__spec-row-sm {
    margin-top: -0.7rem !important;
  }

  .cartridge-note {
    margin-top: 3rem;
  }
}

.cartridge-capability {
  text-align: center;
  margin-top: 4rem;
}

@media (min-width: 768px) {


.cartridge-capability {
  
  margin-top: 5rem;
}

}


.cartridge-capability__heading {
  font-size: var(--fluid-24-36);
  color: var(--c-primary);
  /* margin-top: 3rem; */
}

.cartridge-capability__lead {
  font-size: var(--fluid-14-18);
  margin-top: 0.8rem;
  text-align: center;
}

}

.section-nav {
  padding-top: 4rem;
  background-color: #FFF;
}

@media (min-width: 768px) {
  .section-nav {
    padding-top: 0;
  }
}

/* purchase-links, cart-purchase は global.css に移動済み */

/* MARK:浴室用品の浄水カートリッジ */
.bathroom-cartridge {
  background-color: #fff;
  padding: 4rem 2rem 4rem;
}

@media (min-width: 768px) {
  .bathroom-cartridge {
    padding: 5rem 10rem 10rem;
  }
}

.tab-panel {
  overflow: hidden;
  border-radius: 0.6rem 0.6rem 0 0;
}

.tab-panel.is-hidden {
  display: none;
}

/* タブパネルのフェードアニメーション */
.tab-panel>* {
  opacity: 1;
  transition: opacity 0.3s ease;
}

.tab-panel.is-fading>* {
  opacity: 0;
}

/* MARK:タブ切り替え */
.search-tab {
  display: flex;
  gap: 1px;
  justify-content: center;
  margin-top: 2.7rem;
}

.search-tab__item {
  background-color: #e1e6f0;
  border-radius: 0.6rem 0.6rem 0 0;
  overflow: hidden;
}

.search-tab__button {
  gap: 1rem;
  border-radius: 0.6rem 0.6rem 0 0;
  padding: 2rem 1rem 1.2rem 1rem;
  width: 11.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: space-between;
}

.search-tab__button:hover {
  opacity: 0.5;
}

.search-tab__button.is-active {
  background-color: #fff;
}

.search-tab__button.is-active:hover {
  opacity: 1;
}

.search-tab__image {
  object-fit: contain;
  width: 7rem;
  height: auto;
}

.search-tab__image-kitchen {
  width: 5.7rem;
}

.search-tab__image-bath {
  width: 7.6rem;
}

.search-tab__image-life {
  width: 5.7rem;
}

.search-tab__text {
  font-size: var(--fluid-16-18);
  font-weight: 500;
  color: var(--c-primary);
}

@media (min-width: 768px) {
  .search-tab {
    gap: 2rem;
  }

  .search-tab__button {
    gap: 2rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 32rem;
    padding: 2rem 0;
    justify-content: center;
  }

  .search-tab__image {
    /* aspect-ratio: 103 / 82; */
    object-fit: contain;
    width: 7.5rem;
    height: auto;
  }

}