[add]

src/app/models/event.ts

@@ -6,6 +6,7 @@ export interface EventTarget {
   id: string;
   dankaId: string;
   name: string;
+  furigana: string;
   householdName: string;
   relationship: string;
   birthDate: string;

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

@@ -41,6 +41,15 @@
                 過去帳
               </button>
 
+              <button
+                type="button"
+                class="tab-button"
+                [class.active]="selectedTab === 'event'"
+                (click)="selectedTab = 'event'"
+              >
+                行事
+              </button>
+
               <button
                 type="button"
                 class="tab-button"
@@ -81,7 +90,7 @@
           }
         </div>
 
-        @if (selectedTab === 'basic' || selectedTab === 'kakocho') {
+        @if (selectedTab === 'basic') {
           <section class="family-summary">
             @if (selectedTab === 'basic') {
               <div class="family-name-area">
@@ -90,11 +99,6 @@
               </div>
             }
 
-            @if (selectedTab === 'kakocho') {
-              <div class="family-name-area">
-                <p class="family-name">{{ danka.householdName }}の過去帳{{ kakocholist.length }} 名</p>
-              </div>
-            }
           </section>
         }
 
@@ -229,43 +233,46 @@
 
             <section class="family-table-section">
               @if (filteredFamilies.length > 0) {
-                <div class="family-table">
+                <div class="family-table family-member-table">
                   <div class="family-table-header">
-                    <div>氏名</div>
-                    <div>ふりがな</div>
-                    <div>生年月日</div>
-                    <div>年齢</div>
-                    <div>続柄</div>
+                    <div>氏名・ふりがな</div>
+                    <div>関係</div>
+                    <div>生年月日・年齢</div>
+                    <div>今年の行事</div>
                     <div>備考</div>
                     <div>操作</div>
                   </div>
 
                   @for (family of filteredFamilies; track family.id) {
                     <div class="family-table-row">
-                      <div class="family-person-name">
-                        {{ family.name }}
-                      </div>
-
                       <div>
-                        {{ family.furigana }}
+                        <p class="family-person-name">{{ family.name }}</p>
+                        <p class="family-person-sub">{{ family.furigana || 'ふりがな未登録' }}</p>
                       </div>
 
                       <div>
-                        {{ family.birthDate || '未登録' }}
+                        {{ family.relationship || '未登録' }}
                       </div>
 
                       <div>
-                        {{ getAge(family.birthDate) }}
+                        <p class="family-person-date">{{ family.birthDate || '未登録' }}</p>
+                        <p class="family-person-sub">{{ getAge(family.birthDate) }}歳</p>
                       </div>
 
                       <div>
-                        {{ family.relationship || '未登録' }}
+                        {{ getFamilyEventLabels(family) }}
                       </div>
 
                       <div>
                         {{ family.note || '' }}
                       </div>
                       <div class="family-table-action">
+                        <a
+                          class="family-edit-link"
+                          [routerLink]="['/danka', danka.id, 'kakocho-new']"
+                        >
+                          故人登録
+                        </a>
                         <a
                           class="family-edit-link"
                           [routerLink]="['/danka', danka.id, 'family', family.id, 'edit']"
@@ -295,62 +302,144 @@
               <h2>過去帳</h2>
             </div>
 
-            <p class="empty-family-message">
-              @if (kakocholist.length > 0) {
-                <div class="family-table">
+            @if (kakocholist.length > 0) {
+              <div class="family-table family-member-table kakocho-member-table">
+                <div class="family-table-header">
+                  <div>戒名</div>
+                  <div>俗名・ふりがな</div>
+                  <div>没年月日・享年</div>
+                  <div>続柄</div>
+                  <div>回忌</div>
+                  <div>備考</div>
+                  <div>操作</div>
+                </div>
+
+                @for (kakocho of kakocholist; track kakocho.id) {
+                  <div class="family-table-row">
+                    <div class="family-person-name">
+                      {{ kakocho.kaimyo }}
+                    </div>
+
+                    <div>
+                      <p class="family-person-name">{{ kakocho.name }}</p>
+                      <p class="family-person-sub">{{ kakocho.furigana || 'ふりがな未登録' }}</p>
+                    </div>
+
+                    <div>
+                      <p class="family-person-date">{{ formatDeathDateWithYear(kakocho.deathDate) }}</p>
+                      <p class="family-person-sub">享年 {{ kakocho.ageAtDeath || '未登録' }}</p>
+                    </div>
+
+                    <div>
+                      {{ kakocho.relationship }}
+                    </div>
+
+                    <div>
+                      {{ getKaiki(kakocho.deathDate) }}回忌
+                    </div>
+
+                    <div>
+                      {{ kakocho.note || '' }}
+                    </div>
+
+                    <div class="family-table-action">
+                      <a
+                        class="family-edit-link"
+                        [routerLink]="['/danka', danka.id, 'kakocho', kakocho.id, 'edit']"
+                      >
+                        編集
+                      </a>
+                    </div>
+                  </div>
+                }
+              </div>
+            } @else {
+              <div class="empty-family-message">
+                登録されている過去帳はありません。
+              </div>
+            }
+          </section>
+        }
+
+        @if (selectedTab === 'event') {
+          <section class="family-tab-content">
+            <div class="section-heading">
+              <h2>行事</h2>
+            </div>
+
+            <section class="family-list-summary">
+              <div class="family-search-box">
+                <span class="family-search-label">行事検索</span>
+                <input
+                  type="text"
+                  [(ngModel)]="eventSearchKeyword"
+                  placeholder="氏名・檀家名・続柄・対象行事・状態で検索"
+                />
+              </div>
+            </section>
+
+            <section class="family-table-section">
+              @if (filteredEventTargets.length > 0) {
+                <div class="family-table family-member-table event-member-table">
                   <div class="family-table-header">
-                    <div>戒名</div>
-                    <div>俗名</div>
-                    <div>没年月日</div>
+                    <div>氏名・ふりがな</div>
+                    <div>檀家名</div>
                     <div>続柄</div>
-                    <div>回忌</div>
-                    <div>備考</div>
-                    <div>操作</div>
+                    <div>生年月日・年齢</div>
+                    <div>対象行事</div>
+                    <div>状態</div>
                   </div>
 
-                  @for (kakocho of kakocholist; track kakocho.id) {
+                  @for (target of filteredEventTargets; track target.id) {
                     <div class="family-table-row">
-                      <div class="family-person-name">
-                        {{ kakocho.kaimyo }}
-                      </div>
-
                       <div>
-                        {{ kakocho.name }}
+                        <p class="family-person-name">{{ target.name }}</p>
+                        <p class="family-person-sub">{{ target.furigana || 'ふりがな未登録' }}</p>
                       </div>
 
                       <div>
-                        {{ formatDeathDateWithYear(kakocho.deathDate) }}
+                        {{ target.householdName }}
                       </div>
 
                       <div>
-                        {{ kakocho.relationship }}
+                        {{ target.relationship }}
                       </div>
 
                       <div>
-                        {{ getKaiki(kakocho.deathDate) }}回忌
+                        <p class="family-person-date">{{ target.birthDate }}</p>
+                        <p class="family-person-sub">{{ target.age }}歳</p>
                       </div>
 
                       <div>
-                        {{ kakocho.note || '' }}
+                        {{ target.eventType }}
                       </div>
 
-                      <div class="family-table-action">
-                        <a
-                          class="family-edit-link"
-                          [routerLink]="['/danka', danka.id, 'kakocho', kakocho.id, 'edit']"
+                      <div>
+                        <select
+                          class="event-status-select"
+                          [class.sent]="target.status === '案内済'"
+                          [ngModel]="target.status"
+                          (ngModelChange)="changeEventStatus(target, $event)"
+                          aria-label="状態"
                         >
-                          編集
-                        </a>
+                          @for (status of eventStatuses; track status) {
+                            <option [value]="status">{{ status }}</option>
+                          }
+                        </select>
                       </div>
                     </div>
                   }
                 </div>
               } @else {
                 <div class="empty-family-message">
-                  登録されている家族情報はありません。
+                  @if (eventTargets.length > 0) {
+                    検索条件に一致する行事対象者はありません。
+                  } @else {
+                    対象となる行事対象者はありません。
+                  }
                 </div>
               }
-            </p>
+            </section>
           </section>
         }
 

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

@@ -534,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;
@@ -541,7 +567,7 @@
   border-radius: 10px;
   font-size: 14px;
   font-weight: 700;
-  color: #5d3b24;
+  color: #111111;
 }
 
 .family-table-row {
@@ -551,7 +577,7 @@
   border: 2px solid #d8c2aa;
   border-radius: 10px;
   font-size: 15px;
-  color: #2f2923;
+  color: #111111;
 }
 
 .family-table-row:hover {
@@ -563,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 {
@@ -607,6 +714,16 @@
   margin-top: 24px;
 }
 
+.coming-soon-section .section-heading {
+  margin-bottom: 16px;
+
+  h2 {
+    margin: 0;
+    font-size: 20px;
+    font-weight: 700;
+  }
+}
+
 /* =========================
    家系図タブ
 ========================= */

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

@@ -11,6 +11,7 @@ import { AppHeader } from '../../share/header/app-header';
 import { AppSideMenu } from '../../share/side-menu/app-side-menu';
 import { MarriageRelationService } from '../../services/marriage-relation-service';
 import { FormsModule } from '@angular/forms';
+import { EventStatus, EventTarget, EventType } from '../../models/event';
 
 interface NextMemorial {
   name: string;
@@ -33,8 +34,11 @@ export class DankaDetail {
   nextMemorial: NextMemorial | undefined;
   currentYear = new Date().getFullYear();
   familySearchKeyword = '';
+  eventSearchKeyword = '';
+  eventStatuses: EventStatus[] = ['未案内', '案内済'];
+  private eventStatusByTargetId: Record<string, EventStatus> = {};
 
-  selectedTab: 'basic' | 'family' | 'kakocho' | 'familyTree' = 'basic';
+  selectedTab: 'basic' | 'family' | 'kakocho' | 'event' | 'familyTree' = 'basic';
   selectedFamily: Family | undefined = undefined;
 
   constructor(
@@ -49,6 +53,8 @@ export class DankaDetail {
       this.selectedTab = 'family';
     } else if (tab === 'kakocho') {
       this.selectedTab = 'kakocho';
+    } else if (tab === 'event') {
+      this.selectedTab = 'event';
     } else if (tab === 'familyTree') {
       this.selectedTab = 'familyTree';
     }
@@ -99,6 +105,80 @@ export class DankaDetail {
     );
   }
 
+  getFamilyEventLabels(family: Family): string {
+    const birthDate = this.parseDate(family.birthDate);
+    if (!birthDate) {
+      return '-';
+    }
+
+    const age = this.currentYear - birthDate.getFullYear();
+    const eventTypes = this.getEventTypes(age);
+    return eventTypes.length > 0 ? eventTypes.join('、') : '-';
+  }
+
+  get eventTargets(): EventTarget[] {
+    if (!this.danka) {
+      return [];
+    }
+
+    return this.families
+      .flatMap((family) => {
+        const birthDate = this.parseDate(family.birthDate);
+        if (!birthDate) {
+          return [];
+        }
+
+        const age = this.currentYear - birthDate.getFullYear();
+        return this.getEventTypes(age).map((eventType) => {
+          const id = `${family.id}-${eventType}`;
+          return {
+            id,
+            dankaId: family.dankaId,
+            name: family.name,
+            furigana: family.furigana,
+            householdName: this.danka?.householdName ?? '不明',
+            relationship: family.relationship || '未登録',
+            birthDate: family.birthDate,
+            age,
+            eventType,
+            status:
+              this.eventStatusByTargetId[id] ?? (Number(family.id) % 2 === 0 ? '案内済' : '未案内'),
+          };
+        });
+      })
+      .sort(
+        (a, b) =>
+          this.getEventSortOrder(a.eventType) - this.getEventSortOrder(b.eventType) ||
+          a.age - b.age ||
+          a.name.localeCompare(b.name, 'ja'),
+      );
+  }
+
+  get filteredEventTargets(): EventTarget[] {
+    const keyword = this.eventSearchKeyword.trim();
+    if (!keyword) {
+      return this.eventTargets;
+    }
+
+    return this.eventTargets.filter((target) =>
+      [
+        target.name,
+        target.furigana,
+        target.householdName,
+        target.relationship,
+        target.birthDate,
+        target.age.toString(),
+        target.eventType,
+        target.status,
+      ].some((value) => value.includes(keyword)),
+    );
+  }
+
+  changeEventStatus(target: EventTarget, status: EventStatus): void {
+    target.status = status;
+    this.eventStatusByTargetId[target.id] = status;
+  }
+
   getKaiki(deathDate: string): number {
     return this.currentYear - new Date(deathDate).getFullYear() + 1;
   }
@@ -143,6 +223,29 @@ export class DankaDetail {
     }
   }
 
+  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 getNextMemorial(): NextMemorial | undefined {
     const today = this.toDateOnly(new Date());
 

src/app/pages/event/event.html

@@ -45,11 +45,10 @@
       <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>対象行事</div>
             <div>状態</div>
           </div>
@@ -57,8 +56,9 @@
           @if (eventTargets.length > 0) {
             @for (target of eventTargets; track target.id) {
               <div class="event-table-row">
-                <div class="person-name">
-                  {{ target.name }}
+                <div>
+                  <p class="person-name">{{ target.name }}</p>
+                  <p class="person-sub">{{ target.furigana || 'ふりがな未登録' }}</p>
                 </div>
                 <div>
                   {{ target.householdName }}
@@ -67,10 +67,8 @@
                   {{ target.relationship }}
                 </div>
                 <div>
-                  {{ target.birthDate }}
-                </div>
-                <div>
-                  {{ target.age }}歳
+                  <p class="person-date">{{ target.birthDate }}</p>
+                  <p class="person-sub">{{ target.age }}歳</p>
                 </div>
                 <div class="event-type">
                   {{ target.eventType }}

src/app/pages/event/event.scss

@@ -101,44 +101,44 @@
   min-width: 86px;
   height: 36px;
   padding: 0 12px;
-  border: 2px solid #d8caba;
+  border: 2px solid #8a6543;
   border-radius: 6px;
-  background: #f1e7d8;
-  color: #2f2720;
+  background: #ffffff;
+  color: #8a6543;
   font-size: 14px;
-  font-weight: 700;
+  font-weight: 800;
   white-space: nowrap;
   cursor: pointer;
   box-sizing: border-box;
 }
 
 .filter-button:hover {
-  background: #eadfce;
+  background: #f6efe6;
 }
 
 .filter-button.active {
-  background: #8a6543;
+  background: #f6efe6;
   border-color: #8a6543;
-  color: #ffffff;
+  color: #8a6543;
 }
 
 .reload-button {
   flex: 0 0 auto;
-  width: 120px;
-  height: 48px;
-  margin-top: 34px;
+  width: 140px;
+  height: 46px;
+  margin-top: 36px;
   border: 2px solid #8a6543;
   border-radius: 6px;
-  background: #8a6543;
-  color: #ffffff;
-  font-size: 17px;
+  background: #ffffff;
+  color: #8a6543;
+  font-size: 18px;
   font-weight: 800;
   cursor: pointer;
   box-sizing: border-box;
 }
 
 .reload-button:hover {
-  background: #765639;
+  background: #f6efe6;
 }
 
 .list-header-row {
@@ -167,62 +167,79 @@
 
 .event-table {
   display: grid;
-  gap: 4px;
+  gap: 0;
+  border: 2px solid #d8c2aa;
+  border-radius: 8px;
+  overflow: hidden;
 }
 
 .event-table-header,
 .event-table-row {
   display: grid;
-  grid-template-columns: 1.2fr 1.1fr 0.8fr 1fr 0.55fr 0.9fr 0.75fr;
+  grid-template-columns: 1.35fr 1.05fr 0.75fr 1.05fr 0.95fr 96px;
   align-items: center;
-  column-gap: 12px;
+  gap: 12px;
 }
 
 .event-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;
 }
 
 .event-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;
 }
 
 .event-table-row:hover {
-  background: #f6efe6;
+  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: #8a6543;
+  color: #111111;
 }
 
 .status-select {
-  width: 100%;
-  max-width: 112px;
+  width: 90px;
   height: 34px;
   padding: 0 10px;
   border: 2px solid #d8caba;
   border-radius: 8px;
   background: #ffffff;
-  color: #7b6b5c;
+  color: #111111;
   font-size: 14px;
   font-weight: 800;
   box-sizing: border-box;
@@ -233,7 +250,7 @@
 .status-select.sent {
   border-color: #8a6543;
   background: #f1e7d8;
-  color: #8a6543;
+  color: #111111;
 }
 
 .status-select:focus {
@@ -244,8 +261,6 @@
 .empty-message {
   min-height: 58px;
   padding: 18px 20px;
-  border: 2px solid #d8caba;
-  border-radius: 10px;
   background: #fffdf9;
   color: #7b6b5c;
   font-size: 15px;

src/app/pages/event/event.ts

@@ -59,6 +59,7 @@ export class EventPage {
           id,
           dankaId: family.dankaId,
           name: family.name,
+          furigana: family.furigana,
           householdName: danka?.householdName ?? '不明',
           relationship: family.relationship || '未登録',
           birthDate: family.birthDate,

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

@@ -18,16 +18,18 @@
 
             <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="memorial-filter-buttons">
+                @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>
             </div>
           </div>
         </div>
@@ -62,7 +64,8 @@
                   {{ memorial.kaimyo }}
                 </div>
                 <div>
-                  {{ memorial.name }}
+                  <p class="person-name">{{ memorial.name }}</p>
+                  <p class="person-sub">俗名</p>
                 </div>
                 <div>
                   {{ formatDeathDate(memorial.deathDate) }}

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

@@ -87,8 +87,9 @@
 .memorial-filter {
   display: flex;
   align-items: flex-start;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   gap: 8px;
+  max-width: 100%;
 }
 
 .memorial-filter span {
@@ -97,48 +98,59 @@
   align-items: center;
 }
 
+.memorial-filter-buttons {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: 6px;
+  max-width: 100%;
+  overflow-x: auto;
+  padding-bottom: 2px;
+}
+
 .filter-button {
-  min-width: 86px;
+  flex: 0 0 72px;
+  min-width: 72px;
   height: 36px;
-  padding: 0 12px;
-  border: 2px solid #d8caba;
+  padding: 0 6px;
+  border: 2px solid #8a6543;
   border-radius: 6px;
-  background: #f1e7d8;
-  color: #2f2720;
-  font-size: 14px;
-  font-weight: 700;
+  background: #ffffff;
+  color: #8a6543;
+  font-size: 12px;
+  font-weight: 800;
   white-space: nowrap;
   cursor: pointer;
   box-sizing: border-box;
 }
 
 .filter-button:hover {
-  background: #eadfce;
+  background: #f6efe6;
 }
 
 .filter-button.active {
-  background: #8a6543;
+  background: #f6efe6;
   border-color: #8a6543;
-  color: #ffffff;
+  color: #8a6543;
 }
 
 .reload-button {
   flex: 0 0 auto;
-  width: 120px;
-  height: 48px;
-  margin-top: 34px;
+  width: 140px;
+  height: 46px;
+  margin-top: 36px;
   border: 2px solid #8a6543;
   border-radius: 6px;
-  background: #8a6543;
-  color: #ffffff;
-  font-size: 17px;
+  background: #ffffff;
+  color: #8a6543;
+  font-size: 18px;
   font-weight: 800;
   cursor: pointer;
   box-sizing: border-box;
 }
 
 .reload-button:hover {
-  background: #765639;
+  background: #f6efe6;
 }
 
 .list-header-row {
@@ -167,7 +179,10 @@
 
 .memorial-table {
   display: grid;
-  gap: 4px;
+  gap: 0;
+  border: 2px solid #d8c2aa;
+  border-radius: 8px;
+  overflow: hidden;
 }
 
 .memorial-table-header,
@@ -175,61 +190,74 @@
   display: grid;
   grid-template-columns: 1.4fr 1.2fr 0.9fr 0.8fr 1.2fr 0.8fr 0.7fr;
   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;
@@ -237,34 +265,6 @@
   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;
@@ -319,8 +319,4 @@
     gap: 8px;
   }
 
-  .bottom-note {
-    width: auto;
-    margin: 10px 20px 22px;
-  }
 }