[add]

src/app/app.routes.ts

@@ -8,6 +8,7 @@ import { KakochoEdit } from './pages/kakocho-edit/kakocho-edit';
 import { MemorialList } from './pages/memorial-list/memorial-list';
 import { Search } from './pages/search/search';
 import { FamilyTree } from './pages/family-tree/family-tree';
+import { EventPage } from './pages/event/event';
 
 export const routes: Routes = [
   {
@@ -54,6 +55,10 @@ export const routes: Routes = [
     path: 'memorial-list',
     component: MemorialList,
   },
+  {
+    path: 'event',
+    component: EventPage,
+  },
   {
     path: 'search',
     component: Search,

src/app/models/danka.ts

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

src/app/models/event.ts

@@ -0,0 +1,17 @@
+export type EventType = '稚児行列' | '七五三' | '成人式' | '米寿';
+
+export type EventStatus = '案内済' | '未案内';
+
+export interface EventTarget {
+  id: string;
+  dankaId: string;
+  name: string;
+  furigana: string;
+  householdName: string;
+  relationship: string;
+  birthDate: string;
+  age: number;
+  eventType: EventType;
+  note: string;
+  status: EventStatus;
+}

src/app/models/memorial.ts

@@ -8,4 +8,5 @@ export interface Memorial {
   householdName: string;
   deathDate: string;
   memorialType: string;
+  note: string;
 }

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

@@ -86,8 +86,8 @@
   margin-top: 36px;
   border: 2px solid #8a6543;
   border-radius: 6px;
-  background: #8a6543;
-  color: #ffffff;
+  background: #ffffff;
+  color: #8a6543;
   font-size: 18px;
   font-weight: 800;
   cursor: pointer;
@@ -95,23 +95,27 @@
 }
 
 .edit-button:hover {
-  background: #765639;
+  background: #f6efe6;
 }
 
 .family-summary {
-  min-height: 82px;
+  min-height: 64px;
   margin-bottom: 28px;
-  padding: 14px 26px;
+  padding: 12px 22px;
   border: 2px solid #d8caba;
   border-radius: 14px;
   background: #eadfce;
-  display: grid;
-  grid-template-columns: 1.2fr 1.6fr auto;
+  display: flex;
   align-items: center;
-  column-gap: 24px;
   box-sizing: border-box;
 }
 
+.family-name-area {
+  display: flex;
+  align-items: baseline;
+  gap: 18px;
+}
+
 .family-name {
   margin: 0;
   color: #2f2720;
@@ -121,7 +125,7 @@
 }
 
 .family-head {
-  margin: 2px 0 0;
+  margin: 0;
   color: #6f6257;
   font-size: 16px;
 }
@@ -153,11 +157,11 @@
   width: 140px;
   height: 46px;
   margin-top: 36px;
-  border: 2px solid #d8caba;
+  border: 2px solid #8a6543;
   border-radius: 6px;
   background: #ffffff;
-  color: #2f2720;
-  font-size: 16px;
+  color: #8a6543;
+  font-size: 18px;
   font-weight: 800;
   cursor: pointer;
   box-sizing: border-box;
@@ -167,16 +171,37 @@
   background: #f6efe6;
 }
 
+.family-page-add-button {
+  width: 140px;
+  height: 46px;
+  margin-top: 36px;
+  border: 2px solid #8a6543;
+  border-radius: 6px;
+  background: #ffffff;
+  color: #8a6543;
+  font-size: 18px;
+  font-weight: 800;
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+}
+
+.family-page-add-button:hover {
+  background: #f6efe6;
+}
+
 
 .detail-content {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) 500px;
-  gap: 48px;
+  grid-template-columns: minmax(0, 1fr) 460px;
+  gap: 28px;
   align-items: start;
 }
 
 .basic-info-section {
-  padding-left: 8px;
+  padding-left: 0;
 }
 
 .section-heading {
@@ -197,13 +222,24 @@
 }
 
 .info-form {
-  width: 650px;
+  width: 100%;
+}
+
+.info-pair-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 14px;
+  margin-top: 10px;
 }
 
 .info-row {
   display: grid;
-  grid-template-columns: 120px 1fr;
+  grid-template-columns: 96px 1fr;
   align-items: center;
+  margin-top: 0;
+}
+
+.info-form > .info-row {
   margin-top: 10px;
 }
 
