/* ================================================== */
/* mobile */

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

/* -------------------------------------------------- */
/* voice */

.voice,
.voice .wrapper {
  position: static;
}
.voice .title {
  margin-bottom: 10px;
  text-align: left;
}
.voice h2.global {
  margin-bottom: 10px;
}
.voice-filter {
  border-bottom: 0;
  margin-bottom: 20px;
}
.voice-filter-box {
  background: var(--main-color2);
  display: none;
  left: 0;
  height: 100vh;
  height: 100svh;
  position: fixed;
  padding: 0 4vw;
  top: 75px;
  width: 100%;
  z-index: 950;
}
.voice-filter-close {
  margin: 4vw 0 20px;
  text-align: right;
}
.voice-filter-close span {
  display: inline-block;
  width: 45px;
}
.voice-filter-title {
  color: #fff;
  font-size: 1.6rem;
}
.voice-filter-select {
  align-items: stretch;
  flex-direction: column;
  justify-content: flex-start;
}
.voice-filter-select select {
  margin-bottom: 10px;
  width: 100%;
}
.voice-filter-decide {
  display: flex;
}
.voice-filter-decide button {
  background: #fff url(../images/arrow-right-button.webp) no-repeat center right 20px / 6.5px 9.5px;
  border: 1px solid var(--main-color1);
  border-radius: 9999px;
  color: var(--main-color1);
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  padding: .85em;
  text-align: center;
  transition: background .2s, border-color .2s;
  width: 360px;
}
.voice-filter-decide button:hover {
  background-color: var(--hover-color);
  border-color: #c1c1c1;
}
.voice-filter-ctrl {
  margin-bottom: 20px;
}
.voice-filter-tag {
  flex-wrap: wrap;
}
.voice-filter-tag ul {
  flex-wrap: wrap;
}
.voice-filter-tag ul li {
  margin-bottom: 5px;
  margin-top: 5px;
}
.voice-filter-tag button {
  margin-bottom: 5px;
  margin-left: 0;
  margin-top: 5px;
}
.voice-filter-sort {
  display: none;
}
.voice-filter-button {
  display: flex;
}
.voice-filter-button button {
  background: #fff url(../images/voice/voice-filter-button.webp) no-repeat center left 7.6vw / 22px 26px;
  border: 1px solid var(--main-color1);
  border-radius: 9999px;
  color: var(--main-color1);
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  padding: .85em;
  text-align: center;
  transition: background .2s, border-color .2s;
  width: 100%;
}
.voice-filter-button button:hover {
  background-color: var(--hover-color);
  border-color: #c1c1c1;
}
.voice-pager {
  border-top: 1px solid #707070;
  margin-top: -15px;
  padding-top: 20px;
}

/* -------------------------------------------------- */
/* enquete */

.enquete .wrapper {
  padding: 0 4vw;
}
.enquete-list {
  margin-bottom: 30px;
}
.enquete-list img {
  width: 25%;
}
.enquete-image {
  margin-top: 40px;
}
.enquete-image::before,
.enquete-image::after {
  display: none;
}
.enquete-image img {
  margin-bottom: 20px;
  width: 100%;
}

/* -------------------------------------------------- */
/* detail */

.detail {
  padding-bottom: 0;
  padding-top: 20px;
}
.detail .voice-level {
  font-size: 1.6rem;
}
.detail .voice-rate {
  font-size: 1.8rem;
}
.detail-title {
  align-items: center;
  background: url(../images/voice/detail-image.webp) no-repeat center left / 14.66vw 14.66vw;
  border-bottom: 0;
  display: flex;
  font-size: 1.8rem;
  justify-content: flex-start;
  margin-bottom: 20px;
  min-height: 14.66vw;
  line-height: 1.65;
  padding-bottom: 0;
  padding-left: 16.66vw;
}
.detail-content {
  margin-bottom: 50px;
}
.detail-image {
  display: none;
}
.detail-table {
  width: 49%;
}
.detail-table table tr th {
  padding: .8em 0;
  width: 40%;
}
.detail dl {
  margin-bottom: 30px;
}
.detail dl dd {
  padding: 30px 25px;
}
.detail dl dd p {
  line-height: 1.65;
}
.detail-pager {
  font-size: 1.6rem;
  padding-bottom: 40px;
}

/* -------------------------------------------------- */
/* list */

.list {
  padding-top: 40px;
}

}