/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

FAQ CSS

_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/*/
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
/* Variables
-------------------------------------------- */
.contents .ttl h1 {
  color: #666; }
.contents .voice {
  padding: 10px 0 0;
  margin: 0 0 75px; }
  .contents .voice h2 {
    width: 100%;
    height: 150px; }
    .contents .voice h2 span {
      display: block;
      position: relative;
      z-index: 1;
      text-align: center;
      font-size: 20px;
      color: #999;
      letter-spacing: .2em;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%); }
      @media (max-width: 460px) {
        .contents .voice h2 span {
          font-size: 1.4rem; } }
    .contents .voice h2.balloon {
      position: relative;
      margin: 0 auto 50px; }
      .contents .voice h2.balloon::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 0;
        display: inline-block;
        padding: 0;
        width: 150px;
        height: 150px;
        font-weight: bold;
        border-radius: 50%;
        box-sizing: border-box;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%); }
      .contents .voice h2.balloon::before {
        content: "";
        position: absolute;
        top: -30px;
        left: 48%;
        margin-left: -30px;
        border: 15px solid transparent;
        z-index: 0;
        -moz-transform: rotate(-25deg);
        -webkit-transform: rotate(-25deg);
        -o-transform: rotate(-25deg);
        -ms-transform: rotate(-25deg); }
  .contents .voice h3 {
    padding: 0 0 0 30px;
    position: relative;
    font-size: 2rem;
    color: #808080; }
    @media (max-width: 460px) {
      .contents .voice h3 {
        font-size: 1.6rem; } }
    .contents .voice h3::after {
      content: "";
      display: block;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #111;
      position: absolute;
      left: 0;
      top: 42%;
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      -o-transform: translateY(-50%);
      transform: translateY(-50%); }
  .contents .voice .name {
    margin: 30px 0 30px 30px;
    font-size: 1.8rem;
    color: #808080; }
    @media (max-width: 460px) {
      .contents .voice .name {
        margin: 20px 0 20px 30px;
        font-size: 1.4rem; } }
  .contents .voice .txt {
    font-size: 1.6rem;
    margin-bottom: 75px; }
  .contents .voice.cl1 h2.balloon::after {
    background: #F1EBE2; }
  .contents .voice.cl1 h2.balloon::before {
    border-bottom: 45px solid #F1EBE2; }
  .contents .voice.cl1 h3::after {
    background: #F6AD3C; }
  .contents .voice.cl1 .name span.line {
    border-bottom: #F6AD3C solid 2px; }
  .contents .voice.cl2 h2.balloon::after {
    background: #A9DEE9; }
  .contents .voice.cl2 h2.balloon::before {
    border-bottom: 45px solid #A9DEE9; }
  .contents .voice.cl2 h3::after {
    background: #A9DEE9; }
  .contents .voice.cl2 .name span.line {
    border-bottom: #A9DEE9 solid 2px; }
  .contents .voice.cl3 h2.balloon::after {
    background: #FCE9F1; }
  .contents .voice.cl3 h2.balloon::before {
    border-bottom: 45px solid #FCE9F1; }
  .contents .voice.cl3 h3::after {
    background: #F7C9DD; }
  .contents .voice.cl3 .name span.line {
    border-bottom: #F7C9DD solid 2px; }
  .contents .voice.cl4 h2.balloon::after {
    background: #EDF3B7; }
  .contents .voice.cl4 h2.balloon::before {
    border-bottom: 45px solid #EDF3B7; }
  .contents .voice.cl4 h3::after {
    background: #C4D70F; }
  .contents .voice.cl4 .name span.line {
    border-bottom: #C4D70F solid 2px; }
  .contents .voice.cl5 h2.balloon::after {
    background: #F1E4EF; }
  .contents .voice.cl5 h2.balloon::before {
    border-bottom: 45px solid #F1E4EF; }
  .contents .voice.cl5 h3::after {
    background: #BA79B1; }
  .contents .voice.cl5 .name span.line {
    border-bottom: #BA79B1 solid 2px; }
  .contents .voice a.continuedBtn {
    display: block;
    text-align: right;
    margin-top: 25px; }