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

    FORM CSS

****************************************************/
.LPForm {  }

.LPForm { font-size:16rem; line-height:1.6em; text-align:left; }
.LPForm label { display:block; }
.LPForm input[type=tel] { max-width:320rem; width:100%; }
.LPForm input[type=email], .LPForm input[type=password], .LPForm input[type=text], .LPForm input[type=url] { width:100%; }
.LPForm .select { position:relative; line-height:44rem; }
.LPForm .select span {display:inline-block;  }
.LPForm .select select { padding-right:50rem; appearance: none; outline:none; }
.LPForm .select::after { content:''; position:absolute; right:15rem; top:calc(50% - 9rem); width:12rem; height:12rem; border-left:2px solid; border-bottom:2px solid; transform:rotate(-45deg); pointer-events:none; }
.LPForm .formBox { border:2px solid #ccc; background:#fff; }
.LPForm .formBox .content { padding:20rem; }
.LPForm .radioGroup { display:flex; justify-content:flex-start; align-items:stretch; width:100%; gap:20rem 40rem; }
.LPForm .radioGroup.columns { flex-direction:column; align-items:flex-start; }
.LPForm .radio { display:inline-flex; width:auto; }
.LPForm .checkboxGroup { display:flex; justify-content:flex-start; align-items:stretch; width:100%; gap:20rem 40rem; }
.LPForm .checkbox { display:inline-flex; width:auto; }
.LPForm .hasInput { display:flex; justify-content:flex-start; width:100%; }
.LPForm .hasInput * + input { margin-left:1.2em; width:auto; flex:1; }
.LPForm .hide { display:none !important; }
.LPForm .autoZip { width;100%; display:flex; column-gap:20rem; justify-content:flex-start; }
.LPForm .flexBox { display:flex; gap:20rem; width:100%; justify-content:flex-start; }

.LPForm .full { width:100%; }
.LPForm .half { max-width:50%; width:100%; }
.LPForm .quarter { max-width:25%; width:100%; }
.LPForm .splitSeiMei { display:flex; justify-content:space-between; width:100%; }
.LPForm .splitSeiMei > * { width:calc(50% - 10rem) !important; }


/*--------------------------------------------------------

    フォームステップ

        <ul class="LPFormStep">
            <li class="active"><img width="48" height="48" src="<?php templateUrl(); ?>/libs/img/contact-step-form.svg"><p>入力</p></li>
            <li><img width="48" height="48" src="<?php templateUrl(); ?>/libs/img/contact-step-confirm.svg"><p>確認</p></li>
            <li><img width="48" height="48" src="<?php templateUrl(); ?>/libs/img/contact-step-complete.svg"><p>完了</p></li>
        </ul>

--------------------------------------------------------*/
.LPFormStep { display:flex; column-gap:120rem; margin-bottom:40rem; }
.LPFormStep img { width:48rem; height:auto; }
.LPFormStep > * { text-align:center; color:#ccc; fill:#ccc; }
.LPFormStep > *.active { color:inherit; fill:inherit; }
.LPFormStep > * + *::before { content:''; position:absolute; left:calc(-60rem - 10rem); top:24rem; width:20rem; height:1rem; background:#ccc; }

/*--------------------------------------------------------

    インデックスレイアウト

        <dl class="formIndex">
            <dt>インデックス項目</dt>
            <dd>
                フォーム要素
            </dd>
        </dl>

--------------------------------------------------------*/
.LPForm .formIndex { display:flex; justify-content:flex-start; align-items:stretch; border-bottom:1px solid #ccc; }
.LPForm .formIndex:last-child { border-bottom:none; }
/* インデックス部 */
.LPForm .formIndex > *:first-child { width:260rem; min-height:80rem; padding:0 20rem; display:flex; justify-content:flex-start; font-weight:bold; background:#eee; }
.LPForm .formIndex > *:first-child > * { display:block; padding-left:56rem; }
.LPForm .formIndex > *:first-child > *::before { content:'任意'; font-size:14rem; line-height:0; height:20rem; display:flex; padding:0 8rem 0; position:absolute; left:0; top:2rem; border:1px solid; background:#fff; }
.LPForm .formIndex.required > *:first-child > *::before { content:'必須'; background:#fff; color:#f00; }
.LPForm .formIndex.noIcon > *:first-child > * { padding-left:0; }
.LPForm .formIndex.noIcon > *:first-child > *::before { content:none; }
/* コンテンツ部 */
.LPForm .formIndex > *:not(:first-child) { width:calc(100% - 260rem); padding:20rem 20rem; border-left:1px solid #ccc; /* display:flex; align-items:flex-start; flex-direction:column; */ }
.LPForm .formIndex > *:not(:first-child) > * ~ *:not(.validateErrorMessage) { margin-top:10rem; }
.LPForm .formIndex.short > *:first-child { width:200rem; }
.LPForm .formIndex.short > *:not(:first-child) { width:calc(100% - 200rem); }
@media (max-width:980px) {     /* TABLET */
}
@media (max-width:780px) {     /* PHONE */
    .LPForm .formIndex { border-bottom:none; }
    .LPForm .formIndex + .formIndex { margin-top:12rem; }
    .LPForm .formIndex { align-items:flex-start; flex-direction:column; }
    .LPForm .formIndex > *:first-child { width:100%; min-height:0; padding:4rem 12rem; }
    .LPForm .formIndex > *:not(:first-child) { width:100%; padding:12rem; border-left:none; letter-spacing:0; }
}


/*--------------------------------------------------------

    確認チェックボックス

--------------------------------------------------------*/
.LPForm .agreeBox { display:flex; flex-direction:column; margin-top:40rem; }
.LPForm .agreeBox .comment { padding-bottom:20rem; }

/*--------------------------------------------------------

    フォームバリデーション

--------------------------------------------------------*/
.LPFormValidation .validateErrorMessage { position:absolute; left:0; bottom:0; transform:translateY(calc(100% + 5rem)); border-radius:5rem; padding:5rem 10rem; background:rgba(255, 47, 47, 0.8); color:#fff; font-weight:bold; z-index:2; white-space:nowrap; font-size:0.8em; line-height:1.5em; pointer-events:none; }
.LPFormValidation .validateErrorMessage::before { content:''; position:absolute; left:20rem; top:-8rem; border-style:solid; border-color:transparent transparent rgba(255, 47, 47, 0.8); border-width:0 4rem 8rem; pointer-events:none;}


/*--------------------------------------------------------

    カレンダーピッカー

--------------------------------------------------------*/
.LPDatePickerTriger { cursor:pointer; }
.LPDatePicker { display:none; background:#eee; padding:10rem; width:320rem; box-shadow:5rem 5rem 10rem rgba(0, 0, 0, 0.15); }
.LPDatePicker .header { display:flex; justify-content:space-evenly; align-items:stretch; margin-bottom:10rem; }
.LPDatePicker .header .arrow { width:40rem; height:40rem; background:#fff; flex-shrink:0; display:flex; cursor:pointer; }
.LPDatePicker .header .arrow.disabled { opacity:0.33; pointer-events:none; }
.LPDatePicker .header .arrow.prev::before { content:'◀'; }
.LPDatePicker .header .arrow.next::before { content:'▶'; }
.LPDatePicker .header .title { text-align:center; font-size:18rem; font-weight:bold; background:#fff; display:flex; flex:1; cursor:pointer; }
.LPDatePicker .items { display:flex; justify-content:flex-start; align-items:stretch; }
.LPDatePicker .items .cell { width:calc(1 / 7  *100%); text-align:center; padding:6rem 0; cursor:pointer; }
.LPDatePicker .items .cell.week { font-size:16rem; font-weight:bold; padding:0 0 5rem; }
.LPDatePicker .items .cell.date { border-left:1px solid; border-top:1px solid; background:#fff; font-size:14rem; font-weight:bold; }
.LPDatePicker .items .cell.date.sat { background:#bbe2f1; border-right:1px solid; }
.LPDatePicker .items .cell.date.sun { background:#f7ddec; }
.LPDatePicker .items .cell.date.holiday { background:#f7ddec; }
.LPDatePicker .items .cell.date.disabled { pointer-events:none; opacity:0.33; }
.LPDatePicker .items .cell.afterBlank { background:transparent; border-top:1px solid; padding:0; }
.LPDatePicker .items .cell.afterBlank.first { border-left:1px solid; }
.LPDatePicker .cancelBox { display:flex; width:100%; gap:20rem; margin-top:12rem; }
.LPDatePicker .cancelBox > * { text-decoration:underline; cursor:pointer; }