＜檀家一覧＞
ページ遷移した時に全件が表示されるように修正　〇
檀家一覧のタイトルと入力フォームの余白※
リスト表示に家族数、過去帳の人数（要相談）
タブについて全件は残して、あいうえお検索タブに変更　〇
檀家登録のボタンをクリアに変更　〇

＜檀家一覧（基本情報）＞
タイトル　檀家詳細-〇〇家に変更　〇
茶色のバーの中身の情報を世帯名と情報の更新日を追加　〇
　→回忌ボタンを削除　〇
編集ボタンの色をタブと同じ色に変更（檀家の家族タブの編集ボタンに修正）
右側の「家族を見る」「過去帳を見る」を削除　〇

＜檀家一覧（家族）＞
世帯主を一番上に　〇
氏名・ふりがな・生年月日・年齢・関係・備考　〇
操作に削除機能について＜要相談＞

＜檀家編集（家族）＞
世帯主設定

＜檀家一覧（過去等）＞
年次法要を見るを削除　〇
編集ボタンを削除　〇
編集ページへの遷移について
故人を登録の位置を修正

＜檀家一覧（家系図）＞
ツリー修正
右の人物に没年月日情報を追加
表について生年月日表示はなくして

＜年次法要＞
リストをクリックしたら、対象の檀家の基本情報へ遷移
リストの表示内容の順番を修正

＜まとめて検索＞
一覧へもどる削除　〇
戻る・フォームを削除　〇

＜サイドメニュー＞
選択済みはわかるように色付け　〇
檀家一覧の下に檀家登録を追加　〇

src/app/models/danka.ts

@@ -6,6 +6,7 @@ export interface Danka {
   postalCode: string;
   address: string;
   phones: Phone[];
+  updatedAt: string;
 }
 
 export interface Phone {

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

@@ -1,8 +1,5 @@
 <app-header></app-header>
 
-<div class="breadcrumb">
-  ホーム &gt; 檀家（世帯） &gt; {{ danka?.householdName }}
-</div>
 
 <div class="danka-detail-page">
   <app-side-menu></app-side-menu>
@@ -13,19 +10,7 @@
         <div class="page-title-row">
           <div>
             <h1>
-              檀家（世帯）詳細 -
-              @if (selectedTab === 'basic') {
-                基本情報
-              }
-              @if (selectedTab === 'family') {
-                家族
-              }
-              @if (selectedTab === 'kakocho') {
-                過去帳
-              }
-              @if (selectedTab === 'familyTree') {
-                家系図
-              }
+              檀家詳細 - {{ danka.householdName }}
             </h1>
 
             <nav class="tab-list">
@@ -84,14 +69,6 @@
             >
               故人を登録
             </button>
-
-            <button
-              type="button"
-              class="edit-button"
-              [routerLink]="['/kakocho-edit', danka.id, kakocholist[0].id]"
-            >
-              編集
-            </button>
           }
         </div>
 
@@ -100,27 +77,14 @@
             @if (selectedTab === 'basic') {
               <div class="family-name-area">
                 <p class="family-name">{{ danka.householdName }}</p>
-                <p class="family-head">世帯主: {{ danka.householder }}</p>
+                <p class="family-head">更新日: {{ formatUpdatedAt(danka.updatedAt) }}</p>
               </div>
-
-              <div class="family-address">
-                <p>郵便番号 〒{{ danka.postalCode }}</p>
-                <p>住所 {{ danka.address }}</p>
-              </div>
-
-              <button type="button" class="memo-button">
-                回忌を見る
-              </button>
             }
 
             @if (selectedTab === 'kakocho') {
               <div class="family-name-area">
                 <p class="family-name">{{ danka.householdName }}の過去帳{{ kakocholist.length }} 名</p>
               </div>
-
-              <button type="button" class="memo-button">
-                年次法要を見る
-              </button>
             }
           </section>
         }
@@ -180,8 +144,7 @@
                 <button
                   type="button"
                   class="status-card"
-                  (click)="selectedTab = 'family'"
-                >
+                  (click)="selectedTab = 'family'">
                   <p class="status-label">家族</p>
                   <p class="status-count">{{ families.length }} 名</p>
                   <p class="status-link">詳細へ</p>
@@ -190,8 +153,7 @@
                 <button
                   type="button"
                   class="status-card"
-                  (click)="selectedTab = 'kakocho'"
-                >
+                  (click)="selectedTab = 'kakocho'">
                   <p class="status-label">過去帳</p>
                   <p class="status-count">{{ kakocholist.length }}  名</p>
                   <p class="status-link">詳細へ</p>
@@ -202,30 +164,21 @@
                 <h3>次の法要</h3>
 
                 <div class="memorial-card">
