@charset "utf-8";

/*-----------------
塗装色見本
-----------------*/
/** ベース */
.secCommonColorList {
  padding: 40px 0 40px 0;
}
.secCommonColorList a:hover {
  filter: brightness(1.1);
}
.commonColorListContent .title {
  font-size: 32px;
  font-weight: bold;
  line-height: 2;
  margin-bottom: 35px;
}
.commonColorListContent .title span {
  background: #FECB04;
}
.commonColorListContent .text {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 5px;
}
@media only screen and (max-width: 767px) {
  .commonColorListContent .title {
    font-size: 20px;
    margin-bottom: 15px;
  }
  .commonColorListContent .text {
    font-size: 12px;
  }
}

/** ラインナップPC */
.commonColorListContent .colorList {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  margin-top: 20px;
}
.commonColorListContent .colorList .colorItem {
  width: calc(50% - 20px);
  margin-top: 20px;
}
.commonColorListContent .colorItem .itemWrap {
  display: flex;
  justify-content: space-between;
}
.commonColorListContent .colorItem .itemWrap .item {
  width: calc(50% - 20px);
}
.commonColorListContent .colorItem .itemWrap .arrowRight {
  position: relative;
}
.commonColorListContent .colorItem .itemWrap .arrowRight::after {
  content: "";
  left: 50%;
  top: 50%;
  position: absolute;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 20px solid #FECB04;
  transform: translate(-50%, -50%);
}
.commonColorListContent .colorList .colorItem p {
  margin-bottom: 10px;
}
.commonColorListContent .colorList .colorItem img {
  width: 100%;
}
.commonColorListContent .colorList .colorItem:nth-of-type(1), .commonColorListContent .colorList .colorItem:nth-of-type(2) {
  margin-top: 0;
}

/** ラインナップSP */
.commonColorListContent .colorListSp {
  width: 100%;
  margin-top: 10px;
}
.commonColorListContent .colorListSp .colorItem {
  width: 100%;
  max-width: 451px;
  margin-top: 20px;
}
.commonColorListContent .colorListSp .colorItem img {
  width: 100%;
}

/*-----------------
パターン比較
-----------------*/
/** ベース */
.secCommonPatternList {
  padding: 0 0 0 0;
}
.secCommonPatternList a:hover {
  filter: brightness(1.1);
}
.commonPatternListContent .title {
  font-size: 32px;
  font-weight: bold;
  line-height: 2;
  margin-bottom: 35px;
}
.commonPatternListContent .title span {
  background: #FECB04;
}
.commonPatternListContent .text {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 5px;
}
@media only screen and (max-width: 767px) {
  .commonPatternListContent .title {
    font-size: 20px;
    margin-bottom: 15px;
  }
  .commonPatternListContent .text {
    font-size: 14px;
  }
}

/** ラインナップPC */
.commonPatternListContent .patternList {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  margin-top: 40px;
}
.commonPatternListContent .patternList .patternItem {
  width: calc(50% - 20px);
  margin-top: 20px;
}
.commonPatternListContent .patternItem .itemWrap {
  display: flex;
  justify-content: space-between;
}
.commonPatternListContent .patternItem .itemWrap .item {
  width: calc(50% - 20px);
}
.commonPatternListContent .patternItem .itemWrap .item .text.info{
  line-height: 2;
  margin-bottom: 5px;
}
.commonPatternListContent .patternItem .itemWrap .arrowRight {
  position: relative;
}
.commonPatternListContent .patternItem .itemWrap .arrowRight::after {
  content: "";
  left: 50%;
  top: 65%;
  position: absolute;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 20px solid #FECB04;
  transform: translate(-50%, -50%);
}
.commonPatternListContent .patternList .patternItem p {
  margin-bottom: 10px;
}
.commonPatternListContent .patternList .patternItem img {
  width: 100%;
}
.commonPatternListContent .patternList .patternItem:nth-of-type(1), .commonPatternListContent .patternList .patternItem:nth-of-type(2) {
  margin-top: 0;
}
.commonPatternListContent .patternItem .itemWrap .img_area {
  position: relative;
  text-align: left;
}
.commonPatternListContent .patternItem .itemWrap .img_area p {
  position: absolute;
  bottom: 0px;
  left: 0px;
  padding: 5px 6px 5px 6px;
  margin-bottom: 0;
  background-color: #FECB04;
  color: #000000;
  font-size: 14px;
  font-weight: 500;
  width: 100%;
  z-index: 2;
  line-height: 1.5;
}
@media only screen and (max-width: 767px) {
  .commonPatternListContent .patternItem .itemWrap .img_area p {
    font-size: 12px;
  }
}

/** ラインナップSP */
.commonPatternListContent .patternListSp {
  width: 100%;
  margin-top: 40px;
}
.commonPatternListContent .patternListSp .patternItem {
  width: 100%;
  max-width: 451px;
  margin-top: 20px;
}
.commonPatternListContent .patternListSp .patternItem img {
  width: 100%;
}