@charset 'UTF-8';

/*-----------------------
 モーダルウィンドウ
-----------------------*/
.modal {
z-index: 9999;
display: none;
position: fixed;
height: 100vh;
width: 100vw;
top: 0;
left: 0;
}
.modal__bg {
position: absolute;
height: 100vh;
width: 100vw;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.3);
}
.modal__content {
position: absolute;
width: 1000px;
max-height: 80%;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.input_area_in2 .modal__content {
height: auto;
}
.modal__content>div {
position: relative;
overflow-x: hidden;
overflow-y: auto;
height: 100%;
padding: 30px;
background-color: #f1f1f1;
border-radius: 10px;
}
.area_ttl {
width: 100%;
margin-bottom: 20px;
font-size: 2.0rem;
font-weight: bold;
text-align: center;
padding: 13px 20px 5px 20px;
}
.area_txt {
width: 100%;
margin: 13px 20px 5px 20px;
}
.area_txt:first-of-type {
padding-top: 0;
}
.area_box {
display: flex;
flex-wrap: wrap;
padding: 0 10px 10px;
}
.modal__content input {
cursor: pointer;
width: calc(25% - 10px);
margin: 5px;
border-color: transparent;
}
.modal__content .js-modal-close {
display: block;
position: absolute;
cursor: pointer;
width: 40px;
height: 40px;
top: 10px;
right: 10px;
font-size: 0;
}
.modal__content .js-modal-close::before,
.modal__content .js-modal-close::after {
position: absolute;
content: "";
width: 40px;
top: 20px;
left: 0;
border-bottom: solid 2px #000;
}
.modal__content .js-modal-close::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
.modal__content .js-modal-close::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
@media (max-width:1350px) {
  .modal__content {
  width: 700px;
  }
  .modal__content input {
  width: calc(33.3333% - 10px);
  }
  #modal01 .modal__content input {
  width: calc(50% - 10px);
  }
}
@media (max-width:1000px) {
}
@media (max-width:767px) {
  .modal__content {
  width: 330px;
  margin-top: 20px;
  }
  .modal__content>div {
  padding: 20px 5px;
  }
  .modal__content input {
  padding: 10px;
  }
  #modal01 input {
  }
  .area_ttl {
  font-size: 1.6rem;
  }
  #modal01 .modal__content input {
  width: 100%;
  }
}