-                  <p class="memorial-title">佐藤 ハナ - 三回忌</p>
-                  <p class="memorial-text">
-                    対象年 2026 / 没年月日 2024-01-08
-                  </p>
+                  @if (nextMemorial) {
+                    <p class="memorial-title">
+                      {{ nextMemorial.name }} - {{ nextMemorial.memorialType }}
+                    </p>
+                    <p class="memorial-text">
+                      対象年 {{ nextMemorial.targetYear }} / 没年月日 {{ nextMemorial.deathDate }}
+                    </p>
+                  } @else {
+                    <p class="memorial-title">対象の法要はありません</p>
+                    <p class="memorial-text">
+                      今年の年忌法要対象者がいる場合に表示されます。
+                    </p>
+                  }
                 </div>
               </section>
-
-              <div class="status-button-list">
-                <button
-                  type="button"
-                  class="status-button"
-                  (click)="selectedTab = 'family'"
-                >
-                  家族を見る
-                </button>
-
-                <button
-                  type="button"
-                  class="status-button"
-                  (click)="selectedTab = 'kakocho'"
-                >
-                  過去帳を見る
-                </button>
-              </div>
             </aside>
           </div>
         }
@@ -254,9 +207,9 @@
                   <div class="family-table-header">
                     <div>氏名</div>
                     <div>ふりがな</div>
-                    <div>関係</div>
-                    <div>年齢</div>
                     <div>生年月日</div>
+                    <div>年齢</div>
+                    <div>続柄</div>
                     <div>備考</div>
                     <div>操作</div>
                   </div>
@@ -272,7 +225,7 @@
                       </div>
 
                       <div>
-                        {{ family.relationship || '未登録' }}
+                        {{ family.birthDate || '未登録' }}
                       </div>
 
                       <div>
@@ -280,7 +233,7 @@
                       </div>
 
                       <div>
-                        {{ family.birthDate || '未登録' }}
+                        {{ family.relationship || '未登録' }}
                       </div>
 
                       <div>
@@ -319,7 +272,7 @@
                     <div>戒名</div>
                     <div>俗名</div>
                     <div>没年月日</div>
-                    <div>関係</div>
+                    <div>続柄</div>
                     <div>回忌</div>
                     <div>備考</div>
                   </div>
@@ -335,7 +288,7 @@
                       </div>
 
                       <div>
-                        {{ kakocho.deathDate }}
+                        {{ formatDeathDateWithYear(kakocho.deathDate) }}
                       </div>
 
                       <div>
@@ -427,7 +380,7 @@
                             {{ selectedFamily.name }}
                           </span>
                           <span class="tree-card-relationship">
-                            {{ selectedFamily.relationship || '関係未登録' }}
+                            {{ selectedFamily.relationship || '続柄未登録' }}
                           </span>
                           <span class="tree-card-birth">
                             {{ selectedFamily.birthDate || '生年月日未登録' }}
@@ -511,7 +464,7 @@
 
                     <div class="selected-info-list">
                       <div class="selected-info-row">
-                        <span>関係</span>
+                        <span>続柄</span>
                         <strong>{{ selectedFamily.relationship || '未登録' }}</strong>
                       </div>
 

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

@@ -6,16 +6,6 @@
   color: #2f2720;
 }
 
