[add]

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

@@ -100,11 +100,11 @@
 
 .family-summary {
   min-height: 64px;
-  margin-bottom: 28px;
-  padding: 12px 22px;
+  margin-bottom: 22px;
+  padding: 14px 24px;
   border: 2px solid #d8caba;
-  border-radius: 14px;
-  background: #eadfce;
+  border-radius: 8px;
+  background: #f1e7d8;
   display: flex;
   align-items: center;
   box-sizing: border-box;
@@ -112,10 +112,23 @@
 
 .family-name-area {
   display: flex;
-  align-items: baseline;
+  align-items: center;
   gap: 18px;
 }
 
+.family-summary-mark {
+  width: 42px;
+  height: 42px;
+  border-radius: 999px;
+  background: #8a6543;
+  color: #ffffff;
+  font-weight: 800;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+}
+
 .family-name {
   margin: 0;
   color: #2f2720;
@@ -195,13 +208,17 @@
 
 .detail-content {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) 460px;
-  gap: 28px;
+  grid-template-columns: minmax(0, 1fr) 420px;
+  gap: 18px;
   align-items: start;
 }
 
 .basic-info-section {
-  padding-left: 0;
+  padding: 24px 20px 18px;
+  border: 2px solid #d8caba;
+  border-radius: 12px;
+  background: #fffdf9;
+  box-sizing: border-box;
 }
 
 .section-heading {
@@ -226,17 +243,27 @@
 }
 
 .info-pair-row {
+  border-top: 1px solid #eadfce;
+}
+
+.info-pair-row:first-child {
+  border-top: 0;
+}
+
+.info-two-column {
   display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 14px;
-  margin-top: 10px;
+  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.85fr);
+  gap: 18px;
 }
 
 .info-row {
   display: grid;
-  grid-template-columns: 96px 1fr;
+  grid-template-columns: 154px 1fr;
   align-items: center;
   margin-top: 0;
+  min-height: 62px;
+  padding: 6px 0;
+  box-sizing: border-box;
 }
 
 .info-form > .info-row {
@@ -244,17 +271,24 @@
 }
 
 .info-label {
+  min-height: 42px;
+  padding: 0 14px;
+  border-radius: 6px;
+  background: #f3eee8;
   color: #4b3c31;
   font-size: 17px;
   font-weight: 800;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
 }
 
 .info-value {
-  min-height: 40px;
-  padding: 8px 12px;
-  border: 2px solid #d8caba;
-  border-radius: 6px;
-  background: #fffdf9;
+  min-height: 42px;
+  padding: 8px 18px;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
   color: #2f2720;
   font-size: 17px;
   box-sizing: border-box;
@@ -264,14 +298,19 @@
 
 .phone-row {
   align-items: start;
+  min-height: 104px;
 }
 
 .phone-row .info-label {
-  padding-top: 8px;
+  min-height: 104px;
+  align-items: flex-start;
+  padding-top: 16px;
 }
 
 .phone-table {
   width: 100%;
+  padding: 8px 18px;
+  box-sizing: border-box;
 }
 
 .phone-header,
@@ -294,45 +333,85 @@
 }
 
 .phone-item {
-  min-height: 52px;
-  margin-top: 4px;
-  padding: 0 10px;
-  border: 2px solid #d8caba;
-  border-radius: 8px;
-  background: #fffdf9;
+  min-height: 36px;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  border-top: 1px solid #eadfce;
+  background: transparent;
   color: #2f2720;
   font-size: 16px;
   box-sizing: border-box;
 }
 
