@charset "UTF-8";
/*
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

katsura form v3

このまま入れる先のstyle.cssと合体させてしまうのがおすすめです。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/


.formWrap {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.formWrap * {
    font-size: 16px;
}

/* stepBar
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.stepBar {
    position: relative;
    list-style: none;
    border: 2px solid #535353;
    margin: 0 0 1em;
    padding: 0;
    text-align: center;
    width: 100%;
    overflow: hidden;
    *zoom: 1;
}
.stepBar .step {
    position: relative;
    float: left;
    display: inline-block;
    line-height: 30px;
    padding: 8px 40px 8px 20px;
    background-color: #f5f5f5;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #000;
}
.stepBar .step:before,
.stepBar .step:after {
    position: absolute;
    left: -15px;
    display: block;
    content: '';
    background-color: #f5f5f5;
    border-left: 2px solid #535353;
    width: 23px;
    height: 26px;
}
.stepBar .step:after {
    top: 0;
    -moz-transform: skew(30deg);
    -ms-transform: skew(30deg);
    -webkit-transform: skew(30deg);
    transform: skew(30deg);
}
.stepBar .step:before {
    bottom: 0;
    -moz-transform: skew(-30deg);
    -ms-transform: skew(-30deg);
    -webkit-transform: skew(-30deg);
    transform: skew(-30deg);
}
.stepBar .step:first-child:before,
.stepBar .step:first-child:after {
    content: none;
}
.stepBar .step.current {
    color: #FFF;
    background-color: #535353;
}
.stepBar .step.current:before,
.stepBar .step.current:after {
    background-color: #535353;
}
.stepBar.step2 .step {
    width: 50%;
}
.stepBar.step3 .step {
    width: 33.333%;
}
.stepBar.step4 .step {
    width: 25%;
}
.stepBar.step5 .step {
    width: 20%;
}
.stepNo {
    font-size: 14px;
    line-height: 1.2;
    display: block;
}
.stepTitle {
    font-size: 16px;
    line-height: 1.2;
    display: block;
}

@media only screen and (max-width:640px){
    .stepBar .step {
        padding: 8px 10px 8px 10px;

    }
    .stepNo {
        font-size: 10px;
    }
    .stepTitle {
        font-size: 10px;
    }
    .stepBar .step:before, .stepBar .step:after {
        left: -7px;
        width: 12px;
        height: 20px;
    }

    table.formTable tr th,
    table.formTable tr td{width: 100%!important;text-align: left;}
}

/* form content
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
table.formTable {
    border-collapse:collapse;
    width:100%;
    margin:0 0 40px 0;
}

table.formTable tr th,
table.formTable tr td{
    border-bottom:1px solid #ccc;
    box-sizing:border-box;
    border-left: none!important;
}

table.formTable tr th .required {
    color:red;
    float:right;
}

table.formTable tr th {
    width:33.3%;
    text-align: right;
    padding: 30px 2% 0 0px;
}

table.formTable tr td {
    width:66.6%;
    padding: 30px 0 0 0;
    position: relative;
 }



table.formTable select {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
}

table.formTable input[type="text"],
table.formTable input[type="email"],
table.formTable select {
    box-sizing:border-box!important;
    color:#000;
    /*min-width:50% !important;*/
    vertical-align:top !important;
    padding: 12px 10px 11px 90px;
    border: 1px solid #ccc;
    width: 100%;
    background: #f5f5f5;
    /*border-bottom: none;*/
    border-radius: 0;
    line-height: normal!important;
    max-height: 45px;
}

table.formTable select {
    color: #a6a6a6;
}

table.formTable input[type="text"]:focus,
table.formTable input[type="email"]:focus,
table.formTable select:focus {
    border: 1px solid #535353;
    outline: 0;
    background: #fff;
}

table.formTable .radio_btn,
table.formTable .check_btn {
    box-sizing:border-box !important;
    color:#000;
    vertical-align:top !important;
    padding: 5px 10px 5px 90px;
    margin-bottom: 20px;
    width: 100%;
}

table.formTable textarea {
    box-sizing:border-box !important;
    color:#000;
    font-family:sans-serif;
    width: 100%;
    /*min-width:100% !important;*/
    margin: 0 auto;
    vertical-align:top !important;
    padding: 40px 10px 10px 10px;
    border: 1px solid #ccc;
    /*border-bottom: none;*/
    border-radius: 0;
}

