@charset "utf-8";

/* 建物管理と健康サポート（/system/）だけで使う `.p-system-*`。Figma 2572:369（PC）／2596:639（図のSP） */

/* ============================================================
 * 建物管理：管理実績（約2,000室）
 * ============================================================ */
.p-system-record {
  display: inline-flex;
  align-items: center; /* ラベルと数字は上下中央（Figma 2572:1095）。「室」は数字の下端にそろえる */
  gap: var(--space-24);
  padding: var(--space-20) var(--space-32);
  border-radius: var(--radius-6);
  background: var(--color-brand-tint);
}

.p-system-record__label {
  font-size: var(--font-size-title-small);
  font-weight: 700;
  color: var(--color-ink);
}

.p-system-record__number {
  font-size: 44px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-brand);
}

.p-system-record__number {
  display: inline-flex;
  align-items: baseline;
}

.p-system-record__unit {
  margin-left: var(--space-4);
  font-size: var(--font-size-heading-3);
}

/* 「約」も「室」と同じ大きさ（10.27 岩本さん「字が大きいので、室と同じ大きさに」） */
.p-system-record__unit--before {
  margin-right: var(--space-4);
  margin-left: 0;
}

/* ============================================================
 * 管理システムの図
 * PC：左にオーナー、中央に協同グループ（3つの業務）、右に入居者。上の点線＝賃貸契約、下＝提携企業
 * 線と矢印は CSS で描く（--line の太さ・色、矢じりは border の三角）
 * ============================================================ */
.p-system-diagram {
  --line: 4px;
  --line-color: #5b6670;
  --head: 9px;          /* 矢じりの半分の幅 */
  --owner-color: #f3c94a;
  --tenant-color: #e8706a;
  --partner-color: #1f8f7e;
  --surface: #f4f8fb;
  position: relative;
  display: grid;
  grid-template-columns: 172px minmax(76px, 1fr) minmax(0, 400px) minmax(112px, 1fr) 156px; /* 中央の協同グループを 400px に（Figma） */
  grid-template-areas:
    "owner  contract group patrol tenant"
    ".      .        intro .      ."
    ".      .        partner .    .";
  padding: 104px var(--space-12) var(--space-36);
  border-radius: var(--radius-8);
  background: var(--surface);
}

/* 上の点線（オーナーの上 → 入居者の上）。左右の下端に下向きの矢じり */
.p-system-diagram__contract {
  position: absolute;
  top: 44px;
  left: calc(var(--space-12) + 86px);  /* オーナーの丸の中心 */
  right: calc(var(--space-12) + 78px); /* 入居者の丸の中心 */
  height: 128px; /* 円の上端（104 + 80）の少し手前まで */
  border: var(--line) dashed var(--line-color);
  border-bottom: 0;
}

.p-system-diagram__contract::before,
.p-system-diagram__contract::after {
  content: "";
  position: absolute;
  top: 100%;
  border: var(--head) solid transparent;
  border-top: 12px solid var(--line-color);
  border-bottom: 0;
}

.p-system-diagram__contract::before { left: calc(var(--line) / -2 - var(--head)); }
.p-system-diagram__contract::after  { right: calc(var(--line) / -2 - var(--head)); }

.p-system-diagram__contract-label {
  position: absolute;
  top: 46px;
  left: 50%;
  z-index: 2; /* 丸（z-index: 1）の横の点線より前に出して、文字の下の線を背景色で隠す */
  transform: translate(-50%, -50%);
  padding: 3px var(--space-8);
  background: var(--surface);
  font-size: var(--font-size-label);
  font-weight: 700;
  line-height: 22px;
  white-space: nowrap;
  color: var(--color-ink);
}

/* オーナー・入居者（丸） */
.p-system-diagram__party {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  align-self: start;
}

.p-system-diagram__party--owner  { grid-area: owner;  margin-top: 80px; }
.p-system-diagram__party--tenant { grid-area: tenant; margin-top: 88px; }

.p-system-diagram__circle {
  display: grid;
  place-items: center;
  width: 156px;
  height: 156px;
  border: 4px solid var(--color-white);
  border-radius: 50%;
  background: var(--owner-color);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-ink);
}

.p-system-diagram__party--tenant .p-system-diagram__circle {
  width: 140px;
  height: 140px;
  background: var(--tenant-color);
  font-size: 21px;
  color: var(--color-white);
}

.p-system-diagram__note {
  font-size: var(--font-size-label);
  font-weight: 700;
  line-height: 22px;
  text-align: center;
  color: var(--color-ink);
}

