diff --git a/content/articles/basics/illustration/index.mdx b/content/articles/basics/illustration/index.mdx
index ef0525651..c32e53d91 100644
--- a/content/articles/basics/illustration/index.mdx
+++ b/content/articles/basics/illustration/index.mdx
@@ -5,7 +5,7 @@ order: 5
 ---
 import { Grid } from '@Components/shared/Grid/Grid'
 import { ImgWithDesc } from '@Components/article/ImgWithDesc/ImgWithDesc'
-import { Cluster, LineUp, Stack } from 'smarthr-ui'
+import { Cluster, Stack } from 'smarthr-ui'
 import { DoAndDont } from '@Components/DoAndDont'
 import { AnchorButton } from 'smarthr-ui'
 
diff --git a/content/articles/basics/illustration/smarthr-co.mdx b/content/articles/basics/illustration/smarthr-co.mdx
index e7c70964d..8d7ba6360 100644
--- a/content/articles/basics/illustration/smarthr-co.mdx
+++ b/content/articles/basics/illustration/smarthr-co.mdx
@@ -6,7 +6,7 @@ order: 1
 
 import { Grid } from '@Components/shared/Grid/Grid'
 import { ImgWithDesc } from '@Components/article/ImgWithDesc/ImgWithDesc'
-import { Cluster, LineUp, Stack } from 'smarthr-ui'
+import { Cluster, Stack } from 'smarthr-ui'
 import { DoAndDont } from '@Components/DoAndDont'
 import { AnchorButton } from 'smarthr-ui'
 
diff --git a/content/articles/operational-guideline/page-template/style-template.mdx b/content/articles/operational-guideline/page-template/style-template.mdx
index e9395298d..77dff4a33 100644
--- a/content/articles/operational-guideline/page-template/style-template.mdx
+++ b/content/articles/operational-guideline/page-template/style-template.mdx
@@ -4,7 +4,7 @@ description: 'ページの概要はヘッダーに書けます。ページの概
 order: 1
 ---
 
-import { Button, Cluster, FaPlusCircleIcon, LineUp, Stack, Table, Td, Th, Text } from 'smarthr-ui'
+import { Button, Cluster, FaPlusCircleIcon, Stack, Table, Td, Th, Text } from 'smarthr-ui'
 import { ComponentPreview } from '@Components/ComponentPreview'
 import { DoAndDont } from '@Components/DoAndDont'
 import { StaticImage } from '@Components/StaticImage'
@@ -121,17 +121,6 @@ SmartHR UI Layoutコンポーネントを使用できます。
   ))}
 </Cluster>
 
-### LineUp
-
-* `align-items`や`justify-content`など`Flexbox`に準じたプロパティを渡せます。
-* `gap`に使える値は`XXS`,`XS`,`S`,`M`,`L`,`XL`、他`1`,`0.5`などの数値です。詳しくはsmarthr-uiのドキュメントを参照してください。
-
-<LineUp gap="XS">
-  {[...Array(10)].map((_, i) => (
-    <div key={i} style={{background: 'black', width: `${100}px`, height: '100px'}} />
-  ))}
-</LineUp>
-
 ### Stack
 
 * 等間隔に隙間を保ち、積み重ねるレイアウトが作れます。
@@ -224,7 +213,7 @@ import imageUrl from './images/sample.jpg';
 
 ## Do And Don&apos;t
 
-<LineUp gap="XS">
+<Cluster gap="XS">
   <DoAndDont
     type="do"
     img={<StaticImage src={imageUrl} alt="Do" width="200" />}
@@ -235,5 +224,5 @@ import imageUrl from './images/sample.jpg';
     img={<StaticImage src={imageUrl} alt="Dont" width="200" />}
     label={<Text>ほげほげ</Text>}
   />
-</LineUp>
+</Cluster>
 
