@charset "UTF-8";



/* content===========================================



[01] Heading

[02] Text

[03] List

[04] Icon

[05] table

[06] Form

[07] Button

[08] Step

[09] Box

[10] Other



===================================================== */





/* [01] Heading

=========================================================================================== */



.FormHeadingLebel2 {

    margin: 0 0 10px;

    padding: 0;

    background: none;

  /*  border-bottom: 4px solid #eee;*/

    padding: 0 5px;

    font-size: 150%;

    font-weight: normal;

    background: none;

}

/*.FormHeadingLebel2:after {

    content: "";

    display:block;

    position: relative;

    top:4px;

    left:-5px;

     width: 33%;

     max-width: 140px;

     border-bottom: 4px solid #999;

}*/









/* [02] Text

=========================================================================================== */



.FormTextExample {

    margin: 8px 0 0

}

.FormTextError {

    font-weight: bold;

    line-height: 1.2;

    color: #CE0E0E;

    display: block;

    min-height:20px;

    margin: 10px 0 5px 30px;

}

.FormTextError .Icon{

    vertical-align: -4px;

    margin: 0 5px 0 -30px;

}
.FormNe{
    font-size:82%;
    font-weight:normal;
    color:#e60027;
}
.FormNe span{
    color:#333;
}
.FormNe.TypeTop{
    position:absolute;
    right:0;
    top:5px;
}
.FormTextNoti{
    display: block;
    margin-top: 5px;
    font-size: 13px;
    color: #888;
}



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

    .FormTextExample {

        margin: 0 0 5px 0;

    }

    .FormTextError {

        margin: 0 0 5px 30px;

    }

}









/* [03] List

=========================================================================================== */

.FormList{

    padding-left: 10px;

    margin: 5px 5px 10px 5px;

}

.FormList li{

    line-height: 1.2;

    list-style: outside square;

    margin: 2px;

}



.FormListHorizontal{

    margin-top: 2px;

}

.FormListHorizontal li{

    float: left;

    margin-right: 20px;

}

.FormListHorizontal label {

    display: inline-block;

    min-width: 30px;

}







/* [04] Icon

=========================================================================================== */



.FormIconRequired,

.FormIconOptional {

    white-space: nowrap;

    display: inline-block;

    color: #cc0000;

    font-size: 80%;

    font-weight: normal;

    margin-left: 10px;

}

.FormIconOptional {

    color: #666;

}









/* [05] table

=========================================================================================== */

.FormTable{

    width: 100%;

    margin-bottom: 0;

    border-collapse: separate;

    border-spacing: 0 20px;

}

.FormTable caption{

    display: none;

}

.FormTable th,

.FormTable td{

    line-height: 1.2;

    background: none;

    border:none;

}

.FormTable th{

    font-size: 100%;

    text-align: right;

    vertical-align: top;

    width: 26%;

    min-width: 200px;

    padding: 10px 20px;

    border-right:2px solid #eee;

}

.FormTable td{

    font-size: 90%;

    width: 74%;

    padding: 0 20px;

}





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

    .FormTable{

        border-collapse: separate;

        border-spacing: 0 20px;

        border: none;

    }

    .FormTable th,

    .FormTable td{

        display: block;

        width: 100%;

        border: none;

        word-wrap: break-word;

        word-break: break-all;

    }

    .FormTable th{

        font-size: 120% !important;

        text-align: left;

        padding: 0 0 5px 0 !important;

    }

    .FormTable td{

       font-size: 90% !important;

       padding: 0 !important;

    }

}









/* [06] Form

=========================================================================================== */

.FormTable input[type="text"],

.FormTable input[type="email"],

.FormTable input[type="tel"],

.FormTable textarea {

    -webkit-appearance: none;

}



.FormTable input[type="text"],

.FormTable input[type="email"],

.FormTable input[type="tel"],

.FormTable textarea,

.FormTable select {

    font-size: 100%;

    line-height: 1.2 !important;

    border-radius: 0;

}

.FormTable input[type="text"],

.FormTable input[type="email"],

.FormTable input[type="tel"],

.FormTable select,

.FormTable textarea {

    box-sizing: border-box;

    width: 90%;

    min-width:285px;

    margin: 5px 0;

    padding: 6px;

    border: 1px solid #ddd;

    display: block;

}

.FormTable input[type="radio"] {

    margin-right: 5px;

}

.FormTable select{

    -moz-appearance: none;

    -webkit-appearance: button;

    appearance: button;

    white-space: nowrap;

    width: 40%;

    min-width:250px;

    height:32px;

    padding:5px 30px 5px 5px;

    padding: 5px\9;

    background: url("../images/icon/icon_down_l_gray_hd.gif") 97% center no-repeat, -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff));

    background: url("../images/icon/icon_down_l_gray_hd.gif") 97% center no-repeat, linear-gradient(#fff, #fff);

    background-size: 15px 15px;

}

