/*==========================================*/
/*
	ContactForm style
*/
/*==========================================*/

/*個別指定を解除*/
.mktoCheckboxList.mktoHasWidth{
    width:calc(100% - 12em - 7px) !important;
}

/*--------------------------------------
 BOX
*/

/* WRAP */
.mktoForm {
    width: auto !important;
    font-size: 100% !important;
    text-align: left;
    border-top: 1px solid #efefef;
}
/*各設問*/
.mktoForm .mktoFormRow {
    clear: both;
    position: relative;
    border: 1px solid #efefef;
    border-top: none;
}

.mktoForm .mktoFormCol {
    clear: both;
    float: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    position: relative;
    overflow: hidden;
}

.mktoForm .mktoOffset {
    display: none !important;
}

/*labelとinputをwrap*/
.mktoForm .mktoFieldWrap {
    float: none !important;
    display: block;
    position:relative;
}

.mktoForm .mktoField {
    margin: 10px !important;
}

/*--------------------------------------
 部品
*/

/*見出しラベル*/
.mktoForm .mktoLabel {
    position: relative;
    float: none !important;
    display: inline-block;
    margin: 0;
    padding: 10px 0 10px 10px !important;
    width: 100% !important;
    flex-basis: 12em !important;
    box-sizing: border-box;
    text-align: left;
    border-top: none;
    border-bottom: 1px solid #fff;
    background: #efefef;
    font-weight: bold;
    line-height: 1.2em;
    vertical-align: middle;
}

/* 必須表示の非表示 */
.mktoForm .mktoOffset,
.mktoForm .mktoGutter,
.mktoForm .mktoAsterix,
.mktoForm .req,
.mktoForm .mktoClear,
.mktoForm #lpConfirm_hs+label {
    display: none !important;
}

/*必須※マーク 非表示 */
.mktoForm .mktoOffset,
.mktoForm .mktoGutter,
.mktoForm .mktoAsterix,
.mktoForm .req,
.mktoForm .mktoClear,
.mktoForm #lpConfirm_hs+label {
    display: none !important;
}

/*必須マーク*/
.mktoForm .mktoRequiredField .mktoLabel:before {
    content: "必須";
    display: block;
    position:absolute;
    right:5px;
    padding: 4px 5px;
    background: #e70128;
    color: #fff;
    top: 5px;
    right:10px;
    font-weight: normal;
    font-size:.9em;
}

/* INPUT--*/
.mktoForm .mktoFormRow input {
    height: 40px !important;
    padding: 0 5px !important;
    background: #fafafa !important;
    border: 1px solid #ccc !important;
    box-shadow:none !important;
    font-size: 100% !important;
    color:inherit !important;
    line-height:inherit !important;
}
/* INPUT 複数INPUT対応*/
.mktoForm .mktoFormRow .mktoFormCol >.mktoFieldWrap>input {
  width: calc(50% - 20px) !important;
}

/*wrap の中に2つのinputの時はラベルを非表示*/
.mktoForm .mktoFormRow>.mktoFormCol+.mktoFieldDescriptor label {
    display: none !important;
}

/*wrap の中の1つ目のINPUT幅を戻す*/
.mktoForm .mktoFormRow .mktoFormCol:nth-last-of-type(2) >.mktoFieldWrap>input {
    width: calc(100% - 20px) !important;
}

/*wrap の中に2つのinputの時は2つ目の幅を50%*/
.mktoForm .mktoFormCol:nth-of-type(2) {
    width: 50% !important;  
    position: absolute;
    bottom: 0;
    right: 0;
}

/*SELET*/
.mktoForm select {
    height: 40px !important;
    width: calc(100% - 20px) !important;
    padding: 0 5px !important;
    background: #fafafa !important;
    border: 1px solid #ccc !important;
    box-shadow:none !important;
    font-size: 100% !important;
}

/*TEXTAREA*/
.mktoForm textarea {
    width: calc(100% - 20px) !important;
    height:7em !important;
    vertical-align: top;
    padding: 10px 5px !important;
    min-height: 120px !important;
    background: #fafafa !important;
    border: 1px solid #ccc !important;
    box-shadow:none !important;
    font-size: 100% !important;
}

