@charset "UTF-8";

.b-mainContent {
  padding-top: 20px;
}

@media screen and (max-width: 767px) {
  .b-mainContent {
    padding-top: 0;
  }
}
@media screen and (min-width: 768px) {
  .b-mainContent {
    padding-top: 20px;
  }
}

/* ---------------------------------------------

 result

--------------------------------------------- */
.b-resultWrap {
  background: #fff;
  .b-result {
    display: flex;
    background: var(--blue-p);
    .b-txt {
      display: flex;
      span {
        font-size: min(3.5vw,14px);
      }
    }
    .b-partsItem {
      display: flex;
      gap: 0 20px;
      flex-wrap: wrap;
      flex-grow: 1;
      .e-rItem {
        position: relative;
        padding-right: 1.2em;
        .e-close {
          display: flex;
          align-items: center;
          justify-content: center;
          aspect-ratio: 1/1;
          width: 13px;
          border-radius: 50%;
          padding: 0;
          background: var(--txt-p);
          color: #fff;
          font-size: 8px;
          font-weight: 500;
          position: absolute;
          right: 0;
          top: 0;
          cursor: pointer;
          transform: translateY(40%);
        }
      }
    }
  }
  .b-btns {
    .b-btn {
      width: 200px;
      background: var(--blue);
      border-color: var(--blue);
      color: #fff;
      &:disabled {
        border-color: #ccc;
        background: #ccc;
        pointer-events: none;
      }
    }
  }
  .e-caution {
    display: block;
    margin-top: 10px;
    padding-bottom: 5px;
    font-size: min(3.25vw,13px);
    line-height: 1.4;
    color: var(--txt-d);
  }
}
@media screen and (max-width: 767px) {
  .b-resultWrap {
    width: 100dvw;
    margin-left: 50%;
    margin-bottom: 15px;
    transform: translateX(-50dvw);
    .b-result {
      flex-direction: column;
      padding: 15px;
      .b-txt {
        flex-direction: column;
        align-items: center;
        .b-partsItem {
          margin: 5px 0 10px;
        }
      }
    }
    .b-btns {
      .b-btn {
        height: 30px;
        font-size: min(3.75vw,15px);
        margin: auto;
      }
    }
    .e-caution {
      padding: 0 15px 5px;
    }
  }
}
@media screen and (min-width: 768px) {
  .b-resultWrap {
    margin-bottom: 30px;
    .b-result {
      align-items: center;
      padding: 15px 10px 15px 20px;
      border-radius: 5px;
      .b-txt {
        display: flex;
        span {
          flex-shrink: 0;
          display: inline-block;
          padding-right: 1em;
        }
      }
    }
    .b-btns {
      margin-left: auto;
      margin-right: 0;
      .b-btn {
        height: 50px;
        font-size: 18px;
        margin-left: 20px;
        &:hover {
          background: rgb(4 137 168 / .8);
        }
      }
    }
  }
}

/* fixed ---------------------------*/
.b-resultWrap {
  &.fixed {
    width: 100%;
    position: fixed;
    left: 0;
    z-index: 100;
  }
}
@media screen and (min-width: 768px) {
  .b-resultWrap {
    &.fixed {
      padding: 0 50px;
      .b-result,
      .e-caution {
        max-width: 1270px;
        margin: auto;
      }
    }
  }
}


/* ---------------------------------------------

 consumable

--------------------------------------------- */

.b-consumable {
  .b-mds {
    margin-bottom: 30px;
    .e-mds {
      font-size: min(7.5vw,30px);
      color: var(--blue);
    }
  }
  .b-toggle+.b-mds {
    margin-top: 50px;
  }
}

/*　button */
.b-consumable {
  .b-button {
    .e-brand {
      font-family: var(--fontEN);
      font-weight: 300;
      font-size: min(3.5vw,14px);
      letter-spacing: .1em;
    }
    .b-series {
      font-weight: 400;
      .e-txt {
        font-size: min(5vw,20px);
      }
    }
  }
}

/*　content */
.b-consumable {
  .b-content {
    .inner {
      .b-img {
        img {
          border: 1px solid var(--line-t);
        }
      }
    }
  }
}
@media screen and (max-width: 767px) {
  .b-consumable {
    .b-content {
      .inner {
        .b-img {
          margin-bottom: 30px;
        }
      }
    }
  }
}
@media screen and (min-width: 768px) {
  .b-consumable {
    .b-content {
      .inner {
        &:has(.b-img) {
          display: grid;
          gap: 20px;
          grid-template-columns: repeat(2,1fr);
        }
      }
    }
  }
}


/* ---------------------------------------------

 list

--------------------------------------------- */
.b-consumable {
  .b-list {
    .listItem,
    label {
      width: 100%;
      display: flex;
      border-bottom: 1px solid var(--line-t);
      line-height: 1.4;
      text-align: center;
      span,
      .b-check,
      .e-num,
      .e-productNum,
      .e-productName {
        padding: 8px 5px 6px;
        border-left: 1px solid var(--line-t);
      }
      .b-check,
      .e-num,
      .e-productNum,
      .e-productName {
        min-height: 40px;
      }
      span:nth-child(1),
      .b-check {
        width: 40px;
        flex-shrink: 0;
      }
      span:nth-child(2),
      .e-num {
        text-align: center;
        width: 50px;
        flex-shrink: 0;
      }
      span:nth-child(3),
      .e-productNum {
        text-align: center;
        width: 100px;
        flex-shrink: 0;
      }
      span:nth-child(4),
      .e-productName {
        flex-grow: 1;
        padding-left: 10px;
        padding-right: 10px;
      }
    }
    .listItem {
      font-size: min(3.5vw,14px);
      border-top: 1px solid var(--line-t);
      border-right: 1px solid var(--line-t);
      background: var(--bg50);
    }
    label {
      border-right: 1px solid var(--line-t);
      .e-productName {
        text-align: left;
      }
    }
    .b-bottom {
      color: var(--txt-d);
      margin-top: 20px;
      dl {
        display: inline-flex;
        gap: 10px;
        margin-right: 20px;
        font-size: min(3.5vw,14px);
        line-height: 1.5;
      }
    }
  }
}
@media screen and (min-width: 768px) {
  .b-consumable {
    label {
      transition: var(--transition);
      &:hover {
        background: var(--bgblue);
      }
    }
  }
}

/* label */
.b-consumable {
  label {
    &:has(input[type="checkbox"]:checked) {
      background: var(--bgblue);
    }
    .b-check {
      position: relative;
      &::before,
      &::after {
        content: "";
        display: block;
        position: absolute;
        transform-origin: center center;
        transition: var(--transition);
      }
      &::before {
        aspect-ratio: 1/1;
        width: 70%;
        border: 1px solid var(--line-d);
        border-radius: 5px;
        background: #fff;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        z-index: 1;
      }
      &::after {
        aspect-ratio: 2/1;
        width: 28%;
        border-left: 2px solid #fff;
        border-bottom: 2px solid #fff;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-60%) rotate(-50deg);
        z-index: 2;
      }
    }
    /* check */
    .b-check {
      &:has(input[type="checkbox"]:checked) {
        &::before {
          background: var(--blue);
        }
      }
    }
  }
}