/* ---sp--- */
/* ---percent--- */
/* personalcolor */
.personalcolor .ttl-type {
  width: 396px;
  height: 316px;
}
.personalcolor .result .result-detail {
  margin: 10px 0;
  align-items: center;
}
.personalcolor .result .result-detail .info li {
  margin-bottom: 18px;
}
.personalcolor .result .type:before {
  top: 22%;
}
.personalcolor .btn-start {
  background: #FFE71F;
}

.feature .colors {
  padding: 30px 50px 50px 50px;
}
.feature .colors .ttl {
  font-weight: 700;
  font-size: 20px;
  margin-top: 10px;
}
@media screen and (max-width: 1180px) {
  .feature .colors .col4 li {
    width: 48%;
    margin-bottom: 20px;
  }
}
.feature .colors .col4 li span {
  width: 264px;
  height: 160px;
  background: transparent;
}
@media screen and (max-width: 1180px) {
  .feature .colors .col4 li span {
    width: 145px;
    height: 145px;
  }
}
@media screen and (max-width: 1180px) {
  .feature .colors .col5 li {
    width: 48%;
    margin-bottom: 20px;
  }
}
.feature .colors .col5 li span {
  width: 209px;
  height: 160px;
  background: transparent;
}
@media screen and (max-width: 1180px) {
  .feature .colors .col5 li span {
    width: 145px;
    height: 145px;
  }
}
@media screen and (max-width: 1180px) {
  .feature .colors .ttl {
    font-size: 14px;
  }
}
.feature .colors .txt {
  margin: 30px auto;
  font-weight: 700;
  font-size: 26px;
  text-align: center;
}
@media screen and (max-width: 1180px) {
  .feature .colors .txt {
    font-size: 16px;
  }
}
.feature .row.material .colors {
  padding: 30px 50px 50px 50px;
}
.feature .row.material .colors .ttl {
  font-weight: 700;
  font-size: 20px;
  margin-top: 10px;
}
@media screen and (max-width: 1180px) {
  .feature .row.material .colors .col4 li {
    width: 48%;
    margin-bottom: 20px;
  }
}
.feature .row.material .colors .col4 li span {
  width: 264px;
  height: 160px;
  background: transparent;
}
@media screen and (max-width: 1180px) {
  .feature .row.material .colors .col4 li span {
    width: 145px;
    height: 145px;
  }
}
@media screen and (max-width: 1180px) {
  .feature .row.material .colors .col5 li {
    width: 48%;
    margin-bottom: 20px;
  }
}
.feature .row.material .colors .col5 li span {
  width: 209px;
  height: 160px;
  background: transparent;
}
@media screen and (max-width: 1180px) {
  .feature .row.material .colors .col5 li span {
    width: 145px;
    height: 145px;
  }
}
@media screen and (max-width: 1180px) {
  .feature .row.material .colors .ttl {
    font-size: 14px;
  }
}
.feature .row.material .colors .txt {
  margin: 30px auto;
  font-weight: 700;
  font-size: 26px;
  text-align: center;
}
@media screen and (max-width: 1180px) {
  .feature .row.material .colors .txt {
    font-size: 16px;
  }
}

#type_spring,
#type_spring2,
#type_autumn,
#type_autumn2,
#type_winter,
#type_winter2,
#type_summer,
#type_summer2 {
  display: none;
}

/* spring */
.feature.spring .colors li:nth-child(1) span {
  background: #EA5548;
}
.feature.spring .colors li:nth-child(2) span {
  background: #A5D4AD;
}
.feature.spring .colors li:nth-child(3) span {
  background: #AFDFE4;
}
.feature.spring .colors li:nth-child(4) span {
  background: #F89686;
}
.feature.spring .colors li:nth-child(5) span {
  background: #FADBDA;
}

/* autumn */
.feature.autumn .colors li:nth-child(1) span {
  background: #FFD700;
}
.feature.autumn .colors li:nth-child(2) span {
  background: #A2482B;
}
.feature.autumn .colors li:nth-child(3) span {
  background: #B29649;
}
.feature.autumn .colors li:nth-child(4) span {
  background: #667534;
}

/* winter */
.feature.winter .colors li:nth-child(1) span {
  background: #E4007F;
}
.feature.winter .colors li:nth-child(2) span {
  background: #D93245;
}
.feature.winter .colors li:nth-child(3) span {
  background: #714F9D;
}
.feature.winter .colors li:nth-child(4) span {
  background: #561620;
}
.feature.winter .colors li:nth-child(5) span {
  background: #000000;
}

/* summer */
.feature.summer .colors li:nth-child(1) span {
  background: #E5B0C3;
}
.feature.summer .colors li:nth-child(2) span {
  background: #A0D8EF;
}
.feature.summer .colors li:nth-child(3) span {
  background: #B7A8CC;
}
.feature.summer .colors li:nth-child(4) span {
  background: #7D7D7D;
}