@charset "utf-8";
/* CSS Document */
.overlay1, .overlay2, .overlay3 {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .8;
  display: none;
  z-index: 0;
  top: 0;
  left: 0;
  right: 0;
  transition: all .5s ease-in-out;
  z-index: 1910100;
}
.modal1, .modal2, .modal3 {
  width: 600px;
  height: auto;
  position: fixed;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  transition: all .5s ease-in-out;
  z-index: 1910110;
}
@media (max-width:767px) {
  .modal1, .modal2, .modal3 {
    width: 90%;
    height: auto;
    /*aspect-ratio: 4 / 3;*/
  }
}
.modal1 p img, .modal2 p img, .modal3 p img {
  text-align: center;
  transition: all .5s ease-in-out;
}
.modal1 ul, .modal2 ul, .modal3 ul {
  display: flex;
  justify-content: center;
}
.modal1 ul li, .modal2 ul li, .modal3 ul li {
  margin: 1em;
}
@media (max-width:767px) {
  .modal1 ul li, .modal2 ul li, .modal3 ul li {
    margin: 1em .2em;
    flex: 1 1 auto;
  }
}
/* close
--------------------------------*/
.modal-close__wrap1, .modal-close__wrap2, .modal-close__wrap3 {
  position: absolute;
  right: 30px;
  top: 20px;
}
  @media (max-width:767px) {
  .modal-close__wrap1, .modal-close__wrap2, .modal-close__wrap3 {
    right: 15px;
    top: 17vh;
  }
}

.modal-close1, .modal-close2, .modal-close3 {
  background: transparent;
  border-color: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  width: 36px;
  display: block;
  height: 36px;
}
.modal-close1 span, .modal-close2 span, .modal-close3 span {
  position: relative;
  width: 100%;
  height: 1px;
  background: #2aa6ff;
  display: block;
}
.modal-close1 span:nth-child(1), .modal-close2 span:nth-child(1), .modal-close3 span:nth-child(1) {
  transform: rotate(45deg);
}
.modal-close1 span:nth-child(2), .modal-close2 span:nth-child(2), .modal-close3 span:nth-child(2) {
  transform: rotate(-45deg);
}
.modal-open1, .modal-open2, .modal-open3 {
  cursor: pointer;
  background: orange;
  border: orange;
  color: #fff;
  padding: 10px 12px;
}
.overlay1.open1, .overlay2.open2, .overlay3.open3 {
  display: block;
}
.modal1.open1, .modal2.open2, .modal3.open3 {
  display: block;
}

/*
 */
/* ******************************************************* */
/* checkOff */
input[type="button"]#option11 {
  width: clamp(9em, 35vw, 240px);
  padding: .7em 2em;
  border-radius: 100vw;
  border: 2px solid #ef0090;
  display: block;
  text-align: center;
  color: #fff;
  background: #ef0090;
  font-size:clamp(10px,4.5vw,18px);
}
input[type="button"]#option11:hover {
  color: #ef0090;
  background: #ffff;
  cursor: pointer;
  transition: all .3s ease-in-out;
}
/* chekOn */
input[type="button"]#option12 {
  width: clamp(9em, 35vw, 240px);
  padding: .7em 2em;
  border-radius: 100vw;
  border: 2px solid #2AA6FF;
  display: block;
  text-align: center;
  color: #fff;
  background: #2AA6FF;
  font-size:clamp(10px,4.5vw,18px);
}
input[type="button"]#option12:hover {
  color: #2AA6FF;
  background: #ffff;
  cursor: pointer;
  transition: all .3s ease-in-out;
}
/* ************************** */
/* checkOff */
input[type="button"]#option21 {
  width: clamp(9em, 35vw, 240px);
  padding: .7em 2em;
  border-radius: 100vw;
  border: 2px solid #ef0090;
  display: block;
  text-align: center;
  color: #fff;
  background: #ef0090;
  font-size:clamp(10px,4.5vw,18px);
}
input[type="button"]#option21:hover {
  color: #ef0090;
  background: #ffff;
  cursor: pointer;
  transition: all .3s ease-in-out;
}
/* chekOn */
input[type="button"]#option22 {
  width: clamp(9em, 35vw, 240px);
  padding: .7em 2em;
  border-radius: 100vw;
  border: 2px solid #2AA6FF;
  display: block;
  text-align: center;
  color: #fff;
  background: #2AA6FF;
  font-size:clamp(10px,4.5vw,18px);
}
input[type="button"]#option22:hover {
  color: #2AA6FF;
  background: #ffff;
  cursor: pointer;
  transition: all .3s ease-in-out;
}
/* ************************** */
/* checkOff */
input[type="button"]#option31 {
  width: clamp(9em, 35vw, 240px);
  padding: .7em 2em;
  border-radius: 100vw;
  border: 2px solid #ef0090;
  display: block;
  text-align: center;
  color: #fff;
  background: #ef0090;
  font-size:clamp(10px,4.5vw,18px);
}
input[type="button"]#option31:hover {
  color: #ef0090;
  background: #ffff;
  cursor: pointer;
  transition: all .3s ease-in-out;
}
/* chekOn */
input[type="button"]#option32 {
  width: clamp(9em, 35vw, 240px);
  padding: .7em 2em;
  border-radius: 100vw;
  border: 2px solid #2AA6FF;
  display: block;
  text-align: center;
  color: #fff;
  background: #2AA6FF;
  font-size:clamp(10px,4.5vw,18px);
}
input[type="button"]#option32:hover {
  color: #2AA6FF;
  background: #ffff;
  cursor: pointer;
  transition: all .3s ease-in-out;
}
/* ************************** */
/* popup contents css */
.popup_inner {
    background-color: #fff;
    padding: 2em 2em 3em;
    border-radius: 3px;
    margin: 0 auto 1em;
}
.notice_icon {
    font-size: 6em;
    text-align: center;
    color: red;
}
.notice_txt {
    text-align: center;
    font-size: 2em;
    font-weight: 600;
    color: red;
}
.popup_text p {
    margin: 1em 0;
    line-height: 1.8;
}
.popup_text p:last-child {
    margin: 0;
}
.red{
    color: red;
}
.bold{
  font-weight: 700;
}
@media (max-width:767px) {
  .popup_inner {
    background-color: #fff;
    padding: 1em 1.5em 1.5em;
    border-radius: 3px;
    margin: 0 auto 1em;
	margin-top: 15vh;
}
.notice_icon {
    font-size: 2.3em;
}
.notice_txt {
    font-size: 1.3em;
}
.popup_text p {
    margin: 0.5em 0;
    line-height: 1.5;
    font-size: 12px;
    text-align: justify;
}
}
/*@media (max-width:375x) {
.notice_icon {
    font-size: 2em;
}
.notice_txt {
    font-size: 1.2em;
}
}*/