diff --git a/packages/core/css-utils/src/getMediaQuery.ts b/packages/core/css-utils/src/getMediaQuery.ts
new file mode 100644
index 00000000..a079c098
--- /dev/null
+++ b/packages/core/css-utils/src/getMediaQuery.ts
@@ -0,0 +1,11 @@
+import { CSSObject } from '@emotion/react';
+
+export const getMediaQuery = (mediaQuery: string, cssObject: CSSObject) => {
+  return {
+    [`@media (${mediaQuery})`]: cssObject,
+  };
+};
+
+export const mobileMediaQuery = (cssObject: CSSObject) => {
+  return getMediaQuery('max-width : 320px', cssObject);
+};
diff --git a/packages/core/css-utils/src/index.ts b/packages/core/css-utils/src/index.ts
index 059288cc..3dfa7385 100644
--- a/packages/core/css-utils/src/index.ts
+++ b/packages/core/css-utils/src/index.ts
@@ -1,3 +1,4 @@
 export { getBorder } from './getBorder';
 export { getCssVar } from './getCssVar';
 export { getPadding } from './getPadding';
+export * from './getMediaQuery';
diff --git a/packages/web-domains/src/new-meeting/features/new-meeting-closing/containers/NewMeetingClosingContainer.tsx b/packages/web-domains/src/new-meeting/features/new-meeting-closing/containers/NewMeetingClosingContainer.tsx
index c275bcf5..49c1bc17 100644
--- a/packages/web-domains/src/new-meeting/features/new-meeting-closing/containers/NewMeetingClosingContainer.tsx
+++ b/packages/web-domains/src/new-meeting/features/new-meeting-closing/containers/NewMeetingClosingContainer.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { mobileMediaQuery } from '@sambad/css-utils';
 import { colors } from '@sambad/sds/theme';
 import Image from 'next/image';
 
@@ -49,9 +50,7 @@ const NewMeetingClosingContainer = (props: NewMeetingClosingContainerProps) => {
           aspectRatio: '11/5',
           bottom: '184px',
           transform: 'translate(-3%, 0)',
-          '@media (max-width: 320px)': {
-            display: 'none',
-          },
+          ...mobileMediaQuery({ display: 'none' }),
         }}
       >
         <Image src={Character} alt="meeting-character" priority fill />
diff --git a/packages/web-domains/src/participate-meeting/features/get-invite-code/components/InviteCodeHeader.tsx b/packages/web-domains/src/participate-meeting/features/get-invite-code/components/InviteCodeHeader.tsx
index 8a1e51ad..f296aeee 100644
--- a/packages/web-domains/src/participate-meeting/features/get-invite-code/components/InviteCodeHeader.tsx
+++ b/packages/web-domains/src/participate-meeting/features/get-invite-code/components/InviteCodeHeader.tsx
@@ -1,3 +1,4 @@
+import { mobileMediaQuery } from '@sambad/css-utils';
 import { Txt } from '@sambad/sds/components';
 import { size, colors } from '@sambad/sds/theme';
 
@@ -8,9 +9,7 @@ export const InviteCodeHeader = () => {
         marginTop: size['4xl'],
         padding: `${size.xl} ${size['2xs']} ${size.xs}`,
         textAlign: 'center',
-        '@media (max-width: 320px)': {
-          marginTop: 0,
-        },
+        ...mobileMediaQuery({ marginTop: 0 }),
       }}
     >
       <Txt as="h1" color={colors.black} typography="heading1">
diff --git a/packages/web-domains/src/participate-meeting/features/participate-meeting-closing/components/ClosingHeader.tsx b/packages/web-domains/src/participate-meeting/features/participate-meeting-closing/components/ClosingHeader.tsx
index 3e7a7499..5339f315 100644
--- a/packages/web-domains/src/participate-meeting/features/participate-meeting-closing/components/ClosingHeader.tsx
+++ b/packages/web-domains/src/participate-meeting/features/participate-meeting-closing/components/ClosingHeader.tsx
@@ -1,3 +1,4 @@
+import { mobileMediaQuery } from '@sambad/css-utils';
 import { Txt } from '@sambad/sds/components';
 import { size, colors } from '@sambad/sds/theme';
 
@@ -16,9 +17,7 @@ export const ClosingHeader = ({ meetingName }: ClosingHeaderProps) => {
         marginTop: size['4xl'],
         padding: `${size.xl} ${size['2xs']} ${size.xs}`,
         textAlign: 'center',
-        '@media (max-width: 320px)': {
-          marginTop: 0,
-        },
+        ...mobileMediaQuery({ marginTop: 0 }),
       }}
     >
       <Txt as="h1" color={colors.black} typography="heading1">
diff --git a/packages/web-domains/src/user/features/user-role-closing/containers/OwnerStartContainer.tsx b/packages/web-domains/src/user/features/user-role-closing/containers/OwnerStartContainer.tsx
index 2d4fec16..6b6e4d78 100644
--- a/packages/web-domains/src/user/features/user-role-closing/containers/OwnerStartContainer.tsx
+++ b/packages/web-domains/src/user/features/user-role-closing/containers/OwnerStartContainer.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { mobileMediaQuery } from '@sambad/css-utils';
 import { Txt } from '@sambad/sds/components';
 import { colors, size } from '@sambad/sds/theme';
 
@@ -29,14 +30,12 @@ export const OwnerStartContainer = () => {
         <div
           css={{
             marginTop: size['4xl'],
-            '@media (max-width: 320px)': {
-              marginTop: 0,
-            },
             display: 'flex',
             flexDirection: 'column',
             alignItems: 'center',
             justifyContent: 'center',
             padding: `${size.xl} ${size['2xs']} ${size.xs}`,
+            ...mobileMediaQuery({ marginTop: 0 }),
           }}
         >
           <CheckIcon />
@@ -59,9 +58,7 @@ export const OwnerStartContainer = () => {
             css={{
               position: 'relative',
               width: '80%',
-              '@media (max-width: 320px)': {
-                width: '232px',
-              },
+              ...mobileMediaQuery({ marginTop: 0 }),
             }}
           >
             <OnwerCaracter css={{ position: 'absolute', height: '100%', width: '100%' }} />