@charset "utf-8";
/* CSS Document */
.top{ background-color:#fef5f9; padding:20px; position: relative; width: 100%;  }
.search{  margin: 0 auto;  width:90%;  background-color:#47A9D9;
  border: 3px solid #FFF;  border-radius: 20px;
  padding: 10px 20px;  display: flex;  flex-flow: row wrap;
  justify-content: space-between;  z-index: 10;}

.search1, .search2{ padding:0; color:#FFF; font-weight:bold; margin:10px 0; }
.search1{ background:no-repeat url(../img/search1.png); background-size:30px; line-height:30px; font-size:20px; width:200px; text-indent:50px;}
.search2{ line-height:30px; font-size:16px; text-align:center;width:calc(100% - 200px) ;}
.btn_base{display: flex;flex-flow: row wrap;justify-content: center;row-gap: 20px;  }
.btn_base a{ width:200px !important;flex: none !important;  }
.btn_base a::before {
  display: inline-block;  margin-right: 8px;  vertical-align: middle;  height: 20px;}
.btn_base a:nth-child(1)::before{ content: url(img/btn_base2.png);}
.btn_base a:nth-child(2)::before{ content: url(img/btn_base1.png);}

@media screen and (max-width: 1024px) {
.search1, .search2{ margin:0;}
.search2{line-height:30px; font-size:14px; text-align:left}
.search3 , .search4 , .search5 , .search6 {text-indent:40px;}
.search3:before , .search4:before , .search5:before , .search6:before {width:7px; height:7px}
.search{padding:10px 20px; }
.search2{ width:100%;}
.search3 , .search4 , .search5 , .search6 { width:45%; margin-top:10px;}

}

@media screen and (max-width: 425px) {
.search {  padding: 10px 15px;  bottom: 10px;  }
}


.modal {  display: none;  width: 90%; padding: 20px; position: absolute; top: 110%; left: 5%;
  box-sizing: border-box;  background-color: #fff;  color: #000;  border: 2px solid #444D5A;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);  transform: scale(0.95);  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease; z-index:100}
.modal.active {  display: block;  transform: scale(1);  opacity: 1;}
.modal-content {  position: relative; }
.modal-data{ width:100%; border:#000 1px solid}
.modal-close {  position: absolute;  top:0;  right:0;  width: 36px;  height: 36px;  border: 3px solid #444D5A;
  border-radius: 50%;  background: transparent;  cursor: pointer;  box-sizing: border-box;  display: flex;
  align-items: center;  justify-content: center;  transition: all 0.3s ease;}
.modal-close::before,
.modal-close::after {  content: "";  position: absolute;  width: 80%;   
  height: 3px;   background-color: #444D5A;  border-radius: 1px;  transition: background-color 0.3s ease;}
.modal-close::before {  transform: rotate(45deg);}
.modal-close::after {  transform: rotate(-45deg);}
.modal-close:hover {  background: #444D5A;}
.modal-close:hover::before,
.modal-close:hover::after {  background-color: white;}
.modal-body { display: flex;  flex-wrap: wrap;  gap: 10px;  padding:50px 0 0 0;}
.modal-body label {  display: inline-flex;  align-items: center;
  justify-content: center;  width: calc((100% - 40px)/5);  padding: 10px 0;
  background-color: #444D5A;  color: #fff;  border-radius: 5px;  cursor: pointer;
  text-align: center;  user-select: none;  transition: all 0.2s ease, transform 0.1s ease;
  border: 2px solid transparent;}
.modal-body label.selected,
.modal-body input[type="checkbox"]:checked + label {
  background-color: #fff;  color: #444D5A;  border: 2px solid #444D5A;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);}
.modal-body label:hover:not(.selected) {  background-color: #555c6b;}
.modal-body label:active {  transform: scale(0.95);}
@media (max-width: 1024px) {
  .modal-body label {    width: calc((100% - 30px)/4);  }
}

@media (max-width: 600px) {
  .modal-body label {    width: calc((100% - 10px)/2);  }
}

@media (max-width: 350px) {
  .modal-body label {    width: 100%;  }
  .btn.modal1::after, .btn.modal2::after, .btn.modal3::after { display:none;}
}
.circle-text { margin-left:10px; position: relative; display: inline-block; width:22px; height:22px; border:2px solid #333; border-radius:50% }
.circle-text::before,
.circle-text::after { content: ""; position: absolute; top: calc(50% - 1px);left: 3px;
  width:10px;  height:2px;  border-radius: 9999px;  background-color: #000000;
  transform-origin: calc(100% - 1px) 50%;}
.circle-text::before { transform: rotate(45deg);}
.circle-text::after {  transform: rotate(-45deg);}
.circle-text2::before,
.circle-text2::after {  transform-origin:1px 50% !important;}