@charset "UTF-8";
/*--=== SP ONLY max-width: 767px ===-- / */
@media screen and (max-width: 767px) {
  #modal_info {
    display: none;
  }

  /*モーダルの横幅を変更したい場合*/
  .modaal-container {
    max-width: 95%;
  }

  .modaal-content-container {
    padding: 5px;
  }
  .modaal-content-container img {
    display: block;
    width: 100%;
  }

  /*モーダルのボタンの色を変更したい場合*/
  .modaal-close:after,
.modaal-close:before {
    background: #ccc;
  }

  .modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before {
    background: #666;
  }
}
/*--=== / SP ONLY max-width: 767px ===-- */
/*--=== PC ONLY min-width: 768px ===-- / */
@media print, screen and (min-width: 768px) {
  #modal_info {
    display: none;
  }

  /*モーダルの横幅を変更したい場合*/
  .modaal-container {
    max-width: 90%;
  }

  .modaal-content-container {
    padding: 10px;
  }
  .modaal-content-container img {
    display: block;
    width: 100%;
  }

  /*モーダルのボタンの色を変更したい場合*/
  .modaal-close:after,
.modaal-close:before {
    background: #ccc;
  }

  .modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before {
    background: #666;
  }
}
/*--=== / PC ONLY min-width: 768px ===-- */

/*# sourceMappingURL=modal.css.map */