:root {
    --color-text:#444;
    --color-border:#ccc;
}

/*  リンク
------------------------------------------*/
.LPForm a { margin:0 0.2em; }

/*  エラーメッセージ
------------------------------------------*/
.LPForm .errorMsg { font-size:12px; line-height:21px; margin-top:4px !important; }

/*  必須表示
------------------------------------------*/
.LPForm .required:not(.hideRequired) > legend::after { font-size:0.8em; margin-left:0.5em; }

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

/*  非アクティブ
------------------------------------------*/
.LPForm *:disabled { opacity:0.33; }

/*  ボタン関連
------------------------------------------*/
.LPForm .buttons { margin-top:60px; display:flex; }
.LPForm .buttons > * { width:240px; height:60px; transition:all 0.33s; }
.LPForm .buttons > *~* { margin:0 20px; }
@media only screen and (max-width:768px) {
    .LPForm .buttons { margin-top:40px; flex-direction:column-reverse; }
    .LPForm .buttons > * { width:100%; }
    .LPForm .buttons > *~* { margin:20px 0; }
}

/*  カスタムSELECT
------------------------------------------*/
.LPForm .select { display:inline-block; position:relative; white-space:nowrap; }
.LPForm .select select { padding-right:40px; width:100%; -webkit-appearance:none; -moz-appearance:none; outline:none; appearance:none; }
.LPForm .select::before,
.LPForm .select::after { content:''; pointer-events:none; position:absolute; right:20px; top:calc(50% - 2px); width:1px; height:10px; }
.LPForm .select::before { transform:translateY(-50%) rotate(45deg); transform-origin:bottom; }
.LPForm .select::after  { transform:translateY(-50%) rotate(-45deg); transform-origin:bottom; }
@media only screen and (max-width:768px) {
    .LPForm .select select { padding-right:32px; } 
}

/*  カスタムファイル選択
------------------------------------------*/
.LPForm .fileSelect { display:inline-flex; width:auto; height:32px; font-size:14px; line-height:32px; border:1px solid var(--color-border); margin:0; border-radius:4px; white-space:nowrap; user-select:none; }
.LPForm .fileSelect:hover { cursor:pointer; }
.LPForm .fileSelect input { display:none; }
@media only screen and (max-width:980px) {
    .LPForm .fileSelect { font-size:12px; }
}