@@ -228,7 +264,6 @@
 
 .phone-row {
   align-items: start;
-  margin-top: 18px;
 }
 
 .phone-row .info-label {
@@ -242,7 +277,7 @@
 .phone-header,
 .phone-item {
   display: grid;
-  grid-template-columns: 1fr 1.4fr 1.2fr;
+  grid-template-columns: 1fr 1fr;
   align-items: center;
 }
 
@@ -272,7 +307,7 @@
 
 .status-panel {
   min-height: 382px;
-  padding: 30px 24px 22px;
+  padding: 24px 22px 22px;
   border: 2px solid #d8caba;
   border-radius: 62px;
   background: #fffdf9;
@@ -421,23 +456,39 @@
   justify-content: space-between;
   align-items: center;
   gap: 16px;
-  padding: 16px 20px;
+  padding: 14px 18px;
   margin-bottom: 20px;
   background: #efe4d6;
   border: 2px solid #d8c2aa;
   border-radius: 12px;
 }
 
-.family-list-title {
-  margin: 0;
-  font-size: 20px;
-  font-weight: 700;
+.family-search-box {
+  flex: 1;
+  min-width: 0;
+  display: grid;
+  grid-template-columns: 96px minmax(0, 1fr);
+  gap: 12px;
+  align-items: center;
 }
 
-.family-list-head {
-  margin: 0;
-  font-size: 14px;
-  color: #6f6256;
+.family-search-label {
+  color: #4b3c31;
+  font-size: 16px;
+  font-weight: 800;
+}
+
+.family-search-box input {
+  width: 100%;
+  height: 42px;
+  padding: 0 14px;
+  border: 2px solid #d8c2aa;
+  border-radius: 8px;
+  background: #fffdf9;
+  color: #2f2720;
+  font-size: 15px;
+  font-weight: 700;
+  box-sizing: border-box;
 }
 
 .family-table-section {
@@ -483,6 +534,32 @@
   background: #f6efe6;
 }
 
+.event-status-select {
+  width: 84px;
+  height: 34px;
+  padding: 0 8px;
+  border: 2px solid #d8c2aa;
+  border-radius: 6px;
+  background: #ffffff;
+  color: #6f6256;
+  font-size: 13px;
+  font-weight: 800;
+  cursor: pointer;
+  box-sizing: border-box;
+  outline: none;
+}
+
+.event-status-select.sent {
+  border-color: #8a6543;
+  background: #f1e7d8;
+  color: #8a6543;
+}
+
+.event-status-select:focus {
+  border-color: #8a6543;
+  box-shadow: 0 0 0 3px rgba(138, 101, 67, 0.15);
+}
+
 .family-table-header {
   padding: 12px 14px;
   background: #efe4d6;
@@ -490,7 +567,7 @@
   border-radius: 10px;
   font-size: 14px;
   font-weight: 700;
-  color: #5d3b24;
+  color: #111111;
 }
 
 .family-table-row {
@@ -500,7 +577,7 @@
   border: 2px solid #d8c2aa;
   border-radius: 10px;
   font-size: 15px;
-  color: #2f2923;
+  color: #111111;
 }
 
 .family-table-row:hover {
@@ -512,7 +589,88 @@
   margin: 0;
   font-size: 15px;
   font-weight: 700;
-  color: #5d3b24;
+  color: #111111;
+}
+
+.family-member-table {
+  gap: 0;
+  border: 2px solid #d8c2aa;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.family-member-table .family-table-header,
+.family-member-table .family-table-row {
+  grid-template-columns: 1.35fr 0.75fr 1.05fr 1fr 1.2fr 168px;
+  gap: 12px;
+  border: 0;
+  border-radius: 0;
+}
+
+.family-member-table .family-table-header {
+  min-height: 46px;
+  padding: 0 14px;
+  background: #efe4d6;
+}
+
+.family-member-table .family-table-row {
+  min-height: 78px;
+  padding: 10px 14px;
+  background: #fffdf9;
+  border-top: 1px solid #d8c2aa;
+}
+
+.family-member-table .family-table-row:hover {
+  background: #fff8ee;
+}
+
+.family-person-sub,
+.family-person-date {
+  margin: 0;
+}
+
+.family-person-sub {
+  margin-top: 4px;
+  color: #111111;
+  font-size: 13px;
+  line-height: 1.35;
+}
+
+.family-person-date {
+  color: #111111;
+  font-size: 15px;
+}
+
+.family-member-table .family-table-action {
+  justify-content: center;
+  gap: 8px;
+}
+
+.family-member-table .family-table-header > div:last-child {
+  text-align: center;
+}
+
+.family-member-table .family-edit-link {
+  width: 74px;
+}
+
+.kakocho-member-table .family-table-header,
+.kakocho-member-table .family-table-row {
+  grid-template-columns: 1.25fr 1.15fr 1.05fr 0.65fr 0.6fr 1.1fr 82px;
+}
+
+.event-member-table .family-table-header,
+.event-member-table .family-table-row {
+  grid-template-columns: 1.35fr 1fr 0.75fr 1.05fr 0.95fr 96px;
+}
+
+.event-member-table .event-status-select {
+  width: 90px;
+}
+
+.event-member-table .family-table-header > div:last-child,
+.event-member-table .family-table-row > div:last-child {
+  text-align: center;
 }
 
 .empty-family-message {
@@ -556,6 +714,16 @@
   margin-top: 24px;
 }
 
+.coming-soon-section .section-heading {
+  margin-bottom: 16px;
+
+  h2 {
+    margin: 0;
+    font-size: 20px;
+    font-weight: 700;
+  }
+}
+
 /* =========================
    家系図タブ
 ========================= */
@@ -1023,6 +1191,11 @@
     flex-direction: column;
   }
 
+  .family-search-box {
+    width: 100%;
+    grid-template-columns: 1fr;
+  }
+
   .family-table {
     overflow-x: auto;
   }

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

@@ -17,7 +17,7 @@
 
             <div class="form-list">
               <div class="form-row">
-                <label for="householdName">世帯名</label>
+                <label for="householdName">檀家名</label>
                 <div class="form-field">
                   <input
                     id="householdName"
@@ -25,13 +25,22 @@
                     formControlName="householdName"
                   />
                   @if (dankaForm.get('householdName')?.invalid && dankaForm.get('householdName')?.touched) {
-                    <p class="error-message">世帯名を入力してください。</p>
+                    <p class="error-message">檀家名を入力してください。</p>
                   }
                 </div>
               </div>
 
               <div class="form-row">
-                <label for="householder">世帯主</label>
+                <label for="householdFurigana">檀家名ふりがな</label>
+                <input
+                  id="householdFurigana"
+                  type="text"
+                  formControlName="householdFurigana"
+                />
+              </div>
+
+              <div class="form-row">
+                <label for="householder">施主名</label>
                 <div class="form-field">
                   <input
                     id="householder"
@@ -39,11 +48,20 @@
                     formControlName="householder"
                   />
                   @if (dankaForm.get('householder')?.invalid && dankaForm.get('householder')?.touched) {
-                    <p class="error-message">世帯主を入力してください。</p>
+                    <p class="error-message">施主名を入力してください。</p>
                   }
                 </div>
               </div>
 
+              <div class="form-row">
+                <label for="householderFurigana">施主名ふりがな</label>
+                <input
+                  id="householderFurigana"
+                  type="text"
+                  formControlName="householderFurigana"
+                />
+              </div>
+
               <div class="form-row">
                 <label for="postalCode">郵便番号</label>
                 <div class="form-field">
@@ -66,6 +84,16 @@
                   formControlName="address"
                 />
               </div>
+
+              <div class="form-row note-row">
+                <label for="note">備考</label>
+                <textarea
+                  id="note"
+                  formControlName="note"
+                  rows="4"
+                  placeholder="檀家に関する連絡事項や注意点を入力"
+                ></textarea>
+              </div>
             </div>
           </section>
 

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

@@ -49,6 +49,7 @@
 }
 
 .edit-form input,
+.edit-form textarea,
 .edit-form button {
   font-family: inherit;
 }
@@ -93,7 +94,7 @@
 
 .form-row {
   display: grid;
-  grid-template-columns: 120px 1fr;
+  grid-template-columns: 160px 1fr;
   align-items: center;
   gap: 16px;
   margin-bottom: 14px;
@@ -105,10 +106,9 @@
   font-weight: 800;
 }
 
-.form-row input {
+.form-row input,
+.form-row textarea {
   width: 100%;
-  height: 54px;
-  padding: 0 14px;
   border: 2px solid #d8caba;
   border-radius: 8px;
   background: #fffdf9;
@@ -119,7 +119,28 @@
   outline: none;
 }
 
-.form-row input:focus {
+.form-row input {
+  height: 54px;
+  padding: 0 14px;
+}
+
+.form-row textarea {
+  min-height: 112px;
+  padding: 12px 14px;
+  line-height: 1.6;
+  resize: vertical;
+}
+
+.note-row {
+  align-items: start;
+}
+
+.note-row label {
+  padding-top: 12px;
+}
+
+.form-row input:focus,
+.form-row textarea:focus {
   border-color: #8a6543;
   box-shadow: 0 0 0 3px rgba(138, 101, 67, 0.15);
 }

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

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

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

@@ -51,11 +51,10 @@
       <div class="list-content">
         <div class="danka-table">
           <div class="danka-table-header">
-            <div>世帯主</div>
-            <div>世帯名</div>
+            <div>檀家名・ふりがな</div>
+            <div>施主名・ふりがな</div>
             <div>住所</div>
             <div>電話</div>
-            <div>家族</div>
           </div>
 
           @if (filterDankaList.length === 0) {
@@ -64,11 +63,16 @@
 
           @for (danka of filterDankaList; track danka.id) {
             <a class="danka-table-row" [routerLink]="['/danka-detail', danka.id]">
-              <div class="strong">{{ danka.householder }}</div>
-              <div>{{ danka.householdName }}</div>
+              <div>
+                <p class="danka-name">{{ danka.householdName }}</p>
+                <p class="danka-sub">{{ danka.householdFurigana || 'ふりがな未登録' }}</p>
+              </div>
+              <div>
+                <p class="danka-name">{{ danka.householder }}</p>
+                <p class="danka-sub">{{ danka.householderFurigana || 'ふりがな未登録' }}</p>
+              </div>
               <div>{{ danka.address }}</div>
               <div>{{ danka.phones[0]?.tel }}</div>
-              <div>{{ danka.phones.length }}件</div>
             </a>
           }
         </div>

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

@@ -43,7 +43,7 @@
 
 .search-area {
   display: grid;
-  grid-template-columns: 1fr 140px 190px 110px;
+  grid-template-columns: 1fr 140px 140px;
   gap: 18px;
   align-items: center;
   margin-bottom: 18px;
@@ -90,33 +90,21 @@
 .new-button,
 .condition-button {
   height: 58px;
-  border: 2px solid #d8caba;
+  border: 2px solid #8a6543;
   border-radius: 8px;
-  color: #2f2720;
+  background: #ffffff;
+  color: #8a6543;
   font-size: 18px;
   font-weight: 800;
   cursor: pointer;
   box-sizing: border-box;
 }
 
-.search-button {
-  background: #8a6543;
-  border-color: #8a6543;
-  color: #ffffff;
-}
-
-.new-button {
-  background: #e6d8c4;
-}
-
 .condition-button {
   background: #ffffff;
 }
 
-.search-button:hover {
-  background: #765639;
-}
-
+.search-button:hover,
 .new-button:hover,
 .condition-button:hover {
   background: #f6efe6;
@@ -178,59 +166,66 @@
 
 .list-content {
   position: relative;
-  padding-right: 172px;
 }
 
 .danka-table {
   width: 100%;
+  display: grid;
+  gap: 0;
+  border: 2px solid #d8c2aa;
+  border-radius: 8px;
+  overflow: hidden;
 }
 
 .danka-table-header,
 .danka-table-row {
   display: grid;
-  grid-template-columns: 1.5fr 1.1fr 2.8fr 1.25fr 0.65fr;
+  grid-template-columns: 1.2fr 1.2fr 2.2fr 1fr;
   align-items: center;
-  column-gap: 16px;
+  justify-items: start;
+  gap: 12px;
+  text-align: left;
 }
 
 .danka-table-header {
-  min-height: 40px;
-  padding: 0 12px;
-  background: #eadfce;
-  border: 2px solid #d8caba;
-  border-radius: 6px;
+  min-height: 46px;
+  padding: 0 14px;
+  background: #efe4d6;
   box-sizing: border-box;
-  color: #5a4a3c;
-  font-size: 15px;
-  font-weight: 700;
+  color: #111111;
+  font-size: 14px;
+  font-weight: 800;
 }
 
 .danka-table-row {
-  min-height: 66px;
-  margin-top: 4px;
-  padding: 0 12px;
-  background: #fbf7f1;
-  border: 2px solid #d8caba;
-  border-radius: 8px;
+  min-height: 78px;
+  padding: 10px 14px;
+  background: #fffdf9;
+  border-top: 1px solid #d8c2aa;
   box-sizing: border-box;
-  color: #2f2720;
-  font-size: 16px;
+  color: #111111;
+  font-size: 15px;
   text-decoration: none;
 }
 
 .danka-table-row:hover {
-  background: #f3eadc;
+  background: #fff8ee;
 }
 
-.danka-table-row .strong {
+.danka-name {
+  margin: 0;
   font-weight: 800;
 }
 
+.danka-sub {
+  margin: 4px 0 0;
+  color: #111111;
+  font-size: 13px;
+  line-height: 1.35;
+}
+
 .empty-message {
-  margin-top: 16px;
   padding: 24px;
-  border: 2px dashed #d8caba;
-  border-radius: 12px;
   background: #fffdf9;
   color: #7b6b5c;
   font-size: 16px;

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

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

src/app/pages/dashboard/dashboard.html

@@ -51,7 +51,7 @@
 
         <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>

src/app/pages/event/event.html

@@ -0,0 +1,130 @@
+<app-header></app-header>
+
+<div class="event-page">
+  <app-side-menu></app-side-menu>
+
+  <main class="event-main">
+    <section class="event-panel">
+      <div class="page-title-row">
+        <div class="title-filter-area">
+          <h1>行事対象者一覧</h1>
+
+          <div class="filter-row">
+            <div class="filter-field">
+              <label for="targetYear">年度</label>
+              <select
+                id="targetYear"
+                [(ngModel)]="targetYear"
+                (ngModelChange)="createEventTargetList()"
+              >
+                @for (year of yearOptions; track year) {
+                  <option [ngValue]="year">{{ year }}年度</option>
+                }
+              </select>
+            </div>
+
+            <div class="filter-field">
+              <label for="eventType">行事</label>
+              <select
+                id="eventType"
+                [(ngModel)]="selectedEventType"
+                (ngModelChange)="changeEventType($event)"
+              >
+                @for (filter of eventTypeFilters; track filter.value) {
+                  <option [ngValue]="filter.value">{{ filter.label }}</option>
+                }
+              </select>
+            </div>
+
+            <div class="filter-field">
+              <label for="eventStatus">状態</label>
+              <select id="eventStatus" [(ngModel)]="selectedStatus">
+                @for (filter of statusFilters; track filter.value) {
+                  <option [ngValue]="filter.value">{{ filter.label }}</option>
+                }
+              </select>
+            </div>
+
+            <div class="search-field">
+              <label for="eventSearch">検索</label>
+              <input
+                id="eventSearch"
+                type="text"
+                [(ngModel)]="searchKeyword"
+                placeholder="氏名・ふりがな・檀家名で検索"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="list-header-row">
+        <h2>対象 {{ filteredEventTargets.length }} 名</h2>
+
+        <p>並び順: 行事 / 年齢 / 氏名</p>
+      </div>
+
+      <section class="event-table-section">
+        <div class="event-table">
+          <div class="event-table-header">
+            <div>氏名・ふりがな</div>
+            <div>檀家名</div>
+            <div>続柄</div>
+            <div>生年月日・年齢</div>
+            <div>対象行事</div>
+            <div>備考</div>
+            <div>状態</div>
+          </div>
+
+          @if (filteredEventTargets.length > 0) {
+            @for (target of filteredEventTargets; track target.id) {
+              <div class="event-table-row">
+                <div>
+                  <p class="person-name">{{ target.name }}</p>
+                  <p class="person-sub">{{ target.furigana || 'ふりがな未登録' }}</p>
+                </div>
+                <div>
+                  {{ target.householdName }}
+                </div>
+                <div>
+                  {{ target.relationship }}
+                </div>
+                <div>
+                  <p class="person-date">{{ target.birthDate }}</p>
+                  <p class="person-sub">{{ target.age }}歳</p>
+                </div>
+                <div class="event-type">
+                  {{ target.eventType }}
+                </div>
+                <div>
+                  {{ target.note || '' }}
+                </div>
+                <div>
+                  <select
+                    class="status-select"
+                    [class.sent]="target.status === '案内済'"
+                    [ngModel]="target.status"
+                    (ngModelChange)="changeStatus(target, $event)"
+                    aria-label="状態"
+                  >
+                    @for (status of eventStatuses; track status) {
+                      <option [value]="status">{{ status }}</option>
+                    }
+                  </select>
+                </div>
+              </div>
+            }
+          } @else {
+            <div class="empty-message">
+              @if (eventTargets.length > 0) {
+                検索条件に一致する行事対象者はありません。
+              } @else {
+                対象となる行事対象者はありません。
+              }
+            </div>
+          }
+        </div>
+      </section>
+    </section>
+  </main>
+</div>

src/app/pages/event/event.scss

@@ -0,0 +1,287 @@
+:host {
+  position: relative;
+  display: block;
+  min-height: 100vh;
+  background: #f4eee4;
+  color: #2f2720;
+}
+
+.event-page {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  background: #f4eee4;
+}
+
+.event-main {
+  flex: 1;
+  padding-right: 34px;
+  box-sizing: border-box;
+}
+
+.event-panel {
+  min-height: 650px;
+  padding: 26px 34px 36px;
+  background: #ffffff;
+  border: 2px solid #d8caba;
+  border-radius: 76px;
+  box-sizing: border-box;
+}
+
+.page-title-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 24px;
+  margin-bottom: 22px;
+}
+
+.title-filter-area {
+  display: grid;
+  gap: 12px;
+  min-width: 0;
+}
+
+.page-title-row h1 {
+  margin: 0;
+  color: #2f2720;
+  font-size: 32px;
+  line-height: 1.2;
+  font-weight: 800;
+  letter-spacing: 0.02em;
+}
+
+.filter-row {
+  display: flex;
+  align-items: flex-end;
+  gap: 14px 18px;
+  flex-wrap: wrap;
+  width: 100%;
+}
+
+.filter-field,
+.search-field {
+  display: grid;
+  gap: 6px;
+}
+
+.filter-field label,
+.search-field label {
+  color: #4b3c31;
+  font-size: 14px;
+  font-weight: 800;
+}
+
+.filter-field select,
+.search-field input {
+  height: 38px;
+  padding: 0 14px;
+  border: 2px solid #d8caba;
+  border-radius: 8px;
+  background: #fffdf9;
+  color: #2f2720;
+  font-size: 15px;
+  font-weight: 700;
+  box-sizing: border-box;
+  outline: none;
+}
+
+.filter-field select {
+  width: 148px;
+  cursor: pointer;
+}
+
+.search-field {
+  flex: 1 1 260px;
+  min-width: 260px;
+}
+
+.search-field input {
+  width: 100%;
+}
+
+.filter-field select:focus,
+.search-field input:focus {
+  border-color: #8a6543;
+  box-shadow: 0 0 0 3px rgba(138, 101, 67, 0.12);
+}
+
+.list-header-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  margin: 18px 0 10px;
+}
+
+.list-header-row h2 {
+  margin: 0;
+  color: #2f2720;
+  font-size: 26px;
+  font-weight: 800;
+}
+
+.list-header-row p {
+  margin: 0;
+  color: #7b6b5c;
+  font-size: 14px;
+}
+
+.event-table-section {
+  margin-top: 8px;
+}
+
+.event-table {
+  display: grid;
+  gap: 0;
+  border: 2px solid #d8c2aa;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.event-table-header,
+.event-table-row {
+  display: grid;
+  grid-template-columns: 1.25fr 0.95fr 0.68fr 0.95fr 0.82fr 1fr 96px;
+  align-items: center;
+  gap: 12px;
+}
+
+.event-table-header {
+  min-height: 46px;
+  padding: 0 14px;
+  background: #efe4d6;
+  color: #111111;
+  font-size: 14px;
+  font-weight: 800;
+  box-sizing: border-box;
+}
+
+.event-table-row {
+  min-height: 78px;
+  padding: 10px 14px;
+  border-top: 1px solid #d8c2aa;
+  background: #fffdf9;
+  color: #111111;
+  font-size: 15px;
+  box-sizing: border-box;
+}
+
+.event-table-row:hover {
+  background: #fff8ee;
+}
+
+.person-name,
+.event-type {
+  margin: 0;
+  font-weight: 800;
+}
+
+.person-sub,
+.person-date {
+  margin: 0;
+}
+
+.person-sub {
+  margin-top: 4px;
+  color: #111111;
+  font-size: 13px;
+  line-height: 1.35;
+}
+
+.person-date {
+  color: #111111;
+  font-size: 15px;
+}
+
+.event-type {
+  color: #111111;
+}
+
+.status-select {
+  width: 90px;
+  height: 34px;
+  padding: 0 10px;
+  border: 2px solid #d8caba;
+  border-radius: 8px;
+  background: #ffffff;
+  color: #111111;
+  font-size: 14px;
+  font-weight: 800;
+  box-sizing: border-box;
+  cursor: pointer;
+  outline: none;
+}
+
+.status-select.sent {
+  border-color: #8a6543;
+  background: #f1e7d8;
+  color: #111111;
+}
+
+.status-select:focus {
+  border-color: #8a6543;
+  box-shadow: 0 0 0 3px rgba(138, 101, 67, 0.15);
+}
+
+.empty-message {
+  min-height: 58px;
+  padding: 18px 20px;
+  background: #fffdf9;
+  color: #7b6b5c;
+  font-size: 15px;
+  font-weight: 700;
+  box-sizing: border-box;
+}
+
+@media (max-width: 1100px) {
+  .page-title-row {
+    flex-direction: column;
+  }
+
+  .event-table {
+    overflow-x: auto;
+  }
+
+  .event-table-header,
+  .event-table-row {
+    min-width: 980px;
+  }
+}
+
+@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;
+  }
+
+  .filter-row {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 14px;
+  }
+
+  .filter-field,
+  .filter-field select,
+  .search-field {
+    width: 100%;
+  }
+
+  .list-header-row {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 8px;
+  }
+}

src/app/pages/event/event.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EventPage } from './event';
+
+describe('EventPage', () => {
+  let component: EventPage;
+  let fixture: ComponentFixture<EventPage>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [EventPage],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(EventPage);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/event/event.ts

@@ -0,0 +1,157 @@
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { DankaService } from '../../services/dankaService';
+import { FamilyService } from '../../services/family-service';
+import { EventStatus, EventTarget, EventType } from '../../models/event';
+import { AppHeader } from '../../share/header/app-header';
+import { AppSideMenu } from '../../share/side-menu/app-side-menu';
+
+@Component({
+  selector: 'app-event',
+  imports: [AppHeader, AppSideMenu, FormsModule],
+  templateUrl: './event.html',
+  styleUrl: './event.scss',
+})
+export class EventPage {
+  eventTargets: EventTarget[] = [];
+  targetYear: number = new Date().getFullYear();
+  selectedEventType: EventType | 'all' = 'all';
+  selectedStatus: EventStatus | 'all' = 'all';
+  searchKeyword = '';
+  eventStatuses: EventStatus[] = ['未案内', '案内済'];
+  yearOptions: number[] = [
+    this.targetYear - 1,
+    this.targetYear,
+    this.targetYear + 1,
+    this.targetYear + 2,
+  ];
+  eventTypeFilters: { label: string; value: EventType | 'all' }[] = [
+    { label: 'すべて', value: 'all' },
+    { label: '稚児行列', value: '稚児行列' },
+    { label: '七五三', value: '七五三' },
+    { label: '成人式', value: '成人式' },
+    { label: '米寿', value: '米寿' },
+  ];
+  statusFilters: { label: string; value: EventStatus | 'all' }[] = [
+    { label: 'すべて', value: 'all' },
+    { label: '未案内', value: '未案内' },
+    { label: '案内済', value: '案内済' },
+  ];
+  private statusByTargetId: Record<string, EventStatus> = {};
+
+  constructor(
+    private dankaService: DankaService,
+    private familyService: FamilyService,
+  ) {
+    this.createEventTargetList();
+  }
+
+  createEventTargetList(): void {
+    this.eventTargets = [];
+
+    this.familyService.getFamilyList().forEach((family) => {
+      const birthDate = this.parseDate(family.birthDate);
+      if (!birthDate) {
+        return;
+      }
+
+      const age = this.targetYear - birthDate.getFullYear();
+      const eventTypes = this.getEventTypes(age);
+      if (eventTypes.length === 0) {
+        return;
+      }
+
+      const danka = this.dankaService.getDankaById(family.dankaId);
+      eventTypes.forEach((eventType) => {
+        if (this.selectedEventType !== 'all' && this.selectedEventType !== eventType) {
+          return;
+        }
+
+        const id = `${family.id}-${eventType}`;
+        this.eventTargets.push({
+          id,
+          dankaId: family.dankaId,
+          name: family.name,
+          furigana: family.furigana,
+          householdName: danka?.householdName ?? '不明',
+          relationship: family.relationship || '未登録',
+          birthDate: family.birthDate,
+          age,
+          eventType,
+          note: family.note,
+          status: this.statusByTargetId[id] ?? (Number(family.id) % 2 === 0 ? '案内済' : '未案内'),
+        });
+      });
+    });
+
+    this.eventTargets.sort(
+      (a, b) =>
+        this.getEventSortOrder(a.eventType) - this.getEventSortOrder(b.eventType) ||
+        a.age - b.age ||
+        a.name.localeCompare(b.name, 'ja'),
+    );
+  }
+
+  changeEventType(eventType: EventType | 'all'): void {
+    this.selectedEventType = eventType;
+    this.createEventTargetList();
+  }
+
+  get filteredEventTargets(): EventTarget[] {
+    const keyword = this.searchKeyword.trim();
+
+    return this.eventTargets.filter((target) => {
+      const matchesStatus = this.selectedStatus === 'all' || target.status === this.selectedStatus;
+      const matchesKeyword =
+        !keyword ||
+        [
+          target.name,
+          target.furigana,
+          target.householdName,
+          target.relationship,
+          target.birthDate,
+          target.eventType,
+          target.note,
+          target.status,
+        ].some((value) => value.includes(keyword));
+
+      return matchesStatus && matchesKeyword;
+    });
+  }
+
+  changeStatus(target: EventTarget, status: EventStatus): void {
+    target.status = status;
+    this.statusByTargetId[target.id] = status;
+  }
+
+  private getEventTypes(age: number): EventType[] {
+    const eventTypes: EventType[] = [];
+
+    if (age >= 3 && age <= 12) {
+      eventTypes.push('稚児行列');
+    }
+    if ([3, 5, 7].includes(age)) {
+      eventTypes.push('七五三');
+    }
+    if (age === 20) {
+      eventTypes.push('成人式');
+    }
+    if (age === 88) {
+      eventTypes.push('米寿');
+    }
+
+    return eventTypes;
+  }
+
+  private getEventSortOrder(eventType: EventType): number {
+    return ['稚児行列', '七五三', '成人式', '米寿'].indexOf(eventType);
+  }
+
+  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

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

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

@@ -10,9 +10,9 @@
       <div class="page-title-area">
         <h1>
           @if (kakocho) {
-            故人を編集
+            故人編集
           } @else {
-            故人を追加
+            故人追加
           }
         </h1>
       </div>
@@ -130,8 +130,7 @@
           <button
             type="button"
             class="cancel-button"
-            [routerLink]="['/kakocho-list']"
-          >
+            (click)="cancelKakochoEdit()">
             キャンセル
           </button>
 
@@ -150,4 +149,4 @@
 
     </section>
   </main>
-</div>
+</div>

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

@@ -105,9 +105,9 @@
   font-weight: 800;
 }
 
-.form-row input {
+.form-row input,
+.form-row textarea {
   width: 100%;
-  height: 54px;
   padding: 0 14px;
   border: 2px solid #d8caba;
   border-radius: 8px;
@@ -119,7 +119,18 @@
   outline: none;
 }
 
-.form-row input:focus {
+.form-row input {
+  height: 54px;
+}
+
+.form-row textarea {
+  min-height: 108px;
+  padding-top: 14px;
+  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);
 }

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

@@ -9,7 +9,6 @@ import {
 import {
   ActivatedRoute,
   Router,
-  RouterLink,
 } from '@angular/router';
 
 import { AppHeader } from '../../share/header/app-header';
@@ -27,17 +26,15 @@ import { Kakocho } from '../../models/kakocho';
     AppHeader,
     AppSideMenu,
     ReactiveFormsModule,
-    RouterLink,
   ],
   templateUrl: './kakocho-edit.html',
   styleUrl: './kakocho-edit.scss',
 })
 export class KakochoEdit {
-
   danka?: Danka;
   kakocho?: Kakocho;
-
   kakochoForm: FormGroup;
+  dankaId: string;
 
   constructor(
     private fb: FormBuilder,
@@ -60,6 +57,7 @@ export class KakochoEdit {
 
     // 檀家ID
     const dankaId = this.route.snapshot.params['dankaId'];
+    this.dankaId = this.route.snapshot.params['dankaId'];
 
     if (dankaId) {
       this.danka =
@@ -137,22 +135,19 @@ export class KakochoEdit {
     this.router.navigate([
       '/danka-detail',
       this.danka?.id,
-    ]);
+    ], { queryParams: { tab: 'kakocho' } });
   }
 
   deleteKakocho(): void {
-
     if (!this.kakocho) {
       return;
     }
 
-    this.kakochoService.deleteKakocho(
-      this.kakocho.id
-    );
+    this.kakochoService.deleteKakocho(this.kakocho.id);
 
-    this.router.navigate([
-      '/danka-detail',
-      this.danka?.id,
-    ]);
+    this.router.navigate(['/danka-detail', this.danka?.id], { queryParams: { tab: 'kakocho' } });
   }
-}
+
+  cancelKakochoEdit() {
+    this.router.navigate(['/danka-detail', this.danka?.id], { queryParams: { tab: 'kakocho' } });  }
+}

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

@@ -11,34 +11,47 @@
           <h1>年次法要（回忌）一覧</h1>
 
           <div class="filter-row">
-            <div class="year-filter">
+            <div class="filter-field">
               <label for="targetYear">対象年</label>
-              <input id="targetYear" type="number" [(ngModel)]="targetYear"/>
+              <select
+                id="targetYear"
+                [(ngModel)]="targetYear"
+                (ngModelChange)="createMemorialList()"
+              >
+                @for (year of yearOptions; track year) {
+                  <option [ngValue]="year">{{ year }}年度</option>
+                }
+              </select>
             </div>
 
-            <div class="memorial-filter">
-              <span>回忌</span>
-              @for (filter of memorialTypeFilters; track filter.value) {
-                <button
-                  type="button"
-                  class="filter-button"
-                  [class.active]="selectedMemorialType === filter.value"
-                  (click)="changeMemorialType(filter.value)"
-                >
-                  {{ filter.label }}
-                </button>
-              }
+            <div class="filter-field">
+              <label for="memorialType">回忌</label>
+              <select
+                id="memorialType"
+                [(ngModel)]="selectedMemorialType"
+                (ngModelChange)="changeMemorialType($event)"
+              >
+                @for (filter of memorialTypeFilters; track filter.value) {
+                  <option [ngValue]="filter.value">{{ filter.label }}</option>
+                }
+              </select>
+            </div>
+
+            <div class="search-field">
+              <label for="memorialSearch">検索</label>
+              <input
+                id="memorialSearch"
+                type="text"
+                [(ngModel)]="searchKeyword"
+                placeholder="戒名・俗名・檀家名で検索"
+              />
             </div>
           </div>
         </div>
-
-        <button type="button" class="reload-button" (click)="createMemorialList()">
-          再表示
-        </button>
       </div>
 
       <div class="list-header-row">
-        <h2>対象 {{ memorialList.length }} 名</h2>
+        <h2>対象 {{ filteredMemorialList.length }} 名</h2>
 
         <p>並び順: 没年月日 / 氏名</p>
       </div>
@@ -52,17 +65,19 @@
             <div>関係</div>
             <div>檀家（世帯）</div>
             <div>回忌</div>
+            <div>備考</div>
             <div>詳細</div>
           </div>
 
-          @if (memorialList.length > 0) {
-            @for (memorial of memorialList; track memorial.id) {
+          @if (filteredMemorialList.length > 0) {
+            @for (memorial of filteredMemorialList; track memorial.id) {
               <div class="memorial-table-row">
                 <div class="person-name">
                   {{ memorial.kaimyo }}
                 </div>
                 <div>
-                  {{ memorial.name }}
+                  <p class="person-name">{{ memorial.name }}</p>
+                  <p class="person-sub">俗名</p>
                 </div>
                 <div>
                   {{ formatDeathDate(memorial.deathDate) }}
@@ -76,6 +91,9 @@
                 <div class="memorial-type">
                   {{ memorial.memorialType }}
                 </div>
+                <div>
+                  {{ memorial.note || '' }}
+                </div>
                 <div>
                   <a class="detail-link" [routerLink]="['/danka-detail', memorial.dankaId]" [queryParams]="{tab: 'kakocho'}">
                     開く
@@ -85,7 +103,11 @@
             }
           } @else {
             <div class="empty-message">
-              対象となる法要はありません。
+              @if (memorialList.length > 0) {
+                検索条件に一致する法要はありません。
+              } @else {
+                対象となる法要はありません。
+              }
             </div>
           }
         </div>

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

@@ -38,7 +38,8 @@
 
 .title-filter-area {
   display: grid;
-  gap: 4px;
+  gap: 12px;
+  min-width: 0;
 }
 
 .page-title-row h1 {
@@ -52,82 +53,61 @@
 
 .filter-row {
   display: flex;
-  align-items: center;
-  gap: 28px;
+  align-items: flex-end;
+  gap: 14px 18px;
   flex-wrap: wrap;
+  width: 100%;
 }
 
-.year-filter {
-  display: flex;
-  align-items: center;
-  gap: 12px;
+.filter-field,
+.search-field {
+  display: grid;
+  gap: 6px;
 }
 
-.year-filter label,
-.memorial-filter span {
+.filter-field label,
+.search-field label {
   color: #4b3c31;
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 800;
 }
 
-.year-filter input {
-  width: 96px;
-  height: 48px;
+.filter-field select,
+.search-field input {
+  height: 38px;
   padding: 0 14px;
   border: 2px solid #d8caba;
   border-radius: 8px;
   background: #fffdf9;
   color: #2f2720;
-  font-size: 17px;
+  font-size: 15px;
   font-weight: 700;
   box-sizing: border-box;
+  outline: none;
 }
 
-.memorial-filter {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.filter-button {
-  width: 108px;
-  height: 40px;
-  border: 2px solid #d8caba;
-  border-radius: 6px;
-  background: #f1e7d8;
-  color: #2f2720;
-  font-size: 15px;
-  font-weight: 700;
+.filter-field select {
+  width: 148px;
   cursor: pointer;
-  box-sizing: border-box;
 }
 
-.filter-button:hover {
-  background: #eadfce;
+.search-field {
+  flex: 1 1 260px;
+  min-width: 260px;
 }
 
-.filter-button.active {
-  background: #8a6543;
-  border-color: #8a6543;
-  color: #ffffff;
+.search-field input {
+  width: 100%;
 }
 
-.reload-button {
-  width: 120px;
-  height: 48px;
-  margin-top: 30px;
-  border: 2px solid #8a6543;
-  border-radius: 6px;
-  background: #8a6543;
-  color: #ffffff;
-  font-size: 17px;
-  font-weight: 800;
-  cursor: pointer;
-  box-sizing: border-box;
+.filter-field select:focus {
+  border-color: #8a6543;
+  box-shadow: 0 0 0 3px rgba(138, 101, 67, 0.12);
 }
 
-.reload-button:hover {
-  background: #765639;
+.search-field input:focus {
+  border-color: #8a6543;
+  box-shadow: 0 0 0 3px rgba(138, 101, 67, 0.12);
 }
 
 .list-header-row {
@@ -156,69 +136,85 @@
 
 .memorial-table {
   display: grid;
-  gap: 4px;
+  gap: 0;
+  border: 2px solid #d8c2aa;
+  border-radius: 8px;
+  overflow: hidden;
 }
 
 .memorial-table-header,
 .memorial-table-row {
   display: grid;
-  grid-template-columns: 1.4fr 1.2fr 0.9fr 0.8fr 1.2fr 0.8fr 0.7fr;
+  grid-template-columns: 1.2fr 0.95fr 0.8fr 0.6fr 0.95fr 0.65fr 0.95fr 64px;
   align-items: center;
-  column-gap: 12px;
+  gap: 12px;
 }
 
 .memorial-table-header {
-  min-height: 38px;
-  padding: 0 12px;
-  border: 2px solid #d8caba;
-  border-radius: 8px;
-  background: #eadfce;
-  color: #5a4a3c;
-  font-size: 15px;
+  min-height: 46px;
+  padding: 0 14px;
+  background: #efe4d6;
+  color: #111111;
+  font-size: 14px;
   font-weight: 800;
   box-sizing: border-box;
 }
 
 .memorial-table-row {
-  min-height: 58px;
-  padding: 0 12px;
-  border: 2px solid #d8caba;
-  border-radius: 10px;
+  min-height: 78px;
+  padding: 10px 14px;
+  border-top: 1px solid #d8c2aa;
   background: #fffdf9;
-  color: #2f2720;
-  font-size: 16px;
+  color: #111111;
+  font-size: 15px;
   box-sizing: border-box;
 }
 
 .memorial-table-row:hover {
-  background: #f6efe6;
+  background: #fff8ee;
 }
 
 .person-name {
+  margin: 0;
   font-weight: 800;
 }
 
+.person-sub {
+  margin: 4px 0 0;
+  color: #111111;
+  font-size: 13px;
+  line-height: 1.35;
+}
+
 .memorial-type {
-  color: #8a6543;
+  color: #111111;
   font-weight: 800;
 }
 
 .detail-link {
-  color: #3f6f45;
-  font-size: 15px;
+  width: 64px;
+  height: 34px;
+  border: 2px solid #8a6543;
+  border-radius: 6px;
+  background: #ffffff;
+  color: #8a6543;
+  font-size: 14px;
   font-weight: 800;
   text-decoration: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
 }
 
 .detail-link:hover {
-  text-decoration: underline;
+  background: #f6efe6;
+  text-decoration: none;
 }
 
 .empty-message {
   min-height: 58px;
   padding: 18px 20px;
-  border: 2px solid #d8caba;
-  border-radius: 10px;
   background: #fffdf9;
   color: #7b6b5c;
   font-size: 15px;
@@ -226,43 +222,11 @@
   box-sizing: border-box;
 }
 
-.notice-box {
-  margin-top: 26px;
-  padding: 18px 26px;
-  border: 2px solid #d8caba;
-  border-radius: 10px;
-  background: #fffdf9;
-  box-sizing: border-box;
-}
-
-.notice-box p {
-  margin: 0;
-  color: #7b6b5c;
-  font-size: 15px;
-  line-height: 1.7;
-}
-
-.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;
-}
-
 @media (max-width: 1100px) {
   .page-title-row {
     flex-direction: column;
   }
 
-  .reload-button {
-    margin-top: 0;
-  }
-
   .memorial-table {
     overflow-x: auto;
   }
@@ -298,8 +262,10 @@
     gap: 14px;
   }
 
-  .memorial-filter {
-    flex-wrap: wrap;
+  .filter-field,
+  .filter-field select,
+  .search-field {
+    width: 100%;
   }
 
   .list-header-row {
@@ -308,8 +274,4 @@
     gap: 8px;
   }
 
-  .bottom-note {
-    width: auto;
-    margin: 10px 20px 22px;
-  }
 }

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

@@ -17,6 +17,13 @@ export class MemorialList {
   memorialList: Memorial[] = [];
   targetYear: number = new Date().getFullYear();
   selectedMemorialType = 'all';
+  searchKeyword = '';
+  yearOptions: number[] = [
+    this.targetYear - 1,
+    this.targetYear,
+    this.targetYear + 1,
+    this.targetYear + 2,
+  ];
   memorialTypeFilters = [
     { label: 'すべて', value: 'all' },
     { label: '一周忌', value: '一周忌' },
@@ -25,6 +32,14 @@ export class MemorialList {
     { label: '十三回忌', value: '十三回忌' },
     { label: '十七回忌', value: '十七回忌' },
     { label: '二十三回忌', value: '二十三回忌' },
+    { label: '二十五回忌', value: '二十五回忌' },
+    { label: '二十七回忌', value: '二十七回忌' },
+    { label: '三十三回忌', value: '三十三回忌' },
+    { label: '三十七回忌', value: '三十七回忌' },
+    { label: '四十三回忌', value: '四十三回忌' },
+    { label: '四十七回忌', value: '四十七回忌' },
+    { label: '五十回忌', value: '五十回忌' },
+    { label: '百回忌', value: '百回忌' },
   ];
 
   constructor(
@@ -57,6 +72,7 @@ export class MemorialList {
         householdName: danka?.householdName ?? '不明',
         deathDate: kakocho.deathDate,
         memorialType: memorialType,
+        note: kakocho.note,
       };
       this.memorialList.push(memorialTarget);
     });
@@ -75,6 +91,25 @@ export class MemorialList {
     this.createMemorialList();
   }
 
+  get filteredMemorialList(): Memorial[] {
+    const keyword = this.searchKeyword.trim();
+    if (!keyword) {
+      return this.memorialList;
+    }
+
+    return this.memorialList.filter((memorial) =>
+      [
+        memorial.kaimyo,
+        memorial.name,
+        memorial.deathDate,
+        memorial.relationship,
+        memorial.householdName,
+        memorial.memorialType,
+        memorial.note,
+      ].some((value) => value.includes(keyword)),
+    );
+  }
+
   formatDeathDate(deathDate: string): string {
     const [, month, day] = deathDate.split('-').map(Number);
     if (!month || !day) {
@@ -98,6 +133,22 @@ export class MemorialList {
         return '十七回忌';
       case 22:
         return '二十三回忌';
+      case 24:
+        return '二十五回忌';
+      case 26:
+        return '二十七回忌';
+      case 32:
+        return '三十三回忌';
+      case 36:
+        return '三十七回忌';
+      case 42:
+        return '四十三回忌';
+      case 46:
+        return '四十七回忌';
+      case 49:
+        return '五十回忌';
+      case 99:
+        return '百回忌';
       default:
         return '';
     }

src/app/pages/search/search.html

@@ -53,7 +53,7 @@
                     {{ danka.householdName }}
                   </div>
                   <div>
-                    世帯主: {{ danka.householder }}
+                    施主名: {{ danka.householder }}
                   </div>
                   <div>
                     住所: {{ danka.address }}

src/app/services/dankaService.ts

@@ -9,9 +9,12 @@ export class DankaService {
     {
       id: '1',
       householdName: '鈴木家',
+      householdFurigana: 'すずきけ',
       householder: '鈴木 太郎',
+      householderFurigana: 'すずき たろう',
       postalCode: '123-4567',
       address: '市内 1-2-3',
+      note: '寺報送付あり。年忌法要の案内は施主へ連絡。',
       updatedAt: '2026-05-28',
       phones: [
         {
@@ -20,16 +23,19 @@ export class DankaService {
         },
         {
           tel: '090-1234-5678',
-          note: '世帯主',
+          note: '施主',
         },
       ],
     },
     {
       id: '2',
       householdName: '古田家',
+      householdFurigana: 'ふるたけ',
       householder: '古田 太郎',
+      householderFurigana: 'ふるた たろう',
       postalCode: '234-4567',
       address: '市内 1-2-3',
+      note: '電話連絡を優先。',
       updatedAt: '2026-05-28',
       phones: [
         {
@@ -38,7 +44,7 @@ export class DankaService {
         },
         {
           tel: '080-7890-4567',
-          note: '世帯主',
+          note: '施主',
         },
       ],
     }

src/app/services/family-service.ts

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