@charset "UTF-8";
/**
 * 入力 css
 * @version 23.05.26
 * @version 2024.01.24 カレンダーアイコン付きを追加
 * @version 24.02.17 時間入力を追加
 * @version 24.04.10 入力可能プルダウンを展開中は他の画面操作をさせないよう変更
 * @version 24.10.28 時間入力の見た目を修正
 * @version 24.11.05 fromto-boxのクラス名を_flex.cssと統一
 * @version 24.01.21 時間入力の表示位置を調整
 * @version 25.03.06 datepickerのdata-viewを返すメソッドを追加
 */

/*
[html]
・range
	<div class="range p-left v-sub"><input type="range" min="0" max="100" /></div>
	-option-
	・p-left:valueを左側に表示
	・v-sub:「max-value」を表示

・datepicker
	[html]
	(月までの例)
	<input type="text" name="hogeDt" class="datepicker-here" placeholder="hogeDt" value="${_f.out(_f.hogeDt, 'yyyy-MM')}" data-view="${_f.dpView(_f.hogeDt, 'months')}" data-min-view="months" data-date-format="yyyy-mm" data-position="bottom left" autocomplete="off" data-first-day="1" data-language="orgin-cal" readonly />
	option
	・cngWithSubmit 変更時にsubmitされる
	・with-clear 入力クリアボタンを付与する ※クリアボタンの表示有無判定のためにplaceholderの指定が必要
	・with-icn カレンダーアイコン付き
	・data-first-day="1" 月曜日始まり

・textareaデータのラベル表示
	<div class="txa-box no-scrollbar"><c:forEach items="${_f.getStrs(改行あり)}" var="_row"><div>${_f.out(_row)}</div></c:forEach></div>

・selectのplaceholder
	<div class="select-box" data-select-val="" data-select-placeholder="ぷれいすほるだ">
	  <select>

・Ctrl + Enter でボタンクリック
	<textarea class="ctrlenter" data-btn-key="#hoge_btn(クリックするボタンのセレクタ)"
・Ctrl + Enter でフォーカスアウト
	<textarea class="ctrlenter-blur"

・フォーカスすると全選択
	<textarea class="allselect"

・3桁カンマ区切り表示
input type="number" [data-use-sep3="true"]

・入力可能なプルダウン ※encoding.jsが必要
	<div class="inp-sel-box">
	  <div class="srh-box"><input type="text" data-srh-type="hankana" data-value-elm="#xxxxx" placeholder="入力も選択もできる" /></div>
	  <input type="hidden" id="xxxxx" placeholder="data-valueが転記される" />
	  <ul class="sel">
	    <li data-srh-word="ﾐｽﾞﾎ" data-value="0001">みずほ銀行</li>
	    <li data-srh-word="ﾐﾂﾋﾞｼﾕｰｴﾌｼﾞｪｲ" data-value="0002">三菱ＵＦＪ銀行</li>
	    <li data-srh-word="ﾐﾂｲｽﾐﾄﾓ" data-value="0003">三井住友銀行</li>
	  </ul>
	</div>

	[param]
	・data-srh-type="検索対象のワードのフォーマット" hira=ひらがな kana=カタカナ hankana=半角ｶﾀｶﾅ
	・data-value-elm="data-valueの転記先 CSSセレクタで指定"
	・data-srh-word="検索対象のワード"
	・data-value="クリック時にclass="value"にセットされる値"

・サーバーからのエラーメッセージを入力欄の下に差し込む
<input data-vemsg="${_f.out(_f.errMsgMap['memName'])}" ... />

・入力チェック
<form>
  <input data-vc-type="required" />
  <button type="button" class="vc-btn init-disabled">登録</button> init-disabled=初期表示で比活性

・時間入力
	<input type="time" step="1" class="fjtime" data-h-min="5" data-h-max="10" data-h-step="2" data-m-step="5" data-s-step="10" value="06:15:20" />
	[param]
	・step="1" 秒まで(00:00:00)表示
	・data-h-min／data-m-min／data-s-min="0" 時分秒の最小値 デフォルト値=0
	・data-h-max／data-m-max／data-s-max="9" 時分秒の最大値 デフォルト値=23/59/59
	・data-h-list／data-m-list／data-s-list="10,12,14" 時分秒の選択肢(カンマ区切りで)
	・data-h-step／data-m-step／data-s-step="1" 時分秒の刻み デフォルト値=1
	  ※listを指定した場合はmin~max,stepは無視

*/

:root {
 --placeholder-color: #b7b1b1;
 --inp-br-color: #cccccc;
 --inp-br: 1px solid var(--inp-br-color);
}

/* placeholder */
:placeholder-shown { color: var(--placeholder-color); }
::-webkit-input-placeholder { color: var(--placeholder-color); } /* Google Chrome, Safari, Opera 15+, Android, iOS */
:-moz-placeholder { color: var(--placeholder-color); opacity: 1; } /* Firefox 18- */
::-moz-placeholder { color: var(--placeholder-color); opacity: 1; } /* Firefox 19+ */
:-ms-input-placeholder { color: var(--placeholder-color); } /* IE 10+ */

