@charset "UTF-8";


.overlay {
  display: none;

  position: fixed;
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  z-index: 9;
}

.modal-wrapper {
  display: none;

  position: absolute;
  margin: 0;
  padding: 30px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  vertical-align: middle;
  width: 80%;
  height: auto;
  background-color: #84ccc9;
  border-radius: 20px;
  z-index: 99999;
}


.modal-wrapper .modal-box .flex-area {
  margin: 2% auto;
  padding-left: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}

.modal-wrapper .modal-box .flex-area .description {
  list-style-type: none;
  width: 70%;
  height: auto;
}

.modal-wrapper .modal-box .flex-area .finger-font {
  list-style-type: none;

  text-align: center;
  width: 15%;
  height: auto;
}

.modal-wrapper .modal-box .flex-area .jump-area {
  list-style-type: none;
  width: 15%;
  height: auto;
}

.modal-wrapper .modal-box .flex-area .jump-area a.clicked-to-form {
  box-shadow:inset 0px 1px 3px 0px #91b8b3;
  background:linear-gradient(to bottom, #768d87 5%, #6c7c7c 100%);
  background-color:#768d87;
  border-radius:5px;
  border:1px solid #566963;
  display:inline-block;
  cursor:pointer;
  color:#ffffff;
  font-family:Arial;
  font-size:15px;
  font-weight:bold;
  padding:11px 23px;
  text-decoration:none;
  text-shadow:0px -1px 0px #2b665e;
}

.modal-wrapper .modal-box .flex-area .jump-area a.clicked-to-form:hover {
  background:linear-gradient(to bottom, #6c7c7c 5%, #768d87 100%);
  background-color:#6c7c7c;
}

.modal-wrapper .modal-box .flex-area .jump-area a.clicked-to-form:active {
  position:relative;
  top:1px;
}

.modal-wrapper .js-close {
  display: table;
  margin: 14% auto auto;
  text-align: center;

  box-shadow: 0px 10px 14px -7px #276873;
  background:linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
  background-color:#599bb3;
  border-radius:8px;
  /*display:inline-block;*/
  cursor:pointer;
  color:#ffffff;
  font-family:Arial;
  font-size:20px;
  font-weight:bold;
  padding:13px 32px;
  text-decoration:none;
  text-shadow:0px 1px 0px #3d768a;
}
.modal-wrapper .js-close:hover {
  background:linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
  background-color:#408c99;
}
.modal-wrapper .js-close:active {
  position:relative;
  top:1px;
}
.modal-wrapper .js-close p {
  margin: 0;
  padding: 0;
}

/* スマートフォン向け */
@media all and ( max-width:639px ) {

.modal-wrapper {
  width: 90%;
  height: auto;
}

.modal-wrapper .modal-box .flex-area {
  margin: 2% auto;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

.modal-wrapper .modal-box .flex-area .description {
  list-style-type: none;
  width: 100%;
  height: auto;
}

.modal-wrapper .modal-box .flex-area .finger-font {
  list-style-type: none;

  text-align: center;
  width: 100%;
  height: auto;
}

.modal-wrapper .modal-box .flex-area .jump-area {
  list-style-type: none;

  text-align: center;
  width: 100%;
  height: auto;
}

}