.vote-area {
  padding: 40px 0;
}

@media screen and (max-width: 480px) {
  .vote-area {
    padding: 15px 0;
  }
}

.vote-container {
  display:grid;
  grid-template-columns: 1fr 1fr;
  width: 1180px;
  margin: 0 auto;
}

@media screen and (max-width: 480px) {
  .vote-container {
    display: block;
    width: 100%;
  }
}

.nazo-area {
  padding:0 12%;
}

@media screen and (max-width: 480px) {
  .nazo-area {
    width: 100%;
    padding: 16px;
  }
}

.user-title {
  color: #c2a261;
}
.user-name-area {
  display:flex;
}

.user-name-area p {
  font-size: 1.5rem;
  margin:auto 20px auto 0;
  white-space: nowrap;
}

@media screen and (max-width: 480px) {
  .user-name-area p {
    font-size: 1.2rem;
    margin: auto 10px auto 0;
    white-space:normal;
  }
}

.user-name-area span {
  font-size: 0.8em;
  margin:auto 20px auto 0;
}

.user-name-area img {
  margin:auto 0 auto auto;
  height:39px;
}

.nazo-img-area source {
  width:100%;
  cursor:pointer;
}

.nazo-img-area img {
  width:100%;
  cursor:pointer;
}

.fav-button-area {
  text-align: center;
  overflow: hidden;
}

.fav-button-area img {
  padding:20px;
  cursor:pointer;
}

@media screen and (max-width: 480px) {
  .fav-button-area img {
    position: relative;
    padding: 0;
    left: 50%;
    transform: translateX(-50%) scale(0.8);
  }
}

.draw-button, .twitter-button, .next-vote-button {
  text-align: center;
}

.draw-button img{
  cursor:pointer;
}

.twitter-button img {
  cursor:pointer;
}

@media screen and (max-width: 480px) {
  .draw-button img {
    height: 50px;
  }
}

.comment-area img {
  width:100%;
}

.action-container {
  width: 1180px;
  margin: 0 auto;
  padding: 40px;
}

@media screen and (max-width: 480px) {
  .action-container {
    display: block;
    width: 100%;
  }
}

.twitter-button, .next-vote-button {
  padding: 10px 0;
}


@media screen and (max-width: 480px) {
  .twitter-button img, .next-vote-button img {
    height: 50px;
  }
}

.author-name {
  white-space: nowrap;
  overflow: hidden; /* ハミ出した部分を隠す */
  text-overflow: ellipsis; /* 「…」と省略 */
  -webkit-text-overflow: ellipsis; /* Safari */
  -o-text-overflow: ellipsis; /* Opera */
}

/* バッジゲット時モーダル設定 */
.get-badge-text-area {
  text-align: center;
  margin:40px 0 0 0;
}

.get-badge-name-area,.get-badge-desc-area,.get-badge-share-btn {
  text-align:center;
}

.get-badge-name-area {
  padding: 0 0 30px 0;
}

.get-badge-text-area span{
  font-size:1.5em;
}

.get-badge-icon-area {
  text-align: center;
}
.get-badge-icon-area img{
  width:25%;
  padding-bottom: 0;
}

.get-badge-share-btn img{
  width:50%;
}

#modalWrapperGetBadge {
  width:40%;
  border:solid 15px #c2a261;
}

@media screen and (max-width: 480px) {
  .get-badge-icon-area img{
    width:40%;
    padding-bottom: 0;
  }

  #modalWrapperGetBadge {
    width:80%;
    border:solid 10px #c2a261;
  }
  .get-badge-text-area span{
    font-size:1.1em;
  }
  .get-badge-share-btn img{
    padding-top:20px;
    width:80%;
  }
}

.disabled-btn {
    -webkit-filter:grayscale(100%);
    -moz-filter:grayscale(100%);
    -ms-filter:grayscale(100%);
    filter:grayscale(100%);
}

.vote-riddle-frame {
  border:solid 3px #c2a261;
}

#left-comment-button,#right-comment-button {
  cursor: pointer;
}