/* ----------------------------------------------------------
General Settings
---------------------------------------------------------- */


/* ----------------------------------------------------------
Style for PCs
---------------------------------------------------------- */
@media screen and (min-width: 1025px) {

ul.voicelist {
  width:100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin: 0 auto;
}

ul.voicelist li {
  width:31.3333333333%;
  height: auto;
  display: flex;
  flex-direction: column;
  /*padding:1.5em 2em;*/
  padding: 0;
  background-color: var(--color-white);
  border-radius: 30px;
  box-shadow: 0px 3px 10px rgba(0,0,0,0.1);
  margin:0 1% 2%;
}
.voicelist li a {
  width:100%;
  height: auto;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  border-radius: 30px;
  transition: .4s all;
}
.voicelist li a:hover {
  background-color: var(--color-7th);
}
.voicelist li a * {
  text-decoration: none;
}
.voicelist li a .vlcc {
  width:100%;
  height: auto;
  display: flex;
  flex-direction: column;
  padding: 1.5em 2em;
}
ul.voicelist li h3 {
  width:100%;
  height: auto;
  display: flex;
  align-items: center;
  font-size: clamp(1rem, 1rem + 1vw, 5rem);
  font-weight: 700;
  color:var(--color-black);
  margin-bottom: 0em;
}
ul.voicelist li a:hover h3 {
  color:var(--color-black);
}
ul.voicelist li h3 span {
  font-size: clamp(1rem, 0.7rem + 0vw, 5rem);
  font-weight: 400;
  margin-right:0.5em;
}
ul.voicelist li h4 {
  font-size: clamp(0.9rem, 0.8rem + 0vw, 5rem);
  font-weight: 600;
  color:var(--color-1st);
  margin-bottom: 0.6em;
}
ul.voicelist li a:hover h4 {
  color:var(--color-1st);
}
ul.voicelist li p.vl_comment {
  font-size: clamp(0.8rem, 0.5rem + 0.5vw, 5rem);
  line-height: 1.8em;
  color:var(--color-black);
  margin-bottom:0;
}
ul.voicelist li a:hover p.vl_comment {
  color:var(--color-black);
}

.voicelist li a .vlcc p.vlcc_bn {
  width:fit-content;
  height: auto;
  display: block;
  margin:1em 0 0 0;
  border-radius: 9999px;
  color:var(--color-black);
  border: 1px solid var(--color-1st);
  padding:0 1em;
  transition: .4s all;
  order:5;
}
.voicelist li a:hover .vlcc p.vlcc_bn {
  color:var(--color-white);
  background-color: var(--color-1st);
}

}

/* ----------------------------------------------------------
Style for iPad Pro
---------------------------------------------------------- */
@media screen and (min-width: 769px) and (max-width: 1024px) {

ul.voicelist {
  width:100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
}

ul.voicelist li {
  width:48%;
  height: auto;
  display: flex;
  flex-direction: column;
  /*padding:1.5em 2em;*/
  background-color: var(--color-white);
  border-radius: 30px;
  box-shadow: 0px 3px 10px rgba(0,0,0,0.1);
  margin:0 1% 2%;
}
.voicelist li a {
  width:100%;
  height: auto;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  border-radius: 30px;
  transition: .4s all;
}
.voicelist li a:hover {
  background-color: var(--color-7th);
}
.voicelist li a * {
  text-decoration: none;
}
.voicelist li a .vlcc {
  width:100%;
  height: auto;
  display: flex;
  flex-direction: column;
  padding: 1.5em 2em;
}
ul.voicelist li h3 {
  width:100%;
  height: auto;
  display: flex;
  align-items: center;
  font-size: 26px;
  font-weight: 700;
  color:var(--color-black);
  margin-bottom: 0em;
}
ul.voicelist li a:hover h3 {
  color:var(--color-black);
}
ul.voicelist li h3 span {
  font-size: 14px;
  font-weight: 400;
  margin-right:0.5em;
}
ul.voicelist li h4 {
  font-size: 16px;
  font-weight: 600;
  color:var(--color-1st);
  margin-bottom: 0.6em;
}
ul.voicelist li a:hover h4 {
  color:var(--color-1st);
}
ul.voicelist li p.vl_comment {
  font-size: 14px;
  line-height: 1.8em;
  color:var(--color-black);
  margin-bottom:0;
}
ul.voicelist li a:hover p.vl_comment {
  color:var(--color-black);
}

.voicelist li a .vlcc p.vlcc_bn {
  width:fit-content;
  height: auto;
  display: block;
  margin:1em 0 0 0;
  border-radius: 9999px;
  color:var(--color-black);
  border: 1px solid var(--color-1st);
  padding:0 1em;
  transition: .4s all;
  order:5;
}
.voicelist li a:hover .vlcc p.vlcc_bn {
  color:var(--color-white);
  background-color: var(--color-1st);
}

}


/* ----------------------------------------------------------
Style for Smartphone
---------------------------------------------------------- */
@media screen and (max-width: 768px) {

ul.voicelist {
  width:100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
}

ul.voicelist li {
  width:100%;
  height: auto;
  display: flex;
  flex-direction: column;
  padding:/*1.5em 2em;*/
  background-color: var(--color-white);
  border-radius: 30px;
  box-shadow: 0px 3px 10px rgba(0,0,0,0.1);
  margin:0 0 20px;
}
.voicelist li a {
  width:100%;
  height: auto;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  border-radius: 30px;
  transition: .4s all;
}
.voicelist li a:hover {
  background-color: var(--color-7th);
}
.voicelist li a * {
  text-decoration: none;
}
.voicelist li a .vlcc {
  width:100%;
  height: auto;
  display: flex;
  flex-direction: column;
  padding: 1.5em 2em;
}
ul.voicelist li h3 {
  width:100%;
  height: auto;
  display: flex;
  align-items: center;
  font-size: 24px;
  font-weight: 700;
  color:var(--color-black);
  margin-bottom: 0em;
}
ul.voicelist li a:hover h3 {
  color:var(--color-black);
}
ul.voicelist li h3 span {
  font-size: 16px;
  font-weight: 400;
  margin-right:0.5em;
}
ul.voicelist li h4 {
  font-size: 16px;
  font-weight: 600;
  color:var(--color-1st);
  margin-bottom: 0.6em;
}
ul.voicelist li a:hover h4 {
  color:var(--color-1st);
}
ul.voicelist li p.vl_comment {
  font-size: 14px;
  line-height: 1.8em;
  color:var(--color-black);
  margin-bottom:0;
}
ul.voicelist li a:hover p.vl_comment {
  color:var(--color-black);
}

.voicelist li a .vlcc p.vlcc_bn {
  width:fit-content;
  height: auto;
  display: block;
  margin:1em 0 0 0;
  border-radius: 9999px;
  color:var(--color-black);
  border: 1px solid var(--color-1st);
  padding:0 1em;
  transition: .4s all;
  order:5;
}
.voicelist li a:hover .vlcc p.vlcc_bn {
  color:var(--color-white);
  background-color: var(--color-1st);
}

}