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

    FORM CSS

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

.LPForm { font-size:16rem; line-height:1.5em; text-align:left; }
.LPForm label { width:100%; }
.LPForm label.full input,
.LPForm label.full select,
.LPForm label.full textarea { width:100%; }
.LPForm .short { width:150rem; }
.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% - 15rem); width:18rem; height:18rem; border-left:2px solid; border-bottom:2px solid; transform:rotate(-45deg); pointer-events:none; }
.LPForm .formBox { border:2px solid; }
.LPForm .radioGroup { display:flex; justify-content:flex-start; align-items:stretch; width:100%; gap:60rem; }
.LPForm .radio { display:inline-flex; width:auto; }
.LPForm .checkbox { display:inline-flex; width:auto; }
.LPForm .hide { display:none !important; }

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

    インデックスレイアウト

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

--------------------------------------------------------*/
.LPForm .formIndex { display:flex; justify-content:flex-end; align-items:stretch; border-bottom:1px solid; }
.LPForm .formIndex:last-child { border-bottom:none; }
.LPForm .formIndex > *:first-child { width:254rem; min-height:80rem; padding:15rem; 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:1.3em; padding:2rem 8rem; position:absolute; left:0; top:0; border:1px solid; white-space:nowrap; background:#fff; }
.LPForm .formIndex.required > *:first-child > *::before { content:'必須'; background:var(--text-color); color:#fff; font-weight:bold; }
.LPForm .formIndex > *:not(:first-child) { width:calc(100% - 254rem); padding:15rem 20rem; border-left:1px solid; display:flex; justify-content:flex-start; }
.LPForm .formIndex > *:not(:first-child) > * ~ * { margin-top:10rem; }


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

    フォームバリデーション

--------------------------------------------------------*/
.LPFormValidation .validateErrorMessage { position:absolute; border-radius:5rem; padding:5rem 10rem; background:rgba(255, 47, 47, 0.8); color:#fff; font-weight:bold; transform:translate(4rem, 4rem); 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; }