@charset "utf-8";

/* CSS Document */

.designsample-tab-list {
  margin-bottom: 30px;
  margin-top: 20px;
}

.designsample-tab-list li {}

.designsample-tab-list li a {
  display: block;
  font-weight: bold;
  font-size: 108%;
  border: 1px solid #aaa;
  padding: 10px 0;
  text-align: center;
  color: #222;
  text-decoration: none;
  cursor: pointer;
}

.designsample-tab-list li a i {
  padding-right: 0.3em;
}

.designsample-tab-list li a:hover,
.designsample-tab-list li a.is-active {
  background-color: #222;
  color: #fff;
}

.designsample-tab-list li a img {
  height: 2em;
  margin-right: 0.5em;
  vertical-align: middle;
}

.designsample-list {}

.designsample-list li {
  padding-bottom: 30px;
}

.designsample-list li a {
  color: #222;
  text-decoration: none;
}

.designsample-list-img {
  transition: all 0.2s ease;
}

.designsample-list-img:hover {
  opacity: 0.7;
}

.designsample-list-img img {
  border: 1px solid #ccc;
}

.designsample-list-img figcaption {
  padding-top: 6px;
  font-size: 124%;
  font-weight: bold;
  text-align: center;
}

@media screen and (max-width:768px) {


  .designsample-tab-list {
    margin-bottom: 20px;
    margin-top: 10px;
  }

  .designsample-tab-list li {
    width: 48%;
    padding-bottom: 3px;
  }

  .designsample-tab-list li a {
    font-size: 93%;
    border: 1px solid #aaa;
    padding: 6px 0;
  }


  .designsample-list {}

  .designsample-list li {
    padding-bottom: 10px;
  }

  .designsample-list-img figcaption {
    padding-top: 3px;
    font-size: 85%;
  }

}

.designsample-list-img {
  width: 100%; /* figure自体を親の幅いっぱいに */
}

.designsample-list-img img {
  width: 100%; /* 画像をfigureの幅にフィットさせる */
  height: auto; /* アスペクト比を保って高さ調整 */
  display: block; /* 余計な隙間を消すため */
  border: 1px solid #ccc; /* 既存のスタイル維持 */
}