@charset "utf-8";

/*common*/
.ml5 {margin-left:5px}
.ml10 {margin-left:10px}
.mr10 {margin-right:10px}
.tr {text-align:right}
.tc {text-align:center}
.bdnone {border-bottom:none !important; margin-bottom:0 !important; padding-bottom:0 !important}

/* checkbox */
input[type="checkbox"] {overflow:hidden; position:absolute; left:-1000px; width:1px; height:1px}
input[type="checkbox"] + label {display:inline-block; font-size:1.05em; height:22px; line-height:22px; padding-left:34px; cursor:pointer; position:relative}
input[type="checkbox"] + label::before {content:''; display:block; width:22px; height:22px; background:#fff; border:2px solid #dedede; position:absolute; top:0px; left:0; box-sizing:border-box; transition:all 0.2s linear; -webkit-transition:all 0.2s linear; -moz-transition:all 0.2s linear; -ms-transition:all 0.2s linear; -o-transition:all 0.2s linear}
input[type="checkbox"]:checked + label::before {border-color:#f6b12a}
input[type="checkbox"]:checked + label::after {content:''; display:block; position:absolute; top:5px; left:5px; width:12px; height:12px; background:#f6b12a}

/* radio */
input[type="radio"] {overflow:hidden; position:absolute; left:-1000px; width:1px; height:1px}
input[type="radio"] + label {display:inline-block; font-size:1.05em; height:22px; line-height:22px; padding-left:34px; cursor:pointer; position:relative}
input[type="radio"] + label::before {content:''; display:block; width:22px; height:22px; background:#fff; border:2px solid #dedede; border-radius:50%; position:absolute; top:0; left:0; box-sizing:border-box; transition:all 0.2s linear; -webkit-transition:all 0.2s linear; -moz-transition:all 0.2s linear; -ms-transition:all 0.2s linear; -o-transition:all 0.2s linear}
input[type="radio"]:checked + label::before {border-color:#f6b12a}
input[type="radio"]:checked + label::after {content:''; display:block; position:absolute; top:5px; left:5px; width:12px; height:12px; background:#f6b12a; border-radius:50%}

/* text */
input[type="text"] {width:100%; border:none; background:#fbf7ec; font-size:1.05em; height:30px; line-height:30px; padding:0 10px; box-sizing:border-box; color:#333}
input[type="text"].wp30 {width:30%}
input[type="text"].wp65 {width:65%}
input[type="text"].wp80 {width:80%}
@media all and (max-width:480px) {
    input[type="text"].wp30 {width:26%}
    input[type="text"].wp80 {width:65%}
}

/* popupWrap */
#popupWrap {overflow:hidden; position:relative; max-width:800px; background:#f6d34e url('../images/popup/popup_bg.png') no-repeat top center; max-height:900px; overflow-y:auto}
@media all and (max-width:667px) {
    #popupWrap {font-size:90%}
}

/* titWrap */
.titWrap {text-align:center; padding:6.5% 4.5%}
.titWrap .txtBox {display:inline-block; background:#fff; padding:8px; color:#1a2b65; margin-bottom:15px; font-size:1em}
.titWrap h1 {display:inline-block; font-size:45px; font-weight:600; color:#fff; padding:0 10px 10px 10px; border-bottom:1px solid #fff; position:relative; margin-bottom:4%; word-break:keep-all}
.titWrap h1::after {content:''; display:block; position:absolute; bottom:0; right:-24px; width:25px; height:25px; background:url('../images/popup/h1_bg.png') no-repeat; background-size:100%}
.titWrap h1 span {color:#ffff00}
.titWrap p {font-size:1.05em; color:#fff; line-height:1.4; word-break:keep-all}
.titWrap p em {color:#ff0}
@media all and (max-width:667px) {
    .titWrap h1 {font-size:38px; padding:0 5px 10px 5px}
    .titWrap h1::after {display:none}
}
@media all and (max-width:600px) {
    .titWrap p br {display:none}
}

/* dataWrap */
.dataWrap {padding:0 3.5% 4% 3.5%}
.dataBox {padding:70px 7.5% 50px 7.5%; background:#fff url('../images/popup/databox_bg.png') repeat-x; background-size:29px auto; border-radius:5px; box-shadow:0 2px  10px rgba(0, 0, 0, 0.4)}
.dataBox h2 {font-size:1.3em; font-weight:600; margin-bottom:35px; line-height:1.3; word-break:keep-all}
@media all and (max-width:667px) {
    .dataBox h2 {font-size:1.2em; margin-bottom:25px}
}
@media all and (max-width:480px) {
    .dataBox {padding:50px 7.5% 50px 7.5%; background-size:23px auto}
}
@media all and (max-width:400px) {
    .dataBox h2 {font-size:1.2em}
}

/* userBox */
.userBox {margin-bottom:50px; padding-bottom:20px; border-bottom:1px dashed #eee}
.userBox .half {display:inline-block; width:46.5%; margin-right:3.5%; vertical-align:middle}
.userBox .half2 {display:inline-block; width:95%; margin-right:3.5%; vertical-align:middle}
.userBox .half:nth-child(2n+1) {margin-right:0}
.userBox dl {display:table; table-layout:fixed; width:100%; margin-bottom:30px}
.userBox dl.mb15 {margin-bottom:15px}
.userBox dl dt {display:table-cell; font-size:1.1em; font-weight:500; width:75px}
.userBox dl dd {display:table-cell}
.userBox dl dd ul li {display:inline-block; margin:0 4.5% 15px 0}
.userBox dl dd ul.mb0 li {margin-bottom:0}
@media all and (max-width:600px) {
    .userBox .half2,
    .userBox .half {width:100%; margin:0}
    .userBox dl dd ul li {margin:0 4.5% 8px 0}
}
@media all and (max-width:480px) {
    .userBox {margin-bottom:40px; padding-bottom:17px}
    .userBox dl dd ul li {display:block; margin:0 0 8px 0}
    .userBox dl dd ul.mb0 li:first-child {margin-bottom:8px}
}

/* queBox */
.queBox {overflow:hidden; position:relative; margin-bottom:50px; border-bottom:1px dashed #eee}
.queBox ul {margin-bottom:35px; overflow:hidden}
.queBox ul li {float:left; margin:0 0 15px 0; width:50%}
.queBox ul li.wp100 {width:100%}
.queBox textarea {margin-bottom:50px; width:100%; border:none; background:#fbf7ec; font-size:1.05em; min-height:100px; color:#333; padding:0 10px; box-sizing:border-box}
@media all and (max-width:600px) {
    .queBox ul li {width:100%; margin:0 0 8px 0}
}
@media all and (max-width:480px) {
    .queBox ul {margin-bottom:32px}
    .queBox textarea {margin-bottom:40px}
}

/* agreeBox */
.agreeBox {margin-top:20px; background:#f7f8f9; padding:25px; max-height:200px; overflow-y:auto}
.agreeBox h3 {font-size:1.05em; font-weight:600; margin-bottom:10px; word-break:keep-all}
.agreeBox p {word-break:keep-all; line-height:1.6; font-size:0.9em}
.agreeBox .agreeCheck {margin:15px 0 25px 0; font-weight:500}
.agreeBox .ls1 {overflow:hidden}
.agreeBox .ls1 li {position:relative; margin-bottom:5px; font-size:0.9em; line-height:1.35}
.agreeBox .ls2 {overflow:hidden}
.agreeBox .ls2 li {position:relative; margin-bottom:5px; padding-left:18px; font-size:0.9em; line-height:1.35}
.agreeBox .ls2 li::before {content:''; display:block; width:4px; height:4px; border-radius:50%; background:#999; position:absolute; top:7px; left:0}
@media all and (max-width:480px) {
    .agreeBox {margin-bottom:40px; padding-bottom:40px}
}

/* btn */
.btn {margin-top:30px; text-align:center}
.btn button {width:260px; height:60px; line-height:60px; background:#f6b12a; border-radius:60px; color:#fff; font-size:1.1em}
@media all and (max-width:480px) {
    .btn {margin-top:20px}
}