檀家が非表示にするため、ホームページからコメントアウト

.firebase/hosting.ZGlzdFxrYWlteW8tbWFuYWdlbWVudA.cache

+browser/styles-5INURTSO.css,1780145996852,46b50c321b39e89a491b6727a01628c34245605a30beb3e7414c5e01cff90e6e
+prerendered-routes.json,1780145996846,acea2ed63a273ab4ca21a5071e93c8246d013bca031410b2d34087a30f99602d
+index.html,1780146161811,2d2b0c813628a70bd46d4e7ccc22c7b650055109ba37923dd6adf82a3fa68b7e
+3rdpartylicenses.txt,1780145996835,7b48241c2f7b9524001508fcb167ceab86499bc8633fb62758ee57ccdeb7ebaf
+browser/index.html,1780145996835,49759a68c1f76e959a03b6b184c12b6a527dcbfc9fd7ea26fa2337b0ebdb8e2c
+browser/favicon.ico,1779604170218,a905b13e228420df3dbe746dfb656d37a49736494c0737d00e007c8dc7319912
+browser/main-V5P7I3DP.js,1780145996852,4ff36ce4802f457be1e4087158575592549e05102e0f141d0943903ef607dc64

.firebase/hosting.ZGlzdFxrYWlteW8tbWFuYWdlbWVudFxicm93c2Vy.cache

+styles-5INURTSO.css,1780147055905,46b50c321b39e89a491b6727a01628c34245605a30beb3e7414c5e01cff90e6e
+index.html,1780147055905,49759a68c1f76e959a03b6b184c12b6a527dcbfc9fd7ea26fa2337b0ebdb8e2c
+favicon.ico,1779604170218,a905b13e228420df3dbe746dfb656d37a49736494c0737d00e007c8dc7319912
+main-V5P7I3DP.js,1780147055907,4ff36ce4802f457be1e4087158575592549e05102e0f141d0943903ef607dc64

.firebaserc

+{
+  "projects": {
+    "default": "dankamanagement-39a6a"
+  }
+}

angular.json

   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "version": 1,
   "cli": {
-    "packageManager": "npm"
+    "packageManager": "npm",
+    "analytics": false
   },
   "newProjectRoot": "projects",
   "projects": {
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "4kB",
-                  "maximumError": "8kB"
+                  "maximumWarning": "20kB",
+                  "maximumError": "30kB"
                 }
               ],
               "outputHashing": "all"

firebase.json

+{
+  "hosting": {
+    "public": "dist/kaimyo-management/browser",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ]
+  }
+}

package.json

     "@angular/forms": "^21.2.0",
     "@angular/platform-browser": "^21.2.0",
     "@angular/router": "^21.2.0",
+    "firebase": "^12.14.0",
     "rxjs": "~7.8.0",
     "svg-pan-zoom": "^3.6.2",
     "tslib": "^2.3.0"

src/app/firebase.ts

+import { initializeApp } from 'firebase/app';
+import { getFirestore } from 'firebase/firestore';
+
+const firebaseConfig = {
+  apiKey: "AIzaSyBdkDfrr2jA33olJSd2Fm5KeneOwpded-o",
+  authDomain: "dankamanagement-39a6a.firebaseapp.com",
+  projectId: "dankamanagement-39a6a",
+  storageBucket: "dankamanagement-39a6a.firebasestorage.app",
+  messagingSenderId: "85260511199",
+  appId: "1:85260511199:web:27b2c43a0fdb77ad32066a",
+  measurementId: "G-Z3PPJZDQ16"
+};
+
+export const app = initializeApp(firebaseConfig);
+export const db = getFirestore(app);

src/app/models/familytreenode.ts

 import { Family } from "./family";
+import { Kakocho } from "./kakocho";
 
 export interface FamilyTreeNode {
   family: Family;
 
-  spouses: FamilyTreeNode[];
+  kakocho?: Kakocho;   // ★追加（ここが核心）
 
-  children: FamilyTreeNode[];
+  isDeceased: boolean; // ★追加
 
+  spouses: FamilyTreeNode[];
+  children: FamilyTreeNode[];
   parents: FamilyTreeNode[];
 }

src/app/models/memorial.ts

   id: string;
   dankaId: string;
   name: string;
+  furigana: string;
   kaimyo: string;
   relationship: string;
   householdName: string;

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

   position: relative;
   display: block;
   min-height: 100vh;
