@charset "UTF-8";

/* ========================================
   @media screen and (min-width: 768px),print
======================================== */
@media screen and (min-width: 768px),print {
/* voice
-------------------------------------*/
#voice .system-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 70px;
  margin-bottom: 40px;
  width: min(95%, 1040px);
  margin-inline: auto;
}
#voice .system-list li a {
  background: #363636;
  height: 330px;
  display: block;
  text-decoration: none;
  transition: opacity 0.3s;
}
#voice .system-list li a:hover {
  opacity: 0.8;
}
#voice .system-list li .system-pic {
  margin-bottom: 0;
}
#voice .system-list li .system-pic img {
  height: 200px;
}
#voice .system-list li .txt-box {
  padding: 14px 21px;
}
#voice .system-list li .system-name {
  font-size: 12px;
  letter-spacing: 0.05em;
  color: #8b8b8b;
  margin-bottom: 3px;
}
#voice .system-list li .system-ttl-01 {
  font-size: 14px;
  line-height: 1.42857;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

/* =================================================
  詳細ページ (is-single) 
================================================= */
#voice main.is-single .system-contents {
  padding-block: 7.5rem 0;
}
#voice main.is-single .system-name {
  font-size: 12px;
  letter-spacing: 0.05em;
  text-align: left;
  color: #8b8b8b;
  margin-bottom: 2px;
}
/* 下部レコメンドエリア（OTHER INTERVIEW） */
#voice main.is-single #main-voice {
  margin-bottom: 60px;
}
#voice main.is-single #main-voice .system-list {
  grid-template-columns: repeat(3, 1fr);
  gap: 70px;
}

}


/* ========================================
   @media screen and (max-width: 767px)
======================================== */
@media screen and (max-width: 767px) {
/* voice
-------------------------------------*/
#voice .system-list {
  display: block;
  margin-bottom: 8.25vw;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
#voice .system-list li {
  /* width: 57.97vw; */
  /* margin-inline: 2.42vw; */
  display: block grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  gap: 0;
  min-height: 65.22vw;
}
#voice .system-list li a {
  background: #363636;
  text-decoration: none;
  transition: opacity 0.3s;
  display: block grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
}
#voice .system-list li a:hover {
  opacity: 0.8;
}
#voice .system-list li .system-pic {
  margin-bottom: 0;
}
#voice .system-list li .system-pic img {
  width: 100%;
  height: 38.65vw;
  object-fit: cover;
}
#voice .system-list li .txt-box {
  padding: 1.5vw 4.62vw;
  min-height: 26.57vw;
}
#voice .system-list li .system-name {
  font-size: 2.9vw;
  letter-spacing: 0.05em;
  color: #8B8B8B;
  margin-bottom: 0.2vw;
}
#voice .system-list li .system-ttl-01 {
  font-size: 3.382vw;
  line-height: 1.42857;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

/* =================================================
  詳細ページ (is-single) 
================================================= */
#voice main.is-single .system-name {
  font-size: 2.898vw;
  letter-spacing: 0.05em;
  color: #8b8b8b;
  margin-bottom: 0.26vw;
}
#voice main.is-single h3.system-ttl-02 {
  font-size: 3.865vw;
  margin-bottom: 4.83vw;
}
#voice main.is-single .gallery-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3.865vw;
  margin-bottom: 9.66vw;
  padding-inline: 2.42vw;
}
#voice main.is-single .gallery-list li span a .img-wrap img {
  height: 21.74vw;
}
#voice main.is-single .gallery-list li span a .img-wrap::after {
  width: 3.865vw;
  height: 3.865vw;
}

#voice main.is-single #main-voice {
  margin-bottom: 12.08vw;
}
#voice main.is-single #main-voice .system-list {
  gap: 4.83vw;
}
}