/* 矢印（線は背景、矢じりは疑似要素）。横向き＝管理契約（→）・巡回（↔）、縦向き＝入居者の紹介（↑） */
.p-system-diagram__flow {
  position: relative;
  align-self: start;
  height: var(--line);
  margin: 156px var(--space-6) 0;
  background: var(--line-color);
}

.p-system-diagram__flow--contract { grid-area: contract; margin-right: calc(var(--space-6) + 12px); }
.p-system-diagram__flow--patrol   { grid-area: patrol;   margin-inline: calc(var(--space-6) + 12px); }

.p-system-diagram__flow--contract::after,
.p-system-diagram__flow--patrol::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  border: var(--head) solid transparent;
  border-left: 12px solid var(--line-color);
  border-right: 0;
}

.p-system-diagram__flow--patrol::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  border: var(--head) solid transparent;
  border-right: 12px solid var(--line-color);
  border-left: 0;
}

.p-system-diagram__flow-label {
  position: absolute;
  bottom: calc(100% + var(--space-10));
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--font-size-label);
  font-weight: 700;
  line-height: 22px;
  text-align: center;
  white-space: nowrap;
  color: var(--color-ink);
}

.p-system-diagram__flow--intro {
  grid-area: intro;
  justify-self: center;
  width: var(--line);
  height: 44px;
  margin: 20px 0 var(--space-6);
}

.p-system-diagram__flow--intro::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: var(--head) solid transparent;
  border-bottom: 12px solid var(--line-color);
  border-top: 0;
}

.p-system-diagram__flow--intro .p-system-diagram__flow-label {
  top: 50%;
  bottom: auto;
  left: calc(100% + var(--space-12));
  transform: translateY(-50%);
}

/* 中央：協同グループ */
.p-system-diagram__group {
  grid-area: group;
  overflow: hidden;
  border: 3px solid var(--color-brand);
  border-radius: var(--radius-10);
  background: var(--color-white);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .14);
}

.p-system-diagram__group-head {
  padding: var(--space-14) var(--space-12);
  background: var(--color-brand);
  text-align: center;
  color: var(--color-white);
}

.p-system-diagram__group-name {
  font-size: var(--font-size-heading-2);
  font-weight: 700;
  line-height: 34px;
}

.p-system-diagram__group-members {
  margin-top: 2px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.p-system-diagram__services {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  padding: var(--space-16) var(--space-16) var(--space-18);
}

.p-system-diagram__service {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-14);
  border-radius: var(--radius-6);
  background: var(--color-brand-tint);
}

.p-system-diagram__service-number {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  height: 24px;
  margin-top: 1px;
  padding: 0 var(--space-8) 3px; /* 同上 */
  border-radius: var(--radius-12);
  background: var(--color-brand);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-white);
}

.p-system-diagram__service-title {
  font-size: var(--font-size-title-small);
  font-weight: 700;
  line-height: 26px;
  color: var(--color-ink);
}

.p-system-diagram__service-text {
  word-break: auto-phrase;
  margin-top: 2px;
  font-size: var(--font-size-body-small);
  line-height: 22px;
  color: var(--color-ink-soft);
}

/* 下：提携優良企業・不動産業者 */
.p-system-diagram__partner {
  grid-area: partner;
  justify-self: center;
  padding: var(--space-14) var(--space-28);
  border-radius: 32px;
  background: var(--partner-color);
  font-size: var(--font-size-title);
  font-weight: 700;
  line-height: 28px;
  text-align: center;
  color: var(--color-white);
}

/* 980px を切る幅（タブレット）：丸を少し小さく */
@media (min-width: 768px) and (max-width: 979px) {
  .p-system-diagram {
    grid-template-columns: 130px minmax(80px, 1fr) minmax(0, 360px) minmax(100px, 1fr) 130px;
    padding-inline: var(--space-16);
  }

  .p-system-diagram__contract {
    left: calc(var(--space-16) + 65px);
    right: calc(var(--space-16) + 65px);
  }

  .p-system-diagram__party--owner  { margin-top: 100px; }
  .p-system-diagram__party--tenant { margin-top: 100px; }

  .p-system-diagram__circle,
  .p-system-diagram__party--tenant .p-system-diagram__circle {
    width: 120px;
    height: 120px;
    font-size: 19px;
  }

  .p-system-diagram__contract { height: 148px; }

  .p-system-diagram__note { font-size: 14px; white-space: nowrap; }
}

/* ============================================================
 * 健康サポート
 * ============================================================ */
