[add]

src/app/models/danka.ts

@@ -2,7 +2,9 @@
 export interface Danka {
   id: string;
   householdName: string;
+  householdFurigana: string;
   householder: string;
+  householderFurigana: string;
   postalCode: string;
   address: string;
   phones: Phone[];

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

@@ -65,11 +65,20 @@
             <button
               type="button"
               class="add-button"
-              [routerLink]="['/kakocho-edit', danka.id]"
+              [routerLink]="['/danka', danka.id, 'kakocho-new']"
             >
               故人を登録
             </button>
           }
+
+          @if (selectedTab === 'family') {
+            <a
+              class="family-page-add-button"
+              [routerLink]="['/danka', danka.id, 'family-new']"
+            >
+              家族を追加
+            </a>
+          }
         </div>
 
         @if (selectedTab === 'basic' || selectedTab === 'kakocho') {
@@ -97,41 +106,59 @@
               </div>
 
               <div class="info-form">
-                <div class="info-row">
-                  <div class="info-label">世帯名</div>
-                  <div class="info-value">{{ danka.householdName }}</div>
-                </div>
+                <div class="info-pair-row">
+                  <div class="info-row">
+                    <div class="info-label">檀家名</div>
+                    <div class="info-value">{{ danka.householdName }}</div>
+                  </div>
 
-                <div class="info-row">
-                  <div class="info-label">世帯主</div>
-                  <div class="info-value">{{ danka.householder }}</div>
+                  <div class="info-row">
+                    <div class="info-label">ふりがな</div>
+                    <div class="info-value">{{ danka.householdFurigana || '未登録' }}</div>
+                  </div>
                 </div>
 
-                <div class="info-row">
-                  <div class="info-label">郵便番号</div>
-                  <div class="info-value">{{ danka.postalCode }}</div>
-                </div>
+                <div class="info-pair-row">
+                  <div class="info-row">
+                    <div class="info-label">施主名</div>
+                    <div class="info-value">{{ danka.householder }}</div>
+                  </div>
 
-                <div class="info-row">
-                  <div class="info-label">住所</div>
-                  <div class="info-value">{{ danka.address }}</div>
+                  <div class="info-row">
+                    <div class="info-label">ふりがな</div>
+                    <div class="info-value">{{ danka.householderFurigana || '未登録' }}</div>
+                  </div>
                 </div>
 
-                <div class="info-row phone-row">
-                  <div class="info-label">電話番号</div>
+                <div class="info-pair-row">
+                  <div class="info-row">
+                    <div class="info-label">郵便番号</div>
+                    <div class="info-value">{{ danka.postalCode }}</div>
+                  </div>
 
-                  <div class="phone-table">
-                    <div class="phone-header">
-                      <div>番号</div>
-                      <div>備考</div>
-                    </div>
+                  <div class="info-row">
+                    <div class="info-label">住所</div>
+                    <div class="info-value">{{ danka.address }}</div>
+                  </div>
+                </div>
+
+                <div class="info-pair-row">
+                  <div class="info-row phone-row">
+                    <div class="info-label">電話番号</div>
 
-                    @for (phone of danka.phones; track $index) {
-                      <div class="phone-item">
-                        <div>{{ phone.tel }}</div>
-                        <div>{{ phone.note }}</div>
+                    <div class="phone-table">
+                      <div class="phone-header">
+                        <div>番号</div>
+                        <div>備考</div>
                       </div>
-                    }
+
+                      @for (phone of danka.phones; track $index) {
+                        <div class="phone-item">
+                          <div>{{ phone.tel }}</div>
+                          <div>{{ phone.note }}</div>
+                        </div>
+                      }
+                    </div>
                   </div>
                 </div>
               </div>
@@ -190,19 +217,18 @@
             </div>
 
             <section class="family-list-summary">
-              <div>
-                <p class="family-list-title">
-                  {{ danka.householdName }}の家族 {{ families.length }}名
-                </p>
+              <div class="family-search-box">
+                <span class="family-search-label">家族検索</span>
+                <input
+                  type="text"
+                  [(ngModel)]="familySearchKeyword"
+                  placeholder="氏名・ふりがな・続柄・備考で検索"
+                />
               </div>
-
-              <p class="family-list-head">
-                ※ 世帯主：{{ danka.householder }}
-              </p>
             </section>
 
             <section class="family-table-section">
-              @if (families.length > 0) {
+              @if (filteredFamilies.length > 0) {
                 <div class="family-table">
                   <div class="family-table-header">
                     <div>氏名</div>
@@ -214,7 +240,7 @@
                     <div>操作</div>
                   </div>
 
-                  @for (family of families; track family.id) {
+                  @for (family of filteredFamilies; track family.id) {
                     <div class="family-table-row">
                       <div class="family-person-name">
                         {{ family.name }}
@@ -252,7 +278,11 @@
                 </div>
               } @else {
                 <div class="empty-family-message">
-                  登録されている家族情報はありません。
+                  @if (families.length > 0) {
+                    検索条件に一致する家族情報はありません。
+                  } @else {
+                    登録されている家族情報はありません。
+                  }
                 </div>
               }
             </section>

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

@@ -86,8 +86,8 @@
   margin-top: 36px;
   border: 2px solid #8a6543;
   border-radius: 6px;
-  background: #8a6543;
-  color: #ffffff;
+  background: #ffffff;
+  color: #8a6543;
   font-size: 18px;
   font-weight: 800;
   cursor: pointer;
@@ -95,23 +95,27 @@
 }
 
 .edit-button:hover {
-  background: #765639;
+  background: #f6efe6;
 }
 
 .family-summary {
-  min-height: 82px;
+  min-height: 64px;
   margin-bottom: 28px;
-  padding: 14px 26px;
+  padding: 12px 22px;
   border: 2px solid #d8caba;
   border-radius: 14px;
   background: #eadfce;
-  display: grid;
-  grid-template-columns: 1.2fr 1.6fr auto;
+  display: flex;
   align-items: center;
-  column-gap: 24px;
   box-sizing: border-box;
 }
 
+.family-name-area {
+  display: flex;
+  align-items: baseline;
+  gap: 18px;
+}
+
 .family-name {
   margin: 0;
   color: #2f2720;
@@ -121,7 +125,7 @@
 }
 
 .family-head {
-  margin: 2px 0 0;
+  margin: 0;
   color: #6f6257;
   font-size: 16px;
 }
@@ -153,11 +157,11 @@
   width: 140px;
   height: 46px;
   margin-top: 36px;
-  border: 2px solid #d8caba;
+  border: 2px solid #8a6543;
   border-radius: 6px;
   background: #ffffff;
-  color: #2f2720;
-  font-size: 16px;
+  color: #8a6543;
+  font-size: 18px;
   font-weight: 800;
   cursor: pointer;
   box-sizing: border-box;
@@ -167,16 +171,37 @@
   background: #f6efe6;
 }
 
+.family-page-add-button {
+  width: 140px;
+  height: 46px;
+  margin-top: 36px;
+  border: 2px solid #8a6543;
+  border-radius: 6px;
+  background: #ffffff;
+  color: #8a6543;
+  font-size: 18px;
+  font-weight: 800;
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+}
+
+.family-page-add-button:hover {
+  background: #f6efe6;
+}
+
 
 .detail-content {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) 500px;
-  gap: 48px;
+  grid-template-columns: minmax(0, 1fr) 460px;
+  gap: 28px;
   align-items: start;
 }
 
 .basic-info-section {
-  padding-left: 8px;
+  padding-left: 0;
 }
 
 .section-heading {
@@ -197,13 +222,24 @@
 }
 
 .info-form {
-  width: 650px;
+  width: 100%;
+}
+
+.info-pair-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 14px;
+  margin-top: 10px;
 }
 
 .info-row {
   display: grid;
-  grid-template-columns: 120px 1fr;
+  grid-template-columns: 96px 1fr;
   align-items: center;
+  margin-top: 0;
+}
+
+.info-form > .info-row {
   margin-top: 10px;
 }
 
