@charset "UTF-8";


/* input text */
.input-text { display: inline-block; width: 100%; position: relative; }
.input-text.block { display: block; margin-top: 5px; }
.input-text input[type=password],
.input-text input[type=text] { width: 100%; height: 30px; display: inline-block; background: #fff; padding: 0 10px; color: #585858; border-radius: 3px; transition: background 0.1s ease; font-size: 1.2rem; border: 1px solid var(--line-color); }
.input-text input[type=password]:hover,
.input-text input[type=text]:hover { border-color: #aaa; }
.input-text input[type=password]:read-only,
.input-text input[type=text]:read-only { cursor: default; }

/* textarea */
.input-textarea { display: inline-block; width: 100%; position: relative; }
.input-textarea textarea { width: 100%; resize: none; padding: 10px; font-size: 1.3rem; min-height: 200px; border: 1px solid var(--line-color); border-radius: 3px; position: relative; }
.input-textarea textarea:hover { border-color: #aaa; }
.input-textarea textarea:read-only { cursor: default; }
.input-textarea .text-limit { position: absolute; width: calc(100% - 20px); text-align: right; z-index: 2; bottom: 6px; right: 15px; color: #b4b4b4; cursor: default; display: inline-block; background: #fff; }
.input-textarea .text-limit span { font-size: 1rem; }
.input-textarea .text-limit span.count { color: #999; font-weight: 600; }
.input-textarea .text-limit span.excess { color: #e16060; }
.input-textarea .text-limit span.unit { font-size: 11px; margin-left: 2px; }

@media (max-width: 680px) { 
  .input-text { margin: 1px; } 
}