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

form

****************************************************************************************************/
@media print, screen and (min-width:737px){
}
@media print, screen and (min-width:769px){
}
@media print, screen and (min-width:1200px){
}
/****************************************************************************************************

汎用

****************************************************************************************************/
/*
テキスト
*/
.form__notice1{
    margin-bottom: 5px;
    font-size: 1.2rem;
    line-height: 1.5;
}
/****************************************************************************************************

フォーム

****************************************************************************************************/
.form{}
.form.-input{}
.form.-preview{ margin-bottom: 30px; }
.form.-rewrite{}
/****************************************************************************************************

表組み

****************************************************************************************************/
.formTable{
    width:100%;
}

.formTable__col1{ width:auto; }
@media print, screen and (min-width:737px){
.formTable__col1{ width:350px; }
}


    .formTable th,
    .formTable td{
        padding:10px;
        border: 1px solid #ccc;
    }

    .formTable tr{
        display:block;
        margin-bottom:40px;
    }
@media print, screen and (min-width:737px){
    .formTable tr{
        display: table-row;
    }
}

    .formTable th{
        display:block;
        padding:10px;
        border-bottom:none;
        background-color:#efefef;
    }
        .formTable th::after{
            content:"";
            clear:both;
            display:block;
        }
@media print, screen and (min-width:737px){
    .formTable th{
        display: table-cell;
        border-bottom: 1px solid #ccc;
    }
}

    .formTable td{
        display:block;
        padding:10px;
    }
@media print, screen and (min-width:737px){
    .formTable td{
        display: table-cell;
    }
}
/****************************************************************************************************

フィールド

****************************************************************************************************/
.field{
    margin-bottom: 20px;
}

.form.-preview .field{
    padding-left: 1px;
    border-left: 2px solid #333;
}
@media print, screen and (min-width:737px){
.form.-preview .field{
    padding-left: 20px;
}
}

.fieldset{
    padding: 0;
    border: none;
}

.legend{
    margin-bottom: 5px;
    font-weight: bold;
}
@media print, screen and (min-width:737px){
.legend{
    margin-bottom: 10px;
}
}

.form.-preview .legend{
    margin-bottom: 0;
    font-weight: bold;
}
@media print, screen and (min-width:737px){
.form.-preview .legend{
    margin-bottom: 0;
}
}

/****************************************************************************************************

フォームパーツ

****************************************************************************************************/
.label{
    /* float:left; */
    display:inline-block;
}
/*
テキスト
------------------------------------------------------------*/
.text{
    padding:0.5em;
    font-size:1.4rem;
    border:1px solid #999;
    background-color:#fff;
    font-size:1.6rem;
}
.text:focus{
    background-color:#FFF0E0;
}
@media print, screen and (min-width:737px){
}

    .text.-name1{
        width: 100%;
    }
@media print, screen and (min-width:737px){
    .text.-name1{
    }
}

    .text.-postalCode1{
        width:100%;
    }
@media print, screen and (min-width:737px){
    .text.-postalCode1{
        width:200px;
    }
}

    .text.-tel1{
        width: 100%;
    }
@media print, screen and (min-width:737px){
    .text.-tel1{
    }
}

    .text.-addr1{
        width: 100%;
    }
@media print, screen and (min-width:737px){
    .text.-addr1{
    }
}
    
    .text.-email1{
        width: 100%;
    }
@media print, screen and (min-width:737px){
    .text.-email1{
    }
}
/*
ラジオ
------------------------------------------------------------*/
.radio{
}
@media print, screen and (min-width:737px){
.radio{
    margin-right:5px;
}
}
/*
チェックボックス
------------------------------------------------------------*/
.checkbox{
    margin-right:5px;
}
@media print, screen and (min-width:737px){
.checkbox{
}
}
/*
セレクト
------------------------------------------------------------*/
.select{
    font-size:1.6rem;
}
@media print, screen and (min-width:737px){
.select{
    font-size:1.4rem;
}
}

/*
テキストエリア
------------------------------------------------------------*/
.textarea{
    padding: 5px;
    width: 100%;
    border:1px solid #999;
    font-size:1.6rem;
    resize: vertical;
}
@media print, screen and (min-width:737px){
.textarea{
    font-size:1.6rem;
}
}


.textarea.-type1{ height: 100px; }
@media print, screen and (min-width:737px){
.textarea.-type1{ height: 240px; }
}
/****************************************************************************************************

入力内容の条件

****************************************************************************************************/
.rule{
    font-size:1.2rem;
}
@media print, screen and (min-width:737px){
.rule{
    font-size:1.4rem;
}
}
/****************************************************************************************************

エラー

****************************************************************************************************/
.errBox{
    margin-bottom:30px;
    padding:10px;
    border:3px solid #f00;
    border-radius:7px;
    color:#f00;
    background-color:#FFE5E5;
}
    .errBox__lead{
        font-weight:bold;
        font-size:1.6rem;
        text-align:center;
    }


/* .err__bg{ background-color:#FEF7FA; }
.err__bg.-even{ background-color:#FFEFF6; } */
.err__text{
    color:#F00;
    font-weight:bold;
}
/****************************************************************************************************

住所検索ボタン

****************************************************************************************************/
.zipSearch{
    display:inline-block;
    margin-top: 5px;
    padding: 5px 10px;
    border:none;
    border-radius:3px;
    background:#fff;
    font-size:1.2rem;
    cursor: pointer;
}
@media print, screen and (min-width:737px){
.zipSearch{
    margin-top: 0;
}
}

    .zipSearch.-sleep{
        background-color:#999;
        color:#fff;
    }
    
    .zipSearch.-active{
        background-color:#E54800;
        color:#fff;
        cursor:pointer;
    }
    .zipSearch.-active:hover{ background-color: #FD5D27; }

.zipSearch__info{
    margin-bottom: 0;
    padding: 5px 0 0 0;
    font-size: 1.2rem;
    line-height: 1.5;
    color:#f00;
}
/****************************************************************************************************

入力必須・任意

****************************************************************************************************/
.icon{
    display:inline-block;
    margin-left: 5px;
    padding:0 10px;
    color:#fff;
    border-radius:5px;
    font-size:1.0rem;
}
@media print, screen and (min-width:737px){
.icon{
    font-size:1.4rem;
}
}

    .icon.-required{ background-color:#d9534f; }
    .icon.-optional{ background-color:#337ab7; }
/****************************************************************************************************

submit

****************************************************************************************************/
.confirm{
    margin-top: 20px;
}


/*ボタン*/
.confirm__btn{
    -webkit-appearance:none;
    -webkit-transition:opacity .2s ease;
    transition:opacity .2s ease;
    
    padding:10px 40px;
    border:none;
    border-radius:5px;
    color:#fff;
    text-align:center;
    font-size:1.6rem;
    cursor:pointer;
}
    .confirm__btn:hover{ opacity: 0.6; }



/*確認*/
.confirm__btn.-preview{ background-color:#BD2357; }
/*送信*/
.confirm__btn.-submit{ background-color:#BD2357; }
/*再入力*/
.confirm__btn.-rewrite{
    background-color:#333;
    font-size:1.4rem;
}





/****************************************************************************************************

文字数カウント

****************************************************************************************************/
.counter{
    font-size: 1.2rem;
}
@media print, screen and (min-width:737px){
.counter{
    font-size: 1.4rem;
}
}

.counter__showCount{
}
.counter__showCount.-over{
    color: #f00;
    font-weight: bold;
}

.counter__error{
    display: none;
    color: #f00;
    font-weight: bold;
}