.modal-mask {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: table;
  transition: opacity .3s ease; }
  .modal-mask .modal-container {
    position: relative; }
    .modal-mask .modal-container .modal-body .desp {
      font-size: .9em;
      line-height: 1.4em; }
    .modal-mask .modal-container .modal-body .btn-skip {
      background: #999;
      color: #ffffff; }
    .modal-mask .modal-container .modal-default-button {
      position: absolute;
      width: 1em;
      height: 1em;
      top: 1.2em;
      right: 1.2em;
      text-align: left; }
      .modal-mask .modal-container .modal-default-button:before {
        content: "\e918";
        display: inline-block;
        position: absolute;
        font-family: "icomoon";
        font-size: 1em;
        color: #424242; }
  .modal-mask.modal-email .modal-container {
    padding: 3.25em 2.25em 4em; }
  .modal-mask.modal-email .title {
    font-size: 1em;
    font-weight: 500;
    color: #000;
    margin-bottom: .5em; }
  .modal-mask.modal-email .error-msg {
    font-size: .8em;
    color: #f00;
    font-weight: 600;
    overflow: hidden;
    padding-right: 1em; }
    .modal-mask.modal-email .error-msg:before {
      content: "*";
      display: inline-block; }
  .modal-mask.modal-email input {
    width: 100%;
    height: 3.2em;
    font-size: .7em;
    color: #4d4d4d;
    border: 1px solid #b4b4b4;
    padding: 0 1.5em;
    margin: 1em 0 1.8em;
    outline: none;
    border-radius: 0;
    box-shadow: none;
    -webkit-appearance: none; }
    .modal-mask.modal-email input::-ms-clear, .modal-mask.modal-email input::-ms-reveal {
      display: none; }
  .modal-mask.modal-email .af-sp-btn {
    font-size: .7em;
    width: 12em;
    float: right;
    color: #ffffff; }
  .modal-mask.modal-email .modal-opt:after {
    content: "";
    display: block;
    clear: both; }
  .modal-mask.modal-QRcode .modal-body {
    text-align: center; }
  .modal-mask.modal-QRcode .desp {
    width: 50%;
    margin: 1em auto;
    font-size: .9em;
    line-height: 1.4em;
    text-align: center; }
  .modal-mask.modal-FB-no .title {
    font-size: .9em;
    color: #000;
    margin-bottom: 1em; }
  .modal-mask.modal-FB-no .af-sp-btn {
    font-size: .7em;
    width: 8.5em;
    float: right;
    text-transform: uppercase;
    margin-right: .5em; }
  .modal-mask.modal-FB-yes01 .modal-body {
    text-align: center;
    padding-top: 2em; }
  .modal-mask.modal-FB-yes01 .desp {
    font-size: .9em;
    padding-bottom: 2em; }
  .modal-mask.modal-FB-yes01 ul li {
    display: inline-block;
    cursor: pointer; }
    .modal-mask.modal-FB-yes01 ul li p {
      opacity: 0;
      font-size: .6em;
      padding-top: .5em; }
    .modal-mask.modal-FB-yes01 ul li:before {
      content: "\e90b";
      display: inline-block;
      font-family: "icomoon";
      font-size: 2.4em;
      padding: 0 .18em;
      color: #b4b4b4; }
    .modal-mask.modal-FB-yes01 ul li.feel-very-bad:before {
      content: "\e90b"; }
    .modal-mask.modal-FB-yes01 ul li.feel-bad:before {
      content: "\e90d"; }
    .modal-mask.modal-FB-yes01 ul li.feel-ok:before {
      content: "\e90c"; }
    .modal-mask.modal-FB-yes01 ul li.feel-good:before {
      content: "\e90e"; }
    .modal-mask.modal-FB-yes01 ul li.feel-very-good:before {
      content: "\e90f"; }
    .modal-mask.modal-FB-yes01 ul li:hover {
      color: #006ce1; }
      .modal-mask.modal-FB-yes01 ul li:hover:before {
        color: #006ce1; }
      .modal-mask.modal-FB-yes01 ul li:hover p {
        opacity: 1; }
  .modal-mask.modal-FB-yes02 .modal-body {
    padding: 1em 0 1.2em; }
  .modal-mask.modal-FB-yes02 .desp {
    text-align: center;
    padding-bottom: .8em; }
    .modal-mask.modal-FB-yes02 .desp:before {
      content: "";
      display: inline-block;
      position: relative;
      font-family: "icomoon";
      font-size: 2.4em;
      color: #006ce1;
      padding-right: .3em;
      vertical-align: middle; }
    .modal-mask.modal-FB-yes02 .desp.feeling0:before {
      content: "\e90f"; }
    .modal-mask.modal-FB-yes02 .desp.feeling1:before {
      content: "\e90e"; }
    .modal-mask.modal-FB-yes02 .desp.feeling2:before {
      content: "\e90c"; }
    .modal-mask.modal-FB-yes02 .desp.feeling3:before {
      content: "\e90d"; }
    .modal-mask.modal-FB-yes02 .desp.feeling4:before {
      content: "\e90b"; }
  .modal-mask.modal-FB-yes02 input {
    width: 100%;
    border: 1px solid #b4b4b4;
    font-size: .8em;
    height: 3.5em;
    margin: 1em 0;
    padding: 1.2em; }
  .modal-mask.modal-FB-yes02 .af-sp-btn {
    font-size: .7em;
    width: 8.5em;
    float: right;
    text-transform: uppercase;
    margin-right: .5em;
    color: #ffffff; }
  .modal-mask.modal-FB-yes03 .modal-body {
    padding: 2.6em 0 1.2em;
    text-align: center; }
  .modal-mask.modal-FB-yes03 .desp {
    padding-bottom: .8em; }
    .modal-mask.modal-FB-yes03 .desp:after {
      content: "\e93c";
      display: inline-block;
      font-family: "icomoon";
      font-size: 2em;
      vertical-align: middle;
      padding-left: .5em; }
  .modal-mask.modal-FB-yes03 .af-sp-btn {
    font-size: .7em;
    width: 8.5em;
    text-transform: uppercase;
    margin: 1em 0;
    height: 2.6em;
    line-height: 2.6em;
    color: #ffffff; }

.modal-wrapper {
  display: table-cell;
  vertical-align: middle; }

.modal-container {
  width: 590px;
  margin: 0 auto;
  padding: 2.75em 2.25em;
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
  transition: all .3s ease; }

.modal-header h3 {
  margin-top: 0;
  color: #42b983; }

.modal-body {
  margin: 20px 0; }

.modal-default-button {
  float: right; }

/*
 * The following styles are auto-applied to elements with
 * transition="modal" when their visibility is toggled
 * by Vue.js.
 *
 * You can easily play with the modal transition by editing
 * these styles.
 */
.modal-enter {
  opacity: 0; }

.modal-leave-active {
  opacity: 0; }

.modal-enter .modal-container,
.modal-leave-active .modal-container {
  -webkit-transform: scale(1.1);
  transform: scale(1.1); }

@media only screen and (max-width: 730px) {
  .af-sp-faqContent .modal-mask.modal-FB-yes01 ul li p {
    opacity: 1; } }

@media only screen and (max-width: 600px) {
  .af-sp-faqContent .modal-container {
    width: calc(100% - 3em);
    padding: 2em; }
  .af-sp-faqContent .modal-mask.modal-FB-yes01 .modal-body {
    padding-top: 0; }
  .af-sp-faqContent .modal-mask.modal-FB-yes02 .modal-body {
    padding-top: 0; }
  .af-sp-faqContent .modal-mask.modal-FB-no .modal-container {
    padding: 2em 2em 3em; }
  .af-sp-faqContent .modal-mask.modal-FB-no .modal-body {
    margin-top: 0; }
  .af-sp-faqContent .modal-mask.modal-email .modal-container {
    padding: 2.5em 1.5em 3em; } }