ResponsiveLayoutをCSS Modulesに置換え

src/layouts/ResponsiveLayout/ResponsiveLayout.module.css

@@ -0,0 +1,14 @@
+.wrapper {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  grid-template-columns: 100%;
+  gap: 64px;
+  min-height: 100vh;
+}
+
+.contents-wrapper {
+  display: inline-block;
+  margin: 0 auto;
+  text-align: center;
+  vertical-align: middle;
+}

src/layouts/ResponsiveLayout/ResponsiveLayout.module.css.d.ts

@@ -0,0 +1,5 @@
+declare const styles: {
+  readonly wrapper: string;
+  readonly 'contents-wrapper': string;
+};
+export = styles;

src/layouts/ResponsiveLayout/ResponsiveLayout.tsx

@@ -1,23 +1,7 @@
 import type { FC, ReactNode } from 'react';
-import styled from 'styled-components';
-
 import { Footer, type Props as FooterProps } from '../../components/Footer';
 import { Header, type Props as HeaderProps } from '../../components/Header';
-
-const _Wrapper = styled.div`
-  display: grid;
-  grid-template-rows: auto 1fr auto;
-  grid-template-columns: 100%;
-  gap: 64px;
-  min-height: 100vh;
-`;
-
-const _ContentsWrapper = styled.div`
-  display: inline-block;
-  margin: 0 auto;
-  text-align: center;
-  vertical-align: middle;
-`;
+import styles from './ResponsiveLayout.module.css';
 
 export type Props = FooterProps & HeaderProps & { children: ReactNode };
 
@@ -28,14 +12,14 @@ export const ResponsiveLayout: FC<Props> = ({
   currentUrlPath,
   children,
 }) => (
-  <_Wrapper>
+  <div className={styles.wrapper}>
     <Header
       language={language}
       isLanguageMenuDisplayed={isLanguageMenuDisplayed}
       onClickLanguageButton={onClickLanguageButton}
       currentUrlPath={currentUrlPath}
     />
-    <_ContentsWrapper>{children}</_ContentsWrapper>
+    <div className={styles['contents-wrapper']}>{children}</div>
     <Footer language={language} />
-  </_Wrapper>
+  </div>
 );