-.breadcrumb {
-  position: absolute;
-  top: 28px;
-  left: 50%;
-  transform: translateX(-50%);
-  color: #7b6b5c;
-  font-size: 14px;
-  z-index: 2;
-}
-
 .danka-detail-page {
   display: flex;
   align-items: flex-start;

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

@@ -11,6 +11,13 @@ import { AppHeader } from '../../share/header/app-header';
 import { AppSideMenu } from '../../share/side-menu/app-side-menu';
 import { MarriageRelationService } from '../../services/marriage-relation-service';
 
+interface NextMemorial {
+  name: string;
+  memorialType: string;
+  targetYear: number;
+  deathDate: string;
+}
+
 @Component({
   selector: 'app-danka-detail',
   imports: [AppHeader, AppSideMenu, RouterLink],
@@ -22,6 +29,7 @@ export class DankaDetail {
   families: Family[] = [];
   kakocholist: Kakocho[] = [];
   marriageRelations: MarriageRelation[] = [];
+  nextMemorial: NextMemorial | undefined;
   currentYear = new Date().getFullYear();
 
   selectedTab: 'basic' | 'family' | 'kakocho' | 'familyTree' = 'basic';
@@ -47,9 +55,10 @@ export class DankaDetail {
     if (id) {
       this.danka = this.dankaService.getDankaById(id);
       this.marriageRelations = this.marriageRelationService.getMarriageRelationsByDankaId(id);
-      this.families = this.familyService.getFamiliesByDankaId(id);
+      this.families = this.sortFamiliesByHouseholder(this.familyService.getFamiliesByDankaId(id));
       this.selectedFamily = this.families[0];
       this.kakocholist = this.kakochoService.getKakochoByDankaId(id);
+      this.nextMemorial = this.getNextMemorial();
     }
   }
 
@@ -75,10 +84,127 @@ export class DankaDetail {
     return this.currentYear - new Date(deathDate).getFullYear() + 1;
   }
 
+  formatUpdatedAt(updatedAt: string): string {
+    const date = this.parseDate(updatedAt);
+    if (!date) {
+      return '未登録';
+    }
+
+    return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
+  }
+
+  formatDeathDateWithYear(deathDate: string): string {
+    const date = this.parseDate(deathDate);
+    if (!date) {
+      return '未登録';
+    }
+
+    return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
+  }
+
+  getMemorialType(deathDate: string): string {
+    const deathYear = Number(deathDate.slice(0, 4));
+    const yearDiff = this.currentYear - deathYear;
+
+    switch (yearDiff) {
+      case 1:
+        return '一周忌';
+      case 2:
+        return '三回忌';
+      case 6:
+        return '七回忌';
+      case 12:
+        return '十三回忌';
+      case 16:
+        return '十七回忌';
+      case 22:
+        return '二十三回忌';
+      default:
+        return '';
+    }
+  }
+
+  private getNextMemorial(): NextMemorial | undefined {
+    const today = this.toDateOnly(new Date());
+
+    return this.kakocholist
+      .map((kakocho) => {
+        const memorialType = this.getMemorialType(kakocho.deathDate);
+        const deathDate = this.parseDate(kakocho.deathDate);
+
+        if (!memorialType || !deathDate) {
+          return undefined;
+        }
+
+        const memorialDate = new Date(
+          this.currentYear,
+          deathDate.getMonth(),
+          deathDate.getDate(),
+        );
+
+        if (memorialDate < today) {
+          return undefined;
+        }
+
+        return {
+          memorialDate,
+          memorial: {
+            name: kakocho.name,
+            memorialType,
+            targetYear: this.currentYear,
+            deathDate: kakocho.deathDate,
+          },
+        };
+      })
+      .filter(
+        (item): item is { memorialDate: Date; memorial: NextMemorial } => item !== undefined,
+      )
+      .sort(
+        (a, b) =>
+          a.memorialDate.getTime() - b.memorialDate.getTime() ||
+          a.memorial.name.localeCompare(b.memorial.name, 'ja'),
+      )[0]?.memorial;
+  }
+
+  private toDateOnly(date: Date): Date {
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+  }
+
+  private parseDate(value: string): Date | null {
+    const [year, month, day] = value.split('-').map(Number);
+    if (!year || !month || !day) {
+      return null;
+    }
+    return new Date(year, month - 1, day);
+  }
+
   selectFamily(family: Family): void {
     this.selectedFamily = family;
   }
 
+  private sortFamiliesByHouseholder(families: Family[]): Family[] {
+    if (!this.danka) {
+      return families;
+    }
+
+    const householderName = this.normalizeName(this.danka.householder);
+
+    return [...families].sort((a, b) => {
+      const aIsHouseholder = this.normalizeName(a.name) === householderName;
+      const bIsHouseholder = this.normalizeName(b.name) === householderName;
+
+      if (aIsHouseholder === bIsHouseholder) {
+        return 0;
+      }
+
+      return aIsHouseholder ? -1 : 1;
+    });
+  }
+
+  private normalizeName(name: string): string {
+    return name.replace(/\s/g, '');
+  }
+
   getFamilyById(id: string): Family | undefined {
     if (!id) {
       return undefined;

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

@@ -1,8 +1,5 @@
 <app-header></app-header>
 
-<div class="breadcrumb">
-  ホーム &gt; 檀家（世帯） &gt; 編集
-</div>
 
 <div class="danka-edit-page">
   <app-side-menu></app-side-menu>

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

@@ -6,16 +6,6 @@
   color: #2f2720;
 }
 
-.breadcrumb {
-  position: absolute;
-  top: 28px;
-  left: 50%;
-  transform: translateX(-50%);
-  color: #7b6b5c;
-  font-size: 14px;
-  z-index: 2;
-}
-
 .danka-edit-page {
   display: flex;
   align-items: flex-start;

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

@@ -87,12 +87,13 @@ export class DankaEdit {
     const formValue = this.dankaForm.value;
     const isEdit = !!this.danka;
     const dankaId = isEdit ? this.danka!.id : Date.now().toString();
-    const updatedDanka = {
+    const updatedDanka: Danka = {
       id: dankaId,
       householdName: formValue.householdName?.trim() ?? '',
       householder: formValue.householder?.trim() ?? '',
       postalCode: formValue.postalCode?.trim() ?? '',
       address: formValue.address?.trim() ?? '',
+      updatedAt: this.formatDateForSave(new Date()),
       phones: (formValue.phones ?? [])
         .map((phone) => ({
           tel: phone.tel?.trim() ?? '',
@@ -110,6 +111,13 @@ export class DankaEdit {
     }
   }
 
+  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}`;
+  }
+
   //削除の処理
   deleteDanka() {
     if (!this.danka) {

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

@@ -24,30 +24,23 @@
           検索
         </button>
 
-        <button type="button" class="new-button" routerLink="/danka-new">
-          新規登録
+        <button type="button" class="new-button" (click)="clearDanka()">
+          クリア
         </button>
       </div>
 
       <div class="filter-row">
         <div class="filter-button-list">
-          <button type="button" class="filter-button" [class.active]="selectedFilter === 'all'"
-                  (click)="showAllDanka()">
-            全件
-          </button>
-
-          <button type="button" class="filter-button">
-            過去帳あり
-          </button>
-
-          <button type="button" class="filter-button">
-            法要あり
-          </button>
-
-          <button type="button" class="filter-button" [class.active]="selectedFilter === 'phone'"
-                  (click)="filterPhoneAvailable()">
-            電話番号あり
-          </button>
+          @for (kanaRow of kanaRows; track kanaRow.value) {
+            <button
+              type="button"
+              class="filter-button"
+              [class.active]="selectedKanaRow === kanaRow.value"
+              (click)="filterByKanaRow(kanaRow.value)"
+            >
+              {{ kanaRow.label }}
+            </button>
+          }
         </div>
 
         <p class="result-count">

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

@@ -126,26 +126,31 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: 16px;
   margin-bottom: 14px;
-  padding-right: 24px;
+  padding: 12px 14px;
+  background: #fffdf9;
+  border: 2px solid #d8caba;
+  border-radius: 10px;
 }
 
 .filter-button-list {
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
   gap: 8px;
 }
 
 .filter-button {
-  min-width: 140px;
+  min-width: 56px;
   height: 40px;
-  padding: 0 18px;
+  padding: 0 14px;
   border: 2px solid #d8caba;
-  border-radius: 6px;
+  border-radius: 8px;
   background: #f4eee4;
   color: #2f2720;
   font-size: 16px;
-  font-weight: 700;
+  font-weight: 800;
   cursor: pointer;
   box-sizing: border-box;
 }
@@ -168,6 +173,7 @@
   margin: 0;
   color: #8a7d6d;
   font-size: 15px;
+  white-space: nowrap;
 }
 
 .list-content {
@@ -232,73 +238,3 @@
   text-align: center;
 }
 
-.help-panel {
-  position: absolute;
-  top: 0;
-  right: 18px;
-  width: 158px;
-  min-height: 446px;
-  padding: 28px 14px 18px;
-  background: #fffdf9;
-  border: 2px solid #d8caba;
-  border-radius: 24px;
-  box-sizing: border-box;
-}
-
-.help-panel h2 {
-  margin: 0 0 16px;
-  color: #2f2720;
-  font-size: 20px;
-  font-weight: 800;
-}
-
-.help-panel ol {
-  margin: 0;
-  padding-left: 22px;
-  color: #6f6257;
-  font-size: 14px;
-  line-height: 1.45;
-}
-
-.help-title-secondary {
-  margin-top: 28px !important;
-}
-
-.help-button-list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.help-button {
-  min-height: 46px;
-  padding: 0 8px;
-  border: 2px solid #d8caba;
-  border-radius: 8px;
-  background: #ffffff;
-  color: #2f2720;
-  font-size: 16px;
-  font-weight: 800;
-  text-decoration: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  box-sizing: border-box;
-}
-
-.help-button:hover {
-  background: #f6efe6;
-}
-
-.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;
-}

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

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

src/app/pages/dashboard/dashboard.html

@@ -15,14 +15,15 @@
       <section class="overview" aria-label="概要">
         <a class="card primary" href="#">
           <div class="card-label">今週の法要</div>
-          <div class="metric"><strong>4</strong><span>件</span></div>
-          <p class="card-text">本日 1件、明日以降 3件。準備状況を確認できます。</p>
+          <div class="metric"><strong>{{ weeklyMemorialCount }}</strong><span>件</span></div>
+          <p class="card-text">
+            本日 {{ todayMemorialCount }}件、明日以降 {{ upcomingWeeklyMemorialCount }}件。
+          </p>
         </a>
 
         <a class="card" href="#">
           <div class="card-label">今月の年忌法要</div>
-          <div class="metric"><strong>12</strong><span>名</span></div>
-          <p class="card-text">未確認 3名 / 案内済 7名 / 完了 2名</p>
+          <div class="metric"><strong>{{ monthlyMemorialCount }}</strong><span>名</span></div>
         </a>
 
         <div class="search-card">
@@ -92,35 +93,34 @@
         </div>
 
         <div class="upcoming-list">
-          <a class="upcoming-item important" href="#">
-            <div class="upcoming-date">今日</div>
-            <div class="upcoming-main">
-              <div class="upcoming-title">鈴木家　美咲様　三回忌</div>
-              <div class="upcoming-sub">市内 1-2-3 / 連絡先確認済</div>
+          @if (upcomingMemorials.length > 0) {
+            @for (memorial of upcomingMemorials; track memorial.id) {
+              <a
+                class="upcoming-item"
+                [class.important]="memorial.dateLabel === '今日'"
+                [routerLink]="['/danka-detail', memorial.dankaId]"
+                [queryParams]="{tab: 'kakocho'}"
+              >
+                <div class="upcoming-date">{{ memorial.dateLabel }}</div>
+                <div class="upcoming-main">
+                  <div class="upcoming-title">{{ memorial.title }}</div>
+                  <div class="upcoming-sub">{{ memorial.subText }}</div>
+                </div>
+                <div class="upcoming-type">{{ memorial.type }}</div>
+                <div class="upcoming-status">{{ memorial.status }}</div>
+              </a>
+            }
+          } @else {
+            <div class="upcoming-item">
+              <div class="upcoming-date">なし</div>
+              <div class="upcoming-main">
+                <div class="upcoming-title">近日の法要・命日はありません</div>
+                <div class="upcoming-sub">過去帳に登録された命日から自動表示します。</div>
+              </div>
+              <div class="upcoming-type">-</div>
+              <div class="upcoming-status">-</div>
             </div>
-            <div class="upcoming-type">年忌法要</div>
-            <div class="upcoming-status">準備確認</div>
-          </a>
-
-          <a class="upcoming-item" href="#">
-            <div class="upcoming-date">6月2日</div>
-            <div class="upcoming-main">
-              <div class="upcoming-title">佐藤家　恵夫様　七回忌</div>
-              <div class="upcoming-sub">市内 2-8-1 / 案内状送付済</div>
-            </div>
-            <div class="upcoming-type">年忌法要</div>
-            <div class="upcoming-status">案内済</div>
-          </a>
-
-          <a class="upcoming-item" href="#">
-            <div class="upcoming-date">6月7日</div>
-            <div class="upcoming-main">
-              <div class="upcoming-title">田中家　雪音様　祥月命日</div>
-              <div class="upcoming-sub">市内 3-4-6 / 法要日は未設定</div>
-            </div>
-            <div class="upcoming-type">命日</div>
-            <div class="upcoming-status">要確認</div>
-          </a>
+          }
         </div>
       </section>
     </section>

src/app/pages/dashboard/dashboard.ts

@@ -1,11 +1,176 @@
 import { Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { KakochoService } from '../../services/kakocho-service';
+import { DankaService } from '../../services/dankaService';
 import { AppHeader } from '../../share/header/app-header';
 import { AppSideMenu } from '../../share/side-menu/app-side-menu';
 
+interface UpcomingMemorial {
+  id: string;
+  dankaId: string;
+  date: Date;
+  dateLabel: string;
+  title: string;
+  subText: string;
+  type: '年忌法要' | '命日';
+  status: '準備確認' | '要確認';
+}
+
 @Component({
   selector: 'app-dashboard',
-  imports: [AppHeader, AppSideMenu],
+  imports: [AppHeader, AppSideMenu, RouterLink],
   templateUrl: './dashboard.html',
   styleUrl: './dashboard.scss',
 })
-export class Dashboard {}
+export class Dashboard {
+  weeklyMemorialCount = 0;
+  todayMemorialCount = 0;
+  upcomingWeeklyMemorialCount = 0;
+  monthlyMemorialCount = 0;
+  upcomingMemorials: UpcomingMemorial[] = [];
+
+  private readonly targetYear = new Date().getFullYear();
+
+  constructor(
+    private kakochoService: KakochoService,
+    private dankaService: DankaService,
+  ) {
+    this.setWeeklyMemorialSummary();
+    this.setMonthlyMemorialSummary();
+    this.setUpcomingMemorials();
+  }
+
+  private setWeeklyMemorialSummary(): void {
+    const today = this.toDateOnly(new Date());
+    const weekEnd = this.addDays(this.getWeekStart(today), 6);
+
+    const weeklyMemorials = this.kakochoService.getKakochoList().filter((kakocho) => {
+      const deathDate = this.parseDate(kakocho.deathDate);
+      if (!deathDate) {
+        return false;
+      }
+
+      if (!this.isMemorialTarget(deathDate)) {
+        return false;
+      }
+
+      const memorialDate = new Date(this.targetYear, deathDate.getMonth(), deathDate.getDate());
+      return memorialDate >= today && memorialDate <= weekEnd;
+    });
+
+    this.weeklyMemorialCount = weeklyMemorials.length;
+    this.todayMemorialCount = weeklyMemorials.filter((kakocho) => {
+      const deathDate = this.parseDate(kakocho.deathDate);
+      return deathDate?.getMonth() === today.getMonth() && deathDate.getDate() === today.getDate();
+    }).length;
+    this.upcomingWeeklyMemorialCount = this.weeklyMemorialCount - this.todayMemorialCount;
+  }
+
+  private setMonthlyMemorialSummary(): void {
+    const today = this.toDateOnly(new Date());
+
+    this.monthlyMemorialCount = this.kakochoService.getKakochoList().filter((kakocho) => {
+      const deathDate = this.parseDate(kakocho.deathDate);
+      if (!deathDate || !this.isMemorialTarget(deathDate)) {
+        return false;
+      }
+
+      return deathDate.getMonth() === today.getMonth();
+    }).length;
+  }
+
+  private setUpcomingMemorials(): void {
+    const today = this.toDateOnly(new Date());
+    const endDate = this.addDays(today, 30);
+
+    this.upcomingMemorials = this.kakochoService
+      .getKakochoList()
+      .map((kakocho): UpcomingMemorial | null => {
+        const deathDate = this.parseDate(kakocho.deathDate);
+        if (!deathDate) {
+          return null;
+        }
+
+        const eventDate = new Date(this.targetYear, deathDate.getMonth(), deathDate.getDate());
+        if (eventDate < today || eventDate > endDate) {
+          return null;
+        }
+
+        const memorialType = this.getMemorialType(deathDate);
+        const danka = this.dankaService.getDankaById(kakocho.dankaId);
+        const type = memorialType ? '年忌法要' : '命日';
+        const status = memorialType ? '準備確認' : '要確認';
+
+        return {
+          id: kakocho.id,
+          dankaId: kakocho.dankaId,
+          date: eventDate,
+          dateLabel: this.formatDateLabel(eventDate, today),
+          title: `${danka?.householdName ?? '不明'}　${kakocho.name}様　${memorialType || '祥月命日'}`,
+          subText: `${danka?.address ?? '住所未登録'} / ${kakocho.kaimyo || '戒名未登録'}`,
+          type,
+          status,
+        };
+      })
+      .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);
+  }
+
+  private isMemorialTarget(deathDate: Date): boolean {
+    return this.getMemorialType(deathDate) !== '';
+  }
+
+  private getMemorialType(deathDate: Date): string {
+    const yearDiff = this.targetYear - deathDate.getFullYear();
+
+    switch (yearDiff) {
+      case 1:
+        return '一周忌';
+      case 2:
+        return '三回忌';
+      case 6:
+        return '七回忌';
+      case 12:
+        return '十三回忌';
+      case 16:
+        return '十七回忌';
+      case 22:
+        return '二十三回忌';
+      default:
+        return '';
+    }
+  }
+
+  private formatDateLabel(date: Date, today: Date): string {
+    if (date.getTime() === today.getTime()) {
+      return '今日';
+    }
+
+    return `${date.getMonth() + 1}月${date.getDate()}日`;
+  }
+
+  private getWeekStart(date: Date): Date {
+    const day = date.getDay();
+    const diff = day === 0 ? -6 : 1 - day;
+    return this.addDays(date, diff);
+  }
+
+  private addDays(date: Date, days: number): Date {
+    const result = new Date(date);
+    result.setDate(result.getDate() + days);
+    return result;
+  }
+
+  private toDateOnly(date: Date): Date {
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+  }
+
+  private parseDate(value: string): Date | null {
+    const [year, month, day] = value.split('-').map(Number);
+    if (!year || !month || !day) {
+      return null;
+    }
+    return new Date(year, month - 1, day);
+  }
+}

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

@@ -1,8 +1,5 @@
 <app-header></app-header>
 
-<div class="breadcrumb">
-  ホーム &gt; 檀家（世帯） &gt; 家族 &gt; 編集
-</div>
 
 <div class="danka-edit-page">
   <app-side-menu></app-side-menu>
@@ -42,7 +39,7 @@
               </div>
 
               <div class="form-row">
-                <label for="relationship">世帯主との関係</label>
+                <label for="relationship">続柄</label>
                 <div class="form-field">
                   <select id="relationship"
                           formControlName="relationship">
@@ -58,7 +55,7 @@
                     <option value="その他">その他</option>
                   </select>
                   @if (familyForm.get('relationship')?.invalid && familyForm.get('relationship')?.touched) {
-                    <p class="error-message">世帯主との関係を選択してください。</p>
+                    <p class="error-message">続柄を選択してください。</p>
                   }
                 </div>
               </div>

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

@@ -6,16 +6,6 @@
   color: #2f2720;
 }
 
-.breadcrumb {
-  position: absolute;
-  top: 28px;
-  left: 50%;
-  transform: translateX(-50%);
-  color: #7b6b5c;
-  font-size: 14px;
-  z-index: 2;
-}
-
 .danka-edit-page {
   display: flex;
   align-items: flex-start;
@@ -296,12 +286,6 @@
 }
 
 @media (max-width: 800px) {
-  .breadcrumb {
-    position: static;
-    transform: none;
-    padding: 16px 20px 0;
-  }
-
   .danka-edit-page {
     flex-direction: column;
   }

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

@@ -1,8 +1,5 @@
 <app-header></app-header>
 
-<div class="breadcrumb">
-  ホーム &gt;　家系図
-</div>
 
 <div class="search-page">
   <app-side-menu></app-side-menu>

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

@@ -1,12 +1,5 @@
 <app-header></app-header>
 
-<div class="breadcrumb">
-  @if (kakocho) {
-    ホーム &gt; 檀家（世帯） &gt; 過去帳 &gt; 故人を編集
-  } @else {
-    ホーム &gt; 檀家（世帯） &gt; 過去帳 &gt; 故人を追加
-  }
-</div>
 
 <div class="danka-edit-page">
   <app-side-menu></app-side-menu>

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

@@ -6,16 +6,6 @@
   color: #2f2720;
 }
 
-.breadcrumb {
-  position: absolute;
-  top: 28px;
-  left: 50%;
-  transform: translateX(-50%);
-  color: #7b6b5c;
-  font-size: 14px;
-  z-index: 2;
-}
-
 .danka-edit-page {
   display: flex;
   align-items: flex-start;

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

@@ -1,8 +1,5 @@
 <app-header></app-header>
 
-<div class="breadcrumb">
-  ホーム &gt; 年次法要
-</div>
 
 <div class="memorial-list-page">
   <app-side-menu></app-side-menu>
@@ -49,11 +46,11 @@
       <section class="memorial-table-section">
         <div class="memorial-table">
           <div class="memorial-table-header">
-            <div>俗名</div>
             <div>戒名</div>
+            <div>俗名</div>
+            <div>没年月日</div>
             <div>関係</div>
             <div>檀家（世帯）</div>
-            <div>没年月日</div>
             <div>回忌</div>
             <div>詳細</div>
           </div>
@@ -62,10 +59,13 @@
             @for (memorial of memorialList; track memorial.id) {
               <div class="memorial-table-row">
                 <div class="person-name">
+                  {{ memorial.kaimyo }}
+                </div>
+                <div>
                   {{ memorial.name }}
                 </div>
                 <div>
-                  {{ memorial.kaimyo }}
+                  {{ formatDeathDate(memorial.deathDate) }}
                 </div>
                 <div>
                   {{ memorial.relationship }}
@@ -73,9 +73,6 @@
                 <div>
                   {{ memorial.householdName }}
                 </div>
-                <div>
-                  {{ memorial.deathDate }}
-                </div>
                 <div class="memorial-type">
                   {{ memorial.memorialType }}
                 </div>

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

@@ -6,16 +6,6 @@
   color: #2f2720;
 }
 
-.breadcrumb {
-  position: absolute;
-  top: 28px;
-  left: 50%;
-  transform: translateX(-50%);
-  color: #7b6b5c;
-  font-size: 14px;
-  z-index: 2;
-}
-
 .memorial-list-page {
   display: flex;
   align-items: flex-start;
@@ -172,7 +162,7 @@
 .memorial-table-header,
 .memorial-table-row {
   display: grid;
-  grid-template-columns: 1.2fr 1.4fr 0.8fr 1.2fr 1.1fr 0.8fr 0.7fr;
+  grid-template-columns: 1.4fr 1.2fr 0.9fr 0.8fr 1.2fr 0.8fr 0.7fr;
   align-items: center;
   column-gap: 12px;
 }
@@ -284,12 +274,6 @@
 }
 
 @media (max-width: 800px) {
-  .breadcrumb {
-    position: static;
-    transform: none;
-    padding: 16px 20px 0;
-  }
-
   .memorial-list-page {
     flex-direction: column;
   }

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

@@ -75,6 +75,15 @@ export class MemorialList {
     this.createMemorialList();
   }
 
+  formatDeathDate(deathDate: string): string {
+    const [, month, day] = deathDate.split('-').map(Number);
+    if (!month || !day) {
+      return '未登録';
+    }
+
+    return `${month}月${day}日`;
+  }
+
   getMemorialType(yearDiff: number) {
     switch (yearDiff) {
       case 1:

src/app/pages/search/search.html

@@ -1,9 +1,5 @@
 <app-header></app-header>
 
-<div class="breadcrumb">
-  ホーム &gt; まとめて検索
-</div>
-
 <div class="search-page">
   <app-side-menu></app-side-menu>
 
@@ -11,14 +7,6 @@
     <section class="search-panel">
       <div class="page-title-row">
         <h1>まとめて検索</h1>
-        <div class="top-action-list">
-          <button type="button" class="top-button" onclick="history.back()">
-            戻る
-          </button>
-          <a routerLink="/" class="top-button">
-            ホーム
-          </a>
-        </div>
       </div>
 
       <section class="search-condition-area">
@@ -26,7 +14,7 @@
           <div class="search-input-box">
             <span class="search-icon">⌕</span>
             <input type="text" [(ngModel)]="searchKeyword"
-                   placeholder="さとう / 佐藤 / 釈 / 2024 / 母 / 三回忌"
+                   placeholder="三回忌 / 〇〇歳 / 2024 /"
                    (keydown.enter)="searchAll()"/>
           </div>
           <button type="button" class="search-button" (click)="searchAll()">
@@ -35,9 +23,6 @@
           <button type="button" class="filter-button-main" (click)="clearSearch()">
             クリア
           </button>
-          <a routerLink="/danka-list" class="back-list-button">
-            一覧へ戻る
-          </a>
         </div>
 
         <div class="search-filter-list">

src/app/pages/search/search.scss

@@ -6,16 +6,6 @@
   color: #2f2720;
 }
 
-.breadcrumb {
-  position: absolute;
-  top: 28px;
-  left: 50%;
-  transform: translateX(-50%);
-  color: #7b6b5c;
-  font-size: 14px;
-  z-index: 2;
-}
-
 .search-page {
   display: flex;
   align-items: flex-start;
@@ -314,12 +304,6 @@
 }
 
 @media (max-width: 800px) {
-  .breadcrumb {
-    position: static;
-    transform: none;
-    padding: 16px 20px 0;
-  }
-
   .search-page {
     flex-direction: column;
   }

src/app/services/dankaService.ts

@@ -12,6 +12,7 @@ export class DankaService {
       householder: '鈴木 太郎',
       postalCode: '123-4567',
       address: '市内 1-2-3',
+      updatedAt: '2026-05-28',
       phones: [
         {
           tel: '03-4567-8910',
@@ -29,6 +30,7 @@ export class DankaService {
       householder: '古田 太郎',
       postalCode: '234-4567',
       address: '市内 1-2-3',
+      updatedAt: '2026-05-28',
       phones: [
         {
           tel: '0-5678-9101',

src/app/services/kakocho-service.ts

@@ -13,7 +13,7 @@ export class KakochoService {
       name: '鈴木 一郎',
       furigana: 'すずき いちろう',
       relationship: '父',
-      kaimyo: '〇〇院〇〇居士',
+      kaimyo: '光譽明照信士',
       deathDate: '2024-01-08',
       ageAtDeath: '88',
       note: '三回忌対象',
@@ -25,19 +25,19 @@ export class KakochoService {
       name: '鈴木 ハナ',
       furigana: 'すずき はな',
       relationship: '母',
-      kaimyo: '〇〇院〇〇大姉',
+      kaimyo: '清譽妙蓮大姉',
       deathDate: '2020-05-12',
       ageAtDeath: '82',
       note: '',
     },
     {
-      id: '2',
+      id: '3',
       dankaId: '2',
       familyId: '',
       name: '鈴木 太郎',
       furigana: 'すずき たろう',
       relationship: '息子',
-      kaimyo: '〇〇院〇〇大姉',
+      kaimyo: '慈譽善道信士',
       deathDate: '2025-01-08',
       ageAtDeath: '50',
       note: '',

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

@@ -11,6 +11,10 @@
         檀家一覧
       </a>
 
+      <a routerLink="/danka-new" routerLinkActive="active" class="menu-button">
+        檀家登録
+      </a>
+
       <a routerLink="/memorial-list" routerLinkActive="active" class="menu-button">
         年次法要
       </a>
@@ -19,10 +23,6 @@
         まとめて検索
       </a>
 
-      <a routerLink="/family-tree" routerLinkActive="active" class="menu-button">
-        家系図
-      </a>
-
 <!--  ユーザー数が増えた際に実装    -->
 <!--      <a routerLink="/user-setting" routerLinkActive="active" class="menu-button">-->
 <!--        利用者設定-->

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

@@ -1,10 +1,9 @@
 import { Component } from '@angular/core';
-import { RouterLink } from '@angular/router';
-import { DankaList } from '../../pages/danka-list/danka-list';
+import { RouterLink, RouterLinkActive } from '@angular/router';
 
 @Component({
   selector: 'app-side-menu',
-  imports: [RouterLink, ],
+  imports: [RouterLink, RouterLinkActive],
   templateUrl: './app-side-menu.html',
   styleUrl: './app-side-menu.scss',
 })

src/index.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="ja">
 <head>
   <meta charset="utf-8">
   <title>戒名管理</title>