.LPForm input, .LPForm .select, .LPForm select, .LPForm textarea, .LPForm button {
    padding:10px 20px; font-size:16px; line-height:24px; letter-spacing:0.06em; width:100%;
	border:2px solid #ccc; background-color:#fff; border-radius:0; vertical-align:baseline;
	 -webkit-appearance:none; -moz-appearance:none; outline:none; appearance:none;
}
@media only screen and (max-width:768px) {
    .LPForm input, .LPForm select, .LPForm textarea, .LPForm form button {
        padding:12px; font-size:15px; line-height:24px;
    }
}

/*  テキスト
------------------------------------------*/
.LPForm p a { border-bottom:1px solid #f00; color:#f00; margin:0 0.2em; }
.LPForm span.suffix { display:inline-block; margin-left:4px; margin-right:20px; vertical-align:middle; }

/*  サイズ関連
------------------------------------------*/
.LPForm .half { width:50% !important; }
.LPForm .quad { width:25% !important; }
.LPForm input.number { width:10em; }
.LPForm input.shortNumber  { width:6em; }
@media only screen and (max-width:768px) {
    .LPForm .fullSp { width:100% !important; }
    .LPForm .halfSp { width:50% !important; }
    .LPForm .quadSp { width:25% !important; }
}

/*  必須表示
------------------------------------------*/
.LPForm .required:not(.hideRequired) > *:nth-child(1)::after { content:' [必須]'; color:#f00; font-size:0.8em; }

/*  フォーカス関連
------------------------------------------*/
.LPForm input:not([type=radio]):focus,
.LPForm textarea:focus,
.LPForm select:focus { border-color:#ccf; }

/*  TEXTAREA
------------------------------------------*/
.LPForm textarea { height:12em; resize: vertical; }

/*
------------------------------------------*/
.LPForm input[type=file] { width:auto; height:32px; }

/*  ボタン
------------------------------------------*/
.LPForm button { display:inline-flex; width:auto; height:36px; border:1px solid #ccc; padding:0 1em; margin:0; font-size:14px; border-radius:4px; white-space:nowrap; }
.LPForm .buttons { text-align:center; margin-top:60px; display:flex; }
.LPForm .buttons button { width:240px; height:60px; display:flex; margin:0 10px; border-radius:0; border:2px solid #ccc; }
.LPForm .buttons button:not(:disabled):hover,
.LPForm input[type=submit]:not(:disabled):hover{ cursor:pointer; }
.LPForm .buttons button[type=submit]:disabled,
.LPForm input[type=submit]:disabled { opacity:0.25; }

@media only screen and (max-width:768px) {
    .LPForm .buttons { margin-top:30px; flex-direction:column-reverse; }
    .LPForm .buttons button { width:100%; height:52px; margin:10px 0; }
}


/*  エラー表示
------------------------------------------*/
.LPForm input:not([type=radio]).error,
.LPForm select.error,
.LPForm span.select.LPForm
.LPForm select.error,
.LPForm textarea.error { border-color:#f00; }
.LPForm .form_error { font-size:12px; line-height:21px; color:#f00; margin-top:4px !important; }

/*  カスタムSELECT
------------------------------------------*/
.LPForm .select { display:inline-block; position:relative; padding:0; width:auto; }
.LPForm .select::before,
.LPForm .select::after { content:''; pointer-events:none; position:absolute; width:3px; height:12px; right:20px; top:14px; background-color:#ccc; }
.LPForm .select::before { transform:rotate( 45deg); transform-origin:left bottom; }
.LPForm .select::after  { transform:rotate(-45deg); transform-origin:right bottom; }
.LPForm .select select { border:none; padding-right:48px; cursor:pointer; width:100%; }
@media only screen and (max-width:768px) {
    .LPForm .select { display:block; }
    .LPForm .select::before,
    .LPForm .select::after { top:21px; }
}

/*  プレースホルダ
------------------------------------------*/
.LPForm input::placeholder,
.LPForm textarea::placeholder { color:#acacac; }

/*  カスタムファイル選択
------------------------------------------*/
.LPForm span.file { display:inline-flex; width:auto; height:36px; border:1px solid #ccc; padding:0 1em; margin:0; font-size:14px; border-radius:4px; white-space:nowrap; user-select:none; }
.LPForm span.file:hover { cursor:pointer; }
.LPForm span.file input { display:none; }

/*  LABEL
------------------------------------------*/
.LPForm label { display:inline-flex; justify-content:flex-start; width:auto; height:48px; font-size:16px; line-height:28px; letter-spacing:0.06em; padding-right:20px; }
.LPForm label input { width:auto; position:relative; margin-right:0.5em; }
.LPForm label .select { margin-right:0.5em; }
.LPForm label.margeLeft input { margin-right:0; margin-left:0.5em; }
@media only screen and (max-width:768px) {
    .LPForm label { font-size:14px; line-height:26px; letter-spacing:0; height:60px; }
}

/*  カスタムラジオボタン
------------------------------------------*/
/*
.LPForm .radios { display:flex; justify-content:flex-start; width:calc(100% + 40px); margin-bottom:-40px; }
.LPForm .radios > * { margin-right:40px; margin-bottom:40px; }
*/
.LPForm label.radio input[type=radio] { display:inline-block; width:25px; height:25px; border-radius:50%; padding:0; vertical-align:middle; }
.LPForm label.radio input[type=radio]:checked::before { content:''; position:absolute; left:3px; top:3px; width:15px; height:15px; border-radius:50%; background:#e22222; }
@media only screen and (max-width:768px) {
    .LPForm .radios { display:block; justify-content:flex-start; width:100%; margin-bottom:-20px; }
    .LPForm .radios > * { width:100%; margin-right:0; margin-bottom:20px; }
}

/*  カスタムチェックボックス
------------------------------------------*/
.LPForm label.checkbox input[type=checkbox] { width:25px; height:25px; padding:0; vertical-align:middle; vertical-align:middle; }
.LPForm label.checkbox input[type=checkbox]:checked::before { content:'✓'; position:absolute; left:-2px; top:0px; font-size:2em; color:#e22222; }
@media only screen and (max-width:768px) {
    .LPForm .checkboxs { display:block; justify-content:flex-start; width:100%; margin-bottom:-20px; }
    .LPForm .checkboxs > * { width:100%; margin-right:0; margin-bottom:20px; }
}


/*  インデックス表示
--------------------------------------------*/
.LPForm .indexs { text-align:left; }
.LPForm .indexs > * { overflow:hidden; }
.LPForm .indexs > *~* { margin-top:20px; }
.LPForm .indexs > * > *:nth-child(1) { float:left; width:210px; font-size:15px; line-height:24px; font-weight:500; padding-top:12px; padding-right:1em; opacity:0.8; }
.LPForm .indexs > * > *~* { float:right; width:calc(100% - 210px); font-size:16px; line-height:24px; }
.LPForm .indexs > * > *~* p:not(:first-child) { margin-top:12px; }
.LPForm .indexs.short > * > *:nth-child(1) { width:140px; }
.LPForm .indexs.short > * > *~* { width:calc(100% - 140px); }
.LPForm.confirm .indexs > *~* { margin-top:32px; }
.LPForm.confirm .indexs > * > *:nth-child(1) { padding-top:0; }
@media only screen and (max-width:768px) {
    .LPForm .indexs > * > *:nth-child(1) { float:none; width:100%; padding-top:0; margin-bottom:4px;  }
    .LPForm .indexs > * > *~* { float:none; width:100%; }
    .LPForm .indexs.short > * > *:nth-child(1) { width:100%; }
    .LPForm .indexs.short > * > *~* { width:100%; }

    .LPForm.confirm .indexs { border-bottom:1px solid #ccc; padding-bottom:20px; }
    .LPForm.confirm .indexs > * { border-top:1px solid #ccc; padding-top:20px; }
    .LPForm.confirm .indexs > *~* { margin-top:20px; padding-top:20px; }
    .LPForm.confirm .indexs > * > *:nth-child(1) { padding-left:10px; opacity:0.75; }
    .LPForm.confirm .indexs > * > *~* { padding-left:10px; }
}


/*  メッセージ汎用
--------------------------------------------*/
.LPForm .messages { font-size:16px; line-height:1.6em; margin-bottom:40px; }
.LPForm .messages > *~* { margin-top:0.25em; }
.LPForm.complete .messages { line-height:2em; }
.LPForm.complete .messages > *~* { margin-top:1em; }

/*
                    <ul class="indexs">
                        <li>
                            <legend>テキスト入力</legend>
                            <div>
                                <p><input type="text" name="data[]"></p>
                            </div>
                        </li>
                        <li>
                            <legend>セレクタ</legend>
                            <div>
                                <span class="select">
                                    <select name="data[brand]">
                                        <option style="display:none;">選択してください</option>
                                        <option value="1">選択項目1</option>
                                        <option value="2">選択項目2</option>
                                        <option value="3">選択項目3</option>
                                        <option value="4">選択項目4</option>
                                        <option value="5">選択項目5</option>
                                    </select>
                                </span>
                            </div>
                        </li>
                        <li>
                            <legend>年月日</legend>
                            <div>
                                <label><span class="select"><select name="data[year]"><?php formSelectYear(1950, date('Y'), $year); ?></select></span>年</label>
                                <label><span class="select"><select name="data[month]"><?php formSelectMonth($month); ?></select></span>月</label>
                                <label><span class="select"><select name="data[date]"><?php formSelectDate($date); ?></select></span>日</label>
                            </div>
                        </li>
                        <li>
                            <legend>ラジオボタン</legend>
                            <div>
                                <label class="radio"><input type="radio" name="data[]">アイテム1</label>
                                <label class="radio"><input type="radio" name="data[]">アイテム2</label>
                                <label class="radio"><input type="radio" name="data[]">アイテム3</label>
                                <label class="radio"><input type="radio" name="data[]">アイテム4</label>
                                <label class="radio"><input type="radio" name="data[]">アイテム5</label>
                                <label class="radio"><input type="radio" name="data[]">アイテム6</label>
                                <label class="radio"><input type="radio" name="data[]">アイテム7</label>
                                <label class="radio"><input type="radio" name="data[]">アイテム8</label>
                                <label class="radio"><input type="radio" name="data[]">アイテム9</label>
                            </div>
                        </li>
                        <li>
                            <legend>チェックボックス</legend>
                            <div>
                                <label class="checkbox"><input type="checkbox" name="data[]">チェック項目1</label>
                                <label class="checkbox"><input type="checkbox" name="data[]">チェック項目2</label>
                                <label class="checkbox"><input type="checkbox" name="data[]">チェック項目3</label>
                                <label class="checkbox"><input type="checkbox" name="data[]">チェック項目4</label>
                                <label class="checkbox"><input type="checkbox" name="data[]">チェック項目5</label>
                                <label class="checkbox"><input type="checkbox" name="data[]">チェック項目6</label>
                                <label class="checkbox"><input type="checkbox" name="data[]">チェック項目7</label>
                                <label class="checkbox"><input type="checkbox" name="data[]">チェック項目8</label>
                                <label class="checkbox"><input type="checkbox" name="data[]">チェック項目9</label>
                            </div>
                        </li>
                        <li>
                            <legend>テキストエリア</legend>
                            <div>
                                <textarea name="data[]"></textarea>
                            </div>
                        </li>
                        <li>
                            <legend>テキスト＋チェックボックス</legend>
                            <div>
                                <p>
                                    <label><input class="number" type="text" name="data[]">単位</label>
                                    <label class="checkbox"><input type="checkbox" name="data[]">チェック項目</label>
                                </p>
                            </div>
                        </li>
                    </ul>
*/