*{
    padding: 0;
    margin: 0;
    text-align: center;
}

main{
    width: 500px;
    margin: 0 auto;
}

picture, source, img{
    width: 100%;
    vertical-align: top;
}

.mid2-choice{
    width: 100%;
    background-image: url('../images/mid2-bg.jpg');
    background-size: cover;
}

.mid2-choice-container{
    width: 50%;
    margin: 0 auto;
    border: 3px solid rgb(242, 200, 70);
    display: flex;
    list-style: none;
}

.mid2-choice-container li{
    width: 50%;
    text-decoration: none;
    color: rgb(92, 55, 22);
    font-weight: 600;
    font-size: 18px;
    padding-top: 2px;
    padding-bottom: 2px;
    cursor: pointer;
}

.mid2-choice-yes{
    border-right: 3px solid rgb(242, 200, 70);
}

.mid2-btn{
    position: relative;
    background-image: url('../images/mid2-btn-bg.jpg');
    background-size: cover;
}

.mid2-btn picture, .mid2-btn img{
    width: 50%;
    cursor: pointer;
}

#result-unsatisfied{
    display: none;
    width: 80%;
    position: absolute;
    bottom: -55%;
    left: 11%;
    color: rgb(255, 68, 68);
}

.result{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
}

.result-container{
    width: 400px;
    margin: 0 auto;
    position: relative;
}

.result-container img{
    margin-top: 30px;
}

.result-back{
    position: absolute;
    top: 6.2%;
    right: 5.2%;
    width: 10.5%;
    height: 6%;
    cursor: pointer;
}

.result-phone{
    width: 87%;
    height: 8.5%;
    position: absolute;
    top: 62%;
    left: 6%;
}

.result-phone a, .result-mail a{
    display: block;
    width: 100%;
    height: 100%;
}

.result-mail{
    width: 87%;
    height: 8.5%;
    position: absolute;
    top: 72%;
    left: 6%;
}

.result2-phone{
    width: 87%;
    height: 8.5%;
    position: absolute;
    top: 87%;
    left: 6%;
}

.result2-phone a, .result2-mail a{
    display: block;
    width: 100%;
    height: 100%;
}

.result2-mail{
    width: 87%;
    height: 8.5%;
    position: absolute;
    top: 77%;
    left: 6%;
}

#result-normal{
    display: none;
}

#result-abnormal{
    display: none;
}

.buttons{
    width: 100%;
    position: relative;
}

.buttons-phone{
    position: absolute;
    width: 86%;
    height: 45%;
    top: 0%;
    left: 6%;
}

.buttons-mail{
    position: absolute;
    width: 86%;
    height: 45%;
    top: 53%;
    left: 6%;
}

.buttons-phone a, .buttons-mail a{
    display: block;
    width: 100%;
    height: 100%;
}

.qa{
    width: 100%;
    position: relative;
}

.plus{
    display: block;
    width: 8%;
    height: 45%;
    position: absolute;
    top: 25.5%;
    right: 5.5%;
    cursor: pointer;
}

.minus{
    position: absolute;
    top: 21%;
    right: 4%;
    width: 11%;
    display: none;
    cursor: pointer;
}

.minus-2{
    position: absolute;
    top: 27%;
    right: 4%;
    width: 11%;
    display: none;
    cursor: pointer;
}

.answer{
    display: none;
}

.sp-banner{
    display: none;
}

.thanks-btn{
margin: 0 auto;
width: 100%;
}
.thanks-btn02{
margin: 50px auto;
width: 90%;
}

.thanks-hv {
min-height: 80vh;
padding-top: 50px !important;
}
.complete{
font-size:1.4em;
margin-bottom:50px;
}

@media screen and (max-width: 480px) {
    main{
        width: 100%;
    }

    .result-container{
        width: 95%;
        margin: 0 auto;
        position: relative;
    }

    #result-unsatisfied{
        bottom: -70%;
    }

    .sp-banner{
        display: block;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        height: 100px;
        position: fixed;
        bottom: -1px;
        left: 0px;
    }

    .sp-banner-container{
        width: 100%;
        height: 100%;
        position: relative;
    }

    .banner-phone-img{
        position: absolute;
        width: 150px;
        top: 10px;
        right: 52%;
    }

    .banner-mail-img{
        position: absolute;
        width: 150px;
        top: 10px;
        left: 52%;
    }

    .banner-phone{
        position: absolute;
        width: 150px;
        height: 68px;
        top: 10px;
        right: 52%;
    }

    .banner-mail{
        position: absolute;
        width: 150px;
        height: 68px;
        top: 10px;
        left: 52%;
    }

    .banner-phone a, .banner-mail a{
        display: block;
        width: 100%;
        height: 100%;
    }
}

.modal {
  display: none;
}
.modal.is-open {
  display: block;
}
.modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #4D4D4D;
  display: flex;
  justify-content: center;
  align-items:center;
}
.modal__content {
  position: relative;
}
.modal__content img {
  width: 375px;
  height: auto;
}
.popupclose {
  position: absolute;
  width: 10%;
  height: 6%;
  left: 81%;
  top: 4.8%;
  z-index: 9999;
}
.totel {
  position: absolute;
  width: 82%;
  height: 13%;
  top: 68.7%;
  left: 9%;
  z-index: 9999;
}
.toform {
  position: absolute;
  width: 71%;
  height: 8%;
  top: 85.3%;
  left: 14%;
  z-index:9999;
}
@media screen and (max-width: 767px) {
  .modal__content {
    width: 75%;
    margin: 0 auto;
  }
  .modal__content img {
    width: 100%;
    height: auto;
  }
  .mid2-choice {
	  background-size: contain;
}