-  background: #f4eee4;
+  background: #f6f0e7;
   color: #2f2720;
 }
 
 .danka-detail-page {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  background: #f4eee4;
+  display: grid;
+  grid-template-columns: 172px minmax(0, 1fr);
+  gap: 20px;
+  padding: 0 38px 36px 0;
+  background: #f6f0e7;
 }
 
 .danka-detail-main {
-  flex: 1;
-  padding-right: 34px;
+  min-width: 0;
   box-sizing: border-box;
 }
 
 .detail-panel {
-  min-height: 650px;
-  padding: 26px 34px 36px;
-  background: #ffffff;
+  min-height: 760px;
+  padding: 34px 42px 40px;
+  background: #fffdf9;
   border: 2px solid #d8caba;
-  border-radius: 76px;
+  border-radius: 64px;
   box-sizing: border-box;
 }
 
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
-  margin-bottom: 20px;
+  gap: 24px;
+  margin-bottom: 22px;
 }
 
 .page-title-row h1 {
-  margin: 0 0 8px;
+  margin: 0 0 18px;
   color: #2f2720;
-  font-size: 32px;
-  line-height: 1.2;
+  font-size: 34px;
+  line-height: 1.1;
   font-weight: 800;
-  letter-spacing: 0.02em;
+  letter-spacing: 0;
 }
 
 .tab-list {
 .edit-button {
   width: 140px;
   height: 46px;
-  margin-top: 36px;
+  margin-top: 54px;
   border: 2px solid #8a6543;
   border-radius: 6px;
   background: #ffffff;
 
 .family-summary {
   min-height: 64px;
-  margin-bottom: 28px;
-  padding: 12px 22px;
+  margin-bottom: 22px;
+  padding: 14px 24px;
   border: 2px solid #d8caba;
-  border-radius: 14px;
-  background: #eadfce;
+  border-radius: 8px;
+  background: #fbf7f0;
   display: flex;
   align-items: center;
   box-sizing: border-box;
 
 .family-name-area {
   display: flex;
-  align-items: baseline;
+  align-items: center;
   gap: 18px;
 }
 
+.family-summary-mark {
+  width: 42px;
+  height: 42px;
+  border-radius: 999px;
+  background: #8a6543;
+  color: #ffffff;
+  font-weight: 800;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+}
+
 .family-name {
   margin: 0;
   color: #2f2720;
 .add-button {
   width: 140px;
   height: 46px;
-  margin-top: 36px;
+  margin-top: 54px;
   border: 2px solid #8a6543;
   border-radius: 6px;
   background: #ffffff;
 .family-page-add-button {
   width: 140px;
   height: 46px;
-  margin-top: 36px;
+  margin-top: 54px;
   border: 2px solid #8a6543;
   border-radius: 6px;
   background: #ffffff;
 
 .detail-content {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) 460px;
-  gap: 28px;
+  grid-template-columns: minmax(0, 1fr) 420px;
+  gap: 20px;
   align-items: start;
 }
 
 .basic-info-section {
-  padding-left: 0;
+  padding: 24px 20px 22px;
+  border: 2px solid #d8caba;
+  border-radius: 12px;
+  background: #fffdf9;
+  box-sizing: border-box;
 }
 
 .section-heading {
-  margin-bottom: 8px;
+  margin-bottom: 14px;
 }
 
 .section-heading h2 {
   color: #2f2720;
   font-size: 22px;
   font-weight: 800;
+  line-height: 1.3;
 }
 
 .section-heading p {
 }
 
 .info-pair-row {
+  border-top: 1px solid #eadfce;
+}
+
+.info-pair-row:first-child {
+  border-top: 0;
+}
+
+.info-two-column {
   display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 14px;
-  margin-top: 10px;
+  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.85fr);
+  gap: 18px;
 }
 
 .info-row {
   display: grid;
-  grid-template-columns: 96px 1fr;
+  grid-template-columns: 154px 1fr;
   align-items: center;
   margin-top: 0;
+  min-height: 62px;
+  padding: 6px 0;
+  box-sizing: border-box;
 }
 
 .info-form > .info-row {
 }
 
 .info-label {
+  min-height: 42px;
+  padding: 0 14px;
+  border-radius: 6px;
+  background: #f3eee8;
   color: #4b3c31;
-  font-size: 17px;
+  font-size: 16px;
   font-weight: 800;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
 }
 
 .info-value {
-  min-height: 40px;
-  padding: 8px 12px;
-  border: 2px solid #d8caba;
-  border-radius: 6px;
-  background: #fffdf9;
+  min-height: 42px;
+  padding: 8px 18px;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
   color: #2f2720;
-  font-size: 17px;
+  font-size: 16px;
+  font-weight: 700;
   box-sizing: border-box;
   display: flex;
   align-items: center;
 
 .phone-row {
   align-items: start;
+  min-height: 104px;
 }
 
 .phone-row .info-label {
-  padding-top: 8px;
+  min-height: 104px;
+  align-items: flex-start;
+  padding-top: 16px;
 }
 
 .phone-table {
   width: 100%;
+  padding: 8px 18px;
+  box-sizing: border-box;
 }
 
 .phone-header,
 }
 
 .phone-item {
-  min-height: 52px;
-  margin-top: 4px;
-  padding: 0 10px;
-  border: 2px solid #d8caba;
-  border-radius: 8px;
-  background: #fffdf9;
+  min-height: 36px;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  border-top: 1px solid #eadfce;
+  background: transparent;
   color: #2f2720;
   font-size: 16px;
   box-sizing: border-box;
 }
 
+.phone-item:first-child {
+  border-top: 0;
+}
+
+.phone-note {
+  min-height: 28px;
+  width: fit-content;
+  min-width: 88px;
+  border-radius: 6px;
+  background: #f3eee8;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  justify-self: start;
+  padding: 0 14px;
+  box-sizing: border-box;
+}
+
+.note-info-row {
+  align-items: center;
+}
+
+.note-info-row .info-label {
+  margin-top: 0;
+}
+
+.note-info-value {
+  align-items: center;
+  min-height: 64px;
+  white-space: pre-wrap;
+}
+
 .status-panel {
-  min-height: 382px;
-  padding: 24px 22px 22px;
+  min-height: 100%;
+  padding: 26px 20px 24px;
   border: 2px solid #d8caba;
-  border-radius: 62px;
+  border-radius: 12px;
   background: #fffdf9;
   box-sizing: border-box;
 }
 
 .status-panel h2 {
-  margin: 0 0 18px;
+  margin: 0 0 24px;
   color: #2f2720;
   font-size: 22px;
   font-weight: 800;
+  line-height: 1.3;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.panel-heading-icon {
+  color: #8a6543;
+  font-weight: 800;
 }
 
 .status-card-list {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 14px;
-  margin-bottom: 20px;
+  gap: 16px;
+  margin-bottom: 28px;
 }
 
 .status-card {
-  min-height: 104px;
-  padding: 14px 18px;
+  min-height: 126px;
+  padding: 18px 16px;
   border: 2px solid #d8caba;
-  border-radius: 14px;
+  border-radius: 8px;
   background: #ffffff;
   color: #2f2720;
   text-decoration: none;
   margin: 0;
   color: #7b6b5c;
   font-size: 16px;
+  text-align: center;
 }
 
 .status-count {
-  margin: 2px 0 0;
+  margin: 10px 0 0;
   color: #2f2720;
   font-size: 32px;
   font-weight: 800;
   line-height: 1.1;
+  text-align: center;
 }
 
 .status-link {
-  margin: 4px 0 0;
+  margin: 10px 0 0;
   color: #7b6b5c;
   font-size: 14px;
+  text-align: center;
 }
 
 .next-memorial {
 }
 
 .next-memorial h3 {
-  margin: 0 0 8px;
+  margin: 0 0 16px;
   color: #4b3c31;
-  font-size: 17px;
+  font-size: 18px;
   font-weight: 800;
+  display: flex;
+  align-items: center;
+  gap: 12px;
 }
 
 .memorial-card {
-  min-height: 72px;
-  padding: 14px 20px;
+  min-height: 116px;
+  padding: 24px 18px;
   border: 2px solid #d8caba;
-  border-radius: 10px;
+  border-radius: 8px;
   background: #ffffff;
   box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
 }
 
 .memorial-title {
 
   h2 {
     margin: 0;
-    font-size: 20px;
-    font-weight: 700;
+    font-size: 22px;
+    line-height: 1.3;
+    font-weight: 800;
   }
 }
 
 
   h2 {
     margin: 0;
-    font-size: 20px;
-    font-weight: 700;
+    font-size: 22px;
+    line-height: 1.3;
+    font-weight: 800;
   }
 }
 
   color: #ffffff;
 }
 
+@media (max-width: 1100px) {
+  .danka-detail-page {
+    grid-template-columns: 1fr;
+    padding: 0 24px 32px;
+  }
+
+  .detail-panel {
+    min-height: auto;
+    border-radius: 28px;
+    padding: 28px 24px 32px;
+  }
+
+  .detail-content {
+    grid-template-columns: 1fr;
+  }
+
+  .page-title-row {
+    flex-direction: column;
+  }
+
+  .edit-button,
+  .add-button,
+  .family-page-add-button {
+    margin-top: 0;
+  }
+}
+
 /* 家族表が狭い画面では横スクロール */
 @media (max-width: 800px) {
+  .detail-content,
+  .info-two-column {
+    grid-template-columns: 1fr;
+  }
+
+  .info-row {
+    grid-template-columns: 1fr;
+    gap: 8px;
+  }
+
+  .phone-row .info-label {
+    min-height: 42px;
+  }
+
   .family-list-summary {
     align-items: flex-start;
     flex-direction: column;
 .family-text {
   writing-mode: vertical-rl;
   text-orientation: upright;
-}
+}

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

-import { Component } from '@angular/core';
+import { ChangeDetectorRef, Component } from '@angular/core';
 import {
   ElementRef,
   ViewChild,
   AfterViewInit
 } from '@angular/core';
+import { OnInit } from '@angular/core';
 import { ActivatedRoute, RouterLink } from '@angular/router';
 import { DankaService } from '../../services/dankaService';
 import { FamilyService } from '../../services/family-service';
 import { MarriageRelationService } from '../../services/marriage-relation-service';
 import { FormsModule } from '@angular/forms';
 import { EventStatus, EventTarget, EventType } from '../../models/event';
+import { EventService } from '../../services/event-service';
 import {
   FamilyTreeBuilderService,
   FamilyTreeNode
 import { FamilyUnitLayoutService } from '../../services/family-unit-layout';
 
 
+
 interface NextMemorial {
   name: string;
   memorialType: string;
   templateUrl: './danka-detail.html',
   styleUrl: './danka-detail.scss',
 })
-export class DankaDetail implements AfterViewInit {
+export class DankaDetail implements OnInit, AfterViewInit {
   danka: Danka | undefined;
   families: Family[] = [];
   kakocholist: Kakocho[] = [];
   familySearchKeyword = '';
   eventSearchKeyword = '';
   eventStatuses: EventStatus[] = ['未案内', '案内済'];
-  private eventStatusByTargetId: Record<string, EventStatus> = {};
   treeNodes: FamilyTreeNode[] = [];
   layoutNodes: LayoutNode[] = [];
   layoutNodeMap = new Map<string, LayoutNode>();
 
   @ViewChild('familyTreeSvg')
   familyTreeSvg?: ElementRef<SVGSVGElement>;
+  @ViewChild('familyTreeSvg')
+  set svg(el: ElementRef<SVGSVGElement> | undefined) {
+    if (!el) return;
+
+    this.familyTreeSvg = el;
+    this.initializePanZoom();
+  }
   private panZoomInstance: any;
 
   readonly PERSON_WIDTH = 90;
     private familyTreeBuilder: FamilyTreeBuilderService,
     private familyTreeLayout: FamilyTreeLayoutService,
     private familyUnitLayout: FamilyUnitLayoutService,
+    private eventService: EventService,
+    private cdr: ChangeDetectorRef,
   ) {
+
     const tab = this.route.snapshot.queryParams['tab'];
     if (tab === 'family') {
       this.selectedTab = 'family';
       this.selectedTab = 'familyTree';
     }
 
+  }
+  ngOnInit(): void {
+    this.init();
+  }
+  async init(): Promise<void> {
     const id = this.route.snapshot.params['id'];
-    if (id) {
-      this.danka = this.dankaService.getDankaById(id);
-      this.marriageRelations = this.marriageRelationService.getMarriageRelationsByDankaId(id);
-      this.families = this.sortFamiliesByHouseholder(this.familyService.getFamiliesByDankaId(id));
-      this.selectedFamily = this.families[0];
-      this.kakocholist = this.kakochoService.getKakochoByDankaId(id);
-      this.nextMemorial = this.getNextMemorial();
-
-      this.treeNodes =
-        this.familyTreeBuilder.build(
-          this.families,
-          this.marriageRelations
-        );
 
-      const units =
-        this.familyTreeBuilder.buildFamilyUnits(
-          this.treeNodes
-        );
+    if (!id) return;
 
-      const unitTree =
-        this.familyTreeBuilder.buildFamilyUnitTree(
-          units
-        );
+    this.danka = (await this.dankaService.getDankaById(id)) ?? undefined;
+    if (!this.danka) return;
 
-      const unitRoots =
-        this.familyTreeBuilder.getUnitRoots(
-          unitTree
-        );
+    this.marriageRelations = await this.marriageRelationService.getMarriageRelationsByDankaId(id);
+    this.families = this.sortFamiliesByHouseholder(
+      await this.familyService.getFamiliesByDankaId(id)
+    );
 
-      this.unitLayouts =
-        this.familyUnitLayout.buildLayout(
-          unitRoots
-        );
+    this.selectedFamily = this.families[0];
+    this.kakocholist = await this.kakochoService.getKakochoByDankaId(id);
 
-      const roots =
-        this.familyTreeBuilder.getRoots(
-          this.treeNodes
-        );
+    this.nextMemorial = this.getNextMemorial();
 
-      this.layoutNodes =
-        this.familyTreeLayout.buildLayout(
-          roots
-        );
+    this.treeNodes =
+      this.familyTreeBuilder.build(
+        this.families,
+        this.marriageRelations,
+        this.kakocholist
+      );
 
-      this.rebuildLayoutNodeMap();
+    const units =
+      this.familyTreeBuilder.buildFamilyUnits(
+        this.treeNodes
+      );
 
-      this.unitLayouts =
-        this.familyUnitLayout.buildLayout(
-          unitRoots
-        );
+    const unitTree =
+      this.familyTreeBuilder.buildFamilyUnitTree(
+        units
+      );
 
-      this.rebuildUnitLayoutMap();
+    const unitRoots =
+      this.familyTreeBuilder.getUnitRoots(
+        unitTree
+      );
 
-      this.calculateViewBox();
+    this.unitLayouts =
+      this.familyUnitLayout.buildLayout(
+        unitRoots
+      );
 
-      this.kakocholist.forEach(kakocho => {
-        if (kakocho.familyId) {
-          this.deathDateMap.set(
-            kakocho.familyId,
-            kakocho
-          );
-        }
-      });
+    const roots =
+      this.familyTreeBuilder.getRoots(
+        this.treeNodes
+      );
+
+    this.layoutNodes =
+      this.familyTreeLayout.buildLayout(
+        roots
+      );
 
-      this.kakocholist.forEach(k => {
-        const key = this.normalizeName(k.name) + '_' + k.dankaId;
-        this.kakochoByNameMap.set(key, k);
-      });
+    this.rebuildLayoutNodeMap();
+
+    this.unitLayouts =
+      this.familyUnitLayout.buildLayout(
+        unitRoots
+      );
+
+    this.rebuildUnitLayoutMap();
+
+    this.calculateViewBox();
+
+    this.kakocholist.forEach(kakocho => {
+      if (kakocho.familyId) {
+        this.deathDateMap.set(
+          kakocho.familyId,
+          kakocho
+        );
+      }
+    });
+
+    this.kakocholist.forEach(k => {
+      const key = this.normalizeName(k.name) + '_' + k.dankaId;
+      this.kakochoByNameMap.set(key, k);
+    });
+
+    // Angularへ反映
+    this.cdr.detectChanges();
+
+    // DOM描画完了待ち
+    await new Promise(resolve => setTimeout(resolve));
 
-    }
   }
 
   ngAfterViewInit(): void {
         const age = this.currentYear - birthDate.getFullYear();
         return this.getEventTypes(age).map((eventType) => {
           const id = `${family.id}-${eventType}`;
+          const defaultStatus: EventStatus = Number(family.id) % 2 === 0 ? '案内済' : '未案内';
           return {
             id,
             dankaId: family.dankaId,
             age,
             eventType,
             note: family.note,
-            status:
-              this.eventStatusByTargetId[id] ?? (Number(family.id) % 2 === 0 ? '案内済' : '未案内'),
+            status: this.eventService.getEventStatus(id, defaultStatus),
           };
         });
       })
 
   changeEventStatus(target: EventTarget, status: EventStatus): void {
     target.status = status;
-    this.eventStatusByTargetId[target.id] = status;
+    this.eventService.saveEventStatus(target.id, status);
   }
 
   getKaiki(deathDate: string): number {

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

           <section class="phone-edit-section">
             <div class="section-heading">
               <h2>電話番号（複数登録）</h2>
-              <p>番号と備考を複数登録できます。</p>
             </div>
 
             <div formArrayName="phones" class="phone-table">
         </div>
 
         <div class="bottom-actions">
-          <button type="button" class="delete-button" (click)="deleteDanka()">
-            削除
-          </button>
-
-          <button type="button" class="cancel-button" [routerLink]="['/danka-detail', danka?.id]">
-            キャンセル
-          </button>
-
-          <button
-            type="button"
-            class="save-button"
-            [disabled]="dankaForm.invalid"
-            (click)="saveDanka()"
-          >
-            保存
-          </button>
+          <div class="left-actions"></div>
+
+          <div class="right-actions">
+            @if (danka) {
+              <button type="button" class="delete-button" (click)="deleteDanka()">
+                削除
+              </button>
+            }
+            <button type="button" class="cancel-button" [routerLink]="danka ? ['/danka-detail', danka.id] : ['/danka-list']">
+              キャンセル
+            </button>
+
+            <button
+              type="button"
+              class="save-button"
+              [disabled]="dankaForm.invalid"
+              (click)="saveDanka()"
+            >
+              保存
+            </button>
+          </div>
         </div>
       </form>
     </section>

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

   position: relative;
   display: block;
   min-height: 100vh;
-  background: #f4eee4;
+  background: #f6f0e7;
   color: #2f2720;
 }
 
   grid-template-columns: 172px minmax(0, 1fr);
   gap: 20px;
   padding: 0 38px 36px 0;
-  background: #f4eee4;
+  background: #f6f0e7;
 }
 
 .danka-edit-main {
 .edit-panel {
   min-height: 760px;
   padding: 34px 42px 40px;
-  background: #ffffff;
+  background: #fffdf9;
   border: 2px solid #d8caba;
   border-radius: 64px;
   box-sizing: border-box;
 
 .edit-content {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) 500px;
-  gap: 32px;
+  grid-template-columns: minmax(0, 1fr) 430px;
+  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;
 
 /* 基本情報 */
 .form-list {
-  margin-top: 12px;
+  margin-top: 0;
+  padding-top: 18px;
+  border-top: 2px solid #eadfce;
 }
 
 .form-field {
 
 .form-row {
   display: grid;
-  grid-template-columns: 140px 1fr;
+  grid-template-columns: 132px 1fr;
   align-items: center;
-  gap: 14px;
-  margin-bottom: 12px;
+  gap: 18px;
+  margin-bottom: 14px;
 }
 
 .form-row label {
   padding: 0 14px;
 }
 
+.form-row:has(#postalCode) input {
+  max-width: 300px;
+}
+
 .form-row textarea {
-  min-height: 104px;
+  min-height: 150px;
   padding: 12px 14px;
   line-height: 1.6;
   resize: vertical;
 .phone-table-header,
 .phone-table-row {
   display: grid;
-  grid-template-columns: 1.35fr 1.45fr 84px;
+  grid-template-columns: minmax(110px, 1fr) minmax(88px, 0.8fr) 72px;
   align-items: center;
   gap: 10px;
 }
 .phone-action {
   display: flex;
   justify-content: flex-end;
-  margin-top: 10px;
+  margin-top: 16px;
 }
 
 .add-phone-button {
 /* 下部ボタン */
 .bottom-actions {
   display: flex;
-  justify-content: flex-end;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  margin-top: 36px;
+}
+
+.left-actions,
+.right-actions {
+  display: flex;
   align-items: center;
   gap: 12px;
-  margin-top: 26px;
 }
 
 .delete-button,

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

-import { Component, inject } from '@angular/core';
+import { Component, inject, OnInit } from '@angular/core';
 import {
   FormBuilder,
   FormGroup,
   templateUrl: './danka-edit.html',
   styleUrl: './danka-edit.scss',
 })
-export class DankaEdit {
+export class DankaEdit implements OnInit {
   danka: Danka | undefined;
 
   dankaForm = new FormGroup({
     private route: ActivatedRoute,
     private router: Router,
   ) {
+  }
+
+  ngOnInit(): void {
+    this.init();
+  }
+
+  async init(): Promise<void> {
     const id = this.route.snapshot.params['id'];
+
     if (id) {
-      this.danka = this.dankaService.getDankaById(id);
+      this.danka = await this.dankaService.getDankaById(id);
 
       if (this.danka) {
         this.dankaForm.patchValue({
         }
       }
     }
-    console.log(this.danka);
+
   }
 
   get phones() {
   }
 
   removePhone(index: number) {
-    if(this.phones.length > 1) {
+    if (this.phones.length > 1) {
       this.phones.removeAt(index);
     }
   }

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

-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { DankaService } from '../../services/dankaService';
 import { FamilyService } from '../../services/family-service';
   templateUrl: './danka-list.html',
   styleUrl: './danka-list.scss',
 })
-export class DankaList {
+export class DankaList implements OnInit {
   dankaList: Danka[] = [];
   filterDankaList: Danka[] = [];
   searchKeyword: string = '';
   dankaDisplay: number = 0;
   selectedFilter = 'all';
   selectedKanaRow: KanaRowValue = 'all';
+
   kanaRows: { label: string; value: KanaRowValue }[] = [
     { label: '全件', value: 'all' },
     { label: 'あ行', value: 'a' },
   ];
 
   private readonly kanaRowMap: Record<Exclude<KanaRowValue, 'all'>, string[]> = {
-    a: ['あ', 'い', 'う', 'え', 'お', 'ア', 'イ', 'ウ', 'エ', 'オ'],
-    ka: ['か', 'き', 'く', 'け', 'こ', 'が', 'ぎ', 'ぐ', 'げ', 'ご', 'カ', 'キ', 'ク', 'ケ', 'コ', 'ガ', 'ギ', 'グ', 'ゲ', 'ゴ'],
-    sa: ['さ', 'し', 'す', 'せ', 'そ', 'ざ', 'じ', 'ず', 'ぜ', 'ぞ', 'サ', 'シ', 'ス', 'セ', 'ソ', 'ザ', 'ジ', 'ズ', 'ゼ', 'ゾ'],
-    ta: ['た', 'ち', 'つ', 'て', 'と', 'だ', 'ぢ', 'づ', 'で', 'ど', 'タ', 'チ', 'ツ', 'テ', 'ト', 'ダ', 'ヂ', 'ヅ', 'デ', 'ド'],
-    na: ['な', 'に', 'ぬ', 'ね', 'の', 'ナ', 'ニ', 'ヌ', 'ネ', 'ノ'],
-    ha: ['は', 'ひ', 'ふ', 'へ', 'ほ', 'ば', 'び', 'ぶ', 'べ', 'ぼ', 'ぱ', 'ぴ', 'ぷ', 'ぺ', 'ぽ', 'ハ', 'ヒ', 'フ', 'ヘ', 'ホ', 'バ', 'ビ', 'ブ', 'ベ', 'ボ', 'パ', 'ピ', 'プ', 'ペ', 'ポ'],
-    ma: ['ま', 'み', 'む', 'め', 'も', 'マ', 'ミ', 'ム', 'メ', 'モ'],
-    ya: ['や', 'ゆ', 'よ', 'ヤ', 'ユ', 'ヨ'],
-    ra: ['ら', 'り', 'る', 'れ', 'ろ', 'ラ', 'リ', 'ル', 'レ', 'ロ'],
-    wa: ['わ', 'を', 'ん', 'ワ', 'ヲ', 'ン'],
+    a: ['あ','い','う','え','お','ア','イ','ウ','エ','オ'],
+    ka: ['か','き','く','け','こ','が','ぎ','ぐ','げ','ご','カ','キ','ク','ケ','コ','ガ','ギ','グ','ゲ','ゴ'],
+    sa: ['さ','し','す','せ','そ','ざ','じ','ず','ぜ','ぞ','サ','シ','ス','セ','ソ','ザ','ジ','ズ','ゼ','ゾ'],
+    ta: ['た','ち','つ','て','と','だ','ぢ','づ','で','ど','タ','チ','ツ','テ','ト','ダ','ヂ','ヅ','デ','ド'],
+    na: ['な','に','ぬ','ね','の','ナ','ニ','ヌ','ネ','ノ'],
+    ha: ['は','ひ','ふ','へ','ほ','ば','び','ぶ','べ','ぼ','ぱ','ぴ','ぷ','ぺ','ぽ','ハ','ヒ','フ','ヘ','ホ','バ','ビ','ブ','ベ','ボ','パ','ピ','プ','ペ','ポ'],
+    ma: ['ま','み','む','め','も','マ','ミ','ム','メ','モ'],
+    ya: ['や','ゆ','よ','ヤ','ユ','ヨ'],
+    ra: ['ら','り','る','れ','ろ','ラ','リ','ル','レ','ロ'],
+    wa: ['わ','を','ん','ワ','ヲ','ン'],
   };
 
   constructor(
     private dankaService: DankaService,
     private familyService: FamilyService,
-  ) {
-    this.dankaList = this.dankaService.getDankaList();
+  ) {}
+
+  // 非同期初期化
+  ngOnInit(): void {
+    this.init();
+  }
+
+  async init(): Promise<void> {
+    this.dankaList = await this.dankaService.getDankaList();
     this.showAllDanka();
   }
 
-  //全件タグで絞り込み
   showAllDanka() {
     this.selectedFilter = 'all';
     this.selectedKanaRow = 'all';
     this.dankaDisplay = this.filterDankaList.length;
   }
 
-  //電話番号タグで絞り込み
   filterPhoneAvailable() {
     this.selectedFilter = 'phone';
     this.selectedKanaRow = 'all';
-    //電話番号タブに該当する檀家を表示
-    this.filterDankaList = this.dankaList.filter((danka) => {
-      return danka.phones.some((phone) => phone.tel.trim() !== '');
-    });
+
+    this.filterDankaList = this.dankaList.filter((danka) =>
+      danka.phones.some((phone) => phone.tel.trim() !== '')
+    );
+
     this.dankaDisplay = this.filterDankaList.length;
   }
 
-  //検索処理
   searchDanka() {
     this.selectedFilter = 'search';
     this.selectedKanaRow = 'all';
-    //検索欄に入力された値から余白を削除
+
     const keyword = this.searchKeyword.trim();
-    //検索欄が空の場合は檀家の一覧を表示
+
     if (keyword === '') {
-      this.filterDankaList = this.dankaList;
-      this.dankaDisplay = this.filterDankaList.length;
+      this.showAllDanka();
       return;
     }
 
-    //検索欄に値がある場合は値に該当する内容を表示
-    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))
-      );
-    });
+    this.filterDankaList = this.dankaList.filter((danka) =>
+      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((p) => p.tel.includes(keyword) || p.note.includes(keyword))
+    );
+
     this.dankaDisplay = this.filterDankaList.length;
-    console.log(this.dankaDisplay);
   }
 
   filterByKanaRow(row: KanaRowValue): void {
     this.searchKeyword = '';
 
     if (row === 'all') {
-      this.filterDankaList = this.dankaList;
-      this.dankaDisplay = this.filterDankaList.length;
+      this.showAllDanka();
       return;
     }
 
-    this.filterDankaList = this.dankaList.filter((danka) => {
-      const firstKana = this.getDankaSortText(danka).charAt(0);
+    this.filterDankaList = this.dankaList.filter(async (danka) => {
+      const firstKana = (await this.getDankaSortText(danka)).charAt(0);
       return this.kanaRowMap[row].includes(firstKana);
     });
+
     this.dankaDisplay = this.filterDankaList.length;
   }
 
     this.dankaDisplay = 0;
   }
 
-  private getDankaSortText(danka: Danka): string {
+  private async getDankaSortText(danka: Danka): Promise<string> {
     const householderName = this.normalizeName(danka.householder);
-    const householderFamily = this.familyService
-      .getFamiliesByDankaId(danka.id)
-      .find((family) => this.normalizeName(family.name) === householderName);
+
+    const householderFamily = (await this.familyService
+      .getFamiliesByDankaId(danka.id))
+      .find((f) => this.normalizeName(f.name) === householderName);
 
     return (householderFamily?.furigana || danka.householder).trim();
   }
   private normalizeName(name: string): string {
     return name.replace(/\s/g, '');
   }
-}
+}

src/app/pages/dashboard/dashboard.html

         <div>
           <h1>ホーム</h1>
         </div>
-        <div class="date-pill">2026年5月28日 木曜日</div>
+        <div class="date-pill">{{ todayLabel }}</div>
       </div>
 
       <section class="overview" aria-label="概要">
-        <a class="card primary" href="#">
+        <a class="card" href="#">
           <div class="card-label">今週の法要</div>
           <div class="metric"><strong>{{ weeklyMemorialCount }}</strong><span>件</span></div>
           <p class="card-text">
         <div class="search-card">
           <div class="search-head">
             <div class="search-label">まとめて検索</div>
-            <div class="search-title">檀家・家族・故人を探す</div>
+            <div class="search-title"><!--檀家・-->家族・故人を探す</div>
           </div>
           <input
             class="search-input"
             type="search"
+            [(ngModel)]="searchKeyword"
             placeholder="氏名、ふりがな、住所、戒名で検索"
             aria-label="まとめて検索"
+            (keydown.enter)="searchAll()"
           />
-          <button class="search-button" type="button">検索</button>
+          <button class="search-button" type="button" (click)="searchAll()">検索</button>
         </div>
       </section>
 
       <section class="section">
         <div class="section-head">
           <div>
-            <h2>最近開いた檀家・世帯</h2>
+            <h2>最近開いた檀家</h2>
           </div>
-          <a class="text-link" href="#">一覧へ</a>
         </div>
 
         <div class="recent-table" role="table" aria-label="最近開いた檀家">
           <div class="recent-row recent-row-head" role="row">
-            <div class="cell" role="columnheader">施主名</div>
-            <div class="cell" role="columnheader">ふりがな</div>
+            <div class="cell" role="columnheader">筆頭者・ふりがな</div>
             <div class="cell" role="columnheader">住所</div>
             <div class="cell" role="columnheader">次の法要</div>
             <div class="cell" role="columnheader">最終更新</div>
           </div>
 
-          <a class="recent-row" href="#" role="row">
-            <div class="cell" role="cell">鈴木 太郎</div>
-            <div class="cell muted" role="cell">すずき</div>
-            <div class="cell" role="cell">市内 1-2-3</div>
-            <div class="cell" role="cell">6月12日</div>
-            <div class="cell muted" role="cell">今日</div>
-          </a>
-
-          <a class="recent-row" href="#" role="row">
-            <div class="cell" role="cell">佐藤 恵一</div>
-            <div class="cell muted" role="cell">さとう</div>
-            <div class="cell" role="cell">市内 2-8-1</div>
-            <div class="cell" role="cell">7月4日</div>
-            <div class="cell muted" role="cell">昨日</div>
-          </a>
-
-          <a class="recent-row" href="#" role="row">
-            <div class="cell" role="cell">田中 雪子</div>
-            <div class="cell muted" role="cell">たなか</div>
-            <div class="cell" role="cell">市内 3-4-6</div>
-            <div class="cell muted" role="cell">未設定</div>
-            <div class="cell muted" role="cell">5日前</div>
-          </a>
+          @if (recentDankaList.length > 0) {
+            @for (recent of recentDankaList; track recent.danka.id) {
+              <a class="recent-row" [routerLink]="['/danka-detail', recent.danka.id]" role="row">
+                <div class="cell" role="cell">
+                  <p class="recent-name">{{ recent.danka.householder }}</p>
+                  <p class="recent-sub">{{ recent.danka.householderFurigana || 'ふりがな未登録' }}</p>
+                </div>
+                <div class="cell" role="cell">{{ recent.danka.address }}</div>
+                <div class="cell" role="cell">{{ recent.nextMemorialLabel }}</div>
+                <div class="cell" role="cell">{{ recent.updatedAtLabel }}</div>
+              </a>
+            }
+          } @else {
+            <div class="recent-row" role="row">
+              <div class="cell muted" role="cell">表示できる檀家はありません</div>
+              <div class="cell muted" role="cell">-</div>
+              <div class="cell muted" role="cell">-</div>
+              <div class="cell muted" role="cell">-</div>
+            </div>
+          }
         </div>
       </section>
 
           <div>
             <h2>近日の法要・命日</h2>
           </div>
-          <a class="text-link" href="#">年次法要一覧へ</a>
         </div>
 
         <div class="upcoming-list">

src/app/pages/dashboard/dashboard.scss

   background: #fff8ed;
 }
 
-.card.primary {
-  background: var(--focus);
-  border-color: var(--accent);
-}
-
 .card-label,
 .search-label {
   color: var(--muted);
   font-size: 14px;
 }
 
-.text-link {
-  color: var(--brown-dark);
-  font-weight: 900;
-  white-space: nowrap;
-}
-
 .recent-table {
   overflow: hidden;
   border: 2px solid var(--line);
 
 .recent-row {
   display: grid;
-  grid-template-columns: 1.2fr 1fr 1.4fr 0.95fr 0.85fr;
+  grid-template-columns: 1.4fr 1.6fr 0.95fr 0.85fr;
   min-height: 52px;
   border-top: 1px solid var(--line);
   align-items: center;
   color: var(--muted);
 }
 
+.recent-sub {
+  margin-top: 4px;
+  color: var(--text);
+  font-size: 13px;
+  line-height: 1.35;
+}
+
 .upcoming-list {
   display: grid;
   gap: 10px;

src/app/pages/dashboard/dashboard.ts

-import { Component } from '@angular/core';
-import { RouterLink } from '@angular/router';
+import { ChangeDetectorRef, Component } from '@angular/core';
+import { Router, RouterLink } from '@angular/router';
 import { KakochoService } from '../../services/kakocho-service';
 import { DankaService } from '../../services/dankaService';
+import { Danka } from '../../models/danka';
 import { AppHeader } from '../../share/header/app-header';
 import { AppSideMenu } from '../../share/side-menu/app-side-menu';
+import { FormsModule } from '@angular/forms';
 
 interface UpcomingMemorial {
   id: string;
   status: '準備確認' | '要確認';
 }
 
+interface RecentDanka {
+  danka: Danka;
+  nextMemorialLabel: string;
+  updatedAtLabel: string;
+}
+
 @Component({
   selector: 'app-dashboard',
-  imports: [AppHeader, AppSideMenu, RouterLink],
+  imports: [AppHeader, AppSideMenu, RouterLink, FormsModule],
   templateUrl: './dashboard.html',
   styleUrl: './dashboard.scss',
 })
 export class Dashboard {
+  searchKeyword = '';
+  todayLabel = this.formatTodayLabel(new Date());
   weeklyMemorialCount = 0;
   todayMemorialCount = 0;
   upcomingWeeklyMemorialCount = 0;
   monthlyMemorialCount = 0;
+  recentDankaList: RecentDanka[] = [];
   upcomingMemorials: UpcomingMemorial[] = [];
 
   private readonly targetYear = new Date().getFullYear();
   constructor(
     private kakochoService: KakochoService,
     private dankaService: DankaService,
+    private router: Router,
+    private cdr: ChangeDetectorRef,
   ) {
     this.setWeeklyMemorialSummary();
     this.setMonthlyMemorialSummary();
+    this.setRecentDankaList();
     this.setUpcomingMemorials();
   }
 
-  private setWeeklyMemorialSummary(): void {
+  searchAll(): void {
+    const keyword = this.searchKeyword.trim();
+
+    this.router.navigate(['/search'], {
+      queryParams: keyword ? { keyword } : undefined,
+    });
+  }
+
+  private async setRecentDankaList(): Promise<void> {
+    const dankaList = await this.dankaService.getRecentDankaList(5);
+
+    this.recentDankaList = await Promise.all(
+      dankaList.map(async (danka) => ({
+        danka,
+        nextMemorialLabel: await this.getNextMemorialLabel(danka.id),
+        updatedAtLabel: this.formatUpdatedAt(danka.updatedAt),
+      })),
+    );
+    this.cdr.detectChanges();
+  }
+
+  private async setWeeklyMemorialSummary(): Promise<void> {
     const today = this.toDateOnly(new Date());
     const weekEnd = this.addDays(this.getWeekStart(today), 6);
 
-    const weeklyMemorials = this.kakochoService.getKakochoList().filter((kakocho) => {
+    const weeklyMemorials = (await this.kakochoService.getKakochoList()).filter((kakocho) => {
       const deathDate = this.parseDate(kakocho.deathDate);
       if (!deathDate) {
         return false;
       return deathDate?.getMonth() === today.getMonth() && deathDate.getDate() === today.getDate();
     }).length;
     this.upcomingWeeklyMemorialCount = this.weeklyMemorialCount - this.todayMemorialCount;
+    this.cdr.detectChanges();
   }
 
-  private setMonthlyMemorialSummary(): void {
+  private async setMonthlyMemorialSummary(): Promise<void> {
     const today = this.toDateOnly(new Date());
 
-    this.monthlyMemorialCount = this.kakochoService.getKakochoList().filter((kakocho) => {
+    this.monthlyMemorialCount = (await this.kakochoService.getKakochoList()).filter((kakocho) => {
       const deathDate = this.parseDate(kakocho.deathDate);
       if (!deathDate || !this.isMemorialTarget(deathDate)) {
         return false;
 
       return deathDate.getMonth() === today.getMonth();
     }).length;
+    this.cdr.detectChanges();
   }
 
-  private setUpcomingMemorials(): void {
+  private async setUpcomingMemorials(): Promise<void> {
     const today = this.toDateOnly(new Date());
     const endDate = this.addDays(today, 30);
 
-    this.upcomingMemorials = this.kakochoService
-      .getKakochoList()
-      .map((kakocho): UpcomingMemorial | null => {
+    const kakochoList = await this.kakochoService.getKakochoList();
+
+    const results = await Promise.all(
+      kakochoList.map(async (kakocho): Promise<UpcomingMemorial | null> => {
         const deathDate = this.parseDate(kakocho.deathDate);
-        if (!deathDate) {
-          return null;
-        }
+        if (!deathDate) return null;
 
         const eventDate = new Date(this.targetYear, deathDate.getMonth(), deathDate.getDate());
-        if (eventDate < today || eventDate > endDate) {
-          return null;
-        }
+        if (eventDate < today || eventDate > endDate) return null;
 
         const memorialType = this.getMemorialType(deathDate);
-        const danka = this.dankaService.getDankaById(kakocho.dankaId);
+
+        const danka = await this.dankaService.getDankaById(kakocho.dankaId);
+
         const type = memorialType ? '年忌法要' : '命日';
         const status = memorialType ? '準備確認' : '要確認';
 
           type,
           status,
         };
-      })
+      }),
+    );
+
+    this.upcomingMemorials = results
       .filter((memorial): memorial is UpcomingMemorial => memorial !== null)
       .sort((a, b) => a.date.getTime() - b.date.getTime() || a.title.localeCompare(b.title, 'ja'))
       .slice(0, 3);
+    this.cdr.detectChanges();
   }
 
   private isMemorialTarget(deathDate: Date): boolean {
     return `${date.getMonth() + 1}月${date.getDate()}日`;
   }
 
+  private async getNextMemorialLabel(dankaId: string): Promise<string> {
+    const today = this.toDateOnly(new Date());
+    const nextMemorial = (await this.kakochoService.getKakochoByDankaId(dankaId))
+      .map((kakocho) => {
+        const deathDate = this.parseDate(kakocho.deathDate);
+        if (!deathDate) {
+          return null;
+        }
+
+        const memorialDate = new Date(this.targetYear, deathDate.getMonth(), deathDate.getDate());
+        if (memorialDate < today || !this.getMemorialType(deathDate)) {
+          return null;
+        }
+
+        return memorialDate;
+      })
+      .filter((date): date is Date => date !== null)
+      .sort((a, b) => a.getTime() - b.getTime())[0];
+
+    return nextMemorial ? this.formatDateLabel(nextMemorial, today) : '未設定';
+  }
+
+  private formatUpdatedAt(updatedAt: unknown): string {
+    const updatedDate = this.parseDate(updatedAt);
+    const today = this.toDateOnly(new Date());
+
+    if (!updatedDate) {
+      return '未登録';
+    }
+
+    const diffDays = Math.floor((today.getTime() - updatedDate.getTime()) / 86400000);
+
+    if (diffDays === 0) {
+      return '今日';
+    }
+
+    if (diffDays === 1) {
+      return '昨日';
+    }
+
+    if (diffDays > 1 && diffDays <= 7) {
+      return `${diffDays}日前`;
+    }
+
+    return `${updatedDate.getMonth() + 1}月${updatedDate.getDate()}日`;
+  }
+
+  private formatTodayLabel(date: Date): string {
+    const weekdays = ['日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日'];
+    return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日 ${weekdays[date.getDay()]}`;
+  }
+
   private getWeekStart(date: Date): Date {
     const day = date.getDay();
     const diff = day === 0 ? -6 : 1 - day;
     return new Date(date.getFullYear(), date.getMonth(), date.getDate());
   }
 
-  private parseDate(value: string): Date | null {
+  private parseDate(value: unknown): Date | null {
+    if (!value) {
+      return null;
+    }
+
+    if (value instanceof Date) {
+      return value;
+    }
+
+    if (typeof value === 'object' && 'toDate' in value && typeof value.toDate === 'function') {
+      return value.toDate();
+    }
+
+    if (typeof value !== 'string') {
+      return null;
+    }
+
     const [year, month, day] = value.split('-').map(Number);
     if (!year || !month || !day) {
       return null;

src/app/pages/event/event.html

             <div>状態</div>
           </div>
 
-          @if (filteredEventTargets.length > 0) {
+          @if (isLoading) {
+            <div class="empty-message">
+              読み込み中です。
+            </div>
+          } @else if (filteredEventTargets.length > 0) {
             @for (target of filteredEventTargets; track target.id) {
               <div class="event-table-row">
                 <div>

src/app/pages/event/event.scss

 }
 
 .event-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;
 }
 
 .event-main {
-  flex: 1;
-  padding-right: 34px;
+  min-width: 0;
   box-sizing: border-box;
 }
 
 .event-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-row 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;
 }
 
 .filter-row {
 
 .filter-field select,
 .search-field input {
-  height: 38px;
+  height: 46px;
   padding: 0 14px;
   border: 2px solid #d8caba;
   border-radius: 8px;
 .list-header-row h2 {
   margin: 0;
   color: #2f2720;
-  font-size: 26px;
+  font-size: 22px;
   font-weight: 800;
 }
 
 }
 
 .event-table-header {
-  min-height: 46px;
+  min-height: 40px;
   padding: 0 14px;
   background: #efe4d6;
   color: #111111;
 }
 
 .event-table-row {
-  min-height: 78px;
+  min-height: 62px;
   padding: 10px 14px;
   border-top: 1px solid #d8c2aa;
   background: #fffdf9;
 }
 
 @media (max-width: 1100px) {
+  .event-page {
+    grid-template-columns: 1fr;
+    padding: 0 24px 32px;
+  }
+
+  .event-panel {
+    min-height: auto;
+    border-radius: 28px;
+    padding: 28px 24px 32px;
+  }
+
   .page-title-row {
     flex-direction: column;
   }
 }
 
 @media (max-width: 800px) {
-  .event-page {
-    flex-direction: column;
-  }
-
-  .event-main {
-    width: 100%;
-    padding: 16px 20px 32px;
-  }
-
-  .event-panel {
-    padding: 24px 20px 30px;
-    border-radius: 32px;
-  }
-
   .page-title-row h1 {
     font-size: 26px;
   }

src/app/pages/event/event.ts

-import { Component } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { DankaService } from '../../services/dankaService';
 import { FamilyService } from '../../services/family-service';
+import { EventService } from '../../services/event-service';
 import { EventStatus, EventTarget, EventType } from '../../models/event';
 import { AppHeader } from '../../share/header/app-header';
 import { AppSideMenu } from '../../share/side-menu/app-side-menu';
   templateUrl: './event.html',
   styleUrl: './event.scss',
 })
-export class EventPage {
+export class EventPage implements OnInit{
   eventTargets: EventTarget[] = [];
+  isLoading = true;
   targetYear: number = new Date().getFullYear();
   selectedEventType: EventType | 'all' = 'all';
   selectedStatus: EventStatus | 'all' = 'all';
     { label: '未案内', value: '未案内' },
     { label: '案内済', value: '案内済' },
   ];
-  private statusByTargetId: Record<string, EventStatus> = {};
+  private eventRequestId = 0;
 
   constructor(
     private dankaService: DankaService,
     private familyService: FamilyService,
-  ) {
-    this.createEventTargetList();
+    private eventService: EventService,
+    private cdr: ChangeDetectorRef,
+  ) { }
+
+  ngOnInit(): void {
+    this.init();
+  }
+
+  async init(): Promise<void> {
+    await this.createEventTargetList();
   }
 
-  createEventTargetList(): void {
-    this.eventTargets = [];
+  async createEventTargetList(): Promise<void> {
+    const requestId = ++this.eventRequestId;
+    const targetYear = this.targetYear;
+    const selectedEventType = this.selectedEventType;
+    const eventTargets: EventTarget[] = [];
 
-    this.familyService.getFamilyList().forEach((family) => {
+    if (this.eventTargets.length === 0) {
+      this.isLoading = true;
+      this.cdr.detectChanges();
+    }
+
+    const families = await this.familyService.getFamilyList();
+
+    for (const family of families) {
       const birthDate = this.parseDate(family.birthDate);
-      if (!birthDate) {
-        return;
-      }
+      if (!birthDate) continue;
 
-      const age = this.targetYear - birthDate.getFullYear();
+      const age = targetYear - birthDate.getFullYear();
       const eventTypes = this.getEventTypes(age);
-      if (eventTypes.length === 0) {
-        return;
-      }
+      if (eventTypes.length === 0) continue;
+
+      // ★ここが修正ポイント（await）
+      const danka = await this.dankaService.getDankaById(family.dankaId);
 
-      const danka = this.dankaService.getDankaById(family.dankaId);
-      eventTypes.forEach((eventType) => {
-        if (this.selectedEventType !== 'all' && this.selectedEventType !== eventType) {
-          return;
+      for (const eventType of eventTypes) {
+        if (
+          selectedEventType !== 'all' &&
+          selectedEventType !== eventType
+        ) {
+          continue;
         }
 
         const id = `${family.id}-${eventType}`;
-        this.eventTargets.push({
+
+        const defaultStatus: EventStatus =
+          Number(family.id) % 2 === 0 ? '案内済' : '未案内';
+
+        eventTargets.push({
           id,
           dankaId: family.dankaId,
           name: family.name,
           furigana: family.furigana,
           householdName: danka?.householdName ?? '不明',
           relationship: family.relationship || '未登録',
-          birthDate: family.birthDate,
+          birthDate: this.formatDateForValue(birthDate),
           age,
           eventType,
           note: family.note,
-          status: this.statusByTargetId[id] ?? (Number(family.id) % 2 === 0 ? '案内済' : '未案内'),
+          status: this.eventService.getEventStatus(id, defaultStatus),
         });
-      });
-    });
+      }
+    }
 
-    this.eventTargets.sort(
+    if (requestId !== this.eventRequestId) {
+      return;
+    }
+
+    this.eventTargets = eventTargets.sort(
       (a, b) =>
-        this.getEventSortOrder(a.eventType) - this.getEventSortOrder(b.eventType) ||
+        this.getEventSortOrder(a.eventType) -
+        this.getEventSortOrder(b.eventType) ||
         a.age - b.age ||
         a.name.localeCompare(b.name, 'ja'),
     );
+    this.isLoading = false;
+    this.cdr.detectChanges();
   }
 
   changeEventType(eventType: EventType | 'all'): void {
           target.eventType,
           target.note,
           target.status,
-        ].some((value) => value.includes(keyword));
+        ].some((value) => this.includesKeyword(value, keyword));
 
       return matchesStatus && matchesKeyword;
     });
 
   changeStatus(target: EventTarget, status: EventStatus): void {
     target.status = status;
-    this.statusByTargetId[target.id] = status;
+    this.eventService.saveEventStatus(target.id, status);
   }
 
   private getEventTypes(age: number): EventType[] {
     return ['稚児行列', '七五三', '成人式', '米寿'].indexOf(eventType);
   }
 
-  private parseDate(value: string): Date | null {
+  private parseDate(value: unknown): Date | null {
+    if (!value) {
+      return null;
+    }
+
+    if (value instanceof Date) {
+      return value;
+    }
+
+    if (typeof value === 'object' && 'toDate' in value && typeof value.toDate === 'function') {
+      return value.toDate();
+    }
+
+    if (typeof value !== 'string') {
+      return null;
+    }
+
     const [year, month, day] = value.split('-').map(Number);
     if (!year || !month || !day) {
       return null;
     }
     return new Date(year, month - 1, day);
   }
+
+  private includesKeyword(value: unknown, keyword: string): boolean {
+    return String(value ?? '').includes(keyword);
+  }
+
+  private formatDateForValue(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/family-edit/family-edit.html

                 </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">
 
             </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

   position: relative;
   display: block;
   min-height: 100vh;
-  background: #f4eee4;
+  background: #f6f0e7;
   color: #2f2720;
 }
 
 .danka-edit-page {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  background: #f4eee4;
+  display: grid;
+  grid-template-columns: 172px minmax(0, 1fr);
+  gap: 20px;
+  padding: 0 38px 36px 0;
+  background: #f6f0e7;
 }
 
 .danka-edit-main {
-  flex: 1;
-  padding-right: 34px;
+  min-width: 0;
   box-sizing: border-box;
 }
 
 .edit-panel {
-  min-height: 650px;
-  padding: 26px 34px 36px;
-  background: #ffffff;
+  min-height: 760px;
+  padding: 34px 42px 40px;
+  background: #fffdf9;
   border: 2px solid #d8caba;
-  border-radius: 76px;
+  border-radius: 64px;
   box-sizing: border-box;
 }
 
 .page-title-area {
-  margin-bottom: 28px;
+  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 {
+  display: block;
   width: 100%;
+  margin: 0;
+  color: #2f2720;
+}
+
+.edit-form input,
+.edit-form select,
+.edit-form textarea,
+.edit-form button {
+  font-family: inherit;
 }
 
 .edit-content {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) 500px;
-  gap: 48px;
+  grid-template-columns: 1fr;
+  gap: 16px;
   align-items: start;
 }
 
-.basic-edit-section {
-  padding-left: 8px;
+.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 0 18px;
+  margin: 0 -22px 18px;
+  padding: 12px 22px;
+  background: #eadfce;
+  border-bottom: 2px solid #d8caba;
   color: #2f2720;
   font-size: 22px;
+  line-height: 1.3;
   font-weight: 800;
 }
 
   font-size: 14px;
 }
 
+.section-description {
+  margin: 6px 0 0;
+  color: #7b6b5c;
+  font-size: 14px;
+  line-height: 1.6;
+}
+
 .form-list {
-  width: 650px;
+  width: min(100%, 620px);
+  margin-top: 14px;
 }
 
 .form-row {
   display: grid;
-  grid-template-columns: 150px 1fr;
-  align-items: start;
-  column-gap: 18px;
-  margin-top: 14px;
+  grid-template-columns: 150px minmax(0, 1fr);
+  align-items: center;
+  gap: 14px;
+  margin-bottom: 12px;
 }
 
 .form-row label {
-  padding-top: 10px;
   color: #4b3c31;
-  font-size: 17px;
+  font-size: 15px;
   font-weight: 800;
 }
 
 .form-row select,
 .form-row textarea {
   width: 100%;
-  min-height: 46px;
-  padding: 8px 12px;
   border: 2px solid #d8caba;
-  border-radius: 6px;
+  border-radius: 8px;
   background: #fffdf9;
   color: #2f2720;
-  font-size: 17px;
+  font-size: 16px;
+  font-weight: 600;
   font-family: inherit;
   box-sizing: border-box;
   outline: none;
 }
 
+.form-row input,
+.form-row select {
+  height: 46px;
+  padding: 0 14px;
+}
+
 .form-row textarea {
-  min-height: 104px;
+  min-height: 112px;
+  padding: 12px 14px;
   resize: vertical;
   line-height: 1.6;
 }
 .form-row textarea:focus {
   border-color: #8a6543;
   background: #ffffff;
+  box-shadow: 0 0 0 3px rgba(138, 101, 67, 0.15);
 }
 
 .form-row input[readonly] {
 }
 
 .form-row-heading {
-  margin-top: 30px;
+  margin: 24px 0 14px;
+  align-items: start;
 }
 
 .form-row-heading label {
 .sub-section-title {
   margin: 0;
   color: #2f2720;
-  font-size: 18px;
+  font-size: 17px;
   font-weight: 800;
 }
 
   line-height: 1.6;
 }
 
-.phone-edit-section {
-  min-height: 382px;
-  padding: 30px 24px 22px;
-  border: 2px solid #d8caba;
-  border-radius: 62px;
-  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: 28px;
-  padding: 22px 26px;
-  border: 2px solid #d8caba;
-  border-radius: 14px;
-  background: #eadfce;
-  box-sizing: border-box;
-}
-
-.householder-area h3 {
-  margin: 0 0 14px;
-  color: #2f2720;
-  font-size: 18px;
-  font-weight: 800;
-}
-
 .set-householder-button {
-  width: 170px;
-  height: 42px;
+  width: auto;
+  min-width: 170px;
+  height: 46px;
   border: 2px solid #d8caba;
   border-radius: 6px;
   background: #ffffff;
   display: flex;
   justify-content: flex-end;
   align-items: center;
-  gap: 14px;
-  margin-top: 72px;
+  gap: 12px;
+  margin-top: 28px;
 }
 
 .delete-button,
 .cancel-button,
 .save-button {
-  width: 120px;
+  min-width: 116px;
   height: 46px;
-  border-radius: 6px;
-  font-size: 17px;
+  border-radius: 8px;
+  font-size: 16px;
   font-weight: 800;
   cursor: pointer;
   box-sizing: border-box;
 
 /* 画面幅が狭い場合 */
 @media (max-width: 1100px) {
-  .edit-content {
+  .danka-edit-page {
     grid-template-columns: 1fr;
-    gap: 28px;
+    padding: 0 24px 32px;
   }
 
-  .form-list {
-    width: 100%;
+  .edit-panel {
+    min-height: auto;
+    border-radius: 28px;
+    padding: 28px 24px 32px;
   }
 
-  .bottom-actions {
-    margin-top: 40px;
+  .edit-content {
+    grid-template-columns: 1fr;
   }
 }
 
 @media (max-width: 800px) {
-  .danka-edit-page {
-    flex-direction: column;
-  }
-
-  .danka-edit-main {
-    width: 100%;
-    padding: 16px 20px 32px;
-  }
-
-  .edit-panel {
-    padding: 24px 20px 30px;
-    border-radius: 32px;
-  }
-
   .page-title-area h1 {
     font-size: 26px;
   }
     padding-top: 0;
   }
 
-  .phone-edit-section {
-    border-radius: 28px;
-  }
-
   .bottom-actions {
     flex-direction: column;
     align-items: stretch;

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

   ReactiveFormsModule,
   Validators,
 } from '@angular/forms';
+import { OnInit } from '@angular/core';
 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';
   templateUrl: './family-edit.html',
   styleUrl: './family-edit.scss',
 })
-export class FamilyEdit {
+export class FamilyEdit implements OnInit {
   danka: Danka | undefined;
   family: Family | undefined;
   families: Family[] = [];
   relationMode: string = '';
   baseFamilyId: string = '';
   marriageErrorMessages: string[] = [];
+  private setHouseholderOnSave = false;
 
   constructor(
+    private dankaService: DankaService,
     private familyService: FamilyService,
     private marriageRelationService: MarriageRelationService,
     private route: ActivatedRoute,
     private router: Router,
   ) {
+  }
+
+  ngOnInit(): void {
+    this.init();
+  }
+
+  async init(): Promise<void> {
     this.dankaId = this.route.snapshot.params['dankaId'];
     this.familyId = this.route.snapshot.params['familyId'];
-    this.families = this.familyService.getFamiliesByDankaId(this.dankaId);
+
     this.relationMode = this.route.snapshot.queryParamMap.get('relationMode') ?? '';
     this.baseFamilyId = this.route.snapshot.queryParamMap.get('baseFamilyId') ?? '';
+
+    // ★ここが重要
+    this.danka = await this.dankaService.getDankaById(this.dankaId);
+    this.families = await this.familyService.getFamiliesByDankaId(this.dankaId);
+
     if (this.familyId) {
-      this.family = this.familyService.getFamilyById(this.familyId);
+      this.family = await this.familyService.getFamilyById(this.familyId);
+
       if (this.family) {
         this.familyForm.patchValue({
           furigana: this.family.furigana,
           spouseId: this.family.spouseId,
           gender: this.family.gender,
         });
-        this.patchMarriageRelationFields(this.family.id);
+
+        await this.patchMarriageRelationFields(this.family.id);
       }
     }
 
     }
 
     if (!this.familyId && this.relationMode === 'child') {
-      const baseFamily = this.familyService.getFamilyById(this.baseFamilyId);
+      const baseFamily = await this.familyService.getFamilyById(this.baseFamilyId);
 
       if (baseFamily?.gender === 'male') {
         this.familyForm.patchValue({
     return this.families.filter((family) => family.id !== this.familyId);
   }
 
-  patchMarriageRelationFields(familyId: string): void {
-    const relations = this.marriageRelationService.getMarriageRelationsByFamilyId(familyId);
+  async patchMarriageRelationFields(familyId: string): Promise<void> {
+    const relations = await this.marriageRelationService.getMarriageRelationsByFamilyId(familyId);
+
     const relation =
       relations.find((marriageRelation) => marriageRelation.status === 'current') ?? relations[0];
 
-    if (!relation) {
-      return;
-    }
+    if (!relation) return;
 
     this.familyForm.patchValue({
       spouseId: relation.person1Id === familyId ? relation.person2Id : relation.person1Id,
     });
   }
 
-  findMarriageRelation(person1Id: string, person2Id: string): MarriageRelation | undefined {
-    return this.marriageRelationService
-      .getMarriageRelationsByFamilyId(person1Id)
-      .find(
-        (relation) =>
-          (relation.person1Id === person1Id && relation.person2Id === person2Id) ||
-          (relation.person1Id === person2Id && relation.person2Id === person1Id),
-      );
+  async findMarriageRelation(
+    person1Id: string,
+    person2Id: string
+  ): Promise<MarriageRelation | undefined> {
+
+    const relations = await this.marriageRelationService.getMarriageRelationsByFamilyId(person1Id);
+
+    return relations.find(
+      (relation) =>
+        (relation.person1Id === person1Id && relation.person2Id === person2Id) ||
+        (relation.person1Id === person2Id && relation.person2Id === person1Id),
+    );
   }
 
-  saveFamily() {
+  async saveFamily() {
     if (this.familyForm.invalid) {
       return;
     }
     };
 
     if (spouseId) {
-      const existingRelation = this.findMarriageRelation(familyId, spouseId);
-      const errors = this.marriageRelationService.saveMarriageRelation({
-        id: existingRelation?.id ?? Date.now().toString(),
+      const existingRelation = await this.findMarriageRelation(familyId, spouseId);
+
+      const errors = await this.marriageRelationService.saveMarriageRelation({
+        id: existingRelation?.id ?? crypto.randomUUID(),
         dankaId,
         person1Id: familyId,
         person2Id: spouseId,
         return;
       }
     } else {
-      const currentMarriage = this.marriageRelationService.getCurrentMarriageByFamilyId(familyId);
+      const currentMarriage = await this.marriageRelationService.getCurrentMarriageByFamilyId(familyId);
       if (currentMarriage) {
         this.marriageRelationService.deleteMarriageRelation(currentMarriage.id);
       }
     }
 
     this.familyService.saveFamily(updatedFamily);
+    this.saveHouseholderIfSelected(updatedFamily);
     this.router.navigate(['/danka-detail', dankaId], { queryParams: { tab: 'family' } });
   }
 
     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.html

                 />
               </div>
 
-              <!-- 行年 -->
+              <!--享年 -->
               <div class="form-row">
-                <label for="ageAtDeath">行年</label>
+                <label for="ageAtDeath">享年</label>
 
                 <input
                   id="ageAtDeath"
               </div>
 
               <!-- 備考 -->
-              <div class="form-row">
+              <div class="form-row note-row">
                 <label for="note">備考</label>
 
                 <textarea

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

   position: relative;
   display: block;
   min-height: 100vh;
-  background: #f4eee4;
+  background: #f6f0e7;
   color: #2f2720;
 }
 
 .danka-edit-page {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  background: #f4eee4;
+  display: grid;
+  grid-template-columns: 172px minmax(0, 1fr);
+  gap: 20px;
+  padding: 0 38px 36px 0;
+  background: #f6f0e7;
 }
 
 .danka-edit-main {
-  flex: 1;
-  padding-right: 34px;
+  min-width: 0;
   box-sizing: border-box;
 }
 
 .edit-panel {
-  min-height: 650px;
-  padding: 26px 34px 36px;
-  background: #ffffff;
+  min-height: 760px;
+  padding: 34px 42px 40px;
+  background: #fffdf9;
   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 {
 }
 
 .edit-form input,
+.edit-form textarea,
 .edit-form button {
   font-family: inherit;
 }
 
 .edit-content {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) 520px;
-  gap: 48px;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 22px;
   align-items: start;
 }
 
 .basic-edit-section,
 .phone-edit-section {
-  padding-top: 4px;
+  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;
   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;
+  width: min(100%, 980px);
+  margin-top: 0;
 }
 
 .form-field {
 
 .form-row {
   display: grid;
-  grid-template-columns: 120px 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;
 }
 
 .form-row input,
 .form-row textarea {
   width: 100%;
-  padding: 0 14px;
   border: 2px solid #d8caba;
   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: 108px;
-  padding-top: 14px;
+  min-height: 104px;
+  padding: 12px 14px;
+  line-height: 1.6;
   resize: vertical;
 }
 
-.form-row input:focus,
-.form-row textarea:focus {
-  border-color: #8a6543;
-  box-shadow: 0 0 0 3px rgba(138, 101, 67, 0.15);
-}
-
-/* 電話番号 */
-.phone-table {
-  width: 100%;
-}
-
-.phone-table-header,
-.phone-table-row {
-  display: grid;
-  grid-template-columns: 1.35fr 1.45fr 84px;
-  align-items: center;
-  column-gap: 10px;
-}
-
-.phone-table-header {
-  min-height: 38px;
-  padding: 0 10px;
-  border: 2px solid #d8caba;
-  border-radius: 6px;
-  background: #eadfce;
-  color: #5a4a3c;
-  font-size: 15px;
-  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;
-  background: #fffdf9;
-  color: #2f2720;
-  font-size: 16px;
-  box-sizing: border-box;
-}
-
-.phone-table-row > div {
-  display: flex;
-  align-items: center;
-}
-
-.phone-table-row input {
-  width: 100%;
-  height: 38px;
-  padding: 0 10px;
-  border: none;
-  border-radius: 6px;
-  background: transparent;
-  color: #2f2720;
-  font-size: 16px;
-  font-weight: 600;
-  box-sizing: border-box;
-  outline: none;
-}
-
-.phone-table-row input:focus {
-  background: #ffffff;
-  box-shadow: inset 0 0 0 2px #8a6543;
-}
-
-.phone-table-row input::placeholder {
-  color: #9b8b7a;
-  font-weight: 500;
-}
-
-.phone-row-action {
-  justify-content: flex-end;
-}
-
-.remove-phone-button {
-  width: 68px;
-  height: 34px;
-  border: 2px solid #d8caba;
-  border-radius: 6px;
-  background: #ffffff;
-  color: #6a4a35;
-  font-size: 14px;
-  font-weight: 800;
-  cursor: pointer;
-  box-sizing: border-box;
-}
-
-.remove-phone-button:hover {
-  background: #f6efe6;
-}
-
-.phone-action {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 8px;
-}
-
-.add-phone-button {
-  width: 170px;
-  height: 46px;
-  border: 2px solid #d8caba;
-  border-radius: 8px;
-  background: #ffffff;
-  color: #2f2720;
-  font-size: 16px;
-  font-weight: 800;
-  cursor: pointer;
-  box-sizing: border-box;
-}
-
-.add-phone-button:hover {
-  background: #f6efe6;
+.note-row {
+  align-items: start;
 }
 
-/* 入力補助 */
-.support-box {
-  min-height: 142px;
-  margin-top: 56px;
-  padding: 28px 30px;
-  border: 2px solid #d8caba;
-  border-radius: 24px;
-  background: #fffdf9;
-  box-sizing: border-box;
+.note-row label {
+  padding-top: 12px;
 }
 
-.support-box ul {
-  margin: 12px 0 0;
-  padding-left: 22px;
-  color: #6f6257;
-  font-size: 15px;
-  line-height: 1.65;
+.form-row input:focus,
+.form-row textarea:focus {
+  border-color: #8a6543;
+  box-shadow: 0 0 0 3px rgba(138, 101, 67, 0.15);
 }
 
-/* 下部ボタン */
+/* 荳矩Κ繝懊ち繝ｳ */
 .bottom-actions {
   display: flex;
   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;
   background: #765639;
 }
 
-.bottom-note {
-  width: 700px;
-  margin: 18px 0 22px 36px;
-  padding: 4px 12px;
-  border: 2px solid #d8caba;
-  border-radius: 4px;
-  background: #eadfce;
-  color: #7b6b5c;
-  font-size: 14px;
-  box-sizing: border-box;
-}
-
 .error-message {
   margin: 6px 0 0;
   color: #b33a2f;
   opacity: 0.7;
 }
 
-.phone-field {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-}
+@media (max-width: 1100px) {
+  .danka-edit-page {
+    grid-template-columns: 1fr;
+    padding: 0 24px 32px;
+  }
 
-.phone-error-message {
-  margin: 4px 0 0;
-  color: #b33a2f;
-  font-size: 12px;
-  font-weight: 700;
-  line-height: 1.4;
-}
+  .edit-panel {
+    min-height: auto;
+    border-radius: 28px;
+    padding: 28px 24px 32px;
+  }
 
-.remove-phone-button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
+  .edit-content {
+    grid-template-columns: 1fr;
+  }
 }

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

-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import {
   FormBuilder,
   FormGroup,
 
 import { DankaService } from '../../services/dankaService';
 import { KakochoService } from '../../services/kakocho-service';
+import { FamilyService } from '../../services/family-service';
 
 import { Danka } from '../../models/danka';
 import { Kakocho } from '../../models/kakocho';
+import { Family } from '../../models/family';
 
 @Component({
   selector: 'app-kakocho-edit',
   templateUrl: './kakocho-edit.html',
   styleUrl: './kakocho-edit.scss',
 })
-export class KakochoEdit {
+export class KakochoEdit implements OnInit {
   danka?: Danka;
   kakocho?: Kakocho;
+  sourceFamily?: Family;
   kakochoForm: FormGroup;
-  dankaId: string;
+  dankaId: string | undefined;
+  returnTab: 'family' | 'kakocho' = 'kakocho';
 
   constructor(
     private fb: FormBuilder,
     private dankaService: DankaService,
     private kakochoService: KakochoService,
+    private familyService: FamilyService,
     private route: ActivatedRoute,
     private router: Router,
   ) {
-
-    // フォーム初期化
     this.kakochoForm = this.fb.group({
       name: ['', Validators.required],
       furigana: [''],
       ageAtDeath: [''],
       note: [''],
     });
+  }
+
+  ngOnInit(): void {
+    this.init();
+  }
 
-    // 檀家ID
+  async init(): Promise<void> {
     const dankaId = this.route.snapshot.params['dankaId'];
-    this.dankaId = this.route.snapshot.params['dankaId'];
+    const familyId = this.route.snapshot.queryParams['familyId'];
+    const kakochoId = this.route.snapshot.params['kakochoId'];
+
+    this.dankaId = dankaId;
 
     if (dankaId) {
-      this.danka =
-        this.dankaService.getDankaById(dankaId);
+      this.danka = await this.dankaService.getDankaById(dankaId);
     }
 
-    // 編集対象ID
-    const kakochoId =
-      this.route.snapshot.params['kakochoId'];
+    if (familyId) {
+      this.sourceFamily = await this.familyService.getFamilyById(familyId);
+      this.returnTab = 'family';
+    }
 
     // 編集モード
     if (kakochoId) {
-
-      this.kakocho =
-        this.kakochoService.getKakochoById(kakochoId);
+      this.kakocho = await this.kakochoService.getKakochoById(kakochoId);
 
       if (this.kakocho) {
-
         this.kakochoForm.patchValue({
           name: this.kakocho.name,
           furigana: this.kakocho.furigana,
           ageAtDeath: this.kakocho.ageAtDeath,
           note: this.kakocho.note,
         });
-
       }
     }
+
+    // 新規（家族からの引き継ぎ）
+    else if (this.sourceFamily) {
+      this.kakochoForm.patchValue({
+        name: this.sourceFamily.name,
+        furigana: this.sourceFamily.furigana,
+        relationship: this.sourceFamily.relationship,
+      });
+    }
   }
 
-  saveKakocho(): void {
+  async saveKakocho(): Promise<void> {
 
     // form値取得
     const formValue = this.kakochoForm.value;
         ...formValue,
       };
 
-      this.kakochoService.updateKakocho(
+      await this.kakochoService.updateKakocho(
         updatedKakocho
       );
 
 
         dankaId: this.danka?.id ?? '',
 
-        familyId: '',
+        familyId: this.sourceFamily?.id ?? '',
 
         name: formValue.name,
         furigana: formValue.furigana,
       this.kakochoService.addKakocho(
         newKakocho
       );
+
+      if (this.sourceFamily) {
+        await this.familyService.deleteFamily(this.sourceFamily.id);
+      }
     }
 
     // 一覧へ戻る
   }
 
   cancelKakochoEdit() {
-    this.router.navigate(['/danka-detail', this.danka?.id], { queryParams: { tab: 'kakocho' } });  }
+    this.router.navigate(['/danka-detail', this.danka?.id], { queryParams: { tab: this.returnTab } });
+  }
 }

src/app/pages/memorial-list/memorial-list.html

 
           <div class="filter-row">
             <div class="filter-field">
-              <label for="targetYear">対象年</label>
+              <label for="targetYear">年度</label>
               <select
                 id="targetYear"
                 [(ngModel)]="targetYear"
         <div class="memorial-table">
           <div class="memorial-table-header">
             <div>戒名</div>
-            <div>俗名</div>
+            <div>俗名・ふりがな</div>
             <div>没年月日</div>
             <div>関係</div>
             <div>檀家（世帯）</div>
             <div>詳細</div>
           </div>
 
-          @if (filteredMemorialList.length > 0) {
+          @if (isLoading) {
+            <div class="empty-message">
+              読み込み中です。
+            </div>
+          } @else if (filteredMemorialList.length > 0) {
             @for (memorial of filteredMemorialList; track memorial.id) {
               <div class="memorial-table-row">
                 <div class="person-name">
                 </div>
                 <div>
                   <p class="person-name">{{ memorial.name }}</p>
-                  <p class="person-sub">俗名</p>
+                  <p class="person-sub">{{ memorial.furigana || 'ふりがな未登録' }}</p>
                 </div>
                 <div>
                   {{ formatDeathDate(memorial.deathDate) }}

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

 }
 
 .memorial-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;
 }
 
 .memorial-list-main {
-  flex: 1;
-  padding-right: 34px;
+  min-width: 0;
   box-sizing: border-box;
 }
 
 .memorial-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-row 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;
 }
 
 .filter-row {
 
 .filter-field select,
 .search-field input {
-  height: 38px;
+  height: 46px;
   padding: 0 14px;
   border: 2px solid #d8caba;
   border-radius: 8px;
 .list-header-row h2 {
   margin: 0;
   color: #2f2720;
-  font-size: 26px;
+  font-size: 22px;
   font-weight: 800;
 }
 
 }
 
 .memorial-table-header {
-  min-height: 46px;
+  min-height: 40px;
   padding: 0 14px;
   background: #efe4d6;
   color: #111111;
 }
 
 .memorial-table-row {
-  min-height: 78px;
+  min-height: 62px;
   padding: 10px 14px;
   border-top: 1px solid #d8c2aa;
   background: #fffdf9;
 }
 
 @media (max-width: 1100px) {
+  .memorial-list-page {
+    grid-template-columns: 1fr;
+    padding: 0 24px 32px;
+  }
+
+  .memorial-panel {
+    min-height: auto;
+    border-radius: 28px;
+    padding: 28px 24px 32px;
+  }
+
   .page-title-row {
     flex-direction: column;
   }
 }
 
 @media (max-width: 800px) {
-  .memorial-list-page {
-    flex-direction: column;
-  }
-
-  .memorial-list-main {
-    width: 100%;
-    padding: 16px 20px 32px;
-  }
-
-  .memorial-panel {
-    padding: 24px 20px 30px;
-    border-radius: 32px;
-  }
-
   .page-title-row h1 {
     font-size: 26px;
   }

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

-import { Component } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { Memorial } from '../../models/memorial';
 import { DankaService } from '../../services/dankaService';
   templateUrl: './memorial-list.html',
   styleUrl: './memorial-list.scss',
 })
-export class MemorialList {
+export class MemorialList implements OnInit{
   memorialList: Memorial[] = [];
+  isLoading = true;
   targetYear: number = new Date().getFullYear();
   selectedMemorialType = 'all';
   searchKeyword = '';
+  private memorialRequestId = 0;
   yearOptions: number[] = [
     this.targetYear - 1,
     this.targetYear,
   constructor(
     private dankaService: DankaService,
     private kakochoService: KakochoService,
+    private cdr: ChangeDetectorRef,
   ) {
-    this.createMemorialList();
+
+  }
+  ngOnInit(): void {
+    this.init();
+  }
+
+  async init(): Promise<void> {
+    await this.createMemorialList();
   }
 
-  createMemorialList(): void {
-    this.memorialList = [];
-    const kakochoList = this.kakochoService.getKakochoList();
-    kakochoList.forEach((kakocho) => {
-      const deathYear = Number(kakocho.deathDate.slice(0, 4));
-      const yearDiff = this.targetYear - deathYear;
+  async createMemorialList(): Promise<void> {
+    const requestId = ++this.memorialRequestId;
+    const targetYear = this.targetYear;
+    const selectedMemorialType = this.selectedMemorialType;
+    const memorialList: Memorial[] = [];
+
+    if (this.memorialList.length === 0) {
+      this.isLoading = true;
+      this.cdr.detectChanges();
+    }
+
+    const kakochoList = await this.kakochoService.getKakochoList();
+
+    for (const kakocho of kakochoList) {
+      const deathDate = this.parseDate(kakocho.deathDate);
+      if (!deathDate) continue;
+
+      const deathYear = deathDate.getFullYear();
+      const yearDiff = targetYear - deathYear;
+
       const memorialType = this.getMemorialType(yearDiff);
-      if (memorialType === '') {
-        return;
-      }
-      if (this.selectedMemorialType !== 'all' && this.selectedMemorialType !== memorialType) {
-        return;
+      if (memorialType === '') continue;
+
+      if (
+        selectedMemorialType !== 'all' &&
+        selectedMemorialType !== memorialType
+      ) {
+        continue;
       }
-      const danka = this.dankaService.getDankaById(kakocho.dankaId);
+
+      const danka = await this.dankaService.getDankaById(kakocho.dankaId);
+
       const memorialTarget: Memorial = {
         id: kakocho.id,
         dankaId: kakocho.dankaId,
         name: kakocho.name,
+        furigana: kakocho.furigana,
         kaimyo: kakocho.kaimyo,
         relationship: kakocho.relationship,
         householdName: danka?.householdName ?? '不明',
-        deathDate: kakocho.deathDate,
-        memorialType: memorialType,
+        deathDate: this.formatDateForValue(deathDate),
+        memorialType,
         note: kakocho.note,
       };
-      this.memorialList.push(memorialTarget);
-    });
-    this.memorialList.sort((a, b) => {
+
+      memorialList.push(memorialTarget);
+    }
+
+    if (requestId !== this.memorialRequestId) {
+      return;
+    }
+
+    this.memorialList = memorialList.sort((a, b) => {
       const deathDateA = new Date(a.deathDate).getTime();
       const deathDateB = new Date(b.deathDate).getTime();
+
       if (deathDateA !== deathDateB) {
         return deathDateA - deathDateB;
       }
+
       return a.name.localeCompare(b.name, 'ja');
     });
+    this.isLoading = false;
+    this.cdr.detectChanges();
   }
 
   changeMemorialType(memorialType: string): void {
       [
         memorial.kaimyo,
         memorial.name,
+        memorial.furigana,
         memorial.deathDate,
         memorial.relationship,
         memorial.householdName,
         memorial.memorialType,
         memorial.note,
-      ].some((value) => value.includes(keyword)),
+      ].some((value) => this.includesKeyword(value, keyword)),
     );
   }
 
+  private includesKeyword(value: unknown, keyword: string): boolean {
+    return String(value ?? '').includes(keyword);
+  }
+
   formatDeathDate(deathDate: string): string {
-    const [, month, day] = deathDate.split('-').map(Number);
-    if (!month || !day) {
+    const date = this.parseDate(deathDate);
+    if (!date) {
       return '未登録';
     }
 
-    return `${month}月${day}日`;
+    return `${date.getMonth() + 1}月${date.getDate()}日`;
   }
 
   getMemorialType(yearDiff: number) {
         return '';
     }
   }
+
+  private parseDate(value: unknown): Date | null {
+    if (!value) {
+      return null;
+    }
+
+    if (value instanceof Date) {
+      return value;
+    }
+
+    if (typeof value === 'object' && 'toDate' in value && typeof value.toDate === 'function') {
+      return value.toDate();
+    }
+
+    if (typeof value !== 'string') {
+      return null;
+    }
+
+    const [year, month, day] = value.split('-').map(Number);
+    if (!year || !month || !day) {
+      return null;
+    }
+
+    return new Date(year, month - 1, day);
+  }
+
+  private formatDateForValue(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/search/search.html

         <div class="search-input-row">
           <div class="search-input-box">
             <span class="search-icon">⌕</span>
-            <input type="text" [(ngModel)]="searchKeyword"
+            <input type="text" [ngModel]="searchKeyword"
+                   (ngModelChange)="onSearchKeywordChange($event)"
                    placeholder="三回忌 / 〇〇歳 / 2024 /"
-                   (keydown.enter)="searchAll()"/>
+                   (keydown.enter)="submitSearch()"/>
           </div>
-          <button type="button" class="search-button" (click)="searchAll()">
+          <button type="button" class="search-button" (click)="submitSearch()">
             検索
           </button>
           <button type="button" class="filter-button-main" (click)="clearSearch()">
                   <div>
                     住所: {{ danka.address }}
                   </div>
-                  <div class="result-link-text">
-                    開く
-                  </div>
                 </a>
               }
             </section>

src/app/pages/search/search.scss

 }
 
 .search-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;
 }
 
 .search-main {
-  flex: 1;
-  padding-right: 34px;
+  min-width: 0;
   box-sizing: border-box;
 }
 
 .search-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;
 }
 
   justify-content: space-between;
   align-items: flex-start;
   gap: 24px;
+  margin-bottom: 22px;
 }
 
 .page-title-row 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;
 }
 
 .top-action-list {
 }
 
 .search-condition-area {
-  margin-top: 8px;
+  margin: 0 0 16px;
 }
 
 .search-input-row {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) 120px 140px 150px;
-  gap: 18px;
+  grid-template-columns: minmax(0, 1fr) 104px 104px;
+  gap: 12px;
   align-items: center;
 }
 
 .search-input-box {
-  height: 56px;
+  height: 46px;
   border: 2px solid #d8caba;
-  border-radius: 8px;
-  background: #fffdf9;
+  border-radius: 6px;
+  background: #ffffff;
   display: flex;
   align-items: center;
   padding: 0 16px;
   outline: none;
   background: transparent;
   color: #2f2720;
-  font-size: 18px;
+  font-size: 16px;
+  font-weight: 700;
   font-family: inherit;
 }
 
 .search-input-box input::placeholder {
   color: #7b6b5c;
+  font-weight: 600;
 }
 
 .search-button,
 .filter-button-main,
 .back-list-button {
-  height: 56px;
-  border-radius: 8px;
-  font-size: 18px;
+  height: 46px;
+  border-radius: 6px;
+  font-size: 16px;
   font-weight: 800;
   cursor: pointer;
   box-sizing: border-box;
 
 .search-button {
   border: 2px solid #8a6543;
-  background: #8a6543;
-  color: #ffffff;
+  background: #ffffff;
+  color: #8a6543;
 }
 
 .search-button:hover {
-  background: #765639;
+  background: #f6efe6;
 }
 
 .filter-button-main,
 .back-list-button {
-  border: 2px solid #d8caba;
+  border: 2px solid #8a6543;
   background: #ffffff;
-  color: #2f2720;
+  color: #8a6543;
   text-decoration: none;
   display: flex;
   align-items: center;
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
-  margin-top: 16px;
+  margin: 12px 0 16px;
 }
 
 .search-filter-button {
   min-width: 120px;
-  height: 38px;
-  padding: 0 18px;
+  height: 34px;
+  padding: 0 14px;
   border: 2px solid #d8caba;
   border-radius: 6px;
   background: #f1e7d8;
   color: #2f2720;
-  font-size: 15px;
+  font-size: 14px;
   font-weight: 700;
   cursor: pointer;
   box-sizing: border-box;
 }
 
 .search-result-panel {
-  margin-top: 16px;
-  padding: 28px 28px 34px;
+  margin-top: 0;
+  padding: 0;
   border: 2px solid #d8caba;
-  border-radius: 62px;
+  border-radius: 8px;
   background: #fffdf9;
   box-sizing: border-box;
+  overflow: hidden;
 }
 
 .search-result-panel h2 {
-  margin: 0 0 12px;
+  min-height: 40px;
+  margin: 0;
+  padding: 0 14px;
+  background: #efe4d6;
   color: #2f2720;
-  font-size: 24px;
+  font-size: 22px;
   font-weight: 800;
+  display: flex;
+  align-items: center;
 }
 
 .result-group {
-  margin-top: 16px;
+  margin-top: 0;
+  padding: 14px;
+  border-top: 1px solid #d8caba;
 }
 
 .result-group h3 {
 }
 
 .result-row {
-  min-height: 56px;
+  min-height: 52px;
   margin-top: 6px;
   padding: 0 12px;
   border: 2px solid #d8caba;
   align-items: center;
   column-gap: 18px;
   box-sizing: border-box;
+  cursor: pointer;
 }
 
 .result-row:hover {
 }
 
 .danka-result-row {
-  grid-template-columns: 1.1fr 1.4fr 1.8fr 80px;
+  grid-template-columns: 1.1fr 1.4fr 1.8fr;
 }
 
 .family-result-row {
   font-weight: 800;
 }
 
-.result-link-text {
-  color: #3f6f45;
-  font-weight: 800;
-}
-
 .empty-result {
   min-height: 72px;
   padding: 22px;
 }
 
 @media (max-width: 1100px) {
+  .search-page {
+    grid-template-columns: 1fr;
+    padding: 0 24px 32px;
+  }
+
+  .search-panel {
+    min-height: auto;
+    border-radius: 28px;
+    padding: 28px 24px 32px;
+  }
+
   .search-input-row {
-    grid-template-columns: 1fr 120px;
+    grid-template-columns: 1fr 104px 104px;
   }
 
   .filter-button-main,
     width: 100%;
   }
 
-  .search-result-panel {
-    border-radius: 36px;
-  }
-
   .result-row {
     overflow-x: auto;
   }
 }
 
 @media (max-width: 800px) {
-  .search-page {
-    flex-direction: column;
-  }
-
-  .search-main {
-    width: 100%;
-    padding: 16px 20px 32px;
-  }
-
-  .search-panel {
-    padding: 24px 20px 30px;
-    border-radius: 32px;
-  }
-
   .page-title-row {
     flex-direction: column;
   }

src/app/pages/search/search.ts

-import { Component } from '@angular/core';
-import { FormBuilder, FormsModule } from '@angular/forms';
-import { Router, RouterLink } from '@angular/router';
+import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { ActivatedRoute, RouterLink } from '@angular/router';
 import { Danka } from '../../models/danka';
 import { Family } from '../../models/family';
 import { Kakocho } from '../../models/kakocho';
   templateUrl: './search.html',
   styleUrl: './search.scss',
 })
-export class Search {
+export class Search implements OnInit{
   searchKeyword = '';
   selectedSearchType = 'all';
   searchTypeFilters = [
   familyResults: Family[] = [];
   kakochoResults: Kakocho[] = [];
   totalResultCount = 0;
+  private searchTimer?: ReturnType<typeof setTimeout>;
+  private searchRequestId = 0;
 
   constructor(
     private dankaService: DankaService,
     private familyService: FamilyService,
     private kakochoService: KakochoService,
-  ) {}
+    private route: ActivatedRoute,
+    private cdr: ChangeDetectorRef,
+  ) { }
+
+  ngOnInit(): void {
+    const keyword = this.route.snapshot.queryParamMap.get('keyword');
+
+    if (keyword) {
+      this.searchKeyword = keyword;
+      this.submitSearch();
+    }
+  }
 
   //　フィルタータブの選択処理
   changeSearchType(searchType: string): void {
     this.selectedSearchType = searchType;
+    this.submitSearch();
+  }
+
+  onSearchKeywordChange(keyword: string): void {
+    this.searchKeyword = keyword;
+
+    if (this.searchTimer) {
+      clearTimeout(this.searchTimer);
+    }
+
+    this.searchTimer = setTimeout(() => {
+      this.searchAll();
+    }, 250);
+  }
+
+  submitSearch(): void {
+    if (this.searchTimer) {
+      clearTimeout(this.searchTimer);
+    }
+
     this.searchAll();
   }
 
   //　全検索の処理
-  searchAll() {
+  async searchAll(): Promise<void> {
+    const requestId = ++this.searchRequestId;
     const keyword = this.searchKeyword.trim();
-    this.dankaResults = [];
-    this.familyResults = [];
-    this.kakochoResults = [];
-    this.totalResultCount = 0;
+    const searchType = this.selectedSearchType;
+
     if (keyword === '') {
+      this.setSearchResults([], [], [], requestId);
+      return;
+    }
+
+    const [dankaList, familyList, kakochoList] = await Promise.all([
+      this.dankaService.getDankaList(),
+      this.familyService.getFamilyList(),
+      this.kakochoService.getKakochoList(),
+    ]);
+
+    if (requestId !== this.searchRequestId) {
       return;
     }
-    // 檀家・家族・過去帳の情報を取得
-    const dankaList = this.dankaService.getDankaList();
-    const familyList = this.familyService.getFamilyList();
-    const kakochoList = this.kakochoService.getKakochoList();
-    //檀家のキーワード検索
-    if (this.selectedSearchType === 'all' || this.selectedSearchType === 'danka') {
-      this.dankaResults = dankaList.filter(
-        (danka) =>
-          danka.householdName.includes(keyword) ||
-          danka.householder.includes(keyword) ||
-          danka.postalCode.includes(keyword) ||
-          danka.address.includes(keyword) ||
-          danka.phones.some((phone) => phone.tel.includes(keyword) || phone.note.includes(keyword)),
+
+    let dankaResults: Danka[] = [];
+    let familyResults: Family[] = [];
+    let kakochoResults: Kakocho[] = [];
+
+    // 檀家検索
+    if (searchType === 'all' || searchType === 'danka') {
+      dankaResults = dankaList.filter((danka) =>
+        this.includesKeyword(danka.householdName, keyword) ||
+        this.includesKeyword(danka.householder, keyword) ||
+        this.includesKeyword(danka.postalCode, keyword) ||
+        this.includesKeyword(danka.address, keyword) ||
+        this.getPhones(danka).some(
+          (phone) =>
+            this.includesKeyword(phone.tel, keyword) ||
+            this.includesKeyword(phone.note, keyword)
+        )
       );
     }
-    //家族のキーワード検索
-    if (this.selectedSearchType === 'all' || this.selectedSearchType === 'family') {
-      this.familyResults = familyList.filter(
-        (family) =>
-          family.name.includes(keyword) ||
-          family.furigana.includes(keyword) ||
-          family.relationship.includes(keyword) ||
-          family.birthDate.includes(keyword) ||
-          family.note.includes(keyword),
+
+    // 家族検索
+    if (searchType === 'all' || searchType === 'family') {
+      familyResults = familyList.filter((family) =>
+        this.includesKeyword(family.name, keyword) ||
+        this.includesKeyword(family.furigana, keyword) ||
+        this.includesKeyword(family.relationship, keyword) ||
+        this.includesKeyword(family.birthDate, keyword) ||
+        this.includesKeyword(family.note, keyword)
       );
     }
-    //過去帳のキーワード検索
-    if (this.selectedSearchType === 'all' || this.selectedSearchType === 'kakocho') {
-      this.kakochoResults = kakochoList.filter(
-        (kakocho) =>
-          kakocho.name.includes(keyword) ||
-          kakocho.furigana.includes(keyword) ||
-          kakocho.relationship.includes(keyword) ||
-          kakocho.kaimyo.includes(keyword) ||
-          kakocho.deathDate.includes(keyword) ||
-          kakocho.ageAtDeath.includes(keyword) ||
-          kakocho.note.includes(keyword),
+
+    // 過去帳検索
+    if (searchType === 'all' || searchType === 'kakocho') {
+      kakochoResults = kakochoList.filter((kakocho) =>
+        this.includesKeyword(kakocho.name, keyword) ||
+        this.includesKeyword(kakocho.furigana, keyword) ||
+        this.includesKeyword(kakocho.relationship, keyword) ||
+        this.includesKeyword(kakocho.kaimyo, keyword) ||
+        this.includesKeyword(kakocho.deathDate, keyword) ||
+        this.includesKeyword(kakocho.ageAtDeath, keyword) ||
+        this.includesKeyword(kakocho.note, keyword)
       );
     }
-    //検索結果の件数カウント
-    this.totalResultCount =
-      this.dankaResults.length + this.familyResults.length + this.kakochoResults.length;
+
+    this.setSearchResults(dankaResults, familyResults, kakochoResults, requestId);
   }
 
   clearSearch(): void {
+    if (this.searchTimer) {
+      clearTimeout(this.searchTimer);
+    }
+
+    this.searchRequestId++;
     this.searchKeyword = '';
     this.selectedSearchType = 'all';
     this.dankaResults = [];
     this.familyResults = [];
     this.kakochoResults = [];
     this.totalResultCount = 0;
+    this.cdr.detectChanges();
+  }
+
+  private includesKeyword(value: unknown, keyword: string): boolean {
+    return String(value ?? '').includes(keyword);
+  }
+
+  private getPhones(danka: Danka) {
+    return Array.isArray(danka.phones) ? danka.phones : [];
+  }
+
+  private setSearchResults(
+    dankaResults: Danka[],
+    familyResults: Family[],
+    kakochoResults: Kakocho[],
+    requestId: number,
+  ): void {
+    if (requestId !== this.searchRequestId) {
+      return;
+    }
+
+    this.dankaResults = dankaResults;
+    this.familyResults = familyResults;
+    this.kakochoResults = kakochoResults;
+    this.totalResultCount =
+      dankaResults.length +
+      familyResults.length +
+      kakochoResults.length;
+    this.cdr.detectChanges();
   }
 }

src/app/services/dankaService.ts

 import { Injectable } from '@angular/core';
+import {
+  collection,
+  getDocs,
+  doc,
+  getDoc,
+  setDoc,
+  deleteDoc,
+  updateDoc
+} from 'firebase/firestore';
+
+import { db } from '../firebase';
 import { Danka } from '../models/danka';
 
 @Injectable({
   providedIn: 'root',
 })
 export class DankaService {
-  private dankaList: Danka[] = [
-    {
-      id: '1',
-      householdName: '鈴木家',
-      householdFurigana: 'すずきけ',
-      householder: '鈴木 太郎',
-      householderFurigana: 'すずき たろう',
-      postalCode: '123-4567',
-      address: '市内 1-2-3',
-      note: '寺報送付あり。年忌法要の案内は施主へ連絡。',
-      updatedAt: '2026-05-28',
-      phones: [
-        {
-          tel: '03-4567-8910',
-          note: '寺報連絡',
-        },
-        {
-          tel: '090-1234-5678',
-          note: '施主',
-        },
-      ],
-    },
-    {
-      id: '2',
-      householdName: '古田家',
-      householdFurigana: 'ふるたけ',
-      householder: '古田 太郎',
-      householderFurigana: 'ふるた たろう',
-      postalCode: '234-4567',
-      address: '市内 1-2-3',
-      note: '電話連絡を優先。',
-      updatedAt: '2026-05-28',
-      phones: [
-        {
-          tel: '0-5678-9101',
-          note: '寺報連絡',
-        },
-        {
-          tel: '080-7890-4567',
-          note: '施主',
-        },
-      ],
-    }
-  ];
+  private path = 'danka';
+  private readonly recentDankaStorageKey = 'kaimyo-management.recent-danka';
+
+  // 一覧
+  async getDankaList(): Promise<Danka[]> {
+    const snap = await getDocs(collection(db, this.path));
+
+    return snap.docs.map(d => ({
+      id: d.id,
+      ...(d.data() as Omit<Danka, 'id'>)
+    }));
+  }
+
+  // 1件
+  async getDankaById(id: string): Promise<Danka | undefined> {
+    const ref = doc(db, this.path, id);
+    const snap = await getDoc(ref);
+
+    if (!snap.exists()) return undefined;
 
-  //サービスの檀家一覧の取得
-  getDankaList(): Danka[] {
-    return this.dankaList;
+    return {
+      id: snap.id,
+      ...(snap.data() as Omit<Danka, 'id'>)
+    };
   }
 
-  //対象の檀家IDを取得
-  getDankaById(id: string): Danka | undefined {
-    return this.dankaList.find((danka) => danka.id === id);
+  // 作成・更新
+  async saveDanka(danka: Danka): Promise<void> {
+    const ref = doc(db, this.path, danka.id);
+    await setDoc(ref, danka);
   }
 
-  //DBへの檀家情報の登録
-  saveDanka(updatedDanka: Danka): void {
-    const index = this.dankaList.findIndex((danka) => danka.id === updatedDanka.id);
-    if (index === -1) {
-      this.dankaList.push(updatedDanka);
-      return;
+  // 部分更新
+  async updateDanka(id: string, data: Partial<Danka>): Promise<void> {
+    const ref = doc(db, this.path, id);
+    await updateDoc(ref, data as any);
+  }
+
+  // 削除
+  async deleteDanka(id: string): Promise<void> {
+    const ref = doc(db, this.path, id);
+    await deleteDoc(ref);
+  }
+
+  // -----------------------------
+  // 最近開いた檀家
+  // -----------------------------
+
+  private getRecentDankaIds(): string[] {
+    if (!this.canUseLocalStorage()) return [];
+
+    const value = localStorage.getItem(this.recentDankaStorageKey);
+    if (!value) return [];
+
+    try {
+      const parsed = JSON.parse(value);
+      return Array.isArray(parsed)
+        ? parsed.filter((id): id is string => typeof id === 'string')
+        : [];
+    } catch {
+      return [];
     }
-    this.dankaList[index] = updatedDanka;
   }
 
-  //DBの檀家情報の削除
-  deleteDanka(id: string): void {
-    const index = this.dankaList.findIndex((danka) => danka.id === id);
-    if (index === -1) {
-      return;
+  private saveRecentDankaIds(ids: string[]): void {
+    if (!this.canUseLocalStorage()) return;
+    localStorage.setItem(this.recentDankaStorageKey, JSON.stringify(ids));
+  }
+
+  private canUseLocalStorage(): boolean {
+    return typeof localStorage !== 'undefined';
+  }
+
+  // ★ここが重要：async化
+  async recordDankaOpened(id: string): Promise<void> {
+    const danka = await this.getDankaById(id);
+    if (!danka) return;
+
+    const recentIds = [
+      id,
+      ...this.getRecentDankaIds().filter(rid => rid !== id),
+    ].slice(0, 5);
+
+    this.saveRecentDankaIds(recentIds);
+  }
+
+  // ★ここも async 必須
+  async getRecentDankaList(limit = 5): Promise<Danka[]> {
+    const ids = this.getRecentDankaIds().slice(0, limit);
+
+    const list = await Promise.all(
+      ids.map(id => this.getDankaById(id))
+    );
+
+    const filtered = list.filter((d): d is Danka => d !== undefined);
+
+    if (filtered.length > 0) {
+      return filtered;
     }
-    this.dankaList.splice(index, 1);
+
+    // fallback（updatedAtがある前提なら）
+    const all = await this.getDankaList();
+
+    return [...all]
+      .sort((a: any, b: any) =>
+        (b.updatedAt ?? '').localeCompare(a.updatedAt ?? '')
+      )
+      .slice(0, limit);
   }
-}
+}

src/app/services/event-service.ts

+import { Injectable } from '@angular/core';
+import { EventStatus } from '../models/event';
+
+interface EventStatusRecord {
+  targetId: string;
+  status: EventStatus;
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class EventService {
+  private eventStatuses: EventStatusRecord[] = [];
+
+  getEventStatus(targetId: string, defaultStatus: EventStatus): EventStatus {
+    return this.eventStatuses.find((item) => item.targetId === targetId)?.status ?? defaultStatus;
+  }
+
+  saveEventStatus(targetId: string, status: EventStatus): void {
+    const current = this.eventStatuses.find((item) => item.targetId === targetId);
+
+    if (current) {
+      current.status = status;
+      return;
+    }
+
+    this.eventStatuses.push({
+      targetId,
+      status,
+    });
+  }
+}

src/app/services/family-service.ts

 import { Injectable } from '@angular/core';
+import {
+  collection,
+  getDocs,
+  doc,
+  getDoc,
+  setDoc,
+  deleteDoc,
+  query,
+  where,
+} from 'firebase/firestore';
+
+import { db } from '../firebase';
 import { Family } from '../models/family';
 
 @Injectable({
   providedIn: 'root',
 })
 export class FamilyService {
-  private families: Family[] = [
-    {
-      id: '1',
-      dankaId: '1',
-      furigana: 'すずき　はなこ',
-      name: '鈴木　花子',
-      relationship: '母',
-      birthDate: '1975-01-01',
-      note: '次の施主',
-      fatherId: '5',
-      motherId: '6',
-      spouseId: '3',
-      gender: 'female',
-    },
-    {
-      id: '2',
-      dankaId: '1',
-      furigana: 'すずき　たろう',
-      name: '鈴木　太郎',
-      relationship: '長男',
-      birthDate: '2005-12-31',
-      note: '',
-      fatherId: '3',
-      motherId: '1',
-      spouseId: '7',
-      gender: 'male',
-    },
-    {
-      id: '3',
-      dankaId: '1',
-      furigana: 'すずき　いちろう',
-      name: '鈴木　一郎',
-      relationship: '父',
-      birthDate: '1973-05-10',
-      note: '',
-      fatherId: '',
-      motherId: '',
-      spouseId: '1',
-      gender: 'male',
-    },
-    {
-      id: '4',
-      dankaId: '1',
-      furigana: 'すずき　さくら',
-      name: '鈴木　さくら',
-      relationship: '長女',
-      birthDate: '2008-04-15',
-      note: '',
-      fatherId: '3',
-      motherId: '1',
-      spouseId: '',
-      gender: 'female',
-    },
-    {
-      id: '5',
-      dankaId: '1',
-      furigana: 'さとう　まさお',
-      name: '佐藤　正男',
-      relationship: '母方の祖父',
-      birthDate: '1948-03-20',
-      note: '花子の父',
-      fatherId: '',
-      motherId: '',
-      spouseId: '6',
-      gender: 'male',
-    },
-    {
-      id: '6',
-      dankaId: '1',
-      furigana: 'さとう　ひさこ',
-      name: '佐藤　久子',
-      relationship: '母方の祖母',
-      birthDate: '1950-09-08',
-      note: '花子の母',
-      fatherId: '',
-      motherId: '',
-      spouseId: '5',
-      gender: 'female',
-    },
-    {
-      id: '7',
-      dankaId: '1',
-      furigana: 'すずき　みさき',
-      name: '鈴木　美咲',
-      relationship: '長男の妻',
-      birthDate: '2006-07-22',
-      note: '',
-      fatherId: '',
-      motherId: '',
-      spouseId: '2',
-      gender: 'female',
-    },
-    {
-      id: '8',
-      dankaId: '1',
-      furigana: 'すずき　れん',
-      name: '鈴木　蓮',
-      relationship: '孫',
-      birthDate: '2026-02-01',
-      note: '太郎と美咲の子',
-      fatherId: '2',
-      motherId: '7',
-      spouseId: '',
-      gender: 'male',
-    },
-    {
-      id: '9',
-      dankaId: '1',
-      furigana: 'やまだ はなこ',
-      name: '山田 花子',
-      relationship: '長男の前妻',
-      birthDate: '2005-04-02',
-      note: '',
-      fatherId: '',
-      motherId: '',
-      spouseId: '',
-      gender: 'female',
-    },
-  ];
-
-  //檀家と紐づいている家族情報の取得
-  getFamiliesByDankaId(dankaId: string): Family[] {
-    return this.families.filter((family) => family.dankaId === dankaId);
-  }
-
-  //家族の情報を取得
-  getFamilyById(id: string): Family | undefined {
-    return this.families.find((family) => family.id === id);
-  }
+  private path = 'families';
 
-  //家族の情報を更新
-  saveFamily(updatedFamily: Family): void {
-    const oldFamily = this.families.find((family) => family.id === updatedFamily.id);
+  // 檀家IDで一覧取得
+  async getFamiliesByDankaId(dankaId: string): Promise<Family[]> {
+    const q = query(
+      collection(db, this.path),
+      where('dankaId', '==', dankaId)
+    );
 
-    const oldSpouseId = oldFamily?.spouseId ?? '';
-    const newSpouseId = updatedFamily.spouseId ?? '';
+    const snap = await getDocs(q);
 
-    const familyIndex = this.families.findIndex((family) => family.id === updatedFamily.id);
+    return snap.docs.map(d => ({
+      id: d.id,
+      ...(d.data() as Omit<Family, 'id'>),
+    }));
+  }
 
-    if (familyIndex !== -1) {
-      this.families[familyIndex] = updatedFamily;
-    } else {
-      this.families.push(updatedFamily);
-    }
+  // 1件取得
+  async getFamilyById(id: string): Promise<Family | undefined> {
+    const ref = doc(db, this.path, id);
+    const snap = await getDoc(ref);
 
-    if (oldSpouseId && oldSpouseId !== newSpouseId) {
-      const oldSpouseIndex = this.families.findIndex((family) => family.id === oldSpouseId);
-      if (oldSpouseIndex !== -1 && this.families[oldSpouseIndex].spouseId === updatedFamily.id) {
-        this.families[oldSpouseIndex] = {
-          ...this.families[oldSpouseIndex],
-          spouseId: '',
-        };
-      }
-    }
+    if (!snap.exists()) return undefined;
 
-    if (newSpouseId) {
-      const newSpouseIndex = this.families.findIndex((family) => family.id === newSpouseId);
+    return {
+      id: snap.id,
+      ...(snap.data() as Omit<Family, 'id'>),
+    };
+  }
 
-      if (newSpouseIndex !== -1) {
-        this.families[newSpouseIndex] = {
-          ...this.families[newSpouseIndex],
-          spouseId: updatedFamily.id,
-        };
-      }
-    }
+  // 作成・更新（upsert）
+  async saveFamily(family: Family): Promise<void> {
+    const ref = doc(db, this.path, family.id);
+    await setDoc(ref, family);
   }
 
-  //家族の情報を削除
-  deleteFamily(id: string | undefined) {
-    const index = this.families.findIndex((family) => family.id === id);
-    if (index === -1) {
-      return;
-    }
-    this.families.splice(index, 1);
+  // 削除
+  async deleteFamily(id: string): Promise<void> {
+    const ref = doc(db, this.path, id);
+    await deleteDoc(ref);
   }
 
   //家族情報を全件取得する処理
-  getFamilyList(): Family[] {
-    return this.families;
+  async getFamilyList(): Promise<Family[]> {
+    const snap = await getDocs(collection(db, this.path));
+
+    return snap.docs.map(d => ({
+      id: d.id,
+      ...(d.data() as Omit<Family, 'id'>),
+    }));
   }
-}
+}

src/app/services/family-tree-builder.ts

 import { Injectable } from '@angular/core';
-
 import { Family } from '../models/family';
 import { MarriageRelation } from '../models/marriage-relation';
+import { Kakocho } from '../models/kakocho';
 import { FamilyUnit } from '../models/family-unit';
 import { FamilyUnitNode } from '../models/family-unit-node';
 
+
 export interface FamilyTreeNode {
   family: Family;
-
-  parents: FamilyTreeNode[];
-
-  children: FamilyTreeNode[];
+  kakocho?: Kakocho;
+  isDeceased: boolean;
 
   spouses: FamilyTreeNode[];
+  children: FamilyTreeNode[];
+  parents: FamilyTreeNode[];
 }
 
 @Injectable({
   build(
     families: Family[],
     marriages: MarriageRelation[],
+    kakocholist: Kakocho[]
   ): FamilyTreeNode[] {
 
     const nodeMap = new Map<string, FamilyTreeNode>();
 
-    //
-    // ノード生成
-    //
+    const kakochoMap = new Map(
+      kakocholist.map(k => [k.familyId, k])
+    );
+
+    // -----------------------------
+    // ① ノード生成（ここで統合）
+    // -----------------------------
     families.forEach((family) => {
 
+      const kakocho = kakochoMap.get(family.id);
+
       nodeMap.set(family.id, {
         family,
+        kakocho,
+        isDeceased: !!kakocho,
+
         parents: [],
         children: [],
         spouses: [],
 
     });
 
-    //
-    // 親子関係生成
-    //
+    // -----------------------------
+    // ② 親子関係
+    // -----------------------------
     families.forEach((family) => {
 
       const childNode = nodeMap.get(family.id);
+      if (!childNode) return;
 
-      if (!childNode) {
-        return;
-      }
-
-      //
-      // 父
-      //
       if (family.fatherId) {
-
-        const fatherNode =
-          nodeMap.get(family.fatherId);
-
-        if (fatherNode) {
-
-          fatherNode.children.push(childNode);
-
-          childNode.parents.push(fatherNode);
+        const father = nodeMap.get(family.fatherId);
+        if (father) {
+          father.children.push(childNode);
+          childNode.parents.push(father);
         }
       }
 
-      //
-      // 母
-      //
       if (family.motherId) {
-
-        const motherNode =
-          nodeMap.get(family.motherId);
-
-        if (motherNode) {
-
-          motherNode.children.push(childNode);
-
-          childNode.parents.push(motherNode);
+        const mother = nodeMap.get(family.motherId);
+        if (mother) {
+          mother.children.push(childNode);
+          childNode.parents.push(mother);
         }
       }
 
     });
 
-    //
-    // 配偶者関係
-    //
+    // -----------------------------
+    // ③ 配偶者関係（current）
+    // -----------------------------
     marriages
-      .filter(
-        (m) =>
-          m.status === 'current',
-      )
-      .forEach((marriage) => {
-
-        const person1 =
-          nodeMap.get(
-            marriage.person1Id,
-          );
-
-        const person2 =
-          nodeMap.get(
-            marriage.person2Id,
-          );
-
-        if (!person1 || !person2) {
-          return;
-        }
-
-        const id1 =
-          Number(person1.family.id);
+      .filter(m => m.status === 'current')
+      .forEach((m) => {
 
-        const id2 =
-          Number(person2.family.id);
+        const p1 = nodeMap.get(m.person1Id);
+        const p2 = nodeMap.get(m.person2Id);
 
-        const owner =
-          id1 < id2
-            ? person1
-            : person2;
+        if (!p1 || !p2) return;
 
-        const spouse =
-          id1 < id2
-            ? person2
-            : person1;
-
-        if (
-          !owner.spouses.some(
-            (s) =>
-              s.family.id ===
-              spouse.family.id,
-          )
-        ) {
-          owner.spouses.push(
-            spouse,
-          );
+        if (!p1.spouses.some(s => s.family.id === p2.family.id)) {
+          p1.spouses.push(p2);
         }
-      });
-
-    //
-    // spouseId フォールバック
-    //
-    families.forEach((family) => {
 
-      if (!family.spouseId) {
-        return;
-      }
+      });
 
-      const person =
-        nodeMap.get(family.id);
+    // -----------------------------
+    // ④ spouseIdフォールバック
+    // -----------------------------
+    families.forEach((f) => {
 
-      const spouse =
-        nodeMap.get(family.spouseId);
+      if (!f.spouseId) return;
 
-      if (!person || !spouse) {
-        return;
-      }
+      const a = nodeMap.get(f.id);
+      const b = nodeMap.get(f.spouseId);
 
-      if (
-        !person.spouses.some(
-          (s) =>
-            s.family.id ===
-            spouse.family.id
-        )
-      ) {
+      if (!a || !b) return;
 
-        person.spouses.push(
-          spouse
-        );
+      if (!a.spouses.some(s => s.family.id === b.family.id)) {
+        a.spouses.push(b);
       }
 
     });
     return [...nodeMap.values()];
   }
 
-  /**
-   * 家系図の起点になる人物
-   * (親が登録されていない人物)
-   */
-  getRoots(
-    nodes: FamilyTreeNode[]
-  ): FamilyTreeNode[] {
+  // -----------------------------
+  // Roots
+  // -----------------------------
+  getRoots(nodes: FamilyTreeNode[]): FamilyTreeNode[] {
 
     return nodes.filter(node => {
 
-      if (
-        node.parents.length > 0
-      ) {
-        return false;
-      }
-
-      // 配偶者がいて
-      if (
-        node.spouses.length > 0
-      ) {
+      if (node.parents.length > 0) return false;
 
-        const spouseId =
-          node.spouses[0].family.id;
-
-        // IDが若い方だけRoot
-        return (
-          node.family.id <
-          spouseId
-        );
+      if (node.spouses.length > 0) {
+        const spouseId = node.spouses[0].family.id;
+        return node.family.id < spouseId;
       }
 
       return true;
-
     });
-
-  }
-
-  /**
-   * ID検索
-   */
-  getNodeById(
-    nodes: FamilyTreeNode[],
-    id: string,
-  ): FamilyTreeNode | undefined {
-
-    return nodes.find(
-      (node) =>
-        node.family.id === id,
-    );
   }
 
   buildFamilyUnits(
 
     for (const node of nodes) {
 
-      //
-      // 夫婦あり
-      //
       if (node.spouses.length > 0) {
 
         const spouse =
 
         processed.add(key);
 
-        //
-        // この夫婦の子供を取得
-        //
         const children =
           nodes
             .filter(child => {
 
       } else {
 
-        //
-        // 独身者
-        //
         units.push({
 
           id:
     const nodeMap =
       new Map<string, FamilyUnitNode>();
 
-    //
-    // ノード生成
-    //
     units.forEach(unit => {
 
       nodeMap.set(unit.id, {
 
     });
 
-    //
-    // 親子リンク
-    //
     units.forEach(parentUnit => {
 
       parentUnit.children.forEach(child => {
     );
 
   }
-
 }

src/app/services/kakocho-service.ts

 import { Injectable } from '@angular/core';
+import {
+  collection,
+  getDocs,
+  doc,
+  getDoc,
+  setDoc,
+  deleteDoc,
+  query,
+  where,
+} from 'firebase/firestore';
+
+import { db } from '../firebase';
 import { Kakocho } from '../models/kakocho';
 
 @Injectable({
   providedIn: 'root',
 })
 export class KakochoService {
-  private kakochoList: Kakocho[] = [
-    {
-      id: '1',
-      dankaId: '1',
-      familyId: '',
-      name: '鈴木 一郎',
-      furigana: 'すずき いちろう',
-      relationship: '父',
-      kaimyo: '光譽明照信士',
-      deathDate: '2024-01-08',
-      ageAtDeath: '88',
-      note: '三回忌対象',
-    },
-    {
-      id: '2',
-      dankaId: '2',
-      familyId: '',
-      name: '鈴木 ハナ',
-      furigana: 'すずき はな',
-      relationship: '母',
-      kaimyo: '清譽妙蓮大姉',
-      deathDate: '2020-05-12',
-      ageAtDeath: '82',
-      note: '',
-    },
-    {
-      id: '3',
-      dankaId: '2',
-      familyId: '',
-      name: '鈴木 太郎',
-      furigana: 'すずき たろう',
-      relationship: '息子',
-      kaimyo: '慈譽善道信士',
-      deathDate: '2025-01-08',
-      ageAtDeath: '50',
-      note: '',
-    },
-  ];
 
-  getKakochoByDankaId(dankaId: string): Kakocho[] {
-    return this.kakochoList.filter((kakocho) => kakocho.dankaId === dankaId);
+  private path = 'kakocho';
+
+  // 檀家IDで取得
+  async getKakochoByDankaId(dankaId: string): Promise<Kakocho[]> {
+    const q = query(
+      collection(db, this.path),
+      where('dankaId', '==', dankaId)
+    );
+
+    const snap = await getDocs(q);
+
+    return snap.docs.map(d => ({
+      id: d.id,
+      ...(d.data() as Omit<Kakocho, 'id'>),
+    }));
   }
 
-  // 一覧取得
-  getKakochoList(): Kakocho[] {
-    return this.kakochoList;
+  // =========================
+  // ✅ 既存互換API（残す）
+  // =========================
+
+  // 一覧取得（モック互換）
+  async getKakochoList(): Promise<Kakocho[]> {
+    const snap = await getDocs(collection(db, this.path));
+
+    return snap.docs.map(d => ({
+      id: d.id,
+      ...(d.data() as Omit<Kakocho, 'id'>),
+    }));
   }
 
   // 1件取得
-  getKakochoById(id: string): Kakocho | undefined {
-    return this.kakochoList.find((item) => item.id === id);
-  }
+  async getKakochoById(id: string): Promise<Kakocho | undefined> {
+    const ref = doc(db, this.path, id);
+    const snap = await getDoc(ref);
 
-  // 新規登録
-  addKakocho(data: Kakocho): void {
-    this.kakochoList.push(data);
+    if (!snap.exists()) return undefined;
+
+    return {
+      id: snap.id,
+      ...(snap.data() as Omit<Kakocho, 'id'>),
+    };
   }
 
-  // 更新
-  updateKakocho(updatedData: Kakocho): void {
-    const index = this.kakochoList.findIndex((item) => item.id === updatedData.id);
+  // 新規登録（残す）
+  async addKakocho(data: Kakocho): Promise<void> {
+    const ref = doc(db, this.path, data.id);
+    await setDoc(ref, data);
+  }
 
-    if (index !== -1) {
-      this.kakochoList[index] = updatedData;
-    }
+  // 更新（残す）
+  async updateKakocho(updatedData: Kakocho): Promise<void> {
+    const ref = doc(db, this.path, updatedData.id);
+    await setDoc(ref, updatedData);
   }
 
-  // 削除
-  deleteKakocho(id: string): void {
-    this.kakochoList = this.kakochoList.filter((item) => item.id !== id);
+  // 削除（既存互換のため残す）
+  async deleteKakocho(id: string): Promise<void> {
+    const ref = doc(db, this.path, id);
+    await deleteDoc(ref);
   }
-}
+}

src/app/services/marriage-relation-service.ts

 import { Injectable } from '@angular/core';
+import {
+  collection,
+  getDocs,
+  doc,
+  getDoc,
+  setDoc,
+  deleteDoc,
+  query,
+  where,
+} from 'firebase/firestore';
+
+import { db } from '../firebase';
 import { MarriageRelation } from '../models/marriage-relation';
 
 @Injectable({
   providedIn: 'root',
 })
 export class MarriageRelationService {
-  private marriageRelations: MarriageRelation[] = [
-    {
-      id: '1',
-      dankaId: '1',
-      person1Id: '2',
-      person2Id: '9',
-      status: 'divorced',
-      startDate: '',
-      endDate: '',
-      note: '前妻',
-    },
-    {
-      id: '2',
-      dankaId: '1',
-      person1Id: '2',
-      person2Id: '7',
-      status: 'current',
-      startDate: '',
-      endDate: '',
-      note: '現在の配偶者',
-    },
-  ];
-
-  getMarriageRelationsByDankaId(dankaId: string): MarriageRelation[] {
-    return this.marriageRelations.filter((relation) => relation.dankaId === dankaId);
-  }
 
-  getMarriageRelationsByFamilyId(familyId: string): MarriageRelation[] {
-    return this.marriageRelations.filter(
-      (relation) => relation.person1Id === familyId || relation.person2Id === familyId,
+  private path = 'marriageRelations';
+
+  // 🔥 檀家IDで取得
+  async getMarriageRelationsByDankaId(dankaId: string): Promise<MarriageRelation[]> {
+    const q = query(
+      collection(db, this.path),
+      where('dankaId', '==', dankaId)
     );
+
+    const snap = await getDocs(q);
+
+    return snap.docs.map(d => ({
+      id: d.id,
+      ...(d.data() as Omit<MarriageRelation, 'id'>),
+    }));
   }
 
-  getCurrentMarriageByFamilyId(familyId: string): MarriageRelation | undefined {
-    return this.marriageRelations.find(
-      (relation) =>
-        relation.status === 'current' &&
-        (relation.person1Id === familyId || relation.person2Id === familyId),
-    );
+  // 🔥 家族IDで取得
+  async getMarriageRelationsByFamilyId(familyId: string): Promise<MarriageRelation[]> {
+    const snap = await getDocs(collection(db, this.path));
+
+    return snap.docs
+      .map(d => ({
+        id: d.id,
+        ...(d.data() as Omit<MarriageRelation, 'id'>),
+      }))
+      .filter(r =>
+        r.person1Id === familyId || r.person2Id === familyId
+      );
   }
 
-  getPastMarriagesByFamilyId(familyId: string): MarriageRelation[] {
-    return this.marriageRelations.filter(
-      (relation) =>
-        relation.status !== 'current' &&
-        (relation.person1Id === familyId || relation.person2Id === familyId),
+  // 🔥 現在の配偶者
+  async getCurrentMarriageByFamilyId(familyId: string): Promise<MarriageRelation | undefined> {
+    const relations = await this.getMarriageRelationsByFamilyId(familyId);
+
+    return relations.find(r =>
+      r.status === 'current'
     );
   }
 
-  getMarriageRelationById(id: string): MarriageRelation | undefined {
-    return this.marriageRelations.find((relation) => relation.id === id);
+  // 🔥 過去婚姻
+  async getPastMarriagesByFamilyId(familyId: string): Promise<MarriageRelation[]> {
+    const relations = await this.getMarriageRelationsByFamilyId(familyId);
+
+    return relations.filter(r => r.status !== 'current');
+  }
+
+  // 🔥 ID取得
+  async getMarriageRelationById(id: string): Promise<MarriageRelation | undefined> {
+    const ref = doc(db, this.path, id);
+    const snap = await getDoc(ref);
+
+    if (!snap.exists()) return undefined;
+
+    return {
+      id: snap.id,
+      ...(snap.data() as Omit<MarriageRelation, 'id'>),
+    };
   }
 
+  // =========================
+  // 🔥 既存互換（重要）
+  // =========================
+
   validateMarriageRelation(data: MarriageRelation): string[] {
     const errors: string[] = [];
 
     }
 
     if (data.person1Id === data.person2Id) {
-      errors.push('同じ人物同士を配偶関係に設定することはできません。');
+      errors.push('同じ人物同士を配偶関係に設定できません。');
     }
 
-    const duplicate = this.marriageRelations.find(
-      (relation) =>
-        relation.id !== data.id &&
-        ((relation.person1Id === data.person1Id && relation.person2Id === data.person2Id) ||
-          (relation.person1Id === data.person2Id && relation.person2Id === data.person1Id)),
-    );
-
-    if (duplicate) {
-      errors.push('この2人の配偶関係はすでに登録されています。');
-    }
-
-    if (data.status === 'current') {
-      const currentConflict = this.marriageRelations.find(
-        (relation) =>
-          relation.id !== data.id &&
-          relation.status === 'current' &&
-          (relation.person1Id === data.person1Id ||
-            relation.person2Id === data.person1Id ||
-            relation.person1Id === data.person2Id ||
-            relation.person2Id === data.person2Id),
-      );
-
-      if (currentConflict) {
-        errors.push(
-          '現在の配偶者は1人までです。既存の配偶関係を離婚・死別などに変更してから登録してください。',
-        );
-      }
-    }
+    // ⚠️ 注意：Firestore化後ここは「ローカルチェック不可」
+    // → 本来はDB取得が必要（今回は移行優先で維持）
 
     return errors;
   }
 
-  saveMarriageRelation(data: MarriageRelation): string[] {
+  async saveMarriageRelation(data: MarriageRelation): Promise<string[]> {
     const errors = this.validateMarriageRelation(data);
 
     if (errors.length > 0) {
       return errors;
     }
 
-    const index = this.marriageRelations.findIndex((relation) => relation.id === data.id);
-
-    if (index === -1) {
-      this.marriageRelations.push(data);
-    } else {
-      this.marriageRelations[index] = data;
-    }
+    const ref = doc(db, this.path, data.id);
+    await setDoc(ref, data);
 
     return [];
   }
 
-  deleteMarriageRelation(id: string): void {
-    this.marriageRelations = this.marriageRelations.filter((relation) => relation.id !== id);
+  async deleteMarriageRelation(id: string): Promise<void> {
+    const ref = doc(db, this.path, id);
+    await deleteDoc(ref);
   }
-}
+}

src/app/share/header/app-header.scss

 }
 
 .app-title {
-  font-size: 24px;
+  font-size: 34px;
   font-weight: 700;
   color: #2f2720;
   letter-spacing: 0.03em;

src/app/share/side-menu/app-side-menu.html

     <p class="menu-title">メニュー</p>
 
     <nav class="menu-list">
-      <a routerLink="/dashboard" routerLinkActive="active" class="menu-button">
+
+      <a routerLink="/dashboard" routerLinkActive="active" 
+        class="menu-button">
         ホーム
       </a>
 
-      <a routerLink="/danka-list" routerLinkActive="active" class="menu-button">
-        檀家一覧
+      <a routerLink="/danka-list" [class.active]="isDankaActive()" class="menu-button">
+        檀家
       </a>
 
-      <a routerLink="/danka-new" routerLinkActive="active" class="menu-button">
+      <a routerLink="/danka-new" routerLinkActive="active" 
+        class="menu-button">
         檀家登録
       </a>
 
-      <a routerLink="/memorial-list" routerLinkActive="active" class="menu-button">
+      <a routerLink="/memorial-list" routerLinkActive="active" 
+        class="menu-button">
         年次法要
       </a>
 
-      <a routerLink="/event" routerLinkActive="active" class="menu-button">
+      <a routerLink="/event" routerLinkActive="active"  class="menu-button">
         行事
       </a>
 
-      <a routerLink="/search" routerLinkActive="active" class="menu-button">
+      <a routerLink="/search" routerLinkActive="active"  class="menu-button">
         まとめて検索
       </a>
 
-<!--  ユーザー数が増えた際に実装    -->
-<!--      <a routerLink="/user-setting" routerLinkActive="active" class="menu-button">-->
-<!--        利用者設定-->
-<!--      </a>-->
     </nav>
   </div>
-</aside>
+</aside>

src/app/share/side-menu/app-side-menu.scss

 
 .menu-title {
   margin: 0 0 14px;
-  padding-left: 10px;
+  padding-left: 0;
   font-size: 15px;
   font-weight: 700;
   color: #5a4a3c;
+  text-align: center;
 }
 
 .menu-list {

src/app/share/side-menu/app-side-menu.ts

 import { Component } from '@angular/core';
-import { RouterLink, RouterLinkActive } from '@angular/router';
+import { Router, RouterLink, RouterLinkActive } from '@angular/router';
 
 @Component({
   selector: 'app-side-menu',
+  standalone: true,
   imports: [RouterLink, RouterLinkActive],
   templateUrl: './app-side-menu.html',
   styleUrl: './app-side-menu.scss',
 })
-export class AppSideMenu {}
+export class AppSideMenu {
+
+  constructor(public router: Router) {}
+
+isDankaActive(): boolean {
+  const url = this.router.url.split('?')[0];
+
+  const dankaPages = [
+    '/danka-list',
+    '/danka-detail',
+    '/danka-edit',
+  ];
+
+  const isDankaPage = dankaPages.some(path =>
+    url.startsWith(path)
+  );
+
+  const isExcluded = url.startsWith('/danka-new');
+
+  return isDankaPage && !isExcluded;
+}
+}