@@ -228,7 +264,6 @@
 
 .phone-row {
   align-items: start;
-  margin-top: 18px;
 }
 
 .phone-row .info-label {
@@ -242,7 +277,7 @@
 .phone-header,
 .phone-item {
   display: grid;
-  grid-template-columns: 1fr 1.4fr 1.2fr;
+  grid-template-columns: 1fr 1fr;
   align-items: center;
 }
 
@@ -272,7 +307,7 @@
 
 .status-panel {
   min-height: 382px;
-  padding: 30px 24px 22px;
+  padding: 24px 22px 22px;
   border: 2px solid #d8caba;
   border-radius: 62px;
   background: #fffdf9;
@@ -421,23 +456,39 @@
   justify-content: space-between;
   align-items: center;
   gap: 16px;
-  padding: 16px 20px;
+  padding: 14px 18px;
   margin-bottom: 20px;
   background: #efe4d6;
   border: 2px solid #d8c2aa;
   border-radius: 12px;
 }
 
-.family-list-title {
-  margin: 0;
-  font-size: 20px;
-  font-weight: 700;
+.family-search-box {
+  flex: 1;
+  min-width: 0;
+  display: grid;
+  grid-template-columns: 96px minmax(0, 1fr);
+  gap: 12px;
+  align-items: center;
 }
 
-.family-list-head {
-  margin: 0;
-  font-size: 14px;
-  color: #6f6256;
+.family-search-label {
+  color: #4b3c31;
+  font-size: 16px;
+  font-weight: 800;
+}
+
+.family-search-box input {
+  width: 100%;
+  height: 42px;
+  padding: 0 14px;
+  border: 2px solid #d8c2aa;
+  border-radius: 8px;
+  background: #fffdf9;
+  color: #2f2720;
+  font-size: 15px;
+  font-weight: 700;
+  box-sizing: border-box;
 }
 
 .family-table-section {
@@ -1023,6 +1074,11 @@
     flex-direction: column;
   }
 
+  .family-search-box {
+    width: 100%;
+    grid-template-columns: 1fr;
+  }
+
   .family-table {
     overflow-x: auto;
   }

src/app/pages/danka-detail/danka-detail.ts

@@ -10,6 +10,7 @@ import { MarriageRelation } from '../../models/marriage-relation';
 import { AppHeader } from '../../share/header/app-header';
 import { AppSideMenu } from '../../share/side-menu/app-side-menu';
 import { MarriageRelationService } from '../../services/marriage-relation-service';
+import { FormsModule } from '@angular/forms';
 
 interface NextMemorial {
   name: string;
@@ -20,7 +21,7 @@ interface NextMemorial {
 
 @Component({
   selector: 'app-danka-detail',
-  imports: [AppHeader, AppSideMenu, RouterLink],
+  imports: [AppHeader, AppSideMenu, RouterLink, FormsModule],
   templateUrl: './danka-detail.html',
   styleUrl: './danka-detail.scss',
 })
@@ -31,6 +32,7 @@ export class DankaDetail {
   marriageRelations: MarriageRelation[] = [];
   nextMemorial: NextMemorial | undefined;
   currentYear = new Date().getFullYear();
+  familySearchKeyword = '';
 
   selectedTab: 'basic' | 'family' | 'kakocho' | 'familyTree' = 'basic';
   selectedFamily: Family | undefined = undefined;
@@ -80,6 +82,23 @@ export class DankaDetail {
     return age.toString();
   }
 
+  get filteredFamilies(): Family[] {
+    const keyword = this.familySearchKeyword.trim();
+    if (!keyword) {
+      return this.families;
+    }
+
+    return this.families.filter((family) =>
+      [
+        family.name,
+        family.furigana,
+        family.birthDate,
+        family.relationship,
+        family.note,
+      ].some((value) => value.includes(keyword)),
+    );
+  }
+
   getKaiki(deathDate: string): number {
     return this.currentYear - new Date(deathDate).getFullYear() + 1;
   }

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

@@ -93,7 +93,7 @@
 
 .form-row {
   display: grid;
-  grid-template-columns: 120px 1fr;
+  grid-template-columns: 160px 1fr;
   align-items: center;
   gap: 16px;
   margin-bottom: 14px;

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

@@ -24,7 +24,9 @@ export class DankaEdit {
 
   dankaForm = new FormGroup({
     householdName: new FormControl('', [Validators.required]),
+    householdFurigana: new FormControl(''),
     householder: new FormControl('', [Validators.required]),
+    householderFurigana: new FormControl(''),
     postalCode: new FormControl('', Validators.pattern(/^\d{3}-\d{4}$/)),
     address: new FormControl(''),
     phones: new FormArray([this.createPhoneForm('', '')]),
@@ -42,7 +44,9 @@ export class DankaEdit {
       if (this.danka) {
         this.dankaForm.patchValue({
           householdName: this.danka.householdName,
+          householdFurigana: this.danka.householdFurigana,
           householder: this.danka.householder,
+          householderFurigana: this.danka.householderFurigana,
           postalCode: this.danka.postalCode,
           address: this.danka.address,
         });
@@ -90,7 +94,9 @@ export class DankaEdit {
     const updatedDanka: Danka = {
       id: dankaId,
       householdName: formValue.householdName?.trim() ?? '',
+      householdFurigana: formValue.householdFurigana?.trim() ?? '',
       householder: formValue.householder?.trim() ?? '',
+      householderFurigana: formValue.householderFurigana?.trim() ?? '',
       postalCode: formValue.postalCode?.trim() ?? '',
       address: formValue.address?.trim() ?? '',
       updatedAt: this.formatDateForSave(new Date()),

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

@@ -177,7 +177,9 @@
   display: grid;
   grid-template-columns: 1.5fr 1.1fr 2.8fr 1.25fr 0.65fr;
   align-items: center;
+  justify-items: start;
   column-gap: 16px;
+  text-align: left;
 }
 
 .danka-table-header {

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

@@ -105,7 +105,9 @@ export class DankaList {
     this.filterDankaList = this.dankaList.filter((danka) => {
       return (
         danka.householdName.includes(keyword) ||
+        danka.householdFurigana.includes(keyword) ||
         danka.householder.includes(keyword) ||
+        danka.householderFurigana.includes(keyword) ||
         danka.postalCode.includes(keyword) ||
         danka.address.includes(keyword) ||
         danka.phones.some((phone) => phone.tel.includes(keyword) || phone.note.includes(keyword))

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

@@ -7,7 +7,7 @@
   <main class="danka-edit-main">
     <section class="edit-panel">
       <div class="page-title-area">
-        <h1>家族（個人）編集</h1>
+        <h1>{{ familyId ? '家族編集' : '家族追加' }}</h1>
       </div>
 
       <form [formGroup]="familyForm" class="edit-form">
@@ -44,7 +44,7 @@
                   <select id="relationship"
                           formControlName="relationship">
                     <option value="">選択してください</option>
-                    <option value="世帯主">世帯主</option>
+                    <option value="施主">施主</option>
                     <option value="配偶者">配偶者</option>
                     <option value="父">父</option>
                     <option value="母">母</option>
@@ -170,12 +170,12 @@
 
           <section class="phone-edit-section">
             <div class="householder-area">
-              <h3>この方を世帯主にする</h3>
+              <h3>この方を施主にする</h3>
 
               <button type="button"
                       class="set-householder-button"
                       (click)="setAsHouseholder()">
-                世帯主に設定
+                施主に設定
               </button>
             </div>
           </section>

src/app/services/dankaService.ts

@@ -9,7 +9,9 @@ export class DankaService {
     {
       id: '1',
       householdName: '鈴木家',
+      householdFurigana: 'すずきけ',
       householder: '鈴木 太郎',
+      householderFurigana: 'すずき たろう',
       postalCode: '123-4567',
       address: '市内 1-2-3',
       updatedAt: '2026-05-28',
@@ -20,14 +22,16 @@ export class DankaService {
         },
         {
           tel: '090-1234-5678',
-          note: '世帯主',
+          note: '施主',
         },
       ],
     },
     {
       id: '2',
       householdName: '古田家',
+      householdFurigana: 'ふるたけ',
       householder: '古田 太郎',
+      householderFurigana: 'ふるた たろう',
       postalCode: '234-4567',
       address: '市内 1-2-3',
       updatedAt: '2026-05-28',
@@ -38,7 +42,7 @@ export class DankaService {
         },
         {
           tel: '080-7890-4567',
-          note: '世帯主',
+          note: '施主',
         },
       ],
     }

src/app/services/family-service.ts

@@ -13,7 +13,7 @@ export class FamilyService {
       name: '鈴木　花子',
       relationship: '母',
       birthDate: '1975-01-01',
-      note: '次の世帯主',
+      note: '次の施主',
       fatherId: '5',
       motherId: '6',
       spouseId: '3',