nuxt-hs-ui 2.12.7 → 4.0.0

package/dist/runtime/components/form/textarea.vue

@@ -1,427 +1,338 @@
-<script setup lang="ts">
-/* ----------------------------------------------------------------------------
-// src\runtime\components\form\textarea.vue
-// ----------------------------------------------------------------------------
-// Textarea
-// TextareaTextarea
------------------------------------------------------------------------------ */
-
-// [ tailwind ]
-import { twMerge } from "tailwind-merge";
-// [ NUXT ]
-import { reactive, ref, watch, computed, useId, nextTick } from "#imports";
-// [ utils ]
-import type { ClassType } from "../../utils/class-style";
-import type { MultiLang } from "../../utils/multi-lang";
-// [ composables ]
-import { useHsFocus } from "../../composables/use-hs-focus";
-import { useHsMisc } from "../../composables/use-hs-misc";
-import { useHsMultiLang } from "../../composables/use-hs-multi-lang";
-// [ Components ]
-import InputFrame from "./input-frame.vue";
-// ----------------------------------------------------------------------------
-const hsFocus = useHsFocus();
-const hsMisc = useHsMisc();
-// ----------------------------------------------------------------------------
-// [ Props ]
-type Props = {
-  // ----------------------------------------------------------------------------
-  // Input 種類別
-  rows?: number;
-  maxRows?: number;
-  maxLen?: number;
-  autosize?: boolean;
-  // ----------------------------------------------------------------------------
-  data: string | null;
-  diff?: string | null | undefined;
-  tabindex?: string | undefined;
-  // ----------------------------------------------------------------------------
-  class?: ClassType;
-  classHeader?: ClassType;
-  classInput?: ClassType;
-  // ----------------------------------------------------------------------------
-  // 状態
-  //   focus?: boolean;
-  focusColor?: string;
-  //   change?: boolean;
-  changeColor?: string;
-  error?: boolean;
-  errorColor?: string;
-  disabled?: boolean;
-  disabledColor?: string;
-  readonly?: boolean;
-  headerless?: boolean;
-  // ----------------------------------------------------------------------------
-  // 表示
-  label?: MultiLang;
-  // 表示-副情報
-  require?: boolean;
-  requireText?: MultiLang;
-  warn?: string;
-  warnTimeOut?: number;
-  // ----------------------------------------------------------------------------
-  // 設定
-  size?: "s" | "m" | "l";
-  // ----------------------------------------------------------------------------
-  uiText?: {
-    rowsUnit: MultiLang;
-  };
-};
-const props = withDefaults(defineProps<Props>(), {
-  // ----------------------------------------------------------------------------
-  // Input 種類別
-  rows: 5,
-  maxRows: 0,
-  maxLen: 0,
-  autosize: false,
-  // ----------------------------------------------------------------------------
-  diff: undefined,
-  tabindex: undefined,
-  // ----------------------------------------------------------------------------
-  class: "",
-  classHeader: "",
-  classInput: "",
-  // ----------------------------------------------------------------------------
-  // 状態
-  //   focus: false,
-  focusColor: "shadow-[inset_0px_0px_1px_2px_#0d8ee4]",
-  //   change: false,
-  changeColor: "shadow-[inset_0px_0px_1px_2px_#fd9831be]",
-  error: false,
-  errorColor: "shadow-[inset_0px_0px_1px_2px_#d80000dc]",
-  disabled: false,
-  disabledColor: "",
-  readonly: false,
-  headerless: false,
-  // ----------------------------------------------------------------------------
-  // 表示
-  label: "",
-  // 表示-副情報
-  require: false,
-  requireText: () => ({ ja: "必須", en: "Required" }),
-  warn: "",
-  warnTimeOut: 3000,
-  // ----------------------------------------------------------------------------
-  // 設定
-  size: "m",
-  // ----------------------------------------------------------------------------
-  uiText: () => {
-    return {
-      rowsUnit: { ja: "行", en: "Rows" },
-    };
-  },
-});
-// ----------------------------------------------------------------------------
-// [ emit ]
-type Emits = {
-  ref: [element: HTMLElement];
-  focus: [elm: HTMLElement];
-  blur: [elm: HTMLElement];
-  // ----------------------------
-  "update:data": [value: string];
-  "value-change": [after: string, before: string | null];
-  // ----------------------------
-  keydown: [event: KeyboardEvent];
-  keyup: [event: KeyboardEvent];
-  // ----------------------------
-};
-const emit = defineEmits<Emits>();
-// ----------------------------------------------------------------------------
-
-const multiLang = useHsMultiLang();
-const tx = multiLang.tx;
-
-// [ getCurrentInstance ]
-
-const uid = useId();
-// ----------------------------------------------------------------------------
-
-// [ reactive ]
-interface State {
-  value: string;
-}
-const state = reactive<State>({
-  value: "",
-});
-
-// ----------------------------------------------------------------------------
-watch(
-  () => props.data,
-  () => {
-    setValue(props.data);
-  }
-);
-
-const CutLen = (text: string, len: number, addWard = "") => {
-  if (text === null) return "";
-  if (len === 0) return text;
-  return text.substring(0, len) + addWard;
-};
-const getCheckedText = (text: string) => {
-  // 各行を配列の要素に分ける
-  let ret = text;
-  if (props.maxRows !== 0) {
-    const lines = text.split("\n");
-    let amari = "";
-    // 入力行数が制限を超えた場合
-    if (lines.length > props.maxRows) {
-      const result = [];
-      for (let i = 0; i < lines.length; i++) {
-        if (i < props.maxRows) {
-          result.push(lines[i]);
-        } else {
-          amari += lines[i].replace(/\n/g, "");
-        }
-      }
-      ret = result.join("\n") + amari;
-    }
-  }
-  if (props.maxLen !== 0 || ret.length > props.maxLen) {
-    ret = CutLen(ret, props.maxLen, "");
-  }
-  return ret;
-};
-
-const setValue = (text: string | null) => {
-  if (text === null) {
-    state.value = "";
-    return;
-  }
-  const lineCheckedText = getCheckedText(text);
-  if (lineCheckedText === text) {
-    state.value = text;
-  } else {
-    // 文字数のオーバーフロー確定
-    // 親コンポーネントへの更新処理に移動
-    updateValue(text);
-  }
-};
-setValue(props.data);
-
-//  更新を親コンポーネントに伝える
-const updateValue = async (text: string | null) => {
-  const before = props.data;
-  let setText = "";
-  if (text === null) {
-    setText = "";
-  } else {
-    // 各行を配列の要素に分ける
-    setText = getCheckedText(text);
-  }
-  state.value = setText;
-  emit("update:data", setText);
-  await nextTick();
-  emit("value-change", setText, before);
-};
-
-// [ ref ]
-const inputElement = ref();
-
-const setRef = (elm: any) => {
-  inputElement.value = elm;
-  emit("ref", elm as HTMLInputElement);
-};
-
-/**
- * 強制focus
- */
-const elmFocus = () => {
-  inputElement.value.focus();
-};
-
-// [ focus, blur ]
-
-interface FocusState {
-  isActivate: boolean;
-  isMmousedown: boolean;
-}
-
-const focusState = reactive<FocusState>({
-  isActivate: false,
-  isMmousedown: false,
-});
-
-/**
- * コントロールのFocus判定
- */
-const computedActivate = computed(() => {
-  if (props.disabled === true) return false;
-  if (props.readonly === true) return false;
-  if (hsFocus.state.id !== uid) return false;
-  if (focusState.isActivate) return true;
-  if (focusState.isMmousedown) return true;
-  return false;
-});
-
-/**
- * focus, blur イベント
- */
-watch(computedActivate, (value) => {
-  if (value === true) {
-    // クリックでの遷移の場合に
-    // 一つ前のコントロールのblurイベントよりも早くfocusが発生しないようにする対策で10ミリ秒処理をずらす
-    setTimeout(() => {
-      emit("focus", inputElement.value);
-    }, 10);
-  } else {
-    emit("blur", inputElement.value);
-  }
-});
-
-const onMousedown = () => {
-  focusState.isMmousedown = true;
-};
-const onMouseup = () => {
-  elmFocus();
-  focusState.isMmousedown = false;
-};
-
-const onFocus = () => {
-  if (props.disabled === true) return;
-  if (props.readonly === true) return;
-  focusState.isActivate = true;
-  hsFocus.state.id = uid;
-};
-const onBlur = () => {
-  focusState.isActivate = false;
-};
-
-// [ baseClass ]
-const tabindex = computed(() => {
-  if (props.disabled === true) return -1;
-  if (props.readonly === true) return -1;
-  return props.tabindex;
-});
-
-//  更新の有無確認
-const isChangeData = computed(() => {
-  if (props.diff === undefined) return false;
-  if (props.diff === null && props.data === "") return false;
-  if (props.diff === "" && props.data === null) return false;
-  if (props.diff !== props.data) return true;
-  return false;
-});
-//  ---------------------------------------------------------------------------------
-// ----------------------------------------------------------------------------
-const lenLabelClass = computed(() => {
-  const last = props.maxLen - state.value.length;
-  return [
-    twMerge(
-      "text-white bg-[#2fa412]",
-      last < 6 ? "bg-[#fdc90d]" : "",
-      last < 5 ? "bg-[#fd750d]" : "",
-      last < 2 ? "bg-[#fa541d]" : ""
-    ),
-  ];
-});
-const rowLabelClass = computed(() => {
-  const last = props.maxRows - state.value.split("\n").length;
-  return [
-    twMerge(
-      "text-white bg-[#2fa412]",
-      last < 9 ? "bg-[#fdc90d]" : "",
-      last < 6 ? "bg-[#fd750d]" : "",
-      last < 3 ? "bg-[#fa541d]" : ""
-    ),
-  ];
-});
-
-const textAreaFrameClass = computed(() => {
-  return [
-    twMerge(),
-    //
-    "bg-transparent",
-    "flex flex-row items-center justify-center",
-    "h-full w-full",
-  ];
-});
-const textAreaClass = computed(() => {
-  return [
-    twMerge(
-      //
-      "flex-1",
-      "!leading-[1.2em]",
-      "bg-transparent",
-      "mt-[1px]",
-      "min-h-full min-w-full"
-    ),
-  ];
-});
-
-const _rows = computed(() => {
-  if (!props.autosize) return props.rows;
-  return Math.max(state.value.split("\n").length, props.rows);
-});
-</script>
-
-<template>
-  <InputFrame
-    :class="['h-auto', props.class]"
-    :class-header="props.classHeader"
-    :class-input="['flex-1', props.classInput]"
-    :focus="computedActivate"
-    :focus-color="props.focusColor"
-    :change="isChangeData"
-    :change-color="props.changeColor"
-    :error="props.error"
-    :error-color="props.errorColor"
-    :disabled="props.disabled"
-    :disabled-color="props.disabledColor"
-    :readonly="props.readonly"
-    :label="props.label"
-    :require="props.require"
-    :require-text="props.requireText"
-    :warn="props.warn"
-    :warn-time-out="props.warnTimeOut"
-    :size="props.size"
-    :headerless="props.headerless"
-    @click="elmFocus"
-  >
-    <template v-if="$slots.label" #label>
-      <slot name="label"></slot>
-    </template>
-    <template
-      v-if="props.maxLen > 0 || props.maxRows > 0"
-      #header-right="{ defaultClass }"
-    >
-      <div v-if="props.maxLen !== 0" :class="[defaultClass, lenLabelClass]">
-        {{ state.value.length }} / {{ props.maxLen }}
-      </div>
-      <div v-if="props.maxRows !== 0" :class="[defaultClass, rowLabelClass]">
-        {{ state.value.split("\n").length }} / {{ props.maxRows }}
-        {{ tx(props.uiText.rowsUnit) }}
-      </div>
-    </template>
-    <div
-      class="nac-c-input-box"
-      :class="[textAreaFrameClass, { isMobile: hsMisc.state.isMobile }]"
-    >
-      <textarea
-        :ref="(e) => setRef(e)"
-        v-model="state.value"
-        type="text"
-        :class="textAreaClass"
-        :rows="_rows"
-        :disabled="props.disabled || props.readonly"
-        :tabindex="tabindex"
-        @blur="onBlur()"
-        @focus="onFocus()"
-        @mousedown="onMousedown"
-        @mouseup="onMouseup"
-        @input="updateValue(state.value)"
-        @keydown="(e: KeyboardEvent) => emit('keydown', e)"
-        @keyup="(e: KeyboardEvent) => emit('keyup', e)"
-      ></textarea>
-    </div>
-  </InputFrame>
-</template>
-
+<script setup>
+import { twMerge } from "tailwind-merge";
+import { reactive, ref, watch, computed, useId, nextTick, onMounted } from "#imports";
+import { Int } from "../../utils/number";
+import { useHsFocus } from "../../composables/use-hs-focus";
+import { useHsMultiLang } from "../../composables/use-hs-multi-lang";
+import { useHsPinia } from "../../composables/use-pinia";
+import { useHsIsMobile } from "../../composables/use-hs-is-mobile";
+import { useHsMisc } from "../../composables/use-hs-misc";
+import InputFrame from "./input-frame.vue";
+const hsFocus = useHsFocus(useHsPinia());
+const hsMisc = useHsMisc(useHsPinia());
+const hsIsMobile = useHsIsMobile(useHsPinia());
+onMounted(() => {
+  hsIsMobile.init();
+});
+const props = defineProps({
+  rows: { type: [Number, String], required: false, default: 3 },
+  maxRows: { type: Number, required: false, default: 0 },
+  maxLen: { type: Number, required: false, default: 0 },
+  autosize: { type: Boolean, required: false, default: false },
+  placeholder: { type: [String, Object], required: false, default: "" },
+  data: { type: [String, null], required: true },
+  diff: { type: null, required: false, default: void 0 },
+  tabindex: { type: null, required: false, default: void 0 },
+  class: { type: [String, Object, Array], required: false, default: "" },
+  classHeader: { type: [String, Object, Array], required: false, default: "" },
+  classInput: { type: [String, Object, Array], required: false, default: "" },
+  focusColor: { type: String, required: false, default: "shadow-[inset_0px_0px_1px_2px_#0d8ee4]" },
+  changeColor: { type: String, required: false, default: "shadow-[inset_0px_0px_1px_2px_#fd9831be]" },
+  error: { type: Boolean, required: false, default: false },
+  errorColor: { type: String, required: false, default: "shadow-[inset_0px_0px_1px_2px_#d80000dc]" },
+  disabled: { type: Boolean, required: false, default: false },
+  disabledColor: { type: String, required: false, default: "" },
+  readonly: { type: Boolean, required: false, default: false },
+  headerless: { type: Boolean, required: false, default: false },
+  label: { type: [String, Object], required: false, default: "" },
+  require: { type: Boolean, required: false, default: false },
+  requireText: { type: [String, Object], required: false, default: () => ({ ja: "\u5FC5\u9808", en: "Required" }) },
+  warn: { type: String, required: false, default: "" },
+  warnTimeOut: { type: Number, required: false, default: 3e3 },
+  size: { type: String, required: false, default: "m" },
+  uiText: { type: Object, required: false, default: () => {
+    return {
+      rowsUnit: { ja: "\u884C", en: "Rows" }
+    };
+  } }
+});
+const emit = defineEmits(["ref", "focus", "blur", "update:data", "value-change", "keydown", "keyup"]);
+const slots = defineSlots();
+const multiLang = useHsMultiLang(useHsPinia());
+const tx = multiLang.tx;
+const uid = useId();
+const state = reactive({
+  value: ""
+});
+watch(
+  () => props.data,
+  () => {
+    setValue(props.data);
+  }
+);
+const CutLen = (text, len, addWard = "") => {
+  if (text === null) return "";
+  if (len === 0) return text;
+  return text.substring(0, len) + addWard;
+};
+const getCheckedText = (text) => {
+  let ret = text;
+  if (props.maxRows !== 0) {
+    const lines = text.split("\n");
+    let amari = "";
+    if (lines.length > props.maxRows) {
+      const result = [];
+      for (let i = 0; i < lines.length; i++) {
+        if (i < props.maxRows) {
+          result.push(lines[i]);
+        } else {
+          amari += lines[i]?.replace(/\n/g, "");
+        }
+      }
+      ret = result.join("\n") + amari;
+    }
+  }
+  if (props.maxLen !== 0 || ret.length > props.maxLen) {
+    ret = CutLen(ret, props.maxLen, "");
+  }
+  return ret;
+};
+const setValue = (text) => {
+  if (text === null) {
+    state.value = "";
+    return;
+  }
+  const lineCheckedText = getCheckedText(text);
+  if (lineCheckedText === text) {
+    state.value = text;
+  } else {
+    updateValue(text);
+  }
+};
+setValue(props.data);
+const updateValue = async (text) => {
+  const before = props.data;
+  let setText = "";
+  if (text === null) {
+    setText = "";
+  } else {
+    setText = getCheckedText(text);
+  }
+  state.value = setText;
+  emit("update:data", setText);
+  await nextTick();
+  emit("value-change", setText, before);
+};
+const inputElement = ref();
+defineExpose({ el: inputElement });
+const setRef = (elm) => {
+  inputElement.value = elm;
+  emit("ref", elm);
+};
+const elmFocus = () => {
+  inputElement.value.focus();
+};
+const focusState = reactive({
+  isActivate: false,
+  isMmousedown: false
+});
+const computedActivate = computed(() => {
+  if (props.disabled === true) return false;
+  if (props.readonly === true) return false;
+  if (hsFocus.state.id !== uid) return false;
+  if (focusState.isActivate) return true;
+  if (focusState.isMmousedown) return true;
+  return false;
+});
+watch(computedActivate, (value) => {
+  if (value === true) {
+    setTimeout(() => {
+      emit("focus", inputElement.value);
+    }, 10);
+  } else {
+    emit("blur", inputElement.value);
+  }
+});
+const onMousedown = () => {
+  focusState.isMmousedown = true;
+};
+const onMouseup = () => {
+  elmFocus();
+  focusState.isMmousedown = false;
+};
+const onFocus = () => {
+  if (props.disabled === true) return;
+  if (props.readonly === true) return;
+  focusState.isActivate = true;
+  if (hsFocus.state.id !== uid) {
+    hsFocus.state.id = uid;
+  }
+};
+const onBlur = () => {
+  focusState.isActivate = false;
+};
+const tabindex = computed(() => {
+  if (props.disabled === true) return -1;
+  if (props.readonly === true) return -1;
+  return props.tabindex;
+});
+const isChangeData = computed(() => {
+  if (props.diff === void 0) return false;
+  if (props.diff === null && props.data === "") return false;
+  if (props.diff === "" && props.data === null) return false;
+  if (props.diff !== props.data) return true;
+  return false;
+});
+const lastLen = computed(() => {
+  return props.maxLen - state.value.length;
+});
+const lastRow = computed(() => {
+  return props.maxRows - state.value.split("\n").length;
+});
+const lenLabelClass = computed(() => {
+  return [
+    twMerge(
+      "text-white bg-[#2fa412]",
+      lastLen.value < 9 ? "bg-[#fdc90d]" : "",
+      lastLen.value < 6 ? "bg-[#fd750d]" : "",
+      lastLen.value < 3 ? "bg-[#fa541d]" : ""
+    )
+  ];
+});
+const rowLabelClass = computed(() => {
+  return [
+    twMerge(
+      "text-white bg-[#2fa412]",
+      lastRow.value < 6 ? "bg-[#fdc90d]" : "",
+      lastRow.value < 5 ? "bg-[#fd750d]" : "",
+      lastRow.value < 2 ? "bg-[#fa541d]" : ""
+    )
+  ];
+});
+const textAreaFrameClass = computed(() => {
+  return [
+    twMerge(),
+    //
+    "bg-transparent",
+    "flex flex-row items-center justify-center",
+    "h-full w-full"
+  ];
+});
+const textAreaClass = computed(() => {
+  return [
+    twMerge(
+      //
+      "flex-1",
+      "!leading-[1.2em]",
+      "bg-transparent",
+      "mt-[1px]",
+      "min-h-full min-w-full"
+    )
+  ];
+});
+const _rows = computed(() => {
+  if (!props.autosize) return props.rows;
+  const placeholder2 = tx(props.placeholder).value;
+  return Math.max(state.value.split("\n").length, placeholder2.split("\n").length, Int(props.rows));
+});
+const placeholder = computed(() => tx(props.placeholder).value);
+</script>
+
+<template>
+  <InputFrame
+    :class="['h-auto', props.class]"
+    :class-header="props.classHeader"
+    :class-input="['flex-1', props.classInput]"
+    :focus="computedActivate"
+    :focus-color="props.focusColor"
+    :change="isChangeData"
+    :change-color="props.changeColor"
+    :error="props.error"
+    :error-color="props.errorColor"
+    :disabled="props.disabled"
+    :disabled-color="props.disabledColor"
+    :readonly="props.readonly"
+    :label="props.label"
+    :require="props.require"
+    :require-text="props.requireText"
+    :warn="props.warn"
+    :warn-time-out="props.warnTimeOut"
+    :size="props.size"
+    :headerless="props.headerless"
+    @click="elmFocus"
+  >
+    <template #overlay="{ focus, change }">
+      <div
+        v-if="props.diff !== void 0 && change"
+        class="absolute inset-0 bg-red/30 transition-opacity flex items-start p-1 bg-dark/20"
+        :class="!focus && hsMisc.capsLockState ? 'opacity-100' : 'opacity-0 pointer-events-none select-none'"
+      >
+        <div class="flex">
+          <Btn
+            variant="outlined"
+            theme="error"
+            tabindex="-1"
+            size="xs"
+            class="bg-white flex-none"
+            @click="updateValue(props.diff)"
+          >
+            <i class="fa-solid fa-rotate-right"></i>
+          </Btn>
+          <div v-if="props.diff" class="px-1 truncate bg-white mx-1 flex items-center">{{ props.diff }}</div>
+        </div>
+      </div>
+      <template v-if="slots.overlay">
+        <slot name="overlay" :focus="focus" :change="change"></slot>
+      </template>
+    </template>
+    <template v-if="slots['left-icons']" #left-icons>
+      <slot name="left-icons" :disabled="disabled" />
+    </template>
+    <template v-if="slots['right-icons']" #right-icons>
+      <slot name="right-icons" :disabled="disabled" />
+    </template>
+    <template v-if="slots['label-prepend']" #label-prepend>
+      <slot name="label-prepend" />
+    </template>
+    <template v-if="slots['label-append']" #label-append>
+      <slot name="label-append" />
+    </template>
+    <template v-if="props.maxLen > 0 || props.maxRows > 0 || slots['header-right']" #header-right="{ defaultClass }">
+      <div v-if="props.maxLen !== 0 && lastLen < 15" :class="[defaultClass, lenLabelClass]">
+        {{ state.value.length }} / {{ props.maxLen }}
+      </div>
+      <div v-if="props.maxRows !== 0 && lastRow < 9" :class="[defaultClass, rowLabelClass]">
+        {{ state.value.split("\n").length }} / {{ props.maxRows }}
+        {{ tx(props.uiText.rowsUnit) }}
+      </div>
+      <slot name="header-right" />
+    </template>
+    <template #default="{ focus }">
+      <span
+        v-if="placeholder"
+        class="text-black/50 pointer-events-none select-none px-1 absolute inset-0 items-center transition-opacity truncate"
+        :class="focus || !!state.value ? 'opacity-0' : ''"
+      >
+        <div class="whitespace-pre-wrap w-full leading-[1.20em] mt-1">
+          {{ placeholder }}
+        </div>
+      </span>
+      <div class="nac-c-input-box" :class="[textAreaFrameClass, { isMobile: hsIsMobile.isMobile }]">
+        <textarea
+          :ref="(e) => setRef(e)"
+          v-model="state.value"
+          type="text"
+          :class="textAreaClass"
+          :rows="_rows"
+          :disabled="props.disabled || props.readonly"
+          :tabindex="tabindex"
+          @blur="onBlur()"
+          @focus="onFocus()"
+          @mousedown="onMousedown"
+          @mouseup="onMouseup"
+          @input="updateValue(state.value)"
+          @keydown="(e) => emit('keydown', e)"
+          @keyup="(e) => emit('keyup', e)"
+        ></textarea>
+      </div>
+    </template>
+  </InputFrame>
+</template>
+
 <style scoped>
 @charset "UTF-8";
 .nac-c-input-box {
   padding: 4px 2px 4px 4px;
-  /*スクロールバーの軌道*/
-  /*スクロールバーの動く部分*/
 }
 .nac-c-input-box ::-webkit-scrollbar {
   width: 6px;
@@ -430,11 +341,17 @@ const _rows = computed(() => {
   cursor: pointer;
   background-color: transparent;
 }
+.nac-c-input-box {
+  /*スクロールバーの軌道*/
+}
 .nac-c-input-box ::-webkit-scrollbar-track {
   border-radius: 3px;
   margin-top: -3px;
   margin-bottom: 4px;
 }
+.nac-c-input-box {
+  /*スクロールバーの動く部分*/
+}
 .nac-c-input-box ::-webkit-scrollbar-thumb {
   border-radius: 3px;
 }
@@ -480,4 +397,4 @@ textarea {
 textarea[disabled]::-webkit-resizer {
   background: #f3f3f3;
 }
-</style>
+</style>