/*CHECKBOX*/
.mktoForm .mktoCheckboxList {
    float: left;
}
.mktoForm input[type="checkbox"] {
    /*themeで非表示にされるのを回避*/
    opacity:1 !important;
    margin: 10px 10px !important;
    width: 20px !important;
    height: 20px !important;
    box-shadow: none !important;
    float: left;
}

/*CHECKBOX ラベルと並んだ時*/
.mktoForm input[type="checkbox"] +label{
    display: inline-block;
    margin: 10px 10px 10px 0 !important;
    width: calc(100% - 60px);
    margin: 0;
    min-height: 20px;
}
/*CHECKBOX ラベルと並んだ時 themeのCSSを削除*/
.mktoForm input[type="checkbox"] +label:before{
    display:none;
}

/*RADIO*/
.mktoForm input[type="radio"] {
    /*themeで非表示にされるのを回避*/
    opacity:1 !important;
    margin: 10px 10px !important;
    width: 20px !important;
    height: 20px !important;
    box-shadow: none !important;
    float: left;
}

/*RADIO ラベルと並んだ時*/
 .mktoForm input[type="radio"]+label{
    display: inline-block;
    margin: 10px 10px 10px 0 !important;
    width: calc(100% - 60px);
    margin: 0;
    min-height: 20px;
}
/*RADIO ラベルと並んだ時 themeのCSSを削除*/
.mktoForm input[type="radio"] +label:before{
    display:none;
}