/*input[type="datetime-local"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator { background: none; }*/
input[type="date"][value=""][readonly]::-webkit-datetime-edit, input[type="date"][value=""]:disabled::-webkit-datetime-edit { visibility: hidden; }
input[type="date"][value=""][readonly], input[type="date"][value=""]:disabled { color: #fff; }
textarea.no-border { border: none; border-radius: 0; }

input,textarea,select { border-radius: 7px; padding: 4px; font-size: 15px; color: #555555; border: var(--inp-br); width: 100%; }
input[readonly], input[readonly]:disabled, textarea[readonly], textarea[readonly]:disabled, select[readonly], select[readonly]:disabled { cursor: default; background-color: transparent; border-color: transparent; outline: none; }
input[type="number"][readonly]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
:is(input, select, textarea):focus { /*background-color: #f1f8ff;*/ outline: var(--blu) 2px solid; outline-offset: -2px; }
select { padding: 1px 4px; min-height: 29px; }

/* textareaデータのラベル表示 */
.txa-box { min-height: 46px; border-radius: 6px; padding: 4px; color: #555555; border: var(--inp-br); }
.txa-box.no-border { border: none; }
.txa-box.no-no { min-height: auto; border-radius: 0; padding: 0; border: none; }
.txa-box > div { display: block; text-overflow: clip; white-space: normal; word-break: break-all; min-height: 1em; }

/* selectのplaceholder */
.select-box { position: relative; }
.select-box[data-select-val=""]::after { content: attr(data-select-placeholder); position: absolute; top: 50%; left: 4px; transform: translateY(-50%); color: var(--placeholder-color); pointer-events: none; }

/* range */
input[type="range"]:not(:disabled):not([readonly]) { cursor: pointer; }
.range-box { display: flex; }
.range-box.p-left { flex-direction: row; }
.range-box.p-right { flex-direction: row-reverse; }
.range-box.p-left input[type="range"] { width: 80%; margin-left: 3%; }
.range-box.p-right input[type="range"] { width: 80%; margin-right: 3%; }
.range-box.v-sub input[type="range"] { width: 60%; margin-left: 3%; margin-right: 3%; }
.range-box .v-val, .range-box .v-sub { width: 17%; }

/* datepicker */
.datepicker.active { z-index: 103; }
input.datepicker-here { border-color: #ccc; background-color: #fff; cursor: text; }
.datepicker-here-wrap { position: relative; display: inline-block; font-size: 0; width: fit-content; }
.datepicker-here-wrap .datepicker-here.hid ~ .date-clear-btn{ display: none; }
.datepicker-here-wrap .date-clear-btn.btn.bdg.min { position: absolute; top: -3px; right: -6px; opacity: 0.5; display: block; border-width: 0; border-radius: 0; background-color: transparent; background-image: none; box-shadow: none; padding: 2px 2px 2px 4px; -webkit-transform: none; transform: none; }
.datepicker-here-wrap .date-clear-btn:hover { opacity: 0.9; }
/* 入力がなかったらクリアボタンを非表示(placeholderの指定が必要) */
.datepicker-here-wrap input.datepicker-here:placeholder-shown ~ .date-clear-btn.btn.bdg.min,
.datepicker-here-wrap input.datepicker-here:disabled ~ .date-clear-btn.btn.bdg.min { display: none; }
.datepicker-here-wrap.icn-cal::after { content: '\f073'; font-family: 'Font Awesome 5 Free'; position: absolute; bottom: 1px; right: 6px; font-size: 15px; color: var(--placeholder-color); pointer-events: none; }
/* datepicker入力確認用 */
.datepicker--cell.-disabled { position: relative; color: #ccc; }
.datepicker--cell.-disabled::before { content: ' '; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: var(--gra-op10); cursor: auto; z-index: 9999; }

/* エラー・警告・成功 */
.box-err { box-shadow: 0 0 1px 1px var(--danger) inset; }
.box-err.vc-radio-grp { box-shadow: none; outline: 1px solid var(--dan); }
.box-wrn { box-shadow: 0 0 1px 1px var(--warning) inset; }
.box-suc { box-shadow: 0 0 1px 1px var(--success) inset; }
.val-err { font-size: 12px; color: var(--danger); word-break: break-all; white-space: normal; line-height: 1.2; }
.val-err::before { content: '\f06a'; margin-right: 0.3em; font-weight: 900; font-family: "Font Awesome 5 Free"; }

/* バリデーションエラー時に時計などのアイコンがズレないようにする */
.datepicker-here-wrap .val-err, .fjtime-box .val-err { position: absolute; top: 2px; left: 4px; }
.datepicker-here-wrap .box-err:placeholder-shown { color: transparent; }
.datepicker-here-wrap .box-err::-webkit-input-placeholder { color: transparent; } /* Google Chrome, Safari, Opera 15+, Android, iOS */
.datepicker-here-wrap .box-err:-moz-placeholder { color: var(--placeholder-color); opacity: 0; } /* Firefox 18- */
.datepicker-here-wrap .box-err::-moz-placeholder { color: transparent; opacity: 0; } /* Firefox 19+ */
.datepicker-here-wrap .box-err:-ms-input-placeholder { color: transparent; } /* IE 10+ */
.fjtime-box .box-err:placeholder-shown { color: transparent; }
.fjtime-box .box-err::-webkit-input-placeholder { color: transparent; } /* Google Chrome, Safari, Opera 15+, Android, iOS */
.fjtime-box .box-err:-moz-placeholder { color: var(--placeholder-color); opacity: 0; } /* Firefox 18- */
.fjtime-box .box-err::-moz-placeholder { color: transparent; opacity: 0; } /* Firefox 19+ */
.fjtime-box .box-err:-ms-input-placeholder { color: transparent; } /* IE 10+ */
.fjtime-box.inping .val-err { display: none; }

/* 必須項目 */
.required_clm, .ctrlenter_clm { position: relative; }
/*.required_clm:not(.in-textarea), .ctrlenter_clm:not(.in-textarea) { width: fit-content; }*/
.required_clm::after { content: '*'; font-size: 10px; position: absolute; right: 4px; top: 1px; color: var(--danger); pointer-events: none; }
.required_clm:has(:is(.hid, [type="hidden"]))::after { display: none; }
.required_clm:has(option.hid)::after { display: inline; }

/* Ctrl + Enter */
.ctrlenter_clm::after { content: 'C + Enter'; font-size: 10px; position: absolute; right: 4px; bottom: 1px; color: #aaa; }

/* 入力可能なプルダウン */
.inp-sel-box .srh-box { position: relative; }
.inp-sel-box .srh-box .angle { position: absolute; right: 2px; top: 0; bottom: 0; right: 2px; width: 16px; }
.inp-sel-box .srh-box .angle::before { content: '\f107'; font-family: 'Font Awesome 5 Free'; font-weight: 900; color: #bbb; font-size: 14px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.inp-sel-box .srh-box:hover .angle { background-color: var(--gra-op10); }
.inp-sel-box .srh-box input:disabled + .angle { display: none; }
.inp-sel-box .srh-box input { cursor: default; }
.inp-sel-box .sel { position: fixed; background-color: #fff; left: -3000px; z-index: 2; opacity: 0; box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.2); overflow: auto; }
.inp-sel-box .sel > li:hover { background-color: var(--blu); color: #fff; }
.inp-sel-overlay { position: fixed;	z-index: 1;	top: 0;	bottom: 0; left: 0;	right: 0; background-color: transparent; }

/* 3桁カンマ区切り表示 */
input[data-use-sep3="true"] +.val-err { display: none; }

/* 時間入力 */
.fjtime-box { width: 120px; position: relative; }
.fjtime-box.inping { z-index: 1; }
.fjtime-box::before { content: '\f017'; font-family: 'Font Awesome 5 Free'; position: absolute; top: 50%; transform: translateY(-50%); right: 4px; opacity: 0.8; pointer-events: none; }
.fjtime-box input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.fjtime-box input[type="time"]::-webkit-calendar-picker-indicator
 { background: none; }
.fjtime-box.inping::before { display: none; }
.fjtime-box.inping input { margin-top: 2px; }
.fjtime-box:not(.inping) dl { height: 1px; overflow: hidden; color: transparent; border-color: transparent; padding: 0; display: none; }
.fjtime-box.inping dl { position: fixed; }
.fjtime-box.no-sec dl dt select:nth-of-type(3),
.fjtime-box.no-sec dl dt::after
 { display: none; }
.fjtime-box dl { min-width: 120px; border: var(--inp-br); border-radius: 7px; padding: 2px; background-color: #fff; }
.fjtime-box dl dt { display: flex; gap: 2px; }
.fjtime-box dl dt::before,
.fjtime-box dl dt::after { content: ':'; display: block; }
.fjtime-box dl dt select:nth-of-type(1) { order: 1; }
.fjtime-box dl dt select:nth-of-type(2) { order: 3; }
.fjtime-box dl dt select:nth-of-type(3) { order: 5; }
.fjtime-box dl dt::before { order: 2; }
.fjtime-box dl dt::after { order: 4; }
.fjtime-box dl dt select { padding: 0 4px; min-height: auto; border: none; background-color: #f1f1f1; text-align: center; -moz-appearance: textfield; -webkit-appearance: none; }
.fjtime-box dl dt select:focus { outline: none;	background-color: var(--pri); color: #fff; }
.fjtime-box dl dt select:focus option {	background-color: #fff; color: #555; }
.fjtime-box dl dd { display: flex; justify-content: space-around; padding: 4px 0; margin-top: 6px; }
.fjtime-box .btn.bdg.min { border-radius: 6px; min-width: auto; padding: 1px 14px; height: fit-content; }
.fjtime-box .btn.bdg.min.clear-btn { padding: 1px 6px; }
.fjtime-inping-overlay::before { content: ''; background-color: transparent; position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; }