.condition__overlay {
  width:100%;
  height:100%;
  position:fixed;
  top:0;
  left:0;
  opacity:.8;
  background-color:darkgray;
  z-index:1200;
}
.condition__popup {
  font-family:'Roboto';
  font-size:500;
  position:fixed;
  width:540px;
  height:auto;
  main-height:200px;
  top:50%;
  left:50%;
  background-color:white;
  z-index:1202;
  margin-top:-125px;
  margin-left:-150px;
  border-radius:4px;
}
.condition__title {
  width:100%;
  padding:14px 16px 10px 16px;
  box-sizing: border-box;
  font-size:16px;
  line-height:20px;
  border-radius:4px 4px 0 0;
  color:white;
}
.condition__acceptBox {
  margin:20px 0;
  padding:20px;
  display:flex;
  align-items: center;
}
.condition__acceptBox a,
.condition__acceptBox a:link,
.condition__acceptBox a:hover,
.condition__acceptBox a:visited {
  color:blue;
}
.condition__checkerBox {
  width:32px;
  height:32px;
  margin:0 22px 0 0;
  cursor:pointer;
}
.condition__checkerBox::after {
  content:'check_box_outline_blank';
  font-family: 'Material Icons';
  font-size:32px;
  line-height: 1;
  color:#CFCFCF;
}
.condition__checkerBox.checked::after {
  content:'check_box';
}
.condition__checkerBox.check {
  background-position:center bottom;
}
.condition__labelBox {
  font-size:16px;
  color:#979797;
  line-height: 23px;
}

.condition__buttonBox {
  display: flex;
  margin-top:12px;
  padding:24px 48px 24px 48px;
  box-sizing: border-box;
  width:100%;
  border-top:1px solid #E8E8E8;
}
.condition__button {
  box-sizing: border-box;
  border: none;
  font-family: Roboto;
  font-size: 17px;
  color: #fff;
  width:205px;
  height: 47px;
  object-fit: contain;
  border-radius: 6px;
  background-color: #BFBFBF;
  box-shadow: 0 4px 8px 0 #ccccc;
  text-align: center;
  align-items: center;
  display: flex;
  justify-content: center;
  cursor: pointer;
  outline: 0;
}
.condition__button.active {
  color: #fff;
}

@media screen and (max-width: 765px) {
  .popupCPD .title {
    padding:10px 8px 10px 8px;
    font-size:14px;
  }
  .popupCPD .text {
    margin:0 0 0 0;
    padding:12px 16px 12px 16px;
    font-size:14px;
  }
  .popupCPD .buttonBox {
    padding:12px 16px 12px 16px;
  }
  .popupCPD .labelBox {
    font-size:14px;
  }
}

/* colors */
.condition__title {background-color:#688236;}
.condition__checkerBox.checked::after {color: #688236;}
.condition__button.active {background-color: #EA700D;}

.condition__title.s8 {background-color:#0091EA;}
.condition__checkerBox.s8.checked::after {color: #0091EA;}
.condition__button.s8.active {background-color: #0091EA;}

.condition__title.s9 {background-color:#0a77c4;}
.condition__checkerBox.s9.checked::after {color: #0a77c4;}
.condition__button.s9.active {background-color: #0a77c4;}

.condition__title.t5 {background-color:#5EABFE;}
.condition__checkerBox.t5.checked::after {color: #5EABFE;}
.condition__button.t5.active {background-color: #5EABFE;}

.condition__title.t6 {background-color:#4033DB;}
.condition__checkerBox.t6.checked::after {color: #4033DB;}
.condition__button.t6.active {background-color: #4033DB;}

.condition__title.t7 {background-color:#EA3168;}
.condition__checkerBox.t7.checked::after {color: #EA3168;}
.condition__button.t7.active {background-color: #EA3168;}

/* page */
.condition__pageText {
  margin:0;
  padding:30px 0 30px 0;
  font-family: 'Roboto';
  font-size:16px;
  line-height:1.7;
}
.condition__pageText__banner {
  width:100%;
  height:450px;
  background-position:center center;
  background-repeat:no-repeat;
  background-size:cover;
}
.condition__pageText h1 {
  margin:35px 30px;
  padding:0;
  font-family: 'Roboto';
  font-size:24px;
}
.condition__pageText__text {
  margin:15px 30px;
}
.pageText__text p { 
  text-indent:45px;
  font-family: 'Roboto';
  font-size:16px;  
  line-height:1.5;
}
.pageText__text ul {
  margin:18px 0 18px 36px;
}
.pageText__text li {
  list-style: inherit;
  margin:12px 0;
}
@media screen and (min-width: 1025px) {
  .condition__pageText {
    max-width:1024px;
    margin:0 auto;
  }
}

.userTypeWidget {
  margin:100px auto 0 auto;
  padding:25px;
  font-family: 'Roboto';
  font-size:16px;
  max-width:320px;
  border:1px solid #eee;
  box-sizing: border-box;
}
@media screen and (min-width: 425px) {
  .userTypeWidget {
    max-width:420px;
  }
}

.userTypeWidget__checkFieldBox {
  margin:10px 0;
  display:flex;
  align-items: center;
}
.userTypeWidget__checkFieldBox a {
  color:#4033DB;
}
.userTypeWidget__checkerBox {
  width:32px;
  height:32px;
  margin:0 22px 0 7px;
  cursor:pointer;
}
.userTypeWidget__checkerBox::after {
  content:'check_box_outline_blank';
  font-family: 'Material Icons';  
  font-size:32px;
  line-height: 1;
  color:#CFCFCF;
}
.userTypeWidget__checkerBox.checked::after {
  content:'check_box';
  color: #4033DB;
}
.userTypeWidget__labelBox {
  color: #333;
  text-align:left;
}
.userTypeWidget__errorFieldBox {
  color: red;
  font-size: 12px;
  line-height: 16px;
  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
}
.userTypeWidget__button {
  margin:25px auto;
  box-sizing: border-box;
  border: none;
  font-family: Roboto;
  font-size: 17px;
  width:205px;
  height: 47px;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 4px 8px 0 #ccccc;
  text-align: center;
  align-items: center;
  display: flex;
  justify-content: center;
  cursor: pointer;
  outline: 0;
  background-color: #4033DB;
  color: #fff;  
}