@charset "UTF-8";

/* Heading */
@media (max-width: 767px){
  .header-main .heading img{
    width: 265px;
    height: auto;
  }
}
@media (min-width: 768px){
  .header-main .heading img{
    width: auto;
    height: 33px;
  }
}



/* Q&A */
.qa{
  border-bottom: 1px dashed #101641;
}
.icon-q{
  position: absolute;
  top: 12px;
  left: 10px;
}
.qa-inner{
  background: #fff;
  border-radius: 100px 10px 10px 10px;
}
@media (max-width: 767px){
  .qa{
    padding-bottom: 40px;
    margin-bottom: 40px;
  }
  .qa-title{
    display: flex;
    align-items: center;
  }
  .qa-title .icon{
    flex: 0 0 41px;
  }
  .qa-title .icon img{
    width: 41px;
    max-width: 41px;
  }
  .qa .per{
    text-align: center;
  }
  .qa .per strong{
    font-size: 200%;
  }
}
@media (min-width: 768px){
  .qa{
    padding-bottom: 40px;
    margin-bottom: 40px;
  }
  .qa-title{
    display: flex;
    align-items: center;
  }
  .qa-title .icon{
    flex: 0 0 41px;
  }
  .qa-title .icon img{
    width: 41px;
    max-width: 41px;
  }
}



/* Voice */
.voice .inner{
  border: 1px solid #111741;
  border-radius: 10px;
  background: url("../img/bg-flag.svg") center top repeat-x;
  background-size: auto 10px;
}
.voice-title-01,
.voice-title-02{
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: auto 4px;
  font-weight: 700;
}
.voice-title-01{
  background-image: url("../img/bg-voice-01-title.svg");
  color: #e6002d;
}
.voice-title-02{
  background-image: url("../img/bg-voice-02-title.svg");
  color: #0075c1;
}
.icon-comment{
  flex: 0 0 24px;
  width: 24px;
  max-width: 24px;
}
.icon-comment img{
}
.icon-face{
  flex: 0 0 98px;
  width: 98px;
  max-width: 98px;
}
@media (max-width: 767px){
  .voice .inner{
    overflow: hidden;
    padding: 20px;
  }
  .voice-title-01,
  .voice-title-02{
    margin-bottom: 15px;
    padding-bottom: 15px;
  }
}
@media (min-width: 768px){
  .voice .inner{
    padding: 30px;
  }
  .voice-title-01,
  .voice-title-02{
    margin-bottom: 20px;
    padding-bottom: 20px;
  }
}



/* Ranking */
.rank-01,
.rank-02,
.rank-03{
  border-bottom-width: 4px;
  border-bottom-style: solid;
}
.rank-01{
  border-bottom-color: #f49e00;
}
.rank-02{
  border-bottom-color: #b0c9cb;
}
.rank-03{
  border-bottom-color: #deaa93;
}
@media (max-width: 767px){
  .icon-rank{
    flex: 0 0 30px;
    width: 30px;
    max-width: 30px;
  }
}
@media (min-width: 768px){
  .icon-rank{
    width: 32px;
    height: auto;
  }
}