/* 健康経営優良法人の認定 */
.p-system-cert {
  display: flex;
  align-items: center;
  gap: var(--space-20);
  width: fit-content;
  max-width: 100%;
  padding: var(--space-16) var(--space-28) var(--space-16) var(--space-20);
  border: 1px solid #cfe3dd;
  border-radius: var(--radius-6);
  background: var(--color-white);
}

.p-system-cert__logo {
  flex-shrink: 0;
  width: 110px;
  height: auto;
}

.p-system-cert__title {
  font-size: var(--font-size-title-small);
  font-weight: 700;
  line-height: 26px;
  color: #1f8f7e;
}

.p-system-cert__text {
  margin-top: var(--space-4);
  font-size: var(--font-size-body-small);
  line-height: 26px;
  color: var(--color-ink-soft);
}

/* 働く世代・高齢者の数 */
.p-system-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-20);
}

.p-system-stat {
  padding: var(--space-24) var(--space-28);
  border: 1px solid var(--color-brand-soft);
  border-radius: var(--radius-6);
  background: var(--color-white);
}

.p-system-stat__title {
  font-size: var(--font-size-title-small);
  font-weight: 700;
  line-height: 28px;
  color: var(--color-ink);
}

.p-system-stat__numbers {
  display: flex;
  align-items: flex-end;
  gap: var(--space-16);
  margin-top: var(--space-10);
}

.p-system-stat__value {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.p-system-stat__year {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #56616b;
}

.p-system-stat__number {
  font-size: 34px;
  font-weight: 700;
  line-height: 44px;
  color: var(--color-ink);
}

.p-system-stat__value--future .p-system-stat__number {
  color: var(--color-brand);
}

.p-system-stat__unit {
  margin-left: 2px;
  font-size: 15px;
}

.p-system-stat__arrow {
  font-size: 28px;
  font-weight: 700;
  line-height: 44px;
  color: #56616b;
}

/* 課題3つ。10.29（最終）岩本さん「一括りにして下さい」→ 1つの枠の中に3列（間は縦の罫）。
 * 10.30（追加）：枠の下に▼と、取り組みの一文（.p-system-issues-box__answer） */
.p-system-issues-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.p-system-issues {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-self: stretch;
  border: 1px solid var(--color-brand-soft);
  border-radius: var(--radius-6);
  background: var(--color-white);
}

.p-system-issues-box__arrow {
  width: 28px;
  height: 18px;
  margin-block: var(--space-16);
  background: var(--color-brand);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.p-system-issues-box__answer {
  align-self: stretch;
  padding: var(--space-20) var(--space-24);
  border-radius: var(--radius-6);
  background: var(--color-brand-tint);
  font-size: var(--font-size-title-small);
  font-weight: 700;
  line-height: var(--line-height-heading);
  text-align: center;
  color: var(--color-brand);
}

.p-system-issue {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-10);
  padding: var(--space-24) var(--space-20) 26px; /* 本文の幅 258px＝「社会保険料の負担が重くなります。」が1行に入る */
}

.p-system-issue + .p-system-issue {
  border-left: 1px solid var(--color-brand-soft);
}

.p-system-issue__number {
  display: inline-grid; /* 数字をピルの上下中央に（行の高さに頼らない） */
  place-items: center;
  height: 24px;
  padding: 0 var(--space-10) 3px; /* Noto Sans JP の数字は下に寄るので、下に3px足して見た目の中央に */
  border-radius: var(--radius-12);
  background: var(--color-brand);
  font-size: var(--font-size-label);
  font-weight: 700;
  line-height: 1;
  color: var(--color-white);
}

.p-system-issue__title {
  font-size: var(--font-size-title-small); /* カード見出し 18（ほかのページと同じ） */
  font-weight: 700;
  line-height: var(--line-height-heading);
  color: var(--color-ink);
}

.p-system-issue__text {
  word-break: auto-phrase; /* 語の途中や「す。」だけで折り返さない */
  font-size: var(--font-size-body-small); /* カード本文 15（ほかのページと同じ） */
  line-height: var(--line-height-body);
  color: var(--color-ink-soft);
}

/* 目標 */
.p-system-goal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-32) var(--space-40);
  border-radius: var(--radius-8);
  background: var(--color-brand);
  text-align: center;
  color: var(--color-white);
}

.p-system-goal__text {
  word-break: auto-phrase; /* SP で「で、」だけが次の行に残らないように */
  font-size: var(--font-size-body);
  font-weight: 500;
  line-height: 30px;
}

