@geckou/ui-vue 0.8.0 → 0.10.0

package/README.md

@@ -301,6 +301,34 @@ const articles = ref<any[]>([])
 
 定義例はデモの `demo/styles/base.scss` を参照。
 
+## 0.10.0 の変更
+
+- `DatePicker` の年月日欄は**入力中にエラー文言を出さない**。判定は入力のたびに
+  更新し、文言は欄を離れた時点（blur）で出す。あわせて 1 桁の月・日は blur で
+  2 桁へ正規化する（「1」→「01」）。年に「2」と打った瞬間に
+  `role="alert"` で「年は4桁の数字で入力してください」が読み上げられていたのが直る
+- `DatePicker` の年月日欄が不正なとき、`update:modelValue` が空文字になる
+  （これまでは valid のときだけ更新していたため、画面と送信値が食い違っていた）
+- `SelectBox` が `isDisabled` かつ値が `0` / `'NA'` のときにプレースホルダを
+  出す分岐を削除した。0 は正当な選択値として扱う
+- `SelectBox` がエラー時に `InputBox` へ `isErrored` を渡し、`aria-invalid` を付ける
+- `TextArea` の `autoAdjustHeight` が `box-sizing` を見て高さを補正する
+  （border-box のリセット CSS を当てた環境で 2rem 足りなかった）
+- `DateRangePicker` は範囲の比較前に日付を正規化する
+
+## 0.9.0 の変更
+
+- `ModalBox` を重ねたとき、Escape で閉じるのは**最前面の 1 枚だけ**になった
+  （従来は内側と外側の `close` が両方 emit されていた）。あわせて自分が Escape を
+  処理したら `preventDefault()` する。外側で Escape を見ているアプリ側のハンドラが
+  一緒に反応しなくなるので、`defaultPrevented` を見ずに閉じている処理があれば追従が要る
+- `DatePicker` のカレンダー起動用入力にアクセシブル名（「◯◯のカレンダー」）が付き、
+  キーボードで到達したときアイコン側に可視フォーカスが出る
+- `PopupBox` が `role="status"`（ライブリージョン）になり、支援技術に通知が伝わる
+- `SlideDownUi` が `close` を公開（React の `SlideDownUiHandle` と揃えた）。
+  外側クリックと違い `isDisableClickOutside` は見ない
+- `PostedDate` の `<time>` に `datetime` が付く（無効な `date` のときは属性ごと出さない）
+
 ## 0.7.0 の変更
 
 - `DatePicker` / `DateSelector` が `ariaLabel` / `ariaLabelledBy` を受ける

package/dist/components/ArticleList/Parts/PostedDate.vue2.js

