@charset "UTF-8";

/* ブランド一覧 */
.brand-section {
  background: url(/img/usr/genre/rA5/bg_sec_02_s.jpg);
  background-size: 100%;
  background-repeat: repeat;
  /* background: #faf5f3; */
  text-align: center;
  line-height: 1.4;
}

.brand-section .inner-wrap {
  margin-bottom: 30px;
}


.brand-section p {
  margin: 5px 0;
  font-size: 13px;
}

.brand-section li a {
  text-decoration: none;
  color: #210100;
}


.brand-section a:hover {
  cursor: pointer;
}

.contents .brand-grid-column {
  margin-bottom: 40px;
}

.brand-grid-column li {
  margin-bottom: 20px;
  background: #fff;
  border-radius: 4px;
  border: solid 1px #967e46;
  box-sizing: border-box;
}

.brand-grid-column li img {
  border-radius: 3px 3px 0 0;
}

.brand-grid-column li p {
  margin: 0;
  padding: 15px 0 20px;
  font-size: 16px;
}

.brand-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 15px;
}

.brand-grid img {
  border-radius: 4px;

}

/* 5件目以降の li 要素を非表示にする（初期状態） */
.brand-grid li:nth-child(n+5) {
  display: none;
}

/* このクラスが付くと、4件目以降の li が表示される */
.brand-grid.is-show-all li:nth-child(n+4) {
  display: block;
}

/* #show-all-btn {
  display: block;
  margin: 15px auto 0;
  padding: 10px 0 11px;
  border-radius: 40px;
  } */

#show-all-btn {
  /* width: 50%; */
  width: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 10px 25px 10px 40px;
  /* font-size: 16px; */
  cursor: pointer;
  background: #57110e;
  color: #fff;
  border-radius: 40px;
  margin: 20px auto;
}

/* アイコン部分のコンテナスタイル */
.button-icon {
  position: relative;
  display: block;
  width: 12px;
  /* アイコンの幅 */
  height: 12px;
  /* アイコンの高さ */
  flex-shrink: 0;
  /* flexアイテムの縮小を禁止 */
}

/* プラスアイコン (+) の共通スタイル */
.button-icon::before,
.button-icon::after {
  content: '';
  position: absolute;
  background-color: #fff;
  /* アイコンの色 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* プラスアイコン (+) の横線（共通） */
.button-icon::before {
  width: 100%;
  height: 2px;
}

/* プラスアイコン (+) の縦線 */
.button-icon.plus-icon::after {
  width: 2px;
  height: 100%;
}

/* マイナスアイコン (-) のスタイル */
.button-icon.minus-icon::after {
  display: none;
}

/* 下エリア */
.bottom-section {
  background: #fff;
}

.bottom-section .cmn-link-btn:not(:last-child) {
  margin-bottom: 20px;
}

/* PC表示 -----------------------------------*/
@media only screen and (min-width: 780px) {

  /* ランキング */
  /* ブランド一覧 */
  .brand-section {
    background: url(/img/usr/genre/rA5/bg_sec_02.jpg);
    background-size: 100%;
    background-repeat: repeat;
  }

  .brand-section a:hover {
    cursor: pointer;
  }

  .contents .brand-grid-column {
    margin-bottom: 40px;
  }

  .brand-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 20px 15px;
  }
}