/* 10.30（追加）：目的の一文。見出しが無くなったので、本文を少し大きく太く。
   11.5（追々加）岩本さん「枠にあった字の大きさで」→ さらに大きく */
.p-system-goal__text--lead {
  font-size: var(--font-size-heading-3);
  font-weight: 700;
  line-height: 38px;
}

/* 提供サービス（個人／法人様） */
.p-system-services {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: var(--space-20);
}

.p-system-service {
  --service-color: var(--color-brand);
  overflow: hidden;
  border: 1px solid var(--color-brand-soft);
  border-radius: var(--radius-8);
  background: var(--color-white);
}

.p-system-service--corporate {
  --service-color: #1f8f7e;
}

.p-system-service__head {
  padding: var(--space-18) var(--space-28);
  background: var(--service-color);
  color: var(--color-white);
}

.p-system-service__title {
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
}

.p-system-service__sub {
  margin-top: 2px;
  font-size: var(--font-size-label);
  font-weight: 500;
  line-height: 22px;
}

.p-system-service__body {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 26px var(--space-28) 30px;
}

.p-system-service__group-title {
  font-size: var(--font-size-title);
  font-weight: 700;
  line-height: 28px;
  color: var(--service-color);
}

.p-system-service__items {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  margin-top: var(--space-12);
}

.p-system-service__item {
  padding-left: var(--space-14);
  border-left: 3px solid var(--color-brand-soft);
}

.p-system-service__item-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 26px;
  color: var(--color-ink);
}

.p-system-service__item-text {
  margin-top: var(--space-4);
  font-size: var(--font-size-body-small);
  line-height: 27px;
  color: var(--color-ink-soft);
}

/* ============================================================
 * SP（767px以下）
 * ============================================================ */