/* Chromeオートコンプリートリセット*/
table.formTable input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #f5f5f5 inset;
    border: 1px solid #ccc!important;
    background: #fff!important;
}

:placeholder-shown {
    color: #a6a6a6;
}
/* Google Chrome, Safari, Opera 15+, Android, iOS */
::-webkit-input-placeholder {
    color: #a6a6a6;
}
/* Firefox 18- */
:-moz-placeholder {
    color: #a6a6a6;
    opacity: 1;
}
/* Firefox 19+ */
::-moz-placeholder {
    color: #a6a6a6;
    opacity: 1;
}
/* IE 10+ */
input.formTable:-ms-input-placeholder,
select.formTable:-ms-input-placeholder {
    color: #a6a6a6;
}


.c-red,.error_messe{color:red;}

table.formTable label {
    cursor:pointer;
    display: inline!important;
}
table.formTable label::after {
    content: "\A" ;
    white-space: pre ;
}

table.formTable .radio_btn .formError,
table.formTable .check_btn .formError {
    position: absolute!important;
    top: unset!important;
    left: 0!important;
    bottom: 0px;
}

/*.required-item{background-color:#effcff;}*/
.formError { cursor:pointer; display:block; left:300px; position:absolute; text-align:left; top:300px; z-index:990;}
.formError .formErrorContent{ -moz-border-radius:6px; -moz-box-shadow:0 0 6px #000; -o-border-radius:6px; -o-box-shadow:0 0 6px #000; -webkit-border-radius:6px;-webkit-box-shadow:0 0 6px #000; /*background:#ffdddd;*/border:2px solid #ddd;border-radius:6px;box-shadow:0 0 6px #000;color:#b90000;font-size:11px;min-width:120px;padding:4px 10px;position:relative;width:100%;z-index:991;}
.formError .formErrorArrow{ margin:-2px 0 0 13px;position:relative;width:15px;z-index:996;}
.ui-dialog .formError{ z-index:5000;}
.ui-dialog .formError .formErrorContent { z-index:5001;}
.ui-dialog .formError .formErrorArrow { z-index:5006;}
.inputContainer { float:left;position:relative;}
.formError.inline { display:inline-block;left:0;position:relative;top:0;}
.ajaxSubmit { background:#55ea55;border:1px solid #999;display:none;padding:20px;}
.formError.inline .formErrorContent { -moz-border-radius:0;-moz-box-shadow:none;-o-border-radius:0;-o-box-shadow:none;-webkit-border-radius:0;-webkit-box-shadow:none;border:none;border-radius:0;box-shadow:none;}
body[dir='rtl'] .formError .formErrorArrow,
body.rtl .formError .formErrorArrow { margin:-2px 13px 0 0;}
.formError .formErrorArrowBottom { -moz-box-shadow:none;-o-box-shadow:none;-webkit-box-shadow:none;box-shadow:none;margin:0 0 0 12px;top:2px;}
.formError .formErrorArrow div { -moz-box-shadow:0 2px 3px #444;-o-box-shadow:0 2px 3px #444;-webkit-box-shadow:0 2px 3px #444;background:#ffdddd;border-left:2px solid #ddd;border-right:2px solid #ddd;box-shadow:0 2px 3px #444;display:block;font-size:0;height:1px;line-height:0;margin:0 auto;}
.formError .formErrorArrowBottom div { -moz-box-shadow:none;-o-box-shadow:none;-webkit-box-shadow:none;box-shadow:none;}
.formError .formErrorArrow .line10 { border:none;width:13px;}
.formError .formErrorArrow .line9 { border:none;width:11px;}
.formError .formErrorArrow .line8 { width:11px;}
.formError .formErrorArrow .line7 { width:9px;}
.formError .formErrorArrow .line6 { width:7px;}
.formError .formErrorArrow .line5 { width:5px;}
.formError .formErrorArrow .line4 { width:3px;}
.formError .formErrorArrow .line3 { border-bottom:0 solid #ddd;border-left:2px solid #ddd;border-right:2px solid #ddd;width:1px;}
.formError .formErrorArrow .line2 { background:#ddd;border:none;width:3px;}
.formError .formErrorArrow .line1 { background:#ddd;border:none;width:1px;}

.greenPopup .formErrorContent,
.greenPopup .formErrorArrow div { background:#33be40;}

.blackPopup .formErrorContent,
.blackPopup .formErrorArrow div { background:#393939;color:#b90000;}

table.formTable .inputLabel {
    position: absolute;
    top: 37px;
    left: 10px;
    padding: 3px 20px;
    color: #fff;
    font-size: 14px;
}
.agreement .inputLabel {
    position: absolute;
    top: 8px;
    left: 25px;
    padding: 3px 20px;
    color: #fff;
    font-size: 14px;
}

.required { background: #b90000;}
.required::before { content: "必須";}
.optional { background: #707070;}
.optional::before { content: "任意";}

.agreement .required {
    padding: 3px 20px;
    color: #fff;
    font-size: 14px;
    background: #b90000;
    display: inline-block;
}
.agreement .optional {
    padding: 3px 20px;
    color: #fff;
    font-size: 14px;
    background: #707070;
    display: inline-block;
}
.agreement {
    margin: 0 auto 40px auto;
}
.agreement label {
    display: inline-block;
}

.agreement_text {
    font-size: 14px;
    margin: 0 auto 30px auto;
    width: 80%;
    border: 1px solid #ccc;
    height: 200px;
    overflow-y: scroll;
    padding: 20px;
    box-sizing: border-box;
}

.agreement_btn {
    width: 180px;
    position: relative;
    padding: 10px;
    text-align: right;
}

.agreement_btn_input {
    position: absolute;
    left: 5px;
    top: 15px;
}

.agreement_btn .formError.inline .formErrorContent {
    position: absolute;
    top: 13px;
    left: -130px;
    margin: 0 auto;
    width: 240px!important;
}

.submit_btn {
    width: 100%;
    margin: 0 auto 40px auto;
    text-align: center;
}
.submit_btn input,
.submit_btn a {
    width: 300px;
    margin-bottom: 10px;
    padding: 15px 40px;
    box-sizing: border-box;
    color: #fff;
    border-style: none;
    text-decoration: none;
}
.submit_btn input:hover,
.submit_btn a:hover {
    opacity: .7;
}
.submit_btn .submit {
    background-color: #1b1b1b!important;
}
.submit_btn .return {
    background-color: #626262;
}


@media (max-width: 767px) {


    table.formTable input[type="text"],
    table.formTable input[type="email"] { min-width: 100% !important;}

}

@media only screen and (max-width:640px){
    .agreement_text {
        width: 100%;
        padding: 10px;
    }

    table.formTable input[type="text"],
    table.formTable input[type="email"],
    table.formTable select {
        padding: 12px 10px 11px 70px;
    }

    table.formTable .inputLabel {
        padding: 3px 10px;
        top: 10px;
    }

    .submit_btn input,
    .submit_btn a {
        width: 90%;
    }


    table.formTable tr th {
        display: block;
        width: 100%;
        text-align: left;
        border-bottom: none;
    }

    table.formTable tr td {
        display: block;
        width: 100%;
        padding: 0;
        border-bottom: none;
    }

    table.formTable input[type="text"],
    table.formTable input[type="email"],
    table.formTable select {
        border: 1px solid #ccc;
    }

}


/* confirmPage
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.confirm_text {
    text-align: center;
    font-size: 14px;
}

@media only screen and (max-width:640px){
    .confirm_text {
        text-align: left;
    }
}

/* thanksPage
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.thanks_text {
    margin: 70px auto 70px auto;
    text-align: center;
}
.thanks_text_lg {
    font-size: 1.4em;
    display: block;
    margin-bottom: 20px;
}
.thanks_text_sm {
    font-size: 1em;
    line-height: 2.5;
}

.top_btn {
    width: 100%;
    margin: 0 auto 40px auto;
    text-align: center;
}
.top_btn .top a {
    width: 300px;
    padding: 15px 40px;
    box-sizing: border-box;
    color: #fff;
    border-style: none;
    background-color: #1b1b1b;
    text-decoration: none;
}
.top_btn .top a:hover {
    opacity: .7;
}

@media only screen and (max-width:640px){
    .thanks_text {
        text-align: left;
        margin: 40px auto 70px auto;
    }
    .thanks_text_sm {
        line-height: 1.8;
    }
}

/* Common CSS
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.text_center {
    text-align: center;
}
.bg {
    background: #f00;
}