diff --git a/src/components/pages/Notice.astro b/src/components/pages/Notice.astro
index 01a813e9e9..7fc730fdfe 100644
--- a/src/components/pages/Notice.astro
+++ b/src/components/pages/Notice.astro
@@ -56,12 +56,12 @@ for (const notice of noticesWithId) {
 </script>
 
 <style lang="scss">
-  @import "@styles/color.scss";
+  @use "@styles/color";
 
   .date {
     display: inline-block;
     width: 6rem;
-    color: $heading-color;
+    color: color.$heading-color;
     margin-right: 5px;
 
     :where(.date_list).localized & {
diff --git a/src/components/pages/mfa/BaseTabSelectorButton.astro b/src/components/pages/mfa/BaseTabSelectorButton.astro
index 2e455ac1ec..d037acbde4 100644
--- a/src/components/pages/mfa/BaseTabSelectorButton.astro
+++ b/src/components/pages/mfa/BaseTabSelectorButton.astro
@@ -88,9 +88,9 @@ function labelProps(selection: Selection) {
 </script>
 
 <style lang="scss">
-  @import "@styles/color.scss";
+  @use "@styles/color";
 
-  $main-color: $heading-color;
+  $main-color: color.$heading-color;
   $sub-color: white;
 
   // buttonのmarginの優先度を上げるため.wrapperが必要
@@ -140,16 +140,16 @@ function labelProps(selection: Selection) {
 
   button :global(p) {
     font-size: 0.9em;
-    color: $black-gray;
+    color: color.$black-gray;
     margin: 0.5em 0 0;
   }
 
   p {
     font-weight: bold;
-    color: $red;
+    color: color.$red;
     margin: 0.2em;
     padding: 12px;
     border-radius: 5px;
-    border: 1px solid $red;
+    border: 1px solid color.$red;
   }
 </style>
diff --git a/src/components/pages/mfa/BaseTabSelectorGrid.astro b/src/components/pages/mfa/BaseTabSelectorGrid.astro
index 4724ff0aa2..ab9d9133ed 100644
--- a/src/components/pages/mfa/BaseTabSelectorGrid.astro
+++ b/src/components/pages/mfa/BaseTabSelectorGrid.astro
@@ -103,13 +103,13 @@ function radioProps(step: Step, selection: Selection): DemiRadioButtonProps {
 </script>
 
 <style lang="scss">
-  @import "@styles/color.scss";
+  @use "@styles/color";
 
   .wrapper {
     display: grid;
     grid-template-columns: auto 4rem 4rem;
     // row-gap: 0.5rem;
-    border: 1px solid $white-gray-dark;
+    border: 1px solid color.$white-gray-dark;
     margin: 1rem 0;
     padding: 0.5rem 0;
 
@@ -141,7 +141,7 @@ function radioProps(step: Step, selection: Selection): DemiRadioButtonProps {
     p.col-label {
       padding: 0.1rem 0.5rem;
       font-weight: bold;
-      background-color: $white-gray-light;
+      background-color: color.$white-gray-light;
     }
     p.col-first,
     p.col-alt {
@@ -150,12 +150,12 @@ function radioProps(step: Step, selection: Selection): DemiRadioButtonProps {
     span.col-first,
     span.col-alt {
       position: relative;
-      background-color: $white-gray-dark;
-      border-inline-start: 1px solid $white-gray-light;
-      border-inline-end: 1px solid $white-gray-light;
+      background-color: color.$white-gray-dark;
+      border-inline-start: 1px solid color.$white-gray-light;
+      border-inline-end: 1px solid color.$white-gray-light;
 
       &:has(input[type="radio"]:disabled) {
-        background-color: $white-gray-light;
+        background-color: color.$white-gray-light;
       }
 
       & > input[type="radio"] {
diff --git a/src/components/pages/mfa/BaseTabs.astro b/src/components/pages/mfa/BaseTabs.astro
index c989298c3c..219db4fc48 100644
--- a/src/components/pages/mfa/BaseTabs.astro
+++ b/src/components/pages/mfa/BaseTabs.astro
@@ -81,7 +81,7 @@ function panelProps(selection: Selection) {
 </script>
 
 <style lang="scss">
-  @import "@styles/color.scss";
+  @use "@styles/color";
 
   .tab-list {
     display: flex;
@@ -93,16 +93,16 @@ function panelProps(selection: Selection) {
   .panel-list {
     padding: 0.5rem;
     margin: 0 0 1.5rem;
-    border: 1px solid $white-gray-light;
+    border: 1px solid color.$white-gray-light;
   }
   button.tab {
     display: block;
     flex: 1;
-    background-color: $white-gray-dark;
+    background-color: color.$white-gray-dark;
     padding: 0.75rem 0.5rem;
     border-width: 0 0.5px;
     border-style: solid;
-    border-color: $white-gray-light;
+    border-color: color.$white-gray-light;
     outline: none;
     box-shadow: none;
 
@@ -111,9 +111,9 @@ function panelProps(selection: Selection) {
     }
 
     &[aria-selected="true"] {
-      color: $heading-color;
-      background-color: $white-gray-light;
-      border-bottom: 4px solid $heading-color;
+      color: color.$heading-color;
+      background-color: color.$white-gray-light;
+      border-bottom: 4px solid color.$heading-color;
       font-weight: bold;
     }
   }
diff --git a/src/components/pages/mfa/DemiRadioButton.astro b/src/components/pages/mfa/DemiRadioButton.astro
index 2c5e102b85..befe594724 100644
--- a/src/components/pages/mfa/DemiRadioButton.astro
+++ b/src/components/pages/mfa/DemiRadioButton.astro
@@ -11,11 +11,11 @@ export interface Props
 <span class="button-inner"></span>
 
 <style lang="scss">
-  @import "@styles/color.scss";
+  @use "@styles/color";
 
   span.button-outer {
     position: absolute;
-    border: 2px solid $black-gray;
+    border: 2px solid color.$black-gray;
     border-radius: 50%;
     width: 1.2rem;
     height: 1.2rem;
@@ -30,8 +30,8 @@ export interface Props
 
   span.button-inner {
     position: absolute;
-    border: 2px solid $white-gray-light;
-    background-color: $white-gray-light;
+    border: 2px solid color.$white-gray-light;
+    background-color: color.$white-gray-light;
     border-radius: 50%;
     width: 0.8rem;
     height: 0.8rem;
@@ -39,7 +39,7 @@ export interface Props
     margin: auto !important;
 
     input:checked ~ & {
-      background-color: $black-gray;
+      background-color: color.$black-gray;
     }
 
     input:disabled ~ & {
diff --git a/src/layouts/Footer/Buttons.astro b/src/layouts/Footer/Buttons.astro
index 61e301ba73..fe307c330d 100644
--- a/src/layouts/Footer/Buttons.astro
+++ b/src/layouts/Footer/Buttons.astro
@@ -52,7 +52,7 @@ const supportUrl = {
 </div>
 
 <style lang="scss">
-  @import "@styles/color.scss";
+  @use "@styles/color";
   .wrap {
     position: fixed;
     right: 0;
@@ -107,7 +107,7 @@ const supportUrl = {
 
         &:hover {
           color: #fff;
-          background-color: $body-link-color;
+          background-color: color.$body-link-color;
         }
       }
 
@@ -131,7 +131,7 @@ const supportUrl = {
         transition: all 0.2s ease-in-out;
 
         @media not all and (max-width: 768px) {
-          background-color: $footer-background-color;
+          background-color: color.$footer-background-color;
           margin: 0 auto;
 
           width: 3rem;
@@ -167,7 +167,7 @@ const supportUrl = {
 
         @media not all and (max-width: 768px) {
           margin-top: 0.375rem;
-          color: $footer-background-color;
+          color: color.$footer-background-color;
           font-size: 0.75rem;
         }
 
@@ -180,11 +180,11 @@ const supportUrl = {
       @media not all and (max-width: 768px) {
         &:hover {
           .icon {
-            background-color: $body-link-color;
+            background-color: color.$body-link-color;
           }
 
           .description {
-            color: $body-link-color;
+            color: color.$body-link-color;
           }
         }
       }
diff --git a/src/layouts/Footer/SocialLinks.astro b/src/layouts/Footer/SocialLinks.astro
index 1437fda32e..5ae994783b 100644
--- a/src/layouts/Footer/SocialLinks.astro
+++ b/src/layouts/Footer/SocialLinks.astro
@@ -61,11 +61,11 @@ const socialMediaPolicy: {
 </div>
 
 <style lang="scss">
-  @import "../../styles/color.scss";
+  @use "@styles/color";
 
   div.social-links {
-    background: $white-gray-light;
-    border-bottom: 5px solid $heading-color;
+    background: color.$white-gray-light;
+    border-bottom: 5px solid color.$heading-color;
 
     padding: 0.5rem 4rem 0.5rem;
     @media (max-width: 768px) {
@@ -114,7 +114,7 @@ const socialMediaPolicy: {
         align-items: center;
         & > a {
           text-decoration: none;
-          color: $footer-background-color;
+          color: color.$footer-background-color;
           &:hover {
             text-decoration: underline;
           }
diff --git a/src/layouts/Footer/index.astro b/src/layouts/Footer/index.astro
index deb178baa9..2b571d1077 100644
--- a/src/layouts/Footer/index.astro
+++ b/src/layouts/Footer/index.astro
@@ -55,9 +55,9 @@ const topUrl = {
 </footer>
 
 <style lang="scss">
-  @import "../../styles/color.scss";
+  @use "@styles/color";
   div.footer {
-    background-color: $footer-background-color;
+    background-color: color.$footer-background-color;
     color: white;
     padding: 2rem 4rem 8rem;
     :link,
diff --git a/src/layouts/Header/Navigation.astro b/src/layouts/Header/Navigation.astro
index a594d82bea..5fb5716b80 100644
--- a/src/layouts/Header/Navigation.astro
+++ b/src/layouts/Header/Navigation.astro
@@ -38,8 +38,8 @@ const data: Navigation[] = {
 </nav>
 
 <style lang="scss">
-  @import "../../styles/color";
-  @import "./variables";
+  @use "@styles/color";
+  @use "variables";
 
   nav.header {
     grid-row: 2 / 3;
@@ -52,7 +52,7 @@ const data: Navigation[] = {
       text-decoration: none;
     }
 
-    @media not all and (max-width: $header-hamburger-breakpoint) {
+    @media not all and (max-width: variables.$header-hamburger-breakpoint) {
       & > ul {
         display: flex;
         margin: 0;
@@ -90,7 +90,7 @@ const data: Navigation[] = {
             transform: translateX(-50%);
             margin: 0 auto;
             padding: 0;
-            background: $header-nav-bg-color;
+            background: color.$header-nav-bg-color;
             transition: all 0.1875s ease;
             & > li {
               display: block;
@@ -100,7 +100,7 @@ const data: Navigation[] = {
                 display: block;
                 padding: 0.5rem 0;
                 &:hover {
-                  background: $header-nav-bg-color-dark;
+                  background: color.$header-nav-bg-color-dark;
                 }
               }
             }
@@ -136,30 +136,30 @@ const data: Navigation[] = {
       }
     }
 
-    @media (max-width: $header-hamburger-breakpoint) {
+    @media (max-width: variables.$header-hamburger-breakpoint) {
       & > ul {
         display: block;
         margin: 0;
         padding: 0;
-        border-bottom: 1px solid $white-gray-dark;
-        background: $header-nav-bg-color;
+        border-bottom: 1px solid color.$white-gray-dark;
+        background: color.$header-nav-bg-color;
         & > li {
           display: block;
           & > div {
             padding: 0.5em 1em;
-            border-top: 1px solid $white-gray-dark;
+            border-top: 1px solid color.$white-gray-dark;
           }
           & > ul {
             display: block;
             padding: 0;
             & > li {
               display: block;
-              border-top: 1px solid $gray;
+              border-top: 1px solid color.$gray;
               & > a {
                 display: block;
                 padding: 0.5em 1em 0.5em 2em;
                 &:hover {
-                  background: $header-nav-bg-color-dark;
+                  background: color.$header-nav-bg-color-dark;
                 }
               }
             }
diff --git a/src/layouts/Header/index.astro b/src/layouts/Header/index.astro
index 67a37fee5e..814c0ab4c2 100644
--- a/src/layouts/Header/index.astro
+++ b/src/layouts/Header/index.astro
@@ -114,8 +114,8 @@ const theOtherLangUrl = canonicalUrl.pathname.startsWith("/en/")
 </script>
 
 <style lang="scss">
-  @import "../../styles/color";
-  @import "./variables";
+  @use "@styles/color";
+  @use "variables";
 
   header.header {
     display: grid;
@@ -139,7 +139,7 @@ const theOtherLangUrl = canonicalUrl.pathname.startsWith("/en/")
   #changeLangNavigation {
     display: none;
   }
-  @media (max-width: $header-hamburger-breakpoint) {
+  @media (max-width: variables.$header-hamburger-breakpoint) {
     header.header {
       display: flex;
       flex-flow: column;
@@ -174,11 +174,11 @@ const theOtherLangUrl = canonicalUrl.pathname.startsWith("/en/")
   }
 
   @mixin background {
-    background-color: $header-background-color-primary;
+    background-color: color.$header-background-color-primary;
     background-image: linear-gradient(
       120deg,
-      $header-background-color-secondary,
-      $header-background-color-primary
+      color.$header-background-color-secondary,
+      color.$header-background-color-primary
     );
   }
   header.header {
@@ -190,12 +190,12 @@ const theOtherLangUrl = canonicalUrl.pathname.startsWith("/en/")
       text-decoration: none;
     }
   }
-  @media (max-width: $header-hamburger-breakpoint) {
+  @media (max-width: variables.$header-hamburger-breakpoint) {
     .primary {
       @include background;
     }
     .hamburger-contents {
-      background-color: $header-nav-bg-color;
+      background-color: color.$header-nav-bg-color;
     }
   }
 
@@ -246,7 +246,7 @@ const theOtherLangUrl = canonicalUrl.pathname.startsWith("/en/")
   .title {
     font-weight: normal;
     margin: 0.5rem 2rem 0.25rem 2rem;
-    @media (max-width: $header-hamburger-breakpoint) {
+    @media (max-width: variables.$header-hamburger-breakpoint) {
       margin: 0.5rem 1rem 0.5rem 0;
     }
     &__link {
@@ -275,7 +275,7 @@ const theOtherLangUrl = canonicalUrl.pathname.startsWith("/en/")
     :visited:hover {
       text-decoration: underline;
     }
-    @media (max-width: $header-hamburger-breakpoint) {
+    @media (max-width: variables.$header-hamburger-breakpoint) {
       flex-direction: column;
       row-gap: 1em;
       padding: 1em;
@@ -284,7 +284,7 @@ const theOtherLangUrl = canonicalUrl.pathname.startsWith("/en/")
 
   #changeLangNavigation {
     text-align: center;
-    background-color: $header-nav-bg-color;
+    background-color: color.$header-nav-bg-color;
     color: white;
     a {
       display: inline-block;
@@ -299,7 +299,7 @@ const theOtherLangUrl = canonicalUrl.pathname.startsWith("/en/")
   }
   #changeLangLink {
     display: inline-block;
-    background-color: $header-nav-bg-color;
+    background-color: color.$header-nav-bg-color;
     font-weight: bold;
     border: 1px solid white;
     padding: 0.25rem 0.5rem;
@@ -320,10 +320,10 @@ const theOtherLangUrl = canonicalUrl.pathname.startsWith("/en/")
     }
     .title span {
       &:nth-child(1) {
-        color: $header-background-color-secondary;
+        color: color.$header-background-color-secondary;
       }
       &:nth-child(2) {
-        color: $header-background-color-primary;
+        color: color.$header-background-color-primary;
       }
     }
   }
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 05e8e86b5d..af2272b898 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -174,27 +174,16 @@ const resolvedBreadcrumb =
       </div>
     </main>
     <Footer lang={lang} support={support} />
-    <style lang="scss">
-      @import "../styles/color.scss";
-      .title {
-        margin-bottom: 2rem;
-        padding-bottom: 1rem;
-        border-bottom: 1px solid $white-gray-dark;
-        font-size: 2rem;
-        font-weight: bold;
-        color: black;
-      }
-    </style>
   </body>
 </html>
 
 <style lang="scss">
-  @import "@styles/color.scss";
-  @import "@styles/toc.scss";
+  @use "@styles/color";
+  @use "@styles/toc";
   .title {
     margin-bottom: 2rem;
     padding-bottom: 1rem;
-    border-bottom: 1px solid $white-gray-dark;
+    border-bottom: 1px solid color.$white-gray-dark;
     font-size: 2rem;
     font-weight: bold;
     color: black;
@@ -203,7 +192,7 @@ const resolvedBreadcrumb =
     #article {
       display: flex;
       flex-direction: row-reverse;
-      gap: $article-gap;
+      gap: toc.$article-gap;
     }
     #content {
       /* so that the content does not overflow the viewport */
@@ -211,7 +200,7 @@ const resolvedBreadcrumb =
       flex-grow: 1;
     }
   }
-  @media screen and (max-width: calc(768px + $toc-width + $article-gap)) {
+  @media screen and (max-width: calc(768px + toc.$toc-width + toc.$article-gap)) {
     main[data-toc="true"] {
       #article {
         flex-direction: column;
diff --git a/src/layouts/Toc.astro b/src/layouts/Toc.astro
index 2a219d1726..9dfbbd87de 100644
--- a/src/layouts/Toc.astro
+++ b/src/layouts/Toc.astro
@@ -77,17 +77,17 @@ for (const heading of Astro.props.headings) {
 </aside>
 
 <style lang="scss">
-  @import "@styles/color.scss";
-  @import "@styles/toc.scss";
+  @use "@styles/color";
+  @use "@styles/toc";
 
   #toc {
     overflow-y: auto;
     padding: 2rem 0.5rem;
     font-size: 0.875em;
     border-radius: 1em;
-    background-color: $white-gray-light;
-    width: $toc-width;
-    min-width: $toc-width;
+    background-color: color.$white-gray-light;
+    width: toc.$toc-width;
+    min-width: toc.$toc-width;
     display: flex;
     flex-direction: column;
     position: sticky;
@@ -102,7 +102,7 @@ for (const heading of Astro.props.headings) {
       border: none;
       font-size: 1.25em;
       font-weight: bold;
-      color: $text-color;
+      color: color.$text-color;
       &:only-child {
         padding-bottom: 0.8em;
       }
@@ -117,7 +117,7 @@ for (const heading of Astro.props.headings) {
     li a {
       display: block;
       position: relative;
-      color: $link-color-light;
+      color: color.$link-color-light;
       padding: 0.25em 1em 0.25em 0;
       @media (pointer: coarse) {
         padding: 0.75em 1em 0.75em 0;
@@ -126,12 +126,12 @@ for (const heading of Astro.props.headings) {
         content: "";
         position: absolute;
         border-radius: 50%;
-        left: - calc($toc-ul-left-padding / 2);
+        left: - calc(toc.$toc-ul-left-padding / 2);
         width: 4px;
         height: 4px;
         transform: translate(-50%, -50%);
-        background: $link-color-light;
-        border: 2px solid $white-gray-light;
+        background: color.$link-color-light;
+        border: 2px solid color.$white-gray-light;
         top: 1em;
         @media (pointer: coarse) {
           top: 1.5em;
@@ -140,16 +140,16 @@ for (const heading of Astro.props.headings) {
     }
     ul.toc-h2 {
       position: relative;
-      padding-left: $toc-ul-left-padding;
+      padding-left: toc.$toc-ul-left-padding;
       &:before {
         content: "";
         position: absolute;
         top: 20px;
         bottom: 0.6em;
-        left: calc($toc-ul-left-padding / 2);
+        left: calc(toc.$toc-ul-left-padding / 2);
         width: 3px;
         transform: translateX(-50%);
-        background: $white-gray-dark;
+        background: color.$white-gray-dark;
         border-radius: 0 0 5px 5px;
         @media (pointer: coarse) {
           bottom: 1.25em;
@@ -179,10 +179,10 @@ for (const heading of Astro.props.headings) {
     li a.active {
       font-weight: 800;
       filter: unset;
-      color: $link-color-light;
+      color: color.$link-color-light;
       &:before {
-        background: $link-color-light;
-        border: 2px solid $white-gray-dark;
+        background: color.$link-color-light;
+        border: 2px solid color.$white-gray-dark;
       }
     }
   }
@@ -192,7 +192,7 @@ for (const heading of Astro.props.headings) {
   #toc-container {
     height: 100%;
   }
-  @media screen and (max-width: calc(768px + $toc-width + $article-gap)) {
+  @media screen and (max-width: calc(768px + toc.$toc-width + toc.$article-gap)) {
     #sidebar {
       min-width: 0;
       position: sticky;
diff --git a/src/styles/cayman/jekyll-theme-cayman.scss b/src/styles/cayman/jekyll-theme-cayman.scss
index 4f3cc004e1..6c8938ccd3 100644
--- a/src/styles/cayman/jekyll-theme-cayman.scss
+++ b/src/styles/cayman/jekyll-theme-cayman.scss
@@ -1,5 +1,5 @@
-@import "rouge-github";
-@import "variables";
+@use "rouge-github";
+@use "variables";
 
 main {
 
@@ -25,17 +25,17 @@ main {
   pre {
     padding: 0.8rem;
     font: 1rem Consolas, "Liberation Mono", Menlo, Courier, monospace;
-    color: $code-text-color;
+    color: variables.$code-text-color;
     word-wrap: normal;
-    background-color: $code-bg-color;
-    border: solid 1px $border-color;
+    background-color: variables.$code-bg-color;
+    border: solid 1px variables.$border-color;
     border-radius: 0.3rem;
 
     > code {
       padding: 0;
       margin: 0;
       font-size: 0.9rem;
-      color: $code-text-color;
+      color: variables.$code-text-color;
       word-break: normal;
       white-space: pre;
       background: transparent;
@@ -83,8 +83,8 @@ main {
   blockquote {
     padding: 0 1rem;
     margin-left: 0;
-    color: $blockquote-text-color;
-    border-left: 0.3rem solid $border-color;
+    color: variables.$blockquote-text-color;
+    border-left: 0.3rem solid variables.$border-color;
 
     > :first-child {
       margin-top: 0;
@@ -115,7 +115,7 @@ main {
     height: 2px;
     padding: 0;
     margin: 1rem 0;
-    background-color: $hr-border-color;
+    background-color: variables.$hr-border-color;
     border: 0;
   }
 }
diff --git a/src/styles/color.scss b/src/styles/color.scss
index 4201f5f0a0..b2f8157e0a 100644
--- a/src/styles/color.scss
+++ b/src/styles/color.scss
@@ -1,4 +1,4 @@
-@import "./cayman/variables.scss";
+@forward "cayman/variables";
 
 $gray: #777777;
 $black-gray: #212121;
diff --git a/src/styles/components/_index.scss b/src/styles/components/_index.scss
new file mode 100644
index 0000000000..8dcffde199
--- /dev/null
+++ b/src/styles/components/_index.scss
@@ -0,0 +1,14 @@
+@use "box";
+@use "card";
+@use "code";
+@use "footnotes";
+@use "headings";
+@use "help-desk";
+@use "img";
+@use "link";
+@use "lists";
+@use "mfa";
+@use "details";
+@use "table";
+@use "top";
+@use "utils";
diff --git a/src/styles/components/box.scss b/src/styles/components/box.scss
index e3855fab94..0f003bd8f6 100644
--- a/src/styles/components/box.scss
+++ b/src/styles/components/box.scss
@@ -1,3 +1,5 @@
+@use "@styles/color";
+
 @mixin box {
   display: block;
   border: 1px solid currentcolor;
@@ -20,7 +22,7 @@
 
   &--alert {
     @include box--bold;
-    color: $red;
+    color: color.$red;
   }
 }
 
diff --git a/src/styles/components/card.scss b/src/styles/components/card.scss
index 5aeb613103..240743aa6c 100644
--- a/src/styles/components/card.scss
+++ b/src/styles/components/card.scss
@@ -1,3 +1,5 @@
+@use "@styles/color";
+
 .cards {
   display: grid;
   margin: 1em 0;
@@ -34,8 +36,8 @@
   display: block;
   width: 100%;
   height: 100%;
-  border: 1px solid $black-gray;
-  border-left: 4px solid $heading-color;
+  border: 1px solid color.$black-gray;
+  border-left: 4px solid color.$heading-color;
   border-radius: 5px;
   font-weight: bold;
   padding: 0.5em;
@@ -43,7 +45,7 @@
 
   &:hover {
     text-decoration: none;
-    box-shadow: 2px 2px 3px -1px $heading-color;
+    box-shadow: 2px 2px 3px -1px color.$heading-color;
     transition: all .08s ease-in-out;
   }
 }
diff --git a/src/styles/components/code.scss b/src/styles/components/code.scss
index 833b900938..d73356c4b6 100644
--- a/src/styles/components/code.scss
+++ b/src/styles/components/code.scss
@@ -1,8 +1,10 @@
+@use "@styles/color";
+
 code {
   padding: 0.2em 0.4em;
   font-size: 0.9em;
   color: black;
-  background-color: $white-gray-light;
+  background-color: color.$white-gray-light;
 }
 
 code,
diff --git a/src/styles/components/details.scss b/src/styles/components/details.scss
index 5abc0f3fff..33e527a955 100644
--- a/src/styles/components/details.scss
+++ b/src/styles/components/details.scss
@@ -1,14 +1,15 @@
+@use "@styles/color";
+
 details {
   display: block;
-  
   margin: 0.125em -0.75em;
   padding: 0.125em 0.75em;
-  border: solid 1px $gray;
+  border: solid 1px color.$gray;
   border-radius: 0.375em;
 
   summary {
     cursor: pointer;
-    color: $link-color;
+    color: color.$link-color;
     &:hover {
       text-decoration: underline;
     }
diff --git a/src/styles/components/footnotes.scss b/src/styles/components/footnotes.scss
index e0a3bc257d..28a4cfeff8 100644
--- a/src/styles/components/footnotes.scss
+++ b/src/styles/components/footnotes.scss
@@ -1,5 +1,7 @@
+@use "@styles/color";
+
 .footnotes {
   font-size: 0.875em;
   padding-top: 0.5em;
-  border-top: 2px solid $gray;
+  border-top: 2px solid color.$gray;
 }
diff --git a/src/styles/components/headings.scss b/src/styles/components/headings.scss
index 3bd7881848..22d7c66c23 100644
--- a/src/styles/components/headings.scss
+++ b/src/styles/components/headings.scss
@@ -1,3 +1,5 @@
+@use "@styles/color";
+
 h1:not(.title) {
   font-size: 1.75em;
   font-weight: bold;
@@ -7,8 +9,8 @@ h1:not(.title) {
   padding-top: 0.125em;
   padding-bottom: 0.125em;
   color: black;
-  border-left: 0.43em solid $heading-color;
-  border-bottom: 2px solid $heading-color;
+  border-left: 0.43em solid color.$heading-color;
+  border-bottom: 2px solid color.$heading-color;
 }
 
 h2 {
@@ -18,8 +20,8 @@ h2 {
   margin-bottom: 0.67em;
   padding-left: 0.5em;
   color: black;
-  border-left: 0.5em solid $heading-color;
-  border-bottom: 2px solid $heading-color;
+  border-left: 0.5em solid color.$heading-color;
+  border-bottom: 2px solid color.$heading-color;
 }
 
 h3 {
@@ -29,7 +31,7 @@ h3 {
   margin-bottom: 0.8em;
   padding-left: 0.9em;
   color: black;
-  border-left: 0.3em solid $heading-color;
+  border-left: 0.3em solid color.$heading-color;
 }
 
 h4 {
@@ -40,7 +42,7 @@ h4 {
   padding-top: 0.125em;
   padding-bottom: 0.125em;
   color: black;
-  border-bottom: 1px solid $heading-color;
+  border-bottom: 1px solid color.$heading-color;
 }
 
 h5 {
@@ -57,5 +59,5 @@ h6 {
   font-weight: bold;
   margin-top: 0.89em;
   margin-bottom: 0.89em;
-  color: $heading-color;
+  color: color.$heading-color;
 }
diff --git a/src/styles/components/help-desk.scss b/src/styles/components/help-desk.scss
index f4732ad7a3..24c9525a77 100644
--- a/src/styles/components/help-desk.scss
+++ b/src/styles/components/help-desk.scss
@@ -1,3 +1,5 @@
+@use "@styles/color";
+
 .help-desk-list {
   display: flex;
   flex-direction: column;
@@ -15,7 +17,7 @@
 .help-desk-list-button {
   display: block;
   width: 100%;
-  border: 1px solid $heading-color;
+  border: 1px solid color.$heading-color;
   border-bottom-width: 4px;
   border-radius: 0.5rem;
   padding: 0.5rem;
@@ -30,19 +32,19 @@
     display: flex;
     align-items: center;
     gap: 0.5rem;
-    color: $black-gray;
+    color: color.$black-gray;
     &::after {
       display: block;
       content: "arrow_forward_ios";
       text-align: right;
       font-family: "Material Icons";
       font-weight: bold;
-      color: $heading-color;
+      color: color.$heading-color;
       hyphens: initial;
     }
   }
   &:hover {
-    background-color: $heading-color;
+    background-color: color.$heading-color;
     color: white;
     transition: all 0.2s ease;
     &:link {
diff --git a/src/styles/components/img.scss b/src/styles/components/img.scss
index 21ee6de0f5..4302772d1a 100644
--- a/src/styles/components/img.scss
+++ b/src/styles/components/img.scss
@@ -1,3 +1,5 @@
+@use "@styles/color";
+
 img {
   display: block;
   max-height: 40rem;
@@ -64,7 +66,7 @@ img.thin-border {
 img.shadow {
   box-shadow: 0 0 0.75em 0.75em white inset;
   padding: 1em;
-  background: $gray;
+  background: color.$gray;
 }
 
 figure {
diff --git a/src/styles/components/link.scss b/src/styles/components/link.scss
index 0e09f5a35d..b0217622c6 100644
--- a/src/styles/components/link.scss
+++ b/src/styles/components/link.scss
@@ -1,8 +1,10 @@
+@use "@styles/color";
+
 :link {
-  color: $link-color;
+  color: color.$link-color;
 }
 :visited {
-  color: $visited-color;
+  color: color.$visited-color;
 }
 :link,
 :visited {
diff --git a/src/styles/components/table.scss b/src/styles/components/table.scss
index a68de7c17c..72f32de1ae 100644
--- a/src/styles/components/table.scss
+++ b/src/styles/components/table.scss
@@ -1,3 +1,5 @@
+@use "@styles/color";
+
 table {
   display: block;
   border-collapse: collapse;
@@ -14,6 +16,6 @@ table {
   th,
   td {
     padding: 0.5em 1em;
-    border: 1px solid $gray;
+    border: 1px solid color.$gray;
   }
 }
diff --git a/src/styles/components/utils.scss b/src/styles/components/utils.scss
index 556010f151..b2495932fa 100644
--- a/src/styles/components/utils.scss
+++ b/src/styles/components/utils.scss
@@ -1,5 +1,7 @@
+@use "@styles/color";
+
 .alert {
-  color: $red;
+  color: color.$red;
 }
 
 .center {
diff --git a/src/styles/layout.scss b/src/styles/layout.scss
index 1312134f22..8331ced0d1 100644
--- a/src/styles/layout.scss
+++ b/src/styles/layout.scss
@@ -1,4 +1,5 @@
-@import "../../node_modules/normalize.css/normalize.css";
+@use "node_modules/normalize.css/normalize";
+@use "sass:meta";
 
 * {
   box-sizing: border-box;
@@ -11,12 +12,12 @@ html {
   line-height: 1.5;
 }
 
-@import "cayman/jekyll-theme-cayman";
-@import "visually-hidden";
-@import "main";
-@import "margin";
-@import "external-link";
+@include meta.load-css("cayman/jekyll-theme-cayman");
+@include meta.load-css("visually-hidden");
+@include meta.load-css("main");
+@include meta.load-css("margin");
+@include meta.load-css("external-link");
 
 @media print {
-  @import "printing";
-}
\ No newline at end of file
+  @include meta.load-css("printing");
+}
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 1642bce37d..853f91a75a 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -1,9 +1,10 @@
-@import "color";
+@use "color";
+@use "sass:meta";
 
 :is(main) {
   word-wrap: break-word;
   font-size: 1.125rem;
-  color: $text-color;
+  color: color.$text-color;
   padding: 2rem 4rem;
 
   &:lang(ja) {
@@ -18,20 +19,7 @@
     hyphens: auto;
   }
 
-  @import "components/box";
-  @import "components/card";
-  @import "components/code";
-  @import "components/footnotes";
-  @import "components/headings";
-  @import "components/help-desk";
-  @import "components/img";
-  @import "components/link";
-  @import "components/lists";
-  @import "components/mfa";
-  @import "components/details";
-  @import "components/table";
-  @import "components/top";
-  @import "components/utils";
+  @include meta.load-css("components");
 
   @media (min-width: 1024px) {
     max-width: 72rem;
diff --git a/src/styles/rss_icon.scss b/src/styles/rss_icon.scss
index b71489c4a8..ac85129b75 100644
--- a/src/styles/rss_icon.scss
+++ b/src/styles/rss_icon.scss
@@ -1,4 +1,4 @@
-@import "color";
+@use "color";
 
 :is(h1, h2, h3, h4):has(.rss_icon) {
   display: flex;
@@ -9,7 +9,7 @@
     flex-direction: column;
     gap: 0;
     align-items: center;
-    color: $heading-color;
+    color: color.$heading-color;
     font-family: "Material Icons";
     font-size: 1.125em;
     text-decoration: none;
diff --git a/src/styles/top.scss b/src/styles/top.scss
index 3afbb8dbba..6babb7f419 100644
--- a/src/styles/top.scss
+++ b/src/styles/top.scss
@@ -1,5 +1,5 @@
-@import "color";
-@import "components/card.scss";
+@use "color";
+@use "components/card";
 
 .cards {
   text-align: left;
@@ -61,7 +61,7 @@
         content: "arrow_forward_ios";
         font-family: "Material Icons";
         font-weight: bold;
-        color: $heading-color;
+        color: color.$heading-color;
       }
     }
   }
@@ -106,7 +106,7 @@
     display: flex;
     flex-direction: column;
     justify-content: end;
-    color: $black-gray;
+    color: color.$black-gray;
     text-align: center;
 
     // ロゴ画像・Material Icons
@@ -126,7 +126,7 @@
       }
     }
     & > span.material-icon > svg {
-      fill: $link-color;
+      fill: color.$link-color;
       height: 3rem;
       @media (max-width: 896px) {
         height: 1.5rem;