+.phone-item:first-child {
+  border-top: 0;
+}
+
+.phone-note {
+  min-height: 28px;
+  width: fit-content;
+  min-width: 88px;
+  border-radius: 6px;
+  background: #f3eee8;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  justify-self: start;
+  padding: 0 14px;
+  box-sizing: border-box;
+}
+
+.note-info-row {
+  align-items: center;
+}
+
+.note-info-row .info-label {
+  margin-top: 0;
+}
+
+.note-info-value {
+  align-items: center;
+  min-height: 64px;
+  white-space: pre-wrap;
+}
+
 .status-panel {
-  min-height: 382px;
-  padding: 24px 22px 22px;
+  min-height: 100%;
+  padding: 26px 20px 24px;
   border: 2px solid #d8caba;
-  border-radius: 62px;
+  border-radius: 12px;
   background: #fffdf9;
   box-sizing: border-box;
 }
 
 .status-panel h2 {
-  margin: 0 0 18px;
+  margin: 0 0 24px;
   color: #2f2720;
   font-size: 22px;
   font-weight: 800;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.panel-heading-icon {
+  color: #8a6543;
+  font-weight: 800;
 }
 
 .status-card-list {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 14px;
-  margin-bottom: 20px;
+  gap: 16px;
+  margin-bottom: 28px;
 }
 
 .status-card {
-  min-height: 104px;
-  padding: 14px 18px;
+  min-height: 126px;
+  padding: 18px 16px;
   border: 2px solid #d8caba;
-  border-radius: 14px;
+  border-radius: 8px;
   background: #ffffff;
   color: #2f2720;
   text-decoration: none;
@@ -347,20 +426,23 @@
   margin: 0;
   color: #7b6b5c;
   font-size: 16px;
+  text-align: center;
 }
 
 .status-count {
-  margin: 2px 0 0;
+  margin: 10px 0 0;
   color: #2f2720;
   font-size: 32px;
   font-weight: 800;
   line-height: 1.1;
+  text-align: center;
 }
 
 .status-link {
-  margin: 4px 0 0;
+  margin: 10px 0 0;
   color: #7b6b5c;
   font-size: 14px;
+  text-align: center;
 }
 
 .next-memorial {
@@ -368,19 +450,26 @@
 }
 
 .next-memorial h3 {
-  margin: 0 0 8px;
+  margin: 0 0 16px;
   color: #4b3c31;
   font-size: 17px;
   font-weight: 800;
+  display: flex;
+  align-items: center;
+  gap: 12px;
 }
 
 .memorial-card {
-  min-height: 72px;
-  padding: 14px 20px;
+  min-height: 116px;
+  padding: 24px 18px;
   border: 2px solid #d8caba;
-  border-radius: 10px;
+  border-radius: 8px;
   background: #ffffff;
   box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
 }
 
 .memorial-title {
@@ -1186,6 +1275,20 @@
 
 /* 家族表が狭い画面では横スクロール */
 @media (max-width: 800px) {
+  .detail-content,
+  .info-two-column {
+    grid-template-columns: 1fr;
+  }
+
+  .info-row {
+    grid-template-columns: 1fr;
+    gap: 8px;
+  }
+
+  .phone-row .info-label {
+    min-height: 42px;
+  }
+
   .family-list-summary {
     align-items: flex-start;
     flex-direction: column;
@@ -1303,4 +1406,4 @@
 .family-text {
   writing-mode: vertical-rl;
   text-orientation: upright;
-}
+}

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

@@ -17,6 +17,7 @@ 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';
+import { EventService } from '../../services/event-service';
 import {
   FamilyTreeBuilderService,
   FamilyTreeNode
@@ -56,7 +57,6 @@ export class DankaDetail implements AfterViewInit {
   familySearchKeyword = '';
   eventSearchKeyword = '';
   eventStatuses: EventStatus[] = ['未案内', '案内済'];
-  private eventStatusByTargetId: Record<string, EventStatus> = {};
   treeNodes: FamilyTreeNode[] = [];
   layoutNodes: LayoutNode[] = [];
   layoutNodeMap = new Map<string, LayoutNode>();
@@ -90,6 +90,7 @@ export class DankaDetail implements AfterViewInit {
     private familyTreeBuilder: FamilyTreeBuilderService,
     private familyTreeLayout: FamilyTreeLayoutService,
     private familyUnitLayout: FamilyUnitLayoutService,
+    private eventService: EventService,
   ) {
     const tab = this.route.snapshot.queryParams['tab'];
     if (tab === 'family') {
@@ -288,6 +289,7 @@ export class DankaDetail implements AfterViewInit {
         const age = this.currentYear - birthDate.getFullYear();
         return this.getEventTypes(age).map((eventType) => {
           const id = `${family.id}-${eventType}`;
+          const defaultStatus: EventStatus = Number(family.id) % 2 === 0 ? '案内済' : '未案内';
           return {
             id,
             dankaId: family.dankaId,
@@ -299,8 +301,7 @@ export class DankaDetail implements AfterViewInit {
             age,
             eventType,
             note: family.note,
-            status:
-              this.eventStatusByTargetId[id] ?? (Number(family.id) % 2 === 0 ? '案内済' : '未案内'),
+            status: this.eventService.getEventStatus(id, defaultStatus),
           };
         });
       })
@@ -335,7 +336,7 @@ export class DankaDetail implements AfterViewInit {
 
   changeEventStatus(target: EventTarget, status: EventStatus): void {
     target.status = status;
-    this.eventStatusByTargetId[target.id] = status;
+    this.eventService.saveEventStatus(target.id, status);
   }
 
   getKaiki(deathDate: string): number {

src/app/pages/event/event.ts

@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { DankaService } from '../../services/dankaService';
 import { FamilyService } from '../../services/family-service';
+import { EventService } from '../../services/event-service';
 import { EventStatus, EventTarget, EventType } from '../../models/event';
 import { AppHeader } from '../../share/header/app-header';
 import { AppSideMenu } from '../../share/side-menu/app-side-menu';
@@ -37,11 +38,11 @@ export class EventPage {
     { label: '未案内', value: '未案内' },
     { label: '案内済', value: '案内済' },
   ];
-  private statusByTargetId: Record<string, EventStatus> = {};
 
   constructor(
     private dankaService: DankaService,
     private familyService: FamilyService,
+    private eventService: EventService,
   ) {
     this.createEventTargetList();
   }
@@ -68,6 +69,7 @@ export class EventPage {
         }
 
         const id = `${family.id}-${eventType}`;
+        const defaultStatus: EventStatus = Number(family.id) % 2 === 0 ? '案内済' : '未案内';
         this.eventTargets.push({
           id,
           dankaId: family.dankaId,
@@ -79,7 +81,7 @@ export class EventPage {
           age,
           eventType,
           note: family.note,
-          status: this.statusByTargetId[id] ?? (Number(family.id) % 2 === 0 ? '案内済' : '未案内'),
+          status: this.eventService.getEventStatus(id, defaultStatus),
         });
       });
     });
@@ -121,7 +123,7 @@ export class EventPage {
 
   changeStatus(target: EventTarget, status: EventStatus): void {
     target.status = status;
-    this.statusByTargetId[target.id] = status;
+    this.eventService.saveEventStatus(target.id, status);
   }
 
   private getEventTypes(age: number): EventType[] {

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

@@ -7,60 +7,70 @@
 }
 
 .danka-edit-page {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
+  display: grid;
+  grid-template-columns: 172px minmax(0, 1fr);
+  gap: 20px;
+  padding: 0 38px 36px 0;
   background: #f4eee4;
 }
 
 .danka-edit-main {
-  flex: 1;
-  padding-right: 34px;
+  min-width: 0;
   box-sizing: border-box;
 }
 
 .edit-panel {
-  min-height: 650px;
-  padding: 26px 34px 36px;
+  min-height: 760px;
+  padding: 34px 42px 40px;
   background: #ffffff;
   border: 2px solid #d8caba;
-  border-radius: 76px;
+  border-radius: 64px;
   box-sizing: border-box;
 }
 
 .page-title-area {
-  margin-bottom: 28px;
+  margin-bottom: 22px;
 }
 
 .page-title-area h1 {
   margin: 0;
   color: #2f2720;
-  font-size: 32px;
-  line-height: 1.2;
+  font-size: 34px;
+  line-height: 1.1;
   font-weight: 800;
-  letter-spacing: 0.02em;
 }
 
 .edit-form {
+  display: block;
   width: 100%;
+  margin: 0;
+  color: #2f2720;
+}
+
+.edit-form input,
+.edit-form select,
+.edit-form textarea,
+.edit-form button {
+  font-family: inherit;
 }
 
 .edit-content {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 500px;
-  gap: 48px;
+  gap: 32px;
   align-items: start;
 }
 
 .basic-edit-section {
-  padding-left: 8px;
+  padding-left: 0;
 }
 
 .basic-edit-section h2,
 .section-heading h2 {
-  margin: 0 0 18px;
+  margin: 0;
   color: #2f2720;
   font-size: 22px;
+  line-height: 1.3;
   font-weight: 800;
 }
 
@@ -75,21 +85,21 @@
 }
 
 .form-list {
-  width: 650px;
+  width: 100%;
+  margin-top: 12px;
 }
 
 .form-row {
   display: grid;
-  grid-template-columns: 150px 1fr;
-  align-items: start;
-  column-gap: 18px;
-  margin-top: 14px;
+  grid-template-columns: 140px 1fr;
+  align-items: center;
+  gap: 14px;
+  margin-bottom: 12px;
 }
 
 .form-row label {
-  padding-top: 10px;
   color: #4b3c31;
-  font-size: 17px;
+  font-size: 15px;
   font-weight: 800;
 }
 
@@ -101,20 +111,26 @@
 .form-row select,
 .form-row textarea {
   width: 100%;
-  min-height: 46px;
-  padding: 8px 12px;
   border: 2px solid #d8caba;
-  border-radius: 6px;
+  border-radius: 8px;
   background: #fffdf9;
   color: #2f2720;
-  font-size: 17px;
+  font-size: 16px;
+  font-weight: 600;
   font-family: inherit;
   box-sizing: border-box;
   outline: none;
 }
 
+.form-row input,
+.form-row select {
+  height: 46px;
+  padding: 0 14px;
+}
+
 .form-row textarea {
   min-height: 104px;
+  padding: 12px 14px;
   resize: vertical;
   line-height: 1.6;
 }
@@ -124,6 +140,7 @@
 .form-row textarea:focus {
   border-color: #8a6543;
   background: #ffffff;
+  box-shadow: 0 0 0 3px rgba(138, 101, 67, 0.15);
 }
 
 .form-row input[readonly] {
@@ -139,7 +156,8 @@
 }
 
 .form-row-heading {
-  margin-top: 30px;
+  margin: 24px 0 14px;
+  align-items: start;
 }
 
 .form-row-heading label {
@@ -149,7 +167,7 @@
 .sub-section-title {
   margin: 0;
   color: #2f2720;
-  font-size: 18px;
+  font-size: 17px;
   font-weight: 800;
 }
 
@@ -161,10 +179,10 @@
 }
 
 .phone-edit-section {
-  min-height: 382px;
-  padding: 30px 24px 22px;
+  min-height: 240px;
+  padding: 18px 20px;
   border: 2px solid #d8caba;
-  border-radius: 62px;
+  border-radius: 8px;
   background: #fffdf9;
   box-sizing: border-box;
 }
@@ -186,24 +204,24 @@
 }
 
 .householder-area {
-  margin-top: 28px;
-  padding: 22px 26px;
+  margin-top: 0;
+  padding: 18px 20px;
   border: 2px solid #d8caba;
-  border-radius: 14px;
+  border-radius: 8px;
   background: #eadfce;
   box-sizing: border-box;
 }
 
 .householder-area h3 {
-  margin: 0 0 14px;
+  margin: 0 0 12px;
   color: #2f2720;
-  font-size: 18px;
+  font-size: 17px;
   font-weight: 800;
 }
 
 .set-householder-button {
-  width: 170px;
-  height: 42px;
+  width: 148px;
+  height: 46px;
   border: 2px solid #d8caba;
   border-radius: 6px;
   background: #ffffff;
@@ -222,17 +240,17 @@
   display: flex;
   justify-content: flex-end;
   align-items: center;
-  gap: 14px;
-  margin-top: 72px;
+  gap: 12px;
+  margin-top: 26px;
 }
 
 .delete-button,
 .cancel-button,
 .save-button {
-  width: 120px;
+  min-width: 116px;
   height: 46px;
-  border-radius: 6px;
-  font-size: 17px;
+  border-radius: 8px;
+  font-size: 16px;
   font-weight: 800;
   cursor: pointer;
   box-sizing: border-box;
@@ -271,35 +289,23 @@
 
 /* 画面幅が狭い場合 */
 @media (max-width: 1100px) {
-  .edit-content {
+  .danka-edit-page {
     grid-template-columns: 1fr;
-    gap: 28px;
+    padding: 0 24px 32px;
   }
 
-  .form-list {
-    width: 100%;
+  .edit-panel {
+    min-height: auto;
+    border-radius: 28px;
+    padding: 28px 24px 32px;
   }
 
-  .bottom-actions {
-    margin-top: 40px;
+  .edit-content {
+    grid-template-columns: 1fr;
   }
 }
 
 @media (max-width: 800px) {
-  .danka-edit-page {
-    flex-direction: column;
-  }
-
-  .danka-edit-main {
-    width: 100%;
-    padding: 16px 20px 32px;
-  }
-
-  .edit-panel {
-    padding: 24px 20px 30px;
-    border-radius: 32px;
-  }
-
   .page-title-area h1 {
     font-size: 26px;
   }
@@ -313,10 +319,6 @@
     padding-top: 0;
   }
 
-  .phone-edit-section {
-    border-radius: 28px;
-  }
-
   .bottom-actions {
     flex-direction: column;
     align-items: stretch;

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

@@ -101,7 +101,7 @@
               </div>
 
               <!-- 備考 -->
-              <div class="form-row">
+              <div class="form-row note-row">
                 <label for="note">備考</label>
 
                 <textarea

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

@@ -7,38 +7,37 @@
 }
 
 .danka-edit-page {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
+  display: grid;
+  grid-template-columns: 172px minmax(0, 1fr);
+  gap: 20px;
+  padding: 0 38px 36px 0;
   background: #f4eee4;
 }
 
 .danka-edit-main {
-  flex: 1;
-  padding-right: 34px;
+  min-width: 0;
   box-sizing: border-box;
 }
 
 .edit-panel {
-  min-height: 650px;
-  padding: 26px 34px 36px;
+  min-height: 760px;
+  padding: 34px 42px 40px;
   background: #ffffff;
   border: 2px solid #d8caba;
-  border-radius: 76px;
+  border-radius: 64px;
   box-sizing: border-box;
 }
 
 .page-title-area {
-  margin-bottom: 8px;
+  margin-bottom: 22px;
 }
 
 .page-title-area h1 {
   margin: 0;
   color: #2f2720;
-  font-size: 32px;
-  line-height: 1.2;
+  font-size: 34px;
+  line-height: 1.1;
   font-weight: 800;
-  letter-spacing: 0.02em;
 }
 
 .edit-form {
@@ -49,20 +48,21 @@
 }
 
 .edit-form input,
+.edit-form textarea,
 .edit-form button {
   font-family: inherit;
 }
 
 .edit-content {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) 520px;
-  gap: 48px;
+  grid-template-columns: minmax(0, 1fr) 500px;
+  gap: 32px;
   align-items: start;
 }
 
 .basic-edit-section,
 .phone-edit-section {
-  padding-top: 4px;
+  padding-top: 0;
 }
 
 .basic-edit-section h2,
@@ -71,18 +71,19 @@
   margin: 0;
   color: #2f2720;
   font-size: 22px;
+  line-height: 1.3;
   font-weight: 800;
 }
 
 .section-heading p {
-  margin: 6px 0 14px;
+  margin: 4px 0 12px;
   color: #7b6b5c;
-  font-size: 15px;
+  font-size: 14px;
 }
 
-/* 基本情報 */
+/* 蝓ｺ譛ｬ諠・ｱ */
 .form-list {
-  margin-top: 14px;
+  margin-top: 12px;
 }
 
 .form-field {
@@ -93,194 +94,74 @@
 
 .form-row {
   display: grid;
-  grid-template-columns: 120px 1fr;
+  grid-template-columns: 140px 1fr;
   align-items: center;
-  gap: 16px;
-  margin-bottom: 14px;
+  gap: 14px;
+  margin-bottom: 12px;
 }
 
 .form-row label {
   color: #4b3c31;
-  font-size: 17px;
+  font-size: 15px;
   font-weight: 800;
 }
 
 .form-row input,
 .form-row textarea {
   width: 100%;
-  padding: 0 14px;
   border: 2px solid #d8caba;
   border-radius: 8px;
   background: #fffdf9;
   color: #2f2720;
-  font-size: 18px;
+  font-size: 16px;
   font-weight: 600;
   box-sizing: border-box;
   outline: none;
 }
 
 .form-row input {
-  height: 54px;
+  height: 46px;
+  padding: 0 14px;
 }
 
 .form-row textarea {
-  min-height: 108px;
-  padding-top: 14px;
+  min-height: 104px;
+  padding: 12px 14px;
+  line-height: 1.6;
   resize: vertical;
 }
 
-.form-row input:focus,
-.form-row textarea:focus {
-  border-color: #8a6543;
-  box-shadow: 0 0 0 3px rgba(138, 101, 67, 0.15);
-}
-
-/* 電話番号 */
-.phone-table {
-  width: 100%;
-}
-
-.phone-table-header,
-.phone-table-row {
-  display: grid;
-  grid-template-columns: 1.35fr 1.45fr 84px;
-  align-items: center;
-  column-gap: 10px;
-}
-
-.phone-table-header {
-  min-height: 38px;
-  padding: 0 10px;
-  border: 2px solid #d8caba;
-  border-radius: 6px;
-  background: #eadfce;
-  color: #5a4a3c;
-  font-size: 15px;
-  font-weight: 800;
-  box-sizing: border-box;
-}
-
-.phone-table-row {
-  min-height: 56px;
-  margin-top: 4px;
-  padding: 6px 10px;
-  border: 2px solid #d8caba;
-  border-radius: 8px;
-  background: #fffdf9;
-  color: #2f2720;
-  font-size: 16px;
-  box-sizing: border-box;
-}
-
-.phone-table-row > div {
-  display: flex;
-  align-items: center;
-}
-
-.phone-table-row input {
-  width: 100%;
-  height: 38px;
-  padding: 0 10px;
-  border: none;
-  border-radius: 6px;
-  background: transparent;
-  color: #2f2720;
-  font-size: 16px;
-  font-weight: 600;
-  box-sizing: border-box;
-  outline: none;
-}
-
-.phone-table-row input:focus {
-  background: #ffffff;
-  box-shadow: inset 0 0 0 2px #8a6543;
-}
-
-.phone-table-row input::placeholder {
-  color: #9b8b7a;
-  font-weight: 500;
-}
-
-.phone-row-action {
-  justify-content: flex-end;
-}
-
-.remove-phone-button {
-  width: 68px;
-  height: 34px;
-  border: 2px solid #d8caba;
-  border-radius: 6px;
-  background: #ffffff;
-  color: #6a4a35;
-  font-size: 14px;
-  font-weight: 800;
-  cursor: pointer;
-  box-sizing: border-box;
-}
-
-.remove-phone-button:hover {
-  background: #f6efe6;
-}
-
-.phone-action {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 8px;
-}
-
-.add-phone-button {
-  width: 170px;
-  height: 46px;
-  border: 2px solid #d8caba;
-  border-radius: 8px;
-  background: #ffffff;
-  color: #2f2720;
-  font-size: 16px;
-  font-weight: 800;
-  cursor: pointer;
-  box-sizing: border-box;
-}
-
-.add-phone-button:hover {
-  background: #f6efe6;
+.note-row {
+  align-items: start;
 }
 
-/* 入力補助 */
-.support-box {
-  min-height: 142px;
-  margin-top: 56px;
-  padding: 28px 30px;
-  border: 2px solid #d8caba;
-  border-radius: 24px;
-  background: #fffdf9;
-  box-sizing: border-box;
+.note-row label {
+  padding-top: 12px;
 }
 
-.support-box ul {
-  margin: 12px 0 0;
-  padding-left: 22px;
-  color: #6f6257;
-  font-size: 15px;
-  line-height: 1.65;
+.form-row input:focus,
+.form-row textarea:focus {
+  border-color: #8a6543;
+  box-shadow: 0 0 0 3px rgba(138, 101, 67, 0.15);
 }
 
-/* 下部ボタン */
+/* 荳矩Κ繝懊ち繝ｳ */
 .bottom-actions {
   display: flex;
   justify-content: flex-end;
   align-items: center;
   gap: 12px;
-  margin-top: 22px;
+  margin-top: 26px;
 }
 
 .delete-button,
 .cancel-button,
 .save-button {
   min-width: 116px;
-  height: 52px;
+  height: 46px;
   border: 2px solid #d8caba;
   border-radius: 8px;
-  font-size: 17px;
+  font-size: 16px;
   font-weight: 800;
   cursor: pointer;
   box-sizing: border-box;
@@ -307,18 +188,6 @@
   background: #765639;
 }
 
-.bottom-note {
-  width: 700px;
-  margin: 18px 0 22px 36px;
-  padding: 4px 12px;
-  border: 2px solid #d8caba;
-  border-radius: 4px;
-  background: #eadfce;
-  color: #7b6b5c;
-  font-size: 14px;
-  box-sizing: border-box;
-}
-
 .error-message {
   margin: 6px 0 0;
   color: #b33a2f;
@@ -336,21 +205,19 @@
   opacity: 0.7;
 }
 
-.phone-field {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-}
+@media (max-width: 1100px) {
+  .danka-edit-page {
+    grid-template-columns: 1fr;
+    padding: 0 24px 32px;
+  }
 
-.phone-error-message {
-  margin: 4px 0 0;
-  color: #b33a2f;
-  font-size: 12px;
-  font-weight: 700;
-  line-height: 1.4;
-}
+  .edit-panel {
+    min-height: auto;
+    border-radius: 28px;
+    padding: 28px 24px 32px;
+  }
 
-.remove-phone-button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
+  .edit-content {
+    grid-template-columns: 1fr;
+  }
 }

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

@@ -16,9 +16,11 @@ import { AppSideMenu } from '../../share/side-menu/app-side-menu';
 
 import { DankaService } from '../../services/dankaService';
 import { KakochoService } from '../../services/kakocho-service';
+import { FamilyService } from '../../services/family-service';
 
 import { Danka } from '../../models/danka';
 import { Kakocho } from '../../models/kakocho';
+import { Family } from '../../models/family';
 
 @Component({
   selector: 'app-kakocho-edit',
@@ -33,13 +35,16 @@ import { Kakocho } from '../../models/kakocho';
 export class KakochoEdit {
   danka?: Danka;
   kakocho?: Kakocho;
+  sourceFamily?: Family;
   kakochoForm: FormGroup;
   dankaId: string;
+  returnTab: 'family' | 'kakocho' = 'kakocho';
 
   constructor(
     private fb: FormBuilder,
     private dankaService: DankaService,
     private kakochoService: KakochoService,
+    private familyService: FamilyService,
     private route: ActivatedRoute,
     private router: Router,
   ) {
@@ -64,6 +69,12 @@ export class KakochoEdit {
         this.dankaService.getDankaById(dankaId);
     }
 
+    const familyId = this.route.snapshot.queryParams['familyId'];
+    if (familyId) {
+      this.sourceFamily = this.familyService.getFamilyById(familyId);
+      this.returnTab = 'family';
+    }
+
     // 編集対象ID
     const kakochoId =
       this.route.snapshot.params['kakochoId'];
@@ -87,6 +98,12 @@ export class KakochoEdit {
         });
 
       }
+    } else if (this.sourceFamily) {
+      this.kakochoForm.patchValue({
+        name: this.sourceFamily.name,
+        furigana: this.sourceFamily.furigana,
+        relationship: this.sourceFamily.relationship,
+      });
     }
   }
 
@@ -115,7 +132,7 @@ export class KakochoEdit {
 
         dankaId: this.danka?.id ?? '',
 
-        familyId: '',
+        familyId: this.sourceFamily?.id ?? '',
 
         name: formValue.name,
         furigana: formValue.furigana,
@@ -149,5 +166,6 @@ export class KakochoEdit {
   }
 
   cancelKakochoEdit() {
-    this.router.navigate(['/danka-detail', this.danka?.id], { queryParams: { tab: 'kakocho' } });  }
+    this.router.navigate(['/danka-detail', this.danka?.id], { queryParams: { tab: this.returnTab } });
+  }
 }

src/app/services/event-service.ts

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