diff --git a/src/components/canvas/modal/roofmoduleoption/RoofModuleOptionTab03.jsx b/src/components/canvas/modal/roofmoduleoption/RoofModuleOptionTab03.jsx
index b5333ca..076103a 100644
--- a/src/components/canvas/modal/roofmoduleoption/RoofModuleOptionTab03.jsx
+++ b/src/components/canvas/modal/roofmoduleoption/RoofModuleOptionTab03.jsx
@@ -5,7 +5,7 @@ import { useState } from "react"
 
 export default function RoofModuleOptionTab03({setTabNum}){
     const [useTab, setUseTab] = useState(false);
-    const [warningTab, setWarningTab] = useState(false);
+    const [numValue, setNumValue] = useState(1);
 
     return(
         <>
@@ -141,110 +141,114 @@ export default function RoofModuleOptionTab03({setTabNum}){
                     屋根材別モジュールの最大段数。混合最大単数を確認してください 
                     <button className={`arr ${useTab ? 'act' : ''}`} onClick={() => setUseTab(!useTab)}></button>
                 </div>
-                <div className={`module-table-box mt10 ${useTab ? 'hide' : ''}`}>
-                    <div className="module-table-inner">
-                        <div className="roof-module-table">
-                            <table>
-                                <thead>
-                                    <tr>
-                                        <th rowSpan={2} style={{width: '22%'}}></th>
-                                        <th>
-                                            <div className="color-wrap">
-                                                <span className="color-box" style={{backgroundColor: '#AA6768'}}></span>
-                                                <span className="name">Re.RISE-G3 440</span>
-                                            </div>
-                                        </th>
-                                        <th>
-                                            <div className="color-wrap">
-                                                <span className="color-box" style={{backgroundColor: '#67A2AA'}}></span>
-                                                <span className="name">Re.RISE MS-G3 290</span>
-                                            </div>
-                                        </th>
-                                        <th>
-                                            <div className="color-wrap">
-                                                <span className="color-box" style={{backgroundColor: '#AA6768'}}></span>
-                                                <span className="name">Re.RISE-G3 440</span>
-                                            </div>
-                                        </th>
-                                        <th></th>
-                                    </tr>
-                                    <tr>
-                                        <th>最大段数</th>
-                                        <th>最大段数</th>
-                                        <th>最大段数</th>
-                                        <th>2種混合最大段数</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>
-                                            <div className="color-wrap">
-                                                <span className="color-box" style={{backgroundColor: '#FFFF00'}}></span>
-                                                <span className="name">アスファルトシングル</span>
-                                            </div>
-                                        </td>
-                                        <td className="al-r">7</td>
-                                        <td className="al-r">5</td>
-                                        <td className="al-r">5</td>
-                                        <td className="al-r">5</td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <div className="color-wrap">
-                                                <span className="color-box" style={{backgroundColor: '#FFC000'}}></span>
-                                                <span className="name">アスファルトシングル</span>
-                                            </div>
-                                        </td>
-                                        <td className="al-r">7</td>
-                                        <td className="al-r">5</td>
-                                        <td className="al-r">5</td>
-                                        <td className="al-r">5</td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <div className="color-wrap">
-                                                <span className="color-box" style={{backgroundColor: '#7030A0'}}></span>
-                                                <span className="name">アスファルトシングル</span>
-                                            </div>
-                                        </td>
-                                        <td className="al-r">7</td>
-                                        <td className="al-r">5</td>
-                                        <td className="al-r">5</td>
-                                        <td className="al-r">5</td>
-                                    </tr>
-                                    <tr>
-                                        <td>
-                                            <div className="color-wrap">
-                                                <span className="color-box" style={{backgroundColor: '#385723'}}></span>
-                                                <span className="name">アスファルトシングル</span>
-                                            </div>
-                                        </td>
-                                        <td className="al-r">7</td>
-                                        <td className="al-r">5</td>
-                                        <td className="al-r">5</td>
-                                        <td className="al-r">5</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
+                <div className={`hide-tab-contents ${useTab ? 'hide' : ''}`}>
+                    <div className="roof-content-tab-wrap">
+                        <button className={`btn-frame block modal mr5 ${numValue === 1 ? 'act' : ''}`} onClick={() => setNumValue(1)}>Frame01</button>
+                        <button className={`btn-frame block modal ${numValue === 2 ? 'act' : ''} `} onClick={() => setNumValue(2)}>Frame02</button>
                     </div>
-                </div>
-            </div>
-            <div className="hide-tab-wrap">
-                <div className="hide-check-guide">
-                    千鳥配置の注意事項
-                    <button className={`arr ${warningTab ? 'act' : ''}`} onClick={() => setWarningTab(!warningTab)}></button>
-                </div>
-                <div className={`roof-warning-wrap mt10 ${warningTab ? 'hide' : ''}`}>
-                    <div className="guide">千鳥配置する時に図のような配置ができてしまいますが、正常な積算ができません。<br/>千鳥で配置する時は、千鳥配置を「する」にして、モジュールが吸着されるようにして下さい。</div>
-                    <div className="roof-warning-img-wrap">
-                        <div className="roof-warning-img">
-                            <Image src={'/static/images/canvas/roof_warning_correct.png'} width={350} height={198} alt="" />
+                    {numValue === 1 && 
+                        <div className={`module-table-box mt10`}>
+                            <div className="module-table-inner">
+                                <div className="roof-module-table">
+                                    <table>
+                                        <thead>
+                                            <tr>
+                                                <th rowSpan={2} style={{width: '22%'}}></th>
+                                                <th>
+                                                    <div className="color-wrap">
+                                                        <span className="color-box" style={{backgroundColor: '#AA6768'}}></span>
+                                                        <span className="name">Re.RISE-G3 440</span>
+                                                    </div>
+                                                </th>
+                                                <th>
+                                                    <div className="color-wrap">
+                                                        <span className="color-box" style={{backgroundColor: '#67A2AA'}}></span>
+                                                        <span className="name">Re.RISE MS-G3 290</span>
+                                                    </div>
+                                                </th>
+                                                <th>
+                                                    <div className="color-wrap">
+                                                        <span className="color-box" style={{backgroundColor: '#AA6768'}}></span>
+                                                        <span className="name">Re.RISE-G3 440</span>
+                                                    </div>
+                                                </th>
+                                                <th></th>
+                                            </tr>
+                                            <tr>
+                                                <th>最大段数</th>
+                                                <th>最大段数</th>
+                                                <th>最大段数</th>
+                                                <th>2種混合最大段数</th>
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            <tr>
+                                                <td>
+                                                    <div className="color-wrap">
+                                                        <span className="color-box" style={{backgroundColor: '#FFFF00'}}></span>
+                                                        <span className="name">アスファルトシングル</span>
+                                                    </div>
+                                                </td>
+                                                <td className="al-r">7</td>
+                                                <td className="al-r">5</td>
+                                                <td className="al-r">5</td>
+                                                <td className="al-r">5</td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <div className="color-wrap">
+                                                        <span className="color-box" style={{backgroundColor: '#FFC000'}}></span>
+                                                        <span className="name">アスファルトシングル</span>
+                                                    </div>
+                                                </td>
+                                                <td className="al-r">7</td>
+                                                <td className="al-r">5</td>
+                                                <td className="al-r">5</td>
+                                                <td className="al-r">5</td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <div className="color-wrap">
+                                                        <span className="color-box" style={{backgroundColor: '#7030A0'}}></span>
+                                                        <span className="name">アスファルトシングル</span>
+                                                    </div>
+                                                </td>
+                                                <td className="al-r">7</td>
+                                                <td className="al-r">5</td>
+                                                <td className="al-r">5</td>
+                                                <td className="al-r">5</td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <div className="color-wrap">
+                                                        <span className="color-box" style={{backgroundColor: '#385723'}}></span>
+                                                        <span className="name">アスファルトシングル</span>
+                                                    </div>
+                                                </td>
+                                                <td className="al-r">7</td>
+                                                <td className="al-r">5</td>
+                                                <td className="al-r">5</td>
+                                                <td className="al-r">5</td>
+                                            </tr>
+                                        </tbody>
+                                    </table>
+                                </div>
+                            </div>
                         </div>
-                        <div className="roof-warning-img">
-                            <Image src={'/static/images/canvas/roof_warning_wrong.png'} width={350} height={198} alt="" />
+                    }
+                    {numValue === 2 &&
+                        <div className={`roof-warning-wrap mt10`}>
+                            <div className="guide">千鳥配置する時に図のような配置ができてしまいますが、正常な積算ができません。<br/>千鳥で配置する時は、千鳥配置を「する」にして、モジュールが吸着されるようにして下さい。</div>
+                            <div className="roof-warning-img-wrap">
+                                <div className="roof-warning-img">
+                                    <Image src={'/static/images/canvas/roof_warning_correct.png'} width={350} height={198} alt="" />
+                                </div>
+                                <div className="roof-warning-img">
+                                    <Image src={'/static/images/canvas/roof_warning_wrong.png'} width={350} height={198} alt="" />
+                                </div>
+                            </div>
                         </div>
-                    </div>
+                    }
                 </div>
             </div>
             {/* 2025-05-30 ed */}
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index ebb54c6..c90372b 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -2459,22 +2459,20 @@ $alert-color: #101010;
 }
 
 // 2025-05-30 지붕 모듈
-.hide-tab-wrap{
-    border-bottom: 1px solid #424242;
-}
-.roof-warning-wrap{
-    &.hide{
-        overflow: hidden;
-        height: 0;
-    }
-}
 .roof-warning-img-wrap{
     display: flex;
     align-items: center;
     gap: 15px;
     justify-content: center;
-    padding-bottom: 10px;
-    .roof-warning-img{
+}
 
+.roof-content-tab-wrap{
+    display: flex;
+    padding-top: 10px;
+}
+.hide-tab-contents{
+    &.hide{
+        height: 0;
+        overflow: hidden;
     }
 }
\ No newline at end of file