[add]

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

@@ -62,7 +62,8 @@
 
 .basic-edit-section,
 .phone-edit-section {
-  padding: 26px 28px 28px;
+  overflow: hidden;
+  padding: 0 28px 28px;
   border: 2px solid #d8caba;
   border-radius: 12px;
   background: #fffdf9;
@@ -72,7 +73,10 @@
 .basic-edit-section h2,
 .phone-edit-section h2,
 .support-box h2 {
-  margin: 0 0 18px;
+  margin: 0 -28px 20px;
+  padding: 14px 28px;
+  background: #eadfce;
+  border-bottom: 2px solid #d8caba;
   color: #2f2720;
   font-size: 22px;
   line-height: 1.3;

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

@@ -86,16 +86,26 @@
                 </div>
               </div>
 
-              <div class="form-row form-row-heading">
-                <label></label>
+              <div class="form-row householder-setting-row">
+                <label>施主設定</label>
                 <div class="form-field">
-                  <h3 class="sub-section-title">家系図情報</h3>
-                  <p class="sub-section-description">
-                    家系図に反映する親子・配偶者の関係を設定します。
-                  </p>
+                  <button type="button"
+                          class="set-householder-button"
+                          (click)="setAsHouseholder()">
+                    この方を施主にする
+                  </button>
                 </div>
               </div>
+            </div>
+          </section>
 
+          <section class="family-tree-edit-section">
+            <h2>家系図情報</h2>
+            <p class="section-description">
+              家系図に反映する親子・配偶者の関係を設定します。
+            </p>
+
+            <div class="form-list">
               <div class="form-row">
                 <label for="fatherId">父</label>
                 <div class="form-field">
@@ -167,18 +177,6 @@
 
             </div>
           </section>
-
-          <section class="phone-edit-section">
-            <div class="householder-area">
-              <h3>この方を施主にする</h3>
-
-              <button type="button"
-                      class="set-householder-button"
-                      (click)="setAsHouseholder()">
-                施主に設定
-              </button>
-            </div>
-          </section>
         </div>
 
         <div class="bottom-actions">

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

@@ -2,7 +2,7 @@
   position: relative;
   display: block;
   min-height: 100vh;
-  background: #f4eee4;
+  background: #f6f0e7;
   color: #2f2720;
 }
 
@@ -11,7 +11,7 @@
   grid-template-columns: 172px minmax(0, 1fr);
   gap: 20px;
   padding: 0 38px 36px 0;
-  background: #f4eee4;
+  background: #f6f0e7;
 }
 
 .danka-edit-main {
@@ -22,7 +22,7 @@
 .edit-panel {
   min-height: 760px;
   padding: 34px 42px 40px;
-  background: #ffffff;
+  background: #fffdf9;
   border: 2px solid #d8caba;
   border-radius: 64px;
   box-sizing: border-box;
@@ -56,18 +56,28 @@
 
 .edit-content {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) 500px;
-  gap: 32px;
+  grid-template-columns: 1fr;
+  gap: 16px;
   align-items: start;
 }
 
-.basic-edit-section {
-  padding-left: 0;
+.basic-edit-section,
+.family-tree-edit-section {
+  overflow: hidden;
+  padding: 0 22px 24px;
+  border: 2px solid #d8caba;
+  border-radius: 12px;
+  background: #fffdf9;
+  box-sizing: border-box;
 }
 
 .basic-edit-section h2,
+.family-tree-edit-section h2,
 .section-heading h2 {
-  margin: 0;
+  margin: 0 -22px 18px;
+  padding: 12px 22px;
+  background: #eadfce;
+  border-bottom: 2px solid #d8caba;
   color: #2f2720;
   font-size: 22px;
   line-height: 1.3;
@@ -84,14 +94,21 @@
   font-size: 14px;
 }
 
+.section-description {
+  margin: 6px 0 0;
+  color: #7b6b5c;
+  font-size: 14px;
+  line-height: 1.6;
+}
+
 .form-list {
-  width: 100%;
-  margin-top: 12px;
+  width: min(100%, 620px);
+  margin-top: 14px;
 }
 
 .form-row {
   display: grid;
-  grid-template-columns: 140px 1fr;
+  grid-template-columns: 150px minmax(0, 1fr);
   align-items: center;
   gap: 14px;
   margin-bottom: 12px;
@@ -129,7 +146,7 @@
 }
 
 .form-row textarea {
-  min-height: 104px;
+  min-height: 112px;
   padding: 12px 14px;
   resize: vertical;
   line-height: 1.6;
@@ -178,49 +195,9 @@
   line-height: 1.6;
 }
 
-.phone-edit-section {
-  min-height: 240px;
-  padding: 18px 20px;
-  border: 2px solid #d8caba;
-  border-radius: 8px;
-  background: #fffdf9;
-  box-sizing: border-box;
-}
-
-.family-edit-guide {
-  padding: 18px 22px;
-  border: 2px solid #d8caba;
-  border-radius: 14px;
-  background: #ffffff;
-  box-sizing: border-box;
-}
-
-.family-edit-guide ul {
-  margin: 0;
-  padding-left: 20px;
-  color: #7b6b5c;
-  font-size: 15px;
-  line-height: 2;
-}
-
-.householder-area {
-  margin-top: 0;
-  padding: 18px 20px;
-  border: 2px solid #d8caba;
-  border-radius: 8px;
-  background: #eadfce;
-  box-sizing: border-box;
-}
-
-.householder-area h3 {
-  margin: 0 0 12px;
-  color: #2f2720;
-  font-size: 17px;
-  font-weight: 800;
-}
-
 .set-householder-button {
-  width: 148px;
+  width: auto;
+  min-width: 170px;
   height: 46px;
   border: 2px solid #d8caba;
   border-radius: 6px;
@@ -241,7 +218,7 @@
   justify-content: flex-end;
   align-items: center;
   gap: 12px;
-  margin-top: 26px;
+  margin-top: 28px;
 }
 
 .delete-button,

src/app/pages/family-edit/family-edit.ts

@@ -9,6 +9,7 @@ import {
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { AppHeader } from '../../share/header/app-header';
 import { AppSideMenu } from '../../share/side-menu/app-side-menu';
+import { DankaService } from '../../services/dankaService';
 import { FamilyService } from '../../services/family-service';
 import { MarriageRelationService } from '../../services/marriage-relation-service';
 import { Danka } from '../../models/danka';
@@ -30,8 +31,10 @@ export class FamilyEdit {
   relationMode: string = '';
   baseFamilyId: string = '';
   marriageErrorMessages: string[] = [];
+  private setHouseholderOnSave = false;
 
   constructor(
+    private dankaService: DankaService,
     private familyService: FamilyService,
     private marriageRelationService: MarriageRelationService,
     private route: ActivatedRoute,
@@ -39,6 +42,7 @@ export class FamilyEdit {
   ) {
     this.dankaId = this.route.snapshot.params['dankaId'];
     this.familyId = this.route.snapshot.params['familyId'];
+    this.danka = this.dankaService.getDankaById(this.dankaId);
     this.families = this.familyService.getFamiliesByDankaId(this.dankaId);
     this.relationMode = this.route.snapshot.queryParamMap.get('relationMode') ?? '';
     this.baseFamilyId = this.route.snapshot.queryParamMap.get('baseFamilyId') ?? '';
@@ -193,6 +197,7 @@ export class FamilyEdit {
     }
 
     this.familyService.saveFamily(updatedFamily);
+    this.saveHouseholderIfSelected(updatedFamily);
     this.router.navigate(['/danka-detail', dankaId], { queryParams: { tab: 'family' } });
   }
 
@@ -210,5 +215,30 @@ export class FamilyEdit {
     this.router.navigate(['/danka-detail', dankaId], { queryParams: { tab: 'family' } });
   }
 
-  setAsHouseholder() {}
+  setAsHouseholder(): void {
+    this.setHouseholderOnSave = true;
+    this.familyForm.patchValue({
+      relationship: '施主',
+    });
+  }
+
+  private saveHouseholderIfSelected(family: Family): void {
+    if (!this.setHouseholderOnSave || !this.danka) {
+      return;
+    }
+
+    this.dankaService.saveDanka({
+      ...this.danka,
+      householder: family.name,
+      householderFurigana: family.furigana,
+      updatedAt: this.formatDateForSave(new Date()),
+    });
+  }
+
+  private formatDateForSave(date: Date): string {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+  }
 }

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

@@ -2,7 +2,7 @@
   position: relative;
   display: block;
   min-height: 100vh;
-  background: #f4eee4;
+  background: #f6f0e7;
   color: #2f2720;
 }
 
@@ -11,7 +11,7 @@
   grid-template-columns: 172px minmax(0, 1fr);
   gap: 20px;
   padding: 0 38px 36px 0;
-  background: #f4eee4;
+  background: #f6f0e7;
 }
 
 .danka-edit-main {
@@ -22,7 +22,7 @@
 .edit-panel {
   min-height: 760px;
   padding: 34px 42px 40px;
-  background: #ffffff;
+  background: #fffdf9;
   border: 2px solid #d8caba;
   border-radius: 64px;
   box-sizing: border-box;
@@ -55,20 +55,28 @@
 
 .edit-content {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) 500px;
-  gap: 32px;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 22px;
   align-items: start;
 }
 
 .basic-edit-section,
 .phone-edit-section {
-  padding-top: 0;
+  overflow: hidden;
+  padding: 0 28px 28px;
+  border: 2px solid #d8caba;
+  border-radius: 12px;
+  background: #fffdf9;
+  box-sizing: border-box;
 }
 
 .basic-edit-section h2,
 .phone-edit-section h2,
 .support-box h2 {
-  margin: 0;
+  margin: 0 -28px 20px;
+  padding: 14px 28px;
+  background: #eadfce;
+  border-bottom: 2px solid #d8caba;
   color: #2f2720;
   font-size: 22px;
   line-height: 1.3;
@@ -83,7 +91,8 @@
 
 /* 蝓ｺ譛ｬ諠・ｱ */
 .form-list {
-  margin-top: 12px;
+  width: min(100%, 980px);
+  margin-top: 0;
 }
 
 .form-field {

src/app/pages/kakocho-edit/kakocho-edit.ts

@@ -146,6 +146,10 @@ export class KakochoEdit {
       this.kakochoService.addKakocho(
         newKakocho
       );
+
+      if (this.sourceFamily) {
+        this.familyService.deleteFamily(this.sourceFamily.id);
+      }
     }
 
     // 一覧へ戻る