/*  画像ファイルドロップ
------------------------------------------*/
.LPForm .LPFileDropArea.on::after { content:'イメージファイルをドロップできます'; display:flex; justify-content:center; align-items:center; position:absolute; left:0; top:0; width:100%; height:100%; background-color:rgba(114, 162, 244, 0.5); font-size:24px; color:#fff; font-weight:500; letter-spacing:0.025em; pointer-events:none; }

/*  画像選択コントローラ
--------------------------------------------*/
.LPFileSelect .imageBox { background-color:#f4f4f4; }
.LPFileSelect ul.control { margin-top:4px; }
.LPFileSelect ul.control > li > * { width:100%; font-size:13px; line-height:32px; }
.LPFileSelect ul.control span.file { width:100%; font-size:13px; }
.LPFileSelect ul.control button:hover { cursor:pointer; }
.LPFileSelect .add { display:none; }
.LPFileSelect.LPFileAdd ul.control { opacity:0.2; pointer-events:none; }
.LPFileSelect.LPFileAdd .add { display:block; position:absolute; left:0; top:0; width:100%; height:100%; background-color:#eee; font-size:16px; transition:background 0.33s; }
.LPFileSelect.LPFileAdd .add:hover { cursor:pointer; background-color:#ddd; }
.LPFileSelect.LPFileAdd .add > * { height:auto; text-align:center; }
@media only screen and (max-width:768px) {
    .LPFileSelect.LPFileAdd .add { font-size:14px; }
}


/*  メッセージ汎用
--------------------------------------------*/
.LPForm p.message, .LPForm .messages p { font-size:16px; line-height:1.6em; margin-bottom:40px; }
.LPForm .messages > p~p { margin-top:0.25em; }
@media only screen and (max-width:768px) {
}

/*  LABELブロック
------------------------------------------*/
.LPForm label { display:inline-block; line-height:48px; margin-right:20px; white-space:nowrap; }
.LPForm label:not(.marginLeft) input, .LPForm label:not(.marginLeft) span.select, .LPForm label:not(.marginLeft) span.dummyInput { margin-right:8px; }
.LPForm label.marginLeft input { margin-left:0.5em; }
@media only screen and (max-width:768px) {
    .LPForm label { line-height:40px; margin-right:10px; }
}

/*  インデックス付きフォーム
--------------------------------------------*/
.LPForm fieldset { margin:20px auto; text-align:left; }
.LPForm fieldset:first-child { margin-top:0; }
.LPForm fieldset > legend { float:left; width:220px; padding-top:12px; font-size:15px; line-height:24px; }
.LPForm fieldset > *:not(legend) { float:right; width:calc(100% - 220px); }
.LPForm fieldset input, .LPForm fieldset span.select { margin-right:20px; }
.LPForm fieldset p { line-height:48px; }
.LPForm fieldset p.text { line-height:24px; padding:12px 0; }
.LPForm label input, .LPForm label span.select { margin-right:0; }
.LPForm .index100 fieldset > legend { width:100px; }
.LPForm .index100 fieldset > *:not(legend) { width:calc(100% - 100px); }
.LPForm .index120 fieldset > legend { width:120px; }
.LPForm .index120 fieldset > *:not(legend) { width:calc(100% - 120px); }
.LPForm .index140 fieldset > legend { width:140px; }
.LPForm .index140 fieldset > *:not(legend) { width:calc(100% - 140px); }
.LPForm .index160 fieldset > legend { width:160px; }
.LPForm .index160 fieldset > *:not(legend) { width:calc(100% - 160px); }
.LPForm .index180 fieldset > legend { width:180px; }
.LPForm .index180 fieldset > *:not(legend) { width:calc(100% - 180px); }
.LPForm .index200 fieldset > legend { width:200px; }
.LPForm .index200 fieldset > *:not(legend) { width:calc(100% - 200px); }
.LPForm .noIndex fieldset > *:not(legend) { float:none; width:auto; }
@media only screen and (max-width:768px) {
    .LPForm fieldset { margin:20px auto; }
    .LPForm fieldset > legend { float:none; width:auto; padding-top:0; margin-bottom:0px; font-weight:500; }
    .LPForm fieldset > *:not(legend) { float:none; width:auto; }

    .LPForm .index120 fieldset > legend,
    .LPForm .index140 fieldset > legend,
    .LPForm .index180 fieldset > legend,
    .LPForm .index200 fieldset > legend { width:auto; }
    .LPForm .index120 fieldset > *:not(legend),
    .LPForm .index140 fieldset > *:not(legend),
    .LPForm .index180 fieldset > *:not(legend),
    .LPForm .index200 fieldset > *:not(legend) { width:auto; }
}

/*  同意
--------------------------------------------*/
.LPForm .agree { font-size:16px; text-align:left; }

/*  エラーメッセージ
--------------------------------------------*/
.LPForm .formError { line-height:1.8em; color:#f44; font-weight:normal; }

/*  確認ページ用
--------------------------------------------*/
.LPForm.confirm fieldset > *:not(legend) { font-size:16px; line-height:24px; }

/* 文字
--------------------------------------------*/
.LPForm .required:not(.hideRequired) > legend::after { content:'[必須]'; } /* 入力必須 */

/* 色設定
--------------------------------------------*/
.LPForm { color:inherit; } /* フォーム全体の文字色 */
.LPForm input, .LPForm select, .LPForm textarea, ..LPForm .dummyInput { border-color:var(--color-border) }; /* フィーム要素の枠線 */
.LPForm a { color:#f00; } /* リンク */
.LPForm .select::before, .LPForm .select::after { background-color:#888; } /* selectの矢印 */
.LPForm input:not([type=radio]).errorMsg, .LPForm select.errorMsg, .LPForm textarea.errorMsg { border-color:#f00; } /* エラーメッセージ */
.LPForm .required:not(.hideRequired) > legend::after { color:#f00; } /* 入力必須 */

/*  サイズ設定
------------------------------------------*/
.LPForm .full { width:100%; }
.LPForm .half { width:50%; }
.LPForm .quad { width:25%; }
.LPForm input.number { width:10em; }
.LPForm input.shortNumber { width:6em; }
.LPForm input[type=email], .LPForm input[type=password], .LPForm .password, .LPForm .email { width:100%; }
@media only screen and (max-width:768px) {
    .LPForm .fullSp { width:100%; }
    .LPForm .halfSp { width:50%; }
    .LPForm .quadSp { width:25%; }
    .LPForm input.numberSp { width:10em; }
    .LPForm input.shortNumberSp { width:6em; }
    .LPForm input[type=email], .LPForm input[type=password], .LPForm .password, .LPForm .email { max-width:100%; width:100%; }
}

/*
                    <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>
*/