.listWarp {
  padding: 80px 50px;
  display: flex;
  flex-wrap: wrap;
  /* justify-content: space-between; */
}

@media only screen and (max-width: 640px) {
  .listWarp {
    padding: 0 10px;
  }
}

@media only screen and (min-width: 640px) and (max-width: 1024px) {
  .listWarp {
    padding: 0 50px;
  }
}

.listWarp-min {
  justify-content: space-between;
  padding: 80px 50px;
}

@media only screen and (max-width: 640px) {
  .listWarp-min {
    padding: 0;
  }
}

@media only screen and (max-width: 640px) {
  .listWarp-min .listBlock {
    width: calc(50% - 5px);
    margin: 0 0 25px;
    padding: 10px 0 0;
  }
}

/* アコーディオン */

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

  /*アコーディオン全体*/
  .accordion-area {
    list-style: none;
    /* width: 96%; */
    /* max-width: 900px; */
    margin: 0 auto;
  }

  .accordion-list {
    margin: 10px 0;
    padding: 0 10px;
  }

  /* .accordion-area section {
	border: 1px solid #ccc;
} */

  /*アコーディオンタイトル*/
  .title-sub {
    position: relative;
    cursor: pointer;
    font-size: 1rem;
    font-weight: normal;
    padding: 1em;
    /* transition: all 4s ease-in-out 1s; */
    background-color: var(--bk);
    font-weight: bold;
    color: var(--mdwh);
  }

  /*アイコンの＋と×*/
  .title-sub::before,
  .title-sub::after {
    position: absolute;
    content: "";
    width: 15px;
    height: 2px;
    background-color: var(--mdwh);
  }

  .title-sub::before {
    top: 48%;
    left: 15px;
    transform: rotate(0deg);
    transition: all 0.5s;
  }

  .title-sub::after {
    top: 48%;
    left: 15px;
    transform: rotate(90deg);
    transition: all 0.5s;
  }

  /*　closeというクラスがついたら形状変化　*/
  .title-sub.open::before {
    transform: rotate(45deg);
    transition: all 0.5s;
  }

  .title-sub.open::after {
    transform: rotate(-45deg);
    transition: all 0.5s;
  }

  /*アコーディオンで現れるエリア*/
  .box {
    display: none;
    /*はじめは非表示*/
    /* background: #f3f3f3;
	margin:0 3% 3% 3%;
    padding: 3%; */
    transition: all 1s;
  }
}

/* アコーディオン end*/

.listBlock {
  width: 33%;
  padding: 0 5px;
  margin: 0 0 75px;
}

@media only screen and (max-width: 640px) {
  .listBlock {
    width: 100%;
    padding: 0;
    margin: 0 0 50px;
  }
}

@media only screen and (min-width: 640px) and (max-width: 1024px) {
  .listBlock {
    width: 50%;
    padding: 0 5px;
    margin: 0 0 75px;
  }
}

.listBlock a:hover {
  opacity: 0.8;
  transition: 0.8s;
}

.textWarp {
  padding: 2em;
  font-weight: bold;
  word-break: keep-all;
  line-break: strict;
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.3;
  border-left: 2px solid var(--mdwh);
  display: flex;
  flex-direction: column;
  justify-content: center;
  letter-spacing: 0.07em;
  font-family: "roboto", "Helvetica Neue", Helvetica, Arial, Verdana, Roboto, "游ゴシック",
    "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3",
    "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo,
    "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-feature-settings: "palt";
}

@media only screen and (max-width: 640px) {
  .listWarp-min .textWarp {
    padding: 2em 1em;
    border-left: 0px;
  }
}

.brand {
  font-size: 16px;
  letter-spacing: 0.03em;
}

@media only screen and (max-width: 640px) {
  .brand {
    font-size: 12px;
  }
}

.itemTitle {
  font-size: 14px;
  padding: .5em 0 2em;
  font-weight: 600;
  line-height: 1.5;
}

@media only screen and (max-width: 640px) {
  .itemTitle {
    font-size: 16px;
  }
}

@media only screen and (max-width: 640px) {
  .listWarp-min .itemTitle {
    font-size: 12px;
  }
}

.itemName {
  font-size: 10px;
  font-weight: 200;
  padding: 0 0 2.5px;
  display: none;
}

@media only screen and (max-width: 640px) {
  .listWarp-min .itemName {
    font-weight: 400;
  }
}

.release {
  padding: 5px 0 0;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  font-family: "roboto", "Helvetica Neue", Helvetica, Arial, Verdana, Roboto, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.release span {
  padding: 0 5px 0 0;
  color: var(--mdbk);
}

.Breadcrumb {
  padding: 0 50px 1em;
  font-size: 16px;
}

@media only screen and (max-width: 640px) {
  .Breadcrumb {
    padding: 1em 15px;
    font-size: 10px;
  }
}

@media only screen and (min-width: 640px) and (max-width: 1024px) {
  .Breadcrumb {
    padding: 1em;
    font-size: 16px;
  }
}