diff --git a/src/components/Base/BaseButton.vue b/src/components/Base/BaseButton.vue
index 401f3c91ac..fd7a09e501 100644
--- a/src/components/Base/BaseButton.vue
+++ b/src/components/Base/BaseButton.vue
@@ -23,9 +23,9 @@ defineEmits<{
 </script>
 
 <style scoped lang="scss">
-@use "@/styles/variables" as vars;
-@use "@/styles/mixin" as mixin;
-@use "@/styles/colors-v2" as colors;
+@use "@/styles/v2/variables" as vars;
+@use "@/styles/v2/mixin" as mixin;
+@use "@/styles/v2/colors" as colors;
 
 .button {
   display: flex;
diff --git a/src/components/Base/BaseDocumentView.vue b/src/components/Base/BaseDocumentView.vue
index 8041ad2aad..94845a8e94 100644
--- a/src/components/Base/BaseDocumentView.vue
+++ b/src/components/Base/BaseDocumentView.vue
@@ -5,9 +5,9 @@
 </template>
 
 <style scoped lang="scss">
-@use "@/styles/variables" as vars;
-@use "@/styles/mixin" as mixin;
-@use "@/styles/colors-v2" as colors;
+@use "@/styles/v2/variables" as vars;
+@use "@/styles/v2/mixin" as mixin;
+@use "@/styles/v2/colors" as colors;
 
 .document {
   :deep(*) {
diff --git a/src/components/Base/BaseListItem.vue b/src/components/Base/BaseListItem.vue
index da6a6cb719..24b235c83b 100644
--- a/src/components/Base/BaseListItem.vue
+++ b/src/components/Base/BaseListItem.vue
@@ -20,9 +20,9 @@ defineEmits<{
 </script>
 
 <style scoped lang="scss">
-@use "@/styles/variables" as vars;
-@use "@/styles/mixin" as mixin;
-@use "@/styles/colors-v2" as colors;
+@use "@/styles/v2/variables" as vars;
+@use "@/styles/v2/mixin" as mixin;
+@use "@/styles/v2/colors" as colors;
 
 .listitem {
   color: colors.$display;
diff --git a/src/components/Base/BaseRowCard.vue b/src/components/Base/BaseRowCard.vue
index aa111f98bd..4d4b5774c0 100644
--- a/src/components/Base/BaseRowCard.vue
+++ b/src/components/Base/BaseRowCard.vue
@@ -27,9 +27,9 @@ defineEmits<{
 </script>
 
 <style scoped lang="scss">
-@use "@/styles/variables" as vars;
-@use "@/styles/mixin" as mixin;
-@use "@/styles/colors-v2" as colors;
+@use "@/styles/v2/variables" as vars;
+@use "@/styles/v2/mixin" as mixin;
+@use "@/styles/v2/colors" as colors;
 
 .row-card {
   display: flex;
diff --git a/src/components/Base/BaseScrollArea.vue b/src/components/Base/BaseScrollArea.vue
index 6320701ae2..13745fb07d 100644
--- a/src/components/Base/BaseScrollArea.vue
+++ b/src/components/Base/BaseScrollArea.vue
@@ -26,8 +26,8 @@ import {
 </script>
 
 <style scoped lang="scss">
-@use "@/styles/variables" as vars;
-@use "@/styles/colors-v2" as colors;
+@use "@/styles/v2/variables" as vars;
+@use "@/styles/v2/colors" as colors;
 
 .ScrollAreaRoot {
   width: 100%;
diff --git a/src/components/Dialog/HelpDialog/HelpDialog.vue b/src/components/Dialog/HelpDialog/HelpDialog.vue
index 9935c5d11a..3898ab7460 100644
--- a/src/components/Dialog/HelpDialog/HelpDialog.vue
+++ b/src/components/Dialog/HelpDialog/HelpDialog.vue
@@ -284,8 +284,8 @@ const openLogDirectory = window.backend.openLogDirectory;
 </script>
 
 <style scoped lang="scss">
-@use "@/styles/colors-v2" as colors;
-@use "@/styles/variables" as vars;
+@use "@/styles/v2/colors" as colors;
+@use "@/styles/v2/variables" as vars;
 
 .grid {
   display: grid;
@@ -308,8 +308,8 @@ const openLogDirectory = window.backend.openLogDirectory;
 }
 
 .list-label {
-  padding: 8px 16px;
-  padding-top: 16px;
+  padding: vars.$padding-2;
+  padding-bottom: vars.$padding-1;
   color: colors.$display-sub;
 }
 
diff --git a/src/components/Dialog/HelpDialog/HelpLibraryPolicySection.vue b/src/components/Dialog/HelpDialog/HelpLibraryPolicySection.vue
index 97e055dace..4007eaa0dc 100644
--- a/src/components/Dialog/HelpDialog/HelpLibraryPolicySection.vue
+++ b/src/components/Dialog/HelpDialog/HelpLibraryPolicySection.vue
@@ -126,9 +126,9 @@ const selectCharacterInfo = (index: DetailKey | undefined) => {
 </script>
 
 <style scoped lang="scss">
-@use "@/styles/variables" as vars;
-@use "@/styles/mixin" as mixin;
-@use "@/styles/colors-v2" as colors;
+@use "@/styles/v2/variables" as vars;
+@use "@/styles/v2/mixin" as mixin;
+@use "@/styles/v2/colors" as colors;
 
 .container {
   // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
diff --git a/src/components/Dialog/HelpDialog/HelpMarkdownViewSection.vue b/src/components/Dialog/HelpDialog/HelpMarkdownViewSection.vue
index c13d8dc698..44648f80c6 100644
--- a/src/components/Dialog/HelpDialog/HelpMarkdownViewSection.vue
+++ b/src/components/Dialog/HelpDialog/HelpMarkdownViewSection.vue
@@ -31,8 +31,8 @@ onMounted(async () => {
 </script>
 
 <style scoped lang="scss">
-@use "@/styles/variables" as vars;
-@use "@/styles/colors-v2" as colors;
+@use "@/styles/v2/variables" as vars;
+@use "@/styles/v2/colors" as colors;
 
 .container {
   // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
diff --git a/src/components/Dialog/HelpDialog/HelpOssLicenseSection.vue b/src/components/Dialog/HelpDialog/HelpOssLicenseSection.vue
index de040987f4..cd575c5980 100644
--- a/src/components/Dialog/HelpDialog/HelpOssLicenseSection.vue
+++ b/src/components/Dialog/HelpDialog/HelpOssLicenseSection.vue
@@ -55,9 +55,9 @@ const selectLicenseIndex = (index: number | undefined) => {
 </script>
 
 <style scoped lang="scss">
-@use "@/styles/variables" as vars;
-@use "@/styles/mixin" as mixin;
-@use "@/styles/colors-v2" as colors;
+@use "@/styles/v2/variables" as vars;
+@use "@/styles/v2/mixin" as mixin;
+@use "@/styles/v2/colors" as colors;
 
 .container {
   // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
diff --git a/src/components/Dialog/HelpDialog/HelpUpdateInfoSection.vue b/src/components/Dialog/HelpDialog/HelpUpdateInfoSection.vue
index e0f6a62087..d7639fac87 100644
--- a/src/components/Dialog/HelpDialog/HelpUpdateInfoSection.vue
+++ b/src/components/Dialog/HelpDialog/HelpUpdateInfoSection.vue
@@ -56,9 +56,9 @@ const props = defineProps<{
 </script>
 
 <style scoped lang="scss">
-@use "@/styles/variables" as vars;
-@use "@/styles/mixin" as mixin;
-@use "@/styles/colors-v2" as colors;
+@use "@/styles/v2/variables" as vars;
+@use "@/styles/v2/mixin" as mixin;
+@use "@/styles/v2/colors" as colors;
 
 .container {
   // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
@@ -75,15 +75,13 @@ const props = defineProps<{
 }
 
 .info {
-  background-color: #e9f3e7;
-  padding: 16px;
-  border-radius: 16px;
+  border: 1px solid colors.$border;
+  background-color: colors.$surface;
+  padding: vars.$padding-2;
+  border-radius: vars.$radius-2;
 }
 
 .info-title {
-  font-size: 1.25rem;
-  font-weight: bold;
-  line-height: 2;
-  margin: 0;
+  @include mixin.headline-2;
 }
 </style>
diff --git a/src/components/Dialog/ImportSongProjectDialog.vue b/src/components/Dialog/ImportSongProjectDialog.vue
index 70cb072a58..8bc528f960 100644
--- a/src/components/Dialog/ImportSongProjectDialog.vue
+++ b/src/components/Dialog/ImportSongProjectDialog.vue
@@ -301,3 +301,13 @@ const handleCancel = () => {
   onDialogCancel();
 };
 </script>
+
+<style scoped lang="scss">
+// detailsタグのスタイル
+details {
+  summary {
+    display: list-item;
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/src/styles/_index.scss b/src/styles/_index.scss
index 7216c8fa49..dad189293b 100644
--- a/src/styles/_index.scss
+++ b/src/styles/_index.scss
@@ -1,6 +1,7 @@
 @use './variables' as vars;
 @use './colors' as colors;
-@use './colors-v2' as colors-v2;
+@use './v2/variables' as vars-v2;
+@use './v2/colors' as colors-v2;
 @import "./fonts";
 
 // 優先度を強引に上げる
diff --git a/src/styles/colors-v2.scss b/src/styles/v2/colors.scss
similarity index 97%
rename from src/styles/colors-v2.scss
rename to src/styles/v2/colors.scss
index 34561a7146..0be6e9fc8c 100644
--- a/src/styles/colors-v2.scss
+++ b/src/styles/v2/colors.scss
@@ -17,8 +17,8 @@ $primitive-red: #d04756;
   --color-v2-border: #{rgba($primitive-black, 0.2)};
   --color-v2-selected: #{rgba($primitive-primary, 0.3)};
 
-  --color-v2-display: #{$primitive-black, 10%};
-  --color-v2-display-oncolor: #{$primitive-black, 10%};
+  --color-v2-display: #{lighten($primitive-black, 10%)};
+  --color-v2-display-oncolor: #{lighten($primitive-black, 10%)};
   --color-v2-display-sub: #{rgba($primitive-black, 0.5)};
   --color-v2-display-link: #{$primitive-blue};
   --color-v2-display-warning: #{$primitive-red};
diff --git a/src/styles/mixin.scss b/src/styles/v2/mixin.scss
similarity index 100%
rename from src/styles/mixin.scss
rename to src/styles/v2/mixin.scss
diff --git a/src/styles/v2/variables.scss b/src/styles/v2/variables.scss
new file mode 100644
index 0000000000..e61d32c06d
--- /dev/null
+++ b/src/styles/v2/variables.scss
@@ -0,0 +1,24 @@
+:root {
+  --size-basis: 8px;
+  --padding-basis: 8px;
+  --gap-basis: 8px;
+  --radius-basis: 8px;
+}
+
+$size-scrollbar: calc(var(--size-basis) * 1.5);
+$size-icon: calc(var(--size-basis) * 2);
+$size-indicator: calc(var(--size-basis) * 3);
+$size-control: calc(var(--size-basis) * 4);
+$size-listitem: calc(var(--size-basis) * 5);
+$size-fab: calc(var(--size-basis) * 6);
+
+$padding-1: var(--padding-basis);
+$padding-2: calc(var(--padding-basis) * 2);
+
+$gap-1: var(--gap-basis);
+$gap-2: calc(var(--gap-basis) * 2);
+
+$radius-1: var(--radius-basis);
+$radius-2: calc(var(--radius-basis) * 2);
+
+$transition-duration: 100ms;
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 145de998ea..d87e1641b6 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -6,28 +6,3 @@ $menubar-height: 24px;
 $detail-view-splitter-cell-z-index: 2;
 
 $character-item-size: 215px; // キャラクター並び替えダイアログなどでの１キャラ表示要素の横幅
-
-:root {
-  --size-basis: 8px;
-  --padding-basis: 8px;
-  --gap-basis: 8px;
-  --radius-basis: 8px;
-}
-
-$size-scrollbar: calc(var(--size-basis) * 1.5);
-$size-icon: calc(var(--size-basis) * 2);
-$size-indicator: calc(var(--size-basis) * 3);
-$size-control: calc(var(--size-basis) * 4);
-$size-listitem: calc(var(--size-basis) * 5);
-$size-fab: calc(var(--size-basis) * 6);
-
-$padding-1: var(--padding-basis);
-$padding-2: calc(var(--padding-basis) * 2);
-
-$gap-1: var(--gap-basis);
-$gap-2: calc(var(--gap-basis) * 2);
-
-$radius-1: var(--radius-basis);
-$radius-2: calc(var(--radius-basis) * 2);
-
-$transition-duration: 100ms;
diff --git a/tests/unit/components/help/HelpMarkdownViewSection.ts b/tests/unit/components/help/HelpMarkdownViewSection.spec.ts
similarity index 87%
rename from tests/unit/components/help/HelpMarkdownViewSection.ts
rename to tests/unit/components/help/HelpMarkdownViewSection.spec.ts
index 4f38f080fe..2e6a024e0e 100644
--- a/tests/unit/components/help/HelpMarkdownViewSection.ts
+++ b/tests/unit/components/help/HelpMarkdownViewSection.spec.ts
@@ -1,6 +1,6 @@
 import { mount, flushPromises } from "@vue/test-utils";
 import { describe, it } from "vitest";
-import HelpMarkdownViewSection from "@/components/template/HelpMarkdownViewSection.vue";
+import HelpMarkdownViewSection from "@/components/Dialog/HelpDialog/HelpMarkdownViewSection.vue";
 import { markdownItPlugin } from "@/plugins/markdownItPlugin";
 
 describe("HelpMarkdownViewSection.vue", () => {