diff --git a/content/articles/products/components/headline-area.mdx b/content/articles/products/components/headline-area.mdx
deleted file mode 100644
index ac75d7d6f..000000000
--- a/content/articles/products/components/headline-area.mdx
+++ /dev/null
@@ -1,23 +0,0 @@
----
-title: 'HeadlineArea（非推奨）'
-description: ''
----
-import { ComponentPropsTable } from '@Components/ComponentPropsTable'
-import { ComponentStory } from '@Components/ComponentStory'
-import { BaseColumn, WarningIcon } from 'smarthr-ui'
-
-<BaseColumn>
-  <WarningIcon text={
-    <span>
-      HeadlineAreaコンポーネントは非推奨です。<a href="/products/components/layout/stack/">Stack</a>コンポーネントで書き換えてください。
-    </span>}
-    />
-</BaseColumn>
-
-<ComponentStory name="HeadlineArea" />
-
-## Props
-
-<ComponentPropsTable name="HeadlineArea" />
-
-
diff --git a/content/articles/products/components/layout/line-up.mdx b/content/articles/products/components/layout/line-up.mdx
deleted file mode 100644
index 2fa634a62..000000000
--- a/content/articles/products/components/layout/line-up.mdx
+++ /dev/null
@@ -1,17 +0,0 @@
----
-title: 'LineUp（非推奨）'
-description: ''
----
-import { CompactInformationPanel } from 'smarthr-ui'
-import { ComponentStory } from '@Components/ComponentStory'
-import { ComponentPropsTable } from '@Components/ComponentPropsTable'
-
-<CompactInformationPanel type="warning">
-  <Message>LineUpコンポーネントは非推奨です。<a href="/products/components/layout/cluster/">Cluster</a>または<a href="/products/components/layout/sidebar/">Sidebar</a>コンポーネントを使用してください。</Message>
-</CompactInformationPanel>
-
-<ComponentStory name="LineUp" />
-
-## Props
-
-<ComponentPropsTable name="LineUp" />
diff --git a/content/articles/products/design-patterns-core-features/access-control-setting-pattern.mdx b/content/articles/products/design-patterns-core-features/access-control-setting-pattern.mdx
index 212ceebc1..0ec8c5eee 100644
--- a/content/articles/products/design-patterns-core-features/access-control-setting-pattern.mdx
+++ b/content/articles/products/design-patterns-core-features/access-control-setting-pattern.mdx
@@ -5,7 +5,7 @@ order: 2
 ---
 
 import { DoAndDont } from '@Components/DoAndDont'
-import { FaExclamationTriangleIcon, LineUp } from 'smarthr-ui'
+import { FaExclamationTriangleIcon, Cluster} from 'smarthr-ui'
 
 import imageUrl6Do from './images/access-control-setting-pattern6-do.png'
 import imageUrl6Dont from './images/access-control-setting-pattern6-dont.png'
@@ -103,7 +103,7 @@ SmartHR基本機能の共通設定おける、操作権限を設定する項目
 
 横幅に十分なスペースがある場合は、基本的に横並びにすることで縦幅が長くなりすぎることを防ぎます。
 
-<LineUp gap="XS">
+<Cluster gap="XS">
     <DoAndDont
         type="do"
         img={<img src={imageUrl6Do} alt="スクリーンショット: 設定項目の縦横に配置するレイアウトのDo"/>}
@@ -114,7 +114,7 @@ SmartHR基本機能の共通設定おける、操作権限を設定する項目
         img={<img src={imageUrl6Dont} alt="スクリーンショット: 設定項目の縦横に配置するレイアウトのDon't"/>}
         label="縦並びにすると、親項目の幅に対して要素の配置が偏ってしまい、視認性が低下する恐れがあります。"
     />
-</LineUp>
+</Cluster>
 
 ただし、選択肢の文字が長くなる場合は縦並びを検討します。
 
@@ -125,7 +125,7 @@ SmartHR基本機能の共通設定おける、操作権限を設定する項目
 CRUDなど、設定項目の組み合わせが決まっている操作権限項目が連続して複数並ぶケースで、一部の設定項目が対応していない場合は該当の設定項目を非表示にします。その際、設定項目が表示されていた箇所はそのまま空白として残します。  
 この場合のコンテンツ領域の横幅は、選択肢が存在しているときと同じ横幅になるように固定します。
 
-<LineUp gap="XS">
+<Cluster gap="XS">
     <DoAndDont
         type="do"
         img={<img src={imageUrl13Do} alt="スクリーンショット: 対応しない設定項目を空白として残すレイアウトのDo"/>}
@@ -136,7 +136,7 @@ CRUDなど、設定項目の組み合わせが決まっている操作権限項
         img={<img src={imageUrl13Dont} alt="スクリーンショット: 対応しない設定項目を空白として残すレイアウトのDon't"/>}
         label="詰めずに配置すると、どの設定項目が対応していないのか把握しづらくなるため、空白が必要です。"
     />
