檀家編集を修正

src/app/pages/danka-edit/danka-edit.html

@@ -7,7 +7,7 @@
   <main class="danka-edit-main">
     <section class="edit-panel">
       <div class="page-title-area">
-        <h1>檀家（世帯）編集</h1>
+        <h1>{{ danka ? '檀家編集' : '檀家登録' }}</h1>
       </div>
 
       <form [formGroup]="dankaForm" class="edit-form">

src/app/pages/danka-edit/danka-edit.scss

@@ -7,38 +7,37 @@
 }
 
 .danka-edit-page {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
+  display: grid;
+  grid-template-columns: 172px minmax(0, 1fr);
+  gap: 20px;
+  padding: 0 38px 36px 0;
   background: #f4eee4;
 }
 
 .danka-edit-main {
-  flex: 1;
-  padding-right: 34px;
+  min-width: 0;
   box-sizing: border-box;
 }
 
 .edit-panel {
-  min-height: 650px;
-  padding: 26px 34px 36px;
+  min-height: 760px;
+  padding: 34px 42px 40px;
   background: #ffffff;
   border: 2px solid #d8caba;
-  border-radius: 76px;
+  border-radius: 64px;
   box-sizing: border-box;
 }
 
 .page-title-area {
-  margin-bottom: 8px;
+  margin-bottom: 22px;
 }
 
 .page-title-area h1 {
   margin: 0;
   color: #2f2720;
-  font-size: 32px;
-  line-height: 1.2;
+  font-size: 34px;
+  line-height: 1.1;
   font-weight: 800;
-  letter-spacing: 0.02em;
 }
 
 .edit-form {
@@ -56,14 +55,14 @@
 
 .edit-content {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) 520px;
-  gap: 48px;
+  grid-template-columns: minmax(0, 1fr) 500px;
+  gap: 32px;
   align-items: start;
 }
 
 .basic-edit-section,
 .phone-edit-section {
-  padding-top: 4px;
+  padding-top: 0;
 }
 
 .basic-edit-section h2,
@@ -72,18 +71,19 @@
   margin: 0;
   color: #2f2720;
   font-size: 22px;
+  line-height: 1.3;
   font-weight: 800;
 }
 
 .section-heading p {
-  margin: 6px 0 14px;
+  margin: 4px 0 12px;
   color: #7b6b5c;
-  font-size: 15px;
+  font-size: 14px;
 }
 
 /* 基本情報 */
 .form-list {
-  margin-top: 14px;
+  margin-top: 12px;
 }
 
 .form-field {
@@ -94,15 +94,15 @@
 
 .form-row {
   display: grid;
-  grid-template-columns: 160px 1fr;
+  grid-template-columns: 140px 1fr;
   align-items: center;
-  gap: 16px;
-  margin-bottom: 14px;
+  gap: 14px;
+  margin-bottom: 12px;
 }
 
 .form-row label {
   color: #4b3c31;
-  font-size: 17px;
+  font-size: 15px;
   font-weight: 800;
 }
 
@@ -113,19 +113,19 @@
   border-radius: 8px;
   background: #fffdf9;
   color: #2f2720;
-  font-size: 18px;
+  font-size: 16px;
   font-weight: 600;
   box-sizing: border-box;
   outline: none;
 }
 
 .form-row input {
-  height: 54px;
+  height: 46px;
   padding: 0 14px;
 }
 
 .form-row textarea {
-  min-height: 112px;
+  min-height: 104px;
   padding: 12px 14px;
   line-height: 1.6;
   resize: vertical;
@@ -148,6 +148,10 @@
 /* 電話番号 */
 .phone-table {
   width: 100%;
+  overflow: hidden;
+  border: 2px solid #d8caba;
+  border-radius: 8px;
+  background: #fffdf9;
 }
 
 .phone-table-header,
@@ -155,30 +159,26 @@
   display: grid;
   grid-template-columns: 1.35fr 1.45fr 84px;
   align-items: center;
-  column-gap: 10px;
+  gap: 10px;
 }
 
 .phone-table-header {
-  min-height: 38px;
-  padding: 0 10px;
-  border: 2px solid #d8caba;
-  border-radius: 6px;
+  min-height: 40px;
+  padding: 0 12px;
   background: #eadfce;
   color: #5a4a3c;
-  font-size: 15px;
+  font-size: 14px;
   font-weight: 800;
   box-sizing: border-box;
 }
 
 .phone-table-row {
-  min-height: 56px;
-  margin-top: 4px;
-  padding: 6px 10px;
-  border: 2px solid #d8caba;
-  border-radius: 8px;
+  min-height: 54px;
+  padding: 8px 12px;
+  border-top: 1px solid #d8caba;
   background: #fffdf9;
   color: #2f2720;
-  font-size: 16px;
+  font-size: 15px;
   box-sizing: border-box;
 }
 
