.if-category {
  background-color: #ffffff;
}

.if-category_container {
  width: 100%;
  max-width: 900px;
  background-color: #fff;
}

.if-category_inner {
  width: 100%;
}

.if-category_mv {
  width: 100%;
  margin-bottom: 2.5%;
}

.if-category_mv img {
  width: 100%;
}

@media screen and (min-width: 813px) {
  .sp {
    display: none;
  }
}

@media screen and (max-width: 812px) {
  .pc {
    display: none;
  }
}

@media screen and (max-width: 812px) {
  img {
    width: 100%;
  }
}

p {
  font-size: 16px;
  font-weight: bold;
}

.mv-title {
  margin-top: -85px;
  margin-bottom: 60px;
  text-align: center;
}

.mv-title img {
  width: 80%;
}

@media screen and (max-width: 812px) {
  .mv-title {
    margin-top: 40px;
  }
  .mv-title img {
    width: 90%;
    margin: 0 auto;
  }
}

.section_inner {
  width: 753px;
  margin: 0 auto;
  margin-bottom: 65px;
}

@media screen and (max-width: 812px) {
  .section_inner {
    width: 90%;
    margin: 0 auto;
    margin-bottom: 40px;
  }
}

.feature-head {
  text-align: center;
  margin-bottom: 50px;
}

.feature-head img {
  width: 407px;
}

@media screen and (max-width: 812px) {
  .feature-head {
    width: 90%;
    margin: 0 auto;
    margin-bottom: 40px;
  }
  .feature-head img {
    width: 100%;
  }
}

.feature-columns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 228px;
  padding-bottom: 38.5px;
  margin-top: -228px;
  background: linear-gradient(to bottom right, rgba(179, 221, 213, 0.5), rgba(205, 213, 236, 0.5));
  border-radius: 55.76px;
}

@media screen and (max-width: 812px) {
  .feature-columns {
    border-radius: 20px;
    background: linear-gradient(to bottom right, rgba(205, 213, 236, 0.5), rgba(179, 221, 213, 0.5));
  }
}

.feature-item {
  width: 40%;
  margin-right: 5%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 36.5px;
}

.feature-item:nth-child(2n) {
  margin-right: 0;
}

.feature-item img {
  width: 100%;
  margin-bottom: 10px;
}

.feature-item p {
  font-size: 16px;
  display: block;
  width: 92%;
}

@media screen and (max-width: 812px) {
  .feature-item {
    width: 88%;
    margin-right: 0;
    margin-bottom: 32px;
  }
}

.product img {
  width: 100%;
}

@media screen and (max-width: 812px) {
  .product {
    width: 100%;
  }
}

.product-head {
  margin-bottom: 60px;
}

@media screen and (max-width: 812px) {
  .product-head {
    width: 90%;
    margin: 0 auto;
    margin-bottom: 30px;
  }
}

.product-description {
  display: flex;
  width: 70%;
  margin: 0 auto;
}

.product-description__img {
  margin-right: 20px;
}

.product-description__text__fastener p {
  width: 200px;
  height: 76px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #E4B7C7;
  color: #fff;
  font-size: 22px;
}

.products {
  width: 98%;
  margin: 0 auto;
}

.products__item {
  margin-bottom: 50px;
}

.products__item__wrap {
  position: relative;
}

@media screen and (max-width: 812px) {
  .products {
    width: 100%;
  }
  .products__item {
    margin-bottom: 30px;
  }
  .products__item p {
    position: absolute;
    bottom: 14%;
    left: 10%;
  }
}

img.product-check {
  position: absolute;
  bottom: 19%;
  right: 18px;
  width: 230px;
  cursor: pointer;
  transition: all .2s ease-in-out 0s;
}

img.product-check:hover {
  opacity: .85;
}

@media screen and (max-width: 812px) {
  img.product-check {
    bottom: 6.5%;
    right: 19%;
  }
  img.product-check--description-sp {
    bottom: 4.5%;
  }
}

.section_inner.attention {
  text-align: center;
  border: #231815 4px solid;
  padding: 28px 0;
}

.section_inner.attention p.attention-text {
  font-size: 28px;
  line-height: 37px;
  font-weight: bold;
}

.section_inner.attention p.attention-text .small {
  font-size: 21px;
}

.section_inner.attention p.attention-text .red {
  color: #EB6100;
}

@media screen and (max-width: 812px) {
  .section_inner.attention {
    border-width: 3px;
  }
  .section_inner.attention p.attention-text {
    font-size: 22px;
    line-height: 31px;
  }
  .section_inner.attention p.attention-text .small {
    font-size: 16px;
  }
}

/*
==================
Backup until 01/26
==================

img {
  max-width: 100%;
}

.if-category_mv {
  margin-bottom: 0;
}

.bg {
  background: #00a3a3;
}

.section {
  padding-bottom: 70px;

  @include sp {
    padding-bottom: vw(60);
  }
}

.section_inner {
  padding: 0 70px;

  @include sp {
    padding: 0 vw(20);
  }
}

.section_title {
  margin-bottom: 40px;
  text-align: center;

  @include sp {
    margin-bottom: vw(40);
  }
}

.function_list {

  @include pc {
    display: flex;
    justify-content: space-between;
  }

  li {
    @include pc {
      width: 235px;
    }

    @include sp {
      margin-top: vw(40);
    }
  }
}

.function_listImage {
  margin-bottom: 25px;
  height: 235px;
  text-align: center;

  @include sp {
    margin-bottom: vw(25);
    height: vw(315);
  }

  img {
    width: auto;
    height: 100%;
  }
}

.function_listTitle {

  margin-bottom: 20px;
  text-align: center;

  @include sp {
    margin-bottom: vw(20);
  }
}

.function_listText {

  &--spsingle {
    text-align: center;

    @include sp {
      img {
        width: auto;
        height: vw(23);
      }
    }
  }
}

.product {
  padding-top: 60px;

  @include sp {
    padding-top: vw(50);
  }
}

.product_list {

  li {
    margin-bottom: 40px;
    position: relative;

    @include sp {
      margin-bottom: 20px;
    }
  }
}

.product_listImage {
  @include sp {
    margin-bottom: vw(20);
  }
}

.product_listLink {
  display: block;
  position: absolute;

  @include pc {
    bottom: 30-10px;
    right: 80+70px;
    transition: opacity 0.2s ease;
  }

  @include sp {
    margin: auto;
    width: vw(288);
    left: 0;
    right: 0;
    bottom: vw(30);
  }

  &:hover {
    @include pc {
      opacity: 0.8;
    }
  }
}
*/
