/* contact */
.bg-gray { background: #f1f1f1; padding: 35px 0; }
.bg-darkgray { background: #767676; padding: 35px 0; text-align: center; }
.bg-lightblue { background: #d9f6fe; padding: 35px 0; }
.contact { display: block; }
.contact-form { display: block; background: #000; font-size: 17px; font-weight: 500; color: #fff; text-align: center; padding: 6px; }
.contact-form.highlight-blue {
    background: -webkit-gradient(linear, left top, right top, color-stop(0, #48a2f6), color-stop(100, #6dd7ff));
    background: -moz-linear-gradient(Left, #48a2f6 0%, #6dd7ff 100%);
    background: -ms-linear-gradient(Left, #48a2f6 0%, #6dd7ff 100%);
    background: -o-linear-gradient(Left, #48a2f6 0%, #6dd7ff 100%);
    background: linear-gradient(to right, #48a2f6 0%, #6dd7ff 100%);
}
.contact ul { display: block; }
.contact ul li { display: flex; flex-wrap: wrap; width: 100%; align-items: center; }
.contact .title { display: block; padding: 12px; width: 30%; text-align: right; font-weight: 500; }
.contact .data { display: block; padding: 12px; width: 70%; text-align: left; }
.contact .data span { display: inline-block; padding: 4px 0; }
.contact .require { background: #f23d78; padding: 0 4px; display: inline-block; font-size: 11px; color: #fff; margin-right: 8px; border-radius: 2px; }

.contact select{ min-width: 115px; -webkit-appearance:none; -moz-appearance:none;}
.contact select::-ms-expand{ display: none;}
.contact select.style-select{  background: url(../images/select-arrow.png) no-repeat right center #fff; padding-right: 18px; }

.input-default { padding: 8px; border: 1px solid #000; border-radius: 4px; background-color: #fff; display: inline-block; box-shadow: 0px 3px 0 #c8c8c8; }

input.short { width: 35%; }
input.medium { width: 45%; }
input.long, textarea.long { width: 60%; }

.contact select.medium { width: 45%; }

.checkbox-style .check-item{ background-color: #fff; display: inline-block; width: 24px; height: 24px; vertical-align : middle;  position: relative; top: -2px; margin-right: 5px;}
.checkbox-style input[type=checkbox]{ display:none }
.checkbox-style input[type=checkbox]:checked + .check-item{ background: url(../images/icon-check.png) no-repeat center #fff; }
.checkbox-style input[type=radio]{ display:none }
.checkbox-style input[type=radio]:checked + .check-item{ background: url(../images/icon-check.png) no-repeat center #fff; }

.checkbox-style .checkbox { width: 28.33%; margin-right: 1%; }

.btn-black { background: #000; border: 1px solid #000; color: #fff; padding: 8px 12px; box-shadow: 0px 3px 0 #c8c8c8; }
.btn-black:hover { background: #fff701; color: #000;}
.btn-confirm { display: block; background: #fff701; max-width: 320px; width: 100%; text-align: center; padding: 12px; margin:0 auto; border: 4px solid #000; font-size: 22px; font-weight: 600; box-shadow: 3px 3px 0px #70f4a5, inset 2px 2px 2px #fff; transition: all 0.3s; }
.btn-confirm.harf { display: inline-block !important; max-width: 320px; width: 48%; margin: 0 5px;}

.btn-confirm:hover {  background: #fff; box-shadow: none;  border-style: solid; border-width: 4px;
    -moz-border-image: url(../images/border-btn.png) 4 repeat;
    -webkit-border-image: url(../images/border-btn.png) 4 repeat;
    -o-border-image: url(../images/border-btn.png) 4 repeat;
    border-image: url(../images/border-btn.png) 4 fill repeat;
}

.text-callus { display: block; padding: 8px; text-align: center; color: #171717; font-weight: 700; font-size: 16px; }

.sp-only{ display: none;}
.pc-only{ display: inline-block;}
@media(max-width:991px) {
    .checkbox-style .checkbox { width: 45%; }
}


@media(max-width:768px) {
    input.short { width: 45%; }
    input.medium { width: 55%; }
    input.long, textarea.long { width: 70%; }
}

@media(max-width:767px) {
    .checkbox-style .checkbox { width: 100%; }
    .btn-confirm { display: block; background: #fff701; max-width: 320px; width: 95%; text-align: center; padding: 12px; margin:0 auto; border: 2px solid #000; font-size: 18px; font-weight: 600; box-shadow: 2px 2px 0px #70f4a5, inset 2px 2px 2px #fff; transition: all 0.3s; }
    .btn-confirm.harf { display: inline-block !important; max-width: 320px; width: 95%; margin:5px;}
    

}

@media(max-width:480px) {
    input.short { width: 55%; }
    input.medium { width: 100%; }
    input.long, textarea.long { width: 100%; }

    .pc-only{ display: none;}
    .sp-only{ display: inline-block;}
}

@media(max-width:460px) {
    .contact ul li { margin: 4px 0; }
    .contact .title,
    .contact .data { width: 100%; text-align: left; padding: 4px; font-size: 16px;}
    .contact .data { border-bottom: 1px dotted #666; padding-bottom: 14px; }
}