-</LineUp>
+</Cluster>
 
 ## 種類
 
diff --git a/package.json b/package.json
index 3eefd89d0..2745c0722 100644
--- a/package.json
+++ b/package.json
@@ -60,7 +60,7 @@
     "react-instantsearch-dom": "^6.40.4",
     "react-live": "^4.1.5",
     "react-string-replace": "^1.1.1",
-    "smarthr-ui": "^43.3.0",
+    "smarthr-ui": "^44.0.0",
     "styled-components": "^5.3.11"
   },
   "devDependencies": {
diff --git a/static/smarthr-ui.css b/static/smarthr-ui.css
index b46d917fd..f38026a91 100644
--- a/static/smarthr-ui.css
+++ b/static/smarthr-ui.css
@@ -26,6 +26,10 @@ input {
   padding-inline: unset
 }
 
+a {
+  color: inherit
+}
+
 *, ::before, ::after {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
@@ -241,6 +245,10 @@ input {
   top: 2px
 }
 
+.shr-z-fixed-menu {
+  z-index: 100
+}
+
 .shr-z-overlap {
   z-index: 10500
 }
@@ -265,6 +273,16 @@ input {
   margin: auto
 }
 
+.-shr-mx-0 {
+  margin-left: 0;
+  margin-right: 0
+}
+
+.-shr-mx-0\.75 {
+  margin-left: -12px;
+  margin-right: -12px
+}
+
 .-shr-mx-1 {
   margin-left: -16px;
   margin-right: -16px
@@ -444,6 +462,41 @@ input {
   box-sizing: content-box
 }
 
+.shr-line-clamp-\[2\] {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2
+}
+
+.shr-line-clamp-\[3\] {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3
+}
+
+.shr-line-clamp-\[4\] {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4
+}
+
+.shr-line-clamp-\[5\] {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 5
+}
+
+.shr-line-clamp-\[6\] {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 6
+}
+
 .shr-block {
   display: block
 }
@@ -500,10 +553,6 @@ input {
   height: 1.75rem
 }
 
-.shr-h-\[40px\] {
-  height: 40px
-}
-
 .shr-h-\[43px\] {
   height: 43px
 }
@@ -1701,22 +1750,6 @@ input {
   border-width: 4px
 }
 
-.shr-border-b-\[3px\] {
-  border-bottom-width: 3px
-}
-
-.shr-border-l-0 {
-  border-left-width: 0px
-}
-
-.shr-border-r-0 {
-  border-right-width: 0px
-}
-
-.shr-border-t-0 {
-  border-top-width: 0px
-}
-
 .shr-border-solid {
   border-style: solid
 }
@@ -2129,6 +2162,10 @@ input {
   padding-top: 4px
 }
 
+.shr-pt-1 {
+  padding-top: 16px
+}
+
 .shr-text-left {
   text-align: left
 }
@@ -2380,6 +2417,10 @@ input {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
 }
 
+.\[box-shadow\:_0_-4px_8px_2px_rgba\(0\2c _0\2c _0\2c _0\.24\)\] {
+  box-shadow: 0 -4px 8px 2px rgba(0, 0, 0, 0.24)
+}
+
 .\[clip-path\:inset\(100\%\)\] {
   -webkit-clip-path: inset(100%);
           clip-path: inset(100%)
@@ -2441,6 +2482,13 @@ input {
   box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0077c7
 }
 
+.aria-selected\:shr-border-b-shorthand[aria-selected="true"] {
+  border-width: 0;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+  border-bottom-color: #d6d3d0
+}
+
 @media (prefers-contrast: more) {
   .contrast-more\:shr-border-shorthand {
     border-width: 1px;
@@ -2948,11 +2996,6 @@ input {
   content: var(--tw-content)
 }
 
-.after\:shr-content-\[\'\'\]::after {
-  --tw-content: '';
-  content: var(--tw-content)
-}
-
 .after\:\[clip-path\:polygon\(0_0\2c 100\%_0\2c 50\%_100\%\)\]::after {
   content: var(--tw-content);
   -webkit-clip-path: polygon(0 0,100% 0,50% 100%);
@@ -3017,6 +3060,10 @@ input {
   border-color: rgb(0 104 174 / var(--tw-border-opacity))
 }
 
+.hover\:shr-border-transparent:hover {
+  border-color: transparent
+}
+
 .hover\:shr-border-white-darken:hover {
   --tw-border-opacity: 1;
   border-color: rgb(242 242 242 / var(--tw-border-opacity))
@@ -3082,6 +3129,10 @@ input {
   border-color: rgb(0 104 174 / var(--tw-border-opacity))
 }
 
+.focus-visible\:shr-border-transparent:focus-visible {
+  border-color: transparent
+}
+
 .focus-visible\:shr-border-white-darken:focus-visible {
   --tw-border-opacity: 1;
   border-color: rgb(242 242 242 / var(--tw-border-opacity))
@@ -3101,6 +3152,10 @@ input {
   background-color: rgba(3,3,2,0.15)
 }
 
+.focus-visible\:shr-bg-transparent:focus-visible {
+  background-color: transparent
+}
+
 .focus-visible\:shr-bg-white-darken:focus-visible {
   --tw-bg-opacity: 1;
   background-color: rgb(242 242 242 / var(--tw-bg-opacity))
@@ -3433,6 +3488,23 @@ input {
   display: none
 }
 
+.aria-selected\:shr-relative[aria-selected="true"] {
+  position: relative
+}
+
+.aria-selected\:shr-h-\[40px\][aria-selected="true"] {
+  height: 40px
+}
+
+.aria-selected\:shr-border-b-\[3px\][aria-selected="true"] {
+  border-bottom-width: 3px
+}
+
+.aria-selected\:shr-border-main[aria-selected="true"] {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 119 199 / var(--tw-border-opacity))
+}
+
 .aria-selected\:shr-bg-main[aria-selected="true"] {
   --tw-bg-opacity: 1;
   background-color: rgb(0 119 199 / var(--tw-bg-opacity))
@@ -3443,6 +3515,11 @@ input {
   background-color: rgb(0 104 174 / var(--tw-bg-opacity))
 }
 
+.aria-selected\:shr-text-black[aria-selected="true"] {
+  --tw-text-opacity: 1;
+  color: rgb(35 34 30 / var(--tw-text-opacity))
+}
+
 .aria-selected\:shr-text-white[aria-selected="true"] {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity))
@@ -3570,6 +3647,10 @@ input {
   margin-bottom: auto
 }
 
+.\[\&\&\&\]\:-shr-mb-0\.25.\[\&\&\&\]\:-shr-mb-0\.25.\[\&\&\&\]\:-shr-mb-0\.25 {
+  margin-bottom: -4px
+}
+
 .\[\&\&\&\]\:shr-cursor-pointer.\[\&\&\&\]\:shr-cursor-pointer.\[\&\&\&\]\:shr-cursor-pointer {
   cursor: pointer
 }
@@ -3861,6 +3942,10 @@ input {
   }
 }
 
+.\[\&\]\:shr-box-border {
+  box-sizing: border-box
+}
+
 .\[\&\]\:shr-items-center {
   align-items: center
 }
@@ -3874,15 +3959,29 @@ input {
   border-color: rgb(224 30 90 / var(--tw-border-opacity))
 }
 
+.\[\&\]\:shr-bg-transparent {
+  background-color: transparent
+}
+
 .\[\&\]\:shr-p-0\.75 {
   padding: 12px
 }
 
+.\[\&\]\:shr-px-0\.25 {
+  padding-left: 4px;
+  padding-right: 4px
+}
+
 .\[\&\]\:shr-px-0\.75 {
   padding-left: 12px;
   padding-right: 12px
 }
 
+.\[\&\]\:shr-text-grey {
+  --tw-text-opacity: 1;
+  color: rgb(112 109 101 / var(--tw-text-opacity))
+}
+
 .\[\&\]\:shr-shadow-none {
   --tw-shadow: 0 0 #0000;
   --tw-shadow-colored: 0 0 #0000;
@@ -3899,6 +3998,10 @@ input {
   background-color: rgb(0 104 174 / var(--tw-bg-opacity))
 }
 
+.\[\&\]\:hover\:shr-bg-transparent:hover {
+  background-color: transparent
+}
+
 .\[\&\]\:hover\:shr-bg-warning-yellow-darken:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(252 197 0 / var(--tw-bg-opacity))
@@ -4164,3 +4267,7 @@ input {
 .\[\&_tr_\+_tr_th\]\:shr-border-\[theme\(backgroundColor\[head-darken\]\)\] tr + tr th {
   border-color: #e2dfda
 }
+
+.\[\&_ul\]\:shr-list-none ul {
+  list-style-type: none
+}
diff --git a/yarn.lock b/yarn.lock
index 213aa5ece..07b977fb4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1536,6 +1536,13 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@babel/runtime@^7.24.0":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.1.tgz#431f9a794d173b53720e69a6464abc6f0e2a5c57"
+  integrity sha512-+BIznRzyqBf+2wCTxcKE3wDjfGeCoVE61KSHGpkzqrLi8qxqFwBeUFyId2cxkTmm55fzDGnm0+yCxaxygrLUnQ==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/runtime@^7.9.2":
   version "7.17.9"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.9.tgz#d19fbf802d01a8cb6cf053a64e472d42c434ba72"
@@ -14696,10 +14703,10 @@ smarthr-normalize-css@^1.1.0:
   dependencies:
     styled-reset "^4.4.2"
 
-smarthr-ui@^43.3.0:
-  version "43.3.0"
-  resolved "https://registry.yarnpkg.com/smarthr-ui/-/smarthr-ui-43.3.0.tgz#78b7f0f2e1379948d589bc30dcf05892f48f9e47"
-  integrity sha512-P70tchsFx0qfNnPY8CJdMGC2j++FhBWzPGQWu6XSNTqCyjQVsMR2m8YKbMo0oSZzHicr/sqoWJeD7DdoF9anLA==
+smarthr-ui@^44.0.0:
+  version "44.0.0"
+  resolved "https://registry.yarnpkg.com/smarthr-ui/-/smarthr-ui-44.0.0.tgz#a04a29346bf3e0a4e59b6cc6de33e96ce667ea4c"
+  integrity sha512-vf5sPzxLAoak+ZTgJqF98sfXuySXEJ9xetOszTom7OW2+mfWkjg0HuF7SnFTmS6Wq919YqPcsAVvNDrsi/DoGg==
   dependencies:
     "@smarthr/wareki" "^1.2.0"
     dayjs "^1.11.10"
@@ -14710,7 +14717,7 @@ smarthr-ui@^43.3.0:
     react-icons "^5.0.1"
     react-innertext "^1.1.5"
     react-transition-group "^4.4.5"
-    tailwind-variants "^0.1.20"
+    tailwind-variants "^0.2.1"
     tailwindcss "^3.4.1"
 
 snake-case@^2.1.0:
@@ -15492,17 +15499,19 @@ table@^6.8.1:
     string-width "^4.2.3"
     strip-ansi "^6.0.1"
 
-tailwind-merge@^1.14.0:
-  version "1.14.0"
-  resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-1.14.0.tgz#e677f55d864edc6794562c63f5001f45093cdb8b"
-  integrity sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==
+tailwind-merge@^2.2.0:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-2.2.2.tgz#87341e7604f0e20499939e152cd2841f41f7a3df"
+  integrity sha512-tWANXsnmJzgw6mQ07nE3aCDkCK4QdT3ThPMCzawoYA2Pws7vSTCvz3Vrjg61jVUGfFZPJzxEP+NimbcW+EdaDw==
+  dependencies:
+    "@babel/runtime" "^7.24.0"
 
-tailwind-variants@^0.1.20:
-  version "0.1.20"
-  resolved "https://registry.yarnpkg.com/tailwind-variants/-/tailwind-variants-0.1.20.tgz#8aaed9094be0379a438641a42d588943e44c5fcd"
-  integrity sha512-AMh7x313t/V+eTySKB0Dal08RHY7ggYK0MSn/ad8wKWOrDUIzyiWNayRUm2PIJ4VRkvRnfNuyRuKbLV3EN+ewQ==
+tailwind-variants@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/tailwind-variants/-/tailwind-variants-0.2.1.tgz#132f2537b0150819036f6c4f47d5c50b929b758d"
+  integrity sha512-2xmhAf4UIc3PijOUcJPA1LP4AbxhpcHuHM2C26xM0k81r0maAO6uoUSHl3APmvHZcY5cZCY/bYuJdfFa4eGoaw==
   dependencies:
-    tailwind-merge "^1.14.0"
+    tailwind-merge "^2.2.0"
 
 tailwindcss@^3.4.1:
   version "3.4.1"