@geckou/ui-vue 0.12.0 → 0.13.0

package/README.md

@@ -301,6 +301,25 @@ const articles = ref<any[]>([])
 
 定義例はデモの `demo/styles/base.scss` を参照。
 
+## 0.13.0 の変更
+
+- `BasicButton` はローディング中に `disabled` にしない（押した瞬間にフォーカスが
+  `body` へ落ちるため）。代わりに `aria-disabled` / `aria-busy` を付け、
+  `pointer-events` と click ガードで押せなくする。**`:disabled` を前提に
+  スタイルを当てている場合は `[aria-disabled]` の追従が要る**
+- `BasicButton` のローディング中もアクセシブル名を保つ（`visibility: hidden` → `opacity: 0`）。
+  `LoadingSpinner` は `aria-hidden="true"`
+- `BasicButton` の hover 色が `color-mix()` になった（3 桁 hex 等で不正値になっていた）。
+  `cssStyle` の差し替えにも追従する（`hoverStyle` を `computed` に）
+- `PopupBox` は**表示している間だけ**スロットを描画する
+- `ModalBox` はマウント時点で `isShown` が true でもダイアログへフォーカスを移す
+- `ModalBox` の背景クリック判定が「押し始めも背景だったとき」だけになった
+- `RadioButtons` が `role="radiogroup"`、`CheckBoxes` が `role="group"` になり、
+  どちらも `ariaLabel` / `ariaLabelledBy` を受ける。エラーは `aria-describedby` で結び付く
+- `RadioButtons` が `cssStyle.textColor` を `--text-color` へ出す（React 版と揃えた）
+- `CheckButton` が `ariaLabel` / `ariaLabelledBy` を受ける
+- `CheckBoxes` の `errorColor` が `cssStyle` の差し替えに追従する
+- `ErrorMessage` が `id` を受ける
 ## 0.12.0 の変更
 
 - `GenericArticleList` が `theme='grid'` を実装した（型には含まれるのに switch に無く、

package/dist/components/BasicButton.vue2.js

