@charset "utf-8";

/* voice list */
.no-voice-list {
  text-align: center;
}
.voice-list {
  display: flex;
  flex-wrap: wrap;
  border: none;
  margin-top: -2rem;
}
.voice {
  flex: 0 0 calc(100% / 3 - 2rem);
  margin: 3rem 1rem 0;
}
.voice-heading {
  padding: .25em .5em;
  background-color: #FF9933;
  color: #fff;
  text-align: left;
  font-size: 18px;
}
.voice-row {
  display: flex;
  margin-top: 1rem;
}
.voice-thumb {
  flex: 0 0 55%;
}
.voice-thumb-inner {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 149.2957%;
  background-position: center;
  background-size: cover;
}
.voice-thumb-flag {
  position: absolute;
}
.voice-thumb-flag.--today_flg {
  text-align:center;
  color:#cc0000;
  display:block;
  margin:-12px 0px 0px -12px;
  left: -12px;
  top: -12px;
  width:48px;
  height:48px;
  position:absolute;
  -webkit-align-items: center; /* 縦方向揃え（Safari用） */
  align-items: center; /* 縦方向揃え */
  -webkit-justify-content: center; /* 横方向揃え（Safari用） */
  justify-content: center; /* 横方向揃え */
  transform: rotate(-10deg);
  -ms-transform: rotate(-10deg);
  -moz-transform: rotate(-10deg);
  -webkit-transform: rotate(-10deg);
  -o-transform: rotate(-10deg);
}
.voice-thumb-flag.--today_flg .icon {
  text-align:center;
  color:#ff1f98;
  display:block;
  margin:0px 0px 0px 0px;
  width:48px;
  height:48px;
  line-height:48px;
  position:absolute;
}
.voice-thumb-flag.--today_flg span {
  text-align:center;
  font-size:12px;
  color:#ffffff;
  display:block;
  margin:8px 0px 0px 0px;
  width:48px;
  height:48px;
  line-height:14px;
  position:absolute;
  font-weight: bold;
  z-index:2;
}

.voice-thumb-flag.--update_flg_1 {
  right: 0;
  top: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 40px 0 0 40px;
  border-color: #eb8603 transparent transparent transparent;
  position:absolute;
}
.voice-thumb-flag.--update_flg_1 span{
  font-weight: bold;
  font-size:12px;
  color:#ffffff;
  margin:-35px 0px 0px -18px;
  display:block;
  position:absolute;
  transform: rotate(-10deg);
  -ms-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -o-transform: rotate(45deg);
}

.voice-thumb-flag.--update_flg_2 {
  right: 0;
  top: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 40px 0 0 40px;
  border-color: #cc0000 transparent transparent transparent;
  position:absolute;
}
.voice-thumb-flag.--update_flg_2 span{
  font-weight: bold;
  font-size:12px;
  color:#ffffff;
  margin:-36px 0px 0px -22px;
  display:block;
  position:absolute;
  transform: rotate(-10deg);
  -ms-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -o-transform: rotate(45deg);
}

.voice-body {
  flex: 1 1 100%;
  margin-left: 1rem;
}
.voice-text-list {}
.voice-text {
  text-align: left;
  font-weight: normal;
  color: #666666;
}
.voice-text strong {
  font-size: 1.4em;
  font-weight: bold;
}
.voice-text.--name {}
.voice-text.--age {}
.voice-text.--size {
  color: #704d39;
}
.voice-button-list {
  margin-top: 1rem;
}
.voice-button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4em;
  margin-top: 1rem;
  cursor: pointer;
  font-size: 14px;
}
.voice-button.--voice {
  background-color: #FF64BF;
  color: #fff;
}
.voice-button.--profile {
  background-color: #FFCC66;
  color: #000;
}