@media (max-width: 767px) {
  .p-system-record {
    gap: var(--space-16);
    padding: var(--space-14) var(--space-20);
  }

  .p-system-record__number { font-size: 34px; }

  /* 図（Figma 2596:639）：オーナーを上に、協同グループを真ん中、下に提携企業と入居者。
     賃貸契約の点線は右端を縦に走らせる（オーナーの右 → 入居者の右） */
  .p-system-diagram {
    --circle: 110px;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "owner    owner"
      "contract contract"
      "group    group"
      "intro    patrol"
      "partner  tenant";
    column-gap: var(--space-12);
    padding: var(--space-24) 28px var(--space-24) var(--space-16);
  }

  .p-system-diagram__party--owner,
  .p-system-diagram__party--tenant {
    margin-top: 0;
  }

  .p-system-diagram__party--owner {
    align-items: flex-start;
    padding-left: calc(25% - var(--circle) / 2);
  }

  .p-system-diagram__party--tenant {
    align-self: end;
  }

  .p-system-diagram__note { display: none; }

  .p-system-diagram__circle,
  .p-system-diagram__party--tenant .p-system-diagram__circle {
    width: var(--circle);
    height: var(--circle);
    font-size: 19px;
  }

  .p-system-diagram__party--tenant .p-system-diagram__circle { font-size: 17px; }

  /* 丸の右から右端の縦線まで、横の点線（丸の側に左向きの矢じり） */
  .p-system-diagram__party::after {
    content: "";
    position: absolute;
    top: calc(var(--circle) / 2 - var(--line) / 2);
    left: calc(50% + var(--circle) / 2 + 12px);
    right: -18px; /* 右端の縦の点線まで */
    border-top: var(--line) dashed var(--line-color);
  }

  .p-system-diagram__party::before {
    content: "";
    position: absolute;
    top: calc(var(--circle) / 2 - var(--head));
    left: calc(50% + var(--circle) / 2);
    border: var(--head) solid transparent;
    border-right: 12px solid var(--line-color);
    border-left: 0;
  }

  .p-system-diagram__party--owner::after  { left: calc(25% + var(--circle) / 2 + 12px); }
  .p-system-diagram__party--owner::before { left: calc(25% + var(--circle) / 2); }

  .p-system-diagram__contract {
    top: calc(var(--space-24) + var(--circle) / 2);
    bottom: calc(var(--space-24) + var(--circle) / 2);
    left: auto;
    right: 10px;
    width: 0;
    height: auto;
    border: 0;
    border-right: var(--line) dashed var(--line-color);
  }

  .p-system-diagram__contract::before,
  .p-system-diagram__contract::after { content: none; }

  /* 「賃貸契約」は点線に重ねず、線の上に置く（10.23 岩本さん「点線上だと見にくいので上か下に」） */
  .p-system-diagram__contract-label {
    top: calc(var(--space-24) + var(--circle) / 2 - var(--space-4));
    left: calc(var(--space-16) + 25% + var(--circle) / 2); /* 横の点線（丸の右〜右端の縦線）の真ん中に */
    right: 10px;
    transform: translateY(-100%);
    padding: 0;
    background: none;
    font-size: 14px;
    text-align: center;
  }

  .p-system-diagram__contract-sub { display: none; }

  /* オーナー → 協同グループ（下向き） */
  .p-system-diagram__flow--contract {
    justify-self: start;
    width: var(--line);
    height: 40px;
    margin: var(--space-12) 0 calc(var(--space-12) + 12px) calc(25% - var(--line) / 2);
  }

  .p-system-diagram__flow--contract::after {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: var(--head) solid transparent;
    border-top: 12px solid var(--line-color);
    border-bottom: 0;
  }

  /* 入居者 ↔ 協同グループ（縦の両矢印）。右の「巡回・立会い」が右端の縦の点線にかからないよう、
     矢印を丸の中心から少し左へ（丸の上には乗ったまま） */
  .p-system-diagram__flow--patrol {
    justify-self: center;
    width: var(--line);
    height: 40px;
    margin: calc(var(--space-12) + 12px) 0;
    transform: translateX(-24px);
  }

  .p-system-diagram__flow--patrol::after {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: var(--head) solid transparent;
    border-top: 12px solid var(--line-color);
    border-bottom: 0;
  }

  .p-system-diagram__flow--patrol::before {
    top: auto;
    bottom: 100%;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    border: var(--head) solid transparent;
    border-bottom: 12px solid var(--line-color);
    border-top: 0;
  }

  .p-system-diagram__flow--intro {
    height: 40px;
    margin: calc(var(--space-12) + 12px) 0 var(--space-12);
  }

  .p-system-diagram__flow-label,
  .p-system-diagram__flow--intro .p-system-diagram__flow-label {
    top: 50%;
    bottom: auto;
    left: calc(100% + var(--space-8));
    transform: translateY(-50%);
    font-size: 14px;
    line-height: 20px;
    text-align: left;
  }

  .p-system-diagram__group-name { font-size: 22px; line-height: 30px; }
  .p-system-diagram__group-members { font-size: 13px; }
  .p-system-diagram__services { padding: var(--space-12); }
  .p-system-diagram__service { padding: var(--space-10) var(--space-12); }
  .p-system-diagram__service-title { font-size: 17px; }

  /* 「提携優良企業・」が1行に入るよう左右の余白は小さめ（375px で16px×7文字が入る） */
  .p-system-diagram__partner {
    align-self: center;
    padding: var(--space-12) var(--space-8);
    border-radius: var(--radius-12);
    font-size: 16px;
    line-height: 24px;
  }

  /* 健康サポート */
  .p-system-cert {
    gap: var(--space-14);
    padding: var(--space-14) var(--space-16);
  }

  .p-system-cert__logo { width: 72px; }
  .p-system-cert__title { font-size: 16px; line-height: 24px; }
  .p-system-cert__text { font-size: var(--font-size-body-small); line-height: 24px; }

  .p-system-stats,
  .p-system-services {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }

  .p-system-stat { padding: var(--space-18) var(--space-20); }
  .p-system-stat__title { font-size: 16px; }
  .p-system-stat__numbers { gap: var(--space-10); }
  .p-system-stat__number { font-size: 28px; line-height: 36px; }
  .p-system-stat__arrow { font-size: 22px; line-height: 36px; }

  .p-system-issues { grid-template-columns: 1fr; }
  .p-system-issue { padding: var(--space-18) var(--space-20); }
  .p-system-issue + .p-system-issue { border-top: 1px solid var(--color-brand-soft); border-left: 0; }
  .p-system-issues-box__arrow { margin-block: var(--space-12); }
  .p-system-issues-box__answer { padding: var(--space-16); font-size: 16px; text-align: left; }
  .p-system-issue__title { font-size: 16px; }

  .p-system-goal { padding: var(--space-24) var(--space-20); }
  .p-system-goal__text { font-size: 16px; line-height: 26px; text-align: left; }

  .p-system-service__head { padding: var(--space-14) var(--space-20); }
  .p-system-service__title { font-size: 22px; }
  .p-system-service__body { gap: var(--space-20); padding: var(--space-20); }
  .p-system-service__group-title { font-size: 18px; }
}

/* 375px 未満は16pxだと「提携優良企業・」が途中で折れるので少し小さく */
@media (max-width: 374px) {
  .p-system-diagram__partner { font-size: 14px; }
}