.FormTable select::-ms-expand {

    display: none;

}

.FormTable textarea {

    height: 16em;

}



.FormTable input.isError,

.FormTable textarea.isError,

.FormTableStyle.TypeStyle2 input.isError,
.FormTableStyle.TypeStyle2 textarea.isError { 

    background-color: #FFE8E8;

    border: 1px solid #FF0000;

}

.FormTable select.isError{

    background-color: #FFE8E8\9;

    background: url("../images/icon/icon_down_l_gray_hd.gif") 97% center no-repeat, -webkit-gradient(linear, left top, left bottom, from(#FFE8E8), to(#FFE8E8));

    background: url("../images/icon/icon_down_l_gray_hd.gif") 97% center no-repeat, linear-gradient(#FFE8E8, #FFE8E8);

    background-size: 15px 15px;

    border: 1px solid #FF0000;

}

.FormTableStyle.TypeStyle2 select.isError{
    background-color: #FFE8E8\9;
    border: 1px solid #FF0000;
}



.FormTable input[type="text"]:focus,

.FormTable input[type="email"]:focus,

.FormTable input[type="tel"]:focus,

.FormTable textarea:focus {

    background: #ffffee;

    border: 1px solid #bbb;

}

.FormTable select:focus {

    background: #ffffee;

    background: url("../images/icon/icon_down_l_gray_hd.gif") 97% center no-repeat, -webkit-gradient(linear, left top, left bottom, from(#ffffee), to(#ffffee));

    background: url("../images/icon/icon_down_l_gray_hd.gif") 97% center no-repeat, linear-gradient(#ffffee, #ffffee);

    background-size: 15px 15px;

    border: 1px solid #bbb;

}





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

    .FormTable input[type="text"],

    .FormTable input[type="email"],

    .FormTable input[type="tel"],

    .FormTable select,

    .FormTable textarea {

        margin-bottom: 10px;

    }

    .FormTable input[type="text"],

    .FormTable input[type="email"],

    .FormTable input[type="tel"],

    .FormTable textarea {

        width: 100%;

    }

    .FormTable select {

         width: 70%;

    }



}


.FormBoxSection textarea{
    box-sizing: border-box;
    width: 100%;
    height: 150px;
    padding: 2px 4px 4px 4px;
    border: solid 1px #ddd;
    line-height: 22px;
}



/* [07] Button

=========================================================================================== */



.FormButton{

    text-align: center;

    margin:10px 0 20px 0;

}

.FormButton li{

    width:90%;

    max-width: 230px;

    margin: 0 auto;

}
.FormButton.TypeFormButton li{
	max-width: 255px
}

.FormButton.inline{

    margin-left: -20px;

}

.FormButton.inline li{

    display: inline-block;

    margin-left:20px;

}

.FormButton li button{
	font-family:'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',sans-serif;
	
    font-size:90% ;
    
    font-weight: bold;
    
    text-decoration: none;

    text-align:center;

    line-height: 1.2;

    color:#000;

    display: block;

    width: 100%;

    padding: 14px 0;

    background: #cccccc url("../images/icon/icon_link_right_l_white_hd.gif") 98% center no-repeat;

    background: #cccccc url("../images/icon/icon_link_right_l_white.gif") 98% center no-repeat\9;

    background-size: 15px 15px;

    border:none;

    cursor: pointer;
}

.FormButton li a{

    font: bold 90%/1.2 Arial,Helvetica,sans-serif;

    text-decoration: none;

    text-align:center;

    line-height: 1.2;

    color:#000;

    display: block;

    width: 100%;

    padding: 14px 0;

    background: #cccccc url("../images/icon/icon_link_right_l_white_hd.gif") 98% center no-repeat;

    background: #cccccc url("../images/icon/icon_link_right_l_white.gif") 98% center no-repeat\9;

    background-size: 15px 15px;

    border:none;

    cursor: pointer;

}

.FormButton li button{

    line-height: 1.1;

}

.FormButton li button:hover,

.FormButton li a:hover {

    font-weight: bold;

    background-color: #bbbbbb;

    background-position: 99% center;

}



.FormButton li button.FormAgreeButton,

.FormButton li button.FormInputButton,

.FormButton li button.FormConfButton,

 .FormButton li button.FormHomeButton{

    color: #ffffff;

    background-color: #e74011;

}

.FormButton li button.FormAgreeButton:hover,

.FormButton li button.FormInputButton:hover,

.FormButton li button.FormConfButton:hover,
.FormButton li button.FormHomeButton:hover {

    background-color: #eb0812;

}



.FormButton li button.FormAgreeCorrection,
.FormButton li button.FormModifyButton{

    background-image:url("../images/icon/icon_link_left_l_white_hd.gif");

    background-image:url("../images/icon/icon_link_left_l_white.gif")\9;

    background-size: 15px 15px;

    background-position: 2% center;

}

.FormButton li button.FormAgreeCorrection:hover,
.FormButton li button.FormModifyButton:hover{

    background-position: 1% center;

}



.FormButton li.Edit{

    width: 25%;

    max-width:150px;

	float:left;

}

.FormButton li.Edit button{

    color: #fff;

	width:100%;

	background-color:#666;

    background-image:url("../images/icon/icon_link_left_l_white_hd.gif");

    background-image:url("../images/icon/icon_link_left_l_white.gif")\9;

    background-size: 15px 15px;

	background-position: 2% center;

    background-repeat: no-repeat;

}

.FormButton li.Edit button:hover{

    background-color:#444;

	background-position: 1% center;

}



.FormButtonScroll {

    font-size: 110%;

    font-weight: bold;

    line-height: 140%;

    color: #fff;

    white-space: nowrap;

    text-decoration: none;

    width: auto;

    max-width:200px;

    overflow:visible;

    padding: 10px 32px 8px 15px;

    /padding: 8px 32px 3px 15px;

    background: #e60027 url("../images/button_to_error.png") right 50% no-repeat;   

    border: 0;

}

.FormButtonScroll:hover {

    font-weight: bold;

    background: #b1000e url("../images/button_to_error_hover.png") 100% 50% no-repeat;  

    border: 0;

    cursor: pointer;

}





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

    .FormButton{

        margin-top:0;

    }

    .FormButton.inline{

        margin-left: 0;

    }

    .FormButton.inline li{

        display: block;

        margin-left: auto;

        margin-bottom: 20px;

    }



    .FormButton li.Edit{

        float: none;

        width: 100%;

        max-width: 230px;

        margin-bottom: 20px;

	}

}









/* [08] Step

=========================================================================================== */

.FormStep{

    font-size: 83%;

    text-align: left;

    overflow: hidden;

    margin: 0 0 10px 0;

    padding: 0;

    background: #EFEFEF url("../images/bg_4grid_3step1.gif") 0 50% no-repeat;

    background-size: 100% auto;

}

.FormStep.Step2 {

    background-image: url("../images/bg_4grid_3step2.gif");

}

.FormStep.Step3 {

    background-image: url("../images/bg_4grid_3step3.gif");

}

.FormStep li{

    line-height: 1.2;

    list-style: none;

    width: 30%;

    float: left;

    margin: 0;

    padding: 0 5% 0 0;

}

.FormStep li.LastItem {

    padding: 0;

}

.FormStep strong,

.FormStep em {

    font-weight: bold;

    line-height: 1.2;

    display: block;

    color: #fff;

    padding: 10px 5px 10px 10px;

}

.FormStep em {

    font-style: normal;

    font-weight: normal;

    color: #000;

}

.FormStep span {

    margin-left: 10px;

}

.Form3Step{
    font-size: 83%;
    text-align: left;
    overflow: hidden;
    margin: 0 0 10px 0;
    padding: 0;
    background: #EFEFEF url("../images/bg_step3_1.gif") 0 50% no-repeat;
    background-size: 100% auto;
}

.Form3Step.Step2 {
    background-image: url("../images/bg_step3_2.gif");
}

.Form3Step.Step3 {
    background-image: url("../images/bg_step3_3.gif");
}

.Form3Step li{
    box-sizing:border-box;
    line-height: 1.2;
    list-style: none;
    width: 33.3%;
    float: left;
    margin: 0;
    padding: 0 5% 0 0;
}

.Form3Step li.LastItem {
    padding: 0;
}

.Form3Step strong,

.Form3Step em {
    font-weight: bold;
    line-height: 1.2;
    display: block;
    color: #fff;
    padding: 10px 5px 10px 10px;
}

.Form3Step em {
    font-style: normal;
    color: #000;
}




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

    .FormStep span {

        display: none;

    }

    .Form3Step span {

        display: none;

    }
}









/* [09] Box

=========================================================================================== */



.FormBox {

    font-size: 120%;

    text-align: center;

    word-wrap:break-word;

    word-break:break-all;

    margin: 20px 0;

    padding: 10px;

    border: 1px solid #ccc;

}



.FormBoxError {

    margin: 0 0 15px;

    padding: 10px 10px 0;

    border: 2px solid #ff0000;

    background: #ffe8e8;

}

.FormBoxSection{
    position:relative;
}


.FormResultBox{
    padding:24px 0;
    margin-bottom:25px;
    border-top:1px solid #eee;
    border-bottom:1px solid #eee;
    background: #fafafa;
    text-align:center;
}
.FormResultBox strong{
    font-size:150%;
    font-weight:bold;
    color:#333;
}


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

    .FormBox {

        font-size: 90%;

    }

}







/* [10] Other

=========================================================================================== */



.isHide{

    display: none;

}