@@ -1,6 +1,6 @@
-import { defineComponent as n, computed as a, openBlock as d, createElementBlock as s, normalizeClass as f, normalizeStyle as i, toDisplayString as m } from "vue";
-import { parseISO as c, isValid as u, format as p } from "date-fns";
-const z = /* @__PURE__ */ n({
+import { defineComponent as i, computed as o, openBlock as s, createElementBlock as m, normalizeClass as f, normalizeStyle as c, toDisplayString as u } from "vue";
+import { parseISO as p, isValid as l, format as y } from "date-fns";
+const S = ["datetime"], z = /* @__PURE__ */ i({
   __name: "PostedDate",
   props: {
     date: {},
@@ -9,18 +9,21 @@ const z = /* @__PURE__ */ n({
     fontSize: { default: "small" },
     fontWeight: { default: "normal" }
   },
-  setup(t) {
-    const e = t, o = a(() => c(e.date)), l = a(
-      () => u(o.value) ? p(o.value, e.formatString) : ""
+  setup(e) {
+    const t = e, a = o(() => p(t.date)), n = o(
+      () => l(a.value) ? y(a.value, t.formatString) : ""
+    ), d = o(
+      () => l(a.value) ? t.date : void 0
     );
-    return (r, y) => (d(), s("time", {
+    return (r, g) => (s(), m("time", {
+      datetime: d.value,
       class: f(r.$style.posted_date),
-      style: i({
-        "--date-color": t.color,
-        "--date-font-size": t.fontSize,
-        "--date-font-weight": t.fontWeight
+      style: c({
+        "--date-color": e.color,
+        "--date-font-size": e.fontSize,
+        "--date-font-weight": e.fontWeight
       })
-    }, m(l.value), 7));
+    }, u(n.value), 15, S));
   }
 });
 export {

package/dist/components/DatePicker.vue2.js

@@ -1,10 +1,10 @@
-import { defineComponent as I, ref as v, reactive as R, watch as D, onBeforeUnmount as N, openBlock as y, createBlock as O, normalizeClass as o, withCtx as z, createElementVNode as n, createVNode as M, withDirectives as b, vModelDynamic as P, vModelText as h, createTextVNode as S, createElementBlock as $, createCommentVNode as g, unref as B } from "vue";
-import { MESSAGES as j, validateDateObject as T, splitDate as w, composeDateValue as A, formatDateValue as G } from "@geckou/ui-core";
-import F from "./InputBox.vue.js";
-import H from "./Icon/CalendarIcon.vue.js";
-import J from "./ErrorMessage.vue.js";
-import { nextUniqueId as K } from "../scripts/unique-id.js";
-const Q = ["type", "name", "max", "min", "required", "disabled"], W = ["aria-label", "aria-labelledby", "disabled"], X = ["aria-label", "aria-labelledby", "disabled"], Y = { key: 0 }, Z = ["aria-label", "aria-labelledby", "disabled"], _ = ["id"], ee = ["id"], ae = ["id"], re = /* @__PURE__ */ I({
+import { defineComponent as z, ref as B, reactive as C, watch as R, onBeforeUnmount as N, openBlock as p, createBlock as w, normalizeClass as y, withCtx as P, createElementVNode as s, createVNode as M, createTextVNode as S, createElementBlock as $, createCommentVNode as k, unref as V } from "vue";
+import { MESSAGES as U, normalizeDateObject as A, formatDateValue as G, splitDate as T, validateDateObject as F, composeDateValue as H } from "@geckou/ui-core";
+import J from "./InputBox.vue.js";
+import K from "./Icon/CalendarIcon.vue.js";
+import Q from "./ErrorMessage.vue.js";
+import { nextUniqueId as W } from "../scripts/unique-id.js";
+const X = ["value", "type", "name", "aria-label", "aria-labelledby", "max", "min", "required", "disabled"], Y = ["value", "aria-label", "aria-labelledby", "disabled"], Z = ["value", "aria-label", "aria-labelledby", "disabled"], _ = { key: 0 }, ee = ["value", "aria-label", "aria-labelledby", "disabled"], ae = ["id"], le = ["id"], te = ["id"], ie = ["id"], me = /* @__PURE__ */ z({
   __name: "DatePicker",
   props: {
     name: {},
@@ -20,131 +20,134 @@ const Q = ["type", "name", "max", "min", "required", "disabled"], W = ["aria-lab
     ariaLabelledBy: { default: void 0 }
   },
   emits: ["update:modelValue"],
-  setup(t, { emit: x }) {
-    const L = x, q = v(null), l = t, u = K("date_picker_unit"), f = (e) => l.ariaLabelledBy ? void 0 : `${l.ariaLabel ?? l.name}の${e}`, c = (e) => l.ariaLabelledBy ? `${l.ariaLabelledBy} ${u}_${e}` : void 0, d = R({
+  setup(t, { emit: q }) {
+    const v = q, x = B(null), l = t, u = W("date_picker_unit"), b = (e) => l.ariaLabelledBy ? void 0 : `${l.ariaLabel ?? l.name}の${e}`, c = (e) => l.ariaLabelledBy ? `${l.ariaLabelledBy} ${u}_${e}` : void 0, i = C({
       year: "",
       month: "",
       day: ""
-    }), s = v(""), r = v(""), m = (e) => {
+    }), n = B(""), r = B(""), m = (e) => {
       l.formValidationManager && l.formValidationManager.setValid(l.name, e);
-    }, p = (e) => !e && l.isRequired ? { isValid: !1, message: j.required } : { isValid: !0, message: "" }, E = (e) => T(
+    }, f = (e) => !e && l.isRequired ? { isValid: !1, message: U.required } : { isValid: !0, message: "" }, O = (e) => F(
       { year: e.year, month: e.month, day: e.day ?? "" },
       { type: l.type, isRequired: l.isRequired }
-    ), V = (e) => {
-      const { year: a, month: i, day: C } = w(e);
-      d.year = a, d.month = i, d.day = l.type === "month" ? "" : C;
-    }, U = () => A({ ...d }, l.type);
-    D(
-      () => s.value,
-      (e) => {
-        V(e);
-        const { isValid: a, message: i } = p(e);
-        r.value = i, L("update:modelValue", e), m(a);
-      }
-    ), D(
-      () => d,
-      (e) => {
-        const { isValid: a, message: i } = E(e);
-        r.value = i, m(a), a && (s.value = U());
-      },
-      { deep: !0 }
-    );
-    const k = (e) => {
+    ), h = (e) => {
+      const { year: a, month: d, day: o } = T(e);
+      i.year = a, i.month = d, i.day = l.type === "month" ? "" : o;
+    }, E = () => H({ ...i }, l.type), j = (e) => {
+      const a = e.target.value;
+      n.value = a, h(a);
+      const { isValid: d, message: o } = f(a);
+      r.value = o, m(d), v("update:modelValue", a);
+    }, I = (e) => {
+      const { isValid: a, message: d } = O(i);
+      m(a), r.value = e ? d : "";
+      const o = a ? E() : "";
+      o !== n.value && (n.value = o, v("update:modelValue", o));
+    }, D = (e, a) => {
+      i[e] = a.target.value, I(!1);
+    }, g = () => {
+      const e = A({ ...i });
+      i.year = e.year, i.month = e.month, i.day = e.day, I(!0);
+    }, L = (e) => {
       if (!e) {
-        s.value = "", V(""), r.value = "", m(p("").isValid);
+        n.value = "", h(""), r.value = "", m(f("").isValid);
         return;
       }
       const a = G(e, l.type);
-      !a || a === s.value || (s.value = a, V(a));
+      !a || a === n.value || (n.value = a, h(a), r.value = "", m(f(a).isValid), a !== e && v("update:modelValue", a));
     };
-    return D(
+    return R(
       () => l.modelValue,
-      (e) => k(e)
-    ), k(l.modelValue), m(p(s.value).isValid), N(() => {
+      (e) => L(e)
+    ), L(l.modelValue), m(f(n.value).isValid), N(() => {
       var e;
       return (e = l.formValidationManager) == null ? void 0 : e.remove(l.name);
-    }), (e, a) => (y(), O(F, {
+    }), (e, a) => (p(), w(J, {
       isDisabled: t.isDisabled,
-      class: o([
+      class: y([
         e.$style.date_picker,
         e.$style[t.size],
         { [e.$style.is_disabled]: t.isDisabled }
       ]),
       isErrored: !!r.value
     }, {
-      default: z(() => [
-        n("div", {
-          class: o(e.$style.date_input)
+      default: P(() => [
+        s("div", {
+          class: y(e.$style.date_input)
         }, [
-          M(H, {
-            class: o(e.$style.icon)
+          M(K, {
+            class: y(e.$style.icon)
           }, null, 8, ["class"]),
-          b(n("input", {
+          s("input", {
             ref_key: "datePicker",
-            ref: q,
-            "onUpdate:modelValue": a[0] || (a[0] = (i) => s.value = i),
+            ref: x,
+            value: n.value,
             type: t.type,
             name: t.name,
+            "aria-label": b("カレンダー"),
+            "aria-labelledby": c("カレンダー"),
             max: t.maxDate,
             min: t.minDate,
             required: t.isRequired,
-            disabled: t.isDisabled
-          }, null, 8, Q), [
-            [P, s.value]
-          ])
+            disabled: t.isDisabled,
+            onInput: j
+          }, null, 40, X)
         ], 2),
-        b(n("input", {
-          "onUpdate:modelValue": a[1] || (a[1] = (i) => d.year = i),
+        s("input", {
+          value: i.year,
           placeholder: "年",
-          "aria-label": f("年"),
+          "aria-label": b("年"),
           "aria-labelledby": c("年"),
           maxlength: "4",
           type: "text",
           disabled: t.isDisabled,
-          class: o(e.$style.year)
-        }, null, 10, W), [
-          [h, d.year]
-        ]),
-        a[4] || (a[4] = S("/ ", -1)),
-        b(n("input", {
-          "onUpdate:modelValue": a[2] || (a[2] = (i) => d.month = i),
+          class: y(e.$style.year),
+          onInput: a[0] || (a[0] = (d) => D("year", d)),
+          onBlur: g
+        }, null, 42, Y),
+        a[3] || (a[3] = S("/ ", -1)),
+        s("input", {
+          value: i.month,
           placeholder: "月",
-          "aria-label": f("月"),
+          "aria-label": b("月"),
           "aria-labelledby": c("月"),
           maxlength: "2",
           type: "text",
-          disabled: t.isDisabled
-        }, null, 8, X), [
-          [h, d.month]
-        ]),
-        t.type === "date" ? (y(), $("span", Y, "/")) : g("", !0),
-        t.type === "date" ? b((y(), $("input", {
+          disabled: t.isDisabled,
+          onInput: a[1] || (a[1] = (d) => D("month", d)),
+          onBlur: g
+        }, null, 40, Z),
+        t.type === "date" ? (p(), $("span", _, "/")) : k("", !0),
+        t.type === "date" ? (p(), $("input", {
           key: 1,
-          "onUpdate:modelValue": a[3] || (a[3] = (i) => d.day = i),
+          value: i.day,
           placeholder: "日",
-          "aria-label": f("日"),
+          "aria-label": b("日"),
           "aria-labelledby": c("日"),
           maxlength: "2",
           type: "text",
-          disabled: t.isDisabled
-        }, null, 8, Z)), [
-          [h, d.day]
-        ]) : g("", !0),
-        t.ariaLabelledBy ? (y(), $("span", {
+          disabled: t.isDisabled,
+          onInput: a[2] || (a[2] = (d) => D("day", d)),
+          onBlur: g
+        }, null, 40, ee)) : k("", !0),
+        t.ariaLabelledBy ? (p(), $("span", {
           key: 2,
-          class: o(e.$style.unit_labels)
+          class: y(e.$style.unit_labels)
         }, [
-          n("span", {
-            id: `${B(u)}_年`
-          }, "の年", 8, _),
-          n("span", {
-            id: `${B(u)}_月`
-          }, "の月", 8, ee),
-          n("span", {
-            id: `${B(u)}_日`
-          }, "の日", 8, ae)
-        ], 2)) : g("", !0),
-        M(J, {
+          s("span", {
+            id: `${V(u)}_カレンダー`
+          }, "のカレンダー", 8, ae),
+          s("span", {
+            id: `${V(u)}_年`
+          }, "の年", 8, le),
+          s("span", {
+            id: `${V(u)}_月`
+          }, "の月", 8, te),
+          s("span", {
+            id: `${V(u)}_日`
+          }, "の日", 8, ie)
+        ], 2)) : k("", !0),
+        M(Q, {
           errorMessages: r.value ? [r.value] : []
         }, null, 8, ["errorMessages"])
       ]),
@@ -153,5 +156,5 @@ const Q = ["type", "name", "max", "min", "required", "disabled"], W = ["aria-lab
   }
 });
 export {
-  re as default
+  me as default
 };

package/dist/components/DatePicker.vue3.js

@@ -1,6 +1,6 @@
-const _ = "_unit_labels_1r4fv_1", t = "_icon_1r4fv_13", e = "_date_input_1r4fv_26", a = "_date_picker_1r4fv_46", n = "_year_1r4fv_57", s = "_small_1r4fv_63", l = {
-  unit_labels: _,
-  icon: t,
+const t = "_unit_labels_19dtq_1", _ = "_icon_19dtq_13", e = "_date_input_19dtq_26", a = "_date_picker_19dtq_51", n = "_year_19dtq_62", s = "_small_19dtq_68", l = {
+  unit_labels: t,
+  icon: _,
   date_input: e,
   date_picker: a,
   year: n,
@@ -10,8 +10,8 @@ export {
   e as date_input,
   a as date_picker,
   l as default,
-  t as icon,
+  _ as icon,
   s as small,
-  _ as unit_labels,
+  t as unit_labels,
   n as year
 };

package/dist/components/DateRangePicker.vue2.js

@@ -1,8 +1,8 @@
-import { defineComponent as R, computed as i, watch as z, onBeforeUnmount as E, openBlock as b, createElementBlock as q, normalizeClass as c, createVNode as r, createElementVNode as x, unref as k } from "vue";
-import { MESSAGES as B } from "@geckou/ui-core";
-import g from "./DatePicker.vue.js";
-import S from "./ErrorMessage.vue.js";
-const A = /* @__PURE__ */ R({
+import { defineComponent as b, computed as l, watch as q, onBeforeUnmount as x, openBlock as S, createElementBlock as k, normalizeClass as v, createVNode as s, createElementVNode as B, unref as $ } from "vue";
+import { formatDateValue as M, MESSAGES as N } from "@geckou/ui-core";
+import y from "./DatePicker.vue.js";
+import U from "./ErrorMessage.vue.js";
+const w = /* @__PURE__ */ b({
   __name: "DateRangePicker",
   props: {
     name: {},
@@ -16,59 +16,61 @@ const A = /* @__PURE__ */ R({
     type: { default: "date" }
   },
   emits: ["update:modelValue"],
-  setup(e, { emit: M }) {
-    const u = M, t = e, l = i(() => t.modelValue.start), n = i(() => t.modelValue.end), s = i(
-      () => !(l.value && n.value && l.value > n.value)
-    ), f = i(() => `${t.name}Range`);
-    z(
-      [s, f],
-      ([a, d], m) => {
-        var V, D;
-        const o = m == null ? void 0 : m[1];
-        o && o !== d && ((V = t.formValidationManager) == null || V.remove(o)), (D = t.formValidationManager) == null || D.setValid(d, a);
+  setup(e, { emit: z }) {
+    const f = z, t = e, n = l(() => t.modelValue.start), i = l(() => t.modelValue.end), d = l(
+      () => M(n.value, t.type)
+    ), m = l(() => M(i.value, t.type)), V = l(
+      () => !(d.value && m.value && d.value > m.value)
+    ), c = l(() => `${t.name}Range`);
+    q(
+      [V, c],
+      ([a, o], r) => {
+        var D, g;
+        const u = r == null ? void 0 : r[1];
+        u && u !== o && ((D = t.formValidationManager) == null || D.remove(u)), (g = t.formValidationManager) == null || g.setValid(o, a);
       },
       { immediate: !0 }
-    ), E(() => {
+    ), x(() => {
       var a;
-      return (a = t.formValidationManager) == null ? void 0 : a.remove(f.value);
+      return (a = t.formValidationManager) == null ? void 0 : a.remove(c.value);
     });
-    const v = (a) => u("update:modelValue", { start: a ?? "", end: n.value }), y = (a) => u("update:modelValue", { start: l.value, end: a ?? "" });
-    return (a, d) => (b(), q("div", {
-      class: c(a.$style.date_range_picker)
+    const R = (a) => f("update:modelValue", { start: a ?? "", end: i.value }), E = (a) => f("update:modelValue", { start: n.value, end: a ?? "" });
+    return (a, o) => (S(), k("div", {
+      class: v(a.$style.date_range_picker)
     }, [
-      r(g, {
+      s(y, {
         name: `${e.name}Start`,
-        modelValue: l.value,
+        modelValue: n.value,
         isDisabled: e.isDisabled,
         isRequired: e.isRequired,
         formValidationManager: e.formValidationManager,
         minDate: e.minDate,
-        maxDate: n.value || e.maxDate,
+        maxDate: m.value || e.maxDate,
         size: e.size,
         type: e.type,
-        "onUpdate:modelValue": v
+        "onUpdate:modelValue": R
       }, null, 8, ["name", "modelValue", "isDisabled", "isRequired", "formValidationManager", "minDate", "maxDate", "size", "type"]),
-      x("div", {
-        class: c(a.$style.range)
+      B("div", {
+        class: v(a.$style.range)
       }, "〜", 2),
-      r(g, {
+      s(y, {
         name: `${e.name}End`,
-        modelValue: n.value,
+        modelValue: i.value,
         isDisabled: e.isDisabled,
         isRequired: e.isRequired,
         formValidationManager: e.formValidationManager,
-        minDate: l.value || e.minDate,
+        minDate: d.value || e.minDate,
         maxDate: e.maxDate,
         size: e.size,
         type: e.type,
-        "onUpdate:modelValue": y
+        "onUpdate:modelValue": E
       }, null, 8, ["name", "modelValue", "isDisabled", "isRequired", "formValidationManager", "minDate", "maxDate", "size", "type"]),
-      r(S, {
-        errorMessages: s.value ? void 0 : [k(B).startAfterEnd]
+      s(U, {
+        errorMessages: V.value ? void 0 : [$(N).startAfterEnd]
       }, null, 8, ["errorMessages"])
     ], 2));
   }
 });
 export {
-  A as default
+  w as default
 };

package/dist/components/ModalBox.vue2.js

@@ -1,8 +1,8 @@
-import { defineComponent as p, ref as g, watch as $, nextTick as C, computed as E, onMounted as L, onBeforeUnmount as B, openBlock as i, createElementBlock as d, normalizeClass as o, withModifiers as I, createElementVNode as c, unref as b, renderSlot as u, createCommentVNode as k, createVNode as z } from "vue";
-import { createScrollLock as M, handleTabKey as N } from "@geckou/ui-core";
-import V from "./Icon/CloseIcon.vue.js";
-import { nextUniqueId as q } from "../scripts/unique-id.js";
-const K = ["aria-hidden", "inert"], T = ["aria-labelledby", "aria-label"], U = ["id"], G = /* @__PURE__ */ p({
+import { defineComponent as g, ref as C, watch as k, nextTick as E, computed as B, onMounted as M, onBeforeUnmount as I, openBlock as d, createElementBlock as c, normalizeClass as t, withModifiers as z, createElementVNode as u, unref as w, renderSlot as m, createCommentVNode as p, createVNode as N } from "vue";
+import { createScrollLock as T, createModalLayer as q, handleTabKey as D } from "@geckou/ui-core";
+import K from "./Icon/CloseIcon.vue.js";
+import { nextUniqueId as U } from "../scripts/unique-id.js";
+const V = ["aria-hidden", "inert"], P = ["aria-labelledby", "aria-label"], j = ["id"], O = /* @__PURE__ */ g({
   __name: "ModalBox",
   props: {
     isShown: { type: Boolean },
@@ -10,83 +10,85 @@ const K = ["aria-hidden", "inert"], T = ["aria-labelledby", "aria-label"], U = [
     ariaLabel: {}
   },
   emits: ["close"],
-  setup(n, { emit: w }) {
-    const t = n, m = q("modal_header"), s = g(null), v = w, f = M(), h = (e) => f.toggle(e), a = () => v("close");
-    $(
-      () => t.isShown,
-      (e) => h(e)
+  setup(n, { emit: v }) {
+    const o = n, f = U("modal_header"), a = C(null), S = v, h = T(), y = (e) => h.toggle(e), s = () => S("close"), r = q(), $ = (e) => r.toggle(e, a.value);
+    k(
+      () => o.isShown,
+      (e) => {
+        y(e), $(e);
+      }
     );
     let l = null;
-    $(
-      () => t.isShown,
+    k(
+      () => o.isShown,
       async (e) => {
-        var r;
+        var i;
         if (!e) {
           l == null || l.focus(), l = null;
           return;
         }
-        l = typeof document > "u" ? null : document.activeElement, await C(), (r = s.value) == null || r.focus();
+        l = typeof document > "u" ? null : document.activeElement, await E(), (i = a.value) == null || i.focus();
       }
     );
-    const S = E(() => !t.isShown || void 0), y = (e) => {
-      if (t.isShown && !e.defaultPrevented) {
+    const L = B(() => !o.isShown || void 0), b = (e) => {
+      if (o.isShown && r.isTopmost() && !e.defaultPrevented) {
         if (e.key === "Escape") {
-          a();
+          e.preventDefault(), s();
           return;
         }
-        N(s.value, e, document.activeElement);
+        D(a.value, e, document.activeElement);
       }
     };
-    return L(() => {
-      h(t.isShown), document.addEventListener("keydown", y);
-    }), B(() => {
-      f.release(), document.removeEventListener("keydown", y);
-    }), (e, r) => (i(), d("div", {
-      class: o([e.$style.overlay, { [e.$style.display]: n.isShown }]),
+    return M(() => {
+      y(o.isShown), $(o.isShown), document.addEventListener("keydown", b);
+    }), I(() => {
+      h.release(), r.release(), document.removeEventListener("keydown", b);
+    }), (e, i) => (d(), c("div", {
+      class: t([e.$style.overlay, { [e.$style.display]: n.isShown }]),
       "aria-hidden": !n.isShown,
-      inert: S.value,
-      onClick: I(a, ["self"])
+      inert: L.value,
+      onClick: z(s, ["self"])
     }, [
-      c("div", {
+      u("div", {
         ref_key: "dialog",
-        ref: s,
+        ref: a,
         role: "dialog",
         "aria-modal": "true",
-        "aria-labelledby": e.$slots.header ? b(m) : void 0,
+        "aria-labelledby": e.$slots.header ? w(f) : void 0,
         "aria-label": e.$slots.header ? void 0 : n.ariaLabel ?? "ダイアログ",
         tabindex: -1,
-        class: o([e.$style.container, e.$style[n.size ?? "medium"]])
+        class: t([e.$style.container, e.$style[n.size ?? "medium"]])
       }, [
-        e.$slots.header ? (i(), d("header", {
+        e.$slots.header ? (d(), c("header", {
           key: 0,
-          id: b(m),
-          class: o(e.$style.header)
+          id: w(f),
+          class: t(e.$style.header)
         }, [
-          u(e.$slots, "header")
-        ], 10, U)) : k("", !0),
-        c("div", {
-          class: o(e.$style.contents)
+          m(e.$slots, "header")
+        ], 10, j)) : p("", !0),
+        u("div", {
+          class: t(e.$style.contents)
         }, [
-          u(e.$slots, "default")
+          m(e.$slots, "default")
         ], 2),
-        e.$slots.footer ? (i(), d("footer", {
+        e.$slots.footer ? (d(), c("footer", {
           key: 1,
-          class: o(e.$style.footer)
+          class: t(e.$style.footer)
         }, [
-          u(e.$slots, "footer")
-        ], 2)) : k("", !0),
-        c("button", {
+          m(e.$slots, "footer")
+        ], 2)) : p("", !0),
+        u("button", {
           type: "button",
           "aria-label": "閉じる",
-          class: o(e.$style.close_button),
-          onClick: a
+          class: t(e.$style.close_button),
+          onClick: s
         }, [
-          z(V)
+          N(K)
         ], 2)
-      ], 10, T)
-    ], 10, K));
+      ], 10, P)
+    ], 10, V));
   }
 });
 export {
-  G as default
+  O as default
 };

package/dist/components/PopupBox.vue2.js

@@ -1,23 +1,24 @@
-import { defineComponent as u, ref as i, onBeforeUnmount as r, openBlock as a, createBlock as p, Teleport as f, createElementVNode as m, normalizeClass as c, renderSlot as d } from "vue";
+import { defineComponent as u, ref as r, onBeforeUnmount as a, openBlock as i, createBlock as p, Teleport as f, createElementVNode as m, normalizeClass as c, renderSlot as d } from "vue";
 const h = /* @__PURE__ */ u({
   __name: "PopupBox",
   props: {
     position: { default: () => ({ x: "right", y: "top" }) }
   },
   setup(t, { expose: s }) {
-    const l = i(!1);
+    const l = r(!1);
     let e = null;
     const n = () => {
       l.value = !0, e !== null && clearTimeout(e), e = setTimeout(() => {
         l.value = !1, e = null;
       }, 3e3);
     };
-    return r(() => {
+    return a(() => {
       e !== null && clearTimeout(e);
     }), s({
       showPopup: n
-    }), (o, y) => (a(), p(f, { to: "body" }, [
+    }), (o, y) => (i(), p(f, { to: "body" }, [
       m("div", {
+        role: "status",
         class: c([
           o.$style.popup,
           o.$style[`x-${t.position.x}`],

package/dist/components/SelectBox.vue2.js

@@ -1,9 +1,9 @@
-import { defineComponent as q, ref as E, computed as M, watch as N, openBlock as t, createBlock as D, normalizeClass as n, withCtx as O, withDirectives as R, createElementVNode as v, createElementBlock as a, toDisplayString as d, createCommentVNode as B, Fragment as i, renderList as y, vModelSelect as x, renderSlot as A, createVNode as I } from "vue";
-import { isEmptyValue as C, MESSAGES as z } from "@geckou/ui-core";
+import { defineComponent as E, ref as $, computed as q, watch as M, openBlock as t, createBlock as p, normalizeClass as u, withCtx as O, withDirectives as N, createElementVNode as v, createElementBlock as a, toDisplayString as c, Fragment as i, renderList as y, vModelSelect as R, renderSlot as x, createCommentVNode as I, createVNode as z } from "vue";
+import { isEmptyValue as D, MESSAGES as A } from "@geckou/ui-core";
 import F from "./InputBox.vue.js";
 import G from "./ErrorMessage.vue.js";
 import L from "./Icon/KeyboardArrowDownIcon.vue.js";
-const U = ["name", "disabled", "required"], H = {
+const U = ["name", "disabled", "required", "aria-invalid"], H = {
   key: 0,
   value: ""
 }, J = {
@@ -11,7 +11,7 @@ const U = ["name", "disabled", "required"], H = {
   disabled: "",
   selected: "",
   value: ""
-}, K = ["value"], P = ["value", "disabled"], Q = ["label"], T = ["value", "disabled"], _ = /* @__PURE__ */ q({
+}, K = ["value", "disabled"], P = ["label"], Q = ["value", "disabled"], j = /* @__PURE__ */ E({
   __name: "SelectBox",
   props: {
     options: {},
@@ -24,86 +24,82 @@ const U = ["name", "disabled", "required"], H = {
     isRequired: { type: Boolean }
   },
   emits: ["update:modelValue"],
-  setup(e, { emit: p }) {
-    const w = p, c = e, m = E([]), o = M({
-      get: () => c.modelValue ?? "",
-      set: (l) => w("update:modelValue", l)
-    }), b = (l) => typeof l == "object" && l !== null && "label" in l && typeof l.label == "string" && "value" in l, f = () => {
-      m.value = [], C(o.value) && c.isRequired && m.value.push(z.required);
+  setup(l, { emit: B }) {
+    const C = B, m = l, o = $([]), d = q({
+      get: () => m.modelValue ?? "",
+      set: (e) => C("update:modelValue", e)
+    }), b = (e) => typeof e == "object" && e !== null && "label" in e && typeof e.label == "string" && "value" in e, f = () => {
+      o.value = [], D(d.value) && m.isRequired && o.value.push(A.required);
     };
-    return N(
-      () => o.value,
+    return M(
+      () => d.value,
       () => f(),
-      { immediate: !C(c.modelValue), flush: "post" }
-    ), (l, r) => (t(), D(F, {
-      cssStyle: e.cssStyle,
-      class: n(l.$style.select_box),
-      isDisabled: e.isDisabled
+      { immediate: !D(m.modelValue), flush: "post" }
+    ), (e, r) => (t(), p(F, {
+      cssStyle: l.cssStyle,
+      class: u(e.$style.select_box),
+      isDisabled: l.isDisabled,
+      isErrored: !!o.value.length
     }, {
       default: O(() => {
-        var S, h, k, g;
+        var S, g, h, k;
         return [
-          R(v("select", {
-            "onUpdate:modelValue": r[0] || (r[0] = (s) => o.value = s),
-            name: e.name,
-            disabled: e.isDisabled,
-            required: e.isRequired,
-            class: n(l.$style.select),
+          N(v("select", {
+            "onUpdate:modelValue": r[0] || (r[0] = (s) => d.value = s),
+            name: l.name,
+            disabled: l.isDisabled,
+            required: l.isRequired,
+            "aria-invalid": o.value.length > 0 || void 0,
+            class: u(e.$style.select),
             onBlur: r[1] || (r[1] = (s) => f())
           }, [
-            e.canOmitSelect ? (t(), a("option", H, d(e.placeholder || "選択しない"), 1)) : (t(), a("option", J, d(e.placeholder || "選択してください"), 1)),
-            ["0", "NA"].includes(o.value.toString()) && e.isDisabled ? (t(), a("option", {
-              key: 2,
-              disabled: "",
-              selected: "",
-              value: o.value
-            }, d(e.placeholder || "選択してください"), 9, K)) : B("", !0),
-            (t(!0), a(i, null, y(e.options, (s) => (t(), a(i, {
+            l.canOmitSelect ? (t(), a("option", H, c(l.placeholder || "選択しない"), 1)) : (t(), a("option", J, c(l.placeholder || "選択してください"), 1)),
+            (t(!0), a(i, null, y(l.options, (s) => (t(), a(i, {
               key: b(s) ? s.value : Object.keys(s)[0]
             }, [
               b(s) ? (t(), a("option", {
                 key: 0,
                 value: s.value,
                 disabled: s.isDisabled
-              }, d(s.label), 9, P)) : (t(), a(i, { key: 1 }, [
-                (t(!0), a(i, null, y(s, ($, V) => (t(), a("optgroup", {
+              }, c(s.label), 9, K)) : (t(), a(i, { key: 1 }, [
+                (t(!0), a(i, null, y(s, (w, V) => (t(), a("optgroup", {
                   key: V,
                   label: V
                 }, [
-                  (t(!0), a(i, null, y($, (u) => (t(), a("option", {
-                    key: u.value,
-                    value: u.value,
-                    disabled: u.isDisabled
-                  }, d(u.label), 9, T))), 128))
-                ], 8, Q))), 128)),
+                  (t(!0), a(i, null, y(w, (n) => (t(), a("option", {
+                    key: n.value,
+                    value: n.value,
+                    disabled: n.isDisabled
+                  }, c(n.label), 9, Q))), 128))
+                ], 8, P))), 128)),
                 r[2] || (r[2] = v("hr", null, null, -1))
               ], 64))
             ], 64))), 128))
           ], 42, U), [
-            [x, o.value]
+            [R, d.value]
           ]),
           v("div", {
-            class: n(l.$style.arrow_container)
+            class: u(e.$style.arrow_container)
           }, [
-            A(l.$slots, "arrow"),
-            l.$slots.arrow ? B("", !0) : (t(), D(L, {
+            x(e.$slots, "arrow"),
+            e.$slots.arrow ? I("", !0) : (t(), p(L, {
               key: 0,
-              class: n(l.$style.arrow)
+              class: u(e.$style.arrow)
             }, null, 8, ["class"]))
           ], 2),
-          I(G, {
-            errorMessages: m.value,
+          z(G, {
+            errorMessages: o.value,
             cssStyle: {
-              textColor: (h = (S = e.cssStyle) == null ? void 0 : S.error) == null ? void 0 : h.backgroundColor,
-              backgroundColor: (g = (k = e.cssStyle) == null ? void 0 : k.error) == null ? void 0 : g.textColor
+              textColor: (g = (S = l.cssStyle) == null ? void 0 : S.error) == null ? void 0 : g.backgroundColor,
+              backgroundColor: (k = (h = l.cssStyle) == null ? void 0 : h.error) == null ? void 0 : k.textColor
             }
           }, null, 8, ["errorMessages", "cssStyle"])
         ];
       }),
       _: 3
-    }, 8, ["cssStyle", "class", "isDisabled"]));
+    }, 8, ["cssStyle", "class", "isDisabled", "isErrored"]));
   }
 });
 export {
-  _ as default
+  j as default
 };

package/dist/components/SlideDownUi.vue.d.ts

@@ -21,6 +21,7 @@ declare function __VLS_template(): {
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {
     isOpenedContents: Ref<boolean, boolean>;
+    close: () => boolean;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     duration: number;
     isOpened: boolean | null;

package/dist/components/SlideDownUi.vue2.js

@@ -1,7 +1,7 @@
-import { defineComponent as g, ref as s, onMounted as h, onUpdated as k, watch as C, openBlock as u, createElementBlock as $, normalizeClass as o, normalizeStyle as p, createElementVNode as l, withModifiers as b, renderSlot as f, createBlock as B, createCommentVNode as D } from "vue";
-import O from "./Icon/KeyboardArrowDownIcon.vue.js";
-import { useClickOutside as w } from "../scripts/use-click-outside.js";
-const H = ["disabled", "aria-expanded"], S = ["inert"], N = /* @__PURE__ */ g({
+import { defineComponent as h, ref as s, onMounted as k, onUpdated as C, watch as $, openBlock as p, createElementBlock as b, normalizeClass as o, normalizeStyle as f, createElementVNode as l, withModifiers as B, renderSlot as y, createBlock as D, createCommentVNode as O } from "vue";
+import w from "./Icon/KeyboardArrowDownIcon.vue.js";
+import { useClickOutside as H } from "../scripts/use-click-outside.js";
+const S = ["disabled", "aria-expanded"], z = ["inert"], U = /* @__PURE__ */ h({
   __name: "SlideDownUi",
   props: {
     isOpened: { type: [Boolean, null], default: null },
@@ -10,43 +10,43 @@ const H = ["disabled", "aria-expanded"], S = ["inert"], N = /* @__PURE__ */ g({
     isDisableClickOutside: { type: Boolean },
     duration: { default: 0.3 }
   },
-  setup(i, { expose: y }) {
-    const n = i, t = s(n.isOpened || !1), a = s(null), r = s(null), d = s(0), v = () => t.value = !t.value, m = () => {
-      n.isDisableClickOutside || (t.value = !1);
-    }, c = () => {
+  setup(i, { expose: v }) {
+    const n = i, t = s(n.isOpened || !1), a = s(null), r = s(null), d = s(0), m = () => t.value = !t.value, c = () => t.value = !1, g = () => {
+      n.isDisableClickOutside || c();
+    }, u = () => {
       const e = r.value;
       e && (d.value = e.clientHeight);
     };
-    return w(a, () => m()), h(() => c()), k(() => c()), C(
+    return H(a, () => g()), k(() => u()), C(() => u()), $(
       () => n.isOpened,
       (e) => {
         typeof e == "boolean" && (t.value = e);
       }
-    ), y({ isOpenedContents: t }), (e, z) => (u(), $("div", {
+    ), v({ isOpenedContents: t, close: c }), (e, A) => (p(), b("div", {
       ref_key: "root",
       ref: a,
       class: o({ [e.$style.opened]: t.value }),
-      style: p({ "--accordion-toggle-duration": `${n.duration}s` })
+      style: f({ "--accordion-toggle-duration": `${n.duration}s` })
     }, [
       l("button", {
         class: o(e.$style.trigger),
         disabled: i.isDisabled,
         "aria-expanded": t.value,
         type: "button",
-        onClick: b(v, ["prevent"])
+        onClick: B(m, ["prevent"])
       }, [
         l("div", {
           class: o(e.$style.trigger_content)
         }, [
-          f(e.$slots, "trigger")
+          y(e.$slots, "trigger")
         ], 2),
-        i.isHiddenArrow ? D("", !0) : (u(), B(O, {
+        i.isHiddenArrow ? O("", !0) : (p(), D(w, {
           key: 0,
           class: o(e.$style.icon)
         }, null, 8, ["class"]))
-      ], 10, H),
+      ], 10, S),
       l("div", {
-        style: p({ height: t.value ? `${d.value}px` : 0 }),
+        style: f({ height: t.value ? `${d.value}px` : 0 }),
         class: o(e.$style.contents),
         inert: !t.value || void 0
       }, [
@@ -55,12 +55,12 @@ const H = ["disabled", "aria-expanded"], S = ["inert"], N = /* @__PURE__ */ g({
           ref: r,
           class: o(e.$style.container)
         }, [
-          f(e.$slots, "default")
+          y(e.$slots, "default")
         ], 2)
-      ], 14, S)
+      ], 14, z)
     ], 6));
   }
 });
 export {
-  N as default
+  U as default
 };

package/dist/components/TextArea.vue2.js

@@ -1,8 +1,8 @@
-import { defineComponent as x, computed as y, ref as v, onMounted as V, watch as p, openBlock as b, createBlock as S, normalizeClass as w, withCtx as B, withDirectives as C, createElementVNode as k, vModelText as q, createVNode as D, nextTick as M } from "vue";
-import { isEmptyValue as R, validateInputValue as E } from "@geckou/ui-core";
-import H from "./InputBox.vue.js";
-import T from "./ErrorMessage.vue.js";
-const j = ["name", "required", "placeholder", "disabled", "autocomplete", "rows", "maxlength", "aria-invalid"], N = /* @__PURE__ */ x({
+import { defineComponent as y, computed as p, ref as g, onMounted as b, watch as V, openBlock as S, createBlock as B, normalizeClass as C, withCtx as w, withDirectives as k, createElementVNode as q, vModelText as D, createVNode as H, nextTick as M } from "vue";
+import { isEmptyValue as R, validateInputValue as T } from "@geckou/ui-core";
+import E from "./InputBox.vue.js";
+import j from "./ErrorMessage.vue.js";
+const A = ["name", "required", "placeholder", "disabled", "autocomplete", "rows", "maxlength", "aria-invalid"], N = /* @__PURE__ */ y({
   __name: "TextArea",
   props: {
     name: {},
@@ -19,39 +19,42 @@ const j = ["name", "required", "placeholder", "disabled", "autocomplete", "rows"
   },
   emits: ["update:modelValue"],
   setup(e, { emit: h }) {
-    const g = h, t = e, l = y({
-      get: () => t.modelValue ?? "",
-      set: (r) => g("update:modelValue", r)
-    }), o = v([]), a = v(null), u = () => {
-      o.value = E(l.value, {
-        isRequired: t.isRequired,
-        validates: t.validates
+    const v = h, a = e, d = p({
+      get: () => a.modelValue ?? "",
+      set: (l) => v("update:modelValue", l)
+    }), r = g([]), o = g(null), m = () => {
+      r.value = T(d.value, {
+        isRequired: a.isRequired,
+        validates: a.validates
       });
-    }, d = () => {
-      t.autoAdjustHeight && M(() => {
-        a.value && (a.value.style.height = "auto", a.value.style.height = `calc(${a.value.scrollHeight}px - 2rem)`);
+    }, x = (l) => {
+      const t = getComputedStyle(l), s = (...i) => i.reduce((u, n) => u + (parseFloat(n) || 0), 0);
+      return t.boxSizing === "border-box" ? l.scrollHeight + s(t.borderTopWidth, t.borderBottomWidth) : l.scrollHeight - s(t.paddingTop, t.paddingBottom);
+    }, c = () => {
+      a.autoAdjustHeight && M(() => {
+        o.value && (o.value.style.height = "auto", o.value.style.height = `${x(o.value)}px`);
       });
     };
-    return V(d), p(
-      l,
+    return b(c), V(
+      d,
       () => {
-        u(), d();
+        m(), c();
       },
       // 数値 0 も初期値として扱うため truthy 判定は使わない
-      { immediate: !R(t.modelValue), flush: "post" }
-    ), (r, s) => (b(), S(H, {
+      { immediate: !R(a.modelValue), flush: "post" }
+    ), (l, t) => (S(), B(E, {
       cssStyle: e.cssStyle,
-      class: w(r.$style.text_area),
-      isErrored: !!o.value.length,
+      class: C(l.$style.text_area),
+      isErrored: !!r.value.length,
       isDisabled: e.isDisabled
     }, {
-      default: B(() => {
-        var i, n, m, c;
+      default: w(() => {
+        var s, i, u, n;
         return [
-          C(k("textarea", {
+          k(q("textarea", {
             ref_key: "textareaRef",
-            ref: a,
-            "onUpdate:modelValue": s[0] || (s[0] = (f) => l.value = f),
+            ref: o,
+            "onUpdate:modelValue": t[0] || (t[0] = (f) => d.value = f),
             name: e.name,
             required: e.isRequired,
             placeholder: e.placeholder,
@@ -59,16 +62,16 @@ const j = ["name", "required", "placeholder", "disabled", "autocomplete", "rows"
             autocomplete: e.autocomplete,
             rows: e.rows,
             maxlength: e.maxLength,
-            "aria-invalid": o.value.length ? "true" : void 0,
-            onBlur: s[1] || (s[1] = (f) => u())
-          }, null, 40, j), [
-            [q, l.value]
+            "aria-invalid": r.value.length ? "true" : void 0,
+            onBlur: t[1] || (t[1] = (f) => m())
+          }, null, 40, A), [
+            [D, d.value]
           ]),
-          D(T, {
-            errorMessages: o.value,
+          H(j, {
+            errorMessages: r.value,
             cssStyle: {
-              textColor: (n = (i = e.cssStyle) == null ? void 0 : i.error) == null ? void 0 : n.backgroundColor,
-              backgroundColor: (c = (m = e.cssStyle) == null ? void 0 : m.error) == null ? void 0 : c.textColor
+              textColor: (i = (s = e.cssStyle) == null ? void 0 : s.error) == null ? void 0 : i.backgroundColor,
+              backgroundColor: (n = (u = e.cssStyle) == null ? void 0 : u.error) == null ? void 0 : n.textColor
             }
           }, null, 8, ["errorMessages", "cssStyle"])
         ];

package/dist/style.css

@@ -1 +1 @@
-:is(._input_box_4lok0_1){display:inline-flex;max-inline-size:100%;background-color:var(--background-color);box-shadow:var(--border-style),var(--box-shadow);border-radius:var(--radius-size);color:var(--text-color);position:relative}:is(._input_box_4lok0_1) input,:is(._input_box_4lok0_1) textarea,:is(._input_box_4lok0_1) select{inline-size:100%;padding:1rem;background-color:transparent;border:none;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}:is(._input_box_4lok0_1) *::placeholder{color:var(--placeholder-color);font-weight:400}:is(._input_box_4lok0_1) *:focus,:is(._input_box_4lok0_1) *:focus:not(:focus-visible){outline:none}:is(._input_box_4lok0_1):has(>*:disabled){pointer-events:none!important;position:relative}:is(._input_box_4lok0_1):has(>*:disabled):before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:all;cursor:not-allowed!important}:is(._error_messages_basoi_1){inline-size:max-content;display:flex;flex-direction:column;gap:.5rem;padding:.5rem .75rem;font-size:small;color:var(--error-text-color);background-color:var(--error-background-color);box-shadow:0 0 .5rem .25rem #3332;border-radius:.25rem;line-height:1;position:absolute;inset-block-start:calc(100% + .25rem)}:is(._error_messages_basoi_1):before{--tail-size: .85rem;content:"";display:block;background-color:var(--error-background-color);inline-size:var(--tail-size);block-size:calc(var(--tail-size) * .625);clip-path:polygon(50% 0%,100% 100%,0% 100%);position:absolute;bottom:calc(100% - 1px);inset-inline-start:.85rem}:is(._text_box_dqty_1){display:inline-flex}:is(._text_box_dqty_1)>input{flex:1 1 auto}:is(._text_area_1f3te_2){min-block-size:4em}:is(._button_pz98w_1){display:inline-flex;justify-content:center;align-items:center;inline-size:max-content;padding:1rem 2rem;background-color:var(--background-color);box-shadow:0 0 0 var(--border-size) var(--border-color) inset,var(--box-shadow);border:none;border-radius:var(--radius-size);color:var(--text-color);line-height:1;transition:all var(--duration);position:relative;cursor:pointer}@media (hover: hover){:is(._button_pz98w_1):where(:any-link,:enabled,summary):hover{background-color:var(--hover-background-color);box-shadow:0 0 0 var(--hover-border-size) var(--hover-border-color) inset,var(--hover-box-shadow);border-radius:var(--hover-radius-size);color:var(--hover-text-color)}}:is(._button_pz98w_1)._loading_pz98w_25,:is(._button_pz98w_1):disabled{pointer-events:none!important}:is(._button_pz98w_1)._loading_pz98w_25:before,:is(._button_pz98w_1):disabled:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:all;cursor:not-allowed!important}:is(._button_pz98w_1)._loading_pz98w_25>*:not(:is(._loading_animation_pz98w_35)){visibility:hidden}:is(._loading_animation_pz98w_35){max-block-size:calc(100% - 1.5rem);color:currentColor;fill:currentColor;position:absolute;margin:auto;top:0;right:0;bottom:0;left:0}:is(._loading_animation_pz98w_35) *{max-block-size:100%;color:currentColor;fill:currentColor}:is(._select_box_pnpdo_1){display:inline-flex}:is(._select_box_pnpdo_1)>select{flex:1 1 auto;padding-inline-end:2rem;cursor:pointer}:is(._arrow_container_pnpdo_10){display:flex;align-items:center;position:absolute;margin:auto;inset-inline-end:.5rem;inset-block:0;pointer-events:none}:is(._arrow_container_pnpdo_10)>*{color:currentColor;fill:currentColor;block-size:1rem}@keyframes _pop_1flnz_1{0%{scale:1}10%{scale:.8}50%{scale:1.1}to{scale:1}}:is(._check_box_1flnz_15){display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border:none;box-shadow:0 0 0 var(--border-size) var(--border-color) inset;border-radius:var(--radius-size);background-color:var(--background-color);cursor:pointer}:is(._check_box_1flnz_15):disabled{pointer-events:none!important;position:relative}:is(._check_box_1flnz_15):disabled:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:all;cursor:not-allowed!important}:is(._check_box_1flnz_15)[data-checked=true]{background-color:var(--border-color);animation:_pop_1flnz_1 var(--duration) ease-out}:is(._check_box_1flnz_15)[data-checked=true] :is(._check_container_1flnz_42){color:var(--background-color)}:is(._check_container_1flnz_42){display:flex;align-items:center;justify-content:center;width:1rem;height:1rem;color:var(--border-color)}:is(._check_container_1flnz_42)>*{color:currentColor;fill:currentColor}:is(._labeled_check_box_1y15f_1){display:inline-flex;align-items:center;gap:.5em;cursor:pointer}:is(._labeled_check_box_1y15f_1):has(button:disabled){cursor:auto}:is(._labeled_check_box_1y15f_1) ._label_1y15f_1{color:var(--checked-color)}:is(._labeled_check_box_1y15f_1):has(button[data-checked=true]) ._label_1y15f_1{color:var(--text-color)}._check_boxes_1cn70_1{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;position:relative}@keyframes _pop_7lw3v_1{0%{scale:1}10%{scale:.8}50%{scale:1.1}to{scale:1}}:is(._check_box_7lw3v_15){display:flex;position:relative;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;box-shadow:0 0 0 var(--border-size) var(--border-color) inset;border-radius:var(--radius-size);background-color:var(--background-color);cursor:pointer}:is(._check_box_7lw3v_15)>input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;white-space:nowrap;clip-path:inset(50%)}:is(._check_box_7lw3v_15):has(input:disabled){pointer-events:none!important}:is(._check_box_7lw3v_15):has(input:disabled):before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:all;cursor:not-allowed!important}:is(._check_box_7lw3v_15):has(input:checked){background-color:var(--border-color);animation:_pop_7lw3v_1 var(--duration) ease-out}:is(._check_box_7lw3v_15):has(input:checked) :is(._check_container_7lw3v_52){color:var(--background-color)}:is(._check_container_7lw3v_52){display:flex;align-items:center;justify-content:center;width:1rem;height:1rem;color:var(--border-color)}:is(._check_container_7lw3v_52)>*{color:currentColor;fill:currentColor}:is(._fieldset_1iro5_1){display:grid;gap:.5rem}:is(._fieldset_1iro5_1)>fieldset{display:contents}:is(._legend_1iro5_9){display:flex;align-items:center}:is(._input_1iro5_14)>*{inline-size:100%}@keyframes _pop_hh7eh_1{0%{scale:1}10%{scale:.8}50%{scale:1.2}to{scale:1}}:is(._radios_hh7eh_15){display:flex;align-items:center;flex-wrap:wrap;gap:1rem;position:relative}:is(._radio_hh7eh_15){display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.5rem;color:var(--border-color);cursor:pointer}:is(._radio_hh7eh_15):before{content:"";display:inline-block;aspect-ratio:1/1;width:1rem;box-shadow:0 0 0 1px var(--border-color) inset;background-color:var(--background-color);border-radius:50%;transition:all var(--duration) linear}:is(._radio_hh7eh_15):has(input:checked){color:var(--text-color)}:is(._radio_hh7eh_15):has(input:checked):before{box-shadow:0 0 0 2px var(--background-color) inset,0 0 0 1px var(--border-color);background-color:var(--border-color);animation:_pop_hh7eh_1 var(--duration) ease-out}:is(._radio_hh7eh_15):has(input:disabled){cursor:not-allowed!important}:is(._radio_hh7eh_15)>input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;white-space:nowrap;clip-path:inset(50%)}:is(._toggle_button_tkkkr_1){--handle-size: 1.5rem;--padding-size: calc(var(--border-size) + 2px);--duration: .15s;inline-size:calc(var(--inline-size) + var(--handle-size) + var(--padding-size) * 2);position:relative;display:inline-block;padding:var(--padding-size);background-color:var(--background-color);box-shadow:0 0 0 var(--border-size) var(--border-color) inset,var(--box-shadow);border:none;border-radius:var(--radius-size);cursor:pointer}:is(._text_tkkkr_16){position:absolute;inline-size:100%;block-size:100%;text-transform:uppercase;color:var(--text-color);top:0;left:0}:is(._text_tkkkr_16):before,:is(._text_tkkkr_16):after{display:inline-flex;justify-content:center;align-items:center;block-size:100%;inline-size:calc(100% - var(--handle-size) - var(--padding-size));margin:auto;line-height:1;position:absolute;transition:opacity var(--duration) ease-out}:is(._text_tkkkr_16):before{content:attr(data-off);right:0}:is(._text_tkkkr_16):after{content:attr(data-on);left:0;opacity:0}:is(._text_tkkkr_16)._on_tkkkr_45:before{opacity:0}:is(._text_tkkkr_16)._on_tkkkr_45:after{opacity:1}:is(._text_tkkkr_16)._on_tkkkr_45+._handle_tkkkr_51{left:calc(100% - var(--handle-size))}:is(._handle_tkkkr_51){inline-size:var(--handle-size);aspect-ratio:1/1;margin:0;background-color:var(--text-color);border-radius:calc(var(--radius-size) - var(--padding-size) / 2);box-shadow:var(--box-shadow);position:relative;left:0;transition:left var(--duration) ease-out}._input_group_7evrk_1{display:inline-flex;gap:1px}@container (width <= 576px){._input_group_7evrk_1{flex-wrap:wrap}}._input_group_7evrk_1>*{flex:1 1 auto;border-radius:0}._input_group_7evrk_1>*:first-child:not(:only-child){border-top-left-radius:var(--radius-small);border-bottom-left-radius:var(--radius-small)}._input_group_7evrk_1>*:last-child:not(:only-child){border-top-right-radius:var(--radius-small);border-bottom-right-radius:var(--radius-small)}._input_group_7evrk_1>button{flex:0 0 auto}._text_button_awtwg_1{padding:0;border:none;background-color:transparent;color:var(--text-button-color);font-size:inherit;line-height:1;cursor:pointer}._text_button_awtwg_1:hover:not(:disabled){text-decoration:underline}._text_button_awtwg_1:disabled{color:var(--disable-text-color);cursor:not-allowed}._unit_labels_1r4fv_1{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;white-space:nowrap;clip-path:inset(50%)}._icon_1r4fv_13{width:100%;height:100%;max-width:var(--medium-icon-size, 1.125rem);max-height:var(--medium-icon-size, 1.125rem);fill:var(--link-color);margin:auto;position:absolute;top:0;left:var(--sp-small);bottom:0}._date_input_1r4fv_26{flex:0 0 auto;position:relative}._date_input_1r4fv_26>input{width:calc(var(--icon-medium) + var(--sp-small) * 2);padding:var(--sp-medium) var(--sp-small)}._date_input_1r4fv_26>input[type=date],._date_input_1r4fv_26>input[type=month]{opacity:0}._date_input_1r4fv_26>input[type=date]::-webkit-calendar-picker-indicator,._date_input_1r4fv_26>input[type=month]::-webkit-calendar-picker-indicator{position:absolute;left:0;width:100%;height:100%;opacity:0;cursor:pointer}._date_picker_1r4fv_46{display:flex;align-items:center;width:100%;position:relative;line-height:1}._date_picker_1r4fv_46>input{padding:var(--sp-medium);width:calc(var(--sp-medium) * 2 + 3ch)}._date_picker_1r4fv_46>input._year_1r4fv_57{width:calc(var(--sp-medium) * 2 + 5ch)}._date_picker_1r4fv_46>input[type=text]{flex:0 0 auto}._date_picker_1r4fv_46._small_1r4fv_63 ._icon_1r4fv_13{width:100%;height:100%;max-width:var(--icon-small);max-height:var(--icon-small);fill:var(--link-color);left:var(--sp-small)}._date_picker_1r4fv_46._small_1r4fv_63 input{padding:var(--sp-min) var(--sp-small);font-size:var(--fs-small)}._date_range_picker_797j1_1{position:relative;display:flex;align-items:center;gap:var(--sp-small);flex-wrap:wrap}._range_797j1_9{flex:0 0 auto;color:var(--gray)}._unit_labels_pa04y_1{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;white-space:nowrap;clip-path:inset(50%)}._date_selector_pa04y_13{width:max-content;display:flex;align-items:center;position:relative}._date_selector_pa04y_13>*:not(:last-of-type):after{content:"/"}._selector_wrapper_pa04y_23{position:relative;width:max-content}._selector_wrapper_pa04y_23>svg{width:100%;height:100%;max-width:var(--medium-icon-size, 1.125rem);max-height:var(--medium-icon-size, 1.125rem);fill:var(--link-color);position:absolute;margin:auto;top:0;right:var(--sp-small);bottom:0;pointer-events:none}._selector_wrapper_pa04y_23:has(select:focus) svg{rotate:180deg}._selector_wrapper_pa04y_23>select{width:calc(3ch + var(--sp-medium) * 2 + var(--icon-medium));padding:var(--sp-medium);padding-inline-end:calc(var(--sp-small) * 2 + var(--icon-medium));cursor:pointer}._selector_wrapper_pa04y_23>select._year_pa04y_49{width:calc(5ch + var(--sp-medium) * 2 + var(--icon-medium))}._delete_button_pa04y_53{margin-inline:var(--sp-medium);font-size:var(--fs-small)}._drop_down_box_1azx1_1{position:relative}._button_1azx1_5{display:flex;align-items:center;inline-size:100%;block-size:100%;gap:var(--sp-small);color:var(--trigger-color)}._icon_1azx1_14{width:100%;height:100%;max-width:var(--icon-small);max-height:var(--icon-small);fill:var(--text-color);flex:0 0 auto;transition:all .1s}._icon_1azx1_14._open_1azx1_23{transform:rotate(180deg)}._contents_1azx1_27{border-radius:var(--radius-small);position:absolute;top:calc(100% - var(--sp-min));transition:block-size .1s;overflow:hidden;cursor:pointer}._contents_1azx1_27>div{max-block-size:calc(var(--bv) * 48);min-inline-size:calc(var(--bv) * 20);background-color:var(--white);overflow:auto}._container_1r8pd_1{display:flex;flex-direction:column;inline-size:100%;max-inline-size:var(--desktop-lower-width);max-block-size:100%;background-color:var(--white);border-radius:var(--radius-small);cursor:auto;filter:drop-shadow(0 0 6px var(--shadow-color, rgba(21, 20, 58, .12)));position:relative}._container_1r8pd_1._small_1r8pd_13{max-inline-size:var(--mobile-lower-width)}._container_1r8pd_1._large_1r8pd_16{max-inline-size:var(--contents-max-width, 1440px)}._header_1r8pd_20{padding:var(--sp-medium) var(--sp-large);border-block-end:1px solid var(--light-border-color)}._header_1r8pd_20>h2{font-size:var(--fs-large);font-weight:700}@container (width <= 576px){._header_1r8pd_20{padding:var(--sp-medium)}}._contents_1r8pd_34{flex:1 1 auto;overflow:auto;padding:var(--sp-large)}@container (width <= 576px){._contents_1r8pd_34{padding:var(--sp-medium)}}._footer_1r8pd_45{display:flex;justify-content:center;gap:var(--sp-large);padding:var(--sp-medium) var(--sp-large);border-block-start:1px solid var(--light-border-color)}@container (width <= 576px){._footer_1r8pd_45{gap:var(--sp-medium);padding:var(--sp-medium)}._footer_1r8pd_45>*{flex:1 1 auto}}._close_button_1r8pd_62{inline-size:var(--icon-medium);block-size:var(--icon-medium);color:var(--white);line-height:1;cursor:pointer;position:absolute;bottom:100%;left:100%}._close_button_1r8pd_62>*{width:100%;height:100%;max-width:var(--medium-icon-size, 1.125rem);max-height:var(--medium-icon-size, 1.125rem);fill:var(--text-color)}._overlay_1r8pd_80{display:flex;justify-content:center;align-items:center;inline-size:100dvw;block-size:100dvh;padding:var(--sp-larger);background:var(--overlay-color, rgba(0, 8, 26, .5));background-blend-mode:multiply;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;transition:opacity .1s linear;pointer-events:none;position:fixed;z-index:var(--z-index-overlay, 90);top:0;left:0;cursor:pointer;overflow:hidden}@container (width <= 576px){._overlay_1r8pd_80{padding-inline:var(--sp-large)}}._overlay_1r8pd_80._display_1r8pd_105{opacity:1;pointer-events:auto;z-index:calc(var(--z-index-nav, 70) + 1)}._x-left_b6rtz_1{left:max((100vw - var(--contents-max-width, 1440px)) / 2,var(--sp-medium))}._x-right_b6rtz_4{right:max((100vw - var(--contents-max-width, 1440px)) / 2,var(--sp-medium))}._x-center_b6rtz_7{top:0;right:0;bottom:0;left:0;margin:auto}._y-top_b6rtz_12{top:calc(var(--global-header-height, 0px) - var(--sp-small))}._y-bottom_b6rtz_15{bottom:var(--sp-medium)}._y-center_b6rtz_18{top:0;right:0;bottom:0;left:0;margin:auto}._popup_b6rtz_23{position:fixed;background-color:var(--white);border:1px solid var(--primary-color);padding:var(--sp-medium);border-radius:var(--radius-small);inline-size:max-content;max-inline-size:calc(var(--mobile-lower-width, 430px) / 2);block-size:max-content;opacity:0;transition:transform,opacity;transition-duration:var(--animation-duration, .3s);pointer-events:none;z-index:var(--z-index-overlay, 90)}._popup_b6rtz_23._show_b6rtz_38{opacity:1}@keyframes _overflow_1gj5s_1{0%{overflow:hidden}99%{overflow:hidden}to{overflow:visible}}._trigger_content_1gj5s_12{inline-size:100%;text-align:start}._trigger_1gj5s_12{display:grid;grid-template-columns:1fr auto;align-items:center;inline-size:100%;justify-items:start;cursor:pointer;position:relative;color:var(--link-color)}._icon_1gj5s_28{width:100%;height:100%;max-width:var(--medium-icon-size, 1.125rem);max-height:var(--medium-icon-size, 1.125rem);fill:var(--link-color);flex:0 0 auto;transition:all .1s}._contents_1gj5s_38{transition:height var(--accordion-toggle-duration);overflow:hidden}._opened_1gj5s_43 ._icon_1gj5s_28{transform:rotate(180deg)}._opened_1gj5s_43 ._contents_1gj5s_38{animation:_overflow_1gj5s_1 var(--accordion-toggle-duration);animation-fill-mode:forwards}._tabs_bthfs_1{display:flex;background-color:var(--background-color)}._tabs_bthfs_1>button[role=tab]{border:none;background-color:transparent;color:var(--text-color);font-size:1rem;padding:.5rem 1rem;cursor:pointer}._tabs_bthfs_1>button[role=tab]._active_bthfs_13{color:var(--active-color);cursor:auto}._container_15pug_1{position:relative;display:grid;width:100%;height:100%;background-color:var(--base-color);text-decoration:none}._no_image_3evh4_1{display:flex;justify-content:center;align-items:center;gap:var(--sp-small);width:100%;height:100%;background-color:var(--light-gray);font-size:large}._no_image_3evh4_1>svg{width:var(--sp-large);height:var(--sp-large);fill:var(--gray)}._no_image_3evh4_1>span{color:var(--gray)}._container_2ogwb_1{width:100%}@container (width <= 576px){._container_2ogwb_1{aspect-ratio:var(--mobile-aspect--ratio)}}@container (576px <= width){._container_2ogwb_1{aspect-ratio:var(--tablet-aspect--ratio)}}@container (992px <= width){._container_2ogwb_1{aspect-ratio:var(--desktop-aspect--ratio)}}._container_2ogwb_1>img{width:100%;height:100%;object-fit:cover}@container (width <= 576px){._container_2ogwb_1>img{aspect-ratio:var(--mobile-aspect--ratio)}}@container (576px <= width){._container_2ogwb_1>img{aspect-ratio:var(--tablet-aspect--ratio)}}@container (992px <= width){._container_2ogwb_1>img{aspect-ratio:var(--desktop-aspect--ratio)}}._author_info_c6l8f_1{display:inline-flex;flex-direction:var(--author-info-direction);align-items:center;word-wrap:normal;gap:var(--sp-small)}._author_info_c6l8f_1 ._thumbnail_c6l8f_8{width:var(--thumbnail-size);height:var(--thumbnail-size);object-fit:cover}._author_info_c6l8f_1 ._thumbnail_c6l8f_8._circle_c6l8f_13{border-radius:50%}._author_info_c6l8f_1>span{margin:0;padding:0;color:var(--author-name-color);font-size:var(--author-name-font-size);font-weight:var(--author-name-font-weight)}._author_info_c6l8f_1>span:before{content:attr(data-preposition);margin-inline-end:var(--sp-min)}._heading_wp258_1{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;block-size:max-content}._heading_wp258_1>h2{color:var(--heading-color);font-size:var(--heading-font-size);font-weight:var(--heading-font-weight);margin:0}._metadata_list_1aazi_1{--icon-color: var(--disable-text-color);display:flex;align-items:center;gap:var(--sp-small)}._icon_1aazi_8{flex:0 0 var(--icon-size);width:100%;height:100%;max-width:var(--icon-size);max-height:var(--icon-size);fill:var(--icon-color)}._list_1aazi_17{display:flex;flex-wrap:wrap;gap:var(--sp-small) var(--sp-medium)}._list_1aazi_17 ._list_item_1aazi_22{line-height:1;background-color:var(--label-background-color);padding:var(--label-padding);color:var(--label-color);font-size:var(--label-font-size);font-weight:var(--label-font-weight)}._list_1aazi_17 ._list_item_1aazi_22._rounded_1aazi_30{border-radius:calc(var(--bv) / 2)}._list_1aazi_17 ._list_item_1aazi_22._delimiter_1aazi_33:not(:last-child):after{content:attr(data-delimiter);margin-inline-start:var(--sp-medium)}._posted_date_108g0_1{display:inline-flex;align-items:flex-end;color:var(--date-color);font-size:var(--date-font-size);font-weight:var(--date-font-weight)}._excerpt_hmmtv_1{color:var(--excerpt-color);font-size:var(--excerpt-font-size)}._excerpt_hmmtv_1>*{display:-webkit-box;-webkit-line-clamp:var(--excerpt-row);-webkit-box-orient:vertical;overflow:hidden;margin:0}._excerpt_hmmtv_1>*:not(:first-child){display:none}._container_1g9t2_1{grid-template-columns:1fr 1fr;grid-template-rows:0 auto auto auto 1fr auto auto;grid-template-areas:"category category" "thumbnail thumbnail" "heading heading" "tag tag" "excerpt excerpt" "date author"}._container_1g9t2_1:hover ._thumbnail_1g9t2_6{opacity:.8}@container (576px <= width){._container_1g9t2_1._pickup_1g9t2_10{grid-template-rows:auto 0 1fr auto auto auto auto;aspect-ratio:2.85/1;position:relative}._container_1g9t2_1._pickup_1g9t2_10>*:not(._thumbnail_1g9t2_6):not(._category_1g9t2_15){position:relative;padding-inline:var(--sp-medium)}._container_1g9t2_1._pickup_1g9t2_10 ._date_1g9t2_19,._container_1g9t2_1._pickup_1g9t2_10 ._author_1g9t2_20{padding-block-end:var(--sp-medium)}._container_1g9t2_1._pickup_1g9t2_10 ._thumbnail_1g9t2_6{width:100%;position:absolute;top:0;left:0;margin:0}._container_1g9t2_1._pickup_1g9t2_10 ._thumbnail_1g9t2_6:after{content:"";display:block;width:100%;height:100%;position:absolute;top:0;left:0;mix-blend-mode:screen;background-image:linear-gradient(to bottom,#fff0 38%,#ffffffe6)}._container_1g9t2_1._pickup_1g9t2_10 ._heading_1g9t2_41{align-self:end;font-size:xx-large}}._thumbnail_1g9t2_6{margin-block-end:var(--sp-medium);transition:opacity var(--animation-duration)}._category_1g9t2_15{position:absolute;top:0;left:0}._heading_1g9t2_41{margin-block-end:var(--sp-min)}._excerpt_1g9t2_62{margin-block-start:var(--sp-medium)}._author_1g9t2_20{justify-content:flex-end}._date_1g9t2_19,._author_1g9t2_20{margin-block-start:var(--sp-medium)}._container_ouyg9_1{grid-template-columns:auto auto;grid-template-rows:auto auto auto auto auto 1fr;grid-template-areas:"thumbnail thumbnail" "date author" "heading heading" "category category" "tag tag" "excerpt excerpt";gap:var(--sp-small)}._container_ouyg9_1:hover ._thumbnail_ouyg9_7{opacity:.8}@container (576px <= width){._container_ouyg9_1._pickup_ouyg9_11{grid-template-columns:calc((100% - var(--sp-larger) * 2) / 3) auto auto;grid-template-rows:auto auto auto auto 1fr;grid-template-areas:"thumbnail date author" "thumbnail heading heading" "thumbnail category category" "thumbnail tag tag" "thumbnail excerpt excerpt";column-gap:var(--sp-larger)}._container_ouyg9_1._pickup_ouyg9_11 ._thumbnail_ouyg9_7{margin-inline-end:var(--sp-larger);margin-block-end:0}._container_ouyg9_1._pickup_ouyg9_11 ._heading_ouyg9_21{font-size:xx-large}}._date_ouyg9_26{align-items:center}._thumbnail_ouyg9_7{transition:opacity var(--animation-duration);margin-block-end:var(--sp-small)}._thumbnail_ouyg9_7>*{border-radius:var(--bv)}._heading_ouyg9_21{margin-block-end:var(--sp-small)}._wrapper_1gqog_1{display:block;width:100%;height:100%;position:relative;box-shadow:0 0 var(--sp-medium) 0 rgba(var(--black-rgb),.1)}._wrapper_1gqog_1:before,._wrapper_1gqog_1:after{content:"";display:block;background-color:var(--primary-color);position:absolute;transition:all var(--animation-duration);width:0;height:2px}._wrapper_1gqog_1:before{top:-2px;left:-2px}._wrapper_1gqog_1:after{bottom:-2px;right:-2px}._wrapper_1gqog_1:hover:before,._wrapper_1gqog_1:hover:after{width:calc(100% + 4px)}._wrapper_1gqog_1:hover ._container_1gqog_28:before,._wrapper_1gqog_1:hover ._container_1gqog_28:after{height:calc(100% + 4px)}._wrapper_1gqog_1:hover ._overlay_1gqog_31,._wrapper_1gqog_1:hover ._excerpt_1gqog_32{opacity:1}@container (576px <= width){._wrapper_1gqog_1._pickup_1gqog_36{aspect-ratio:21/9}._wrapper_1gqog_1._pickup_1gqog_36 ._container_1gqog_28{grid-template-rows:0 0 0 auto auto 1fr 0;grid-template-areas:"excerpt" "category" "thumbnail" "heading" "date" "tag" "author"}._wrapper_1gqog_1._pickup_1gqog_36 ._thumbnail_1gqog_43{opacity:.4;position:absolute;top:0;left:0}._wrapper_1gqog_1._pickup_1gqog_36 ._heading_1gqog_49,._wrapper_1gqog_1._pickup_1gqog_36 ._date_1gqog_50,._wrapper_1gqog_1._pickup_1gqog_36 ._tag_1gqog_51,._wrapper_1gqog_1._pickup_1gqog_36 ._author_1gqog_52,._wrapper_1gqog_1._pickup_1gqog_36 ._category_1gqog_53{position:relative;z-index:2}._wrapper_1gqog_1._pickup_1gqog_36 ._category_1gqog_53,._wrapper_1gqog_1._pickup_1gqog_36 ._author_1gqog_52{position:absolute}._wrapper_1gqog_1._pickup_1gqog_36 ._excerpt_1gqog_32{display:flex;align-items:flex-end;padding-block-end:var(--sp-large)}._wrapper_1gqog_1._pickup_1gqog_36 ._category_1gqog_53{top:0;left:0}._wrapper_1gqog_1._pickup_1gqog_36 ._author_1gqog_52{margin:0;bottom:var(--sp-large);right:var(--sp-large)}._wrapper_1gqog_1._pickup_1gqog_36 ._heading_1gqog_49{padding-block-start:var(--sp-large);font-size:xx-large}._wrapper_1gqog_1._pickup_1gqog_36 ._tag_1gqog_51{display:flex;align-items:flex-start;margin:0}}._container_1gqog_28{grid-template-columns:1fr;grid-template-rows:0 fit-content(55%) auto auto 1fr auto auto;grid-template-areas:"excerpt" "thumbnail" "date" "heading" "tag" "author" "category";text-align:center;position:relative;height:100%}._container_1gqog_28:before,._container_1gqog_28:after{content:"";display:block;background-color:var(--primary-color);position:absolute;transition:all var(--animation-duration);width:2px;height:0}._container_1gqog_28:before{bottom:-2px;left:-2px}._container_1gqog_28:after{top:-2px;right:-2px}._overlay_1gqog_31,._excerpt_1gqog_32{width:100%;max-height:100%;position:absolute;opacity:1;aspect-ratio:4/3}@container (992px <= width){._overlay_1gqog_31,._excerpt_1gqog_32{opacity:0}}._date_1gqog_50{display:flex;justify-content:center;margin-block:calc(var(--bv) * 2) var(--bv)}._heading_1gqog_49{padding:0 calc(var(--bv) * 2)}._excerpt_1gqog_32{display:flex;justify-content:center;align-items:center;height:100%;padding:0 calc(var(--bv) * 2);position:absolute;top:0}._author_1gqog_52{justify-content:center;margin-block:var(--sp-large)}._category_1gqog_53{display:flex;justify-content:center}._overlay_1gqog_31{background-image:linear-gradient(to bottom,rgb(var(--black-rgb),0),rgba(var(--black-rgb),.5) 66%,rgba(var(--black-rgb),.8));-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}._tag_1gqog_51{display:flex;align-items:center;justify-content:center;margin-block:var(--sp-medium)}._container_9fac4_1{grid-template-columns:auto 1fr;grid-template-rows:fit-content(55%) auto auto 1fr auto auto;grid-template-areas:"thumbnail thumbnail" "date category" "heading heading" "excerpt excerpt" "tag tag" "author author";box-shadow:0 0 1px rgba(var(--black-rgb),.4);height:100%;transition:box-shadow var(--animation-duration)}._container_9fac4_1:hover{box-shadow:0 0 var(--sp-medium) 2px rgba(var(--black-rgb),.2)}._container_9fac4_1:hover ._thumbnail_9fac4_12{opacity:.8}@container (576px <= width){._container_9fac4_1._pickup_9fac4_16{grid-template-rows:auto auto 1fr auto auto;grid-template-columns:fit-content(50%) auto 1fr;grid-template-areas:"thumbnail date category" "thumbnail heading heading" "thumbnail excerpt excerpt" "thumbnail tag tag" "thumbnail author author"}}@container (992px <= width){._container_9fac4_1._pickup_9fac4_16{grid-template-columns:calc(66.666% - 2 * var(--sp-small)) auto 1fr}}._thumbnail_9fac4_12{transition:opacity var(--animation-duration)}._heading_9fac4_32,._tag_9fac4_33,._excerpt_9fac4_34,._author_9fac4_35{margin-block:var(--sp-small);padding-inline:var(--sp-large)}._date_9fac4_40,._category_9fac4_41{padding:var(--sp-large);padding-bottom:0}._date_9fac4_40{padding-right:var(--sp-min)}._category_9fac4_41{padding-left:var(--sp-min)}._category_9fac4_41:before{content:"/";color:var(--gray);font-size:small}._author_9fac4_35{padding-bottom:var(--sp-large)}._container_96xud_1{grid-template-columns:auto 1fr;grid-template-rows:fit-content(62%) auto auto auto 1fr auto;grid-template-areas:"thumbnail thumbnail" "category tag" "heading heading" "excerpt excerpt" "author date";gap:var(--sp-small);height:100%}._container_96xud_1:hover ._thumbnail_96xud_8 img{filter:grayscale(20%)}@container (576px <= width){._container_96xud_1._pickup_96xud_12{grid-template-columns:1fr;grid-template-rows:0 1fr auto;grid-template-areas:"thumbnail" "heading" "date";gap:0;aspect-ratio:21/9}._container_96xud_1._pickup_96xud_12 ._thumbnail_96xud_8{position:absolute;top:0;left:0}._container_96xud_1._pickup_96xud_12 ._thumbnail_96xud_8:before{content:"";display:block;width:100%;height:100%;background-color:var(--gray);mix-blend-mode:multiply;position:absolute;top:0;left:0;z-index:1;transition:opacity var(--animation-duration);opacity:.3;pointer-events:none}._container_96xud_1._pickup_96xud_12:hover ._thumbnail_96xud_8:before{opacity:.1}._container_96xud_1._pickup_96xud_12 ._heading_96xud_42,._container_96xud_1._pickup_96xud_12 ._date_96xud_43{position:relative;z-index:2}._container_96xud_1._pickup_96xud_12 ._heading_96xud_42{display:flex;justify-content:flex-start;align-items:flex-end;margin-block-start:var(--sp-medium);margin-inline:var(--sp-large);font-size:xx-large}._container_96xud_1._pickup_96xud_12 ._date_96xud_43{display:flex;justify-content:flex-start;align-items:flex-end;margin-block:var(--sp-medium) var(--sp-large);margin-inline:var(--sp-large);font-size:medium;color:var(--text-color)}._container_96xud_1._pickup_96xud_12 ._excerpt_96xud_64,._container_96xud_1._pickup_96xud_12 ._category_96xud_65,._container_96xud_1._pickup_96xud_12 ._tag_96xud_66,._container_96xud_1._pickup_96xud_12 ._author_96xud_67{display:none}}._container_96xud_1 ._thumbnail_96xud_8 img{transition:filter var(--animation-duration);filter:grayscale(90%)}._container_96xud_1 ._tag_96xud_66{grid-column:1/3;margin-block-start:var(--sp-small)}._container_96xud_1 ._category_96xud_65{margin-block-start:var(--sp-small)}._container_96xud_1 ._category_96xud_65+._tag_96xud_66{grid-column:2/3}._container_96xud_1 ._category_96xud_65+._tag_96xud_66:before{content:"/";color:var(--gray);font-size:small}._container_96xud_1 ._heading_96xud_42{margin-block-start:var(--sp-small)}._container_96xud_1 ._excerpt_96xud_64{margin-block-end:var(--sp-small)}._container_96xud_1 ._date_96xud_43{justify-content:flex-end}._container_qon22_1{grid-template-columns:50% 1fr auto;grid-template-rows:auto auto auto 1fr auto;grid-template-areas:"category category category" "thumbnail date date" "thumbnail heading heading" "thumbnail excerpt excerpt" "thumbnail tag author";column-gap:var(--sp-large)}._container_qon22_1:before{content:"";display:block;width:calc(100% + var(--sp-medium));height:100%;background-color:var(--primary-color);mix-blend-mode:soft-light;position:absolute;top:var(--sp-small);left:calc(-1 * var(--sp-small));transition:opacity var(--animation-duration);opacity:0;pointer-events:none}._container_qon22_1:hover:before{opacity:.1}@container (width <= 576px){._container_qon22_1{grid-template-columns:1fr auto;grid-template-rows:auto auto auto auto 1fr auto;grid-template-areas:"category category" "thumbnail thumbnail" "date date" "heading heading" "excerpt excerpt" "tag author";column-gap:0}}@container (width <= 576px){._thumbnail_qon22_34{margin-block-end:var(--sp-small)}}@container (width <= 576px){._excerpt_qon22_40{margin-block-end:var(--sp-medium)}}._category_qon22_45{position:relative;top:var(--sp-small)}._heading_qon22_50{margin-block-end:var(--sp-medium)}._tag_qon22_54{padding-block:var(--sp-small)}._container_209hm_1{grid-template-columns:28% auto auto;grid-template-rows:auto auto 1fr auto;grid-template-areas:"thumbnail date category" "thumbnail heading heading" "thumbnail excerpt excerpt" "thumbnail tag author";row-gap:var(--sp-small);column-gap:var(--sp-large)}@container (width <= 576px){._container_209hm_1{grid-template-columns:33% auto auto;column-gap:var(--sp-medium)}}._container_209hm_1:hover ._thumbnail_209hm_14{opacity:.8}._thumbnail_209hm_14{transition:opacity var(--animation-duration)}._heading_209hm_22{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}@container (width <= 576px){._category_209hm_30 li,._tag_209hm_31 li{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}}._category_209hm_30{justify-content:flex-end}@container (width <= 576px){._excerpt_209hm_44>p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}}._author_209hm_52{justify-content:flex-end}._thumbnail_uuh1j_1{margin-top:calc(-1 * var(--bv) * 2);overflow:hidden}._thumbnail_uuh1j_1 img{transition:scale var(--animation-duration)}._date_uuh1j_9{display:flex;align-items:flex-start;justify-content:flex-end;gap:var(--sp-small);margin-inline-end:var(--sp-medium);position:relative;z-index:2}._year_uuh1j_19{margin-block-start:var(--sp-small)}._month_uuh1j_23,._day_uuh1j_24{line-height:1}._month_uuh1j_23{display:flex;align-items:center}._month_uuh1j_23:after{content:"";position:relative;margin-inline-start:var(--sp-small);display:block;width:1px;height:calc(1em - var(--sp-medium));background-color:var(--text-color)}._contents_uuh1j_42{display:flex;flex-grow:1;flex-direction:column;height:auto;margin:calc(-1 * var(--sp-large)) var(--sp-medium) 0;background-color:var(--white);position:relative;z-index:1}._category_uuh1j_53{padding:var(--sp-medium)}._heading_uuh1j_57{flex-grow:1;padding:0 var(--sp-medium)}._row_uuh1j_62{display:flex;gap:var(--bv);padding:var(--sp-medium);justify-content:flex-end}._author_uuh1j_69{margin-inline-start:auto}._excerpt_uuh1j_73{--line-height: 1.8;flex:0 0 auto;line-height:var(--line-height);height:calc(var(--line-height) * 3 * 1em + var(--sp-medium) * 2);padding:var(--sp-medium);border-block-start:1px solid var(--border-color)}._container_uuh1j_82{display:flex;flex-direction:column;width:100%;height:100%;position:relative}._container_uuh1j_82:hover ._thumbnail_uuh1j_1 img{scale:1.1}@container (576px <= width){._container_uuh1j_82._pickup_uuh1j_93{aspect-ratio:16/9;justify-content:center;align-items:flex-end}._container_uuh1j_82._pickup_uuh1j_93 ._thumbnail_uuh1j_1{margin:0;position:absolute;top:0;left:0}._container_uuh1j_82._pickup_uuh1j_93 ._contents_uuh1j_42{flex:0 0 auto;margin:0;margin-block-start:calc(-1 * var(--sp-medium));background-color:#ffffffb3}._container_uuh1j_82._pickup_uuh1j_93 ._heading_uuh1j_57>h2{font-size:xx-large}}@container (992px <= width){._container_uuh1j_82._pickup_uuh1j_93{aspect-ratio:21/9}}._container_1hse0_1{grid-template-columns:auto 1fr;grid-template-rows:0 auto 1fr auto auto fit-content(20%);grid-template-areas:"thumbnail thumbnail" "heading heading" "date author" "category category" "tag tag" "excerpt excerpt";position:relative;width:100%;aspect-ratio:4/3;overflow:hidden}._container_1hse0_1:hover:before{opacity:0}._container_1hse0_1:hover:after{opacity:1}._container_1hse0_1:hover ._thumbnail_1hse0_16 img{filter:blur(2px);scale:1.04}._container_1hse0_1:hover ._category_1hse0_20,._container_1hse0_1:hover ._tag_1hse0_21,._container_1hse0_1:hover ._excerpt_1hse0_22{opacity:1}._container_1hse0_1:before,._container_1hse0_1:after{content:"";display:block;width:100%;height:100%;aspect-ratio:4/3;mix-blend-mode:hard-light;position:absolute;top:0;left:0;transition:all var(--animation-duration);z-index:2}._container_1hse0_1:before{background-image:linear-gradient(to bottom,rgba(var(--black-rgb),.6),rgba(var(--black-rgb),0) 62%,rgba(var(--black-rgb),0));opacity:1}._container_1hse0_1:after{background-color:rgba(var(--black-rgb),.8);opacity:0}._container_1hse0_1>*:not(._thumbnail_1hse0_16){transition:opacity var(--animation-duration);position:relative;z-index:3;padding-inline:var(--sp-medium)}@container (576px <= width){._container_1hse0_1._pickup_1hse0_53{aspect-ratio:16/9}@container (992px <= width){._container_1hse0_1._pickup_1hse0_53{aspect-ratio:2.85/1}}._container_1hse0_1._pickup_1hse0_53>*:not(._thumbnail_1hse0_16){padding-left:var(--sp-large);padding-right:var(--sp-large)}._container_1hse0_1._pickup_1hse0_53:before{aspect-ratio:16/9}@container (992px <= width){._container_1hse0_1._pickup_1hse0_53:before{aspect-ratio:2.85/1}}._container_1hse0_1._pickup_1hse0_53 ._heading_1hse0_73{font-size:xx-large}._container_1hse0_1._pickup_1hse0_53 ._tag_1hse0_21{margin-block:var(--sp-medium) var(--sp-large)}._container_1hse0_1._pickup_1hse0_53 ._excerpt_1hse0_22{padding:var(--sp-large)}}._thumbnail_1hse0_16{position:absolute;top:0;left:0;transition:filter var(--animation-duration);z-index:1}._thumbnail_1hse0_16>img{transition:scale var(--animation-duration)}._category_1hse0_20,._tag_1hse0_21,._excerpt_1hse0_22{opacity:0}._heading_1hse0_73{margin-block:var(--sp-medium)}._date_1hse0_105,._author_1hse0_106{align-items:flex-start}._author_1hse0_106{padding-left:0}._category_1hse0_20,._tag_1hse0_21{margin-block-end:var(--sp-medium)}._excerpt_1hse0_22{padding-block:var(--sp-medium);border-block-start:1px solid var(--white)}._list_h2kvz_1{--list-gap: var(--sp-large);display:grid;grid-template-rows:1fr;gap:var(--list-gap);width:100%}@keyframes _fadeIn_h2kvz_1{0%{opacity:0}to{opacity:1}}@container (width <= 576px){._list_h2kvz_1{grid-template-columns:repeat(auto-fit,100%)}}@container (576px <= width){._list_h2kvz_1{grid-template-columns:repeat(auto-fit,calc((100% - var(--list-gap) * (var(--tablet-column-number) - 1)) / var(--tablet-column-number)))}}@container (992px <= width){._list_h2kvz_1{grid-template-columns:repeat(auto-fit,calc((100% - var(--list-gap) * (var(--column-number) - 1)) / var(--column-number)))}}._list_h2kvz_1>li{opacity:0;animation-name:_fadeIn_h2kvz_1;animation-duration:1s;animation-timing-function:ease-out;animation-fill-mode:forwards}@container (width <= 576px){._list_h2kvz_1._pickup_h2kvz_39>li:first-child{grid-column:1}}@container (576px <= width){._list_h2kvz_1._pickup_h2kvz_39>li:first-child{grid-column:span var(--tablet-column-number)}}@container (992px <= width){._list_h2kvz_1._pickup_h2kvz_39>li:first-child{grid-column:span var(--column-number)}}._container_28x0r_1{--date-size: calc(var(--bv) * 7);grid-template-columns:auto 1fr auto;grid-template-rows:fit-content(50%) auto 1fr auto auto;grid-template-areas:"thumbnail thumbnail thumbnail" "date heading heading" "excerpt excerpt excerpt" "category category author" "tag tag author";height:100%;box-shadow:0 0 1px rgba(var(--black-rgb),.4);transition:box-shadow var(--animation-duration) linear}._container_28x0r_1:hover{box-shadow:0 0 var(--sp-small) 2px rgba(var(--black-rgb),.2)}@container (576px <= width){._container_28x0r_1._horizontal_28x0r_14{grid-template-columns:fit-content(50%) auto 1fr auto;grid-template-rows:auto 1fr auto auto;grid-template-areas:"thumbnail date heading heading" "thumbnail excerpt excerpt excerpt" "thumbnail category category author" "thumbnail tag tag author"}._container_28x0r_1._pickup_28x0r_19{grid-template-columns:1fr;grid-template-rows:1fr 0 0;grid-template-areas:"thumbnail" "heading" "date";text-align:left}._container_28x0r_1._pickup_28x0r_19 ._thumbnail_28x0r_25{position:relative}._container_28x0r_1._pickup_28x0r_19 ._thumbnail_28x0r_25:before{content:"";display:block;width:100%;height:100%;background-color:rgba(var(--black-rgb),.6);mix-blend-mode:multiply;pointer-events:none;position:absolute;top:0;left:0;z-index:1;transition:all var(--animation-duration)}._container_28x0r_1._pickup_28x0r_19 ._heading_28x0r_42,._container_28x0r_1._pickup_28x0r_19 ._date_28x0r_43{position:absolute;z-index:2}._container_28x0r_1._pickup_28x0r_19 ._heading_28x0r_42{padding:0;padding-right:var(--sp-medium);left:calc(var(--date-size) + var(--sp-medium) * 2);bottom:var(--sp-medium)}._container_28x0r_1._pickup_28x0r_19 ._date_28x0r_43{margin:0;bottom:var(--sp-medium);left:var(--sp-medium)}._container_28x0r_1._pickup_28x0r_19 ._excerpt_28x0r_58,._container_28x0r_1._pickup_28x0r_19 ._category_28x0r_59,._container_28x0r_1._pickup_28x0r_19 ._tag_28x0r_60,._container_28x0r_1._pickup_28x0r_19 ._author_28x0r_61{display:none}}._date_28x0r_43{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--sp-min);width:var(--date-size);height:var(--date-size);margin:var(--sp-medium);background-color:var(--black)}._date_28x0r_43>*{letter-spacing:.1em;line-height:1}._heading_28x0r_42{display:flex;align-items:center;padding:var(--sp-medium);padding-inline-start:0}._heading_28x0r_42>h2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}._category_28x0r_59,._tag_28x0r_60{margin-inline-start:var(--sp-medium);padding-block-end:var(--sp-medium)}._category_28x0r_59{align-items:flex-end}._author_28x0r_61,._excerpt_28x0r_58{padding:var(--sp-medium)}._list_18syb_1{--list-gap: var(--sp-medium);display:grid;gap:var(--list-gap);grid-template-rows:1fr;width:100%;list-style:none;grid-auto-flow:dense}@keyframes _fadeIn_18syb_1{0%{opacity:0}to{opacity:1}}@container (width <= 576px){._list_18syb_1{display:flex;flex-direction:column;gap:var(--sp-large)}}@container (576px <= width){._list_18syb_1{grid-template-columns:repeat(auto-fit,calc((100% - var(--list-gap) * (var(--tablet-column-number) - 1)) / var(--tablet-column-number)))}}@container (992px <= width){._list_18syb_1{grid-template-columns:repeat(auto-fit,calc((100% - var(--list-gap) * (var(--column-number) - 1)) / var(--column-number)))}}._list_18syb_1>li{animation-name:_fadeIn_18syb_1;animation-duration:1s;animation-timing-function:ease-out;animation-fill-mode:backwards}
+:is(._input_box_4lok0_1){display:inline-flex;max-inline-size:100%;background-color:var(--background-color);box-shadow:var(--border-style),var(--box-shadow);border-radius:var(--radius-size);color:var(--text-color);position:relative}:is(._input_box_4lok0_1) input,:is(._input_box_4lok0_1) textarea,:is(._input_box_4lok0_1) select{inline-size:100%;padding:1rem;background-color:transparent;border:none;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}:is(._input_box_4lok0_1) *::placeholder{color:var(--placeholder-color);font-weight:400}:is(._input_box_4lok0_1) *:focus,:is(._input_box_4lok0_1) *:focus:not(:focus-visible){outline:none}:is(._input_box_4lok0_1):has(>*:disabled){pointer-events:none!important;position:relative}:is(._input_box_4lok0_1):has(>*:disabled):before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:all;cursor:not-allowed!important}:is(._error_messages_basoi_1){inline-size:max-content;display:flex;flex-direction:column;gap:.5rem;padding:.5rem .75rem;font-size:small;color:var(--error-text-color);background-color:var(--error-background-color);box-shadow:0 0 .5rem .25rem #3332;border-radius:.25rem;line-height:1;position:absolute;inset-block-start:calc(100% + .25rem)}:is(._error_messages_basoi_1):before{--tail-size: .85rem;content:"";display:block;background-color:var(--error-background-color);inline-size:var(--tail-size);block-size:calc(var(--tail-size) * .625);clip-path:polygon(50% 0%,100% 100%,0% 100%);position:absolute;bottom:calc(100% - 1px);inset-inline-start:.85rem}:is(._text_box_dqty_1){display:inline-flex}:is(._text_box_dqty_1)>input{flex:1 1 auto}:is(._text_area_1f3te_2){min-block-size:4em}:is(._button_pz98w_1){display:inline-flex;justify-content:center;align-items:center;inline-size:max-content;padding:1rem 2rem;background-color:var(--background-color);box-shadow:0 0 0 var(--border-size) var(--border-color) inset,var(--box-shadow);border:none;border-radius:var(--radius-size);color:var(--text-color);line-height:1;transition:all var(--duration);position:relative;cursor:pointer}@media (hover: hover){:is(._button_pz98w_1):where(:any-link,:enabled,summary):hover{background-color:var(--hover-background-color);box-shadow:0 0 0 var(--hover-border-size) var(--hover-border-color) inset,var(--hover-box-shadow);border-radius:var(--hover-radius-size);color:var(--hover-text-color)}}:is(._button_pz98w_1)._loading_pz98w_25,:is(._button_pz98w_1):disabled{pointer-events:none!important}:is(._button_pz98w_1)._loading_pz98w_25:before,:is(._button_pz98w_1):disabled:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:all;cursor:not-allowed!important}:is(._button_pz98w_1)._loading_pz98w_25>*:not(:is(._loading_animation_pz98w_35)){visibility:hidden}:is(._loading_animation_pz98w_35){max-block-size:calc(100% - 1.5rem);color:currentColor;fill:currentColor;position:absolute;margin:auto;top:0;right:0;bottom:0;left:0}:is(._loading_animation_pz98w_35) *{max-block-size:100%;color:currentColor;fill:currentColor}:is(._select_box_pnpdo_1){display:inline-flex}:is(._select_box_pnpdo_1)>select{flex:1 1 auto;padding-inline-end:2rem;cursor:pointer}:is(._arrow_container_pnpdo_10){display:flex;align-items:center;position:absolute;margin:auto;inset-inline-end:.5rem;inset-block:0;pointer-events:none}:is(._arrow_container_pnpdo_10)>*{color:currentColor;fill:currentColor;block-size:1rem}@keyframes _pop_1flnz_1{0%{scale:1}10%{scale:.8}50%{scale:1.1}to{scale:1}}:is(._check_box_1flnz_15){display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border:none;box-shadow:0 0 0 var(--border-size) var(--border-color) inset;border-radius:var(--radius-size);background-color:var(--background-color);cursor:pointer}:is(._check_box_1flnz_15):disabled{pointer-events:none!important;position:relative}:is(._check_box_1flnz_15):disabled:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:all;cursor:not-allowed!important}:is(._check_box_1flnz_15)[data-checked=true]{background-color:var(--border-color);animation:_pop_1flnz_1 var(--duration) ease-out}:is(._check_box_1flnz_15)[data-checked=true] :is(._check_container_1flnz_42){color:var(--background-color)}:is(._check_container_1flnz_42){display:flex;align-items:center;justify-content:center;width:1rem;height:1rem;color:var(--border-color)}:is(._check_container_1flnz_42)>*{color:currentColor;fill:currentColor}:is(._labeled_check_box_1y15f_1){display:inline-flex;align-items:center;gap:.5em;cursor:pointer}:is(._labeled_check_box_1y15f_1):has(button:disabled){cursor:auto}:is(._labeled_check_box_1y15f_1) ._label_1y15f_1{color:var(--checked-color)}:is(._labeled_check_box_1y15f_1):has(button[data-checked=true]) ._label_1y15f_1{color:var(--text-color)}._check_boxes_1cn70_1{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;position:relative}@keyframes _pop_7lw3v_1{0%{scale:1}10%{scale:.8}50%{scale:1.1}to{scale:1}}:is(._check_box_7lw3v_15){display:flex;position:relative;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;box-shadow:0 0 0 var(--border-size) var(--border-color) inset;border-radius:var(--radius-size);background-color:var(--background-color);cursor:pointer}:is(._check_box_7lw3v_15)>input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;white-space:nowrap;clip-path:inset(50%)}:is(._check_box_7lw3v_15):has(input:disabled){pointer-events:none!important}:is(._check_box_7lw3v_15):has(input:disabled):before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:all;cursor:not-allowed!important}:is(._check_box_7lw3v_15):has(input:checked){background-color:var(--border-color);animation:_pop_7lw3v_1 var(--duration) ease-out}:is(._check_box_7lw3v_15):has(input:checked) :is(._check_container_7lw3v_52){color:var(--background-color)}:is(._check_container_7lw3v_52){display:flex;align-items:center;justify-content:center;width:1rem;height:1rem;color:var(--border-color)}:is(._check_container_7lw3v_52)>*{color:currentColor;fill:currentColor}:is(._fieldset_1iro5_1){display:grid;gap:.5rem}:is(._fieldset_1iro5_1)>fieldset{display:contents}:is(._legend_1iro5_9){display:flex;align-items:center}:is(._input_1iro5_14)>*{inline-size:100%}@keyframes _pop_hh7eh_1{0%{scale:1}10%{scale:.8}50%{scale:1.2}to{scale:1}}:is(._radios_hh7eh_15){display:flex;align-items:center;flex-wrap:wrap;gap:1rem;position:relative}:is(._radio_hh7eh_15){display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.5rem;color:var(--border-color);cursor:pointer}:is(._radio_hh7eh_15):before{content:"";display:inline-block;aspect-ratio:1/1;width:1rem;box-shadow:0 0 0 1px var(--border-color) inset;background-color:var(--background-color);border-radius:50%;transition:all var(--duration) linear}:is(._radio_hh7eh_15):has(input:checked){color:var(--text-color)}:is(._radio_hh7eh_15):has(input:checked):before{box-shadow:0 0 0 2px var(--background-color) inset,0 0 0 1px var(--border-color);background-color:var(--border-color);animation:_pop_hh7eh_1 var(--duration) ease-out}:is(._radio_hh7eh_15):has(input:disabled){cursor:not-allowed!important}:is(._radio_hh7eh_15)>input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;white-space:nowrap;clip-path:inset(50%)}:is(._toggle_button_tkkkr_1){--handle-size: 1.5rem;--padding-size: calc(var(--border-size) + 2px);--duration: .15s;inline-size:calc(var(--inline-size) + var(--handle-size) + var(--padding-size) * 2);position:relative;display:inline-block;padding:var(--padding-size);background-color:var(--background-color);box-shadow:0 0 0 var(--border-size) var(--border-color) inset,var(--box-shadow);border:none;border-radius:var(--radius-size);cursor:pointer}:is(._text_tkkkr_16){position:absolute;inline-size:100%;block-size:100%;text-transform:uppercase;color:var(--text-color);top:0;left:0}:is(._text_tkkkr_16):before,:is(._text_tkkkr_16):after{display:inline-flex;justify-content:center;align-items:center;block-size:100%;inline-size:calc(100% - var(--handle-size) - var(--padding-size));margin:auto;line-height:1;position:absolute;transition:opacity var(--duration) ease-out}:is(._text_tkkkr_16):before{content:attr(data-off);right:0}:is(._text_tkkkr_16):after{content:attr(data-on);left:0;opacity:0}:is(._text_tkkkr_16)._on_tkkkr_45:before{opacity:0}:is(._text_tkkkr_16)._on_tkkkr_45:after{opacity:1}:is(._text_tkkkr_16)._on_tkkkr_45+._handle_tkkkr_51{left:calc(100% - var(--handle-size))}:is(._handle_tkkkr_51){inline-size:var(--handle-size);aspect-ratio:1/1;margin:0;background-color:var(--text-color);border-radius:calc(var(--radius-size) - var(--padding-size) / 2);box-shadow:var(--box-shadow);position:relative;left:0;transition:left var(--duration) ease-out}._input_group_7evrk_1{display:inline-flex;gap:1px}@container (width <= 576px){._input_group_7evrk_1{flex-wrap:wrap}}._input_group_7evrk_1>*{flex:1 1 auto;border-radius:0}._input_group_7evrk_1>*:first-child:not(:only-child){border-top-left-radius:var(--radius-small);border-bottom-left-radius:var(--radius-small)}._input_group_7evrk_1>*:last-child:not(:only-child){border-top-right-radius:var(--radius-small);border-bottom-right-radius:var(--radius-small)}._input_group_7evrk_1>button{flex:0 0 auto}._text_button_awtwg_1{padding:0;border:none;background-color:transparent;color:var(--text-button-color);font-size:inherit;line-height:1;cursor:pointer}._text_button_awtwg_1:hover:not(:disabled){text-decoration:underline}._text_button_awtwg_1:disabled{color:var(--disable-text-color);cursor:not-allowed}._unit_labels_19dtq_1{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;white-space:nowrap;clip-path:inset(50%)}._icon_19dtq_13{width:100%;height:100%;max-width:var(--medium-icon-size, 1.125rem);max-height:var(--medium-icon-size, 1.125rem);fill:var(--link-color);margin:auto;position:absolute;top:0;left:var(--sp-small);bottom:0}._date_input_19dtq_26{flex:0 0 auto;position:relative;border-radius:var(--radius-small)}._date_input_19dtq_26:has(input:focus-visible){outline:2px solid var(--link-color);outline-offset:2px}._date_input_19dtq_26>input{width:calc(var(--icon-medium) + var(--sp-small) * 2);padding:var(--sp-medium) var(--sp-small)}._date_input_19dtq_26>input[type=date],._date_input_19dtq_26>input[type=month]{opacity:0}._date_input_19dtq_26>input[type=date]::-webkit-calendar-picker-indicator,._date_input_19dtq_26>input[type=month]::-webkit-calendar-picker-indicator{position:absolute;left:0;width:100%;height:100%;opacity:0;cursor:pointer}._date_picker_19dtq_51{display:flex;align-items:center;width:100%;position:relative;line-height:1}._date_picker_19dtq_51>input{padding:var(--sp-medium);width:calc(var(--sp-medium) * 2 + 3ch)}._date_picker_19dtq_51>input._year_19dtq_62{width:calc(var(--sp-medium) * 2 + 5ch)}._date_picker_19dtq_51>input[type=text]{flex:0 0 auto}._date_picker_19dtq_51._small_19dtq_68 ._icon_19dtq_13{width:100%;height:100%;max-width:var(--icon-small);max-height:var(--icon-small);fill:var(--link-color);left:var(--sp-small)}._date_picker_19dtq_51._small_19dtq_68 input{padding:var(--sp-min) var(--sp-small);font-size:var(--fs-small)}._date_range_picker_797j1_1{position:relative;display:flex;align-items:center;gap:var(--sp-small);flex-wrap:wrap}._range_797j1_9{flex:0 0 auto;color:var(--gray)}._unit_labels_pa04y_1{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;white-space:nowrap;clip-path:inset(50%)}._date_selector_pa04y_13{width:max-content;display:flex;align-items:center;position:relative}._date_selector_pa04y_13>*:not(:last-of-type):after{content:"/"}._selector_wrapper_pa04y_23{position:relative;width:max-content}._selector_wrapper_pa04y_23>svg{width:100%;height:100%;max-width:var(--medium-icon-size, 1.125rem);max-height:var(--medium-icon-size, 1.125rem);fill:var(--link-color);position:absolute;margin:auto;top:0;right:var(--sp-small);bottom:0;pointer-events:none}._selector_wrapper_pa04y_23:has(select:focus) svg{rotate:180deg}._selector_wrapper_pa04y_23>select{width:calc(3ch + var(--sp-medium) * 2 + var(--icon-medium));padding:var(--sp-medium);padding-inline-end:calc(var(--sp-small) * 2 + var(--icon-medium));cursor:pointer}._selector_wrapper_pa04y_23>select._year_pa04y_49{width:calc(5ch + var(--sp-medium) * 2 + var(--icon-medium))}._delete_button_pa04y_53{margin-inline:var(--sp-medium);font-size:var(--fs-small)}._drop_down_box_1azx1_1{position:relative}._button_1azx1_5{display:flex;align-items:center;inline-size:100%;block-size:100%;gap:var(--sp-small);color:var(--trigger-color)}._icon_1azx1_14{width:100%;height:100%;max-width:var(--icon-small);max-height:var(--icon-small);fill:var(--text-color);flex:0 0 auto;transition:all .1s}._icon_1azx1_14._open_1azx1_23{transform:rotate(180deg)}._contents_1azx1_27{border-radius:var(--radius-small);position:absolute;top:calc(100% - var(--sp-min));transition:block-size .1s;overflow:hidden;cursor:pointer}._contents_1azx1_27>div{max-block-size:calc(var(--bv) * 48);min-inline-size:calc(var(--bv) * 20);background-color:var(--white);overflow:auto}._container_1r8pd_1{display:flex;flex-direction:column;inline-size:100%;max-inline-size:var(--desktop-lower-width);max-block-size:100%;background-color:var(--white);border-radius:var(--radius-small);cursor:auto;filter:drop-shadow(0 0 6px var(--shadow-color, rgba(21, 20, 58, .12)));position:relative}._container_1r8pd_1._small_1r8pd_13{max-inline-size:var(--mobile-lower-width)}._container_1r8pd_1._large_1r8pd_16{max-inline-size:var(--contents-max-width, 1440px)}._header_1r8pd_20{padding:var(--sp-medium) var(--sp-large);border-block-end:1px solid var(--light-border-color)}._header_1r8pd_20>h2{font-size:var(--fs-large);font-weight:700}@container (width <= 576px){._header_1r8pd_20{padding:var(--sp-medium)}}._contents_1r8pd_34{flex:1 1 auto;overflow:auto;padding:var(--sp-large)}@container (width <= 576px){._contents_1r8pd_34{padding:var(--sp-medium)}}._footer_1r8pd_45{display:flex;justify-content:center;gap:var(--sp-large);padding:var(--sp-medium) var(--sp-large);border-block-start:1px solid var(--light-border-color)}@container (width <= 576px){._footer_1r8pd_45{gap:var(--sp-medium);padding:var(--sp-medium)}._footer_1r8pd_45>*{flex:1 1 auto}}._close_button_1r8pd_62{inline-size:var(--icon-medium);block-size:var(--icon-medium);color:var(--white);line-height:1;cursor:pointer;position:absolute;bottom:100%;left:100%}._close_button_1r8pd_62>*{width:100%;height:100%;max-width:var(--medium-icon-size, 1.125rem);max-height:var(--medium-icon-size, 1.125rem);fill:var(--text-color)}._overlay_1r8pd_80{display:flex;justify-content:center;align-items:center;inline-size:100dvw;block-size:100dvh;padding:var(--sp-larger);background:var(--overlay-color, rgba(0, 8, 26, .5));background-blend-mode:multiply;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;transition:opacity .1s linear;pointer-events:none;position:fixed;z-index:var(--z-index-overlay, 90);top:0;left:0;cursor:pointer;overflow:hidden}@container (width <= 576px){._overlay_1r8pd_80{padding-inline:var(--sp-large)}}._overlay_1r8pd_80._display_1r8pd_105{opacity:1;pointer-events:auto;z-index:calc(var(--z-index-nav, 70) + 1)}._x-left_b6rtz_1{left:max((100vw - var(--contents-max-width, 1440px)) / 2,var(--sp-medium))}._x-right_b6rtz_4{right:max((100vw - var(--contents-max-width, 1440px)) / 2,var(--sp-medium))}._x-center_b6rtz_7{top:0;right:0;bottom:0;left:0;margin:auto}._y-top_b6rtz_12{top:calc(var(--global-header-height, 0px) - var(--sp-small))}._y-bottom_b6rtz_15{bottom:var(--sp-medium)}._y-center_b6rtz_18{top:0;right:0;bottom:0;left:0;margin:auto}._popup_b6rtz_23{position:fixed;background-color:var(--white);border:1px solid var(--primary-color);padding:var(--sp-medium);border-radius:var(--radius-small);inline-size:max-content;max-inline-size:calc(var(--mobile-lower-width, 430px) / 2);block-size:max-content;opacity:0;transition:transform,opacity;transition-duration:var(--animation-duration, .3s);pointer-events:none;z-index:var(--z-index-overlay, 90)}._popup_b6rtz_23._show_b6rtz_38{opacity:1}@keyframes _overflow_1gj5s_1{0%{overflow:hidden}99%{overflow:hidden}to{overflow:visible}}._trigger_content_1gj5s_12{inline-size:100%;text-align:start}._trigger_1gj5s_12{display:grid;grid-template-columns:1fr auto;align-items:center;inline-size:100%;justify-items:start;cursor:pointer;position:relative;color:var(--link-color)}._icon_1gj5s_28{width:100%;height:100%;max-width:var(--medium-icon-size, 1.125rem);max-height:var(--medium-icon-size, 1.125rem);fill:var(--link-color);flex:0 0 auto;transition:all .1s}._contents_1gj5s_38{transition:height var(--accordion-toggle-duration);overflow:hidden}._opened_1gj5s_43 ._icon_1gj5s_28{transform:rotate(180deg)}._opened_1gj5s_43 ._contents_1gj5s_38{animation:_overflow_1gj5s_1 var(--accordion-toggle-duration);animation-fill-mode:forwards}._tabs_bthfs_1{display:flex;background-color:var(--background-color)}._tabs_bthfs_1>button[role=tab]{border:none;background-color:transparent;color:var(--text-color);font-size:1rem;padding:.5rem 1rem;cursor:pointer}._tabs_bthfs_1>button[role=tab]._active_bthfs_13{color:var(--active-color);cursor:auto}._container_15pug_1{position:relative;display:grid;width:100%;height:100%;background-color:var(--base-color);text-decoration:none}._no_image_3evh4_1{display:flex;justify-content:center;align-items:center;gap:var(--sp-small);width:100%;height:100%;background-color:var(--light-gray);font-size:large}._no_image_3evh4_1>svg{width:var(--sp-large);height:var(--sp-large);fill:var(--gray)}._no_image_3evh4_1>span{color:var(--gray)}._container_2ogwb_1{width:100%}@container (width <= 576px){._container_2ogwb_1{aspect-ratio:var(--mobile-aspect--ratio)}}@container (576px <= width){._container_2ogwb_1{aspect-ratio:var(--tablet-aspect--ratio)}}@container (992px <= width){._container_2ogwb_1{aspect-ratio:var(--desktop-aspect--ratio)}}._container_2ogwb_1>img{width:100%;height:100%;object-fit:cover}@container (width <= 576px){._container_2ogwb_1>img{aspect-ratio:var(--mobile-aspect--ratio)}}@container (576px <= width){._container_2ogwb_1>img{aspect-ratio:var(--tablet-aspect--ratio)}}@container (992px <= width){._container_2ogwb_1>img{aspect-ratio:var(--desktop-aspect--ratio)}}._author_info_c6l8f_1{display:inline-flex;flex-direction:var(--author-info-direction);align-items:center;word-wrap:normal;gap:var(--sp-small)}._author_info_c6l8f_1 ._thumbnail_c6l8f_8{width:var(--thumbnail-size);height:var(--thumbnail-size);object-fit:cover}._author_info_c6l8f_1 ._thumbnail_c6l8f_8._circle_c6l8f_13{border-radius:50%}._author_info_c6l8f_1>span{margin:0;padding:0;color:var(--author-name-color);font-size:var(--author-name-font-size);font-weight:var(--author-name-font-weight)}._author_info_c6l8f_1>span:before{content:attr(data-preposition);margin-inline-end:var(--sp-min)}._heading_wp258_1{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;block-size:max-content}._heading_wp258_1>h2{color:var(--heading-color);font-size:var(--heading-font-size);font-weight:var(--heading-font-weight);margin:0}._metadata_list_1aazi_1{--icon-color: var(--disable-text-color);display:flex;align-items:center;gap:var(--sp-small)}._icon_1aazi_8{flex:0 0 var(--icon-size);width:100%;height:100%;max-width:var(--icon-size);max-height:var(--icon-size);fill:var(--icon-color)}._list_1aazi_17{display:flex;flex-wrap:wrap;gap:var(--sp-small) var(--sp-medium)}._list_1aazi_17 ._list_item_1aazi_22{line-height:1;background-color:var(--label-background-color);padding:var(--label-padding);color:var(--label-color);font-size:var(--label-font-size);font-weight:var(--label-font-weight)}._list_1aazi_17 ._list_item_1aazi_22._rounded_1aazi_30{border-radius:calc(var(--bv) / 2)}._list_1aazi_17 ._list_item_1aazi_22._delimiter_1aazi_33:not(:last-child):after{content:attr(data-delimiter);margin-inline-start:var(--sp-medium)}._posted_date_108g0_1{display:inline-flex;align-items:flex-end;color:var(--date-color);font-size:var(--date-font-size);font-weight:var(--date-font-weight)}._excerpt_hmmtv_1{color:var(--excerpt-color);font-size:var(--excerpt-font-size)}._excerpt_hmmtv_1>*{display:-webkit-box;-webkit-line-clamp:var(--excerpt-row);-webkit-box-orient:vertical;overflow:hidden;margin:0}._excerpt_hmmtv_1>*:not(:first-child){display:none}._container_1g9t2_1{grid-template-columns:1fr 1fr;grid-template-rows:0 auto auto auto 1fr auto auto;grid-template-areas:"category category" "thumbnail thumbnail" "heading heading" "tag tag" "excerpt excerpt" "date author"}._container_1g9t2_1:hover ._thumbnail_1g9t2_6{opacity:.8}@container (576px <= width){._container_1g9t2_1._pickup_1g9t2_10{grid-template-rows:auto 0 1fr auto auto auto auto;aspect-ratio:2.85/1;position:relative}._container_1g9t2_1._pickup_1g9t2_10>*:not(._thumbnail_1g9t2_6):not(._category_1g9t2_15){position:relative;padding-inline:var(--sp-medium)}._container_1g9t2_1._pickup_1g9t2_10 ._date_1g9t2_19,._container_1g9t2_1._pickup_1g9t2_10 ._author_1g9t2_20{padding-block-end:var(--sp-medium)}._container_1g9t2_1._pickup_1g9t2_10 ._thumbnail_1g9t2_6{width:100%;position:absolute;top:0;left:0;margin:0}._container_1g9t2_1._pickup_1g9t2_10 ._thumbnail_1g9t2_6:after{content:"";display:block;width:100%;height:100%;position:absolute;top:0;left:0;mix-blend-mode:screen;background-image:linear-gradient(to bottom,#fff0 38%,#ffffffe6)}._container_1g9t2_1._pickup_1g9t2_10 ._heading_1g9t2_41{align-self:end;font-size:xx-large}}._thumbnail_1g9t2_6{margin-block-end:var(--sp-medium);transition:opacity var(--animation-duration)}._category_1g9t2_15{position:absolute;top:0;left:0}._heading_1g9t2_41{margin-block-end:var(--sp-min)}._excerpt_1g9t2_62{margin-block-start:var(--sp-medium)}._author_1g9t2_20{justify-content:flex-end}._date_1g9t2_19,._author_1g9t2_20{margin-block-start:var(--sp-medium)}._container_ouyg9_1{grid-template-columns:auto auto;grid-template-rows:auto auto auto auto auto 1fr;grid-template-areas:"thumbnail thumbnail" "date author" "heading heading" "category category" "tag tag" "excerpt excerpt";gap:var(--sp-small)}._container_ouyg9_1:hover ._thumbnail_ouyg9_7{opacity:.8}@container (576px <= width){._container_ouyg9_1._pickup_ouyg9_11{grid-template-columns:calc((100% - var(--sp-larger) * 2) / 3) auto auto;grid-template-rows:auto auto auto auto 1fr;grid-template-areas:"thumbnail date author" "thumbnail heading heading" "thumbnail category category" "thumbnail tag tag" "thumbnail excerpt excerpt";column-gap:var(--sp-larger)}._container_ouyg9_1._pickup_ouyg9_11 ._thumbnail_ouyg9_7{margin-inline-end:var(--sp-larger);margin-block-end:0}._container_ouyg9_1._pickup_ouyg9_11 ._heading_ouyg9_21{font-size:xx-large}}._date_ouyg9_26{align-items:center}._thumbnail_ouyg9_7{transition:opacity var(--animation-duration);margin-block-end:var(--sp-small)}._thumbnail_ouyg9_7>*{border-radius:var(--bv)}._heading_ouyg9_21{margin-block-end:var(--sp-small)}._wrapper_1gqog_1{display:block;width:100%;height:100%;position:relative;box-shadow:0 0 var(--sp-medium) 0 rgba(var(--black-rgb),.1)}._wrapper_1gqog_1:before,._wrapper_1gqog_1:after{content:"";display:block;background-color:var(--primary-color);position:absolute;transition:all var(--animation-duration);width:0;height:2px}._wrapper_1gqog_1:before{top:-2px;left:-2px}._wrapper_1gqog_1:after{bottom:-2px;right:-2px}._wrapper_1gqog_1:hover:before,._wrapper_1gqog_1:hover:after{width:calc(100% + 4px)}._wrapper_1gqog_1:hover ._container_1gqog_28:before,._wrapper_1gqog_1:hover ._container_1gqog_28:after{height:calc(100% + 4px)}._wrapper_1gqog_1:hover ._overlay_1gqog_31,._wrapper_1gqog_1:hover ._excerpt_1gqog_32{opacity:1}@container (576px <= width){._wrapper_1gqog_1._pickup_1gqog_36{aspect-ratio:21/9}._wrapper_1gqog_1._pickup_1gqog_36 ._container_1gqog_28{grid-template-rows:0 0 0 auto auto 1fr 0;grid-template-areas:"excerpt" "category" "thumbnail" "heading" "date" "tag" "author"}._wrapper_1gqog_1._pickup_1gqog_36 ._thumbnail_1gqog_43{opacity:.4;position:absolute;top:0;left:0}._wrapper_1gqog_1._pickup_1gqog_36 ._heading_1gqog_49,._wrapper_1gqog_1._pickup_1gqog_36 ._date_1gqog_50,._wrapper_1gqog_1._pickup_1gqog_36 ._tag_1gqog_51,._wrapper_1gqog_1._pickup_1gqog_36 ._author_1gqog_52,._wrapper_1gqog_1._pickup_1gqog_36 ._category_1gqog_53{position:relative;z-index:2}._wrapper_1gqog_1._pickup_1gqog_36 ._category_1gqog_53,._wrapper_1gqog_1._pickup_1gqog_36 ._author_1gqog_52{position:absolute}._wrapper_1gqog_1._pickup_1gqog_36 ._excerpt_1gqog_32{display:flex;align-items:flex-end;padding-block-end:var(--sp-large)}._wrapper_1gqog_1._pickup_1gqog_36 ._category_1gqog_53{top:0;left:0}._wrapper_1gqog_1._pickup_1gqog_36 ._author_1gqog_52{margin:0;bottom:var(--sp-large);right:var(--sp-large)}._wrapper_1gqog_1._pickup_1gqog_36 ._heading_1gqog_49{padding-block-start:var(--sp-large);font-size:xx-large}._wrapper_1gqog_1._pickup_1gqog_36 ._tag_1gqog_51{display:flex;align-items:flex-start;margin:0}}._container_1gqog_28{grid-template-columns:1fr;grid-template-rows:0 fit-content(55%) auto auto 1fr auto auto;grid-template-areas:"excerpt" "thumbnail" "date" "heading" "tag" "author" "category";text-align:center;position:relative;height:100%}._container_1gqog_28:before,._container_1gqog_28:after{content:"";display:block;background-color:var(--primary-color);position:absolute;transition:all var(--animation-duration);width:2px;height:0}._container_1gqog_28:before{bottom:-2px;left:-2px}._container_1gqog_28:after{top:-2px;right:-2px}._overlay_1gqog_31,._excerpt_1gqog_32{width:100%;max-height:100%;position:absolute;opacity:1;aspect-ratio:4/3}@container (992px <= width){._overlay_1gqog_31,._excerpt_1gqog_32{opacity:0}}._date_1gqog_50{display:flex;justify-content:center;margin-block:calc(var(--bv) * 2) var(--bv)}._heading_1gqog_49{padding:0 calc(var(--bv) * 2)}._excerpt_1gqog_32{display:flex;justify-content:center;align-items:center;height:100%;padding:0 calc(var(--bv) * 2);position:absolute;top:0}._author_1gqog_52{justify-content:center;margin-block:var(--sp-large)}._category_1gqog_53{display:flex;justify-content:center}._overlay_1gqog_31{background-image:linear-gradient(to bottom,rgb(var(--black-rgb),0),rgba(var(--black-rgb),.5) 66%,rgba(var(--black-rgb),.8));-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}._tag_1gqog_51{display:flex;align-items:center;justify-content:center;margin-block:var(--sp-medium)}._container_9fac4_1{grid-template-columns:auto 1fr;grid-template-rows:fit-content(55%) auto auto 1fr auto auto;grid-template-areas:"thumbnail thumbnail" "date category" "heading heading" "excerpt excerpt" "tag tag" "author author";box-shadow:0 0 1px rgba(var(--black-rgb),.4);height:100%;transition:box-shadow var(--animation-duration)}._container_9fac4_1:hover{box-shadow:0 0 var(--sp-medium) 2px rgba(var(--black-rgb),.2)}._container_9fac4_1:hover ._thumbnail_9fac4_12{opacity:.8}@container (576px <= width){._container_9fac4_1._pickup_9fac4_16{grid-template-rows:auto auto 1fr auto auto;grid-template-columns:fit-content(50%) auto 1fr;grid-template-areas:"thumbnail date category" "thumbnail heading heading" "thumbnail excerpt excerpt" "thumbnail tag tag" "thumbnail author author"}}@container (992px <= width){._container_9fac4_1._pickup_9fac4_16{grid-template-columns:calc(66.666% - 2 * var(--sp-small)) auto 1fr}}._thumbnail_9fac4_12{transition:opacity var(--animation-duration)}._heading_9fac4_32,._tag_9fac4_33,._excerpt_9fac4_34,._author_9fac4_35{margin-block:var(--sp-small);padding-inline:var(--sp-large)}._date_9fac4_40,._category_9fac4_41{padding:var(--sp-large);padding-bottom:0}._date_9fac4_40{padding-right:var(--sp-min)}._category_9fac4_41{padding-left:var(--sp-min)}._category_9fac4_41:before{content:"/";color:var(--gray);font-size:small}._author_9fac4_35{padding-bottom:var(--sp-large)}._container_96xud_1{grid-template-columns:auto 1fr;grid-template-rows:fit-content(62%) auto auto auto 1fr auto;grid-template-areas:"thumbnail thumbnail" "category tag" "heading heading" "excerpt excerpt" "author date";gap:var(--sp-small);height:100%}._container_96xud_1:hover ._thumbnail_96xud_8 img{filter:grayscale(20%)}@container (576px <= width){._container_96xud_1._pickup_96xud_12{grid-template-columns:1fr;grid-template-rows:0 1fr auto;grid-template-areas:"thumbnail" "heading" "date";gap:0;aspect-ratio:21/9}._container_96xud_1._pickup_96xud_12 ._thumbnail_96xud_8{position:absolute;top:0;left:0}._container_96xud_1._pickup_96xud_12 ._thumbnail_96xud_8:before{content:"";display:block;width:100%;height:100%;background-color:var(--gray);mix-blend-mode:multiply;position:absolute;top:0;left:0;z-index:1;transition:opacity var(--animation-duration);opacity:.3;pointer-events:none}._container_96xud_1._pickup_96xud_12:hover ._thumbnail_96xud_8:before{opacity:.1}._container_96xud_1._pickup_96xud_12 ._heading_96xud_42,._container_96xud_1._pickup_96xud_12 ._date_96xud_43{position:relative;z-index:2}._container_96xud_1._pickup_96xud_12 ._heading_96xud_42{display:flex;justify-content:flex-start;align-items:flex-end;margin-block-start:var(--sp-medium);margin-inline:var(--sp-large);font-size:xx-large}._container_96xud_1._pickup_96xud_12 ._date_96xud_43{display:flex;justify-content:flex-start;align-items:flex-end;margin-block:var(--sp-medium) var(--sp-large);margin-inline:var(--sp-large);font-size:medium;color:var(--text-color)}._container_96xud_1._pickup_96xud_12 ._excerpt_96xud_64,._container_96xud_1._pickup_96xud_12 ._category_96xud_65,._container_96xud_1._pickup_96xud_12 ._tag_96xud_66,._container_96xud_1._pickup_96xud_12 ._author_96xud_67{display:none}}._container_96xud_1 ._thumbnail_96xud_8 img{transition:filter var(--animation-duration);filter:grayscale(90%)}._container_96xud_1 ._tag_96xud_66{grid-column:1/3;margin-block-start:var(--sp-small)}._container_96xud_1 ._category_96xud_65{margin-block-start:var(--sp-small)}._container_96xud_1 ._category_96xud_65+._tag_96xud_66{grid-column:2/3}._container_96xud_1 ._category_96xud_65+._tag_96xud_66:before{content:"/";color:var(--gray);font-size:small}._container_96xud_1 ._heading_96xud_42{margin-block-start:var(--sp-small)}._container_96xud_1 ._excerpt_96xud_64{margin-block-end:var(--sp-small)}._container_96xud_1 ._date_96xud_43{justify-content:flex-end}._container_qon22_1{grid-template-columns:50% 1fr auto;grid-template-rows:auto auto auto 1fr auto;grid-template-areas:"category category category" "thumbnail date date" "thumbnail heading heading" "thumbnail excerpt excerpt" "thumbnail tag author";column-gap:var(--sp-large)}._container_qon22_1:before{content:"";display:block;width:calc(100% + var(--sp-medium));height:100%;background-color:var(--primary-color);mix-blend-mode:soft-light;position:absolute;top:var(--sp-small);left:calc(-1 * var(--sp-small));transition:opacity var(--animation-duration);opacity:0;pointer-events:none}._container_qon22_1:hover:before{opacity:.1}@container (width <= 576px){._container_qon22_1{grid-template-columns:1fr auto;grid-template-rows:auto auto auto auto 1fr auto;grid-template-areas:"category category" "thumbnail thumbnail" "date date" "heading heading" "excerpt excerpt" "tag author";column-gap:0}}@container (width <= 576px){._thumbnail_qon22_34{margin-block-end:var(--sp-small)}}@container (width <= 576px){._excerpt_qon22_40{margin-block-end:var(--sp-medium)}}._category_qon22_45{position:relative;top:var(--sp-small)}._heading_qon22_50{margin-block-end:var(--sp-medium)}._tag_qon22_54{padding-block:var(--sp-small)}._container_209hm_1{grid-template-columns:28% auto auto;grid-template-rows:auto auto 1fr auto;grid-template-areas:"thumbnail date category" "thumbnail heading heading" "thumbnail excerpt excerpt" "thumbnail tag author";row-gap:var(--sp-small);column-gap:var(--sp-large)}@container (width <= 576px){._container_209hm_1{grid-template-columns:33% auto auto;column-gap:var(--sp-medium)}}._container_209hm_1:hover ._thumbnail_209hm_14{opacity:.8}._thumbnail_209hm_14{transition:opacity var(--animation-duration)}._heading_209hm_22{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}@container (width <= 576px){._category_209hm_30 li,._tag_209hm_31 li{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}}._category_209hm_30{justify-content:flex-end}@container (width <= 576px){._excerpt_209hm_44>p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}}._author_209hm_52{justify-content:flex-end}._thumbnail_uuh1j_1{margin-top:calc(-1 * var(--bv) * 2);overflow:hidden}._thumbnail_uuh1j_1 img{transition:scale var(--animation-duration)}._date_uuh1j_9{display:flex;align-items:flex-start;justify-content:flex-end;gap:var(--sp-small);margin-inline-end:var(--sp-medium);position:relative;z-index:2}._year_uuh1j_19{margin-block-start:var(--sp-small)}._month_uuh1j_23,._day_uuh1j_24{line-height:1}._month_uuh1j_23{display:flex;align-items:center}._month_uuh1j_23:after{content:"";position:relative;margin-inline-start:var(--sp-small);display:block;width:1px;height:calc(1em - var(--sp-medium));background-color:var(--text-color)}._contents_uuh1j_42{display:flex;flex-grow:1;flex-direction:column;height:auto;margin:calc(-1 * var(--sp-large)) var(--sp-medium) 0;background-color:var(--white);position:relative;z-index:1}._category_uuh1j_53{padding:var(--sp-medium)}._heading_uuh1j_57{flex-grow:1;padding:0 var(--sp-medium)}._row_uuh1j_62{display:flex;gap:var(--bv);padding:var(--sp-medium);justify-content:flex-end}._author_uuh1j_69{margin-inline-start:auto}._excerpt_uuh1j_73{--line-height: 1.8;flex:0 0 auto;line-height:var(--line-height);height:calc(var(--line-height) * 3 * 1em + var(--sp-medium) * 2);padding:var(--sp-medium);border-block-start:1px solid var(--border-color)}._container_uuh1j_82{display:flex;flex-direction:column;width:100%;height:100%;position:relative}._container_uuh1j_82:hover ._thumbnail_uuh1j_1 img{scale:1.1}@container (576px <= width){._container_uuh1j_82._pickup_uuh1j_93{aspect-ratio:16/9;justify-content:center;align-items:flex-end}._container_uuh1j_82._pickup_uuh1j_93 ._thumbnail_uuh1j_1{margin:0;position:absolute;top:0;left:0}._container_uuh1j_82._pickup_uuh1j_93 ._contents_uuh1j_42{flex:0 0 auto;margin:0;margin-block-start:calc(-1 * var(--sp-medium));background-color:#ffffffb3}._container_uuh1j_82._pickup_uuh1j_93 ._heading_uuh1j_57>h2{font-size:xx-large}}@container (992px <= width){._container_uuh1j_82._pickup_uuh1j_93{aspect-ratio:21/9}}._container_1hse0_1{grid-template-columns:auto 1fr;grid-template-rows:0 auto 1fr auto auto fit-content(20%);grid-template-areas:"thumbnail thumbnail" "heading heading" "date author" "category category" "tag tag" "excerpt excerpt";position:relative;width:100%;aspect-ratio:4/3;overflow:hidden}._container_1hse0_1:hover:before{opacity:0}._container_1hse0_1:hover:after{opacity:1}._container_1hse0_1:hover ._thumbnail_1hse0_16 img{filter:blur(2px);scale:1.04}._container_1hse0_1:hover ._category_1hse0_20,._container_1hse0_1:hover ._tag_1hse0_21,._container_1hse0_1:hover ._excerpt_1hse0_22{opacity:1}._container_1hse0_1:before,._container_1hse0_1:after{content:"";display:block;width:100%;height:100%;aspect-ratio:4/3;mix-blend-mode:hard-light;position:absolute;top:0;left:0;transition:all var(--animation-duration);z-index:2}._container_1hse0_1:before{background-image:linear-gradient(to bottom,rgba(var(--black-rgb),.6),rgba(var(--black-rgb),0) 62%,rgba(var(--black-rgb),0));opacity:1}._container_1hse0_1:after{background-color:rgba(var(--black-rgb),.8);opacity:0}._container_1hse0_1>*:not(._thumbnail_1hse0_16){transition:opacity var(--animation-duration);position:relative;z-index:3;padding-inline:var(--sp-medium)}@container (576px <= width){._container_1hse0_1._pickup_1hse0_53{aspect-ratio:16/9}@container (992px <= width){._container_1hse0_1._pickup_1hse0_53{aspect-ratio:2.85/1}}._container_1hse0_1._pickup_1hse0_53>*:not(._thumbnail_1hse0_16){padding-left:var(--sp-large);padding-right:var(--sp-large)}._container_1hse0_1._pickup_1hse0_53:before{aspect-ratio:16/9}@container (992px <= width){._container_1hse0_1._pickup_1hse0_53:before{aspect-ratio:2.85/1}}._container_1hse0_1._pickup_1hse0_53 ._heading_1hse0_73{font-size:xx-large}._container_1hse0_1._pickup_1hse0_53 ._tag_1hse0_21{margin-block:var(--sp-medium) var(--sp-large)}._container_1hse0_1._pickup_1hse0_53 ._excerpt_1hse0_22{padding:var(--sp-large)}}._thumbnail_1hse0_16{position:absolute;top:0;left:0;transition:filter var(--animation-duration);z-index:1}._thumbnail_1hse0_16>img{transition:scale var(--animation-duration)}._category_1hse0_20,._tag_1hse0_21,._excerpt_1hse0_22{opacity:0}._heading_1hse0_73{margin-block:var(--sp-medium)}._date_1hse0_105,._author_1hse0_106{align-items:flex-start}._author_1hse0_106{padding-left:0}._category_1hse0_20,._tag_1hse0_21{margin-block-end:var(--sp-medium)}._excerpt_1hse0_22{padding-block:var(--sp-medium);border-block-start:1px solid var(--white)}._list_h2kvz_1{--list-gap: var(--sp-large);display:grid;grid-template-rows:1fr;gap:var(--list-gap);width:100%}@keyframes _fadeIn_h2kvz_1{0%{opacity:0}to{opacity:1}}@container (width <= 576px){._list_h2kvz_1{grid-template-columns:repeat(auto-fit,100%)}}@container (576px <= width){._list_h2kvz_1{grid-template-columns:repeat(auto-fit,calc((100% - var(--list-gap) * (var(--tablet-column-number) - 1)) / var(--tablet-column-number)))}}@container (992px <= width){._list_h2kvz_1{grid-template-columns:repeat(auto-fit,calc((100% - var(--list-gap) * (var(--column-number) - 1)) / var(--column-number)))}}._list_h2kvz_1>li{opacity:0;animation-name:_fadeIn_h2kvz_1;animation-duration:1s;animation-timing-function:ease-out;animation-fill-mode:forwards}@container (width <= 576px){._list_h2kvz_1._pickup_h2kvz_39>li:first-child{grid-column:1}}@container (576px <= width){._list_h2kvz_1._pickup_h2kvz_39>li:first-child{grid-column:span var(--tablet-column-number)}}@container (992px <= width){._list_h2kvz_1._pickup_h2kvz_39>li:first-child{grid-column:span var(--column-number)}}._container_28x0r_1{--date-size: calc(var(--bv) * 7);grid-template-columns:auto 1fr auto;grid-template-rows:fit-content(50%) auto 1fr auto auto;grid-template-areas:"thumbnail thumbnail thumbnail" "date heading heading" "excerpt excerpt excerpt" "category category author" "tag tag author";height:100%;box-shadow:0 0 1px rgba(var(--black-rgb),.4);transition:box-shadow var(--animation-duration) linear}._container_28x0r_1:hover{box-shadow:0 0 var(--sp-small) 2px rgba(var(--black-rgb),.2)}@container (576px <= width){._container_28x0r_1._horizontal_28x0r_14{grid-template-columns:fit-content(50%) auto 1fr auto;grid-template-rows:auto 1fr auto auto;grid-template-areas:"thumbnail date heading heading" "thumbnail excerpt excerpt excerpt" "thumbnail category category author" "thumbnail tag tag author"}._container_28x0r_1._pickup_28x0r_19{grid-template-columns:1fr;grid-template-rows:1fr 0 0;grid-template-areas:"thumbnail" "heading" "date";text-align:left}._container_28x0r_1._pickup_28x0r_19 ._thumbnail_28x0r_25{position:relative}._container_28x0r_1._pickup_28x0r_19 ._thumbnail_28x0r_25:before{content:"";display:block;width:100%;height:100%;background-color:rgba(var(--black-rgb),.6);mix-blend-mode:multiply;pointer-events:none;position:absolute;top:0;left:0;z-index:1;transition:all var(--animation-duration)}._container_28x0r_1._pickup_28x0r_19 ._heading_28x0r_42,._container_28x0r_1._pickup_28x0r_19 ._date_28x0r_43{position:absolute;z-index:2}._container_28x0r_1._pickup_28x0r_19 ._heading_28x0r_42{padding:0;padding-right:var(--sp-medium);left:calc(var(--date-size) + var(--sp-medium) * 2);bottom:var(--sp-medium)}._container_28x0r_1._pickup_28x0r_19 ._date_28x0r_43{margin:0;bottom:var(--sp-medium);left:var(--sp-medium)}._container_28x0r_1._pickup_28x0r_19 ._excerpt_28x0r_58,._container_28x0r_1._pickup_28x0r_19 ._category_28x0r_59,._container_28x0r_1._pickup_28x0r_19 ._tag_28x0r_60,._container_28x0r_1._pickup_28x0r_19 ._author_28x0r_61{display:none}}._date_28x0r_43{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--sp-min);width:var(--date-size);height:var(--date-size);margin:var(--sp-medium);background-color:var(--black)}._date_28x0r_43>*{letter-spacing:.1em;line-height:1}._heading_28x0r_42{display:flex;align-items:center;padding:var(--sp-medium);padding-inline-start:0}._heading_28x0r_42>h2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}._category_28x0r_59,._tag_28x0r_60{margin-inline-start:var(--sp-medium);padding-block-end:var(--sp-medium)}._category_28x0r_59{align-items:flex-end}._author_28x0r_61,._excerpt_28x0r_58{padding:var(--sp-medium)}._list_18syb_1{--list-gap: var(--sp-medium);display:grid;gap:var(--list-gap);grid-template-rows:1fr;width:100%;list-style:none;grid-auto-flow:dense}@keyframes _fadeIn_18syb_1{0%{opacity:0}to{opacity:1}}@container (width <= 576px){._list_18syb_1{display:flex;flex-direction:column;gap:var(--sp-large)}}@container (576px <= width){._list_18syb_1{grid-template-columns:repeat(auto-fit,calc((100% - var(--list-gap) * (var(--tablet-column-number) - 1)) / var(--tablet-column-number)))}}@container (992px <= width){._list_18syb_1{grid-template-columns:repeat(auto-fit,calc((100% - var(--list-gap) * (var(--column-number) - 1)) / var(--column-number)))}}._list_18syb_1>li{animation-name:_fadeIn_18syb_1;animation-duration:1s;animation-timing-function:ease-out;animation-fill-mode:backwards}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geckou/ui-vue",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "description": "A set of reusable Vue UI components (forms & article lists) by Geckou",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -32,7 +32,7 @@
     "vue": "^3.5.0"
   },
   "dependencies": {
-    "@geckou/ui-core": "^0.5.0",
+    "@geckou/ui-core": "^0.7.0",
     "date-fns": "^4.4.0"
   },
   "scripts": {