/* BASE
 * ----------------------------------------------- */
/* MEDIA QUERIES
 * ----------------------------------------------- */
/* PAGES
 * ----------------------------------------------- */
.section-yarn {
  background-color: #faf5ec;
}

.image-yarn img,
.image-commitment img {
  width: 100%;
  height: auto;
}

.section-title img {
  width: 100%;
  height: auto;
}

.section-yarn-commitment {
  background-color: #fafafa;
}
.section-yarn-commitment .title-yarn {
  color: #D1AE15;
  text-align: center;
}
.section-yarn-commitment .wrap-button {
  text-align: center;
}

.list-commitment .title-commitment {
  color: #D1AE15;
  text-align: center;
}
.list-commitment .image-commitment {
  border-radius: 50%;
}
.list-commitment .text {
  text-align: center;
}

.list-yarn {
  display: flex;
  flex-wrap: wrap;
}

@media print, (min-width: 768px) {
  .section-yarn {
    padding: 154px 0 60px;
  }
  .section-yarn .section-title {
    width: 214px;
    margin: 0 auto 63px;
  }
  .section-yarn .text-color {
    margin-bottom: 71px;
  }
  .section-yarn .image-yarn {
    width: 960px;
    margin: 0 auto;
  }

  .section-yarn-commitment {
    padding: 131px 0 229px;
  }
  .section-yarn-commitment .title-yarn {
    font-size: 36px;
    font-weight: 500;
    margin-bottom: 100px;
    letter-spacing: 0.16em;
  }
  .section-yarn-commitment .button-store {
    padding: 10px 158px;
    border-width: 2px;
    font-size: 18px;
  }
}
@media all and (min-width: 768px) and (-ms-high-contrast: none), print and (-ms-high-contrast: active), (min-width: 768px) and (-ms-high-contrast: active) {
  .section-yarn-commitment .button-store {
    padding: 9px 158px 11px;
  }
}
@media print, (min-width: 768px) {
  .section-yarn-commitment .text-common {
    margin-bottom: 36px;
  }

  .list-commitment {
    margin-bottom: 205px;
  }
  .list-commitment .detail-commitment:not(:last-child) {
    margin-bottom: 172px;
  }
  .list-commitment .title-commitment {
    line-height: 1.55;
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 48px;
    letter-spacing: 0.16em;
  }
  .list-commitment .text {
    margin-bottom: 58px;
    line-height: 1.86;
    letter-spacing: 0.24em;
  }
  .list-commitment .image-commitment {
    width: 400px;
    margin: 0 auto;
  }

  .list-yarn {
    width: 780px;
    margin: 0 auto 56px;
  }
  .list-yarn li {
    width: 240px;
    margin: 0 10px 20px;
  }
}
@media only screen and (max-width: 767px) {
  .section-yarn {
    padding-top: 1.43rem;
  }
  .section-yarn .section-title {
    width: 3.24rem;
    margin: 0 auto 0.86rem;
  }
  .section-yarn .text-color {
    margin-bottom: 0.5rem;
  }

  .section-yarn-commitment {
    padding: 1.53rem 0 0.68rem;
  }
  .section-yarn-commitment .title-yarn {
    font-size: 0.32rem;
    font-weight: bold;
    letter-spacing: 0.24em;
    margin-bottom: .51rem;
  }
  .section-yarn-commitment .button-store {
    padding: 0.12rem 1.42rem;
    border-width: 1px;
  }
  .section-yarn-commitment .text-common {
    margin-bottom: 0.52rem;
    letter-spacing: 0.2em;
  }

  .list-commitment {
    margin-bottom: 2.39rem;
  }
  .list-commitment .detail-commitment:not(:last-child) {
    margin-bottom: 2.35rem;
  }
  .list-commitment .title-commitment {
    line-height: 1.47;
    font-size: 0.26rem;
    letter-spacing: 0.24em;
    font-weight: 700;
    margin-bottom: 0.45rem;
  }
  .list-commitment .text {
    margin-bottom: 0.79rem;
    line-height: 1.67;
    letter-spacing: 0.2em;
  }
  .list-commitment .image-commitment {
    width: 4rem;
    margin: 0 auto 0.5rem;
  }

  .list-yarn {
    margin: 0 -0.05rem 0.4rem;
    font-size: 0;
    text-align: center;
    max-height: none;
  }
  .list-yarn li {
    display: inline-block;
    width: 48%;
    max-height: none;
    margin: 0 1% 2%;
  }
  .list-yarn li:not(.md) img {
  	width: 100%;
  	height: auto;
  	max-height: 100%;
  }
}

/*# sourceMappingURL=yarn.css.map */