@@ -1,7 +1,7 @@
-import { defineComponent as K, computed as M, openBlock as A, createElementBlock as P, normalizeClass as F, normalizeStyle as Q, unref as l, withDirectives as U, createElementVNode as H, renderSlot as J, createBlock as W, vShow as X } from "vue";
-import Y from "./LoadingSpinner.vue.js";
-import { COLOR as s } from "@geckou/ui-core";
-const Z = ["type", "disabled"], ro = /* @__PURE__ */ K({
+import { defineComponent as J, computed as R, openBlock as V, createElementBlock as K, normalizeClass as j, normalizeStyle as M, withDirectives as Q, createElementVNode as q, renderSlot as A, createBlock as U, vShow as W } from "vue";
+import X from "./LoadingSpinner.vue.js";
+import { COLOR as i } from "@geckou/ui-core";
+const Y = ["type", "disabled", "aria-disabled", "aria-busy"], oe = /* @__PURE__ */ J({
   __name: "BasicButton",
   props: {
     cssStyle: {},
@@ -10,62 +10,70 @@ const Z = ["type", "disabled"], ro = /* @__PURE__ */ K({
     isDisabled: { type: Boolean },
     buttonType: {}
   },
-  setup(r) {
-    var i;
-    const d = r, o = M(() => {
-      var n, t;
-      const e = d.isDisabled ? (n = d.cssStyle) == null ? void 0 : n.disabled : (t = d.cssStyle) == null ? void 0 : t.default;
+  setup(a) {
+    const r = a, o = R(() => {
+      var t, d;
+      const e = r.isDisabled ? (t = r.cssStyle) == null ? void 0 : t.disabled : (d = r.cssStyle) == null ? void 0 : d.default;
       return {
-        textColor: s.white,
-        backgroundColor: d.isDisabled ? s.darkGray : s.blue,
+        textColor: i.white,
+        backgroundColor: r.isDisabled ? i.darkGray : i.blue,
         backgroundImage: "none",
         border: {
-          color: d.isDisabled ? s.darkGray : s.blue,
+          color: r.isDisabled ? i.darkGray : i.blue,
           size: "1px",
           radius: ".25rem"
         },
         boxShadow: "0 0 0 0 transparent",
         ...e
       };
-    }), a = ((i = d.cssStyle) == null ? void 0 : i.hover) || {};
-    return (e, n) => {
-      var t, u, b, c, g, v, m, y, h, k, S, C, f, z, p, w, x, $, B, D, L, I, E, G, O, T, N, R, V, j, q;
-      return A(), P("button", {
-        class: F([e.$style.button, { [e.$style.loading]: r.isLoading }]),
-        style: Q({
-          "--text-color": (t = o.value) == null ? void 0 : t.textColor,
-          "--background-color": (u = o.value) == null ? void 0 : u.backgroundColor,
-          "--background-image": (b = o.value) == null ? void 0 : b.backgroundImage,
-          "--border-color": (g = (c = o.value) == null ? void 0 : c.border) == null ? void 0 : g.color,
-          "--border-size": (m = (v = o.value) == null ? void 0 : v.border) == null ? void 0 : m.size,
-          "--radius-size": (h = (y = o.value) == null ? void 0 : y.border) == null ? void 0 : h.radius,
-          "--box-shadow": (k = o.value) == null ? void 0 : k.boxShadow,
-          "--hover-text-color": ((S = l(a)) == null ? void 0 : S.textColor) || ((C = o.value) == null ? void 0 : C.textColor),
-          "--hover-background-color": ((f = l(a)) == null ? void 0 : f.backgroundColor) || ((z = o.value) == null ? void 0 : z.backgroundColor) && `${(p = o.value) == null ? void 0 : p.backgroundColor}cc`,
-          "--hover-background-image": ((w = l(a)) == null ? void 0 : w.backgroundImage) || ((x = o.value) == null ? void 0 : x.backgroundImage),
-          "--hover-border-color": ((B = ($ = l(a)) == null ? void 0 : $.border) == null ? void 0 : B.color) || ((L = (D = o.value) == null ? void 0 : D.border) == null ? void 0 : L.color),
-          "--hover-border-size": ((E = (I = l(a)) == null ? void 0 : I.border) == null ? void 0 : E.size) || ((O = (G = o.value) == null ? void 0 : G.border) == null ? void 0 : O.size),
-          "--hover-radius-size": ((N = (T = l(a)) == null ? void 0 : T.border) == null ? void 0 : N.radius) || ((V = (R = o.value) == null ? void 0 : R.border) == null ? void 0 : V.radius),
-          "--hover-box-shadow": ((j = l(a)) == null ? void 0 : j.boxShadow) || ((q = o.value) == null ? void 0 : q.boxShadow),
-          "--duration": `${r.duration || 0.3}s`
+    }), l = R(() => {
+      var e;
+      return ((e = r.cssStyle) == null ? void 0 : e.hover) || {};
+    }), F = (e) => e && `color-mix(in srgb, ${e} 80%, transparent)`, H = (e) => {
+      r.isLoading && (e.preventDefault(), e.stopImmediatePropagation());
+    };
+    return (e, t) => {
+      var d, n, s, u, b, c, v, g, m, y, h, k, S, f, C, x, z, p, w, D, L, $, B, I, E, G, O, T, N, P;
+      return V(), K("button", {
+        class: j([e.$style.button, { [e.$style.loading]: a.isLoading }]),
+        style: M({
+          "--text-color": (d = o.value) == null ? void 0 : d.textColor,
+          "--background-color": (n = o.value) == null ? void 0 : n.backgroundColor,
+          "--background-image": (s = o.value) == null ? void 0 : s.backgroundImage,
+          "--border-color": (b = (u = o.value) == null ? void 0 : u.border) == null ? void 0 : b.color,
+          "--border-size": (v = (c = o.value) == null ? void 0 : c.border) == null ? void 0 : v.size,
+          "--radius-size": (m = (g = o.value) == null ? void 0 : g.border) == null ? void 0 : m.radius,
+          "--box-shadow": (y = o.value) == null ? void 0 : y.boxShadow,
+          "--hover-text-color": ((h = l.value) == null ? void 0 : h.textColor) || ((k = o.value) == null ? void 0 : k.textColor),
+          "--hover-background-color": ((S = l.value) == null ? void 0 : S.backgroundColor) || F((f = o.value) == null ? void 0 : f.backgroundColor),
+          "--hover-background-image": ((C = l.value) == null ? void 0 : C.backgroundImage) || ((x = o.value) == null ? void 0 : x.backgroundImage),
+          "--hover-border-color": ((p = (z = l.value) == null ? void 0 : z.border) == null ? void 0 : p.color) || ((D = (w = o.value) == null ? void 0 : w.border) == null ? void 0 : D.color),
+          "--hover-border-size": (($ = (L = l.value) == null ? void 0 : L.border) == null ? void 0 : $.size) || ((I = (B = o.value) == null ? void 0 : B.border) == null ? void 0 : I.size),
+          "--hover-radius-size": ((G = (E = l.value) == null ? void 0 : E.border) == null ? void 0 : G.radius) || ((T = (O = o.value) == null ? void 0 : O.border) == null ? void 0 : T.radius),
+          "--hover-box-shadow": ((N = l.value) == null ? void 0 : N.boxShadow) || ((P = o.value) == null ? void 0 : P.boxShadow),
+          "--duration": `${a.duration || 0.3}s`
         }),
-        type: r.buttonType || "button",
-        disabled: r.isDisabled || r.isLoading
+        type: a.buttonType || "button",
+        disabled: a.isDisabled,
+        "aria-disabled": a.isDisabled || a.isLoading || void 0,
+        "aria-busy": a.isLoading || void 0,
+        onClick: H
       }, [
-        U(H("div", {
-          class: F(e.$style.loading_animation)
+        Q(q("div", {
+          class: j(e.$style.loading_animation),
+          "aria-hidden": "true"
         }, [
-          e.$slots.loading ? J(e.$slots, "loading", {}, void 0, void 0, 0) : (A(), W(Y, { key: 1 }))
+          e.$slots.loading ? A(e.$slots, "loading", {}, void 0, void 0, 0) : (V(), U(X, { key: 1 }))
         ], 2), [
-          [X, r.isLoading]
+          [W, a.isLoading]
         ]),
-        H("div", null, [
-          J(e.$slots, "default")
+        q("div", null, [
+          A(e.$slots, "default")
         ])
-      ], 14, Z);
+      ], 14, Y);
     };
   }
 });
 export {
-  ro as default
+  oe as default
 };

package/dist/components/BasicButton.vue3.js

@@ -1,11 +1,11 @@
-const n = "_button_pz98w_1", o = "_loading_pz98w_25", t = "_loading_animation_pz98w_35", a = {
-  button: n,
-  loading: o,
+const o = "_button_1ocs4_1", n = "_loading_1ocs4_25", t = "_loading_animation_1ocs4_35", a = {
+  button: o,
+  loading: n,
   loading_animation: t
 };
 export {
-  n as button,
+  o as button,
   a as default,
-  o as loading,
+  n as loading,
   t as loading_animation
 };

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

@@ -6,6 +6,12 @@ type __VLS_Props = {
     isDisabled?: boolean;
     isRequired?: boolean;
     cssStyle?: CheckBoxStyleForEachStatus;
+    /**
+     * チェックボックス群自体のアクセシブル名。
+     * 可視ラベル（見出し等）があるなら ariaLabelledBy でその要素を指すこと
+     */
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
 };
 declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     "update:modelValue": (newValue: SelectValue[]) => any;
@@ -14,5 +20,7 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
 }>, {
     cssStyle: CheckBoxStyleForEachStatus;
     modelValue: SelectValue[];
+    ariaLabel: string;
+    ariaLabelledBy: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;

package/dist/components/CheckBoxes.vue2.js

@@ -1,8 +1,9 @@
-import { defineComponent as V, ref as k, computed as E, watch as m, openBlock as i, createElementBlock as y, normalizeClass as q, Fragment as M, renderList as x, createBlock as B, createVNode as D } from "vue";
-import { COLOR as v, MESSAGES as _ } from "@geckou/ui-core";
-import A from "./LabeledCheckbox.vue.js";
-import L from "./ErrorMessage.vue.js";
-const F = /* @__PURE__ */ V({
+import { defineComponent as B, ref as p, computed as k, watch as m, openBlock as v, createElementBlock as g, normalizeClass as E, unref as S, Fragment as q, renderList as x, createBlock as M, createVNode as D } from "vue";
+import { COLOR as b, MESSAGES as A } from "@geckou/ui-core";
+import I from "./LabeledCheckbox.vue.js";
+import R from "./ErrorMessage.vue.js";
+import { nextUniqueId as U } from "../scripts/unique-id.js";
+const z = ["aria-label", "aria-labelledby", "aria-describedby"], $ = /* @__PURE__ */ B({
   __name: "CheckBoxes",
   props: {
     name: {},
@@ -10,12 +11,14 @@ const F = /* @__PURE__ */ V({
     modelValue: { default: void 0 },
     isDisabled: { type: Boolean },
     isRequired: { type: Boolean },
-    cssStyle: { default: void 0 }
+    cssStyle: { default: void 0 },
+    ariaLabel: { default: void 0 },
+    ariaLabelledBy: { default: void 0 }
   },
   emits: ["update:modelValue"],
-  setup(p, { emit: g }) {
-    var b, f;
-    const S = g, a = p, s = k(
+  setup(s, { emit: C }) {
+    var y;
+    const V = C, a = s, f = U("check_boxes_error"), u = p(
       a.options.map((e) => {
         var r;
         return {
@@ -24,22 +27,22 @@ const F = /* @__PURE__ */ V({
           checked: ((r = a.modelValue) == null ? void 0 : r.includes(e.value)) || !1
         };
       })
-    ), c = E(
-      () => s.value.filter((e) => e.checked).map((e) => e.value)
-    ), n = k(""), C = () => n.value = a.isRequired && c.value.length === 0 ? _.required : "";
+    ), n = k(
+      () => u.value.filter((e) => e.checked).map((e) => e.value)
+    ), o = p(""), L = () => o.value = a.isRequired && n.value.length === 0 ? A.required : "";
     m(
-      c,
+      n,
       (e, r) => {
-        r && ((l, u) => l.length === u.length && l.every((o, d) => o === u[d]))(e, r) || (C(), S("update:modelValue", e));
+        r && ((l, d) => l.length === d.length && l.every((i, c) => i === d[c]))(e, r) || (L(), V("update:modelValue", e));
       },
       {
         deep: !0,
-        immediate: !!((b = a.modelValue) != null && b.length)
+        immediate: !!((y = a.modelValue) != null && y.length)
       }
     ), m(
       () => a.modelValue,
       (e) => {
-        e && s.value.forEach(
+        e && u.value.forEach(
           (r) => r.checked = e.includes(r.value)
         );
       },
@@ -50,15 +53,15 @@ const F = /* @__PURE__ */ V({
     ), m(
       () => a.options,
       (e) => {
-        if (e.length === s.value.length && e.every(
-          (l, u) => {
-            var o, d;
-            return l.value === ((o = s.value[u]) == null ? void 0 : o.value) && l.label === ((d = s.value[u]) == null ? void 0 : d.label);
+        if (e.length === u.value.length && e.every(
+          (l, d) => {
+            var i, c;
+            return l.value === ((i = u.value[d]) == null ? void 0 : i.value) && l.label === ((c = u.value[d]) == null ? void 0 : c.label);
           }
         ))
           return;
-        const t = new Set(c.value);
-        s.value = e.map((l) => ({
+        const t = new Set(n.value);
+        u.value = e.map((l) => ({
           value: l.value,
           label: l.label,
           checked: a.modelValue ? a.modelValue.includes(l.value) : t.has(l.value)
@@ -66,39 +69,47 @@ const F = /* @__PURE__ */ V({
       },
       { deep: !0 }
     );
-    const h = {
-      ...((f = a.cssStyle) == null ? void 0 : f.error) ?? {},
-      textColor: v.white,
-      backgroundColor: v.red,
-      border: {
-        color: v.red,
-        size: "1px",
-        radius: ".25rem"
-      }
-    };
-    return (e, r) => (i(), y("div", {
-      class: q(e.$style.check_boxes)
+    const h = k(() => {
+      var e;
+      return {
+        ...((e = a.cssStyle) == null ? void 0 : e.error) ?? {},
+        textColor: b.white,
+        backgroundColor: b.red,
+        border: {
+          color: b.red,
+          size: "1px",
+          radius: ".25rem"
+        }
+      };
+    });
+    return (e, r) => (v(), g("div", {
+      class: E(e.$style.check_boxes),
+      role: "group",
+      "aria-label": s.ariaLabelledBy ? void 0 : s.ariaLabel,
+      "aria-labelledby": s.ariaLabelledBy,
+      "aria-describedby": o.value ? S(f) : void 0
     }, [
-      (i(!0), y(M, null, x(s.value, (t, l) => (i(), B(A, {
+      (v(!0), g(q, null, x(u.value, (t, l) => (v(), M(I, {
         key: t.value,
-        modelValue: s.value[l].checked,
-        "onUpdate:modelValue": (u) => s.value[l].checked = u,
-        name: p.name,
+        modelValue: u.value[l].checked,
+        "onUpdate:modelValue": (d) => u.value[l].checked = d,
+        name: s.name,
         value: t.value,
         label: t.label,
         isDisabled: a.isDisabled,
         cssStyle: a.cssStyle
       }, null, 8, ["modelValue", "onUpdate:modelValue", "name", "value", "label", "isDisabled", "cssStyle"]))), 128)),
-      D(L, {
-        errorMessages: n.value ? [n.value] : [],
+      D(R, {
+        id: S(f),
+        errorMessages: o.value ? [o.value] : [],
         cssStyle: {
-          textColor: h.textColor,
-          backgroundColor: h.backgroundColor
+          textColor: h.value.textColor,
+          backgroundColor: h.value.backgroundColor
         }
-      }, null, 8, ["errorMessages", "cssStyle"])
-    ], 2));
+      }, null, 8, ["id", "errorMessages", "cssStyle"])
+    ], 10, z));
   }
 });
 export {
-  F as default
+  $ as default
 };

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

@@ -5,6 +5,13 @@ type __VLS_Props = {
     isDisabled?: boolean;
     cssStyle?: CheckBoxStyleForEachStatus;
     isDisableAnimation?: boolean;
+    /**
+     * アクセシブル名。可視ラベルがあるなら ariaLabelledBy でその要素を指すこと。
+     * 文言を持たない label で包むだけだったため、
+     * スクリーンリーダーでは「チェックボックス」としか読まれなかった
+     */
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
 };
 declare function __VLS_template(): {
     attrs: Partial<{}>;
@@ -21,6 +28,8 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
     "onUpdate:modelValue"?: ((newValue: boolean) => any) | undefined;
 }>, {
     cssStyle: CheckBoxStyleForEachStatus;
+    ariaLabel: string;
+    ariaLabelledBy: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLLabelElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/dist/components/CheckButton.vue2.js

@@ -1,54 +1,58 @@
-import { defineComponent as C, ref as V, computed as B, watch as b, openBlock as k, createElementBlock as D, normalizeClass as f, normalizeStyle as S, withDirectives as z, createElementVNode as p, vModelCheckbox as $, renderSlot as g, createBlock as w, createCommentVNode as x } from "vue";
-import A from "./Icon/CheckIcon.vue.js";
-const E = ["name", "disabled"], M = /* @__PURE__ */ C({
+import { defineComponent as C, ref as V, computed as p, watch as b, openBlock as f, createElementBlock as D, normalizeClass as y, normalizeStyle as S, withDirectives as z, createElementVNode as k, vModelCheckbox as L, renderSlot as $, createBlock as g, createCommentVNode as w } from "vue";
+import x from "./Icon/CheckIcon.vue.js";
+const A = ["name", "aria-label", "aria-labelledby", "disabled"], I = /* @__PURE__ */ C({
   __name: "CheckButton",
   props: {
     name: {},
     modelValue: { type: Boolean },
     isDisabled: { type: Boolean },
     cssStyle: { default: () => ({ default: {} }) },
-    isDisableAnimation: { type: Boolean }
+    isDisableAnimation: { type: Boolean },
+    ariaLabel: { default: void 0 },
+    ariaLabelledBy: { default: void 0 }
   },
   emits: ["update:modelValue"],
-  setup(o, { emit: y }) {
-    const h = y, l = o, t = V(l.modelValue ?? !1), a = B(() => l.isDisabled ? l.cssStyle.disabled : l.cssStyle.default);
+  setup(e, { emit: h }) {
+    const v = h, l = e, t = V(l.modelValue ?? !1), o = p(() => l.isDisabled ? l.cssStyle.disabled : l.cssStyle.default);
     return b(
       () => t.value,
-      (e) => h("update:modelValue", e)
+      (a) => v("update:modelValue", a)
     ), b(
       () => l.modelValue,
-      (e) => t.value = e,
+      (a) => t.value = a,
       { immediate: !0 }
-    ), (e, s) => {
-      var r, n, i, d, c, u, m;
-      return k(), D("label", {
-        class: f(e.$style.check_box),
+    ), (a, d) => {
+      var i, r, n, s, u, c, m;
+      return f(), D("label", {
+        class: y(a.$style.check_box),
         style: S({
-          "--border-color": ((n = (r = a.value) == null ? void 0 : r.border) == null ? void 0 : n.color) || "blue",
-          "--border-size": ((d = (i = a.value) == null ? void 0 : i.border) == null ? void 0 : d.size) || "1px",
-          "--radius-size": ((u = (c = a.value) == null ? void 0 : c.border) == null ? void 0 : u.radius) || "0.25rem",
-          "--background-color": ((m = a.value) == null ? void 0 : m.backgroundColor) || "#fff",
-          "--duration": o.isDisableAnimation ? "0s" : ".3s"
+          "--border-color": ((r = (i = o.value) == null ? void 0 : i.border) == null ? void 0 : r.color) || "blue",
+          "--border-size": ((s = (n = o.value) == null ? void 0 : n.border) == null ? void 0 : s.size) || "1px",
+          "--radius-size": ((c = (u = o.value) == null ? void 0 : u.border) == null ? void 0 : c.radius) || "0.25rem",
+          "--background-color": ((m = o.value) == null ? void 0 : m.backgroundColor) || "#fff",
+          "--duration": e.isDisableAnimation ? "0s" : ".3s"
         })
       }, [
-        z(p("input", {
-          "onUpdate:modelValue": s[0] || (s[0] = (v) => t.value = v),
+        z(k("input", {
+          "onUpdate:modelValue": d[0] || (d[0] = (B) => t.value = B),
           type: "checkbox",
-          name: o.name,
-          disabled: o.isDisabled
-        }, null, 8, E), [
-          [$, t.value]
+          name: e.name,
+          "aria-label": e.ariaLabelledBy ? void 0 : e.ariaLabel ?? e.name,
+          "aria-labelledby": e.ariaLabelledBy,
+          disabled: e.isDisabled
+        }, null, 8, A), [
+          [L, t.value]
         ]),
-        p("div", {
-          class: f(e.$style.check_container)
+        k("div", {
+          class: y(a.$style.check_container)
         }, [
-          g(e.$slots, "check"),
-          e.$slots.check ? x("", !0) : (k(), w(A, { key: 0 }))
+          $(a.$slots, "check"),
+          a.$slots.check ? w("", !0) : (f(), g(x, { key: 0 }))
         ], 2)
       ], 6);
     };
   }
 });
 export {
-  M as default
+  I as default
 };

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

@@ -1,4 +1,6 @@
 type __VLS_Props = {
+    /** aria-describedby から参照させたいときに渡す */
+    id?: string;
     cssStyle?: {
         textColor: string | undefined;
         backgroundColor: string | undefined;

package/dist/components/ErrorMessage.vue2.js

@@ -1,30 +1,32 @@
-import { defineComponent as c, withDirectives as i, openBlock as r, createElementBlock as o, normalizeClass as m, normalizeStyle as u, unref as g, Fragment as f, renderList as y, toDisplayString as d, vShow as C } from "vue";
-import { COLOR as S } from "@geckou/ui-core";
-const v = /* @__PURE__ */ c({
+import { defineComponent as i, withDirectives as d, openBlock as r, createElementBlock as o, normalizeClass as m, normalizeStyle as g, unref as u, Fragment as f, renderList as y, toDisplayString as C, vShow as S } from "vue";
+import { COLOR as h } from "@geckou/ui-core";
+const k = ["id"], b = /* @__PURE__ */ i({
   __name: "ErrorMessage",
   props: {
+    id: {},
     cssStyle: {},
     errorMessages: {}
   },
   setup(e) {
-    const { red: n } = S;
-    return (a, k) => {
+    const { red: l } = h;
+    return (n, M) => {
       var s, t;
-      return i((r(), o("div", {
+      return d((r(), o("div", {
+        id: e.id,
         role: "alert",
-        class: m(a.$style.error_messages),
-        style: u({
+        class: m(n.$style.error_messages),
+        style: g({
           "--error-text-color": ((s = e.cssStyle) == null ? void 0 : s.textColor) || "#fff",
-          "--error-background-color": ((t = e.cssStyle) == null ? void 0 : t.backgroundColor) || g(n)
+          "--error-background-color": ((t = e.cssStyle) == null ? void 0 : t.backgroundColor) || u(l)
         })
       }, [
-        (r(!0), o(f, null, y(e.errorMessages, (l) => (r(), o("span", { key: l }, d(l), 1))), 128))
-      ], 6)), [
-        [C, e.errorMessages && e.errorMessages.length]
+        (r(!0), o(f, null, y(e.errorMessages, (a, c) => (r(), o("span", { key: c }, C(a), 1))), 128))
+      ], 14, k)), [
+        [S, e.errorMessages && e.errorMessages.length]
       ]);
     };
   }
 });
 export {
-  v as default
+  b as default
 };

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

@@ -1,2 +1,2 @@
-declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, SVGSVGElement>;
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/components/LoadingSpinner.vue.js

@@ -1,11 +1,13 @@
-import { openBlock as r, createElementBlock as e, createStaticVNode as t } from "vue";
+import { openBlock as e, createElementBlock as r, createStaticVNode as t } from "vue";
 import i from "../_virtual/_plugin-vue_export-helper.js";
 const o = {}, a = {
   viewBox: "0 0 24 24",
-  xmlns: "http://www.w3.org/2000/svg"
+  xmlns: "http://www.w3.org/2000/svg",
+  "aria-hidden": "true",
+  focusable: "false"
 };
 function n(l, c) {
-  return r(), e("svg", a, [...c[0] || (c[0] = [
+  return e(), r("svg", a, [...c[0] || (c[0] = [
     t('<g><circle cx="12" cy="2.5" r="1.5" opacity=".14"></circle><circle cx="16.75" cy="3.77" r="1.5" opacity=".29"></circle><circle cx="20.23" cy="7.25" r="1.5" opacity=".43"></circle><circle cx="21.50" cy="12.00" r="1.5" opacity=".57"></circle><circle cx="20.23" cy="16.75" r="1.5" opacity=".71"></circle><circle cx="16.75" cy="20.23" r="1.5" opacity=".86"></circle><circle cx="12" cy="21.5" r="1.5"></circle><animateTransform attributeName="transform" type="rotate" calcMode="discrete" dur="0.75s" values="0 12 12;30 12 12;60 12 12;90 12 12;120 12 12;150 12 12;180 12 12;210 12 12;240 12 12;270 12 12;300 12 12;330 12 12;360 12 12" repeatCount="indefinite"></animateTransform></g>', 1)
   ])]);
 }

package/dist/components/ModalBox.vue2.js

@@ -1,8 +1,8 @@
-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({
+import { defineComponent as E, ref as M, watch as $, nextTick as I, computed as O, onMounted as T, onBeforeUnmount as z, openBlock as c, createElementBlock as u, normalizeClass as t, withModifiers as D, createElementVNode as m, unref as b, renderSlot as f, createCommentVNode as v, createVNode as N } from "vue";
+import { createScrollLock as P, createModalLayer as q, handleTabKey as K } from "@geckou/ui-core";
+import U from "./Icon/CloseIcon.vue.js";
+import { nextUniqueId as V } from "../scripts/unique-id.js";
+const j = ["aria-hidden", "inert"], A = ["aria-labelledby", "aria-label"], G = ["id"], W = /* @__PURE__ */ E({
   __name: "ModalBox",
   props: {
     isShown: { type: Boolean },
@@ -10,85 +10,95 @@ const V = ["aria-hidden", "inert"], P = ["aria-labelledby", "aria-label"], j = [
     ariaLabel: {}
   },
   emits: ["close"],
-  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(
+  setup(n, { emit: S }) {
+    const o = n, h = V("modal_header"), l = M(null), g = S, y = P(), k = (e) => y.toggle(e), s = () => g("close"), r = q(), p = (e) => r.toggle(e, l.value);
+    $(
       () => o.isShown,
       (e) => {
-        y(e), $(e);
+        k(e), p(e);
       }
     );
-    let l = null;
-    k(
+    let a = null;
+    $(
       () => o.isShown,
       async (e) => {
-        var i;
+        var d;
         if (!e) {
-          l == null || l.focus(), l = null;
+          a == null || a.focus(), a = null;
           return;
         }
-        l = typeof document > "u" ? null : document.activeElement, await E(), (i = a.value) == null || i.focus();
-      }
+        a = typeof document > "u" ? null : document.activeElement, await I(), (d = l.value) == null || d.focus();
+      },
+      // マウント時点で isShown が true のときも実行する。immediate が無かったため、
+      // 最初から開いた状態で描画するとフォーカスが body に残っていた（React 版と乖離）
+      { immediate: !0 }
     );
-    const L = B(() => !o.isShown || void 0), b = (e) => {
+    let i = !1;
+    const L = (e) => {
+      i = e.target === e.currentTarget;
+    }, C = () => {
+      const e = i;
+      i = !1, e && s();
+    }, B = O(() => !o.isShown || void 0), w = (e) => {
       if (o.isShown && r.isTopmost() && !e.defaultPrevented) {
         if (e.key === "Escape") {
           e.preventDefault(), s();
           return;
         }
-        D(a.value, e, document.activeElement);
+        K(l.value, e, document.activeElement);
       }
     };
-    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", {
+    return T(() => {
+      k(o.isShown), p(o.isShown), document.addEventListener("keydown", w);
+    }), z(() => {
+      y.release(), r.release(), document.removeEventListener("keydown", w);
+    }), (e, d) => (c(), u("div", {
       class: t([e.$style.overlay, { [e.$style.display]: n.isShown }]),
       "aria-hidden": !n.isShown,
-      inert: L.value,
-      onClick: z(s, ["self"])
+      inert: B.value,
+      onPointerdown: L,
+      onClick: D(C, ["self"])
     }, [
-      u("div", {
+      m("div", {
         ref_key: "dialog",
-        ref: a,
+        ref: l,
         role: "dialog",
         "aria-modal": "true",
-        "aria-labelledby": e.$slots.header ? w(f) : void 0,
+        "aria-labelledby": e.$slots.header ? b(h) : void 0,
         "aria-label": e.$slots.header ? void 0 : n.ariaLabel ?? "ダイアログ",
         tabindex: -1,
         class: t([e.$style.container, e.$style[n.size ?? "medium"]])
       }, [
-        e.$slots.header ? (d(), c("header", {
+        e.$slots.header ? (c(), u("header", {
           key: 0,
-          id: w(f),
+          id: b(h),
           class: t(e.$style.header)
         }, [
-          m(e.$slots, "header")
-        ], 10, j)) : p("", !0),
-        u("div", {
+          f(e.$slots, "header")
+        ], 10, G)) : v("", !0),
+        m("div", {
           class: t(e.$style.contents)
         }, [
-          m(e.$slots, "default")
+          f(e.$slots, "default")
         ], 2),
-        e.$slots.footer ? (d(), c("footer", {
+        e.$slots.footer ? (c(), u("footer", {
           key: 1,
           class: t(e.$style.footer)
         }, [
-          m(e.$slots, "footer")
-        ], 2)) : p("", !0),
-        u("button", {
+          f(e.$slots, "footer")
+        ], 2)) : v("", !0),
+        m("button", {
           type: "button",
           "aria-label": "閉じる",
           class: t(e.$style.close_button),
           onClick: s
         }, [
-          N(K)
+          N(U)
         ], 2)
-      ], 10, P)
-    ], 10, V));
+      ], 10, A)
+    ], 42, j));
   }
 });
 export {
-  O as default
+  W as default
 };

package/dist/components/PopupBox.vue2.js

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

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

@@ -8,6 +8,12 @@ type __VLS_Props = {
     isRequired?: boolean;
     cssStyle?: RadioButtonStyleForEachStatus;
     isDisableAnimation?: boolean;
+    /**
+     * ラジオグループ自体のアクセシブル名。
+     * 可視ラベル（見出し等）があるなら ariaLabelledBy でその要素を指すこと
+     */
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
 };
 declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     "update:modelValue": (newValue: SelectValue) => any;
@@ -16,5 +22,7 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
 }>, {
     cssStyle: RadioButtonStyleForEachStatus;
     name: string;
+    ariaLabel: string;
+    ariaLabelledBy: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;

package/dist/components/RadioButtons.vue2.js

@@ -1,8 +1,8 @@
-import { defineComponent as C, ref as B, computed as y, watch as E, openBlock as u, createElementBlock as n, normalizeClass as f, Fragment as M, renderList as R, normalizeStyle as z, withDirectives as G, createElementVNode as g, unref as w, vModelRadio as x, toDisplayString as A, createVNode as N } from "vue";
-import { COLOR as r, isEmptyValue as k, MESSAGES as L } from "@geckou/ui-core";
-import { nextUniqueId as O } from "../scripts/unique-id.js";
-import U from "./ErrorMessage.vue.js";
-const $ = ["name", "value", "disabled", "required", "checked"], J = /* @__PURE__ */ C({
+import { defineComponent as E, ref as M, computed as k, watch as x, openBlock as u, createElementBlock as n, normalizeClass as V, unref as c, Fragment as z, renderList as G, normalizeStyle as w, withDirectives as A, createElementVNode as q, vModelRadio as N, toDisplayString as I, createVNode as O } from "vue";
+import { COLOR as i, isEmptyValue as D, MESSAGES as U } from "@geckou/ui-core";
+import { nextUniqueId as S } from "../scripts/unique-id.js";
+import $ from "./ErrorMessage.vue.js";
+const F = ["aria-label", "aria-labelledby", "aria-required", "aria-describedby"], j = ["name", "value", "disabled", "required", "checked"], Q = /* @__PURE__ */ E({
   __name: "RadioButtons",
   props: {
     modelValue: {},
@@ -11,65 +11,76 @@ const $ = ["name", "value", "disabled", "required", "checked"], J = /* @__PURE__
     isDisabled: { type: Boolean },
     isRequired: { type: Boolean },
     cssStyle: { default: void 0 },
-    isDisableAnimation: { type: Boolean }
+    isDisableAnimation: { type: Boolean },
+    ariaLabel: { default: void 0 },
+    ariaLabelledBy: { default: void 0 }
   },
   emits: ["update:modelValue"],
-  setup(s, { emit: V }) {
-    const D = V, e = s, S = e.name ?? O("radio_group"), i = B([]), o = y({
+  setup(a, { emit: h }) {
+    const B = h, e = a, C = e.name ?? S("radio_group"), b = S("radio_group_error"), t = M([]), d = k({
       get: () => e.modelValue ?? "",
-      set: (a) => D("update:modelValue", a)
-    }), d = y(() => {
-      var t, l;
-      const a = e.isDisabled ? (t = e.cssStyle) == null ? void 0 : t.disabled : (l = e.cssStyle) == null ? void 0 : l.default;
+      set: (r) => B("update:modelValue", r)
+    }), s = k(() => {
+      var o, l;
+      const r = e.isDisabled ? (o = e.cssStyle) == null ? void 0 : o.disabled : (l = e.cssStyle) == null ? void 0 : l.default;
       return {
-        textColor: e.isDisabled ? r.darkGray : r.black,
-        backgroundColor: e.isDisabled ? r.lightGray : r.white,
+        textColor: e.isDisabled ? i.darkGray : i.black,
+        backgroundColor: e.isDisabled ? i.lightGray : i.white,
         border: {
-          color: e.isDisabled ? r.darkGray : r.blue,
+          color: e.isDisabled ? i.darkGray : i.blue,
           size: "1px"
         },
-        ...a ?? {}
+        ...r ?? {}
       };
-    }), h = () => {
-      i.value = [], k(o.value) && e.isRequired && i.value.push(L.required);
+    }), L = () => {
+      t.value = [], D(d.value) && e.isRequired && t.value.push(U.required);
     };
-    return E(
-      () => o.value,
-      () => h(),
-      { immediate: !k(e.modelValue) }
-    ), (a, t) => (u(), n("div", {
-      class: f(a.$style.radios)
+    return x(
+      () => d.value,
+      () => L(),
+      { immediate: !D(e.modelValue) }
+    ), (r, o) => (u(), n("div", {
+      class: V(r.$style.radios),
+      role: "radiogroup",
+      "aria-label": a.ariaLabelledBy ? void 0 : a.ariaLabel,
+      "aria-labelledby": a.ariaLabelledBy,
+      "aria-required": a.isRequired || void 0,
+      "aria-describedby": t.value.length ? c(b) : void 0
     }, [
-      (u(!0), n(M, null, R(s.options, (l) => {
-        var c, m, b, v, p;
+      (u(!0), n(z, null, G(a.options, (l) => {
+        var m, y, f, v, g, p;
         return u(), n("label", {
           key: l.value,
-          class: f(a.$style.radio),
-          style: z({
-            "--border-color": (m = (c = d.value) == null ? void 0 : c.border) == null ? void 0 : m.color,
-            "--border-size": (v = (b = d.value) == null ? void 0 : b.border) == null ? void 0 : v.size,
-            "--background-color": (p = d.value) == null ? void 0 : p.backgroundColor,
-            "--duration": s.isDisableAnimation ? "0s" : ".3s"
+          class: V(r.$style.radio),
+          style: w({
+            "--text-color": (m = s.value) == null ? void 0 : m.textColor,
+            "--border-color": (f = (y = s.value) == null ? void 0 : y.border) == null ? void 0 : f.color,
+            "--border-size": (g = (v = s.value) == null ? void 0 : v.border) == null ? void 0 : g.size,
+            "--background-color": (p = s.value) == null ? void 0 : p.backgroundColor,
+            "--duration": a.isDisableAnimation ? "0s" : ".3s"
           })
         }, [
-          G(g("input", {
-            "onUpdate:modelValue": t[0] || (t[0] = (q) => o.value = q),
+          A(q("input", {
+            "onUpdate:modelValue": o[0] || (o[0] = (R) => d.value = R),
             type: "radio",
-            name: w(S),
+            name: c(C),
             value: l.value,
-            disabled: s.isDisabled,
-            required: s.isRequired,
-            checked: l.value === o.value
-          }, null, 8, $), [
-            [x, o.value]
+            disabled: a.isDisabled,
+            required: a.isRequired,
+            checked: l.value === d.value
+          }, null, 8, j), [
+            [N, d.value]
           ]),
-          g("span", null, A(l.label), 1)
+          q("span", null, I(l.label), 1)
         ], 6);
       }), 128)),
-      N(U, { errorMessages: i.value }, null, 8, ["errorMessages"])
-    ], 2));
+      O($, {
+        id: c(b),
+        errorMessages: t.value
+      }, null, 8, ["id", "errorMessages"])
+    ], 10, F));
   }
 });
 export {
-  J as default
+  Q as default
 };

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_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}._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)}._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_cv8hf_1{--list-gap: var(--sp-large);list-style:none;margin:0;padding:0;display:grid;grid-template-rows:1fr;gap:var(--list-gap);width:100%}@keyframes _fadeIn_cv8hf_1{0%{opacity:0}to{opacity:1}}@container (width <= 576px){._list_cv8hf_1{grid-template-columns:repeat(auto-fit,100%)}}@container (576px <= width){._list_cv8hf_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_cv8hf_1{grid-template-columns:repeat(auto-fit,calc((100% - var(--list-gap) * (var(--column-number) - 1)) / var(--column-number)))}}._list_cv8hf_1>li{opacity:0;animation-name:_fadeIn_cv8hf_1;animation-duration:1s;animation-timing-function:ease-out;animation-fill-mode:forwards}@container (width <= 576px){._list_cv8hf_1._pickup_cv8hf_42>li:first-child{grid-column:1}}@container (576px <= width){._list_cv8hf_1._pickup_cv8hf_42>li:first-child{grid-column:span var(--tablet-column-number)}}@container (992px <= width){._list_cv8hf_1._pickup_cv8hf_42>li:first-child{grid-column:span var(--column-number)}}._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_1ocs4_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_1ocs4_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_1ocs4_1)._loading_1ocs4_25,:is(._button_1ocs4_1):disabled{pointer-events:none!important}:is(._button_1ocs4_1)._loading_1ocs4_25:before,:is(._button_1ocs4_1):disabled:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:all;cursor:not-allowed!important}:is(._button_1ocs4_1)._loading_1ocs4_25>*:not(:is(._loading_animation_1ocs4_35)){opacity:0}:is(._loading_animation_1ocs4_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_1ocs4_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}._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)}._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_cv8hf_1{--list-gap: var(--sp-large);list-style:none;margin:0;padding:0;display:grid;grid-template-rows:1fr;gap:var(--list-gap);width:100%}@keyframes _fadeIn_cv8hf_1{0%{opacity:0}to{opacity:1}}@container (width <= 576px){._list_cv8hf_1{grid-template-columns:repeat(auto-fit,100%)}}@container (576px <= width){._list_cv8hf_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_cv8hf_1{grid-template-columns:repeat(auto-fit,calc((100% - var(--list-gap) * (var(--column-number) - 1)) / var(--column-number)))}}._list_cv8hf_1>li{opacity:0;animation-name:_fadeIn_cv8hf_1;animation-duration:1s;animation-timing-function:ease-out;animation-fill-mode:forwards}@container (width <= 576px){._list_cv8hf_1._pickup_cv8hf_42>li:first-child{grid-column:1}}@container (576px <= width){._list_cv8hf_1._pickup_cv8hf_42>li:first-child{grid-column:span var(--tablet-column-number)}}@container (992px <= width){._list_cv8hf_1._pickup_cv8hf_42>li:first-child{grid-column:span var(--column-number)}}._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.12.0",
+  "version": "0.13.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.7.0",
+    "@geckou/ui-core": "^0.8.0",
     "date-fns": "^4.4.0"
   },
   "scripts": {