@@ -189,7 +189,7 @@
 
 .phone-table-row input {
   width: 100%;
-  height: 38px;
+  height: 36px;
   padding: 0 10px;
   border: none;
   border-radius: 6px;
@@ -235,11 +235,11 @@
 .phone-action {
   display: flex;
   justify-content: flex-end;
-  margin-top: 8px;
+  margin-top: 10px;
 }
 
 .add-phone-button {
-  width: 170px;
+  width: 148px;
   height: 46px;
   border: 2px solid #d8caba;
   border-radius: 8px;
@@ -280,17 +280,17 @@
   justify-content: flex-end;
   align-items: center;
   gap: 12px;
-  margin-top: 22px;
+  margin-top: 26px;
 }
 
 .delete-button,
 .cancel-button,
 .save-button {
   min-width: 116px;
-  height: 52px;
+  height: 46px;
   border: 2px solid #d8caba;
   border-radius: 8px;
-  font-size: 17px;
+  font-size: 16px;
   font-weight: 800;
   cursor: pointer;
   box-sizing: border-box;
@@ -364,3 +364,20 @@
   opacity: 0.5;
   cursor: not-allowed;
 }
+
+@media (max-width: 1100px) {
+  .danka-edit-page {
+    grid-template-columns: 1fr;
+    padding: 0 24px 32px;
+  }
+
+  .edit-panel {
+    min-height: auto;
+    border-radius: 28px;
+    padding: 28px 24px 32px;
+  }
+
+  .edit-content {
+    grid-template-columns: 1fr;
+  }
+}

src/app/pages/danka-list/danka-list.scss

@@ -6,67 +6,66 @@
 }
 
 .danka-list-page {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
+  display: grid;
+  grid-template-columns: 172px minmax(0, 1fr);
+  gap: 20px;
+  padding: 0 38px 36px 0;
   background: #f4eee4;
 }
 
 .danka-list-main {
-  flex: 1;
-  padding-right: 34px;
+  min-width: 0;
   box-sizing: border-box;
 }
 
 .danka-list-panel {
   position: relative;
-  min-height: 650px;
-  padding: 26px 36px 40px;
+  min-height: 760px;
+  padding: 34px 42px 40px;
   background: #ffffff;
   border: 2px solid #d8caba;
-  border-radius: 76px;
+  border-radius: 64px;
   box-sizing: border-box;
 }
 
 .page-title-area {
-  margin-bottom: 8px;
+  margin-bottom: 22px;
 }
 
 .page-title-area h1 {
   margin: 0;
-  font-size: 32px;
-  line-height: 1.2;
+  font-size: 34px;
+  line-height: 1.1;
   font-weight: 800;
   color: #2f2720;
-  letter-spacing: 0.02em;
 }
 
 .search-area {
   display: grid;
-  grid-template-columns: 1fr 140px 140px;
-  gap: 18px;
+  grid-template-columns: 1fr 104px 104px;
+  gap: 12px;
   align-items: center;
-  margin-bottom: 18px;
+  margin-bottom: 16px;
 }
 
 .search-box {
-  height: 58px;
+  height: 46px;
   position: relative;
   display: flex;
   align-items: center;
   background: #ffffff;
   border: 2px solid #d8caba;
-  border-radius: 8px;
+  border-radius: 6px;
   box-sizing: border-box;
 }
 
 .search-icon {
-  width: 42px;
+  width: 38px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #6f6257;
-  font-size: 34px;
+  font-size: 28px;
   line-height: 1;
 }
 
@@ -78,23 +77,25 @@
   outline: none;
   background: transparent;
   color: #2f2720;
-  font-size: 17px;
+  font-size: 16px;
+  font-weight: 700;
   box-sizing: border-box;
 }
 
 .search-box input::placeholder {
   color: #6f6257;
+  font-weight: 600;
 }
 
 .search-button,
 .new-button,
 .condition-button {
-  height: 58px;
+  height: 46px;
   border: 2px solid #8a6543;
-  border-radius: 8px;
+  border-radius: 6px;
   background: #ffffff;
   color: #8a6543;
-  font-size: 18px;
+  font-size: 16px;
   font-weight: 800;
   cursor: pointer;
   box-sizing: border-box;
@@ -115,11 +116,11 @@
   align-items: center;
   justify-content: space-between;
   gap: 16px;
-  margin-bottom: 14px;
-  padding: 12px 14px;
+  margin-bottom: 16px;
+  padding: 10px 12px;
   background: #fffdf9;
   border: 2px solid #d8caba;
-  border-radius: 10px;
+  border-radius: 8px;
 }
 
 .filter-button-list {
@@ -131,13 +132,13 @@
 
 .filter-button {
   min-width: 56px;
-  height: 40px;
-  padding: 0 14px;
+  height: 34px;
+  padding: 0 12px;
   border: 2px solid #d8caba;
-  border-radius: 8px;
+  border-radius: 6px;
   background: #f4eee4;
   color: #2f2720;
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 800;
   cursor: pointer;
   box-sizing: border-box;
@@ -160,7 +161,7 @@
 .result-count {
   margin: 0;
   color: #8a7d6d;
-  font-size: 15px;
+  font-size: 14px;
   white-space: nowrap;
 }
 
@@ -188,7 +189,7 @@
 }
 
 .danka-table-header {
-  min-height: 46px;
+  min-height: 40px;
   padding: 0 14px;
   background: #efe4d6;
   box-sizing: border-box;
@@ -198,7 +199,7 @@
 }
 
 .danka-table-row {
-  min-height: 78px;
+  min-height: 62px;
   padding: 10px 14px;
   background: #fffdf9;
   border-top: 1px solid #d8c2aa;
@@ -233,3 +234,34 @@
   text-align: center;
 }
 
+@media (max-width: 1100px) {
+  .danka-list-page {
+    grid-template-columns: 1fr;
+    padding: 0 24px 32px;
+  }
+
+  .danka-list-panel {
+    min-height: auto;
+    border-radius: 28px;
+    padding: 28px 24px 32px;
+  }
+
+  .search-area {
+    grid-template-columns: 1fr;
+  }
+
+  .filter-row {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .danka-table {
+    overflow-x: auto;
+  }
+
+  .danka-table-header,
+  .danka-table-row {
+    min-width: 840px;
+  }
+}
+

src/app/share/header/app-header.html

@@ -2,14 +2,4 @@
   <div class="app-title">
     戒名・過去帳管理
   </div>
-
-  <div class="header-actions">
-    <button type="button" class="header-button">
-      戻る
-    </button>
-
-    <button type="button" class="header-button">
-      ホーム
-    </button>
-  </div>
 </header>