/*送信ボタン*/
.mktoForm .mktoButtonRow {
    width: 100%;
    margin: 24px auto;
}
.mktoForm .mktoButtonWrap {
    line-height: 1;
}
.mktoForm .mktoButton {
    transition: all 0.3s ease 0s;
    background: -webkit-linear-gradient(top, #c40200 50%, #b00200 51%, #c40200 100%) !important;
    background: -moz-linear-gradient(top, #c40200 50%, #b00200 51%, #c40200 100%) !important;
    background: linear-gradient(to bottom, #c40200 50%, #b00200 51%, #c40200 100%) !important;
    display: block;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 18px 10px !important;
    box-sizing: border-box;
    cursor: pointer;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    font-family: inherit !important;
    text-shadow: none !important;
    color: #fff !important;
    text-decoration: none !important;
    text-align: center;
    font-weight: normal !important;
    font-size: 1rem !important;
    line-height: 16px !important;
}

/*個人情報について*/
.mktoForm .mktoHtmlText {
    padding: 10px;
}
.mktoHtmlText dl,
.mktoHtmlText ul {
    padding-left: 0;
    padding-right: 0;
}
.mktoHtmlText dt,
.mktoHtmlText dd,
.mktoHtmlText li {
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
}
.mktoHtmlText .sig01 {
    padding: 0 10px !important;
}

/*リストの見出し*/
.mktoHtmlText .se-note-block01-b dl dt, 
.mktoHtmlText .se-note-block01 dl dt{
    color: #cc0000;
    font-weight: bold;
}
.mktoHtmlText .se-note-block01-b .ul01,
.mktoHtmlText .se-note-block01 .ul01{
    margin-top: 0.3em;
    margin-bottom: 0.3em;
}
.mktoHtmlText .se-note-block01-b .ul01 li,
.mktoHtmlText .se-note-block01 .ul01 li{
    margin-left: 1em;
}

/*utility*/
.mktoHtmlText .se-p01-t{
   margin-top: 0.7em;
}
.mktoHtmlText .sig01 {
    margin-top: 1.2em;
    padding: 0 18px;
}
.mktoHtmlText .sig01 ul {
    margin-left:15px;
}
.mktoHtmlText .sig01 ul li{
    position:relative;
}
.mktoHtmlText .sig01 ul li:before{
    position:absolute;
    content:"";
    display:inline-block;
    top:.55em;
    width: 0;
    height: 0;
    margin-left:-15px;
    border-style: solid;
    border-width: 3px 0 3px 5px;
    border-color: transparent transparent transparent #cc0000;
}
.mktoHtmlText .sig01 p {
    margin:0;
}

/*--------------------------------------
送信完了/注意文
*/

#mainarea #read{
    margin: 3rem 2rem;
    padding: 20px;
    border: 2px solid #efefef
}
#read strong{
    padding-bottom:1rem;
    font-size: 1.2rem;
    color:#E86C46;
}


/*--------------------------------------
validation error表示
*/
.mktoError{
    bottom:-23px !important;
    right:auto !important;
    left:15% !important;
}
.mktoForm .mktoError .mktoErrorMsg{
    max-width:none !important;
    -webkit-box-shadow:none !important;
    box-shadow:none !important;
    background-image:none !important;
    background-color:#e70128 !important;
    border-color:#aaa !important;
    text-shadow:none !important;
    font-size:.8em !important;
}
.mktoForm .mktoError .mktoErrorArrowWrap{
    width: 16px !important;
    height: 16px !important;
    top:19px !important;
    left:10px !important;
    padding-left:3px;
}
.mktoForm .mktoError .mktoErrorArrow{
    width: 9px !important;
    height: 9px !important;
    border:none !important;
    border-right: 1px solid #aaa !important;
    border-bottom: 1px solid #aaa !important;
}


@media only screen and (min-width: 481px) {
    .mktoForm .mktoFieldWrap {
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
        -webkit-align-items: stretch;
        align-items: stretch;
    }
  
    /*必須マーク*/
    .mktoForm .mktoRequiredField .mktoLabel:before {
        margin-top: 0;
        top: 10px;
    }

    /*見出しラベル*/
    .mktoForm .mktoLabel {
        z-index: 2;       
        width: 12em !important;
        flex-basis: 12em !important;
        padding: 20px 0 0 4px !important; 
    }
  
    /*INPUT*/
    .mktoForm .mktoFormRow .mktoFormCol >.mktoFieldWrap>input  {
        width: calc( (100% - 12em - 20px) / 2) !important;
    }
  
    /* INPUT wrap の中に2つのinputの時はラベルを非表示*/
    .mktoForm .mktoFormRow>.mktoFormCol+.mktoFieldDescriptor label {
        display: none !important;
    }
    /* INPUT wrap の中の1つ目のINPUT以外を戻す*/
    .mktoForm .mktoFormRow .mktoFormCol:nth-last-of-type(2) >.mktoFieldWrap>input {
        width: calc( 100% - 12em - 20px) !important;
        float: left;
    }
  
    /* INPUT wrap の中の2つ目は半分幅*/
    .mktoForm .mktoFormCol:nth-of-type(2) {
        width: calc( (100% - 12em - 20px) / 2) !important;
    }
  
    /* INPUT wrap の中の2つ目は半分幅の中 */
     .mktoForm .mktoFormRow .mktoFormCol:nth-of-type(2) >.mktoFieldWrap>input{
        width: 100% !important;
    }
  
    /*SELET*/
    .mktoForm select {
        width: calc(100% - 12em - 20px) !important;
    }
  
    /*TEXTAREA*/
    .mktoForm textarea {
        width: calc(100% - 12em - 20px) !important;
    }
  
    /* 送信ボタン*/
    .mktoForm .mktoButton {
        width: 70% !important;
    }
    
    /*utility*/
    .mktoHtmlText .sig01 ul {
        width: 40%;
        float: left;
    }
    .mktoHtmlText .sig01 p {
        width: 49%;
        float: right;
        text-align: right;
    }

    /*--------------------------------------
    validation error表示
    */
    .mktoError{
        bottom:2px !important;
        left: 34% !important;
    }
    .mktoForm .mktoError .mktoErrorArrowWrap{
        top: -3px !important;
        left: 5px !important;
    }

    .mktoForm .mktoError .mktoErrorArrow{
        border:none !important;
        border-left: 1px solid #aaa !important;
        border-top: 1px solid #aaa !important;
    }

    /* INPUT wrap の中の2つ目は半分幅の中 */
    .mktoForm .mktoFormRow .mktoFormCol:nth-of-type(2) >.mktoFieldWrap>.mktoError{
        right:20% !important;
        left:auto !important;
    }
}