diff --git a/src/components/canvas/modal/roofallocation/RoofAllocation.jsx b/src/components/canvas/modal/roofallocation/RoofAllocation.jsx
index 862dc42..6e932a7 100644
--- a/src/components/canvas/modal/roofallocation/RoofAllocation.jsx
+++ b/src/components/canvas/modal/roofallocation/RoofAllocation.jsx
@@ -23,9 +23,10 @@ export default function RoofAllocation() {
                         ※配置面初期設定で保存した[基本屋根材]を変更したり、屋根材を追加して割り当てることができます。
                     </div>
                     <div className="allocation-select-wrap">
+                        {/* <span>屋根材の選択</span>
                         <div className="grid-select" >
                             <Qselect title={'瓦53A'} option={SelectOption01}/>
-                        </div>
+                        </div> */}
                         <button className="allocation-edit"><i className="edit-ico"></i>屋根材の追加</button>
                     </div>
                     <div className="grid-option-overflow">
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index 6fed7c6..9ec806e 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -904,6 +904,8 @@ $alert-color: #101010;
     .allocation-edit{
         display: flex;
         align-items: center;
+        justify-content: center;
+        width: 100%;
         height: 30px;
         padding: 0 10px;
         margin-left: 5px;
@@ -912,6 +914,7 @@ $alert-color: #101010;
         font-weight: $pop-normal-weight;
         border: 1px solid #484848;
         background-color: #323234;
+        transition: background-color .13s ease-in-out;
         i{
             display: block;
             width: 12px;
@@ -920,6 +923,9 @@ $alert-color: #101010;
             background: url(../../public/static/images/canvas/allocation_edit.svg)no-repeat center;
             background-size: cover;
         }
+        &:hover{
+            background-color: #464545;
+        }
     }
 }