@charset "UTF-8";

#wrapper {
    background-color: #282828;
    background-image: none;
}

#wrapper #contents {
    margin: 0 auto;
    max-width: 980px;
    text-align: center;
    background-image: url(../images/kekka.jpg);
    background-size: cover;
}

.header {
    background-color: transparent;
    background-image: none;
}

main {
    background-image: none;
}

.top {
    padding: 0 3%;
    background-image: url(../images/main_bg.jpg);
    background-position: bottom;
    background-size: cover;
}

.zodiac {
    padding: 20% 0px;
}

.info {
    background-image: url(../images/body_bg.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    padding: 5% 0px;
}

.info h2 {
    width: 60%;
    margin: 0 auto;
}

.info img {
    width: 80%;
    margin: 0 auto;
}

.content {
    padding: 5% 0px;
}

.content p {
    margin: 5% auto;
}

.content h1 {
    width: 80%;
    margin: 0 auto;
}

.qbtn {
    width: 80%;
    margin: 0 auto;
}


.copyright {
    background: #000;
}

/* .header {
    background-image: url(../images/kekka.jpg);
} */

.zd_selected .inner {
    all: unset;
}

.zd_selected .inner {
    all: unset;
}

@media screen and (max-width: 768px) {
    .zd_selected .inner img {
        padding: 0 10%;
    }

    .step4 {
        padding: 0;
    }
}

.zd_selected .inner p {
    text-shadow: 0 0 5px #362d09, 0 0 5px #362d09, 0 0 5px #362d09, 0 0 5px #362d09, 0 0 5px #362d09, 0 0 5px #362d09, 0 0 5px #362d09, 0 0 5px #362d09, 0 0 5px #362d09, 0 0 5px #362d09;
    font-weight: 400;
}

input,
select {
    font-size: min(3em, 10vw);
}

input[type=text] {
    font-size: min(2em, 10vw);
    padding: 1em;
}

@media screen and (max-width: 768px) {

    input,
    select {
        font-size: min(2em, 10vw);
    }

    input[type=text] {
        font-size: min(1em, 10vw);
    }
}



.bd_wrap {
    margin-bottom: 50px;
}

.btn_area {
    padding: 4em 0 6em;
}

@media screen and (max-width: 768px) {
    .btn_area img {
        width: 90%;
    }
}

.submit_text {
    width: 60%;
    margin: 0 auto;
}

#complete_page {
    padding: 10% 0px;
    background-image: url(../images/kekka.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0 auto;
    max-width: 980px;
    text-align: center;
}

#complete_page h2 {
    width: 48%;
    margin: 0 auto;
    padding: 10% 4% 4%;
}